[hidden]{display:none!important}
html,body{margin:0}
/* Layout: app.rainmojo shell. Navy gradient sidebar (brand, client switcher, nav), white main content with page header, input card and sticky result bento. Light only by design. */
:root{
  color-scheme:light;
  --navy:#001F3F; --navy-300:#8099B3; --navy-100:#B3C2D1;
  --accent:#00D8C0; --accent-ink:#008F85; --accent-soft:rgba(0,216,192,.12); --accent-ring:rgba(0,216,192,.3);
  --page:#FFFFFF; --surface:#FFFFFF; --sunk:#F1F5F9; --subtle:#F8FAFC; --line:#E5E7EB; --ink:#111827; --body:#4B5563; --muted:#6B7280; --micro:#9CA3AF;
  --good:#047857; --good-soft:#ECFDF5; --good-line:#A7F3D0;
  --warn:#B45309; --warn-soft:#FFFBEB; --warn-line:#FDE68A;
  --bad:#BE123C; --bad-soft:#FFF1F2; --bad-line:#FECDD3; --neg:#DC2626;
  --badge:#475569; --badge-line:#E2E8F0;
  --seg1:#64748B; --seg2:#2563EB; --seg3:#7C3AED; --seg4:#EA580C; --seg5:#00C2AC;
  --shadow:0 1px 2px 0 rgba(0,0,0,.05);
  --font:"Google Sans",system-ui,"Leelawadee UI",Tahoma,sans-serif;
  --r:16px; --pill:9999px; --side:260px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--page);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55}
