/* =========================================================
   Legend Vault — Shared stylesheet
   Premium Collector Dashboard (Bloomberg / Coinbase Pro feel)
   Palette : Violet #8b5cf6, Gold #d7af67, Dark #05070d, Green #88d672
   ========================================================= */

:root{
  --bg:#05070d;
  --bg2:#0a1020;
  --panel:#08111f;
  --panel-2:#0b1526;
  --panel-3:#0f1b31;
  --line:rgba(141,111,255,.14);
  --line-soft:rgba(255,255,255,.08);
  --text:#f5f7ff;
  --muted:#93a0c7;
  --soft:#657096;
  --violet:#8b5cf6;
  --violet-2:#6f47ff;
  --violet-3:#5b35da;
  --cyan:#62ccff;
  --green:#88d672;
  --green-2:#74df78;
  --red:#f0708a;
  --gold:#d7af67;
  --gold-2:#f0c878;
  --shadow:0 24px 80px rgba(0,0,0,.42);
  --radius-xl:26px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-sm:14px;
  --sidebar:196px;
  --gutter:18px;
}

*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 14% 10%, rgba(98,204,255,.10), transparent 18%),
    radial-gradient(circle at 80% 8%, rgba(139,92,246,.12), transparent 16%),
    radial-gradient(circle at 60% 60%, rgba(139,92,246,.06), transparent 25%),
    linear-gradient(180deg,#08101d 0%, #05070d 100%);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:.01em;
  padding:16px;
}

/* ===== LAYOUT PRINCIPAL ===== */
.app{
  max-width: 1680px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap: var(--gutter);
  align-items:start;
  min-width:0;
}

.main{
  display:grid;
  gap: var(--gutter);
  min-width:0;
}
.main > *{
  min-width:0;
  max-width:100%;
}

/* ===== PANEL ===== */
.panel{
  background:
    radial-gradient(circle at 100% 0%, rgba(111,71,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(7,14,27,.98), rgba(4,8,18,.98));
  border:1px solid rgba(104,122,255,.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  min-width:0;
}

.panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.panel.content{
  padding:22px 24px;
}

.panel.content-lg{
  padding:26px 28px;
}

/* ===== SIDEBAR ===== */
.sidebar{
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height: calc(100vh - 32px);
  position:sticky;
  top:16px;
  min-width:0;
}

.brand{
  padding:8px 8px 0;
  text-align:center;
}

.crest{
  width:72px;
  height:72px;
  margin:0 auto 14px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 35%, rgba(215,175,103,.20), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(215,175,103,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--gold-2);
  font-size:34px;
  font-weight:800;
}

.brand h1{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.brand p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.25em;
}

.nav{
  display:grid;
  gap:6px;
  margin-top:6px;
}

.nav a{
  display:flex;
  align-items:center;
  gap:12px;
  color:#cad1e7;
  text-decoration:none;
  padding:11px 12px;
  border-radius:12px;
  font-size:13px;
  border:1px solid transparent;
  transition:.18s ease;
}

.nav a:hover{background:rgba(255,255,255,.03)}
.nav a.active{
  background:linear-gradient(180deg, rgba(139,92,246,.22), rgba(104,122,255,.12));
  border-color:rgba(139,92,246,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 24px rgba(111,71,255,.18);
}

.ico{
  width:22px;height:22px;border-radius:7px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  display:grid;place-items:center;
  font-size:11px;
  color:#e9edff;
  flex:0 0 auto;
}

.member{
  margin-top:auto;
  padding:16px 14px;
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139,92,246,.15), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
}

.member-badge{
  width:54px;height:54px;border-radius:16px;margin-bottom:12px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, #5230cf, #2b195f);
  border:1px solid rgba(255,255,255,.10);
  color:#f0ca7e;
  font-size:22px;
}

.member .kicker{
  font-size:10px;
  color:var(--gold);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.member .tier{
  margin-top:8px;
  font-size:30px;
  font-weight:700;
  letter-spacing:.02em;
}

.member .sub{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

.member .bar{
  margin-top:14px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.member .bar span{
  display:block;height:100%;width:76%;
  background:linear-gradient(90deg, var(--violet), #b485ff);
  border-radius:inherit;
}

/* ===== PAGE HEADER ===== */
.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:6px 8px 2px;
  flex-wrap:wrap;
  min-width:0;
}

.page-head .h-title{
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
  line-height:1.12;
  overflow-wrap:anywhere;
}

.page-head .crumb{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.page-head-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  padding:10px 14px;
  color:#d4daf2;
  font-size:13px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  text-decoration:none;
  transition:.18s ease;
  min-width:0;
  justify-content:center;
  line-height:1.2;
  text-align:center;
  white-space:normal;
}
.btn:hover{background:rgba(255,255,255,.05)}

.btn.primary{
  background:linear-gradient(180deg, rgba(139,92,246,.40), rgba(111,71,255,.28));
  border-color:rgba(139,92,246,.42);
  color:#f2eaff;
  box-shadow: 0 0 24px rgba(111,71,255,.22);
}
.btn.primary:hover{background:linear-gradient(180deg, rgba(139,92,246,.55), rgba(111,71,255,.36))}

.btn.gold{
  background:linear-gradient(180deg, rgba(240,200,120,.22), rgba(196,150,71,.12));
  border-color:rgba(215,175,103,.35);
  color:#f3d79a;
}

/* ===== COMMON ELEMENTS ===== */
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
  min-width:0;
}

.title{
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}

.title .info{
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;
  color:var(--muted);
  font-size:11px;
}

.title-lg{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
}

.pill{
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  padding:9px 12px;
  color:#d4daf2;
  font-size:12px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:.18s;
  min-width:0;
  text-align:center;
}
.pill:hover{background:rgba(255,255,255,.05)}
.pill.active{
  background:linear-gradient(180deg, rgba(139,92,246,.24), rgba(104,122,255,.12));
  border-color:rgba(139,92,246,.32);
  color:#f2eaff;
}

.muted{color:var(--muted)}
.soft{color:var(--soft)}
.green{color:var(--green)}
.red{color:var(--red)}
.gold{color:var(--gold-2)}
.violet{color:#b987ff}

.badge{
  display:inline-block;
  background:rgba(139,92,246,.20);
  color:#b591ff;
  padding:3px 9px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(139,92,246,.16);
  letter-spacing:.04em;
  max-width:100%;
  overflow-wrap:anywhere;
}
.badge.gold{
  background:rgba(215,175,103,.16);
  color:#f0ca7e;
  border-color:rgba(215,175,103,.26);
}
.badge.green{
  background:rgba(136,214,114,.16);
  color:#b7e9a6;
  border-color:rgba(136,214,114,.26);
}
.badge.red{
  background:rgba(240,112,138,.16);
  color:#f7a6b5;
  border-color:rgba(240,112,138,.26);
}
.badge.cyan{
  background:rgba(98,204,255,.14);
  color:#a4def8;
  border-color:rgba(98,204,255,.22);
}
.badge.soft{
  background:rgba(255,255,255,.04);
  color:#c7cce3;
  border-color:rgba(255,255,255,.12);
}

/* KPI cards generic */
.kpi-grid{
  display:grid;
  gap:14px;
  min-width:0;
}
.kpi-grid.c4{grid-template-columns: repeat(4, minmax(0, 1fr))}
.kpi-grid.c3{grid-template-columns: repeat(3, minmax(0, 1fr))}
.kpi-grid.c2{grid-template-columns: repeat(2, minmax(0, 1fr))}

.stat{
  padding:18px 16px;
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(139,92,246,.08), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.05);
  min-width:0;
}

.stat .t{
  color:#c6ccec;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.stat .n{
  margin-top:10px;
  font-size:28px;
  font-weight:800;
  color:#f2eeff;
  letter-spacing:-.03em;
  line-height:1.1;
  overflow-wrap:anywhere;
}

.stat .d{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.stat.accent-v .n{color:#a679ff}
.stat.accent-g .n{color:var(--green)}
.stat.accent-gold .n{color:var(--gold-2)}

/* Progress bar */
.progress{
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--violet), #b285ff);
  border-radius:inherit;
}
.progress.gold span{background:linear-gradient(90deg, var(--gold), var(--gold-2))}
.progress.green span{background:linear-gradient(90deg, #62c24f, var(--green))}

/* ===== SEGMENT TABS ===== */
.tabs{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  max-width:100%;
  flex-wrap:wrap;
}

.tabs button{
  background:transparent;
  border:none;
  color:#b3bad8;
  font-size:12px;
  padding:7px 14px;
  border-radius:9px;
  cursor:pointer;
  letter-spacing:.04em;
  font-family:inherit;
  min-width:0;
}
.tabs button.active{
  background:linear-gradient(180deg, rgba(139,92,246,.25), rgba(104,122,255,.12));
  color:#f5f0ff;
  border:1px solid rgba(139,92,246,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

/* ===== TABLES ===== */
.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:720px;
}
.tbl thead th{
  text-align:left;
  padding:12px 14px;
  color:var(--muted);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tbl tbody td{
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:#e0e4f4;
  vertical-align:middle;
}
.tbl tbody tr:hover td{
  background:rgba(139,92,246,.04);
}
.tbl tbody tr:last-child td{border-bottom:none}

.num{font-variant-numeric: tabular-nums; font-feature-settings:"tnum"}

/* ===== SLAB / CARD VISUAL ===== */
.slab-thumb{
  width:100%;
  aspect-ratio: .72 / 1;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 9%),
    linear-gradient(145deg, #45495b, #181d2f 10%, #5b6274 16%, #1a2031 20%, #0c1120 32%, #111a2f 58%, #454d62 90%, #8a93a7 100%);
  border:1px solid rgba(255,255,255,.14);
  padding:8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 20px rgba(0,0,0,.30);
  position:relative;
}

.slab-thumb .grade{
  height:26px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  background:linear-gradient(180deg, rgba(245,247,255,.10), rgba(245,247,255,.04));
  border:1px solid rgba(255,255,255,.14);
  color:#f5f6ff;
  font-size:11px;
  font-weight:800;
}

.slab-thumb .grade .tag{
  min-width:28px;height:20px;border-radius:5px;
  padding:0 6px;
  display:grid;place-items:center;
  font-size:10px;
  background:linear-gradient(180deg, rgba(240,200,120,.95), rgba(196,150,71,.92));
  color:#281d05;
  font-weight:800;
}

.slab-thumb .art{
  margin-top:6px;
  height:calc(100% - 32px);
  border-radius:10px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(240,200,120,.24);
}

.art.g1{ background: radial-gradient(circle at 60% 18%, rgba(255,255,255,.18), transparent 18%), linear-gradient(145deg, #e9e2d0, #8a7444 30%, #324566 58%, #1f1420);}
.art.g2{ background: radial-gradient(circle at 54% 16%, rgba(255,255,255,.16), transparent 16%), linear-gradient(145deg, #2e213f, #0d1732 56%, #7439a7);}
.art.g3{ background: radial-gradient(circle at 50% 22%, rgba(255,205,120,.16), transparent 16%), linear-gradient(145deg, #512a18, #a6521f 30%, #25192a 64%, #181b32);}
.art.g4{ background: radial-gradient(circle at 52% 16%, rgba(255,255,255,.16), transparent 16%), linear-gradient(145deg, #252e43, #111824 40%, #1f4c87 70%, #19131d);}
.art.g5{ background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.16), transparent 16%), linear-gradient(145deg, #37234d, #22142b 38%, #6f44a0 68%, #1a1320);}
.art.g6{ background: radial-gradient(circle at 56% 20%, rgba(255,255,255,.14), transparent 18%), linear-gradient(145deg, #134c3c, #09241e 50%, #3ec9a6);}
.art.g7{ background: radial-gradient(circle at 54% 20%, rgba(255,255,255,.14), transparent 18%), linear-gradient(145deg, #4a1235, #0f0818 50%, #e67bbc);}
.art.g8{ background: radial-gradient(circle at 54% 22%, rgba(255,195,80,.18), transparent 16%), linear-gradient(145deg, #48361a, #141618 50%, #c68a2c);}
.art.g9{ background: radial-gradient(circle at 54% 20%, rgba(98,204,255,.22), transparent 18%), linear-gradient(145deg, #0b2a42, #091028 50%, #54bae4);}
.art.g10{ background: radial-gradient(circle at 54% 20%, rgba(255,255,255,.12), transparent 18%), linear-gradient(145deg, #25163b, #0a1020 50%, #5c3aa9);}

.art-label{
  position:absolute;
  top:8px; left:8px; right:8px;
  font-size:9px;
  line-height:1.22;
  color:#f0d79c;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.38);
}

.art-footer{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:9px;
  color:#d8deef;
}

/* ===== GRID helpers ===== */
.grid-2{display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:var(--gutter); min-width:0}
.grid-3{display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:var(--gutter); min-width:0}
.grid-4{display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:var(--gutter); min-width:0}

/* ===== CHART SHELLS ===== */
.chart-shell{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.006));
  border:1px solid rgba(255,255,255,.04);
  position:relative;
  overflow:hidden;
}

.chart-shell svg{position:absolute; inset:0; width:100%; height:100%}

.chart-shell .axis-y{
  position:absolute;
  left:10px; top:18px; bottom:40px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:#7882a9; font-size:11px;
}

.chart-shell .axis-x{
  position:absolute;
  left:62px; right:18px; bottom:10px;
  display:flex; justify-content:space-between;
  color:#7882a9; font-size:11px;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}

.panel, .page-head{
  animation: fadeUp .28s ease both;
}

.panel:nth-child(1){animation-delay:.02s}
.panel:nth-child(2){animation-delay:.05s}
.panel:nth-child(3){animation-delay:.08s}
.panel:nth-child(4){animation-delay:.11s}
.panel:nth-child(5){animation-delay:.14s}
.panel:nth-child(6){animation-delay:.17s}

/* ===== SEARCH ===== */
.search{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  color:#d4daf2;
  font-size:13px;
  min-width:240px;
}
.search input{
  background:transparent;
  border:none;
  outline:none;
  color:inherit;
  width:100%;
  font-family:inherit;
  font-size:13px;
}
.search input::placeholder{color:#6a7290}

/* ===== FILTERS STICKY ===== */
.filters{
  position:sticky;
  top:0;
  z-index:5;
  padding:14px 20px;
  border:1px solid rgba(104,122,255,.12);
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(111,71,255,.10), transparent 28%),
    linear-gradient(180deg, rgba(9,14,27,.96), rgba(5,9,20,.96));
  backdrop-filter: blur(12px);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  box-shadow: var(--shadow);
  min-width:0;
  max-width:100%;
}

.select{
  appearance:none;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  padding:9px 28px 9px 12px;
  color:#d4daf2;
  font-size:12px;
  font-family:inherit;
  cursor:pointer;
  background-image: linear-gradient(45deg, transparent 50%, #8b93b4 50%),
                    linear-gradient(135deg, #8b93b4 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat:no-repeat;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px){
  .app{grid-template-columns: 1fr}
  .sidebar{position:static;min-height:auto}
  .kpi-grid.c4{grid-template-columns: repeat(2, 1fr)}
  .grid-2,.grid-3,.grid-4{grid-template-columns: 1fr}
}

@media (max-width: 720px){
  body{padding:10px}
  .app{gap:14px}
  .main{order:1}
  .sidebar{order:2;padding:14px;border-radius:18px}
  .panel{border-radius:18px}
  .panel.content{padding:18px}
  .panel.content-lg{padding:20px}
  .page-head{align-items:flex-start;padding:4px 2px 0}
  .page-head > div:first-child{min-width:0}
  .page-head-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .page-head-actions .btn,
  .page-head-actions .search{
    width:100%;
    min-width:0;
  }
  .filters{
    position:static;
    padding:14px;
    border-radius:16px;
    overflow-x:hidden;
  }
  .filters .select,
  .filters .tabs{
    flex:1 1 150px;
    min-width:0;
  }
  .filters .tabs{margin-left:0 !important}
  .panel-header{align-items:flex-start}
  .panel-header .tabs{width:100%}
  .tabs{display:flex}
  .tabs button{flex:1 1 auto;padding:8px 10px}
  .kpi-grid.c4,
  .kpi-grid.c3,
  .kpi-grid.c2{grid-template-columns:1fr}
  .stat{padding:16px}
  .stat .n{font-size:24px;letter-spacing:0}
  .tbl{
    display:block;
    overflow-x:auto;
    max-width:100%;
  }
}