@charset "UTF-8";

/*
 * kad.in visual system — v1.0.0
 * Spacious editorial interface for Kadınoloji.
 */
:root {
  color-scheme: light;

  /* Semantic colours */
  --brand-seed: #8f1d5c;
  --brand-rgb: 143, 29, 92;
  --brand-fill: var(--brand-seed);
  --on-brand-fill: #ffffff;
  --brand-text-light: #8f1d5c;
  --brand-text-light-rgb: 143, 29, 92;
  --brand-text-dark: #ba749b;
  --brand-text-dark-rgb: 186, 116, 155;
  --brand-text: var(--brand-text-light);
  --brand-text-rgb: var(--brand-text-light-rgb);
  --brand-hover: #78184d;
  --on-brand-hover: #ffffff;
  --brand-active: #641440;
  --on-brand-active: #ffffff;
  --brand-dark: var(--brand-hover);
  --brand-deep: color-mix(in oklch, var(--brand-seed) 52%, black);
  --brand-inverse: var(--brand-deep);
  --brand-soft: color-mix(in oklch, var(--brand-seed) 9%, white);
  --brand-wash: color-mix(in oklch, var(--brand-seed) 4%, white);
  --brand-highlight: color-mix(in oklch, var(--brand-seed) 48%, white);
  --brand-focus: rgb(var(--brand-rgb) / .22);
  --brand-shadow: rgb(var(--brand-rgb) / .24);
  --text: #1b171a;
  --text-soft: #50474d;
  --muted: #786e75;
  --muted-text: #6f656c;
  --muted-decorative: #aaa0a7;
  --muted-light: var(--muted-text);
  --background: #f5f2f3;
  --background-soft: #faf8f7;
  --paper: #ffffff;
  --surface: rgba(255,255,255,.92);
  --surface-solid: #ffffff;
  --surface-soft: #f8f6f7;
  --surface-glass: rgba(255,255,255,.78);
  --surface-raised: rgba(255,255,255,.96);
  --surface-subtle: rgba(255,255,255,.58);
  --surface-inverse: #20131a;
  --brand-dark-mode: #b36590;
  --on-brand-dark-mode: #20131a;
  --brand-hover-dark: #bc779d;
  --on-brand-hover-dark: #20131a;
  --brand-active-dark: #c58aab;
  --on-brand-active-dark: #20131a;
  --on-inverse: #ffffff;
  --on-light: #20131a;
  --line: #e9e3e6;
  --line-strong: #dcd3d8;
  --success: #147a56;
  --success-soft: #e9f7f1;
  --warning: #a65a0b;
  --warning-soft: #fff3df;
  --danger: #bd2b45;
  --danger-soft: #fff0f3;
  --info: #2f6690;
  --info-soft: #edf5fb;

  /* Backwards-compatible semantic aliases */
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --canvas: var(--background);
  --canvas-warm: var(--background-soft);

  /* Shared rhythm: three radii, one layout/content gap and two component gaps */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-sm: var(--radius-s);
  --radius: var(--radius-m);
  --radius-lg: var(--radius-l);
  --radius-xl: var(--radius-l);
  --gap: 20px;
  --dropdown-gap: 7px;
  --field-gap: 8px;

  /* Shared header-control surface (theme, language, account and guest actions) */
  --header-control-border-color: var(--line);
  --header-control-background: var(--surface);
  --header-control-color: var(--text-soft);
  --header-control-shadow: var(--shadow-sm);
  --header-control-hover-border-color: color-mix(in srgb, var(--brand-text) 30%, var(--line));
  --header-control-hover-background: var(--surface-solid);

  /* Shared typography */
  --font-size-heading: clamp(2.75rem, 5vw, 5.5rem);
  --font-size-page-title: clamp(2rem, 3vw, 3rem);
  --font-size-admin-title: clamp(2rem, 2.7vw, 2.75rem);
  --font-size-subtitle: 1rem;
  --font-size-content: .9375rem;
  --font-size-label: .8125rem;
  --line-height-heading: 1;
  --line-height-content: 1.65;

  --shadow-sm: 0 12px 32px rgba(40, 23, 33, .06);
  --shadow: 0 30px 80px rgba(45, 22, 35, .11);
  --shadow-deep: 0 34px 90px rgba(27, 11, 20, .22);
  --site-shell: min(1400px, calc(100% - 64px));
  --site-shell-wide: min(1540px, calc(100% - 48px));
  --site-shell-narrow: var(--site-shell-wide);
  --site-header-height: 104px;
  --site-title-size: var(--font-size-heading);
  --site-radius-hero: var(--radius-l);
  --site-radius-panel: var(--radius-l);
  --site-radius-control: var(--radius-m);
  --site-page-gap: var(--gap);
  --site-page-bottom: 110px;
  --site-surface: rgba(255,255,255,.78);
  --site-surface-border: 1px solid rgba(255,255,255,.88);
  --site-surface-shadow: 0 24px 70px rgba(53,24,41,.08);
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", "Noto Serif", serif;
  --transition: 180ms cubic-bezier(.2,.8,.2,1);
  --admin-content-padding-inline: clamp(24px, 4vw, 64px);
  --admin-content-padding-top: var(--gap);
  --admin-content-padding-bottom: 60px;
  --admin-page-title-size: var(--font-size-admin-title);
  --admin-panel-padding: var(--gap);
  --admin-content-gap: var(--gap);
  --admin-grid-gap: var(--gap);
  --admin-toolbar-padding: var(--gap);
  --admin-toolbar-radius: var(--radius-m);
  --admin-surface-radius: var(--radius-l);
  --admin-surface-border: 1px solid rgba(255,255,255,.9);
  --admin-surface-bg: rgba(255,255,255,.87);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

html[data-theme-scope="frontend"][data-theme-resolved="dark"] {
  color-scheme: dark;
  --brand-fill: var(--brand-dark-mode);
  --on-brand-fill: var(--on-brand-dark-mode);
  --brand-text: var(--brand-text-dark);
  --brand-text-rgb: var(--brand-text-dark-rgb);
  --brand-hover: var(--brand-hover-dark);
  --on-brand-hover: var(--on-brand-hover-dark);
  --brand-active: var(--brand-active-dark);
  --on-brand-active: var(--on-brand-active-dark);
  --brand-dark: var(--brand-hover);
  --brand-deep: color-mix(in oklch, var(--brand-seed) 22%, white);
  --brand-inverse: color-mix(in oklch, var(--brand-seed) 32%, #111013);
  --brand-soft: color-mix(in oklch, var(--brand-seed) 18%, #272228);
  --brand-wash: color-mix(in oklch, var(--brand-seed) 8%, #211f22);
  --brand-highlight: color-mix(in oklch, var(--brand-seed) 48%, white);
  --brand-focus: rgb(var(--brand-rgb) / .34);
  --brand-shadow: rgb(var(--brand-rgb) / .28);
  --text: #f6f1f4;
  --text-soft: #d4ccd1;
  --muted: #aaa0a6;
  --muted-text: #b9afb5;
  --muted-decorative: #82787e;
  --muted-light: var(--muted-text);
  --background: #111013;
  --background-soft: #171419;
  --paper: #1a171b;
  --surface: rgba(31,28,32,.94);
  --surface-solid: #1d1a1e;
  --surface-soft: #272228;
  --surface-glass: rgba(29,26,30,.82);
  --surface-raised: rgba(32,29,33,.98);
  --surface-subtle: rgba(29,26,30,.66);
  --surface-inverse: #0d0c0e;
  --on-inverse: #ffffff;
  --on-light: #20131a;
  --line: #393339;
  --line-strong: #4b4349;
  --success: #72d6ae;
  --success-soft: #17372c;
  --warning: #f0b96f;
  --warning-soft: #3b2a16;
  --danger: #f18a9d;
  --danger-soft: #412028;
  --info: #87bde5;
  --info-soft: #1b3040;
  --shadow-sm: 0 12px 32px rgba(0,0,0,.22);
  --shadow: 0 30px 80px rgba(0,0,0,.34);
  --shadow-deep: 0 34px 90px rgba(0,0,0,.48);
  --site-surface: rgba(29,26,30,.86);
  --site-surface-border: 1px solid rgba(255,255,255,.08);
  --site-surface-shadow: 0 24px 70px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font-family: var(--font-sans); font-size: var(--font-size-content); line-height: var(--line-height-content); -webkit-font-smoothing: antialiased; }
body, input, select, textarea, button { font-family: var(--font-sans); }
html:lang(ja) { --font-display: "Noto Serif JP", serif; }
html:lang(zh), html:lang(zh-Hans) { --font-display: "Noto Serif SC", serif; }
html:lang(ko) { --font-display: "Noto Serif KR", serif; }
html:lang(he) { --font-display: "Noto Serif Hebrew", serif; }
html:lang(ar), html:lang(fa) { --font-display: "Noto Serif Arabic", serif; }
html:lang(ur) { --font-display: "Noto Nastaliq Urdu", "Noto Serif Arabic", serif; }
html:lang(bn) { --font-display: "Noto Serif Bengali", serif; }
html:lang(hi) { --font-display: "Noto Serif Devanagari", serif; }
html:lang(th) { --font-display: "Noto Serif Thai", serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:where(button:not(:disabled), .button:not([aria-disabled="true"]), [role="button"]:not([aria-disabled="true"]), summary) { cursor: pointer; }
:where(button:disabled, .button[aria-disabled="true"], [role="button"][aria-disabled="true"]) { cursor: not-allowed; }
img, svg { max-width: 100%; }
::selection { background: rgba(var(--brand-rgb), .18); color: var(--brand-deep); }
:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--text); letter-spacing: .01em; }
h1 { font-size: var(--font-size-heading); line-height: var(--line-height-heading); }
h2 { line-height: 1.08; }
h3 { line-height: 1.25; }
code { padding: .18em .42em; border-radius: var(--radius-s); background: var(--surface-soft); color: var(--brand-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .88em; }

/* Shared brand */
.theme-brand { display: contents; }
.theme-brand-dark { display: none; }
html[data-theme-scope="frontend"][data-theme-resolved="dark"] .theme-brand-light { display: none; }
html[data-theme-scope="frontend"][data-theme-resolved="dark"] .theme-brand-dark { display: contents; }
.theme-footer-symbol { display: contents; }
.theme-footer-symbol-dark { display: none; }
html[data-theme-resolved="dark"] .theme-footer-symbol-light { display: none; }
html[data-theme-resolved="dark"] .theme-footer-symbol-dark { display: contents; }
.brand-lockup { display: inline-flex; align-items: center; gap: var(--gap); min-width: 0; }
.brand-mark { width: 46px; height: 50px; display: grid; place-items: center; flex: 0 0 46px; }
.brand-mark img { width: 34px; height: 47px; display: block; object-fit: contain; }
.brand-mark-logo { width: auto; max-width: 190px; flex-basis: auto; }
.brand-mark-logo img { width: auto; max-width: 190px; height: 46px; }
.brand-mark-text { width: auto; max-width: 190px; flex-basis: auto; padding: 7px 10px; border: 1px solid rgba(var(--brand-rgb), .14); border-radius: var(--radius-s); color: var(--brand-text); font-size: .78rem; font-weight: 850; line-height: 1.15; text-align: center; }
.brand-lockup.light .brand-mark-text { border-color: rgba(255,255,255,.2); color: var(--on-inverse); }
.site-footer-logo > img { width: auto !important; max-width: 120px; height: 28px !important; object-fit: contain; }
.brand-copy { display: grid; min-width: 0; line-height: 1.15; }
.brand-copy strong { font-size: 1rem; letter-spacing: .01em; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: .68rem; white-space: nowrap; }
.brand-lockup.light .brand-copy strong { color: var(--on-inverse); }
.brand-lockup.light .brand-copy small { color: rgba(255,255,255,.55); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--gap); color: var(--brand-text); font-size: .68rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section-icon, .panel-icon, .settings-icon, .stat-icon, .feature-icon, .list-icon, .user-avatar, .new-key-icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--brand-text); background: var(--brand-soft); }
.section-icon { width: 54px; height: 54px; border-radius: var(--radius-m); font-size: 1.2rem; }
.panel-icon, .settings-icon, .list-icon { width: 42px; height: 42px; border-radius: var(--radius-m); }

/* Buttons */
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--gap); padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-m); font-size: .8rem; font-weight: 800; letter-spacing: .01em; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button.primary { background: var(--brand-fill); color: var(--on-brand-fill); box-shadow: 0 15px 30px var(--brand-shadow); }
.button.primary:hover { background: var(--brand-hover); color: var(--on-brand-hover); box-shadow: 0 18px 38px var(--brand-shadow); }
.button.primary:active { background: var(--brand-active); color: var(--on-brand-active); }
.button.secondary { border-color: var(--line-strong); background: var(--surface-solid); color: var(--text-soft); box-shadow: 0 8px 20px rgba(30,20,25,.04); }
.button.secondary:hover { border-color: rgba(var(--brand-rgb), .35); color: var(--brand-text); }
.button.large { min-height: 56px; padding-inline: 25px; border-radius: var(--radius-m); }
.button.full { width: 100%; }
.button[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
:is(.button[disabled], .button.disabled, .button[aria-disabled="true"], .icon-button:disabled, .icon-button[aria-disabled="true"]) { border-color: var(--line); background: var(--surface-soft); color: var(--muted); opacity: .62; cursor: not-allowed; pointer-events: auto !important; transform: none !important; box-shadow: none !important; }
.icon-button { width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-solid); color: var(--text-soft); transition: all var(--transition); }
.icon-button:hover { border-color: rgba(var(--brand-rgb), .28); background: var(--brand-soft); color: var(--brand-text); transform: translateY(-2px); }
.icon-button.danger, .button-link.danger { color: var(--danger); }
.icon-button.danger:hover { border-color: rgba(189,43,69,.2); background: var(--danger-soft); }
.button-link { display: inline-flex; align-items: center; gap: var(--gap); padding: 0; border: 0; background: transparent; font-size: .75rem; font-weight: 800; }

/* Controls with a leading icon use the compact icon/text rhythm. On an
   icon-only control the gap has no visual effect; text-only controls keep
   their existing geometry. */
:where(button, a, summary, [role="button"], [role="menuitem"]):has(> i:first-child) {
  column-gap: var(--dropdown-gap) !important;
}
:where(button, a, summary, [role="button"], [role="menuitem"]) > span:has(> i:first-child) {
  column-gap: var(--dropdown-gap) !important;
}

/* Notices */
.notice { display: flex; align-items: flex-start; gap: var(--gap); padding: 14px 16px; border: 1px solid; border-radius: var(--radius-m); font-size: .8rem; line-height: 1.5; }
.notice.success { border-color: color-mix(in srgb, var(--success) 28%, var(--line)); background: var(--success-soft); color: var(--success); }
.notice.error { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); background: var(--danger-soft); color: var(--danger); }
.notice i { margin-top: 2px; }
.status-pill, .badge { display: inline-flex; align-items: center; gap: var(--gap); width: fit-content; border-radius: var(--radius-l); font-size: .69rem; font-weight: 800; white-space: nowrap; }
.status-pill { padding: 8px 11px; }
.badge { padding: 7px 10px; }
.status-pill.success, .badge.success { background: var(--success-soft); color: var(--success); }
.status-pill.danger, .badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.warning { background: var(--warning-soft); color: var(--warning); }
.badge.attention { background: var(--brand-soft); color: var(--brand-text); }
.badge.neutral { background: var(--surface-soft); color: var(--muted); }

/* Custom form system */
.stack-form { display: grid; gap: var(--gap); }
.form-grid { display: grid; grid-auto-rows: max-content; align-items: start; gap: var(--gap); }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-two { grid-column: 1 / -1; }
.field { --gap: var(--field-gap); display: grid; grid-auto-rows: max-content; align-content: start; gap: var(--gap); min-width: 0; height: fit-content; }
.form-grid > .field { align-self: start; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); color: var(--ink-soft); font-size: var(--font-size-label); font-weight: 800; }
.field-label small { color: var(--muted-text); font-size: .75rem; font-weight: 650; }
.field-label b { color: var(--danger); }
.field > small { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.field-support { display: grid; grid-template-columns: minmax(110px,.42fr) minmax(0,1fr); align-items: center; gap: var(--gap); min-width: 0; margin-top: 0; }
.field-support > small { min-width: 0; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.field-support:has(> .password-meter:only-child) { display: block; width: 100%; margin-top: 0; }
.field-support .password-meter { width: 100%; min-width: 0; }
.input-control, .prefix-control, .select-control, .textarea-control, .color-control { position: relative; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-solid); box-shadow: 0 8px 24px rgba(32,20,27,.035); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.input-control, .select-control, .color-control { min-height: 52px; display: flex; align-items: center; }
.input-control:focus-within, .prefix-control:focus-within, .select-control:focus-within, .textarea-control:focus-within, .color-control:focus-within { border-color: rgba(var(--brand-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .09), 0 12px 28px rgba(30,20,26,.05); }
:where(input, select, textarea):disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); cursor: not-allowed; opacity: 1; }
:where(.input-control, .prefix-control, .select-control, .textarea-control, .color-control, .range-control, .file-drop-zone):has(:disabled) { border-color: var(--line) !important; background: var(--surface-soft) !important; box-shadow: none !important; opacity: .72; }
:where(.input-control, .prefix-control, .select-control, .textarea-control, .color-control, .range-control, .file-drop-zone):has(:disabled),
:where(.input-control, .prefix-control, .select-control, .textarea-control, .color-control, .range-control, .file-drop-zone):has(:disabled) * { cursor: not-allowed !important; }
:where(.input-control, .prefix-control, .select-control, .textarea-control, .color-control, .range-control, .file-drop-zone):has(:disabled) i { color: var(--muted-light) !important; }
.field:has(:disabled) > .field-label { color: var(--muted); }
.input-control > i:first-child, .textarea-control > i:first-child { width: 48px; flex: 0 0 48px; color: var(--brand-text); text-align: center; }
.input-control input, .prefix-control input, .select-control select, .textarea-control textarea { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
.input-control input { height: 50px; padding-block: 0; padding-inline: 0 15px; }
.input-control input::placeholder, textarea::placeholder { color: var(--muted-text); }
.input-control input[readonly] { color: var(--muted); cursor: default; }
.prefix-control { min-height: 52px; display: flex; align-items: stretch; overflow: hidden; }
.prefix-control > span { display: flex; align-items: center; padding: 0 14px; border-inline-end: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); font-size: .75rem; white-space: nowrap; }
.prefix-control input { padding: 0 14px; }
.select-control select { height: 50px; padding-block: 0; padding-inline: 15px 48px; appearance: none; cursor: pointer; }
.select-control > select + i { position: absolute; inset-inline-end: 16px; color: var(--brand-text); pointer-events: none; }
.has-custom-select { position: relative; overflow: visible; }
.has-custom-select > .custom-select-native {
  display: none !important;
}
.has-custom-select > .custom-select-legacy-icon { display: none; }
.has-custom-select > .custom-select-leading-icon {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 48px;
  display: grid;
  place-items: center;
  color: var(--brand-text);
  text-align: center;
  pointer-events: none;
}
.custom-select-trigger {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  align-self: stretch;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--gap);
  padding-block: 0;
  padding-inline: 15px 48px;
  border: 0;
  border-radius: inherit;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.custom-select-trigger-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-trigger > i {
  position: absolute;
  inset-inline-end: 16px;
  color: var(--brand-text);
  font-size: .78rem;
  pointer-events: none;
  transition: transform var(--transition), color var(--transition);
}
.has-custom-select.is-open .custom-select-trigger > i { transform: rotate(180deg); }
.custom-select-trigger.is-placeholder { color: var(--muted); }
.custom-select-trigger:disabled { color: var(--muted-light); cursor: not-allowed; }
.has-custom-select:has(.custom-select-trigger:disabled) { background: var(--surface-soft); opacity: .72; }
.has-custom-select .custom-select-trigger { padding-inline-start: 48px; }
.form-validation-control.has-custom-select .custom-select-trigger { padding-inline-end: 80px; }
.form-validation-control.has-custom-select .custom-select-trigger > i { inset-inline-end: 16px; }
.form-validation-control.has-custom-select > .form-validation-status {
  inset-inline-start: auto !important;
  inset-inline-end: 42px !important;
}
.form-validation-control.has-custom-select > .form-validation-status.is-invalid::after {
  inset-inline-start: auto !important;
  inset-inline-end: -8px !important;
}
.custom-select-compact {
  width: auto;
  min-height: 34px;
  height: 34px;
  border-radius: var(--radius-s);
  box-shadow: none;
}
.custom-select-compact .custom-select-trigger {
  min-height: 32px;
  padding-inline-start: 34px;
  font-size: .74rem;
}
.custom-select-compact > .custom-select-leading-icon {
  width: 34px;
  flex-basis: 34px;
  font-size: .72rem;
}
.custom-select-menu {
  --gap: var(--dropdown-gap);
  position: fixed;
  z-index: 10000;
  display: grid;
  align-content: start;
  gap: var(--gap);
  max-height: 320px;
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(46,22,35,.11);
  border-radius: var(--radius-m);
  background: var(--surface-solid);
  box-shadow: 0 22px 56px rgba(38,20,30,.18);
  color: var(--ink);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--brand-rgb),.28) transparent;
}
.custom-select-menu[hidden] { display: none !important; }
.custom-select-group-label {
  padding: 9px 10px 5px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.custom-select-option {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-s);
  outline: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: .76rem;
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.custom-select-option > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}
.custom-select-option:hover,
.custom-select-option:focus-visible { background: var(--brand-wash); color: var(--brand-text); }
.custom-select-option.is-selected { background: var(--brand-soft); color: var(--brand-deep); font-weight: 800; }
.custom-select-option:disabled { color: var(--muted-light); cursor: not-allowed; opacity: .62; }
.custom-select-option:disabled:hover { background: transparent; }
@media (max-width: 640px) {
  .custom-select-menu { border-radius: var(--radius-m); }
  .custom-select-option { min-height: 46px; }
}
.textarea-control { min-height: 126px; display: flex; align-items: flex-start; }
.textarea-control > i:first-child { padding-top: 17px; }
.textarea-control textarea { min-height: 124px; resize: vertical; padding: 15px; line-height: 1.65; }
.textarea-control > i:first-child + textarea { padding-inline-start: 0; }
.textarea-control:has(textarea[readonly]) { background: var(--surface-soft); }
.textarea-control textarea[readonly] { color: var(--muted); cursor: default; resize: none; }
.field-action { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 46px; border: 0; background: transparent; color: var(--muted); }
.field-action:hover { color: var(--brand-text); }
.color-control { padding: 6px 12px 6px 7px; gap: var(--gap); }
.color-control input[type="color"] { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; box-shadow: none; cursor: pointer; }
.color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border: 0; border-radius: 50%; }
.color-control input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-control input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.color-control span { flex: 1; color: var(--ink-soft); font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.color-control i { color: var(--brand-text); }
.choice-fieldset { display: grid; gap: var(--gap); margin: 0; padding: 0; border: 0; }
.choice-fieldset legend { margin-bottom: 8px; color: var(--ink-soft); font-size: .74rem; font-weight: 800; }
.choice-row { position: relative; min-height: 68px; display: flex; align-items: center; gap: var(--gap); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-soft); cursor: pointer; transition: all var(--transition); }
.choice-row:hover { border-color: rgba(var(--brand-rgb), .28); background: var(--brand-wash); }
.choice-row > input { position: absolute; opacity: 0; pointer-events: none; }
.choice-box { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 25px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-solid); color: transparent; transition: all var(--transition); }
.choice-row > input:checked + .choice-box { border-color: var(--brand-text); background: var(--brand-fill); color: var(--on-brand-fill); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .1); }
.choice-row > input[type="radio"] + .choice-box { border-radius: 50%; }
.choice-row > input[type="radio"]:checked + .choice-box::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-brand-fill); }
.choice-row:has(> input:disabled) { border-color: var(--line); background: var(--surface-soft); color: var(--muted); cursor: not-allowed; opacity: .72; }
.choice-row:has(> input:disabled):hover { border-color: var(--line); background: var(--surface-soft); }
.choice-row > input:disabled + .choice-box { border-color: var(--line-strong); background: var(--surface-soft); box-shadow: none; }
.choice-row > input:disabled:checked + .choice-box { border-color: var(--muted-light); background: var(--muted-light); color: var(--on-inverse); box-shadow: none; }
.choice-copy { display: grid; gap: 0; }
.choice-copy strong { color: var(--ink-soft); font-size: .77rem; }
.choice-copy small { color: var(--muted); font-size: .66rem; line-height: 1.4; }
.password-meter { width: 100%; height: 4px; display: block !important; overflow: hidden; border-radius: var(--radius-l); background: var(--line); }
.password-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--danger); transition: width 180ms ease, background 180ms ease; }
.password-meter i[data-level="medium"] { background: var(--warning); }
.password-meter i[data-level="strong"] { background: var(--success); }
.form-note { display: flex; align-items: flex-start; gap: var(--gap); padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--info) 24%, var(--line)); border-radius: var(--radius-m); background: var(--info-soft); color: var(--info); }
.form-note i { margin-top: 3px; color: var(--info); }
.form-note p { margin: 0; font-size: .72rem; line-height: 1.6; }
.form-note.success-note { border-color: color-mix(in srgb, var(--success) 28%, var(--line)); background: var(--success-soft); color: var(--success); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap); padding-top: 6px; }
.form-divider { height: 1px; margin: 6px 0; background: var(--line); }

