/* =====================================================================
   My Life Journal — ELEGANT EDITION
   Loaded last on both pages. Base colour = --th (hue) / --ts (saturation scale),
   set by theme.js (default Burgundy). Gold stays constant.
   ===================================================================== */
:root{
  --th:341;--ts:1;
  /* theme tones */
  --e-night:hsl(var(--th) calc(var(--ts)*58%) 11%);
  --e-deep:hsl(var(--th) calc(var(--ts)*60%) 17%);
  --e-burg:hsl(var(--th) calc(var(--ts)*58%) 24%);
  --e-rich:hsl(var(--th) calc(var(--ts)*52%) 32%);
  --e-mid:hsl(var(--th) calc(var(--ts)*40%) 46%);
  --e-soft:hsl(var(--th) calc(var(--ts)*30%) 88%);
  --e-blush:hsl(var(--th) calc(var(--ts)*34%) 95%);
  --e-ivory:hsl(38 48% 98%);
  --e-paper:hsl(36 40% 97%);
  --e-ink:hsl(var(--th) calc(var(--ts)*38%) 14%);
  --e-ink2:hsl(var(--th) calc(var(--ts)*18%) 36%);
  /* gold */
  --g1:#fff1b8;--g2:#e7c35f;--g3:#c49a2b;--g4:#9a7216;--g5:#f2d779;
  --gold:#c9a24a;--gold-line:rgba(201,162,74,.55);--gold-faint:rgba(201,162,74,.28);
  --gold-foil:linear-gradient(135deg,#fff1b8 0%,#e7c35f 24%,#b98b24 50%,#f0d377 74%,#9a7216 100%);
  --gold-foil-h:linear-gradient(90deg,#9a7216,#f0d377 28%,#fff1b8 50%,#e0b94d 72%,#9a7216);
  --e-display:"Cormorant Garamond","Playfair Display","Didot","Bodoni MT",Georgia,serif;
  --e-ui:"Jost","Figtree","Avenir Next","Segoe UI",system-ui,sans-serif;
  --e-ease:cubic-bezier(.22,.8,.3,1);
  --e-sh1:0 1px 2px hsl(var(--th) 40% 10%/.07),0 8px 22px hsl(var(--th) 40% 12%/.09);
  --e-sh2:0 2px 4px hsl(var(--th) 40% 10%/.08),0 22px 46px hsl(var(--th) 45% 12%/.2);
  /* override tokens declared by the older skins */
  --display:var(--e-display);--ui:var(--e-ui);
  --cream:var(--e-ivory);--blush:var(--e-blush);--rose:var(--e-rich);--berry:var(--e-burg);--cocoa:var(--e-ink);--cocoa2:var(--e-ink2);--lilac:var(--e-blush);
  --line:var(--gold-faint);--sh1:var(--e-sh1);--sh2:var(--e-sh2);
  --rose2:var(--e-mid);--soft:var(--e-blush);--outline:var(--gold-faint);--dark:var(--e-ink);
  --ink:var(--e-ink);--ink-light:var(--e-ink2);--peach:var(--e-soft);--peach-dark:var(--e-mid);--offwhite:var(--e-paper);--pink:var(--e-soft);--brown:var(--e-rich);
  --shadow:var(--e-sh1);
  font-family:var(--e-ui);color:var(--e-ink);
}
html{background:var(--e-ivory)}
body{
  font-family:var(--e-ui)!important;color:var(--e-ink);-webkit-font-smoothing:antialiased;letter-spacing:.005em;
  background:
    radial-gradient(900px 480px at 100% -8%,hsl(var(--th) calc(var(--ts)*40%) 90%/.7),transparent 62%),
    radial-gradient(800px 420px at -6% 0,hsl(42 60% 90%/.8),transparent 60%),
    linear-gradient(180deg,var(--e-ivory),hsl(36 36% 96%))!important;
  background-attachment:fixed!important;
}
body:has(.mini-home){background-color:var(--e-ivory)!important;background-image:radial-gradient(900px 480px at 100% -8%,hsl(var(--th) calc(var(--ts)*40%) 90%/.7),transparent 62%),radial-gradient(800px 420px at -6% 0,hsl(42 60% 90%/.8),transparent 60%)!important}
.ambient{opacity:.35!important}
button,input,select,textarea{font-family:var(--e-ui)}
h1,h2,h3,.hand,.section-bar h2,.join-title,.start-main strong,.planner-home-copy strong,.notebook-name strong,.ed-title,.modal h2,.logo-name,.topbar-title,.sidebar-note strong,.mode-card h2,.mini-home .welcome-heading,.paper-title{
  font-family:var(--e-display)!important;font-weight:600!important;letter-spacing:.005em!important;color:var(--e-burg);
}
h1,h2{font-weight:600}
.brand{font-family:var(--e-display)!important;letter-spacing:.04em}
::selection{background:var(--g2);color:var(--e-night)}
:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--g3)!important;outline-offset:2px!important}

/* ---------- gold icon polish ---------- */
.mlj-ico{display:inline-flex;vertical-align:middle;line-height:0;margin:0 .12em}
.mlj-ico .ic{filter:drop-shadow(0 1px 1px rgba(60,30,0,.25))}
.mlj-inline{vertical-align:-.2em}
.ic{filter:drop-shadow(0 1px 1px rgba(60,30,0,.25))}

/* ---------- STUDIO: header ---------- */
.header{background:linear-gradient(180deg,var(--e-deep),var(--e-night))!important;border-bottom:1px solid var(--gold-line)!important;box-shadow:0 6px 22px hsl(var(--th) 50% 8%/.35),inset 0 -1px 0 rgba(255,241,184,.18)!important;backdrop-filter:none!important}
.brand{color:var(--g1)!important}
.brand span{background:var(--gold-foil-h);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-size:23px;font-weight:600;letter-spacing:.06em;text-transform:none}
.brand img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))!important;border-radius:50%}
.header-link,.studio-return-link,.date-pill{background:rgba(255,241,184,.07)!important;border:1px solid var(--gold-line)!important;color:var(--g1)!important;font-weight:500!important;letter-spacing:.04em;font-size:12.5px!important;display:inline-flex;align-items:center;gap:6px;text-decoration:none;border-radius:99px}
.header-link:hover,.studio-return-link:hover{background:rgba(255,241,184,.16)!important;box-shadow:0 0 0 1px var(--gold-faint),0 6px 16px rgba(0,0,0,.25)!important;transform:translateY(-1px)}
.header-link .ic,.studio-return-link .ic{width:17px;height:17px}
body:has(.mini-home) .header{border-radius:0 0 22px 22px}

