/* ════════════════════════════════════════════════════════════
   TEMENOS · styles.css
   All visual styling — base layout, controls, pill nav,
   slide-up panels, night mode overrides.
   ════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
    --a-dark: #141413;
    --a-light: #faf9f5;
    --a-mid: #b0aea5;
    --a-lg: #e8e6dc;
    --a-org: #d97757;   /* terracotta — primary action */
    --a-blue: #6a9bcc;  /* secondary action */
    --a-grn: #788c5d;   /* accent / Pro */
}

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

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--a-light), #f0ede6);
    height: 100vh;
    overflow: hidden;
    color: var(--a-dark);
    transition: background 0.4s ease;
}
/* Palette body backgrounds — match the canvas edge colour exactly */
body.night-mode { background: #080604; }
body.dusk-mode  { background: #201934; }
body.rain-mode  { background: #8c9898; }

/* ── Layout ─────────────────────────────────────────────────── */
.wrap {
    display: flex;
    height: 100vh;
    padding: 0;
    gap: 0;
}

/* Canvas container — full bleed, no border or shadow */
.ca {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
}
#cc { width: 100%; height: 100%; }
#cc canvas { display: block; }

/* Hover tooltip (fixed, so it escapes canvas overflow:hidden) */
#tip {
    position: fixed;
    display: none;
    padding: 14px 18px;
    border-radius: 5px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    max-width: 248px;
    pointer-events: none;
    z-index: 300;
    box-shadow: 0 4px 22px rgba(0,0,0,.18);
    border: 1px solid transparent;
}

/* Scroll hint — full-width so centering works on all screen sizes */
#hint {
    position: absolute;
    bottom: 14px;
    left: 0; right: 0;
    text-align: center;
    color: rgba(80,60,30,.26);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Shared control components ──────────────────────────────── */
/* Used inside the Settings panel */

.si {
    width: 100%;
    background: var(--a-light);
    padding: 9px 10px;
    border-radius: 7px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    margin-bottom: 9px;
    border: 1px solid var(--a-lg);
    text-align: center;
    color: var(--a-dark);
}
.si:focus { outline: none; border-color: var(--a-org); }

.sr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }

.cg { margin-bottom: 13px; }
.cg label { display: block; font-size: 11px; font-weight: 500; margin-bottom: 5px; }

.sc { display: flex; align-items: center; gap: 9px; }
.sc input[type=range] {
    flex: 1; height: 3px; background: var(--a-lg);
    border-radius: 2px; outline: none; -webkit-appearance: none;
}
.sc input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px;
    background: var(--a-org);
    border-radius: 50%; cursor: pointer;
}
.vd { font-family: 'Courier New', monospace; font-size: 11px; color: var(--a-mid); min-width: 36px; text-align: right; }

/* Palette grid */
.pg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pb {
    padding: 7px 4px; border-radius: 6px;
    border: 1.5px solid var(--a-lg);
    background: white; font-size: 10px;
    font-family: 'Poppins', sans-serif; cursor: pointer;
    color: var(--a-dark); transition: all .18s; text-align: center;
}
.pb.active { border-color: var(--a-grn); background: rgba(120,140,93,.09); color: var(--a-grn); font-weight: 600; }
.pb:hover:not(.active) { border-color: var(--a-org); }

