/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
        :root {
            --apple-blue: #0071e3; --apple-blue-hover: #0077ed;
            --apple-danger: #ff3b30; --apple-danger-hover: #d70015;
            --apple-success: #34c759;
            --bg-color: #f5f5f7; --text-color: #1d1d1f; --text-muted: #86868b;
            --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(0, 0, 0, 0.08);
            --input-bg: rgba(255, 255, 255, 0.8); --table-bg: #ffffff;
            --menu-bg: rgba(255, 255, 255, 0.95);
            --table-border: #d2d2d7; --grid-border: rgba(0, 0, 0, 0.08);
        }
        [data-theme="dark"] {
            --bg-color: #000000; --text-color: #f5f5f7; --text-muted: #a1a1a6;
            --glass-bg: rgba(30, 30, 30, 0.72); --glass-border: rgba(255, 255, 255, 0.15);
            --input-bg: rgba(0, 0, 0, 0.4); --table-bg: rgba(28, 28, 30, 1);
            --menu-bg: rgba(0, 0, 0, 0.95);
            --table-border: #424245; --grid-border: rgba(255, 255, 255, 0.12);
        }
        * { box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter Variable", "Inter", "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-color); color: var(--text-color); margin: 0; min-height: 100vh;
            -webkit-font-smoothing: antialiased; transition: background-color 0.3s, color 0.3s; font-size: 13px;
        }
        .glass {
            background: var(--glass-bg); backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px); transition: background 0.3s;
        }
        .nav-bar {
            display: flex; justify-content: space-between; align-items: center; padding: 0 24px;
            position: sticky; top: 0; z-index: 999; height: 35px;
        }
        .nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; padding-right: 16px; }
        .nav-brand img { height: 16px; width: auto; object-fit: contain; }

        .lang-dropdown-wrapper { position: relative; }
        .lang-btn {
            display: flex; align-items: center; gap: 6px; background: transparent; border: none;
            color: var(--text-color); cursor: pointer; font-weight: 700; font-size: 12px; padding: 4px;
            border-radius: 6px; transition: 0.2s;
        }
        [data-theme="dark"] .lang-btn { background: transparent; }
        .lang-btn:hover, .lang-btn.active { background: rgba(120,120,128,0.12); box-shadow: none; }
        .lang-menu {
            position: absolute; top: calc(100% + 12px); right: 0; background: var(--menu-bg);
            backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
            border: none; border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden;
            transform: translateY(-10px) scale(0.95); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 3000; min-width: 160px; max-height: 50vh; overflow-y: auto;
        }
        .lang-menu.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
        .lang-menu a {
            display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none;
            color: var(--text-color); border-radius: 8px; font-weight: 600; font-size: 12px; transition: 0.2s;
        }
        .lang-menu a:hover { background: rgba(0, 113, 227, 0.1); color: var(--apple-blue); }
        .lang-menu .flag { font-size: 16px; }
        .theme-toggle {
            background: transparent; border: none; color: var(--text-color); cursor: pointer; display: flex;
            align-items: center; justify-content: center; padding: 0; border-radius: 6px; transition: background 0.2s;
        }
        .theme-toggle:hover { background: rgba(120,120,128,0.1); }
        .nav-utility-controls {
            display: flex; width: 0; opacity: 0; overflow: hidden; align-items: center;
            justify-content: flex-end; gap: 6px; flex: 0 0 auto; pointer-events: none;
            order: 2;
            transform: translateX(8px) scale(.92);
            transition: width .3s cubic-bezier(.16,1,.3,1), opacity .2s ease,
                        transform .3s cubic-bezier(.16,1,.3,1), margin .3s ease;
        }
        .nav-utility-controls .lang-btn { min-height: 28px; box-shadow: none !important; }
        .nav-utility-controls .theme-toggle { width: 28px; height: 28px; flex: 0 0 28px; }
        .right-controls { gap: 10px; }

        .app-menu-btn {
            width: 28px; height: 28px; background: transparent !important; border: none; font-size: 24px;
            color: var(--text-color); cursor: pointer; padding: 0; transition: color 0.2s; display: flex;
            align-items: center; justify-content: center; outline: none; border-radius: 50%;
        }
        .app-menu-btn:hover { color: var(--apple-blue); }

        .action-slider-group {
            display: flex; align-items: center; background: transparent; order: 3;
        }
        .hidden-actions {
            width: 0; opacity: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform: translateX(10px) scale(0.8); pointer-events: none;
        }
        .logout-icon-only {
            color: var(--apple-danger); font-size: 20px; display: flex; align-items: center; justify-content: center;
            width: 32px; height: 32px; border-radius: 50%; text-decoration: none; transition: background 0.2s, transform 0.2s;
        }
        .logout-icon-only:hover { background: rgba(255, 59, 48, 0.15); transform: scale(1.1); }
        #main-menu-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; }

        @media (min-width: 768px) {
            .action-slider-group.expanded .hidden-actions {
                width: 36px; opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; margin-right: 4px;
            }
            .action-slider-group.expanded + .nav-utility-controls {
                width: 82px; opacity: 1; overflow: visible; pointer-events: auto;
                transform: translateX(0) scale(1); margin-left: 12px;
            }
            .action-slider-group.expanded #main-menu-icon { transform: rotate(90deg); }
        }

        .nav-links { display: none; }
        .desktop-only { display: flex; align-items: center; gap: 12px; }
        .mobile-only { display: none !important; }
        .top-nav-links { display: flex; align-items: center; gap: 24px; }
        .top-nav-item { color: var(--text-color); text-decoration: none; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; transition: color 0.2s; }
        .top-nav-item:hover, .top-nav-item.active { color: var(--apple-blue); font-weight: 600; }
        .mobile-nav-item.active { color: var(--apple-blue) !important; }

        .lang-drilldown-menu {
            display: none; flex-direction: column; gap: 2px; width: 100%; margin-top: 8px;
            background: rgba(120,120,128,0.06); border-radius: 8px; padding: 6px;
        }
        .lang-drilldown-menu.open { display: flex; }
        .lang-drilldown-menu a {
            display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none;
            color: var(--text-color); border-radius: 6px; font-weight: 600; font-size: 13px;
        }
        .lang-drilldown-menu a:hover { background: rgba(0, 113, 227, 0.1); color: var(--apple-blue); }

        @media (max-width: 767px) {
            .desktop-only { display: none !important; }
            .mobile-only { display: flex !important; }
            .nav-bar { padding: 0 12px; height: 35px; }
            .nav-group-left { gap: 0; }
            .nav-brand { padding: 0; margin: 0; }
            .app-menu-btn { padding: 0; margin: 0; font-size: 22px; }
            .right-controls { gap: 3px; margin-left: auto; }
            .nav-utility-controls { display: none; }

            .nav-links {
                display: flex; visibility: hidden; opacity: 0; flex-direction: column; position: fixed;
                top: 34px; left: 0; right: 0; height: calc(100vh - 35px); background: var(--bg-color);
                padding: 16px 20px 100px 20px; align-items: stretch; gap: 0; z-index: 998; overflow-y: auto;
                -webkit-overflow-scrolling: touch; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
            }
            .nav-links.show { display: flex; visibility: visible; opacity: 1; }
            .nav-links > a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 0; color: var(--text-color); text-decoration: none; font-size: 15px; font-weight: 600; }
            .nav-links > a:hover { color: var(--apple-blue); }
        }

        .container-full { width: 100%; padding: 32px 40px; max-width: 1600px; margin: 0 auto; }
        @media (max-width: 768px) { .container-full { padding: 20px; } }


      :root {
        --coda-bg: #f5f5f7; --coda-center-bg: #f5f5f7; --coda-surface: #ffffff; --coda-panel-surface: #fafafa; --coda-surface-hover: rgba(0, 0, 0, 0.02);
        --coda-border: rgba(0, 0, 0, 0.08); --coda-border-strong: rgba(0, 0, 0, 0.15);
        --coda-text: #1d1d1f; --coda-muted: #86868b; --coda-blue: #0071e3;
        --coda-blue-hover: #0077ed; --coda-blue-bg: rgba(0, 113, 227, 0.08);
        --coda-danger: #ff3b30; --coda-success: #34c759;

        --coda-panel-top: 35px; --coda-sidebar-w: 240px; --coda-sidebar-w-mini: 64px; --coda-middle-w: 350px; --coda-form-w: 320px;
        --coda-ui-size: 32px; --coda-icon-size: 16px; --coda-soft: cubic-bezier(0.22, 0.8, 0.22, 1);
      }

      [data-theme="dark"] {
        --coda-bg: #000000; --coda-center-bg: #0a0a0c; --coda-surface: #1c1c1e; --coda-panel-surface: #1c1c1e; --coda-surface-hover: rgba(255, 255, 255, 0.04);
        --coda-border: rgba(255, 255, 255, 0.12); --coda-border-strong: rgba(255, 255, 255, 0.2);
        --coda-text: #f5f5f7; --coda-muted: #a1a1a6; --coda-blue: #0a84ff;
        --coda-blue-hover: #2490ff; --coda-blue-bg: rgba(10, 132, 255, 0.12);
      }

      html, body { overflow: hidden !important; margin: 0 !important; padding: 0 !important; width: 100vw !important; height: 100vh !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter Variable", "Inter", "Segoe UI", Roboto, sans-serif; }
      .container-fluid, .main-content, #content-wrapper, .container-full, main, .container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; height: 100% !important; border: none !important; }
      .nav-bar.glass { border-bottom: 1px solid var(--coda-border); }

      .coda-layout {
        position: fixed; top: var(--coda-panel-top); bottom: 0; left: 0; right: 0;
        display: grid; grid-template-columns: var(--coda-sidebar-w) var(--coda-middle-w) minmax(0, 1fr);
        gap: 0 !important; align-items: stretch; background: var(--coda-bg); z-index: 10; transition: grid-template-columns .34s var(--coda-soft); will-change: grid-template-columns;
      }
      .coda-layout.sidebar-mini { grid-template-columns: var(--coda-sidebar-w-mini) var(--coda-middle-w) minmax(0, 1fr); }
      .coda-layout.panel-expanded { grid-template-columns: var(--coda-sidebar-w) 0 minmax(0, 1fr); }
      .coda-layout.sidebar-mini.panel-expanded { grid-template-columns: var(--coda-sidebar-w-mini) 0 minmax(0, 1fr); }
      .coda-layout.panel-expanded .coda-detail-panel { opacity: 0; visibility: hidden; pointer-events: none; }

      .coda-sidebar, .coda-detail-panel, .coda-form-panel { height: 100%; min-width: 0; position: relative; background: transparent; overflow-y: auto; overflow-x: hidden; }
      .coda-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--coda-border); background: var(--coda-panel-surface); overflow: hidden; }
      .coda-detail-panel { background: var(--coda-center-bg); isolation: isolate; overflow: hidden; transition: opacity .24s var(--coda-soft); }
      .coda-sidebar, .coda-detail-panel, .coda-form-panel, .sidebar-main-scroll, .coda-preview-content { scrollbar-width: none; -ms-overflow-style: none; }
      .coda-sidebar::-webkit-scrollbar, .coda-detail-panel::-webkit-scrollbar, .coda-form-panel::-webkit-scrollbar, .sidebar-main-scroll::-webkit-scrollbar, .coda-preview-content::-webkit-scrollbar { display: none; width: 0; height: 0; }

      .coda-detail-panel::-webkit-scrollbar, .coda-form-panel::-webkit-scrollbar, .sidebar-main-scroll::-webkit-scrollbar, .coda-preview-content::-webkit-scrollbar, .coda-mobile-form-body::-webkit-scrollbar { width: 6px; }
      .coda-detail-panel::-webkit-scrollbar-thumb, .coda-form-panel::-webkit-scrollbar-thumb, .sidebar-main-scroll::-webkit-scrollbar-thumb, .coda-preview-content::-webkit-scrollbar-thumb, .coda-mobile-form-body::-webkit-scrollbar-thumb { background: var(--coda-border-strong); border-radius: 10px; }

      .coda-sb-ico, .coda-info-ico {
        width: var(--coda-ui-size); height: var(--coda-ui-size); min-width: var(--coda-ui-size);
        background: var(--coda-surface); border: 1px solid var(--coda-border); border-radius: 10px;
        display: grid; place-items: center; color: var(--coda-text); flex-shrink: 0; transition: color 0.2s;
      }
      .coda-sb-ico i, .coda-info-ico i { font-size: var(--coda-icon-size); line-height: 1; }

      /* Idle menu icons keep both Phosphor duotone layers visible. Active and hover
         states are intentionally excluded so their established CODA blue remains. */
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) .ph-duotone {
        --coda-icon-primary: #1677ff;
        --coda-icon-secondary: #35c5f0;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-chart-pie-slice, .ph-chart-line-up, .ph-chart-candlestick, .ph-trend-up, .ph-trend-down, .ph-money, .ph-pulse) {
        --coda-icon-primary: #07966f;
        --coda-icon-secondary: #83c934;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-file-text, .ph-files, .ph-file-csv, .ph-file-pdf, .ph-file-xls, .ph-article, .ph-newspaper-clipping, .ph-calendar-blank, .ph-calendar-check, .ph-calendar-dots, .ph-clock, .ph-clock-counter-clockwise, .ph-table, .ph-list-checks) {
        --coda-icon-primary: #6657d9;
        --coda-icon-secondary: #2e9ce6;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-arrows-left-right, .ph-arrows-clockwise, .ph-repeat, .ph-git-merge, .ph-car, .ph-car-profile, .ph-flag-checkered) {
        --coda-icon-primary: #e94f55;
        --coda-icon-secondary: #f1ad24;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-users, .ph-users-three, .ph-user, .ph-user-circle, .ph-user-focus, .ph-user-plus, .ph-user-minus, .ph-identification-card, .ph-identification-badge, .ph-crown) {
        --coda-icon-primary: #7c55d9;
        --coda-icon-secondary: #e44f9a;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-ticket, .ph-receipt) {
        --coda-icon-primary: #df8700;
        --coda-icon-secondary: #f45f38;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-buildings, .ph-house, .ph-house-line, .ph-map-pin, .ph-compass) {
        --coda-icon-primary: #2468d7;
        --coda-icon-secondary: #08a58e;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-broadcast, .ph-lightning) {
        --coda-icon-primary: #3475e8;
        --coda-icon-secondary: #00a8c8;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-key, .ph-lock-key, .ph-shield-check, .ph-seal-check) {
        --coda-icon-primary: #bd7c00;
        --coda-icon-secondary: #2455a4;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-package, .ph-folders, .ph-folder-open, .ph-folder-dashed, .ph-archive, .ph-database) {
        --coda-icon-primary: #168c6a;
        --coda-icon-secondary: #4b78d1;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-credit-card, .ph-app-window, .ph-desktop, .ph-device-mobile-camera) {
        --coda-icon-primary: #2468d7;
        --coda-icon-secondary: #2eb67d;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-envelope-simple, .ph-chat-circle, .ph-chat-circle-text, .ph-paper-plane-right) {
        --coda-icon-primary: #1677d2;
        --coda-icon-secondary: #8b58d9;
      }
      :is(.coda-sb-ico, .coda-info-ico, .grid-ico, .ig-menu-item) :is(.ph-warning-circle, .ph-x-circle, .ph-calendar-x, .ph-prohibit) {
        --coda-icon-primary: #dc3545;
        --coda-icon-secondary: #f08a24;
      }
      .coda-sidebar .coda-sb-item:not(.active):not(:hover) .coda-sb-ico .ph-duotone,
      .ig-menu-item:not(.active):not(:hover) > .ph-duotone,
      .coda-info-row:not(.active-list-item):not(.unread-item):not(:hover) .coda-info-ico .ph-duotone,
      .coda-form-grid-item:not(:active) .grid-ico .ph-duotone {
        color: var(--coda-icon-primary) !important;
      }
      .coda-sidebar .coda-sb-item:not(.active):not(:hover) .coda-sb-ico .ph-duotone::before,
      .ig-menu-item:not(.active):not(:hover) > .ph-duotone::before,
      .coda-info-row:not(.active-list-item):not(.unread-item):not(:hover) .coda-info-ico .ph-duotone::before,
      .coda-form-grid-item:not(:active) .grid-ico .ph-duotone::before {
        color: var(--coda-icon-secondary) !important;
        opacity: .88 !important;
      }
      .coda-sidebar .coda-sb-item:not(.active):not(:hover) .coda-sb-ico .ph-duotone::after,
      .ig-menu-item:not(.active):not(:hover) > .ph-duotone::after,
      .coda-info-row:not(.active-list-item):not(.unread-item):not(:hover) .coda-info-ico .ph-duotone::after,
      .coda-form-grid-item:not(:active) .grid-ico .ph-duotone::after {
        color: var(--coda-icon-primary) !important;
        opacity: 1 !important;
      }

      /* Ikon diam satu warna: CODA blue, sama persis dengan active - permintaan pemilik
         (WEB_MARK8.0.10). Menimpa blok warna per keluarga ikon tepat di atas. Selector-nya
         sama persis dengan blok itu, jadi spesifisitasnya setara dan urutanlah yang menang;
         lapisan latar duotone kembali ke bawaan Phosphor (0.2) seperti saat hover/active.
         Disisipkan oleh tools/legacy-ui/port_dashboard.py. */
      .coda-sidebar .coda-sb-item:not(.active):not(:hover) .coda-sb-ico .ph-duotone,
      .ig-menu-item:not(.active):not(:hover) > .ph-duotone,
      .coda-info-row:not(.active-list-item):not(.unread-item):not(:hover) .coda-info-ico .ph-duotone,
      .coda-form-grid-item:not(:active) .grid-ico .ph-duotone {
        color: var(--coda-blue) !important;
      }
      .coda-sidebar .coda-sb-item:not(.active):not(:hover) .coda-sb-ico .ph-duotone::before,
      .ig-menu-item:not(.active):not(:hover) > .ph-duotone::before,
      .coda-info-row:not(.active-list-item):not(.unread-item):not(:hover) .coda-info-ico .ph-duotone::before,
      .coda-form-grid-item:not(:active) .grid-ico .ph-duotone::before {
        color: inherit !important;
        opacity: .2 !important;
      }
      .coda-sidebar .coda-sb-item:not(.active):not(:hover) .coda-sb-ico .ph-duotone::after,
      .ig-menu-item:not(.active):not(:hover) > .ph-duotone::after,
      .coda-info-row:not(.active-list-item):not(.unread-item):not(:hover) .coda-info-ico .ph-duotone::after,
      .coda-form-grid-item:not(:active) .grid-ico .ph-duotone::after {
        color: inherit !important;
        opacity: 1 !important;
      }
      /* Hover memunculkan warna keluarga ikon dari UI lama (--coda-icon-primary/secondary
         yang didefinisikan blok acuan di atas), supaya diam = satu warna tapi tetap terasa
         interaktif (WEB_MARK8.1.1). Hanya untuk perangkat yang benar-benar bisa hover: di
         layar sentuh :hover menempel sesudah diketuk. Item aktif tetap CODA blue. */
      @media (hover: hover) {
        .coda-sidebar .coda-sb-item:not(.active):hover .coda-sb-ico .ph-duotone,
        .ig-menu-item:not(.active):hover > .ph-duotone,
        .coda-info-row:not(.active-list-item):not(.unread-item):hover .coda-info-ico .ph-duotone,
        .coda-form-grid-item:not(:active):hover .grid-ico .ph-duotone {
          color: var(--coda-icon-primary) !important;
        }
        .coda-sidebar .coda-sb-item:not(.active):hover .coda-sb-ico .ph-duotone::before,
        .ig-menu-item:not(.active):hover > .ph-duotone::before,
        .coda-info-row:not(.active-list-item):not(.unread-item):hover .coda-info-ico .ph-duotone::before,
        .coda-form-grid-item:not(:active):hover .grid-ico .ph-duotone::before {
          color: var(--coda-icon-secondary) !important;
          opacity: .88 !important;
        }
      }

      .coda-sidebar .coda-side-head, .coda-sidebar .sidebar-main-scroll, .coda-sidebar .coda-sidebar-footer { width: var(--coda-sidebar-w); flex-shrink: 0; }
      .coda-sidebar .coda-side-head {
        position: relative; z-index: 4; flex: 0 0 auto; padding: 16px 0 12px 0;
        border-bottom: none; background: var(--coda-panel-surface);
      }
      .coda-sidebar .coda-side-head::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 16px;
        pointer-events: none; background: linear-gradient(to bottom, var(--coda-panel-surface), transparent); opacity: .9;
      }
      .coda-sidebar .sidebar-main-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
      .coda-sidebar .coda-sidebar-footer { position: relative; z-index: 4; flex: 0 0 auto; margin-top: auto; padding: 12px 0 16px 0; border-top: none; background: var(--coda-panel-surface); }
      .coda-sidebar .coda-sidebar-footer::before {
        content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
        pointer-events: none; background: linear-gradient(to top, var(--coda-panel-surface), transparent); opacity: .9;
      }
      .coda-desktop-main-nav { flex: 0 0 auto; padding: 0 0 8px; border-bottom: 0; }
      .coda-desktop-user-nav { margin-bottom: 4px !important; }

      .coda-sidebar .search-wrap, .coda-sidebar .coda-sb-item, .coda-sidebar .toggle-wrap {
        width: calc(var(--coda-sidebar-w) - 24px); margin: 0 12px 4px 12px; padding: 4px; display: flex; align-items: center; gap: 12px;
        border-radius: 12px; border: 1px solid transparent; background: transparent; flex-shrink: 0; cursor: pointer; transition: background 0.2s, border-color 0.2s;
      }
      .coda-sidebar .coda-sb-text { flex: 1; min-width: 0; transition: opacity 0.2s; white-space: nowrap; }
      .coda-sidebar .coda-sb-title { font-size: 11.5px; font-weight: 600; color: var(--coda-text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; }
      .coda-sidebar .coda-sb-desc { font-size: 10px; color: var(--coda-muted); overflow: hidden; text-overflow: ellipsis; }
      .coda-expanded-context {
        display: none; margin: -2px 12px 6px 32px; padding: 2px 0 2px 8px;
        border-left: 1px solid var(--coda-border-strong);
      }
      .coda-layout.panel-expanded .coda-expanded-context { display: block; }
      .coda-expanded-context .coda-sb-item {
        width: calc(100% - 4px); min-height: 40px; margin: 0 0 4px; padding: 4px;
        border-radius: 12px; gap: 12px;
      }
      .coda-expanded-context .coda-sb-ico {
        width: var(--coda-ui-size); height: var(--coda-ui-size); min-width: var(--coda-ui-size); border-radius: 10px;
      }
      .coda-expanded-context .coda-sb-ico i { font-size: var(--coda-icon-size); }
      .coda-expanded-context .coda-sb-title { font-size: 11.5px; margin-bottom: 0; }
      .coda-expanded-context .coda-sb-desc { display: none; }
      .coda-expanded-context .coda-sb-item.active { background: var(--coda-blue-bg); color: var(--coda-blue); }
      .coda-context-parent .coda-sb-ico { position: relative; }
      .coda-expanded-context-collapse {
        position: absolute; right: -5px; bottom: -5px; z-index: 3;
        width: 15px; height: 15px; display: grid; place-items: center; padding: 0;
        border: 1px solid var(--coda-border-strong); border-radius: 50%;
        background: var(--coda-panel-surface); color: var(--coda-muted); cursor: pointer;
      }
      .coda-expanded-context-collapse:hover { background: var(--coda-blue-bg); color: var(--coda-blue); }
      .coda-expanded-context-collapse i { font-size: 9px; }
      .coda-layout.sidebar-mini .coda-expanded-context {
        margin: 0 0 6px; padding: 0; border-left: 0;
      }
      .coda-layout.sidebar-mini .coda-expanded-context .coda-sb-item {
        width: calc(var(--coda-sidebar-w-mini) - 24px); min-height: 40px;
        margin: 0 12px 4px; padding: 4px; border-radius: 12px;
      }
      .coda-layout.sidebar-mini .coda-expanded-context .coda-sb-ico {
        width: var(--coda-ui-size); height: var(--coda-ui-size); min-width: var(--coda-ui-size); border-radius: 10px;
      }

      .coda-sidebar .search-wrap { background: var(--coda-surface-hover); border-color: var(--coda-border-strong); height: 40px; margin-bottom: 0; cursor: text; position: relative; overflow: hidden; }
      .coda-sidebar .search-wrap .coda-sb-ico { background: transparent; border-color: transparent; box-shadow: none; position: relative; z-index: 2; }
      .coda-sidebar .search-wrap .coda-sb-text { height: 100%; display: flex; align-items: center; position: relative; flex: 1; }
      .coda-sidebar .search-wrap input { width: 100%; height: 100%; border: none; background: transparent; outline: none; color: var(--coda-text); font-size: 11.5px; padding: 0; position: relative; z-index: 2; }

      .coda-sidebar .toggle-wrap { height: 40px; margin-bottom: 0; }
      .coda-sidebar .toggle-wrap .coda-sb-ico { background: transparent; border-color: transparent; box-shadow: none; }
      .coda-sidebar .toggle-wrap:hover { background: var(--coda-surface-hover); }
      .coda-sidebar .coda-sb-item:hover .coda-sb-ico i, .coda-sidebar .coda-sb-item.active .coda-sb-ico i { color: var(--coda-blue); }
      .coda-sidebar .coda-sb-item.active { background: var(--coda-blue-bg); border-color: color-mix(in srgb, var(--coda-blue) 24%, transparent); }
      .coda-sidebar .coda-sb-item.active.context-child-active { background: transparent; border-color: transparent; }

      .coda-layout.sidebar-mini .coda-sidebar .coda-sb-text { opacity: 0; pointer-events: none; }
      .coda-layout.sidebar-mini .coda-sidebar .search-wrap,
      .coda-layout.sidebar-mini .coda-sidebar .coda-sb-item,
      .coda-layout.sidebar-mini .coda-sidebar .toggle-wrap {
        box-sizing: border-box; width: calc(var(--coda-sidebar-w-mini) - 24px); min-width: calc(var(--coda-sidebar-w-mini) - 24px); max-width: calc(var(--coda-sidebar-w-mini) - 24px);
        margin-left: 12px; margin-right: 12px; gap: 0; justify-content: center;
      }
      .coda-layout.sidebar-mini .coda-sidebar .coda-sb-text { display: none; }
      .coda-layout.sidebar-mini .coda-sidebar .search-wrap, .coda-layout.sidebar-mini .coda-sidebar .toggle-wrap { background: transparent !important; border-color: transparent !important; }
      .coda-layout.sidebar-mini .coda-sidebar .search-wrap .coda-sb-ico, .coda-layout.sidebar-mini .coda-sidebar .toggle-wrap .coda-sb-ico { background: var(--coda-surface); border-color: var(--coda-border); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
      .coda-layout.sidebar-mini .coda-sidebar .search-wrap:hover .coda-sb-ico i, .coda-layout.sidebar-mini .coda-sidebar .toggle-wrap:hover .coda-sb-ico i { color: var(--coda-blue); }

      .coda-mobile-search-bar, .coda-search-overlay-dark, .coda-mobile-search-sheet, .mobile-only-menu { display: none !important; }

      .coda-sliding-placeholder { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; color: var(--coda-muted); pointer-events: none; z-index: 1; font-size: 11.5px; height: 100%; }
      .coda-mobile-slider { left: 12px; color: var(--coda-blue) !important; font-size: 13px; font-weight: 500; text-shadow: none !important; }

      .coda-search-idle-word { display: inline-block; min-width: 0; overflow: hidden; color: var(--coda-blue); font-weight: 500; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
      .coda-search-idle-word.is-changing { animation: codaSearchPromptSwap .34s ease both; }
      @keyframes codaSearchPromptSwap {
          0% { opacity: 1; transform: translateY(0); }
          48% { opacity: 0; transform: translateY(-7px); }
          52% { opacity: 0; transform: translateY(7px); }
          100% { opacity: 1; transform: translateY(0); }
      }
      @media (prefers-reduced-motion: reduce) { .coda-search-idle-word.is-changing { animation: none; } }

      input:focus + .coda-sliding-placeholder, input:not(:placeholder-shown) + .coda-sliding-placeholder { display: none !important; }

      .coda-hero-box { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 0; pointer-events: none; z-index: 0; }

      .coda-detail-body { height: 100%; min-height: 0; padding: 0 20px 20px 20px; margin: 0 auto; display: flex; flex-direction: column; max-width: 800px; width: 100%; overflow-x: hidden; position: relative; z-index: 1; background: transparent; }

      .coda-ig-menu { display: flex; align-items: stretch; justify-content: flex-start; width: 100%; padding: 4px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; background: var(--coda-surface); border: 1px solid var(--coda-border); border-radius: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
      .coda-ig-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
      .ig-menu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 96px; flex: 1 0 96px; padding: 12px 6px; scroll-snap-align: start; cursor: pointer; background: transparent; border-radius: 20px; transition: background 0.25s, transform 0.25s; }
      .ig-menu-item i { font-size: 26px; color: var(--coda-muted); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s; }
      .ig-menu-item span { font-size: 11px; font-weight: 700; color: var(--coda-muted); text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s; }
      .ig-menu-item.active { background: transparent; }
      .ig-menu-item.active i { transform: scale(1.15) translateY(-2px); color: var(--coda-blue); }
      .ig-menu-item.active span { color: var(--coda-blue); }

      @media (hover: hover) {
          .ig-menu-item:hover { background: transparent; }
          .ig-menu-item:hover i { transform: scale(1.15) translateY(-2px); color: var(--coda-blue); }
          .ig-menu-item:hover span { color: var(--coda-blue); }
      }

      .coda-filter-bar { display: none; gap: 24px; padding: 16px 20px 0 20px; margin: 0; align-items: center; justify-content: flex-start; overflow-x: auto; background: transparent !important; border-bottom: none; }
      .coda-filter-bar::-webkit-scrollbar { display: none; }
      .coda-text-filter { font-size: 11px; font-weight: 700; color: var(--coda-muted); cursor: pointer; padding-bottom: 10px; border-bottom: 2px solid transparent; transition: 0.2s ease; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
      .coda-text-filter:hover { color: var(--coda-text); }
      .coda-text-filter.active { color: var(--coda-blue); border-bottom: 2px solid var(--coda-blue); }
      .coda-text-filter.back-btn { font-size: 16px; padding-bottom: 8px; color: var(--coda-text); border-bottom: 2px solid transparent !important; cursor: pointer; }
      .coda-text-filter.back-btn:hover { color: var(--coda-blue); }
      .coda-text-filter.back-btn.disabled { pointer-events: none; color: var(--coda-muted); }

      .coda-list-wrapper { overflow-x: hidden; overflow-y: auto; position: relative; width: calc(100% + 40px); touch-action: pan-y; padding: 0; margin-top: 0; margin-left: -20px; margin-right: -20px; flex: 1; border-radius: 0; }
      .coda-info-list { display: flex; flex-direction: column; gap: 0; width: 100%; transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s ease; opacity: 1; transform: translateX(0); padding: 0; }

      .pan-out-left { transform: translateX(-40px) !important; opacity: 0 !important; }
      .pan-out-right { transform: translateX(40px) !important; opacity: 0 !important; }
      .pan-in-left { transform: translateX(-40px) !important; opacity: 0 !important; }
      .pan-in-right { transform: translateX(40px) !important; opacity: 0 !important; }
      .slide-fade-in { opacity: 0 !important; transform: translateY(15px) !important; }

      .coda-info-row.clickable-item { padding: 16px 20px; border-radius: 0; cursor: pointer; border: none; transition: background 0.2s, border-color 0.2s; margin: 0; background: transparent !important; display: flex; align-items: flex-start; gap: 12px; }
      .coda-group-header { padding: 16px 20px 8px 20px; font-size: 11px; font-weight: 700; color: var(--coda-muted); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; cursor: pointer; background: transparent !important; border-bottom: none; user-select: none; }

      @media (hover: hover) {
          .coda-info-row.clickable-item:hover { background: var(--coda-blue-bg) !important; }
          .coda-info-row.clickable-item:hover .coda-info-ico { color: var(--coda-blue); background: transparent; border-color: rgba(0, 113, 227, 0.2); }
      }
      .coda-info-row.clickable-item:active { background: var(--coda-blue-bg) !important; }
      .coda-info-row.clickable-item.active-list-item { background: transparent !important; }
      .coda-info-row.clickable-item.active-list-item .coda-info-ico { color: var(--coda-blue); background: var(--coda-blue-bg); border-color: rgba(0, 113, 227, 0.2); }
      .coda-info-row.unread-item .coda-info-ico { color: var(--coda-blue) !important; }

      .coda-info-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--coda-surface); border: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 18px; flex-shrink: 0; transition: color 0.2s, border-color 0.2s, background 0.2s; }
      .coda-info-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
      .coda-info-title { font-size: 13px; font-weight: 650; color: var(--coda-text); margin-bottom: 2px; line-height: 1.35; }
      .coda-info-desc { font-size: 12px; color: var(--coda-muted); line-height: 1.5; }

      .coda-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; padding: 20px; }
      .coda-form-grid-item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 8px; background: transparent; border: none; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; }
      .coda-form-grid-item:active { transform: scale(0.95); opacity: 0.7; }
      .coda-form-grid-item .grid-ico { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--coda-blue); border: none; display: grid; place-items: center; font-size: 42px; margin-bottom: 8px; }
      .coda-form-grid-item .grid-title { font-size: 12px; font-weight: 500; color: var(--coda-blue); line-height: 1.3; }

      .coda-social-preview-wrap { padding: 10px 20px 20px 20px; }
      .coda-social-preview-card { background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; width: 100%; }
      .coda-social-preview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 0 10px 0; border-bottom: none; margin-bottom: 6px; }
      .coda-social-preview-title-wrap { min-width: 0; }
      .coda-social-preview-title { font-size: 13px; font-weight: 800; color: var(--coda-text); display:flex; align-items:center; gap:8px; }
      .coda-social-preview-sub { font-size: 11px; color: var(--coda-muted); margin-top: 2px; }
      .coda-social-preview-link { font-size: 11px; font-weight: 800; color: var(--coda-blue); text-decoration: none; white-space: nowrap; cursor:pointer; }
      .coda-social-preview-actions { display:flex; align-items:center; gap:12px; }
      .coda-social-preview-list { display: block; max-height: 168px; overflow-y: auto; transition: max-height .28s var(--coda-soft); scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
      .coda-social-preview-list::-webkit-scrollbar { display: none; }
      .coda-social-preview-list.expanded { max-height: 420px; overflow-y: auto; }
      .coda-social-preview-track { display:flex; flex-direction:column; gap:0; }
      .coda-social-preview-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: none; text-decoration: none; color: inherit; }
      .coda-social-preview-item:last-child { border-bottom: none; }
      .coda-social-preview-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
      .coda-social-preview-top { display:flex; align-items:flex-start; gap:10px; }
      .coda-social-preview-side-media { width: 44px; min-width: 44px; height: 66px; border-radius: 10px; overflow: hidden; position: relative; background: var(--coda-surface-hover); border: 1px solid var(--coda-border); }
      .coda-social-preview-side-media-track { width:100%; height:100%; position:relative; }
      .coda-social-preview-side-media-slide { position:absolute; inset:0; opacity:0; transition: opacity .35s ease; }
      .coda-social-preview-side-media-slide.active { opacity:1; }
      .coda-social-preview-side-media img, .coda-social-preview-side-media video { width:100%; height:100%; object-fit: cover; display:block; }
      .coda-social-preview-media-badge { position:absolute; right:4px; bottom:4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; font-size:9px; font-weight:700; z-index:2; }

      .coda-social-preview-ico { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; display:grid; place-items:center; background: transparent; border: 1px solid var(--coda-border); color: var(--coda-blue); font-size: 18px; }
      .coda-social-preview-copy { min-width: 0; flex: 1; }
      .coda-social-preview-user { font-size: 12px; font-weight: 800; color: var(--coda-text); margin-bottom: 3px; }
      .coda-social-preview-text { font-size: 12px; color: var(--coda-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
      .coda-social-preview-time { font-size: 10px; color: var(--coda-muted); margin-top: 5px; }
      .coda-social-preview-empty { padding: 14px 0; font-size: 12px; color: var(--coda-muted); }
      .coda-social-preview-toggle { width: 100%; margin-top: 4px; padding: 10px 0 0 0; border: none; border-top: 1px solid var(--coda-border); background: transparent; color: var(--coda-blue); cursor: pointer; user-select: none; display: none; align-items: center; justify-content: center; }
      .coda-social-preview-toggle i { font-size: 16px; line-height: 1; }
      .coda-social-preview-toggle.show { display:flex; }

      /* GARIS PEMISAH TIPIS DI DESKTOP */
      .coda-form-panel { display: flex; flex-direction: column; background: var(--coda-panel-surface); overflow-x: hidden !important; border-left: 1px solid var(--coda-border); }
      .coda-layout.panel-expanded .coda-form-panel { border-left-color: transparent; }
      .coda-form-panel:fullscreen, .coda-form-panel:-webkit-full-screen { width: 100vw; height: 100vh; background: var(--coda-panel-surface); }
      .coda-form-panel:fullscreen .coda-form-panel-inner, .coda-form-panel:-webkit-full-screen .coda-form-panel-inner { width: 100%; height: 100%; }
      .coda-form-panel:fullscreen .coda-panel-expand, .coda-form-panel:-webkit-full-screen .coda-panel-expand { display: none; }

      .coda-form-panel-inner { --coda-panel-config-row: 36px; width: 100%; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
      .coda-form-head { box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; max-height: 44px; padding: 4px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); z-index: 10;}
      .coda-form-head-copy { min-width: 0; flex: 1; }
      .coda-form-title { margin: 0; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 17px; color: var(--coda-text); display:flex; align-items:center; gap:8px; text-overflow: ellipsis; white-space: nowrap; }
      .coda-form-subtitle { margin-top: 2px; overflow: hidden; font-size: 11px; line-height: 13px; color: var(--coda-muted); text-overflow: ellipsis; white-space: nowrap; }
      .coda-form-panel.admin-revenue-active-panel .coda-form-head { height: 44px; min-height: 44px; padding: 4px 16px; }

      .coda-extra-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
      .coda-extra-header-actions .coda-btn, .coda-extra-header-actions .coda-btn-outline { font-size: 11px; padding: 6px 12px; border-radius: 8px; }
      .admin-revenue-head-actions { display: flex; align-items: stretch; height: 32px; overflow: hidden; border: 1px solid var(--coda-border); background: var(--coda-panel-surface); }
      .admin-revenue-head-action { width: 32px; min-width: 32px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-right: 1px solid var(--coda-border); border-radius: 0; background: transparent; color: var(--coda-muted); cursor: pointer; }
      .admin-revenue-head-action:last-child { border-right: 0; }
      .admin-revenue-head-action:hover, .admin-revenue-head-action.active { background: var(--coda-surface-hover); color: var(--coda-text); }
      .admin-revenue-head-action i { font-size: 15px; }
      .coda-panel-expand {
        width: 32px; height: 32px; min-width: 32px; display: grid; place-items: center;
        border: 1px solid var(--coda-border); border-radius: 8px; background: transparent;
        color: var(--coda-muted); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease;
      }
      .coda-panel-expand:hover { color: var(--coda-text); background: var(--coda-surface-hover); }
      .coda-layout.panel-expanded .coda-panel-expand { color: var(--coda-muted); border-color: var(--coda-border); background: transparent; }
      .coda-layout.panel-expanded .coda-panel-expand:hover { color: var(--coda-text); background: var(--coda-surface-hover); }
      .coda-layout.context-tree-open .coda-panel-expand:disabled { opacity: .3; pointer-events: none; cursor: default; }

      .coda-preview-content, .coda-mobile-form-body { padding: 16px; flex: 1; min-height: 0; overflow-y: auto; transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 1; transform: translateY(0); }
      .coda-preview-content { background: var(--coda-panel-surface); }
      .fade-out-down { opacity: 0 !important; transform: translateY(12px) !important; }

      .coda-preview-content.iframe-mode { padding: 0 !important; overflow: hidden !important; }

      .coda-preview-content.seamless-mode, .coda-mobile-form-body.seamless-mode { padding: 0 !important; display: flex; flex-direction: column; overflow: hidden; background: var(--coda-panel-surface); }
      .coda-form-panel.admin-revenue-active-panel .coda-preview-content.seamless-mode { display: block; overflow-y: auto; overscroll-behavior: contain; }

      .coda-input, .coda-select, .coda-textarea, .team-search-input,
      .coda-preview-content input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
      .coda-preview-content select, .coda-preview-content textarea,
      .coda-mobile-form-body input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
      .coda-mobile-form-body select, .coda-mobile-form-body textarea {
        width: 100%; padding: 12px 14px; border-radius: 10px;
        border: 1px solid var(--coda-border-strong); background: var(--coda-bg); color: var(--coda-text);
        font-size: 13px; font-family: inherit; outline: none; transition: 0.2s ease; margin-bottom: 12px; box-sizing: border-box;
      }
      .coda-input:focus, .coda-select:focus, .coda-textarea:focus, .team-search-input:focus,
      .coda-preview-content input:focus, .coda-preview-content select:focus, .coda-preview-content textarea:focus,
      .coda-mobile-form-body input:focus, .coda-mobile-form-body select:focus, .coda-mobile-form-body textarea:focus {
        border-color: var(--coda-blue); box-shadow: 0 0 0 3px var(--coda-blue-bg); background: var(--coda-surface);
      }
      .coda-select, .coda-preview-content select, .coda-mobile-form-body select {
        appearance: none; -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2386868b' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
      }
      .coda-textarea, .coda-preview-content textarea, .coda-mobile-form-body textarea { min-height: 80px; resize: vertical; }
      .coda-preview-content label, .coda-mobile-form-body label { font-size: 11px; font-weight: 650; color: var(--coda-muted); margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: 0.45px; }

      .coda-btn, .coda-btn-outline { border: none; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: 0.2s ease; text-decoration: none; justify-content:center; }
      .coda-btn { background: var(--coda-blue); color: white; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.25); }
      .coda-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
      .coda-btn-outline { background: var(--coda-surface); color: var(--coda-text); border: 1px solid var(--coda-border-strong); }
      .coda-btn-outline:hover:not(:disabled) { background: var(--coda-surface-hover); }
      .coda-btn:disabled, .coda-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }

      .team-picker-container { background: transparent; border-radius: 0; padding: 0; border: none; margin-bottom:12px;}
      .team-search-input { margin-bottom: 10px; }
      .team-results { max-height: 150px; overflow-y: auto; background: var(--coda-surface); border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--coda-border); }
      .team-result-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--coda-border); transition: background 0.2s; font-size: 12px; color: var(--coda-text); display:flex; align-items:center; }
      .team-result-item:hover { background: var(--coda-surface-hover); }
      .selected-team { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
      .team-badge { display: inline-flex; align-items: center; background: rgba(10,132,255,0.15); border: 1px solid rgba(10,132,255,0.3); color: var(--coda-blue); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; gap: 6px; }
      .team-badge.current-user { background: rgba(52,199,89,0.15); border-color: rgba(52,199,89,0.3); color: var(--coda-success); }
      .team-badge button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; padding: 0 2px; display:grid; place-items:center; }

      .coda-mobile-form-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 5000; display: none; opacity: 0; transition: opacity 0.3s; }
      .coda-mobile-form-overlay.open { display: block; opacity: 1; }
      .coda-mobile-form-sheet { position: fixed; bottom: 0; left: 0; right: 0; height: 88vh; background: var(--coda-surface); border-top-left-radius: 16px; border-top-right-radius: 16px; z-index: 5001; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; box-shadow: 0 -8px 24px rgba(0,0,0,0.1); }
      .coda-mobile-form-sheet.open { transform: translateY(0); }
      .coda-drawer-handle { width: 40px; height: 5px; background: var(--coda-border-strong); border-radius: 10px; margin: 12px auto; flex-shrink: 0; }
      #mobileFormDragHandle {
        appearance: none; -webkit-appearance: none; width: 72px; height: 28px; margin: 0 auto;
        padding: 0; border: 0; border-radius: 0; background: transparent; position: relative;
        flex: 0 0 28px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
      }
      #mobileFormDragHandle::after {
        content: ''; position: absolute; width: 40px; height: 5px; left: 50%; top: 11px;
        transform: translateX(-50%); border-radius: 10px; background: var(--coda-border-strong);
        transition: width .16s ease, background-color .16s ease;
      }
      #mobileFormDragHandle:hover::after, #mobileFormDragHandle:focus-visible::after,
      #mobileFormDragHandle.dragging::after { width: 48px; background: var(--coda-muted); }
      #mobileFormDragHandle:focus-visible { outline: 2px solid var(--coda-blue); outline-offset: -4px; }
      .coda-mobile-form-sheet.dragging { will-change: transform; }
      .coda-mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px 16px; border-bottom: 1px solid var(--coda-border); margin-bottom: 0; flex-shrink: 0; }
      .coda-mobile-sheet-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--coda-text); text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:flex; align-items:center; gap:6px; justify-content:center; }
      .coda-mobile-sheet-close { width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--coda-surface-hover); color: var(--coda-text); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s; }
      .coda-mobile-sheet-close:hover { background: var(--coda-border); }

      @media (max-width: 1180px) {
         :root { --coda-sidebar-w: 220px; }
      }

      @media (min-width: 981px) {
        .coda-ig-menu { display: none; }
      }

      @media (max-width: 980px) {
        .coda-layout { top: var(--coda-panel-top) !important; grid-template-columns: 1fr !important; }
        .coda-sidebar { display: none; }
        .coda-form-panel { display: none !important; }
        .coda-panel-expand { display: none !important; }

        .coda-detail-body {
            height: 100% !important; min-height: 0 !important;
            padding: 0 !important;
            margin: 0 !important; position: relative !important; z-index: 1 !important;
        }

        .coda-list-wrapper {
            box-sizing: border-box !important; width: 100% !important; height: 100% !important;
            margin-left: 0 !important; margin-right: 0 !important; padding-top: 68px !important;
        }

        .coda-filter-bar {
            padding: 12px 12px 0 12px !important;
            gap: 20px;
        }

        .coda-info-row.clickable-item { padding: 16px 12px !important; }

        .coda-form-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 12px; padding: 16px; background: transparent;
        }
        .coda-form-grid-item {
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
            text-align: center; padding: 0; background: transparent; border: none;
            cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease;
        }
        .coda-form-grid-item .grid-ico {
            width: min(68px, 100%); height: auto; aspect-ratio: 1; border-radius: 18px;
            background: var(--coda-surface); color: var(--coda-blue); border: 1px solid var(--coda-border);
            display: grid; place-items: center; font-size: 36px; margin-bottom: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
        }
        .coda-form-grid-item .grid-title {
            font-size: 10px; font-weight: 500; color: var(--coda-text); line-height: 1.3;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }

        .coda-social-preview-wrap { padding: 4px 16px 100px 16px !important; }
        .coda-social-preview-card { width: 100% !important; }
        .coda-social-preview-head { padding: 0 0 10px 0 !important; }
        .coda-social-preview-list { max-height: 164px !important; }
        .coda-social-preview-list.expanded { max-height: 360px !important; }
        .coda-social-preview-item { padding: 12px 0 !important; }

        .coda-hero-box { position: absolute !important; inset: 0 !important; height: 100% !important; min-height: 0 !important; z-index: 3 !important; pointer-events: none !important; }

        .mobile-only-menu { display: flex !important; }
        .coda-mobile-search-bar {
            display: flex !important; align-items: center !important; position: absolute !important; top: 16px !important; height: 36px !important; width: auto !important; left: 16px !important; right: 16px !important; justify-content: flex-start !important; padding: 0 12px !important; border-radius: 99px !important; background: var(--coda-surface) !important; border: 1px solid var(--coda-border) !important; box-shadow: none !important; z-index: 4005 !important; pointer-events: auto !important; touch-action: manipulation;
        }
        .mobile-search-input-wrap { position: relative; flex: 1; height: 100%; display: flex; align-items: center !important; width: 100% !important; opacity: 1 !important; pointer-events: auto !important; margin-left: 8px; }
        .mobile-search-input-wrap input { width: 100%; height: 100%; border: none; background: transparent; outline: none; color: var(--coda-text) !important; font-size: 13px; padding: 0; position: relative; z-index: 2; line-height: normal; }

        #mobileSearchIcon { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; padding: 0 !important; margin: 0 !important; color: var(--coda-muted) !important; font-size: 18px !important; flex-shrink: 0; }
        #mobileSearchClose { display: none !important; align-items: center !important; justify-content: center !important; height: 100% !important; padding: 0 !important; margin: 0 !important; color: var(--coda-muted) !important; font-size: 18px !important; cursor: pointer; flex-shrink: 0; z-index: 4006 !important; }
        #mobileSearchClose.active-close { display: flex !important; }
        .coda-mobile-search-bar,
        .coda-layout.mobile-no-hero .coda-mobile-search-bar {
            background: color-mix(in srgb, var(--coda-surface) 74%, transparent) !important;
            border: 1px solid color-mix(in srgb, var(--coda-border-strong) 72%, transparent) !important;
            box-shadow: none !important; backdrop-filter: blur(16px) saturate(1.12) !important;
            -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
        }

        .coda-search-overlay-dark { position: fixed !important; inset: 0 !important; background: transparent !important; backdrop-filter: none !important; z-index: 3499 !important; display: none !important; opacity: 0; transition: opacity 0.3s; }
        .coda-search-overlay-dark.open { display: block !important; opacity: 1; }

        .coda-mobile-search-sheet {
            display: flex !important; flex-direction: column !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 78vh !important; background: var(--coda-surface) !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; z-index: 3500 !important; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -8px 30px rgba(0,0,0,0.12) !important; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        }
        .coda-mobile-search-sheet.open { transform: translateY(0) !important; }

        #mobileSearchResults { flex: 1; overflow-y: auto; padding: 0 !important; overscroll-behavior: contain; }
        #mobileSearchResults::-webkit-scrollbar { width: 4px; }
        #mobileSearchResults::-webkit-scrollbar-thumb { background: var(--coda-border-strong); border-radius: 10px; }

        .coda-ig-menu {
            position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
            display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            width: 100% !important; margin: 0 !important;
            padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
            border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
            background: var(--coda-surface) !important;
            backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
            z-index: 4010 !important; overflow-x: hidden !important;
            overscroll-behavior-inline: none !important; scroll-snap-type: none !important;
            touch-action: manipulation !important;
            mask-image: none !important; -webkit-mask-image: none !important;
        }
        .coda-ig-menu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--coda-border); pointer-events: none; }
        .coda-ig-menu::after { display: none !important; content: none !important; }

        .ig-menu-item { background: transparent !important; border-radius: 0 !important; padding: 4px 0 !important; gap: 4px !important; min-width: 0 !important; width: auto !important; max-width: none !important; flex: none !important; scroll-snap-align: none !important; }
        .ig-menu-item:hover { background: transparent !important; }
        .ig-menu-item i, .ig-menu-item.active i, .ig-menu-item:hover i { transform: none !important; font-size: 24px !important; }
        .ig-menu-item span { font-size: 10px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
        .ig-menu-item.active { background: transparent !important; }
        .ig-menu-item.active i, .ig-menu-item.active span { color: var(--coda-blue) !important; }

        .coda-detail-panel { scrollbar-width: none !important; -ms-overflow-style: none !important; }
        .coda-detail-panel::-webkit-scrollbar,
        .coda-detail-body::-webkit-scrollbar,
        .coda-list-wrapper::-webkit-scrollbar,
        #centerListContainer::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
      }

      /* UI Progress Baru (Apple Style - Edge to Edge) */
      .progress-layout { display:flex; flex-direction:column; height:100%; width:100%; }
      .progress-section { padding: 16px 0; background: var(--coda-surface); }

      .tracking-container { display: flex; justify-content: space-between; position: relative; margin: 10px 0; padding: 0 20px; }
      .tracking-line { position: absolute; top: 16px; left: 38px; right: 38px; height: 4px; background: var(--coda-border-strong); z-index: 1; border-radius: 4px; overflow: hidden; margin: 0; padding-left: 0; }
      .tracking-line-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--coda-blue); transition: width 0.4s ease; }

      .tracking-step { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; padding: 0; }
      .tracking-step.step-1 { align-items: flex-start; text-align: left; }
      .tracking-step.step-2 { align-items: center; text-align: center; }
      .tracking-step.step-3 { align-items: flex-end; text-align: right; }

      .tracking-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--coda-surface); border: 3px solid var(--coda-border-strong); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--coda-muted); transition: all 0.3s; margin-bottom: 10px; box-sizing: border-box; }
      .tracking-step.done .tracking-icon { background: var(--coda-blue); border-color: var(--coda-blue); color: white; box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
      .tracking-step.active .tracking-icon { background: var(--coda-surface); border-color: var(--coda-blue); color: var(--coda-blue); box-shadow: 0 0 0 4px rgba(0,113,227,0.15); }
      .tracking-step .ttl { font-size: 11px; font-weight: 800; color: var(--coda-text); line-height: 1.2; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }

      /* iMessage/WA UI */
      .imsg-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; background: var(--coda-bg); }
      .imsg-thread::-webkit-scrollbar { display: none; }
      .imsg-bubble-row { display: flex; width: 100%; margin-bottom: 2px; flex-direction: column; }
      .imsg-bubble-row.me { align-items: flex-end; }
      .imsg-bubble-row.other { align-items: flex-start; }
      .imsg-bubble { max-width: 75%; padding: 8px 14px; font-size: 15px; line-height: 1.35; position: relative; word-wrap: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
      .imsg-bubble.me { background: #007aff; color: #fff; border-radius: 18px 4px 4px 18px; }
      .imsg-bubble-row.me:first-child .imsg-bubble { border-top-right-radius: 18px; }
      .imsg-bubble-row.me:last-child .imsg-bubble { border-bottom-right-radius: 18px; margin-bottom: 8px; }
      .imsg-bubble.other { background: #e9e9eb; color: #000; border-radius: 4px 18px 18px 4px; }
      [data-theme="dark"] .imsg-bubble.other { background: #262628; color: #fff; }
      .imsg-bubble-row.other:first-child .imsg-bubble { border-top-left-radius: 18px; }
      .imsg-bubble-row.other:last-child .imsg-bubble { border-bottom-left-radius: 18px; margin-bottom: 8px; }
      .imsg-sender { font-size: 11px; color: var(--coda-muted); margin-bottom: 4px; margin-left: 12px; margin-right: 12px; }
      .imsg-bubble-row.me .imsg-sender { display: none; }

      .imsg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
      .imsg-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 14px; font-size: 12px; font-weight: 600; text-decoration: none; }
      .imsg-bubble.me .imsg-file { background: rgba(255,255,255,0.2); color: #fff; }
      .imsg-bubble.other .imsg-file { background: rgba(0,0,0,0.05); color: #007aff; }
      [data-theme="dark"] .imsg-bubble.other .imsg-file { background: rgba(255,255,255,0.1); }
      .imsg-meta { font-size: 9px; margin-top: 4px; opacity: 0.7; text-align: right; }

      /* New WA Style (Blue Theme) -> Glassmorphism Capsule Update */
      .imsg-composer-wrap { display: flex; flex-direction: column; background: transparent; padding: 8px 16px max(20px, env(safe-area-inset-bottom)); z-index: 10; position: sticky; bottom: 0; }
      .imsg-composer { display: flex; align-items: center; width: 100%; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 99px; padding: 6px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); gap: 4px; }
      [data-theme="dark"] .imsg-composer { background: rgba(28, 28, 30, 0.65); border-color: rgba(255, 255, 255, 0.15); }
      .imsg-plus-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--coda-muted); background: transparent; border: none; font-size: 24px; cursor: pointer; padding:0; margin:0; transition: all 0.2s; flex-shrink: 0; }
      .imsg-plus-btn:hover { color: var(--coda-blue); background: var(--coda-surface-hover); }
      .imsg-input-wrap { flex: 1; display: flex; align-items: center; background: transparent; padding: 0 4px; }
      .imsg-input { flex: 1; border: none; background: transparent; outline: none; font-size: 15px; color: var(--coda-text); padding: 8px 0; margin: 0; box-shadow: none !important; }
      .imsg-input::placeholder { color: var(--coda-muted); }
      .imsg-send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--coda-blue); color: white; border: none; display: grid; place-items: center; cursor: pointer; font-size: 20px; padding:0; margin:0; transition: all 0.2s; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0, 113, 227, 0.3); }
      .imsg-send-btn:hover { background: var(--coda-blue-hover); transform: scale(1.05); }

      /* Upload Progress Bar CSS */
      .chat-upload-progress-container { width: 100%; height: 4px; background: var(--coda-border-strong); border-radius: 2px; margin-bottom: 8px; overflow: hidden; display: none; }
      .chat-upload-progress-bar { height: 100%; width: 0%; background: var(--coda-blue); transition: width 0.1s ease; }
      .chat-upload-text { font-size: 10px; color: var(--coda-muted); text-align: center; margin-bottom: 6px; display: none; }

      .coda-quick-approve { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; background: rgba(52, 199, 89, 0.15); color: var(--coda-success); display: grid; place-items: center; cursor: pointer; transition: all 0.2s ease; border: 1px solid rgba(52, 199, 89, 0.3); }
      .coda-quick-approve:hover { background: var(--coda-success); color: white; transform: scale(1.05); }
      .coda-quick-approve i { font-size: 16px; }

      .admin-report-shell { container: admin-workspace / inline-size; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; padding: 0; gap: 0; overflow: hidden; background: var(--coda-panel-surface); color: var(--coda-text); }
      .admin-report-shell:has(> .admin-report-section, > .admin-report-table-wrap) { overflow: auto; }
      .admin-report-toolbar { box-sizing: border-box; display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(128px, 1.35fr) minmax(108px, .9fr) minmax(108px, .9fr) minmax(120px, 1.05fr) minmax(74px, .62fr) minmax(56px, .45fr) minmax(60px, .5fr); gap: 0; align-items: stretch; padding: 0; border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); flex: 0 0 auto; overflow: hidden; }
      .admin-report-toolbar.has-staff { grid-template-columns: minmax(128px, 1.3fr) minmax(108px, .9fr) minmax(108px, .9fr) minmax(120px, 1.05fr) minmax(76px, .68fr) minmax(74px, .62fr) minmax(56px, .45fr) minmax(60px, .5fr); }
      .admin-report-toolbar.is-compact { grid-template-columns: minmax(180px, 1fr) minmax(74px, auto) minmax(56px, auto) minmax(56px, auto) minmax(60px, auto); }
      .admin-report-toolbar > input, .admin-report-toolbar > select, .admin-report-toolbar > button { box-sizing: border-box; align-self: stretch; height: 44px !important; min-height: 44px !important; max-height: 44px !important; min-width: 0; margin: 0 !important; border: 0; border-right: 1px solid var(--coda-border); border-radius: 0 !important; color: var(--coda-text); font: inherit; font-size: 11px !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; outline: none; vertical-align: middle; }
      .admin-report-toolbar > :last-child { border-right: 0; }
      .admin-report-toolbar > input, .admin-report-toolbar > select { background-color: var(--coda-panel-surface) !important; }
      .admin-report-toolbar > input, .admin-report-toolbar > button { padding-left: 10px; padding-right: 10px; }
      .admin-report-toolbar > input[type="date"], .admin-report-toolbar > input[type="month"] { font-variant-numeric: tabular-nums; cursor: pointer; }
      .admin-report-toolbar > input[type="date"]::-webkit-calendar-picker-indicator, .admin-report-toolbar > input[type="month"]::-webkit-calendar-picker-indicator { margin: 0; cursor: pointer; }
      .admin-report-toolbar input:focus, .admin-report-toolbar select:focus { box-shadow: inset 0 -2px 0 var(--coda-blue); }
      .admin-report-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--coda-panel-surface); cursor: pointer; white-space: nowrap; font-weight: 700; }
      .admin-report-toolbar button.primary { background: var(--coda-blue); border-color: var(--coda-blue); color: #fff; }
      .admin-report-toolbar button:hover { border-color: var(--coda-blue); color: var(--coda-blue); }
      .admin-report-toolbar button.primary:hover { color: #fff; background: var(--coda-blue-hover); }
      .admin-report-toolbar > :disabled { opacity: .42; cursor: default; }
      .admin-report-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; min-height: 34px; padding: 7px 12px; box-sizing: border-box; border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); color: var(--coda-muted); font-size: 10px; flex: 0 0 auto; }
      .admin-report-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-report-meta > span:nth-child(2) { text-align: center; }
      .admin-report-meta > span:last-child { text-align: right; }
      .admin-report-meta strong { color: var(--coda-text); font-weight: 700; }
      .admin-report-sections { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0; min-width: 0; min-height: 0; overflow: auto; background: var(--coda-panel-surface); }
      .admin-report-section { flex: 0 0 auto; border: 0; border-bottom: 1px solid var(--coda-border); background: var(--coda-surface); overflow: visible; }
      .admin-report-section:last-child { border-bottom: 0; }
      .admin-report-section h3 { position: sticky; top: 0; z-index: 3; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); font-size: 11px; line-height: 1.3; color: var(--coda-text); }
      .admin-report-table-wrap { width: 100%; max-width: 100%; overflow: visible; }
      .admin-report-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10px; white-space: nowrap; }
      .admin-report-table th, .admin-report-table td { padding: 7px 9px; border-right: 1px solid var(--coda-border); border-bottom: 1px solid var(--coda-border); text-align: left; vertical-align: top; }
      .admin-report-table th { position: sticky; top: 0; z-index: 2; background: var(--coda-bg); color: var(--coda-text); font-weight: 700; }
      .admin-report-table tbody tr { height: 36px; }
      .admin-report-section .admin-report-table th { top: 34px; }
      .admin-report-table tr:last-child td { border-bottom: 0; }
      .admin-report-table th:last-child, .admin-report-table td:last-child { border-right: 0; }
      .admin-report-empty, .admin-report-loading { display: grid; flex: 1 1 auto; place-items: center; min-height: 260px; padding: 30px; color: var(--coda-muted); text-align: center; font-size: 12px; }
      .admin-report-loading i { display: block; margin: 0 auto 12px; color: var(--coda-blue); font-size: 34px; }
      .admin-report-staff-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow: hidden; border: 1px solid var(--coda-border-strong); border-radius: 9px; background: var(--coda-surface); color: var(--coda-text); box-shadow: 0 24px 80px rgba(0,0,0,.34); }
      .admin-report-staff-dialog::backdrop { background: rgba(0,0,0,.56); backdrop-filter: blur(4px); }
      .admin-license-popup { width: min(700px, calc(100vw - 28px)); }
      .admin-license-popup .admin-report-staff-body { padding: 0; }
      .admin-license-price-input {
        box-sizing: border-box; width: min(160px,100%); min-height: 36px; margin: 0; padding: 0 10px;
        border: 1px solid var(--coda-border); border-radius: 0 !important; background: var(--coda-panel-surface);
        color: var(--coda-text); font: inherit; font-size: 11px;
      }
      .admin-license-price-input:focus { outline: 2px solid var(--coda-blue); outline-offset: -2px; }
      .admin-license-price-workspace .admin-license-action-strip > button {
        width: 44px; min-width: 44px; min-height: 44px; font-size: 16px;
      }
      .admin-inbox-list { min-width: 0; }
      .admin-inbox-row {
        box-sizing: border-box; display: grid; grid-template-columns: 36px minmax(0,1fr) auto;
        width: 100%; min-height: 64px; align-items: center; gap: 10px; margin: 0; padding: 10px 12px;
        border: 0; border-bottom: 1px solid rgba(255,255,255,.16); border-radius: 0;
        background: rgba(8,49,111,.3); color: #fff; font: inherit; text-align: left; cursor: pointer;
      }
      .admin-inbox-row:hover, .admin-inbox-row.active-list-item { background: rgba(8,49,111,.48); }
      .admin-inbox-row:focus-visible { outline: 2px solid var(--coda-blue); outline-offset: -2px; }
      .admin-inbox-row-icon {
        display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px;
        background: rgba(255,255,255,.94); color: var(--coda-blue); font-size: 18px;
      }
      .admin-inbox-row-icon i, .admin-inbox-row-icon i::before {
        color: var(--coda-blue) !important; -webkit-text-fill-color: var(--coda-blue) !important;
      }
      .admin-inbox-row-copy { display: grid; min-width: 0; gap: 3px; }
      .admin-inbox-row-copy strong, .admin-inbox-row-copy > span {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .admin-inbox-row-copy strong { font-size: 12px; font-weight: 600; }
      .admin-inbox-row-copy > span, .admin-inbox-row > time { font-size: 10px; opacity: .78; }
      .admin-inbox-detail { min-width: 0; padding: 0 16px 16px; color: var(--coda-text); }
      .admin-inbox-detail-status {
        display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px;
        border-bottom: 1px solid var(--coda-border); font-size: 11px;
      }
      .admin-inbox-detail-status > time { color: var(--coda-muted); }
      .admin-inbox-detail h3 { margin: 16px 0 8px; font-size: 17px; font-weight: 650; }
      .admin-inbox-detail p { margin: 0 0 16px; color: var(--coda-muted); font-size: 12px; line-height: 1.55; }
      .admin-inbox-detail dl { margin: 0 0 18px; border-top: 1px solid var(--coda-border); }
      .admin-inbox-detail dl > div {
        display: grid; grid-template-columns: minmax(92px,34%) minmax(0,1fr); gap: 10px;
        padding: 12px 0; border-bottom: 1px solid var(--coda-border); font-size: 12px;
      }
      .admin-inbox-detail dt { color: var(--coda-muted); }
      .admin-inbox-detail dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
      .admin-inbox-open {
        display: inline-flex; min-height: 44px; align-items: center; gap: 9px; padding: 0 14px;
        border: 0; border-radius: 0; background: var(--coda-blue); color: #fff;
        font: inherit; font-size: 12px; cursor: pointer;
      }
      .admin-inbox-open:hover { filter: brightness(.92); }
      .admin-inbox-open:focus-visible { outline: 2px solid var(--coda-blue); outline-offset: 2px; }
      .admin-inbox-detail .admin-inbox-no-access { margin-top: 12px; }
      .admin-license-popup-actions { display: flex; align-items: center; gap: 6px; }
      .admin-license-popup-actions button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--coda-border); border-radius: 8px; background: transparent; color: var(--coda-muted); cursor: pointer; }
      .admin-license-popup-actions button:hover { color: var(--coda-blue); background: var(--coda-blue-bg); }
      .admin-license-popup-actions button[type="submit"] { background: var(--coda-blue); border-color: var(--coda-blue); color: #fff; }
      .admin-license-popup-actions button[type="submit"]:hover { background: var(--coda-blue-hover); color: #fff; }
      .admin-license-popup .admin-report-staff-status { margin: 0; padding: 10px 12px; border-top: 1px solid var(--coda-border); }
      .admin-license-popup .admin-license-editor { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .admin-license-popup #licPos { grid-column: 1 / -1; }
      .admin-license-workspace .admin-report-table tr:last-child td { border-bottom: 1px solid var(--coda-border); }
      .admin-report-staff-head { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--coda-border); }
      .admin-report-staff-head strong { font-size: 12px; }
      .admin-report-staff-close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--coda-text); cursor: pointer; }
      .admin-report-staff-close:hover { background: var(--coda-blue-bg); color: var(--coda-blue); }
      .admin-report-staff-body { max-height: calc(100vh - 120px); overflow: auto; padding: 16px; }
      .admin-report-staff-fields { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px 12px; }
      .admin-report-staff-fields label, .admin-report-staff-sections-title { font-size: 10px; font-weight: 700; }
      .admin-report-staff-fields select { width: 100%; height: 34px; border: 1px solid var(--coda-border-strong); border-radius: 6px; background: var(--coda-bg); color: var(--coda-text); padding: 0 8px; }
      .admin-report-staff-sections-title { margin-top: 16px; }
      .admin-report-staff-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 8px; }
      .admin-report-staff-sections label { display: flex; align-items: flex-start; gap: 7px; min-width: 0; padding: 3px 0; font-size: 9px; line-height: 1.35; }
      .admin-report-staff-sections input { flex: 0 0 auto; margin-top: 1px; }
      .admin-report-staff-status { min-height: 18px; margin-top: 8px; color: var(--coda-muted); font-size: 9px; }
      .admin-report-staff-actions { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
      .admin-report-staff-actions .spacer { flex: 1; }
      .admin-report-staff-actions button { height: 32px; padding: 0 13px; border: 1px solid var(--coda-border-strong); border-radius: 6px; background: var(--coda-surface); color: var(--coda-text); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
      .admin-report-staff-actions button.primary { border-color: var(--coda-blue); background: var(--coda-blue); color: #fff; }

      .admin-revenue-center { min-height: 100%; background: transparent; }
      .admin-revenue-shell { container: admin-revenue / inline-size; display: flex; flex-direction: column; min-height: 100%; padding: 0; color: var(--coda-text); }
      .admin-revenue-toolbar { box-sizing: border-box; display: flex; width: 100%; max-width: 100%; min-width: 0; align-items: stretch; justify-content: space-between; gap: 0; height: 44px; min-height: 44px; padding: 0; overflow: hidden; border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); }
      .admin-revenue-toolbar-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; justify-content: center; padding: 0 16px; }
      .admin-revenue-toolbar-copy strong { display: block; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }
      .admin-revenue-toolbar-copy span { display: block; margin-top: 2px; color: var(--coda-muted); font-size: 11px; line-height: 14px; }
      .admin-revenue-controls { display: flex; align-items: stretch; gap: 0; flex: 0 0 auto; border-left: 1px solid var(--coda-border); }
      .admin-revenue-controls input, .admin-revenue-controls button { box-sizing: border-box; height: 43px !important; min-height: 43px !important; max-height: 43px !important; margin: 0 !important; border: 0 !important; border-right: 1px solid var(--coda-border) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--coda-text); font: inherit; font-size: 10px; outline: none; }
      .admin-revenue-controls input { width: 112px !important; padding: 0 8px !important; }
      .admin-revenue-controls input[type="date"] { color-scheme: light; }
      [data-theme="dark"] .admin-revenue-controls input[type="date"] { color-scheme: dark; }
      .admin-revenue-controls button { min-width: 34px; padding: 0 9px; cursor: pointer; font-weight: 700; }
      .admin-revenue-controls button:last-child { border-right: 0 !important; }
      .admin-revenue-controls button:hover, .admin-revenue-controls button.active { color: var(--coda-blue); background: var(--coda-blue-bg) !important; }
      .admin-revenue-chart-tabs { display: inline-flex; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--coda-border); border-radius: 0; background: transparent; flex-shrink: 0; }
      .admin-revenue-chart-tabs button { height: 28px; min-width: 48px; padding: 0 8px; border: 0; border-right: 1px solid var(--coda-border); border-radius: 0; background: transparent; color: var(--coda-muted); font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
      .admin-revenue-chart-tabs button:last-child { border-right: 0; }
      .admin-revenue-chart-tabs button:hover, .admin-revenue-chart-tabs button.active { background: var(--coda-blue-bg); color: var(--coda-blue); }
      @container admin-revenue (max-width: 380px) {
        .admin-revenue-toolbar-copy { padding-left: 10px; padding-right: 10px; }
        .admin-revenue-controls input { width: 38px !important; min-width: 38px; padding: 0 6px !important; color: transparent; }
        .admin-revenue-controls input::-webkit-datetime-edit { display: none; }
        .admin-revenue-controls input::-webkit-calendar-picker-indicator { margin: auto; cursor: pointer; opacity: .9; }
        .admin-revenue-controls button { min-width: 36px; padding: 0 6px; }
      }
      .admin-revenue-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-kpi { min-width: 0; padding: 12px 10px; border-right: 1px solid var(--coda-border); border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-kpi:nth-child(2n) { border-right: 0; }
      .admin-revenue-kpi:nth-last-child(-n+2) { border-bottom: 0; }
      .admin-revenue-kpi-label { color: var(--coda-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .35px; }
      .admin-revenue-kpi-value { margin-top: 5px; overflow: hidden; color: var(--coda-text); font-size: 16px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
      .admin-revenue-kpi-note { margin-top: 4px; color: var(--coda-muted); font-size: 9px; }
      .admin-revenue-positive { color: #1ca86f !important; }
      .admin-revenue-negative { color: #e5484d !important; }
      .admin-revenue-chart-section { padding: 12px 14px; border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
      .admin-revenue-section-head strong { display: block; font-size: 11px; }
      .admin-revenue-section-head span { color: var(--coda-muted); font-size: 9px; }
      .admin-revenue-candle-wrap { position: relative; width: 100%; height: 330px; min-height: 330px; overflow: hidden; }
      .admin-revenue-candle-wrap canvas { width: 100%; height: 330px; display: block; }
      .admin-revenue-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 8px; border: 1px solid var(--coda-border); background: var(--coda-border); }
      .admin-revenue-legend-item { min-width: 0; padding: 7px 8px; background: var(--coda-surface); }
      .admin-revenue-legend-item span { display: block; color: var(--coda-muted); font-size: 8px; text-transform: uppercase; }
      .admin-revenue-legend-item strong { display: block; margin-top: 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
      .admin-revenue-composition { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; }
      .admin-revenue-pie { width: 170px; height: 170px; display: block; }
      .admin-revenue-source-list { display: flex; flex-direction: column; min-width: 0; }
      .admin-revenue-source-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--coda-border); font-size: 10px; }
      .admin-revenue-source-row:last-child { border-bottom: 0; }
      .admin-revenue-source-dot { width: 8px; height: 8px; border-radius: 2px; }
      .admin-revenue-source-row span { color: var(--coda-muted); }
      .admin-revenue-source-row strong { color: var(--coda-text); }
      .admin-revenue-locations { display: flex; flex-direction: column; min-height: 100%; background: var(--coda-surface); color: var(--coda-text); }
      .admin-revenue-location-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-location-summary > div { min-width: 0; padding: 12px; border-right: 1px solid var(--coda-border); }
      .admin-revenue-location-summary > div:nth-child(2n) { border-right: 0; }
      .admin-revenue-location-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-location-summary span { display: block; color: var(--coda-muted); font-size: 8px; text-transform: uppercase; }
      .admin-revenue-location-summary strong { display: block; margin-top: 4px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
      .admin-revenue-location-list { min-height: 0; overflow-y: auto; }
      .admin-revenue-location-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(112px, .68fr) minmax(84px, auto); gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--coda-border); cursor: pointer; transition: background .16s ease; }
      .admin-revenue-location-row:hover, .admin-revenue-location-row.selected { background: var(--coda-blue-bg); }
      .admin-revenue-location-copy { min-width: 0; }
      .admin-revenue-location-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11px; font-weight: 750; }
      .admin-revenue-location-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-revenue-location-dot { width: 7px; height: 7px; border-radius: 50%; background: #1ca86f; flex-shrink: 0; }
      .admin-revenue-location-dot.offline { background: #e5484d; }
      .admin-revenue-location-meta { margin-top: 4px; color: var(--coda-muted); font-size: 9px; line-height: 1.4; }
      .admin-revenue-location-value { min-width: 88px; text-align: right; }
      .admin-revenue-location-value strong { display: block; font-size: 11px; }
      .admin-revenue-location-value span { display: block; margin-top: 4px; font-size: 9px; }
      .admin-revenue-location-value small { display: block; margin-top: 4px; color: var(--coda-muted); font-size: 8px; font-weight: 650; }
      .admin-revenue-location-periods { margin-top: 4px; color: var(--coda-muted); font-size: 8px; line-height: 1.45; }
      .admin-revenue-location-market { display: block; min-width: 0; }
      .admin-revenue-mini-chart { display: block; width: 112px; height: 42px; overflow: visible; }
      .admin-revenue-mini-grid { stroke: var(--coda-border); stroke-width: .7; stroke-dasharray: 2 3; }
      .admin-revenue-mini-empty { width: 112px; height: 42px; display: grid; place-items: center; color: var(--coda-muted); font-size: 8px; border-bottom: 1px dashed var(--coda-border); }
      .admin-revenue-location-calc { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; color: var(--coda-muted); font-size: 7px; line-height: 1.2; white-space: nowrap; }
      .admin-revenue-location-calc strong { color: var(--coda-text); font-size: 7px; }
      .admin-revenue-location-list.view-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-content: start; gap: 1px; padding: 1px 0 0; overflow: visible; background: var(--coda-border); }
      .admin-revenue-location-list.view-card .admin-revenue-location-row { min-height: 112px; border: 0; background: var(--coda-surface); }
      .admin-revenue-location-list.view-card .admin-revenue-location-row:hover, .admin-revenue-location-list.view-card .admin-revenue-location-row.selected { background: var(--coda-blue-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coda-blue) 48%, transparent); }
      .admin-revenue-expanded-locations { border-top: 1px solid var(--coda-border); background: var(--coda-surface); }
      .admin-revenue-expanded-locations-head { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); }
      .admin-revenue-expanded-locations-head strong { font-size: 11px; }
      .admin-revenue-expanded-locations-head span { color: var(--coda-muted); font-size: 9px; }
      .admin-revenue-location-detail { min-height: 100%; background: var(--coda-surface); color: var(--coda-text); }
      .admin-revenue-location-detail .admin-revenue-mini-chart { width: 100%; height: 156px; padding: 12px 14px; }
      .admin-revenue-location-detail .admin-revenue-mini-empty { width: 100%; height: 156px; border-bottom: 0; }
      .admin-revenue-location-detail-head { padding: 14px 16px; border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-location-detail-head strong { display: block; font-size: 14px; }
      .admin-revenue-location-detail-head span { display: block; margin-top: 4px; color: var(--coda-muted); font-size: 10px; }
      .coda-mobile-form-body.admin-revenue-location-detail-host {
        display: block; flex: 1 1 auto; min-height: 0; overflow-x: hidden;
        overflow-y: auto !important; overscroll-behavior-y: contain;
        touch-action: pan-y; -webkit-overflow-scrolling: touch;
      }
      .admin-revenue-location-detail-host .admin-revenue-location-detail {
        min-height: 0; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
      }
      .admin-revenue-focus-host { position: relative; min-height: 0; padding: 0 !important; overflow: hidden !important; }
      .coda-form-panel.admin-revenue-focus-panel .coda-form-head { display: none; }
      .admin-revenue-focus { --coda-text: #fff; --coda-muted: rgba(255,255,255,.72); --coda-border-strong: rgba(255,255,255,.24); position: relative; isolation: isolate; display: grid; min-height: 100%; height: 100%; overflow: hidden; background: #238fe8; color: #fff; }
      [data-theme="dark"] .admin-revenue-focus { background: #2d3842; }
      .admin-revenue-focus-clouds { position: absolute; inset: 0; z-index: -2; overflow: hidden; opacity: .84; pointer-events: none; }
      .admin-revenue-focus-clouds canvas { display: block; width: 100%; height: 100%; }
      .admin-revenue-focus::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,23,43,.12), rgba(3,23,43,.36)); pointer-events: none; }
      [data-theme="dark"] .admin-revenue-focus::after { background: linear-gradient(180deg, rgba(5,10,15,.16), rgba(5,10,15,.48)); }
      .admin-revenue-focus-content { box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; width: min(1420px, 100%); height: 100%; min-height: 0; margin: 0 auto; padding: 46px 52px 34px; }
      .admin-revenue-focus-heading { align-self: start; min-width: 0; text-shadow: 0 2px 16px rgba(0,0,0,.24); }
      .admin-revenue-focus-heading span { display: block; font-size: 12px; font-weight: 750; text-transform: uppercase; }
      .admin-revenue-focus-heading strong { display: block; margin-top: 0; overflow-wrap: anywhere; font-size: 42px; line-height: 1.08; }
      .admin-revenue-focus-heading small { display: block; margin-top: 8px; font-size: 11px; opacity: .82; }
      .admin-revenue-focus-chart { position: relative; min-height: 280px; overflow: hidden; }
      .admin-revenue-focus-chart canvas { display: block; width: 100%; height: 100%; min-height: 280px; }
      .admin-revenue-focus-close { position: absolute; top: 14px; right: 14px; z-index: 4; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(7,24,39,.18); color: #fff; cursor: pointer; backdrop-filter: blur(8px); }
      .admin-revenue-focus-close:hover { background: rgba(7,24,39,.34); }
      .admin-revenue-focus-close i { font-size: 18px; }
      @media (max-width: 700px) {
        .admin-revenue-focus-content { gap: 16px; padding: 28px 18px 20px; }
        .admin-revenue-focus-heading strong { font-size: 30px; }
      }

      .admin-transaction-shell { container: admin-workspace / inline-size; display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; height: 100%; min-height: 0; padding: 0; gap: 0; overflow: hidden; background: var(--coda-panel-surface); color: var(--coda-text); }
      .admin-transaction-meta { box-sizing: border-box; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; min-height: 34px; padding: 7px 12px; border-bottom: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 10px; }
      .admin-transaction-meta > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-transaction-meta strong { color: var(--coda-text); font-size: 12px; }
      .admin-transaction-table-wrap { box-sizing: border-box; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; max-height: none; overflow: auto; border: 0; background: var(--coda-surface); }
      .admin-transaction-table { min-width: 4680px; width: 100%; border-collapse: collapse; table-layout: fixed; white-space: nowrap; font-size: 10px; }
      .admin-transaction-table th, .admin-transaction-table td { height: 30px; padding: 6px 8px; border-right: 1px solid var(--coda-border); border-bottom: 1px solid var(--coda-border); overflow: hidden; text-overflow: ellipsis; text-align: left; vertical-align: middle; }
      .admin-transaction-table th { position: sticky; top: 0; z-index: 2; background: var(--coda-bg); color: var(--coda-text); font-weight: 700; }
      .admin-transaction-table th:last-child, .admin-transaction-table td:last-child { border-right: 0; }
      .admin-transaction-table tbody tr { cursor: pointer; transition: background .15s ease; }
      .admin-transaction-table tbody tr:hover, .admin-transaction-table tbody tr.selected { background: var(--coda-blue-bg); }
      .admin-transaction-table tbody tr:last-child td { border-bottom: 0; }
      .admin-invoice-row { cursor: zoom-in !important; }
      .admin-invoice-dialog {
        width: min(760px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0;
        overflow: hidden; border: 1px solid var(--coda-border-strong); border-radius: 10px;
        background: var(--coda-surface); color: var(--coda-text); box-shadow: 0 24px 80px rgba(0,0,0,.34);
      }
      .admin-invoice-dialog::backdrop { background: rgba(0,0,0,.56); backdrop-filter: blur(5px); }
      .admin-invoice-head {
        height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 0 10px 0 16px; border-bottom: 1px solid var(--coda-border); background: var(--coda-surface);
      }
      .admin-invoice-head strong { font-size: 12px; }
      .admin-invoice-actions { display: flex; align-items: center; gap: 6px; }
      .admin-invoice-actions button {
        width: 32px; height: 30px; display: grid; place-items: center; border: 1px solid var(--coda-border);
        border-radius: 7px; background: transparent; color: var(--coda-text); cursor: pointer;
      }
      .admin-invoice-actions button:hover { border-color: var(--coda-blue); color: var(--coda-blue); }
      .admin-invoice-scroll { max-height: calc(100vh - 76px); overflow: auto; padding: 18px; background: var(--coda-bg); }
      .admin-invoice-paper {
        width: min(620px, 100%); margin: 0 auto; padding: 28px; box-sizing: border-box;
        border: 1px solid rgba(0,0,0,.13); background: #fff; color: #111; font-size: 11px;
      }
      .admin-invoice-title { padding-bottom: 16px; border-bottom: 2px solid #111; text-align: center; }
      .admin-invoice-title strong { display: block; font-size: 17px; letter-spacing: 0; }
      .admin-invoice-title span { display: block; margin-top: 4px; color: #555; font-size: 10px; }
      .admin-invoice-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; padding: 18px 0; border-bottom: 1px solid #bbb; }
      .admin-invoice-field span { display: block; color: #666; font-size: 8px; font-weight: 750; text-transform: uppercase; }
      .admin-invoice-field strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 11px; }
      .admin-invoice-lines { padding: 8px 0; }
      .admin-invoice-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 10px 0; border-bottom: 1px solid #ddd; }
      .admin-invoice-line:last-child { border-bottom: 0; }
      .admin-invoice-line strong, .admin-invoice-line span { display: block; }
      .admin-invoice-line small { display: block; margin-top: 3px; color: #666; font-size: 9px; line-height: 1.45; }
      .admin-invoice-total { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; border-top: 2px solid #111; font-size: 14px; }
      .admin-invoice-status { margin-top: 14px; padding: 8px; border: 1px solid #111; text-align: center; font-weight: 800; letter-spacing: 0; }
      .admin-invoice-foot { margin-top: 18px; color: #666; font-size: 8px; text-align: center; }
      .admin-transaction-footer { box-sizing: border-box; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; min-height: 40px; padding: 0 0 0 12px; border-top: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 10px; }
      .admin-transaction-footer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-transaction-pager { align-self: stretch; display: flex; align-items: stretch; gap: 0; border-left: 1px solid var(--coda-border); }
      .admin-transaction-pager button { width: 40px; height: 100%; display: grid; place-items: center; border: 0; border-right: 1px solid var(--coda-border); border-radius: 0; background: var(--coda-panel-surface); color: var(--coda-text); cursor: pointer; }
      .admin-transaction-pager button:last-child { border-right: 0; }
      .admin-transaction-pager button:hover:not(:disabled) { border-color: var(--coda-blue); color: var(--coda-blue); }
      .admin-transaction-pager button:disabled { opacity: .35; cursor: default; }
      .admin-transaction-menu-pending { opacity: .62; cursor: default !important; }
      .admin-transaction-menu-pending .coda-info-desc { color: var(--coda-muted); }
      .admin-revenue-mobile-overview { min-height: 100%; padding: 0 0 88px; overflow-y: auto; background: transparent; color: var(--coda-text); }
      .admin-revenue-mobile-overview .admin-revenue-toolbar { align-items: stretch; flex-direction: column; height: auto; min-height: 0; }
      .admin-revenue-mobile-overview .admin-revenue-toolbar-copy { width: 100%; min-height: 44px; flex: 0 0 44px; justify-content: center; padding: 9px 16px 7px; border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-mobile-overview .admin-revenue-toolbar-copy strong { font-size: 13px; line-height: 18px; }
      .admin-revenue-mobile-overview .admin-revenue-toolbar-copy span { display: none; }
      .admin-revenue-mobile-overview .admin-revenue-controls { width: 100%; height: 44px; border-left: 0; }
      .admin-revenue-mobile-overview .admin-revenue-controls input, .admin-revenue-mobile-overview .admin-revenue-controls button { min-height: 43px; }
      .admin-revenue-mobile-overview .admin-revenue-controls input { width: auto !important; min-width: 0; flex: 1; color: var(--coda-text); }
      .admin-revenue-mobile-overview .admin-revenue-controls input::-webkit-datetime-edit { display: inline; }
      .admin-revenue-mobile-overview .admin-revenue-kpis { margin-top: 0; }
      .admin-revenue-mobile-composition { grid-template-columns: minmax(112px, .8fr) minmax(0, 1.2fr); padding: 14px 0; border-bottom: 1px solid var(--coda-border); }
      .admin-revenue-mobile-composition .admin-revenue-pie { width: min(140px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; }
      .admin-revenue-mobile-trigger {
        width: 100%; margin-top: 12px; appearance: none; -webkit-appearance: none;
        border: 1px solid var(--coda-border); background: var(--coda-surface); color: var(--coda-text);
        text-align: left; font: inherit;
      }

      .admin-license-segments {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%; min-width: 0; gap: 1px; overflow: hidden; background: var(--coda-border);
      }
      .admin-license-segments > .coda-input,
      .admin-license-segments > .coda-select {
        box-sizing: border-box !important; width: 100% !important; min-width: 0 !important;
        height: 48px !important; min-height: 48px !important; margin: 0 !important;
        padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important;
        border-radius: 0 !important; box-shadow: none !important;
        background-color: var(--coda-panel-surface) !important; font-size: 11px !important;
      }
      .admin-license-segments > .coda-input:focus,
      .admin-license-segments > .coda-select:focus {
        background: var(--coda-panel-surface) !important;
        box-shadow: inset 0 -2px 0 var(--coda-blue) !important;
      }
      .admin-license-renew {
        box-sizing: border-box; display: flex !important; align-items: center; gap: 8px;
        min-height: 44px; margin: 0 !important; padding: 0 12px; border-top: 1px solid var(--coda-border);
        border-bottom: 1px solid var(--coda-border); color: var(--coda-text) !important;
        background: var(--coda-panel-surface); font-size: 10px !important; font-weight: 600 !important;
        letter-spacing: 0 !important; text-transform: none !important;
      }
      .admin-license-products { background: var(--coda-panel-surface); }
      .admin-license-product-row {
        box-sizing: border-box; display: grid !important; grid-template-columns: 22px minmax(0,1fr) 82px;
        align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; padding: 0 0 0 12px;
        border-bottom: 1px solid var(--coda-border); color: var(--coda-text) !important;
        font-size: 10px !important; letter-spacing: 0 !important; text-transform: none !important;
      }
      .admin-license-product-row > .coda-input {
        box-sizing: border-box !important; align-self: stretch; width: 100% !important; min-width: 0; height: 43px !important; margin: 0 !important; padding: 0 10px !important;
        border: 0 !important; border-left: 1px solid var(--coda-border) !important; border-radius: 0 !important;
        box-shadow: none !important; background: var(--coda-panel-surface) !important; font-size: 11px !important;
      }
      .admin-license-product-row > .coda-input:focus {
        border-color: var(--coda-border); box-shadow: inset 0 -2px 0 var(--coda-blue);
      }
      .admin-license-actions {
        display: flex; align-items: stretch; min-height: 44px; border-bottom: 1px solid var(--coda-border);
        background: var(--coda-panel-surface);
      }
      .admin-license-actions > .coda-btn {
        min-width: 188px; min-height: 44px; margin: 0; border-radius: 0; box-shadow: none;
      }
      .admin-license-actions > span {
        display: flex; min-width: 0; flex: 1 1 auto; align-items: center; padding: 0 12px;
        border-left: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 10px;
      }
      .admin-license-action-cell { padding: 0 !important; vertical-align: stretch !important; }
      .admin-license-action-strip { display: flex; min-height: 31px; align-items: stretch; }
      .admin-license-action-strip > button {
        box-sizing: border-box; display: grid; width: 34px; min-width: 34px; min-height: 31px;
        place-items: center; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--coda-border);
        border-radius: 0; outline: 0; box-shadow: none; background: var(--coda-panel-surface);
        color: var(--coda-muted); font-size: 14px; cursor: pointer;
      }
      .admin-license-action-strip > button:last-child { border-right: 0; }
      .admin-license-action-strip > button:hover { background: var(--coda-blue-bg); color: var(--coda-blue); }
      .admin-license-action-strip > button.admin-license-action-danger:hover { color: var(--coda-danger); }
      .admin-license-editor {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
        align-items: stretch; gap: 1px; padding: 0; background: var(--coda-border);
      }
      .admin-license-editor > input[type="hidden"] { display: none; }
      .admin-license-editor > .coda-input,
      .admin-license-editor > .coda-select,
      .admin-license-editor > label,
      .admin-license-editor > .coda-btn {
        box-sizing: border-box; width: 100%; min-width: 0;
        height: var(--coda-panel-config-row, 44px); min-height: var(--coda-panel-config-row, 44px);
        margin: 0 !important; border: 0 !important; border-radius: 0 !important;
        box-shadow: none !important; background-color: var(--coda-panel-surface) !important;
        font-size: 11px !important;
      }
      .admin-license-editor > .coda-input,
      .admin-license-editor > .coda-select { padding-top: 0; padding-bottom: 0; }
      .admin-license-editor > label {
        display: flex !important; align-items: center; gap: 7px; padding: 0 12px;
        color: var(--coda-text) !important; font-size: 10px !important; font-weight: 600 !important;
        letter-spacing: 0 !important; text-transform: none !important;
      }
      .admin-license-editor > .coda-input:focus,
      .admin-license-editor > .coda-select:focus {
        border-color: var(--coda-border); background: var(--coda-panel-surface);
        box-shadow: inset 0 -2px 0 var(--coda-blue);
      }
      .admin-license-editor > .coda-btn { color: #fff !important; background: var(--coda-blue) !important; }

      .admin-payment-workspace { background: var(--coda-panel-surface); }
      .admin-payment-toolbar {
        display: flex; width: 100%; max-width: 100%; min-width: 0; flex-wrap: nowrap;
        align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
      }
      .admin-payment-toolbar::-webkit-scrollbar { display: none; }
      .admin-payment-toolbar > select, .admin-payment-toolbar > input {
        width: auto; min-width: 112px; flex: 1 1 112px;
      }
      .admin-payment-toolbar > input[type="search"] { min-width: 130px; }
      .admin-payment-toolbar > button { flex: 0 0 auto; min-width: 44px; }
      .admin-payment-toolbar > strong {
        display: flex; min-width: 180px; flex: 1 1 auto; align-items: center; gap: 7px;
        padding: 0 12px; border-right: 1px solid var(--coda-border); color: var(--coda-text);
        font-size: 10px; white-space: nowrap;
      }
      .admin-payment-summary {
        display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
        border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface);
      }
      .admin-payment-metric { min-width: 0; padding: 9px 12px; border-right: 1px solid var(--coda-border); }
      .admin-payment-metric:last-child { border-right: 0; }
      .admin-payment-metric span, .admin-payment-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-payment-metric span { color: var(--coda-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
      .admin-payment-metric strong { margin-top: 3px; color: var(--coda-text); font-size: 13px; }
      .admin-payment-ledger { flex: 1 1 auto; min-height: 0; overflow: auto; }
      .admin-payment-ledger tr[data-payment-id] { cursor: pointer; }
      .admin-payment-ledger tr[data-payment-id]:hover td { background: var(--coda-blue-bg); }
      .admin-payment-status { font-weight: 700; color: var(--coda-muted); }
      .admin-payment-status.is-paid, .admin-payment-status.is-matched { color: var(--coda-success); }
      .admin-payment-status.is-failed, .admin-payment-status.is-mismatch { color: var(--coda-danger); }
      .admin-payment-status.is-pending, .admin-payment-status.is-retry, .admin-payment-status.is-unreconciled { color: #d98b00; }
      .admin-payment-pagination {
        display: flex; min-height: 38px; align-items: stretch; justify-content: flex-end;
        border-top: 1px solid var(--coda-border); background: var(--coda-panel-surface);
      }
      .admin-payment-pagination span { display: flex; flex: 1 1 auto; align-items: center; padding: 0 12px; color: var(--coda-muted); font-size: 9px; }
      .admin-payment-pagination button {
        width: 42px; min-width: 42px; border: 0; border-left: 1px solid var(--coda-border);
        border-radius: 0; background: transparent; color: var(--coda-text); cursor: pointer;
      }
      .admin-payment-pagination button:disabled { opacity: .35; cursor: default; }
      .admin-payment-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); background: var(--coda-border); gap: 1px; }
      .admin-payment-detail-cell { min-width: 0; padding: 10px 12px; background: var(--coda-panel-surface); }
      .admin-payment-detail-cell span, .admin-payment-detail-cell strong { display: block; overflow-wrap: anywhere; }
      .admin-payment-detail-cell span { color: var(--coda-muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
      .admin-payment-detail-cell strong { margin-top: 4px; color: var(--coda-text); font-size: 11px; line-height: 1.45; }
      .admin-payment-gateway-section { border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); }
      .admin-payment-gateway-title { padding: 7px 9px; border-bottom: 1px solid var(--coda-border); font-size: 10px; font-weight: 750; }
      .admin-payment-gateway-section .admin-payment-detail-cell {
        box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
        align-items: center; gap: 8px; min-height: var(--coda-panel-config-row, 44px); padding: 7px 9px;
      }
      .admin-payment-gateway-section .admin-payment-detail-cell span { font-size: 10px; }
      .admin-payment-gateway-section .admin-payment-detail-cell strong { margin-top: 0; font-size: 10px; line-height: 1.4; }
      .admin-payment-gateway-section .admin-license-editor { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .admin-payment-gateway-section .admin-license-editor > textarea.coda-input {
        height: 92px; padding: 10px 12px; resize: vertical;
      }
      .admin-payment-workspace .admin-report-table tr:last-child td { border-bottom: 1px solid var(--coda-border); }
      .admin-payment-gateway-actions { display: flex; min-height: var(--coda-panel-config-row, 44px); align-items: stretch; border-top: 1px solid var(--coda-border); }
      .admin-payment-gateway-actions button {
        min-width: 44px; padding: 0 14px; border: 0; border-right: 1px solid var(--coda-border);
        border-radius: 0; background: transparent; color: var(--coda-text); font: inherit;
        font-size: 10px; font-weight: 700; cursor: pointer;
      }
      .admin-payment-gateway-actions button.primary { margin-left: auto; border-right: 0; background: var(--coda-blue); color: #fff; }
      /* Kolom nominal duduk di baris tombol yang sama. Tanpa ini ia melayang dengan tinggi
         sendiri dan barisnya terlihat gepeng sebelah. */
      .admin-payment-gateway-actions input {
        box-sizing: border-box; align-self: stretch; width: 128px; min-width: 128px;
        height: auto; min-height: var(--coda-panel-config-row, 44px); margin: 0; padding: 0 14px; border: 0;
        border-right: 1px solid var(--coda-border); border-radius: 0; background: transparent;
        color: var(--coda-text); font: inherit; font-size: 10px; font-weight: 700;
        outline: none; -moz-appearance: textfield;
      }
      .admin-payment-gateway-actions input::-webkit-outer-spin-button,
      .admin-payment-gateway-actions input::-webkit-inner-spin-button {
        -webkit-appearance: none; margin: 0;
      }
      .admin-doku-qr { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; padding: 12px 0; }
      .admin-doku-qr > img {
        width: 190px; height: 190px; flex: 0 0 190px; padding: 8px; background: #fff;
        border: 1px solid var(--coda-border); box-sizing: border-box;
      }
      .admin-doku-qr > .admin-payment-detail-grid {
        flex: 1 1 260px; min-width: 260px; align-content: start;
        grid-template-columns: minmax(0, 1fr);
      }
      #adminPaymentGatewayForm input:not([type="hidden"]):not([type="checkbox"]),
      #adminPaymentGatewayForm select,
      #adminPaymentGatewayForm button,
      #adminPaymentUatForm input:not([type="hidden"]):not([type="checkbox"]),
      #adminPaymentUatForm select,
      #adminPaymentUatForm button,
      #adminDokuForm input:not([type="hidden"]):not([type="checkbox"]),
      #adminDokuForm select,
      #adminDokuForm textarea,
      #adminDokuForm button,
      #adminDokuPanel input:not([type="hidden"]):not([type="checkbox"]),
      #adminDokuPanel button { border-radius: 0 !important; box-shadow: none !important; }
      #adminDokuForm input:not([type="hidden"]):not([type="checkbox"]):focus,
      #adminDokuForm select:focus,
      #adminDokuForm textarea:focus,
      #adminDokuPanel input:not([type="hidden"]):not([type="checkbox"]):focus,
      #adminPaymentGatewayForm input:not([type="hidden"]):not([type="checkbox"]):focus,
      #adminPaymentGatewayForm select:focus,
      #adminPaymentUatForm input:not([type="hidden"]):not([type="checkbox"]):focus,
      #adminPaymentUatForm select:focus {
        border-radius: 0 !important; box-shadow: inset 0 -2px 0 var(--coda-blue) !important;
      }
      .admin-payment-device-grid { display: grid; grid-template-columns: minmax(120px,1.2fr) minmax(92px,.8fr) minmax(130px,1fr) 68px; gap: 1px; background: var(--coda-border); }
      .admin-payment-device-grid.admin-payment-device-profile { grid-template-columns: minmax(120px,.8fr) minmax(220px,1.6fr) 68px; }
      .admin-payment-workspace .admin-payment-device-grid > input,
      .admin-payment-workspace .admin-payment-device-grid > select,
      .admin-payment-workspace .admin-payment-device-grid > label {
        box-sizing: border-box !important; width: 100% !important; min-width: 0;
        height: var(--coda-panel-config-row, 42px) !important;
        min-height: var(--coda-panel-config-row, 42px) !important;
        max-height: var(--coda-panel-config-row, 42px) !important; margin: 0 !important; padding: 0 10px !important;
        border: 0 !important; border-radius: 0 !important; outline: 0; box-shadow: none !important;
        background: var(--coda-panel-surface) !important; color: var(--coda-text); font-size: 10px !important;
      }
      .admin-payment-workspace .admin-payment-device-grid > input:focus {
        border-radius: 0 !important; background: var(--coda-panel-surface) !important;
        box-shadow: inset 0 -2px 0 var(--coda-blue) !important;
      }
      .admin-payment-workspace .admin-payment-device-grid > label {
        display: flex !important; align-items: center; gap: 6px; letter-spacing: 0 !important;
        text-transform: none !important;
      }
      .admin-payment-uat-result {
        display: grid; grid-template-columns: minmax(170px,.42fr) minmax(0,1.58fr);
        gap: 1px; background: var(--coda-border);
      }
      .admin-payment-uat-qr {
        display: flex; min-width: 0; align-items: center; justify-content: center;
        flex-direction: column; gap: 7px; padding: 16px; background: var(--coda-panel-surface);
      }
      .admin-payment-uat-qr img { width: min(180px,100%); aspect-ratio: 1; object-fit: contain; background: #fff; }
      .admin-payment-uat-qr > i { font-size: 62px; color: var(--coda-muted); }
      .admin-payment-uat-qr strong { font-size: 15px; color: var(--coda-text); }
      .admin-payment-uat-qr span { color: var(--coda-muted); font-size: 9px; text-align: center; }
      .admin-payment-uat-console { min-width: 0; background: var(--coda-panel-surface); }
      .admin-payment-uat-request {
        display: flex; min-height: 38px; align-items: center; border-bottom: 1px solid var(--coda-border);
      }
      .admin-payment-uat-request span { padding: 0 10px; color: var(--coda-success); font-size: 9px; font-weight: 800; }
      .admin-payment-uat-request code { overflow: hidden; color: var(--coda-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
      .admin-payment-uat-responses { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--coda-border); }
      .admin-payment-uat-responses article { min-width: 0; background: var(--coda-panel-surface); }
      .admin-payment-uat-responses header { display: flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 9px; border-bottom: 1px solid var(--coda-border); }
      .admin-payment-uat-responses header span { color: var(--coda-success); font-size: 8px; font-weight: 800; }
      .admin-payment-uat-responses header strong { min-width: 0; flex: 1; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
      .admin-payment-uat-responses header b { color: var(--coda-blue); font-size: 8px; }
      .admin-payment-uat-responses pre { min-height: 118px; margin: 0; padding: 10px; overflow: auto; color: var(--coda-muted); font: 8px/1.55 ui-monospace,Consolas,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
      @media (max-width: 620px) {
        .admin-payment-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
        .admin-payment-metric:nth-child(2) { border-right: 0; }
        .admin-payment-metric:nth-child(-n+2) { border-bottom: 1px solid var(--coda-border); }
        .admin-payment-detail-grid { grid-template-columns: minmax(0,1fr); }
        .admin-payment-gateway-section .admin-license-editor { grid-template-columns: minmax(0,1fr); }
        .admin-payment-device-grid { grid-template-columns: minmax(0,1fr) minmax(90px,.6fr); }
        .admin-payment-device-grid.admin-payment-device-profile { grid-template-columns: minmax(0,1fr); }
        .admin-payment-uat-result { grid-template-columns: minmax(0,1fr); }
        .admin-payment-uat-responses { grid-template-columns: minmax(0,1fr); }
      }

      .admin-web-user-workspace { background: var(--coda-panel-surface); }
      .admin-web-user-popup { --coda-master-on-blue: #fff; width: min(720px, calc(100vw - 28px)); }
      .admin-web-user-popup .admin-report-staff-body { padding: 0; max-height: calc(100dvh - 100px); }
      .admin-web-user-popup .admin-web-user-editor { border-bottom: 0; }
      .admin-web-user-popup .admin-web-user-checks,
      .admin-web-user-popup .admin-web-user-permissions { max-height: none; overflow: visible; }
      .admin-web-user-popup .admin-web-user-checks label span { white-space: normal; line-height: 1.35; }
      .admin-web-user-popup .admin-report-staff-status { margin: 0; padding: 10px 12px; border-top: 1px solid var(--coda-border); }
      .admin-web-user-workspace .admin-report-table tr:last-child td { border-bottom: 1px solid var(--coda-border); }
      .admin-web-user-workspace .admin-report-table .admin-web-user-group-row td {
        background: color-mix(in srgb, var(--coda-blue) 10%, var(--coda-panel-surface));
        color: var(--coda-text); font-weight: 700; padding: 11px 14px;
      }
      .admin-web-user-workspace .admin-report-table .admin-web-user-group-row i { color: var(--coda-blue); margin-right: 6px; }
      .admin-web-user-workspace .admin-report-table .admin-web-user-child { padding-left: 18px; position: relative; }
      .admin-web-user-workspace .admin-report-table .admin-web-user-child::before {
        content: ""; position: absolute; left: 4px; top: 2px; bottom: 2px;
        width: 9px; border-left: 1px solid var(--coda-blue); border-bottom: 1px solid var(--coda-blue);
      }
      .admin-web-user-workspace .admin-report-table tr.selected > td { background: color-mix(in srgb, var(--coda-blue) 14%, var(--coda-panel-surface)); }
      .admin-web-user-toolbar { grid-template-columns: minmax(140px,1fr) minmax(90px,auto) 44px; }
      .admin-web-user-summary {
        display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--coda-border);
        background: var(--coda-panel-surface);
      }
      .admin-web-user-metric { min-width: 0; padding: 9px 12px; border-right: 1px solid var(--coda-border); }
      .admin-web-user-metric:last-child { border-right: 0; }
      .admin-web-user-metric span, .admin-web-user-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-web-user-metric span { color: var(--coda-muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
      .admin-web-user-metric strong { margin-top: 3px; color: var(--coda-text); font-size: 13px; }
      .admin-web-user-editor { border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); }
      .admin-web-user-editor-grid {
        display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; padding: 0;
        background: var(--coda-border); border-bottom: 1px solid var(--coda-border);
      }
      .admin-web-user-editor-grid > input[type="hidden"] { display: none !important; }
      .admin-web-user-workspace .admin-web-user-editor-grid > input:not([type="hidden"]),
      .admin-web-user-workspace .admin-web-user-editor-grid > select {
        box-sizing: border-box !important; width: 100% !important; min-width: 0 !important;
        height: 44px !important; min-height: 44px !important; max-height: 44px !important;
        margin: 0 !important; padding: 0 10px !important; border: 0 !important;
        border-radius: 0 !important; outline: 0 !important; box-shadow: none !important;
        background-color: var(--coda-panel-surface) !important; color: var(--coda-text) !important;
        font-family: inherit !important; font-size: 11px !important; line-height: 1 !important;
      }
      .admin-web-user-workspace .admin-web-user-editor-grid > select { padding-right: 32px !important; }
      .admin-web-user-workspace .admin-web-user-editor-grid > input[readonly] {
        background-color: color-mix(in srgb, var(--coda-panel-surface) 86%, var(--coda-bg)) !important;
        color: var(--coda-muted) !important;
      }
      .admin-web-user-workspace .admin-web-user-editor-grid > input:not([type="hidden"]):focus,
      .admin-web-user-workspace .admin-web-user-editor-grid > select:focus {
        border: 0 !important; border-radius: 0 !important;
        background-color: var(--coda-panel-surface) !important;
        box-shadow: inset 0 -2px 0 var(--coda-blue) !important;
      }
      .admin-web-user-workspace .admin-web-user-editor-grid > button {
        box-sizing: border-box; min-width: 0; height: 44px; margin: 0 !important; padding: 0 12px;
        border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        background: var(--coda-blue); color: #fff; font-size: 10px;
        font-weight: 700; cursor: pointer;
      }
      .admin-web-user-scope-grid {
        display: grid; grid-template-columns: minmax(180px,.72fr) minmax(360px,1.56fr) minmax(180px,.72fr);
        background: var(--coda-border); gap: 1px;
      }
      .admin-web-user-scope { min-width: 0; background: var(--coda-panel-surface); }
      .admin-web-user-scope > strong { display: block; padding: 8px 12px; border-bottom: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 9px; text-transform: uppercase; }
      .admin-web-user-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 154px; overflow: auto; }
      .admin-web-user-workspace .admin-web-user-checks label {
        display: flex; min-width: 0; min-height: 34px; align-items: center; gap: 7px;
        margin: 0 !important; padding: 5px 10px; border-right: 1px solid var(--coda-border);
        border-bottom: 1px solid var(--coda-border); border-radius: 0 !important;
        color: var(--coda-text); font-size: 9px; letter-spacing: 0 !important; text-transform: none;
      }
      .admin-web-user-checks label:nth-child(2n) { border-right: 0; }
      .admin-web-user-popup .admin-web-user-scope:first-child .admin-web-user-checks { grid-template-columns: minmax(0,1fr); }
      .admin-web-user-popup .admin-web-user-scope:first-child .admin-web-user-checks label {
        min-height: 44px; padding: 8px 12px; border-right: 0; font-size: 11px;
      }
      .admin-web-user-popup .admin-web-user-scope:last-child .admin-web-user-checks { grid-template-columns: minmax(0,1fr); }
      .admin-web-user-popup .admin-web-user-scope:last-child .admin-web-user-checks label {
        min-height: 44px; padding: 8px 12px; border-right: 0; font-size: 11px;
      }
      .admin-web-user-checks label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-web-user-location-search {
        position: relative; display: block; border-bottom: 1px solid var(--coda-border);
        background: var(--coda-panel-surface);
      }
      .admin-web-user-location-search > i {
        position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
        color: var(--coda-muted); font-size: 15px; pointer-events: none;
      }
      .admin-web-user-workspace .admin-web-user-location-search > input {
        box-sizing: border-box; display: block; width: 100%; height: 44px; margin: 0; padding: 0 10px 0 36px;
        border: 0; border-radius: 0; background: var(--coda-panel-surface);
        color: var(--coda-text); font: inherit; font-size: 11px;
      }
      .admin-web-user-location-search:focus-within > i { display: none; }
      .admin-web-user-workspace .admin-web-user-location-search > input:focus {
        padding-left: 12px; outline: 0; box-shadow: inset 0 -2px 0 var(--coda-blue);
      }
      .admin-web-user-location-tree { background: var(--coda-panel-surface); }
      .admin-web-user-client { border-bottom: 1px solid var(--coda-border); }
      .admin-web-user-client .admin-web-user-permission-icon { --ikon-bg: var(--coda-blue); }
      .admin-web-user-client .admin-web-user-permission-group-head { border-bottom: 0; }
      .admin-web-user-client .admin-web-user-permission-select > span:last-child {
        overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
      }
      .admin-web-user-location-children > label {
        display: flex; min-height: 44px; align-items: center; gap: 8px; margin: 0;
        padding: 8px 12px 8px 28px; border-top: 1px solid var(--coda-border);
        color: var(--coda-text); font-size: 11px; cursor: pointer;
      }
      .admin-web-user-location-children > label span { min-width: 0; overflow-wrap: anywhere; }
      .admin-web-user-location-tree input[type="checkbox"] {
        box-sizing: border-box; width: 14px; min-width: 14px; height: 14px;
        margin: 0; padding: 0; border-radius: 0; accent-color: var(--coda-blue);
      }
      .admin-web-user-client[hidden],
      .admin-web-user-location-children[hidden],
      .admin-web-user-location-children > label[hidden] { display: none !important; }
      .admin-web-user-location-empty { display: block; padding: 10px 12px; color: var(--coda-muted); font-size: 11px; }
      .admin-web-user-workspace .admin-web-user-checks input[type="checkbox"] {
        box-sizing: border-box; width: 14px !important; min-width: 14px; height: 14px !important;
        margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        accent-color: var(--coda-blue); flex: 0 0 14px;
      }
      .admin-web-user-permissions { max-height: 314px; overflow: auto; background: var(--coda-panel-surface); }
      .admin-web-user-permission-tools {
        position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: minmax(0,1fr) auto;
        gap: 1px; border-bottom: 1px solid var(--coda-border); background: var(--coda-border);
      }
      .admin-web-user-permission-tools > label,
      .admin-web-user-permission-tools > button {
        display: flex; min-width: 0; min-height: 44px; align-items: center; gap: 8px; margin: 0;
        padding: 0 11px; border: 0; border-radius: 0 !important; box-shadow: none !important;
        background: var(--coda-panel-surface); color: var(--coda-text); font: inherit; font-size: 9px;
      }
      .admin-web-user-permission-tools > label { font-size: 11px; font-weight: 700; cursor: pointer; }
      .admin-web-user-permission-tools > button { color: var(--coda-blue); font-weight: 750; cursor: pointer; }
      .admin-web-user-permission-groups { display: block; background: var(--coda-panel-surface); }
      .admin-web-user-tree-category {
        padding: 10px 12px; border-bottom: 1px solid var(--coda-border); color: var(--coda-muted);
        font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
      }
      .admin-web-user-tree-caption {
        padding: 9px 14px 5px 28px; color: var(--coda-muted); font-size: 10px; font-weight: 750;
      }
      .admin-web-user-tree-submenus { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 0 14px 10px 28px; }
      .admin-web-user-tree-submenu {
        display: flex; min-width: 0; min-height: 34px; align-items: center; gap: 8px;
        padding: 5px 9px; border: 1px solid var(--coda-border); border-radius: 8px;
        color: var(--coda-text); font-size: 11px;
      }
      .admin-web-user-tree-submenu i { flex: 0 0 16px; color: var(--coda-blue); font-size: 16px; }
      .admin-web-user-tree-submenu input[type="checkbox"] { flex: 0 0 14px; }
      .admin-web-user-tree-submenu span { min-width: 0; overflow-wrap: anywhere; }
      .admin-web-user-tree-locked { padding: 8px 28px 14px; color: var(--coda-muted); font-size: 11px; }
      .admin-web-user-permission-group { min-width: 0; border-bottom: 1px solid var(--coda-border); background: var(--coda-panel-surface); }
      .admin-web-user-permission-group-head {
        display: grid; grid-template-columns: minmax(0,1fr) 44px; min-height: 44px; align-items: center;
        gap: 0; margin: 0; border-bottom: 1px solid var(--coda-border);
      }
      .admin-web-user-permission-select {
        display: grid; grid-template-columns: 16px 32px minmax(0,1fr); min-height: 44px;
        align-items: center; gap: 8px; margin: 0; padding: 4px 10px; cursor: pointer;
      }
      .admin-web-user-permission-select:hover { background: var(--coda-surface-hover); }
      .admin-web-user-permission-select > span:last-child { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
      .admin-web-user-permission-expand {
        display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
        border: 0; border-radius: 0; background: transparent; color: var(--coda-muted); cursor: pointer;
      }
      .admin-web-user-permission-expand:hover { background: var(--coda-surface-hover); color: var(--coda-text); }
      .admin-web-user-permission-expand:focus-visible { outline: 2px solid var(--coda-blue); outline-offset: -2px; }
      .admin-web-user-permission-icon {
        --ikon-bg: var(--coda-blue);
        display: grid; place-items: center; position: relative; box-sizing: border-box;
        width: 32px; height: 32px; border-radius: 10px; flex: 0 0 32px;
        background: color-mix(in srgb, var(--ikon-bg) 82%, transparent);
        box-shadow: inset 0 0 10px -4px rgba(255,255,255,.16), inset 0 0 26px -10px rgba(255,255,255,.22),
                    0 3px 8px color-mix(in srgb, var(--ikon-bg) 22%, transparent);
      }
      #adminWebUserDialog .admin-web-user-permission-group-head .admin-web-user-permission-icon {
        width: 20px; height: 20px; margin: 0 auto; border-radius: 0; background: transparent; box-shadow: none;
      }
      #adminWebUserDialog .admin-web-user-permission-group-head .admin-web-user-permission-icon i,
      #adminWebUserDialog .admin-web-user-permission-group-head .admin-web-user-permission-icon i::before {
        color: var(--coda-blue) !important; -webkit-text-fill-color: var(--coda-blue) !important; font-size: 18px;
      }
      #adminWebUserDialog .admin-web-user-permission-icon i,
      #adminWebUserDialog .admin-web-user-permission-icon i::before {
        background: none !important; color: var(--coda-master-on-blue) !important;
        -webkit-text-fill-color: var(--coda-master-on-blue) !important; font-size: 16px;
      }
      .admin-web-user-permission-subgroup { margin-left: 28px; border-left: 1px solid var(--coda-border); }
      .admin-web-user-permission-subgroup .admin-web-user-permission-icon { width: 28px; height: 28px; border-radius: 8px; }
      .admin-web-user-permission-actions { display: grid; grid-template-columns: minmax(0,1fr); }
      .admin-web-user-permission-actions[hidden] { display: none; }
      .admin-web-user-permission-actions > label {
        display: grid; grid-template-columns: 16px 32px minmax(0,1fr); min-width: 0; min-height: 44px;
        align-items: center; gap: 8px; margin: 0; padding: 4px 10px 4px 28px;
        border-bottom: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 11px; cursor: pointer;
      }
      .admin-web-user-permission-action-icon { display: flex; width: 32px; align-items: center; justify-content: center; gap: 2px; color: var(--coda-blue); }
      .admin-web-user-permission-action-icon i { font-size: 15px; }
      .admin-web-user-permission-actions > label:last-child { border-bottom: 0; }
      .admin-web-user-permission-actions span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-web-user-permissions input[type="checkbox"] {
        box-sizing: border-box; width: 14px !important; min-width: 14px; height: 14px !important;
        margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        accent-color: var(--coda-blue); flex: 0 0 14px;
      }
      .admin-web-user-editor-actions { display: flex; min-height: 44px; align-items: stretch; }
      .admin-web-user-editor-actions > button {
        min-width: 112px; margin: 0; padding: 0 12px; border: 0; border-right: 1px solid var(--coda-border);
        border-radius: 0 !important; box-shadow: none !important; background: var(--coda-panel-surface); color: var(--coda-text);
        font-size: 10px; font-weight: 700; cursor: pointer;
      }
      .admin-web-user-editor-actions > button.primary { background: var(--coda-blue); color: #fff; }
      .admin-web-user-editor-actions > span { display: flex; min-width: 0; flex: 1; align-items: center; padding: 0 12px; color: var(--coda-muted); font-size: 9px; }
      .admin-web-user-role-editor { grid-template-columns: minmax(120px,1fr) minmax(160px,1.4fr) minmax(88px,.6fr); }
      .admin-web-user-popup .admin-web-user-editor .form-section { margin: 0; padding: 16px; border-bottom: 1px solid var(--coda-border); }
      .admin-web-user-popup .admin-web-user-form-error {
        padding: 10px 16px; border-bottom: 1px solid var(--coda-border);
        background: color-mix(in srgb, var(--coda-danger) 12%, var(--coda-panel-surface));
        color: var(--coda-danger); font-size: 12px; font-weight: 650;
      }
      .admin-web-user-popup .admin-web-user-editor .form-section h3 { margin: 0 0 12px; color: var(--coda-text); font-size: 13px; }
      .admin-web-user-popup .admin-web-user-editor .fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
      .admin-web-user-popup .admin-web-user-permission-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
      .admin-web-user-popup .admin-web-user-editor .field { min-width: 0; }
      .admin-web-user-popup .admin-web-user-editor .field > label { display: block; margin-bottom: 6px; color: var(--coda-muted); font-size: 11px; }
      .admin-web-user-popup .admin-web-user-editor .field > :is(input:not([type="hidden"]),select) {
        box-sizing: border-box; display: block; width: 100%; height: 32px; min-height: 32px; margin: 0;
        padding: 0 10px; border: 1px solid var(--coda-border); border-radius: 8px;
        background: var(--coda-panel-surface); color: var(--coda-text); font: inherit; font-size: 12px; box-shadow: none;
      }
      .admin-web-user-popup .admin-web-user-editor .field > :is(input:not([type="hidden"]),select):focus {
        border-color: var(--coda-blue); outline: none; box-shadow: none;
      }
      .admin-web-user-popup .admin-web-user-form-note { margin: 12px 0 0; color: var(--coda-muted); font-size: 11px; }
      .admin-web-user-popup .admin-web-user-otp-option {
        display: flex; align-items: center; gap: 10px; min-height: 36px;
        font-size: 12px; color: var(--coda-text); cursor: pointer;
      }
      .admin-web-user-popup .admin-web-user-otp-option > input {
        width: 15px; height: 15px; margin: 0; accent-color: var(--coda-blue);
      }
      .admin-web-user-role-view-group {
        display: grid; gap: 6px; padding: 10px 0;
        border-bottom: 1px solid var(--coda-border); font-size: 12px;
      }
      .admin-web-user-role-view-group > strong { color: var(--coda-text); }
      .admin-web-user-role-view-group > span { padding-left: 22px; color: var(--coda-muted); }
      .admin-web-user-popup .admin-web-user-location-count { display: block; padding: 8px 0; color: var(--coda-muted); font-size: 11px; }
      .admin-web-user-popup .admin-web-user-location-tree { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
      .admin-web-user-popup .admin-web-user-location-children > label {
        min-height: 38px; padding: 8px 10px; border: 1px solid var(--coda-border); border-radius: 8px;
      }
      .admin-web-user-popup .admin-web-user-location-search {
        display: flex; align-items: center; min-height: 32px; margin: 0 0 4px;
        border: 1px solid var(--coda-border); border-radius: 8px;
        background: var(--coda-panel-surface);
      }
      .admin-web-user-popup .admin-web-user-location-search > i {
        position: static; transform: none; margin-left: 10px; font-size: 14px;
      }
      .admin-web-user-popup .admin-web-user-location-search:focus-within > i { display: block; }
      .admin-web-user-popup .admin-web-user-location-search > input {
        flex: 1; width: 100%; height: 30px; padding: 0 10px;
        border: 0; border-radius: 8px; background: transparent; box-shadow: none;
      }
      .admin-web-user-popup .admin-web-user-location-search > input:focus {
        padding-left: 10px; box-shadow: none;
      }
      .admin-web-user-popup .admin-web-user-location-search:focus-within { border-color: var(--coda-blue); }
      @media (max-width: 760px) {
        .admin-web-user-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
        .admin-web-user-metric:nth-child(2) { border-right: 0; }
        .admin-web-user-metric:nth-child(-n+2) { border-bottom: 1px solid var(--coda-border); }
        .admin-web-user-editor-grid, .admin-web-user-scope-grid { grid-template-columns: minmax(0,1fr); }
        .admin-web-user-role-editor { grid-template-columns: minmax(0,1fr); }
        .admin-web-user-popup .admin-web-user-editor .fields,
        .admin-web-user-popup .admin-web-user-permission-fields,
        .admin-web-user-popup .admin-web-user-location-tree { grid-template-columns: minmax(0,1fr); }
        .admin-web-user-tree-submenus { grid-template-columns: minmax(0,1fr); }
      }

      .admin-mqtt-center { background: var(--coda-panel-surface); }
      .admin-mqtt-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 48px; border-bottom: 0; }
      .admin-mqtt-summary > div { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 0 12px; }
      .admin-mqtt-summary > span { display: flex; align-items: center; padding: 0 12px; border-left: 1px solid var(--coda-border); font-size: 10px; font-weight: 700; }
      .admin-mqtt-section-title { padding: 10px 12px 6px; border-bottom: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
      .admin-mqtt-node { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 52px; border-bottom: 1px solid var(--coda-border); background: transparent; }
      .admin-mqtt-node-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 7px 12px; }
      .admin-mqtt-node-copy strong, .admin-mqtt-node-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-mqtt-node-copy strong { color: var(--coda-text); font-size: 11px; }
      .admin-mqtt-node-copy span { margin-top: 3px; color: var(--coda-muted); font-size: 9px; }
      .admin-mqtt-node-status { display: flex; min-width: 72px; align-items: center; justify-content: center; padding: 0 10px; border-left: 1px solid var(--coda-border); font-size: 9px; font-weight: 700; text-transform: uppercase; }
      .admin-mqtt-location { cursor: pointer; }
      .admin-mqtt-location:hover, .admin-mqtt-location.active-list-item { background: var(--coda-blue-bg); }
      .admin-mqtt-node-status i { margin-left: 7px; color: var(--coda-muted); font-size: 12px; }
      .admin-mqtt-pos-tree { border-bottom: 1px solid var(--coda-border); background: color-mix(in srgb, var(--coda-panel-surface) 88%, var(--coda-bg)); }
      .admin-mqtt-tree-group { padding: 6px 12px 5px 18px; border-top: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
      .admin-mqtt-tree-group:first-child { border-top: 0; }
      .admin-mqtt-pos-child {
        display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center;
        min-height: 38px; padding: 0 10px 0 18px; border-top: 1px solid var(--coda-border);
      }
      .admin-mqtt-pos-child:first-child { border-top: 0; }
      .admin-mqtt-pos-child > i { color: var(--coda-muted); font-size: 13px; }
      .admin-mqtt-pos-child div { min-width: 0; }
      .admin-mqtt-pos-child strong, .admin-mqtt-pos-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-mqtt-pos-child strong { color: var(--coda-text); font-size: 10px; }
      .admin-mqtt-pos-child small { margin-top: 2px; color: var(--coda-muted); font-size: 8.5px; }
      .admin-mqtt-pos-child > span { padding-left: 8px; font-size: 8.5px; font-weight: 700; text-transform: uppercase; }
      .admin-mqtt-settings { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 44px; border-bottom: 1px solid var(--coda-border); }
      .admin-mqtt-settings > span, .admin-mqtt-settings > label { display: flex; align-items: center; padding: 0 12px; }
      .admin-mqtt-settings > span { color: var(--coda-muted); font-size: 10px; }
      .admin-mqtt-settings > label { gap: 7px; border-left: 1px solid var(--coda-border); color: var(--coda-text); font-size: 10px; }
      .admin-mqtt-workspace { min-width: 0; }
      .admin-mqtt-detail { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: var(--coda-panel-surface); }
      .admin-mqtt-detail-head { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 44px; border-bottom: 1px solid var(--coda-border); }
      .admin-mqtt-detail-head > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 6px 12px; }
      .admin-mqtt-detail-head strong, .admin-mqtt-detail-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-mqtt-detail-head strong { font-size: 11px; }
      .admin-mqtt-detail-head span { margin-top: 2px; color: var(--coda-muted); font-size: 9px; }
      .admin-mqtt-detail-head label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 0 12px; border-left: 1px solid var(--coda-border); color: var(--coda-text); font-size: 9px; text-transform: none; letter-spacing: 0; }
      .admin-mqtt-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--coda-border); }
      .admin-mqtt-metric { min-width: 0; padding: 9px 12px; border-right: 1px solid var(--coda-border); }
      .admin-mqtt-metric:last-child { border-right: 0; }
      .admin-mqtt-metric span, .admin-mqtt-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-mqtt-metric span { color: var(--coda-muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
      .admin-mqtt-metric strong { margin-top: 4px; color: var(--coda-text); font-size: 12px; }
      .admin-mqtt-detail-table { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }
      .admin-mqtt-detail-table .admin-report-table-wrap { min-width: 100%; }
      .admin-mqtt-table-title { padding: 8px 12px; border-bottom: 1px solid var(--coda-border); color: var(--coda-muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }
      @media (max-width: 620px) {
        .admin-mqtt-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
        .admin-mqtt-metric:nth-child(2) { border-right: 0; }
        .admin-mqtt-metric:nth-child(-n+2) { border-bottom: 1px solid var(--coda-border); }
      }

      .admin-menu-static { cursor: default !important; }

      .admin-domain-overview { border-bottom: 0; background: transparent; }
      .admin-domain-overview-head { padding: 12px 12px 10px; }
      .admin-domain-overview-head strong { display: block; color: var(--coda-text); font-size: 12px; line-height: 1.3; }
      .admin-domain-overview-head span { display: block; margin-top: 3px; color: var(--coda-muted); font-size: 9px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-domain-location { box-sizing: border-box; width: 100%; height: 34px; margin: 10px 0 0; padding: 0 32px 0 10px; border: 1px solid var(--coda-border-strong); border-radius: 6px; background-color: var(--coda-surface); color: var(--coda-text); font: inherit; font-size: 10px; outline: none; }
      .admin-domain-location:focus { border-color: var(--coda-blue); }
      .admin-domain-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--coda-border); }
      .admin-domain-kpi { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--coda-border); border-bottom: 1px solid var(--coda-border); }
      .admin-domain-kpi:nth-child(2n) { border-right: 0; }
      .admin-domain-kpi strong { display: block; color: var(--coda-text); font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .admin-domain-kpi span { display: block; margin-top: 3px; color: var(--coda-muted); font-size: 8px; line-height: 1.35; }
      .admin-domain-menu-label { padding: 10px 12px 6px; color: var(--coda-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }

      .admin-domain-center .admin-domain-overview-head { box-sizing: border-box; display: flex; align-items: stretch; width: 100%; height: 44px; min-height: 44px; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
      .admin-domain-center .admin-domain-overview-head::-webkit-scrollbar { display: none; width: 0; height: 0; }
      .admin-domain-center .admin-domain-overview-head > strong { display: flex; min-width: 116px; flex: 1 1 116px; align-items: center; overflow: hidden; padding: 0 10px; border-right: 1px solid var(--coda-border); font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
      .admin-domain-center .admin-domain-overview-head > span { display: none; }
      .admin-domain-center .admin-domain-overview-head > .admin-domain-location { width: 108px; min-width: 96px; height: 43px; margin: 0; padding: 0 28px 0 8px; border: 0; border-right: 1px solid var(--coda-border); border-radius: 0; background-color: transparent; }
      .admin-domain-center .admin-domain-overview-head > .admin-domain-location:last-child { border-right: 0; }

      @media (min-width: 981px) {
        .coda-form-panel.admin-domain-active-panel .coda-form-head { height: 44px; min-height: 44px; padding: 4px 16px; }
      }

      @container admin-workspace (max-width: 860px) {
        .admin-report-toolbar { display: flex; width: 100%; max-width: 100%; flex-wrap: nowrap; align-items: stretch; gap: 0; overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; }
        .admin-report-toolbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
        .admin-report-toolbar > select { width: auto !important; min-width: 112px; max-width: none; flex: 1 1 0; }
        .admin-report-toolbar > input[type="date"], .admin-report-toolbar > input[type="month"] { width: auto !important; min-width: 108px; flex: 1 1 0; padding-left: 7px; padding-right: 5px; }
        .admin-report-toolbar > button { width: 44px; min-width: 44px; flex: 0 0 44px; padding: 0; gap: 0; font-size: 0 !important; }
        .admin-report-toolbar > button i { font-size: 15px !important; }
      }

      @container admin-workspace (max-width: 520px) {
        .admin-report-toolbar > select { min-width: 104px; }
        .admin-report-toolbar > input[type="date"], .admin-report-toolbar > input[type="month"] { min-width: 104px; }
        .admin-license-segments { grid-template-columns: minmax(0, 1fr); }
        .admin-license-segments > .coda-input,
        .admin-license-segments > .coda-select { border-right: 0; border-bottom: 1px solid var(--coda-border); }
        .admin-license-segments > :last-child { border-bottom: 0; }
        .admin-license-actions { flex-direction: column; }
        .admin-license-actions > .coda-btn { width: 100%; }
        .admin-license-actions > span { min-height: 36px; border-top: 1px solid var(--coda-border); border-left: 0; }
      }

      @media (max-width: 1240px) {
        .admin-transaction-table-wrap { max-height: none; }
        .admin-revenue-candle-wrap, .admin-revenue-candle-wrap canvas { height: 300px; min-height: 300px; }
        .admin-revenue-composition { grid-template-columns: 140px minmax(0, 1fr); }
        .admin-revenue-pie { width: 140px; height: 140px; }
      }
      @media (max-width: 980px) {
        .admin-revenue-center { background: transparent; }
        .admin-transaction-shell { padding: 0; gap: 0; }
        .admin-report-toolbar { padding: 0; }
        .admin-report-meta { padding-left: 10px; padding-right: 10px; }
        .admin-revenue-locations { min-height: auto; padding-bottom: 0; }
        .admin-revenue-mobile-overview .admin-revenue-locations { border-top: 1px solid var(--coda-border); }
        .admin-revenue-mobile-overview .admin-revenue-location-summary { display: none; }
        .admin-revenue-mobile-overview .admin-revenue-location-list { overflow: visible; }
        .admin-revenue-location-row {
          grid-template-columns: minmax(112px, 1fr) 112px minmax(72px, auto);
          align-items: center; gap: 10px; padding: 13px 14px;
          border-left: 3px solid transparent; background: var(--coda-surface);
        }
        .admin-revenue-location-row.trend-positive { border-left-color: #21b573; }
        .admin-revenue-location-row.trend-negative { border-left-color: #e5484d; }
        .admin-revenue-location-market { display: block; }
        .admin-revenue-location-value { min-width: 72px; }
        .admin-revenue-location-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .admin-revenue-location-periods { display: none; }

        .coda-form-grid.admin-home-mobile-grid {
          box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
          width: 100%; height: auto; min-height: 100%; padding: 12px 12px 112px;
          overflow: visible; background: transparent;
        }
        .coda-list-wrapper.admin-home-scroll {
          overflow-x: hidden !important; overflow-y: auto !important;
          overscroll-behavior-y: contain; touch-action: pan-y;
          -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
        }
        .admin-home-revenue-card {
          position: relative; isolation: isolate; box-sizing: border-box; display: block;
          width: 100%; min-height: 210px; flex: 0 0 210px; padding: 18px;
          overflow: hidden; border: 1px solid color-mix(in srgb, #fff 28%, transparent);
          border-radius: 8px; background: #238fe8; color: #fff; text-align: left;
          cursor: pointer; box-shadow: 0 8px 24px rgba(8, 45, 82, .16);
        }
        [data-theme="dark"] .admin-home-revenue-card { background: #2d3842; }
        .admin-home-revenue-card::after {
          content: ""; position: absolute; inset: 0; z-index: -1;
          background: linear-gradient(180deg, rgba(3,23,43,.08), rgba(3,23,43,.42));
          pointer-events: none;
        }
        .admin-home-revenue-clouds { position: absolute; inset: 0; z-index: -2; opacity: .8; pointer-events: none; }
        .admin-home-revenue-clouds canvas { display: block; width: 100%; height: 100%; }
        .admin-home-revenue-content { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; height: 100%; }
        .admin-home-revenue-value { overflow-wrap: anywhere; font-size: 30px; font-weight: 850; line-height: 1.08; text-shadow: 0 2px 14px rgba(0,0,0,.24); }
        .admin-home-revenue-chart { min-height: 124px; }
        .admin-home-revenue-chart .admin-revenue-mini-chart { width: 100%; height: 124px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.14)); }
        .admin-home-revenue-chart .admin-revenue-mini-grid { stroke: rgba(255,255,255,.28); }
        .admin-home-revenue-chart .admin-revenue-mini-empty { width: 100%; height: 124px; border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.78); }
        .admin-home-revenue-card:active { transform: scale(.995); }
        .admin-home-mobile-item {
          box-sizing: border-box; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px;
          align-items: center; gap: 12px; width: 100%; min-height: 70px; flex: 0 0 auto;
          padding: 10px 12px; border: 1px solid var(--coda-border); border-radius: 8px;
          background: var(--coda-surface); color: var(--coda-text); text-align: left;
          box-shadow: 0 2px 8px rgba(0,0,0,.025);
        }
        .admin-home-mobile-item { touch-action: pan-y; }
        .admin-home-mobile-item:active { transform: scale(.99); }
        .admin-home-mobile-item .grid-ico {
          width: 42px; height: 42px; aspect-ratio: auto; margin: 0; border-radius: 8px;
          background: var(--coda-blue-bg); border-color: color-mix(in srgb, var(--coda-blue) 32%, var(--coda-border));
          font-size: 23px; box-shadow: none;
        }
        .admin-home-mobile-copy { display: block; min-width: 0; }
        .admin-home-mobile-item .grid-title {
          display: block; overflow: hidden; color: var(--coda-text); font-size: 12px;
          font-weight: 750; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
        }
        .admin-home-mobile-desc {
          display: block; margin-top: 4px; overflow: hidden; color: var(--coda-muted);
          font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
        }
        .admin-home-mobile-caret { color: var(--coda-muted); font-size: 16px; }
        .admin-home-mobile-item.is-featured {
          position: relative; grid-template-columns: minmax(0, 1fr) 18px; align-items: end;
          min-height: 140px; flex-basis: 140px; padding: 18px; overflow: hidden;
          background: color-mix(in srgb, var(--coda-blue) 5%, var(--coda-surface));
          touch-action: pan-y;
        }
        .admin-home-mobile-item.is-featured .grid-ico {
          position: absolute; right: -22px; bottom: -42px; z-index: 0;
          width: 154px; height: 154px; margin: 0; border: 0; border-radius: 0;
          background: transparent; color: var(--coda-blue); font-size: 132px;
          opacity: .13; box-shadow: none; pointer-events: none;
        }
        .admin-home-mobile-item.is-featured .admin-home-mobile-copy,
        .admin-home-mobile-item.is-featured .admin-home-mobile-caret { position: relative; z-index: 1; }
        .admin-home-mobile-item.is-featured .grid-title { font-size: 14px; }
        .admin-home-mobile-item.is-featured .admin-home-mobile-desc {
          max-width: min(68%, 270px); overflow: visible; font-size: 10px;
          line-height: 1.45; text-overflow: clip; white-space: normal;
        }
        .admin-home-featured-metrics {
          display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0; width: min(72%, 290px); margin-top: 12px;
          border-top: 1px solid color-mix(in srgb, var(--coda-blue) 20%, var(--coda-border));
        }
        .admin-home-featured-metric { min-width: 0; padding: 9px 10px 0 0; }
        .admin-home-featured-metric + .admin-home-featured-metric {
          padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--coda-blue) 20%, var(--coda-border));
        }
        .admin-home-featured-metric strong {
          display: block; overflow: hidden; color: var(--coda-text); font-size: 13px;
          line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
        }
        .admin-home-featured-metric span {
          display: block; margin-top: 2px; overflow: hidden; color: var(--coda-muted);
          font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
        }
      }
      @media (max-width: 560px) {
        .admin-transaction-meta { align-items: center; flex-direction: row; gap: 8px; }
        .admin-transaction-footer { align-items: center; flex-direction: row; }
        .admin-revenue-mobile-composition { grid-template-columns: 118px minmax(0, 1fr); gap: 10px; }
        .admin-revenue-location-row { grid-template-columns: minmax(96px, 1fr) 96px minmax(66px, auto); gap: 7px; padding-left: 10px; padding-right: 10px; }
        .admin-revenue-mini-chart, .admin-revenue-mini-empty { width: 96px; }
        .admin-revenue-location-calc { gap: 4px; font-size: 6px; }
        .admin-revenue-location-calc strong { font-size: 6px; }
      }
      /* ---- Kotak ikon: BAHAN yang sama dengan kartu masuk ----
         Permintaan pemilik: kotak ikon bulat-persegi di sidebar dan panel tengah disamakan
         dengan UI kartu masuk. Yang dipindahkan ke sini bahannya, bukan bentuknya - ukuran,
         radius, dan warna ikonnya tidak disentuh.

         Refraksi SVG dari halaman masuk SENGAJA tidak dibawa: di sana ia membengkokkan scene
         awan yang bergerak di belakang kartu, sedangkan kotak ikon duduk di atas panel rata -
         tidak ada yang bisa dibengkokkan, dan satu filter per ikon (bisa puluhan di satu
         layar) dibayar percuma. Yang benar-benar membuat bahannya terbaca sama ada tiga:
         isi tembus pandang, garis cahaya tipis di tepi, dan bayangan seperlunya. */
      :root {
        --coda-ico-fill: rgba(255, 255, 255, 0.55);
        --coda-ico-inner: rgba(255, 255, 255, 0.50);
        --coda-ico-shadow: rgba(15, 26, 36, 0.08);
        --coda-ico-rim-a: rgba(255, 255, 255, 0.85);
        --coda-ico-rim-b: rgba(15, 26, 36, 0.08);
        --coda-ico-rim-c: rgba(255, 255, 255, 0.55);
      }
      [data-theme="dark"] {
        --coda-ico-fill: rgba(255, 255, 255, 0.06);
        --coda-ico-inner: rgba(255, 255, 255, 0.14);
        --coda-ico-shadow: rgba(0, 0, 0, 0.30);
        --coda-ico-rim-a: rgba(255, 255, 255, 0.24);
        --coda-ico-rim-b: rgba(255, 255, 255, 0.03);
        --coda-ico-rim-c: rgba(255, 255, 255, 0.17);
      }
      .coda-sb-ico, .coda-info-ico {
        position: relative; isolation: isolate;
        background: var(--coda-ico-fill);
        /* Border dipertahankan sebagai transparan, bukan dibuang: lebarnya ikut menentukan
           kotak, dan sejumlah aturan hover/aktif yang sudah ada mewarnainya. */
        border: 1px solid transparent;
        backdrop-filter: blur(10px) saturate(128%);
        -webkit-backdrop-filter: blur(10px) saturate(128%);
        box-shadow: inset 0 0 8px -3px var(--coda-ico-inner),
                    0 1px 4px var(--coda-ico-shadow);
      }
      .coda-sb-ico::after, .coda-info-ico::after {
        content: ""; position: absolute; inset: 0; z-index: -1;
        border-radius: inherit; pointer-events: none;
        padding: 1px;
        backdrop-filter: brightness(1.14) saturate(1.10);
        -webkit-backdrop-filter: brightness(1.14) saturate(1.10);
        background: linear-gradient(177deg,
            var(--coda-ico-rim-a) 0%,
            var(--coda-ico-rim-b) 26%,
            var(--coda-ico-rim-b) 62%,
            var(--coda-ico-rim-c) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        filter: blur(0.6px);
      }
      /* Kotak yang memang bukan ikon - kotak pencarian dan tombol lipat sidebar - tetap polos;
         aturan lamanya sudah mengosongkan latarnya, garis cahayanya ikut dimatikan di sini. */
      .coda-sidebar .search-wrap .coda-sb-ico::after,
      .coda-sidebar .toggle-wrap .coda-sb-ico::after { display: none; }
      .coda-sidebar .search-wrap .coda-sb-ico,
      .coda-sidebar .toggle-wrap .coda-sb-ico {
        backdrop-filter: none; -webkit-backdrop-filter: none;
      }
      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .coda-sb-ico, .coda-info-ico { background: var(--coda-surface); border-color: var(--coda-border); }
        .coda-sb-ico::after, .coda-info-ico::after { display: none; }
      }
      /* ---- SCROLLBAR DISEMBUNYIKAN DI SELURUH HALAMAN KERJA ----
         Permintaan pemilik: tidak ada batang gulir yang terlihat di mana pun, di semua peramban,
         supaya layarnya bersih dan ruang kerjanya lebih lebar.

         Ditaruh PALING AKHIR dan memakai `!important` dengan sadar: berkas ini sudah punya
         beberapa aturan yang justru MENGHIDUPKAN batang gulir 6px dan 4px untuk panel tertentu.
         Menghapusnya satu per satu menyisakan risiko ada yang terlewat - dan yang terlewat baru
         ketahuan oleh pemilik, bukan oleh kita. Satu aturan penutup lebih jujur.

         Tiga mesin peramban ditutup sekaligus: `scrollbar-width` (Firefox dan Chrome baru),
         `-ms-overflow-style` (Edge lama dan IE), serta `::-webkit-scrollbar` (Chrome, Edge,
         Safari). Tanpa ketiganya, "sudah hilang di sini" belum berarti hilang di tempat lain.

         Yang HILANG cuma batangnya, bukan kemampuan menggulirnya: roda tetikus, sentuhan, dan
         tombol panah/PageDown tetap bekerja seperti biasa. */
      *, *::before, *::after {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
      }
      *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }
      *::-webkit-scrollbar-track,
      *::-webkit-scrollbar-thumb,
      *::-webkit-scrollbar-corner,
      *::-webkit-scrollbar-button {
        display: none !important;
        background: transparent !important;
        width: 0 !important;
        height: 0 !important;
      }

      /* Menu yang tidak diizinkan harus BENAR-BENAR hilang.
         dashboard.js sudah menyetel node.hidden untuk setiap menu yang izinnya tidak dicentang,
         tetapi stylesheet bawaan browser hanya memberi [hidden] { display: none } tanpa
         !important - dan .coda-sb-item di atas memberi display: flex. Aturan kelas itu menang,
         jadi ikonnya tetap tampak walau JS sudah menandainya tersembunyi: terlihat, bisa
         diklik, dan tidak melakukan apa pun (activateMenu memang berhenti pada item hidden).
         Dua baris berikut yang menutupnya. Baris kedua spesifisitasnya dua kelas supaya tetap
         menang terhadap aturan seperti .mobile-only { display: flex !important }. */
      [hidden] { display: none !important; }
      .coda-sb-item[hidden],
      .ig-menu-item[hidden],
      .coda-desktop-menu-item[hidden],
      .mobile-nav-item[hidden],
      .top-nav-item[hidden],
      .coda-expanded-context .coda-sb-item[hidden] { display: none !important; }

      /* Kartu "sesi berakhir". Tampilan terakhir tetap terlihat di belakangnya - pemilik
         meminta pop up, bukan halaman JSON dan bukan lompatan mendadak ke halaman masuk. */
      .coda-sesi-habis {
        position: fixed; inset: 0; z-index: 9000; display: none;
        align-items: center; justify-content: center; padding: 24px;
        background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
      }
      .coda-sesi-habis[data-buka="1"] { display: flex !important; }
      .coda-sesi-habis-kartu {
        box-sizing: border-box; width: min(360px, 100%); padding: 24px;
        border: 1px solid var(--coda-border); border-radius: 14px;
        background: var(--coda-surface); color: var(--coda-text);
        box-shadow: 0 18px 48px rgba(0,0,0,.24); text-align: center;
      }
      .coda-sesi-habis-ico {
        width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--coda-blue-bg); color: var(--coda-blue); font-size: 22px;
      }
      .coda-sesi-habis-kartu h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
      .coda-sesi-habis-kartu p { margin: 0 0 18px; font-size: 12px; color: var(--coda-muted); }
      .coda-sesi-habis-kartu button {
        width: 100%; height: 38px; border: 0; border-radius: 9px; cursor: pointer;
        background: var(--coda-blue); color: #fff; font: inherit; font-size: 12.5px;
        font-weight: 650;
      }
.admin-license-renew-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
}
.admin-license-renew-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.admin-license-renew-toolbar .coda-select { min-width: 130px; }
.admin-web-user-log-toolbar {
  grid-template-columns: minmax(150px, 1.5fr) minmax(120px, 1fr) minmax(120px, 1fr)
    minmax(110px, .9fr) minmax(110px, .9fr) 46px;
}
.admin-web-user-log-toolbar > :focus-visible {
  box-shadow: inset 0 -2px 0 var(--coda-blue, #0071e3) !important;
}
.admin-web-user-log-more {
  display: block; margin: 10px auto; padding: 8px 16px;
  border: 1px solid var(--coda-border); border-radius: 9px;
  background: var(--coda-panel-surface); color: var(--coda-text); cursor: pointer;
}
@media (max-width: 760px) {
  .admin-web-user-log-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-web-user-log-toolbar > input:first-child { grid-column: span 2; }
}
.coda-admin-shell {
  --coda-panel-top: 0px;
  --coda-master-blue: #0071e3;
  --coda-master-blue-text: #0066cc;
  --coda-master-sidebar: #e9f2ff;
  --coda-master-muted: #53687d;
  --coda-master-on-blue: #fff;
  --coda-master-space: 12px;
  --coda-master-input-bg: rgba(248,250,252,.86);
  --coda-master-input-border: rgba(27,50,66,.14);
  --coda-master-input-ring: rgba(0,113,227,.2);
}
.coda-admin-shell .coda-layout { top: 0 !important; bottom: auto; height: 100dvh; }
.coda-admin-shell .coda-sidebar {
  --coda-panel-surface: var(--coda-master-sidebar);
  background: var(--coda-master-sidebar);
}
.coda-sidebar-identity { flex: 0 0 auto; padding: 24px 20px 0; min-width: 0; }
.coda-sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; }
.coda-sidebar-brand { display: inline-flex; align-items: center; width: 64px; height: 24px; }
.coda-sidebar-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.coda-sidebar-user { margin-top: 12px; color: var(--coda-master-blue-text); font-size: 13px; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coda-admin-shell .coda-sb-desc { color: var(--coda-master-muted); }
.coda-sidebar-actions { display: flex; justify-content: center; gap: 12px; padding: 8px 12px 12px; }
.coda-sidebar-action, .coda-mobile-sidebar-toggle, .coda-sidebar-close {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; height: 36px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--coda-text); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.coda-sidebar-action i, .coda-mobile-sidebar-toggle i, .coda-sidebar-close i { font-size: 18px; }
.coda-admin-shell .coda-sidebar-action {
  width: var(--coda-ui-size); height: var(--coda-ui-size); flex: 0 0 var(--coda-ui-size);
  border: 1px solid var(--coda-border); border-radius: 10px;
  background: var(--coda-surface); color: var(--coda-master-blue-text); box-shadow: none;
}
.coda-admin-shell .coda-sidebar-action i { font-size: var(--coda-icon-size); }
.coda-admin-shell :is(.coda-sidebar-action,.coda-mobile-sidebar-toggle,.coda-sidebar-close):is(:hover,:focus-visible),
.coda-admin-shell .coda-sidebar :is(.coda-sb-item,.toggle-wrap):hover {
  background: var(--coda-surface-hover);
  border-color: transparent;
  color: var(--coda-master-blue);
}
.coda-admin-shell .coda-sidebar-action:is(:hover,:focus-visible) { color: var(--coda-master-blue-text); }
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico) {
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#buatLayout :is(.coda-sb-ico,.coda-info-ico),
#buatLayout .coda-form-grid-item:not(.admin-home-mobile-item) .grid-ico,
#buatLayout .ig-menu-item > i {
  width: var(--coda-ui-size); min-width: var(--coda-ui-size); height: var(--coda-ui-size);
  background: var(--coda-surface); border: 1px solid var(--coda-border); border-radius: 10px;
  box-shadow: none;
}
#buatLayout .coda-form-grid-item:not(.admin-home-mobile-item) .grid-ico { font-size: var(--coda-icon-size); }
#buatLayout .ig-menu-item > i { display: inline-flex; align-items: center; justify-content: center; }
#buatLayout .search-wrap .coda-sb-ico {
  width: 20px; min-width: 20px; height: 20px; background: transparent; border-color: transparent;
}
#buatLayout.sidebar-mini .search-wrap .coda-sb-ico {
  width: var(--coda-ui-size); min-width: var(--coda-ui-size); height: var(--coda-ui-size);
  background: var(--coda-surface); border-color: var(--coda-border);
}
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico)::after { display: none; }
#buatLayout i { box-shadow: none; text-shadow: none; filter: none; }
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico,.ig-menu-item,.coda-sidebar-action) i,
#buatLayout .ig-menu-item > i { color: var(--coda-master-blue) !important; }
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico,.ig-menu-item,.coda-sidebar-action) .ph-duotone::before {
  color: var(--coda-master-on-blue) !important; opacity: 1 !important;
}
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico,.ig-menu-item,.coda-sidebar-action) .ph-duotone::after {
  color: var(--coda-master-blue) !important; opacity: 1 !important;
}
.coda-admin-shell .coda-sidebar .search-wrap {
  background: var(--coda-master-input-bg); border-color: var(--coda-master-input-border);
  border-radius: 10px; padding: 4px 12px; gap: 8px; overflow: visible;
}
.coda-admin-shell .coda-sidebar .search-wrap .coda-sb-ico { width: 20px; min-width: 20px; height: 20px; }
.coda-admin-shell .coda-sidebar .search-wrap:focus-within {
  border-color: var(--coda-master-blue); box-shadow: 0 0 0 3px var(--coda-master-input-ring);
}
.coda-admin-shell .coda-sidebar .search-wrap:is(:focus-within,:has(input:not(:placeholder-shown))) .coda-sb-ico,
.coda-admin-shell .coda-sidebar .search-wrap:focus-within .coda-sliding-placeholder { display: none; }
.coda-admin-shell :is(#sbSearch,#mobileSearchInput):focus-visible { outline: none; box-shadow: none; }
#buatLayout #mobileSearchContainer {
  background: var(--coda-master-input-bg) !important; border-color: var(--coda-master-input-border) !important;
  border-radius: 10px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#buatLayout #mobileSearchContainer:focus-within {
  border-color: var(--coda-master-blue) !important; box-shadow: 0 0 0 3px var(--coda-master-input-ring) !important;
}
#buatLayout #mobileSearchIcon { color: var(--coda-master-blue) !important; }
#buatLayout #mobileSearchContainer:is(:focus-within,:has(input:not(:placeholder-shown))) #mobileSearchIcon { display: none !important; }
#buatLayout #mobileSearchContainer:is(:focus-within,:has(input:not(:placeholder-shown))) .mobile-search-input-wrap { margin-left: 0; }
.coda-admin-shell :is(button,a,[role="button"],input):focus-visible { outline: 2px solid var(--coda-master-blue); outline-offset: 2px; }
.coda-admin-shell .coda-sidebar button.toggle-wrap { font: inherit; text-align: left; color: var(--coda-text); }
.coda-admin-shell .sidebar-mini .coda-sidebar-identity { padding: 24px 12px 0; }
.coda-admin-shell .sidebar-mini .coda-sidebar-brand { width: 40px; }
.coda-admin-shell .sidebar-mini .coda-sidebar-user { display: none; }
.coda-admin-shell .sidebar-mini .coda-sidebar-actions { flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; width: 64px; }
.coda-admin-shell .sidebar-mini .coda-sidebar .search-wrap:hover {
  background: var(--coda-surface-hover) !important; border-radius: 12px;
}
.coda-sidebar-close, .coda-mobile-sidebar-toggle, .coda-sidebar-scrim { display: none; }
@media (max-width: 980px) {
  .coda-admin-shell .coda-mobile-sidebar-toggle { display: flex; position: absolute; top: 14px; left: 12px; width: 40px; height: 40px; pointer-events: auto; z-index: 4006; background: var(--coda-surface); }
  .coda-admin-shell .coda-mobile-search-bar { left: 60px !important; right: 12px !important; }
  .coda-admin-shell .sidebar-open-mobile .coda-sidebar {
    display: flex; position: fixed; inset: 0 auto 0 0; height: 100dvh; width: var(--coda-sidebar-w); z-index: 5002;
  }
  .coda-admin-shell .sidebar-open-mobile .coda-sidebar-scrim { display: block; position: fixed; inset: 0; border: 0; background: rgba(0,0,0,.32); z-index: 5001; cursor: default; }
  .coda-admin-shell .coda-sidebar-close { display: flex; width: 40px; height: 40px; }
  .coda-admin-shell .coda-sidebar .toggle-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .coda-sidebar-action, .coda-mobile-sidebar-toggle, .coda-sidebar-close { transition: none; }
}
/* Material login asli, dipakai bersama tanpa membawa aturan body/form login. */
.login-box.glass, .coda-login-glass {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--coda-login-glass-fill, rgba(255,255,255,.14));
  border: 0;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.16),
              inset 0 0 26px -10px rgba(255,255,255,.22);
  backdrop-filter: blur(var(--coda-login-glass-blur, 18px)) saturate(128%);
  -webkit-backdrop-filter: blur(var(--coda-login-glass-blur, 18px)) saturate(128%);
}
.login-box.glass::before, .coda-login-glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  backdrop-filter: blur(var(--coda-login-refraction-blur, 14px)) saturate(128%);
  -webkit-backdrop-filter: blur(var(--coda-login-refraction-blur, 14px)) saturate(128%);
  filter: url(#codaGlassWarp); pointer-events: none;
}
.login-box.glass::after, .coda-login-glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none; padding: 1px;
  backdrop-filter: brightness(1.14) saturate(1.10);
  -webkit-backdrop-filter: brightness(1.14) saturate(1.10);
  background: linear-gradient(177deg,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.18) 5%,
    rgba(255,255,255,.06) 18%, rgba(255,255,255,.03) 45%,
    rgba(255,255,255,.03) 64%, rgba(255,255,255,.09) 88%,
    rgba(255,255,255,.21) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; filter: blur(1px);
}
.coda-glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-box.glass, .coda-login-glass { background: var(--glass-bg, rgba(223,232,239,.82)); }
  .login-box.glass::before, .login-box.glass::after,
  .coda-login-glass::before, .coda-login-glass::after { display: none; }
}

/* WEB_MARK8.6.2 - kartu login memakai material hover/terpilih workspace: isi putih 20%, cahaya dalam lembut,
   bayangan tipis; tanpa lapisan refraksi dan tanpa cincin tepi. Hanya kartu login (.login-box), bukan sidebar. */
.login-box.glass {
  background: rgba(255,255,255,.2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05);
}
.login-box.glass::before, .login-box.glass::after { content: none; }

/* WEB_MARK8.6.3 - kartu login dan footer berkaca blur seperti dock mobile; kolom input bergaya kolom cari sidebar
   (kartu ikon metal di kiri, fokus = garis biru saja), tombol mata pada kolom kata sandi. */
.login-box.glass, .login-footer {
  background: rgba(255,255,255,.22) !important; border: 0 !important;
  backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 8px 24px rgba(0,60,140,.16) !important;
}
.login-footer { box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 -4px 16px rgba(0,60,140,.08) !important; }
.login-box .a-field { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; height: 44px;
  padding: 0 6px; margin: 0 0 12px; border: 1px solid transparent; border-radius: 12px; background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05);
  transition: border-color .15s ease-out; }
.login-box .a-field:focus-within { border-color: #0071e3; box-shadow: none; }
.login-box .a-field > .a-input { flex: 1 1 auto; min-width: 0; height: 100% !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important; }
.login-box .a-field-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 5px rgba(139,146,160,.45); color: #2b2f38; font-size: 16px; }
.login-box .a-field:focus-within .a-field-ico { color: #0071e3; }
.login-box .a-field-eye { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: #86868b; font-size: 18px; cursor: pointer; }
.login-box .a-field-eye:hover, .login-box .a-field-eye:focus-visible { background: rgba(255,255,255,.35); color: #0071e3; }

/* Edge menambahkan tombol mata bawaan pada input password; gunakan tombol portal saja. */
.login-box input[type="password"]::-ms-reveal,
.login-box input[type="password"]::-ms-clear { display: none; }


/* WEB_MARK8.6.5 - kaca login dan footer = material hover/terpilih workspace (putih 20%, cahaya dalam lembut) dengan
   blur dock; tanpa bayangan luar, tanpa rim/sorot tambahan (8.6.4 terlalu padat). */
.login-box.glass, .login-footer {
  background: rgba(255,255,255,.2) !important; background-image: none !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4) !important;
}
.login-box.glass::before, .login-box.glass::after { content: none !important; }

/* WEB_MARK8.6.6 - kaca sedikit lebih glassy: blur lebih tipis dan tanpa saturasi (bening, tidak vivid), garis kilau
   tipis di tepi atas dan cahaya dalam sedikit lebih kuat. Kolom input putih solid. */
.login-box.glass, .login-footer {
  backdrop-filter: blur(10px) saturate(100%) !important; -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
  background: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45) !important;
}
.login-box .a-field { background: #fff; box-shadow: none; border-color: rgba(0,0,0,.06); }
.login-box .a-field:focus-within { border-color: #0071e3; }


/* WEB_MARK8.6.8 - seperti 8.6.6, tetapi garis putih padat di tepi atas diganti tepi kilau 1px di sekeliling kartu
   yang opacity-nya naik-turun acak (dari hampir transparan sampai terang), sedikit dilunakkan. Footer: garis atas
   bergradasi opacity yang sama sepanjang lebarnya. */
.login-box.glass, .login-footer {
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45) !important;
}
.login-box.glass.glass::after {
  content: "" !important; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  padding: 1px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; filter: blur(.4px);
  background: conic-gradient(from 15deg,
    rgba(255,255,255,.75) 0deg, rgba(255,255,255,.10) 38deg, rgba(255,255,255,.42) 80deg, rgba(255,255,255,.04) 128deg,
    rgba(255,255,255,.30) 170deg, rgba(255,255,255,.06) 214deg, rgba(255,255,255,.22) 250deg, rgba(255,255,255,.03) 292deg,
    rgba(255,255,255,.58) 330deg, rgba(255,255,255,.75) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.login-footer {
  background-image: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.6) 18%, rgba(255,255,255,.12) 40%,
    rgba(255,255,255,.45) 63%, rgba(255,255,255,.05) 82%, rgba(255,255,255,.5) 100%) !important;
  background-size: 100% 1px !important; background-position: top !important; background-repeat: no-repeat !important;
}

/* WEB_MARK8.6.9 - tepi kilau lunak (memudar ke luar dan ke dalam) yang mengambil terang dari latar: cincin 2px dengan
   backdrop-filter brightness, jadi saat awan terang lewat di belakang tepi, kilaunya ikut menyala dan bergerak. */
.login-box.glass.glass::after {
  padding: 2px; filter: blur(.9px);
  backdrop-filter: brightness(1.85) saturate(.55); -webkit-backdrop-filter: brightness(1.85) saturate(.55);
  background: conic-gradient(from 15deg,
    rgba(255,255,255,.42) 0deg, rgba(255,255,255,.05) 38deg, rgba(255,255,255,.24) 80deg, rgba(255,255,255,.02) 128deg,
    rgba(255,255,255,.16) 170deg, rgba(255,255,255,.03) 214deg, rgba(255,255,255,.12) 250deg, rgba(255,255,255,.02) 292deg,
    rgba(255,255,255,.32) 330deg, rgba(255,255,255,.42) 360deg);
}

/* WEB_MARK8.6.9 - tepi kilau interaktif: LoginScene membaca terang awan di 8 titik sekeliling kartu dan 5 titik di
   atas footer (4x/detik), nilainya jadi opacity stop gradasi; transisi halus agar menyala/meredup alami. Tepi 2px
   dilunakkan blur sehingga memudar ke luar dan ke dalam, bukan garis. */
@property --rim1 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim2 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim3 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim4 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim5 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim6 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim7 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --rim8 { syntax: "<number>"; inherits: true; initial-value: .2; }
@property --kaki1 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki2 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki3 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki4 { syntax: "<number>"; inherits: true; initial-value: .25; }
@property --kaki5 { syntax: "<number>"; inherits: true; initial-value: .25; }
.login-box.glass { transition: --rim1 .8s ease, --rim2 .8s ease, --rim3 .8s ease, --rim4 .8s ease, --rim5 .8s ease, --rim6 .8s ease, --rim7 .8s ease, --rim8 .8s ease; }
.login-footer { transition: --kaki1 .8s ease, --kaki2 .8s ease, --kaki3 .8s ease, --kaki4 .8s ease, --kaki5 .8s ease; }
.login-box.glass.glass::after {
  padding: 1.5px; filter: blur(.8px); backdrop-filter: none; -webkit-backdrop-filter: none;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,var(--rim1)) 0deg, rgba(255,255,255,var(--rim2)) 45deg, rgba(255,255,255,var(--rim3)) 90deg,
    rgba(255,255,255,var(--rim4)) 135deg, rgba(255,255,255,var(--rim5)) 180deg, rgba(255,255,255,var(--rim6)) 225deg,
    rgba(255,255,255,var(--rim7)) 270deg, rgba(255,255,255,var(--rim8)) 315deg, rgba(255,255,255,var(--rim1)) 360deg);
}
.login-footer {
  background-image: linear-gradient(90deg, rgba(255,255,255,var(--kaki1)), rgba(255,255,255,var(--kaki2)) 25%, rgba(255,255,255,var(--kaki3)) 50%,
    rgba(255,255,255,var(--kaki4)) 75%, rgba(255,255,255,var(--kaki5))) !important;
  background-size: 100% 2px !important;
}

/* WEB_MARK8.6.10 - lebih ringan: tepi 1px tanpa blur, tanpa transisi variabel (tak ada gambar ulang per frame). */
.login-box.glass, .login-footer { transition: none !important; }
.login-box.glass.glass::after { padding: 1px; filter: none; }
.login-footer { background-size: 100% 1px !important; }

/* WEB_MARK8.7.1 - semua kolom login (username, sandi, e-mail, kode OTP, kode struk) seragam: putih, garis biru saat
   aktif tanpa cincin bayangan; ikon hilang saat kolom aktif atau terisi dan teks mengisi tempatnya (seperti cari sidebar). */
.login-box .a-field:is(:focus-within, :has(.a-input:not(:placeholder-shown))) .a-field-ico { display: none; }
.login-box .a-field:is(:focus-within, :has(.a-input:not(:placeholder-shown))) { padding-left: 14px; }
.login-box .a-input, .login-box .a-input:focus { box-shadow: none !important; }

/* WEB_MARK8.7.3 - radius kartu login = kartu beranda dan dock mobile. */
.login-box.glass { border-radius: 22px !important; }

/* WEB_MARK8.10.1 - selama login diproses, kolom sandi memakai pemuat layar halaman: putaran biru di tempat tombol mata
   dan garis berjalan tipis di tepi bawah kolom. */
.login-box .a-field.memuat { position: relative; overflow: hidden; }
.login-box .a-field.memuat::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 2px; border-radius: 2px; background: #0071e3;
  animation: a-field-jalan 1.1s ease-in-out infinite;
}
.login-box .a-field-memuat { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; color: #0071e3; }
.login-box .a-field-memuat i { display: block; font-size: 18px; animation: a-field-putar .9s linear infinite; }
@keyframes a-field-jalan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes a-field-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .login-box .a-field.memuat::after, .login-box .a-field-memuat i { animation-duration: 2.4s; }
}

@media (max-width: 900px) {
  .login-footer .copyright-note:not([hidden]) {
    position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px;
    padding: 8px 10px; border-radius: 8px; background: var(--menu-bg);
    color: var(--text-color); font-size: 10px; line-height: 1.4; text-align: left;
  }
}

/* Awan berukuran layar dan tanpa filter warna seperti login; kaca bersama di
   #buatLayout yang memberi blur 10px, bukan kanvas yang disaturasi dua kali. */
#workspaceCloudBackdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  width: 100vw; height: 100vh;
  pointer-events: none; background: #45a7ff;
}
#workspaceCloudBackdrop #login-three-scene { position: absolute; inset: 0; }
#workspaceCloudBackdrop canvas { display: block; width: 100% !important; height: 100% !important; opacity: .72; }
.coda-admin-shell .coda-layout { background: transparent; }
.coda-admin-shell .coda-login-glass {
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--coda-workspace-fill, rgba(255,255,255,.22));
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.coda-admin-shell .coda-login-glass::before,
.coda-admin-shell .coda-login-glass::after { display: none; }
.coda-admin-shell .coda-sidebar.coda-login-glass {
  --coda-panel-surface: transparent;
  --coda-master-blue-text: #003f7f;
  --coda-master-muted: #1c3f56;
  padding: 16px 0; gap: 8px;
}
.coda-admin-shell .coda-detail-panel.coda-login-glass {
  --coda-center-bg: transparent;
  --coda-panel-surface: transparent;
  --coda-muted: #1c3f56;
}
.coda-admin-shell .coda-detail-panel .admin-revenue-legend {
  gap: 0; background: transparent;
  border-width: 1px 0 0 1px;
}
.coda-admin-shell .coda-detail-panel .admin-revenue-legend-item {
  background: transparent;
  border: solid var(--coda-border); border-width: 0 1px 1px 0;
}
.coda-admin-shell .coda-sidebar-identity { padding: 0 16px; }
.coda-admin-shell .coda-sidebar-user { margin-top: 8px; }
.coda-admin-shell .coda-sidebar .coda-side-head { padding: 0 12px; background: transparent; }
.coda-admin-shell .coda-sidebar .coda-side-head::after,
.coda-admin-shell .coda-sidebar .coda-sidebar-footer::before { display: none; }
.coda-admin-shell .coda-sidebar .search-wrap { width: 100%; margin: 0; height: 44px; }
.coda-admin-shell .coda-sidebar .sidebar-main-scroll {
  flex: 0 1 auto; padding: 0 12px; gap: 8px;
}
.coda-admin-shell .coda-desktop-main-nav,
.coda-admin-shell .coda-sb-list,
.coda-admin-shell .coda-sidebar-footer { display: flex; flex-direction: column; gap: 8px; }
.coda-admin-shell .coda-desktop-main-nav { padding: 0; }
.coda-admin-shell .coda-sidebar .coda-sidebar-footer {
  padding: 0 12px; margin-top: 0; background: transparent;
}
.coda-admin-shell .coda-sidebar :is(.coda-sb-item,.toggle-wrap) {
  width: 100%; min-height: 44px; height: 44px; margin: 0; padding: 6px 4px; border: 0;
}
.coda-admin-shell .coda-sidebar .coda-desktop-user-nav { margin-bottom: 0 !important; }
.coda-admin-shell .coda-sidebar-actions { padding: 0; }
.coda-admin-shell .sidebar-mini .coda-sidebar-identity { padding: 0 12px; }
.coda-admin-shell .sidebar-mini .coda-sidebar :is(.coda-side-head,.sidebar-main-scroll,.coda-sidebar-footer) { width: 64px; }
.coda-admin-shell .sidebar-mini .coda-sidebar :is(.search-wrap,.coda-sb-item,.toggle-wrap) {
  width: 40px; min-width: 40px; max-width: 40px; margin: 0;
}
.coda-admin-shell .sidebar-mini .coda-sidebar-actions { width: 40px; padding: 0; }
@media (max-width: 980px) {
  .coda-admin-shell .coda-sidebar .toggle-wrap { display: none; }
  .coda-admin-shell .sidebar-open-mobile .coda-sidebar-scrim { left: var(--coda-sidebar-w); }
  .coda-admin-shell .sidebar-open-mobile .coda-detail-panel { clip-path: inset(0 0 0 var(--coda-sidebar-w)); }
}
/* Ponsel: kartu Beranda dan navigasi bawah ikut kaca. Navigasi bawah menutupi isi yang
   digulir, jadi hanya bilah kecil itu yang memakai backdrop-filter. */
@media (max-width: 980px) {
  .coda-admin-shell .coda-detail-panel .admin-home-mobile-item {
    background: rgba(255,255,255,.32); box-shadow: none;
  }
  .coda-admin-shell .coda-detail-panel .admin-home-mobile-item.is-featured {
    background: color-mix(in srgb, var(--coda-blue) 5%, rgba(255,255,255,.32));
  }
  .coda-admin-shell .coda-ig-menu {
    background: rgba(255,255,255,.22) !important;
    backdrop-filter: blur(var(--coda-workspace-blur, 28px)) saturate(128%) !important;
    -webkit-backdrop-filter: blur(var(--coda-workspace-blur, 28px)) saturate(128%) !important;
  }
}
@media (max-width: 600px) {
  #workspaceCloudBackdrop canvas { opacity: .72; }
}

/* WEB_MARK8.3.4 - kontrol akun sebagai baris menu (bahasa lalu keluar). */
.coda-admin-shell .coda-sidebar .coda-sidebar-actions,
.coda-admin-shell .sidebar-mini .coda-sidebar .coda-sidebar-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0;
}
.coda-admin-shell .coda-sidebar .coda-sb-action {
  box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 6px 4px;
  border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: var(--coda-text); font: inherit; text-align: left; cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.coda-admin-shell .coda-sidebar .coda-sb-action:is(:hover,:focus-visible) { background: var(--coda-surface-hover); }
.coda-admin-shell .sidebar-mini .coda-sidebar .coda-sb-action {
  width: 40px; min-width: 40px; max-width: 40px; gap: 0; justify-content: center;
}

/* Daftar panel tengah memakai ukuran, jarak, hover, dan pilihan aktif sidebar. */
.coda-admin-shell .coda-detail-panel .coda-info-list { gap: 8px; padding: 8px 12px; }
.coda-admin-shell .coda-detail-panel .coda-info-row.clickable-item {
  box-sizing: border-box; align-items: center; gap: 12px; min-height: 44px;
  padding: 6px 4px !important; margin: 0; border: 1px solid transparent; border-radius: 12px;
  transition: none;
}
.coda-admin-shell .coda-detail-panel .coda-group-header { padding: 8px 4px 0; }
@media (hover: hover) {
  .coda-admin-shell .coda-detail-panel .coda-info-row.clickable-item:hover { background: var(--coda-surface-hover) !important; }
}
.coda-admin-shell .coda-detail-panel .coda-info-row.clickable-item:active { background: var(--coda-surface-hover) !important; }
.coda-admin-shell .coda-detail-panel .coda-info-row.clickable-item.active-list-item {
  background: var(--coda-blue-bg) !important; border-color: transparent;
}
.coda-admin-shell .coda-detail-panel .coda-info-title { font-size: 11.5px; font-weight: 600; line-height: normal; margin-bottom: 2px; }
.coda-admin-shell .coda-detail-panel .coda-info-desc { font-size: 10px; line-height: 1.35; }

/* WEB_MARK8.3.5 - pencarian memakai kartu ikon seperti item lain (abu-abu ala Spotlight). */
#buatLayout#buatLayout :is(.coda-sb-ico):has(> .ph-magnifying-glass) { --ikon-bg: #8e8e93; }
.coda-admin-shell .coda-sidebar .search-wrap { padding: 0 4px; gap: 12px; }
#buatLayout .coda-sidebar .search-wrap .coda-sb-ico,
#buatLayout.sidebar-mini .coda-sidebar .search-wrap .coda-sb-ico {
  width: var(--coda-ui-size); min-width: var(--coda-ui-size); height: var(--coda-ui-size);
  border-radius: 10px; display: grid; place-items: center;
}
#buatLayout .coda-sidebar .search-wrap .coda-sb-ico i { font-size: var(--coda-icon-size); }
#buatLayout .coda-sidebar .search-wrap:is(:focus-within,:has(input:not(:placeholder-shown))) .coda-sb-ico { display: none; }


/* Pengguna dan kontrol akun ikut area gulir menu. */
.coda-admin-shell .coda-sidebar .coda-sidebar-scroll-foot { display: flex; flex-direction: column; gap: 8px; }
.coda-admin-shell .coda-sidebar .sidebar-main-scroll > .coda-sb-list:empty { display: none; }

/* Toolbar modul (lokasi, tanggal, PDF, dst.) naik ke baris kepala panel kanan di
   samping tombol perbesar; judul kepala dihilangkan. Kontrolnya mengikuti tombol
   perbesar: tinggi 32px, radius 8px, garis tipis, glyph abu-abu. */
@media (min-width: 981px) {
  /* #formContentArea memegang transform animasi geser, jadi ia containing block toolbar:
     toolbar digeser -44px ke baris kepala dan wadah dibiarkan meluap (panel tetap memotong). */
  /* Hanya saat ada toolbar modul: Pendapatan menggulir lewat #formContentArea (overflow-y:auto). */
  .coda-admin-shell #formContentArea:has(> :first-child > .admin-report-toolbar:first-child, > :first-child > form:first-child > .admin-report-toolbar:first-child),
  .coda-admin-shell #formContentArea > :first-child:has(> .admin-report-toolbar:first-child, > form:first-child > .admin-report-toolbar:first-child),
  .coda-admin-shell #formContentArea > :first-child > form:first-child:has(> .admin-report-toolbar:first-child) { overflow: visible; }
  .coda-admin-shell .coda-form-head { justify-content: flex-end; gap: 8px; }
  /* Kepala adalah flex item ber-z-index 10; konten dinaikkan hanya saat memuat toolbar modul. */
  .coda-admin-shell #formContentArea:has(> :first-child > .admin-report-toolbar:first-child, > :first-child > form:first-child > .admin-report-toolbar:first-child) { z-index: 11; }
  .coda-admin-shell .coda-form-head-copy { display: none; }
  .coda-admin-shell .coda-extra-header-actions { margin-right: auto; }
  .coda-admin-shell #formContentArea > :first-child > .admin-report-toolbar:first-child,
  .coda-admin-shell #formContentArea > :first-child > form:first-child > .admin-report-toolbar:first-child {
    position: absolute; top: -44px; left: 0; right: 92px; z-index: 2;
    box-sizing: border-box; display: flex !important; align-items: center !important; gap: 8px !important;
    width: auto !important; max-width: none !important; height: 44px; min-height: 44px; padding: 0 0 0 16px !important; margin: 0;
    border: 0 !important; background: transparent !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .coda-admin-shell #formContentArea .admin-report-toolbar > :is(button,select,input,a.coda-btn) {
    box-sizing: border-box; flex: 0 0 auto !important; align-self: center !important;
    height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: 0 !important;
    border: 1px solid rgba(0,0,0,.08) !important; border-radius: 8px !important;
    background: transparent !important; color: #86868b; box-shadow: none !important;
  }
  .coda-admin-shell #formContentArea .admin-report-toolbar > button { width: 32px !important; min-width: 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; font-size: 0 !important; line-height: 0 !important; }
  /* Glyph di tengah kartu dan seukuran glyph tombol perbesar. */
  .coda-admin-shell #formContentArea .admin-report-toolbar > button i,
  .coda-admin-shell #panelExpandBtn i { display: block; font-size: 14px !important; line-height: 1 !important; }
  /* Label teks tetap dibaca pembaca layar, tapi tombol tampil ikon saja seperti tombol perbesar. */
  .coda-admin-shell #formContentArea .admin-report-toolbar > button > :not(i) {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .coda-admin-shell #formContentArea .admin-report-toolbar > :is(select,input) { width: auto !important; min-width: 0 !important; max-width: 180px; padding: 0 8px !important; color: var(--coda-text) !important; font-size: 12px !important; }
  .coda-admin-shell #formContentArea .admin-report-toolbar > input[type="date"] { max-width: 136px; }
  .coda-admin-shell #formContentArea .admin-report-toolbar > a.coda-btn { display: inline-flex; align-items: center; padding: 0 12px !important; font-size: 12px !important; }
  .coda-admin-shell #formContentArea .admin-report-toolbar > strong { flex: 0 0 auto; padding: 0 4px; font-size: 12px; }
  .coda-admin-shell #formContentArea .admin-report-toolbar > :is(button,a.coda-btn):is(:hover,:focus-visible) { background: var(--coda-surface-hover) !important; color: var(--coda-blue); }
  .coda-admin-shell #formContentArea .admin-report-toolbar > button.primary { background: var(--coda-blue) !important; border-color: var(--coda-blue) !important; color: #fff !important; }
  .coda-admin-shell #formContentArea .admin-report-toolbar input:focus,
  .coda-admin-shell #formContentArea .admin-report-toolbar select:focus { border-color: var(--coda-blue) !important; box-shadow: 0 0 0 3px rgba(0,113,227,.2) !important; }
}

/* WEB_MARK8.3.6 - panel tengah tanpa garis pemisah agar menyatu (seamless).
   Garis kontrol (input, select, tombol) tetap sebagai batas kontrol, bukan pemisah. */
.coda-admin-shell .coda-detail-panel :not(input,select,textarea,button) { border-color: transparent !important; }
.coda-admin-shell .coda-detail-panel :is(hr,.coda-divider) { display: none !important; }

/* Ikon tampilan Pendapatan di kepala panel kanan: kartu bulat terpisah seperti toolbar modul. */
.coda-admin-shell .admin-revenue-head-actions {
  gap: 8px; height: 32px; overflow: visible; border: 0; background: transparent;
}
.coda-admin-shell .admin-revenue-head-action {
  box-sizing: border-box; width: 32px; min-width: 32px; height: 32px;
  display: grid; place-items: center; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 8px;
  background: transparent; color: #86868b; transition: background-color 150ms ease-out, color 150ms ease-out;
}
/* WEB_MARK8.9.4 - keadaan sama dengan toolbar panel kanan menu lain, termasuk di kartu slide-up
   ponsel yang berada di luar #formPanel: hover abu-abu, aktif biru muda (bukan biru penuh). */
.coda-admin-shell .admin-revenue-head-action:is(:hover,:focus-visible) { background: rgba(0,0,0,.06); color: #1d1d1f; }
.coda-admin-shell .admin-revenue-head-action:is(.active,[aria-pressed="true"]) { background: rgba(0,113,227,.12); border-color: rgba(0,113,227,.28) !important; color: #0071e3; }
.coda-admin-shell .admin-revenue-head-action:is(.active,[aria-pressed="true"]):is(:hover,:focus-visible) { background: rgba(0,113,227,.2); color: #0071e3; }
.coda-admin-shell .admin-revenue-head-action i { display: block; font-size: 14px; line-height: 1; }


/* WEB_MARK8.3.8 */
@media (min-width: 981px) {
  /* Kontrol periode Pendapatan tinggal di kepala panel kanan; bilah lama disembunyikan. */
  .coda-admin-shell .admin-revenue-toolbar { display: none !important; }
  .coda-admin-shell .admin-revenue-head-actions { margin-right: auto; }
  .coda-admin-shell .admin-revenue-head-actions > input[type="date"] {
    box-sizing: border-box; height: 32px; width: 136px; padding: 0 8px; border: 1px solid rgba(0,0,0,.08);
    border-radius: 8px; background: transparent; color: var(--coda-text); font: inherit; font-size: 12px;
  }
  .coda-admin-shell .admin-revenue-head-period { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; }
  .coda-admin-shell .admin-revenue-head-sep { display: none; }
}
/* Pencarian panel kanan */
.coda-panel-search { position: relative; flex: 0 0 auto; }
.coda-panel-search-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 280px; overflow-y: auto; }
.coda-panel-search-list button {
  display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--coda-text); font: inherit; font-size: 11.5px; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coda-panel-search-list button:hover { background: var(--coda-surface-hover); }
.coda-search-hit { outline: 2px solid var(--coda-blue); outline-offset: -2px; transition: outline-color .4s; }

/* Panel kanan: satu latar abu-putih muda rata, garis pemisah tipis dan samar. */
.coda-admin-shell .coda-form-panel {
  --coda-panel-surface: #f7f7f8; --coda-surface: #f7f7f8; --coda-center-bg: #f7f7f8;
  background: #f7f7f8;
}
.coda-admin-shell .coda-form-panel :is(.coda-form-panel-inner,.coda-form-head,.coda-preview-content,.coda-preview-content *:is(table,thead,tbody,tr,td,section,div):not([class*="positive"]):not([class*="negative"]):not(.active):not(.primary)) {
  background-color: transparent;
}
.coda-admin-shell .coda-form-panel :not(input,select,textarea,button,.primary,.active,[class*="positive"],[class*="negative"],[class*="status"]) {
  border-color: rgba(0,0,0,.06) !important;
}


/* WEB_MARK8.3.9 - pencarian panel kanan melebar ke kiri; hasil menempel di bawahnya. */
.coda-admin-shell .coda-form-head { z-index: auto; }
.coda-panel-search { position: relative; z-index: 20; width: 32px; height: 32px; flex: 0 0 auto; }
.coda-panel-search.open .coda-panel-search-btn { visibility: hidden; }
.coda-panel-search-bar {
  position: absolute; top: 0; right: 0; width: min(440px, 62vw); overflow: hidden;
  background: #f7f7f8; border: 1px solid rgba(0,0,0,.08); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08); transform-origin: right center;
  animation: coda-search-open .2s cubic-bezier(.32,.72,0,1);
}
@keyframes coda-search-open { from { clip-path: inset(0 0 0 90%); opacity: .6 } to { clip-path: inset(0); opacity: 1 } }
.coda-panel-search-row { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; color: #86868b; }
.coda-panel-search-row i { font-size: 14px; }
.coda-panel-search-row input {
  flex: 1; min-width: 0; height: 30px; border: 0; background: transparent; outline: none; box-shadow: none;
  font: inherit; font-size: 12px; color: var(--coda-text);
}
.coda-panel-search-row button { border: 0; background: transparent; color: #86868b; cursor: pointer; padding: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.coda-panel-search-row button:hover { background: var(--coda-surface-hover); color: var(--coda-blue); }
.coda-panel-search-list { margin: 0; padding: 4px; max-height: 280px; overflow-y: auto; border-top: 1px solid rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 2px; }
.coda-panel-search-count { padding: 4px 8px 2px; font-size: 10px; color: var(--coda-muted); }
.coda-search-miss { display: none !important; }
@media (prefers-reduced-motion: reduce) { .coda-panel-search-bar { animation: none; } }
.coda-admin-shell .coda-panel-search-row input:focus-visible { outline: none; box-shadow: none; border: 0; }

/* ===== Kaca, ikon, animasi (WEB_MARK8.4.7, konsolidasi) =====
   Satu warna unik per ikon (hsl cerah, tanpa daur ulang), satu gaya kartu, satu gaya hover/terpilih,
   satu gaya kolom input. Tanpa backdrop-filter per elemen: awan di belakang sudah diburamkan sekali. */
#buatLayout { --ikon-bg: hsl(210 80% 60%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-chart-pie-slice), #buatLayout#buatLayout .ig-menu-item > i.ph-chart-pie-slice { --ikon-bg: hsl(28 92% 58%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-file-text), #buatLayout#buatLayout .ig-menu-item > i.ph-file-text { --ikon-bg: hsl(214 92% 62%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-arrows-left-right), #buatLayout#buatLayout .ig-menu-item > i.ph-arrows-left-right { --ikon-bg: hsl(146 62% 46%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-identification-card), #buatLayout#buatLayout .ig-menu-item > i.ph-identification-card { --ikon-bg: hsl(242 80% 70%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-ticket), #buatLayout#buatLayout .ig-menu-item > i.ph-ticket { --ikon-bg: hsl(328 82% 66%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-buildings), #buatLayout#buatLayout .ig-menu-item > i.ph-buildings { --ikon-bg: hsl(172 70% 42%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-contactless-payment), #buatLayout#buatLayout .ig-menu-item > i.ph-contactless-payment { --ikon-bg: hsl(88 60% 44%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-qr-code), #buatLayout#buatLayout .ig-menu-item > i.ph-qr-code { --ikon-bg: hsl(6 84% 62%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-key), #buatLayout#buatLayout .ig-menu-item > i.ph-key { --ikon-bg: hsl(46 94% 50%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-broadcast), #buatLayout#buatLayout .ig-menu-item > i.ph-broadcast { --ikon-bg: hsl(192 88% 48%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-users), #buatLayout#buatLayout .ig-menu-item > i.ph-users { --ikon-bg: hsl(272 74% 66%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-tray), #buatLayout#buatLayout .ig-menu-item > i.ph-tray { --ikon-bg: hsl(225 72% 60%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-coins), #buatLayout#buatLayout .ig-menu-item > i.ph-coins { --ikon-bg: hsl(158 64% 43%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-certificate), #buatLayout#buatLayout .ig-menu-item > i.ph-certificate { --ikon-bg: hsl(207 80% 58%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-translate), #buatLayout#buatLayout .ig-menu-item > i.ph-translate { --ikon-bg: hsl(300 60% 64%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-sign-out), #buatLayout#buatLayout .ig-menu-item > i.ph-sign-out { --ikon-bg: hsl(346 86% 64%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-address-book), #buatLayout#buatLayout .ig-menu-item > i.ph-address-book { --ikon-bg: hsl(117 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-calendar-blank), #buatLayout#buatLayout .ig-menu-item > i.ph-calendar-blank { --ikon-bg: hsl(257 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-calendar-check), #buatLayout#buatLayout .ig-menu-item > i.ph-calendar-check { --ikon-bg: hsl(102 76% 46%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-calendar-dots), #buatLayout#buatLayout .ig-menu-item > i.ph-calendar-dots { --ikon-bg: hsl(131 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-calendar-x), #buatLayout#buatLayout .ig-menu-item > i.ph-calendar-x { --ikon-bg: hsl(228 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-car), #buatLayout#buatLayout .ig-menu-item > i.ph-car { --ikon-bg: hsl(286 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-car-profile), #buatLayout#buatLayout .ig-menu-item > i.ph-car-profile { --ikon-bg: hsl(314 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-caret-down), #buatLayout#buatLayout .ig-menu-item > i.ph-caret-down { --ikon-bg: hsl(159 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-caret-left), #buatLayout#buatLayout .ig-menu-item > i.ph-caret-left { --ikon-bg: hsl(17 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-caret-right), #buatLayout#buatLayout .ig-menu-item > i.ph-caret-right { --ikon-bg: hsl(203 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-chart-candlestick), #buatLayout#buatLayout .ig-menu-item > i.ph-chart-candlestick { --ikon-bg: hsl(182 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-clock-counter-clockwise), #buatLayout#buatLayout .ig-menu-item > i.ph-clock-counter-clockwise { --ikon-bg: hsl(356 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-folders), #buatLayout#buatLayout .ig-menu-item > i.ph-folders { --ikon-bg: hsl(37 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-house), #buatLayout#buatLayout .ig-menu-item > i.ph-house { --ikon-bg: hsl(337 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-house-line), #buatLayout#buatLayout .ig-menu-item > i.ph-house-line { --ikon-bg: hsl(95 76% 46%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-identification-badge), #buatLayout#buatLayout .ig-menu-item > i.ph-identification-badge { --ikon-bg: hsl(109 76% 46%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-list), #buatLayout#buatLayout .ig-menu-item > i.ph-list { --ikon-bg: hsl(124 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-list-bullets), #buatLayout#buatLayout .ig-menu-item > i.ph-list-bullets { --ikon-bg: hsl(138 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-list-checks), #buatLayout#buatLayout .ig-menu-item > i.ph-list-checks { --ikon-bg: hsl(221 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-magnifying-glass), #buatLayout#buatLayout .ig-menu-item > i.ph-magnifying-glass { --ikon-bg: hsl(235 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-map-pin), #buatLayout#buatLayout .ig-menu-item > i.ph-map-pin { --ikon-bg: hsl(249 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-money), #buatLayout#buatLayout .ig-menu-item > i.ph-money { --ikon-bg: hsl(264 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-moon), #buatLayout#buatLayout .ig-menu-item > i.ph-moon { --ikon-bg: hsl(279 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-package), #buatLayout#buatLayout .ig-menu-item > i.ph-package { --ikon-bg: hsl(293 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-pencil-simple), #buatLayout#buatLayout .ig-menu-item > i.ph-pencil-simple { --ikon-bg: hsl(307 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-plugs-connected), #buatLayout#buatLayout .ig-menu-item > i.ph-plugs-connected { --ikon-bg: hsl(321 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-presentation-chart), #buatLayout#buatLayout .ig-menu-item > i.ph-presentation-chart { --ikon-bg: hsl(82 76% 46%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-receipt), #buatLayout#buatLayout .ig-menu-item > i.ph-receipt { --ikon-bg: hsl(152 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-shield-check), #buatLayout#buatLayout .ig-menu-item > i.ph-shield-check { --ikon-bg: hsl(165 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-squares-four), #buatLayout#buatLayout .ig-menu-item > i.ph-squares-four { --ikon-bg: hsl(1 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-user-circle), #buatLayout#buatLayout .ig-menu-item > i.ph-user-circle { --ikon-bg: hsl(11 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-user-focus), #buatLayout#buatLayout .ig-menu-item > i.ph-user-focus { --ikon-bg: hsl(22 80% 63%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-warning-circle), #buatLayout#buatLayout .ig-menu-item > i.ph-warning-circle { --ikon-bg: hsl(51 76% 46%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-x-circle), #buatLayout#buatLayout .ig-menu-item > i.ph-x-circle { --ikon-bg: hsl(177 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-article), #buatLayout#buatLayout .ig-menu-item > i.ph-article { --ikon-bg: hsl(187 62% 45%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-check-circle), #buatLayout#buatLayout .ig-menu-item > i.ph-check-circle { --ikon-bg: hsl(197 62% 45%); }
/* Editor Pengguna berada di luar #buatLayout: kartu ikonnya memakai palet sidebar yang sama. */
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-chart-pie-slice) { --ikon-bg: hsl(28 92% 58%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-file-text) { --ikon-bg: hsl(214 92% 62%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-arrows-left-right) { --ikon-bg: hsl(146 62% 46%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-identification-card) { --ikon-bg: hsl(242 80% 70%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-ticket) { --ikon-bg: hsl(328 82% 66%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-buildings) { --ikon-bg: hsl(172 70% 42%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-contactless-payment) { --ikon-bg: hsl(88 60% 44%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-qr-code) { --ikon-bg: hsl(6 84% 62%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-key) { --ikon-bg: hsl(46 94% 50%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-broadcast) { --ikon-bg: hsl(192 88% 48%); }
#adminWebUserDialog .admin-web-user-permission-icon:has(> .ph-users) { --ikon-bg: hsl(272 74% 66%); }
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.coda-form-grid-item:not(.admin-home-mobile-item) .grid-ico), #buatLayout .ig-menu-item > i, #buatLayout .coda-sidebar :is(.toggle-wrap,.coda-sb-action) .coda-sb-ico {
  position: relative; box-sizing: border-box; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: color-mix(in srgb, var(--ikon-bg) 82%, transparent) !important; background-image: none !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.16), inset 0 0 26px -10px rgba(255,255,255,.22),
              0 3px 8px color-mix(in srgb, var(--ikon-bg) 22%, transparent) !important;
}
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.coda-form-grid-item:not(.admin-home-mobile-item) .grid-ico)::before { content: none; }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.coda-form-grid-item:not(.admin-home-mobile-item) .grid-ico)::after {
  display: block !important; content: ""; position: absolute; inset: 0; width: auto; height: auto; transform: none; opacity: 1;
  border-radius: 10px; pointer-events: none; padding: 1px; box-shadow: none;
  background: linear-gradient(177deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.18) 5%, rgba(255,255,255,.06) 18%,
    rgba(255,255,255,.03) 45%, rgba(255,255,255,.03) 64%, rgba(255,255,255,.09) 88%, rgba(255,255,255,.21) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico,.ig-menu-item) i, #buatLayout .ig-menu-item > i { color: #fff !important; position: relative; z-index: 1; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico,.ig-menu-item) i.ph-fill::before, #buatLayout .ig-menu-item > i.ph-fill::before { background: none; -webkit-text-fill-color: #fff; }
/* Pencarian di sidebar: kartu ikonnya mengikuti gaya yang sama. */
#buatLayout#buatLayout .coda-sb-ico:has(> .ph-magnifying-glass) { border: 0 !important; }
/* Hover dan terpilih baris = gaya kolom search idle (material kartu login). */
.coda-admin-shell .coda-sidebar .coda-sidebar-user:is(:hover,[aria-expanded="true"]),
.coda-admin-shell :is(.coda-sidebar .coda-sb-item, .coda-sidebar .coda-sb-action, .coda-sidebar .toggle-wrap, .coda-detail-panel .coda-info-row.clickable-item):is(:hover,.active,.active-list-item), .coda-admin-shell.coda-admin-shell .sidebar-mini .coda-sidebar .search-wrap:hover, .coda-admin-shell .coda-sidebar .search-wrap:not(:focus-within), .coda-admin-shell #mobileSearchContainer:not(:focus-within) {
  background-color: rgba(255,255,255,.2) !important; background-image: none !important; border-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05) !important;
}
.coda-admin-shell :is(.coda-sidebar .coda-sb-item, .coda-sidebar .coda-sb-action, .coda-sidebar .toggle-wrap, .coda-detail-panel .coda-info-row.clickable-item):is(:hover,.active,.active-list-item)::before, .coda-admin-shell :is(.coda-sidebar .coda-sb-item, .coda-sidebar .coda-sb-action, .coda-sidebar .toggle-wrap, .coda-detail-panel .coda-info-row.clickable-item):is(:hover,.active,.active-list-item)::after { content: none; }
.coda-panel-search-bar { border: 1px solid rgba(0,0,0,.06) !important; }
/* Animasi: sidebar dan panel kanan satu easing lembut; panel tengah tetap utuh saat kolomnya menyusut. */
.coda-admin-shell .coda-layout { will-change: auto; transition: grid-template-columns .3s cubic-bezier(.32,.72,0,1); }
.coda-admin-shell .coda-detail-panel { transition: none; }
.coda-admin-shell .coda-layout.panel-expanded .coda-detail-panel { opacity: 1; visibility: hidden; pointer-events: none; transition: visibility 0s linear .3s; }
#buatLayout#buatLayout.panel-expanded :is(.coda-center-view-toggle, #adminRevenueViewToggle) { display: none !important; }
.coda-admin-shell .coda-sidebar .coda-sb-text { transition: opacity .25s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .coda-admin-shell .coda-layout, .coda-admin-shell .coda-layout.panel-expanded .coda-detail-panel, .coda-admin-shell .coda-sidebar .coda-sb-text { transition: none; animation: none; } }

/* WEB_MARK8.4.8 - dropdown pencarian solid; toolbar mengalah saat kolom pencarian melebar. */
.coda-panel-search-bar { background: #fff !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 8px 24px rgba(0,0,0,.14) !important; }
@media (min-width: 981px) {
  #formPanel.coda-search-open #formContentArea > :first-child > .admin-report-toolbar:first-child,
  #formPanel.coda-search-open #formContentArea > :first-child > form:first-child > .admin-report-toolbar:first-child {
    right: calc(min(440px, 62vw) + 64px); flex-wrap: wrap !important; align-content: flex-start; row-gap: 12px;
    padding-top: 6px !important; overflow: hidden !important;
  }
  #formPanel.coda-search-open #formContentArea .admin-report-toolbar > :is(select, input[type="date"], input[type="month"]) {
    width: 32px !important; min-width: 32px !important; max-width: 32px !important; padding: 0 !important; color: transparent !important;
  }
  #formPanel.coda-search-open :is(.admin-report-toolbar, .admin-revenue-head-actions) > :is(input[type="date"], input[type="month"])::-webkit-datetime-edit { display: none; }
  #formPanel.coda-search-open :is(.admin-report-toolbar, .admin-revenue-head-actions) > :is(input[type="date"], input[type="month"])::-webkit-calendar-picker-indicator { margin: 0 auto; }
  #formPanel.coda-search-open .coda-extra-header-actions { min-width: 0; max-width: calc(100% - min(440px, 62vw) - 100px); overflow: hidden; }
  #formPanel.coda-search-open .admin-revenue-head-actions { flex-wrap: wrap; row-gap: 12px; height: 32px; overflow: hidden; }
  #formPanel.coda-search-open .admin-revenue-head-actions > input[type="date"] { width: 32px; padding: 0; color: transparent; }
}
@media (min-width: 981px) { #formPanel.coda-search-open #formContentArea .admin-report-toolbar > select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='%2386868b' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E") center / 12px no-repeat !important; appearance: none; -webkit-appearance: none; } }

/* WEB_MARK8.4.9 - ruang kiri area hover/terpilih = ruang atas-bawah ikon (6px); panel tengah tak menata ulang barisnya saat menyusut. */
.coda-admin-shell .coda-layout:not(.sidebar-mini) .coda-sidebar :is(.coda-sb-item, .coda-sb-action, .toggle-wrap) { padding-left: 6px; }
.coda-admin-shell .coda-layout:not(.sidebar-mini) .coda-sidebar .search-wrap { padding: 0 4px 0 6px; }
.coda-admin-shell .coda-detail-panel .coda-info-row.clickable-item { padding: 6px 4px 6px 6px !important; }
@media (min-width: 981px) { .coda-admin-shell .coda-detail-panel > * { min-width: 260px; } }

/* WEB_MARK8.4.10 - memuat tanpa tulisan: hanya putaran halus yang muncul pelan (setelah jeda), tanpa kedip. */
@keyframes coda-fade-in { from { opacity: 0 } to { opacity: 1 } }
.admin-report-loading { animation: coda-fade-in .3s ease .4s both; }
.admin-report-loading > div { font-size: 0; }
.admin-report-loading i { margin: 0 auto; }
/* Panel tengah: kartu ikon putih, glyph berwarna sesuai karakter ikon. */
#buatLayout#buatLayout .coda-info-ico {
  background: rgba(255,255,255,.78) !important; box-shadow: 0 1px 4px rgba(0,60,140,.10) !important;
  border: 0 !important; transition: none !important; animation: none !important;
}
#buatLayout#buatLayout .coda-info-ico i { color: var(--ikon-bg) !important; text-shadow: none; }
#buatLayout#buatLayout .coda-info-ico i.ph-fill::before { -webkit-text-fill-color: var(--ikon-bg); }
#buatLayout#buatLayout .coda-info-ico::after { display: none !important; }

/* Ikon sidebar bervariasi seperti deretan ikon macOS: kartu warna + glyph putih (biasa), kartu putih + glyph berwarna (terang),
   kartu warna pekat + glyph warna muda (gelap). Tiap ikon tetap punya hue sendiri. */
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-file-text),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-buildings),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-key),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-translate),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-magnifying-glass),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-caret-left),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-list) { --sb-card: rgba(255,255,255,.9); --sb-glyph: var(--ikon-bg); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-identification-card),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-users),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-chart-candlestick),
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-house) { --sb-card: color-mix(in srgb, var(--ikon-bg) 55%, #000); --sb-glyph: color-mix(in srgb, var(--ikon-bg) 30%, #fff); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico { background: var(--sb-card, color-mix(in srgb, var(--ikon-bg) 82%, transparent)) !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico i { color: var(--sb-glyph, #fff) !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico i.ph-fill::before { -webkit-text-fill-color: var(--sb-glyph, #fff); }

/* WEB_MARK8.5.1 */
/* Footer sidebar selalu di dasar: area menu mengisi sisa tinggi (collapse tak menggantung di layar tinggi). */
.coda-admin-shell .coda-sidebar .sidebar-main-scroll { flex: 1 1 auto; min-height: 0; }
/* Panel tengah: daftar sampai dasar panel, tanpa potongan 20px saat digulir. */
.coda-admin-shell .coda-detail-body { padding-bottom: 0; }
/* Submenu sidebar: jarak antar baris sama dengan menu utama (8px) dan ikon bergaya sama dengan ikon panel tengah. */
.coda-admin-shell .coda-sidebar .coda-expanded-context > div { display: flex; flex-direction: column; gap: 8px; }
#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico { background: rgba(255,255,255,.78) !important; box-shadow: 0 1px 4px rgba(0,60,140,.10) !important; }
#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico i { color: var(--ikon-bg) !important; text-shadow: none; }
#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico i.ph-fill::before { -webkit-text-fill-color: var(--ikon-bg); }
#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico::after { display: none !important; }
/* Rail mini: kotak hover/terpilih persis 40x40 mengelilingi ikon 32x32 (4px merata); irama 52px dijaga. */
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar :is(.coda-sb-item, .coda-sb-action, .toggle-wrap, .search-wrap) { box-sizing: border-box; height: 40px; min-height: 40px; padding: 3px; }
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-footer, .coda-sidebar-scroll-foot, .coda-sidebar-actions, .sidebar-main-scroll) { gap: 12px; }

/* WEB_MARK8.5.2 - ikon sidebar sebagai ikon aplikasi: tiap ikon punya warna dan karakter sendiri, tanpa kartu putih. */
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-chart-pie-slice) { --ap-a: #ffb347; --ap-b: #ff7a00; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-file-text) { --ap-a: #5ab0ff; --ap-b: #1a6ff0; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-arrows-left-right) { --ap-a: #5fe08a; --ap-b: #1fb355; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-identification-card) { --ap-a: #8a8cff; --ap-b: #5a4be0; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-ticket) { --ap-a: #ff7fb0; --ap-b: #f0306b; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-buildings) { --ap-a: #45e0d0; --ap-b: #0d9aa8; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-contactless-payment) { --ap-a: #2b2f36; --ap-b: #0f1114; --sb-glyph: #7dff9b; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code) { --ap-a: #4a5566; --ap-b: #1c2330; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-key) { --ap-a: #ffe066; --ap-b: #f5b800; --sb-glyph: #7a4a00; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-broadcast) { --ap-a: #4fd8ff; --ap-b: #0a84ff; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-users) { --ap-a: #c690ff; --ap-b: #8a3ffc; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-translate) { --ap-a: #7bc8ff; --ap-b: #2f7bff; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-sign-out) { --ap-a: #ff8a80; --ap-b: #e5333a; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-magnifying-glass) { --ap-a: #8e939c; --ap-b: #565b66; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-caret-left) { --ap-a: #c3c8d2; --ap-b: #7b8190; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-list) { --ap-a: #c3c8d2; --ap-b: #7b8190; --sb-glyph: #fff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico {
  background: linear-gradient(180deg, var(--ap-a, color-mix(in srgb, var(--ikon-bg) 78%, #fff)), var(--ap-b, var(--ikon-bg))) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.14), 0 2px 5px color-mix(in srgb, var(--ap-b, var(--ikon-bg)) 45%, transparent) !important;
}
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico::after { display: none !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico i.ph-fill::before { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
/* Panah baris panel tengah hanya pada baris aktif. */
.coda-admin-shell .coda-detail-panel .coda-info-row:not(.active-list-item) .ph-caret-right { visibility: hidden; }
/* Kolom search sidebar: animasi kata dipotong di dalam kolom; fokus hanya garis biru; radius 12px. */
.coda-admin-shell .coda-sidebar .search-wrap { border-radius: 12px !important; }
.coda-admin-shell .coda-sidebar .search-wrap .coda-sb-text { overflow: hidden; }
.coda-admin-shell .coda-sidebar .search-wrap:focus-within { box-shadow: none !important; }
.coda-panel-search.has-query .coda-panel-search-btn { color: var(--coda-blue); border-color: var(--coda-blue); }

/* WEB_MARK8.5.3 - geser sidebar tanpa tata letak per frame; ikon app kreatif; kartu putih bergaya sama di panel tengah. */
html[data-geser] .coda-admin-shell .coda-layout { transition: none !important; }
.coda-admin-shell .coda-detail-panel, .coda-admin-shell .coda-form-panel { will-change: auto; }
html[data-geser] .coda-admin-shell :is(.coda-detail-panel, .coda-form-panel) { will-change: transform; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-chart-pie-slice) { --ap-bg: radial-gradient(circle at 72% 22%, #ffe08a 0, rgba(255,224,138,0) 45%), linear-gradient(160deg,#ff9a1f,#f0560a); --sb-glyph: #fff; --ap-sh: #f0560a; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-file-text) { --ap-bg: linear-gradient(135deg,#2b66ff 0%,#00c2ff 100%); --sb-glyph: #fff; --ap-sh: #2b66ff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-arrows-left-right) { --ap-bg: linear-gradient(135deg,#19c37d 0 50%,#0aa5e8 50% 100%); --sb-glyph: #fff; --ap-sh: #0aa5e8; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-identification-card) { --ap-bg: linear-gradient(155deg,#1a2a6c,#4b3bb0); --sb-glyph: #ffd54f; --ap-sh: #4b3bb0; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-ticket) { --ap-bg: linear-gradient(135deg,#ff4d8d,#ff9a3c); --sb-glyph: #fff; --ap-sh: #ff4d8d; --ap-out: 1.5px dashed rgba(255,255,255,.8); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-buildings) { --ap-bg: linear-gradient(180deg,#38d0e0 0 62%,#0d7280 62% 100%); --sb-glyph: #fff; --ap-sh: #0d7280; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-contactless-payment) { --ap-bg: linear-gradient(160deg,#23272e,#0b0d10); --sb-glyph: #6dff9a; --ap-sh: #0b0d10; --ap-glow: 0 0 6px rgba(109,255,154,.85); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code) { --ap-bg: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 6px), linear-gradient(160deg,#4a5566,#171c26); --sb-glyph: #fff; --ap-sh: #171c26; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-key) { --ap-bg: conic-gradient(from 210deg at 50% 50%,#fff3b0,#f7c21a,#b97d00,#ffe27a,#fff3b0); --sb-glyph: #6b3f00; --ap-sh: #b97d00; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-broadcast) { --ap-bg: radial-gradient(circle at 50% 50%, #12b8ff 0 28%, #0a84ff 29% 52%, #0757c9 53% 100%); --sb-glyph: #fff; --ap-sh: #0757c9; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-users) { --ap-bg: linear-gradient(160deg,#b05cff,#ff4fd8); --sb-glyph: #ffe3ff; --ap-sh: #b05cff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-translate) { --ap-bg: linear-gradient(135deg,#1e6bff 0 50%,#56b6ff 50% 100%); --sb-glyph: #fff; --ap-sh: #1e6bff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-sign-out) { --ap-bg: radial-gradient(circle at 50% 30%, #ff6b6b, #c4141f); --sb-glyph: #fff; --ap-sh: #c4141f; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-magnifying-glass) { --ap-bg: linear-gradient(160deg,#3a3f4a,#15181d); --sb-glyph: #7fd8ff; --ap-sh: #15181d; --ap-glow: 0 0 6px rgba(127,216,255,.8); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-caret-left) { --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0); --sb-glyph: #2b2f38; --ap-sh: #8b92a0; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-list) { --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0); --sb-glyph: #2b2f38; --ap-sh: #8b92a0; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico {
  background: var(--ap-bg, linear-gradient(180deg, color-mix(in srgb, var(--ikon-bg) 78%, #fff), var(--ikon-bg))) !important;
  outline: var(--ap-out, 0 solid transparent); outline-offset: -4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 5px color-mix(in srgb, var(--ap-sh, var(--ikon-bg)) 45%, transparent) !important;
}
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico i { text-shadow: var(--ap-glow, 0 1px 1px rgba(0,0,0,.2)); }
/* Kartu ikon putih: kedalaman sama dengan ikon sidebar, isinya putih seragam; glyph tetap berwarna. */
#buatLayout#buatLayout .coda-info-ico, #buatLayout#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico {
  background: linear-gradient(180deg, #ffffff, #e8edf4) !important;
  outline: 0 solid transparent;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.09), 0 2px 5px rgba(0,60,140,.2) !important;
}
#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico i { color: var(--ikon-bg) !important; text-shadow: none; }
#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico i.ph-fill::before { -webkit-text-fill-color: var(--ikon-bg); filter: none; }
#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-expanded-context .coda-sb-ico::after { display: none !important; }

/* WEB_MARK8.5.4 - varian ikon baru: Transaksi dua koin bertukar, Pengguna aurora, Penghuni jendela malam,
   Pembayaran kartu bergaris magnet, QRIS DOKU berlogo teks DOKU, Cari identik dengan Collapse. */
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-arrows-left-right) { --ap-bg: radial-gradient(circle at 32% 50%, #ffb03a 0 30%, transparent 31%), radial-gradient(circle at 68% 50%, #7a6bff 0 30%, transparent 31%), linear-gradient(160deg,#20254a,#0d1026); --sb-glyph: #fff; --ap-sh: #20254a; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-users) { --ap-bg: radial-gradient(circle at 20% 20%, #ff6ad5 0, transparent 55%), radial-gradient(circle at 85% 30%, #36e2ff 0, transparent 50%), radial-gradient(circle at 50% 95%, #8a5cff 0, transparent 60%), #3a1f78; --sb-glyph: #fff; --ap-sh: #8a5cff; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-buildings) { --ap-bg: radial-gradient(circle, rgba(255,214,102,.75) 0 1px, transparent 1.6px) 0 0 / 6px 6px, linear-gradient(180deg,#24479e,#0b1a44); --sb-glyph: #ffe08a; --ap-sh: #0b1a44; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-contactless-payment) { --ap-bg: linear-gradient(180deg, transparent 0 24%, rgba(0,0,0,.38) 24% 36%, transparent 36%), linear-gradient(135deg,#7f5af0,#2cb1ff); --sb-glyph: #fff; --ap-sh: #7f5af0; --ap-glow: 0 1px 1px rgba(0,0,0,.25); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-magnifying-glass) { --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0); --sb-glyph: #2b2f38; --ap-sh: #8b92a0; --ap-glow: 0 1px 1px rgba(0,0,0,.2); }
#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code):not(.coda-expanded-context .coda-sb-ico) { --ap-bg: linear-gradient(180deg,#ef3b33,#c8141c); --ap-sh: #c8141c; }
#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code):not(.coda-expanded-context .coda-sb-ico) > i { visibility: hidden; }
#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code):not(.coda-expanded-context .coda-sb-ico)::after { display: grid !important; place-items: center; content: "DOKU"; position: absolute; inset: 0; padding: 0; background: none; mask: none; -webkit-mask: none;
  color: #fff; font: 800 9px/1 system-ui, sans-serif; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0,0,0,.25); }

/* WEB_MARK8.5.5 - empat ikon kembali ke gaya iOS: gradasi lembut satu keluarga warna, glyph putih, tanpa pola. */
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-arrows-left-right) { --ap-bg: linear-gradient(180deg,#5af07a,#14b03a); --sb-glyph: #fff; --ap-sh: #14b03a; --ap-glow: 0 1px 1px rgba(0,0,0,.2); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-users) { --ap-bg: linear-gradient(180deg,#d68cff,#8a2be2); --sb-glyph: #fff; --ap-sh: #8a2be2; --ap-glow: 0 1px 1px rgba(0,0,0,.2); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-buildings) { --ap-bg: linear-gradient(180deg,#5ee7df,#0e9aa8); --sb-glyph: #fff; --ap-sh: #0e9aa8; --ap-glow: 0 1px 1px rgba(0,0,0,.2); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-contactless-payment) { --ap-bg: linear-gradient(180deg,#5a5e68,#1c1e23); --sb-glyph: #fff; --ap-sh: #1c1e23; --ap-glow: 0 1px 1px rgba(0,0,0,.2); }

/* WEB_MARK8.5.6 - logo DOKU (DO/KU putih di merah DOKU), Penghuni pintu merah muda, Voucher teal. */
#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code):not(.coda-expanded-context .coda-sb-ico) { --ap-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%279%27%3E%3Cpath%20d%3D%27M12%2014H30A16%2016%200%200%201%2030%2046H12%27%2F%3E%3Ccircle%20cx%3D%2768%27%20cy%3D%2730%27%20r%3D%2714%27%2F%3E%3Cpath%20d%3D%27M16%2056V88M42%2056L24%2072L42%2088%27%2F%3E%3Cpath%20d%3D%27M56%2056V74A13%2013%200%200%200%2082%2074V56%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat, linear-gradient(180deg,#f0353a,#d0161d); --ap-sh: #d0161d; }
#buatLayout#buatLayout#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code):not(.coda-expanded-context .coda-sb-ico)::after { display: none !important; content: none; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-door-open) { --ap-bg: linear-gradient(180deg,#ff8fb1,#e8366d); --sb-glyph: #fff; --ap-sh: #e8366d; --ap-glow: 0 1px 1px rgba(0,0,0,.2); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-ticket) { --ap-bg: linear-gradient(180deg,#5ee7df,#0e9aa8); --ap-sh: #0e9aa8; }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-door-open), #buatLayout#buatLayout .ig-menu-item > i.ph-door-open { --ikon-bg: hsl(340 80% 58%); }

/* WEB_MARK8.5.7 - tepi area gulir sidebar memudar (gradasi), bukan terpotong tajam; deskripsi panel tengah satu baris. */
.coda-admin-shell .coda-sidebar .sidebar-main-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%);
  padding-top: 10px; padding-bottom: 18px;
}
.coda-admin-shell .coda-detail-panel .coda-info-row .coda-info-text, .coda-admin-shell .coda-detail-panel .coda-info-row > :not(.coda-info-ico) { min-width: 0; }
.coda-admin-shell .coda-detail-panel .coda-info-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* WEB_MARK8.5.8 - mode mobile mengikuti desktop: ikon aplikasi yang sama, dock melayang, baris atas
   (cari bergaya sidebar + Bahasa + Keluar), kartu menu bergaya kartu login, lembar detail seperti panel kanan. */
#buatLayout#buatLayout .ig-menu-item > i.ph-house, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-house) { --ap-bg: linear-gradient(180deg,#6d8bff,#3b4fd8); --sb-glyph: #fff; --ap-sh: #3b4fd8; }
#buatLayout#buatLayout .ig-menu-item > i.ph-chart-pie-slice, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-chart-pie-slice) { --ap-bg: radial-gradient(circle at 72% 22%, #ffe08a 0, rgba(255,224,138,0) 45%), linear-gradient(160deg,#ff9a1f,#f0560a); --sb-glyph: #fff; --ap-sh: #f0560a; }
#buatLayout#buatLayout .ig-menu-item > i.ph-file-text, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-file-text) { --ap-bg: linear-gradient(135deg,#2b66ff 0%,#00c2ff 100%); --sb-glyph: #fff; --ap-sh: #2b66ff; }
#buatLayout#buatLayout .ig-menu-item > i.ph-arrows-left-right, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-arrows-left-right) { --ap-bg: linear-gradient(180deg,#5af07a,#14b03a); --sb-glyph: #fff; --ap-sh: #14b03a; }
#buatLayout#buatLayout .ig-menu-item > i.ph-identification-card, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-identification-card) { --ap-bg: linear-gradient(155deg,#1a2a6c,#4b3bb0); --sb-glyph: #ffd54f; --ap-sh: #4b3bb0; }
#buatLayout#buatLayout .ig-menu-item > i.ph-ticket, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-ticket) { --ap-bg: linear-gradient(180deg,#5ee7df,#0e9aa8); --sb-glyph: #fff; --ap-sh: #0e9aa8; --ap-out: 1.5px dashed rgba(255,255,255,.8); }
#buatLayout#buatLayout .ig-menu-item > i.ph-door-open, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-door-open) { --ap-bg: linear-gradient(180deg,#ff8fb1,#e8366d); --sb-glyph: #fff; --ap-sh: #e8366d; }
#buatLayout#buatLayout .ig-menu-item > i.ph-contactless-payment, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-contactless-payment) { --ap-bg: linear-gradient(180deg,#5a5e68,#1c1e23); --sb-glyph: #fff; --ap-sh: #1c1e23; }
#buatLayout#buatLayout .ig-menu-item > i.ph-qr-code, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-qr-code) { --ap-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke%3D%27%23fff%27%20stroke-width%3D%279%27%3E%3Cpath%20d%3D%27M12%2014H30A16%2016%200%200%201%2030%2046H12%27%2F%3E%3Ccircle%20cx%3D%2768%27%20cy%3D%2730%27%20r%3D%2714%27%2F%3E%3Cpath%20d%3D%27M16%2056V88M42%2056L24%2072L42%2088%27%2F%3E%3Cpath%20d%3D%27M56%2056V74A13%2013%200%200%200%2082%2074V56%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat, linear-gradient(180deg,#f0353a,#d0161d); --sb-glyph: transparent; --ap-sh: #d0161d; }
#buatLayout#buatLayout .ig-menu-item > i.ph-key, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-key) { --ap-bg: conic-gradient(from 210deg at 50% 50%,#fff3b0,#f7c21a,#b97d00,#ffe27a,#fff3b0); --sb-glyph: #6b3f00; --ap-sh: #b97d00; }
#buatLayout#buatLayout .ig-menu-item > i.ph-broadcast, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-broadcast) { --ap-bg: radial-gradient(circle at 50% 50%, #12b8ff 0 28%, #0a84ff 29% 52%, #0757c9 53% 100%); --sb-glyph: #fff; --ap-sh: #0757c9; }
#buatLayout#buatLayout .ig-menu-item > i.ph-users, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-users) { --ap-bg: linear-gradient(180deg,#d68cff,#8a2be2); --sb-glyph: #fff; --ap-sh: #8a2be2; }
#buatLayout#buatLayout .ig-menu-item > i.ph-translate, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-translate) { --ap-bg: linear-gradient(135deg,#1e6bff 0 50%,#56b6ff 50% 100%); --sb-glyph: #fff; --ap-sh: #1e6bff; }
#buatLayout#buatLayout .ig-menu-item > i.ph-sign-out, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-sign-out) { --ap-bg: radial-gradient(circle at 50% 30%, #ff6b6b, #c4141f); --sb-glyph: #fff; --ap-sh: #c4141f; }
#buatLayout#buatLayout .ig-menu-item > i.ph-magnifying-glass, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico):has(> .ph-magnifying-glass) { --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0); --sb-glyph: #2b2f38; --ap-sh: #8b92a0; }
#buatLayout#buatLayout :is(.ig-menu-item > i, .coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico) {
  background: var(--ap-bg, linear-gradient(180deg, color-mix(in srgb, var(--ikon-bg) 78%, #fff), var(--ikon-bg))) !important;
  outline: var(--ap-out, 0 solid transparent); outline-offset: -4px; border: 0 !important; opacity: 1 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 5px color-mix(in srgb, var(--ap-sh, var(--ikon-bg)) 45%, transparent) !important;
}
#buatLayout#buatLayout :is(.ig-menu-item > i, .coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico)::after { display: none !important; }
#buatLayout#buatLayout .ig-menu-item > i, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico) i {
  color: var(--sb-glyph, #fff) !important; text-shadow: var(--ap-glow, 0 1px 1px rgba(0,0,0,.2));
}
#buatLayout#buatLayout .ig-menu-item > i.ph-fill::before, #buatLayout#buatLayout :is(.coda-hero-box .coda-sb-ico, .admin-home-mobile-item .grid-ico) i.ph-fill::before { -webkit-text-fill-color: var(--sb-glyph, #fff); }
.coda-admin-shell .coda-mobile-top-action, .coda-admin-shell .coda-mobile-user { display: none; }
@media (max-width: 980px) {
  /* Baris atas: tanpa tombol sidebar; cari seperti kolom cari sidebar; Bahasa dan Keluar di kanan. */
  .coda-admin-shell .coda-mobile-sidebar-toggle { display: none !important; }
  .coda-admin-shell #mobileSearchContainer { left: 12px !important; right: 108px !important; width: auto !important; top: 16px !important; height: 44px !important; min-height: 44px !important; }
  .coda-admin-shell .coda-hero-box .coda-mobile-top-action { display: grid; position: absolute; top: 16px; }
  .coda-admin-shell #mobileSearchContainer { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 44px; padding: 0 4px 0 6px; gap: 12px;
    border-radius: 12px !important; border: 1px solid transparent !important; }
  .coda-admin-shell #mobileSearchContainer:focus-within { border-color: #0071e3 !important; box-shadow: none !important; }
  #buatLayout#buatLayout .coda-hero-box .coda-sb-ico { width: 32px; height: 32px; min-width: 32px; border-radius: 10px; display: grid; place-items: center; }
  #buatLayout#buatLayout .coda-hero-box .coda-sb-ico i { font-size: 16px; }
  .coda-admin-shell #mobileSearchContainer:focus-within .coda-mobile-search-ico { display: none; }
  .coda-admin-shell .coda-mobile-top-action { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
    border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
  .coda-admin-shell .coda-mobile-top-action:active { background-color: rgba(255,255,255,.2); }
  /* Dock melayang ala macOS/iPadOS; item aktif = gaya hover/terpilih desktop. */
  .coda-admin-shell .coda-ig-menu { left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: auto !important;
    border-radius: 22px !important; border: 0 !important; background: rgba(255,255,255,.22) !important;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 8px 24px rgba(0,60,140,.16) !important; }
  .coda-admin-shell .coda-ig-menu .ig-menu-item { border-radius: 12px; }
  .coda-admin-shell .coda-ig-menu .ig-menu-item.active { background-color: rgba(255,255,255,.2) !important;
    box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05) !important; }
  /* Kartu menu beranda: material kartu login dengan ikon aplikasi sidebar. */
  .coda-admin-shell .admin-home-mobile-item { position: relative; background: rgba(255,255,255,.2) !important; border-color: transparent !important;
    backdrop-filter: blur(14px) saturate(128%); -webkit-backdrop-filter: blur(14px) saturate(128%);
    box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05) !important; }
  #buatLayout#buatLayout .admin-home-mobile-item .grid-ico { position: absolute !important; inset: 14px 14px auto auto !important; transform: none !important;
    width: 40px !important; height: 40px !important; border-radius: 11px !important; display: grid !important; place-items: center; }
  #buatLayout#buatLayout .admin-home-mobile-item .grid-ico i { font-size: 20px !important; opacity: 1 !important; }
  /* Lembar detail: latar dan garis tabel seperti panel kanan desktop; toolbar bergaya toolbar desktop. */
  .coda-mobile-form-sheet, .coda-mobile-form-sheet .coda-mobile-form-body { background: #f7f7f8 !important; }
  [data-theme="dark"] .coda-mobile-form-sheet,
  [data-theme="dark"] .coda-mobile-form-sheet .coda-mobile-form-body {
    background: var(--coda-surface) !important; color: var(--coda-text);
  }
  .coda-mobile-form-sheet :is(.admin-report-shell, .admin-report-toolbar, table, thead, tbody, tr, td, section) { background-color: transparent !important; }
  .coda-mobile-form-sheet :is(table, th, td, tr) { border-color: rgba(0,0,0,.06) !important; }
  .coda-mobile-form-sheet .admin-report-toolbar { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 12px !important;
    border: 0 !important; background: transparent !important; overflow-x: auto; scrollbar-width: none; }
  .coda-mobile-form-sheet .admin-report-toolbar > :is(button, select, input, a.coda-btn) { box-sizing: border-box; flex: 0 0 auto !important;
    height: 32px !important; min-height: 32px !important; margin: 0 !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 8px !important;
    background: transparent !important; color: #86868b; box-shadow: none !important; font-size: 12px; }
  .coda-mobile-form-sheet .admin-report-toolbar > button { width: 32px !important; min-width: 32px !important; padding: 0 !important; display: inline-flex !important;
    align-items: center; justify-content: center; font-size: 0 !important; }
  .coda-mobile-form-sheet .admin-report-toolbar > button i { font-size: 14px !important; }
  .coda-mobile-form-sheet .admin-report-toolbar > :is(select, input) { width: auto !important; max-width: 150px; padding: 0 8px !important; color: var(--coda-text) !important; }
  .coda-mobile-form-sheet .admin-report-toolbar > button.primary { background: var(--coda-blue) !important; border-color: var(--coda-blue) !important; color: #fff !important; }
}
@media (max-width: 980px) { #buatLayout#buatLayout #mobileSearchContainer { border-radius: 12px !important; } }
@media (max-width: 980px) {
  #buatLayout#buatLayout #mobileSearchContainer:focus-within .coda-mobile-search-ico { display: none !important; }
  #buatLayout#buatLayout #mobileSearchContainer:focus-within { box-shadow: none !important; }
}

/* WEB_MARK8.5.9 - mobile: baris atas (nama kiri; Cari, Bahasa, Keluar kanan) ikut tergulir, kolom cari muncul saat ikon
   cari ditekan; dock tanpa garis, adaptif terhadap jumlah ikon, aktif hanya di sekitar ikon; awan Pendapatan tanpa
   lapisan gelap; radius kartu = radius dock (22px); tepi kiri-kanan seragam 16px. */
@media (max-width: 980px) {
  .coda-admin-shell .coda-hero-box { will-change: transform; }
  .coda-admin-shell .coda-hero-box .coda-mobile-top-action, .coda-admin-shell .coda-hero-box .coda-mobile-user { pointer-events: auto; }
  .coda-admin-shell .coda-mobile-user { position: absolute; left: 16px; right: 168px; top: 16px; height: 44px; display: flex; align-items: center;
    font-size: 15px; font-weight: 700; color: var(--coda-text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .coda-admin-shell .coda-hero-box .coda-mobile-top-action:nth-last-child(1) { right: 16px; }
  .coda-admin-shell .coda-hero-box .coda-mobile-top-action:nth-last-child(2) { right: 64px; }
  .coda-admin-shell .coda-hero-box .coda-mobile-top-action:nth-last-child(3) { right: 112px; }
  #buatLayout#buatLayout #mobileSearchContainer { left: 16px !important; right: 16px !important; z-index: 2; }
  .coda-admin-shell .coda-hero-box:not(.cari-buka) #mobileSearchContainer { display: none !important; }
  .coda-admin-shell .coda-hero-box.cari-buka :is(.coda-mobile-user, .coda-mobile-top-action) { visibility: hidden; }
  /* Dock */
  .coda-admin-shell .coda-ig-menu::before, .coda-admin-shell .coda-ig-menu::after { content: none !important; display: none !important; }
  .coda-admin-shell .coda-ig-menu { left: 16px !important; right: 16px !important; display: flex !important; justify-content: space-around; gap: 4px; padding: 8px !important; }
  .coda-admin-shell .coda-ig-menu .ig-menu-item { flex: 1 1 0 !important; width: auto !important; min-width: 0; background: transparent !important; box-shadow: none !important; }
  .coda-admin-shell .coda-ig-menu .ig-menu-item[hidden] { display: none !important; }
  #buatLayout#buatLayout .coda-ig-menu .ig-menu-item.active > i {
    box-shadow: 0 0 0 4px rgba(255,255,255,.4), 0 0 0 5px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16) !important; }
  .coda-admin-shell .coda-ig-menu .ig-menu-item.active > span { color: #0071e3 !important; }
  /* Beranda */
  .coda-admin-shell .admin-home-mobile-grid { padding-left: 4px !important; padding-right: 4px !important; }
  .coda-admin-shell .admin-home-mobile-grid > * { border-radius: 22px !important; overflow: hidden; }
  .coda-admin-shell .admin-home-revenue-card::after { content: none !important; display: none !important; }
}
@media (max-width: 980px) { #buatLayout#buatLayout .coda-ig-menu .ig-menu-item.active { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } }

/* WEB_MARK8.5.10 - mobile lebih ringan: kartu beranda tanpa blur; dock ikon saja dan lebih pendek; ikon kartu di kiri. */
@media (max-width: 980px) {
  .coda-admin-shell .admin-home-mobile-item { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255,255,255,.32) !important; }
  .coda-admin-shell .coda-ig-menu .ig-menu-item > span { display: none !important; }
  .coda-admin-shell .coda-ig-menu { padding: 8px !important; height: auto !important; min-height: 0 !important; }
  .coda-admin-shell .coda-ig-menu .ig-menu-item { height: 48px !important; min-height: 0 !important; padding: 0 !important; justify-content: center !important; align-items: center !important; }
  .coda-admin-shell .admin-home-mobile-grid { padding-bottom: 96px !important; }
  #buatLayout#buatLayout .admin-home-mobile-item { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; text-align: left; }
  #buatLayout#buatLayout .admin-home-mobile-item .grid-ico { position: static !important; inset: auto !important; flex: 0 0 40px; margin: 0 !important; }
  #buatLayout#buatLayout .admin-home-mobile-item .admin-home-mobile-copy { flex: 1 1 auto; min-width: 0; }
}

/* WEB_MARK8.6.1 - mobile: kartu beranda tanpa panah dengan padding merata; lembar slide-up tanpa judul dan tanpa X
   (tutup lewat pegangan/geser/ketuk latar), pencarian kontekstual seperti panel kanan desktop di pojok kanan atas. */
@media (max-width: 980px) {
  .coda-admin-shell .admin-home-mobile-caret { display: none !important; }
  #buatLayout#buatLayout .admin-home-mobile-item { padding: 16px !important; gap: 12px !important; min-height: 0 !important; height: auto !important; }
  #buatLayout#buatLayout .admin-home-mobile-item .admin-home-mobile-copy { padding: 0 !important; margin: 0 !important; }
  .coda-mobile-form-sheet { position: fixed; }
  .coda-mobile-form-sheet .coda-mobile-sheet-head { position: absolute; top: 36px; right: 12px; z-index: 5; height: 32px; padding: 0 !important; margin: 0 !important;
    display: flex; align-items: center; gap: 6px; background: transparent !important; border: 0 !important; }
  .coda-mobile-form-sheet .coda-mobile-sheet-head > div:first-child, .coda-mobile-form-sheet .coda-mobile-sheet-title, #closeMobileFormBtn { display: none !important; }
  .coda-mobile-form-sheet #extraMobileHeaderActions { margin-right: 0 !important; }
  .coda-mobile-form-sheet .admin-report-toolbar { box-sizing: border-box; width: calc(100% - 52px) !important; max-width: calc(100% - 52px) !important; }
  .coda-mobile-form-sheet .coda-panel-search-bar { width: calc(100vw - 24px) !important; }
}
@media (max-width: 980px) {
  #buatLayout ~ * #mobileFormSheet .coda-panel-search-btn, .coda-admin-shell #mobileFormSheet .coda-panel-search-btn {
    display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
    border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: transparent; color: #86868b; }
  .coda-admin-shell #mobileFormSheet .coda-panel-search-btn i { font-size: 14px; }
}
@media (max-width: 980px) { .coda-admin-shell .coda-hero-box .coda-mobile-user { display: flex; } }

/* WEB_MARK8.7.2 - material kartu login di workspace: latar sidebar dan panel tengah (putih 16%, blur bening 10px tanpa
   saturasi, cahaya dalam lembut) serta hover/terpilih baris dan kolom cari idle, semuanya tanpa bayangan luar. */
.coda-admin-shell #adminSidebar, .coda-admin-shell .coda-detail-panel {
  background-color: rgba(255,255,255,.16) !important; background-image: none !important;
  backdrop-filter: blur(10px) saturate(100%) !important; -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45) !important;
}
.coda-admin-shell #adminSidebar::before, .coda-admin-shell #adminSidebar::after,
.coda-admin-shell .coda-detail-panel::before, .coda-admin-shell .coda-detail-panel::after { content: none !important; }
.coda-admin-shell .coda-sidebar .coda-sidebar-user:is(:hover,[aria-expanded="true"]),
.coda-admin-shell :is(.coda-sidebar .coda-sb-item, .coda-sidebar .coda-sb-action, .coda-sidebar .toggle-wrap, .coda-detail-panel .coda-info-row.clickable-item):is(:hover,.active,.active-list-item), .coda-admin-shell.coda-admin-shell .sidebar-mini .coda-sidebar .search-wrap:hover, .coda-admin-shell .coda-sidebar .search-wrap:not(:focus-within), .coda-admin-shell #mobileSearchContainer:not(:focus-within) {
  background-color: rgba(255,255,255,.16) !important; box-shadow: inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45) !important;
}

/* WEB_MARK8.7.3 - sidebar dan panel tengah menyatu: blur yang sama tanpa cahaya tepi masing-masing (cahaya tepi itulah
   yang tampak sebagai pembatas). Kolom cari sidebar = kolom input login: putih solid, garis tipis, garis biru saat aktif,
   ikon di dalam kolom dan hilang saat mengetik. */
.coda-admin-shell #adminSidebar, .coda-admin-shell .coda-detail-panel { box-shadow: none !important; }
#buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar .search-wrap,
#buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar .search-wrap:not(:focus-within) {
  background-color: #fff !important; background-image: none !important; box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
#buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar .search-wrap:focus-within { border-color: #0071e3 !important; }

/* WEB_MARK8.7.4 - ikon sidebar tidak bergeser saat expand/collapse: ruang identitas (logo + nama) tetap disisakan di rail
   mini. Gradasi area gulir hanya muncul di sisi yang memang masih menyimpan isi. */
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar .coda-sidebar-identity { box-sizing: border-box; min-height: 0; padding-bottom: 2px; }
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar .sidebar-main-scroll { padding-top: 14px; }
.coda-admin-shell .coda-sidebar .sidebar-main-scroll {
  --gulir-atas: 0px; --gulir-bawah: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--gulir-atas), #000 calc(100% - var(--gulir-bawah)), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--gulir-atas), #000 calc(100% - var(--gulir-bawah)), transparent 100%) !important;
}
.coda-admin-shell .coda-sidebar .sidebar-main-scroll[data-gulir-atas] { --gulir-atas: 24px; }
.coda-admin-shell .coda-sidebar .sidebar-main-scroll[data-gulir-bawah] { --gulir-bawah: 28px; }

/* WEB_MARK8.7.5 - ikon sidebar diam total saat expand/collapse (x=18 di kedua mode; baris collapse sejajar), dan logo
   rail mini = favicon tab dengan crossfade halus. */
#buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar .search-wrap { padding-left: 5px !important; }
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar :is(.coda-sb-item, .coda-sb-action, .toggle-wrap, .search-wrap) { margin-left: 2px; }
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar .coda-sidebar-footer .toggle-wrap { margin-bottom: 2px; }
.coda-admin-shell .coda-sidebar .coda-sidebar-brand { position: relative; display: block; width: 64px; height: 24px; overflow: visible; }
.coda-admin-shell .coda-sidebar .coda-sidebar-brand > img:first-child { width: 64px !important; height: 24px !important; max-width: none; transition: opacity .25s ease; }
.coda-admin-shell .coda-sidebar .coda-brand-mini { position: absolute; left: 10px; top: 0; width: 24px; height: 24px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar .coda-sidebar-brand > img:first-child { opacity: 0; }
.coda-admin-shell .coda-layout.sidebar-mini .coda-sidebar .coda-brand-mini { opacity: 1; }
#buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar .coda-sb-action { padding-left: 5px !important; }

/* WEB_MARK8.7.6 - rail mini: favicon di kartu putih 32px dan ikon user metal (seperti Cari/Collapse) menggantikan nama.
   Tinggi blok identitas sama di kedua mode (80px) agar ikon menu tetap diam. */
.coda-admin-shell .coda-sidebar .coda-sidebar-identity { position: relative; box-sizing: border-box; min-height: 0; }
.coda-admin-shell .coda-sidebar .coda-brand-mini { left: 6px; top: -4px; width: 32px; height: 32px; box-sizing: border-box; padding: 5px; border-radius: 10px;
  background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 5px rgba(0,60,140,.2); }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico.coda-sidebar-user-ico { --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0); --sb-glyph: #2b2f38; --ap-sh: #8b92a0; --ap-glow: 0 1px 1px rgba(0,0,0,.2);
  position: absolute; left: 18px; top: 40px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.coda-admin-shell .coda-sidebar .coda-sidebar-user { transition: opacity .25s ease; }
#buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-sb-ico.coda-sidebar-user-ico { opacity: 1; }

/* 8.7.6: baris logo dan baris nama masing-masing 32px (setinggi kartu ikon). Di rail mini kartu favicon mengisi baris
   logo dan kartu user mengisi baris nama pada y yang sama; ritme 8px tetap dan ikon menu tidak bergeser. */
.coda-admin-shell .coda-sidebar .coda-sidebar-brand-row { height: 32px; display: flex; align-items: center; }
.coda-admin-shell .coda-sidebar .coda-sidebar-brand { height: 32px; display: flex; align-items: center; }
.coda-admin-shell .coda-sidebar .coda-brand-mini { top: 0; }
.coda-admin-shell .coda-sidebar .coda-sidebar-user { box-sizing: border-box; height: 32px; line-height: 32px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* WEB_MARK8.7.7 - identitas sidebar = dua baris setara item menu (44px, jarak 8px): kartu favicon putih + wordmark CODA,
   kartu user metal + nama dan peran. Saat dilipat hanya teks/wordmark yang hilang; kartu tetap di tempat. */
.coda-admin-shell .coda-sidebar .coda-sidebar-identity { position: static; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.coda-admin-shell .coda-sidebar .coda-sidebar-brand-row { height: 44px; display: flex; align-items: center; justify-content: space-between; }
.coda-admin-shell .coda-sidebar .coda-sidebar-brand { box-sizing: border-box; width: auto; height: 44px; display: flex; align-items: center; gap: 12px; padding-left: 6px; overflow: hidden; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico.coda-brand-card { --ap-bg: #fff; --ap-sh: #8b92a0; width: 32px; height: 32px; min-width: 32px; border-radius: 10px; display: grid; place-items: center; }
.coda-admin-shell .coda-sidebar .coda-brand-card img { width: 20px !important; height: 20px !important; opacity: 1 !important; }
.coda-admin-shell .coda-sidebar .coda-brand-wordmark { width: 64px; height: 24px; flex: 0 0 auto; transition: opacity .25s ease; }
.coda-admin-shell .coda-sidebar .coda-sidebar-user { box-sizing: border-box; display: flex; align-items: center; gap: 12px; height: 44px; line-height: normal; padding-left: 6px; overflow: hidden; opacity: 1 !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico.coda-sidebar-user-ico { position: static; left: auto; top: auto; flex: 0 0 32px; opacity: 1; }
.coda-admin-shell .coda-sidebar .coda-sidebar-user .coda-sb-text { display: flex; flex-direction: column; min-width: 0; }
.coda-admin-shell .coda-sidebar .coda-sidebar-user :is(.coda-sb-title, .coda-sb-desc) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#buatLayout#buatLayout.sidebar-mini .coda-sidebar :is(.coda-brand-wordmark, .coda-sidebar-user .coda-sb-text) { opacity: 0; pointer-events: none; }
.coda-admin-shell .coda-sidebar .coda-sidebar-user { margin: 0 !important; }
.coda-admin-shell .coda-sidebar .coda-sidebar-identity { padding-left: 12px !important; padding-right: 12px !important; }

/* WEB_MARK8.7.8 */
/* Sidebar dan panel tengah menyatu: satu blur bersama di layout (panel kanan buram menutupinya), bukan blur per panel
   yang menimbulkan garis di tepi pertemuan keduanya. */
@media (min-width: 981px) {
  .coda-admin-shell .coda-layout { backdrop-filter: blur(10px) saturate(100%); -webkit-backdrop-filter: blur(10px) saturate(100%); }
  .coda-admin-shell #adminSidebar, .coda-admin-shell .coda-detail-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* Teks sidebar dan panel tengah putih, tanpa huruf tebal (kecuali isi kolom cari yang berlatar putih). */
.coda-admin-shell :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-title, .coda-sb-desc, .coda-sb-text, .coda-sidebar-user, .coda-info-title, .coda-info-desc, .coda-group-header, .coda-group-header *, h1, h2, h3, h4, strong, b, span, div, p, label, button, small, li, td, th, a, em, time, dt, dd):not(.search-wrap *, .coda-panel-search *, #mobileSearchContainer *, input, .coda-sb-ico, .coda-sb-ico *, .coda-info-ico, .coda-info-ico *, [style*="color"], [class*="positive"], [class*="negative"]) {
  color: #fff !important; font-weight: 400 !important; text-shadow: 0 1px 2px rgba(0,40,90,.55);
}
.coda-admin-shell :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-desc, .coda-info-desc) { color: rgba(255,255,255,.82) !important; }
/* Kolom cari sidebar saat aktif = input login: petunjuk "Cari" dan kursor di awal kolom. */
#sbSearch:not(:focus)::placeholder { color: transparent; }
#sbSearch:focus::placeholder { color: #86868b; opacity: 1; }
#buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar .search-wrap:focus-within { padding-left: 14px !important; }
/* Pendapatan diperbesar: grafik di kiri, daftar lokasi di kolom paling kanan dengan guliran sendiri. */
.coda-admin-shell #formContentArea:has(> .admin-revenue-expanded-grid) { overflow: hidden !important; }
.coda-admin-shell .admin-revenue-expanded-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 30%); height: 100%; min-height: 0; }
.coda-admin-shell .admin-revenue-expanded-grid > * { min-width: 0; min-height: 0; overflow-y: auto; }
.coda-admin-shell .admin-revenue-expanded-grid > .admin-revenue-expanded-locations { border-left: 1px solid rgba(0,0,0,.06); margin: 0 !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico.coda-sidebar-user-ico { position: relative !important; }
.coda-admin-shell .admin-revenue-expanded-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 32%); }
.coda-admin-shell .admin-revenue-expanded-grid .admin-revenue-location-row { grid-template-columns: minmax(0, 1fr) 96px auto !important; }
.coda-admin-shell .admin-revenue-expanded-grid .admin-revenue-location-market svg { width: 96px; }

/* Toolbar panel kanan mengalah menurut lebar panel: kontrol yang tak muat disembunyikan utuh (bukan terpotong di
   balik tombol cari), dan pada panel sempit tanggal/pilihan menyusut jadi ikon. */
@media (min-width: 981px) {
  .coda-admin-shell #formPanel { container-type: inline-size; container-name: panelkanan; }
  .coda-admin-shell #formContentArea > :first-child > .admin-report-toolbar:first-child,
  .coda-admin-shell #formContentArea > :first-child > form:first-child > .admin-report-toolbar:first-child {
    flex-wrap: wrap !important; align-content: flex-start; row-gap: 12px; padding-top: 6px !important; overflow: hidden !important;
  }
}
@container panelkanan (max-width: 760px) {
  #formContentArea .admin-report-toolbar > :is(select, input[type="date"], input[type="month"]) {
    width: 32px !important; min-width: 32px !important; max-width: 32px !important; padding: 0 !important; color: transparent !important;
  }
  #formContentArea .admin-report-toolbar > :is(input[type="date"], input[type="month"])::-webkit-datetime-edit { display: none; }
  #formContentArea .admin-report-toolbar > :is(input[type="date"], input[type="month"])::-webkit-calendar-picker-indicator { margin: 0 auto; }
  #formContentArea .admin-report-toolbar > select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='%2386868b' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4z'/%3E%3C/svg%3E") center / 12px no-repeat !important; appearance: none; -webkit-appearance: none; }
}

/* WEB_MARK8.7.9 - sisa teks panel tengah (small, li, td, a, dll.) ikut putih; label kanvas grafik mini membaca
   --coda-muted/--coda-text dari elemennya, jadi variabel itu dibuat terang di sidebar dan panel tengah.
   Kaca digelapkan sedikit (brightness .88) supaya teks putih terbaca tanpa membuat panel jadi gelap. */
.coda-admin-shell :is(.coda-sidebar, .coda-detail-panel) { --coda-muted: rgba(255,255,255,.82); --coda-text: #ffffff; }
.coda-admin-shell :is(.coda-sidebar, .coda-detail-panel) :is(.search-wrap, .coda-panel-search, #mobileSearchContainer) { --coda-muted: #86868b; --coda-text: #1d1d1f; }
@media (min-width: 981px) {
  .coda-admin-shell .coda-layout { backdrop-filter: blur(10px) saturate(100%) brightness(.82) !important; -webkit-backdrop-filter: blur(10px) saturate(100%) brightness(.82) !important; }
}
@media (max-width: 980px) {
  .coda-admin-shell #adminSidebar, .coda-admin-shell .coda-detail-panel {
    backdrop-filter: blur(10px) saturate(100%) brightness(.82) !important; -webkit-backdrop-filter: blur(10px) saturate(100%) brightness(.82) !important;
  }
}

/* WEB_MARK8.7.10 - hasil pencarian sidebar disamakan dengan baris panel tengah: kartu ikon putih dengan glyph berwarna,
   judul di atas deskripsi (markupnya memakai span, jadi perlu disusun sebagai kolom). */
#buatLayout#buatLayout#buatLayout .coda-sidebar button.coda-sb-item .coda-sb-ico {
  background: linear-gradient(180deg, #ffffff, #e8edf4) !important; outline: 0 solid transparent;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.09), 0 2px 5px rgba(0,60,140,.2) !important;
}
#buatLayout#buatLayout#buatLayout .coda-sidebar button.coda-sb-item .coda-sb-ico i { color: var(--ikon-bg) !important; text-shadow: none; }
#buatLayout#buatLayout#buatLayout .coda-sidebar button.coda-sb-item .coda-sb-ico i.ph-fill::before { -webkit-text-fill-color: var(--ikon-bg); filter: none; }
#buatLayout#buatLayout#buatLayout .coda-sidebar button.coda-sb-item .coda-sb-ico::after { display: none !important; }
.coda-admin-shell .coda-sidebar .coda-sb-text { display: flex; flex-direction: column; min-width: 0; }
.coda-admin-shell .coda-sidebar :is(.coda-sb-title, .coda-sb-desc) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* WEB_MARK8.8.1 */
/* Legenda komposisi di bawah donat, bukan di sampingnya. */
.coda-admin-shell .admin-revenue-composition { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; row-gap: 12px; }
.coda-admin-shell .admin-revenue-composition > * { width: 100%; }
.coda-admin-shell .admin-revenue-composition > canvas { width: 170px !important; height: 170px !important; }
/* Panah baris panel tengah putih (ikut teks panel). */
.coda-admin-shell .coda-detail-panel :is(.ph-caret-right, .ph-caret-left, .ph-caret-up, .ph-caret-down) { color: #fff !important; }
/* Koneksi: panel tengah cukup daftar lokasi; rincian Admin/POS sudah ada di panel kanan. */
@media (min-width: 981px) {
  .coda-admin-shell .coda-detail-panel .admin-mqtt-pos-tree { display: none !important; }
  .coda-admin-shell .coda-detail-panel .admin-mqtt-node-status :is(.ph-caret-up, .ph-caret-down) { display: none !important; }
}
/* Garis pemisah dibuang: tab Hari/Bulan/Tahun dan filter lokasi/area/sub-area. */
.coda-admin-shell .coda-detail-panel :is(.admin-revenue-chart-tabs, .admin-revenue-chart-tabs > *, .admin-domain-location, .admin-domain-filters, .admin-domain-filters > *) {
  border-left: 0 !important; border-right: 0 !important; border-color: transparent !important;
}
/* Dropdown: teks gelap di atas latar putih, seperti kolom input lain. */
.coda-admin-shell :is(.coda-sidebar, .coda-detail-panel) select {
  color: #1d1d1f !important; background-color: #fff !important; border-radius: 10px; padding: 0 8px;
  border: 1px solid rgba(0,0,0,.06) !important;
}
.coda-admin-shell :is(.coda-sidebar, .coda-detail-panel) select option { color: #1d1d1f; background-color: #fff; }
/* Pantau akumulasi memakai langit dan lapisan kaca workspace yang sama. */
#formPanel .admin-revenue-focus { background: #45a7ff !important; }
#formPanel .admin-revenue-focus-clouds { opacity: 1 !important; }
#formPanel .admin-revenue-focus-clouds #login-three-scene { position: absolute; inset: 0; }
#formPanel .admin-revenue-focus-clouds canvas { display: block; width: 100% !important; height: 100% !important; opacity: .72; }
#formPanel .admin-revenue-focus::after {
  content: "" !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(10px) saturate(100%); -webkit-backdrop-filter: blur(10px) saturate(100%);
}
.coda-admin-shell .admin-revenue-head-action:disabled { opacity: .35; pointer-events: none; cursor: default; }

/* WEB_MARK8.8.2 */
/* Kolom lokasi di panel yang diperbesar: cukup satu pemisah (garis kiri), tanpa garis atas dan garis bawah kepala. */
.coda-admin-shell .admin-revenue-expanded-grid > .admin-revenue-expanded-locations { border-top: 0 !important; }
.coda-admin-shell .admin-revenue-expanded-locations .admin-revenue-expanded-locations-head { border-bottom: 0 !important; }
/* Dropdown judul panel tengah kembali polos: tanpa latar dan garis, teksnya ikut teks panel. Daftar pilihannya
   tetap gelap di atas putih supaya terbaca saat dibuka. */
.coda-admin-shell .coda-detail-panel .admin-domain-overview-head select {
  color: #fff !important; background-color: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0;
}
.coda-admin-shell .coda-detail-panel .admin-domain-overview-head select option { color: #1d1d1f; background-color: #fff; }
/* Koneksi: baris lokasi memakai geometri baris standar panel tengah. */
.coda-admin-shell .coda-detail-panel .admin-mqtt-location {
  display: flex; align-items: center; gap: 12px; border: 1px solid transparent !important; background-image: none;
}
.coda-admin-shell .coda-detail-panel .admin-mqtt-location .coda-info-copy { flex: 1 1 auto; min-width: 0; }
@media (min-width: 981px) {
  .coda-admin-shell .coda-detail-panel .admin-mqtt-node-status { display: none !important; }
}

/* WEB_MARK8.8.3 */
/* Label kanvas grafik di panel tengah: variabel warna dipasang di kanvasnya sendiri, karena aturan lain yang lebih
   dekat memberi --coda-muted biru gelap (#1c3f56) sehingga angka sumbu tergambar gelap di atas kaca. */
.coda-admin-shell .coda-detail-panel :is(canvas, .admin-revenue-chart-section, .admin-revenue-composition) {
  --coda-muted: rgba(255,255,255,.82); --coda-text: #ffffff;
}
/* Deskripsi di sidebar dan panel tengah memakai biru CODA. */
.coda-admin-shell :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-desc, .coda-info-desc, .admin-mqtt-node-copy span) {
  color: #0a84ff !important;
}
/* Saklar tampilan daftar/kartu di kanan atas panel tengah: ikon tembus dengan kaca buram. */
.coda-admin-shell .coda-center-view-bar { display: flex; justify-content: flex-end; padding: 6px 12px 0; }
.coda-admin-shell .coda-center-view-toggle {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 10px; background: rgba(255,255,255,.16); color: #fff; font-size: 15px;
  backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45);
}
.coda-admin-shell .coda-center-view-toggle:hover { background: rgba(255,255,255,.28); }
/* Mode kartu: daftar panel tengah jadi kisi; ikon di atas judul dan deskripsi, tanpa panah. */
#detailSection.coda-grid-mode .coda-info-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-content: start; }
#detailSection.coda-grid-mode .coda-info-list > :is(.coda-info-row, .admin-mqtt-location) {
  flex-direction: column !important; align-items: flex-start !important; gap: 8px !important;
  height: auto !important; min-height: 104px; padding: 12px !important;
}
#detailSection.coda-grid-mode .coda-info-row > div[style*="color"] { display: none !important; }
#detailSection.coda-grid-mode :is(.coda-info-title, .coda-info-desc) { white-space: normal !important; }
#detailSection.coda-grid-mode .coda-group-header { grid-column: 1 / -1; }
#buatLayout#buatLayout :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-desc, .coda-info-desc, .admin-mqtt-node-copy span) { color: #0a84ff !important; }

/* WEB_MARK8.8.4 */
/* Saklar tampilan menumpang di item sidebar aktif: ikon polos tanpa kartu, rata kanan, hilang di rail mini. */
.coda-admin-shell .coda-center-view-bar { display: none !important; }
#buatLayout#buatLayout .coda-sidebar .coda-center-view-toggle {
  flex: 0 0 28px; width: 28px; height: 28px; margin-left: auto; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 0 !important; border-radius: 8px; background: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #fff; font-size: 15px;
}
#buatLayout#buatLayout .coda-sidebar .coda-center-view-toggle:hover { background: rgba(255,255,255,.22) !important; }
#buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-center-view-toggle { display: none !important; }
/* Mode kartu: ikon besar dengan judul di bawahnya saja, seperti ikon aplikasi di ponsel. */
#detailSection.coda-grid-mode .coda-info-list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; gap: 10px !important; }
@media (min-width: 981px) {
  #detailSection.coda-grid-mode .coda-info-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
#detailSection.coda-grid-mode .coda-info-list > :is(.coda-info-row, .admin-mqtt-location) {
  align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-height: 112px; padding: 14px 8px !important; text-align: center;
}
#detailSection.coda-grid-mode :is(.coda-info-ico, .admin-mqtt-location .coda-info-ico) { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 16px !important; }
#detailSection.coda-grid-mode .coda-info-ico i { font-size: 28px !important; }
#detailSection.coda-grid-mode .coda-info-desc { display: none !important; }
#detailSection.coda-grid-mode .coda-info-copy { width: 100%; }
#detailSection.coda-grid-mode .coda-info-title { white-space: normal !important; text-align: center; font-size: 11.5px; line-height: 1.3; }
/* Deskripsi: abu-abu gelap, bukan biru. */
#buatLayout#buatLayout :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-desc, .coda-info-desc, .admin-mqtt-node-copy span) { color: #44505e !important; }

/* WEB_MARK8.8.5 - saklar digeser sedikit ke kiri agar area hover pas; glyph kartu ikon dibersihkan dari halo
   dan bayangan supaya tidak terlihat pecah saat membesar di mode kartu. */
#buatLayout#buatLayout .coda-sidebar .coda-center-view-toggle { margin-right: 6px; }
#buatLayout#buatLayout :is(.coda-info-ico, .coda-sb-ico, .grid-ico) i { text-shadow: none !important; }
#buatLayout#buatLayout :is(.coda-info-ico, .coda-sb-ico, .grid-ico) i.ph-fill::before { filter: none !important; text-shadow: none !important; }
#detailSection.coda-grid-mode .coda-info-ico i { -webkit-font-smoothing: antialiased; }

/* WEB_MARK8.8.6 - cincin ::after kartu ikon mengikuti jari-jari kartunya. Di mode kartu kartunya 16px sementara
   cincinnya tetap 10px, jadi cincin memotong di dalam sudut dan sudutnya terlihat pecah (hover menutupinya). */
#buatLayout#buatLayout :is(.coda-info-ico, .coda-sb-ico)::after { border-radius: inherit !important; }
/* Mode kartu di dasbor data: hanya baris daftar yang jadi kartu; ringkasan dan label di atasnya tetap melebar
   penuh dengan tata letak aslinya. */
#detailSection.coda-grid-mode .coda-info-list > :is(.admin-domain-overview, .admin-domain-menu-label, .admin-report-empty, .coda-group-header, [class*="-summary"], [class*="section-title"]) {
  grid-column: 1 / -1;
}

/* WEB_MARK8.8.7 */
/* Deskripsi: biru gelap, bukan hitam. */
#buatLayout#buatLayout :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-desc, .coda-info-desc, .admin-mqtt-node-copy span) { color: #16365e !important; }
@media (max-width: 980px) {
  /* Baris atas: logo CODA di kiri, nama rata kanan, lalu ikon pengguna dan cari. */
  #buatLayout#buatLayout .coda-mobile-user { left: 16px; right: 112px; justify-content: flex-end; text-align: right; }
  #buatLayout#buatLayout .coda-hero-box .coda-mobile-sidebar-toggle { left: auto !important; top: 16px; width: 44px; height: 44px; background: transparent !important; }
  /* Sidebar layar sempit: selebar layar dan menunya jadi kisi ikon aplikasi. */
  .coda-admin-shell .sidebar-open-mobile { --coda-sidebar-w: 100vw; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar { width: 100vw; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar :is(.coda-side-head, .sidebar-main-scroll, .coda-sidebar-footer, .coda-sidebar-identity, .search-wrap) { width: auto; max-width: none; }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-actions, .coda-sidebar-scroll-foot) { display: contents; }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav .coda-sb-item, .coda-sb-list .coda-sb-item, .coda-sidebar-actions .coda-sb-action) {
    box-sizing: border-box; width: auto; min-width: 0; max-width: none; height: auto; min-height: 112px; margin: 0; padding: 14px 6px;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center;
  }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-actions) .coda-sb-ico {
    width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 16px !important;
  }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-actions) .coda-sb-ico i { font-size: 28px !important; }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-actions) .coda-sb-text { width: 100%; align-items: center; }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-actions) .coda-sb-title { white-space: normal !important; text-align: center; font-size: 11.5px; line-height: 1.3; }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-actions) .coda-sb-desc { display: none !important; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-center-view-toggle { display: none !important; }
}
@media (max-width: 980px) {
  #buatLayout#buatLayout .coda-hero-box .coda-mobile-sidebar-toggle { display: grid !important; }
  
}
@media (max-width: 980px) {
  /* Pohon konteks dan label grup di dalam kisi sidebar melebar penuh. */
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list) > :not(.coda-sb-item) { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  /* Kaki sidebar ikut kisi yang sama: Pengguna, Bahasa, dan Keluar jadi ubin sebaris. */

  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot > :not(.coda-sb-item, .coda-sidebar-actions) { grid-column: 1 / -1; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot :is(.coda-sb-item, .coda-sb-action) {
    box-sizing: border-box; width: auto; min-width: 0; max-width: none; height: auto; min-height: 96px; margin: 0; padding: 12px 6px;
    flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; text-align: center;
  }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot :is(.coda-sb-ico) { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 16px !important; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot .coda-sb-ico i { font-size: 28px !important; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot .coda-sb-text { width: 100%; align-items: center; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot .coda-sb-title { white-space: normal !important; text-align: center; font-size: 11.5px; line-height: 1.3; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot .coda-sb-desc { display: none !important; }
  /* Ubin dirapatkan supaya tidak banyak ruang kosong di bawah judul. */
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list) .coda-sb-item { min-height: 96px; padding: 12px 6px; }
}
@media (max-width: 980px) {
  /* Semua ubin sidebar bertinggi sama supaya kisinya rata, berapa pun panjang judulnya. */
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-scroll-foot) :is(.coda-sb-item, .coda-sb-action) {
    height: 112px; min-height: 112px; overflow: hidden;
  }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-scroll-foot) .coda-sb-text { height: 32px; justify-content: flex-start; overflow: hidden; }
}

/* WEB_MARK8.8.8 - panel tengah sama persis di desktop dan ponsel: kisi ikon adalah bawaan, dan saklar di item
   sidebar aktif yang mengubahnya jadi daftar. Satu-satunya beda di layar sempit: sidebar tidak ada, isinya
   dipecah jadi kisi ikon. Dock bawah dihapus karena perannya sudah diambil kisi itu. */
#detailSection.coda-grid-mode .coda-info-list > :is(.coda-info-row, .admin-mqtt-location) { min-height: 96px; padding: 12px 8px !important; }
@media (max-width: 980px) {
  #buatLayout#buatLayout .coda-ig-menu { display: none !important; }
}

/* WEB_MARK8.8.9 - kisi sidebar ponsel: satu barisan rata di area gulir, metrik sama dengan kisi ikon panel
   tengah (kolom minmax 104px, jarak 10px). Beranda ponsel adalah kisi ini, jadi kartu ringkasan lama
   tidak ditampilkan dan tombol tutup disembunyikan saat Beranda aktif. */
@media (max-width: 980px) {
  #buatLayout#buatLayout.sidebar-open-mobile .sidebar-main-scroll {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: 112px;
    gap: 10px; padding: 8px 12px 16px; align-content: start;
  }
  #buatLayout#buatLayout.sidebar-open-mobile .sidebar-main-scroll :is(.coda-sb-item, .coda-sb-action) {
    height: 100%; min-height: 0; padding: 12px 8px;
  }
  #buatLayout#buatLayout .admin-home-mobile-grid { display: none !important; }

}

/* WEB_MARK8.8.10 - deskripsi abu-abu gelap; baris atas ponsel: tombol kembali di kiri, nama pengguna tidak
   ditampilkan karena identitas ada di beranda. */
#buatLayout#buatLayout :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-desc, .coda-info-desc, .admin-mqtt-node-copy span) { color: #4a5560 !important; }
@media (max-width: 980px) {
  #buatLayout#buatLayout .coda-hero-box .coda-mobile-back { left: 12px !important; right: auto !important; }

  #buatLayout#buatLayout .admin-revenue-locations-entry { margin: 8px 0 0; }
}

/* WEB_MARK8.9.1 - ikon kembali memakai kartu metal seperti Cari dan Collapse; judul menu aktif di tengah baris
   atas; kartu slide-up memberi ruang untuk tombol cari yang melayang supaya tidak menimpa baris pertama. */
#buatLayout#buatLayout .coda-mobile-sidebar-toggle .coda-sb-ico {
  --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0) !important;
  --sb-glyph: #2b2f38 !important;
}
#buatLayout#buatLayout .coda-mobile-sidebar-toggle .coda-sb-ico i { color: #2b2f38 !important; }
@media (max-width: 980px) {
  #buatLayout#buatLayout .coda-mobile-user {
    display: flex !important; left: 72px; right: 112px; justify-content: center; text-align: center;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  #mobileFormSheet #mobileFormContentArea { padding-top: 40px !important; }
}

/* WEB_MARK8.9.2 */
/* Deskripsi abu-abu netral. */
#buatLayout#buatLayout :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-desc, .coda-info-desc, .admin-mqtt-node-copy span) { color: #5f6368 !important; }
/* Baris lokasi Pendapatan: umpan balik hover dan terpilih yang sama di mode daftar maupun kartu, supaya
   jelas bisa diklik. Sebelumnya hanya kursor yang berubah. */
#formPanel .admin-revenue-location-row { cursor: pointer; transition: background-color .14s ease; }
#formPanel .admin-revenue-location-row:hover { background-color: rgba(0, 113, 227, .07); }
#formPanel .admin-revenue-location-row.selected { background-color: rgba(0, 113, 227, .12); }
/* Satu keadaan untuk semua ikon toolbar panel kanan: idle, hover, dan aktif. */
#formPanel :is(.admin-report-toolbar > button, .admin-report-toolbar > a, .admin-revenue-head-action, .coda-panel-search-btn, #panelExpandBtn) {
  box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 6px; display: inline-grid; place-items: center;
  border: 1px solid rgba(0,0,0,.08) !important; border-radius: 8px !important;
  background: transparent !important; color: #86868b !important; box-shadow: none !important;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
#formPanel .admin-revenue-location-count-host:empty { display: none; }
#formPanel .admin-revenue-location-count-host { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; }
#formPanel#formPanel .admin-revenue-location-count {
  width: 32px; min-width: 32px; height: 32px; padding: 0; border-radius: 8px !important;
  background: rgba(0,0,0,.06) !important; color: #1d1d1f !important; pointer-events: none;
}
#formPanel .admin-revenue-location-count-value {
  color: inherit; font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
#formPanel :is(.admin-report-toolbar > button, .admin-report-toolbar > a, .admin-revenue-head-action, .coda-panel-search-btn, #panelExpandBtn):hover:not(:disabled) {
  background: rgba(0,0,0,.06) !important; color: #1d1d1f !important;
}
#formPanel :is(.admin-report-toolbar > button, .admin-report-toolbar > a, .admin-revenue-head-action, .coda-panel-search-btn, #panelExpandBtn):is(.active, [aria-pressed="true"]) {
  background: rgba(0,113,227,.12) !important; color: #0071e3 !important; border-color: rgba(0,113,227,.28) !important;
}
/* Hover pada tombol yang sedang aktif tetap biru: tanpa ini keadaan aktif hilang jadi abu-abu saat
   kursor lewat, dan hanya Pendapatan yang punya tombol aktif menetap sehingga terlihat tak konsisten. */
#formPanel :is(.admin-report-toolbar > button, .admin-report-toolbar > a, .admin-revenue-head-action, .coda-panel-search-btn, #panelExpandBtn):is(.active, [aria-pressed="true"]):hover:not(:disabled) {
  background: rgba(0,113,227,.2) !important; color: #0071e3 !important; border-color: rgba(0,113,227,.28) !important;
}
#formPanel :is(.admin-report-toolbar > button, .admin-revenue-head-action):disabled { opacity: .35; }

/* Toolbar sempit: kontrol memakai ikon yang berarti, bukan kotak kosong. Data-URI disandikan penuh karena
   kutip tunggal di dalamnya hilang saat CSS diminifikasi, dan latarnya jadi kosong. */
@container panelkanan (max-width: 760px) {
  #formPanel #formContentArea .admin-report-toolbar > select, #formPanel#formPanel .admin-revenue-head-actions > select { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%2386868b%22%20d%3D%22M128%2016a88.1%2088.1%200%200%200-88%2088c0%2075.3%2080%20132.17%2083.41%20134.55a8%208%200%200%200%209.18%200C136%20236.17%20216%20179.3%20216%20104a88.1%2088.1%200%200%200-88-88Zm0%2056a32%2032%200%201%201-32%2032%2032%2032%200%200%201%2032-32Z%22%2F%3E%3C%2Fsvg%3E") !important; background-position: center !important; background-size: 16px !important; background-repeat: no-repeat !important; background-color: transparent !important; appearance: none; -webkit-appearance: none; }
  #formPanel #formContentArea .admin-report-toolbar > :is(input[type="date"], input[type="month"]),
  #formPanel#formPanel .admin-revenue-head-actions > :is(input[type="date"], input[type="month"]) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%2386868b%22%20d%3D%22M208%2032h-24v-8a8%208%200%200%200-16%200v8H88v-8a8%208%200%200%200-16%200v8H48a16%2016%200%200%200-16%2016v160a16%2016%200%200%200%2016%2016h160a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16ZM48%2048h24v8a8%208%200%200%200%2016%200v-8h80v8a8%208%200%200%200%2016%200v-8h24v32H48Zm160%20160H48V96h160v112Z%22%2F%3E%3C%2Fsvg%3E") !important; background-position: center !important; background-size: 16px !important; background-repeat: no-repeat !important; background-color: transparent !important; }
  #formContentArea .admin-report-toolbar > :is(input[type="date"], input[type="month"])::-webkit-calendar-picker-indicator,
  #formPanel .admin-revenue-head-actions > :is(input[type="date"], input[type="month"])::-webkit-calendar-picker-indicator { opacity: 0; width: 100%; margin: 0; cursor: pointer; }
}

/* WEB_MARK8.9.3 - bingkai ikon cari hanya di tombolnya, bukan di pembungkusnya, supaya tidak terlihat dobel.
   Kartu slide-up memakai toolbar panel kanan apa adanya, termasuk tingginya. Ikon pengguna di pojok kanan
   beranda menggantikan tombol tutup, dan di baris atas menu ia menempati posisi yang sama. */
#formPanel .coda-panel-search { border: 0 !important; background: transparent !important; padding: 0 !important; }
#mobileFormSheet .admin-report-toolbar { height: 44px !important; min-height: 44px !important; }
@media (max-width: 980px) {
  #buatLayout#buatLayout .coda-sidebar-close {
    display: grid !important; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  #buatLayout#buatLayout .coda-sidebar-close .coda-sb-ico {
    --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0) !important; --sb-glyph: #2b2f38 !important;
  }
  #buatLayout#buatLayout .coda-sidebar-close .coda-sb-ico i { color: #2b2f38 !important; }
  #buatLayout#buatLayout .coda-mobile-sidebar-toggle .coda-sb-ico {
    --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0) !important; --sb-glyph: #2b2f38 !important;
  }
  #buatLayout#buatLayout .coda-mobile-back .coda-sb-ico {
    --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0) !important; --sb-glyph: #2b2f38 !important;
  }
  #buatLayout#buatLayout :is(.coda-mobile-back, .coda-mobile-sidebar-toggle) .coda-sb-ico i { color: #2b2f38 !important; }
  /* Kisi menu dan kisi beranda memakai ruang yang sama persis. */
  #detailSection .coda-info-list:has(> .coda-info-row) { padding-bottom: 16px; }
}
/* WEB_MARK8.9.4 - sidebar dan panel tengah tanpa baris deskripsi, dan judulnya seukuran label
   "Collapse Sidebar" (13px) di desktop maupun ponsel. Identitas pemakai di kepala sidebar bukan
   item menu, jadi baris perannya tetap ada. */
#buatLayout#buatLayout :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-item, .coda-sb-action, .coda-info-row, .coda-form-grid-item) :is(.coda-sb-desc, .coda-info-desc, .admin-home-mobile-desc) {
  display: none !important;
}
#buatLayout#buatLayout :is(.coda-sidebar, .coda-detail-panel) :is(.coda-sb-item, .coda-sb-action, .coda-info-row, .coda-form-grid-item) :is(.coda-sb-title, .coda-info-title, .grid-title) {
  font-size: 13px !important; line-height: normal !important; margin-bottom: 0 !important;
}
/* Aturan ponsel dan kisi lama memaku 11.5px dengan !important; disamakan ke ukuran yang sama. */
#buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-actions) .coda-sb-title,
#buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar-scroll-foot .coda-sb-title,
#detailSection.coda-grid-mode .coda-info-title { font-size: 13px !important; }
@media (max-width: 980px) {
  /* Judul 13px memakan dua baris pada ubin seperti "License Manager": kotak teks dan tinggi ubin
     dinaikkan secukupnya supaya tidak terpotong, dan semua ubin tetap sama tinggi. */
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-scroll-foot) :is(.coda-sb-item, .coda-sb-action) {
    height: 124px; min-height: 124px;
  }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-scroll-foot) .coda-sb-text { height: 36px; }
  /* Baris atas menu: kembali di kiri, cari di kanan, judul lebih besar dan tetap di tengah. */
  #buatLayout#buatLayout .coda-hero-box .coda-mobile-user {
    left: 72px !important; right: 72px !important; justify-content: center !important; text-align: center !important;
    font-size: 17px !important; font-weight: 600 !important;
  }
  #buatLayout#buatLayout .coda-hero-box .coda-mobile-search-open { right: 16px; left: auto !important; top: 16px; width: 44px; height: 44px; background: transparent !important; }
  #buatLayout#buatLayout .coda-mobile-search-open .coda-sb-ico {
    --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0) !important; --sb-glyph: #2b2f38 !important;
  }
  #buatLayout#buatLayout .coda-mobile-search-open .coda-sb-ico i { color: #2b2f38 !important; }
}

/* WEB_MARK8.9.6 - kisi ikon tanpa panah, termasuk ubin yang sedang terpilih (mis. License Manager). */
#detailSection.coda-grid-mode .coda-info-row :is(.ph-caret-right, .ph-caret-down, .ph-caret-up) { display: none !important; }
/* Ubin kisi panel tengah sama tinggi seperti kisi beranda: judul 13px dua baris tetap muat. */
#detailSection.coda-grid-mode .coda-info-list > :is(.coda-info-row, .admin-mqtt-location) { min-height: 128px; }
/* Toolbar Pendapatan saat panel kanan menyempit: tanggal jadi ikon kalender 32px seperti Laporan.
   Selektor lamanya `#formPanel #formPanel` tidak pernah cocok, jadi kotak tanggal tetap lebar dan kosong. */
@container panelkanan (max-width: 760px) {
  #formPanel#formPanel .admin-revenue-head-actions > :is(input[type="date"], input[type="month"]) {
    width: 32px !important; min-width: 32px !important; max-width: 32px !important; padding: 0 !important; color: transparent !important;
  }
  #formPanel .admin-revenue-head-actions > :is(input[type="date"], input[type="month"])::-webkit-datetime-edit { display: none; }
}
/* Dasbor panel tengah (Pendapatan, Anggota, Voucher, Penghuni): teks minimal 13px, seukuran judul ikon. */
#detailSection :is(.admin-revenue-kpi-label, .admin-revenue-kpi-note, .admin-revenue-kpi-note *, .admin-revenue-section-head span,
  .admin-revenue-chart-tabs button, .admin-revenue-legend-item span, .admin-revenue-legend-item strong, .admin-revenue-source-row span,
  .admin-revenue-source-row strong, .admin-domain-kpi span, .admin-domain-menu-label) { font-size: 13px !important; line-height: 1.35 !important; }
#detailSection :is(.admin-revenue-section-head strong, .admin-domain-overview-head strong) { font-size: 15px !important; }
#detailSection .admin-domain-kpi strong { font-size: 20px !important; }
/* Panel tengah desktop sempit (~230px): teks 13px tidak boleh terpotong, jadi kepala bagian dan legenda menyusun ulang. */
#detailSection .admin-revenue-section-head { flex-wrap: wrap; }
#detailSection .admin-revenue-legend { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; }
#detailSection .admin-revenue-legend-item strong { white-space: normal !important; overflow: visible !important; }
/* Cari ponsel: kolom tetap di baris atas, hasil lengkapnya tampil tepat di bawahnya menggantikan isi menu. */
.coda-admin-shell #mobileTopResults { display: none; }
@media (max-width: 980px) {
  .coda-admin-shell .coda-detail-body { max-width: none; }
  .coda-admin-shell #mobileTopResults:not(:empty) { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 76px 0 16px; }
  .coda-admin-shell .coda-detail-body:has(> #mobileTopResults:not(:empty)) > #swipeWrapper { display: none !important; }
  #buatLayout#buatLayout #mobileTopResults .coda-info-row .coda-info-desc { display: block !important; color: rgba(255,255,255,.82) !important; font-size: 12px !important; }
}

/* WEB_MARK8.9.7 */
/* Toolbar panel kanan: keadaan aktif netral seperti ikon lain (abu-abu, tinta gelap), bukan biru. Periode 7H/14H/30H
   tipis saat idle dan tebal saat aktif. */
#formPanel#formPanel :is(.admin-report-toolbar > button, .admin-report-toolbar > a, .admin-revenue-head-action, .coda-panel-search-btn, #panelExpandBtn):is(.active, [aria-pressed="true"]),
.coda-admin-shell.coda-admin-shell .admin-revenue-head-action:is(.active, [aria-pressed="true"]) {
  background: rgba(0,0,0,.06) !important; color: #1d1d1f !important; border-color: rgba(0,0,0,.08) !important;
}
#formPanel#formPanel :is(.admin-report-toolbar > button, .admin-report-toolbar > a, .admin-revenue-head-action, .coda-panel-search-btn, #panelExpandBtn):is(.active, [aria-pressed="true"]):hover:not(:disabled),
.coda-admin-shell.coda-admin-shell .admin-revenue-head-action:is(.active, [aria-pressed="true"]):is(:hover, :focus-visible) {
  background: rgba(0,0,0,.1) !important; color: #1d1d1f !important;
}
.coda-admin-shell .admin-revenue-head-period { font-weight: 400 !important; }
.coda-admin-shell .admin-revenue-head-period:is(.active, [aria-pressed="true"]) { font-weight: 700 !important; }

/* Garis pohon sub-menu putih di atas kaca. */
.coda-admin-shell .coda-sidebar :is(.coda-expanded-context, .coda-account-tree) { border-left-color: rgba(255,255,255,.85) !important; }

/* Ikon pengguna membuka sub-tree Bahasa dan Keluar tepat di bawahnya, seperti pohon konteks menu. */
.coda-admin-shell .coda-sidebar .coda-sidebar-user { cursor: pointer; }
.coda-admin-shell .coda-sidebar .coda-account-tree {
  display: block; margin: 4px 12px 6px 22px; padding: 2px 0 2px 8px; border-left: 1px solid rgba(255,255,255,.85);
}
#buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sidebar-actions { display: flex !important; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
#buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-action {
  box-sizing: border-box; width: 100% !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 4px !important;
  flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; text-align: left !important;
}
#buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-ico { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 10px !important; }
#buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-ico i { font-size: 16px !important; }
#buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-text { width: auto !important; height: auto !important; align-items: flex-start !important; }
#buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-title { text-align: left !important; white-space: nowrap !important; }
#buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-account-tree { margin: 4px 0 6px; padding: 0; border-left: 0; }

/* Ponsel (8.9.8): ikon pengguna tetap di pojok kanan atas sebaris logo, kini dengan username (teks rata kiri di
   samping ikon); sub-tree Bahasa dan Keluar menyamping tepat di bawahnya, rata kanan, mendorong isi di bawahnya. */
@media (max-width: 980px) {
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-identity {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-brand-row { grid-column: 1; grid-row: 1; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-user {
    grid-column: 2; grid-row: 1; width: auto !important; max-width: 200px; margin: 0 !important; justify-content: flex-start !important; text-align: left;
  }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-user .coda-sb-text { align-items: flex-start !important; text-align: left; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin: 4px 4px 8px 0; }
  /* Kisi beranda: jarak baris sama dengan kisi panel tengah (ubin 128px, jarak 10px). */
  #buatLayout#buatLayout.sidebar-open-mobile .sidebar-main-scroll { grid-auto-rows: 128px !important; row-gap: 10px !important; }
  #buatLayout#buatLayout.sidebar-open-mobile :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-scroll-foot) :is(.coda-sb-item, .coda-sb-action) {
    height: 128px !important; min-height: 128px !important; padding: 14px 8px !important;
  }
  /* Hasil cari baris atas: kisi ikon seperti hasil cari di beranda, judul saja. */
  .coda-admin-shell #mobileTopResults:not(:empty) {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: 128px; gap: 10px; align-content: start;
  }
  #buatLayout#buatLayout #mobileTopResults .coda-info-row {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important;
    height: 128px; min-height: 0; margin: 0 !important; padding: 14px 8px !important; border: 0 !important; border-radius: 12px !important;
    background: transparent; color: inherit; text-align: center; cursor: pointer;
  }
  #buatLayout#buatLayout #mobileTopResults .coda-info-ico { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 16px !important; }
  #buatLayout#buatLayout #mobileTopResults .coda-info-ico i { font-size: 28px !important; }
  #buatLayout#buatLayout #mobileTopResults .coda-info-copy { width: 100%; }
  #buatLayout#buatLayout #mobileTopResults .coda-info-title { display: block; white-space: normal !important; text-align: center; font-size: 13px !important; line-height: 1.3; }
  #buatLayout#buatLayout #mobileTopResults .coda-info-desc { display: none !important; }
  /* Kartu slide-up: toolbar memakai mode sempit panel kanan (lokasi = pin, tanggal = kalender, tombol 32px) dan
     sebaris dengan tombol cari kartu, seperti kepala panel kanan desktop. */
  #mobileFormSheet #mobileFormContentArea:has(.admin-report-toolbar) { padding-top: 0 !important; }
  #mobileFormSheet .coda-mobile-sheet-head { top: 36px !important; }
  #mobileFormSheet #mobileFormContentArea .admin-report-toolbar { overflow: visible !important; }
  /* Semua tombol toolbar kartu sama dengan panel kanan desktop: tanpa tombol biru penuh. */
  #mobileFormSheet :is(#mobileFormContentArea,#extraMobileHeaderActions) .admin-report-toolbar > :is(button, a) { background: transparent !important; color: #86868b !important; border-color: rgba(0,0,0,.08) !important; }
  #mobileFormSheet :is(#mobileFormContentArea,#extraMobileHeaderActions) .admin-report-toolbar > :is(button, a):is(:hover, :active) { background: rgba(0,0,0,.06) !important; color: #1d1d1f !important; }
  #mobileFormSheet :is(#mobileFormContentArea,#extraMobileHeaderActions) .admin-report-toolbar > :is(select, input[type="date"], input[type="month"]) {
    width: 32px !important; min-width: 32px !important; max-width: 32px !important; padding: 0 !important; color: transparent !important;
    -webkit-appearance: none; appearance: none; background-position: center !important; background-size: 16px !important;
    background-repeat: no-repeat !important; background-color: transparent !important;
  }
  #mobileFormSheet :is(#mobileFormContentArea,#extraMobileHeaderActions) .admin-report-toolbar > select { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%2386868b%22%20d%3D%22M128%2016a88.1%2088.1%200%200%200-88%2088c0%2075.3%2080%20132.17%2083.41%20134.55a8%208%200%200%200%209.18%200C136%20236.17%20216%20179.3%20216%20104a88.1%2088.1%200%200%200-88-88Zm0%2056a32%2032%200%201%201-32%2032%2032%2032%200%200%201%2032-32Z%22%2F%3E%3C%2Fsvg%3E") !important; }
  #mobileFormSheet :is(#mobileFormContentArea,#extraMobileHeaderActions) .admin-report-toolbar > :is(input[type="date"], input[type="month"]) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%2386868b%22%20d%3D%22M208%2032h-24v-8a8%208%200%200%200-16%200v8H88v-8a8%208%200%200%200-16%200v8H48a16%2016%200%200%200-16%2016v160a16%2016%200%200%200%2016%2016h160a16%2016%200%200%200%2016-16V48a16%2016%200%200%200-16-16ZM48%2048h24v8a8%208%200%200%200%2016%200v-8h80v8a8%208%200%200%200%2016%200v-8h24v32H48Zm160%20160H48V96h160v112Z%22%2F%3E%3C%2Fsvg%3E") !important; }
  #mobileFormSheet :is(#mobileFormContentArea,#extraMobileHeaderActions) .admin-report-toolbar > :is(input[type="date"], input[type="month"])::-webkit-datetime-edit { display: none; }
  #mobileFormSheet :is(#mobileFormContentArea,#extraMobileHeaderActions) .admin-report-toolbar > :is(input[type="date"], input[type="month"])::-webkit-calendar-picker-indicator { opacity: 0; width: 100%; margin: 0; cursor: pointer; }
}

/* WEB_MARK8.9.8 */
/* Ikon pengguna: hover dan aktif (sub-tree terbuka) sama dengan item menu sidebar. */
#buatLayout#buatLayout .coda-sidebar .coda-sidebar-user { border-radius: 12px; transition: background-color .15s ease, box-shadow .15s ease; }
/* Kolom cari mode mini: tidak ada latar aktif yang menetap; latar hanya saat hover, seperti item lain. */
#buatLayout#buatLayout.sidebar-mini .coda-sidebar .search-wrap:not(:hover):not(:focus-within) { background-color: transparent !important; box-shadow: none !important; }
/* Ponsel: sub-tree Bahasa dan Keluar menyamping (horizontal), kartu ikon tetap 32px seperti sidebar. */
@media (max-width: 980px) {
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree { width: auto !important; }
  #buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sidebar-actions { flex-direction: row !important; flex-wrap: nowrap; justify-content: flex-start !important; gap: 8px !important; }
  #buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-action { width: auto !important; padding: 4px 12px 4px 4px !important; }
}
/* Nilai dasbor panel tengah (Pendapatan, Anggota, Voucher, Penghuni): tiap nilai diberi kartu bergaya kartu ikon cari,
   pengguna, dan collapse (logam abu-abu, tinta gelap). Labelnya tetap di luar kartu. */
#buatLayout#buatLayout #detailSection :is(.admin-revenue-kpi-value, .admin-domain-kpi strong, .admin-revenue-legend-item strong, .admin-revenue-source-row strong) {
  display: inline-block; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 4px 0; padding: 4px 10px;
  border-radius: 10px; color: #2b2f38 !important; -webkit-text-fill-color: #2b2f38; text-shadow: none !important;
  background: conic-gradient(from 160deg, #e8ebf0, #9aa1ae, #d6dae2, #8b92a0, #e8ebf0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 5px rgba(139,146,160,.45);
}
/* Nilai tetap satu baris di dalam kartunya; kartu menyesuaikan, kolom legenda yang menyusun ulang. */
#buatLayout#buatLayout #detailSection :is(.admin-revenue-legend-item strong, .admin-revenue-source-row strong) { white-space: nowrap !important; padding: 3px 8px; }
#buatLayout#buatLayout #detailSection .admin-domain-kpi strong { font-size: 18px !important; overflow: visible !important; text-overflow: clip !important; }

/* WEB_MARK8.9.9 */
/* Ikon kurs: kartu emas dengan glyph dua warna (duotone: isi cokelat keemasan, garis putih). */
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-currency-circle-dollar) {
  --ap-bg: linear-gradient(180deg, #ffe38a 0%, #f2b632 55%, #c98a12 100%); --ap-sh: #c98a12; --sb-glyph: #fff;
  background: var(--ap-bg) !important;
}
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico > i.ph-currency-circle-dollar { color: #fff !important; font-size: 22px !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico > i.ph-currency-circle-dollar::before { color: #8a5200 !important; -webkit-text-fill-color: #8a5200 !important; opacity: .8 !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico > i.ph-currency-circle-dollar::after { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* Sub-tree akun desktop: jarak dan tinggi baris sama dengan item menu sidebar (44px, jarak 8px). */
#buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sidebar-actions { gap: 8px !important; }
@media (min-width: 981px) {
  #buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar .coda-account-tree .coda-sb-action { height: 44px !important; min-height: 44px !important; padding: 6px !important; }
}
/* Nilai dasbor panel tengah: kartu setinggi kartu ikon cari/pengguna/collapse (32px), font menyesuaikan. */
#buatLayout#buatLayout #detailSection :is(.admin-revenue-kpi-value, .admin-domain-kpi strong, .admin-revenue-legend-item strong, .admin-revenue-source-row strong) {
  height: 32px; line-height: 32px !important; padding: 0 10px !important; margin: 4px 0 !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
}
#buatLayout#buatLayout #detailSection :is(.admin-revenue-kpi-value, .admin-domain-kpi strong) { font-size: 16px !important; }
#buatLayout#buatLayout #detailSection :is(.admin-revenue-legend-item strong, .admin-revenue-source-row strong) { font-size: 14px !important; }
@media (max-width: 980px) {
  /* Ikon pengguna pojok kanan atas: username di sisi kiri ikon, bercermin terhadap logo CODA. */
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-user { flex-direction: row-reverse !important; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-user .coda-sb-text { align-items: flex-end !important; text-align: right; }
  /* Sub-tree ponsel tanpa garis pohon; ikonnya tetap berjajar kiri-kanan. */
  #buatLayout#buatLayout .coda-sidebar .coda-account-tree { border-left: 0 !important; padding-left: 0 !important; max-width: 100%; min-width: 0; }
  #buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-action { flex: 0 1 auto !important; min-width: 0 !important; }
  #buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-text { min-width: 0 !important; overflow: hidden; }
  #buatLayout#buatLayout .coda-sidebar .coda-account-tree .coda-sb-title { overflow: hidden; text-overflow: ellipsis; }
}

/* WEB_MARK8.10.1 */
/* Ikon kurs: glyph putih pejal di kartu emas, gaya yang sama dengan ikon menu lain (bukan duotone tipis). */
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-currency-circle-dollar) {
  --ap-bg: linear-gradient(180deg, #ffd65a 0%, #f5a623 52%, #cf7a06 100%); --ap-sh: #cf7a06;
  background: var(--ap-bg) !important;
}
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico > i.ph-currency-circle-dollar { font-size: 18px !important; color: #fff !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico > i.ph-currency-circle-dollar::before { color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important; text-shadow: 0 1px 1px rgba(120,60,0,.35) !important; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico > i.ph-currency-circle-dollar::after { content: none !important; }
/* WEB_MARK8.10.3: ikon pengguna mengikuti hover/aktif item menu, termasuk rail mini dan panah utuh. */
/* Ikon pengguna memakai ulang nilai item menu persis: padding dan transisi yang sama (hover/aktif sudah sama). */
#buatLayout#buatLayout .coda-sidebar .coda-sidebar-user { padding: 6px 4px 6px 6px !important; overflow: visible; transition: background .2s, border-color .2s !important; }
/* Rail mini: kotak hover 40px dan pusat ikon sama persis dengan item menu (x14/x18). */
@media (min-width: 981px) {
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-sidebar-user {
    width: 40px; min-width: 40px; max-width: 40px; height: 40px; min-height: 40px;
    margin-left: 2px !important; padding: 3px !important; gap: 0; justify-content: center; flex-shrink: 0;
  }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-sidebar-user .coda-sb-text { display: none; }
}
/* Panah bulat kecil di pojok kartu ikon pengguna, sama dengan ikon menu yang punya sub-tree. */
#buatLayout#buatLayout .coda-sidebar .coda-sidebar-user .coda-sb-ico { position: relative; overflow: visible; }
#buatLayout#buatLayout .coda-sidebar .coda-user-caret { pointer-events: none; }
@media (max-width: 980px) {
  #buatLayout#buatLayout .coda-sidebar .coda-user-caret { display: none !important; }
  /* Sub-tree akun ponsel rata kiri, sejajar kartu logo CODA. */
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree { justify-self: start !important; margin: 4px 0 8px 0 !important; }
  /* Border tombol 1px + padding 5px menempatkan kartu Bahasa pada x18, sama dengan logo. */
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sb-action:first-child { padding-left: 5px !important; }
}
/* Ketiga label hilang bersama sebelum baris menyempit; ritme ikon mengikuti rail mini. */
@media (max-width: 380px) {
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree { margin-left: 2px !important; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sidebar-actions { gap: 12px !important; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sb-action {
    flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px;
    padding: 3px !important; gap: 0 !important; justify-content: center !important;
  }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sb-action:first-child { padding-left: 3px !important; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sb-action .coda-sb-text { display: none !important; }
}
/* Label Inggris lebih panjang: sembunyikan ketiganya sebelum terpotong pada layar sempit. */
@media (min-width: 381px) and (max-width: 480px) {
  html[lang="en"] #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree { margin-left: 2px !important; }
  html[lang="en"] #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sidebar-actions { gap: 12px !important; }
  html[lang="en"] #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sb-action {
    flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px;
    padding: 3px !important; gap: 0 !important; justify-content: center !important;
  }
  html[lang="en"] #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sb-action:first-child { padding-left: 3px !important; }
  html[lang="en"] #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-account-tree .coda-sb-action .coda-sb-text { display: none !important; }
}
/* Rail mini: kompensasi baris akun 40px agar semua kartu tetap pada koordinat desktop semula. */
@media (min-width: 981px) {
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-sidebar-user { margin-top: 2px !important; }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-sidebar-identity { padding-bottom: 4px !important; }
}
/* Satu kaca bening seperti kartu login; panel kiri/tengah berbagi blur dan tak punya jahitan. */
#buatLayout#buatLayout {
  background: rgba(255,255,255,.16) !important;
  backdrop-filter: blur(10px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.35), inset 0 0 26px -10px rgba(255,255,255,.45) !important;
}
#buatLayout#buatLayout :is(#adminSidebar,#detailSection).coda-login-glass {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
/* X pencarian workspace memakai kartu logam pengguna, tetap di sisi kanan input. */
#buatLayout#buatLayout #desktopSearchWrap .coda-search-clear,
#buatLayout#buatLayout #mobileSearchContainer #mobileSearchClose {
  box-sizing: border-box; display: none !important; flex: 0 0 32px; width: 32px; min-width: 32px; height: 32px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px;
  background: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 5px rgba(0,60,140,.2) !important;
  color: #2b2f38 !important; cursor: pointer; place-items: center;
}
#buatLayout#buatLayout #desktopSearchWrap:is(:focus-within,:has(input:not(:placeholder-shown))) .coda-search-clear,
#buatLayout#buatLayout .coda-hero-box.cari-buka #mobileSearchContainer #mobileSearchClose { display: grid !important; }
#buatLayout#buatLayout .coda-search-clear i { font-size: 16px !important; color: #2b2f38 !important; }
@media (max-width: 980px) {
  #buatLayout#buatLayout .coda-hero-box .coda-mobile-search-open { right: 10px !important; }
  #buatLayout#buatLayout #mobileSearchContainer { left: 12px !important; right: 12px !important; padding-right: 4px !important; }
}
/* Enam konteks legenda Pendapatan: satu judul per kotak dan grafik mini di bawah nilainya. */
#buatLayout#buatLayout #detailSection .admin-revenue-legend {
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)) !important;
  border-color: color-mix(in srgb, var(--coda-master-blue-text, #003f7f) 26%, transparent) !important;
}
#buatLayout#buatLayout #detailSection .admin-revenue-legend-item {
  box-sizing: border-box; min-width: 0; min-height: 92px; padding: 6px 8px;
  display: flex; flex-direction: column;
  border-color: color-mix(in srgb, var(--coda-master-blue-text, #003f7f) 26%, transparent) !important;
}
#buatLayout#buatLayout #detailSection .admin-revenue-legend-label {
  white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
  letter-spacing: -.02em;
}
#buatLayout#buatLayout #detailSection .admin-revenue-legend-value { margin: 2px 0 4px !important; }
#buatLayout#buatLayout #detailSection .admin-revenue-legend-chart {
  display: block; width: 100%; max-width: 112px; height: 22px;
  margin-top: auto; align-self: center; color: var(--coda-master-blue-text, #003f7f);
}

/* Inbox lives under the account on desktop; on phones it is the first menu tile. */
.coda-admin-shell .coda-sidebar .coda-sidebar-inbox-desktop {
  flex: 0 0 auto; margin: 0 12px;
}
.coda-admin-shell .coda-sidebar .coda-sidebar-inbox-desktop:has(> [hidden]),
.coda-admin-shell .coda-sidebar .coda-sidebar-inbox-mobile { display: none; }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico,.grid-ico):has(> .ph-envelope-simple),
#buatLayout#buatLayout .ig-menu-item > i.ph-envelope-simple { --ikon-bg: hsl(6 84% 62%); }
#buatLayout#buatLayout .coda-sidebar .coda-sidebar-inbox-desktop .coda-sb-ico:has(> .ph-envelope-simple),
#buatLayout#buatLayout .coda-sidebar .coda-sidebar-inbox-mobile .coda-sb-ico:has(> .ph-envelope-simple) {
  --ap-bg: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0);
  --sb-glyph: #2b2f38; --ap-sh: #8b92a0; --ap-glow: 0 1px 1px rgba(0,0,0,.2);
}
#buatLayout#buatLayout .admin-inbox-row .admin-inbox-row-icon {
  width: var(--coda-ui-size); height: var(--coda-ui-size); min-width: var(--coda-ui-size);
}
#buatLayout#buatLayout .coda-voucher-shortcut { color: inherit; text-decoration: none; }
#buatLayout#buatLayout .coda-voucher-shortcut:focus-visible {
  outline: 2px solid var(--coda-master-blue); outline-offset: -2px;
}
@media (max-width: 980px) {
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-inbox-desktop { display: none; }
  #buatLayout#buatLayout.sidebar-open-mobile .coda-sidebar .coda-sidebar-inbox-mobile { display: contents; }
}

/* Pusat kartu collapse tetap pada koordinat yang sama saat lebar sidebar berubah. */
@media (min-width: 981px) {
  #buatLayout#buatLayout:not(.sidebar-mini) .coda-sidebar #toggleSidebarBtn { padding-left: 6px !important; }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar #toggleSidebarBtn { padding-left: 4px !important; justify-content: flex-start !important; }
  #buatLayout#buatLayout .coda-sidebar #toggleSidebarBtn,
  #buatLayout#buatLayout .coda-sidebar #toggleSidebarBtn .coda-sb-ico { transition: none !important; transform: none !important; }
}

/* Search, menu, dan Pengguna memakai titik tengah 44px yang sama saat sidebar dilipat. */
@media (min-width: 981px) {
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-sidebar-identity { padding-bottom: 0 !important; }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar .coda-sidebar-user {
    height: 44px; min-height: 44px; margin-top: 0 !important; padding: 6px 4px !important;
    justify-content: flex-start;
  }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar :is(.coda-sidebar-inbox-desktop .coda-sb-item, .search-wrap, .sidebar-main-scroll .coda-sb-item) {
    height: 44px; min-height: 44px; margin-bottom: 0; padding-top: 5px; padding-bottom: 5px;
  }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar :is(.coda-sidebar-inbox-desktop .coda-sb-item, .sidebar-main-scroll .coda-sb-item) { padding-left: 4px; padding-right: 4px; }
  #buatLayout#buatLayout .coda-sidebar .sidebar-main-scroll { padding-top: 10px !important; }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar .sidebar-main-scroll { gap: 8px; }
  #buatLayout#buatLayout.sidebar-mini .coda-sidebar :is(.coda-desktop-main-nav, .coda-sb-list, .coda-sidebar-scroll-foot) { gap: 8px; }
}

/* Date fields keep the login/search input's single rounded focus line. */
#formPanel#formPanel :is(input[type="date"],input[type="month"]),
#mobileFormSheet#mobileFormSheet :is(input[type="date"],input[type="month"]) {
  border: 1px solid var(--coda-master-input-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
#formPanel#formPanel :is(input[type="date"],input[type="month"]):focus,
#mobileFormSheet#mobileFormSheet :is(input[type="date"],input[type="month"]):focus {
  border: 1px solid var(--coda-master-blue) !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Pemilih lokasi di panel kanan mengikuti garis fokus kolom tanggal. */
#formPanel#formPanel .coda-location-select,
#mobileFormSheet#mobileFormSheet .coda-location-select,
#formPanel#formPanel .coda-license-client-select,
#mobileFormSheet#mobileFormSheet .coda-license-client-select,
#formPanel#formPanel .coda-payment-provider-select,
#mobileFormSheet#mobileFormSheet .coda-payment-provider-select {
  border: 1px solid var(--coda-master-input-border) !important;
  border-radius: 8px !important;
  outline: none !important;
  box-shadow: none !important;
}
#formPanel#formPanel .coda-location-select:is(:hover,:focus,:focus-visible,:active),
#mobileFormSheet#mobileFormSheet .coda-location-select:is(:hover,:focus,:focus-visible,:active),
#formPanel#formPanel .coda-license-client-select:is(:hover,:focus,:focus-visible,:active),
#mobileFormSheet#mobileFormSheet .coda-license-client-select:is(:hover,:focus,:focus-visible,:active),
#formPanel#formPanel .coda-payment-provider-select:is(:hover,:focus,:focus-visible,:active),
#mobileFormSheet#mobileFormSheet .coda-payment-provider-select:is(:hover,:focus,:focus-visible,:active) {
  border-color: var(--coda-master-blue) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Baris tabel yang dipilih tetap biru pada panel kanan dan kartu mobile. */
:is(#formPanel,#mobileFormSheet) :is(.admin-data-workspace .admin-transaction-table, .admin-payment-workspace .admin-report-table) tbody tr.selected > td,
:is(#formPanel,#mobileFormSheet) .admin-license-workspace .admin-report-table tbody tr.active-list-item > td {
  background-color: rgba(0,113,227,.12) !important;
}
:is(#formPanel,#mobileFormSheet) :is(.admin-data-workspace .admin-transaction-table, .admin-payment-workspace .admin-report-table) tbody tr.selected > td:first-child,
:is(#formPanel,#mobileFormSheet) .admin-license-workspace .admin-report-table tbody tr.active-list-item > td:first-child {
  box-shadow: inset 3px 0 0 #0a84ff;
}

/* Perpanjangan memilih klien di toolbar yang sama pada panel kanan dan kartu mobile. */
#formPanel#formPanel .admin-license-renewal-workspace .admin-report-toolbar > .coda-license-client-select,
#mobileFormSheet#mobileFormSheet .admin-license-renewal-workspace .admin-report-toolbar > .coda-license-client-select {
  box-sizing: border-box; flex: 1 1 150px; width: auto !important; min-width: 104px !important; max-width: 180px !important;
  padding: 0 8px !important; color: #1d1d1f !important; font-size: 12px !important; text-overflow: ellipsis;
  appearance: auto !important; -webkit-appearance: auto !important; background-image: none !important; background-color: transparent !important;
}
#mobileFormSheet#mobileFormSheet .admin-license-renewal-workspace .admin-report-toolbar > .coda-license-client-select { max-width: none !important; }

/* Status POS pada daftar lokasi mobile: hijau penuh, kuning sebagian, merah offline. */
.admin-mqtt-pos-indicator { display: block; width: 12px; height: 12px; border-radius: 50%; background: #aeb7c4; box-shadow: 0 0 0 3px rgba(174,183,196,.24), 0 0 9px rgba(174,183,196,.5); }
.admin-mqtt-pos-indicator.online { background: #18df6c; box-shadow: 0 0 0 3px rgba(24,223,108,.25), 0 0 10px rgba(24,223,108,.7); }
.admin-mqtt-pos-indicator.mixed { background: #ffd43b; box-shadow: 0 0 0 3px rgba(255,212,59,.28), 0 0 10px rgba(255,212,59,.75); }
.admin-mqtt-pos-indicator.offline { background: #ff4555; box-shadow: 0 0 0 3px rgba(255,69,85,.26), 0 0 10px rgba(255,69,85,.7); }
@media (max-width: 980px) {
  #buatLayout#buatLayout .admin-mqtt-location .admin-mqtt-node-status {
    display: flex; min-width: 0; padding: 0 14px; border: 0; align-items: center; justify-content: center;
  }
}

/* Kepala dasbor ponsel: judul cakupan dan kontrol waktu berbagi satu baris. */
@media (max-width: 980px) {
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-toolbar {
    display: flex; flex-direction: row; align-items: center; min-height: 44px; height: auto; overflow: visible;
  }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-toolbar-copy {
    flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; padding: 0 8px 0 16px; border: 0;
  }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-toolbar-copy strong { white-space: normal; }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls { flex: 0 0 auto; width: auto; height: 44px; }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls input {
    flex: 0 0 118px; width: 118px !important; padding: 0 5px !important;
  }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls button { min-width: 35px; padding: 0 4px; }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls :is(input, button) {
    font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important;
    color: #fff !important; text-shadow: 0 1px 2px rgba(0,40,90,.55) !important;
  }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls input::-webkit-datetime-edit {
    display: inline !important; font-size: 15px; text-shadow: 0 1px 2px rgba(0,40,90,.55);
  }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls input::-webkit-calendar-picker-indicator {
    opacity: 1 !important; filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,40,90,.55));
  }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls button:last-child i {
    color: #fff !important; filter: drop-shadow(0 1px 2px rgba(0,40,90,.55));
  }

  /* Voucher dan Anggota: nama ringkasan dan pilihan lokasi sama jelasnya. */
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr);
    align-items: center; gap: 8px; height: auto; min-height: 44px; padding: 0 16px; overflow: visible;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head > strong {
    min-width: 0; padding: 0; border: 0; white-space: normal; overflow: visible;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head > .admin-domain-location {
    width: 100%; min-width: 0; max-width: 100%; height: 44px; margin: 0; padding: 0 20px 0 0 !important;
    border: 0; text-align: right; text-align-last: right;
  }
  /* Penghuni: Aktivitas dan filter area satu baris; lokasi berada di tengah bawah. */
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head:has(#adminDomainRootArea) {
    grid-template-columns: minmax(75px, .8fr) minmax(110px, 1.2fr); column-gap: 8px; row-gap: 0;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head:has(#adminDomainChildArea) {
    grid-template-columns: minmax(75px, .75fr) minmax(100px, 1fr) minmax(130px, 1.3fr);
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head:has(#adminDomainRootArea) > strong {
    grid-column: 1; grid-row: 1;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head #adminDomainRootArea {
    grid-column: 2; grid-row: 1;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head #adminDomainChildArea {
    grid-column: 3; grid-row: 1;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head:has(#adminDomainRootArea) > #adminDomainSummaryTenant {
    grid-column: 1 / -1; grid-row: 2; justify-self: center; width: auto; max-width: 100%;
    padding: 0 20px 0 8px !important; text-align: center; text-align-last: center;
  }
}
/* Label ringkasan Admin sama di desktop dan ponsel, termasuk pilihan lokasi/area. */
#buatLayout#buatLayout .coda-detail-panel :is(
  .admin-revenue-toolbar-copy strong,
  .admin-domain-overview-head > strong,
  .admin-domain-overview-head > .admin-domain-location
) {
  font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important;
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,40,90,.55) !important;
}
@media (min-width: 981px) {
  /* Dashboard domain tidak menyembunyikan filter saat kolom desktop menyempit. */
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
    gap: 0; height: auto; min-height: 44px; padding: 8px 12px; overflow: visible;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head > strong {
    min-width: 0; padding: 0; border: 0; white-space: normal; overflow: visible;
    justify-content: center; text-align: center;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head > .admin-domain-location {
    width: 100%; min-width: 0; max-width: 100%; height: 32px; margin: 0; padding: 0 20px 0 0 !important;
    border: 0; text-align: left; text-align-last: left;
  }
}
@media (max-width: 400px) {
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-toolbar { flex-wrap: wrap; }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-toolbar-copy { flex-basis: 100%; }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls { width: 100%; }
  #buatLayout#buatLayout .admin-revenue-mobile-overview .admin-revenue-controls input { flex: 1 1 0; width: auto !important; }
}
@media (max-width: 340px) {
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head:has(#adminDomainChildArea) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head #adminDomainChildArea {
    grid-column: 1 / -1; grid-row: 2;
  }
  #buatLayout#buatLayout .admin-domain-center .admin-domain-overview-head:has(#adminDomainChildArea) > #adminDomainSummaryTenant {
    grid-row: 3;
  }
}
/* Adapter slots only; all surfaces, navigation, search and sheet rules come from Admin. */
.coda-portal-layout .coda-info-row { cursor: pointer; }
.coda-portal-layout .coda-info-copy { min-width: 0; }
.coda-portal-layout :is(.coda-sb-ico,.coda-info-ico) > img {
  display: block; width: var(--coda-icon-size); height: var(--coda-icon-size); max-width: 100%; object-fit: contain;
}
.coda-admin-shell .coda-portal-content {
  padding: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: auto;
}
.coda-portal-layout .coda-sidebar:focus { outline: none; }

/* A toolbar supplied through FormPanel's header slot uses the same compact controls
 * as a module toolbar lifted from formContentArea by workspace-glass.css. */
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar {
  display: flex; align-items: center; gap: 8px; height: var(--coda-ui-size);
  min-height: var(--coda-ui-size); padding: 0; border: 0; background: transparent;
  overflow-x: auto; scrollbar-width: none;
}
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar > :is(button,select,input,a.coda-btn) {
  flex: 0 0 auto; align-self: center; box-sizing: border-box;
  height: var(--coda-ui-size) !important; min-height: var(--coda-ui-size) !important; max-height: var(--coda-ui-size) !important;
  margin: 0 !important; border: 1px solid var(--coda-border) !important; border-radius: 8px !important;
  background: transparent !important; color: var(--coda-muted); box-shadow: none !important;
}
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar > :is(select,input) {
  width: auto; min-width: 0; max-width: 180px; padding: 0 8px !important; color: var(--coda-text); font-size: 12px !important;
}
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar > button {
  width: var(--coda-ui-size); min-width: var(--coda-ui-size); padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 0; font-size: 0 !important; line-height: 0 !important;
}
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar > button i { display: block; font-size: 14px; line-height: 1; }
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar > button > :not(i) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar > :is(button,a.coda-btn):is(:hover,:focus-visible) {
  background: var(--coda-surface-hover) !important; color: var(--coda-blue);
}
.coda-portal-layout .coda-extra-header-actions .admin-report-toolbar :is(input,select):focus {
  border-color: var(--coda-master-input-focus, var(--coda-blue)) !important;
  box-shadow: 0 0 0 3px var(--coda-master-input-ring) !important;
}
@media (max-width: 980px) {
  .coda-portal-layout.sidebar-open-mobile .coda-desktop-main-nav .coda-sb-ico > img,
  .coda-portal-layout .coda-info-ico > img { width: 28px; height: 28px; }
  #buatLayout.coda-portal-layout ~ #mobileFormSheet .coda-mobile-sheet-head {
    left: 12px; right: 12px; width: auto; min-width: 0;
  }
  #buatLayout.coda-portal-layout ~ #mobileFormSheet .coda-mobile-sheet-head:has(#extraMobileHeaderActions:empty) {
    pointer-events: none;
  }
  #buatLayout.coda-portal-layout ~ #mobileFormSheet .coda-mobile-sheet-head:has(#extraMobileHeaderActions:empty) .coda-panel-search {
    pointer-events: auto;
  }
  #buatLayout.coda-portal-layout ~ #mobileFormSheet #extraMobileHeaderActions {
    flex: 1 1 auto; min-width: 0; max-width: none; margin-right: 8px !important;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  #buatLayout.coda-portal-layout ~ #mobileFormSheet #extraMobileHeaderActions > * {
    flex: 1 1 auto; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
  }
  #buatLayout.coda-portal-layout ~ #mobileFormSheet #extraMobileHeaderActions .admin-report-toolbar {
    box-sizing: border-box; width: 100% !important; max-width: 100% !important; min-width: 0;
    overflow-x: auto !important; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  #buatLayout.coda-portal-layout ~ #mobileFormSheet #extraMobileHeaderActions .admin-report-toolbar > :is(button,select,input,a.coda-btn) {
    flex: 0 0 auto !important;
  }
}
/* codaweb adapter. Glass sheet, clouds, sidebar rows, icon cards and middle-panel rows all come from the
 * Admin shell (src/admin-shell, synced by tools/prepare-shell.ts); this file only fits them to a public site:
 * two panes instead of three, a vertical page stack, and the content of pages 2-5. */

/* ---- Two panes: the middle (glass) pane takes the place of the right panel. ---- */
#buatLayout.codaweb-layout { grid-template-columns: var(--coda-sidebar-w) minmax(0, 1fr) 0; }
#buatLayout.codaweb-layout.sidebar-mini { grid-template-columns: var(--coda-sidebar-w-mini) minmax(0, 1fr) 0; }
#buatLayout.codaweb-layout > #formPanel { display: none; }
#buatLayout.codaweb-layout > .coda-detail-panel { overflow: hidden; }
.codaweb-layout .coda-sidebar-footer { display: flex; flex-direction: column; gap: 8px; }

/* ---- Page stack: choosing another page scrolls the stack, so the landing page slides up and away. ---- */
.codaweb-layout .cw-halaman { position: absolute; inset: 0; overflow: hidden; }
.codaweb-layout .cw-page {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  transform: translateY(calc(var(--geser) * 100%));
  /* Pages that are not shown stop painting once they are out of view. */
  visibility: hidden; transition: transform .7s var(--coda-soft), visibility 0s linear .7s;
}
.codaweb-layout .cw-page::-webkit-scrollbar { display: none; }
.codaweb-layout .cw-page:not([inert]) { visibility: visible; transition: transform .7s var(--coda-soft); }
.codaweb-layout .cw-page-landing { overflow: hidden; }
/* Transparent: the landing paints no sky of its own here, so the shared glass (and the sidebar's clouds) run under it. */
.codaweb-layout .cw-landing { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .codaweb-layout .cw-page, .codaweb-layout .cw-page:not([inert]) { transition: none; }
}

/* ---- Icons this site adds to the Admin palette (same recipe: one hue per glyph). ---- */
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico):has(> .ph-download-simple) { --ikon-bg: hsl(203 92% 52%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico):has(> .ph-windows-logo) { --ikon-bg: hsl(206 100% 42%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico):has(> .ph-android-logo) { --ikon-bg: hsl(148 62% 42%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico):has(> .ph-wallet) { --ikon-bg: hsl(270 70% 62%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico):has(> .ph-arrows-clockwise) { --ikon-bg: hsl(32 92% 54%); }
#buatLayout#buatLayout :is(.coda-sb-ico,.coda-info-ico):has(> .ph-device-mobile) { --ikon-bg: hsl(186 70% 42%); }
/* Beranda reuses the Admin phone-home house; Unduh gets an app-store blue in the same gradient style. */
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-house) { --ap-bg: linear-gradient(180deg,#6d8bff,#3b4fd8); --sb-glyph: #fff; --ap-sh: #3b4fd8; }
#buatLayout#buatLayout .coda-sidebar .coda-sb-ico:has(> .ph-download-simple) { --ap-bg: linear-gradient(180deg,#5ac8fa,#0a7aff); --sb-glyph: #fff; --ap-sh: #0a7aff; }
/* In Admin the sidebar QR glyph is the DOKU logo; here the menu is QRIS itself, so show the QR on the same red. */
#buatLayout#buatLayout#buatLayout#buatLayout.codaweb-layout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code) {
  --ap-bg: linear-gradient(180deg,#f0353a,#d0161d); --sb-glyph: #fff; --ap-sh: #d0161d;
}
#buatLayout#buatLayout#buatLayout#buatLayout.codaweb-layout .coda-sidebar .coda-sb-ico:has(> .ph-qr-code) > i { visibility: visible; }

/* ---- Content of pages 2-5: white text straight on the shared glass, like the sidebar and middle panel. ---- */
.codaweb-layout .cw-isi {
  box-sizing: border-box; max-width: 1080px; min-height: 100%; margin: 0 auto; padding: 48px 40px 64px;
  display: flex; flex-direction: column; gap: 24px; color: var(--coda-text);
}
.codaweb-layout .cw-head h1 {
  margin: 0; font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
  text-shadow: 0 2px 18px rgba(0,40,100,.18);
}
/* The master paints all text on the glass white, weight 400, with a soft shadow; secondary text dims by opacity. */
.codaweb-layout .cw-head h1 span { display: block; margin-top: 4px; font-size: .58em; letter-spacing: -.01em; opacity: .82; }
.codaweb-layout .cw-head p { max-width: 62ch; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--coda-muted); }
.codaweb-layout .cw-blok {
  padding: 20px 24px; border-radius: 16px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 10px -4px rgba(255,255,255,.3), inset 0 0 26px -10px rgba(255,255,255,.4), 0 1px 4px rgba(0,60,140,.05);
}
.codaweb-layout .cw-blok h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.codaweb-layout .cw-blok p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--coda-muted); }
.codaweb-layout .cw-blok p + p { margin-top: 12px; }
.codaweb-layout .cw-list { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.codaweb-layout a.coda-info-row { color: inherit; text-decoration: none; }
/* Admin rows are always links, so the master lays out only .clickable-item; information rows get the same box. */
.codaweb-layout .cw-list .coda-info-row:not(.clickable-item) { display: flex; align-items: center; gap: 12px; padding: 6px 4px 6px 6px; }
.codaweb-layout .cw-row-sub { font-size: 12px; line-height: 16px; opacity: .82; }

.codaweb-layout .cw-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: center; }
/* The photo has feathered white edges (the landing always masks it); fade them into the glass the same way. */
.codaweb-layout .cw-foto {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 55% 55%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 55% 55%, #000 58%, transparent 100%);
}

.codaweb-layout .cw-dompet {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px;
}
.codaweb-layout .cw-dompet li {
  display: grid; place-items: center; height: 64px; padding: 12px 16px; box-sizing: border-box;
  border-radius: 12px; background: #fff; box-shadow: 0 2px 5px rgba(0,60,140,.2);
}
.codaweb-layout .cw-dompet img { display: block; width: auto; max-width: 100%; height: auto; max-height: 34px; }

.codaweb-layout .cw-dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.codaweb-layout .cw-struk-qr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.codaweb-layout .cw-struk-qr img { display: block; width: 112px; height: auto; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,40,100,.22); }

.codaweb-layout .cw-layar { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.codaweb-layout .cw-logo3d { display: block; width: min(420px, 80%); height: auto; }
.codaweb-layout .cw-layar img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,40,100,.2); }

/* Receipt search: the login input and button of the Admin shell. */
.codaweb-layout .cw-cari label { display: block; margin-bottom: 12px; font-size: 14px; line-height: 1.5; color: var(--coda-muted); }
.codaweb-layout .cw-cari-baris { display: flex; gap: 12px; }
.codaweb-layout .cw-cari input {
  flex: 1 1 auto; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--coda-master-input-border); border-radius: 10px; background: var(--coda-master-input-bg);
  color: #1d1d1f; font: inherit; font-size: 15px; text-transform: uppercase;
}
.codaweb-layout .cw-cari input::placeholder { color: #86868b; text-transform: none; }
.codaweb-layout .cw-cari input:focus { outline: none; border-color: var(--coda-master-blue); box-shadow: 0 0 0 3px var(--coda-master-input-ring); }
.codaweb-layout .cw-cari button {
  flex: 0 0 auto; height: 44px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--coda-master-blue); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color 150ms ease-out;
}
.codaweb-layout .cw-cari button:hover { background: #0077ed; }

/* ---- Ticket cards: the landing hero's printed tickets (src/landing.html .hero-ticket-*), shown upright. ---- */
.codaweb-layout .cw-tiket { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 8px 0 16px; }
.codaweb-layout .cw-tiket .hero-ticket-card {
  position: relative; display: block; width: 124px; aspect-ratio: .68; border-radius: 6px; overflow: hidden; zoom: 1.6;
  background: #edf1f4; border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 20px 38px rgba(6,20,31,.30), 7px 9px 0 -5px rgba(35,47,56,.48), inset 0 0 0 1px rgba(20,35,46,.16);
  animation: cwTiketMelayang 7.6s ease-in-out infinite alternate;
}
.codaweb-layout .cw-tiket .hero-ticket-card:nth-child(1) { --putar: -4deg; animation-delay: -.8s; }
.codaweb-layout .cw-tiket .hero-ticket-card:nth-child(2) { --putar: 1deg; animation-delay: -3.4s; }
.codaweb-layout .cw-tiket .hero-ticket-card:nth-child(3) { --putar: 4deg; animation-delay: -6s; }
.codaweb-layout .cw-tiket .hero-ticket-card::before { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(120deg,rgba(255,255,255,.34),transparent 28% 72%,rgba(45,65,78,.13)); box-shadow: inset -5px 0 8px rgba(25,38,48,.13); }
.codaweb-layout .cw-tiket .hero-ticket-face { position: absolute; inset: 0; padding: 10px 8px 8px; background: linear-gradient(100deg,#f9fbfc,#e8eef1 52%,#fff); color: #17212a; font-family: ui-monospace,Consolas,monospace; text-align: left; }
.codaweb-layout .cw-tiket .hero-ticket-brand { display: block; text-align: center; font-size: 16px; font-weight: 900; line-height: .9; letter-spacing: .08em; }
.codaweb-layout .cw-tiket .hero-ticket-sub { display: block; margin: 3px 0 7px; text-align: center; font-size: 5px; font-weight: 800; letter-spacing: .12em; }
.codaweb-layout .cw-tiket .hero-ticket-title { display: block; margin: 0 0 7px; padding: 4px 1px; border-top: 1px dashed #76818a; border-bottom: 1px dashed #76818a; text-align: center; font-size: 7px; font-weight: 700; line-height: 1.1; letter-spacing: .04em; }
.codaweb-layout .cw-tiket .hero-ticket-row { display: flex; justify-content: space-between; gap: 5px; margin: 3px 0; font-size: 5.5px; line-height: 1.1; white-space: nowrap; }
.codaweb-layout .cw-tiket .hero-ticket-row span:first-child { color: #5d6972; }
.codaweb-layout .cw-tiket .hero-ticket-row strong { overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.codaweb-layout .cw-tiket .hero-ticket-code { display: block; width: 46px; aspect-ratio: 1; margin: 8px auto 5px; border: 4px solid #17212a; background: repeating-conic-gradient(#17212a 0 25%,transparent 0 50%) 0 0/8px 8px; box-shadow: inset 0 0 0 3px #f4f7f8; }
.codaweb-layout .cw-tiket .hero-ticket-barcode { display: block; height: 18px; margin: 8px 2px 5px; background: repeating-linear-gradient(90deg,#17212a 0 2px,transparent 2px 4px,#17212a 4px 5px,transparent 5px 8px); }
.codaweb-layout .cw-tiket .hero-ticket-total { display: block; margin-top: 7px; padding-top: 5px; border-top: 1px solid #7e8991; text-align: center; font-size: 8px; font-weight: 900; }
.codaweb-layout .cw-tiket .hero-ticket-foot { display: block; margin-top: 5px; text-align: center; font-size: 4.5px; color: #69757e; }
/* A ticket is printed paper: undo the master's white-on-glass text rule (!important, specificity 1,3,0). */
#buatLayout.codaweb-layout .cw-tiket .hero-ticket-card :is(b, small, span, strong) { color: #17212a !important; font-weight: 400 !important; text-shadow: none !important; }
#buatLayout.codaweb-layout .cw-tiket .hero-ticket-card :is(.hero-ticket-brand, .hero-ticket-total) { font-weight: 900 !important; }
#buatLayout.codaweb-layout .cw-tiket .hero-ticket-card :is(.hero-ticket-sub, .hero-ticket-row strong) { font-weight: 800 !important; }
#buatLayout.codaweb-layout .cw-tiket .hero-ticket-card .hero-ticket-title { font-weight: 700 !important; }
#buatLayout.codaweb-layout .cw-tiket .hero-ticket-card .hero-ticket-row > span:first-child { color: #5d6972 !important; }
#buatLayout.codaweb-layout .cw-tiket .hero-ticket-card .hero-ticket-foot { color: #69757e !important; }
@keyframes cwTiketMelayang {
  from { transform: translateY(0) rotate(var(--putar, 0deg)); }
  to { transform: translateY(-6px) rotate(calc(var(--putar, 0deg) * .6)); }
}
@media (prefers-reduced-motion: reduce) { .codaweb-layout .cw-tiket .hero-ticket-card { animation: none; transform: rotate(var(--putar, 0deg)); } }

/* ---- Phone: sidebar becomes the Admin overlay; the opener sits over every page, landing included. ---- */
@media (max-width: 980px) {
  /* Admin hides this opener (its phone home has a top row); here it floats over every page, landing included,
     wearing the silver card of the desktop "Expand Sidebar" control. */
  #buatLayout.codaweb-layout .coda-mobile-sidebar-toggle {
    display: flex !important; position: absolute; top: 14px; left: 12px; z-index: 30;
    width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: transparent;
  }
  #buatLayout.codaweb-layout .coda-mobile-sidebar-toggle .coda-sb-ico {
    display: grid; place-items: center;
    background: conic-gradient(from 160deg,#e8ebf0,#9aa1ae,#d6dae2,#8b92a0,#e8ebf0) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.16), 0 2px 5px rgba(139,146,160,.45) !important;
  }
  #buatLayout.codaweb-layout .coda-mobile-sidebar-toggle .coda-sb-ico i { color: #2b2f38 !important; font-size: var(--coda-icon-size); text-shadow: none; }
  .codaweb-layout .cw-isi { padding: 72px 16px 40px; gap: 20px; }
  .codaweb-layout .cw-split, .codaweb-layout .cw-layar { grid-template-columns: minmax(0, 1fr); }
  .codaweb-layout .cw-layar img + img { max-width: 220px; margin: 0 auto; }
  .codaweb-layout .cw-blok { padding: 16px 18px; }
  .codaweb-layout .cw-tiket { gap: 16px; }
  .codaweb-layout .cw-tiket .hero-ticket-card { zoom: 1.15; }
}
@media (max-width: 480px) {
  .codaweb-layout .cw-cari-baris { flex-direction: column; }
  .codaweb-layout .cw-struk-qr { grid-template-columns: minmax(0, 1fr); }
}