html[data-theme="blue"],html[data-theme="blue"] body{--bg:#f3f6fb;--navy:#173b70;--blue:#2563b9;--blue-d:#194b91;--blue-l:#e8f0fc;--line:#d6dfed}
html[data-theme="blue"] .sidebar{background:#173b70}html[data-theme="blue"] .sidebar nav a.active{background:#28558b}
html[data-theme="blue"] .btn.primary,html[data-theme="blue"] .lg-btn,html[data-theme="blue"] .mobile-hero,html[data-theme="blue"] .lg-hero{background:#2563b9!important;border-color:#2563b9;color:#fff}
html[data-theme="blue"] .btn.primary:hover,html[data-theme="blue"] .lg-btn:hover{background:#194b91!important}
html[data-theme="blue"] .mobile-menu a>i,html[data-theme="blue"] .mobile-bottom-nav a.active{background:#e8f0fc;color:#194b91}
html[data-theme="blue"] body,html[data-theme="blue"] .main{background:#f3f6fb}
.theme-options{display:flex;gap:12px;flex-wrap:wrap}.theme-options .btn{min-width:120px;min-height:44px}

html[data-theme="blue"],html[data-theme="blue"] body{--bg:#f5f7fb;--card:#fff;--ink:#0b1c30;--mut:#5b6678;--line:#e3e8f1;--navy:#0f172a;--blue:#0051d5;--blue-d:#003ea8;--blue-l:#e4ecff;--green:#0a8a5f;--green-l:#dff6ec;--red:#ba1a1a;--red-l:#ffe3e0;--amber:#a86500;--amber-l:#fff0d1;color:var(--ink)}
html[data-theme="blue"] .sidebar{background:#0f172a}
html[data-theme="blue"] .btn.primary,html[data-theme="blue"] .lg-btn,html[data-theme="blue"] .mobile-hero,html[data-theme="blue"] .lg-hero{background:#0051d5!important;border-color:#0051d5!important;color:#fff}
html[data-theme="blue"] .btn.danger{background:#ba1a1a!important;border-color:#ba1a1a;color:#fff}
html[data-theme="blue"] .mobile-hero>a{background:#296de0;border-color:#a8c8ff;color:#fff}
html[data-theme="blue"] .attention-item>b{background:#0051d5;color:#fff}
html[data-theme="blue"] .mobile-role,html[data-theme="blue"] .attention-item{background:#e4ecff;border-color:#cadbfa;color:#17467a}
html[data-theme="blue"] .mobile-menu a>i,html[data-theme="blue"] .mobile-menu .simple-extra>a>i{background:#e4ecff;color:#0051d5}
html[data-theme="blue"] .mobile-brand strong,html[data-theme="blue"] .mobile-menu strong,html[data-theme="blue"] .simple-product-head h2,html[data-theme="blue"] .simple-product-values strong,html[data-theme="blue"] .mobile-menu a,html[data-theme="blue"] input,html[data-theme="blue"] select,html[data-theme="blue"] textarea{color:#0b1c30}
html[data-theme="blue"] .btn:not(.primary):not(.danger){color:#17467a;border-color:#b4c8e4;background:#fff}
html[data-theme="blue"] .topbar,html[data-theme="blue"] .lg-main{background:#fff!important}
html[data-theme="blue"] .mobile-bottom-nav a.active{background:#e4ecff;color:#0051d5}
html[data-theme="blue"] :focus-visible{outline-color:#0051d5!important}

html[data-theme="blue"]{--bg:#f5f7fb!important;--card:#fff!important;--ink:#0b1c30!important;--mut:#5b6678!important;--line:#e3e8f1!important;--navy:#0f172a!important;--blue:#0051d5!important;--blue-d:#003ea8!important;--blue-l:#e4ecff!important;--green:#0a8a5f!important;--green-l:#dff6ec!important;--red:#ba1a1a!important;--red-l:#ffe3e0!important;--amber:#a86500!important;--amber-l:#fff0d1!important}
html[data-theme="blue"] body{color:var(--ink)!important}
html[data-theme="blue"] a{color:var(--blue)!important}
html[data-theme="blue"] .mut{color:var(--mut)!important}
html[data-theme="blue"] .sidebar{color:#cbd5e1!important}
html[data-theme="blue"] .logo{background:#fff!important}
html[data-theme="blue"] .brand-t strong{color:#fff!important}
html[data-theme="blue"] .brand-t span{color:#94a3b8!important}
html[data-theme="blue"] .loc{background:rgba(255,255,255,.05)!important}
html[data-theme="blue"] .loc label{color:#94a3b8!important}
html[data-theme="blue"] .loc div{color:#fff!important}
html[data-theme="blue"] .sidebar nav a{color:#cbd5e1!important}
html[data-theme="blue"] .sidebar nav a:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
html[data-theme="blue"] .sidebar nav a.active{color:#fff!important}
html[data-theme="blue"] .side-foot{background:rgba(255,255,255,.05)!important;color:#fff!important}
html[data-theme="blue"] .side-foot small{color:#94a3b8!important}
html[data-theme="blue"] .dot{background:#34d399!important}
html[data-theme="blue"] .topbar{background:#fff!important}
html[data-theme="blue"] .clock{color:var(--mut)!important}
html[data-theme="blue"] .who span{color:var(--mut)!important}
html[data-theme="blue"] .bell{color:var(--mut)!important}
html[data-theme="blue"] .bell b{color:#fff!important}
html[data-theme="blue"] .card-h .sub{color:var(--mut)!important}
html[data-theme="blue"] .kpi .l{color:var(--mut)!important}
html[data-theme="blue"] .kpi .s{color:var(--mut)!important}
html[data-theme="blue"] .up{color:var(--green)!important}
html[data-theme="blue"] .down{color:var(--red)!important}
html[data-theme="blue"] .btn{background:#fff!important;color:var(--ink)!important}
html[data-theme="blue"] .btn:hover{background:#f1f5fb!important}
html[data-theme="blue"] .btn.primary{border-color:var(--blue)!important;color:#fff!important}
html[data-theme="blue"] .btn.green{border-color:var(--green)!important;color:#fff!important}
html[data-theme="blue"] .btn.danger{color:var(--red)!important;border-color:#f3c2be!important}
html[data-theme="blue"] .icon-btn{color:var(--mut)!important}
html[data-theme="blue"] .icon-btn:hover{background:#eef2f8!important;color:var(--ink)!important}
html[data-theme="blue"] .badge.green{color:var(--green)!important}
html[data-theme="blue"] .badge.red{color:var(--red)!important}
html[data-theme="blue"] .badge.amber{color:var(--amber)!important}
html[data-theme="blue"] .badge.blue{color:var(--blue)!important}
html[data-theme="blue"] .badge.gray{background:#eef1f6!important;color:var(--mut)!important}
html[data-theme="blue"] label.f{color:var(--mut)!important}
html[data-theme="blue"] input,html[data-theme="blue"] select,html[data-theme="blue"] textarea{color:var(--ink)!important;background:#fff!important}
html[data-theme="blue"] input:focus,html[data-theme="blue"] select:focus,html[data-theme="blue"] textarea:focus{border-color:var(--blue)!important}
html[data-theme="blue"] .toolbar .search .ic{color:var(--mut)!important}
html[data-theme="blue"] .tabs{background:#eaeff7!important}
html[data-theme="blue"] .tabs button{color:var(--mut)!important}
html[data-theme="blue"] .tabs button.on{background:#fff!important;color:var(--ink)!important}
html[data-theme="blue"] .chip{background:#fff!important;color:var(--mut)!important}
html[data-theme="blue"] .chip.on{border-color:var(--blue)!important;color:#fff!important}
html[data-theme="blue"] th{color:var(--mut)!important;background:#f8fafd!important}
html[data-theme="blue"] tbody tr:hover{background:#fafcff!important}
html[data-theme="blue"] .thumb{background:#eef2f8!important}
html[data-theme="blue"] .pcell small{color:var(--mut)!important}
html[data-theme="blue"] .empty{color:var(--mut)!important}
html[data-theme="blue"] .pager{color:var(--mut)!important}
html[data-theme="blue"] .rank-i .bar{background:#e6ecf6!important}
html[data-theme="blue"] .rank.slow .bar i{background:#e08a1e!important}
html[data-theme="blue"] .chart .grid{stroke:#e8edf5!important}
html[data-theme="blue"] .chart .axis{fill:#6a7587!important}
html[data-theme="blue"] .chart .bar{fill:#7ea3ee!important}
html[data-theme="blue"] .chart .bar:hover{fill:var(--blue)!important}
html[data-theme="blue"] .chart .bar.cur{fill:var(--blue)!important}
html[data-theme="blue"] .note{background:#f1f6ff!important;color:#18407f!important}
html[data-theme="blue"] .note.warn{background:#fff6e5!important;border-color:#f3dba5!important;color:#6a4500!important}
html[data-theme="blue"] .overlay{background:rgba(10,20,40,.5)!important}
html[data-theme="blue"] .modal{background:#fff!important}
html[data-theme="blue"] .toast{background:#0f172a!important;color:#fff!important}
html[data-theme="blue"] .toast.err{background:#b3261e!important}
html[data-theme="blue"] .toast.ok{background:#0a6b4b!important}
html[data-theme="blue"] .pcard{background:#fff!important;color:inherit!important}
html[data-theme="blue"] .pcard:hover{border-color:var(--blue)!important}
html[data-theme="blue"] .pcard img{background:#eef2f8!important}
html[data-theme="blue"] .pcard .sp{color:var(--mut)!important}
html[data-theme="blue"] .ci{background:#f6f8fc!important}
html[data-theme="blue"] .step{background:#fff!important}
html[data-theme="blue"] .step button{color:var(--ink)!important}
html[data-theme="blue"] .pay-m button{background:#fff!important}
html[data-theme="blue"] .pay-m button.on{border-color:var(--blue)!important;color:var(--blue)!important}
html[data-theme="blue"] .login-hero{background:linear-gradient(160deg,#0f172a,#0b3a8f)!important;color:#fff!important}
html[data-theme="blue"] .login-hero p{color:#b9c6e0!important}
html[data-theme="blue"] .demo{background:#f1f6ff!important;color:#18407f!important}
html[data-theme="blue"]{--ease:cubic-bezier(.2,.8,.2,1)!important}
html[data-theme="blue"] from{background:#fff3b8!important}
html[data-theme="blue"] to{background:#f6f8fc!important}
html[data-theme="blue"] .toast::after{background:rgba(255,255,255,.55)!important}
html[data-theme="blue"] .ok-check .ok-c{fill:var(--green-l)!important;stroke:var(--green)!important}
html[data-theme="blue"] .ok-check .ok-t{fill:none!important;stroke:var(--green)!important}
html[data-theme="blue"] .lg-card>:nth-child(1){--i:0!important}
html[data-theme="blue"] .lg-card>:nth-child(2){--i:1!important}
html[data-theme="blue"] .lg-card>:nth-child(3){--i:2!important}
html[data-theme="blue"] .lg-card>:nth-child(4){--i:3!important}
html[data-theme="blue"] .lg-card>:nth-child(5){--i:4!important}
html[data-theme="blue"] .lg-card>:nth-child(6){--i:5!important}
html[data-theme="blue"] .lg-card>:nth-child(8){--i:6!important}
html[data-theme="blue"] .lg-card>:nth-child(9){--i:7!important}
html[data-theme="blue"] .hc{background:#fff!important}
html[data-theme="blue"] .hc-tip{background:#0f172a!important;color:#fff!important}
html[data-theme="blue"] .hc-img{background:#eef2f8!important}
html[data-theme="blue"] .hc-s{color:var(--mut)!important}
html[data-theme="blue"] .hc-r>span{color:var(--mut)!important}
html[data-theme="blue"] .hc-n{color:var(--ink)!important}
html[data-theme="blue"] .hc-n small{color:var(--mut)!important}
html[data-theme="blue"] .hc-h{color:var(--mut)!important}
html[data-theme="blue"] .hc-pc img{background:#eef2f8!important}
html[data-theme="blue"] .hc-av{color:#fff!important}
html[data-theme="blue"] .info{color:#94a3b8!important}
html[data-theme="blue"] .info:hover,html[data-theme="blue"] .info:focus-visible{color:var(--blue)!important}
html[data-theme="blue"] .chart .col:hover .bar{fill:var(--blue)!important}
html[data-theme="blue"] .chart .hit{fill:transparent!important}
html[data-theme="blue"] .bell-card{background:#fff!important}
html[data-theme="blue"] .bp-h{background:#f8fafd!important}
html[data-theme="blue"] .bp-n small{color:var(--mut)!important}
html[data-theme="blue"] .bp-s{color:var(--amber)!important}
html[data-theme="blue"] .bp-s.zero{color:var(--red)!important}
html[data-theme="blue"] .bp-empty{color:var(--mut)!important}
html[data-theme="blue"] .bp-f{background:#f8fafd!important}
html[data-theme="blue"] .bell:hover{color:var(--ink)!important}
html[data-theme="blue"] .tabs button:not(.on):hover{color:var(--ink)!important}
html[data-theme="blue"] .tab-ind{background:#fff!important}
html[data-theme="blue"] .chip:not(.on):hover{border-color:var(--blue)!important;color:var(--blue)!important}
html[data-theme="blue"] .pay-m button:not(.on):hover{border-color:#b9c7de!important}
html[data-theme="blue"] input:focus,html[data-theme="blue"] select:focus,html[data-theme="blue"] textarea:focus{outline-color:rgba(0,81,213,.25)!important}
html[data-theme="blue"] .step button:hover{background:#eef2f8!important}
html[data-theme="blue"] body::after{background:rgba(10,20,40,.5)!important}
html[data-theme="blue"] html:has(body[data-page]:not([data-page=login]))::after{background:#fff!important}
html[data-theme="blue"] .cart-pay{background:#fff!important}
html[data-theme="blue"] .more>summary small{color:var(--mut)!important}
html[data-theme="blue"] details.opt>summary::before{color:var(--blue)!important}
html[data-theme="blue"] details.opt>summary small{color:var(--mut)!important}
html[data-theme="blue"] .rp-in{background:#fff!important}
html[data-theme="blue"] .rp-in:focus-within{border-color:var(--blue)!important}
html[data-theme="blue"] .rp-in span{background:#f4f6fa!important;color:var(--mut)!important}
html[data-theme="blue"] tr.void td{color:var(--mut)!important}
html[data-theme="blue"] .pay-cash .kb{color:var(--mut)!important}
html[data-theme="blue"] .pay-cash .kb b{color:var(--ink)!important}
html[data-theme="blue"] .cart-fab:not([hidden]){color:#fff!important}
html[data-theme="blue"] .cart-fab .fab-n{background:rgba(255,255,255,.2)!important}
html[data-theme="blue"] .danger-zone{border-color:#f3c2be!important}
html[data-theme="blue"] .danger-zone .card-h{background:#fff7f6!important}
html[data-theme="blue"] .danger-zone .card-h h2{color:var(--red)!important}
html[data-theme="blue"] .kbd-hint{color:var(--mut)!important}
html[data-theme="blue"] kbd{background:#eef2f8!important;color:var(--ink)!important}
html[data-theme="blue"] .qr-img{background:#fff!important}
html[data-theme="blue"] .qris-prev{background:#f6f8fc!important}
html[data-theme="blue"] .qris-prev img{background:#fff!important}
html[data-theme="blue"] .demo-badge{background:#fef3c7!important;color:#92400e!important}
html[data-theme="blue"] a.demo-badge:hover{background:#fde68a!important}
html[data-theme="blue"] .demo-bar{background:#fffbeb!important;color:#78350f!important}
html[data-theme="blue"] .demo-bar a{color:#b45309!important}
html[data-theme="blue"]{--ease:cubic-bezier(.32,.72,0,1)!important;--ease-std:cubic-bezier(.28,.11,.32,1)!important;--spring:cubic-bezier(.32,.72,0,1)!important}
html[data-theme="blue"]{--spring:linear(0,0.039,0.135,0.261,0.397,0.531,0.653,0.759,0.846,0.914,0.965,1.001,1.025,1.039,1.045,1.046,1.043,1.038,1.032,1.026,1.02,1.014,1.01,1.006,1.003,1.001,1,0.999,0.998,0.998,1)!important}
html[data-theme="blue"] .toast{background:rgba(28,28,30,.86)!important}
html[data-theme="blue"] .toast.err{background:rgba(179,38,30,.9)!important}
html[data-theme="blue"] .toast.ok{background:rgba(10,107,75,.9)!important}
html[data-theme="blue"] .lg-btn.loading::after{background:conic-gradient(from 0deg,rgba(255,255,255,0),#fff)!important}
html[data-theme="blue"] .avatar{background:linear-gradient(160deg,#3b82f6,#1d4ed8)!important;color:#fff!important}
html[data-theme="blue"] .avatar-xl::after{background:rgba(0,0,0,.42)!important;color:#fff!important}
html[data-theme="blue"] .thumb{background:#fff!important}
html[data-theme="blue"] .photo-reference{color:#865c0d!important}
html[data-theme="blue"] .lg{background:#f3f4f6!important}
html[data-theme="blue"] .lg-hero{color:#fff!important;background:linear-gradient(165deg,#081433 0%,#0a1f55 55%,#0b2a6e 100%)!important}
html[data-theme="blue"] .lg-hero::before{background:linear-gradient(90deg,rgba(0,81,213,.10),rgba(0,81,213,.55))!important}
html[data-theme="blue"] .lg-hero::after{background:rgba(0,81,213,.35)!important}
html[data-theme="blue"] .lg-logo{background:#fff!important}
html[data-theme="blue"] .lg-brand span{color:#b9c6e0!important}
html[data-theme="blue"] .lg-eyebrow{color:#9db4e8!important}
html[data-theme="blue"] .lg-hero h2 em{color:#7fb0ff!important}
html[data-theme="blue"] .lg-hero p{color:#c3cfe8!important}
html[data-theme="blue"] .lg-feats{color:#d6e0f5!important}
html[data-theme="blue"] .lg-main{background:#f3f4f6!important}
html[data-theme="blue"] .lg-loc{color:#1d4ed8!important}
html[data-theme="blue"] .lg-card h1{color:#16213a!important}
html[data-theme="blue"] .lg-sub{color:#6b7587!important}
html[data-theme="blue"] .lg-card .lg-f{color:#334155!important}
html[data-theme="blue"] .lg-card input[type=text],html[data-theme="blue"] .lg-card input[type=password]{background:#fff!important}
html[data-theme="blue"] .lg-card input::placeholder{color:#9aa4b5!important}
html[data-theme="blue"] .lg-show{color:#5b6678!important}
html[data-theme="blue"] .lg-btn{background:linear-gradient(180deg,#0a5cf0,#0051d5)!important;color:#fff!important}
html[data-theme="blue"] .lg-btn:hover{background:linear-gradient(180deg,#0551d6,#003ea8)!important}
html[data-theme="blue"] .lg-note{color:#7a8497!important}
html[data-theme="blue"] .lg-eye{color:#8b95a7!important}
html[data-theme="blue"] .lg-eye:hover{color:#475569!important;background:rgba(15,23,42,.05)!important}
html[data-theme="blue"] .lg-eye.on{color:#0051d5!important;background:rgba(0,81,213,.1)!important}
html[data-theme="blue"] .mobile-hero{background:#0051d5!important}html[data-theme="blue"] .simple-product-values strong{color:#0b1c30!important}

html[data-theme] .sidebar{background:#0f172a!important;color:#cbd5e1!important}
html[data-theme] .sidebar .brand{border-color:#263044!important}
html[data-theme] .sidebar .brand-t strong{color:#fff!important}
html[data-theme] .sidebar .brand-t span,html[data-theme] .sidebar .loc label,html[data-theme] .sidebar .side-foot small{color:#94a3b8!important}
html[data-theme] .sidebar nav a{color:#cbd5e1!important}
html[data-theme] .sidebar nav a.active{background:#2b588b!important;color:#fff!important;box-shadow:none!important}
html[data-theme] .sidebar nav a:hover{background:#1e3a5f!important;color:#fff!important}
html[data-theme] .sidebar .loc,html[data-theme] .sidebar .side-foot{background:#1c2638!important;border-color:#263044!important;color:#fff!important}

html[data-theme] .sidebar{background:#111112!important;color:#c9c9d2!important}
html[data-theme] .sidebar .brand{border-color:#232327!important}
html[data-theme] .sidebar .brand-t strong{color:#f2f2f5!important}
html[data-theme] .sidebar .brand-t span,html[data-theme] .sidebar .loc label,html[data-theme] .sidebar .side-foot small{color:#9a9aa6!important}
html[data-theme] .sidebar nav a{color:#c9c9d2!important}
html[data-theme] .sidebar nav a.active{background:#333336!important;color:#f2f2f5!important;box-shadow:none!important}
html[data-theme] .sidebar nav a:hover{background:#29292c!important;color:#fff!important}
html[data-theme] .sidebar .loc,html[data-theme] .sidebar .side-foot{background:#1d1d20!important;border-color:#232327!important;color:#f2f2f5!important}
html[data-theme] .sidebar .loc div{color:#f2f2f5!important}
html[data-theme] .sidebar .dot{background:#9a9aa6!important;box-shadow:0 0 0 3px rgba(154,154,166,.2)!important}

html[data-theme="blue"] .sidebar{background:#173b70!important;color:#cbd5e1!important}
html[data-theme="blue"] .sidebar .brand{border-color:#315483!important}
html[data-theme="blue"] .sidebar nav a{color:#d4e1f2!important}
html[data-theme="blue"] .sidebar nav a.active{background:#28558b!important;color:#fff!important}
html[data-theme="blue"] .sidebar nav a:hover{background:#28558b!important;color:#fff!important}
html[data-theme="blue"] .sidebar .loc,html[data-theme="blue"] .sidebar .side-foot{background:#204778!important;border-color:#315483!important;color:#fff!important}
html[data-theme="blue"] .sidebar .brand-t span,html[data-theme="blue"] .sidebar .loc label,html[data-theme="blue"] .sidebar .side-foot small{color:#b6c9e3!important}

#server-status[hidden]{display:none!important}
body[data-page=pengaturan] #server-status:not([hidden]),#server-status.warn:not([hidden]){display:block}
#attention-list .attention-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:12px;box-shadow:none}
#attention-list .attention-item[hidden]{display:none}
#attention-list .attention-item>b{grid-row:1 / span 2;min-width:36px;padding:6px;text-align:center;background:var(--blue-l);color:var(--ink);border-radius:8px}
#attention-list .attention-item>span{grid-column:2;color:var(--mut)}
@media(max-width:860px){.topbar .clock{display:block;font-size:11px}.topbar .clock{max-width:80px;text-align:right}}

/* Pasangkan warna teks dan latar untuk setiap keadaan kontrol. */
html[data-theme] .ops-tabs a {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line);
}
html[data-theme] .ops-tabs a.active,
html[data-theme] .btn.primary,
html[data-theme] .chip.on {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
}
html[data-theme] .btn.primary:hover {
  background: var(--blue-d) !important;
}
html[data-theme] .btn.green {
  background: var(--green-l) !important;
  color: var(--ink) !important;
  border-color: var(--green) !important;
}
html[data-theme] .btn.danger {
  background: var(--red-l) !important;
  color: var(--red) !important;
  border-color: var(--red) !important;
}

html[data-theme] .sidebar .side-foot .dot {
  background: #34d399 !important;
  box-shadow: 0 0 0 3px #34d39944 !important;
  animation: storage-glow 2s ease-in-out infinite;
}
@keyframes storage-glow {
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .sidebar .side-foot .dot { animation: none; }
}
.task-grid a { background: var(--card); border-color: var(--line); }
.task-grid a b { color: var(--blue); }
.task-grid a span { color: var(--mut); }

.sidebar .warehouse-city { display: block; color: #b6c9e3; font-size: 12px; font-weight: 400; }
.ops-tabs a, .toolbar .btn, .ops-button-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  text-align: center;
}
.ops-tabs a { min-width: 76px; }
.ops-button-row { align-items: end; }
.toolbar { align-items: center; }

@media screen and (max-width:860px) {
  html[data-theme] .mobile-bottom-nav {
    background: var(--card);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 0 6px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -5px 20px #0f172a12;
  }
  html[data-theme] .mobile-bottom-nav > :is(a, button) {
    min-height: 67px;
    justify-content: flex-start;
    gap: 1px;
    background: transparent;
    color: var(--mut);
    font-size: 11px;
    white-space: nowrap;
  }
  html[data-theme] .mobile-bottom-nav > :is(a, button) > .ic {
    width: 44px;
    height: 44px;
    padding: 11px;
    border-radius: 50%;
  }
  html[data-theme] .mobile-bottom-nav > .active {
    background: transparent;
    color: var(--ink);
    font-weight: 700;
  }
  html[data-theme] .mobile-bottom-nav > .active > .ic {
    transform: translateY(-9px);
    background: var(--blue);
    color: #fff;
    box-shadow: 0 0 0 4px var(--card);
  }
}

@media screen and (max-width:860px) {
  .mobile-profile-avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    color: var(--ink);
    background: var(--blue-l);
    flex: none;
  }
  .mobile-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-bottom-nav .active > .mobile-profile-avatar {
    transform: translateY(-9px);
    box-shadow: 0 0 0 3px var(--blue), 0 0 0 6px var(--card);
  }
  .mobile-profile-summary { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
  .mobile-profile-summary small { display: block; color: var(--mut); }
}

@media screen and (max-width:860px) {
  body.mobile-profile-open { overflow: hidden; }
  body.mobile-profile-open .mobile-bottom-nav { z-index: 181; }
  body.mobile-profile-open .mobile-bottom-nav a.active > .ic {
    transform: none;
    background: transparent;
    color: var(--mut);
    box-shadow: none;
  }
  .mobile-menu-overlay:not([hidden]) { align-items: stretch; background: var(--card); }
  .mobile-menu-overlay .mobile-menu-sheet {
    max-height: none;
    padding: 0 0 calc(var(--mobile-nav-space) + 20px);
    border-radius: 0;
    background: var(--card);
    box-shadow: none;
  }
  .mobile-menu-sheet > header {
    margin: 0;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 24px;
    background: var(--blue);
    color: #fff;
  }
  .mobile-menu-sheet > header .icon-btn { background: var(--card); color: var(--ink); }
  .mobile-menu-sheet .mobile-profile-summary {
    position: relative;
    margin: -10px 0 16px;
    padding: 18px;
    border-radius: 0 24px 0 0;
    background: var(--card);
  }
  .mobile-profile-summary .mobile-profile-avatar { width: 64px; height: 64px; }
  .mobile-profile-summary strong { font-size: 19px; }
  .mobile-profile-menu-title {
    margin: 0 16px 6px;
    padding-inline-start: 10px;
    border-inline-start: 4px solid var(--blue);
  }
  .mobile-menu-sheet nav { display: block; padding-inline: 16px; }
  .mobile-menu-sheet nav a {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    min-height: 56px;
    color: var(--ink);
  }
  .mobile-menu-sheet nav a::after {
    content: "";
    margin-inline-start: auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--mut);
    border-right: 2px solid var(--mut);
    transform: rotate(45deg);
  }
}

@media screen and (max-width:860px) and (prefers-reduced-motion:no-preference) {
  html[data-theme] .mobile-bottom-nav > .active > :is(.ic, .mobile-profile-avatar) {
    animation: dock-icon-rise 280ms ease-out both;
  }
  html[data-theme] body.mobile-profile-open .mobile-bottom-nav a.active > .ic {
    animation: none;
  }
  html[data-theme] .mobile-bottom-nav > :is(a, button):active {
    transform: scale(.94);
  }
  @keyframes dock-icon-rise {
    from { transform: translateY(0) scale(.84); }
    65% { transform: translateY(-12px) scale(1.06); }
    to { transform: translateY(-9px) scale(1); }
  }
}