/* NetGuard Modern UI v1
   UI-only design layer. Uses the runtime Theme Manager variables already emitted
   by /theme/runtime.css, so admin-published colors continue to be authoritative. */

:root{
  --ui-field-bg:color-mix(in srgb,var(--surface) 84%,var(--brand) 16%);
  --ui-field-bg-hover:color-mix(in srgb,var(--surface) 78%,var(--brand) 22%);
  --ui-field-border:color-mix(in srgb,var(--line) 70%,var(--brand) 30%);
  --ui-soft:color-mix(in srgb,var(--surface) 88%,var(--bg) 12%);
  --ui-soft-2:color-mix(in srgb,var(--surface-alt,var(--surface)) 78%,var(--brand) 22%);
  --ui-elevated:color-mix(in srgb,var(--surface) 96%,var(--brand) 4%);
  --ui-glass:color-mix(in srgb,var(--surface) 84%,transparent);
  --ui-line-soft:color-mix(in srgb,var(--line) 72%,transparent);
  --ui-brand-soft:color-mix(in srgb,var(--brand) 14%,transparent);
  --ui-accent-soft:color-mix(in srgb,var(--accent,var(--brand)) 16%,transparent);
  --ui-danger-soft:color-mix(in srgb,var(--danger) 14%,transparent);
  --ui-shadow-lg:0 24px 70px rgba(4,20,27,.10),0 3px 14px rgba(4,20,27,.06);
  --ui-shadow-md:0 14px 38px rgba(4,20,27,.09),0 2px 8px rgba(4,20,27,.05);
  --ui-shadow-sm:0 7px 20px rgba(4,20,27,.07);
  --ui-transition:180ms cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(900px 560px at 8% -10%,color-mix(in srgb,var(--accent,var(--brand)) 13%,transparent),transparent 68%),
    radial-gradient(820px 520px at 104% 8%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 66%),
    var(--bg);
  color:var(--ink);
  font-family:"Vazirmatn","Segoe UI Variable Text","Segoe UI",Tahoma,Arial,sans-serif;
  font-size:15px;
  letter-spacing:-.01em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
html[dir="ltr"] body{font-family:"Segoe UI Variable Text","Segoe UI",Inter,Arial,sans-serif}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(color-mix(in srgb,var(--line) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 18%,transparent) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.38),transparent 54%);
}

/* Layout */
.app-shell{grid-template-columns:minmax(0,1fr) var(--sidebar-width);background:transparent}
.shell-content{min-height:100vh;display:flex;flex-direction:column;background:transparent}
.container{width:100%;max-width:1540px;padding:34px clamp(18px,3vw,42px) 86px}
.shell-content>.container{flex:1}
footer{font-size:.82rem;padding:26px;color:var(--muted)}

