:root{
      --bg:#10150f;
      --card:#161d15;
      --text:#e8eee4;
      --muted:#9dac9a;
      --accent:#4A6F3D;
      --border:#2b3729;
      --input:#0c120b;
      --shadow:0 12px 40px rgba(0,0,0,.35);
      --radius:12px;
      --radius-sm:8px;
      --header-h:72px;
    }

    html[data-theme="light"]{
      --bg:#f2f5ee;
      --card:#ffffff;
      --text:#1b2a1a;
      --muted:#5b6e58;
      --accent:#486A3A;
      --border:#d8e2d3;
      --input:#ffffff;
      --shadow:0 12px 40px rgba(2,6,23,.08);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;height:auto;display:block}

    /* ===== Sticky icon nav buttons (shared) ===== */
    .nav-iconbar{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .nav-ico-btn{
      display:grid;
      grid-template-rows:auto auto;
      justify-items:center;
      align-items:center;
      gap:4px;
      min-width:76px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:16px;
      background:var(--card);
      color:var(--text);
      cursor:pointer;
      font-weight:900;
      text-decoration:none;
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .nav-ico-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(74,111,61,.35);
      box-shadow:0 10px 28px rgba(0,0,0,.12);
    }
    .nav-ico-btn:active{ transform:translateY(0); }
    .nav-ico{ font-size:18px; line-height:1; opacity:.95; }
    .nav-lbl{ font-size:11px; line-height:1.1; color:var(--muted); font-weight:800; }
    @media (max-width: 420px){
      .nav-ico-btn{ min-width:0; flex:1 1 0; padding:10px 8px; }
    }

    .wrap{max-width:1280px;margin:0 auto;padding:18px}
    @media (max-width:720px){
      .wrap{padding:14px}
    }

    .app-header{
      position:sticky;
      top:0;
      z-index:1000;
      min-height:var(--header-h);
      border-bottom:1px solid var(--border);
      background:color-mix(in srgb, var(--bg) 92%, transparent);
      backdrop-filter:blur(12px);
    }

    /* Mobile/tablet: force header to stay pinned (some browsers are flaky with sticky) */
    @media (max-width: 1024px){
      .app-header{
        position:fixed;
        left:0;
        right:0;
        width:100%;
      }
      .wrap{
        padding-top:calc(var(--header-h) + 14px);
      }
    }

    .app-header-inner{
      max-width:1280px;
      margin:0 auto;
      min-height:var(--header-h);
      padding:0 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      flex-shrink:0;
    }
    .brand-mark{
      width:40px;
      height:40px;
      border-radius:12px;
      background:linear-gradient(135deg, var(--accent), rgba(74,111,61,.55));
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
      font-size:14px;
      box-shadow:0 10px 24px rgba(74,111,61,.22);
    }
    .brand-text{line-height:1.1}
    .brand-title{
      font-size:16px;
      font-weight:800;
      letter-spacing:.2px;
    }
    .brand-sub{
      margin-top:3px;
      font-size:12px;
      color:var(--muted);
    }

    /* Inline actions near logo (mobile only) */
    .header-inline-actions{
      display:none;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    @media (max-width: 768px){
      .app-header-inner{
        gap:12px;
      }
      .header-inline-actions{
        display:flex;
        flex:1 1 auto;
        justify-content:flex-start;
        align-items:center;
        overflow:hidden;
      }
      .header-inline-actions .nav-ico-btn--sm{
        min-width:40px;
        padding:8px 10px;
        border-radius:14px;
        grid-template-rows:auto;
      }
      .header-inline-actions .nav-ico-btn--sm .nav-lbl{ display:none; }

      .header-view-switch{
        display:inline-flex;
        border:1px solid var(--border);
        border-radius:14px;
        background:color-mix(in srgb, var(--card) 88%, var(--bg));
        overflow:hidden;
      }
      .header-view-btn{
        appearance:none;
        border:0;
        background:transparent;
        color:var(--muted);
        min-height:40px;
        min-width:40px;
        padding:0 10px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        border-right:1px solid var(--border);
        font-weight:900;
      }
      .header-view-btn:last-child{ border-right:0; }
      .header-view-btn.active{
        background:color-mix(in srgb, var(--accent) 18%, transparent);
        color:var(--text);
      }
      .header-view-btn .view-ico{
        font-size:15px;
        line-height:1;
        opacity:.95;
      }
    }

    .main-nav{
      display:flex;
      align-items:center;
      gap:8px;
      justify-content:center;
      flex:1;
      min-width:0;
    }

    .nav-link,
    .nav-trigger{
      position:relative;
      height:42px;
      padding:0 14px;
      border-radius:6px;
      border:1px solid transparent;
      background:transparent;
      color:var(--text);
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      transition:.16s ease;
      white-space:nowrap;
    }

    .nav-link:hover,
    .nav-trigger:hover{
      background:transparent;
      border-color:transparent;
      color:color-mix(in srgb, var(--text) 84%, var(--accent));
    }

    .nav-link.active,
    .nav-trigger.active{
      background:transparent;
      border-color:transparent;
    }

    .nav-link.active::after,
    .nav-trigger.active::after{
      content:"";
      position:absolute;
      left:8px;
      right:8px;
      bottom:3px;
      height:2px;
      border-radius:2px;
      background:var(--accent);
    }

    .compare-link{
      position:relative;
      gap:10px;
    }

    .compare-count{
      min-width:20px;
      height:20px;
      padding:0 5px;
      border-radius:4px;
      border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
      background:color-mix(in srgb, var(--accent) 18%, transparent);
      color:var(--text);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      font-weight:800;
      line-height:1;
    }

    .nav-group{
      position:relative;
    }
    .nav-trigger .chev{
      font-size:11px;
      opacity:.7;
      transition:transform .16s ease;
    }
    .nav-group.open .nav-trigger .chev{
      transform:rotate(180deg);
    }

    .nav-dropdown{
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      min-width:220px;
      padding:8px;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:10px;
      box-shadow:var(--shadow);
      display:none;
    }
    .nav-group.open .nav-dropdown{
      display:block;
    }

    .dropdown-link{
      min-height:42px;
      padding:0 12px;
      border-radius:8px;
      display:flex;
      align-items:center;
      color:var(--text);
      font-size:14px;
      font-weight:600;
      transition:.16s ease;
    }
    .dropdown-link:hover{
      background:rgba(255,255,255,.04);
    }
    .dropdown-link.active{
      background:rgba(74,111,61,.10);
      color:var(--text);
    }

    .header-side{
      display:flex;
      align-items:center;
      gap:10px;
      flex-shrink:0;
    }

    .header-profile{
      position:relative;
    }

    .profile-trigger{
      height:38px;
      padding:0 12px;
      border-radius:8px;
      font-size:13px;
      font-weight:700;
    }

    .profile-menu{
      right:0;
      left:auto;
      min-width:240px;
    }

    .dropdown-meta{
      padding:8px 12px 10px;
      margin:0 0 4px;
      border-bottom:1px solid var(--border);
      color:var(--muted);
      font-size:12px;
      font-weight:700;
      line-height:1.35;
      word-break:break-word;
    }

    .profile-login-link{
      height:38px;
      padding:0 12px;
      border-radius:8px;
      font-size:13px;
      font-weight:700;
    }

    @media (min-width:1081px){
      .header-profile:hover .profile-menu,
      .header-profile:focus-within .profile-menu{
        display:block;
      }

      .header-profile:hover .profile-trigger .chev,
      .header-profile:focus-within .profile-trigger .chev{
        transform:rotate(180deg);
      }
    }

    .user-pill{
      padding:8px 12px;
      border:1px solid var(--border);
      border-radius:8px;
      color:var(--muted);
      font-size:13px;
      display:flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
    }
    .user-pill a{
      color:var(--text);
      font-weight:700;
    }

    .iconbtn{
      width:42px;
      height:42px;
      border-radius:8px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      cursor:pointer;
      display:grid;
      place-items:center;
      transition:.14s ease;
      user-select:none;
      padding:0;
    }
    .iconbtn:hover{
      border-color:rgba(74,111,61,.24);
      background:rgba(74,111,61,.06);
    }

    .burger{
      display:none;
    }

    .mobile-nav{
      display:none;
      border-top:1px solid var(--border);
      background:var(--card);
    }
    .mobile-nav.open{
      display:block;
    }
    .mobile-nav-inner{
      max-width:1280px;
      margin:0 auto;
      padding:12px 18px 16px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .mobile-link,
    .mobile-toggle{
      position:relative;
      min-height:44px;
      padding:0 14px;
      border-radius:8px;
      border:1px solid transparent;
      background:transparent;
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
    }
    .mobile-link.active,
    .mobile-toggle.active{
      background:transparent;
      border-color:transparent;
    }
    .mobile-link.active::after,
    .mobile-toggle.active::after{
      content:"";
      position:absolute;
      left:8px;
      right:8px;
      bottom:3px;
      height:2px;
      border-radius:2px;
      background:var(--accent);
    }

    .mobile-sub{
      display:none;
      padding:4px 0 4px 12px;
      margin-top:4px;
      border-left:2px solid rgba(74,111,61,.18);
    }
    .mobile-sub.open{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .mobile-sublink{
      min-height:40px;
      padding:0 12px;
      border-radius:6px;
      display:flex;
      align-items:center;
      font-size:14px;
      font-weight:600;
      color:var(--muted);
    }
    .mobile-sublink.active{
      background:rgba(74,111,61,.08);
      color:var(--text);
    }

    .mobile-profile-name{
      min-height:38px;
      border-radius:6px;
      border:1px solid var(--border);
      padding:0 12px;
      display:flex;
      align-items:center;
      font-size:13px;
      color:var(--muted);
      font-weight:700;
      margin-bottom:2px;
      word-break:break-word;
    }

    .grid{display:grid;grid-template-columns:1fr;gap:14px}
    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:14px;
      box-shadow:none;
    }
    @media(max-width:720px){
      .card{border-radius:10px}
    }

    .h1{font-size:20px;margin:0 0 10px}
    .muted{color:var(--muted)}

    .btn{
      background:var(--accent);
      border:none;
      color:#fff;
      padding:10px 12px;
      border-radius:var(--radius-sm);
      font-weight:700;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    .btn.secondary{
      background:transparent;
      border:1px solid var(--border);
      color:var(--text);
    }

    label{display:block;margin:0 0 6px}
    input,select,textarea{
      width:100%;
      padding:10px 12px;
      border-radius:var(--radius-sm);
      border:1px solid var(--border);
      background:var(--input);
      color:var(--text);
      outline:none;
    }
    input:focus,select:focus,textarea:focus{
      border-color:color-mix(in srgb, var(--accent) 55%, var(--border));
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
    }

    .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media(max-width:900px){
      .row{grid-template-columns:1fr}
    }

    table{width:100%;border-collapse:collapse}
    th,td{
      border-bottom:1px solid var(--border);
      padding:10px 8px;
      text-align:left;
      font-size:14px;
    }
    th{color:var(--muted);font-weight:700}
    @media(max-width:720px){
      table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
        border-radius:8px;
      }
    }

    pre{
      background:var(--input);
      border:1px solid var(--border);
      padding:10px;
      border-radius:8px;
      overflow:auto;
    }

    @media (max-width:1080px){
      .mobile-link .compare-count{
        margin-left:auto;
      }
    }

    .stack{display:grid;gap:10px}
    .center{display:grid;place-items:center}

    @media (max-width:1080px){
      .main-nav,
      .header-profile,
      .profile-login-link{
        display:none;
      }
      .burger{
        display:grid;
      }
      .app-header-inner{
        min-height:64px;
      }
    }