/* -------------------------------------------------------------
 * Cards Web App - Ruled Index Revision Cards Theme
 * Theme: Tactile Revision Cards, Study Flashcards, Learning Desk
 * ------------------------------------------------------------- */

/* --- Custom Design Properties & Tokens --- */
:root {
    --font-primary: 'Outfit', sans-serif;
    --font-headings: 'Fredoka', sans-serif;
    --font-handwritten: 'Patrick Hand', cursive;

    /* Dark Study Desk Surface Backdrop (High Contrast) */
    --color-desk-base: hsl(220, 20%, 9%);
    --color-desk-glow: radial-gradient(circle at center, hsl(220, 16%, 16%), hsl(220, 20%, 9%));
    
    /* Ruled Index Card Palette */
    --color-card-base: hsl(40, 25%, 98%); /* Pristine white/cream index card */
    --color-card-lines: hsla(205, 75%, 55%, 0.1); /* Ruled blue horizontal lines */
    --color-card-header: hsl(355, 80%, 58%); /* Ruled red top index line */
    
    --color-ink: hsl(215, 40%, 15%); /* Slate dark ink */
    --color-ink-muted: hsl(215, 15%, 45%);
    --color-ink-dimmed: hsl(218, 10%, 65%);

    /* Highlighter Marker Highlights */
    --color-highlighter-yellow: hsl(52, 95%, 63%);
    --color-highlighter-teal: hsl(175, 75%, 45%);
    --color-highlighter-purple: hsl(270, 70%, 60%);
    --color-highlighter-pink: hsl(340, 85%, 60%);

    --color-success: hsl(145, 75%, 38%);
    --color-danger: hsl(355, 80%, 55%);

    /* 3D Stacked-Card Deck Layering (Illusions of multiple cards) */
    --card-stack-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1);
    
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.15s ease;
}

/* --- Base Layout --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    /* Personalisation hooks: the theme customizer overrides these --user-* vars
       on :root at runtime. When unset they fall back to the default dark desk. */
    background-color: var(--user-page-bg-color, var(--color-desk-base));
    background-image: var(--user-page-bg-image, var(--color-desk-glow));
    /* Default is plain "cover". For an uploaded image the customizer overrides
       this with an aspect-ratio + zoom aware size so the picture overflows on
       BOTH axes — otherwise cover leaves one axis exact-fit and its position
       slider has nothing to slide (horizontal, on wide screens). */
    background-size: var(--user-page-bg-size, cover);
    background-position: var(--user-page-bg-position, center center);
    background-attachment: fixed;
    color: var(--color-ink);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* Enforce strict single-screen height with zero scrolling for login and recovery views */
body.page-single-card {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height to prevent mobile browser navigation scroll */
    overflow: hidden;
}

body.page-single-card .app-container {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height to prevent mobile browser navigation scroll */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.page-single-card .login-wrapper {
    margin: 0 auto;
}

/* --- Ambient Floating Desk Doodles --- */
.app-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.doodle {
    position: absolute;
    font-size: 26px;
    color: hsla(0, 0%, 100%, 0.04); /* Soft pencil marks on desk */
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}

.doodle-1 {
    top: 15%;
    left: 6%;
    animation: deskFloat 15s infinite alternate ease-in-out;
}

.doodle-2 {
    bottom: 15%;
    right: 8%;
    font-size: 32px;
    animation: deskFloat 20s infinite alternate-reverse ease-in-out;
}

.doodle-3 {
    bottom: 25%;
    left: 12%;
    animation: deskFloat 18s infinite alternate ease-in-out 1s;
}

.doodle-4 {
    top: 10%;
    right: 15%;
    font-size: 30px;
    animation: deskFloat 12s infinite alternate ease-in-out 2s;
}

@keyframes deskFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-12px) rotate(6deg); }
}

/* ═══════════════════════════════════════════════════════════
   AUTH BACKDROP — the sign-in / welcome stage
   ───────────────────────────────────────────────────────────
   A flat near-black desk reads as "empty" and gives the eye
   nowhere to go. These layers turn it into a study desk at night:
   a warm pool of light behind the card so it becomes the obvious
   focal point, two drifting highlighter-coloured glows for life
   and a touch of curiosity, and a darker edge vignette so the
   cream card stays the brightest thing on screen. Scoped to the
   single-card auth pages only — the working dashboard stays dark.
   ═══════════════════════════════════════════════════════════ */
body.page-single-card {
    background-color: hsl(231, 32%, 8%);
    background-image:
        /* warm pool of light pooled behind the card — the focal point */
        radial-gradient(920px 640px at 50% 44%, hsla(268, 65%, 46%, 0.34), transparent 62%),
        /* teal wash, upper-left */
        radial-gradient(780px 640px at 12% 16%, hsla(175, 72%, 46%, 0.20), transparent 58%),
        /* pink wash, lower-right */
        radial-gradient(780px 640px at 88% 84%, hsla(338, 82%, 58%, 0.20), transparent 58%),
        /* base desk with an edge vignette — brighter centre, darker rim */
        radial-gradient(circle at center, hsl(231, 28%, 15%) 0%, hsl(233, 38%, 5%) 100%);
}

/* FOUR large, soft, drifting colour blobs across the full highlighter
   palette — the playful "aurora". Two live on <body>, two on the doodle
   layer, since a pseudo-element pair is all each host can give. transform
   + opacity only, so they stay on the GPU. */
body.page-single-card::before,
body.page-single-card::after,
body.page-single-card .app-background::before,
body.page-single-card .app-background::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: -1;
    opacity: 0.62;
}
body.page-single-card::before {
    width: 46vh; height: 46vh; min-width: 320px; min-height: 320px;
    top: 4%; left: 4%;
    background: radial-gradient(circle, hsla(270, 80%, 64%, 0.62), transparent 70%);   /* purple */
    animation: auroraDriftA 18s ease-in-out infinite alternate;
}
body.page-single-card::after {
    width: 50vh; height: 50vh; min-width: 340px; min-height: 340px;
    bottom: 3%; right: 4%;
    background: radial-gradient(circle, hsla(175, 82%, 50%, 0.55), transparent 70%);   /* teal */
    animation: auroraDriftB 23s ease-in-out infinite alternate;
}
body.page-single-card .app-background::before {
    width: 36vh; height: 36vh; min-width: 260px; min-height: 260px;
    top: 52%; left: 10%;
    background: radial-gradient(circle, hsla(338, 88%, 62%, 0.55), transparent 70%);   /* pink */
    animation: auroraDriftC 21s ease-in-out infinite alternate;
}
body.page-single-card .app-background::after {
    width: 32vh; height: 32vh; min-width: 240px; min-height: 240px;
    top: 8%; right: 12%;
    background: radial-gradient(circle, hsla(52, 95%, 62%, 0.45), transparent 70%);    /* yellow */
    animation: auroraDriftD 16s ease-in-out infinite alternate;
}

@keyframes auroraDriftA { 0% { transform: translate(0,0) scale(1); }     100% { transform: translate(70px, 48px) scale(1.18); } }
@keyframes auroraDriftB { 0% { transform: translate(0,0) scale(1); }     100% { transform: translate(-58px, -44px) scale(1.12); } }
@keyframes auroraDriftC { 0% { transform: translate(0,0) scale(1); }     100% { transform: translate(46px, -54px) scale(1.2); } }
@keyframes auroraDriftD { 0% { transform: translate(0,0) scale(1); }     100% { transform: translate(-50px, 50px) scale(1.14); } }

/* Bolder, bigger, livelier study doodles — full highlighter colours, a
   drop shadow so they read against the glow, and a playful float that
   rotates and pulses. */
body.page-single-card .doodle {
    font-size: 38px;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
    animation-name: deskFloatPlayful;
    animation-timing-function: ease-in-out;
}
body.page-single-card .doodle-1 { color: hsla(52, 95%, 64%, 0.22); }   /* star — highlighter yellow */
body.page-single-card .doodle-2 { color: hsla(338, 88%, 64%, 0.22); font-size: 46px; }  /* pencil — pink */
body.page-single-card .doodle-3 { color: hsla(175, 78%, 52%, 0.24); }  /* lightbulb — teal */
body.page-single-card .doodle-4 { color: hsla(270, 78%, 68%, 0.24); font-size: 44px; }  /* graduation cap — purple */

@keyframes deskFloatPlayful {
    0%   { transform: translateY(0)     rotate(-6deg) scale(1); }
    50%  { transform: translateY(-20px) rotate(9deg)  scale(1.1); }
    100% { transform: translateY(5px)   rotate(-4deg) scale(1); }
}

