/* Shared structure and visual language for Proxt MGMT's server-rendered UI. */
:root { --pm-canvas:#f3f6f8; --pm-surface:#fff; --pm-surface-muted:#f7f9fb; --pm-ink:#10243d; --pm-text:#31445b; --pm-muted:#6d7d90; --pm-line:#cbd5df; --pm-line-strong:#9eafbf; --pm-blue:#056fd8; --pm-blue-deep:#0755ad; --pm-blue-soft:#eaf4ff; --pm-green:#177850; --pm-green-soft:#e8f5ee; --pm-amber:#9a6512; --pm-amber-soft:#fff5df; --pm-red:#b4313d; --pm-red-soft:#fff0f1; --pm-shadow:0 1px 2px rgba(16,36,61,.05); }
* { box-sizing:border-box; }
html,body { min-width:320px; background:var(--pm-canvas); }
body { margin:0; color:var(--pm-text)!important; font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif!important; font-size:16px; line-height:1.5; }
body.app-page { background:var(--pm-canvas)!important; }
a { color:var(--pm-blue); } a:hover { color:var(--pm-blue-deep); } button,input { font:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid rgba(5,111,216,.32); outline-offset:2px; }

/* Command surface */
.page,.wrap { max-width:1400px!important; margin:0 auto; padding:28px 32px 56px!important; }
.topbar,.nav,.topline { margin:0 0 28px!important; min-height:66px; padding:14px 0!important; border-top:4px solid var(--pm-blue); border-bottom:1px solid var(--pm-line); align-items:center!important; }
.brand,.title,.nav>div:first-child { gap:0!important; }
.eyebrow,.label { color:var(--pm-muted)!important; font-size:11px!important; font-weight:750; letter-spacing:.12em!important; text-transform:uppercase; }
.brand strong,.title strong,.nav strong,.topline strong { color:var(--pm-ink)!important; font-size:22px!important; font-weight:720; letter-spacing:-.025em; }

/* Controls */
.btn,.link-btn,.chip,.status-pill { min-height:40px; border-radius:2px!important; border:1px solid var(--pm-line-strong)!important; background:var(--pm-surface)!important; color:var(--pm-ink)!important; font-weight:650; padding:9px 13px!important; box-shadow:none!important; transition:border-color 120ms ease,background 120ms ease,color 120ms ease; }
.btn:hover,.link-btn:hover,.chip:hover { background:var(--pm-surface-muted)!important; border-color:var(--pm-blue)!important; transform:none!important; }
.btn.primary,.link-btn.primary,.chip.active,button[type="submit"] { background:var(--pm-blue)!important; border-color:var(--pm-blue)!important; color:#fff!important; }
.btn.primary:hover,.link-btn.primary:hover,button[type="submit"]:hover { background:var(--pm-blue-deep)!important; }
.btn.secondary,.link-btn.secondary { color:var(--pm-blue-deep)!important; background:var(--pm-blue-soft)!important; border-color:#a8cbed!important; }
.btn.ghost,.link-btn.ghost { background:transparent!important; border-color:transparent!important; color:var(--pm-blue-deep)!important; }
input[type="text"],input[type="password"] { width:100%; min-height:46px; border:1px solid var(--pm-line-strong)!important; border-radius:2px!important; padding:10px 12px!important; background:var(--pm-surface)!important; color:var(--pm-ink)!important; }
input::placeholder { color:#8190a0; }

/* Account dashboard */
.card,.panel,.group-card,.profile-card,.service-card,.service-panel { background:var(--pm-surface)!important; color:var(--pm-text)!important; border:1px solid var(--pm-line)!important; border-radius:0!important; box-shadow:var(--pm-shadow)!important; backdrop-filter:none!important; }
.account-overview,.hero { display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:end!important; gap:24px; padding:28px!important; border-left:6px solid var(--pm-blue)!important; }
.hero h1,.auth-card h1,.profile-intro h1 { color:var(--pm-ink)!important; font-size:clamp(30px,4vw,46px)!important; line-height:1.06; }
p,.meta,.muted,.title span { color:var(--pm-muted)!important; }
.notice,.hint,.error,.auth-meta,.reset-note { border-radius:0!important; border:1px solid #9dc6ec!important; border-left:4px solid var(--pm-blue)!important; background:var(--pm-blue-soft)!important; color:#1d4b78!important; box-shadow:none!important; }
.notice.warning,.hint.warn { border-color:#ebcf94!important; border-left-color:var(--pm-amber)!important; background:var(--pm-amber-soft)!important; color:#67430d!important; }
.notice.error,.error { border-color:#edbdc3!important; border-left-color:var(--pm-red)!important; background:var(--pm-red-soft)!important; color:#7d2430!important; }
.chip { min-height:31px; color:var(--pm-text)!important; background:var(--pm-surface-muted)!important; border-color:var(--pm-line)!important; font-size:13px!important; padding:5px 9px!important; }
.chip.success { color:var(--pm-green)!important; background:var(--pm-green-soft)!important; border-color:#a9d6ba!important; }.chip.warning { color:var(--pm-amber)!important; background:var(--pm-amber-soft)!important; border-color:#ebcf94!important; }.chip.danger { color:var(--pm-red)!important; background:var(--pm-red-soft)!important; border-color:#edbdc3!important; }
.catalog,.profiles { padding-top:8px; }.section-head { margin-bottom:16px!important; }.section-head h2,.section-head h3 { color:var(--pm-ink)!important; }
.catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:0!important; border:1px solid var(--pm-line); }
.service-card { min-height:280px; padding:24px!important; border:0!important; border-right:1px solid var(--pm-line)!important; border-top:5px solid var(--pm-blue)!important; box-shadow:none!important; }.service-card:nth-child(2) { border-top-color:#118d87!important; }.service-card:nth-child(3) { border-top-color:#6f6ec3!important; border-right:0!important; }.service-card h2 { color:var(--pm-ink)!important; }
.profile-groups { gap:16px!important; }.group-card { padding:20px!important; background:var(--pm-surface-muted)!important; }.profile-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important; }.profile-card { padding:16px!important; border-top:3px solid var(--pm-blue)!important; }.profile-name { color:var(--pm-ink); font-size:17px; }.profile-subtitle,.profile-meta { color:var(--pm-muted)!important; }

/* Profile details are a working sheet with an independent utility rail. */
.profile-layout { grid-template-columns:minmax(0,1fr) 320px!important; gap:24px!important; align-items:start; }.profile-main { padding:0!important; overflow:hidden; }.profile-intro { padding:28px 28px 20px; border-top:5px solid var(--pm-blue); }.profile-intro .chip-row { margin-top:16px; }.profile-main>.notice,.profile-main>.mode-switch,.profile-main>.service-panel { margin-left:28px; margin-right:28px; }.profile-main>.notice { margin-bottom:16px; }
.mode-switch { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 18px; border-bottom:1px solid var(--pm-line); }.service-panel { margin-top:22px; margin-bottom:28px; padding:0!important; border:0!important; box-shadow:none!important; }.service-panel>.notice { margin:0 0 20px; }
.connection-details,.detail-grid { display:grid!important; gap:0!important; margin:0!important; border:1px solid var(--pm-line)!important; background:var(--pm-surface); }
.connection-details .detail-row,.detail-grid .detail-row { display:grid!important; grid-template-columns:minmax(140px,.32fr) minmax(0,1fr); gap:16px; align-items:baseline; min-height:58px; padding:13px 16px!important; border:0!important; border-bottom:1px solid var(--pm-line)!important; background:transparent!important; color:var(--pm-ink)!important; overflow-wrap:anywhere; }.connection-details .detail-row:last-child,.detail-grid .detail-row:last-child { border-bottom:0!important; }.detail-row strong { color:var(--pm-muted)!important; font-size:13px; font-weight:700; }
.actions { margin-top:20px; }.profile-sidebar { display:grid; gap:16px; }.profile-sidebar .card { padding:20px!important; }.qr { text-align:center; }.qr img { width:min(100%,230px)!important; border:1px solid var(--pm-line)!important; border-radius:0!important; padding:10px; background:#fff; }.profile-list { gap:0!important; border:1px solid var(--pm-line); }.profile-row { padding:12px!important; border:0!important; border-bottom:1px solid var(--pm-line)!important; border-radius:0!important; background:var(--pm-surface)!important; }.profile-row:last-child { border-bottom:0!important; }.profile-row.current { background:var(--pm-blue-soft)!important; border-left:4px solid var(--pm-blue)!important; }.profile-row small { color:var(--pm-muted)!important; }.rename-box { border-top:1px solid var(--pm-line); padding-top:20px; }

/* Data-heavy stats keep their tables. */
.cards { grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:12px!important; }.cards .card { min-height:146px; padding:18px!important; border-top:3px solid var(--pm-blue)!important; }.cards .card:nth-child(4n + 2) { border-top-color:#118d87!important; }.cards .card:nth-child(4n + 3) { border-top-color:#6f6ec3!important; }.value { color:var(--pm-ink)!important; font-size:clamp(26px,2.6vw,38px)!important; }.panels { gap:12px!important; }.panel { padding:20px!important; }.panel canvas { border-radius:0!important; background:var(--pm-surface-muted)!important; } table { border:1px solid var(--pm-line); background:var(--pm-surface); } th { background:var(--pm-surface-muted); color:var(--pm-muted)!important; } th,td { padding:11px 12px!important; border-bottom-color:var(--pm-line)!important; color:var(--pm-text); } tbody tr:hover { background:var(--pm-blue-soft); }.status-pill { min-height:29px; padding:4px 8px!important; }

@media (max-width:1024px) { .page,.wrap { padding:22px!important; }.catalog-grid,.profile-grid,.cards { grid-template-columns:repeat(2,minmax(0,1fr))!important; }.service-card:nth-child(2) { border-right:0!important; }.service-card:nth-child(3) { border-right:1px solid var(--pm-line)!important; }.profile-layout { grid-template-columns:1fr!important; }.profile-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .page,.wrap { padding:16px!important; }.topbar,.nav,.topline { flex-direction:column!important; align-items:stretch!important; gap:10px!important; }.topbar-links,.actions,.range { width:100%; }.topbar-links .btn,.topbar-links .link-btn { flex:1 1 auto; }.account-overview,.hero { grid-template-columns:1fr; padding:20px!important; }.catalog-grid,.profile-grid,.cards,.panels,.profile-sidebar { grid-template-columns:1fr!important; }.service-card { min-height:210px; border-right:0!important; border-bottom:1px solid var(--pm-line)!important; }.profile-main>.notice,.profile-main>.mode-switch,.profile-main>.service-panel { margin-left:18px; margin-right:18px; }.profile-intro { padding:22px 18px 18px; }.connection-details .detail-row,.detail-grid .detail-row { grid-template-columns:1fr; gap:4px; min-height:0; }.panel { overflow-x:auto!important; } table { min-width:560px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }