:root {
  color-scheme: dark;
  --portal-bg: #0b1017;
  --portal-bg-deep: #070b10;
  --portal-surface: rgba(17, 25, 34, .94);
  --portal-surface-strong: #171f29;
  --portal-surface-soft: #1b2732;
  --portal-border: rgba(192, 215, 229, .13);
  --portal-border-strong: rgba(78, 216, 188, .46);
  --portal-text: #f1f6f8;
  --portal-muted: #98a9b5;
  --portal-muted-strong: #c3d0d7;
  --portal-accent: #51d5bc;
  --portal-accent-deep: #199d88;
  --portal-accent-ink: #06251f;
  --portal-info: #83c5ff;
  --portal-warning: #ffd37a;
  --portal-danger: #ff9c9c;
  --portal-success: #86e3a4;
  --portal-shadow: 0 22px 56px rgba(0, 0, 0, .24);
  --portal-radius-lg: 22px;
  --portal-radius: 14px;
  --portal-radius-sm: 10px;
  --portal-safe-top: env(safe-area-inset-top, 0px);
  --portal-safe-right: env(safe-area-inset-right, 0px);
  --portal-safe-bottom: env(safe-area-inset-bottom, 0px);
  --portal-safe-left: env(safe-area-inset-left, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* Components such as the public landing deliberately set native `hidden` on
   the authenticated shell. Explicit flex/grid rules otherwise win over the
   browser's non-important UA display rule and leave an invisible layout slot
   above the landing. Keep this global for the sidebar, header and backdrop. */
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--portal-bg); }
body { min-height: 100vh; margin: 0; background: var(--portal-bg); color: var(--portal-text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--portal-accent);
  color: var(--portal-accent-ink);
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }
.portal-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portal-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 86% -12%, rgba(81, 213, 188, .1), transparent 31rem),
    radial-gradient(circle at 12% 100%, rgba(88, 135, 169, .08), transparent 32rem),
    var(--portal-bg);
}
.portal-workspace { min-width: 0; }

.portal-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px 14px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--portal-border);
  background: rgba(4, 16, 26, .88);
  backdrop-filter: blur(18px);
  scrollbar-color: rgba(155, 178, 193, .35) transparent;
}
.portal-sidebar::-webkit-scrollbar { width: 8px; }
.portal-sidebar::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(155, 178, 193, .28); }

.portal-brand {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 0 8px 23px;
}
.portal-brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(140, 249, 234, .45);
  border-radius: 13px;
  background: linear-gradient(145deg, #6de2d3, #178f94);
  color: #04252d;
  box-shadow: 0 8px 22px rgba(18, 169, 151, .2);
  font-size: 15px;
  font-weight: 900;
}
.portal-brand-copy { min-width: 0; }
.portal-brand-name { display: block; font-size: 15px; font-weight: 850; letter-spacing: .02em; }
.portal-brand-caption { display: block; margin-top: 2px; color: var(--portal-muted); font-size: 11px; }
.portal-sidebar-close { display: none; width: 36px; height: 36px; margin-left: auto; place-items: center; border: 1px solid var(--portal-border); border-radius: 10px; background: rgba(13, 36, 53, .72); color: var(--portal-text); font-size: 21px; line-height: 1; }
.portal-sidebar-create { display: flex; gap: 9px; align-items: center; min-height: 42px; margin: 0 8px 18px; padding: 9px 11px; border: 1px solid rgba(116, 239, 218, .36); border-radius: 12px; background: linear-gradient(135deg, rgba(67, 211, 184, .22), rgba(38, 128, 151, .16)); color: #e3fffa; font-size: 12px; font-weight: 800; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-sidebar-create:hover, .portal-sidebar-create:focus-visible { border-color: rgba(154, 255, 238, .7); background: linear-gradient(135deg, rgba(67, 211, 184, .3), rgba(38, 128, 151, .23)); transform: translateY(-1px); outline: 0; }
.portal-sidebar-create > span:first-child { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; background: rgba(218, 255, 248, .16); color: #9effed; font-size: 17px; line-height: 1; }
.portal-sidebar-create > b { margin-left: auto; color: #91eadc; font-size: 15px; }
.portal-sidebar-action-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 7px; margin: 0 8px 18px; }
.portal-sidebar-action-row .portal-sidebar-create { margin: 0; }
.portal-sidebar-focus-toggle { display: grid; width: 40px; min-height: 42px; place-items: center; border: 1px solid rgba(126, 180, 202, .24); border-radius: 12px; background: rgba(13, 36, 53, .58); color: #a5d9de; font: inherit; font-size: 16px; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.portal-sidebar-focus-toggle:hover, .portal-sidebar-focus-toggle:focus-visible { border-color: rgba(116, 239, 218, .55); background: rgba(65, 204, 188, .13); color: #dffefa; outline: 0; transform: translateY(-1px); }

.portal-nav { display: grid; gap: 6px; }
.portal-nav-group { display: block; }
.portal-nav-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #7693a5;
  cursor: pointer;
  list-style: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.portal-nav-summary::-webkit-details-marker { display: none; }
.portal-nav-summary::before { content: "›"; color: #79a5b7; font-size: 16px; line-height: 1; transform: rotate(0deg); transition: transform .16s ease; }
.portal-nav-group[open] .portal-nav-summary::before { transform: rotate(90deg); }
.portal-nav-summary:hover { border-color: rgba(126, 180, 202, .15); background: rgba(125, 205, 235, .045); color: #b5d1de; }
.portal-nav-summary:focus-visible { border-color: rgba(115, 232, 213, .62); box-shadow: 0 0 0 3px rgba(73, 210, 191, .13); outline: 0; }
.portal-nav-label {
  min-width: 0;
  overflow: hidden;
  color: #7693a5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.portal-nav-group[open] .portal-nav-label { color: #a2c4d3; }
.portal-nav-group-count { margin-left: auto; color: #6f91a2; font-size: 10px; font-variant-numeric: tabular-nums; }
.portal-nav-links { display: grid; gap: 4px; padding: 3px 0 8px; }
.portal-nav-link {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--portal-muted-strong);
  font-size: 13px;
  font-weight: 650;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.portal-nav-link > span:not(.portal-nav-icon) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.portal-nav-link:hover { border-color: var(--portal-border); background: rgba(125, 205, 235, .07); color: var(--portal-text); }
.portal-nav-link[aria-current="page"] { border-color: rgba(102, 230, 211, .23); background: rgba(65, 204, 188, .14); color: #d7fffa; }
.portal-nav-icon { display: inline-grid; width: 17px; place-items: center; color: #8dc9d3; font-size: 15px; }
.portal-nav-link[aria-current="page"] .portal-nav-icon { color: var(--portal-accent); }
.portal-nav-count { margin-left: auto; color: #91aebd; font-size: 10px; font-variant-numeric: tabular-nums; }

.portal-sidebar-foot {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding: 24px 8px 0;
}
.portal-bridge-mini {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 11px;
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  background: rgba(13, 36, 53, .55);
}
.portal-bridge-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: var(--portal-warning); box-shadow: 0 0 0 4px rgba(255, 211, 122, .11); }
.portal-bridge-dot.is-ready { background: var(--portal-success); box-shadow: 0 0 0 4px rgba(134, 227, 164, .11); }
.portal-bridge-mini strong { display: block; font-size: 11px; }
.portal-bridge-mini span { display: block; margin-top: 2px; color: var(--portal-muted); font-size: 10px; line-height: 1.45; }

.portal-header {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 14px clamp(18px, 3vw, 42px);
  border-bottom: 1px solid var(--portal-border);
  background: rgba(7, 19, 31, .65);
  backdrop-filter: blur(18px);
}
.portal-menu-button {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--portal-border);
  border-radius: 10px;
  background: var(--portal-surface);
  color: var(--portal-text);
}
.portal-crumbs { min-width: 0; overflow: hidden; color: var(--portal-muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.portal-crumbs span + span::before { margin: 0 7px; color: #587384; content: "/"; }
.portal-header-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.portal-pwa-install-trigger { display: flex; gap: 7px; align-items: center; min-height: 36px; padding: 7px 10px; border: 1px solid rgba(102, 230, 211, .3); border-radius: 10px; background: rgba(65, 204, 188, .1); color: #d9fffa; font: inherit; font-size: 11px; font-weight: 800; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.portal-pwa-install-trigger:hover:not(:disabled) { border-color: rgba(126, 244, 224, .62); background: rgba(65, 204, 188, .18); color: #fff; transform: translateY(-1px); }
.portal-pwa-install-trigger:disabled { cursor: not-allowed; opacity: .62; }
.portal-pwa-install-trigger > span:first-child { color: #84f0df; font-size: 16px; line-height: 1; }
.portal-command-trigger { display: flex; gap: 7px; align-items: center; min-height: 36px; padding: 7px 9px; border: 1px solid var(--portal-border); border-radius: 10px; background: rgba(13, 36, 53, .54); color: var(--portal-muted-strong); font-size: 11px; font-weight: 760; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.portal-command-trigger:hover { border-color: rgba(102, 230, 211, .25); background: rgba(65, 204, 188, .12); color: #ddfffa; }
.portal-command-trigger > span:first-child { color: var(--portal-accent); font-size: 16px; line-height: 1; }
.portal-command-trigger kbd, .portal-command-hint kbd { padding: 2px 4px; border: 1px solid rgba(192, 215, 229, .16); border-radius: 4px; background: rgba(4, 16, 26, .65); color: #9cb6c2; font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.portal-session-chip {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 270px;
  padding: 7px 9px 7px 7px;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  background: rgba(13, 36, 53, .68);
  color: var(--portal-muted-strong);
  font-size: 11px;
}
.portal-session-avatar { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #1c5667; color: #d8fff9; font-size: 11px; font-weight: 850; }
.portal-session-copy { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.portal-main { max-width: 1680px; margin: 0 auto; padding: clamp(22px, 3.6vw, 52px); }
.portal-mobile-nav { display: none; }

/* Desktop focus mode is deliberately visual-only. The ordinary sidebar stays
   available as the same keyboard-safe drawer; no route, account data, action
   capability, browser storage or server state changes when it is toggled. */
@media (min-width: 981px) {
  .portal-shell--focus { grid-template-columns: minmax(0, 1fr); }
  .portal-shell--focus .portal-sidebar { position: fixed; z-index: 100; top: 0; left: 0; width: min(304px, calc(100vw - 46px)); height: 100vh; height: 100dvh; padding-top: calc(20px + var(--portal-safe-top)); padding-bottom: calc(16px + var(--portal-safe-bottom)); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 18px 0 40px rgba(0, 0, 0, .3); }
  .portal-shell--focus .portal-sidebar.is-open { transform: translateX(0); }
  .portal-shell--focus .portal-backdrop { position: fixed; z-index: 90; inset: 0; background: rgba(0, 7, 13, .66); backdrop-filter: blur(2px); }
  .portal-shell--focus .portal-menu-button { display: grid; place-items: center; flex: 0 0 auto; }
  .portal-shell--focus .portal-sidebar-close { display: grid; }
}
.portal-command-palette { position: fixed; z-index: 130; inset: 0; display: grid; place-items: start center; padding: min(11vh, 106px) 20px 24px; overflow-y: auto; }
.portal-command-palette-backdrop { position: absolute; inset: 0; background: rgba(0, 8, 15, .72); backdrop-filter: blur(5px); }
.portal-command-dialog { position: relative; z-index: 1; display: grid; width: min(680px, 100%); max-height: min(690px, calc(100vh - 42px)); overflow: hidden; border: 1px solid rgba(135, 218, 210, .25); border-radius: 18px; background: linear-gradient(160deg, rgba(18, 39, 52, .98), rgba(7, 18, 29, .99)); box-shadow: 0 28px 90px rgba(0, 0, 0, .46); }
.portal-command-header { display: flex; gap: 18px; align-items: flex-start; padding: 21px 22px 13px; border-bottom: 1px solid var(--portal-border); }
.portal-command-header h2 { margin: 3px 0 0; color: #effdff; font-size: 21px; letter-spacing: -.03em; }
.portal-command-kicker { color: #7fe7d5; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.portal-command-close { display: grid; width: 34px; height: 34px; margin-left: auto; place-items: center; border: 1px solid var(--portal-border); border-radius: 9px; background: rgba(4, 16, 26, .52); color: var(--portal-muted-strong); font-size: 20px; line-height: 1; }
.portal-command-search { display: flex; gap: 10px; align-items: center; margin: 15px 18px 8px; padding: 0 12px; border: 1px solid rgba(120, 196, 207, .24); border-radius: 11px; background: rgba(3, 13, 23, .62); color: #78d8cd; }
.portal-command-search:focus-within { border-color: rgba(102, 230, 211, .56); box-shadow: 0 0 0 3px rgba(81, 213, 188, .1); }
.portal-command-search input { width: 100%; min-height: 45px; border: 0; outline: 0; background: transparent; color: #eefaff; font-size: 13px; }
.portal-command-search input::placeholder { color: #7993a0; }
.portal-command-hint { display: flex; gap: 12px; justify-content: space-between; margin: 0 20px 9px; color: #7e98a5; font-size: 10px; }
.portal-command-results { display: grid; gap: 4px; min-height: 0; max-height: 420px; padding: 7px 12px 14px; overflow-y: auto; }
.portal-command-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 57px; padding: 8px 10px; border: 1px solid transparent; border-radius: 11px; color: var(--portal-muted-strong); transition: border-color .14s ease, background .14s ease, color .14s ease; }
.portal-command-item:hover, .portal-command-item:focus-visible { border-color: rgba(102, 230, 211, .25); background: rgba(65, 204, 188, .11); color: #e4fffb; outline: 0; }
.portal-command-item[aria-current="page"] { border-color: rgba(129, 205, 255, .24); background: rgba(101, 176, 229, .1); }
.portal-command-item-icon { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(127, 207, 214, .17); border-radius: 9px; background: rgba(8, 31, 43, .7); color: var(--portal-accent); font-size: 15px; }
.portal-command-item-copy { min-width: 0; }
.portal-command-item-copy strong, .portal-command-item-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.portal-command-item-copy strong { font-size: 12px; }
.portal-command-item-copy small { margin-top: 3px; color: #8ba4af; font-size: 10px; }
.portal-command-item-arrow { color: #89b7bf; font-size: 16px; }
.portal-command-empty, .portal-command-count { margin: 5px 20px 17px; color: #94abb5; font-size: 11px; line-height: 1.5; }
.portal-command-empty { color: #efcf90; }
.portal-body--command-palette { overflow: hidden; }
.portal-boot { display: flex; gap: 10px; align-items: center; min-height: 55vh; justify-content: center; color: var(--portal-muted); }
.portal-loader { width: 18px; height: 18px; border: 2px solid rgba(99, 225, 208, .25); border-top-color: var(--portal-accent); border-radius: 50%; animation: portal-spin .75s linear infinite; }
@keyframes portal-spin { to { transform: rotate(360deg); } }

/* Public product entry. It intentionally contains no account, wallet or
   provider state: the signed Portal starts only after an explicit action. */
.portal-body--landing { background: #071018; }
.portal-shell--landing { display: block; min-height: 100vh; min-height: 100dvh; background: #071018; }
.portal-shell--landing .portal-workspace { min-height: 100vh; min-height: 100dvh; }
.portal-shell--landing .portal-main { max-width: none; margin: 0; padding: 0; }
.portal-body--auth { background: #08111a; }
.portal-shell--auth { display: block; min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 82% 8%, rgba(62, 193, 183, .12), transparent 30rem), radial-gradient(circle at 10% 92%, rgba(70, 132, 203, .11), transparent 31rem), #08111a; }
.portal-shell--auth .portal-workspace { min-height: 100vh; min-height: 100dvh; }
.portal-shell--auth .portal-main { width: min(1200px, calc(100% - 48px - var(--portal-safe-left) - var(--portal-safe-right))); max-width: none; margin: 0 auto; padding: max(26px, calc(26px + var(--portal-safe-top))) 0 max(42px, calc(42px + var(--portal-safe-bottom))); }
.portal-landing { overflow: hidden; min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 86% 4%, rgba(49, 167, 205, .17), transparent 31rem), radial-gradient(circle at 10% 40%, rgba(73, 209, 180, .12), transparent 32rem), #071018; }
.portal-landing-nav, .portal-landing-hero, .portal-landing-section, .portal-landing-workflow, .portal-landing-trust, .portal-landing-footer { width: min(1216px, calc(100% - 48px)); margin-inline: auto; }
.portal-landing-nav { display: flex; gap: 18px; align-items: center; min-height: 84px; padding-top: max(10px, var(--portal-safe-top)); }
.portal-landing-brand { display: inline-flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.portal-landing-brand .portal-brand-mark { width: 40px; height: 40px; margin: 0; }
.portal-landing-brand strong { display: block; color: #f3fbfd; font-size: 14px; font-weight: 900; letter-spacing: .015em; }
.portal-landing-brand small { display: block; margin-top: 2px; color: #8ea9b7; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.portal-landing-nav-links { display: flex; gap: 25px; align-items: center; margin-left: auto; color: #a5bbc6; font-size: 12px; font-weight: 720; }
.portal-landing-nav-links a { transition: color .16s ease; }
.portal-landing-nav-links a:hover { color: #e9fcff; }
.portal-landing-nav-actions { display: flex; gap: 7px; align-items: center; }
.portal-landing-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(410px, .98fr); gap: clamp(36px, 7vw, 94px); align-items: center; padding: clamp(74px, 10vw, 136px) 0 clamp(82px, 11vw, 148px); }
.portal-landing-hero-copy { max-width: 660px; }
.portal-landing-kicker { display: inline-flex; gap: 8px; align-items: center; color: #85eadb; font-size: 11px; font-weight: 830; letter-spacing: .09em; text-transform: uppercase; }
.portal-landing-kicker span { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(108, 239, 217, .28); border-radius: 7px; background: rgba(63, 214, 190, .12); color: #8df4e4; font-size: 12px; }
.portal-landing-hero h1 { max-width: 720px; margin: 16px 0 18px; color: #f3fbfd; font-size: clamp(42px, 5.45vw, 74px); line-height: 1.01; letter-spacing: -.055em; }
.portal-landing-hero p { max-width: 625px; margin: 0; color: #b3c8d1; font-size: clamp(14px, 1.55vw, 17px); line-height: 1.7; }
.portal-landing-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.portal-landing-hero-actions .portal-button { min-height: 46px; padding-inline: 17px; font-size: 13px; }
.portal-landing-proof { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 25px 0 0; padding: 0; color: #92aab5; list-style: none; font-size: 11px; font-weight: 680; }
.portal-landing-proof li { display: inline-flex; gap: 6px; align-items: center; }
.portal-landing-proof li span { color: #80ead6; font-weight: 900; }
.portal-landing-preview { position: relative; min-height: 425px; padding: 1px; border: 1px solid rgba(134, 235, 219, .26); border-radius: 26px; background: linear-gradient(145deg, rgba(114, 243, 223, .35), rgba(31, 89, 118, .18) 42%, rgba(8, 24, 39, .7)); box-shadow: 0 35px 86px rgba(0, 0, 0, .38), inset 0 1px rgba(255,255,255,.08); transform: rotate(1.4deg); }
.portal-landing-preview::after { position: absolute; z-index: -1; right: -38px; bottom: -34px; width: 190px; height: 190px; border-radius: 50%; background: rgba(64, 218, 191, .16); filter: blur(30px); content: ""; }
.portal-landing-preview-bar { display: flex; gap: 6px; align-items: center; min-height: 45px; padding: 0 15px; border-bottom: 1px solid rgba(160, 208, 222, .12); border-radius: 25px 25px 0 0; background: rgba(4, 17, 29, .78); }
.portal-landing-preview-bar span { width: 7px; height: 7px; border-radius: 50%; background: #496370; }
.portal-landing-preview-bar span:first-child { background: #ef8b84; }
.portal-landing-preview-bar span:nth-child(2) { background: #eecb76; }
.portal-landing-preview-bar span:nth-child(3) { background: #82d9a4; }
.portal-landing-preview-bar strong { margin-left: 8px; color: #9eb5c0; font-size: 10px; font-weight: 760; letter-spacing: .04em; }
.portal-landing-preview-body { display: grid; gap: 20px; min-height: 377px; padding: 28px; border-radius: 0 0 25px 25px; background: linear-gradient(145deg, rgba(16, 40, 55, .96), rgba(5, 17, 29, .98)); }
.portal-landing-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e8f9fd; font-size: 17px; font-weight: 820; }
.portal-landing-preview-heading b { padding: 5px 9px; border: 1px solid rgba(104, 232, 208, .25); border-radius: 999px; background: rgba(66, 209, 185, .1); color: #91f0df; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.portal-landing-preview-lines { display: grid; gap: 10px; }
.portal-landing-preview-lines i { display: block; height: 12px; border-radius: 99px; background: linear-gradient(90deg, rgba(141, 234, 219, .24), rgba(56, 107, 133, .12)); }
.portal-landing-preview-lines i:nth-child(2) { width: 82%; }
.portal-landing-preview-lines i:nth-child(3) { width: 61%; }
.portal-landing-preview-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; color: #7896a5; font-size: 12px; font-weight: 850; text-align: center; }
.portal-landing-preview-steps span { padding: 10px 4px; border: 1px solid rgba(154, 207, 231, .12); border-radius: 9px; background: rgba(2, 13, 23, .3); }
.portal-landing-preview-steps span.is-active { border-color: rgba(97, 229, 206, .43); background: rgba(59, 199, 179, .16); color: #a4f5e7; }
.portal-landing-preview-steps small { display: block; margin-top: 3px; color: inherit; font-size: 8px; font-weight: 700; }
.portal-landing-preview-callout { display: flex; gap: 11px; align-items: flex-start; margin-top: auto; padding: 13px; border: 1px solid rgba(131, 197, 255, .17); border-radius: 12px; background: rgba(22, 75, 102, .17); }
.portal-landing-preview-callout > span { color: #88d1ff; font-size: 18px; }
.portal-landing-preview-callout p { margin: 0; color: #a5c5d7; font-size: 10px; line-height: 1.55; }
.portal-landing-preview-callout strong { color: #e0f3fb; font-size: 11px; }
.portal-landing-section { padding-bottom: clamp(70px, 9vw, 116px); }
.portal-landing-section-heading { display: grid; gap: 9px; max-width: 610px; }
.portal-landing-section-heading > span, .portal-landing-trust-copy > span { color: #83e7d9; font-size: 10px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; }
.portal-landing-section h2, .portal-landing-workflow h2, .portal-landing-trust h2 { margin: 0; color: #ecf9fb; font-size: clamp(28px, 3.6vw, 47px); line-height: 1.08; letter-spacing: -.04em; }
.portal-landing-section-heading p, .portal-landing-workflow p, .portal-landing-trust p { margin: 0; color: #9db4be; font-size: 13px; line-height: 1.7; }
.portal-landing-studios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 30px; }
.portal-landing-studio { position: relative; display: grid; gap: 12px; min-height: 238px; padding: 19px; overflow: hidden; border: 1px solid rgba(164, 205, 221, .14); border-radius: 18px; background: linear-gradient(145deg, rgba(13, 35, 48, .83), rgba(7, 20, 31, .91)); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.portal-landing-studio::before { position: absolute; top: -70px; right: -65px; width: 160px; height: 160px; border-radius: 50%; background: rgba(70, 199, 222, .13); content: ""; }
.portal-landing-studio:hover { border-color: rgba(142, 241, 225, .45); background: linear-gradient(145deg, rgba(18, 56, 72, .94), rgba(8, 25, 37, .96)); transform: translateY(-3px); }
.portal-landing-studio-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #3cc4df, #3272dc); box-shadow: 0 12px 24px rgba(19, 105, 168, .25); color: #eaffff; font-size: 19px; }
.portal-landing-studio-tag { color: #79c5d5; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.portal-landing-studio strong { color: #effbfe; font-size: 18px; letter-spacing: -.025em; }
.portal-landing-studio > span:not(.portal-landing-studio-icon):not(.portal-landing-studio-tag) { color: #a8bdc7; font-size: 12px; line-height: 1.58; }
.portal-landing-studio em { margin-top: auto; color: #c9e4eb; font-size: 11px; font-style: normal; font-weight: 760; }
.portal-landing-studio--violet .portal-landing-studio-icon { background: linear-gradient(145deg, #a75be8, #5947cd); }
.portal-landing-studio--amber .portal-landing-studio-icon { background: linear-gradient(145deg, #ffaf38, #df6d12); }
.portal-landing-studio--rose .portal-landing-studio-icon { background: linear-gradient(145deg, #ee617b, #c63e54); }
.portal-landing-studio--mint .portal-landing-studio-icon { background: linear-gradient(145deg, #5ce1be, #228e85); }
.portal-landing-workflow { display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: clamp(28px, 7vw, 100px); align-items: start; padding: clamp(42px, 7vw, 83px); border: 1px solid rgba(137, 218, 219, .16); border-radius: 28px; background: linear-gradient(125deg, rgba(10, 45, 59, .88), rgba(11, 28, 42, .9)); }
.portal-landing-workflow > div { display: grid; gap: 15px; }
.portal-landing-workflow ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.portal-landing-workflow li { display: grid; grid-template-columns: 47px 1fr; gap: 13px; padding: 15px 0; border-bottom: 1px solid rgba(163, 211, 227, .12); }
.portal-landing-workflow li:last-child { border-bottom: 0; }
.portal-landing-workflow li > span { color: #7bdcce; font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.portal-landing-workflow li strong { color: #e9f9fb; font-size: 14px; }
.portal-landing-workflow li p { margin-top: 3px; font-size: 11px; }
.portal-landing-trust { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); gap: clamp(28px, 7vw, 102px); align-items: center; padding: clamp(78px, 11vw, 145px) 0; }
.portal-landing-trust-copy { display: grid; gap: 12px; }
.portal-landing-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-landing-trust-grid article { min-height: 176px; padding: 17px; border: 1px solid rgba(154, 207, 231, .14); border-radius: 16px; background: rgba(9, 27, 40, .55); }
.portal-landing-trust-grid article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(80, 211, 190, .1); color: #81e7d9; font-size: 16px; }
.portal-landing-trust-grid strong { display: block; margin-top: 23px; color: #e6f7fa; font-size: 12px; }
.portal-landing-trust-grid p { margin-top: 5px; font-size: 10px; line-height: 1.5; }
.portal-landing-footer { display: flex; gap: 18px; align-items: center; justify-content: space-between; min-height: 100px; padding: 18px 0 calc(18px + var(--portal-safe-bottom)); border-top: 1px solid rgba(154, 207, 231, .13); color: #819aa7; font-size: 10px; }
.portal-landing-footer > div { display: flex; gap: 14px; }
.portal-landing-footer > div a:hover { color: #d8f4f6; }

.portal-finalization-intro { border-color: rgba(131, 197, 255, .22); background: linear-gradient(135deg, rgba(13, 49, 71, .72), rgba(13, 31, 43, .8)); }
.portal-media-studio-intro { border-color: rgba(111, 183, 255, .24); background: linear-gradient(135deg, rgba(15, 42, 69, .78), rgba(17, 27, 50, .87)); }
.portal-media-studio-intro .portal-state-icon { color: #a2c5ff; }
.portal-finalization-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.portal-finalization-card { display: grid; gap: 11px; min-height: 215px; padding: 17px; border: 1px solid var(--portal-border); border-radius: 16px; background: linear-gradient(145deg, rgba(13, 39, 55, .82), rgba(8, 24, 36, .86)); }
.portal-finalization-card.is-guarded { border-style: dashed; background: rgba(20, 29, 38, .68); }
.portal-finalization-card-head { display: flex; align-items: center; justify-content: space-between; gap: 11px; }
.portal-finalization-number { color: #78c6d7; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.portal-finalization-card .portal-module-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 16px; }
.portal-finalization-card h3 { margin: 0; color: #e7f8fc; font-size: 15px; letter-spacing: -.02em; }
.portal-finalization-card p { margin: 0; color: var(--portal-muted); font-size: 11px; line-height: 1.58; }
.portal-finalization-card .portal-button { width: fit-content; margin-top: auto; padding-inline: 0; }
.portal-finalization-guard { margin-top: auto; color: #d5b773; font-size: 11px; font-weight: 760; }

.portal-bot-companion-intro { border-color: rgba(112, 211, 202, .25); background: linear-gradient(135deg, rgba(10, 48, 57, .78), rgba(11, 28, 43, .86)); }
.portal-bot-companion-intro .portal-state-icon { color: #85eadb; }
.portal-bot-companion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.portal-bot-companion-card { display: grid; gap: 12px; min-height: 218px; padding: 18px; border: 1px solid rgba(126, 213, 207, .17); border-radius: 16px; background: linear-gradient(145deg, rgba(12, 40, 53, .87), rgba(7, 22, 33, .93)); }
.portal-bot-companion-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-bot-companion-card h3 { margin: 0; color: #e8f9fb; font-size: 16px; letter-spacing: -.018em; }
.portal-bot-companion-card p { margin: 0; color: var(--portal-muted); font-size: 11px; line-height: 1.6; }
.portal-bot-companion-card .portal-form-footer { margin-top: auto; padding-top: 4px; }
.portal-bot-companion-card .portal-form-note { max-width: 160px; }

.portal-page { display: grid; gap: 22px; }
.portal-hero { display: flex; gap: 26px; align-items: flex-end; justify-content: space-between; }
.portal-hero-copy { max-width: 800px; }
.portal-eyebrow { display: flex; gap: 8px; align-items: center; color: var(--portal-accent); font-size: 11px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.portal-eyebrow::before { width: 22px; height: 1px; background: currentColor; content: ""; }
.portal-title { max-width: 860px; margin: 8px 0 8px; font-size: clamp(28px, 4vw, 43px); line-height: 1.07; letter-spacing: -.035em; }
.portal-description { max-width: 690px; margin: 0; color: var(--portal-muted-strong); font-size: 15px; line-height: 1.68; }
.portal-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }

.portal-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 9px 13px;
  border: 1px solid var(--portal-border);
  border-radius: 10px;
  background: rgba(13, 36, 53, .72);
  color: var(--portal-text);
  font-size: 12px;
  font-weight: 780;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.portal-button:hover:not(:disabled) { border-color: var(--portal-border-strong); background: rgba(24, 82, 91, .72); transform: translateY(-1px); }
.portal-button:disabled { border-color: rgba(155, 178, 193, .15); background: rgba(13, 36, 53, .36); color: #7892a1; }
.portal-button--primary { border-color: rgba(123, 237, 219, .58); background: linear-gradient(135deg, #76e4d4, #35b8b3); color: #03292d; }
.portal-button--primary:hover:not(:disabled) { border-color: #a6fff0; background: linear-gradient(135deg, #8defe0, #4bc9bf); }
.portal-button--quiet { border-color: transparent; background: transparent; color: var(--portal-muted-strong); }
.portal-button--danger { color: #ffd1d1; }
.portal-button[aria-busy="true"] { cursor: progress; opacity: .68; }

.portal-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  min-height: 25px;
  padding: 5px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--portal-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.portal-badge::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.portal-badge[data-status="ready"], .portal-badge[data-status="completed"] { color: var(--portal-success); background: rgba(134, 227, 164, .07); }
.portal-badge[data-status="draft"], .portal-badge[data-status="awaiting_confirm"], .portal-badge[data-status="queued"], .portal-badge[data-status="processing"], .portal-badge[data-status="read_only"] { color: var(--portal-info); background: rgba(131, 197, 255, .07); }
.portal-badge[data-status="guarded"], .portal-badge[data-status="disabled"] { color: var(--portal-warning); background: rgba(255, 211, 122, .07); }
.portal-badge[data-status="failed"], .portal-badge[data-status="error"] { color: var(--portal-danger); background: rgba(255, 156, 156, .07); }
.portal-badge[data-status="cancelled"] { color: #c5b7e9; background: rgba(177, 151, 235, .09); }
.portal-badge[data-status="refunded"] { color: #a3dfd4; background: rgba(101, 209, 190, .09); }

.portal-canonical-result {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(131, 197, 255, .16);
  border-radius: var(--portal-radius-md);
  background: linear-gradient(145deg, rgba(14, 37, 58, .78), rgba(8, 25, 40, .72));
}
.portal-result-grid { display: grid; gap: 10px; margin-top: 12px; }
.portal-result-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  background: rgba(5, 18, 30, .48);
}
.portal-result-item > strong { color: var(--portal-muted); font-size: .74rem; letter-spacing: .055em; text-transform: uppercase; }
.portal-result-item span { color: var(--portal-text); line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.portal-result-text { max-height: 340px; overflow: auto; padding: 11px 12px; border: 1px solid rgba(131, 197, 255, .14); border-radius: 10px; background: rgba(2, 18, 28, .5); color: #dcebf1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.62; overflow-wrap: anywhere; white-space: pre-wrap; scrollbar-color: rgba(155, 178, 193, .35) transparent; }
.portal-result-list { display: grid; gap: 8px; margin: 2px 0 0; padding-left: 20px; }
.portal-result-list > li { color: var(--portal-text); line-height: 1.55; }
.portal-result-empty { color: var(--portal-muted) !important; }
.portal-canonical-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.portal-canonical-suggestions { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(131, 197, 255, .13); }
.portal-canonical-suggestions .portal-section-heading { align-items: flex-start; margin: 0; }
.portal-canonical-suggestions .portal-section-heading h4 { margin: 0; color: var(--portal-text); font-size: 14px; }
.portal-canonical-suggestions .portal-section-heading p { max-width: 640px; margin-top: 4px; line-height: 1.55; }
.portal-suggestion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.portal-suggestion-card { display: grid; gap: 11px; min-width: 0; padding: 13px; border: 1px solid rgba(122, 208, 193, .2); border-radius: 13px; background: linear-gradient(150deg, rgba(10, 36, 41, .65), rgba(7, 22, 35, .65)); }
.portal-suggestion-card-head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.portal-suggestion-card-head strong { min-width: 0; overflow-wrap: anywhere; color: #e1f8f2; font-size: 12px; }
.portal-suggestion-card-head span { flex: 0 0 auto; color: var(--portal-accent); font-size: 9px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.portal-suggestion-meta { display: grid; gap: 6px; margin: 0; }
.portal-suggestion-meta div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
.portal-suggestion-meta dt { color: var(--portal-muted); font-size: 10px; }
.portal-suggestion-meta dd { min-width: 0; margin: 0; color: var(--portal-muted-strong); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }

.portal-status-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .85fr); gap: 16px; }
.portal-card { min-width: 0; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: rgba(16, 23, 31, .9); box-shadow: var(--portal-shadow); }
.portal-card-pad { padding: clamp(18px, 2.2vw, 27px); }
.portal-card-header { display: flex; gap: 15px; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.portal-card-title { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.portal-card-subtitle { margin: 5px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.58; }

.portal-state { display: flex; gap: 13px; align-items: flex-start; }
.portal-state-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid var(--portal-border); border-radius: 12px; background: var(--portal-surface-soft); color: var(--portal-warning); font-size: 17px; }
.portal-state[data-state="ready"] .portal-state-icon { color: var(--portal-success); }
.portal-state[data-state="error"] .portal-state-icon { color: var(--portal-danger); }
.portal-state h2, .portal-state h3 { margin: 1px 0 4px; font-size: 15px; }
.portal-state p { max-width: 720px; margin: 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.65; }
.portal-state-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.portal-state-meta span { padding: 5px 7px; border-radius: 7px; background: rgba(109, 166, 192, .09); color: #a7c2cf; font-size: 10px; }

.portal-summary-list { display: grid; gap: 10px; }
.portal-summary-item { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(155, 178, 193, .1); }
.portal-summary-item:last-child { padding-bottom: 0; border-bottom: 0; }
.portal-summary-key { color: var(--portal-muted); font-size: 11px; }
.portal-summary-value { min-width: 0; overflow-wrap: anywhere; color: var(--portal-muted-strong); font-size: 11px; font-weight: 700; text-align: right; }

.portal-work-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 16px; }
.portal-stack { display: grid; gap: 16px; min-width: 0; }
.portal-form { display: grid; gap: 16px; }
.portal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.portal-field { display: grid; gap: 7px; min-width: 0; }
.portal-field--wide { grid-column: 1 / -1; }
.portal-field label { color: #cce0e9; font-size: 11px; font-weight: 760; }
.portal-required-mark { margin-left: 3px; color: var(--portal-warning); }
.portal-field-help { color: #7d9aa9; font-size: 10px; line-height: 1.45; }
.portal-field-staged { color: #9acfc6; font-size: 10px; line-height: 1.45; }
.portal-input, .portal-select, .portal-textarea {
  width: 100%;
  min-height: 40px;
  padding: 10px 11px;
  border: 1px solid rgba(154, 207, 231, .19);
  border-radius: 10px;
  outline: 0;
  background: rgba(2, 18, 28, .54);
  color: var(--portal-text);
  font-size: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.portal-textarea { min-height: 118px; resize: vertical; }
.portal-input::placeholder, .portal-textarea::placeholder { color: #6b8999; }
.portal-input:focus, .portal-select:focus, .portal-textarea:focus { border-color: var(--portal-accent); box-shadow: 0 0 0 3px rgba(99, 225, 208, .12); }
.portal-input:disabled, .portal-select:disabled, .portal-textarea:disabled { border-color: rgba(154, 207, 231, .1); background: rgba(2, 18, 28, .29); color: #6f8998; }
.portal-checkbox { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 10px 11px; border: 1px solid rgba(154, 207, 231, .18); border-radius: 10px; background: rgba(4, 24, 37, .82); color: #d8edf4 !important; font-size: 12px !important; font-weight: 620 !important; cursor: pointer; }
.portal-checkbox input { width: 16px; height: 16px; accent-color: var(--portal-accent); cursor: pointer; }
.portal-checkbox:has(input:focus-visible) { border-color: var(--portal-accent); box-shadow: 0 0 0 3px rgba(99, 225, 208, .12); }
.portal-checkbox:has(input:disabled) { cursor: not-allowed; opacity: .58; }
.portal-form-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 2px; }
.portal-form-note { flex: 1 1 220px; color: var(--portal-muted); font-size: 10px; line-height: 1.5; }
.portal-empty-route-actions { margin: 14px 0 4px; padding: 12px; border: 1px solid rgba(117, 225, 209, .16); border-radius: 12px; background: rgba(25, 92, 93, .11); }
.portal-flow-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(154, 207, 231, .12); }

.portal-panel-list { display: grid; gap: 9px; }
.portal-panel-row { display: flex; gap: 11px; align-items: flex-start; padding: 11px; border: 1px solid rgba(154, 207, 231, .1); border-radius: 11px; background: rgba(2, 18, 28, .26); }
.portal-panel-row-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: rgba(99, 225, 208, .1); color: var(--portal-accent); font-size: 13px; }
.portal-panel-row strong { display: block; color: #d7e8ef; font-size: 11px; }
.portal-panel-row span { display: block; margin-top: 3px; color: var(--portal-muted); font-size: 10px; line-height: 1.48; }

.portal-section-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 7px 0 -4px; }
.portal-section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.portal-section-heading p { margin: 0; color: var(--portal-muted); font-size: 11px; }
.portal-section-kicker { display: block; margin-bottom: 5px; color: var(--portal-accent); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.portal-studio-section { display: grid; gap: 14px; }
.portal-dashboard-app { display: grid; gap: clamp(18px, 2.1vw, 28px); }
.portal-dashboard-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(20px, 4vw, 58px); align-items: end; padding: clamp(24px, 4vw, 46px); border: 1px solid rgba(120, 221, 210, .2); border-radius: 24px; background: radial-gradient(circle at 78% 10%, rgba(83, 214, 191, .18), transparent 20rem), linear-gradient(135deg, rgba(12, 48, 59, .92), rgba(11, 27, 40, .94) 60%, rgba(10, 21, 32, .96)); box-shadow: 0 25px 64px rgba(0, 0, 0, .2); overflow: hidden; }
.portal-dashboard-overview-copy { min-width: 0; }
.portal-dashboard-overview h1 { max-width: 660px; margin: 0; color: #effffb; font-size: clamp(31px, 4vw, 51px); letter-spacing: -.055em; line-height: 1.04; }
.portal-dashboard-overview p { max-width: 660px; margin: 13px 0 0; color: #b7d0d8; font-size: 13px; line-height: 1.7; }
.portal-dashboard-overview-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.portal-dashboard-overview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-dashboard-overview-stats > div { min-width: 0; padding: 13px 12px; border: 1px solid rgba(151, 228, 219, .17); border-radius: 14px; background: rgba(4, 19, 30, .36); }
.portal-dashboard-overview-stats dt { color: #9cb9c3; font-size: 10px; font-weight: 750; }
.portal-dashboard-overview-stats dd { margin: 8px 0 3px; color: #e3fffa; font-size: 27px; font-weight: 850; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.portal-dashboard-overview-stats span { display: block; overflow: hidden; color: #8fb2bf; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portal-start-guide { display: grid; gap: 16px; padding: clamp(19px, 2.8vw, 28px); border: 1px solid rgba(126, 214, 206, .2); border-radius: 19px; background: linear-gradient(135deg, rgba(13, 45, 57, .72), rgba(7, 25, 38, .93)); box-shadow: 0 16px 42px rgba(0, 0, 0, .13); }
.portal-start-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.portal-start-guide-head h2 { margin: 0; color: #e6fbf8; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.035em; }
.portal-start-guide-head p { max-width: 710px; margin: 8px 0 0; color: #a9c6ce; font-size: 12px; line-height: 1.65; }
.portal-start-guide-note { flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(117, 225, 209, .2); border-radius: 999px; color: #8ee8d9; background: rgba(80, 207, 187, .08); font-size: 10px; font-weight: 800; white-space: nowrap; }
.portal-start-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-start-guide-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; min-width: 0; padding: 14px; border: 1px solid rgba(154, 207, 231, .13); border-radius: 14px; background: rgba(2, 18, 30, .28); color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-start-guide-step:hover, .portal-start-guide-step:focus-visible { border-color: rgba(99, 225, 208, .46); background: rgba(72, 198, 185, .09); outline: 0; transform: translateY(-2px); }
.portal-start-guide-number { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(108, 231, 213, .28); border-radius: 9px; color: #8df0df; background: rgba(63, 205, 185, .11); font-size: 10px; font-weight: 900; }
.portal-start-guide-copy { min-width: 0; }
.portal-start-guide-copy small, .portal-start-guide-copy strong, .portal-start-guide-copy p, .portal-start-guide-copy em { display: block; }
.portal-start-guide-copy small { color: #73d9cb; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.portal-start-guide-copy strong { margin-top: 5px; color: #e7f7f8; font-size: 13px; letter-spacing: -.015em; }
.portal-start-guide-copy p { margin: 7px 0 11px; color: #a6c1c9; font-size: 11px; line-height: 1.52; }
.portal-start-guide-copy em { color: #8ee8d9; font-size: 10px; font-style: normal; font-weight: 800; }
.portal-start-guide-copy em b { margin-left: 3px; font-size: 13px; }
.portal-dashboard-assurance { margin-top: -4px; }
.portal-dashboard-drafts { display: grid; gap: 0; }
.portal-dashboard-draft-list { display: grid; gap: 8px; }
.portal-dashboard-draft { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 58px; padding: 10px; border: 1px solid rgba(154, 207, 231, .11); border-radius: 12px; background: rgba(3, 20, 31, .28); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-dashboard-draft:hover, .portal-dashboard-draft:focus-visible { border-color: rgba(99, 225, 208, .4); background: rgba(99, 225, 208, .08); outline: 0; transform: translateY(-1px); }
.portal-dashboard-draft-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(99, 225, 208, .1); color: var(--portal-accent); font-size: 15px; }
.portal-dashboard-draft span:nth-child(2) { min-width: 0; }
.portal-dashboard-draft strong, .portal-dashboard-draft small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-dashboard-draft strong { color: #e2f4f6; font-size: 11px; }
.portal-dashboard-draft small { margin-top: 3px; color: var(--portal-muted); font-size: 10px; }
.portal-dashboard-draft > b { color: var(--portal-accent); font-size: 16px; }
.portal-studio-launchpad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.portal-action-center { display: grid; gap: 14px; }
.portal-action-center-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.portal-action-card { display: grid; min-width: 0; min-height: 202px; padding: 15px; border: 1px solid var(--portal-border); border-radius: 15px; background: linear-gradient(145deg, rgba(13, 39, 55, .79), rgba(7, 25, 37, .9)); color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-action-card:hover { border-color: rgba(99, 225, 208, .44); background: linear-gradient(145deg, rgba(17, 54, 70, .92), rgba(8, 29, 42, .98)); transform: translateY(-2px); }
.portal-action-card:focus-visible { outline-offset: 3px; }
.portal-action-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.portal-action-card .portal-module-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 16px; }
.portal-action-card > strong { margin-top: 16px; color: #e8fbff; font-size: 29px; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.portal-action-card h3 { margin: 9px 0 0; color: #e0f2f6; font-size: 13px; letter-spacing: -.01em; }
.portal-action-card p { margin: 5px 0 0; color: var(--portal-muted); font-size: 10px; line-height: 1.52; }
.portal-action-card-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; color: #b9dedf; font-size: 10px; font-weight: 780; }
.portal-action-card-link b { color: var(--portal-accent); font-size: 15px; }
.portal-studio-card { display: grid; gap: 14px; min-width: 0; min-height: 215px; padding: 16px; border: 1px solid var(--portal-border); border-radius: 16px; background: rgba(17, 25, 34, .88); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-studio-card:hover { border-color: var(--portal-border-strong); background: rgba(22, 34, 43, .96); transform: translateY(-2px); }
.portal-studio-card:focus-visible { outline-offset: 2px; }
.portal-studio-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.portal-studio-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(81, 213, 188, .25); border-radius: 13px; background: rgba(81, 213, 188, .1); color: var(--portal-accent); font-size: 19px; }
.portal-studio-card h3 { margin: 0; color: var(--portal-text); font-size: 15px; letter-spacing: -.015em; }
.portal-studio-card p { margin: 5px 0 0; color: var(--portal-muted); font-size: 11px; line-height: 1.58; }
.portal-studio-tags { display: flex; flex-wrap: wrap; gap: 5px; align-self: end; }
.portal-studio-tags span { padding: 4px 7px; border: 1px solid rgba(192, 215, 229, .14); border-radius: 999px; background: rgba(255, 255, 255, .025); color: #aebfc9; font-size: 9px; font-weight: 730; }
.portal-studio-open { display: flex; justify-content: space-between; align-items: center; color: #d6e5ea; font-size: 10px; font-weight: 790; }
.portal-studio-open b { color: var(--portal-accent); font-size: 15px; }
.portal-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.portal-module-card { display: grid; gap: 12px; min-height: 154px; padding: 17px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: rgba(17, 25, 34, .74); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.portal-module-card:hover { border-color: var(--portal-border-strong); background: rgba(22, 34, 43, .92); transform: translateY(-2px); }
.portal-module-card-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.portal-module-card-signals { display: inline-flex; min-width: 0; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.portal-engine-label { display: inline-flex; min-height: 23px; align-items: center; padding: 3px 8px; border: 1px solid var(--portal-border); border-radius: 999px; background: rgba(255, 255, 255, .025); color: var(--portal-muted); font-size: 9px; font-weight: 780; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; }
.portal-engine-label[data-engine-mode="web_native"] { border-color: rgba(99, 225, 208, .38); background: rgba(99, 225, 208, .08); color: var(--portal-accent); }
.portal-engine-label[data-engine-mode="bot_companion"] { border-color: rgba(98, 155, 255, .38); background: rgba(98, 155, 255, .08); color: #9ec5ff; }
.portal-engine-label[data-engine-mode="guarded"] { border-color: rgba(225, 165, 76, .35); background: rgba(225, 165, 76, .08); color: #e8bf7e; }
.portal-readiness-label { display: inline-flex; min-height: 23px; align-items: center; padding: 3px 8px; border: 1px solid var(--portal-border); border-radius: 999px; background: rgba(255, 255, 255, .025); color: var(--portal-muted); font-size: 9px; font-weight: 780; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; }
.portal-readiness-label[data-readiness="available"] { border-color: rgba(99, 225, 208, .38); background: rgba(99, 225, 208, .08); color: var(--portal-accent); }
.portal-readiness-label[data-readiness="planning_only"] { border-color: rgba(98, 155, 255, .38); background: rgba(98, 155, 255, .08); color: #9ec5ff; }
.portal-readiness-label[data-readiness="local_execution"] { border-color: rgba(99, 218, 139, .38); background: rgba(99, 218, 139, .08); color: #a6f1bd; }
.portal-readiness-label[data-readiness="canonical_read"] { border-color: rgba(126, 186, 255, .42); background: rgba(126, 186, 255, .08); color: #b5d5ff; }
.portal-readiness-label[data-readiness="guarded"] { border-color: rgba(225, 165, 76, .35); background: rgba(225, 165, 76, .08); color: #e8bf7e; }
.portal-readiness-label[data-readiness="disabled"] { border-color: rgba(165, 182, 192, .28); background: rgba(165, 182, 192, .06); color: #b7c9d2; }
.portal-module-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: rgba(99, 225, 208, .1); color: var(--portal-accent); font-size: 17px; }
.portal-module-card h3 { margin: 0; color: #def2f8; font-size: 13px; }
.portal-module-card p { margin: 4px 0 0; color: var(--portal-muted); font-size: 11px; line-height: 1.52; }
.portal-module-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: #a4c6d1; font-size: 10px; font-weight: 760; }
.portal-module-arrow { color: var(--portal-accent); font-size: 15px; }
.portal-flow-note { flex: 1 1 220px; color: #e5c982; font-size: 11px; line-height: 1.5; }
.portal-feature-catalog { display: grid; gap: 24px; scroll-margin-top: 20px; }
.portal-catalog-search { display: grid; gap: 7px; max-width: 620px; }
.portal-catalog-search > label { color: var(--portal-muted); font-size: 11px; font-weight: 760; }
.portal-catalog-search-control { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 9px 0 12px; border: 1px solid rgba(151, 191, 205, .22); border-radius: 12px; background: rgba(3, 20, 31, .46); }
.portal-catalog-search-control > span { color: var(--portal-accent); font-size: 18px; line-height: 1; }
.portal-catalog-search-control .portal-input { min-width: 0; flex: 1; height: 40px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.portal-catalog-search-control .portal-input:focus { box-shadow: none; }
.portal-catalog-search-control:focus-within { border-color: rgba(99, 225, 208, .62); box-shadow: 0 0 0 3px rgba(99, 225, 208, .08); }
.portal-catalog-clear { flex: 0 0 auto; border: 0; border-radius: 8px; background: rgba(125, 205, 235, .09); color: var(--portal-text); font: inherit; font-size: 10px; font-weight: 760; padding: 7px 9px; cursor: pointer; }
.portal-catalog-search-result { margin: 0; color: var(--portal-muted); font-size: 10px; }
.portal-catalog-item { display: grid; min-width: 0; }
.portal-catalog-item .portal-module-card { height: 100%; }
.portal-feature-jumps { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; }
.portal-feature-jump { display: inline-flex; align-items: center; min-height: 31px; padding: 6px 10px; border: 1px solid rgba(151, 191, 205, .17); border-radius: 999px; background: rgba(125, 205, 235, .05); color: #bdd4de; font-size: 10px; font-weight: 760; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.portal-feature-jump:hover, .portal-feature-jump:focus-visible { border-color: rgba(99, 225, 208, .46); background: rgba(99, 225, 208, .1); color: #dcfffa; }
.portal-feature-group { display: grid; gap: 12px; scroll-margin-top: 20px; }
.portal-feature-group-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 0 2px; }
.portal-feature-group-head h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.portal-feature-group-head p { margin: 4px 0 0; color: var(--portal-muted); font-size: 11px; line-height: 1.5; }
.portal-feature-count { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(151, 191, 205, .16); border-radius: 999px; color: #a9c6d1; background: rgba(125, 205, 235, .05); font-size: 10px; font-weight: 760; }
.portal-capability-hub { display: grid; gap: 17px; padding: clamp(18px, 3vw, 27px); border: 1px solid rgba(126, 193, 224, .21); border-radius: 19px; background: radial-gradient(circle at 88% 2%, rgba(87, 182, 228, .14), transparent 19rem), linear-gradient(135deg, rgba(17, 44, 62, .82), rgba(8, 24, 36, .91)); box-shadow: 0 15px 38px rgba(0, 0, 0, .13); }
.portal-capability-hub--pending { border-style: dashed; background: rgba(8, 25, 37, .58); }
.portal-capability-hub--pending h2 { margin: 0; color: #e1f5fa; font-size: 17px; letter-spacing: -.02em; }
.portal-capability-hub--pending p { max-width: 740px; margin: 7px 0 0; color: var(--portal-muted); font-size: 11px; line-height: 1.62; }
.portal-capability-hub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.portal-capability-hub-head h2 { margin: 0; color: #e9fbff; font-size: clamp(19px, 2.2vw, 25px); letter-spacing: -.035em; }
.portal-capability-hub-head p { max-width: 760px; margin: 7px 0 0; color: #a9c5cf; font-size: 11px; line-height: 1.62; }
.portal-capability-hub-badge { flex: 0 0 auto; padding: 6px 9px; border: 1px solid rgba(114, 228, 207, .25); border-radius: 999px; background: rgba(80, 218, 191, .09); color: #b8fff4; font-size: 9px; font-weight: 810; white-space: nowrap; }
.portal-capability-audit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.portal-capability-audit > div { min-width: 0; padding: 11px 10px; border: 1px solid rgba(151, 205, 224, .13); border-radius: 12px; background: rgba(4, 18, 29, .32); }
.portal-capability-audit dt { overflow-wrap: anywhere; color: #dbf8fb; font-size: 19px; font-weight: 850; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.portal-capability-audit dd { margin: 4px 0 0; color: #8eabb7; font-size: 9px; line-height: 1.4; }
.portal-capability-family-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-capability-family { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid rgba(148, 204, 222, .16); border-radius: 14px; background: rgba(3, 18, 29, .32); color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-capability-family:hover, .portal-capability-family:focus-visible { border-color: rgba(99, 225, 208, .48); background: rgba(69, 177, 177, .1); outline: 0; transform: translateY(-1px); }
.portal-capability-family-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #def4f8; font-size: 12px; font-weight: 800; }
.portal-capability-family-top b { color: var(--portal-accent); font-size: 15px; }
.portal-capability-family > p { min-height: 32px; margin: 0; color: #96b1bc; font-size: 10px; line-height: 1.55; }
.portal-capability-family-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; }
.portal-capability-family-metrics > div { min-width: 0; padding: 7px 5px; border-radius: 8px; background: rgba(137, 201, 222, .055); text-align: center; }
.portal-capability-family-metrics dt { overflow-wrap: anywhere; color: #cbeaf0; font-size: 12px; font-weight: 820; font-variant-numeric: tabular-nums; }
.portal-capability-family-metrics dd { margin: 3px 0 0; color: #809eaa; font-size: 8px; line-height: 1.25; }
.portal-capability-family-link { color: #a8e4dd; font-size: 9px; font-weight: 790; }
.portal-capability-hub-note { margin: -1px 0 0; color: #91adb8; font-size: 9px; line-height: 1.55; }
.portal-capability-family-summary { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(151, 191, 205, .14); }
.portal-capability-family-summary > span { color: #8fe1d6; font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.portal-capability-family-summary > p { margin: 0; color: #8fa9b3; font-size: 9px; line-height: 1.52; }
.portal-admin-directory { display: grid; gap: 18px; }
.portal-admin-directory-groups { display: grid; gap: 21px; }
.portal-admin-directory-group { display: grid; gap: 12px; }
.portal-admin-directory-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 0 2px; }
.portal-admin-directory-head h3 { margin: 0; font-size: 15px; letter-spacing: -.012em; }
.portal-admin-directory-head p { margin: 4px 0 0; color: var(--portal-muted); font-size: 11px; line-height: 1.5; }
.portal-admin-domain { display: grid; gap: 18px; }
.portal-admin-domain-intro { border-color: rgba(99, 225, 208, .26); background: linear-gradient(135deg, rgba(14, 55, 65, .68), rgba(13, 27, 39, .9)); }
.portal-admin-domain-intro .portal-state { align-items: flex-start; }
.portal-admin-domain-intro .portal-state > .portal-badge { margin-left: auto; }
.portal-admin-domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portal-admin-domain-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 11px; min-height: 112px; padding: 15px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: rgba(13, 28, 39, .72); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.portal-admin-domain-card:hover { border-color: var(--portal-border-strong); background: rgba(21, 42, 55, .9); transform: translateY(-2px); }
.portal-admin-domain-card h3 { margin: 1px 0 4px; color: #def2f8; font-size: 13px; }
.portal-admin-domain-card p { margin: 0; color: var(--portal-muted); font-size: 11px; line-height: 1.52; }
.portal-admin-domain-card .portal-module-arrow { align-self: center; }
.portal-admin-domain-boundaries ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-admin-domain-boundaries li { position: relative; padding-left: 18px; color: var(--portal-muted-strong); font-size: 11px; line-height: 1.56; }
.portal-admin-domain-boundaries li::before { position: absolute; left: 0; content: "•"; color: var(--portal-accent); }

.portal-data-table-wrap { overflow-x: auto; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: rgba(3, 20, 31, .34); }
.portal-data-table { width: 100%; min-width: 610px; border-collapse: collapse; text-align: left; }
.portal-data-table th, .portal-data-table td { padding: 12px 14px; border-bottom: 1px solid rgba(154, 207, 231, .09); font-size: 11px; }
.portal-data-table th { color: #8aa9b9; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.portal-data-table td { color: var(--portal-muted-strong); }
.portal-data-table tr:last-child td { border-bottom: 0; }
.portal-data-table .portal-empty-cell { padding: 33px 14px; color: var(--portal-muted); text-align: center; }
.portal-muted-cell { color: var(--portal-muted); }
.portal-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.portal-filter-bar { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 14px; scrollbar-width: thin; }
.portal-filter-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 32px; padding: 6px 10px; border: 1px solid var(--portal-border); border-radius: 999px; background: rgba(3, 20, 31, .34); color: var(--portal-muted-strong); font: inherit; font-size: 10px; font-weight: 760; cursor: pointer; }
.portal-filter-button:hover, .portal-filter-button.is-active { border-color: rgba(99, 225, 208, .42); background: rgba(99, 225, 208, .1); color: #d6fffa; }
.portal-filter-button span { display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 50%; background: rgba(154, 207, 231, .12); color: #c5e5ee; font-size: 9px; }
.portal-delivery-state { display: inline-flex; align-items: center; min-height: 22px; padding: 4px 7px; border: 1px solid rgba(154, 207, 231, .16); border-radius: 999px; color: #a9c4cf; font-size: 10px; font-weight: 700; white-space: nowrap; }
.portal-delivery-state[data-delivery="reported"] { border-color: rgba(99, 225, 208, .25); color: #a7e8df; }
.portal-delivery-state[data-delivery="pending"] { border-color: rgba(255, 211, 122, .22); color: #efcf83; }
.portal-delivery-state[data-delivery="validated"] { border-color: rgba(99, 225, 208, .4); background: rgba(99, 225, 208, .08); color: #b9fff4; }
.portal-delivery-link { text-decoration: none; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.portal-delivery-link:hover { border-color: rgba(145, 243, 229, .78); background: rgba(99, 225, 208, .16); color: #fff; }
.portal-delivery-link:focus-visible { outline: 2px solid #8ef6e7; outline-offset: 2px; }
.portal-delivery-state[data-delivery="unavailable"] { border-color: rgba(226, 126, 126, .22); color: #e5a2a2; }
.portal-job-cost { display: grid; gap: 3px; min-width: 118px; }
.portal-job-cost strong { color: #d6edf4; font-size: 10px; font-weight: 760; white-space: nowrap; }
.portal-job-cost small { color: var(--portal-muted); font-size: 9px; line-height: 1.35; }
.portal-ticket-preview { display: inline-block; max-width: 260px; color: var(--portal-muted); font-size: 10px; line-height: 1.45; white-space: normal; }
.portal-ticket-status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.portal-ticket-status small { color: var(--portal-muted); font-size: 9px; line-height: 1.35; white-space: normal; }
.portal-payment-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portal-payment-entry { display: grid; gap: 10px; min-height: 178px; padding: 14px; border: 1px solid var(--portal-border); border-radius: 13px; background: rgba(3, 20, 31, .32); }
.portal-payment-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.portal-payment-entry .portal-module-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.portal-payment-entry h3 { margin: 0; color: #def2f8; font-size: 13px; }
.portal-payment-entry p { margin: -3px 0 0; color: var(--portal-muted); font-size: 10px; line-height: 1.55; }
.portal-payment-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.portal-payment-entry-note { color: #8eafbc; font-size: 9px; line-height: 1.4; }
.portal-manual-topup-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 0 0 15px; }
.portal-manual-topup-route { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; min-height: 137px; padding: 13px; border: 1px solid rgba(151, 191, 205, .17); border-radius: 13px; background: rgba(3, 20, 31, .31); }
.portal-manual-topup-route .portal-module-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.portal-manual-topup-route h3 { margin: 1px 0 4px; color: #ddf1f6; font-size: 12px; }
.portal-manual-topup-route p { margin: 0; color: var(--portal-muted); font-size: 10px; line-height: 1.52; }
.portal-manual-topup-route > span:last-child { grid-column: 1 / -1; margin-top: auto; color: #9ab9c4; font-size: 9px; font-weight: 760; }
.portal-manual-topup-route.is-guarded { border-color: rgba(255, 211, 122, .19); background: rgba(83, 61, 22, .16); }
.portal-manual-topup-route.is-guarded .portal-module-icon { color: #f0cf82; background: rgba(255, 211, 122, .1); }
.portal-manual-topup-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.portal-manual-topup-status > span { display: grid; gap: 5px; min-width: 0; padding: 9px; border: 1px solid rgba(154, 207, 231, .12); border-radius: 10px; background: rgba(3, 20, 31, .25); }
.portal-manual-topup-status code { overflow-wrap: anywhere; color: #ade8df; font-size: 9px; font-weight: 800; }
.portal-manual-topup-status small { color: var(--portal-muted); font-size: 9px; line-height: 1.42; }
.portal-link-code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 5px 7px; border: 1px solid rgba(99, 225, 208, .2); border-radius: 7px; background: rgba(2, 18, 28, .54); color: #baf5ed; font-size: 11px; font-weight: 800; text-align: right; }

.portal-campaign-planner { display: grid; gap: 18px; }
.portal-campaign-boundary { border-color: rgba(111, 183, 255, .22); background: linear-gradient(135deg, rgba(13, 49, 71, .64), rgba(13, 31, 43, .86)); }
.portal-campaign-boundary .portal-state-icon { color: #a9cbff; }
.portal-campaign-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.portal-campaign-metrics .portal-metric { min-height: 132px; }
.portal-campaign-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-campaign-timeline-item { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid rgba(151, 191, 205, .17); border-radius: 12px; background: rgba(3, 20, 31, .35); color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-campaign-timeline-item:hover, .portal-campaign-timeline-item:focus-visible { border-color: rgba(99, 225, 208, .46); background: rgba(99, 225, 208, .08); transform: translateY(-1px); }
.portal-campaign-timeline-item span { color: var(--portal-accent); font-size: 10px; font-weight: 780; line-height: 1.4; }
.portal-campaign-timeline-item strong { overflow-wrap: anywhere; color: #e2f4f8; font-size: 12px; line-height: 1.42; }
.portal-campaign-timeline-item em { color: var(--portal-muted); font-size: 10px; font-style: normal; }
.portal-campaign-timeline-empty { padding: 18px; border: 1px dashed rgba(154, 207, 231, .2); border-radius: 12px; color: var(--portal-muted); font-size: 11px; line-height: 1.55; }
.portal-campaign-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-campaign-board > .portal-empty { grid-column: 1 / -1; }
.portal-campaign-card { display: grid; align-content: start; gap: 15px; min-width: 0; padding: 18px; border: 1px solid var(--portal-border); border-radius: 16px; background: linear-gradient(145deg, rgba(13, 39, 55, .84), rgba(8, 24, 36, .9)); box-shadow: var(--portal-shadow); scroll-margin-top: 20px; }
.portal-campaign-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.portal-campaign-card h3 { max-width: 390px; margin: 5px 0 0; overflow-wrap: anywhere; color: #e9faff; font-size: 16px; line-height: 1.32; letter-spacing: -.015em; }
.portal-campaign-facts { display: grid; gap: 10px; margin: 0; }
.portal-campaign-facts > div { display: grid; gap: 3px; padding-bottom: 9px; border-bottom: 1px solid rgba(155, 178, 193, .1); }
.portal-campaign-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.portal-campaign-facts dt { color: var(--portal-muted); font-size: 10px; font-weight: 720; }
.portal-campaign-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--portal-muted-strong); font-size: 11px; font-weight: 680; }
.portal-campaign-destination { color: #8de4d8; text-decoration: none; }
.portal-campaign-destination:hover, .portal-campaign-destination:focus-visible { color: #d5fffa; text-decoration: underline; }
.portal-campaign-edit { border-top: 1px solid rgba(154, 207, 231, .12); border-bottom: 1px solid rgba(154, 207, 231, .12); }
.portal-campaign-edit > summary { padding: 11px 0; color: #b8d6df; font-size: 11px; font-weight: 780; cursor: pointer; list-style: none; }
.portal-campaign-edit > summary::-webkit-details-marker { display: none; }
.portal-campaign-edit > summary::after { float: right; color: var(--portal-accent); content: "+"; font-size: 16px; line-height: .7; }
.portal-campaign-edit[open] > summary::after { content: "−"; }
.portal-campaign-edit .portal-form { padding: 1px 0 14px; }
.portal-campaign-review { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(154, 207, 231, .12); }
.portal-campaign-review .portal-field { gap: 6px; }
.portal-campaign-review .portal-textarea { min-height: 76px; resize: vertical; }
.portal-campaign-review .portal-form-footer { gap: 8px; }
.portal-campaign-calendar, .portal-campaign-approvals { display: grid; gap: 18px; }
.portal-calendar { display: grid; gap: 8px; min-width: 0; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.portal-calendar-weekdays, .portal-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 650px; gap: 7px; }
.portal-calendar-weekdays span { padding: 4px 5px; color: #8daebd; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.portal-calendar-cell { display: grid; align-content: start; gap: 7px; min-height: 119px; padding: 9px; border: 1px solid rgba(151, 191, 205, .14); border-radius: 11px; background: rgba(3, 20, 31, .31); }
.portal-calendar-cell.is-empty { min-height: 0; padding: 0; border: 0; background: transparent; }
.portal-calendar-cell.is-today { border-color: rgba(99, 225, 208, .54); background: rgba(99, 225, 208, .07); }
.portal-calendar-day { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #c6e2ea; font-size: 10px; font-weight: 800; }
.portal-calendar-cell.is-today .portal-calendar-day { background: var(--portal-accent); color: #05252e; }
.portal-calendar-events { display: grid; gap: 5px; min-width: 0; }
.portal-calendar-event { display: grid; gap: 2px; min-width: 0; padding: 5px 6px; border: 1px solid rgba(131, 197, 255, .18); border-radius: 7px; background: rgba(73, 129, 168, .1); color: #c7e8f8; text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.portal-calendar-event:hover, .portal-calendar-event:focus-visible { border-color: rgba(99, 225, 208, .52); background: rgba(99, 225, 208, .13); color: #e0fffb; }
.portal-calendar-event[data-status="review"] { border-color: rgba(235, 183, 92, .3); background: rgba(235, 183, 92, .08); color: #f2d68f; }
.portal-calendar-event[data-status="approved"], .portal-calendar-event[data-status="scheduled"] { border-color: rgba(104, 215, 179, .3); background: rgba(104, 215, 179, .08); color: #baf2de; }
.portal-calendar-event[data-status="archived"] { opacity: .62; }
.portal-calendar-event time { color: currentColor; font-size: 9px; font-weight: 800; }
.portal-calendar-event strong { overflow: hidden; color: currentColor; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.portal-calendar-overflow { color: var(--portal-muted); font-size: 9px; font-weight: 720; }
.portal-calendar-filter { display: grid; gap: 12px; }
.portal-calendar-filter .portal-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-calendar-filter .portal-form-footer { align-items: flex-end; }
.portal-calendar-filter .portal-form-note { max-width: 570px; }
.portal-calendar-agenda { display: grid; gap: 8px; }
.portal-calendar-agenda-item { display: grid; grid-template-columns: minmax(122px, .62fr) minmax(0, 1fr) auto; gap: 13px; align-items: center; min-width: 0; padding: 12px 13px; border: 1px solid rgba(151, 191, 205, .16); border-radius: 12px; background: rgba(3, 20, 31, .3); color: inherit; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-calendar-agenda-item:hover, .portal-calendar-agenda-item:focus-visible { border-color: rgba(99, 225, 208, .48); background: rgba(99, 225, 208, .08); transform: translateY(-1px); }
.portal-calendar-agenda-item time { color: #9dc7d3; font-size: 10px; font-weight: 760; line-height: 1.42; }
.portal-calendar-agenda-item span { display: grid; gap: 3px; min-width: 0; }
.portal-calendar-agenda-item strong { overflow: hidden; color: #e0f5f7; font-size: 12px; line-height: 1.42; text-overflow: ellipsis; white-space: nowrap; }
.portal-calendar-agenda-item em { overflow: hidden; color: var(--portal-muted); font-size: 10px; font-style: normal; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-calendar-agenda-item b { color: var(--portal-accent); font-size: 14px; }
.portal-badge[data-status="review"] { color: #e9c481; background: rgba(235, 183, 92, .08); }
.portal-badge[data-status="approved"], .portal-badge[data-status="scheduled"] { color: #9de2ca; background: rgba(104, 215, 179, .08); }
.portal-badge[data-status="archived"] { color: #b7bdd2; background: rgba(173, 184, 213, .08); }
.portal-badge[data-status="new"], .portal-badge[data-status="reviewing"] { color: #a8c9ff; background: rgba(116, 169, 255, .1); }
.portal-badge[data-status="waiting_user"] { color: #ffd38f; background: rgba(255, 181, 73, .1); }
.portal-badge[data-status="waiting_provider"], .portal-badge[data-status="refund_pending"] { color: #d2b5ff; background: rgba(172, 119, 255, .1); }
.portal-badge[data-status="resolved"], .portal-badge[data-status="closed"] { color: #95e6be; background: rgba(90, 220, 156, .1); }

.portal-notice { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid rgba(255, 211, 122, .18); border-radius: 12px; background: rgba(99, 69, 14, .14); color: #f6db9c; }
.portal-notice strong { display: block; margin-bottom: 3px; font-size: 11px; }
.portal-notice p { margin: 0; color: #e0c98e; font-size: 10px; line-height: 1.5; }
.portal-notice--info { border-color: rgba(131, 197, 255, .18); background: rgba(30, 85, 124, .14); color: #b6dcff; }
.portal-notice--info p { color: #a6cae7; }
.portal-notice-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; color: currentColor; font-size: 15px; }
.portal-notice-icon .portal-icon { width: 17px; height: 17px; }

.portal-empty { display: grid; justify-items: center; gap: 8px; padding: 31px 20px; border: 1px dashed rgba(154, 207, 231, .2); border-radius: var(--portal-radius); background: rgba(3, 20, 31, .27); text-align: center; }
.portal-empty-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: rgba(99, 225, 208, .1); color: var(--portal-accent); font-size: 18px; }
.portal-empty h3 { margin: 0; font-size: 13px; }
.portal-empty p { max-width: 440px; margin: 0; color: var(--portal-muted); font-size: 11px; line-height: 1.55; }

.portal-auth-page { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); min-height: calc(100vh - clamp(68px, 7.2vw, 112px)); gap: clamp(24px, 5vw, 78px); align-items: start; align-content: start; padding-top: 68px; }
.portal-auth-brand { position: absolute; top: 0; left: 0; display: inline-flex; gap: 10px; align-items: center; color: var(--portal-text); }
.portal-auth-brand .portal-brand-mark { width: 36px; height: 36px; margin: 0; border-radius: 12px; font-size: 13px; }
.portal-auth-brand strong { display: block; font-size: 13px; font-weight: 880; letter-spacing: .02em; }
.portal-auth-brand small { display: block; margin-top: 2px; color: var(--portal-muted); font-size: 10px; font-weight: 650; letter-spacing: .025em; }
.portal-auth-brand em { margin-left: 8px; color: #a9c1cb; font-size: 11px; font-style: normal; font-weight: 720; transition: color .16s ease; }
.portal-auth-brand:hover em { color: #e3fbf8; }
.portal-auth-intro { padding: clamp(8px, 2vw, 24px); }
.portal-auth-intro .portal-title { max-width: 590px; font-size: clamp(36px, 4.5vw, 58px); }
.portal-auth-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin-top: 25px; }
.portal-auth-fact { padding: 13px; border: 1px solid var(--portal-border); border-radius: 12px; background: rgba(13, 36, 53, .48); }
.portal-auth-fact strong { display: block; color: var(--portal-accent); font-size: 13px; }
.portal-auth-fact span { display: block; margin-top: 4px; color: var(--portal-muted); font-size: 10px; line-height: 1.45; }
.portal-auth-card { max-width: 480px; width: 100%; justify-self: end; }
.portal-auth-notes { display: grid; gap: 10px; margin: 14px 0; }
.portal-auth-provider { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--portal-border); }
.portal-oauth-method { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(155, 178, 193, .1); }
.portal-oauth-method:last-child { padding-bottom: 0; border-bottom: 0; }
.portal-oauth-method > div { display: grid; gap: 3px; min-width: 0; }
.portal-oauth-method strong { color: var(--portal-text); font-size: 11px; }
.portal-oauth-method span, .portal-oauth-method .portal-form-note { color: var(--portal-muted); font-size: 10px; line-height: 1.45; }
.portal-oauth-method .portal-button { flex: 0 0 auto; }

.portal-admin-guard { border-color: rgba(255, 211, 122, .28); background: linear-gradient(145deg, rgba(53, 45, 25, .58), rgba(17, 32, 41, .86)); }
.portal-admin-guard .portal-state-icon { color: var(--portal-warning); }
.portal-admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.portal-metric { min-height: 118px; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: linear-gradient(145deg, rgba(15, 45, 63, .8), rgba(7, 27, 40, .8)); }
.portal-metric span { display: block; color: var(--portal-muted); font-size: 10px; font-weight: 760; }
.portal-metric strong { display: block; margin-top: 15px; color: #e7faff; font-size: 22px; letter-spacing: -.04em; }
.portal-metric em { display: block; margin-top: 5px; color: #7f9fad; font-size: 10px; font-style: normal; }
.portal-admin-audit-explorer { display: grid; gap: 18px; }
.portal-admin-audit-explorer .portal-admin-grid .portal-metric { min-height: 112px; border-color: rgba(133, 197, 221, .18); background: linear-gradient(145deg, rgba(15, 44, 62, .86), rgba(7, 24, 38, .91)); }
.portal-table-note { display: block; margin-top: 5px; color: #8eabb6; font-size: 10px; line-height: 1.35; }
.portal-admin-audit-boundaries { display: grid; gap: 8px; margin: 16px 0 0; padding: 14px 16px 14px 34px; border: 1px solid rgba(114, 181, 204, .16); border-radius: 14px; background: rgba(4, 24, 36, .42); color: #a9c4cc; font-size: 12px; line-height: 1.55; }

.portal-toast-region { position: fixed; z-index: 1200; right: calc(18px + var(--portal-safe-right)); bottom: calc(18px + var(--portal-safe-bottom)); display: grid; width: min(340px, calc(100vw - 36px - var(--portal-safe-left) - var(--portal-safe-right))); gap: 9px; pointer-events: none; }
.portal-toast { padding: 12px 13px; border: 1px solid rgba(131, 197, 255, .25); border-radius: 12px; background: rgba(7, 27, 40, .96); box-shadow: 0 12px 30px rgba(0, 0, 0, .28); color: #d7edf6; font-size: 11px; line-height: 1.5; animation: portal-toast-in .18s ease-out; }
.portal-toast--warning { border-color: rgba(255, 211, 122, .3); color: #f5daa2; }
@keyframes portal-toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

:focus-visible { outline: 3px solid rgba(99, 225, 208, .65); outline-offset: 3px; }

@media (max-width: 1200px) {
  .portal-studio-launchpad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-action-center-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-start-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-campaign-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-manual-topup-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-manual-topup-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-suggestion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-finalization-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-bot-companion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-landing-hero { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 42px; }
  .portal-landing-trust { gap: 42px; }
}
.portal-project-intro, .portal-project-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
  gap: 24px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid rgba(80, 220, 202, .18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 15%, rgba(59, 184, 181, .16), transparent 42%),
    linear-gradient(135deg, rgba(12, 46, 57, .94), rgba(10, 20, 31, .96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
}
.portal-project-intro h2, .portal-project-summary h2 { margin: 8px 0 9px; color: #effbff; font-size: clamp(26px, 3vw, 37px); letter-spacing: -.045em; }
.portal-project-intro p, .portal-project-summary p { max-width: 760px; margin: 0; color: #a4bec9; line-height: 1.75; }
.portal-project-intro dl, .portal-project-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-project-intro dl > div, .portal-project-summary dl > div { min-height: 112px; padding: 16px; border: 1px solid rgba(177, 230, 233, .12); border-radius: 16px; background: rgba(4, 16, 27, .42); }
.portal-project-intro dt { color: #6fe6d7; font-size: 29px; font-weight: 840; letter-spacing: -.04em; }
.portal-project-intro dd, .portal-project-summary dt { margin: 6px 0 0; color: #9ab3be; font-size: 12px; line-height: 1.45; }
.portal-project-summary dd { margin: 8px 0 0; color: #edfaff; font-weight: 720; line-height: 1.45; }
.portal-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.portal-project-card { min-height: 300px; background: linear-gradient(160deg, rgba(17, 37, 52, .97), rgba(9, 20, 31, .98)); }
.portal-project-card .portal-form-footer { margin-top: auto; }
.portal-project-filter { display: grid; gap: 11px; margin: 15px 0 4px; padding: 13px; border: 1px solid rgba(104, 210, 205, .16); border-radius: 14px; background: rgba(5, 27, 39, .42); }
.portal-project-filter .portal-fields { grid-template-columns: minmax(190px, 1.5fr) minmax(155px, .72fr); }
.portal-project-filter .portal-form-footer { margin-top: 0; }
.portal-project-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(139, 201, 221, .13); color: #a7c6ca; font-size: 10px; font-weight: 700; }
.portal-project-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-project-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-workspace-draft-filter { display: grid; gap: 11px; margin: 15px 0 4px; padding: 13px; border: 1px solid rgba(104, 210, 205, .16); border-radius: 14px; background: rgba(5, 27, 39, .42); }
.portal-workspace-draft-filter .portal-fields { grid-template-columns: minmax(190px, 1.4fr) minmax(150px, .75fr) minmax(160px, .85fr); }
.portal-workspace-draft-filter .portal-form-footer { margin-top: 0; }
.portal-workspace-draft-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(139, 201, 221, .13); color: #a7c6ca; font-size: 10px; font-weight: 700; }
.portal-workspace-draft-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-workspace-draft-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-project-steps { display: grid; gap: 13px; padding: 0; margin: 6px 0 0; list-style: none; }
.portal-project-steps li { display: grid; gap: 3px; padding: 13px 0 0 18px; border-top: 1px solid rgba(185, 221, 230, .11); position: relative; }
.portal-project-steps li::before { content: ""; position: absolute; left: 0; top: 18px; width: 7px; height: 7px; border-radius: 999px; background: var(--portal-accent); box-shadow: 0 0 0 4px rgba(79, 226, 204, .12); }
.portal-project-steps strong { color: #ecfbff; font-size: 13px; }
.portal-project-steps span { color: #8fa9b5; font-size: 12px; line-height: 1.55; }
.portal-project-detail-grid { display: grid; grid-template-columns: minmax(320px, .82fr) minmax(380px, 1.18fr); gap: 18px; align-items: start; }
.portal-project-document-list { display: grid; gap: 9px; margin-top: 15px; }
.portal-project-document { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 11px; align-items: center; width: 100%; padding: 13px; border: 1px solid rgba(157, 209, 220, .13); border-radius: 15px; background: rgba(7, 20, 31, .72); color: inherit; text-align: left; transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-project-document:hover { border-color: rgba(94, 225, 205, .38); background: rgba(20, 62, 73, .54); transform: translateY(-1px); }
.portal-project-document:focus-visible { outline: 2px solid var(--portal-info); outline-offset: 2px; }
.portal-project-document-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: rgba(79, 226, 204, .13); color: var(--portal-accent); font-size: 17px; }
.portal-project-document strong, .portal-project-document small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-project-document strong { color: #ecfbff; font-size: 13px; }
.portal-project-document small { margin-top: 3px; color: #88a5b1; font-size: 11px; }
.portal-project-new-document { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(179, 222, 231, .12); }
.portal-project-editor { min-height: 520px; }
.portal-project-history { margin-top: 22px; padding-top: 19px; border-top: 1px solid rgba(179, 222, 231, .12); }

/* Immutable Project Packages are a Web-native export pipeline. They use a
   separate card system so they cannot be mistaken for Bot jobs, Bot assets,
   billing packages or generic landing-page panels. */
.portal-project-package-panel { margin-top: 18px; min-width: 0; }
.portal-project-package-actions { display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-top: 19px; padding: 15px; border: 1px solid rgba(116, 206, 232, .14); border-radius: 15px; background: linear-gradient(105deg, rgba(32, 83, 107, .3), rgba(5, 21, 32, .5)); }
.portal-project-package-actions > div:first-child { display: grid; gap: 4px; min-width: 0; }
.portal-project-package-actions strong { color: #e8fbff; font-size: 13px; letter-spacing: -.01em; }
.portal-project-package-actions span { color: #8eabb7; font-size: 12px; line-height: 1.5; }
.portal-project-package-list { margin-top: 15px; }
.portal-project-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-project-package-card { min-width: 0; background: linear-gradient(148deg, rgba(15, 42, 58, .97), rgba(5, 18, 29, .99)); }
.portal-project-package-title { display: flex; gap: 11px; min-width: 0; align-items: center; }
.portal-project-package-title > div { min-width: 0; }
.portal-project-package-title .portal-card-title, .portal-project-package-title .portal-card-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-project-package-icon { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(94, 212, 231, .34); border-radius: 12px; background: rgba(83, 185, 218, .13); color: #93efff; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.portal-project-package-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 17px 0 0; }
.portal-project-package-meta > div { min-width: 0; padding: 10px; border: 1px solid rgba(166, 219, 231, .1); border-radius: 11px; background: rgba(1, 13, 23, .32); }
.portal-project-package-meta dt { color: #86a6b2; font-size: 9px; font-weight: 760; }
.portal-project-package-meta dd { margin: 5px 0 0; overflow: hidden; color: #e7faff; font-size: 11px; font-weight: 690; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-project-packages { min-width: 0; }
.portal-project-package-intro { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(240px, .82fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(105, 212, 233, .18); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(75, 185, 219, .16), transparent 17rem), linear-gradient(145deg, rgba(10, 37, 52, .92), rgba(6, 19, 31, .98)); }
.portal-project-package-intro h2 { margin: 7px 0 8px; color: #effbff; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.045em; }
.portal-project-package-intro p { max-width: 720px; margin: 0; color: #a8c3cc; line-height: 1.7; }
.portal-project-package-intro dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-project-package-intro dl > div { min-height: 108px; padding: 15px; border: 1px solid rgba(174, 229, 230, .12); border-radius: 15px; background: rgba(2, 17, 27, .36); }
.portal-project-package-intro dt { color: #8eeeff; font-size: 26px; font-weight: 840; letter-spacing: -.045em; }
.portal-project-package-intro dd { margin: 7px 0 0; color: #a3bcc6; font-size: 12px; line-height: 1.45; }

/* Document Operations is a third Web-native file surface: its source stays
   in Asset Vault and its verified PDF attachment lives in a separate output
   root. Keep the visual system distinct from Bot job/asset delivery cards. */
.portal-pdf-split, .portal-image-ocr { min-width: 0; }
.portal-document-operation-intro { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(240px, .82fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(143, 168, 255, .2); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(110, 130, 241, .18), transparent 17rem), linear-gradient(145deg, rgba(17, 28, 64, .95), rgba(7, 18, 35, .99)); }
.portal-document-operation-intro h2 { margin: 7px 0 8px; color: #f0f4ff; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.045em; }
.portal-document-operation-intro p { max-width: 720px; margin: 0; color: #b4c1dc; line-height: 1.7; }
.portal-document-operation-intro dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-document-operation-intro dl > div { min-height: 108px; padding: 15px; border: 1px solid rgba(180, 194, 255, .14); border-radius: 15px; background: rgba(3, 10, 30, .34); }
.portal-document-operation-intro dt { color: #b9c8ff; font-size: 20px; font-weight: 840; letter-spacing: -.035em; }
.portal-document-operation-intro dd { margin: 7px 0 0; color: #a5b4cf; font-size: 12px; line-height: 1.45; }
.portal-document-operation-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(270px, .82fr); gap: 18px; align-items: start; }
.portal-document-operation-form { min-width: 0; }
.portal-document-operation-boundary { min-width: 0; background: linear-gradient(148deg, rgba(18, 31, 62, .9), rgba(7, 17, 34, .99)); }
.portal-document-operation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-document-operation-card { min-width: 0; background: linear-gradient(148deg, rgba(20, 33, 70, .96), rgba(6, 17, 36, .99)); }
.portal-document-operation-title { display: flex; gap: 11px; min-width: 0; align-items: center; }
.portal-document-operation-title > div { min-width: 0; }
.portal-document-operation-title .portal-card-title, .portal-document-operation-title .portal-card-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-document-operation-icon { display: grid; flex: 0 0 auto; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(157, 176, 255, .4); border-radius: 12px; background: rgba(116, 135, 247, .16); color: #c7d3ff; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.portal-document-operation-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 17px 0 0; }
.portal-document-operation-meta > div { min-width: 0; padding: 10px; border: 1px solid rgba(181, 196, 255, .11); border-radius: 11px; background: rgba(1, 8, 25, .3); }
.portal-document-operation-meta dt { color: #98a8c6; font-size: 9px; font-weight: 760; }
.portal-document-operation-meta dd { margin: 5px 0 0; overflow: hidden; color: #edf2ff; font-size: 11px; font-weight: 680; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-image-ocr .portal-form-footer { align-items: flex-start; }
.portal-image-ocr .portal-form-note { max-width: 58ch; }

/* Asset Vault is intentionally a distinct Web-owned file surface. Keep its
   visual language close to Project Center, but never reuse Bot delivery card
   selectors: private uploads and canonical output have different contracts. */
.portal-asset-vault { min-width: 0; }
.portal-vault-intro { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(250px, .82fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(119, 221, 210, .18); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(69, 199, 187, .14), transparent 17rem), linear-gradient(145deg, rgba(9, 38, 49, .91), rgba(7, 21, 32, .97)); }
.portal-vault-intro h2 { margin: 7px 0 8px; color: #effbff; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.045em; }
.portal-vault-intro p { max-width: 720px; margin: 0; color: #a8c3cc; line-height: 1.7; }
.portal-vault-intro dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-vault-intro dl > div { min-height: 108px; padding: 15px; border: 1px solid rgba(174, 229, 230, .12); border-radius: 15px; background: rgba(2, 17, 27, .36); }
.portal-vault-intro dt { color: #6de7d6; font-size: 26px; font-weight: 840; letter-spacing: -.045em; }
.portal-vault-intro dd { margin: 7px 0 0; color: #a3bcc6; font-size: 12px; line-height: 1.45; }
.portal-vault-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 18px; align-items: start; }
.portal-vault-upload { min-width: 0; }
.portal-vault-dropzone { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 106px; padding: 17px; border: 1px dashed rgba(100, 229, 212, .42); border-radius: 16px; background: rgba(57, 192, 176, .055); color: inherit; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-vault-dropzone:hover, .portal-vault-dropzone:focus-within { border-color: rgba(108, 239, 218, .78); background: rgba(57, 192, 176, .1); transform: translateY(-1px); }
.portal-vault-dropzone-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(96, 231, 213, .16); color: #82f8e4; font-size: 22px; font-weight: 780; }
.portal-vault-dropzone strong, .portal-vault-dropzone small { display: block; min-width: 0; }
.portal-vault-dropzone strong { color: #edffff; font-size: 13px; }
.portal-vault-dropzone small { margin-top: 4px; color: #97b4be; font-size: 11px; line-height: 1.5; }
.portal-vault-file-input { grid-column: 1 / -1; width: 100%; max-width: 100%; color: #adc6ce; font-size: 11px; }
.portal-vault-file-input::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 1px solid rgba(111, 231, 215, .38); border-radius: 8px; background: rgba(69, 202, 184, .16); color: #e2fffa; font: inherit; cursor: pointer; }
.portal-vault-filter { display: grid; gap: 11px; margin: 15px 0 4px; padding: 13px; border: 1px solid rgba(105, 207, 204, .16); border-radius: 14px; background: rgba(5, 27, 39, .42); }
.portal-vault-filter .portal-fields { grid-template-columns: minmax(190px, 1.5fr) minmax(165px, .72fr); }
.portal-vault-filter .portal-form-footer { margin-top: 0; }
.portal-vault-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(139, 201, 221, .13); color: #a7c6ca; font-size: 10px; font-weight: 700; }
.portal-vault-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-vault-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-vault-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-vault-card { min-width: 0; background: linear-gradient(150deg, rgba(14, 37, 50, .96), rgba(5, 19, 29, .98)); }
.portal-vault-card-title { display: flex; min-width: 0; gap: 11px; align-items: center; }
.portal-vault-card-title > div { min-width: 0; }
.portal-vault-file-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; overflow: hidden; border: 1px solid rgba(112, 226, 212, .32); border-radius: 11px; background: rgba(67, 205, 187, .12); color: #87f7e5; font-size: 9px; font-weight: 850; letter-spacing: .04em; }
.portal-vault-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 17px 0 0; }
.portal-vault-meta > div { min-width: 0; padding: 10px; border: 1px solid rgba(165, 217, 225, .1); border-radius: 11px; background: rgba(2, 13, 22, .28); }
.portal-vault-meta dt { color: #84a2ad; font-size: 9px; font-weight: 760; }
.portal-vault-meta dd { margin: 5px 0 0; overflow: hidden; color: #e8fafd; font-size: 11px; font-weight: 680; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-version-list { display: grid; gap: 7px; }
.portal-version-row { display: flex; gap: 13px; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid rgba(179, 222, 231, .09); }
.portal-version-row:first-child { border-top: 0; }
.portal-version-row span:first-child { min-width: 0; }
.portal-version-row strong, .portal-version-row small { display: block; }
.portal-version-row strong { color: #ecfbff; font-size: 12px; }
.portal-version-row small { margin-top: 3px; overflow: hidden; color: #8faab6; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Memory Center is a private account workspace, not a Bot command hand-off.
   Its visual system favors deliberate reading, version recovery and explicit
   reminder state over generic marketing cards or delivery-style job cards. */
.portal-memory-center, .portal-memory-reminders { min-width: 0; }
.portal-memory-intro { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(250px, .82fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(177, 129, 246, .22); border-radius: 22px; background: radial-gradient(circle at 87% 13%, rgba(169, 110, 246, .18), transparent 17rem), linear-gradient(145deg, rgba(31, 20, 59, .93), rgba(8, 19, 32, .98)); }
.portal-memory-intro h2 { margin: 7px 0 8px; color: #f3edff; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.045em; }
.portal-memory-intro p { max-width: 720px; margin: 0; color: #c0b5d8; line-height: 1.72; }
.portal-memory-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-memory-intro dl > div { min-height: 108px; padding: 15px; border: 1px solid rgba(215, 190, 255, .13); border-radius: 15px; background: rgba(10, 7, 25, .35); }
.portal-memory-intro dt { color: #d6bcff; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-memory-intro dd { margin: 7px 0 0; color: #b6a9cf; font-size: 11px; line-height: 1.45; }
.portal-memory-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(250px, .87fr); gap: 18px; align-items: start; }
.portal-memory-create { min-width: 0; background: linear-gradient(152deg, rgba(26, 36, 64, .94), rgba(8, 18, 33, .98)); }
.portal-memory-boundary { min-width: 0; background: linear-gradient(155deg, rgba(47, 27, 70, .8), rgba(14, 19, 37, .96)); }
.portal-memory-content { display: grid; grid-template-columns: minmax(280px, .74fr) minmax(360px, 1.26fr); gap: 18px; align-items: start; }
.portal-memory-filter { display: grid; gap: 12px; margin: 15px 0 4px; padding: 13px; border: 1px solid rgba(186, 166, 248, .15); border-radius: 14px; background: rgba(31, 25, 54, .36); }
.portal-memory-filter .portal-fields { gap: 10px; }
.portal-memory-filter .portal-field-help { display: none; }
.portal-memory-filter .portal-form-footer { margin-top: 0; padding-top: 1px; }
.portal-memory-pagination, .portal-prompt-library-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(186, 166, 248, .15); color: #cbbde8; font-size: 10px; font-weight: 700; }
.portal-memory-pagination > div, .portal-prompt-library-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-memory-pagination .portal-button, .portal-prompt-library-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-memory-note-list { display: grid; gap: 9px; margin-top: 15px; }
.portal-memory-note { display: grid; gap: 10px; width: 100%; min-width: 0; padding: 14px; border: 1px solid rgba(177, 191, 236, .13); border-radius: 15px; background: rgba(7, 18, 33, .72); color: inherit; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-memory-note:hover { border-color: rgba(185, 137, 255, .5); background: rgba(42, 30, 69, .75); transform: translateY(-1px); }
.portal-memory-note:focus-visible { outline: 2px solid #c7a5ff; outline-offset: 2px; }
.portal-memory-note-head, .portal-memory-note-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.portal-memory-note-head > span:first-child { min-width: 0; }
.portal-memory-note strong, .portal-memory-note small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-memory-note strong { color: #f0ecff; font-size: 13px; }
.portal-memory-note small { margin-top: 4px; color: #9b93b7; font-size: 10px; }
.portal-memory-note-excerpt { display: -webkit-box; overflow: hidden; color: #b9b2cd; font-size: 11px; line-height: 1.58; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-memory-note-footer { align-items: flex-end; }
.portal-memory-note-footer > b { flex: 0 0 auto; color: #c8a7ff; font-size: 16px; }
.portal-memory-tags { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 5px; min-width: 0; }
.portal-memory-tags span, .portal-memory-priority { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px; border: 1px solid rgba(189, 166, 249, .22); border-radius: 999px; background: rgba(171, 131, 246, .1); color: #d8c3ff; font-size: 9px; font-weight: 760; line-height: 1; }
.portal-memory-priority { flex: 0 0 auto; }
.portal-memory-priority[data-priority="urgent"] { border-color: rgba(255, 139, 176, .38); background: rgba(255, 89, 140, .11); color: #ffb4cc; }
.portal-memory-priority[data-priority="important"] { border-color: rgba(255, 198, 115, .38); background: rgba(255, 175, 68, .1); color: #ffd393; }
.portal-memory-editor { min-width: 0; min-height: 490px; background: linear-gradient(153deg, rgba(26, 29, 55, .97), rgba(8, 18, 32, .99)); }
.portal-memory-linked-list { display: grid; gap: 8px; }
.portal-memory-linked { display: flex; gap: 11px; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid rgba(182, 193, 240, .12); border-radius: 12px; background: rgba(5, 13, 26, .35); color: inherit; text-decoration: none; }
.portal-memory-linked:hover { border-color: rgba(178, 143, 248, .42); background: rgba(47, 32, 77, .46); }
.portal-memory-linked span:first-child { min-width: 0; }
.portal-memory-linked strong, .portal-memory-linked small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-memory-linked strong { color: #e9e8ff; font-size: 12px; }
.portal-memory-linked small { margin-top: 4px; color: #999bb6; font-size: 10px; }
.portal-memory-reminder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 15px; }
.portal-memory-reminder-card { min-width: 0; background: linear-gradient(150deg, rgba(28, 35, 69, .96), rgba(7, 17, 33, .99)); }
.portal-memory-reminder-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 17px 0 0; }
.portal-memory-reminder-meta > div { min-width: 0; padding: 10px; border: 1px solid rgba(180, 197, 241, .11); border-radius: 11px; background: rgba(4, 12, 29, .35); }
.portal-memory-reminder-meta dt { color: #989fbd; font-size: 9px; font-weight: 760; }
.portal-memory-reminder-meta dd { margin: 5px 0 0; overflow: hidden; color: #e7edff; font-size: 11px; font-weight: 680; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-memory-overdue { margin: 13px 0 0; padding: 9px 10px; border: 1px solid rgba(255, 195, 96, .24); border-radius: 10px; background: rgba(255, 173, 48, .08); color: #ffd497; font-size: 10px; line-height: 1.5; }
.portal-memory-reminder-edit { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(180, 195, 239, .1); }
.portal-memory-reminder-edit > summary { color: #c7a5ff; font-size: 11px; font-weight: 760; cursor: pointer; }
.portal-memory-reminder-edit[open] > summary { margin-bottom: 14px; }
.portal-memory-event-list { display: grid; gap: 0; }
.portal-memory-event { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-top: 1px solid rgba(181, 202, 240, .09); }
.portal-memory-event:first-child { border-top: 0; }
.portal-memory-event > span:first-child { color: #c4a2ff; font-weight: 900; }
.portal-memory-event strong, .portal-memory-event small { display: block; }
.portal-memory-event strong { color: #e8edff; font-size: 12px; }
.portal-memory-event small { margin-top: 3px; color: #98a6bc; font-size: 10px; }

/* Web Support Desk is intentionally a work surface rather than a generic
   landing/contact form.  The blue-violet cue separates accountable case work
   from media jobs, Wallet/PayOS, Bot delivery and the purple Memory Center. */
.portal-support-desk, .portal-support-cases, .portal-support-case-detail, .portal-support-admin, .portal-support-admin-case-detail { display: grid; gap: 18px; min-width: 0; }
.portal-support-intro, .portal-support-admin-intro, .portal-support-case-hero { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(250px, .82fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(127, 158, 255, .23); border-radius: 22px; background: radial-gradient(circle at 88% 11%, rgba(119, 132, 255, .18), transparent 17rem), linear-gradient(145deg, rgba(20, 29, 67, .95), rgba(7, 18, 35, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .15); }
.portal-support-admin-intro { border-color: rgba(126, 196, 255, .22); background: radial-gradient(circle at 90% 10%, rgba(69, 184, 232, .16), transparent 16rem), linear-gradient(145deg, rgba(11, 42, 62, .95), rgba(7, 18, 35, .99)); }
.portal-support-case-hero { align-items: start; padding-block: clamp(19px, 2.5vw, 28px); }
.portal-support-intro h2, .portal-support-admin-intro h2, .portal-support-case-hero h2 { margin: 7px 0 8px; color: #f0f4ff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-support-intro p, .portal-support-admin-intro p, .portal-support-case-hero p { max-width: 760px; margin: 0; color: #b4c2dc; line-height: 1.72; }
.portal-support-intro dl, .portal-support-admin-intro dl, .portal-support-case-hero dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-support-intro dl > div, .portal-support-admin-intro dl > div, .portal-support-case-hero dl > div { min-height: 103px; padding: 15px; border: 1px solid rgba(182, 201, 255, .14); border-radius: 15px; background: rgba(3, 11, 29, .38); }
.portal-support-intro dt, .portal-support-admin-intro dt, .portal-support-case-hero dt { color: #b7c8ff; font-size: 18px; font-weight: 840; letter-spacing: -.035em; }
.portal-support-intro dd, .portal-support-admin-intro dd, .portal-support-case-hero dd { margin: 7px 0 0; overflow-wrap: anywhere; color: #a6b6d2; font-size: 11px; line-height: 1.45; }
.portal-support-case-hero dd small { display: block; margin-top: 4px; color: #8fa7bc; }
.portal-support-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.portal-support-metrics .portal-metric { min-height: 128px; border-color: rgba(132, 159, 255, .16); background: linear-gradient(145deg, rgba(24, 42, 76, .88), rgba(10, 21, 42, .9)); }
.portal-support-layout, .portal-support-detail-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); gap: 18px; align-items: start; }
.portal-support-recovery { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; border-color: rgba(93, 211, 190, .28); background: rgba(10, 38, 47, .72); }
.portal-support-recovery[data-support-state="waiting_user"] { border-color: rgba(241, 194, 101, .36); background: rgba(55, 42, 17, .5); }
.portal-support-recovery[data-support-state="refund_pending"] { border-color: rgba(241, 194, 101, .34); background: rgba(54, 42, 18, .46); }
.portal-support-recovery[data-support-state="closed"] { border-color: rgba(145, 162, 183, .28); background: rgba(18, 29, 42, .72); }
.portal-support-recovery-copy { min-width: 0; }
.portal-support-recovery-copy .portal-card-title { margin: 6px 0 8px; }
.portal-support-recovery-copy p { max-width: 760px; margin: 0; color: #b9c9d5; font-size: 13px; line-height: 1.62; }
.portal-support-recovery-copy p + p { margin-top: 8px; color: #d3e2ea; }
.portal-support-recovery-copy strong { color: #eff8f8; }
.portal-support-recovery-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.portal-support-recovery-actions .portal-button { min-height: 44px; white-space: nowrap; }
#support-case-reply { scroll-margin-top: 20px; }
.portal-support-intake { background: linear-gradient(152deg, rgba(23, 34, 71, .96), rgba(8, 18, 34, .99)); }
.portal-support-boundary { background: linear-gradient(155deg, rgba(28, 30, 64, .79), rgba(11, 18, 37, .96)); }
.portal-support-advisor { display: grid; gap: 15px; border-color: rgba(125, 210, 201, .24); background: linear-gradient(145deg, rgba(10, 45, 50, .72), rgba(10, 24, 42, .94)); }
.portal-support-advisor .portal-card-header { margin-bottom: 0; }
.portal-support-advisor-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(215px, .48fr); gap: 13px; align-items: end; padding: 14px; border: 1px solid var(--portal-border); border-radius: 14px; background: rgba(3, 17, 29, .34); }
.portal-support-advisor-form .portal-field { gap: 7px; }
.portal-support-advisor-form .portal-select, .portal-support-advisor-form .portal-button, .portal-support-advisor-actions .portal-button { min-height: 44px; }
.portal-support-advisor-form-action { display: grid; gap: 9px; align-items: end; }
.portal-support-advisor-form-action .portal-form-note { min-height: 29px; margin: 0; }
.portal-support-advisor-result { display: grid; gap: 13px; min-height: 82px; padding: 15px; border: 1px dashed rgba(144, 195, 210, .26); border-radius: 14px; background: rgba(5, 18, 31, .42); }
.portal-support-advisor-result[data-state="ready"] { border-style: solid; border-color: rgba(97, 219, 198, .32); background: linear-gradient(145deg, rgba(14, 57, 59, .52), rgba(6, 23, 39, .68)); }
.portal-support-advisor-result[data-state="guarded"] { border-color: rgba(255, 211, 122, .34); background: rgba(62, 48, 19, .24); }
.portal-support-advisor-result > div { min-width: 0; }
.portal-support-advisor-result h3 { margin: 5px 0 6px; color: var(--portal-text); font-size: 16px; letter-spacing: -.018em; }
.portal-support-advisor-result p { max-width: 790px; margin: 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.62; }
.portal-support-advisor-checklist { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: support-advisor-step; }
.portal-support-advisor-checklist li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.58; counter-increment: support-advisor-step; }
.portal-support-advisor-checklist li::before { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(105, 223, 204, .37); border-radius: 999px; background: rgba(77, 204, 187, .1); color: var(--portal-accent); content: counter(support-advisor-step); font-size: 10px; font-weight: 840; }
.portal-support-advisor-handoff { padding-top: 12px; border-top: 1px solid var(--portal-border); }
.portal-support-advisor-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.portal-support-advisor-actions > span { color: var(--portal-muted); font-size: 11px; line-height: 1.45; }
.portal-support-consultation { display: grid; gap: 15px; border-color: rgba(91, 209, 191, .23); background: linear-gradient(145deg, rgba(9, 43, 49, .76), rgba(8, 22, 39, .96)); }
.portal-support-consultation .portal-card-header { margin-bottom: 0; }
.portal-support-consultation-form { display: grid; gap: 13px; padding: 14px; border: 1px solid var(--portal-border); border-radius: 14px; background: rgba(3, 17, 29, .34); }
.portal-support-consultation-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-support-consultation-form .portal-field--wide { grid-column: 1 / -1; }
.portal-support-consultation-form .portal-select, .portal-support-consultation-form .portal-input, .portal-support-consultation-form .portal-button, .portal-support-consultation-actions .portal-button { min-height: 44px; }
.portal-support-consultation-result { display: grid; gap: 13px; min-height: 82px; padding: 15px; border: 1px dashed rgba(135, 198, 210, .25); border-radius: 14px; background: rgba(5, 18, 31, .42); }
.portal-support-consultation-result[data-state="ready"] { border-style: solid; border-color: rgba(92, 221, 198, .34); background: linear-gradient(145deg, rgba(12, 55, 57, .56), rgba(6, 23, 39, .71)); }
.portal-support-consultation-result[data-state="guarded"] { border-color: rgba(255, 211, 122, .34); background: rgba(62, 48, 19, .24); }
.portal-support-consultation-result > div { min-width: 0; }
.portal-support-consultation-result h3 { margin: 5px 0 6px; color: var(--portal-text); font-size: 16px; letter-spacing: -.018em; }
.portal-support-consultation-result p { max-width: 790px; margin: 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.62; }
.portal-support-consultation-result pre { max-height: 280px; padding: 12px; margin: 0; overflow: auto; border: 1px solid rgba(127, 214, 201, .14); border-radius: 11px; background: rgba(1, 11, 20, .52); color: #ccefe9; font: 11px/1.62 var(--portal-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-support-consultation-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.portal-support-consultation-actions > span { color: var(--portal-muted); font-size: 11px; line-height: 1.45; }
.portal-support-filter { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(170px, .7fr) minmax(210px, 1.25fr); gap: 12px; align-items: end; padding: 13px; border: 1px solid rgba(141, 168, 255, .16); border-radius: 15px; background: rgba(9, 18, 40, .5); }
.portal-support-filter .portal-field { gap: 6px; }
.portal-support-filter .portal-form-footer { grid-column: 1 / -1; margin-top: 0; padding-top: 1px; }
.portal-support-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(139, 201, 221, .13); color: #a7c6ca; font-size: 10px; font-weight: 700; }
.portal-support-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-support-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-support-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.portal-support-case-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 255px; padding: 17px; border: 1px solid rgba(150, 178, 255, .16); border-radius: 17px; background: linear-gradient(152deg, rgba(17, 31, 57, .95), rgba(8, 17, 32, .98)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-support-case-card:hover { border-color: rgba(136, 173, 255, .47); background: linear-gradient(152deg, rgba(28, 46, 83, .98), rgba(9, 20, 39, 1)); transform: translateY(-1px); }
.portal-support-case-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.portal-support-case-category { display: inline-flex; max-width: 72%; min-height: 24px; align-items: center; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(155, 185, 255, .22); border-radius: 999px; background: rgba(119, 142, 255, .1); color: #c5d2ff; font-size: 9px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.portal-support-case-card h3 { margin: 0; color: #eef3ff; font-size: 16px; letter-spacing: -.02em; line-height: 1.28; }
.portal-support-case-card > p { display: -webkit-box; min-height: 49px; margin: 0; overflow: hidden; color: #aebbd1; font-size: 11px; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-support-case-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: auto 0 0; }
.portal-support-case-meta > div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(167, 188, 250, .1); border-radius: 10px; background: rgba(3, 11, 26, .32); }
.portal-support-case-meta dt { color: #8394b3; font-size: 9px; font-weight: 740; }
.portal-support-case-meta dd { margin: 4px 0 0; overflow: hidden; color: #e8efff; font-size: 10px; font-weight: 670; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.portal-support-case-meta dd small { display: block; margin-top: 2px; overflow: hidden; color: #8ea5ba; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portal-support-case-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-support-activity { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.portal-support-activity li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(169, 190, 247, .1); }
.portal-support-activity li:first-child { border-top: 0; }
.portal-support-activity-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #91b2ff; box-shadow: 0 0 0 4px rgba(115, 143, 255, .1); }
.portal-support-activity strong, .portal-support-activity small { display: block; }
.portal-support-activity strong { color: #eaf0ff; font-size: 12px; }
.portal-support-activity small { margin-top: 3px; color: #91a1bd; font-size: 10px; }
.portal-support-thread { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }
.portal-support-message { max-width: min(100%, 760px); padding: 13px 14px; border: 1px solid rgba(165, 187, 245, .14); border-radius: 14px 14px 14px 4px; background: rgba(8, 18, 36, .58); }
.portal-support-message--operator { margin-left: auto; border-color: rgba(116, 219, 191, .2); border-radius: 14px 14px 4px 14px; background: linear-gradient(145deg, rgba(13, 62, 60, .53), rgba(8, 25, 39, .78)); }
.portal-support-message.is-internal { border-style: dashed; border-color: rgba(210, 174, 255, .36); background: linear-gradient(145deg, rgba(57, 34, 84, .65), rgba(19, 24, 47, .8)); }
.portal-support-message-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between; }
.portal-support-message-meta strong { color: #edf4ff; font-size: 11px; }
.portal-support-message-meta span, .portal-support-message > small { color: #90a5bc; font-size: 9px; }
.portal-support-message > small { display: block; margin-top: 4px; }
.portal-support-message p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #c0ccdf; font-size: 12px; line-height: 1.65; }
.portal-support-admin-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.portal-support-admin-update { min-width: 0; }
.portal-support-care-board { border-color: rgba(85, 212, 182, .22); background: radial-gradient(circle at 88% 4%, rgba(54, 197, 180, .13), transparent 18rem), linear-gradient(145deg, rgba(8, 42, 52, .92), rgba(8, 19, 37, .99)); }
.portal-support-care-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.portal-support-care-lane { min-width: 0; padding: 14px; border: 1px solid rgba(109, 219, 196, .19); border-radius: 14px; background: linear-gradient(145deg, rgba(8, 58, 64, .44), rgba(6, 17, 34, .62)); }
.portal-support-care-lane-head { display: flex; gap: 9px; align-items: center; justify-content: space-between; color: #c9fff1; font-size: 12px; font-weight: 780; }
.portal-support-care-lane-head strong { display: grid; min-width: 28px; height: 28px; place-items: center; border-radius: 9px; background: rgba(64, 220, 185, .14); color: #8dffe6; font-size: 15px; }
.portal-support-care-lane dl, .portal-support-care-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 13px 0 0; }
.portal-support-care-lane dl > div, .portal-support-care-detail-grid > div { min-width: 0; padding: 8px; border: 1px solid rgba(169, 241, 226, .09); border-radius: 9px; background: rgba(3, 13, 25, .28); }
.portal-support-care-lane dt, .portal-support-care-detail-grid dt { color: #7faeac; font-size: 8px; font-weight: 760; letter-spacing: .015em; text-transform: uppercase; }
.portal-support-care-lane dd, .portal-support-care-detail-grid dd { margin: 4px 0 0; overflow: hidden; color: #e8fff9; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-support-care-controls { display: grid; gap: 18px; }
.portal-support-care-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: 18px; align-items: center; padding: clamp(20px, 2.8vw, 30px); border: 1px solid rgba(105, 225, 198, .2); border-radius: 20px; background: radial-gradient(circle at 90% 12%, rgba(58, 210, 187, .17), transparent 17rem), linear-gradient(145deg, rgba(9, 51, 57, .94), rgba(8, 19, 37, .99)); }
.portal-support-care-heading h2 { margin: 7px 0 8px; color: #eafff9; font-size: clamp(23px, 2.7vw, 34px); letter-spacing: -.04em; }
.portal-support-care-heading p { max-width: 720px; margin: 0; color: #acd5ce; line-height: 1.65; }
.portal-support-care-heading dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-support-care-heading dl > div { min-width: 0; padding: 12px; border: 1px solid rgba(173, 255, 237, .12); border-radius: 12px; background: rgba(2, 18, 28, .34); }
.portal-support-care-heading dt { color: #88c8bc; font-size: 9px; font-weight: 740; text-transform: uppercase; }
.portal-support-care-heading dd { margin: 5px 0 0; overflow: hidden; color: #effffb; font-size: 11px; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.portal-support-care-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 15px; }
.portal-support-care-reason { padding: 11px 12px; border: 1px dashed rgba(151, 224, 211, .24); border-radius: 12px; background: rgba(7, 37, 44, .44); color: #c8e8e1; font-size: 11px; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-support-care-escalation { margin-top: 14px; }
.portal-support-care-activity { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.portal-support-care-activity li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(145, 222, 205, .12); }
.portal-support-care-activity li:first-child { border-top: 0; }
.portal-support-care-activity strong, .portal-support-care-activity small { display: block; }
.portal-support-care-activity strong { color: #e7fff9; font-size: 12px; }
.portal-support-care-activity small { margin-top: 3px; color: #9bc4bd; font-size: 10px; }
.portal-support-care-activity p { margin: 6px 0 0; color: #c2dcd7; font-size: 11px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Prompt Library: a calm, private authoring surface for reusable recipes.
   It deliberately uses the portal card system instead of introducing a
   marketing landing treatment or a provider-console visual language. */
.portal-prompt-library, .portal-prompt-library-detail { display: grid; gap: 18px; min-width: 0; }
.portal-prompt-library-intro, .portal-prompt-library-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(88, 212, 191, .22); border-radius: 22px; background: radial-gradient(circle at 89% 13%, rgba(59, 207, 188, .16), transparent 18rem), linear-gradient(145deg, rgba(10, 49, 57, .92), rgba(6, 18, 30, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .15); }
.portal-prompt-library-intro h2, .portal-prompt-library-detail-summary h2 { margin: 7px 0 8px; color: #ecfffb; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-prompt-library-intro p, .portal-prompt-library-detail-summary p { max-width: 760px; margin: 0; color: #afc9ce; line-height: 1.72; }
.portal-prompt-library-intro dl, .portal-prompt-library-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-prompt-library-intro dl > div, .portal-prompt-library-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(159, 242, 229, .13); border-radius: 15px; background: rgba(3, 19, 29, .38); }
.portal-prompt-library-intro dt { color: #8df1df; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-prompt-library-intro dd, .portal-prompt-library-detail-summary dt { margin: 7px 0 0; color: #a2c5c7; font-size: 11px; line-height: 1.45; }
.portal-prompt-library-detail-summary dt { margin: 0; color: #89bfc1; font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .06em; }
.portal-prompt-library-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #effffc; font-size: 13px; font-weight: 760; }
.portal-prompt-library-layout, .portal-prompt-library-detail-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-prompt-library-create, .portal-prompt-library-editor { background: linear-gradient(150deg, rgba(12, 42, 51, .93), rgba(7, 18, 31, .99)); }
.portal-prompt-library-boundary, .portal-prompt-library-preview { background: linear-gradient(150deg, rgba(11, 36, 48, .8), rgba(7, 17, 31, .98)); }
.portal-prompt-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-prompt-library-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 245px; padding: 17px; border: 1px solid rgba(122, 222, 210, .16); border-radius: 17px; background: linear-gradient(150deg, rgba(11, 35, 47, .96), rgba(7, 18, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-prompt-library-card:hover { border-color: rgba(112, 237, 216, .44); background: linear-gradient(150deg, rgba(14, 52, 62, .98), rgba(7, 21, 35, 1)); transform: translateY(-1px); }
.portal-prompt-library-card .portal-card-header { align-items: flex-start; }
.portal-prompt-library-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-prompt-library-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-prompt-library-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-prompt-library-meta span, .portal-prompt-library-tags span { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(139, 227, 217, .17); border-radius: 999px; background: rgba(63, 191, 177, .08); color: #aee9df; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-prompt-library-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-prompt-library-tags span { color: #b9c9f8; border-color: rgba(163, 180, 255, .18); background: rgba(131, 148, 255, .1); }
.portal-prompt-library-filter { display: grid; grid-template-columns: minmax(190px, 1.35fr) repeat(4, minmax(122px, .7fr)) minmax(105px, .55fr); gap: 11px; align-items: end; margin-top: 14px; padding: 13px; border: 1px solid rgba(119, 218, 204, .15); border-radius: 15px; background: rgba(5, 22, 34, .52); }
.portal-prompt-library-filter .portal-field { gap: 6px; }
.portal-prompt-library-filter .portal-form-footer { grid-column: 1 / -1; margin-top: 0; padding-top: 1px; }
.portal-prompt-library-events { display: grid; gap: 0; }
.portal-prompt-library-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(140, 223, 213, .1); }
.portal-prompt-library-events > div:first-child { border-top: 0; }
.portal-prompt-library-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #7ee6d3; box-shadow: 0 0 0 4px rgba(91, 219, 199, .1); color: transparent; }
.portal-prompt-library-events strong, .portal-prompt-library-events small { display: block; }
.portal-prompt-library-events strong { color: #e6fffb; font-size: 12px; }
.portal-prompt-library-events small { margin-top: 3px; color: #91b6ba; font-size: 10px; }
.portal-prompt-library-preview-result { display: grid; gap: 11px; margin-top: 14px; padding: 15px; border: 1px solid rgba(104, 218, 202, .19); border-radius: 14px; background: rgba(3, 17, 28, .5); }
.portal-prompt-library-preview-result h3, .portal-prompt-library-preview-result h4 { margin: 4px 0; color: #dffefa; font-size: 13px; }
.portal-prompt-library-preview-result p { margin: 0; color: #99babe; font-size: 11px; line-height: 1.55; }
.portal-prompt-library-preview-result pre { max-height: 330px; padding: 12px; margin: 0; overflow: auto; border: 1px solid rgba(121, 212, 202, .12); border-radius: 11px; background: rgba(1, 11, 20, .6); color: #c9f4ed; font: 11px/1.65 var(--portal-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-prompt-library-import { padding: 0 17px 15px; border: 1px solid rgba(134, 220, 209, .14); border-radius: 16px; background: rgba(7, 23, 36, .42); }
.portal-prompt-library-import summary { padding: 15px 0; color: #ddfffa; font-size: 13px; font-weight: 790; cursor: pointer; }
.portal-prompt-library-import > p { margin: 0 0 13px; color: #9bbbc0; font-size: 11px; line-height: 1.65; }
.portal-prompt-library-import code { color: #b9eaff; font-family: var(--portal-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
.portal-prompt-library-provenance dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; }
.portal-prompt-library-provenance dl > div { min-width: 0; padding: 12px; border: 1px solid rgba(132, 219, 207, .12); border-radius: 12px; background: rgba(4, 21, 33, .45); }
.portal-prompt-library-provenance dt { color: #84abad; font-size: 9px; font-weight: 760; text-transform: uppercase; letter-spacing: .06em; }
.portal-prompt-library-provenance dd { margin: 6px 0 0; overflow-wrap: anywhere; color: #e2f8f5; font-size: 12px; line-height: 1.6; }

/* Creative Content Studio: an account-owned authoring surface. It stays in
   the portal's working-application language: compact review controls,
   bounded private text and clear state—not a faux AI/provider console. */
.portal-content-studio, .portal-content-studio-detail { display: grid; gap: 18px; min-width: 0; }
.portal-content-studio-intro, .portal-content-studio-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(92, 214, 191, .22); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(68, 199, 177, .15), transparent 18rem), linear-gradient(145deg, rgba(10, 49, 56, .94), rgba(7, 18, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .16); }
.portal-content-studio-intro h2, .portal-content-studio-detail-summary h2 { margin: 7px 0 8px; color: #ecfffb; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-content-studio-intro p, .portal-content-studio-detail-summary p { max-width: 770px; margin: 0; color: #aec9cb; line-height: 1.72; }
.portal-content-studio-intro dl, .portal-content-studio-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-content-studio-intro dl > div, .portal-content-studio-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(152, 240, 223, .14); border-radius: 15px; background: rgba(4, 20, 30, .42); }
.portal-content-studio-intro dt { color: #96f4e1; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-content-studio-intro dd, .portal-content-studio-detail-summary dt { margin: 7px 0 0; color: #9db9bc; font-size: 11px; line-height: 1.45; }
.portal-content-studio-detail-summary dt { margin: 0; color: #94b7ba; font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .06em; }
.portal-content-studio-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #e9fffb; font-size: 13px; font-weight: 760; }
.portal-content-studio-layout, .portal-content-studio-detail-grid, .portal-content-studio-history-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-content-studio-create, .portal-content-studio-editor, .portal-content-variant-create { background: linear-gradient(150deg, rgba(11, 48, 55, .94), rgba(7, 18, 31, .99)); }
.portal-content-studio-policy, .portal-content-studio-composer, .portal-content-studio-activity { background: linear-gradient(150deg, rgba(14, 41, 52, .82), rgba(7, 17, 31, .98)); }
.portal-content-studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-content-studio-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 238px; padding: 17px; border: 1px solid rgba(118, 224, 205, .17); border-radius: 17px; background: linear-gradient(150deg, rgba(9, 35, 46, .97), rgba(7, 18, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-content-studio-card:hover { border-color: rgba(122, 236, 216, .47); background: linear-gradient(150deg, rgba(13, 52, 61, .99), rgba(7, 21, 35, 1)); transform: translateY(-1px); }
.portal-content-studio-card .portal-card-header { align-items: flex-start; }
.portal-content-studio-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-content-studio-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-content-studio-meta, .portal-content-studio-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-content-studio-meta span, .portal-content-studio-tags span, .portal-content-selected { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(127, 226, 211, .18); border-radius: 999px; background: rgba(62, 190, 174, .09); color: #b0eee3; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-content-studio-tags span { border-color: rgba(159, 179, 255, .18); background: rgba(126, 144, 255, .1); color: #c3cdfb; }
.portal-content-selected { border-color: rgba(120, 244, 214, .35); background: rgba(58, 204, 181, .14); color: #bdfff0; }
.portal-content-studio-filter { display: grid; grid-template-columns: minmax(190px, 1.35fr) repeat(3, minmax(124px, .72fr)); gap: 11px; align-items: end; margin-top: 14px; padding: 13px; border: 1px solid rgba(121, 224, 207, .15); border-radius: 15px; background: rgba(5, 23, 35, .53); }
.portal-content-studio-filter .portal-field { gap: 6px; }
.portal-content-studio-filter .portal-form-footer { grid-column: 1 / -1; margin-top: 0; padding-top: 1px; }
.portal-content-studio-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(121, 224, 207, .16); color: #b9e7df; font-size: 10px; font-weight: 700; }
.portal-content-studio-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-content-studio-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-content-studio-composer { display: grid; gap: 13px; }
.portal-content-variant-create { margin-top: 0; }
.portal-content-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-content-variant-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(125, 220, 206, .16); border-radius: 17px; background: linear-gradient(145deg, rgba(9, 32, 45, .94), rgba(7, 17, 31, .99)); }
.portal-content-variant-card.is-selected { border-color: rgba(104, 235, 205, .46); background: radial-gradient(circle at 93% 7%, rgba(77, 211, 186, .12), transparent 12rem), linear-gradient(145deg, rgba(10, 44, 52, .98), rgba(7, 18, 31, 1)); box-shadow: inset 0 0 0 1px rgba(110, 229, 207, .08); }
.portal-content-variant-card .portal-card-header { align-items: flex-start; }
.portal-content-variant-card .portal-card-subtitle { display: -webkit-box; min-height: 42px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-content-variant-form { padding-top: 13px; border-top: 1px solid rgba(131, 224, 210, .12); }
.portal-content-variant-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-content-variant-form .portal-field--wide { grid-column: 1 / -1; }
.portal-content-variant-history { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(131, 224, 210, .12); }
.portal-content-variant-history > strong { color: #d9fffa; font-size: 11px; }
.portal-content-variant-history > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(131, 224, 210, .08); color: #9fc1c3; font-size: 10px; }
.portal-content-variant-history > div:first-of-type { border-top: 0; }
.portal-content-variant-history em { color: #98eadc; font-size: 10px; font-style: normal; font-weight: 750; }
.portal-content-version-list { display: grid; gap: 0; }
.portal-content-version-list > article { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(130, 224, 210, .11); }
.portal-content-version-list > article:first-child { border-top: 0; }
.portal-content-version-list > article > div { min-width: 0; }
.portal-content-version-list strong, .portal-content-version-list p, .portal-content-version-list small { display: block; }
.portal-content-version-list strong { color: #e3fffa; font-size: 12px; }
.portal-content-version-list p { max-width: 630px; margin: 4px 0 0; color: #a5c3c5; font-size: 10px; line-height: 1.55; }
.portal-content-version-list small { margin-top: 4px; color: #82a9ad; font-size: 9px; }
.portal-content-activity-list { display: grid; gap: 0; }
.portal-content-activity-list > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(130, 224, 210, .1); }
.portal-content-activity-list > div:first-child { border-top: 0; }
.portal-content-activity-list > div > span { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #7ae2d1; box-shadow: 0 0 0 4px rgba(90, 211, 191, .1); }
.portal-content-activity-list p, .portal-content-activity-list strong, .portal-content-activity-list small { margin: 0; }
.portal-content-activity-list strong, .portal-content-activity-list small { display: block; }
.portal-content-activity-list strong { color: #e0fffa; font-size: 11px; text-transform: capitalize; }
.portal-content-activity-list small { margin-top: 3px; color: #91b8bb; font-size: 9px; }

/* Voice Studio & Consent Vault: a private writing and governance workspace.
   It deliberately has no player, waveform, provider status console or faux
   delivery chrome: direction and scripts are useful even while audio remains
   guarded behind a future reviewed adapter. */
.portal-voice-studio, .portal-voice-studio-detail { display: grid; gap: 18px; min-width: 0; }
.portal-voice-studio-intro, .portal-voice-studio-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(249, 177, 96, .23); border-radius: 22px; background: radial-gradient(circle at 89% 12%, rgba(235, 142, 70, .17), transparent 18rem), linear-gradient(145deg, rgba(61, 34, 37, .95), rgba(10, 18, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .16); }
.portal-voice-studio-intro h2, .portal-voice-studio-detail-summary h2 { margin: 7px 0 8px; color: #fff3e7; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-voice-studio-intro p, .portal-voice-studio-detail-summary p { max-width: 770px; margin: 0; color: #d6bcb0; line-height: 1.72; }
.portal-voice-studio-intro dl, .portal-voice-studio-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-voice-studio-intro dl > div, .portal-voice-studio-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(255, 209, 163, .14); border-radius: 15px; background: rgba(31, 17, 28, .46); }
.portal-voice-studio-intro dt { color: #ffc68d; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-voice-studio-intro dd, .portal-voice-studio-detail-summary dt { margin: 7px 0 0; color: #bc9da0; font-size: 11px; line-height: 1.45; }
.portal-voice-studio-detail-summary dt { margin: 0; color: #bba1a3; font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .06em; }
.portal-voice-studio-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #fff0e4; font-size: 13px; font-weight: 760; }
.portal-voice-studio-layout, .portal-voice-studio-detail-grid, .portal-voice-studio-history-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-voice-studio-create, .portal-voice-studio-editor, .portal-voice-script-create { background: linear-gradient(150deg, rgba(61, 34, 37, .93), rgba(9, 17, 30, .99)); }
.portal-voice-studio-policy, .portal-voice-studio-composer, .portal-voice-studio-activity, .portal-voice-studio-boundary { background: linear-gradient(150deg, rgba(49, 30, 42, .84), rgba(8, 16, 29, .98)); }
.portal-voice-studio-policy { display: grid; gap: 14px; }
.portal-voice-studio-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-voice-studio-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(255, 191, 126, .14); border-radius: 11px; background: rgba(32, 17, 29, .48); }
.portal-voice-studio-guard-list strong { overflow: hidden; color: #f7ded0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-voice-studio-guard-list em { padding: 3px 6px; border: 1px solid rgba(255, 174, 96, .17); border-radius: 999px; background: rgba(237, 139, 62, .08); color: #ffcc99; font-size: 8px; font-style: normal; font-weight: 760; text-transform: uppercase; letter-spacing: .045em; }
.portal-voice-vault-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-voice-vault-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 238px; border-color: rgba(249, 176, 104, .17); background: linear-gradient(150deg, rgba(52, 31, 38, .94), rgba(8, 17, 30, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-voice-vault-card:hover { border-color: rgba(255, 193, 126, .48); background: linear-gradient(150deg, rgba(67, 38, 43, .98), rgba(10, 19, 33, 1)); transform: translateY(-1px); }
.portal-voice-vault-card.is-default { border-color: rgba(255, 190, 111, .38); background: radial-gradient(circle at 92% 8%, rgba(244, 156, 77, .14), transparent 13rem), linear-gradient(150deg, rgba(64, 35, 39, .98), rgba(9, 17, 31, 1)); box-shadow: inset 0 0 0 1px rgba(255, 205, 144, .07); }
.portal-voice-vault-card .portal-card-header { align-items: flex-start; }
.portal-voice-vault-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-voice-vault-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-voice-vault-meta, .portal-voice-script-meta, .portal-voice-studio-tags, .portal-voice-reference-list { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-voice-vault-meta span, .portal-voice-script-meta span, .portal-voice-studio-tags span, .portal-voice-reference-list span, .portal-voice-default, .portal-voice-policy-flag { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(255, 190, 123, .17); border-radius: 999px; background: rgba(237, 139, 62, .08); color: #ffd2aa; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-voice-studio-tags span { border-color: rgba(181, 161, 255, .19); background: rgba(140, 123, 247, .1); color: #d4caff; }
.portal-voice-default { border-color: rgba(255, 205, 139, .37); background: rgba(248, 169, 83, .14); color: #ffe2bf; }
.portal-voice-policy-flag { border-color: rgba(255, 163, 117, .35); background: rgba(242, 101, 70, .11); color: #ffc1aa; }
.portal-voice-studio-filter { display: grid; grid-template-columns: minmax(190px, 1.35fr) repeat(2, minmax(124px, .72fr)); gap: 11px; align-items: end; margin-top: 14px; padding: 13px; border: 1px solid rgba(255, 187, 119, .15); border-radius: 15px; background: rgba(37, 19, 30, .46); }
.portal-voice-studio-filter .portal-field { gap: 6px; }
.portal-voice-studio-filter .portal-form-footer { grid-column: 1 / -1; margin-top: 0; padding-top: 1px; }
.portal-voice-studio-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255, 187, 119, .16); color: #f1cfad; font-size: 10px; font-weight: 700; }
.portal-voice-studio-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-voice-studio-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-voice-studio-composer { display: grid; gap: 13px; }
.portal-voice-script-create { margin-top: 0; }
.portal-voice-script-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-voice-script-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(255, 183, 113, .16); border-radius: 17px; background: linear-gradient(145deg, rgba(48, 29, 40, .94), rgba(7, 16, 30, .99)); }
.portal-voice-script-card .portal-card-header { align-items: flex-start; }
.portal-voice-script-card .portal-card-subtitle { display: -webkit-box; min-height: 42px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-voice-script-form { padding-top: 13px; border-top: 1px solid rgba(255, 190, 125, .12); }
.portal-voice-script-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-voice-script-form .portal-field--wide { grid-column: 1 / -1; }
.portal-voice-script-history { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 190, 125, .12); }
.portal-voice-script-history > strong { color: #ffe8d3; font-size: 11px; }
.portal-voice-script-history > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255, 190, 125, .08); color: #d7b6aa; font-size: 10px; }
.portal-voice-script-history > div:first-of-type { border-top: 0; }
.portal-voice-script-history em { color: #ffd19e; font-size: 10px; font-style: normal; font-weight: 750; }
.portal-voice-cue-sheet { display: grid; gap: 12px; padding: 14px; border: 1px solid rgba(190, 173, 255, .19); border-radius: 14px; background: linear-gradient(145deg, rgba(35, 27, 57, .59), rgba(10, 17, 31, .77)); }
.portal-voice-cue-sheet h4 { margin: 4px 0; color: #efeaff; font-size: 13px; }
.portal-voice-cue-sheet p { margin: 0; color: #bbb7d5; font-size: 11px; line-height: 1.55; }
.portal-voice-cue-metrics { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-voice-cue-metrics span { padding: 4px 8px; border: 1px solid rgba(184, 168, 255, .17); border-radius: 999px; background: rgba(137, 121, 238, .09); color: #d9d0ff; font-size: 9px; font-weight: 720; }
.portal-voice-cue-sheet ol { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
.portal-voice-cue-sheet li { display: grid; grid-template-columns: 21px 92px minmax(0, 1fr) auto; gap: 9px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(185, 168, 255, .11); }
.portal-voice-cue-sheet li:first-child { border-top: 0; }
.portal-voice-cue-sheet li > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: rgba(143, 126, 242, .14); color: #d9d1ff; font-size: 9px; font-weight: 780; }
.portal-voice-cue-sheet time, .portal-voice-cue-sheet small { color: #aaa3c8; font: 9px/1.6 var(--portal-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
.portal-voice-cue-sheet small { white-space: nowrap; }
.portal-voice-version-list { display: grid; gap: 0; }
.portal-voice-version-list > article { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255, 190, 125, .11); }
.portal-voice-version-list > article:first-child { border-top: 0; }
.portal-voice-version-list > article > div { min-width: 0; }
.portal-voice-version-list strong, .portal-voice-version-list p, .portal-voice-version-list small { display: block; }
.portal-voice-version-list strong { color: #ffe8d3; font-size: 12px; }
.portal-voice-version-list p { max-width: 630px; margin: 4px 0 0; color: #d1b7ad; font-size: 10px; line-height: 1.55; }
.portal-voice-version-list small { margin-top: 4px; color: #aa918f; font-size: 9px; }
.portal-voice-studio-events { display: grid; gap: 0; }
.portal-voice-studio-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(255, 190, 125, .1); }
.portal-voice-studio-events > div:first-child { border-top: 0; }
.portal-voice-studio-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #ffbb7c; box-shadow: 0 0 0 4px rgba(248, 161, 83, .1); color: transparent; }
.portal-voice-studio-events strong, .portal-voice-studio-events small { display: block; }
.portal-voice-studio-events strong { color: #ffe9d6; font-size: 11px; text-transform: capitalize; }
.portal-voice-studio-events small { margin-top: 3px; color: #c5a8a4; font-size: 9px; }

/* Audio Library & Briefing: a private working surface for music/SFX intent
   and Asset Vault references. It deliberately avoids a faux audio player,
   provider dashboard, streaming chrome or landing-page treatment. */
.portal-media-workspace, .portal-media-workspace-detail { display: grid; gap: 18px; min-width: 0; }
.portal-media-workspace-intro, .portal-media-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(157, 145, 255, .23); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(139, 111, 255, .17), transparent 18rem), linear-gradient(145deg, rgba(29, 29, 72, .94), rgba(7, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .16); }
.portal-media-workspace-intro h2, .portal-media-detail-summary h2 { margin: 7px 0 8px; color: #f2efff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-media-workspace-intro p, .portal-media-detail-summary p { max-width: 770px; margin: 0; color: #bbb8dd; line-height: 1.72; }
.portal-media-workspace-intro dl, .portal-media-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-media-workspace-intro dl > div, .portal-media-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(191, 181, 255, .14); border-radius: 15px; background: rgba(8, 12, 33, .42); }
.portal-media-workspace-intro dt { color: #beb2ff; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-media-workspace-intro dd, .portal-media-detail-summary dt { margin: 7px 0 0; color: #aaa6cd; font-size: 11px; line-height: 1.45; }
.portal-media-detail-summary dt { margin: 0; color: #aaa1d1; font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .06em; }
.portal-media-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #f0edff; font-size: 13px; font-weight: 760; }
.portal-media-workspace-layout, .portal-media-detail-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-media-create, .portal-media-editor { background: linear-gradient(150deg, rgba(29, 31, 72, .93), rgba(7, 18, 31, .99)); }
.portal-media-policy, .portal-media-composer { background: linear-gradient(150deg, rgba(33, 27, 69, .82), rgba(8, 17, 31, .98)); }
.portal-media-collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-media-collection-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 238px; padding: 17px; border: 1px solid rgba(173, 159, 255, .17); border-radius: 17px; background: linear-gradient(150deg, rgba(23, 28, 59, .97), rgba(7, 18, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-media-collection-card:hover { border-color: rgba(180, 160, 255, .47); background: linear-gradient(150deg, rgba(41, 43, 91, .99), rgba(9, 20, 39, 1)); transform: translateY(-1px); }
.portal-media-collection-card .portal-card-header { align-items: flex-start; }
.portal-media-collection-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-media-collection-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-media-card-meta, .portal-media-tags, .portal-media-guarded-list { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-media-card-meta span, .portal-media-tags span, .portal-media-guarded-list em, .portal-media-policy-flag { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(181, 166, 255, .18); border-radius: 999px; background: rgba(147, 126, 255, .1); color: #d1c7ff; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-media-tags span { border-color: rgba(137, 220, 211, .18); background: rgba(75, 195, 180, .08); color: #b9f0e8; }
.portal-media-policy-flag { border-color: rgba(255, 183, 115, .26); background: rgba(255, 164, 78, .1); color: #ffd2a3; }
.portal-media-guarded-list { margin-top: 14px; align-items: center; }
.portal-media-guarded-list > span { color: #aaa6cd; font-size: 10px; font-weight: 760; }
.portal-media-guarded-list em { font-style: normal; text-transform: capitalize; }
.portal-media-filter { display: grid; grid-template-columns: minmax(190px, 1.35fr) repeat(3, minmax(125px, .72fr)); gap: 11px; align-items: end; margin-top: 14px; padding: 13px; border: 1px solid rgba(174, 158, 255, .15); border-radius: 15px; background: rgba(12, 16, 42, .54); }
.portal-media-filter .portal-field { gap: 6px; }
.portal-media-filter .portal-form-footer { grid-column: 1 / -1; margin-top: 0; padding-top: 1px; }
.portal-media-audio-filter { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.portal-media-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 16px; padding-top: 12px; border-top: 1px solid rgba(174, 158, 255, .14); color: #c9c2ec; font-size: 10px; font-weight: 700; }
.portal-media-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-media-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-media-events { display: grid; gap: 0; }
.portal-media-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(177, 164, 255, .11); }
.portal-media-events > div:first-child { border-top: 0; }
.portal-media-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #b5a6ff; box-shadow: 0 0 0 4px rgba(154, 132, 255, .1); color: transparent; }
.portal-media-events strong, .portal-media-events small { display: block; }
.portal-media-events strong { color: #f1eeff; font-size: 12px; }
.portal-media-events small { margin-top: 3px; color: #a49ec7; font-size: 10px; }
.portal-media-composer-result { display: grid; gap: 10px; margin-top: 14px; }
.portal-media-composer-result article { padding: 13px; border: 1px solid rgba(183, 164, 255, .18); border-radius: 13px; background: rgba(4, 10, 29, .48); }
.portal-media-composer-result h3 { margin: 5px 0 8px; color: #eeeaff; font-size: 12px; }
.portal-media-composer-result pre { max-height: 245px; padding: 11px; margin: 0; overflow: auto; border: 1px solid rgba(176, 161, 255, .12); border-radius: 10px; background: rgba(1, 8, 22, .63); color: #d8d1ff; font: 10px/1.62 var(--portal-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-media-attach-form { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(174, 158, 255, .13); }
.portal-media-item-grid { display: grid; gap: 12px; }
.portal-media-item-card { min-width: 0; padding: 15px; border: 1px solid rgba(175, 162, 248, .15); border-radius: 15px; background: linear-gradient(145deg, rgba(17, 24, 50, .91), rgba(7, 17, 31, .96)); }
.portal-media-item-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: start; justify-content: space-between; margin-bottom: 13px; }
.portal-media-item-head > div:first-child { display: flex; min-width: 0; gap: 10px; align-items: center; }
.portal-media-file-mark { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(184, 168, 255, .24); border-radius: 10px; background: rgba(143, 122, 255, .13); color: #d7ceff; font-size: 8px; font-weight: 850; }
.portal-media-item-head h3 { margin: 0; overflow-wrap: anywhere; color: #f1efff; font-size: 13px; }
.portal-media-item-head p { margin: 3px 0 0; color: #a5a2c0; font-size: 10px; overflow-wrap: anywhere; }
.portal-media-favorite { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 8px; border: 1px solid rgba(255, 205, 118, .22); border-radius: 999px; background: rgba(255, 186, 62, .1); color: #ffe0a3; font-size: 9px; font-weight: 780; }
.portal-media-item-form .portal-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-media-checkbox { display: inline-flex; grid-column: span 2; gap: 8px; align-items: center; min-height: 38px; color: #c9c7e2; font-size: 11px; font-weight: 680; }
.portal-media-checkbox input { width: 15px; height: 15px; accent-color: #9581ff; }
.portal-media-detail-boundary { background: linear-gradient(150deg, rgba(24, 27, 57, .79), rgba(7, 17, 31, .97)); }

/* Audio Production Hub is a dense app-first projection over the existing
   Media Workspace. It keeps the reviewed slate/teal portal system, makes the
   three authoring stages scannable, and deliberately avoids decorative media
   chrome, faux players, progress indicators and landing-page gradients. */
.portal-audio-hub, .portal-audio-hub-detail { display: grid; gap: 18px; min-width: 0; }
.portal-audio-hub-overview { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr); gap: 22px; align-items: stretch; padding: clamp(20px, 3vw, 32px); border: 1px solid #2a394b; border-radius: 20px; background: #121a26; box-shadow: 0 18px 42px rgba(0, 0, 0, .18); }
.portal-audio-hub-overview-copy { min-width: 0; align-self: center; }
.portal-audio-hub-overview-copy h2 { max-width: 680px; margin: 7px 0 9px; color: #f8fafc; font-size: clamp(27px, 3vw, 39px); letter-spacing: -.045em; line-height: 1.05; }
.portal-audio-hub-overview-copy p { max-width: 680px; margin: 0; color: #aab8c7; font-size: 14px; line-height: 1.7; }
.portal-audio-hub-lanes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-audio-hub-lanes li, .portal-audio-hub-collection-lane { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 13px; border: 1px solid #2a394b; border-radius: 14px; background: #172234; }
.portal-audio-hub-lane-index { display: inline-grid; width: 32px; height: 28px; place-items: center; border: 1px solid rgba(45, 212, 191, .36); border-radius: 8px; background: rgba(45, 212, 191, .1); color: #8ff4e5; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.portal-audio-hub-lanes li > div, .portal-audio-hub-collection-lane > div { display: grid; min-width: 0; gap: 2px; }
.portal-audio-hub-lanes strong, .portal-audio-hub-collection-lane strong { color: #f8fafc; font-size: 13px; line-height: 1.35; }
.portal-audio-hub-lanes b, .portal-audio-hub-collection-lane b { color: #7ee7d7; font-size: 12px; font-weight: 760; }
.portal-audio-hub-lanes small, .portal-audio-hub-collection-lane p { margin: 0; color: #aab8c7; font-size: 11px; line-height: 1.55; }
.portal-audio-hub-next-steps { border-color: #2a394b; background: #121a26; }
.portal-audio-hub-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
.portal-audio-hub-next-card { display: grid; min-height: 106px; gap: 7px; align-content: start; padding: 14px; border: 1px solid #2a394b; border-radius: 14px; background: #172234; color: inherit; text-decoration: none; transition: border-color .18s ease, background-color .18s ease; }
.portal-audio-hub-next-card:hover { border-color: rgba(45, 212, 191, .62); background: #1b2a3b; }
.portal-audio-hub-next-card strong { color: #f8fafc; font-size: 13px; line-height: 1.35; }
.portal-audio-hub-next-card span { color: #aab8c7; font-size: 11px; line-height: 1.55; }
.portal-audio-hub-collection-board { display: grid; gap: 15px; padding: 18px; border: 1px solid #2a394b; border-radius: 18px; background: #121a26; }
.portal-audio-hub-collection-heading { display: flex; flex-wrap: wrap; gap: 13px; align-items: flex-start; justify-content: space-between; }
.portal-audio-hub-collection-heading > div { min-width: 0; max-width: 780px; }
.portal-audio-hub-collection-heading h2 { margin: 6px 0 7px; color: #f8fafc; font-size: 20px; letter-spacing: -.025em; }
.portal-audio-hub-collection-heading p { margin: 0; color: #aab8c7; font-size: 12px; line-height: 1.65; }
.portal-audio-hub-collection-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-audio-hub-collection-lane { align-items: start; min-height: 132px; }
.portal-audio-hub-collection-lane ul { display: grid; gap: 4px; margin: 5px 0 0; padding: 0; list-style: none; }
.portal-audio-hub-collection-lane li { overflow: hidden; color: #d8e3ed; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.portal-audio-hub .portal-media-create, .portal-audio-hub-detail .portal-media-editor { border-color: #2a394b; background: #121a26; }
.portal-audio-hub .portal-media-policy, .portal-audio-hub-detail .portal-media-composer, .portal-audio-hub-detail .portal-media-detail-boundary { border-color: #2a394b; background: #172234; }
.portal-audio-hub .portal-media-collection-card, .portal-audio-hub-detail .portal-media-item-card { border-color: #2a394b; background: #172234; }
.portal-audio-hub .portal-media-collection-card:hover { border-color: rgba(45, 212, 191, .62); background: #1b2a3b; transform: none; }
.portal-audio-hub-detail .portal-media-detail-summary { border-color: #2a394b; background: #121a26; box-shadow: 0 18px 42px rgba(0, 0, 0, .18); }
.portal-audio-hub-detail .portal-media-detail-summary h2 { color: #f8fafc; }
.portal-audio-hub-detail .portal-media-detail-summary p { color: #aab8c7; }
.portal-audio-hub-detail .portal-media-detail-summary dl > div { border-color: #2a394b; background: #172234; }
.portal-audio-hub-detail .portal-media-detail-summary dt { color: #aab8c7; }
.portal-audio-hub-detail .portal-media-detail-summary dd { color: #f8fafc; }
.portal-audio-change-requests { display: grid; gap: 14px; padding: 16px; border: 1px solid #2a394b; border-radius: 16px; background: #172234; }
.portal-audio-change-request-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-audio-change-request-heading > div:first-child { min-width: 0; max-width: 720px; }
.portal-audio-change-request-heading h3, .portal-audio-change-request-history h4 { margin: 0; color: #f8fafc; font-size: 16px; letter-spacing: -.018em; }
.portal-audio-change-request-heading p { margin: 5px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.6; }
.portal-audio-change-request-heading-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.portal-audio-change-request-heading-actions .portal-button { min-height: 38px; padding-inline: 12px; }
.portal-audio-change-request-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.portal-audio-change-request-stages > div { display: grid; min-width: 0; gap: 3px; min-height: 72px; padding: 10px 11px; border: 1px solid #2a394b; border-radius: 12px; background: #121a26; }
.portal-audio-change-request-stages > div::before { display: block; width: 19px; height: 2px; border-radius: 2px; background: #52677b; content: ""; }
.portal-audio-change-request-stages > div[data-stage="draft"]::before { background: #8ff4e5; }
.portal-audio-change-request-stages > div[data-stage="estimate"]::before { background: #7dd3fc; }
.portal-audio-change-request-stages > div[data-stage="awaiting_confirmation"]::before { background: #f7c76c; }
.portal-audio-change-request-stages > div[data-stage="linked_operation_guarded"]::before { background: #9aa9b8; }
.portal-audio-change-request-stages strong { overflow-wrap: anywhere; color: #e7eff6; font-size: 11px; line-height: 1.35; }
.portal-audio-change-request-stages span { color: #aab8c7; font-size: 10px; line-height: 1.45; }
.portal-audio-change-request-form { padding: 13px; border: 1px solid rgba(42, 57, 75, .96); border-radius: 14px; background: rgba(10, 15, 23, .42); }
.portal-audio-change-request-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-audio-change-request-form .portal-form-footer { margin-top: 12px; }
.portal-audio-change-request-form .portal-button { min-height: 40px; }
.portal-audio-change-request-history { display: grid; gap: 9px; }
.portal-audio-change-request-history-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.portal-audio-change-request-history-heading span { color: #aab8c7; font-size: 11px; line-height: 1.45; }
.portal-audio-change-request-history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-audio-change-request-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(150px, .75fr) auto; gap: 12px; align-items: center; min-width: 0; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .96); border-radius: 13px; background: rgba(10, 15, 23, .52); }
.portal-audio-change-request-row-copy { display: grid; min-width: 0; gap: 3px; }
.portal-audio-change-request-row-copy strong { overflow-wrap: anywhere; color: #f8fafc; font-size: 12px; line-height: 1.4; }
.portal-audio-change-request-row-copy span, .portal-audio-change-request-row-copy small { overflow-wrap: anywhere; color: #aab8c7; font-size: 11px; line-height: 1.45; }
.portal-audio-change-request-row-copy small { color: #c6d3de; }
.portal-audio-change-request-row-status { display: grid; min-width: 0; gap: 5px; justify-items: start; }
.portal-audio-change-request-stage { display: inline-flex; min-height: 22px; align-items: center; padding: 3px 7px; border: 1px solid #43576a; border-radius: 999px; color: #dce7ef; font-size: 10px; font-weight: 760; line-height: 1.25; }
.portal-audio-change-request-stage[data-stage="draft"] { border-color: rgba(45, 212, 191, .38); color: #8ff4e5; }
.portal-audio-change-request-stage[data-stage="estimate"] { border-color: rgba(125, 211, 252, .38); color: #b9e5ff; }
.portal-audio-change-request-stage[data-stage="awaiting_confirmation"] { border-color: rgba(247, 199, 108, .38); color: #ffe0a3; }
.portal-audio-change-request-stage[data-stage="completed"] { border-color: rgba(45, 212, 191, .48); color: #9af6e9; }
.portal-audio-change-request-stage[data-stage="linked_operation_guarded"], .portal-audio-change-request-stage[data-stage="guarded"] { border-color: rgba(154, 169, 184, .38); color: #c8d3dd; }
.portal-audio-change-request-row-action { display: flex; min-width: 0; justify-content: flex-end; }
.portal-audio-change-request-action { margin: 0; }
.portal-audio-change-request-action .portal-button { min-height: 38px; white-space: nowrap; }
.portal-audio-change-request-next { max-width: 180px; color: #aab8c7; font-size: 11px; line-height: 1.45; text-align: right; }
.portal-audio-change-request-empty { display: grid; gap: 4px; min-height: 86px; align-content: center; padding: 13px; border: 1px dashed rgba(101, 127, 149, .62); border-radius: 13px; background: rgba(10, 15, 23, .34); }
.portal-audio-change-request-empty strong { color: #e2ebf2; font-size: 12px; }
.portal-audio-change-request-empty span { color: #aab8c7; font-size: 11px; line-height: 1.55; }

@media (max-width: 980px) {
  .portal-audio-hub-overview { grid-template-columns: 1fr; }
  .portal-audio-hub-next-grid, .portal-audio-hub-collection-lanes { grid-template-columns: 1fr; }
  .portal-audio-change-request-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-audio-change-request-row { grid-template-columns: minmax(0, 1fr) minmax(160px, .7fr); }
  .portal-audio-change-request-row-action { grid-column: 1 / -1; justify-content: flex-start; }
  .portal-audio-change-request-next { max-width: none; text-align: left; }
}
@media (max-width: 700px) {
  .portal-audio-hub-overview { padding: 20px; border-radius: 18px; }
  .portal-audio-hub-overview-copy h2 { font-size: 27px; }
  .portal-audio-hub-next-card { min-height: 92px; }
  /* Keep every Hub action and form field comfortably tappable on phone-sized
     screens. This is intentionally scoped to the new app-first projection;
     compact pagination elsewhere keeps its existing density. */
  .portal-audio-hub .portal-button,
  .portal-audio-hub-detail .portal-button,
  .portal-audio-hub .portal-input,
  .portal-audio-hub-detail .portal-input,
  .portal-audio-hub .portal-select,
  .portal-audio-hub-detail .portal-select { min-height: 44px; }
  .portal-audio-hub-collection-heading .portal-button { width: 100%; justify-content: center; }
  .portal-audio-hub-collection-board { padding: 14px; border-radius: 16px; }
  .portal-audio-change-requests { padding: 13px; border-radius: 14px; }
  .portal-audio-change-request-heading-actions { width: 100%; justify-content: stretch; }
  .portal-audio-change-request-heading-actions .portal-button { flex: 1 1 130px; min-height: 44px; }
  .portal-audio-change-request-stages, .portal-audio-change-request-form .portal-fields, .portal-audio-change-request-row { grid-template-columns: 1fr; }
  .portal-audio-change-request-row { gap: 9px; }
  .portal-audio-change-request-row-status { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .portal-audio-change-request-row-action, .portal-audio-change-request-action, .portal-audio-change-request-action .portal-button { width: 100%; }
  .portal-audio-change-request-action .portal-button { min-height: 44px; }
}

/* Video Production Studio: a deliberate production-planning workspace.
   It has a dense, calm editor treatment rather than a marketing hero or a
   faux media canvas: every card represents private plan/scene metadata only. */
.portal-video-studio, .portal-video-studio-detail { display: grid; gap: 18px; min-width: 0; }
.portal-video-studio-intro, .portal-video-studio-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(86, 180, 255, .24); border-radius: 22px; background: radial-gradient(circle at 89% 10%, rgba(55, 162, 249, .19), transparent 18rem), radial-gradient(circle at 13% 93%, rgba(123, 98, 255, .14), transparent 17rem), linear-gradient(145deg, rgba(18, 40, 70, .97), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-video-studio-intro h2, .portal-video-studio-detail-summary h2 { margin: 7px 0 8px; color: #eaf7ff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-video-studio-intro p, .portal-video-studio-detail-summary p { max-width: 770px; margin: 0; color: #b7cedd; line-height: 1.72; }
.portal-video-studio-intro dl, .portal-video-studio-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-video-studio-intro dl > div, .portal-video-studio-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(149, 213, 255, .16); border-radius: 15px; background: rgba(4, 19, 37, .48); }
.portal-video-studio-intro dt { color: #8fd8ff; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-video-studio-intro dd, .portal-video-studio-detail-summary dt { margin: 7px 0 0; color: #9fb7ca; font-size: 11px; line-height: 1.45; }
.portal-video-studio-detail-summary dt { margin: 0; color: #9eb5c8; font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .06em; }
.portal-video-studio-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #e5f5ff; font-size: 13px; font-weight: 760; }
.portal-video-studio-layout, .portal-video-studio-detail-grid, .portal-video-studio-history-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-video-studio-create, .portal-video-studio-editor, .portal-video-scene-create { background: linear-gradient(150deg, rgba(16, 38, 68, .95), rgba(7, 17, 31, .99)); }
.portal-video-studio-boundary, .portal-video-runtime-estimate, .portal-video-studio-activity { background: linear-gradient(150deg, rgba(19, 33, 61, .9), rgba(7, 17, 31, .99)); }
.portal-video-studio-boundary { display: grid; gap: 14px; }
.portal-video-studio-guard-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.portal-video-studio-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(112, 193, 255, .15); border-radius: 11px; background: rgba(4, 19, 36, .46); }
.portal-video-studio-guard-list strong { overflow: hidden; color: #d6efff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-video-studio-guard-list em { padding: 3px 6px; border: 1px solid rgba(115, 202, 255, .2); border-radius: 999px; background: rgba(74, 170, 239, .1); color: #a9e2ff; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-video-plan-grid, .portal-video-scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-video-plan-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 238px; border-color: rgba(89, 183, 255, .18); background: linear-gradient(150deg, rgba(13, 34, 61, .97), rgba(7, 17, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-video-plan-card:hover { border-color: rgba(115, 204, 255, .49); background: linear-gradient(150deg, rgba(21, 49, 81, .99), rgba(8, 19, 34, 1)); transform: translateY(-1px); }
.portal-video-plan-card .portal-card-header, .portal-video-scene-card .portal-card-header { align-items: flex-start; }
.portal-video-plan-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-video-plan-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-video-plan-meta, .portal-video-scene-meta, .portal-video-studio-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-video-plan-meta span, .portal-video-scene-meta span, .portal-video-studio-tags span { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(118, 205, 255, .18); border-radius: 999px; background: rgba(60, 164, 230, .09); color: #bfe9ff; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-video-studio-tags span { border-color: rgba(171, 157, 255, .21); background: rgba(133, 113, 243, .11); color: #d7d0ff; }
.portal-video-runtime-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 4px; }
.portal-video-runtime-grid > div { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid rgba(110, 192, 255, .15); border-radius: 13px; background: rgba(5, 19, 35, .45); }
.portal-video-runtime-grid small { color: #96aec2; font-size: 9px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.portal-video-runtime-grid strong { overflow-wrap: anywhere; color: #e6f7ff; font-size: 16px; letter-spacing: -.03em; }
.portal-video-scene-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(92, 185, 251, .17); border-radius: 17px; background: linear-gradient(145deg, rgba(13, 31, 55, .96), rgba(7, 17, 31, .99)); }
.portal-video-scene-card.is-archived { border-color: rgba(154, 173, 190, .19); background: linear-gradient(145deg, rgba(25, 33, 46, .92), rgba(7, 17, 31, .99)); }
.portal-video-scene-card .portal-card-subtitle { display: -webkit-box; min-height: 42px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-video-scene-form { padding-top: 13px; border-top: 1px solid rgba(113, 198, 255, .13); }
.portal-video-scene-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-video-scene-form .portal-field--wide { grid-column: 1 / -1; }
.portal-video-scene-history { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(113, 198, 255, .13); }
.portal-video-scene-history > strong { color: #dff4ff; font-size: 11px; }
.portal-video-scene-history > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(110, 193, 255, .08); color: #abc8d8; font-size: 10px; }
.portal-video-scene-history > div:first-of-type { border-top: 0; }
.portal-video-scene-history em { color: #a7e1ff; font-size: 10px; font-style: normal; font-weight: 750; }
.portal-video-version-list { display: grid; gap: 0; }
.portal-video-version-list > article { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(107, 198, 255, .11); }
.portal-video-version-list > article:first-child { border-top: 0; }
.portal-video-version-list > article > div { min-width: 0; }
.portal-video-version-list strong, .portal-video-version-list p, .portal-video-version-list small { display: block; }
.portal-video-version-list strong { color: #dff4ff; font-size: 12px; }
.portal-video-version-list p { max-width: 630px; margin: 4px 0 0; color: #afcbd9; font-size: 10px; line-height: 1.55; }
.portal-video-version-list small { margin-top: 4px; color: #91adbd; font-size: 9px; }
.portal-video-studio-events { display: grid; gap: 0; }
.portal-video-studio-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(110, 195, 255, .1); }
.portal-video-studio-events > div:first-child { border-top: 0; }
.portal-video-studio-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #75d6ff; box-shadow: 0 0 0 4px rgba(78, 181, 239, .1); color: transparent; }
.portal-video-studio-events strong, .portal-video-studio-events small { display: block; }
.portal-video-studio-events strong { color: #dff4ff; font-size: 11px; text-transform: capitalize; }
.portal-video-studio-events small { margin-top: 3px; color: #a8c5d4; font-size: 9px; }

/* Image Creative Studio: a private visual-direction workspace. The gradient
   and board treatment distinguishes editorial planning from the existing
   deterministic Resize/Enhance utilities, without ever implying a canvas,
   thumbnail, image generation or provider-backed preview. */
.portal-image-studio, .portal-image-studio-detail { display: grid; gap: 18px; min-width: 0; }
.portal-image-studio-intro, .portal-image-studio-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(243, 174, 99, .25); border-radius: 22px; background: radial-gradient(circle at 88% 11%, rgba(255, 162, 76, .2), transparent 18rem), radial-gradient(circle at 13% 93%, rgba(255, 95, 143, .12), transparent 17rem), linear-gradient(145deg, rgba(74, 38, 32, .97), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-image-studio-intro h2, .portal-image-studio-detail-summary h2 { margin: 7px 0 8px; color: #fff3e7; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-image-studio-intro p, .portal-image-studio-detail-summary p { max-width: 770px; margin: 0; color: #d9c1ae; line-height: 1.72; }
.portal-image-studio-intro dl, .portal-image-studio-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-image-studio-intro dl > div, .portal-image-studio-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(255, 209, 163, .16); border-radius: 15px; background: rgba(44, 22, 25, .48); }
.portal-image-studio-intro dt { color: #ffd09a; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-image-studio-intro dd, .portal-image-studio-detail-summary dt { margin: 7px 0 0; color: #c5a894; font-size: 11px; line-height: 1.45; }
.portal-image-studio-detail-summary dt { margin: 0; color: #c5a892; font-size: 9px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.portal-image-studio-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #fff0e1; font-size: 13px; font-weight: 760; }
.portal-image-studio-layout, .portal-image-studio-detail-grid, .portal-image-studio-history-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-image-studio-create, .portal-image-studio-editor, .portal-image-direction-create { background: linear-gradient(150deg, rgba(71, 36, 32, .95), rgba(7, 17, 31, .99)); }
.portal-image-studio-boundary, .portal-image-studio-estimate, .portal-image-studio-activity { background: linear-gradient(150deg, rgba(61, 33, 37, .91), rgba(7, 17, 31, .99)); }
.portal-image-studio-boundary { display: grid; gap: 14px; }
/* The Image Studio library can hold a long-lived set of private direction
   metadata. Keep filtering and reference discovery compact, legible and
   deliberately separate from generated-image or provider UI. */
.portal-image-studio-filter { display: grid; grid-template-columns: minmax(200px, 1.35fr) minmax(142px, .65fr); gap: 11px; align-items: end; margin-top: 14px; padding: 13px; border: 1px solid rgba(255, 188, 119, .16); border-radius: 15px; background: rgba(56, 29, 31, .49); }
.portal-image-studio-filter .portal-field { gap: 6px; }
.portal-image-studio-filter .portal-form-footer { grid-column: 1 / -1; margin-top: 0; padding-top: 1px; }
.portal-image-studio-pagination, .portal-image-reference-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255, 187, 119, .15); color: #efcbab; font-size: 10px; font-weight: 700; }
.portal-image-studio-pagination > div, .portal-image-reference-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-image-studio-pagination .portal-button, .portal-image-reference-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-image-reference-library { display: grid; gap: 13px; margin-top: 17px; padding-top: 16px; border-top: 1px solid rgba(255, 188, 119, .14); }
.portal-image-reference-library > header, .portal-image-reference-library > .portal-card-header { margin-bottom: 0; }
.portal-image-reference-library h3 { margin: 0; color: #ffead8; font-size: 13px; letter-spacing: -.01em; }
.portal-image-reference-library > p, .portal-image-reference-library > header p, .portal-image-reference-library > .portal-card-header p { margin: 4px 0 0; color: #d3b19b; font-size: 10px; line-height: 1.55; }
.portal-image-reference-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portal-image-reference-picker { display: grid; gap: 11px; min-width: 0; padding: 13px; border: 1px solid rgba(255, 190, 123, .16); border-radius: 14px; background: linear-gradient(145deg, rgba(55, 28, 31, .68), rgba(9, 18, 32, .72)); }
.portal-image-reference-picker > header, .portal-image-reference-picker > .portal-card-header { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 0; }
.portal-image-reference-picker h4, .portal-image-reference-picker legend, .portal-image-reference-picker > strong { padding: 0 3px; color: #ffe8d3; font-size: 11px; font-weight: 790; }
.portal-image-reference-picker h4 { margin: 0; }
.portal-image-reference-picker p { margin: 0; color: #c5a58f; font-size: 9px; line-height: 1.55; }
.portal-image-reference-picker .portal-form { gap: 10px; }
.portal-image-reference-picker .portal-fields { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.portal-image-reference-picker .portal-field { gap: 6px; }
.portal-image-reference-picker .portal-form-footer { margin-top: 0; padding-top: 1px; }
.portal-image-reference-list { display: grid; gap: 7px; max-height: 258px; margin: 1px 0 0; padding: 1px 3px 1px 1px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-color: rgba(255, 185, 117, .36) transparent; scrollbar-width: thin; }
.portal-image-reference-list::-webkit-scrollbar { width: 7px; }
.portal-image-reference-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(255, 185, 117, .32); background-clip: padding-box; }
.portal-image-reference-list > :is(li, article, a, button) { display: flex; min-width: 0; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 11px; border: 1px solid rgba(255, 192, 128, .13); border-radius: 11px; background: rgba(35, 19, 28, .54); color: inherit; text-align: left; text-decoration: none; }
.portal-image-reference-list > :is(a, button) { width: 100%; font: inherit; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-image-reference-list > :is(a, button):hover { border-color: rgba(255, 199, 142, .46); background: rgba(86, 42, 35, .66); transform: translateY(-1px); }
.portal-image-reference-list > :is(a, button):focus-visible { outline: 2px solid #ffd19e; outline-offset: 2px; }
.portal-image-reference-list > :is(li, article, a, button) > :first-child { min-width: 0; }
.portal-image-reference-list strong, .portal-image-reference-list b, .portal-image-reference-list small, .portal-image-reference-list em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-image-reference-list strong { color: #fff0e0; font-size: 11px; }
.portal-image-reference-list b { flex: 0 0 auto; color: #ffd09e; font-size: 8px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.portal-image-reference-list small { margin-top: 3px; color: #c8a892; font-size: 9px; }
.portal-image-reference-list em { flex: 0 0 auto; color: #f7c3a0; font-size: 9px; font-style: normal; }
.portal-image-reference-list > :is(li, article, a, button).is-unavailable, .portal-image-reference-list > :is(li, article, a, button)[data-availability="unavailable"] { border-color: rgba(193, 171, 158, .18); background: rgba(40, 34, 37, .53); }
.portal-image-reference-list > :is(li, article, a, button).is-unavailable strong, .portal-image-reference-list > :is(li, article, a, button)[data-availability="unavailable"] strong { color: #d6c4b7; }
.portal-image-studio-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-image-studio-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(255, 190, 123, .16); border-radius: 11px; background: rgba(46, 21, 27, .45); }
.portal-image-studio-guard-list strong { overflow: hidden; color: #ffe1c5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-image-studio-guard-list em { padding: 3px 6px; border: 1px solid rgba(255, 194, 128, .22); border-radius: 999px; background: rgba(255, 154, 77, .1); color: #ffd19e; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-image-artboard-grid, .portal-image-direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-image-artboard-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 238px; border-color: rgba(248, 176, 102, .19); background: linear-gradient(150deg, rgba(66, 34, 31, .97), rgba(7, 17, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-image-artboard-card:hover { border-color: rgba(255, 199, 142, .52); background: linear-gradient(150deg, rgba(86, 43, 34, .99), rgba(8, 19, 34, 1)); transform: translateY(-1px); }
.portal-image-artboard-card .portal-card-header, .portal-image-direction-card .portal-card-header { align-items: flex-start; }
.portal-image-artboard-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-image-artboard-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-image-artboard-meta, .portal-image-direction-meta, .portal-image-studio-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-image-artboard-meta span, .portal-image-direction-meta span, .portal-image-studio-tags span { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(255, 191, 123, .2); border-radius: 999px; background: rgba(244, 142, 68, .1); color: #ffddb8; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-image-studio-tags span { border-color: rgba(255, 146, 174, .21); background: rgba(238, 93, 136, .1); color: #ffd0df; }
.portal-image-studio-estimate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 4px; }
.portal-image-studio-estimate-grid span { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid rgba(255, 190, 123, .15); border-radius: 13px; background: rgba(45, 20, 25, .45); color: #d6b09b; font-size: 9px; font-weight: 730; text-transform: uppercase; letter-spacing: .05em; }
.portal-image-studio-estimate-grid strong { overflow-wrap: anywhere; color: #fff0e0; font-size: 16px; letter-spacing: -.03em; }
.portal-image-direction-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(248, 178, 103, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(64, 33, 30, .96), rgba(7, 17, 31, .99)); }
.portal-image-direction-card.is-archived { border-color: rgba(154, 173, 190, .19); background: linear-gradient(145deg, rgba(25, 33, 46, .92), rgba(7, 17, 31, .99)); }
.portal-image-direction-card .portal-card-subtitle { display: -webkit-box; min-height: 42px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-image-direction-meta span { max-width: min(100%, 360px); }
.portal-image-direction-form { padding-top: 13px; border-top: 1px solid rgba(255, 189, 121, .14); }
.portal-image-direction-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-image-direction-form .portal-field--wide { grid-column: 1 / -1; }
.portal-image-direction-history { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 189, 121, .14); }
.portal-image-direction-history > strong { color: #ffead4; font-size: 11px; }
.portal-image-direction-history > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255, 189, 121, .09); color: #d4b39d; font-size: 10px; }
.portal-image-direction-history > div:first-of-type { border-top: 0; }
.portal-image-direction-history em { color: #ffd19e; font-size: 10px; font-style: normal; font-weight: 750; }
.portal-image-version-list { display: grid; gap: 0; }
.portal-image-version-list > article { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255, 189, 121, .12); }
.portal-image-version-list > article:first-child { border-top: 0; }
.portal-image-version-list > article > div { min-width: 0; }
.portal-image-version-list strong, .portal-image-version-list p, .portal-image-version-list small { display: block; }
.portal-image-version-list strong { color: #ffead5; font-size: 12px; }
.portal-image-version-list p { max-width: 630px; margin: 4px 0 0; color: #d4b49f; font-size: 10px; line-height: 1.55; }
.portal-image-version-list small { margin-top: 4px; color: #b89a89; font-size: 9px; }
.portal-image-studio-events { display: grid; gap: 0; }
.portal-image-studio-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(255, 189, 121, .11); }
.portal-image-studio-events > div:first-child { border-top: 0; }
.portal-image-studio-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #ffbf7c; box-shadow: 0 0 0 4px rgba(247, 154, 75, .11); color: transparent; }
.portal-image-studio-events strong, .portal-image-studio-events small { display: block; }
.portal-image-studio-events strong { color: #fff0e0; font-size: 11px; text-transform: capitalize; }
.portal-image-studio-events small { margin-top: 3px; color: #cfad98; font-size: 9px; }

/* Document & PDF Workspace: a calm review board for briefs and plan metadata.
   This is deliberately not styled as a file preview, converter or output
   gallery; native deterministic PDF tools retain their own separate surface. */
.portal-document-workspace, .portal-document-workspace-detail { display: grid; gap: 18px; min-width: 0; }
.portal-document-workspace-intro, .portal-document-workspace-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(109, 219, 207, .23); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(68, 197, 182, .18), transparent 18rem), radial-gradient(circle at 13% 93%, rgba(101, 161, 255, .12), transparent 17rem), linear-gradient(145deg, rgba(13, 55, 62, .97), rgba(7, 18, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-document-workspace-intro h2, .portal-document-workspace-detail-summary h2 { margin: 7px 0 8px; color: #eafffb; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-document-workspace-intro p, .portal-document-workspace-detail-summary p { max-width: 770px; margin: 0; color: #b8d6d5; line-height: 1.72; }
.portal-document-workspace-intro dl, .portal-document-workspace-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-document-workspace-intro dl > div, .portal-document-workspace-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(155, 241, 226, .15); border-radius: 15px; background: rgba(5, 29, 38, .48); }
.portal-document-workspace-intro dt { color: #94f2e2; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-document-workspace-intro dd, .portal-document-workspace-detail-summary dt { margin: 7px 0 0; color: #9dbdbc; font-size: 11px; line-height: 1.45; }
.portal-document-workspace-detail-summary dt { margin: 0; color: #a4c5c4; font-size: 9px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.portal-document-workspace-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #e6fffa; font-size: 13px; font-weight: 760; }
.portal-document-workspace-layout, .portal-document-workspace-detail-grid, .portal-document-workspace-history-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-document-workspace-create, .portal-document-workspace-editor, .portal-document-plan-create { background: linear-gradient(150deg, rgba(12, 54, 61, .95), rgba(7, 17, 31, .99)); }
.portal-document-workspace-boundary, .portal-document-workspace-estimate, .portal-document-workspace-activity { background: linear-gradient(150deg, rgba(15, 44, 57, .91), rgba(7, 17, 31, .99)); }
.portal-document-workspace-boundary { display: grid; gap: 14px; }
.portal-document-workspace-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-document-workspace-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(139, 230, 215, .16); border-radius: 11px; background: rgba(6, 30, 41, .45); }
.portal-document-workspace-guard-list strong { overflow: hidden; color: #d7f5ef; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-document-workspace-guard-list em { padding: 3px 6px; border: 1px solid rgba(143, 239, 222, .22); border-radius: 999px; background: rgba(74, 195, 179, .1); color: #a8f5e6; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-document-workspace-grid, .portal-document-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-document-workspace-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 238px; border-color: rgba(121, 223, 208, .19); background: linear-gradient(150deg, rgba(10, 49, 59, .97), rgba(7, 17, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-document-workspace-card:hover { border-color: rgba(154, 246, 231, .52); background: linear-gradient(150deg, rgba(14, 65, 72, .99), rgba(8, 19, 34, 1)); transform: translateY(-1px); }
.portal-document-workspace-card .portal-card-header, .portal-document-plan-card .portal-card-header { align-items: flex-start; }
.portal-document-workspace-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-document-workspace-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-document-workspace-meta, .portal-document-plan-meta, .portal-document-workspace-tags, .portal-document-workspace-tool-links { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-document-workspace-meta span, .portal-document-plan-meta span, .portal-document-workspace-tags span { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(142, 232, 216, .2); border-radius: 999px; background: rgba(67, 188, 173, .1); color: #bcefe7; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-document-workspace-tags span { border-color: rgba(142, 187, 255, .21); background: rgba(91, 138, 235, .1); color: #cbdcff; }
.portal-document-workspace-tool-links { margin-top: 15px; }
.portal-document-workspace-estimate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 4px; }
.portal-document-workspace-estimate-grid span { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid rgba(141, 231, 216, .15); border-radius: 13px; background: rgba(6, 31, 42, .45); color: #a9cbc8; font-size: 9px; font-weight: 730; letter-spacing: .05em; text-transform: uppercase; }
.portal-document-workspace-estimate-grid strong { overflow-wrap: anywhere; color: #e8fffb; font-size: 16px; letter-spacing: -.03em; }
.portal-document-plan-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(124, 221, 206, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(10, 48, 58, .96), rgba(7, 17, 31, .99)); }
.portal-document-plan-card.is-archived { border-color: rgba(154, 173, 190, .19); background: linear-gradient(145deg, rgba(25, 33, 46, .92), rgba(7, 17, 31, .99)); }
.portal-document-plan-card .portal-card-subtitle { display: -webkit-box; min-height: 42px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-document-plan-meta span { max-width: min(100%, 360px); }
.portal-document-plan-handoff { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 13px; border: 1px solid rgba(126, 223, 209, .18); border-radius: 14px; background: linear-gradient(135deg, rgba(16, 68, 72, .54), rgba(8, 26, 39, .62)); }
.portal-document-plan-handoff.is-guarded, .portal-document-plan-handoff.is-guidance { border-color: rgba(174, 186, 205, .18); background: linear-gradient(135deg, rgba(31, 43, 57, .56), rgba(9, 21, 34, .68)); }
.portal-document-plan-handoff h4 { margin: 4px 0 5px; color: #e9fffb; font-size: 12px; letter-spacing: -.012em; }
.portal-document-plan-handoff p { margin: 0; color: #a8c8c6; font-size: 10px; line-height: 1.55; }
.portal-document-plan-handoff small { display: block; max-width: 670px; margin-top: 8px; color: #87aaa7; font-size: 9px; line-height: 1.48; }
.portal-document-plan-handoff-action { display: grid; gap: 8px; justify-items: end; min-width: 146px; }
.portal-document-plan-handoff-action .portal-button { white-space: nowrap; }
.portal-document-plan-form { padding-top: 13px; border-top: 1px solid rgba(140, 229, 215, .14); }
.portal-document-plan-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-document-plan-form .portal-field--wide { grid-column: 1 / -1; }
.portal-document-plan-version-list { display: grid; gap: 0; padding-top: 12px; border-top: 1px solid rgba(140, 229, 215, .12); }
.portal-document-plan-version-list > article { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(140, 229, 215, .09); }
.portal-document-plan-version-list > article:first-child { border-top: 0; }
.portal-document-plan-version-list strong, .portal-document-plan-version-list small { display: block; }
.portal-document-plan-version-list strong { color: #e1fffa; font-size: 10px; }
.portal-document-plan-version-list small { max-width: 440px; margin-top: 3px; overflow-wrap: anywhere; color: #9bbcb9; font-size: 9px; line-height: 1.45; }
.portal-document-version-list { display: grid; gap: 0; }
.portal-document-version-list > article { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(140, 229, 215, .12); }
.portal-document-version-list > article:first-child { border-top: 0; }
.portal-document-version-list > article > div { min-width: 0; }
.portal-document-version-list strong, .portal-document-version-list p, .portal-document-version-list small { display: block; }
.portal-document-version-list strong { color: #e9fffb; font-size: 12px; }
.portal-document-version-list p { max-width: 630px; margin: 4px 0 0; color: #b6d3d1; font-size: 10px; line-height: 1.55; }
.portal-document-version-list small { margin-top: 4px; color: #90aaa9; font-size: 9px; }
.portal-document-workspace-events { display: grid; gap: 0; }
.portal-document-workspace-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(140, 229, 215, .11); }
.portal-document-workspace-events > div:first-child { border-top: 0; }
.portal-document-workspace-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #8eeede; box-shadow: 0 0 0 4px rgba(76, 194, 178, .11); color: transparent; }
.portal-document-workspace-events strong, .portal-document-workspace-events small { display: block; }
.portal-document-workspace-events strong { color: #e6fffa; font-size: 11px; text-transform: capitalize; }
.portal-document-workspace-events small { margin-top: 3px; color: #aac8c5; font-size: 9px; }

/* AI Chat Workspace: private Web-native conversation authoring, never an
   assistant transcript or provider console. */
.portal-chat-workspace, .portal-chat-workspace-detail { display: grid; gap: 18px; min-width: 0; }
.portal-chat-workspace-intro, .portal-chat-thread-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(115, 166, 255, .24); border-radius: 22px; background: radial-gradient(circle at 89% 12%, rgba(108, 119, 255, .18), transparent 18rem), radial-gradient(circle at 12% 94%, rgba(72, 211, 197, .11), transparent 18rem), linear-gradient(145deg, rgba(18, 30, 69, .98), rgba(7, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-chat-workspace-intro h2, .portal-chat-thread-summary h2 { margin: 7px 0 8px; color: #f0f4ff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-chat-workspace-intro p, .portal-chat-thread-summary p { max-width: 770px; margin: 0; color: #c1cbef; line-height: 1.72; }
.portal-chat-workspace-intro dl, .portal-chat-thread-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-chat-workspace-intro dl > div, .portal-chat-thread-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(159, 183, 255, .16); border-radius: 15px; background: rgba(9, 18, 51, .5); }
.portal-chat-workspace-intro dt { color: #aec4ff; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-chat-workspace-intro dd, .portal-chat-thread-summary dt { margin: 7px 0 0; color: #aab6da; font-size: 11px; line-height: 1.45; }
.portal-chat-thread-summary dt { margin: 0; color: #b1bddf; font-size: 9px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.portal-chat-thread-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #edf2ff; font-size: 13px; font-weight: 760; }
.portal-chat-workspace-layout, .portal-chat-workspace-detail-grid, .portal-chat-workspace-history { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-chat-workspace-create, .portal-chat-workspace-detail .portal-card:first-child { background: linear-gradient(150deg, rgba(22, 39, 84, .97), rgba(7, 17, 31, .99)); }
.portal-chat-workspace-boundary { display: grid; gap: 14px; background: linear-gradient(150deg, rgba(19, 33, 68, .94), rgba(7, 17, 31, .99)); }
.portal-chat-workspace-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-chat-workspace-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(151, 175, 255, .17); border-radius: 11px; background: rgba(12, 23, 58, .5); }
.portal-chat-workspace-guard-list strong { overflow: hidden; color: #dde7ff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-chat-workspace-guard-list em { padding: 3px 6px; border: 1px solid rgba(166, 184, 255, .23); border-radius: 999px; background: rgba(114, 134, 255, .12); color: #cbd8ff; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-chat-workspace-grid, .portal-chat-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-chat-thread-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 244px; border-color: rgba(133, 161, 255, .22); background: linear-gradient(150deg, rgba(18, 34, 75, .98), rgba(7, 17, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-chat-thread-card:hover { border-color: rgba(181, 196, 255, .58); background: linear-gradient(150deg, rgba(25, 46, 96, 1), rgba(8, 19, 34, 1)); transform: translateY(-1px); }
.portal-chat-thread-card .portal-card-header { align-items: flex-start; }
.portal-chat-thread-card .portal-card-subtitle { display: -webkit-box; min-height: 50px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-chat-thread-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-chat-workspace-meta, .portal-chat-workspace-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-chat-workspace-meta span, .portal-chat-workspace-tags span { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(152, 176, 255, .22); border-radius: 999px; background: rgba(103, 124, 238, .12); color: #cfdbff; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-chat-workspace-tags span { border-color: rgba(101, 225, 207, .18); background: rgba(67, 191, 176, .1); color: #baf1e8; }
.portal-chat-workspace-filters { margin: 16px 0 2px; padding: 15px; border: 1px solid rgba(142, 169, 255, .16); border-radius: 15px; background: rgba(11, 25, 57, .48); }
.portal-chat-workspace-filters .portal-fields { grid-template-columns: minmax(172px, .52fr) minmax(230px, 1.48fr); }
.portal-chat-workspace-pagination { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 17px; padding-top: 16px; border-top: 1px solid rgba(145, 171, 255, .14); color: #b9c7ed; font-size: 11px; font-weight: 710; }
.portal-chat-workspace-pagination .portal-inline-actions { flex: 0 0 auto; }
.portal-chat-context-card { display: grid; gap: 11px; min-width: 0; padding: 17px; border: 1px solid rgba(140, 166, 255, .2); border-radius: 16px; background: rgba(10, 23, 53, .55); }
.portal-chat-context-card.is-archived, .portal-chat-turn.is-archived { opacity: .72; }
.portal-chat-context-card > p, .portal-chat-turn p { margin: 0; color: #c4cef0; font-size: 12px; line-height: 1.64; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-chat-context-edit { display: grid; gap: 8px; padding-top: 3px; }
.portal-chat-context-edit .portal-textarea { min-height: 112px; }
.portal-chat-turn-list, .portal-chat-version-list, .portal-chat-event-list { display: grid; gap: 9px; }
.portal-chat-turn, .portal-chat-version-list > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 14px; border: 1px solid rgba(143, 169, 255, .17); border-radius: 14px; background: rgba(10, 21, 48, .48); }
.portal-chat-turn small, .portal-chat-version-list small, .portal-chat-event-list small { display: block; margin-top: 4px; color: #aab8de; font-size: 9px; }
.portal-chat-execution { display: grid; gap: 16px; overflow: hidden; border-color: rgba(101, 225, 207, .28); background: radial-gradient(circle at 90% 6%, rgba(60, 199, 186, .13), transparent 16rem), linear-gradient(145deg, rgba(12, 42, 57, .96), rgba(7, 17, 31, .99)); }
.portal-chat-execution-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.portal-chat-execution-status > span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 9px; padding: 11px 12px; border: 1px solid rgba(114, 223, 209, .2); border-radius: 12px; background: rgba(8, 34, 48, .52); }
.portal-chat-execution-status strong { overflow: hidden; color: #ddf9f4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-chat-execution-status em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(126, 233, 219, .25); border-radius: 999px; background: rgba(51, 203, 184, .13); color: #c1f7ed; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.portal-chat-execution-status em:not(:empty) { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-chat-execution-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, 1.1fr); gap: 16px; align-items: start; }
.portal-chat-execution-layout > section { min-width: 0; padding: 15px; border: 1px solid rgba(126, 233, 219, .16); border-radius: 15px; background: rgba(5, 23, 36, .38); }
.portal-chat-execution-layout > section > .portal-card-header { margin-bottom: 12px; }
.portal-chat-execution-heading { margin: 0 0 10px; color: #e8fffb; font-size: 13px; letter-spacing: -.015em; }
.portal-chat-run-composer .portal-fields { grid-template-columns: 1fr; }
.portal-chat-run-composer .portal-textarea { min-height: 145px; }
.portal-chat-run-timeline { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.portal-chat-run-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px; border: 1px solid rgba(115, 224, 211, .18); border-radius: 13px; background: linear-gradient(145deg, rgba(13, 49, 62, .66), rgba(7, 24, 38, .56)); }
.portal-chat-run-card h3 { margin: 3px 0 4px; color: #e4fffa; font-size: 12px; }
.portal-chat-run-card p { margin: 0; color: #bfdfdb; font-size: 11px; line-height: 1.6; }
.portal-chat-run-card small { display: block; margin-top: 7px; color: #94c8c1; font-size: 9px; }
.portal-chat-version-list strong, .portal-chat-event-list strong { color: #eaf0ff; font-size: 11px; }
.portal-chat-version-list p { margin: 4px 0 0; color: #becaf0; font-size: 10px; }
.portal-chat-event-list > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(143, 169, 255, .12); }
.portal-chat-event-list > div:first-child { border-top: 0; }
.portal-chat-event-list > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #a7bbff; box-shadow: 0 0 0 4px rgba(121, 145, 251, .12); color: transparent; }

/* Subtitle & Transcript Workspace: calm editorial tooling, not a faux media
   player.  Accent colors distinguish timing/text work while the layout keeps
   long cue text legible on desktop and small screens. */
.portal-subtitle-studio, .portal-subtitle-studio-detail { display: grid; gap: 18px; min-width: 0; }
.portal-subtitle-studio-intro, .portal-subtitle-studio-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(190, 143, 255, .25); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(175, 101, 255, .2), transparent 18rem), radial-gradient(circle at 13% 94%, rgba(94, 154, 255, .14), transparent 17rem), linear-gradient(145deg, rgba(43, 29, 75, .97), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-subtitle-studio-intro h2, .portal-subtitle-studio-detail-summary h2 { margin: 7px 0 8px; color: #f5edff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-subtitle-studio-intro p, .portal-subtitle-studio-detail-summary p { max-width: 770px; margin: 0; color: #c8badf; line-height: 1.72; }
.portal-subtitle-studio-intro dl, .portal-subtitle-studio-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-subtitle-studio-intro dl > div, .portal-subtitle-studio-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(216, 183, 255, .15); border-radius: 15px; background: rgba(20, 13, 42, .48); }
.portal-subtitle-studio-intro dt { color: #d9b8ff; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-subtitle-studio-intro dd, .portal-subtitle-studio-detail-summary dt { margin: 7px 0 0; color: #ae9cbe; font-size: 11px; line-height: 1.45; }
.portal-subtitle-studio-detail-summary dt { margin: 0; color: #b2a1c2; font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .06em; }
.portal-subtitle-studio-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #f1e8ff; font-size: 13px; font-weight: 760; }
.portal-subtitle-studio-layout, .portal-subtitle-studio-detail-grid, .portal-subtitle-studio-history-grid, .portal-subtitle-preview-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-subtitle-studio-create, .portal-subtitle-studio-editor, .portal-subtitle-cue-create { background: linear-gradient(150deg, rgba(43, 29, 76, .95), rgba(7, 17, 31, .99)); }
.portal-subtitle-studio-boundary, .portal-subtitle-runtime-estimate, .portal-subtitle-studio-activity, .portal-subtitle-text-preview { background: linear-gradient(150deg, rgba(35, 27, 66, .91), rgba(7, 17, 31, .99)); }
.portal-subtitle-language-source { display: grid; gap: 13px; border-color: rgba(81, 210, 192, .25); background: linear-gradient(145deg, rgba(13, 54, 60, .9), rgba(7, 17, 31, .99)); }
.portal-subtitle-language-source.is-guarded { border-color: rgba(237, 177, 91, .34); background: linear-gradient(145deg, rgba(63, 46, 20, .86), rgba(25, 20, 14, .99)); }
.portal-subtitle-language-source-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.portal-subtitle-language-source-facts span { display: grid; gap: 4px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(122, 223, 207, .16); border-radius: 12px; background: rgba(6, 28, 35, .44); color: #b8d9d8; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.portal-subtitle-language-source-facts strong { color: #f1fbfa; font-size: 10px; font-weight: 780; letter-spacing: .035em; text-transform: uppercase; }
.portal-subtitle-language-source-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid rgba(81, 210, 192, .24); border-radius: 12px; background: rgba(8, 37, 43, .48); color: #c5e6e3; font-size: 12px; line-height: 1.45; }
.portal-subtitle-language-source-pager > span { min-width: 0; overflow-wrap: anywhere; }
.portal-subtitle-language-source-pager .portal-button { min-height: 44px; flex: 0 0 auto; }
.portal-subtitle-language-source-pager.is-capped { border-color: rgba(237, 177, 91, .32); background: rgba(73, 51, 22, .4); color: #f7dfad; }
.portal-subtitle-studio-boundary { display: grid; gap: 14px; }
.portal-subtitle-studio-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-subtitle-studio-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(207, 170, 255, .16); border-radius: 11px; background: rgba(22, 15, 44, .45); }
.portal-subtitle-studio-guard-list strong { overflow: hidden; color: #f0e4ff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-subtitle-studio-guard-list em { padding: 3px 6px; border: 1px solid rgba(206, 165, 255, .22); border-radius: 999px; background: rgba(172, 109, 242, .1); color: #e2c7ff; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-subtitle-project-grid, .portal-subtitle-cue-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-subtitle-project-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 238px; border-color: rgba(192, 145, 255, .19); background: linear-gradient(150deg, rgba(38, 27, 67, .97), rgba(7, 17, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-subtitle-project-card:hover { border-color: rgba(216, 177, 255, .52); background: linear-gradient(150deg, rgba(53, 36, 89, .99), rgba(8, 19, 34, 1)); transform: translateY(-1px); }
.portal-subtitle-project-card .portal-card-header, .portal-subtitle-cue-card .portal-card-header { align-items: flex-start; }
.portal-subtitle-project-card .portal-card-subtitle { display: -webkit-box; min-height: 49px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-subtitle-project-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-subtitle-project-meta, .portal-subtitle-cue-meta, .portal-subtitle-studio-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-subtitle-project-meta span, .portal-subtitle-cue-meta span, .portal-subtitle-studio-tags span { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(208, 173, 255, .2); border-radius: 999px; background: rgba(169, 110, 235, .1); color: #e6d0ff; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-subtitle-studio-tags span { border-color: rgba(123, 190, 255, .21); background: rgba(85, 153, 245, .1); color: #cce4ff; }
.portal-subtitle-estimate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 4px; }
.portal-subtitle-estimate-grid span { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid rgba(207, 172, 255, .15); border-radius: 13px; background: rgba(17, 13, 38, .45); color: #af9dbf; font-size: 9px; font-weight: 730; text-transform: uppercase; letter-spacing: .05em; }
.portal-subtitle-estimate-grid strong { overflow-wrap: anywhere; color: #f3ebff; font-size: 16px; letter-spacing: -.03em; }
.portal-subtitle-readonly-stack { display: grid; gap: 18px; min-width: 0; }
.portal-subtitle-quality { display: grid; gap: 15px; min-width: 0; border-color: rgba(66, 220, 206, .25); background: linear-gradient(150deg, rgba(12, 67, 73, .92), rgba(7, 17, 31, .99)); }
.portal-subtitle-quality.is-guarded { border-color: rgba(237, 177, 91, .34); background: linear-gradient(150deg, rgba(63, 46, 20, .86), rgba(25, 20, 14, .99)); }
.portal-subtitle-quality.is-archived { border-color: rgba(154, 173, 190, .28); background: linear-gradient(150deg, rgba(25, 33, 46, .92), rgba(7, 17, 31, .99)); }
.portal-subtitle-quality-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.portal-subtitle-quality-summary span { display: grid; gap: 4px; min-width: 0; padding: 12px; border: 1px solid rgba(116, 229, 216, .2); border-radius: 13px; background: rgba(8, 37, 47, .52); color: #a9d4d0; font-size: 9px; font-weight: 730; letter-spacing: .05em; text-transform: uppercase; }
.portal-subtitle-quality-summary strong { overflow-wrap: anywhere; color: #edfffc; font-size: 16px; letter-spacing: -.03em; text-transform: none; }
.portal-subtitle-quality-grid { display: grid; gap: 10px; }
.portal-subtitle-quality-track { display: grid; gap: 11px; min-width: 0; padding: 13px; border: 1px solid rgba(118, 229, 216, .16); border-radius: 14px; background: rgba(7, 29, 40, .52); }
.portal-subtitle-quality-track.is-unavailable { opacity: .76; }
.portal-subtitle-quality-track-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-subtitle-quality-track-heading strong { color: #eafffb; font-size: 13px; }
.portal-subtitle-quality-track-heading span { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border: 1px solid rgba(120, 232, 218, .18); border-radius: 999px; color: #8be5da; font-size: 9px; font-weight: 760; white-space: nowrap; }
.portal-subtitle-quality-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.portal-subtitle-quality-metrics > div { display: grid; gap: 4px; min-width: 0; padding: 9px; border: 1px solid rgba(118, 229, 216, .12); border-radius: 11px; background: rgba(5, 22, 31, .38); }
.portal-subtitle-quality-metrics dt { color: #9fc5c2; font-size: 9px; font-weight: 680; line-height: 1.35; }
.portal-subtitle-quality-metrics dd { margin: 0; overflow-wrap: anywhere; color: #effffd; font-size: 13px; font-weight: 780; letter-spacing: -.02em; }
.portal-subtitle-quality-review { display: grid; gap: 8px; padding-top: 3px; }
.portal-subtitle-quality-review > strong { color: #dffef9; font-size: 12px; }
.portal-subtitle-quality-reasons { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.portal-subtitle-quality-reasons li, .portal-subtitle-quality-clear { margin: 0; color: #bbd9d5; font-size: 12px; line-height: 1.55; }
.portal-subtitle-quality-reasons li { display: flex; gap: 8px; align-items: flex-start; }
.portal-subtitle-quality-reasons li::before { width: 7px; height: 7px; flex: 0 0 auto; margin-top: .5em; border-radius: 999px; background: #65dfd0; content: ""; }
.portal-subtitle-cue-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(195, 148, 255, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(36, 25, 64, .96), rgba(7, 17, 31, .99)); }
.portal-subtitle-cue-card.is-archived { border-color: rgba(154, 173, 190, .19); background: linear-gradient(145deg, rgba(25, 33, 46, .92), rgba(7, 17, 31, .99)); }
.portal-subtitle-cue-card .portal-card-subtitle { display: -webkit-box; min-height: 42px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-subtitle-cue-translation { margin: 8px 0 0; color: #d9c3ff; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-subtitle-cue-meta span:last-child { max-width: min(100%, 360px); }
.portal-subtitle-cue-form { padding-top: 13px; border-top: 1px solid rgba(207, 172, 255, .14); }
.portal-subtitle-cue-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-subtitle-cue-form .portal-field--wide { grid-column: 1 / -1; }
.portal-subtitle-cue-history { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(207, 172, 255, .14); }
.portal-subtitle-cue-history > strong { color: #f0e6ff; font-size: 11px; }
.portal-subtitle-cue-history > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(207, 172, 255, .09); color: #c4b0d5; font-size: 10px; }
.portal-subtitle-cue-history > div:first-of-type { border-top: 0; }
.portal-subtitle-cue-history em { color: #dfc5ff; font-size: 10px; font-style: normal; font-weight: 750; }
.portal-subtitle-version-list { display: grid; gap: 0; }
.portal-subtitle-version-list > article { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(207, 172, 255, .12); }
.portal-subtitle-version-list > article:first-child { border-top: 0; }
.portal-subtitle-version-list > article > div { min-width: 0; }
.portal-subtitle-version-list strong, .portal-subtitle-version-list p, .portal-subtitle-version-list small { display: block; }
.portal-subtitle-version-list strong { color: #f0e6ff; font-size: 12px; }
.portal-subtitle-version-list p { max-width: 630px; margin: 4px 0 0; color: #c4b2d5; font-size: 10px; line-height: 1.55; }
.portal-subtitle-version-list small { margin-top: 4px; color: #a391b5; font-size: 9px; }
.portal-subtitle-studio-events { display: grid; gap: 0; }
.portal-subtitle-studio-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(207, 172, 255, .11); }
.portal-subtitle-studio-events > div:first-child { border-top: 0; }
.portal-subtitle-studio-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #d2a3ff; box-shadow: 0 0 0 4px rgba(178, 116, 243, .11); color: transparent; }
.portal-subtitle-studio-events strong, .portal-subtitle-studio-events small { display: block; }
.portal-subtitle-studio-events strong { color: #f0e6ff; font-size: 11px; text-transform: capitalize; }
.portal-subtitle-studio-events small { margin-top: 3px; color: #bcabc9; font-size: 9px; }
.portal-subtitle-preview-text { max-height: 410px; margin: 0; padding: 16px; overflow: auto; border: 1px solid rgba(203, 167, 255, .16); border-radius: 14px; background: rgba(5, 12, 26, .6); color: #ece5ff; font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-subtitle-format-lab { display: grid; gap: 18px; min-width: 0; }
.portal-subtitle-format-lab-intro { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(190, 143, 255, .25); border-radius: 22px; background: radial-gradient(circle at 88% 12%, rgba(175, 101, 255, .2), transparent 18rem), radial-gradient(circle at 13% 94%, rgba(94, 154, 255, .14), transparent 17rem), linear-gradient(145deg, rgba(43, 29, 75, .97), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-subtitle-format-lab-intro h2 { margin: 7px 0 8px; color: #f5edff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-subtitle-format-lab-intro p { max-width: 770px; margin: 0; color: #c8badf; line-height: 1.72; }
.portal-subtitle-format-lab-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-subtitle-format-lab-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(216, 183, 255, .15); border-radius: 15px; background: rgba(20, 13, 42, .48); }
.portal-subtitle-format-lab-intro dt { color: #d9b8ff; font-size: 20px; font-weight: 840; letter-spacing: -.045em; }
.portal-subtitle-format-lab-intro dd { margin: 7px 0 0; color: #ae9cbe; font-size: 10px; line-height: 1.45; }
.portal-subtitle-format-lab-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-subtitle-format-form { background: linear-gradient(150deg, rgba(43, 29, 76, .95), rgba(7, 17, 31, .99)); }
.portal-subtitle-format-boundary, .portal-subtitle-format-result { background: linear-gradient(150deg, rgba(35, 27, 66, .91), rgba(7, 17, 31, .99)); }
.portal-subtitle-format-output { width: 100%; min-height: 260px; max-height: 510px; margin: 1px 0 0; padding: 16px; resize: vertical; border: 1px solid rgba(203, 167, 255, .16); border-radius: 14px; outline: none; background: rgba(5, 12, 26, .6); color: #ece5ff; font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-wrap: normal; }
.portal-subtitle-format-output:focus { border-color: rgba(213, 176, 255, .58); box-shadow: 0 0 0 3px rgba(175, 101, 255, .12); }

/* Subtitle Asset Operations is a private, Web-native file boundary. Keep its
   visual language app-first and teal/dark-slate so it is distinct from the
   text-only SRT/VTT Lab and does not imply a Bot/provider workflow. */
.portal-subtitle-asset-operations { display: grid; gap: 18px; min-width: 0; }
.portal-subtitle-assets-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(45, 212, 191, .28); border-radius: 22px; background: radial-gradient(circle at 88% 10%, rgba(45, 212, 191, .17), transparent 18rem), linear-gradient(145deg, #121a26, #0a0f17); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-subtitle-assets-intro h2 { margin: 7px 0 8px; color: #f8fafc; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-subtitle-assets-intro p { max-width: 770px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-subtitle-assets-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-subtitle-assets-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(45, 212, 191, .16); border-radius: 15px; background: rgba(10, 15, 23, .66); }
.portal-subtitle-assets-intro dt { color: #8ff5e7; font-size: 19px; font-weight: 820; letter-spacing: -.035em; }
.portal-subtitle-assets-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.45; }
.portal-subtitle-assets-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-subtitle-assets-form { background: linear-gradient(150deg, rgba(18, 34, 38, .96), rgba(10, 15, 23, .99)); }
.portal-subtitle-assets-boundary, .portal-subtitle-assets-history { background: linear-gradient(150deg, rgba(18, 26, 38, .96), rgba(10, 15, 23, .99)); }
.portal-subtitle-assets-guard-list { display: grid; gap: 9px; margin-top: 14px; }
.portal-subtitle-assets-guard-list > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .9); border-radius: 12px; background: rgba(10, 15, 23, .58); }
.portal-subtitle-assets-guard-list strong { color: #dce6ef; font-size: 12px; }
.portal-subtitle-assets-guard-list em { color: #aab8c7; font-size: 12px; font-style: normal; text-transform: uppercase; letter-spacing: .07em; }
.portal-subtitle-assets-source-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(45, 212, 191, .18); color: #aab8c7; font-size: 12px; font-weight: 700; }
.portal-subtitle-assets-source-pager .portal-button { min-height: 44px; padding-inline: 12px; }
.portal-subtitle-assets-form [data-subtitle-asset-target-field].is-muted { opacity: .68; }
.portal-subtitle-asset-operation-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-subtitle-asset-operation-list > li { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 14px; background: rgba(10, 15, 23, .58); }
.portal-subtitle-asset-operation-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-subtitle-asset-operation-meta > div { min-width: 0; display: grid; gap: 4px; }
.portal-subtitle-asset-operation-meta strong { color: #f8fafc; font-size: 13px; }
.portal-subtitle-asset-operation-meta span { color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-subtitle-asset-operation-meta small { color: #74e3d4; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.portal-subtitle-asset-operation-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aab8c7; font-size: 12px; }
.portal-subtitle-asset-operation-actions .portal-button { min-height: 44px; }
.portal-subtitle-asset-empty { display: grid; gap: 6px; min-height: 118px; padding: 18px; border: 1px dashed rgba(45, 212, 191, .3); border-radius: 14px; background: rgba(10, 15, 23, .45); }
.portal-subtitle-asset-empty strong { color: #dffdf8; font-size: 13px; }
.portal-subtitle-asset-empty span { color: #aab8c7; font-size: 12px; line-height: 1.6; }

/* Audio Asset Operations is deliberately an app-native, private utility —
   distinct from Audio Library authoring and from Bot/provider media flows. */
.portal-audio-asset-operations { display: grid; gap: 18px; min-width: 0; }
.portal-audio-assets-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(45, 212, 191, .3); border-radius: 22px; background: radial-gradient(circle at 87% 13%, rgba(45, 212, 191, .18), transparent 18rem), radial-gradient(circle at 13% 90%, rgba(56, 189, 248, .1), transparent 16rem), linear-gradient(145deg, #121a26, #0a0f17); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-audio-assets-intro h2 { max-width: 760px; margin: 7px 0 8px; color: #f8fafc; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-audio-assets-intro p { max-width: 770px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-audio-assets-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-audio-assets-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(45, 212, 191, .17); border-radius: 15px; background: rgba(10, 15, 23, .68); }
.portal-audio-assets-intro dt { color: #8ff5e7; font-size: 19px; font-weight: 820; letter-spacing: -.035em; }
.portal-audio-assets-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.45; }
.portal-audio-assets-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-audio-assets-form { background: linear-gradient(150deg, rgba(18, 35, 40, .97), rgba(10, 15, 23, .99)); }
.portal-audio-assets-boundary, .portal-audio-assets-history { background: linear-gradient(150deg, rgba(18, 26, 38, .97), rgba(10, 15, 23, .99)); }
.portal-audio-assets-guard-list { display: grid; gap: 9px; margin-top: 14px; }
.portal-audio-assets-guard-list > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 12px; background: rgba(10, 15, 23, .6); }
.portal-audio-assets-guard-list strong { color: #dce6ef; font-size: 12px; }
.portal-audio-assets-guard-list em { color: #aab8c7; font-size: 12px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.portal-audio-assets-source-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(45, 212, 191, .18); color: #aab8c7; font-size: 12px; font-weight: 700; }
.portal-audio-assets-source-pager .portal-button, .portal-audio-asset-operation-actions .portal-button { min-height: 44px; padding-inline: 12px; }
.portal-audio-asset-operation-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-audio-asset-operation-list > li { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 14px; background: rgba(10, 15, 23, .59); }
.portal-audio-asset-operation-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-audio-asset-operation-meta > div { min-width: 0; display: grid; gap: 4px; }
.portal-audio-asset-operation-meta strong { color: #f8fafc; font-size: 13px; }
.portal-audio-asset-operation-meta span { color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-audio-asset-operation-meta small { color: #74e3d4; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.portal-audio-asset-operation-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aab8c7; font-size: 12px; }
.portal-audio-asset-empty { display: grid; gap: 6px; min-height: 118px; padding: 18px; border: 1px dashed rgba(45, 212, 191, .31); border-radius: 14px; background: rgba(10, 15, 23, .46); }
.portal-audio-asset-empty strong { color: #dffdf8; font-size: 13px; }
.portal-audio-asset-empty span { color: #aab8c7; font-size: 12px; line-height: 1.6; }
@media (max-width: 900px) {
  .portal-audio-assets-intro, .portal-audio-assets-layout { grid-template-columns: 1fr; }
  .portal-audio-assets-intro { padding: 20px; border-radius: 18px; }
  .portal-audio-assets-intro dl { grid-template-columns: 1fr; }
  .portal-audio-asset-operation-meta, .portal-audio-asset-operation-actions, .portal-audio-assets-source-pager { align-items: flex-start; flex-direction: column; }
}

/* Video Finishing Lab is a narrow private utility.  Its restrained slate and
   teal treatment keeps planning, execution and verified delivery legible
   without turning the route into a broad Video catalogue or media player. */
.portal-video-transform-operations { display: grid; gap: 18px; min-width: 0; }
.portal-video-transform-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(45, 212, 191, .28); border-radius: 22px; background: linear-gradient(145deg, #121a26, #0a0f17); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-video-transform-intro h2 { max-width: 770px; margin: 7px 0 8px; color: #f8fafc; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-video-transform-intro p { max-width: 770px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-video-transform-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-video-transform-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(45, 212, 191, .17); border-radius: 15px; background: rgba(10, 15, 23, .68); }
.portal-video-transform-intro dt { color: #8ff5e7; font-size: 19px; font-weight: 820; letter-spacing: -.035em; }
.portal-video-transform-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.45; }
.portal-video-transform-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-video-transform-form { background: linear-gradient(150deg, rgba(18, 35, 40, .97), rgba(10, 15, 23, .99)); }
.portal-video-transform-boundary, .portal-video-transform-history, .portal-video-transform-detail, .portal-video-transform-estimate { background: linear-gradient(150deg, rgba(18, 26, 38, .97), rgba(10, 15, 23, .99)); }
.portal-video-transform-source-pager, .portal-video-transform-history-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(45, 212, 191, .18); color: #aab8c7; font-size: 12px; font-weight: 700; }
.portal-video-transform-source-pager .portal-button, .portal-video-transform-history-pager .portal-button, .portal-video-transform-operation-actions .portal-button { min-height: 44px; padding-inline: 12px; }
.portal-video-transform-toggles { display: grid; grid-column: 1 / -1; gap: 9px; margin: 0; padding: 14px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 14px; background: rgba(10, 15, 23, .5); }
.portal-video-transform-toggles legend { padding: 0 5px; color: #dce6ef; font-size: 12px; font-weight: 760; }
.portal-video-transform-toggles label, .portal-video-transform-confirm-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
.portal-video-transform-toggles input, .portal-video-transform-confirm-check input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: #2dd4bf; }
.portal-video-transform-toggles span { display: grid; gap: 3px; min-width: 0; }
.portal-video-transform-toggles strong { color: #e8f4f4; font-size: 12px; }
.portal-video-transform-toggles small, .portal-video-transform-confirm-check span { color: #aab8c7; font-size: 12px; line-height: 1.52; }
.portal-video-transform-guard-list { display: grid; gap: 9px; margin-top: 14px; }
.portal-video-transform-guard-list > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 12px; background: rgba(10, 15, 23, .6); }
.portal-video-transform-guard-list strong { color: #dce6ef; font-size: 12px; }
.portal-video-transform-guard-list em { color: #aab8c7; font-size: 12px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.portal-video-transform-estimate-grid, .portal-video-transform-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 15px 0; }
.portal-video-transform-estimate-grid > div, .portal-video-transform-detail-summary > div { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid rgba(42, 57, 75, .8); border-radius: 12px; background: rgba(10, 15, 23, .5); }
.portal-video-transform-estimate-grid span, .portal-video-transform-detail-summary span { color: #9eb0bf; font-size: 12px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.portal-video-transform-estimate-grid strong, .portal-video-transform-detail-summary strong { overflow-wrap: anywhere; color: #e7f7f4; font-size: 12px; line-height: 1.45; }
.portal-video-transform-confirmation { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(45, 212, 191, .18); }
.portal-video-transform-confirm-check { padding: 12px; border: 1px solid rgba(45, 212, 191, .25); border-radius: 13px; background: rgba(45, 212, 191, .06); }
.portal-video-transform-confirm-check:focus-within { border-color: rgba(45, 212, 191, .64); box-shadow: 0 0 0 3px rgba(45, 212, 191, .12); }
.portal-video-transform-confirmation.is-stale { border-color: rgba(248, 113, 113, .38); }
.portal-video-transform-confirmation.is-stale [data-video-transform-confirmation-status] { color: #f9b4b4; }
.portal-video-transform-operation-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-video-transform-operation-list > li { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 14px; background: rgba(10, 15, 23, .59); }
.portal-video-transform-operation-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-video-transform-operation-meta > div { display: grid; min-width: 0; gap: 4px; }
.portal-video-transform-operation-meta strong { color: #f8fafc; font-size: 13px; }
.portal-video-transform-operation-meta span { color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-video-transform-operation-meta small { overflow-wrap: anywhere; color: #74e3d4; font-size: 12px; line-height: 1.45; }
.portal-video-transform-operation-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aab8c7; font-size: 12px; }
.portal-video-transform-operation-actions .portal-inline-actions { justify-content: flex-end; }
.portal-video-transform-empty { display: grid; min-height: 118px; gap: 6px; padding: 18px; border: 1px dashed rgba(45, 212, 191, .31); border-radius: 14px; background: rgba(10, 15, 23, .46); }
.portal-video-transform-empty strong { color: #dffdf8; font-size: 13px; }
.portal-video-transform-empty span { color: #aab8c7; font-size: 12px; line-height: 1.6; }
.portal-video-transform-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.portal-video-transform-timeline > li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid rgba(42, 57, 75, .7); }
.portal-video-transform-timeline > li:first-child { border-top: 0; }
.portal-video-transform-timeline > li > span { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px rgba(45, 212, 191, .1); }
.portal-video-transform-timeline div { display: grid; gap: 3px; min-width: 0; }
.portal-video-transform-timeline strong { color: #e8f7f5; font-size: 12px; }
.portal-video-transform-timeline small { color: #aab8c7; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .portal-video-transform-intro { grid-template-columns: 1fr; padding: 20px; border-radius: 18px; }
  .portal-video-transform-intro dl, .portal-video-transform-estimate-grid, .portal-video-transform-detail-summary { grid-template-columns: 1fr; }
  .portal-video-transform-layout { grid-template-columns: 1fr; }
  .portal-video-transform-operation-meta, .portal-video-transform-operation-actions, .portal-video-transform-source-pager, .portal-video-transform-history-pager { align-items: flex-start; flex-direction: column; }
  .portal-video-transform-operation-actions .portal-inline-actions { justify-content: flex-start; }
}

/* Frame Video Lab is a bounded image-sequence utility. The app-first surface
   keeps selection order, server verification and private delivery readable
   without becoming a Video catalogue, editor or preview player. */
.portal-frame-video-operations { display: grid; gap: 18px; min-width: 0; }
.portal-frame-video-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(45, 212, 191, .28); border-radius: 22px; background: linear-gradient(145deg, #121a26, #0a0f17); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-frame-video-intro h2 { max-width: 790px; margin: 7px 0 8px; color: #f8fafc; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-frame-video-intro p { max-width: 780px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-frame-video-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-frame-video-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(45, 212, 191, .17); border-radius: 15px; background: rgba(10, 15, 23, .68); }
.portal-frame-video-intro dt { color: #8ff5e7; font-size: 19px; font-weight: 820; letter-spacing: -.035em; }
.portal-frame-video-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-frame-video-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-frame-video-form { background: linear-gradient(150deg, rgba(18, 35, 40, .97), rgba(10, 15, 23, .99)); }
.portal-frame-video-boundary, .portal-frame-video-history, .portal-frame-video-detail, .portal-frame-video-estimate { background: linear-gradient(150deg, rgba(18, 26, 38, .97), rgba(10, 15, 23, .99)); }
.portal-frame-video-source-field { display: grid; grid-column: 1 / -1; gap: 10px; min-width: 0; margin: 0; padding: 14px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 14px; background: rgba(10, 15, 23, .48); }
.portal-frame-video-source-field legend { padding: 0 5px; color: #e8f7f5; font-size: 13px; font-weight: 760; }
.portal-frame-video-selection-status { margin: 0; color: #8ff5e7; font-size: 12px; line-height: 1.5; }
.portal-frame-video-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.portal-frame-video-source-row { display: grid; grid-template-columns: 20px 26px minmax(0, 1fr); align-items: center; min-width: 0; min-height: 56px; gap: 9px; padding: 10px 11px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 12px; background: rgba(10, 15, 23, .58); cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.portal-frame-video-source-row:hover { border-color: rgba(45, 212, 191, .48); background: rgba(18, 35, 40, .78); }
.portal-frame-video-source-row:focus-within { border-color: rgba(45, 212, 191, .74); box-shadow: 0 0 0 3px rgba(45, 212, 191, .12); }
.portal-frame-video-source-row.is-selected { border-color: rgba(45, 212, 191, .58); background: rgba(45, 212, 191, .08); }
.portal-frame-video-source-row input { width: 18px; height: 18px; margin: 0; accent-color: #2dd4bf; }
.portal-frame-video-source-row > span:last-child { display: grid; min-width: 0; gap: 3px; }
.portal-frame-video-source-row strong { overflow: hidden; color: #e8f7f5; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-frame-video-source-row small { overflow: hidden; color: #aab8c7; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-frame-video-source-order { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(45, 212, 191, .27); border-radius: 50%; color: #8ff5e7; font-size: 12px; font-weight: 800; }
.portal-frame-video-source-order:empty { border-color: transparent; }
.portal-frame-video-source-pager, .portal-frame-video-history-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(45, 212, 191, .18); color: #aab8c7; font-size: 12px; font-weight: 700; }
.portal-frame-video-source-pager .portal-button, .portal-frame-video-history-pager .portal-button, .portal-frame-video-operation-actions .portal-button { min-height: 44px; padding-inline: 12px; }
.portal-frame-video-selected { display: grid; grid-column: 1 / -1; gap: 8px; min-width: 0; padding: 14px; border: 1px solid rgba(45, 212, 191, .2); border-radius: 14px; background: rgba(45, 212, 191, .045); }
.portal-frame-video-selected > div { display: grid; gap: 3px; }
.portal-frame-video-selected h3 { margin: 0; color: #e8f7f5; font-size: 14px; }
.portal-frame-video-selected p { margin: 0; color: #aab8c7; font-size: 12px; line-height: 1.55; }
.portal-frame-video-sequence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-frame-video-sequence li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; min-width: 0; gap: 8px; padding: 10px; border: 1px solid rgba(42, 57, 75, .88); border-radius: 11px; background: rgba(10, 15, 23, .48); }
.portal-frame-video-sequence li > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #052e2b; color: #8ff5e7; font-size: 12px; font-weight: 800; }
.portal-frame-video-sequence div { display: grid; min-width: 0; gap: 3px; }
.portal-frame-video-sequence strong, .portal-frame-video-sequence small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-frame-video-sequence strong { color: #e8f7f5; font-size: 12px; }
.portal-frame-video-sequence small { color: #aab8c7; font-size: 12px; }
.portal-frame-video-guard-list { display: grid; gap: 9px; margin-top: 14px; }
.portal-frame-video-guard-list > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 12px; background: rgba(10, 15, 23, .6); }
.portal-frame-video-guard-list strong { color: #dce6ef; font-size: 12px; }
.portal-frame-video-guard-list em { color: #aab8c7; font-size: 12px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.portal-frame-video-estimate-grid, .portal-frame-video-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 15px 0; }
.portal-frame-video-estimate-grid > div, .portal-frame-video-detail-summary > div { display: grid; min-width: 0; gap: 5px; padding: 12px; border: 1px solid rgba(42, 57, 75, .8); border-radius: 12px; background: rgba(10, 15, 23, .5); }
.portal-frame-video-estimate-grid span, .portal-frame-video-detail-summary span { color: #9eb0bf; font-size: 12px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.portal-frame-video-estimate-grid strong, .portal-frame-video-detail-summary strong { overflow-wrap: anywhere; color: #e7f7f4; font-size: 12px; line-height: 1.45; }
.portal-frame-video-confirmation { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(45, 212, 191, .18); }
.portal-frame-video-confirm-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid rgba(45, 212, 191, .25); border-radius: 13px; background: rgba(45, 212, 191, .06); cursor: pointer; }
.portal-frame-video-confirm-check:focus-within { border-color: rgba(45, 212, 191, .64); box-shadow: 0 0 0 3px rgba(45, 212, 191, .12); }
.portal-frame-video-confirm-check input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: #2dd4bf; }
.portal-frame-video-confirm-check span { color: #aab8c7; font-size: 12px; line-height: 1.52; }
.portal-frame-video-confirmation.is-stale { border-color: rgba(248, 113, 113, .38); }
.portal-frame-video-confirmation.is-stale [data-frame-video-confirmation-status] { color: #f9b4b4; }
.portal-frame-video-operation-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-frame-video-operation-list > li { display: grid; min-width: 0; gap: 10px; padding: 14px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 14px; background: rgba(10, 15, 23, .59); }
.portal-frame-video-operation-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-frame-video-operation-meta > div { display: grid; min-width: 0; gap: 4px; }
.portal-frame-video-operation-meta strong { color: #f8fafc; font-size: 13px; }
.portal-frame-video-operation-meta span { color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-frame-video-operation-meta small { overflow-wrap: anywhere; color: #74e3d4; font-size: 12px; line-height: 1.45; }
.portal-frame-video-operation-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aab8c7; font-size: 12px; }
.portal-frame-video-operation-actions .portal-inline-actions { justify-content: flex-end; }
.portal-frame-video-empty { display: grid; min-height: 118px; gap: 6px; padding: 18px; border: 1px dashed rgba(45, 212, 191, .31); border-radius: 14px; background: rgba(10, 15, 23, .46); }
.portal-frame-video-empty strong { color: #dffdf8; font-size: 13px; }
.portal-frame-video-empty span { color: #aab8c7; font-size: 12px; line-height: 1.6; }
.portal-frame-video-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.portal-frame-video-timeline > li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid rgba(42, 57, 75, .7); }
.portal-frame-video-timeline > li:first-child { border-top: 0; }
.portal-frame-video-timeline > li > span { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px rgba(45, 212, 191, .1); }
.portal-frame-video-timeline div { display: grid; min-width: 0; gap: 3px; }
.portal-frame-video-timeline strong, .portal-frame-video-timeline small { font-size: 12px; }
.portal-frame-video-timeline strong { color: #e8f7f5; }
.portal-frame-video-timeline small { overflow-wrap: anywhere; color: #aab8c7; }

.portal-video-poster-operations { display: grid; gap: 18px; min-width: 0; }
.portal-video-poster-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(45, 212, 191, .28); border-radius: 22px; background: linear-gradient(145deg, #121a26, #0a0f17); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-video-poster-intro h2 { max-width: 790px; margin: 7px 0 8px; color: #f8fafc; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-video-poster-intro p { max-width: 780px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-video-poster-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-video-poster-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(45, 212, 191, .17); border-radius: 15px; background: rgba(10, 15, 23, .68); }
.portal-video-poster-intro dt { color: #8ff5e7; font-size: 19px; font-weight: 820; letter-spacing: -.035em; }
.portal-video-poster-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-video-poster-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-video-poster-form { background: linear-gradient(150deg, rgba(18, 35, 40, .97), rgba(10, 15, 23, .99)); }
.portal-video-poster-boundary, .portal-video-poster-history, .portal-video-poster-detail { background: linear-gradient(150deg, rgba(18, 26, 38, .97), rgba(10, 15, 23, .99)); }
.portal-video-poster-source-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; padding-top: 12px; border-top: 1px solid rgba(45, 212, 191, .18); color: #aab8c7; font-size: 12px; font-weight: 700; }
.portal-video-poster-source-pager .portal-button, .portal-video-poster-operation-actions .portal-button { min-height: 44px; padding-inline: 12px; }
.portal-video-poster-confirm-check { display: flex; align-items: flex-start; gap: 10px; min-width: 0; margin-top: 15px; padding: 12px; border: 1px solid rgba(45, 212, 191, .25); border-radius: 13px; background: rgba(45, 212, 191, .06); cursor: pointer; }
.portal-video-poster-confirm-check:focus-within { border-color: rgba(45, 212, 191, .64); box-shadow: 0 0 0 3px rgba(45, 212, 191, .12); }
.portal-video-poster-confirm-check input { width: 18px; height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: #2dd4bf; }
.portal-video-poster-confirm-check span { color: #aab8c7; font-size: 12px; line-height: 1.52; }
.portal-video-poster-guard-list { display: grid; gap: 9px; margin-top: 14px; }
.portal-video-poster-guard-list > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 12px; background: rgba(10, 15, 23, .6); }
.portal-video-poster-guard-list strong { color: #dce6ef; font-size: 12px; }
.portal-video-poster-guard-list em { color: #aab8c7; font-size: 12px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.portal-video-poster-operation-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-video-poster-operation-list > li { display: grid; min-width: 0; gap: 10px; padding: 14px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 14px; background: rgba(10, 15, 23, .59); }
.portal-video-poster-operation-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portal-video-poster-operation-meta > div { display: grid; min-width: 0; gap: 4px; }
.portal-video-poster-operation-meta strong { overflow: hidden; color: #f8fafc; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.portal-video-poster-operation-meta span { color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-video-poster-operation-meta small { overflow-wrap: anywhere; color: #74e3d4; font-size: 12px; line-height: 1.45; }
.portal-video-poster-operation-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aab8c7; font-size: 12px; }
.portal-video-poster-operation-actions .portal-inline-actions { justify-content: flex-end; }
.portal-video-poster-empty { display: grid; min-height: 118px; gap: 6px; padding: 18px; border: 1px dashed rgba(45, 212, 191, .31); border-radius: 14px; background: rgba(10, 15, 23, .46); }
.portal-video-poster-empty strong { color: #dffdf8; font-size: 13px; }
.portal-video-poster-empty span { color: #aab8c7; font-size: 12px; line-height: 1.6; }
.portal-video-poster-detail-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 15px 0; }
.portal-video-poster-detail-summary > div { display: grid; min-width: 0; gap: 5px; padding: 12px; border: 1px solid rgba(42, 57, 75, .8); border-radius: 12px; background: rgba(10, 15, 23, .5); }
.portal-video-poster-detail-summary span { color: #9eb0bf; font-size: 12px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.portal-video-poster-detail-summary strong { overflow-wrap: anywhere; color: #e7f7f4; font-size: 12px; line-height: 1.45; }
.portal-video-poster-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.portal-video-poster-timeline > li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid rgba(42, 57, 75, .7); }
.portal-video-poster-timeline > li:first-child { border-top: 0; }
.portal-video-poster-timeline > li > span { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 0 4px rgba(45, 212, 191, .1); }
.portal-video-poster-timeline div { display: grid; min-width: 0; gap: 3px; }
.portal-video-poster-timeline strong, .portal-video-poster-timeline small { font-size: 12px; }
.portal-video-poster-timeline strong { color: #e8f7f5; }
.portal-video-poster-timeline small { overflow-wrap: anywhere; color: #aab8c7; }
.portal-video-preview { display: grid; gap: 18px; min-width: 0; }
.portal-video-preview-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(45, 212, 191, .28); border-radius: 22px; background: linear-gradient(145deg, #121a26, #0a0f17); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-video-preview-intro h2 { max-width: 790px; margin: 7px 0 8px; color: #f8fafc; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-video-preview-intro p { max-width: 780px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-video-preview-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-video-preview-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(45, 212, 191, .17); border-radius: 15px; background: rgba(10, 15, 23, .68); }
.portal-video-preview-intro dt { color: #8ff5e7; font-size: 19px; font-weight: 820; letter-spacing: -.035em; }
.portal-video-preview-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-video-preview-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-video-preview-source { background: linear-gradient(150deg, rgba(18, 35, 40, .97), rgba(10, 15, 23, .99)); }
.portal-video-preview-boundary, .portal-video-preview-stage { background: linear-gradient(150deg, rgba(18, 26, 38, .97), rgba(10, 15, 23, .99)); }
.portal-video-preview-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; padding-top: 12px; border-top: 1px solid rgba(45, 212, 191, .18); color: #aab8c7; font-size: 12px; font-weight: 700; }
.portal-video-preview-pager .portal-button, .portal-video-preview-player-wrap .portal-button { min-height: 44px; padding-inline: 12px; }
.portal-video-preview-boundary-list { display: grid; gap: 9px; margin-top: 14px; }
.portal-video-preview-boundary-list > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 12px; background: rgba(10, 15, 23, .6); }
.portal-video-preview-boundary-list strong { color: #dce6ef; font-size: 12px; }
.portal-video-preview-boundary-list em { color: #aab8c7; font-size: 12px; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.portal-video-preview-player-wrap { display: grid; gap: 13px; min-width: 0; }
.portal-video-preview-player { display: block; width: 100%; max-height: min(64vh, 760px); aspect-ratio: 16 / 9; border: 1px solid rgba(45, 212, 191, .28); border-radius: 16px; background: #060a10; object-fit: contain; box-shadow: 0 16px 34px rgba(0, 0, 0, .25); }
.portal-video-preview-player:focus-visible, .portal-video-preview-source :focus-visible { outline: 3px solid rgba(45, 212, 191, .72); outline-offset: 3px; }
.portal-video-preview-player-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-video-preview-player-meta > span { display: grid; min-width: 0; gap: 4px; padding: 11px 12px; border: 1px solid rgba(42, 57, 75, .92); border-radius: 12px; background: rgba(10, 15, 23, .62); color: #aab8c7; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.portal-video-preview-player-meta strong { color: #e7f7f4; font-size: 12px; }
.portal-video-preview-placeholder { display: grid; min-height: 226px; align-content: center; gap: 7px; padding: 22px; border: 1px dashed rgba(45, 212, 191, .31); border-radius: 16px; background: rgba(10, 15, 23, .56); }
.portal-video-preview-placeholder strong { color: #dffdf8; font-size: 14px; }
.portal-video-preview-placeholder span { max-width: 680px; color: #aab8c7; font-size: 13px; line-height: 1.6; }
.portal-video-preview-placeholder.is-guarded { border-color: rgba(251, 191, 36, .38); background: rgba(87, 62, 17, .15); }
@media (max-width: 900px) {
  .portal-frame-video-intro, .portal-frame-video-layout { grid-template-columns: 1fr; }
  .portal-video-poster-intro, .portal-video-poster-layout { grid-template-columns: 1fr; }
  .portal-video-preview-intro, .portal-video-preview-layout { grid-template-columns: 1fr; }
  .portal-frame-video-intro { padding: 20px; border-radius: 18px; }
  .portal-video-poster-intro { padding: 20px; border-radius: 18px; }
  .portal-video-preview-intro { padding: 20px; border-radius: 18px; }
  .portal-frame-video-intro dl, .portal-frame-video-estimate-grid, .portal-frame-video-detail-summary, .portal-frame-video-source-list, .portal-frame-video-sequence { grid-template-columns: 1fr; }
  .portal-video-poster-intro dl, .portal-video-poster-detail-summary { grid-template-columns: 1fr; }
  .portal-video-preview-intro dl, .portal-video-preview-player-meta { grid-template-columns: 1fr; }
  .portal-frame-video-operation-meta, .portal-frame-video-operation-actions, .portal-frame-video-source-pager, .portal-frame-video-history-pager { align-items: flex-start; flex-direction: column; }
  .portal-video-poster-operation-meta, .portal-video-poster-operation-actions, .portal-video-poster-source-pager { align-items: flex-start; flex-direction: column; }
  .portal-video-preview-pager { align-items: flex-start; flex-direction: column; }
  .portal-frame-video-operation-actions .portal-inline-actions { justify-content: flex-start; }
  .portal-video-poster-operation-actions .portal-inline-actions { justify-content: flex-start; }
}

/* Content Prompt Pack is a deliberately local text-planning tool.  Its visual
   treatment keeps the editable draft and the execution boundary equally
   legible without suggesting a provider call, generated media or publishing. */
.portal-content-prompt-pack { display: grid; gap: 18px; min-width: 0; }
.portal-content-prompt-pack-intro { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(92, 223, 207, .25); border-radius: 22px; background: radial-gradient(circle at 88% 11%, rgba(77, 211, 189, .2), transparent 18rem), radial-gradient(circle at 13% 94%, rgba(83, 147, 245, .14), transparent 17rem), linear-gradient(145deg, rgba(12, 55, 61, .98), rgba(7, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-content-prompt-pack-intro h2 { margin: 7px 0 8px; color: #ebfffb; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-content-prompt-pack-intro p { max-width: 770px; margin: 0; color: #b7d8d4; line-height: 1.72; }
.portal-content-prompt-pack-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-content-prompt-pack-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(151, 239, 223, .15); border-radius: 15px; background: rgba(4, 33, 42, .49); }
.portal-content-prompt-pack-intro dt { color: #9ff4e4; font-size: 24px; font-weight: 840; letter-spacing: -.045em; }
.portal-content-prompt-pack-intro dd { margin: 7px 0 0; color: #a6c5c1; font-size: 10px; line-height: 1.45; }
.portal-content-prompt-pack-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-content-prompt-pack-form { background: linear-gradient(150deg, rgba(11, 57, 63, .96), rgba(7, 17, 31, .99)); }
.portal-content-prompt-pack-boundary, .portal-content-prompt-pack-result { background: linear-gradient(150deg, rgba(13, 43, 57, .92), rgba(7, 17, 31, .99)); }
.portal-content-prompt-pack-boundary { display: grid; gap: 14px; }
.portal-content-prompt-pack-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-content-prompt-pack-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(137, 230, 217, .16); border-radius: 11px; background: rgba(4, 29, 40, .46); }
.portal-content-prompt-pack-guard-list strong { overflow: hidden; color: #d8faf3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-content-prompt-pack-guard-list em { padding: 3px 6px; border: 1px solid rgba(145, 239, 223, .22); border-radius: 999px; background: rgba(72, 201, 181, .1); color: #aaf8e8; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-content-prompt-pack-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.portal-content-prompt-pack-section { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid rgba(133, 229, 215, .16); border-radius: 15px; background: rgba(4, 25, 37, .46); }
.portal-content-prompt-pack-section h3 { margin: 0; overflow-wrap: anywhere; color: #e2fffa; font-size: 12px; letter-spacing: -.012em; }
.portal-content-prompt-pack-section > div { display: grid; gap: 8px; }
.portal-content-prompt-pack-section article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; min-width: 0; padding: 10px; border: 1px solid rgba(139, 219, 211, .1); border-radius: 11px; background: rgba(1, 15, 27, .31); }
.portal-content-prompt-pack-section article > span { display: inline-grid; width: 30px; height: 24px; place-items: center; border: 1px solid rgba(115, 231, 214, .2); border-radius: 8px; background: rgba(77, 198, 181, .1); color: #a9f4e7; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.portal-content-prompt-pack-section pre { min-width: 0; margin: 1px 0 0; color: #c8e7e2; font: 10px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-content-prompt-pack-checks { display: grid; gap: 9px; margin-top: 14px; padding: 14px; border: 1px solid rgba(255, 198, 112, .18); border-radius: 14px; background: rgba(63, 45, 27, .39); }
.portal-content-prompt-pack-checks strong { color: #ffe6b4; font-size: 11px; }
.portal-content-prompt-pack-checks ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.portal-content-prompt-pack-checks li { position: relative; padding-left: 16px; color: #ddc6a4; font-size: 10px; line-height: 1.55; }
.portal-content-prompt-pack-checks li::before { position: absolute; left: 0; color: #f5c36d; content: "•"; }
.portal-content-prompt-pack-result .portal-form-footer { align-items: flex-start; }

@media (max-width: 980px) {
  .portal-content-prompt-pack-intro, .portal-content-prompt-pack-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-content-prompt-pack-intro { padding: 20px; border-radius: 18px; }
  .portal-content-prompt-pack-intro dl, .portal-content-prompt-pack-guard-list, .portal-content-prompt-pack-sections { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .portal-support-care-heading { grid-template-columns: 1fr; }
  .portal-support-care-heading dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-support-care-lane dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .portal-content-prompt-pack-section { padding: 12px; }
  .portal-content-prompt-pack-section article { grid-template-columns: 24px minmax(0, 1fr); padding: 9px; }
  .portal-content-prompt-pack-section article > span { width: 24px; height: 22px; font-size: 7px; }
}

/* Image Prompt Composer presents a text-only visual brief as an editable
   receipt. Warm coral, violet and blue keep it distinct from Image Studio
   while the boundary panel makes clear that no image, source upload or engine
   exists behind this route. */
.portal-image-prompt-composer { display: grid; gap: 18px; min-width: 0; }
.portal-image-prompt-composer-intro { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(248, 158, 115, .25); border-radius: 22px; background: radial-gradient(circle at 88% 11%, rgba(250, 116, 118, .2), transparent 18rem), radial-gradient(circle at 13% 94%, rgba(122, 119, 255, .16), transparent 17rem), linear-gradient(145deg, rgba(67, 35, 50, .98), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-image-prompt-composer-intro h2 { margin: 7px 0 8px; color: #fff0ee; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-image-prompt-composer-intro p { max-width: 770px; margin: 0; color: #dfc4c7; line-height: 1.72; }
.portal-image-prompt-composer-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-image-prompt-composer-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(255, 202, 190, .16); border-radius: 15px; background: rgba(45, 20, 36, .48); }
.portal-image-prompt-composer-intro dt { color: #ffc0ad; font-size: 24px; font-weight: 840; letter-spacing: -.045em; }
.portal-image-prompt-composer-intro dd { margin: 7px 0 0; color: #c9a7ac; font-size: 10px; line-height: 1.45; }
.portal-image-prompt-composer-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-image-prompt-composer-form { background: linear-gradient(150deg, rgba(67, 35, 49, .97), rgba(7, 17, 31, .99)); }
.portal-image-prompt-composer-form .portal-field[hidden] { display: none; }
.portal-image-prompt-composer-style-status { min-height: 1.5em; margin: 2px 0 0; color: #dfc4c7; font-size: 11px; line-height: 1.55; }
.portal-image-prompt-composer-boundary, .portal-image-prompt-composer-result { background: linear-gradient(150deg, rgba(46, 31, 58, .94), rgba(7, 17, 31, .99)); }
.portal-image-prompt-composer-boundary { display: grid; gap: 14px; }
.portal-image-prompt-composer-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-image-prompt-composer-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(232, 176, 222, .17); border-radius: 11px; background: rgba(27, 20, 47, .48); }
.portal-image-prompt-composer-guard-list strong { overflow: hidden; color: #f6dcf0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-image-prompt-composer-guard-list em { padding: 3px 6px; border: 1px solid rgba(237, 176, 226, .22); border-radius: 999px; background: rgba(215, 101, 177, .11); color: #ffd2f3; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-image-prompt-composer-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portal-image-prompt-composer-meta span { display: inline-flex; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(242, 176, 203, .18); border-radius: 999px; background: rgba(110, 47, 79, .19); color: #f3d5dc; font-size: 9px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.portal-image-prompt-composer-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.portal-image-prompt-composer-prompt { display: grid; gap: 9px; min-width: 0; padding: 14px; border: 1px solid rgba(236, 179, 206, .16); border-radius: 15px; background: rgba(13, 15, 31, .38); }
.portal-image-prompt-composer-prompt:nth-child(2) { grid-column: 1 / -1; }
.portal-image-prompt-composer-prompt > span { color: #ffc8da; font-size: 10px; font-weight: 790; letter-spacing: .035em; text-transform: uppercase; }
.portal-image-prompt-composer-prompt pre, .portal-image-prompt-composer-variants pre { min-width: 0; max-height: 280px; margin: 0; overflow: auto; color: #e6d9f7; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-image-prompt-composer-variants { display: grid; grid-template-columns: minmax(172px, .38fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; padding: 15px; border: 1px solid rgba(163, 167, 255, .18); border-radius: 15px; background: linear-gradient(145deg, rgba(29, 30, 64, .55), rgba(41, 25, 54, .48)); }
.portal-image-prompt-composer-variants h3 { margin: 4px 0 0; color: #f0edff; font-size: 15px; letter-spacing: -.03em; }
.portal-image-prompt-composer-variants p { margin: 8px 0 0; color: #c9c5e7; font-size: 10px; line-height: 1.55; }
.portal-image-prompt-composer-variants ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-image-prompt-composer-variants li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; min-width: 0; padding: 10px; border: 1px solid rgba(178, 180, 255, .14); border-radius: 11px; background: rgba(8, 13, 30, .37); }
.portal-image-prompt-composer-variants li[data-selected="true"] { border-color: rgba(125, 236, 217, .76); box-shadow: 0 0 0 1px rgba(125, 236, 217, .2); }
.portal-image-prompt-composer-variants li > span { display: inline-grid; width: 28px; height: 23px; place-items: center; border: 1px solid rgba(183, 181, 255, .22); border-radius: 8px; background: rgba(133, 128, 242, .11); color: #dfdcff; font-size: 8px; font-weight: 800; letter-spacing: .05em; }
.portal-image-prompt-composer-variants li > div { display: grid; gap: 5px; min-width: 0; }
.portal-image-prompt-composer-variants li strong { color: #dcd9ff; font-size: 9px; font-weight: 790; letter-spacing: .04em; text-transform: uppercase; }
.portal-image-prompt-composer-variant-select { justify-self: start; min-height: 32px; padding: 6px 10px; font-size: 10px; }
.portal-image-prompt-composer-review { display: grid; gap: 9px; margin-top: 14px; padding: 14px; border: 1px solid rgba(255, 196, 112, .18); border-radius: 14px; background: rgba(63, 45, 27, .39); }
.portal-image-prompt-composer-review strong { color: #ffe6b4; font-size: 11px; }
.portal-image-prompt-composer-review ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.portal-image-prompt-composer-review li { position: relative; padding-left: 16px; color: #dec8a9; font-size: 10px; line-height: 1.55; }
.portal-image-prompt-composer-review li::before { position: absolute; left: 0; color: #f5c36d; content: "•"; }
.portal-image-prompt-composer-result .portal-form-footer { align-items: flex-start; }

/* Quick Image Planner is a task form, not decorative media. Keep its compact
   controls and result metadata readable on a phone without restyling the
   shared Image Prompt Composer workspace. */
.portal-quick-image-planner .portal-image-prompt-composer-intro dd { font-size: 12px; }
.portal-quick-image-planner .portal-image-prompt-composer-guard-list strong { font-size: 12px; }
.portal-quick-image-planner .portal-image-prompt-composer-guard-list em { font-size: 11px; }
.portal-quick-image-planner .portal-image-prompt-composer-meta span { font-size: 12px; }
.portal-quick-image-planner .portal-image-prompt-composer-prompt > span { font-size: 12px; }
.portal-quick-image-planner .portal-image-prompt-composer-prompt pre { font-size: 13px; line-height: 1.62; }
.portal-quick-image-planner .portal-content-prompt-pack-checks strong { font-size: 13px; }
.portal-quick-image-planner .portal-content-prompt-pack-checks li { font-size: 13px; line-height: 1.6; }

@media (max-width: 980px) {
  .portal-image-prompt-composer-intro, .portal-image-prompt-composer-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-image-prompt-composer-intro { padding: 20px; border-radius: 18px; }
  .portal-image-prompt-composer-intro dl, .portal-image-prompt-composer-guard-list, .portal-image-prompt-composer-prompts { grid-template-columns: 1fr; }
  .portal-image-prompt-composer-prompt:nth-child(2) { grid-column: auto; }
  .portal-image-prompt-composer-variants { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .portal-image-prompt-composer-prompt, .portal-image-prompt-composer-variants { padding: 12px; }
  .portal-image-prompt-composer-variants li { grid-template-columns: 24px minmax(0, 1fr); padding: 9px; }
  .portal-image-prompt-composer-variants li > span { width: 24px; height: 22px; font-size: 7px; }
}

/* Image Prompt Composer light-surface corrections */
.portal-image-prompt-composer-intro {
  border-color: #bfe6e5;
  background: #f7fffe;
  box-shadow: none;
}
.portal-image-prompt-composer-intro h2 { color: #073a45; }
.portal-image-prompt-composer-intro p { color: #44717a; }
.portal-image-prompt-composer-intro dl > div { border-color: #d2eceb; background: #ffffff; }
.portal-image-prompt-composer-intro dt { color: #0f8d86; }
.portal-image-prompt-composer-intro dd { color: #557780; }
.portal-image-prompt-composer-form,
.portal-image-prompt-composer-boundary,
.portal-image-prompt-composer-result { background: #ffffff; }
.portal-image-prompt-composer-form .portal-field label { color: #153e49; }
.portal-image-prompt-composer-form .portal-field-help,
.portal-image-prompt-composer-form .portal-form-note { color: #44717a; }
.portal-image-prompt-composer-style-status { color: #44717a; }
.portal-image-prompt-composer-guard-list span { border-color: #d5ebeb; background: #f5fbfb; }
.portal-image-prompt-composer-guard-list strong { color: #153e49; }
.portal-image-prompt-composer-guard-list em { border-color: #bfe5e3; background: #e8f8f6; color: #0b706b; }
.portal-image-prompt-composer-meta span { border-color: #cde8e7; background: #effafa; color: #245863; }
.portal-image-prompt-composer-prompt { border-color: #cfe7e7; background: #f5fbfb; }
.portal-image-prompt-composer-prompt > span { color: #0b706b; }
.portal-image-prompt-composer-prompt pre,
.portal-image-prompt-composer-variants pre { color: #153e49; }
.portal-image-prompt-composer-variants { border-color: #cfe7e7; background: #f5fbfb; }
.portal-image-prompt-composer-variants h3 { color: #153e49; }
.portal-image-prompt-composer-variants p { color: #44717a; }
.portal-image-prompt-composer-variants li { border-color: #d7ecec; background: #ffffff; }
.portal-image-prompt-composer-variants li[data-selected="true"] { border-color: #0f8d86; box-shadow: 0 0 0 1px #bfe5e3; }
.portal-image-prompt-composer-variants li > span { border-color: #bfe5e3; background: #e8f8f6; color: #0b706b; }
.portal-image-prompt-composer-variants li strong { color: #245863; }
.portal-image-prompt-composer-review { border-color: #f0ddb4; background: #fffaf0; }
.portal-image-prompt-composer-review strong { color: #805b13; }
.portal-image-prompt-composer-review li { color: #5c4d2f; }
.portal-image-prompt-composer-review li::before { color: #b87916; }

/* Video Prompt Planner is a text-only planning surface. Its timeline is
   intentionally direction-rich without imitating a video editor, renderer,
   player or delivery page. */
.portal-video-prompt-planner { display: grid; gap: 18px; min-width: 0; }
.portal-video-prompt-planner-intro { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(106, 177, 255, .25); border-radius: 22px; background: radial-gradient(circle at 88% 11%, rgba(65, 143, 247, .23), transparent 18rem), radial-gradient(circle at 13% 94%, rgba(155, 101, 255, .15), transparent 17rem), linear-gradient(145deg, rgba(20, 43, 79, .98), rgba(7, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-video-prompt-planner-intro h2 { margin: 7px 0 8px; color: #edf6ff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-video-prompt-planner-intro p { max-width: 770px; margin: 0; color: #bfd2e5; line-height: 1.72; }
.portal-video-prompt-planner-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-video-prompt-planner-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(160, 211, 255, .16); border-radius: 15px; background: rgba(7, 27, 54, .48); }
.portal-video-prompt-planner-intro dt { color: #a9dcff; font-size: 24px; font-weight: 840; letter-spacing: -.045em; }
.portal-video-prompt-planner-intro dd { margin: 7px 0 0; color: #a8bed1; font-size: 10px; line-height: 1.45; }
.portal-video-prompt-planner-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-video-prompt-planner-form { background: linear-gradient(150deg, rgba(18, 49, 82, .97), rgba(7, 17, 31, .99)); }
.portal-video-prompt-planner-boundary, .portal-video-prompt-planner-result { background: linear-gradient(150deg, rgba(21, 38, 70, .95), rgba(7, 17, 31, .99)); }
.portal-video-prompt-planner-boundary { display: grid; gap: 14px; }
.portal-video-prompt-planner-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-video-prompt-planner-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(145, 207, 255, .16); border-radius: 11px; background: rgba(4, 22, 44, .48); }
.portal-video-prompt-planner-guard-list strong { overflow: hidden; color: #d7ecff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-video-prompt-planner-guard-list em { padding: 3px 6px; border: 1px solid rgba(145, 207, 255, .22); border-radius: 999px; background: rgba(87, 170, 238, .1); color: #bde7ff; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-video-prompt-planner-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portal-video-prompt-planner-meta span { display: inline-flex; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(155, 205, 255, .19); border-radius: 999px; background: rgba(54, 116, 181, .13); color: #d8edff; font-size: 9px; font-weight: 720; line-height: 1.45; overflow-wrap: anywhere; }
.portal-video-prompt-planner-coverage { display: grid; grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; padding: 14px; border: 1px solid rgba(159, 184, 255, .19); border-radius: 15px; background: linear-gradient(145deg, rgba(30, 35, 77, .58), rgba(16, 35, 64, .48)); }
.portal-video-prompt-planner-coverage h3 { margin: 4px 0 0; color: #e6ebff; font-size: 14px; letter-spacing: -.025em; }
.portal-video-prompt-planner-coverage p, .portal-video-prompt-planner-coverage ul { margin: 0; color: #bdcce8; font-size: 10px; line-height: 1.62; }
.portal-video-prompt-planner-coverage ul { display: grid; gap: 5px; padding-left: 17px; }
.portal-video-prompt-planner-timeline { display: grid; gap: 13px; margin-top: 15px; padding: 15px; border: 1px solid rgba(132, 205, 255, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(13, 33, 62, .76), rgba(9, 18, 35, .55)); }
.portal-video-prompt-planner-timeline .portal-card-header { align-items: flex-start; }
.portal-video-prompt-planner-shot-count { display: inline-flex; min-height: 25px; align-items: center; padding: 3px 9px; border: 1px solid rgba(139, 209, 255, .22); border-radius: 999px; color: #bdeaff; font-size: 9px; font-weight: 760; white-space: nowrap; }
.portal-video-prompt-planner-timeline ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-video-prompt-planner-timeline li { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 12px; border: 1px solid rgba(123, 197, 249, .14); border-radius: 14px; background: rgba(3, 17, 35, .38); }
.portal-video-prompt-planner-index { display: inline-grid; width: 31px; height: 25px; place-items: center; border: 1px solid rgba(133, 210, 255, .24); border-radius: 8px; background: rgba(67, 162, 230, .12); color: #c5efff; font-size: 8px; font-weight: 820; letter-spacing: .06em; }
.portal-video-prompt-planner-shot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.portal-video-prompt-planner-shot-head strong { color: #e3f4ff; font-size: 11px; letter-spacing: -.01em; }
.portal-video-prompt-planner-shot-head span { overflow: hidden; max-width: 100%; padding: 3px 7px; border: 1px solid rgba(164, 158, 255, .2); border-radius: 999px; background: rgba(126, 112, 235, .11); color: #d8d4ff; font-size: 8px; font-weight: 740; text-overflow: ellipsis; white-space: nowrap; }
.portal-video-prompt-planner-timeline dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 0; }
.portal-video-prompt-planner-timeline dl > div { min-width: 0; padding: 8px; border-radius: 9px; background: rgba(54, 101, 151, .09); }
.portal-video-prompt-planner-timeline dl > div:first-child { grid-column: 1 / -1; }
.portal-video-prompt-planner-timeline dt { color: #82bfeb; font-size: 8px; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.portal-video-prompt-planner-timeline dd { margin: 4px 0 0; color: #c3d8e9; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }
.portal-video-prompt-planner-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.portal-video-prompt-planner-prompt { display: grid; gap: 9px; min-width: 0; padding: 14px; border: 1px solid rgba(145, 198, 255, .16); border-radius: 15px; background: rgba(10, 20, 43, .42); }
.portal-video-prompt-planner-prompt > span { color: #a9dbff; font-size: 10px; font-weight: 790; letter-spacing: .035em; text-transform: uppercase; }
.portal-video-prompt-planner-prompt pre { min-width: 0; max-height: 330px; margin: 0; overflow: auto; color: #d4e7f8; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-video-prompt-planner-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.portal-video-prompt-planner-check { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid rgba(128, 205, 244, .15); border-radius: 13px; background: rgba(4, 22, 42, .42); }
.portal-video-prompt-planner-check strong { color: #c7e8ff; font-size: 10px; letter-spacing: .02em; }
.portal-video-prompt-planner-check p, .portal-video-prompt-planner-check ul { margin: 0; color: #a9c4d8; font-size: 9px; line-height: 1.6; }
.portal-video-prompt-planner-check ul { display: grid; gap: 5px; padding-left: 15px; }
.portal-video-prompt-planner-cautions { display: grid; gap: 9px; margin-top: 14px; padding: 14px; border: 1px solid rgba(255, 194, 108, .18); border-radius: 14px; background: rgba(62, 44, 28, .4); }
.portal-video-prompt-planner-cautions > strong { color: #ffe4ae; font-size: 11px; }
.portal-video-prompt-planner-cautions p, .portal-video-prompt-planner-cautions ul { margin: 0; color: #dbc6a8; font-size: 10px; line-height: 1.58; }
.portal-video-prompt-planner-cautions ul { display: grid; gap: 6px; padding-left: 17px; }
.portal-video-prompt-planner-cautions > div { padding-top: 9px; border-top: 1px solid rgba(255, 197, 117, .13); }
.portal-video-prompt-planner-result .portal-form-footer { align-items: flex-start; }

@media (max-width: 980px) {
  .portal-video-prompt-planner-intro, .portal-video-prompt-planner-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-video-prompt-planner-intro { padding: 20px; border-radius: 18px; }
  .portal-video-prompt-planner-intro dl, .portal-video-prompt-planner-guard-list, .portal-video-prompt-planner-prompts, .portal-video-prompt-planner-check-grid { grid-template-columns: 1fr; }
  .portal-video-prompt-planner-coverage { grid-template-columns: 1fr; }
  .portal-video-prompt-planner-timeline dl { grid-template-columns: 1fr; }
  .portal-video-prompt-planner-timeline dl > div:first-child { grid-column: auto; }
}
@media (max-width: 440px) {
  .portal-video-prompt-planner-timeline, .portal-video-prompt-planner-timeline li, .portal-video-prompt-planner-prompt { padding: 11px; }
  .portal-video-prompt-planner-timeline li { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; }
  .portal-video-prompt-planner-index { width: 25px; height: 23px; font-size: 7px; }
  .portal-video-prompt-planner-shot-head { align-items: flex-start; flex-direction: column; }
}

/* Analytics Workspace is a calm, manual measurement register. It is not a
   faux social dashboard: no implied live counters, charts, revenue or AI
   insight. Amber and indigo distinguish records authored by the Web account
   while keeping observation history readable at every screen size. */
.portal-analytics-workspace, .portal-analytics-workspace-detail { display: grid; gap: 18px; min-width: 0; }
.portal-analytics-intro, .portal-analytics-detail-summary { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(268px, .78fr); gap: 18px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(255, 190, 105, .25); border-radius: 22px; background: radial-gradient(circle at 87% 10%, rgba(251, 177, 71, .19), transparent 18rem), radial-gradient(circle at 10% 92%, rgba(112, 128, 255, .15), transparent 18rem), linear-gradient(145deg, rgba(62, 42, 27, .97), rgba(8, 17, 33, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-analytics-intro h2, .portal-analytics-detail-summary h2 { margin: 7px 0 8px; color: #fff4e2; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-analytics-intro p, .portal-analytics-detail-summary p { max-width: 770px; margin: 0; color: #dfc9ac; line-height: 1.72; }
.portal-analytics-intro dl, .portal-analytics-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-analytics-intro dl > div, .portal-analytics-detail-summary dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid rgba(255, 218, 161, .16); border-radius: 15px; background: rgba(40, 25, 22, .49); }
.portal-analytics-intro dt { color: #ffca7c; font-size: 25px; font-weight: 840; letter-spacing: -.045em; }
.portal-analytics-intro dd, .portal-analytics-detail-summary dt { margin: 7px 0 0; color: #c5ad91; font-size: 11px; line-height: 1.45; }
.portal-analytics-detail-summary dt { margin: 0; color: #cfb79d; font-size: 9px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.portal-analytics-detail-summary dd { margin: 5px 0 0; overflow-wrap: anywhere; color: #fff0dc; font-size: 13px; font-weight: 760; }
.portal-analytics-layout, .portal-analytics-detail-grid, .portal-analytics-history-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-analytics-create, .portal-analytics-editor, .portal-analytics-metric-create, .portal-analytics-finding-create { background: linear-gradient(150deg, rgba(66, 43, 27, .96), rgba(7, 17, 31, .99)); }
.portal-analytics-boundary, .portal-analytics-activity { display: grid; gap: 14px; background: linear-gradient(150deg, rgba(40, 33, 60, .94), rgba(7, 17, 31, .99)); }
.portal-analytics-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-analytics-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(194, 177, 255, .17); border-radius: 11px; background: rgba(26, 23, 49, .48); }
.portal-analytics-guard-list strong { overflow: hidden; color: #eee8ff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-analytics-guard-list em { padding: 3px 6px; border: 1px solid rgba(205, 190, 255, .22); border-radius: 999px; background: rgba(145, 126, 242, .12); color: #e0d5ff; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-analytics-report-grid, .portal-analytics-metric-grid, .portal-analytics-finding-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 14px; }
.portal-analytics-report-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 244px; border-color: rgba(255, 192, 108, .2); background: linear-gradient(150deg, rgba(66, 42, 26, .98), rgba(7, 17, 31, .99)); transition: border-color .16s ease, transform .16s ease, background .16s ease; }
.portal-analytics-report-card:hover { border-color: rgba(255, 216, 159, .57); background: linear-gradient(150deg, rgba(84, 53, 30, 1), rgba(8, 19, 34, 1)); transform: translateY(-1px); }
.portal-analytics-report-card .portal-card-header, .portal-analytics-metric-card .portal-card-header, .portal-analytics-finding-card .portal-card-header, .portal-analytics-snapshot-card .portal-card-header { align-items: flex-start; }
.portal-analytics-report-card .portal-card-subtitle { display: -webkit-box; min-height: 50px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-analytics-report-card .portal-form-footer { margin-top: auto; padding-top: 1px; }
.portal-analytics-meta, .portal-analytics-tags, .portal-analytics-references { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-analytics-meta span, .portal-analytics-tags span, .portal-analytics-references span { display: inline-flex; min-height: 23px; align-items: center; max-width: 100%; padding: 4px 8px; overflow: hidden; border: 1px solid rgba(255, 199, 123, .22); border-radius: 999px; background: rgba(248, 163, 64, .1); color: #ffe0b3; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.portal-analytics-tags span { border-color: rgba(151, 166, 255, .22); background: rgba(113, 124, 246, .12); color: #d9deff; }
.portal-analytics-references { margin-top: 13px; }
.portal-analytics-references span { border-color: rgba(129, 221, 210, .21); background: rgba(66, 190, 175, .1); color: #c4f2eb; }
.portal-analytics-filters { margin: 16px 0 2px; padding: 15px; border: 1px solid rgba(255, 198, 117, .16); border-radius: 15px; background: rgba(57, 37, 25, .46); }
.portal-analytics-filters .portal-fields { grid-template-columns: minmax(172px, .52fr) minmax(230px, 1.48fr); }
.portal-analytics-pagination { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 17px; padding-top: 16px; border-top: 1px solid rgba(255, 197, 117, .14); color: #d8c3a8; font-size: 11px; font-weight: 710; }
.portal-analytics-pagination .portal-inline-actions { flex: 0 0 auto; }
.portal-analytics-metric-card, .portal-analytics-finding-card { display: grid; gap: 13px; min-width: 0; padding: 16px; border: 1px solid rgba(255, 192, 109, .19); border-radius: 17px; background: linear-gradient(145deg, rgba(63, 41, 26, .97), rgba(7, 17, 31, .99)); }
.portal-analytics-metric-card.is-archived, .portal-analytics-finding-card.is-archived, .portal-analytics-snapshot-card.is-archived { border-color: rgba(154, 173, 190, .2); background: linear-gradient(145deg, rgba(27, 34, 47, .93), rgba(7, 17, 31, .99)); opacity: .78; }
.portal-analytics-metric-card .portal-card-subtitle { display: -webkit-box; min-height: 42px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portal-analytics-metric-form, .portal-analytics-finding-form, .portal-analytics-snapshot-form { padding-top: 13px; border-top: 1px solid rgba(255, 194, 113, .14); }
.portal-analytics-metric-form .portal-fields, .portal-analytics-snapshot-form .portal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-analytics-metric-form .portal-field--wide, .portal-analytics-snapshot-form .portal-field--wide, .portal-analytics-finding-form .portal-field--wide { grid-column: 1 / -1; }
.portal-analytics-comparison { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid rgba(168, 173, 255, .18); border-radius: 14px; background: linear-gradient(145deg, rgba(29, 31, 67, .62), rgba(16, 23, 45, .54)); }
.portal-analytics-comparison > div { display: grid; gap: 5px; min-width: 0; padding: 8px; border-radius: 10px; background: rgba(7, 16, 32, .28); }
.portal-analytics-comparison span { color: #b8bce1; font-size: 8px; font-weight: 760; letter-spacing: .05em; text-transform: uppercase; }
.portal-analytics-comparison strong { overflow-wrap: anywhere; color: #f0edff; font-size: 13px; letter-spacing: -.025em; }
.portal-analytics-comparison p { grid-column: 1 / -1; margin: 2px 2px 0; color: #b7bce0; font-size: 9px; line-height: 1.55; }
.portal-analytics-snapshot-section { display: grid; gap: 14px; }
.portal-analytics-snapshot-create { display: grid; gap: 11px; padding: 14px; border: 1px solid rgba(255, 196, 117, .17); border-radius: 15px; background: rgba(62, 39, 26, .42); }
.portal-analytics-snapshot-list { display: grid; gap: 9px; }
.portal-analytics-snapshot-card { display: grid; gap: 11px; min-width: 0; padding: 14px; border: 1px solid rgba(255, 200, 128, .16); border-radius: 14px; background: rgba(37, 28, 28, .45); }
.portal-analytics-snapshot-card h4 { margin: 4px 0 0; overflow-wrap: anywhere; color: #fff0dc; font-size: 19px; letter-spacing: -.04em; }
.portal-analytics-snapshot-note, .portal-analytics-finding-body { margin: 0; color: #d8c5b1; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-analytics-finding-card { background: linear-gradient(145deg, rgba(43, 37, 67, .94), rgba(8, 17, 31, .99)); border-color: rgba(171, 171, 255, .19); }
.portal-analytics-finding-card .portal-form-footer { align-items: flex-start; }
.portal-analytics-version-list, .portal-analytics-event-list { display: grid; gap: 0; }
.portal-analytics-version-list > article { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid rgba(255, 195, 114, .13); }
.portal-analytics-version-list > article:first-child { border-top: 0; }
.portal-analytics-version-list > article > div { min-width: 0; }
.portal-analytics-version-list strong, .portal-analytics-version-list p, .portal-analytics-version-list small, .portal-analytics-event-list strong, .portal-analytics-event-list small { display: block; }
.portal-analytics-version-list strong, .portal-analytics-event-list strong { color: #fff0db; font-size: 11px; text-transform: capitalize; }
.portal-analytics-version-list p { max-width: 630px; margin: 4px 0 0; color: #d8c1a4; font-size: 10px; line-height: 1.55; }
.portal-analytics-version-list small, .portal-analytics-event-list small { margin-top: 4px; color: #b6a187; font-size: 9px; }
.portal-analytics-event-list > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(184, 174, 255, .13); }
.portal-analytics-event-list > div:first-child { border-top: 0; }
.portal-analytics-event-list > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #c7b8ff; box-shadow: 0 0 0 4px rgba(150, 132, 248, .12); color: transparent; }

@media (max-width: 980px) {
  .portal-shell { display: block; }
  .portal-sidebar-action-row { grid-template-columns: minmax(0, 1fr); }
  .portal-sidebar-focus-toggle { display: none; }
  .portal-sidebar { position: fixed; z-index: 100; top: 0; left: 0; width: min(290px, calc(100vw - 46px)); height: 100vh; height: 100dvh; padding-top: calc(20px + var(--portal-safe-top)); padding-bottom: calc(16px + var(--portal-safe-bottom)); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 18px 0 40px rgba(0, 0, 0, .3); }
  .portal-sidebar.is-open { transform: translateX(0); }
  .portal-backdrop { position: fixed; z-index: 90; inset: 0; background: rgba(0, 7, 13, .66); backdrop-filter: blur(2px); }
  .portal-menu-button { display: grid; place-items: center; flex: 0 0 auto; }
  .portal-sidebar-close { display: grid; }
  .portal-status-grid, .portal-work-grid { grid-template-columns: 1fr; }
  .portal-project-intro, .portal-project-summary, .portal-project-detail-grid { grid-template-columns: 1fr; }
  .portal-project-package-intro { grid-template-columns: 1fr; }
  .portal-capability-audit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-capability-family-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-document-operation-intro, .portal-document-operation-layout { grid-template-columns: 1fr; }
  .portal-vault-intro, .portal-vault-layout { grid-template-columns: 1fr; }
  .portal-memory-intro, .portal-memory-layout, .portal-memory-content { grid-template-columns: 1fr; }
  .portal-prompt-library-intro, .portal-prompt-library-detail-summary, .portal-prompt-library-layout, .portal-prompt-library-detail-grid { grid-template-columns: 1fr; }
  .portal-prompt-library-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-content-studio-intro, .portal-content-studio-detail-summary, .portal-content-studio-layout, .portal-content-studio-detail-grid, .portal-content-studio-history-grid { grid-template-columns: 1fr; }
  .portal-content-studio-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-voice-studio-intro, .portal-voice-studio-detail-summary, .portal-voice-studio-layout, .portal-voice-studio-detail-grid, .portal-voice-studio-history-grid { grid-template-columns: 1fr; }
  .portal-voice-studio-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-video-studio-intro, .portal-video-studio-detail-summary, .portal-video-studio-layout, .portal-video-studio-detail-grid, .portal-video-studio-history-grid { grid-template-columns: 1fr; }
  .portal-image-studio-intro, .portal-image-studio-detail-summary, .portal-image-studio-layout, .portal-image-studio-detail-grid, .portal-image-studio-history-grid { grid-template-columns: 1fr; }
  .portal-document-workspace-intro, .portal-document-workspace-detail-summary, .portal-document-workspace-layout, .portal-document-workspace-detail-grid, .portal-document-workspace-history-grid { grid-template-columns: 1fr; }
  .portal-chat-workspace-intro, .portal-chat-thread-summary, .portal-chat-workspace-layout, .portal-chat-workspace-detail-grid, .portal-chat-workspace-history, .portal-chat-execution-layout { grid-template-columns: 1fr; }
  .portal-analytics-intro, .portal-analytics-detail-summary, .portal-analytics-layout, .portal-analytics-detail-grid, .portal-analytics-history-grid { grid-template-columns: 1fr; }
  .portal-subtitle-studio-intro, .portal-subtitle-studio-detail-summary, .portal-subtitle-studio-layout, .portal-subtitle-studio-detail-grid, .portal-subtitle-studio-history-grid, .portal-subtitle-preview-grid, .portal-subtitle-format-lab-intro, .portal-subtitle-format-lab-layout, .portal-subtitle-assets-intro, .portal-subtitle-assets-layout { grid-template-columns: 1fr; }
  .portal-media-workspace-intro, .portal-media-detail-summary, .portal-media-workspace-layout, .portal-media-detail-grid { grid-template-columns: 1fr; }
  .portal-media-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-support-intro, .portal-support-admin-intro, .portal-support-case-hero, .portal-support-layout, .portal-support-detail-layout, .portal-support-recovery { grid-template-columns: 1fr; }
  .portal-support-recovery-actions { justify-content: flex-start; }
  .portal-support-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-support-admin-forms { grid-template-columns: 1fr; }
  .portal-project-package-actions { align-items: flex-start; flex-direction: column; }
  .portal-project-intro, .portal-project-summary { gap: 17px; }
  .portal-dashboard-overview { grid-template-columns: 1fr; align-items: start; }
  .portal-campaign-metrics, .portal-campaign-board { grid-template-columns: 1fr; }
  .portal-auth-page { grid-template-columns: 1fr; min-height: auto; }
  .portal-auth-card { justify-self: stretch; max-width: none; }
  .portal-landing-nav, .portal-landing-hero, .portal-landing-section, .portal-landing-workflow, .portal-landing-trust, .portal-landing-footer { width: min(720px, calc(100% - 40px)); }
  .portal-landing-nav-links { display: none; }
  .portal-landing-hero, .portal-landing-workflow, .portal-landing-trust { grid-template-columns: 1fr; }
  .portal-landing-hero { gap: 38px; padding-top: 74px; }
  .portal-landing-hero-copy { max-width: 680px; }
  .portal-landing-preview { width: min(100%, 570px); justify-self: center; transform: none; }
  .portal-landing-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portal-header { min-height: 62px; padding: calc(11px + var(--portal-safe-top)) calc(16px + var(--portal-safe-right)) 11px calc(16px + var(--portal-safe-left)); }
  .portal-start-guide-grid { grid-template-columns: 1fr; }
  .portal-support-advisor-form { grid-template-columns: 1fr; }
  .portal-support-advisor-form-action .portal-button { width: 100%; }
  .portal-support-advisor-actions { align-items: stretch; flex-direction: column; }
  .portal-support-advisor-actions .portal-button { width: 100%; }
  .portal-support-consultation-form .portal-fields { grid-template-columns: 1fr; }
  .portal-support-consultation-actions { align-items: stretch; flex-direction: column; }
  .portal-support-consultation-actions .portal-button { width: 100%; }
  .portal-main { padding: 23px calc(16px + var(--portal-safe-right)) calc(92px + var(--portal-safe-bottom)) calc(16px + var(--portal-safe-left)); }
  .portal-mobile-nav {
    position: fixed;
    z-index: 80;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 8px max(9px, calc(9px + var(--portal-safe-right))) calc(8px + var(--portal-safe-bottom)) max(9px, calc(9px + var(--portal-safe-left)));
    border-top: 1px solid rgba(192, 215, 229, .14);
    background: rgba(6, 17, 27, .94);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .18);
    backdrop-filter: blur(20px);
  }
  .portal-mobile-nav-link {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-content: center;
    gap: 3px;
    padding: 5px 2px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #91aab7;
    font-size: 9px;
    font-weight: 780;
    line-height: 1.1;
    text-align: center;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
  }
  .portal-mobile-nav-icon { display: grid; min-height: 17px; place-items: center; color: #8dc9d3; font-size: 17px; line-height: 1; }
  .portal-mobile-nav-label { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
  .portal-mobile-nav-link[aria-current="page"] { border-color: rgba(102, 230, 211, .24); background: rgba(65, 204, 188, .14); color: #ddfffa; }
  .portal-mobile-nav-link[aria-current="page"] .portal-mobile-nav-icon { color: var(--portal-accent); }
  .portal-mobile-nav-link:focus-visible { outline: 2px solid var(--portal-info); outline-offset: 1px; }
  .portal-toast-region { bottom: calc(84px + var(--portal-safe-bottom)); }
  .portal-header-actions { gap: 6px; }
  .portal-pwa-install-trigger { width: 36px; min-width: 36px; justify-content: center; padding: 7px; }
  .portal-pwa-install-label { display: none; }
  .portal-command-trigger { width: 36px; min-width: 36px; justify-content: center; padding: 7px; }
  .portal-command-trigger-label, .portal-command-trigger kbd { display: none; }
  .portal-command-palette { padding: max(12px, var(--portal-safe-top)) 10px calc(12px + var(--portal-safe-bottom)); place-items: end center; }
  .portal-command-dialog { max-height: min(78dvh, 640px); border-radius: 18px 18px 14px 14px; }
  .portal-command-header { padding: 18px 17px 11px; }
  .portal-command-results { max-height: min(47dvh, 380px); padding-right: 9px; padding-left: 9px; }
  .portal-command-search { margin-right: 13px; margin-left: 13px; }
  .portal-command-hint, .portal-command-empty, .portal-command-count { margin-right: 15px; margin-left: 15px; }
  .portal-session-chip { max-width: 154px; }
  .portal-hero { display: grid; gap: 16px; align-items: start; }
  .portal-hero-actions { justify-content: flex-start; }
  .portal-title { font-size: 31px; }
  .portal-description { font-size: 13px; }
  .portal-fields, .portal-auth-facts { grid-template-columns: 1fr; }
  .portal-project-grid { grid-template-columns: 1fr; }
  .portal-project-filter .portal-fields { grid-template-columns: 1fr; }
  .portal-project-pagination { align-items: flex-start; flex-direction: column; }
  .portal-workspace-draft-filter .portal-fields { grid-template-columns: 1fr; }
  .portal-workspace-draft-pagination { align-items: flex-start; flex-direction: column; }
  .portal-project-package-grid { grid-template-columns: 1fr; }
  .portal-document-operation-grid { grid-template-columns: 1fr; }
  .portal-vault-grid { grid-template-columns: 1fr; }
  .portal-vault-filter .portal-fields { grid-template-columns: 1fr; }
  .portal-vault-pagination { align-items: flex-start; flex-direction: column; }
  .portal-memory-pagination, .portal-prompt-library-pagination, .portal-media-pagination { align-items: flex-start; flex-direction: column; }
  .portal-memory-reminder-grid { grid-template-columns: 1fr; }
  .portal-prompt-library-grid { grid-template-columns: 1fr; }
  .portal-prompt-library-filter { grid-template-columns: 1fr; }
  .portal-prompt-library-filter .portal-form-footer { grid-column: auto; }
  .portal-prompt-library-intro, .portal-prompt-library-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-prompt-library-intro dl, .portal-prompt-library-detail-summary dl, .portal-prompt-library-provenance dl { grid-template-columns: 1fr; }
  .portal-content-studio-grid, .portal-content-variant-grid { grid-template-columns: 1fr; }
  .portal-content-studio-filter { grid-template-columns: 1fr; }
  .portal-content-studio-filter .portal-form-footer { grid-column: auto; }
  .portal-content-studio-pagination, .portal-voice-studio-pagination { align-items: flex-start; flex-direction: column; }
  .portal-content-studio-intro, .portal-content-studio-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-content-studio-intro dl, .portal-content-studio-detail-summary dl { grid-template-columns: 1fr; }
  .portal-content-variant-form .portal-fields { grid-template-columns: 1fr; }
  .portal-content-variant-form .portal-field--wide { grid-column: auto; }
  .portal-content-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-voice-vault-grid, .portal-voice-script-grid { grid-template-columns: 1fr; }
  .portal-voice-studio-filter { grid-template-columns: 1fr; }
  .portal-voice-studio-filter .portal-form-footer { grid-column: auto; }
  .portal-voice-studio-intro, .portal-voice-studio-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-voice-studio-intro dl, .portal-voice-studio-detail-summary dl { grid-template-columns: 1fr; }
  .portal-video-plan-grid, .portal-video-scene-grid { grid-template-columns: 1fr; }
  .portal-image-artboard-grid, .portal-image-direction-grid { grid-template-columns: 1fr; }
  .portal-image-studio-filter { grid-template-columns: 1fr; }
  .portal-image-studio-filter .portal-form-footer { grid-column: auto; }
  .portal-image-studio-pagination, .portal-image-reference-pagination { align-items: flex-start; flex-direction: column; }
  .portal-image-reference-library { gap: 12px; margin-top: 15px; padding-top: 14px; }
  .portal-image-reference-library-grid { grid-template-columns: 1fr; }
  .portal-image-reference-picker { padding: 12px; }
  .portal-image-reference-list { max-height: 222px; }
  .portal-document-workspace-grid, .portal-document-plan-grid { grid-template-columns: 1fr; }
  .portal-chat-workspace-grid, .portal-chat-context-grid { grid-template-columns: 1fr; }
  .portal-analytics-report-grid, .portal-analytics-metric-grid, .portal-analytics-finding-grid { grid-template-columns: 1fr; }
  .portal-chat-workspace-filters .portal-fields { grid-template-columns: 1fr; }
  .portal-analytics-filters .portal-fields { grid-template-columns: 1fr; }
  .portal-chat-workspace-pagination { align-items: flex-start; flex-direction: column; }
  .portal-analytics-pagination { align-items: flex-start; flex-direction: column; }
  .portal-subtitle-project-grid, .portal-subtitle-cue-grid { grid-template-columns: 1fr; }
  .portal-video-studio-intro, .portal-video-studio-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-video-studio-intro dl, .portal-video-studio-detail-summary dl, .portal-video-runtime-grid, .portal-video-studio-guard-list { grid-template-columns: 1fr; }
  .portal-image-studio-intro, .portal-image-studio-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-image-studio-intro dl, .portal-image-studio-detail-summary dl, .portal-image-studio-estimate-grid, .portal-image-studio-guard-list { grid-template-columns: 1fr; }
  .portal-image-direction-form .portal-fields { grid-template-columns: 1fr; }
  .portal-image-direction-form .portal-field--wide { grid-column: auto; }
  .portal-image-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-document-workspace-intro, .portal-document-workspace-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-document-workspace-intro dl, .portal-document-workspace-detail-summary dl, .portal-document-workspace-estimate-grid, .portal-document-workspace-guard-list { grid-template-columns: 1fr; }
  .portal-chat-workspace-intro, .portal-chat-thread-summary { padding: 20px; border-radius: 18px; }
  .portal-chat-workspace-intro dl, .portal-chat-thread-summary dl, .portal-chat-workspace-guard-list, .portal-chat-execution-status { grid-template-columns: 1fr; }
  .portal-analytics-intro, .portal-analytics-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-analytics-intro dl, .portal-analytics-detail-summary dl, .portal-analytics-guard-list { grid-template-columns: 1fr; }
  .portal-analytics-metric-form .portal-fields, .portal-analytics-snapshot-form .portal-fields { grid-template-columns: 1fr; }
  .portal-analytics-metric-form .portal-field--wide, .portal-analytics-snapshot-form .portal-field--wide, .portal-analytics-finding-form .portal-field--wide { grid-column: auto; }
  .portal-analytics-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-analytics-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-chat-turn, .portal-chat-version-list > article, .portal-chat-run-card { grid-template-columns: 1fr; }
  .portal-document-plan-form .portal-fields { grid-template-columns: 1fr; }
  .portal-document-plan-form .portal-field--wide { grid-column: auto; }
  .portal-document-plan-handoff { grid-template-columns: 1fr; }
  .portal-document-plan-handoff-action { justify-items: start; min-width: 0; }
  .portal-document-plan-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-document-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-subtitle-studio-intro, .portal-subtitle-studio-detail-summary, .portal-subtitle-format-lab-intro, .portal-subtitle-assets-intro { padding: 20px; border-radius: 18px; }
  .portal-subtitle-studio-intro dl, .portal-subtitle-studio-detail-summary dl, .portal-subtitle-format-lab-intro dl, .portal-subtitle-assets-intro dl, .portal-subtitle-estimate-grid, .portal-subtitle-quality-summary, .portal-subtitle-quality-metrics, .portal-subtitle-studio-guard-list, .portal-subtitle-language-source-facts { grid-template-columns: 1fr; }
  .portal-subtitle-asset-operation-meta, .portal-subtitle-asset-operation-actions, .portal-subtitle-assets-source-pager, .portal-subtitle-language-source-pager { align-items: flex-start; flex-direction: column; }
  .portal-subtitle-cue-form .portal-fields { grid-template-columns: 1fr; }
  .portal-subtitle-cue-form .portal-field--wide { grid-column: auto; }
  .portal-subtitle-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-video-scene-form .portal-fields { grid-template-columns: 1fr; }
  .portal-video-scene-form .portal-field--wide { grid-column: auto; }
  .portal-video-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-voice-script-form .portal-fields { grid-template-columns: 1fr; }
  .portal-voice-script-form .portal-field--wide { grid-column: auto; }
  .portal-voice-cue-sheet li { grid-template-columns: 21px minmax(0, 1fr); }
  .portal-voice-cue-sheet li time, .portal-voice-cue-sheet li small { grid-column: 2; }
  .portal-voice-version-list > article { align-items: flex-start; flex-direction: column; }
  .portal-media-collection-grid { grid-template-columns: 1fr; }
  .portal-media-filter { grid-template-columns: 1fr; }
  .portal-media-filter .portal-form-footer { grid-column: auto; }
  .portal-media-workspace-intro, .portal-media-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-media-workspace-intro dl, .portal-media-detail-summary dl { grid-template-columns: 1fr; }
  .portal-media-item-form .portal-fields { grid-template-columns: 1fr; }
  .portal-media-checkbox { grid-column: auto; }
  .portal-support-case-grid { grid-template-columns: 1fr; }
  .portal-support-filter { grid-template-columns: 1fr; }
  .portal-support-filter .portal-form-footer { grid-column: auto; }
  .portal-support-pagination { align-items: flex-start; flex-direction: column; }
  .portal-support-recovery-actions { width: 100%; }
  .portal-support-recovery-actions .portal-button { flex: 1 1 180px; }
  .portal-support-intro, .portal-support-admin-intro, .portal-support-case-hero { padding: 20px; border-radius: 18px; }
  .portal-support-intro dl, .portal-support-admin-intro dl, .portal-support-case-hero dl { grid-template-columns: 1fr; }
  .portal-support-case-card { min-height: 0; }
  .portal-project-intro, .portal-project-summary { padding: 20px; border-radius: 18px; }
  .portal-project-intro dl, .portal-project-summary dl { grid-template-columns: 1fr; }
  .portal-project-package-intro dl { grid-template-columns: 1fr; }
  .portal-document-operation-intro dl { grid-template-columns: 1fr; }
  .portal-image-ocr .portal-form-footer { align-items: stretch; }
  .portal-image-ocr .portal-form-footer .portal-button--primary { width: 100%; }
  .portal-vault-intro dl { grid-template-columns: 1fr; }
  .portal-memory-intro dl { grid-template-columns: 1fr; }
  .portal-project-intro dl > div, .portal-project-summary dl > div { min-height: 0; }
  .portal-project-document { grid-template-columns: auto minmax(0, 1fr) auto; }
  .portal-vault-meta { grid-template-columns: 1fr; }
  .portal-project-package-meta { grid-template-columns: 1fr; }
  .portal-document-operation-meta { grid-template-columns: 1fr; }
  .portal-memory-reminder-meta { grid-template-columns: 1fr; }
  .portal-project-document > b { display: none; }
  .portal-version-row { align-items: flex-start; flex-direction: column; }
  .portal-studio-launchpad { display: flex; gap: 11px; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .portal-studio-launchpad::-webkit-scrollbar { display: none; }
  .portal-studio-card { width: min(78vw, 276px); min-width: min(78vw, 276px); min-height: 198px; scroll-snap-align: start; }
  .portal-action-center-grid { grid-template-columns: 1fr; }
  .portal-action-card { min-height: 166px; }
  .portal-section-heading { align-items: flex-start; }
  .portal-feature-group-head { align-items: flex-start; }
  .portal-admin-directory-head { align-items: flex-start; }
  .portal-feature-jumps { flex-wrap: nowrap; margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; }
  .portal-feature-jumps::-webkit-scrollbar { display: none; }
  .portal-feature-jump { flex: 0 0 auto; scroll-snap-align: start; }
  .portal-card-header { gap: 11px; }
  .portal-inline-actions { justify-content: flex-start; }
  .portal-section-heading > .portal-button { flex: 0 0 auto; }
  .portal-module-grid, .portal-admin-grid { grid-template-columns: 1fr; }
  .portal-admin-domain-grid { grid-template-columns: 1fr; }
  .portal-admin-domain-intro .portal-state { gap: 12px; }
  .portal-admin-domain-intro .portal-state > .portal-badge { margin-left: 0; }
  .portal-capability-hub-head { align-items: flex-start; flex-direction: column; }
  .portal-capability-audit, .portal-capability-family-grid { grid-template-columns: 1fr; }
  .portal-capability-family-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal-campaign-timeline { grid-template-columns: 1fr; }
  .portal-calendar-filter .portal-fields { grid-template-columns: 1fr; }
  .portal-calendar-filter .portal-form-footer { align-items: stretch; }
  .portal-calendar-filter .portal-inline-actions { width: 100%; }
  .portal-calendar-agenda-item { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 11px; }
  .portal-calendar-agenda-item time { grid-column: 1 / -1; }
  .portal-suggestion-grid { grid-template-columns: 1fr; }
  .portal-finalization-grid { grid-template-columns: 1fr; }
  .portal-bot-companion-grid { grid-template-columns: 1fr; }
  .portal-payment-entry-grid { grid-template-columns: 1fr; }
  .portal-manual-topup-routes, .portal-manual-topup-status { grid-template-columns: 1fr; }
  .portal-card-pad { padding: 17px; }
  .portal-dashboard-overview { padding: 21px; border-radius: 20px; }
  .portal-dashboard-overview h1 { font-size: clamp(29px, 9vw, 39px); }
  .portal-dashboard-overview p { font-size: 12px; }
  .portal-dashboard-overview-stats { gap: 7px; }
  .portal-dashboard-overview-stats > div { padding: 11px 9px; }
  .portal-dashboard-overview-stats dd { font-size: 23px; }
  .portal-start-guide { padding: 17px; }
  .portal-start-guide-head { flex-direction: column; gap: 9px; }
  .portal-start-guide-note { align-self: flex-start; }
  .portal-auth-intro { padding: 0; }
  .portal-auth-intro .portal-title { font-size: 37px; }
  .portal-oauth-method { align-items: flex-start; flex-direction: column; }
  .portal-oauth-method .portal-button { width: 100%; justify-content: center; }
  .portal-shell--auth .portal-main { width: calc(100% - 32px - var(--portal-safe-left) - var(--portal-safe-right)); padding-top: max(22px, calc(22px + var(--portal-safe-top))); }
  .portal-auth-page { padding-top: 58px; }
  .portal-auth-brand em { display: none; }
  .portal-landing-nav, .portal-landing-hero, .portal-landing-section, .portal-landing-workflow, .portal-landing-trust, .portal-landing-footer { width: calc(100% - 32px - var(--portal-safe-left) - var(--portal-safe-right)); }
  .portal-landing-nav { min-height: 72px; gap: 10px; }
  .portal-landing-brand strong { font-size: 13px; }
  .portal-landing-brand small { font-size: 8px; }
  .portal-landing-nav-actions { margin-left: auto; }
  .portal-landing-nav-actions .portal-button { min-height: 35px; padding: 7px 9px; font-size: 10px; }
  .portal-landing-hero { padding: 51px 0 69px; }
  .portal-landing-hero h1 { font-size: clamp(37px, 11vw, 52px); letter-spacing: -.05em; }
  .portal-landing-hero p { font-size: 13px; }
  .portal-landing-proof { display: grid; gap: 8px; }
  .portal-landing-preview { min-height: 360px; border-radius: 21px; }
  .portal-landing-preview-body { min-height: 315px; padding: 20px; }
  .portal-landing-section { padding-bottom: 70px; }
  .portal-landing-section h2, .portal-landing-workflow h2, .portal-landing-trust h2 { font-size: 30px; }
  .portal-landing-studios { display: flex; gap: 11px; margin-right: -16px; padding-right: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .portal-landing-studios::-webkit-scrollbar { display: none; }
  .portal-landing-studio { width: min(79vw, 284px); min-width: min(79vw, 284px); min-height: 225px; scroll-snap-align: start; }
  .portal-landing-workflow { gap: 26px; padding: 25px 19px; border-radius: 20px; }
  .portal-landing-trust { gap: 25px; padding: 73px 0; }
  .portal-landing-trust-grid { grid-template-columns: 1fr; }
  .portal-landing-trust-grid article { min-height: 0; }
  .portal-landing-trust-grid strong { margin-top: 14px; }
  .portal-landing-footer { display: grid; gap: 16px; justify-content: start; min-height: 0; padding-top: 25px; }
}
@media (max-width: 440px) {
  .portal-header { gap: 8px; padding-right: calc(12px + var(--portal-safe-right)); padding-left: calc(12px + var(--portal-safe-left)); }
  .portal-crumbs { display: none; }
  .portal-header-actions { gap: 4px; margin-left: auto; }
  .portal-session-chip { max-width: none; padding: 7px; }
  .portal-session-copy { display: none; }
  .portal-dashboard-overview-stats { grid-template-columns: 1fr; }
  .portal-dashboard-overview-stats > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
  .portal-dashboard-overview-stats dd { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .portal-dashboard-overview-stats span { grid-column: 1; }
  .portal-button { padding: 9px 10px; }
  .portal-support-metrics { grid-template-columns: 1fr; }
  .portal-support-case-meta { grid-template-columns: 1fr; }
  .portal-support-case-category { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Workboard: a private Web-native planning surface. These styles intentionally
   contain no media embeds, remote images or persistence affordances. */
.portal-workboard, .portal-workboard-new, .portal-workboard-detail { display: grid; gap: 18px; min-width: 0; }
.portal-workboard-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.portal-workboard-tabs a { min-height: 34px; padding: 8px 11px; border: 1px solid rgba(133, 190, 213, .19); border-radius: 10px; background: rgba(14, 29, 42, .54); color: #b5cbd7; font-size: 11px; font-weight: 760; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.portal-workboard-tabs a:hover, .portal-workboard-tabs a[aria-current="page"] { border-color: rgba(104, 223, 192, .54); background: rgba(46, 175, 149, .15); color: #d9fff4; }
.portal-workboard-tabs .portal-workboard-tabs-new { margin-left: auto; border-color: rgba(104, 223, 192, .42); background: linear-gradient(135deg, rgba(70, 205, 170, .24), rgba(64, 131, 217, .16)); color: #dffff5; }
.portal-workboard-intro, .portal-workboard-detail-summary { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 22px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(105, 214, 190, .23); border-radius: 22px; background: radial-gradient(circle at 91% 10%, rgba(80, 202, 179, .2), transparent 18rem), radial-gradient(circle at 8% 93%, rgba(92, 145, 242, .13), transparent 19rem), linear-gradient(145deg, rgba(13, 49, 59, .98), rgba(7, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .17); }
.portal-workboard-intro h2, .portal-workboard-detail-summary h2 { margin: 7px 0 9px; color: #effffb; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.048em; }
.portal-workboard-intro p, .portal-workboard-detail-summary p { max-width: 760px; margin: 0; color: #b7d4d2; line-height: 1.72; }
.portal-workboard-intro .portal-inline-actions { margin-top: 18px; }
.portal-workboard-intro dl, .portal-workboard-detail-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-workboard-detail-summary dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-workboard-intro dl > div, .portal-workboard-detail-summary dl > div { min-width: 0; min-height: 105px; padding: 15px; border: 1px solid rgba(151, 238, 221, .15); border-radius: 15px; background: rgba(5, 28, 39, .48); }
.portal-workboard-intro dt { color: #9df2df; font-size: 26px; font-weight: 850; letter-spacing: -.045em; }
.portal-workboard-intro dd, .portal-workboard-detail-summary dt { margin: 7px 0 0; color: #a9c5c3; font-size: 10px; font-weight: 740; letter-spacing: .045em; text-transform: uppercase; }
.portal-workboard-detail-summary dd { margin: 6px 0 0; overflow-wrap: anywhere; color: #ebfffa; font-size: 13px; font-weight: 760; }
.portal-workboard-board-card { overflow: hidden; background: linear-gradient(150deg, rgba(11, 31, 45, .96), rgba(7, 17, 31, .99)); }
.portal-workboard-board { display: grid; grid-template-columns: repeat(5, minmax(224px, 1fr)); gap: 12px; min-width: 1160px; padding: 4px 2px 9px; }
.portal-workboard-board-card { overflow-x: auto; scrollbar-color: rgba(117, 215, 194, .38) transparent; }
.portal-workboard-board-card::-webkit-scrollbar { height: 8px; }
.portal-workboard-board-card::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(117, 215, 194, .3); }
.portal-workboard-column { display: grid; align-content: start; gap: 10px; min-height: 300px; padding: 10px; border: 1px solid rgba(136, 196, 215, .16); border-radius: 15px; background: rgba(7, 20, 32, .56); }
.portal-workboard-column > header { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.portal-workboard-column > header > div { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.portal-workboard-column > header span { color: #c8e1e8; font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.portal-workboard-column > header b { display: inline-grid; min-width: 22px; height: 22px; place-items: center; border-radius: 999px; background: rgba(92, 150, 174, .19); color: #d5f2ef; font-size: 10px; }
.portal-workboard-column-cards { display: grid; gap: 9px; }
.portal-workboard-column-empty { display: grid; min-height: 86px; place-items: center; padding: 13px; border: 1px dashed rgba(133, 188, 207, .18); border-radius: 12px; color: #7f9ba8; font-size: 10px; text-align: center; }
.portal-workboard-card { display: flex; flex-direction: column; gap: 10px; min-height: 164px; padding: 13px; border: 1px solid rgba(128, 198, 211, .16); border-radius: 13px; background: linear-gradient(145deg, rgba(18, 45, 60, .92), rgba(11, 24, 37, .98)); box-shadow: 0 9px 20px rgba(0, 0, 0, .12); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.portal-workboard-card:hover { border-color: rgba(134, 234, 211, .45); background: linear-gradient(145deg, rgba(21, 60, 70, .98), rgba(11, 25, 39, 1)); transform: translateY(-1px); }
.portal-workboard-card-top, .portal-workboard-card footer, .portal-workboard-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.portal-workboard-card h3 { margin: 0; color: #e9fffa; font-size: 13px; line-height: 1.38; letter-spacing: -.018em; }
.portal-workboard-card h3 a:hover { color: #a4f6e4; }
.portal-workboard-card p { display: -webkit-box; min-height: 33px; margin: -2px 0 0; overflow: hidden; color: #9ebdc0; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.portal-workboard-card footer { margin-top: auto; color: #a8c5c8; font-size: 9px; }
.portal-workboard-card-actions { padding-top: 2px; }
.portal-workboard-card-actions .portal-button { min-height: 29px; padding: 6px 8px; font-size: 9px; }
.portal-workboard-card-move { border: 0; background: transparent; color: #96e5d5; font-size: 9px; font-weight: 760; }
.portal-workboard-card-move:hover { color: #d9fff6; text-decoration: underline; }
.portal-workboard-priority { display: inline-flex; align-items: center; width: fit-content; min-height: 21px; padding: 3px 7px; border: 1px solid rgba(166, 193, 216, .24); border-radius: 999px; background: rgba(117, 151, 178, .13); color: #c6d9e6; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.portal-workboard-priority[data-priority="low"] { border-color: rgba(132, 186, 218, .25); color: #b7d8f3; }
.portal-workboard-priority[data-priority="normal"] { border-color: rgba(106, 219, 190, .23); background: rgba(73, 191, 164, .11); color: #b5efe1; }
.portal-workboard-priority[data-priority="high"] { border-color: rgba(255, 194, 112, .36); background: rgba(255, 184, 82, .1); color: #ffdb9f; }
.portal-workboard-priority[data-priority="urgent"] { border-color: rgba(255, 139, 139, .42); background: rgba(243, 96, 96, .11); color: #ffb8b8; }
.portal-badge[data-status="backlog"] { border-color: rgba(139, 174, 204, .32); background: rgba(110, 148, 182, .12); color: #c4ddef; }
.portal-badge[data-status="planned"] { border-color: rgba(130, 180, 255, .34); background: rgba(94, 145, 232, .12); color: #c1d9ff; }
.portal-badge[data-status="in_progress"] { border-color: rgba(103, 226, 198, .35); background: rgba(68, 194, 166, .13); color: #b8f6e7; }
.portal-badge[data-status="done"] { border-color: rgba(130, 231, 165, .35); background: rgba(95, 201, 130, .13); color: #c3f5d3; }
.portal-workboard-reference-list { display: flex; flex-wrap: wrap; gap: 5px; }
.portal-workboard-reference-list span { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; padding: 3px 6px; overflow: hidden; border: 1px solid rgba(131, 193, 224, .18); border-radius: 999px; background: rgba(92, 142, 194, .1); color: #b7d9f1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.portal-workboard-reference-list b { color: #e0f4ff; font-size: 8px; }
.portal-workboard-library { background: linear-gradient(150deg, rgba(12, 38, 53, .95), rgba(7, 17, 31, .99)); }
.portal-workboard-filter { display: grid; gap: 11px; margin: 15px 0 4px; padding: 13px; border: 1px solid rgba(127, 204, 209, .16); border-radius: 14px; background: rgba(5, 27, 39, .42); }
.portal-workboard-filter .portal-fields { grid-template-columns: minmax(170px, 1.4fr) minmax(145px, .8fr) minmax(145px, .8fr); }
.portal-workboard-filter .portal-form-footer { margin-top: 0; }
.portal-workboard-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(139, 201, 221, .13); color: #a7c6ca; font-size: 10px; font-weight: 700; }
.portal-workboard-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-workboard-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-workboard-list { display: grid; gap: 8px; margin-top: 15px; }
.portal-workboard-list-row { display: grid; grid-template-columns: minmax(220px, 1.55fr) minmax(80px, .42fr) minmax(108px, .5fr) minmax(170px, .72fr); gap: 12px; align-items: center; padding: 13px; border: 1px solid rgba(129, 195, 215, .15); border-radius: 13px; background: rgba(8, 26, 39, .52); transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.portal-workboard-list-row:hover { border-color: rgba(135, 232, 209, .39); background: rgba(13, 43, 55, .7); transform: translateY(-1px); }
.portal-workboard-list-title { display: grid; min-width: 0; gap: 4px; }
.portal-workboard-list-title b { overflow: hidden; color: #e8fffa; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.portal-workboard-list-title small, .portal-workboard-list-meta small { overflow: hidden; color: #9ebcc0; font-size: 9px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.portal-workboard-list-meta { display: grid; gap: 4px; text-align: right; }
.portal-workboard-editor-layout, .portal-workboard-detail-grid, .portal-workboard-history-grid { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(285px, .84fr); gap: 18px; align-items: start; }
.portal-workboard-editor { background: linear-gradient(150deg, rgba(12, 53, 59, .97), rgba(7, 17, 31, .99)); }
.portal-workboard-guide, .portal-workboard-lifecycle, .portal-workboard-checklist-card { background: linear-gradient(150deg, rgba(14, 39, 55, .94), rgba(7, 17, 31, .99)); }
.portal-workboard-guide h2 { margin: 6px 0 14px; }
.portal-workboard-guide ol { display: grid; gap: 13px; padding: 0; margin: 0; list-style: none; counter-reset: workboard-guide; }
.portal-workboard-guide li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; }
.portal-workboard-guide li::before { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 8px; background: rgba(78, 196, 173, .14); color: #a9f3e2; content: counter(workboard-guide); counter-increment: workboard-guide; font-size: 10px; font-weight: 840; }
.portal-workboard-guide li b, .portal-workboard-guide li span { display: block; }
.portal-workboard-guide li b { color: #e3faf7; font-size: 11px; }
.portal-workboard-guide li span { margin-top: 3px; color: #a8c6c7; font-size: 10px; line-height: 1.52; }
.portal-workboard-reference-picker { display: grid; gap: 9px; min-width: 0; margin: 1px 0 0; padding: 13px; border: 1px solid rgba(127, 204, 209, .16); border-radius: 13px; background: rgba(6, 27, 38, .45); }
.portal-workboard-reference-picker legend, .portal-workboard-reference-picker strong { padding: 0 4px; color: #d8f6f1; font-size: 11px; font-weight: 790; }
.portal-workboard-reference-picker p { margin: 0; color: #9dbbbb; font-size: 9px; line-height: 1.5; }
.portal-workboard-reference-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 228px; padding-right: 2px; overflow-y: auto; }
.portal-workboard-reference-options label { display: flex; min-width: 0; align-items: flex-start; gap: 7px; padding: 9px; border: 1px solid rgba(139, 201, 221, .15); border-radius: 10px; background: rgba(11, 34, 48, .53); cursor: pointer; }
.portal-workboard-reference-options input { flex: 0 0 auto; margin: 1px 0 0; accent-color: #58d7bc; }
.portal-workboard-reference-options span { display: grid; min-width: 0; gap: 2px; color: #b4d0dc; font-size: 9px; overflow-wrap: anywhere; }
.portal-workboard-reference-options b { color: #e0f6ff; font-size: 8px; letter-spacing: .045em; text-transform: uppercase; }
.portal-workboard-state-form, .portal-workboard-checklist-add { display: flex; align-items: end; gap: 10px; margin-top: 14px; }
.portal-workboard-state-form label, .portal-workboard-checklist-add label { display: grid; flex: 1 1 auto; gap: 6px; min-width: 0; color: #b3cecf; font-size: 10px; font-weight: 750; }
.portal-workboard-state-form select, .portal-workboard-checklist-add input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid rgba(140, 210, 204, .21); border-radius: 9px; outline: 0; background: rgba(6, 27, 38, .78); color: #e6fffa; }
.portal-workboard-state-form select:focus, .portal-workboard-checklist-add input:focus { border-color: rgba(111, 232, 205, .68); box-shadow: 0 0 0 3px rgba(80, 208, 182, .12); }
.portal-workboard-checklist { display: grid; gap: 7px; padding: 0; margin: 14px 0; list-style: none; }
.portal-workboard-checklist li { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid rgba(143, 212, 210, .1); color: #d7ecea; font-size: 11px; line-height: 1.48; }
.portal-workboard-checklist li:first-child { border-top: 0; }
.portal-workboard-checklist li.is-done span:last-child { color: #8eafae; text-decoration: line-through; }
.portal-workboard-checklist button, .portal-workboard-checkmark { display: grid; width: 23px; height: 23px; place-items: center; padding: 0; border: 1px solid rgba(117, 224, 196, .31); border-radius: 8px; background: rgba(70, 189, 164, .1); color: #a8f1df; font-size: 12px; }
.portal-workboard-checklist button:hover { border-color: rgba(140, 244, 216, .68); background: rgba(80, 202, 174, .18); }
.portal-workboard-progress { color: #a6eede; font-size: 10px; font-weight: 790; white-space: nowrap; }
.portal-workboard-version-list, .portal-workboard-events { display: grid; gap: 0; }
.portal-workboard-version-list > article { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 11px 0; border-top: 1px solid rgba(145, 215, 211, .1); }
.portal-workboard-version-list > article:first-child { border-top: 0; }
.portal-workboard-version-list > article > span { display: grid; gap: 3px; min-width: 0; }
.portal-workboard-version-list b { color: #d9fff7; font-size: 11px; }
.portal-workboard-version-list small, .portal-workboard-version-list p { margin: 0; color: #9ebcbd; font-size: 9px; }
.portal-workboard-version-list p { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-workboard-version-list .portal-button { flex: 0 0 auto; min-height: 29px; padding: 6px 8px; font-size: 9px; }
.portal-workboard-events > div { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid rgba(145, 215, 211, .1); }
.portal-workboard-events > div:first-child { border-top: 0; }
.portal-workboard-events > div > span:first-child { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #91f0dc; box-shadow: 0 0 0 4px rgba(77, 195, 174, .1); color: transparent; }
.portal-workboard-events b, .portal-workboard-events small { display: block; }
.portal-workboard-events b { color: #e4fffa; font-size: 11px; text-transform: capitalize; }
.portal-workboard-events small { margin-top: 3px; color: #a7c3c4; font-size: 9px; }
@media (max-width: 1120px) {
  .portal-workboard-intro, .portal-workboard-detail-summary, .portal-workboard-editor-layout, .portal-workboard-detail-grid, .portal-workboard-history-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .portal-workboard-tabs .portal-workboard-tabs-new { margin-left: 0; }
  .portal-workboard-intro, .portal-workboard-detail-summary { padding: 20px; border-radius: 18px; }
  .portal-workboard-intro dl, .portal-workboard-detail-summary dl { grid-template-columns: 1fr; }
  .portal-workboard-list-row { grid-template-columns: 1fr auto; gap: 9px; }
  .portal-workboard-list-row > .portal-badge, .portal-workboard-list-row > .portal-workboard-list-meta { grid-column: 1 / -1; }
  .portal-workboard-list-meta { text-align: left; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-workboard-reference-options { grid-template-columns: 1fr; }
  .portal-workboard-filter .portal-fields { grid-template-columns: 1fr; }
  .portal-workboard-pagination { align-items: flex-start; flex-direction: column; }
  .portal-workboard-state-form, .portal-workboard-checklist-add { align-items: stretch; flex-direction: column; }
  .portal-workboard-state-form .portal-button, .portal-workboard-checklist-add .portal-button { width: 100%; justify-content: center; }
  .portal-workboard-version-list > article { align-items: flex-start; flex-direction: column; }
}

/* Operations Center is an observability and approval surface.  It deliberately
   looks like a calm control room: no fake "fixed" state, no payment/provider
   affordances, and no visual treatment that suggests an external action ran. */
.portal-operations, .portal-operations-admin { display: grid; gap: 18px; min-width: 0; }
.portal-operations-intro, .portal-operations-admin-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 19px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(96, 209, 199, .24); border-radius: 22px; background: radial-gradient(circle at 89% 11%, rgba(67, 205, 190, .17), transparent 18rem), radial-gradient(circle at 8% 91%, rgba(91, 143, 238, .12), transparent 19rem), linear-gradient(145deg, rgba(10, 45, 57, .97), rgba(7, 18, 33, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .16); }
.portal-operations-admin-intro { border-color: rgba(125, 188, 255, .25); background: radial-gradient(circle at 88% 10%, rgba(92, 149, 245, .18), transparent 17rem), radial-gradient(circle at 7% 90%, rgba(57, 205, 184, .1), transparent 18rem), linear-gradient(145deg, rgba(14, 35, 66, .98), rgba(7, 18, 33, .99)); }
.portal-operations-intro h2, .portal-operations-admin-intro h2 { margin: 7px 0 9px; color: #eafffa; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.047em; }
.portal-operations-intro p, .portal-operations-admin-intro p { max-width: 760px; margin: 0; color: #b3d0d1; line-height: 1.72; }
.portal-operations-intro dl, .portal-operations-admin-intro dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-operations-intro dl > div, .portal-operations-admin-intro dl > div { min-width: 0; min-height: 105px; padding: 15px; border: 1px solid rgba(157, 232, 222, .15); border-radius: 15px; background: rgba(4, 22, 35, .46); }
.portal-operations-intro dt, .portal-operations-admin-intro dt { color: #99f0de; font-size: 20px; font-weight: 850; letter-spacing: -.035em; }
.portal-operations-admin-intro dt { color: #b3d6ff; }
.portal-operations-intro dd, .portal-operations-admin-intro dd { margin: 7px 0 0; overflow-wrap: anywhere; color: #a9c2c6; font-size: 10px; line-height: 1.5; }
.portal-operations-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.portal-operations-metrics .portal-metric, .portal-operations-metric { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 126px; padding: 16px; border: 1px solid rgba(121, 205, 197, .16); border-radius: 16px; background: linear-gradient(145deg, rgba(16, 49, 63, .92), rgba(8, 20, 35, .98)); }
.portal-operations-metrics .portal-metric > span, .portal-operations-metric > span { color: #99bebf; font-size: 10px; font-weight: 740; letter-spacing: .045em; text-transform: uppercase; }
.portal-operations-metrics .portal-metric > strong, .portal-operations-metric > strong { overflow: hidden; color: #e9fffa; font-size: clamp(23px, 2.2vw, 30px); font-weight: 860; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.portal-operations-metrics .portal-metric > em, .portal-operations-metric > em { color: #90adaf; font-size: 10px; font-style: normal; line-height: 1.45; }
.portal-operations-grid, .portal-operations-admin-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(285px, .87fr); gap: 18px; align-items: start; }
.portal-operations-boundary { border-color: rgba(101, 222, 197, .18); background: linear-gradient(150deg, rgba(10, 48, 53, .9), rgba(7, 18, 32, .99)); }
.portal-operations-boundary h2 { margin: 5px 0 8px; color: #dcfff7; font-size: 18px; letter-spacing: -.025em; }
.portal-operations-boundary p { margin: 0; color: #abc8c7; font-size: 11px; line-height: 1.68; }
.portal-operations-boundary-list, .portal-operations-policy-list { display: grid; gap: 8px; padding: 0; margin: 15px 0 0; list-style: none; }
.portal-operations-boundary-list li, .portal-operations-policy-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(143, 222, 211, .1); color: #b5ccca; font-size: 10px; line-height: 1.55; }
.portal-operations-boundary-list li:first-child, .portal-operations-policy-list li:first-child { border-top: 0; }
.portal-operations-boundary-list li::before, .portal-operations-policy-list li::before { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 6px; background: rgba(68, 194, 165, .14); color: #9df0da; content: "✓"; font-size: 10px; font-weight: 900; }
.portal-operations-list, .portal-operations-run-list, .portal-operations-approval-list { display: grid; gap: 0; }
.portal-operations-row, .portal-operations-run, .portal-operations-approval { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(132, 205, 205, .12); }
.portal-operations-row:first-child, .portal-operations-run:first-child, .portal-operations-approval:first-child { border-top: 0; }
.portal-operations-row-copy, .portal-operations-run-copy, .portal-operations-approval-copy { display: grid; min-width: 0; gap: 4px; }
.portal-operations-row strong, .portal-operations-run strong, .portal-operations-approval strong { overflow: hidden; color: #e8fffa; font-size: 12px; font-weight: 790; text-overflow: ellipsis; white-space: nowrap; }
.portal-operations-row small, .portal-operations-run small, .portal-operations-approval small { color: #92afb1; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.portal-operations-run-meta, .portal-operations-approval-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.portal-operations-incident-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.portal-operations-incident { display: grid; gap: 12px; min-width: 0; min-height: 186px; padding: 16px; border: 1px solid rgba(126, 196, 210, .17); border-radius: 16px; background: linear-gradient(148deg, rgba(13, 39, 55, .96), rgba(7, 18, 32, .99)); }
.portal-operations-incident[data-severity="warning"], .portal-operations-incident[data-severity="high"] { border-color: rgba(255, 192, 102, .31); background: linear-gradient(148deg, rgba(58, 43, 35, .89), rgba(14, 23, 35, .99)); }
.portal-operations-incident[data-severity="critical"] { border-color: rgba(255, 137, 137, .37); background: linear-gradient(148deg, rgba(67, 34, 44, .91), rgba(17, 20, 34, .99)); }
.portal-operations-incident-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.portal-operations-incident h3 { margin: 0; color: #ecfffb; font-size: 14px; letter-spacing: -.02em; }
.portal-operations-incident p { margin: 0; color: #a9c2c4; font-size: 10px; line-height: 1.58; }
.portal-operations-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.portal-operations-meta > div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(143, 208, 207, .11); border-radius: 10px; background: rgba(3, 16, 29, .33); }
.portal-operations-meta dt { color: #8aa8ac; font-size: 9px; font-weight: 750; }
.portal-operations-meta dd { margin: 4px 0 0; overflow: hidden; color: #e1f6f2; font-size: 10px; font-weight: 680; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.portal-operations-approval { align-items: start; }
.portal-operations-approval[data-state="awaiting_approval"] { padding: 14px; border: 1px solid rgba(255, 193, 104, .25); border-radius: 14px; background: linear-gradient(145deg, rgba(64, 46, 31, .56), rgba(12, 23, 35, .84)); }
.portal-operations-approval-form, .portal-operations-approval-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.portal-operations-approval-form .portal-button, .portal-operations-approval-actions .portal-button { min-height: 31px; padding: 7px 9px; font-size: 10px; }
.portal-operations-approval-form .portal-button--danger { border-color: rgba(255, 149, 149, .36); background: rgba(222, 82, 92, .1); color: #ffc1c5; }
.portal-operations-approval-form .portal-button--danger:hover { border-color: rgba(255, 174, 174, .62); background: rgba(222, 82, 92, .18); }
.portal-operations-code { display: inline-flex; max-width: 100%; padding: 4px 7px; overflow: hidden; border: 1px solid rgba(133, 202, 211, .18); border-radius: 7px; background: rgba(4, 17, 29, .55); color: #a9e5df; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portal-operations-admin .portal-card { min-width: 0; }

/* Reliability Follow-up uses the same quiet staff surface as Operations but
   keeps source identifiers and raw diagnostics out of the visual hierarchy. */
.portal-reliability-list { display: grid; gap: 0; }
.portal-reliability-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 14px 0; border-top: 1px solid rgba(132, 205, 205, .12); }
.portal-reliability-row:first-child { border-top: 0; }
.portal-reliability-row[data-state="open"] { padding: 14px; border: 1px solid rgba(255, 193, 104, .22); border-radius: 14px; background: linear-gradient(145deg, rgba(58, 45, 30, .42), rgba(12, 23, 35, .82)); }
.portal-reliability-copy { display: grid; min-width: 0; gap: 4px; }
.portal-reliability-copy strong { overflow: hidden; color: #e8fffa; font-size: 12px; font-weight: 790; text-overflow: ellipsis; white-space: nowrap; }
.portal-reliability-copy small { color: #92afb1; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.portal-reliability-meta, .portal-reliability-actions, .portal-reliability-action { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: flex-end; }
.portal-reliability-action .portal-button { min-height: 31px; padding: 7px 9px; font-size: 10px; }
.portal-reliability-signal-list li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.portal-reliability-signal-list li::before { display: none; }
.portal-reliability-signal-list strong { min-width: 0; overflow: hidden; color: #dcf8f1; font-size: 11px; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.portal-reliability-signal-list span { color: #8ca8ab; font-size: 10px; text-align: right; }

@media (max-width: 980px) {
  .portal-operations-intro, .portal-operations-admin-intro, .portal-operations-grid, .portal-operations-admin-grid { grid-template-columns: 1fr; }
  .portal-operations-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portal-operations-intro, .portal-operations-admin-intro { padding: 20px; border-radius: 18px; }
  .portal-operations-intro dl, .portal-operations-admin-intro dl, .portal-operations-incident-grid { grid-template-columns: 1fr; }
  .portal-operations-row, .portal-operations-run, .portal-operations-approval, .portal-reliability-row { align-items: start; grid-template-columns: 1fr; }
  .portal-operations-run-meta, .portal-operations-approval-meta, .portal-operations-approval-form, .portal-operations-approval-actions, .portal-reliability-meta, .portal-reliability-actions, .portal-reliability-action { justify-content: flex-start; }
}
@media (max-width: 440px) {
  .portal-operations-metrics, .portal-operations-meta { grid-template-columns: 1fr; }
  .portal-operations-metrics .portal-metric, .portal-operations-metric { min-height: 0; }
  .portal-operations-approval-form, .portal-operations-approval-actions, .portal-reliability-actions, .portal-reliability-action { display: grid; grid-template-columns: 1fr; width: 100%; }
  .portal-operations-approval-form .portal-button, .portal-operations-approval-actions .portal-button, .portal-reliability-action .portal-button { width: 100%; justify-content: center; }
  .portal-reliability-signal-list li { grid-template-columns: 1fr; gap: 3px; }
  .portal-reliability-signal-list span { text-align: left; }
}

/* Notification Center stays calm and private: the visual hierarchy helps a
   returning customer triage an in-app record without implying that a push,
   email, Telegram message or external execution happened. */
.portal-inbox, .portal-notification-automation { display: grid; gap: 18px; min-width: 0; }
.portal-inbox-intro { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(270px, .78fr); gap: 20px; align-items: center; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(116, 207, 221, .24); border-radius: 22px; background: radial-gradient(circle at 89% 10%, rgba(73, 183, 223, .18), transparent 18rem), radial-gradient(circle at 8% 92%, rgba(87, 207, 174, .12), transparent 19rem), linear-gradient(145deg, rgba(10, 40, 58, .98), rgba(7, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .16); }
.portal-inbox-intro h2 { margin: 7px 0 9px; color: #edfbff; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.047em; }
.portal-inbox-intro p { max-width: 760px; margin: 0; color: #b4ccd2; line-height: 1.72; }
.portal-inbox-intro dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-inbox-intro dl > div { min-width: 0; min-height: 105px; padding: 15px; border: 1px solid rgba(156, 220, 235, .15); border-radius: 15px; background: rgba(4, 22, 35, .46); }
.portal-inbox-intro dt { overflow: hidden; color: #a8eefd; font-size: 20px; font-weight: 850; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.portal-inbox-intro dd { margin: 7px 0 0; overflow-wrap: anywhere; color: #a9c2c6; font-size: 10px; line-height: 1.5; }
.portal-inbox-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.portal-inbox-metrics .portal-metric { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 126px; padding: 16px; border: 1px solid rgba(116, 202, 218, .16); border-radius: 16px; background: linear-gradient(145deg, rgba(14, 43, 59, .92), rgba(8, 20, 35, .98)); }
.portal-inbox-metrics .portal-metric > span { color: #99b9c1; font-size: 10px; font-weight: 740; letter-spacing: .045em; text-transform: uppercase; }
.portal-inbox-metrics .portal-metric > strong { overflow: hidden; color: #e9fbff; font-size: clamp(23px, 2.2vw, 30px); font-weight: 860; letter-spacing: -.05em; text-overflow: ellipsis; white-space: nowrap; }
.portal-inbox-metrics .portal-metric > em { color: #90aeb2; font-size: 10px; font-style: normal; line-height: 1.45; }
.portal-inbox-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(285px, .87fr); gap: 18px; align-items: start; }
.portal-inbox-boundary { border-color: rgba(94, 204, 219, .18); background: linear-gradient(150deg, rgba(9, 40, 53, .93), rgba(7, 18, 32, .99)); }
.portal-inbox-filter { display: grid; grid-template-columns: minmax(190px, .5fr) minmax(0, 1fr); gap: 11px 14px; margin: 0 0 14px; padding: 13px; border: 1px solid rgba(120, 203, 220, .15); border-radius: 14px; background: rgba(4, 24, 38, .48); }
.portal-inbox-filter .portal-field { margin: 0; }
.portal-inbox-filter .portal-form-footer { grid-column: 1 / -1; margin-top: 0; }
.portal-inbox-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(120, 203, 220, .14); color: #a7cbd1; font-size: 10px; font-weight: 700; }
.portal-inbox-pagination > div { display: flex; flex-wrap: wrap; gap: 7px; }
.portal-inbox-pagination .portal-button { min-height: 31px; padding: 6px 9px; font-size: 9px; }
.portal-inbox-list { display: grid; gap: 10px; }
.portal-inbox-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border: 1px solid rgba(126, 197, 216, .17); border-radius: 16px; background: linear-gradient(148deg, rgba(13, 39, 55, .96), rgba(7, 18, 32, .99)); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.portal-inbox-item:hover { border-color: rgba(128, 221, 226, .42); background: linear-gradient(148deg, rgba(14, 50, 65, .98), rgba(8, 20, 35, 1)); transform: translateY(-1px); }
.portal-inbox-item:focus-within { border-color: rgba(128, 221, 226, .5); background: linear-gradient(148deg, rgba(14, 50, 65, .98), rgba(8, 20, 35, 1)); }
.portal-inbox-item[data-severity="urgent"] { border-color: rgba(255, 185, 105, .4); background: linear-gradient(148deg, rgba(63, 45, 33, .86), rgba(13, 22, 35, .99)); }
.portal-inbox-item[data-state="dismissed"] { opacity: .72; }
.portal-inbox-item-main { display: grid; min-width: 0; gap: 8px; }
.portal-inbox-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px; }
.portal-inbox-kind { color: #a8e3ed; font-size: 9px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.portal-inbox-item h3 { margin: 0; color: #effcff; font-size: 14px; letter-spacing: -.02em; }
.portal-inbox-item p { max-width: 680px; margin: -1px 0 0; color: #a8c0c5; font-size: 10px; line-height: 1.58; }
.portal-inbox-item-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 3px 0 0; }
.portal-inbox-item-meta > div { min-width: 0; padding: 9px 10px; border: 1px solid rgba(143, 208, 207, .11); border-radius: 10px; background: rgba(3, 16, 29, .33); }
.portal-inbox-item-meta dt { color: #8faeb6; font-size: 9px; font-weight: 750; }
.portal-inbox-item-meta dd { margin: 4px 0 0; overflow: hidden; color: #e0f6fa; font-size: 10px; font-weight: 680; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.portal-inbox-item-actions { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: 7px; align-items: center; justify-content: flex-end; max-width: 260px; }
.portal-inbox-action { display: inline-flex; min-width: 0; }
.portal-inbox-item-actions .portal-button { min-height: 36px; padding: 7px 9px; font-size: 10px; }
.portal-inbox-run { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0 0; }
.portal-inbox-run > div { display: grid; gap: 4px; min-width: 0; }
.portal-inbox-run strong { color: #e6fbff; font-size: 12px; }
.portal-inbox-run small { color: #9db9bd; font-size: 10px; line-height: 1.45; }
.portal-badge[data-status="unread"] { border-color: rgba(111, 207, 228, .36); background: rgba(75, 184, 214, .13); color: #b7effa; }
.portal-badge[data-status="read"] { border-color: rgba(126, 193, 185, .25); background: rgba(90, 157, 148, .1); color: #bbdbd6; }
.portal-badge[data-status="dismissed"] { border-color: rgba(149, 164, 185, .23); background: rgba(118, 136, 161, .1); color: #c3ccd9; }

@media (max-width: 980px) {
  .portal-inbox-intro, .portal-inbox-layout { grid-template-columns: 1fr; }
  .portal-inbox-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portal-inbox-intro { padding: 20px; border-radius: 18px; }
  .portal-inbox-intro dl { grid-template-columns: 1fr; }
  .portal-inbox-filter { grid-template-columns: 1fr; }
  .portal-inbox-filter .portal-form-footer { grid-column: auto; }
  .portal-inbox-pagination { align-items: flex-start; flex-direction: column; }
  .portal-inbox-item { grid-template-columns: 1fr; align-items: start; }
  .portal-inbox-item-actions { justify-content: flex-start; max-width: none; }
}
@media (max-width: 440px) {
  .portal-inbox-metrics, .portal-inbox-item-meta { grid-template-columns: 1fr; }
  .portal-inbox-metrics .portal-metric { min-height: 0; }
  .portal-inbox-item-actions, .portal-inbox-action, .portal-inbox-item-actions .portal-button { width: 100%; }
  .portal-inbox-item-actions .portal-button { min-height: 40px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-inbox-item { transition: none; }
  .portal-inbox-item:hover { transform: none; }
}

/* Cinematic Concept Composer keeps the high-information planning output calm
   and scannable. Everything in this surface is reviewable text; the UI never
   implies a media preview, a provider response or a finished advertisement. */
.portal-cinematic-concept { display: grid; gap: 20px; min-width: 0; color: var(--portal-text); }
.portal-cinematic-concept .portal-section-kicker { font-size: 12px; letter-spacing: .06em; }
.portal-cinematic-concept :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 2px; }
.portal-cinematic-concept :is(.portal-button, input:not([type="checkbox"]), select) { min-height: var(--portal-control-height); }
.portal-cinematic-concept-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 20px; align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: var(--portal-surface-strong); box-shadow: var(--portal-shadow); }
.portal-cinematic-concept-intro h2 { margin: 8px 0 10px; color: var(--portal-text); font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.portal-cinematic-concept-intro p { max-width: 770px; margin: 0; color: var(--portal-muted-strong); font-size: 15px; line-height: 1.65; }
.portal-cinematic-concept-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-cinematic-concept-intro dl > div { min-width: 0; min-height: 112px; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface); }
.portal-cinematic-concept-intro dt { color: var(--portal-accent); font-size: 24px; font-weight: 850; letter-spacing: -.04em; }
.portal-cinematic-concept-intro dd { margin: 8px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.portal-cinematic-concept-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 20px; align-items: start; }
.portal-cinematic-concept-form, .portal-cinematic-concept-boundary, .portal-cinematic-concept-result { background: var(--portal-surface); }
.portal-cinematic-concept-boundary { display: grid; gap: 16px; }
.portal-cinematic-concept-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-cinematic-concept-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-cinematic-concept-guard-list strong { overflow: hidden; color: var(--portal-muted-strong); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.portal-cinematic-concept-guard-list em { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--portal-border); border-radius: 999px; background: var(--portal-surface-soft); color: var(--portal-muted-strong); font-size: 12px; font-style: normal; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.portal-cinematic-concept-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.portal-cinematic-concept-meta span { display: inline-flex; min-width: 0; max-width: 100%; padding: 7px 10px; border: 1px solid var(--portal-border); border-radius: 999px; background: var(--portal-surface-soft); color: var(--portal-muted-strong); font-size: 13px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.portal-cinematic-concept-directions, .portal-cinematic-concept-storyboard, .portal-cinematic-concept-scripts, .portal-cinematic-concept-motion, .portal-cinematic-concept-prompts { display: grid; gap: 14px; margin-top: 16px; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface-strong); }
.portal-cinematic-concept-directions ol, .portal-cinematic-concept-storyboard ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-cinematic-concept-directions li, .portal-cinematic-concept-storyboard li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-cinematic-concept-directions li[data-selected="true"] { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); }
.portal-cinematic-concept-index { display: inline-grid; width: 32px; height: 28px; place-items: center; border: 1px solid var(--portal-border-strong); border-radius: 8px; background: var(--portal-bg-deep); color: var(--portal-accent); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.portal-cinematic-concept-direction-head, .portal-cinematic-concept-storyboard-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.portal-cinematic-concept-direction-head strong, .portal-cinematic-concept-storyboard-head strong { color: var(--portal-text); font-size: 14px; letter-spacing: -.01em; }
.portal-cinematic-concept-direction-head em, .portal-cinematic-concept-storyboard-head span, .portal-cinematic-concept-count { padding: 4px 8px; border: 1px solid var(--portal-border); border-radius: 999px; background: var(--portal-surface-soft); color: var(--portal-muted-strong); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .025em; }
.portal-cinematic-concept-directions dl, .portal-cinematic-concept-storyboard dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.portal-cinematic-concept-directions dl > div, .portal-cinematic-concept-storyboard dl > div { min-width: 0; padding: 10px; border-radius: 8px; background: var(--portal-surface); }
.portal-cinematic-concept-directions dt, .portal-cinematic-concept-storyboard dt, .portal-cinematic-concept-prompt dt { color: var(--portal-muted); font-size: 12px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.portal-cinematic-concept-directions dd, .portal-cinematic-concept-storyboard dd, .portal-cinematic-concept-prompt dd { margin: 5px 0 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-cinematic-concept-scripts { grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr); align-items: start; }
.portal-cinematic-concept-scripts h3, .portal-cinematic-concept-motion h3, .portal-cinematic-concept-prompts h3 { margin: 4px 0 0; color: var(--portal-text); font-size: 16px; letter-spacing: -.025em; }
.portal-cinematic-concept-scripts > div:last-child { display: grid; gap: 8px; }
.portal-cinematic-concept-script { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-cinematic-concept-script > span { display: inline-grid; min-height: 28px; place-items: center; border: 1px solid var(--portal-border-strong); border-radius: 7px; color: var(--portal-accent); font-size: 12px; font-weight: 800; }
.portal-cinematic-concept-script pre { min-width: 0; max-height: 190px; margin: 0; overflow: auto; color: var(--portal-muted-strong); font: 13px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-cinematic-concept-storyboard dl > div:first-child { grid-column: 1 / -1; }
.portal-cinematic-concept-motion { grid-template-columns: minmax(200px, .38fr) minmax(0, 1fr); align-items: start; }
.portal-cinematic-concept-motion p, .portal-cinematic-concept-prompts p { margin: 8px 0 0; color: var(--portal-muted); font-size: 14px; line-height: 1.58; }
.portal-cinematic-concept-motion > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-cinematic-concept-motion > dl > div { display: grid; gap: 8px; min-width: 0; padding: 13px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-cinematic-concept-motion dt { color: var(--portal-text); font-size: 14px; font-weight: 750; }
.portal-cinematic-concept-motion dd { margin: 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-cinematic-concept-prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-cinematic-concept-shot-list { display: grid; grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr); grid-column: 1 / -1; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-cinematic-concept-shot-list h3 { margin: 4px 0 0; color: var(--portal-text); font-size: 15px; letter-spacing: -.015em; }
.portal-cinematic-concept-shot-list p { margin: 7px 0 0; color: var(--portal-muted); font-size: 14px; line-height: 1.55; }
.portal-cinematic-concept-shot-list ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-cinematic-concept-shot-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; padding: 10px; border: 1px solid var(--portal-border); border-radius: 8px; background: var(--portal-surface); }
.portal-cinematic-concept-shot-list li > span { display: inline-grid; width: 28px; min-height: 26px; place-items: center; border: 1px solid var(--portal-border-strong); border-radius: 7px; color: var(--portal-accent); font-size: 12px; font-weight: 800; }
.portal-cinematic-concept-shot-list li p { margin: 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.portal-cinematic-concept-prompt { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-cinematic-concept-prompt > div { display: grid; gap: 5px; }
.portal-cinematic-concept-prompt strong { color: var(--portal-text); font-size: 14px; }
.portal-cinematic-concept-prompt dl { display: grid; gap: 9px; margin: 0; }
.portal-cinematic-concept-prompt dl > div { min-width: 0; padding-top: 9px; border-top: 1px solid var(--portal-border); }
.portal-cinematic-concept-prompt dd { max-height: 170px; overflow: auto; }
.portal-cinematic-concept-review { display: grid; gap: 10px; margin-top: 16px; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface-soft); }
.portal-cinematic-concept-review strong { color: var(--portal-warning); font-size: 14px; }
.portal-cinematic-concept-review p, .portal-cinematic-concept-review ul { margin: 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.58; }
.portal-cinematic-concept-review ul { display: grid; gap: 7px; padding-left: 20px; }
.portal-cinematic-concept-review > div { padding-top: 10px; border-top: 1px solid var(--portal-border); }
.portal-cinematic-concept-result .portal-form-footer { align-items: flex-start; }
.portal-cinematic-concept-result[data-stale] { border-color: var(--portal-warning); }
.portal-cinematic-concept-stale-note { color: var(--portal-warning); font-weight: 650; line-height: 1.5; }
.portal-script-to-screen-planner [data-script-to-screen-rendered-result][data-stale],
.portal-script-to-screen-planner [data-script-to-screen-saved-receipt][data-stale] { border-color: var(--portal-warning); }
.portal-script-to-screen-stale-note { color: var(--portal-warning); font-weight: 650; line-height: 1.5; }

@media (max-width: 980px) {
  .portal-cinematic-concept-intro, .portal-cinematic-concept-layout, .portal-cinematic-concept-scripts, .portal-cinematic-concept-motion { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-cinematic-concept-intro { padding: 22px; border-radius: 18px; }
  .portal-cinematic-concept :is(.portal-button, input:not([type="checkbox"]), select) { min-height: 44px; }
  .portal-cinematic-concept-intro dl, .portal-cinematic-concept-guard-list, .portal-cinematic-concept-directions dl, .portal-cinematic-concept-storyboard dl, .portal-cinematic-concept-motion > dl, .portal-cinematic-concept-prompt-grid, .portal-cinematic-concept-shot-list { grid-template-columns: 1fr; }
  .portal-cinematic-concept-storyboard dl > div:first-child { grid-column: auto; }
}
@media (max-width: 440px) {
  .portal-cinematic-concept-directions, .portal-cinematic-concept-storyboard, .portal-cinematic-concept-scripts, .portal-cinematic-concept-motion, .portal-cinematic-concept-prompts { padding: 14px; }
  .portal-cinematic-concept-directions li, .portal-cinematic-concept-storyboard li { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 12px; }
  .portal-cinematic-concept-index { width: 28px; height: 26px; font-size: 12px; }
  .portal-cinematic-concept-direction-head, .portal-cinematic-concept-storyboard-head { align-items: flex-start; flex-direction: column; }
  .portal-cinematic-concept-script { grid-template-columns: 36px minmax(0, 1fr); padding: 10px; }
}

/* Creative Motion Guide is deliberately a calm review workspace. Cards are
   explicit choices, not previews, and every result remains visually textual
   so a customer never mistakes a guide for a rendered video or a provider
   completion. */
.portal-creative-motion-guide { display: grid; gap: 20px; min-width: 0; color: var(--portal-text); }
.portal-creative-motion-guide :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 3px; }
.portal-creative-motion-guide :is(.portal-button, input:not([type="checkbox"]), select) { min-height: var(--portal-control-height); }
.portal-creative-motion-guide-intro { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr); gap: 20px; align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: radial-gradient(circle at 88% 12%, rgba(81, 213, 188, .13), transparent 18rem), var(--portal-surface-strong); box-shadow: var(--portal-shadow); }
.portal-creative-motion-guide-intro h2 { max-width: 800px; margin: 8px 0 10px; color: var(--portal-text); font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.portal-creative-motion-guide-intro p { max-width: 760px; margin: 0; color: var(--portal-muted-strong); font-size: 15px; line-height: 1.65; }
.portal-creative-motion-guide-intro ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-creative-motion-guide-intro li { display: grid; gap: 7px; min-width: 0; min-height: 104px; padding: 13px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: rgba(7, 15, 23, .26); color: var(--portal-muted); font-size: 12px; font-weight: 700; line-height: 1.35; }
.portal-creative-motion-guide-intro li span { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--portal-border); border-radius: 8px; color: var(--portal-muted-strong); font-variant-numeric: tabular-nums; }
.portal-creative-motion-guide-intro li[data-active="true"] { border-color: var(--portal-border-strong); background: rgba(28, 153, 136, .12); color: var(--portal-text); }
.portal-creative-motion-guide-intro li[data-active="true"] span { border-color: rgba(108, 237, 214, .58); background: rgba(81, 213, 188, .14); color: var(--portal-accent); }
.portal-creative-motion-guide-layout { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(288px, .84fr); gap: 20px; align-items: start; }
.portal-creative-motion-guide-form, .portal-creative-motion-guide-boundary, .portal-creative-motion-guide-result { background: var(--portal-surface); }
.portal-creative-motion-guide-form .portal-form { display: grid; gap: 16px; }
.portal-creative-motion-guide-form textarea { min-height: 116px; resize: vertical; }
.portal-creative-motion-guide-boundary { display: grid; gap: 16px; }
.portal-creative-motion-guide-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-creative-motion-guide-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px 11px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-creative-motion-guide-guard-list strong { overflow: hidden; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.portal-creative-motion-guide-guard-list em { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--portal-border); border-radius: 999px; background: var(--portal-surface-soft); color: var(--portal-muted); font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.portal-creative-motion-guide-suggestions { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface-strong); }
.portal-creative-motion-guide-suggestions.is-stale { border-color: rgba(255, 211, 122, .42); background: rgba(107, 74, 25, .11); }
.portal-creative-motion-guide-suggestions-stale { margin: 0; padding: 10px 11px; border: 1px solid rgba(255, 211, 122, .28); border-radius: var(--portal-radius-sm); background: rgba(107, 74, 25, .14); color: var(--portal-warning) !important; font-weight: 650; }
.portal-creative-motion-guide-suggestions h3, .portal-creative-motion-guide-style h3 { margin: 4px 0 0; color: var(--portal-text); font-size: 17px; letter-spacing: -.025em; }
.portal-creative-motion-guide-suggestions p, .portal-creative-motion-guide-style p { margin: 7px 0 0; color: var(--portal-muted); font-size: 14px; line-height: 1.58; }
.portal-creative-motion-guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.portal-creative-motion-guide-card { display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 192px; padding: 15px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); color: var(--portal-muted-strong); text-align: left; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease; }
.portal-creative-motion-guide-card:not(:disabled):hover { border-color: rgba(117, 234, 214, .48); background: rgba(24, 71, 70, .27); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.portal-creative-motion-guide-card[aria-pressed="true"] { border-color: var(--portal-border-strong); background: rgba(24, 125, 113, .18); box-shadow: inset 0 0 0 1px rgba(81, 213, 188, .13); }
.portal-creative-motion-guide-card:disabled { opacity: .55; }
.portal-creative-motion-guide-card-index { display: inline-grid; width: 30px; height: 27px; place-items: center; border: 1px solid var(--portal-border-strong); border-radius: 8px; background: var(--portal-surface-soft); color: var(--portal-accent); font-size: 12px; font-weight: 850; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.portal-creative-motion-guide-card strong { color: var(--portal-text); font-size: 15px; line-height: 1.35; letter-spacing: -.015em; overflow-wrap: anywhere; }
.portal-creative-motion-guide-card > span:not(.portal-creative-motion-guide-card-index) { display: grid; gap: 3px; min-width: 0; color: var(--portal-muted); font-size: 12px; line-height: 1.48; overflow-wrap: anywhere; }
.portal-creative-motion-guide-card > span b { color: var(--portal-muted-strong); font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.portal-creative-motion-guide-empty { display: grid; gap: 6px; min-height: 132px; align-content: center; padding: 18px; border: 1px dashed var(--portal-border-strong); border-radius: var(--portal-radius-sm); background: rgba(24, 125, 113, .07); }
.portal-creative-motion-guide-empty strong { color: var(--portal-text); font-size: 14px; }
.portal-creative-motion-guide-empty p { margin: 0; color: var(--portal-muted); font-size: 14px; line-height: 1.55; }
.portal-creative-motion-guide-style { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .45fr); gap: 16px; align-items: end; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-bg); }
.portal-creative-motion-guide-style .portal-field { margin: 0; }
.portal-creative-motion-guide-result { display: grid; gap: 16px; }
.portal-creative-motion-guide-result[data-stale] { border-color: var(--portal-warning); }
.portal-creative-motion-guide-stale-note { margin: 0; color: var(--portal-warning); font-size: 14px; font-weight: 650; line-height: 1.55; }
.portal-creative-motion-guide-selected { display: grid; grid-template-columns: minmax(180px, .38fr) minmax(0, .62fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface-strong); }
.portal-creative-motion-guide-selected h3 { margin: 4px 0 0; color: var(--portal-text); font-size: 18px; letter-spacing: -.025em; }
.portal-creative-motion-guide-selected p { margin: 8px 0 0; color: var(--portal-muted); font-size: 14px; line-height: 1.58; }
.portal-creative-motion-guide-selected dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-creative-motion-guide-selected dl > div { min-width: 0; padding: 11px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-creative-motion-guide-selected dt { color: var(--portal-muted); font-size: 12px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.portal-creative-motion-guide-selected dd { margin: 6px 0 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.56; overflow-wrap: anywhere; }
.portal-creative-motion-guide-ideas, .portal-creative-motion-guide-editorial, .portal-creative-motion-guide-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-creative-motion-guide-ideas article, .portal-creative-motion-guide-editorial article, .portal-creative-motion-guide-prompts article { min-width: 0; padding: 14px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-creative-motion-guide-ideas p, .portal-creative-motion-guide-editorial p { margin: 8px 0 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-creative-motion-guide-timeline { display: grid; grid-template-columns: minmax(190px, .34fr) minmax(0, .66fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface-strong); }
.portal-creative-motion-guide-timeline h3 { margin: 4px 0 0; color: var(--portal-text); font-size: 17px; letter-spacing: -.025em; }
.portal-creative-motion-guide-timeline p { margin: 7px 0 0; color: var(--portal-muted); font-size: 14px; line-height: 1.58; }
.portal-creative-motion-guide-timeline ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-creative-motion-guide-timeline li { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-sm); background: var(--portal-bg); }
.portal-creative-motion-guide-timeline li strong { color: var(--portal-accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.portal-creative-motion-guide-timeline li span { color: var(--portal-muted-strong); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.portal-creative-motion-guide-prompts pre { max-height: 250px; margin: 8px 0 0; overflow: auto; color: var(--portal-muted-strong); font: 13px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-creative-motion-guide-editorial { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-creative-motion-guide-editorial ul, .portal-creative-motion-guide-editorial ol, .portal-creative-motion-guide-review ul { display: grid; gap: 7px; margin: 8px 0 0; padding-left: 19px; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.55; }
.portal-creative-motion-guide-review { display: grid; gap: 9px; padding: 14px; border: 1px solid rgba(255, 211, 122, .27); border-radius: var(--portal-radius); background: rgba(107, 74, 25, .16); }
.portal-creative-motion-guide-review strong { color: var(--portal-warning); font-size: 14px; }

@media (max-width: 980px) {
  .portal-creative-motion-guide-intro, .portal-creative-motion-guide-layout, .portal-creative-motion-guide-selected, .portal-creative-motion-guide-timeline { grid-template-columns: 1fr; }
  .portal-creative-motion-guide-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portal-creative-motion-guide-intro { padding: 22px; border-radius: 18px; }
  .portal-creative-motion-guide :is(.portal-button, input:not([type="checkbox"]), select) { min-height: 44px; }
  .portal-creative-motion-guide-intro ol, .portal-creative-motion-guide-guard-list, .portal-creative-motion-guide-cards, .portal-creative-motion-guide-style, .portal-creative-motion-guide-selected dl, .portal-creative-motion-guide-ideas, .portal-creative-motion-guide-prompts { grid-template-columns: 1fr; }
  .portal-creative-motion-guide-intro li { min-height: auto; grid-template-columns: 28px minmax(0, 1fr); align-items: center; }
}
@media (max-width: 440px) {
  .portal-creative-motion-guide-suggestions, .portal-creative-motion-guide-style, .portal-creative-motion-guide-selected, .portal-creative-motion-guide-timeline { padding: 13px; }
  .portal-creative-motion-guide-editorial { grid-template-columns: 1fr; }
  .portal-creative-motion-guide-card { min-height: 0; padding: 13px; }
  .portal-creative-motion-guide-timeline li { grid-template-columns: 58px minmax(0, 1fr); padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-creative-motion-guide-card { transition: none; }
}

/* Storyboard Prompt Pack Composer is a text-only planning surface. It uses a
   calm editorial hierarchy so a customer can compare concepts and prompts
   without mistaking a direction for generated media or a finished delivery. */
.portal-storyboard-composer { display: grid; gap: 18px; min-width: 0; }
.portal-storyboard-composer-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 19px; align-items: center; padding: clamp(22px, 3vw, 35px); border: 1px solid rgba(119, 191, 246, .25); border-radius: 22px; background: radial-gradient(circle at 90% 11%, rgba(65, 155, 240, .22), transparent 18rem), radial-gradient(circle at 10% 90%, rgba(123, 93, 234, .16), transparent 19rem), linear-gradient(145deg, rgba(21, 45, 82, .98), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .18); }
.portal-storyboard-composer-intro h2 { margin: 7px 0 9px; color: #eaf7ff; font-size: clamp(27px, 3vw, 41px); letter-spacing: -.049em; }
.portal-storyboard-composer-intro p { max-width: 770px; margin: 0; color: #bfd3e4; line-height: 1.72; }
.portal-storyboard-composer-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-storyboard-composer-intro dl > div { min-width: 0; min-height: 108px; padding: 15px; border: 1px solid rgba(162, 215, 255, .16); border-radius: 15px; background: rgba(6, 27, 54, .45); }
.portal-storyboard-composer-intro dt { color: #a6e2ff; font-size: 22px; font-weight: 850; letter-spacing: -.045em; }
.portal-storyboard-composer-intro dd { margin: 7px 0 0; color: #a8c3d6; font-size: 10px; line-height: 1.46; }
.portal-storyboard-composer-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-storyboard-composer-form { background: linear-gradient(150deg, rgba(20, 46, 79, .98), rgba(7, 17, 31, .99)); }
.portal-storyboard-composer-boundary, .portal-storyboard-composer-result { background: linear-gradient(150deg, rgba(25, 36, 73, .96), rgba(7, 17, 31, .99)); }
.portal-storyboard-composer-boundary { display: grid; gap: 14px; }
.portal-storyboard-composer-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-storyboard-composer-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(141, 201, 251, .16); border-radius: 11px; background: rgba(10, 23, 49, .52); }
.portal-storyboard-composer-guard-list strong { overflow: hidden; color: #d7efff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-storyboard-composer-guard-list em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(150, 211, 255, .23); border-radius: 999px; background: rgba(60, 159, 230, .12); color: #b7e8ff; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-storyboard-composer-meta, .portal-storyboard-composer-hashtags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portal-storyboard-composer-meta span, .portal-storyboard-composer-hashtags span { display: inline-flex; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(141, 199, 255, .18); border-radius: 999px; background: rgba(72, 105, 193, .18); color: #d7e9ff; font-size: 9px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.portal-storyboard-composer-hashtags span { border-color: rgba(121, 223, 207, .19); background: rgba(44, 156, 141, .11); color: #b7f2e5; }
.portal-storyboard-composer-directions, .portal-storyboard-composer-shots, .portal-storyboard-composer-timeline { display: grid; gap: 12px; margin-top: 15px; padding: 15px; border: 1px solid rgba(151, 178, 255, .17); border-radius: 17px; background: linear-gradient(145deg, rgba(26, 31, 70, .58), rgba(20, 36, 66, .51)); }
.portal-storyboard-composer-directions ol, .portal-storyboard-composer-shots ol, .portal-storyboard-composer-meta-prompts ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-storyboard-composer-directions li, .portal-storyboard-composer-shots li, .portal-storyboard-composer-meta-prompts li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 12px; border: 1px solid rgba(175, 192, 255, .14); border-radius: 14px; background: rgba(5, 15, 31, .39); }
.portal-storyboard-composer-directions li[data-selected="true"] { border-color: rgba(114, 213, 255, .43); background: linear-gradient(145deg, rgba(24, 74, 105, .58), rgba(20, 29, 64, .66)); }
.portal-storyboard-composer-index { display: inline-grid; width: 31px; height: 25px; place-items: center; border: 1px solid rgba(142, 213, 255, .25); border-radius: 8px; background: rgba(63, 164, 224, .11); color: #d4f1ff; font-size: 8px; font-weight: 820; letter-spacing: .06em; }
.portal-storyboard-composer-direction-head, .portal-storyboard-composer-shot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.portal-storyboard-composer-direction-head strong, .portal-storyboard-composer-shot-head strong, .portal-storyboard-composer-meta-prompts strong { color: #e6f5ff; font-size: 12px; letter-spacing: -.015em; }
.portal-storyboard-composer-direction-head em, .portal-storyboard-composer-shot-head span, .portal-storyboard-composer-count { padding: 3px 7px; border: 1px solid rgba(136, 208, 255, .22); border-radius: 999px; background: rgba(57, 151, 214, .11); color: #baebff; font-size: 8px; font-style: normal; font-weight: 770; letter-spacing: .04em; }
.portal-storyboard-composer-direction-head em { font-size: 0; }
.portal-storyboard-composer-direction-head em::after { content: "Đã chọn"; font-size: 8px; }
.portal-storyboard-composer-directions dl, .portal-storyboard-composer-shots dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 0; }
.portal-storyboard-composer-directions dl > div, .portal-storyboard-composer-shots dl > div { min-width: 0; padding: 8px; border-radius: 9px; background: rgba(80, 113, 178, .11); }
.portal-storyboard-composer-directions dt, .portal-storyboard-composer-shots dt, .portal-storyboard-composer-prompt dt, .portal-storyboard-composer-copy dt { color: #aebfe9; font-size: 8px; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.portal-storyboard-composer-directions dd, .portal-storyboard-composer-shots dd, .portal-storyboard-composer-prompt dd, .portal-storyboard-composer-copy dd { margin: 4px 0 0; color: #cad9e8; font-size: 9px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-storyboard-composer-canon { display: grid; grid-template-columns: minmax(180px, .36fr) minmax(0, .64fr); gap: 14px; align-items: start; margin-top: 15px; padding: 15px; border: 1px solid rgba(109, 222, 202, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(10, 55, 61, .56), rgba(18, 31, 58, .61)); }
.portal-storyboard-composer-canon h3, .portal-storyboard-composer-prompts h3, .portal-storyboard-composer-meta-prompts h3, .portal-storyboard-composer-copy h3 { margin: 4px 0 0; color: #e3f8f2; font-size: 15px; letter-spacing: -.03em; }
.portal-storyboard-composer-canon p, .portal-storyboard-composer-prompts p, .portal-storyboard-composer-meta-prompts p { margin: 7px 0 0; color: #b7d0d1; font-size: 10px; line-height: 1.58; }
.portal-storyboard-composer-canon > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-storyboard-composer-canon > dl > div, .portal-storyboard-composer-copy dl > div { min-width: 0; padding: 11px; border: 1px solid rgba(120, 217, 203, .14); border-radius: 11px; background: rgba(6, 27, 42, .38); }
.portal-storyboard-composer-canon dt, .portal-storyboard-composer-copy dt { color: #baf0e3; font-size: 9px; font-weight: 780; text-transform: uppercase; letter-spacing: .055em; }
.portal-storyboard-composer-canon dd, .portal-storyboard-composer-copy dd { margin: 5px 0 0; color: #cde3e3; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.portal-storyboard-composer-canon-lists { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-storyboard-composer-canon-list { min-width: 0; padding: 11px; border: 1px solid rgba(120, 217, 203, .13); border-radius: 11px; background: rgba(5, 27, 42, .35); }
.portal-storyboard-composer-canon-list strong { color: #c5f4e9; font-size: 10px; }
.portal-storyboard-composer-canon-list p, .portal-storyboard-composer-canon-list ul { margin: 7px 0 0; color: #b6ced0; font-size: 9px; line-height: 1.56; }
.portal-storyboard-composer-canon-list ul { display: grid; gap: 5px; padding-left: 16px; }
.portal-storyboard-composer-prompts, .portal-storyboard-composer-meta-prompts, .portal-storyboard-composer-copy { display: grid; gap: 12px; margin-top: 15px; padding: 15px; border: 1px solid rgba(152, 182, 255, .16); border-radius: 16px; background: linear-gradient(145deg, rgba(26, 32, 68, .56), rgba(13, 20, 38, .63)); }
.portal-storyboard-composer-prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-storyboard-composer-prompt { display: grid; gap: 9px; min-width: 0; padding: 12px; border: 1px solid rgba(166, 193, 255, .15); border-radius: 12px; background: rgba(6, 15, 32, .42); }
.portal-storyboard-composer-prompt > div { display: grid; gap: 4px; }
.portal-storyboard-composer-prompt strong { color: #e2ecff; font-size: 11px; }
.portal-storyboard-composer-prompt dl { display: grid; gap: 8px; margin: 0; }
.portal-storyboard-composer-prompt dl > div { min-width: 0; padding-top: 8px; border-top: 1px solid rgba(162, 190, 255, .1); }
.portal-storyboard-composer-prompt dd { max-height: 210px; overflow: auto; }
.portal-storyboard-composer-prompt pre, .portal-storyboard-composer-meta-prompts pre { min-width: 0; max-height: 220px; margin: 5px 0 0; overflow: auto; color: #cbd9ef; font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-storyboard-composer-meta-prompts { background: linear-gradient(145deg, rgba(46, 34, 78, .56), rgba(13, 20, 38, .63)); }
.portal-storyboard-composer-meta-prompts li { border-color: rgba(198, 173, 255, .15); }
.portal-storyboard-composer-meta-prompts pre { margin-bottom: 0; }
.portal-storyboard-composer-copy { grid-template-columns: minmax(150px, .28fr) minmax(0, .72fr); align-items: start; background: linear-gradient(145deg, rgba(34, 58, 81, .54), rgba(13, 20, 38, .63)); }
.portal-storyboard-composer-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-storyboard-composer-hashtags { grid-column: 1 / -1; margin-top: 0; }
.portal-storyboard-composer-review { display: grid; gap: 9px; margin-top: 15px; padding: 14px; border: 1px solid rgba(255, 197, 117, .18); border-radius: 14px; background: rgba(63, 45, 27, .39); }
.portal-storyboard-composer-review strong { color: #ffe6b4; font-size: 11px; }
.portal-storyboard-composer-review p, .portal-storyboard-composer-review ul { margin: 0; color: #dec8a9; font-size: 10px; line-height: 1.58; }
.portal-storyboard-composer-review ul { display: grid; gap: 6px; padding-left: 17px; }
.portal-storyboard-composer-review > div { padding-top: 9px; border-top: 1px solid rgba(255, 197, 117, .13); }
.portal-storyboard-composer-result .portal-form-footer { align-items: flex-start; }
.portal-storyboard-composer [data-storyboard-composer-rendered-result][data-stale],
.portal-storyboard-composer [data-storyboard-composer-saved-receipt][data-stale] { border-color: var(--portal-warning); }
.portal-storyboard-composer-stale-note { color: var(--portal-warning); font-weight: 650; line-height: 1.5; }
.portal-image-motion-planner [data-image-motion-planner-rendered-result][data-stale],
.portal-image-motion-planner [data-image-motion-planner-saved-receipt][data-stale] { border-color: var(--portal-warning); }
.portal-image-motion-planner-stale-note { color: var(--portal-warning); font-weight: 650; line-height: 1.5; }

@media (max-width: 980px) {
  .portal-storyboard-composer-intro, .portal-storyboard-composer-layout, .portal-storyboard-composer-canon, .portal-storyboard-composer-copy { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-storyboard-composer-intro { padding: 20px; border-radius: 18px; }
  .portal-storyboard-composer-intro dl, .portal-storyboard-composer-guard-list, .portal-storyboard-composer-directions dl, .portal-storyboard-composer-shots dl, .portal-storyboard-composer-canon > dl, .portal-storyboard-composer-canon-lists, .portal-storyboard-composer-prompt-grid, .portal-storyboard-composer-copy dl { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .portal-storyboard-composer-directions, .portal-storyboard-composer-shots, .portal-storyboard-composer-canon, .portal-storyboard-composer-prompts, .portal-storyboard-composer-meta-prompts, .portal-storyboard-composer-copy { padding: 12px; }
  .portal-storyboard-composer-directions li, .portal-storyboard-composer-shots li, .portal-storyboard-composer-meta-prompts li { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .portal-storyboard-composer-index { width: 25px; height: 23px; font-size: 7px; }
  .portal-storyboard-composer-direction-head, .portal-storyboard-composer-shot-head { align-items: flex-start; flex-direction: column; }
}

/* Voice Direction Composer is intentionally a quiet planning surface: its
   hierarchy makes three text directions comparable without resembling an
   audio player, provider selector, output gallery, or delivery screen. */
.portal-voice-direction-composer { display: grid; gap: 18px; min-width: 0; }
.portal-voice-direction-composer-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 19px; align-items: center; padding: clamp(22px, 3vw, 35px); border: 1px solid rgba(194, 166, 255, .25); border-radius: 22px; background: radial-gradient(circle at 89% 10%, rgba(145, 105, 243, .23), transparent 18rem), radial-gradient(circle at 9% 91%, rgba(91, 203, 204, .16), transparent 19rem), linear-gradient(145deg, rgba(43, 35, 79, .98), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .18); }
.portal-voice-direction-composer-intro h2 { margin: 7px 0 9px; color: #f1edff; font-size: clamp(27px, 3vw, 41px); letter-spacing: -.049em; }
.portal-voice-direction-composer-intro p { max-width: 770px; margin: 0; color: #cbc5df; line-height: 1.72; }
.portal-voice-direction-composer-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-voice-direction-composer-intro dl > div { min-width: 0; min-height: 108px; padding: 15px; border: 1px solid rgba(210, 194, 255, .16); border-radius: 15px; background: rgba(27, 21, 58, .48); }
.portal-voice-direction-composer-intro dt { color: #d4c6ff; font-size: 23px; font-weight: 850; letter-spacing: -.045em; }
.portal-voice-direction-composer-intro dd { margin: 7px 0 0; color: #b8b0cf; font-size: 10px; line-height: 1.46; }
.portal-voice-direction-composer-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-voice-direction-composer-form { background: linear-gradient(150deg, rgba(43, 35, 79, .98), rgba(7, 17, 31, .99)); }
.portal-voice-direction-composer-boundary, .portal-voice-direction-composer-result { background: linear-gradient(150deg, rgba(35, 31, 70, .96), rgba(7, 17, 31, .99)); }
.portal-voice-direction-composer-boundary { display: grid; gap: 14px; }
.portal-voice-direction-composer-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-voice-direction-composer-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(202, 182, 255, .16); border-radius: 11px; background: rgba(24, 18, 52, .52); }
.portal-voice-direction-composer-guard-list strong { overflow: hidden; color: #e6ddff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-voice-direction-composer-guard-list em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(203, 184, 255, .23); border-radius: 999px; background: rgba(144, 111, 238, .12); color: #d9ccff; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-voice-direction-composer-meta, .portal-voice-direction-composer-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portal-voice-direction-composer-meta span, .portal-voice-direction-composer-tags span { display: inline-flex; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(199, 183, 255, .19); border-radius: 999px; background: rgba(125, 98, 202, .15); color: #ded5ff; font-size: 9px; font-weight: 720; line-height: 1.45; overflow-wrap: anywhere; }
.portal-voice-direction-composer-tags { margin-top: 8px; }
.portal-voice-direction-composer-tags span { padding: 4px 7px; border-color: rgba(130, 219, 218, .18); background: rgba(51, 151, 154, .11); color: #c8f4ef; font-size: 8px; }
.portal-voice-direction-composer-suggestions { display: grid; gap: 12px; margin-top: 15px; padding: 15px; border: 1px solid rgba(183, 175, 255, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(33, 30, 78, .59), rgba(19, 31, 61, .54)); }
.portal-voice-direction-composer-suggestions ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-voice-direction-composer-suggestions li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 12px; border: 1px solid rgba(190, 181, 252, .14); border-radius: 14px; background: rgba(5, 15, 31, .4); }
.portal-voice-direction-composer-suggestions li[data-selected="true"] { border-color: rgba(144, 221, 212, .43); background: linear-gradient(145deg, rgba(19, 77, 79, .56), rgba(36, 31, 77, .67)); box-shadow: inset 0 0 0 1px rgba(117, 230, 215, .08); }
.portal-voice-direction-composer-index { display: inline-grid; width: 31px; height: 25px; place-items: center; border: 1px solid rgba(201, 188, 255, .25); border-radius: 8px; background: rgba(130, 105, 219, .12); color: #e1d9ff; font-size: 8px; font-weight: 820; letter-spacing: .06em; }
.portal-voice-direction-composer-suggestion-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.portal-voice-direction-composer-suggestion-head strong { color: #f0edff; font-size: 12px; letter-spacing: -.015em; }
.portal-voice-direction-composer-suggestion-head em { padding: 3px 7px; border: 1px solid rgba(129, 232, 220, .23); border-radius: 999px; background: rgba(47, 180, 166, .12); color: #c0f7ed; font-size: 8px; font-style: normal; font-weight: 770; letter-spacing: .04em; }
.portal-voice-direction-composer-suggestions dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 0; }
.portal-voice-direction-composer-suggestions dl > div { min-width: 0; padding: 8px; border-radius: 9px; background: rgba(91, 80, 150, .12); }
.portal-voice-direction-composer-suggestions dl > div:last-child { grid-column: 1 / -1; }
.portal-voice-direction-composer-suggestions dt, .portal-voice-direction-composer-delivery dt { color: #beb2e5; font-size: 8px; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.portal-voice-direction-composer-suggestions dd, .portal-voice-direction-composer-delivery dd { margin: 4px 0 0; color: #d2cde2; font-size: 9px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-voice-direction-composer-suggestions pre { min-width: 0; max-height: 150px; margin: 0; overflow: auto; color: #d9d4ed; font: 9px/1.57 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-voice-direction-composer-delivery { display: grid; grid-template-columns: minmax(180px, .37fr) minmax(0, .63fr); gap: 14px; align-items: start; margin-top: 15px; padding: 15px; border: 1px solid rgba(107, 220, 205, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(10, 57, 62, .57), rgba(20, 30, 61, .61)); }
.portal-voice-direction-composer-delivery h3 { margin: 4px 0 0; color: #e0faf3; font-size: 15px; letter-spacing: -.03em; }
.portal-voice-direction-composer-delivery p { margin: 7px 0 0; color: #b7d3d0; font-size: 10px; line-height: 1.58; }
.portal-voice-direction-composer-delivery > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-voice-direction-composer-delivery > dl > div { min-width: 0; padding: 11px; border: 1px solid rgba(123, 221, 207, .14); border-radius: 11px; background: rgba(6, 27, 43, .4); }
.portal-voice-direction-composer-review { display: grid; gap: 9px; margin-top: 15px; padding: 14px; border: 1px solid rgba(255, 197, 117, .18); border-radius: 14px; background: rgba(63, 45, 27, .39); }
.portal-voice-direction-composer-review strong { color: #ffe6b4; font-size: 11px; }
.portal-voice-direction-composer-review p, .portal-voice-direction-composer-review ul { margin: 0; color: #dec8a9; font-size: 10px; line-height: 1.58; }
.portal-voice-direction-composer-review ul { display: grid; gap: 6px; padding-left: 17px; }
.portal-voice-direction-composer-review > div { padding-top: 9px; border-top: 1px solid rgba(255, 197, 117, .13); }
.portal-voice-direction-composer-result .portal-form-footer { align-items: flex-start; }

@media (max-width: 980px) {
  .portal-voice-direction-composer-intro, .portal-voice-direction-composer-layout, .portal-voice-direction-composer-delivery { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-voice-direction-composer-intro { padding: 20px; border-radius: 18px; }
  .portal-voice-direction-composer-intro dl, .portal-voice-direction-composer-guard-list, .portal-voice-direction-composer-suggestions dl, .portal-voice-direction-composer-delivery > dl { grid-template-columns: 1fr; }
  .portal-voice-direction-composer-suggestions dl > div:last-child { grid-column: auto; }
}
@media (max-width: 440px) {
  .portal-voice-direction-composer-suggestions, .portal-voice-direction-composer-delivery { padding: 12px; }
  .portal-voice-direction-composer-suggestions li { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .portal-voice-direction-composer-index { width: 25px; height: 23px; font-size: 7px; }
  .portal-voice-direction-composer-suggestion-head { align-items: flex-start; flex-direction: column; }
}

/* Music Prompt Composer stays intentionally editorial: it compares three
   copy-friendly directions without resembling an audio player, a music
   catalog, provider selector, generated track or delivery screen. */
.portal-music-prompt-composer { display: grid; gap: 18px; min-width: 0; }
.portal-music-prompt-composer-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 19px; align-items: center; padding: clamp(22px, 3vw, 35px); border: 1px solid rgba(112, 221, 193, .25); border-radius: 22px; background: radial-gradient(circle at 89% 10%, rgba(45, 180, 161, .23), transparent 18rem), radial-gradient(circle at 8% 91%, rgba(93, 129, 239, .16), transparent 19rem), linear-gradient(145deg, rgba(18, 58, 63, .98), rgba(8, 17, 31, .99)); box-shadow: 0 19px 47px rgba(0, 0, 0, .18); }
.portal-music-prompt-composer-intro h2 { margin: 7px 0 9px; color: #e9fff9; font-size: clamp(27px, 3vw, 41px); letter-spacing: -.049em; }
.portal-music-prompt-composer-intro p { max-width: 770px; margin: 0; color: #b9d5d1; line-height: 1.72; }
.portal-music-prompt-composer-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-music-prompt-composer-intro dl > div { min-width: 0; min-height: 108px; padding: 15px; border: 1px solid rgba(153, 229, 214, .16); border-radius: 15px; background: rgba(7, 42, 48, .48); }
.portal-music-prompt-composer-intro dt { color: #a8f1e1; font-size: 23px; font-weight: 850; letter-spacing: -.045em; }
.portal-music-prompt-composer-intro dd { margin: 7px 0 0; color: #aac6c3; font-size: 10px; line-height: 1.46; }
.portal-music-prompt-composer-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-music-prompt-composer-form { background: linear-gradient(150deg, rgba(18, 61, 65, .98), rgba(7, 17, 31, .99)); }
.portal-music-prompt-composer-boundary, .portal-music-prompt-composer-result { background: linear-gradient(150deg, rgba(17, 49, 61, .96), rgba(7, 17, 31, .99)); }
.portal-music-prompt-composer-boundary { display: grid; gap: 14px; }
.portal-music-prompt-composer-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-music-prompt-composer-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(133, 225, 207, .16); border-radius: 11px; background: rgba(4, 35, 43, .52); }
.portal-music-prompt-composer-guard-list strong { overflow: hidden; color: #d8f6ed; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-music-prompt-composer-guard-list em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(142, 231, 212, .23); border-radius: 999px; background: rgba(48, 178, 154, .12); color: #bdf8ea; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-music-prompt-composer-meta, .portal-music-prompt-composer-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portal-music-prompt-composer-meta span, .portal-music-prompt-composer-tags span { display: inline-flex; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(141, 220, 208, .19); border-radius: 999px; background: rgba(47, 137, 145, .16); color: #d1f2eb; font-size: 9px; font-weight: 720; line-height: 1.45; overflow-wrap: anywhere; }
.portal-music-prompt-composer-tags { margin-top: 8px; }
.portal-music-prompt-composer-tags span { padding: 4px 7px; border-color: rgba(161, 202, 255, .18); background: rgba(78, 108, 202, .12); color: #d9e4ff; font-size: 8px; }
.portal-music-prompt-composer-suggestions { display: grid; gap: 12px; margin-top: 15px; padding: 15px; border: 1px solid rgba(129, 210, 211, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(13, 61, 67, .59), rgba(18, 31, 64, .54)); }
.portal-music-prompt-composer-suggestions ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-music-prompt-composer-suggestions li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 12px; border: 1px solid rgba(145, 213, 218, .14); border-radius: 14px; background: rgba(5, 15, 31, .4); }
.portal-music-prompt-composer-suggestions li[data-selected="true"] { border-color: rgba(115, 231, 206, .45); background: linear-gradient(145deg, rgba(11, 88, 78, .59), rgba(23, 42, 81, .67)); box-shadow: inset 0 0 0 1px rgba(117, 230, 215, .09); }
.portal-music-prompt-composer-index { display: inline-grid; width: 31px; height: 25px; place-items: center; border: 1px solid rgba(154, 231, 217, .25); border-radius: 8px; background: rgba(48, 163, 151, .13); color: #d2fff4; font-size: 8px; font-weight: 820; letter-spacing: .06em; }
.portal-music-prompt-composer-suggestion-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.portal-music-prompt-composer-suggestion-head strong { color: #effffb; font-size: 12px; letter-spacing: -.015em; }
.portal-music-prompt-composer-suggestion-head em { padding: 3px 7px; border: 1px solid rgba(123, 236, 213, .25); border-radius: 999px; background: rgba(47, 180, 166, .13); color: #c2fff2; font-size: 8px; font-style: normal; font-weight: 770; letter-spacing: .04em; }
.portal-music-prompt-composer-suggestions dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 0; }
.portal-music-prompt-composer-suggestions dl > div { min-width: 0; padding: 8px; border-radius: 9px; background: rgba(58, 102, 144, .13); }
.portal-music-prompt-composer-suggestions dl > div:last-child { grid-column: 1 / -1; }
.portal-music-prompt-composer-suggestions dt, .portal-music-prompt-composer-usage dt { color: #a9dad4; font-size: 8px; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.portal-music-prompt-composer-suggestions dd, .portal-music-prompt-composer-usage dd { margin: 4px 0 0; color: #cae0dd; font-size: 9px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-music-prompt-composer-suggestions pre { min-width: 0; max-height: 180px; margin: 0; overflow: auto; color: #d6ece9; font: 9px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-music-prompt-composer-usage { display: grid; grid-template-columns: minmax(180px, .37fr) minmax(0, .63fr); gap: 14px; align-items: start; margin-top: 15px; padding: 15px; border: 1px solid rgba(115, 202, 233, .18); border-radius: 17px; background: linear-gradient(145deg, rgba(11, 55, 73, .57), rgba(20, 30, 61, .61)); }
.portal-music-prompt-composer-usage h3 { margin: 4px 0 0; color: #e2fbff; font-size: 15px; letter-spacing: -.03em; }
.portal-music-prompt-composer-usage p { margin: 7px 0 0; color: #b5d2d6; font-size: 10px; line-height: 1.58; }
.portal-music-prompt-composer-usage > dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-music-prompt-composer-usage > dl > div { min-width: 0; padding: 11px; border: 1px solid rgba(122, 207, 229, .14); border-radius: 11px; background: rgba(6, 27, 43, .4); }
.portal-music-prompt-composer-review { display: grid; gap: 9px; margin-top: 15px; padding: 14px; border: 1px solid rgba(255, 197, 117, .18); border-radius: 14px; background: rgba(63, 45, 27, .39); }
.portal-music-prompt-composer-review strong { color: #ffe6b4; font-size: 11px; }
.portal-music-prompt-composer-review p, .portal-music-prompt-composer-review ul { margin: 0; color: #dec8a9; font-size: 10px; line-height: 1.58; }
.portal-music-prompt-composer-review ul { display: grid; gap: 6px; padding-left: 17px; }
.portal-music-prompt-composer-review > div { padding-top: 9px; border-top: 1px solid rgba(255, 197, 117, .13); }
.portal-music-prompt-composer-result .portal-form-footer { align-items: flex-start; }

@media (max-width: 980px) {
  .portal-music-prompt-composer-intro, .portal-music-prompt-composer-layout, .portal-music-prompt-composer-usage { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-music-prompt-composer-intro { padding: 20px; border-radius: 18px; }
  .portal-music-prompt-composer-intro dl, .portal-music-prompt-composer-guard-list, .portal-music-prompt-composer-suggestions dl, .portal-music-prompt-composer-usage > dl { grid-template-columns: 1fr; }
  .portal-music-prompt-composer-suggestions dl > div:last-child { grid-column: auto; }
}
@media (max-width: 440px) {
  .portal-music-prompt-composer-suggestions, .portal-music-prompt-composer-usage { padding: 12px; }
  .portal-music-prompt-composer-suggestions li { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .portal-music-prompt-composer-index { width: 25px; height: 23px; font-size: 7px; }
  .portal-music-prompt-composer-suggestion-head { align-items: flex-start; flex-direction: column; }
}

/* Music Directions is a compact Web-native picker, not an audio player or
   catalog. Keep its cues calm, high-contrast and application-like; selection
   changes only the native form until the customer explicitly submits it. */
.portal-music-directions { display: grid; gap: 18px; min-width: 0; }
.portal-music-directions-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 19px; align-items: center; padding: clamp(22px, 3vw, 35px); border: 1px solid rgba(45, 212, 191, .3); border-radius: 22px; background: #121a26; box-shadow: 0 19px 47px rgba(0, 0, 0, .18); }
.portal-music-directions-intro h2 { margin: 7px 0 9px; color: #f8fafc; font-size: clamp(27px, 3vw, 41px); letter-spacing: -.049em; }
.portal-music-directions-intro p { max-width: 760px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-music-directions-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-music-directions-intro dl > div { min-width: 0; min-height: 108px; padding: 15px; border: 1px solid #2a394b; border-radius: 15px; background: #0d151f; }
.portal-music-directions-intro dt { color: #7ce7d4; font-size: 23px; font-weight: 850; letter-spacing: -.045em; }
.portal-music-directions-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 10px; line-height: 1.46; }
.portal-music-directions-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); gap: 18px; align-items: start; }
.portal-music-directions-form, .portal-music-directions-boundary, .portal-music-directions-result { background: #121a26; }
.portal-music-directions-boundary { display: grid; gap: 14px; }
.portal-music-directions-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-music-directions-picker legend { padding: 0; color: #f8fafc; font-size: 13px; font-weight: 780; }
.portal-music-directions-picker legend span { color: #f87171; }
.portal-music-directions-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.portal-music-directions-preset-card { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; min-height: 94px; padding: 13px; border: 1px solid #2a394b; border-radius: 14px; background: #0d151f; color: #f8fafc; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.portal-music-directions-preset-card:hover { border-color: rgba(45, 212, 191, .62); background: #122229; }
.portal-music-directions-preset-card[data-selected="true"] { border-color: #2dd4bf; background: #102b2b; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .19); }
.portal-music-directions-radio { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #2dd4bf; cursor: pointer; }
.portal-music-directions-radio:focus-visible { outline: 3px solid rgba(45, 212, 191, .78); outline-offset: 3px; }
.portal-music-directions-preset-copy { display: grid; gap: 5px; min-width: 0; }
.portal-music-directions-preset-copy strong { color: #f8fafc; font-size: 12px; line-height: 1.32; }
.portal-music-directions-preset-copy small { color: #aab8c7; font-size: 10px; line-height: 1.55; }
.portal-music-directions-preset-cue { grid-column: 2; display: inline-flex; justify-self: start; min-width: 0; margin-top: 2px; padding: 4px 7px; border: 1px solid rgba(45, 212, 191, .22); border-radius: 999px; color: #9be9dc; font-size: 8px; font-weight: 760; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; }
.portal-music-directions-selection { min-height: 20px; margin: 10px 0 0; color: #aab8c7; font-size: 10px; line-height: 1.55; }
.portal-music-directions-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-music-directions-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid #2a394b; border-radius: 11px; background: #0d151f; }
.portal-music-directions-guard-list strong { overflow: hidden; color: #d7e6e5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-music-directions-guard-list em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(45, 212, 191, .3); border-radius: 999px; background: rgba(45, 212, 191, .1); color: #b8f6ed; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-music-directions-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portal-music-directions-meta span { display: inline-flex; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(45, 212, 191, .26); border-radius: 999px; background: rgba(45, 212, 191, .1); color: #d7faf4; font-size: 9px; font-weight: 720; line-height: 1.45; overflow-wrap: anywhere; }
.portal-music-directions-list { display: grid; gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.portal-music-directions-list li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 12px; border: 1px solid #2a394b; border-radius: 14px; background: #0d151f; }
.portal-music-directions-list li[data-selected="true"] { border-color: rgba(45, 212, 191, .64); background: #102b2b; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .14); }
.portal-music-directions-index { display: inline-grid; width: 31px; height: 25px; place-items: center; border: 1px solid rgba(45, 212, 191, .34); border-radius: 8px; background: rgba(45, 212, 191, .1); color: #d7faf4; font-size: 8px; font-weight: 820; letter-spacing: .06em; }
.portal-music-directions-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.portal-music-directions-list-head strong { color: #f8fafc; font-size: 12px; letter-spacing: -.015em; }
.portal-music-directions-list-head em { padding: 3px 7px; border: 1px solid rgba(45, 212, 191, .3); border-radius: 999px; background: rgba(45, 212, 191, .1); color: #b8f6ed; font-size: 8px; font-style: normal; font-weight: 770; letter-spacing: .04em; }
.portal-music-directions-list p { margin: 7px 0 0; color: #aab8c7; font-size: 10px; line-height: 1.55; }
.portal-music-directions-list dl { display: grid; gap: 7px; margin: 10px 0 0; }
.portal-music-directions-list dl > div { min-width: 0; padding: 8px; border-radius: 9px; background: #172234; }
.portal-music-directions-list dt { color: #aab8c7; font-size: 8px; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.portal-music-directions-list dd { margin: 4px 0 0; color: #d7e6e5; font-size: 9px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-music-directions-list pre { min-width: 0; max-height: 180px; margin: 0; overflow: auto; color: #e0f2ef; font: 9px/1.62 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.portal-music-directions-review { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border: 1px solid rgba(248, 113, 113, .26); border-radius: 14px; background: rgba(86, 31, 37, .24); }
.portal-music-directions-review strong { color: #ffe0e0; font-size: 11px; }
.portal-music-directions-review ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: #e7c5c8; font-size: 10px; line-height: 1.58; }
.portal-music-directions-result > .portal-form-note { display: block; margin: 14px 0 0; }
.portal-music-directions-result[data-stale="true"] { border-color: rgba(255, 211, 122, .72); }
.portal-music-directions-result[data-stale="true"]::after { display: block; margin-top: 12px; color: #ffd37a; content: "Brief đã thay đổi — receipt này thuộc brief trước. Bấm lập direction để tạo receipt mới."; font-size: 10px; font-weight: 720; line-height: 1.55; }

@media (max-width: 980px) {
  .portal-music-directions-intro, .portal-music-directions-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .portal-music-directions-intro { padding: 20px; border-radius: 18px; }
  .portal-music-directions-intro dl, .portal-music-directions-preset-grid, .portal-music-directions-guard-list { grid-template-columns: 1fr; }
  .portal-music-directions-preset-card { min-height: 88px; }
}
@media (max-width: 440px) {
  .portal-music-directions-list li { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .portal-music-directions-index { width: 25px; height: 23px; font-size: 7px; }
  .portal-music-directions-list-head { align-items: flex-start; flex-direction: column; }
}

/* SFX Cue Sheet is an editorial app surface, not a media catalog or player.
   Preserve a calm slate/teal hierarchy, native radios and roomy touch targets
   so selection never looks like immediate sound generation. */
.portal-sfx-cue-sheet { display: grid; gap: 18px; min-width: 0; }
.portal-sfx-cue-sheet-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 19px; align-items: center; padding: clamp(22px, 3vw, 35px); border: 1px solid rgba(45, 212, 191, .3); border-radius: 22px; background: #121a26; box-shadow: 0 19px 47px rgba(0, 0, 0, .18); }
.portal-sfx-cue-sheet-intro h2 { margin: 7px 0 9px; color: #f8fafc; font-size: clamp(27px, 3vw, 41px); letter-spacing: -.049em; }
.portal-sfx-cue-sheet-intro p { max-width: 760px; margin: 0; color: #aab8c7; line-height: 1.72; }
.portal-sfx-cue-sheet-intro dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-sfx-cue-sheet-intro dl > div { min-width: 0; min-height: 108px; padding: 15px; border: 1px solid #2a394b; border-radius: 15px; background: #0d151f; }
.portal-sfx-cue-sheet-intro dt { color: #7ce7d4; font-size: 23px; font-weight: 850; letter-spacing: -.045em; }
.portal-sfx-cue-sheet-intro dd { margin: 7px 0 0; color: #aab8c7; font-size: 10px; line-height: 1.46; }
.portal-sfx-cue-sheet-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(280px, .87fr); grid-template-areas: "form boundary" "result result"; gap: 18px; align-items: start; }
.portal-sfx-cue-sheet-form { grid-area: form; }
.portal-sfx-cue-sheet-boundary { grid-area: boundary; }
.portal-sfx-cue-sheet-result { grid-area: result; }
.portal-sfx-cue-sheet-form, .portal-sfx-cue-sheet-boundary, .portal-sfx-cue-sheet-result { background: #121a26; }
.portal-sfx-cue-sheet-boundary { display: grid; gap: 14px; }
.portal-sfx-cue-sheet-form .portal-select, .portal-sfx-cue-sheet-form .portal-button { min-height: 44px; }
.portal-sfx-cue-sheet-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-sfx-cue-sheet-picker legend { padding: 0; color: #f8fafc; font-size: 13px; font-weight: 780; }
.portal-sfx-cue-sheet-picker legend span { color: #f87171; }
.portal-sfx-cue-sheet-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.portal-sfx-cue-sheet-preset-card { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; min-height: 94px; padding: 13px; border: 1px solid #2a394b; border-radius: 14px; background: #0d151f; color: #f8fafc; cursor: pointer; touch-action: manipulation; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.portal-sfx-cue-sheet-preset-card:hover { border-color: rgba(45, 212, 191, .62); background: #122229; }
.portal-sfx-cue-sheet-preset-card:active { background: #102b2b; }
.portal-sfx-cue-sheet-preset-card[data-selected="true"] { border-color: #2dd4bf; background: #102b2b; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .19); }
.portal-sfx-cue-sheet-radio { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #2dd4bf; cursor: pointer; }
.portal-sfx-cue-sheet-radio:focus-visible { outline: 3px solid rgba(45, 212, 191, .78); outline-offset: 3px; }
.portal-sfx-cue-sheet-preset-copy { display: grid; gap: 5px; min-width: 0; }
.portal-sfx-cue-sheet-preset-copy strong { color: #f8fafc; font-size: 12px; line-height: 1.32; }
.portal-sfx-cue-sheet-preset-copy small { color: #aab8c7; font-size: 10px; line-height: 1.55; }
.portal-sfx-cue-sheet-preset-cue { grid-column: 2; display: inline-flex; justify-self: start; min-width: 0; margin-top: 2px; padding: 4px 7px; border: 1px solid rgba(45, 212, 191, .22); border-radius: 999px; color: #9be9dc; font-size: 11px; font-weight: 760; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; }
.portal-sfx-cue-sheet-selection { min-height: 20px; margin: 10px 0 0; color: #aab8c7; font-size: 10px; line-height: 1.55; }
.portal-sfx-cue-sheet-guard-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-sfx-cue-sheet-guard-list span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid #2a394b; border-radius: 11px; background: #0d151f; }
.portal-sfx-cue-sheet-guard-list strong { overflow: hidden; color: #d7e6e5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.portal-sfx-cue-sheet-guard-list em { flex: 0 0 auto; padding: 3px 6px; border: 1px solid rgba(45, 212, 191, .3); border-radius: 999px; background: rgba(45, 212, 191, .1); color: #b8f6ed; font-size: 11px; font-style: normal; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.portal-sfx-cue-sheet-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.portal-sfx-cue-sheet-meta span { display: inline-flex; min-width: 0; max-width: 100%; padding: 6px 9px; border: 1px solid rgba(45, 212, 191, .26); border-radius: 999px; background: rgba(45, 212, 191, .1); color: #d7faf4; font-size: 9px; font-weight: 720; line-height: 1.45; overflow-wrap: anywhere; }
.portal-sfx-cue-sheet-notice { margin: 14px 0 0; padding: 11px 12px; border-left: 3px solid #2dd4bf; border-radius: 0 10px 10px 0; background: rgba(45, 212, 191, .08); color: #d7e6e5; font-size: 10px; line-height: 1.62; }
.portal-sfx-cue-sheet-list { display: grid; gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.portal-sfx-cue-sheet-list li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 11px; min-width: 0; padding: 12px; border: 1px solid #2a394b; border-radius: 14px; background: #0d151f; }
.portal-sfx-cue-sheet-index { display: inline-grid; width: 31px; height: 25px; place-items: center; border: 1px solid rgba(45, 212, 191, .34); border-radius: 8px; background: rgba(45, 212, 191, .1); color: #d7faf4; font-size: 8px; font-weight: 820; letter-spacing: .06em; }
.portal-sfx-cue-sheet-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.portal-sfx-cue-sheet-list-head strong { color: #f8fafc; font-size: 12px; letter-spacing: -.015em; }
.portal-sfx-cue-sheet-list-head em { max-width: 100%; padding: 3px 7px; border: 1px solid rgba(45, 212, 191, .3); border-radius: 999px; background: rgba(45, 212, 191, .1); color: #b8f6ed; font-size: 11px; font-style: normal; font-weight: 770; letter-spacing: .04em; overflow-wrap: anywhere; }
.portal-sfx-cue-sheet-list p { margin: 7px 0 0; color: #aab8c7; font-size: 10px; line-height: 1.55; }
.portal-sfx-cue-sheet-list dl { display: grid; gap: 7px; margin: 10px 0 0; }
.portal-sfx-cue-sheet-list dl > div { min-width: 0; padding: 8px; border-radius: 9px; background: #172234; }
.portal-sfx-cue-sheet-list dt { color: #aab8c7; font-size: 8px; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.portal-sfx-cue-sheet-list dd { margin: 4px 0 0; color: #d7e6e5; font-size: 9px; line-height: 1.58; overflow-wrap: anywhere; }
.portal-sfx-cue-sheet-review { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid rgba(248, 113, 113, .26); border-radius: 14px; background: rgba(86, 31, 37, .24); }
.portal-sfx-cue-sheet-review strong { color: #ffe0e0; font-size: 11px; }
.portal-sfx-cue-sheet-review ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: #e7c5c8; font-size: 10px; line-height: 1.58; }
.portal-sfx-cue-sheet-result > .portal-form-note { display: block; margin: 14px 0 0; }
.portal-sfx-cue-sheet-result[data-stale="true"] { border-color: rgba(255, 211, 122, .72); }
.portal-sfx-cue-sheet-result[data-stale="true"]::after { display: block; margin-top: 12px; color: #ffd37a; content: "Brief đã thay đổi — receipt này thuộc brief trước. Bấm lập cue sheet để tạo receipt mới."; font-size: 10px; font-weight: 720; line-height: 1.55; }

/* Directions, safety notes and review checklists are task-critical text, not
   decorative metadata. Keep them readable on the dark application surface
   while retaining compact badges only for secondary state. */
.portal-sfx-cue-sheet-intro dd,
.portal-sfx-cue-sheet-picker legend,
.portal-sfx-cue-sheet-preset-copy strong,
.portal-sfx-cue-sheet-preset-copy small,
.portal-sfx-cue-sheet-selection,
.portal-sfx-cue-sheet-guard-list strong,
.portal-sfx-cue-sheet-meta span,
.portal-sfx-cue-sheet-notice,
.portal-sfx-cue-sheet-list-head strong,
.portal-sfx-cue-sheet-list p,
.portal-sfx-cue-sheet-list dd,
.portal-sfx-cue-sheet-review strong,
.portal-sfx-cue-sheet-review ul,
.portal-sfx-cue-sheet .portal-form-note,
.portal-sfx-cue-sheet-result[data-stale="true"]::after { font-size: 13px; }
.portal-sfx-cue-sheet-picker legend,
.portal-sfx-cue-sheet-preset-copy strong,
.portal-sfx-cue-sheet-list-head strong,
.portal-sfx-cue-sheet-review strong { font-size: 14px; }
.portal-sfx-cue-sheet-intro dd,
.portal-sfx-cue-sheet-preset-copy small,
.portal-sfx-cue-sheet-selection,
.portal-sfx-cue-sheet-meta span,
.portal-sfx-cue-sheet-notice,
.portal-sfx-cue-sheet-list p,
.portal-sfx-cue-sheet-list dd,
.portal-sfx-cue-sheet-review ul,
.portal-sfx-cue-sheet .portal-form-note,
.portal-sfx-cue-sheet-result[data-stale="true"]::after { line-height: 1.6; }
.portal-sfx-cue-sheet-list dt { font-size: 11px; }
.portal-sfx-cue-sheet-index { font-size: 11px; }

@media (max-width: 980px) {
  .portal-sfx-cue-sheet-intro, .portal-sfx-cue-sheet-layout { grid-template-columns: 1fr; }
  .portal-sfx-cue-sheet-layout { grid-template-areas: "form" "result" "boundary"; }
}
@media (max-width: 700px) {
  .portal-sfx-cue-sheet-intro { padding: 20px; border-radius: 18px; }
  .portal-sfx-cue-sheet-intro dl, .portal-sfx-cue-sheet-preset-grid, .portal-sfx-cue-sheet-guard-list { grid-template-columns: 1fr; }
  .portal-sfx-cue-sheet-preset-card { min-height: 88px; }
}
@media (max-width: 440px) {
  .portal-sfx-cue-sheet-list li { grid-template-columns: 25px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .portal-sfx-cue-sheet-index { width: 25px; height: 23px; font-size: 10px; }
  .portal-sfx-cue-sheet-list-head { align-items: flex-start; flex-direction: column; }
}

/* Coordination workspaces deliberately look operational rather than like a
   public landing page: quiet hierarchy, readable states and dense-but-safe
   data cards for private Content Handoff and Partner CRM flows. */
.portal-coordination-workspace, .portal-coordination-detail, .portal-crm-workspace, .portal-crm-detail { display: grid; gap: 18px; min-width: 0; }
.portal-coordination-summary { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(210px, .75fr); gap: 18px; align-items: center; padding: clamp(21px, 3vw, 34px); border: 1px solid rgba(112, 218, 207, .23); border-radius: 22px; background: radial-gradient(circle at 92% 8%, rgba(64, 152, 216, .18), transparent 18rem), radial-gradient(circle at 9% 93%, rgba(39, 179, 151, .14), transparent 20rem), linear-gradient(145deg, rgba(11, 39, 54, .98), rgba(8, 16, 31, .99)); box-shadow: 0 18px 45px rgba(0, 0, 0, .16); }
.portal-coordination-summary h2 { margin: 7px 0 9px; color: #edf9ff; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.047em; }
.portal-coordination-summary p { max-width: 780px; margin: 0; color: #b8d0d9; line-height: 1.7; }
.portal-coordination-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-coordination-summary dl > div { min-width: 0; min-height: 98px; padding: 14px; border: 1px solid rgba(145, 222, 224, .16); border-radius: 14px; background: rgba(7, 29, 45, .52); }
.portal-coordination-summary dt { color: #b7f7ec; font-size: 22px; font-weight: 850; letter-spacing: -.04em; }
.portal-coordination-summary dd { margin: 7px 0 0; color: #aac5ca; font-size: 10px; line-height: 1.45; }
.portal-coordination-card-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.portal-coordination-card { display: grid; gap: 9px; border-color: rgba(110, 200, 211, .18); background: linear-gradient(145deg, rgba(14, 44, 59, .83), rgba(12, 20, 37, .94)); }
.portal-coordination-references { padding-top: 3px; border-top: 1px solid rgba(133, 199, 211, .14); }
.portal-coordination-history { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portal-crm-kanban { display: grid; grid-auto-columns: minmax(225px, 1fr); grid-auto-flow: column; gap: 12px; min-width: 0; overflow-x: auto; padding-bottom: 5px; }
.portal-crm-lane { display: grid; align-content: start; gap: 9px; min-height: 210px; padding: 12px; border: 1px solid rgba(136, 192, 218, .18); border-radius: 15px; background: linear-gradient(155deg, rgba(21, 47, 72, .62), rgba(12, 21, 38, .72)); }
.portal-crm-lane header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid rgba(142, 203, 221, .13); color: #dff6ff; font-size: 11px; }
.portal-crm-lane header span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: rgba(72, 170, 184, .18); color: #bbf4ed; font-size: 9px; font-weight: 800; }
.portal-crm-lane > p { margin: 15px 0; color: #8faab6; font-size: 10px; text-align: center; }
.portal-crm-card { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid rgba(125, 200, 222, .16); border-radius: 12px; background: rgba(6, 22, 40, .61); color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.portal-crm-card:hover { transform: translateY(-1px); border-color: rgba(121, 231, 211, .45); background: rgba(12, 58, 66, .56); }
.portal-crm-card span, .portal-crm-card em { color: #9ebfd0; font-size: 8px; font-style: normal; font-weight: 760; letter-spacing: .055em; text-transform: uppercase; }
.portal-crm-card b { overflow: hidden; color: #ebf9ff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.portal-crm-card small { overflow: hidden; color: #a3bac4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.portal-crm-card em { margin-top: 3px; color: #b8e5d8; letter-spacing: .015em; text-transform: none; }
@media (max-width: 850px) {
  .portal-coordination-summary, .portal-coordination-history { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .portal-coordination-summary { padding: 19px; border-radius: 18px; }
  .portal-coordination-summary dl { grid-template-columns: 1fr; }
  .portal-coordination-summary dl > div { min-height: auto; }
  .portal-coordination-card-list { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   App-first UI system

   The portal is a signed workspace, not a marketing landing page.  These
   late, token-driven overrides intentionally unify the legacy feature pages
   without changing their DOM contracts, routes, actions, or data authority.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --portal-bg: #0a0f17;
  --portal-bg-deep: #070b11;
  --portal-surface: #121a26;
  --portal-surface-strong: #172234;
  --portal-surface-soft: #1c2a3b;
  --portal-border: #29384a;
  --portal-border-strong: #2dd4bf;
  --portal-text: #f8fafc;
  --portal-muted: #aab8c7;
  --portal-muted-strong: #d5dee8;
  --portal-accent: #2dd4bf;
  --portal-accent-deep: #0f9f8a;
  --portal-accent-ink: #042f2e;
  --portal-info: #93c5fd;
  --portal-warning: #fbbf24;
  --portal-danger: #f87171;
  --portal-success: #4ade80;
  --portal-shadow: 0 12px 28px rgba(1, 7, 16, .22);
  --portal-radius-lg: 18px;
  --portal-radius: 14px;
  --portal-radius-sm: 10px;
  --portal-control-height: 42px;
  --portal-transition: 180ms cubic-bezier(.2, .8, .2, 1);
  --portal-z-header: 20;
  --portal-z-dock: 80;
  --portal-z-drawer: 100;
  --portal-z-dialog: 130;
  --portal-z-toast: 140;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--portal-bg-deep); }
body {
  background: var(--portal-bg);
  color: var(--portal-text);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible {
  outline: 2px solid #5eead4 !important;
  outline-offset: 2px;
}

.portal-shell {
  grid-template-columns: 272px minmax(0, 1fr);
  background: var(--portal-bg);
}
.portal-sidebar {
  padding: 18px 12px 14px;
  border-right-color: var(--portal-border);
  background: #0d1520;
  backdrop-filter: none;
}
.portal-brand { gap: 10px; margin: 0 8px 20px; }
.portal-brand-mark {
  width: 40px;
  height: 40px;
  border-color: rgba(94, 234, 212, .56);
  border-radius: 12px;
  background: #2dd4bf;
  box-shadow: none;
  color: #042f2e;
}
.portal-brand-name { font-size: 14px; letter-spacing: .035em; }
.portal-brand-caption { color: #95a9bb; font-size: 11px; }
.portal-sidebar-action-row { gap: 8px; margin: 0 8px 14px; }
.portal-sidebar-create {
  min-height: var(--portal-control-height);
  margin: 0;
  border-color: rgba(45, 212, 191, .42);
  border-radius: 11px;
  background: rgba(45, 212, 191, .11);
  color: #dffcf7;
  font-size: 13px;
  transition: border-color var(--portal-transition), background var(--portal-transition), color var(--portal-transition), transform var(--portal-transition);
}
.portal-sidebar-create:hover, .portal-sidebar-create:focus-visible {
  border-color: #5eead4;
  background: rgba(45, 212, 191, .18);
  color: #ffffff;
  transform: translateY(-1px);
}
.portal-sidebar-create > span:first-child { background: rgba(4, 47, 46, .28); color: #dffcf7; }
.portal-sidebar-create > b { color: #bff7eb; }
.portal-sidebar-focus-toggle {
  min-height: var(--portal-control-height);
  border-color: var(--portal-border);
  border-radius: 11px;
  background: #121d2b;
  color: #cbd5e1;
}
.portal-sidebar-search {
  display: flex;
  width: calc(100% - 16px);
  min-height: var(--portal-control-height);
  gap: 9px;
  align-items: center;
  margin: 0 8px 14px;
  padding: 8px 10px;
  border: 1px solid var(--portal-border);
  border-radius: 11px;
  background: #111b28;
  color: var(--portal-muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
  transition: border-color var(--portal-transition), background var(--portal-transition), color var(--portal-transition);
}
.portal-sidebar-search:hover, .portal-sidebar-search:focus-visible { border-color: rgba(45, 212, 191, .6); background: #142334; color: #f8fafc; }
.portal-sidebar-search > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-sidebar-search kbd { margin-left: auto; padding: 2px 5px; border: 1px solid #34475b; border-radius: 5px; color: #9eb0c2; font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }

.portal-nav { gap: 4px; }
.portal-nav-group { padding-bottom: 4px; border-bottom: 1px solid rgba(80, 102, 126, .26); }
.portal-nav-group:last-of-type { border-bottom: 0; }
.portal-nav-summary {
  min-height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  color: #a9bac9;
}
.portal-nav-summary::before { color: #8ca2b7; }
.portal-nav-label { color: inherit; font-size: 11px; letter-spacing: .075em; }
.portal-nav-group-count { color: #7f94a8; font-size: 11px; }
.portal-nav-links { gap: 3px; padding: 2px 0 8px; }
.portal-nav-link {
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 10px;
  color: #c9d5e1;
  font-size: 13px;
  font-weight: 650;
}
.portal-nav-link:hover { border-color: #34475b; background: #152231; color: #f8fafc; }
.portal-nav-link[aria-current="page"] { border-color: rgba(45, 212, 191, .42); background: rgba(45, 212, 191, .13); color: #f0fdfa; }
.portal-nav-icon { width: 19px; color: #9ab1c4; }
.portal-nav-link[aria-current="page"] .portal-nav-icon { color: #5eead4; }
.portal-sidebar-foot { gap: 10px; padding: 18px 8px 0; }
.portal-bridge-mini { border-color: #2c3c4e; border-radius: 11px; background: #111c29; }
.portal-bridge-mini strong { font-size: 12px; }
.portal-bridge-mini span { color: #9dadbd; font-size: 11px; }

.portal-icon, .portal-control-icon {
  display: block;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.portal-nav-icon .portal-icon, .portal-mobile-nav-icon .portal-icon { width: 18px; height: 18px; }
.portal-control-icon .portal-icon { width: 18px; height: 18px; }

.portal-header {
  position: sticky;
  z-index: var(--portal-z-header);
  top: 0;
  min-height: 64px;
  padding: 11px clamp(20px, 2.6vw, 40px);
  border-bottom-color: var(--portal-border);
  background: rgba(10, 15, 23, .94);
  backdrop-filter: blur(14px);
}
.portal-menu-button, .portal-pwa-install-trigger, .portal-command-trigger {
  min-height: 40px;
  border-color: var(--portal-border);
  border-radius: 10px;
  background: #121d2a;
  color: #d8e2ec;
}
.portal-menu-button:hover, .portal-pwa-install-trigger:hover:not(:disabled), .portal-command-trigger:hover { border-color: rgba(45, 212, 191, .55); background: #18283a; color: #f8fafc; }
.portal-crumbs { color: #aebdcb; font-size: 13px; font-weight: 600; }
.portal-crumbs span + span::before { color: #60758a; }
.portal-header-actions { gap: 8px; }
.portal-command-trigger { min-width: min(250px, 28vw); justify-content: flex-start; padding-inline: 11px; font-size: 12px; }
.portal-command-trigger > span:first-child, .portal-pwa-install-trigger > span:first-child { display: grid; place-items: center; color: #5eead4; }
.portal-command-trigger kbd { margin-left: auto; border-color: #34475b; background: #0d1520; color: #a7b8c9; }
.portal-session-chip { min-height: 40px; border-color: var(--portal-border); background: #121d2a; color: #d7e1ea; font-size: 12px; }
.portal-session-avatar { width: 27px; height: 27px; background: #1c5d63; color: #e6fffb; }

.portal-main { width: min(100%, 1600px); max-width: 1600px; padding: clamp(22px, 3vw, 42px); }
.portal-page { gap: clamp(20px, 2.3vw, 30px); }
.portal-page p, .portal-form-note, .portal-field-help, .portal-card-subtitle { font-size: 14px; line-height: 1.65; }
.portal-card-subtitle, .portal-form-note, .portal-field-help { color: #aab8c7; }
.portal-hero { gap: 20px; }
.portal-title { max-width: 900px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.04em; }
.portal-description { font-size: 15px; line-height: 1.65; }
.portal-eyebrow, .portal-section-kicker { color: #5eead4; font-size: 11px; letter-spacing: .085em; }

.portal-card, .portal-module-card, .portal-action-card, .portal-studio-card,
.portal-dashboard-draft, .portal-data-table-wrap, .portal-page [class$="-card"] {
  border-color: var(--portal-border);
  background: var(--portal-surface);
  box-shadow: none;
}
.portal-card { border-radius: var(--portal-radius-lg); }
.portal-card-pad { padding: clamp(20px, 2.3vw, 28px); }
.portal-card-header { gap: 18px; margin-bottom: 20px; }
.portal-card-title { color: #f8fafc; font-size: 17px; letter-spacing: -.02em; }
.portal-page :is([class$="-intro"], [class$="-summary"], .portal-action-center, .portal-start-guide, .portal-capability-hub, .portal-state) {
  border-color: var(--portal-border) !important;
  background: var(--portal-surface-strong) !important;
  box-shadow: none !important;
}
.portal-page :is([class$="-intro"], [class$="-summary"], .portal-action-center, .portal-start-guide, .portal-capability-hub) {
  border-radius: var(--portal-radius-lg) !important;
}

.portal-button {
  min-height: var(--portal-control-height);
  padding: 9px 13px;
  border-color: #34475b;
  border-radius: 10px;
  background: #172436;
  color: #e7eef5;
  font-size: 13px;
  font-weight: 720;
  transition: border-color var(--portal-transition), background var(--portal-transition), color var(--portal-transition), transform var(--portal-transition);
}
.portal-button:hover:not(:disabled) { border-color: #4c6378; background: #203147; transform: translateY(-1px); }
.portal-button--primary { border-color: #2dd4bf; background: #2dd4bf; color: #042f2e; }
.portal-button--primary:hover:not(:disabled) { border-color: #5eead4; background: #5eead4; color: #022c2a; }
.portal-button--quiet { border-color: #34475b; background: transparent; color: #d4dee8; }
.portal-button:disabled { border-color: #263648; background: #101924; color: #718197; }
.portal-badge { min-height: 25px; border-color: #3b4d61; background: #162234; font-size: 10px; }

.portal-field > label, .portal-form label { color: #dce6ee; font-size: 13px; font-weight: 700; }
.portal-input, .portal-select, .portal-textarea {
  min-height: 44px;
  border-color: #34475b;
  border-radius: 10px;
  background: #0e1722;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.5;
}
.portal-textarea { min-height: 132px; }
.portal-input:focus, .portal-select:focus, .portal-textarea:focus { border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45, 212, 191, .16); }
.portal-input::placeholder, .portal-textarea::placeholder { color: #7f91a5; }

.portal-dashboard-overview {
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(26px, 3.8vw, 46px);
  border-color: #29455a;
  border-radius: 20px;
  background: #122334;
  box-shadow: none;
}
.portal-dashboard-overview h1 { color: #f8fafc; font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -.045em; }
.portal-dashboard-overview p { color: #bdcbd8; font-size: 15px; line-height: 1.65; }
.portal-dashboard-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-dashboard-overview-stats > div { padding: 15px; border-color: #314a60; border-radius: 12px; background: #0e1a27; }
.portal-dashboard-overview-stats dt { color: #a6b7c7; font-size: 11px; }
.portal-dashboard-overview-stats dd { color: #f8fafc; font-size: 30px; }
.portal-dashboard-overview-stats span { color: #8fa3b5; font-size: 10px; }
.portal-dashboard-draft { min-height: 66px; padding: 12px; border-radius: 11px; }
.portal-dashboard-draft strong { color: #f1f5f9; font-size: 13px; }
.portal-dashboard-draft small { font-size: 11px; }
.portal-dashboard-draft-icon, .portal-module-icon, .portal-studio-icon { border-radius: 10px; background: rgba(45, 212, 191, .12); color: #5eead4; }
.portal-studio-launchpad { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.portal-studio-card { min-height: 220px; padding: 18px; border-radius: 14px; }
.portal-studio-card:hover, .portal-module-card:hover, .portal-action-card:hover { border-color: rgba(45, 212, 191, .5); background: #172638; transform: translateY(-2px); }
.portal-studio-card h3 { font-size: 16px; }
.portal-studio-card p { color: #aebdcc; font-size: 13px; line-height: 1.55; }
.portal-studio-tags span { min-height: 24px; font-size: 10px; }

.portal-data-table-wrap { border-radius: 12px; }
.portal-data-table th, .portal-data-table td { padding: 14px 16px; border-bottom-color: #26384a; font-size: 13px; }
.portal-data-table th { color: #aebdcb; font-size: 11px; }
.portal-data-table td { color: #d8e2eb; }
.portal-data-table tbody tr:hover { background: rgba(45, 212, 191, .045); }
.portal-data-table-scroll-hint { display: none; }
.portal-empty { padding: 24px 16px; }
.portal-empty h3 { font-size: 16px; }
.portal-empty p { font-size: 14px; }

.portal-command-palette { z-index: var(--portal-z-dialog); }
.portal-command-dialog { border-color: #375269; border-radius: 16px; background: #111c29; box-shadow: 0 22px 64px rgba(0, 0, 0, .45); }
.portal-command-header { padding: 20px 22px 14px; }
.portal-command-header h2 { font-size: 20px; }
.portal-command-search { min-height: 48px; border-color: #374c61; background: #0c1520; }
.portal-command-search input { min-height: 46px; font-size: 14px; }
.portal-command-item { min-height: 60px; border-radius: 10px; }
.portal-command-item-icon { background: #162638; }
.portal-toast-region { z-index: var(--portal-z-toast); }
.portal-toast { border-color: #3b556a; background: #111c29; color: #e1edf4; font-size: 13px; }

@media (max-width: 980px) {
  .portal-sidebar { width: min(304px, calc(100vw - 42px)); background: #0d1520; }
  .portal-header { padding-right: calc(18px + var(--portal-safe-right)); padding-left: calc(18px + var(--portal-safe-left)); }
  .portal-main { padding-right: calc(20px + var(--portal-safe-right)); padding-left: calc(20px + var(--portal-safe-left)); }
  .portal-dashboard-overview { grid-template-columns: 1fr; }
  .portal-sidebar-close, .portal-command-close { width: 44px; height: 44px; }
  .portal-password-control .portal-input { padding-right: 76px; }
  .portal-password-toggle { right: 4px; min-width: 52px; min-height: 44px; }
  .portal-auth-provider-option .portal-button { min-height: 44px; }
}

@media (max-width: 700px) {
  :root { --portal-control-height: 44px; }
  .portal-header { min-height: 66px; }
  .portal-main { padding-top: 22px; padding-bottom: calc(104px + var(--portal-safe-bottom)); }
  .portal-command-trigger, .portal-pwa-install-trigger, .portal-menu-button { min-width: 44px; min-height: 44px; }
  .portal-command-trigger { width: 44px; padding: 8px; }
  .portal-pwa-install-trigger { width: 44px; padding: 8px; }
  .portal-session-chip { min-height: 44px; }
  .portal-mobile-nav {
    z-index: var(--portal-z-dock);
    gap: 5px;
    padding-top: 8px;
    border-top-color: #2d4054;
    background: rgba(10, 15, 23, .97);
    backdrop-filter: blur(14px);
  }
  .portal-mobile-nav-link { min-height: 54px; border-radius: 10px; color: #a9bac9; font-size: 10px; }
  .portal-mobile-nav-icon { min-height: 20px; font-size: inherit; }
  .portal-mobile-nav-link[aria-current="page"] { border-color: rgba(45, 212, 191, .36); background: rgba(45, 212, 191, .13); color: #ecfdf5; }
  .portal-toast-region { bottom: calc(98px + var(--portal-safe-bottom)); }
  .portal-card-pad { padding: 18px; }
  .portal-page p, .portal-form-note, .portal-field-help, .portal-card-subtitle { font-size: 14px; }
  .portal-dashboard-overview { padding: 23px; border-radius: 16px; }
  .portal-dashboard-overview h1 { font-size: clamp(30px, 9vw, 40px); }
  .portal-dashboard-overview p { font-size: 14px; }
  .portal-studio-launchpad { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; overflow: visible; }
  .portal-studio-card { width: auto; min-width: 0; min-height: 180px; }
}

@media (max-width: 440px) {
  .portal-header { gap: 7px; }
  .portal-crumbs { display: block; font-size: 12px; }
  .portal-crumbs span:not(:last-child) { display: none; }
  .portal-crumbs span:last-child::before { display: none; }
  .portal-dashboard-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-dashboard-overview-stats > div { display: block; padding: 12px; }
  .portal-dashboard-overview-stats dd { margin: 7px 0 3px; }
  .portal-data-table th, .portal-data-table td { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-sidebar-create, .portal-sidebar-search, .portal-nav-link, .portal-button,
  .portal-command-item, .portal-studio-card, .portal-module-card, .portal-action-card,
  .portal-start-guide-step { transition: none !important; }
}

/* Access, dashboard and onboarding refinement.  These rules deliberately sit
 * after the legacy screen styles so the signed-session shell keeps its stable
 * DOM/data attributes while gaining an app-first information hierarchy. */
.portal-password-control { position: relative; display: block; }
.portal-password-control .portal-input { padding-right: 68px; }
.portal-password-toggle {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 8px;
  min-width: 48px;
  min-height: 32px;
  padding: 4px 8px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8feee0;
  font: 720 12px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.portal-password-toggle:hover { background: rgba(45, 212, 191, .12); color: #ecfdf5; }
.portal-password-toggle:disabled { cursor: not-allowed; color: #62768a; }

.portal-auth-page {
  grid-template-columns: minmax(0, .88fr) minmax(390px, .78fr);
  width: min(1120px, 100%);
  min-height: calc(100vh - 124px);
  margin: 0 auto;
  gap: clamp(36px, 7vw, 96px);
  padding-top: 76px;
}
.portal-auth-intro { max-width: 520px; padding: 16px 0; }
.portal-auth-intro .portal-title { max-width: 520px; font-size: clamp(34px, 4vw, 50px); line-height: 1.04; }
.portal-auth-intro .portal-description { max-width: 500px; margin-bottom: 22px; color: #afbfcd; }
.portal-auth-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 42px;
  margin: 4px 0 24px;
  padding: 3px;
  border: 1px solid #2e4154;
  border-radius: 11px;
  background: #0d1722;
}
.portal-auth-switch a {
  display: grid;
  min-width: 116px;
  place-items: center;
  padding: 7px 12px;
  border-radius: 8px;
  color: #9fb0bf;
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
}
.portal-auth-switch a:hover { color: #ecfdf5; }
.portal-auth-switch a[aria-current="page"] { background: #1d4750; color: #e8fffb; }
.portal-auth-assurance, .portal-auth-help, .portal-auth-unavailable,
.portal-auth-telegram-panel, .portal-dashboard-assurance, .portal-onboarding-assurance {
  border: 1px solid #2c4053;
  border-radius: 12px;
  background: #101b28;
}
.portal-auth-assurance summary, .portal-auth-help summary, .portal-auth-unavailable summary,
.portal-auth-telegram-panel summary, .portal-dashboard-assurance summary, .portal-onboarding-assurance summary {
  display: flex;
  min-height: 44px;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: #d8e8f2;
  font-size: 12px;
  font-weight: 740;
  cursor: pointer;
  list-style: none;
}
.portal-auth-assurance summary::-webkit-details-marker, .portal-auth-help summary::-webkit-details-marker,
.portal-auth-unavailable summary::-webkit-details-marker, .portal-auth-telegram-panel summary::-webkit-details-marker,
.portal-dashboard-assurance summary::-webkit-details-marker, .portal-onboarding-assurance summary::-webkit-details-marker { display: none; }
.portal-auth-assurance summary::after, .portal-auth-help summary::after, .portal-auth-unavailable summary::after,
.portal-auth-telegram-panel summary::after, .portal-dashboard-assurance summary::after, .portal-onboarding-assurance summary::after {
  content: "+";
  margin-left: auto;
  color: #77dccc;
  font-size: 16px;
  font-weight: 500;
}
.portal-auth-assurance[open] summary::after, .portal-auth-help[open] summary::after,
.portal-auth-unavailable[open] summary::after, .portal-auth-telegram-panel[open] summary::after,
.portal-dashboard-assurance[open] summary::after, .portal-onboarding-assurance[open] summary::after { content: "−"; }
.portal-auth-assurance[open], .portal-auth-help[open], .portal-auth-unavailable[open],
.portal-auth-telegram-panel[open], .portal-dashboard-assurance[open], .portal-onboarding-assurance[open] { border-color: #3b586d; }
.portal-auth-assurance .portal-auth-facts { margin: 0; padding: 0 14px 14px; }
.portal-auth-assurance .portal-auth-fact { padding: 11px; border-color: #294055; background: #0d1722; }
.portal-auth-assurance .portal-auth-fact strong { color: #8feee0; font-size: 12px; }
.portal-auth-assurance .portal-auth-fact span { font-size: 11px; }
.portal-auth-card { max-width: 500px; border-color: #30475c; background: #111d2a; }
.portal-auth-card > .portal-card-header { margin-bottom: 16px; }
.portal-auth-card .portal-form { margin-top: 16px; }
.portal-auth-card .portal-form-footer { gap: 8px; }
.portal-auth-help { margin-top: 16px; }
.portal-auth-help .portal-auth-notes { margin: 0; padding: 0 14px 12px; }
.portal-auth-help .portal-notice { margin: 0 14px 14px; }
.portal-auth-provider { gap: 12px; margin-top: 20px; padding-top: 18px; }
.portal-auth-provider .portal-card-header { margin: 0; }
.portal-auth-provider-list { display: grid; gap: 8px; }
.portal-auth-provider-empty { margin: 0; padding: 12px; border: 1px dashed #344a5e; border-radius: 10px; color: #9daebe; font-size: 12px; line-height: 1.5; }
.portal-auth-provider-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid #2d4155;
  border-radius: 11px;
  background: #0e1824;
}
.portal-auth-provider-option.is-enabled { border-color: rgba(45, 212, 191, .38); background: rgba(45, 212, 191, .055); }
.portal-auth-provider-option strong { display: block; color: #e6eef5; font-size: 12px; }
.portal-auth-provider-option p { margin: 3px 0 0; color: #91a4b5; font-size: 11px; line-height: 1.42; }
.portal-auth-provider-option .portal-button { min-height: 36px; white-space: nowrap; }
.portal-auth-provider-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #385167;
  border-radius: 9px;
  background: #16263a;
  color: #d9fdf6;
  font: 800 10px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
}
.portal-auth-provider-mark[data-provider="google"] { color: #dbeafe; }
.portal-auth-provider-mark[data-provider="github"] { color: #e2e8f0; }
.portal-auth-provider-mark[data-provider="apple"] { color: #f8fafc; }
.portal-auth-provider-state { color: #92a4b5; font-size: 11px; font-weight: 650; text-align: right; }
.portal-auth-unavailable { margin-top: 2px; }
.portal-auth-unavailable .portal-auth-provider-list { padding: 0 12px 12px; }
.portal-auth-unavailable .portal-auth-provider-option { opacity: .76; }
.portal-auth-telegram-panel { margin-top: 2px; }
.portal-auth-telegram-panel summary small, .portal-dashboard-assurance summary small { color: #8ea1b1; font-size: 10px; font-weight: 600; }
.portal-auth-telegram-panel-body { display: grid; gap: 10px; padding: 0 12px 12px; }

.portal-dashboard-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.portal-dashboard-assurance { display: block; }
.portal-dashboard-assurance > .portal-status-grid { padding: 0 14px 14px; }
.portal-dashboard-assurance .portal-card { min-height: 0; }
.portal-dashboard-assurance .portal-card-pad { padding: 18px; }
.portal-dashboard-assurance summary span { color: #d9e8f0; }
.portal-dashboard-assurance summary small { margin-left: auto; }
.portal-dashboard-draft-icon .portal-icon, .portal-module-icon .portal-icon, .portal-studio-icon .portal-icon { width: 18px; height: 18px; }

.portal-onboarding-page { max-width: 1040px; }
.portal-onboarding-page > .portal-hero { margin-bottom: 2px; }
.portal-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-onboarding-steps li { display: flex; gap: 12px; align-items: flex-start; min-height: 92px; padding: 15px; border: 1px solid #2c4054; border-radius: 14px; background: #101b28; transition: border-color .18s ease, background .18s ease; }
.portal-onboarding-steps li > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid #3c5368; border-radius: 50%; color: #9db2c3; font-size: 12px; font-weight: 800; }
.portal-onboarding-steps li > span .portal-icon { width: 15px; height: 15px; }
.portal-onboarding-steps li div { display: grid; gap: 4px; min-width: 0; }
.portal-onboarding-steps strong { color: #e6eef5; font-size: 13px; line-height: 1.35; }
.portal-onboarding-steps small { color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-onboarding-steps li[data-state="done"] > span { border-color: rgba(74, 222, 128, .58); background: rgba(74, 222, 128, .13); color: #b8f5c6; }
.portal-onboarding-steps li[data-state="current"] { border-color: rgba(45, 212, 191, .52); background: rgba(45, 212, 191, .08); }
.portal-onboarding-steps li[data-state="current"] > span { border-color: #5eead4; color: #a7f3d0; }
.portal-onboarding-choice { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 16px; padding: 13px; border: 1px solid rgba(45, 212, 191, .24); border-radius: 12px; background: rgba(45, 212, 191, .045); }
.portal-onboarding-choice-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(45, 212, 191, .38); border-radius: 10px; color: #8feee0; }
.portal-onboarding-choice-icon .portal-icon { width: 18px; height: 18px; }
.portal-onboarding-choice strong { display: block; color: #e2f8f4; font-size: 13px; }
.portal-onboarding-choice p { margin: 3px 0 0; color: #aab8c7; font-size: 12px; line-height: 1.5; }
.portal-onboarding-assurance { display: block; }
.portal-onboarding-assurance > .portal-status-grid, .portal-onboarding-assurance > .portal-panel-list { margin: 0 14px 14px; }

/* First-run preferences belong inside the signed application shell. Keep the
   same dense dark-slate/teal system as the Workspace; this is not a landing
   hero or an authority-grant flow. */
.portal-workspace-setup { max-width: 1040px; }
.portal-workspace-setup > .portal-hero { margin-bottom: 2px; }
.portal-workspace-setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.portal-workspace-setup-steps li { display: flex; gap: 12px; align-items: flex-start; min-height: 92px; padding: 15px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: var(--portal-surface); transition: border-color .18s ease, background .18s ease; }
.portal-workspace-setup-steps li > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid var(--portal-border); border-radius: 50%; color: var(--portal-muted); font-size: 12px; font-weight: 850; }
.portal-workspace-setup-steps li div { display: grid; gap: 4px; min-width: 0; }
.portal-workspace-setup-steps strong { color: var(--portal-text); font-size: 13px; line-height: 1.35; }
.portal-workspace-setup-steps small { color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.portal-workspace-setup-steps li[data-state="done"] { border-color: var(--portal-border-strong); background: rgba(81, 213, 188, .07); }
.portal-workspace-setup-steps li[data-state="done"] > span { border-color: var(--portal-accent); color: var(--portal-accent); }
.portal-workspace-setup-steps li[data-state="done"] .portal-icon { width: 15px; height: 15px; }
.portal-workspace-setup-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 20px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: var(--portal-surface-strong); }
.portal-workspace-setup-context h2 { margin: 5px 0 6px; color: var(--portal-text); font-size: clamp(21px, 2.7vw, 29px); letter-spacing: -.035em; }
.portal-workspace-setup-context p { max-width: 680px; margin: 0; color: var(--portal-muted-strong); }
.portal-workspace-setup-context-meta { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }
.portal-workspace-setup-context-meta span { display: inline-flex; gap: 7px; align-items: center; min-height: 32px; padding: 6px 10px; border: 1px solid var(--portal-border); border-radius: 999px; color: var(--portal-muted-strong); font-size: 12px; font-weight: 750; }
.portal-workspace-setup-context-meta .portal-icon { width: 15px; height: 15px; color: var(--portal-accent); }
.portal-workspace-setup-form { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: var(--portal-surface); }
.portal-workspace-setup-form .portal-select, .portal-workspace-setup-form .portal-button { min-height: 44px; }
.portal-workspace-setup-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.portal-workspace-setup-focus { min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-workspace-setup-focus > legend { padding: 0; color: var(--portal-text); font-size: 15px; font-weight: 800; }
.portal-workspace-setup-focus > p { margin: 6px 0 12px; color: var(--portal-muted); font-size: 13px; line-height: 1.55; }
.portal-workspace-setup-focus > .portal-workspace-setup-focus-status { min-height: 20px; margin: -4px 0 12px; color: var(--portal-accent); font-size: 12px; font-weight: 750; }
.portal-workspace-setup-focus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-workspace-setup-focus-card { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 78px; padding: 12px; border: 1px solid var(--portal-border); border-radius: 12px; background: rgba(7, 14, 22, .22); color: var(--portal-text); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.portal-workspace-setup-focus-card:hover { border-color: rgba(81, 213, 188, .44); background: rgba(81, 213, 188, .06); transform: translateY(-1px); }
.portal-workspace-setup-focus-card:focus-within { border-color: var(--portal-accent); box-shadow: 0 0 0 3px rgba(81, 213, 188, .16); outline: 0; }
.portal-workspace-setup-focus-card:has(input:checked) { border-color: var(--portal-border-strong); background: rgba(81, 213, 188, .09); }
.portal-workspace-setup-focus-card input { width: 20px; height: 20px; margin: 0; accent-color: var(--portal-accent); }
.portal-workspace-setup-focus-card input:disabled { cursor: not-allowed; }
.portal-workspace-setup-focus-card:has(input:disabled) { cursor: not-allowed; opacity: .62; }
.portal-workspace-setup-focus-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--portal-border); border-radius: 10px; color: var(--portal-accent); background: rgba(81, 213, 188, .08); }
.portal-workspace-setup-focus-icon .portal-icon { width: 18px; height: 18px; }
.portal-workspace-setup-focus-card > span:last-child { display: grid; gap: 3px; min-width: 0; }
.portal-workspace-setup-focus-card strong { color: var(--portal-text); font-size: 13px; line-height: 1.35; }
.portal-workspace-setup-focus-card small { color: var(--portal-muted); font-size: 12px; line-height: 1.4; }
.portal-workspace-setup-secondary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Starter Kits stay inside the app shell: a compact Project launchpad, not a
   marketing hero. The right rail makes the write boundary visible before the
   user ever reaches the confirmation control. */
.portal-starter-kits { max-width: 1220px; }
.portal-starter-kits > .portal-hero { margin-bottom: 2px; }
.portal-starter-kits-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 318px); gap: 18px; align-items: start; }
.portal-starter-kit-catalog, .portal-starter-kit-detail { display: grid; gap: 16px; min-width: 0; }
.portal-starter-kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-starter-kit-card { display: flex; min-height: 100%; flex-direction: column; gap: 14px; border-color: var(--portal-border); transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.portal-starter-kit-card:hover { border-color: rgba(81, 213, 188, .48); background: var(--portal-surface-strong); transform: translateY(-1px); }
.portal-starter-kit-card:focus-within { border-color: var(--portal-accent); box-shadow: 0 0 0 3px rgba(81, 213, 188, .16); }
.portal-starter-kit-heading { display: flex; min-width: 0; gap: 12px; align-items: flex-start; }
.portal-starter-kit-heading > div { min-width: 0; }
.portal-starter-kit-heading .portal-module-icon { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid var(--portal-border); border-radius: 12px; background: rgba(81, 213, 188, .08); color: var(--portal-accent); }
.portal-starter-kit-heading .portal-module-icon .portal-icon { width: 20px; height: 20px; }
.portal-starter-kit-recommended { display: block; margin-bottom: 4px; color: var(--portal-accent); font-size: 11px; font-weight: 800; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.portal-starter-kit-outcome { min-height: 42px; margin: 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.58; }
.portal-starter-kit-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.portal-starter-kit-counts > div { min-width: 0; padding: 9px; border: 1px solid var(--portal-border); border-radius: 10px; background: rgba(7, 14, 22, .22); }
.portal-starter-kit-counts dt { overflow: hidden; color: var(--portal-muted); font-size: 10px; font-weight: 750; line-height: 1.3; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.portal-starter-kit-counts dd { margin: 4px 0 0; color: var(--portal-text); font-size: 16px; font-weight: 850; }
.portal-starter-kit-actions { display: flex; margin-top: auto; padding-top: 2px; }
.portal-starter-kit-actions .portal-button, .portal-starter-kit-confirmation .portal-button { min-height: 44px; }
.portal-starter-kit-actions .portal-button { width: 100%; justify-content: center; }
.portal-starter-kit-installed { margin: 0; color: var(--portal-accent); font-size: 12px; line-height: 1.5; }
.portal-starter-kit-scope { position: sticky; top: 88px; display: grid; gap: 15px; }
.portal-starter-kit-scope-section { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--portal-border); }
.portal-starter-kit-scope-section h3, .portal-starter-kit-creates h3 { margin: 0; color: var(--portal-text); font-size: 13px; }
.portal-starter-kit-scope-section ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.portal-starter-kit-scope-section li { position: relative; padding-left: 18px; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.5; }
.portal-starter-kit-scope-section li::before { position: absolute; left: 0; color: var(--portal-accent); content: "•"; }
.portal-starter-kit-detail-card, .portal-starter-kit-confirmation { display: grid; gap: 16px; }
.portal-starter-kit-creates { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--portal-border); }
.portal-starter-kit-confirm-check { align-items: flex-start; padding: 13px; border: 1px solid var(--portal-border); border-radius: 12px; background: rgba(7, 14, 22, .22); }
.portal-starter-kit-confirm-check input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; accent-color: var(--portal-accent); }
.portal-starter-kit-confirm-check:focus-within { border-color: var(--portal-accent); box-shadow: 0 0 0 3px rgba(81, 213, 188, .16); }
.portal-back-link { display: inline-flex; width: fit-content; min-height: 44px; gap: 8px; align-items: center; color: var(--portal-muted-strong); font-size: 13px; font-weight: 750; text-decoration: none; }
.portal-back-link:hover { color: var(--portal-text); }
.portal-back-link .portal-icon { width: 16px; height: 16px; transform: rotate(180deg); }

@media (max-width: 980px) {
  .portal-auth-page { grid-template-columns: 1fr; width: min(680px, 100%); gap: 20px; padding-top: 72px; }
  .portal-auth-intro { max-width: none; padding: 0; }
  .portal-auth-intro .portal-description { max-width: 620px; }
  .portal-auth-card { justify-self: stretch; max-width: none; }
  .portal-starter-kits-layout { grid-template-columns: 1fr; }
  .portal-starter-kit-scope { position: static; }
}

@media (max-width: 700px) {
  .portal-auth-page { min-height: auto; padding-top: 62px; }
  .portal-auth-intro .portal-title { font-size: clamp(31px, 10vw, 40px); }
  .portal-auth-switch { width: 100%; margin-bottom: 18px; }
  .portal-auth-switch a { min-width: 0; }
  .portal-auth-assurance .portal-auth-facts { grid-template-columns: 1fr; }
  .portal-auth-provider-option { grid-template-columns: 34px minmax(0, 1fr); }
  .portal-auth-provider-option .portal-button, .portal-auth-provider-state { grid-column: 2; justify-self: start; text-align: left; }
  .portal-auth-telegram-panel summary, .portal-dashboard-assurance summary { align-items: flex-start; }
  .portal-auth-telegram-panel summary small, .portal-dashboard-assurance summary small { margin-left: 0; }
  .portal-dashboard-library-grid { grid-template-columns: 1fr; }
  .portal-onboarding-steps { grid-template-columns: 1fr; }
  .portal-onboarding-steps li { min-height: 0; }
  .portal-onboarding-choice { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
  .portal-onboarding-choice .portal-button { grid-column: 2; justify-self: start; }
  .portal-workspace-setup-steps { grid-template-columns: 1fr; }
  .portal-workspace-setup-steps li { min-height: 0; }
  .portal-workspace-setup-context { grid-template-columns: 1fr; padding: 18px; }
  .portal-workspace-setup-context > .portal-status-badge { justify-self: start; }
  .portal-workspace-setup-form { padding: 18px; }
  .portal-workspace-setup-form-grid, .portal-workspace-setup-focus-grid { grid-template-columns: 1fr; }
  .portal-workspace-setup-focus-card { min-height: 76px; }
  .portal-workspace-setup-secondary .portal-button { min-height: 44px; flex: 1 1 180px; justify-content: center; }
  .portal-starter-kit-grid { grid-template-columns: 1fr; }
  .portal-starter-kit-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-starter-kit-scope, .portal-starter-kit-card, .portal-starter-kit-detail-card, .portal-starter-kit-confirmation { border-radius: 16px; }
  .portal-starter-kit-scope { padding: 18px; }
}

.portal-settings-nav {
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 3px;
  overflow-x: auto;
  padding: 3px;
  border: 1px solid #2c4054;
  border-radius: 11px;
  background: #0e1824;
}
.portal-settings-nav a {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: #9eb0c0;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.portal-settings-nav a:hover { color: #e8fffb; }
.portal-settings-nav a[aria-current="page"] { background: #1b4650; color: #e6fffb; }
.portal-account-overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr); gap: 18px; }
.portal-account-session { display: flex; flex-direction: column; }
.portal-account-session .portal-form-footer { margin-top: auto; }
.portal-account-settings-grid { display: grid; gap: 18px; }
.portal-account-assurance { display: block; border: 1px solid #2c4053; border-radius: 12px; background: #101b28; }
.portal-account-assurance summary { display: flex; min-height: 44px; align-items: center; padding: 10px 14px; color: #d8e8f2; font-size: 12px; font-weight: 740; cursor: pointer; list-style: none; }
.portal-account-assurance summary::-webkit-details-marker { display: none; }
.portal-account-assurance summary::after { content: "+"; margin-left: auto; color: #77dccc; font-size: 16px; font-weight: 500; }
.portal-account-assurance[open] { border-color: #3b586d; }
.portal-account-assurance[open] summary::after { content: "−"; }
.portal-account-assurance > .portal-status-grid { padding: 0 14px 14px; }

@media (max-width: 700px) {
  .portal-settings-nav { width: 100%; }
  .portal-settings-nav a { flex: 1 0 auto; text-align: center; }
  .portal-account-overview { grid-template-columns: 1fr; }
}

.portal-wallet-secondary, .portal-wallet-assurance {
  display: block;
  border: 1px solid #2c4053;
  border-radius: 12px;
  background: #101b28;
}
.portal-wallet-secondary summary, .portal-wallet-assurance summary {
  display: flex;
  min-height: 46px;
  align-items: center;
  padding: 11px 14px;
  color: #dbe9f2;
  font-size: 13px;
  font-weight: 740;
  cursor: pointer;
  list-style: none;
}
.portal-wallet-secondary summary::-webkit-details-marker, .portal-wallet-assurance summary::-webkit-details-marker { display: none; }
.portal-wallet-secondary summary::after, .portal-wallet-assurance summary::after { content: "+"; margin-left: auto; color: #77dccc; font-size: 17px; font-weight: 500; }
.portal-wallet-secondary[open], .portal-wallet-assurance[open] { border-color: #3b586d; }
.portal-wallet-secondary[open] summary::after, .portal-wallet-assurance[open] summary::after { content: "−"; }
.portal-wallet-secondary > .portal-card { margin: 0 12px 12px; }
.portal-wallet-assurance > .portal-status-grid { padding: 0 14px 14px; }
.portal-wallet-assurance-notes { display: grid; gap: 10px; padding: 0 14px 14px; }
.portal-wallet-page .portal-payment-entry-grid { grid-template-columns: minmax(0, 1fr); }

/* Admin ERP keeps the server-authorized information architecture, but presents
 * it as an operational control center instead of an undifferentiated wall of
 * cards. These selectors deliberately stay presentation-only: authority,
 * routes, capabilities and all write checks remain owned by the server. */
.portal-admin-home { min-width: 0; }
.portal-admin-home > .portal-admin-guard {
  min-width: 0;
  border-color: rgba(255, 211, 122, .3);
  background: linear-gradient(135deg, rgba(66, 54, 28, .58), rgba(17, 31, 42, .96));
}
.portal-admin-home > .portal-admin-guard .portal-state { min-width: 0; }
.portal-admin-home > .portal-admin-guard .portal-state h2 { color: #fff2ca; }
.portal-admin-home > .portal-admin-guard .portal-state p { max-width: 840px; color: #c7d3dc; }

.portal-admin-home > .portal-admin-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.portal-admin-home > .portal-admin-grid .portal-metric {
  min-width: 0;
  min-height: 132px;
  padding: 17px;
  border-color: #2e4559;
  border-radius: 14px;
  background: linear-gradient(145deg, #122335, #0d1825);
}
.portal-admin-home > .portal-admin-grid .portal-metric span { color: #aab9c7; }
.portal-admin-home > .portal-admin-grid .portal-metric strong {
  overflow-wrap: anywhere;
  color: #f3fafc;
  font-size: clamp(22px, 2vw, 29px);
  font-variant-numeric: tabular-nums;
}
.portal-admin-home > .portal-admin-grid .portal-metric em { color: #8fa5b6; line-height: 1.45; }

.portal-admin-work-queues {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid #2b4357;
  border-radius: var(--portal-radius-lg);
  background: linear-gradient(145deg, rgba(16, 37, 52, .95), rgba(11, 22, 34, .98));
}
.portal-admin-work-queues .portal-section-heading { margin: 0; }
.portal-admin-work-queues .portal-section-heading h2 { color: #f1f8fa; font-size: clamp(19px, 2vw, 24px); }
.portal-admin-work-queues .portal-section-heading p { max-width: 680px; color: #a7b9c7; font-size: 13px; line-height: 1.55; }
.portal-admin-work-queue-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.portal-admin-work-queue {
  display: grid;
  min-width: 0;
  min-height: 124px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 15px;
  border: 1px solid #30495d;
  border-radius: 13px;
  background: rgba(8, 20, 31, .58);
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  transition: border-color var(--portal-transition), background var(--portal-transition), transform var(--portal-transition), color var(--portal-transition);
}
.portal-admin-work-queue > .portal-module-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.portal-admin-work-queue > span:nth-child(2) { min-width: 0; }
.portal-admin-work-queue strong {
  display: block;
  overflow-wrap: anywhere;
  color: #ebf5f8;
  font-size: 13px;
  line-height: 1.35;
}
.portal-admin-work-queue small {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #9cb0c0;
  font-size: 11px;
  line-height: 1.48;
}
.portal-admin-work-queue > b {
  align-self: center;
  color: #72ead9;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--portal-transition), color var(--portal-transition);
}
.portal-admin-work-queue:hover {
  border-color: rgba(45, 212, 191, .58);
  background: rgba(45, 212, 191, .09);
  color: #fff;
  transform: translateY(-1px);
}
.portal-admin-work-queue:hover > b { color: #b5fff4; transform: translateX(2px); }
.portal-admin-work-queue:focus-visible {
  border-color: #5eead4;
  background: rgba(45, 212, 191, .1);
  outline: 3px solid rgba(94, 234, 212, .5);
  outline-offset: 2px;
}

.portal-admin-home > .portal-work-grid { align-items: start; }
.portal-admin-authority {
  display: block;
  min-width: 0;
  border: 1px solid #2c4356;
  border-radius: 14px;
  background: #101c29;
}
.portal-admin-authority > summary {
  display: flex;
  min-height: 46px;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  color: #dceaf1;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  transition: background var(--portal-transition), color var(--portal-transition);
}
.portal-admin-authority > summary::-webkit-details-marker { display: none; }
.portal-admin-authority > summary::after {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  color: #78e6d5;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--portal-transition);
}
.portal-admin-authority > summary:hover { background: rgba(45, 212, 191, .07); color: #effffc; }
.portal-admin-authority > summary:focus-visible { outline: 3px solid rgba(94, 234, 212, .5); outline-offset: -3px; }
.portal-admin-authority[open] { border-color: #3b5b70; }
.portal-admin-authority[open] > summary { border-bottom: 1px solid #2a4052; }
.portal-admin-authority[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.portal-admin-authority > .portal-card {
  margin: 14px;
  border-color: #30495d;
  border-radius: 12px;
  background: #0d1723;
}
.portal-admin-authority > .portal-card .portal-card-header { margin-bottom: 14px; }
.portal-admin-authority > .portal-card .portal-card-title { font-size: 15px; }
.portal-admin-authority .portal-summary-item { gap: 16px; }

.portal-admin-directory { min-width: 0; }
.portal-admin-directory > .portal-card-header { margin-bottom: 18px; }
.portal-admin-directory-groups { gap: 10px; }
.portal-admin-directory-group {
  display: block;
  min-width: 0;
  border: 1px solid #2b4154;
  border-radius: 14px;
  background: #0f1a27;
  transition: border-color var(--portal-transition), background var(--portal-transition);
}
.portal-admin-directory-group > summary {
  display: grid;
  min-width: 0;
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  color: #e3eef3;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
  transition: background var(--portal-transition), color var(--portal-transition);
}
.portal-admin-directory-group > summary::-webkit-details-marker { display: none; }
.portal-admin-directory-group > summary > span:first-child { display: grid; min-width: 0; gap: 3px; }
.portal-admin-directory-group > summary strong { overflow-wrap: anywhere; color: inherit; font-size: 14px; line-height: 1.35; }
.portal-admin-directory-group > summary small { overflow-wrap: anywhere; color: #98adbd; font-size: 11px; line-height: 1.42; }
.portal-admin-directory-group > summary .portal-feature-count {
  align-self: center;
  white-space: nowrap;
}
.portal-admin-directory-group > summary::after {
  width: 8px;
  height: 8px;
  justify-self: end;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  color: #79e6d6;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--portal-transition);
}
.portal-admin-directory-group > summary:hover { background: rgba(45, 212, 191, .07); color: #f3fffd; }
.portal-admin-directory-group > summary:focus-visible { outline: 3px solid rgba(94, 234, 212, .5); outline-offset: -3px; }
.portal-admin-directory-group[open] { border-color: #3a596c; background: #101e2c; }
.portal-admin-directory-group[open] > summary { border-bottom: 1px solid #2b4254; }
.portal-admin-directory-group[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.portal-admin-directory-group > .portal-module-grid {
  padding: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.portal-admin-directory-group .portal-module-card {
  min-width: 0;
  min-height: 150px;
  padding: 15px;
  border-color: #2e465a;
  background: #0c1723;
}
.portal-admin-directory-group .portal-module-card:hover,
.portal-admin-directory-group .portal-module-card:focus-visible {
  border-color: rgba(45, 212, 191, .56);
  background: #142536;
}

@media (max-width: 1320px) {
  .portal-admin-home > .portal-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-admin-work-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-admin-directory-group > .portal-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-admin-home > .portal-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .portal-admin-home > .portal-admin-grid .portal-metric { min-height: 122px; padding: 14px; }
  .portal-admin-work-queues { gap: 12px; padding: 17px; border-radius: 16px; }
  .portal-admin-work-queue-grid, .portal-admin-directory-group > .portal-module-grid { grid-template-columns: 1fr; }
  .portal-admin-work-queue { min-height: 112px; padding: 14px; }
  .portal-admin-work-queue > .portal-module-icon { width: 40px; height: 40px; }
  .portal-admin-authority > summary { min-height: 48px; padding: 12px 14px; }
  .portal-admin-authority > .portal-card { margin: 12px; }
  .portal-admin-directory-group > summary { min-height: 64px; gap: 9px; padding: 13px; }
  .portal-admin-directory-group > .portal-module-grid { padding: 12px; }
}

@media (max-width: 390px) {
  .portal-admin-home > .portal-admin-grid { grid-template-columns: 1fr; }
  .portal-admin-directory-group > summary { grid-template-columns: minmax(0, 1fr) 12px; }
  .portal-admin-directory-group > summary .portal-feature-count { grid-column: 1; justify-self: start; }
  .portal-admin-directory-group > summary::after { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-admin-work-queue, .portal-admin-work-queue > b,
  .portal-admin-authority, .portal-admin-authority > summary,
  .portal-admin-directory-group, .portal-admin-directory-group > summary { transition: none !important; }
}

/* State, empty and search affordances use the same closed SVG family as the
 * shell. Their containers keep the existing accessible labels and status text,
 * so color or iconography is never the only signal. */
.portal-state-icon .portal-icon { width: 20px; height: 20px; }
.portal-panel-row-icon .portal-icon { width: 15px; height: 15px; }
.portal-empty-icon .portal-icon { width: 20px; height: 20px; }
.portal-command-search-icon { display: grid; flex: 0 0 auto; place-items: center; color: #78d8cd; }
.portal-command-search-icon .portal-icon { width: 18px; height: 18px; }
.portal-catalog-search-control > span[aria-hidden="true"] { display: grid; flex: 0 0 auto; place-items: center; }
.portal-catalog-search-control > span[aria-hidden="true"] .portal-icon { width: 18px; height: 18px; }

/* Product discovery keeps capability-audit metadata available without making
 * the customer catalogue read like a migration report. Native disclosure
 * preserves keyboard behavior and lets small screens prioritize the cards. */
.portal-capability-family-state {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(93, 225, 204, .19);
  border-radius: 999px;
  background: rgba(45, 212, 191, .07);
  color: #a7f3e7;
  font-size: 10px;
  font-weight: 760;
}
.portal-capability-hub-audit, .portal-capability-family-summary {
  display: block;
  min-width: 0;
  border: 1px solid #2b4254;
  border-radius: 12px;
  background: rgba(6, 18, 29, .32);
}
.portal-capability-hub-audit > summary, .portal-capability-family-summary > summary {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: #d8ecf2;
  font-size: 12px;
  font-weight: 740;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.portal-capability-hub-audit > summary::-webkit-details-marker,
.portal-capability-family-summary > summary::-webkit-details-marker { display: none; }
.portal-capability-hub-audit > summary::after, .portal-capability-family-summary > summary::after {
  margin-left: auto;
  color: #76e4d3;
  content: "+";
  font-size: 17px;
  font-weight: 500;
}
.portal-capability-hub-audit[open], .portal-capability-family-summary[open] { border-color: #3a586b; }
.portal-capability-hub-audit[open] > summary, .portal-capability-family-summary[open] > summary { border-bottom: 1px solid #2b4254; }
.portal-capability-hub-audit[open] > summary::after, .portal-capability-family-summary[open] > summary::after { content: "−"; }
.portal-capability-hub-audit-body, .portal-capability-family-summary-body { display: grid; gap: 12px; padding: 0 14px 14px; }
.portal-capability-hub-audit .portal-capability-audit { margin: 0; }
.portal-capability-hub-audit .portal-capability-hub-note, .portal-capability-family-summary-body > p {
  margin: 0;
  color: #9badbb;
  font-size: 11px;
  line-height: 1.55;
}
.portal-capability-family-summary { margin-top: 16px; }

.portal-catalog-context {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px 17px;
  border: 1px solid #2c4357;
  border-radius: 14px;
  background: #101d2a;
}
.portal-catalog-context > .portal-module-icon { width: 42px; height: 42px; }
.portal-catalog-context strong { color: #e9f5f7; font-size: 14px; line-height: 1.35; }
.portal-catalog-context p { max-width: 760px; margin: 3px 0 0; color: #a8bac8; font-size: 12px; line-height: 1.52; }

/* A passive route-engine boundary: it explains the current catalogue state
   without adding an execution, checkout, or permission control. */
.portal-route-engine-notice {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-strong);
  box-shadow: var(--portal-shadow);
}
.portal-route-engine-notice-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--portal-border);
  border-radius: 13px;
  background: var(--portal-surface-soft);
  color: var(--portal-accent);
}
.portal-route-engine-notice-icon .portal-icon { width: 20px; height: 20px; }
.portal-route-engine-notice-copy { min-width: 0; }
.portal-route-engine-notice-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--portal-info);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.portal-route-engine-notice h2 { margin: 0; color: var(--portal-text); font-size: 16px; letter-spacing: -.015em; }
.portal-route-engine-notice p { max-width: 760px; margin: 5px 0 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.55; }
.portal-route-engine-notice--loading { border-style: dashed; }
.portal-route-engine-notice--guarded { border-color: var(--portal-warning); }
.portal-route-engine-notice--guarded .portal-route-engine-notice-icon { color: var(--portal-warning); }
@keyframes portal-route-engine-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .portal-route-engine-notice { animation: portal-route-engine-enter 220ms cubic-bezier(.16, 1, .3, 1) both; }
}

/* App-first navigation polish: keep structural controls in the closed SVG
 * family and make high-frequency auth controls comfortable on touch screens. */
.portal-command-item-arrow,
.portal-sidebar-create > b,
.portal-start-guide-step em b,
.portal-action-card-link b,
.portal-studio-open b {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
}
.portal-command-item-arrow .portal-icon,
.portal-sidebar-create > b .portal-icon,
.portal-start-guide-step em b .portal-icon,
.portal-action-card-link b .portal-icon,
.portal-studio-open b .portal-icon { width: 16px; height: 16px; }
.portal-command-close .portal-icon,
.portal-sidebar-close .portal-icon { width: 18px; height: 18px; }
.portal-sidebar-create-icon .portal-icon { width: 14px; height: 14px; }
.portal-dashboard-app .portal-action-card p,
.portal-auth-page .portal-auth-fact span,
.portal-auth-page .portal-auth-provider-option p,
.portal-auth-page .portal-auth-provider-state { font-size: 12px; line-height: 1.55; }

@media (max-width: 700px) {
  .portal-capability-hub-audit > summary, .portal-capability-family-summary > summary { min-height: 48px; padding: 11px 13px; }
  .portal-capability-hub-audit-body, .portal-capability-family-summary-body { padding: 0 13px 13px; }
  .portal-catalog-context { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .portal-catalog-context > .portal-module-icon { width: 40px; height: 40px; }
  .portal-catalog-context > .portal-badge { grid-column: 2; justify-self: start; }
  .portal-route-engine-notice { grid-template-columns: 1fr; gap: 11px; padding: 14px; }
  .portal-route-engine-notice-icon { width: 40px; height: 40px; }

  /* A compact visible affordance prevents a clipped table from looking like
   * missing data. The focused region remains the table wrapper itself. */
  .portal-data-table-scroll-hint {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid #26384a;
    color: #aebdcb;
    font-size: 12px;
    line-height: 1.45;
  }
  .portal-data-table th:first-child,
  .portal-data-table tbody td:first-child:not(.portal-empty-cell) {
    position: sticky;
    left: 0;
    max-width: min(48vw, 216px);
    overflow-wrap: anywhere;
    background: var(--portal-surface);
    box-shadow: 8px 0 12px -12px rgba(0, 0, 0, .92);
  }
  .portal-data-table th:first-child { z-index: 2; }
  .portal-data-table tbody td:first-child:not(.portal-empty-cell) { z-index: 1; }
  .portal-data-table tbody tr:hover > td:first-child:not(.portal-empty-cell) { background: #172638; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-route-engine-notice { animation: none; transform: none; }
}

/* System & Data Stewardship is navigation-only. These scoped cards make the
 * authority boundary obvious without inventing a runtime dashboard or a
 * control plane. */
.portal-workspace-care,
.portal-admin-system-stewardship { display: grid; gap: 18px; }
.portal-workspace-care-intro,
.portal-stewardship-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-workspace-care-intro > div:first-child,
.portal-stewardship-intro > div:first-child { min-width: 0; }
.portal-workspace-care-intro h2,
.portal-stewardship-intro h2 { margin: 6px 0 0; color: #f1fbfc; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.035em; }
.portal-workspace-care-intro p,
.portal-stewardship-intro p { max-width: 760px; margin: 9px 0 0; color: #a7bdc9; font-size: 12px; line-height: 1.65; }
.portal-workspace-care-status,
.portal-stewardship-intro-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  flex: 0 1 286px;
  gap: 10px;
  align-items: center;
  min-width: 210px;
  padding: 11px 12px;
  border: 1px solid rgba(83, 205, 190, .23);
  border-radius: 14px;
  background: rgba(35, 131, 132, .1);
}
.portal-workspace-care-status-icon,
.portal-stewardship-intro-status > span:first-child,
.portal-workspace-care-card-icon,
.portal-stewardship-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(84, 212, 195, .25);
  border-radius: 11px;
  color: #81ebde;
  background: rgba(50, 190, 174, .1);
}
.portal-workspace-care-status-icon .portal-icon,
.portal-stewardship-intro-status > span:first-child .portal-icon,
.portal-workspace-care-card-icon .portal-icon,
.portal-stewardship-card-icon .portal-icon { width: 19px; height: 19px; }
.portal-workspace-care-status strong,
.portal-workspace-care-status small,
.portal-stewardship-intro-status strong,
.portal-stewardship-intro-status small { display: block; }
.portal-workspace-care-status strong,
.portal-stewardship-intro-status strong { color: #dffaf7; font-size: 12px; line-height: 1.35; }
.portal-workspace-care-status small,
.portal-stewardship-intro-status small { margin-top: 3px; color: #8eabb7; font-size: 10px; line-height: 1.4; }
.portal-workspace-care-grid,
.portal-stewardship-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portal-workspace-care-card,
.portal-stewardship-card {
  display: grid;
  min-width: 0;
  min-height: 154px;
  padding: 16px;
  border: 1px solid #2a4352;
  border-radius: 16px;
  color: inherit;
  background: linear-gradient(145deg, rgba(20, 39, 53, .94), rgba(13, 27, 40, .98));
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.portal-workspace-care-card { grid-template-columns: 38px minmax(0, 1fr); gap: 13px; }
.portal-stewardship-card { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 13px; align-items: start; }
.portal-workspace-care-card:hover,
.portal-workspace-care-card:focus-visible,
.portal-stewardship-card:not(.portal-stewardship-card--guarded):hover,
.portal-stewardship-card:not(.portal-stewardship-card--guarded):focus-visible {
  border-color: rgba(100, 231, 214, .52);
  background: linear-gradient(145deg, rgba(23, 56, 66, .96), rgba(12, 32, 44, .99));
  outline: 0;
  transform: translateY(-2px);
}
.portal-workspace-care-card:focus-visible,
.portal-stewardship-card:focus-visible { box-shadow: 0 0 0 3px rgba(87, 221, 204, .23); }
.portal-workspace-care-card-copy,
.portal-stewardship-card-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.portal-workspace-care-card-copy small,
.portal-stewardship-card-copy small { color: #76d8c9; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.portal-workspace-care-card-copy strong,
.portal-stewardship-card-copy strong { margin-top: 5px; color: #edf9fb; font-size: 14px; letter-spacing: -.018em; line-height: 1.35; }
.portal-workspace-care-card-copy > span,
.portal-stewardship-card-copy > span { margin-top: 7px; color: #a6bdc8; font-size: 11px; line-height: 1.55; }
.portal-workspace-care-card-copy em,
.portal-stewardship-card-copy em { margin-top: auto; padding-top: 12px; color: #8deadd; font-size: 11px; font-style: normal; font-weight: 800; }
.portal-workspace-care-card-copy em b,
.portal-stewardship-card-copy em b { margin-left: 3px; font-size: 14px; }
.portal-stewardship-card--guarded { border-style: dashed; border-color: #334554; background: rgba(17, 31, 43, .72); }
.portal-stewardship-card--guarded .portal-stewardship-card-icon { color: #9caeb9; border-color: rgba(151, 173, 185, .23); background: rgba(148, 163, 184, .08); }
.portal-stewardship-card--guarded .portal-stewardship-card-copy em { color: #a8bac6; }
.portal-stewardship-card-state { align-self: start; }
.portal-stewardship-section { display: grid; gap: 11px; }
.portal-stewardship-section .portal-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-stewardship-section .portal-section-heading h2 { margin: 4px 0 0; color: #eaf6f8; font-size: 18px; letter-spacing: -.025em; }
.portal-stewardship-section .portal-section-heading p { max-width: 700px; margin: 6px 0 0; color: #9fb7c3; font-size: 11px; line-height: 1.55; }
.portal-workspace-care-boundary ul,
.portal-stewardship-boundary ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.portal-workspace-care-boundary li,
.portal-stewardship-boundary li { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 12px; border: 1px solid #263d4d; border-radius: 13px; background: rgba(7, 20, 31, .34); }
.portal-workspace-care-boundary li > span:first-child,
.portal-stewardship-boundary li > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; color: #76ddd0; }
.portal-workspace-care-boundary li > span:first-child .portal-icon,
.portal-stewardship-boundary li > span:first-child .portal-icon { width: 16px; height: 16px; }
.portal-workspace-care-boundary strong,
.portal-workspace-care-boundary small,
.portal-stewardship-boundary strong,
.portal-stewardship-boundary small { display: block; }
.portal-workspace-care-boundary strong,
.portal-stewardship-boundary strong { color: #dcecef; font-size: 11px; line-height: 1.42; }
.portal-workspace-care-boundary small,
.portal-stewardship-boundary small { margin-top: 4px; color: #94adba; font-size: 10px; line-height: 1.5; }

@media (max-width: 980px) {
  .portal-workspace-care-grid,
  .portal-stewardship-grid,
  .portal-workspace-care-boundary ul,
  .portal-stewardship-boundary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-workspace-care-intro,
  .portal-stewardship-intro { flex-direction: column; gap: 14px; padding: 17px; }
  .portal-workspace-care-status,
  .portal-stewardship-intro-status { width: 100%; min-width: 0; }
  .portal-workspace-care-grid,
  .portal-stewardship-grid,
  .portal-workspace-care-boundary ul,
  .portal-stewardship-boundary ul { grid-template-columns: 1fr; }
  .portal-stewardship-section .portal-section-heading { flex-direction: column; gap: 8px; }
  .portal-workspace-care-card,
  .portal-stewardship-card { min-height: 132px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-workspace-care-card,
  .portal-stewardship-card { transition: none; }
}

/* Workspace Menu is a compact, navigation-only directory. It deliberately
 * reuses the app shell's semantic surfaces rather than introducing a second
 * dashboard, provider state or execution control plane. */
.portal-workspace-menu { display: grid; gap: 18px; }
.portal-workspace-menu-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-workspace-menu-intro > div:first-child { min-width: 0; }
.portal-workspace-menu-intro h2 { max-width: 760px; margin: 6px 0 0; color: var(--portal-text); font-size: clamp(21px, 2.35vw, 30px); letter-spacing: -.035em; }
.portal-workspace-menu-intro p { max-width: 750px; margin: 9px 0 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.65; }
.portal-workspace-menu-intro-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  flex: 0 1 252px;
  gap: 10px;
  min-width: 212px;
  padding: 11px;
  border: 1px solid var(--portal-border-strong);
  border-radius: 14px;
  background: rgba(35, 131, 132, .1);
}
.portal-workspace-menu-intro-status > span:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--portal-accent); background: rgba(50, 190, 174, .1); }
.portal-workspace-menu-intro-status > span:first-child .portal-icon { width: 19px; height: 19px; }
.portal-workspace-menu-intro-status strong,
.portal-workspace-menu-intro-status small { display: block; }
.portal-workspace-menu-intro-status strong { color: var(--portal-text); font-size: 14px; line-height: 1.35; }
.portal-workspace-menu-intro-status small { margin-top: 3px; color: var(--portal-muted); font-size: 12px; line-height: 1.45; }
.portal-workspace-menu-directory { display: grid; gap: 24px; }
.portal-workspace-menu-group { display: grid; gap: 12px; }
.portal-workspace-menu-group-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 0 2px; }
.portal-workspace-menu-group-head h2 { margin: 4px 0 0; color: var(--portal-text); font-size: 18px; letter-spacing: -.025em; }
.portal-workspace-menu-group-head p { max-width: 720px; margin: 6px 0 0; color: var(--portal-muted); font-size: 13px; line-height: 1.55; }
.portal-workspace-menu-group-head > span { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--portal-border); border-radius: 999px; color: var(--portal-muted-strong); background: rgba(125, 205, 235, .05); font-size: 12px; font-weight: 800; white-space: nowrap; }
.portal-workspace-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.portal-workspace-menu-card {
  display: grid;
  gap: 13px;
  min-height: 184px;
  padding: 17px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  transition: border-color var(--portal-transition), background var(--portal-transition), transform var(--portal-transition), box-shadow var(--portal-transition);
}
.portal-workspace-menu-card:hover { border-color: var(--portal-border-strong); background: var(--portal-surface-strong); transform: translateY(-1px); }
.portal-workspace-menu-card:active { border-color: var(--portal-accent); background: rgba(50, 190, 174, .1); transform: translateY(0); }
.portal-workspace-menu-card:focus-visible { border-color: var(--portal-accent); outline: 0; box-shadow: 0 0 0 3px rgba(81, 213, 188, .25); }
.portal-workspace-menu-card-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.portal-workspace-menu-card-state { display: inline-flex; min-width: 0; align-items: flex-end; flex-direction: column; gap: 5px; text-align: right; }
.portal-workspace-menu-card-state small { max-width: 150px; color: var(--portal-muted); font-size: 12px; font-weight: 760; line-height: 1.35; }
.portal-workspace-menu-card-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.portal-workspace-menu-card-copy > small { color: var(--portal-accent); font-size: 11px; font-weight: 850; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.portal-workspace-menu-card-copy > strong { margin-top: 7px; color: var(--portal-text); font-size: 15px; letter-spacing: -.018em; line-height: 1.38; }
.portal-workspace-menu-card-copy > span { margin-top: 6px; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.55; }
.portal-workspace-menu-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: auto; min-height: 24px; color: var(--portal-accent); font-size: 12px; font-weight: 800; }
.portal-workspace-menu-card-footer b { font-size: 15px; line-height: 1; }
.portal-workspace-menu-boundary-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.portal-workspace-menu-boundary-list > li { display: grid; gap: 4px; min-width: 0; padding: 13px; border: 1px solid var(--portal-border); border-radius: 13px; background: rgba(7, 20, 31, .34); }
.portal-workspace-menu-boundary-list strong { color: var(--portal-text); font-size: 12px; line-height: 1.45; }
.portal-workspace-menu-boundary-list small { color: var(--portal-muted); font-size: 12px; line-height: 1.52; }

@media (max-width: 980px) {
  .portal-workspace-menu-grid,
  .portal-workspace-menu-boundary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-workspace-menu-intro { flex-direction: column; gap: 14px; padding: 17px; }
  .portal-workspace-menu-intro-status { width: 100%; min-width: 0; }
  .portal-workspace-menu-group-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .portal-workspace-menu-grid,
  .portal-workspace-menu-boundary-list { grid-template-columns: 1fr; }
  .portal-workspace-menu-card { min-height: 164px; padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-workspace-menu-card { transition: none; }
  .portal-workspace-menu-card:hover { transform: none; }
}

/* Tax Readiness is a static canonical-admin guide, not a financial read
 * model. Keep the layout dense, calm and responsive without adding KPI cards,
 * calculators, upload surfaces or a browser-side control plane. */
.portal-admin-tax-readiness { display: grid; gap: 18px; }
.portal-tax-readiness-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-tax-readiness-intro > div:first-child { min-width: 0; }
.portal-tax-readiness-intro h2 { max-width: 820px; margin: 6px 0 0; color: #f1fbfc; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.035em; }
.portal-tax-readiness-intro p { max-width: 780px; margin: 9px 0 0; color: #a7bdc9; font-size: 12px; line-height: 1.65; }
.portal-tax-readiness-intro-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  flex: 0 1 286px;
  gap: 10px;
  align-items: center;
  min-width: 210px;
  padding: 11px 12px;
  border: 1px solid rgba(83, 205, 190, .23);
  border-radius: 14px;
  background: rgba(35, 131, 132, .1);
}
.portal-tax-readiness-intro-status > span:first-child,
.portal-tax-readiness-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(84, 212, 195, .25);
  border-radius: 11px;
  color: #81ebde;
  background: rgba(50, 190, 174, .1);
}
.portal-tax-readiness-intro-status > span:first-child .portal-icon,
.portal-tax-readiness-card-icon .portal-icon { width: 19px; height: 19px; }
.portal-tax-readiness-intro-status strong,
.portal-tax-readiness-intro-status small { display: block; }
.portal-tax-readiness-intro-status strong { color: #dffaf7; font-size: 12px; line-height: 1.35; }
.portal-tax-readiness-intro-status small { margin-top: 3px; color: #8eabb7; font-size: 12px; line-height: 1.45; }
.portal-tax-readiness-section { display: grid; gap: 11px; }
.portal-tax-readiness-section .portal-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-tax-readiness-section .portal-section-heading h2 { margin: 4px 0 0; color: #eaf6f8; font-size: 18px; letter-spacing: -.025em; }
.portal-tax-readiness-section .portal-section-heading p { max-width: 700px; margin: 6px 0 0; color: #9fb7c3; font-size: 12px; line-height: 1.55; }
.portal-tax-readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portal-tax-readiness-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #2a4352;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 39, 53, .94), rgba(13, 27, 40, .98));
}
.portal-tax-readiness-card h3 { margin: 0; color: #edf9fb; font-size: 14px; letter-spacing: -.018em; line-height: 1.35; }
.portal-tax-readiness-card p { margin: 7px 0 0; color: #a6bdc8; font-size: 12px; line-height: 1.55; }
.portal-tax-readiness-process ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tax-readiness-step;
}
.portal-tax-readiness-process li {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid #263d4d;
  border-radius: 13px;
  background: rgba(7, 20, 31, .34);
  counter-increment: tax-readiness-step;
}
.portal-tax-readiness-process li::before {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(84, 212, 195, .25);
  border-radius: 9px;
  color: #76ddd0;
  content: counter(tax-readiness-step);
  font-size: 11px;
  font-weight: 850;
}
.portal-tax-readiness-process li strong,
.portal-tax-readiness-process li span { display: block; }
.portal-tax-readiness-process li strong { color: #dcecef; font-size: 12px; line-height: 1.42; }
.portal-tax-readiness-process li span { margin-top: 4px; color: #94adba; font-size: 12px; line-height: 1.5; }
.portal-tax-readiness-boundary ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.portal-tax-readiness-boundary li { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 12px; border: 1px solid #263d4d; border-radius: 13px; background: rgba(7, 20, 31, .34); }
.portal-tax-readiness-boundary li > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; color: #76ddd0; }
.portal-tax-readiness-boundary li > span:first-child .portal-icon { width: 16px; height: 16px; }
.portal-tax-readiness-boundary strong,
.portal-tax-readiness-boundary small { display: block; }
.portal-tax-readiness-boundary strong { color: #dcecef; font-size: 12px; line-height: 1.42; }
.portal-tax-readiness-boundary small { margin-top: 4px; color: #94adba; font-size: 12px; line-height: 1.5; }

@media (max-width: 980px) {
  .portal-tax-readiness-grid,
  .portal-tax-readiness-process ol,
  .portal-tax-readiness-boundary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-tax-readiness-intro { flex-direction: column; gap: 14px; padding: 17px; }
  .portal-tax-readiness-intro-status { width: 100%; min-width: 0; }
  .portal-tax-readiness-section .portal-section-heading { flex-direction: column; gap: 8px; }
  .portal-tax-readiness-grid,
  .portal-tax-readiness-process ol,
  .portal-tax-readiness-boundary ul { grid-template-columns: 1fr; }
  .portal-tax-readiness-card { min-height: 132px; padding: 14px; }
}

/* Postback Readiness is a static canonical-admin guide. It deliberately stops
 * before connection configuration or inbound-event handling, so staff can
 * follow a legible handoff without the browser becoming another control plane. */
.portal-admin-postback-readiness { display: grid; gap: 18px; }
.portal-postback-readiness-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid rgba(77, 207, 181, .28);
  border-radius: var(--portal-radius-lg);
  background:
    radial-gradient(circle at 92% 3%, rgba(45, 212, 191, .13), transparent 33%),
    var(--portal-surface-strong);
}
.portal-postback-readiness-intro > div:first-child { min-width: 0; }
.portal-postback-readiness-intro h2 { max-width: 830px; margin: 6px 0 0; color: #effcfa; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.035em; }
.portal-postback-readiness-intro p { max-width: 790px; margin: 9px 0 0; color: #aac4c4; font-size: 13px; line-height: 1.62; }
.portal-postback-readiness-intro-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  flex: 0 1 294px;
  gap: 10px;
  align-items: center;
  min-width: 216px;
  padding: 11px 12px;
  border: 1px solid rgba(96, 231, 200, .27);
  border-radius: 14px;
  background: rgba(26, 117, 103, .15);
}
.portal-postback-readiness-intro-status > span:first-child,
.portal-postback-readiness-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(93, 231, 201, .28);
  border-radius: 11px;
  color: #8af0dc;
  background: rgba(38, 180, 153, .12);
}
.portal-postback-readiness-intro-status > span:first-child .portal-icon,
.portal-postback-readiness-card-icon .portal-icon { width: 19px; height: 19px; }
.portal-postback-readiness-intro-status strong,
.portal-postback-readiness-intro-status small { display: block; }
.portal-postback-readiness-intro-status strong { color: #dcfcf4; font-size: 13px; line-height: 1.35; }
.portal-postback-readiness-intro-status small { margin-top: 3px; color: #a7c6c0; font-size: 12px; line-height: 1.45; }
.portal-postback-readiness-section { display: grid; gap: 11px; }
.portal-postback-readiness-section .portal-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-postback-readiness-section .portal-section-heading h2 { margin: 4px 0 0; color: #e9f9f6; font-size: 18px; letter-spacing: -.025em; }
.portal-postback-readiness-section .portal-section-heading p { max-width: 720px; margin: 6px 0 0; color: #a6c1bf; font-size: 13px; line-height: 1.55; }
.portal-postback-readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portal-postback-readiness-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  min-height: 150px;
  padding: 16px;
  border: 1px solid #2b4d4a;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 51, 52, .94), rgba(12, 28, 38, .98));
}
.portal-postback-readiness-card h3 { margin: 0; color: #effcf9; font-size: 14px; letter-spacing: -.018em; line-height: 1.35; }
.portal-postback-readiness-card p { margin: 7px 0 0; color: #b0c8c5; font-size: 13px; line-height: 1.55; }
.portal-postback-readiness-process ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: postback-readiness-step;
}
.portal-postback-readiness-process li {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid #294643;
  border-radius: 13px;
  background: rgba(7, 27, 31, .36);
  counter-increment: postback-readiness-step;
}
.portal-postback-readiness-process li::before {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(93, 231, 201, .28);
  border-radius: 9px;
  color: #86edd9;
  content: counter(postback-readiness-step);
  font-size: 12px;
  font-weight: 850;
}
.portal-postback-readiness-process li strong,
.portal-postback-readiness-process li span { display: block; }
.portal-postback-readiness-process li strong { color: #e2f2ee; font-size: 13px; line-height: 1.42; }
.portal-postback-readiness-process li span { margin-top: 4px; color: #a7c0bd; font-size: 12px; line-height: 1.55; }
.portal-postback-readiness-boundary ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.portal-postback-readiness-boundary li { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 12px; border: 1px solid #294643; border-radius: 13px; background: rgba(7, 27, 31, .36); }
.portal-postback-readiness-boundary li > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; color: #86edd9; }
.portal-postback-readiness-boundary li > span:first-child .portal-icon { width: 16px; height: 16px; }
.portal-postback-readiness-boundary strong,
.portal-postback-readiness-boundary small { display: block; }
.portal-postback-readiness-boundary strong { color: #e2f2ee; font-size: 13px; line-height: 1.42; }
.portal-postback-readiness-boundary small { margin-top: 4px; color: #a7c0bd; font-size: 12px; line-height: 1.55; }

@media (max-width: 980px) {
  .portal-postback-readiness-grid,
  .portal-postback-readiness-process ol,
  .portal-postback-readiness-boundary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-postback-readiness-intro { flex-direction: column; gap: 14px; padding: 17px; }
  .portal-postback-readiness-intro-status { width: 100%; min-width: 0; }
  .portal-postback-readiness-section .portal-section-heading { flex-direction: column; gap: 8px; }
  .portal-postback-readiness-grid,
  .portal-postback-readiness-process ol,
  .portal-postback-readiness-boundary ul { grid-template-columns: 1fr; }
  .portal-postback-readiness-card { min-height: 132px; padding: 14px; }
}

/* Job-Lock Recovery remains a static canonical-admin safety guide. It is not a
 * queue console, a job/lock read model, or an administrative control plane. */
.portal-admin-job-recovery-guide { display: grid; gap: 18px; }
.portal-job-recovery-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background:
    radial-gradient(circle at 91% 4%, rgba(210, 146, 68, .12), transparent 33%),
    var(--portal-surface-strong);
}
.portal-job-recovery-intro > div:first-child { min-width: 0; }
.portal-job-recovery-intro h2 { max-width: 830px; margin: 6px 0 0; color: #f4fbfc; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.035em; }
.portal-job-recovery-intro p { max-width: 800px; margin: 9px 0 0; color: #aac0c9; font-size: 13px; line-height: 1.65; }
.portal-job-recovery-intro-status {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  flex: 0 1 294px;
  gap: 10px;
  align-items: center;
  min-width: 220px;
  padding: 11px 12px;
  border: 1px solid rgba(238, 180, 100, .26);
  border-radius: 14px;
  background: rgba(180, 112, 40, .11);
}
.portal-job-recovery-intro-status > span:first-child,
.portal-job-recovery-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(241, 188, 109, .28);
  border-radius: 11px;
  color: #ffd18d;
  background: rgba(209, 135, 50, .11);
}
.portal-job-recovery-intro-status > span:first-child .portal-icon,
.portal-job-recovery-card-icon .portal-icon { width: 19px; height: 19px; }
.portal-job-recovery-intro-status strong,
.portal-job-recovery-intro-status small { display: block; }
.portal-job-recovery-intro-status strong { color: #fff0d5; font-size: 13px; line-height: 1.35; }
.portal-job-recovery-intro-status small { margin-top: 3px; color: #cbb794; font-size: 12px; line-height: 1.45; }
.portal-job-recovery-section { display: grid; gap: 11px; }
.portal-job-recovery-section .portal-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.portal-job-recovery-section .portal-section-heading h2 { margin: 4px 0 0; color: #edf7f8; font-size: 18px; letter-spacing: -.025em; }
.portal-job-recovery-section .portal-section-heading p { max-width: 720px; margin: 6px 0 0; color: #a4bac4; font-size: 13px; line-height: 1.55; }
.portal-job-recovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portal-job-recovery-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  min-height: 154px;
  padding: 16px;
  border: 1px solid #394450;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(27, 41, 51, .95), rgba(14, 27, 38, .99));
}
.portal-job-recovery-card h3 { margin: 0; color: #f0f8fa; font-size: 14px; letter-spacing: -.018em; line-height: 1.35; }
.portal-job-recovery-card p { margin: 7px 0 0; color: #adbec6; font-size: 13px; line-height: 1.55; }
.portal-job-recovery-process ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: job-recovery-step;
}
.portal-job-recovery-process li {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid #35424c;
  border-radius: 13px;
  background: rgba(8, 20, 29, .35);
  counter-increment: job-recovery-step;
}
.portal-job-recovery-process li::before {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(242, 189, 111, .3);
  border-radius: 9px;
  color: #ffd18d;
  content: counter(job-recovery-step);
  font-size: 12px;
  font-weight: 850;
}
.portal-job-recovery-process li strong,
.portal-job-recovery-process li span { display: block; }
.portal-job-recovery-process li strong { color: #e5eff1; font-size: 13px; line-height: 1.42; }
.portal-job-recovery-process li span { margin-top: 4px; color: #a1b5be; font-size: 12px; line-height: 1.55; }
.portal-job-recovery-boundary ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.portal-job-recovery-boundary li { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 12px; border: 1px solid #35424c; border-radius: 13px; background: rgba(8, 20, 29, .35); }
.portal-job-recovery-boundary li > span:first-child { display: grid; place-items: center; width: 29px; height: 29px; color: #ffd18d; }
.portal-job-recovery-boundary li > span:first-child .portal-icon { width: 16px; height: 16px; }
.portal-job-recovery-boundary strong,
.portal-job-recovery-boundary small { display: block; }
.portal-job-recovery-boundary strong { color: #e5eff1; font-size: 13px; line-height: 1.42; }
.portal-job-recovery-boundary small { margin-top: 4px; color: #a1b5be; font-size: 12px; line-height: 1.55; }

@media (max-width: 980px) {
  .portal-job-recovery-grid,
  .portal-job-recovery-process ol,
  .portal-job-recovery-boundary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-job-recovery-intro { flex-direction: column; gap: 14px; padding: 17px; }
  .portal-job-recovery-intro-status { width: 100%; min-width: 0; }
  .portal-job-recovery-section .portal-section-heading { flex-direction: column; gap: 8px; }
  .portal-job-recovery-grid,
  .portal-job-recovery-process ol,
  .portal-job-recovery-boundary ul { grid-template-columns: 1fr; }
  .portal-job-recovery-card { min-height: 132px; padding: 14px; }
}

/* The interface locale navigator owns a small, explicit Web presentation
 * preference. These controls are not Bot language callbacks, translation
 * settings, or a provider/job/financial surface. */
.portal-interface-locale-navigator { display: grid; gap: 18px; }
.portal-interface-locale-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-interface-locale-intro > div:first-child { min-width: 0; }
.portal-interface-locale-intro h2 { max-width: 780px; margin: 6px 0 0; color: var(--portal-text); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.035em; }
.portal-interface-locale-intro p { max-width: 760px; margin: 9px 0 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.65; }
.portal-interface-locale-current {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  flex: 0 1 278px;
  gap: 10px;
  align-items: center;
  min-width: 210px;
  padding: 11px 12px;
  border: 1px solid var(--portal-border-strong);
  border-radius: 14px;
  background: rgba(35, 131, 132, .1);
}
.portal-interface-locale-current > span:first-child,
.portal-interface-locale-choice-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(84, 212, 195, .26);
  border-radius: 11px;
  color: var(--portal-accent);
  background: rgba(50, 190, 174, .1);
}
.portal-interface-locale-current > span:first-child .portal-icon,
.portal-interface-locale-choice-mark .portal-icon { width: 19px; height: 19px; }
.portal-interface-locale-current strong,
.portal-interface-locale-current small { display: block; }
.portal-interface-locale-current strong { color: var(--portal-text); font-size: 13px; line-height: 1.35; }
.portal-interface-locale-current small { margin-top: 3px; color: var(--portal-muted); font-size: 12px; line-height: 1.45; }
.portal-interface-locale-form { margin: 0; }
.portal-interface-locale-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.portal-interface-locale-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portal-interface-locale-choice { position: relative; display: block; min-width: 0; cursor: pointer; touch-action: manipulation; }
.portal-interface-locale-input { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.portal-interface-locale-choice-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 174px;
  padding: 15px;
  border: 1px solid var(--portal-border);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 39, 53, .94), rgba(13, 27, 40, .98));
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.portal-interface-locale-choice:hover .portal-interface-locale-choice-body { border-color: var(--portal-border-strong); transform: translateY(-1px); }
.portal-interface-locale-choice:focus-within .portal-interface-locale-choice-body { border-color: var(--portal-accent); outline: 0; box-shadow: 0 0 0 3px rgba(81, 213, 188, .25); }
.portal-interface-locale-input:checked + .portal-interface-locale-choice-body { border-color: var(--portal-border-strong); background: linear-gradient(145deg, rgba(20, 65, 70, .98), rgba(12, 39, 49, .99)); box-shadow: inset 0 0 0 1px rgba(81, 213, 188, .16); }
.portal-interface-locale-choice:has(.portal-interface-locale-input:disabled) { cursor: not-allowed; }
.portal-interface-locale-choice:has(.portal-interface-locale-input:disabled):hover .portal-interface-locale-choice-body { border-color: var(--portal-border); transform: none; }
.portal-interface-locale-input:disabled + .portal-interface-locale-choice-body { opacity: .56; cursor: not-allowed; }
.portal-interface-locale-choice-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.portal-interface-locale-choice-mark { width: 30px; height: 30px; border-radius: 9px; }
.portal-interface-locale-choice-mark .portal-icon { width: 16px; height: 16px; }
.portal-interface-locale-choice-state { color: var(--portal-accent); font-size: 12px; font-weight: 800; line-height: 1.35; text-align: right; }
.portal-interface-locale-choice strong { margin-top: auto; padding-top: 16px; color: var(--portal-text); font-size: 17px; line-height: 1.35; }
.portal-interface-locale-choice small { margin-top: 4px; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.45; }
.portal-interface-locale-choice em { margin-top: 11px; color: var(--portal-accent); font-size: 12px; font-style: normal; font-weight: 750; line-height: 1.45; }
.portal-interface-locale-boundary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.portal-interface-locale-boundary article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 13px; border: 1px solid var(--portal-border); border-radius: 14px; background: rgba(10, 26, 38, .56); }
.portal-interface-locale-boundary article > span { display: grid; place-items: center; width: 30px; height: 30px; color: var(--portal-accent); }
.portal-interface-locale-boundary article > span .portal-icon { width: 17px; height: 17px; }
.portal-interface-locale-boundary strong,
.portal-interface-locale-boundary p { display: block; }
.portal-interface-locale-boundary strong { color: var(--portal-text); font-size: 13px; line-height: 1.42; }
.portal-interface-locale-boundary p { margin: 4px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.55; }
.portal-interface-locale-support ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin: 0; padding: 0; list-style: none; }
.portal-interface-locale-support li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 11px; align-items: start; min-width: 0; padding: 12px; border: 1px dashed var(--portal-border); border-radius: 13px; background: rgba(13, 29, 40, .56); }
.portal-interface-locale-unsupported-code { display: grid; place-items: center; min-height: 38px; padding: 4px; border: 1px solid var(--portal-border); border-radius: 10px; color: var(--portal-muted-strong); background: rgba(148, 163, 184, .08); font-size: 14px; font-weight: 800; line-height: 1.2; text-align: center; }
.portal-interface-locale-support strong,
.portal-interface-locale-support small { display: block; }
.portal-interface-locale-support strong { color: var(--portal-text); font-size: 13px; line-height: 1.42; }
.portal-interface-locale-support small { margin-top: 4px; color: var(--portal-muted); font-size: 12px; line-height: 1.55; }

@media (max-width: 980px) {
  .portal-interface-locale-grid,
  .portal-interface-locale-boundary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-interface-locale-intro { flex-direction: column; gap: 14px; padding: 17px; }
  .portal-interface-locale-current { width: 100%; min-width: 0; }
  .portal-interface-locale-grid,
  .portal-interface-locale-boundary,
  .portal-interface-locale-support ul { grid-template-columns: 1fr; }
  .portal-interface-locale-choice-body { min-height: 146px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-interface-locale-choice-body { transition: none; }
  .portal-interface-locale-choice:hover .portal-interface-locale-choice-body { transform: none; }
}

/* Guide Center is a private, read-only navigation surface. It uses the same
 * compact slate/teal workspace language as the app shell, rather than a
 * marketing/landing treatment or a simulated execution flow. */
.portal-guide-center { display: grid; gap: 18px; min-width: 0; }
.portal-guide-center-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(244px, .78fr);
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
}
.portal-guide-center-intro h2 { max-width: 780px; margin: 7px 0 9px; color: var(--portal-text); font-size: clamp(26px, 3vw, 40px); letter-spacing: -.047em; }
.portal-guide-center-intro p { max-width: 760px; margin: 0; color: var(--portal-muted-strong); line-height: 1.7; }
.portal-guide-center-intro dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.portal-guide-center-intro dl > div { min-width: 0; min-height: 106px; padding: 15px; border: 1px solid var(--portal-border); border-radius: 14px; background: rgba(13, 29, 40, .56); }
.portal-guide-center-intro dt { color: var(--portal-accent); font-size: clamp(25px, 2.6vw, 34px); font-weight: 850; letter-spacing: -.045em; }
.portal-guide-center-intro dd { margin: 7px 0 0; color: var(--portal-muted-strong); font-size: 11px; font-weight: 720; line-height: 1.45; }
.portal-guide-center-search { display: grid; gap: 12px; }
.portal-guide-center-search .portal-card-header { margin-bottom: 0; }
.portal-guide-center-search .portal-form-footer { margin-top: 0; }
.portal-guide-center-groups { display: grid; gap: 22px; min-width: 0; }
.portal-guide-center-group { display: grid; gap: 12px; min-width: 0; }
.portal-guide-center-group > header { display: grid; gap: 5px; max-width: 760px; }
.portal-guide-center-group > header h2 { margin: 0; color: var(--portal-text); font-size: clamp(19px, 2vw, 24px); letter-spacing: -.03em; }
.portal-guide-center-group > header p { margin: 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.6; }
.portal-guide-center-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.portal-guide-center-topic { display: flex; flex-direction: column; min-width: 0; min-height: 252px; }
.portal-guide-center-topic .portal-card-header { margin-bottom: 13px; }
.portal-guide-center-topic .portal-card-title,
.portal-guide-center-topic .portal-card-subtitle,
.portal-guide-center-topic li { overflow-wrap: anywhere; }
.portal-guide-center-steps { display: grid; gap: 8px; }
.portal-guide-center-steps h4 { margin: 0; color: var(--portal-text); font-size: 12px; letter-spacing: -.012em; }
.portal-guide-center-steps ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: guide-center-step; }
.portal-guide-center-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; min-width: 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.52; counter-increment: guide-center-step; }
.portal-guide-center-steps li::before { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid rgba(81, 213, 188, .24); border-radius: 7px; color: var(--portal-accent); background: rgba(50, 190, 174, .08); content: counter(guide-center-step); font-size: 9px; font-weight: 820; }
.portal-guide-center-topic .portal-form-footer { margin-top: auto; padding-top: 16px; }
.portal-guide-center-topic .portal-button { min-width: min(100%, 190px); }
.portal-guide-center-empty { border-style: dashed; }
.portal-guide-center-boundary { background: rgba(13, 29, 40, .56); }

@media (max-width: 980px) {
  .portal-guide-center-intro { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portal-guide-center-intro { gap: 16px; padding: 20px; border-radius: 18px; }
  .portal-guide-center-intro dl,
  .portal-guide-center-grid { grid-template-columns: 1fr; }
  .portal-guide-center-topic { min-height: 0; }
  .portal-guide-center-topic .portal-button { width: 100%; justify-content: center; }
}

/* Community Trust Center is a signed, read-only directory. Its compact
 * teal–sky cards distinguish verified navigation from guarded configuration
 * without turning the page into a marketing surface or action workflow. */
.portal-community-trust-center { display: grid; gap: 18px; min-width: 0; }
.portal-community-trust-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(210px, .78fr);
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--portal-border);
  border-radius: 22px;
  background: radial-gradient(circle at 90% 14%, rgba(78, 201, 230, .15), transparent 18rem), linear-gradient(145deg, rgba(13, 37, 51, .88), rgba(8, 22, 34, .76));
}
.portal-community-trust-intro h2 { max-width: 760px; margin: 7px 0 9px; color: var(--portal-text); font-size: clamp(26px, 3vw, 40px); letter-spacing: -.047em; }
.portal-community-trust-intro p { max-width: 760px; margin: 0; color: var(--portal-muted-strong); line-height: 1.7; }
.portal-community-trust-state { display: flex; gap: 9px; align-items: center; justify-content: flex-end; color: var(--portal-muted-strong); font-size: 12px; font-weight: 760; }
.portal-community-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.portal-community-trust-card { display: flex; flex-direction: column; min-width: 0; min-height: 218px; border-color: var(--portal-border); background: linear-gradient(160deg, rgba(14, 39, 53, .82), rgba(8, 24, 36, .74)); transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.portal-community-trust-card:hover { border-color: var(--portal-border-strong); transform: translateY(-2px); box-shadow: 0 13px 30px rgba(3, 13, 24, .18); }
.portal-community-trust-card[aria-disabled="true"] { border-style: dashed; background: rgba(13, 29, 40, .54); }
.portal-community-trust-card .portal-card-header { margin-bottom: 14px; }
.portal-community-trust-card .portal-card-title,
.portal-community-trust-card .portal-card-subtitle,
.portal-community-trust-safety li { overflow-wrap: anywhere; }
.portal-community-trust-card .portal-form-footer { margin-top: auto; padding-top: 15px; }
.portal-community-trust-card .portal-button { min-width: min(100%, 168px); }
.portal-community-trust-card:focus-visible,
.portal-community-trust-card .portal-button:focus-visible { outline: 3px solid rgba(81, 213, 188, .72); outline-offset: 3px; }
.portal-community-trust-safety { background: rgba(13, 38, 49, .62); }
.portal-community-trust-safety ul { display: grid; gap: 8px; margin: 16px 0 0; padding-left: 19px; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.58; }
.portal-community-trust-safety li::marker { color: var(--portal-accent); }
.portal-community-trust-boundary { background: rgba(13, 29, 40, .56); }

@media (max-width: 980px) {
  .portal-community-trust-intro { grid-template-columns: 1fr; }
  .portal-community-trust-state { justify-content: flex-start; }
  .portal-community-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-community-trust-intro { gap: 16px; padding: 20px; border-radius: 18px; }
  .portal-community-trust-grid { grid-template-columns: 1fr; }
  .portal-community-trust-card { min-height: 0; }
  .portal-community-trust-card .portal-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-community-trust-card { transition: none; }
  .portal-community-trust-card:hover { transform: none; }
}

/* Image Operations Hub is a denser app-first presentation of the existing
 * Image Studio authority. The scope intentionally overrides Image Studio's
 * earlier warm visual treatment without changing the compatible editor. */
.portal-image-hub,
.portal-image-hub-detail { display: grid; gap: 18px; min-width: 0; }
.portal-image-hub-overview,
.portal-image-hub-detail-board {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-lg);
  background:
    radial-gradient(circle at 90% 8%, rgba(81, 213, 188, .18), transparent 18rem),
    linear-gradient(145deg, rgba(20, 46, 54, .96), rgba(10, 18, 28, .99));
  box-shadow: var(--portal-shadow);
}
.portal-image-hub-overview h2,
.portal-image-hub-detail-board h2 { max-width: 760px; margin: 7px 0 9px; color: var(--portal-text); font-size: clamp(26px, 3vw, 40px); letter-spacing: -.047em; }
.portal-image-hub-overview p,
.portal-image-hub-detail-board p { max-width: 740px; margin: 0; color: var(--portal-muted-strong); line-height: 1.7; }
.portal-image-hub-overview dl,
.portal-image-hub-detail-board dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-image-hub-overview dl > div,
.portal-image-hub-detail-board dl > div { min-width: 0; min-height: 104px; padding: 15px; border: 1px solid rgba(130, 231, 215, .2); border-radius: 14px; background: rgba(5, 25, 34, .54); }
.portal-image-hub-overview dt,
.portal-image-hub-detail-board dt { color: var(--portal-accent); font-size: clamp(20px, 2.5vw, 31px); font-weight: 850; letter-spacing: -.045em; }
.portal-image-hub-overview dd,
.portal-image-hub-detail-board dd { margin: 7px 0 0; color: var(--portal-muted-strong); font-size: 11px; font-weight: 720; line-height: 1.45; }
.portal-image-hub-next-steps { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--portal-border); border-radius: var(--portal-radius); background: rgba(13, 29, 40, .74); }
.portal-image-hub-next-steps .portal-card-header { margin-bottom: 0; }
.portal-image-hub-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 10px; }
.portal-image-hub-step { display: grid; align-content: start; min-width: 0; min-height: 126px; gap: 8px; padding: 14px; border: 1px solid var(--portal-border); border-radius: 14px; background: rgba(9, 22, 32, .72); color: var(--portal-muted-strong); cursor: pointer; touch-action: manipulation; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.portal-image-hub-step:hover { border-color: var(--portal-border-strong); background: rgba(22, 66, 70, .54); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); transform: translateY(-1px); }
.portal-image-hub-step:focus-visible { border-color: var(--portal-accent); outline: 3px solid rgba(81, 213, 188, .28); outline-offset: 2px; }
.portal-image-hub-step strong { color: var(--portal-text); font-size: 13px; line-height: 1.4; }
.portal-image-hub-step span { color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.portal-image-hub-step b { margin-top: auto; color: var(--portal-accent); font-size: 12px; letter-spacing: .025em; }
.portal-image-hub .portal-image-studio-layout,
.portal-image-hub-detail .portal-image-studio-detail-grid,
.portal-image-hub-detail .portal-image-studio-history-grid { gap: 16px; }
.portal-image-hub .portal-image-studio-create,
.portal-image-hub-detail .portal-image-studio-editor,
.portal-image-hub-detail .portal-image-direction-create { border-color: rgba(105, 222, 204, .18); background: linear-gradient(145deg, rgba(18, 48, 55, .92), rgba(10, 19, 29, .99)); }
.portal-image-hub .portal-image-studio-boundary,
.portal-image-hub-detail .portal-image-studio-estimate,
.portal-image-hub-detail .portal-image-studio-activity { border-color: rgba(102, 190, 216, .18); background: linear-gradient(145deg, rgba(15, 41, 55, .9), rgba(10, 19, 29, .99)); }
.portal-image-hub .portal-image-studio-filter { border-color: rgba(102, 213, 195, .18); background: rgba(11, 35, 42, .62); }
.portal-image-hub .portal-image-artboard-card,
.portal-image-hub-detail .portal-image-direction-card { border-color: rgba(102, 213, 195, .16); background: rgba(12, 31, 42, .74); }
.portal-image-hub .portal-image-artboard-meta span,
.portal-image-hub-detail .portal-image-direction-meta span,
.portal-image-hub .portal-image-studio-tags span,
.portal-image-hub-detail .portal-image-studio-tags span { border-color: rgba(102, 213, 195, .22); background: rgba(81, 213, 188, .08); color: #c8fff5; }
.portal-image-hub .portal-image-reference-library,
.portal-image-hub-detail .portal-image-reference-library { border-color: rgba(102, 190, 216, .18); background: rgba(11, 28, 40, .78); }
.portal-image-hub .portal-image-studio-pagination,
.portal-image-hub .portal-image-reference-pagination,
.portal-image-hub-detail .portal-image-reference-pagination { border-color: rgba(102, 213, 195, .17); color: var(--portal-muted-strong); }

/* The compatible Image Studio editor intentionally keeps its warm creative
 * palette. Image Hub is a distinct app-first projection, so normalize every
 * reused detail/reference/review descendant to its slate and teal system. */
.portal-image-hub-detail .portal-image-studio-detail-summary {
  border-color: rgba(102, 213, 195, .24);
  background: radial-gradient(circle at 88% 11%, rgba(81, 213, 188, .16), transparent 18rem), linear-gradient(145deg, rgba(17, 47, 54, .97), rgba(8, 18, 29, .99));
}
.portal-image-hub-detail .portal-image-studio-detail-summary h2 { color: var(--portal-text); }
.portal-image-hub-detail .portal-image-studio-detail-summary p { color: var(--portal-muted-strong); }
.portal-image-hub-detail .portal-image-studio-detail-summary dl > div { border-color: rgba(130, 231, 215, .18); background: rgba(5, 25, 34, .54); }
.portal-image-hub-detail .portal-image-studio-detail-summary dt { color: var(--portal-muted); }
.portal-image-hub-detail .portal-image-studio-detail-summary dd { color: #d8fff7; }
.portal-image-hub .portal-image-reference-picker,
.portal-image-hub-detail .portal-image-reference-picker { border-color: rgba(102, 213, 195, .18); background: linear-gradient(145deg, rgba(11, 37, 45, .76), rgba(9, 19, 31, .82)); }
.portal-image-hub .portal-image-reference-picker h3,
.portal-image-hub .portal-image-reference-picker h4,
.portal-image-hub .portal-image-reference-picker legend,
.portal-image-hub .portal-image-reference-picker > strong,
.portal-image-hub-detail .portal-image-reference-picker h3,
.portal-image-hub-detail .portal-image-reference-picker h4,
.portal-image-hub-detail .portal-image-reference-picker legend,
.portal-image-hub-detail .portal-image-reference-picker > strong { color: #dcfff9; }
.portal-image-hub .portal-image-reference-picker p,
.portal-image-hub-detail .portal-image-reference-picker p { color: var(--portal-muted-strong); }
.portal-image-hub .portal-image-reference-list,
.portal-image-hub-detail .portal-image-reference-list { scrollbar-color: rgba(102, 213, 195, .42) transparent; }
.portal-image-hub .portal-image-reference-list::-webkit-scrollbar-thumb,
.portal-image-hub-detail .portal-image-reference-list::-webkit-scrollbar-thumb { background: rgba(102, 213, 195, .36); }
.portal-image-hub .portal-image-reference-list > :is(li, article, a, button),
.portal-image-hub-detail .portal-image-reference-list > :is(li, article, a, button) { border-color: rgba(102, 213, 195, .15); background: rgba(7, 28, 38, .56); }
.portal-image-hub .portal-image-reference-list > :is(a, button):hover,
.portal-image-hub-detail .portal-image-reference-list > :is(a, button):hover { border-color: rgba(130, 231, 215, .48); background: rgba(18, 67, 70, .58); }
.portal-image-hub .portal-image-reference-list > :is(a, button):focus-visible,
.portal-image-hub-detail .portal-image-reference-list > :is(a, button):focus-visible { outline-color: var(--portal-accent); }
.portal-image-hub .portal-image-reference-list strong,
.portal-image-hub-detail .portal-image-reference-list strong { color: #d9fff8; }
.portal-image-hub .portal-image-reference-list b,
.portal-image-hub .portal-image-reference-list em,
.portal-image-hub-detail .portal-image-reference-list b,
.portal-image-hub-detail .portal-image-reference-list em { color: var(--portal-accent); }
.portal-image-hub .portal-image-reference-list small,
.portal-image-hub-detail .portal-image-reference-list small { color: var(--portal-muted); }
.portal-image-hub .portal-image-studio-guard-list span,
.portal-image-hub-detail .portal-image-studio-guard-list span { border-color: rgba(102, 213, 195, .16); background: rgba(8, 34, 43, .48); }
.portal-image-hub .portal-image-studio-guard-list strong,
.portal-image-hub-detail .portal-image-studio-guard-list strong { color: #d5faf3; }
.portal-image-hub .portal-image-studio-guard-list em,
.portal-image-hub-detail .portal-image-studio-guard-list em { border-color: rgba(130, 231, 215, .22); background: rgba(81, 213, 188, .1); color: #b8fbef; }
.portal-image-hub .portal-image-artboard-card:hover,
.portal-image-hub-detail .portal-image-direction-card:hover { border-color: rgba(130, 231, 215, .5); background: rgba(16, 53, 61, .88); }
.portal-image-hub-detail .portal-image-studio-estimate-grid span { border-color: rgba(102, 213, 195, .16); background: rgba(8, 34, 43, .48); color: var(--portal-muted-strong); }
.portal-image-hub-detail .portal-image-studio-estimate-grid strong { color: #dcfff9; }
.portal-image-hub-detail .portal-image-direction-form,
.portal-image-hub-detail .portal-image-direction-history { border-color: rgba(102, 213, 195, .15); }
.portal-image-hub-detail .portal-image-direction-history > strong,
.portal-image-hub-detail .portal-image-version-list strong,
.portal-image-hub-detail .portal-image-studio-events strong { color: #dcfff9; }
.portal-image-hub-detail .portal-image-direction-history > div,
.portal-image-hub-detail .portal-image-version-list > article,
.portal-image-hub-detail .portal-image-studio-events > div { border-color: rgba(102, 213, 195, .12); }
.portal-image-hub-detail .portal-image-direction-history > div,
.portal-image-hub-detail .portal-image-version-list p,
.portal-image-hub-detail .portal-image-studio-events small { color: var(--portal-muted-strong); }
.portal-image-hub-detail .portal-image-direction-history em { color: var(--portal-accent); }
.portal-image-hub-detail .portal-image-studio-events > div > span:first-child { background: var(--portal-accent); box-shadow: 0 0 0 4px rgba(81, 213, 188, .11); color: transparent; }
.portal-image-hub-detail .portal-image-version-list small { color: var(--portal-muted); }

@media (max-width: 700px) {
  .portal-image-hub-overview,
  .portal-image-hub-detail-board { grid-template-columns: 1fr; gap: 16px; padding: 20px; border-radius: 18px; }
  .portal-image-hub-overview dl,
  .portal-image-hub-detail-board dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-image-hub-overview dl > div,
  .portal-image-hub-detail-board dl > div { min-height: 80px; padding: 11px; }
  .portal-image-hub-overview dt,
  .portal-image-hub-detail-board dt { font-size: clamp(18px, 7vw, 24px); }
  .portal-image-hub-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .portal-image-hub-next-steps { gap: 12px; padding: 14px; }
  .portal-image-hub-step { min-height: 112px; padding: 12px; }
  .portal-image-hub .portal-button,
  .portal-image-hub-detail .portal-button,
  .portal-image-hub .portal-input,
  .portal-image-hub-detail .portal-input,
  .portal-image-hub .portal-select,
  .portal-image-hub-detail .portal-select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-image-hub-step { transition: none; }
  .portal-image-hub-step:hover { transform: none; }
}

/* Document Operations Board remains the canonical /documents route.  Scope
 * these slate/teal refinements to the board so individual document workflows
 * retain their established input, confirmation and delivery contracts. */
.portal-document-hub { display: grid; gap: 18px; min-width: 0; }
.portal-document-hub .portal-document-operation-intro {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  border-color: var(--portal-border-strong) !important;
  background: var(--portal-surface-strong) !important;
  box-shadow: none !important;
}
.portal-document-hub .portal-document-operation-intro h2 { color: var(--portal-text); }
.portal-document-hub .portal-document-operation-intro p,
.portal-document-hub .portal-document-operation-intro dd { color: var(--portal-muted-strong); }
.portal-document-hub .portal-document-operation-intro dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-document-hub .portal-document-operation-intro dl > div {
  min-height: 104px;
  border-color: var(--portal-border);
  background: var(--portal-surface);
}
.portal-document-hub .portal-document-operation-intro dt { color: var(--portal-accent); }
.portal-document-hub .portal-document-operation-intro dd { font-size: 12px; }

.portal-document-board-actions,
.portal-document-board-workflow-group {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 2.1vw, 26px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface);
}
.portal-document-board-actions .portal-card-header,
.portal-document-board-workflows > .portal-card-header { margin-bottom: 0; }
.portal-document-board-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portal-document-board-action {
  display: grid;
  min-width: 0;
  min-height: 128px;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface-strong);
  color: var(--portal-muted-strong);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.portal-document-board-action--primary { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); }
.portal-document-board-action:hover { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); transform: translateY(-1px); }
.portal-document-board-action:focus-visible {
  outline: 3px solid rgba(81, 213, 188, .28);
  outline-offset: 2px;
}
.portal-document-board-action strong { color: var(--portal-text); font-size: 14px; line-height: 1.4; }
.portal-document-board-action span { color: var(--portal-muted-strong); font-size: 13px; line-height: 1.55; }
.portal-document-board-action b { margin-top: auto; color: var(--portal-accent); font-size: 14px; }

.portal-document-board-history { min-width: 0; }
.portal-document-hub .portal-document-operation-card {
  border-color: var(--portal-border);
  background: var(--portal-surface);
}
.portal-document-hub .portal-document-operation-icon {
  border-color: var(--portal-border-strong);
  background: var(--portal-surface-soft);
  color: var(--portal-accent);
}
.portal-document-hub .portal-document-operation-meta dt { color: var(--portal-muted); }
.portal-document-hub .portal-document-operation-meta dd { color: var(--portal-muted-strong); }

.portal-document-board-workflows { display: grid; gap: 14px; }
.portal-document-board-workflow-groups { display: grid; gap: 14px; }
.portal-document-board-workflow-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.portal-document-board-workflow-heading h2 { margin: 0; color: var(--portal-text); font-size: 16px; letter-spacing: -.018em; }
.portal-document-board-workflow-heading p { max-width: 640px; margin: 5px 0 0; color: var(--portal-muted); font-size: 13px; line-height: 1.55; }
.portal-document-board-workflow-heading > span {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  color: var(--portal-muted-strong);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
}
.portal-document-hub .portal-module-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.portal-document-hub .portal-module-card {
  display: grid;
  min-width: 0;
  min-height: 184px;
  padding: 16px;
  border-color: var(--portal-border);
  background: var(--portal-surface);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.portal-document-hub .portal-module-copy { display: grid; min-width: 0; align-content: start; gap: 8px; }
.portal-document-hub .portal-module-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.portal-document-hub .portal-module-heading h3 { min-width: 0; margin: 0; color: var(--portal-text); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.portal-document-hub .portal-module-card p { margin: 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.55; }
.portal-document-hub .portal-module-link { margin-top: auto; color: var(--portal-accent); font-size: 12px; font-weight: 760; }
.portal-document-hub .portal-module-card[data-document-tool-state="guarded"] { border-style: dashed; }
.portal-document-hub .portal-module-card:hover { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); transform: translateY(-1px); }
.portal-document-hub .portal-module-card:focus-visible {
  border-color: var(--portal-border-strong);
  outline: 3px solid rgba(81, 213, 188, .28);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .portal-document-hub .portal-document-operation-intro { grid-template-columns: 1fr; gap: 16px; padding: 20px; border-radius: 18px; }
  .portal-document-hub .portal-document-operation-intro dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-document-hub .portal-document-operation-intro dl > div { min-height: 86px; padding: 11px; }
  .portal-document-board-actions,
  .portal-document-board-workflow-group { padding: 16px; border-radius: 16px; }
  .portal-document-board-action-grid { grid-template-columns: 1fr; }
  .portal-document-board-action { min-height: 112px; padding: 14px; }
  .portal-document-board-workflow-heading { align-items: flex-start; flex-direction: column; }
  .portal-document-hub .portal-module-grid { grid-template-columns: 1fr; }
  .portal-document-hub .portal-module-card { min-height: 0; padding: 15px; }
  .portal-document-hub .portal-button,
  .portal-document-hub .portal-input,
  .portal-document-hub .portal-select { min-height: 44px; }
}

@media (max-width: 520px) {
  .portal-document-hub .portal-document-operation-intro dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-document-board-action,
  .portal-document-hub .portal-module-card { transition: none; }
  .portal-document-board-action:hover,
  .portal-document-hub .portal-module-card:hover { transform: none; }
}

/* Content Operations Board keeps the canonical /content-studio data model but
 * gives the root route a compact, app-first operating view.  The create route
 * stays deliberately separate so a customer does not have to scan a large
 * authoring form before seeing current work and its safe next steps. */
.portal-content-operations-board,
.portal-content-studio-authoring { display: grid; gap: 18px; min-width: 0; }
.portal-content-operations-summary,
.portal-content-operations-authoring-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 2.7vw, 30px);
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-content-operations-summary h2,
.portal-content-operations-authoring-intro h2 {
  max-width: 760px;
  margin: 7px 0 8px;
  color: var(--portal-text);
  font-size: clamp(25px, 3vw, 38px);
  letter-spacing: -.045em;
  line-height: 1.08;
}
.portal-content-operations-summary p,
.portal-content-operations-authoring-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--portal-muted-strong);
  font-size: 14px;
  line-height: 1.65;
}
.portal-content-operations-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.portal-content-operations-summary dl > div {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface);
}
.portal-content-operations-summary dt {
  color: var(--portal-accent);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 820;
  letter-spacing: -.045em;
}
.portal-content-operations-summary dd {
  margin: 7px 0 0;
  color: var(--portal-muted-strong);
  font-size: 12px;
  line-height: 1.45;
}
.portal-content-operations-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface);
}
.portal-content-operations-primary > div { min-width: 0; }
.portal-content-operations-primary h2 { margin: 6px 0; color: var(--portal-text); font-size: 18px; letter-spacing: -.02em; }
.portal-content-operations-primary p { max-width: 700px; margin: 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.55; }
.portal-content-operations-primary .portal-button { flex: 0 0 auto; min-height: 40px; }
.portal-content-operations-create-guard {
  display: grid;
  flex: 0 0 min(290px, 100%);
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  background: var(--portal-surface-strong);
}
.portal-content-operations-create-guard strong { color: var(--portal-text); font-size: 13px; }
.portal-content-operations-create-guard span { color: var(--portal-muted-strong); font-size: 12px; line-height: 1.45; }

.portal-content-operations-kinds {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface);
}
.portal-content-operations-kinds .portal-card-header { margin-bottom: 0; }
.portal-content-operations-kind-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.portal-content-operations-kind-card {
  display: grid;
  min-width: 0;
  min-height: 148px;
  align-content: start;
  gap: 9px;
  padding: 15px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface-strong);
  color: var(--portal-muted-strong);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.portal-content-operations-kind-card > span {
  color: var(--portal-accent);
  font: 760 11px/1 var(--portal-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  letter-spacing: .06em;
}
.portal-content-operations-kind-card strong { min-width: 0; color: var(--portal-text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.portal-content-operations-kind-card small { margin-top: auto; color: var(--portal-muted); font-size: 12px; line-height: 1.4; }
.portal-content-operations-kind-card:hover { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); transform: translateY(-1px); }
.portal-content-operations-kind-card--guarded { cursor: default; }
.portal-content-operations-kind-card--guarded:hover { border-color: var(--portal-border); background: var(--portal-surface-strong); transform: none; }
.portal-content-operations-kind-card:focus-visible {
  outline: 3px solid rgba(81, 213, 188, .28);
  outline-offset: 2px;
}

.portal-content-operations-workspace,
.portal-content-operations-boundary-grid,
.portal-content-operations-authoring-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
}
.portal-content-operations-briefs,
.portal-content-operations-activity-card,
.portal-content-operations-boundary,
.portal-content-operations-board .portal-content-studio-policy,
.portal-content-studio-authoring .portal-content-studio-policy,
.portal-content-studio-authoring .portal-content-studio-create {
  border-color: var(--portal-border);
  background: var(--portal-surface);
}
.portal-content-operations-briefs .portal-card-header,
.portal-content-operations-activity-card .portal-card-header { align-items: flex-start; }
.portal-content-operations-briefs .portal-content-studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-content-operations-board .portal-content-studio-card {
  min-height: 218px;
  border-color: var(--portal-border);
  background: var(--portal-surface-strong);
}
.portal-content-operations-board .portal-content-studio-card:hover { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); }
.portal-content-operations-board .portal-content-studio-card .portal-card-title { color: var(--portal-text); }
.portal-content-operations-board .portal-content-studio-card .portal-card-subtitle,
.portal-content-operations-board .portal-content-studio-card .portal-form-note { color: var(--portal-muted-strong); }
.portal-content-operations-activity-card { min-width: 0; }
.portal-content-operations-activity {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.portal-content-operations-activity li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  padding: 12px 0;
  border-top: 1px solid var(--portal-border);
}
.portal-content-operations-activity li:first-child { border-top: 0; }
.portal-content-operations-activity li > span {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--portal-accent);
  box-shadow: 0 0 0 4px rgba(81, 213, 188, .11);
}
.portal-content-operations-activity strong,
.portal-content-operations-activity small { display: block; overflow-wrap: anywhere; }
.portal-content-operations-activity strong { color: var(--portal-text); font-size: 13px; line-height: 1.45; }
.portal-content-operations-activity small { margin-top: 3px; color: var(--portal-muted); font-size: 11px; line-height: 1.45; }
.portal-content-operations-board .portal-content-studio-filter {
  border-color: var(--portal-border);
  background: var(--portal-surface-strong);
}
.portal-content-operations-board .portal-content-studio-pagination { border-color: var(--portal-border); color: var(--portal-muted-strong); }
.portal-content-operations-boundary-grid .portal-content-studio-policy { min-width: 0; }
.portal-content-operations-boundary-grid .portal-content-studio-policy .portal-card-title,
.portal-content-studio-authoring .portal-content-studio-policy .portal-card-title { color: var(--portal-text); }
.portal-content-operations-boundary-grid .portal-content-studio-policy .portal-card-subtitle,
.portal-content-studio-authoring .portal-content-studio-policy .portal-card-subtitle { color: var(--portal-muted-strong); }

.portal-content-operations-authoring-actions { display: grid; gap: 12px; justify-items: start; }
.portal-content-operations-authoring-actions > span { color: var(--portal-muted-strong); font-size: 12px; line-height: 1.5; }
.portal-content-studio-authoring .portal-content-studio-create .portal-card-title,
.portal-content-studio-authoring .portal-content-studio-create .portal-card-subtitle { color: var(--portal-text); }
.portal-content-studio-authoring .portal-content-studio-create .portal-card-subtitle,
.portal-content-studio-authoring .portal-content-studio-create .portal-form-note { color: var(--portal-muted-strong); }

@media (max-width: 1040px) {
  .portal-content-operations-kind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-content-operations-workspace,
  .portal-content-operations-boundary-grid,
  .portal-content-operations-authoring-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portal-content-operations-summary,
  .portal-content-operations-authoring-intro { grid-template-columns: 1fr; gap: 16px; padding: 20px; border-radius: 18px; }
  .portal-content-operations-summary dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-content-operations-summary dl > div { min-height: 86px; padding: 11px; }
  .portal-content-operations-primary { align-items: flex-start; flex-direction: column; padding: 16px; border-radius: 16px; }
  .portal-content-operations-primary .portal-button { width: 100%; min-height: 44px; }
  .portal-content-operations-create-guard { width: 100%; box-sizing: border-box; }
  .portal-content-operations-kinds { padding: 16px; border-radius: 16px; }
  .portal-content-operations-kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .portal-content-operations-kind-card { min-height: 126px; padding: 13px; }
  .portal-content-operations-briefs .portal-content-studio-grid { grid-template-columns: 1fr; }
  .portal-content-operations-board .portal-button,
  .portal-content-operations-board .portal-input,
  .portal-content-operations-board .portal-select,
  .portal-content-studio-authoring .portal-button,
  .portal-content-studio-authoring .portal-input,
  .portal-content-studio-authoring .portal-select { min-height: 44px; }
}

@media (max-width: 460px) {
  .portal-content-operations-summary dl { grid-template-columns: 1fr; }
  .portal-content-operations-kind-grid { grid-template-columns: 1fr; }
  .portal-content-operations-kind-card { min-height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-content-operations-kind-card { transition: none; }
  .portal-content-operations-kind-card:hover { transform: none; }
  .portal-content-operations-board .portal-content-studio-card { transition: none; }
  .portal-content-operations-board .portal-content-studio-card:hover { transform: none; }
}

/* Project Operations Board is the canonical /projects view. The root stays
 * dense and operational; focused authoring moves to /projects/new so the
 * library and its truthful state never compete with a large create form. */
.portal-project-operations-board,
.portal-project-center-authoring { display: grid; gap: 18px; min-width: 0; }
.portal-project-operations-summary,
.portal-project-operations-authoring-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 2.7vw, 30px);
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-project-operations-summary h2,
.portal-project-operations-authoring-intro h2 {
  max-width: 760px;
  margin: 7px 0 8px;
  color: var(--portal-text);
  font-size: clamp(25px, 3vw, 38px);
  letter-spacing: -.045em;
  line-height: 1.08;
}
.portal-project-operations-summary p,
.portal-project-operations-authoring-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--portal-muted-strong);
  font-size: 14px;
  line-height: 1.65;
}
.portal-project-operations-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.portal-project-operations-summary dl > div {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface);
}
.portal-project-operations-summary dt {
  color: var(--portal-accent);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 820;
  letter-spacing: -.045em;
}
.portal-project-operations-summary dd {
  margin: 7px 0 0;
  color: var(--portal-muted-strong);
  font-size: 12px;
  line-height: 1.45;
}
.portal-project-operations-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface);
}
.portal-project-operations-primary > div { min-width: 0; }
.portal-project-operations-primary h2 { margin: 6px 0; color: var(--portal-text); font-size: 18px; letter-spacing: -.02em; }
.portal-project-operations-primary p { max-width: 700px; margin: 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.55; }
.portal-project-operations-primary .portal-button { flex: 0 0 auto; min-height: 40px; }
.portal-project-operations-create-guard {
  display: grid;
  flex: 0 0 min(290px, 100%);
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  background: var(--portal-surface-strong);
}
.portal-project-operations-create-guard strong { color: var(--portal-text); font-size: 13px; }
.portal-project-operations-create-guard span { color: var(--portal-muted-strong); font-size: 12px; line-height: 1.45; }

.portal-project-operations-workspace,
.portal-project-operations-authoring-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
}
.portal-project-operations-library,
.portal-project-operations-boundary,
.portal-project-center-authoring .portal-project-operations-create {
  border-color: var(--portal-border);
  background: var(--portal-surface);
}
.portal-project-operations-library .portal-card-header,
.portal-project-operations-boundary .portal-card-header { align-items: flex-start; }
.portal-project-operations-board .portal-project-filter {
  border-color: var(--portal-border);
  background: var(--portal-surface-strong);
}
.portal-project-operations-board .portal-project-card {
  min-height: 218px;
  border-color: var(--portal-border);
  background: var(--portal-surface-strong);
}
.portal-project-operations-board .portal-project-card:hover {
  border-color: var(--portal-border-strong);
  background: var(--portal-surface-soft);
}
.portal-project-operations-board .portal-project-card .portal-card-title,
.portal-project-center-authoring .portal-card-title { color: var(--portal-text); }
.portal-project-operations-board .portal-project-card .portal-card-subtitle,
.portal-project-operations-board .portal-project-card .portal-summary-key,
.portal-project-operations-board .portal-project-card .portal-summary-value,
.portal-project-operations-board .portal-project-pagination,
.portal-project-center-authoring .portal-card-subtitle,
.portal-project-center-authoring .portal-form-note { color: var(--portal-muted-strong); }
.portal-project-operations-authoring-actions { display: grid; gap: 12px; justify-items: start; }
.portal-project-operations-authoring-actions > span { color: var(--portal-muted-strong); font-size: 12px; line-height: 1.5; }

@media (max-width: 1040px) {
  .portal-project-operations-workspace,
  .portal-project-operations-authoring-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portal-project-operations-summary,
  .portal-project-operations-authoring-intro { grid-template-columns: 1fr; gap: 16px; padding: 20px; border-radius: 18px; }
  .portal-project-operations-summary dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-project-operations-summary dl > div { min-height: 86px; padding: 11px; }
  .portal-project-operations-primary { align-items: flex-start; flex-direction: column; padding: 16px; border-radius: 16px; }
  .portal-project-operations-primary .portal-button { width: 100%; min-height: 44px; }
  .portal-project-operations-create-guard { width: 100%; box-sizing: border-box; }
  .portal-project-operations-board .portal-button,
  .portal-project-operations-board .portal-input,
  .portal-project-operations-board .portal-select,
  .portal-project-center-authoring .portal-button,
  .portal-project-center-authoring .portal-input,
  .portal-project-center-authoring .portal-select { min-height: 44px; }
}

@media (max-width: 460px) {
  .portal-project-operations-summary dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-project-operations-board .portal-project-card { transition: none; }
  .portal-project-operations-board .portal-project-card:hover { transform: none; }
}

/* Campaign Operations Board — app-first planning surface. Keep this scoped
   layer flat and token-driven so the canonical Calendar/detail styles remain
   unchanged while the root reads as an operational workspace, not a landing
   section. */
.portal-campaign-operations-board,
.portal-campaign-operations-authoring { display: grid; gap: 18px; }
.portal-campaign-operations-summary,
.portal-campaign-operations-authoring-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .8fr);
  gap: 24px;
  align-items: end;
  padding: 25px;
  border: 1px solid var(--portal-border);
  border-radius: 22px;
  background: var(--portal-surface);
}
.portal-campaign-operations-summary h2,
.portal-campaign-operations-authoring-intro h2 { max-width: 790px; margin: 7px 0 9px; color: var(--portal-text); font-size: clamp(25px, 3vw, 39px); line-height: 1.06; letter-spacing: -.035em; }
.portal-campaign-operations-summary p,
.portal-campaign-operations-authoring-intro p { max-width: 780px; margin: 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.62; }
.portal-campaign-operations-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.portal-campaign-operations-summary dl > div { display: grid; gap: 4px; min-width: 0; min-height: 105px; padding: 14px; border: 1px solid var(--portal-border); border-radius: 14px; background: var(--portal-surface-strong); }
.portal-campaign-operations-summary dt { color: var(--portal-accent); font-size: 25px; font-weight: 820; letter-spacing: -.04em; }
.portal-campaign-operations-summary dd { margin: 0; color: var(--portal-muted-strong); font-size: 11px; line-height: 1.45; }
.portal-campaign-operations-primary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 19px 21px; border: 1px solid var(--portal-border); border-radius: 18px; background: var(--portal-surface-strong); }
.portal-campaign-operations-primary h2 { margin: 4px 0 5px; color: var(--portal-text); font-size: 18px; letter-spacing: -.018em; }
.portal-campaign-operations-primary p { max-width: 760px; margin: 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.52; }
.portal-campaign-operations-primary > .portal-button { flex: 0 0 auto; min-height: 42px; }
.portal-campaign-operations-create-guard { display: grid; gap: 4px; max-width: 320px; padding: 12px 14px; border: 1px solid var(--portal-border); border-radius: 12px; background: var(--portal-surface-soft); }
.portal-campaign-operations-create-guard strong { color: var(--portal-text); font-size: 12px; }
.portal-campaign-operations-create-guard span { color: var(--portal-muted-strong); font-size: 11px; line-height: 1.45; }
.portal-campaign-operations-workspace,
.portal-campaign-operations-authoring-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 16px; align-items: start; }
.portal-campaign-operations-library,
.portal-campaign-operations-boundary,
.portal-campaign-operations-authoring .portal-campaign-operations-create { border-color: var(--portal-border); background: var(--portal-surface); }
.portal-campaign-operations-library .portal-card-header,
.portal-campaign-operations-boundary .portal-card-header { align-items: flex-start; }
.portal-campaign-operations-quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.portal-campaign-operations-quick-links a { display: grid; gap: 4px; min-width: 0; min-height: 76px; padding: 13px; border: 1px solid var(--portal-border); border-radius: 13px; background: var(--portal-surface-strong); color: inherit; text-decoration: none; transition: border-color 180ms ease, background 180ms ease; }
.portal-campaign-operations-quick-links a:hover,
.portal-campaign-operations-quick-links a:focus-visible { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); }
.portal-campaign-operations-quick-links strong { color: var(--portal-text); font-size: 13px; }
.portal-campaign-operations-quick-links span { color: var(--portal-muted-strong); font-size: 11px; line-height: 1.42; }
.portal-campaign-operations-board .portal-campaign-board { margin: 0; }
.portal-campaign-operations-board .portal-campaign-card { min-height: 222px; border-color: var(--portal-border); background: var(--portal-surface-strong); box-shadow: none; }
.portal-campaign-operations-board .portal-campaign-card h3 { color: var(--portal-text); }
.portal-campaign-operations-board .portal-campaign-card .portal-campaign-facts dd,
.portal-campaign-operations-board .portal-campaign-card .portal-campaign-facts dt { color: var(--portal-muted-strong); }
.portal-campaign-operations-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.portal-campaign-operations-steps li { display: grid; gap: 3px; padding: 0 0 12px; border-bottom: 1px solid var(--portal-border); }
.portal-campaign-operations-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.portal-campaign-operations-steps strong { color: var(--portal-text); font-size: 12px; }
.portal-campaign-operations-steps span { color: var(--portal-muted-strong); font-size: 11px; line-height: 1.5; }
.portal-campaign-operations-authoring-actions { display: grid; gap: 12px; justify-items: start; }
.portal-campaign-operations-authoring-actions > span { color: var(--portal-muted-strong); font-size: 12px; line-height: 1.5; }

@media (max-width: 1040px) {
  .portal-campaign-operations-workspace,
  .portal-campaign-operations-authoring-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portal-campaign-operations-summary,
  .portal-campaign-operations-authoring-intro { grid-template-columns: 1fr; gap: 16px; padding: 20px; border-radius: 18px; }
  .portal-campaign-operations-summary dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portal-campaign-operations-summary dl > div { min-height: 86px; padding: 11px; }
  .portal-campaign-operations-primary { align-items: flex-start; flex-direction: column; padding: 16px; border-radius: 16px; }
  .portal-campaign-operations-primary .portal-button { width: 100%; min-height: 44px; }
  .portal-campaign-operations-create-guard { width: 100%; box-sizing: border-box; }
  .portal-campaign-operations-quick-links { grid-template-columns: 1fr; }
  .portal-campaign-operations-board .portal-button,
  .portal-campaign-operations-board .portal-input,
  .portal-campaign-operations-board .portal-select,
  .portal-campaign-operations-authoring .portal-button,
  .portal-campaign-operations-authoring .portal-input,
  .portal-campaign-operations-authoring .portal-select { min-height: 44px; }
}

@media (max-width: 460px) {
  .portal-campaign-operations-summary dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-campaign-operations-quick-links a { transition: none; }
}

/* Workspace Command Center keeps `/dashboard` app-first and explicit about
   authority. The final scoped layer intentionally replaces the legacy hero
   treatment with token-driven surfaces, not a marketing/landing composition. */
.portal-workspace-command-center { display: grid; gap: 18px; min-width: 0; }
.portal-workspace-command-center .portal-dashboard-overview {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  border-color: var(--portal-border);
  background: var(--portal-surface-strong);
  box-shadow: none;
}
.portal-workspace-command-center .portal-dashboard-overview h1 { color: var(--portal-text); font-size: clamp(30px, 3.4vw, 44px); }
.portal-workspace-command-center .portal-dashboard-overview p { color: var(--portal-muted-strong); }
.portal-workspace-command-center .portal-dashboard-overview-actions { align-items: center; gap: 8px; }
.portal-workspace-command-center .portal-dashboard-overview-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.portal-workspace-command-center .portal-dashboard-overview-stats > div {
  border-color: var(--portal-border);
  background: var(--portal-surface);
}
.portal-workspace-command-center .portal-dashboard-overview-stats dt,
.portal-workspace-command-center .portal-dashboard-overview-stats span { color: var(--portal-muted); }
.portal-workspace-command-center .portal-dashboard-overview-stats dd { color: var(--portal-text); }

.portal-command-center-lanes {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(260px, .66fr);
  gap: 16px;
  align-items: start;
}
.portal-command-center-lane,
.portal-command-center-canonical {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface);
}
.portal-command-center-lane--account { background: var(--portal-surface-strong); }
.portal-command-center-lane-heading,
.portal-command-center-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.portal-command-center-lane-heading .portal-module-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--portal-border-strong);
  border-radius: 12px;
  background: var(--portal-surface-soft);
  color: var(--portal-accent);
}
.portal-command-center-lane-heading h2,
.portal-command-center-state h2 {
  margin: 4px 0 5px;
  color: var(--portal-text);
  font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: -.03em;
}
.portal-command-center-lane-heading p,
.portal-command-center-state p,
.portal-command-center-lane-note {
  max-width: 760px;
  margin: 0;
  color: var(--portal-muted-strong);
  font-size: 13px;
  line-height: 1.6;
}
.portal-command-center-lane--work .portal-dashboard-library-grid { gap: 14px; }
.portal-command-center-lane--work .portal-dashboard-drafts { border-color: var(--portal-border); background: var(--portal-surface-strong); }
.portal-command-center-lane--work .portal-dashboard-draft { border-color: var(--portal-border); background: var(--portal-surface); }
.portal-command-center-lane--work .portal-dashboard-draft:hover,
.portal-command-center-lane--work .portal-dashboard-draft:focus-visible { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); }

.portal-command-center-account-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.portal-command-center-account-facts > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  background: var(--portal-surface);
}
.portal-command-center-account-facts dt { color: var(--portal-muted); font-size: 11px; font-weight: 740; }
.portal-command-center-account-facts dd { margin: 6px 0 0; color: var(--portal-text); font-size: 13px; font-weight: 740; overflow-wrap: anywhere; }
.portal-command-center-lane-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.portal-command-center-lane-actions .portal-button { min-height: 40px; }

.portal-command-center-canonical { gap: 18px; }
.portal-command-center-canonical[data-state="ready"] { border-color: var(--portal-border-strong); }
.portal-command-center-canonical[data-state="loading"],
.portal-command-center-canonical[data-state="failed"],
.portal-command-center-canonical[data-state="guarded"] { background: var(--portal-surface-strong); }
.portal-command-center-state { grid-template-columns: auto minmax(0, 1fr) auto; }
.portal-command-center-state .portal-state-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--portal-border-strong);
  border-radius: 12px;
  background: var(--portal-surface-soft);
  color: var(--portal-accent);
}
.portal-command-center-state > div { min-width: 0; }
.portal-command-center-state .portal-command-center-lane-actions { margin-top: 14px; }
.portal-command-center-metrics { margin: 0; }
.portal-command-center-canonical .portal-work-grid { margin: 0; }
.portal-command-center-canonical .portal-card { border-color: var(--portal-border); background: var(--portal-surface-strong); }
.portal-command-center-canonical .portal-data-table-wrap { border-color: var(--portal-border); }

@media (max-width: 1040px) {
  .portal-command-center-lanes { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .portal-workspace-command-center .portal-dashboard-overview,
  .portal-command-center-lane,
  .portal-command-center-canonical { padding: 18px; border-radius: 18px; }
  .portal-command-center-lane-heading,
  .portal-command-center-state { grid-template-columns: auto minmax(0, 1fr); }
  .portal-command-center-lane-heading > .portal-badge,
  .portal-command-center-state > .portal-badge { grid-column: 2; justify-self: start; }
  .portal-command-center-lane--work .portal-dashboard-library-grid,
  .portal-command-center-account-facts { grid-template-columns: 1fr; }
  .portal-command-center-lane-actions { width: 100%; }
  .portal-command-center-lane-actions .portal-button { flex: 1 1 150px; min-height: 44px; justify-content: center; }
  .portal-workspace-command-center .portal-dashboard-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-workspace-command-center .portal-dashboard-overview-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .portal-workspace-command-center .portal-dashboard-overview-actions .portal-button { width: 100%; min-height: 44px; justify-content: center; }
  .portal-workspace-command-center .portal-dashboard-overview-actions .portal-button--primary { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .portal-workspace-command-center .portal-dashboard-overview-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-command-center-lane--work .portal-dashboard-draft { transition: none; }
  .portal-command-center-lane--work .portal-dashboard-draft:hover { transform: none; }
}

/* Secure Access & First-Run Journey. This scoped final layer keeps account
   entry in the signed application system: compact, flat and progressive,
   rather than a public landing or a wall of provider copy. */
.portal-auth-page--access { gap: clamp(30px, 5.5vw, 72px); }
.portal-auth-page--access .portal-auth-intro { display: grid; gap: 16px; align-content: start; }
.portal-auth-page--access .portal-auth-intro .portal-description { margin-bottom: 0; color: var(--portal-muted-strong); }
.portal-auth-page--access .portal-auth-switch { margin: 0; }
.portal-auth-page--access .portal-auth-card { display: grid; gap: 16px; border-color: var(--portal-border-strong); background: var(--portal-surface); box-shadow: none; }
.portal-auth-page--access .portal-auth-card > .portal-card-header { margin: 0; }
.portal-auth-page--access .portal-auth-card > .portal-card-header .portal-section-kicker { margin-bottom: 5px; }
.portal-auth-primary { display: grid; gap: 12px; }
.portal-auth-primary .portal-form { margin: 0; }
.portal-auth-journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-auth-journey li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius-sm);
  background: var(--portal-surface);
}
.portal-auth-journey li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--portal-border);
  border-radius: 50%;
  color: var(--portal-muted);
  font-size: 11px;
  font-weight: 820;
}
.portal-auth-journey li[data-state="current"] { border-color: var(--portal-border-strong); background: var(--portal-surface-strong); }
.portal-auth-journey li[data-state="current"] > span { border-color: var(--portal-accent); color: var(--portal-accent); }
.portal-auth-journey strong { display: block; color: var(--portal-text); font-size: 12px; line-height: 1.4; }
.portal-auth-journey small { display: block; margin-top: 3px; color: var(--portal-muted); font-size: 11px; line-height: 1.45; }
.portal-auth-alternatives {
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-strong);
}
.portal-auth-alternatives summary {
  display: flex;
  min-height: 44px;
  gap: 12px;
  align-items: center;
  padding: 10px 13px;
  color: var(--portal-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 780;
  list-style: none;
}
.portal-auth-alternatives summary::-webkit-details-marker { display: none; }
.portal-auth-alternatives summary::after { content: "+"; margin-left: auto; color: var(--portal-accent); font-size: 17px; font-weight: 500; }
.portal-auth-alternatives[open] { border-color: var(--portal-border-strong); }
.portal-auth-alternatives[open] summary::after { content: "−"; }
.portal-auth-alternatives summary small { margin-left: auto; color: var(--portal-muted); font-size: 11px; font-weight: 650; }
.portal-auth-alternatives summary:focus-visible { outline: 3px solid rgba(81, 213, 188, .2); outline-offset: 2px; }
.portal-auth-alternatives-body { display: grid; gap: 12px; padding: 0 13px 13px; }
.portal-auth-alternatives-body .portal-auth-provider { margin: 0; padding: 0; border: 0; }
.portal-auth-alternatives-body .portal-auth-provider-option { background: var(--portal-surface); }
.portal-auth-page--access .portal-auth-card .portal-button,
.portal-auth-page--access .portal-auth-alternatives .portal-button { min-height: 40px; }

.portal-onboarding-route {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-strong);
}
.portal-onboarding-route-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--portal-border-strong);
  border-radius: 12px;
  color: var(--portal-accent);
  background: var(--portal-surface-soft);
}
.portal-onboarding-route-icon .portal-icon { width: 19px; height: 19px; }
.portal-onboarding-route strong { display: block; color: var(--portal-text); font-size: 13px; }
.portal-onboarding-route p { margin: 4px 0 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.55; }
.portal-onboarding-route-state { display: inline-flex; min-height: 28px; align-items: center; padding: 5px 9px; border: 1px solid var(--portal-border); border-radius: 999px; color: var(--portal-muted-strong); font-size: 11px; font-weight: 760; white-space: nowrap; }

.portal-account-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-account-command-copy h2 { margin: 5px 0 6px; color: var(--portal-text); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.03em; }
.portal-account-command-copy p { max-width: 600px; margin: 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.6; }
.portal-account-command-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.portal-account-command-facts > div { min-width: 0; padding: 10px; border: 1px solid var(--portal-border); border-radius: 10px; background: var(--portal-surface); }
.portal-account-command-facts dt { color: var(--portal-muted); font-size: 10px; font-weight: 780; letter-spacing: .05em; text-transform: uppercase; }
.portal-account-command-facts dd { display: flex; gap: 6px; align-items: flex-start; margin: 5px 0 0; color: var(--portal-text); font-size: 11px; font-weight: 720; line-height: 1.4; }
.portal-account-command-facts .portal-icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--portal-accent); }
.portal-account-command > .portal-button { min-height: 40px; justify-content: center; white-space: nowrap; }

@media (max-width: 1040px) {
  .portal-account-command { grid-template-columns: minmax(0, 1fr) auto; }
  .portal-account-command-facts { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .portal-auth-journey { grid-template-columns: 1fr; }
  .portal-auth-journey li { min-height: 0; }
  .portal-auth-alternatives summary { align-items: flex-start; }
  .portal-auth-alternatives summary small { margin-left: 0; }
  .portal-auth-page--access .portal-auth-card .portal-button,
  .portal-auth-page--access .portal-auth-alternatives .portal-button,
  .portal-account-command > .portal-button { min-height: 44px; }
  .portal-onboarding-route { grid-template-columns: 40px minmax(0, 1fr); align-items: start; padding: 16px; border-radius: 16px; }
  .portal-onboarding-route-state { grid-column: 2; justify-self: start; }
  .portal-account-command { grid-template-columns: 1fr; gap: 14px; padding: 18px; border-radius: 18px; }
  .portal-account-command-facts { grid-column: auto; grid-template-columns: 1fr; }
  .portal-account-command > .portal-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-auth-journey li,
  .portal-auth-alternatives,
  .portal-onboarding-route,
  .portal-account-command { transition: none; }
}

/* Job & Asset Delivery Center. These views project already redacted,
   owner-scoped records without merging Web Vault sources into delivery. */
.portal-filter-button {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 12px;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.portal-filter-button:focus-visible,
.portal-delivery-mobile-card a:focus-visible,
.portal-job-delivery-lifecycle a:focus-visible {
  outline: 3px solid rgba(45, 212, 191, .22);
  outline-offset: 2px;
}
.portal-filter-result {
  min-height: 18px;
  margin: -6px 0 14px;
  color: var(--portal-muted);
  font-size: 12px;
  line-height: 1.5;
}
.portal-delivery-summary { margin: 0; }
.portal-delivery-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.portal-delivery-summary-card {
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 15px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-strong);
}
.portal-delivery-summary-card > span {
  color: var(--portal-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.portal-delivery-summary-card > strong {
  color: var(--portal-text);
  font-feature-settings: "tnum" 1;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.04em;
}
.portal-delivery-summary-card > small { color: var(--portal-muted-strong); font-size: 12px; line-height: 1.45; }
.portal-delivery-center { display: grid; gap: 0; }
.portal-delivery-read-status {
  min-height: 20px;
  margin: 0 0 14px;
  color: var(--portal-muted);
  font-size: 12px;
  line-height: 1.5;
}
.portal-record-link { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.portal-record-source {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  color: var(--portal-muted-strong);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.3;
  white-space: nowrap;
}
.portal-record-source[data-record-source="web_vault"] { border-color: rgba(154, 207, 231, .26); color: #b9d9e5; }
.portal-record-source[data-record-source="web_native_output"] { border-color: rgba(45, 212, 191, .28); color: #a7e8df; }
.portal-record-source[data-record-source="canonical_delivery"] { border-color: rgba(255, 211, 122, .24); color: #efd591; }
.portal-delivery-state[data-delivery="vault"] { border-color: rgba(154, 207, 231, .26); color: #b9d9e5; }
.portal-delivery-mobile-records { display: none; }
.portal-job-delivery-lifecycle { display: grid; gap: 18px; }
.portal-delivery-lifecycle-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  overflow: hidden;
}
.portal-delivery-lifecycle-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-height: 80px;
  padding: 14px;
  border-bottom: 1px solid var(--portal-border);
  background: var(--portal-surface-strong);
}
.portal-delivery-lifecycle-list li:last-child { border-bottom: 0; }
.portal-delivery-lifecycle-list li > span:first-child {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--portal-border-strong);
  border-radius: 50%;
  color: var(--portal-accent);
  font-size: 12px;
  font-weight: 820;
}
.portal-delivery-lifecycle-list strong { display: block; color: var(--portal-text); font-size: 13px; }
.portal-delivery-lifecycle-list p { margin: 4px 0 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.55; }
.portal-delivery-next-action {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-strong);
}
.portal-delivery-next-action > div { min-width: 0; }
.portal-delivery-next-action strong { color: var(--portal-text); font-size: 13px; }
.portal-delivery-next-action p { margin: 4px 0 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.55; }
.portal-delivery-next-action .portal-button { min-height: 40px; flex: 0 0 auto; justify-content: center; }

@media (max-width: 980px) and (min-width: 701px) {
  .portal-delivery-desktop-records .portal-data-table-scroll-hint {
    display: block;
    margin: 0;
    padding: 10px 14px 0;
    color: var(--portal-muted);
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .portal-filter-button { min-height: 44px; padding: 9px 13px; font-size: 12px; }
  .portal-filter-result { margin-top: -4px; font-size: 12px; }
  .portal-delivery-summary-grid { grid-template-columns: 1fr; }
  .portal-delivery-summary-card { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .portal-delivery-summary-card > strong { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; }
  .portal-delivery-summary-card > small { grid-column: 1; }
  .portal-delivery-desktop-records { display: none; }
  .portal-delivery-mobile-records { display: grid; gap: 10px; }
  .portal-delivery-mobile-card {
    display: grid;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    background: var(--portal-surface-strong);
  }
  .portal-delivery-mobile-card-head { display: flex; gap: 12px; align-items: start; justify-content: space-between; }
  .portal-delivery-mobile-card-head > div { min-width: 0; }
  .portal-delivery-mobile-card-head strong { display: block; overflow-wrap: anywhere; color: var(--portal-text); font-size: 13px; line-height: 1.45; }
  .portal-delivery-mobile-card-head .portal-section-kicker { margin-bottom: 4px; }
  .portal-delivery-mobile-source { margin: -6px 0 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.55; }
  .portal-delivery-mobile-meta { display: grid; gap: 10px; margin: 0; }
  .portal-delivery-mobile-meta > div { display: grid; grid-template-columns: minmax(98px, .75fr) minmax(0, 1.4fr); gap: 10px; align-items: start; }
  .portal-delivery-mobile-meta dt { color: var(--portal-muted); font-size: 11px; font-weight: 760; }
  .portal-delivery-mobile-meta dd { min-width: 0; margin: 0; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
  .portal-delivery-mobile-card-footer { display: flex; gap: 10px; }
  .portal-delivery-mobile-card-footer .portal-button { width: 100%; min-height: 44px; justify-content: center; }
  .portal-delivery-lifecycle-list li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .portal-delivery-lifecycle-list li > .portal-badge,
  .portal-delivery-lifecycle-list li > .portal-delivery-state { grid-column: 2; justify-self: start; }
  .portal-delivery-next-action { display: grid; gap: 13px; padding: 15px; }
  .portal-delivery-next-action .portal-button { width: 100%; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-filter-button,
  .portal-delivery-mobile-card,
  .portal-delivery-next-action { transition: none; }
}

/* Billing is an app workflow, not a sales landing.  These rules only change
 * presentation: payment authority, ledger reads and the existing server-side
 * controls remain untouched. */
.portal-wallet-page .portal-button { min-height: 40px; }
.portal-wallet-command { display: grid; align-content: start; gap: 14px; }
.portal-wallet-command .portal-card-header { margin-bottom: 0; }
.portal-wallet-facts {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--portal-surface-strong);
}
.portal-wallet-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 13px; border-bottom: 1px solid var(--portal-border); }
.portal-wallet-facts > div:last-child { border-bottom: 0; }
.portal-wallet-facts dt { color: var(--portal-muted); font-size: 11px; font-weight: 760; }
.portal-wallet-facts dd { min-width: 0; margin: 0; color: var(--portal-text); font-size: 13px; font-weight: 790; overflow-wrap: anywhere; text-align: right; }
.portal-wallet-read-status { min-height: 2.9em; margin: 0; padding: 11px 12px; border: 1px solid rgba(131, 197, 255, .2); border-radius: 11px; background: rgba(16, 40, 56, .38); color: var(--portal-muted-strong); font-size: 12px; line-height: 1.52; }
.portal-wallet-overview .portal-admin-grid { margin-top: 2px; }
.portal-billing-journey {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.3vw, 25px);
  border: 1px solid rgba(45, 212, 191, .28);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-billing-journey-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.portal-billing-journey h2 { margin: 2px 0 0; color: var(--portal-text); font-size: clamp(18px, 2vw, 23px); letter-spacing: -.022em; }
.portal-billing-journey p { max-width: 760px; margin: 7px 0 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.6; }
.portal-billing-journey-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.portal-billing-journey-lanes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; padding: 13px; border: 1px solid var(--portal-border); border-radius: 12px; background: rgba(8, 22, 33, .48); }
.portal-billing-journey-lanes li > span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(45, 212, 191, .48); border-radius: 50%; color: var(--portal-accent); font-size: 11px; font-weight: 820; }
.portal-billing-journey-lanes strong { display: block; color: var(--portal-text); font-size: 12px; line-height: 1.45; }
.portal-billing-journey-lanes p { margin: 4px 0 0; color: var(--portal-muted); font-size: 11px; line-height: 1.52; }
.portal-billing-entrypoints .portal-payment-entry-grid { gap: 12px; }
.portal-billing-entrypoints .portal-payment-entry { min-height: 214px; padding: 16px; background: var(--portal-surface-strong); }
.portal-billing-entrypoints .portal-payment-entry--manual { border-color: rgba(255, 211, 122, .3); }
.portal-billing-entrypoints .portal-payment-entry h3 { font-size: 14px; }
.portal-billing-entrypoints .portal-payment-entry p { min-height: 56px; color: var(--portal-muted-strong); font-size: 12px; line-height: 1.55; }
.portal-billing-entrypoints .portal-payment-entry-note { font-size: 11px; line-height: 1.5; }
.portal-billing-entrypoints .portal-payment-entry-actions { gap: 8px; }
.portal-billing-catalog-page { display: grid; gap: 18px; }
.portal-billing-catalog-intro { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: clamp(18px, 2.2vw, 26px); border: 1px solid var(--portal-border); border-radius: var(--portal-radius-lg); background: var(--portal-surface-strong); }
.portal-billing-catalog-intro h2 { margin: 2px 0 0; color: var(--portal-text); font-size: clamp(19px, 2.2vw, 25px); letter-spacing: -.022em; }
.portal-billing-catalog-intro p { max-width: 760px; margin: 7px 0 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.6; }
.portal-billing-catalog-card { min-height: 184px; background: var(--portal-surface-strong); }
.portal-billing-catalog-card[data-billing-catalog-status="guarded"] { border-style: dashed; }
.portal-billing-catalog-family { display: block; margin-bottom: 7px; color: var(--portal-accent); font-size: 10px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.portal-billing-catalog-card .portal-module-card-footer { color: var(--portal-muted-strong); font-size: 11px; }
.portal-billing-catalog-card .portal-module-card-footer > span:last-child { color: var(--portal-muted); font-weight: 700; text-align: right; }

@media (max-width: 700px) {
  .portal-wallet-page .portal-button { min-height: 44px; }
  .portal-wallet-command .portal-inline-actions { width: 100%; }
  .portal-wallet-command .portal-inline-actions .portal-button { flex: 1 1 100%; justify-content: center; }
  .portal-billing-journey, .portal-billing-catalog-intro { padding: 17px; }
  .portal-billing-journey-head, .portal-billing-catalog-intro { flex-direction: column; gap: 11px; }
  .portal-billing-journey-lanes { grid-template-columns: 1fr; }
  .portal-billing-entrypoints .portal-payment-entry { min-height: 0; padding: 15px; }
  .portal-billing-entrypoints .portal-payment-entry p { min-height: 0; }
  .portal-billing-entrypoints .portal-payment-entry-actions .portal-button { flex: 1 1 100%; justify-content: center; }
  .portal-billing-catalog-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-billing-journey,
  .portal-billing-entrypoints .portal-payment-entry,
  .portal-billing-catalog-card { transition: none; }
}

/* Billing workspace navigation. This route-only strip keeps the canonical
   wallet, top-up, package and pricing views in one predictable app area. */
.portal-wallet-page,
.portal-billing-catalog-page { max-width: 1140px; }
.portal-billing-nav {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface-strong);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--portal-border-strong) transparent;
}
.portal-billing-nav a {
  display: inline-flex;
  flex: 1 0 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--portal-muted-strong);
  font-size: 13px;
  font-weight: 740;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: start;
  transition: color var(--portal-transition), border-color var(--portal-transition), background-color var(--portal-transition);
}
.portal-billing-nav a:hover,
.portal-billing-nav a:focus-visible {
  border-color: var(--portal-border-strong);
  color: var(--portal-text);
  background: var(--portal-surface-soft);
}
.portal-billing-nav a[aria-current="page"] {
  border-color: rgba(45, 212, 191, .44);
  color: var(--portal-text);
  background: rgba(45, 212, 191, .12);
}
@media (max-width: 700px) {
  .portal-billing-nav a { flex: 0 0 auto; min-height: 44px; justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-billing-nav a { transition: none; }
}

/* Delivery workspace navigation. This route-only strip keeps Job Center,
   canonical Assets and the Web-owned Asset Vault visibly connected. */
.portal-delivery-nav {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface-strong);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--portal-border-strong) transparent;
}
.portal-delivery-nav a {
  display: inline-flex;
  flex: 1 0 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--portal-muted-strong);
  font-size: 13px;
  font-weight: 740;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: start;
  transition: color var(--portal-transition), border-color var(--portal-transition), background-color var(--portal-transition);
}
.portal-delivery-nav a:hover,
.portal-delivery-nav a:focus-visible {
  border-color: var(--portal-border-strong);
  color: var(--portal-text);
  background: var(--portal-surface-soft);
}
.portal-delivery-nav a:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 2px; }
.portal-delivery-nav a[aria-current="page"] {
  border-color: rgba(45, 212, 191, .44);
  color: var(--portal-text);
  background: rgba(45, 212, 191, .12);
}
@media (max-width: 700px) {
  .portal-delivery-nav a { flex: 0 0 auto; min-height: 44px; justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-delivery-nav a { transition: none; }
}

/* Music & SFX Library is a dense private workspace view, not a catalogue or
 * a player. It intentionally shares the app shell tokens and keeps all data
 * cards focused on safe collection metadata. */
.portal-music-library { display: grid; gap: 18px; min-width: 0; }
.portal-music-library-intro {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(20px, 2.7vw, 30px);
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-music-library-intro > div { min-width: 0; }
.portal-music-library-intro h2 { margin: 7px 0 8px; color: var(--portal-text); font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.08; }
.portal-music-library-intro p { max-width: 760px; margin: 0; color: var(--portal-muted-strong); font-size: 14px; line-height: 1.65; }
.portal-music-library-intro-actions { display: grid; flex: 0 0 auto; gap: 10px; justify-items: end; }
.portal-music-library-read-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  background: var(--portal-surface);
  color: var(--portal-muted-strong);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
}
.portal-music-library-board { min-width: 0; border-color: var(--portal-border); background: var(--portal-surface); }
.portal-music-library-board .portal-card-header { align-items: flex-start; }
.portal-music-library-board .portal-button,
.portal-music-library-intro-actions .portal-button,
.portal-music-library-filter .portal-button,
.portal-music-library-guard .portal-button { min-height: 44px; }
.portal-music-library-filter {
  display: grid;
  gap: 11px;
  margin: 14px 0 16px;
  padding: 13px;
  border: 1px solid var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface-strong);
}
.portal-music-library-filter .portal-fields { grid-template-columns: minmax(0, 1fr); }
.portal-music-library-filter .portal-field { gap: 6px; }
.portal-music-library-filter .portal-form-footer { margin-top: 0; padding-top: 1px; }
.portal-music-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.portal-music-library-card {
  display: grid;
  min-width: 0;
  min-height: 236px;
  align-content: start;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--portal-border);
  border-radius: 15px;
  background: var(--portal-surface-strong);
  transition: border-color var(--portal-transition), background var(--portal-transition), transform var(--portal-transition);
}
.portal-music-library-card:hover { border-color: var(--portal-border-strong); background: var(--portal-surface-soft); transform: translateY(-1px); }
.portal-music-library-card-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-width: 0; }
.portal-music-library-role,
.portal-music-library-favorite,
.portal-music-library-tags span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid var(--portal-border);
  border-radius: 999px;
  background: var(--portal-surface);
  color: var(--portal-muted-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.portal-music-library-role { border-color: rgba(45, 212, 191, .36); color: var(--portal-accent); }
.portal-music-library-favorite { border-color: rgba(251, 191, 36, .38); color: var(--portal-warning); letter-spacing: .01em; text-transform: none; }
.portal-music-library-card-copy { display: grid; min-width: 0; gap: 5px; }
.portal-music-library-card-copy h3 { margin: 0; overflow-wrap: anywhere; color: var(--portal-text); font-size: 15px; line-height: 1.38; }
.portal-music-library-card-copy p { margin: 0; overflow-wrap: anywhere; color: var(--portal-muted); font-size: 12px; line-height: 1.55; }
.portal-music-library-card-copy strong { color: var(--portal-muted-strong); font-weight: 720; }
.portal-music-library-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.portal-music-library-meta > div { min-width: 0; padding: 10px; border: 1px solid var(--portal-border); border-radius: 11px; background: rgba(6, 17, 29, .28); }
.portal-music-library-meta dt { color: var(--portal-muted); font-size: 10px; font-weight: 760; }
.portal-music-library-meta dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--portal-muted-strong); font-size: 11px; font-weight: 680; line-height: 1.48; }
.portal-music-library-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.portal-music-library-tags span { border-color: rgba(147, 197, 253, .28); background: rgba(59, 130, 246, .10); color: var(--portal-info); font-size: 9px; font-weight: 730; letter-spacing: 0; text-transform: none; }
.portal-music-library-muted { align-self: center; color: var(--portal-muted); font-size: 11px; }
.portal-music-library-card-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 2px; }
.portal-music-library-card-footer > span { flex: 1 1 150px; color: var(--portal-muted); font-size: 10px; line-height: 1.5; }
.portal-music-library-card-footer .portal-button { min-height: 44px; }
.portal-music-library-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--portal-border); color: var(--portal-muted-strong); font-size: 11px; font-weight: 700; }
.portal-music-library-pagination > div { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-music-library-pagination .portal-button { min-height: 44px; }
.portal-music-library-boundary {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
}
.portal-music-library-boundary > div { display: grid; min-width: 0; gap: 4px; }
.portal-music-library-boundary strong { color: var(--portal-text); font-size: 13px; }
.portal-music-library-boundary span { max-width: 780px; color: var(--portal-muted); font-size: 12px; line-height: 1.55; }
.portal-music-library-boundary .portal-button { flex: 0 0 auto; min-height: 44px; }
.portal-music-library-guard { border-color: var(--portal-border); background: var(--portal-surface); }
.portal-music-library :is(a, button, input):focus-visible { outline: 3px solid rgba(81, 213, 188, .65); outline-offset: 3px; }

@media (max-width: 1040px) {
  .portal-music-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .portal-music-library-intro, .portal-music-library-boundary { flex-direction: column; gap: 13px; padding: 18px; }
  .portal-music-library-intro-actions { width: 100%; justify-items: stretch; }
  .portal-music-library-intro-actions .portal-button, .portal-music-library-boundary .portal-button { width: 100%; justify-content: center; min-height: 44px; }
  .portal-music-library-grid { grid-template-columns: 1fr; }
  .portal-music-library-card { min-height: 0; padding: 15px; }
  .portal-music-library-filter { padding: 12px; }
  .portal-music-library-filter .portal-inline-actions { width: 100%; }
  .portal-music-library-filter .portal-inline-actions .portal-button { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .portal-music-library-card-footer .portal-button, .portal-music-library-pagination .portal-button { min-height: 44px; }
  .portal-music-library-pagination { align-items: flex-start; flex-direction: column; }
  .portal-music-library-pagination > div { width: 100%; }
  .portal-music-library-pagination > div .portal-button { flex: 1 1 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-music-library-card { transition: none; }
  .portal-music-library-card:hover { transform: none; }
}

/* App-first optional Telegram onboarding. The signed Web workspace is a valid
   destination on its own; this scope keeps the optional Bot bridge visible
   without letting it overwhelm the first useful customer action. */
.portal-onboarding-page {
  display: grid;
  max-width: 1140px;
  gap: 20px;
}
.portal-onboarding-page > .portal-hero { margin: 0; }
.portal-onboarding-page > .portal-hero .portal-eyebrow { display: none; }
.portal-onboarding-layout {
  display: grid;
  grid-template-columns: minmax(228px, .42fr) minmax(0, 1fr);
  grid-template-areas: "progress action";
  gap: 20px;
  align-items: start;
}
.portal-onboarding-progress {
  grid-area: progress;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.portal-onboarding-action {
  grid-area: action;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.portal-onboarding-action > .portal-card {
  gap: 18px;
  border-color: var(--portal-border);
  background: var(--portal-surface);
  box-shadow: none;
}
.portal-onboarding-action > .portal-notice {
  margin: 0;
  border-color: var(--portal-border);
  background: var(--portal-surface-strong);
}
.portal-onboarding-action .portal-onboarding-choice {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--portal-border);
  border-radius: 0;
  background: transparent;
}
.portal-onboarding-action .portal-onboarding-choice-icon {
  width: 40px;
  height: 40px;
  border-color: var(--portal-border-strong);
  border-radius: 12px;
  color: var(--portal-accent);
  background: rgba(45, 212, 191, .08);
}
.portal-onboarding-action .portal-onboarding-choice strong { color: var(--portal-text); font-size: 15px; }
.portal-onboarding-action .portal-onboarding-choice p { color: var(--portal-muted-strong); font-size: 13px; line-height: 1.58; }
.portal-onboarding-action .portal-onboarding-choice .portal-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  justify-content: center;
}
.portal-onboarding-action .portal-form-footer { gap: 10px; align-items: flex-start; }
.portal-onboarding-action .portal-form-footer .portal-button { min-height: 44px; }
.portal-onboarding-action .portal-form-footer .portal-button--quiet { border-color: var(--portal-border-strong); }
.portal-onboarding-steps {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 8px 0;
  border: 1px solid var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface-strong);
}
.portal-onboarding-steps li {
  min-height: 0;
  padding: 13px 14px;
  border: 0;
  border-top: 1px solid var(--portal-border);
  border-radius: 0;
  background: transparent;
}
.portal-onboarding-steps li:first-child { border-top: 0; }
.portal-onboarding-steps li > span {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-color: var(--portal-border-strong);
  color: var(--portal-muted-strong);
}
.portal-onboarding-steps strong { color: var(--portal-text); font-size: 13px; }
.portal-onboarding-steps small { color: var(--portal-muted-strong); font-size: 12px; }
.portal-onboarding-steps li[data-state="current"] {
  border-left: 2px solid var(--portal-accent);
  background: rgba(45, 212, 191, .07);
}
.portal-onboarding-steps li[data-state="current"] > span {
  border-color: var(--portal-accent);
  color: var(--portal-accent);
}
.portal-onboarding-route {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 14px;
  border-color: var(--portal-border);
  border-radius: var(--portal-radius);
  background: var(--portal-surface);
}
.portal-onboarding-route-icon {
  width: 36px;
  height: 36px;
  border-color: var(--portal-border-strong);
  border-radius: 11px;
  color: var(--portal-accent);
  background: var(--portal-surface-soft);
}
.portal-onboarding-route strong { font-size: 13px; }
.portal-onboarding-route p { color: var(--portal-muted-strong); font-size: 12px; }
.portal-onboarding-route-state { grid-column: 2; justify-self: start; }
.portal-onboarding-progress .portal-onboarding-continuation { margin: 0; }
.portal-onboarding-page > .portal-onboarding-assurance {
  border-color: var(--portal-border);
  background: var(--portal-surface-strong);
}
.portal-onboarding-page > .portal-onboarding-assurance > summary {
  min-height: 44px;
  font-size: 13px;
}
@media (max-width: 820px) {
  .portal-onboarding-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "action"
      "progress";
    gap: 16px;
  }
  .portal-onboarding-progress { gap: 10px; }
  .portal-onboarding-action > .portal-card { padding: 18px; }
}
@media (max-width: 520px) {
  .portal-onboarding-page { gap: 16px; }
  .portal-onboarding-action .portal-onboarding-choice { margin-bottom: 16px; padding-bottom: 16px; }
  .portal-onboarding-action .portal-onboarding-choice p { font-size: 13px; }
  .portal-onboarding-steps li { padding: 12px; }
  .portal-onboarding-route { padding: 13px; }
}

/* Account & Security workspace UX. The security center retains every signed
   server action; this late scope only clarifies navigation, posture, density,
   and destructive-action hierarchy inside the existing app shell. */
.portal-account-page,
.portal-account-security,
.portal-account-activity,
.portal-account-data-controls,
.portal-interface-locale-navigator {
  max-width: 1140px;
}
.portal-account-page .portal-settings-nav,
.portal-account-security .portal-settings-nav,
.portal-account-activity .portal-settings-nav,
.portal-account-data-controls .portal-settings-nav,
.portal-interface-locale-navigator .portal-settings-nav {
  width: 100%;
  max-width: 100%;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px;
  border-color: var(--portal-border);
  border-radius: 14px;
  background: var(--portal-surface-strong);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--portal-border-strong) transparent;
}
.portal-account-page .portal-settings-nav a,
.portal-account-security .portal-settings-nav a,
.portal-account-activity .portal-settings-nav a,
.portal-account-data-controls .portal-settings-nav a,
.portal-interface-locale-navigator .portal-settings-nav a {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--portal-muted-strong);
  font-size: 13px;
  font-weight: 740;
  scroll-snap-align: start;
  transition: color var(--portal-transition), border-color var(--portal-transition), background-color var(--portal-transition);
}
.portal-account-page .portal-settings-nav a:hover,
.portal-account-page .portal-settings-nav a:focus-visible,
.portal-account-security .portal-settings-nav a:hover,
.portal-account-security .portal-settings-nav a:focus-visible,
.portal-account-activity .portal-settings-nav a:hover,
.portal-account-activity .portal-settings-nav a:focus-visible,
.portal-account-data-controls .portal-settings-nav a:hover,
.portal-account-data-controls .portal-settings-nav a:focus-visible,
.portal-interface-locale-navigator .portal-settings-nav a:hover,
.portal-interface-locale-navigator .portal-settings-nav a:focus-visible {
  border-color: var(--portal-border-strong);
  color: var(--portal-text);
  background: var(--portal-surface-soft);
}
.portal-account-page .portal-settings-nav a[aria-current="page"],
.portal-account-security .portal-settings-nav a[aria-current="page"],
.portal-account-activity .portal-settings-nav a[aria-current="page"],
.portal-account-data-controls .portal-settings-nav a[aria-current="page"],
.portal-interface-locale-navigator .portal-settings-nav a[aria-current="page"] {
  border-color: rgba(45, 212, 191, .44);
  color: var(--portal-text);
  background: rgba(45, 212, 191, .12);
}
.portal-account-page .portal-account-command {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr) auto;
  gap: 16px;
  padding: clamp(20px, 2.6vw, 28px);
  border-color: var(--portal-border-strong);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-account-page .portal-account-command-copy h2 { margin-top: 0; }
.portal-account-page .portal-account-command-facts { gap: 9px; }
.portal-account-page .portal-account-command-facts > div { padding: 11px; background: var(--portal-surface); }
.portal-account-page .portal-account-command-facts dt { font-size: 12px; letter-spacing: .035em; }
.portal-account-page .portal-account-command-facts dd { font-size: 13px; line-height: 1.45; }
.portal-account-page .portal-account-command > .portal-button { min-height: 44px; }
.portal-account-page .portal-account-overview { gap: 16px; }
.portal-account-page .portal-account-session { border-color: var(--portal-border); background: var(--portal-surface-strong); }
.portal-account-page .portal-summary-item { gap: 14px; }
.portal-account-page .portal-summary-item .portal-summary-key { font-size: 12px; }
.portal-account-page .portal-summary-item .portal-summary-value { font-size: 13px; line-height: 1.5; }
.portal-account-page [data-portal-action="auth-logout"] {
  border-color: rgba(248, 113, 113, .5);
  color: #fecaca;
  background: rgba(248, 113, 113, .08);
}
.portal-account-page [data-portal-action="auth-logout"]:hover,
.portal-account-page [data-portal-action="auth-logout"]:focus-visible {
  border-color: rgba(248, 113, 113, .72);
  color: #fee2e2;
  background: rgba(248, 113, 113, .15);
}
.portal-security-posture {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--portal-border-strong);
  border-radius: var(--portal-radius-lg);
  background: var(--portal-surface-strong);
}
.portal-security-posture-head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.portal-security-posture-head > div { min-width: 0; }
.portal-security-posture-head h2 { margin: 0; color: var(--portal-text); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.03em; }
.portal-security-posture-head p { max-width: 680px; margin: 6px 0 0; color: var(--portal-muted-strong); font-size: 13px; line-height: 1.6; }
.portal-security-posture-head .portal-button { min-height: 44px; flex: 0 0 auto; white-space: nowrap; }
.portal-security-posture-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.portal-security-posture-facts > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--portal-border);
  border-radius: 12px;
  background: var(--portal-surface);
}
.portal-security-posture-facts > div[data-state="ready"] { border-color: rgba(45, 212, 191, .42); }
.portal-security-posture-facts > div[data-state="guarded"] { border-color: rgba(246, 191, 82, .3); }
.portal-security-posture-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--portal-border-strong);
  border-radius: 10px;
  color: var(--portal-accent);
  background: var(--portal-surface-soft);
}
.portal-security-posture-icon .portal-icon { width: 17px; height: 17px; }
.portal-security-posture-facts small,
.portal-security-posture-facts strong,
.portal-security-posture-facts em { display: block; min-width: 0; }
.portal-security-posture-facts small { color: var(--portal-muted); font-size: 12px; font-weight: 720; }
.portal-security-posture-facts strong { margin-top: 2px; color: var(--portal-text); font-size: 13px; line-height: 1.38; }
.portal-security-posture-facts em { margin-top: 2px; color: var(--portal-muted-strong); font-size: 12px; font-style: normal; line-height: 1.42; }
.portal-account-security .portal-security-assurance { margin-top: 2px; border-color: var(--portal-border); background: var(--portal-surface-strong); }
.portal-account-security .portal-security-assurance summary { min-height: 44px; font-size: 13px; }

@media (max-width: 1040px) {
  .portal-account-page .portal-account-command { grid-template-columns: minmax(0, 1fr) auto; }
  .portal-account-page .portal-account-command-facts { grid-column: 1 / -1; }
  .portal-security-posture-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .portal-account-page .portal-settings-nav,
  .portal-account-security .portal-settings-nav,
  .portal-account-activity .portal-settings-nav,
  .portal-account-data-controls .portal-settings-nav,
  .portal-interface-locale-navigator .portal-settings-nav { width: 100%; }
  .portal-account-page .portal-settings-nav a,
  .portal-account-security .portal-settings-nav a,
  .portal-account-activity .portal-settings-nav a,
  .portal-account-data-controls .portal-settings-nav a,
  .portal-interface-locale-navigator .portal-settings-nav a { flex: 0 0 auto; min-height: 44px; text-align: left; }
  .portal-account-page .portal-account-command { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .portal-account-page .portal-account-command-facts { grid-column: auto; grid-template-columns: 1fr; }
  .portal-account-page .portal-summary-item { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: start; }
  .portal-security-posture { gap: 14px; padding: 18px; border-radius: 18px; }
  .portal-security-posture-head { align-items: stretch; flex-direction: column; }
  .portal-security-posture-head .portal-button { width: 100%; justify-content: center; }
  .portal-security-posture-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-account-page .portal-settings-nav a,
  .portal-account-security .portal-settings-nav a,
  .portal-account-activity .portal-settings-nav a,
  .portal-account-data-controls .portal-settings-nav a,
  .portal-interface-locale-navigator .portal-settings-nav a { transition: none; }
}