h1,h2,h3{text-wrap:balance;margin:0;color:var(--ink)}
.num{font-variant-numeric:tabular-nums}
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100%}
/* sidebar */
.side{background:linear-gradient(180deg,#001F3F,#002B5C);color:#B3C2D1;display:flex;flex-direction:column;gap:18px;
  padding-block:20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px;padding:0 6px}
.brand .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#00D8C0,#00B8A8);display:grid;place-items:center;color:#001F3F;font-size:15px;font-weight:700}
.brand small{display:block;font-size:11px;font-weight:500;color:#8099B3}
.side-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8099B3;font-weight:600;padding:0 8px}
.switch{position:relative}
.switch-btn{width:100%;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:var(--pill);padding:6px 12px 6px 6px;font:inherit;cursor:pointer;text-align:left}
.switch-btn:hover{background:rgba(255,255,255,.12)}
.switch-btn .t{flex:1;min-width:0}
.switch-btn .t b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch-btn .t span{display:block;font-size:11px;color:#8099B3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px -8px rgba(0,31,63,.35);padding:6px;z-index:20;max-height:60vh;overflow-y:auto}
.menu button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:10px;padding:7px 8px;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.menu button:hover,.menu button[aria-current="true"]{background:var(--sunk)}
.menu button .t{min-width:0;flex:1}
.menu button .t b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu button .t span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .add{color:var(--accent-ink);font-weight:600;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px}
.fav{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;font-size:12px;font-weight:700;color:#fff}
.fav.init{background:#264A6E}
.fav img{width:18px;height:18px;border-radius:2px;object-fit:contain}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#B3C2D1;font:inherit;font-size:14px;padding:9px 12px;border-radius:12px;cursor:pointer;text-align:left}
.nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.nav button[aria-current="page"]{background:rgba(0,216,192,.15);color:#00D8C0;font-weight:600}
.nav svg{width:18px;height:18px;flex:0 0 18px}
.side-foot{margin-top:auto;padding:0 6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#B3C2D1}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.ok{color:#4DE6D5;background:rgba(0,216,192,.15);border-color:rgba(0,216,192,.35)}
.chip.busy{color:#FDE68A;background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.35)}
.chip.off{color:#FECDD3;background:rgba(225,29,72,.18);border-color:rgba(225,29,72,.4)}
/* main */
.main{min-width:0;padding-block:24px 56px;padding-left:24px;padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px}
.crumb{font-size:12px;color:var(--muted)} .crumb b{color:var(--body);font-weight:600}
.page-head h1{font-size:20px;font-weight:600;line-height:1.3;display:flex;align-items:center;gap:10px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
button:focus-visible,input:focus-visible,select:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-ring);border-color:var(--accent)}
.btn{border:1px solid var(--line);background:#fff;color:#374151;font:inherit;font-size:14px;font-weight:600;padding:8px 20px;border-radius:var(--pill);cursor:pointer;transition:background .15s,box-shadow .15s,color .15s}
.btn.primary{background:#001F3F;border-color:#001F3F;color:#fff;box-shadow:0 1px 2px 0 rgba(0,31,63,.2),0 4px 14px -2px rgba(0,31,63,.4)}
.btn.primary:hover:not(:disabled){background:#00D8C0;border-color:#00D8C0;color:#001F3F;box-shadow:0 6px 20px -2px rgba(0,216,192,.55),0 0 12px rgba(0,216,192,.3)}
.btn.danger{background:#FFF1F2;color:#E11D48;border-color:#FECDD3}
.btn.danger:hover:not(:disabled),.btn.danger.armed{background:#E11D48;border-color:#E11D48;color:#fff}
.btn.sm{font-size:12px;padding:5px 14px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{border-color:transparent;background:transparent;color:var(--muted);padding:6px 10px}
.link{border:0;background:transparent;padding:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-align:left}
.link:hover{color:var(--accent-ink)}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0;box-shadow:var(--shadow)}
.group{display:flex;flex-direction:column;gap:10px}
.group+.group{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.group h3{font-size:14px;font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:2px 10px;border-radius:var(--pill);border:1px solid var(--badge-line);background:var(--sunk);color:var(--badge);white-space:nowrap}
.badge.brand{background:rgba(0,216,192,.1);color:#008F85;border-color:rgba(0,216,192,.25)}
.badge.good{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 14px}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--body);min-width:0}
label.f .unit{font-size:11px;color:var(--micro);font-weight:400}
input,select{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--pill);height:40px;padding:0 16px;width:100%;min-width:0}
input[type=number]{font-variant-numeric:tabular-nums}
input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:#00C2AC}
input:disabled,select:disabled{opacity:.6;background:var(--subtle)}
.identity{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.identity .fav{width:44px;height:44px;flex-basis:44px;border:1px solid var(--line)}
.identity .fav img{width:26px;height:26px}
.identity .fav.init{font-size:16px;border:0}
.sum-line{font-size:13px;color:var(--body);margin:0} .sum-line b{color:var(--ink)}
.results{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:flex;flex-direction:column;gap:12px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{background:var(--subtle);border:1px solid rgba(226,232,240,.6);border-radius:12px;padding:12px}
.panel.big{border-radius:var(--r);background:#fff;border-color:var(--line)}
.big .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.big .val{font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.big .sub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar{display:flex;height:8px;border-radius:var(--pill);overflow:hidden;background:var(--sunk)}
.bar span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 6px;text-align:right;border-bottom:1px solid var(--line);color:var(--body)}
th:first-child,td:first-child{text-align:left}
thead th{font-size:11px;color:var(--micro);font-weight:600;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0;background:#fff}
tr.strong td{font-weight:700;color:var(--ink);background:var(--subtle)}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.neg{color:var(--neg)!important} .pos{color:var(--accent-ink)!important}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.kpi .lbl{font-size:12px;color:var(--muted)} .kpi .val{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.note{font-size:12px;color:var(--muted);margin:0}
.scroll{overflow-x:auto;overflow-y:hidden}
.empty{text-align:center;padding:48px 16px;display:flex;flex-direction:column;gap:10px;align-items:center}
.empty .halo{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,rgba(0,216,192,.12),rgba(0,216,192,.04));display:grid;place-items:center;color:#008F85}
.empty .halo svg{width:28px;height:28px}
.staffrow{display:grid;grid-template-columns:auto minmax(0,1fr) 120px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.staffrow .who{font-weight:600;font-size:14px;color:var(--ink)} .staffrow .who small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.edit-table td,.edit-table th{text-align:left;padding:6px 4px}
.edit-table input{height:32px;padding:0 12px;font-size:13px}
.edit-table td.c{text-align:center}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.hint{background:rgba(0,216,192,.08);border:1px solid rgba(0,216,192,.25);border-radius:var(--r);padding:12px 16px;font-size:13px;color:var(--body)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:1100px){.grid{grid-template-columns:minmax(0,1fr)}.results{order:-1;position:static}}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px;gap:12px}
  .nav{flex-direction:row;overflow-x:auto}
  .nav button{white-space:nowrap}
  .side-foot{margin-top:0}
  .main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 48px}
}
@media (max-width:520px){.hero{grid-template-columns:1fr}.big .val{font-size:24px}.kpis{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.bar span{transition:width .25s ease}}

/* login gate + audit */
.gate{min-height:100%;display:grid;place-items:center;background:linear-gradient(180deg,#001F3F,#002B5C);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px}
.gate-card{background:#fff;border-radius:24px;padding:32px;max-width:400px;width:100%;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;box-shadow:0 20px 50px -12px rgba(0,0,0,.45)}
.gate-card .mark{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#00D8C0,#00B8A8);display:grid;place-items:center;color:#001F3F;font-size:22px;font-weight:700}
.gate-card h1{font-size:20px;font-weight:600}
.gate-card .err{color:#BE123C;background:#FFF1F2;border:1px solid #FECDD3;border-radius:12px;padding:8px 12px;font-size:13px}
.gbtn{display:inline-flex;align-items:center;gap:10px;justify-content:center;width:100%}
.gbtn svg{width:18px;height:18px}
.who-box{display:flex;flex-direction:column;gap:6px;padding:0 6px}
.who-box .email{font-size:12px;color:#B3C2D1;overflow-wrap:anywhere}
.side .btn.ghost{color:#8099B3;padding:4px 0;justify-content:flex-start;text-align:left}
.side .btn.ghost:hover{color:#fff}
.changes{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--body);text-align:left}
.changes span b{color:var(--ink);font-weight:600}
.audit td{vertical-align:top;text-align:left}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:#001F3F;color:#fff;padding:10px 18px;border-radius:9999px;font-size:13px;box-shadow:0 8px 24px -6px rgba(0,31,63,.5);z-index:50}
.audit th{text-align:left}
.brand .logo{width:34px;height:34px;border-radius:10px;flex:0 0 34px}
.gate-card .logo-lg{width:56px;height:56px;border-radius:16px}