:root{
  --bg:#f6faf7;--surface:#ffffff;--surface-2:#f0f7f2;--surface-3:#e7f2ea;
  --text:#17211b;--muted:#718078;--border:#dfe9e2;--primary:#22a862;--primary-strong:#16834a;
  --primary-soft:#e8f7ef;--danger:#d95555;--warning:#b67a19;--shadow:0 12px 36px rgba(26,62,42,.07);
  --sidebar:264px;--sidebar-collapsed:82px;--radius:18px;--radius-sm:12px;
}
html[data-theme="dark"]{
  --bg:#0d1410;--surface:#121c16;--surface-2:#16231b;--surface-3:#1b2d22;
  --text:#edf7f0;--muted:#9caf9f;--border:#24352a;--primary:#4bd07f;--primary-strong:#67dd95;
  --primary-soft:#143322;--danger:#f07b7b;--warning:#e6af54;--shadow:0 18px 44px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html{width:100%;max-width:100%;overflow-x:hidden}
body{min-height:100dvh;width:100%;max-width:100%;overflow-x:hidden;position:relative}
.app-shell,.main-area,.content-wrap{min-width:0;max-width:100%}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}
.app-shell{min-height:100dvh;padding-left:var(--sidebar);transition:padding .22s ease}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));background:var(--surface);border-right:1px solid var(--border);z-index:30;transition:width .22s ease,transform .22s ease}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 6px 18px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-logo{width:34px;height:34px;object-fit:contain;display:block;border:0;background:transparent}
.brand-name{font-weight:800;letter-spacing:.01em;white-space:nowrap}
.nav-list{display:flex;flex-direction:column;gap:5px}
.nav-item{display:flex;align-items:center;gap:11px;min-height:45px;padding:9px 11px;border-radius:13px;color:var(--muted);font-size:14px;font-weight:650;transition:.18s ease}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.active{background:var(--primary-soft);color:var(--primary-strong)}
.nav-icon,.stat-icon,.empty-icon{display:grid;place-items:center;flex:0 0 auto}
.nav-icon{width:28px;height:28px;border-radius:9px}
.nav-section{margin:16px 10px 5px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.ui-icon{display:block}
.tone-green{color:#23a566;background:#e7f7ef}.tone-emerald{color:#0d9c6b;background:#e5f8f1}.tone-blue{color:#3988d8;background:#eaf3fc}.tone-amber{color:#b67818;background:#fff4dc}.tone-purple{color:#8b62cf;background:#f1ebfb}.tone-cyan{color:#118d98;background:#e4f7f7}.tone-slate{color:#647485;background:#edf1f4}
html[data-theme="dark"] .tone-green,html[data-theme="dark"] .tone-emerald{background:#143523}
html[data-theme="dark"] .tone-blue{background:#172d42}
html[data-theme="dark"] .tone-amber{background:#392a13}
html[data-theme="dark"] .tone-purple{background:#2a2139}
html[data-theme="dark"] .tone-cyan{background:#123238}
html[data-theme="dark"] .tone-slate{background:#202b33}
.sidebar-collapsed{padding-left:var(--sidebar-collapsed)}
.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed)}
.sidebar-collapsed .brand-name,.sidebar-collapsed .nav-item>span:last-child,.sidebar-collapsed .nav-section{display:none}
.sidebar-collapsed .brand-row{justify-content:center;position:relative}
.sidebar-collapsed .brand-row .desktop-only{display:grid;position:absolute;right:-28px;top:2px;width:32px;height:32px;border-radius:9px;box-shadow:var(--shadow);z-index:2}
.sidebar-collapsed .nav-item{justify-content:center;padding-inline:8px}
.main-area{min-width:0}
.topbar{height:78px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%, transparent);backdrop-filter:blur(18px);z-index:20;border-bottom:1px solid color-mix(in srgb,var(--border) 70%, transparent)}
.topbar-left,.topbar-actions{display:flex;align-items:center;gap:12px}
.eyebrow{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--primary)}
.page-title{font-size:22px;line-height:1.15;margin:3px 0 0}
.icon-btn{width:40px;height:40px;border:1px solid var(--border);background:var(--surface);border-radius:12px;display:grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--surface-2)}
.profile-chip{display:flex;align-items:center;gap:9px;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:6px 10px 6px 7px;cursor:pointer}
.profile-dot{width:32px;height:32px;border-radius:10px;background:var(--primary-soft);color:var(--primary-strong);display:grid;place-items:center;font-weight:800}
.profile-copy{display:flex;flex-direction:column;align-items:flex-start}.profile-copy strong{font-size:13px}.profile-copy small{font-size:11px;color:var(--muted)}
.content-wrap{padding:24px 26px max(28px,env(safe-area-inset-bottom))}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.stat-card{display:flex;align-items:center;gap:12px;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.stat-icon{width:40px;height:40px;border-radius:12px}
.stat-card>div{display:flex;flex-direction:column;min-width:0}.stat-card strong{font-size:20px}.stat-card span:last-child{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel+.panel{margin-top:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--border)}
.panel-head h2,.sheet-head h2,.docs-content h2{margin:0;font-size:17px}.panel-head p,.sheet-head p{margin:4px 0 0;color:var(--muted);font-size:13px}
.panel-actions{padding:16px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}
.btn{border:1px solid var(--border);border-radius:12px;min-height:42px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;cursor:pointer;background:var(--surface)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:white}.btn-primary:hover{background:var(--primary-strong)}
.btn-ghost:hover{background:var(--surface-2)}.btn-block{width:100%}
.table-scroll{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.data-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px}
.data-table th{padding:12px 16px;text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--surface-2);white-space:nowrap}
.data-table td{padding:13px 16px;border-top:1px solid var(--border);vertical-align:middle}
.data-table .cell-action{text-align:right}
.empty-row td{padding:34px 16px}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;color:var(--muted)}
.empty-state strong{color:var(--text)}.empty-icon{width:52px;height:52px;border-radius:16px;margin-bottom:3px}
.form-grid{padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-stack{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:7px}.field>span{font-size:12px;font-weight:750;color:var(--muted)}
.field input,.field select,.field textarea,.compact-filter input{width:100%;min-height:44px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text);padding:10px 12px;outline:none}
.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.compact-filter input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.field-wide{grid-column:1/-1}.help-text{color:var(--muted);font-size:12px;margin:0}
.settings-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.settings-grid .panel{padding-bottom:20px}
.settings-grid .form-stack,.branding-preview,.secret-preview,.settings-grid>.panel>.btn{margin-inline:20px}
.branding-preview{display:flex;align-items:center;gap:14px;margin-block:20px}.settings-logo{width:58px;height:58px;object-fit:contain;border:0;background:transparent}.branding-preview>div{display:flex;flex-direction:column;gap:3px}.branding-preview span{color:var(--muted);font-size:12px}
.secret-preview{padding:13px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);margin-bottom:12px;letter-spacing:.14em}
.docs-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px}.docs-nav{padding:14px;align-self:start;position:sticky;top:96px}.docs-nav strong{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:8px 7px}.docs-nav a{display:block;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:13px}.docs-nav a.active,.docs-nav a:hover{background:var(--primary-soft);color:var(--primary-strong)}
.docs-content{padding:22px}.docs-content p{color:var(--muted)}.endpoint-line{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--border);background:var(--surface-2);border-radius:12px}.endpoint-line span{font-size:11px;font-weight:850;color:var(--primary)}
pre{overflow:auto;background:#0f1720;color:#d9e7dd;border-radius:14px;padding:16px;font-size:12px}code{font-family:"SFMono-Regular",Consolas,monospace}
.notice{padding:15px 18px;margin:20px;border-radius:14px}.notice.soft{background:var(--primary-soft);color:var(--primary-strong)}
.drawer-scrim{display:none}
.sheet-layer{position:fixed;inset:0;z-index:80;pointer-events:none}.sheet-layer.open{pointer-events:auto}.sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(5,15,9,.38);opacity:0;transition:.2s}.sheet-layer.open .sheet-backdrop{opacity:1}
.bottom-sheet{position:absolute;left:50%;bottom:0;width:min(620px,100%);max-height:min(84dvh,760px);overflow:auto;transform:translate(-50%,105%);transition:transform .26s ease;background:var(--surface);border:1px solid var(--border);border-bottom:0;border-radius:24px 24px 0 0;padding-bottom:max(14px,env(safe-area-inset-bottom));box-shadow:0 -18px 54px rgba(0,0,0,.18)}
.sheet-layer.open .bottom-sheet{transform:translate(-50%,0)}.sheet-handle{width:42px;height:4px;border-radius:99px;background:var(--border);margin:10px auto 4px}.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 20px 16px;border-bottom:1px solid var(--border)}.sheet-body{padding:18px 20px}.sheet-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--border);position:sticky;bottom:0;background:var(--surface)}.detail-row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}.status-text.success{color:var(--primary)}
.sheet-open{overflow:hidden}
.mobile-only{display:none}

.auth-body{min-height:100dvh;display:grid;place-items:center;padding:max(22px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom));background:radial-gradient(circle at 15% 10%,var(--primary-soft),transparent 32%),var(--bg)}
.auth-theme{position:fixed;top:max(18px,env(safe-area-inset-top));right:18px;z-index:10}
.auth-shell{width:min(920px,100%);display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}
.auth-brand{display:flex;flex-direction:column;justify-content:center;padding:34px}.auth-logo{width:72px;height:72px;object-fit:contain;border:0;background:transparent;display:block}.auth-wordmark{font-size:28px;font-weight:850;margin-top:16px}.auth-brand p{max-width:340px;color:var(--muted);line-height:1.6}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:34px}
.auth-heading{margin-bottom:24px}.auth-heading h1{font-size:26px;margin:5px 0 8px}.auth-heading p{margin:0;color:var(--muted);line-height:1.5}.auth-foot{text-align:center;color:var(--muted);font-size:13px;margin:18px 0 0}.auth-foot a{color:var(--primary);font-weight:800}

@media (max-width:1050px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .desktop-only{display:none!important}.mobile-only{display:grid}
  .app-shell,.sidebar-collapsed{padding-left:0}
  .sidebar,.sidebar-collapsed .sidebar{width:min(82vw,294px);transform:translateX(-104%);box-shadow:var(--shadow)}
  .drawer-open .sidebar{transform:translateX(0)}
  .drawer-scrim{display:block;position:fixed;inset:0;border:0;background:rgba(5,15,9,.38);z-index:29;opacity:0;visibility:hidden;transition:.2s}
  .drawer-open .drawer-scrim{opacity:1;visibility:visible}
  .sidebar-collapsed .brand-name,.sidebar-collapsed .nav-item>span:last-child,.sidebar-collapsed .nav-section{display:initial}
  .sidebar-collapsed .nav-item{justify-content:flex-start;padding:9px 11px}
  .topbar{height:70px;padding:0 16px}
  .content-wrap{padding:18px 14px max(24px,env(safe-area-inset-bottom))}
  .page-title{font-size:19px}.profile-copy{display:none}.profile-chip{padding:5px}
  .docs-layout{grid-template-columns:1fr}.docs-nav{position:static;display:flex;overflow-x:auto;gap:4px}.docs-nav strong{display:none}.docs-nav a{white-space:nowrap}
}
@media (min-width:760px) and (max-width:900px){.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:759px){.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-card{padding:12px 10px;gap:8px;border-radius:14px}.stat-icon{width:34px;height:34px;border-radius:10px}.stat-card strong{font-size:17px}.stat-card span:last-child{font-size:11px}
  .panel-head{padding:15px 14px;align-items:flex-start}.panel-head .btn{min-height:38px;padding:8px 10px;font-size:12px}
  .form-grid{grid-template-columns:1fr;padding:15px 14px}.field-wide{grid-column:auto}
  .panel-actions{padding:13px 14px}
  .auth-shell{grid-template-columns:1fr}.auth-brand{padding:14px 6px 4px}.auth-logo{width:56px;height:56px}.auth-wordmark{font-size:23px;margin-top:10px}.auth-brand p{margin:8px 0 0;font-size:13px}.auth-card{padding:24px 18px;border-radius:20px}
}

/* SGCORE R4 auth foundation */
.check-row{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;cursor:pointer}
.check-row input{width:16px;height:16px;accent-color:var(--primary)}
.notice.error-soft{margin:0 0 16px;background:color-mix(in srgb,var(--danger) 10%,var(--surface));color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 24%,var(--border))}
.sheet-logout{margin-top:16px}

[data-sidebar-toggle] .ui-icon{transform:rotate(180deg);transition:transform .18s ease}
.sidebar-collapsed [data-sidebar-toggle] .ui-icon{transform:rotate(0deg)}

/* SGCORE R4 global mobile table polish */
@media (max-width:900px){
  .table-scroll{
    position:relative;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .table-scroll::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .data-table{
    min-width:680px;
  }
  .empty-row td{
    padding-left:0;
    padding-right:0;
  }
  .empty-row .empty-state{
    position:sticky;
    left:0;
    width:min(560px,calc(100vw - 56px));
    max-width:calc(100vw - 56px);
    box-sizing:border-box;
    padding-inline:16px;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media (max-width:599px){
  .data-table{
    min-width:620px;
    font-size:12px;
  }
  .data-table th{
    padding:10px 12px;
    font-size:10px;
  }
  .data-table td{
    padding:11px 12px;
  }
  .empty-row td{
    padding-top:28px;
    padding-bottom:28px;
  }
  .empty-row .empty-state{
    width:calc(100vw - 44px);
    max-width:calc(100vw - 44px);
    padding-inline:12px;
  }
}

/* SGCORE R4 canonical grouped navigation */
.nav-group-label{
  margin:16px 10px 6px;
  padding:0 4px;
  font-size:10px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.72;
}
.sidebar-nav > .nav-group-label:first-child{margin-top:4px}
.sidebar-collapsed .nav-group-label{display:none}
.sidebar-collapsed .sidebar-nav{padding-top:6px}
@media (max-width:900px){
  .nav-group-label{
    margin-top:18px;
    margin-left:8px;
    margin-right:8px;
    font-size:10px;
  }
}

/* SGCORE R4 sidebar vertical scroll restore */
.sidebar{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sidebar .brand-row{
  flex:0 0 auto;
}
.sidebar-nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  padding-bottom:max(20px,env(safe-area-inset-bottom));
}
.sidebar-nav::-webkit-scrollbar{
  width:6px;
}
.sidebar-nav::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--muted) 35%,transparent);
  border-radius:999px;
}
.sidebar-nav::-webkit-scrollbar-track{
  background:transparent;
}

@media (max-width:900px){
  .sidebar{
    height:100dvh;
    max-height:100dvh;
  }
  .sidebar-nav{
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }
}

/* SGCORE R4 soft sidebar scrollbar polish */
.sidebar-nav{
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  scrollbar-gutter:auto;
}
.sidebar-nav::-webkit-scrollbar{
  width:4px;
}
.sidebar-nav::-webkit-scrollbar-track{
  background:transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:999px;
  transition:background .18s ease;
}
.sidebar:hover .sidebar-nav{
  scrollbar-color:color-mix(in srgb,var(--muted) 28%,transparent) transparent;
}
.sidebar:hover .sidebar-nav::-webkit-scrollbar-thumb,
.sidebar-nav:focus-within::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--muted) 28%,transparent);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--muted) 46%,transparent);
}

@media (max-width:900px){
  .sidebar-nav{
    scrollbar-width:none;
  }
  .sidebar-nav::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
}