/* Topbar */
.app-topbar{
  min-height:72px;padding:10px clamp(16px,3vw,42px);gap:12px;
  background:color-mix(in srgb,var(--topbar-bg) 88%,transparent);
  border-bottom:1px solid var(--ui-line-soft);
  box-shadow:0 8px 26px rgba(4,20,27,.035);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.topbar-context{gap:7px;flex-wrap:wrap}
.environment-badge,.safe-badge,.danger-badge{
  min-height:28px;align-items:center;padding:4px 10px;border:1px solid transparent;
  font-size:.68rem;letter-spacing:.045em;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)
}
.environment-badge{background:var(--ui-soft);color:var(--muted);border-color:var(--ui-line-soft)}
.safe-badge{border-color:color-mix(in srgb,var(--success) 26%,transparent)}
.danger-badge{border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.global-search{position:relative;max-width:700px}
.global-search input{min-height:44px;padding-inline:15px;border-radius:14px}
.global-search button{min-height:44px;border-radius:14px;padding-inline:18px}
.locale-switch{padding:3px;border:1px solid var(--ui-line-soft);border-radius:12px;background:var(--ui-soft)}
.locale-switch .link-button{border:0;border-radius:9px;padding:6px 9px;color:var(--muted)}
.locale-switch .link-button:hover{background:var(--surface);color:var(--ink)}
.icon-button{
  width:42px;height:42px;border-radius:13px;border:1px solid var(--ui-line-soft);
  background:var(--ui-soft);box-shadow:none;transition:transform var(--ui-transition),background var(--ui-transition),border-color var(--ui-transition)
}
.icon-button:hover{transform:translateY(-1px);background:var(--ui-field-bg);border-color:var(--ui-field-border)}
.app-topbar>form:last-child .link-button{padding:8px 11px;border-radius:10px;color:var(--muted)}
.app-topbar>form:last-child .link-button:hover{background:var(--ui-danger-soft);color:var(--danger)}

/* Sidebar */
.app-sidebar{
  padding:18px 14px 16px;
  background:
    radial-gradient(440px 340px at 40% -8%,color-mix(in srgb,var(--accent,var(--brand)) 24%,transparent),transparent 68%),
    linear-gradient(180deg,color-mix(in srgb,var(--sidebar-bg) 96%,#000 4%),color-mix(in srgb,var(--sidebar-bg) 82%,#000 18%));
  border-inline-start:1px solid rgba(255,255,255,.06);
  box-shadow:-18px 0 50px rgba(0,0,0,.08)
}
.ui-admin .app-sidebar{background:radial-gradient(440px 340px at 45% -8%,color-mix(in srgb,var(--accent,var(--brand)) 30%,transparent),transparent 68%),linear-gradient(180deg,color-mix(in srgb,var(--sidebar-bg) 94%,#071019 6%),color-mix(in srgb,var(--sidebar-bg) 78%,#050b12 22%))}
.sidebar-brand{padding:5px 7px 18px;border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar-brand>a{gap:12px;min-width:0}
.sidebar-brand strong{font-size:.98rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand small{margin-top:2px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.brand-mark{
  width:44px;min-width:44px;height:44px;padding:0;border-radius:15px;
  background:linear-gradient(145deg,var(--accent,var(--brand)),var(--brand));
  color:var(--on-primary);box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.22)
}
.brand-mark img{width:30px;height:30px}
.sidebar-nav{gap:3px;margin-top:13px}
.nav-section{
  position:relative;margin:18px 11px 6px;padding-inline-start:13px;
  color:color-mix(in srgb,var(--sidebar-muted) 92%,white 8%);font-size:.65rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase
}
.nav-section::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--accent,var(--brand)) 75%,white 25%);transform:translateY(-50%);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,var(--brand)) 14%,transparent)}
.sidebar-nav a{
  position:relative;min-height:43px;padding:9px 11px;border:1px solid transparent;border-radius:12px;
  color:color-mix(in srgb,var(--sidebar-fg) 88%,transparent);font-size:.89rem;font-weight:650;
  transition:background var(--ui-transition),border-color var(--ui-transition),transform var(--ui-transition),color var(--ui-transition)
}
.sidebar-nav a:hover,.sidebar-nav a:focus-visible{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.07);color:#fff;transform:translateX(-2px)}
html[dir="ltr"] .sidebar-nav a:hover,html[dir="ltr"] .sidebar-nav a:focus-visible{transform:translateX(2px)}
.sidebar-nav a>span:first-child{
  display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:9px;
  background:rgba(255,255,255,.06);color:color-mix(in srgb,var(--accent,var(--brand)) 72%,white 28%);font-size:1rem
}
.sidebar-nav a.is-active{
  color:#fff;background:linear-gradient(90deg,color-mix(in srgb,var(--accent,var(--brand)) 22%,transparent),rgba(255,255,255,.08));
  border-color:color-mix(in srgb,var(--accent,var(--brand)) 26%,rgba(255,255,255,.08));
  box-shadow:inset -3px 0 0 color-mix(in srgb,var(--accent,var(--brand)) 72%,white 28%),0 8px 18px rgba(0,0,0,.08)
}
html[dir="ltr"] .sidebar-nav a.is-active{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent,var(--brand)) 72%,white 28%),0 8px 18px rgba(0,0,0,.08)}
.sidebar-nav a.is-active>span:first-child{background:color-mix(in srgb,var(--accent,var(--brand)) 22%,transparent);color:#fff;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent,var(--brand)) 25%,transparent)}
.nav-badge{padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--sidebar-fg);font-size:.62rem}
.sidebar-user{
  margin:22px 2px 0;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:14px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
.sidebar-user strong{font-size:.88rem}.sidebar-user small{font-size:.7rem;margin-top:2px}

/* Page headings and typography */
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.025em}
h1{font-weight:850}.page-head h1{font-size:clamp(1.9rem,3.4vw,3.25rem);margin:.18rem 0 .5rem}
h2{font-size:1.32rem;margin:28px 0 14px}.panel>h2:first-child{margin-top:0}
h3{font-size:1.04rem}.page-head{align-items:center;margin-bottom:28px}
.page-head>div:last-child{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:999px;
  background:var(--ui-brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);
  color:var(--brand);font-size:.7rem;font-weight:850;letter-spacing:.065em
}
.muted,.page-head p{color:var(--muted)}
a{transition:color var(--ui-transition),opacity var(--ui-transition)}

/* Cards / surfaces */
.panel,.service-card,.plan-card,.auth-card,.empty,.stats article,.table-wrap{
  border:1px solid var(--ui-line-soft);
  background:linear-gradient(145deg,var(--ui-elevated),color-mix(in srgb,var(--surface) 97%,transparent));
  box-shadow:var(--ui-shadow-md);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)
}
.panel,.service-card,.plan-card,.auth-card,.empty{border-radius:max(16px,var(--radius))}
.panel{padding:24px;margin-bottom:20px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:17px}
.service-card,.plan-card{position:relative;overflow:hidden;padding:22px;transition:transform var(--ui-transition),box-shadow var(--ui-transition),border-color var(--ui-transition)}
.service-card::before,.plan-card::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--accent,var(--brand)));opacity:.8}
.service-card:hover,.plan-card:hover{transform:translateY(-3px);box-shadow:var(--ui-shadow-lg);border-color:var(--ui-field-border)}
.service-card code{margin-top:4px}
.empty{padding:30px;text-align:center}

/* KPI cards */
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:24px 0 36px}
.stats article{
  position:relative;min-height:118px;padding:20px 19px;overflow:hidden;border-radius:max(15px,calc(var(--radius) - 2px));
  transition:transform var(--ui-transition),box-shadow var(--ui-transition),border-color var(--ui-transition)
}
.stats article::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--accent,var(--brand)));opacity:.75}
.stats article::after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;inset-inline-end:-28px;top:-28px;background:var(--ui-brand-soft);filter:blur(2px)}
.stats article:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-lg);border-color:var(--ui-field-border)}
.stats strong{position:relative;z-index:1;font-size:clamp(1.6rem,2.5vw,2.15rem);line-height:1.1;font-weight:850;font-variant-numeric:tabular-nums}
.stats span{position:relative;z-index:1;display:block;margin-top:9px;color:var(--muted);font-size:.8rem;font-weight:600}

/* Buttons */
.button,button{
  min-height:40px;gap:7px;border-radius:max(10px,var(--button-radius));padding:9px 15px;
  font-weight:750;letter-spacing:-.01em;transition:transform var(--ui-transition),box-shadow var(--ui-transition),background var(--ui-transition),border-color var(--ui-transition),color var(--ui-transition)
}
.button.primary,button:not(.link-button):not(.icon-button){
  border:1px solid color-mix(in srgb,var(--brand) 78%,black 22%);
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 93%,white 7%),color-mix(in srgb,var(--brand-dark) 92%,black 8%));
  color:var(--on-primary);box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 21%,transparent),inset 0 1px 0 rgba(255,255,255,.18)
}
.button.primary:hover,button:not(.link-button):not(.icon-button):hover{transform:translateY(-1px);box-shadow:0 12px 26px color-mix(in srgb,var(--brand) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.2)}
.button.secondary,.secondary{
  border:1px solid var(--ui-line-soft)!important;background:var(--ui-soft)!important;color:var(--ink)!important;box-shadow:none!important
}
.button.secondary:hover,.secondary:hover{background:var(--ui-field-bg)!important;border-color:var(--ui-field-border)!important}
.link-button{min-height:auto;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--link)}
button:disabled,.button[aria-disabled="true"]{transform:none!important;box-shadow:none!important;opacity:.48}

/* Forms: deliberately NOT pure white in light mode and elevated in dark mode */
.stack{display:grid;gap:13px}
.stack p{margin:0;display:grid;gap:6px}
label{font-size:.82rem;font-weight:700;color:color-mix(in srgb,var(--ink) 88%,var(--muted) 12%)}
input,select,textarea{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--ui-field-border)!important;border-radius:max(10px,var(--input-radius));
  outline:none;background:var(--ui-field-bg)!important;color:var(--ink)!important;
  caret-color:var(--brand);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 70%,transparent),0 1px 0 rgba(0,0,0,.015);
  transition:border-color var(--ui-transition),box-shadow var(--ui-transition),background var(--ui-transition),transform var(--ui-transition)
}
textarea{min-height:112px;resize:vertical;line-height:1.65}
select{cursor:pointer}
input:hover,select:hover,textarea:hover{background:var(--ui-field-bg-hover)!important}
input:focus,select:focus,textarea:focus{
  background:color-mix(in srgb,var(--ui-field-bg) 86%,var(--accent,var(--brand)) 14%)!important;
  border-color:color-mix(in srgb,var(--brand) 72%,var(--line) 28%)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--focus,var(--brand)) 15%,transparent),inset 0 1px 0 color-mix(in srgb,var(--surface) 62%,transparent)
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent);opacity:1}
input:disabled,select:disabled,textarea:disabled{background:color-mix(in srgb,var(--bg) 78%,var(--surface) 22%)!important;color:var(--muted)!important;cursor:not-allowed;opacity:.72}
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--brand);box-shadow:none}
input[type="color"]{min-height:44px;padding:4px;cursor:pointer}
input[type="file"]{padding:7px}
input[type="file"]::file-selector-button{margin-inline-end:10px;border:0;border-radius:8px;padding:7px 10px;background:var(--ui-soft-2);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink)!important;
  -webkit-box-shadow:0 0 0 1000px var(--ui-field-bg) inset!important;
  transition:background-color 99999s ease-out 0s
}
.helptext,.help-text,form small{color:var(--muted);font-size:.73rem}
.errorlist{list-style:none;margin:4px 0 0;padding:8px 10px;border-radius:9px;background:var(--ui-danger-soft);color:var(--danger);font-size:.76rem;font-weight:650}

/* Tables */
.table-wrap{border-radius:max(15px,var(--radius));overflow:auto;background:var(--surface)}
table{font-size:.84rem}
th,td{padding:12px 15px;border-bottom:1px solid var(--ui-line-soft);vertical-align:middle}
thead th{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--surface) 92%,var(--bg) 8%);color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.025em;backdrop-filter:blur(12px)}
tbody tr{transition:background var(--ui-transition)}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg) 28%,transparent)}
tbody tr:hover{background:var(--ui-brand-soft)}
tbody tr:last-child td{border-bottom:0}
.table-wrap::-webkit-scrollbar,.app-sidebar::-webkit-scrollbar{height:9px;width:9px}.table-wrap::-webkit-scrollbar-thumb,.app-sidebar::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 30%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}

/* Status, code and notices */
.status{padding:4px 9px;border:1px solid var(--ui-line-soft);background:var(--ui-soft);color:var(--muted);font-weight:700}
.status.active,.success{border-color:color-mix(in srgb,var(--success) 24%,transparent)}
.status.provision_failed,.status.suspended{border-color:color-mix(in srgb,var(--danger) 26%,transparent)}
code{
  padding:4px 8px;border:1px solid var(--ui-line-soft);border-radius:8px;
  background:color-mix(in srgb,var(--bg) 70%,var(--surface) 30%)!important;color:color-mix(in srgb,var(--ink) 90%,var(--brand) 10%)!important;
  font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace;font-size:.88em
}
.notice{
  position:relative;padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--warning) 28%,var(--line) 72%);
  background:color-mix(in srgb,var(--warning) 11%,var(--surface) 89%);color:var(--ink);box-shadow:var(--ui-shadow-sm)
}
.notice.success{border-color:color-mix(in srgb,var(--success) 28%,var(--line) 72%);background:color-mix(in srgb,var(--success) 11%,var(--surface) 89%);color:var(--ink)}
.notice.error{border-color:color-mix(in srgb,var(--danger) 28%,var(--line) 72%);background:color-mix(in srgb,var(--danger) 11%,var(--surface) 89%);color:var(--ink)}
.notice.info{border-color:color-mix(in srgb,var(--info) 28%,var(--line) 72%);background:color-mix(in srgb,var(--info) 10%,var(--surface) 90%);color:var(--ink)}

/* Definition/detail layouts */
dl{gap:0;border:1px solid var(--ui-line-soft);border-radius:14px;overflow:hidden;background:var(--ui-soft)}
dt,dd{padding:10px 12px;border-bottom:1px solid var(--ui-line-soft)}
dt{color:var(--muted);font-size:.78rem}dd{background:color-mix(in srgb,var(--surface) 62%,transparent)}
.detail-grid{gap:18px}
.row{gap:14px}
.inline-actions{gap:9px}
.filter-grid,.form-grid{gap:13px}

/* Authentication / public */
.public-topbar{
  min-height:72px;padding:12px max(20px,calc((100vw - 1240px)/2));
  background:var(--ui-glass);border-bottom:1px solid var(--ui-line-soft);box-shadow:0 8px 28px rgba(4,20,27,.04);
  backdrop-filter:blur(20px) saturate(150%)
}
.public-topbar .brand{display:flex;align-items:center;min-height:44px;color:var(--ink)}
.public-topbar nav{gap:10px}.public-container{position:relative;max-width:1240px;min-height:calc(100vh - 150px);padding-top:48px}
.auth-card{
  position:relative;max-width:540px;padding:36px;margin:34px auto;overflow:hidden;
  box-shadow:var(--ui-shadow-lg)
}
.auth-card::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--accent,var(--brand)))}
.auth-card::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;inset-inline-end:-100px;top:-120px;background:var(--ui-brand-soft);filter:blur(4px);pointer-events:none}
.auth-card>*{position:relative;z-index:1}.auth-card h1{font-size:2rem;margin-top:0}.auth-card .primary{width:100%;min-height:46px;margin-top:6px}
.public-login-art{max-height:300px;border-radius:22px;box-shadow:var(--ui-shadow-lg);border:1px solid var(--ui-line-soft)}

/* Pagination */
.pagination{gap:8px}.pagination a,.pagination span{display:inline-flex;min-height:38px;align-items:center;padding:6px 11px;border:1px solid var(--ui-line-soft);border-radius:10px;background:var(--ui-soft);text-decoration:none}
.pagination a:hover{background:var(--ui-field-bg);border-color:var(--ui-field-border)}

/* Admin control-plane */
.ui-admin .page-head .eyebrow{background:var(--ui-accent-soft);border-color:color-mix(in srgb,var(--accent,var(--brand)) 24%,transparent);color:var(--accent,var(--brand))}
.ui-admin .stats article::before{background:linear-gradient(180deg,var(--accent,var(--brand)),var(--brand))}
.ui-admin .panel{scroll-margin-top:92px}
.theme-preview{border:1px solid var(--ui-line-soft);border-radius:16px;box-shadow:var(--ui-shadow-sm)}
.theme-preview-main{box-shadow:0 10px 30px rgba(0,0,0,.06)}

/* Theme mode-specific polish. Field background remains tinted, never pure white. */
html[data-theme="light"]{--ui-field-bg:color-mix(in srgb,var(--surface) 78%,var(--brand) 22%);--ui-field-bg-hover:color-mix(in srgb,var(--surface) 72%,var(--brand) 28%)}
html[data-theme="dark"]{--ui-shadow-lg:0 26px 74px rgba(0,0,0,.32),0 4px 16px rgba(0,0,0,.16);--ui-shadow-md:0 15px 38px rgba(0,0,0,.24),0 2px 10px rgba(0,0,0,.12);--ui-shadow-sm:0 8px 22px rgba(0,0,0,.18);--ui-field-bg:color-mix(in srgb,var(--surface) 82%,var(--brand) 18%);--ui-field-bg-hover:color-mix(in srgb,var(--surface) 74%,var(--brand) 26%)}
@media(prefers-color-scheme:dark){
  html[data-theme="system"]{--ui-shadow-lg:0 26px 74px rgba(0,0,0,.32),0 4px 16px rgba(0,0,0,.16);--ui-shadow-md:0 15px 38px rgba(0,0,0,.24),0 2px 10px rgba(0,0,0,.12);--ui-shadow-sm:0 8px 22px rgba(0,0,0,.18);--ui-field-bg:color-mix(in srgb,var(--surface) 82%,var(--brand) 18%);--ui-field-bg-hover:color-mix(in srgb,var(--surface) 74%,var(--brand) 26%)}
}

/* Responsive */
@media(max-width:1180px){.container{padding-inline:24px}.stats{grid-template-columns:repeat(auto-fit,minmax(155px,1fr))}}
@media(max-width:980px){
  .app-sidebar{width:min(90vw,320px);box-shadow:-26px 0 70px rgba(0,0,0,.28)}
  html[dir="ltr"] .app-sidebar{box-shadow:26px 0 70px rgba(0,0,0,.28)}
  .drawer-backdrop{backdrop-filter:blur(4px);background:rgba(3,10,14,.56)}
  .container{padding:26px 18px 72px}.app-topbar{min-height:62px}.page-head{align-items:flex-start}
}
@media(max-width:700px){
  .page-head{flex-direction:column;gap:16px}.page-head>div:last-child{justify-content:flex-start}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cards,.detail-grid,.filter-grid,.form-grid,.color-grid{grid-template-columns:1fr}
  .panel,.service-card,.plan-card{padding:18px}.auth-card{padding:26px 20px;margin:18px auto}.public-container{padding-top:28px}
}
@media(max-width:430px){.stats{grid-template-columns:1fr}.stats article{min-height:100px}.container{padding-inline:13px}.public-topbar{padding-inline:14px}.public-topbar nav>a:not(.primary){display:none}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{body::before,.app-sidebar,.app-topbar,.drawer-backdrop{display:none!important}.app-shell{display:block}.container{max-width:none;padding:0}.panel,.stats article,.table-wrap{box-shadow:none!important;break-inside:avoid}}