:root{
      --bg: #f6f7fb;
      --bg2:#ffffff;
      --card: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --border: #e2e8f0;
      --accent: #111827;
      --accent2:#2563eb;
      --danger-bg:#fef2f2;
      --danger-border:#fecaca;
      --danger-text:#7f1d1d;
      --warn-bg:#fffbeb;
      --warn-border:#fde68a;
      --warn-text:#78350f;
      --ok-bg:#ecfdf5;
      --ok-border:#a7f3d0;
      --ok-text:#065f46;

      --shadow: 0 1px 2px rgba(0,0,0,.05);
      --shadow2: 0 10px 30px rgba(2,6,23,.12);

      --radius: 18px;
      --radius2: 14px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

      --chip-bg:#fff;
      --chip-border:#e2e8f0;
    }

    html[data-theme="dark"]{
      --bg:#0b1220;
      --bg2:#0b1220;
      --card:#0f172a;
      --text:#e5e7eb;
      --muted:#94a3b8;
      --border:#1f2937;
      --accent:#e5e7eb;
      --accent2:#60a5fa;

      --danger-bg:#2a1012;
      --danger-border:#7f1d1d;
      --danger-text:#fecaca;

      --warn-bg:#2a1f0a;
      --warn-border:#a16207;
      --warn-text:#fde68a;

      --ok-bg:#082419;
      --ok-border:#065f46;
      --ok-text:#a7f3d0;

      --chip-bg:#0b1220;
      --chip-border:#1f2937;
    }

    *{ box-sizing:border-box; }
    html, body{
      transition: background-color .25s ease, color .25s ease;
    }
    body{
      margin:0;
      font-family: var(--sans);
      color:var(--text);
      background:
        radial-gradient(900px 400px at 10% -10%, rgba(37,99,235,.16), transparent 60%),
        radial-gradient(800px 400px at 90% 0%, rgba(16,185,129,.14), transparent 60%),
        var(--bg);
      line-height:1.35;
    }
    a{ color:inherit; }

    header{
      position:sticky;
      top:0;
      z-index:20;
      background:color-mix(in srgb, var(--bg2) 85%, transparent);
      backdrop-filter:saturate(180%) blur(12px);
      border-bottom:1px solid var(--border);
      transition: background-color .25s ease, border-color .25s ease;
    }
    .header-inner{
      max-width:1150px;
      margin:0 auto;
      padding:14px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .brand{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .brand strong{
      font-size:15px;
      letter-spacing:.2px;
      display:flex;
      gap:8px;
      align-items:center;
      white-space:nowrap;
    }
    .badge{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 70%, transparent);
      color:var(--muted);
    }
    .brand span{
      font-size:12px;
      color:var(--muted);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .header-actions{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
    }
    .icon-btn{
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 80%, transparent);
      color:var(--text);
      border-radius:12px;
      padding:9px 10px;
      cursor:pointer;
      box-shadow: var(--shadow);
      font-size:13px;
      display:flex;
      gap:8px;
      align-items:center;
    }
    .icon-btn:hover{ border-color: color-mix(in srgb, var(--border) 60%, #94a3b8); }
    .icon-btn.active{
      border-color: color-mix(in srgb, var(--accent2) 75%, var(--border));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 18%, transparent);
    }

    @media (max-width: 760px){
      .header-inner{
        padding:10px 14px 12px;
        align-items:flex-start;
      }
      .brand strong{
        font-size:14px;
      }
      .brand span{
        white-space:normal;
      }
    }

    @media (max-width: 560px){
      .header-inner{
        gap:10px;
      }
      .header-actions{
        width:100%;
        justify-content:flex-start;
      }
      .icon-btn{
        padding:8px 9px;
        font-size:12px;
      }
    }

    .icon{
      font-size:14px;
      line-height:0;
    }

    .header-sub{
      max-width:1150px;
      margin:0 auto;
      padding:0 16px 12px;
      display:flex;
      justify-content:center;
    }
    .segmented{
      display:flex;
      gap:4px;
      padding:4px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 55%, transparent);
      box-shadow: var(--shadow);
      width:min(560px, 100%);
    }
    .seg-btn{
      flex:1;
      border:none;
      background:transparent;
      color:var(--muted);
      padding:9px 10px;
      border-radius:999px;
      cursor:pointer;
      font-size:13px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      user-select:none;
    }
    .seg-btn.active{
      background:var(--card);
      color:var(--text);
      box-shadow: var(--shadow);
      border:1px solid var(--border);
    }

    .container{
      max-width:1150px;
      margin:0 auto;
      padding:18px 16px 28px;
      position:relative;
    }

    .view{
      display:block;
      opacity:1;
      transform:translateY(0);
      transition: opacity .22s ease, transform .22s ease;
      visibility:visible;
    }
    .view.hidden{
      opacity:0;
      transform:translateY(8px);
      pointer-events:none;
      visibility:hidden;
      height:0;
      overflow:hidden;
    }

    .grid{
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
    }
    @media(min-width: 980px){
      .grid{
        grid-template-columns: 5fr 7fr;
        align-items:start;
      }
    }

    .card{
      background:color-mix(in srgb, var(--card) 92%, transparent);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow2);
      padding:16px;
      transition: background-color .25s ease, border-color .25s ease, color .25s ease;
    }
    .card h2{
      margin:0;
      font-size:16px;
      letter-spacing:.2px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .sub{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
    }

    .section{
      margin-top:14px;
      border-top:1px solid var(--border);
      padding-top:14px;
    }
    .field{ margin-top:12px; }
    label{
      display:block;
      font-size:13px;
      font-weight:700;
      margin-bottom:6px;
    }

    input[type="number"], input[type="text"], select, textarea{
      width:100%;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      outline:none;
      font-size:14px;
      background:color-mix(in srgb, var(--card) 96%, transparent);
      color:var(--text);
      font-family:var(--sans);
      transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    }
    textarea{ min-height:120px; resize:vertical; font-size:13px; line-height:1.35; }
    input[readonly], textarea[readonly]{ background:color-mix(in srgb, var(--card) 70%, transparent); }

    input:focus, select:focus, textarea:focus{
      border-color: color-mix(in srgb, var(--accent2) 60%, var(--border));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 22%, transparent);
    }

    input[type="range"]{ width:100%; }

    .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .between{ display:flex; justify-content:space-between; align-items:center; gap:10px; }

    .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
    .chip{
      border:1px solid var(--chip-border);
      background:var(--chip-bg);
      color:var(--text);
      padding:7px 10px;
      border-radius:999px;
      font-size:12px;
      cursor:pointer;
      user-select:none;
      display:flex;
      gap:7px;
      align-items:center;
      transition: transform .06s ease;
    }
    .chip:active{ transform: translateY(1px); }
    .chip:hover{ border-color: color-mix(in srgb, var(--chip-border) 60%, #94a3b8); }
    .chip.active{
      border-color: color-mix(in srgb, var(--accent2) 75%, var(--border));
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 18%, transparent);
    }
    .hint{ margin-top:6px; font-size:12px; color:var(--muted); }

    .btn{
      padding:9px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 92%, transparent);
      color:var(--text);
      cursor:pointer;
      font-size:13px;
      white-space:nowrap;
      display:inline-flex;
      align-items:center;
      gap:8px;
      transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    }
    .btn:hover{ border-color: color-mix(in srgb, var(--border) 60%, #94a3b8); }
    .btn-primary{
      background: var(--accent2);
      border-color: color-mix(in srgb, var(--accent2) 75%, var(--border));
      color:#fff;
    }
    .btn-primary:hover{ filter:brightness(1.04); }
    .btn-ghost{ background:transparent; }
    .btn-danger{
      background:transparent;
      border-color: color-mix(in srgb, #ef4444 35%, var(--border));
      color: color-mix(in srgb, #ef4444 70%, var(--text));
      display: flex;
      justify-content: center;
    }
    .btn-danger:hover{ background: color-mix(in srgb, #ef4444 10%, transparent); }
    .btn:disabled{ opacity:.55; cursor:not-allowed; }

    .flavor-row{
      display:grid;
      grid-template-columns: 1fr 110px 120px 44px;
      gap:8px;
      margin-top:8px;
    }
    @media(max-width: 560px){
      .flavor-row{ grid-template-columns: 1fr 90px 1fr 44px; }
    }

    .sticky{ position:static; }
    @media(min-width: 980px){
      .sticky{ position:sticky; top:132px; }
    }

    .pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
    .pill{
      font-size:12px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 92%, transparent);
      padding:6px 10px;
      border-radius:999px;
      color:var(--muted);
    }

    .kpis{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:12px;
    }
    .kpi{
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 92%, transparent);
      border-radius:14px;
      padding:10px;
    }
    .kpi .label{ font-size:12px; color:var(--muted); }
    .kpi .value{ font-size:18px; font-weight:800; margin-top:2px; }
    .kpi .sub{ margin-top:2px; font-size:12px; color:var(--muted); }

    .alert{
      border-radius:14px;
      padding:12px;
      border:1px solid;
      margin-top:12px;
      font-size:13px;
    }
    .alert-danger{ background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-text); }
    .alert-warn{ background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text); }
    .alert-ok{ background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-text); }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      margin-top:12px;
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 92%, transparent);
    }
    thead th{
      text-align:left;
      padding:10px 12px;
      font-size:12px;
      color:var(--muted);
      background:color-mix(in srgb, var(--card) 85%, transparent);
      border-bottom:1px solid var(--border);
    }
    tbody td{
      padding:10px 12px;
      border-bottom:1px solid var(--border);
      font-size:14px;
    }
    tbody tr:last-child td{ border-bottom:none; }
    td.num{
      text-align:right;
      font-family:var(--mono);
      font-variant-numeric: tabular-nums;
    }

    .footer-note{
      margin-top:12px;
      font-size:12px;
      color:var(--muted);
      background:color-mix(in srgb, var(--card) 85%, transparent);
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px 12px;
    }

    details{
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px 12px;
      background:color-mix(in srgb, var(--card) 92%, transparent);
      margin-top:12px;
    }
    details summary{
      cursor:pointer;
      font-weight:800;
      font-size:13px;
    }

    /* Status bar */
    .status-bar{
      margin-top:12px;
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px 12px;
      background:color-mix(in srgb, var(--card) 85%, transparent);
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .status-left{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
      color:var(--muted);
      font-size:12px;
    }
    .dot{
      width:10px; height:10px; border-radius:999px;
      background: #10b981;
      box-shadow: 0 0 0 4px color-mix(in srgb, #10b981 18%, transparent);
    }
    .dot.dirty{ background:#f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 20%, transparent); }

    /* Library */
    .lib-top{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin-top:12px;
    }
    .lib-top .search{ flex:1; min-width:220px; }
    .lib-meta{
      margin-top:10px;
      font-size:12px;
      color:var(--muted);
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .saved-list{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
    .saved-item{
      border:1px solid var(--border);
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 92%, transparent);
      padding:12px;
      box-shadow: var(--shadow);
    }
    .saved-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
    }
    .saved-title{
      font-weight:900;
      font-size:14px;
      letter-spacing:.1px;
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .star{
      cursor:pointer;
      border:1px solid var(--border);
      background:transparent;
      border-radius:999px;
      padding:6px 8px;
      font-size:12px;
      color:var(--muted);
    }
    .star.active{
      color: #f59e0b;
      border-color: color-mix(in srgb, #f59e0b 60%, var(--border));
      background: color-mix(in srgb, #f59e0b 12%, transparent);
    }
    .saved-meta{
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
    }
    .saved-tags{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      margin-top:8px;
    }
    .tag-pill{
      font-size:11px;
      padding:5px 8px;
      border-radius:999px;
      border:1px solid var(--border);
      color:var(--muted);
      background:color-mix(in srgb, var(--card) 88%, transparent);
    }
    .saved-actions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:12px;
    }

    /* Modals */
    .modal{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.42);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
      z-index:60;
    }
    .modal.hidden{ display:none; }
    .modal-card{
      width:min(860px, 100%);
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:0 18px 60px rgba(0,0,0,.28);
      overflow:hidden;
    }
    .modal-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding:12px 14px;
      border-bottom:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 92%, transparent);
    }
    .modal-body{ padding:14px; }

    .tabbar{
      display:flex;
      gap:6px;
      padding:6px;
      border:1px solid var(--border);
      border-radius:999px;
      background:color-mix(in srgb, var(--card) 85%, transparent);
      margin-top:10px;
      flex-wrap:wrap;
    }
    .tab-btn{
      border:none;
      background:transparent;
      color:var(--muted);
      padding:8px 10px;
      border-radius:999px;
      cursor:pointer;
      font-size:13px;
      display:flex;
      align-items:center;
      gap:8px;
      user-select:none;
      transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    }
    .tab-btn.active{
      background:var(--card);
      border:1px solid var(--border);
      color:var(--text);
      box-shadow: var(--shadow);
    }
    .tab{ display:none; margin-top:12px; }
    .tab.active{ display:block; }

    .qr-wrap{
      display:grid;
      grid-template-columns: 260px 1fr;
      gap:14px;
      align-items:start;
    }
    @media(max-width: 720px){
      .qr-wrap{ grid-template-columns: 1fr; }
    }
    .qr-box{
      border:1px solid var(--border);
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 92%, transparent);
      padding:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:250px;
    }
    .share-row{
      display:flex;
      gap:8px;
      align-items:center;
      margin-top:8px;
    }
    .share-row input{ flex:1; }

    /* Toast */
    .toast{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      background:#111827;
      color:#fff;
      padding:10px 12px;
      border-radius:999px;
      font-size:13px;
      box-shadow:0 10px 24px rgba(0,0,0,.2);
      z-index:80;
      max-width:min(620px, calc(100% - 24px));
      text-align:center;
    }
    html[data-theme="dark"] .toast{ background:#0b1220; border:1px solid #1f2937; }
    .toast.hidden{ display:none; }

    @media (prefers-reduced-motion: reduce){
      .chip, .btn, .icon-btn, .view, html, body, header, .card, input[type="number"], input[type="text"], select, textarea{ transition:none !important; }
    }