:root {
    --bg:#0b0e17;
    --panel:#141a26;
    --accent:#5b8cff;
    --accent-grad:linear-gradient(135deg,#5b8cff,#7f5bff);
    --text:#e6ecf5;
    --muted:#8391a7;
    --danger:#ff5f56;
    --warn:#ffb347;
    --ok:#40d18b;
    --radius:14px;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  }
  * { box-sizing:border-box; }
  body {
    margin:0;
    background:radial-gradient(circle at 20% 20%,#1e2740 0%,#0b0e17 70%);
    color:var(--text);
    line-height:1.58;
    -webkit-font-smoothing:antialiased;
  }
  a { color:var(--accent); text-decoration:none; }
  a:hover { text-decoration:underline; }
  header {
    position:sticky; top:0; z-index:100;
    backdrop-filter:blur(14px);
    background:rgba(10,14,25,.78);
    border-bottom:1px solid #273142;
  }
  nav {
    max-width:1260px; margin:0 auto;
    display:flex; gap:.9rem; align-items:center;
    padding:.65rem 1.1rem;
    flex-wrap:wrap;
  }
  nav a.brand {
    font-weight:700;
    background:var(--accent-grad);
    -webkit-background-clip:text;
    color:transparent;
    font-size:1.15rem;
    letter-spacing:.5px;
  }
  nav .spacer { flex:1 }
  nav a.jump {
    padding:.42rem .85rem;
    border-radius:18px;
    font-size:.78rem;
    background:#1d2533;
    color:#b8c5d9;
    transition:.25s;
  }
  nav a.jump:hover { background:var(--accent); color:#fff; }
  main { max-width:1260px; margin:0 auto; padding:2.1rem 1.2rem 4rem; }
  section {
    margin-bottom:3rem;
    scroll-margin-top:84px;
    background:linear-gradient(145deg,#141b29 0%,#111724 70%);
    padding:1.85rem 1.6rem 2.15rem;
    border:1px solid #283347;
    border-radius:var(--radius);
    position:relative;
    overflow:hidden;
  }
  section::before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 85% 15%,rgba(95,139,255,.15),transparent 60%);
    pointer-events:none;
  }
  h1,h2,h3 { line-height:1.25; font-weight:600; }
  h1 { font-size:2rem; margin:0 0 .9rem; }
  h2 { font-size:1.42rem; margin:0 0 1rem; }
  h3 { font-size:1.05rem; margin:1.4rem 0 .55rem; letter-spacing:.5px; }
  p { margin:.65rem 0 1rem; }
  .tag-row { display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 1.15rem; }
  .tag {
    background:#202c3d;
    color:#bcd0ea;
    padding:.35rem .75rem;
    border-radius:26px;
    font-size:.62rem;
    letter-spacing:.5px;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
  }
  .tag.core { background:var(--accent); color:#fff; }
  .grid { display:grid; gap:1.05rem; }
  @media (min-width:880px){
    .grid.cols-3 { grid-template-columns:repeat(3,1fr); }
    .grid.cols-2 { grid-template-columns:repeat(2,1fr); }
    .grid.cols-4 { grid-template-columns:repeat(4,1fr); }
  }
  .panel {
    background:#1c2533;
    border:1px solid #303d52;
    padding:.9rem .95rem 1rem;
    border-radius:12px;
    position:relative;
  }
  .panel.accent {
    border-color:#4e6fb5;
    background:linear-gradient(145deg,#1d2740,#182133 70%);
  }
  .chips { display:flex; flex-wrap:wrap; gap:.55rem; }
  .chip {
    font-size:.68rem;
    padding:.38rem .62rem;
    border-radius:8px;
    background:#263143;
    color:#d3e2f5;
  }
  .chip.alt { background:#3a4760; }
  .chip.warn { background:#5a3b13; color:#ffb347; }
  .chip.danger { background:#4d2022; color:#ff8078; }
  details {
    background:#1a2231;
    border:1px solid #2d3a4e;
    padding:.85rem .95rem;
    border-radius:10px;
    margin:.8rem 0 .95rem;
  }
  details[open] { background:#1f2a3b; }
  details summary { cursor:pointer; font-weight:600; outline:none; }
  code.inline {
    background:#273447;
    padding:.15rem .45rem;
    border-radius:6px;
    font-size:.72rem;
  }
  .flex { display:flex; gap:.75rem; flex-wrap:wrap; }
  .equip {
    background:#233044;
    border:1px solid #32455e;
    padding:.55rem .7rem .6rem;
    border-radius:10px;
    font-size:.7rem;
    width:175px;
    display:flex;
    flex-direction:column;
    gap:.25rem;
  }
  .equip strong { font-weight:600; font-size:.72rem; }
  .label { font-size:.58rem; opacity:.75; letter-spacing:.5px; text-transform:uppercase; }
  .callout {
    border-left:4px solid var(--accent);
    background:#1a2434;
    padding:.8rem .95rem .85rem;
    border-radius:8px;
    margin:1.05rem 0;
    font-size:.8rem;
  }
  .callout.warn { border-left-color:var(--warn); }
  .callout.danger { border-left-color:var(--danger); }
  table { width:100%; border-collapse:collapse; font-size:.78rem; margin:.85rem 0 1.3rem; }
  th,td { padding:.55rem .6rem; border:1px solid #314055; text-align:left; }
  th { background:#223047; font-weight:600; color:#dbe8fa; font-size:.72rem; }
  tbody tr:nth-child(odd){ background:#192434; }
  mark {
    background:#314d86;
    color:#fff;
    padding:.15rem .35rem;
    border-radius:4px;
  }
  .filters { display:flex; gap:.55rem; flex-wrap:wrap; margin:.7rem 0 1rem; }
  .filters button {
    background:#223146;
    border:1px solid #31435b;
    color:#bcd3ef;
    padding:.42rem .75rem;
    font-size:.65rem;
    border-radius:8px;
    cursor:pointer;
    letter-spacing:.5px;
    transition:.2s;
  }
  .filters button.active,
  .filters button:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
  footer {
    text-align:center;
    padding:3rem 1rem 2.2rem;
    font-size:.68rem;
    color:#6f7f96;
  }
  .fade-in { animation:fade .55s ease; }
  @keyframes fade {
    from { opacity:0; transform:translateY(4px); }
    to { opacity:1; transform:translateY(0); }
  }
  .placeholder-img {
    width:100%;
    aspect-ratio:16/7;
    border:1px dashed #334457;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
    color:#59708c;
    background:#17202e;
    margin:.7rem 0 .9rem;
  }
  .inline-badge {
    background:#243247;
    color:#c8dcf4;
    padding:.25rem .55rem;
    font-size:.6rem;
    border-radius:6px;
    margin-left:.4rem;
  }
  .badge-row {
    display:flex; gap:.45rem; flex-wrap:wrap;
    margin:.55rem 0;
  }
  .badge {
    background:#27364b;
    color:#cddbeb;
    font-size:.55rem;
    letter-spacing:.55px;
    padding:.32rem .5rem;
    border-radius:6px;
  }
  .search-box { position:relative; max-width:380px; margin:.65rem 0 1rem; }
  .search-box input {
    width:100%; background:#1c2634; border:1px solid #314055;
    padding:.6rem .75rem; border-radius:9px; color:#dce8f7;
    font-size:.72rem; outline:none; transition:.25s;
  }
  .search-box input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(91,140,255,.2); }
  .rating-grid { display:grid; gap:.7rem; margin:.9rem 0 1.2rem; }
  @media (min-width:640px){ .rating-grid { grid-template-columns:repeat(4,1fr); } }
  .rating-box {
    background:#1e2938; border:1px solid #2d3a4e; padding:.6rem .65rem .7rem;
    border-radius:10px; font-size:.65rem;
  }
  .rating-box strong { display:block; margin-bottom:.3rem; font-size:.66rem; letter-spacing:.4px; }
  .bar {
    height:6px; background:#16202d; border-radius:20px; overflow:hidden; position:relative;
  }
  .bar span {
    position:absolute; inset:0; background:var(--accent-grad);
    width:0; transition:width 1s ease;
  }
  .video-grid { display:grid; gap:1rem; }
  @media (min-width:860px){ .video-grid { grid-template-columns:repeat(3,1fr); } }
  .video-card {
    background:#1c2533; border:1px solid #2f3d51; border-radius:10px;
    overflow:hidden; display:flex; flex-direction:column;
  }
  .video-card iframe, .video-thumb {
    aspect-ratio:16/9; width:100%; border:0;
    background:#101722;
  }
  .video-card .meta { padding:.55rem .65rem .75rem; font-size:.65rem; }
  .resource-grid { display:grid; gap:.85rem; }
  @media (min-width:760px){ .resource-grid { grid-template-columns:repeat(3,1fr); } }
  .res-item {
    background:#1d2736; border:1px solid #2d3a4b;
    padding:.75rem .8rem .8rem; border-radius:10px;
    font-size:.68rem; display:flex; flex-direction:column; gap:.45rem;
  }
  .res-item a { font-weight:600; }
  .impact-up { color:var(--ok); font-weight:600; }
  .impact-down { color:var(--danger); font-weight:600; }
  .impact-neutral { color:#79a2d8; font-weight:600; }
  .meta-tendency { display:flex; gap:.4rem; flex-wrap:wrap; }
  .meta-tag {
    background:#223448; padding:.32rem .55rem; border-radius:6px;
    font-size:.58rem; letter-spacing:.5px;
  }
  .comp-emphasis {
    border-left:3px solid var(--accent);
    padding:.55rem .75rem .6rem;
    background:#1b2534;
    margin:.65rem 0;
    font-size:.7rem;
    border-radius:8px;
  }
  .early-flex { display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 .2rem; }
  .ef-chip {
    background:#2b3a4d; padding:.38rem .6rem; border-radius:7px;
    font-size:.62rem;
  }
  .note { font-size:.62rem; opacity:.75; }
  .danger-text { color:var(--danger); }
  .warn-text { color:var(--warn); }
  .sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); border:0;
  }
  .seo-k { font-weight:600; }