@font-face {
    font-family: "Noto Sans Thai";
    src: url("../fonts/NotoSansThai-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    /* Primitive palette: the single source of truth for brand colour. */
    --color-emerald-950: #043d30;
    --color-emerald-900: #055b43;
    --color-emerald-800: #066e50;
    --color-emerald-700: #07875f;
    --color-emerald-600: #0a9b6f;
    --color-emerald-500: #19b58a;
    --color-emerald-300: #83d9bd;
    --color-emerald-100: #dff4ec;
    --color-emerald-50: #edf9f5;
    --color-teal-700: #087b72;
    --color-teal-100: #def5f1;
    --color-navy-950: #111b22;
    --color-navy-900: #142a3a;
    --color-navy-800: #1b2831;
    --color-navy-700: #355263;
    --color-slate-700: #52635e;
    --color-slate-600: #65736f;
    --color-slate-500: #899691;
    --color-slate-300: #cbd9d3;
    --color-slate-200: #dee7e3;
    --color-slate-100: #edf3f0;
    --color-slate-50: #f5f8f7;
    --color-white: #ffffff;

    /* Semantic colour tokens. */
    --primary: var(--color-emerald-700);
    --primary-hover: var(--color-emerald-800);
    --primary-active: var(--color-emerald-900);
    --primary-light: var(--color-emerald-50);
    --primary-soft: #f4fbf8;
    --sidebar: #1b2831;
    --sidebar-deep: #111b22;
    --sidebar-hover: #263741;
    --sidebar-active: #087b5d;
    --sidebar-text: #d8e2df;
    --sidebar-strong: #f4f8f7;
    --sidebar-muted: #9aaba6;
    --sidebar-indicator: #83d9bd;
    --background: var(--color-slate-50);
    --surface: var(--color-white);
    --surface-subtle: #f9fbfa;
    --text-primary: var(--color-navy-900);
    --text-secondary: var(--color-slate-600);
    --text-muted: #667570;
    --border: var(--color-slate-200);
    --border-strong: var(--color-slate-300);
    --success: #138b61;
    --success-light: #e7f7f0;
    --warning: #c87418;
    --warning-light: #fff4e5;
    --danger: #c94545;
    --danger-hover: #ad3434;
    --danger-light: #feeeee;
    --info: #287da9;
    --info-light: #eaf5fb;
    --winner: #a66b09;
    --winner-light: #fff7df;
    --focus-ring: rgb(7 135 95 / 22%);
    --overlay: rgb(8 34 27 / 56%);
    --gradient-brand: linear-gradient(135deg, var(--color-emerald-800) 0%, var(--color-emerald-700) 54%, #0f8068 100%);
    --gradient-brand-hover: linear-gradient(135deg, var(--color-emerald-900) 0%, var(--color-emerald-800) 56%, #08745b 100%);
    --gradient-accent: linear-gradient(90deg, var(--color-emerald-700), var(--color-emerald-500) 58%, #65d7ae);
    --gradient-auth-background: linear-gradient(145deg, #edf7f3 0%, #fafcfb 52%, #eef4f6 100%);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --font-size-xs: 0.6875rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.9375rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2rem;
    --line-height-tight: 1.28;
    --line-height-body: 1.55;
    --line-height-relaxed: 1.68;
    --font-weight-medium: 550;
    --font-weight-semibold: 650;
    --font-weight-bold: 750;
    --font-weight-display: 800;

    --radius-control: 0.625rem;
    --radius-card: 1rem;
    --radius-panel: 1.125rem;
    --radius-modal: 1.375rem;
    --radius-round: 999px;
    --shadow-xs: 0 1px 2px rgb(20 42 58 / 5%);
    --shadow-card: 0 0.625rem 1.75rem rgb(20 42 58 / 6%), 0 1px 2px rgb(20 42 58 / 4%);
    --shadow-card-hover: 0 1rem 2.25rem rgb(20 42 58 / 9%), 0 2px 5px rgb(20 42 58 / 5%);
    --shadow-elevated: 0 1.5rem 4rem rgb(8 49 38 / 18%);
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-slow: 360ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --font-sans: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;

    /* Component tokens keep controls and surfaces consistent across pages. */
    --control-height: 2.875rem;
    --control-padding-x: 0.875rem;
    --control-border: var(--border-strong);
    --control-background: var(--surface);
    --control-focus-border: var(--primary);
    --control-focus-shadow: 0 0 0 4px var(--focus-ring);
    --button-height: 2.75rem;
    --button-padding-x: 1rem;
    --card-border: var(--border);
    --card-background: var(--surface);
    --card-radius: var(--radius-card);
    --card-shadow: var(--shadow-card);
    --auth-card-width: 29rem;
    --auth-card-padding: 2.375rem;
    --auth-control-height: 3.125rem;
    --sidebar-width: 16.75rem;
    --topbar-height: 5.25rem;
    --content-max-width: 96rem;
    --content-padding: clamp(1.25rem, 2.4vw, 2rem);
    --layout-background: radial-gradient(circle at 92% 2%, rgb(25 181 138 / 6%), transparent 28rem), linear-gradient(180deg, #f9fbfa 0, var(--background) 20rem);
    --sidebar-background: linear-gradient(165deg, var(--sidebar) 0%, #15262c 48%, var(--sidebar-deep) 100%);
    --topbar-background: rgb(255 255 255 / 88%);
    --topbar-shadow: 0 0.25rem 1.25rem rgb(20 42 58 / 4%);
    --table-head-background: linear-gradient(180deg, #f9fbfa 0%, #f3f7f5 100%);
    --table-row-hover: linear-gradient(90deg, var(--primary-soft), #fbfdfc);
    --form-section-background: linear-gradient(145deg, var(--surface) 0%, var(--surface-subtle) 100%);
    --modal-header-background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
    --modal-footer-background: rgb(255 255 255 / 96%);

    /* Compatibility aliases for existing components. */
    --green-900: #054c3b;
    --green-800: var(--primary-hover);
    --green-700: var(--primary);
    --green-100: var(--primary-light);
    --green-50: var(--primary-soft);
    --navy-900: var(--text-primary);
    --navy-700: #355263;
    --gray-900: #1e302c;
    --gray-700: var(--text-secondary);
    --gray-500: var(--text-muted);
    --gray-300: var(--border-strong);
    --gray-200: var(--border);
    --gray-100: #edf3f0;
    --gray-50: var(--background);
    --white: var(--surface);
    --orange-700: var(--warning);
    --orange-100: var(--warning-light);
    --red-700: var(--danger);
    --red-100: var(--danger-light);
    --shadow: var(--shadow-card);
    --radius-sm: var(--radius-control);
    --radius-md: var(--radius-card);
    --radius-lg: var(--radius-panel);

    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--background);
}

* { box-sizing: border-box; }
html { min-width: 20rem; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text-primary); background: var(--background); font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { color: var(--primary-hover); }
::selection { color: var(--surface); background: var(--primary); }
::placeholder { color: var(--text-muted); opacity: 1; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.auth-page { position: relative; display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; overflow: hidden; padding: var(--space-6); background: radial-gradient(circle at 12% 14%, rgb(7 135 95 / 11%), transparent 25rem), radial-gradient(circle at 88% 82%, rgb(8 123 114 / 8%), transparent 30rem), var(--gradient-auth-background); isolation: isolate; }
.auth-page::before { position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(rgb(7 135 95 / 18%) 0.7px, transparent 0.7px); background-size: 1.5rem 1.5rem; content: ""; opacity: 0.15; pointer-events: none; }
.auth-page::after { position: fixed; top: 50%; left: 50%; z-index: -1; width: min(44rem, 88vw); height: min(44rem, 88vw); border: 1px solid rgb(7 135 95 / 7%); border-radius: 42% 58% 55% 45%; background: radial-gradient(circle at 50% 44%, rgb(255 255 255 / 88%), rgb(255 255 255 / 24%) 58%, transparent 72%); content: ""; pointer-events: none; transform: translate(-50%, -50%) rotate(-8deg); }
.auth-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.auth-ambient span { position: absolute; display: block; border: 1px solid rgb(7 135 95 / 10%); border-radius: 50%; background: rgb(255 255 255 / 32%); box-shadow: inset 0 0 3rem rgb(7 135 95 / 4%), 0 1.5rem 4rem rgb(20 60 48 / 3%); }
.auth-ambient span:nth-child(1) { top: -7rem; left: -6rem; width: 22rem; height: 22rem; }
.auth-ambient span:nth-child(2) { right: -8rem; bottom: -10rem; width: 30rem; height: 30rem; }
.auth-ambient span:nth-child(3) { top: 15%; right: 11%; width: 5.25rem; height: 5.25rem; border-color: rgb(8 123 114 / 10%); background: linear-gradient(145deg, rgb(255 255 255 / 42%), rgb(223 244 236 / 24%)); }
.auth-card { position: relative; z-index: 1; width: min(var(--auth-card-width), 100%); overflow: hidden; border: 1px solid rgb(255 255 255 / 92%); border-radius: 1.5rem; padding: var(--auth-card-padding); background: rgb(255 255 255 / 95%); box-shadow: 0 2rem 5.5rem rgb(20 60 48 / 13%), 0 0.5rem 1.5rem rgb(20 42 58 / 5%), 0 0 0 1px rgb(7 92 71 / 7%); backdrop-filter: blur(1rem) saturate(125%); animation: auth-enter var(--motion-slow) var(--ease-standard) both; isolation: isolate; }
.auth-card::before { position: absolute; inset: 0 0 auto; height: 0.25rem; background: var(--gradient-accent); content: ""; }
.auth-card::after { position: absolute; inset: 0.5rem; z-index: 0; border: 1px solid rgb(7 135 95 / 5%); border-radius: 1.125rem; content: ""; pointer-events: none; }
.auth-card > * { position: relative; z-index: 1; }
.auth-card-wide { width: min(35rem, 100%); }
.auth-brand { position: relative; display: flex; align-items: center; flex-direction: column; gap: var(--space-2); border-bottom: 1px solid var(--border); margin: -0.25rem 0 var(--space-8); padding-bottom: var(--space-5); text-align: center; }
.auth-brand::after { position: absolute; bottom: -1px; left: 50%; width: 4rem; height: 1px; background: linear-gradient(90deg, transparent, var(--color-emerald-500), transparent); content: ""; transform: translateX(-50%); }
.brand-logo { display: block; max-width: 100%; height: auto; object-fit: contain; }
.brand-logo-auth { width: 9.75rem; }
.brand-caption { color: var(--text-muted); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.12em; }
.auth-copy { margin-bottom: var(--space-6); }
.auth-chip { display: inline-flex; min-height: 1.75rem; align-items: center; gap: 0.4rem; border: 1px solid #cce9de; border-radius: var(--radius-round); padding: 0.25rem 0.625rem; color: var(--primary-hover); background: linear-gradient(135deg, var(--primary-light), var(--color-teal-100)); font-size: 0.7rem; font-weight: var(--font-weight-bold); letter-spacing: 0.025em; box-shadow: inset 0 1px rgb(255 255 255 / 70%); }
.auth-chip > span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0.2rem rgb(19 139 97 / 12%); }
.eyebrow { margin: var(--space-5) 0 var(--space-1); color: var(--primary); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.1em; }
.auth-card h1 { margin: 0; color: var(--text-primary); font-size: clamp(1.65rem, 5vw, var(--font-size-3xl)); font-weight: var(--font-weight-display); letter-spacing: -0.025em; line-height: var(--line-height-tight); }
.auth-description { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: 0.92rem; line-height: var(--line-height-relaxed); }
.stack-form { display: grid; gap: 0.7rem; }
.stack-form label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-top: 0.35rem; color: var(--text-primary); font-size: 0.88rem; font-weight: 750; }
.stack-form label small { color: var(--text-muted); font-size: 0.69rem; font-weight: 550; }
.auth-form input { min-height: var(--auth-control-height); border-color: #c8d8d2; background: linear-gradient(180deg, #ffffff, #fbfdfc); box-shadow: inset 0 1px rgb(20 42 58 / 2%), var(--shadow-xs); }
.auth-form input:hover { border-color: #9ab9ae; }
.auth-form input:focus { border-color: var(--primary); background: var(--surface); box-shadow: var(--control-focus-shadow), 0 0.5rem 1.25rem rgb(7 135 95 / 7%); }
input, select, textarea { width: 100%; min-height: var(--control-height); border: 1px solid var(--control-border); border-radius: var(--radius-control); padding: 0.6875rem var(--control-padding-x); color: var(--text-primary); background: var(--control-background); box-shadow: var(--shadow-xs); transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
textarea { resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: #9ab9ae; }
input:focus, select:focus, textarea:focus { border-color: var(--control-focus-border); outline: 0; box-shadow: var(--control-focus-shadow); }
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.56; background: var(--gray-100); }
.button { display: inline-flex; min-height: var(--button-height); align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-control); padding: 0.625rem var(--button-padding-x); cursor: pointer; font-weight: var(--font-weight-bold); line-height: 1.25; text-decoration: none; box-shadow: var(--shadow-xs); transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); box-shadow: none; }
.button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.48; pointer-events: none; transform: none; box-shadow: none; }
.button-primary { border-color: rgb(4 91 67 / 20%); color: var(--surface); background: linear-gradient(135deg, var(--primary-hover), var(--primary)); box-shadow: 0 0.375rem 0.875rem rgb(7 135 95 / 18%), inset 0 1px rgb(255 255 255 / 12%); }
.button-primary:hover { color: var(--surface); background: linear-gradient(135deg, var(--primary-active), var(--primary-hover)); box-shadow: 0 0.5rem 1rem rgb(7 135 95 / 23%), inset 0 1px rgb(255 255 255 / 10%); }
.button-primary:active { background: var(--primary-active); }
.auth-form .button-primary { position: relative; min-height: var(--auth-control-height); overflow: hidden; border-color: rgb(4 91 67 / 24%); background: var(--gradient-brand); box-shadow: 0 0.625rem 1.375rem rgb(7 135 95 / 22%), inset 0 1px rgb(255 255 255 / 18%); letter-spacing: 0.01em; }
.auth-form .button-primary::before { position: absolute; inset: 0 auto 0 -45%; width: 34%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 20%), transparent); content: ""; pointer-events: none; transform: skewX(-18deg); transition: left var(--motion-slow) var(--ease-standard); }
.auth-form .button-primary:hover { background: var(--gradient-brand-hover); box-shadow: 0 0.75rem 1.65rem rgb(7 135 95 / 27%), inset 0 1px rgb(255 255 255 / 16%); transform: translateY(-2px); }
.auth-form .button-primary:hover::before { left: 112%; }
.auth-form .button-primary:focus-visible { outline-color: rgb(7 135 95 / 32%); outline-offset: 3px; }
.auth-form .button-primary:active { box-shadow: 0 0.3rem 0.8rem rgb(7 135 95 / 18%); transform: translateY(0); }
.button-secondary { border-color: var(--border-strong); color: var(--text-primary); background: linear-gradient(180deg, var(--surface), var(--surface-subtle)); }
.button-secondary:hover { border-color: #9fc8b8; color: var(--primary-hover); background: var(--primary-soft); box-shadow: 0 0.35rem 0.875rem rgb(20 42 58 / 7%); }
.button-test-send { border-color: #a8ddd5; color: var(--color-teal-700); background: var(--color-teal-100); box-shadow: 0 0.25rem 0.75rem rgb(8 123 114 / 10%); }
.button-test-send:hover { border-color: var(--color-teal-700); color: var(--color-emerald-950); background: #cef0e9; box-shadow: 0 0.4rem 0.9rem rgb(8 123 114 / 15%); }
.button-block { width: 100%; margin-top: 0.75rem; }
.setup-hint { margin: var(--space-5) 0 0; color: var(--text-secondary); text-align: center; font-size: 0.84rem; }
.auth-footer { display: flex; align-items: center; justify-content: center; gap: 0.45rem; border-top: 1px solid var(--border); margin: var(--space-6) 0 -0.35rem; padding-top: var(--space-4); color: var(--text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; }
.auth-security-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--success); }
.alert { margin: var(--space-4) 0; border: 1px solid transparent; border-radius: var(--radius-control); padding: 0.8125rem 0.9375rem; font-size: 0.9rem; font-weight: 550; }
.alert-error { border-color: #f5caca; color: #a93232; background: var(--danger-light); }
.alert-warning { border-color: #f1d4aa; color: #9a570f; background: var(--warning-light); }
.alert-success { border-color: #bce5d4; color: #096b48; background: var(--success-light); }
.skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 100; border-radius: var(--radius-control); padding: 0.7rem 1rem; color: var(--surface); background: var(--text-primary); box-shadow: var(--shadow-elevated); font-weight: 750; text-decoration: none; transform: translateY(-180%); transition: transform var(--motion-fast) var(--ease-standard); }
.skip-link:focus { transform: translateY(0); }

.admin-page { background: var(--background); }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar-width); flex-direction: column; overflow: hidden; border-right: 1px solid rgb(255 255 255 / 5%); color: var(--sidebar-text); background: var(--sidebar-background); box-shadow: 0.75rem 0 2.25rem rgb(17 27 34 / 13%); }
.sidebar::before { position: absolute; inset: 0; background: linear-gradient(135deg, rgb(25 181 138 / 4%), transparent 38%); content: ""; pointer-events: none; }
.sidebar::after { position: absolute; right: -5rem; bottom: 4rem; width: 12rem; height: 12rem; border: 1px solid rgb(131 217 189 / 8%); border-radius: 50%; background: radial-gradient(circle, rgb(25 181 138 / 5%), transparent 68%); content: ""; pointer-events: none; }
.sidebar-brand { position: relative; z-index: 1; display: flex; min-height: 7.75rem; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-1); border-bottom: 1px solid rgb(222 231 227 / 92%); padding: var(--space-3) var(--space-4); color: var(--text-primary); background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%); box-shadow: 0 0.5rem 1.5rem rgb(10 36 29 / 8%); text-align: center; text-decoration: none; }
.sidebar-brand::after { position: absolute; inset: auto 22% -1px; height: 1px; background: linear-gradient(90deg, transparent, rgb(7 135 95 / 35%), transparent); content: ""; }
.brand-logo-sidebar { width: 8.5rem; }
.sidebar-brand-caption { color: var(--text-muted); font-size: 0.62rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.045em; }
.sidebar-nav { position: relative; z-index: 1; display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4) var(--space-3); overflow-y: auto; scrollbar-color: rgb(255 255 255 / 20%) transparent; }
.sidebar-section-label { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); color: var(--sidebar-muted); font-size: 0.625rem; font-weight: var(--font-weight-display); letter-spacing: 0.11em; text-transform: uppercase; }
.sidebar-nav a, .sidebar-logout button { position: relative; display: flex; width: 100%; min-height: 3rem; align-items: center; gap: 0.875rem; border: 0; border-radius: 0.75rem; padding: 0.625rem var(--space-3); color: var(--sidebar-text); background: transparent; cursor: pointer; font: inherit; text-align: left; text-decoration: none; transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.sidebar-nav a:hover, .sidebar-logout button:hover { color: var(--sidebar-strong); background: var(--sidebar-hover); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%); transform: translateX(0.125rem); }
.sidebar-nav a.active { color: var(--surface); background: linear-gradient(135deg, var(--sidebar-active), #076b57); box-shadow: 0 0.625rem 1.375rem rgb(3 32 25 / 25%), inset 0 1px rgb(255 255 255 / 10%); font-weight: var(--font-weight-bold); }
.sidebar-nav a.active::before { position: absolute; inset: 0.6875rem auto 0.6875rem 0; width: 0.1875rem; border-radius: 0 99px 99px 0; background: var(--sidebar-indicator); box-shadow: 0 0 0.75rem rgb(131 217 189 / 42%); content: ""; }
.sidebar-nav a:focus-visible, .sidebar-logout button:focus-visible { outline-color: var(--sidebar-indicator); }
.nav-icon { display: block; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; opacity: 0.82; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active .nav-icon, .sidebar-nav a:hover .nav-icon, .sidebar-logout button:hover .nav-icon { opacity: 1; }
.sidebar-logout { position: relative; z-index: 1; margin-top: auto; border-top: 1px solid rgb(255 255 255 / 9%); padding: var(--space-3); background: rgb(8 20 25 / 16%); }
.sidebar-logout button { color: var(--sidebar-text); }
.main-column { min-height: 100vh; margin-left: var(--sidebar-width); background: var(--layout-background); }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; min-height: var(--topbar-height); align-items: center; gap: var(--space-4); border-bottom: 1px solid rgb(222 231 227 / 82%); padding: 0 var(--content-padding); background: var(--topbar-background); box-shadow: var(--topbar-shadow); -webkit-backdrop-filter: blur(1rem) saturate(145%); backdrop-filter: blur(1rem) saturate(145%); }
.icon-button.menu-toggle { display: none; }
.icon-button { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text-primary); background: var(--surface); box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.icon-button:hover { border-color: #b7d5ca; color: var(--primary); background: var(--primary-soft); }
.icon-button:active { box-shadow: none; transform: translateY(1px); }
.icon-button svg { width: 1.25rem; height: 1.25rem; }
.topbar-context { display: grid; min-width: 0; gap: 0.0625rem; }
.topbar-eyebrow { margin: 0; color: var(--primary); font-size: 0.6rem; font-weight: var(--font-weight-display); letter-spacing: 0.12em; }
.breadcrumb { display: flex; align-items: center; gap: 0.45rem; overflow: hidden; color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.breadcrumb span[aria-hidden="true"] { color: var(--border-strong); }
.breadcrumb strong { overflow: hidden; color: var(--text-primary); font-size: 0.84rem; font-weight: var(--font-weight-bold); text-overflow: ellipsis; }
.admin-identity { display: flex; min-height: 2.875rem; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-card); margin-left: auto; padding: 0.3rem 0.65rem 0.3rem 0.35rem; background: rgb(255 255 255 / 86%); box-shadow: var(--shadow-xs); transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.admin-identity:hover { border-color: #c4d8d0; box-shadow: 0 0.35rem 1rem rgb(20 42 58 / 6%); }
.admin-identity strong, .admin-identity small { display: block; }
.admin-identity strong { color: var(--text-primary); font-size: 0.78rem; font-weight: var(--font-weight-bold); }
.admin-identity small { margin-top: 0.05rem; color: var(--text-muted); font-size: 0.65rem; }
.admin-identity small i { display: inline-block; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0.15rem var(--success-light); }
.admin-avatar { display: grid; width: 2.125rem; height: 2.125rem; flex: 0 0 auto; place-items: center; border: 1px solid #c5e9dc; border-radius: 0.68rem; color: var(--primary-hover); background: linear-gradient(145deg, var(--primary-light), #dff3eb); font-size: 0.82rem; font-weight: var(--font-weight-display); }
.main-content { width: min(100%, var(--content-max-width)); margin: 0 auto; padding: var(--content-padding); }
.page-heading { position: relative; display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-2); }
.page-heading::after { position: absolute; bottom: 0; left: 0; width: 2.75rem; height: 0.1875rem; border-radius: var(--radius-round); background: var(--gradient-accent); content: ""; }
.page-heading .eyebrow { margin: 0 0 0.15rem; color: var(--primary-hover); font-size: 0.64rem; }
.page-heading h1 { margin: 0; color: var(--navy-900); font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: var(--font-weight-display); letter-spacing: -0.025em; line-height: var(--line-height-tight); }
.panel, .kpi-card { border: 1px solid var(--card-border); border-radius: var(--card-radius); background: linear-gradient(180deg, var(--card-background) 0%, #fefefe 100%); box-shadow: var(--card-shadow); }
.welcome-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.welcome-panel .eyebrow { margin-top: 0; }
.welcome-panel h2, .empty-panel h2 { margin: 0; color: var(--navy-900); }
.welcome-panel p:last-child, .empty-panel p { margin: 0.35rem 0 0; color: var(--gray-700); }
.live-badge { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; padding: 0.4rem 0.65rem; color: var(--green-900); background: var(--green-100); font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #12a36d; box-shadow: 0 0 0 0.2rem rgb(18 163 109 / 16%); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.kpi-card { --kpi-accent: var(--primary); --kpi-soft: var(--primary-light); position: relative; display: grid; min-height: 9.75rem; align-content: space-between; overflow: hidden; border-color: color-mix(in srgb, var(--kpi-accent) 14%, var(--border)); padding: var(--space-5); background: linear-gradient(145deg, var(--surface) 0%, color-mix(in srgb, var(--kpi-soft) 42%, var(--surface)) 100%); transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.kpi-card::before { position: absolute; inset: 0 auto 0 0; width: 0.1875rem; background: linear-gradient(180deg, var(--kpi-accent), color-mix(in srgb, var(--kpi-accent) 30%, transparent)); content: ""; opacity: 0.9; }
.kpi-card::after { position: absolute; inset: auto -2.75rem -3.75rem auto; width: 8rem; height: 8rem; border: 1px solid color-mix(in srgb, var(--kpi-accent) 10%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kpi-accent) 7%, transparent), transparent 68%); content: ""; pointer-events: none; }
.kpi-card:hover { border-color: color-mix(in srgb, var(--kpi-accent) 25%, var(--border)); box-shadow: var(--shadow-card-hover); transform: translateY(-0.125rem); }
.kpi-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.kpi-label, .kpi-unit { color: var(--text-secondary); }
.kpi-label { max-width: 12rem; font-size: 0.8rem; font-weight: var(--font-weight-bold); line-height: 1.45; }
.kpi-icon { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--kpi-accent) 18%, transparent); border-radius: 0.8rem; color: var(--kpi-accent); background: var(--kpi-soft); box-shadow: inset 0 1px rgb(255 255 255 / 70%), 0 0.375rem 0.875rem color-mix(in srgb, var(--kpi-accent) 9%, transparent); }
.kpi-icon svg { width: 1.3rem; height: 1.3rem; }
.kpi-card strong { position: relative; z-index: 1; color: var(--text-primary); font-size: clamp(1.85rem, 3vw, 2.35rem); font-weight: var(--font-weight-display); font-variant-numeric: tabular-nums; line-height: 1.08; letter-spacing: -0.045em; }
.kpi-unit { position: relative; z-index: 1; font-size: 0.7rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; }
.kpi-tone-primary { --kpi-accent: var(--primary); --kpi-soft: var(--primary-light); }
.kpi-tone-success { --kpi-accent: var(--success); --kpi-soft: var(--success-light); }
.kpi-tone-danger { --kpi-accent: var(--danger); --kpi-soft: var(--danger-light); }
.kpi-tone-info { --kpi-accent: var(--info); --kpi-soft: var(--info-light); }
.kpi-tone-warning { --kpi-accent: var(--warning); --kpi-soft: var(--warning-light); }
.kpi-tone-winner { --kpi-accent: var(--winner); --kpi-soft: var(--winner-light); }
.kpi-tone-active { --kpi-accent: var(--color-teal-700); --kpi-soft: var(--color-teal-100); }
.kpi-tone-time { --kpi-accent: #536b7d; --kpi-soft: #edf2f5; }
.is-skeleton { background: linear-gradient(100deg, var(--white), var(--gray-50), var(--white)); }
.empty-panel { display: grid; min-height: 22rem; place-items: center; align-content: center; padding: 2rem; text-align: center; }
.empty-icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; margin-bottom: 1rem; border-radius: 50%; color: var(--green-700); background: var(--green-100); font-size: 1.5rem; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 25; background: rgb(10 31 25 / 52%); }
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; }
.toast { min-width: 16rem; max-width: 24rem; margin-top: 0.5rem; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-control); padding: 0.8rem 1rem; color: var(--text-primary); background: var(--surface); box-shadow: var(--shadow-elevated); animation: toast-enter var(--motion-base) var(--ease-standard) both; }
.toast-error { border-left-color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.dashboard-control-panel { position: relative; min-height: 4.75rem; overflow: hidden; border-color: #d6e5df; padding: var(--space-3) var(--space-4); background: linear-gradient(135deg, rgb(255 255 255 / 98%), rgb(244 251 248 / 92%)); }
.dashboard-control-panel::after { position: absolute; top: -3rem; left: 20%; width: 12rem; height: 7rem; border-radius: 50%; background: rgb(25 181 138 / 5%); content: ""; filter: blur(1.5rem); pointer-events: none; }
.live-status { position: relative; z-index: 1; display: inline-flex; min-height: 2.5rem; align-items: center; gap: 0.5rem; border: 1px solid #cce9de; border-radius: var(--radius-round); padding: 0.35rem 0.75rem; color: var(--text-secondary); background: rgb(255 255 255 / 75%); box-shadow: inset 0 1px rgb(255 255 255 / 72%); font-size: 0.76rem; }
.live-status strong { color: var(--primary); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.live-status.has-error .live-dot { background: var(--red-700); box-shadow: 0 0 0 0.2rem rgb(180 35 24 / 14%); }
.live-status.has-error strong { color: var(--red-700); }
.toolbar-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-2); }
.toolbar-actions select { min-width: 16rem; min-height: 2.625rem; border-color: #cdded7; background-color: rgb(255 255 255 / 92%); }
.button-with-icon { gap: var(--space-2); }
.button-with-icon svg { width: 1rem; height: 1rem; transition: transform var(--motion-fast) var(--ease-standard); }
.button-with-icon:hover svg { transform: rotate(-18deg); }
.button[aria-busy="true"] svg { animation: refresh-spin 700ms linear infinite; }
.dashboard-error { margin: 0 0 var(--space-4); box-shadow: var(--shadow-xs); }
.kpi-grid-eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-card.skeleton strong { width: 55%; min-height: 2.4rem; border-radius: var(--radius-control); color: transparent; background: linear-gradient(100deg, var(--gray-100) 20%, #f8fbfa 42%, var(--gray-100) 64%); background-size: 220% 100%; animation: skeleton-shift 1.2s linear infinite; }
.kpi-card.skeleton .kpi-icon { color: transparent; background: var(--gray-100); }
.kpi-card .kpi-date { max-width: 14rem; font-size: 0.9rem; line-height: 1.5; letter-spacing: 0; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.chart-card { position: relative; min-width: 0; overflow: hidden; padding: var(--space-5); transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.chart-card::after { position: absolute; inset: auto -3rem -4rem auto; width: 10rem; height: 10rem; border-radius: 50%; background: radial-gradient(circle, rgb(7 135 95 / 4%), transparent 68%); content: ""; pointer-events: none; }
.chart-card:hover { border-color: #c5dbd3; box-shadow: var(--shadow-card-hover); transform: translateY(-0.125rem); }
.chart-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); padding-bottom: var(--space-4); }
.chart-heading > span { width: 2.25rem; height: 0.25rem; flex: 0 0 auto; border-radius: var(--radius-round); margin-top: 0.4rem; background: var(--gradient-accent); box-shadow: 0 0.25rem 0.75rem rgb(7 135 95 / 15%); }
.chart-card h2 { margin: 0; color: var(--text-primary); font-size: 0.95rem; font-weight: var(--font-weight-bold); }
.chart-card header p, .chart-empty { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.74rem; }
.chart-canvas { position: relative; z-index: 1; height: 18rem; }
.chart-empty { position: relative; z-index: 1; display: grid; min-height: 18rem; place-items: center; align-content: center; gap: var(--space-3); border: 1px dashed #ceded8; border-radius: var(--radius-card); padding: var(--space-6); background: radial-gradient(circle at 50% 42%, rgb(25 181 138 / 7%), transparent 7rem), var(--surface-subtle); text-align: center; }
.chart-empty::before { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid #cfe8df; border-radius: 50%; color: var(--primary); background: var(--primary-light); content: "—"; font-size: 1.25rem; font-weight: var(--font-weight-bold); }
.chart-empty[hidden] { display: none; }
.management-toolbar { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.management-toolbar p { max-width: 54rem; margin: 0; color: var(--gray-700); font-size: 0.9rem; line-height: var(--line-height-relaxed); }
.management-toolbar > .button { white-space: nowrap; }
.table-panel { position: relative; overflow: hidden; border-color: #d8e5e0; }
.table-scroll { overflow: auto; overscroll-behavior-inline: contain; scrollbar-color: #b9cbc4 transparent; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; color: var(--text-primary); background: var(--surface); font-size: 0.84rem; line-height: 1.5; }
th, td { border-bottom: 1px solid var(--border); padding: 0.9375rem 1rem; text-align: left; vertical-align: middle; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 2; color: #496059; background: var(--table-head-background); box-shadow: inset 0 -1px var(--border); font-size: 0.72rem; font-weight: var(--font-weight-display); letter-spacing: 0.045em; text-transform: none; }
tbody tr { transition: background-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
tbody tr:hover { background: var(--table-row-hover); box-shadow: inset 0.1875rem 0 var(--primary); }
tbody tr:focus-within { background: var(--primary-soft); box-shadow: inset 0.1875rem 0 var(--primary); }
tbody tr:last-child td { border-bottom: 0; }
.table-empty { height: 10rem; color: var(--gray-500); background: radial-gradient(circle at 50% 48%, rgb(7 135 95 / 5%), transparent 8rem), var(--surface-subtle); text-align: center; }
.cell-strong { color: var(--navy-900); font-weight: 800; }
.cell-muted { color: var(--gray-700); font-size: 0.78rem; }
.mono-text { color: var(--gray-700); font: 0.76rem/1.4 ui-monospace, monospace; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.table-action, .link-button { min-height: 2.375rem; border: 0; border-radius: var(--radius-control); padding: 0.375rem 0.55rem; color: var(--primary); background: transparent; cursor: pointer; font-weight: var(--font-weight-bold); transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.table-action:hover, .link-button:hover { color: var(--primary-hover); background: var(--primary-light); }
.table-action-danger { color: var(--danger); }
.table-action-danger:hover { color: var(--danger-hover); background: var(--danger-light); }
.table-action:disabled, .link-button:disabled { cursor: not-allowed; opacity: 0.45; }
.link-button { text-align: left; }
.badge { display: inline-flex; min-height: 1.625rem; align-items: center; gap: 0.35rem; border: 1px solid transparent; border-radius: var(--radius-round); padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: var(--font-weight-bold); line-height: 1.2; box-shadow: inset 0 1px rgb(255 255 255 / 55%); }
.badge::before { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; content: ""; opacity: 0.78; }
.badge-success { border-color: #c5eadb; color: #08704c; background: var(--success-light); }
.badge-danger { border-color: #f5cdcd; color: #ae3636; background: var(--danger-light); }
.badge-warning { border-color: #f3dbaf; color: #9b5d12; background: var(--warning-light); }
.badge-info { border-color: #c8e3f0; color: #1f668d; background: var(--info-light); }
.badge-choice { border-color: #bfe6dc; color: var(--color-teal-700); background: var(--color-teal-100); }
.badge-neutral { border-color: var(--border); color: var(--text-secondary); background: var(--gray-100); }
.button-danger { color: var(--surface); background: var(--danger); box-shadow: 0 0.375rem 0.875rem rgb(201 69 69 / 16%); }
.button-danger:hover { color: var(--surface); background: var(--danger-hover); }
.modal, .drawer { border: 0; padding: 0; color: var(--gray-900); background: transparent; }
.modal::backdrop, .drawer::backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal { width: min(50rem, calc(100% - 2rem)); }
.modal-small { width: min(28rem, calc(100% - 2rem)); }
.modal-card, .drawer-card { border: 1px solid rgb(255 255 255 / 72%); border-radius: var(--radius-modal); background: var(--surface); box-shadow: var(--shadow-elevated); }
.modal-card { display: flex; max-height: calc(100dvh - 2rem); flex-direction: column; overflow: hidden; }
.drawer-card { display: flex; flex-direction: column; overflow: hidden; }
.modal[open] .modal-card { animation: modal-enter var(--motion-base) var(--ease-standard) both; }
.drawer[open] .drawer-card { animation: drawer-enter var(--motion-base) var(--ease-standard) both; }
.modal-card > header, .modal-card > footer, .drawer-card > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.modal-card > header, .drawer-card > header { border-bottom: 1px solid var(--gray-200); background: var(--modal-header-background); }
.modal-card > footer { position: sticky; bottom: 0; z-index: 2; justify-content: flex-end; border-top: 1px solid var(--gray-200); background: var(--modal-footer-background); box-shadow: 0 -0.5rem 1.25rem rgb(20 42 58 / 4%); -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); }
.modal-card > header h2, .drawer-card > header h2 { margin: 0; color: var(--navy-900); font-size: 1.15rem; font-weight: var(--font-weight-display); line-height: var(--line-height-tight); }
.modal-card > header .eyebrow, .drawer-card > header .eyebrow { margin: 0 0 var(--space-1); }
.modal-card > p { margin: var(--space-5); color: var(--text-secondary); line-height: var(--line-height-relaxed); }
.modal-card > label { display: grid; gap: var(--space-2); margin: var(--space-5); color: var(--text-primary); font-size: 0.84rem; font-weight: var(--font-weight-bold); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-height: 65vh; overflow: auto; padding: var(--space-5); background: #fbfdfc; scrollbar-color: #b9cbc4 transparent; }
.form-grid label { display: grid; align-content: start; gap: 0.4rem; color: var(--text-primary); font-size: 0.84rem; font-weight: var(--font-weight-bold); }
.form-grid label small { color: var(--gray-500); font-size: 0.7rem; font-weight: var(--font-weight-medium); line-height: 1.5; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .full { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); background: var(--form-section-background); box-shadow: var(--shadow-xs); }
.event-answer-section { min-width: 0; margin: 0; }
.event-answer-section > legend { padding: 0 var(--space-2); color: var(--text-primary); font-size: 0.84rem; font-weight: var(--font-weight-bold); }
.answer-mode-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.answer-mode-control > label { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-3); background: var(--surface); cursor: pointer; transition: border-color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast); }
.answer-mode-control > label:has(input:checked) { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 3px var(--focus-ring); }
.answer-mode-control input { width: 1.1rem; min-height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--primary); box-shadow: none; }
.answer-mode-control span { display: grid; min-width: 0; gap: var(--space-1); }
.answer-mode-control strong { color: var(--text-primary); font-size: 0.82rem; }
.answer-mode-control small { color: var(--text-secondary); font-size: 0.7rem; font-weight: var(--font-weight-medium); line-height: 1.45; }
.answer-question, [data-text-answer] { margin-top: var(--space-4); }
.event-choice-fields { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.event-choice-fields[hidden], .answer-question[hidden], [data-text-answer][hidden], .event-detail-choices[hidden], .event-choice-lock[hidden], .event-detail-campaign-actions[hidden] { display: none !important; }
.event-choice-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.event-choice-heading > div { display: grid; gap: var(--space-1); }
.event-choice-heading strong { color: var(--text-primary); font-size: 0.82rem; }
.event-choice-heading small { color: var(--text-secondary); font-size: 0.7rem; font-weight: var(--font-weight-medium); }
.button-small { min-height: 2.35rem; padding: 0.45rem 0.75rem; font-size: 0.74rem; }
.event-choice-list { display: grid; gap: var(--space-2); }
.event-choice-row { display: grid; grid-template-columns: 5.5rem minmax(12rem, 1fr) 7.5rem 2.75rem; align-items: end; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-3); background: var(--surface); }
.event-choice-row label { font-size: 0.72rem; }
.event-choice-row input { min-width: 0; }
.event-choice-correct { min-height: var(--control-height); display: flex !important; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-3); white-space: nowrap; }
.event-choice-correct input { width: 1rem; min-height: 1rem; margin: 0; accent-color: var(--primary); box-shadow: none; }
.event-choice-remove { width: 2.75rem; height: var(--control-height); color: var(--danger); }
.event-choice-lock { margin: var(--space-3) 0 0; border-left: 3px solid var(--warning); padding: var(--space-2) var(--space-3); color: #7d5419; background: var(--warning-light); font-size: 0.74rem; font-weight: var(--font-weight-semibold); line-height: 1.55; }
.checkbox-field { display: flex !important; min-height: var(--control-height); align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0.625rem 0.75rem; background: var(--surface); font-weight: var(--font-weight-semibold) !important; }
.checkbox-field:hover { border-color: #9fc8b8; background: var(--primary-soft); }
.checkbox-field input { width: 1.125rem; min-height: 1.125rem; margin: 0; accent-color: var(--green-700); box-shadow: none; }
.filter-panel { margin-bottom: var(--space-4); border-color: #d7e5df; padding: var(--space-4); background: linear-gradient(145deg, var(--surface) 0%, #f7fbf9 100%); }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.filter-grid label { display: grid; align-content: start; gap: 0.35rem; color: var(--gray-700); font-size: 0.76rem; font-weight: var(--font-weight-bold); }
.filter-grid input, .filter-grid select { background-color: var(--surface); }
.filter-actions { display: flex; justify-content: flex-end; gap: var(--space-2); border-top: 1px solid var(--border); margin-top: var(--space-4); padding-top: var(--space-4); }
.table-summary { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--gray-200); padding: 0.75rem 1rem; color: var(--gray-700); background: #fbfdfc; font-size: 0.78rem; }
.table-summary strong { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.participant-cell { display: flex; align-items: center; gap: 0.5rem; }
.participant-cell img, .profile-placeholder { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.profile-placeholder { display: grid; place-items: center; color: var(--green-900); background: var(--green-100); font-weight: 800; }
.pagination { display: flex; min-height: 3.75rem; align-items: center; justify-content: flex-end; gap: var(--space-1); border-top: 1px solid var(--gray-200); padding: var(--space-3) var(--space-4); background: #fbfdfc; }
.pagination button { min-width: 2.5rem; min-height: 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--text-primary); background: var(--surface); cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-fast); }
.pagination button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.pagination button[aria-current="page"] { border-color: var(--primary); color: var(--surface); background: var(--primary); box-shadow: 0 0.35rem 0.75rem rgb(7 135 95 / 18%); }
.pagination button:disabled { cursor: not-allowed; opacity: 0.45; }
.drawer { width: min(30rem, 100%); height: 100%; max-height: 100%; margin: 0 0 0 auto; }
.drawer-card { min-height: 100%; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.detail-list { display: grid; grid-template-columns: 9rem minmax(0, 1fr); margin: 0; overflow-y: auto; padding: var(--space-5); background: #fbfdfc; }
.detail-list dt, .detail-list dd { margin: 0; border-bottom: 1px solid var(--gray-200); padding: 0.8125rem 0; }
.detail-list dt { color: var(--gray-500); font-size: 0.76rem; font-weight: var(--font-weight-semibold); }
.detail-list dd { color: var(--navy-900); overflow-wrap: anywhere; font-size: 0.84rem; font-weight: var(--font-weight-semibold); }
.event-detail-trigger { min-height: 2.5rem; border: 0; border-radius: var(--radius-sm); padding: 0.35rem 0.45rem; color: var(--text-primary); background: transparent; cursor: pointer; font: inherit; text-align: left; transition: color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast); }
.event-detail-trigger:hover { color: var(--primary); background: var(--primary-light); }
.event-detail-trigger:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.event-detail-code-trigger { color: var(--primary-hover); font-weight: 800; letter-spacing: 0.01em; }
.event-detail-name-trigger { max-width: 22rem; }
.event-detail-modal { width: min(48rem, calc(100% - 2rem)); }
.event-detail-body { display: grid; gap: var(--space-4); max-height: 70vh; overflow-y: auto; padding: var(--space-5); background: var(--surface-subtle); }
.event-detail-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); border: 1px solid #cfe8df; border-radius: var(--radius-card); padding: var(--space-4); background: var(--primary-light); }
.event-detail-hero div { display: grid; gap: var(--space-1); }
.event-detail-hero span:not(.badge), .event-detail-grid dt { color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; }
.event-detail-hero strong { color: var(--text-primary); overflow-wrap: anywhere; }
.event-detail-hero > div:first-child strong { color: var(--primary-hover); font-size: 1.05rem; letter-spacing: 0.03em; }
.event-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.event-detail-grid > div { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); background: var(--surface); box-shadow: var(--shadow-xs); }
.event-detail-grid dt, .event-detail-grid dd { margin: 0; }
.event-detail-grid dd { margin-top: var(--space-1); color: var(--text-primary); overflow-wrap: anywhere; font-size: 0.86rem; font-weight: 650; }
.event-detail-messages { display: grid; gap: var(--space-3); }
.event-detail-message { border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-4); background: var(--surface); }
.event-detail-message h3 { margin: 0; color: var(--text-primary); font-size: 0.82rem; }
.event-detail-message p { margin: var(--space-2) 0 0; color: var(--text-secondary); overflow-wrap: anywhere; font-size: 0.82rem; line-height: 1.65; white-space: pre-wrap; }
.event-detail-choices { border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-4); background: var(--surface); }
.event-detail-choices h3 { margin: 0 0 var(--space-3); color: var(--text-primary); font-size: 0.82rem; }
.event-detail-choices ol { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.event-detail-choices li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-size: 0.78rem; }
.event-detail-choices li > strong { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: var(--primary-hover); background: var(--primary-light); }
.event-detail-choices li.is-correct { border-color: #bfe6d8; color: var(--text-primary); background: var(--success-light); }
.event-campaign-history { border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-4); background: var(--surface); }
.event-campaign-history > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.event-campaign-history .eyebrow { margin: 0; }
.event-campaign-history h3 { margin: var(--space-1) 0 0; color: var(--text-primary); font-size: 0.86rem; }
.event-campaign-history-status { margin: var(--space-3) 0; color: var(--text-secondary); font-size: 0.76rem; }
.event-campaign-history-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.event-campaign-history-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface-subtle); }
.event-campaign-history-item[data-send-type="broadcast"] { border-inline-start: 3px solid var(--color-primary); }
.event-campaign-history-item[data-send-type="test_push"] { border-inline-start: 3px solid var(--info); background: var(--surface); }
.event-campaign-history-item > div { display: grid; min-width: 0; gap: var(--space-1); }
.event-campaign-history-item strong { color: var(--text-primary); font-size: 0.78rem; }
.event-campaign-history-item span:not(.badge), .event-campaign-history-item small { color: var(--text-secondary); overflow-wrap: anywhere; font-size: 0.7rem; line-height: 1.45; }
.event-campaign-history-item > div:last-child { justify-items: end; text-align: right; }
.event-campaign-history-item .button-small { margin-top: var(--space-1); }
.event-detail-campaign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-right: auto; }
.line-test-unavailable { flex-basis: 100%; color: var(--text-muted); font-size: var(--font-size-xs); }
.line-preview-modal { width: min(32rem, calc(100% - 2rem)); }
.line-preview-only-body { display: grid; gap: var(--space-4); max-height: 72vh; overflow-y: auto; padding: var(--space-5); background: var(--surface-subtle); }
.line-preview-only-body .line-preview-device { min-height: 31rem; }
.line-preview-readonly { margin: 0; border: 1px solid #cfe8df; border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); color: var(--text-secondary); background: var(--surface); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.line-test-modal { width: min(40rem, calc(100% - 2rem)); }
.line-test-body { display: grid; gap: var(--space-4); max-height: 72vh; overflow-y: auto; padding: var(--space-5); background: var(--surface-subtle); }
.line-test-heading { display: flex; align-items: center; gap: var(--space-4); }
.line-test-heading > span { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 auto; place-items: center; border: 1px solid #b9e4dc; border-radius: var(--radius-card); color: var(--color-teal-700); background: var(--color-teal-100); font-size: var(--font-size-xs); font-weight: var(--font-weight-display); letter-spacing: 0.08em; }
.line-test-heading div { min-width: 0; }
.line-test-heading small { color: var(--color-teal-700); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; }
.line-test-heading h3 { margin: var(--space-1) 0 0; color: var(--text-primary); overflow-wrap: anywhere; font-size: var(--font-size-lg); }
.line-test-recipient { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border: 1px solid #b9e4dc; border-radius: var(--radius-control); padding: var(--space-4); background: var(--surface); }
.line-test-recipient div { display: grid; min-width: 0; gap: var(--space-1); }
.line-test-recipient div > span { color: var(--text-secondary); font-size: var(--font-size-xs); }
.line-test-recipient strong { color: var(--text-primary); overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--font-size-sm); }
.line-test-recipient .badge { border-color: #b9e4dc; color: var(--color-teal-700); background: var(--color-teal-100); white-space: nowrap; }
.line-test-safety { border-left: 3px solid var(--color-teal-700); border-radius: 0 var(--radius-control) var(--radius-control) 0; padding: var(--space-3) var(--space-4); color: var(--text-secondary); background: var(--color-teal-100); }
.line-test-safety strong { color: var(--color-emerald-950); }
.line-test-safety p { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.line-test-feedback { margin: 0; border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); color: var(--text-secondary); background: var(--color-slate-100); font-size: var(--font-size-sm); }
.line-test-feedback.is-ready { color: var(--success); background: var(--success-light); }
.line-test-feedback.is-error { color: var(--danger); background: var(--danger-light); }
.line-test-confirm { align-items: start; border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-4); background: var(--surface); }
.line-broadcast-modal { width: min(62rem, calc(100% - 2rem)); }
.line-broadcast-body { display: grid; grid-template-columns: minmax(18rem, 0.85fr) minmax(20rem, 1.15fr); gap: var(--space-6); max-height: 72vh; overflow-y: auto; padding: var(--space-5); background: var(--surface-subtle); }
.line-preview-device { display: grid; align-content: center; min-height: 35rem; border: 1px solid #cfe8df; border-radius: var(--radius-panel); padding: var(--space-5); background: radial-gradient(circle at 84% 8%, rgb(25 181 138 / 14%), transparent 12rem), linear-gradient(160deg, #eaf8f3, #f5fbf8 54%, #edf5f2); box-shadow: inset 0 0 0 0.4rem rgb(255 255 255 / 38%); }
.line-preview-bubble { width: min(21rem, 100%); overflow: hidden; border: 1px solid rgb(20 42 58 / 8%); border-radius: 1.25rem; margin: auto; background: var(--surface); box-shadow: 0 1.5rem 3rem rgb(20 60 48 / 15%); }
.line-preview-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); color: var(--primary-active); background: var(--primary-soft); font-size: var(--font-size-sm); letter-spacing: 0.04em; }
.line-preview-brand { background: #006B50; color: #fff; overflow-wrap: anywhere; }
.line-preview-brand span { color: #D6F3E7; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.line-preview-content { padding: var(--space-5); }
.line-preview-content > span { color: var(--primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.line-preview-content h3 { margin: var(--space-1) 0 var(--space-3); color: var(--text-primary); font-size: var(--font-size-xl); line-height: var(--line-height-tight); }
.line-preview-content p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); white-space: pre-wrap; }
.line-preview-content ol { display: grid; gap: var(--space-2); border-top: 1px solid var(--border); margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; list-style: none; }
.line-preview-content li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); }
.line-preview-content li strong { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; color: var(--primary-hover); background: var(--primary-light); }
.line-preview-content small { display: block; margin-top: var(--space-4); color: var(--text-muted); }
.line-preview-buttons { display: grid; gap: var(--space-2); border-top: 1px solid var(--border); padding: var(--space-4); }
.line-preview-buttons span { display: grid; min-height: 2.5rem; place-items: center; border-radius: var(--radius-control); color: var(--primary-hover); background: var(--primary-light); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.line-preview-content h3 { font-size: 14px; font-weight: 400; color: #537267; }
.line-preview-content p { margin-top: 20px; font-size: 22px; font-weight: 700; color: #193D32; overflow-wrap: anywhere; }
.line-preview-content p::after { content: 'แตะเพื่อเลือกคำตอบของคุณ'; display: block; margin-top: 12px; font-size: 12px; font-weight: 400; color: #537267; }
.line-preview-buttons .line-quiz-choice { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; background: #EFF9F5; border: 1px solid #CDE7DC; border-radius: 12px; }
.line-quiz-choice strong { display: grid; place-items: center; min-height: 36px; border-radius: 18px; background: #006B50; color: #fff; font-size: 12px; overflow-wrap: anywhere; }
.line-preview-buttons .line-quiz-choice span { display: block; min-height: 0; background: transparent; color: #193D32; overflow-wrap: anywhere; white-space: pre-wrap; }
.line-quiz-choice b { color: #006B50; }
.line-quiz-rules { margin-top: 12px; text-align: center; white-space: pre-line; color: #537267; font-size: 12px; }
.line-broadcast-review { display: grid; align-content: start; gap: var(--space-4); }
.line-broadcast-warning { border: 1px solid #f0d4a5; border-radius: var(--radius-card); padding: var(--space-4); color: #7b4a0a; background: var(--warning-light); }
.line-broadcast-warning strong { display: block; color: #744407; }
.line-broadcast-warning p { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.line-broadcast-status { margin: 0; border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }
.line-broadcast-status.is-ready { color: var(--success); background: var(--success-light); }
.line-broadcast-status.is-warning { color: var(--warning); background: var(--warning-light); }
.line-broadcast-review details { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.line-broadcast-review summary { padding: var(--space-3) var(--space-4); color: var(--text-primary); cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.line-broadcast-review pre { max-height: 16rem; overflow: auto; border-top: 1px solid var(--border); margin: 0; padding: var(--space-4); color: var(--text-secondary); background: #f6f9f8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.line-resend-reason { display: grid; gap: var(--space-2); border: 1px solid #f0d4a5; border-radius: var(--radius-control); padding: var(--space-4); color: #744407; background: var(--warning-light); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.line-resend-reason textarea { min-height: 5rem; resize: vertical; color: var(--text-primary); background: var(--surface); }
.line-resend-reason small { color: #7b4a0a; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.line-broadcast-confirm { align-items: start; border: 1px solid var(--border); border-radius: var(--radius-control); padding: var(--space-4); background: var(--surface); }
.line-send-feedback { margin-right: auto; color: var(--text-secondary); font-size: var(--font-size-sm); }
.campaign-history-preview-modal { width: min(46rem, calc(100% - 2rem)); }
.campaign-history-preview-status { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.campaign-history-preview-modal pre { min-height: 8rem; max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-control); margin: 0; padding: var(--space-4); color: var(--text-secondary); background: var(--surface-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.event-choice-correct-marker { border-radius: var(--radius-round); padding: 0.2rem 0.5rem; color: #08704c; background: var(--surface); font-size: 0.66rem; font-weight: var(--font-weight-bold); }
.drawer-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; border-top: 1px solid var(--gray-200); padding: var(--space-4) var(--space-5); background: var(--surface); box-shadow: 0 -0.5rem 1.25rem rgb(20 42 58 / 4%); }
.draw-layout { display: grid; grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); align-items: stretch; gap: var(--space-5); }
.draw-control, .draw-result { position: relative; overflow: hidden; border-color: #d4e4de; }
.draw-control { align-self: start; padding: var(--space-6); background: linear-gradient(155deg, var(--surface) 0%, #fbfdfc 62%, var(--primary-soft) 100%); }
.draw-control::before { position: absolute; inset: 0 0 auto; height: 0.25rem; background: var(--gradient-accent); content: ""; }
.draw-control::after { position: absolute; top: -5rem; right: -5rem; width: 11rem; height: 11rem; border: 1px solid rgb(7 135 95 / 7%); border-radius: 50%; background: radial-gradient(circle, rgb(25 181 138 / 7%), transparent 68%); content: ""; pointer-events: none; }
.draw-control > * { position: relative; z-index: 1; }
.draw-control .eyebrow { margin: 0 0 var(--space-1); }
.draw-control h2, .draw-result h2, .announcement-panel h2, .settings-card h2 { margin: 0; color: var(--navy-900); }
.section-description, .announcement-panel p, .settings-card header p { margin: 0.4rem 0 1rem; color: var(--gray-700); }
.draw-control .section-description { margin: var(--space-2) 0 0; font-size: 0.82rem; line-height: var(--line-height-relaxed); }
.draw-control .stack-form { gap: var(--space-4); border-top: 1px solid var(--border); margin-top: var(--space-5); padding-top: var(--space-5); }
.draw-control .stack-form > label { display: grid; align-items: stretch; justify-content: stretch; gap: var(--space-2); margin: 0; color: var(--text-primary); font-size: 0.8rem; }
.draw-control select, .draw-control input, .draw-control textarea { border-color: #cbdcd5; background: rgb(255 255 255 / 90%); }
.draw-control textarea { min-height: 6.5rem; }
.draw-control select:focus, .draw-control input:focus, .draw-control textarea:focus { background: var(--surface); box-shadow: var(--control-focus-shadow), 0 0.5rem 1.25rem rgb(7 135 95 / 5%); }
.eligible-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 var(--space-3); overflow: hidden; border: 1px solid #bfe5d7; border-radius: var(--radius-card); padding: var(--space-4); color: var(--green-900); background: linear-gradient(135deg, #eefaf6 0%, #ddf4eb 100%); box-shadow: inset 0 1px rgb(255 255 255 / 75%), 0 0.5rem 1.25rem rgb(7 135 95 / 7%); }
.eligible-card::before { display: grid; width: 2.75rem; height: 2.75rem; grid-row: 1 / 3; place-items: center; border: 1px solid rgb(255 255 255 / 65%); border-radius: 0.8rem; color: var(--surface); background: var(--gradient-brand); box-shadow: 0 0.45rem 1rem rgb(7 135 95 / 17%); content: "✓"; font-size: 1rem; font-weight: var(--font-weight-display); }
.eligible-card::after { position: absolute; right: -2.5rem; bottom: -3.75rem; width: 8rem; height: 8rem; border: 1px solid rgb(7 135 95 / 8%); border-radius: 50%; content: ""; pointer-events: none; }
.eligible-card > span { align-self: end; color: var(--text-secondary); font-size: 0.72rem; font-weight: var(--font-weight-bold); }
.eligible-card strong { position: relative; z-index: 1; grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--primary-hover); font-size: clamp(1.8rem, 4vw, 2.25rem); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.eligible-card small { align-self: start; color: var(--green-700); font-size: 0.7rem; font-weight: var(--font-weight-semibold); }
.eligible-card strong[aria-busy="true"] { opacity: 0.45; animation: draw-count-pulse 900ms ease-in-out infinite alternate; }
.draw-control .button-primary { position: relative; min-height: 3rem; overflow: hidden; margin-top: var(--space-1); box-shadow: 0 0.625rem 1.25rem rgb(7 135 95 / 20%), inset 0 1px rgb(255 255 255 / 16%); }
.draw-control .button-primary::after { position: absolute; inset: 0 auto 0 -42%; width: 32%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 18%), transparent); content: ""; pointer-events: none; transform: skewX(-18deg); transition: left var(--motion-slow) var(--ease-standard); }
.draw-control .button-primary:hover::after { left: 112%; }
.draw-control .button-primary:active { transform: translateY(1px) scale(0.995); }
.draw-result { min-height: 31rem; padding: var(--space-6); background: radial-gradient(circle at 78% 16%, rgb(25 181 138 / 10%), transparent 11rem), radial-gradient(circle at 12% 90%, rgb(40 125 169 / 6%), transparent 14rem), linear-gradient(145deg, #ffffff 0%, #f7fbf9 55%, #eef8f4 100%); isolation: isolate; }
.draw-result::before, .draw-result::after { position: absolute; z-index: -1; border: 1px solid rgb(7 135 95 / 8%); border-radius: 50%; content: ""; pointer-events: none; }
.draw-result::before { top: -8rem; right: -7rem; width: 20rem; height: 20rem; }
.draw-result::after { bottom: -10rem; left: -8rem; width: 24rem; height: 24rem; }
.draw-empty { display: grid; min-height: 27.5rem; place-items: center; align-content: center; padding: var(--space-8); text-align: center; }
.draw-empty > span { display: grid; width: 5.25rem; height: 5.25rem; place-items: center; border: 1px solid #cce9de; border-radius: 1.5rem; color: var(--primary); background: linear-gradient(145deg, var(--surface), var(--primary-light)); box-shadow: 0 1rem 2.25rem rgb(7 135 95 / 12%), inset 0 1px rgb(255 255 255 / 85%); font-size: 2.2rem; transition: border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-base); }
.draw-result:hover .draw-empty > span { border-color: #adddcb; box-shadow: 0 1.25rem 2.75rem rgb(7 135 95 / 15%), inset 0 1px rgb(255 255 255 / 90%); transform: translateY(-0.125rem); }
.draw-empty h2 { margin-top: var(--space-5); font-size: 1.2rem; }
.draw-empty p { max-width: 30rem; margin: var(--space-2) 0 0; color: var(--gray-700); font-size: 0.84rem; line-height: var(--line-height-relaxed); }
.draw-result > [data-draw-result]:not([hidden]) { position: relative; z-index: 1; animation: draw-result-reveal var(--motion-slow) var(--ease-standard) both; }
.draw-result > [data-draw-result] > .eyebrow { display: inline-flex; min-height: 1.75rem; align-items: center; border: 1px solid #bfe5d7; border-radius: var(--radius-round); margin: 0 0 var(--space-2); padding: 0.25rem 0.65rem; background: rgb(237 249 245 / 82%); }
.draw-result > [data-draw-result] > h2 { padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); font-size: 1.25rem; }
.draw-result > [data-draw-result] > h2 span { color: var(--primary); font-variant-numeric: tabular-nums; }
.winner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.winner-card { position: relative; display: grid; min-width: 0; justify-items: center; overflow: hidden; border: 1px solid #d5e5df; border-radius: var(--radius-card); padding: var(--space-5); background: linear-gradient(155deg, var(--surface) 0%, #fbfdfc 62%, #f1f9f6 100%); box-shadow: var(--shadow-xs); text-align: center; animation: winner-card-reveal var(--motion-slow) var(--ease-standard) both; transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
.winner-card::before { position: absolute; inset: 0 0 auto; height: 0.1875rem; background: linear-gradient(90deg, var(--winner), #e1b950, var(--primary)); content: ""; }
.winner-card:hover { border-color: #badbce; box-shadow: var(--shadow-card-hover); transform: translateY(-0.125rem); }
.winner-card:nth-child(2) { animation-delay: 55ms; }
.winner-card:nth-child(3) { animation-delay: 110ms; }
.winner-card:nth-child(n+4) { animation-delay: 150ms; }
.winner-card strong, .winner-card small { max-width: 100%; overflow-wrap: anywhere; }
.winner-card strong { color: var(--text-primary); font-size: 0.92rem; line-height: 1.45; }
.winner-number { margin-bottom: var(--space-3); border: 1px solid #ead49c; border-radius: var(--radius-round); padding: 0.25rem 0.6rem; color: #80540b; background: var(--winner-light); font-size: 0.7rem; font-weight: var(--font-weight-bold); }
.winner-card small { margin-top: var(--space-1); color: var(--gray-500); font-size: 0.72rem; font-family: ui-monospace, monospace; }
.announcement-panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); overflow: hidden; margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, var(--surface) 0%, var(--primary-soft) 100%); }
.announcement-panel::before { position: absolute; inset: 0 auto 0 0; width: 0.1875rem; background: var(--primary); content: ""; }
.announcement-panel p { margin-bottom: 0; }.announcement-panel h2, .settings-card h2 { font-size: 1rem; }
.settings-card { max-width: 52rem; overflow: hidden; padding: var(--space-5); }
.settings-card > header { border-bottom: 1px solid var(--gray-200); margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5); padding: var(--space-5); background: var(--modal-header-background); }
.settings-card [data-settings-form] { gap: var(--space-5); }
.settings-card [data-settings-fields], .form-dialog-body { display: grid; gap: var(--space-4); }
.settings-card label, .form-dialog-body label { display: grid; align-items: stretch; justify-content: stretch; gap: 0.4rem; color: var(--text-primary); font-size: 0.84rem; font-weight: var(--font-weight-bold); }
.settings-card [data-settings-fields] > label { border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); background: var(--form-section-background); box-shadow: var(--shadow-xs); }
.settings-card [data-settings-form] > .button { justify-self: end; min-width: 10rem; }
.form-dialog-body { overflow-y: auto; padding: var(--space-5); background: #fbfdfc; }
.form-dialog-body small { color: var(--gray-500); font-weight: var(--font-weight-medium); }
details > summary { border-radius: var(--radius-control); padding: 0.4rem 0.55rem; color: var(--primary); cursor: pointer; font-size: 0.75rem; font-weight: var(--font-weight-bold); transition: color var(--motion-fast), background-color var(--motion-fast); }
details > summary:hover { color: var(--primary-hover); background: var(--primary-light); }
.audit-json { max-width: 28rem; max-height: 18rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: var(--space-2) 0 0; padding: var(--space-3); color: var(--navy-900); background: #f2f6f4; font: 0.72rem/1.55 ui-monospace, monospace; white-space: pre-wrap; }

.admin-user-layout { display: grid; gap: var(--space-4); }
.admin-user-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.role-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 6.5rem; border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard); }
.role-summary:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card-hover); transform: translateY(-0.125rem); }
.role-summary-mark { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 0.8rem; color: var(--primary-hover); background: var(--primary-light); font-size: 0.9rem; font-weight: 850; }
.role-summary-manager .role-summary-mark { color: var(--info); background: var(--info-light); }
.role-summary-viewer .role-summary-mark { color: #665b83; background: #f0edf7; }
.role-summary strong { display: block; color: var(--text-primary); font-size: 0.92rem; }
.role-summary p { margin: 0.18rem 0 0; color: var(--text-secondary); font-size: 0.75rem; line-height: 1.45; }
.role-summary > span:last-child { min-width: 2rem; color: var(--text-primary); font-size: 1.45rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.admin-directory { overflow: hidden; border-color: #d8e5e0; }
.admin-directory-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: var(--space-5); background: var(--modal-header-background); }
.admin-directory-header h2 { margin: 0; color: var(--text-primary); font-size: 1.15rem; }
.admin-directory-header p { margin: 0.2rem 0 0; color: var(--text-secondary); font-size: 0.82rem; }
.admin-directory-header .button > span { font-size: 1.1rem; line-height: 1; }
.admin-user-filters { display: grid; grid-template-columns: minmax(14rem, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto; align-items: end; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: linear-gradient(145deg, var(--surface) 0%, #f7fbf9 100%); }
.admin-user-filters label { display: grid; gap: 0.35rem; color: var(--text-secondary); font-size: 0.74rem; font-weight: var(--font-weight-bold); }
.admin-user-filters input, .admin-user-filters select { min-height: 2.625rem; background: var(--surface); }
.admin-filter-reset { min-height: 2.625rem; white-space: nowrap; }
.admin-users-table { min-width: 56rem; }
.admin-users-table th:last-child { width: 13rem; }
.admin-users-table tbody tr { transition: background-color var(--motion-fast) var(--ease-standard); }
.admin-account-cell { display: flex; min-width: 13rem; align-items: center; gap: var(--space-3); }
.admin-account-avatar { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center; border: 1px solid #c9e7dc; border-radius: 0.75rem; color: var(--primary-hover); background: var(--primary-light); font-weight: 850; }
.admin-account-copy { min-width: 0; }
.admin-account-copy strong, .admin-account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-account-copy strong { color: var(--text-primary); font-size: 0.86rem; }
.admin-account-copy small { max-width: 15rem; margin-top: 0.1rem; color: var(--text-muted); font-size: 0.72rem; }
.system-badge { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; border: 1px solid #e9d3a3; border-radius: var(--radius-round); padding: 0.12rem 0.45rem; color: #80540b; background: var(--winner-light); font-size: 0.66rem; font-weight: 750; }
.role-badge { display: inline-flex; min-width: 4.75rem; justify-content: center; border-radius: var(--radius-round); padding: 0.28rem 0.55rem; font-size: 0.72rem; font-weight: 750; }
.role-badge-admin { color: var(--primary-hover); background: var(--primary-light); }
.role-badge-manager { color: #1f668d; background: var(--info-light); }
.role-badge-viewer { color: #62577e; background: #f0edf7; }
.admin-actions { display: flex; justify-content: flex-end; gap: var(--space-1); white-space: nowrap; }
.admin-actions .table-action { min-height: 2.5rem; padding-inline: 0.62rem; }
.admin-actions .action-danger { color: var(--danger); }
.admin-actions .action-danger:hover { color: var(--danger-hover); background: var(--danger-light); }
.protected-action { display: inline-flex; min-height: 2.5rem; align-items: center; gap: 0.35rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 650; }
.table-skeleton td { height: 4.5rem; }
.table-skeleton span { display: block; width: 100%; height: 1.35rem; border-radius: var(--radius-control); background: linear-gradient(100deg, var(--gray-100) 20%, #f8fbfa 42%, var(--gray-100) 64%); background-size: 220% 100%; animation: skeleton-shift 1.2s linear infinite; }
.admin-account-drawer { width: min(43rem, 100%); }
.admin-account-drawer .drawer-card { display: flex; flex-direction: column; }
.admin-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); }
.admin-drawer-header .eyebrow { margin: 0 0 var(--space-1); }
.admin-drawer-header p:last-child { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.8rem; }
.admin-drawer-header .icon-button { flex: 0 0 auto; font-size: 1.35rem; line-height: 1; }
.admin-drawer-body { display: grid; align-content: start; gap: var(--space-5); flex: 1; overflow-y: auto; padding: var(--space-5); background: #fbfdfc; scrollbar-color: #b9cbc4 transparent; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.admin-form-grid label { display: grid; align-content: start; gap: var(--space-1); color: var(--text-primary); font-size: 0.82rem; font-weight: 700; }
.admin-form-grid label.full { grid-column: 1 / -1; }
.admin-form-grid b, .role-selector b { color: var(--danger); }
.admin-form-grid small { color: var(--text-muted); font-size: 0.7rem; font-weight: 500; }
.role-selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); border: 0; margin: 0; padding: 0; }
.role-selector legend { grid-column: 1 / -1; margin-bottom: var(--space-1); color: var(--text-primary); font-size: 0.82rem; font-weight: 750; }
.role-option { position: relative; cursor: pointer; }
.role-option input { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.role-option > span { display: grid; min-height: 6.5rem; align-content: start; gap: 0.3rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: var(--space-3); background: var(--surface); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast); }
.role-option > span::before { display: grid; width: 1.1rem; height: 1.1rem; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--surface); content: ""; font-size: 0.68rem; }
.role-option input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--focus-ring); }
.role-option input:checked + span::before { border-color: var(--primary); background: var(--primary); content: "✓"; }
.role-option input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.role-option strong { color: var(--text-primary); font-size: 0.82rem; }
.role-option small { color: var(--text-secondary); font-size: 0.7rem; font-weight: 500; line-height: 1.45; }
.password-section { display: grid; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4); background: var(--form-section-background); box-shadow: var(--shadow-xs); }
.password-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.password-section-heading h3 { margin: 0; color: var(--text-primary); font-size: 0.9rem; }
.password-section-heading p { margin: 0.15rem 0 0; color: var(--text-secondary); font-size: 0.72rem; }
.button-compact { min-height: 2.35rem; padding: 0.45rem 0.7rem; font-size: 0.75rem; white-space: nowrap; }
.password-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.password-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); }
.password-control input { min-width: 0; border: 0; border-radius: 0; box-shadow: none; }
.password-control input:focus { box-shadow: none; }
.password-control button { min-width: 3.75rem; border: 0; border-left: 1px solid var(--border); color: var(--primary); background: var(--surface); cursor: pointer; font-size: 0.72rem; font-weight: 750; }
.password-control button:hover { background: var(--primary-light); }
.field-error { margin: 0; color: var(--danger); font-size: 0.75rem; font-weight: 650; }
.admin-drawer-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: var(--space-2); border-top: 1px solid var(--border); padding: var(--space-4) var(--space-5); background: var(--surface); box-shadow: 0 -0.5rem 1.25rem rgb(20 42 58 / 4%); }
.admin-delete-dialog .form-dialog-body p { margin: 0; color: var(--text-secondary); font-size: 0.84rem; }
.admin-delete-dialog .form-dialog-body strong { color: var(--danger); }

@media (max-width: 78rem) {
    .admin-user-summary { grid-template-columns: 1fr; }
    .role-summary { min-height: auto; }
}

@media (max-width: 52rem) {
    .admin-user-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-search { grid-column: 1 / -1; }
    .admin-filter-reset { width: 100%; }
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-form-grid label.full { grid-column: auto; }
    .role-selector { grid-template-columns: 1fr; }
    .role-option > span { min-height: auto; }
}

@media (max-width: 36rem) {
    .admin-directory-header { align-items: stretch; flex-direction: column; }
    .admin-directory-header .button { width: 100%; }
    .admin-user-filters { grid-template-columns: 1fr; padding-inline: var(--space-4); }
    .admin-search { grid-column: auto; }
    .admin-account-drawer { width: 100%; }
    .admin-account-drawer .drawer-card { border-radius: 0; }
    .admin-drawer-header, .admin-drawer-body { padding: var(--space-4); }
    .password-section-heading { align-items: stretch; flex-direction: column; }
    .password-section-heading .button { width: 100%; }
    .admin-drawer-footer { padding: var(--space-3) var(--space-4); }
    .admin-drawer-footer .button { flex: 1; }
}

@keyframes skeleton-shift {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes refresh-spin {
    to { transform: rotate(1turn); }
}

@keyframes draw-count-pulse {
    from { opacity: 0.35; }
    to { opacity: 0.7; }
}

@keyframes draw-result-reveal {
    from { opacity: 0; transform: translate3d(0, 0.5rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes winner-card-reveal {
    from { opacity: 0; transform: translate3d(0, 0.625rem, 0) scale(0.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes auth-enter {
    from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes toast-enter {
    from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes modal-enter {
    from { opacity: 0; transform: translate3d(0, 0.75rem, 0) scale(0.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes drawer-enter {
    from { opacity: 0; transform: translate3d(1.5rem, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 70rem) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .winner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
    .sidebar { width: min(17rem, 86vw); transform: translateX(-105%); transition: transform var(--motion-fast) var(--ease-standard); }
    .sidebar.is-open { transform: translateX(0); }
    body.sidebar-open { overflow: hidden; }
    .main-column { margin-left: 0; }
    .icon-button.menu-toggle { display: inline-grid; place-items: center; }
    .breadcrumb span:first-child, .breadcrumb span:nth-child(2) { display: none; }
    .admin-identity > span:last-child { display: none; }
    .main-content { padding: 1rem; }
    .dashboard-toolbar { align-items: flex-start; flex-direction: column; }
    .toolbar-actions { width: 100%; }
    .toolbar-actions select { min-width: 0; }
    .toolbar-actions select { flex: 1; }
    .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .draw-layout { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 52rem) {
    .dashboard-toolbar { align-items: stretch; flex-direction: column; }
    .live-status { width: 100%; justify-content: flex-start; }
    .chart-grid { grid-template-columns: 1fr; }
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-detail-hero { grid-template-columns: 1fr auto; }
    .event-detail-heading { grid-column: 1 / -1; grid-row: 2; }
    .event-detail-grid { grid-template-columns: 1fr; }
    .line-broadcast-body { grid-template-columns: 1fr; }
    .line-preview-device { min-height: auto; }
    .event-choice-row { grid-template-columns: 4.5rem minmax(10rem, 1fr); }
    .event-choice-correct, .event-choice-remove { grid-row: 2; }
}

@media (max-height: 50rem) and (min-width: 36.01rem) {
    .auth-page { align-items: start; overflow-y: auto; padding: var(--space-4); }
    .auth-card { margin: auto 0; padding: var(--space-6) var(--auth-card-padding); }
    .auth-brand { margin-bottom: var(--space-5); padding-bottom: var(--space-4); }
    .auth-copy { margin-bottom: var(--space-4); }
    .auth-footer { margin-top: var(--space-4); }
}

@media (max-width: 36rem) {
    .auth-page { align-items: start; overflow-y: auto; padding: var(--space-4); }
    .auth-card { margin: var(--space-4) 0; padding: 1.5rem; border-radius: 1.25rem; }
    .auth-brand { margin-bottom: var(--space-6); }
    .topbar { min-height: 4.75rem; gap: var(--space-3); padding: 0 var(--space-3); }
    .topbar-eyebrow { display: none; }
    .admin-identity { min-height: auto; border: 0; padding: 0; box-shadow: none; }
    .kpi-grid { grid-template-columns: 1fr; }
    .chart-grid { grid-template-columns: 1fr; }
    .toolbar-actions { align-items: stretch; flex-direction: column; }
    .toolbar-actions .button { width: 100%; }
    .welcome-panel { align-items: flex-start; flex-direction: column; }
    .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: var(--space-5); }
    .management-toolbar, .table-summary { align-items: flex-start; flex-direction: column; }
    .management-toolbar .button { width: 100%; }
    .form-grid, .filter-grid { grid-template-columns: 1fr; }
    .answer-mode-control { grid-template-columns: 1fr; }
    .event-choice-heading { align-items: stretch; flex-direction: column; }
    .event-choice-heading .button { width: 100%; }
    .event-choice-row { grid-template-columns: 1fr 2.75rem; }
    .event-choice-code, .event-choice-text { grid-column: 1 / -1; }
    .event-choice-correct { grid-column: 1; grid-row: auto; }
    .event-choice-remove { grid-column: 2; grid-row: auto; }
    .event-detail-modal { width: calc(100% - 1rem); }
    .event-detail-body { padding: var(--space-3); }
    .event-detail-hero { gap: var(--space-3); padding: var(--space-3); }
    .event-detail-campaign-actions { width: 100%; flex-wrap: wrap; }
    .event-detail-campaign-actions .button { flex: 1 1 100%; }
    .line-test-recipient { align-items: flex-start; flex-direction: column; }
    .form-grid .full { grid-column: auto; }
    .filter-actions { flex-direction: column; }
    .filter-actions .button { width: 100%; }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list dt { border-bottom: 0; padding-bottom: 0; }
    .winner-grid { grid-template-columns: 1fr; }
    .announcement-panel { align-items: flex-start; flex-direction: column; }
    .draw-control, .draw-result { padding: var(--space-4); }
    .draw-empty { min-height: 22rem; padding: var(--space-5); }
    .draw-empty > span { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; }
    .eligible-card { padding: var(--space-3); }
    .eligible-card::before { width: 2.5rem; height: 2.5rem; }
    .modal { width: calc(100% - 1rem); }
    .modal-card { max-height: calc(100dvh - 1rem); border-radius: 1rem; }
    .modal-card > header, .modal-card > footer { padding: var(--space-3) var(--space-4); }
    .modal-card > footer { flex-wrap: wrap; }
    .modal-card > footer .button { flex: 1; }
    .form-grid, .form-dialog-body { padding: var(--space-4); }
    .form-grid .full { padding: var(--space-3); }
    .settings-card { padding: var(--space-4); }
    .settings-card > header { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4); padding: var(--space-4); }
    .settings-card [data-settings-form] > .button { width: 100%; }
}

@supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) {
    .topbar { background: var(--surface); }
}

@media (hover: none) {
    .button:hover, .sidebar-nav a:hover, .sidebar-logout button:hover, .kpi-card:hover, .chart-card:hover, .role-summary:hover, .winner-card:hover, .pagination button:hover:not(:disabled), .draw-result:hover .draw-empty > span { transform: none; }
    .button-with-icon:hover svg { transform: none; }
    .auth-form .button-primary:hover::before { left: -45%; }
    .draw-control .button-primary:hover::after { left: -42%; }
}

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