/* ==========================================================================
   INHACK Security Portal — Stylesheet
   Design language: Toss / Kakao Bank — light by default with a cookie-persisted
   dark mode, generous whitespace, bold Pretendard headlines, soft rounded
   cards, one calm navy/teal brand with a bright-cyan highlight.
   Brand palette: 1a334a 1e536e 18a387 27e6ec 5aa5cd 6f71a1
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens — LIGHT (default)
   -------------------------------------------------------------------------- */
:root {
    /* Surfaces — cool, blue-tinted; nothing is pure white */
    --bg:            #e9eef3;   /* page — == canvas palette "페이퍼" (c7), so content bg matches */
    --bg-subtle:     #dfe6ec;   /* alt sections, inset fills, quiet buttons */
    --surface:       #f3f6f9;   /* cards, header — == palette "오프화이트" (c8), a hair above the page */
    --surface-2:     #eaeef2;   /* hover / nested */
    --border:        #ccd6df;   /* visible hairline, faint blue */
    --border-strong: #aeb9c4;   /* card outlines, dividers */

    /* Ink — deep navy → blue-slate, cool all the way down */
    --text-strong:   #14324b;   /* headings — brand navy */
    --text:          #2b3d4d;
    --text-weak:     #566a7a;
    --text-weakest:  #8695a3;

    /* Brand */
    --brand:          #1e536e;  /* accessible interactive: links, icons */
    --brand-strong:   #1a334a;  /* hover / pressed */
    --brand-fill:      #1a334a; /* primary button background */
    --brand-fill-text: #ffffff;

    /* Bright accent — the cyan. Fills, active underlines, glows; never as
       text on a light background (fails contrast). */
    --accent:        #27e6ec;
    --accent-ink:    #05232a;   /* text that sits on an --accent fill */
    --accent-tint:   #e6fbfc;   /* pale cyan wash */

    /* Status */
    --success:       #18a387;
    --success-tint:  #e7f6f2;
    --danger:        #d9603f;
    --danger-tint:   #fbeae4;
    --violet:        #6f71a1;

    /* Effects */
    --ring:          #27e6ec;
    --shadow-sm: 0 1px 2px rgba(15, 31, 46, 0.04), 0 2px 8px rgba(15, 31, 46, 0.05);
    --shadow-md: 0 2px 6px rgba(15, 31, 46, 0.06), 0 12px 28px rgba(15, 31, 46, 0.09);
    --shadow-lg: 0 8px 20px rgba(15, 31, 46, 0.10), 0 30px 60px rgba(15, 31, 46, 0.14);

    /* Geometry */
    --radius:      20px;
    --radius-sm:   12px;
    --radius-lg:   28px;
    --radius-pill: 999px;
    --header-h:    64px;
    --maxw:        1080px;
    --maxw-bar:    1200px;

    /* Type */
    --font-heading: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --font-body:    'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;

    /* Motion */
    --transition-fast: 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-mid:  0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ---- Legacy variable aliases — keep older rules re-themed ---- */
    --page: var(--bg);
    --raise: var(--surface);
    --hover-tint: var(--surface-2);
    --sky: var(--accent-tint);
    --peach: var(--brand);
    --accent-deep: var(--brand-strong);
    --apricot: var(--surface);
    --cream: var(--surface);
    --ink: var(--text-strong);
    --ink-soft: var(--text);
    --ink-faint: var(--text-weak);
    --on-accent: var(--brand-fill-text);
    --bg-base: var(--bg);
    --bg-surface: var(--surface);
    --bg-surface-header: var(--surface);
    --bg-sidebar: var(--surface);
    --color-cyan: var(--brand);
    --color-cyan-glow: var(--accent-tint);
    --color-blue: var(--brand-strong);
    --color-blue-glow: var(--accent-tint);
    --color-green: var(--success);
    --color-red: var(--danger);
    --color-violet: var(--violet);
    --border-dim: 1px solid var(--border);
    --border-tech: 1px solid var(--brand);
    --border-tech-active: 1px solid var(--brand-strong);
}

/* --------------------------------------------------------------------------
   Design tokens — DARK
   Applies when the user chose dark, or when the OS prefers dark and no
   explicit choice was made. The admin panel follows the toggle like every
   other page (its own slate "workbench" palette is in the .page-admin block).
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --bg:            #0f1f2e;
    --bg-subtle:     #16293a;
    --surface:       #1a334a;
    --surface-2:     #21415c;
    --border:        #294f6e;
    --border-strong: #35648a;

    --text-strong:   #eef6f8;
    --text:          #c5d6de;
    --text-weak:     #8fa9b6;
    --text-weakest:  #6b8492;

    --brand:          #5cc8ec;
    --brand-strong:   #8ad9f2;
    --brand-fill:      #27e6ec;
    --brand-fill-text: #05232a;

    --accent:        #27e6ec;
    --accent-ink:    #05232a;
    --accent-tint:   rgba(39, 230, 236, 0.12);

    --success:       #2bc0a3;
    --success-tint:  rgba(24, 163, 135, 0.14);
    --danger:        #e8836a;
    --danger-tint:   rgba(217, 96, 63, 0.16);
    --violet:        #9a9ccf;

    --ring:          #27e6ec;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.44);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.40), 0 30px 60px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0f1f2e;
        --bg-subtle:     #16293a;
        --surface:       #1a334a;
        --surface-2:     #21415c;
        --border:        #294f6e;
        --border-strong: #35648a;

        --text-strong:   #eef6f8;
        --text:          #c5d6de;
        --text-weak:     #8fa9b6;
        --text-weakest:  #6b8492;

        --brand:          #5cc8ec;
        --brand-strong:   #8ad9f2;
        --brand-fill:      #27e6ec;
        --brand-fill-text: #05232a;

        --accent:        #27e6ec;
        --accent-ink:    #05232a;
        --accent-tint:   rgba(39, 230, 236, 0.12);

        --success:       #2bc0a3;
        --success-tint:  rgba(24, 163, 135, 0.14);
        --danger:        #e8836a;
        --danger-tint:   rgba(217, 96, 63, 0.16);
        --violet:        #9a9ccf;

        --ring:          #27e6ec;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.34);
        --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.44);
        --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.40), 0 30px 60px rgba(0, 0, 0, 0.55);
    }
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-mid), color var(--transition-mid);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    color: var(--text-strong);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--brand-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

img { max-width: 100%; }

/* Legacy top telemetry bar — retired in this design */
.system-status-bar { display: none !important; }

/* ==========================================================================
   Header
   ========================================================================== */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: var(--header-h);
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    padding-inline: max(20px, calc((100% - var(--maxw-bar)) / 2));
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

header img {
    height: 30px;
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-main {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    color: var(--text-strong);
}

.logo-sub {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text-weakest);
    margin-top: 2px;
}

nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

nav button {
    appearance: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-strong);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

nav button:hover { background: var(--bg-subtle); }
nav button:active { transform: scale(0.97); }

/* Primary — filled navy */
nav button#login-btn {
    background: var(--brand-fill);
    border-color: transparent;
    color: var(--brand-fill-text);
}
nav button#login-btn:hover { background: var(--brand-strong); }

/* Renew session — teal, coloured by default */
nav button#renew-btn {
    background: var(--success-tint);
    border-color: transparent;
    color: var(--success);
}
nav button#renew-btn:hover { background: var(--success); color: #ffffff; }

/* Logout — red, coloured by default */
nav button#logout-btn,
nav button#logout-shared-btn {
    background: var(--danger-tint);
    border-color: transparent;
    color: var(--danger);
}
nav button#logout-btn:hover,
nav button#logout-shared-btn:hover { background: var(--danger); color: #ffffff; }

/* My page — accent-tinted */
nav button#mypage-btn {
    background: var(--accent-tint);
    border-color: transparent;
    color: var(--brand);
}
nav button#mypage-btn:hover { background: var(--surface); border-color: var(--brand); }

/* Admin Panel — red, coloured by default */
nav button#admin-btn {
    background: var(--danger-tint);
    border-color: transparent;
    color: var(--danger);
}
nav button#admin-btn:hover { background: var(--danger); color: #ffffff; }

/* Theme toggle — icon only, quiet outline */
nav button#theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

#user-chip {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-weak);
    padding: 7px 12px;
    background: var(--bg-subtle);
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   Section navigation bar (was the left sidebar <aside>)
   ========================================================================== */
main {
    flex: 1;
    display: block;
    width: 100%;
}

.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 18px 12px;
    font-size: 0.78rem;
    color: var(--text-weakest);
    border-top: 1px solid var(--border);
}
.site-footer a {
    color: var(--text-weakest);
    text-decoration: none;
}
.site-footer a:hover { color: var(--brand); text-decoration: underline; }

.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px clamp(16px, 4vw, 28px) 80px;
    color: var(--text);
    line-height: 1.8;
}
.legal-page h1 { font-size: 1.6rem; margin-bottom: 4px; }
.legal-page .legal-updated { color: var(--text-weakest); font-size: 0.85rem; margin-bottom: 2rem; }
.legal-page h2 { font-size: 1.05rem; margin: 2rem 0 0.6rem; }
.legal-page p, .legal-page li { color: var(--text-weak); font-size: 0.94rem; }
.legal-page ul { padding-left: 1.4rem; margin: 0.4rem 0; }
.legal-page li { margin: 0.3rem 0; }
.legal-page strong { color: var(--text-strong); }

aside {
    position: sticky;
    top: var(--header-h);
    z-index: 90;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.sidebar-header,
.sidebar-footer { display: none; }

aside ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;             /* one line */
    align-items: stretch;
    gap: 0;
    max-width: var(--maxw-bar);
    margin: 0 auto;
    padding-inline: max(10px, calc((100% - var(--maxw-bar)) / 2 + 10px));
    /* clip horizontally (no scrollbar) but let dropdowns spill DOWN */
    overflow-x: clip;
    overflow-y: visible;
}

aside ul li {
    position: relative;
    flex: 0 0 auto;
}

aside ul li a {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 15px 13px 13px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-weak);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

aside ul li a:hover {
    color: var(--text-strong);
    background: var(--bg-subtle);
    text-decoration: none;
}

aside ul li a.active {
    color: var(--text-strong);
    background: var(--bg-subtle);
    border-bottom-color: var(--accent);
}

/* the "01 / 02" numeric prefixes — hidden in this cleaner nav */
.nav-num { display: none; }

/* Dropdown submenus */
aside ul li .submenu-toggle {
    position: absolute;
    right: 2px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: pointer;
    color: var(--text-weakest);
}
aside ul li .submenu-toggle span {
    display: inline-block;
    transition: transform var(--transition-fast);
}
aside ul li.has-submenu > a { padding-right: 30px; }

aside ul li ul.submenu {
    list-style: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 20;
}

aside ul li.has-submenu:hover > ul.submenu,
aside ul li.has-submenu.open > ul.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
aside ul li.has-submenu:hover > .submenu-toggle span,
aside ul li.has-submenu.open > .submenu-toggle span {
    transform: rotate(90deg);
}

aside ul li ul.submenu li a {
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.88rem;
    color: var(--text);
    border-bottom: 0;
}
aside ul li ul.submenu li a:hover {
    background: var(--bg-subtle);
    color: var(--text-strong);
}

/* ==========================================================================
   Main content container
   ========================================================================== */
section#view,
.site-view {
    display: block;
    max-width: var(--maxw);
    width: 100%;
    margin: 0 auto;
    padding: 56px 24px 96px;
    background: transparent;
    border: 0;
    border-radius: 0;
    min-height: 60vh;
}

/* ==========================================================================
   Section headers & hero banner
   ========================================================================== */
.section-header {
    margin-bottom: 40px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.section-tag,
.banner-tag {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 10px;
}

section h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 800;
    color: var(--text-strong);
}

.section-desc {
    margin-top: 12px;
    color: var(--text-weak);
    font-size: 1.02rem;
}

.terminal-banner {
    border: 0;
    padding: 0;
    margin: 8px 0 56px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5.4vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--text-strong);
    line-height: 1.15;
    margin-bottom: 18px;
}

.lead-text {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 1.22rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.5;
}

.hero-desc {
    color: var(--text-weak);
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 64ch;
}

/* ==========================================================================
   Fade-in
   ========================================================================== */
.animate-fade-in {
    animation: renderContent 0.34s cubic-bezier(0.1, 0.9, 0.2, 1) both;
}

@keyframes renderContent {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Card primitives — feature / roadmap / timeline / telemetry / challenge
   ========================================================================== */
.feat-card,
.roadmap-card,
.timeline-content,
.tel-box,
.challenge-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.feat-card:hover,
.roadmap-card:hover,
.timeline-content:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
    transform: translateY(-3px);
}

/* Grids */
.features-grid,
.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

/* Small labels shared by cards */
.feat-card-id,
.card-badge,
.presenter,
.panel-title,
.timeline-date {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-weak);
}

.timeline-date { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }

.feat-card-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.feat-card h4,
.card-title,
.roadmap-card h3,
.timeline-title,
.timeline-content h3 {
    font-family: var(--font-heading);
    font-size: 1.24rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.02em;
}

.feat-card p,
.card-desc,
.roadmap-card p,
.timeline-content p {
    color: var(--text-weak);
    font-size: 0.97rem;
    line-height: 1.7;
    margin-top: 8px;
}

/* External-link feature cards */
.feat-card-link,
a > .feat-card {
    background: var(--accent-tint);
    border-color: rgba(39, 230, 236, 0.45);
}
.feat-card-link:hover,
a > .feat-card:hover {
    border-color: var(--accent);
}
a > .feat-card h4 { color: var(--brand); }

/* Telemetry box */
.tel-box { padding: 22px; }
.tel-label { font-size: 0.85rem; font-weight: 600; color: var(--text-weak); font-style: normal; margin-bottom: 8px; }
.tel-value { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 800; color: var(--text-strong); line-height: 1; letter-spacing: -0.03em; }
.tel-desc  { font-size: 0.82rem; color: var(--text-weakest); margin-top: 6px; }

/* ==========================================================================
   Curriculum roadmap
   ========================================================================== */
.roadmap-card { padding: 30px 28px; }
.card-badge { display: block; margin-bottom: 12px; text-transform: uppercase; }
.card-title, .roadmap-card h3 { margin-bottom: 10px; }
.card-desc, .roadmap-card p { margin-bottom: 22px; }

.card-topics,
.roadmap-card ul {
    list-style: none;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.card-topics li,
.roadmap-card ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--text-weak);
    margin-bottom: 10px;
}

.roadmap-card ul li::before,
.topic-dot {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    flex-shrink: 0;
    display: inline-block;
}

/* ==========================================================================
   Seminar timeline
   ========================================================================== */
.timeline {
    position: relative;
    padding-left: 30px;
    margin-left: 6px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--border);
}

.timeline-item { position: relative; margin-bottom: 28px; }
.timeline-item:last-child { margin-bottom: 0; }

.timeline-item::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 26px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent);
    z-index: 2;
    transition: transform var(--transition-fast);
}
.timeline-item:hover::before { transform: scale(1.25); }

.timeline-date { display: block; margin-bottom: 10px; }
.timeline-content { padding: 24px 26px; }
.timeline-title, .timeline-content h3 { margin-bottom: 8px; }
.presenter { display: block; margin-top: 14px; font-style: normal; }

/* ==========================================================================
   CTF dashboard
   ========================================================================== */
.ctf-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: start;
}

.panel-title {
    display: block;
    margin-bottom: 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
    font-style: normal;
    letter-spacing: -0.01em;
}

.ctf-table,
.scoreboard-section table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ctf-table th,
.scoreboard-section table th {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-weakest);
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.ctf-table td,
.scoreboard-section table td {
    padding: 15px 18px;
    font-size: 0.9rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.ctf-table tbody tr:last-child td,
.scoreboard-section table tbody tr:last-child td { border-bottom: 0; }

.ctf-table tbody tr,
.scoreboard-section table tbody tr { transition: background var(--transition-fast); }
.ctf-table tbody tr:hover,
.scoreboard-section table tbody tr:hover { background: var(--bg-subtle); }

.ctf-table td.user-cell,
.scoreboard-section table td:nth-child(2) {
    font-weight: 700;
    color: var(--text-strong);
}
.ctf-table td.pts-cell,
.scoreboard-section table td:nth-child(3) {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text-strong);
}
.ctf-table td.status-cell,
.scoreboard-section table td:nth-child(4) {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-weak);
}

.rank-1 td.user-cell, .scoreboard-section table tbody tr:nth-child(1) td:nth-child(2) { color: var(--brand); }
.rank-2 td.user-cell, .scoreboard-section table tbody tr:nth-child(2) td:nth-child(2) { color: var(--text-weak); }
.rank-3 td.user-cell, .scoreboard-section table tbody tr:nth-child(3) td:nth-child(2) { color: var(--violet); }

.challenge-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.challenge-card {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.challenge-card:hover { box-shadow: var(--shadow-md); }

.challenge-card.solved {
    border-color: rgba(24, 163, 135, 0.35);
    border-left: 3px solid var(--success);
    background: var(--success-tint);
}

.chal-category {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 0;
    color: var(--brand-strong);
    background: var(--accent-tint);
}
.chal-category.pwn       { background: rgba(24, 163, 135, 0.16);  color: #12735f; }
.chal-category.rev       { background: rgba(90, 165, 205, 0.20);  color: #2f6d8f; }
.chal-category.crypto    { background: rgba(111, 113, 161, 0.18); color: #54568a; }
.chal-category.forensics { background: rgba(30, 83, 110, 0.14);   color: #1e536e; }
.chal-category.misc      { background: var(--bg-subtle);          color: var(--text-weak); }

.chal-details { flex: 1; min-width: 0; }
.chal-details h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 2px;
}
.chal-pts { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-weak); }
.challenge-card.solved .chal-pts { color: var(--success); }

.status-badge {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    color: var(--text-weak);
}
.status-badge.solved { color: var(--success); }
.status-badge.open   { color: var(--brand); }

/* Admin block preview widget */
.menu-item-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.9rem;
}
.menu-item-preview ul { margin: 6px 0 0 18px; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    margin-top: auto;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    padding: 40px 24px;
    text-align: center;
    color: var(--text-weakest);
    font-size: 0.82rem;
    letter-spacing: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
    .ctf-container { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {
    :root { --header-h: 56px; }

    header { padding-inline: 12px; gap: 8px; }
    .logo-sub { display: none; }
    .logo-main { font-size: 1.05rem; }
    header img { height: 26px; }

    /* let the action buttons scroll rather than overflow the bar */
    nav {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-end;
        -webkit-overflow-scrolling: touch;
    }
    nav::-webkit-scrollbar { display: none; }
    nav button { padding: 8px 12px; font-size: 0.8rem; flex: 0 0 auto; white-space: nowrap; }
    nav button#theme-toggle { width: 34px; height: 34px; }

    section#view, .site-view { padding: 36px 18px 72px; }

    .features-grid,
    .roadmap-grid,
    .telemetry-grid { grid-template-columns: 1fr; }

    aside ul li ul.submenu {
        position: static;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 6px 12px;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    aside ul li.has-submenu.open > ul.submenu { display: block; }
    /* on phones the bar may wrap / scroll rather than clip items off-screen */
    aside ul { gap: 0; flex-wrap: wrap; overflow-x: auto; }
}

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

/* ==========================================================================
   [11] Admin Control Panel — "workbench" styling
   Its own slate palette, tokenised so it follows the light / dark toggle.
   Dark values are the default; the light block flips them.
   ========================================================================== */
.page-admin {
    --ap-fg:            #e2e8f0;   /* primary text */
    --ap-fg-2:          #94a3b8;   /* secondary text */
    --ap-fg-3:          #64748b;   /* muted text */
    --ap-panel:         #0f172a;   /* pane / card base */
    --ap-panel-2:       #151b2d;   /* raised card / header strip */
    --ap-editor-bg:     #0b1220;   /* preview backdrop */
    --ap-input-bg:      rgba(10, 15, 26, 0.65);
    --ap-input-fg:      #ffffff;
    --ap-overlay:       rgba(4, 6, 10, 0.98);
    --ap-line:          rgba(255, 255, 255, 0.08);
    --ap-line-2:        rgba(255, 255, 255, 0.05);
    --ap-line-strong:   rgba(255, 255, 255, 0.22);
    --ap-fill:          rgba(255, 255, 255, 0.03);
    --ap-fill-strong:   rgba(255, 255, 255, 0.10);
    --ap-accent:        #27e6ec;
    color: var(--ap-fg);
}

:root[data-theme="light"] .page-admin {
    --ap-fg:            #1f2a37;
    --ap-fg-2:          #59636f;
    --ap-fg-3:          #7b8791;
    --ap-panel:         #f1f4f7;
    --ap-panel-2:       #ffffff;
    --ap-editor-bg:     #eceff3;
    --ap-input-bg:      #ffffff;
    --ap-input-fg:      #16324a;
    --ap-overlay:       rgba(238, 241, 245, 0.97);
    --ap-line:          rgba(20, 40, 60, 0.16);
    --ap-line-2:        rgba(20, 40, 60, 0.10);
    --ap-line-strong:   rgba(20, 40, 60, 0.30);
    --ap-fill:          rgba(20, 40, 60, 0.03);
    --ap-fill-strong:   rgba(20, 40, 60, 0.07);
    --ap-accent:        #1e536e;
}

/* Tabs Navigation & Buttons styling */
.page-admin .admin-tabs-nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--ap-line);
    padding-bottom: 1rem;
}

.page-admin .admin-tab-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 10px 20px;
    font-family: var(--font-mono), monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid var(--ap-line);
    color: var(--ap-fg-3);
    background: var(--ap-fill);
}

.page-admin .admin-tab-btn[data-tab="users"]:hover,
.page-admin .admin-tab-btn[data-tab="users"].active {
    border-color: #ff4b4b;
    color: #ff4b4b;
    background: rgba(255, 75, 75, 0.08);
    box-shadow: 0 0 12px rgba(255, 75, 75, 0.2);
}

.page-admin .admin-tab-btn[data-tab="content"]:hover,
.page-admin .admin-tab-btn[data-tab="content"].active {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    background: rgba(39, 230, 236, 0.08);
    box-shadow: 0 0 12px rgba(39, 230, 236, 0.2);
}

.page-admin .admin-tab-pane {
    display: none;
}

.page-admin .admin-tab-pane.active {
    display: block;
}


/* Reset and apply cybernetic style to ALL buttons on the admin page */
.page-admin button, 
.page-admin .action-btn, 
.page-admin .tool-btn {
    all: unset; /* reset browser default button styles */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: 'Space Grotesk', var(--font-body), sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

/* Standard cybernetic cyan button outline */
.page-admin button.action-btn,
.page-admin button[type="submit"] {
    background: rgba(39, 230, 236, 0.03);
    border: 1px solid var(--color-cyan);
    color: var(--color-cyan);
    width: 100%;
}

.page-admin button.action-btn:hover,
.page-admin button[type="submit"]:hover {
    background: var(--color-cyan) !important;
    color: #000000 !important;
    box-shadow: 0 0 15px rgba(39, 230, 236, 0.4);
}

.page-admin button.action-btn:active,
.page-admin button[type="submit"]:active {
    transform: scale(0.98);
}

/* File Upload Button Specifics */
.page-admin #admin-upload-trigger-btn {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid #10b981;
    color: #10b981;
    font-size: 0.75rem;
    padding: 8px 14px;
    width: auto;
}
.page-admin #admin-upload-trigger-btn:hover {
    background: #10b981 !important;
    color: #000000 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

/* Block creation toolbar container */
.page-admin .block-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 1.5rem;
    background: var(--ap-input-bg);
    border-bottom: 1px solid var(--ap-line-2);
    box-sizing: border-box;
    align-items: center;
}

/* Tool Buttons inside toolbar */
.page-admin .block-toolbar .tool-btn {
    background: var(--ap-panel-2);
    border: 1px solid var(--ap-line);
    color: var(--ap-fg);
    padding: 6px 12px;
    font-size: 0.72rem;
    font-family: var(--font-mono), monospace;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.5px;
}
.page-admin .block-toolbar .tool-btn:hover {
    background: rgba(39, 230, 236, 0.06) !important;
    border-color: var(--ap-accent) !important;
    color: var(--ap-accent) !important;
    box-shadow: 0 0 10px rgba(39, 230, 236, 0.15);
    transform: translateY(-1px);
}
.page-admin .block-toolbar .tool-btn:active {
    transform: translateY(0);
}

/* All inputs, textareas, and select elements on admin page */
.page-admin input[type="text"],
.page-admin input[type="password"],
.page-admin select,
.page-admin textarea,
.page-admin .block-form-input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    background: var(--ap-input-bg);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 4px;
    color: var(--ap-input-fg);
    font-family: var(--font-body), sans-serif;
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s ease;
}

.page-admin input[type="text"]::placeholder,
.page-admin input[type="password"]::placeholder,
.page-admin textarea::placeholder,
.page-admin .block-form-input::placeholder {
    color: rgba(148, 163, 184, 0.35); /* clearly visible but placeholder-like */
}

.page-admin input[type="text"]:focus,
.page-admin input[type="password"]:focus,
.page-admin select:focus,
.page-admin textarea:focus,
.page-admin .block-form-input:focus {
    border-color: var(--ap-accent);
    background: var(--ap-input-bg);
    box-shadow: 0 0 8px rgba(39, 230, 236, 0.25);
}

/* Select element styling */
.page-admin select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233b82f6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.page-admin select option {
    background-color: var(--ap-panel) !important;
    color: var(--ap-fg) !important;
}

/* Contenteditable Rich Text Editor styling */
.page-admin .content-editor {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-y: auto;
    min-height: 60px;
}
.page-admin .content-editor img {
    max-width: 100%;
    min-width: 80px;
    min-height: 80px;
    border: 1px dashed var(--ap-line-strong);
    background: var(--ap-fill);
    border-radius: 4px;
    margin: 10px 0;
    display: block;
    cursor: pointer;
}
.page-admin .content-editor img.img-broken {
    width: 280px !important;
    height: 140px !important;
    border: 2px dashed #f87171 !important;
    background: var(--ap-panel-2) !important;
    position: relative !important;
    display: block !important;
}
.page-admin .content-editor img.img-broken::before {
    content: "⚠️ 이미지를 불러올 수 없습니다";
    white-space: pre-wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--ap-panel-2);
    color: #f87171;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 500;
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
}

/* Custom textarea style, scrollbars and grab handle resize style */
.page-admin textarea {
    resize: vertical; /* only vertical resize allowed */
    min-height: 100px;
    word-break: break-word;      /* wrap long English words */
    overflow-wrap: break-word;   /* fallback for older browsers */
    white-space: pre-wrap;       /* respect newlines + wrap */
}

.page-admin textarea::-webkit-scrollbar {
    width: 6px;
}
.page-admin textarea::-webkit-scrollbar-track {
    background: transparent;
}
.page-admin textarea::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 3px;
}
.page-admin textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(39, 230, 236, 0.4);
}

.page-admin textarea::-webkit-resizer {
    background-image: linear-gradient(135deg, transparent 60%, rgba(39, 230, 236, 0.6) 60%);
    width: 12px;
    height: 12px;
}

/* Left Sidebar Block Cards */
.page-admin .block-hierarchy-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--ap-panel-2);
    border: 1px solid var(--ap-line);
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.page-admin .block-hierarchy-card:hover {
    background: var(--ap-panel-2);
    border-color: var(--ap-line-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.page-admin .block-hierarchy-card.active {
    background: rgba(39, 230, 236, 0.05) !important;
    border-color: var(--ap-accent) !important;
    box-shadow: 0 0 12px rgba(39, 230, 236, 0.25);
}

/* Color-coded left border based on block type */
.page-admin .block-hierarchy-card.block-type-banner { border-left: 3px solid var(--ap-accent); }
.page-admin .block-hierarchy-card.block-type-header { border-left: 3px solid #a855f7; }
.page-admin .block-hierarchy-card.block-type-features { border-left: 3px solid #3b82f6; }
.page-admin .block-hierarchy-card.block-type-spacer { border-left: 3px solid var(--ap-fg-3); }
.page-admin .block-hierarchy-card.block-type-phases { border-left: 3px solid #f59e0b; }
.page-admin .block-hierarchy-card.block-type-timeline { border-left: 3px solid #10b981; }
.page-admin .block-hierarchy-card.block-type-ctf_dashboard { border-left: 3px solid #eab308; }

/* Custom badges for block type tag */
.page-admin .block-badge {
    font-size: 0.6rem;
    font-weight: 800;
    font-family: var(--font-mono), monospace;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.page-admin .block-badge-banner { background: rgba(39, 230, 236, 0.1); color: var(--ap-accent); border: 1px solid rgba(39, 230, 236, 0.2); }
.page-admin .block-badge-header { background: rgba(168, 85, 247, 0.1); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.2); }
.page-admin .block-badge-features { background: rgba(59, 130, 246, 0.1); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.2); }
.page-admin .block-badge-spacer { background: rgba(100, 116, 139, 0.1); color: var(--ap-fg-2); border: 1px solid rgba(100, 116, 139, 0.2); }
.page-admin .block-badge-phases { background: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
.page-admin .block-badge-timeline { background: rgba(16, 185, 129, 0.1); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.2); }
.page-admin .block-badge-ctf_dashboard { background: rgba(234, 179, 8, 0.1); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.2); }
.page-admin .block-badge-menu_item { background: rgba(251, 191, 36, 0.08); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.25); }

/* Hierarchy small utility buttons (up/down arrows) */
.page-admin .block-hierarchy-card .hierarchy-btn {
    padding: 4px 6px;
    font-size: 0.65rem;
    background: var(--ap-fill);
    border: 1px solid var(--ap-line);
    color: var(--ap-fg);
    border-radius: 3px;
    width: auto;
    letter-spacing: 0;
    text-transform: none;
}
.page-admin .block-hierarchy-card .hierarchy-btn:hover {
    background: var(--ap-line) !important;
    border-color: var(--ap-line-strong) !important;
    color: #fff !important;
}

/* Left panel delete button */
.page-admin .block-hierarchy-card .hierarchy-btn.delete-block {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}
.page-admin .block-hierarchy-card .hierarchy-btn.delete-block:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

/* Block Card Items - Visual card lists inside form */
.page-admin .block-card-item {
    background: var(--ap-panel-2);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-left: 3px solid rgba(39, 230, 236, 0.5); /* distinct glowing cybernetic bar */
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}
.page-admin .block-card-item:hover {
    border-color: rgba(39, 230, 236, 0.35);
    background: var(--ap-panel-2);
    border-left-color: var(--ap-accent);
    box-shadow: 0 4px 15px rgba(39, 230, 236, 0.05);
}

/* Sub-card Header */
.page-admin .block-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ap-line-2);
    padding-bottom: 8px;
}
.page-admin .block-card-title-label {
    font-size: 0.72rem;
    color: var(--ap-accent);
    font-family: var(--font-mono), monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Sub-card Delete button overrides */
.page-admin .block-card-item .delete-card-item, 
.page-admin .block-card-item .delete-leaderboard-item, 
.page-admin .block-card-item .delete-challenge-item {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 4px 10px;
    font-size: 0.7rem;
    width: auto;
    text-transform: none;
    letter-spacing: 0;
}
.page-admin .block-card-item .delete-card-item:hover, 
.page-admin .block-card-item .delete-leaderboard-item:hover, 
.page-admin .block-card-item .delete-challenge-item:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

/* Sub-card Add button overrides */
.page-admin .add-card-item, 
.page-admin .add-leaderboard-item, 
.page-admin .add-challenge-item {
    background: rgba(16, 185, 129, 0.03) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #10b981 !important;
    width: 100%;
    padding: 10px !important;
    font-size: 0.75rem !important;
}
.page-admin .add-card-item:hover, 
.page-admin .add-leaderboard-item:hover, 
.page-admin .add-challenge-item:hover {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: #10b981 !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

/* User Registration List delete button */
.page-admin .delete-user-btn {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    padding: 4px 8px;
    font-size: 0.7rem;
    width: auto;
    text-transform: none;
    letter-spacing: 0;
}
.page-admin .delete-user-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

/* Drag and Drop visual feedback for block editor cards */
.page-admin .block-hierarchy-card.dragging {
    opacity: 0.45;
    border-style: dashed !important;
    border-color: var(--ap-accent) !important;
    background: var(--ap-input-bg) !important;
}

.page-admin .block-hierarchy-card.drag-over {
    border-color: var(--ap-accent) !important;
    background: rgba(39, 230, 236, 0.12) !important;
    transform: scale(1.02);
    box-shadow: 0 0 12px rgba(39, 230, 236, 0.25);
}

/* Fullscreen overlay editor wrapper */
.page-admin .admin-fullscreen-overlay {
    display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--ap-overlay);
    backdrop-filter: blur(16px);
    z-index: 2000;
    flex-direction: column;
    box-sizing: border-box;
    animation: adminFadeIn 0.25s ease-out;
}

.page-admin .admin-fullscreen-overlay.active {
    display: flex;
}

/* While a fullscreen editor overlay is open, drop toasts below its header
   (~75px) so they don't cover the SAVE / CLOSE buttons at the top-right. */
body:has(.admin-fullscreen-overlay.active) .toast {
    top: 90px;
    z-index: 2100;
}

@keyframes adminFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Header */
.page-admin .overlay-header {
    height: 75px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    background: var(--ap-input-bg);
    box-sizing: border-box;
}

.page-admin .overlay-title-sec {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-admin .overlay-title-sec .title-text {
    font-family: var(--font-heading), sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-cyan);
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px rgba(39, 230, 236, 0.2);
}

/* Pulsing dot indicator for cybernetic theme */
.page-admin .pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-cyan);
    animation: adminPulse 1.5s infinite;
}

@keyframes adminPulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 15px var(--color-cyan); }
    100% { transform: scale(0.9); opacity: 0.6; }
}

.page-admin .overlay-controls {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.page-admin .control-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-admin .control-group label {
    font-family: var(--font-mono), monospace;
    font-size: 0.65rem;
    color: var(--ap-fg-3);
    font-weight: 700;
    letter-spacing: 1px;
}

.page-admin .control-group select {
    width: 180px;
    padding: 8px 12px;
    font-size: 0.75rem;
}

.page-admin .filename-text {
    font-family: var(--font-mono), monospace;
    font-size: 0.7rem;
    color: var(--ap-fg-3);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-admin .overlay-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Overriding overlay button sizes to make them sleek */
.page-admin .overlay-header button.action-btn {
    width: auto;
    padding: 8px 16px;
    font-size: 0.75rem;
}

.page-admin .overlay-header button.save-btn {
    border-color: var(--ap-accent);
    color: var(--ap-accent);
    background: rgba(39, 230, 236, 0.05);
}
.page-admin .overlay-header button.save-btn:hover {
    background: var(--ap-accent) !important;
    color: #000 !important;
}

.page-admin .overlay-header button.close-btn {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}
.page-admin .overlay-header button.close-btn:hover {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.page-admin .overlay-header button.upload-btn {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
    padding: 6px 12px;
    font-size: 0.72rem;
}

/* Workspace Grid (Independent column scrolling!) */
.page-admin .overlay-workspace {
    flex: 1;
    display: grid;
    grid-template-columns: 260px 6px 1.2fr 6px 1fr;
    box-sizing: border-box;
    overflow: hidden; /* layout itself doesn't scroll */
}

@media (max-width: 1024px) {
    .page-admin .overlay-workspace {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .page-admin .workspace-pane {
        height: auto !important;
        max-height: none !important;
    }
}

.page-admin .workspace-pane {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 75px);
    box-sizing: border-box;
}

.page-admin .block-list-pane {
    border-right: none;
}

.page-admin .form-editor-pane {
    border-right: none;
}

.page-admin .workspace-pane .pane-header {
    height: 40px;
    background: var(--ap-panel-2);
    border-bottom: 1px solid var(--ap-line-2);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    font-family: var(--font-mono), monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ap-fg-3);
    letter-spacing: 1px;
    box-sizing: border-box;
}

.page-admin .workspace-pane .pane-content {
    flex: 1;
    overflow-y: auto; /* Independent Pane Scrolling */
    padding: 1.5rem;
    box-sizing: border-box;
}

.page-admin .block-list-pane .pane-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--ap-panel);
}

.page-admin .form-editor-pane .pane-content {
    background: var(--ap-panel);
}

.page-admin .preview-pane .pane-content {
    background: var(--ap-panel-2);
}

/* Custom styled scrollbars inside overlay editor for sleek UI */
.page-admin .pane-content::-webkit-scrollbar {
    width: 6px;
}
.page-admin .pane-content::-webkit-scrollbar-track {
    background: transparent;
}
.page-admin .pane-content::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 3px;
}
.page-admin .pane-content::-webkit-scrollbar-thumb:hover {
    background: rgba(39, 230, 236, 0.4);
}

/* Cybernetic Resizer Bars between panes */
.page-admin .workspace-resizer {
    width: 6px;
    background: rgba(39, 230, 236, 0.08);
    border-left: 1px solid rgba(39, 230, 236, 0.2);
    border-right: 1px solid rgba(39, 230, 236, 0.2);
    cursor: col-resize;
    position: relative;
    z-index: 100;
    transition: all 0.2s ease;
    user-select: none;
    height: 100%;
}

.page-admin .workspace-resizer:hover,
.page-admin .workspace-resizer.active {
    background: var(--color-cyan) !important;
    border-left-color: var(--color-cyan);
    border-right-color: var(--color-cyan);
    box-shadow: 0 0 12px rgba(39, 230, 236, 0.6);
}

.page-admin .workspace-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 24px;
    background: rgba(39, 230, 236, 0.4);
    border-radius: 1px;
    transition: background 0.2s;
}

.page-admin .workspace-resizer:hover::after,
.page-admin .workspace-resizer.active::after {
    background: #000;
}

/* Dragging state body cursor overrides */
body.resizing-active {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ==========================================================================
   Admin Control Panel Scoped Styles
   ========================================================================== */
.page-admin .admin-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

.page-admin .admin-banner {
    margin-bottom: 2rem;
}

.page-admin .admin-banner .hero-title {
    color: #ff4b4b;
}

.page-admin .admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    grid-auto-rows: min-content;
}

.page-admin .admin-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Log Card variations */
.page-admin .log-card {
    padding: 1.5rem 1.25rem;
    background-color: var(--bg-surface);
    display: flex;
    flex-direction: column;
    border-radius: 4px;
}

.page-admin .log-card.card-red {
    border: 1px solid rgba(255, 75, 75, 0.15);
}

.page-admin .log-card.card-blue {
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.page-admin .log-card.card-purple {
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.page-admin .log-card-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.page-admin .log-card.card-red .log-card-title {
    color: #ff4b4b;
    margin-bottom: 1.5rem;
}

.page-admin .log-card.card-blue .log-card-title {
    color: #3b82f6;
    margin-bottom: 1rem;
}

.page-admin .log-card.card-purple .log-card-title {
    color: #a855f7;
    margin-bottom: 1.5rem;
}

/* CSV Uploading Form elements */
.page-admin .log-card p {
    font-size: 0.75rem;
    color: var(--ap-fg-2);
    line-height: 1.4;
    margin-bottom: 1.2rem;
}

.page-admin .download-wrapper {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-admin .download-btn {
    text-decoration: none;
    text-align: center;
    font-size: 0.72rem;
    padding: 6px 12px;
    border-color: rgba(59, 130, 246, 0.5);
    color: #3b82f6;
    width: auto;
    font-weight: 600;
}

.page-admin input[type="file"] {
    font-size: 0.8rem;
    background: var(--ap-line-2);
    padding: 8px;
    border: 1px dashed var(--ap-line-strong);
    border-radius: 4px;
    color: var(--ap-fg);
}

.page-admin .csv-result {
    margin-top: 1rem;
    font-size: 0.75rem;
    display: none;
    padding: 10px;
    border-radius: 4px;
    line-height: 1.4;
}

/* User management table/list elements */
.page-admin .user-list-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-admin .user-list-header {
    display: flex;
    border-bottom: 1px solid var(--ap-line);
    padding: 0 8px 8px 8px;
    font-size: 0.75rem;
    color: var(--ap-fg-3);
    font-weight: 600;
}

.page-admin .user-list-header .header-col-username {
    flex: 2;
}

.page-admin .user-list-header .header-col-name {
    flex: 0.8;
}

.page-admin .user-list-header .header-col-solved {
    width: 60px;
    text-align: center;
}

.page-admin .user-list-header .header-col-fixed {
    width: 70px;
    text-align: center;
}

.page-admin .user-list-container {
    max-height: 520px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    border: 1px solid var(--ap-line);
    border-radius: 4px;
}

.page-admin .user-list-message {
    text-align: center;
    color: var(--ap-fg-3);
    padding: 20px;
    font-size: 0.8rem;
}

/* User list dynamic row styling */
.page-admin .user-row {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--ap-line);
    background: transparent;
    font-size: 0.8rem;
    color: var(--ap-fg);
    margin: 0;
    border-radius: 0;
    transition: background-color 0.15s;
}

.page-admin .user-row:last-child {
    border-bottom: none;
}

.page-admin .user-row:hover {
    background: var(--ap-fill);
}

.page-admin .user-row.super-admin-row {
    background: rgba(239, 68, 68, 0.02);
    border-bottom: 1px solid rgba(239, 68, 68, 0.25);
}

.page-admin .user-row.super-admin-row:hover {
    background: rgba(239, 68, 68, 0.05);
}

.page-admin .user-row.admin-row {
    background: rgba(59, 130, 246, 0.02);
    border-bottom: 1px solid rgba(59, 130, 246, 0.25);
}

.page-admin .user-row.admin-row:hover {
    background: rgba(59, 130, 246, 0.05);
}

.page-admin .user-row.blocked {
    color: var(--ap-fg-3);
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--ap-fill);
}

.page-admin .user-col-username {
    flex: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.page-admin .user-row.blocked .user-col-username {
    text-decoration: line-through;
}

.page-admin .user-col-name {
    flex: 0.8;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.page-admin .user-col-solved {
    width: 60px;
    text-align: center;
    color: #3b82f6;
}

.page-admin .user-col-activities,
.page-admin .header-col-activities {
    flex: 1;
    min-width: 0;
    padding-right: 8px;
}

.page-admin .user-col-solved a.view-solves-link {
    color: #3b82f6;
    text-decoration: underline;
    font-weight: 500;
    transition: color 0.15s ease;
}

.page-admin .user-col-solved a.view-solves-link:hover {
    color: #60a5fa;
}

.page-admin .blocked-badge {
    font-size: 0.65rem;
    color: #f59e0b;
    padding: 1px 4px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 3px;
    margin-left: 4px;
}

.page-admin .user-actions {
    width: 70px;
    display: flex;
    gap: 4px;
    justify-content: center;
    position: relative;
}

/* User Actions Dropdown Menu styling */
.user-actions-dropdown {
    position: fixed;
    z-index: 9999;
    background: var(--ap-panel-2);
    border: 1px solid var(--ap-line);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
    min-width: 130px;
    display: none;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.user-actions-dropdown.show {
    display: flex;
}

.user-actions-dropdown-item {
    padding: 10px 14px;
    font-size: 0.75rem;
    color: var(--ap-fg);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ap-line-2);
    text-align: left;
    cursor: pointer;
    width: 100%;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.user-actions-dropdown-item:last-child {
    border-bottom: none;
}

/* Option Specific Colors & Hover States */
.user-actions-dropdown-item.toggle-admin-option {
    color: #60a5fa;
}

.user-actions-dropdown-item.toggle-admin-option:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
}

.user-actions-dropdown-item.toggle-block-option {
    color: #fbbf24;
}

.user-actions-dropdown-item.toggle-block-option:hover {
    background: rgba(245, 158, 11, 0.1);
    color: #fde047;
}

.user-actions-dropdown-item.danger {
    color: #f87171;
}

.user-actions-dropdown-item.danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* Content Launch Screen styling */
.page-admin .content-launch-card {
    padding: 2.5rem;
    background-color: var(--bg-surface);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    text-align: center;
    border-radius: 4px;
}

.page-admin .content-launch-icon {
    font-size: 2.5rem;
}

.page-admin .content-launch-title {
    color: var(--color-cyan);
    font-size: 1.2rem;
    margin: 0;
    font-weight: 700;
}

.page-admin .content-launch-desc {
    color: var(--ap-fg-2);
    font-size: 0.85rem;
    max-width: 500px;
    margin: 0;
}

.page-admin .launch-btn {
    padding: 14px 28px;
    font-size: 0.9rem;
    border-color: var(--ap-accent);
    color: var(--ap-accent);
    font-weight: 700;
    width: auto;
    box-shadow: 0 0 15px rgba(39, 230, 236, 0.1);
}

/* Admin form styling & spacing */
.page-admin .admin-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.page-admin .admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.page-admin .admin-form button[type="submit"] {
    margin-top: 14px;
}

/* Responsive adjustments for admin panel grid and lists */
@media (max-width: 1024px) {
    .page-admin .admin-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.page-admin .user-list-wrapper {
    overflow-x: auto;
    width: 100%;
}

.page-admin .user-list-header,
.page-admin .user-row {
    min-width: unset;
}

/* Custom Tooltip style for admin user list activities */
.user-col-activities {
    position: relative;
}
.user-col-activities::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--ap-panel-2);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: var(--ap-fg);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.7);
    pointer-events: none;
    opacity: 0;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.user-col-activities:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ==========================================================================
   Misc polish
   ========================================================================== */
html { background: var(--bg); }

/* Hide the section-nav bar when it has no items (mypage / dreamhack / admin) */
aside:not(:has(li)) { display: none; }

/* Page wrappers that opt out of the centered container */
.page-home,
.curriculum-view,
.seminar-view,
.ctf-view { display: block; }

/* Keep external-link cards' inner text calm */
a[style*="text-decoration"] > .feat-card { height: 100%; }

/* ==========================================================================
   Free-canvas content sections (admin "PPT-style" editor output)
   ========================================================================== */
/* Palette tokens for canvas colours. The cool ramp c0(darkest)…c8(lightest)
   MIRRORS between themes — the lightest light-mode colour becomes the darkest
   in dark mode, so an author picks once and it adapts. Warm accents (w1/w2)
   and any pinned literal hex do not flip. */
.canvas-section {
    margin: 0;
    /* the canvas renders at up to its own design width (--cv-w, set by JS from
       data-canvas-w) — capped by the viewport, centred, with small gutters.
       Widening the canvas in the editor now genuinely widens it on screen. */
    max-width: calc(var(--cv-w, 1200px) + 2 * clamp(12px, 3vw, 28px));
    margin-inline: auto;
    padding-inline: clamp(12px, 3vw, 28px);
    --cvc-0: #0f1f2e; --cvc-1: #16324a; --cvc-2: #345066;
    --cvc-3: #1e536e; --cvc-4: #5aa5cd; --cvc-5: #27e6ec;
    --cvc-6: #d7e0e8; --cvc-7: #e9eef3; --cvc-8: #f3f6f9;
    --cvw-1: #e07b39; --cvw-2: #d24b4b;
}
:root[data-theme="dark"] .canvas-section {
    --cvc-0: #f3f6f9; --cvc-1: #e9eef3; --cvc-2: #d7e0e8;
    --cvc-3: #27e6ec; --cvc-4: #5aa5cd; --cvc-5: #1e536e;
    --cvc-6: #345066; --cvc-7: #16324a; --cvc-8: #0f1f2e;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .canvas-section {
        --cvc-0: #f3f6f9; --cvc-1: #e9eef3; --cvc-2: #d7e0e8;
        --cvc-3: #27e6ec; --cvc-4: #5aa5cd; --cvc-5: #1e536e;
        --cvc-6: #345066; --cvc-7: #16324a; --cvc-8: #0f1f2e;
    }
}

.canvas-frame {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;               /* clip the scaled-down stage */
}

.canvas-stage {
    position: relative;
    transform-origin: top left;
    transform: scale(var(--cv-scale, 1));
    color: var(--text);
    font-family: var(--font-body);
}

.cv-el {
    position: absolute;
    box-sizing: border-box;
}

.cv-text,
.cv-richtext {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.cv-richtext a { color: var(--brand); text-decoration: underline; }
.cv-richtext strong { font-weight: 700; }

.cv-image { background: var(--bg-subtle); }

.cv-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1;
    padding: 0 20px;
    cursor: pointer;
    transition: filter var(--transition-fast);
}
.cv-button:hover { filter: brightness(0.93); text-decoration: none; }

/* the canvas provides its own spacing; drop the container's reading padding */
section#view > .canvas-section:only-child,
.site-view > .canvas-section:only-child { margin: -8px auto 0; }

/* a page that is ONLY a free canvas: drop the 1080px reading-column cap and
   side padding so the canvas can use the full viewport width up to --cv-w */
section#view:has(> .canvas-section:only-child),
.site-view:has(> .canvas-section:only-child) {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ==========================================================================
   Admin — Free Canvas ("PPT-style") editor  (scoped, cyber-dark)
   ========================================================================== */
.page-admin .cve-workspace {
    flex: 1;
    min-height: 0;               /* fill whatever's left below the (wrapping) header */
    display: grid;
    grid-template-columns: 260px 340px 1fr;
    overflow: hidden;
}
.page-admin .cve-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid rgba(39, 230, 236, 0.12);
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;    /* grid items default to min-height:auto (= content size), which
                         let the pane grow past its row instead of clipping/scrolling —
                         same fix as min-width above, just for the other axis */
}

/* Free-canvas overlay header: title + SAVE/CLOSE pinned on the top line,
   section + template controls stacked below it. */
#admin-canvas-overlay .overlay-header {
    height: auto;
    min-height: 75px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 1.5rem;
}
#admin-canvas-overlay .overlay-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
#admin-canvas-overlay .overlay-topline-left {
    display: flex;
    align-items: center;
    gap: 14px 16px;
    flex-wrap: wrap;
    min-width: 0;
}
#admin-canvas-overlay .overlay-actions { flex-shrink: 0; }
#admin-canvas-overlay .overlay-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
#admin-canvas-overlay .cve-hdr-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}
#admin-canvas-overlay .cve-hdr-sep {
    align-self: stretch;
    width: 1px;
    background: var(--ap-line);
    margin: 2px 4px;
}
#admin-canvas-overlay .control-group { gap: 6px; }
#admin-canvas-overlay .control-group select { width: 160px; }
#admin-canvas-overlay .control-group input[type="text"] { width: 140px; padding: 7px 9px; }
@media (max-width: 700px) { #admin-canvas-overlay .cve-hdr-sep { display: none; } }
.page-admin .cve-pane-preview { border-right: 0; }
.page-admin .cve-scroll {
    flex: 1;
    min-height: 0;    /* flex items default to min-height:auto too — without this the
                         pane still stretches to fit its content instead of scrolling it */
    overflow-y: auto;
    padding: 14px;
    box-sizing: border-box;
}
.page-admin .cve-pane-preview .cve-scroll {
    background: var(--ap-editor-bg);
    overflow: auto;
    padding: 0;
}

/* zoom bar (sticky at the top of the preview pane) */
.page-admin .cvp-zoombar {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--ap-panel-2);
    border-bottom: 1px solid var(--ap-line);
}
.page-admin .cvp-zoombar button {
    all: unset;
    cursor: pointer;
    min-width: 26px;
    text-align: center;
    padding: 4px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ap-fg-2);
    border: 1px solid var(--ap-line);
    border-radius: 5px;
}
.page-admin .cvp-zoombar button:hover { color: var(--ap-fg); border-color: var(--ap-accent); }
.page-admin .cvp-zoom-label {
    min-width: 48px;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ap-fg-2);
    cursor: pointer;
    font-family: var(--font-mono), monospace;
}

.page-admin .cvp-sizer {
    position: relative;
    margin: 14px;
}

.cvp-marquee {
    border: 1px solid var(--ap-accent, #27e6ec);
    background: rgba(39, 230, 236, 0.12);
    pointer-events: none;
    z-index: 99998;
}

/* multi-select align toolbar */
.page-admin .cve-align-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.page-admin .cve-align-btn {
    all: unset;
    cursor: pointer;
    min-width: 28px;
    text-align: center;
    padding: 6px 8px;
    font-size: 0.85rem;
    color: var(--ap-fg-2);
    border: 1px solid var(--ap-line);
    border-radius: 5px;
}
.page-admin .cve-align-btn:hover { color: var(--ap-fg); border-color: var(--ap-accent); }
.page-admin .cve-align-btn.cve-align-del {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}
.page-admin .cve-align-btn.cve-align-del:hover { background: rgba(239, 68, 68, 0.14); }

.page-admin .cve-row.primary { border-color: var(--ap-accent); box-shadow: inset 0 0 0 1px var(--ap-accent); }

.page-admin .cve-add-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ap-line-2);
}
.page-admin .cve-add-btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(39, 230, 236, 0.35);
    color: var(--ap-accent);
    background: rgba(39, 230, 236, 0.06);
}
.page-admin .cve-add-btn:hover { background: rgba(39, 230, 236, 0.16); }

.page-admin .cve-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--ap-line);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--ap-fg);
}
.page-admin .cve-row:hover { border-color: rgba(39, 230, 236, 0.4); }
.page-admin .cve-row.active { border-color: var(--ap-accent); background: rgba(39, 230, 236, 0.08); }
.page-admin .cve-row.dragging { opacity: 0.4; }
.page-admin .cve-row.drag-over { border-color: var(--ap-accent); box-shadow: inset 0 2px 0 var(--ap-accent); }
.page-admin .cve-row-drag {
    cursor: grab;
    color: var(--ap-fg-3);
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1;
    touch-action: none;
}
.page-admin .cve-row-drag:hover { color: var(--ap-fg); }
.page-admin .cve-row-drag:active { cursor: grabbing; }
.page-admin .cve-row-type {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ap-fg-3);
    flex-shrink: 0;
}
.page-admin .cve-row-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-admin .cve-row-btns { display: flex; gap: 2px; flex-shrink: 0; }
.page-admin .cve-row-btns button {
    all: unset;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 4px;
    color: var(--ap-fg-2);
}
.page-admin .cve-row-btns button:hover { background: var(--ap-line); color: var(--ap-fg); }

.page-admin .cve-empty {
    color: var(--ap-fg-3);
    font-size: 0.78rem;
    text-align: center;
    padding: 24px 8px;
    line-height: 1.6;
}

.page-admin .cve-group { margin-bottom: 16px; }
.page-admin .cve-group-title {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ap-accent);
    margin-bottom: 8px;
}
.page-admin .cve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.page-admin .cve-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--ap-fg-2);
}
.page-admin .cve-field > span { font-weight: 600; }
.page-admin .cve-field input[type="text"],
.page-admin .cve-field input[type="number"],
.page-admin .cve-field select,
.page-admin .cve-field textarea {
    width: 100%;
    padding: 7px 9px;
    background: var(--ap-input-bg);
    border: 1px solid var(--ap-line);
    border-radius: 4px;
    color: var(--ap-input-fg);
    font-family: var(--font-mono), monospace;
    font-size: 0.76rem;
    outline: none;
    box-sizing: border-box;
}
.page-admin .cve-field:has(textarea) { grid-column: 1 / -1; }
.page-admin .cve-field textarea { resize: vertical; min-height: 64px; font-family: inherit; }
.page-admin .cve-field input:focus,
.page-admin .cve-field select:focus,
.page-admin .cve-field textarea:focus { border-color: var(--ap-accent); }
/* Checkboxes: force a light "white box" even on the dark admin theme, so their
   checked / unchecked state is unmistakable. */
.page-admin input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--ap-accent);
    color-scheme: light;
    cursor: pointer;
}
.page-admin .cve-field input[type="checkbox"] { width: 16px; }
.page-admin .cve-group .cve-field:has(textarea),
.page-admin .cve-group > .cve-field { grid-column: 1 / -1; }
.page-admin .cve-group > .cve-field { display: flex; }

#cvp-stage .cvp-el { cursor: pointer; }

@media (max-width: 1100px) {
    .page-admin .cve-workspace { grid-template-columns: 1fr; overflow-y: auto; }
    .page-admin .cve-pane { height: auto; max-height: 60vh; border-right: 0; border-bottom: 1px solid rgba(39, 230, 236, 0.12); }
}

/* Canvas editor — drag / resize affordances */
#cvp-stage .cvp-el { cursor: move; }
#cvp-stage .cvp-el.cvp-image,
#cvp-stage .cvp-el.cvp-box { cursor: move; }
.cvp-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    background: var(--ap-accent, #27e6ec);
    border: 1.5px solid #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    z-index: 99999;
}
.cvp-h-nw { left: -6px;  top: -6px;    cursor: nwse-resize; }
.cvp-h-ne { right: -6px; top: -6px;    cursor: nesw-resize; }
.cvp-h-sw { left: -6px;  bottom: -6px; cursor: nesw-resize; }
.cvp-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }

/* multi-select bounding box (corner handles scale the whole selection) */
#cvp-group-box {
    border: 1px dashed var(--ap-accent, #27e6ec);
    box-sizing: border-box;
}

/* Canvas editor — palette swatches & scale control */
.page-admin .cve-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.page-admin .cve-swatch {
    all: unset;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--ap-line-strong);
    cursor: pointer;
    box-sizing: border-box;
}
.page-admin .cve-swatch:hover { transform: scale(1.12); }
.page-admin .cve-swatch.sel {
    outline: 2px solid var(--ap-accent);
    outline-offset: 1px;
}
.page-admin .cve-swatch-none {
    background:
        linear-gradient(45deg, transparent 43%, #ef4444 44%, #ef4444 56%, transparent 57%),
        var(--ap-panel-2);
}
.page-admin .cve-scale-factor {
    width: 56px;
    padding: 5px 6px;
    background: var(--ap-input-bg);
    border: 1px solid var(--ap-line);
    border-radius: 5px;
    color: var(--ap-input-fg);
    font-family: var(--font-mono), monospace;
    font-size: 0.76rem;
    box-sizing: border-box;
}
.page-admin .cve-scale-opt {
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--ap-fg-2);
}
.page-admin .cve-scale-opt input[type="checkbox"] { width: 16px; }

.page-admin .cve-swatch-foot {
    width: 100%;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}
.page-admin .cve-swatch-cur {
    font-family: var(--font-mono), monospace;
    font-size: 0.68rem;
    color: var(--ap-fg-2);
}
.page-admin .cve-swatch-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    color: var(--ap-fg-3);
    cursor: pointer;
}
.page-admin .cvp-zoombar .cvp-theme-btn { margin-left: 8px; }
.page-admin .cvp-dark {
    background: #0b1420 !important;
}
.page-admin .cvp-dark .cvp-sizer { filter: none; }
.page-admin .cve-hint {
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--ap-fg-3);
    margin: -4px 0 6px;
}