/* Shared visual foundation for all layout concepts: palette, type, and common components. */
:root{
  --bg:#08090F; --bg2:#0D0F1A; --card:#121524; --card2:#191D31; --line:#222740; --line2:#30365A;
  --text:#E7E9F5; --muted:#8C92B4; --primary:#8B5CF6; --accent:#22D3EE; --accent2:#B79CFF;
  --s:#F43F5E; --a:#F59E0B; --b:#3B82F6;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:'Space Grotesk',"Segoe UI",system-ui,sans-serif; min-height:100vh; font-size:15px; line-height:1.5;}
h1,h2,h3{font-weight:700; letter-spacing:-0.015em;}
button{font-family:inherit; color:inherit;}
a{color:var(--accent);}
.hidden{display:none !important;}
.brand span{color:var(--accent);}
.i{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.eyebrow{font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:1.2px; font-weight:600; font-family:var(--mono);}
.note{color:var(--muted); font-size:13px; line-height:1.65;}
.linkbtn{background:none; border:none; color:var(--accent); font-size:12.5px; font-weight:500; cursor:pointer;}
.linkbtn:hover{text-decoration:underline;}

/* ---------- inputs & chips ---------- */
.field{background:var(--card); border:1px solid var(--line); color:var(--text); padding:9px 14px; border-radius:8px; font:inherit; font-size:13.5px;}
.field:focus{outline:none; border-color:var(--primary);}
select.field{cursor:pointer; padding-right:10px;}
.chip{background:var(--card); border:1px solid var(--line); color:var(--muted); padding:7px 13px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; user-select:none; transition:background .15s, color .15s, border-color .15s;}
.chip:hover{color:var(--text); border-color:var(--line2);}
.chip.on{background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600;}
.count{color:var(--muted); font-size:12px; font-family:var(--mono);}

/* ---------- tier badges ---------- */
.tier{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:26px; padding:0 7px; border-radius:6px; font-weight:600; font-size:12.5px; font-family:var(--mono); color:#0B0C0E;}
.tier.S{background:var(--s); color:#fff;}
.tier.A{background:var(--a);}
.tier.B{background:var(--b); color:#fff;}
.tier.C{background:#2A2F4A; color:#C9CCE3;}
.tier.sm{min-width:24px; height:21px; font-size:11px; border-radius:5px;}
.t-S{background:rgba(244,63,94,.075) !important; border-color:rgba(244,63,94,.28) !important;}
.t-A{background:rgba(245,158,11,.07) !important; border-color:rgba(245,158,11,.26) !important;}
.t-B{background:rgba(59,130,246,.065) !important; border-color:rgba(59,130,246,.24) !important;}

/* ---------- item card ---------- */
.item{display:block; width:100%; text-align:left; font:inherit; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; position:relative; overflow:hidden; animation:rise .25s ease both;}
.item:hover{border-color:var(--line2) !important; background:var(--card2);}
.item .tier{position:absolute; top:12px; right:12px;}
.item .ico{font-size:30px;}
.item h3{font-size:15px; margin:10px 0 2px; font-weight:600;}
.item .meta{color:var(--muted); font-size:11.5px; margin-top:7px;}
@keyframes rise{from{opacity:0; transform:translateY(6px);}}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:60px 0; font-size:14px;}

/* ---------- detail content + modal ---------- */
.dhead{display:flex; gap:16px; align-items:center;}
.dhead .dico{font-size:48px; line-height:1;}
.section{margin-top:24px;}
.section h4{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; font-weight:600;}
.section h4::before{content:""; width:3px; height:12px; border-radius:2px; background:var(--primary);}
.callout{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--primary); border-radius:8px; padding:13px 16px; font-size:13.5px; line-height:1.6;}
.statrow{display:flex; gap:8px; flex-wrap:wrap;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:9px 16px; text-align:center;}
.stat .v{font-size:18px; font-weight:600; color:var(--accent); font-family:var(--mono);}
.stat .k{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
.overlay{position:fixed; inset:0; background:rgba(3,4,10,.78); backdrop-filter:blur(4px); z-index:50; display:flex; justify-content:center; padding:32px 16px; overflow-y:auto;}
.detail{background:var(--bg2); border:1px solid var(--line2); border-radius:14px; max-width:720px; width:100%; height:fit-content; padding:28px 32px 36px; position:relative; animation:pop .16s ease; box-shadow:0 24px 64px rgba(0,0,0,.5);}
@keyframes pop{from{transform:scale(.985); opacity:.5;}}
.closebtn{position:absolute; top:16px; right:16px; background:var(--card); border:1px solid var(--line); color:var(--muted); width:32px; height:32px; border-radius:8px; font-size:14px; cursor:pointer;}
.closebtn:hover{border-color:var(--line2); color:var(--text);}

/* ---------- prose, pager, table, FAQ ---------- */
.prose p, .prose li{font-size:13.5px; line-height:1.75;}
.prose p+p{margin-top:10px;}
.prose ul{margin:8px 0 8px 22px;}
.prose b{color:var(--accent2);}
.pager{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px;}
.pager button{background:var(--card); border:1px solid var(--line); color:var(--accent); padding:9px 14px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer;}
.pager button:hover:not(:disabled){border-color:var(--primary);}
.pager button:disabled{opacity:.35; cursor:default;}
.pager span{color:var(--muted); font-size:11.5px; font-family:var(--mono);}
table{width:100%; border-collapse:collapse; font-size:13px;}
th{color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line2); font-size:11px; text-transform:uppercase; letter-spacing:.7px; font-weight:600; cursor:pointer; user-select:none;}
th:hover{color:var(--accent);}
td{padding:9px 10px; border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,.025);}
.faq{border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:12px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:var(--card); border:none; color:var(--text); font-size:13.5px; font-weight:600; padding:14px 16px; cursor:pointer;}
.faq-q:hover, .faq-item.open .faq-q{background:var(--card2);}
.faq-item.open .faq-q{color:var(--accent2);}
.faq-ic{color:var(--accent); font-size:16px; transition:transform .25s;}
.faq-item.open .faq-ic{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--bg);}
.faq-a div{padding:13px 16px 16px; font-size:13px; line-height:1.65; color:var(--muted);}

/* ---------- a11y ---------- */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
::selection{background:rgba(139,92,246,.4);}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--line2); border-radius:5px;}
::-webkit-scrollbar-track{background:transparent;}
@media (max-width:640px){ .detail{padding:22px 18px 28px;} }
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} html{scroll-behavior:auto;} }