/* portal-account.css — owned by P8 (pkg/eventapp/ui, /my/events htmx
 * account area). Design source: legacy `frontend/src/index.css` lines
 * 907-1473 in /data/projects/products/zasah (verbatim custom classes,
 * read-only, never edited) plus two new account-only elements resolved
 * from Tailwind via tools/twdict.py (manage actions, floating add button).
 * Colour vars mapped per design-port PLAN.md §3: --text-high->--portal-text,
 * --text-med->--portal-muted, --text-low->--portal-subtle,
 * --highlight->--portal-accent, --bg-level-1->--portal-surface,
 * --bg-level-2->--portal-surface-alt, --border->--portal-border.
 * --bg-level-3 has no portal token yet (PLAN.md §3 calls it a NEW token,
 * `--portal-bg-raised`, owned by P1's portal.css/site.go which this part
 * does not touch); every use below reads it via `var(--portal-bg-raised,
 * var(--portal-surface-alt))` so it upgrades automatically once P1/P9
 * define it, without editing P1's files.
 * Deliberately NOT ported here (belong to other owners, see report):
 * golden scrollbar theme, .golden-pulse, .video-strip, the touch media
 * query hiding #strip-prev/#strip-next — all global/shell or carousel
 * rules unrelated to /my/events (P1/P5 scope), confirmed dead-here by
 * myevents-inventory.md. .nhc-grid-select* is ported for completeness of
 * the legacy CSS range but currently has NO markup producer anywhere in
 * NHC (pkg/ui_htmx's form_surface.tmpl renders country/category as plain
 * <select>, not a grid-select widget) — flagged in the report as a
 * pkg/ui_htmx gap for the owner, not invented here. */

/* --- SDUI widget design tokens -------------------------------------------
 * pkg/ui_htmx serves the widget stylesheet (assets/nhc-form-widgets.css, the
 * verbatim shared rules for the date/time picker, its calendar grid and the
 * rich text editor) in the NHC design-system token vocabulary. The portal
 * theme speaks --portal-*, so it declares that vocabulary for the widgets
 * here rather than forking the shared stylesheet. Same mapping this file's
 * header documents for the hand-ported rules below, so both halves of the
 * form surface read the same colours.
 * Declared on the widgets (not on :root) so a portal page that also embeds a
 * design-system surface does not have its global tokens shadowed. */
.nhc-form,
.nhc-datetime,
.nhc-calendar,
.nhc-richtext {
  --text-high: var(--portal-text);
  --text-med: var(--portal-muted);
  --text-low: var(--portal-subtle);
  --highlight: var(--portal-accent);
  --ring: var(--portal-accent);
  --border: var(--portal-border);
  --bg-level-1: var(--portal-surface);
  --bg-level-2: var(--portal-surface-alt);
  --bg-level-3: var(--portal-bg-raised, var(--portal-surface-alt));
  --ds-z-popover: 40;
  --ds-z-editor-tools: 45;
  --ds-z-selection: 35;
}

/* --- SDUI (HTMX) form surface: shared contract rendered by
 * pkg/ui_htmx/templates/form_surface.tmpl. No CSS existed anywhere in NHC
 * for these classes before this file (confirmed via `rg -n 'nhc-form__'
 * pkg clients`: the only other hits are the React admin's own
 * clients/ui-react/src/richtext.css, a separate stylesheet for a separate
 * app). Rules are bare-selector (not scoped under .portal-*) because the
 * template that emits them has no such wrapper; this file is still
 * self-contained in effect because theme.go only serves it on the account
 * surface. */
.nhc-surface { border: 1px solid var(--portal-border); border-radius: 1rem; background: var(--portal-surface); }
.nhc-surface__header { padding: .875rem 1rem; border-bottom: 1px solid var(--portal-border); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--portal-muted); }
.nhc-surface__body { padding: 1rem; }

.nhc-form { display: flex; flex-direction: column; gap: .875rem; }
.nhc-form__fields { display: flex; flex-direction: column; gap: .875rem; min-height: 0; }
.nhc-form__field { display: flex; flex-direction: column; gap: .375rem; }
.nhc-form__image { display: flex; flex-direction: column; gap: .5rem; }
.nhc-form__control-row { display: flex; align-items: center; gap: .5rem; }
.nhc-form__label { font-size: .675rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--portal-subtle); }

.nhc-form input, .nhc-form textarea, .nhc-form select {
  width: 100%; border: 1px solid var(--portal-border); border-radius: .75rem;
  background: var(--portal-surface-alt); color: var(--portal-text); padding: .65rem .85rem; font-size: .9rem;
}
.nhc-form textarea { min-height: 7.5rem; resize: vertical; }
.nhc-form input:focus, .nhc-form textarea:focus, .nhc-form select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--portal-accent) 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-accent) 25%, transparent);
}

.nhc-form__actions { display: flex; gap: .625rem; padding-top: .25rem; }
.nhc-form__actions button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  border-radius: .75rem; border: 1px solid var(--portal-border); padding: .625rem 1rem; font-size: .72rem;
  line-height: 1.15; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; overflow: hidden;
  text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
.nhc-form__actions button[type="submit"] { background: var(--portal-accent); color: #000; border-color: transparent; }
.nhc-form__actions button[type="button"] { background: transparent; color: var(--portal-muted); }

.nhc-form__inline-action {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  min-height: 2.45rem; border-radius: .75rem; border: 1px solid var(--portal-border); padding: .65rem .9rem;
  font-size: .67rem; line-height: 1.15; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap;
  background: color-mix(in srgb, var(--portal-bg-raised, var(--portal-surface-alt)) 85%, transparent);
  color: var(--portal-text);
}
.nhc-form__clear {
  width: 2.2rem; min-width: 2.2rem; height: 2.2rem; border-radius: .75rem; border: 1px solid var(--portal-border);
  background: color-mix(in srgb, var(--portal-bg-raised, var(--portal-surface-alt)) 80%, transparent);
  color: var(--portal-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1;
}
.nhc-form__clear:hover, .nhc-form__inline-action:hover {
  border-color: color-mix(in srgb, var(--portal-accent) 45%, var(--portal-border));
  color: var(--portal-text);
}

.nhc-source-panel { display: flex; flex-direction: column; gap: .45rem; }
.nhc-source-panel__controls { align-items: stretch; }
.nhc-source-panel__action { flex: 0 0 auto; width: min(100%, 14.75rem); min-width: 13.5rem; padding-inline: 1.1rem; }
.nhc-source-panel__status {
  display: none; align-items: center; gap: .45rem; min-height: 1.15rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; color: var(--portal-muted);
}
.nhc-source-panel__status[data-state="fresh"] { color: color-mix(in srgb, var(--portal-accent) 75%, white); }
.nhc-source-panel__status[data-state="stale"] { color: #facc15; }
.nhc-source-panel__status[data-state="error"] { color: #fca5a5; }
.nhc-source-panel__status[data-state="loading"]::before {
  content: ""; width: .9rem; height: .9rem; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--portal-subtle) 50%, transparent);
  border-top-color: var(--portal-accent); animation: nhc-source-spin .8s linear infinite;
}
@keyframes nhc-source-spin { to { transform: rotate(360deg); } }

/* Country/category grid-select widget. Ported for legacy-CSS-range
 * completeness; no current NHC markup emits these classes (see file
 * header note). Kept dormant, not wired to a fake selector. */
.nhc-grid-select { position: relative; }
.nhc-grid-select__trigger {
  width: 100%; min-height: 2.45rem; border: 1px solid var(--portal-border); border-radius: .75rem;
  background: var(--portal-surface-alt); color: var(--portal-text); padding: .6rem .8rem; text-align: left; font-size: .9rem;
}
.nhc-grid-select__panel {
  position: relative; z-index: 20; margin-top: .45rem; border: 1px solid var(--portal-border); border-radius: .75rem;
  background: var(--portal-surface); padding: .5rem;
}
.nhc-grid-select__search {
  width: 100%; border: 1px solid var(--portal-border); border-radius: .6rem; background: var(--portal-surface-alt);
  color: var(--portal-text); padding: .45rem .65rem; margin-bottom: .45rem; font-size: .82rem;
}
.nhc-grid-select__list { max-height: 14rem; overflow: auto; border: 1px solid color-mix(in srgb, var(--portal-border) 65%, transparent); border-radius: .6rem; }
.nhc-grid-select__row {
  width: 100%; display: flex; align-items: center; justify-content: flex-start; background: transparent;
  color: var(--portal-text); border: 0; border-bottom: 1px solid color-mix(in srgb, var(--portal-border) 55%, transparent);
  padding: .45rem .6rem; font-size: .82rem; text-align: left;
}
.nhc-grid-select__row:last-child { border-bottom: 0; }
.nhc-grid-select__row:hover { background: color-mix(in srgb, var(--portal-accent) 16%, transparent); }

@media (max-width: 640px) {
  .nhc-source-panel__controls { flex-direction: column; align-items: stretch; }
  .nhc-source-panel__action { width: 100%; min-width: 0; }
}

/* --- My-event modal (HTMX): dialog shell + delete-confirm dialog. Class
 * names kept literal per RULES.md item 5 (custom, non-tenant, JS-contract
 * names — my-event-modal.js is a product script that walks the DOM by
 * these exact classes/data-attrs). */
.my-event-modal__overlay {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(7, 11, 19, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  overflow: hidden; overscroll-behavior: contain; touch-action: none;
}
html.my-event-modal-open, body.my-event-modal-open { overflow: hidden; overscroll-behavior: none; }

.my-event-modal__panel {
  width: min(100%, 52rem); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--portal-border) 82%, transparent); border-radius: 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--portal-surface) 92%, #05070a), var(--portal-surface));
  box-shadow: 0 28px 60px rgba(0, 0, 0, .46);
}
.my-event-modal__header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem;
  border-bottom: 1px solid var(--portal-border);
  background: color-mix(in srgb, var(--portal-surface-alt) 80%, transparent);
}
.my-event-modal__title { margin: 0; font-size: .9rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--portal-text); }
.my-event-modal__close {
  display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: .5rem;
  border: 1px solid transparent; background: transparent; color: var(--portal-muted); font-size: 1rem; line-height: 1;
}
.my-event-modal__close:hover {
  border-color: var(--portal-border); color: var(--portal-text);
  background: color-mix(in srgb, var(--portal-bg-raised, var(--portal-surface-alt)) 78%, transparent);
}
.my-event-modal__body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: .75rem; }
.my-event-modal__body .nhc-surface { border: 0; border-radius: 0; background: transparent; box-shadow: none; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.my-event-modal__body .nhc-surface__header { display: none; }
.my-event-modal__body .nhc-surface__body { padding: 0; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
.my-event-modal__body .nhc-form { gap: .7rem; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.my-event-modal__body .nhc-form[data-import-loading="1"] .nhc-form__fields { opacity: .72; }
.my-event-modal__body .nhc-form__fields {
  gap: .7rem; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding-right: .55rem; scrollbar-gutter: stable; touch-action: pan-y;
}
.my-event-modal__body .nhc-form textarea { min-height: 6rem; }
.my-event-modal__body .nhc-form__actions {
  margin-top: auto; padding: .75rem 0 .1rem 0; border-top: 1px solid color-mix(in srgb, var(--portal-border) 70%, transparent);
  background: color-mix(in srgb, var(--portal-surface) 96%, transparent); flex: 0 0 auto; position: sticky; bottom: 0; z-index: 2;
}

/* Delete-confirm dialog body wrapper. Legacy prod uses the Tailwind
 * utility `space-y-4` (margin-based child spacing); reproduced here as an
 * equivalent flex+gap layout (same visual result, simpler CSS — no
 * selector fidelity loss since `space-y-4` has no other consumer of its
 * own specificity). `.my-event-dialog__confirm-text` resolves only
 * `text-sm` (font-size); its Tailwind color utility `text-text-med` is one
 * of the unknown/never-compiled classes documented in PLAN.md §1, so
 * prod's confirm prompt renders in the inherited text colour, not a muted
 * one — reproduced as-is (no color rule added). */
.my-event-dialog__confirm { display: flex; flex-direction: column; gap: 1rem; }
.my-event-dialog__confirm-text { font-size: .875rem; margin: 0; }

.my-event-dialog__actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding-top: .25rem; }
.my-event-dialog__btn {
  border-radius: .75rem; border: 1px solid var(--portal-border); padding: .52rem .95rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--portal-bg-raised, var(--portal-surface-alt)) 82%, transparent); color: var(--portal-text);
}
.my-event-dialog__btn:hover { border-color: color-mix(in srgb, var(--portal-accent) 45%, var(--portal-border)); }
.my-event-dialog__btn--danger {
  border-color: color-mix(in srgb, #ef4444 58%, transparent);
  background: color-mix(in srgb, #ef4444 88%, #1c0d0d); color: #fff;
}
.my-event-dialog__btn--danger:hover { border-color: #ef4444; background: color-mix(in srgb, #ef4444 92%, #140a0a); }

@media (max-width: 768px) {
  .my-event-modal__overlay { align-items: flex-end; padding: .5rem; }
  .my-event-modal__panel { width: 100%; max-height: calc(100dvh - .5rem); border-radius: .9rem .9rem .75rem .75rem; }
  .my-event-modal__body { padding: .6rem; }
}

/* --- Account-only elements not in the legacy custom-CSS range (they were
 * inline Tailwind utilities on prod): resolved via
 * `python3 tools/twdict.py resolve tools/twdict.json --selector '.portal-account-*' '<legacy classes>'`
 * against myevents-inventory.md §2.6/§2.7, colours substituted per the
 * same mapping table. New semantic classes, not reused from portal-cards.css
 * because they style the manage-actions overlay strip and floating trigger
 * that only exist on the account surface. */
.portal-account-manage {
  margin-top: -1px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--portal-border) 80%, transparent);
  background: color-mix(in srgb, #000 85%, transparent); padding: .5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.portal-account-manage__action {
  display: inline-flex; height: 2.5rem; width: 100%; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 10px; border: 1px solid transparent; padding-inline: .75rem; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; transition: all .15s;
}
.portal-account-manage__action--edit {
  border-color: color-mix(in srgb, var(--portal-accent) 35%, transparent);
  background: color-mix(in srgb, var(--portal-accent) 10%, transparent); color: var(--portal-accent);
}
.portal-account-manage__action--edit:hover { border-color: var(--portal-accent); background: var(--portal-accent); color: #000; }
.portal-account-manage__action--edit:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-accent) 40%, transparent); }
.portal-account-manage__action--delete {
  border-color: color-mix(in srgb, #f87171 35%, transparent);
  background: color-mix(in srgb, #ef4444 10%, transparent); color: #fecaca;
}
.portal-account-manage__action--delete:hover { border-color: #f87171; background: #ef4444; color: #fff; }
.portal-account-manage__action--delete:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, #f87171 40%, transparent); }
.portal-account-manage__icon { height: .875rem; width: .875rem; flex-shrink: 0; }

.portal-account-fab { position: fixed; bottom: 6rem; right: 1.5rem; z-index: 40; }
@media (width>=48rem) { .portal-account-fab { bottom: 3rem; } }
.portal-account-fab__btn {
  display: flex; align-items: center; gap: .75rem; background: var(--portal-accent); color: #000;
  padding: 1rem 1.5rem; border-radius: 999px; font-weight: 700; box-shadow: 0 0 30px rgba(127, 255, 0, .3);
  transition: all .15s; border: 0; cursor: pointer;
}
.portal-account-fab__btn:hover { transform: scale(1.05); }
.portal-account-fab__btn:active { transform: scale(.95); }
.portal-account-fab__label { font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; }
.portal-account-fab__icon { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; }
.portal-account-fab__icon span { font-size: 1.5rem; line-height: 1; }

/* Account-shell logout control (pkg/eventapp/ui.BuildAccountLogoutControlHTML).
 * No prior source in the legacy custom-CSS range — myevents-inventory.md
 * §0/§2.1 confirms no logout affordance existed anywhere in the legacy htmx
 * surface, so there is nothing to resolve from twdict.py here. Styled to
 * match the existing header-actions-row pill pattern (year switcher /
 * "ADMIN" link, myevents-inventory.md §2.2: `inline-flex items-center
 * bg-bg-level-1 border border-border rounded-xl p-1` wrapper around a
 * `px-4 h-10 rounded-lg ... text-highlight hover:bg-bg-level-2` control),
 * tokens mapped per PLAN.md §3. */
.portal-account-bar {
  display: inline-flex; align-items: center; background: var(--portal-surface);
  border: 1px solid var(--portal-border); border-radius: .75rem; padding: .25rem;
}
/* Page heading row that also carries the account bar (legacy
   `flex items-end gap-3` header actions: title left, pills right); full rule
   (with the border-b/emphasis it also needs) is below, past the bar link
   styles, next to the year switcher it shares the row with. */
.portal-account-bar__logout, .portal-account-bar__link {
  display: inline-flex; align-items: center; justify-content: center; height: 2.5rem;
  padding-inline: 1rem; border-radius: .5rem; border: 0; background: transparent;
  color: var(--portal-accent); font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; transition: all .15s;
}
.portal-account-bar__link { text-decoration: none; letter-spacing: .1em; }
.portal-account-bar__logout:hover, .portal-account-bar__link:hover {
  background: color-mix(in srgb, var(--portal-bg-raised, var(--portal-surface-alt)) 85%, transparent);
}
.portal-account-bar__logout:focus-visible, .portal-account-bar__link:focus-visible {
  outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-accent) 40%, transparent);
}
.portal-account-bar__logout:disabled { opacity: .6; cursor: default; }

/* Page-4 gaps: wide account layout, heading emphasis, year switcher, empty
 * state -- design source myevents-inventory.md §2/§2.2/§2.3/§2.4. The
 * account page is rendered through its own list layout
 * (cmsportal.LayoutKeyAccount, pkg/eventapp/account/page.go), whose main
 * element is the site's normal wide container; .portal-account-page is the
 * page's own column inside it, so the event grid measures the same width as
 * the public event archive rather than a reading column. */
.portal-account-page { width: min(100%, var(--portal-max-width, 80rem)); margin-inline: auto; }
.portal-section-header--account { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--portal-border); padding-bottom: 2rem; margin-bottom: 2rem; }
.portal-section-header--account .portal-section-header-emphasis { color: var(--portal-accent); }
.portal-account-bar-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.portal-account-year-switcher {
  display: inline-flex; align-items: center; background: var(--portal-surface);
  border: 1px solid var(--portal-border); border-radius: .75rem; padding: .25rem;
}
.portal-account-year-switcher__value {
  display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; min-width: 6.875rem;
  padding-inline: 1rem; border-radius: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--portal-accent);
}
.portal-account-year-switcher__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border-radius: .5rem; color: var(--portal-muted); transition: all .15s;
}
.portal-account-year-switcher__arrow:hover { background: color-mix(in srgb, var(--portal-bg-raised, var(--portal-surface-alt)) 85%, transparent); color: var(--portal-accent); }
.portal-account-year-switcher__arrow--disabled { opacity: .35; pointer-events: none; }

/* Empty-state dashed box (legacy: bg-bg-level-1 p-20 rounded-[40px]
 * text-center border border-dashed border-border shadow-inner). */
.portal-account-empty {
  border: 1px dashed var(--portal-border); border-radius: 40px; background: var(--portal-surface);
  padding: 5rem 2rem; text-align: center; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
/* Legacy box copy: h3 `text-xl font-black text-text-med mb-2`, p
 * `text-text-low font-medium` (myevents-inventory.md §2.4). */
.portal-account-empty__title { margin: 0 0 .5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 900; color: var(--portal-muted); }
.portal-account-empty__hint { margin: 0; font-weight: 500; color: var(--portal-subtle); }

/* --- /login (pkg/eventapp/account/login.go) --------------------------------
 * Legacy design source: products/zasah frontend/src/pages/LoginPage.tsx
 * Tailwind classes resolved to the portal token vocabulary (same mapping as
 * the header of this file). The mode toggle is two radios; :has() on the
 * wrapper shows the fields bound to the checked mode, so no script runs. */
.portal-login { display: flex; flex: 1; justify-content: center; align-items: flex-start; padding: 2rem 1rem 3rem; }
@media (width>=48rem) { .portal-login { padding-top: 4rem; } }
.portal-login__card {
  width: 100%; max-width: 28rem; padding: 2rem; border-radius: 1rem;
  background: var(--portal-surface); border: 1px solid var(--portal-border);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.portal-login__form { display: flex; flex-direction: column; gap: 1.5rem; }
.portal-login__card > .nhc-surface { margin-top: 1.5rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.portal-login__card > .nhc-surface > .nhc-surface__body { padding: 0; }
.portal-login__card > .nhc-surface .nhc-form__actions button[type="submit"] { width: 100%; padding: 1rem; }
.portal-login__modes {
  display: grid; grid-template-columns: 1fr 1fr; padding: .25rem; margin-bottom: -.25rem;
  border-radius: .75rem; border: 1px solid var(--portal-border); background: var(--portal-surface-alt);
}
.portal-login__mode-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.portal-login__mode {
  display: block; text-align: center; padding: .5rem .75rem; border-radius: .5rem; cursor: pointer;
  font-size: .625rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em;
  color: var(--portal-subtle); transition: color .15s, background .15s;
}
.portal-login__mode:hover { color: var(--portal-accent); }
.portal-login__mode-input:checked + .portal-login__mode { background: var(--portal-accent); color: #000; }
.portal-login__mode-input:focus-visible + .portal-login__mode { box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-accent) 40%, transparent); }
.portal-login__field { display: flex; flex-direction: column; gap: .5rem; }
.portal-login__label {
  display: block; font-size: .6875rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .1em; color: var(--portal-accent);
}
.portal-login__input {
  width: 100%; padding: .75rem 1rem; border-radius: .75rem; font: inherit; font-weight: 400;
  color: var(--portal-text); background: var(--portal-bg-raised, var(--portal-surface-alt));
  border: 1px solid var(--portal-border); transition: border-color .15s, box-shadow .15s;
}
.portal-login__input::placeholder { color: color-mix(in srgb, var(--portal-subtle) 30%, transparent); }
.portal-login__input:focus { outline: none; border-color: var(--portal-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-accent) 20%, transparent); }
.portal-login__trust {
  display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; cursor: pointer; text-align: left;
  border-radius: .75rem; border: 1px solid var(--portal-border);
  background: color-mix(in srgb, var(--portal-surface-alt) 50%, transparent); transition: border-color .15s;
}
.portal-login__trust:hover { border-color: color-mix(in srgb, var(--portal-accent) 40%, transparent); }
.portal-login__checkbox { margin-top: .25rem; height: 1rem; width: 1rem; flex-shrink: 0; accent-color: var(--portal-accent); }
.portal-login__trust-text { display: flex; flex-direction: column; gap: .25rem; }
.portal-login__trust-title { font-size: .875rem; font-weight: 600; color: var(--portal-text); }
.portal-login__trust-hint { font-size: .75rem; line-height: 1.6; color: var(--portal-subtle); }
.portal-login__notice, .portal-login__error { padding: 1rem; border-radius: .75rem; }
.portal-login__notice p, .portal-login__error p { margin: 0; font-size: .75rem; font-weight: 500; text-align: center; }
.portal-login__notice { background: color-mix(in srgb, var(--portal-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--portal-accent) 25%, transparent); }
.portal-login__notice p { color: var(--portal-accent); }
.portal-login__error { background: rgb(239 68 68 / .1); border: 1px solid rgb(239 68 68 / .2); }
.portal-login__error p { color: #ef4444; }
.portal-login__submit {
  width: 100%; padding: 1rem; border: 0; border-radius: .75rem; cursor: pointer;
  background: var(--portal-accent); color: #000; font: inherit; font-size: .875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--portal-accent) 20%, transparent); transition: opacity .15s;
}
.portal-login__submit:hover { opacity: .9; }
.portal-login__submit:disabled { opacity: .5; cursor: not-allowed; }
.portal-login__divider { position: relative; padding-top: 1rem; text-align: center; }
.portal-login__divider span {
  padding: 0 1rem; background: var(--portal-surface); font-size: .625rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em; color: color-mix(in srgb, var(--portal-subtle) 40%, transparent);
}
.portal-login__footer {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: .5rem; padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / .05);
}
.portal-login__caption { margin: 0; font-size: .5625rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; text-align: center; color: var(--portal-subtle); }
.portal-login__privacy { padding: .25rem 0; font-size: .625rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--portal-accent); text-decoration: none; }
.portal-login__privacy:hover { text-decoration: underline; }
/* Mode-bound fields: the register-only ones appear, and the login-only ones
 * vanish, while the "Registrácia" radio is checked. */
.portal-login .portal-login__register-only { display: none; }
.portal-login:has(#portal-login-mode-register:checked) .portal-login__field.portal-login__register-only { display: flex; }
.portal-login:has(#portal-login-mode-register:checked) .portal-login__submit .portal-login__register-only { display: inline; }
.portal-login:has(#portal-login-mode-register:checked) .portal-login__login-only { display: none; }