@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ===================================================================================
   CHUNK 1: ROOT & THEMES
   Defines all CSS variables, including the color palettes for all themes.
   =================================================================================== */
:root {
    --bg-color: #101010;
    --text-color: #e0e0e0;
    --card-bg: rgba(26, 26, 26, 0.75);
    --card-text-color: #f0f0f0;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Modern Dark Theme variables for modals */
    --modal-bg: #252525;
    --modal-text: #e0e0e0;
    --modal-card-bg: #2c2c2c;
    --modal-border-color: #444;
    --modal-input-bg: #1e1e1e;
    --modal-input-border: #555;
    --modal-secondary-text: #aaa;
    --notification-bg: #4caf50;
}

/* --- Theme Colors --- */
body.theme-classic {
    --stage-color-create: #3C89BF; --stage-color-create-rgb: 60, 137, 191; --stage-color-create-dark: #306D99;
    --stage-color-define: #025A99; --stage-color-define-rgb: 2, 90, 153; --stage-color-define-dark: #02487A;
    --stage-color-task: #014D7F; --stage-color-task-rgb: 1, 77, 127; --stage-color-task-dark: #013D66;
    --stage-color-execute: #083D63; --stage-color-execute-rgb: 8, 61, 99; --stage-color-execute-dark: #06314F;
    --stage-color-deliver: #113750; --stage-color-deliver-rgb: 17, 55, 80; --stage-color-deliver-dark: #0E2C40;
}
body.theme-pop {
    --stage-color-create: #0099e6; --stage-color-create-rgb: 0, 153, 230; --stage-color-create-dark: #006ba2;
    --stage-color-define: #00b87a; --stage-color-define-rgb: 0, 184, 122; --stage-color-define-dark: #008055;
    --stage-color-task: #e6b000; --stage-color-task-rgb: 230, 176, 0; --stage-color-task-dark: #a27b00;
    --stage-color-execute: #cf00cf; --stage-color-execute-rgb: 207, 0, 207; --stage-color-execute-dark: #910091;
    --stage-color-deliver: #8a2ee6; --stage-color-deliver-rgb: 138, 46, 230; --stage-color-deliver-dark: #60219f;
}
body.theme-midnight {
    --stage-color-create: #708FB0; --stage-color-create-rgb: 112, 143, 176; --stage-color-create-dark: #5A728D;
    --stage-color-define: #5D7C9E; --stage-color-define-rgb: 93, 124, 158; --stage-color-define-dark: #4A637E;
    --stage-color-task: #556F9F; --stage-color-task-rgb: 85, 111, 159; --stage-color-task-dark: #44597F;
    --stage-color-execute: #566092; --stage-color-execute-rgb: 86, 96, 146; --stage-color-execute-dark: #454D75;
    --stage-color-deliver: #3F4968; --stage-color-deliver-rgb: 63, 73, 104; --stage-color-deliver-dark: #323A53;
}
body.theme-neon {
    --stage-color-create: #B4A7A7; --stage-color-create-rgb: 180, 167, 167; --stage-color-create-dark: #908686;
    --stage-color-define: #40434E; --stage-color-define-rgb: 64, 67, 78; --stage-color-define-dark: #33363E;
    --stage-color-task: #702632; --stage-color-task-rgb: 112, 38, 50; --stage-color-task-dark: #591E28;
    --stage-color-execute: #912F40; --stage-color-execute-rgb: 145, 47, 64; --stage-color-execute-dark: #742633;
    --stage-color-deliver: #080705; --stage-color-deliver-rgb: 8, 7, 5; --stage-color-deliver-dark: #060504;
}
body.theme-luvi {
    --stage-color-create: #6E8898; --stage-color-create-rgb: 110, 136, 152; --stage-color-create-dark: #586c79;
    --stage-color-define: #2E5266; --stage-color-define-rgb: 46, 82, 102; --stage-color-define-dark: #244151;
    --stage-color-task: #9FB1BC; --stage-color-task-rgb: 159, 177, 188; --stage-color-task-dark: #7f8d96;
    --stage-color-execute: #A9A395; --stage-color-execute-rgb: 169, 163, 149; --stage-color-execute-dark: #8f8a80;
    --stage-color-deliver: #E2C044; --stage-color-deliver-rgb: 226, 192, 68; --stage-color-deliver-dark: #c6a83b;
}
body.theme-cosmic {
    --stage-color-create: #217DA4; --stage-color-create-rgb: 33, 125, 164; --stage-color-create-dark: #1a6382;
    --stage-color-define: #437088; --stage-color-define-rgb: 67, 112, 136; --stage-color-define-dark: #35596c;
    --stage-color-task: #C84E87; --stage-color-task-rgb: 200, 78, 135; --stage-color-task-dark: #a03e6b;
    --stage-color-execute: #7029B7; --stage-color-execute-rgb: 112, 41, 183; --stage-color-execute-dark: #592192;
    --stage-color-deliver: #494368; --stage-color-deliver-rgb: 73, 67, 104; --stage-color-deliver-dark: #3a3553;
}
body.theme-polo {
    --stage-color-create: #8E3FB0; --stage-color-create-rgb: 142, 63, 176; --stage-color-create-dark: #71328D;
    --stage-color-define: #7C3E94; --stage-color-define-rgb: 124, 62, 148; --stage-color-define-dark: #633176;
    --stage-color-task: #8A3292; --stage-color-task-rgb: 138, 50, 146; --stage-color-task-dark: #6E2875;
    --stage-color-execute: #77208D; --stage-color-execute-rgb: 119, 32, 141; --stage-color-execute-dark: #5F1A71;
    --stage-color-deliver: #610C7A; --stage-color-deliver-rgb: 97, 12, 122; --stage-color-deliver-dark: #4D0962;
}
body.theme-earthen {
    --stage-color-create: #BC899A; --stage-color-create-rgb: 188, 137, 154; --stage-color-create-dark: #966D7B;
    --stage-color-define: #B46E84; --stage-color-define-rgb: 180, 110, 132; --stage-color-define-dark: #90586A;
    --stage-color-task: #935D76; --stage-color-task-rgb: 147, 93, 118; --stage-color-task-dark: #764A5E;
    --stage-color-execute: #A16163; --stage-color-execute-rgb: 161, 97, 99; --stage-color-execute-dark: #814E4F;
    --stage-color-deliver: #754343; --stage-color-deliver-rgb: 117, 67, 67; --stage-color-deliver-dark: #5E3636;
}
body.theme-antarctica {
    --stage-color-create: #FFB74D; --stage-color-create-rgb: 255, 183, 77; --stage-color-create-dark: #CC9240;
    --stage-color-define: #FF9800; --stage-color-define-rgb: 255, 152, 0; --stage-color-define-dark: #CC7A00;
    --stage-color-task: #F57C00; --stage-color-task-rgb: 245, 124, 0; --stage-color-task-dark: #C46300;
    --stage-color-execute: #E65100; --stage-color-execute-rgb: 230, 81, 0; --stage-color-execute-dark: #B84100;
    --stage-color-deliver: #BF360C; --stage-color-deliver-rgb: 191, 54, 12; --stage-color-deliver-dark: #992B0A;
}
body.theme-ashes {
    --stage-color-create: #494E4E; --stage-color-create-rgb: 73, 78, 78; --stage-color-create-dark: #3A3E3E;
    --stage-color-define: #2C2C2C; --stage-color-define-rgb: 44, 44, 44; --stage-color-define-dark: #232323;
    --stage-color-task: #474747; --stage-color-task-rgb: 71, 71, 71; --stage-color-task-dark: #393939;
    --stage-color-execute: #333335; --stage-color-execute-rgb: 51, 51, 53; --stage-color-execute-dark: #29292A;
    --stage-color-deliver: #222222; --stage-color-deliver-rgb: 34, 34, 34; --stage-color-deliver-dark: #1B1B1B;
}
body.theme-plancton {
    --stage-color-create: #87D568; --stage-color-create-rgb: 135, 213, 104; --stage-color-create-dark: #6CAA53;
    --stage-color-define: #5CA437; --stage-color-define-rgb: 92, 164, 55; --stage-color-define-dark: #4A832C;
    --stage-color-task: #2F923A; --stage-color-task-rgb: 47, 146, 58; --stage-color-task-dark: #26752E;
    --stage-color-execute: #246B72; --stage-color-execute-rgb: 36, 107, 114; --stage-color-execute-dark: #1D565B;
    --stage-color-deliver: #064457; --stage-color-deliver-rgb: 6, 68, 87; --stage-color-deliver-dark: #053646;
}
body.theme-coral {
    --stage-color-create: #DFBBB1; --stage-color-create-rgb: 223, 187, 177; --stage-color-create-dark: #b2958d;
    --stage-color-define: #F56476; --stage-color-define-rgb: 245, 100, 118; --stage-color-define-dark: #c4505e;
    --stage-color-task: #E43F6F; --stage-color-task-rgb: 228, 63, 111; --stage-color-task-dark: #b63259;
    --stage-color-execute: #BE3E82; --stage-color-execute-rgb: 190, 62, 130; --stage-color-execute-dark: #983168;
    --stage-color-deliver: #5E4352; --stage-color-deliver-rgb: 94, 67, 82; --stage-color-deliver-dark: #4b3541;
}

/* ===== ASTRO THEMES — Colors ===== */
body.theme-neptune {
    --stage-color-create: #7EC8E3; --stage-color-create-rgb: 126, 200, 227; --stage-color-create-dark: #5FA0B8;
    --stage-color-define: #3A8FBF; --stage-color-define-rgb: 58, 143, 191; --stage-color-define-dark: #2E7299;
    --stage-color-task: #1565A0; --stage-color-task-rgb: 21, 101, 160; --stage-color-task-dark: #105180;
    --stage-color-execute: #0D4775; --stage-color-execute-rgb: 13, 71, 117; --stage-color-execute-dark: #0A385E;
    --stage-color-deliver: #082F4F; --stage-color-deliver-rgb: 8, 47, 79; --stage-color-deliver-dark: #06253F;
}
body.theme-krypton {
    --stage-color-create: #C0C0C0; --stage-color-create-rgb: 192, 192, 192; --stage-color-create-dark: #999;
    --stage-color-define: #C0C0C0; --stage-color-define-rgb: 192, 192, 192; --stage-color-define-dark: #999;
    --stage-color-task: #c0fe03; --stage-color-task-rgb: 192, 254, 3; --stage-color-task-dark: #9ACB02;
    --stage-color-execute: #A0A0A0; --stage-color-execute-rgb: 160, 160, 160; --stage-color-execute-dark: #808080;
    --stage-color-deliver: #787878; --stage-color-deliver-rgb: 120, 120, 120; --stage-color-deliver-dark: #606060;
}
body.theme-hubble {
    --stage-color-create: #C0C0C0; --stage-color-create-rgb: 192, 192, 192; --stage-color-create-dark: #999;
    --stage-color-define: #C0C0C0; --stage-color-define-rgb: 192, 192, 192; --stage-color-define-dark: #999;
    --stage-color-task: #FF6D2E; --stage-color-task-rgb: 255, 109, 46; --stage-color-task-dark: #CC5725;
    --stage-color-execute: #A0A0A0; --stage-color-execute-rgb: 160, 160, 160; --stage-color-execute-dark: #808080;
    --stage-color-deliver: #787878; --stage-color-deliver-rgb: 120, 120, 120; --stage-color-deliver-dark: #606060;
}
body.theme-tycho {
    --stage-color-create: #FF8A65; --stage-color-create-rgb: 255, 138, 101; --stage-color-create-dark: #CC6E51;
    --stage-color-define: #F4511E; --stage-color-define-rgb: 244, 81, 30; --stage-color-define-dark: #C34118;
    --stage-color-task: #D84315; --stage-color-task-rgb: 216, 67, 21; --stage-color-task-dark: #AD3611;
    --stage-color-execute: #BF360C; --stage-color-execute-rgb: 191, 54, 12; --stage-color-execute-dark: #992B0A;
    --stage-color-deliver: #6D2003; --stage-color-deliver-rgb: 109, 32, 3; --stage-color-deliver-dark: #571A02;
}

/* ============================================================
   ASTRO THEMES — SOLAR GLOW + COLUMN FRAMES + PARTICLES
   Dark environment with radiant glow from bottom-right,
   per-column neon frames, and drifting particle field.
   ============================================================ */

/* --- SHARED ASTRO: Solar glow board --- */
body.theme-neptune .board-container,
body.theme-krypton .board-container,
body.theme-hubble .board-container,
body.theme-tycho .board-container {
    position: relative;
    clip-path: inset(0);
    background:
        radial-gradient(ellipse at 95% 95%, rgba(var(--stage-color-create-rgb), 0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 85%, rgba(var(--stage-color-define-rgb), 0.1) 0%, transparent 40%),
        #060810;
    border-radius: 12px;
}

/* --- PARTICLE FIELD (shared across all 4) --- */
body.theme-neptune .board-container::before,
body.theme-krypton .board-container::before,
body.theme-hubble .board-container::before,
body.theme-tycho .board-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 20%, rgba(var(--stage-color-create-rgb), 0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 65%, rgba(var(--stage-color-define-rgb), 0.6) 0%, transparent 100%),
        radial-gradient(2px 2px at 45% 15%, rgba(var(--stage-color-task-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 80%, rgba(var(--stage-color-execute-rgb), 0.6) 0%, transparent 100%),
        radial-gradient(2px 2px at 80% 35%, rgba(var(--stage-color-deliver-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 15% 85%, rgba(var(--stage-color-create-rgb), 0.8) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 55%, rgba(var(--stage-color-task-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 90% 10%, rgba(var(--stage-color-define-rgb), 0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 45%, rgba(var(--stage-color-execute-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 55% 90%, rgba(var(--stage-color-deliver-rgb), 0.65) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 5% 50%, rgba(var(--stage-color-create-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 92% 70%, rgba(var(--stage-color-task-rgb), 0.6) 0%, transparent 100%);
    background-size: 300px 300px;
    animation: astroParticleDrift 20s linear infinite;
}
body.theme-neptune .board-container::after,
body.theme-krypton .board-container::after,
body.theme-hubble .board-container::after,
body.theme-tycho .board-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 72%, rgba(var(--stage-color-define-rgb), 0.65) 0%, transparent 100%),
        radial-gradient(2px 2px at 42% 30%, rgba(var(--stage-color-create-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 68% 12%, rgba(var(--stage-color-execute-rgb), 0.6) 0%, transparent 100%),
        radial-gradient(2px 2px at 85% 58%, rgba(var(--stage-color-deliver-rgb), 0.55) 0%, transparent 100%),
        radial-gradient(2px 2px at 30% 92%, rgba(var(--stage-color-task-rgb), 0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 75% 42%, rgba(var(--stage-color-create-rgb), 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 50% 68%, rgba(var(--stage-color-define-rgb), 0.55) 0%, transparent 100%),
        radial-gradient(2px 2px at 8% 38%, rgba(var(--stage-color-execute-rgb), 0.65) 0%, transparent 100%);
    background-size: 400px 400px;
    animation: astroParticleDrift2 28s linear infinite;
    opacity: 0.8;
}

@keyframes astroParticleDrift {
    0% { transform: translate(0, 0); opacity: 0.7; }
    25% { opacity: 1; }
    50% { transform: translate(-40px, -25px); opacity: 0.6; }
    75% { opacity: 1; }
    100% { transform: translate(0, 0); opacity: 0.7; }
}
@keyframes astroParticleDrift2 {
    0% { transform: translate(0, 0); opacity: 0.5; }
    33% { opacity: 0.9; }
    66% { transform: translate(30px, -35px); opacity: 0.4; }
    100% { transform: translate(0, 0); opacity: 0.5; }
}

/* --- SHOOTING STARS + SATELLITE ---
   ALL gradients: (90deg, transparent→bright). rotate() aims bright end forward.
   Stars fade out mid-board. Downward stars cap Y to avoid extending page. */

body.theme-neptune .board-container .column-body,
body.theme-krypton .board-container .column-body,
body.theme-hubble .board-container .column-body,
body.theme-tycho .board-container .column-body {
    position: relative;
}

/* Star 1: 5° shallow right — fast */
body.theme-neptune .board-container > :first-child::before,
body.theme-krypton .board-container > :first-child::before,
body.theme-hubble .board-container > :first-child::before,
body.theme-tycho .board-container > :first-child::before {
    content: ''; position: absolute; top: 8%; left: 0;
    width: 55px; height: 1.5px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-create-rgb), 0.9));
    box-shadow: 0 0 6px rgba(var(--stage-color-create-rgb), 0.5);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS1 30s linear infinite; animation-delay: 3s;
}
/* Star 2: 175° left, gentle down — medium */
body.theme-neptune .board-container > :nth-child(3)::after,
body.theme-krypton .board-container > :nth-child(3)::after,
body.theme-hubble .board-container > :nth-child(3)::after,
body.theme-tycho .board-container > :nth-child(3)::after {
    content: ''; position: absolute; top: 22%; right: 0;
    width: 40px; height: 1px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-define-rgb), 0.8));
    box-shadow: 0 0 4px rgba(var(--stage-color-define-rgb), 0.4);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS2 50s linear infinite; animation-delay: 18s;
}
/* Star 3: -27° steep up-right — medium */
body.theme-neptune .board-container > :first-child::after,
body.theme-krypton .board-container > :first-child::after,
body.theme-hubble .board-container > :first-child::after,
body.theme-tycho .board-container > :first-child::after {
    content: ''; position: absolute; bottom: 15%; left: 0;
    width: 35px; height: 1px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-task-rgb), 0.8));
    box-shadow: 0 0 4px rgba(var(--stage-color-task-rgb), 0.35);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS3 45s linear infinite; animation-delay: 40s;
}
/* Star 4: -1° flat right — very fast */
body.theme-neptune .board-container > :nth-child(4)::before,
body.theme-krypton .board-container > :nth-child(4)::before,
body.theme-hubble .board-container > :nth-child(4)::before,
body.theme-tycho .board-container > :nth-child(4)::before {
    content: ''; position: absolute; bottom: 12%; left: 0;
    width: 25px; height: 1px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-execute-rgb), 0.9));
    box-shadow: 0 0 5px rgba(var(--stage-color-execute-rgb), 0.5);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS4 22s linear infinite; animation-delay: 10s;
}
/* Star 5: 170° left, very gentle down — rare */
body.theme-neptune .board-container > :nth-child(5)::before,
body.theme-krypton .board-container > :nth-child(5)::before,
body.theme-hubble .board-container > :nth-child(5)::before,
body.theme-tycho .board-container > :nth-child(5)::before {
    content: ''; position: absolute; top: 10%; right: 0;
    width: 65px; height: 1px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-deliver-rgb), 0.65));
    box-shadow: 0 0 3px rgba(var(--stage-color-deliver-rgb), 0.3);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS5 70s linear infinite; animation-delay: 55s;
}
/* Star 6: 75° gentle downward from top — rare (starts at top, short Y) */
body.theme-neptune .board-container > :nth-child(2)::before,
body.theme-krypton .board-container > :nth-child(2)::before,
body.theme-hubble .board-container > :nth-child(2)::before,
body.theme-tycho .board-container > :nth-child(2)::before {
    content: ''; position: absolute; top: 2%; left: 35%;
    width: 18px; height: 1px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-create-rgb), 0.7));
    box-shadow: 0 0 3px rgba(var(--stage-color-create-rgb), 0.3);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS6 65s linear infinite; animation-delay: 75s;
}
/* Star 8: 155° left, very gentle down — rare (small Y, no page extend) */
body.theme-neptune .board-container > :nth-child(5)::after,
body.theme-krypton .board-container > :nth-child(5)::after,
body.theme-hubble .board-container > :nth-child(5)::after,
body.theme-tycho .board-container > :nth-child(5)::after {
    content: ''; position: absolute; top: 18%; right: 0;
    width: 45px; height: 1px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-task-rgb), 0.65));
    box-shadow: 0 0 3px rgba(var(--stage-color-task-rgb), 0.3);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS8 55s linear infinite; animation-delay: 90s;
}
/* Star 9: -5° right gentle up — fast */
body.theme-neptune .board-container > :nth-child(3)::before,
body.theme-krypton .board-container > :nth-child(3)::before,
body.theme-hubble .board-container > :nth-child(3)::before,
body.theme-tycho .board-container > :nth-child(3)::before {
    content: ''; position: absolute; bottom: 8%; left: 0;
    width: 48px; height: 1.5px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--stage-color-execute-rgb), 0.8));
    box-shadow: 0 0 5px rgba(var(--stage-color-execute-rgb), 0.4);
    opacity: 0; z-index: 2; pointer-events: none;
    animation: astroS9 35s linear infinite; animation-delay: 30s;
}

/* KEYFRAMES */
@keyframes astroS1 { /* 5° right */
    0%, 79% { opacity: 0; transform: translate(0, 0) rotate(5deg); }
    80% { opacity: 0.9; }
    94% { opacity: 0; transform: translate(800px, 70px) rotate(5deg); }
    95%, 100% { opacity: 0; transform: translate(800px, 70px) rotate(5deg); }
}
@keyframes astroS2 { /* 175° left */
    0%, 79% { opacity: 0; transform: translate(0, 0) rotate(175deg); }
    80% { opacity: 0.8; }
    94% { opacity: 0; transform: translate(-750px, 65px) rotate(175deg); }
    95%, 100% { opacity: 0; transform: translate(-750px, 65px) rotate(175deg); }
}
@keyframes astroS3 { /* -27° up-right */
    0%, 80% { opacity: 0; transform: translate(0, 0) rotate(-27deg); }
    81% { opacity: 0.7; }
    95% { opacity: 0; transform: translate(700px, -360px) rotate(-27deg); }
    96%, 100% { opacity: 0; transform: translate(700px, -360px) rotate(-27deg); }
}
@keyframes astroS4 { /* -1° flat right fast */
    0%, 74% { opacity: 0; transform: translate(0, 0) rotate(-1deg); }
    75% { opacity: 0.9; }
    90% { opacity: 0; transform: translate(900px, -16px) rotate(-1deg); }
    91%, 100% { opacity: 0; transform: translate(900px, -16px) rotate(-1deg); }
}
@keyframes astroS5 { /* 170° left gentle down */
    0%, 82% { opacity: 0; transform: translate(0, 0) rotate(170deg); }
    83% { opacity: 0.5; }
    96% { opacity: 0; transform: translate(-800px, 140px) rotate(170deg); }
    97%, 100% { opacity: 0; transform: translate(-800px, 140px) rotate(170deg); }
}
@keyframes astroS6 { /* 75° gentle down-right from very top */
    0%, 84% { opacity: 0; transform: translate(0, 0) rotate(75deg); }
    85% { opacity: 0.6; }
    97% { opacity: 0; transform: translate(60px, 220px) rotate(75deg); }
    98%, 100% { opacity: 0; transform: translate(60px, 220px) rotate(75deg); }
}
@keyframes astroS8 { /* 155° left gentle down */
    0%, 81% { opacity: 0; transform: translate(0, 0) rotate(155deg); }
    82% { opacity: 0.55; }
    95% { opacity: 0; transform: translate(-700px, 120px) rotate(155deg); }
    96%, 100% { opacity: 0; transform: translate(-700px, 120px) rotate(155deg); }
}
@keyframes astroS9 { /* -5° right up */
    0%, 78% { opacity: 0; transform: translate(0, 0) rotate(-5deg); }
    79% { opacity: 0.85; }
    93% { opacity: 0; transform: translate(850px, -75px) rotate(-5deg); }
    94%, 100% { opacity: 0; transform: translate(850px, -75px) rotate(-5deg); }
}

/* --- SATELLITE 1: Flyby (120s cycle, ~20s visible) --- */
body.theme-neptune .board-container > :nth-child(2)::after,
body.theme-krypton .board-container > :nth-child(2)::after,
body.theme-hubble .board-container > :nth-child(2)::after,
body.theme-tycho .board-container > :nth-child(2)::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    width: 22px;
    height: 22px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='10' y='6' width='4' height='6' rx='0.5' fill='%23C0C0C0'/%3E%3Crect x='11' y='4' width='2' height='3' rx='0.5' fill='%23E0E0E0'/%3E%3Ccircle cx='12' cy='3.5' r='1.2' fill='%23F0F0F0' stroke='%23AAA' stroke-width='0.3'/%3E%3Crect x='9' y='12' width='6' height='2' rx='0.5' fill='%23D4A030'/%3E%3Crect x='10' y='14' width='4' height='3' rx='0.3' fill='%23C89028'/%3E%3Cline x1='11.5' y1='17' x2='10' y2='20' stroke='%23888' stroke-width='0.5'/%3E%3Cline x1='12.5' y1='17' x2='14' y2='20' stroke='%23888' stroke-width='0.5'/%3E%3Cline x1='12' y1='17' x2='12' y2='20.5' stroke='%23888' stroke-width='0.5'/%3E%3Crect x='2' y='9.5' width='8' height='1.2' rx='0.3' fill='%234A7A9A' opacity='0.8' transform='rotate(-8 6 10)'/%3E%3Crect x='14' y='9.5' width='8' height='1.2' rx='0.3' fill='%234A7A9A' opacity='0.8' transform='rotate(8 18 10)'/%3E%3Crect x='3' y='10' width='6' height='0.4' fill='%2369B5D6' opacity='0.5' transform='rotate(-8 6 10)'/%3E%3Crect x='15' y='10' width='6' height='0.4' fill='%2369B5D6' opacity='0.5' transform='rotate(8 18 10)'/%3E%3Crect x='11' y='2.5' width='2' height='2' rx='0.3' fill='%23FF2222'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: astroSatellite 70s linear infinite, astroBlink 1.5s step-end infinite;
    animation-delay: 20s, 0s;
}
@keyframes astroSatellite {
    0%, 80% { opacity: 0; transform: translate(0, 0); }
    81% { opacity: 0.5; }
    84% { opacity: 0.6; }
    95% { opacity: 0.5; }
    97.5% { opacity: 0; transform: translate(900px, -40px); }
    100% { opacity: 0; transform: translate(900px, -40px); }
}

