:root{
    --bg:#0a1826; --panel:#0e2236; --panel2:#102a42; --line:#1c3d5a; --line2:#26496a;
    --ink:#e7f1fb; --ink-dim:#9db6cf; --paper:#0d2540; --grid:#163a5b;
    --cyan:#57c7ff; --cyan-deep:#2b9fe0; --good:#46d68a; --warn:#ffc24b; --bad:#ff6b6b;
    --caution:#ff8c42; --hazard:#ffd400;
    --disp:"Saira Condensed", "Arial Narrow", Arial, sans-serif;
    --body:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 700px at 80% -10%, #103253 0%, transparent 60%),
      var(--bg);
    color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .app{max-width:1320px; margin:0 auto; padding:18px 18px 60px;}

  /* Header */
  .hdr{display:flex; align-items:stretch; gap:16px; margin-bottom:18px;}
  .brand{display:flex; align-items:center; gap:14px; flex:1;}
  .logo{
    width:52px; height:52px; flex:none; border:1.5px solid var(--cyan); border-radius:8px;
    display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:20px;
    color:var(--cyan); letter-spacing:1px; background:linear-gradient(180deg,#0e2740,#0b1f33);
    box-shadow:inset 0 0 22px rgba(87,199,255,.12);
  }
  .brandtext h1{font-family:var(--disp); font-weight:700; letter-spacing:2.5px; font-size:30px; margin:0; line-height:1;}
  .brandtext p{margin:5px 0 0; color:var(--ink-dim); font-size:12.5px; letter-spacing:.4px; text-transform:uppercase;}
  .hazard{
    width:120px; flex:none; align-self:stretch; border-radius:8px; opacity:.85;
    background:repeating-linear-gradient(135deg, var(--hazard) 0 12px, #0e2236 12px 24px);
    -webkit-mask:linear-gradient(#000,#000); border:1px solid var(--line2);
  }

  /* Layout */
  .grid{display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start;}
  .rail{
    background:linear-gradient(180deg, var(--panel), #0b1e31); border:1px solid var(--line);
    border-radius:12px; padding:16px; position:sticky; top:14px;
  }
  .stage-wrap{min-width:0;}

  .field{margin-bottom:14px;}
  label{display:block; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-dim); margin-bottom:7px; font-weight:600;}
  label .mono{color:var(--cyan); text-transform:none; letter-spacing:0; font-size:13px;}
  input[type="text"]{
    width:100%; background:var(--paper); border:1px solid var(--line2); color:var(--ink);
    padding:10px 12px; border-radius:8px; font-family:var(--body); font-size:14px; outline:none;
  }
  input[type="text"]:focus{border-color:var(--cyan); box-shadow:0 0 0 3px rgba(87,199,255,.14);}
  input[type="text"]::placeholder{color:#5e7a96;}

  .chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
  .chip{
    font-family:var(--body); font-size:12px; padding:6px 10px; border-radius:20px; cursor:pointer;
    background:var(--paper); border:1px solid var(--line2); color:var(--ink-dim); transition:.12s;
  }
  .chip:hover{border-color:var(--cyan-deep); color:var(--ink);}
  .chip.active{background:rgba(87,199,255,.16); border-color:var(--cyan); color:var(--cyan);}

  .bikeselect{
    width:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none;
    padding:11px 38px 11px 13px; border:1px solid var(--line); border-radius:8px;
    background-color:var(--paper); color:var(--ink); font-family:inherit;
    font-size:14px; font-weight:600; cursor:pointer; letter-spacing:.2px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2357c7ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 13px center;
    transition:border-color .12s, box-shadow .12s;
  }
  .bikeselect:hover{border-color:var(--cyan-deep);}
  .bikeselect:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(87,199,255,.16);}
  .bikeselect optgroup{background:var(--panel); color:var(--cyan); font-weight:700; font-style:normal;}
  .bikeselect option{background:var(--paper); color:var(--ink); font-weight:500; padding:6px;}
  .bikecaption{
    display:flex; align-items:center; gap:8px; margin:7px 2px 16px;
    font-family:var(--mono); font-size:11.5px; color:var(--ink-dim);
  }
  .bikecaption .dot{width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:none;}
  .bikecaption.empty{color:var(--warn);}

  .rowctl{display:flex; align-items:center; gap:10px;}
  input[type="range"]{
    -webkit-appearance:none; appearance:none; flex:1; height:5px; border-radius:5px;
    background:linear-gradient(90deg, var(--cyan-deep), var(--line2)); outline:none;
  }
  input[type="range"]:disabled{opacity:.4; background:var(--line2);}
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:18px; height:18px; border-radius:50%; cursor:pointer;
    background:var(--cyan); border:2px solid #0a1826; box-shadow:0 0 8px rgba(87,199,255,.6);
  }
  input[type="range"]::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%; cursor:pointer; background:var(--cyan); border:2px solid #0a1826;
  }
  .numin{
    width:62px; background:var(--paper); border:1px solid var(--line2); color:var(--cyan);
    padding:6px 8px; border-radius:6px; font-family:var(--mono); font-size:13px; text-align:center; outline:none;
  }
  .numin:focus{border-color:var(--cyan);}
  #inVal{font-size:12.5px; color:var(--cyan); white-space:nowrap;}

  .chk{display:flex; align-items:center; gap:8px; cursor:pointer; text-transform:none; letter-spacing:.2px; font-size:12.5px; color:var(--ink-dim);}
  .chk input{accent-color:var(--cyan); width:15px; height:15px;}

  .toggle{display:flex; gap:6px;}
  .toggle button{
    flex:1; font-family:var(--body); font-size:12px; padding:9px 6px; border-radius:8px; cursor:pointer;
    background:var(--paper); border:1px solid var(--line2); color:var(--ink-dim); transition:.12s; line-height:1.2;
  }
  .toggle button:hover{color:var(--ink); border-color:var(--cyan-deep);}
  .toggle button.active{background:rgba(87,199,255,.16); border-color:var(--cyan); color:var(--cyan); font-weight:600;}

  /* Stage */
  .stage{
    background:
      linear-gradient(180deg, rgba(13,37,64,.5), rgba(10,24,38,.5)),
      var(--paper);
    border:1px solid var(--line2); border-radius:12px; overflow:hidden; position:relative;
    box-shadow:inset 0 0 60px rgba(0,0,0,.35);
  }
  .stage svg{display:block; width:100%; height:auto;}

  .verdict{
    margin-top:14px; border:1px solid var(--line2); border-radius:12px; padding:14px 16px;
    display:flex; align-items:center; gap:14px; background:var(--panel);
    border-left-width:5px;
  }
  .verdict .vtag{
    font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:1.5px; padding:5px 9px;
    border-radius:6px; flex:none; text-transform:uppercase;
  }
  .verdict .vbody h3{margin:0; font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:.5px;}
  .verdict .vbody p{margin:3px 0 0; color:var(--ink-dim); font-size:13px;}
  .v-good{border-left-color:var(--good);} .v-good .vtag{background:rgba(70,214,138,.16); color:var(--good);}
  .v-ok{border-left-color:var(--good);} .v-ok .vtag{background:rgba(70,214,138,.16); color:var(--good);}
  .v-warn{border-left-color:var(--warn);} .v-warn .vtag{background:rgba(255,194,75,.16); color:var(--warn);}
  .v-caution{border-left-color:var(--caution);} .v-caution .vtag{background:rgba(255,140,66,.18); color:var(--caution);}
  .v-bad{border-left-color:var(--bad);} .v-bad .vtag{background:rgba(255,107,107,.16); color:var(--bad);}

  .stats{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:14px;}
  .stat{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:11px 12px;}
  .stat .s-label{font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-dim); font-weight:600;}
  .stat .s-val{font-family:var(--mono); font-size:19px; font-weight:500; margin-top:5px; color:var(--ink);}
  .stat .s-sub{font-size:11px; color:var(--ink-dim); margin-top:3px; line-height:1.35;}
  .pos{color:var(--good);} .neg{color:var(--bad);}

  .legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; padding:11px 14px; background:var(--panel); border:1px solid var(--line); border-radius:10px;}
  .legend .lg{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-dim); font-family:var(--mono);}
  .swatch{width:22px; height:0; border-top-width:3px; border-top-style:solid; display:inline-block;}

  .recommend{margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px 15px;}
  .recommend h4{margin:0 0 4px; font-family:var(--disp); font-weight:600; font-size:14.5px; letter-spacing:1.2px; color:var(--good); text-transform:uppercase;}
  .recommend .rc-sub{font-size:11.5px; color:var(--ink-dim); margin-bottom:11px; line-height:1.45;}
  .rc-grid{display:flex; flex-wrap:wrap; gap:8px;}
  .rc-card{display:flex; flex-direction:column; gap:2px; padding:8px 11px; border:1px solid var(--line2); border-left:3px solid var(--good);
    border-radius:8px; background:var(--paper); cursor:pointer; transition:.12s; min-width:0;}
  .rc-card:hover{border-color:var(--good); background:#10314e;}
  .rc-card.active{box-shadow:inset 0 0 0 1px var(--good); background:rgba(70,214,138,.10);}
  .rc-name{font-weight:600; font-size:13px; color:var(--ink);}
  .rc-meta{font-family:var(--mono); font-size:10.5px; color:var(--ink-dim);}
  .rc-empty{font-size:12.5px; color:var(--warn); line-height:1.5;}

  .specs{margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px;}
  .specs h4{margin:0 0 10px; font-family:var(--disp); font-weight:600; font-size:15px; letter-spacing:1.5px; color:var(--cyan); text-transform:uppercase;}
  .spectable{display:grid; grid-template-columns:repeat(2,1fr); gap:7px 26px;}
  .specrow{display:flex; justify-content:space-between; gap:10px; border-bottom:1px dotted var(--line2); padding-bottom:6px; font-size:13px;}
  .specrow .k{color:var(--ink-dim);}
  .specrow .v{font-family:var(--mono); color:var(--ink); text-align:right;}

  .note{margin-top:14px; font-size:11.5px; color:#7c97b3; line-height:1.55; border-left:2px solid var(--line2); padding-left:12px;}

  @media (max-width:900px){
    .grid{grid-template-columns:1fr;}
    .rail{position:static;}
    .stats{grid-template-columns:repeat(2,1fr);}
    .spectable{grid-template-columns:1fr;}
    .hazard{display:none;}
    .brandtext h1{font-size:25px;}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

  /* ===================== SHARED CHROME ===================== */
  a.brand{ text-decoration:none; color:inherit; }
  .hdr{ flex-wrap:wrap; }
  .topnav{ display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; align-self:center; margin-left:auto; }
  .topnav a{ color:var(--ink-dim); text-decoration:none; font-size:13px; letter-spacing:.4px; padding:6px 4px; border-bottom:2px solid transparent; transition:.12s; }
  .topnav a:hover{ color:var(--ink); border-bottom-color:var(--line2); }
  .langsel{ display:flex; gap:3px; margin-left:8px; padding:3px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
  .langsel button{ font:inherit; font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-dim);
    background:transparent; border:0; padding:4px 7px; border-radius:5px; cursor:pointer; transition:.12s; }
  .langsel button:hover{ color:var(--ink); }
  .langsel button.active{ background:var(--cyan); color:#06192b; }

  .ftr{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-dim); font-size:12.5px; }
  .ftr-links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:10px; }
  .ftr-links a{ color:var(--cyan); text-decoration:none; }
  .ftr-links a:hover{ text-decoration:underline; }
  .ftr-note{ margin:0 0 8px; max-width:760px; line-height:1.55; }
  .ftr-copy{ margin:0; color:#6f8aa6; }

  /* ===================== COOKIE BANNER ===================== */
  .cookiebar{ position:fixed; left:0; right:0; bottom:0; z-index:90; background:rgba(8,22,38,.97);
    border-top:1px solid var(--line2); box-shadow:0 -10px 30px rgba(0,0,0,.4); backdrop-filter:blur(4px); }
  .cookiebar[hidden]{ display:none; }
  .cookiebar-in{ max-width:1320px; margin:0 auto; padding:14px 18px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
  .cookiebar-in > div:first-child{ flex:1; min-width:260px; }
  .cookiebar strong{ display:block; font-family:var(--disp); letter-spacing:1px; font-size:15px; margin-bottom:3px; }
  .cookiebar p{ margin:0; font-size:12.5px; color:var(--ink-dim); line-height:1.5; }
  .cookiebar-btns{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
  .cookiebar .cb-link{ color:var(--cyan); font-size:12.5px; text-decoration:none; margin-right:4px; }
  .cookiebar .cb-link:hover{ text-decoration:underline; }
  .cookiebar button{ font:inherit; font-weight:600; font-size:13px; padding:9px 16px; border-radius:8px; cursor:pointer; border:1px solid var(--line2); transition:.12s; }
  .cb-rej{ background:transparent; color:var(--ink); }
  .cb-rej:hover{ border-color:var(--ink-dim); }
  .cb-acc{ background:var(--cyan); border-color:var(--cyan); color:#06192b; }
  .cb-acc:hover{ filter:brightness(1.07); }

  /* ===================== LEGAL PAGES ===================== */
  .legalwrap{ max-width:860px; }
  .legal h1{ font-family:var(--disp); letter-spacing:1.5px; font-size:30px; margin:6px 0 4px; }
  .legal .updated{ color:var(--ink-dim); font-size:12.5px; font-family:var(--mono); margin-bottom:18px; }
  .legal h2{ font-family:var(--disp); letter-spacing:1px; font-size:19px; color:var(--cyan); margin:26px 0 8px; }
  .legal h3{ font-size:15px; margin:18px 0 6px; color:var(--ink); }
  .legal p, .legal li{ color:#cfe0f0; line-height:1.65; font-size:14.5px; }
  .legal ul{ padding-left:20px; }
  .legal a{ color:var(--cyan); }
  .legal .tmpl-warn{ background:rgba(255,194,75,.10); border:1px solid rgba(255,194,75,.4); border-left:4px solid var(--warn);
    border-radius:10px; padding:13px 16px; margin:14px 0 8px; font-size:13px; color:#ffe1a6; line-height:1.55; }
  .legal code, .legal .ph{ font-family:var(--mono); background:var(--paper); border:1px solid var(--line2); border-radius:5px; padding:1px 6px; font-size:12.5px; color:var(--cyan); }

  /* ===================== ADMIN ===================== */
  .admin-shell{ max-width:980px; }
  .admin-warn{ background:rgba(255,107,107,.10); border:1px solid rgba(255,107,107,.45); border-left:4px solid var(--bad);
    border-radius:10px; padding:13px 16px; margin-bottom:18px; font-size:13px; color:#ffc9c9; line-height:1.55; }
  .admin-login{ max-width:380px; margin:40px auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; }
  .admin-login h2{ font-family:var(--disp); letter-spacing:1px; margin:0 0 4px; }
  .admin-login p{ color:var(--ink-dim); font-size:13px; margin:0 0 16px; }
  .admin-login input{ width:100%; padding:11px 12px; background:var(--paper); border:1px solid var(--line2); border-radius:9px; color:var(--ink); font:inherit; margin-bottom:12px; }
  .admin-login button, .adm-btn{ font:inherit; font-weight:600; padding:10px 16px; border-radius:9px; border:1px solid var(--line2); background:var(--cyan); color:#06192b; cursor:pointer; }
  .admin-login .err{ color:var(--bad); font-size:12.5px; min-height:16px; margin-top:2px; }
  .admin-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
  .admin-tabs button{ font:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:8px; border:1px solid var(--line2); background:var(--panel); color:var(--ink-dim); cursor:pointer; }
  .admin-tabs button.active{ background:var(--panel2); color:var(--ink); border-color:var(--cyan); }
  .adm-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:16px; }
  .adm-card h3{ margin:0 0 12px; font-family:var(--disp); letter-spacing:.8px; color:var(--cyan); }
  .adm-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
  .adm-row label{ font-size:12px; color:var(--ink-dim); min-width:120px; }
  .adm-row input, .adm-row select, .adm-row textarea{ flex:1; min-width:140px; padding:9px 10px; background:var(--paper); border:1px solid var(--line2); border-radius:8px; color:var(--ink); font:inherit; }
  .adm-btn.sec{ background:transparent; color:var(--ink); }
  .adm-btn.danger{ background:var(--bad); border-color:var(--bad); color:#2a0a0a; }
  .adm-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .adm-table th, .adm-table td{ text-align:left; padding:7px 8px; border-bottom:1px solid var(--line2); }
  .adm-table th{ color:var(--ink-dim); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
  .adm-table .x{ color:var(--bad); cursor:pointer; font-weight:700; }
  .adm-muted{ color:var(--ink-dim); font-size:12.5px; line-height:1.5; }
  .adm-stat{ display:inline-block; background:var(--paper); border:1px solid var(--line2); border-radius:8px; padding:8px 14px; margin:0 8px 8px 0; font-family:var(--mono); }