@font-face{font-family:"Noto Sans";src:url("fonts/NotoSans-latin-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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}
@font-face{font-family:"Noto Sans";src:url("fonts/NotoSans-latin-ext-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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}
/* ==========================================================================
   Membara UI · Bara F&B Baseline + Brand Adapter (KANDIDAT TEKNIS)
   File CSS tunggal. Diekstrak dari BARA_FNB_FINAL_HTML_V1_OWNER_REVIEW.html,
   lalu literal warna merek dipindah ke token --brand-* (blok 1 & 5).

   PENTING: CSS ini bertumpuk (cascade). Blok 16-23 sengaja menimpa blok
   sebelumnya. Urutan blok WAJIB dipertahankan.
   Tanpa atribut data-product, tampilan = Bara (identik dengan baseline).
   Pakai di app lain:  <html data-product="molten|crm|erp" data-theme="light|dark">
   Token kunci Bara: --primary #BC061B · --page #F5F5F6 · --sidebar #E9E9EC
   Shell luar: #120C27

   STATUS adapter (blok 23), mengacu MBR-UI-CSS-001 v0.6:
   - primary Molten/CRM/ERP = USER_DESIGN_DECISION (hex di spec 0.4)
   - hover/soft Molten = spec 3.1; hover/soft CRM & ERP = KANDIDAT turunan
   - tint, outline, fokus, garis, dan seluruh tema gelap non-Bara = KANDIDAT
     turunan (color-mix dari --primary), BELUM diaudit/disetujui
   - --alert-* non-Bara = KANDIDAT (merah semantik terpisah dari merek)
   ========================================================================== */


/* ==========================================================================
   1. Root Variables & Reset Dasar
   ========================================================================== */
:root{
  --primary:#BC061B;
  --primary-hover:#920514;
  --soft:#FBEAEC;
  /* --- Brand tokens (nilai default = Bara; diganti oleh adapter [data-product], blok 23) --- */
  --brand-on-primary:#FFFFFF;
  --brand-on-primary-hover:#FFFFFF;
  --brand-on-primary-pressed:#FFFFFF;
  --brand-tint:#FBEAEC;
  --brand-tint-subtle:#FFF2F3;
  --brand-outline:#D9C2C5;
  --brand-outline-text:#A7192A;
  --brand-outline-hover-bg:#FFF5F6;
  --brand-focus:#D65F70;
  --brand-line-1:#C799A1;
  --brand-line-2:#D5B4BA;
  --brand-line-3:#E9B6BD;
  --brand-kicker-text:#A2212E;
  --brand-gradient-rgb:188,6,27;
  --brand-shadow-rgb:188,6,27;
  /* Semantik: alert tidak ikut warna merek di app non-Bara */
  --alert-text:var(--primary);
  --brand-icon:var(--primary); /* warna ikon/teks merek di latar terang; versi gelap di blok dark */
  --alert-bg:var(--brand-tint);
  --sidebar:#E9E9EC;
  --sidebar-hover:#DDDEE1;
  --active:#FFFFFF;
  --page:#F5F5F6;
  --fg:#202024;
  --muted:#6B6B76;
  --muted2:#898991;
  --border:#E6E6EA;
  --surface:#FFFFFF;
  --neutral:#F5F5F6;
  --neutral2:#FAFAFB;
  --radius:8px;
  --navwidth:248px;
  --navmini:64px;
  --font:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{background:var(--page);font:14px/20px var(--font);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
button:disabled{cursor:default;opacity:.55}
svg.lucide{flex-shrink:0;display:inline-block;vertical-align:middle}


/* ==========================================================================
   2. Layout App & Sidebar
   ========================================================================== */
.app{min-height:100vh;transition:grid-template-columns .2s ease}

.sidebar{height:100vh;border-right:1px solid #E2E2E5;}

.sidebar-brand{height:76px;min-height:76px;padding:10px 13px 9px 17px;display:flex;align-items:center;justify-content:space-between;gap:4px}
.brand-logo{width:135px;height:61px;object-fit:contain;object-position:left center;display:block}
.brand-icon{width:40px;height:40px;object-fit:contain;display:none}

.icon-button{appearance:none;border:0;background:transparent;color:#5E5E65;width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-button:hover{background:rgba(0,0,0,.065);color:var(--fg)}

.sidebar-menu{flex:1;overflow-y:auto;padding:8px 10px 16px;scrollbar-width:thin;scrollbar-color:#c5c5ca transparent}


/* ==========================================================================
   3. Navigasi Grup & Item
   ========================================================================== */
.nav-group{margin:0 0 14px}
.nav-group-head{width:100%;height:30px;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;padding:0 11px;margin:2px 0 1px;color:#74747D;font-size:11px;font-weight:600;text-align:left}
.nav-group-head:hover{color:var(--fg)}
.nav-group-head .lucide{transition:transform .16s}
.nav-group[data-shut="true"] .nav-group-head .lucide{transform:rotate(-90deg)}
.nav-group[data-shut="true"] .nav-items{display:none}

.nav-items{display:grid;gap:2px}
.nav-item{height:38px;width:100%;padding:0 11px;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-radius:8px;background:transparent;color:#55565E;font-size:13px;font-weight:500;white-space:nowrap}
.nav-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-item:hover{background:var(--sidebar-hover);color:var(--fg)}
.nav-item[aria-current="page"]{background:var(--active);color:#242429;font-weight:650}
.nav-item[aria-current="page"] .lucide{color:var(--primary)}


/* ==========================================================================
   4. Sidebar Bottom (Business Badge)
   ========================================================================== */
.sidebar-bottom{padding:13px 10px 14px;border-top:1px solid #DCDCE1}
.business-badge{display:flex;gap:10px;align-items:center;padding:9px 10px;min-height:50px;min-width:0;border-radius:8px;background:rgba(255,255,255,.60);color:var(--fg)}
.business-badge .symbol{width:30px;height:30px;background:var(--brand-tint);color:var(--brand-icon);display:grid;place-items:center;border-radius:8px}
.business-badge b{font-size:12px;display:block;font-weight:700;line-height:17px}
.business-badge small{display:block;font-size:11px;line-height:16px;color:var(--muted);white-space:nowrap}


/* ==========================================================================
   5. Collapsed Sidebar State
   ========================================================================== */
.is-collapsed .sidebar-brand{height:76px;min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0 4px;gap:0}
.is-collapsed .brand-logo{display:none}
.is-collapsed .brand-icon{display:block;width:36px;height:36px}
.is-collapsed .sidebar-brand .icon-button{height:28px;width:38px}
.is-collapsed .sidebar-menu{padding:10px 8px}
.is-collapsed .nav-group{margin-bottom:10px;padding-top:0}
.is-collapsed .nav-group:not(:first-child){padding-top:9px;border-top:1px solid rgba(0,0,0,.055)}
.is-collapsed .nav-group-head{display:none}
.is-collapsed .nav-group[data-shut="true"] .nav-items{display:grid}
.is-collapsed .nav-item{justify-content:center;width:46px;height:38px;gap:0;padding:0 8px}
.is-collapsed .nav-label{display:none}
.is-collapsed .nav-item .lucide{width:19px;height:19px}
.is-collapsed .sidebar-bottom{padding:10px 9px 15px}
.is-collapsed .business-badge{background:transparent;padding:4px;justify-content:center;min-height:38px}
.is-collapsed .business-badge .symbol{width:36px;height:36px;background:#fff}
.is-collapsed .business-badge .business-text{display:none}


/* ==========================================================================
   6. Main Shell, Topbar & Search
   ========================================================================== */

.topbar{height:66px;background:var(--page);border-bottom:1px solid var(--border);padding:0 38px;gap:18px}

.breadcrumb{display:flex;align-items:center;gap:9px;font-size:13px;white-space:nowrap;min-width:0}
.breadcrumb strong{font-weight:700}
.breadcrumb span{color:var(--muted);overflow:hidden;text-overflow:ellipsis}

.topbar-controls{gap:10px}

.searchbar{width:230px;height:36px;display:flex;align-items:center;gap:9px;padding:0 10px;color:var(--muted);border:1px solid transparent;border-radius:8px;background:var(--neutral)}
.searchbar:focus-within{border-color:#C8B8BB;background:#fff}
.searchbar input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);font-size:12px}
.searchbar input:focus{outline:0}

kbd{font-family:var(--font);font-size:10px;color:#898991;border:1px solid #dddde1;border-radius:4px;line-height:16px;min-width:29px;text-align:center;background:#fff}

.topbar .avatar{width:31px;height:31px;border-radius:50%;background:var(--brand-tint);color:var(--primary);font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.topbar .preview-tag{color:#656570;border:1px solid var(--border);background:var(--neutral2);padding:4px 10px;border-radius:999px}


/* ==========================================================================
   7. Content & Home Hero
   ========================================================================== */
.content{max-width:1160px;margin:0 auto;padding:0 34px 75px;width:100%}

.home-hero{margin:56px auto 48px;max-width:740px;text-align:center}
.home-hero h1{font-size:28px;line-height:39px;letter-spacing:-.048em;font-weight:760;margin:0 0 8px}
.home-hero p{line-height:20px;color:var(--muted);margin:0}

.hero-search{max-width:560px;height:50px;margin:22px auto 0;border:1px solid var(--border);box-shadow:0 2px 7px rgba(20,20,25,.035);border-radius:30px;display:flex;align-items:center;padding:0 12px 0 17px;gap:11px;text-align:left;background:var(--surface)}
.hero-search:focus-within{border-color:var(--brand-line-1);box-shadow:0 0 0 3px rgba(var(--brand-gradient-rgb),.055)}
.hero-search input{border:0;outline:0;flex:1;min-width:0;color:var(--fg);background:transparent;font-size:13px}
.hero-search input:focus{outline:0}
.hero-search button{background:var(--primary);color:var(--brand-on-primary);border:0;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}
.hero-search button:hover{background:var(--primary-hover)}

.hero-chips{display:flex;align-items:center;justify-content:center;gap:8px;margin:13px auto 0;flex-wrap:wrap}
.hero-chips button{border:1px solid var(--border);background:var(--surface);color:#585861;border-radius:999px;font-size:11px;font-weight:500;padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
.hero-chips button:hover{border-color:var(--brand-line-2);color:var(--primary)}


/* ==========================================================================
   8. Section & Panel
   ========================================================================== */
.section{margin-bottom:33px}
.section-header{display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin-bottom:15px}
.section-header h2{font-size:19px;line-height:28px;letter-spacing:-.028em;margin:0}
.section-header small{color:var(--muted2)}

.plain-link{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--primary);font-size:12px;font-weight:650;padding:5px 0}
.plain-link:hover{text-decoration:underline}

.panel{border:1px solid var(--border);background:var(--surface);border-radius:9px}


/* ==========================================================================
   9. Business Panel
   ========================================================================== */
.business-panel{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 23px;min-height:95px}
.business-identity{display:flex;align-items:center;gap:15px;min-width:0}
.block-icon{width:45px;height:45px;background:var(--neutral);border-radius:9px;display:grid;place-items:center;color:#676773;flex-shrink:0}
.business-identity h3{font-size:14px;font-weight:700;line-height:21px;margin:0 0 3px}
.business-identity p{color:var(--muted);line-height:19px;margin:0}
.business-meta{display:flex;gap:24px;padding:14px 23px;border-top:1px solid var(--border);color:var(--muted);font-size:11px}
.business-meta span{display:flex;align-items:center;gap:7px}


/* ==========================================================================
   10. Button System
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border-radius:8px;padding:8px 14px;white-space:nowrap;font-size:12px;line-height:18px;font-weight:650;border:1px solid var(--border);background:var(--surface);color:var(--fg)}
.btn:hover{background:var(--neutral)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--brand-on-primary)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}

.status-pill{display:inline-flex;align-items:center;white-space:nowrap;font-size:10px;font-weight:650;border:1px solid #F4DEB2;background:#FFF7E6;color:#987217;border-radius:999px;padding:4px 9px}


/* ==========================================================================
   11. Task Row & Work Links
   ========================================================================== */
.task-row{padding:20px 24px;display:flex;align-items:center;gap:17px;min-height:101px}
.task-row+.task-row{border-top:1px solid var(--border)}
.task-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--brand-tint-subtle);color:var(--brand-icon)}
.task-copy{flex:1;min-width:0}
.task-copy strong{font-size:13px;line-height:19px;font-weight:700;display:block;margin-bottom:4px}
.task-copy p{font-size:12px;line-height:19px;color:var(--muted);margin:0}
.info-small{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);margin:11px 0 0}

.work-links{border:1px solid var(--border);border-radius:9px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.work-link{min-height:83px;display:flex;align-items:center;gap:13px;text-align:left;padding:17px 21px;background:var(--surface);border:0;min-width:0;color:var(--fg)}
.work-link:nth-child(odd){border-right:1px solid var(--border)}
.work-link:nth-child(n+3){border-top:1px solid var(--border)}
.work-link:hover{background:var(--neutral2)}
.work-link .work-icon{width:34px;height:34px;border-radius:8px;background:var(--neutral);display:grid;place-items:center;color:#66666F;flex-shrink:0}
.work-copy{flex:1;min-width:0}
.work-copy strong{font-size:13px;font-weight:650;line-height:18px;display:block;margin-bottom:2px}
.work-copy small{color:var(--muted);line-height:17px;display:block}
.work-link>.lucide{color:#909099}
.footnote{font-size:11px;color:var(--muted2);line-height:18px;margin:12px 0 0}


/* ==========================================================================
   12. Module Head & Subtabs
   ========================================================================== */
.module-head{padding-top:37px;margin-bottom:22px;display:flex;justify-content:space-between;align-items:start;gap:20px}
.module-head .eyebrow{font-size:11px;color:var(--muted2);font-weight:650;margin-bottom:5px}
.module-head h1{font-size:25px;line-height:34px;letter-spacing:-.035em;margin:0 0 6px}
.module-head p{font-size:13px;color:var(--muted);margin:0}

.subtabs{display:flex;gap:26px;border-bottom:1px solid var(--border);margin:0 0 24px;overflow:auto;scrollbar-width:none}
.subtab{padding:11px 0 12px;border:0;border-bottom:2px solid transparent;font-size:13px;color:var(--muted);}

.subtab[aria-selected="true"]{color:var(--primary);font-weight:700;border-bottom-color:var(--primary)}

.module-content{padding:25px 24px 24px}
.module-content h2{font-size:17px;line-height:25px;margin:0 0 7px}
.module-content p{font-size:13px;line-height:21px;color:var(--muted);margin:0 0 15px}
.placeholder-line{display:flex;align-items:center;gap:10px;padding:13px 0;border-top:1px solid var(--border);font-size:12px}
.placeholder-line strong{margin-left:auto;font-size:12px}
.placeholder-line .lucide{color:#909099}
.placeholder-label{font-size:12px;color:var(--muted)}
.module-brief-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.module-brief-grid>.panel{min-width:0}
.mini-info{padding:22px}
.mini-info h3{font-size:13px;font-weight:650;margin:0 0 8px}
.mini-info p{font-size:12px;color:var(--muted);line-height:19px;margin:0}
.viewport-note{font-size:10px;color:var(--muted2);padding:18px 0 6px;margin-top:28px;border-top:1px solid var(--border)}


/* ==========================================================================
   13. Modal, Toast & Utility
   ========================================================================== */
.popover-overlay{display:none;position:fixed;inset:0;background:rgba(20,20,24,.30);z-index:50;align-items:center;justify-content:center;padding:20px}
.popover-overlay.is-open{display:flex}
.popover{width:min(420px,100%);border-radius:12px;background:var(--surface);box-shadow:0 18px 60px #00000026;padding:24px}
.popover h2{font-size:18px;line-height:25px;margin:0 0 12px}
.popover p{font-size:13px;line-height:21px;color:var(--muted);margin:0 0 18px}
.popover-actions{display:flex;justify-content:end;gap:8px}

.toast{position:fixed;bottom:24px;right:24px;max-width:min(380px,calc(100vw - 30px));border:1px solid var(--border);border-radius:9px;padding:11px 15px;font-size:12px;box-shadow:0 8px 26px #00000015;background:var(--surface);z-index:110;display:none}
.toast.visible{display:block}

.mobile-button{display:none}
.mobile-scrim{display:none}
.is-hidden{display:none!important}


/* ==========================================================================
   14. Dark Theme Tokens & Overrides
   ========================================================================== */
html[data-theme="dark"]{
  color-scheme:dark;
  --page:#18181B;
  --surface:#222225;
  --sidebar:#262629;
  --sidebar-hover:#343438;
  --active:#3A282C;
  --fg:#F3F3F5;
  --muted:#ABABB2;
  --muted2:#91919B;
  --border:#3A3A40;
  --neutral:#303035;
  --neutral2:#28282D;
  --soft:#47262C;
  /* --- Brand tokens tema gelap (default = Bara) --- */
  --brand-card-soft-dark:#42272D;
  --brand-surface-dark-1:#4F2C33;
  --brand-surface-dark-2:#46272D;
  --brand-surface-dark-3:#482930;
  --brand-nav-icon-dark:#FF7584;
  --brand-accent-dark:#FF9AA7;
  --brand-accent-dark-2:#FFB5BE;
  --brand-accent-dark-3:#FFD2D7;
  --brand-outline-dark:#68505A;
  --brand-outline-hover-bg-dark:#362A30;
  --brand-outline-cta-dark:#705059;
  --brand-line-dark:#7D3F48;
  --alert-bg:var(--brand-card-soft-dark);
  --brand-icon:var(--brand-nav-icon-dark); /* ikon merek di tema gelap memakai aksen terang yang sama dengan ikon menu aktif */
  --alert-text:var(--brand-nav-icon-dark);
}
html[data-theme="dark"] .sidebar{border-right-color:#35353A}
html[data-theme="dark"] .nav-item{color:#C0C0C5}
html[data-theme="dark"] .nav-item[aria-current="page"]{color:#fff}
html[data-theme="dark"] .nav-group-head{color:#A0A0A9}
html[data-theme="dark"] .business-badge{background:#38383B}
html[data-theme="dark"] .business-badge .symbol{background:var(--brand-surface-dark-1)}
html[data-theme="dark"] .searchbar kbd{background:#27272C;border-color:#404046;color:#AFABB2}
html[data-theme="dark"] .topbar .preview-tag{background:#303035}
html[data-theme="dark"] .status-pill{background:#473C24;border-color:#5E502C;color:#E8CB83}
html[data-theme="dark"] .task-icon{background:var(--brand-surface-dark-2)}
html[data-theme="dark"] .topbar .avatar{background:var(--brand-surface-dark-3)}
html[data-theme="dark"] .nav-item[aria-current="page"] .lucide{color:var(--brand-nav-icon-dark)}


/* ==========================================================================
   15. Responsive Breakpoints (Base)
   ========================================================================== */
@media(max-width:1120px){
  .content{padding-left:30px;padding-right:30px}
  .topbar{padding:0 25px}
  .searchbar{width:190px}
}
@media(max-width:800px){

  .sidebar{top:0;left:0;box-shadow:0 18px 45px rgba(0,0,0,.1);transform:translateX(-110%);transition:transform .2s ease;}

  .app.mobile-open .mobile-scrim{inset:0;background:#0006;border:0;width:100%;height:100%}
  .is-collapsed .sidebar-brand{height:76px;min-height:76px;display:flex;flex-direction:row;justify-content:space-between;padding:10px 13px 9px 17px}
  .is-collapsed .brand-logo{display:block}
  .is-collapsed .brand-icon{display:none}
  .is-collapsed .sidebar-menu{padding:8px 10px 16px}
  .is-collapsed .nav-group{margin-bottom:14px;padding:0;border:0}
  .is-collapsed .nav-group-head{display:flex}
  .is-collapsed .nav-group[data-shut="true"] .nav-items{display:none}
  .is-collapsed .nav-item{width:100%;height:38px;padding:0 11px;justify-content:flex-start;gap:12px}
  .is-collapsed .nav-label{display:block}
  .is-collapsed .sidebar-bottom{padding:13px 10px 14px}
  .is-collapsed .business-badge{background:rgba(255,255,255,.6);padding:9px 10px;justify-content:start}
  .is-collapsed .business-badge .business-text{display:block}
  .topbar{height:62px;padding:0 18px}
  .mobile-button{display:flex}
  .topbar .preview-tag,.topbar .searchbar,.topbar .bell-button{display:none}
  .content{padding:0 19px 46px}
  .home-hero{margin:39px auto 36px}
  .home-hero h1{font-size:23px;}
  .section{margin-bottom:26px}
  .section-header h2{font-size:18px}
  .business-panel{padding:17px;align-items:start;flex-direction:column}
  .business-panel .btn{align-self:flex-start}
  .business-meta{flex-wrap:wrap;gap:12px;padding:12px 17px}
  .task-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px 13px;padding:17px;align-items:start}
  .task-row .task-icon{grid-column:1;grid-row:1}
  .task-row .task-copy{grid-column:2;grid-row:1}
  .task-row>.btn,.task-row>.status-pill{grid-column:2;grid-row:2;justify-self:start;margin-left:0}
  .work-links{grid-template-columns:1fr}
  .work-link:nth-child(odd){border-right:0}
  .work-link:nth-child(n+2){border-top:1px solid var(--border)}
  .module-head{padding-top:26px}
  .module-brief-grid{grid-template-columns:1fr}

}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important}
}


/* ==========================================================================
   16. Layer v11.4 — Layout Hostinger
   Bar global penuh, rounded canvas, sidebar dan konten dalam satu panel.
   ========================================================================== */
body{margin:0;background:#120C27;padding:0 6px 8px;color:var(--fg)}

.topbar{height:50px;padding:0 10px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#120C27;color:#F8F8FC;border:0}
.topbar-brand{display:flex;align-items:center;gap:10px;min-width:0}
.topbar-logo-tile{background:#FFF;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;flex:none}
.topbar-logo-tile img{width:26px;height:26px;object-fit:contain;display:block}
.topbar-title{color:#FFF;font-size:13px;line-height:18px;font-weight:750;white-space:nowrap}
.topbar-current{color:#C9C5D7;font-size:11px;line-height:16px;padding:5px 10px;border:1px solid rgba(255,255,255,.15);border-radius:999px;white-space:nowrap}
.topbar .icon-button{border:1px solid rgba(255,255,255,.13);background:transparent;color:#F8F8FC;width:30px;height:30px;border-radius:999px}
.topbar .icon-button:hover{background:rgba(255,255,255,.09);color:#FFF}
.topbar #collapse{margin-left:6px}
.topbar-controls{display:flex;align-items:center;gap:8px}
.topbar .searchbar{width:226px;height:32px;background:transparent;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#F8F8FC;padding:0 10px}
.topbar .searchbar:focus-within{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.055)}
.topbar .searchbar input{color:#FFF;background:transparent}
.topbar .searchbar input::placeholder{color:#ADA8BE}
.topbar kbd{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16);color:#DDD8EA}
.topbar .avatar{width:30px;height:30px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.08);color:#FFF}
.topbar .preview-tag{border:1px solid rgba(var(--brand-gradient-rgb),.65);color:#FFF;background:rgba(var(--brand-gradient-rgb),.20);font-size:11px;padding:5px 11px}

.app{display:grid;grid-template-columns:var(--navwidth) minmax(0,1fr);min-height:calc(100vh - 58px);border-radius:20px;overflow:hidden;background:linear-gradient(to right,var(--sidebar) 0 var(--navwidth),var(--page) var(--navwidth) 100%);box-shadow:0 12px 30px rgba(5,3,11,.1)}
.app.is-collapsed{grid-template-columns:var(--navmini) minmax(0,1fr);background:linear-gradient(to right,var(--sidebar) 0 var(--navmini),var(--page) var(--navmini) 100%)}

.sidebar{position:sticky;top:0;height:calc(100vh - 58px);min-height:calc(100vh - 58px);z-index:40;background:var(--sidebar);border-right:none;display:flex;flex-direction:column;overflow:hidden}
.sidebar-menu{padding:10px 10px 16px;min-height:0}
.main-shell{min-width:0;background:var(--page)}
.topbar .mobile-button{display:none}

html[data-theme="dark"] .app{background:linear-gradient(to right,var(--sidebar) 0 var(--navwidth),var(--page) var(--navwidth) 100%)}
html[data-theme="dark"] .app.is-collapsed{background:linear-gradient(to right,var(--sidebar) 0 var(--navmini),var(--page) var(--navmini) 100%)}

@media(max-width:1120px){
  .topbar{padding:0 8px}
  .topbar .searchbar{width:185px}
  .topbar-brand{gap:8px}
}
@media(max-width:800px){
  .app,.app.is-collapsed{grid-template-columns:minmax(0,1fr);background:var(--page)}
  .topbar{height:50px;padding:0 8px}
  .topbar .mobile-button{display:inline-flex}
  .topbar-brand{gap:0 7px;display:grid;grid-template-columns:auto auto minmax(0,auto);grid-template-rows:auto auto;align-items:center;justify-content:start}
  .topbar-brand .mobile-button,.topbar-brand .topbar-logo-tile{grid-row:1/3}
  .topbar-brand .topbar-title{grid-column:3;grid-row:1;line-height:15px}
  .topbar-brand .mb-endorsement{grid-column:3;grid-row:2;margin:0;line-height:12px}  /* "by Membara" tetap tampil: ditumpuk di bawah nama */
  .topbar-current{display:none}
  .topbar #collapse{display:none}
  .topbar .searchbar,.topbar .preview-tag{display:none}
  .topbar .bell-button{display:inline-flex}
  .sidebar{position:fixed;top:50px;left:6px;height:calc(100vh - 58px);min-height:0;width:248px;border-radius:0 0 12px 0;z-index:80;box-shadow:0 12px 28px rgba(0,0,0,.12);transform:translateX(-115%);transition:transform .2s}
  .app.mobile-open .sidebar{transform:translateX(0)}
  .app.mobile-open .mobile-scrim{display:block;position:fixed;inset:50px 0 0;background:rgba(0,0,0,.38);z-index:70}
}


/* ==========================================================================
   17. Layer v11.5 — Final Candidate Refinement
   Hostinger shell dipertahankan, konten Bara dirapikan.
   ========================================================================== */
.content{padding-bottom:28px}

.home-hero{margin:42px auto 38px;max-width:720px}
.home-hero h1{font-size:27px;line-height:37px;font-weight:680;letter-spacing:-.04em}
.home-hero p{font-size:13px}
.home-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:21px auto 0}
.home-actions button{background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:999px;min-height:34px;padding:7px 12px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:550}
.home-actions button:hover{color:var(--primary);border-color:var(--brand-line-3)}

.section{margin-bottom:26px}
.section-header{margin-bottom:12px}
.section-header h2{font-size:17px;line-height:24px;font-weight:650;letter-spacing:-.025em}
.section-header small{font-size:11px}

.status-inline{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;line-height:16px}
.status-dot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#C7A352}

.business-panel{min-height:84px;padding:17px 21px}
.business-panel .block-icon{width:40px;height:40px}
.business-identity h3{font-size:13px}
.business-identity p{font-size:12px}
.business-meta{padding:11px 21px;gap:22px}

.single-task{padding:17px 20px;display:flex;align-items:center;gap:14px;min-height:92px}
.single-task .task-icon{width:38px;height:38px}
.single-task .task-copy strong{font-size:13px;margin-bottom:3px}
.single-task .task-copy p{font-size:12px;max-width:610px}

.work-links{border-radius:11px}
.work-link{min-height:74px;padding:15px 20px}
.work-link .work-icon{width:32px;height:32px}
.work-copy strong{font-size:12px}
.work-copy small{font-size:11px}

.module-head{padding-top:31px;margin-bottom:20px}

.module-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.module-context{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.context-chip{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 10px;display:inline-flex;gap:7px;align-items:center;color:var(--muted);font-size:11px;line-height:18px}
.context-chip .lucide{color:var(--muted2)}
.context-chip.is-warn{color:#866424;background:#FFF9EE;border-color:#F0E3C9}

.subtabs{margin-bottom:20px;gap:24px}
.module-dash{display:grid;gap:14px}
.module-summary{display:flex;gap:12px;align-items:flex-start;padding:17px 20px;background:var(--surface);border:1px solid var(--border);border-radius:10px}
.module-summary-icon{width:34px;height:34px;background:var(--soft);color:var(--brand-icon);border-radius:9px;flex:none;display:grid;place-items:center}
.module-summary h2{font-size:13px;font-weight:690;line-height:20px;margin:0 0 3px}
.module-summary p{font-size:12px;line-height:20px;color:var(--muted);margin:0}

.data-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.data-panel-head{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.data-panel-head h2{font-size:14px;line-height:21px;font-weight:680;margin:0 0 3px}
.data-panel-head p{font-size:11px;line-height:18px;color:var(--muted);margin:0}
.data-status{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:5px 10px;background:var(--neutral2);color:var(--muted);font-size:10px;white-space:nowrap}

.table-scroll{width:100%;overflow-x:auto;scrollbar-width:thin}
.preview-table{border-collapse:collapse;width:100%;min-width:550px;font-size:12px;text-align:left}
.preview-table thead{background:var(--neutral2)}
.preview-table th{padding:12px 19px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:11px;font-weight:650;color:var(--muted);white-space:nowrap}
.preview-table td{padding:15px 19px}
.preview-table th+th,.preview-table td+td{border-left:0}

.table-empty{padding:36px 20px!important;text-align:center}
.table-empty-icon{width:36px;height:36px;display:grid;place-items:center;margin:0 auto 11px;background:var(--neutral);color:var(--muted2);border-radius:10px}
.table-empty strong{display:block;font-size:12px;line-height:20px;font-weight:670;color:var(--fg)}
.table-empty span{display:block;font-size:11px;line-height:19px;color:var(--muted);margin:2px auto 0;max-width:380px}

.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kpi-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:18px 18px 16px}
.kpi-box small{font-size:11px;color:var(--muted);display:block;margin-bottom:10px}
.kpi-box strong{font-size:22px;line-height:26px;font-weight:660;letter-spacing:-.03em}
.kpi-box p{font-size:10px;color:var(--muted2);margin:5px 0 0}

.source-line{display:flex;gap:7px;align-items:start;margin:0;color:var(--muted);font-size:11px;line-height:19px}
.source-line .lucide{flex-shrink:0;margin-top:2px}

.home-cta{margin-top:34px;position:relative;overflow:hidden;border-top:1px solid rgba(var(--brand-gradient-rgb),.13);border-radius:0 0 12px 12px;min-height:260px;background:linear-gradient(180deg,rgba(var(--brand-gradient-rgb),0) 0%,rgba(var(--brand-gradient-rgb),.045) 42%,rgba(var(--brand-gradient-rgb),.14) 100%)}
.home-cta::before{content:"";position:absolute;inset:auto -12% -130px -12%;height:230px;background:radial-gradient(ellipse at center,rgba(var(--brand-gradient-rgb),.17) 0%,rgba(var(--brand-gradient-rgb),.07) 38%,transparent 77%);pointer-events:none}
.home-cta-inner{position:relative;max-width:840px;margin:0 auto;padding:42px 24px 38px;text-align:center}
.home-cta-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:1px solid rgba(var(--brand-gradient-rgb),.14);border-radius:999px;background:rgba(255,255,255,.58);color:var(--brand-kicker-text);font-size:12px;font-weight:700}
.home-cta h2{margin:18px auto 12px;max-width:920px;font-size:34px;line-height:1.12;letter-spacing:-.045em;font-weight:760;color:#1E2024}
.home-cta p{margin:0 auto;max-width:820px;font-size:15px;line-height:28px;color:#5F6672}
.home-cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.home-cta-actions .btn{min-height:38px;padding:8px 15px;border-radius:999px;font-size:12px}
.home-cta-actions .btn.secondary{background:#fff}

.footer-note{margin-top:26px;padding:14px 2px 8px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted2);font-size:10px}
.footer-note strong{color:var(--muted);font-weight:700}

html[data-theme="dark"] .context-chip.is-warn{color:#D9BD83;background:#3E3321;border-color:#574B33}
html[data-theme="dark"] .home-cta{background:linear-gradient(180deg,rgba(var(--brand-gradient-rgb),0),rgba(var(--brand-gradient-rgb),.19))}
html[data-theme="dark"] .home-cta-kicker{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:var(--brand-accent-dark-3)}
html[data-theme="dark"] .home-cta h2{color:#fff}
html[data-theme="dark"] .home-cta p{color:#D4D7E0}
html[data-theme="dark"] .footer-note{border-color:rgba(255,255,255,.08);color:#AEB4C0}
html[data-theme="dark"] .home-actions button:hover{border-color:var(--brand-line-dark)}

@media(max-width:800px){
  .content{padding-bottom:16px}
  .home-hero{margin:35px auto 29px}
  .home-hero h1{font-size:22px;line-height:31px}
  .home-actions{margin-top:17px}
  .section{margin-bottom:23px}
  .business-meta{gap:10px;padding:11px 17px}
  .single-task{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:start;padding:17px;gap:10px 12px}
  .single-task .task-icon{grid-row:1;grid-column:1}
  .single-task .task-copy{grid-row:1;grid-column:2}
  .single-task>.btn{grid-row:2;grid-column:2;justify-self:start}
  .module-head{padding-top:24px}

  .module-summary{padding:15px}
  .data-panel-head{padding:16px}
  .kpi-grid{grid-template-columns:1fr;gap:8px}
  .kpi-box{padding:14px 16px}
  .home-cta{min-height:228px}
  .home-cta-inner{padding:34px 18px 32px}
  .home-cta h2{font-size:28px;line-height:1.16}
  .home-cta p{font-size:14px;line-height:24px}
  .home-cta-actions{flex-direction:column;align-items:stretch}
  .home-cta-actions .btn{justify-content:center}
  .footer-note{padding:14px 2px 10px;align-items:flex-start;flex-direction:column;gap:6px}
  .topbar .searchbar{display:flex;width:33px;height:32px;padding:0 8px;position:relative;overflow:visible;transition:width .18s ease}
  .topbar .searchbar input{width:0;min-width:0;opacity:0;padding:0}
  .topbar .searchbar kbd{display:none}
  .topbar .searchbar:focus-within{position:absolute;top:8px;right:7px;width:min(270px,calc(100vw - 95px));z-index:98;background:#231934}
  .topbar .searchbar:focus-within input{width:100%;opacity:1}
}
@media(max-width:410px){
  .topbar .topbar-current{display:none}
  .topbar-controls{gap:5px}
  .topbar .avatar{display:none}
}


/* ==========================================================================
   18. Dark Theme — Kontras Teks Saja
   Tidak mengubah background, border, spacing, atau token tema terang.
   ========================================================================== */
html[data-theme="dark"] .plain-link,
html[data-theme="dark"] .subtab[aria-selected="true"],
html[data-theme="dark"] .home-actions button:hover,
html[data-theme="dark"] .hero-chips button:hover{
  color:var(--brand-accent-dark);
}
html[data-theme="dark"] .home-cta-actions .btn.secondary{
  color:#202024;
}


/* ==========================================================================
   19. Layer v11.9 — Segmented Tabs & Action Split
   Navigasi ringkas, tab segmented dan tombol aksi ala Hostinger.
   ========================================================================== */
.data-panel>.table-empty{border-top:0;min-height:150px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:28px 18px!important}
@media(max-width:800px){
  .data-panel>.table-empty{min-height:156px;padding:24px 16px!important}
}

.module-head{align-items:center;margin-bottom:16px;gap:18px}
.module-head h1{margin:0;font-size:24px;line-height:32px}
.module-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}

.btn.btn-outline{border:1px solid var(--brand-outline);background:var(--surface);color:var(--brand-outline-text);min-height:36px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:650}
.btn.btn-outline:hover{background:var(--brand-outline-hover-bg);border-color:var(--primary)}
.btn.btn-outline:focus-visible,.split-main:focus-visible,.split-toggle:focus-visible,.split-menu button:focus-visible,.subtab:focus-visible{outline:3px solid var(--brand-focus);outline-offset:2px}

.module-toolbar{margin:0 0 18px}

.status-chip{background:var(--surface);border:1px solid var(--border);color:var(--muted);display:inline-flex;gap:6px;align-items:center;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:650;line-height:16px;white-space:nowrap}
.status-chip .lucide{color:var(--primary)}

.subtabs{display:inline-flex;align-items:stretch;gap:2px;padding:3px;margin:0 0 18px;border:0;border-radius:999px;background:#EBEBEE;overflow-x:auto;scrollbar-width:thin;max-width:100%;vertical-align:top}
.subtab{flex:0 0 auto;min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:6px 13px;border:2px solid transparent;border-radius:999px;background:transparent;color:#5B5B63;font-size:12px;line-height:18px;font-weight:620;transition:background-color .14s,border-color .14s,color .14s;white-space:nowrap}
.subtab:hover{background:rgba(255,255,255,.65);color:var(--fg)}
.subtab[aria-selected="true"]{background:var(--surface);border-color:var(--primary);color:var(--fg);font-weight:740;box-shadow:0 1px 2px rgba(0,0,0,.035)}

.module-dash{gap:16px}

.action-split{position:relative;display:inline-flex;align-items:stretch;flex:none;min-height:36px;border-radius:999px;background:var(--primary);color:var(--brand-on-primary);box-shadow:0 2px 5px rgba(var(--brand-shadow-rgb),.08)}
.action-split button{appearance:none;background:transparent;color:inherit;border:0;display:inline-flex;align-items:center;justify-content:center;min-height:36px;font-size:12px;font-weight:690;line-height:18px;cursor:pointer}
.action-split .split-main{padding:6px 12px 6px 13px;gap:7px;border-radius:999px 0 0 999px}
.action-split .split-toggle{width:34px;border-left:1px solid rgba(255,255,255,.32);border-radius:0 999px 999px 0}
.action-split button:hover{background:rgba(0,0,0,.10)}
.action-split .split-main:hover{border-radius:999px 0 0 999px}
.action-split .split-toggle:hover{border-radius:0 999px 999px 0}

.split-menu{position:absolute;z-index:110;top:calc(100% + 7px);right:0;width:228px;min-width:202px;max-width:min(228px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px;box-shadow:0 16px 40px rgba(12,10,20,.16);color:var(--fg)}
.split-menu[hidden]{display:none!important}
.split-menu button{width:100%;min-height:36px;justify-content:flex-start;gap:8px;border:0;border-radius:8px;padding:8px 10px;text-align:left;font-size:12px;font-weight:580;color:var(--fg);background:transparent}
.split-menu button:hover{background:var(--neutral)}
.split-menu button .lucide{color:var(--muted)}
.split-menu .split-divider{height:1px;margin:4px 5px;background:var(--border)}

.module-simple-info{margin:0 0 16px;font-size:12px;color:var(--muted);line-height:19px}
.data-panel-head p{display:none}

.home-cta-kicker{background:var(--primary);border-color:var(--primary);color:var(--brand-on-primary)}
.home-cta-actions .btn.btn-outline{background:#FFF;color:var(--brand-outline-text)}

/* Palet dark tetap. Hanya kontrol baru dan kontras teks yang disesuaikan. */
html[data-theme="dark"] .btn.btn-outline{border-color:var(--brand-outline-dark);background:var(--surface);color:var(--brand-accent-dark-2)}
html[data-theme="dark"] .btn.btn-outline:hover{background:var(--brand-outline-hover-bg-dark);border-color:var(--brand-accent-dark);color:var(--brand-accent-dark-3)}
html[data-theme="dark"] .subtabs{background:#303035}
html[data-theme="dark"] .subtab{color:#C1C1C7}
html[data-theme="dark"] .subtab:hover{background:#3B3B41;color:#F3F3F5}
html[data-theme="dark"] .subtab[aria-selected="true"]{background:#222225;color:#F3F3F5;border-color:var(--brand-accent-dark)}
html[data-theme="dark"] .status-chip{color:#C9CAD1}
html[data-theme="dark"] .status-chip .lucide{color:var(--brand-accent-dark)}
html[data-theme="dark"] .action-split{color:var(--brand-on-primary)}
html[data-theme="dark"] .split-menu{color:var(--fg);box-shadow:0 16px 40px rgba(0,0,0,.4)}
html[data-theme="dark"] .split-menu button{color:#F3F3F5}
html[data-theme="dark"] .split-menu button .lucide{color:#BFC1CC}
html[data-theme="dark"] .home-cta-kicker{background:var(--primary);border-color:var(--primary);color:var(--brand-on-primary)}
html[data-theme="dark"] .home-cta-actions .btn.btn-outline{background:#29292D;color:var(--brand-accent-dark-2);border-color:var(--brand-outline-cta-dark)}

@media(max-width:800px){
  .module-head{align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:15px}
  .module-head h1{font-size:22px;line-height:30px}
  .module-head-actions{width:100%;justify-content:flex-start}
  .module-toolbar{margin-bottom:14px}
  .subtabs{margin-bottom:17px}
  .subtab{font-size:12px;min-height:38px;padding:7px 12px}
  .home-cta-actions .btn.btn-outline{width:100%}
  .action-split,.action-split button,.btn.btn-outline{min-height:40px}
  .action-split .split-toggle{width:40px}
  .home-cta-actions .btn{min-height:40px}
}
@media(max-width:420px){
  .module-head-actions .btn.btn-outline{padding:7px 11px}
  .split-menu{min-width:202px}
}

body.in-module .topbar-current{display:none}


/* ==========================================================================
   20. Layer FINAL — Adapter Review (App Hub, kelas mb-*)
   Token netral, dimensi, dan tipografi mengikuti Bara V1.
   ========================================================================== */
:root{--bara-card-soft:var(--brand-tint)}
html[data-theme="dark"]{--bara-card-soft:var(--brand-card-soft-dark)}

.mb-endorsement{font-size:10px;font-weight:500;color:#B9B6C6;white-space:nowrap;margin-left:2px}

/* App Switcher Trigger */
.mb-switch-trigger{display:inline-flex;align-items:center;gap:7px;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg);padding:0 10px;font-size:12px;font-weight:650;white-space:nowrap}
.mb-switch-trigger:hover{background:var(--neutral)}
.mb-switch-wrap{position:relative}
.mb-switch-menu{position:absolute;top:calc(100% + 10px);right:0;width:min(340px,calc(100vw - 20px));background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px;box-shadow:0 16px 40px rgba(0,0,0,.18);z-index:95}
.mb-switch-header{display:flex;align-items:center;justify-content:space-between;padding:5px 3px 10px}
.mb-switch-header strong{font-size:13px}
.mb-switch-item{width:100%;display:flex;align-items:center;gap:11px;border:0;text-align:left;border-radius:8px;padding:10px;background:transparent;color:var(--fg)}
.mb-switch-item:hover{background:var(--neutral)}
.mb-switch-item b{font-size:12px;display:block}
.mb-switch-item small{color:var(--muted);font-size:11px;display:block;line-height:17px}
.mb-switch-item>.lucide:last-child{margin-left:auto;color:var(--muted)}
.mb-switch-more{width:100%;border:1px solid var(--border);background:var(--neutral);color:var(--fg);font-weight:650;font-size:12px;height:36px;border-radius:8px;margin-top:8px}

.mb-mini-logo{height:33px;width:33px;flex:none;border-radius:9px;background:var(--brand-tint);color:var(--brand-icon);display:grid;place-items:center}

.mb-demo-ribbon{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);background:var(--neutral2);border-radius:999px;color:var(--muted);font-size:11px}

.mb-banner{display:flex;align-items:center;gap:8px;padding:10px 13px;margin-bottom:17px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:11px;line-height:17px;color:var(--muted)}
.mb-banner .lucide{color:var(--brand-icon)}

/* Dashboard Hero */
.mb-dashboard-hero{margin:34px 0 25px;padding:23px 25px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;gap:20px;justify-content:space-between;align-items:center}
.mb-dashboard-hero h1{font-size:24px;line-height:33px;letter-spacing:-.04em;margin:6px 0 6px;font-weight:750}
.mb-dashboard-hero p{margin:0;color:var(--muted);font-size:12px;line-height:19px}
.mb-overline{font-size:11px;font-weight:750;color:var(--brand-icon);letter-spacing:.03em;text-transform:uppercase}
.mb-hero-right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Stat Grid */
.mb-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:0 0 25px}
.mb-stat-grid.is-flush{margin-bottom:0}
.mb-stat-grid.is-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
.mb-stat{background:var(--surface);border:1px solid var(--border);padding:17px 18px;border-radius:9px;min-width:0}
.mb-stat small{display:block;color:var(--muted);font-size:11px}
.mb-stat strong{font-size:22px;line-height:32px;font-weight:750;display:block;margin:9px 0 0;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mb-stat p{font-size:10px;line-height:16px;color:var(--muted);margin:3px 0 0}

/* List */
.mb-list{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.mb-line{display:flex;gap:13px;align-items:center;padding:13px 17px;min-height:67px;border-bottom:1px solid var(--border)}
.mb-line:last-child{border-bottom:0}
.mb-line-symbol{height:34px;width:34px;display:grid;place-items:center;border-radius:8px;background:var(--neutral);color:var(--brand-icon);flex:none}
.mb-line-main{flex:1;min-width:0}
.mb-line-main b{display:block;font-size:12px;line-height:18px}
.mb-line-main small{color:var(--muted);font-size:11px;line-height:17px;display:block}
.mb-line-right{margin-left:auto;flex:none}
.mb-quiet{font-size:11px;line-height:18px;color:var(--muted)}

.mb-row-between{display:flex;align-items:center;justify-content:space-between;gap:15px}
.mb-row-between .section-header{margin:0}

/* Tags */
.mb-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;line-height:18px;border-radius:999px;padding:3px 8px;background:var(--neutral);color:var(--fg);border:1px solid var(--border);white-space:nowrap}
.mb-tag.alert{background:var(--alert-bg);color:var(--alert-text);border-color:transparent}
.mb-tag.ok{background:#E6F5EE;color:#176044;border-color:transparent}
html[data-theme="dark"] .mb-tag.ok{background:#244437;color:#C0F8D8}

.mb-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:15px}
.mb-mini-section{margin-bottom:27px}
.mb-mini-section h2{font-size:17px;line-height:26px;margin:0 0 12px;font-weight:690;letter-spacing:-.025em}

/* Module Head */
.mb-module-head{margin:35px 0 18px}
.mb-module-head h1{margin:0;font-size:25px;line-height:33px;font-weight:740;letter-spacing:-.04em}
.mb-module-head p{margin:5px 0 0;font-size:12px;color:var(--muted)}
.mb-module-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.mb-context{display:flex;gap:8px;flex:1;flex-wrap:wrap}

/* Panel */
.mb-panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:19px 20px;margin:0 0 15px;min-width:0}
.mb-panel h2{font-size:16px;line-height:25px;margin:0 0 5px;font-weight:700}
.mb-panel>p{font-size:12px;color:var(--muted);line-height:19px;margin:0 0 12px}
.mb-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mb-panel-header h2{margin:0}

/* Table */
.mb-table-scroll{width:100%;overflow:auto}
.mb-table{border-collapse:collapse;width:100%;min-width:490px;font-size:12px;text-align:left}
.mb-table th{font-size:11px;font-weight:650;color:var(--muted);background:var(--neutral2)}
.mb-table th,.mb-table td{padding:11px 13px;border-bottom:1px solid var(--border);white-space:nowrap}
.mb-table tr:last-child td{border-bottom:0}
.mb-table td b{font-weight:680}

.mb-empty{padding:35px 17px;text-align:center}
.mb-empty strong{display:block;margin:8px 0;font-size:13px}
.mb-empty p{color:var(--muted);margin:0;font-size:12px}

.mb-wide-button{max-width:100%}
.mb-value{font-weight:700;font-variant-numeric:tabular-nums}
.mb-foot-note{display:flex;gap:7px;align-items:flex-start;font-size:11px;color:var(--muted);line-height:17px;padding:12px 0 18px}

/* Form */
.mb-form{display:grid;gap:11px}
.mb-form label{font-size:12px;font-weight:650}
.mb-form input,.mb-form select{height:38px;border:1px solid var(--border);background:var(--surface);color:var(--fg);border-radius:8px;padding:8px 11px;outline-offset:2px;width:100%}
.mb-form .actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}

.mb-demo-choice{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.mb-kpi-info{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:var(--neutral2);font-size:11px;color:var(--muted);line-height:18px}


/* ==========================================================================
   21. App Hub Modal (Layanan Membara)
   Katalog lengkap di dalam Bara, tanpa mengasumsikan entitlement atau SSO.
   ========================================================================== */
.mb-hub-overlay{position:fixed;inset:0;z-index:110;background:rgba(17,13,29,.57);padding:3vh 18px;display:none;align-items:flex-start;justify-content:center}
.mb-hub-overlay.show{display:flex}

.mb-hub-dialog{width:min(1050px,100%);height:min(94vh,910px);background:var(--page);border:1px solid var(--border);border-radius:15px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.3)}

.mb-hub-top{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 21px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.mb-hub-top h2{font-size:17px;margin:0;letter-spacing:-.02em}
.mb-hub-top p{margin:3px 0 0;font-size:11px;color:var(--muted)}

.mb-hub-body{overflow:auto;padding:20px 21px 26px}

.mb-hub-filters{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}
.mb-hub-filter{height:34px;font-size:12px;border:1px solid var(--border);border-radius:8px;padding:0 13px;background:var(--surface);color:var(--fg)}
.mb-hub-filter[aria-selected="true"]{border-color:var(--primary);color:var(--brand-icon);font-weight:700}

.mb-hub-input{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--fg);width:100%;max-width:470px}

.mb-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mb-hub-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:15px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mb-hub-card h3{margin:0;font-size:13px;line-height:20px}
.mb-hub-card p{margin:0;flex:1;color:var(--muted);font-size:11px;line-height:18px}
.mb-hub-card small{color:var(--muted);font-size:10px}
.mb-hub-card .btn{align-self:flex-start}
.mb-hub-chip{display:inline-flex;align-items:center;color:var(--brand-icon);background:var(--bara-card-soft);padding:4px 8px;font-size:10px;border-radius:999px;align-self:flex-start}
.mb-hub-card-icon{color:var(--brand-icon);width:35px;height:35px;border-radius:9px;display:grid;place-items:center;background:var(--bara-card-soft)}
.mb-hub-card a{text-decoration:none}
.mb-hub-empty{padding:30px;text-align:center;font-size:13px;color:var(--muted)}

@media(max-width:1050px){
  .mb-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-two{grid-template-columns:1fr 1fr}
  .mb-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .mb-switch-trigger{width:34px;padding:0;justify-content:center}
  .mb-switch-label,.mb-switch-chevron{display:none}
  .mb-switch-menu{right:-42px}
  .mb-dashboard-hero{margin:18px 0;padding:18px;flex-direction:column;align-items:flex-start}
  .mb-hero-right{justify-content:flex-start}
  .mb-dashboard-hero h1{font-size:22px;line-height:29px}
  .mb-two{grid-template-columns:1fr}
  .mb-hub-dialog{height:96vh}
  .mb-hub-overlay{padding:2vh 8px}
  .mb-hub-body{padding:15px}
  .mb-hub-top{padding:13px 15px}
  .mb-hub-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  .mb-stat-grid{gap:8px}
  .mb-stat{padding:12px}
  .mb-stat strong{font-size:20px}
  .mb-line{padding:11px 12px}
  .mb-panel{padding:15px 13px}
  .mb-banner{font-size:10px}
}


/* ==========================================================================
   22. Work Link Column Fix & Hub Focus
   Menjaga jarak kolom kartu kerja saat nama dan teks pendukung satu span.
   ========================================================================== */
.work-link>span:nth-child(2){display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:2px}
.work-link>span:nth-child(2) b{display:block;line-height:18px}
.work-link>span:nth-child(2) small{display:block;line-height:17px}
.mb-hub-card:focus-within{border-color:var(--primary)}


/* ==========================================================================
   23. Brand Adapter per produk (KANDIDAT TEKNIS, MBR-UI-CSS-001 v0.6 §3.3)
   Default tanpa atribut = Bara. Letakkan paling akhir.
   Specificity: adapter dark (0,3,1) mengalahkan html[data-theme="dark"] (0,1,1).
   ========================================================================== */

/* 23.1 Warna utama per produk (berlaku di kedua tema) */
html[data-product="molten"]{--primary:#1B475D;--primary-hover:#143747;--brand-gradient-rgb:27,71,93;--brand-shadow-rgb:27,71,93}
html[data-product="crm"]{--primary:#0F766E;--primary-hover:#0C5C56;--brand-gradient-rgb:15,118,110;--brand-shadow-rgb:15,118,110}
html[data-product="erp"]{--primary:#1D4ED8;--primary-hover:#173DA8;--brand-gradient-rgb:29,78,216;--brand-shadow-rgb:29,78,216}

/* 23.2 Soft tema light */
html:not([data-theme="dark"])[data-product="molten"]{--soft:#E8F0F3}
html:not([data-theme="dark"])[data-product="crm"]{--soft:#E7F1F0}
html:not([data-theme="dark"])[data-product="erp"]{--soft:#E8EDFB}

/* 23.1b Produk lain di spec v0.6 (warna dari tabel §entitas; hover dan soft diturunkan dari --primary) */
html[data-product="mamba"]{--primary:#354A78;--brand-gradient-rgb:53,74,120;--brand-shadow-rgb:53,74,120}
html[data-product="profit"]{--primary:#166534;--brand-gradient-rgb:22,101,52;--brand-shadow-rgb:22,101,52}
html[data-product="mail"]{--primary:#0369A1;--brand-gradient-rgb:3,105,161;--brand-shadow-rgb:3,105,161}
html[data-product="commander"]{--primary:#FF5B20;--brand-gradient-rgb:255,91,32;--brand-shadow-rgb:255,91,32}
html[data-product="anvil"]{--primary:#673DE5;--brand-gradient-rgb:103,61,229;--brand-shadow-rgb:103,61,229}
html[data-product="mission"]{--primary:#334155;--brand-gradient-rgb:51,65,85;--brand-shadow-rgb:51,65,85}
html[data-product="aiw"]{--primary:#A21CAF;--brand-gradient-rgb:162,28,175;--brand-shadow-rgb:162,28,175}
html[data-product="hub"]{--primary:#FF5B20;--brand-gradient-rgb:255,91,32;--brand-shadow-rgb:255,91,32}
html[data-product="tools"]{--primary:#FF5B20;--brand-gradient-rgb:255,91,32;--brand-shadow-rgb:255,91,32}
html:is([data-product="mamba"],[data-product="profit"],[data-product="mail"],[data-product="commander"],[data-product="anvil"],[data-product="mission"],[data-product="aiw"],[data-product="hub"],[data-product="tools"]){--primary-hover:color-mix(in srgb,var(--primary) 78%,#000000)}
html:not([data-theme="dark"]):is([data-product="mamba"],[data-product="profit"],[data-product="mail"],[data-product="commander"],[data-product="anvil"],[data-product="mission"],[data-product="aiw"],[data-product="hub"],[data-product="tools"]){--soft:color-mix(in srgb,var(--primary) 10%,#FFFFFF)}
/* Font sesuai spec: Geist Sans untuk Commander, Anvil, Mission Control, AI Workforce, App Hub, Tools (file font dimuat oleh app) */
html:is([data-product="commander"],[data-product="anvil"],[data-product="mission"],[data-product="aiw"],[data-product="hub"],[data-product="tools"]){--font:"Geist Sans","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* #FF5B20: putih di atasnya hanya 3,10:1, jadi teks di atas warna ini memakai #211D19 (5,40:1); teks/tautan di latar terang digelapkan sampai >= 4,5:1 */
html:is([data-product="commander"],[data-product="hub"],[data-product="tools"]){--brand-on-primary:#211D19;--brand-on-primary-hover:#211D19;--brand-on-primary-pressed:#211D19}

/* 23.5 Warna bebas dari pemilih warna (data-product="custom"): hover dan soft diturunkan dari --primary */
html[data-product="custom"]{--primary-hover:color-mix(in srgb,var(--primary) 78%,#000000)}
html:not([data-theme="dark"])[data-product="custom"]{--soft:color-mix(in srgb,var(--primary) 10%,#FFFFFF)}

/* 23.3 Turunan light non-Bara (KANDIDAT, color-mix dari --primary) */
html:not([data-theme="dark"])[data-product]:not([data-product="bara"]){
  --active:#FFFFFF;
  --brand-tint:var(--soft);
  --brand-tint-subtle:color-mix(in srgb,var(--primary) 5%,#FFFFFF);
  --brand-outline:color-mix(in srgb,var(--primary) 28%,#FFFFFF);
  --brand-outline-text:color-mix(in srgb,var(--primary) 88%,#000000);
  --brand-outline-hover-bg:color-mix(in srgb,var(--primary) 4%,#FFFFFF);
  --brand-focus:var(--primary); /* anel fokus >= 3:1 di atas putih (primary mentah) */
  --brand-line-1:color-mix(in srgb,var(--primary) 38%,#FFFFFF);
  --brand-line-2:color-mix(in srgb,var(--primary) 32%,#FFFFFF);
  --brand-line-3:color-mix(in srgb,var(--primary) 28%,#FFFFFF);
  --brand-kicker-text:color-mix(in srgb,var(--primary) 85%,#000000);
  --alert-text:#B42318;
  --alert-bg:#FEE4E2;
}

html:not([data-theme="dark"]):is([data-product="commander"],[data-product="hub"],[data-product="tools"]):not([data-product="bara"]){
  --brand-outline-text:color-mix(in srgb,var(--primary) 78%,#000000);
  --brand-kicker-text:color-mix(in srgb,var(--primary) 78%,#000000);
  --brand-icon:color-mix(in srgb,var(--primary) 78%,#000000);
  --brand-focus:color-mix(in srgb,var(--primary) 78%,#000000);
}

/* 23.4 Turunan dark non-Bara (diturunkan dari --primary; kontras diperiksa terhadap #222225, bukan nilai resmi spec) */
html[data-theme="dark"][data-product]:not([data-product="bara"]){
  --active:color-mix(in srgb,var(--primary) 14%,#222225);
  --soft:color-mix(in srgb,var(--primary) 20%,#222225);
  --brand-card-soft-dark:color-mix(in srgb,var(--primary) 17%,#222225);
  --brand-surface-dark-1:color-mix(in srgb,var(--primary) 22%,#222225);
  --brand-surface-dark-2:color-mix(in srgb,var(--primary) 18%,#222225);
  --brand-surface-dark-3:color-mix(in srgb,var(--primary) 20%,#222225);
  --brand-nav-icon-dark:color-mix(in srgb,var(--primary) 40%,#FFFFFF);
  --brand-accent-dark:color-mix(in srgb,var(--primary) 50%,#FFFFFF);
  --brand-accent-dark-2:color-mix(in srgb,var(--primary) 35%,#FFFFFF);
  --brand-accent-dark-3:color-mix(in srgb,var(--primary) 20%,#FFFFFF);
  --brand-outline-dark:color-mix(in srgb,var(--primary) 28%,#4A4A50);
  --brand-outline-hover-bg-dark:color-mix(in srgb,var(--primary) 15%,#222225);
  --brand-outline-cta-dark:color-mix(in srgb,var(--primary) 28%,#4A4A50);
  --brand-line-dark:color-mix(in srgb,var(--primary) 35%,#3A3A40);
  --brand-focus:color-mix(in srgb,var(--primary) 50%,#FFFFFF);
  --alert-text:#FDA29B;
  --alert-bg:#3B1F1D;
}
/* Fokus keyboard di tema gelap memakai aksen terang (primary mentah hanya 1,5 sampai 2,9:1 di atas #222225) */
html[data-theme="dark"] button:focus-visible,html[data-theme="dark"] input:focus-visible{outline-color:var(--brand-nav-icon-dark)}


@media(max-width:380px){
  .topbar{gap:6px}
  .topbar-controls{gap:3px}
  .topbar-controls .icon-button{width:28px;height:28px}
}
@media(max-width:340px){
  .topbar-controls .searchbar{display:none}  /* ruang untuk nama dan "by Membara"; pencarian tetap lewat menu */
}

/* ==========================================================================
   24. Panel Warna Merek (pratinjau). Memakai .popover-overlay dan .popover.
   ========================================================================== */
.mb-brand-panel{width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto}
.mb-field{display:grid;gap:6px;margin:0 0 14px;font-size:12px;font-weight:650}
.mb-field input[type="text"]{height:36px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg);font-size:13px;font-weight:500}
.mb-logo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mb-logo-preview{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;background:#FFF;display:grid;place-items:center;flex:none}
.mb-logo-preview img{width:32px;height:32px;object-fit:contain;display:block}
.mb-brand-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px}
.mb-brand-option{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-brand-option{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg);font-size:12px;font-weight:650;text-align:left}
.mb-brand-option:hover{background:var(--neutral)}
.mb-brand-option[aria-pressed="true"]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.mb-brand-option .mb-quiet{margin-left:auto}
.mb-swatch{width:16px;height:16px;border-radius:50%;background:var(--sw);flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.mb-brand-custom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;font-size:12px;font-weight:650}
.mb-brand-custom input{width:44px;height:30px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.mb-brand-note{font-size:11px;line-height:17px;color:var(--muted);margin:0 0 14px}

/* ==========================================================================
   25. Ringkasan Analitik (KPI sparkline, batang, gauge, heatmap, alur)
   Hanya memakai token; warna merek lewat --chart-1 (= --brand-icon).
   ========================================================================== */
:root{
  --chart-1:var(--brand-icon);
  --chart-2:color-mix(in srgb,var(--chart-1) 62%,var(--surface));
  --chart-3:color-mix(in srgb,var(--chart-1) 32%,var(--surface));
  --chart-wash:color-mix(in srgb,var(--chart-1) 10%,transparent);
  --chart-grid:var(--border);
}
.mb-analytics{margin:0 0 27px}
.mb-an-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.mb-an-head h2{font-size:17px;line-height:26px;margin:0;font-weight:690;letter-spacing:-.025em}
.mb-an-head p{margin:2px 0 0;font-size:12px;line-height:19px;color:var(--muted)}
.mb-an-head .subtabs{margin:0}
.mb-an-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:15px;margin:0 0 15px}
.mb-an-row.is-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mb-an-row>.mb-panel{margin:0}
.mb-chart-sub{margin:-2px 0 12px;font-size:12px;line-height:19px;color:var(--muted)}
.mb-chart-card .mb-chart-table{display:none}
.mb-chart-card.is-table .mb-chart-view{display:none}
.mb-chart-card.is-table .mb-chart-table{display:block}
.mb-chart-table .mb-table{min-width:0}
.mb-chart-toggle[aria-pressed="true"]{border-color:var(--primary);color:var(--brand-icon)}

/* KPI + sparkline */
.mb-stat-spark .mb-spark{margin:10px 5px 0 0}
.mb-stat-spark p{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mb-delta{font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.mb-spark{position:relative;display:block;height:32px}
.mb-spark svg{display:block;width:100%;height:100%;overflow:visible}
.mb-spark-line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mb-spark-area{fill:var(--chart-wash);stroke:none}
.mb-spark i{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;border-radius:50%;background:var(--chart-1);box-shadow:0 0 0 2px var(--surface);transform:translate(-50%,-50%)}

/* Batang */
.mb-bars{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;margin:6px 0 26px}
.mb-bars-y{position:relative;height:200px;min-width:34px}
.mb-bars-y span{position:absolute;right:0;bottom:var(--y);transform:translateY(50%);font-size:10px;line-height:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.mb-bars-plot{position:relative;height:200px}
.mb-gridline{position:absolute;left:0;right:0;bottom:var(--y);height:1px;background:var(--chart-grid)}
.mb-bars-cols{position:absolute;inset:0;display:flex;align-items:stretch}
.mb-col{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;justify-content:center}
.mb-col small{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:10px;line-height:12px;color:var(--muted);white-space:nowrap}
.mb-bar{position:relative;display:block;width:min(24px,70%);height:var(--h);min-height:2px;border-radius:4px 4px 0 0;background:var(--chart-3);transition:background-color .14s}
.mb-bar:hover,.mb-bar:focus-visible{background:var(--chart-2)}
.mb-bar.is-peak,.mb-bar.is-peak:hover,.mb-bar.is-peak:focus-visible{background:var(--chart-1)}
.mb-bar.is-peak::after{content:attr(data-tip-v);position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);font-size:11px;line-height:14px;font-weight:700;color:var(--fg);white-space:nowrap}
.mb-bar:focus-visible,.mb-seg:focus-visible,.mb-cell:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* Gauge setengah lingkaran */
.mb-gauge{position:relative;width:min(100%,240px);margin:6px auto 8px}
.mb-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.mb-seg{fill:none;stroke:var(--c);stroke-width:26;transition:stroke-width .14s}
.mb-seg:hover,.mb-seg:focus-visible{stroke-width:30}
.mb-gauge-center{position:absolute;left:0;right:0;bottom:2px;text-align:center;line-height:1.1}
.mb-gauge-center small{display:block;font-size:11px;color:var(--muted)}
.mb-gauge-center strong{font-size:20px;font-weight:750;letter-spacing:-.03em}
.mb-c1{--c:var(--chart-1)}.mb-c2{--c:var(--chart-2)}.mb-c3{--c:var(--chart-3)}
.mb-legend{display:grid;gap:6px;margin:10px 0 0}
.mb-legend-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:12px}
.mb-legend-row .mb-key{width:3px;align-self:stretch;border-radius:2px;background:var(--c)}
.mb-legend-row b{font-size:14px;font-weight:750;min-width:38px;font-variant-numeric:tabular-nums}
.mb-legend-row span{margin-left:auto;color:var(--muted)}

/* Heatmap */
.mb-heat{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:3px;align-items:center;margin:4px 0 12px}
.mb-heat-h,.mb-heat-d{font-size:10px;line-height:12px;color:var(--muted);white-space:nowrap}
.mb-heat-h{text-align:center;padding-bottom:2px}
.mb-heat-d{padding-right:8px}
.mb-cell{display:block;height:30px;border-radius:4px;background:var(--chart-wash)}
.mb-cell:hover{box-shadow:inset 0 0 0 2px var(--fg)}
.mb-l0{background:color-mix(in srgb,var(--chart-1) 8%,var(--surface))}
.mb-l1{background:color-mix(in srgb,var(--chart-1) 20%,var(--surface))}
.mb-l2{background:color-mix(in srgb,var(--chart-1) 36%,var(--surface))}
.mb-l3{background:color-mix(in srgb,var(--chart-1) 55%,var(--surface))}
.mb-l4{background:color-mix(in srgb,var(--chart-1) 78%,var(--surface))}
.mb-l5{background:var(--chart-1)}
.mb-scale{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}
.mb-scale i{width:18px;height:10px;border-radius:3px;display:block}
.mb-scale-steps{display:flex;gap:3px}

/* Skema alur */
.mb-flow{list-style:none;margin:4px 0 12px;padding:0;display:flex;align-items:stretch;gap:0}
.mb-node{flex:1;min-width:0;border:1px solid var(--border);border-radius:10px;padding:12px 12px 11px;background:var(--surface)}
.mb-node:first-child{background:color-mix(in srgb,var(--chart-1) 8%,var(--surface))}
.mb-node b{display:block;font-size:11px;line-height:15px;font-weight:650;color:var(--muted)}
.mb-node strong{display:block;margin:4px 0 8px;font-size:20px;line-height:26px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mb-node-bar{display:block;height:4px;border-radius:2px;background:var(--chart-wash);overflow:hidden}
.mb-node-bar i{display:block;height:100%;width:var(--w);border-radius:2px;background:var(--chart-1)}
.mb-flow-arrow{flex:none;display:grid;place-items:center;width:46px;font-size:10px;line-height:13px;color:var(--muted);text-align:center}
.mb-flow-arrow svg{display:block;margin:0 auto 1px}
.mb-flow-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}

/* Tooltip tunggal */
.mb-tip{position:fixed;z-index:120;pointer-events:none;max-width:220px;padding:8px 10px;border-radius:8px;background:var(--fg);color:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transform:translateY(2px);transition:opacity .1s}
.mb-tip.is-on{opacity:1;transform:none}
.mb-tip strong{display:block;font-size:13px;line-height:17px;font-weight:750}
.mb-tip span{display:block;font-size:11px;line-height:15px;opacity:.78}

@media(max-width:1120px){
  .mb-an-row{grid-template-columns:minmax(0,1fr)}
  .mb-an-row.is-even{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:800px){
  .mb-flow{flex-direction:column}
  .mb-flow-arrow{width:auto;height:34px;grid-auto-flow:column;gap:6px}
  .mb-flow-arrow svg{transform:rotate(90deg);margin:0}
  .mb-bars-y{min-width:28px}
}
@media(prefers-reduced-motion:reduce){
  .mb-bar,.mb-seg,.mb-tip{transition:none}
}


/* ==========================================================================
   26. Halaman Login Bersama (KANDIDAT TEKNIS)
   Satu struktur untuk semua aplikasi Membara. Yang berbeda hanya merek
   (--primary, logo, nama, font lewat data-product / panel branding) dan
   konten teks. Hanya memakai token yang sudah ada di blok 1-23.
   Id wajib dipertahankan oleh aplikasi: loginForm/email/password/submit.
   ========================================================================== */
body:has(.mb-login){background:var(--page);padding:0;margin:0}
.mb-login{--mb-story-muted:color-mix(in srgb,var(--muted) 62%,var(--fg));display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100dvh;max-width:none;margin:0;padding:0;background:var(--page);color:var(--fg);font:14px/20px var(--font);border:0;border-radius:0}
.mb-login *,.mb-login *:before,.mb-login *:after{box-sizing:border-box}
.mb-login-story{position:relative;isolation:isolate;overflow:hidden;background:var(--soft);color:var(--fg);min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;gap:58px;padding:46px clamp(30px,5.1vw,80px)}
.mb-login-story:before{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(750px,95vw);height:490px;left:-27%;bottom:-31%;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--brand-gradient-rgb),.16) 0,rgba(var(--brand-gradient-rgb),.06) 38%,transparent 68%)}
.mb-login-story:after{content:"";position:absolute;z-index:-1;pointer-events:none;width:390px;height:390px;right:-250px;top:24%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.57) 0,transparent 70%)}
.mb-login-brand{display:inline-flex;align-items:center;gap:12px;max-width:100%}
.mb-login-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#FFFFFF;border:1px solid var(--border);overflow:hidden;flex:none}
.mb-login-logo img{width:42px;height:42px;object-fit:contain;display:block}
.mb-login-logo svg{width:28px;height:28px;color:var(--primary)}
.mb-login-names{display:grid;gap:1px;min-width:0}
.mb-login-name{font-size:18px;line-height:24px;font-weight:750;letter-spacing:-.02em;color:var(--fg);overflow-wrap:anywhere}
.mb-login .mb-endorsement{color:var(--mb-story-muted);font-size:11px;line-height:16px;margin:0}
.mb-login-mobile-note{display:none}
.mb-login-story-body{max-width:630px;margin-top:auto;margin-bottom:auto}
.mb-login-eyebrow{margin:0 0 17px;letter-spacing:.15em;color:var(--brand-kicker-text);font-size:10px;font-weight:750;text-transform:uppercase}
.mb-login-story h1{font-size:clamp(33px,3.35vw,55px);line-height:1.16;letter-spacing:-.052em;font-weight:720;margin:0;max-width:610px;color:var(--fg)}
.mb-login-story h1 span{color:var(--brand-icon)}
.mb-login-copy{font-size:15px;line-height:27px;color:var(--mb-story-muted);max-width:490px;margin:23px 0 0}
.mb-login-features{display:flex;gap:10px;flex-wrap:wrap;margin-top:31px}
.mb-login-features span{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border-radius:8px;color:var(--fg);background:rgba(255,255,255,.56);border:1px solid rgba(var(--brand-gradient-rgb),.14);font-size:11px;line-height:17px;font-weight:650}
.mb-login-features svg{color:var(--brand-icon);flex:none}
.mb-login-story-bottom{font-size:10px;line-height:17px;color:var(--mb-story-muted);letter-spacing:.14em;font-weight:720}
.mb-login-entry{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:34px;padding:54px 28px;position:relative;min-width:0;background:var(--page)}
.mb-login-entry-top{position:absolute;top:30px;right:32px;display:flex;align-items:center;gap:10px}
.mb-login-env{font-size:10px;line-height:15px;color:var(--muted);letter-spacing:.04em}
.mb-login-theme{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--fg);padding:0;min-height:0}
.mb-login-theme:hover{background:var(--sidebar)}
.mb-login-card{width:100%;max-width:390px;margin:auto 0}
.mb-login-lock{width:52px;height:52px;border-radius:12px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;color:var(--brand-icon);margin-bottom:27px}
.mb-login-card .mb-login-eyebrow{margin-bottom:10px}
.mb-login-card h2{margin:0;font-size:27px;line-height:36px;letter-spacing:-.035em;font-weight:720;color:var(--fg)}
.mb-login-intro{margin:9px 0 27px;font-size:13px;line-height:23px;color:var(--muted)}
.mb-login-form{display:grid;gap:18px;margin:0}
.mb-login-field{display:grid;gap:8px}
.mb-login-field label{font-size:12px;font-weight:700;line-height:18px;color:var(--fg)}
.mb-login-input{width:100%;height:46px;min-height:46px;margin:0;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--fg);padding:0 13px;font:inherit;font-size:14px;line-height:20px;outline:none}
.mb-login-input::placeholder{color:var(--muted2);opacity:1}
.mb-login-input:hover{border-color:var(--muted2)}
.mb-login-input:focus{border-color:var(--brand-focus);box-shadow:0 0 0 3px rgba(var(--brand-gradient-rgb),.14)}
.mb-login-pass{position:relative}
.mb-login-pass .mb-login-input{padding-right:54px}
.mb-login-showpass{position:absolute;right:1px;top:1px;width:44px;height:44px;min-height:0;border:0;background:transparent;color:var(--muted);border-radius:7px;display:grid;place-items:center;padding:0}
.mb-login-showpass:hover{color:var(--fg);background:var(--neutral)}
.mb-login-submit{height:46px;min-height:46px;width:100%;border:1px solid var(--primary);border-radius:8px;background:var(--primary);color:var(--brand-on-primary);display:flex;justify-content:center;align-items:center;gap:10px;font:inherit;font-size:13px;line-height:18px;font-weight:700;margin-top:3px;padding:0 16px;transition:background .15s;cursor:pointer}
.mb-login-submit:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--brand-on-primary-hover)}
.mb-login-submit:disabled{opacity:.6;cursor:not-allowed}
.mb-login-submit svg{transition:transform .2s}
.mb-login-submit:hover svg{transform:translateX(2px)}
.mb-login-feedback{display:none;border:1px solid var(--border);background:var(--neutral);border-radius:8px;padding:11px 12px;color:var(--fg);line-height:19px;font-size:12px;gap:9px;align-items:flex-start;margin:17px 0 0}
.mb-login-feedback.is-visible,.mb-login-feedback:not(:empty){display:flex}
.mb-login-feedback.is-error{background:var(--alert-bg);border-color:var(--alert-text);color:var(--alert-text)}
.mb-login-feedback svg{flex-shrink:0;margin-top:1px}
.mb-login-security{display:flex;align-items:flex-start;gap:11px;margin:25px 0 17px;padding:14px;border-radius:8px;background:var(--brand-tint);color:var(--fg)}
.mb-login-security svg{margin-top:1px;color:var(--brand-icon);flex:none}
.mb-login-security p{font-size:11px;line-height:18px;margin:0;color:var(--fg)}
.mb-login-helper{font-size:11px;line-height:18px;color:var(--muted);margin:0}
.mb-login-entry-bottom{font-size:10px;color:var(--muted);text-align:center;letter-spacing:.1em;margin-top:auto}
.mb-login a:focus-visible,.mb-login button:focus-visible,.mb-login input:focus-visible{outline:3px solid var(--brand-focus);outline-offset:3px}
html[data-theme="dark"] .mb-login-story{background:color-mix(in srgb,var(--primary) 16%,var(--surface))}
html[data-theme="dark"] .mb-login-story:before{background:radial-gradient(ellipse,rgba(var(--brand-gradient-rgb),.28) 0,rgba(var(--brand-gradient-rgb),.09) 39%,transparent 68%)}
html[data-theme="dark"] .mb-login-story:after{opacity:.13}
html[data-theme="dark"] .mb-login-eyebrow{color:var(--brand-accent-dark-2)}
html[data-theme="dark"] .mb-login-features span{background:var(--brand-card-soft-dark);border-color:var(--brand-outline-dark);color:var(--fg)}
html[data-theme="dark"] .mb-login-security{background:var(--brand-card-soft-dark)}
html[data-theme="dark"] .mb-login-submit{color:var(--brand-on-primary)}
html[data-theme="dark"] .mb-login-input{border-color:#5D5D68}
html[data-theme="dark"] .mb-login-input:focus{border-color:var(--brand-accent-dark);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
html[data-theme="dark"] .mb-login a:focus-visible,html[data-theme="dark"] .mb-login button:focus-visible,html[data-theme="dark"] .mb-login input:focus-visible{outline-color:var(--brand-nav-icon-dark)}
@media(max-width:1000px){.mb-login-story{padding-left:36px;padding-right:30px}.mb-login-entry{padding-left:24px;padding-right:24px}.mb-login-story h1{font-size:clamp(31px,3.6vw,43px)}.mb-login-copy{font-size:14px;line-height:25px}.mb-login-features{gap:7px}.mb-login-features span{padding:7px 9px}}
@media(max-width:800px){
  .mb-login{grid-template-columns:1fr}
  .mb-login-story{min-height:0;gap:0;padding:20px 24px 18px}
  .mb-login-logo{width:44px;height:44px}.mb-login-logo img{width:34px;height:34px}
  .mb-login-name{font-size:16px;line-height:22px}
  .mb-login-story-body,.mb-login-story-bottom{display:none}
  .mb-login-mobile-note{display:block;font-size:12px;line-height:19px;color:var(--mb-story-muted);margin:8px 0 0}
  .mb-login-entry{min-height:calc(100dvh - 120px);justify-content:flex-start;gap:25px;padding:39px 24px 25px}
  .mb-login-entry-top{top:17px;right:24px}
  .mb-login-card{max-width:390px;margin:0 auto}
  .mb-login-lock{display:none}
  .mb-login-entry-bottom{margin:10px 0 0}
  .mb-login-card h2{font-size:25px;line-height:33px}
}
@media(max-width:440px){.mb-login-story{padding:19px 20px 17px}.mb-login-entry{padding:37px 22px 22px}.mb-login-entry-top{right:21px;top:12px}.mb-login-card .mb-login-eyebrow{margin-bottom:9px}.mb-login-intro{margin-bottom:25px}.mb-login-security{margin-top:23px}.mb-login-env{display:none}}
@media(prefers-reduced-motion:reduce){.mb-login *,.mb-login *:before,.mb-login *:after{scroll-behavior:auto!important;transition:none!important}}

/* Logo sementara Profit (slot logo) */
.mb-login-pf{font-weight:800;font-size:22px;line-height:1;letter-spacing:-.03em;color:var(--primary)}