@import url('fonts/tokoku-local-fonts.css?v=20260927');
:root{--bg:#f6f7fb;--card:#fff;--text:#182230;--muted:#667085;--line:#e4e7ec;--primary:#155eef;--primary2:#004eeb;--danger:#d92d20;--ok:#079455;--dark:#101828;--warn:#b54708;--shadow:0 12px 34px rgba(16,24,40,.08)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text)}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--dark);color:#fff;padding:22px 18px;display:flex;flex-direction:column;z-index:50}.brand{display:flex;gap:12px;align-items:center;padding:6px 8px 24px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#2e90fa;font-size:20px}.brand strong,.brand small{display:block}.brand small{color:#98a2b3;margin-top:2px}.sidebar nav{display:grid;gap:8px}.sidebar nav a,.logout-link{padding:12px 14px;border-radius:10px;color:#d0d5dd}.sidebar nav a:hover,.logout-link:hover{background:#1d2939;color:#fff}.sidebar-bottom{margin-top:auto;border-top:1px solid #344054;padding-top:16px}.admin-chip{font-size:13px;color:#eaecf0;padding:0 12px 8px}.main{margin-left:260px;min-height:100vh}.main-public{margin-left:0}.topbar{height:72px;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 28px}.topbar strong,.topbar small{display:block}.topbar small{color:var(--muted);font-size:12px;margin-top:2px}.menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px}.content{padding:28px;max-width:1450px;margin:auto}.hero{background:linear-gradient(135deg,#101828,#1d2939);color:#fff;border-radius:22px;padding:30px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:20px;align-items:center}.hero h1{margin:0 0 8px;font-size:30px}.hero p{margin:0;color:#d0d5dd;max-width:780px}.btn{border:0;border-radius:10px;padding:11px 16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--text)}.btn.primary{background:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary2)}.btn.secondary{background:#fff;border:1px solid var(--line)}.btn.danger{background:#fff5f4;color:var(--danger);border:1px solid #fecdca}.btn.sm{padding:8px 11px;font-size:13px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(16,24,40,.04)}.metric-label{color:var(--muted);font-size:13px}.metric-value{font-size:30px;font-weight:800;margin-top:7px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 12px}.section-head h2{font-size:19px;margin:0}.table-wrap{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:auto}.table{border-collapse:collapse;width:100%;min-width:980px}.table th,.table td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}.table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fcfcfd}.badge{display:inline-flex;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700}.badge.ok{background:#ecfdf3;color:#027a48}.badge.off{background:#f2f4f7;color:#667085}.badge.warn{background:#fffaeb;color:#b54708}.badge.danger-badge{background:#fef3f2;color:#b42318}.actions{display:flex;gap:7px;flex-wrap:wrap}.form-card{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow)}.form-card.wide{max-width:none}.form-card h1{margin:0 0 6px}.form-card p.lead{margin-top:0;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field.full{grid-column:1/-1}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.field input,.field textarea,.field select{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:11px 12px;font:inherit;outline:none;background:#fff}.field textarea{min-height:92px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:#84adff;box-shadow:0 0 0 4px #eff4ff}.help{color:var(--muted);font-size:12px;margin-top:6px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.alert{padding:12px 14px;border-radius:10px;margin-bottom:18px;border:1px solid}.alert.success{background:#ecfdf3;color:#027a48;border-color:#abefc6}.alert.danger{background:#fef3f2;color:#b42318;border-color:#fecdca}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}.login-logo{width:52px;height:52px;border-radius:15px;background:var(--dark);color:#fff;display:grid;place-items:center;font-size:24px;margin-bottom:18px}.login-card h1{margin:0}.login-card p{color:var(--muted)}.login-card .field{margin-top:14px}.login-card .btn{width:100%;margin-top:18px}.muted{color:var(--muted)}.empty{padding:36px;text-align:center;color:var(--muted)}.code-big{font:800 24px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em}.stock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stock-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}.sticker-page{background:#eef2f7;min-height:100vh;padding:24px}.sticker-toolbar{max-width:1000px;margin:0 auto 18px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.sticker{width:88mm;min-height:112mm;margin:0 auto;background:#fff;border-radius:8mm;padding:8mm;box-shadow:0 18px 50px rgba(16,24,40,.14);text-align:center;position:relative;overflow:hidden}.sticker:before{content:"";position:absolute;left:0;top:0;width:100%;height:8mm;background:linear-gradient(90deg,#155eef,#7f56d9)}.sticker .google-stars{font-size:24px;letter-spacing:2px;color:#fdb022;margin-top:6mm}.sticker h1{font-size:22px;margin:5px 0}.sticker .sub{font-size:13px;color:var(--muted);margin-bottom:12px}.qr-box{width:58mm;height:58mm;margin:auto;display:grid;place-items:center}.qr-box img,.qr-box canvas{max-width:100%!important;height:auto!important}.sticker .cta{font-size:19px;font-weight:800;margin:8px 0 4px}.sticker .micro{font-size:11px;color:var(--muted)}.sticker-code{font:800 13px ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:10px;letter-spacing:.08em}.nfc-pill{display:inline-flex;align-items:center;gap:6px;background:#f2f4f7;border-radius:999px;padding:7px 11px;font-size:11px;margin-top:10px}.url-box{max-width:1000px;margin:18px auto;background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}.url-row{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;margin:8px 0}.url-row code{overflow:auto;background:#f9fafb;padding:9px;border-radius:8px}.print-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6mm;max-width:205mm;margin:0 auto}.mini-sticker{background:#fff;border:1px solid #d0d5dd;border-radius:4mm;padding:5mm;text-align:center;min-height:83mm;break-inside:avoid}.mini-qr{width:46mm;height:46mm;margin:auto;display:grid;place-items:center}.mini-qr img,.mini-qr canvas{max-width:100%!important;height:auto!important}.mini-title{font-weight:800;font-size:15px;margin:3px 0}.mini-code{font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;margin-top:5px}.public-state{min-height:100vh;display:grid;place-items:center;padding:22px;background:#f6f7fb}.public-card{max-width:440px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;text-align:center;box-shadow:var(--shadow)}.public-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin:0 auto 14px;background:#fffaeb;font-size:28px}.public-card h1{margin:0 0 8px}.public-card p{color:var(--muted)}@media(max-width:1000px){.stock-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar-open .sidebar{transform:none}.main{margin-left:0}.menu-btn{display:inline-block}.cards{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.print-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.content{padding:18px}.topbar{padding:0 18px}.cards,.stock-grid,.print-grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.url-row{grid-template-columns:1fr}.sticker-page{padding:12px}.sticker{width:100%;min-height:auto}}@media print{body{background:#fff}.sticker-toolbar,.url-box{display:none!important}.sticker-page{padding:0;background:#fff}.sticker{box-shadow:none;width:88mm;min-height:112mm;border:1px solid #ddd;margin:0 auto;page-break-inside:avoid}.print-grid{grid-template-columns:repeat(3,1fr);gap:4mm}.mini-sticker{box-shadow:none}}
.nav-divider{height:1px;background:#344054;margin:8px 10px}.admin-chip strong,.admin-chip small{display:block}.admin-chip small{color:#98a2b3;margin-top:3px}.user-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}.user-form{margin:0;position:sticky;top:92px}.inline-form{display:inline-flex;margin:0}.check-row{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;font-weight:700}.check-row input{width:auto}.badge.off{background:#f2f4f7;color:#475467}@media(max-width:1100px){.user-layout{grid-template-columns:1fr}.user-form{position:static;max-width:none}}

/* Password show/hide */
.password-control{position:relative;width:100%}.password-control input{padding-right:46px!important}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:#667085;display:grid;place-items:center;cursor:pointer}.password-toggle:hover{background:#f2f4f7;color:#182230}.password-toggle:focus-visible{outline:2px solid #84adff;outline-offset:1px}.password-toggle svg{width:20px;height:20px;fill:currentColor}.password-toggle.is-visible{color:#155eef}
.password-toggle.is-visible::after{content:"";position:absolute;width:23px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}

/* Manajemen User v1.3.0 */
.user-section-head{margin-top:0}.user-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.user-summary-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 3px 14px rgba(16,24,40,.035)}.user-summary-card span{font-size:13px;color:var(--muted);font-weight:700}.user-summary-card strong{font-size:24px;line-height:1;color:var(--dark)}.user-editor-card{margin:0 0 18px}.user-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.user-editor-head h2{margin:0 0 4px}.user-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}.user-check-group{display:flex;gap:16px;align-items:center;min-height:64px;padding-top:18px;flex-wrap:wrap}.user-check-group .check-row{margin-top:0}.user-form-actions{margin-top:14px;padding-top:14px}.user-table-wrap{border-radius:16px;box-shadow:0 4px 18px rgba(16,24,40,.04)}.user-table{min-width:1120px}.user-table thead th{position:sticky;top:0;z-index:2;background:#f8fafc}.user-table tbody tr:hover{background:#fafcff}.user-row-pending{background:#fffdf5}.user-name-cell{display:grid;gap:3px;min-width:150px}.user-name-cell span{font-size:12px;color:var(--muted)}.user-source{display:inline-flex;align-items:center;min-height:26px;padding:3px 8px;border-radius:8px;background:#f2f4f7;font-size:12px;font-weight:700;color:#475467}.user-store-count{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:#eff4ff;color:#155eef;font-weight:800}.user-last-login{white-space:nowrap;font-size:12px!important}.user-action-col{width:176px;text-align:center!important}.user-icon-actions{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap}.icon-action{width:34px;height:34px;min-width:34px;padding:0;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#475467;display:inline-grid;place-items:center;cursor:pointer;transition:.15s ease}.icon-action svg{width:18px;height:18px;fill:currentColor}.icon-action:hover{background:#f2f4f7;color:#101828;transform:translateY(-1px)}.icon-action.success{background:#ecfdf3;border-color:#abefc6;color:#027a48}.icon-action.success:hover{background:#d1fadf}.icon-action.warning{background:#fffaeb;border-color:#fedf89;color:#b54708}.icon-action.warning:hover{background:#fef0c7}.icon-action.danger{background:#fff5f4;border-color:#fecdca;color:#d92d20}.icon-action.danger:hover{background:#fee4e2}.icon-action.protected{cursor:default;background:#f2f4f7;border-color:#eaecf0;color:#98a2b3}.icon-action.protected:hover{transform:none;background:#f2f4f7;color:#98a2b3}
@media(max-width:1200px){.user-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.user-summary-grid{grid-template-columns:1fr}.user-form-grid{grid-template-columns:1fr}.user-editor-head{flex-direction:column}.user-check-group{padding-top:0;min-height:0}.user-table{min-width:980px}}

/* =========================================================
   Tokoku UI v1.3.2 - Local Font Awesome + Light/Dark Theme
   Font Awesome dimuat lokal dari /fontawesome/css + /webfonts.
   ========================================================= */
:root{
  --sidebar-bg:#101828;
  --sidebar-hover:#1d2939;
  --sidebar-active:#263b5f;
  --sidebar-text:#d0d5dd;
  --sidebar-muted:#98a2b3;
  --topbar-bg:rgba(255,255,255,.92);
  --input-bg:#fff;
  --soft-bg:#f8fafc;
  --soft-bg-2:#f2f4f7;
  --hover-bg:#fafcff;
  --focus-ring:rgba(21,94,239,.13);
  --icon-surface:#eff4ff;
}
html[data-theme="dark"]{
  --bg:#0b1220;
  --card:#111827;
  --text:#e7edf6;
  --muted:#9aa7ba;
  --line:#253247;
  --primary:#6b9cff;
  --primary2:#4b83f5;
  --danger:#ff7b72;
  --ok:#47d7a1;
  --warn:#f7b955;
  --shadow:0 14px 38px rgba(0,0,0,.28);
  --sidebar-bg:#080f1d;
  --sidebar-hover:#152033;
  --sidebar-active:#1d3358;
  --topbar-bg:rgba(11,18,32,.90);
  --input-bg:#0e1728;
  --soft-bg:#151f30;
  --soft-bg-2:#1a2638;
  --hover-bg:#152033;
  --focus-ring:rgba(107,156,255,.17);
  --icon-surface:#15294a;
}

/* Sidebar iconography */
.sidebar{background:var(--sidebar-bg)}
.brand{border-radius:14px;margin-bottom:4px}
.brand-mark{background:linear-gradient(145deg,#2e90fa,#155eef);box-shadow:0 8px 20px rgba(21,94,239,.28);font-size:18px}
.brand-mark i,.nav-icon i,.topbar-app-icon i,.logout-icon i,.theme-toggle i,.menu-btn i{line-height:1}
.sidebar nav{gap:6px}
.sidebar nav a.nav-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid transparent;color:var(--sidebar-text);transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.sidebar nav a.nav-link:hover{background:var(--sidebar-hover);color:#fff;transform:translateX(2px)}
.sidebar nav a.nav-link.active{background:var(--sidebar-active);border-color:rgba(132,173,255,.18);color:#fff;box-shadow:inset 3px 0 0 #53b1fd}
.nav-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.055);font-size:14px;flex:0 0 28px}
.nav-link.active .nav-icon{background:rgba(83,177,253,.16);color:#84caff}
.nav-divider{background:rgba(255,255,255,.13)}

/* User + logout in one line */
.sidebar-bottom{padding-top:13px}
.sidebar-account-row{display:flex;align-items:center;gap:8px;padding:2px 4px}
.admin-chip{min-width:0;flex:1;padding:7px 7px}
.admin-name-line{display:flex;align-items:center;gap:8px;min-width:0}
.admin-name-line i{color:#84caff;font-size:16px}
.admin-name-line strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:10px;color:#fda29b;background:rgba(217,45,32,.08);border:1px solid rgba(253,162,155,.15);transition:.16s ease}
.logout-icon:hover{background:rgba(217,45,32,.20);color:#fff;transform:translateY(-1px)}

/* Permanent app icon + theme switcher on top header */
.topbar{background:var(--topbar-bg);color:var(--text)}
.topbar-app-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--icon-surface);color:var(--primary);font-size:17px;box-shadow:inset 0 0 0 1px rgba(132,173,255,.18)}
.topbar-heading{min-width:0}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.theme-toggle{min-height:38px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.16s ease}
.theme-toggle:hover{background:var(--soft-bg);transform:translateY(-1px)}
.theme-toggle i{width:16px;text-align:center;color:var(--primary)}
.menu-btn{color:var(--text);background:var(--card)}

/* Local Font Awesome action icons */
.icon-action i{font-size:15px;line-height:1}
.password-toggle i{font-size:17px;line-height:1}
.password-toggle.is-visible::after{display:none}

/* Dashboard metrics */
.metric-card-modern{display:flex;align-items:center;gap:14px}
.metric-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;border-radius:12px;background:var(--icon-surface);color:var(--primary);font-size:18px}
.metric-content{min-width:0}

/* Login */
.login-logo{font-size:20px;background:linear-gradient(145deg,#101828,#263b5f)}
.login-theme-toggle{position:fixed;top:18px;right:18px;z-index:20}

/* Generic dark surfaces. Print/sticker surfaces intentionally remain light. */
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .main{background:var(--bg)}
html[data-theme="dark"] :is(.card,.form-card,.table-wrap,.stock-card,.url-box,.public-card,.login-card,.user-summary-card,.user-editor-card){background:var(--card);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] :is(.field input,.field textarea,.field select){background:var(--input-bg);border-color:#34445d;color:var(--text);color-scheme:dark}
html[data-theme="dark"] :is(.field input,.field textarea,.field select):focus{border-color:#6b9cff;box-shadow:0 0 0 4px var(--focus-ring)}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#7f8da3}
html[data-theme="dark"] .table th{background:var(--soft-bg);color:var(--muted)}
html[data-theme="dark"] .table td{border-color:var(--line)}
html[data-theme="dark"] .user-table thead th{background:var(--soft-bg)}
html[data-theme="dark"] .user-table tbody tr:hover{background:var(--hover-bg)}
html[data-theme="dark"] .user-row-pending{background:#211c10}
html[data-theme="dark"] .user-summary-card strong{color:var(--text)}
html[data-theme="dark"] .user-source{background:var(--soft-bg-2);color:#c1ccda}
html[data-theme="dark"] .user-store-count{background:var(--icon-surface);color:#9fc0ff}
html[data-theme="dark"] .icon-action{background:var(--card);border-color:#34445d;color:#c1ccda}
html[data-theme="dark"] .icon-action:hover{background:var(--soft-bg-2);color:#fff}
html[data-theme="dark"] .icon-action.protected{background:var(--soft-bg-2);border-color:var(--line);color:#66758b}
html[data-theme="dark"] .btn.secondary{background:var(--card);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .btn.secondary:hover{background:var(--soft-bg)}
html[data-theme="dark"] .password-toggle{color:#9aa7ba}
html[data-theme="dark"] .password-toggle:hover{background:var(--soft-bg-2);color:#fff}
html[data-theme="dark"] .alert.success{background:#0c2b22;color:#6ce9b7;border-color:#176b52}
html[data-theme="dark"] .alert.danger{background:#321512;color:#fda29b;border-color:#7a271a}
html[data-theme="dark"] .badge.off{background:#1d2939;color:#b3becd}
html[data-theme="dark"] .badge.warn{background:#35280d;color:#fec84b}
html[data-theme="dark"] .badge.ok{background:#0d2922;color:#6ce9b7}
html[data-theme="dark"] .badge.danger-badge{background:#341714;color:#fda29b}
html[data-theme="dark"] .login-shell{background:radial-gradient(circle at top,#14213a 0,#0b1220 45%,#070d18 100%)}
html[data-theme="dark"] .public-state{background:var(--bg)}

@media(max-width:600px){
  .theme-toggle span{display:none}
  .theme-toggle{width:38px;padding:0;justify-content:center}
  .topbar-app-icon{width:34px;height:34px;flex:0 0 34px}
  .topbar{gap:9px}
}

/* TOKOKU MODERN UI v1.4.0 */
:root{--tokoku-yellow:#ffc43d;--tokoku-yellow-2:#ffb703;--tokoku-ink:#171717;--tokoku-radius-xl:26px;--tokoku-radius-lg:20px;--tokoku-radius-md:15px;--tokoku-ease:cubic-bezier(.2,.8,.2,1);--bg:#f5f5f2;--card:#fff;--text:#191919;--muted:#727272;--line:#e7e4dc;--primary:#d99400;--primary2:#b97800;--dark:#171717;--sidebar-bg:#171717;--sidebar-hover:#252525;--sidebar-active:#2e2a20;--topbar-bg:rgba(250,250,247,.90);--icon-surface:#fff0bf;--soft-bg:#faf9f5;--soft-bg-2:#f1efe8;--hover-bg:#fffaf0;--shadow:0 16px 46px rgba(24,24,24,.08)}
html[data-theme="dark"]{--bg:#111;--card:#1b1b1b;--text:#f5f3ed;--muted:#aaa69d;--line:#303030;--primary:#ffc43d;--primary2:#ffb703;--sidebar-bg:#121212;--sidebar-hover:#202020;--sidebar-active:#2a2519;--topbar-bg:rgba(18,18,18,.90);--input-bg:#202020;--soft-bg:#202020;--soft-bg-2:#282828;--hover-bg:#25231e;--icon-surface:#332a10;--shadow:0 18px 48px rgba(0,0,0,.28)}
html{scroll-behavior:smooth}body.tokoku-ui{background:var(--bg);min-height:100vh;letter-spacing:-.005em}body.tokoku-ui::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 4%,rgba(255,196,61,.11),transparent 26%),radial-gradient(circle at 15% 90%,rgba(255,196,61,.06),transparent 28%);z-index:-1}
body.tokoku-ui .sidebar{width:276px;padding:20px 16px 16px;background:var(--sidebar-bg);border-right:1px solid rgba(255,255,255,.06);box-shadow:14px 0 36px rgba(0,0,0,.06)}body.tokoku-ui .main{margin-left:276px;background:transparent}body.tokoku-ui .brand{gap:13px;padding:6px 8px 22px;margin:0 0 4px;border-radius:18px}body.tokoku-ui .brand-mark{width:46px;height:46px;border-radius:15px;background:var(--tokoku-yellow);color:var(--tokoku-ink);font-size:20px;box-shadow:0 10px 24px rgba(255,196,61,.2)}body.tokoku-ui .brand-copy strong{font-size:18px;letter-spacing:-.02em;color:#fff}body.tokoku-ui .brand-copy small{font-size:11px;color:#999;margin-top:3px}body.tokoku-ui .nav-caption{padding:16px 12px 7px;color:#717171;font-size:10px;font-weight:800;letter-spacing:.14em}body.tokoku-ui .nav-caption-system{margin-top:8px}body.tokoku-ui .side-nav{display:grid;gap:5px}body.tokoku-ui .side-nav .nav-link{min-height:46px;display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:14px;color:#c8c8c8;border:1px solid transparent;transition:all .2s var(--tokoku-ease)}body.tokoku-ui .side-nav .nav-link:hover{background:#232323;color:#fff;transform:translateX(2px)}body.tokoku-ui .side-nav .nav-link.active{background:linear-gradient(135deg,#332b14,#28251d);border-color:rgba(255,196,61,.16);color:#fff;box-shadow:inset 3px 0 0 var(--tokoku-yellow)}body.tokoku-ui .nav-icon{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.055);display:grid;place-items:center;color:#a7a7a7;font-size:14px;transition:all .2s var(--tokoku-ease)}body.tokoku-ui .nav-link.active .nav-icon{background:var(--tokoku-yellow);color:var(--tokoku-ink);transform:scale(1.03)}
body.tokoku-ui .sidebar-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:14px}body.tokoku-ui .sidebar-account-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:rgba(255,255,255,.035)}body.tokoku-ui .avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#292929;color:var(--tokoku-yellow);flex:0 0 38px}body.tokoku-ui .admin-chip{padding:0;min-width:0;flex:1}body.tokoku-ui .admin-chip strong,body.tokoku-ui .admin-chip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.tokoku-ui .admin-chip strong{font-size:13px;color:#fff}body.tokoku-ui .admin-chip small{font-size:10px;color:#8e8e8e;margin-top:2px}body.tokoku-ui .logout-icon{width:38px;height:38px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.08);color:#bbb}body.tokoku-ui .logout-icon:hover{background:#3a1f1d;border-color:#5f2b27;color:#ff9f95;transform:none}
body.tokoku-ui .topbar{height:76px;padding:0 28px;background:var(--topbar-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}body.tokoku-ui .topbar-app-icon{width:42px;height:42px;border-radius:14px;background:var(--tokoku-ink);color:var(--tokoku-yellow);box-shadow:none}html[data-theme="dark"] body.tokoku-ui .topbar-app-icon{background:var(--tokoku-yellow);color:var(--tokoku-ink)}body.tokoku-ui .topbar-heading strong{font-size:15px;font-weight:850;letter-spacing:-.01em}body.tokoku-ui .topbar-heading small{font-size:10.5px;margin-top:3px}body.tokoku-ui .status-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:11px;color:var(--muted)}body.tokoku-ui .status-pill i{font-size:7px;color:#19a974}body.tokoku-ui .theme-toggle{height:40px;border-radius:13px;padding:0 13px;background:var(--card);box-shadow:none}body.tokoku-ui .theme-toggle:hover{background:var(--soft-bg-2);transform:none}body.tokoku-ui .theme-toggle i{color:var(--primary)}body.tokoku-ui .content{padding:30px;max-width:1500px}body.tokoku-ui .page-enter{animation:tokokuPageIn .34s var(--tokoku-ease) both}@keyframes tokokuPageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
body.tokoku-ui .hero{position:relative;overflow:hidden;border-radius:30px;padding:32px;background:linear-gradient(140deg,#1c1c1c,#272727);box-shadow:0 22px 50px rgba(17,17,17,.16);border:1px solid rgba(255,255,255,.04)}body.tokoku-ui .hero::after{content:"\f029";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:34px;top:50%;transform:translateY(-50%) rotate(-7deg);font-size:138px;color:rgba(255,196,61,.08);pointer-events:none}body.tokoku-ui .hero h1{font-size:32px;line-height:1.1;max-width:650px}body.tokoku-ui .hero p{color:#bdbdbd;line-height:1.65;max-width:720px}body.tokoku-ui .hero .btn{background:var(--tokoku-yellow);color:var(--tokoku-ink);border:none;min-height:46px;border-radius:14px;position:relative;z-index:1}body.tokoku-ui .hero .btn:hover{background:#ffd36a;transform:translateY(-1px)}
body.tokoku-ui .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 26px}body.tokoku-ui .card,body.tokoku-ui .form-card,body.tokoku-ui .table-wrap{border:1px solid var(--line);border-radius:var(--tokoku-radius-lg);background:var(--card);box-shadow:0 5px 20px rgba(20,20,20,.035)}body.tokoku-ui .card{padding:18px}body.tokoku-ui .metric-card-modern{position:relative;overflow:hidden;min-height:104px;transition:transform .22s var(--tokoku-ease),box-shadow .22s var(--tokoku-ease)}body.tokoku-ui .metric-card-modern:hover{transform:translateY(-3px);box-shadow:var(--shadow)}body.tokoku-ui .metric-icon{width:48px;height:48px;border-radius:15px;background:var(--icon-surface);color:var(--primary);font-size:18px}body.tokoku-ui .metric-value{font-size:28px;margin-top:4px;letter-spacing:-.035em}body.tokoku-ui .metric-label{font-size:12px}body.tokoku-ui .section-head{margin:28px 2px 12px}body.tokoku-ui .section-head h2{font-size:20px;font-weight:850;letter-spacing:-.025em}
body.tokoku-ui .table-wrap{overflow:auto}body.tokoku-ui .table{min-width:930px}body.tokoku-ui .table th{position:sticky;top:0;z-index:2;background:var(--soft-bg);font-size:10.5px;letter-spacing:.09em;padding:13px 15px}body.tokoku-ui .table td{padding:14px 15px;font-size:13px}body.tokoku-ui .table tbody tr{transition:background .15s ease}body.tokoku-ui .table tbody tr:hover{background:var(--hover-bg)}body.tokoku-ui .badge{border-radius:999px;padding:5px 9px;font-size:10.5px;letter-spacing:.01em}
body.tokoku-ui .form-card{border-radius:26px;padding:24px}body.tokoku-ui .form-card h1{font-size:24px;letter-spacing:-.03em}body.tokoku-ui .form-card h2{letter-spacing:-.02em}body.tokoku-ui .form-grid{gap:16px}body.tokoku-ui .field label{font-size:11px;letter-spacing:.01em;margin-bottom:7px}body.tokoku-ui .field input,body.tokoku-ui .field textarea,body.tokoku-ui .field select,body.tokoku-ui .filter-control{min-height:46px;border:1px solid var(--line);border-radius:14px;background:var(--input-bg,#fff);color:var(--text);padding:11px 13px;transition:border .16s ease,box-shadow .16s ease}body.tokoku-ui .field input:focus,body.tokoku-ui .field textarea:focus,body.tokoku-ui .field select:focus,body.tokoku-ui .filter-control:focus{border-color:#e4aa20;box-shadow:0 0 0 4px rgba(255,196,61,.16)}body.tokoku-ui .btn{min-height:42px;border-radius:13px;padding:9px 14px;transition:all .18s var(--tokoku-ease);font-size:12px}body.tokoku-ui .btn:hover{transform:translateY(-1px)}body.tokoku-ui .btn.primary{background:var(--tokoku-yellow);color:var(--tokoku-ink);border:1px solid #f0b92d}body.tokoku-ui .btn.primary:hover{background:#ffd063}body.tokoku-ui .btn.secondary{background:var(--card);color:var(--text);border:1px solid var(--line)}body.tokoku-ui .btn.secondary:hover{background:var(--soft-bg-2)}body.tokoku-ui .actions{gap:6px}body.tokoku-ui .actions .btn.sm{width:36px;height:36px;min-height:36px;padding:0;border-radius:11px;font-size:13px}body.tokoku-ui .actions .btn.sm .action-label{display:none}body.tokoku-ui .icon-action{width:36px;height:36px;border-radius:11px}body.tokoku-ui .password-control input{padding-right:46px}body.tokoku-ui .password-toggle{width:36px;height:36px;right:5px;border-radius:10px}
body.tokoku-ui .alert{border-radius:16px;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;box-shadow:none}body.tokoku-ui .alert i{margin-top:2px}body.tokoku-ui .user-summary-grid{gap:13px}body.tokoku-ui .user-summary-card{border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:none;transition:transform .18s var(--tokoku-ease)}body.tokoku-ui .user-summary-card:hover{transform:translateY(-2px)}body.tokoku-ui .user-editor-card{margin-top:16px}body.tokoku-ui .user-row-pending{background:rgba(255,196,61,.07)}
body.tokoku-ui .login-shell{min-height:100vh;background:radial-gradient(circle at 50% 0,#ffe28d 0,#f7f5ee 30%,#efefec 68%);padding:24px}html[data-theme="dark"] body.tokoku-ui .login-shell{background:radial-gradient(circle at 50% 0,#4a3906 0,#171717 30%,#0f0f0f 72%)}body.tokoku-ui .login-card{position:relative;overflow:hidden;border-radius:30px;padding:0;max-width:430px;box-shadow:0 26px 70px rgba(20,20,20,.15);border:1px solid rgba(255,255,255,.18)}body.tokoku-ui .login-card::before{content:"";display:block;height:148px;background:#202020}body.tokoku-ui .login-logo{position:absolute;top:32px;left:30px;width:58px;height:58px;border-radius:18px;background:var(--tokoku-yellow);color:var(--tokoku-ink);display:grid;place-items:center;font-size:24px;box-shadow:0 10px 25px rgba(255,196,61,.2)}body.tokoku-ui .login-card h1{margin:-52px 28px 36px;color:#fff;font-size:28px;position:relative;left:74px;max-width:270px;letter-spacing:-.035em}body.tokoku-ui .login-subtitle{margin:0 28px 18px;color:var(--muted);font-size:12px;line-height:1.55}body.tokoku-ui .login-card>.alert,body.tokoku-ui .login-card>.field,body.tokoku-ui .login-card>.btn,body.tokoku-ui .login-card>.help{margin-left:28px;margin-right:28px}body.tokoku-ui .login-card>.btn{width:calc(100% - 56px);margin-top:8px;margin-bottom:12px;min-height:50px}body.tokoku-ui .login-card>.help{margin-bottom:26px!important}
body.tokoku-ui .filter-card{padding:12px 14px;margin-bottom:14px;border-radius:18px}body.tokoku-ui .filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}body.tokoku-ui .filter-search{position:relative;flex:1;min-width:250px}body.tokoku-ui .filter-search>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:1;color:var(--muted);font-size:12px}body.tokoku-ui .filter-search .filter-control{width:100%;padding-left:36px}body.tokoku-ui .filter-select{min-width:170px}.sidebar-scrim{display:none}
@media(max-width:1120px){body.tokoku-ui .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){body.tokoku-ui .sidebar{transform:translateX(-105%);transition:transform .24s var(--tokoku-ease);box-shadow:30px 0 60px rgba(0,0,0,.28)}body.sidebar-open .sidebar{transform:translateX(0)}body.tokoku-ui .main{margin-left:0}body.tokoku-ui .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:13px}body.tokoku-ui .sidebar-scrim{display:block;position:fixed;inset:0;border:0;background:rgba(0,0,0,.42);z-index:45;opacity:0;pointer-events:none;transition:opacity .2s ease}body.sidebar-open .sidebar-scrim{opacity:1;pointer-events:auto}body.tokoku-ui .content{padding:20px}body.tokoku-ui .topbar{padding:0 18px}}
@media(max-width:620px){body.tokoku-ui .cards{grid-template-columns:1fr}body.tokoku-ui .hero{padding:24px;border-radius:24px;display:block}body.tokoku-ui .hero h1{font-size:26px}body.tokoku-ui .hero .btn{margin-top:18px;width:100%}body.tokoku-ui .form-card{padding:18px;border-radius:22px}body.tokoku-ui .form-grid{grid-template-columns:1fr}body.tokoku-ui .field.full{grid-column:auto}body.tokoku-ui .status-pill{display:none}body.tokoku-ui .theme-toggle span{display:none}body.tokoku-ui .theme-toggle{width:40px;padding:0;justify-content:center}body.tokoku-ui .topbar-app-icon{display:none}body.tokoku-ui .content{padding:16px}body.tokoku-ui .filter-row>*{width:100%}body.tokoku-ui .filter-search{min-width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ======================================================================
   TOKOKU PASTEL SCANNER UI v1.4.1
   Inspired by dashboard_toko_scanner: pastel mesh + glassmorphism.
   This block intentionally overrides v1.4.0 without breaking print pages.
   ====================================================================== */
:root{
  --pastel-purple:#c084fc;
  --pastel-purple-2:#a855f7;
  --pastel-pink:#f472b6;
  --pastel-pink-soft:#fdf2f8;
  --pastel-blue:#60a5fa;
  --pastel-blue-soft:#eff6ff;
  --pastel-mint:#34d399;
  --pastel-mint-soft:#ecfdf5;
  --pastel-yellow:#fbbf24;
  --pastel-yellow-soft:#fffbeb;
  --bg:#fbf8ff;
  --card:rgba(255,255,255,.70);
  --text:#30313d;
  --muted:#747789;
  --line:rgba(255,255,255,.82);
  --primary:#a855f7;
  --primary2:#9333ea;
  --sidebar-bg:rgba(255,255,255,.62);
  --sidebar-text:#666979;
  --sidebar-hover:rgba(255,255,255,.66);
  --sidebar-active:rgba(255,255,255,.86);
  --topbar-bg:rgba(255,255,255,.64);
  --input-bg:rgba(255,255,255,.82);
  --input-text:#252733;
  --placeholder:#9ca0ae;
  --soft-bg:rgba(255,255,255,.55);
  --soft-bg-2:rgba(250,245,255,.84);
  --hover-bg:rgba(255,255,255,.56);
  --icon-surface:#f7ecff;
  --focus-ring:rgba(192,132,252,.20);
  --shadow:0 10px 34px rgba(168,85,247,.10);
  --glass-shadow:0 8px 32px rgba(168,85,247,.13);
}
html[data-theme="dark"]{
  --bg:#14131a;
  --card:rgba(31,29,39,.78);
  --text:#f4f1f8;
  --muted:#aaa6b5;
  --line:rgba(255,255,255,.10);
  --primary:#d8b4fe;
  --primary2:#c084fc;
  --sidebar-bg:rgba(26,24,33,.83);
  --sidebar-text:#bbb6c5;
  --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active:rgba(192,132,252,.15);
  --topbar-bg:rgba(24,22,31,.72);
  --input-bg:#24222b;
  --input-text:#f7f4fa;
  --placeholder:#898492;
  --soft-bg:#211f28;
  --soft-bg-2:#2a2731;
  --hover-bg:rgba(255,255,255,.055);
  --icon-surface:rgba(192,132,252,.15);
  --focus-ring:rgba(216,180,254,.18);
  --shadow:0 14px 38px rgba(0,0,0,.22);
  --glass-shadow:0 10px 36px rgba(0,0,0,.28);
}

/* Mesh background like the supplied scanner dashboard. */
body.tokoku-ui{
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(at 0% 0%,rgba(244,114,182,.20) 0,transparent 42%),
    radial-gradient(at 48% 0%,rgba(192,132,252,.19) 0,transparent 45%),
    radial-gradient(at 100% 4%,rgba(96,165,250,.18) 0,transparent 42%),
    radial-gradient(at 78% 92%,rgba(52,211,153,.08) 0,transparent 34%);
  background-attachment:fixed;
}
html[data-theme="dark"] body.tokoku-ui{
  background-image:
    radial-gradient(at 0% 0%,rgba(244,114,182,.10) 0,transparent 38%),
    radial-gradient(at 52% 0%,rgba(168,85,247,.14) 0,transparent 42%),
    radial-gradient(at 100% 0%,rgba(96,165,250,.10) 0,transparent 40%);
}
body.tokoku-ui::before{display:none!important}

/* Glass shell */
body.tokoku-ui .sidebar,
body.tokoku-ui .topbar,
body.tokoku-ui .card,
body.tokoku-ui .form-card,
body.tokoku-ui .table-wrap,
body.tokoku-ui .user-summary-card,
body.tokoku-ui .login-card,
body.tokoku-ui .dashboard-welcome,
body.tokoku-ui .dashboard-quick-panel{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Sidebar becomes light/pastel and closer to the reference dashboard. */
body.tokoku-ui .sidebar{
  width:268px;
  padding:18px 14px 16px;
  color:var(--text);
  border-right:1px solid rgba(255,255,255,.55);
}
body.tokoku-ui .main{margin-left:268px}
body.tokoku-ui .brand{
  padding:9px 10px 18px;
  border-bottom:1px solid rgba(255,255,255,.54);
  margin-bottom:8px;
}
body.tokoku-ui .brand-mark{
  width:44px;height:44px;border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--pastel-pink),var(--pastel-purple));
  box-shadow:0 8px 22px rgba(192,132,252,.25);
}
body.tokoku-ui .brand-copy strong{
  color:var(--text);
  background:linear-gradient(90deg,var(--pastel-pink),var(--pastel-purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:20px;
}
body.tokoku-ui .brand-copy small{color:var(--muted)}
body.tokoku-ui .nav-caption{color:var(--muted);font-size:9.5px;padding:14px 12px 6px}
body.tokoku-ui .side-nav .nav-link{
  color:var(--sidebar-text);
  border-radius:14px;
  min-height:46px;
  padding:8px 10px;
}
body.tokoku-ui .side-nav .nav-link:hover{
  color:var(--text);background:var(--sidebar-hover);transform:translateX(2px);
}
body.tokoku-ui .side-nav .nav-link.active{
  color:var(--primary2);
  background:var(--sidebar-active);
  border-color:rgba(192,132,252,.18);
  box-shadow:0 6px 18px rgba(168,85,247,.08);
}
body.tokoku-ui .nav-icon{
  background:rgba(255,255,255,.48);color:var(--muted);
  border:1px solid rgba(255,255,255,.58);
}
body.tokoku-ui .nav-link.active .nav-icon{
  background:linear-gradient(135deg,#fdf2f8,#faf5ff);
  color:var(--primary2);transform:scale(1.03);
}
html[data-theme="dark"] body.tokoku-ui .nav-link.active .nav-icon{background:rgba(192,132,252,.16);color:#e9d5ff}
body.tokoku-ui .sidebar-bottom{border-top:1px solid var(--line)}
body.tokoku-ui .sidebar-account-row{background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.48)}
html[data-theme="dark"] body.tokoku-ui .sidebar-account-row{background:rgba(255,255,255,.035)}
body.tokoku-ui .avatar{background:linear-gradient(135deg,var(--pastel-purple),var(--pastel-pink));color:#fff}
body.tokoku-ui .admin-chip strong{color:var(--text)}
body.tokoku-ui .admin-chip small{color:var(--muted)}
body.tokoku-ui .logout-icon{color:#ef6f87;background:rgba(244,114,182,.08);border-color:rgba(244,114,182,.14)}
body.tokoku-ui .logout-icon:hover{color:#fff;background:#ef6f87;border-color:#ef6f87}

/* Header */
body.tokoku-ui .topbar{height:68px;padding:0 24px;box-shadow:0 5px 24px rgba(91,73,113,.05)}
body.tokoku-ui .topbar-app-icon{
  background:linear-gradient(135deg,#faf5ff,#fdf2f8);color:var(--primary2);
  border:1px solid rgba(192,132,252,.17);width:40px;height:40px;border-radius:13px;
}
html[data-theme="dark"] body.tokoku-ui .topbar-app-icon{background:rgba(192,132,252,.15);color:#e9d5ff}
body.tokoku-ui .topbar-heading strong{font-size:16px;color:var(--text)}
body.tokoku-ui .status-pill{background:rgba(255,255,255,.52);border-color:var(--line)}
body.tokoku-ui .theme-toggle{background:rgba(255,255,255,.52);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] body.tokoku-ui .theme-toggle,
html[data-theme="dark"] body.tokoku-ui .status-pill{background:rgba(255,255,255,.045)}
body.tokoku-ui .theme-toggle i{color:var(--primary2)}

/* ======================================================================
   CRITICAL FORM VISIBILITY FIX - entire web, light/dark/autofill.
   ====================================================================== */
body.tokoku-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.tokoku-ui textarea,
body.tokoku-ui select,
body.tokoku-ui .filter-control{
  background:var(--input-bg)!important;
  color:var(--input-text)!important;
  -webkit-text-fill-color:var(--input-text)!important;
  caret-color:var(--primary2)!important;
  border:1px solid rgba(151,142,162,.28)!important;
  color-scheme:light;
}
html[data-theme="dark"] body.tokoku-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] body.tokoku-ui textarea,
html[data-theme="dark"] body.tokoku-ui select,
html[data-theme="dark"] body.tokoku-ui .filter-control{color-scheme:dark}
body.tokoku-ui input::placeholder,
body.tokoku-ui textarea::placeholder{color:var(--placeholder)!important;-webkit-text-fill-color:var(--placeholder)!important;opacity:1}
body.tokoku-ui select option{background:var(--card);color:var(--input-text)}
body.tokoku-ui input:disabled,
body.tokoku-ui textarea:disabled,
body.tokoku-ui select:disabled{opacity:.72;cursor:not-allowed}
body.tokoku-ui input:-webkit-autofill,
body.tokoku-ui input:-webkit-autofill:hover,
body.tokoku-ui input:-webkit-autofill:focus,
body.tokoku-ui textarea:-webkit-autofill,
body.tokoku-ui select:-webkit-autofill{
  -webkit-text-fill-color:var(--input-text)!important;
  caret-color:var(--primary2)!important;
  -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset!important;
  box-shadow:0 0 0 1000px var(--input-bg) inset!important;
  transition:background-color 9999s ease-out 0s;
}
body.tokoku-ui .field input:focus,
body.tokoku-ui .field textarea:focus,
body.tokoku-ui .field select:focus,
body.tokoku-ui .filter-control:focus{
  border-color:rgba(168,85,247,.62)!important;
  box-shadow:0 0 0 4px var(--focus-ring)!important;
}
body.tokoku-ui .password-toggle{color:var(--muted);background:transparent}
body.tokoku-ui .password-toggle:hover{background:rgba(192,132,252,.10);color:var(--primary2)}

/* Buttons / cards */
body.tokoku-ui .btn{border-radius:13px;font-weight:700}
body.tokoku-ui .btn.primary,
body.tokoku-ui .glass-button{
  color:#fff;
  background:linear-gradient(135deg,var(--pastel-pink),var(--pastel-purple));
  border:0;
  box-shadow:0 7px 18px rgba(192,132,252,.22);
}
body.tokoku-ui .btn.primary:hover{background:linear-gradient(135deg,#ec67aa,#aa66ea);transform:translateY(-2px);box-shadow:0 10px 22px rgba(192,132,252,.29)}
body.tokoku-ui .btn.secondary{background:rgba(255,255,255,.58);color:var(--text);border:1px solid var(--line)}
html[data-theme="dark"] body.tokoku-ui .btn.secondary{background:rgba(255,255,255,.04)}
body.tokoku-ui .card,body.tokoku-ui .form-card,body.tokoku-ui .table-wrap{border-radius:22px}
body.tokoku-ui .metric-card-modern{min-height:112px}
body.tokoku-ui .metric-icon{border-radius:14px;background:var(--pastel-purple);color:#fff}
body.tokoku-ui .cards .metric-card-modern:nth-child(1) .metric-icon{background:#f9a8d4}
body.tokoku-ui .cards .metric-card-modern:nth-child(2) .metric-icon{background:#93c5fd}
body.tokoku-ui .cards .metric-card-modern:nth-child(3) .metric-icon{background:#86efac}
body.tokoku-ui .cards .metric-card-modern:nth-child(4) .metric-icon{background:#d8b4fe}
body.tokoku-ui .metric-card-modern:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(168,85,247,.15)}
body.tokoku-ui .table th{background:rgba(255,255,255,.42);color:var(--muted)}
html[data-theme="dark"] body.tokoku-ui .table th{background:rgba(255,255,255,.035)}
body.tokoku-ui .table tbody tr:hover{background:rgba(255,255,255,.38)}
html[data-theme="dark"] body.tokoku-ui .table tbody tr:hover{background:rgba(255,255,255,.04)}

/* Dashboard based on dashboard_toko_scanner reference */
body.tokoku-ui .dashboard-welcome{
  position:relative;overflow:hidden;border-radius:26px;padding:26px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
body.tokoku-ui .dashboard-welcome::after{
  content:"\f029";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:34px;top:50%;transform:translateY(-50%) rotate(-8deg);
  font-size:118px;color:rgba(168,85,247,.075);pointer-events:none;
}
body.tokoku-ui .dashboard-kicker{display:flex;align-items:center;gap:8px;color:var(--primary2);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}
body.tokoku-ui .dashboard-kicker i{font-size:9px}
body.tokoku-ui .dashboard-welcome h1{font-size:29px;line-height:1.14;letter-spacing:-.035em;margin:0 0 8px;color:var(--text)}
body.tokoku-ui .dashboard-welcome p{margin:0;color:var(--muted);line-height:1.65;max-width:700px}
body.tokoku-ui .dashboard-welcome-actions{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:1}
body.tokoku-ui .dashboard-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}
body.tokoku-ui .dashboard-quick-panel{border-radius:24px;padding:22px;position:sticky;top:88px;text-align:center;overflow:hidden}
body.tokoku-ui .scanner-orb{width:100px;height:100px;margin:2px auto 16px;border-radius:28px;background:linear-gradient(145deg,#faf5ff,#fdf2f8);display:grid;place-items:center;color:var(--primary2);font-size:45px;box-shadow:inset 0 0 0 1px rgba(192,132,252,.16),0 14px 35px rgba(168,85,247,.12);position:relative}
body.tokoku-ui .scanner-orb::before,body.tokoku-ui .scanner-orb::after{content:"";position:absolute;border-color:var(--pastel-pink);border-style:solid;width:21px;height:21px}
body.tokoku-ui .scanner-orb::before{left:12px;top:12px;border-width:3px 0 0 3px;border-radius:7px 0 0 0}
body.tokoku-ui .scanner-orb::after{right:12px;bottom:12px;border-width:0 3px 3px 0;border-radius:0 0 7px 0}
body.tokoku-ui .dashboard-quick-panel h3{margin:0 0 7px;font-size:18px}
body.tokoku-ui .dashboard-quick-panel p{color:var(--muted);font-size:12px;line-height:1.55;margin:0 0 16px}
body.tokoku-ui .quick-steps{display:grid;gap:8px;text-align:left;margin:16px 0}
body.tokoku-ui .quick-step{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:13px;background:rgba(255,255,255,.44);border:1px solid var(--line);font-size:11.5px;color:var(--muted)}
html[data-theme="dark"] body.tokoku-ui .quick-step{background:rgba(255,255,255,.035)}
body.tokoku-ui .quick-step span{width:26px;height:26px;flex:0 0 26px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#fdf2f8,#faf5ff);color:var(--primary2)}
html[data-theme="dark"] body.tokoku-ui .quick-step span{background:rgba(192,132,252,.13)}

/* Login matches the pastel glass dashboard instead of the old dark block. */
body.tokoku-ui .login-shell{
  min-height:100vh;
  background:
    radial-gradient(at 12% 8%,rgba(244,114,182,.24),transparent 38%),
    radial-gradient(at 50% 0%,rgba(192,132,252,.23),transparent 43%),
    radial-gradient(at 92% 10%,rgba(96,165,250,.19),transparent 38%),#fbf9ff;
}
html[data-theme="dark"] body.tokoku-ui .login-shell{background:radial-gradient(at 15% 0,rgba(168,85,247,.15),transparent 42%),radial-gradient(at 95% 0,rgba(96,165,250,.10),transparent 38%),#121117}
body.tokoku-ui .login-card{padding:30px;border-radius:28px;max-width:440px;overflow:visible}
body.tokoku-ui .login-card::before{display:none}
body.tokoku-ui .login-logo{position:static;width:58px;height:58px;border-radius:18px;margin:0 0 18px;background:linear-gradient(135deg,var(--pastel-pink),var(--pastel-purple));color:#fff;box-shadow:0 12px 28px rgba(192,132,252,.24)}
body.tokoku-ui .login-card h1{position:static;left:auto;margin:0;color:var(--text);font-size:28px;max-width:none}
body.tokoku-ui .login-subtitle{margin:8px 0 18px;color:var(--muted)}
body.tokoku-ui .login-card>.alert,body.tokoku-ui .login-card>.field,body.tokoku-ui .login-card>.btn,body.tokoku-ui .login-card>.help{margin-left:0;margin-right:0}
body.tokoku-ui .login-card>.btn{width:100%;margin-top:12px;margin-bottom:10px;min-height:48px}
body.tokoku-ui .login-card>.help{margin-bottom:0!important}
body.tokoku-ui .login-kicker{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--primary2);margin-bottom:5px}

/* Subtle motion like the sample, kept light. */
body.tokoku-ui .card,body.tokoku-ui .form-card,body.tokoku-ui .table-wrap,body.tokoku-ui .dashboard-welcome,body.tokoku-ui .dashboard-quick-panel{animation:tokokuGlassIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes tokokuGlassIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.tokoku-ui .cards>.card:nth-child(2){animation-delay:.05s}body.tokoku-ui .cards>.card:nth-child(3){animation-delay:.10s}body.tokoku-ui .cards>.card:nth-child(4){animation-delay:.15s}

/* Scrollbar */
body.tokoku-ui ::-webkit-scrollbar{width:7px;height:7px}
body.tokoku-ui ::-webkit-scrollbar-track{background:transparent}
body.tokoku-ui ::-webkit-scrollbar-thumb{background:rgba(168,85,247,.24);border-radius:999px}
body.tokoku-ui ::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.38)}

@media(max-width:1080px){body.tokoku-ui .dashboard-content-grid{grid-template-columns:1fr}body.tokoku-ui .dashboard-quick-panel{position:static}}
@media(max-width:860px){body.tokoku-ui .main{margin-left:0}body.tokoku-ui .sidebar{width:276px}}
@media(max-width:620px){body.tokoku-ui .dashboard-welcome{padding:22px;display:block}body.tokoku-ui .dashboard-welcome h1{font-size:25px}body.tokoku-ui .dashboard-welcome-actions{margin-top:16px}body.tokoku-ui .dashboard-welcome-actions .btn{flex:1}body.tokoku-ui .dashboard-welcome::after{font-size:92px;right:-10px;opacity:.6}}
@media(prefers-reduced-motion:reduce){body.tokoku-ui .card,body.tokoku-ui .form-card,body.tokoku-ui .table-wrap,body.tokoku-ui .dashboard-welcome,body.tokoku-ui .dashboard-quick-panel{animation:none!important}}

/* ======================================================================
   v1.4.2 FINAL FORM TEXT VISIBILITY GUARD
   Explicit colors + browser autofill + cached-theme resistant selectors.
   Keep this block at the END of app.css.
   ====================================================================== */
html[data-theme="light"] body.tokoku-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="light"] body.tokoku-ui textarea,
html[data-theme="light"] body.tokoku-ui select,
html[data-theme="light"] body.tokoku-ui .filter-control {
  color:#252733 !important;
  -webkit-text-fill-color:#252733 !important;
  caret-color:#7c3aed !important;
  background-color:rgba(255,255,255,.94) !important;
  opacity:1 !important;
}

html[data-theme="dark"] body.tokoku-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] body.tokoku-ui textarea,
html[data-theme="dark"] body.tokoku-ui select,
html[data-theme="dark"] body.tokoku-ui .filter-control {
  color:#f7f4fa !important;
  -webkit-text-fill-color:#f7f4fa !important;
  caret-color:#d8b4fe !important;
  background-color:#24222b !important;
  opacity:1 !important;
}

/* Focus/active/typed states must never inherit a white text rule in light mode. */
html[data-theme="light"] body.tokoku-ui input:focus,
html[data-theme="light"] body.tokoku-ui input:active,
html[data-theme="light"] body.tokoku-ui input:not(:placeholder-shown),
html[data-theme="light"] body.tokoku-ui textarea:focus,
html[data-theme="light"] body.tokoku-ui textarea:active,
html[data-theme="light"] body.tokoku-ui select:focus {
  color:#252733 !important;
  -webkit-text-fill-color:#252733 !important;
}

html[data-theme="dark"] body.tokoku-ui input:focus,
html[data-theme="dark"] body.tokoku-ui input:active,
html[data-theme="dark"] body.tokoku-ui input:not(:placeholder-shown),
html[data-theme="dark"] body.tokoku-ui textarea:focus,
html[data-theme="dark"] body.tokoku-ui textarea:active,
html[data-theme="dark"] body.tokoku-ui select:focus {
  color:#f7f4fa !important;
  -webkit-text-fill-color:#f7f4fa !important;
}

html[data-theme="light"] body.tokoku-ui input::placeholder,
html[data-theme="light"] body.tokoku-ui textarea::placeholder {
  color:#8b8f9d !important;
  -webkit-text-fill-color:#8b8f9d !important;
  opacity:1 !important;
}
html[data-theme="dark"] body.tokoku-ui input::placeholder,
html[data-theme="dark"] body.tokoku-ui textarea::placeholder {
  color:#9893a2 !important;
  -webkit-text-fill-color:#9893a2 !important;
  opacity:1 !important;
}

/* Chrome/Edge/Safari autofill can otherwise restore browser-specific colors. */
html[data-theme="light"] body.tokoku-ui input:-webkit-autofill,
html[data-theme="light"] body.tokoku-ui input:-webkit-autofill:hover,
html[data-theme="light"] body.tokoku-ui input:-webkit-autofill:focus,
html[data-theme="light"] body.tokoku-ui textarea:-webkit-autofill,
html[data-theme="light"] body.tokoku-ui select:-webkit-autofill {
  -webkit-text-fill-color:#252733 !important;
  caret-color:#7c3aed !important;
  -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.98) inset !important;
  box-shadow:0 0 0 1000px rgba(255,255,255,.98) inset !important;
}
html[data-theme="dark"] body.tokoku-ui input:-webkit-autofill,
html[data-theme="dark"] body.tokoku-ui input:-webkit-autofill:hover,
html[data-theme="dark"] body.tokoku-ui input:-webkit-autofill:focus,
html[data-theme="dark"] body.tokoku-ui textarea:-webkit-autofill,
html[data-theme="dark"] body.tokoku-ui select:-webkit-autofill {
  -webkit-text-fill-color:#f7f4fa !important;
  caret-color:#d8b4fe !important;
  -webkit-box-shadow:0 0 0 1000px #24222b inset !important;
  box-shadow:0 0 0 1000px #24222b inset !important;
}

/* Native input sub-parts (date/time/search) also inherit readable text. */
body.tokoku-ui input::-webkit-datetime-edit,
body.tokoku-ui input::-webkit-datetime-edit-fields-wrapper,
body.tokoku-ui input::-webkit-datetime-edit-text,
body.tokoku-ui input::-webkit-datetime-edit-month-field,
body.tokoku-ui input::-webkit-datetime-edit-day-field,
body.tokoku-ui input::-webkit-datetime-edit-year-field {
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

/* Selected text remains deliberately high-contrast. */
body.tokoku-ui input::selection,
body.tokoku-ui textarea::selection {
  background:#2563eb;
  color:#fff;
  -webkit-text-fill-color:#fff;
}

/* Make browser-native color scheme deterministic per selected theme. */
html[data-theme="light"] { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }

/* v1.4.3 - aksi hapus Stok QR */
body.tokoku-ui .actions .action-inline-form{display:inline-flex;margin:0;padding:0}body.tokoku-ui .actions .btn.danger{background:var(--danger-soft,#fff5f4);color:var(--danger);border:1px solid rgba(217,45,32,.22)}body.tokoku-ui .actions .btn.danger:hover{background:#fee4e2;color:#b42318;border-color:#fda29b}html[data-theme="dark"] body.tokoku-ui .actions .btn.danger{background:#321512;color:#fda29b;border-color:#7a271a}html[data-theme="dark"] body.tokoku-ui .actions .btn.danger:hover{background:#4a1d18;color:#fecdca}

/* v1.4.4 - input text visibility + QR on/off action */
body.tokoku-ui .field input,
body.tokoku-ui .field textarea,
body.tokoku-ui .filter-control,
body.tokoku-ui .password-control input,
body.tokoku-ui .login-card input {
  font-weight:500;
  text-shadow:none!important;
  opacity:1!important;
}
html[data-theme="light"] body.tokoku-ui .field input,
html[data-theme="light"] body.tokoku-ui .field textarea,
html[data-theme="light"] body.tokoku-ui .filter-control,
html[data-theme="light"] body.tokoku-ui .password-control input,
html[data-theme="light"] body.tokoku-ui .login-card input {
  color:#20222b!important;
  -webkit-text-fill-color:#20222b!important;
  caret-color:#7c3aed!important;
}
html[data-theme="dark"] body.tokoku-ui .field input,
html[data-theme="dark"] body.tokoku-ui .field textarea,
html[data-theme="dark"] body.tokoku-ui .filter-control,
html[data-theme="dark"] body.tokoku-ui .password-control input,
html[data-theme="dark"] body.tokoku-ui .login-card input {
  color:#faf8fc!important;
  -webkit-text-fill-color:#faf8fc!important;
  caret-color:#e9d5ff!important;
}
body.tokoku-ui .actions .btn.qr-toggle{border:1px solid transparent;background:transparent}
body.tokoku-ui .actions .btn.qr-toggle.is-on{color:#079455;background:#ecfdf3;border-color:#abefc6}
body.tokoku-ui .actions .btn.qr-toggle.is-off{color:#667085;background:#f2f4f7;border-color:#d0d5dd}
body.tokoku-ui .actions .btn.qr-toggle:hover{transform:translateY(-1px)}
html[data-theme="dark"] body.tokoku-ui .actions .btn.qr-toggle.is-on{color:#75e0a7;background:#053321;border-color:#087443}
html[data-theme="dark"] body.tokoku-ui .actions .btn.qr-toggle.is-off{color:#d0d5dd;background:#25272d;border-color:#475467}


/* v1.4.5 Performance: perpindahan menu langsung tampil tanpa animasi entrance/stagger. */
body.tokoku-ui .page-enter,
body.tokoku-ui .card,
body.tokoku-ui .form-card,
body.tokoku-ui .table-wrap,
body.tokoku-ui .dashboard-welcome,
body.tokoku-ui .dashboard-quick-panel{
  animation:none!important;
  animation-delay:0s!important;
}

/* v1.4.6 - APK chunk upload progress */
body.tokoku-ui .apk-upload-progress{
  margin-top:12px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--soft-bg-2,rgba(148,163,184,.08));
}
body.tokoku-ui .apk-upload-progress[hidden]{display:none!important}
body.tokoku-ui .apk-upload-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:700}
body.tokoku-ui .apk-upload-progress-head strong{font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
body.tokoku-ui .apk-upload-progress-track{height:9px;margin-top:9px;border-radius:999px;overflow:hidden;background:rgba(148,163,184,.22)}
body.tokoku-ui .apk-upload-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ec67aa,#aa66ea);transition:width .18s ease}
body.tokoku-ui .apk-upload-progress-detail{margin-top:7px!important;line-height:1.45}
body.tokoku-ui .apk-upload-progress.is-error{border-color:rgba(217,45,32,.35);background:rgba(217,45,32,.07)}
body.tokoku-ui .apk-upload-progress.is-error .apk-upload-progress-track span{background:#d92d20}
body.tokoku-ui [data-apk-submit]:disabled{opacity:.72;cursor:wait;transform:none!important}

/* ======================================================================
   v1.4.8 - APK Settings polish + dark sidebar icon visibility
   ====================================================================== */

/* Semua alert harus aman terhadap teks panjang, hash, URL dan fingerprint. */
body.tokoku-ui .alert{min-width:0;max-width:100%;overflow:hidden}
body.tokoku-ui .alert>span,
body.tokoku-ui .alert code{min-width:0;overflow-wrap:anywhere;word-break:break-word}

/* Status APK dibuat sebagai layout terstruktur, bukan teks panjang di flex row. */
body.tokoku-ui .apk-status-panel{
  width:100%;
  min-width:0;
  margin:16px 0 20px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  overflow:hidden;
}
body.tokoku-ui .apk-status-panel.is-ready{
  border-color:rgba(18,183,106,.38);
  background:linear-gradient(135deg,rgba(18,183,106,.10),rgba(18,183,106,.045));
}
body.tokoku-ui .apk-status-panel.is-error{
  border-color:rgba(217,45,32,.32);
  background:linear-gradient(135deg,rgba(217,45,32,.09),rgba(217,45,32,.035));
}
body.tokoku-ui .apk-status-title{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  margin-bottom:14px;
}
body.tokoku-ui .apk-status-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(18,183,106,.13);
  color:#079455;
}
body.tokoku-ui .apk-status-panel.is-error .apk-status-icon{
  background:rgba(217,45,32,.10);
  color:#d92d20;
}
body.tokoku-ui .apk-status-title>div{min-width:0}
body.tokoku-ui .apk-status-title strong{
  display:block;
  color:var(--text);
  font-size:14px;
  line-height:1.35;
}
body.tokoku-ui .apk-status-title span:not(.apk-status-icon){
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
body.tokoku-ui .apk-status-message{
  color:var(--text);
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere;
  word-break:break-word;
}
body.tokoku-ui .apk-meta-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  min-width:0;
}
body.tokoku-ui .apk-meta-item{
  min-width:0;
  padding:12px 13px;
  border:1px solid rgba(18,183,106,.16);
  border-radius:13px;
  background:rgba(255,255,255,.48);
}
body.tokoku-ui .apk-meta-item-wide{grid-column:1/-1}
body.tokoku-ui .apk-meta-item>span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}
body.tokoku-ui .apk-meta-item>strong{
  display:block;
  min-width:0;
  color:var(--text);
  font-size:13px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
body.tokoku-ui .apk-meta-item>small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
body.tokoku-ui .apk-meta-item code{
  display:block;
  min-width:0;
  max-width:100%;
  color:var(--text);
  font:600 11px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
body.tokoku-ui .apk-fingerprint{letter-spacing:.01em}

html[data-theme="dark"] body.tokoku-ui .apk-status-panel.is-ready{
  border-color:rgba(52,211,153,.28);
  background:linear-gradient(135deg,rgba(6,78,59,.38),rgba(6,78,59,.18));
}
html[data-theme="dark"] body.tokoku-ui .apk-status-panel.is-error{
  border-color:rgba(248,113,113,.28);
  background:linear-gradient(135deg,rgba(127,29,29,.30),rgba(69,10,10,.16));
}
html[data-theme="dark"] body.tokoku-ui .apk-meta-item{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.085);
}
html[data-theme="dark"] body.tokoku-ui .apk-status-icon{
  background:rgba(52,211,153,.14);
  color:#86efac;
}
html[data-theme="dark"] body.tokoku-ui .apk-status-panel.is-error .apk-status-icon{
  background:rgba(248,113,113,.12);
  color:#fda4af;
}

/* Ikon sidebar selalu kontras saat mode gelap, termasuk menu yang tidak aktif. */
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-icon{
  background:rgba(192,132,252,.14)!important;
  border-color:rgba(216,180,254,.24)!important;
  color:#f3e8ff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-icon i{
  color:inherit!important;
  opacity:1!important;
}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link:hover .nav-icon{
  background:rgba(216,180,254,.20)!important;
  border-color:rgba(233,213,255,.32)!important;
  color:#fff!important;
}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link.active .nav-icon{
  background:rgba(192,132,252,.24)!important;
  border-color:rgba(233,213,255,.34)!important;
  color:#fff!important;
}

/* Progress upload tetap rapi walau nama file/pesan server panjang. */
body.tokoku-ui .apk-upload-progress,
body.tokoku-ui .apk-upload-progress-head,
body.tokoku-ui .apk-upload-progress-detail{min-width:0;max-width:100%}
body.tokoku-ui .apk-upload-progress-head>span,
body.tokoku-ui .apk-upload-progress-detail{overflow-wrap:anywhere;word-break:break-word}

@media(max-width:620px){
  body.tokoku-ui .apk-status-panel{padding:14px;border-radius:16px}
  body.tokoku-ui .apk-meta-grid{grid-template-columns:1fr}
  body.tokoku-ui .apk-meta-item-wide{grid-column:auto}
}

/* v1.4.9 - Bulk selection for Stok QR + premium Google-style QR gift card */
body.tokoku-ui .bulk-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
body.tokoku-ui .bulk-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid var(--line);font-size:12px;color:var(--muted)}
html[data-theme="dark"] body.tokoku-ui .bulk-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
body.tokoku-ui .table .select-col{width:54px;text-align:center}
body.tokoku-ui .table .select-col input{width:18px;height:18px;cursor:pointer;accent-color:#7c3aed}
body.tokoku-ui .table .select-col input:focus{outline:2px solid rgba(124,58,237,.18);outline-offset:2px}
body.tokoku-ui .qr-stock-table .actions{white-space:nowrap}

.gift-page{background:linear-gradient(180deg,#f3f6fb 0%,#eef2f8 100%)}
.gift-sticker,.mini-gift-card{position:relative;overflow:hidden;background:linear-gradient(160deg,#ffffff 0%,#f8faff 54%,#f4f6fb 100%)}
.gift-sticker::before,.mini-gift-card::before{content:"";position:absolute;inset:-20% auto auto -12%;width:42mm;height:42mm;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(66,133,244,.30),rgba(66,133,244,0) 72%);pointer-events:none}
.gift-sticker::after,.mini-gift-card::after{content:"";position:absolute;right:-14%;bottom:-12%;width:46mm;height:46mm;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(52,168,83,.22),rgba(52,168,83,0) 70%);pointer-events:none}
.gift-color-band{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;position:relative;z-index:2;margin-bottom:8mm}
.gift-color-band span{display:block;height:5mm;border-radius:999px}
.gift-color-band .band-blue{background:#4285f4}.gift-color-band .band-green{background:#34a853}.gift-color-band .band-yellow{background:#fbbc05}.gift-color-band .band-red{background:#ea4335}
.gift-sticker{width:86mm;min-height:136mm;margin:0 auto;border-radius:7mm;padding:7.5mm;box-shadow:0 18px 50px rgba(16,24,40,.14)}
.gift-card-head{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gift-google-review{font:800 8.2mm/1.08 "Google Sans","Product Sans",Inter,system-ui,sans-serif;letter-spacing:-.03em;color:#202124;display:flex;align-items:baseline;flex-wrap:wrap;gap:.6mm 0}
.gift-google-review .g-blue{color:#4285f4}.gift-google-review .g-red{color:#ea4335}.gift-google-review .g-yellow{color:#fbbc05}.gift-google-review .g-green{color:#34a853}.gift-google-review .gift-review-text{color:#202124;margin-left:2.2mm}
.gift-price{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:2.4mm 4mm;border-radius:999px;background:#202124;color:#fff;font:800 4mm/1 Inter,system-ui,sans-serif;box-shadow:0 10px 18px rgba(32,33,36,.14)}
.gift-qr-shell{position:relative;z-index:2;margin:8mm auto 0;width:62mm;min-height:62mm;padding:4.5mm;border-radius:6mm;background:#fff;border:1px solid rgba(32,33,36,.08);box-shadow:0 14px 28px rgba(16,24,40,.12)}
.gift-qr-box{width:53mm;height:53mm;margin:auto;display:grid;place-items:center}.gift-qr-box img,.gift-qr-box canvas{max-width:100%!important;height:auto!important}
.gift-cta{position:relative;z-index:2;margin-top:6.5mm;text-align:center;font:800 5.2mm/1.2 "Google Sans","Product Sans",Inter,system-ui,sans-serif;color:#202124;letter-spacing:-.02em}
.gift-code-row{position:relative;z-index:2;margin-top:5.5mm;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.gift-card-code{font:800 3.5mm/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#202124}
.gift-card-chip{display:inline-flex;align-items:center;justify-content:center;padding:2.1mm 3.4mm;border-radius:999px;background:rgba(66,133,244,.10);color:#1a73e8;font:700 3.1mm/1 Inter,system-ui,sans-serif;border:1px solid rgba(66,133,244,.16)}

.premium-print-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8mm;max-width:190mm;margin:0 auto}
.mini-gift-card{min-height:86mm;border-radius:5mm;padding:5mm;border:1px solid rgba(32,33,36,.09);box-shadow:0 10px 24px rgba(16,24,40,.08);break-inside:avoid}
.mini-gift-card .gift-color-band{margin-bottom:4.6mm}.mini-gift-card .gift-color-band span{height:3.2mm}
.gift-card-head.compact{gap:7px}.gift-google-review.compact{font-size:5.1mm}.gift-price.compact{padding:1.5mm 2.8mm;font-size:2.65mm}
.gift-mini-qr{position:relative;z-index:2;width:41mm;height:41mm;margin:4.2mm auto 0;padding:2.6mm;border-radius:4mm;background:#fff;border:1px solid rgba(32,33,36,.08);box-shadow:0 10px 18px rgba(16,24,40,.10)}
.gift-mini-qr img,.gift-mini-qr canvas{max-width:100%!important;height:auto!important}
.gift-cta.compact{margin-top:4mm;font-size:3.65mm}.gift-code-row.compact{margin-top:3.6mm}.mini-gift-card .gift-card-code{font-size:2.65mm}.mini-gift-card .gift-card-chip{font-size:2.45mm;padding:1.4mm 2.4mm}

@media(max-width:900px){
  body.tokoku-ui .section-head{align-items:flex-start}
  body.tokoku-ui .bulk-toolbar{justify-content:flex-start}
}
@media(max-width:620px){
  .gift-sticker{width:100%;min-height:auto;padding:16px;border-radius:24px}
  .gift-google-review{font-size:32px}
  .gift-price{font-size:15px;padding:10px 14px}
  .gift-qr-shell{width:100%;padding:12px}
  .gift-qr-box{width:min(72vw,310px);height:min(72vw,310px)}
  .gift-cta{font-size:26px}
  .gift-card-code{font-size:14px}
  .premium-print-grid{grid-template-columns:1fr}
}
@media print{
  body{background:#fff}
  .gift-page .sticker-toolbar,.gift-page .url-box{display:none!important}
  .gift-page{padding:0;background:#fff}
  .gift-sticker{box-shadow:none;border:1px solid #d7dce6;margin:0 auto}
  .premium-print-grid{grid-template-columns:repeat(2,1fr);gap:6mm;max-width:190mm}
  .mini-gift-card{box-shadow:none}
}

/* v1.5.1 - Google Review Card adjusted to rainbow top strip reference */
:root{
  --review-card-font:"Poppins","Montserrat","Segoe UI",Roboto,"Open Sans",Arial,sans-serif;
}
.review-card-page{background:linear-gradient(180deg,#eef2f6 0%,#e8edf3 100%)}
.review-card-print{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid #d6d9df;
  border-radius:7mm;
  box-shadow:0 18px 42px rgba(15,23,42,.14);
  font-family:var(--review-card-font);
  color:#111827;
}
.review-card-single{
  width:85.60mm;
  min-height:132mm;
  margin:0 auto;
  padding:0 7.2mm 6.5mm;
}
.review-card-rainbow{
  height:7.2mm;
  margin:0 -7.2mm 7.5mm;
  border-radius:7mm 7mm 0 0;
  background:linear-gradient(90deg,#ff5f57 0%,#ff8a00 14%,#ffd400 28%,#68d84f 44%,#00c7c7 60%,#2196f3 76%,#8e44ff 90%,#ff4fd8 100%);
}
.review-card-header{
  position:relative;
  min-height:13mm;
  padding-top:1mm;
}
.review-card-title{
  margin:0;
  text-align:center;
  font-family:var(--review-card-font);
  font-weight:500;
  font-size:5.7mm;
  line-height:1.16;
  letter-spacing:-.02em;
  color:#111;
}
.review-card-price{
  position:absolute;
  top:0;
  right:0;
  font-family:var(--review-card-font);
  font-weight:600;
  font-size:4.05mm;
  line-height:1;
  color:#0b4ea2;
  letter-spacing:-.02em;
}
.review-card-qr-wrap{
  display:flex;
  justify-content:center;
  margin-top:5.5mm;
}
.review-card-qr{
  width:61.5mm;
  height:61.5mm;
  display:grid;
  place-items:center;
  margin:0 auto;
}
.review-card-qr img,
.review-card-qr canvas{
  display:block;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  image-rendering:pixelated;
}
.review-card-cta{
  margin-top:5.5mm;
  text-align:center;
  font-family:var(--review-card-font);
  font-weight:500;
  font-size:4.55mm;
  line-height:1.22;
  color:#111;
}
.review-card-identity{
  margin-top:2.2mm;
  text-align:center;
  font-family:var(--review-card-font);
  font-weight:400;
  font-size:3.22mm;
  line-height:1.3;
  color:#111;
  word-break:break-word;
}
.review-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8mm;
  max-width:190mm;
  margin:0 auto;
}
.review-card-mini{
  min-height:88mm;
  padding:0 5mm 4.6mm;
  border-radius:5mm;
  break-inside:avoid;
}
.review-card-mini .review-card-rainbow.compact{
  height:4.7mm;
  margin:0 -5mm 4.7mm;
  border-radius:5mm 5mm 0 0;
}
.review-card-mini .review-card-header.compact{
  min-height:8.8mm;
  padding-top:.2mm;
}
.review-card-mini .review-card-title.compact{
  font-size:4.05mm;
}
.review-card-mini .review-card-price.compact{
  font-size:2.95mm;
}
.review-card-mini .review-card-qr.compact{
  width:45mm;
  height:45mm;
  margin-top:3.7mm;
}
.review-card-mini .review-card-cta.compact{
  margin-top:4.1mm;
  font-size:3.3mm;
}
.review-card-mini .review-card-identity.compact{
  margin-top:1.7mm;
  font-size:2.4mm;
}
@media(max-width:620px){
  .review-card-single{width:100%;min-height:auto;padding:0 18px 18px;border-radius:24px}
  .review-card-rainbow{height:28px;margin:0 -18px 20px;border-radius:24px 24px 0 0}
  .review-card-header{min-height:58px}
  .review-card-title{font-size:30px}
  .review-card-price{font-size:19px}
  .review-card-qr{width:min(78vw,340px);height:min(78vw,340px)}
  .review-card-cta{font-size:24px}
  .review-card-identity{font-size:14px}
  .review-card-grid{grid-template-columns:1fr}
}
@media print{
  body{background:#fff}
  .review-card-page .sticker-toolbar,.review-card-page .url-box{display:none!important}
  .review-card-page{padding:0;background:#fff}
  .review-card-print{box-shadow:none}
  .review-card-single{border:1px solid #d3d7dd;margin:0 auto}
  .review-card-grid{grid-template-columns:repeat(2,1fr);gap:6mm;max-width:190mm}
}


/* ======================================================================
   TOKOKU WEB UI v1.5.2
   - Dark theme: Google palette (blue/red/yellow/green), no purple/pink.
   - Light theme: stronger container outlines for clearer separation.
   ====================================================================== */
html[data-theme="dark"]{
  --pastel-purple:#4285f4;
  --pastel-purple-2:#34a853;
  --pastel-pink:#ea4335;
  --pastel-pink-soft:rgba(234,67,53,.12);
  --pastel-blue:#4285f4;
  --pastel-blue-soft:rgba(66,133,244,.12);
  --pastel-mint:#34a853;
  --pastel-mint-soft:rgba(52,168,83,.12);
  --pastel-yellow:#fbbc05;
  --pastel-yellow-soft:rgba(251,188,5,.13);
  --bg:#11151c;
  --card:rgba(28,33,41,.88);
  --text:#f5f7fa;
  --muted:#aeb6c2;
  --line:rgba(255,255,255,.14);
  --primary:#4285f4;
  --primary2:#34a853;
  --sidebar-bg:rgba(18,23,30,.92);
  --sidebar-text:#c2c8d0;
  --sidebar-hover:rgba(66,133,244,.10);
  --sidebar-active:rgba(66,133,244,.16);
  --topbar-bg:rgba(17,21,28,.86);
  --input-bg:#202630;
  --input-text:#f7f9fc;
  --placeholder:#8f98a6;
  --soft-bg:#1b212a;
  --soft-bg-2:#242b35;
  --hover-bg:rgba(66,133,244,.075);
  --icon-surface:rgba(66,133,244,.14);
  --focus-ring:rgba(66,133,244,.22);
  --shadow:0 14px 38px rgba(0,0,0,.26);
  --glass-shadow:0 10px 36px rgba(0,0,0,.30);
}
html[data-theme="dark"] body.tokoku-ui{
  background-color:#11151c!important;
  background-image:
    radial-gradient(at 0% 0%,rgba(66,133,244,.16) 0,transparent 38%),
    radial-gradient(at 48% 0%,rgba(52,168,83,.12) 0,transparent 42%),
    radial-gradient(at 100% 0%,rgba(251,188,5,.08) 0,transparent 36%),
    radial-gradient(at 86% 92%,rgba(234,67,53,.08) 0,transparent 34%)!important;
}
html[data-theme="dark"] body.tokoku-ui .brand-mark,
html[data-theme="dark"] body.tokoku-ui .avatar,
html[data-theme="dark"] body.tokoku-ui .login-logo{
  background:linear-gradient(135deg,#4285f4 0%,#34a853 48%,#fbbc05 74%,#ea4335 100%)!important;
  color:#fff!important;
  box-shadow:0 9px 24px rgba(66,133,244,.20)!important;
}
html[data-theme="dark"] body.tokoku-ui .brand-copy strong{
  background:linear-gradient(90deg,#4285f4 0%,#34a853 38%,#fbbc05 68%,#ea4335 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link.active{
  color:#8ab4f8!important;
  background:linear-gradient(135deg,rgba(66,133,244,.18),rgba(52,168,83,.08))!important;
  border-color:rgba(66,133,244,.28)!important;
  box-shadow:inset 3px 0 0 #4285f4,0 6px 18px rgba(66,133,244,.08)!important;
}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-icon{
  border-color:rgba(66,133,244,.18)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link:nth-child(4n+1) .nav-icon{background:rgba(66,133,244,.14)!important;color:#8ab4f8!important;border-color:rgba(66,133,244,.24)!important}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link:nth-child(4n+2) .nav-icon{background:rgba(234,67,53,.13)!important;color:#f28b82!important;border-color:rgba(234,67,53,.23)!important}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link:nth-child(4n+3) .nav-icon{background:rgba(251,188,5,.13)!important;color:#fdd663!important;border-color:rgba(251,188,5,.23)!important}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link:nth-child(4n+4) .nav-icon{background:rgba(52,168,83,.13)!important;color:#81c995!important;border-color:rgba(52,168,83,.23)!important}
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link.active .nav-icon,
html[data-theme="dark"] body.tokoku-ui .side-nav .nav-link:hover .nav-icon{
  background:#4285f4!important;
  border-color:#6ea0f8!important;
  color:#fff!important;
}
html[data-theme="dark"] body.tokoku-ui .topbar-app-icon{
  background:rgba(66,133,244,.14)!important;
  border-color:rgba(66,133,244,.28)!important;
  color:#8ab4f8!important;
}
html[data-theme="dark"] body.tokoku-ui .theme-toggle i{color:#34a853!important}
html[data-theme="dark"] body.tokoku-ui .btn.primary,
html[data-theme="dark"] body.tokoku-ui .glass-button{
  background:linear-gradient(135deg,#4285f4,#1a73e8)!important;
  border:1px solid rgba(138,180,248,.32)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(66,133,244,.22)!important;
}
html[data-theme="dark"] body.tokoku-ui .btn.primary:hover{
  background:linear-gradient(135deg,#5b95f5,#34a853)!important;
  box-shadow:0 10px 24px rgba(66,133,244,.28)!important;
}
html[data-theme="dark"] body.tokoku-ui .metric-icon{background:rgba(66,133,244,.16)!important;color:#8ab4f8!important}
html[data-theme="dark"] body.tokoku-ui .cards .metric-card-modern:nth-child(1) .metric-icon{background:rgba(66,133,244,.16)!important;color:#8ab4f8!important}
html[data-theme="dark"] body.tokoku-ui .cards .metric-card-modern:nth-child(2) .metric-icon{background:rgba(234,67,53,.15)!important;color:#f28b82!important}
html[data-theme="dark"] body.tokoku-ui .cards .metric-card-modern:nth-child(3) .metric-icon{background:rgba(251,188,5,.15)!important;color:#fdd663!important}
html[data-theme="dark"] body.tokoku-ui .cards .metric-card-modern:nth-child(4) .metric-icon{background:rgba(52,168,83,.15)!important;color:#81c995!important}
html[data-theme="dark"] body.tokoku-ui .metric-card-modern:hover{box-shadow:0 12px 32px rgba(66,133,244,.12)!important}
html[data-theme="dark"] body.tokoku-ui .dashboard-welcome::after{color:rgba(66,133,244,.10)!important}
html[data-theme="dark"] body.tokoku-ui .scanner-orb{
  background:linear-gradient(145deg,rgba(66,133,244,.13),rgba(52,168,83,.08))!important;
  color:#8ab4f8!important;
  box-shadow:inset 0 0 0 1px rgba(66,133,244,.24),0 14px 35px rgba(66,133,244,.10)!important;
}
html[data-theme="dark"] body.tokoku-ui .scanner-orb::before{border-color:#4285f4!important}
html[data-theme="dark"] body.tokoku-ui .scanner-orb::after{border-color:#34a853!important}
html[data-theme="dark"] body.tokoku-ui .quick-step span{background:rgba(66,133,244,.13)!important;color:#8ab4f8!important}
html[data-theme="dark"] body.tokoku-ui .login-shell{
  background:radial-gradient(at 12% 0,rgba(66,133,244,.15),transparent 40%),radial-gradient(at 88% 0,rgba(52,168,83,.10),transparent 38%),#11151c!important;
}
html[data-theme="dark"] body.tokoku-ui .google-place-icon{background:rgba(66,133,244,.14)!important;color:#8ab4f8!important}
html[data-theme="dark"] body.tokoku-ui .google-place-option:hover,
html[data-theme="dark"] body.tokoku-ui .google-place-option:focus{background:rgba(66,133,244,.09)!important}
html[data-theme="dark"] body.tokoku-ui input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html[data-theme="dark"] body.tokoku-ui textarea,
html[data-theme="dark"] body.tokoku-ui select,
html[data-theme="dark"] body.tokoku-ui .filter-control{
  caret-color:#4285f4!important;
}
html[data-theme="dark"] body.tokoku-ui .field input:focus,
html[data-theme="dark"] body.tokoku-ui .field textarea:focus,
html[data-theme="dark"] body.tokoku-ui .field select:focus,
html[data-theme="dark"] body.tokoku-ui .filter-control:focus{
  border-color:rgba(66,133,244,.66)!important;
  box-shadow:0 0 0 4px rgba(66,133,244,.20)!important;
}
html[data-theme="dark"] body.tokoku-ui .password-toggle:hover{background:rgba(66,133,244,.11)!important;color:#8ab4f8!important}
html[data-theme="dark"] body.tokoku-ui .apk-upload-progress-track span{background:linear-gradient(90deg,#4285f4 0%,#34a853 38%,#fbbc05 68%,#ea4335 100%)!important}
html[data-theme="dark"] body.tokoku-ui .table .select-col input{accent-color:#4285f4!important}
html[data-theme="dark"] body.tokoku-ui ::-webkit-scrollbar-thumb{background:rgba(66,133,244,.34)!important}

/* Light theme: make every main content container easy to distinguish. */
html[data-theme="light"] body.tokoku-ui{
  --line:#cfd6e1;
}
html[data-theme="light"] body.tokoku-ui .card,
html[data-theme="light"] body.tokoku-ui .form-card,
html[data-theme="light"] body.tokoku-ui .table-wrap,
html[data-theme="light"] body.tokoku-ui .user-summary-card,
html[data-theme="light"] body.tokoku-ui .login-card,
html[data-theme="light"] body.tokoku-ui .dashboard-welcome,
html[data-theme="light"] body.tokoku-ui .dashboard-quick-panel,
html[data-theme="light"] body.tokoku-ui .quick-step,
html[data-theme="light"] body.tokoku-ui .status-pill,
html[data-theme="light"] body.tokoku-ui .theme-toggle,
html[data-theme="light"] body.tokoku-ui .qr-pagination,
html[data-theme="light"] body.tokoku-ui .user-modal-dialog,
html[data-theme="light"] body.tokoku-ui .apk-status-panel,
html[data-theme="light"] body.tokoku-ui .apk-meta-item,
html[data-theme="light"] body.tokoku-ui .bulk-chip,
html[data-theme="light"] body.tokoku-ui .google-place-results,
html[data-theme="light"] body.tokoku-ui .sidebar-account-row{
  border-color:#cbd3df!important;
  box-shadow:0 6px 20px rgba(31,41,55,.06)!important;
}
html[data-theme="light"] body.tokoku-ui .sidebar{border-right-color:#cbd3df!important}
html[data-theme="light"] body.tokoku-ui .topbar{border-bottom-color:#cbd3df!important}
html[data-theme="light"] body.tokoku-ui .table th,
html[data-theme="light"] body.tokoku-ui .table td{border-bottom-color:#d8dee8!important}
html[data-theme="light"] body.tokoku-ui .field input,
html[data-theme="light"] body.tokoku-ui .field textarea,
html[data-theme="light"] body.tokoku-ui .field select,
html[data-theme="light"] body.tokoku-ui .filter-control{border-color:#c7cfdb!important}
html[data-theme="dark"] body.tokoku-ui .logout-icon{
  color:#f28b82!important;
  background:rgba(234,67,53,.10)!important;
  border-color:rgba(234,67,53,.24)!important;
}
html[data-theme="dark"] body.tokoku-ui .logout-icon:hover{
  color:#fff!important;
  background:#ea4335!important;
  border-color:#ea4335!important;
}