/* SGCORE R5 reusable UI sheet */
.ui-sheet{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  pointer-events:none;
}
.ui-sheet.is-open{
  display:block;
  pointer-events:auto;
}
.ui-sheet-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  margin:0;
  padding:0;
  background:color-mix(in srgb,var(--text) 32%,transparent);
  cursor:default;
}
.ui-sheet-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(460px,92vw);
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:0 18px 60px color-mix(in srgb,var(--text) 18%,transparent);
  overflow:hidden;
}
.ui-sheet-head{
  flex:0 0 auto;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border);
}
.ui-sheet-head h2{
  margin:3px 0 5px;
}
.ui-sheet-head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.ui-sheet-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:18px 20px max(22px,env(safe-area-inset-bottom));
}
.ui-sheet-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.ui-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.ui-choice-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  min-width:0;
  padding:13px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  cursor:pointer;
}
.ui-choice-card:has(input:checked){
  border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent);
}
.ui-choice-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.ui-choice-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  color:var(--primary);
}
.ui-choice-card strong,
.ui-choice-card small{
  display:block;
}
.ui-choice-card small{
  margin-top:3px;
  color:var(--muted);
  line-height:1.35;
}
.field-error{
  display:block;
  margin-top:6px;
  color:var(--danger);
}
.notice.soft{
  margin-top:14px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 95%,var(--text));
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.detail-list{
  display:grid;
  gap:0;
  margin:0;
}
.detail-list > div{
  display:grid;
  grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.detail-list dt{
  color:var(--muted);
  font-size:13px;
}
.detail-list dd{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
}
.table-subtext{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}
.sgcore-sheet-open{
  overflow:hidden;
}
@media (max-width:900px){
  .ui-sheet-panel{
    top:auto;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:auto;
    max-height:min(88dvh,760px);
    border-left:0;
    border-top:1px solid var(--border);
    border-radius:20px 20px 0 0;
  }
  .ui-sheet-head{
    padding:16px 16px 13px;
  }
  .ui-sheet-body{
    padding:15px 16px max(18px,env(safe-area-inset-bottom));
  }
  .ui-choice-grid{
    grid-template-columns:1fr;
  }
  .detail-list > div{
    grid-template-columns:1fr;
    gap:4px;
  }
}

/* SGCORE R5 fieldset normalization */
.ui-sheet fieldset.field{
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.ui-sheet fieldset.field > legend{
  width:100%;
  margin:0 0 8px;
  padding:0;
  color:var(--text);
  font:inherit;
  font-weight:600;
}
.ui-sheet .ui-choice-grid + .field-error{
  margin-top:7px;
}

/* SGCORE R14 global semantic pagination */
.sg-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
  padding:14px 16px;
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:12px;
  line-height:1.3;
}
.sg-pagination-summary{
  color:var(--muted);
  min-width:0;
}
.sg-pagination-summary strong{
  color:var(--text);
  font-weight:800;
}
.sg-pagination-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
  min-width:0;
}
.sg-pagination-pages{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.sg-page-btn,
.sg-page-number{
  min-width:40px;
  min-height:40px;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font:inherit;
  font-weight:750;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.sg-page-btn:hover,
.sg-page-number:hover{
  background:var(--primary-soft);
  border-color:color-mix(in srgb,var(--primary) 36%,var(--border));
  color:var(--primary-strong);
}
.sg-page-btn:focus-visible,
.sg-page-number:focus-visible{
  outline:2px solid color-mix(in srgb,var(--primary) 58%,transparent);
  outline-offset:2px;
}
.sg-page-number.is-current{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  cursor:default;
}
.sg-page-btn.is-disabled{
  opacity:.48;
  cursor:not-allowed;
  pointer-events:none;
}
.sg-page-ellipsis{
  min-width:26px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}
.sg-pagination-simple .sg-pagination-controls{
  margin-left:auto;
}

@media (max-width:599px){
  .sg-pagination{
    align-items:stretch;
    padding:12px;
    gap:10px;
  }
  .sg-pagination-summary{
    width:100%;
    font-size:11px;
  }
  .sg-pagination-controls{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
  }
  .sg-pagination-pages{
    display:none;
  }
  .sg-page-btn{
    width:100%;
  }
}

/* SGCORE R15-R2-R2 Balasan Otomatis global UI alignment */
.auto-reply-row-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}
.auto-reply-row-actions form{
  display:inline-flex;
  margin:0;
}
.auto-reply-row-actions .icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
}
.auto-reply-sheet-panel{
  width:min(580px,94vw);
}
.auto-reply-sheet-body{
  padding-bottom:0;
}
.auto-reply-sheet-body .form-grid{
  padding:0;
  gap:14px;
}
.auto-reply-sheet-body .field{
  min-width:0;
}
.auto-reply-sheet-body .field > small,
.auto-reply-sheet-body .field-error{
  line-height:1.4;
}
.auto-reply-sheet-body textarea[name="reply_text"]{
  min-height:132px;
}
.auto-reply-switch-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  cursor:pointer;
}
.sg-switch-control{
  position:relative;
  width:44px;
  height:24px;
  flex:0 0 44px;
}
.sg-switch-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.sg-switch-track{
  position:absolute;
  inset:0;
  display:block;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.sg-switch-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--muted);
  transition:transform .18s ease,background .18s ease;
}
.sg-switch-input:checked + .sg-switch-track{
  border-color:var(--primary);
  background:var(--primary);
}
.sg-switch-input:checked + .sg-switch-track .sg-switch-thumb{
  background:var(--surface);
  transform:translateX(20px);
}
.sg-switch-input:focus-visible + .sg-switch-track{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);
}
.sg-switch-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
}
.sg-switch-copy strong{
  font-size:13px;
}
.sg-switch-copy small{
  color:var(--muted);
  line-height:1.4;
}
.auto-reply-sheet-body .ui-sheet-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  margin:18px -20px 0;
  padding:14px 20px max(14px,env(safe-area-inset-bottom));
  background:var(--surface);
  box-shadow:0 -10px 24px color-mix(in srgb,var(--text) 7%,transparent);
}
@media (max-width:900px){
  .auto-reply-sheet-panel{
    width:100%;
  }
  .auto-reply-sheet-body .form-grid{
    grid-template-columns:1fr;
  }
  .auto-reply-sheet-body .ui-sheet-actions{
    margin-inline:-16px;
    padding-inline:16px;
  }
}

/* SGCORE R15-R2-R4 Balasan Otomatis behavior workspace */
.auto-reply-panel-head{
  align-items:flex-start;
  gap:16px;
}
.auto-reply-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.auto-reply-search{
  display:flex;
  align-items:center;
  gap:6px;
}
.auto-reply-search input{
  width:min(270px,32vw);
  min-height:40px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text);
  padding:9px 12px;
  outline:none;
}
.auto-reply-search input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);
}
.auto-reply-table{
  min-width:1080px;
}
.auto-reply-behavior-badges{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  min-width:120px;
}
.auto-reply-form-section{
  padding:0 20px 18px;
}
.auto-reply-form-section + .auto-reply-form-section{
  padding-top:18px;
  border-top:1px solid var(--border);
}
.auto-reply-section-head{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:12px;
}
.auto-reply-section-head strong{
  font-size:14px;
}
.auto-reply-section-head span{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.auto-reply-form-section .form-grid{
  padding:0;
}
.auto-reply-delay-input{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.auto-reply-delay-input > span{
  color:var(--muted);
  font-size:12px;
}
.auto-reply-switch-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.auto-reply-sheet-panel{
  width:min(700px,calc(100vw - 32px));
  max-width:700px;
}
.auto-reply-sheet-body{
  padding-top:18px;
}
.auto-reply-sheet-body > .ui-sheet-actions{
  margin-top:0;
}
@media (max-width:900px){
  .auto-reply-panel-head{
    align-items:stretch;
  }
  .auto-reply-toolbar{
    justify-content:stretch;
  }
  .auto-reply-search{
    flex:1 1 100%;
  }
  .auto-reply-search input{
    width:100%;
  }
  .auto-reply-toolbar > .btn{
    width:100%;
    justify-content:center;
  }
  .auto-reply-sheet-panel{
    width:100%;
    max-width:none;
  }
  .auto-reply-switch-grid{
    grid-template-columns:1fr;
  }
  .auto-reply-form-section{
    padding-inline:16px;
  }
}

/* SGCORE R15-R4-R3-R5 Balasan Otomatis desktop textarea + mobile keyboard polish */
.auto-reply-sheet-body [data-auto-reply-type-panel],
.auto-reply-sheet-body [data-auto-reply-type-panel] .form-grid,
.auto-reply-sheet-body [data-auto-reply-type-panel] .field,
.auto-reply-sheet-body textarea{
  min-inline-size:0;
}
.auto-reply-sheet-body textarea{
  width:100%;
  max-width:none;
  resize:vertical;
}

@media (min-width:901px){
  .auto-reply-sheet-panel{
    width:min(960px,calc(100vw - 48px));
    max-width:960px;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel] textarea{
    min-height:132px;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel="text"] textarea{
    min-height:172px;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel="poll"] textarea{
    min-height:154px;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel="image"] > .form-grid,
  .auto-reply-sheet-body [data-auto-reply-type-panel="document"] > .form-grid,
  .auto-reply-sheet-body [data-auto-reply-type-panel="video"] > .form-grid{
    grid-template-columns:minmax(250px,.8fr) minmax(0,1.65fr);
    align-items:start;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel="image"] > .form-grid > .send-test-full-field,
  .auto-reply-sheet-body [data-auto-reply-type-panel="document"] > .form-grid > .send-test-full-field,
  .auto-reply-sheet-body [data-auto-reply-type-panel="video"] > .form-grid > .send-test-full-field{
    grid-column:auto;
  }
}

@media (max-width:900px){
  .auto-reply-sheet-body{
    scroll-padding-top:24px;
    scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }

  .auto-reply-sheet-body textarea,
  .auto-reply-sheet-body input[type="text"],
  .auto-reply-sheet-body input[type="search"],
  .auto-reply-sheet-body input[type="number"],
  .auto-reply-sheet-body input[type="tel"],
  .auto-reply-sheet-body input[type="email"]{
    font-size:16px;
  }

  .auto-reply-sheet-body textarea{
    min-height:112px;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel] > .form-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel] > .form-grid > *{
    grid-column:1 / -1;
  }

  .auto-reply-sheet-body .field{
    scroll-margin-block:90px;
  }

  .auto-reply-sheet-panel.is-keyboard-open .ui-sheet-actions{
    display:none;
  }

  .auto-reply-sheet-panel.is-keyboard-open .auto-reply-sheet-body{
    padding-bottom:max(20px,env(safe-area-inset-bottom));
    scroll-padding-bottom:28px;
  }
}

/* SGCORE R15-R4-R3-R5-R1 Balasan Otomatis explicit full-span + iOS focus-first keyboard fix */
@media (min-width:901px){
  .auto-reply-sheet-body .auto-reply-reply-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }

  .auto-reply-sheet-body .auto-reply-reply-grid > [data-auto-reply-type-panel]{
    grid-column:1 / -1 !important;
    inline-size:100%;
    width:100%;
    max-width:none;
  }

  .auto-reply-sheet-body .auto-reply-media-grid{
    inline-size:100%;
    width:100%;
    max-width:none;
    grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr) !important;
    align-items:start;
  }

  .auto-reply-sheet-body .auto-reply-media-grid > .field{
    grid-column:auto !important;
    inline-size:100%;
    width:100%;
    max-width:none;
  }

  .auto-reply-sheet-body .auto-reply-media-grid textarea{
    inline-size:100%;
    width:100%;
    min-height:148px;
  }

  .auto-reply-sheet-body .auto-reply-poll-grid{
    inline-size:100%;
    width:100%;
    max-width:none;
    grid-template-columns:minmax(0,1fr) minmax(220px,.42fr);
  }

  .auto-reply-sheet-body .auto-reply-poll-grid > .send-test-full-field{
    grid-column:1 / -1 !important;
    inline-size:100%;
    width:100%;
    max-width:none;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel="text"]{
    grid-column:1 / -1 !important;
    inline-size:100%;
    width:100%;
    max-width:none;
  }

  .auto-reply-sheet-body [data-auto-reply-type-panel="text"] .field,
  .auto-reply-sheet-body [data-auto-reply-type-panel="text"] textarea{
    inline-size:100%;
    width:100%;
    max-width:none;
  }
}

@media (max-width:900px){
  .auto-reply-sheet-panel.is-keyboard-open{
    max-height:min(100dvh,var(--auto-reply-visual-height,100dvh));
  }

  .auto-reply-sheet-panel.is-keyboard-open .ui-sheet-actions{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .auto-reply-sheet-panel.is-keyboard-open .auto-reply-sheet-body{
    padding-bottom:max(28px,env(safe-area-inset-bottom)) !important;
    scroll-padding-top:24px;
    scroll-padding-bottom:48px !important;
  }

  .auto-reply-sheet-body .auto-reply-reply-grid,
  .auto-reply-sheet-body .auto-reply-media-grid,
  .auto-reply-sheet-body .auto-reply-poll-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .auto-reply-sheet-body .auto-reply-reply-grid > *,
  .auto-reply-sheet-body .auto-reply-media-grid > *,
  .auto-reply-sheet-body .auto-reply-poll-grid > *{
    grid-column:1 / -1 !important;
    min-inline-size:0;
    inline-size:100%;
    width:100%;
    max-width:none;
  }
}

/* SGCORE R22-R2-R2 GLOBAL CONTROL + SCROLLBAR POLISH */
:root{
  --ui-scrollbar-thumb:color-mix(in srgb,var(--muted) 42%,transparent);
  --ui-scrollbar-thumb-hover:color-mix(in srgb,var(--muted) 64%,transparent);
  --ui-checkbox-border:color-mix(in srgb,var(--muted) 54%,var(--border));
}

input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  inline-size:18px!important;
  block-size:18px!important;
  min-inline-size:18px!important;
  min-block-size:18px!important;
  margin:0;
  padding:0!important;
  border:1.5px solid var(--ui-checkbox-border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  display:inline-grid;
  place-content:center;
  vertical-align:middle;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease;
}
input[type="checkbox"]::before{
  content:"";
  inline-size:9px;
  block-size:9px;
  transform:scale(0);
  transform-origin:center;
  box-shadow:inset 1em 1em var(--surface);
  clip-path:polygon(14% 44%,0 59%,42% 100%,100% 19%,84% 4%,40% 63%);
  transition:transform .14s ease;
}
input[type="checkbox"]:hover:not(:checked):not(:indeterminate):not(:disabled){
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,var(--surface));
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate{
  border-color:var(--primary);
  background:var(--primary);
}
input[type="checkbox"]:checked::before{transform:scale(1)}
input[type="checkbox"]:indeterminate::before{
  inline-size:9px;
  block-size:2px;
  border-radius:999px;
  clip-path:none;
  transform:scale(1);
  box-shadow:none;
  background:var(--surface);
}
input[type="checkbox"]:focus-visible{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent);
}
input[type="checkbox"]:active:not(:disabled){transform:scale(.94)}
input[type="checkbox"]:disabled{cursor:not-allowed;opacity:.5}

html,
body,
.table-scroll,
.bottom-sheet,
.fm-modal-card,
.modal-card{
  scrollbar-width:thin!important;
  scrollbar-color:var(--ui-scrollbar-thumb) transparent!important;
}
html{scrollbar-gutter:stable}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.bottom-sheet::-webkit-scrollbar,
.fm-modal-card::-webkit-scrollbar,
.modal-card::-webkit-scrollbar{
  inline-size:10px!important;
  block-size:10px!important;
  width:10px!important;
  height:10px!important;
  display:block!important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.bottom-sheet::-webkit-scrollbar-track,
.fm-modal-card::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track{
  background:transparent!important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.bottom-sheet::-webkit-scrollbar-thumb,
.fm-modal-card::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb{
  min-block-size:36px;
  border:3px solid transparent;
  border-radius:999px;
  background:var(--ui-scrollbar-thumb)!important;
  background-clip:padding-box!important;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.bottom-sheet::-webkit-scrollbar-thumb:hover,
.fm-modal-card::-webkit-scrollbar-thumb:hover,
.modal-card::-webkit-scrollbar-thumb:hover{
  background:var(--ui-scrollbar-thumb-hover)!important;
  background-clip:padding-box!important;
}

.table-scroll{
  scrollbar-width:thin!important;
}
.table-scroll::-webkit-scrollbar{
  display:block!important;
  width:10px!important;
  height:10px!important;
}
#webhookSheet .bottom-sheet{
  scrollbar-width:thin!important;
  -ms-overflow-style:auto!important;
}
#webhookSheet .bottom-sheet::-webkit-scrollbar{
  display:block!important;
  width:10px!important;
  height:10px!important;
}

/* SGCORE R22-R2-R3 AUTH LOGIN CONTROL POLISH */
.auth-card .field input:not([type="checkbox"]){
  background:color-mix(in srgb,var(--surface-2) 68%,var(--surface));
  border-color:color-mix(in srgb,var(--border) 88%,var(--muted));
  color:var(--text);
  caret-color:var(--primary);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 75%,transparent);
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.auth-card .field input:not([type="checkbox"]):hover{
  border-color:color-mix(in srgb,var(--primary) 34%,var(--border));
}
.auth-card .field input:not([type="checkbox"]):focus{
  background:var(--surface);
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);
}
.auth-card .field input::placeholder{
  color:color-mix(in srgb,var(--muted) 82%,transparent);
  opacity:1;
}

/* Keep Chrome/Edge password-manager/autofill paint inside SGCORE theme. */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--primary)!important;
  border-color:var(--border)!important;
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset!important;
  box-shadow:0 0 0 1000px var(--surface-2) inset!important;
  transition:background-color 9999s ease-out 0s;
}
.auth-card input:-webkit-autofill:focus{
  border-color:var(--primary)!important;
  -webkit-box-shadow:
    0 0 0 1000px var(--surface) inset,
    0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)!important;
  box-shadow:
    0 0 0 1000px var(--surface) inset,
    0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)!important;
}

/* Auth checkbox gets a little more visual presence while preserving global states. */
.auth-card .check-row input[type="checkbox"]{
  inline-size:18px!important;
  block-size:18px!important;
  min-inline-size:18px!important;
  min-block-size:18px!important;
  border-width:1.5px;
  border-color:color-mix(in srgb,var(--muted) 58%,var(--border));
  background:var(--surface);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text) 8%,transparent);
}
.auth-card .check-row input[type="checkbox"]:hover:not(:checked):not(:indeterminate):not(:disabled){
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
}
.auth-card .check-row input[type="checkbox"]:checked,
.auth-card .check-row input[type="checkbox"]:indeterminate{
  border-color:var(--primary);
  background:var(--primary);
}
.auth-card .check-row{
  gap:10px;
  min-height:28px;
}


/* SGCORE R22-R2-R4 AUTH BRAND TYPOGRAPHY RHYTHM */
.auth-brand .auth-wordmark{
  margin-top:12px;
  line-height:1.08;
  letter-spacing:-.02em;
}
.auth-brand > p{
  margin:5px 0 0;
  line-height:1.45;
  max-width:280px;
  text-wrap:balance;
}
@media(max-width:760px){
  .auth-brand .auth-wordmark{
    margin-top:9px;
  }
  .auth-brand > p{
    margin-top:4px;
    max-width:240px;
  }
}

