/* ========== THEME VARIABLES ========== */
:root {
	--font-base: 'Noto Sans TC', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--font-display: 'Sora', 'Noto Sans TC', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--color-bg: #f5f5f7;
	--color-bg-alt: #ffffff;
	--color-bg-soft: #f0f0f2;
	--color-text: #1d1d1f;
	--color-text-dim: #6e6e73;
	--color-primary: #0071e3;
	--color-primary-hover: #0077ed;
	--color-border: #d2d2d7;
	--color-danger: #ef4444;
	--color-warning: #f59e0b;
	--color-success: #16a34a;
	--radius-sm: 10px;
	--radius-md: 16px;
	--radius-lg: 22px;
	--shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
	--shadow-md: 0 18px 40px rgba(17,24,39,.12);
	--transition: .18s cubic-bezier(.2,.8,.2,1);
	--grad-card: linear-gradient(135deg,#ffffff,#f5f5f7 72%);
	--header-bg: rgba(255,255,255,.85);
	--focus-ring: 0 0 0 3px rgba(0,113,227,.18);
}
[data-theme=dark] {
	--color-bg: #0b0b0c;
	--color-bg-alt: #141416;
	--color-bg-soft: #1c1c1e;
	--color-text: #f5f5f7;
	--color-text-dim: #a1a1a6;
	--color-border: #2c2c2e;
	--grad-card: linear-gradient(135deg,#1c1c1e,#141416 70%);
	--shadow-md: 0 18px 45px rgba(0,0,0,.55);
	--header-bg: rgba(20,20,22,.8);
	--focus-ring: 0 0 0 3px rgba(0,113,227,.24);
}

/* ========== GLOBAL ========== */
* { box-sizing: border-box; }
html, body { height:100%; }
body {
	font-family: var(--font-base);
	margin:0;
	background: var(--color-bg);
	color:var(--color-text);
	-webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ========== HEADER / NAV ========== */
.app-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:.72rem 1.15rem; background:var(--header-bg); backdrop-filter:saturate(1.2) blur(10px); box-shadow:var(--shadow-sm); border-bottom:1px solid var(--color-border); }
.brand { font-weight:600; font-size:1rem; color:var(--color-text); }
.nav-left { display:flex; align-items:center; gap:.8rem; }
.nav-main ul { margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:.85rem; }
.nav-main a { color:var(--color-text); font-weight:500; font-size:.85rem; padding:.45rem .7rem; border-radius:var(--radius-sm); transition:var(--transition); }
.nav-main a:hover { background:var(--color-bg-soft); }
.nav-main .btn-primary { background:var(--color-primary); color:#fff !important; }
.nav-main .btn-primary:hover { background:var(--color-primary-hover); }
.btn-ghost { background:transparent; border:1px solid var(--color-border); color:var(--color-text); padding:.4rem .7rem; border-radius:var(--radius-sm); cursor:pointer; font-size:.75rem; }
.btn-ghost:hover { background:var(--color-bg-soft); }
.nav-user { font-size:.75rem; color:var(--color-text-dim); }
.nav-lang { font-size:.78rem; color:var(--color-text-dim); display:flex; align-items:center; gap:.35rem; padding:.3rem .6rem; border-radius:999px; background:var(--color-bg-soft); }
.nav-lang span { font-weight:600; color:var(--color-text); }
.nav-toggle { display:none; background:var(--color-bg-soft); border:1px solid var(--color-border); padding:.45rem .6rem; border-radius:var(--radius-sm); cursor:pointer; }

@media (max-width: 780px) {
	.nav-main { position:absolute; top:56px; left:0; right:0; background:var(--color-bg-alt); padding:.75rem 1rem 1.1rem; display:none; flex-direction:column; box-shadow:var(--shadow-sm); }
	.nav-main.open { display:flex; }
	.nav-main ul { flex-direction:column; align-items:flex-start; gap:.55rem; }
	.nav-toggle { display:block; }
}

/* ========== LAYOUT SHELL ========== */
.page-shell { max-width:1240px; margin:1.4rem auto 2.8rem; padding:0 1.4rem; }
.page-shell--wide { max-width:none; }
.page-shell--auth { max-width:none; margin:0; padding:0; }
.content { background:var(--color-bg-alt); padding:1.45rem 1.65rem 1.9rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--color-border); }
.content--auth { background:transparent; border:none; box-shadow:none; border-radius:0; padding:0; }
.body-auth .app-header {
	background: color-mix(in srgb, var(--header-bg) 78%, transparent);
	border-bottom-color: color-mix(in srgb, var(--color-border) 65%, transparent);
}

/* Flash */
.flash { background:linear-gradient(120deg,#e3f9e6,#d4f2d5); color:var(--color-success); border:1px solid #b2e3b8; padding:.7rem .9rem; border-radius:var(--radius-md); font-size:.82rem; margin-bottom:1rem; box-shadow:var(--shadow-sm); }
[data-theme=dark] .flash { background:linear-gradient(120deg,#203b27,#1a3020); border-color:#284830; }
.flash--error { background:linear-gradient(120deg,#fde2e2,#fecaca); color:var(--color-danger); border-color:color-mix(in srgb, var(--color-danger) 45%, #fff); }
[data-theme=dark] .flash--error { background:linear-gradient(120deg,#3b1f1f,#2a1717); border-color:color-mix(in srgb, var(--color-danger) 40%, #111); }

/* Headings */
h1,h2,h3 { font-weight:600; letter-spacing:.5px; }
h1 { font-size:1.55rem; margin:0 0 .85rem; }
h2 { font-size:1.25rem; margin:1.8rem 0 .7rem; }
h3 { font-size:1.05rem; margin:1.4rem 0 .55rem; }

/* Forms */
form div { margin-bottom:.85rem; }
input[type=text], input[type=password], input[type=email], input[type=number] { padding:.6rem .75rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg-alt); color:var(--color-text); width:260px; font-size:.86rem; transition:var(--transition); }
textarea { padding:.6rem .75rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg-alt); color:var(--color-text); width:100%; max-width:100%; font-size:.86rem; transition:var(--transition); line-height:1.45; }
select { padding:.6rem .75rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg-alt); color:var(--color-text); font-size:.86rem; transition:var(--transition); }
input::placeholder { color: color-mix(in srgb, var(--color-text-dim) 70%, transparent); }
input:focus { outline:none; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); box-shadow: var(--focus-ring); }
textarea:focus { outline:none; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); box-shadow: var(--focus-ring); }
select:focus { outline:none; border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); box-shadow: var(--focus-ring); }
input[readonly] { background: color-mix(in srgb, var(--color-bg-soft) 60%, var(--color-bg-alt)); color: var(--color-text-dim); }
button, .btn, input[type=submit] { cursor:pointer; background:var(--color-primary); color:#fff; border:1px solid color-mix(in srgb, var(--color-primary) 70%, #0000); padding:.62rem 1.1rem; border-radius:999px; font-weight:600; font-size:.85rem; letter-spacing:.2px; box-shadow:var(--shadow-sm); transition:var(--transition); }
button:hover, .btn:hover { background:var(--color-primary-hover); border-color: color-mix(in srgb, var(--color-primary-hover) 70%, #0000); }
button:active { transform:translateY(1px); }
.btn.icon { display:inline-flex; align-items:center; gap:.3rem; }
.btn:focus, button:focus { outline:none; }
.btn:focus-visible, button:focus-visible { box-shadow: var(--focus-ring); }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; cursor:pointer; background:var(--color-primary); color:#fff !important; border:1px solid color-mix(in srgb, var(--color-primary) 70%, #0000); padding:.62rem 1.1rem; border-radius:999px; font-weight:700; font-size:.85rem; letter-spacing:.2px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.btn-primary:hover { background:var(--color-primary-hover); border-color: color-mix(in srgb, var(--color-primary-hover) 70%, #0000); }
.btn.secondary { background:var(--color-bg-soft); color:var(--color-text); }
.btn.secondary:hover { background:var(--color-border); }
.btn.danger { background:var(--color-danger); }
.btn.danger:hover { filter:brightness(.9); }
.btn.outline { background:transparent; border:1px solid var(--color-border); color:var(--color-text); }
.btn.outline:hover { background:var(--color-bg-soft); }
.btn[disabled], button[disabled] { opacity:.55; cursor:not-allowed; box-shadow:none; }

/* Alerts */
.alert { border-radius:var(--radius-md); padding:.7rem .85rem; border:1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg-soft) 72%, transparent); color:var(--color-text); box-shadow:var(--shadow-sm); font-size:.86rem; line-height:1.45; }
.alert.error { border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-alt)); }
.alert.success { border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border)); background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-alt)); }
.alert .mono, .alert code { font-size:.85em; }