/* ---------- STUDIO: home ---------- */
.mini-home{gap:24px}
.join-title{color:var(--e-burg)!important}
.mini-home .welcome-heading{color:var(--e-burg)!important;font-size:clamp(19px,4.6vw,27px)!important;font-style:italic;font-weight:600!important}
.mini-home .welcome-edit-btn{background:transparent!important;border:1px solid var(--gold-line)!important;color:var(--g4)!important;letter-spacing:.08em;text-transform:uppercase;font-size:10px!important}
.tiny-label{background:var(--gold-foil)!important;color:var(--e-night)!important;font-weight:600;letter-spacing:.12em!important;box-shadow:0 2px 8px rgba(154,114,22,.35)!important;border:0}
.welcome-icons button{background:linear-gradient(180deg,#fffdf6,var(--e-paper))!important;border:1px solid var(--gold-line)!important;box-shadow:var(--e-sh1)!important}

.mini-shortcuts button{background:linear-gradient(180deg,#fffdf8,var(--e-paper))!important;border:1px solid var(--gold-faint)!important;box-shadow:var(--e-sh1)!important;color:var(--e-burg)!important;font-weight:500!important;letter-spacing:.04em;border-radius:16px!important}
.mini-shortcuts button:hover{border-color:var(--gold)!important;transform:translateY(-2px)}
.short-icon,.mini-shortcuts button:nth-child(n) .short-icon{background:linear-gradient(145deg,var(--e-deep),var(--e-burg))!important;border:1px solid var(--gold-line);box-shadow:inset 0 1px 0 rgba(255,241,184,.25),0 4px 10px hsl(var(--th) 50% 10%/.3)!important;border-radius:14px!important}
.short-icon .ic{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}

/* hero "Start creating" */
.start-strip{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.start-main{background:radial-gradient(500px 220px at 90% 0,hsl(var(--th) calc(var(--ts)*55%) 30%/.9),transparent 60%),linear-gradient(135deg,var(--e-deep),var(--e-burg) 60%,var(--e-deep))!important;border:1px solid var(--gold)!important;box-shadow:inset 0 0 0 5px var(--e-deep),inset 0 0 0 6px var(--gold-line),var(--e-sh2)!important;border-radius:22px!important;color:var(--g1)!important}
.start-main:before{border-color:var(--gold-line)!important;opacity:.0!important}
.start-main strong{background:var(--gold-foil-h);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-size:clamp(24px,6vw,31px)!important;letter-spacing:.03em!important}
.start-main small{color:hsl(42 55% 86%)!important;font-weight:400;letter-spacing:.04em}
.start-mascot{filter:none!important;color:var(--g2)}
.start-arrow{background:var(--gold-foil)!important;color:var(--e-night)!important;border:0!important;box-shadow:0 4px 12px rgba(0,0,0,.35)!important}
.start-template{background:linear-gradient(180deg,#fffdf8,var(--e-paper))!important;border:1px solid var(--gold-line)!important;box-shadow:var(--e-sh1)!important;color:var(--e-burg)!important;border-radius:16px!important}
.start-template strong{font-family:var(--e-display)!important}

/* planner / calendar / tool cards */
.planner-home-cta{background:linear-gradient(135deg,#fffdf7,var(--e-blush))!important;border:1px solid var(--gold-faint)!important;box-shadow:var(--e-sh1)!important;border-radius:22px!important}
.planner-home-art{background:linear-gradient(145deg,var(--e-deep),var(--e-burg))!important;border:1px solid var(--gold-line)!important}
.planner-home-copy small,.small-kicker,.eyebrow{color:var(--g4)!important;letter-spacing:.18em!important;font-weight:600}
.planner-play-label{background:var(--e-deep)!important;color:var(--g1)!important;border:1px solid var(--gold-line)!important}
.diary-home-tool{background:linear-gradient(180deg,#fffdf8,var(--e-paper))!important;border:1px solid var(--gold-faint)!important;box-shadow:var(--e-sh1)!important;border-radius:18px!important}
.diary-home-tool:hover{border-color:var(--gold)!important}
.diary-home-tool span{filter:none}
.diary-home-tool b{font-family:var(--e-display)!important;font-size:18px;color:var(--e-burg)!important}

.section-bar h2{font-size:26px!important}
.section-bar h2:after{content:"";display:block;width:38px;height:2px;margin-top:5px;background:var(--gold-foil-h);border-radius:2px}
.soft-note{color:var(--g4)!important;font-style:italic;font-family:var(--e-display)}
.fun-card{border:1px solid var(--gold-line)!important;box-shadow:var(--e-sh1)!important;border-radius:20px!important;background:linear-gradient(180deg,#fffdf8,var(--e-blush))!important}
.fun-card.aqua,.fun-card.latte,.fun-card.pink,.fun-card.planner{background:linear-gradient(180deg,#fffdf8,var(--e-blush))!important}
.fun-picture{background:linear-gradient(145deg,var(--e-deep),var(--e-burg))!important}
.fun-picture img{filter:saturate(.8) sepia(.15)}
.fun-picture .ic,.fun-picture .mlj-ico{filter:none}
.fun-caption{font-family:var(--e-display)!important;font-size:19px!important;font-weight:600!important;color:var(--e-burg)!important;background:transparent!important;letter-spacing:.02em}
.notebook-cover{box-shadow:0 14px 30px hsl(var(--th) 50% 12%/.28)!important;border-radius:14px!important}
.notebook-cover:hover{transform:translateY(-4px) rotate(-.3deg)}
.add-group,.sort-notes{background:linear-gradient(180deg,#fffdf8,var(--e-paper))!important;border:1px solid var(--gold-line)!important;color:var(--e-burg)!important}
.library-tip{color:var(--e-ink2)!important;font-style:italic}

/* floating bottom nav */
.mini-bottom-nav,.bottom-nav{background:linear-gradient(180deg,var(--e-deep),var(--e-night))!important;border:1px solid var(--gold-line)!important;box-shadow:0 14px 34px hsl(var(--th) 55% 8%/.55),inset 0 1px 0 rgba(255,241,184,.18)!important;backdrop-filter:none!important;border-radius:26px!important}
.mini-bottom-nav button,.bottom-link{color:hsl(42 50% 82%)!important;font-weight:500!important;letter-spacing:.06em;font-size:10.5px!important;text-transform:uppercase}
.mini-bottom-nav button.active,.bottom-link.active{background:linear-gradient(180deg,rgba(255,241,184,.2),rgba(255,241,184,.06))!important;color:var(--g1)!important;box-shadow:inset 0 0 0 1px var(--gold-line),0 0 16px rgba(231,195,95,.25)!important;border-radius:20px}
.mini-bottom-nav button:hover:not(.active),.bottom-link:hover:not(.active){background:rgba(255,241,184,.08)!important}
.mini-bottom-nav .ic,.bottom-link .ic{width:23px;height:23px}
.bottom-link>span{display:inline-flex}

/* ---------- Buttons / pills ---------- */
.btn,.small-btn{font-family:var(--e-ui)!important;font-weight:500!important;letter-spacing:.05em;border-radius:12px!important;border:1px solid var(--gold-line)!important;background:linear-gradient(180deg,#fffdf8,var(--e-paper))!important;color:var(--e-burg)!important;box-shadow:0 1px 2px hsl(var(--th) 40% 10%/.08)}
.btn:hover,.small-btn:hover{background:linear-gradient(180deg,#fff,var(--e-blush))!important;border-color:var(--gold)!important;transform:translateY(-1px);box-shadow:var(--e-sh1)}
.btn.primary,.btn.pink,.mlc-lock-primary,.pdf-upload,.pdf-export,.mc-print{background:linear-gradient(180deg,var(--e-rich),var(--e-deep))!important;color:var(--g1)!important;border:1px solid var(--gold)!important;box-shadow:inset 0 1px 0 rgba(255,241,184,.3),0 6px 16px hsl(var(--th) 55% 14%/.35)!important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn.primary:hover,.btn.pink:hover{background:linear-gradient(180deg,var(--e-mid),var(--e-burg))!important;color:#fff3c9!important}
.btn.primary .ic,.btn.pink .ic{filter:none}
.btn.ghost{background:transparent!important}
.pill,.cat-btn{background:linear-gradient(180deg,#fffdf8,var(--e-paper))!important;border:1px solid var(--gold-faint)!important;color:var(--e-burg)!important;font-weight:500;letter-spacing:.03em}
.pill.active,.tool-tab.active,.dock-tab.active,.cat-btn.selected,.cat-btn.active{background:linear-gradient(180deg,var(--e-rich),var(--e-deep))!important;border-color:var(--gold)!important;color:var(--g1)!important}
.tool-tab{border-color:var(--gold-faint)!important}
.text-btn{color:var(--e-burg)!important;font-weight:500;letter-spacing:.05em;text-decoration-color:var(--gold)!important}
.round-btn{background:var(--gold-foil)!important;color:var(--e-night)!important;border:0!important;box-shadow:0 5px 14px rgba(154,114,22,.4)!important}
.round-btn .ic{filter:none}

/* ---------- Surfaces ---------- */
.panel,.modal,.starter-card,.page-list-entry,.template-choice,.project-card,.mode-card,.choose-mode,.template-card,.kit-tile,.size-preset,.setting-line,.date-panel,.calendar-month,.pdf-card,.hub-card,.diary-hub-card,.notebook-header,.book-card,.add-book{
  border:1px solid var(--gold-faint)!important;box-shadow:var(--e-sh1)!important;background-color:#fffdf8;
}
.panel,.modal,.setting-line,.calendar-month,.date-panel{border-radius:18px!important}
.modal{background:linear-gradient(180deg,#fffefb,var(--e-paper))!important;border:1px solid var(--gold)!important;box-shadow:0 0 0 5px #fffefb,0 0 0 6px var(--gold-line),var(--e-sh2)!important}
.modal h2{font-size:27px!important;color:var(--e-burg)!important}
.modal-bg,.modal-backdrop{background:hsl(var(--th) 50% 8%/.62)!important;backdrop-filter:blur(5px)}
.modal .close{color:var(--e-burg)!important}
input,textarea,select{border:1px solid var(--gold-faint)!important;background:#fffefb!important;color:var(--e-ink)!important;border-radius:12px}
input:focus,textarea:focus,select:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(201,162,74,.22)!important}
input[type=color]{padding:2px}
::placeholder{color:hsl(var(--th) 14% 56%)!important;opacity:.8!important}
#toast,.toast{background:linear-gradient(180deg,var(--e-deep),var(--e-night))!important;color:var(--g1)!important;border:1px solid var(--gold-line)!important;font-weight:500;letter-spacing:.04em;box-shadow:0 10px 28px rgba(0,0,0,.35)!important;border-radius:14px!important}
.modal-actions .btn{min-width:90px}
hr,.separator{border-color:var(--gold-faint)!important}

/* editor chrome (studio) */
.ws-head,.ed-top{background:linear-gradient(180deg,var(--e-deep),var(--e-night))!important;color:var(--g1)!important;border-bottom:1px solid var(--gold-line)!important}
.ed-top .ed-title input,#project-title{color:var(--g1)!important;font-family:var(--e-display)!important;font-size:20px;background:transparent!important}
.ed-icon,.sel-btn,.zoom-btn{border:1px solid var(--gold-faint)!important}
.ed-top .ed-icon,.ed-top .ed-mode{color:var(--g1)!important;background:rgba(255,241,184,.08)!important;border:1px solid var(--gold-line)!important}
.ed-dock{background:linear-gradient(180deg,var(--e-deep),var(--e-night))!important;border-top:1px solid var(--gold-line)!important}
.dock-tab{color:hsl(42 50% 80%)!important;font-weight:500!important}
.dock-tab.active{background:rgba(255,241,184,.14)!important;color:var(--g1)!important}
.ed-sheet,.ws-tools,.ws-properties{background:linear-gradient(180deg,#fffefb,var(--e-paper))!important;border-color:var(--gold-faint)!important}
.tool-title,.ctl-label,.control{color:var(--e-burg)!important}
.swatch.active,.swatch.selected,.color-swatch.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold)!important}
.canvas-frame,.ed-canvas-wrap{border:1px solid var(--gold-faint)!important}

/* ---------- CLASSIC DIARY ---------- */
.sidebar{background:linear-gradient(190deg,var(--e-deep),var(--e-night))!important;border-right:1px solid var(--gold-line)!important;color:var(--g1)}
.logo-mark{background:var(--gold-foil)!important;color:var(--e-night)!important;border:0!important;box-shadow:0 6px 16px rgba(0,0,0,.4)!important}
.logo-mark .ic{filter:none}
.logo-name{color:var(--g1)!important;font-size:20px!important;line-height:1.1!important}
.logo-name .brand-pink,.brand-pink{background:var(--gold-foil-h);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent}
.logo-tag,.side-heading{color:hsl(42 40% 72%)!important;letter-spacing:.2em;font-size:10px}
.nav-item{color:hsl(42 50% 86%)!important;font-weight:500!important;letter-spacing:.04em;border-radius:14px!important}
.nav-item:hover{background:rgba(255,241,184,.08)!important}
.nav-item.active{background:linear-gradient(90deg,rgba(255,241,184,.2),rgba(255,241,184,.04))!important;color:var(--g1)!important;box-shadow:inset 0 0 0 1px var(--gold-line)!important}
.nav-emoji{background:transparent!important}
.sidebar-note{background:rgba(255,241,184,.06)!important;border:1px solid var(--gold-line)!important;color:hsl(42 40% 84%)!important}
.sidebar-note strong,.sidebar-note p{color:hsl(42 50% 88%)!important}
.topbar{background:rgba(255,253,248,.82)!important;border-bottom:1px solid var(--gold-faint)!important;backdrop-filter:blur(14px)}
.topbar-kicker,.section-label,.kicker{color:var(--g4)!important;letter-spacing:.18em!important;font-weight:600!important}
.topbar-title{color:var(--e-burg)!important;font-size:28px!important}
.topbar .studio-return-link,.topbar .date-pill{background:#fffdf8!important;color:var(--e-burg)!important;border:1px solid var(--gold-line)!important}
.topbar .studio-return-link .ic{width:16px;height:16px}

.hero{background:radial-gradient(520px 260px at 95% 0,hsl(var(--th) calc(var(--ts)*55%) 30%/.85),transparent 62%),linear-gradient(135deg,var(--e-deep),var(--e-burg) 58%,var(--e-night))!important;border:1px solid var(--gold)!important;box-shadow:inset 0 0 0 6px var(--e-deep),inset 0 0 0 7px var(--gold-line),var(--e-sh2)!important;border-radius:26px!important}
.hero:before{border-color:var(--gold-line)!important;opacity:.0}
.hero .kicker{color:var(--g2)!important}
.hero h1{color:var(--g1)!important;font-size:clamp(34px,6vw,54px)!important;line-height:1.02!important}
.hero h1 span{background:var(--gold-foil-h);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-style:italic}
.hero p{color:hsl(42 55% 88%)!important;font-weight:400}
.hero .btn.primary{background:var(--gold-foil)!important;color:var(--e-night)!important;border:0!important;text-shadow:none;font-weight:600!important;box-shadow:0 8px 20px rgba(0,0,0,.35)!important}
.hero .btn.secondary{background:rgba(255,241,184,.08)!important;color:var(--g1)!important;border:1px solid var(--gold-line)!important}
.hero-art .hero-note{filter:none}
.hero-flower,.hero-star{color:var(--g2)}

.mood-chip{background:transparent!important;border:0!important;box-shadow:none!important}
.mood-face{background:linear-gradient(180deg,#fffdf8,var(--e-blush))!important;border:1px solid var(--gold-line)!important;box-shadow:var(--e-sh1)!important}
.mood-chip.chosen .mood-face{background:linear-gradient(145deg,var(--e-deep),var(--e-burg))!important;border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(201,162,74,.3),var(--e-sh1)!important}
.mood-chip span:last-child{color:var(--e-burg);font-weight:500;letter-spacing:.04em}
.book-card{border-radius:18px!important;background:linear-gradient(180deg,#fffefb,var(--e-paper))!important}
.book-cover{border:1px solid var(--gold-line);box-shadow:inset 0 0 0 4px rgba(255,241,184,.12),0 6px 14px hsl(var(--th) 50% 12%/.25)}
.book-cover .ic{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.hero-art{display:grid;place-items:center}.hero-cover{width:min(190px,42vw);height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));transform:rotate(4deg)}
.hero-art .hero-note,.hero-art .hero-person{display:none}
.book-cover:before,.book-cover:after{opacity:.35}
.book-title{font-family:var(--e-display)!important;font-weight:600;color:var(--e-burg);font-size:17px}
.book-count{color:var(--e-ink2)}
.add-book .add-book-icon{background:var(--gold-foil)!important;color:var(--e-night)!important}
.page-mini{background:var(--e-blush)!important;border:1px solid var(--gold-faint)!important}
.cal-day.selected,.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--gold)!important}
.week-day.today span{background:var(--gold-foil)!important;color:var(--e-night)!important}
.editor-tools,.tool-panel{background:linear-gradient(180deg,#fffefb,var(--e-paper))!important}
.paper{border:1px solid var(--gold-line)!important;box-shadow:0 0 0 7px #fffefb,0 0 0 8px var(--gold-faint),var(--e-sh2)!important}
.paper-overline,.paper-footer{color:var(--g4)!important;letter-spacing:.14em}
.warning{background:var(--e-blush)!important;border:1px solid var(--gold-faint)!important;color:var(--e-ink)!important}
.polaroid{border:1px solid var(--gold-faint)!important}
.empty{color:var(--e-ink2)}

/* security / PDF / monthly chrome */
.mlc-lock-box{background:linear-gradient(180deg,#fffefb,var(--e-paper))!important;border:1px solid var(--gold)!important;box-shadow:0 0 0 6px #fffefb,0 0 0 7px var(--gold-line),var(--e-sh2)!important}
.mlc-lock-icon{background:linear-gradient(145deg,var(--e-deep),var(--e-burg))!important;border:1px solid var(--gold-line)}
.mlc-lock-modal{background:radial-gradient(700px 400px at 50% 0,hsl(var(--th) calc(var(--ts)*50%) 22%),var(--e-night))!important}
.mlc-pattern-dot.picked{background:var(--gold-foil)!important}
.pdf-app,.mc-app{font-family:var(--e-ui)}
.mc-toolbar-title strong,.pdf-heading{font-family:var(--e-display)!important}

/* ---------- Theme picker ---------- */
.mlj-theme-btn .ic{width:17px;height:17px}
.mlj-theme-backdrop{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:18px;background:hsl(var(--th) 50% 8%/.66);backdrop-filter:blur(6px);animation:mljFade .2s ease}
@keyframes mljFade{from{opacity:0}to{opacity:1}}
.mlj-theme-card{position:relative;width:min(430px,100%);max-height:92vh;overflow:auto;padding:26px 22px 20px;border-radius:22px;background:linear-gradient(180deg,#fffefb,var(--e-paper));border:1px solid var(--gold);box-shadow:0 0 0 6px #fffefb,0 0 0 7px var(--gold-line),0 30px 70px rgba(0,0,0,.5);color:var(--e-ink);font-family:var(--e-ui)}
.mlj-theme-kicker{font-size:10.5px;letter-spacing:.28em;color:var(--g4);font-weight:600;text-align:center}
.mlj-theme-card h2{margin:4px 0 6px;text-align:center;font-size:30px;color:var(--e-burg);font-family:var(--e-display)}
.mlj-theme-card h2:after{content:"";display:block;width:56px;height:2px;margin:8px auto 0;background:var(--gold-foil-h);border-radius:2px}
.mlj-theme-card>p{margin:10px 0 16px;text-align:center;font-size:14px;line-height:1.5;color:var(--e-ink2)}
.mlj-theme-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold-faint);background:transparent;font-size:22px;line-height:1;color:var(--e-burg);cursor:pointer}
.mlj-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px}
.mlj-swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;background:transparent;border:1px solid transparent;border-radius:14px;cursor:pointer;color:var(--e-ink)}
.mlj-swatch span{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35),transparent 42%),var(--sw);box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 0 0 2px #fffefb,0 0 0 3px var(--gold-faint),0 4px 10px rgba(0,0,0,.18);transition:transform .15s var(--e-ease)}
.mlj-swatch small{font-size:11.5px;letter-spacing:.04em;color:var(--e-ink2)}
.mlj-swatch:hover span{transform:scale(1.07)}
.mlj-swatch.on{border-color:var(--gold);background:var(--e-blush)}
.mlj-swatch.on span{box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 0 0 2px #fffefb,0 0 0 4px var(--gold),0 4px 12px rgba(0,0,0,.25)}
.mlj-custom{display:block;margin:16px 0 4px;padding:12px;border:1px dashed var(--gold-line);border-radius:14px;font-size:12.5px;letter-spacing:.06em;color:var(--e-burg);font-weight:500}
.mlj-custom-row{display:flex;gap:10px;margin-top:8px;align-items:center}
.mlj-custom input[type=color]{width:52px;height:40px;padding:2px;border-radius:10px;cursor:pointer;flex:none}
.mlj-custom input[type=text]{flex:1;min-width:0;height:40px;padding:0 12px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.05em;text-transform:lowercase}
.mlj-theme-actions{display:flex;gap:10px;justify-content:space-between;margin-top:16px}
.mlj-btn-ghost,.mlj-btn-gold{flex:1;min-height:44px;border-radius:12px;font-weight:500;letter-spacing:.05em;cursor:pointer;font-family:var(--e-ui);font-size:14px}
.mlj-btn-ghost{background:transparent;border:1px solid var(--gold-line);color:var(--e-burg)}
.mlj-btn-gold{background:linear-gradient(180deg,var(--e-rich),var(--e-deep));border:1px solid var(--gold);color:var(--g1);box-shadow:inset 0 1px 0 rgba(255,241,184,.3)}

@media(max-width:560px){
  .header-link span{display:inline}
  .mlj-theme-card{padding:24px 16px 16px}
}
@media(prefers-reduced-motion:reduce){.mlj-theme-backdrop{animation:none}}

/* ---------- Responsive tidy-ups ---------- */
.welcome-icons button[data-mlj-theme]{display:inline-grid;place-items:center}
@media(max-width:640px){
  .topbar{padding-top:10px;padding-bottom:10px;gap:8px}
  .topbar-title{font-size:22px!important;line-height:1.1}
  .topbar-kicker{font-size:9.5px!important}
  .topbar .date-pill{display:none!important}
  .topbar .mlj-theme-btn span,.topbar .studio-return-link span{display:none}
  .topbar .studio-return-link{padding:8px 10px!important}
  .bottom-link{font-size:9px!important;letter-spacing:.03em}
}
.hero-art{position:relative}
.hero-cover{width:min(128px,30vw)!important;margin:0 4px 0 auto}
@media(max-width:640px){.hero-art{position:absolute;right:12px;bottom:14px;width:auto;height:auto}.hero-cover{width:112px!important;transform:rotate(5deg)}}

@media(min-width:760px){body:has(.mini-home) .header{max-width:none!important;border-radius:0!important;padding-left:clamp(16px,4vw,48px)!important;padding-right:clamp(16px,4vw,48px)!important}}

/* V22 - matching circular illustration icons across all four Create cards */
.mini-home .fun-cards .fun-picture {display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;}
.mini-home .fun-cards .fun-picture>img {display:block!important;position:static!important;width:clamp(74px,60%,138px)!important;height:clamp(74px,78%,138px)!important;max-width:80%!important;max-height:92%!important;object-fit:contain!important;border-radius:50%!important;filter:drop-shadow(0 5px 5px rgba(35,10,19,.18))!important;}
.mini-home .fun-cards .fun-picture>.ic{display:none!important;}
.photo-edit-actions{display:grid;gap:8px;margin:8px 0 14px}.photo-edit-actions .btn{justify-content:center}.shadow-options{padding:13px 13px 1px;border:1px solid var(--gold-line,#e5c995);border-radius:15px;background:#fff8f4;margin:0 0 12px}.bg-remove-preview-wrap{display:grid;place-items:center;max-height:330px;min-height:150px;overflow:hidden;border:1px solid #d9c8bd;border-radius:15px;background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;cursor:crosshair;margin:12px 0}
#bg-removal-preview{display:block;max-width:100%;max-height:300px;object-fit:contain;width:auto;height:auto;cursor:crosshair;touch-action:manipulation;}
@media(max-width:600px){.mini-home .fun-cards .fun-picture>img{width:70%!important;height:85%!important;max-height:95px!important}.photo-edit-actions .btn{font-size:13px}.bg-remove-preview-wrap{max-height:260px}#bg-removal-preview{max-height:230px}}