/* --- Main Workspace --- */
.app-container {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* --- 3D Flippable Revision Card Framework (FLUID PERSPECTIVE) --- */
.flip-card-container {
    perspective: 1200px;
    width: 100%;
    max-width: clamp(280px, calc(100% - 24px), 440px); /* Fluid width constraints */
    height: clamp(430px, calc(380px + 12vh), 520px); /* Fluid height based on screen proportions */
    position: relative;
    max-height: 100vh;
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    position: relative;
    border-radius: 16px;
    box-shadow: var(--card-stack-shadow);
}

/* Base Hover state (when NOT flipped) */
.flip-card-inner:hover:not(.flipped) {
    transform: translateY(-4px) rotate(-0.5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Toggle flip trigger class */
.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

/* Flipped Hover state - preserves the Y-180 rotation and shifts the stacked shadows leftward */
.flip-card-inner.flipped:hover {
    transform: rotateY(180deg) translateY(-4px) rotate(0.5deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
}

.flip-card-front, .flip-card-back {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg); /* Pre-flipped face */
}

/* Manage z-index and pointer-events to ensure the hidden face doesn't block inputs */
.flip-card-inner:not(.flipped) .flip-card-front {
    z-index: 2;
    pointer-events: auto;
}
.flip-card-inner:not(.flipped) .flip-card-back {
    z-index: 1;
    pointer-events: none;
}

.flip-card-inner.flipped .flip-card-front {
    z-index: 1;
    pointer-events: none;
}
.flip-card-inner.flipped .flip-card-back {
    z-index: 2;
    pointer-events: auto;
}

/* --- Tactile Ruled Index Revision Card Layout --- */
.glass-card {
    background-color: var(--color-card-base);
    border: 1px solid hsl(210, 10%, 82%);
    border-radius: 16px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;

    /* Index Card Ruled Lines Grid */
    background-image: repeating-linear-gradient(
        var(--color-card-lines) 0px,
        var(--color-card-lines) 1px,
        transparent 1px,
        transparent 28px
    );
    background-attachment: local;
}

/* Binder rings and punch holes have been successfully removed for a minimal, clean revision card theme. */

/* --- Revision Stack Wrapper --- */
.login-wrapper {
    width: clamp(280px, calc(100% - 24px), 440px); /* Responsive fluid width calculations */
    margin: clamp(10px, 3vh, 40px) auto; /* Scales vertical spacing dynamically */
}

.login-card {
    padding: calc(24px + 1.5vh) calc(16px + 1.5vw) calc(28px + 1.5vh) calc(16px + 1.5vw); /* Fluid paddings */
    height: 100%; /* Keep forms centered in flip frames */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Perfectly centers elements vertically inside the card */
    gap: calc(8px + 0.4vh); /* Fluid gaps scaling on viewport heights */
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

.login-card::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

/* --- Study Logo Stamp (FLUID GRAPHICS SIZE) --- */
.brand-logo-area {
    display: flex;
    justify-content: center;
    margin-bottom: calc(2px + 0.5vh);
}

.logo-circle {
    width: clamp(50px, calc(44px + 3.5vh), 72px); /* Automatically scales circular bounds */
    height: clamp(50px, calc(44px + 3.5vh), 72px);
    border-radius: 50%;
    background: transparent;
    border: 2px dashed var(--color-ink-dimmed);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(20px, calc(16px + 1vh), 26px); /* Fluid logo size */
    color: var(--color-ink);
    transition: var(--transition-smooth);
}

.logo-circle:hover {
    transform: scale(1.08) rotate(15deg);
    color: var(--color-highlighter-purple);
    border-style: solid;
    border-color: var(--color-ink);
}

/* --- Welcome Header + Winking character o (FLUID TYPOGRAPHY) --- */
.welcome-container {
    text-align: center;
    margin-bottom: calc(4px + 0.8vh);
}

/* Text-alignment utilities. Templates already use these (e.g. the dashboard and
   settings headings carry .text-left), but they were never defined — so those
   headings silently fell back to the centered .welcome-container default.
   Declared after .welcome-container so they win on an element that has both. */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.welcome-heading {
    font-family: var(--font-headings);
    font-size: clamp(28px, calc(24px + 1.8vh), 42px); /* Stretches dynamically based on screen height */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    display: flex;
    justify-content: center;
    gap: 0.3em;
    margin-bottom: calc(4px + 0.5vh);
    color: var(--user-heading-color, hsl(42, 40%, 92%)); /* warm off-white — readable on dark desk background */
}

.small-heading {
    font-size: clamp(24px, calc(20px + 1.5vh), 32px);
}

.word-group {
    display: inline-flex;
    white-space: nowrap;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(-45px) scale(0.9);
    animation: dropBounce 0.8s forwards;
    animation-delay: calc(var(--i) * 0.06s);
}

/* Each letter falls in from above, lands, bounces twice with diminishing height,
   then settles. Per-keyframe easing does the physics: accelerate on the way down
   (gravity), decelerate at the top of each bounce. */
@keyframes dropBounce {
    0%   { opacity: 0; transform: translateY(-45px) scale(0.9);  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
    50%  { opacity: 1; transform: translateY(0)     scale(1);    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
    70%  {             transform: translateY(-12px) scale(1.03); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
    85%  {             transform: translateY(0)     scale(1);    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
    93%  {             transform: translateY(-4px)  scale(1);    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
    100% { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Eye and Nose character on letter 'o' */
.letter-o-face {
    position: relative;
    display: inline-block;
}

.letter-char {
    display: inline-block;
}

.face-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.eye {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--color-ink);
    border-radius: 50%;
    top: 38%;
    animation: eyeWink 4s infinite ease-in-out;
}

.eye-l { left: 28%; }
.eye-r { right: 28%; }

@keyframes eyeWink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.nose {
    position: absolute;
    width: 5px;
    height: 4px;
    background-color: var(--color-highlighter-pink);
    border-radius: 50%;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: noseWiggle 3s infinite ease-in-out;
}

@keyframes noseWiggle {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-46%, -50%) scale(1.25); }
}

.welcome-subtitle {
    font-family: var(--font-handwritten);
    font-size: clamp(16px, calc(14px + 0.8vh), 20px); /* Fluid subtitle handwriting */
    color: var(--user-subtext-color, hsl(220, 12%, 68%)); /* soft silver-muted — readable on dark desk without overpowering heading */
    font-weight: 500;
}

/* The heading colours above are tuned for the dark desk background. On the login
   card that text sits on a light cream face, where near-white reads as faded.
   Repaint it here: a rich brand purple for "Welcome" / "Sign In", darker ink for
   the subtitle — crisp and on-brand against the cream. */
.login-card .welcome-heading {
    color: hsl(268, 55%, 42%);
}

.login-card .welcome-subtitle {
    color: var(--color-ink-muted);
}

/* --- Revision Form Inputs & Checkboxes (FLUID SCALING) --- */
.login-form {
    display: flex;
    flex-direction: column;
    gap: calc(6px + 0.5vh); /* Dynamic gap spacing */
}

.form-group-custom {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label-custom {
    font-family: var(--font-headings);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-ink-muted);
}

.form-group-custom:focus-within .form-label-custom {
    color: var(--color-ink);
}

.input-container {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
}

.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-dimmed);
    font-size: 15px;
    display: flex;
    align-items: center;
}

.form-group-custom:focus-within .input-icon {
    color: var(--color-ink);
}

.form-input {
    width: 100%;
    padding: clamp(9px, calc(8px + 0.5vh), 12px) 14px clamp(9px, calc(8px + 0.5vh), 12px) 40px;
    background: hsla(0, 0%, 100%, 0.6);
    border: 1px solid hsl(210, 10%, 82%);
    border-radius: 8px;
    font-family: var(--font-primary);
    color: var(--color-ink);
    font-size: clamp(13px, calc(12px + 0.3vh), 15px); /* Scales font slightly on phones */
    outline: none;
    transition: var(--transition-fast);
}

.form-input::placeholder {
    color: var(--color-ink-dimmed);
    opacity: 0.65;
}

/* highlighter outline focus effect */
.form-input:focus {
    background: #ffffff;
    border-color: var(--color-ink);
    box-shadow: 0 0 0 4px var(--color-highlighter-yellow);
}

/* Custom revision card checkbox layout */
.remember-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.remember-checkbox-input {
    display: none; /* Hide default browser box */
}

.checkbox-custom-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-ink-dimmed);
    border-radius: 4px;
    position: relative;
    background-color: #ffffff;
    transition: var(--transition-fast);
}

.remember-checkbox-input:checked + .checkbox-custom-box {
    border-color: var(--color-ink);
    background-color: var(--color-highlighter-yellow);
}

.checkbox-custom-box::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 11px;
    color: var(--color-ink);
    transition: var(--transition-fast);
}

.remember-checkbox-input:checked + .checkbox-custom-box::after {
    transform: translate(-50%, -50%) scale(1);
}

.remember-checkbox-text {
    font-size: clamp(15px, calc(13px + 0.6vh), 18px); /* Responsive fluid checkboxes */
    color: var(--color-ink-muted);
}

/* Buttons split grid on credentials back page */
.form-buttons-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: calc(8px + 0.5vw);
}

/* Error configurations */
.has-error .form-input {
    border-color: hsl(355, 80%, 65%);
    box-shadow: 0 0 0 4px rgba(355, 85%, 60%, 0.15);
}

.has-error .form-label-custom {
    color: hsl(355, 80%, 65%) !important;
}

.field-error-msg {
    font-family: var(--font-handwritten);
    font-size: 15px;
    color: hsl(355, 80%, 60%);
    margin-top: 2px;
}

.field-help-text {
    font-family: var(--font-handwritten);
    font-size: 15px;
    color: var(--color-ink-dimmed);
    margin-top: 2px;
    line-height: 1.3;
}

/* --- Revision Actions helper --- */
.form-actions-helper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 10;
}

.forgot-password-link {
    font-family: var(--font-handwritten);
    font-size: clamp(15px, calc(13px + 0.5vh), 17px);
    color: var(--color-ink-muted);
    text-decoration: none;
    border-bottom: 1.5px dashed var(--color-ink-dimmed);
    transition: var(--transition-fast);
}

.forgot-password-link:hover {
    color: var(--color-ink);
    border-bottom-style: solid;
    background-color: var(--color-highlighter-yellow);
}

/* --- Highlighter Neon Marker Buttons (FLUID BUTTONS) --- */
.btn {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: clamp(13px, calc(12px + 0.3vh), 15px); /* Scales button font */
    padding: clamp(10px, calc(8px + 0.5vh), 12px) calc(14px + 1vw); /* Fluid padding horizontally */
    border-radius: 8px;
    border: 1px solid var(--color-ink);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
    text-decoration: none;
    box-shadow: 0 4px 0 var(--color-ink);
    z-index: 10;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-primary {
    background-color: var(--color-highlighter-purple);
    color: var(--color-text-white);
}

.btn-primary:hover {
    background-color: hsl(270, 75%, 65%);
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--color-ink);
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--color-ink);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid hsl(218, 10%, 65%);
    color: var(--color-ink);
    box-shadow: 0 4px 0 var(--color-ink-dimmed);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--color-ink-dimmed);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    box-shadow: 0 2px 0 var(--color-ink);
}

.btn-sm:hover {
    box-shadow: 0 3px 0 var(--color-ink);
}

.btn-sm:active {
    box-shadow: 0 1px 0 var(--color-ink);
}

.icon-slide {
    transition: var(--transition-fast);
}

.btn:hover .icon-slide {
    transform: translateX(3px);
}

/* Try Again and Correct/Incorrect custom marker buttons */
.btn-fail-red {
    background-color: var(--color-highlighter-pink) !important;
}

.btn-fail-red:hover {
    background-color: hsl(340, 95%, 68%) !important;
}

/* --- Correct / Incorrect Typography Stamps --- */
.font-accent-correct {
    background: none;
    -webkit-text-fill-color: var(--color-success);
    color: var(--color-success);
    text-shadow: 0 0 20px rgba(145, 75%, 45%, 0.15);
    font-family: var(--font-headings);
}

.font-accent-incorrect {
    background: none;
    -webkit-text-fill-color: var(--color-danger);
    color: var(--color-danger);
    text-shadow: 0 0 20px rgba(355, 85%, 60%, 0.15);
    font-family: var(--font-headings);
}

/* Highlighted badges for revision markings */
.card-success-badge {
    background: hsl(145, 80%, 96%) !important;
    border: 2px dashed var(--color-success) !important;
}

.card-fail-badge {
    background: hsl(355, 90%, 96%) !important;
    border: 2px dashed var(--color-danger) !important;
}

.border-fail-highlight::after {
    background-color: var(--color-danger) !important; /* Make line red for incorrect card */
}

/* Success transition progress meter */
.redirect-countdown-container {
    width: 100%;
    margin-top: calc(12px + 1vh);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.redirect-progress-bar {
    width: 80%;
    height: 4px;
    background-color: hsla(145, 75%, 38%, 0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.redirect-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-success);
    animation: loadingBar 2.2s linear forwards;
}

@keyframes loadingBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

.countdown-text {
    font-size: 16px;
    color: var(--color-ink-muted);
}

/* --- Tactile Paper Alerts --- */
.alert {
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--font-handwritten);
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid;
    z-index: 10;
}

.alert-danger {
    background: hsl(355, 90%, 96%);
    border-color: hsl(355, 80%, 75%);
    color: hsl(355, 85%, 45%);
}

.alert-success {
    background: hsl(145, 80%, 96%);
    border-color: hsl(145, 75%, 75%);
    color: hsl(145, 75%, 30%);
}

.info-box {
    margin-top: calc(8px + 1vh);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.text-muted {
    font-family: var(--font-handwritten);
    font-size: 17px;
    line-height: 1.4;
    color: var(--color-ink-muted);
}

.terminal-note {
    background: rgba(255, 255, 255, 0.5);
    border: 2px dashed var(--color-ink-dimmed);
    border-radius: 8px;
    padding: 12px;
    text-align: left;
}

.note-label {
    font-family: var(--font-headings);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-highlighter-pink);
    display: block;
    margin-bottom: 4px;
}

.note-content {
    font-family: var(--font-handwritten);
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-ink-muted);
}

.note-content strong {
    color: var(--color-ink);
}

.form-footer-link {
    margin-top: calc(8px + 0.8vh);
    display: flex;
    justify-content: center;
    z-index: 10;
}

.back-link {
    font-family: var(--font-handwritten);
    font-size: 17px;
    color: var(--color-ink-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.back-link:hover {
    color: var(--color-ink);
}

.back-link i {
    transition: var(--transition-fast);
}

.back-link:hover i {
    transform: translateX(-3px);
}

/* The base colours above suit the cream auth cards (dark text on light). But on
   every other page the back-link sits on the dark desk, where dark ink is faded
   and the darker hover made it vanish entirely. On the desk, go light and get
   BRIGHTER on hover, never darker. The single-card auth pages keep the dark version. */
body:not(.page-single-card) .back-link {
    /* Shares the subtitle colour control: the back-link sits on the themed
       page backdrop, so it recolours with the subtitle text personalisation. */
    color: var(--user-subtext-color, hsl(42, 26%, 80%));
}

body:not(.page-single-card) .back-link:hover {
    color: hsl(42, 50%, 95%);
}

/* --- Study Flashcards Dashboard --- */
.dashboard-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background-color: var(--color-card-base);
    border: 1px solid hsl(210, 10%, 82%);
    border-radius: 12px;
    box-shadow: 2px 2px 0 hsl(210, 10%, 82%), 0 6px 15px rgba(0,0,0,0.15);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-icon {
    font-size: 20px;
    color: var(--color-ink);
}

.brand-text {
    font-family: var(--font-headings);
    font-size: 20px;
    font-weight: 700;
}

.header-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-greeting {
    font-family: var(--font-handwritten);
    font-size: 18px;
    color: var(--color-ink-muted);
}

.user-greeting strong {
    color: var(--color-ink);
}

.wave-hand {
    display: inline-block;
    animation: handWave 2.5s infinite;
    transform-origin: 70% 70%;
}

@keyframes handWave {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(12deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(10deg); }
}

/* Stacks of ruled Revision Cards on the Desk */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.interactive-card {
    padding: 44px 24px 24px 24px; /* Larger top padding to clear top red margins */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card-glow {
    /* Bold red line running horizontally across top of index card */
    position: absolute;
    width: 100%;
    height: 4px;
    top: 36px;
    left: 0;
    background-color: var(--color-card-header) !important;
}

/* Piles of revision cards of different highlighter header colors */
.item-cyan::before { border-color: var(--color-highlighter-teal); }
.item-purple::before { border-color: var(--color-highlighter-purple); }
.item-pink::before { border-color: var(--color-highlighter-pink); }

.item-cyan:hover { border-color: var(--color-highlighter-teal); }
.item-purple:hover { border-color: var(--color-highlighter-purple); }
.item-pink:hover { border-color: var(--color-highlighter-pink); }

.card-icon {
    font-size: 22px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: hsla(0, 0%, 100%, 0.4);
    border: 1px dashed var(--color-ink-dimmed);
    transition: var(--transition-smooth);
}

.interactive-card:hover .card-icon {
    background: #ffffff;
    border-style: solid;
    border-color: var(--color-ink);
}

.item-cyan .card-icon { color: var(--color-highlighter-teal); }
.item-purple .card-icon { color: var(--color-highlighter-purple); }
.item-pink .card-icon { color: var(--color-highlighter-pink); }

.card-title {
    font-family: var(--font-headings);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.card-desc {
    font-size: 14px;
    color: var(--color-ink-muted);
    line-height: 1.4;
    margin-bottom: 14px;
    flex-grow: 1;
}

.card-stats {
    display: flex;
    gap: 8px;
}

.stat-badge {
    font-family: var(--font-handwritten);
    background: hsla(0, 0%, 100%, 0.5);
    border: 1px solid hsl(210, 10%, 82%);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 14px;
    color: var(--color-ink-muted);
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background: hsla(0, 0%, 100%, 0.5);
    border: 1px solid hsl(210, 10%, 82%);
    border-radius: 4px;
    margin-bottom: 12px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 4px;
    background-color: var(--color-highlighter-purple);
}

.mt-md { margin-top: 12px; }
.mt-lg { margin-top: 18px; }

/* --- Micro-Interaction Animations --- */
.animate-scale-up {
    animation: cardScaleUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

.animate-pulse {
    animation: gentleWiggle 4s infinite ease-in-out;
}

.animate-fade-in {
    animation: cardFadeIn 0.6s ease forwards;
}

.animate-fade-in-delayed {
    opacity: 0;
    animation: cardFadeIn 0.6s ease forwards 0.3s;
}

.animate-shake {
    animation: cardShake 0.4s both;
}

@keyframes cardScaleUp {
    0% { transform: scale(0.96); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes gentleWiggle {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-3deg); }
}

@keyframes cardFadeIn {
    to { opacity: 1; z-index: 10; }
}

@keyframes cardShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    body {
        padding: 12px;
    }
    
    .login-card {
        padding: 36px 20px 32px 20px;
    }
    
    .welcome-heading {
        font-size: 34px;
    }
    
    .small-heading {
        font-size: 26px;
    }
    
    .dashboard-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 12px;
    }
    
    .header-user {
        width: 100%;
        justify-content: space-between;
    }
}

/* Enforce strict single page container scaling for short screens (laptops, small viewports) */
@media (max-height: 640px), (max-width: 480px) {
    .flip-card-container {
        height: 440px; /* Compress overall card deck height */
    }
    .login-card {
        padding: 32px 16px 28px 16px; /* Reduced side padding to give forms max breathing room */
    }
    .welcome-container {
        margin-bottom: 10px;
    }
    .welcome-heading {
        font-size: 32px;
        gap: 0.3em;
    }
    .welcome-subtitle {
        font-size: 17px;
    }
    .logo-circle {
        width: 50px;
        height: 50px;
        font-size: 18px;
        margin-bottom: 4px;
    }
    .info-box {
        margin-top: 6px;
        gap: 4px;
    }
    .text-muted {
        font-size: 15px;
    }
    .remember-checkbox-text {
        font-size: 16px;
    }
    .form-input {
        padding: 9px 12px 9px 36px;
        font-size: 14px;
    }
    .btn {
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 6px;
    }
    .form-buttons-grid {
        margin-top: 8px !important;
        gap: 8px;
    }
    .paper-margin-line {
        left: 30px; /* Shift pink line further left on small screens */
    }
}

/* =============================================================
   --- Global Authenticated Navbar & Footer Design System ---
   ============================================================= */

/* --- Global Authenticated Navbar --- */
.global-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: var(--user-header-bg, var(--color-card-base));
    border-bottom: 2px solid hsl(210, 10%, 84%);
    border-top: 4px solid var(--color-card-header); /* Classy red line across top of navbar matching index cards */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(16px + 2vw);
    z-index: 100;
}

.nav-left {
    display: flex;
    align-items: center;
}

.nav-left .desktop-nav {
    display: flex;
    gap: 16px;
}

.nav-link-item {
    font-family: var(--font-headings);
    font-weight: 600;
    text-decoration: none;
    /* Header text follows the heading-text personalisation (hover/active below
       keep their own high-contrast colours). */
    color: var(--user-heading-color, var(--color-ink-muted));
    font-size: 15px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-link-item:hover {
    color: var(--color-ink);
    background-color: var(--color-highlighter-yellow);
    border-color: var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    transform: translateY(-1px);
}

.nav-link-item.active {
    color: var(--color-ink);
    background-color: var(--color-highlighter-yellow);
    border-color: var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
}

.burger-menu-btn {
    display: none;
    background: transparent;
    border: 1px solid var(--color-ink);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 18px;
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--color-ink);
    transition: var(--transition-fast);
}

.burger-menu-btn:hover {
    background-color: var(--color-highlighter-yellow);
    transform: translateY(-1px);
}

.burger-menu-btn:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 0 var(--color-ink);
}

.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.nav-center .nav-brand-logo {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    color: var(--user-heading-color, var(--color-ink));
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-smooth);
}

.nav-center .nav-brand-logo:hover {
    color: var(--color-highlighter-purple);
    transform: scale(1.03);
}

.nav-right .user-welcome-text {
    font-family: var(--font-handwritten);
    font-size: 20px;
    color: var(--user-heading-color, var(--color-ink-muted));
}

.copyright-short {
    display: none;
}

.copyright-full {
    display: inline;
}

/* --- Mobile Nav Drawer Menu --- */
.mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-drawer-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background-color: var(--color-card-base);
    border-right: 2px solid hsl(210, 10%, 82%);
    border-top: 4px solid var(--color-card-header); /* Classy red top border for mobile drawer */
    z-index: 201;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    padding: 24px;
    background-image: repeating-linear-gradient(
        var(--color-card-lines) 0px,
        var(--color-card-lines) 1px,
        transparent 1px,
        transparent 28px
    );
    background-attachment: local;
}

.mobile-nav-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed var(--color-ink-dimmed);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.drawer-title {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 20px;
    color: var(--color-ink);
}

.drawer-close-btn {
    background: transparent;
    border: 1px solid var(--color-ink);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 18px;
    color: var(--color-ink);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--color-ink);
    transition: var(--transition-fast);
}

.drawer-close-btn:hover {
    background-color: var(--color-highlighter-pink);
    color: white;
}

.drawer-user-info {
    font-family: var(--font-handwritten);
    font-size: 19px;
    color: var(--color-ink-muted);
    margin-bottom: 24px;
    border-bottom: 1px solid hsl(210, 10%, 90%);
    padding-bottom: 12px;
}

.drawer-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.drawer-link-item {
    font-family: var(--font-headings);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-ink);
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: var(--transition-fast);
}