/* Order form tweaks */
.order-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: .9rem; }
.order-grid input[type=text],
.order-grid input[type=number],
.order-grid select { width: 100%; max-width: 100%; }
.capacity-note { color: var(--color-text-dim); }
.capacity-count { color: var(--color-primary); font-weight: 700; }
.capacity-error { color: var(--color-danger); font-weight: 600; }

/* Cards / Grid */
.grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:1.2rem; }
.card { background:var(--grad-card); border-radius:var(--radius-lg); padding:1.05rem 1.15rem 1.25rem; box-shadow:var(--shadow-md); position:relative; overflow:hidden; border:1px solid var(--color-border); backdrop-filter:saturate(1.1) blur(6px); }
.card.tight { padding:1.1rem; }
.card.lg { padding:1.25rem; }
.card h3 { margin-top:0; font-size:1rem; }
.card p { font-size:.78rem; line-height:1.35rem; color:var(--color-text-dim); }
.card .btn { font-size:.75rem; margin-top:.55rem; }
[data-theme=dark] .card { box-shadow:none; }

/* Panels / Layout helpers */
.panel { border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1rem; background:var(--color-bg-alt); box-shadow:var(--shadow-sm); }
.panel.soft { background: color-mix(in srgb, var(--color-bg-soft) 55%, var(--color-bg-alt)); }
.panel.dashed { border-style:dashed; }

.hero { margin:0 0 1.5rem 0; padding:1.5rem; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:linear-gradient(135deg, color-mix(in srgb, var(--color-bg-alt) 70%, var(--color-bg-soft)), var(--color-bg-soft)); }
.hero h1 { margin:0 0 .35rem 0; font-size:1.75rem; color:var(--color-text); }
.hero p { margin:0; font-size:.95rem; color:var(--color-text-dim); }
.landing-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); gap:1.5rem; align-items:center; }
.hero-eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--color-text-dim); }
.cta-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.hero-metrics { display:grid; gap:.75rem; }
.metric-card {
	padding:.85rem;
	border-radius:12px;
	border:1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
	background:color-mix(in srgb, var(--color-bg-alt) 88%, transparent);
}
.metric-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--color-text-dim); }
.metric-value { font-size:1.4rem; font-weight:800; margin-top:.3rem; }
.landing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.plan-card {
	padding:1rem;
	border-radius:16px;
	border:1px solid var(--color-border);
	background:var(--color-bg-alt);
	box-shadow:var(--shadow-sm);
}
.plan-title { font-weight:800; font-size:1.1rem; }
.plan-price { display:flex; align-items:flex-end; gap:.35rem; margin:.4rem 0; }
.price-main { font-size:1.6rem; font-weight:900; }
.price-unit { font-size:.85rem; color:var(--color-text-dim); }
.info-card {
	padding:.9rem;
	border-radius:14px;
	border:1px solid var(--color-border);
	background:color-mix(in srgb, var(--color-bg-soft) 70%, transparent);
}
.info-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--color-text-dim); }
.info-value { font-weight:800; margin-top:.35rem; }
.policy-box {
	border-radius:14px;
	border:1px solid var(--color-border);
	background:color-mix(in srgb, var(--color-bg-soft) 80%, transparent);
	padding:1rem;
	line-height:1.6;
	color:var(--color-text);
}

.page-subtitle { margin-top:-.25rem; font-size:.9rem; }

.field { display:flex; flex-direction:column; gap:.35rem; }
.field-label { display:block; font-size:.85rem; color:var(--color-text-dim); font-weight:600; }

.stack { display:flex; flex-direction:column; gap:.6rem; }
.stack-xs { display:flex; flex-direction:column; gap:.35rem; }
.stack-sm { display:flex; flex-direction:column; gap:.45rem; }

.row { display:flex; gap:.8rem; align-items:center; }
.row.wrap { flex-wrap:wrap; }
.row.end { align-items:flex-end; }
.row.between { justify-content:space-between; }
.row.start { justify-content:flex-start; }

.btn-row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.list-unstyled { list-style:none; padding:0; margin:0; }

.note { color:var(--color-text-dim); font-size:.9rem; line-height:1.45; }
.note.sm { font-size:.85rem; }
.note.warn { color: color-mix(in srgb, var(--color-warning) 70%, var(--color-text)); }

.title-row { margin-top:0; display:flex; align-items:center; gap:.55rem; }

.subcard { border:1px solid var(--color-border); border-radius:14px; padding:1rem; background: color-mix(in srgb, var(--color-bg-soft) 40%, var(--color-bg-alt)); }
.subcard .sub-label { display:block; font-size:.8rem; color:var(--color-text-dim); }
.subcard .sub-value { font-size:2rem; color:var(--color-text); }
.subcard.warm { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-alt)); border-color: color-mix(in srgb, var(--color-warning) 20%, var(--color-border)); }
.subcard.warm .sub-label { color: color-mix(in srgb, var(--color-warning) 70%, var(--color-text)); }

.self-start { align-self:flex-start; }
.hidden { display:none !important; }
.nowrap { white-space:nowrap; }
.pre-wrap { white-space:pre-wrap; }
.fw-600 { font-weight:600; }
.text-xs { font-size:.85rem; }
.text-sm { font-size:.9rem; }
.text-md { font-size:.95rem; }
.m-0 { margin:0 !important; }
.mt-0 { margin-top:0 !important; }
.mb-0 { margin-bottom:0 !important; }
.mt-1 { margin-top:.25rem !important; }
.mb-1 { margin-bottom:.25rem !important; }
.mt-4 { margin-top:1.25rem !important; }
.mb-4 { margin-bottom:1.25rem !important; }
.mb-5 { margin-bottom:1.5rem !important; }
.ml-2 { margin-left:.5rem !important; }
.w-160 { width:160px !important; }
.w-180 { width:180px !important; }
.w-120 { width:120px !important; }
.w-140 { width:140px !important; }
.w-200 { width:200px !important; }
.w-220 { width:220px !important; }
.break-all { word-break:break-all; }
.linkish { color:var(--color-primary); font-weight:600; }

.cell-wrap { max-width:360px; white-space:normal; line-height:1.2; }

.dot { font-weight:800; }
.dot.online { color:var(--color-success); }
.dot.offline { color:var(--color-text-dim); }

.list-lines li { padding:.45rem 0; }
.list-lines li + li { border-top:1px solid var(--color-border); }

.item { border:1px solid var(--color-border); border-radius:10px; padding:.6rem; background:var(--color-bg-alt); }
.item.no-pad { padding:.45rem .6rem; }

.wallet-row { display:flex; flex-wrap:wrap; gap:1rem; }
.wallet-balance { flex:1 1 180px; min-width:150px; }
.wallet-topup { flex:2 1 260px; min-width:220px; }

/* Tables */
table { width:100%; border-collapse:collapse; margin-top:1rem; font-size:.78rem; }
th, td { text-align:left; border-bottom:1px solid var(--color-border); padding:.55rem .55rem; }
th { background:var(--color-bg-soft); font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; }
tbody tr { transition:var(--transition); }
tbody tr:hover { background:var(--color-bg-soft); }
tbody tr:nth-child(even) { background:rgba(79,70,229,0.03); }
[data-theme=dark] tbody tr:nth-child(even) { background:rgba(255,255,255,0.03); }

/* Badges */
.badge { display:inline-block; font-size:.63rem; font-weight:600; padding:.28rem .5rem; border-radius:var(--radius-sm); letter-spacing:.5px; text-transform:uppercase; }
.badge.success { background:#d1f7d8; color:#136b22; }
.badge.danger { background:#ffd7d9; color:#8a1c23; }
.badge.info { background:#d7ecff; color:#0d4e91; }
.badge.secondary { background:#e3e7ef; color:#3a4758; }
[data-theme=dark] .badge.secondary { background:#303840; color:#c5d1db; }
.badge.warn { background:#fff3cd; color:#8a6d3b; }
.text-warn { color:#f59e0b; font-weight:700; }

/* Progress mini */
.progress-mini { background:var(--color-bg-soft); border-radius:999px; height:6px; overflow:hidden; position:relative; }
.progress-mini span { display:block; height:100%; background:var(--color-primary); width:0%; transition:width .4s ease; }

/* Footer */
.footer { text-align:center; padding:1.6rem 0 2rem; font-size:.7rem; color:var(--color-text-dim); }

/* Utility */
.m-0 { margin:0 !important; }
.mt-0 { margin-top:0 !important; } .mt-1 { margin-top:.25rem; } .mt-2 { margin-top:.5rem; } .mt-3 { margin-top:.85rem; }
.mb-0 { margin-bottom:0 !important; } .mb-1 { margin-bottom:.25rem; } .mb-2 { margin-bottom:.5rem; } .mb-3 { margin-bottom:.85rem; } .mb-4 { margin-bottom:1.25rem; } .mb-5 { margin-bottom:1.5rem; }
.ml-2 { margin-left:.5rem; } .ml-3 { margin-left:.85rem; }
.flex { display:flex; } .items-center { align-items:center; } .gap-sm { gap:.55rem; } .gap-md { gap:.75rem; } .gap-lg { gap:1rem; }
.text-dim { color:var(--color-text-dim); }
.muted { color:var(--color-text-dim); }
.inline { display:inline; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
code { background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); padding: .15rem .35rem; border-radius: 8px; border: 1px solid var(--color-border); }

/* Homepage tweaks */
.content > h1:first-child { margin-top:.2rem; }

/* Dashboard */
.dashboard-layout { display:flex; gap:1.5rem; align-items:flex-start; }
.dashboard-sidebar { flex:0 0 230px; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.2rem; background: color-mix(in srgb, var(--color-bg-soft) 55%, var(--color-bg-alt)); position:sticky; top:1rem; box-shadow:var(--shadow-sm); }
.dashboard-sidebar h3 { margin:0 0 .75rem 0; font-size:1.05rem; color:var(--color-text); }
.dashboard-nav-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.dashboard-nav-list a { display:flex; justify-content:space-between; align-items:center; gap:.4rem; padding:.6rem .85rem; border:1px solid color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); border-radius:10px; background:var(--color-bg-alt); color:var(--color-text); text-decoration:none; font-weight:500; transition:var(--transition); }
.dashboard-nav-list a:hover { background:var(--color-bg-soft); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.downloads-page { display:flex; flex-direction:column; gap:1.4rem; }
.downloads-hero h1 { margin:0 0 .4rem 0; font-size:1.5rem; }
.downloads-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }
.download-card { display:flex; flex-direction:column; gap:.7rem; }
.download-card__head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.download-card__head h3 { margin:0; font-size:1rem; }
.download-tag { font-size:.7rem; padding:.2rem .5rem; border-radius:999px; border:1px solid var(--color-border); background:var(--color-bg-soft); color:var(--color-text-dim); }
.download-meta { display:grid; gap:.4rem; font-size:.78rem; color:var(--color-text-dim); margin:0; }
.download-meta div { display:flex; justify-content:space-between; gap:.6rem; }
.download-meta dt { font-weight:600; color:var(--color-text); }
.download-meta dd { margin:0; text-align:right; }
.dashboard-main { flex:1 1 auto; }
.dashboard-main .home-hero { margin-top:0; }
.home-feature-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }

.stat-list li { display:flex; justify-content:space-between; padding:.45rem 0; }
.stat-list li + li { border-top:1px solid var(--color-border); }

@media (max-width: 920px) {
	.dashboard-layout { flex-direction:column; }
	.dashboard-sidebar { width:100%; position:static; }
}
@media (max-width: 900px) {
	.landing-hero { grid-template-columns:1fr; }
}

/* Client panel */
.client-layout { display:flex; gap:1.5rem; align-items:flex-start; }
.client-sidebar {
	flex:0 0 230px;
	border:1px solid var(--color-border);
	border-radius:var(--radius-lg);
	padding:1.05rem;
	background: color-mix(in srgb, var(--color-bg-soft) 68%, transparent);
	backdrop-filter:saturate(1.15) blur(8px);
	position:sticky;
	top:1rem;
}
.client-sidebar h3 { margin:0 0 .75rem 0; font-size:1.05rem; color:var(--color-text); letter-spacing:.2px; }
.client-nav { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.client-nav a {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:.4rem;
	padding:.62rem .85rem;
	border:1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
	border-radius:12px;
	background: color-mix(in srgb, var(--color-bg-alt) 82%, transparent);
	color:var(--color-text);
	text-decoration:none;
	font-weight:650;
	transition:var(--transition);
}
.client-nav a:hover { background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.client-main { flex:1 1 auto; }

@media (max-width: 920px) {
	.client-layout { flex-direction:column; }
	.client-sidebar { width:100%; position:static; }
}

/* Account devices page */
.device-row-list { display:grid; gap:0.8rem; }
.device-row {
	display:grid;
	grid-template-columns:minmax(220px,1.4fr) minmax(180px,1fr) minmax(80px,0.4fr);
	gap:1rem;
	align-items:center;
	padding:.85rem 1rem;
	border:1px solid var(--color-border);
	border-radius:14px;
	background:var(--color-bg-alt);
}
.device-row__title { font-weight:800; }
.device-row__meta { font-size:.82rem; color:var(--color-text-dim); margin-top:.2rem; }
.device-row__rename { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; align-items:center; }
.device-rename__input {
	min-width:200px;
	padding:.35rem .55rem;
	border-radius:10px;
	border:1px solid var(--color-border);
	background:var(--color-bg);
	font-size:.82rem;
	color:var(--color-text);
}
.device-rename__input:focus { outline:2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); border-color:var(--color-primary); }
.device-rename__status { min-width:70px; }
.device-row__badges { display:flex; flex-wrap:wrap; gap:.5rem; }
.slot-badge {
	display:inline-flex;
	align-items:center;
	gap:.35rem;
	padding:.2rem .45rem;
	border-radius:999px;
	background:color-mix(in srgb, var(--color-primary) 15%, var(--color-bg-alt));
	border:1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
	font-size:.72rem;
	font-weight:700;
	color:var(--color-text);
}
.slot-badge__icon {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	border-radius:6px;
	background:color-mix(in srgb, var(--color-primary) 22%, transparent);
	font-size:.7rem;
	letter-spacing:.3px;
}
.slot-badge__icon img {
	width:100%;
	height:100%;
	object-fit:contain;
	border-radius:5px;
}
.slot-badge__count { color:var(--color-text); }
.device-row__status { display:flex; justify-content:flex-end; }
.device-row-detail { margin:.4rem 0 .9rem 0; }
.device-row-detail summary { cursor:pointer; font-weight:700; color:var(--color-primary); }
.device-row-detail__body { margin-top:.6rem; display:grid; gap:.8rem; }

@media (max-width: 960px) {
	.device-row { grid-template-columns:1fr; align-items:flex-start; }
	.device-row__status { justify-content:flex-start; }
}

/* Client debug desktop */
.client-main .page-title { margin:0; font-weight:900; letter-spacing:.2px; color:var(--color-text); }
.client-main .page-desc { margin:.5rem 0 0 0; color:var(--color-text-dim); line-height:1.55; }
.client-main .section-title { margin:1.2rem 0 .6rem 0; font-weight:900; color:var(--color-text); letter-spacing:.2px; }

.client-main .tbl { width:100%; border-collapse:collapse; }
.client-main .tbl th, .client-main .tbl td { vertical-align:top; }
.client-main .cell-break { max-width:360px; word-break:break-all; }
.client-main .cell-break-wide { max-width:520px; word-break:break-all; }

.client-main .latest-box { margin:0 0 .75rem 0; padding:.85rem 1rem; border:1px solid var(--color-border); border-radius:14px; background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); font-size:.85rem; }
.client-main .latest-title { font-weight:900; color:var(--color-text); }
.client-main .latest-body { margin-top:.35rem; }

.client-main .events { color:var(--color-text-dim); font-size:.85rem; }
.client-main .raw-details { margin-top:1rem; }
.client-main .raw-details summary { cursor:pointer; font-weight:900; color:var(--color-text); }
.client-main .raw-pre { margin:.6rem 0 0 0; padding:.85rem 1rem; border:1px solid var(--color-border); border-radius:14px; background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); overflow:auto; max-height:320px; }

/* Client index */
.client-index .status-on { color: var(--color-success); }
.client-index .status-off { color: var(--color-text-dim); }
.client-index .status-bold { font-weight:800; }

.client-index .sidebar-block { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--color-border); }
.client-index .sidebar-title { font-weight:850; color:var(--color-text); letter-spacing:.2px; }
.client-index .sidebar-body { margin-top:.5rem; font-size:.9rem; color:var(--color-text-dim); line-height:1.5; }
.client-index .sidebar-loading { color:var(--color-text-dim); }

.client-index .card-title { margin:0; }
.client-index .card-desc { margin:.5rem 0 0 0; color:var(--color-text-dim); }
.client-index .impersonation { margin-top:.5rem; color:var(--color-text-dim); font-size:.9rem; }

.client-index .details-box { margin-top:1rem; padding:1rem; border:1px solid var(--color-border); border-radius:14px; background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); }
.client-index .details-box summary { cursor:pointer; font-weight:850; color:var(--color-text); }
.client-index .details-body { margin-top:.6rem; font-size:.9rem; color:var(--color-text-dim); line-height:1.5; }
.client-index .details-muted { margin-top:.35rem; color:var(--color-text-dim); }
.client-index .details-subtitle { margin-top:.6rem; font-weight:850; color:var(--color-text); }
.client-index .code-box { margin:.35rem 0 0 0; padding:.75rem; border:1px solid var(--color-border); border-radius:12px; background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); overflow:auto; max-height:320px; font-size:12px; line-height:1.45; }

.client-index .panel-box { margin-top:1rem; padding:1rem; border:1px solid var(--color-border); border-radius:14px; background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); }
.client-index .panel-row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.client-index .panel-help { margin-top:.35rem; font-size:.9rem; color:var(--color-text-dim); line-height:1.5; white-space:pre-wrap; }
.client-index .panel-title { font-weight:900; letter-spacing:.04em; color:var(--color-text); }

.client-index .proxy-form { min-width:320px; flex:1 1 420px; }
.client-index .proxy-tools { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.client-index .proxy-status-line { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.client-index .proxy-status-text { color:var(--color-text); font-size:.95rem; }
.client-index .proxy-chip { padding:.18rem .55rem; border-radius:999px; font-size:.8rem; border:1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); color:var(--color-text); }
.client-index .proxy-chip.is-on { border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border)); background: color-mix(in srgb, var(--color-success) 15%, var(--color-bg-alt)); color:var(--color-success); }
.client-index .proxy-chip.is-off { background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); color:var(--color-text-dim); }
.client-index .proxy-chip.is-muted { background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); color:var(--color-text-dim); }
.client-index .proxy-actions { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.client-index .proxy-toggle-form { display:inline; }
.client-index .proxy-grid { display:grid; grid-template-columns: 1fr; gap:.55rem; }
.client-index .proxy-label { display:flex; align-items:center; gap:.45rem; font-size:.95rem; color:var(--color-text); font-weight:800; }
.client-index .proxy-field-title { font-weight:800; color:var(--color-text); }
.client-index .proxy-textarea { width:100%; margin-top:.25rem; padding:.6rem .75rem; border:1px solid var(--color-border); border-radius:12px; resize:vertical; background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); }
.client-index .proxy-field { width:100%; margin-top:.25rem; padding:.6rem .75rem; border:1px solid var(--color-border); border-radius:12px; background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); }
.client-index .proxy-row { margin-top:.35rem; display:flex; gap:.5rem; align-items:center; }
.client-index .proxy-hint { color:var(--color-text-dim); font-size:.85rem; }
.client-index .proxy-colon { text-align:center; color:var(--color-text); padding:.15rem 0; font-weight:900; }
.client-index .proxy-examples { margin-top:.4rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.client-index .proxy-example { font-size:.8rem; padding:.15rem .55rem; border-radius:999px; border:1px dashed var(--color-border); color:var(--color-text-dim); background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); }

.client-index .proxy-dialog { width:min(720px, calc(100vw - 2rem)); border:1px solid var(--color-border); border-radius:16px; padding:0; background:var(--color-bg-alt); box-shadow: var(--shadow-md); }
.client-index .proxy-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.client-index .proxy-dialog__head { padding:1rem 1rem .75rem 1rem; border-bottom:1px solid var(--color-border); }
.client-index .proxy-dialog__title { margin:0; font-size:1rem; font-weight:900; color:var(--color-text); letter-spacing:.2px; }
.client-index .proxy-dialog__body { padding:1rem; }
.client-index .proxy-dialog__foot { padding:.85rem 1rem; border-top:1px solid var(--color-border); display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }

.client-index .provider-summary { margin-top:.95rem; font-size:.95rem; color:var(--color-text); }
.client-index .provider-proxy-box { margin-top:.5rem; padding:.85rem 1rem; border:1px dashed var(--color-border); border-radius:14px; background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); }
.client-index .provider-proxy-info { font-size:.9rem; color:var(--color-text-dim); line-height:1.45; }
.client-index .provider-proxy-note { margin-top:.2rem; color:var(--color-text-dim); }
.client-index .provider-proxy-form { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }

.client-index .slot-card { margin-top:1rem; padding:1rem; border:1px solid var(--color-border); border-radius:16px; background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.client-index .slot-head { display:flex; align-items:center; gap:10px; }
.client-index .slot-icon { width:42px; height:42px; border-radius:12px; object-fit:cover; border:1px solid var(--color-border); background:var(--color-bg-alt); }
.client-index .slot-title { font-weight:900; letter-spacing:.04em; color:var(--color-text); }
.client-index .slot-instruction { margin-top:.35rem; font-size:.9rem; color:var(--color-text-dim); line-height:1.45; }
.client-index .slot-proxy { margin-top:.45rem; font-size:.9rem; color:var(--color-text-dim); line-height:1.45; }
.client-index .slot-proxy-actions { margin-top:.45rem; display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.client-index .slot-form { display:inline; }
.client-index .link-hint { width:100%; font-size:.85rem; color:var(--color-text-dim); margin-top:.25rem; }
.client-index .link-hint strong { color:var(--color-text); }
.client-index .slot-status { width:100%; font-size:.9rem; color:var(--color-text-dim); }
.client-index .slot-status__meta { margin-left:10px; }
.client-index .slot-status__strong { color:var(--color-text); }
.client-index .uid-link { color:var(--color-text); text-decoration:underline; word-break:break-all; }
.client-index .uid-text { color:var(--color-text); word-break:break-all; }

.client-index .debug-box { margin-top:12px; padding:10px 12px; border:1px solid var(--color-border); border-radius:14px; background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); color:var(--color-text-dim); font-size:.85rem; line-height:1.45; }
.client-index .debug-title { font-weight:900; color:var(--color-text); }

/* Client services */
.client-services .pill { display:inline-block; padding:.22rem .55rem; border-radius:999px; font-size:.85rem; border:1px solid var(--color-border); background: color-mix(in srgb, var(--color-bg-soft) 72%, transparent); color:var(--color-text-dim); }
.client-services .status-ok { color:var(--color-success); }
.client-services .status-muted { color:var(--color-text-dim); }
.client-services .cat-card { border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg-alt); overflow:hidden; box-shadow: var(--shadow-sm); }
.client-services .cat-card.is-closed { background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); border-color: color-mix(in srgb, var(--color-primary) 15%, var(--color-border)); }
.client-services .cat-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:1rem 1rem .85rem 1rem; background: transparent; }
.client-services .cat-title { font-weight:900; color:var(--color-text); letter-spacing:.2px; }
.client-services .cat-sub { margin-top:.35rem; color:var(--color-text-dim); font-size:.92rem; }
.client-services .cat-body { padding:0 1rem 1rem 1rem; display:flex; flex-direction:column; gap:.75rem; }
.client-services .svc-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:.85rem 1rem; border:1px solid var(--color-border); border-radius:14px; background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent); }
.client-services .svc-row.is-closed { background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent); border-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-border)); opacity:.92; }
.client-services .svc-row.is-closed .svc-actions { opacity:.95; }
.client-services .svc-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.client-services .svc-actions form { display:inline; }
.client-services .btn.small { padding:.45rem .7rem; font-size:.9rem; }
.client-services .svc-current { font-weight:700; color:var(--color-text); }
.client-services .svc-mode-btn {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.client-services .svc-mode-btn:hover {
  background: color-mix(in srgb, var(--color-bg-soft) 80%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}
.client-services .svc-mode-btn.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: color-mix(in srgb, var(--color-primary) 70%, #0000);
  box-shadow: var(--shadow-sm);
}
.client-services .svc-mode-btn--closed {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
}
.client-services .svc-mode-btn--closed:hover {
  background: color-mix(in srgb, var(--color-danger) 9%, var(--color-bg-alt));
  border-color: color-mix(in srgb, var(--color-danger) 65%, var(--color-border));
}
.client-services .svc-mode-btn--closed.is-active {
  background: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 70%, #0000);
  color: #fff;
}
.client-services .svc-mode-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.client-services .my-services-status {
  margin-top: .7rem;
  padding: .62rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-soft) 72%, transparent);
  color: var(--color-text);
  font-size: .9rem;
}
.client-services .my-services-status.is-error {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-alt));
}
.client-services .my-services-status.is-success {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-alt));
}
.client-services .is-hidden { display: none !important; }
.client-services .svc-row.is-pending {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-alt));
}
.client-services .svc-row.is-updated {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success) 36%, transparent);
}

/* Manual jobs */
.manual-jobs-root .manual-jobs-status {
  margin-top: .7rem;
  padding: .62rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-soft) 72%, transparent);
  color: var(--color-text);
  font-size: .9rem;
}
.manual-jobs-root .manual-jobs-status.is-error {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-alt));
}
.manual-jobs-root .manual-jobs-status.is-success {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-alt));
}
.manual-jobs-root .manual-jobs-empty {
  padding: .85rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: 14px;
  color: var(--color-text-dim);
  background: color-mix(in srgb, var(--color-bg-alt) 86%, transparent);
}
.manual-jobs-root .manual-jobs-toolbar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .32rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg-soft) 66%, transparent);
}
.manual-jobs-root .manual-jobs-tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .7rem;
  border-radius: 10px;
  color: var(--color-text-dim);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.manual-jobs-root .manual-jobs-tab:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg-alt) 82%, transparent);
}
.manual-jobs-root .manual-jobs-tab.is-active {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-alt));
}
.manual-jobs-root .manual-jobs-tab-count {
  min-width: 1.2rem;
  text-align: center;
  padding: .1rem .34rem;
  border-radius: 999px;
  font-size: .75rem;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-alt) 86%, transparent);
}
.manual-jobs-root .manual-jobs-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-alt);
}
.manual-jobs-root .manual-jobs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.manual-jobs-root .manual-jobs-table th,
.manual-jobs-root .manual-jobs-table td {
  padding: .72rem .75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
  font-size: .9rem;
}
.manual-jobs-root .manual-jobs-table th {
  font-weight: 800;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg-soft) 72%, transparent);
  white-space: nowrap;
}
.manual-jobs-root .manual-jobs-row:last-child td {
  border-bottom: 0;
}
.manual-jobs-root .manual-jobs-row.is-disabled {
  background: color-mix(in srgb, var(--color-bg-soft) 70%, transparent);
}
.manual-jobs-root .manual-jobs-row.is-pending {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-alt));
}
.manual-jobs-root .manual-jobs-main-action {
  display: inline-flex;
}
.manual-jobs-root .manual-claim-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.manual-jobs-root .manual-jobs-state-pill {
  display: inline-flex;
  align-items: center;
  padding: .14rem .58rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-soft) 76%, transparent);
  color: var(--color-text-dim);
}
.manual-jobs-root .manual-jobs-state-pill.is-waiting {
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-alt));
  color: color-mix(in srgb, var(--color-warning) 72%, var(--color-text));
}
.manual-jobs-root .manual-jobs-state-pill.is-dispatching {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-alt));
  color: color-mix(in srgb, var(--color-primary) 75%, var(--color-text));
}
.manual-jobs-root .manual-jobs-state-pill.is-success {
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-alt));
  color: color-mix(in srgb, var(--color-success) 78%, var(--color-text));
}
.manual-jobs-root .manual-jobs-state-pill.is-danger {
  border-color: color-mix(in srgb, var(--color-danger) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 11%, var(--color-bg-alt));
  color: color-mix(in srgb, var(--color-danger) 80%, var(--color-text));
}
.manual-jobs-root .manual-claim-progress {
  min-height: 1.1rem;
  color: var(--color-text-dim);
}
.manual-jobs-root .manual-claim-progress.is-error {
  color: var(--color-danger);
}
.manual-jobs-root .manual-claim-progress.is-success {
  color: var(--color-success);
}
.manual-jobs-root .manual-jobs-more {
  display: inline-block;
}
.manual-jobs-root .manual-jobs-more > summary {
  list-style: none;
  cursor: pointer;
  color: var(--color-text-dim);
  font-size: .82rem;
  user-select: none;
}
.manual-jobs-root .manual-jobs-more > summary::-webkit-details-marker {
  display: none;
}
.manual-jobs-root .manual-jobs-more[open] > summary {
  color: var(--color-text);
}
.manual-jobs-root .manual-jobs-more-menu {
  margin-top: .4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: .45rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg-alt) 90%, transparent);
}
.manual-jobs-root .btn.tiny {
  padding: .26rem .58rem;
  font-size: .76rem;
}
.manual-jobs-root .manual-jobs-row-detail td {
  background: color-mix(in srgb, var(--color-bg-soft) 56%, transparent);
}
.manual-jobs-root .manual-jobs-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem 1rem;
}
.manual-jobs-root .manual-jobs-detail-target {
  grid-column: span 2;
}
.manual-jobs-root .manual-jobs-detail-hint {
  grid-column: span 2;
}

@media (max-width: 720px) {
  .manual-jobs-root .manual-jobs-toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .manual-jobs-root .manual-jobs-tab {
    flex: 1;
    justify-content: center;
  }
  .manual-jobs-root .manual-jobs-table {
    min-width: 0;
  }
  .manual-jobs-root .manual-jobs-table-wrap {
    overflow: visible;
    border: 0;
    padding: 0;
    background: transparent;
  }
  .manual-jobs-root .manual-jobs-table thead {
    display: none;
  }
  .manual-jobs-root .manual-jobs-table,
  .manual-jobs-root .manual-jobs-table tbody,
  .manual-jobs-root .manual-jobs-table tr,
  .manual-jobs-root .manual-jobs-table td {
    display: block;
    width: 100%;
  }
  .manual-jobs-root .manual-jobs-row {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: .7rem;
    background: var(--color-bg-alt);
  }
  .manual-jobs-root .manual-jobs-row td {
    border-bottom: 0;
    padding: .55rem .7rem;
  }
  .manual-jobs-root .manual-jobs-row td:last-child {
    padding-bottom: .75rem;
  }
  .manual-jobs-root .manual-jobs-main-action,
  .manual-jobs-root .manual-jobs-main-action .btn {
    width: 100%;
  }
  .manual-jobs-root .manual-jobs-detail-grid {
    grid-template-columns: 1fr;
  }
  .manual-jobs-root .manual-jobs-detail-target,
  .manual-jobs-root .manual-jobs-detail-hint {
    grid-column: auto;
  }
}