/* SGCORE R22-R2-R6 GLOBAL PASSWORD VISIBILITY */
.sg-password-shell{
  position:relative;
  display:block;
  inline-size:100%;
  min-inline-size:0;
}
.sg-password-shell > input{
  inline-size:100%;
  padding-inline-end:52px!important;
}
.sg-password-toggle{
  position:absolute;
  inset-inline-end:4px;
  inset-block-start:50%;
  transform:translateY(-50%);
  inline-size:40px;
  block-size:40px;
  min-inline-size:40px;
  min-block-size:40px;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:2;
  transition:color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.sg-password-toggle:hover{
  color:var(--text);
  background:color-mix(in srgb,var(--primary) 8%,transparent);
}
.sg-password-toggle:focus-visible{
  outline:none;
  color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);
}
.sg-password-toggle:disabled{
  cursor:not-allowed;
  opacity:.45;
}
.sg-password-toggle svg{
  inline-size:19px;
  block-size:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.sg-password-toggle [data-password-eye-off]{
  display:none;
}
.sg-password-toggle[aria-pressed="true"] [data-password-eye]{
  display:none;
}
.sg-password-toggle[aria-pressed="true"] [data-password-eye-off]{
  display:block;
}



/* SGCORE R22-R2-R6-R1 CHECKBOX CHECKED-HOVER STABILITY */
input[type="checkbox"]:checked:hover:not(:disabled),
input[type="checkbox"]:indeterminate:hover:not(:disabled){
  border-color:var(--primary);
  background:var(--primary);
}
.auth-card .check-row input[type="checkbox"]:checked:hover:not(:disabled),
.auth-card .check-row input[type="checkbox"]:indeterminate:hover:not(:disabled){
  border-color:var(--primary);
  background:var(--primary);
}

/* SGCORE R24 — subscription user status / plans / device upgrades */
.subscription-shell{display:grid;gap:18px;min-width:0}
.subscription-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:16px}
.subscription-card,.subscription-option-card,.subscription-addon-card{min-width:0;border:1px solid var(--border);background:var(--surface);border-radius:16px}
.subscription-card{padding:18px}
.subscription-card-head,.subscription-option-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.subscription-card-head h2,.subscription-option-card h3,.subscription-addon-card h3{margin:4px 0 0}
.subscription-kicker{display:inline-block;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.subscription-copy{margin:12px 0 0;color:var(--muted);line-height:1.55}
.subscription-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.subscription-meta-grid>div{display:grid;gap:4px;padding:12px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface) 92%,var(--primary))}
.subscription-meta-grid span,.subscription-device-number span{color:var(--muted);font-size:12px}
.subscription-meta-grid strong{font-size:14px}
.subscription-device-number{display:grid;gap:3px;margin-top:16px}
.subscription-device-number strong{font-size:22px;letter-spacing:-.02em}
.subscription-meter{height:8px;margin-top:12px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--border) 72%,transparent)}
.subscription-meter>span{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .2s ease}
.subscription-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.subscription-option-card{display:flex;flex-direction:column;padding:17px}
.subscription-price{display:flex;align-items:baseline;gap:7px;margin-top:18px}
.subscription-price strong{font-size:24px;letter-spacing:-.025em}
.subscription-price span{color:var(--muted);font-size:13px}
.subscription-feature-list{display:grid;gap:8px;margin:16px 0 18px;padding-left:20px;color:var(--muted);line-height:1.45}
.subscription-option-action{margin-top:auto;width:100%;justify-content:center}
.subscription-addon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.subscription-addon-card{display:flex;align-items:flex-start;gap:12px;padding:15px}
.subscription-addon-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--primary) 11%,var(--surface));color:var(--primary);font-weight:800}
.subscription-addon-body{min-width:0;flex:1}
.subscription-addon-body p{margin:5px 0 0;color:var(--muted);font-size:13px}
.subscription-addon-price{margin-top:12px;font-weight:750}
@media (max-width:900px){.subscription-hero,.subscription-plan-grid{grid-template-columns:1fr}.subscription-addon-grid{grid-template-columns:1fr}}
@media (max-width:560px){.subscription-card{padding:15px}.subscription-card-head,.subscription-option-top{align-items:flex-start;flex-direction:column}.subscription-meta-grid{grid-template-columns:1fr}}

/* SGCORE R24 R5 — superadmin subscription catalog */
.subscription-admin-shell{display:grid;gap:18px;min-width:0}
.subscription-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.subscription-admin-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.subscription-admin-card{display:grid;gap:15px;min-width:0;padding:17px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.subscription-admin-card .field{margin:0}
.subscription-money-input{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.subscription-money-input>span{padding:0 11px;color:var(--muted);font-weight:700}
.subscription-money-input input{border:0;border-left:1px solid var(--border);border-radius:0;min-width:0}
.subscription-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--border);border-radius:12px}
.subscription-toggle-row>span{display:grid;gap:3px;min-width:0}
.subscription-toggle-row small{color:var(--muted);line-height:1.35}
.subscription-toggle-row input[type="checkbox"]{flex:0 0 auto}
@media (max-width:980px){.subscription-admin-grid,.subscription-admin-grid-3{grid-template-columns:1fr}}
@media (max-width:560px){.subscription-admin-card{padding:15px}.subscription-toggle-row{align-items:flex-start}}

/* SGCORE R24 R5 R2 — manual user subscription management */
.subscription-user-list{display:grid;gap:12px}
.subscription-user-card{display:grid;gap:14px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.subscription-user-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.subscription-user-main h3{margin:3px 0 0}
.subscription-user-main p{margin:4px 0 0;color:var(--muted);font-size:13px}
.subscription-user-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.subscription-user-stats>div{display:grid;gap:3px;padding:10px 11px;border:1px solid var(--border);border-radius:11px}
.subscription-user-stats span{color:var(--muted);font-size:12px}
.subscription-user-stats strong{font-size:13px}
.subscription-user-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.subscription-user-actions form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px}
.subscription-user-actions .field{margin:0;min-width:0}
.subscription-user-hint{margin:0;color:var(--muted);font-size:12px}
@media (max-width:900px){.subscription-user-actions,.subscription-user-stats{grid-template-columns:1fr}.subscription-user-actions form{grid-template-columns:1fr}}
@media (max-width:560px){.subscription-user-main{flex-direction:column}}


/* SGCORE R24 R5 R3 — subscription admin rhythm + global modern number stepper */
.subscription-admin-shell{
  gap:22px;
}
.subscription-admin-shell>.panel{
  overflow:hidden;
}
.subscription-admin-shell>.panel+.panel{
  margin-top:0;
}
.subscription-user-empty{
  min-height:154px;
  padding:30px 20px 32px;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:8px;
  text-align:center;
  border-top:0;
}
.subscription-user-empty strong{
  margin:0;
  font-size:15px;
  line-height:1.35;
}
.subscription-user-empty p{
  margin:0;
  max-width:520px;
  color:var(--muted);
  line-height:1.5;
}
.subscription-admin-shell>.notice:last-child{
  margin:0 2px 2px;
  padding:14px 16px;
  border-radius:14px;
  line-height:1.5;
}
.subscription-admin-card{
  gap:16px;
}
.subscription-admin-card>.btn{
  min-height:42px;
}
.subscription-admin-grid{
  gap:15px;
}
.subscription-user-card{
  box-shadow:none;
}

/* Global number inputs: remove browser-specific legacy spinner UI. */
input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* JS upgrades every number input to this reusable control. */
.sg-number-control{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
}
.sg-number-control>input[type="number"]{
  width:100%;
  padding-right:44px !important;
}
.sg-number-stepper{
  position:absolute;
  z-index:2;
  top:50%;
  right:5px;
  transform:translateY(-50%);
  width:31px;
  height:34px;
  display:grid;
  grid-template-rows:1fr 1fr;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:color-mix(in srgb,var(--surface) 94%,var(--primary));
  box-shadow:0 1px 2px color-mix(in srgb,var(--text) 7%,transparent);
}
.sg-number-step{
  appearance:none;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.sg-number-step:first-child{
  border-bottom:1px solid var(--border);
}
.sg-number-step:hover:not(:disabled),
.sg-number-step:focus-visible{
  background:color-mix(in srgb,var(--primary) 11%,var(--surface));
  color:var(--primary);
  outline:none;
}
.sg-number-step:disabled{
  cursor:not-allowed;
  opacity:.35;
}
.sg-number-step svg{
  width:13px;
  height:13px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.subscription-money-input>.sg-number-control{
  min-width:0;
  height:100%;
}
.subscription-money-input>.sg-number-control>input[type="number"]{
  height:100%;
}
@media (max-width:560px){
  .subscription-admin-shell{gap:16px}
  .subscription-user-empty{min-height:132px;padding:24px 16px 26px}
  .sg-number-stepper{right:4px;width:30px;height:32px}
  .sg-number-control>input[type="number"]{padding-right:42px !important}
}

/* SGCORE R24 R5 R3 R3 — number stepper clarity */
.sg-number-stepper{
  right:6px;
  width:32px;
  height:36px;
  border-color:color-mix(in srgb,var(--border) 72%,var(--text));
  background:color-mix(in srgb,var(--surface) 88%,var(--primary));
  box-shadow:0 1px 3px color-mix(in srgb,var(--text) 10%,transparent);
}
.sg-number-step{
  color:color-mix(in srgb,var(--text) 66%,var(--muted));
}
.sg-number-step:hover:not(:disabled),
.sg-number-step:focus-visible{
  background:color-mix(in srgb,var(--primary) 15%,var(--surface));
  color:var(--primary);
}
.sg-number-step svg{
  width:14px;
  height:14px;
  stroke-width:2.35;
}
.sg-number-control:focus-within .sg-number-stepper{
  border-color:color-mix(in srgb,var(--primary) 48%,var(--border));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 8%,transparent);
}
@media (max-width:560px){
  .sg-number-stepper{right:5px;width:31px;height:34px}
}

/* SGCORE R24 R5 R3 R4 — full subscription admin polish */
.subscription-admin-shell{gap:26px}
.subscription-admin-panel{overflow:hidden;border-radius:18px;box-shadow:0 10px 28px color-mix(in srgb,var(--text) 5%,transparent)}
.subscription-admin-panel-primary{border-color:color-mix(in srgb,var(--primary) 22%,var(--border))}
.subscription-admin-panel-addon{border-color:color-mix(in srgb,var(--primary) 14%,var(--border))}
.subscription-admin-panel-users{border-color:color-mix(in srgb,var(--border) 82%,var(--primary))}
.subscription-admin-section-head{padding-top:18px;padding-bottom:17px}
.subscription-admin-section-head>div{display:grid;gap:3px}
.subscription-admin-section-head h2{margin:0;line-height:1.25}
.subscription-admin-section-head p{margin:1px 0 0;max-width:780px;color:var(--muted);line-height:1.5}
.subscription-admin-eyebrow{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.subscription-admin-grid{gap:16px}
.subscription-admin-card{gap:17px;padding:18px}
.subscription-admin-grid-3 .subscription-admin-card{padding:17px}
.subscription-admin-card .subscription-option-top{min-height:58px}
.subscription-status-badge{flex:0 0 auto;font-size:12px;font-weight:750;white-space:nowrap}
.subscription-toggle-row{min-height:64px;padding:12px 13px}
.subscription-admin-card>.btn{min-height:43px}
.subscription-money-input.sg-money-field{grid-template-columns:auto minmax(0,1fr)}
.subscription-money-input .sg-money-display{width:100%;min-width:0;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.subscription-money-input .sg-money-display:focus{outline:none;box-shadow:none}
.subscription-money-input.sg-money-field:focus-within{border-color:color-mix(in srgb,var(--primary) 48%,var(--border));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 8%,transparent)}
.subscription-user-empty{min-height:190px;padding:34px 22px 36px;gap:9px}
.subscription-user-empty-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:3px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary)}
.subscription-user-empty-icon svg{width:23px;height:23px}
.subscription-user-empty strong{font-size:15px}
.subscription-user-empty p{max-width:560px;font-size:13px}
.subscription-admin-helper-note{display:flex;align-items:flex-start;gap:12px;margin:0 2px 2px;padding:15px 16px;border-radius:15px;background:color-mix(in srgb,var(--primary) 5%,var(--surface));border-color:color-mix(in srgb,var(--primary) 16%,var(--border))}
.subscription-admin-helper-icon{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary)}
.subscription-admin-helper-icon svg{width:18px;height:18px}
.subscription-admin-helper-note>div{display:grid;gap:3px;min-width:0}
.subscription-admin-helper-note strong{font-size:13px}
.subscription-admin-helper-note p{margin:0;color:var(--muted);line-height:1.5}
.sg-number-stepper{right:6px;width:32px;height:36px;border-color:color-mix(in srgb,var(--border) 70%,var(--text));background:color-mix(in srgb,var(--surface) 88%,var(--primary));box-shadow:0 1px 3px color-mix(in srgb,var(--text) 10%,transparent)}
.sg-number-step{color:color-mix(in srgb,var(--text) 68%,var(--muted))}
.sg-number-step:hover:not(:disabled),.sg-number-step:focus-visible{background:color-mix(in srgb,var(--primary) 15%,var(--surface));color:var(--primary)}
.sg-number-step svg{width:14px;height:14px;stroke-width:2.35}
.sg-number-control:focus-within .sg-number-stepper{border-color:color-mix(in srgb,var(--primary) 48%,var(--border));box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 8%,transparent)}
@media (max-width:900px){.subscription-admin-shell{gap:20px}.subscription-admin-panel{border-radius:16px}}
@media (max-width:560px){.subscription-admin-shell{gap:16px}.subscription-admin-section-head{padding-top:15px;padding-bottom:14px}.subscription-admin-card,.subscription-admin-grid-3 .subscription-admin-card{padding:15px}.subscription-user-empty{min-height:158px;padding:28px 16px 30px}.subscription-user-empty-icon{width:42px;height:42px}.subscription-admin-helper-note{padding:13px 14px}.subscription-admin-helper-icon{flex-basis:32px;width:32px;height:32px}.sg-number-stepper{right:5px;width:31px;height:34px}}

/* SGCORE R24 R5 R3 R5 — flash notification and status chips */
.subscription-flash{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 8px 22px color-mix(in srgb,var(--text) 6%,transparent);
  transition:opacity .18s ease,transform .18s ease;
}
.subscription-flash-success{
  border-color:color-mix(in srgb,var(--primary) 30%,var(--border));
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
}
.subscription-flash-error{
  border-color:color-mix(in srgb,#c93737 34%,var(--border));
  background:color-mix(in srgb,#c93737 5%,var(--surface));
}
.subscription-flash-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.subscription-flash-success .subscription-flash-icon{
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 11%,var(--surface));
}
.subscription-flash-error .subscription-flash-icon{
  color:#b52d2d;
  background:color-mix(in srgb,#c93737 10%,var(--surface));
}
.subscription-flash-icon svg{width:18px;height:18px}
.subscription-flash-copy{display:grid;gap:2px;min-width:0;padding-top:1px}
.subscription-flash-copy strong{font-size:13px;line-height:1.35}
.subscription-flash-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.subscription-flash-close{
  appearance:none;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  margin:-2px -2px 0 0;
  padding:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.subscription-flash-close:hover,
.subscription-flash-close:focus-visible{
  background:color-mix(in srgb,var(--border) 55%,transparent);
  color:var(--text);
  outline:none;
}
.subscription-flash-close svg{width:15px;height:15px}
.subscription-flash.is-leaving{opacity:0;transform:translateY(-5px)}
.subscription-flash[hidden]{display:none!important}

/* Canonical active/inactive chips. */
.subscription-status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:4px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
}
.subscription-status-badge::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:999px;
  background:currentColor;
}
.subscription-status-badge.success{
  color:color-mix(in srgb,var(--primary) 82%,var(--text));
  border-color:color-mix(in srgb,var(--primary) 26%,var(--border));
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
}
.subscription-status-badge.soft{
  color:var(--muted);
  border-color:var(--border);
  background:color-mix(in srgb,var(--border) 24%,var(--surface));
}

.subscription-flash + .subscription-admin-panel{margin-top:-4px}

@media (max-width:560px){
  .subscription-flash{gap:10px;padding:12px;border-radius:13px}
  .subscription-flash-icon{width:32px;height:32px}
  .subscription-flash-copy p{font-size:12.5px}
  .subscription-status-badge{min-height:25px;padding:4px 8px}
}

/* SGCORE R24 R5 R5 — user subscription visual polish */
.subscription-user-page{
  display:grid;
  gap:24px;
}
.subscription-user-page>.subscription-flash{
  margin:0;
}
.subscription-flash-warning{
  border-color:color-mix(in srgb,#b7791f 34%,var(--border));
  background:color-mix(in srgb,#b7791f 6%,var(--surface));
}
.subscription-flash-warning .subscription-flash-icon{
  color:#a56512;
  background:color-mix(in srgb,#b7791f 11%,var(--surface));
}

.subscription-user-overview{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  gap:16px;
}
.subscription-user-summary{
  display:grid;
  align-content:start;
  gap:16px;
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 10px 28px color-mix(in srgb,var(--text) 5%,transparent);
}
.subscription-user-summary-status{
  border-color:color-mix(in srgb,var(--primary) 22%,var(--border));
}
.subscription-user-summary-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.subscription-user-summary-title{
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-width:0;
}
.subscription-user-summary-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));
  border-radius:12px;
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
  color:var(--primary);
}
.subscription-user-summary-icon svg{
  width:20px;
  height:20px;
}
.subscription-user-eyebrow{
  display:block;
  margin-bottom:3px;
  color:var(--primary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.subscription-user-summary h2{
  margin:0;
  font-size:22px;
  line-height:1.2;
}
.subscription-user-description{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.subscription-user-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.subscription-user-meta-grid>div{
  display:grid;
  gap:3px;
  min-width:0;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--primary) 10%,var(--border));
  border-radius:12px;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
}
.subscription-user-meta-grid span{
  color:var(--muted);
  font-size:12px;
}
.subscription-user-meta-grid strong{
  min-width:0;
  overflow-wrap:anywhere;
  font-size:13px;
}
.subscription-user-device-number{
  display:grid;
  gap:3px;
}
.subscription-user-device-number strong{
  font-size:26px;
  line-height:1.05;
}
.subscription-user-device-number span{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.subscription-user-meter{
  margin-top:-4px;
}
.subscription-user-slot-copy{
  font-size:12px;
}

.subscription-user-panel{
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 10px 28px color-mix(in srgb,var(--text) 5%,transparent);
}
.subscription-user-panel-plans{
  border-color:color-mix(in srgb,var(--primary) 18%,var(--border));
}
.subscription-user-section-head{
  padding-top:18px;
  padding-bottom:17px;
}
.subscription-user-section-head>div{
  display:grid;
  gap:3px;
}
.subscription-user-section-head h2{
  margin:0;
  line-height:1.25;
}
.subscription-user-section-head p{
  margin:1px 0 0;
  max-width:760px;
  color:var(--muted);
  line-height:1.5;
}

.subscription-user-plan-grid{
  gap:16px;
}
.subscription-user-plan-card{
  display:grid;
  align-content:start;
  gap:16px;
  padding:18px;
}
.subscription-user-plan-card .subscription-option-top{
  min-height:58px;
}
.subscription-user-price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:5px;
}
.subscription-user-price strong{
  font-size:25px;
  letter-spacing:-.02em;
}
.subscription-user-price span{
  color:var(--muted);
  font-size:12px;
}
.subscription-user-feature-list{
  margin:0;
}
.subscription-user-managed-state{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--border) 18%,var(--surface));
  color:var(--muted);
}
.subscription-user-managed-state.is-available{
  border-color:color-mix(in srgb,var(--primary) 20%,var(--border));
  background:color-mix(in srgb,var(--primary) 6%,var(--surface));
  color:color-mix(in srgb,var(--primary) 80%,var(--text));
}
.subscription-user-managed-state>span{
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,currentColor 9%,transparent);
  font-size:12px;
  font-weight:800;
}
.subscription-user-managed-state strong{
  font-size:12px;
  line-height:1.35;
}

.subscription-user-addon-grid{
  gap:14px;
}
.subscription-user-addon-card{
  align-items:flex-start;
  gap:12px;
  padding:15px;
}
.subscription-user-addon-card .subscription-addon-icon{
  margin-top:1px;
}
.subscription-user-addon-card .subscription-option-top{
  gap:10px;
}
.subscription-user-addon-card .subscription-option-top p{
  line-height:1.4;
}
.subscription-user-addon-price{
  margin-top:8px;
  font-size:15px;
  font-weight:800;
}

.subscription-user-helper-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:16px 16px 17px;
  padding:14px 15px;
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));
  border-radius:14px;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
}
.subscription-user-helper-icon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  color:var(--primary);
}
.subscription-user-helper-icon svg{
  width:17px;
  height:17px;
}
.subscription-user-helper-note>div{
  display:grid;
  gap:3px;
  min-width:0;
}
.subscription-user-helper-note strong{
  font-size:13px;
}
.subscription-user-helper-note p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

@media (max-width:980px){
  .subscription-user-overview{
    grid-template-columns:1fr;
  }
}
@media (max-width:700px){
  .subscription-user-page{
    gap:18px;
  }
  .subscription-user-summary,
  .subscription-user-panel{
    border-radius:16px;
  }
  .subscription-user-summary-head{
    flex-direction:column;
  }
  .subscription-user-meta-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:560px){
  .subscription-user-page{
    gap:16px;
  }
  .subscription-user-summary{
    gap:14px;
    padding:15px;
  }
  .subscription-user-summary-icon{
    flex-basis:36px;
    width:36px;
    height:36px;
  }
  .subscription-user-summary h2{
    font-size:20px;
  }
  .subscription-user-section-head{
    padding-top:15px;
    padding-bottom:14px;
  }
  .subscription-user-plan-card{
    padding:15px;
  }
  .subscription-user-price strong{
    font-size:22px;
  }
  .subscription-user-helper-note{
    margin:13px;
    padding:13px;
  }
}


/* SGCORE R1E-R5 role-aware dashboard */
.dashboard-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  margin-bottom:16px;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary-soft) 58%,var(--surface)));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.dashboard-hero h2{margin:7px 0 5px;font-size:21px;line-height:1.25}
.dashboard-hero p{margin:0;max-width:760px;color:var(--muted);font-size:13px;line-height:1.55}
.dashboard-role-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-strong);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
.dashboard-subscription-pill{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:150px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
}
.dashboard-subscription-pill span{font-size:12px;font-weight:800}
.dashboard-subscription-pill small{color:var(--muted);font-size:11px}
.dashboard-subscription-pill.is-active{border-color:color-mix(in srgb,var(--primary) 34%,var(--border))}
.dashboard-subscription-pill.is-critical{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}

.dashboard-alert-stack{
  display:grid;
  gap:10px;
  margin:0 0 16px;
}
.dashboard-alert{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
}
.dashboard-alert-icon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:11px;
  background:var(--surface-2);
}
.dashboard-alert-copy{min-width:0}
.dashboard-alert-copy small{
  display:block;
  margin-bottom:2px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.dashboard-alert-copy strong{display:block;font-size:13px}
.dashboard-alert-copy p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.dashboard-alert.is-attention{
  border-color:color-mix(in srgb,var(--warning) 32%,var(--border));
  background:color-mix(in srgb,var(--warning) 5%,var(--surface));
}
.dashboard-alert.is-attention .dashboard-alert-icon{color:var(--warning);background:color-mix(in srgb,var(--warning) 12%,var(--surface))}
.dashboard-alert.is-urgent{
  border-color:color-mix(in srgb,var(--warning) 55%,var(--border));
  background:color-mix(in srgb,var(--warning) 8%,var(--surface));
}
.dashboard-alert.is-urgent .dashboard-alert-icon{color:var(--warning);background:color-mix(in srgb,var(--warning) 16%,var(--surface))}
.dashboard-alert.is-critical{
  border-color:color-mix(in srgb,var(--danger) 48%,var(--border));
  background:color-mix(in srgb,var(--danger) 7%,var(--surface));
}
.dashboard-alert.is-critical .dashboard-alert-icon{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,var(--surface))}
.dashboard-alert-action{white-space:nowrap}
.dashboard-alert{position:relative;padding-right:48px;transition:opacity .18s ease,transform .18s ease}
.dashboard-alert.is-dismissing{opacity:0;transform:translateY(-4px);pointer-events:none}
.dashboard-alert-dismiss{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:9px;
  color:var(--muted);
}
.dashboard-alert-dismiss:hover{color:var(--text);background:var(--surface-2)}
.dashboard-alert-dismiss:disabled{opacity:.55;cursor:wait}
.dashboard-alert-feedback{
  display:block;
  margin-top:6px;
  color:var(--danger);
  font-size:11px;
  font-weight:700;
  line-height:1.4;
}

.dashboard-two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}
.dashboard-card-panel{margin-bottom:18px}
.dashboard-two-col .dashboard-card-panel{margin-bottom:0}
.dashboard-summary-list{padding:6px 20px 14px}
.dashboard-summary-list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.dashboard-summary-list>div:last-child{border-bottom:0}
.dashboard-summary-list span{color:var(--muted)}
.dashboard-summary-list strong{text-align:right}

.dashboard-chip-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:16px 20px 20px;
}
.dashboard-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
}
.dashboard-chip span{color:var(--muted);font-size:11px;line-height:1.35}
.dashboard-chip strong{font-size:17px}
.dashboard-chip.is-attention{border-color:color-mix(in srgb,var(--warning) 30%,var(--border))}
.dashboard-chip.is-urgent{border-color:color-mix(in srgb,var(--warning) 50%,var(--border))}
.dashboard-chip.is-critical{border-color:color-mix(in srgb,var(--danger) 42%,var(--border))}

.dashboard-action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:16px 20px 20px;
}
.dashboard-action-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  transition:.18s ease;
}
.dashboard-action-card:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--border));background:var(--primary-soft)}
.dashboard-action-card>span{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:10px;
}
.dashboard-action-card strong{font-size:12px}
.dashboard-action-card small{color:var(--muted);font-size:10px;font-weight:750}

.dashboard-devices-panel{margin-top:0}
.dashboard-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.dashboard-status.is-success{color:var(--primary-strong);background:var(--primary-soft)}
.dashboard-status.is-attention{color:var(--warning);background:color-mix(in srgb,var(--warning) 12%,var(--surface))}
.dashboard-status.is-critical{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--surface))}