.drawer-link-item:hover {
    background-color: var(--color-highlighter-yellow);
    border-color: var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    transform: translateY(-1px);
}

/* --- Global Footer --- */
.global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    /* Footer shares the header's themed colour so the top and bottom chrome
       stay a matching pair when personalised. */
    background-color: var(--user-header-bg, var(--color-card-base));
    border-top: 2px solid hsl(210, 10%, 84%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(16px + 2vw);
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.03);
}

.global-footer .footer-left,
.global-footer .footer-center,
.global-footer .footer-right {
    font-family: var(--font-handwritten);
    font-size: 18px;
    /* Footer text follows the heading-text personalisation. */
    color: var(--user-heading-color, var(--color-ink-muted));
    display: flex;
    align-items: center;
    gap: 6px;
}

.global-footer .footer-left i {
    font-size: 14px;
}

.global-footer .footer-left i.text-success {
    color: var(--color-success);
}

/* --- Responsive Adjustments & Full Page Grid --- */
body:not(.page-single-card) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
}

body:not(.page-single-card) .app-container {
    width: 100%;
    max-width: 1200px;
    padding-top: 96px; /* Room for fixed top navbar */
    padding-bottom: 80px; /* Room for fixed footer */
    padding-left: calc(12px + 1.5vw);
    padding-right: calc(12px + 1.5vw);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    flex-grow: 1;
}

/* 3D Stacked Card Hover Enhancements on Dashboard Decks */
.interactive-card {
    box-shadow: var(--card-stack-shadow);
    border-radius: 16px;
    transition: var(--transition-smooth);
    background-color: var(--color-card-base);
    cursor: pointer;
}

.interactive-card:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 
        5px 8px 0 hsl(210, 10%, 80%),
        5px 8px 0 1px hsl(210, 10%, 73%),
        10px 16px 0 hsl(210, 10%, 70%),
        10px 16px 0 1px hsl(210, 10%, 63%),
        0 25px 45px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
    .burger-menu-btn {
        display: block;
    }
    .desktop-nav, .nav-right {
        display: none !important;
    }
    
    /* Adjust footer font sizes for better space on tablets/mobile */
    .global-footer .footer-left,
    .global-footer .footer-center,
    .global-footer .footer-right {
        font-size: 14px;
    }
    
    .copyright-full {
        display: none !important;
    }
    .copyright-short {
        display: inline !important;
    }
}

@media (max-width: 480px) {
    /* Optimize footer space on narrow smartphones */
    .global-footer .footer-left {
        display: none !important; /* Hide left connection text to prevent crowding */
    }
    .global-footer .footer-center,
    .global-footer .footer-right {
        font-size: 12.5px; /* Slightly smaller typography to prevent any wrapping */
    }
}

/* =============================================================
   --- Revision Studio Creator, Library, & Play Engine CSS ---
   ============================================================= */

/* --- Three-Column Dashboard Desk Layout --- */
.dashboard-three-columns {
    display: grid;
    /* 3 across on a desk, 2 on a tablet, 1 on a phone — decided by the space
       a column actually needs (300px) rather than by guessed device widths. */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 24px;
}

.desk-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.column-card {
    padding: 44px 20px 20px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 480px;
    box-shadow: var(--card-stack-shadow);
}

.column-header {
    border-bottom: 2px dashed var(--color-ink-dimmed);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.column-title {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 20px;
    /* Section headings inside the app container also follow the heading-text
       personalisation. Note: these sit on the cream cards, so a very light
       heading colour can read faintly here — pick with contrast in mind. */
    color: var(--user-heading-color, var(--color-ink));
    display: flex;
    align-items: center;
    gap: 8px;
}

.column-desc {
    font-size: 14.5px;
    /* Section descriptions inside the app container follow the subtitle-text
       personalisation (on cream cards — mind the contrast). */
    color: var(--user-subtext-color, var(--color-ink-muted));
    line-height: 1.45;
    margin-bottom: 16px;
}

.column-preview-box {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed var(--color-ink-dimmed);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.4);
    padding: 12px;
    min-height: 140px;
}

.canvas-dummy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-ink-muted);
}

.canvas-dummy i {
    font-size: 40px;
    color: var(--color-highlighter-purple);
}

.dummy-text {
    font-family: var(--font-handwritten);
    font-size: 18px;
}

.decks-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    max-height: 260px;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Custom themed scrollbars */
.decks-scroll-container::-webkit-scrollbar {
    width: 6px;
}
.decks-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.decks-scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-ink-dimmed);
    border-radius: 3px;
}

.library-decks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.library-deck-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid hsl(210, 10%, 82%);
    border-radius: 8px;
    text-decoration: none;
    transition: var(--transition-fast);
    box-shadow: 2px 2px 0 var(--color-ink);
}

.library-deck-item:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: var(--color-ink);
    box-shadow: 4px 4px 0 var(--color-ink);
}

.deck-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.deck-item-left i {
    font-size: 20px;
    color: var(--color-highlighter-teal);
    flex-shrink: 0;
}

.deck-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.deck-item-title {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-item-category {
    font-family: var(--font-handwritten);
    font-size: 14px;
    color: var(--color-ink-muted);
}

.deck-item-badge {
    font-family: var(--font-headings);
    font-size: 11px;
    background: var(--color-highlighter-yellow);
    border: 1px solid var(--color-ink);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--color-ink);
    font-weight: 600;
    flex-shrink: 0;
}

.empty-library-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 200px;
    text-align: center;
    color: var(--color-ink-muted);
}

.empty-library-state i {
    font-size: 36px;
    margin-bottom: 4px;
    color: var(--color-ink-dimmed);
}

.empty-library-state span {
    font-family: var(--font-headings);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-ink);
}

.empty-library-state .sub-empty {
    font-family: var(--font-handwritten);
    font-size: 15px;
    color: var(--color-ink-muted);
}

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

.category-folder-group {
    border: 1.5px solid hsl(210, 10%, 82%);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.4);
    overflow: hidden;
}

.category-folder-tab {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    color: var(--color-ink);
    border-bottom: 1.5px solid transparent;
    transition: var(--transition-fast);
}

/* The label may be a long category name; it yields before the delete button does. */
.category-folder-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-item-right-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Row actions (edit / delete) shared by library rows and category tabs.
   Sized as a real target rather than a bare 14px glyph, so a thumb can hit it. */
.row-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.6;
    z-index: 10;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.row-icon-btn:hover,
.row-icon-btn:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    background-color: hsla(0, 0%, 0%, 0.05);
}

.deck-edit-btn { color: var(--color-highlighter-purple); }
.deck-delete-btn,
.category-delete-btn { color: var(--color-danger); }

.category-folder-tab i {
    color: var(--color-highlighter-pink);
    margin-right: 4px;
}

.category-count {
    font-family: var(--font-handwritten);
    font-size: 14px;
    color: var(--color-ink-muted);
}

.category-folder-contents {
    display: none;
    padding: 8px 12px;
    flex-direction: column;
    gap: 8px;
    animation: cardScaleUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards;
}

.category-folder-group.open .category-folder-tab {
    border-bottom-color: hsl(210, 10%, 82%);
}

.category-folder-group.open .category-folder-contents {
    display: flex;
}

.folder-deck-link {
    font-family: var(--font-primary);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-ink-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    cursor: pointer;
    transition: var(--transition-fast);
}

/* Shown on decks whose cards have not been converted for the e-paper display yet. */
.deck-status-pill {
    font-family: var(--font-headings);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--color-ink);
    white-space: nowrap;
    flex-shrink: 0;
}

.deck-status-pill.status-draft      { background: hsl(210, 12%, 88%); color: var(--color-ink); }
.deck-status-pill.status-processing { background: var(--color-highlighter-yellow); color: var(--color-ink); }
.deck-status-pill.status-failed     { background: var(--color-danger); color: #ffffff; }

.folder-deck-link:hover {
    color: var(--color-ink);
    transform: translateX(2px);
}

.folder-deck-link i {
    font-size: 10px;
    color: var(--color-ink-dimmed);
}

.folder-deck-count {
    font-family: var(--font-handwritten);
    font-size: 13px;
    color: var(--color-ink-dimmed);
}

.folder-empty {
    font-family: var(--font-handwritten);
    font-size: 14px;
    color: var(--color-ink-dimmed);
    font-style: italic;
}

/* --- Studio Canvas Editor Layout --- */
body.page-studio-fullscreen {
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
}

body.page-studio-fullscreen .app-container {
    /* Sit between the fixed 64px navbar and the fixed 48px footer. This rule
       replaces the global 96px padding-top, so it must clear the navbar itself
       or the studio heading renders behind it. margin (not padding) keeps the
       offset outside the height box; height then fills the gap that remains,
       with an 8px breathing space top and bottom. */
    margin-top: 72px;
    height: calc(100vh - 128px) !important;
    height: calc(100dvh - 128px) !important;
    /* The shared .app-container rule sets flex-grow:1, and the body is a flex
       column at 100dvh — so without this the container grows past the height
       above to fill the whole viewport, dragging the grid and sidebars down
       under the fixed footer. Pin it to the height instead. */
    flex: none;
    max-width: 100% !important;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

body.page-studio-fullscreen .dashboard-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.page-studio-fullscreen .studio-grid {
    display: grid;
    /* Flexible tracks: on a wide desk the columns grow to the max and use the
       space; on a smaller screen they shrink toward the min instead of pushing
       the outer columns off-screen. The middle track is deliberately wider than
       the 400px canvas so the toolbar lays out on one row without clipping. */
    grid-template-columns:
        minmax(300px, 360px)
        minmax(480px, 560px)
        minmax(260px, 340px);
    justify-content: center;
    gap: 16px;
    width: 100%;
    /* Fill whatever height the container leaves below the header — do NOT size
       off 100vh. The container already sits between the navbar and footer, so a
       viewport-based height (plus a min-height floor) overshot it and pushed the
       grid's bottom under the fixed footer. min-height:0 lets it shrink to fit. */
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

body.page-studio-fullscreen .studio-sidebar {
    padding: 56px 14px 16px 14px; /* Shifted down to start below the card glow light */
    height: 100% !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--card-stack-shadow);
}

body.page-studio-fullscreen .sidebar-scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Custom scrollbars inside sidebars */
body.page-studio-fullscreen .sidebar-scrollable-content::-webkit-scrollbar {
    width: 6px;
}
body.page-studio-fullscreen .sidebar-scrollable-content::-webkit-scrollbar-track {
    background: transparent;
}
body.page-studio-fullscreen .sidebar-scrollable-content::-webkit-scrollbar-thumb {
    background: var(--color-ink-dimmed);
    border-radius: 3px;
}

body.page-studio-fullscreen .studio-main {
    padding: 56px 20px 20px 20px; /* Shifted down to start below the card glow light */
    height: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--card-stack-shadow);
    overflow: hidden;
}

/* Studio header — title + subtitle grouped on the left and constrained to the
   same width as the 3-column grid below (310 + 456 + 230 + two 16px gaps), so
   it sits over the columns instead of the title/subtitle being flung to opposite
   screen edges the way a full-width space-between did. */
body.page-studio-fullscreen .studio-header {
    width: 100%;
    max-width: 1260px;   /* 360 + 560 + 340 + two 16px gaps — matches the grid at full width */
    margin: 0 auto 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* children pick their own alignment */
    gap: 2px;
}

/* Back link stays pinned to the left; the title block centres in the header. */
body.page-studio-fullscreen .studio-header .back-link {
    align-self: flex-start;
}

.studio-header-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.studio-header-titles {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
}

.studio-header-titles .welcome-heading { margin: 0; }
.studio-header-titles .welcome-subtitle { margin: 0; font-size: 15px; }

.editing-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--color-highlighter-teal);
    border: 1.5px solid var(--color-ink);
    border-radius: 6px;
    padding: 3px 12px;
    font-family: var(--font-handwritten);
    font-size: 13px;
    color: var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
}

.studio-panel-title {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.panel-divider {
    border: none;
    border-bottom: 2px dashed var(--color-card-lines);
    margin: 16px 0;
}

.card-indicator {
    font-family: var(--font-headings);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.active-card-num {
    background: var(--color-highlighter-yellow);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--color-ink);
    color: var(--color-ink);
}

.category-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Canvas Stage Styles */
.canvas-stage-outer {
    background-color: hsl(220, 10%, 94%);
    border: 2px solid var(--color-ink);
    border-radius: 12px;
    padding: 8px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
    margin: 8px 0;
    max-width: 416px;
    width: 100%;
}

.canvas-stage {
    position: relative;
    width: 400px;
    height: 300px;
    border-radius: 8px;
    overflow: visible; /* Support overlays slightly sticking out */
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* --- Flippable Canvas Card Studio Engine --- */
.studio-flip-card {
    perspective: 1200px;
    width: 400px;
    height: 300px;
    position: relative;
}

.studio-flip-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.studio-flip-card.flipped .studio-flip-inner {
    transform: rotateY(180deg);
}

.studio-flip-front, .studio-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 300px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.studio-flip-back {
    transform: rotateY(180deg);
}

/* Visibility toggling for overlays depending on active side */
.studio-flip-card:not(.flipped) .studio-flip-front {
    z-index: 2;
    pointer-events: auto;
}
.studio-flip-card:not(.flipped) .studio-flip-back {
    z-index: 1;
    pointer-events: none;
}

.studio-flip-card.flipped .studio-flip-front {
    z-index: 1;
    pointer-events: none;
}
.studio-flip-card.flipped .studio-flip-back {
    z-index: 2;
    pointer-events: auto;
}

#drawing_canvas_front, #drawing_canvas_back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fdfbf7;
    z-index: 1;
}

#drawing_canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    background-color: #fdfbf7;
    z-index: 1;
}

/* Toolbar styling */
.canvas-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid var(--color-ink);
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--color-ink);
    /* Fills the wider middle column so all the text controls (incl. Bold/Italic)
       sit on one row instead of spilling past the edge. */
    max-width: 500px;
    width: 100%;
    margin: 6px 0 4px;
}

.tool-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* A small heading in front of each group so it's obvious what the controls do:
   Text · Image · Background. */
.tool-group-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-headings);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-ink-muted);
    white-space: nowrap;
}
.tool-group-label i { font-size: 10px; opacity: 0.7; }

/* Text controls own the first row; the selects grow to fill it so there's no
   dead space and no cramped wrapping. */
.tool-group-text {
    flex: 1 1 100%;
    justify-content: flex-start;
}
.tool-group-text .tool-select {
    flex: 1 1 auto;
    min-width: 58px;
}

/* Image + Background share the second row, pushed to opposite ends. */
.tool-group-image { flex: 1 1 auto; justify-content: flex-start; }
.tool-group-bg    { flex: 1 1 auto; justify-content: flex-end; }

.tool-btn {
    background: transparent;
    border: 1.5px solid var(--color-ink);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--color-ink);
    box-shadow: 1px 1px 0 var(--color-ink);
    flex-shrink: 0;
}

.tool-btn:hover {
    background-color: var(--color-highlighter-yellow);
    transform: translateY(-1px);
}

/* Bold / Italic are on/off toggles — the active state shows they're applied. */
.tool-btn.active,
.tool-toggle.active {
    background-color: var(--color-highlighter-yellow);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}
.tool-toggle[aria-pressed="true"] {
    background-color: var(--color-highlighter-yellow);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}

.tool-btn.btn-action {
    width: auto;
    padding: 0 10px;
    font-family: var(--font-headings);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.tool-select {
    font-family: var(--font-primary);
    font-size: 12px;
    height: 32px;
    padding: 4px 6px;
    border: 1.5px solid var(--color-ink);
    border-radius: 6px;
    outline: none;
    background: #ffffff;
}

/* On-canvas guidance shown while a side has no layers yet. Sits above the blank
   canvas but below the draggable layers (z-index 10), and ignores clicks so the
   toolbar buttons still drive everything. */
.canvas-empty-hint {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px;
    text-align: center;
    pointer-events: none;
    color: var(--color-ink-dimmed);
}
.canvas-empty-hint.hidden { display: none; }
.canvas-empty-hint > i {
    font-size: 26px;
    margin-bottom: 4px;
    color: var(--color-ink-dimmed);
    opacity: 0.6;
}
.canvas-empty-title {
    font-family: var(--font-headings);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-ink-muted);
}
.canvas-empty-sub {
    font-family: var(--font-handwritten);
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--color-ink-dimmed);
}
.canvas-empty-sub strong { color: var(--color-highlighter-purple); }

/* Server Doodles list Drawer */
.server-doodles-drawer {
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    border: 1.5px solid hsl(210, 10%, 82%);
    border-radius: 8px;
    padding: 10px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-label {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-ink);
    white-space: nowrap;
}

.doodles-list {
    flex-grow: 1;
    overflow-x: auto;
    display: flex;
    gap: 10px;
    padding-bottom: 2px;
}

.doodles-list::-webkit-scrollbar {
    height: 4px;
}
.doodles-list::-webkit-scrollbar-thumb {
    background: var(--color-ink-dimmed);
    border-radius: 2px;
}

.doodle-thumb-item {
    width: 120px;
    height: 120px;
    background: #ffffff;
    border: 1.5px solid var(--color-ink);
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 var(--color-ink-dimmed);
}

.doodle-thumb-item:hover {
    transform: scale(1.06) rotate(2deg);
    border-color: var(--color-ink);
    box-shadow: 3px 3px 0 var(--color-ink);
}

.doodle-thumb-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.doodles-loading, .doodles-empty {
    font-family: var(--font-handwritten);
    font-size: 14px;
    color: var(--color-ink-dimmed);
}

.canvas-hint {
    font-family: var(--font-handwritten);
    font-size: 15px;
    color: var(--color-ink-muted);
    text-align: center;
    margin-top: 12px;
}

/* Interactive Drag/Resize Layers */
.canvas-text-layer, .canvas-image-layer {
    position: absolute;
    z-index: 10;
    border: 1.5px dashed transparent;
    padding: 4px;
    transition: border-color 0.15s ease;
}

.canvas-text-layer:hover, .canvas-image-layer:hover {
    border-color: var(--color-ink);
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
}

.layer-drag-handle {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 14px;
    background: var(--color-ink);
    color: #ffffff;
    border-radius: 3px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.canvas-text-layer:hover .layer-drag-handle,
.canvas-image-layer:hover .layer-drag-handle {
    opacity: 0.85;
}

.layer-delete-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 18px;
    height: 18px;
    background: var(--color-danger);
    color: white;
    border: 1px solid var(--color-ink);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 9px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 12;
}

.canvas-text-layer:hover .layer-delete-btn,
.canvas-image-layer:hover .layer-delete-btn {
    opacity: 1;
}

/* Image layers carry a resize handle at the top-right corner (z-index 30), which
   was painting over the delete button and hiding it. Tuck the delete button just
   INSIDE the corner — clear of the handle and never clipped by the canvas edge —
   and lift it above every handle so it's fully visible and clickable. */
.canvas-image-layer .layer-delete-btn {
    top: 4px;
    right: 4px;
    z-index: 40;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.layer-text-content {
    outline: none;
    color: #1e293b;
    padding: 4px;
    word-break: break-word;
    min-width: 60px;
    line-height: 1.15;
}

.layer-text-content[contenteditable="true"]:focus {
    background: #ffffff;
    border: 1.5px solid var(--color-ink);
    border-radius: 4px;
    box-shadow: 0 0 0 3px var(--color-highlighter-yellow);
}

.layer-image-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.layer-resize-handle {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--color-ink);
    border: 1px solid #ffffff;
    border-radius: 50%;
    cursor: se-resize;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.canvas-image-layer:hover .layer-resize-handle {
    opacity: 1;
}

/* Stack Panel Styles */
.studio-stack-panel {
    display: flex;
    flex-direction: column;
    height: 520px;
}

.deck-cards-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    margin: 16px 0;
    padding-right: 4px;
}

.deck-cards-stack-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.empty-stack-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    min-height: 240px;
    text-align: center;
    color: var(--color-ink-muted);
}

.empty-stack-state i {
    font-size: 32px;
    color: var(--color-ink-dimmed);
}

.empty-stack-state span {
    font-family: var(--font-headings);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
}

.empty-stack-state .sub-empty {
    font-family: var(--font-handwritten);
    font-size: 13.5px;
}

.stack-thumbnail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid hsl(210, 10%, 82%);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 2px 2px 0 hsl(210, 10%, 82%);
    position: relative;
}

.thumb-preview {
    width: 60px;
    height: 45px;
    border-radius: 4px;
    border: 1px solid var(--color-ink);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.thumb-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-num {
    position: absolute;
    bottom: 2px;
    left: 2px;
    background: var(--color-ink);
    color: white;
    font-size: 9px;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 2px;
}

.thumb-details {
    flex-grow: 1;
    overflow: hidden;
}

.thumb-answer {
    font-family: var(--font-handwritten);
    font-size: 15px;
    color: var(--color-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.thumb-delete-btn {
    background: transparent;
    border: none;
    font-size: 14px;
    color: var(--color-ink-dimmed);
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 4px;
}

.thumb-delete-btn:hover {
    color: var(--color-danger);
    transform: scale(1.1);
}

/* --- Flashcard Player Styling --- */
.player-workspace {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 420px;
}

.active-player-card {
    width: 100%;
    max-width: 440px;
    height: 480px;
}

.player-index-card {
    padding: 44px 24px 20px 24px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-shadow: var(--card-stack-shadow);
}

.player-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed var(--color-card-lines);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.card-status-label {
    font-family: var(--font-headings);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.player-card-header i {
    font-size: 18px;
    color: var(--color-ink-dimmed);
}

.player-canvas-container {
    flex-grow: 1;
    border: 1.5px solid var(--color-ink);
    border-radius: 8px;
    overflow: hidden;
    background-color: #fdfbf7;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 250px;
}

.rendered-canvas-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.answer-display-box {
    flex-grow: 1;
    border: 2px dashed var(--color-ink-dimmed);
    border-radius: 8px;
    background: hsl(40, 30%, 96%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 16px 0;
}

.answer-label {
    font-family: var(--font-headings);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-highlighter-purple);
    margin-bottom: 6px;
}

.answer-text {
    font-size: 26px;
    color: var(--color-ink);
    line-height: 1.3;
}

.evaluation-actions {
    border-top: 1.5px dashed var(--color-card-lines);
    padding-top: 12px;
    text-align: center;
}

.evaluation-instructions {
    font-family: var(--font-handwritten);
    font-size: 16px;
    color: var(--color-ink-muted);
    display: block;
    margin-bottom: 6px;
}

.completion-report-card {
    padding: 44px 28px 24px 28px !important;
    box-shadow: var(--card-stack-shadow);
}

/* --- Studio Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .studio-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .studio-stack-panel {
        height: auto;
        min-height: 280px;
    }
}

@media (max-width: 768px) {
    /* Column count is left to the auto-fit track above; only the rhythm changes. */
    .dashboard-three-columns {
        gap: 20px;
    }
    .column-card {
        min-height: 380px;
    }
    .canvas-stage-outer {
        width: 100%;
        display: flex;
        justify-content: center;
        overflow-x: auto;
        padding: 6px;
    }
    .canvas-stage {
        flex-shrink: 0;
    }
}
/* --- External Server Doodle Library Browser Styles --- */
.doodle-folder-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-card-base);
    border: 1.5px solid var(--color-ink);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-headings);
    font-size: 13px;
    color: var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.doodle-folder-tab-item:hover {
    background-color: var(--color-highlighter-yellow);
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--color-ink);
}

.doodle-folder-tab-item i {
    color: var(--color-highlighter-pink);
    font-size: 14px;
}

.doodle-folder-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--color-ink-dimmed);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-headings);
    font-size: 13px;
    color: var(--color-ink);
    transition: var(--transition-fast);
    flex-shrink: 0;
    box-shadow: 2px 2px 0 hsl(210, 10%, 86%);
}

.doodle-folder-back-btn:hover {
    background-color: hsl(40, 20%, 94%);
    border-color: var(--color-ink);
    box-shadow: 3px 3px 0 var(--color-ink);
    transform: translateY(-1px);
}

/* --- Premium Custom Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: var(--color-card-base);
    background-image: repeating-linear-gradient(
        var(--color-card-lines) 0px,
        var(--color-card-lines) 1px,
        transparent 1px,
        transparent 28px
    );
    border: 2px solid var(--color-ink);
    border-radius: 16px;
    padding: 32px 24px 24px 24px;
    width: 90%;
    max-width: 460px;
    box-shadow: var(--card-stack-shadow);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-overlay.open .modal-content {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--color-ink-muted);
    transition: var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--color-danger);
    transform: scale(1.1);
}

.modal-doodle-preview {
    width: 100%;
    height: 120px;
    border: 1.5px dashed var(--color-ink-dimmed);
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    overflow: hidden;
}

.modal-doodle-preview img {
    max-height: 100px;
    max-width: 100%;
    object-fit: contain;
}

.modal-header-title {
    font-family: var(--font-headings);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Folder structure optimization inside Sidebar 2 */
.server-doodles-drawer-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

#server_doodles_list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}

#server_doodles_list::-webkit-scrollbar {
    width: 6px;
}
#server_doodles_list::-webkit-scrollbar-track {
    background: transparent;
}
#server_doodles_list::-webkit-scrollbar-thumb {
    background: var(--color-ink-dimmed);
    border-radius: 3px;
}

.doodle-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

/* --- Floating Wiggling Active Card Side Toggle (UX Polish) --- */
.canvas-stage-outer {
    position: relative;
}

.canvas-flip-badge-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 99; /* Float securely on top of draggable overlay elements */
    font-family: var(--font-headings);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1.5px solid var(--color-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 2px 2px 0 var(--color-ink);
    transition: var(--transition-smooth);
    animation: canvasWiggle 3s infinite alternate ease-in-out;
}

.canvas-flip-badge-btn:hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 3px 3px 0 var(--color-ink) !important;
}

.canvas-flip-badge-btn.side-front {
    background-color: var(--color-highlighter-purple);
    color: #ffffff;
}

.canvas-flip-badge-btn.side-back {
    background-color: var(--color-highlighter-teal);
    color: var(--color-ink);
}

@keyframes canvasWiggle {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg) scale(1.02); }
}

/* --- Premium Toast Notification Popup --- */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    transform: translateY(-100px);
    background-color: var(--color-card-base);
    border: 2px solid var(--color-ink);
    border-radius: 8px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 4px 4px 0 var(--color-ink);
    z-index: 1000;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.25), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    font-family: var(--font-headings);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
}

.toast-container.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    animation: toastWiggle 0.5s ease-in-out;
}

@keyframes toastWiggle {
    0% { transform: translateY(-30px) rotate(-1deg); }
    50% { transform: translateY(5px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.toast-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.toast-success {
    background-color: hsl(145, 80%, 96%);
    border-color: var(--color-success);
    color: hsl(145, 75%, 25%);
    box-shadow: 4px 4px 0 var(--color-success);
}
.toast-success .toast-icon {
    color: var(--color-success);
}

.toast-error {
    background-color: hsl(355, 90%, 96%);
    border-color: var(--color-danger);
    color: hsl(355, 85%, 45%);
    box-shadow: 4px 4px 0 var(--color-danger);
}
.toast-error .toast-icon {
    color: var(--color-danger);
}

.toast-info {
    background-color: hsl(200, 90%, 96%);
    border-color: var(--color-highlighter-teal);
    color: hsl(200, 85%, 25%);
    box-shadow: 4px 4px 0 var(--color-ink);
}
.toast-info .toast-icon {
    color: var(--color-highlighter-teal);
}

/* Miniature Card Stack Previews */
.thumb-preview-card {
    width: 100%;
    height: 100%;
    background: #fdfbf7;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.thumb-preview-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 100% 6px;
    pointer-events: none;
}
.thumb-preview-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    z-index: 1;
}
.thumb-preview-txt {
    font-size: 6px;
    line-height: 1.1;
    color: #1e293b;
    padding: 2px;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-align: center;
    word-break: break-all;
}
.thumb-preview-empty {
    font-size: 16px;
    color: var(--color-ink-muted);
}

/* Edit Mode Stack Highlighting */
.stack-thumbnail-item.editing {
    border-color: var(--color-highlighter-teal);
    background-color: hsl(170, 60%, 96%);
    box-shadow: 3px 3px 0 var(--color-highlighter-teal);
}
.stack-thumbnail-item.editing::after {
    content: "EDITING";
    position: absolute;
    right: 4px;
    background: var(--color-highlighter-teal);
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
    font-size: 8px;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 3px;
}

/* ================================================================
   Studio Creator — Mobile & Tablet Responsive Design
   ================================================================ */

/* Canvas zoom wrapper — always a centred flex column, zoom applied on narrow screens */
.canvas-zoom-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Mobile library toggle button — hidden by default on desktop */
.mobile-library-toggle-btn {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 4px;
    font-family: var(--font-headings);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-bottom: 2px dashed var(--color-ink-dimmed);
    cursor: pointer;
    transition: var(--transition-fast);
}
.mobile-library-toggle-btn:hover {
    background-color: var(--color-highlighter-yellow);
}
.mobile-library-toggle-btn .toggle-chevron {
    transition: transform 0.3s ease;
}
#id_doodles_sidebar.mobile-lib-open .mobile-library-toggle-btn .toggle-chevron {
    transform: rotate(180deg);
}

/* ---- ≤900px: switch from fixed 3-col fullscreen to scrollable single column ---- */
@media (max-width: 900px) {
    body.page-studio-fullscreen {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    body.page-studio-fullscreen .app-container {
        height: auto !important;
        min-height: 0 !important;
        /* The navbar is cleared by padding here, not the desktop margin — reset
           it or the two stack into a 150px gap. */
        margin-top: 0 !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        align-items: flex-start !important;
    }
    body.page-studio-fullscreen .dashboard-wrapper {
        height: auto !important;
        gap: 14px;
    }
    body.page-studio-fullscreen .studio-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        gap: 16px;
    }
    /* Column order: canvas centre → image library → deck stack */
    #id_center_studio   { order: 1; }
    #id_doodles_sidebar { order: 2; }
    #id_right_sidebar   { order: 3; }

    body.page-studio-fullscreen .studio-sidebar {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    body.page-studio-fullscreen .sidebar-scrollable-content {
        flex: none !important;
        overflow: visible !important;
    }
    body.page-studio-fullscreen .studio-main {
        height: auto !important;
        min-height: 0 !important;
        padding: 48px 12px 18px 12px !important;
        justify-content: flex-start !important;
    }

    /* Stack panel: auto height with a capped scroll area */
    .studio-stack-panel { height: auto !important; min-height: 0 !important; }
    .deck-cards-scroll-container { max-height: 300px !important; flex: none !important; }

    /* Studio header already stacks on desktop; on phones just tighten the
       subtitle and let the editing badge wrap under the title. */
    .studio-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .studio-header-titles .welcome-subtitle {
        font-size: 13px !important;
        max-width: 100% !important;
    }

    /* Toolbar — tighten padding so it fits in one row longer */
    .canvas-toolbar { padding: 6px 8px !important; }
    .tool-group { gap: 4px !important; padding-right: 8px !important; }

    /* Library: collapsed by default on mobile — toggle button reveals content */
    #id_doodles_sidebar .sidebar-scrollable-content { display: none; }
    #id_doodles_sidebar.mobile-lib-open .sidebar-scrollable-content { display: flex; }
    .mobile-library-toggle-btn { display: flex !important; }
}

/* ---- ≤480px: deck details stack vertically, tighten studio-main padding ---- */
@media (max-width: 480px) {
    body.page-studio-fullscreen .studio-main {
        padding: 48px 6px 14px 6px !important;
    }
    .deck-details-canvas-row {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .deck-details-canvas-row .form-group-custom {
        flex: 1 1 auto !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    .category-select-wrapper {
        height: auto !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* ---- ≤440px: zoom canvas area to fit phone viewport ---- */
@media (max-width: 440px) {
    .canvas-zoom-wrapper { zoom: 0.80; }
}

/* ---- ≤380px: tighter zoom for smallest phones ---- */
@media (max-width: 380px) {
    .canvas-zoom-wrapper { zoom: 0.72; }
}

/* ---- ≤340px: minimum zoom floor ---- */
@media (max-width: 340px) {
    .canvas-zoom-wrapper { zoom: 0.65; }
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS — hub of titled cards, each opening its own page
   ═══════════════════════════════════════════════════════════ */

.settings-hub-grid {
    display: grid;
    /* Tiles reflow on their own: 4 across on a wide desk, 2x2 on a tablet,
       stacked on a phone. min() keeps a tile from overflowing a <240px screen. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    grid-auto-rows: 1fr;          /* every tile in a row shares the tallest height */
    gap: 22px;
    margin-top: 22px;
}

.settings-hub-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 210px;
    padding: 30px 20px 18px;
    position: relative;
    text-decoration: none;
    color: var(--color-ink);   /* an <a> would otherwise inherit link blue */
    cursor: pointer;

    /* Boxed like the rest of the workbook UI, not a flat panel.
       background-color, not background, so .glass-card's ruled lines survive. */
    background-color: #fdfbf7;
    border: 2px solid var(--color-ink);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--color-ink);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.settings-hub-card:hover {
    transform: translate(-2px, -3px);
    box-shadow: 7px 8px 0 var(--color-ink);
}

.settings-hub-card:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--color-ink);
}

/* The shared .card-glow sits at top:36px; on a tile it belongs on the edge. */
.settings-hub-card .card-glow {
    top: 0;
    height: 6px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.settings-hub-icon {
    font-size: 26px;
    color: var(--color-ink);
    margin-bottom: 4px;
}

.settings-hub-title {
    font-family: var(--font-headings);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.2;
}

.settings-hub-desc {
    font-family: var(--font-handwritten);
    font-size: 14px;
    color: var(--color-ink-muted);
    line-height: 1.35;
    flex: 1;
}

.settings-hub-meta {
    font-family: var(--font-headings);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink);
    background: var(--color-highlighter-yellow);
    border: 1.5px solid var(--color-ink);
    border-radius: 999px;
    padding: 2px 9px;
    margin-top: 6px;
}

.settings-hub-go {
    font-family: var(--font-headings);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-highlighter-purple);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

@media (max-width: 560px) {
    /* Stacked tiles should hug their content instead of holding a tall box. */
    .settings-hub-card { min-height: 0; }
}

/* ── Sub-page shell ───────────────────────────────────────── */

.settings-subpage-head .welcome-heading { margin-top: 6px; }

.settings-panel { margin-top: 20px; }
.settings-panel-narrow { max-width: 560px; }

.settings-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 20px 20px;
    position: relative;
}

/* The shared .card-glow sits at top:36px because an index card's ruled red
   margin line belongs 36px below its edge — every card that uses it there
   pads its top by 44px to clear it. A panel has no ruled margin and only
   26px of top padding, so at 36px the bar cuts straight through the first
   label. On a panel the bar is an edge rule, like the navbar's. */
.settings-panel .card-glow {
    top: 0;
    height: 6px;
}

.settings-panel-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-panel-title {
    font-family: var(--font-headings);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-panel-sub {
    font-family: var(--font-handwritten);
    font-size: 13px;
    color: var(--color-ink-dimmed);
}

.settings-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-headings);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink-muted);
    margin-bottom: 6px;
}

.settings-subtitle {
    font-family: var(--font-headings);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-divider {
    border-top: 1.5px dashed hsl(210, 12%, 85%);
    margin: 6px 0;
}

/* ── Device table ─────────────────────────────────────────── */

.settings-table-scroll {
    overflow-x: auto;
    border: 1.5px solid var(--color-ink);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--color-ink);
    background: #ffffff;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
    font-size: 12.5px;
    white-space: nowrap;
}

.settings-table thead th {
    font-family: var(--font-headings);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink-muted);
    text-align: left;
    padding: 10px 12px;
    background: hsl(45, 30%, 96%);
    border-bottom: 1.5px solid var(--color-ink);
    position: sticky;
    top: 0;
}

