:root {
  --portal-bg: #f4f6f8;
  --portal-surface: #ffffff;
  --portal-surface-2: #f8fafc;
  --portal-line: #dfe5ec;
  --portal-text: #172033;
  --portal-muted: #657187;
  --portal-accent: #e98518;
  --portal-accent-soft: #fff1dd;
  --portal-good: #168a64;
  --portal-danger: #c43b43;
  --portal-sidebar: 248px;
  --portal-topbar: 68px;
  --portal-radius: 14px;
  --portal-shadow: 0 10px 28px rgba(31,45,61,.08);
}
:root[data-theme="dark"] {
  --portal-bg: #0b1118;
  --portal-surface: #111a25;
  --portal-surface-2: #162230;
  --portal-line: #28394a;
  --portal-text: #edf4fb;
  --portal-muted: #9badbe;
  --portal-accent: #ff9e2c;
  --portal-accent-soft: #352510;
  --portal-good: #33c28d;
  --portal-danger: #ff737b;
  --portal-shadow: 0 16px 40px rgba(0,0,0,.22);
}
html,body { min-height:100%; }
body { margin:0; background:var(--portal-bg); color:var(--portal-text); font-size:calc(16px * var(--font-scale)); }
.portal-shell { min-height:100vh; display:grid; grid-template:var(--portal-topbar) 1fr / var(--portal-sidebar) minmax(0,1fr); }
.portal-shell-hub { display:block; padding-top:var(--portal-topbar); }
.portal-topbar {
  position:sticky; z-index:50; top:0; grid-column:1/-1; display:grid;
  grid-template-columns:var(--portal-sidebar) minmax(0,1fr) auto auto;
  align-items:center; height:var(--portal-topbar); padding:0 18px 0 0;
  background:color-mix(in srgb,var(--portal-surface) 94%,transparent);
  border-bottom:1px solid var(--portal-line); backdrop-filter:blur(14px);
}
.portal-shell-hub .portal-topbar { position:fixed; left:0; right:0; grid-template-columns:280px minmax(0,1fr) auto auto; }
.portal-brand { height:100%; padding:0 20px; display:flex; align-items:center; gap:12px; color:var(--portal-text); text-decoration:none; border-right:1px solid var(--portal-line); }
.portal-brand img { width:34px; height:34px; border-radius:9px; object-fit:cover; }
.portal-brand span,.portal-breadcrumb,.user-copy { display:flex; flex-direction:column; min-width:0; }
.portal-brand strong { font-size:calc(14px * var(--font-scale)); letter-spacing:.04em; }
.portal-brand small,.portal-breadcrumb span,.user-copy small { font-size:calc(12px * var(--font-scale)); color:var(--portal-muted); }
.portal-breadcrumb { flex-direction:row; align-items:center; gap:9px; padding:0 22px; white-space:nowrap; overflow:hidden; }
.portal-breadcrumb a { color:var(--portal-muted); text-decoration:none; }
.portal-breadcrumb a:hover { color:var(--portal-accent); }
.portal-breadcrumb > * { overflow:hidden; text-overflow:ellipsis; }
.portal-health { display:flex; align-items:center; gap:8px; color:var(--portal-muted); font-size:calc(13px * var(--font-scale)); padding:8px 12px; }
.portal-health i,.portal-sidebar-foot i,.hub-summary i,.status-badge i { width:8px; height:8px; border-radius:50%; background:var(--portal-good); box-shadow:0 0 0 4px color-mix(in srgb,var(--portal-good) 14%,transparent); }
.portal-user-menu { margin-left:8px; }
.portal-sidebar { position:sticky; top:var(--portal-topbar); align-self:start; height:calc(100vh - var(--portal-topbar)); box-sizing:border-box; display:flex; flex-direction:column; background:var(--portal-surface); border-right:1px solid var(--portal-line); overflow-y:auto; }
.portal-sidebar-title { padding:18px 16px 11px; display:flex; flex-direction:column; gap:10px; }
.portal-sidebar-title a { color:var(--portal-muted); text-decoration:none; font-size:calc(13px * var(--font-scale)); }
.portal-sidebar-title span { font-weight:800; font-size:calc(20px * var(--font-scale)); }
.portal-sidebar nav { padding:0 10px 16px; display:grid; gap:4px; }
.portal-sidebar nav > a { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; color:var(--portal-text); text-decoration:none; border:1px solid transparent; }
.portal-sidebar nav > a span { font-size:calc(14px * var(--font-scale)); font-weight:720; }
.portal-sidebar nav > a small { color:var(--portal-muted); font-size:calc(12px * var(--font-scale)); line-height:1.3; }
.portal-sidebar nav > a:hover { background:var(--portal-surface-2); border-color:var(--portal-line); }
.portal-sidebar nav > a.is-active { background:var(--portal-accent-soft); border-color:color-mix(in srgb,var(--portal-accent) 35%,var(--portal-line)); color:var(--portal-accent); }
.portal-nav-label { margin:16px 12px 5px; color:var(--portal-muted); font-size:calc(11px * var(--font-scale)); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.portal-sidebar-foot { margin-top:auto; padding:14px 18px; border-top:1px solid var(--portal-line); display:flex; align-items:center; gap:9px; color:var(--portal-muted); font-size:calc(12px * var(--font-scale)); }
.portal-main { min-width:0; }
.portal-main-hub { max-width:1280px; margin:0 auto; }
.portal-page { box-sizing:border-box; width:100%; max-width:1600px; margin:0 auto; padding:24px 28px 48px; }
.portal-main-hub .portal-page { padding:36px 34px 64px; }
.hub-heading,.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.hub-heading h1,.section-heading h1 { margin:5px 0 6px; font-size:clamp(26px,3vw,38px); letter-spacing:-.035em; }
.hub-heading p,.section-heading p { margin:0; color:var(--portal-muted); max-width:720px; }
.eyebrow { color:var(--portal-accent); font-weight:850; font-size:calc(11px * var(--font-scale)); letter-spacing:.13em; text-transform:uppercase; }
.hub-summary { display:flex; align-items:center; gap:12px; padding:12px 16px; min-width:190px; border:1px solid var(--portal-line); border-radius:12px; background:var(--portal-surface); }
.hub-summary span { display:flex; flex-direction:column; }
.hub-summary small { color:var(--portal-muted); }
.system-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.system-tile { min-height:190px; padding:20px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; border:1px solid var(--portal-line); border-radius:var(--portal-radius); background:var(--portal-surface); box-shadow:var(--portal-shadow); color:var(--portal-text); text-decoration:none; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.system-tile:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--tile-color,var(--portal-accent)) 45%,var(--portal-line)); box-shadow:0 16px 38px color-mix(in srgb,var(--tile-color,var(--portal-accent)) 13%,transparent); }
.system-tile-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:color-mix(in srgb,var(--tile-color,var(--portal-accent)) 15%,var(--portal-surface)); color:var(--tile-color,var(--portal-accent)); font-weight:900; }
.system-tile-copy { display:flex; flex-direction:column; gap:7px; }
.system-tile-copy strong { font-size:calc(22px * var(--font-scale)); letter-spacing:-.02em; }
.system-tile-copy small { min-height:42px; color:var(--portal-muted); font-size:calc(14px * var(--font-scale)); line-height:1.5; }
.system-tile-meta { margin-top:auto; display:flex; justify-content:space-between; color:var(--tile-color,var(--portal-accent)); font-size:calc(13px * var(--font-scale)); font-weight:750; }
.tile-svod { --tile-color:#4277d4; }.tile-kaskad { --tile-color:#e98518; }.tile-stvor { --tile-color:#b54f9b; }.tile-fond { --tile-color:#168a64; }.tile-atlas { --tile-color:#765bc7; }
.system-tile.is-locked { opacity:.58; box-shadow:none; }
.compact-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.compact-metrics article { display:grid; grid-template-columns:1fr auto; align-items:end; gap:2px 12px; padding:16px; border:1px solid var(--portal-line); border-radius:12px; background:var(--portal-surface); }
.compact-metrics article > span { grid-column:1/-1; color:var(--portal-muted); font-size:calc(13px * var(--font-scale)); }
.compact-metrics strong { font-size:calc(28px * var(--font-scale)); letter-spacing:-.04em; }
.compact-metrics small { color:var(--portal-muted); }
.dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.dashboard-card { padding:20px; border:1px solid var(--portal-line); border-radius:var(--portal-radius); background:var(--portal-surface); }
.dashboard-card-wide { grid-column:1/-1; }
.card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.card-title h2 { margin:4px 0 14px; font-size:calc(20px * var(--font-scale)); }
.status-badge { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--portal-line); border-radius:999px; color:var(--portal-muted); font-size:calc(12px * var(--font-scale)); white-space:nowrap; }
.status-rows,.quick-links,.presence-list { display:grid; }
.status-rows > div,.presence-list > div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--portal-line); }
.status-rows span { display:flex; flex-direction:column; gap:3px; }
.status-rows small,.quick-links small { color:var(--portal-muted); }
.good { color:var(--portal-good); }
.quick-links { gap:8px; }
.quick-links a { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:11px 12px; border:1px solid var(--portal-line); border-radius:10px; color:var(--portal-text); text-decoration:none; }
.quick-links a small { grid-column:1; }
.quick-links a b { grid-column:2; grid-row:1/3; align-self:center; color:var(--portal-accent); }
.text-link { display:inline-block; margin-top:14px; color:var(--portal-accent); text-decoration:none; font-weight:700; }
.empty-state { color:var(--portal-muted); }
.placeholder-panel { max-width:620px; margin:9vh auto 0; padding:42px; text-align:center; border:1px solid var(--portal-line); border-radius:20px; background:var(--portal-surface); box-shadow:var(--portal-shadow); }
.placeholder-icon { margin:0 auto 16px; display:grid; place-items:center; width:62px; height:62px; border-radius:18px; color:#765bc7; background:color-mix(in srgb,#765bc7 15%,var(--portal-surface)); font-size:calc(27px * var(--font-scale)); font-weight:900; }
.placeholder-panel h1 { margin:8px 0; font-size:calc(34px * var(--font-scale)); }
.placeholder-panel p { color:var(--portal-muted); line-height:1.6; }
.portal-card { border:1px solid var(--portal-line); border-radius:var(--portal-radius); background:var(--portal-surface); box-shadow:0 2px 10px rgba(20,30,45,.03); }
.portal-card-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 18px; border-bottom:1px solid var(--portal-line); }
.portal-card-head h2 { margin:0; font-size:calc(18px * var(--font-scale)); }
.portal-card-body { padding:18px; }
.installation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.installation-card { display:flex; flex-direction:column; gap:13px; padding:17px; border:1px solid var(--portal-line); border-radius:13px; background:var(--portal-surface); color:var(--portal-text); text-decoration:none; }
.installation-card:hover { border-color:var(--portal-accent); }
.installation-card-top { display:flex; justify-content:space-between; gap:12px; }
.installation-card h3 { margin:0; font-size:calc(17px * var(--font-scale)); }
.installation-card p { margin:2px 0 0; color:var(--portal-muted); font-size:calc(13px * var(--font-scale)); }
.installation-facts { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.installation-facts span { display:flex; flex-direction:column; padding:9px; border-radius:9px; background:var(--portal-surface-2); }
.installation-facts small { color:var(--portal-muted); font-size:calc(11px * var(--font-scale)); }
.installation-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:7px; margin:0 0 16px; border:1px solid var(--portal-line); border-radius:12px; background:var(--portal-surface); }
.installation-tabs a { padding:8px 11px; border-radius:8px; color:var(--portal-muted); text-decoration:none; font-size:calc(13px * var(--font-scale)); font-weight:700; }
.installation-tabs a.is-active { background:var(--portal-accent-soft); color:var(--portal-accent); }
.status-pill { display:inline-flex; align-items:center; padding:5px 8px; border-radius:999px; font-size:calc(11px * var(--font-scale)); font-weight:800; background:var(--portal-surface-2); }
.status-pill.approved,.status-pill.active,.status-pill.verified { color:var(--portal-good); }
.status-pill.pending,.status-pill.uploading { color:var(--portal-accent); }
.status-pill.revoked,.status-pill.failed,.status-pill.deleted { color:var(--portal-danger); }
.filter-bar-compact { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-bottom:14px; }
.filter-bar-compact label { min-width:150px; flex:1; }
.filter-bar-compact label span { display:block; margin:0 0 5px; color:var(--portal-muted); font-size:calc(12px * var(--font-scale)); font-weight:700; }
.filter-bar-compact input,.filter-bar-compact select { width:100%; min-height:40px; }
.media-preview { display:grid; place-items:center; min-height:280px; background:#05090e; border-radius:12px; overflow:hidden; }
.media-preview img,.media-preview video { max-width:100%; max-height:70vh; }
.media-preview audio { width:min(700px,90%); }
.danger-zone { margin-top:18px; padding:16px; border:1px solid color-mix(in srgb,var(--portal-danger) 45%,var(--portal-line)); border-radius:12px; background:color-mix(in srgb,var(--portal-danger) 7%,var(--portal-surface)); }
.danger-zone h2 { color:var(--portal-danger); }
@media (max-width:1100px) {
  :root { --portal-sidebar:220px; }
  .system-tiles,.installation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compact-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .portal-shell { display:block; padding-top:var(--portal-topbar); }
  .portal-topbar,.portal-shell-hub .portal-topbar { position:fixed; left:0; right:0; grid-template-columns:minmax(0,1fr) auto; padding:0 10px; }
  .portal-brand { padding:0 8px; border:0; }
  .portal-brand small,.portal-breadcrumb,.portal-health,.user-copy { display:none; }
  .portal-sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid var(--portal-line); overflow:visible; }
  .portal-sidebar-title { padding:12px 14px 6px; flex-direction:row; align-items:center; justify-content:space-between; }
  .portal-sidebar nav { display:flex; overflow-x:auto; padding:4px 10px 10px; }
  .portal-sidebar nav > a { min-width:max-content; padding:8px 10px; }
  .portal-sidebar nav > a small,.portal-nav-label,.portal-sidebar-foot { display:none; }
  .portal-page,.portal-main-hub .portal-page { padding:18px 14px 42px; }
  .hub-heading,.section-heading { align-items:flex-start; flex-direction:column; }
  .hub-summary { width:100%; box-sizing:border-box; }
  .system-tiles,.installation-grid,.dashboard-grid { grid-template-columns:1fr; }
  .system-tile { min-height:155px; }
  .dashboard-card-wide { grid-column:auto; }
}
@media (max-width:460px) {
  .compact-metrics { grid-template-columns:1fr 1fr; }
  .compact-metrics article { padding:12px; }
  .compact-metrics strong { font-size:calc(23px * var(--font-scale)); }
}
html { font-size:calc(16px * var(--font-scale)); }
body { overflow:auto; font-size:1rem; }
.portal-page table,.portal-page input,.portal-page select,.portal-page textarea,.portal-page button { font-size:calc(14px * var(--font-scale)); }
.portal-page td small { display:block; margin-top:4px; color:var(--portal-muted); overflow-wrap:anywhere; }
.account-create { margin:0 0 16px; }
.account-create > summary { padding:16px 18px; cursor:pointer; font-weight:750; }
.account-controls { min-width:130px; max-width:320px; }
.account-controls > summary { cursor:pointer; color:var(--portal-accent); }
.account-controls form { display:grid; gap:8px; padding:14px 0; border-bottom:1px solid var(--portal-line); }
.account-controls label { display:grid; gap:4px; }
.feature-options { display:grid; gap:8px; border:1px solid var(--portal-line); border-radius:10px; padding:14px; }
.feature-options label,.checkbox-line { display:flex; align-items:center; gap:8px; }
.feature-options input,.checkbox-line input { width:auto; min-height:auto; }
.portal-page textarea { width:100%; }
.portal-page .form-grid { margin-top:16px; }
@media(max-width:760px) { .portal-sidebar nav { flex-wrap:wrap; overflow:visible; } }
/* Final portal density and shared component layout. */
.portal-shell-wide { grid-template-columns:minmax(0,1fr); }
.portal-shell-wide .portal-main { grid-column:1/-1; }
.portal-page h1,.hub-heading h1,.section-heading h1 { font-size:1.8rem; line-height:1.18; margin:8px 0; }
.portal-page h2 { font-size:1.2rem; margin:0 0 14px; }
.portal-page .hero { padding:0; margin:0 0 18px; background:none; border:0; box-shadow:none; }
.portal-page .hero h1 { font-size:1.8rem; }
.portal-page .hero p { max-width:60ch; color:var(--portal-muted); }
.portal-page .hero .eyebrow { font-size:.75rem; }
.portal-main-hub { max-width:1320px; }
.portal-main-hub .portal-page { padding:30px 28px; }
.system-tiles { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.system-tile { min-height:176px; padding:18px; gap:12px; box-shadow:none; }
.system-tile-copy strong { font-size:1.2rem; }
.system-tile-copy small { min-height:0; font-size:.875rem; line-height:1.4; }
.system-tile-icon { width:36px; height:36px; border-radius:10px; }
.portal-page p { line-height:1.5; }
.portal-page .filter-bar-compact { padding:12px; }
.portal-page .table-wrap td { padding:12px 14px; vertical-align:top; font-size:.875rem; }
.portal-page .table-wrap th { font-size:.8rem; padding:12px 14px; color:var(--portal-muted); }
.portal-page .table-wrap tr:last-child td { border-bottom:0; }
.portal-page .table-wrap strong { font-weight:650; }
.portal-page .table-wrap small { font-size:.8rem; }
.portal-page .button,.portal-page button { min-height:36px; padding:8px 13px; font-size:.875rem; }
.portal-page .button.small { min-height:32px; padding:6px 10px; }
.portal-page .button-primary { background:var(--portal-accent); color:#111a25; border-color:var(--portal-accent); }
.portal-page .back-link { display:block; color:var(--portal-muted); font-size:.875rem; text-decoration:none; margin-bottom:8px; }
.portal-page .technical-details { margin-top:16px; padding:14px 18px; border:1px solid var(--portal-line); border-radius:12px; background:var(--portal-surface); }
.technical-details summary { cursor:pointer; font-size:.875rem; font-weight:650; }
.technical-details dl { display:grid; grid-template-columns:minmax(100px,180px) minmax(0,1fr); gap:10px 20px; font-size:.875rem; }
.technical-details dd { margin:0; overflow-wrap:anywhere; }
.technical-details dt { color:var(--portal-muted); }
.portal-page .muted { color:var(--portal-muted); }
.portal-page .context-note { padding:10px 14px; border-left:3px solid var(--portal-accent); background:var(--portal-accent-soft); }
.portal-page .stream-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px; }
.portal-page .stream-grid > article { padding:20px; border:1px solid var(--portal-line); border-radius:14px; background:var(--portal-surface); }
.portal-page .stream-grid audio { width:100%; margin-top:14px; }
.portal-page .actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.portal-page .media-preview { margin-top:16px; }
.portal-page .status-pill { font-size:.8rem; }
.account-drawer[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.account-drawer[aria-hidden="false"] { visibility:visible; }
[hidden] { display:none !important; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--portal-accent); outline-offset:3px; }
@media(max-width:1100px) { .system-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .system-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .system-tile { min-height:160px; padding:14px; } .portal-main-hub .portal-page { padding:20px 14px; } .technical-details dl { grid-template-columns:1fr; gap:5px; } .portal-sidebar nav>a { padding:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }