:root {
    --bg: #050508;
    --bg-soft: #0a0a12;
    --panel: rgba(255, 255, 255, 0.035);
    --panel-border: rgba(255, 255, 255, 0.08);
    --cyan: #23f2ff;
    --magenta: #ff2bd6;
    --purple: #a855ff;
    --green: #39ffb0;
    --amber: #ffb23e;
    --turquoise: #2dd4bf;
    --red: #ff3b4a;
    --text: #eef0f8;
    --text-dim: #8b8ba3;
    --font-display: 'Orbitron', 'Segoe UI', sans-serif;
    --font-body: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-mono: 'Share Tech Mono', 'Consolas', 'Courier New', monospace;
}

* {
    box-sizing: border-box;
}

/* Quiet scrollbars: a thin, translucent light thumb on a transparent track, a little brighter on hover. Chrome/Edge/Safari use the
   ::-webkit-scrollbar rules; Firefox (no such selector) gets the standard properties. Setting both would make Chrome ignore the
   webkit rules, hence the @supports split. */
@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        /* The transparent border + padding-box clip make the visible thumb 4px wide with room around it. */
        background: rgba(255, 255, 255, 0.16);
        background-clip: padding-box;
        border: 3px solid transparent;
        border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
}

body {
    background: var(--bg);
    overflow-x: hidden;
}

/* Ambient background layer */
.bg-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.bg-orb-cyan {
    width: 520px;
    height: 520px;
    top: -160px;
    right: -140px;
    background: var(--cyan);
    opacity: 0.28;
    animation: orbFloat1 24s ease-in-out infinite;
}

.bg-orb-magenta {
    width: 460px;
    height: 460px;
    bottom: -160px;
    left: -140px;
    background: var(--magenta);
    opacity: 0.22;
    animation: orbFloat2 30s ease-in-out infinite;
}

.bg-orb-purple {
    width: 420px;
    height: 420px;
    top: 38%;
    left: 50%;
    background: var(--purple);
    opacity: 0.16;
    animation: orbFloat3 36s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-60px, 70px); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(70px, -60px); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.18); }
}

/* Perspective neon floor grid */
.bg-grid {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 55vh;
    background-image:
        repeating-linear-gradient(to right, rgba(35, 242, 255, 0.22) 0, rgba(35, 242, 255, 0.22) 1px, transparent 1px, transparent 64px),
        repeating-linear-gradient(to top, rgba(255, 43, 214, 0.22) 0, rgba(255, 43, 214, 0.22) 1px, transparent 1px, transparent 64px);
    transform: perspective(380px) rotateX(62deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 70%);
    mask-image: linear-gradient(to top, black 0%, transparent 70%);
    opacity: 0.55;
    animation: gridScroll 10s linear infinite;
}

@keyframes gridScroll {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 0, 0 64px; }
}

/* Film-grain texture */
.bg-noise {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.app-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.dashboard {
    max-width: 640px;
    margin: 0 auto;
    padding: 28px 20px 48px;
    position: relative;
}

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}

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

.brand-mark {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 26px;
    letter-spacing: 4px;
    color: var(--text);
    text-shadow: 0 0 6px var(--cyan), 0 0 22px rgba(35, 242, 255, 0.6);
}

.brand-sub {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 2px;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    font-size: 13px;
    color: var(--text-dim);
}

/* User icon inside the navbar profile pill; its colour is the account status: green = approved,
   amber = waiting for a Keyholder, red = email not verified (grey while the status is still loading). */
.user-icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--text-dim);
}

.user-icon-ok {
    color: var(--green);
    filter: drop-shadow(0 0 4px var(--green));
}

.user-icon-pending {
    color: var(--amber);
    filter: drop-shadow(0 0 4px var(--amber));
}

.user-icon-danger {
    color: var(--red);
    filter: drop-shadow(0 0 4px var(--red));
}

/* Long names are cut with an ellipsis so the pill never pushes the menu button off a phone screen. */
.user-name {
    min-width: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-pill-pending {
    border-color: rgba(255, 178, 62, 0.4);
}

.user-pill-danger {
    border-color: rgba(255, 59, 74, 0.45);
}

.user-status-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--amber);
    white-space: nowrap;
}

.user-status-text-danger {
    color: var(--red);
}

/* Hero / ring */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 44px;
}

.hero-empty {
    text-align: center;
    padding: 50px 20px 44px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
}

.pending-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 50px 26px 44px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
}

.pending-icon {
    width: 44px;
    height: 44px;
    color: var(--amber);
    filter: drop-shadow(0 0 6px var(--amber));
    margin-bottom: 16px;
}

.pending-panel-danger {
    border-color: rgba(255, 59, 74, 0.35);
    box-shadow: 0 0 24px rgba(255, 59, 74, 0.08);
}

.pending-icon-danger {
    color: var(--red);
    filter: drop-shadow(0 0 6px var(--red));
}

.pending-icon svg {
    width: 100%;
    height: 100%;
}

.empty-icon {
    width: 44px;
    height: 44px;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.empty-icon svg {
    width: 100%;
    height: 100%;
}

.empty-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}

.empty-hint {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}

.ring-wrap {
    position: relative;
    width: 240px;
    height: 240px;
}

.ring-wrap-ready {
    cursor: pointer;
}

.ring {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 10;
}

.ring-progress {
    fill: none;
    stroke: var(--magenta);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 653;
    stroke-dashoffset: 248;
    filter: drop-shadow(0 0 6px var(--magenta)) drop-shadow(0 0 16px rgba(255, 43, 214, 0.75));
    transition: stroke-dashoffset 1s linear;
}

/* Driven frame by frame from the server while UnlocksAt changes; keep the CSS transition short so frames don't lag behind. */
.ring-progress-animating {
    transition: stroke-dashoffset 0.06s linear, stroke 0.3s ease, filter 0.3s ease;
}

/* On long sessions a change moves the arc by less than a pixel, so the ring also flashes in the change's colour. */
.ring-pulse-up {
    stroke: var(--magenta);
    filter: drop-shadow(0 0 8px var(--magenta)) drop-shadow(0 0 26px var(--magenta)) drop-shadow(0 0 44px var(--magenta));
}

.ring-pulse-down {
    stroke: var(--green);
    filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 26px var(--green)) drop-shadow(0 0 44px var(--green));
}

/* Change notice above the clock: neon arrow carrying the amount added/removed. */
.delta-badge {
    position: absolute;
    left: 50%;
    top: 32px;
    width: 104px;
    height: 60px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: deltaRise 2.4s ease-out forwards;
}

.delta-up {
    color: var(--magenta);
}

.delta-down {
    color: var(--green);
    animation-name: deltaFall;
}

.delta-arrow {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor);
}

.delta-arrow polygon {
    fill: currentColor;
    fill-opacity: 0.22;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linejoin: round;
}

.delta-down .delta-arrow {
    transform: scaleY(-1);
}

.delta-text {
    position: absolute;
    left: 0;
    right: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 4px currentColor, 0 0 10px currentColor;
    white-space: nowrap;
}

.delta-up .delta-text {
    top: 33px;
}

.delta-down .delta-text {
    top: 11px;
}

@keyframes deltaRise {
    0% { opacity: 0; transform: translate(-50%, 16px) scale(0.85); }
    14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    70% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -18px) scale(1); }
}

@keyframes deltaFall {
    0% { opacity: 0; transform: translate(-50%, -16px) scale(0.85); }
    14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    70% { opacity: 1; transform: translate(-50%, 6px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 18px) scale(1); }
}

.ring-icon-dim {
    opacity: 0.08;
}

.ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.ring-icon {
    width: 48px;
    height: 48px;
    color: var(--cyan);
    margin-top: -10px;
    margin-bottom: 8px;
    /* Resting glow matches the pulse's first/last keyframe, so the gap between one pulse ending and the next tick re-keying the icon doesn't go dark. */
    filter: drop-shadow(0 0 6px var(--cyan));
    animation: lockPulse 1s ease-in-out 1;
}

.ring-icon svg {
    width: 100%;
    height: 100%;
}

/* The digits change in the same render that restarts this animation, so the icon snaps up right as the clock ticks and eases back down over the rest of the second. */
@keyframes lockPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px var(--cyan));
        animation-timing-function: ease-out;
    }
    18% {
        transform: scale(1.14);
        filter: drop-shadow(0 0 14px var(--cyan));
        animation-timing-function: ease-in-out;
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px var(--cyan));
    }
}

.ring-time {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--text);
    text-shadow: 0 0 8px rgba(238, 240, 248, 0.5);
    font-variant-numeric: tabular-nums;
}

.ring-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.ring-label-ready {
    color: var(--amber);
    text-shadow: 0 0 6px rgba(255, 178, 62, 0.5);
}

.ring-tap-hint {
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-dim);
    opacity: 0.8;
}

.ring-days {
    margin-top: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 215, 106, 0.08);
    border: 1px solid rgba(255, 215, 106, 0.4);
    color: #ffd76a;
    text-shadow: 0 0 6px rgba(255, 215, 106, 0.5);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* Same script face as the www_Glorija header logo. */
@font-face {
    font-family: 'FlemishScript';
    src: url('/fonts/FlemishScript-BT.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.keyholder-name {
    --glow: var(--magenta);
    margin-top: 20px;
    font-family: 'FlemishScript', cursive;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    color: #ffd9f6;
    text-shadow:
        0 0 5px var(--glow),
        0 0 10px var(--glow),
        0 0 20px var(--glow),
        0 0 40px var(--glow),
        0 0 70px var(--glow);
    white-space: nowrap;
}

.keyholder-name + .status-badge {
    margin-top: 8px;
}

.status-badge {
    margin-top: 22px;
    padding: 6px 20px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--cyan);
    border: 1px solid rgba(35, 242, 255, 0.5);
    text-shadow: 0 0 8px var(--cyan);
    box-shadow: 0 0 10px rgba(35, 242, 255, 0.35), inset 0 0 10px rgba(35, 242, 255, 0.12);
}

.status-badge-ready {
    color: var(--amber);
    border-color: rgba(255, 178, 62, 0.5);
    text-shadow: 0 0 8px var(--amber);
    box-shadow: 0 0 10px rgba(255, 178, 62, 0.35), inset 0 0 10px rgba(255, 178, 62, 0.12);
}

/* Chat card under the keyholder badge: the exclusive-site photo fills one wide button, a dark fade carries the caption. */
.chat-block {
    width: 100%;
    margin-top: 30px;
}

.chat-btn {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Caption bottom-right: the photo's neon "Chat with me!" sits bottom-left once the photo is moved down. */
    justify-content: flex-end;
    height: 190px;
    padding: 16px 18px;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    /* No border: the photo would stop at the padding box and leave a thin unpainted ring, most visible along the bottom edge.
       The rim is an outline drawn over the photo instead. The photo sits a little low in the frame so the head is not cut off. */
    border: 0;
    outline: 1px solid rgba(255, 255, 255, 0.16);
    outline-offset: -1px;
    background:
        linear-gradient(to top, rgba(8, 8, 14, 0.85), rgba(8, 8, 14, 0) 55%),
        url('/images/chat-x.jpg') center 8% / cover no-repeat;
    box-shadow: 0 0 20px rgba(255, 43, 214, 0.3);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.chat-btn:hover {
    transform: scale(1.01);
    box-shadow: 0 0 30px rgba(255, 43, 214, 0.55);
}

.chat-btn-arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(8, 8, 14, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.chat-btn-caption {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}

/* Stats */
.stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: 28px;
}

/* Same cards, now below the history instead of under the badge. */
.stat-row-bottom {
    margin-top: 16px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
}

.stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-label {
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* History */
.history {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 22px 22px 10px;
}

.history-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 16px;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(to bottom, var(--panel-border), transparent);
}

.timeline-item {
    display: flex;
    gap: 16px;
    padding-bottom: 20px;
    position: relative;
}

.timeline-dot {
    flex: none;
    width: 9px;
    height: 9px;
    margin: 5px 7px 0;
    border-radius: 50%;
    background: var(--text-dim);
    z-index: 1;
}

/* Neon arrow in the counter's change-notice style, slimmer for the list; sits in the same 23px column as the dot, centred on the 1px timeline line at x=11.5. */
.timeline-arrow {
    flex: none;
    width: 23px;
    height: 26px;
    margin-top: -2px;
    overflow: visible;
    z-index: 1;
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
}

.timeline-arrow polygon {
    fill: currentColor;
    fill-opacity: 0.22;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

/* Padlock for lock/unlock events; 20px + 1.5px margins = the same 23px column as the dot and arrow. */
.timeline-lock {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 1px 1.5px 0;
    z-index: 1;
    filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);
}

.event-started .timeline-lock {
    color: var(--purple);
}

.event-opened .timeline-lock {
    color: var(--turquoise);
}

.event-deserted .timeline-lock {
    color: var(--red);
}

.event-added .timeline-arrow {
    color: var(--magenta);
}

.event-removed .timeline-arrow {
    color: var(--green);
    transform: scaleY(-1);
}

.event-frozen .timeline-dot {
    background: var(--purple);
    box-shadow: 0 0 6px var(--purple), 0 0 12px var(--purple);
}

.event-started .timeline-dot {
    background: var(--purple);
    box-shadow: 0 0 6px var(--purple), 0 0 12px var(--purple);
}

.event-added .timeline-dot {
    background: var(--magenta);
    box-shadow: 0 0 6px var(--magenta), 0 0 12px var(--magenta);
}

.event-removed .timeline-dot {
    background: var(--green);
    box-shadow: 0 0 6px var(--green), 0 0 12px var(--green);
}

.event-opened .timeline-dot {
    background: var(--turquoise);
    box-shadow: 0 0 6px var(--turquoise), 0 0 12px var(--turquoise);
}

.event-deserted .timeline-dot {
    background: var(--red);
    box-shadow: 0 0 6px var(--red), 0 0 12px var(--red);
}

.event-released-early .timeline-dot {
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber), 0 0 12px var(--amber);
}

.event-verified .timeline-dot {
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber), 0 0 12px var(--amber);
}

.event-locked .timeline-dot {
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan), 0 0 12px var(--cyan);
}

.timeline-text {
    font-size: 14.5px;
    color: var(--text);
}

.timeline-text strong {
    color: var(--text);
    font-weight: 700;
}

.timeline-time {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-dim);
}

/* Emergency */
.emergency-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.emergency-btn {
    padding: 12px 30px;
    border-radius: 999px;
    background: rgba(255, 178, 62, 0.06);
    border: 1px solid rgba(255, 178, 62, 0.4);
    color: var(--amber);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 13.5px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 178, 62, 0.2);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.emergency-btn:hover {
    box-shadow: 0 0 18px rgba(255, 178, 62, 0.45);
    transform: scale(1.03);
}

.emergency-hint {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--text-dim);
    text-align: center;
}

@media (max-width: 420px) {
    .stat-row {
        grid-template-columns: 1fr;
    }
}

/* Icon test page */
.icons-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    position: relative;
}

.icons-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

.icon-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--icon-color, var(--cyan));
}

.icon-box {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    filter: drop-shadow(0 0 4px var(--icon-color, var(--cyan))) drop-shadow(0 0 12px var(--icon-color, var(--cyan)));
}

.icon-box svg {
    width: 100%;
    height: 100%;
}

.icon-name {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
}

.icon-use {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-dim);
}

.icon-cyan {
    --icon-color: var(--cyan);
}

.icon-magenta {
    --icon-color: var(--magenta);
}

.icon-purple {
    --icon-color: var(--purple);
}

.icon-green {
    --icon-color: var(--green);
}

.icon-amber {
    --icon-color: var(--amber);
}

/* Navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5, 5, 8, 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--panel-border);
}

.navbar-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.navbar-brand {
    text-decoration: none;
    line-height: 1;
}

.navbar .brand-mark {
    font-size: 20px;
    letter-spacing: 3px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.nav-link:hover {
    color: var(--text);
    background: var(--panel);
}

.nav-link.active {
    color: var(--cyan);
    background: rgba(35, 242, 255, 0.08);
    text-shadow: 0 0 8px rgba(35, 242, 255, 0.6);
}

.nav-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: none;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-toggle {
    display: none;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
}

.nav-toggle svg {
    width: 18px;
    height: 18px;
}

.nav-toggle:hover {
    border-color: rgba(35, 242, 255, 0.4);
    color: var(--cyan);
}

/* Mobile drawer */
.nav-drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: rgba(7, 7, 12, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--panel-border);
    transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
}

.nav-drawer-open {
    max-height: 420px;
    opacity: 1;
    padding: 12px 20px 20px;
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-dim);
    text-decoration: none;
}

.drawer-link:hover {
    color: var(--text);
    background: var(--panel);
}

.drawer-link.active {
    color: var(--cyan);
    background: rgba(35, 242, 255, 0.08);
}

.drawer-link .nav-icon {
    width: 18px;
    height: 18px;
}

.drawer-divider {
    height: 1px;
    background: var(--panel-border);
    margin: 8px 4px;
}

.drawer-signout {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 2px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    text-align: left;
}

.drawer-signout svg {
    width: 17px;
    height: 17px;
}

.drawer-signout:hover {
    color: var(--magenta);
    border-color: rgba(255, 43, 214, 0.4);
}

@media (max-width: 700px) {
    .nav-links {
        display: none;
    }

    .navbar-right .nav-signout-form {
        display: none;
    }

    /* Phone: the pill keeps the icon and the name (shortened if long) next to the menu toggle. */
    .navbar-right .user-pill {
        min-width: 0;
        height: 38px;
        padding: 0 12px;
        gap: 7px;
        border-radius: 10px;
    }

    .navbar-right .user-name {
        max-width: 110px;
    }

    /* The icon colour already says "not approved"; the words only fit on wider phones. */
    .navbar-right .user-status-text {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }
}

.nav-signout-form {
    display: inline-flex;
}

.nav-signout {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text-dim);
    cursor: pointer;
}

.nav-signout svg {
    width: 17px;
    height: 17px;
}

.nav-signout:hover {
    color: var(--magenta);
    border-color: rgba(255, 43, 214, 0.4);
}

@media (min-width: 701px) {
    .nav-drawer {
        display: none !important;
    }
}

/* History "view more" link */
.history-more {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cyan);
    text-decoration: none;
    text-shadow: 0 0 6px rgba(35, 242, 255, 0.5);
}

.history-more:hover {
    text-decoration: underline;
}

.history-full {
    margin-top: 4px;
}

/* Generic inner page */
.page {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.page-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
    margin: 0 0 6px;
    text-shadow: 0 0 8px rgba(238, 240, 248, 0.35);
}

.page-sub {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0 0 26px;
}

.page-note {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--text-dim);
    text-align: center;
}

/* Profile */
.profile-head {
    margin-bottom: 22px;
}

.profile-head .page-title {
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.profile-meta {
    font-size: 13px;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.profile-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 24px 22px 22px;
    margin-bottom: 18px;
}

.profile-card-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 18px;
}

.profile-card .field input[readonly],
.modal-form .field input[readonly] {
    color: var(--text-dim);
    cursor: default;
}

/* Readable key/value list on the profile page */
.info-list {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--panel-border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row dt {
    flex: none;
    font-size: 13px;
    color: var(--text-dim);
}

.info-row dd {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-size: 14.5px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.info-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.info-badge-green {
    color: var(--green);
    border-color: rgba(57, 255, 176, 0.4);
    background: rgba(57, 255, 176, 0.08);
}

.info-badge-amber {
    color: var(--amber);
    border-color: rgba(255, 178, 62, 0.4);
    background: rgba(255, 178, 62, 0.08);
}

.info-badge-red {
    color: var(--red);
    border-color: rgba(255, 59, 74, 0.4);
    background: rgba(255, 59, 74, 0.08);
}

.info-badge-cyan {
    color: var(--cyan);
    border-color: rgba(35, 242, 255, 0.4);
    background: rgba(35, 242, 255, 0.08);
}

.info-badge-dim {
    color: var(--text-dim);
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.profile-actions .btn-primary,
.profile-actions .btn-secondary {
    flex: 1 1 180px;
    width: auto;
}

.profile-notice {
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.profile-notice-warning {
    --notice-color: var(--amber);
    background: rgba(255, 178, 62, 0.08);
    border: 1px solid rgba(255, 178, 62, 0.45);
    box-shadow: 0 0 14px rgba(255, 178, 62, 0.12);
}

.profile-notice-danger {
    --notice-color: var(--red);
    background: rgba(255, 59, 74, 0.08);
    border: 1px solid rgba(255, 59, 74, 0.45);
    box-shadow: 0 0 14px rgba(255, 59, 74, 0.12);
}

.profile-notice-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--notice-color);
}

.profile-notice-form {
    margin: 12px 0 0;
}

.profile-notice-btn {
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--notice-color);
    background: rgba(255, 59, 74, 0.12);
    color: var(--notice-color);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 59, 74, 0.25);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.profile-notice-btn:hover {
    box-shadow: 0 0 18px rgba(255, 59, 74, 0.5);
    transform: scale(1.02);
}

@media (max-width: 480px) {
    .profile-notice-btn {
        width: 100%;
    }
}

.profile-notice-note {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.profile-notice-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text);
}

.profile-ok {
    background: rgba(57, 255, 176, 0.08);
    border: 1px solid rgba(57, 255, 176, 0.35);
    color: var(--green);
    font-size: 13px;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

a.user-pill {
    text-decoration: none;
}

a.user-pill {
    transition: border-color 0.15s ease, color 0.15s ease;
}

a.user-pill:hover {
    color: var(--text);
    border-color: rgba(35, 242, 255, 0.4);
}

a.user-pill-pending:hover {
    border-color: rgba(255, 178, 62, 0.7);
}

a.user-pill-danger:hover {
    border-color: rgba(255, 59, 74, 0.75);
}

/* Sign-in link (navbar, logged out) */
.nav-signin {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(35, 242, 255, 0.4);
    color: var(--cyan);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(35, 242, 255, 0.5);
}

.nav-signin:hover {
    background: rgba(35, 242, 255, 0.08);
}

/* Auth pages */
.auth-page {
    max-width: 380px;
    margin: 0 auto;
    padding: 60px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-brand {
    text-decoration: none;
    margin-bottom: 28px;
}

.auth-card {
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 28px 24px;
}

.auth-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
    margin: 0 0 20px;
    text-align: center;
    text-shadow: 0 0 8px rgba(238, 240, 248, 0.35);
}

.auth-error {
    background: rgba(255, 43, 214, 0.08);
    border: 1px solid rgba(255, 43, 214, 0.35);
    color: var(--magenta);
    font-size: 13px;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.auth-success {
    background: rgba(57, 255, 136, 0.08);
    border: 1px solid rgba(57, 255, 136, 0.35);
    color: #7dffb0;
    font-size: 13px;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.auth-hint {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--text-dim);
    text-align: center;
}

.auth-forgot {
    margin: -6px 0 14px;
    text-align: right;
    font-size: 13px;
}

.auth-forgot a {
    color: var(--text-dim);
    text-decoration: none;
}

.auth-forgot a:hover {
    color: var(--cyan);
    text-decoration: underline;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.field input,
.field textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 11px 13px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.field input:focus,
.field textarea:focus {
    border-color: rgba(35, 242, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(35, 242, 255, 0.12);
}

.field-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.4;
}

.field-checkbox a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}

.field-checkbox input {
    margin-top: 2px;
    accent-color: var(--cyan);
    width: 16px;
    height: 16px;
    flex: none;
}

.btn-primary {
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(35, 242, 255, 0.5);
    background: rgba(35, 242, 255, 0.08);
    color: var(--cyan);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(35, 242, 255, 0.2);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-tall {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 18px;
    gap: 12px;
}

.btn-tall .btn-icon {
    width: 28px;
    height: 28px;
}

.btn-icon {
    width: 20px;
    height: 20px;
    flex: none;
    filter: drop-shadow(0 0 4px currentColor);
}

/* Chrome draws a default focus ring on buttons after a click/submit; the neon glow is the affordance here. */
button:focus,
button:focus-visible {
    outline: none;
}

/* No browser focus ring anywhere (same as www_Glorija). Also covers <FocusOnNavigate>, which focuses the page h1 after every navigation. Inputs/checkboxes/upload button show their own neon focus styles. */
:focus,
:focus-visible {
    outline: none;
}

.btn-primary:hover {
    box-shadow: 0 0 16px rgba(35, 242, 255, 0.4);
    transform: scale(1.01);
}

.btn-primary:disabled,
.btn-primary:disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.auth-switch {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
}

.auth-switch a {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Dev-only test account list on /login */
.dev-accounts {
    width: 100%;
    margin-top: 18px;
    background: var(--panel);
    border: 1px dashed rgba(255, 178, 62, 0.4);
    border-radius: 14px;
    padding: 14px 14px 10px;
}

.dev-accounts-title {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px;
    text-align: center;
}

.dev-account {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dev-account:hover {
    border-color: rgba(35, 242, 255, 0.5);
    background: rgba(35, 242, 255, 0.06);
}

.dev-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dev-account-state {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dev-account-state.state-red { color: var(--red); }
.dev-account-state.state-amber { color: var(--amber); }
.dev-account-state.state-magenta { color: var(--magenta); }
.dev-account-state.state-green { color: var(--green); }

/* Start-lock form */
.start-lock-form {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 22px 22px 26px;
}

.duration-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.duration-chip {
    position: relative;
}

.duration-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.duration-chip span {
    display: inline-flex;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.duration-chip input:checked + span {
    color: var(--cyan);
    border-color: rgba(35, 242, 255, 0.55);
    background: rgba(35, 242, 255, 0.1);
    text-shadow: 0 0 6px rgba(35, 242, 255, 0.5);
}

/* Locktober: a full-width, bigger card that stands out from the pills. Purple, with a slow flowing colour shift
   (the gradient is wider than the card and drifts back and forth) and a faint sheen sweeping across. */
.duration-chip-featured {
    flex: 1 0 100%;
}

.duration-chip-featured span {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 18px;
    border-radius: 18px;
    border-color: rgba(168, 85, 255, 0.65);
    background: linear-gradient(120deg, rgba(168, 85, 255, 0.34), rgba(88, 36, 190, 0.3), rgba(214, 100, 255, 0.34), rgba(120, 60, 230, 0.3), rgba(168, 85, 255, 0.34));
    background-size: 300% 100%;
    box-shadow: 0 0 18px rgba(168, 85, 255, 0.35);
    text-align: center;
    animation: locktoberFlow 9s ease-in-out infinite;
}

.duration-chip-featured span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: locktoberSheen 6s ease-in-out infinite;
    pointer-events: none;
}

.featured-title,
.featured-note {
    position: relative;
    z-index: 1;
}

.featured-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e9d5ff;
    text-shadow: 0 0 10px rgba(168, 85, 255, 0.9);
}

/* Icon and text share one flex row centred on the cross axis; line-height 1 keeps the text box no taller than the icon. The text is a bare text node on purpose: any <span> in here would pick up the pill styling of .duration-chip span. */
.featured-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    color: #dcc2ff;
}

.featured-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
    color: #c084ff;
    filter: drop-shadow(0 0 4px var(--purple));
}

.duration-chip-featured input:checked + span {
    border-color: var(--purple);
    background: linear-gradient(120deg, rgba(168, 85, 255, 0.55), rgba(88, 36, 190, 0.48), rgba(214, 100, 255, 0.55), rgba(120, 60, 230, 0.48), rgba(168, 85, 255, 0.55));
    background-size: 300% 100%;
    box-shadow: 0 0 28px rgba(168, 85, 255, 0.65);
}

.duration-chip-featured input:checked + span .featured-title {
    color: #fff;
}

@keyframes locktoberFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes locktoberSheen {
    0%, 55% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .duration-chip-featured span,
    .duration-chip-featured span::after {
        animation: none;
    }
}

.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-upload-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px dashed rgba(35, 242, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.file-upload-btn:hover {
    border-color: rgba(35, 242, 255, 0.6);
    color: var(--cyan);
    background: rgba(35, 242, 255, 0.06);
}

.file-upload-icon {
    width: 20px;
    height: 20px;
    flex: none;
}

/* Bubble under the photo button with a tail pointing up at it; shown by the form's submit handler when no photo is chosen. */
.field-tip {
    position: relative;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 178, 62, 0.6);
    background: rgba(40, 28, 8, 0.96);
    color: var(--amber);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 0 14px rgba(255, 178, 62, 0.25);
    animation: tipIn 0.25s ease-out;
}

.field-tip[hidden] {
    display: none;
}

.field-tip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 26px;
    width: 10px;
    height: 10px;
    background: rgba(40, 28, 8, 1);
    border-left: 1px solid rgba(255, 178, 62, 0.6);
    border-top: 1px solid rgba(255, 178, 62, 0.6);
    transform: rotate(45deg);
}

/* Same specificity as :hover and later in the file, so the amber warning also wins while the pointer is over the button. */
.file-upload-btn.file-upload-btn-attn {
    border-color: var(--amber);
    color: var(--amber);
    background: rgba(255, 178, 62, 0.06);
}

@keyframes tipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.file-input-hidden:focus-visible + .file-upload-btn {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.start-lock-form .btn-primary {
    margin-top: 6px;
}

/* Step 2 of the start form: confirm duration + hidden photo, then a switch unlocks the real submit button. */
.confirm-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
    margin: 0 0 16px;
}

.confirm-title,
.confirm-row {
    text-align: center;
}

.confirm-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
}

.confirm-row-label {
    font-size: 12.5px;
    color: var(--text-dim);
}

.confirm-row-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(35, 242, 255, 0.5);
}

.confirm-photo-wrap {
    position: relative;
    max-width: 320px;
    margin: 0 auto 16px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    box-shadow: 0 0 22px rgba(57, 255, 176, 0.15);
    user-select: none;
    -webkit-user-select: none;
}

/* Drawn from a 24px-wide canvas, so it stays unreadable even if the CSS blur is removed. */
.confirm-photo {
    display: block;
    width: 100%;
    height: auto;
    filter: blur(6px);
    transform: scale(1.08);
    pointer-events: none;
}

.confirm-photo-badge {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(8, 8, 14, 0.78);
    border: 1px solid rgba(57, 255, 176, 0.5);
    color: var(--green);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 0 10px rgba(57, 255, 176, 0.3);
}

.confirm-badge-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.confirm-note {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-dim);
    text-align: center;
}

.confirm-back {
    width: 100%;
    margin-top: 10px;
}

/* Toggle switch: real checkbox visually hidden, track + thumb drawn by the sibling span. */
.switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    cursor: pointer;
}

.switch input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
}

/* Left-aligned variant for forms (registration, sign-in): long labels wrap next to a top-aligned track. */
.switch-left {
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 16px;
}

.switch-left .switch-track {
    margin-top: 1px;
}

/* 4px pushes the first line to the vertical centre of the 26px track; a one-line switch centres itself below. */
.switch-left .switch-label {
    padding-top: 4px;
    font-size: 13px;
    color: var(--text-dim);
}

.switch-left.remember-switch {
    align-items: center;
}

.switch-left.remember-switch .switch-track {
    margin-top: 0;
}

.switch-left.remember-switch .switch-label {
    padding-top: 0;
}

.switch-left .switch-label a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}

/* "Keep me signed in" needs a persistent cookie, so it is inert until cookies are accepted. */
.remember-hint {
    margin: -8px 0 16px;
    font-size: 12px;
    color: var(--text-dim);
}

html[data-cookie-consent="accepted"] .remember-hint {
    display: none;
}

html:not([data-cookie-consent="accepted"]) .remember-switch {
    opacity: 0.45;
    pointer-events: none;
}

/* Cookie banner: bottom panel until a choice is made; the footer "Cookies" link brings it back. */
.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 80;
    display: none;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 760px;
    margin: 0 auto;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(8, 8, 14, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(35, 242, 255, 0.12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

html[data-cookie-consent="unset"] .cookie-banner {
    display: flex;
    animation: cookieIn 0.3s ease-out;
}

html[data-cookie-consent="unset"] body {
    padding-bottom: 140px;
}

.cookie-text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dim);
}

.cookie-text a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.cookie-btn,
.cookie-actions .btn-primary {
    flex: none;
    width: auto;
    min-width: 110px;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 12px;
    margin: 0;
}

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

.switch-track {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.switch input:checked + .switch-track {
    background: rgba(35, 242, 255, 0.15);
    border-color: rgba(35, 242, 255, 0.6);
    box-shadow: 0 0 10px rgba(35, 242, 255, 0.35);
}

.switch input:checked + .switch-track::after {
    transform: translateX(20px);
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

.switch input:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px rgba(35, 242, 255, 0.25);
}

.switch-label {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text);
}

/* Reveal state (just unlocked) */
.hero-reveal {
    text-align: center;
    padding: 36px 20px 40px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
}

/* Placeholder that takes the photo's place (same width, 4:3) when the image cannot be loaded. */
.combo-photo-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 4 / 3;
    margin: 22px 0 18px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px dashed rgba(255, 178, 62, 0.45);
    border-radius: 14px;
    background: rgba(255, 178, 62, 0.05);
    text-align: center;
}

.combo-photo-missing[hidden] {
    display: none;
}

.combo-missing-icon {
    width: 40px;
    height: 40px;
    color: var(--amber);
    filter: drop-shadow(0 0 6px var(--amber));
}

.combo-missing-title {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.combo-missing-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

.combo-missing-text a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}

.reveal-icon {
    width: 48px;
    height: 48px;
    color: var(--green);
    filter: drop-shadow(0 0 6px var(--green));
}

.reveal-icon svg {
    width: 100%;
    height: 100%;
}

.status-badge-open {
    color: var(--green);
    border-color: rgba(57, 255, 176, 0.5);
    text-shadow: 0 0 8px var(--green);
    box-shadow: 0 0 10px rgba(57, 255, 176, 0.35), inset 0 0 10px rgba(57, 255, 176, 0.12);
}

.combo-photo {
    width: 100%;
    max-width: 320px;
    border-radius: 14px;
    margin: 22px 0 18px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 0 22px rgba(57, 255, 176, 0.15);
}

.reveal-cta {
    display: inline-block;
    width: auto;
    margin-top: 18px;
    padding: 12px 26px;
    text-decoration: none;
    text-align: center;
}

/* Dev-only timer controls */
.dev-panel {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 178, 62, 0.4);
    background: rgba(255, 178, 62, 0.05);
}

.dev-panel-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px;
}

.dev-panel-row {
    display: flex;
    gap: 8px;
}

.dev-minutes-input {
    width: 84px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 9px 10px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
}

.dev-unit-select {
    width: 60px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 9px 6px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    color-scheme: dark;
}

/* The native dropdown list ignores the select's translucent background and inherits its light text colour. */
.dev-unit-select option {
    background: #14141f;
    color: var(--text);
}

.dev-btn {
    flex: 1;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 178, 62, 0.4);
    background: rgba(255, 178, 62, 0.08);
    color: var(--amber);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dev-btn:hover {
    background: rgba(255, 178, 62, 0.18);
}

/* Session list (full history) */
.session-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.session-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    overflow: hidden;
}

.session-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.session-card-main {
    flex: 1;
    min-width: 0;
}

.session-date {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

.session-duration {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.session-badge {
    flex: none;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.session-badge-completed {
    color: var(--turquoise);
    border: 1px solid rgba(45, 212, 191, 0.4);
    background: rgba(45, 212, 191, 0.08);
}

.session-badge-ongoing {
    color: var(--green);
    border: 1px solid rgba(57, 255, 176, 0.4);
    background: rgba(57, 255, 176, 0.08);
}

.session-badge-deserted {
    color: var(--red);
    border: 1px solid rgba(255, 59, 74, 0.4);
    background: rgba(255, 59, 74, 0.08);
}

.session-badge-released {
    color: var(--amber);
    border: 1px solid rgba(255, 178, 62, 0.4);
    background: rgba(255, 178, 62, 0.08);
}

.session-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-dim);
    transition: transform 0.2s ease;
}

.session-chevron-open {
    transform: rotate(180deg);
}

.session-timeline {
    padding: 0 18px 18px;
    border-top: 1px solid var(--panel-border);
}

.session-timeline .timeline {
    margin-top: 16px;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.pagination-btn {
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled) {
    border-color: rgba(35, 242, 255, 0.4);
    color: var(--cyan);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 12.5px;
    color: var(--text-dim);
}

/* Emergency Release confirmation */
.danger-modal {
    font-family: var(--font-body);
    background: rgba(10, 6, 8, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    width: min(380px, calc(100vw - 48px));
    margin: 10vh auto;
    padding: 0;
    color: var(--text);
    border: 1px solid rgba(255, 59, 74, 0.4);
    border-radius: 18px;
    box-shadow: 0 0 24px rgba(255, 59, 74, 0.25), 0 0 70px rgba(255, 59, 74, 0.1), inset 0 0 20px rgba(255, 59, 74, 0.05);
}

.danger-modal::backdrop {
    background-color: rgba(5, 5, 8, 0.78);
}

.danger-modal-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 26px 26px;
}

.danger-modal-icon {
    width: 40px;
    height: 40px;
    color: var(--red);
    filter: drop-shadow(0 0 8px var(--red));
    margin-bottom: 10px;
}

.danger-modal-icon svg {
    width: 100%;
    height: 100%;
}

.danger-modal-title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--red);
    text-transform: uppercase;
}

.danger-modal-body {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dim);
}

.danger-modal-strong {
    color: var(--text);
}

.danger-modal-strong strong {
    color: var(--red);
}

.neon-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 22px;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

.neon-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.neon-checkbox-box {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid rgba(255, 59, 74, 0.5);
    border-radius: 5px;
    background: rgba(255, 59, 74, 0.05);
    position: relative;
    transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.neon-checkbox-box::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid var(--red);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.neon-checkbox input:checked ~ .neon-checkbox-box {
    background: rgba(255, 59, 74, 0.15);
    border-color: var(--red);
    box-shadow: 0 0 10px rgba(255, 59, 74, 0.5);
}

.neon-checkbox input:checked ~ .neon-checkbox-box::after {
    opacity: 1;
}

.neon-checkbox input:focus-visible ~ .neon-checkbox-box {
    box-shadow: 0 0 0 2px rgba(255, 59, 74, 0.4);
}

.neon-checkbox-label {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

.danger-modal-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.danger-modal-actions form {
    flex: 1;
}

.btn-ghost {
    flex: 1;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text);
}

.btn-danger {
    width: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 59, 74, 0.6);
    background: rgba(255, 59, 74, 0.12);
    color: var(--red);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 59, 74, 0.25);
    transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.btn-danger:hover:not(:disabled) {
    box-shadow: 0 0 18px rgba(255, 59, 74, 0.5);
    transform: scale(1.02);
}

.btn-danger:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

/* Amber variant of the modal: warnings that are not destructive (unapproved account). */
.danger-modal-warning {
    background: rgba(12, 9, 4, 0.96);
    border-color: rgba(255, 178, 62, 0.4);
    box-shadow: 0 0 24px rgba(255, 178, 62, 0.25), 0 0 70px rgba(255, 178, 62, 0.1), inset 0 0 20px rgba(255, 178, 62, 0.05);
}

.danger-modal-warning .danger-modal-icon {
    color: var(--amber);
    filter: drop-shadow(0 0 8px var(--amber));
}

.danger-modal-warning .danger-modal-title,
.danger-modal-warning .danger-modal-strong strong {
    color: var(--amber);
}

.danger-modal-warning .neon-checkbox-box {
    border-color: rgba(255, 178, 62, 0.5);
    background: rgba(255, 178, 62, 0.05);
}

.danger-modal-warning .neon-checkbox-box::after {
    border-color: var(--amber);
}

.danger-modal-warning .neon-checkbox input:checked ~ .neon-checkbox-box {
    background: rgba(255, 178, 62, 0.15);
    border-color: var(--amber);
    box-shadow: 0 0 10px rgba(255, 178, 62, 0.5);
}

.danger-modal-warning .neon-checkbox input:focus-visible ~ .neon-checkbox-box {
    box-shadow: 0 0 0 2px rgba(255, 178, 62, 0.4);
}

/* Cyan variant of the modal: plain forms (edit profile, change password). */
.danger-modal-info {
    background: rgba(6, 10, 14, 0.96);
    border-color: rgba(35, 242, 255, 0.4);
    box-shadow: 0 0 24px rgba(35, 242, 255, 0.2), 0 0 70px rgba(35, 242, 255, 0.08), inset 0 0 20px rgba(35, 242, 255, 0.04);
}

.danger-modal-info .danger-modal-title {
    color: var(--cyan);
}

.danger-modal-info .modal-form {
    width: 100%;
    text-align: left;
}

.danger-modal-info .modal-error {
    width: 100%;
    margin-bottom: 14px;
    text-align: left;
}

.danger-modal-info .danger-modal-actions .btn-primary {
    flex: 1;
    width: auto;
    padding: 11px 16px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 1px;
}

.btn-warning,
.danger-modal-warning .btn-danger {
    width: 100%;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 178, 62, 0.6);
    background: rgba(255, 178, 62, 0.12);
    color: var(--amber);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 178, 62, 0.25);
    transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.btn-warning:hover:not(:disabled),
.danger-modal-warning .btn-danger:hover:not(:disabled) {
    box-shadow: 0 0 18px rgba(255, 178, 62, 0.5);
    transform: scale(1.02);
}

/* Landing page (logged-out home) */
.landing {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.landing-hero {
    text-align: center;
    padding: 20px 8px 8px;
}

.landing-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 40px;
    letter-spacing: 6px;
    margin: 0 0 16px;
    color: var(--text);
    text-shadow: 0 0 10px var(--cyan), 0 0 30px rgba(35, 242, 255, 0.5);
}

.landing-tagline {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    color: var(--text);
    margin: 0 auto 14px;
    max-width: 480px;
    line-height: 1.5;
}

.landing-sub {
    font-size: 14px;
    color: var(--text-dim);
    margin: 0 auto 28px;
    max-width: 460px;
    line-height: 1.6;
}

.landing-cta {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.landing-btn {
    width: auto;
    min-width: 140px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.btn-secondary {
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 43, 214, 0.5);
    background: rgba(255, 43, 214, 0.08);
    color: var(--magenta);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 43, 214, 0.2);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-secondary:hover {
    box-shadow: 0 0 16px rgba(255, 43, 214, 0.4);
    transform: scale(1.01);
}

.landing-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.landing-step {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 22px 20px;
    text-align: center;
}

.landing-step-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 12px;
    color: var(--cyan);
    filter: drop-shadow(0 0 6px var(--cyan));
}

.landing-step-icon svg {
    width: 100%;
    height: 100%;
}

.landing-step-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text);
    margin: 0 0 6px;
    text-transform: uppercase;
}