/* Action buttons */
.btn {
    background: var(--a-org); color: white; border: none;
    padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all .18s; width: 100%;
    font-family: 'Poppins', sans-serif;
}
.btn:hover { background: #c76440; transform: translateY(-1px); }
.btn.sec  { background: var(--a-blue);  } .btn.sec:hover  { background: #5485b0; }
.btn.ter  { background: var(--a-grn);   } .btn.ter:hover  { background: #637850; }
.br { display: flex; gap: 7px; margin-bottom: 7px; } .br .btn { flex: 1; }

/* ── Auth overlay ───────────────────────────────────────────── */
.auth-overlay {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(237,229,204,.55);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.auth-card {
    width: min(340px, 90vw);
    background: linear-gradient(160deg, rgba(255,255,255,.72) 0%, rgba(242,236,218,.88) 100%);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(20,14,6,.18), inset 0 1.5px 0 rgba(255,255,255,.9);
    padding: 36px 32px 32px;
    text-align: center;
}
.auth-logo {
    font-family: 'Lora', serif; font-size: 26px; font-weight: 500;
    letter-spacing: .06em; color: rgba(38,28,18,.75); margin-bottom: 2px;
}
.auth-logo-sub {
    font-family: 'Lora', serif; font-style: italic;
    font-size: 11px; color: rgba(80,60,30,.4); margin-bottom: 26px;
    letter-spacing: .08em;
}
/* "Welcome back" / "Create your account" heading */
.auth-heading {
    font-family: 'Lora', serif; font-size: 14px; font-weight: 500;
    color: rgba(38,28,18,.65); margin-bottom: 18px; letter-spacing: .01em;
}

/* Google OAuth button */
.auth-google-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 11px 14px; margin-bottom: 14px;
    background: white; border: 1.5px solid rgba(80,60,30,.18); border-radius: 10px;
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
    color: rgba(38,28,18,.82); cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.auth-google-btn:hover:not(:disabled) {
    background: #f8f6f2; border-color: rgba(80,60,30,.32);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.auth-google-btn:disabled { opacity: .6; cursor: default; }
.ag-ic { width: 18px; height: 18px; flex-shrink: 0; }
.ag-label { flex: 1; text-align: center; }

/* "or" divider */
.auth-sep {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; color: rgba(80,60,30,.3);
    font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: .06em;
}
.auth-sep::before, .auth-sep::after {
    content: ''; flex: 1; height: 1px; background: rgba(80,60,30,.12);
}

.auth-input {
    width: 100%; padding: 11px 14px; margin-bottom: 10px;
    border: 1.5px solid var(--a-lg); border-radius: 10px;
    font-family: 'Poppins', sans-serif; font-size: 13px;
    background: rgba(255,255,255,.8); color: var(--a-dark); outline: none;
    transition: border-color .15s; text-align: left;
}
.auth-input:focus  { border-color: var(--a-org); }
.auth-input.auth-shake { animation: authShake .4s ease; }
@keyframes authShake {
    0%,100%{ transform: translateX(0); }
    25%    { transform: translateX(-6px); }
    75%    { transform: translateX(6px); }
}

/* Inline error message */
.auth-err {
    font-family: 'Poppins', sans-serif; font-size: 11.5px;
    color: #b83232; background: rgba(184,50,50,.07);
    border: 1px solid rgba(184,50,50,.2); border-radius: 8px;
    padding: 8px 12px; margin-bottom: 10px; text-align: left; line-height: 1.5;
}

.auth-btn {
    width: 100%; padding: 12px; border: none; border-radius: 10px;
    background: var(--a-org); color: white;
    font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background .18s; margin-bottom: 12px;
}
.auth-btn:hover:not(:disabled)  { background: #c76440; }
.auth-btn:disabled               { opacity: .6; cursor: default; }

/* Bottom link row: forgot password + mode toggle */
.auth-links {
    display: flex; justify-content: space-between; align-items: center;
}
.auth-link {
    background: none; border: none; padding: 2px 0; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-size: 11px;
    color: rgba(80,60,30,.45); transition: color .15s; text-decoration: underline;
    text-decoration-color: transparent; text-underline-offset: 2px;
}
.auth-link:hover { color: var(--a-org); text-decoration-color: var(--a-org); }

.auth-sent-icon  { font-size: 32px; margin-bottom: 14px; }
.auth-sent-msg   {
    font-family: 'Lora', serif; font-size: 15px; font-weight: 500; line-height: 1.7;
    color: rgba(38,28,18,.8); margin-bottom: 6px;
}
.auth-sent-msg strong { color: var(--a-dark); font-weight: 600; }
.auth-sent-sub   {
    font-family: 'Lora', serif; font-style: italic;
    font-size: 11.5px; color: var(--a-mid); line-height: 1.6; margin-bottom: 18px;
}
.auth-sent-sub strong { font-style: normal; color: rgba(38,28,18,.7); }
.auth-retry {
    background: none; border: 1.5px solid var(--a-lg); border-radius: 8px;
    padding: 8px 16px; font-family: 'Poppins', sans-serif; font-size: 11px;
    color: var(--a-mid); cursor: pointer; transition: all .15s;
}
.auth-retry:hover { border-color: var(--a-org); color: var(--a-org); }

/* ── Scroll-to-present button ───────────────────────────────── */
.scroll-now {
    position: absolute; bottom: 22px; right: 22px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.62);
    background: linear-gradient(145deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,.07) 100%);
    backdrop-filter: blur(28px) saturate(190%) brightness(1.04);
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.04);
    box-shadow: 0 4px 18px rgba(20,14,6,.14), inset 0 1.5px 0 rgba(255,255,255,.78);
    font-size: 18px; cursor: pointer; z-index: 88;
    color: rgba(50,38,22,.6); display: flex; align-items: center; justify-content: center;
    transform: translateY(14px); opacity: 0; transition: background .18s, box-shadow .18s;
}
.scroll-now:hover {
    background: linear-gradient(145deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.38) 100%);
    box-shadow: 0 6px 22px rgba(20,14,6,.2), inset 0 1.5px 0 rgba(255,255,255,.9);
}
.arrived .scroll-now { animation: scrollArrive .55s cubic-bezier(.33,1,.68,1) 1.2s forwards; }
@keyframes scrollArrive { to { opacity: 1; transform: translateY(0); } }

/* Night / Dusk / Rain variants */
body.night-mode .scroll-now {
    background: linear-gradient(145deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.04) 100%);
    border-color: rgba(0,0,0,.75); color: rgba(200,178,138,.7);
    box-shadow: 0 4px 18px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(255,255,255,.15);
}
body.dusk-mode .scroll-now {
    background: linear-gradient(145deg, rgba(145,121,172,.22) 0%, rgba(81,57,103,.12) 100%);
    border-color: rgba(0,0,0,.8); color: rgba(192,170,220,.7);
    box-shadow: 0 4px 18px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(145,121,172,.18);
}
body.rain-mode .scroll-now {
    background: linear-gradient(145deg, rgba(195,215,235,.52) 0%, rgba(160,190,220,.18) 100%);
    border-color: rgba(140,185,225,.65); color: rgba(22,50,78,.65);
}

/* ── Arrival animation ──────────────────────────────────────── */
/* Elements start invisible and float up once the map is ready */
.map-title { opacity: 0; transform: translateY(4px); }
#hint      { opacity: 0; }

.arrived .map-title { animation: arriveUp .7s ease 0.35s forwards; }
.arrived #hint      { animation: arriveUp .7s ease 0.70s forwards; }
@keyframes arriveUp { to { opacity: 1; transform: translateY(0); } }

/* ── Map title overlay ──────────────────────────────────────── */
/* Centred above the pill nav */
.map-title {
    position: absolute; top: 14px; left: 0; right: 0;
    text-align: center; pointer-events: none; z-index: 10;
}
.map-title h1  { font-family: 'Lora', serif; font-size: 15px; font-weight: 500; letter-spacing: .06em; color: rgba(38,28,18,.55); }
.map-title .sub { font-family: 'Lora', serif; font-style: italic; font-size: 10px; color: rgba(80,60,30,.32); }
.map-title.night h1  { color: rgba(212,198,168,.50); }
.map-title.night .sub { color: rgba(165,142,100,.30); }

/* ── Floating pill nav — liquid glass ───────────────────────── */
/* Sits below the map title (~52px tall at top:14px) */
.pill {
    position: absolute; top: 62px; left: 50%;
    transform: translateX(-50%) translateY(-14px);
    opacity: 0;
    display: flex; align-items: center; gap: 1px;
    border-radius: 60px; padding: 5px 6px; z-index: 100;
    background: linear-gradient(145deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,.07) 100%);
    backdrop-filter: blur(28px) saturate(190%) brightness(1.04);
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.04);
    border: 1px solid rgba(255,255,255,.62);
    box-shadow:
        0 8px 32px rgba(20,14,6,.18),
        0 2px 8px rgba(20,14,6,.08),
        inset 0 1.5px 0 rgba(255,255,255,.78),
        inset 0 -1px 0 rgba(0,0,0,.04);
}
.arrived .pill { animation: pillDown .55s cubic-bezier(.33,1,.68,1) 1.05s forwards; }
@keyframes pillDown { to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Night pill */
.pill.night {
    background: linear-gradient(145deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 55%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(0,0,0,.75);
    box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.25);
}

/* Pill buttons */
.pb2 {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 12px; border: none; background: none; cursor: pointer;
    border-radius: 48px; transition: all .18s; position: relative;
    font-family: 'Poppins', sans-serif; min-width: 50px;
}
.pb2:hover { background: rgba(255,255,255,.32); }
.pb2.act {
    background: linear-gradient(145deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.24) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.09);
}
.pb2.pro-l { opacity: .42; cursor: default; }
.pill.night .pb2:hover { background: rgba(255,255,255,.1); }
.pill.night .pb2.act {
    background: linear-gradient(145deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 100%);
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(0,0,0,.32);
}
.pi { font-size: 16px; line-height: 1; }
.pl { font-size: 8px; font-weight: 500; color: rgba(50,38,22,.65); letter-spacing: .05em; text-transform: uppercase; margin-top: 1px; }
.pb2.act .pl { color: var(--a-org); }
.pill.night .pl { color: rgba(200,178,138,.62); }
.pill.night .pb2.act .pl { color: #d4aa62; }
.pbadge {
    position: absolute; top: 4px; right: 3px;
    font-size: 6px; font-weight: 700; color: white;
    background: var(--a-grn); padding: 1px 4px; border-radius: 3px; letter-spacing: .04em;
}

/* ── Dusk palette theme — deep purple dark ──────────────────── */
/* #201934 bg · #9179ac lavender · #513967/#423c57 fills         */
.pill.dusk {
    background: linear-gradient(145deg, rgba(145,121,172,.22) 0%, rgba(81,57,103,.12) 55%, rgba(37,20,60,.08) 100%);
    border: 1px solid rgba(0,0,0,.8);
    box-shadow: 0 8px 32px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(145,121,172,.22), inset 0 -1px 0 rgba(0,0,0,.28);
}
.pill.dusk .pb2:hover  { background: rgba(145,121,172,.14); }
.pill.dusk .pb2.act    {
    background: linear-gradient(145deg, rgba(145,121,172,.28) 0%, rgba(81,57,103,.16) 100%);
    box-shadow: inset 0 1.5px 0 rgba(185,155,215,.28), inset 0 -1px 0 rgba(0,0,0,.35);
}
.pill.dusk .pl          { color: rgba(192,170,220,.62); }
.pill.dusk .pb2.act .pl { color: #b095cc; }

.map-title.dusk h1  { color: rgba(192,170,220,.55); }
.map-title.dusk .sub { color: rgba(145,121,172,.38); }

/* ── Rain palette theme ─────────────────────────────────────── */
/* Cool grey-blue slate glass — matches the canvas misty tones */
.pill.rain {
    background: linear-gradient(145deg, rgba(195,215,235,.52) 0%, rgba(168,195,220,.22) 55%, rgba(140,175,210,.08) 100%);
    border: 1px solid rgba(165,200,230,.68);
    box-shadow: 0 8px 32px rgba(20,45,75,.15), inset 0 1.5px 0 rgba(210,230,248,.8), inset 0 -1px 0 rgba(0,0,0,.04);
}
.pill.rain .pb2:hover  { background: rgba(175,210,235,.32); }
.pill.rain .pb2.act    {
    background: linear-gradient(145deg, rgba(200,220,240,.62) 0%, rgba(168,200,228,.28) 100%);
    box-shadow: inset 0 1.5px 0 rgba(220,238,255,.88), inset 0 -1px 0 rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.09);
}
.pill.rain .pl         { color: rgba(20,45,68,.65); }
.pill.rain .pb2.act .pl { color: #375878; }

.map-title.rain h1  { color: rgba(16,28,40,.55); }
.map-title.rain .sub { color: rgba(30,58,80,.32); }

/* ── Slide-up panels — liquid glass ─────────────────────────── */
.pan {
    position: absolute; left: 0; right: 0; bottom: 0; height: 76%;
    background: linear-gradient(180deg, rgba(252,247,235,.95) 0%, rgba(242,236,218,.98) 100%);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border-top: 1px solid rgba(255,255,255,.68);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 40px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.85);
    transform: translateY(106%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    z-index: 89; display: flex; flex-direction: column; overflow: hidden;
}
.pan.open  { transform: translateY(0); transition: transform .42s cubic-bezier(.33,1,.68,1); }
.pan.night {
    background: linear-gradient(180deg, rgba(26,20,14,.95) 0%, rgba(14,11,7,.99) 100%);
    border-top: 1px solid rgba(0,0,0,.9);
    box-shadow: 0 -4px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.pan.dusk {
    background: linear-gradient(180deg, rgba(37,22,62,.96) 0%, rgba(20,14,38,.99) 100%);
    border-top: 1px solid rgba(0,0,0,.88);
    box-shadow: 0 -4px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(145,121,172,.1);
}
.pan.rain {
    background: linear-gradient(180deg, rgba(212,224,234,.96) 0%, rgba(196,212,224,.98) 100%);
    border-top: 1px solid rgba(180,210,235,.72);
    box-shadow: 0 -4px 40px rgba(20,50,80,.08), inset 0 1px 0 rgba(220,238,255,.85);
}

/* Panel chrome */
/* pan-drag: full-width bar gives a large touch/click target; the pill is a pseudo-element */
.pan-drag {
    width: 100%; height: 28px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: grab;
    background: transparent;
}
.pan-drag::after {
    content: ''; display: block;
    width: 34px; height: 4px;
    background: rgba(80,60,30,.18); border-radius: 2px;
    transition: background .15s, transform .15s;
}
.pan-drag:hover::after  { background: rgba(80,60,30,.40); transform: scaleX(1.15); }
.pan-drag:active        { cursor: grabbing; }
.pan-drag:active::after { background: rgba(80,60,30,.55); }
.pan.night .pan-drag::after { background: rgba(180,155,100,.22); }
.pan.night .pan-drag:hover::after { background: rgba(180,155,100,.48); }
.pan.dusk  .pan-drag::after { background: rgba(145,121,172,.22); }
.pan.dusk  .pan-drag:hover::after { background: rgba(145,121,172,.48); }

.pan-head   { padding: 14px 20px 10px; border-bottom: 1px solid rgba(80,60,30,.08); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.pan.night .pan-head { border-bottom-color: rgba(175,150,100,.1); }

.pan-title  { font-family: 'Lora', serif; font-size: 16px; font-weight: 500; color: var(--a-dark); }
.pan.night .pan-title { color: #d4c8a8; }

.pan-sub    { font-family: 'Lora', serif; font-style: italic; font-size: 11px; color: var(--a-mid); margin-left: 8px; }

.pan-x      { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--a-mid); padding: 5px 8px; border-radius: 5px; font-family: 'Poppins', sans-serif; transition: background .15s; }
.pan-x:hover { background: rgba(80,60,30,.07); }

.pan-body   { padding: 16px 20px 20px; overflow-y: auto; flex: 1; }

/* ── Journal tab switcher ───────────────────────────────────── */
.j-tabs {
    display: flex; gap: 0; flex-shrink: 0;
    border-bottom: 1px solid rgba(80,60,30,.08);
    padding: 0 20px;
}
.j-tab {
    flex: 1; padding: 10px 8px; border: none; background: none;
    font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500;
    color: var(--a-mid); cursor: pointer; transition: all .18s;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.j-tab:hover { color: var(--a-dark); }
.j-tab.act   { color: var(--a-org); border-bottom-color: var(--a-org); }
.pan.night .j-tab      { color: rgba(165,142,100,.5); }
.pan.night .j-tab:hover { color: #d4c8a8; }
.pan.night .j-tab.act  { color: #d4aa62; border-bottom-color: #d4aa62; }
.pan.night .j-tabs     { border-bottom-color: rgba(175,150,100,.1); }

/* ── Journal list view ──────────────────────────────────────── */
.j-season { margin-bottom: 22px; }
.j-season-head {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
    color: var(--a-mid); margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.j-season-head::after {
    content: ''; flex: 1; height: 1px; background: rgba(80,60,30,.09);
}
.pan.night .j-season-head { color: rgba(165,142,100,.55); }
.pan.night .j-season-head::after { background: rgba(175,150,100,.1); }

.j-entry {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 11px 12px; border-radius: 10px;
    background: rgba(255,255,255,.55); border: 1px solid rgba(80,60,30,.07);
    margin-bottom: 7px; cursor: pointer; transition: all .15s;
}
.j-entry:hover { background: rgba(255,255,255,.85); border-color: rgba(217,119,87,.25); }
.pan.night .j-entry {
    background: rgba(255,255,255,.04); border-color: rgba(175,150,100,.12);
}
.pan.night .j-entry:hover { background: rgba(255,255,255,.08); border-color: rgba(192,154,80,.3); }

.j-entry-icon {
    font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px;
}
.j-entry-body { flex: 1; min-width: 0; }
.j-entry-label {
    font-family: 'Lora', serif; font-size: 13px; font-weight: 500;
    color: var(--a-dark); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pan.night .j-entry-label { color: #d4c8a8; }
.j-entry-meta {
    font-size: 9.5px; color: var(--a-mid); margin-bottom: 4px;
    display: flex; align-items: center; gap: 5px;
}
.j-entry-method {
    background: rgba(120,140,93,.1); color: var(--a-grn);
    padding: 1px 5px; border-radius: 3px; font-weight: 500;
}
.pan.night .j-entry-method { background: rgba(120,140,93,.15); color: #a0c080; }
.j-entry-note {
    font-family: 'Lora', serif; font-size: 11px; font-style: italic;
    color: rgba(80,60,30,.55); line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pan.night .j-entry-note { color: rgba(165,142,100,.55); }

/* Edit / delete action buttons — appear on hover */
.j-entry-actions {
    display: flex; flex-direction: column; gap: 2px;
    flex-shrink: 0; opacity: 0; transition: opacity .15s;
    margin-left: 4px;
}
.j-entry:hover .j-entry-actions { opacity: 1; }
.j-act-btn {
    background: none; border: none; font-size: 13px;
    cursor: pointer; padding: 4px 5px; border-radius: 6px;
    line-height: 1; transition: background .12s;
}
.j-edit-btn:hover { background: rgba(106,155,204,.18); }
.j-del-btn:hover  { background: rgba(180,50,50,.14); }
/* Always visible on touch devices */
@media (hover: none) {
    .j-entry-actions { opacity: 1; }
}

/* Empty state */
.j-empty {
    text-align: center; padding: 40px 20px;
}
.j-empty-icon  { font-size: 36px; margin-bottom: 12px; }
.j-empty-title { font-family: 'Lora', serif; font-size: 15px; font-weight: 500; color: var(--a-dark); margin-bottom: 6px; }
.j-empty-sub   { font-family: 'Lora', serif; font-style: italic; font-size: 12px; color: var(--a-mid); line-height: 1.7; }
.pan.night .j-empty-title { color: #d4c8a8; }
.pan.night .j-empty-sub   { color: rgba(165,142,100,.6); }
.pan.dusk  .j-empty-title { color: #c0aad8; }
.pan.dusk  .j-empty-sub   { color: rgba(145,121,172,.6); }
.pan.rain  .j-empty-title { color: #222e38; }
.pan.rain  .j-empty-sub   { color: rgba(40,65,85,.55); }

/* New entry CTA at bottom of list */
.j-new-cta {
    width: 100%; padding: 12px; border-radius: 10px; border: 1.5px dashed rgba(217,119,87,.4);
    background: rgba(217,119,87,.04); color: var(--a-org);
    font-size: 12px; font-weight: 500; font-family: 'Poppins', sans-serif;
    cursor: pointer; transition: all .18s; margin-top: 4px;
}
.j-new-cta:hover { background: rgba(217,119,87,.09); border-color: var(--a-org); }

/* ── Journal panel ──────────────────────────────────────────── */
.etype { display: flex; gap: 8px; margin-bottom: 16px; }
.etb {
    flex: 1; padding: 10px 6px; border-radius: 10px;
    border: 1.5px solid var(--a-lg); background: white;
    cursor: pointer; text-align: center; transition: all .15s;
    font-family: 'Poppins', sans-serif;
}
.etb:hover { border-color: var(--a-org); }
.etb.sel   { border-color: var(--a-org); background: rgba(217,119,87,.07); }
.etb-ic    { font-size: 20px; display: block; margin-bottom: 3px; }
.etb-lb    { font-size: 9px; font-weight: 500; color: var(--a-mid); }

.mth-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 16px; }
.mth-b {
    padding: 8px 4px; border-radius: 8px;
    border: 1.5px solid var(--a-lg); background: white;
    cursor: pointer; text-align: center;
    font-family: 'Poppins', sans-serif; transition: all .15s;
}
.mth-b:hover { border-color: var(--a-blue); }
.mth-b.sel  { border-color: var(--a-blue); background: rgba(106,155,204,.07); }
.mth-ic     { font-size: 16px; display: block; margin-bottom: 2px; }
.mth-lb     { font-size: 8.5px; color: var(--a-mid); }

/* Warm prompt above entry type selector */
.j-prompt {
    font-family: 'Lora', serif; font-size: 15px; font-style: italic;
    color: rgba(80,60,30,.7); margin-bottom: 14px; line-height: 1.5;
}
.pan.night .j-prompt { color: rgba(212,198,168,.65); }

/* Map label input — user supplies the name that appears on the map icon */
.j-map-label {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--a-lg);
    border-radius: 8px; font-family: 'Lora', serif; font-size: 13px;
    background: rgba(255,255,255,.7); color: var(--a-dark);
    margin-bottom: 14px; outline: none; transition: border-color .15s;
}
.j-map-label:focus { border-color: var(--a-org); }
.j-map-label::placeholder { color: rgba(80,60,30,.32); font-style: italic; }
.pan.night .j-map-label {
    background: rgba(255,255,255,.05); border-color: rgba(175,150,100,.2); color: #d4c8a8;
}
.pan.night .j-map-label::placeholder { color: rgba(165,142,100,.35); }
.pan.night .j-map-label:focus { border-color: rgba(192,154,80,.6); }

.jlbl { font-family: 'Lora', serif; font-style: italic; font-size: 13px; color: rgba(80,60,30,.7); margin-bottom: 6px; display: block; }
.pan.night .jlbl { color: rgba(212,198,168,.65); }
.pan.night .jlbl { color: #ccc0a0; }

.jta {
    width: 100%; min-height: 76px; border: 1.5px solid var(--a-lg);
    border-radius: 8px; padding: 9px;
    font-family: 'Lora', serif; font-size: 13px; resize: none;
    background: rgba(255,255,255,.7); color: var(--a-dark); margin-bottom: 14px;
}
.jta:focus { outline: none; border-color: var(--a-org); }

.jsave {
    width: 100%; background: var(--a-org); color: white; border: none;
    padding: 11px; border-radius: 8px; font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: 'Poppins', sans-serif; transition: all .18s;
}
.jsave:hover { background: #c76440; }

/* Journal night mode */
.pan.night .etb          { background: rgba(255,255,255,.04); border-color: rgba(175,150,100,.2); color: #d4c8a8; }
.pan.night .etb:hover    { border-color: rgba(192,154,80,.5); }
.pan.night .etb.sel      { border-color: rgba(192,154,80,.65); background: rgba(192,154,80,.1); }
.pan.night .etb-lb       { color: rgba(165,142,100,.7); }
.pan.night .mth-b        { background: rgba(255,255,255,.04); border-color: rgba(175,150,100,.2); }
.pan.night .mth-b:hover  { border-color: rgba(106,155,204,.5); }
.pan.night .mth-b.sel    { border-color: rgba(106,155,204,.7); background: rgba(106,155,204,.1); }
.pan.night .mth-lb       { color: rgba(165,142,100,.65); }
.pan.night .jta          { background: rgba(255,255,255,.05); border-color: rgba(175,150,100,.2); color: #d4c8a8; }
.pan.night .jta::placeholder { color: rgba(165,142,100,.4); }
.pan.night .jta:focus    { border-color: rgba(192,154,80,.6); }

/* ── Insights panel ─────────────────────────────────────────── */
/* Empty state — mirrors journal empty state styling */
.ins-empty       { text-align: center; padding: 32px 16px 16px; }
.ins-empty-icon  { font-size: 36px; margin-bottom: 14px; }
.ins-empty-title { font-family: 'Lora', serif; font-size: 15px; font-weight: 500; color: var(--a-dark); margin-bottom: 8px; }
.ins-empty-sub   { font-family: 'Lora', serif; font-style: italic; font-size: 12px; color: var(--a-mid); line-height: 1.75; }
.pan.night .ins-empty-title { color: #d4c8a8; }
.pan.night .ins-empty-sub   { color: rgba(165,142,100,.6); }
.pan.dusk  .ins-empty-title { color: #c0aad8; }
.pan.dusk  .ins-empty-sub   { color: rgba(145,121,172,.6); }

.ins-stats { display: flex; gap: 8px; margin-bottom: 18px; }
.ins-s {
    flex: 1; background: rgba(255,255,255,.65); border-radius: 10px;
    padding: 11px; text-align: center; border: 1px solid var(--a-lg);
}
.ins-n { font-size: 20px; font-weight: 600; color: var(--a-dark); }
.ins-l { font-size: 9px; color: var(--a-mid); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

.ins-sh {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    color: var(--a-mid); margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.ins-sh::before { content: '•'; color: var(--a-org); }

.ins-pat {
    font-size: 12px; color: var(--a-dark); line-height: 1.8;
    background: rgba(255,255,255,.6); border-radius: 8px; padding: 10px 12px;
    border-left: 2px solid var(--a-org); margin-bottom: 14px;
}
.ins-q {
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; font-style: italic;
    line-height: 1.8; color: #7a3818; text-align: center; padding: 14px;
    border-radius: 10px; background: rgba(217,119,87,.06); margin-bottom: 14px;
}
.ins-pro { background: rgba(120,140,93,.08); border: 1.5px dashed rgba(120,140,93,.4); border-radius: 10px; padding: 12px 14px; text-align: center; }
.ins-pro-t { font-size: 12px; font-weight: 600; color: var(--a-grn); margin-bottom: 3px; }
.ins-pro-s { font-size: 11px; color: var(--a-mid); }
.ai-badge {
    display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em; color: var(--a-grn);
    background: rgba(120,140,93,.1); padding: 2px 7px; border-radius: 4px; margin-left: 7px;
}

/* Insights night mode */
.pan.night .ins-q    { color: #e8c89a; background: rgba(192,154,80,.1); }
.pan.night .ins-pat  { color: #c8bca8; background: rgba(255,255,255,.05); border-left-color: rgba(192,154,80,.5); }
.pan.night .ins-s    { background: rgba(255,255,255,.05); border-color: rgba(175,150,100,.2); }
.pan.night .ins-n    { color: #d4c8a8; }
.pan.night .ins-pro  { background: rgba(120,140,93,.1); border-color: rgba(120,140,93,.3); }
.pan.night .ins-pro-s { color: rgba(165,142,100,.7); }

/* ── Settings panel ─────────────────────────────────────────── */
.set-sh {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    color: var(--a-mid); margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.set-sh::before { content: '•'; color: var(--a-org); }
.set-mb { margin-bottom: 20px; }

.exp-btn {
    width: 100%; padding: 10px; border-radius: 8px;
    border: 1.5px solid var(--a-blue); background: rgba(106,155,204,.08);
    color: var(--a-blue); font-size: 11px; font-weight: 500;
    cursor: pointer; font-family: 'Poppins', sans-serif;
    transition: all .18s; margin-bottom: 6px; display: block;
}
.exp-btn:hover { background: rgba(106,155,204,.16); }

.about-t { font-family: 'Lora', serif; font-size: 14px; font-weight: 500; color: var(--a-dark); margin-bottom: 2px; }
.about-s { font-family: 'Lora', serif; font-style: italic; font-size: 11px; color: var(--a-mid); }
.pan.night .about-t { color: #d4c8a8; }

/* Settings night mode */
.pan.night .pb                  { background: rgba(255,255,255,.04); border-color: rgba(175,150,100,.2); color: #c8bca8; }
.pan.night .pb.active           { border-color: rgba(120,140,93,.65); background: rgba(120,140,93,.14); color: #a0c080; font-weight: 600; }
.pan.night .pb:hover:not(.active) { border-color: rgba(192,154,80,.5); }
.pan.night .si                  { background: rgba(255,255,255,.05); border-color: rgba(175,150,100,.2); color: #d4c8a8; }
.pan.night .si:focus            { border-color: rgba(192,154,80,.55); }
.pan.night .cg label            { color: #c8bca8; }
.pan.night .vd                  { color: rgba(165,142,100,.7); }
.pan.night .sc input[type=range] { background: rgba(175,150,100,.22); }
.pan.night .exp-btn             { border-color: rgba(106,155,204,.35); background: rgba(106,155,204,.06); color: rgba(140,180,220,.75); }
.pan.night .exp-btn:hover       { background: rgba(106,155,204,.12); }

/* ── Dusk panel overrides — mirrors night structure, purple tones ── */
.pan.dusk .pan-drag        { background: transparent; } /* pill colour via ::after override above */
.pan.dusk .pan-head        { border-bottom-color: rgba(145,121,172,.12); }
.pan.dusk .pan-title       { color: #c0aad8; }
.pan.dusk .pan-sub         { color: rgba(145,121,172,.6); }
.pan.dusk .pan-x           { color: rgba(145,121,172,.55); }
.pan.dusk .pan-x:hover     { background: rgba(145,121,172,.1); }

/* Journal dusk */
.pan.dusk .j-prompt        { color: rgba(192,170,220,.65); }
.pan.dusk .jlbl            { color: rgba(192,170,220,.65); }
.pan.dusk .j-tabs          { border-bottom-color: rgba(145,121,172,.12); }
.pan.dusk .j-tab           { color: rgba(145,121,172,.5); }
.pan.dusk .j-tab:hover     { color: #c0aad8; }
.pan.dusk .j-tab.act       { color: #b095cc; border-bottom-color: #b095cc; }
.pan.dusk .j-season-head   { color: rgba(145,121,172,.55); }
.pan.dusk .j-season-head::after { background: rgba(145,121,172,.12); }
.pan.dusk .j-entry         { background: rgba(145,121,172,.06); border-color: rgba(145,121,172,.14); }
.pan.dusk .j-entry:hover   { background: rgba(145,121,172,.12); border-color: rgba(145,121,172,.32); }
.pan.dusk .j-entry-label   { color: #c0aad8; }
.pan.dusk .j-entry-note    { color: rgba(145,121,172,.55); }
.pan.dusk .j-entry-method  { background: rgba(145,121,172,.15); color: #b095cc; }
.pan.dusk .j-new-cta       { border-color: rgba(145,121,172,.4); background: rgba(145,121,172,.06); color: #b095cc; }
.pan.dusk .j-new-cta:hover { background: rgba(145,121,172,.12); border-color: rgba(145,121,172,.65); }
.pan.dusk .etb             { background: rgba(255,255,255,.04); border-color: rgba(145,121,172,.22); color: #c0aad8; }
.pan.dusk .etb:hover       { border-color: rgba(145,121,172,.5); }
.pan.dusk .etb.sel         { border-color: rgba(145,121,172,.65); background: rgba(145,121,172,.12); }
.pan.dusk .etb-lb          { color: rgba(145,121,172,.7); }
.pan.dusk .mth-b           { background: rgba(255,255,255,.04); border-color: rgba(145,121,172,.22); }
.pan.dusk .mth-b:hover     { border-color: rgba(145,121,172,.52); }
.pan.dusk .mth-b.sel       { border-color: rgba(145,121,172,.72); background: rgba(145,121,172,.12); }
.pan.dusk .mth-lb          { color: rgba(145,121,172,.65); }
.pan.dusk .jta             { background: rgba(255,255,255,.05); border-color: rgba(145,121,172,.22); color: #c0aad8; }
.pan.dusk .jta::placeholder { color: rgba(145,121,172,.35); }
.pan.dusk .jta:focus       { border-color: rgba(145,121,172,.62); }
.pan.dusk .j-map-label     { background: rgba(255,255,255,.05); border-color: rgba(145,121,172,.22); color: #c0aad8; }
.pan.dusk .j-map-label::placeholder { color: rgba(145,121,172,.35); }
.pan.dusk .j-map-label:focus { border-color: rgba(145,121,172,.62); }

/* Insights dusk */
.pan.dusk .ins-q           { color: #c0aad8; background: rgba(145,121,172,.1); }
.pan.dusk .ins-pat         { color: #a890c8; background: rgba(255,255,255,.05); border-left-color: rgba(145,121,172,.5); }
.pan.dusk .ins-s           { background: rgba(255,255,255,.05); border-color: rgba(145,121,172,.2); }
.pan.dusk .ins-n           { color: #c0aad8; }
.pan.dusk .ins-sh::before  { color: #9179ac; }
.pan.dusk .ins-pro         { background: rgba(145,121,172,.1); border-color: rgba(145,121,172,.3); }
.pan.dusk .ins-pro-t       { color: #b095cc; }
.pan.dusk .ins-pro-s       { color: rgba(145,121,172,.7); }

/* Settings dusk */
.pan.dusk .pb              { background: rgba(255,255,255,.04); border-color: rgba(145,121,172,.22); color: #b0a0c8; }
.pan.dusk .pb.active       { border-color: rgba(145,121,172,.65); background: rgba(145,121,172,.16); color: #c0aad8; font-weight: 600; }
.pan.dusk .pb:hover:not(.active) { border-color: rgba(145,121,172,.5); }
.pan.dusk .exp-btn         { border-color: rgba(145,121,172,.35); background: rgba(145,121,172,.06); color: rgba(176,149,204,.75); }
.pan.dusk .exp-btn:hover   { background: rgba(145,121,172,.12); }
.pan.dusk .about-t         { color: #c0aad8; }
.pan.dusk .about-s         { color: rgba(145,121,172,.6); }
.pan.dusk .set-sh::before  { color: #9179ac; }

/* ── Tutorial overlay ───────────────────────────────────────── */
/* Full-screen blurred backdrop — same language as auth overlay  */
.tut-overlay {
    position: fixed; inset: 0; z-index: 600;
    display: flex; align-items: center; justify-content: center;
    background: rgba(237,229,204,.45);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    opacity: 0; transition: opacity .28s ease;
    padding: 20px;
}
.tut-overlay.tut-visible { opacity: 1; }

/* Card */
.tut-card {
    width: min(360px, 92vw);
    background: linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(242,236,218,.92) 100%);
    backdrop-filter: blur(36px) saturate(160%);
    -webkit-backdrop-filter: blur(36px) saturate(160%);
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 22px;
    box-shadow: 0 28px 72px rgba(20,14,6,.2), inset 0 1.5px 0 rgba(255,255,255,.92);
    padding: 26px 28px 22px;
    display: flex; flex-direction: column; align-items: center;
    transform: translateY(10px);
    transition: transform .28s ease;
    text-align: center;
}
.tut-overlay.tut-visible .tut-card { transform: translateY(0); }

/* Header row */
.tut-hd {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px;
}
.tut-logo {
    font-family: 'Lora', serif; font-size: 13px; font-weight: 500;
    letter-spacing: .1em; color: rgba(38,28,18,.45);
}
.tut-counter {
    font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 500;
    color: rgba(80,60,30,.35); letter-spacing: .06em;
}

/* Animated inner block (fades on step change) */
.tut-inner {
    width: 100%; padding: 4px 0 20px;
}
.tut-step-in {
    animation: tutStepIn .26s ease forwards;
}
@keyframes tutStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tut-icon {
    font-size: 44px; line-height: 1;
    margin-bottom: 16px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.tut-title {
    font-family: 'Lora', serif; font-size: 19px; font-weight: 500;
    color: rgba(38,28,18,.85); margin-bottom: 12px; line-height: 1.3;
}
.tut-body {
    font-family: 'Lora', serif; font-style: italic;
    font-size: 13px; color: rgba(80,60,30,.72);
    line-height: 1.8; max-width: 290px; margin: 0 auto;
}
.tut-body strong { font-style: normal; font-weight: 600; color: rgba(38,28,18,.82); }
.tut-body em     { font-style: italic; color: rgba(130,80,30,.75); }

/* Progress dots */
.tut-dots {
    display: flex; gap: 7px; align-items: center; margin-bottom: 22px;
}
.tut-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(80,60,30,.15);
    transition: background .18s, transform .18s;
}
.tut-dot.act {
    background: var(--a-org);
    transform: scale(1.2);
}

/* Navigation buttons */
.tut-btns {
    display: flex; gap: 10px; width: 100%; margin-bottom: 14px;
}
.tut-prev, .tut-next {
    flex: 1; padding: 11px 10px; border-radius: 10px;
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500;
    cursor: pointer; transition: all .18s;
}
.tut-prev {
    background: none;
    border: 1.5px solid rgba(80,60,30,.18);
    color: rgba(80,60,30,.6);
}
.tut-prev:hover { border-color: var(--a-org); color: var(--a-org); background: rgba(217,119,87,.04); }
.tut-next {
    background: var(--a-org); border: none; color: white;
}
.tut-next:hover { background: #c76440; }

/* Skip link */
.tut-skip {
    background: none; border: none; cursor: pointer;
    font-family: 'Poppins', sans-serif; font-size: 10.5px;
    color: rgba(80,60,30,.32); letter-spacing: .04em;
    text-decoration: underline; text-decoration-color: transparent;
    text-underline-offset: 2px; transition: color .15s, text-decoration-color .15s;
    padding: 2px 6px;
}
.tut-skip:hover { color: rgba(80,60,30,.6); text-decoration-color: rgba(80,60,30,.3); }

/* Settings tutorial button — reuses .exp-btn, just tweaks the colour */
.tut-settings-btn {
    border-color: rgba(120,140,93,.45) !important;
    background: rgba(120,140,93,.06) !important;
    color: var(--a-grn) !important;
}
.tut-settings-btn:hover { background: rgba(120,140,93,.12) !important; }
.pan.night .tut-settings-btn { border-color: rgba(120,140,93,.3) !important; background: rgba(120,140,93,.08) !important; color: #a0c080 !important; }
.pan.dusk  .tut-settings-btn { border-color: rgba(145,121,172,.35) !important; background: rgba(145,121,172,.06) !important; color: #b095cc !important; }

/* Night / dark-mode tint for tutorial card */
body.night-mode .tut-overlay { background: rgba(8,6,4,.6); }
body.night-mode .tut-card    {
    background: linear-gradient(160deg, rgba(30,24,16,.96) 0%, rgba(16,12,8,.98) 100%);
    border-color: rgba(0,0,0,.8);
    box-shadow: 0 28px 72px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.07);
}
body.night-mode .tut-logo   { color: rgba(212,198,168,.38); }
body.night-mode .tut-counter { color: rgba(165,142,100,.38); }
body.night-mode .tut-title  { color: #d4c8a8; }
body.night-mode .tut-body   { color: rgba(165,142,100,.72); }
body.night-mode .tut-body strong { color: #d4c8a8; }
body.night-mode .tut-dot    { background: rgba(175,150,100,.18); }
body.night-mode .tut-dot.act { background: #d4aa62; }
body.night-mode .tut-prev   { border-color: rgba(175,150,100,.25); color: rgba(165,142,100,.65); }
body.night-mode .tut-prev:hover { border-color: rgba(192,154,80,.6); color: #d4aa62; }
body.night-mode .tut-skip   { color: rgba(165,142,100,.3); }

body.dusk-mode .tut-overlay { background: rgba(20,12,36,.55); }
body.dusk-mode .tut-card    {
    background: linear-gradient(160deg, rgba(42,28,72,.96) 0%, rgba(22,14,42,.98) 100%);
    border-color: rgba(0,0,0,.82);
    box-shadow: 0 28px 72px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(145,121,172,.15);
}
body.dusk-mode .tut-logo    { color: rgba(192,170,220,.38); }
body.dusk-mode .tut-counter { color: rgba(145,121,172,.4); }
body.dusk-mode .tut-title   { color: #c0aad8; }
body.dusk-mode .tut-body    { color: rgba(192,170,220,.68); }
body.dusk-mode .tut-body strong { color: #c0aad8; }
body.dusk-mode .tut-dot     { background: rgba(145,121,172,.2); }
body.dusk-mode .tut-dot.act { background: #9179ac; }
body.dusk-mode .tut-next    { background: #7a5aa0; }
body.dusk-mode .tut-next:hover { background: #674e8a; }
body.dusk-mode .tut-prev    { border-color: rgba(145,121,172,.28); color: rgba(192,170,220,.6); }
body.dusk-mode .tut-prev:hover { border-color: rgba(145,121,172,.6); color: #b095cc; }
body.dusk-mode .tut-skip    { color: rgba(145,121,172,.32); }