.settings-table tbody td {
    padding: 10px 12px;
    color: var(--color-ink);
    border-bottom: 1px solid hsl(210, 12%, 90%);
}

.settings-table tbody tr:last-child td { border-bottom: none; }
.settings-table tbody tr:hover { background: hsl(45, 40%, 98%); }
.settings-table .muted { color: var(--color-ink-dimmed); }

.settings-status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    flex-shrink: 0;
}
.settings-status-dot.dot-online  { background: var(--color-success); box-shadow: 0 0 5px rgba(52, 211, 153, 0.5); }
.settings-status-dot.dot-offline { background: var(--color-danger);  box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }

/* Small status pills, shared with the device picker */
.pill {
    font-family: var(--font-headings);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--color-ink);
    white-space: nowrap;
}
.pill-good    { background: var(--color-success); color: #ffffff; }
.pill-bad     { background: var(--color-danger); color: #ffffff; }
.pill-warn    { background: var(--color-highlighter-yellow); color: var(--color-ink); }
.pill-neutral { background: hsl(210, 12%, 88%); color: var(--color-ink); }

/* ── Forms shared across panels ────────────────────────────── */

.settings-panel .form-group-custom { margin-bottom: 10px; }
.settings-panel .form-input {
    height: 36px;
    padding: 4px 10px;
    font-size: 13px;
    border: 1.5px solid var(--color-ink);
}

.settings-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.settings-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
}
.settings-inline-form .form-input { flex: 1; }
.settings-inline-form .btn { flex-shrink: 0; height: 36px; white-space: nowrap; }

.settings-device-choices { max-height: 220px; }

/* ── Department list ──────────────────────────────────────── */

.settings-dept-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-dept-item {
    border: 1.5px solid hsl(210, 10%, 82%);
    border-radius: 8px;
    box-shadow: 2px 2px 0 hsl(210, 10%, 82%);
    background: rgba(255, 255, 255, 0.7);
    padding: 10px 12px;
}

.settings-dept-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-dept-name {
    font-family: var(--font-headings);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-ink);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-dept-count {
    font-family: var(--font-handwritten);
    font-size: 12px;
    color: var(--color-ink-dimmed);
    white-space: nowrap;
}

.settings-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 5px;
    font-size: 13px;
    color: var(--color-highlighter-purple);
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
}
.settings-icon-btn:hover { opacity: 1; transform: translateY(-1px); }
.settings-icon-btn.danger { color: var(--color-danger); }

.settings-dept-devices {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1.5px dashed hsl(210, 12%, 85%);
}
.settings-dept-devices .picker-list { max-height: 190px; }

/* ── Empty states ─────────────────────────────────────────── */

.settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 32px 16px;
    color: var(--color-ink-muted);
    font-family: var(--font-handwritten);
    font-size: 13px;
}
.settings-empty i { font-size: 30px; color: var(--color-ink-dimmed); }
.settings-empty-title {
    font-family: var(--font-headings);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-ink);
}

@media (max-width: 700px) {
    .settings-field-row { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   MOVE TO DEVICE PICKER — two-step device / card chooser
   ═══════════════════════════════════════════════════════════ */

.picker-shell {
    width: 90%;
    max-width: 500px;
    padding: 28px 24px 22px;
    border: 2px solid var(--color-ink);
    box-shadow: 4px 4px 0 var(--color-ink);
    background: #fdfbf7;
    position: relative;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.picker-steps {
    display: flex;
    align-items: center;
    gap: 8px;
}

.picker-step-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-headings);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink-dimmed);
    transition: color 0.15s ease;
}
.picker-step-chip.active { color: var(--color-ink); }

.picker-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.picker-step-chip.active .picker-step-num {
    background: var(--color-highlighter-yellow);
    color: var(--color-ink);
    border-color: var(--color-ink);
}
.picker-step-arrow { font-size: 9px; color: var(--color-ink-dimmed); }

.picker-lead {
    font-family: var(--font-handwritten);
    font-size: 15px;
    color: var(--color-ink-muted);
    margin: 0;
}
.picker-lead strong { color: var(--color-ink); }

.picker-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.picker-filter-label {
    font-family: var(--font-headings);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink-muted);
    white-space: nowrap;
}

.picker-filter-select {
    height: 32px;
    padding: 2px 8px;
    font-size: 12px;
    border: 1.5px solid var(--color-ink);
    flex: 1;
    min-width: 120px;
}

.picker-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-headings);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-ink);
    cursor: pointer;
    white-space: nowrap;
}

.picker-summary {
    font-family: var(--font-handwritten);
    font-size: 13px;
    color: var(--color-ink-muted);
    flex: 1;
    text-align: center;
}

.picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 14px;
}

.device-picker-item,
.card-choice-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid hsl(210, 10%, 82%);
    border-radius: 8px;
    box-shadow: 2px 2px 0 hsl(210, 10%, 82%);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.device-picker-item:has(input:checked),
.card-choice-item:has(input:checked) {
    border-color: var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    background: #ffffff;
}

.card-choice-item.card-choice-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.device-picker-item input[type="checkbox"],
.card-choice-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-ink);
    cursor: pointer;
}

.picker-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.picker-dot.dot-online  { background: var(--color-success); box-shadow: 0 0 5px rgba(52, 211, 153, 0.5); }
.picker-dot.dot-offline { background: var(--color-danger);  box-shadow: 0 0 5px rgba(239, 68, 68, 0.4); }