/* --- SATELLITE 2: Hubble telescope flyby (300s = 5min cycle, lower, full cross) --- */
body.theme-neptune .board-container > :nth-child(4)::after,
body.theme-krypton .board-container > :nth-child(4)::after,
body.theme-hubble .board-container > :nth-child(4)::after,
body.theme-tycho .board-container > :nth-child(4)::after {
    content: '';
    position: absolute;
    top: 65%;
    left: -60vw;
    width: 22px;
    height: 22px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cg transform='rotate(-30 24 24)'%3E%3Crect x='18' y='10' width='12' height='28' rx='1.5' fill='%23B0B0B0'/%3E%3Crect x='19' y='10' width='10' height='28' rx='1' fill='%23C8C8C8'/%3E%3Crect x='22' y='10' width='3' height='28' fill='%23D8D8D8' opacity='0.6'/%3E%3Crect x='17.5' y='16' width='13' height='1.5' rx='0.3' fill='%23C8960A'/%3E%3Crect x='17.5' y='22' width='13' height='1.5' rx='0.3' fill='%23C8960A'/%3E%3Crect x='17.5' y='28' width='13' height='1.5' rx='0.3' fill='%23B08008'/%3E%3Crect x='17.5' y='33' width='13' height='1.5' rx='0.3' fill='%23C8960A'/%3E%3Crect x='19' y='7' width='10' height='5' rx='1' fill='%23E8E8E8'/%3E%3Crect x='20' y='6' width='8' height='3' rx='1' fill='%23F5F5F5'/%3E%3Crect x='17' y='37' width='14' height='2' rx='0.5' fill='%23999'/%3E%3Crect x='18' y='38.5' width='12' height='1.5' rx='0.5' fill='%23888'/%3E%3Crect x='3' y='20' width='14' height='3' rx='0.5' fill='%233A6B8A' stroke='%234A7A9A' stroke-width='0.3'/%3E%3Crect x='31' y='20' width='14' height='3' rx='0.5' fill='%233A6B8A' stroke='%234A7A9A' stroke-width='0.3'/%3E%3Cline x1='6' y1='20' x2='6' y2='23' stroke='%235A9ABA' stroke-width='0.3' opacity='0.6'/%3E%3Cline x1='9' y1='20' x2='9' y2='23' stroke='%235A9ABA' stroke-width='0.3' opacity='0.6'/%3E%3Cline x1='12' y1='20' x2='12' y2='23' stroke='%235A9ABA' stroke-width='0.3' opacity='0.6'/%3E%3Cline x1='34' y1='20' x2='34' y2='23' stroke='%235A9ABA' stroke-width='0.3' opacity='0.6'/%3E%3Cline x1='37' y1='20' x2='37' y2='23' stroke='%235A9ABA' stroke-width='0.3' opacity='0.6'/%3E%3Cline x1='40' y1='20' x2='40' y2='23' stroke='%235A9ABA' stroke-width='0.3' opacity='0.6'/%3E%3Crect x='4' y='21' width='12' height='0.5' fill='%2369B5D6' opacity='0.4'/%3E%3Crect x='32' y='21' width='12' height='0.5' fill='%2369B5D6' opacity='0.4'/%3E%3Cline x1='22' y1='39' x2='20' y2='44' stroke='%23777' stroke-width='0.5'/%3E%3Cline x1='26' y1='39' x2='28' y2='44' stroke='%23777' stroke-width='0.5'/%3E%3Crect x='23' y='5' width='2' height='2' rx='0.3' fill='%23FF2222'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: astroSatellite2 130s linear infinite, astroBlink 1s step-end infinite;
    animation-delay: 30s, 0s;
}
@keyframes astroSatellite2 {
    0%, 80% { opacity: 0; transform: translate(-700px, 0); }
    81% { opacity: 0.45; }
    83% { opacity: 0.6; }
    96% { opacity: 0.5; }
    98% { opacity: 0; transform: translate(900px, 15px); }
    100% { opacity: 0; transform: translate(900px, 15px); }
}

@keyframes astroBlink {
    0%, 49% { filter: brightness(1); }
    50%, 100% { filter: brightness(1.5) drop-shadow(0 -2px 6px rgba(255, 34, 34, 0.9)); }
}

/* --- COLUMN GLOW FRAMES (per-stage color) --- */
body.theme-neptune .kanban-column,
body.theme-krypton .kanban-column,
body.theme-hubble .kanban-column,
body.theme-tycho .kanban-column {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    margin: 0 2px;
    transition: box-shadow 0.4s;
}
body.theme-neptune #CREATE, body.theme-krypton #CREATE, body.theme-hubble #CREATE, body.theme-tycho #CREATE {
    border: 1px solid rgba(var(--stage-color-create-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--stage-color-create-rgb), 0.08), inset 0 0 20px rgba(var(--stage-color-create-rgb), 0.03);
    background: rgba(var(--stage-color-create-rgb), 0.03);
}
body.theme-neptune #DEFINE, body.theme-krypton #DEFINE, body.theme-hubble #DEFINE, body.theme-tycho #DEFINE {
    border: 1px solid rgba(var(--stage-color-define-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--stage-color-define-rgb), 0.08), inset 0 0 20px rgba(var(--stage-color-define-rgb), 0.03);
    background: rgba(var(--stage-color-define-rgb), 0.03);
}
body.theme-neptune #TASK, body.theme-krypton #TASK, body.theme-hubble #TASK, body.theme-tycho #TASK {
    border: 1px solid rgba(var(--stage-color-task-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--stage-color-task-rgb), 0.08), inset 0 0 20px rgba(var(--stage-color-task-rgb), 0.03);
    background: rgba(var(--stage-color-task-rgb), 0.03);
}
body.theme-neptune #EXECUTE, body.theme-krypton #EXECUTE, body.theme-hubble #EXECUTE, body.theme-tycho #EXECUTE {
    border: 1px solid rgba(var(--stage-color-execute-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--stage-color-execute-rgb), 0.08), inset 0 0 20px rgba(var(--stage-color-execute-rgb), 0.03);
    background: rgba(var(--stage-color-execute-rgb), 0.03);
}
body.theme-neptune #DELIVER, body.theme-krypton #DELIVER, body.theme-hubble #DELIVER, body.theme-tycho #DELIVER {
    border: 1px solid rgba(var(--stage-color-deliver-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--stage-color-deliver-rgb), 0.08), inset 0 0 20px rgba(var(--stage-color-deliver-rgb), 0.03);
    background: rgba(var(--stage-color-deliver-rgb), 0.03);
}

/* --- COLUMN HEADERS: Neon glow text (no font change) --- */
body.theme-neptune #CREATE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-create-rgb), 0.6); color: var(--stage-color-create); }
body.theme-neptune #DEFINE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-define-rgb), 0.6); color: var(--stage-color-define); }
body.theme-neptune #TASK .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-task-rgb), 0.6); color: var(--stage-color-task); }
body.theme-neptune #EXECUTE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-execute-rgb), 0.6); color: var(--stage-color-execute); }
body.theme-neptune #DELIVER .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-deliver-rgb), 0.6); color: var(--stage-color-deliver); }

body.theme-krypton #CREATE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-create-rgb), 0.6); color: var(--stage-color-create); }
body.theme-krypton #DEFINE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-define-rgb), 0.6); color: var(--stage-color-define); }
body.theme-krypton #TASK .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-task-rgb), 0.6); color: var(--stage-color-task); }
body.theme-krypton #EXECUTE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-execute-rgb), 0.6); color: var(--stage-color-execute); }
body.theme-krypton #DELIVER .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-deliver-rgb), 0.6); color: var(--stage-color-deliver); }

body.theme-hubble #CREATE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-create-rgb), 0.6); color: var(--stage-color-create); }
body.theme-hubble #DEFINE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-define-rgb), 0.6); color: var(--stage-color-define); }
body.theme-hubble #TASK .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-task-rgb), 0.6); color: var(--stage-color-task); }
body.theme-hubble #EXECUTE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-execute-rgb), 0.6); color: var(--stage-color-execute); }
body.theme-hubble #DELIVER .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-deliver-rgb), 0.6); color: var(--stage-color-deliver); }

body.theme-tycho #CREATE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-create-rgb), 0.6); color: var(--stage-color-create); }
body.theme-tycho #DEFINE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-define-rgb), 0.6); color: var(--stage-color-define); }
body.theme-tycho #TASK .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-task-rgb), 0.6); color: var(--stage-color-task); }
body.theme-tycho #EXECUTE .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-execute-rgb), 0.6); color: var(--stage-color-execute); }
body.theme-tycho #DELIVER .column-header { text-shadow: 0 0 8px rgba(var(--stage-color-deliver-rgb), 0.6); color: var(--stage-color-deliver); }

/* --- SPRINT CARDS: Tinted glass on void --- */
body.theme-neptune .ticket-card,
body.theme-krypton .ticket-card,
body.theme-hubble .ticket-card,
body.theme-tycho .ticket-card {
    background: rgba(var(--stage-color-create-rgb), 0.06) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(var(--stage-color-create-rgb), 0.1) !important;
    box-shadow: 0 0 1px rgba(var(--stage-color-create-rgb), 0.15);
    transition: box-shadow 0.35s, border-color 0.35s;
}
body.theme-neptune .ticket-card:hover,
body.theme-krypton .ticket-card:hover,
body.theme-hubble .ticket-card:hover,
body.theme-tycho .ticket-card:hover {
    background: rgba(var(--stage-color-create-rgb), 0.09) !important;
    border-color: rgba(var(--stage-color-create-rgb), 0.25) !important;
    box-shadow: 0 0 16px rgba(var(--stage-color-create-rgb), 0.15);
}

/* --- APP HEADER: Dark with subtle bottom glow --- */
body.theme-neptune #app-header,
body.theme-krypton #app-header,
body.theme-hubble #app-header,
body.theme-tycho #app-header {
    background: #080A10;
    border-bottom: 1px solid rgba(var(--stage-color-create-rgb), 0.12);
    box-shadow: 0 1px 16px rgba(var(--stage-color-create-rgb), 0.05);
}

/* --- BULLETPOINTS: Subtle inner glow --- */
body.theme-neptune .bulletpoint-item,
body.theme-krypton .bulletpoint-item,
body.theme-hubble .bulletpoint-item,
body.theme-tycho .bulletpoint-item {
    background: rgba(255,255,255,0.015);
    border: 1px solid rgba(255,255,255,0.04);
    border-left: none;
}

/* --- MODALS: Deep background --- */
body.theme-neptune .modal-content,
body.theme-krypton .modal-content,
body.theme-hubble .modal-content,
body.theme-tycho .modal-content {
    background: #0A0C14;
    border-color: rgba(var(--stage-color-create-rgb), 0.12);
}

/* --- PER-THEME SOLAR GLOW TUNING --- */
body.theme-neptune .board-container {
    background:
        radial-gradient(ellipse at 95% 95%, rgba(126,200,227,0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 80%, rgba(58,143,191,0.1) 0%, transparent 35%),
        #060810;
}
body.theme-krypton .board-container {
    background:
        radial-gradient(ellipse at 95% 95%, rgba(105,240,174,0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 80%, rgba(0,230,118,0.1) 0%, transparent 35%),
        #060810;
}
body.theme-hubble .board-container {
    background:
        radial-gradient(ellipse at 95% 95%, rgba(232,232,232,0.16) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 80%, rgba(255,109,46,0.12) 0%, transparent 35%),
        #060810;
}
body.theme-tycho .board-container {
    background:
        radial-gradient(ellipse at 95% 95%, rgba(255,138,101,0.24) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 80%, rgba(244,81,30,0.1) 0%, transparent 35%),
        #060810;
    animation: tychoBreath 4s ease-in-out infinite;
}
@keyframes tychoBreath {
    0%, 100% { box-shadow: 0 0 20px rgba(191,54,12,0.06); }
    50% { box-shadow: 0 0 35px rgba(191,54,12,0.12); }
}

/* ===================================================================================
   CHUNK 2: GLOBAL TAGS & RESETS
   Base styles for html, body, forms, and inputs.
   =================================================================================== */
html, body { 
    height: 100%; 
    margin: 0; 
    overflow: hidden; 
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    font-family: var(--font-family); 
    display: flex; 
    flex-direction: column; 
    transition: background-color 0.3s, color 0.3s; 
}

.form-group { 
    margin-bottom: 15px; 
}

.form-group label { 
    display: block; 
    margin-bottom: 5px; 
    font-size: 0.9em; 
}

input, textarea, [contenteditable="true"] { 
    font-family: var(--font-family) !important; 
}

/* ===================================================================================
   CHUNK 3: UTILITIES & HELPERS
   Reusable classes for buttons, avatars, tooltips, notifications, etc.
   =================================================================================== */
.action-btn { 
    background-color: var(--stage-color-create); 
    color: #fff; 
    border: none; 
    padding: 8px 16px; 
    border-radius: 5px; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 0.9em; 
    transition: background-color 0.3s;
}

.secondary-btn { 
    background-color: #555; 
}

.danger-btn { 
    background-color: #c0392b; 
}

.danger-text { 
    color: #e74c3c; 
}

.danger-text:hover { 
    color: #fff; 
    background-color: #c0392b !important; 
}

.admin-name { 
    color: #fff; 
    text-shadow: 0 0 8px var(--stage-color-create); 
}

.credential-star, .credential-badge { 
    display: inline-block; 
    width: 1.1em; 
    height: 1.1em; 
    vertical-align: -0.15em; 
    margin-left: 2px; 
}

.credential-star svg, .credential-badge svg { 
    fill: none; 
    stroke: var(--stage-color-create); 
    stroke-width: 2px; 
    filter: drop-shadow(0 0 5px var(--stage-color-create)) drop-shadow(0 0 10px var(--stage-color-create)); 
}

.avatar-shape { 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center; 
}

.user-bubble { 
    width: 32px; 
    height: 32px; 
    border: 2px solid #333; 
    transition: all 0.2s; 
    cursor: pointer; 
    object-fit: cover; 
    overflow: hidden; 
    background-color: #444; 
    flex-shrink: 0; 
    margin: 5px; 
    border-radius: 50%; 
}

.user-bubble.small { 
    width: 24px; 
    height: 24px; 
    margin: 0; 
}

.user-bubble.small-mention { 
    width: 16px; 
    height: 16px; 
    margin: 0 4px 0 0; 
    border-width: 1px; 
}

.user-bubble.online { 
    border-width: 2px; 
    border-color: var(--stage-color-create); 
    box-shadow: 0 0 6px var(--stage-color-create), 0 0 2px rgba(255, 255, 255, 0.5); 
}

.user-bubble:hover { 
    transform: scale(1.1) translateY(-2px); 
    z-index: 10; 
}

.status-indicator { 
    display: inline-flex; 
    width: 9px; 
    height: 9px; 
    border-radius: 50%; 
    margin-right: 8px; 
    margin-left: 5px;
    flex-shrink: 0;
    vertical-align: middle;
    position: relative;
    isolation: isolate;
}

.status-indicator.status-red { 
    background-color: #ff3d7f; 
    box-shadow: 0 0 6px #ff3d7f, 0 0 10px #ff3d7f; 
}

.status-indicator.status-yellow { 
    background-color: #ffd700; 
    box-shadow: 0 0 6px #ffd700, 0 0 10px #ffd700; 
}

.status-indicator.status-green { 
    background-color: #3dffaf; 
    box-shadow: 0 0 6px #3dffaf, 0 0 10px #3dffaf; 
}

.status-indicator.status-low { 
    background-color: #555; 
    box-shadow: 0 0 6px #555; 
}

.switch { 
    position: relative; 
    display: inline-block; 
    width: 50px; 
    height: 26px; 
    flex-shrink: 0; 
}

.switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #555; 
    transition: .4s; 
}

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    left: 3px; 
    bottom: 3px; 
    background-color: white; 
    transition: .4s; 
}

input:checked + .slider { 
    background-color: var(--stage-color-create); 
}

input:checked + .slider:before { 
    transform: translateX(24px); 
}

.slider.round { 
    border-radius: 26px; 
}

.slider.round:before { 
    border-radius: 50%; 
}

.tooltip-container { 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    margin-left: auto;
}

.tooltip-icon { 
    cursor: help; 
    border: 1px solid var(--modal-secondary-text); 
    border-radius: 50%; 
    width: 18px; 
    height: 18px; 
    font-size: 12px; 
    line-height: 18px; 
    text-align: center; 
    color: var(--modal-secondary-text); 
    flex-shrink: 0; 
}

.tooltip-text { 
    visibility: hidden; 
    width: 220px; 
    background-color: #111; 
    color: #fff; 
    text-align: center; 
    border-radius: 6px; 
    padding: 8px; 
    position: absolute; 
    z-index: 1; 
    bottom: 125%; 
    left: 50%; 
    margin-left: -110px; 
    opacity: 0; 
    transition: opacity 0.3s; 
    font-size: 0.8em; 
    border: 1px solid var(--modal-border-color); 
}

.tooltip-container:hover .tooltip-text { 
    visibility: visible; 
    opacity: 1; 
}

.lightbox-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    backdrop-filter: blur(5px); 
    z-index: 1050; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
}

.lightbox-overlay.active { 
    display: flex; 
}

.lightbox-overlay img { 
    max-width: 90%; 
    max-height: 90%; 
    object-fit: contain; 
    cursor: default; 
}

.lightbox-nav { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0,0,0,0.3); 
    color: var(--stage-color-create); 
    border: none; 
    font-size: 2.5em; 
    padding: 10px 20px; 
    cursor: pointer; 
    border-radius: 5px; 
    transition: background-color 0.2s; 
    user-select: none; 
    z-index: 1051; 
}

.lightbox-nav:hover { 
    background: rgba(0,0,0,0.6); 
}

.lightbox-nav.prev { 
    left: 20px; 
}

.lightbox-nav.next { 
    right: 20px; 
}

.lightbox-nav.hidden { 
    display: none; 
}

.notification-toast { 
    position: fixed; 
    bottom: -100px; 
    left: 50%; 
    transform: translateX(-50%); 
    background-color: var(--notification-bg); 
    color: #fff; 
    padding: 15px 25px; 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); 
    z-index: 2000; 
    opacity: 0; 
    transition: opacity 0.3s, bottom 0.3s; 
}

.notification-toast.show { 
    opacity: 1; 
    bottom: 20px; 
}

.text-edit-btn { 
    background: none; 
    border: none; 
    color: var(--stage-color-create); 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 0.8em; 
    margin-left: 15px; 
    padding: 4px 8px; 
    text-shadow: 0 0 5px var(--stage-color-create); 
} 

.text-edit-btn:hover { 
    text-decoration: underline; 
    color: #fff; 
}

.edit-text-btn { 
    background: none; 
    border: none; 
    color: var(--stage-color-create); 
    font-weight: bold; 
    font-size: 0.9em; 
    cursor: pointer; 
    text-shadow: 0 0 8px var(--stage-color-create); 
    transition: all 0.2s ease; 
    padding: 4px 8px; 
} 

.edit-text-btn:hover { 
    color: #fff; 
    text-shadow: 0 0 12px var(--stage-color-create), 0 0 5px #fff; 
}

/* ===================================================================================
   CHUNK 4: AUTH SCREENS
   Styles for the Login and Sign-up pages.
   =================================================================================== */
.auth-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    background: 
        radial-gradient(ellipse at 10% 20%, #0099e6 0%, transparent 50%),
        radial-gradient(ellipse at 90% 15%, #00b87a 0%, transparent 45%),
        radial-gradient(ellipse at 50% 60%, #e6b000 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, #cf00cf 0%, transparent 45%),
        radial-gradient(ellipse at 20% 85%, #8a2ee6 0%, transparent 50%),
        #0a0a0f;
    z-index: 2000; 
}

.auth-wrapper.visible { 
    display: flex; 
}

.auth-wrapper::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,0.35); 
    backdrop-filter: blur(60px); 
}

.auth-card { 
    background: #fff; 
    color: #333; 
    padding: 40px; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    text-align: center; 
    width: 100%; 
    max-width: 400px; 
    z-index: 1; 
}

.auth-logo { 
    height: 60px; 
    margin-bottom: 20px; 
}

.auth-card h2 { 
    margin-top: 0; 
    margin-bottom: 10px; 
    font-size: 1.8em; 
}

.auth-card p { 
    color: #666; 
    margin-bottom: 30px; 
}
.setup-lang-btn{color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.08);transition:all 0.2s;border:1px solid rgba(255,255,255,0.1);}
.setup-lang-btn:hover{color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.12);}
.setup-lang-active{background:var(--stage-color-create,#3dffaf) !important;color:#000 !important;border-color:transparent !important;}

.auth-card .form-group { 
    text-align: left; 
}

.auth-card input { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    box-sizing: border-box; 
    font-size: 16px; 
}

.auth-card .action-btn { 
    width: 100%; 
    padding: 12px; 
    font-size: 1em; 
    margin-top: 10px; 
    background-color: var(--stage-color-create); 
    border-color: var(--stage-color-create); 
}

.google-btn { 
    width: 100%; 
    padding: 12px; 
    font-size: 1em; 
    margin-top: 15px; 
    background: #fff; 
    border: 1px solid #ccc; 
    color: #333; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
    cursor: pointer; 
}

.google-btn img { 
    height: 18px; 
}

.auth-link { 
    margin-top: 20px; 
    font-size: 0.9em; 
}

.auth-link a { 
    color: var(--stage-color-create); 
    text-decoration: none; 
    font-weight: bold; 
}

.error-message { 
    color: #e74c3c; 
    font-size: 0.8em; 
    height: 20px; 
    text-align: left; 
}

/* ===================================================================================
   CHUNK 5: APP LAYOUT & HEADER
   Main app container, header, logos, user bubbles, and chat icon.
   =================================================================================== */
#app-container { 
    display: none; 
    flex-direction: column; 
    height: 100%; 
}

#app-container.visible { 
    display: flex; 
}

.app-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 10px; 
    padding: 8px 20px; 
    padding-top: calc(8px + env(safe-area-inset-top, 0px)); 
    flex-shrink: 0; 
    background-color: #202020; 
    border-bottom: 1px solid #333; 
    box-shadow: 0 2px 8px -4px var(--stage-color-create); 
    transition: box-shadow 0.3s; 
    position: relative;
    z-index: 100;
}

.header-left { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-grow: 1; 
    overflow: hidden; 
}

.header-logo { 
    height: 30px; 
}

.app-title { 
    font-size: 1.2em; 
    margin: 0; 
    font-weight: bold; 
    color: #fff; 
    padding: 5px 10px; 
    text-shadow: 0 0 4px #fff, 0 0 8px var(--stage-color-create), 0 0 12px var(--stage-color-create); 
    transition: text-shadow 0.3s; 
}

.header-separator { 
    color: #555; 
    font-size: 1.2em; 
}

.project-name-display { 
    font-size: 1.2em; 
    font-weight: bold; 
    color: #fff; 
    padding: 5px; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
}

.header-right { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.users-container { 
    display: flex; 
    align-items: center; 
    gap: 0; 
    position: relative; 
}

.more-users-bubble { 
    color: #fff; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.8em; 
}

.more-users-bubble.online-total .online-indicator { 
    width: 6px; 
    height: 6px; 
    background-color: var(--stage-color-create); 
    border-radius: 50%; 
    margin-left: 4px; 
    box-shadow: 0 0 4px var(--stage-color-create); 
}

.header-btn { 
    background: none; 
    border: none; 
    color: #fff; 
    cursor: pointer; 
    padding: 5px; 
    position: relative;
}

.header-btn svg { 
    stroke: var(--stage-color-create); 
    transition: all 0.3s; 
    filter: drop-shadow(0 0 3px var(--stage-color-create)); 
}

.header-btn:hover svg { 
    stroke: #fff; 
    filter: drop-shadow(0 0 5px #fff); 
    transform: scale(1.1); 
}

#chat-notification-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%); /* Shifted up to center perfectly inside the larger icon */
    background: transparent;
    color: #fff;
    font-size: 12px; /* Bumped up slightly to match the larger icon */
    font-weight: 900;
    display: none; 
    align-items: center;
    justify-content: center;
    border: none;
    pointer-events: none;
}

#chat-notification-badge.visible {
    display: flex;
    text-shadow: 0 0 4px rgba(0,0,0,0.8); /* Helps the white text pop */
}

/* Make the SVG itself glow and scale up when there are notifications */
.header-btn.has-notifications svg {
    stroke: #ff3d7f !important;
    filter: drop-shadow(0 0 4px #ff3d7f) drop-shadow(0 0 8px #ff3d7f) !important;
    transform: scale(1.2); /* Makes the icon a tiny bit larger */
    transition: transform 0.2s ease; /* Adds a smooth pop animation when it gets larger */
}
/* Make the SVG itself glow when there are notifications */
.header-btn.has-notifications svg {
    stroke: #ff3d7f !important;
    filter: drop-shadow(0 0 4px #ff3d7f) drop-shadow(0 0 8px #ff3d7f) !important;
}

.user-popover { 
    position: absolute; 
    top: 110%; 
    right: 0; 
    background-color: var(--modal-bg); 
    border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    padding: 15px; 
    z-index: 1001; 
    max-width: 450px; 
    max-height: 50vh; 
    overflow-y: auto; 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(-10px); 
    transition: all 0.2s; 
}

.user-popover-role-group { 
    margin-bottom: 15px; 
}

.user-popover-role-group h4 { 
    margin: 0 0 10px; 
    padding-bottom: 5px; 
    border-bottom: 1px solid var(--modal-border-color); 
    font-size: 0.8em; 
    text-transform: uppercase; 
    color: var(--modal-secondary-text); 
}

.user-popover-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); 
    gap: 15px; 
}

.user-popover.active { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}

.popover-user { 
    text-align: center; 
}

.popover-user .user-bubble { 
    margin: 0 auto 5px; 
}

.popover-user-name { 
    font-size: 0.75em; 
    color: var(--text-color); 
    white-space: nowrap; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; 
}

/* ===================================================================================
   CHUNK 6: KANBAN BOARD
   Main board container, columns, and sprint cards.
   =================================================================================== */
.board-container { 
    display: flex; 
    gap: 15px; 
    padding: 20px; 
    overflow-x: auto; 
    flex-grow: 1; 
    align-items: stretch; 
}

.kanban-column { 
    border-radius: 10px; 
    width: 300px; 
    flex-shrink: 0; 
    display: flex; 
    flex-direction: column; 
    color: #fff; 
    border: 1px solid; 
    transition: all 0.3s ease-in-out; 
}

#CREATE { 
    border-color: var(--stage-color-create); 
    background-image: linear-gradient(180deg, var(--stage-color-create), var(--stage-color-create-dark)); 
    box-shadow: 0 0 15px -2px var(--stage-color-create), 0 0 30px -10px var(--stage-color-create) inset; 
}

#DEFINE { 
    border-color: var(--stage-color-define); 
    background-image: linear-gradient(180deg, var(--stage-color-define), var(--stage-color-define-dark)); 
    box-shadow: 0 0 15px -2px var(--stage-color-define), 0 0 30px -10px var(--stage-color-define) inset; 
}

#TASK { 
    border-color: var(--stage-color-task); 
    background-image: linear-gradient(180deg, var(--stage-color-task), var(--stage-color-task-dark)); 
    box-shadow: 0 0 15px -2px var(--stage-color-task), 0 0 30px -10px var(--stage-color-task) inset; 
}

#EXECUTE { 
    border-color: var(--stage-color-execute); 
    background-image: linear-gradient(180deg, var(--stage-color-execute), var(--stage-color-execute-dark)); 
    box-shadow: 0 0 15px -2px var(--stage-color-execute), 0 0 30px -10px var(--stage-color-execute) inset; 
}

#DELIVER { 
    border-color: var(--stage-color-deliver); 
    background-image: linear-gradient(180deg, var(--stage-color-deliver), var(--stage-color-deliver-dark)); 
    box-shadow: 0 0 15px -2px var(--stage-color-deliver), 0 0 30px -10px var(--stage-color-deliver) inset; 
}

.column-header { 
    padding: 15px; 
    font-weight: bold; 
    font-size: 1.2em; 
    text-align: center; 
    text-transform: uppercase; 
    letter-spacing: 2px; /* Adds that premium breathing room between letters */
    background-color: rgba(0, 0, 0, 0.25); 
    border-bottom: 1px solid; 
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7); 
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sprint-count {
    background-color: rgba(0, 0, 0, 0.3);
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.column-help-btn { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 5px; 
}

.column-help-btn svg { 
    width: 20px; 
    height: 20px; 
    stroke: rgba(255,255,255,0.7); 
    stroke-width: 2.5; 
    transition: all 0.3s; 
}

#CREATE .column-help-btn svg { filter: drop-shadow(0 0 4px var(--stage-color-create)); }
#DEFINE .column-help-btn svg { filter: drop-shadow(0 0 4px var(--stage-color-define)); }
#TASK .column-help-btn svg { filter: drop-shadow(0 0 4px var(--stage-color-task)); }
#EXECUTE .column-help-btn svg { filter: drop-shadow(0 0 4px var(--stage-color-execute)); }
#DELIVER .column-help-btn svg { filter: drop-shadow(0 0 4px var(--stage-color-deliver)); }

.column-help-btn:hover svg { 
    stroke: #fff; 
    transform: scale(1.1); 
}

#CREATE .column-header { border-color: var(--stage-color-create); }
#DEFINE .column-header { border-color: var(--stage-color-define); }
#TASK .column-header { border-color: var(--stage-color-task); }
#EXECUTE .column-header { border-color: var(--stage-color-execute); }
#DELIVER .column-header { border-color: var(--stage-color-deliver); }

.column-body { 
    padding: 10px; 
    flex-grow: 1; 
    overflow-y: auto; 
}

.column-body::-webkit-scrollbar { display: none; }
.column-body { -ms-overflow-style: none; scrollbar-width: none; }

.add-idea-btn {
    background-color: rgba(0,0,0,0.2);
    color: #fff;
    border: 2px dashed rgba(255,255,255,0.4);
    border-radius: 6px;
    padding: 15px;
    width: 100%;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s;
}

.add-idea-btn:hover { 
    background-color: rgba(var(--stage-color-create-rgb), 0.2); 
    border-color: var(--stage-color-create); 
    color: var(--stage-color-create); 
    text-shadow: 0 0 5px var(--stage-color-create); 
}

.ticket-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: all 0.2s;
    background-color: rgba(0,0,0,0.2);
}

.ticket-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.4); 
}

.ticket-card.dragging { 
    opacity: 0.5; 
    transform: rotate(3deg); 
}

.kanban-column .column-body.drag-over { 
    background-color: rgba(255, 255, 255, 0.08); 
}

.ticket-card-top { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap: 10px; 
    margin-bottom: 8px; 
}

.ticket-card-top-left { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.ticket-card-creator.user-bubble { 
    width: 28px; 
    height: 28px; 
    margin: 0; 
    flex-shrink: 0; 
}

.ticket-card-id { 
    font-size: 0.7em; 
    font-weight: bold; 
    color: rgba(255,255,255,0.5); 
    cursor: pointer; 
}

.ticket-card-id:hover { 
    color: #fff; 
}

.ticket-card-top-details { 
    display: flex; 
    flex-direction: column; 
    font-size: 0.8em; 
    gap: 2px; 
    align-items: flex-end; 
}

.ticket-card-top-details > span { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    color: #ccc; 
}

.ticket-card-title { 
    font-weight: bold; 
    font-size: 1.1em; 
    color: #fff; 
    margin: 0; 
} 

.ticket-card-desc { 
    font-size: 0.9em; 
    color: #ccc; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
} 

.ticket-card-footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.8em; 
    color: #aaa; 
    margin-top: 10px; 
    gap: 10px; 
    flex-wrap: wrap; 
} 

.ticket-card-date { 
    display: flex; 
    align-items: center; 
    font-size: 1em; 
    font-weight: 600;
    color: #ccc; 
}

.ticket-card-date.overdue { 
    color: #e74c3c; 
    font-weight: bold; 
} 

.ticket-card-date .status-indicator { 
    margin-left: 0; 
} 

.ticket-card-assignees { 
    margin-left: auto; 
    display: flex; 
}

.ticket-card-assignees .user-bubble { 
    width: 24px; 
    height: 24px; 
    margin-left: -8px; 
    border-width: 2px; 
}

.ticket-card-assignees .user-bubble:first-child { 
    margin-left: 0; 
}

.ticket-theme-CREATE { border-left-color: var(--stage-color-create); }
.ticket-theme-DEFINE { border-left-color: var(--stage-color-define); }
.ticket-theme-TASK { border-left-color: var(--stage-color-task); }
.ticket-theme-EXECUTE { border-left-color: var(--stage-color-execute); }
.ticket-theme-DELIVER { border-left-color: var(--stage-color-deliver); }

/* ===================================================================================
   CHUNK 7: PROJECT HUB & NOTEPAD (SIDEBAR)
   Styles for the right-hand panel, including Summary, Filters, and Note Pad.
   =================================================================================== */
#project-section { 
    width: 320px; 
    flex-shrink: 0; 
    background-color: var(--card-bg); 
    border-radius: 10px; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
}

.project-tabs { 
    display: flex; 
    border-bottom: 1px solid var(--modal-border-color); 
    margin-bottom: 15px; 
}

.tab-btn { 
    background: none; 
    border: none; 
    color: var(--modal-secondary-text); 
    padding: 10px 15px; 
    cursor: pointer; 
    font-size: 1em; 
    font-weight: bold; 
    border-bottom: 3px solid transparent; 
    transition: all 0.3s; 
}

.tab-btn:hover { 
    color: var(--text-color); 
}

.tab-btn.active { 
    color: var(--stage-color-execute); 
    border-bottom-color: var(--stage-color-execute); 
}

.project-tab-content { 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

.project-tab-content .tab-panel { 
    display: none; 
    flex-grow: 1; 
    flex-direction: column; 
    height: 100%; 
    overflow: hidden; 
}

.project-tab-content .tab-panel.active { 
    display: flex; 
}

.project-portrait-container { 
    position: relative; 
    width: 90px; 
    height: 90px; 
    margin: 0 auto 8px; 
    margin-top: 5px;
}

/* Only Admins can see the Upload overlay */
.portrait-upload-label {
    display: none !important;
}
body.perm-admin .portrait-upload-label {
    display: block !important;
    opacity: 0;
}
body.perm-admin .project-portrait-container:hover .portrait-upload-label {
    opacity: 1;
}

#project-portrait-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 12px; 
    border: 3px solid var(--modal-border-color); 
}

.portrait-upload-label { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(0,0,0,0.6); 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    border-bottom-left-radius: 9px; 
    border-bottom-right-radius: 9px; 
    cursor: pointer; 
    opacity: 0; 
    transition: opacity 0.3s; 
}



#project-data-name { 
    text-align: center; 
    font-size: 1.2em; 
    margin-bottom: 5px; 
}

.summary-filter-container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    margin-bottom: 8px; 
    font-size: 0.9em; 
}

#summary-filters-grid {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filter-button-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.filter-section-title {
    font-size: 0.75em;
    font-weight: bold;
    color: var(--modal-secondary-text);
    text-transform: uppercase;
    margin: 0 0 4px 0;
}

.summary-filter-btn {
    background-color: var(--modal-input-bg);
    border: 1px solid var(--modal-input-border);
    color: var(--text-color);
    padding: 8px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.summary-filter-btn:hover {
    background-color: #444;
}

.summary-filter-btn.active {
    background-color: var(--stage-color-create);
    border-color: var(--stage-color-create-dark);
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.filter-btn-count {
    font-size: 1.2em;
}

.summary-filter-btn.glow-red span {
    color: #ff3d7f;
    text-shadow: 0 0 6px #ff3d7f, 0 0 10px #ff3d7f;
}

.summary-filter-btn.glow-yellow span {
    color: #ffd700;
    text-shadow: 0 0 6px #ffd700, 0 0 10px #ffd700;
}

.summary-total-tasks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
}
.shipped-summary-btn {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    font-size: 0.85em;
    font-weight: 700;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--modal-secondary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.shipped-summary-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-color);
}
.shipped-summary-btn #shipped-count-badge {
    background: rgba(255,255,255,0.15);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.9em;
}

/* --- Summary Popover Styling --- */
#summary-popover {
    position: fixed;
    background-color: var(--modal-bg);
    border: 1px solid rgba(var(--stage-color-create-rgb), 0.25);
    border-top: 3px solid var(--stage-color-create);
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.7), 0 0 20px rgba(var(--stage-color-create-rgb), 0.08);
    z-index: 9500;
    width: 500px;
    max-height: 70vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

#summary-popover.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

#summary-popover.draggable-window .summary-popover-header {
    cursor: grab;
}
.sp-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.sp-sort-popover, .sp-filter-popover {
    left: 0;
    top: 100%;
    min-width: 200px;
}
.sp-assignee-popover {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 180px;
    max-height: 250px;
    overflow-y: auto;
    background: linear-gradient(to bottom, rgba(var(--stage-color-create-rgb), 0.15), transparent 80%), var(--modal-card-bg);
    border: 1px solid var(--stage-color-create);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(var(--stage-color-create-rgb), 0.2);
    z-index: 10;
    padding: 4px 0;
}
.sp-assignee-popover.active { display: block !important; }
.sp-assignee-popover .sprint-tool-option {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sp-assignee-btn:hover {
    opacity: 1 !important;
    color: var(--stage-color-create);
}#summary-popover .summary-popover-header {
    background: linear-gradient(180deg, rgba(var(--stage-color-create-rgb), 0.1) 0%, transparent 100%);
}
#summary-popover .sp-toolbar {
    border-bottom-color: rgba(var(--stage-color-create-rgb), 0.1);
}
#summary-popover .sp-sort-btn:hover,
#summary-popover .sp-filter-btn:hover,
#summary-popover .sp-search-icon-btn:hover {
    color: var(--stage-color-create);
    opacity: 1;
}
#summary-popover .sp-sort-popover,
#summary-popover .sp-filter-popover {
    border-color: var(--stage-color-create);
    box-shadow: 0 4px 15px rgba(var(--stage-color-create-rgb), 0.2);
    background: linear-gradient(to bottom, rgba(var(--stage-color-create-rgb), 0.15), transparent 80%), var(--modal-card-bg);
}
#summary-popover .sprint-tool-option.selected {
    color: var(--stage-color-create);
    font-weight: bold;
    background-color: rgba(var(--stage-color-create-rgb), 0.15);
}
#summary-popover .sprint-tool-option.selected .filter-checkbox {
    background-color: var(--stage-color-create);
    border-color: var(--stage-color-create);
}
#summary-popover.pinned {
    border-color: var(--stage-color-create);
    box-shadow: 0 15px 50px rgba(0,0,0,0.7), 0 0 30px rgba(var(--stage-color-create-rgb), 0.15);
}

.summary-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.75em;
    font-weight: 800;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    position: relative;
    padding-right: 60px;
    flex-shrink: 0;
}

.summary-popover-controls {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
}

.summary-popover-controls button {
    background: none;
    border: 1px solid transparent;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    width: 26px;
    height: 26px;
    font-size: 1.1em;
    line-height: 24px;
    text-align: center;
    border-radius: 6px;
    transition: all 0.15s;
}

.summary-popover-controls button:hover {
    background-color: rgba(255,255,255,0.08);
    color: #fff;
}
#summary-popover-pin-btn { display: flex; align-items: center; justify-content: center; }
#summary-popover.pinned #summary-popover-pin-btn {
    color: var(--stage-color-create);
    background: rgba(var(--stage-color-create-rgb), 0.15);
    border-color: var(--stage-color-create);
}
#summary-popover .summary-popover-header { cursor: grab; }
#summary-popover .summary-popover-header:active { cursor: grabbing; }

/* === CLEANUP BOARD === */
#cleanup-warning-btn {
    color: #e74c3c;
    animation: cleanupPulse 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cleanup-popover.pinned { border-color: #e74c3c; box-shadow: 0 15px 50px rgba(0,0,0,0.7), 0 0 30px rgba(231,76,60,0.2); }
#cleanup-popover.pinned #cleanup-pin-btn { color: #e74c3c; background: rgba(231,76,60,0.15); border-color: #e74c3c; }
.cleanup-header { cursor: grab; }
.cleanup-header:active { cursor: grabbing; }
@keyframes cleanupPulse {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 6px rgba(231,76,60,0.6)); }
}
#cleanup-popover {
    position: fixed;
    background-color: var(--modal-bg);
    border: 1px solid rgba(231,76,60,0.3);
    border-top: 3px solid #e74c3c;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.7), 0 0 20px rgba(231,76,60,0.1);
    z-index: 9500;
    width: 500px;
    max-height: 70vh;
    display: none;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
#cleanup-popover.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.cleanup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(231,76,60,0.12) 0%, transparent 100%);
    border-bottom: 1px solid rgba(231,76,60,0.1);
    font-weight: 700;
    font-size: 0.9em;
    color: #e74c3c;
    flex-shrink: 0;
}
.cleanup-header span { display: flex; align-items: center; gap: 8px; }
#cleanup-close-btn {
    background: rgba(231,76,60,0.1);
    border: 1px solid rgba(231,76,60,0.3);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    font-weight: 700;
    color: #e74c3c;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}
#cleanup-close-btn:hover { background: rgba(231,76,60,0.25); color: #fff; }
.cleanup-body {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
    padding: 4px 0;
}
.cleanup-section { padding: 0 12px; margin-bottom: 8px; }
.cleanup-section-title {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
    padding: 8px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    background: var(--modal-bg);
    z-index: 1;
}
.cleanup-section-count {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 4px;
}
.cleanup-section-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cleanup-item {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(231,76,60,0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
.cleanup-item:hover { background: rgba(231,76,60,0.06); border-color: rgba(231,76,60,0.2); }
.cleanup-item-content { flex: 1; padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cleanup-dismiss-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.12);
    cursor: pointer;
    padding: 8px 10px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    transition: color 0.15s;
}
.cleanup-dismiss-btn:hover { color: #e74c3c; }

/* === CLEANUP BOARD === */
.cleanup-warning-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: auto;
    color: #e74c3c;
    position: relative;
    animation: cleanupPulse 2s ease-in-out infinite;
}
#cleanup-count-badge {
    font-size: 0.65em;
    font-weight: 800;
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 768px) {
    #cleanup-popover {
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: none !important;
        z-index: 10001 !important;
        transform: none !important;
    }
    #cleanup-popover .cleanup-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }
    #cleanup-close-btn {
        width: 32px;
        height: 32px;
        font-size: 1.4em;
    }
}

@media (max-width: 768px) {
    #notification-hub.notification-sidebar {
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 10001 !important;
    }
    #notification-hub .notification-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }
    #close-notifications-btn {
        font-size: 1.6em;
        padding: 4px 8px;
    }
}

@media (max-width: 768px) {
    #summary-popover {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        transform: none !important;
        border-radius: 0 !important;
        border: none !important;
        overflow: hidden !important;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 10000 !important;
        background-color: var(--modal-bg) !important;
    }
    #summary-popover .summary-popover-body {
        max-height: none !important;
        min-height: 0 !important;
        flex: 1;
        overflow-y: scroll !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
        position: relative;
    }
    #summary-popover .sp-toolbar {
        flex-wrap: wrap;
    }
    #summary-popover .sp-assignee-wrapper {
        margin-left: 0;
    }
}

.summary-popover-body {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 200px;
    max-height: 350px;
    padding: 4px 0;
}

.summary-popover-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: all 0.15s;
    gap: 12px;
}

.summary-popover-item:last-child {
    border-bottom: none;
}

.summary-popover-item:hover {
    background-color: rgba(255,255,255,0.06);
}

.sp-item-stage-bar {
    width: 3px;
    align-self: stretch;
    border-radius: 3px;
    flex-shrink: 0;
}
.sp-item-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex-grow: 1;
}

.sp-item-sprint {
    font-size: 0.72em;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-item-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.sp-item-status {
    font-size: 0.68em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
}
.sp-status-progress { color: #3dffaf; background: rgba(61,255,175,0.1); }
.sp-status-review { color: #f1c40f; background: rgba(241,196,15,0.1); }
.sp-status-blocked { color: #e74c3c; background: rgba(231,76,60,0.1); }
.sp-status-pending { color: rgba(255,255,255,0.4); }

.sp-item-priority {
    font-size: 0.68em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.35);
}
.sp-priority-high { color: #e74c3c; background: rgba(231,76,60,0.1); }
.sp-priority-medium { color: #e6c200; background: rgba(230,194,0,0.1); }
.sp-priority-low { color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.04); }

.sp-item-date {
    font-size: 0.68em;
    color: rgba(255,255,255,0.35);
}

.sp-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.sp-item-id {
    font-size: 0.72em;
    font-weight: 800;
    color: var(--stage-color-create);
    font-family: monospace;
    letter-spacing: 0.5px;
}

.sp-item-assignees {
    display: flex;
    gap: -4px;
}
.sp-item-assignees .user-bubble {
    margin-left: -4px;
}
.sp-item-assignees .user-bubble:first-child {
    margin-left: 0;
}
.sp-unassigned {
    font-size: 0.75em;
    color: rgba(255,255,255,0.2);
}

.summary-popover-body::-webkit-scrollbar {
    width: 5px;
}
.summary-popover-body::-webkit-scrollbar-track {
    background: transparent;
}
.summary-popover-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

/* --- Note Pad Styles --- */
#notepad-tab {
    gap: 10px; 
    padding: 10px;
    height: 100%;
    overflow: hidden;
}

.notepad-header {
    display: flex;
    justify-content: center; /* Center month navigation */
    align-items: center;
    padding: 5px;
    flex-shrink: 0;
}

.notepad-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notepad-nav .secondary-btn {
    padding: 4px 8px;
    font-size: 0.9em;
}

#notepad-month-year {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0;
    width: 140px;
    text-align: center;
}

#notepad-list-container {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 5px;
}

.notepad-day-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-radius: 6px;
    padding: 8px;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}

.notepad-day-group.drag-over {
    background-color: rgba(var(--stage-color-execute-rgb), 0.15);
    border-color: rgba(var(--stage-color-execute-rgb), 0.5);
}

.notepad-day-header {
    display: flex;
    justify-content: flex-start; /* MODIFIED - Align items left */
    align-items: center;
    gap: 10px; /* ADDED - Space between items */
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--modal-border-color);
}

.notepad-day-group h4 {
    font-size: 0.8em;
    font-weight: bold;
    color: var(--modal-secondary-text);
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    border: none;
    order: 2; /* MODIFIED - Move date text after buttons */
    flex-grow: 1; /* Allow date text to take remaining space */
}

.notepad-day-group h4.today {
    color: var(--stage-color-execute);
    text-shadow: 0 0 5px var(--stage-color-execute);
}

.notepad-header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 1; /* MODIFIED - Move buttons before date text */
    margin-left: auto; /* Push '+' button to the right */
}

.add-note-for-day-btn {
    background: none;
    border: 1px solid var(--modal-input-border);
    color: var(--modal-secondary-text);
    font-weight: bold;
    font-size: 1.2em;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 22px;
    padding: 0;
    transition: all 0.2s;
    order: 3; /* MODIFIED - Ensure '+' is after the task count */
}

.add-note-for-day-btn:hover {
    background-color: var(--modal-input-bg);
    color: #fff;
    border-color: var(--stage-color-create);
}

.notepad-task-filter-btn {
    background-color: var(--stage-color-create);
    color: #fff;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
    order: 1; /* MODIFIED - Ensure task count is first */
    margin-right: 5px; /* Add space between count and date */
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.notepad-task-filter-btn.glow-red {
    box-shadow: 0 0 6px #ff3d7f, 0 0 10px #ff3d7f;
    background-color: #ff3d7f; 
}

.notepad-task-filter-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.2); 
}

.notepad-notes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 10px; /* Drop target for empty days */
}

.notepad-empty-day {
    min-height: 10px;
}

.notepad-note-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background-color: var(--modal-input-bg);
    border-radius: 6px;
    border-left: 3px solid var(--modal-input-border);
    cursor: grab;
}

.notepad-note-item.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.note-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.note-status-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
}

.note-priority-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
}

.note-checkbox {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--modal-border-color);
    transition: all 0.2s;
}

.note-status-btn:hover .note-checkbox {
    border-color: var(--stage-color-create);
}

.note-status-btn .check-icon svg {
    width: 18px;
    height: 18px;
    stroke: #3dffaf;
    filter: drop-shadow(0 0 4px #3dffaf);
}

.notepad-note-item.completed {
    opacity: 0.6;
    border-left-color: #3dffaf;
}

.notepad-note-item.completed .note-title,
.notepad-note-item.completed .note-description {
    text-decoration: line-through;
    color: var(--modal-secondary-text);
}

.note-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.note-title, .note-description {
    width: 100%;
    padding: 2px 4px;
    border-radius: 4px;
}

.note-title {
    font-weight: 600;
    font-size: 0.9em;
    min-height: 1.2em;
}

.note-description {
    font-size: 0.85em;
    color: var(--modal-secondary-text);
    min-height: 1.2em;
}

.note-title:focus, .note-description:focus {
    background: rgba(0,0,0,0.2);
    box-shadow: 0 0 0 2px var(--stage-color-execute);
    outline: none;
}

.note-title[contenteditable="true"]:empty::before,
.note-description[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: var(--modal-secondary-text);
    font-style: italic;
    opacity: 0.7;
    pointer-events: none;
}

.note-delete-btn {
    background: none;
    border: none;
    color: var(--modal-secondary-text);
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0;
    transition: all 0.2s;
    margin-left: auto;
}

.notepad-note-item:hover .note-delete-btn {
    opacity: 1;
}

.note-delete-btn:hover {
    color: #e74c3c;
}

/* ===================================================================================
   CHUNK 8: MODALS (GENERAL)
   Base styles for all modal overlays, content wrappers, and close buttons.
   =================================================================================== */
.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.6); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 1000; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s, visibility 0.3s; 
    backdrop-filter: blur(5px);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-sizing: border-box;
} 

#manage-current-project-modal { z-index: 1010; }
#workspace-modal { z-index: 99999; } 
#custom-confirm-modal { z-index: 999999 !important; }
#help-modal { z-index: 1020; } 
#edit-project-name-modal, #create-idea-modal { z-index: 1030; } 
#idea-card-modal { z-index: 1040; } 
#user-view-modal, #edit-user-modal { z-index: 1060; } 
#manage-presets-modal, #ship-it-modal, #launch-settings-modal { z-index: 1090; }
#shipped-sprints-modal { z-index: 10100; }
#manage-teams-modal { z-index: 1200; } /* Forces the manage teams tool to the top */
#hub-modal { z-index: 10000; padding: 0 !important; }

.modal-overlay.active { 
    opacity: 1; 
    visibility: visible; 
} 

.modal-content { 
    background-color: var(--modal-bg); 
    color: var(--modal-text); 
    padding: 0; 
    border-radius: 10px; 
    width: auto; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.5); 
    position: relative; 
    max-height: 90vh; 
    display: flex; 
    flex-direction: column; 
    border-top: 4px solid transparent; 
} 

.modal-content-padded { 
    padding: 25px; 
    overflow-y: auto; 
} 

#help-modal .modal-content-padded p { 
    line-height: 1.6; 
} 

.modal-content-padded h2, .modal-content-padded h3 { 
    margin-top: 0; 
    padding-bottom: 10px; 
    border-bottom: 1px solid var(--modal-border-color);
} 

#help-modal .modal-content {
    max-width: 900px;
}
#help-modal .modal-content-padded {
    max-width: 560px;
}
#help-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.help-title-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.help-audio-player {
    margin-bottom: 16px;
}
.help-play-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.2s;
    font-family: var(--font-family);
}
.help-play-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}
.help-play-btn.playing {
    background: rgba(var(--stage-color-create-rgb), 0.15);
    border-color: var(--stage-color-create);
    color: var(--stage-color-create);
}
.help-play-btn svg { flex-shrink: 0; }

.modal-content-padded h3 {
    font-size: 1em;
    margin: 16px 0 8px;
    color: var(--text-color);
    opacity: 0.85;
}
.modal-content-padded ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}
.modal-content-padded li {
    font-size: 0.9em;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin-bottom: 6px;
}
.modal-content-padded li strong {
    color: var(--text-color);
}
.help-cta {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(var(--stage-color-create-rgb), 0.08);
    border-left: 3px solid var(--stage-color-create);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-color);
}

.modal-content-padded h3 { 
    font-size: 1.1em; 
    border-bottom: none; 
    padding-bottom: 5px; 
}

.modal-close-btn {
    display: none; /* Hidden on desktop */
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s ease;
}

.modal-close-btn svg {
    width: 24px;
    height: 24px;
    stroke: var(--stage-color-create);
    transition: all 0.2s ease;
    filter: none;
}

.modal-close-btn:hover svg {
    stroke: #fff;
    transform: scale(1.15);
}

.modal-theme-create .modal-content { 
    border-top-color: var(--stage-color-create); 
    background: linear-gradient(to bottom, rgba(var(--stage-color-create-rgb), 0.2), var(--modal-bg) 60%); 
}
.modal-theme-define .modal-content { 
    border-top-color: var(--stage-color-define); 
    background: linear-gradient(to bottom, rgba(var(--stage-color-define-rgb), 0.2), var(--modal-bg) 60%); 
}
.modal-theme-task .modal-content { 
    border-top-color: var(--stage-color-task); 
    background: linear-gradient(to bottom, rgba(var(--stage-color-task-rgb), 0.2), var(--modal-bg) 60%); 
}
.modal-theme-execute .modal-content { 
    border-top-color: var(--stage-color-execute); 
    background: linear-gradient(to bottom, rgba(var(--stage-color-execute-rgb), 0.2), var(--modal-bg) 60%); 
}
.modal-theme-deliver .modal-content { 
    border-top-color: var(--stage-color-deliver); 
    background: linear-gradient(to bottom, rgba(var(--stage-color-deliver-rgb), 0.2), var(--modal-bg) 60%); 
}

/* ===================================================================================
   CHUNK 9: MODALS (SPECIFIC)
   Styles for all individual modals (Sprint Card, Profile, Settings, etc.)
   =================================================================================== */

/* --- ID Card (Profile, User View, Edit User) --- */
.id-card { 
    display: flex; 
    width: 500px; 
    background-color: var(--modal-card-bg); 
    border-radius: 10px; 
    overflow: hidden; 
    border: 1px solid var(--modal-border-color); 
    border-top-width: 4px; 
    border-top-style: solid; 
    transition: border-top-color 0.3s; 
} 

.id-card-left { 
    flex-basis: 45%; 
    background-color: #333; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 20px; 
    border-right: 1px solid var(--modal-border-color); 
    position: relative; 
} 

.id-card-portrait-status { 
    display: none; 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    font-size: 0.7em; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: var(--stage-color-create); 
    text-shadow: 0 0 5px var(--stage-color-create); 
} 

.id-card-logo { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    height: 24px; 
    opacity: 0.7; 
} 