/* ========== LANDING PAGE ========== */
.landing-wrap { position: relative; padding: 1.4rem 0 2.2rem; }
.landing-wrap::before {
	content: '';
	position: absolute;
	inset: -80px -60px auto -60px;
	height: 420px;
	background:
		radial-gradient(60% 60% at 15% 20%, rgba(14,165,233,.24), transparent 70%),
		radial-gradient(50% 50% at 85% 10%, rgba(16,185,129,.18), transparent 70%),
		linear-gradient(120deg, rgba(15,23,42,.06), rgba(14,116,144,.12));
	filter: blur(0.2px);
	z-index: 0;
	pointer-events: none;
}
.landing-wrap > * { position: relative; z-index: 1; }
.landing-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 2.2rem;
	padding: 2.4rem;
	border-radius: 28px;
	background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,248,255,.92));
	border: 1px solid rgba(148,163,184,.25);
	box-shadow: 0 25px 60px rgba(15,23,42,.15);
}
.landing-hero-text h1 { font-size: clamp(2rem, 2.8vw, 3.1rem); margin: .4rem 0 1rem; line-height: 1.18; letter-spacing: -.5px; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: #0e7490; font-weight: 600; }
.hero-subtitle { font-size: 1.02rem; color: var(--color-text-dim); line-height: 1.7; }
.landing-hero-card {
	background: #0f172a;
	color: #f8fafc;
	border-radius: 22px;
	padding: 1.8rem;
	box-shadow: inset 0 0 0 1px rgba(148,163,184,.12);
}
.hero-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom: 1.6rem; }
.hero-card-label { font-size: .82rem; letter-spacing: .08em; color: #94a3b8; }
.hero-card-value { font-size: 1.8rem; font-weight: 700; }
.hero-card-value span { font-size: .85rem; font-weight: 500; color: #94a3b8; margin-left:.35rem; }
.hero-card-row { display:flex; align-items:center; justify-content:space-between; padding: .85rem 0; border-bottom: 1px solid rgba(148,163,184,.16); }
.hero-card-row:last-child { border-bottom: 0; }
.hero-card-caption { font-size: .78rem; color: #94a3b8; }
.hero-card-metric { font-size: 1rem; font-weight: 600; margin-top: .25rem; }
.pill { display:inline-flex; align-items:center; padding:.25rem .65rem; font-size:.72rem; border-radius: 999px; background: rgba(148,163,184,.15); color: #e2e8f0; }
.pill-success { background: rgba(16,185,129,.2); color: #a7f3d0; }
.landing-trust { display:flex; flex-wrap:wrap; gap:.8rem; }
.trust-item { background: rgba(15,23,42,.08); color: #0f172a; border-radius: 999px; padding:.35rem .85rem; font-size:.78rem; font-weight:600; }

.landing-section { margin-top: 3rem; }
.section-title { font-size: 1.55rem; margin: 0 0 1.2rem; letter-spacing: -.2px; }
.feature-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
.feature-card {
	padding: 1.35rem;
	border-radius: 18px;
	background: #fff;
	border: 1px solid rgba(148,163,184,.2);
	box-shadow: var(--shadow-sm);
}
.feature-card h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.feature-card p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }

.pricing-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1.2rem; }
.pricing-card {
	border-radius: 18px;
	padding: 1.2rem 1.3rem;
	background: linear-gradient(150deg, #ffffff, #f1f5f9);
	border: 1px solid rgba(148,163,184,.2);
}
.pricing-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .85rem; }
.pricing-list { display:flex; flex-direction:column; gap:.6rem; }
.pricing-list li { display:flex; justify-content:space-between; font-size:.9rem; color: var(--color-text); }
.pricing-list strong { color: #0f172a; }

.steps-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; }
.step-card {
	background: #fff;
	border-radius: 18px;
	padding: 1.3rem;
	border: 1px solid rgba(148,163,184,.2);
}
.step-number { font-weight: 700; color: #0e7490; letter-spacing: .12em; font-size: .85rem; }
.step-card h4 { margin: .6rem 0 .4rem; font-size: 1rem; }
.step-card p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }

.info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.info-card {
	border-radius: 16px;
	padding: 1.1rem;
	background: #fff;
	border: 1px solid rgba(148,163,184,.2);
}
.info-label { font-size: .8rem; color: var(--color-text-dim); }
.info-value { font-weight: 600; margin-top: .3rem; }
.policy-box { background: #0f172a; color: #e2e8f0; padding: 1.2rem 1.4rem; border-radius: 18px; line-height: 1.7; }

.btn.ghost { background: transparent; border: 1px solid rgba(15,23,42,.2); color: var(--color-text); box-shadow: none; }
.btn.ghost:hover { background: rgba(15,23,42,.08); }

@media (max-width: 980px) {
	.landing-hero { grid-template-columns: 1fr; padding: 2rem; }
	.feature-grid { grid-template-columns: 1fr; }
	.steps-row { grid-template-columns: 1fr; }
}

/* ========== SMM LANDING ========== */
.landing-smm .landing-offer {
	text-align: center;
	background: #fff;
	color: #1d1d1f;
	padding: .7rem 1rem;
	border-radius: 999px;
	font-weight: 600;
	margin-bottom: 2rem;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}
.hero-smm {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 2rem;
	align-items: start;
	padding: 2.8rem;
	border-radius: var(--radius-lg);
	background: #fff;
	border: 1px solid var(--color-border);
	box-shadow: 0 22px 60px rgba(29,29,31,.12);
}
.hero-badge { display: inline-flex; align-items: center; gap:.35rem; background: #f5f5f7; color: #1d1d1f; border-radius: 999px; padding: .35rem .9rem; font-size: .8rem; font-weight: 600; }
.hero-smm h1 { font-size: clamp(2.2rem, 3.2vw, 3.3rem); margin: .7rem 0 1rem; letter-spacing: -.6px; }
.hero-smm .hero-subtitle { max-width: 620px; }
.hero-panel {
	background: #f5f5f7;
	color: #1d1d1f;
	border-radius: var(--radius-md);
	padding: 1.6rem;
	display: grid;
	gap: .9rem;
	border: 1px solid var(--color-border);
}
.hero-panel-title { font-weight: 700; }
.hero-panel p { margin: 0; color: var(--color-text-dim); line-height: 1.6; font-size: .92rem; }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
.platform-card {
	background: #fff;
	border-radius: var(--radius-md);
	border: 1px solid rgba(148,163,184,.2);
	padding: .9rem 1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: .7rem;
	box-shadow: var(--shadow-sm);
}
.platform-icon {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: #1d1d1f;
	background-size: 60% 60%;
	background-position: center;
	background-repeat: no-repeat;
}
.platform-ig .platform-icon {
	background-color: #fdf2f8;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZTIxMTg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDcuMmEzLjggMy44IDAgMSAwIDAgNy42IDMuOCAzLjggMCAwIDAgMC03LjZabTAtMy4yYzQuNSAwIDUuMSAwIDYuOS4xIDEuNy4xIDIuOC4zIDMuOSAxLjQgMS4xIDEuMSAxLjMgMi4yIDEuNCAzLjkuMSAxLjguMSAyLjQgLjEgNi45IDAgNC41IDAgNS4xLS4xIDYuOS0uMSAxLjctLjMgMi44LTEuNCAzLjktMS4xIDEuMS0yLjIgMS4zLTMuOSAxLjQtMS44LjEtMi40LjEtNi45LjEtNC41IDAtNS4xIDAtNi45LS4xLTEuNy0uMS0yLjgtLjMtMy45LTEuNC0xLjEtMS4xLTEuMy0yLjItMS40LTMuOS0uMS0xLjgtLjEtMi40LS4xLTYuOSAwLTQuNSAwLTUuMS4xLTYuOS4xLTEuNy4xLTIuOC4zLTMuOSAxLjQtMS4xIDEuMS0xLjMgMi4yLTEuNCAzLjktLjEgMS44LS4xIDIuNC0uMSA2LjkgMCA0LjUgMCA1LjEuMSA2LjkuMSAxLjcuMyAyLjggMS40IDMuOSAxLjEgMS4xIDIuMiAxLjMgMy45IDEuNCAxLjguMSAyLjQuMSA2LjkuMXpNMTIgNmE2IDYgMCAxIDAgMCAxMiA2IDYgMCAwIDAgMC0xMnptNi4yLS4zYTEuNCAxLjQgMCAxIDAgMCAyLjggMS40IDEuNCAwIDAgMCAwLTIuOHoiLz48L3N2Zz4=");
}
.platform-yt .platform-icon {
	background-color: #fee2e2;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZGMyNjI2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIzLjUgNy4yYy0uMi0xLjUtMS4yLTIuNy0yLjctMy0yLjQtLjUtNS4yLS41LTcuOC0uNS0yLjYgMC01LjQuMC03LjguNS0xLjUuMy0yLjUgMS41LTIuNyAzLS4yIDEuNy0uMiAzLjQtLjIgNS4xIDAgMS43IDAgMy40LjIgNS4xLjIgMS41IDEuMiAyLjcgMi43IDMgMi40LjUgNS4yLjUgNy44LjUgMi42IDAgNS40IDAgNy44LS41IDEuNS0uMyAyLjUtMS41IDIuNy0zLjIuMi0xLjcuMi0zLjQuMi01LjFzMC0zLjQtLjItNS4xem0tMTQuNSAxMC4yVjguNmw2LjIgMy4xLTYuMiAzLjEiLz48L3N2Zz4=");
}
.platform-tt .platform-icon {
	background-color: #e2e8f0;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMTEyNzQwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE2LjUgMy4yYzEuMyAxLjUgMy4xIDIuNCA1IDIuNXYzLjNjLTIuMSAwLTQuMi0uNy01LjgtMS45djcuMmE1LjcgNS43IDAgMSAxLTUuMy01LjctMi42IDAgMC0yLjYuMiA1LjcgNS43IDAgMCAxIDAgMTEuMyA4LjUgOC41IDAgMCAwIDEwLjItOC4yVjMuMloiLz48L3N2Zz4=");
}
.platform-fb .platform-icon {
	background-color: #dbeafe;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMWQ0ZWQ4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIyIDEyYzAtNS41LTQuNS0xMC0xMC0xMFM0IDYuNSA0IDEyczQuNSA5LjYgOSAxMHYtNy4xaC0yLjZ2LTIuOmgydi0yYzAtMi42IDEuNS00LjEgMy45LTQuMSAxLjEgMCAyLjMuMiAyLjMuMnYyLjVoLTEuM2MtMS4zIDAtMS43LjgtMS43IDEuNnYxLjloMi44bC0uNSAyLjFoLTIuM3Y3LjFjNC41LS40IDgtNC4xIDgtOS45eiIvPjwvc3ZnPg==");
}
.platform-x .platform-icon {
	background-color: #0f172a;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4LjkgMy41aDIuNWwtNi4xIDcuMSA3LjIgMTAuOUgxNS4zbC00LjEtNi4yLTUuMyA2LjJIMy40bDYuNS03LjYtNi45LTEwLkg4bDMuNyA1LjYgNC44LTUuNnpNMTYuOSA5LjdMMjAuNiA0aC0xLjFsLTMuMiAzLjd6TTE4LjkgMjBMMTUuMSAxNC4yIDkuNSAyMGgtMS4ybDYuMS03LjFMMTYgMTh6Ii8+PC9zdmc+");
}
.platform-line .platform-icon {
	background-color: #dcfce7;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMTZhMzRhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDRjLTQuNyAwLTguNSAzLTguNSA2LjcgMCAzLjQgMy4xIDYuMiA3LjMgNi42LjguMSAxLjguMSAyLjguMCAxLjMuNyAxLjggMS4xIDJjLjIgLjMuNS4zLjYtLjFsLjQtMS44YzMuNy0uNiA2LjQtMy4zIDYuNC02LjcgMC0zLjctMy44LTYuNy04LjUtNi43em0tMi43IDguNkg3LjRWNzIuM2gxLjV2NC44bC45LS40YzEuMy0uNiAyLjctMS4yIDQuMS0xLjIsMiAwIDIuMy45IDIuMyAxLjcgMCAxLjItMS4zIDIuNC00LjYgMy4xbC0uNS0xLjVjMi44LS42IDQuMS0xLjYgNC4xLTIuOSAwLTEuNC0xLjgtMi42LTQuOS0yLjYtMiAwLTMuOS40LTUuNC45bC0uNy4yVjcuM2gtMS40djUuM3oiLz48L3N2Zz4=");
}
.platform-th .platform-icon {
	background-color: #111827;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZWVmMmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDVhNyA3IDAgMCAwIDAgMTRoNC44YzIuMyAwIDMuOC0xLjQgMy44LTMuNiAwLTIuMi0xLjUtMy4zLTMuNi0zLjctMS4zLS4zLTIuNS0uNC0zLjgtLjNsMS41LTIuMWgtMi4zbC0uOC0xLjNoLS42bC0uOCAxLjNoLTIuM2wxLjUgMi4xYy0xLjMuMS0yLjUuMy0zLjguNi0yLjEuNS0zLjYgMS42LTMuNiAzLjcgMCAyLjIgMS41IDMuNiAzLjggMy42SDExYTEgMSAwIDEgMSAwLTJoLS4yYy0xLjcgMC0yLjgtLjc0LTIuOC0xLjc2IDAtMS4xIDEuMS0xLjkgMi45LTEuOSAxLjEgMCAyLjIuMiAzLjMuNSAzLjEuNyA1LjMgMi40IDUuMyA1IDAgMi40LTIuMSA0LTQuOCA0aC0zLjVhNyA3IDAgMCAwIDAtMTR6Ii8+PC9zdmc+");
}
.services-preview .section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.services-preview .text-dim { max-width: 560px; }
.service-collection { display: grid; gap: 1.4rem; }
.service-block {
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	padding: 1.2rem 1.4rem 1.4rem;
}
.service-block__head {
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}
.service-table { display: grid; gap: .9rem; }
.service-row {
	display: grid;
	grid-template-columns: 100px minmax(0, 1.6fr) 190px 140px 120px;
	gap: 1rem;
	align-items: start;
	padding: 1rem 1rem;
	border-radius: 16px;
	border: 1px solid rgba(148,163,184,.2);
	background: #f8fafc;
}
.service-row--head {
	background: #0f172a;
	color: #f8fafc;
	font-weight: 600;
	border-color: rgba(148,163,184,.35);
}
.service-row--head > div { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.service-cell { font-size: .92rem; color: var(--color-text); line-height: 1.6; }
.service-title {
	font-weight: 600;
	color: #0f172a;
	text-decoration: none;
}
.service-title:hover { text-decoration: underline; }
.service-desc { margin-top: .4rem; color: var(--color-text-dim); }
.service-bullets {
	margin: .35rem 0 .5rem 1.2rem;
	padding: 0;
	list-style: disc;
	color: var(--color-text-dim);
	font-size: .9rem;
}
.service-price { display: grid; gap: .3rem; font-weight: 600; color: #0f172a; }
.service-label {
	display: none;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #64748b;
	margin-bottom: .2rem;
}
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat-card { background: #1d1d1f; color: #fff; padding: 1.3rem; border-radius: var(--radius-md); }
.stat-value { font-size: 1.45rem; font-weight: 700; }
.stat-label { color: #a1a1a6; font-size: .85rem; margin-top: .4rem; }
.cta-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 1.6rem 2rem;
	border-radius: var(--radius-lg);
	background: #1d1d1f;
	color: #fff;
}
.footer-company {
	background: #f2f2f4;
	border-top: 1px solid var(--color-border);
	padding: .9rem 1.1rem 1rem;
	color: var(--color-text-dim);
}
.footer-company-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	gap: .6rem;
}
.footer-title {
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #1d1d1f;
	font-weight: 700;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .3rem .9rem;
}
.footer-grid div {
	display: flex;
	justify-content: space-between;
	gap: .8rem;
	font-size: .78rem;
}
.footer-grid span { color: #86868b; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid strong { color: #1d1d1f; font-weight: 600; }
.footer-link { color: #0071e3; font-weight: 600; }
.footer-link:hover { color: #0077ed; }
.footer-meta {
	text-align: center;
	padding: .6rem 1rem .9rem;
	color: var(--color-text-dim);
	font-size: .78rem;
	background: #f2f2f4;
}
.company-page {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	gap: 1.4rem;
}
.company-hero h1 { margin: 0 0 .4rem; font-size: 2rem; letter-spacing: -.4px; }
.company-hero p { margin: 0; color: var(--color-text-dim); }
.company-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.6rem;
	display: grid;
	gap: .6rem;
	box-shadow: var(--shadow-sm);
}
.company-card .company-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .4rem 0;
	border-bottom: 1px solid rgba(210,210,215,.5);
}
.company-card .company-row:last-child { border-bottom: 0; }
.company-card span { color: var(--color-text-dim); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.company-card strong { font-weight: 600; font-size: .95rem; color: var(--color-text); }
.policy-card { display: grid; gap: .6rem; }
.policy-title { font-weight: 700; font-size: 1.05rem; }
.policy-detail p { margin: 0 0 .6rem; line-height: 1.7; }
.cta-banner p { margin: .35rem 0 0; color: #a1a1a6; }
.cta-banner .btn.primary { background: #0071e3; border-color: #0071e3; }
.footer-info {
	display: grid;
	gap: .35rem;
	color: var(--color-text-dim);
	font-size: .9rem;
}

@media (max-width: 980px) {
	.hero-smm { grid-template-columns: 1fr; }
	.cta-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 960px) {
	.service-row { grid-template-columns: 1fr; }
	.service-row--head { display: none; }
	.service-label { display: block; }
	.service-price { font-size: .95rem; }
}
.client-services .card-title { margin:0; }
.client-services .card-desc { margin:.5rem 0 0 0; color:var(--color-text-dim); }
.client-services .stack { margin-top:1rem; display:flex; flex-direction:column; gap:.9rem; }
.client-services .stack-row { display:flex; justify-content:flex-end; }
.client-services .empty-state { padding:.85rem 1rem; border:1px dashed color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius:14px; color:var(--color-text-dim); background: color-mix(in srgb, var(--color-bg-alt) 86%, transparent); }
.client-services .svc-name { font-weight:800; color:var(--color-text); }
.client-services .svc-meta { margin-top:.35rem; }

/* Dark adjustments */
[data-theme=dark] .content { background:var(--color-bg-alt); }
[data-theme=dark] table { color:var(--color-text); }
[data-theme=dark] th { background:#222b33; }
[data-theme=dark] .progress-mini { background:#303840; }
[data-theme=dark] input[type=text], [data-theme=dark] input[type=password], [data-theme=dark] input[type=email], [data-theme=dark] input[type=number] { background:#222b33; border-color:#2f3942; }
[data-theme=dark] .card p { color:var(--color-text-dim); }

/* Referral modal */

/* Subscriptions */
.subscription-create-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem .9rem;
	align-items: end;
}
.subscription-create-form label {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .88rem;
	color: var(--color-text-dim);
}
.subscription-create-form input,
.subscription-create-form select {
	width: 100%;
}
.subscription-create-form .btn {
	justify-self: start;
}
.subscription-table-wrap {
	overflow: auto;
}
.subscription-table {
	width: 100%;
	border-collapse: collapse;
}
.subscription-table th,
.subscription-table td {
	border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
	padding: .65rem .55rem;
	vertical-align: top;
}
.subscription-table th {
	font-size: .83rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-dim);
}
.subscription-status {
	display: inline-flex;
	align-items: center;
	padding: .2rem .55rem;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	font-size: .78rem;
	font-weight: 700;
}
.subscription-status.is-active {
	border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.subscription-status.is-warning {
	border-color: rgba(245, 158, 11, .5);
	color: #b45309;
	background: rgba(245, 158, 11, .12);
}
.subscription-status.is-danger {
	border-color: rgba(220, 38, 38, .5);
	color: #b91c1c;
	background: rgba(220, 38, 38, .12);
}
.subscription-status.is-success {
	border-color: rgba(34, 197, 94, .5);
	color: #047857;
	background: rgba(34, 197, 94, .12);
}
.subscription-status.is-muted {
	opacity: .75;
}
.subscription-inline-update {
	display: grid;
	gap: .35rem;
}
.subscription-inline-update label {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	font-size: .76rem;
	color: var(--color-text-dim);
}
.subscription-inline-update input {
	min-width: 110px;
}
.subscription-inline-update .btn.tiny {
	justify-self: start;
}

@media (max-width: 960px) {
	.subscription-create-form {
		grid-template-columns: 1fr;
	}
	.subscription-inline-update input {
		min-width: 90px;
	}
}

.api-keys-page .grid-2,
.api-keys-page .grid-3,
.api-clients-page .grid-3 {
	display: grid;
	gap: 12px;
}

.api-keys-page .grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.api-keys-page .grid-3,
.api-clients-page .grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.api-keys-page .table-wrap,
.api-clients-page .table-wrap {
	overflow: auto;
}

.api-keys-page .table,
.api-clients-page .table {
	width: 100%;
	border-collapse: collapse;
}

.api-keys-page .table th,
.api-keys-page .table td,
.api-clients-page .table th,
.api-clients-page .table td {
	border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
	padding: .58rem .5rem;
	vertical-align: top;
}

.api-keys-page .table th,
.api-clients-page .table th {
	font-size: .82rem;
	color: var(--color-text-dim);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.api-keys-page .field,
.api-clients-page .field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.api-keys-page .field .field-label,
.api-clients-page .field .field-label {
	font-size: .82rem;
	color: var(--color-text-dim);
}

.api-keys-page .field-actions,
.api-clients-page .field-actions {
	justify-content: flex-end;
}

@media (max-width: 980px) {
	.api-keys-page .grid-2,
	.api-keys-page .grid-3,
	.api-clients-page .grid-3 {
		grid-template-columns: 1fr;
	}
}