/* Dropdowns keep a compact, shared internal rhythm independent of page layout spacing. */
:is(.language-dropdown, .auth-language-dropdown, .member-language-dropdown, .header-member-dropdown) {
  --gap: var(--dropdown-gap);
}

html[dir="rtl"] :is(.language-dropdown, .auth-language-dropdown, .member-language-dropdown, .header-member-dropdown, .theme-dropdown) {
  inset-inline-start: 0;
  inset-inline-end: auto;
  transform-origin: top left;
}

/* Shared frontend theme control */
.theme-menu { position: relative; flex: 0 0 auto; }
.theme-menu > summary {
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: 0;
  border: 1px solid var(--header-control-border-color);
  border-radius: var(--radius-m);
  background: var(--header-control-background);
  color: var(--header-control-color);
  box-shadow: var(--header-control-shadow);
  backdrop-filter: blur(18px);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.theme-menu > summary::-webkit-details-marker { display: none; }
.theme-menu > summary:hover { transform: translateY(-1px); border-color: var(--header-control-hover-border-color); background: var(--header-control-hover-background); }
.theme-menu > summary > i { color: var(--brand-text); }
.theme-dropdown {
  --gap: var(--dropdown-gap);
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 190px;
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface-solid);
  box-shadow: var(--shadow);
  transform-origin: top right;
  animation: languageMenuIn .18s ease both;
}
[dir="rtl"] .theme-dropdown { inset-inline-start: 0; inset-inline-end: auto; transform-origin: top left; }
.theme-dropdown button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--gap);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--font-size-label);
  font-weight: 800;
  text-align: start;
  transition: background var(--transition), color var(--transition);
}
.theme-dropdown button > i { width: 20px; flex: 0 0 20px; color: var(--brand-text); text-align: center; }
.theme-dropdown button:hover,
.theme-dropdown button[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-text); }

/* Shared frontend type roles */
:is(.public-page, .member-page, .member-auth-page) h1 { font-size: var(--font-size-heading); line-height: var(--line-height-heading); }
:is(.public-page, .member-page, .member-auth-page) :is(.hero-copy, .section-heading, .member-page-header, .auth-heading, .legal-page-heading, .statistics-heading) > p {
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-content);
}
:is(.public-page, .member-page, .member-auth-page) main { font-size: var(--font-size-content); }

html[data-theme-scope="frontend"][data-theme-resolved="dark"] .brand-lockup:not(.light) .brand-mark-text { color: var(--text); border-color: var(--line); }
html[data-theme-scope="frontend"][data-theme-resolved="dark"] .brand-lockup:not(.light) .brand-copy small { color: var(--muted); }

@media (max-width: 1280px) {
  :root { --site-title-size: var(--font-size-heading); }
}

@media (max-width: 1024px) {
  :root {
    --site-shell: min(760px, calc(100% - 36px));
    --site-shell-wide: min(760px, calc(100% - 24px));
    --site-shell-narrow: var(--site-shell-wide);
    --site-title-size: var(--font-size-heading);
  }
}

@media (max-width: 768px) {
  :root {
    --site-header-height: 88px;
    --site-title-size: var(--font-size-heading);
    --site-radius-hero: var(--radius-l);
    --site-radius-panel: var(--radius-l);
    --site-page-bottom: 72px;
  }
  .field-support { grid-template-columns: 1fr; gap: var(--gap); }
  .theme-dropdown { width: min(220px, calc(100vw - 28px)); }
}

@media (max-width: 640px) {
  :root {
    --site-shell: calc(100% - 28px);
    --site-shell-wide: calc(100% - 12px);
    --site-shell-narrow: var(--site-shell-wide);
  }
}

/* Accessibility and resilience contracts shared by every application surface. */
:where(.field-label, .field > small, .field-support > small, .notice, .button-link) { font-size: max(.75rem, 1em); }

.icons-unavailable :is(.public-auth-link, .site-footer-abuse) > i,
.icons-unavailable :is(.language-menu, .auth-language-menu, .theme-menu) > summary > i { display: none; }
.icons-unavailable .public-auth-link > span { display: inline !important; }
.icons-unavailable :is(.language-menu, .auth-language-menu) > summary { width: auto !important; padding-inline: 12px !important; }
.icons-unavailable .theme-menu > summary { width: auto; padding-inline: 12px; }
.icons-unavailable .theme-menu > summary [data-theme-current] {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@media (max-width: 768px) {
  :where(.icon-button, .theme-menu > summary) { min-width: 44px; min-height: 44px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(.surface-glass, .public-status, .hero-section, .theme-menu > summary, .language-menu > summary) {
    background: var(--surface-raised);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}