.id-card-photo { 
    width: 156px; 
    height: 156px; 
    border: 4px solid #444; 
    object-fit: cover; 
    border-radius: 8px; 
    overflow: hidden; 
    background-color: #222;
} 

.id-card-photo .avatar-shape { 
    border-radius: unset !important; 
} 

.id-card-photo-editable { 
    cursor: pointer; 
} 

.id-card-right { 
    flex-basis: 55%; 
    padding: 20px 30px; 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
} 

.id-card-header { 
    text-align: center; 
    border-bottom: 1px solid var(--modal-border-color); 
    padding-bottom: 8px; 
    margin-bottom: 12px; 
} 

.id-card-project-name { 
    font-size: 0.9em; 
    font-weight: bold; 
    color: var(--stage-color-create); 
    transition: color 0.3s; 
} 

.id-card-title { 
    font-size: 0.75em; 
    color: var(--modal-secondary-text); 
    text-transform: uppercase; 
    font-weight: bold; 
} 

.id-card-details { 
    flex-grow: 1;
} 

.id-card-details .input-group, .id-card-details .info-group { 
    margin-bottom: 8px; 
} 

.id-card-details label, .id-card-details .info-label { 
    font-size: 0.7em; 
    color: var(--modal-secondary-text); 
    margin-bottom: 2px; 
    text-transform: uppercase; 
} 

.id-card-details input, 
.id-card-details select, 
.id-card-details .info-text, 
.sidebar-value select, 
.sidebar-value input { 
    background-color: var(--modal-input-bg); 
    border: 1px solid var(--modal-input-border); 
    border-radius: 5px; 
    color: var(--modal-text); 
    padding: 10px; 
    font-size: 0.9em; 
    width: 100%; 
    box-sizing: border-box; 
    font-family: var(--font-family); 
} 

.id-card-details textarea { 
    background-color: var(--modal-input-bg); 
    border: 1px solid var(--modal-input-border); 
    border-radius: 5px; 
    color: var(--modal-text); 
    padding: 10px; 
    font-size: 0.9em; 
    width: 100%; 
    box-sizing: border-box; 
    min-height: 80px; 
    resize: vertical; 
    font-family: var(--font-family); 
} 

.id-card-details input[disabled] { 
    background-color: #333; 
    opacity: 0.7; 
    cursor: not-allowed; 
} 

.id-card-details .info-text { 
    background: transparent; 
    border: none; 
    padding: 6px 0; 
    font-weight: bold; 
} 

.id-card-actions { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    width: 100%; 
    margin-top: 10px; 
} 

.message-btn { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
} 

.message-btn svg { 
    width: 18px; 
    height: 18px; 
    stroke-width: 2; 
}

/* --- Settings Menu --- */
#settings-menu { 
    background-color: var(--modal-bg); 
    border-radius: 10px; 
    padding: 10px; 
    list-style: none; 
    margin: 0; 
    width: 250px; 
} 

#settings-menu li { 
    padding: 18px 15px; 
    cursor: pointer; 
    border-radius: 5px; 
    transition: background-color 0.2s; 
    font-weight: 500; 
    margin-bottom: 5px; 
} 

#settings-menu li:last-child { 
    margin-bottom: 0; 
} 

#settings-menu li:hover { 
    background-color: #444; 
} 

#settings-menu li.disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
} 

#settings-menu li.disabled:hover { 
    background-color: transparent; 
}
#settings-menu .menu-plan-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 10px 15px 10px; margin-bottom: 4px; line-height: 1.25;
} 

/* --- Avatar Selection Modal --- */
#avatar-selection-modal .modal-content-padded { 
    max-width: 80vw; 
    max-height: 80vh; 
} 

.avatar-grid-container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 

.avatar-grid { 
    display: grid; 
    grid-template-rows: repeat(2, 1fr); 
    grid-auto-flow: column; 
    grid-auto-columns: 120px; 
    gap: 20px; 
    overflow-x: auto; 
    padding: 10px; 
    width: 100%; 
    scrollbar-width: thin; 
    scrollbar-color: #555 var(--modal-bg); 
} 

.avatar-grid::-webkit-scrollbar { 
    height: 8px; 
} 

.avatar-grid::-webkit-scrollbar-track { 
    background: var(--modal-bg); 
} 

.avatar-grid::-webkit-scrollbar-thumb { 
    background-color: #555; 
    border-radius: 4px; 
} 

.avatar-option { 
    width: 120px; 
    height: 120px; 
    cursor: pointer; 
    border: 4px solid transparent; 
    transition: all 0.2s; 
    padding: 5px; 
} 

.avatar-option .avatar-shape { 
    border-radius: 8px !important; 
} 

.avatar-option:hover { 
    border-color: #777; 
} 

.avatar-option.selected { 
    border-color: var(--stage-color-create); 
} 

.upload-btn { 
    background-color: #444; 
    color: var(--text-color); 
    border: 2px dashed #666; 
    padding: 15px; 
    border-radius: 8px; 
    text-align: center; 
    cursor: pointer; 
    font-weight: bold; 
    margin-top: 15px; 
    width: 100%; 
} 

.upload-btn:hover { 
    background-color: #555; 
    border-color: var(--stage-color-create); 
} 

/* --- Themes Modal --- */
#themes-modal .modal-content-padded { 
    max-width: 80vw; 
} 

#theme-categories-container { 
    display: flex; 
    gap: 30px; 
} 

.theme-category { 
    flex: 1; 
} 

.theme-category h3 { 
    margin-top: 0; 
    padding-bottom: 10px; 
    border-bottom: 1px solid var(--modal-border-color); 
    font-size: 1.1em; 
} 

.theme-swatches { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 15px; 
} 

.theme-option { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    cursor: pointer; 
    padding: 10px; 
    border-radius: 8px; 
    border: 2px solid transparent; 
    transition: background-color 0.3s, border-color 0.3s; 
} 

.theme-option:hover { 
    background-color: #444; 
} 

.theme-option.selected { 
    border-color: var(--stage-color-create); 
    background-color: #3a3a3a; 
} 

.swatch { 
    display: flex; 
    overflow: hidden; 
    border-radius: 8px; 
    width: 100px; 
    height: 60px; 
} 

.swatch-color { 
    width: 20%; 
    height: 100%; 
} 

.theme-name { 
    margin-top: 10px; 
    font-weight: bold; 
    font-size: 0.9em; 
} 

#theme-lock-container { 
    display: none; 
    align-items: center; 
    gap: 12px; 
    padding-bottom: 15px; 
    margin-bottom: 15px; 
    border-bottom: 1px solid var(--modal-border-color); 
} 

/* --- Manage Projects Modal --- */
.project-cards { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 14px; 
    padding-bottom: 15px; 
} 

.project-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    cursor: pointer; 
    padding: 14px 10px 12px; 
    border-radius: 12px; 
    border: 2px solid transparent; 
    transition: background-color 0.2s, border-color 0.2s; 
    position: relative;
} 

.project-card:hover { 
    background-color: rgba(255,255,255,0.05); 
} 

.project-card.active { 
    border-color: var(--stage-color-create); 
    background-color: rgba(255,255,255,0.04); 
} 

.pc-portrait {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 8px;
}
.pc-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pc-portrait-letter {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    font-weight: 800;
    color: #fff;
}
.pc-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
}
.pc-name {
    font-weight: 700;
    font-size: 0.85em;
    color: var(--text-color);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.pc-role {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pc-menu-wrapper {
    position: absolute;
    top: 6px;
    right: 6px;
}
.pc-menu-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.project-card:hover .pc-menu-btn { opacity: 1; }
.pc-menu-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pc-menu-popover {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--modal-card-bg, #2a2a2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 140px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.pc-menu-popover.active { display: block; }
.pc-menu-item {
    padding: 8px 14px;
    font-size: 0.82em;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.pc-menu-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pc-menu-danger { color: #e74c3c; }
.pc-menu-danger:hover { background: rgba(231,76,60,0.15); color: #e74c3c; }
.pc-add-card { border: 2px dashed rgba(255,255,255,0.1); }
.pc-add-card:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); } 

/* --- Manage Current Project Modal --- */
#manage-current-project-modal .modal-content {
    border-top-color: var(--stage-color-create);
}

#manage-current-project-modal .modal-content-padded { 
    width: 600px; 
    padding: 25px 30px; 
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(var(--stage-color-create-rgb), 0.15), var(--modal-bg) 60%);
} 

#manage-current-project-modal h2 {
    color: var(--stage-color-create);
    text-shadow: 0 0 8px rgba(var(--stage-color-create-rgb), 0.5);
    margin-bottom: 25px;
}

#manage-current-project-modal .form-group {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

#manage-current-project-modal .form-group h3 {
    margin-top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 1.1em;
}

#manage-current-project-modal .form-group > label {
    color: var(--modal-secondary-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75em;
    margin-bottom: 8px;
    display: block;
}

.current-members-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid rgba(255,255,255,0.1); 
    padding-bottom: 10px; 
    margin-bottom: 15px; 
} 

.current-members-header h3 { 
    border: none !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}

#member-search { 
    width: 30%; 
    max-width: 200px;
    margin-left: auto;
} 

#project-name-editor { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 1.2em; 
} 

#project-name-editor span { 
    font-weight: bold; 
} 

#invite-form { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr auto; 
    gap: 10px; 
    margin-top: 15px; 
    align-items: center;
} 

#invite-form input, #create-idea-modal input {
    background-color: var(--modal-input-bg);
    border: 1px solid var(--modal-input-border);
    border-radius: 5px;
    color: var(--modal-text);
    padding: 10px;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-family);
}

.seats-info { 
    margin-top: 10px; 
    text-align: right; 
    color: var(--modal-secondary-text); 
} 

.participant-list { 
    max-height: 250px; 
    overflow-y: auto; 
    margin: 15px 0; 
} 

.participant-item { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 10px; 
    padding: 8px; 
    border-radius: 5px; 
} 

.participant-item:not(:last-child) { 
    border-bottom: 1px solid var(--modal-border-color); 
} 

.participant-item-info { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-grow: 1; 
    cursor: pointer; 
    overflow: hidden; 
} 

.member-details { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
} 

.member-name { 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    gap: 4px; 
} 

.member-email, .member-role { 
    font-size: 0.8em; 
    color: var(--modal-secondary-text); 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden;
} 

/* --- Edit Project Name Modal --- */
#edit-project-name-modal .modal-content { 
    width: 400px; 
} 
#edit-project-name-modal input {
    background-color: var(--modal-input-bg);
    border: 1px solid var(--modal-input-border);
    border-radius: 5px;
    color: var(--modal-text);
    padding: 10px;
    font-size: 0.9em;
    width: 100%;
    box-sizing: border-box;
}

/* --- Create Idea (Sprint) Modal --- */
#create-idea-modal .modal-content { 
    width: 500px; 
} 

#create-idea-modal .modal-content-padded { 
    background: linear-gradient(to bottom, rgba(var(--stage-color-create-rgb), 0.35), var(--modal-bg) 70%); 
} 

#create-idea-modal.modal-theme-create .modal-content { 
    border-top-color: var(--stage-color-create); 
} 

#create-idea-modal.modal-theme-create h2 { 
    color: var(--stage-color-create); 
    text-shadow: 0 0 8px var(--stage-color-create); 
} 

#create-idea-modal.modal-theme-create .action-btn[type="submit"] { 
    background-color: var(--stage-color-create); 
    box-shadow: 0 0 8px var(--stage-color-create); 
}

#create-idea-modal textarea, #add-bulletpoint-form textarea { 
    background-color: var(--modal-input-bg); 
    border: 1px solid var(--modal-input-border); 
    border-radius: 5px; 
    color: var(--modal-text); 
    padding: 10px; 
    font-size: 0.9em; 
    width: 100%; 
    box-sizing: border-box; 
    min-height: 80px; 
    resize: vertical; 
    font-family: var(--font-family); 
}

/* --- Help Modal --- */
#help-modal.modal-theme-create h2, #create-idea-modal.modal-theme-create h2, #manage-teams-modal.modal-theme-create h2 { 
    color: var(--stage-color-create); 
    text-shadow: 0 0 8px var(--stage-color-create); 
}
#help-modal.modal-theme-define h2, #manage-teams-modal.modal-theme-define h2 { 
    color: var(--stage-color-define); 
    text-shadow: 0 0 8px var(--stage-color-define); 
}
#help-modal.modal-theme-task h2, #manage-teams-modal.modal-theme-task h2 { 
    color: var(--stage-color-task); 
    text-shadow: 0 0 8px var(--stage-color-task); 
}
#help-modal.modal-theme-execute h2, #manage-teams-modal.modal-theme-execute h2 { 
    color: var(--stage-color-execute); 
    text-shadow: 0 0 8px var(--stage-color-execute); 
}
#help-modal.modal-theme-deliver h2, #manage-teams-modal.modal-theme-deliver h2 { 
    color: var(--stage-color-deliver); 
    text-shadow: 0 0 8px var(--stage-color-deliver); 
}

/* --- Idea Card (Sprint Detail) Modal --- */
#idea-card-modal .modal-content {
    width: 95vw;
    max-width: 900px;
    height: auto;
    max-height: 96vh;
    border-radius: 12px;
}

.idea-card-header { 
    display: flex; 
    gap: 15px; 
    padding: 25px; 
    border-bottom: 1px solid var(--modal-border-color); 
    flex-shrink: 0; 
    position: relative; 
    z-index: 10; 
    background: transparent; 
} 

.idea-card-main { 
    flex-grow: 1; 
    position: relative; 
}

#idea-card-modal .idea-card-main h2, 
#card-description-display {
    margin: 0 0 2px;
    font-size: 2em; /* Bumped up from 1.5em to make the title much larger */
    color: #fff;
    text-shadow: none;
    padding: 5px;
    border-radius: 4px;
    white-space: pre-wrap; 
    word-break: break-word; 
    line-height: 1.2; /* Keeps the text nice and tight if it wraps to a second line */
}

#card-description-display { 
    font-size: 1.0em; /* Made text several pixels larger for visibility */
    color: var(--modal-secondary-text); 
    min-height: 1.2em; 
}

/* --- NEW STYLES FOR SECTION TITLES & TOP-LEFT ASSIGNEES --- */
.section-title { 
    font-size: 0.85em; 
    color: var(--active-stage-color); /* Dynamically matches the active column color! */
    text-transform: uppercase; 
    margin: 0 0 8px 0; 
    letter-spacing: 1px; 
}

.tasks-separator {
    margin: 15px 20px 0 20px; /* Pushes the left edge in to align perfectly with the description */
    padding-top: 15px; /* Adds breathing room between the line and the Tasks title */
    border-top: 1px solid var(--modal-border-color); /* Creates the thin line BEFORE the title */
    border-bottom: none; /* Removes the old line */
}

.tasks-separator .section-title {
    margin: 0;
    padding-bottom: 0;
}

.top-left-assignees {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px; /* Increased again to perfectly center the title block */
}

/* --- NEW: FAINT TITLE LABEL --- */
.tiny-title-label {
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.4); /* Faint, semi-transparent white */
    text-transform: uppercase;
    font-weight: bold;
    padding-left: 5px; /* Aligns perfectly with the left edge of the main title text */
    margin-bottom: -2px; /* Tucks it tightly above the title */
    letter-spacing: 1px;
}

.top-left-assignees label {
    font-size: 0.8em; /* Bumped up to match the Status title visually */
    color: var(--modal-secondary-text);
    font-weight: bold;
    margin: 0;
}

.top-left-assignees .sidebar-value {
    min-height: auto;
    padding: 0;           
    background: none;     
    border: none;         
    box-shadow: none;     
}

.top-left-assignees .sidebar-assignee-item {
    font-size: 0.9em;     /* Made name slightly larger */
    gap: 6px;
}

.top-left-assignees .user-bubble {
    width: 22px !important;  /* Slightly larger avatar bubble */
    height: 22px !important;
    border-width: 1px;
}

.top-left-assignees .add-assignee-btn {
    width: 18px;
    height: 18px;
    font-size: 14px;
}

#idea-card-modal .idea-card-main [contenteditable="true"]:focus,
#card-description-display[contenteditable="true"]:focus {
    box-shadow: 0 0 0 2px var(--stage-color-execute);
    background: rgba(0,0,0,0.2);
    outline: none;
    white-space: pre-wrap !important;
}

/* Indicate that text is editable on hover */
.bulletpoint-title:hover, .bulletpoint-content:hover, #card-title-display:hover, #card-description-display:hover {
    background-color: rgba(255, 255, 255, 0.05);
    cursor: text;
}

.idea-card-main p { 
    font-size: 0.85em; 
    margin: 0; 
    color: var(--modal-secondary-text); 
}

.idea-card-sidebar { 
    flex-shrink: 0; 
    width: 160px;  
    padding-left: 20px; 
    padding-top: 5px; /* Pushed down an extra 2px to drop Status and Priority */
    border-left: 1px solid var(--modal-border-color); 
}

/* --- NEW: INLINE LAYOUT FOR DATES --- */
.sidebar-item-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}

.sidebar-item + .sidebar-item-inline {
    margin-top: -2px; /* Absorbs the drop so Dates stay exactly where they were */
}

.sidebar-item-inline label {
    font-size: 0.75em; /* Perfectly matched size */
    color: var(--modal-secondary-text);
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
}

/* --- DUE DATE COUNTDOWN --- */
.sidebar-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7em;
    color: var(--modal-secondary-text);
    margin-top: -4px; /* Pulls it tight underneath the Due Date */
    margin-bottom: 10px; /* Gives space before the Ship It button */
}

.sidebar-countdown span {
    font-style: italic;
}

.sidebar-countdown .status-indicator {
    margin: 0; /* Ensures the warning dot aligns perfectly with the countdown text */
}

/* Fix for the proximity light overlapping the date */
.sidebar-date-clean .status-indicator {
    margin-left: 4px; /* Pushes the light to the right slightly */
    margin-right: 0;
}

/* Restored sidebar item and added extra space before the Created Date */
.sidebar-item { 
    margin-bottom: 14px; 
    position: relative; 
    cursor: pointer;
} 

.sidebar-item label { 
    font-size: 0.7em; 
    color: var(--modal-secondary-text); 
    text-transform: uppercase; 
    display: block; 
    margin-bottom: 4px; /* Pushed the field box 2 pixels down from the title */
    font-weight: bold; 
}

.sidebar-value { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    padding: 6px 8px; /* Tighter padding inside the box */
    border-radius: 6px; 
    transition: background-color 0.2s, border-color 0.2s; 
    min-height: 28px; /* Smaller overall box */
    font-size: 0.8em; /* Smaller text inside the box */
    width: 100%; 
    box-sizing: border-box; 
    border: 1px solid var(--modal-input-border); 
    background-color: var(--modal-input-bg); 
    pointer-events: none; 
}

//* --- CLEAN TEXT DATES FOR SIDEBAR --- */
.sidebar-date-clean {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8em; 
    color: var(--modal-secondary-text);
}

#card-due-date-wrapper.sidebar-date-clean {
    color: #fff; /* Makes the due date pop visually */
    font-weight: 600;
    cursor: pointer;
}

#card-due-date-wrapper.sidebar-date-clean:hover {
    text-shadow: 0 0 5px rgba(255,255,255,0.5); /* Nice subtle glow on hover */
}

.sidebar-item:hover .sidebar-value { 
    background-color: #2c2c2c; 
    border-color: #666; 
}

.sidebar-value .user-bubble { 
    width: 20px; 
    height: 20px; 
} 

.sidebar-value select, .sidebar-value input { 
    padding: 4px; 
    font-size: 0.8em; 
} 

.idea-card-footer-meta { 
    margin-top: 8px; 
    padding-top: 6px; 
    border-top: 1px solid var(--modal-border-color); 
    font-size: 0.75em; 
    color: var(--modal-secondary-text); 
} 

.meta-date-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer; 
    padding: 2px 4px; 
    border-radius: 4px; 
} 

.meta-date-item:hover { 
    background-color: rgba(255, 255, 255, 0.05); 
} 

.meta-date-item:last-child { 
    margin-top: 2px; 
}

.idea-card-body { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    overflow: hidden; 
}

.idea-card-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#card-description-wrapper {
    padding: 20px 20px 0 20px;
    flex-shrink: 0;
}

#bulletpoints-container { 
    padding: 10px 20px 20px 20px; 
}

.bulletpoint-item { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    padding: 12px 12px 12px 14px; 
    border-radius: 0 8px 8px 0; 
    margin-bottom: 15px; 
    position: relative; 
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.bulletpoint-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    border-radius: 8px 0 0 8px;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.modal-theme-create .bulletpoint-item::before, .ticket-theme-CREATE .bulletpoint-item::before, .bulletpoint-item.ticket-theme-CREATE::before { background: var(--stage-color-create); }
.modal-theme-define .bulletpoint-item::before, .ticket-theme-DEFINE .bulletpoint-item::before, .bulletpoint-item.ticket-theme-DEFINE::before { background: var(--stage-color-define); }
.modal-theme-task .bulletpoint-item::before, .ticket-theme-TASK .bulletpoint-item::before, .bulletpoint-item.ticket-theme-TASK::before { background: var(--stage-color-task); }
.modal-theme-execute .bulletpoint-item::before, .ticket-theme-EXECUTE .bulletpoint-item::before, .bulletpoint-item.ticket-theme-EXECUTE::before { background: var(--stage-color-execute); }
.modal-theme-deliver .bulletpoint-item::before, .ticket-theme-DELIVER .bulletpoint-item::before, .bulletpoint-item.ticket-theme-DELIVER::before { background: var(--stage-color-deliver); }

/* ===================================================================================
   LAUNCHPAD — DELIVER stage UI
   Uses white-based rgba for structure (deliver color is darkest in palette)
   and deliver color for text/icon accents only.
   =================================================================================== */
.launchpad-section {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    margin: 15px 0 0 0;
    padding: 18px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 0 20px rgba(var(--stage-color-create-rgb), 0.08);
}
.launchpad-header {
    font-size: 0.95em;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 12px var(--stage-color-deliver), 0 0 30px var(--stage-color-deliver);
}
.launchpad-header svg { width: 20px; height: 20px; stroke: #fff; filter: drop-shadow(0 0 8px var(--stage-color-deliver)) drop-shadow(0 0 18px var(--stage-color-deliver)); }
.launchpad-items { display: flex; flex-direction: column; gap: 10px; }
.launchpad-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.launchpad-item:hover {
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 0 14px rgba(var(--stage-color-create-rgb), 0.1);
    background: rgba(255,255,255,0.08);
}
.launchpad-item-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: #fff;
    filter: drop-shadow(0 0 6px var(--stage-color-deliver)) drop-shadow(0 0 14px var(--stage-color-deliver));
}
.launchpad-item-icon svg { width: 22px; height: 22px; }
.launchpad-item-body { flex: 1; min-width: 0; }
.launchpad-item-text {
    font-size: 0.9em;
    line-height: 1.6;
    color: #fff;
    word-break: break-word;
    white-space: pre-wrap;
}
.launchpad-item-text:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,0.4);
}
.launchpad-item-url {
    font-size: 0.8em;
    color: var(--stage-color-deliver);
    word-break: break-all;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.launchpad-item-url a { color: var(--stage-color-deliver); text-decoration: none; text-shadow: 0 0 8px var(--stage-color-deliver); }
.launchpad-item-url a:hover { text-decoration: underline; }
.launchpad-item-desc {
    font-size: 0.9em;
    color: #fff;
    line-height: 1.5;
}
.launchpad-item-desc:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,0.35);
}
.launchpad-item-field {
    font-size: 0.9em;
    line-height: 1.5;
    color: #fff;
    word-break: break-word;
    white-space: pre-wrap;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.14);
    margin-bottom: 8px;
    background: rgba(255,255,255,0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.launchpad-item-field:focus {
    outline: none;
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 0 12px rgba(var(--stage-color-create-rgb), 0.15);
    background: rgba(255,255,255,0.06);
}
.launchpad-item-field:empty::before {
    content: attr(data-placeholder);
    color: rgba(255,255,255,0.4);
}
.launchpad-item-field[data-lp-field="url"] {
    font-size: 0.85em;
    color: #00d4ff;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
.launchpad-item-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-size: 1.2em;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}
.launchpad-item-menu:hover { color: #fff; background: rgba(255,255,255,0.1); }
.launchpad-add-btns {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.launchpad-add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 10px rgba(var(--stage-color-create-rgb), 0.1);
}
.launchpad-add-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 0 20px rgba(var(--stage-color-create-rgb), 0.2);
}
.launchpad-add-btn svg { width: 16px; height: 16px; color: var(--stage-color-deliver); filter: drop-shadow(0 0 5px var(--stage-color-deliver)); }
.launchpad-empty {
    text-align: center;
    padding: 24px 10px;
    color: rgba(255,255,255,0.35);
    font-size: 0.85em;
    font-style: italic;
}
/* Launchpad item context menu */
.lp-context-menu {
    position: absolute;
    top: 30px;
    right: 6px;
    background: var(--modal-bg);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 4px 0;
    z-index: 100;
    min-width: 110px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.lp-context-menu li {
    padding: 8px 14px;
    font-size: 0.82em;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    list-style: none;
}
.lp-context-menu li:hover { background: rgba(255,255,255,0.06); }
.lp-context-menu li.danger-text { color: #e74c3c; }

/* --- LAUNCH BUTTON AREA (bottom of idea-card in DELIVER stage) --- */
#launch-btn-area {
    padding: 15px 20px 22px;
    text-align: center;
}
#launch-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    margin-bottom: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    transition: color 0.2s;
}
#launch-settings-btn:hover { color: #fff; }
#launch-settings-btn svg { width: 14px; height: 14px; }
#launch-btn {
    display: block;
    width: 100%;
    padding: 20px 20px;
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    border: 1px solid rgba(231, 76, 60, 0.5);
    border-radius: 10px;
    background: rgba(231, 76, 60, 0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
    box-shadow: 0 0 16px rgba(231, 76, 60, 0.15);
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}
#launch-btn:hover {
    background: rgba(231, 76, 60, 0.25);
    border-color: rgba(231, 76, 60, 0.7);
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.25), 0 0 60px rgba(231, 76, 60, 0.1);
    text-shadow: 0 0 14px rgba(231, 76, 60, 0.8), 0 0 30px rgba(231, 76, 60, 0.4);
}

/* GENTLE FOCUS MODE: Dim collapsed items if any item is currently expanded */

/* ===================================================================================
   LAUNCH SETTINGS MODAL
   =================================================================================== */
#launch-settings-modal .modal-content { border-top-color: var(--stage-color-deliver); background: linear-gradient(to bottom, rgba(var(--stage-color-deliver-rgb), 0.15), var(--modal-bg) 60%); }
#launch-settings-modal h2 { color: var(--stage-color-deliver); text-shadow: 0 0 8px var(--stage-color-deliver); }
.ls-toggles { display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
.ls-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 6px;
}
.ls-toggle-label {
    font-size: 0.9em;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: color 0.2s;
}
.ls-toggle-label:hover { color: #fff; }
.ls-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 10px 0 12px; }
.ls-info-block {
    margin: 0 0 10px 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(var(--stage-color-deliver-rgb), 0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.84em;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}
.ls-info-block .ls-info-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--stage-color-deliver);
    margin-bottom: 10px;
    font-size: 0.95em;
}
.ls-info-block .ls-info-title .cue-icon-inline { width: 14px; height: 14px; }
.ls-info-block .ls-info-heading {
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    margin-top: 8px;
    margin-bottom: 2px;
    font-size: 0.92em;
}
.ls-info-block .ls-info-heading:first-of-type { margin-top: 0; }

/* ===================================================================================
   LAUNCH COUNTDOWN + STATUS
   =================================================================================== */
#launch-btn.launching {
    animation: launchPulse 0.6s ease-in-out infinite;
    pointer-events: none;
    font-size: 2em;
    padding: 24px 20px;
    letter-spacing: 8px;
    text-shadow: 0 0 20px rgba(231, 76, 60, 0.9), 0 0 40px rgba(231, 76, 60, 0.5);
}
@keyframes launchPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(231, 76, 60, 0.2); opacity: 1; }
    50% { box-shadow: 0 0 40px rgba(231, 76, 60, 0.45), 0 0 80px rgba(231, 76, 60, 0.2); opacity: 0.85; }
}
#launch-abort-area { text-align: center; margin-bottom: 8px; }
#launch-abort-btn {
    background: transparent;
    border: 1px solid rgba(231, 76, 60, 0.4);
    color: #e74c3c;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
#launch-abort-btn:hover { background: rgba(231,76,60,0.1); border-color: rgba(231,76,60,0.6); }
#launch-status-area {
    text-align: center;
    margin-top: 10px;
    min-height: 20px;
}
#launch-status-msg {
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e74c3c;
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
    animation: statusFade 0.4s ease-in;
}
@keyframes statusFade {
    0% { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}
#bulletpoints-container:has(.bulletpoint-item:not(.collapsed)) .bulletpoint-item.collapsed {
    opacity: 0.65;
    filter: brightness(0.85);
}

/* Bring full focus back if you hover over a dimmed item */
#bulletpoints-container:has(.bulletpoint-item:not(.collapsed)) .bulletpoint-item.collapsed:hover {
    opacity: 1;
    filter: brightness(1);
}

.bulletpoint-item.collapsed .bulletpoint-collapsible-content { 
    display: none; 
}

/* Lock the title when collapsed so mobile users can drag without opening the keyboard */
@keyframes bpBlinkRed {
    0%, 100% { box-shadow: none; }
    25% { box-shadow: 0 0 12px rgba(231,76,60,0.7), inset 0 0 8px rgba(231,76,60,0.15); }
    50% { box-shadow: none; }
    75% { box-shadow: 0 0 12px rgba(231,76,60,0.7), inset 0 0 8px rgba(231,76,60,0.15); }
}
.bp-blink-red {
    animation: bpBlinkRed 1.5s ease;
    border-radius: 6px;
    border: 1px solid rgba(231,76,60,0.5) !important;
}

.bulletpoint-item.dragging { 
    opacity: 0.4; 
}
.bulletpoint-item.drag-over-indicator { 
    box-shadow: 0 2px 0 0 #368de6; 
}

.bulletpoint-item.completed { 
    opacity: 0.5; 
    transition: opacity 0.3s;
}
.bulletpoint-item.completed:hover {
    opacity: 0.8; /* Brightens up slightly when you hover over it */
}
.bulletpoint-item.completed .bulletpoint-title { 
    text-decoration: none;
    color: var(--stage-color-create);
}
.bulletpoint-item.completed .check-icon svg {
    stroke: #3dffaf;
    filter: drop-shadow(0 0 4px #3dffaf) drop-shadow(0 0 8px #3dffaf);
}

.bulletpoint-item.ticket-theme-CREATE { 
    background-color: rgba(var(--stage-color-create-rgb), 0.1); 
    border: 1px solid rgba(var(--stage-color-create-rgb), 0.3); 
}
.bulletpoint-item.ticket-theme-DEFINE { 
    background-color: rgba(var(--stage-color-define-rgb), 0.1); 
    border: 1px solid rgba(var(--stage-color-define-rgb), 0.3); 
}
.bulletpoint-item.ticket-theme-TASK { 
    background-color: rgba(var(--stage-color-task-rgb), 0.1); 
    border: 1px solid rgba(var(--stage-color-task-rgb), 0.3); 
}
.bulletpoint-item.ticket-theme-EXECUTE { 
    background-color: rgba(var(--stage-color-execute-rgb), 0.1); 
    border: 1px solid rgba(var(--stage-color-execute-rgb), 0.3); 
}
.bulletpoint-item.ticket-theme-DELIVER { 
    background-color: rgba(var(--stage-color-deliver-rgb), 0.1); 
    border: 1px solid rgba(var(--stage-color-deliver-rgb), 0.3); 
}

.notification-item.ticket-theme-CREATE { 
    background-color: rgba(var(--stage-color-create-rgb), 0.15); 
    border-color: rgba(var(--stage-color-create-rgb), 0.5); 
    border-left-color: var(--stage-color-create) !important;
}
.notification-item.ticket-theme-DEFINE { 
    background-color: rgba(var(--stage-color-define-rgb), 0.15); 
    border-color: rgba(var(--stage-color-define-rgb), 0.5); 
    border-left-color: var(--stage-color-define) !important;
}
.notification-item.ticket-theme-TASK { 
    background-color: rgba(var(--stage-color-task-rgb), 0.15); 
    border-color: rgba(var(--stage-color-task-rgb), 0.5); 
    border-left-color: var(--stage-color-task) !important;
}
.notification-item.ticket-theme-EXECUTE { 
    background-color: rgba(var(--stage-color-execute-rgb), 0.15); 
    border-color: rgba(var(--stage-color-execute-rgb), 0.5); 
    border-left-color: var(--stage-color-execute) !important;
}
.notification-item.ticket-theme-DELIVER { 
    background-color: rgba(var(--stage-color-deliver-rgb), 0.15); 
    border-color: rgba(var(--stage-color-deliver-rgb), 0.5); 
    border-left-color: #fff !important;
}

.bulletpoint-header { 
    display: flex;
    align-items: center; 
    gap: 10px; 
    font-size: 0.85em; 
    background-color: rgba(255, 255, 255, 0.06); /* Adds the lighter background tone */
    margin: -12px -12px 8px -12px; /* Pulls it flush to the top and sides of the card */
    padding: 12px; /* Restores the inner spacing */
    border-radius: 8px 8px 0 0; /* Rounds only the top corners to match the card */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Adds a very subtle separator line below it */
}

.bp-creator .user-bubble { 
    width: 24px; 
    height: 24px; 
}

.bp-id { 
    font-weight: bold; 
    color: var(--modal-secondary-text); 
    cursor: pointer; 
}

.bp-id:hover { 
    color: #fff; 
}

.bp-status-selector { 
    cursor: pointer; 
    font-weight: bold; 
    padding: 3px 8px; 
    border-radius: 5px; 
    transition: background-color 0.2s; 
    display: flex; 
    align-items: center;
} 

.bp-status-selector:hover { 
    background-color: rgba(255,255,255,0.1); 
} 

.bp-status-selector .check-icon svg { 
    width: 14px; 
    height: 14px; 
    margin-right: 4px; 
}

.bp-comments-toggle, .bp-due-date { 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    padding: 3px 8px; 
    border-radius: 5px; 
    transition: background-color 0.2s; 
}

.bp-due-date.overdue { 
    color: #e74c3c; 
    font-weight: bold; 
}

.bp-comments-toggle:hover, .bp-due-date:hover { 
    background-color: rgba(255,255,255,0.1); 
}

.bp-due-date input[type="date"],
#card-due-date-display input[type="date"] {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.85em;
    padding: 2px 4px;
    outline: none;
    cursor: pointer;
    color-scheme: dark;
}

.bp-comment-count.unread { 
    color: var(--stage-color-create); 
    font-weight: bold; 
    text-shadow: 0 0 5px var(--stage-color-create); 
}

.bp-comments-toggle.has-comments { 
    color: var(--stage-color-create); 
    font-weight: bold; 
    text-shadow: 0 0 6px var(--stage-color-create); 
}

.bulletpoint-title { 
    font-weight: 700; 
    font-size: 1.4em; 
    padding: 4px 4px 4px 24px; /* Pushes the text to the right to make room for the bullet */
    margin: 8px 0; 
    position: relative;
    white-space: pre-wrap; 
    word-break: break-word; 
}

/* The permanent visual bullet point */
.bulletpoint-title::before {
    content: "•";
    position: absolute;
    left: 6px;
    color: var(--modal-secondary-text);
    font-weight: bold;
}

.bulletpoint-content-wrapper { 
    position: relative; 
}

.bulletpoint-content { 
    font-size: 0.95em; 
    line-height: 1.4; 
    color: #ccc; 
    min-height: 110px; 
    border-radius: 6px; 
    padding: 10px; 
    white-space: pre-wrap; 
    word-break: break-word; 
    transition: all 0.2s ease;
    background: rgba(0,0,0,0.12);
}

/* Style the empty description to look like the comment box */
.bulletpoint-content.is-empty {
    background-color: rgba(0,0,0,0.18);
    border: 1px solid var(--modal-input-border);
    padding: 10px;
    min-height: 110px;
    box-sizing: border-box;
    cursor: text;
}

/* Title Placeholder - Contains both the bullet and the text so the layout doesn't break when empty */
.bulletpoint-title.is-empty::before,
.bulletpoint-title:empty::before {
    content: "•  " attr(data-placeholder);
    color: var(--modal-secondary-text); 
    font-weight: normal; 
    font-style: italic;
    pointer-events: none;
    display: inline-block; 
    position: static;
    margin-left: -18px; /* Pulls the text backwards to align perfectly with the absolute bullet */
}

/* Content Placeholder - Stays absolute because the box already has a min-height */
.bulletpoint-content.is-empty::before {
    content: attr(data-placeholder);
    color: var(--modal-secondary-text);
    font-style: italic;
    pointer-events: none;
    position: absolute;
}

/* --- MODIFIED: Commit button styled exactly like the Comment Send button but retains Stage Colors --- */
.bp-save-content-btn, .bp-save-title-btn, .card-save-btn {
    position: absolute; 
    bottom: -45px; /* Pushes it completely below the text box */
    right: 0;      /* Aligns perfectly to the right edge */
    border: none; 
    color: #fff; 
    padding: 8px 16px; 
    border-radius: 4px; 
    font-size: 0.9em; 
    font-weight: bold; 
    cursor: pointer; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.2s ease; 
    z-index: 10; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Expands the wrapper so the button doesn't overlap the content below it */
.bulletpoint-content-wrapper, .bulletpoint-title-wrapper {
    transition: margin-bottom 0.2s ease;
}

.bulletpoint-content-wrapper.editing, .bulletpoint-title-wrapper.editing,
.card-field-wrapper.editing {
    margin-bottom: 50px; 
}

.bulletpoint-content-wrapper.editing .bp-save-content-btn, 
.bulletpoint-title-wrapper.editing .bp-save-title-btn,
.card-field-wrapper.editing .card-save-btn { 
    opacity: 1; 
    visibility: visible; 
}

.bp-save-content-btn:hover, .bp-save-title-btn:hover, .card-save-btn:hover { 
    filter: brightness(1.15); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.5);
}

/* Inherits the exact color of whatever stage the task is in */
.ticket-theme-CREATE .bp-save-content-btn, .ticket-theme-CREATE .bp-save-title-btn { background: var(--stage-color-create); }
.ticket-theme-DEFINE .bp-save-content-btn, .ticket-theme-DEFINE .bp-save-title-btn { background: var(--stage-color-define); }
.ticket-theme-TASK .bp-save-content-btn, .ticket-theme-TASK .bp-save-title-btn { background: var(--stage-color-task); }
.ticket-theme-EXECUTE .bp-save-content-btn, .ticket-theme-EXECUTE .bp-save-title-btn { background: var(--stage-color-execute); }
.ticket-theme-DELIVER .bp-save-content-btn, .ticket-theme-DELIVER .bp-save-title-btn { background: var(--stage-color-deliver); }
.bulletpoint-content-wrapper.editing .bulletpoint-content { 
    box-shadow: 0 0 0 2px var(--stage-color-execute); 
    background: rgba(0,0,0,0.2); 
    white-space: pre-wrap !important;
}

.bulletpoint-title[contenteditable="true"], .bulletpoint-content[contenteditable="true"] { 
    outline: none; 
}

.bulletpoint-title[contenteditable="true"]:focus { 
    box-shadow: 0 0 0 2px var(--stage-color-execute); 
    border-radius: 4px; 
    background: rgba(0,0,0,0.2); 
    white-space: pre-wrap !important;
}

.bulletpoint-menu-container { 
    position: relative; 
    margin-left: auto; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

.bulletpoint-menu-btn, .bp-expand-btn, .bp-fullscreen-btn, .add-media-btn { 
    background: none; 
    border: none; 
    color: var(--modal-secondary-text); 
    cursor: pointer; 
    padding: 0 5px; 
    transition: all 0.2s; 
}

.bulletpoint-menu-btn:hover, .bp-expand-btn:hover, .bp-fullscreen-btn:hover, .add-media-btn:hover { 
    color: #fff; 
}

.bulletpoint-menu-btn { 
    font-size: 1.2em; 
    font-weight: bold; 
}

.bp-expand-btn svg { 
    transition: transform 0.3s; 
}

.bulletpoint-item.collapsed .bp-expand-btn svg { 
    transform: rotate(-90deg); 
}

.bp-expand-btn svg, .bp-fullscreen-btn svg, .add-media-btn svg { 
    stroke: var(--stage-color-create); 
    filter: drop-shadow(0 0 3px var(--stage-color-create)); 
}

.bp-expand-btn:hover svg, .bp-fullscreen-btn:hover svg, .add-media-btn:hover svg { 
    stroke: #fff; 
    filter: drop-shadow(0 0 5px #fff); 
}

.add-media-btn.has-media svg, .bp-expand-btn.has-content svg { 
    stroke: #fff; 
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px var(--stage-color-create)) drop-shadow(0 0 6px var(--stage-color-create)); 
}

.bulletpoint-menu-popover { 
    display: none; 
    position: absolute; 
    top: 100%; 
    right: 0; 
    background-color: var(--modal-card-bg); 
    border: 1px solid var(--modal-border-color); 
    border-radius: 6px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); 
    z-index: 20; 
    list-style: none; 
    padding: 5px 0; 
    margin: 5px 0 0; 
    width: 140px; 
} 

.bulletpoint-menu-popover.active { 
    display: block; 
} 

.bulletpoint-menu-popover ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.bulletpoint-menu-popover li { 
    padding: 8px 15px; 
    cursor: pointer; 
    font-size: 0.9em; 
} 

.bulletpoint-menu-popover li:hover { 
    background-color: #444; 
}

.bulletpoint-footer { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    padding-top: 8px; 
    font-size: 0.85em; 
}

.add-media-btn { 
    margin-right: auto; 
} 

.add-media-btn svg { 
    width: 18px; 
    height: 18px; 
}

.bulletpoint-media-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-top: 10px; 
}

.media-thumbnail { 
    width: 60px; 
    height: 60px; 
    border-radius: 6px; 
    background-size: cover; 
    background-position: center; 
    position: relative; 
    cursor: pointer; 
    border: 1px solid var(--modal-border-color); 
}

.remove-media-btn { 
    position: absolute; 
    top: -5px; 
    right: -5px; 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: #000; 
    color: #fff; 
    border: 1px solid #fff; 
    font-size: 12px; 
    line-height: 16px; 
    text-align: center; 
    cursor: pointer; 
}

.bulletpoint-group { 
    margin-bottom: 15px; 
    border: 1px solid var(--modal-border-color); 
    border-radius: 8px; 
    overflow: hidden; 
} 

.bulletpoint-group-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 8px 12px; 
    cursor: pointer; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #fff; 
    letter-spacing: 1px; 
    font-size: 0.8em; 
} 

.bulletpoint-group-header.theme-CREATE { background-color: rgba(var(--stage-color-create-rgb), 0.2); } 
.bulletpoint-group-header.theme-DEFINE { background-color: rgba(var(--stage-color-define-rgb), 0.2); } 
.bulletpoint-group-header.theme-TASK { background-color: rgba(var(--stage-color-task-rgb), 0.2); } 
.bulletpoint-group-header.theme-EXECUTE { background-color: rgba(var(--stage-color-execute-rgb), 0.2); } 
.bulletpoint-group-header.theme-DELIVER { background-color: rgba(var(--stage-color-deliver-rgb), 0.2); } 

.bulletpoint-group-body { 
    display: none; 
    padding: 10px; 
    border-top: 1px solid var(--modal-border-color); 
} 

.bulletpoint-group-body.expanded { 
    display: block; 
} 

.bulletpoint-input-area { 
    padding: 15px; 
    border-top: 1px solid var(--modal-border-color); 
    background-color: #202020; 
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-radius: 0 0 12px 12px;
}

#expand-bulletpoint-input { 
    background-color: var(--modal-input-bg); 
    border: 1px solid var(--modal-input-border); 
    color: #fff !important; 
    padding: 12px; 
    border-radius: 8px; 
    text-align: left; 
    cursor: pointer; 
    font-weight: bold; 
    width: 100%; 
    box-sizing: border-box; 
}

.modal-theme-create #expand-bulletpoint-input { 
    background-color: var(--stage-color-create); 
    border-color: var(--stage-color-create-dark); 
    text-shadow: 0 0 5px rgba(0,0,0,0.5); 
}
.modal-theme-define #expand-bulletpoint-input { 
    background-color: var(--stage-color-define); 
    border-color: var(--stage-color-define-dark); 
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}
.modal-theme-task #expand-bulletpoint-input { 
    background-color: var(--stage-color-task); 
    border-color: var(--stage-color-task-dark); 
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}
.modal-theme-execute #expand-bulletpoint-input { 
    background-color: var(--stage-color-execute); 
    border-color: var(--stage-color-execute-dark); 
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.modal-theme-deliver #expand-bulletpoint-input { 
    background-color: var(--stage-color-deliver); 
    border-color: var(--stage-color-deliver-dark); 
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.bulletpoint-comments-section { 
    display: block; 
    margin-top: 0; 
    padding-top: 10px; 
    border-top: none; 
}

.comment { 
    display: flex; 
    gap: 10px; 
    padding-bottom: 12px;
    margin-bottom: 0;
    font-size: 0.9em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.comment:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment .user-bubble { 
    flex-shrink: 0; 
    width: 28px; 
    height: 28px; 
} 

.comment-body { 
    display: flex; 
    flex-direction: column; 
    gap: 4px;
    flex-grow: 1;
}

.comment-header { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 0.8em; 
    color: var(--modal-secondary-text);
    min-height: 28px;
} 

.comment-author { 
    font-weight: bold; 
    color: var(--text-color); 
}

.comment-menu-wrapper {
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}

.reply-menu-wrapper .comment-menu-popover {
    right: 0;
    left: auto;
}

.comment-menu-btn {
    background: transparent;
    border: none;
    color: var(--modal-secondary-text);
    cursor: pointer;
    padding: 2px 6px;
    font-size: 1.1em;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.comment:hover .comment-menu-btn {
    opacity: 1;
}
.comment-menu-popover {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 6px;
    list-style: none;
    margin: 4px 0 0 0;
    padding: 4px 0;
    z-index: 100;
    min-width: 100px;
    display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.comment-menu-popover.active {
    display: block;
}
.comment-menu-popover li {
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--modal-text);
}
.comment-menu-popover li:hover {
    background: rgba(255,255,255,0.05);
}
.comment-menu-popover li.danger-text {
    color: #e74c3c;
}
.comment-text {
    white-space: pre-wrap; 
    word-break: break-word; 
}

.comment-reactions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.comment-reaction-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 3px 8px;
    cursor: pointer;
    color: var(--modal-secondary-text);
    font-size: 0.8em;
    transition: all 0.15s ease;
    position: relative;
}

.comment-reaction-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.comment-reaction-btn.active-up {
    color: #3dffaf;
    border-color: rgba(61, 255, 175, 0.3);
    background: rgba(61, 255, 175, 0.08);
}

.comment-reaction-btn.active-down {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.3);
    background: rgba(231, 76, 60, 0.08);
}

.comment-reaction-btn svg {
    flex-shrink: 0;
}

.reaction-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85em;
    color: var(--text-color);
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    pointer-events: none;
}

.comment-reaction-btn:hover .reaction-tooltip {
    display: block;
}

.comment-reply-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: var(--modal-secondary-text);
    cursor: pointer;
    font-size: 0.8em;
    padding: 3px 6px;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.comment-reply-btn:hover {
    color: var(--text-color);
}

.comment-replies {
    margin-top: 10px;
    padding: 10px 10px 10px 14px;
    border-left: 2px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.2);
    border-radius: 0 6px 6px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-reply {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.comment-reply:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment-reply {
    font-size: 0.88em;
}

.comment-reply-capsule {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 12px;
}

.comment-reply-top {
    display: flex;
    gap: 8px;
}

.reply-reactions {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.comment-reply .user-bubble {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.comment-reply-body {
    flex-grow: 1;
}

.comment-reply-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78em;
    color: var(--modal-secondary-text);
    margin-bottom: 2px;
}

.comment-reply-author {
    font-weight: bold;
    color: var(--text-color);
}

.comment-reply-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-reply-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
    padding-left: 16px;
}

.comment-reply-editor {
    flex-grow: 1;
    background: var(--modal-input-bg);
    border: 1px solid var(--modal-input-border);
    border-radius: 5px;
    color: var(--modal-text);
    padding: 7px 10px;
    font-size: 0.85em;
    min-height: 34px;
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-reply-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--modal-secondary-text);
    font-style: italic;
    pointer-events: none;
}

.comment-reply-editor:focus {
    box-shadow: 0 0 0 2px rgba(var(--stage-color-create-rgb), 0.4);
}

.comment-reply-send-btn {
    background: var(--stage-color-create);
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    font-size: 0.8em;
    padding: 7px 12px;
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 1px;
}

.comment-reply-send-btn:hover {
    filter: brightness(1.15);
}
.comment-form { 
    display: flex; 
    flex-direction: column; 
}

.comment-form .comment-editor { 
    background-color: var(--modal-input-bg); 
    border: 1px solid var(--modal-input-border); 
    border-radius: 5px; 
    color: var(--modal-text); 
    padding: 10px; 
    font-size: 0.9em; 
    width: 100%; 
    box-sizing: border-box; 
    min-height: 40px; 
    margin-bottom: 8px;
    white-space: pre-wrap; 
    word-break: break-word;
    outline: none;
    transition: box-shadow 0.2s;
}

.comment-form .comment-editor:focus {
    box-shadow: 0 0 0 2px var(--stage-color-create); 
    background: rgba(0,0,0,0.2); 
}

.comment-form .comment-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--modal-secondary-text);
    font-style: italic;
    pointer-events: none;
}