@media (max-width:900px){
  .dashboard-two-col{grid-template-columns:1fr}
}
@media (max-width:599px){
  .dashboard-hero{padding:15px 14px;flex-direction:column}
  .dashboard-hero h2{font-size:18px}
  .dashboard-subscription-pill{width:100%;min-width:0}
  .dashboard-alert{grid-template-columns:auto minmax(0,1fr)}
  .dashboard-alert-action{grid-column:1/-1;width:100%;justify-content:center}
  .dashboard-chip-grid,.dashboard-action-grid{padding:14px;grid-template-columns:1fr}
  .dashboard-summary-list{padding-inline:14px}
}


/* R1E-R5-R2-R4 dashboard hierarchy: page header -> metrics -> alerts -> detail panels */
.stats-grid + .dashboard-alert-stack{
  margin-top:0;
}


/* SGCORE R1E-R7 role-aware canonical Audit Log */
.audit-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.audit-intro h2{margin:0;font-size:18px}.audit-intro p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.55;max-width:760px}
.audit-readonly-badge{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:800}
.audit-filter-panel{margin-bottom:18px}
.audit-filter-grid{padding:18px 20px;display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(150px,.8fr));gap:14px;align-items:end}
.audit-filter-grid .field input,.audit-filter-grid .field select{background:var(--surface)}
.audit-search-input{position:relative}.audit-search-input .ui-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.audit-search-input input{padding-left:38px!important}
.audit-filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-height:44px}
.audit-table{min-width:980px}.audit-time-cell strong{white-space:nowrap}
.audit-actor,.audit-event-cell,.audit-target{display:flex;flex-direction:column;gap:3px;min-width:0}.audit-actor strong,.audit-event-cell strong,.audit-target strong{font-size:13px}.audit-actor span,.audit-event-cell span,.audit-target span{color:var(--muted);font-size:11px}
.audit-event-cell{min-width:190px}.audit-target{max-width:240px}.audit-target strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-tenant{display:inline-block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audit-outcome{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800}.audit-outcome.success{color:var(--primary-strong);background:var(--primary-soft)}.audit-outcome.failed{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.audit-detail-btn{width:34px;height:34px;border-radius:10px;margin-left:auto}
.audit-pagination{padding:14px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px}.audit-pagination>div{display:flex;gap:8px}.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.audit-detail-sheet{width:min(760px,100%);max-height:min(88dvh,860px)}
.audit-detail-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.audit-detail-summary h3{margin:4px 0 0;font-size:18px}.audit-detail-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--primary)}
.audit-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}.audit-detail-item{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);min-width:0}.audit-detail-item span{font-size:11px;color:var(--muted);font-weight:750}.audit-detail-item strong{font-size:12px;overflow-wrap:anywhere}.audit-mono{font-family:"SFMono-Regular",Consolas,monospace;font-weight:650!important}
.audit-change-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.audit-change-card,.audit-context-card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface)}.audit-change-card h4,.audit-context-card h4{margin:0 0 10px;font-size:13px}.audit-change-card p{margin:0;color:var(--muted);font-size:12px}
.audit-kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--border)}.audit-kv:first-of-type{border-top:0}.audit-kv span{color:var(--muted);font-size:11px}.audit-kv strong{font-size:11px;text-align:right;overflow-wrap:anywhere;max-width:62%}
.audit-context-card{margin-top:12px}.audit-immutable-note{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:11px 12px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1.5}
@media(max-width:1180px){.audit-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.audit-search-field{grid-column:span 2}}
@media(max-width:760px){.audit-intro{flex-direction:column}.audit-filter-grid{grid-template-columns:1fr;padding:15px}.audit-search-field{grid-column:auto}.audit-filter-actions{justify-content:stretch}.audit-filter-actions .btn{flex:1}.audit-pagination{align-items:flex-start;flex-direction:column}.audit-detail-grid,.audit-change-grid{grid-template-columns:1fr}.audit-detail-sheet{max-height:90dvh}}

/* SGCORE R15 — About, canonical footer & floating Platform help */
.platform-footer{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 18px;
  flex-wrap:wrap;
  padding:14px 24px max(14px,env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.platform-footer-copy{min-width:0;overflow-wrap:anywhere}
.platform-footer-links{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.platform-footer a{color:var(--muted);font-weight:750}
.platform-footer a:hover{color:var(--primary-strong)}

.platform-help-fab{
  position:fixed;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:180;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  max-width:calc(100% - 36px);
  padding:9px 15px 9px 10px;
  border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:13px;
  font-weight:850;
  line-height:1;
  box-shadow:0 14px 34px color-mix(in srgb,var(--text) 18%,transparent);
  transition:transform .16s ease,box-shadow .16s ease;
}
.platform-help-fab:hover{
  transform:translateY(-2px);
  box-shadow:0 17px 40px color-mix(in srgb,var(--text) 22%,transparent);
}
.platform-help-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,#fff 16%,transparent);
}
.platform-help-icon svg{width:18px;height:18px}
.platform-help-label{white-space:nowrap}

.about-page{
  width:100%;
  max-width:920px;
  min-width:0;
  margin:0 auto;
  display:grid;
  gap:18px;
}
.about-card,.about-help-card{min-width:0;overflow:hidden}
.about-card{padding:26px}
.about-brand{display:flex;align-items:center;gap:18px;min-width:0}
.about-logo-frame{
  width:76px;height:76px;flex:0 0 76px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface-2);
  overflow:hidden;
}
.about-logo-frame img{width:62px;height:62px;object-fit:contain}
.about-brand-copy{min-width:0}
.about-brand-copy h2{margin:4px 0 0;font-size:24px;overflow-wrap:anywhere}
.about-brand-copy p{margin:5px 0 0;color:var(--muted);overflow-wrap:anywhere}
.about-divider{height:1px;background:var(--border);margin:22px 0}
.about-description{max-width:760px;color:var(--muted);line-height:1.75}
.about-description p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.about-help-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:24px 26px;
}
.about-help-card h2{margin:4px 0 5px;font-size:19px}
.about-help-card p{margin:0;color:var(--muted);line-height:1.55}
.about-contact-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}

@media (max-width:700px){
  .platform-footer{
    justify-content:center;
    text-align:center;
    padding-inline:14px;
  }
  .platform-footer-links{justify-content:center}
  .platform-help-fab{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
    min-height:44px;
    padding:8px 13px 8px 8px;
  }
  .platform-help-icon{width:28px;height:28px}
  .about-card{padding:18px}
  .about-brand{align-items:flex-start;gap:13px}
  .about-logo-frame{width:60px;height:60px;flex-basis:60px;border-radius:16px}
  .about-logo-frame img{width:48px;height:48px}
  .about-brand-copy h2{font-size:21px}
  .about-divider{margin:18px 0}
  .about-help-card{display:block;padding:18px}
  .about-contact-actions{justify-content:stretch;margin-top:16px}
  .about-contact-actions .btn{width:100%}
}

/* SGCORE R15-R3-R3 — footer bottom, auth mobile help & iOS form zoom polish */

/* Short pages: footer at viewport bottom. Long pages: normal document flow. */
.main-area{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.main-area>.content-wrap{
  flex:1 0 auto;
  width:100%;
  min-width:0;
}
.main-area>.platform-footer{
  flex:0 0 auto;
  margin-top:auto;
}

/* Prevent iOS Safari focus auto-zoom without disabling user pinch zoom. */
@media (max-width:700px){
  .auth-card .field input:not([type="checkbox"]),
  .auth-card .field select,
  .auth-card .field textarea{
    font-size:16px;
  }

  /* Login/Register only: lower and compact the help control on narrow phones. */
  .auth-body .platform-help-fab{
    right:max(8px,env(safe-area-inset-right));
    bottom:max(4px,env(safe-area-inset-bottom));
    width:44px;
    max-width:44px;
    min-height:44px;
    height:44px;
    padding:8px;
    gap:0;
  }
  .auth-body .platform-help-label{
    display:none;
  }
  .auth-body .platform-help-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
}

/* SGCORE-R27-GLOBAL-MOBILE-HEADER-POLISH
   Global AppShell mobile polish: avatar-only profile, compact title,
   sticky topbar, iOS safe-area. Desktop remains unchanged. */
@media (max-width:900px){
  .topbar{
    position:sticky;
    top:0;
    height:calc(64px + env(safe-area-inset-top));
    min-height:calc(64px + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    z-index:20;
  }
  .topbar .profile-chip .profile-copy{
    display:none!important;
  }
  .topbar .profile-chip{
    gap:0;
    min-height:42px;
    padding:4px!important;
  }
  .topbar .profile-chip .profile-dot{
    flex:0 0 36px!important;
  }
  .topbar .page-title{
    font-size:18px;
    line-height:1.08;
    margin:0;
  }
}
@media (max-width:599px){
  .topbar .page-title{
    font-size:17px;
    line-height:1.06;
  }
}