/**
 * Auth menggunakan httpOnly cookie.
 * JavaScript di halaman ini TIDAK BISA membaca token sama sekali.
 * Cookie di-set dan di-clear oleh Cloudflare Worker.
 *
 * Satu-satunya config di file ini:
 *   const WORKER_URL = '...'
 */
    :root {
      --bg: #0e0e12;
      --bg2: #13131a;
      --card: #17171f;
      --card2: #20202e;
      --border: rgba(255, 255, 255, 0.09);
      --border2: rgba(255, 255, 255, 0.13);
      --accent: #e8293a;
      --accent2: #ff5566;
      --accent-dim: rgba(232, 41, 58, 0.13);
      --accent-glow: rgba(232, 41, 58, 0.28);
      --text: #f0f0f5;
      --text2: #8b8b9e;
      --text3: #6b6b82;
      --font: 'Plus Jakarta Sans', sans-serif;
      --mono: 'JetBrains Mono', monospace;
      --r: 12px;
      --r2: 18px;
      --r-sm: 8px;
      --control-h: 40px;

      /* Semantic colors — design system */
      --success:        #22c55e;
      --success-dim:    rgba(34, 197, 94, .13);
      --success-bright: #34d399;   /* green terang — progress bar, angka positif */
      --danger-soft:    #f87171;   /* soft red — sisa, overdue */
      --info: #4fa3e0;
      --info-dim: rgba(79, 163, 224, .13);
      --warning: #fb923c;
      --warning-dim: rgba(251, 146, 60, .15);
      --danger: #e8293a;
      --danger-dim: rgba(232, 41, 58, .13);

      /* Accent gradient */
      --accent-grad: linear-gradient(135deg, #e8293a, #ff5566);

      /* Spacing scale — base 4px */
      --sp-1: 4px;
      --sp-2: 8px;
      --sp-3: 12px;
      --sp-4: 16px;
      --sp-6: 24px;
      --sp-8: 32px;
      --sp-12: 48px;

      /* Elevation */
      --shadow-sm: 0 1px 4px rgba(0,0,0,.25);
      --shadow-md: 0 4px 14px rgba(0,0,0,.4);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* ── Design System — Typography Scale ── */
    .ds-display { font-size: 28px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
    .ds-h1      { font-size: 22px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
    .ds-h2      { font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
    .ds-h3      { font-size: 15px; font-weight: 700; }
    .ds-body    { font-size: 14px; font-weight: 400; line-height: 1.6; }
    .ds-sm      { font-size: 13px; font-weight: 500; }
    .ds-label   { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text3); }
    .ds-mono    { font-family: var(--mono); font-variant-numeric: tabular-nums; }
    /* .lbl — alias ds-label untuk form labels */
    .lbl        { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text3); display: block; margin-bottom: 5px; }
    /* ── Semantic color utilities ── */
    .t-success  { color: var(--success); }
    .t-info     { color: var(--info); }
    .t-warning  { color: var(--warning); }
    .t-danger   { color: var(--danger); }
    .t-text2    { color: var(--text2); }
    .t-text3    { color: var(--text3); }
    /* ── Background dim utilities ── */
    .bg-success-dim { background: var(--success-dim); color: var(--success); }
    .bg-info-dim    { background: var(--info-dim);    color: var(--info); }
    .bg-warning-dim { background: var(--warning-dim); color: var(--warning); }
    .bg-danger-dim  { background: var(--danger-dim);  color: var(--danger); }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      min-height: 100vh;
      overflow-x: hidden;
      font-size: 14px;
    }

    #app-loader {
      position: fixed;
      inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 400;
      flex-direction: column;
      gap: 14px;
    }

    #app-loader.hide {
      display: none;
    }

    .loader-logo {
      width: 48px;
      height: 48px;
      background: var(--accent-grad);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 24px var(--accent-glow);
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    #mo-portfolio-library.lib-enter,
    #mo-article-library.lib-enter,
    #mo-finishing-library.lib-enter {
      animation: slideInRight .22s cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 24px var(--accent-glow);
      }

      50% {
        box-shadow: 0 0 40px var(--accent-glow);
      }
    }

    .loader-txt {
      font-size: 12.5px;
      color: var(--text2);
      font-weight: 500;
    }

    #login-page {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--bg);
      align-items: center;
      justify-content: center;
      z-index: 500;
      flex-direction: column;
    }

    #login-page.on {
      display: flex;
    }

    .login-card {
      background: var(--card);
      border: 1px solid var(--border2);
      border-radius: var(--r2);
      padding: 36px 32px;
      width: 360px;
      max-width: 95vw;
    }

    .login-logo {
      width: 56px;
      height: 56px;
      background: var(--accent-grad);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 0 24px var(--accent-glow);
    }

    .pw-wrap {
      position: relative;
    }

    .pw-wrap .l-inp {
      padding-right: 40px;
      width: 100%;
      box-sizing: border-box;
    }

    .pw-eye {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: var(--text3);
      display: flex;
      align-items: center;
    }

    .pw-eye:hover {
      color: var(--text);
    }

    .login-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.6px;
      text-align: center;
      margin-bottom: 4px;
    }

    .login-sub {
      font-size: 12.5px;
      color: var(--text2);
      text-align: center;
      margin-bottom: 24px;
    }

    .login-err {
      background: rgba(232, 41, 58, 0.08);
      border: 1px solid rgba(232, 41, 58, 0.2);
      color: #ff8b95;
      padding: 9px 12px;
      border-radius: var(--r-sm);
      font-size: 12px;
      margin-bottom: 14px;
      display: none;
    }

    .login-err.on {
      display: block;
    }

    .l-fld {
      margin-bottom: 14px;
    }

    .l-fld label {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--text2);
      margin-bottom: 5px;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }

    .l-inp {
      width: 100%;
      background: var(--card2);
      border: 1px solid var(--border2);
      border-radius: 9px;
      padding: 10px 13px;
      color: var(--text);
      font-family: var(--font);
      font-size: 13px;
      outline: none;
      transition: border-color 0.16s;
    }

    .l-inp:focus {
      border-color: var(--accent);
    }

    .l-btn {
      width: 100%;
      padding: 11px;
      border-radius: 9px;
      background: var(--accent-grad);
      color: #fff;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      box-shadow: 0 4px 14px var(--accent-glow);
      transition: all 0.16s;
      margin-top: 4px;
    }

    .l-btn:hover {
      transform: translateY(-1px);
    }

    .l-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .spinner {
      display: inline-block;
      width: 13px;
      height: 13px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      vertical-align: middle;
      margin-right: 6px;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .toast-wrap {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }

    .toast-item {
      background: var(--card2);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 11px 16px;
      font-size: 12.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 200px;
      max-width: 420px;
      box-shadow: var(--shadow-md);
      animation: slideIn 0.2s ease;
      color: var(--text);
    }

    .toast-item span { line-height: 1.4; }

    .toast-item.success {
      border-color: rgba(34, 197, 94, 0.3);
      color: var(--success);
    }

    .toast-item.error {
      border-color: rgba(232, 41, 58, 0.3);
      color: var(--accent2);
    }

    .toast-item.warn {
      border-color: rgba(251, 146, 60, 0.35);
      color: var(--warning);
    }

    .toast-item.info {
      border-color: rgba(79, 163, 224, 0.3);
      color: var(--info);
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(-12px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .shell {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    .sidebar {
      width: 68px;
      background: var(--bg2);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 0;
      gap: 2px;
      flex-shrink: 0;
      z-index: 10;
      overflow: hidden;
      transition: width .28s cubic-bezier(.4, 0, .2, 1), padding .28s cubic-bezier(.4, 0, .2, 1);
    }

    .sidebar.expanded {
      width: 200px;
      align-items: flex-start;
      padding: 20px 10px;
    }

    .sidebar.expanded .logo {
      margin-left: 4px;
    }

    .sidebar.expanded .sb-bot {
      width: 100%;
    }

    /* Toggle icon rotates instead of swap */
    #sb-toggle-icon {
      transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    }

    .sidebar.expanded #sb-toggle-icon {
      transform: rotate(180deg);
    }

    .ni-label {
      opacity: 0;
      max-width: 0;
      overflow: hidden;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      transition: opacity .2s ease .05s, max-width .28s cubic-bezier(.4, 0, .2, 1);
      color: var(--text2);
      line-height: 1.3;
      flex-shrink: 0;
    }

    .sidebar.expanded .ni {
      width: 100%;
      padding: 0 8px;
      justify-content: flex-start;
      gap: 10px;
      border-radius: var(--r-sm);
    }

    .sidebar.expanded .ni-label {
      opacity: 1;
      max-width: 150px;
    }

    .sidebar.expanded .ni.on .ni-label {
      color: var(--accent);
    }

    /* Sidebar group */
    .ni-group-header {
      position: relative;
    }

    /* collapsed: label & chevron keluar dari flow supaya icon tetap center */
    .sidebar:not(.expanded) .ni-group-header .ni-label,
    .sidebar:not(.expanded) .ni-group-header .ni-chevron {
      position: absolute;
      width: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .ni-group-header .ni-chevron {
      margin-left: auto;
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: opacity .2s ease .05s, width .28s cubic-bezier(.4, 0, .2, 1), transform .25s;
      flex-shrink: 0;
    }

    .sidebar.expanded .ni-group-header {
      width: 100%;
      padding: 0 8px;
      justify-content: flex-start;
      gap: 8px;
      border-radius: var(--r-sm);
      height: 26px;
      margin-top: 14px;
    }

    .sidebar.expanded .ni-group-header .ni-label,
    .sidebar.expanded .ni-group-header .ni-chevron {
      position: static;
    }

    .sidebar.expanded .ni-group-header .ni-chevron {
      opacity: 1;
      width: 14px;
    }

    .ni-group-header.open .ni-chevron {
      transform: rotate(180deg);
    }

    /* Expanded: group header → pure section label */
    .sidebar.expanded .ni-group-header:hover { background: transparent; color: var(--text2); }
    .sidebar.expanded .ni-group-header > svg:not(.ni-chevron) { display: none; }
    .sidebar.expanded .ni-group-header.child-on { color: var(--accent); }
    /* Children: indented under section label */
    .sidebar.expanded .ni-group-children .ni { padding-left: 14px; }

    .ni-group-header .ni-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .6px;
      color: var(--text3);
    }

    .ni-group-children {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      overflow: hidden;
      max-height: 0;
      transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
      width: 100%;
    }

    .ni-group-children.open {
      max-height: 220px;
    }

    .sidebar.expanded .ni-group-children {
      align-items: stretch;
    }

    .logo {
      width: 36px;
      height: 36px;
      background: var(--accent-grad);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      box-shadow: 0 0 16px var(--accent-glow);
      flex-shrink: 0;
    }

    .ni {
      width: 40px;
      height: var(--control-h);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.16s;
      color: var(--text3);
      position: relative;
    }

    .ni:hover {
      background: var(--card2);
      color: var(--text2);
    }

    .ni.on {
      background: var(--accent-dim);
    }

    .ni.on svg {
      color: var(--accent);
    }

    .ni.on::before {
      content: '';
      position: absolute;
      left: -1px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 20px;
      background: var(--accent);
      border-radius: 0 3px 3px 0;
    }

    .sb-bot {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    /* ── Sidebar account (bawah) ── */
    .sb-acct-wrap { position: relative; width: 100%; margin-top: 6px; }
    .sb-acct {
      display: flex; align-items: center; gap: 9px;
      width: 40px; height: 44px; margin: 0 auto;
      padding: 0; border: 1px solid transparent; background: none;
      border-radius: 10px; cursor: pointer;
      transition: background .16s, border-color .16s;
      font-family: var(--font); justify-content: center;
    }
    .sb-acct:hover, .sb-acct.open { background: var(--card2); }
    .sidebar.expanded .sb-acct {
      width: 100%; padding: 0 8px; justify-content: flex-start;
      border-color: var(--border); background: var(--card);
    }
    .sidebar.expanded .sb-acct:hover,
    .sidebar.expanded .sb-acct.open { background: var(--card2); }
    .sb-acct-info { display: none; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
    .sidebar.expanded .sb-acct-info { display: flex; }
    .sb-acct .tb-uname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sb-acct .tb-chevron { display: none; flex-shrink: 0; }
    .sidebar.expanded .sb-acct .tb-chevron { display: block; }
    .sb-acct.open .tb-chevron { transform: rotate(180deg); }

    /* Dropdown account — fixed agar lolos dari overflow:hidden sidebar.
       Pakai ID supaya menang specificity atas .tb-dropdown (position:absolute). */
    #tb-dd-user.sb-acct-dd { position: fixed; top: auto; right: auto; width: 212px; }
    .sidebar:not(.expanded) #tb-dd-user.sb-acct-dd { left: 76px; bottom: 16px; }
    .sidebar.expanded #tb-dd-user.sb-acct-dd { left: 12px; bottom: 76px; }

    /* ── Sidebar groups ── */
    .ni-group-children.open {
      max-height: 320px;
    }
    /* Collapsed sidebar: sembunyikan group children, pakai flyout */
    .sidebar:not(.expanded) .ni-group-children {
      max-height: 0 !important;
    }
    /* Group header: child active state */
    .ni-group-header.child-on {
      color: var(--text2);
    }
    .sidebar:not(.expanded) .ni-group-header.child-on {
      background: var(--accent-dim);
    }
    .sidebar:not(.expanded) .ni-group-header.child-on::before {
      content: '';
      position: absolute;
      left: -1px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 20px;
      background: var(--accent);
      border-radius: 0 3px 3px 0;
    }
    /* Group header pinned (flyout terbuka via klik) */
    .sidebar:not(.expanded) .ni-group-header.pinned {
      background: var(--accent-dim);
      outline: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      color: var(--text);
    }
    .sidebar:not(.expanded) .ni-group-header.pinned::before {
      content: '';
      position: absolute;
      left: -1px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 20px;
      background: var(--accent);
      border-radius: 0 3px 3px 0;
    }

    /* ── Flyout panel ── */
    #sb-flyout {
      position: fixed;
      left: 76px;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 6px;
      min-width: 172px;
      box-shadow: 0 8px 28px rgba(0,0,0,.3);
      z-index: 200;
      display: none;
      animation: sbFlyIn .14s ease;
    }
    #sb-flyout.visible { display: block; }
    #sb-flyout.pinned { border-color: var(--accent); }
    @keyframes sbFlyIn {
      from { opacity: 0; transform: translateX(-5px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .sb-flyout-label {
      padding: 5px 10px 7px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--text3);
      border-bottom: 1px solid var(--border);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #sb-flyout.pinned .sb-flyout-label { color: var(--accent); }
    .sb-flyout-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: var(--accent);
      display: none;
      flex-shrink: 0;
    }
    #sb-flyout.pinned .sb-flyout-dot { display: block; }
    .sb-flyout-item {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 34px;
      border-radius: 7px;
      cursor: pointer;
      padding: 0 10px;
      color: var(--text2);
      font-size: 13px;
      position: relative;
      transition: background .1s, color .1s;
    }
    .sb-flyout-item:hover { background: var(--card2); color: var(--text); }
    .sb-flyout-item.on {
      color: var(--accent);
      background: var(--accent-dim);
      font-weight: 600;
    }
    .sb-flyout-item.on::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 2px; height: 14px;
      background: var(--accent);
      border-radius: 0 2px 2px 0;
    }

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .topbar {
      height: 48px;
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 16px 0 18px;
      gap: 8px;
      flex-shrink: 0;
      position: relative;
      z-index: 20;
    }
    .tb-page-name { font-size: 17px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; flex-shrink: 0; color: var(--text); }
    .tb-search {
      display: flex; align-items: center; gap: 7px;
      height: 30px; padding: 0 10px;
      border-radius: 8px; border: 1px solid var(--border2);
      background: var(--card); cursor: pointer;
      transition: border-color .15s, background .15s;
      width: 280px; flex-shrink: 0;
    }
    .tb-search:hover { border-color: var(--border); background: var(--card2); }
    .tb-search-hint { flex: 1; font-size: 11.5px; color: var(--text3); font-family: var(--font); white-space: nowrap; pointer-events: none; }
    .tb-kbd { font-size: 10px; color: var(--text3); background: var(--card2); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 5px; letter-spacing: .3px; flex-shrink: 0; pointer-events: none; }
    .tb-right { display: flex; align-items: center; gap: 3px; margin-left: auto; }
    .tb-icon-btn {
      width: 30px; height: 30px; border-radius: 8px;
      border: none; background: none; color: var(--text3); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s; position: relative; flex-shrink: 0; font-family: var(--font);
    }
    .tb-icon-btn:hover { background: var(--card2); color: var(--text2); }
    .tb-icon-btn.on { background: var(--card2); color: var(--text); }
    .tb-notif-badge {
      position: absolute; top: 5px; right: 5px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent); border: 1.5px solid var(--bg2);
    }
    .tb-sep-v { width: 1px; height: 16px; background: var(--border2); margin: 0 5px; flex-shrink: 0; }
    .tb-user-btn {
      display: flex; align-items: center; gap: 7px;
      padding: 3px 6px 3px 3px;
      border-radius: 8px; border: 1px solid transparent;
      background: none; cursor: pointer;
      transition: background .15s, border-color .15s; flex-shrink: 0; font-family: var(--font);
    }
    .tb-user-btn:hover, .tb-user-btn.open { background: var(--card); border-color: var(--border2); }
    .tb-av {
      width: 26px; height: 26px; border-radius: 7px;
      background: linear-gradient(135deg, #2d2d4a, #4a2070);
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700;
      border: 1.5px solid var(--border2); flex-shrink: 0;
    }
    .tb-uname { font-size: 11.5px; font-weight: 600; letter-spacing: -.1px; color: var(--text); display: block; }
    .tb-urole { font-size: 9.5px; color: var(--text3); font-weight: 500; display: block; margin-top: 1px; }
    .tb-chevron { color: var(--text3); transition: transform .15s; flex-shrink: 0; }
    .tb-user-btn.open .tb-chevron { transform: rotate(180deg); }
    .tb-dropdown {
      position: absolute; top: calc(100% + 5px); right: 0;
      background: var(--card); border: 1px solid var(--border2);
      border-radius: var(--r2); box-shadow: 0 8px 24px rgba(0,0,0,.45);
      z-index: 200; overflow: hidden;
      animation: tbDdIn .1s ease;
    }
    @keyframes tbDdIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
    .tb-dd-user { width: 210px; }
    .tb-dd-head { padding: 13px 14px 11px; border-bottom: 1px solid var(--border); }
    .tb-dd-fullname { font-size: 13px; font-weight: 700; margin-bottom: 1px; }
    .tb-dd-email-text { font-size: 10.5px; color: var(--text3); margin-bottom: 7px; }
    .tb-dd-rolebadge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 10px; background: var(--accent-dim); color: var(--accent2); display: inline-block; }
    .tb-dd-item {
      display: flex; align-items: center; gap: 9px;
      padding: 9px 14px; font-size: 12px; font-weight: 600;
      color: var(--text2); cursor: pointer; transition: background .1s;
      width: 100%; border: none; background: none; font-family: var(--font); text-align: left;
    }
    .tb-dd-item:hover { background: var(--card2); color: var(--text); }
    .tb-dd-item svg { color: var(--text3); flex-shrink: 0; }
    .tb-dd-item:hover svg { color: var(--text2); }
    .tb-dd-sep { height: 1px; background: var(--border); margin: 2px 0; }
    .tb-dd-danger { color: var(--accent2); }
    .tb-dd-danger:hover { background: var(--accent-dim); color: var(--accent2); }
    .tb-dd-danger svg, .tb-dd-danger:hover svg { color: var(--accent2); }
    .tb-dd-notif { width: 300px; }
    .tb-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 9px; border-bottom: 1px solid var(--border); }
    .tb-notif-title { font-size: 12px; font-weight: 700; }
    .tb-notif-clear { font-size: 10.5px; font-weight: 600; color: var(--text3); cursor: pointer; border: none; background: none; font-family: var(--font); padding: 0; }
    .tb-notif-clear:hover { color: var(--text); }
    .tb-notif-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
    .tb-notif-item:hover { background: var(--card2); }
    .tb-notif-item:last-child { border-bottom: none; }
    .tb-notif-ndot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
    .tb-notif-text { font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--text); }
    .tb-notif-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }
    .tb-notif-empty { padding: 28px 14px; text-align: center; font-size: 12px; color: var(--text3); }

    .content {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }

    .content::-webkit-scrollbar {
      width: 4px;
    }

    .content::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 4px;
    }

    .page {
      display: none;
    }

    .page.on {
      display: block;
      animation: fu 0.28s ease both;
    }

    @keyframes fu {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: none; /* none = no stacking context, fixed children render at viewport level */
      }
    }

    .ph {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .page > .ph {
      margin-bottom: 20px;
    }

    .ptitle {
      display: none; /* judul halaman sekarang tampil di topbar — hindari redundansi */
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.7px;
      line-height: 1.1;
    }

    .psub {
      font-size: 12.5px;
      color: var(--text2);
      margin-top: 3px;
    }

    .date-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 6px 12px;
      font-size: 12px;
      color: var(--text2);
      font-weight: 500;
      white-space: nowrap;
    }

    .bal-amt {
      font-size: 42px;
      font-weight: 800;
      letter-spacing: -2px;
      line-height: 1;
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
    }

    .bal-cents {
      font-size: 19px;
      color: var(--text2);
      font-weight: 600;
    }

    .bal-sub {
      font-size: 12px;
      color: var(--text2);
      margin-top: 6px;
    }

    .bal-sub b {
      color: var(--success);
    }

    .act-row {
      display: flex;
      gap: 8px;
      margin-top: 14px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
      padding: 8px 14px 8px 16px;
      border-radius: 9px;
      font-family: var(--font);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.16s;
      white-space: nowrap;
      line-height: 1;
    }

    .btn-acc {
      background: var(--accent-grad);
      color: #fff;
      box-shadow: 0 3px 12px var(--accent-glow);
    }

    .btn-acc:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 16px var(--accent-glow);
    }

    .btn-acc:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    .btn-danger {
      background: var(--accent-dim);
      color: var(--accent2);
      border-color: rgba(232, 41, 58, 0.3);
    }

    .btn-danger:hover {
      background: rgba(232, 41, 58, 0.2);
    }

    .btn-ghost {
      background: var(--card);
      color: var(--text);
      border-color: var(--border2);
    }

    .btn-ghost:hover {
      background: var(--card2);
    }

    .btn-sm {
      padding: 5px 11px;
      font-size: 11.5px;
    }

    .btn-icon {
      padding: 6px;
      background: transparent;
      border: none;
      color: var(--text3);
      cursor: pointer;
      border-radius: 7px;
      transition: all 0.16s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .btn-icon:hover {
      background: var(--card2);
      color: var(--text2);
    }

    .g5 {
      display: grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .g4 {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 13px;
      margin-bottom: 16px;
    }

    .g3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 13px;
      margin-bottom: 16px;
    }

    .g2 {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap: 13px;
      margin-bottom: 16px;
    }

    .dg {
      display: grid;
      grid-template-columns: 1fr 1.3fr 1fr;
      gap: 13px;
      margin-bottom: 16px;
    }

    /* ── Dashboard layout ── */
    .g-chart {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 13px;
      margin-bottom: 16px;
      align-items: start;
    }
    .kpi-card { transition: transform .15s, box-shadow .15s; }
    .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .kpi-val { font-size: 30px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; margin-bottom: 6px; }
    .kpi-sub { font-size: 11px; color: var(--text3); }
    .kpi-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-top: 8px; }
    .mini-bar-wrap { margin-top: 12px; }
    /* ── Kanban Timeline ── */
    .kanban-col { flex: 0 0 304px; width: 304px; min-width: 304px; max-width: 304px; display: flex; flex-direction: column; gap: 9px; background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: var(--r2); padding: 10px; }
    /* ── Timeline Calendar View ── */
    .tl-cal { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r2); background:var(--card); }
    .tl-cal-head { display:flex; position:sticky; top:0; z-index:4; background:var(--card); border-bottom:1px solid var(--border); }
    .tl-cal-label-col { flex-shrink:0; width:190px; min-width:190px; padding:10px 14px; border-right:1px solid var(--border); font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; display:flex; align-items:flex-end; }
    .tl-cal-dates { display:flex; }
    .tl-cal-day { text-align:center; padding:8px 0 6px; border-right:1px solid var(--border2); flex-shrink:0; }
    .tl-cal-day-name { font-size:10px; color:var(--text3); font-weight:600; margin-bottom:2px; }
    .tl-cal-day-num { font-size:13px; font-weight:700; color:var(--text2); }
    .tl-cal-day.today .tl-cal-day-num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; }
    .tl-cal-day.weekend { background:rgba(255,255,255,.02); }
    .tl-cal-body { position:relative; }
    .tl-cal-row { display:flex; border-bottom:1px solid var(--border2); align-items:center; min-height:46px; }
    .tl-cal-row:hover .tl-cal-row-info { background:var(--card2); }
    .tl-cal-row-info { flex-shrink:0; width:190px; min-width:190px; padding:6px 14px; border-right:1px solid var(--border); height:100%; display:flex; flex-direction:column; justify-content:center; gap:2px; }
    .tl-cal-row-track { flex:1; position:relative; height:46px; }
    .tl-cal-bar { position:absolute; top:9px; height:28px; border-radius:6px; display:flex; align-items:center; padding:0 9px; font-size:11px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; z-index:2; transition:filter .15s; box-shadow:0 1px 4px rgba(0,0,0,.25); }
    .tl-cal-bar:hover { filter:brightness(1.12); }
    .tl-cal-today-line { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); z-index:3; pointer-events:none; opacity:.7; }
    .tl-cal-today-line::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:var(--accent); }
    .tl-cal-empty-row { height:46px; flex:1; background:repeating-linear-gradient(90deg,transparent,transparent calc(48px - 1px),var(--border2) calc(48px - 1px),var(--border2) 48px); }
    .tl-cal-month-marker { position:absolute; top:0; bottom:0; width:1px; background:var(--border); z-index:1; pointer-events:none; }
    .tl-cal-month-label { position:absolute; top:0; font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; background:var(--card); padding:0 4px; border-radius:3px; }
    .kanban-col-hd { display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:var(--r-sm);border:1px solid;margin-bottom:2px; }
    .kanban-col-hd-l { display:flex;align-items:center;gap:8px; }
    .kanban-col-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
    .kanban-col-title { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px; }
    .kanban-col-sub { font-size:10px;color:var(--text3); }
    .kanban-col-cnt { font-size:11px;font-weight:800;padding:2px 9px;border-radius:10px;min-width:24px;text-align:center; }
    .kcard { background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px 11px;cursor:pointer;transition:all .15s;position:relative;overflow:hidden; }
    .kcard:hover { border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow-md); }
    .kcard.kdrag { border-color:var(--accent);border-style:dashed;background:var(--accent-dim);box-shadow:0 0 0 2px var(--accent-glow); }
    .kcard.kdrag * { pointer-events:none; }
    .kcard.kuploading { opacity:.6;pointer-events:none; }
    .kcard-stripe { position:absolute;left:0;top:0;bottom:0;width:3px; }
    .kcard-top { display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:5px; }
    .kcard-nomor { font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent); }
    .kcard-type { font-size:9px;font-weight:800;padding:2px 7px;border-radius:5px;white-space:nowrap;flex-shrink:0;border:1px solid rgba(255,255,255,.08); }
    .kcard-customer {font-size: 14px;color:var(--text);font-weight: bold;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .kcard-note { font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px; }
    .kcard-thumb { position:relative;margin:8px 0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--card2); }
    .kcard-thumb img { width:100%;height:auto;max-height:240px;object-fit:contain;display:block; }
    .kcard-thumb-fb { display:none;width:100%;height:72px;align-items:center;justify-content:center;gap:5px;color:var(--text3);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px; }
    .kcard-thumb.no-img img { display:none; }
    .kcard-thumb.no-img .kcard-thumb-fb { display:flex; }
    .kcard-footer { display:flex;align-items:center;justify-content:space-between;gap:6px; }
    .kcard-flags { margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;min-height:22px; }
    .kcard-flag {min-width: 24px;height: 24px;border-radius:5px;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:0 4px;background:var(--card2);color:var(--text3);font-size:9px;font-weight:800;line-height:1;}
    .kcard-flag svg { width:11px;height:11px;display:block; }
    .kcard-flag.done { color:var(--success-bright);border-color:rgba(52,211,153,.28);background:rgba(52,211,153,.1); }
    .kcard-qbtn {font-family:var(--font);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-sm);padding:5px 10px;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .12s;flex-shrink:0;background:var(--accent);color:#fff;/* box-shadow:0 8px 18px rgba(232,41,58,.22); */}
    .kcard-qbtn:hover { background:var(--accent2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(232,41,58,.28); }
    .kcard-dl {margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
    .kcard-dl-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:5px; }
    .kcard-dl-label { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px; }
    .kcard-dl-date { font-size:10px;font-weight:700; }
    .kcard-dl-track { height:3px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden; }
    .kcard-dl-fill { height:100%;border-radius:2px;transition:width .3s; }
    .mini-bar { display: flex; gap: 3px; height: 4px; border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
    .mini-seg { height: 100%; border-radius: 2px; }
    .mini-labels { display: flex; gap: 3px; }
    .mini-lbl { font-size: 9px; color: var(--text3); }
    .health-card { transition: transform .15s, box-shadow .15s; }
    .health-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .hc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .hc-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); }
    .hc-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
    .hc-badge--danger { background: var(--danger-dim); color: var(--danger-soft); }
    .hc-badge--warning { background: var(--warning-dim); color: var(--warning); }
    .hc-val { font-size: 20px; font-weight: 800; letter-spacing: -.8px; line-height: 1; margin-bottom: 4px; }
    .hc-sub { font-size: 11px; color: var(--text3); }
    .chart-wrap svg { display: block; width: 100%; overflow: visible; }
    .spark-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--text3); margin-top: 5px; }
    .pipeline { display: flex; flex-direction: column; gap: 5px; }
    .ps { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-radius: var(--r-sm); border: 1px solid var(--border); transition: all .15s; }
    .ps:hover { border-color: var(--border2); background: var(--card2); }
    .ps-left { display: flex; align-items: center; gap: 8px; }
    .ps-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .ps-name { font-size: 12px; font-weight: 600; color: var(--text2); }
    .ps-count { font-size: 14px; font-weight: 800; }
    .period-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .period-lbl { font-size: 11px; font-weight: 600; color: var(--text3); white-space: nowrap; }
    .period-chips { display: flex; gap: 6px; flex-wrap: wrap; }
    .pchip { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: none; color: var(--text3); cursor: pointer; font-family: inherit; transition: all .15s; }
    .pchip:hover { color: var(--text2); border-color: var(--border2); }
    .pchip.on { background: var(--card); border-color: var(--border2); color: var(--text); }
    .d-ord-hd { display: flex; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
    .d-ord-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: all .12s; }
    .d-ord-row:last-child { border-bottom: none; }
    .d-ord-row:hover { background: var(--card2); margin: 0 -17px; padding: 10px 17px; border-radius: var(--r-sm); border-bottom-color: transparent; }
    .d-st-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
    .d-alert-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .d-alert-row:last-child { border-bottom: none; }
    .d-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .d-stat-row:last-child { border-bottom: none; }
    .d-stat-lbl { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 10px; }
    .d-stat-icon { width: 30px; height: 30px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .d-stat-val { font-size: 15px; font-weight: 800; }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      padding: 17px;
      transition: border-color 0.16s;
    }

    .card:hover {
      border-color: var(--border2);
    }

    .master-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .master-stat {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px 16px;
      min-width: 0;
    }

    .master-stat-lbl {
      font-size: 10px;
      color: var(--text3);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 7px;
    }

    .master-stat-val {
      font-size: 22px;
      line-height: 1;
      font-weight: 850;
      letter-spacing: -.7px;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .master-stat-sub {
      margin-top: 6px;
      font-size: 11px;
      color: var(--text3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .master-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .master-search {
      position: relative;
      flex: 1;
      min-width: 220px;
    }

    .master-search svg {
      position: absolute;
      left: 11px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      pointer-events: none;
    }

    .master-search .inp {
      width: 100%;
      padding-left: 34px;
      box-sizing: border-box;
      font-size: 12px;
    }

    .master-count {
      font-size: 11px;
      color: var(--text3);
      font-weight: 700;
      white-space: nowrap;
    }

    .master-row {
      cursor: pointer;
    }

    .master-row:hover {
      background: rgba(255, 255, 255, .025);
    }

    body.light .master-row:hover {
      background: rgba(0, 0, 0, .025);
    }

    .master-detail-head {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 18px;
    }

    .master-avatar {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: var(--accent-dim);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 850;
      flex-shrink: 0;
    }

    .master-detail-title {
      font-size: 20px;
      font-weight: 850;
      letter-spacing: -.5px;
      margin-bottom: 4px;
    }

    .master-detail-sub {
      font-size: 12px;
      color: var(--text3);
      line-height: 1.5;
    }

    .master-detail-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 18px;
    }

    .master-mini {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px 12px;
    }

    .master-mini-lbl {
      font-size: 10px;
      color: var(--text3);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 5px;
    }

    .master-mini-val {
      font-size: 13px;
      color: var(--text);
      font-weight: 750;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .master-section {
      margin-top: 18px;
    }

    .master-section-title {
      font-size: 11px;
      font-weight: 800;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 9px;
    }

    .master-list {
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;
    }

    .master-list-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }

    .master-list-row:last-child {
      border-bottom: 0;
    }

    .master-list-main {
      min-width: 0;
    }

    .master-list-title {
      font-weight: 750;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .master-list-sub {
      margin-top: 3px;
      color: var(--text3);
      font-size: 11px;
    }

    .master-list-meta {
      text-align: right;
      color: var(--text2);
      white-space: nowrap;
      font-size: 11px;
    }

    @media (max-width: 900px) {
      .master-summary,
      .master-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      .master-summary,
      .master-detail-grid {
        grid-template-columns: 1fr;
      }
    }

    .csm {
      border-radius: var(--r);
      padding: 14px;
    }

    .ch {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 13px;
    }

    .clbl {
      font-size: 10px;
      color: var(--text2);
      font-weight: 600;
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }

    .ctitle {
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -0.4px;
    }

    .csub {
      font-size: 11.5px;
      color: var(--text2);
      margin-top: 2px;
    }

    .sv {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -1px;
      line-height: 1;
      margin: 7px 0 5px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: 5px;
      font-size: 10.5px;
      font-weight: 700;
    }

    .tg {
      background: var(--success-dim);
      color: var(--success);
    }

    .cw {
      height: 130px;
      margin-top: 7px;
    }

    canvas {
      width: 100% !important;
      height: 100% !important;
    }

    .tog-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      flex-shrink: 0;
    }

    .tog-wrap input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .tog-slider {
      display: inline-block;
      width: 36px;
      height: 20px;
      background: var(--border);
      border-radius: 20px;
      transition: background .2s;
      position: relative;
    }

    .tog-slider::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      background: #fff;
      border-radius: 50%;
      transition: transform .2s;
    }

    .tog-wrap input:checked+.tog-slider {
      background: var(--accent);
    }

    .tog-wrap input:checked+.tog-slider::after {
      transform: translateX(16px);
    }

    .tx-tabs {
      display: flex;
      gap: 2px;
      margin-bottom: 12px;
      background: var(--card2);
      padding: 3px;
      border-radius: var(--r-sm);
      width: fit-content;
    }

    .tx-tab {
      padding: 4px 13px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.16s;
      color: var(--text2);
    }

    .tx-tab.on {
      background: var(--card);
      color: var(--text);
      box-shadow: var(--shadow-sm);
    }

    .tx-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 0;
      border-bottom: 1px solid var(--border);
    }

    .tx-item:last-child {
      border-bottom: none;
    }

    .tx-ic {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: var(--card2);
    }

    .tx-info {
      flex: 1;
    }

    .tx-name {
      font-size: 12px;
      font-weight: 600;
    }

    .tx-meta {
      font-size: 10.5px;
      color: var(--text2);
      margin-top: 1px;
    }

    .tx-amt {
      font-size: 12px;
      font-weight: 700;
    }

    .pos {
      color: var(--success);
    }

    .neg {
      color: var(--accent2);
    }

    .w-amt {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.8px;
      margin: 6px 0 3px;
    }

    .w-cats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 6px;
      margin-top: 13px;
    }

    .w-cat {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 10px 6px;
      text-align: center;
      cursor: pointer;
      transition: all 0.16s;
    }

    .w-cat:hover {
      border-color: var(--accent);
      background: var(--accent-dim);
    }

    .w-cat .wi {
      margin-bottom: 5px;
      display: flex;
      justify-content: center;
    }

    .w-cat .wl {
      font-size: 9.5px;
      color: var(--text2);
      font-weight: 600;
    }

    .tw {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    thead th {
      padding: 9px 13px;
      text-align: left;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--text3);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      user-select: none;
    }

    thead th.sortable {
      cursor: pointer;
      transition: color 0.15s;
    }

    thead th.sortable:hover {
      color: var(--text2);
    }

    thead th.sort-asc,
    thead th.sort-desc {
      color: var(--accent2);
    }

    .sort-arrow {
      display: inline-flex;
      align-items: center;
      margin-left: 5px;
      opacity: 0.4;
      vertical-align: middle;
    }

    thead th.sort-asc .sort-arrow::after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 5px solid var(--accent2);
      opacity: 1;
    }

    thead th.sort-desc .sort-arrow::after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid var(--accent2);
      opacity: 1;
    }

    thead th:not(.sort-asc):not(.sort-desc) .sort-arrow::after {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg);
      margin-top: -3px;
      opacity: 0.3;
    }

    tbody td {
      padding: 10px 13px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      color: var(--text2);
      vertical-align: middle;
      transition: background 0.12s;
    }

    tbody tr:last-child td {
      border-bottom: none;
    }

    tbody tr:hover td {
      background: var(--card2);
      color: var(--text);
    }

    .tdn {
      color: var(--text) !important;
      font-weight: 600;
    }

    .tdr {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 5px;
      font-size: 10.5px;
      font-weight: 600;
    }

    .ba {
      background: rgba(71, 255, 212, 0.1);
      color: #47ffd4;
      border: 1px solid rgba(71, 255, 212, 0.2);
    }

    .bb {
      background: rgba(160, 160, 200, 0.1);
      color: #a0a0c8;
      border: 1px solid rgba(160, 160, 200, 0.2);
    }

    .bp {
      background: rgba(255, 200, 71, 0.1);
      color: #ffc847;
      border: 1px solid rgba(255, 200, 71, 0.2);
    }

    .bl {
      background: rgba(232, 41, 58, 0.1);
      color: #ff7080;
      border: 1px solid rgba(232, 41, 58, 0.2);
    }

    .bs {
      background: rgba(180, 71, 255, 0.1);
      color: #c070ff;
      border: 1px solid rgba(180, 71, 255, 0.2);
    }

    .bj {
      background: rgba(71, 150, 255, 0.1);
      color: #60a0ff;
      border: 1px solid rgba(71, 150, 255, 0.2);
    }

    .bg-default {
      background: rgba(139, 139, 158, 0.1);
      color: var(--text2);
      border: 1px solid rgba(139, 139, 158, 0.2);
    }

    .pills {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 13px;
    }

    .pill {
      padding: 4px 12px;
      border-radius: 7px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border2);
      background: var(--card2);
      color: var(--text2);
      transition: all 0.16s;
    }

    .pill:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .pill.on {
      background: var(--accent-dim);
      color: var(--accent2);
      border-color: var(--accent);
    }

    .fld {
      margin-bottom: 12px;
      min-width: 0;
    }

    .fld label {
      display: block;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 4px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
    }

    .inp {
      width: 100%;
      background: var(--card2);
      border: 1px solid var(--border2);
      border-radius: var(--r-sm);
      padding: 8px 11px;
      color: var(--text);
      font-family: var(--font);
      font-size: 12.5px;
      outline: none;
      transition: border-color 0.16s;
    }

    .inp:focus {
      border-color: var(--accent);
    }

    .inp option {
      background: var(--card2);
    }

    textarea.inp {
      resize: vertical;
      min-height: 60px;
    }

    .inp::placeholder {
      color: var(--text3);
    }

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      z-index: 999;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
    }

    .overlay.on {
      display: flex;
    }

    .modal {
      background: var(--card);
      border: 1px solid var(--border2);
      border-radius: var(--r2);
      width: 500px;
      max-width: 95vw;
      max-height: 90vh;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .modal::-webkit-scrollbar {
      display: none;
    }

    #gl-modal-body {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    #gl-modal-body::-webkit-scrollbar {
      display: none;
    }

    input[type='number'].spn::-webkit-inner-spin-button,
    input[type='number'].spn::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type='number'].spn {
      -moz-appearance: textfield;
      appearance: textfield;
    }

    select.inp {
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 28px;
      cursor: pointer;
    }

    /* ── Custom Select (csel) ── */
    .csel { position: relative; width: 100%; min-width: 0; }
    .csel-trigger {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 11px;
      background: var(--bg2);
      border: 1px solid var(--border2);
      border-radius: var(--r-sm);
      cursor: pointer;
      min-height: 36px;
      transition: border-color 0.15s;
      user-select: none;
      font-family: var(--font);
    }
    .csel-trigger:hover { border-color: rgba(255,255,255,0.18); }
    .csel-trigger.open { border-color: var(--accent); }
    .csel-val {
      flex: 1; font-size: 12.5px; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .csel-val.ph { color: var(--text3); margin-bottom: 0; }
    .csel-chev { flex-shrink: 0; color: var(--text3); transition: transform 0.2s; }
    .csel-trigger.open .csel-chev { transform: rotate(180deg); color: var(--accent); }
    .csel-dd {
      display: none;
      position: absolute;
      top: 100%; left: 0;
      min-width: 160px;
      background: var(--card);
      border: 1px solid var(--border2);
      border-radius: var(--r);
      box-shadow: var(--shadow-md);
      z-index: 9999; overflow-y: auto; max-height: 260px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .csel-dd.open { display: block; }
    .csel-dd::-webkit-scrollbar { display: none; }
    /* Portfolio brand chips */
    .pf-brand-chip {
      display:flex;align-items:center;gap:6px;padding:5px 8px 5px 6px;
      border-radius:20px;border:1.5px solid var(--border);cursor:pointer;
      font-size:12px;color:var(--text3);background:var(--bg2);
      transition:border-color .15s,background .15s,color .15s;user-select:none;
    }
    .pf-brand-chip.selected { border-color:var(--accent);background:var(--accent-dim);color:var(--accent); }
    .pf-brand-chip img { width:22px;height:22px;object-fit:contain;border-radius:3px;flex-shrink:0; }
    .pf-brand-chip .chip-star {
      margin-left:2px;font-size:13px;opacity:.35;cursor:pointer;transition:opacity .15s;line-height:1;
    }
    .pf-brand-chip.selected .chip-star { opacity:.55; }
    .pf-brand-chip.selected .chip-star.lit { opacity:1; }
    .csel-item {
      padding: 9px 14px; font-size: 12.5px;
      color: var(--text); cursor: pointer; transition: background 0.1s;
    }
    .csel-item:hover { background: var(--bg2); }
    .csel-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 500; }
    /* csel with search */
    .csel-search-wrap {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border2);
      position: sticky; top: 0;
      background: var(--card);
      z-index: 1;
    }
    .csel-search-inp {
      width: 100%; box-sizing: border-box;
      background: var(--bg2);
      border: 1px solid var(--border2);
      border-radius: 6px;
      padding: 6px 10px;
      color: var(--text);
      font-size: 12px;
      font-family: var(--font);
      outline: none;
    }
    .csel-search-inp::placeholder { color: var(--text3); }
    .csel-search-inp:focus { border-color: var(--accent); }
    .csel-grp { padding: 6px 12px 3px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); pointer-events: none; }

    /* ── Date Picker ── */
    .dp-wrap{position:relative;display:inline-block}
    .dp-trigger{display:flex;align-items:center;gap:7px;padding:0 11px;height:36px;min-width:130px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r-sm);cursor:pointer;font-family:var(--font);font-size:12.5px;color:var(--text);transition:border-color .15s,box-shadow .15s;user-select:none;white-space:nowrap}
    .dp-trigger:hover{border-color:rgba(255,255,255,.22)}
    .dp-trigger.open{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,41,58,.1)}
    .dp-ico{color:var(--text3);flex-shrink:0;transition:color .15s}
    .dp-trigger.open .dp-ico{color:var(--accent)}
    .dp-val{flex:1;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;line-height:1}
    .dp-val.ph{color:var(--text3);align-items:center;margin-bottom:0}
    #dp-cal{position:fixed;z-index:99999;display:none;background:var(--card);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.6);width:284px;overflow:hidden}
    #dp-cal.dp-open{display:block;animation:dpIn .12s ease}
    @keyframes dpIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
    .dp-cal-inner{padding:12px;position:relative}
    .dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
    .dp-nav-btn{width:28px;height:28px;border-radius:6px;border:none;cursor:pointer;background:var(--card2);color:var(--text2);display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
    .dp-nav-btn:hover{background:var(--accent-dim);color:var(--accent)}
    .dp-nav-title{font-size:13px;font-weight:700;color:var(--text);cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .12s;user-select:none}
    .dp-nav-title:hover{background:var(--card2)}
    .dp-daynames{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
    .dp-dn{text-align:center;font-size:10px;font-weight:700;color:var(--text3);padding:3px 0;letter-spacing:.04em}
    .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
    .dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:12.5px;cursor:pointer;position:relative;color:var(--text);border:none;background:transparent;font-family:var(--font);transition:background .1s,color .1s}
    .dp-cell:hover:not(.dp-other){background:var(--card2)}
    .dp-cell.dp-other{color:var(--text3);opacity:.3;pointer-events:none}
    .dp-cell.dp-today{color:var(--accent);font-weight:700}
    .dp-cell.dp-today::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--accent)}
    .dp-cell.dp-sel{background:var(--accent)!important;color:#fff!important;font-weight:700}
    .dp-cell.dp-sel.dp-today::after{background:rgba(255,255,255,.6)}
    .dp-my{position:absolute;inset:0;background:var(--card);border-radius:var(--r);z-index:2;padding:12px;display:none;flex-direction:column;gap:8px}
    .dp-my.dp-my-open{display:flex;animation:dpIn .1s ease}
    .dp-my-nav{display:flex;align-items:center;justify-content:space-between}
    .dp-my-title{font-size:13px;font-weight:700;color:var(--text)}
    .dp-my-grid,.dp-yr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
    .dp-mc{padding:8px 2px;border-radius:6px;font-size:11.5px;text-align:center;cursor:pointer;color:var(--text2);border:none;background:none;font-family:var(--font);transition:background .1s,color .1s}
    .dp-mc:hover{background:var(--card2);color:var(--text)}
    .dp-mc.dp-mc-on{background:var(--accent-dim);color:var(--accent);font-weight:700}
    #dp-cal.dp-mo .dp-nav,#dp-cal.dp-mo .dp-daynames,#dp-cal.dp-mo .dp-grid{display:none}
    #dp-cal.dp-mo .dp-cal-inner{min-height:0}
    #dp-cal.dp-mo .dp-my{position:static;inset:auto;padding:0;border-radius:0}

    .ord-time-pop{position:fixed;z-index:99999;display:none;width:316px;padding:14px;background:var(--card);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.6);transform-origin:top left}
    .ord-time-pop.on{display:block;animation:ordTimePopIn .18s cubic-bezier(.2,.9,.2,1)}
    @keyframes ordTimePopIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
    .ord-time-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:8px}
    .ord-time-display{display:grid;grid-template-columns:1fr 12px 1fr;align-items:center;gap:6px;margin-bottom:10px}
    .ord-time-display span{font-size:26px;font-weight:800;color:var(--text2);text-align:center}
    .ord-time-display-part{height:54px;border:1px solid var(--border2);border-radius:10px;background:var(--bg2);color:var(--text);font-family:var(--mono);font-size:27px;font-weight:800;cursor:pointer;transition:background .16s,border-color .16s,color .16s,transform .16s}
    .ord-time-display-part:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
    .ord-time-display-part.on{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}
    .ord-time-dial{position:relative;width:230px;height:230px;margin:0 auto;background:var(--bg2);border-radius:50%;border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);animation:ordTimeDialIn .2s cubic-bezier(.2,.9,.2,1);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
    .ord-time-dial:active{cursor:grabbing}
    @keyframes ordTimeDialIn{from{opacity:.2;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
    .ord-time-dial::before{content:'';position:absolute;inset:16px;border-radius:50%;background:rgba(255,255,255,.025)}
    .ord-time-hand{position:absolute;left:50%;top:50%;width:76px;height:2px;background:var(--accent);transform-origin:left center;z-index:1;transition:transform .2s cubic-bezier(.2,.9,.2,1),width .2s cubic-bezier(.2,.9,.2,1)}
    .ord-time-hand::after{content:'';position:absolute;right:-7px;top:50%;width:14px;height:14px;border-radius:50%;background:var(--accent);transform:translateY(-50%);box-shadow:0 0 0 5px rgba(232,41,58,.14)}
    .ord-time-hand-dot{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);z-index:2}
    .ord-time-dial-cell{position:absolute;display:grid;place-items:center;width:34px;height:34px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--text2);font-family:var(--mono);font-size:12px;font-weight:700;transform:translate(-50%,-50%);cursor:pointer;z-index:3;transition:background .14s,color .14s,transform .14s;animation:ordTimeCellIn .16s ease;touch-action:none;user-select:none;-webkit-user-select:none}
    .ord-time-dial-cell.inner{width:30px;height:30px;font-size:10.5px;color:var(--text3)}
    .ord-time-dial-cell:hover{background:var(--card2);color:var(--text);transform:translate(-50%,-50%) scale(1.06)}
    .ord-time-dial-cell.on{background:var(--accent);color:#fff;transform:translate(-50%,-50%) scale(1.08)}
    .ord-time-dial.dragging .ord-time-hand,.ord-time-dial.dragging .ord-time-dial-cell{transition:none}
    @keyframes ordTimeCellIn{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

    .mhd {
      padding: 18px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .mtitle {
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -0.3px;
    }

    .mbd {
      padding: 20px;
    }

    .mft {
      padding: 13px 20px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: 7px;
    }

    .rp-wrap { position: relative; display: flex; align-items: center; }
    .rp-wrap .rp-prefix { position: absolute; left: 10px; font-size: 13px; color: var(--text3); pointer-events: none; z-index: 1; }
    .rp-wrap input { padding-left: 30px !important; }
    .rp-wrap .spin-wrap .nfmt { left: 30px; max-width: calc(100% - 64px); }

    .ale {
      padding: 8px 12px;
      border-radius: 7px;
      font-size: 12px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 7px;
      background: rgba(232, 41, 58, 0.08);
      border: 1px solid rgba(232, 41, 58, 0.2);
      color: #ff8b95;
    }

    .dot-btn {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      background: transparent;
      border: none;
      color: var(--text3);
    }

    .dot-btn:hover {
      background: var(--card2);
      color: var(--text2);
    }

    .dot-menu {
      position: fixed;
      background: var(--card2);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 4px;
      min-width: 140px;
      z-index: 21100;
      box-shadow: var(--shadow-lg);
      display: none;
    }

    .dot-menu.on {
      display: block;
      animation: fu 0.15s ease both;
    }

    .dot-menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border-radius: 7px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      transition: all 0.12s;
      white-space: nowrap;
    }

    .dot-menu-item:hover {
      background: var(--card);
      color: var(--text);
    }

    .dot-menu-item.danger {
      color: var(--accent2);
    }

    .dot-menu-item.danger:hover {
      background: var(--accent-dim);
    }

    .dot-divider {
      height: 1px;
      background: var(--border);
      margin: 3px 0;
    }

    .disp {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 7px 10px;
      font-size: 11.5px;
      color: var(--text2);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .rw {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: var(--r2);
      padding: 17px;
      margin-top: 14px;
    }

    .rhpp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 13px;
    }

    .rhpp .rl {
      font-size: 11.5px;
      color: var(--text2);
    }

    .rhpp .rv {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .rg {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 10px;
    }

    .ri {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px;
      text-align: center;
      transition: all 0.16s;
    }

    .ri:hover {
      border-color: var(--accent);
      box-shadow: 0 0 16px var(--accent-dim);
    }

    .rl2 {
      font-size: 9.5px;
      color: var(--text2);
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    .rv2 {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: var(--accent2);
    }

    .rd {
      font-size: 10.5px;
      color: var(--text3);
      margin-top: 3px;
    }

    .sr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }

    .sr:last-child {
      border-bottom: none;
    }

    .sl {
      font-size: 13px;
      font-weight: 600;
    }

    .sd {
      font-size: 11px;
      color: var(--text2);
      margin-top: 2px;
    }

    .set-section-label {
      font-size: 9.5px;
      color: var(--text3);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 8px;
    }

    .si-unit {
      font-size: 12px;
      color: var(--text2);
    }

    .si {
      width: 100px;
      background: var(--card2);
      border: 1px solid var(--border2);
      border-radius: var(--r-sm);
      padding: 6px 10px;
      color: var(--text);
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: 600;
      text-align: right;
      outline: none;
    }

    input[type='number'] {
      color-scheme: dark;
    }

    /* Custom number spinner */
    .spin-wrap {
      position: relative;
      display: inline-block;
    }

    .spin-wrap.sw-full {
      display: block;
      width: 100%;
    }

    .spin-wrap input[type='number']::-webkit-inner-spin-button,
    .spin-wrap input[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .spin-wrap input[type='number'] {
      -moz-appearance: textfield;
      appearance: textfield;
    }

    .spin-btns {
      position: absolute;
      right: 1px;
      top: 1px;
      bottom: 1px;
      width: 22px;
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--border);
      border-radius: 0 7px 7px 0;
      overflow: hidden;
    }

    .spin-btn {
      flex: 1;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--text3);
      display: flex;
      align-items: center;
      justify-content: center;
      transition:
        background 0.1s,
        color 0.1s;
      padding: 0;
      -webkit-user-select: none;
      user-select: none;
    }

    .spin-btn:hover {
      background: rgba(255, 255, 255, 0.07);
      color: var(--text2);
    }

    .spin-btn:active {
      background: var(--accent-dim);
      color: var(--accent);
    }

    .spin-btn+.spin-btn {
      border-top: 1px solid var(--border);
    }

    /* Number thousand-separator overlay */
    .nfmt {
      position: absolute;
      left: 9px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      font-size: inherit;
      color: var(--text);
      white-space: nowrap;
      max-width: calc(100% - 34px);
      overflow: hidden;
    }

    .nfmt-v {
      color: transparent;
      caret-color: var(--text);
    }

    .nfmt-v::placeholder {
      color: transparent !important;
    }

    .si:focus {
      border-color: var(--accent);
    }

    .dd-grid {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      gap: 14px;
      margin-bottom: 16px;
    }

    .dd-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }

    .dd-row:last-child {
      border-bottom: none;
    }

    .add-row-form {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .empty {
      padding: 36px;
      text-align: center;
      color: var(--text3);
    }

    .stagger>* {
      opacity: 0;
      animation: fu 0.32s ease both;
    }

    .stagger>*:nth-child(1) {
      animation-delay: 0.04s;
    }

    .stagger>*:nth-child(2) {
      animation-delay: 0.08s;
    }

    .stagger>*:nth-child(3) {
      animation-delay: 0.12s;
    }

    .stagger>*:nth-child(4) {
      animation-delay: 0.16s;
    }

    .save-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--text3);
      display: block;
      flex-shrink: 0;
      margin-left: 8px;
      transition: background 0.3s;
    }

    .save-dot.saving {
      background: var(--warning);
      animation: p2 0.8s ease infinite;
    }

    .save-dot.saved {
      background: var(--success);
    }

    .save-dot.err {
      background: var(--accent);
    }

    @keyframes p2 {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.4;
      }
    }

    /* ── LIGHT MODE ── */
    .dev-panel {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 9999;
      width: min(320px, calc(100vw - 32px));
      background: color-mix(in srgb, var(--card) 94%, transparent);
      border: 1px solid var(--border2);
      border-radius: var(--r-sm);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      backdrop-filter: blur(14px);
    }

    .dev-panel.is-collapsed {
      width: auto;
      min-width: 116px;
    }

    .dev-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 7px 9px;
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid var(--border);
    }

    .dev-panel.is-collapsed .dev-panel-head {
      border-bottom: none;
      padding-inline: 10px;
    }

    .dev-panel-title {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--text3);
    }

    .dev-panel-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
      flex-shrink: 0;
    }

    .dev-panel-body {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding: 8px;
    }

    .dev-panel-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
    }

    .dev-panel-actions .btn {
      height: 26px;
      justify-content: center;
      font-size: 10px;
      padding: 0 8px;
      min-width: 0;
    }

    .dev-role-label {
      display: none;
      align-items: center;
      justify-content: center;
      min-height: 20px;
      border: 1px solid rgba(232,41,58,.24);
      border-radius: 999px;
      background: var(--accent-dim);
      color: var(--accent);
      font-size: 10px;
      font-weight: 700;
    }

    .dev-role-label.on {
      display: flex;
    }

    body.light {
      --bg: #f2f2f7;
      --bg2: #e8e8ef;
      --card: #ffffff;
      --card2: #f0f0f8;
      --border: rgba(0, 0, 0, 0.07);
      --border2: rgba(0, 0, 0, 0.12);
      --accent: #e8293a;
      --accent2: #c41e2e;
      --accent-dim: rgba(232, 41, 58, 0.09);
      --accent-glow: rgba(232, 41, 58, 0.18);
      --text: #1a1a2e;
      --text2: #5a5a78;
      --text3: #9898b2;
      --success: #16a34a;
      --success-dim: rgba(22, 163, 74, 0.11);
    }

    body.light input[type='number'] {
      color-scheme: light;
    }

    body.light .tg {
      background: rgba(22, 163, 74, 0.12);
      color: #16a34a;
    }

    body.light .ba {
      background: rgba(20, 184, 166, 0.12);
      color: #0d9488;
    }

    body.light .bb {
      background: rgba(100, 116, 139, 0.12);
      color: #475569;
    }

    body.light .bp {
      background: rgba(234, 179, 8, 0.12);
      color: #a16207;
    }

    body.light .bl {
      background: rgba(232, 41, 58, 0.1);
      color: #c41e2e;
    }

    body.light .bs {
      background: rgba(168, 85, 247, 0.12);
      color: #7c3aed;
    }

    body.light .bj {
      background: rgba(59, 130, 246, 0.12);
      color: #2563eb;
    }

    body.light .bg-default {
      background: rgba(100, 116, 139, 0.1);
      color: #475569;
    }

    body.light .pos {
      color: #16a34a;
    }

    body.light .neg {
      color: #c41e2e;
    }

    body.light .dot-menu {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    body.light tbody tr:hover td {
      background: var(--card2);
      color: var(--text);
    }

    body.light .ri:hover {
      box-shadow: 0 0 16px var(--accent-dim);
    }

          /* Media Library */
          .media-thumb {
            position: relative;
            aspect-ratio: 1;
            background: var(--bg2);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            overflow: hidden;
            cursor: pointer;
            transition: .2s;
          }

          .media-thumb:hover {
            border-color: var(--accent);
          }

          .media-thumb img,
          .media-thumb video {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .media-thumb-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, .6);
            opacity: 0;
            transition: .2s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px;
          }

          .media-thumb:hover .media-thumb-overlay {
            opacity: 1;
          }

          .media-thumb-name {
            font-size: 10px;
            color: #fff;
            text-align: center;
            word-break: break-all;
            line-height: 1.3;
          }

          .media-date-header {
            grid-column: 1 / -1;
            font-size: 11px;
            font-weight: 700;
            color: var(--text2);
            letter-spacing: .04em;
            text-transform: uppercase;
            padding: 20px 0 8px;
            border-bottom: 1px solid var(--border);
          }
          .media-date-header:first-child { padding-top: 4px; }

          #media-scrubber {
            position: fixed;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            height: 65vh;
            width: 50px;
            display: none;
            flex-direction: column;
            z-index: 40;
            user-select: none;
          }
          #media-scrubber.visible { display: flex; }
          .mscr-seg {
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            padding-right: 14px;
            min-height: 4px;
            cursor: pointer;
          }
          .mscr-seg:hover .mscr-dot { background: var(--accent); transform: scale(1.6); }
          .mscr-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,.2);
            flex-shrink: 0;
            transition: .15s;
          }
          .mscr-label {
            position: absolute;
            right: 22px;
            bottom: 0;
            font-size: 10px;
            color: var(--text3);
            font-family: var(--mono);
            white-space: nowrap;
            line-height: 1;
            pointer-events: none;
          }
          .mscr-line {
            position: absolute;
            right: 8px;
            top: 0;
            width: 32px;
            height: 2px;
            background: var(--accent);
            border-radius: 1px;
            pointer-events: none;
            transition: top .15s;
          }

          /* Portfolio */
          .pf-btn.pf-active {
            background: var(--accent);
            color: #fff;
          }

          .pf-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--r);
            overflow: hidden;
            display: flex;
            flex-direction: column;
          }

          .pf-card img {
            width: 100%;
            height: 140px;
            object-fit: cover;
            background: var(--bg2);
          }

          .pf-card-body {
            padding: 10px 12px 12px;
          }

          .pf-card-title {
            font-weight: 600;
            font-size: 13px;
            margin-bottom: 4px;
            line-height: 1.3;
          }

          .pf-card-cat {
            font-size: 11px;
            color: var(--text3);
          }

          .pf-card-actions {
            display: flex;
            gap: 6px;
            margin-top: 10px;
          }

          /* Blog redesign */
          .bl-stats { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
          .bl-stat-chip { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 16px; min-width: 80px; }
          .bl-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 4px; }
          .bl-stat-val { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
          .bl-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
          .bl-fchip { font-size: 11px; font-weight: 600; font-family: inherit; padding: 5px 12px; border-radius: 20px; border: 1px solid transparent; background: none; color: var(--text3); cursor: pointer; transition: all .15s; }
          .bl-fchip:hover { color: var(--text2); }
          .bl-fchip.on { background: var(--card2); border-color: var(--border2); color: var(--text); }
          .bl-row { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; transition: border-color .15s; }
          .bl-row:hover { border-color: var(--border2); }
          .bl-cover { width: 110px; height: 78px; object-fit: cover; border-radius: 8px; background: var(--bg2); flex-shrink: 0; }
          .bl-body { flex: 1; min-width: 0; }
          .bl-title { font-weight: 700; font-size: 14px; margin-bottom: 5px; line-height: 1.3; }
          .bl-meta { font-size: 11px; color: var(--text3); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
          .bl-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
          .bl-badge--pub { background: rgba(34,197,94,.15); color: var(--success); }
          .bl-badge--draft { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); }
          .bl-sum { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
          .bl-actions { display: flex; gap: 6px; }
          .bl-act-btn { font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card2); color: var(--text2); cursor: pointer; transition: all .15s; }
          .bl-act-btn:hover { border-color: var(--border2); color: var(--text); }
          .bl-act-btn--pub { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); color: var(--success); }
          .bl-act-btn--del { border-color: transparent; background: none; color: var(--danger); }
          .bl-act-btn--del:hover { background: rgba(232,41,58,.08); border-color: transparent; }
          /* Media tabs */
          .mtab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
          .mtab-btn { font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 18px; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--text3); transition: color .15s; }
          .mtab-btn:hover { color: var(--text2); }
          .mtab-btn.on { border-bottom-color: var(--accent); color: var(--accent); }

          /* Markdown preview */
          .md-preview h1,
          .md-preview h2,
          .md-preview h3 {
            font-weight: 700;
            margin: 12px 0 6px;
            line-height: 1.3;
          }

          .md-preview h1 {
            font-size: 18px;
          }

          .md-preview h2 {
            font-size: 15px;
          }

          .md-preview h3 {
            font-size: 13px;
          }

          .md-preview p {
            margin: 0 0 8px;
          }

          .md-preview ul,
          .md-preview ol {
            padding-left: 18px;
            margin: 0 0 8px;
          }

          .md-preview a {
            color: var(--accent);
          }

          .md-preview hr {
            border: none;
            border-top: 1px solid var(--border);
            margin: 12px 0;
          }

          .md-preview code {
            background: var(--bg2);
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 11px;
          }

          .md-preview strong {
            font-weight: 700;
          }

          .md-preview em {
            font-style: italic;
          }

          /* Data Dump */
          .jenis-card {
            background: var(--card2);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 13px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: border-color 0.15s;
            position: relative;
          }

          .jenis-card:hover {
            border-color: var(--border2);
          }

          .jenis-icon {
            width: 36px;
            height: 36px;
            border-radius: 9px;
            background: var(--accent-dim);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent2);
          }

          .jenis-name {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--text);
          }

          .jenis-count {
            font-size: 10.5px;
            color: var(--text2);
          }

          .jenis-dot {
            position: absolute;
            top: 9px;
            right: 9px;
          }

          .satuan-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 11px;
            background: var(--card2);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            font-size: 12px;
            font-weight: 600;
            color: var(--text2);
            transition: all 0.15s;
          }

          .satuan-chip:hover {
            border-color: var(--border2);
            color: var(--text);
          }

          .satuan-chip .chip-dot {
            cursor: pointer;
            color: var(--text3);
            display: flex;
            transition: color 0.12s;
          }

          .satuan-chip .chip-dot:hover {
            color: var(--accent2);
          }

          /* Icon picker */
          .icon-opt {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 9px;
            background: var(--card2);
            border: 1.5px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
            color: var(--text3);
          }

          .icon-opt:hover {
            border-color: var(--accent);
            color: var(--accent2);
            background: var(--accent-dim);
          }

          .icon-opt.on {
            border-color: var(--accent);
            background: var(--accent-dim);
            color: var(--accent2);
          }

          /* Global search */
          .srch-group {
            padding: 4px 0;
          }

          .srch-group-label {
            font-size: 9.5px;
            font-weight: 700;
            color: var(--text3);
            letter-spacing: 0.6px;
            text-transform: uppercase;
            padding: 6px 10px 3px;
          }

          .srch-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 9px;
            cursor: pointer;
            transition: background 0.12s;
          }

          .srch-item:hover {
            background: var(--card2);
          }

          .srch-item-icon {
            width: 30px;
            height: 30px;
            border-radius: var(--r-sm);
            background: var(--card2);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--accent2);
          }

          .srch-item-name {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--text);
          }

          .srch-item-sub {
            font-size: 10.5px;
            color: var(--text2);
            margin-top: 1px;
          }

          .srch-empty {
            padding: 20px;
            text-align: center;
            color: var(--text3);
            font-size: 12px;
          }

          /* ── Order tabs ── */
          .ord-tab {
            background: none;
            border: none;
            padding: 10px 16px;
            font-size: 12px;
            font-weight: 600;
            font-family: var(--font);
            color: var(--text3);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            white-space: nowrap;
            transition:
              color 0.15s,
              border-color 0.15s;
          }

          .ord-tab:hover {
            color: var(--text2);
          }

          .ord-tab.on {
            color: var(--accent);
            border-bottom-color: var(--accent);
          }

          .ord-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0,1fr));
            gap: 10px;
            margin-bottom: 14px;
          }
          .ord-sum-chip {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 12px 16px;
            min-width: 0;
          }
          .ord-sum-icon {
            width: 34px;
            height: 34px;
            border-radius: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }
          .ord-sum-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: var(--text3);
            margin-bottom: 3px;
          }
          .ord-sum-val {
            font-size: 17px;
            font-weight: 800;
            letter-spacing: -.5px;
            line-height: 1;
          }
          .ord-filter-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 12px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 10px 14px;
            flex-wrap: wrap;
          }
          .ord-filter-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .6px;
            color: var(--text3);
            white-space: nowrap;
            flex-shrink: 0;
          }
          .ord-filter-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
          .ord-filter-sep { width: 1px; height: 16px; background: var(--border2); margin: 0 6px; flex-shrink: 0; }
          .ord-fchip {
            font-size: 11px;
            font-weight: 600;
            font-family: inherit;
            padding: 4px 11px;
            border-radius: 20px;
            border: 1px solid transparent;
            background: none;
            color: var(--text3);
            cursor: pointer;
            transition: all .15s;
            white-space: nowrap;
          }
          .ord-fchip:hover { color: var(--text2); }
          .ord-fchip.on { background: var(--card2); border-color: var(--border2); color: var(--text); }
          .ord-tab-count {
            font-size: 9px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 10px;
            background: var(--card2);
            color: var(--text3);
            min-width: 18px;
            text-align: center;
            display: inline-block;
            margin-left: 4px;
          }
          .ord-tab.on .ord-tab-count { background: var(--accent-dim); color: var(--accent); }
          .ord-tipe-badge {
            font-size: 9px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 20px;
            white-space: nowrap;
          }
          .ord-dl-cell { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; font-weight: 600; }
          .ord-dl-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
          .ord-dl-tag { font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 3px; letter-spacing: .3px; }
          .ord-pay-wrap { min-width: 80px; }
          .ord-pay-label { font-size: 10px; font-weight: 700; margin-bottom: 4px; }
          .ord-pay-bar { height: 3px; background: var(--border2); border-radius: 2px; overflow: hidden; }
          .ord-pay-fill { height: 100%; border-radius: 2px; }
          .ord-pag-btn {
            font-family: inherit;
            font-size: 11px;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: var(--r-sm);
            border: 1px solid var(--border);
            background: none;
            color: var(--text3);
            cursor: pointer;
            transition: all .15s;
            min-width: 32px;
            text-align: center;
          }
          .ord-pag-btn:hover:not(:disabled) { background: var(--card2); color: var(--text); border-color: var(--border2); }
          .ord-pag-btn.on { background: var(--card2); border-color: var(--border2); color: var(--text); font-weight: 700; }
          .ord-pag-btn:disabled { opacity: .3; cursor: default; }

          /* Keuangan redesign */
          .keu-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
          .keu-chip { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
          .keu-chip-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 6px; }
          .keu-chip-val { font-size: 18px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
          .keu-chip-sub { font-size: 10px; color: var(--text3); margin-top: 4px; }
          .keu-nav { display: flex; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); padding: 5px; margin-bottom: 10px; gap: 0; flex-wrap: wrap; }
          .keu-tab { font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 18px; border-radius: var(--r-sm); border: none; background: none; color: var(--text3); cursor: pointer; transition: all .15s; white-space: nowrap; }
          .keu-tab:hover { color: var(--text2); }
          .keu-tab.on { background: var(--card2); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
          .keu-nav-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
          .keu-nav-spacer { flex: 1; min-width: 12px; }
          .keu-nav-actions { display: flex; gap: 6px; align-items: center; padding-left: 4px; flex-wrap: wrap; }
          .keu-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 9px 14px; flex-wrap: wrap; }
          .card > .keu-filter-bar { margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
          .keu-filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
          .keu-filter-sep { width: 1px; height: 16px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
          .keu-fchip { font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 11px; border-radius: 20px; border: 1px solid transparent; background: none; color: var(--text3); cursor: pointer; white-space: nowrap; transition: all .15s; }
          .keu-fchip:hover { color: var(--text2); }
          .keu-fchip.on { background: var(--card2); border-color: var(--border2); color: var(--text); }
          .laporan-nav { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
          .laporan-tab { font-family: inherit; font-size: 11px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-sm) var(--r-sm) 0 0; border: 1px solid transparent; background: none; color: var(--text3); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
          .laporan-tab:hover { color: var(--text2); }
          .laporan-tab.on { color: var(--text); border-bottom-color: var(--accent); }

          /* Pengadaan redesign */
          .peng-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
          .peng-sum-chip { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px; min-width: 160px; flex: 1; }
          .peng-sum-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
          .peng-sum-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 3px; }
          .peng-sum-val { font-size: 15px; font-weight: 800; letter-spacing: -.4px; line-height: 1; }
          .peng-sum-sub { font-size: 10px; color: var(--text3); margin-top: 3px; }
          .peng-sectabs { display: flex; gap: 6px; margin-bottom: 10px; }
          .peng-sectab { font-family: inherit; font-size: 12px; font-weight: 700; padding: 7px 18px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card); color: var(--text3); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
          .peng-sectab.on { background: var(--accent-dim); border-color: rgba(232,41,58,.3); color: var(--accent); }
          .peng-sectab-count { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; background: var(--card2); color: var(--text3); }
          .peng-sectab.on .peng-sectab-count { background: rgba(232,41,58,.18); color: var(--accent); }
          .peng-filter-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; flex-wrap: wrap; }
          .peng-filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
          .peng-filter-sep { width: 1px; height: 16px; background: var(--border2); margin: 0 6px; flex-shrink: 0; }
          #peng-status-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
          .peng-fchip { font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 11px; border-radius: 20px; border: 1px solid transparent; background: none; color: var(--text3); cursor: pointer; transition: all .15s; white-space: nowrap; }
          .peng-fchip:hover { color: var(--text2); }
          .peng-fchip.on { background: var(--card2); border-color: var(--border2); color: var(--text); }
          .peng-tipe-cash { background: rgba(34,197,94,.13); color: var(--success-bright); }
          .peng-tipe-kredit { background: rgba(251,146,60,.13); color: var(--warning); }
          .peng-pay-wrap { min-width: 100px; }
          .peng-pay-label { font-size: 10px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; }
          .peng-pay-bar { height: 3px; background: var(--border2); border-radius: 2px; overflow: hidden; }
          .peng-pay-fill { height: 100%; border-radius: 2px; }
          .peng-alert-bar { display: flex; align-items: center; gap: 10px; background: rgba(251,146,60,.1); border: 1px solid rgba(251,146,60,.25); border-radius: var(--r); padding: 10px 16px; font-size: 12px; color: var(--warning); }
          .peng-alert-bar strong { font-weight: 700; }

          /* Produk redesign */
          .prod-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
          .prod-sum-chip { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 16px; min-width: 0; }
          .prod-sum-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 5px; }
          .prod-sum-val { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
          .prod-sum-sub { font-size: 10px; color: var(--text3); margin-top: 4px; }
          .prod-filter-bar { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 9px 14px; margin-bottom: 12px; flex-wrap: wrap; }
          .prod-filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
          .prod-filter-sep { width: 1px; height: 16px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
          .prod-fchip { font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 11px; border-radius: 20px; border: 1px solid transparent; background: none; color: var(--text3); cursor: pointer; transition: all .15s; white-space: nowrap; }
          .prod-fchip:hover { color: var(--text2); }
          .prod-fchip.on { background: var(--card2); border-color: var(--border2); color: var(--text); }
          .prod-fchip-count { font-size: 9px; font-weight: 700; background: var(--card2); color: var(--text3); padding: 1px 5px; border-radius: 10px; margin-left: 3px; }
          .prod-fchip.on .prod-fchip-count { background: var(--accent-dim); color: var(--accent); }
          .prod-view-toggle { display: flex; background: var(--card); border: 1px solid var(--border2); border-radius: var(--r-sm); overflow: hidden; flex-shrink: 0; }
          .prod-view-btn { font-family: inherit; padding: 6px 10px; border: none; background: none; color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; }
          .prod-view-btn.on { background: var(--accent-dim); color: var(--accent); }
          .prod-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r2); padding: 16px; cursor: pointer; transition: border-color .15s, transform .15s; }
          .prod-card:hover { border-color: var(--border2); transform: translateY(-1px); }
          .prod-card-kode { font-size: 9px; font-weight: 700; color: var(--text3); background: var(--card2); padding: 2px 7px; border-radius: 6px; letter-spacing: .3px; white-space: nowrap; font-family: monospace; }
          .prod-badge { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
          .prod-badge-kat { background: var(--card2); color: var(--text3); }
          .prod-badge-shop { background: rgba(34,197,94,.13); color: var(--success-bright); }
          .prod-badge-sim { background: rgba(79,163,224,.13); color: var(--info); }
          .prod-price-chip { background: var(--card2); border-radius: var(--r-sm); padding: 9px 10px; }
          .prod-price-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 3px; }
          .prod-price-val { font-size: 14px; font-weight: 800; letter-spacing: -.3px; }
          .prod-margin-bar-wrap { flex: 1; height: 4px; background: var(--card2); border-radius: 2px; overflow: hidden; }
          .prod-margin-bar { height: 100%; border-radius: 2px; }
          .prod-card-acts { display: flex; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
          .prod-card-act { font-family: inherit; font-size: 10px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: none; color: var(--text3); cursor: pointer; flex: 1; text-align: center; white-space: nowrap; }
          .prod-card-act:hover { background: var(--card2); color: var(--text); }
          .prod-card-act-primary { background: var(--accent-dim); border-color: transparent; color: var(--accent); }
          .prod-card-act-primary:hover { background: var(--accent); color: #fff; }
          .prod-margin-pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
          .prod-margin-ok { background: rgba(34,197,94,.13); color: var(--success-bright); }
          .prod-margin-warn { background: rgba(251,146,60,.13); color: var(--warning); }
          .prod-margin-low { background: rgba(248,113,113,.13); color: var(--danger-soft); }

          /* Template Dokumen redesign */
          .tpl-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
          .tpl-metric { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 16px; min-width: 0; min-height: 82px; display: flex; flex-direction: column; justify-content: space-between; }
          .tpl-metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 8px; }
          .tpl-metric-val { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
          .tpl-metric-sub { font-size: 10px; color: var(--text3); margin-top: 5px; line-height: 1.35; }
          .tpl-filter-bar { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; }
          .tpl-filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }
          .tpl-filter-sep { width: 1px; height: 16px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
          .tpl-fchip { font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 11px; border-radius: 20px; border: 1px solid transparent; background: none; color: var(--text3); cursor: pointer; white-space: nowrap; transition: all .15s; }
          .tpl-fchip:hover { color: var(--text2); }
          .tpl-fchip.on { background: var(--card2); border-color: var(--border2); color: var(--text); }
          .tpl-search { width: 250px; height: 30px; margin-left: auto; }
          .tpl-layout { display: grid; grid-template-columns: minmax(0,1fr) 318px; gap: 12px; align-items: start; }
          .tpl-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; min-width: 0; }
          .tpl-panel-head { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
          .tpl-panel-title { font-size: 13px; font-weight: 800; letter-spacing: -.1px; }
          .tpl-panel-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
          .tpl-type-section { border-bottom: 1px solid var(--border); }
          .tpl-type-section:last-child { border-bottom: 0; }
          .tpl-type-head { min-height: 58px; padding: 13px 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; background: rgba(255,255,255,.015); }
          .tpl-type-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }
          .tpl-type-title svg { color: var(--text3); flex-shrink: 0; }
          .tpl-type-copy { font-size: 11px; color: var(--text3); margin-top: 3px; line-height: 1.35; }
          .tpl-type-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
          .tpl-row { min-height: 84px; padding: 12px 16px; border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(0,1.4fr) 120px 116px 136px auto; gap: 12px; align-items: center; position: relative; }
          .tpl-row.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 0 2px 2px 0; background: var(--success); }
          .tpl-main { min-width: 0; padding-left: 2px; }
          .tpl-name { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
          .tpl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text3); font-size: 10.5px; line-height: 1.4; }
          .tpl-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text3); flex-shrink: 0; }
          .tpl-cell-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px; color: var(--text3); margin-bottom: 5px; }
          .tpl-cell-value { font-size: 11.5px; color: var(--text2); font-weight: 650; }
          .tpl-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
          .tpl-badge { min-height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; white-space: nowrap; }
          .tpl-badge .tpl-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
          .tpl-badge-success { background: var(--success-dim); color: var(--success); }
          .tpl-badge-warning { background: var(--warning-dim); color: var(--warning); }
          .tpl-badge-info { background: var(--info-dim); color: var(--info); }
          .tpl-badge-muted { background: var(--card2); color: var(--text3); border: 1px solid var(--border); }
          .tpl-default-box { margin: 0 16px 14px; border: 1px dashed var(--border2); background: rgba(255,255,255,.018); border-radius: var(--r-sm); min-height: 76px; padding: 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
          .tpl-default-title { font-size: 13px; font-weight: 800; }
          .tpl-default-copy { font-size: 11.5px; color: var(--text3); margin-top: 4px; line-height: 1.45; }
          .tpl-side-section { border-bottom: 1px solid var(--border); padding: 14px; }
          .tpl-side-section:last-child { border-bottom: 0; }
          .tpl-side-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--text3); margin-bottom: 10px; }
          .tpl-doc-type { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
          .tpl-doc-type:last-child { border-bottom: 0; }
          .tpl-doc-ico { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--card2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text3); }
          .tpl-doc-title { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
          .tpl-doc-sub { font-size: 10.5px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
          .tpl-audit-row { display: grid; grid-template-columns: 9px minmax(0,1fr); gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); }
          .tpl-audit-row:last-child { border-bottom: 0; }
          .tpl-audit-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--text3); }
          .tpl-audit-dot.ok { background: var(--success); }
          .tpl-audit-dot.warn { background: var(--warning); }
          .tpl-audit-dot.info { background: var(--info); }
          .tpl-audit-main { font-size: 11.5px; color: var(--text2); line-height: 1.45; }
          .tpl-audit-time { font-size: 10px; color: var(--text3); margin-top: 2px; }

          /* Visual Designer redesign */
          .pdfd { position: fixed; inset: 0; z-index: 9100; display: grid; grid-template-rows: 48px 1fr 28px; background: var(--bg); color: var(--text); overflow: hidden; }
          .pdfd * { box-sizing: border-box; }
          .pdfd button, .pdfd input, .pdfd select, .pdfd textarea {font-family: var(--font);}
          .pdfd-topbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--bg2); border-bottom: 1px solid var(--border); min-width: 0; }
          .pdfd-title-stack { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
          .pdfd-kicker { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--text3); line-height: 1; }
          .pdfd-name { height: 24px; width: min(320px,28vw); min-width: 190px; border: 1px solid transparent; background: transparent; color: var(--text); border-radius: 6px; padding: 0 7px; font-size: 13px; font-weight: 800; outline: none; }
          .pdfd-name:hover, .pdfd-name:focus { background: var(--card); border-color: var(--border2); }
          .pdfd-spacer { flex: 1; min-width: 8px; }
          .pdfd-sep { width: 1px; height: 18px; background: var(--border2); flex-shrink: 0; }
          .pdfd-btn, .pdfd-icon-btn, .pdfd-chip, .pdfd-tool { border: 1px solid var(--border); background: var(--card); color: var(--text2); border-radius: 7px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
          .pdfd-btn:hover, .pdfd-icon-btn:hover, .pdfd-chip:hover, .pdfd-tool:hover { background: var(--card2); border-color: var(--border2); color: var(--text); }
          .pdfd-btn.primary { background: linear-gradient(135deg,var(--accent),var(--accent2)); border-color: rgba(255,255,255,.16); color: #fff; box-shadow: 0 3px 12px var(--accent-glow); }
          .pdfd-btn.ghost, .pdfd-icon-btn.ghost { background: transparent; border-color: transparent; }
          .pdfd-btn.danger { color: var(--accent2); }
          .pdfd-icon-btn { width: 32px; padding: 0; flex-shrink: 0; }
          .pdfd-icon { width: 15px; height: 15px; flex-shrink: 0; }
          .pdfd-chip { min-height: 28px; background: transparent; color: var(--text3); border-color: transparent; padding: 0 9px; }
          .pdfd-chip.on { background: var(--card2); color: var(--text); border-color: var(--border2); }
          .pdfd-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 20px; padding: 0 7px; border-radius: 20px; background: var(--card2); color: var(--text3); font-size: 10px; font-weight: 800; white-space: nowrap; }
          .pdfd-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-dim); flex-shrink: 0; }
          .pdfd-workspace { min-height: 0; display: grid; grid-template-columns: 288px minmax(520px,1fr) 330px; background: var(--bg); overflow: hidden; }
          .pdfd-panel { min-height: 0; background: var(--bg2); display: flex; flex-direction: column; overflow: hidden; }
          .pdfd-left { border-right: 1px solid var(--border); }
          .pdfd-right { border-left: 1px solid var(--border); }
          .pdfd-panel-head { min-height: 48px; padding: 9px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
          .pdfd-panel-title { min-width: 0; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
          .pdfd-panel-sub { margin-top: 2px; font-size: 10.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
          .pdfd-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
          .pdfd-tab { border: 1px solid transparent; background: transparent; color: var(--text3); height: 28px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 800; cursor: pointer; }
          .pdfd-tab:hover { color: var(--text2); background: rgba(255,255,255,.025); }
          .pdfd-tab.on { color: var(--text); background: var(--card2); border-color: var(--border2); }
          .pdfd-panel-body { min-height: 0; overflow: auto; padding: 12px; }
          .pdfd-section { margin-bottom: 16px; }
          .pdfd-section:last-child { margin-bottom: 0; }
          .pdfd-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--text3); }
          .pdfd-grid-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
          .pdfd-tool { width: 100%; justify-content: flex-start; min-height: 38px; padding: 0 10px; background: var(--card); }
          .pdfd-tool .pdfd-icon { color: var(--text3); }
          .pdfd-search { width: 100%; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); outline: none; padding: 0 10px; font-size: 12px; font-weight: 600; }
          .pdfd-search:focus { border-color: rgba(232,41,58,.45); box-shadow: 0 0 0 3px var(--accent-dim); }
          .pdfd-card { border: 1px solid var(--border); background: var(--card); border-radius: 8px; overflow: hidden; }
          .pdfd-row { min-height: 34px; padding: 7px 9px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 16px minmax(0,1fr) auto; gap: 8px; align-items: center; color: var(--text2); cursor: pointer; font-size: 11.5px; font-weight: 700; }
          .pdfd-row:last-child { border-bottom: 0; }
          .pdfd-row:hover { background: rgba(255,255,255,.025); color: var(--text); }
          .pdfd-row.on { background: var(--accent-dim); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
          .pdfd-row.band { grid-template-columns: 10px minmax(0,1fr) auto; font-size: 10.5px; text-transform: uppercase; color: var(--text3); background: rgba(255,255,255,.018); }
          .pdfd-row-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
          .pdfd-row-meta { font-family: var(--mono); font-size: 10px; color: var(--text3); }
          .pdfd-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }
          .pdfd-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: 44px 1fr; background: #202124; overflow: hidden; }
          .pdfd-canvas-toolbar {display: flex;align-items: center;gap: 6px;min-width: 0;padding: 7px 12px;background: #15161b;border-bottom: 1px solid rgba(255,255,255,.09);color: var(--text2);}
          .pdfd-canvas-title { min-width: 0; font-size: 11px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: 0; white-space: nowrap; }
          .pdfd-zoom-group { display: flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); border-radius: 8px; }
          .pdfd-zoom-label { width: 52px; text-align: center; font-size: 11px; font-weight: 800; font-family: var(--mono); color: var(--text2); }
          .pdfd-stage { flex: 1; min-height: 0; overflow: auto; padding: 28px; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), #d2d4d8; background-size: 20px 20px; display: flex; justify-content: center; align-items: flex-start; }
          .pdfd-canvas-wrap { flex-shrink: 0; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 12px 34px rgba(0,0,0,.34)); }
          .pdfd-page { background: #fff; color: #111827; position: relative; box-shadow: var(--shadow-sm); overflow: hidden; }
          .pdfd-margin-guide { position: absolute; border: 1px dashed rgba(79,163,224,.35); pointer-events: none; z-index: 0; }
          .pdfd-band { position: relative; border-bottom: 1px solid rgba(17,24,39,.1); box-sizing: border-box; overflow: visible; }
          .pdfd-band-header { background: rgba(79,163,224,.08); }
          .pdfd-band-detail { background: rgba(251,146,60,.08); }
          .pdfd-band-footer { background: rgba(34,197,94,.08); }
          .pdfd-band-custom { background: rgba(139,139,158,.08); }
          .pdfd-band.on { outline: 2px solid var(--band-color,#4fa3e0); outline-offset: -2px; }
          .pdfd-band-label { position: absolute; top: 0; left: 0; height: 19px; border: 0; border-bottom-right-radius: 4px; padding: 0 7px; color: #fff; background: var(--band-color,#4fa3e0); font-size: 8px; font-weight: 800; letter-spacing: 0; font-family: var(--font); cursor: pointer; z-index: 8; }
          .pdfd-empty-band { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(0,0,0,.24); pointer-events: none; padding-top: 12px; }
          .pdfd-resize-band { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; cursor: ns-resize; z-index: 7; }
          .pdfd-prop-body { min-height: 0; overflow: auto; padding: 12px; }
          .pdfd-selected { border: 1px solid var(--border); background: var(--card); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
          .pdfd-selected-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
          .pdfd-selected-name { font-size: 13px; font-weight: 800; }
          .pdfd-selected-kind { margin-top: 2px; font-size: 10.5px; color: var(--text3); }
          .pdfd-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 20px; background: var(--info-dim); color: var(--info); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; white-space: nowrap; }
          .pdfd-badge.warn { background: var(--warning-dim); color: var(--warning); }
          .pdfd-badge.ok { background: var(--success-dim); color: var(--success); }
          .pdfd-badge.muted { background: var(--card2); color: var(--text3); border: 1px solid var(--border); }
          .pdfd-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
          .pdfd-field { min-width: 0; margin-bottom: 8px; }
          .pdfd-field.full { grid-column: 1 / -1; }
          .pdfd-field label { display: block; margin-bottom: 5px; font-size: 9.5px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: 0; }
          .pdfd-input, .pdfd-select, .pdfd-textarea { width: 100%; min-height: 32px; border: 1px solid var(--border); background: var(--card2); color: var(--text); border-radius: 7px; outline: none; padding: 0 9px; font-size: 11.5px; font-weight: 700; }
          .pdfd-textarea { height: 58px; padding: 7px 9px; resize: vertical; line-height: 1.4; }
          .pdfd-input[type="color"] { padding: 2px; cursor: pointer; }
          .pdfd-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
          .pdfd-input[type="number"]::-webkit-inner-spin-button,
          .pdfd-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
          .pdfd-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text3) 50%), linear-gradient(135deg, var(--text3) 50%, transparent 50%); background-position: calc(100% - 13px) 13px, calc(100% - 8px) 13px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
          .pdfd-prop-group { border: 1px solid var(--border); background: var(--card); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
          .pdfd-prop-head { min-height: 38px; padding: 9px 11px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 850; }
          .pdfd-prop-content { padding: 11px; }
          .pdfd-align-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
          .pdfd-toggle-row { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 7px 0; font-size: 11.5px; font-weight: 700; color: var(--text2); }
          .pdfd-toggle-row:last-child { border-bottom: 0; }
          .pdfd-checkbox { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; }
          .pdfd-footerbar { display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--bg2); border-top: 1px solid var(--border); color: var(--text3); font-size: 10.5px; font-weight: 700; min-width: 0; }
          .pdfd-footerbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
          .pdfd-panel-body::-webkit-scrollbar, .pdfd-prop-body::-webkit-scrollbar, .pdfd-stage::-webkit-scrollbar { width: 8px; height: 8px; }
          .pdfd-panel-body::-webkit-scrollbar-thumb, .pdfd-prop-body::-webkit-scrollbar-thumb, .pdfd-stage::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 20px; }

          /* 2.7 Responsive Penjualan */
          #ord-tabs {
            overflow-x: auto;
            scrollbar-width: none;
          }
          #ord-tabs::-webkit-scrollbar { display: none; }

          @media (max-width: 800px) {
            #page-penjualan .ph { flex-wrap: wrap; gap: 10px; }
            #page-penjualan .ph > div:last-child { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
            .ord-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
            .ord-filter-bar { align-items: stretch; }
            .ord-filter-bar #ord-srch { width: 100% !important; }
            .peng-filter-bar { align-items: stretch; }
            .peng-filter-bar #peng-srch { width: 100% !important; }
            .prod-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
            .prod-filter-bar { align-items: stretch; }
            .prod-filter-bar #prod-srch { width: 100% !important; }
            .tpl-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
            .tpl-filter-bar { align-items: stretch; }
            .tpl-search { width: 100%; margin-left: 0; }
            .tpl-layout { grid-template-columns: minmax(0,1fr); }
            .tpl-type-head, .tpl-default-box { grid-template-columns: minmax(0,1fr); }
            .tpl-type-actions { justify-content: flex-start; }
            .tpl-row { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
            .tpl-row .tpl-data-cell { display: none; }
            .tpl-row-actions { justify-content: flex-end; }
            .keu-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
            .keu-filter-bar { align-items: stretch; }
            .keu-filter-bar #pb-search { width: 100% !important; }
            .keu-nav-actions { width: 100%; padding-left: 0; margin-top: 6px; }
            #mo-ord .modal { width: 96vw !important; max-height: 96vh; }
            #mo-ord .mhd { flex-wrap: wrap; gap: 8px; }
          }

          /* ── Modal Order: Split Layout ── */
          .od-modal-split {width: 980px !important;max-height: 92vh;overflow: hidden !important;display: flex !important;flex-direction: column !important;}
          .od-split { display: grid; grid-template-columns: 1.45fr 1fr; flex: 1; min-height: 0; overflow: hidden; }
          .od-split-main { padding: 16px 20px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
          .od-split-rail {padding: 14px 16px;display: flex;flex-direction: column;gap: 10px;background: var(--card);border-left: 1px solid var(--border);overflow-y: auto;scrollbar-width: thin;scrollbar-color: var(--border2) transparent;}
          .od-rail-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
          .od-rail-kpi { padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); }
          .od-rail-kpi.tot { background: var(--accent-dim); border-color: rgba(232,41,58,.22); }
          .od-snapshot-head {border: 1px solid var(--border);border-radius: var(--r-sm);background: var(--card);padding: 12px;margin-bottom: 14px;}
          .od-snapshot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
          .od-snapshot-name { min-width: 0; font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.2; }
          .od-snapshot-sub { margin-top: 4px; font-size: 11px; color: var(--text3); }
          .od-snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
          .od-snapshot-info { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); padding: 8px 9px; }
          .od-snapshot-label { margin-bottom: 4px; font-size: 9px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; color: var(--text3); }
          .od-snapshot-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--text2); }
          .od-paybar-slim { height: 6px; border-radius: 99px; background: var(--card2); overflow: hidden; border: 1px solid var(--border); margin-bottom: 4px; }
          .od-paybar-slim-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--success),var(--success-bright)); transition: width .4s ease; }
          .od-stage-row { display: flex; align-items: flex-start; }
          .od-stage-node { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; text-align: center; min-width: 0; }
          .od-stage-line { height: 2px; flex: 1; margin-top: 10px; border-radius: 2px; background: var(--border2); min-width: 8px; }
          .od-stage-line.fill { background: var(--success); }
          .od-stage-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--card2); color: var(--text3); border: 1.5px solid var(--border2); flex-shrink: 0; }
          .od-stage-node.stg-done .od-stage-dot { background: var(--success-dim); color: var(--success); border-color: transparent; }
          .od-stage-node.stg-act .od-stage-dot { background: var(--accent-dim); color: var(--accent2); border-color: rgba(232,41,58,.4); box-shadow: 0 0 0 4px var(--accent-dim); }
          .od-stage-label { font-size: 10px; font-weight: 700; color: var(--text2); }
          .od-stage-node.stg-act .od-stage-label { color: var(--text); }
          .od-rail-card { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); padding: 10px; }
          .od-progress-card { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); padding: 10px; }
          .od-check-card { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); padding: 10px; }
          .od-check-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
          .od-check-list { display: grid; gap: 2px; }
          .od-check-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
          .od-check-row:last-child { border-bottom: none; }
          .od-check-row input[type="checkbox"] { flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }
          .od-check-row input[type="checkbox"]:disabled { cursor: default; opacity: .55; }
          .od-check-title { flex: 1; min-width: 0; font-size: 12px; line-height: 1.35; }
          .od-check-title.done { color: var(--text3); text-decoration: line-through; }
          .od-check-meta { flex-shrink: 0; color: var(--text3); font-size: 10px; }
          .od-check-empty { padding: 4px 0; color: var(--text3); font-size: 12px; }
          .od-check-add { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
          .od-rail-footer { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
          .od-rail-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
          @media (max-width: 900px) {
            .od-modal-split { width: 96vw !important; }
            .od-split { grid-template-columns: 1fr; }
            .od-split-rail { border-left: none; border-top: 1px solid var(--border); max-height: 45vh; }
            .od-snapshot-grid { grid-template-columns: 1fr; }
            .od-hero .od-stage-row { max-width: 100%; }
          }
          .od-hero { padding: 8px 20px 10px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; display: none; }
          .od-hero.show { display: block; }
          .od-hero .od-stage-row { max-width: 420px; }
          .od-rail-tabs { display: flex; border-bottom: 1px solid var(--border); margin: -14px -16px 12px; }
          .od-rail-tab-btn { padding: 8px 14px; font-size: 11px; font-weight: 700; color: var(--text3); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font); transition: color .15s, border-color .15s; }
          .od-rail-tab-btn.on { color: var(--text); border-bottom-color: var(--accent); }
          .od-rail-tab-pane { display: none; flex-direction: column; }
          .od-rail-tab-pane.on { display: flex; }

          /* Order detail opened from Timeline: Trello-like card mode */
          #mo-ord.timeline-card-mode .od-modal-split {
            width: min(1120px, 96vw) !important;
            background: var(--bg);
          }
          #mo-ord.timeline-card-mode .mhd {
            background: var(--card) !important;
            border-bottom: 1px solid var(--border);
          }
          #mo-ord.timeline-card-mode #mo-ord-num {
            max-width: 260px;
            overflow: hidden;
            color: var(--text2);
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          #mo-ord.timeline-card-mode .od-hero {
            padding: 10px 20px 12px;
            background: var(--card);
          }
          #mo-ord.timeline-card-mode .od-hero .od-stage-row {
            max-width: none;
          }
          #mo-ord.timeline-card-mode .od-split {
            grid-template-columns: minmax(0, 1fr) 304px;
            background: var(--bg);
          }
          #mo-ord.timeline-card-mode .od-split-main {
            gap: 12px;
            padding: 18px 20px 20px;
            background: var(--bg);
          }
          #mo-ord.timeline-card-mode .od-split-rail {
            gap: 12px;
            padding: 16px;
            background: var(--bg2);
            border-left: 1px solid var(--border);
          }
          #mo-ord.timeline-card-mode .od-section {
            margin-bottom: 0;
          }
          #mo-ord.timeline-card-mode .od-snapshot-head,
          #mo-ord.timeline-card-mode .od-card-section:not(.od-acc),
          #mo-ord.timeline-card-mode .od-acc.od-card-section {
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--card);
          }
          #mo-ord.timeline-card-mode .od-snapshot-head {
            padding: 16px;
            margin-bottom: 0;
          }
          #mo-ord.timeline-card-mode .od-card-section:not(.od-acc) {
            padding: 14px;
          }
          #mo-ord.timeline-card-mode .od-acc.od-card-section {
            margin-bottom: 0;
          }
          #mo-ord.timeline-card-mode .od-snapshot-eyebrow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 8px;
            color: var(--text3);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .5px;
            text-transform: uppercase;
          }
          #mo-ord.timeline-card-mode .od-snapshot-top {
            align-items: flex-start;
            margin-bottom: 14px;
          }
          #mo-ord.timeline-card-mode .od-snapshot-name {
            font-size: 22px;
            line-height: 1.15;
          }
          #mo-ord.timeline-card-mode .od-snapshot-sub {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
          }
          #mo-ord.timeline-card-mode .od-snapshot-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 6px;
            max-width: 45%;
          }
          #mo-ord.timeline-card-mode .od-snapshot-pill {
            padding: 3px 8px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--card2);
            color: var(--text2);
            font-size: 10px;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
          }
          #mo-ord.timeline-card-mode .od-snapshot-pill.warn {
            border-color: rgba(245, 158, 11, .28);
            background: var(--warning-dim);
            color: var(--warning);
          }
          #mo-ord.timeline-card-mode .od-snapshot-info {
            background: var(--bg2);
          }
          #mo-ord.timeline-card-mode .od-card-section-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
          }
          #mo-ord.timeline-card-mode .od-card-section-head span {
            color: var(--text3);
            font-size: 11px;
            font-weight: 700;
          }
          #mo-ord.timeline-card-mode .od-check-list {
            gap: 6px;
          }
          #mo-ord.timeline-card-mode .od-check-row {
            padding: 8px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--card2);
          }
          #mo-ord.timeline-card-mode .od-check-row:last-child {
            border-bottom: 1px solid var(--border);
          }
          #mo-ord.timeline-card-mode .od-acc > summary {
            padding: 12px 14px;
          }
          #mo-ord.timeline-card-mode .od-acc-body {
            padding: 0 14px 14px;
          }
          #mo-ord.timeline-card-mode .att-drop {
            border-radius: 8px;
            background: var(--bg2);
          }
          #mo-ord.timeline-card-mode .od-rail-card {
            border-radius: 8px;
            background: var(--card);
          }
          #mo-ord.timeline-card-mode .od-trello-side-card .od-rail-kpis {
            grid-template-columns: 1fr;
          }
          #mo-ord.timeline-card-mode .od-rail-footer {
            margin-top: 0;
          }
          @media (max-width: 900px) {
            #mo-ord.timeline-card-mode .od-split {
              grid-template-columns: 1fr;
            }
            #mo-ord.timeline-card-mode .od-split-rail {
              max-height: none;
              border-top: 1px solid var(--border);
              border-left: none;
            }
            #mo-ord.timeline-card-mode .od-snapshot-badges {
              justify-content: flex-start;
              max-width: none;
            }
          }

          /* ── Calc satuan dimensi pills ── */
          .dim-pill {
            background: var(--bg2);
            border: 1px solid var(--border2);
            border-radius: 6px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text3);
            cursor: pointer;
            transition: all .15s;
            white-space: nowrap;
          }

          .dim-pill:hover {
            border-color: var(--accent);
            color: var(--text2);
          }

          .dim-pill.on {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
          }

          /* ── Order list row ── */
          .ord-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.1s;
          }

          .ord-row:last-child {
            border-bottom: none;
          }

          .ord-row:hover {
            background: rgba(255, 255, 255, 0.03);
            margin: 0 -16px;
            padding: 12px 16px;
          }

          .ord-num {
            font-size: 12px;
            font-weight: 700;
            color: var(--accent);
            min-width: 140px;
          }

          .ord-cust {
            flex: 1;
            font-size: 12.5px;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .ord-date {
            font-size: 11px;
            color: var(--text3);
            min-width: 80px;
            text-align: right;
          }

          .ord-total {
            font-size: 12px;
            font-weight: 600;
            min-width: 110px;
            text-align: right;
          }

          .ord-sbadge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 10px;
            border-radius: 20px;
            min-width: 90px;
            text-align: center;
          }

          /* ── Order detail sections ── */
          .od-section {
            margin-bottom: 14px;
          }

          .od-info-group {
            background: var(--bg2);
            border: 1px solid var(--border);
            border-radius: var(--r);
            padding: 10px 12px;
            margin-bottom: 32px;
          }
          .od-info-group > .od-section {
            margin-bottom: 10px;
          }
          .od-info-group > .od-section:last-child {
            margin-bottom: 0;
          }
          .od-info-group .dp-trigger {
            min-width: 0;
          }

          .od-section-title {
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .7px;
            color: var(--text3);
            margin-bottom: 6px;
          }

          .od-deadline-field {
            grid-column: 1 / -1;
            display: grid;
            gap: 5px;
          }

          .od-deadline-controls {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 118px;
            gap: 6px;
            align-items: center;
          }

          .ord-time-wrap {
            position: relative;
            min-width: 0;
          }

          .ord-time-ico {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text3);
            pointer-events: none;
            z-index: 1;
          }

          .ord-time-trigger {
            display: flex;
            align-items: center;
            width: 100%;
            height: 36px;
            padding: 0 10px 0 32px;
            border: 1px solid var(--border2);
            border-radius: var(--r-sm);
            background: var(--bg2);
            color: var(--text);
            font-family: var(--mono);
            font-size: 12px;
            text-align: left;
            cursor: pointer;
            transition: border-color .15s, box-shadow .15s;
          }

          .ord-time-trigger.ph {
            color: var(--text3);
            font-family: var(--font);
          }

          .ord-time-trigger:hover {
            border-color: rgba(255,255,255,.22);
          }

          .ord-time-trigger.open {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(232,41,58,.1);
          }

          .ord-time-trigger:disabled {
            cursor: default;
            opacity: .5;
          }

          @media (max-width: 560px) {
            .od-deadline-controls {
              grid-template-columns: 1fr;
            }
          }

          .od-summary-strip {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 12px;
          }

          .od-kpi {
            min-width: 0;
            padding: 9px 10px;
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            background: var(--card2);
          }

          .od-kpi-label {
            margin-bottom: 4px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .45px;
            text-transform: uppercase;
            color: var(--text3);
          }

          .od-kpi-val {
            overflow: hidden;
            font-size: 13px;
            font-weight: 800;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .od-acc {
            overflow: hidden;
            margin-bottom: 10px;
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            background: rgba(255, 255, 255, .02);
          }
          .od-acc.od-rail-card {
            margin-bottom: 0;
            padding: 0;
            background: var(--card);
          }

          .od-acc[open] {
            overflow: visible;
          }

          .od-acc > summary {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            padding: 10px 12px;
            color: var(--text2);
            cursor: pointer;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .45px;
            list-style: none;
            text-transform: uppercase;
            user-select: none;
          }

          .od-acc > summary > span:first-child {
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
          }

          .od-acc > summary::-webkit-details-marker {
            display: none;
          }

          .od-acc > summary::after {
            content: '+';
            flex: 0 0 12px;
            color: var(--text3);
            font-size: 14px;
            line-height: 1;
            text-align: right;
          }

          .od-acc[open] > summary::after {
            content: '-';
          }

          .od-acc-meta {
            flex: 0 1 45%;
            overflow: hidden;
            min-width: 0;
            color: var(--text3);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0;
            text-align: right;
            text-overflow: ellipsis;
            text-transform: none;
            white-space: nowrap;
          }

          .od-acc-body {
            padding: 0 12px 12px;
          }

          .od-acc-body .od-section:last-child {
            margin-bottom: 0;
          }

          .att-drop {
            border: 1.5px dashed var(--border2);
            border-radius: var(--r);
            padding: 14px 16px;
            cursor: pointer;
            text-align: center;
            color: var(--text3);
            font-size: 12px;
            line-height: 1.5;
            transition: border-color .15s, background .15s, color .15s;
            margin-bottom: 8px;
            user-select: none;
          }
          .att-drop:hover, .att-drop.over {
            border-color: var(--accent);
            background: var(--accent-dim);
            color: var(--text2);
          }
          .att-drop-lbl { display: block; font-weight: 600; color: var(--text2); margin-top: 5px; }
          .att-drop.over .att-drop-lbl, .att-drop:hover .att-drop-lbl { color: var(--text); }
          .att-drop-sub { display: block; margin-top: 1px; }

          @media (max-width: 800px) {
            .od-summary-strip {
              grid-template-columns: repeat(2, minmax(0, 1fr));
            }
          }

          .od-seg {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            gap: 4px;
            background: var(--card2);
            border: 1px solid var(--border2);
            border-radius: 10px;
            padding: 4px;
          }
          .od-seg button {
            border: none;
            background: transparent;
            color: var(--text2);
            font-family: inherit;
            padding: 8px 10px;
            border-radius: 7px;
            cursor: pointer;
            font-size: 12.5px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            transition: all .14s;
            line-height: 1.2;
          }
          .od-seg button small {
            font-size: 10px;
            color: var(--text3);
          }
          .od-seg button.on {
            background: var(--accent);
            color: #fff;
            box-shadow: none;
          }
          .od-seg button.on small { color: rgba(255,255,255,.75); opacity: 1; }
          .od-seg button:disabled { opacity: .45; cursor: not-allowed; }
          .od-seg.mini { display: inline-flex; }
          .od-seg.mini button { flex-direction: row; padding: 5px 14px; }
          /* Header STATUS segmented control — neutral active (not accent) */
          .od-segctl {
            display: inline-flex;
            background: var(--card2);
            border: 1px solid var(--border2);
            border-radius: var(--r-sm);
            padding: 3px;
          }
          .od-segctl button {
            border: none;
            background: transparent;
            color: var(--text2);
            font-family: inherit;
            font-size: 11.5px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 5px;
            cursor: pointer;
            transition: all .14s;
            white-space: nowrap;
          }
          .od-segctl button.on {
            background: var(--card);
            color: var(--text);
            box-shadow: var(--shadow-sm);
          }

          .od-item-row {
            display: grid;
            grid-template-columns: minmax(0,1fr) 60px 100px 100px 24px;
            gap: 8px;
            align-items: center;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            font-size: 12px;
          }

          .od-item-row:last-child {
            border-bottom: none;
          }

          .od-pay-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            font-size: 12px;
          }

          .od-pay-row:last-child {
            border-bottom: none;
          }

          .od-sum-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            font-size: 12.5px;
          }

          .od-sum-row.total {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            padding-top: 8px;
            border-top: 1px solid var(--border);
            margin-top: 4px;
          }

          .od-sum-row.sisa {
            font-weight: 700;
            color: var(--accent2);
          }

          .od-sum-row.lunas {
            font-weight: 700;
            color: var(--success-bright);
          }

          /* Calculator redesign */
          .calc-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 340px;
            gap: 14px;
            align-items: start;
          }

          .calc-main,
          .calc-rail {
            min-width: 0;
          }

          .calc-rail {
            position: sticky;
            top: 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
          }

          .calc-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--r2);
            padding: 15px;
            transition: border-color .16s;
          }

          .calc-card:hover {
            border-color: var(--border2);
          }

          .calc-product-band {
            display: grid;
            grid-template-columns: minmax(180px, 1fr) auto auto;
            gap: 10px;
            align-items: end;
          }

          .calc-dim-wrap {
            display: flex;
            gap: 8px;
            align-items: end;
          }

          .calc-dim-wrap .fld {
            width: 82px;
            margin: 0;
          }

          .calc-mode-hint {
            margin-top: 10px;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            background: var(--card2);
            color: var(--text2);
            font-size: 11.5px;
            line-height: 1.5;
          }

          .calc-material-card .ch {
            align-items: center;
          }

          .calc-row-head {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) 134px minmax(155px, .9fr) minmax(118px, .75fr) 28px;
            gap: 8px;
            padding: 0 0 8px;
            border-bottom: 1px solid var(--border);
            color: var(--text3);
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: .5px;
            text-transform: uppercase;
          }

          .calc-item-row {
            display: grid;
            grid-template-columns: minmax(0, 1.55fr) 134px minmax(155px, .9fr) minmax(118px, .75fr) 28px;
            gap: 8px;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
          }

          .calc-item-row:last-child {
            border-bottom: none;
          }

          .calc-mat-cell {
            min-width: 0;
          }

          .calc-mat-sub {
            margin-top: 4px;
            overflow: hidden;
            color: var(--text3);
            font-size: 10.5px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .calc-qty-cell {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 78px;
            gap: 6px;
            align-items: center;
          }

          .calc-qty-cell .inp {
            font-size: 12px;
            padding: 6px 8px;
          }

          .calc-hpp-cell {
            min-width: 0;
            text-align: right;
          }

          .calc-hpp-val {
            color: var(--text);
            font-size: 12.5px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
          }

          .calc-hpp-sub {
            margin-top: 3px;
            color: var(--text3);
            font-size: 10.5px;
            font-variant-numeric: tabular-nums;
          }

          .calc-price-hero {
            padding: 16px;
            border: 1px solid rgba(232, 41, 58, .45);
            border-radius: var(--r2);
            background: linear-gradient(180deg, rgba(232, 41, 58, .12), rgba(232, 41, 58, .03));
          }

          .calc-hero-label {
            color: var(--text2);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .55px;
            text-transform: uppercase;
          }

          .calc-hero-price {
            margin-top: 7px;
            color: var(--accent2);
            font-size: 30px;
            font-weight: 900;
            letter-spacing: -1px;
            line-height: 1.05;
            font-variant-numeric: tabular-nums;
          }

          .calc-hero-meta {
            margin-top: 8px;
            color: var(--text2);
            font-size: 11.5px;
            line-height: 1.5;
          }

          .calc-margin-picker {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 7px;
            margin-top: 13px;
          }

          .calc-margin-btn {
            min-width: 0;
            padding: 8px 6px;
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            background: var(--card);
            color: var(--text2);
            cursor: pointer;
            font-family: var(--font);
            text-align: left;
            transition: border-color .15s, background .15s, color .15s;
          }

          .calc-margin-btn:hover,
          .calc-margin-btn.on {
            border-color: var(--accent);
            background: var(--accent-dim);
            color: var(--text);
          }

          .calc-margin-btn small {
            display: block;
            margin-bottom: 3px;
            color: var(--text3);
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: .4px;
            text-transform: uppercase;
          }

          .calc-margin-btn b {
            display: block;
            overflow: hidden;
            font-size: 12.5px;
            font-variant-numeric: tabular-nums;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .calc-margin-btn .rd {
            display: block;
          }

          .calc-stat-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;
          }

          .calc-stat {
            min-width: 0;
            padding: 11px;
            border: 1px solid var(--border);
            border-radius: 9px;
            background: var(--card2);
          }

          .calc-stat .k {
            color: var(--text3);
            font-size: 9.5px;
            font-weight: 800;
            letter-spacing: .45px;
            text-transform: uppercase;
          }

          .calc-stat .v {
            margin-top: 5px;
            overflow: hidden;
            color: var(--text);
            font-size: 16px;
            font-weight: 850;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
          }

          .calc-stat .s {
            margin-top: 3px;
            color: var(--text3);
            font-size: 10.5px;
            line-height: 1.35;
          }

          .calc-total-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding-top: 9px;
            margin-top: 2px;
            border-top: 1px solid var(--border);
            color: var(--text2);
            font-size: 11.5px;
          }

          .calc-total-row b {
            color: var(--text);
            font-variant-numeric: tabular-nums;
          }

          .calc-breakdown-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
          }

          .calc-bd-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
          }

          .calc-bd-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }

          .calc-bd-name {
            overflow: hidden;
            color: var(--text);
            font-size: 11.5px;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .calc-bd-meta {
            margin-top: 3px;
            color: var(--text3);
            font-size: 10.5px;
            line-height: 1.35;
          }

          .calc-bd-amt {
            text-align: right;
            font-size: 11.5px;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
          }

          .calc-bd-amt small {
            display: block;
            margin-top: 3px;
            color: var(--text3);
            font-size: 10px;
            font-weight: 700;
          }

          @media (max-width: 1100px) {
            .calc-layout {
              grid-template-columns: minmax(0, 1fr);
            }

            .calc-rail {
              position: static;
            }
          }

          @media (max-width: 820px) {
            .calc-product-band,
            .calc-row-head,
            .calc-item-row {
              grid-template-columns: minmax(0, 1fr);
            }

            .calc-row-head {
              display: none;
            }

            .calc-item-row {
              padding: 10px 0;
            }

            .calc-qty-cell {
              grid-template-columns: minmax(0, 1fr) 96px;
            }

            .calc-hpp-cell {
              text-align: left;
            }
          }

          /* ── Searchable Material Combobox ── */
          .mat-combo {
            min-width: 0;
          }

          .mc-trigger {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--bg2);
            border: 1px solid var(--border2);
            border-radius: var(--r-sm);
            cursor: pointer;
            min-height: 34px;
            transition: border-color 0.15s;
            user-select: none;
          }

          .mc-trigger:hover {
            border-color: rgba(255, 255, 255, 0.2);
          }

          .mc-trigger.open {
            border-color: var(--accent);
          }

          .mc-val {
            flex: 1;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--text3);
          }

          .mc-val.sel {
            color: var(--text);
            font-weight: 500;
          }

          .mc-chev {
            flex-shrink: 0;
            color: var(--text3);
            transition: transform 0.2s;
          }

          .mc-trigger.open .mc-chev {
            transform: rotate(180deg);
            color: var(--accent);
          }

          /* Singleton portal — selalu di body, posisi diset JS */
          .mc-dd {
            position: absolute;
            min-width: 220px;
            background: var(--card);
            border: 1px solid var(--border2);
            border-radius: var(--r);
            box-shadow: var(--shadow-md);
            z-index: 9999;
            overflow: hidden;
            display: none;
          }

          #mo-ord .mc-dd {
            z-index: 21050 !important;
          }

          .mc-dd.on {
            display: block;
          }

          .mc-search-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: var(--card2);
            border-bottom: 1px solid var(--border);
          }

          .mc-search-wrap svg {
            flex-shrink: 0;
            color: var(--text3);
          }

          .mc-inp {
            flex: 1;
            background: none;
            border: none;
            color: var(--text);
            font-size: 12px;
            font-family: inherit;
            outline: none;
            min-width: 0;
          }

          .mc-inp::placeholder {
            color: var(--text3);
          }

          .mc-list {
            max-height: 260px;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
          }
          .mc-list::-webkit-scrollbar { display: none; }

          .mc-item {
            padding: 9px 14px;
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background 0.1s;
          }

          .mc-item:last-child {
            border-bottom: none;
          }

          .mc-item:hover {
            background: var(--card2);
          }

          .mc-item.sel {
            background: var(--accent-dim);
          }

          .mc-item.sel .mc-iname {
            color: var(--accent);
            font-weight: 600;
          }

          .mc-iname {
            font-size: 12px;
            line-height: 1.4;
          }

          .mc-isub {
            font-size: 10.5px;
            color: var(--text3);
            margin-top: 2px;
          }

          .mc-empty {
            padding: 20px 14px;
            font-size: 12px;
            color: var(--text3);
            text-align: center;
          }

          .mode-toggle {
            display: flex;
            background: var(--card2);
            border: 1px solid var(--border2);
            border-radius: 7px;
            overflow: hidden;
            height: 32px;
          }

          .mode-btn {
            flex: 1;
            font-size: 10px;
            font-weight: 700;
            cursor: pointer;
            border: none;
            background: transparent;
            color: var(--text3);
            transition: all 0.15s;
            padding: 0 4px;
            font-family: var(--font);
          }

          .mode-btn.on {
            background: var(--accent-dim);
            color: var(--accent2);
          }

          .mode-btn:disabled {
            opacity: .45;
            cursor: not-allowed;
          }

          .breakdown-row {
            display: grid;
            grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
            gap: 8px;
            padding: 7px 0;
            border-bottom: 1px solid var(--border);
            font-size: 11.5px;
            align-items: center;
          }

          .breakdown-row:last-child {
            border-bottom: none;
          }

          .breakdown-row.header {
            font-size: 9.5px;
            font-weight: 700;
            color: var(--text3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
          }

          .tmpl-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 0;
            border-bottom: 1px solid var(--border);
          }

          .tmpl-item:last-child {
            border-bottom: none;
          }

          .tmpl-name {
            font-size: 13px;
            font-weight: 600;
          }

          .tmpl-meta {
            font-size: 11px;
            color: var(--text2);
            margin-top: 2px;
          }