/* Account / Plan Cards */
.account-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plan-card {
    background: var(--modal-card-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--modal-border-color, rgba(255,255,255,0.06));
    border-radius: 12px; padding: 20px 16px; display: flex; flex-direction: column;
    position: relative; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.plan-card:hover { border-color: rgba(255,255,255,0.12); }
.plan-card.plan-current { border-color: var(--stage-color-create); box-shadow: 0 0 12px rgba(var(--stage-color-create-rgb, 61,255,175), 0.15); }
.plan-card-accent { height: 3px; border-radius: 3px 3px 0 0; margin: -20px -16px 16px -16px; }
.plan-card-badge {
    position: absolute; top: 12px; right: 12px; font-size: 0.6em; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase; padding: 2px 8px;
    border-radius: 4px; background: rgba(61,255,175,0.15); color: #3dffaf;
}
.plan-popular-tag {
    position: absolute; top: 8px; right: 8px;
    font-size: 0.58em; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 4px; white-space: nowrap;
    background: rgba(230,194,0,0.15); color: #e6c200;
    border: 1px solid rgba(230,194,0,0.2); z-index: 1;
}

/* Billing Toggle */
.billing-toggle-wrap {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: 20px; padding: 12px 0;
}
.billing-label {
    font-size: 0.9em; font-weight: 700; color: rgba(255,255,255,0.3);
    transition: color 0.2s; letter-spacing: 0.5px;
}
.billing-label.billing-active { color: #fff; }
.billing-toggle {
    position: relative; width: 52px; height: 28px; cursor: pointer;
}
.billing-toggle input { opacity: 0; width: 0; height: 0; }
.billing-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.08); border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s;
}
.billing-slider::before {
    content: ''; position: absolute; width: 22px; height: 22px;
    left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
    transition: transform 0.3s;
}
.billing-toggle input:checked + .billing-slider { background: rgba(232,162,58,0.25); border-color: rgba(232,162,58,0.4); }
.billing-toggle input:checked + .billing-slider::before { transform: translateX(24px); background: #e8a23a; }
.billing-save-badge {
    font-size: 0.65em; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; white-space: nowrap;
    background: rgba(var(--stage-color-create-rgb, 61,255,175),0.1); color: var(--stage-color-create, #3dffaf);
    border: 1px solid rgba(var(--stage-color-create-rgb, 61,255,175),0.15);
}
.plan-card-price .plan-price-save {
    display: block; font-family: 'DM Mono', monospace; font-size: 1.35em; 
    color: var(--stage-color-create, #3dffaf); margin-top: 2px;
    font-weight: 300; letter-spacing: 0.3px; opacity: 0.8;
    text-shadow: 0 0 6px rgba(var(--stage-color-create-rgb, 61,255,175), 0.3);
}
.plan-card-features strong { color: rgba(255,255,255,0.85); }
.plan-tooltip-trigger { cursor: help; border-bottom: 1px dotted rgba(255,255,255,0.2); }
.plan-tooltip {
    display: none; position: absolute; bottom: auto; top: 50%; left: 50%;
    transform: translate(-50%, 0); width: 220px;
    background: #111114; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    padding: 10px 12px; font-size: 0.95em; line-height: 1.5; color: rgba(255,255,255,0.6);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 10; pointer-events: none;
}
.plan-tooltip-trigger:hover .plan-tooltip { display: block; }
.plan-card-tier { font-size: 0.65em; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 4px; }
.plan-card-name { font-size: 1.3em; font-weight: 800; color: #fff; margin-bottom: 6px; }
.plan-card-price { font-size: 0.85em; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.plan-card-price span { font-size: 1.6em; font-weight: 800; color: #fff; }
.plan-card-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 0 0 14px; }
.plan-card-features { list-style: none; padding: 0; margin: 0 0 10px; }
.plan-card-features li {
    font-size: 0.78em; color: rgba(255,255,255,0.55); padding: 4px 0;
    display: flex; align-items: flex-start; gap: 8px; line-height: 1.4;
}
.plan-card-features li::before { content: '✓'; color: #3dffaf; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.plan-card-features li.plan-limit::before { content: '—'; color: rgba(255,255,255,0.2); }
.plan-card-bottom { margin-top: auto; }
.plan-more-btn {
    background: rgba(61,255,175,0.06); border: 1px solid rgba(61,255,175,0.15);
    color: var(--stage-color-create, #3dffaf);
    font-size: 0.75em; font-weight: 800; cursor: pointer; padding: 8px 12px;
    text-align: center; width: 100%; border-radius: 6px;
    letter-spacing: 0.5px; margin-bottom: 5px;
    transition: all 0.2s;
}
.plan-more-btn:hover { background: rgba(61,255,175,0.12); border-color: rgba(61,255,175,0.3); }
.plan-more-list { display: none; margin-top: 8px; }
.plan-more-list.expanded { display: block; }
.plan-seat-controls {
    display: flex; align-items: center; gap: 12px; margin: 8px 0 12px;
    background: rgba(255,255,255,0.03); border-radius: 8px; padding: 8px 12px;
}
.plan-seat-btn {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: #fff; font-size: 1.1em; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.plan-seat-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.plan-seat-count { font-size: 1.2em; font-weight: 800; color: #fff; min-width: 24px; text-align: center; }
.plan-seat-label { font-size: 0.75em; color: rgba(255,255,255,0.4); }
.plan-cta-btn {
    width: 100%; padding: 10px; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
    font-size: 0.8em; font-weight: 700; cursor: pointer; transition: all 0.2s;
    letter-spacing: 0.5px; margin-top: auto;
}
.plan-cta-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.plan-cta-btn.plan-cta-active {
    background: var(--stage-color-create, #3dffaf); color: #000;
    border-color: transparent; font-weight: 800;
}
.plan-cta-btn.plan-cta-active:hover { filter: brightness(1.15); }
@media (max-width: 768px) {
    .account-plans { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 480px) {
    .account-plans { grid-template-columns: 1fr; }
}

/* ===== HELP SECTION STYLING ===== */
.help-section { margin-bottom: 18px; }
.help-section h3 { font-size: 0.95em; font-weight: 700; color: var(--text-color, #f0ede6); margin: 0 0 6px; }
.help-section p { font-size: 0.85em; color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0; }

/* ===== NEW USER EXPERIENCE (NUX) — AUDIO TOUR ===== */
@keyframes nux-pulse {
    0% { box-shadow: 0 0 16px rgba(232,162,58,0.5), 0 0 40px rgba(232,162,58,0.25), inset 0 0 16px rgba(232,162,58,0.06); }
    50% { box-shadow: 0 0 30px rgba(232,162,58,0.8), 0 0 60px rgba(232,162,58,0.4), inset 0 0 24px rgba(232,162,58,0.1); }
    100% { box-shadow: 0 0 16px rgba(232,162,58,0.5), 0 0 40px rgba(232,162,58,0.25), inset 0 0 16px rgba(232,162,58,0.06); }
}
@keyframes nux-text-pulse { 0% { opacity: 1; } 50% { opacity: 0.4; text-shadow: 0 0 8px rgba(232,162,58,0.4); } 100% { opacity: 1; } }

/* Ring layer */
#nux-ring-layer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; }
#nux-ring-layer.active { display: block; }
#nux-ring {
    position: fixed; display: none;
    border: 3px solid rgba(232,162,58,0.8); border-radius: 10px; pointer-events: none;
    box-shadow: 0 0 16px rgba(232,162,58,0.5), 0 0 40px rgba(232,162,58,0.25), inset 0 0 16px rgba(232,162,58,0.06);
}
.nux-pulsing { animation: nux-pulse 0.6s ease-out 3; }

/* Intro screen */
#nux-intro-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
    transition: opacity 1s ease;
}
#nux-intro-overlay.fading { opacity: 0; pointer-events: none; }
.nux-intro-content { text-align: center; }
.nux-intro-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4em, 14vw, 8em); color: #f0ede6; margin: 0; letter-spacing: 6px; line-height: 1; }
.nux-intro-subtitle { font-family: 'DM Mono', monospace; font-size: 18px; color: #e8a23a; letter-spacing: 4px; text-transform: uppercase; margin: 12px 0 36px; }
.nux-intro-play {
    width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(232,162,58,0.5);
    background: rgba(232,162,58,0.1); color: #e8a23a; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.3s ease; animation: nux-pulse 1.5s ease infinite;
}
.nux-intro-play:hover { background: rgba(232,162,58,0.25); border-color: #e8a23a; transform: scale(1.08); }
.nux-intro-play svg { margin-left: 4px; width: 36px; height: 36px; }

/* Skip button — large, bold, yellow */
#nux-skip-btn {
    display: none; position: fixed; bottom: 24px; right: 24px; z-index: 10001;
    background: rgba(232,162,58,0.12); border: 1px solid rgba(232,162,58,0.35);
    color: #e8a23a; font-family: 'DM Mono', monospace;
    font-size: 15px; font-weight: 700; padding: 12px 28px; border-radius: 12px;
    cursor: pointer; transition: all 0.2s; backdrop-filter: blur(10px);
}
#nux-skip-btn:hover { background: rgba(232,162,58,0.2); border-color: #e8a23a; }

/* Giant flash text */
#nux-flash {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000;
    display: none; align-items: center; justify-content: center; pointer-events: none;
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(4em, 16vw, 10em);
    font-weight: 900; color: #fff; letter-spacing: 6px; text-align: center;
    text-shadow: 0 0 60px rgba(232,162,58,0.5), 0 0 120px rgba(232,162,58,0.25);
    padding: 0 20px;
}
.nux-flash-visible { display: flex !important; opacity: 1; }
.nux-flash-fading { display: flex !important; opacity: 0; transition: opacity 0.4s ease; }

/* End popup */
#nux-end-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 10001;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    animation: nuxFadeIn 0.3s ease;
}
@keyframes nuxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.nux-end-card {
    background: linear-gradient(165deg, rgba(20,20,32,0.98) 0%, rgba(8,8,16,0.98) 50%, rgba(15,15,28,0.98) 100%);
    border: 1px solid var(--modal-border-color, rgba(255,255,255,0.07));
    border-radius: 16px; padding: 28px 24px; max-width: 480px; width: 92%;
    box-shadow: 0 0 60px rgba(0,0,0,0.5), 0 40px 80px rgba(0,0,0,0.6);
    backdrop-filter: blur(20px); text-align: center;
    animation: nuxCardIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 0.3s ease; max-height: 90vh; overflow-y: auto;
}
.nux-end-card-welcome {
    max-width: 540px; padding: 36px 32px;
    background: linear-gradient(155deg, rgba(30,30,48,0.98) 0%, rgba(14,14,26,0.98) 40%, rgba(22,20,36,0.98) 70%, rgba(12,12,22,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 80px rgba(0,0,0,0.5), 0 0 30px rgba(var(--stage-color-create-rgb, 61,255,175), 0.03), 0 40px 80px rgba(0,0,0,0.6);
}
@keyframes nuxCardIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Hub title inside card */
.nux-hub-title {
    font-family: 'Bebas Neue', sans-serif; font-size: 2.4em; color: #fff;
    letter-spacing: 3px; line-height: 1; margin-bottom: 2px;
}
.nux-hub-subtitle {
    font-size: 0.75em; font-weight: 600; color: var(--stage-color-create, #3dffaf);
    letter-spacing: 2px; text-transform: uppercase; margin: 6px 0 18px;
    text-shadow: 0 0 10px rgba(var(--stage-color-create-rgb, 61,255,175), 0.3);
}
.nux-hub-divider {
    height: 1px; background: rgba(255,255,255,0.06); margin: 14px 0 16px;
}

/* NUX welcome message */
.nux-welcome-body {
    font-size: 0.9em; color: var(--modal-secondary-text, rgba(255,255,255,0.5));
    line-height: 1.8; margin: 0 0 16px; text-align: left; padding: 0 4px;
}
.nux-welcome-cta {
    font-size: 1.1em; font-weight: 700; color: var(--text-color, #f0ede6);
    margin: 8px 0 20px; text-align: center;
}
.nux-welcome-btn {
    background: var(--stage-color-create, #3dffaf); color: #000; border: none;
    border-radius: 10px; padding: 12px 28px; font-size: 0.95em; font-weight: 700;
    cursor: pointer; transition: filter 0.2s;
}
.nux-welcome-btn:hover { filter: brightness(1.15); }

/* NUX end actions */
.nux-end-actions {
    display: flex; gap: 10px; margin-top: 16px;
}
@media (max-width: 480px) {
    .nux-end-actions { flex-direction: column; }
}
.nux-guide-video-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, rgba(232,162,58,0.12) 0%, rgba(61,255,175,0.08) 100%);
    border: 1px solid rgba(232,162,58,0.4);
    color: #e8a23a; border-radius: 10px; padding: 12px 16px;
    font-size: 0.85em; font-weight: 700; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 0 12px rgba(232,162,58,0.1);
    animation: nuxVideoPulse 2.5s ease infinite;
}
.nux-guide-video-btn:hover {
    background: linear-gradient(135deg, rgba(232,162,58,0.2) 0%, rgba(61,255,175,0.12) 100%);
    border-color: rgba(232,162,58,0.6);
    box-shadow: 0 0 20px rgba(232,162,58,0.2);
    transform: translateY(-1px);
}
@keyframes nuxVideoPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(232,162,58,0.1); }
    50% { box-shadow: 0 0 20px rgba(232,162,58,0.25); }
}
.nux-welcome-btn { flex: 1; }

/* Inline icon with glow */
.nux-inline-icon {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; margin: 0 2px;
}
.nux-icon-glow {
    color: var(--stage-color-create, #3dffaf);
    filter: drop-shadow(0 0 4px rgba(var(--stage-color-create-rgb, 61,255,175), 0.5));
    animation: nuxIconPulse 2s ease infinite;
}
@keyframes nuxIconPulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--stage-color-create-rgb, 61,255,175), 0.5)); }
    50% { filter: drop-shadow(0 0 10px rgba(var(--stage-color-create-rgb, 61,255,175), 0.8)); }
}

/* Stage buttons inside card */
.nux-end-card .nux-end-stages {
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0;
}

.nux-end-skip { background: none; border: none; color: rgba(255,255,255,0.3); font-size: 0.8em; cursor: pointer; padding: 10px; transition: color 0.2s; width: 100%; }
.nux-end-skip:hover { color: rgba(255,255,255,0.5); }

/* Tutorial hub header */
.nux-hub-header { text-align: center; margin-bottom: 8px; }

/* Tutorial list */
.nux-tutorial-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; max-height: 340px; overflow-y: auto; text-align: left; }
.nux-tutorial-btn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 10px 14px; cursor: pointer;
    text-align: left; transition: all 0.2s;
}
.nux-tutorial-btn:hover {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);
}
.nux-tutorial-new {
    border-color: rgba(var(--stage-color-create-rgb, 61,255,175), 0.15);
    box-shadow: 0 0 8px rgba(var(--stage-color-create-rgb, 61,255,175), 0.05);
}
.nux-tutorial-new:hover {
    border-color: rgba(var(--stage-color-create-rgb, 61,255,175), 0.3);
    box-shadow: 0 0 14px rgba(var(--stage-color-create-rgb, 61,255,175), 0.1);
}
.nux-tutorial-done { opacity: 0.45; }
.nux-tutorial-done:hover { opacity: 0.65; }
.nux-tutorial-num {
    font-weight: 800; font-size: 0.95em;
    color: rgba(255,255,255,0.12); min-width: 22px; text-align: center;
}
.nux-tutorial-new .nux-tutorial-num { color: var(--stage-color-create, #3dffaf); }
.nux-tutorial-info { flex: 1; min-width: 0; }
.nux-tutorial-title {
    display: block; font-size: 0.95em; font-weight: 700; color: var(--text-color, #f0ede6);
    margin-bottom: 2px;
}
.nux-tutorial-desc {
    display: block; font-size: 0.78em; color: var(--modal-secondary-text, rgba(255,255,255,0.4));
}
.nux-tutorial-status {
    font-size: 0.75em; color: rgba(255,255,255,0.15); min-width: 18px; text-align: center;
}
.nux-tutorial-new .nux-tutorial-status { color: var(--stage-color-create, #3dffaf); }

/* Stage reference buttons */
.nux-stage-btn {
    position: relative; cursor: default;
    font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 2px;
    color: rgba(255,255,255,0.35); padding: 6px 12px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02);
    transition: all 0.25s ease;
}
.nux-stage-btn:hover {
    color: var(--stage-color-create, #3dffaf); border-color: rgba(var(--stage-color-create-rgb, 61,255,175), 0.3);
    background: rgba(var(--stage-color-create-rgb, 61,255,175), 0.06);
    box-shadow: 0 0 12px rgba(var(--stage-color-create-rgb, 61,255,175), 0.1);
}
.nux-stage-tip {
    position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    background: var(--modal-bg, rgba(8,8,16,0.95)); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 8px 14px; white-space: nowrap;
    font-family: inherit; font-size: 11px; color: var(--modal-secondary-text, rgba(255,255,255,0.5));
    letter-spacing: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nux-stage-btn:hover .nux-stage-tip { opacity: 1; }

/* Stage button glow during NUX */
.nux-stage-glow {
    color: var(--stage-color-create, #3dffaf) !important;
    border-color: rgba(var(--stage-color-create-rgb, 61,255,175), 0.5) !important;
    background: rgba(var(--stage-color-create-rgb, 61,255,175), 0.1) !important;
    box-shadow: 0 0 16px rgba(var(--stage-color-create-rgb, 61,255,175), 0.25) !important;
    transform: scale(1.08);
    transition: all 0.3s ease;
}

/* ===== ONBOARDING POPUP ===== */
.onboarding-card {
    background: rgba(8,8,16,0.97); border: 1px solid rgba(232,162,58,0.25);
    border-radius: 16px; padding: 2.5rem; max-width: 440px; width: 90%;
    box-shadow: 0 0 60px rgba(232,162,58,0.08), 0 40px 80px rgba(0,0,0,0.6);
    backdrop-filter: blur(20px); text-align: center;
    animation: nuxCardIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.onboarding-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 2.5px; color: #e8a23a; margin-bottom: 14px; text-transform: uppercase;
}
.onboarding-headline {
    font-size: 1.5em; font-weight: 700; color: #f0ede6;
    margin: 0 0 10px; line-height: 1.25;
}
.onboarding-body {
    font-size: 0.88em; color: rgba(255,255,255,0.5);
    line-height: 1.7; margin: 0 0 24px;
}
.onboarding-options {
    display: flex; gap: 12px; margin-bottom: 16px;
}
@media (max-width: 480px) {
    .onboarding-options { flex-direction: column; }
}
.onboarding-option {
    flex: 1; border-radius: 12px; padding: 18px 16px; text-align: left;
    display: flex; flex-direction: column;
}
.onboarding-option-guided {
    border: 1px solid rgba(232,162,58,0.3);
    background: rgba(232,162,58,0.03);
}
.onboarding-option-solo {
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.onboarding-option-title {
    font-size: 0.95em; font-weight: 700;
    color: #fff; margin-bottom: 8px;
}
.onboarding-option-desc {
    font-size: 0.82em; color: rgba(255,255,255,0.45);
    line-height: 1.7; margin-bottom: 14px; flex: 1;
}
.onboarding-btn-primary {
    width: 100%; background: #e8a23a; color: #000; border: none; border-radius: 8px;
    padding: 10px; font-size: 0.88em; font-weight: 700;
    cursor: pointer; transition: filter 0.2s;
}
.onboarding-btn-primary:hover { filter: brightness(1.15); }
.onboarding-btn-outline {
    width: 100%; background: transparent; color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    padding: 10px; font-size: 0.88em; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.onboarding-btn-outline:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.onboarding-footer {
    font-size: 0.72em; color: rgba(255,255,255,0.2);
    margin: 0; line-height: 1.6;
}

/* ===== TOOLTIP SYSTEM ===== */
.ts-help-toggle {
    opacity: 0.5; transition: opacity 0.2s; color: rgba(255,255,255,0.8);
}
.ts-help-toggle:hover { opacity: 0.9; }
.ts-help-toggle svg { width: 16px; height: 16px; }

/* Discoverable tooltip highlights */
@keyframes ts-discover-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--stage-color-create-rgb, 61,255,175), 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(var(--stage-color-create-rgb, 61,255,175), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--stage-color-create-rgb, 61,255,175), 0); }
}
.ts-discoverable {
    outline: 2px solid rgba(var(--stage-color-create-rgb, 61,255,175), 0.4) !important;
    outline-offset: 3px;
    border-radius: 6px;
    animation: ts-discover-pulse 1.5s ease infinite;
}

/* Draggable header */
.ts-tooltip-drag { cursor: grab; }
.ts-tooltip-drag:active { cursor: grabbing; }

.ts-tooltip {
    position: fixed; z-index: 100000; width: 300px;
    background: linear-gradient(165deg, rgba(20,20,32,0.98) 0%, rgba(8,8,16,0.98) 100%);
    border: 1px solid var(--modal-border-color, rgba(255,255,255,0.07));
    border-top: 3px solid var(--stage-color-create, #3dffaf);
    border-radius: 12px; padding: 16px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: tsTooltipIn 0.2s ease;
}
@keyframes tsTooltipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ts-tooltip-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.ts-tooltip-cue {
    width: 22px; height: 22px; color: var(--stage-color-create, #3dffaf);
    display: flex; align-items: center;
}
.ts-tooltip-cue svg { width: 22px; height: 22px; }
.ts-tooltip-title {
    font-size: 0.7em; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--stage-color-create, #3dffaf); opacity: 0.7;
}

.ts-tooltip-body strong {
    display: block; font-size: 0.95em; color: var(--text-color, #f0ede6); margin-bottom: 6px;
}
.ts-tooltip-body p {
    font-size: 0.82em; color: var(--modal-secondary-text, rgba(255,255,255,0.5));
    line-height: 1.6; margin: 0 0 6px;
}
.ts-tooltip-examples {
    font-size: 0.78em; color: var(--stage-color-create, #3dffaf); opacity: 0.7;
    font-style: italic;
}

.ts-tooltip-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.05); padding-top: 10px; margin-top: 10px;
}
.ts-tooltip-got-it {
    display: flex; align-items: center; gap: 5px;
    background: var(--stage-color-create, #3dffaf); color: #000;
    border: none; border-radius: 6px; padding: 6px 14px;
    font-size: 0.78em; font-weight: 700; cursor: pointer; transition: filter 0.2s;
}
.ts-tooltip-got-it:hover { filter: brightness(1.15); }
.ts-tooltip-dismiss-all {
    background: none; border: none; color: rgba(255,255,255,0.25);
    font-size: 0.68em; cursor: pointer; transition: color 0.2s;
}
.ts-tooltip-dismiss-all:hover { color: rgba(255,255,255,0.5); }

/* Dismiss all confirm */
#ts-tooltip-confirm {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 100001;
    display: flex; align-items: center; justify-content: center;
}
.ts-confirm-card {
    background: linear-gradient(165deg, rgba(20,20,32,0.98) 0%, rgba(8,8,16,0.98) 100%);
    border: 1px solid var(--modal-border-color, rgba(255,255,255,0.07));
    border-radius: 12px; padding: 24px 28px; max-width: 380px; width: 90%; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.ts-confirm-card h3 { color: var(--text-color, #f0ede6); margin: 0 0 10px; font-size: 1.1em; }
.ts-confirm-card p { color: var(--modal-secondary-text, rgba(255,255,255,0.5)); font-size: 0.85em; line-height: 1.6; margin: 0 0 18px; }
.ts-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.ts-confirm-cancel {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-color, #f0ede6); border-radius: 8px; padding: 8px 18px;
    font-size: 0.85em; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.ts-confirm-cancel:hover { background: rgba(255,255,255,0.08); }
.ts-confirm-yes {
    background: #e74c3c; border: none; color: #fff; border-radius: 8px;
    padding: 8px 18px; font-size: 0.85em; font-weight: 700; cursor: pointer; transition: filter 0.2s;
}
.ts-confirm-yes:hover { filter: brightness(1.15); }

/* NUX Video overlay */
#nux-video-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 2147483647;
    display: flex; align-items: center; justify-content: center;
    animation: nuxFadeIn 0.2s ease;
}
.nux-video-wrap {
    position: relative; max-width: 800px; width: 94%;
}
.nux-video-close {
    position: absolute; top: -36px; right: 0;
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 2em; cursor: pointer; line-height: 1; transition: color 0.2s;
}
.nux-video-close:hover { color: #fff; }

/* Account modal close button — always visible */
#account-modal .account-close-btn {
    display: flex !important; position: absolute !important;
    top: 12px !important; right: 12px !important;
    background: rgba(255,255,255,0.05) !important; border-radius: 50% !important;
    width: 32px; height: 32px; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.08); z-index: 10;
}
#account-modal .account-close-btn svg { width: 16px; height: 16px; opacity: 0.5; }
#account-modal .account-close-btn:hover svg { opacity: 1; }

/* Project Switcher */
.project-switcher-wrapper { position: relative; display: flex; align-items: center; margin-right: -6px; }
.project-switcher-btn {
    background: none; border: none; color: var(--modal-secondary-text);
    cursor: pointer; padding: 4px; display: flex; align-items: center;
    opacity: 0.35; transition: all 0.25s ease; border-radius: 6px;
}
.project-switcher-btn:hover { opacity: 0.8; background: rgba(255,255,255,0.05); }
.project-switcher-btn.has-alerts {
    opacity: 0.9;
    color: var(--active-stage-color, var(--stage-color-create));
    filter: drop-shadow(0 0 4px currentColor);
    animation: switcherPulse 2.5s ease-in-out infinite;
}
@keyframes switcherPulse { 0%,100% { opacity: 0.9; } 50% { opacity: 0.55; } }
.project-switcher-popover {
    display: none; position: fixed;
    min-width: 240px; max-width: 300px;
    background: var(--modal-card-bg, #1a1a1e); border: 1px solid var(--modal-border-color, rgba(255,255,255,0.08));
    border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    padding: 6px 0; z-index: 2000; overflow: hidden;
}
.project-switcher-popover.active { display: block; }
.ps-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    cursor: pointer; transition: background 0.15s ease; position: relative;
}
.ps-item:hover { background: rgba(255,255,255,0.05); }
.ps-item.ps-active { background: rgba(255,255,255,0.04); }
.ps-item-letter {
    width: 28px; height: 28px; border-radius: 6px; display: flex;
    align-items: center; justify-content: center; font-weight: 800;
    font-size: 0.85em; color: #fff; flex-shrink: 0;
}
.ps-item-portrait { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.ps-item-name {
    font-size: 0.88em; font-weight: 600; color: var(--text-color, #fff);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.ps-item.ps-active .ps-item-name { color: var(--active-stage-color, var(--stage-color-create)); }
.ps-alert-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #e74c3c;
    box-shadow: 0 0 6px rgba(231,76,60,0.6); flex-shrink: 0;
}

/* Sprint Summary PDF Button */
.sprint-summary-btn-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 0;
    margin: 6px 0 2px 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    color: var(--modal-secondary-text);
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}
.sprint-summary-btn-bar:hover {
    opacity: 1;
    background: rgba(255,255,255,0.05);
    border-color: var(--active-stage-color, rgba(255,255,255,0.12));
    color: var(--active-stage-color, #fff);
}
.sprint-summary-btn-bar svg { pointer-events: none; }

/* Floating Formatting Toolbar */
.format-toolbar {
    position: absolute;
    background: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    height: 34px; /* Strictly locks the height to match the buttons */
    box-sizing: border-box;
}

.toolbar-toggles {
    display: flex;
    align-items: center;
    gap: 2px;
}

.format-tools-container {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Make the collapsed toggle buttons solid and highly visible */
#format-toggle-btn, #emoji-toggle-btn {
    background-color: var(--active-glow, var(--stage-color-create));
    color: #fff !important; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

#emoji-toggle-btn svg {
    stroke: #fff;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

#format-toggle-btn:hover, #emoji-toggle-btn:hover {
    background-color: var(--active-glow, var(--stage-color-create)) !important;
    filter: brightness(1.2);
}

/* Slide open specific menus depending on what was clicked */
.format-toolbar.text-expanded #format-tools-container,
.format-toolbar.emoji-expanded #emoji-tools-container,
.format-toolbar.highlight-expanded #highlight-tools-container {
    max-width: 500px; /* Widened to fit all the new emojis seamlessly */
    opacity: 1;
}

/* Revert the buttons to a subtle "pressed" state when their tools are open */
.format-toolbar.text-expanded #format-toggle-btn,
.format-toolbar.emoji-expanded #emoji-toggle-btn,
.format-toolbar.highlight-expanded #highlight-toggle-btn {
    color: var(--active-glow, var(--stage-color-create)) !important;
    text-shadow: 0 0 5px var(--active-glow, var(--stage-color-create)) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none;
}

.format-toolbar.emoji-expanded #emoji-toggle-btn svg,
.format-toolbar.highlight-expanded #highlight-toggle-btn svg {
    stroke: var(--active-glow, var(--stage-color-create));
    filter: drop-shadow(0 0 5px var(--active-glow, var(--stage-color-create)));
}

/* Highlight active formatting buttons (like Bold or Italic) */
.format-btn.active-format {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.format-btn.active-format svg {
    stroke: var(--active-glow, var(--stage-color-create));
    filter: drop-shadow(0 0 4px var(--active-glow, var(--stage-color-create)));
}

/* Give the entire toolbar a glowing frame line when expanded */
.format-toolbar.text-expanded,
.format-toolbar.emoji-expanded,
.format-toolbar.highlight-expanded {
    border: 1px solid var(--active-glow, var(--stage-color-create));
    box-shadow: 0 6px 20px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
}

/* In-line Emoji Styles inserted directly into the text editor */
.inline-emoji {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    user-select: none;
    margin: 0 2px;
}

.inline-emoji svg {
    width: 1.3em;
    height: 1.3em;
    stroke: var(--active-glow, var(--stage-color-create)); 
    filter: drop-shadow(0 0 4px var(--active-glow, var(--stage-color-create)));
}

/* Map the active stage to a dynamic glow variable */
.format-toolbar.modal-theme-create { --active-glow: var(--stage-color-create); }
.format-toolbar.modal-theme-define { --active-glow: var(--stage-color-define); }
.format-toolbar.modal-theme-task { --active-glow: var(--stage-color-task); }
.format-toolbar.modal-theme-execute { --active-glow: var(--stage-color-execute); }
.format-toolbar.modal-theme-deliver { --active-glow: var(--stage-color-deliver); }

.format-toolbar.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.format-btn {
    background: none;
    border: none;
    color: var(--modal-text);
    cursor: pointer;
    padding: 4px;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.format-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--modal-secondary-text);
    transition: stroke 0.2s ease, filter 0.2s ease;
}

.format-text-btn {
    font-size: 14px;
    font-weight: bold;
    color: var(--modal-secondary-text);
    font-family: monospace;
}

.format-text-display {
    font-size: 13px;
    font-weight: bold;
    color: var(--modal-secondary-text);
    font-family: monospace;
    width: 14px;
    text-align: center;
    user-select: none;
    cursor: default;
}

.format-btn:hover {
    background: rgba(255,255,255,0.08);
}

/* Icons glow based on the dynamic variable */
.format-btn:hover svg {
    stroke: var(--active-glow, var(--stage-color-create));
    filter: drop-shadow(0 0 5px var(--active-glow, var(--stage-color-create)));
}

/* Text buttons glow based on the dynamic variable */
.format-btn.format-text-btn:hover {
    color: var(--active-glow, var(--stage-color-create));
    text-shadow: 0 0 5px var(--active-glow, var(--stage-color-create));
}

.format-divider {
    width: 1px;
    height: 14px;
    background: var(--modal-border-color);
    margin: 0 2px;
}

.comment-form .action-btn { 
    align-self: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.comment-form.is-focused .action-btn {
    opacity: 1;
    visibility: visible;
}

.mention-tag { 
    background-color: rgba(var(--stage-color-create-rgb), 0.2); 
    color: var(--stage-color-create); 
    padding: 2px 5px; 
    border-radius: 4px; 
    font-weight: bold; 
    text-decoration: none; 
} 

.mention-tag:hover { 
    text-decoration: underline; 
} 

#mention-suggestions { 
    display: none; 
    position: absolute; 
    background-color: var(--modal-card-bg); 
    border: 1px solid var(--modal-border-color); 
    border-radius: 6px; 
    max-height: 150px; 
    overflow-y: auto; 
    z-index: 1070; 
} 

.mention-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    padding: 6px 10px; 
    cursor: pointer; 
} 

.mention-item:hover { 
    background-color: #444; 
} 

.mention-item .user-bubble { 
    width: 22px; 
    height: 22px; 
} 

.idea-card-menu-container { 
    position: absolute; 
    top: 5px; 
    right: 0px; 
} 

.idea-card-menu-btn { 
    background: none; 
    border: none; 
    color: var(--modal-secondary-text); 
    font-size: 24px; 
    cursor: pointer; 
    padding: 0 5px; 
    line-height: 1; 
    font-weight: bold; 
    letter-spacing: 2px; 
} 

.idea-card-menu-btn:hover { 
    color: #fff; 
} 

.idea-card-menu-popover { 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(-10px); 
    transition: all 0.2s; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background-color: var(--modal-card-bg); 
    border: 1px solid var(--modal-border-color); 
    border-radius: 6px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); 
    z-index: 20; 
    list-style: none; 
    padding: 5px 0; 
    margin: 5px 0 0; 
    width: 140px; 
} 

.idea-card-menu-popover.active { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
} 

.idea-card-menu-popover ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.idea-card-menu-popover li { 
    padding: 8px 15px; 
    cursor: pointer; 
    font-size: 0.9em; 
} 

.idea-card-menu-popover li:hover { 
    background-color: #444; 
} 

#card-assignees-display-wrapper { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
    padding: 6px; 
    cursor: pointer; 
    pointer-events: all; 
}

.sidebar-assignee-item { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.sidebar-assignee-item .user-bubble { 
    width: 28px; 
    height: 28px; 
}

#card-assignees-display-wrapper .placeholder { 
    color: var(--modal-secondary-text); 
}

.assignees-container-wrapper { 
    margin-left: auto; 
    margin-right: 10px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    cursor: pointer; 
}

.bulletpoint-footer .assignees-container { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 4px; 
}

.bp-assignee-item { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    font-size: 0.9em; 
}

.bp-assignee-item .user-bubble { 
    width: 18px; 
    height: 18px; 
}

.assignee-text-btn { 
    background: none; 
    border: 1px solid var(--modal-input-border); 
    color: var(--modal-secondary-text); 
    padding: 4px 10px; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 0.85em; 
    font-weight: bold; 
}

.assignee-text-btn:hover { 
    background-color: var(--modal-input-bg); 
    color: #fff; 
}

.add-assignee-btn { 
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    background-color: rgba(255,255,255,0.1); 
    border: 1px dashed #777; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    font-weight: bold; 
    font-size: 16px; 
    color: #aaa; 
    transition: all 0.2s; 
    flex-shrink: 0; 
}

.add-assignee-btn:hover { 
    background-color: rgba(255,255,255,0.2); 
    border-color: #fff; 
    color: #fff; 
}

.user-select-popover {
    display: none;
    position: absolute;
    background-color: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    z-index: 1090;
    padding: 8px;
    max-height: 250px;
    overflow-y: auto;
    width: 220px; /* Lock the width so it looks like a clean menu */
}

.user-select-popover.active {
    display: block;
}

.user-select-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9em;
}

.user-select-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.user-select-item.selected {
    background-color: rgba(255, 255, 255, 0.05);
}

.user-select-item .selection-indicator {
    margin-left: auto; /* Pushes the neon checkmark to the far right */
    display: flex;
    align-items: center;
}

.user-select-item .user-bubble {
    width: 26px;
    height: 26px;
}

#presets-container { 
    margin-top: 15px; 
    cursor: default; 
    padding: 0 !important; 
}

.presets-menu-wrapper { 
    position: relative; 
    width: 100%; 
}

.presets-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    width: auto; 
    padding: 6px 12px; 
    font-size: 0.8em; 
    transform: scale(1.1); 
}

.presets-popover { 
    display: none; 
    position: fixed; 
    width: auto; 
    min-width: 200px; 
    background-color: var(--modal-card-bg); 
    border: 1px solid var(--modal-border-color); 
    border-radius: 8px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.6); 
    z-index: 99999; 
    list-style: none; 
    padding: 5px 0; 
}

.presets-popover.active { 
    display: block; 
}

.presets-popover ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
}

.presets-popover li { 
    padding: 10px 15px; 
    cursor: pointer; 
    font-size: 0.9em; 
    color: var(--modal-text);
    transition: background-color 0.15s;
} 

.presets-popover li:hover { 
    background-color: rgba(255,255,255,0.06); 
}

.preset-divider { 
    height: 1px; 
    background-color: var(--modal-border-color); 
    margin: 5px 0; 
    pointer-events: none;
}

/* Stage-themed presets popover */
.modal-theme-define .presets-popover { border-color: var(--stage-color-define); box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 12px rgba(var(--stage-color-define-rgb), 0.15); background: linear-gradient(to bottom, rgba(var(--stage-color-define-rgb), 0.12), transparent 80%), var(--modal-card-bg); }
.modal-theme-define .presets-popover li:hover { background-color: rgba(var(--stage-color-define-rgb), 0.15); }
.modal-theme-define .presets-popover li.apply-preset { color: var(--stage-color-define); }

.modal-theme-task .presets-popover { border-color: var(--stage-color-task); box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 12px rgba(var(--stage-color-task-rgb), 0.15); background: linear-gradient(to bottom, rgba(var(--stage-color-task-rgb), 0.12), transparent 80%), var(--modal-card-bg); }
.modal-theme-task .presets-popover li:hover { background-color: rgba(var(--stage-color-task-rgb), 0.15); }
.modal-theme-task .presets-popover li.apply-preset { color: var(--stage-color-task); }

/* --- Sprint Tools Popovers (Sort & Filter) --- */
.sprint-sort-popover, .sprint-filter-popover, .sprint-assignee-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 2000;
    margin-top: 5px;
    min-width: 180px;
    padding: 5px 0;
    flex-direction: column;
    max-height: 250px;
    overflow-y: auto;
}

.sprint-sort-popover.active, .sprint-filter-popover.active, .sprint-assignee-popover.active { display: flex; }
.sprint-tool-option {
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    color: var(--modal-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sprint-tool-option:hover { background-color: rgba(255,255,255,0.05); }
.sprint-tool-divider { height: 1px; background-color: var(--modal-border-color); margin: 5px 0; }

.filter-checkbox {
    width: 14px; height: 14px; border: 1px solid var(--modal-secondary-text); border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
}

.sprint-tool-option.selected .filter-checkbox::after { content: '✓'; color: #fff; font-size: 10px; }

/* Dynamic Colors for Dropdowns and Checkboxes based on Stage */
.modal-theme-create .sprint-sort-popover, .modal-theme-create .sprint-filter-popover, .modal-theme-create .sprint-assignee-popover { border-color: var(--stage-color-create); box-shadow: 0 4px 15px rgba(var(--stage-color-create-rgb), 0.2); background: linear-gradient(to bottom, rgba(var(--stage-color-create-rgb), 0.15), transparent 80%), var(--modal-card-bg); }
.modal-theme-create .sprint-tool-option.selected { color: var(--stage-color-create); font-weight: bold; background-color: rgba(var(--stage-color-create-rgb), 0.15); }
.modal-theme-create .sprint-tool-option.selected .filter-checkbox { background-color: var(--stage-color-create); border-color: var(--stage-color-create); }

.modal-theme-define .sprint-sort-popover, .modal-theme-define .sprint-filter-popover, .modal-theme-define .sprint-assignee-popover { border-color: var(--stage-color-define); box-shadow: 0 4px 15px rgba(var(--stage-color-define-rgb), 0.2); background: linear-gradient(to bottom, rgba(var(--stage-color-define-rgb), 0.15), transparent 80%), var(--modal-card-bg); }
.modal-theme-define .sprint-tool-option.selected { color: var(--stage-color-define); font-weight: bold; background-color: rgba(var(--stage-color-define-rgb), 0.15); }
.modal-theme-define .sprint-tool-option.selected .filter-checkbox { background-color: var(--stage-color-define); border-color: var(--stage-color-define); }

.modal-theme-task .sprint-sort-popover, .modal-theme-task .sprint-filter-popover, .modal-theme-task .sprint-assignee-popover { border-color: var(--stage-color-task); box-shadow: 0 4px 15px rgba(var(--stage-color-task-rgb), 0.2); background: linear-gradient(to bottom, rgba(var(--stage-color-task-rgb), 0.15), transparent 80%), var(--modal-card-bg); }
.modal-theme-task .sprint-tool-option.selected { color: var(--stage-color-task); font-weight: bold; background-color: rgba(var(--stage-color-task-rgb), 0.15); }
.modal-theme-task .sprint-tool-option.selected .filter-checkbox { background-color: var(--stage-color-task); border-color: var(--stage-color-task); }

.modal-theme-execute .sprint-sort-popover, .modal-theme-execute .sprint-filter-popover, .modal-theme-execute .sprint-assignee-popover { border-color: var(--stage-color-execute); box-shadow: 0 4px 15px rgba(var(--stage-color-execute-rgb), 0.2); background: linear-gradient(to bottom, rgba(var(--stage-color-execute-rgb), 0.15), transparent 80%), var(--modal-card-bg); }
.modal-theme-execute .sprint-tool-option.selected { color: var(--stage-color-execute); font-weight: bold; background-color: rgba(var(--stage-color-execute-rgb), 0.15); }
.modal-theme-execute .sprint-tool-option.selected .filter-checkbox { background-color: var(--stage-color-execute); border-color: var(--stage-color-execute); }

.modal-theme-deliver .sprint-sort-popover, .modal-theme-deliver .sprint-filter-popover, .modal-theme-deliver .sprint-assignee-popover { border-color: var(--stage-color-deliver); box-shadow: 0 4px 15px rgba(var(--stage-color-deliver-rgb), 0.2); background: linear-gradient(to bottom, rgba(var(--stage-color-deliver-rgb), 0.15), transparent 80%), var(--modal-card-bg); }
.modal-theme-deliver .sprint-tool-option.selected { color: var(--stage-color-deliver); font-weight: bold; background-color: rgba(var(--stage-color-deliver-rgb), 0.15); }
.modal-theme-deliver .sprint-tool-option.selected .filter-checkbox { background-color: var(--stage-color-deliver); border-color: var(--stage-color-deliver); }
#ship-it-btn { 
    width: 100%; 
}

#idea-card-modal .secondary-btn { 
    background-color: #3a3a3a; 
}
#idea-card-modal .secondary-btn:hover { 
    background-color: #4a4a4a; 
}
#idea-card-modal.modal-theme-create .action-btn:not(.secondary-btn) { 
    background-color: var(--stage-color-create-dark); 
}
#idea-card-modal.modal-theme-define .action-btn:not(.secondary-btn) { 
    background-color: var(--stage-color-define-dark); 
}
#idea-card-modal.modal-theme-task .action-btn:not(.secondary-btn) { 
    background-color: var(--stage-color-task-dark); 
}
#idea-card-modal.modal-theme-execute .action-btn:not(.secondary-btn) { 
    background-color: var(--stage-color-execute-dark); 
}
#idea-card-modal.modal-theme-deliver .action-btn:not(.secondary-btn) { 
    background-color: var(--stage-color-deliver-dark); 
}

