*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#080c18;--bg2:#0e1225;--bg3:#141830;--bg4:#1a1f3a;
  --border:#1f2440;--border2:#2c3260;
  --text:#c8d0ef;--text2:#6b7aa8;--text3:#3d4868;
  --frost:#7ec8e3;--frost2:#4a9db5;--gold:#d4a843;
  --owned-bg:#071a10;--owned-txt:#4ade80;--owned-brd:#14532d;
  --tier-col:#d4a843;--oc:#7ec8e3;--mc:#a78bfa;--rc:#f87171;
  --row-hover:rgba(126,200,227,0.04);--cc:#7ec8e3;
}
html { scroll-behavior: smooth; }
body { background:var(--bg);color:var(--text);font-family:'Exo 2',sans-serif;min-height:100vh;padding-bottom:60px; }

/* SITE HEADER */
.site-header{background:linear-gradient(180deg,#0a0e1e 0%,var(--bg2) 100%);border-bottom:1px solid var(--border2);padding:15px 20px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:100;overflow:hidden;}
.site-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 200% at 50% -50%,rgba(126,200,227,0.06) 0%,transparent 70%);pointer-events:none;}
.site-title{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:#e8f4ff;letter-spacing:.06em;white-space:nowrap;}
.site-title span{color:var(--frost);}
.breadcrumb{display:flex;align-items:center;gap:7px;font-size:.73rem;color:var(--text2);flex:1;flex-wrap:wrap;}
.breadcrumb .sep{color:var(--text3);}
.crumb-link{cursor:pointer;transition:color .15s;}
.crumb-link:hover{color:var(--frost);}
.crumb-cur{color:var(--text);font-weight:500;}
.btn-back{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:.73rem;font-family:'Exo 2',sans-serif;cursor:pointer;transition:border-color .15s,color .15s;}
.btn-back:hover{border-color:var(--frost2);color:var(--frost);}

/* VIEWS */
.view{display:none;}
.view.active{display:block;}

/* HOME */
.home-wrap{padding:26px 18px;max-width:1080px;margin:0 auto;}
.home-intro{text-align:center;margin-bottom:24px;}
.home-intro h2{font-family:'Cinzel',serif;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700;color:#e8f4ff;letter-spacing:.06em;margin-bottom:5px;}
.home-intro p{font-size:.78rem;color:var(--text2);}
.home-divider{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--frost2),transparent);margin:9px auto;}
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:11px;}
.class-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.class-card:hover{box-shadow:0 0 0 1px var(--cc);border-color:var(--cc);}
.class-card-head{display:flex;align-items:center;gap:9px;padding:11px 13px;border-left:3px solid var(--cc);background:var(--bg3);}
.class-icon{width:24px;height:24px;border-radius:50%;background:var(--cc);opacity:.85;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#000;font-weight:700;font-family:'Cinzel',serif;flex-shrink:0;}
.class-name{font-family:'Cinzel',serif;font-size:.82rem;font-weight:600;color:var(--cc);letter-spacing:.04em;}
.spec-list{display:block;padding:5px 0;}
.spec-item{display:flex;align-items:center;gap:7px;padding:8px 14px;cursor:pointer;font-size:.8rem;color:var(--text2);transition:background .12s,color .12s;border-bottom:1px solid var(--border);}
.spec-item:last-child{border-bottom:none;}
.spec-item:hover{background:var(--row-hover);color:var(--text);}
.spec-item.has-data{color:var(--text);}
.spec-item.has-data::after{content:'BiS';font-size:.57rem;padding:1px 5px;border-radius:3px;background:rgba(126,200,227,.15);color:var(--frost2);letter-spacing:.06em;font-weight:600;margin-left:auto;}
.spec-item.is-you{color:var(--cc);font-weight:600;}
.spec-item.is-you::before{content:'★';font-size:.6rem;color:var(--cc);}
.spec-prog{font-size:.63rem;color:var(--text3);margin-left:4px;}
.spec-prog.has-owned{color:var(--owned-txt);}

/* SPEC PAGE HEADER */
.spec-header{padding:16px 20px 12px;background:var(--bg2);border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.spec-class-badge{font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:4px;font-weight:600;background:rgba(127,127,255,.08);color:var(--cc);border:1px solid rgba(127,127,255,.2);}
.spec-title{font-family:'Cinzel',serif;font-size:clamp(1rem,3vw,1.4rem);font-weight:700;color:#e8f4ff;letter-spacing:.05em;}
.spec-title em{color:var(--cc);font-style:normal;}

/* TABS */
.tabs-bar{display:flex;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 18px;position:sticky;top:55px;z-index:60;}
.tab-btn{padding:10px 16px;font-size:.77rem;font-family:'Exo 2',sans-serif;font-weight:500;letter-spacing:.08em;color:var(--text2);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--cc);border-bottom-color:var(--cc);}

/* CONTROLS */
.controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:9px 16px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:99px;z-index:50;}
.progress-wrap{display:flex;align-items:center;gap:9px;flex:1;min-width:150px;}
.progress-bar{flex:1;height:5px;background:var(--border2);border-radius:99px;overflow:hidden;min-width:40px;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--frost2),var(--cc));border-radius:99px;transition:width .3s;}
.progress-label{font-size:.71rem;color:var(--cc);white-space:nowrap;font-weight:500;}
.btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-size:.73rem;font-family:'Exo 2',sans-serif;cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap;}
.btn:hover{border-color:var(--cc);color:var(--cc);}
.btn.active{border-color:var(--cc);color:var(--cc);background:rgba(126,200,227,.07);}
.btn-reset{color:#f87171;border-color:#4c1010;}
.btn-reset:hover{border-color:#f87171;color:#fca5a5;background:rgba(248,113,113,.07);}
.btn-main{color:var(--text2);border-color:var(--border2);}
.btn-main.active{color:var(--gold);border-color:var(--gold);background:rgba(212,168,67,.1);}
.btn-main:hover{border-color:var(--gold) !important;color:var(--gold) !important;}

/* LEGEND */
.legend{display:flex;flex-wrap:wrap;gap:13px;padding:8px 16px;border-bottom:1px solid var(--border);font-size:.69rem;color:var(--text2);align-items:center;}
.legend-item{display:flex;align-items:center;gap:5px;}
.pip{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.swatch{width:11px;height:11px;border-radius:2px;flex-shrink:0;}
.badge{font-size:.57rem;padding:1px 5px;border-radius:3px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.badge-o{background:rgba(126,200,227,.15);color:var(--oc);}
.badge-m{background:rgba(167,139,250,.15);color:var(--mc);}
.badge-r{background:rgba(248,113,113,.15);color:var(--rc);}

/* TAB PANELS */
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* NO DATA */
.nodata-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px;gap:16px;text-align:center;padding:48px 20px;}
.nodata-glyph{font-size:3rem;opacity:.18;line-height:1;}
.nodata-badge{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;padding:3px 10px;border-radius:4px;background:rgba(126,200,227,.07);color:var(--text3);border:1px solid var(--border2);}
.nodata-title{font-family:'Cinzel',serif;font-size:1.15rem;color:var(--text2);letter-spacing:.04em;}
.nodata-sub{font-size:.77rem;color:var(--text3);max-width:360px;line-height:1.7;}
.nodata-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent);}
.nodata-hint{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:11px 16px;font-size:.69rem;color:var(--text3);font-family:monospace;max-width:400px;text-align:left;line-height:1.9;width:100%;}
.nodata-hint strong{color:var(--text2);}
.nodata-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.nodata-action-link{font-size:.72rem;color:var(--frost2);text-decoration:none;padding:5px 12px;border-radius:6px;border:1px solid var(--border2);background:var(--bg3);transition:border-color .15s,color .15s;}
.nodata-action-link:hover{border-color:var(--frost2);color:var(--frost);}

/* MATRIX */
.table-wrap{overflow-x:auto;padding:15px;}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;min-width:660px;}
.table-wrap thead th{background:var(--bg2);padding:10px 11px;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--border2);white-space:nowrap;}
.table-wrap th:not(:last-child){border-right:1px solid var(--border);}
.table-wrap th.slot-hd{color:var(--text3);width:110px;padding-left:16px;}
.table-wrap th.overall-hd{color:var(--oc);}
.table-wrap th.mythic-hd{color:var(--mc);}
.table-wrap th.raid-hd{color:var(--rc);}
.table-wrap tbody tr:hover td{background:var(--row-hover) !important;}
.table-wrap tbody tr:nth-child(even) td{background:rgba(255,255,255,.012);}
.table-wrap td{padding:0;border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:middle;}
.table-wrap td:last-child{border-right:none;}
.table-wrap tbody tr:last-child td{border-bottom:none;}
.table-wrap td.slot-td{padding:8px 10px 8px 16px;font-size:.67rem;font-weight:600;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;white-space:nowrap;pointer-events:none;min-width:110px;}
.item-cell{padding:8px 11px;cursor:pointer;user-select:none;transition:background .15s;position:relative;min-height:50px;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.item-cell:hover{background:rgba(126,200,227,.06) !important;}
.item-cell.owned{background:var(--owned-bg) !important;}
.item-cell.owned .iname{color:var(--owned-txt);}
.na-cell{padding:8px 11px;font-size:.71rem;color:var(--text3);font-style:italic;min-height:50px;display:flex;align-items:center;}
.iname{font-size:.78rem;font-weight:500;color:#a8c4f0;line-height:1.3;display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap;}
.isrc{font-size:.66rem;color:var(--text2);line-height:1.3;}
.wh-link{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(168,196,240,0.3);transition:color .15s,border-color .15s;}
.wh-link:hover{color:var(--frost);border-bottom-color:var(--frost);}
.item-cell.owned .wh-link,.loc-item-name .wh-link{color:inherit;}
.tier-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tier-col);flex-shrink:0;margin-top:4px;}
.check-icon{display:none;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;background:#166534;flex-shrink:0;margin-top:2px;}
.item-cell.owned .check-icon{display:inline-flex;}
.item-cell::after{content:'click to mark';position:absolute;bottom:2px;right:6px;font-size:.56rem;color:var(--text3);opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap;font-style:italic;}
.item-cell:not(.owned):hover::after{opacity:1;}
.item-cell.owned::after{content:'click to unmark';}
.item-cell.owned:hover::after{opacity:1;}
body.dim-mode .tab-panel.active .item-cell.owned .iname,
body.dim-mode .tab-panel.active .item-cell.owned .isrc{opacity:.17;}

/* BY LOCATION */
.byloc-wrap{padding:15px;}
.loc-group{margin-bottom:24px;}
.loc-group-title{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.loc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.loc-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.loc-card-head{padding:10px 13px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.loc-card.type-dungeon .loc-card-head{border-left:3px solid var(--oc);}
.loc-card.type-raid    .loc-card-head{border-left:3px solid var(--rc);}
.loc-card.type-crafted .loc-card-head{border-left:3px solid var(--gold);}
.loc-card.type-system  .loc-card-head{border-left:3px solid var(--mc);}
.loc-name{font-family:'Cinzel',serif;font-size:.77rem;font-weight:600;color:var(--text);letter-spacing:.04em;}
.loc-type-badge{font-size:.59rem;letter-spacing:.1em;padding:2px 6px;border-radius:4px;text-transform:uppercase;white-space:nowrap;}
.type-dungeon .loc-type-badge{background:rgba(126,200,227,.13);color:var(--oc);}
.type-raid    .loc-type-badge{background:rgba(248,113,113,.13);color:var(--rc);}
.type-crafted .loc-type-badge{background:rgba(212,168,67,.13);color:var(--gold);}
.type-system  .loc-type-badge{background:rgba(167,139,250,.13);color:var(--mc);}
.loc-needed-tag{font-size:.63rem;color:var(--text2);margin-left:auto;white-space:nowrap;}
.loc-item-row{display:flex;align-items:flex-start;gap:8px;padding:8px 13px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
.loc-item-row:last-child{border-bottom:none;}
.loc-item-row:hover{background:rgba(126,200,227,.04);}
.loc-item-row.owned{background:var(--owned-bg);}
.loc-item-row.owned .loc-item-name{color:var(--owned-txt);}
.loc-slot-tag{font-size:.6rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);min-width:52px;padding-top:3px;flex-shrink:0;}
.loc-item-main{flex:1;min-width:0;}
.loc-item-name{font-size:.78rem;font-weight:500;color:#a8c4f0;line-height:1.3;display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap;}
.loc-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.loc-check{display:none;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;background:#166534;flex-shrink:0;margin-top:2px;}
.loc-item-row.owned .loc-check{display:inline-flex;}
body.hide-owned-mode .loc-item-row.owned{display:none;}

/* CONTENT WIDTH CONSTRAINT
   Sticky bars remain full-width so their backgrounds span edge-to-edge.
   Only the actual content areas are capped for widescreen. */
.home-wrap,
.table-wrap,
.byloc-wrap { max-width: 1400px; margin-left: auto; margin-right: auto; }


footer{text-align:center;padding:20px 16px 10px;font-size:.66rem;color:var(--text3);letter-spacing:.07em;}
footer a{color:var(--frost2);text-decoration:none;}
footer a:hover{color:var(--frost);}
::-webkit-scrollbar{width:6px;height:6px;background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}