.portal-layout {
    --surface-base: #171713;
    --surface-card: #20211b;
    --surface-input: #10120e;
    --surface-hover: #292a21;
    --text-primary: #f0e7cf;
    --text-secondary: #b6af9c;
    --accent: #d1a54c;
    --border-subtle: #d1a54c30;
    --radius-control: 7px;
    --radius-card: 12px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 18px;
    --space-lg: 24px;
    --space-xl: 36px;
    --font-body: 'Segoe UI', system-ui, sans-serif;
    --font-heading: Georgia, serif;
}
.portal-layout .ui-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-lg); min-width: 0; }
.portal-layout .ui-card:is(a):hover { background: var(--surface-hover); border-color: var(--accent); }
.portal-layout .ui-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); color: var(--text-primary); background: var(--surface-card); font: 14px var(--font-body); cursor: pointer; }
.portal-layout .ui-action:hover { border-color: var(--accent); background: var(--surface-hover); }
.portal-layout .ui-action-primary { background: var(--accent); color: #171713; font-weight: 600; }
.portal-layout .ui-action-primary:hover { background: #e1ba61; color: #171713; }
.portal-layout .ui-field { width: 100%; min-height: 48px; padding: var(--space-sm) 16px; background: var(--surface-input); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); font: 15px var(--font-body); }
.portal-layout :is(.ui-action, .ui-field, .ui-card):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.portal-layout .ui-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.portal-layout .ui-stat-grid > div { display: grid; gap: var(--space-xs); min-width: 0; }
.portal-layout .ui-stat-grid dt { font: 12px var(--font-body); color: var(--text-secondary); }
.portal-layout .ui-stat-grid dd { margin: 0; font: 17px var(--font-body); color: var(--text-primary); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
    .portal-layout *, .portal-layout *::before, .portal-layout *::after { scroll-behavior: auto !important; transition: none !important; }
}