/* --- History Log Modal --- */
#history-log-modal { z-index: 1070; }

#history-log-modal .modal-content { 
    width: 700px; 
    max-width: 90vw; 
}

#history-log-content { 
    max-height: 60vh; 
    overflow-y: auto; 
}

.history-item { 
    padding: 10px 0; 
    border-bottom: 1px solid var(--modal-border-color); 
    font-size: 0.9em; 
}

.history-item:first-child { 
    padding-top: 0; 
}

.history-item:last-child { 
    border-bottom: none; 
    padding-bottom: 0; 
}

.history-item-action { 
    color: var(--modal-text); 
}

.history-item-meta { 
    font-size: 0.8em; 
    color: var(--modal-secondary-text); 
    margin-top: 4px; 
}

.history-item-user { 
    font-weight: bold; 
    color: var(--stage-color-execute); 
}

/* --- Bulletpoint Fullscreen Modal --- */
#bulletpoint-view-modal { 
    z-index: 1080; 
    background-color: rgba(0, 0, 0, 0.85); /* Darkens the background behind the modal */
    backdrop-filter: blur(8px); /* Adds a slightly stronger blur */
}

#bulletpoint-view-modal .modal-content { 
    width: 98vw; 
    max-width: 1200px; /* Expands the maximum width giving it way more space */
    height: auto; 
    max-height: 98vh; 
    overflow-y: auto; /* Enables vertical scrolling when content is too long */
    overflow-x: hidden; /* Prevents accidental horizontal scrolling */
}

#note-view-modal { 
    z-index: 9100; 
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}
#note-view-modal .modal-content { 
    width: 98vw; 
    max-width: 1200px;
    height: auto; 
    max-height: 98vh; 
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Manage Presets & Teams Modals --- */
#manage-presets-modal .modal-content, #manage-teams-modal .modal-content { 
    width: 600px; 
}

/* --- Team Selector Styles --- */
.bp-team-selector-container {
    position: relative;
    margin-right: auto;
}

.bp-team-selector {
    font-size: 1.25em; 
    font-weight: 300; 
    color: var(--modal-secondary-text);
    cursor: pointer;
    text-transform: uppercase;
    padding: 2px 8px 2px 0; /* Removed the left padding to align perfectly under the ID */
    border-radius: 4px;
    border: 1px dashed transparent;
    transition: all 0.2s;
    letter-spacing: 1px;
    line-height: 1; /* Keeps the spacing tight beneath the ID */
}

.bp-team-selector:hover {
    color: #fff;
    border-color: var(--modal-secondary-text);
    background: rgba(255, 255, 255, 0.05);
}

.bp-team-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    min-width: 160px;
    background-color: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 2000; /* Boosted so it pops over absolutely everything */
    margin-top: 5px;
    list-style: none;
    padding: 5px 0;
}

.bp-team-popover.active {
    display: block;
}

.bp-team-popover li {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
}

.bp-team-popover li:hover {
    background-color: #444;
}

.bp-team-popover .preset-divider {
    height: 1px;
    background-color: var(--modal-border-color);
    margin: 5px 0;
    padding: 0;
}
#manage-presets-list .preset-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px; 
    border-bottom: 1px solid var(--modal-border-color); 
    cursor: grab; 
}

#manage-presets-list .preset-item:last-child { 
    border-bottom: none; 
}

#manage-presets-modal .danger-btn { 
    padding: 4px 8px; 
    font-size: 0.8em; 
}

#manage-presets-list .preset-item.drag-over-indicator { 
    background-color: #444; 
}

/* --- Ship It Modal --- */
#ship-it-modal .modal-content {
    width: 700px;
    max-width: 90vw;
}
#ship-it-modal.modal-theme-deliver .modal-content {
     border-top-color: var(--stage-color-deliver);
     background: linear-gradient(to bottom, rgba(var(--stage-color-deliver-rgb), 0.2), var(--modal-bg) 60%);
}
#ship-it-modal.modal-theme-deliver h2 {
    color: var(--stage-color-deliver);
    text-shadow: 0 0 8px var(--stage-color-deliver);
}
#ship-it-modal .id-card-details.input {
    background-color: var(--modal-input-bg);
    border: 1px solid var(--modal-input-border);
    color: var(--modal-text);
}
#ship-it-modal .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
#ship-it-modal .form-group textarea {
    min-height: 120px;
    resize: none;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--modal-input-bg);
    border: 1px solid var(--modal-input-border);
    border-radius: 5px;
    color: var(--modal-text);
    padding: 10px;
}
#ship-it-modal .action-btn[type="submit"] {
    background-color: var(--stage-color-deliver);
}
#ship-links-container .input-group { 
    margin-bottom: 8px; 
}
#clear-cache-container { 
    display: flex; 
    align-items: flex-start; 
    flex-direction: column; 
    gap: 8px; 
    padding: 10px; 
    background: rgba(0,0,0,0.2); 
    border-radius: 6px; 
}
#clear-cache-container > div { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}
.explanation-text { 
    font-size: 0.8em; 
    color: var(--modal-secondary-text); 
    margin: 0; 
    padding-left: 62px; 
}

/* --- Shipped Sprints Modal --- */
#shipped-sprints-modal .modal-content {
    background-color: var(--modal-bg);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    width: 480px;
    max-width: 92vw;
    max-height: 85vh;
    border-radius: 14px;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
#shipped-sprints-modal .modal-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
#shipped-sprints-modal .modal-close-btn svg {
    stroke: rgba(255,255,255,0.7);
    width: 18px;
    height: 18px;
}
#shipped-sprints-modal .modal-close-btn:hover svg {
    stroke: #fff;
}

#shipped-column-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 300px;
}

.shipped-header {
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(var(--stage-color-deliver-rgb), 0.12) 0%, transparent 100%);
}

.shipped-header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--stage-color-deliver);
}

.shipped-header-top h2 {
    margin: 0;
    font-size: 1.2em;
    color: var(--text-color);
    flex-grow: 1;
}

.shipped-modal-badge {
    background: rgba(var(--stage-color-deliver-rgb), 0.2);
    color: var(--stage-color-deliver);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 800;
    border: 1px solid rgba(var(--stage-color-deliver-rgb), 0.3);
}

.shipped-sprints-controls {
    display: flex;
    gap: 8px;
    width: 100%;
}

#shipped-search-input {
    flex-grow: 1;
    background-color: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--modal-text);
    padding: 9px 12px;
    font-size: 0.85em;
    font-family: var(--font-family);
    outline: none;
    transition: border-color 0.2s;
}
#shipped-search-input:focus {
    border-color: var(--stage-color-deliver);
}
#shipped-search-input::placeholder {
    color: rgba(255,255,255,0.25);
}

#shipped-assignee-filter {
    flex-basis: 160px;
    flex-shrink: 0;
    background-color: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: var(--modal-text);
    padding: 9px 12px;
    font-size: 0.85em;
    font-family: var(--font-family);
    outline: none;
    cursor: pointer;
}
#shipped-assignee-filter option {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

.shipped-select-row {
    display: flex;
    gap: 8px;
    padding: 6px 16px 8px;
}
.shipped-select-row button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
    font-size: 0.75em;
    font-family: var(--font-family);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.shipped-select-row button:hover {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.6);
}
.shipped-select-row button.active {
    border-color: var(--stage-color-deliver);
    color: var(--stage-color-deliver);
}
#shipped-delete-selected-btn {
    border-color: rgba(231,76,60,0.4) !important;
    color: #e74c3c !important;
}
#shipped-delete-selected-btn:hover {
    border-color: #e74c3c !important;
    background: rgba(231,76,60,0.1) !important;
}

#shipped-sprints-list {
    padding: 12px 16px 20px;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shipped-checkbox {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: border-color 0.15s, background 0.15s;
}
.shipped-checkbox svg { opacity: 0; transition: opacity 0.15s; }
.shipped-checkbox.checked {
    border-color: #3dffaf;
    background: rgba(61,255,175,0.15);
}
.shipped-checkbox.checked svg { opacity: 1; stroke: #3dffaf; }
.shipped-checkbox:hover { border-color: rgba(255,255,255,0.4); }

.shipped-sprint-header { position: relative; }
.shipped-selected {
    border-color: rgba(61,255,175,0.3) !important;
    background: rgba(61,255,175,0.04) !important;
}

#shipped-sprints-modal .ticket-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid var(--stage-color-deliver);
    border-radius: 10px;
    padding: 14px 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}
#shipped-sprints-modal .ticket-card:hover {
    background: rgba(var(--stage-color-deliver-rgb), 0.08);
    border-color: rgba(var(--stage-color-deliver-rgb), 0.3);
    transform: translateX(3px);
}

#shipped-sprints-modal .ticket-card-title {
    font-size: 1em;
    font-weight: 700;
    margin: 8px 0;
}

#shipped-sprints-modal .ticket-card-top-details {
    font-size: 0.78em;
    opacity: 0.6;
}

#shipped-sprints-modal .ticket-card-footer {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.restore-sprint-btn {
    background: transparent;
    color: var(--stage-color-execute);
    border: 1px solid var(--stage-color-execute);
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.78em;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.restore-sprint-btn:hover {
    background: var(--stage-color-execute);
    color: #fff;
}

#shipped-sprints-modal .danger-btn {
    background: transparent;
    color: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
#shipped-sprints-modal .danger-btn:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

.shipped-sprint-header {
    cursor: pointer;
}

/* ===================================================================================
   CHUNK 10: SCROLLBARS
   Custom themed scrollbar styles for a consistent look.
   =================================================================================== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--stage-color-create) #202020;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #202020;
}

::-webkit-scrollbar-thumb {
    background-color: var(--stage-color-create);
    border-radius: 10px;
    border: 3px solid #202020;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #fff;
}

/* ===================================================================================
   CHUNK 11: RESPONSIVE & MOBILE
   Media queries and styles for mobile devices and landscape orientation.
   =================================================================================== */
#rotate-device-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: var(--bg-color); 
    z-index: 9999; 
    display: none; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
}

/* --- Mobile HUB View --- */
.hub-close-btn {
    display: none; /* Hide on desktop by default */
}
.hub-mobile-close-btn {
    display: none;
}

#hub-modal .hub-mobile-close-btn {
    display: none !important;
}

#hub-modal .hub-close-btn {
    display: none !important;
}

@media (max-width: 768px) and (orientation: portrait) {
    .hub-mobile-close-btn {
        display: flex;
        position: absolute;
        top: calc(18px + env(safe-area-inset-top, 0px));
        right: 12px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        color: rgba(255,255,255,0.5);
        transition: all 0.2s;
    }
    .hub-mobile-close-btn:hover {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    #rotate-device-overlay { display: flex; }
}

@media (max-width: 768px) and (orientation: portrait) {
    .app-header { 
        padding: 12px 15px; 
        padding-top: calc(12px + env(safe-area-inset-top, 0px)); 
    }
    
    .header-left { 
        gap: 8px; 
    }
    
    .header-logo { 
        height: 28px; 
    }
    
    .app-title, .header-separator { 
        display: none; 
    }
    
    .project-name-display { 
        font-size: 1.1em; 
    }

    #hub-btn {
        display: flex !important;
    }
    
    .board-container { 
        flex-direction: column; 
        align-items: center; 
        overflow-x: hidden; 
        overflow-y: auto; 
        padding: 10px; 
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }
    
    .kanban-column { 
        width: 95%; 
        max-width: 400px; 
        min-height: 200px; 
    }

    #project-section {
        display: none;
        width: 100%;
        height: 100%;
        padding: 15px;
        padding-top: calc(15px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        border-radius: 0;
        background-color: var(--card-bg);
    }

    .hub-close-btn {
        display: none;
    }

    .id-card { 
        flex-direction: column; 
        width: 100%; 
        height: 100%; 
    }
    
    .id-card .id-card-logo { 
        display: none; 
    }
    
    .id-card-left { 
        flex-basis: auto; 
        border-right: none; 
        border-bottom: 1px solid var(--modal-border-color); 
    }
    
    .id-card-right { 
        flex-basis: auto; 
        flex-grow: 1; 
        overflow-y: auto; 
    }
    
    .auth-card input { 
        font-size: 16px; 
    }
}

/* Ensure the menu doesn't overlap the modal close button in fullscreen */
#bulletpoint-view-modal .bulletpoint-menu-container {
    margin-right: 40px;
}

.notification-badge {
    /* Removed old oval styling so the transparent centered text works */
    background: transparent;
    border: none;
    box-shadow: none;
}

/* --- Notification Chat Sidebar --- */
.notification-sidebar {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 420px;
    max-height: 550px;
    background-color: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
    display: none;
    flex-direction: column;
    z-index: 2000;
    overflow: hidden;
    pointer-events: none;
}
.notification-sidebar[style*="flex"] {
    pointer-events: auto;
}

.notification-sidebar.hub-visible {
    display: flex;
}

.notification-sidebar.hub-visible {
    display: flex;
}.notification-sidebar.hub-visible {
    display: flex;
}

.clear-all-btn {
    background: none;
    border: none;
    color: var(--modal-secondary-text);
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s;
}

.clear-all-btn:hover {
    color: #e74c3c; /* Red on hover to indicate deletion */
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: rgba(0,0,0,0.3);
    border-bottom: 1px solid var(--modal-border-color);
}

.notification-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: #fff;
    text-transform: uppercase;
}

#close-notifications-btn {
    background: none;
    border: none;
    color: var(--modal-secondary-text);
    font-size: 1.5em;
    cursor: pointer;
    line-height: 1;
}

#close-notifications-btn:hover {
    color: #fff;
}

.notification-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

.notification-item {
    position: relative;
    transition: background-color 0.2s, opacity 0.2s;
    margin: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    opacity: 0.75;
}

.notification-item:hover {
    background-color: rgba(255,255,255,0.07) !important;
    opacity: 1;
}

.notification-item.unread {
    opacity: 1;
    background: rgba(255,255,255,0.06);
    border-left: 3px solid var(--stage-color-create);
    box-shadow: 0 0 0 1.5px var(--stage-color-create), 0 0 8px rgba(var(--stage-color-create-rgb), 0.4);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* The tiny 'x' button */
.delete-notif-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #666;
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
    display: none; /* Hidden by default */
    padding: 2px 6px;
    border-radius: 4px;
}

/* Only show the 'x' when hovering over that specific notification */
.notification-item:hover .delete-notif-btn {
    display: block;
}

.delete-notif-btn:hover {
    color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.1);
}

/* ===================================================================================
   CHUNK 12: ROLE PERMISSIONS
   Hides buttons and features based on the user's assigned role.
   =================================================================================== */
body.perm-member .add-idea-btn,
body.perm-member #idea-card-delete-btn,
body.perm-member li[data-modal="manage-current-project-modal"],
body.perm-lead li[data-modal="manage-current-project-modal"],
body.perm-member #theme-lock-container,
body.perm-lead #theme-lock-container {
    display: none !important;
}