.picker-item-info {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.picker-item-name {
    font-family: var(--font-headings);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-item-sub {
    font-family: var(--font-handwritten);
    font-size: 11.5px;
    color: var(--color-ink-dimmed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-item-url {
    font-family: var(--font-primary);
    font-size: 10.5px;
    direction: rtl;      /* keep the card folder visible when the URL overflows */
    text-align: left;
}

.picker-item-deck {
    font-family: var(--font-handwritten);
    font-size: 11px;
    color: var(--color-ink-dimmed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-choice-num {
    font-family: var(--font-headings);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-ink);
    background: var(--color-highlighter-teal);
    border: 1px solid var(--color-ink);
    border-radius: 4px;
    padding: 1px 7px;
    flex-shrink: 0;
}

.picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 32px 16px;
    color: var(--color-ink-muted);
    font-family: var(--font-handwritten);
    font-size: 13px;
}
.picker-empty i { font-size: 24px; color: var(--color-ink-dimmed); }


/* ═══════════════════════════════════════════════════════════
   CROSS-CUTTING RESPONSIVE LAYER

   Page-specific breakpoints live with their components above.
   What follows applies everywhere and is deliberately last, so it
   settles ties with the earlier rules it is meant to correct.
   ═══════════════════════════════════════════════════════════ */

html {
    /* Safari on iOS inflates text in landscape without this. */
    -webkit-text-size-adjust: 100%;
}

/* Nothing may push the page sideways; the desk background is full-bleed
   and a single overflowing child would expose it as a scrollbar. */
img,
svg,
canvas,
video {
    max-width: 100%;
}

/* A grid/flex child refuses to shrink below its content unless told to.
   Long deck titles and device names are the usual culprits. */
.deck-item-info,
.picker-item-info,
.settings-hub-card {
    min-width: 0;
}

/* ── Touch input ──────────────────────────────────────────────
   A mouse pointer lands within a pixel; a thumb lands within ~9mm.
   On touch devices every control grows to the 44px Apple/WCAG target. */
@media (pointer: coarse) {
    .row-icon-btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
        opacity: 1;   /* no hover state exists to reveal it */
    }

    .burger-menu-btn,
    .drawer-close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* iOS zooms the whole page when a focused field is under 16px.
       This lands after the small-screen rules above, which set 14px. */
    .form-input,
    select.form-input,
    textarea.form-input {
        font-size: 16px;
    }

    /* Hover lifts read as stuck states on touch — the transform never resets. */
    .interactive-card:hover,
    .settings-hub-card:hover,
    .nav-link-item:hover {
        transform: none;
    }
}

/* Momentum scrolling for the panes that scroll inside the page. */
.settings-table-scroll,
.decks-scroll-container,
.picker-list,
.deck-cards-scroll-container {
    -webkit-overflow-scrolling: touch;
}

/* ── Tablet ───────────────────────────────────────────────────
   Column counts already reflow on their own (auto-fit); this only
   reclaims the horizontal padding a narrower viewport can't spare. */
@media (max-width: 900px) {
    .dashboard-wrapper {
        gap: 22px;
    }
    .settings-hub-grid {
        gap: 16px;
    }
}

/* ── Phone ────────────────────────────────────────────────────
   The navbar is a three-slot bar. Below 768px the links and greeting
   are already hidden, leaving a burger and an absolutely-centred brand
   that can collide with it on the narrowest handsets. */
@media (max-width: 480px) {
    .nav-center .nav-brand-logo {
        font-size: 18px;
        gap: 6px;
    }
    .global-navbar,
    .global-footer {
        padding: 0 12px;
    }
    .settings-panel {
        padding: 22px 14px 16px;
    }
    .settings-hub-card {
        padding: 26px 16px 16px;
    }
    .column-card {
        padding: 40px 14px 16px 14px;
    }
}

@media (max-width: 380px) {
    .nav-center .nav-brand-logo {
        font-size: 16px;
    }
    /* Brand and burger are the only two things left; give the brand the room. */
    .nav-center .nav-brand-logo i {
        display: none;
    }
    /* Copyright and clock no longer fit side by side. The clock is decoration;
       the copyright is not. */
    .global-footer .footer-right {
        display: none;
    }
    .global-footer .footer-center {
        margin: 0 auto;
    }
}

/* ── Motion ───────────────────────────────────────────────────
   The desk doodles drift and the cards scale in. Both are decoration. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* A visible focus ring is the only way a keyboard user can navigate.
   :focus-visible keeps it off mouse clicks. */
:focus-visible {
    outline: 3px solid var(--color-highlighter-purple);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   THEME CUSTOMIZER — floating button + slide-in personalise panel
   ───────────────────────────────────────────────────────────
   Lets the signed-in user recolour the header and the page
   backdrop the app-container sits on, restyle the heading text,
   and drop in a background image. Choices are stored in
   localStorage and re-applied on every page load (see base.html),
   so the look follows the user around the whole site.
   ═══════════════════════════════════════════════════════════ */

/* Floating cluster — bottom-right, above the footer. Holds the Customize
   button and (on the dashboard) the Arrange Cards + Reset buttons, side by side. */
.fab-stack {
    position: fixed;
    right: calc(16px + 1vw);
    bottom: calc(56px + 1vh);            /* clears the global footer */
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Floating trigger button. */
.theme-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border: 2px solid var(--color-ink);
    border-radius: 999px;
    background: var(--color-highlighter-purple);
    color: #fff;
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--color-ink);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.theme-fab:hover {
    transform: translateY(-2px);
    box-shadow: 4px 5px 0 var(--color-ink);
}
.theme-fab:active {
    transform: translateY(1px);
    box-shadow: 2px 2px 0 var(--color-ink);
}
.theme-fab i {
    font-size: 15px;
}
.theme-fab .theme-fab-label {
    white-space: nowrap;
}
/* Arrange-cards trigger — teal so it reads as a distinct action from the
   purple Customize button it sits beside; turns solid when arranging is on. */
.theme-fab.arrange-fab {
    background: var(--color-highlighter-teal);
    color: var(--color-ink);
}
.theme-fab.arrange-fab.is-active {
    background: var(--color-highlighter-purple);
    color: #fff;
}

@media (max-width: 600px) {
    /* Collapse to round icon buttons on phones so they never block content. */
    .theme-fab { padding: 12px; }
    .theme-fab .theme-fab-label { display: none; }
}

/* Dim overlay behind the panel. */
.theme-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 38, 0.45);
    backdrop-filter: blur(3px);
    z-index: 1600;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.theme-panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Slide-in panel from the right. */
.theme-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 340px;
    max-width: 88vw;
    background: #fdfbf7;
    border-left: 3px solid var(--color-ink);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
    z-index: 1700;
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.theme-panel.open {
    transform: translateX(0);
}

.theme-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 2px dashed var(--color-ink-dimmed);
    position: sticky;
    top: 0;
    background: #fdfbf7;
    z-index: 2;
}
.theme-panel-title {
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.theme-panel-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-ink-muted);
    padding: 0 4px;
}
.theme-panel-close:hover { color: var(--color-ink); }

.theme-panel-body {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.theme-section-label {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-ink-muted);
    margin-bottom: 10px;
    display: block;
}

/* Preset palette swatches. */
.theme-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.theme-preset {
    border: 1.5px solid var(--color-ink);
    border-radius: 10px;
    padding: 8px 6px 6px;
    background: #fff;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--color-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.theme-preset:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px 0 var(--color-ink);
}
.theme-preset-swatch {
    width: 100%;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.15);
}
.theme-preset-name {
    font-family: var(--font-headings);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink);
}

/* Colour picker rows. */
.theme-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-ink-dimmed);
}
.theme-color-row:last-child { border-bottom: none; }
.theme-color-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.theme-color-row-name {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-ink);
}
.theme-color-row-hint {
    font-family: var(--font-handwritten);
    font-size: 13px;
    color: var(--color-ink-muted);
}
.theme-color-input {
    width: 44px;
    height: 34px;
    padding: 0;
    border: 1.5px solid var(--color-ink);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.theme-color-input::-webkit-color-swatch-wrapper { padding: 3px; }
.theme-color-input::-webkit-color-swatch { border: none; border-radius: 5px; }

/* Background-image uploader. */
.theme-upload-box {
    border: 2px dashed var(--color-ink-dimmed);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    background: #fff;
}
.theme-upload-preview {
    width: 100%;
    height: 90px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1.5px solid var(--color-ink);
    margin-bottom: 12px;
    display: none;
}
.theme-upload-preview.show { display: block; }
.theme-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-ink);
    background: var(--color-highlighter-yellow);
    border: 1.5px solid var(--color-ink);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--color-ink);
    padding: 8px 14px;
    cursor: pointer;
}
.theme-upload-btn:hover { transform: translateY(-1px); }
.theme-upload-hint {
    display: block;
    margin-top: 8px;
    font-family: var(--font-handwritten);
    font-size: 12px;
    color: var(--color-ink-muted);
}
.theme-remove-image {
    background: none;
    border: none;
    color: var(--color-danger);
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    margin-top: 10px;
    display: none;
}
.theme-remove-image.show { display: inline-block; }

/* Reposition controls — only shown once an image is uploaded, since they let
   the user slide which part of a "cover"-cropped image is visible. */
.theme-img-position {
    display: none;
    margin-top: 12px;
    text-align: left;
}
.theme-img-position.show { display: block; }
.theme-position-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.theme-position-row label {
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 11px;
    color: var(--color-ink-muted);
    width: 74px;
    flex-shrink: 0;
}
.theme-position-row input[type="range"] {
    flex: 1;
    accent-color: var(--color-highlighter-purple);
    cursor: pointer;
}

/* Footer actions. */
.theme-panel-actions {
    display: flex;
    gap: 10px;
    padding-top: 6px;
}
.theme-btn {
    flex: 1;
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 13px;
    padding: 10px;
    border-radius: 8px;
    border: 1.5px solid var(--color-ink);
    box-shadow: 2px 2px 0 var(--color-ink);
    cursor: pointer;
}
.theme-btn-reset {
    background: #fff;
    color: var(--color-ink);
}
.theme-btn-save {
    background: var(--color-success);
    color: #fff;
}
.theme-btn:hover { transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD CARD ARRANGER — free-drag the three desk columns
   ───────────────────────────────────────────────────────────
   Positions are stored per-user as translate offsets from each
   card's natural grid slot, so the layout still flows and only
   the visual offset is personalised.
   ═══════════════════════════════════════════════════════════ */
/* Reset-layout pill — only shown while arranging, sits left of the Arrange
   button in the floating stack. */
.arrange-reset-btn {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 12px;
    padding: 9px 13px;
    border-radius: 999px;
    border: 2px solid var(--color-ink);
    box-shadow: 3px 3px 0 var(--color-ink);
    background: #fff;
    color: var(--color-danger);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.arrange-reset-btn.show { display: inline-flex; }
.arrange-reset-btn:hover { transform: translateY(-2px); }

/* Hide the Customize button while arranging so it can't overlap or distract
   from the layout controls. */
body.arrange-active #id_theme_fab { display: none; }

/* Pinned "Done" bar — the unmissable exit from edit-layout mode. Top-centre,
   above the cards, shown only while arranging. */
.arrange-banner {
    position: fixed;
    top: 76px;                    /* clears the fixed navbar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1450;
    display: none;
    align-items: center;
    gap: 14px;
    max-width: 92vw;
    padding: 10px 10px 10px 18px;
    background: var(--color-highlighter-purple);
    color: #fff;
    border: 2px solid var(--color-ink);
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--color-ink);
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 13px;
}
body.arrange-active .arrange-banner { display: inline-flex; }
.arrange-done-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--color-ink);
    border: 1.5px solid var(--color-ink);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.arrange-done-btn:hover { transform: translateY(-1px); }
@media (max-width: 600px) {
    .arrange-banner { font-size: 12px; gap: 10px; top: 72px; }
}

/* While arranging: show each card as a movable handle. */
body.arrange-active .desk-column {
    cursor: grab;
    outline: 2px dashed var(--color-highlighter-purple);
    outline-offset: 6px;
    border-radius: 14px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;          /* let pointer-drag work on touch without scrolling */
    transition: none;            /* immediate follow while dragging */
    z-index: 20;
}
body.arrange-active .desk-column.dragging {
    cursor: grabbing;
    z-index: 30;
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}