/* "Premium" dial: same screens, calmer. Enabled with <html data-design="premium"> (or ?design=premium). */
html[data-design="premium"] {
  --ink: #1B1A24; --bg: #F7F4EF; --pink: #E8527E; --plum: #1B1A24; --plum-soft: #6B6878;
  --g-fill: rgba(255, 255, 255, .62); --g-fill-2: rgba(255, 255, 255, .8); --g-line: rgba(255, 255, 255, .9);
  --g-shadow: 0 8px 28px rgba(27, 26, 36, .07), 0 1px 0 rgba(255, 255, 255, .9) inset;
  --bg-pink: radial-gradient(70% 38% at 100% 0%, rgba(232, 82, 126, .13), transparent 72%), radial-gradient(80% 40% at 0% 100%, rgba(255, 205, 140, .22), transparent 72%);
  --bg-lime: radial-gradient(70% 38% at 0% 0%, rgba(150, 190, 160, .2), transparent 72%), radial-gradient(80% 40% at 100% 100%, rgba(232, 82, 126, .1), transparent 72%);
  --bg-turq: radial-gradient(70% 38% at 100% 0%, rgba(140, 180, 215, .22), transparent 72%), radial-gradient(80% 40% at 0% 100%, rgba(255, 205, 140, .2), transparent 72%);
  --bg-yellow: radial-gradient(70% 38% at 0% 0%, rgba(255, 205, 140, .26), transparent 72%), radial-gradient(80% 40% at 100% 100%, rgba(232, 82, 126, .1), transparent 72%);
}
html[data-design="premium"], html[data-design="premium"] body { background: #ECE8E1; }
html[data-design="premium"] #app { background: #F7F4EF; }
html[data-design="premium"] #app::before { background-color: transparent; }
html[data-design="premium"] #app[data-screen="calendar"], html[data-design="premium"] #app[data-screen="calendar"]::before { background: #fff; }

/* type: lighter, tighter, quieter */
html[data-design="premium"] h1, html[data-design="premium"] h2 { font-weight: 500; letter-spacing: -.025em; }
html[data-design="premium"] .hl { background: none; padding: 0; margin: 0; transform: none; box-shadow: inset 0 -.14em 0 rgba(232, 82, 126, .35); border-radius: 0; }
html[data-design="premium"] .welcome h1 { font-size: 32px; font-weight: 500; }
html[data-design="premium"] .brand-line, html[data-design="premium"] .brand { font-weight: 600; letter-spacing: .01em; }
html[data-design="premium"] .logo svg rect:first-child { fill: #1B1A24; }
html[data-design="premium"] .moment-copy h1 { font-size: 32px; font-weight: 500; }
html[data-design="premium"] .thought h1 { font-size: 24px; font-weight: 500; }

/* buttons: deep ink glass, accent saved for small things */
html[data-design="premium"] .btn-primary { background: linear-gradient(180deg, #2b2a38, #15141c); color: #fff; border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 14px 30px rgba(27, 26, 36, .28), 0 1px 0 rgba(255, 255, 255, .28) inset; text-shadow: none; font-weight: 600; letter-spacing: .01em; height: 58px; }
html[data-design="premium"] .btn-secondary { background: rgba(255, 255, 255, .72); border: 1px solid rgba(27, 26, 36, .12); box-shadow: 0 8px 22px rgba(27, 26, 36, .08), 0 1px 0 #fff inset; color: var(--ink); font-weight: 600; }
html[data-design="premium"] .btn-danger { background: #c8453c; color: #fff; box-shadow: 0 10px 22px rgba(200, 69, 60, .28); }
html[data-design="premium"] .link { text-decoration-color: rgba(27, 26, 36, .3); font-weight: 500; }
html[data-design="premium"] .icon-btn, html[data-design="premium"] .topbar .icon-btn { background: rgba(255, 255, 255, .8); border: 1px solid rgba(27, 26, 36, .08); box-shadow: 0 4px 14px rgba(27, 26, 36, .07); }

/* calendar: one accent, quiet details */
html[data-design="premium"] .calendar .cell.today .num { background: #1B1A24 !important; box-shadow: 0 3px 8px rgba(27, 26, 36, .25) !important; }
html[data-design="premium"] .dot { border-color: #bdb8c8; }
html[data-design="premium"] .dot.on, html[data-design="premium"] .dots .dot.on:nth-child(2), html[data-design="premium"] .dots .dot.on:nth-child(3) { background: #1B1A24; border-color: #1B1A24; }
html[data-design="premium"] .latest { background: #FAF8F4; border: 1px solid #EFEAE2; box-shadow: 0 8px 28px rgba(27, 26, 36, .05); }
html[data-design="premium"] .latest-title { font-weight: 500; }
html[data-design="premium"] .calendar .bottom .hint, html[data-design="premium"] .bottom .hint { background: none; border: 0; box-shadow: none; font-weight: 500; color: #8d889c; backdrop-filter: none; -webkit-backdrop-filter: none; letter-spacing: .06em; padding: 0; }

/* stamps and pages: softer shadows, muted colour blocks */
html[data-design="premium"] .stamp-shadow { filter: drop-shadow(0 .03em 0 rgba(27, 26, 36, .28)) drop-shadow(0 .45em .7em rgba(27, 26, 36, .16)); }
html[data-design="premium"] .page-block { opacity: .42; filter: saturate(.75); }
html[data-design="premium"] .page { border: 1px solid rgba(27, 26, 36, .05); box-shadow: 0 2px 4px rgba(27, 26, 36, .05), 0 20px 40px rgba(27, 26, 36, .1); }
html[data-design="premium"] .page-frame { background: rgba(255, 255, 255, .5); }
html[data-design="premium"] .page-title { font-weight: 560; }
html[data-design="premium"] .postmark { opacity: .8; }

/* stickers and tape: restrained */
html[data-design="premium"] .deco.k-stickers { filter: drop-shadow(1.2px 0 0 #fff) drop-shadow(-1.2px 0 0 #fff) drop-shadow(0 1.2px 0 #fff) drop-shadow(0 -1.2px 0 #fff) drop-shadow(0 2px 3px rgba(27, 26, 36, .22)) saturate(.78); }
html[data-design="premium"] .deco.k-stickers svg * { stroke-width: 2.2; }
html[data-design="premium"] .deco.k-tape { opacity: .72; filter: drop-shadow(0 1px 1.5px rgba(27, 26, 36, .2)) saturate(.7); }
html[data-design="premium"] .deco.k-doodles { opacity: .75; filter: saturate(.75); }

/* panels */
html[data-design="premium"] .tray { background: rgba(255, 255, 255, .86); border: 1px solid rgba(27, 26, 36, .06); }
html[data-design="premium"] .tab { background: transparent; border: 1px solid transparent; color: #6B6878; font-weight: 600; }
html[data-design="premium"] .tab.on { background: #1B1A24; color: #fff; box-shadow: 0 6px 14px rgba(27, 26, 36, .22); border-color: #1B1A24; }
html[data-design="premium"] .tray-item, html[data-design="premium"] .tray-item:nth-child(n) { background: #fff; border: 1px solid rgba(27, 26, 36, .07); box-shadow: 0 2px 8px rgba(27, 26, 36, .05); }
html[data-design="premium"] .chip, html[data-design="premium"] .chip.lt-morning, html[data-design="premium"] .chip.lt-golden, html[data-design="premium"] .chip.lt-dark { background: rgba(255, 255, 255, .8); border: 1px solid rgba(27, 26, 36, .1); font-weight: 600; box-shadow: none; }
html[data-design="premium"] .chip.on { background: #1B1A24; color: #fff; border-color: #1B1A24; box-shadow: 0 8px 18px rgba(27, 26, 36, .22); transform: none; }
html[data-design="premium"] .thought-input { background: rgba(255, 255, 255, .85); border: 1px solid rgba(27, 26, 36, .08); box-shadow: 0 10px 28px rgba(27, 26, 36, .07); border-radius: 18px; }
html[data-design="premium"] .text-wrap { transform: none; }
html[data-design="premium"] .text-wrap::before { display: none; }
html[data-design="premium"] .voice-pill { background: rgba(255, 255, 255, .85); border: 1px solid rgba(27, 26, 36, .08); }
html[data-design="premium"] .vp-play { background: #1B1A24; box-shadow: 0 4px 12px rgba(27, 26, 36, .3); }
html[data-design="premium"] .vp-bars i.on { background: #1B1A24; }
html[data-design="premium"] .mic { background: linear-gradient(180deg, #2b2a38, #15141c); box-shadow: 0 14px 30px rgba(27, 26, 36, .3), 0 1px 0 rgba(255, 255, 255, .25) inset, 0 0 0 9px rgba(255, 255, 255, .6); }
html[data-design="premium"] .mic.rec { background: linear-gradient(180deg, #ef6a8f, #e8527e); }
html[data-design="premium"] .wave i { background: #E8527E; }
html[data-design="premium"] .welcome-copy { background: rgba(255, 255, 255, .6); }
html[data-design="premium"] .welcome-copy p { color: var(--plum-soft); }
html[data-design="premium"] .stamping-text { background: rgba(255, 255, 255, .8); border: 1px solid rgba(27, 26, 36, .08); font-weight: 600; }
html[data-design="premium"] .sheet { background: rgba(255, 255, 255, .86); }
html[data-design="premium"] .toast { background: rgba(27, 26, 36, .88); }
html[data-design="premium"] .day-card::before { opacity: .5; }
html[data-design="premium"] .label { opacity: .55; }
html[data-design="premium"] .cam-title em, html[data-design="premium"] .month-nav em { color: #E8527E; }
html[data-design="premium"] .calendar .month-nav h1 em { color: var(--ink); }
html[data-design="premium"] .shutter span { background: linear-gradient(180deg, #2b2a38, #15141c); box-shadow: 0 6px 16px rgba(27, 26, 36, .4), 0 1px 0 rgba(255, 255, 255, .3) inset; }
html[data-design="premium"] .wc-sticker { filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 4px rgba(27, 26, 36, .22)) saturate(.8); }
html[data-design="premium"] .wc-tape { opacity: .75; filter: saturate(.7); }