*{box-sizing:border-box}
  html,body{margin:0;height:100%}
  #root{height:100%}
  body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-size:var(--fs-body);
    -webkit-font-smoothing:antialiased;overflow:hidden}
  button{font-family:inherit}
  ::selection{background:var(--amber-300)}

  /* ---- App grid ------------------------------------------------ */
  .app{display:grid;grid-template-columns:248px 1fr;grid-template-rows:60px minmax(0,1fr);height:100%;min-height:0;
    grid-template-areas:"brand top" "nav main"}

  /* ---- Top rail ------------------------------------------------ */
  .toprail{grid-area:top;grid-column:1 / -1;background:var(--panel);
    display:flex;align-items:center;gap:20px;padding:0 18px 0 0;border-bottom:1px solid var(--ink-800);
    box-shadow:0 1px 0 rgba(0,0,0,.4)}
  .toprail-brand{flex:none;display:flex;align-items:center;gap:9px;padding-left:20px;height:100%}
  .brand-mark{display:inline-flex;align-items:flex-end;gap:2.5px;height:20px}
  .brand-mark i{width:2.5px;border-radius:2px;background:var(--amber-500);display:block}
  .brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:16px}
  .brand-mark i:nth-child(3){height:20px}.brand-mark i:nth-child(4){height:11px}
  .brand-mark i:nth-child(5){height:17px}
  .brand-word{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;letter-spacing:-.02em}
  .brand-sub{font-size:11px;color:var(--ink-400);border-left:1px solid var(--ink-700);padding-left:9px;margin-left:1px;
    line-height:1.1;max-width:120px}
  /* Melodia Musik wordmark */
  .mlogo{display:inline-flex;align-items:center;gap:10px}
  .mlogo-img{height:30px;width:auto;max-width:150px;display:block;object-fit:contain}
  .mlogo-pulse{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ink-400);
    border-left:1px solid var(--ink-700);padding-left:9px}
  .mlogo-badge{width:30px;height:30px;flex:none;border-radius:7px;background:#CF2E2E;color:#fff;
    font-family:var(--font-display);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 3px rgba(207,46,46,.5);letter-spacing:-.02em}
  .mlogo-text{display:flex;flex-direction:column;line-height:1;gap:3px}
  .mlogo-word{font-family:var(--font-display);font-weight:800;font-size:16.5px;color:#fff;letter-spacing:.06em}
  .mlogo-dot{color:#CF2E2E}
  .mlogo-tag{font-size:9.5px;font-weight:600;letter-spacing:.16em;color:var(--ink-400)}
  .toprail-search{flex:1;max-width:520px;display:flex;align-items:center;gap:9px;background:var(--ink-800);
    border:1px solid var(--ink-700);border-radius:var(--r-md);padding:8px 12px;color:var(--ink-400)}
  .toprail-search input{flex:1;border:0;background:transparent;outline:0;color:#fff;font-size:14px}
  .toprail-search input::placeholder{color:var(--ink-500)}
  .kbd{font-family:var(--font-mono);font-size:11px;color:var(--ink-400);border:1px solid var(--ink-700);
    border-radius:5px;padding:1px 6px}
  .toprail-right{margin-left:auto;display:flex;align-items:center;gap:12px}
  .crawl{display:flex;align-items:center;gap:9px;background:var(--ink-800);border:1px solid var(--ink-700);
    border-radius:var(--r-pill);padding:6px 13px;color:var(--ink-300);font-size:12.5px;font-weight:500;cursor:pointer;
    transition:all var(--dur) var(--ease-out)}
  .crawl:hover{border-color:var(--ink-600)}
  .crawl-dot{width:8px;height:8px;border-radius:50%;background:var(--amber-500)}
  .crawl.is-live .crawl-dot{animation:pulse 1.6s var(--ease-out) infinite}
  .crawl .pulse-icn{color:var(--ink-400)}
  .lang-switch{display:inline-flex;align-items:center;gap:2px;background:var(--ink-800);border:1px solid var(--ink-700);
    border-radius:var(--r-pill);padding:2px}
  .lang-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;
    border-radius:var(--r-pill);padding:5px 9px;color:var(--ink-400);font-size:12px;font-weight:700;letter-spacing:.02em;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
  .lang-btn:hover{color:var(--ink-100)}
  .lang-btn.is-on{background:var(--ink-700);color:#fff}
  .lang-btn .flag{display:block;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
  .lang-btn:not(.is-on) .flag{opacity:.65}
  .lang-code{line-height:1}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,163,62,.55)}70%{box-shadow:0 0 0 7px rgba(224,163,62,0)}100%{box-shadow:0 0 0 0 rgba(224,163,62,0)}}
  @media(prefers-reduced-motion:reduce){.crawl.is-live .crawl-dot{animation:none}}
  .icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);
    border:0;background:transparent;color:var(--ink-300);cursor:pointer;transition:background var(--dur)}
  .icon-btn:hover{background:var(--ink-800);color:#fff}
  .avatar{width:34px;height:34px;border-radius:50%;background:var(--amber-500);color:var(--ink-950);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;font-family:var(--font-display);
    border:0;cursor:pointer;transition:box-shadow var(--dur) var(--ease-out)}
  .avatar:hover{box-shadow:0 0 0 3px rgba(224,163,62,.28)}
  .avatar.is-open{box-shadow:0 0 0 3px rgba(224,163,62,.45)}
  /* ---- Account dropdown ---------------------------------------- */
  .acct{position:relative;display:flex}
  .acct-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:80;width:236px;
    background:var(--panel);border:1px solid var(--ink-700);border-radius:var(--r-lg);
    box-shadow:0 12px 34px rgba(0,0,0,.5);padding:6px;animation:acctIn var(--dur) var(--ease-out)}
  @keyframes acctIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
  .acct-id{display:flex;align-items:center;gap:10px;padding:9px 10px 11px;border-bottom:1px solid var(--ink-800);margin-bottom:5px}
  .acct-id-av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--amber-500);color:var(--ink-950);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;font-family:var(--font-display)}
  .acct-id-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
  .acct-id-name{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acct-id-sub{font-size:11.5px;color:var(--ink-400);font-family:var(--font-mono)}
  .acct-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;cursor:pointer;
    padding:9px 11px;border-radius:var(--r-md);color:var(--ink-200);font-size:13.5px;font-weight:500;text-align:left;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
  .acct-item:hover{background:var(--ink-800);color:#fff}
  .acct-item .pulse-icn{color:var(--ink-400)}
  .acct-item:hover .pulse-icn{color:#fff}
  .acct-item-danger:hover{background:rgba(207,46,46,.16);color:#ff7a7a}
  .acct-item-danger:hover .pulse-icn{color:#ff7a7a}
  /* ---- Notification popup -------------------------------------- */
  .notif{position:relative;display:flex}
  .icon-btn.is-open{background:var(--ink-800);color:#fff}
  .notif-dot{position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
    background:var(--loss-600);color:#fff;font-size:10px;font-weight:700;font-family:var(--font-mono);
    display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--panel)}
  .notif-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:80;width:340px;max-width:calc(100vw - 24px);
    background:var(--panel);border:1px solid var(--ink-700);border-radius:var(--r-lg);
    box-shadow:0 12px 34px rgba(0,0,0,.5);padding:6px;animation:acctIn var(--dur) var(--ease-out)}
  .notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 10px 11px;border-bottom:1px solid var(--ink-800);margin-bottom:4px}
  .notif-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#fff}
  .notif-title .pulse-icn{color:var(--amber-500)}
  .notif-count{font-size:11.5px;color:var(--ink-400);font-family:var(--font-mono)}
  .notif-list{display:flex;flex-direction:column;max-height:min(60vh,400px);overflow-y:auto}
  .notif-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;cursor:pointer;
    padding:10px;border-radius:var(--r-md);text-align:left;transition:background var(--dur-fast) var(--ease-out)}
  .notif-item:hover{background:var(--ink-800)}
  .notif-ic{width:32px;height:32px;flex:none;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
  .notif-ic-neg{background:rgba(207,46,46,.18);color:#ff7a7a}
  .notif-ic-neu{background:rgba(224,163,62,.16);color:var(--amber-400)}
  .notif-ic-pos{background:rgba(58,160,99,.16);color:#5fcf8a}
  .notif-it-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .notif-it-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .notif-it-sub{font-size:11.5px;color:var(--ink-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .notif-it-sub .neg{color:#ff7a7a;font-family:var(--font-mono)}
  .notif-it-chip{flex:none}
  .notif-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
    padding:26px 18px;color:var(--ink-400)}
  .notif-empty .pulse-icn{color:#5fcf8a}
  .notif-empty p{margin:0;font-size:12.5px;max-width:220px;line-height:1.45}
  .notif-all{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:4px;
    border:0;border-top:1px solid var(--ink-800);background:transparent;cursor:pointer;
    padding:11px;color:var(--amber-400);font-size:13px;font-weight:600;font-family:var(--font-sans);
    border-radius:0 0 var(--r-md) var(--r-md);transition:background var(--dur-fast) var(--ease-out)}
  .notif-all:hover{background:var(--ink-800);color:var(--amber-300)}
  /* ---- Modal (confirm) ----------------------------------------- */
  .modal-backdrop{position:fixed;inset:0;z-index:120;background:rgba(15,16,20,.62);backdrop-filter:blur(2px);
    display:flex;align-items:center;justify-content:center;padding:24px;animation:fade var(--dur) var(--ease-out)}
  .modal{width:100%;max-width:392px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);padding:24px;animation:modalIn var(--dur) var(--ease-out)}
  @keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  .modal-ic{width:46px;height:46px;border-radius:var(--r-md);background:var(--neg-tint);color:var(--loss-700);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .modal-title{margin:0 0 6px;font-size:18px;font-weight:700;color:var(--fg)}
  .modal-desc{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--fg-muted);text-wrap:pretty}
  .modal-btns{display:flex;gap:10px;justify-content:flex-end}
  .modal-btn{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;border-radius:var(--r-md);
    padding:9px 17px;border:1px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease-out)}
  .modal-btn-no{background:var(--surface);color:var(--fg);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
  .modal-btn-no:hover{background:var(--ink-50);border-color:var(--ink-400)}
  .modal-btn-yes{background:var(--loss-600);color:#fff}
  .modal-btn-yes:hover{background:var(--loss-700)}
  /* ---- Login page ---------------------------------------------- */
  .login{position:fixed;inset:0;z-index:200;background:
    radial-gradient(1100px 560px at 78% -10%,rgba(224,163,62,.12),transparent 60%),
    radial-gradient(800px 520px at 8% 108%,rgba(207,46,46,.13),transparent 58%),var(--bg-deep,#16171c);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;overflow:auto}
  .login-card{width:100%;max-width:404px;background:var(--panel);border:1px solid var(--ink-800);
    border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.5);padding:34px 32px 28px}
  .login-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
  .login-title{margin:0 0 5px;font-family:var(--font-display);font-weight:800;font-size:25px;color:#fff;letter-spacing:-.01em}
  .login-sub{margin:0 0 24px;font-size:13.5px;line-height:1.5;color:var(--ink-400)}
  .login-form{display:flex;flex-direction:column;gap:15px}
  .login-field{display:flex;flex-direction:column;gap:7px}
  .login-label{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-300)}
  .login-input{display:flex;align-items:center;gap:9px;background:var(--ink-800);border:1px solid var(--ink-700);
    border-radius:var(--r-md);padding:0 12px;height:46px;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
  .login-input:focus-within{border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(224,163,62,.18)}
  .login-input .pulse-icn{color:var(--ink-500);flex:none}
  .login-input:focus-within .pulse-icn{color:var(--amber-500)}
  .login-input input{flex:1;border:0;background:transparent;outline:0;color:#fff;font-size:14.5px;height:100%}
  .login-input input::placeholder{color:var(--ink-500)}
  .login-eye{display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;
    color:var(--ink-500);padding:4px;border-radius:6px}
  .login-eye:hover{color:var(--ink-200)}
  .login-err{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-size:13px;font-weight:500;color:#ff8a8a}
  .login-err .pulse-icn{flex:none}
  .login-submit{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px;height:48px;
    border:0;border-radius:var(--r-md);background:var(--amber-500);color:var(--ink-950);
    font-family:var(--font-display);font-weight:700;font-size:15.5px;cursor:pointer;
    transition:background var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
  .login-submit:hover{background:var(--amber-400)}
  .login-submit:active{transform:translateY(1px)}
  .login-submit:disabled{opacity:.6;cursor:default}
  .login-foot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--ink-800);
    font-size:12px;line-height:1.5;color:var(--ink-500);text-align:center}
  .login-foot code{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-300);background:var(--ink-800);
    border-radius:5px;padding:1px 6px}
  .login-copy{margin:0;font-size:12px;color:var(--ink-600)}
  @media(max-width:480px){.login-card{padding:28px 22px 24px}}

  /* ---- Side nav ------------------------------------------------ */
  .sidenav{grid-area:nav;background:var(--panel);border-right:1px solid var(--ink-800);
    display:flex;flex-direction:column;padding:14px 12px;gap:18px;overflow-y:auto;min-height:0}
  .sidenav-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);
    margin:0 0 6px 10px;font-weight:600}
  .sidenav-group{display:flex;flex-direction:column;gap:2px}
  .navitem{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;cursor:pointer;
    padding:9px 11px;border-radius:var(--r-md);color:var(--ink-300);font-size:14px;font-weight:500;text-align:left;
    transition:all var(--dur-fast) var(--ease-out)}
  .navitem .pulse-icn{color:var(--ink-400);flex:none}
  .navitem:hover{background:var(--ink-800);color:#fff}
  .navitem:hover .pulse-icn{color:var(--ink-200)}
  .navitem.is-active{background:color-mix(in oklch,var(--amber-500) 16%,var(--ink-900));color:#fff;
    box-shadow:inset 2px 0 0 var(--amber-500)}
  .navitem.is-active .pulse-icn{color:var(--amber-400)}
  .navitem-txt{flex:1}
  .navitem-badge{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--ink-300);
    background:var(--ink-800);border-radius:var(--r-pill);padding:1px 8px}
  .navitem-badge.badge-neg{background:var(--loss-600);color:#fff}
  .sidenav-foot{margin-top:auto}
  .nav-collapse{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;cursor:pointer;
    padding:9px 11px;border-radius:var(--r-md);color:var(--ink-400);font-size:13px;font-weight:500;text-align:left;
    margin-bottom:10px;transition:all var(--dur-fast) var(--ease-out)}
  .nav-collapse:hover{background:var(--ink-800);color:#fff}
  .nav-collapse:hover .pulse-icn{color:var(--ink-200)}
  .nav-collapse .pulse-icn{color:var(--ink-400);flex:none}
  .quota{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--r-md);padding:12px}
  .quota-head{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-300);font-weight:600}
  .quota-num{color:var(--amber-400);font-family:var(--font-mono)}
  .quota-bar{height:5px;background:var(--ink-700);border-radius:var(--r-pill);margin:8px 0 7px;overflow:hidden}
  .quota-bar span{display:block;height:100%;background:var(--amber-500);border-radius:var(--r-pill)}
  .quota-sub{font-size:11px;color:var(--ink-500);margin:0}

  /* ---- Workspace ----------------------------------------------- */
  .workspace{grid-area:main;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:26px 30px 60px}
  .workspace > *{max-width:1500px}
  .workspace > .drawer-scrim{max-width:none}
  .ws-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
  .crumb{font-size:12px;color:var(--fg-subtle);margin:0 0 6px;font-family:var(--font-mono)}
  .ws-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h1);letter-spacing:var(--tr-h1);
    margin:0 0 6px;color:var(--fg)}
  .ws-desc{margin:0;color:var(--fg-muted);font-size:14px;max-width:620px}
  .ws-actions{display:flex;gap:10px;flex:none}

  /* ---- Buttons ------------------------------------------------- */
  .btn{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;border-radius:var(--r-md);
    padding:9px 15px;border:1px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease-out);white-space:nowrap}
  .btn-primary{background:var(--accent);color:var(--accent-fg)}
  .btn-primary:hover{background:var(--accent-hover)}
  .btn-primary:active{background:var(--accent-press);transform:translateY(1px)}
  .btn-secondary{background:var(--surface);color:var(--fg);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
  .btn-secondary:hover{background:var(--ink-50);border-color:var(--ink-400)}
  .btn-secondary.is-active{background:var(--accent-tint);border-color:var(--amber-300);color:var(--amber-700)}
  .btn-ghost{background:transparent;color:var(--fg-muted)}
  .btn-ghost:hover{background:var(--ink-100);color:var(--fg)}
  .btn:disabled{opacity:.45;cursor:not-allowed}

  /* ---- Export menu --------------------------------------------- */
  .exp-wrap{position:relative;display:inline-flex}
  .exp-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;background:var(--surface);
    border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:6px;
    min-width:212px;display:flex;flex-direction:column;gap:2px;opacity:1}
  .exp-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;cursor:pointer;
    padding:9px 10px;border-radius:var(--r-sm);text-align:left;transition:background var(--dur-fast)}
  .exp-item:hover{background:var(--ink-50)}
  .exp-ic{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex:none}
  .exp-ic-x{background:var(--gain-100);color:var(--gain-700)}
  .exp-ic-p{background:var(--loss-100);color:var(--loss-700)}
  .exp-tx{display:flex;flex-direction:column;gap:1px}
  .exp-t{font-size:13.5px;font-weight:600;color:var(--fg)}
  .exp-d{font-size:11.5px;color:var(--fg-subtle)}

  /* ---- Finding banner ------------------------------------------ */
  .finding{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px 18px;margin-bottom:18px;
    position:relative;overflow:hidden}
  .finding::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
  .finding-mark{width:42px;height:42px;flex:none;border-radius:var(--r-md);background:var(--accent-tint);
    color:var(--amber-700);display:flex;align-items:center;justify-content:center}
  .finding-body{flex:1;min-width:0}
  .finding-k{margin:0 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);font-weight:600}
  .finding-txt{margin:0;font-size:15px;line-height:1.5;color:var(--fg);text-wrap:pretty}
  .finding-txt strong{font-weight:700}
  .finding .pos{color:var(--pos)}.finding .neg{color:var(--neg)}

  /* ---- KPI row ------------------------------------------------- */
  .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
  .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 17px;
    box-shadow:var(--shadow-sm)}
  .kpi.is-clickable{cursor:pointer;transition:box-shadow var(--dur),border-color var(--dur),transform var(--dur-fast)}
  .kpi.is-clickable:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
  .kpi.is-clickable:active{transform:translateY(1px)}
  .kpi-label{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--fg-muted);font-weight:600;margin:0 0 12px}
  .kpi-label .pulse-icn{color:var(--amber-600)}
  .kpi-val{font-family:var(--font-mono);font-weight:600;font-size:28px;line-height:1;color:var(--fg);
    font-variant-numeric:tabular-nums}
  .kpi-val.ds-pos{color:var(--pos)}.kpi-val.ds-neg{color:var(--neg)}
  .kpi-sub{margin-top:11px;font-family:var(--font-mono);font-size:12px;font-weight:600}
  .kpi-sub .pos,.kpi-sub .neg,.kpi-sub .muted{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .pos{color:var(--pos)}.neg{color:var(--neg)}.muted{color:var(--fg-muted)}

  /* ---- two-up grid --------------------------------------------- */
  .two-up{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;margin-bottom:20px}

  /* ---- Panel --------------------------------------------------- */
  .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:20px}
  .two-up .panel{margin-bottom:0}
  .panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--divider)}
  .panel-titles{display:flex;align-items:baseline;gap:10px}
  .panel-title{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0;color:var(--fg)}
  .panel-count{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle)}
  .panel-tools{display:flex;align-items:center;gap:10px}
  .dsec-meta{font-size:12px;color:var(--fg-subtle);font-family:var(--font-mono)}
  .select{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border-strong);
    border-radius:var(--r-md);padding:7px 10px;box-shadow:var(--shadow-xs);color:var(--fg-muted)}
  .select select{border:0;background:transparent;outline:0;font-family:var(--font-sans);font-size:13.5px;font-weight:500;
    color:var(--fg);cursor:pointer;-webkit-appearance:none;appearance:none}
  .seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-xs)}
  .seg button{border:0;background:var(--surface);font-size:13px;font-weight:600;color:var(--fg-muted);padding:7px 13px;cursor:pointer;
    border-left:1px solid var(--divider);transition:all var(--dur-fast)}
  .seg button:first-child{border-left:0}
  .seg button.on{background:var(--accent-tint);color:var(--amber-700)}
  .seg-flag button{display:inline-flex;align-items:center;gap:7px}
  .seg-flag .flag{display:block;width:20px;height:14px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
  .seg-flag button:not(.on) .flag{opacity:.6}
  .app.search-off .toprail-search{display:none}

  /* ---- Legend -------------------------------------------------- */
  .legend{display:flex;gap:14px}
  .lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-muted);font-weight:500}
  .lg i{width:10px;height:10px;border-radius:3px;display:inline-block}
  .lg-pos{background:var(--pos)}.lg-neg{background:var(--neg)}

  /* ---- Landscape list ------------------------------------------ */
  .lslist{padding:6px 0}
  .lsrow{display:grid;grid-template-columns:minmax(150px,1.3fr) 1.5fr auto auto auto;align-items:center;gap:14px;
    padding:12px 18px;border-bottom:1px solid var(--divider)}
  .lsrow.is-clickable{cursor:pointer;transition:background var(--dur-fast)}
  .lsrow.is-clickable:hover{background:var(--ink-50)}
  .lsrow-go{color:var(--fg-subtle);display:inline-flex}
  .lsrow.is-clickable:hover .lsrow-go{color:var(--amber-600)}
  .lsrow:last-child{border-bottom:0}
  .lsrow-id{display:flex;align-items:center;gap:10px;min-width:0}
  .lsrow-id .pulse-icn{color:var(--fg-subtle);flex:none}
  .lsrow-name{font-weight:600;font-size:14px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lsrow-kind{font-size:11.5px;color:var(--fg-subtle);font-family:var(--font-mono);margin-top:1px}
  .lsrow-bar{display:flex;flex-direction:column;gap:5px;min-width:0}
  .lsrow-track{height:7px;background:var(--ink-100);border-radius:var(--r-pill);overflow:hidden}
  .lsrow-fill{display:block;height:100%;border-radius:var(--r-pill)}
  .lsrow-fill.is-neg{background:var(--neg)}.lsrow-fill.is-pos{background:var(--pos)}
  .lsrow-barnum{font-size:11px;color:var(--fg-muted)}
  .lsrow-gap{text-align:right;min-width:56px}
  .lsrow-gap .num{font-size:14px;font-weight:600}
  .lsrow-threat{min-width:96px;display:flex;justify-content:flex-end}
  .tchip{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);
    white-space:nowrap;letter-spacing:.01em}
  .tchip-neg{background:var(--neg-tint);color:var(--loss-700)}
  .tchip-neu{background:var(--neu-tint);color:var(--info-700)}
  .tchip-pos{background:var(--pos-tint);color:var(--gain-700)}

  /* ---- Category diverging bars --------------------------------- */
  .catlist{padding:12px 18px 16px}
  .catrow{display:grid;grid-template-columns:minmax(120px,1fr) 2fr 52px auto;align-items:center;gap:12px;padding:7px 8px;border-radius:var(--r-sm)}
  .catrow.is-clickable{cursor:pointer;transition:background var(--dur-fast)}
  .catrow.is-clickable:hover{background:var(--ink-50)}
  .catrow-go{color:var(--fg-subtle);display:inline-flex}
  .catrow.is-clickable:hover .catrow-go{color:var(--amber-600)}
  .catrow-name{font-size:13.5px;font-weight:500;color:var(--fg);display:flex;flex-direction:column;gap:1px}
  .catrow-skus{font-size:11px;color:var(--fg-subtle);font-weight:400}
  .catdiv{position:relative;height:18px}
  .catdiv-axis{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--border-strong)}
  .catdiv-bar{position:absolute;top:3px;height:12px;border-radius:3px}
  .catdiv-bar.left{background:var(--pos)}
  .catdiv-bar.right{background:var(--neg)}
  .catrow-val{text-align:right;font-size:13px;font-weight:600}

  /* ---- Comparison table ---------------------------------------- */
  .table-wrap{overflow-x:auto}
  table.cmp{width:100%;border-collapse:collapse}
  .cmp th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);font-weight:600;
    text-align:left;padding:11px 16px;background:var(--ink-50);border-bottom:1px solid var(--border);position:sticky;top:0}
  .cmp th.r{text-align:right}
  .cmp td{padding:13px 16px;border-bottom:1px solid var(--divider);font-size:14px;vertical-align:middle}
  .cmp tbody tr{cursor:pointer;transition:background var(--dur-fast)}
  .cmp tbody tr:hover{background:var(--ink-50)}
  .cmp tbody tr:last-child td{border-bottom:0}
  .cmp tr.sel{background:var(--accent-tint)}
  .cmp tr.sel:hover{background:var(--amber-100)}
  .cmp tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
  .cmp td.r{text-align:right}
  .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--fg);white-space:nowrap}
  .price-now{font-weight:600}
  .hist-col{width:130px}
  .prod{display:flex;align-items:center;gap:12px}
  .thumb{width:38px;height:38px;border-radius:var(--r-sm);background:var(--paper-2);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--ink-600);flex:none}
  .thumb-lg{width:54px;height:54px;border-radius:var(--r-md)}
  .pname{font-weight:600;color:var(--fg)}
  .psku{font-size:12px;color:var(--fg-subtle);margin-top:1px}
  .row-go{color:var(--fg-subtle);display:inline-flex}
  .cmp tr:hover .row-go{color:var(--amber-600)}

  /* ---- Store list extras --------------------------------------- */
  .store-search{flex:0 0 280px;max-width:280px;background:var(--surface-inset);border:1px solid var(--border-strong);
    border-radius:var(--r-md);padding:7px 12px;color:var(--fg-subtle);box-shadow:var(--shadow-inset)}
  .store-search input{flex:1;border:0;background:transparent;outline:0;color:var(--fg);font-size:13.5px;
    font-family:var(--font-sans)}
  .store-search input::placeholder{color:var(--fg-subtle)}
  .store-row{cursor:pointer}
  .store-checked{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;
    color:var(--fg-muted);justify-content:flex-end}
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--gain-500);flex:none}
  .store-visit{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--amber-700);
    text-decoration:none;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--r-md);
    padding:6px 11px;white-space:nowrap;box-shadow:var(--shadow-xs);transition:all var(--dur-fast) var(--ease-out)}
  .store-visit:hover{background:var(--accent-tint);border-color:var(--amber-300)}
  .store-visit .pulse-icn{opacity:.7}
  .store-visit:hover .pulse-icn{opacity:1}

  /* ---- Price history ------------------------------------------- */
  .ph-filters{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin-bottom:18px}
  .ph-field{display:flex;flex-direction:column;gap:6px}
  .ph-field-lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);font-weight:600}
  .ph-select{min-width:300px}
  .ph-select select{flex:1}
  .ph-stats{margin-bottom:18px}
  .ph-body{padding:18px}
  .ph-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .ph-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);
    border-radius:var(--r-pill);padding:6px 12px 6px 10px;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);
    box-shadow:var(--shadow-xs)}
  .ph-toggle:hover{border-color:var(--border-strong);background:var(--ink-50)}
  .ph-toggle.is-off{opacity:.5}
  .ph-toggle.is-us{border-color:var(--amber-300);background:var(--accent-tint)}
  .ph-toggle.is-us.is-off{background:var(--surface);border-color:var(--border)}
  .ph-swatch{width:11px;height:11px;border-radius:3px;flex:none}
  .ph-toggle-lbl{font-size:13px;font-weight:600;color:var(--fg)}
  .ph-toggle-price{font-size:12px;color:var(--fg-muted);font-weight:500}
  .ph-chart{position:relative;width:100%}
  .ph-svg{display:block;width:100%;height:auto;overflow:visible}
  .ph-axis-lbl{font-family:var(--font-mono);font-size:11px;fill:var(--fg-subtle)}
  .ph-empty{padding:60px 20px;text-align:center;color:var(--fg-muted);font-size:14px}
  .ph-tip{position:absolute;top:6px;transform:translateX(-50%);background:var(--ink-900);color:#fff;
    border-radius:var(--r-md);padding:9px 11px;box-shadow:var(--shadow-pop);pointer-events:none;z-index:5;
    min-width:170px;max-width:240px}
  .ph-tip-mon{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400);font-weight:600;
    margin-bottom:7px;font-family:var(--font-mono)}
  .ph-tip-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:2px 0}
  .ph-tip-key{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-200);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .ph-tip-key i{width:9px;height:9px;border-radius:2px;flex:none}
  .ph-tip-val{font-size:12.5px;color:#fff;font-weight:600}

  @media (max-width: 640px){
    .ph-select{min-width:0;width:100%}
    .ph-field{width:100%}
    .ph-tip{display:none}
  }

  /* ---- Alert harga --------------------------------------------- */
  .alert-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
  .alert-toolbar .seg-count{margin-left:7px;font-family:var(--font-mono);font-size:11px;opacity:.7}
  .alert-toolbar .seg button.on .seg-count{opacity:1}
  .alert-list{display:flex;flex-direction:column;gap:12px}
  .alert-card{display:grid;grid-template-columns:minmax(230px,1.3fr) minmax(280px,1.5fr) minmax(280px,1fr);
    gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
    box-shadow:var(--shadow-sm);padding:16px 18px;position:relative;overflow:hidden}
  .alert-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
  .alert-card.sev-neg::before{background:var(--neg)}
  .alert-card.sev-neu::before{background:var(--neu)}
  .alert-card.sev-pos::before{background:var(--pos)}
  .alert-id{display:flex;align-items:flex-start;gap:12px;min-width:0}
  .alert-id-txt{min-width:0}
  .alert-sev{margin-top:8px}
  .tchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;
    border-radius:var(--r-pill);white-space:nowrap}
  .alert-prices{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;align-content:center}
  .ap-cell{display:flex;flex-direction:column;gap:3px}
  .ap-k{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted);font-weight:600}
  .ap-v{font-size:15px;font-weight:600}
  .ap-v.neg{color:var(--neg)}
  .ap-arrow{color:var(--fg-subtle);margin-top:14px}
  .ap-gap{margin-left:2px}
  .ap-gap .delta{margin-top:1px}
  .alert-under{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
    padding-top:10px;margin-top:2px;border-top:1px dashed var(--divider)}
  .alert-under .offer-link{font-size:12.5px;gap:6px}
  .alert-undercount{font-size:12px;color:var(--fg-muted);font-family:var(--font-mono)}
  .alert-action{background:var(--ink-50);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 14px;
    display:flex;flex-direction:column;gap:8px}
  .aa-head{display:flex;align-items:center;gap:8px}
  .aa-verb{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
  .aa-neg{color:var(--loss-700)}.aa-neu{color:var(--info-700)}.aa-pos{color:var(--gain-700)}
  .aa-desc{margin:0;font-size:12.5px;line-height:1.45;color:var(--fg-muted);text-wrap:pretty}
  .aa-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
  .aa-btns .btn{font-size:13px;padding:8px 12px}
  .alert-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
    color:var(--fg-muted);padding:50px 20px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-lg)}
  .alert-empty .pulse-icn{color:var(--gain-500)}
  .alert-empty p{margin:0;max-width:340px}

  @media (max-width: 1100px){
    .alert-card{grid-template-columns:1fr 1fr;gap:14px}
    .alert-action{grid-column:1 / -1}
  }
  @media (max-width: 640px){
    .alert-card{grid-template-columns:1fr}
  }
  /* ---- Alert KPI drawer (rincian + saran tindakan) ------------- */
  .akd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .akd-item{border:1px solid var(--border);border-radius:var(--r-md);padding:13px 14px;background:var(--surface);
    position:relative;overflow:hidden}
  .akd-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
  .akd-neg::before{background:var(--loss-500)}
  .akd-neu::before{background:var(--amber-500)}
  .akd-pos::before{background:var(--gain-500)}
  .akd-top{display:flex;align-items:center;gap:11px}
  .akd-id{flex:1;min-width:0}
  .akd-prices{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:11px 0;
    padding:10px 0;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
  .akd-pcell{display:flex;flex-direction:column;gap:2px}
  .akd-pk{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-muted);font-weight:600}
  .akd-arrow{color:var(--fg-subtle)}
  .akd-delta{margin-left:auto}
  .akd-rec-desc{margin:7px 0 10px;font-size:12.5px;line-height:1.5;color:var(--fg-muted);text-wrap:pretty}
  .akd-rec-btns{display:flex;gap:8px;flex-wrap:wrap}
  .btn-sm{padding:7px 12px;font-size:13px}

  /* ---- Crawl sources ------------------------------------------- */
  .crawl-add{display:grid;grid-template-columns:1fr 1.4fr 0.8fr auto;gap:14px;align-items:end;padding:18px}
  .ca-field{display:flex;flex-direction:column;gap:6px;min-width:0}
  .ca-field label{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted);font-weight:600}
  .ca-field input{border:1px solid var(--border-strong);border-radius:var(--r-md);padding:9px 12px;font-size:14px;
    font-family:var(--font-sans);color:var(--fg);background:var(--surface);outline:0;box-shadow:var(--shadow-xs);
    transition:border-color var(--dur-fast)}
  .ca-field input:focus{border-color:var(--amber-400)}
  .ca-url-wrap{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:var(--r-md);
    padding:0 12px;background:var(--surface);box-shadow:var(--shadow-xs);color:var(--fg-subtle);transition:border-color var(--dur-fast)}
  .ca-url-wrap:focus-within{border-color:var(--amber-400)}
  .ca-url-wrap input{border:0;box-shadow:none;padding:9px 0;flex:1}
  .ca-kind .select{padding:9px 11px}
  .ca-kind .select select{flex:1}
  .ca-submit{height:40px;white-space:nowrap}
  .ca-err{grid-column:1 / -1;margin:0;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--loss-700);font-weight:500}
  .src-domain{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--fg-subtle);font-family:var(--font-mono);
    text-decoration:none;margin-top:2px;transition:color var(--dur-fast)}
  .src-domain:hover{color:var(--amber-700)}
  .src-domain .pulse-icn{opacity:.6}
  .src-domain:hover .pulse-icn{opacity:1}
  .src-new{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--gain-700);background:var(--gain-100);border-radius:var(--r-pill);padding:1px 7px;vertical-align:middle}
  .src-paused{opacity:.62}
  .src-actions{display:inline-flex;gap:6px;justify-content:flex-end}
  .src-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);
    border:1px solid var(--border-strong);background:var(--surface);color:var(--fg-muted);cursor:pointer;
    box-shadow:var(--shadow-xs);transition:all var(--dur-fast) var(--ease-out)}
  .src-btn:hover{background:var(--ink-50);color:var(--fg);border-color:var(--ink-400)}
  .src-btn-del:hover{background:var(--neg-tint);color:var(--loss-700);border-color:var(--loss-300)}
  .src-empty{border:0;box-shadow:none;padding:var(--space-7,40px) var(--space-5,20px)}

  @media (max-width: 880px){
    .crawl-add{grid-template-columns:1fr 1fr}
    .ca-submit{grid-column:1 / -1}
  }
  @media (max-width: 560px){
    .crawl-add{grid-template-columns:1fr}
  }

  /* ---- Website performance scorecard --------------------------- */
  .wp-legend{flex-wrap:wrap}
  .wp-src{display:inline-flex;align-items:center;gap:5px;color:var(--fg-muted);font-weight:500}
  .wp-src .pulse-icn{vertical-align:-2px;color:var(--amber-600)}
  .wp-src-stale .pulse-icn{color:var(--fg-subtle)}
  .wp-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:-4px 0 18px;padding:11px 14px;
    border:1px solid var(--amber-300);background:var(--amber-100);border-radius:var(--r-md);
    font-size:13.5px;font-weight:500;color:var(--amber-700)}
  .wp-status .pulse-icn{flex:none}
  .wp-status-hint{color:var(--fg-muted);font-weight:400;font-size:12.5px}
  .wp-status.is-err{border-color:var(--loss-300);background:var(--loss-100);color:var(--loss-700)}
  .btn.is-busy{opacity:.75;cursor:progress}
  .pulse-icn.spin{animation:wp-spin 1s linear infinite}
  @keyframes wp-spin{to{transform:rotate(360deg)}}
  .wp-table{table-layout:auto}
  .wp-table th.wp-cat-h{text-align:left;min-width:210px;position:sticky;left:0;background:var(--ink-50);z-index:2}
  .wp-table td.wp-cat{position:sticky;left:0;background:var(--surface);z-index:1;font-weight:600;font-size:13.5px;
    color:var(--fg);display:flex;align-items:center;gap:9px;white-space:nowrap}
  .wp-cat-ic{width:26px;height:26px;flex:none;border-radius:var(--r-sm);background:var(--ink-50);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--fg-muted)}
  .wp-col-h{min-width:96px;vertical-align:bottom}
  .wp-col-h.wp-me{color:var(--amber-700);background:var(--accent-tint)}
  .wp-me-tag{display:block;font-size:9px;letter-spacing:.08em;color:var(--amber-700);background:var(--surface);
    border:1px solid var(--amber-300);border-radius:var(--r-pill);padding:1px 6px;margin:0 0 5px auto;width:fit-content}
  .wp-table td.wp-cell{padding:7px 16px}
  .wp-me-col{background:color-mix(in oklch,var(--amber-100) 45%,transparent)}
  .wp-score{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:34px;
    padding:0 9px;border-radius:var(--r-sm);font-family:var(--font-mono);font-weight:600;font-size:15px;
    font-variant-numeric:tabular-nums}
  .wp-best{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75}
  .wp-total-row td{border-top:2px solid var(--border-strong);padding-top:12px;padding-bottom:12px}
  .wp-total-lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--fg)}
  .wp-total{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:34px;font-size:16px;
    color:var(--fg)}
  .wp-total-best{color:var(--gain-700)}
  .wp-me-col .wp-total{color:var(--amber-700);font-weight:700}

  .wp-gap-grid .wp-gap{gap:12px}
  .wp-gap-bars{display:flex;flex-direction:column;gap:8px;margin-top:2px}
  .wp-gap-row{display:grid;grid-template-columns:84px 1fr 22px;align-items:center;gap:10px}
  .wp-gap-k{font-size:12px;color:var(--fg-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wp-gap-track{height:8px;background:var(--ink-100);border-radius:var(--r-pill);overflow:hidden}
  .wp-gap-track i{display:block;height:100%;border-radius:var(--r-pill)}
  .wp-gap-v{font-size:13px;text-align:right;color:var(--fg)}
  .wp-gap-note{margin-top:11px;padding-top:11px;border-top:1px solid var(--divider)}
  .wp-gap-note-h{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--amber-700)}
  .wp-gap-note-h .pulse-icn{color:var(--amber-600)}
  .wp-gap-note p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--fg-muted);text-wrap:pretty}

  @media (max-width: 640px){
    .wp-table th.wp-cat-h,.wp-table td.wp-cat{min-width:150px}
    .wp-cat-ic{display:none}
  }

  /* clickable scorecard rows + row drawer */
  .wp-table tbody tr.wp-row-click{cursor:pointer}
  .wp-table tbody tr.wp-row-click:hover td{background:var(--ink-50)}
  .wp-table tbody tr.wp-row-click:hover td.wp-cat{background:var(--accent-tint)}
  .wp-cat-go{margin-left:auto;color:var(--fg-subtle);opacity:0;transition:opacity var(--dur-fast)}
  .wp-table tbody tr.wp-row-click:hover .wp-cat-go{opacity:1;color:var(--amber-600)}
  .wp-dr-max{font-size:16px;color:var(--fg-muted);font-weight:500}
  .dr-name .pulse-icn{vertical-align:-2px;margin-right:2px;color:var(--amber-600)}
  .wp-crit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .wp-crit-item{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:var(--fg)}
  .wp-crit-item .pulse-icn{color:var(--amber-600);flex:none;margin-top:1px}
  .wp-dr-bars{display:flex;flex-direction:column;gap:9px}
  .wp-dr-bar{display:grid;grid-template-columns:120px 1fr 26px;align-items:center;gap:10px}
  .wp-dr-bar.is-me .wp-dr-name{font-weight:700;color:var(--fg)}
  .wp-dr-name{font-size:13px;color:var(--fg-muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wp-dr-name .wp-me-tag{font-size:8px}
  .wp-dr-track{height:9px;background:var(--ink-100);border-radius:var(--r-pill);overflow:hidden}
  .wp-dr-track i{display:block;height:100%;border-radius:var(--r-pill)}
  .wp-dr-num{font-size:13px;font-weight:600;text-align:right}
  .wp-dr-advice{background:var(--accent-tint);border:1px solid var(--amber-300);border-radius:var(--r-md);padding:12px 14px}
  .wp-dr-advice p{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--fg);text-wrap:pretty}
  .wp-dr-target{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:12.5px;color:var(--loss-700);font-weight:600}
  .wp-dr-target .pulse-icn{flex:none}

  /* ---- delta + chip ------------------------------------------- */
  .delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-weight:600;font-size:13px;
    padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
  .delta-sm{font-size:12px;padding:3px 7px}
  .delta-pos{background:var(--pos-tint);color:var(--gain-700)}
  .delta-neg{background:var(--neg-tint);color:var(--loss-700)}
  .delta-neu{background:var(--neu-tint);color:var(--info-700)}
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;
    border-radius:var(--r-pill);border:1px solid var(--border);color:var(--fg-muted)}
  .chip-info{color:var(--info-700);border-color:var(--info-300);background:var(--info-100)}
  .chip-pos{color:var(--gain-700);border-color:var(--gain-300);background:var(--gain-100)}
  .chip-neutral{color:var(--fg-muted)}

  /* ---- Recommendations ----------------------------------------- */
  .recs-wrap{margin-top:4px}
  .recs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}
  .recs-head .panel-title{font-size:19px}
  .recs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .rec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
    padding:17px 18px;display:flex;flex-direction:column;gap:9px;transition:box-shadow var(--dur),border-color var(--dur)}
  .rec:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
  .rec-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .rec-ic{width:34px;height:34px;border-radius:var(--r-md);background:var(--ink-50);color:var(--amber-700);
    display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
  .rec-pri{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill)}
  .rec-pri-neg{background:var(--neg-tint);color:var(--loss-700)}
  .rec-pri-neu{background:var(--neu-tint);color:var(--info-700)}
  .rec-pri-pos{background:var(--pos-tint);color:var(--gain-700)}
  .rec-title{font-family:var(--font-sans);font-weight:600;font-size:15.5px;margin:0;color:var(--fg);line-height:1.3}
  .rec-body{margin:0;font-size:13.5px;line-height:1.5;color:var(--fg-muted);text-wrap:pretty;flex:1}
  .rec-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;
    border-top:1px solid var(--divider)}
  .rec-metric{font-size:13px;color:var(--fg);font-weight:600}
  .rec-impact{font-size:12px;color:var(--amber-700);font-weight:600;background:var(--accent-tint);
    padding:3px 9px;border-radius:var(--r-pill)}

  /* ---- Drawer -------------------------------------------------- */
  .drawer-scrim{position:fixed;inset:0;background:rgba(19,20,25,.45);backdrop-filter:blur(2px);
    display:flex;justify-content:flex-end;z-index:50;animation:fade var(--dur) var(--ease-out)}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .drawer{width:540px;max-width:94vw;height:100%;background:var(--surface);box-shadow:var(--shadow-lg);
    display:flex;flex-direction:column;overflow-y:auto;animation:slidein var(--dur-slow) var(--ease-out)}
  @keyframes slidein{from{transform:translateX(28px);opacity:.4}to{transform:translateX(0);opacity:1}}
  .drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:22px 22px 18px;
    border-bottom:1px solid var(--divider)}
  .dr-brand{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-600);font-weight:600;margin-bottom:4px}
  .dr-name{font-family:var(--font-display);font-weight:600;font-size:21px;margin:0;color:var(--fg)}
  .dr-variant{font-size:13px;color:var(--fg-muted);margin-top:3px}
  .mono{font-family:var(--font-mono);font-size:12px}
  .drawer .icon-btn{color:var(--fg-muted)}
  .drawer .icon-btn:hover{background:var(--ink-100);color:var(--fg)}
  .drawer-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--divider);
    border-bottom:1px solid var(--divider)}
  .ds-cell{background:var(--surface);padding:15px 18px}
  .ds-k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-muted);margin:0 0 7px;font-weight:600}
  .ds-v{margin:0;font-family:var(--font-mono);font-weight:600;font-size:17px;color:var(--fg);font-variant-numeric:tabular-nums}
  .ds-v-txt{font-family:var(--font-sans);font-size:14px}
  .ds-was{margin:5px 0 0;display:flex;align-items:center;gap:6px}
  .ds-was .strike{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle);text-decoration:line-through}
  .ds-was .disc{font-size:11px;font-weight:600;color:var(--gain-700);background:var(--gain-100);border-radius:var(--r-xs);padding:0 5px}
  .drawer-section{padding:20px 22px;border-bottom:1px solid var(--divider)}
  .dsec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px}
  .dsec-head h3{font-family:var(--font-sans);font-weight:600;font-size:14px;margin:0;color:var(--fg)}
  .chart-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px}
  .chart-axis{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--font-mono);font-size:11px;color:var(--fg-subtle)}
  .offers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  .offer{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;border:1px solid var(--border);
    border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast)}
  .offer:hover{border-color:var(--border-strong);background:var(--ink-50)}
  .offer.is-picked{border-color:var(--amber-400);background:var(--accent-tint);box-shadow:inset 0 0 0 1px var(--amber-400)}
  .offer.is-picked:hover{background:var(--amber-100)}
  .offer-low.is-picked{border-color:var(--amber-400)}
  /* Competitor drawer product list */
  .compprod{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .compprod-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);
    border-radius:var(--r-md);background:var(--surface);cursor:pointer;transition:border-color var(--dur-fast),background var(--dur-fast)}
  .compprod-item:hover{border-color:var(--border-strong);background:var(--ink-50)}
  .compprod-thumb{width:38px;height:38px;border-radius:var(--r-sm);background:var(--paper-2);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;color:var(--ink-600);flex:none}
  .compprod-main{flex:1;min-width:0}
  .compprod-prices{text-align:right;flex:none}
  .compprod-their{font-size:14px;font-weight:600;color:var(--fg)}
  .compprod-cmp{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-top:3px}
  .compprod-vs{font-size:11px;color:var(--fg-subtle);font-family:var(--font-mono)}
  .compprod-item .row-go{color:var(--fg-subtle);flex:none}
  .compprod-item:hover .row-go{color:var(--amber-600)}
  .comp-empty{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;color:var(--fg-muted);
    padding:34px 16px}
  .comp-empty .pulse-icn{color:var(--ink-300)}
  .comp-empty p{margin:0;max-width:300px;font-size:13px}
  /* KPI drawer */
  .kpi-dr-hero{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--divider)}
  .kpi-dr-ic{width:48px;height:48px;flex:none;border-radius:var(--r-md);background:var(--accent-tint);color:var(--amber-700);
    display:flex;align-items:center;justify-content:center}
  .kpi-dr-val{font-family:var(--font-mono);font-weight:600;font-size:34px;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
  .kpi-dr-val.pos{color:var(--pos)}.kpi-dr-val.neg{color:var(--neg)}
  .kpi-dr-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg-muted);text-wrap:pretty}
  .kpi-catlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .kpi-catrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;
    border-bottom:1px solid var(--divider)}
  .kpi-catrow:last-child{border-bottom:0}
  .kpi-cat-name{font-size:13.5px;font-weight:500;color:var(--fg)}
  .kpi-cat-val{font-size:13.5px;font-weight:600;color:var(--fg)}
  /* KPI drawer: item list + action list */
  .kpi-itemlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .kpi-item{display:flex;align-items:center;gap:11px;padding:10px 2px;border-bottom:1px solid var(--divider)}
  .kpi-item:last-child{border-bottom:0}
  .kpi-item.is-clickable{cursor:pointer;border-radius:var(--r-sm);padding:10px 8px;margin:0 -8px;
    transition:background var(--dur-fast)}
  .kpi-item.is-clickable:hover{background:var(--ink-50)}
  .kpi-item-go{color:var(--fg-subtle);display:inline-flex;flex:none}
  .kpi-item.is-clickable:hover .kpi-item-go{color:var(--amber-600)}
  .compprod-item.kpi-static{cursor:default}
  .compprod-item.kpi-static:hover{background:transparent}
  .dr-back{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;cursor:pointer;
    font-family:var(--font-mono);font-size:12px;color:var(--fg-muted);padding:0 0 4px;font-weight:500;
    transition:color var(--dur-fast)}
  .dr-back:hover{color:var(--amber-700)}
  .kpi-item-ic{width:32px;height:32px;flex:none;border-radius:var(--r-sm);background:var(--ink-50);
    border:1px solid var(--border);color:var(--fg-muted);display:flex;align-items:center;justify-content:center}
  .kpi-item-main{flex:1;min-width:0}
  .kpi-item-name{font-size:13.5px;font-weight:600;color:var(--fg)}
  .kpi-item-sub{font-size:11.5px;color:var(--fg-subtle);font-family:var(--font-mono);margin-top:1px}
  .kpi-item-val{font-size:13.5px;font-weight:600;color:var(--fg);white-space:nowrap}
  .kpi-item-val.pos{color:var(--pos)}.kpi-item-val.neg{color:var(--neg)}
  .kpi-actionlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .kpi-action{display:flex;align-items:flex-start;gap:10px}
  .kpi-action-ic{width:26px;height:26px;flex:none;border-radius:var(--r-sm);background:var(--accent-tint);
    color:var(--amber-700);display:flex;align-items:center;justify-content:center;margin-top:1px}
  .kpi-action-txt{font-size:13px;line-height:1.5;color:var(--fg-muted);text-wrap:pretty}
  .offer-store{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--fg)}
  .offer-store .pulse-icn{color:var(--fg-subtle)}
  .offer-link{display:inline-flex;align-items:center;gap:4px;color:var(--fg);font-weight:600;text-decoration:none;
    border-bottom:1px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast)}
  .offer-link:hover{color:var(--amber-700);border-bottom-color:var(--amber-400)}
  .offer-ext{opacity:.55;transition:opacity var(--dur-fast)}
  .offer-link:hover .offer-ext{opacity:1;color:var(--amber-600)}
  a.btn{text-decoration:none}
  .offer-right{display:flex;align-items:center;gap:10px}
  .offer-price{font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--fg);font-variant-numeric:tabular-nums}
  .drawer-foot{margin-top:auto;display:flex;gap:9px;padding:16px 22px;border-top:1px solid var(--divider);
    position:sticky;bottom:0;background:var(--surface);flex-wrap:wrap}

  /* ---- Settings (Pengaturan) ----------------------------------- */
  .set-help{margin:0 18px 14px;font-size:13px;color:var(--fg-muted);max-width:640px;text-wrap:pretty}
  .set-pad{padding-bottom:18px}
  .panel-head.no-border{border-bottom:0;padding-bottom:6px}
  .set-bulk{display:flex;align-items:center;gap:8px}
  .set-link{background:transparent;border:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--amber-700);
    font-family:var(--font-sans);padding:0}
  .set-link:hover{text-decoration:underline}
  .set-sep{color:var(--fg-subtle)}
  .set-catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 18px 18px}
  .set-cat{display:flex;align-items:center;gap:12px;border:1px solid var(--border);background:var(--surface);
    border-radius:var(--r-md);padding:12px 14px;cursor:pointer;text-align:left;transition:all var(--dur-fast) var(--ease-out)}
  .set-cat:hover{border-color:var(--border-strong);background:var(--ink-50)}
  .set-cat.is-on{border-color:var(--amber-300);background:var(--accent-tint)}
  .set-cat-main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
  .set-cat-name{font-size:14px;font-weight:600;color:var(--fg)}
  .set-cat-pos{font-size:12px;font-family:var(--font-mono);font-weight:600}
  .set-cat-pos.pos{color:var(--pos)}.set-cat-pos.neg{color:var(--neg)}
  .set-cat-bell{color:var(--amber-600);flex:none}
  .set-toggle{position:relative;width:38px;height:22px;border-radius:var(--r-pill);background:var(--ink-300);
    border:0;cursor:pointer;flex:none;transition:background var(--dur) var(--ease-out);padding:0}
  .set-toggle.lg{width:44px;height:25px}
  .set-toggle.is-on{background:var(--amber-500)}
  .set-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--white);
    box-shadow:var(--shadow-xs);transition:left var(--dur) var(--ease-out)}
  .set-toggle.lg .set-knob{width:19px;height:19px}
  .set-toggle.is-on .set-knob{left:19px}
  .set-toggle.lg.is-on .set-knob{left:22px}
  .set-threshold{display:flex;align-items:center;gap:16px;padding:0 18px}
  .set-range{flex:1;accent-color:var(--amber-500);height:6px}
  .set-thr-val{font-size:18px;font-weight:600;color:var(--amber-700);min-width:48px;text-align:right}
  .set-thr-marks{display:flex;justify-content:space-between;padding:6px 18px 0;font-family:var(--font-mono);
    font-size:11px;color:var(--fg-subtle)}
  .set-rows{display:flex;flex-direction:column}
  .set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;
    border-top:1px solid var(--divider)}
  .set-row:first-child{border-top:0}
  .set-row-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
  .set-row-name{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--fg)}
  .set-row-name .pulse-icn{color:var(--fg-muted)}
  .set-row-sub{font-size:12.5px;color:var(--fg-muted)}
  /* ---- Settings · SMTP form & recipients ----------------------- */
  .set-form{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px;padding:2px 18px 18px}
  .set-form .full{grid-column:1 / -1}
  .set-fld{display:flex;flex-direction:column;gap:7px;min-width:0}
  .set-fld-lbl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--fg)}
  .set-fld-lbl .pulse-icn{color:var(--fg-muted)}
  .set-input{width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:var(--r-md);
    font:inherit;font-size:13px;background:var(--surface);color:var(--fg);box-shadow:var(--shadow-inset);
    transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
  .set-input.mono{font-family:var(--font-mono)}
  .set-input::placeholder{color:var(--fg-subtle)}
  .set-input:focus{outline:0;border-color:var(--accent);box-shadow:var(--glow-accent)}
  .set-pass{position:relative;display:flex;align-items:center}
  .set-pass .set-input{padding-right:78px}
  .set-pass .set-link{position:absolute;right:11px;top:50%;transform:translateY(-50%)}
  .set-recip-add{display:flex;gap:10px;padding:2px 18px 14px;align-items:center}
  .set-recip-add .set-input{flex:1}
  .set-recip-list{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px}
  .set-recip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-tint);
    border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:6px 7px 6px 12px;
    font-family:var(--font-mono);font-size:12.5px;color:var(--fg)}
  .set-recip .pulse-icn{color:var(--amber-700)}
  .set-recip button{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
    border:0;border-radius:50%;background:transparent;color:var(--fg-muted);cursor:pointer;
    transition:background var(--dur-fast),color var(--dur-fast)}
  .set-recip button:hover{background:rgba(19,20,25,.1);color:var(--fg)}
  .set-recip-empty{margin:0;padding:0 18px 18px;font-size:13px;color:var(--fg-subtle)}
  @media (max-width: 640px){ .set-form{grid-template-columns:1fr} }
  @media (max-width: 640px){ .set-catgrid{grid-template-columns:1fr} }

  /* ---- placeholder view --------------------------------------- */
  .placeholder{grid-area:main;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;color:var(--fg-muted);gap:14px;padding:40px}
  .placeholder .pulse-icn{color:var(--ink-300)}
  .placeholder h2{font-family:var(--font-display);color:var(--fg);margin:0;font-size:22px}
  .placeholder p{margin:0;max-width:380px}

  /* toast */
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink-900);color:#fff;
    display:flex;align-items:center;gap:9px;padding:11px 17px;border-radius:var(--r-pill);box-shadow:var(--shadow-pop);
    font-size:13.5px;font-weight:500;z-index:80;animation:toastin var(--dur) var(--ease-out)}
  .toast .pulse-icn{color:var(--amber-400)}
  @keyframes toastin{from{transform:translate(-50%,12px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

  /* ---- Responsive ---------------------------------------------- */
  .toprail-menu{display:none;width:36px;height:36px;align-items:center;justify-content:center;border:0;
    background:transparent;color:var(--ink-200);border-radius:var(--r-md);cursor:pointer;margin-right:2px}
  .toprail-menu:hover{background:var(--ink-800);color:#fff}
  .nav-backdrop{display:none}

  @media (max-width: 1240px){
    .two-up{grid-template-columns:1fr}
  }
  /* ---- Collapsed nav (desktop) --------------------------------- */
  @media (min-width: 881px){
    .app.is-collapsed{grid-template-columns:72px 1fr}
    .app.is-collapsed .toprail-brand{padding-left:18px;gap:0}
    .app.is-collapsed .mlogo-text,
    .app.is-collapsed .brand-word,
    .app.is-collapsed .brand-sub{display:none}
    .app.is-collapsed .sidenav{padding:14px 10px}
    .app.is-collapsed .sidenav-label{display:none}
    .app.is-collapsed .navitem,
    .app.is-collapsed .nav-collapse{justify-content:center;gap:0;padding:10px 0;position:relative}
    .app.is-collapsed .navitem-txt{display:none}
    .app.is-collapsed .navitem-badge{position:absolute;top:2px;right:9px;padding:0 5px;min-width:0;font-size:9px;line-height:1.5}
    .app.is-collapsed .quota{display:none}
  }
  @media (max-width: 1100px){
    .kpi-row{grid-template-columns:repeat(2,1fr)}
    .workspace{padding:22px 22px 56px}
    .recs-grid{grid-template-columns:1fr}
  }
  @media (max-width: 880px){
    .app{grid-template-columns:1fr;grid-template-areas:"top" "main"}
    .toprail-brand{width:auto;border-right:0;padding-left:14px;gap:8px}
    .brand-sub,.mlogo-tag{display:none}
    .toprail{gap:12px;padding-right:12px}
    .toprail-menu{display:flex}
    .toprail-search{max-width:none}
    .crawl-txt{display:none}
    .crawl{padding:7px 10px}
    .nav-collapse{display:none}
    .sidenav{position:fixed;top:60px;left:0;bottom:0;width:262px;z-index:60;
      transform:translateX(-100%);transition:transform var(--dur) var(--ease-out);
      box-shadow:var(--shadow-lg)}
    .sidenav.is-open{transform:translateX(0)}
    .app.nav-open .nav-backdrop{display:block;position:fixed;top:60px;inset:60px 0 0 0;
      background:rgba(19,20,25,.45);z-index:55;animation:fade var(--dur) var(--ease-out)}
  }
  @media (max-width: 640px){
    .workspace{padding:16px 14px 48px}
    .ws-head{flex-direction:column;align-items:stretch;gap:14px}
    .ws-actions{flex-wrap:wrap}
    .ws-actions .btn{flex:1}
    .finding{flex-direction:column;align-items:flex-start;gap:12px}
    .kpi-row{gap:10px}
    .kpi-val{font-size:24px}
    .panel-head{flex-direction:column;align-items:stretch;gap:12px}
    .panel-tools{flex-wrap:wrap}
    .panel-tools .select{flex:1}
    .lsrow{grid-template-columns:1fr auto;gap:8px}
    .lsrow-bar{grid-column:1 / -1;order:3}
    .cmp .hist-col{display:none}
    .cmp th,.cmp td{padding:11px 12px}
    .toprail-search .kbd{display:none}
    .drawer{width:100%;max-width:100%}
    .drawer-foot .btn{flex:1;justify-content:center}
    .toast{left:14px;right:14px;transform:none;justify-content:center}
    @keyframes toastin{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
    table.cmp{min-width:540px}
  }
  @media (max-width: 560px){
    .toprail{gap:9px;padding-right:10px}
    .toprail-right{gap:6px}
    .lang-switch{display:none}
    .toprail-brand{padding-left:12px}
    .mlogo-badge{width:28px;height:28px;font-size:16px}
    .toprail-search{padding:7px 10px}
    .toprail-search input{font-size:13px}
    .icon-btn,.avatar{width:32px;height:32px}
    .notif-menu{width:300px}
    .acct-menu{width:218px}
    .modal{padding:20px}
    .modal-btns{flex-direction:column-reverse}
    .modal-btn{justify-content:center;width:100%}
  }
  @media (max-width: 440px){
    .kpi-row{grid-template-columns:1fr}
    .brand-word{font-size:17px}
  }