/* ===================================================================================
   NEW: INTRO SPLASH SCREEN
   =================================================================================== */
.intro-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: 
        radial-gradient(ellipse at 10% 20%, #0099e6 0%, transparent 50%),
        radial-gradient(ellipse at 90% 15%, #00b87a 0%, transparent 45%),
        radial-gradient(ellipse at 50% 60%, #e6b000 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, #cf00cf 0%, transparent 45%),
        radial-gradient(ellipse at 20% 85%, #8a2ee6 0%, transparent 50%),
        #0a0a0f;
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 99999; 
    opacity: 1;
    transition: opacity 1.2s ease-out;
}

/* Dark blur over the background image */
.intro-splash-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(60px);
    z-index: -1;
}

.splash-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* Space between logo and text */
    z-index: 1;
    transition: all 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53); /* Smooth animation timing */
}

.intro-splash-logo {
    width: 350px; /* Larger logo */
    height: auto;
    border-radius: 75px; /* Extremely rounded corners */
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
}

.splash-title {
    font-size: 5.5em; /* Scaled down just a tiny bit */
    margin: 0;
    font-weight: 900; 
    color: #ffffff;
    letter-spacing: 4px;
    text-align: center; 
    line-height: 1; 
    
    /* 5-Layer Neon Pink Glow Effect */
    text-shadow: 
        0 0 10px #ffffff, 
        0 0 20px #ff1493, 
        0 0 40px #ff1493, 
        0 0 80px #ff007f, 
        0 0 120px #ff007f;
}

.intro-splash-screen.active {
    display: flex;
}

/* THE DISINTEGRATION EFFECT */
.intro-splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.intro-splash-screen.fade-out .splash-content-wrapper {
    transform: scale(1.2); /* Expand slightly */
    filter: blur(20px); /* Blur out into nothing */
    opacity: 0;
}

/* --- STATUS & PRIORITY CUSTOM DROPDOWNS --- */
.custom-dropdown-popover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 120px;
    background-color: var(--modal-card-bg);
    border: 1px solid var(--modal-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 2000;
    margin-top: 5px;
    list-style: none;
    padding: 5px 0;
}
.custom-dropdown-popover.active {
    display: block;
}
.custom-dropdown-popover li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.2s;
}
.custom-dropdown-popover li:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* --- DYNAMIC MODAL THEME VARIABLES --- */
.modal-theme-create { --active-stage-color: var(--stage-color-create); --active-stage-color-rgb: var(--stage-color-create-rgb); }
.modal-theme-define { --active-stage-color: var(--stage-color-define); --active-stage-color-rgb: var(--stage-color-define-rgb); }
.modal-theme-task { --active-stage-color: var(--stage-color-task); --active-stage-color-rgb: var(--stage-color-task-rgb); }
.modal-theme-execute { --active-stage-color: var(--stage-color-execute); --active-stage-color-rgb: var(--stage-color-execute-rgb); }
.modal-theme-deliver { --active-stage-color: var(--stage-color-deliver); --active-stage-color-rgb: var(--stage-color-deliver-rgb); }

/* --- ACTIVE DROPDOWN ITEM THEME --- */
.custom-dropdown-popover li.selected,
.bp-team-popover li.selected {
    color: var(--active-stage-color);
    background-color: rgba(var(--active-stage-color-rgb), 0.15); /* Injects the specific column's color as a background tint! */
    border-left: 3px solid var(--active-stage-color);
    padding-left: 9px !important;
}

/* --- DYNAMIC DROPDOWN GRADIENT BACKGROUNDS --- */
[class*="modal-theme-"] .custom-dropdown-popover,
[class*="modal-theme-"] .bp-team-popover {
    border-color: var(--active-stage-color);
    box-shadow: 0 4px 15px rgba(var(--active-stage-color-rgb), 0.2);
    background: linear-gradient(to bottom, rgba(var(--active-stage-color-rgb), 0.15), transparent 80%), var(--modal-card-bg);
}

/* --- VISUAL LINK HIGHLIGHTING --- */
/* Keeps the original text visually unchanged, but adds a glowing background highlight */
[contenteditable="true"] a, 
.bulletpoint-content a, 
.bulletpoint-title a, 
.id-card-details[contenteditable="false"] a {
    color: inherit; /* Keeps the text exactly the color it originally was */
    text-decoration: none; /* Removes the underline */
    cursor: pointer;
    background-color: rgba(61, 255, 175, 0.2); /* Soft glowing background highlight */
    padding: 0px 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
}

[contenteditable="true"] a:hover,
.bulletpoint-content a:hover,
.bulletpoint-title a:hover {
    background-color: rgba(61, 255, 175, 0.3);
    transform: scale(1.02);
}

/* --- INLINE TEXT LINKS --- */
a.custom-text-link {
    color: #3dffaf !important; /* Neon green text so it "glows" */
    text-decoration: underline !important; /* Classic link underline */
    background-color: rgba(61, 255, 175, 0.15) !important; /* Soft green highlight */
    border-bottom: none !important; /* Remove the heavy bottom border */
    box-shadow: none !important; 
    padding: 0px 4px !important; /* Keeps the highlight tight around the letters */
    border-radius: 4px !important;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block;
    line-height: 1.1 !important; 
}

a.custom-text-link:hover {
    background-color: rgba(61, 255, 175, 0.3) !important; /* Slightly brighter on hover */
    transform: scale(1.02);
}

/* =========================================
   PROGRESS BAR ANIMATIONS
   ========================================= */
.progress-particle {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    box-shadow: 0 0 4px #fff;
}

@keyframes particle-burst {
    0% { transform: translate(0, 0) scale(1.5); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* =========================================
   MOBILE SPRINT CLOSE BUTTON
   ========================================= */
.mobile-sprint-close-btn {
    display: none !important; /* Hidden on desktop */
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-sprint-close-btn svg {
    stroke: var(--modal-secondary-text);
    width: 24px;
    height: 24px;
    transition: all 0.2s;
    filter: none !important;
}

.mobile-sprint-close-btn:hover svg {
    stroke: #fff;
    transform: scale(1.15);
}

@media (max-width: 768px) {
    .modal-content {
        margin-top: calc(50px + env(safe-area-inset-top, 0px)); /* Creates dedicated space above the window */
        max-height: calc(100vh - 70px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; /* Ensures the modal doesn't push past safe zones */
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }

    #hub-modal .modal-content {
        margin-top: 0 !important;
        max-height: 100% !important;
        height: 100% !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    #hub-modal .modal-close-btn {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        color: var(--modal-secondary-text) !important;
        padding: 10px 15px !important;
        z-index: 10 !important;
        width: auto !important;
        height: auto !important;
    }
    #hub-modal .modal-close-btn svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 2 !important;
    }
    #hub-modal #project-section {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    .modal-close-btn {
        display: flex !important; 
        position: absolute !important; 
        top: -45px !important; /* Pushes the button straight up into the new empty space */
        right: 0 !important;
        background-color: rgba(0, 0, 0, 0.4) !important; 
        border-radius: 50% !important;
        z-index: 9999 !important; 
    }

    .mobile-sprint-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: static !important;
        top: auto !important;
        right: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        z-index: auto !important;
    }

    /* --- MOBILE SORT & FILTER ICONS --- */
    .sprint-sort-btn span,
    .sprint-filter-btn span {
        display: none !important;
    }

    .sprint-sort-btn,
    .sprint-filter-btn {
        padding: 4px 8px !important; /* Tightens the button into a square */
    }

    /* --- HIDE DUE DATE COUNTDOWN ON MOBILE --- */
    .sidebar-countdown,
    .mobile-hidden-countdown {
        display: none !important;
    }

    /* --- MOBILE SPLASH SCREEN SIZING --- */
    .intro-splash-logo {
        width: 180px; /* Scaled down perfectly for phones */
        border-radius: 40px; /* Adjusted corners to match the new size */
    }

    .splash-title {
        font-size: 2.8em; /* Smaller text so it fits beautifully on one line */
    }

    /* --- MOBILE MENU POPOVER: Open to the left --- */
    .idea-card-menu-container .idea-card-menu-popover {
        left: auto !important;
        right: 0 !important;
    }
    .bulletpoint-menu-container .bulletpoint-menu-popover {
        left: auto !important;
        right: 0 !important;
    }
    .comment-menu-popover {
        left: auto !important;
        right: 0 !important;
    }
}

/* ===== CALENDAR TAB ===== */
.tab-btn-calendar { display:flex; align-items:center; justify-content:center; padding: 8px 14px; }
.tab-btn-calendar svg { pointer-events: none; }.tab-btn-calendar svg { transition: filter 0.2s, stroke 0.2s; }
.tab-btn-calendar.active svg { filter: drop-shadow(0 0 4px var(--stage-color-create)) drop-shadow(0 0 8px var(--stage-color-create)); stroke: var(--stage-color-create); }
#notepad-tab.active { display:flex; flex-direction:column; height:100%; overflow:hidden; padding:4px 0 0; }
.npcal-header { display:flex; align-items:center; justify-content:space-between; padding:0 2px 6px; flex-shrink:0; }
.npcal-header h3 { margin:0; font-size:0.82em; font-weight:700; color:var(--text-color); text-align:center; }
.npcal-nav { background:none; border:none; color:rgba(255,255,255,0.4); font-size:1.4em; cursor:pointer; padding:0 6px; border-radius:5px; line-height:1; transition:color 0.15s; }
.npcal-nav:hover { color:#fff; }
.npcal-dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; flex-shrink:0; margin-bottom:2px; }
.npcal-dow span { font-size:0.6em; color:rgba(255,255,255,0.22); font-weight:700; padding:2px 0; }
.npcal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; flex-shrink:0; margin-bottom:8px; }
.npcal-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; font-size:0.73em; color:rgba(255,255,255,0.5); transition:background 0.15s; gap:1px; padding:4px 0; }
.npcal-cell:hover { background:rgba(255,255,255,0.07); color:#fff; }
.npcal-today { color:var(--stage-color-create) !important; font-weight:800; }
.npcal-today .npcal-num { border-bottom:2px solid var(--stage-color-create); }
.npcal-selected { background:rgba(var(--stage-color-create-rgb),0.18) !important; color:#fff !important; font-weight:700; }
.npcal-badges { display: flex; gap: 3px; justify-content: center; margin-top: 1px; }
.npcal-dot { width: 5px; height: 5px; border-radius: 50%; }
.npcal-dot-task { background: #e74c3c; box-shadow: 0 0 4px rgba(231,76,60,0.6); }
.npcal-dot-note { background: var(--stage-color-create); box-shadow: 0 0 4px rgba(var(--stage-color-create-rgb), 0.6); }.npcal-day-panel { flex:1; overflow-y:auto; border-top:1px solid rgba(255,255,255,0.07); padding-top:8px; display:flex; flex-direction:column; gap:5px; }
.npcal-day-panel-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:0 0 4px; }
.npcal-day-panel-header span { font-size:0.78em; font-weight:700; color:rgba(255,255,255,0.6); }
.npcal-add-btn { background:rgba(var(--stage-color-create-rgb),0.1); border:1px solid rgba(var(--stage-color-create-rgb),0.3); color:var(--stage-color-create); padding:3px 8px; border-radius:5px; font-size:0.7em; font-weight:700; cursor:pointer; }
.npcal-add-btn:hover { background:rgba(var(--stage-color-create-rgb),0.2); }
/* Calendar Bulletpoint Items */
.npcal-bp-item {
    display: flex;
    gap: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    overflow: hidden;
}
.npcal-bp-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
.npcal-bp-item.dragging { opacity: 0.4; }

.npcal-bp-stage-bar { width: 3px; flex-shrink: 0; }

.npcal-bp-content { flex: 1; padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.npcal-bp-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.npcal-bp-type {
    font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06);
    padding: 1px 6px; border-radius: 3px;
}
.npcal-bp-status { display: flex; align-items: center; gap: 4px; font-size: 0.7em; color: rgba(255,255,255,0.4); font-weight: 600; }
.npcal-bp-status .status-indicator { width: 7px; height: 7px; }

.npcal-bp-title { color: #fff; font-size: 0.88em; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.npcal-bp-desc { color: rgba(255,255,255,0.3); font-size: 0.72em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.npcal-bp-footer { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.npcal-bp-sprint-name { font-size: 0.7em; color: rgba(255,255,255,0.25); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npcal-bp-priority { font-size: 0.6em; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; }
.npcal-bp-priority-high { color: #e74c3c; background: rgba(231,76,60,0.12); }
.npcal-bp-priority-med { color: #e6c200; background: rgba(230,194,0,0.12); }

/* Calendar drop target highlight */
.npcal-cell.npcal-drop-target {
    background: rgba(var(--stage-color-create-rgb), 0.2) !important;
    box-shadow: inset 0 0 8px rgba(var(--stage-color-create-rgb), 0.3);
}
.npcal-note-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(var(--stage-color-create-rgb), 0.1);
    border: 1px solid rgba(var(--stage-color-create-rgb), 0.2);
    border-left: 3px solid var(--stage-color-create);
    border-radius: 8px;
    margin-top: 4px;
    transition: all 0.15s;
}
.npcal-note-item.dragging { opacity: 0.4; }
.npcal-note-item:hover { background: rgba(var(--stage-color-create-rgb), 0.14); }
.npcal-note-done { opacity: 0.45; }
.npcal-note-done .npcal-note-title { text-decoration: line-through; }

.npcal-note-check {
    background: none; border: none; cursor: pointer;
    padding: 2px 0 0 0; flex-shrink: 0; display: flex; align-items: center;
}
.npcal-note-circle {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--stage-color-create); display: block;
    transition: background 0.15s;
}
.npcal-note-check:hover .npcal-note-circle { background: rgba(var(--stage-color-create-rgb), 0.3); }

.npcal-note-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.npcal-note-title {
    font-size: 1em; font-weight: 700; color: #fff; outline: none;
    padding: 2px 4px; border-radius: 3px; line-height: 1.3;
}
.npcal-note-title:focus { background: rgba(255,255,255,0.06); }
.npcal-note-title:empty:before {
    content: attr(data-placeholder); color: rgba(255,255,255,0.2); pointer-events: none;
}
.npcal-note-desc {
    font-size: 0.82em; color: rgba(255,255,255,0.45); outline: none;
    padding: 1px 4px; border-radius: 3px; line-height: 1.4;
}
.npcal-note-desc:focus { background: rgba(255,255,255,0.06); }
.npcal-note-desc:empty:before {
    content: attr(data-placeholder); color: rgba(255,255,255,0.15); pointer-events: none;
}

.npcal-note-delete {
    background: none; border: none; color: rgba(255,255,255,0.1); font-size: 1.1em;
    cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color 0.15s; line-height: 1;
}
.npcal-note-delete:hover { color: #e74c3c; }
.npcal-note-done { opacity: 0.4; }
.npcal-note-done .npcal-task-name { text-decoration: line-through; }
.npcal-note-check {
    background: none; border: none; color: rgba(255,255,255,0.4); font-size: 1em;
    cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color 0.15s;
}
.npcal-note-check:hover { color: #3dffaf; }
.npcal-note-done .npcal-note-check { color: #3dffaf; }
.npcal-note-delete {
    background: none; border: none; color: rgba(255,255,255,0.15); font-size: 1.1em;
    cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color 0.15s;
}
.npcal-note-delete:hover { color: #e74c3c; }
.npcal-fullscreen-btn {
    background: none; border: none; color: rgba(255,255,255,0.12);
    cursor: pointer; padding: 6px 4px; flex-shrink: 0; display: flex;
    align-items: flex-start; transition: color 0.15s;
}
.npcal-fullscreen-btn:hover { color: var(--stage-color-create); }

.npcal-note-fullscreen {
    background: none; border: none; color: rgba(255,255,255,0.1);
    cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color 0.15s; line-height: 1;
}
.npcal-note-fullscreen:hover { color: var(--stage-color-create); }

#note-modal-title:empty:before, #note-modal-desc:empty:before {
    content: attr(data-placeholder); color: rgba(255,255,255,0.2); pointer-events: none;
}
#note-modal-title:focus, #note-modal-desc:focus {
    border-color: var(--stage-color-create);
    background: rgba(var(--stage-color-create-rgb), 0.05);
}
#npcal-tasks { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }

/* === TEAM HEALTH === */
#teamhealth-tab { display: none; }
#teamhealth-tab.active { display: block; }
#teamhealth-content { position: relative; }
.th-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
}
.th-ring-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
}
.th-ring-score {
    position: absolute;
    font-size: 1.4em;
    font-weight: 900;
    letter-spacing: -0.5px;
}
.th-header-text h3 { margin: 0 0 2px; font-size: 1.2em; }
.th-overall-rating {
    font-size: 1em !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.th-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.th-cat {
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.th-cat:hover { background: rgba(255,255,255,0.06); }
.th-cat-icon-large {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
}
.th-cat-icon-large svg { width: 32px; height: 32px; }
.th-cat-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.th-cat-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.th-cat-name {
    font-weight: 700;
    font-size: 1em;
    color: var(--text-color);
    flex-grow: 1;
}
.th-cat-level {
    font-weight: 800;
    font-size: 1em;
    font-family: monospace;
    white-space: nowrap;
}
.th-level-bar {
    display: flex;
    gap: 4px;
}
.th-level-seg {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    transition: background 0.3s;
}
.th-level-seg.active {
    box-shadow: 0 0 8px rgba(255,255,255,0.1);
}
.th-cat-lvlmsg {
    font-weight: 700;
    font-size: 1.1em;
    font-style: italic;
    margin: 0 0 8px !important;
    line-height: 1.4;
}
.th-cat-lvlname {
    font-size: 1em;
    font-family: inherit;
    font-weight: 700;
}
.th-cat.th-lvl1 .th-cat-icon-large,
.th-cat.th-lvl2 .th-cat-icon-large,
.th-cat.th-lvl3 .th-cat-icon-large {
    animation: thPulse 2s ease-in-out infinite;
}
@keyframes thPulse {
    0%, 100% { filter: none; transform: scale(1); opacity: 0.6; }
    50% { filter: drop-shadow(0 0 12px currentColor) brightness(1.8); transform: scale(1.15); opacity: 1; }
}
@keyframes thDescFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ===== CUE ICON INLINE ===== */
.cue-icon-inline {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    vertical-align: baseline;
    margin-left: 3px;
    color: inherit;
    position: relative;
    top: 2px;
}
.cue-icon-inline svg {
    width: 100%;
    height: 100%;
    display: block;
}

.th-popup-cue {
    font-size: 0.85em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.th-popup-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    animation: thDescFade 0.25s ease;
}
.th-popup-card {
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 28px 24px;
    border-radius: 0;
    border: none;
    background: var(--modal-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.th-popup-icon { margin-bottom: 12px; }
.th-popup-icon svg { width: 48px; height: 48px; }
.th-popup-name { font-size: 1.5em; font-weight: 800; margin-bottom: 4px; }
.th-popup-level { font-size: 1.2em; font-weight: 800; font-family: monospace; margin-bottom: 16px; opacity: 0.8; }
.th-popup-msg { font-size: 1.2em; font-weight: 700; font-style: italic; line-height: 1.5; margin: 0 0 16px; color: rgba(255,255,255,0.9) !important; }
.th-popup-desc { font-size: 1em; color: rgba(255,255,255,0.5); line-height: 1.6; margin: 0 0 20px; }
.th-popup-close { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); padding: 8px 24px; border-radius: 8px; font-size: 0.9em; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.th-popup-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* === SPRINT REVIEW POST-MORTEM === */
.sr-modal-content {
    max-width: 560px;
    overflow-y: auto;
    position: relative;
    background: linear-gradient(180deg, rgba(61,255,175,0.06) 0%, var(--modal-bg) 25%);
    border: 1px solid rgba(61,255,175,0.15);
}
.sr-header { text-align: center; margin-bottom: 8px; }
.sr-bar-row { margin-bottom: 10px; }
.sr-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82em;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
}
.sr-bar-pct { font-family: monospace; font-weight: 800; }
.sr-bar-track {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.sr-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.8s ease-out;
}
.sr-score-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}
.sr-score-wrap {
    width: 160px;
    height: 160px;
    margin-top: 8px;
}
.sr-star-placeholder {
    display: block;
    margin: auto;
}
.sr-score-particles { z-index: 3; }
.sr-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-left: 4px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    margin-bottom: 10px;
    line-height: 1.65;
    max-height: 90px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: max-height 0.35s ease;
}
.sr-note::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 36px;
    background: linear-gradient(to bottom, transparent, rgba(8,8,16,0.95));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.sr-note.sr-note-expanded {
    max-height: 800px;
}
.sr-note.sr-note-expanded::after {
    opacity: 0;
}
.sr-note-icon {
    flex-shrink: 0; width: 32px; height: 32px; margin-top: 2px;
}
.sr-note-icon svg { width: 32px; height: 32px; }
.sr-note-content { flex: 1; min-width: 0; }
.sr-note-title {
    font-size: 0.95em; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.3px;
}
.sr-note-text {
    font-size: 0.82em; color: rgba(255,255,255,0.6); line-height: 1.7;
}
.sr-note-bonus {
    display: inline-block; font-weight: 800;
}
@keyframes srBonusPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.sr-bar-label-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sr-tip-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.35);
    padding: 0;
    transition: all 0.2s;
    flex-shrink: 0;
}
.sr-tip-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.sr-tip-btn.sr-tip-active { color: #e6c200; border-color: rgba(230,194,0,0.4); background: rgba(230,194,0,0.08); }
.sr-tip-btn svg { pointer-events: none; }
.sr-tip-content {
    margin: 6px 0 4px 30px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(230,194,0,0.4);
    border-radius: 6px;
    font-size: 0.8em;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    animation: srTipSlide 0.25s ease-out;
}
.sr-tip-content strong { color: rgba(255,255,255,0.75); }
@keyframes srTipSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== CUE NOTIFICATION SYSTEM ===== */
.aria-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(12px);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ariaFadeIn 0.2s ease;
    pointer-events: all;
}
@keyframes ariaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* ===== NUDGE SYSTEM ===== */
.nudge-btn-row { display: flex; gap: 10px; justify-content: center; }
.nudge-btn {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5); border-radius: 10px; padding: 8px 12px;
    cursor: pointer; transition: all 0.2s;
}
.nudge-btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform: scale(1.1); }
.nudge-btn.nudge-sent { transform: scale(1.4); filter: brightness(2) drop-shadow(0 0 8px currentColor); transition: transform 0.15s ease-out, filter 0.15s ease-out; }

.nudge-emoji-display { animation: nudgePulse 1.5s ease-in-out infinite; margin-bottom: 8px; }
.nudge-label { font-size: 1.1em; font-weight: 800; letter-spacing: 1px; animation: nudgePulse 1.5s ease-in-out infinite; }
@keyframes nudgePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.85; } }

.nudge-like-btn {
    position: absolute; bottom: 10px; right: 10px;
    background: transparent; border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3); border-radius: 50%; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.nudge-like-btn:hover { color: #e74c3c; border-color: #e74c3c; background: rgba(231,76,60,0.1); }
.nudge-like-btn.nudge-liked { color: #e74c3c; border-color: #e74c3c; }

.nudge-popup-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
    z-index: 2147483646; display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.3s ease;
}
.nudge-popup-card {
    background: #1a1a1e; border-radius: 16px; padding: 32px 40px;
    text-align: center; animation: nudgePopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer; position: relative;
}
.nudge-popup-like-btn {
    position: absolute; bottom: 12px; right: 12px;
    background: transparent; border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.3); border-radius: 50%; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
}
.nudge-popup-like-btn:hover { color: #e74c3c; border-color: #e74c3c; background: rgba(231,76,60,0.1); }
.nudge-popup-like-btn.nudge-liked { color: #e74c3c; border-color: #e74c3c; }
@keyframes nudgePopIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== WORKSPACE TABLE ===== */
.ws-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ws-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
}
.ws-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 0.8em;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    white-space: nowrap;
}
.ws-th-proj {
    text-align: center !important;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.ws-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}
.ws-td-name {
    padding: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.ws-td-email {
    padding: 10px;
    color: rgba(255,255,255,0.35);
    font-size: 0.92em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.ws-td-check {
    padding: 10px;
    text-align: center;
}
.ws-td-action {
    padding: 10px;
    text-align: center;
}
.ws-td-action .ws-remove-btn {
    background: transparent;
    border: 1px solid rgba(231,76,60,0.25);
    color: rgba(231,76,60,0.6);
    font-size: 1.1em;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
}
.ws-td-action .ws-remove-btn:hover {
    background: rgba(231,76,60,0.12);
    border-color: #e74c3c;
    color: #e74c3c;
}
.ws-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid rgba(255,255,255,0.15);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 auto;
    transition: all 0.15s;
}
.ws-checkbox svg { opacity: 0; transition: opacity 0.15s; }
.ws-checkbox.checked {
    border-color: #3dffaf;
    background: rgba(61,255,175,0.1);
}
.ws-checkbox.checked svg { opacity: 1; stroke: #3dffaf; filter: drop-shadow(0 0 3px rgba(61,255,175,0.4)); }
.ws-checkbox:hover { border-color: rgba(255,255,255,0.35); }

.aria-popup {
    max-width: 440px;
    width: 100%;
    background: #1a1a1e;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    text-align: center;
    padding: 32px 28px;
    pointer-events: all;
    animation: ariaSlideIn 0.3s ease-out;
}
@keyframes ariaSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.aria-scanline { display: none; }
.aria-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}
.aria-title {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
}
.aria-alert-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.aria-blink-red {
    background: #e74c3c;
    box-shadow: 0 0 6px #e74c3c;
    animation: ariaBlink 1s ease-in-out infinite;
}
.aria-blink-green {
    background: #3dffaf;
    box-shadow: 0 0 6px #3dffaf;
    animation: ariaBlink 1.5s ease-in-out infinite;
}
@keyframes ariaBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}
.aria-label {
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.3);
    margin-bottom: 4px;
}
.aria-status {
    font-size: 1.5em;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
}
.aria-body {
    margin-bottom: 20px;
}
.aria-message {
    font-size: 0.95em;
    line-height: 1.6;
    color: rgba(255,255,255,0.45);
    margin: 0;
    font-style: italic;
}
.aria-footer {
    margin-bottom: 24px;
}
.aria-ref {
    font-family: 'Courier New', monospace;
    font-size: 0.55em;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.12);
}
.aria-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.aria-btn {
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
}
.aria-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.aria-btn-cancel:hover, .aria-btn-block:hover {
    background: rgba(231,76,60,0.15);
}
.aria-btn-proceed:hover, .aria-btn-dismiss:hover {
    background: rgba(255,255,255,0.12);
}
/* A.R.I.A. Probability Slider in Settings */
.aria-slider-container {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aria-slider-label {
    font-size: 0.8em;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}
.aria-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.aria-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
}
.aria-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3dffaf;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(61,255,175,0.4);
}
.aria-slider-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85em;
    font-weight: 800;
    color: #3dffaf;
    min-width: 32px;
    text-align: right;
}