.landing-step-text {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0;
}

.landing-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 24px 22px;
}

.landing-panel-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cyan);
    margin: 0 0 12px;
    text-transform: uppercase;
}

.landing-panel-text {
    font-size: 13.5px;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0 0 10px;
}

.landing-panel-text:last-child {
    margin-bottom: 0;
}

.landing-panel-text strong {
    color: var(--red);
}

/* Highlight inside a panel text that is not a warning (the red default is for the Deserter notice). */
.landing-panel-text strong.landing-em {
    color: var(--magenta);
}

@media (min-width: 620px) {
    .landing-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Start-lock progress: spinner in the button and a frozen form until the server answers. */
.spinner {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 2px solid rgba(35, 242, 255, 0.25);
    border-top-color: var(--cyan);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-loading,
.btn-loading:hover {
    cursor: progress;
    pointer-events: none;
    transform: none;
}

.start-lock-form.is-submitting {
    cursor: progress;
}

.start-lock-form.is-submitting .confirm-back,
.start-lock-form.is-submitting .switch {
    opacity: 0.4;
    pointer-events: none;
}

/* Toast: appears at the top, then fades away on its own. */
.toast {
    position: fixed;
    top: 76px;
    left: 50%;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    animation: toastLife 15s ease forwards;
}

.toast-success {
    background: rgba(6, 22, 16, 0.94);
    border: 1px solid rgba(57, 255, 176, 0.55);
    color: var(--green);
    box-shadow: 0 0 18px rgba(57, 255, 176, 0.3);
}

.toast-icon {
    width: 22px;
    height: 22px;
    flex: none;
    filter: drop-shadow(0 0 4px currentColor);
}

@keyframes toastLife {
    0% { opacity: 0; transform: translate(-50%, -14px); }
    3% { opacity: 1; transform: translate(-50%, 0); }
    94% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -6px); visibility: hidden; }
}

/* Profile notification channels */
.notify-intro {
    margin: -6px 0 16px;
    font-size: 13px;
    color: var(--text-dim);
}

.notify-channel {
    padding: 14px 0 6px;
    border-top: 1px solid var(--panel-border);
}

.notify-channel:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.notify-switch {
    align-items: center;
    margin-bottom: 8px;
}

.notify-switch .switch-track {
    margin-top: 0;
}

.notify-switch .switch-label {
    padding-top: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.notify-sub {
    font-weight: 500;
    color: var(--text-dim);
}

.notify-soon {
    margin-left: auto;
}

.notify-text {
    margin: 0 0 12px 58px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
}

.notify-text p {
    margin: 0 0 6px;
}

.notify-text ul {
    margin: 0 0 8px;
    padding-left: 18px;
}

.notify-text strong {
    color: var(--text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.notify-channel-soon .notify-switch {
    cursor: default;
}

.notify-channel-soon .switch-track {
    opacity: 0.4;
}

.notify-channel-soon .switch-label {
    color: var(--text-dim);
}

.notify-switch input:disabled + .switch-track {
    opacity: 0.4;
}

@media (max-width: 520px) {
    .notify-text {
        margin-left: 0;
    }
}

/* Profile deletion */
.delete-note {
    margin: -4px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

.delete-switch input:checked + .switch-track {
    background: rgba(255, 59, 74, 0.15);
    border-color: rgba(255, 59, 74, 0.6);
    box-shadow: 0 0 10px rgba(255, 59, 74, 0.35);
}

.delete-switch input:checked + .switch-track::after {
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
}

.delete-switch input:disabled + .switch-track {
    opacity: 0.4;
}

/* Strip over every page for a blocked account: red, stronger than the deletion strip, with a clear way out (Support). */
.blocked-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 12px 16px;
    background: rgba(255, 59, 74, 0.2);
    border-bottom: 1px solid rgba(255, 59, 74, 0.7);
    box-shadow: 0 0 22px rgba(255, 59, 74, 0.25);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
}

.blocked-banner-icon {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--red);
    filter: drop-shadow(0 0 5px var(--red));
}

.blocked-banner strong {
    color: var(--red);
}

.blocked-banner-btn {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(35, 242, 255, 0.6);
    background: rgba(35, 242, 255, 0.12);
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(35, 242, 255, 0.25);
}

/* Strip over every page for a signed-in user whose deletion is scheduled. */
.deletion-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 16px;
    background: rgba(255, 59, 74, 0.14);
    border-bottom: 1px solid rgba(255, 59, 74, 0.5);
    color: var(--text);
    font-size: 13.5px;
    text-align: center;
}

.deletion-banner-icon {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--red);
    filter: drop-shadow(0 0 4px var(--red));
}

.deletion-banner strong {
    color: var(--red);
}

.deletion-banner-form {
    margin: 0;
}

/* One-click cancel: a real button, easy to hit on a phone. */
.deletion-banner-btn {
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(35, 242, 255, 0.6);
    background: rgba(35, 242, 255, 0.12);
    color: var(--cyan);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(35, 242, 255, 0.25);
}

.deletion-banner-btn:hover {
    box-shadow: 0 0 16px rgba(35, 242, 255, 0.5);
}

/* Support form */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.support-note {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

.support-note a {
    color: var(--cyan);
    text-decoration: none;
}

/* Legal pages (Terms, Privacy) */
.legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 40px;
}

.legal-updated {
    margin: 0 0 22px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.legal-section {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 14px;
}

.legal-section h2 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cyan);
}

.legal-section p,
.legal-section li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
}

.legal-section p {
    margin: 0 0 10px;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section ul {
    margin: 0 0 10px;
    padding-left: 20px;
}

.legal-section li {
    margin-bottom: 6px;
}

.legal-section strong {
    color: var(--text);
}

.legal-section a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}

.legal-todo {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px dashed rgba(255, 178, 62, 0.5);
    background: rgba(255, 178, 62, 0.06);
    color: var(--amber) !important;
    font-size: 12.5px !important;
}

/* Footer */
.site-footer {
    position: relative;
    max-width: 640px;
    margin: 24px auto 0;
    padding: 28px 20px 40px;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.7;
}

/* Barely-there solid white rule that opens the footer. */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.site-footer a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.site-footer-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

.site-footer a:hover {
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(35, 242, 255, 0.55);
}