:root{
  --bg:#faebf2;
  --lav:#3380ff;
  --heart:#e64d66;
  --text:#1a4099;
  --grad-a:#80b3f2;
  --grad-b:#f28cb3;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100%;overflow-x:hidden}
button{font-family:inherit;cursor:pointer;border:none;background:none;padding:0;color:inherit}
input,textarea,select{font-family:inherit;font-size:15px}
.georgia{font-family:Georgia,"Times New Roman",serif}
.georgia-i{font-family:Georgia,"Times New Roman",serif;font-style:italic}
.grad-text{background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text-diag{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.grad-bg{background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}

#hearts{position:fixed;inset:0;z-index:0;pointer-events:none}
.screen{display:none;position:relative;z-index:1;min-height:100vh}
.screen.active{display:block}
.app{max-width:1100px;margin:0 auto;padding:0 0 60px}

/* ===== Entry ===== */
#screen-entry{display:none;align-items:center;justify-content:center;text-align:center}
#screen-entry.active{display:flex}
#entry-heart{font-size:100px;color:var(--heart);line-height:1;user-select:none;
  filter:drop-shadow(0 10px 20px rgba(230,77,102,.4));
  transition:transform 1.5s ease-in-out;display:inline-block;
  animation:pulse 1.2s ease-in-out infinite alternate}
#entry-heart.holding{animation:none;transform:scale(1.5)}
#entry-heart.entered{animation:none;transform:scale(1.4);opacity:0;transition:all .3s}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08)}}
#entry-title{font-size:32px;font-weight:bold;margin:40px 0 16px}
#entry-time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;}
.entry-pill{padding:16px 30px;border-radius:999px;background:rgba(255,255,255,.7);
  box-shadow:0 5px 10px rgba(0,0,0,.05);display:inline-block}
#entry-hint{margin-top:30px;font-size:12px;color:#999;letter-spacing:1px}
.entry-fade{transition:opacity .3s}
.entry-fade.hidden{opacity:0}

/* ===== Nav bar ===== */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:24px 32px}
.nav-heart{display:flex;align-items:center;justify-content:center;color:var(--grad-b);font-size:32px;flex:none;filter:drop-shadow(0 4px 6px rgba(242,140,179,.2))}
.nav-left{display:flex;align-items:center;gap:10px}
.nav-title{font-size:20px}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-link{font-size:14px;color:var(--lav)}
.cal-toggle{font-size:11px;font-weight:bold;color:var(--lav);border:1.5px solid rgba(51,128,255,.4);
  border-radius:999px;padding:4px 10px}
.g-btn{position:relative;width:40px;height:40px}
.g-circle{width:36px;height:36px;border-radius:50%;background:rgba(128,128,128,.08);
  border:1.5px solid rgba(128,128,128,.3);color:#888;font-weight:bold;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  font-family:ui-rounded,-apple-system,sans-serif}
.g-dot{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;
  background:rgba(128,128,128,.4);border:1.5px solid var(--bg)}

/* ===== Counter ===== */
.together-counter{text-align:center;padding:30px 16px;cursor:pointer;user-select:none}
.tc-since{font-size:12px;font-weight:bold;color:#999;letter-spacing:2px}
.tc-days{font-size:96px;font-weight:300;font-family:Georgia,"Times New Roman",serif;line-height:1.1}
.tc-label{font-size:28px}
.countdown-pill{display:flex;justify-content:center;margin:0 16px}
.countdown-pill-inner{font-size:14px;padding:10px 20px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;position:relative;
  background:var(--bg);background-clip:padding-box;border:1.5px solid transparent}
.countdown-pill-inner::before{content:"";position:absolute;top:-1.5px;left:-1.5px;
  right:-1.5px;bottom:-1.5px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  z-index:-1;border-radius:999px}

/* ===== Layout ===== */
.dash-body{display:flex;flex-direction:column;gap:40px;padding:16px}
@media(min-width:920px){
  .dash-body{flex-direction:row;align-items:flex-start;gap:30px}
  .vignettes{flex:1;min-width:0}
  .sidebar{width:340px;flex:none}
}
.sidebar{display:flex;flex-direction:column;gap:30px}

/* ===== Sections ===== */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.section-title-cursive{font-size:24px;color:var(--lav)}
.section-label{font-size:12px;font-weight:bold;color:#999;letter-spacing:1.5px}
.icon-btn{font-size:18px;color:var(--lav);padding:2px 4px}
.view-all{font-size:14px;color:rgba(51,128,255,.7)}

/* ===== Memory strip ===== */
.memory-strip{display:flex;gap:20px;overflow-x:auto;padding:4px 4px 20px;scrollbar-width:none}
.memory-strip::-webkit-scrollbar{display:none}
.strip-card{width:240px;height:240px;flex:none;border-radius:12px;overflow:hidden;
  box-shadow:0 4px 8px rgba(0,0,0,.1);cursor:pointer;position:relative;background:#fff}
.strip-card img{width:100%;height:100%;object-fit:cover;display:block}
.strip-note{padding:20px;background:rgba(51,128,255,.18);height:100%;
  display:flex;flex-direction:column;gap:10px;text-align:left}
.strip-note .q{font-size:24px;color:rgba(51,128,255,.45)}
.strip-note .t{font-size:19px;font-family:Georgia,serif;font-style:italic;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.strip-note .d{font-size:13px;font-family:Georgia,serif;font-style:italic;color:var(--lav)}
.strip-note .foot{margin-top:auto;display:flex;justify-content:space-between;font-size:11px;
  font-weight:600;color:#999}
.empty-hint{font-size:13px;color:#b399ad;padding:10px 4px}

/* ===== Stat cards ===== */
.stat-row{display:flex;gap:15px}
.stat-card{flex:1;background:#fff;border-radius:15px;text-align:center;padding:14px 6px;
  box-shadow:0 2px 5px rgba(0,0,0,.03)}
.stat-card .v{font-size:22px;font-weight:600}
.stat-card .l{font-size:11px;color:#999;margin-top:2px}

/* ===== Upcoming dates ===== */
.date-row{display:flex;align-items:center;gap:15px;background:#fff;border-radius:15px;
  padding:14px 16px;box-shadow:0 2px 5px rgba(0,0,0,.03);position:relative;overflow:hidden}
.date-row.today{background:linear-gradient(90deg,var(--grad-a),var(--grad-b));color:#fff}
.date-row.pinned{box-shadow:0 2px 8px rgba(128,179,242,.3)}
.date-row.pinned::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--grad-a),var(--grad-b))}
.date-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:22px;flex:none}
.date-info{flex:1;min-width:0}
.date-info .t{font-weight:600;font-size:16px}
.date-info .d{font-size:12px;color:#999;margin-top:2px}
.date-row.today .date-info .d{color:rgba(255,255,255,.8)}
.date-info .left{font-size:12px;margin-top:2px}
.row-actions{display:flex;gap:6px;flex:none}
.row-actions button{width:28px;height:28px;border-radius:8px;font-size:13px;
  display:flex;align-items:center;justify-content:center;background:rgba(128,128,128,.08)}
.date-row.today .row-actions button{background:rgba(255,255,255,.25)}
.dates-list{display:flex;flex-direction:column;gap:12px}
.show-more{font-size:12px;font-weight:600;color:var(--lav);text-align:center;padding:8px;width:100%}
.sync-msg{font-size:12px;color:var(--lav);background:rgba(51,128,255,.1);border-radius:8px;
  padding:4px 12px;margin-bottom:10px}

/* ===== Goals ===== */
.goals-card{background:rgba(51,128,255,.55);border-radius:15px;padding:16px;
  display:flex;flex-direction:column;gap:12px}
.goal-row{display:flex;align-items:center;gap:12px;color:#fff}
.goal-check{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff}
.goal-row.done .goal-check{border-color:transparent}
.goal-row .t{font-size:14px;flex:1}
.goal-row.done .t{opacity:.5;text-decoration:line-through}
.goal-row .del{opacity:.6;color:#fff;font-size:13px}
.goal-compose{display:flex;gap:8px;margin-top:4px}
.goal-compose input{flex:1;background:rgba(255,255,255,.15);border:none;border-radius:10px;
  padding:9px 12px;color:#fff;outline:none}
.goal-compose input::placeholder{color:rgba(255,255,255,.6)}
.goal-compose button{color:#fff;font-size:20px}

/* ===== Love notes ===== */
.notes-list{display:flex;flex-direction:column;gap:12px}
.note-card{background:#fff;border-radius:15px;padding:14px 16px;
  box-shadow:0 2px 5px rgba(0,0,0,.03);display:flex;gap:12px;align-items:flex-start;
  position:relative;user-select:none}
.note-avatar{width:28px;height:28px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:bold;overflow:hidden}
.note-avatar img{width:100%;height:100%;object-fit:cover}
.note-body{flex:1;min-width:0}
.note-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.note-head .a{font-size:14px;font-weight:600}
.note-head .ts{font-size:11px;color:#999;flex:none}
.note-text{font-size:14px;color:rgba(26,64,153,.85);margin-top:4px;word-wrap:break-word}
.note-reactions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.note-reactions span{font-size:11px;background:rgba(128,128,128,.08);border-radius:8px;
  padding:2px 6px;color:#999}
.note-heart{font-size:15px;color:rgba(128,128,128,.5);flex:none;padding:2px}
.note-del{position:absolute;top:6px;right:8px;font-size:10px;color:#ccc;display:none}
.note-card:hover .note-del{display:block}
.emoji-bar{position:absolute;top:-48px;left:50%;transform:translateX(-50%);
  background:#333;border-radius:30px;padding:8px 14px;display:flex;gap:10px;z-index:50;
  box-shadow:0 5px 10px rgba(0,0,0,.2)}
.emoji-bar button{font-size:22px}
.compose-card{background:#fff;border-radius:15px;padding:14px 16px;
  box-shadow:0 2px 5px rgba(0,0,0,.03);display:flex;flex-direction:column;gap:10px}
.author-chips{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none}
.author-chips::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#888;
  background:rgba(128,128,128,.12);border-radius:999px;padding:6px 12px;flex:none}
.chip.active{color:#fff}
.compose-row{display:flex;gap:8px}
.compose-row input{flex:1;background:rgba(128,128,128,.08);border:none;border-radius:10px;
  padding:9px 12px;outline:none;color:var(--text)}
.compose-row button{color:var(--lav);font-size:18px}

/* ===== Gallery ===== */
.gallery-header{display:flex;align-items:center;gap:12px;padding:16px;position:sticky;top:0;
  background:var(--bg);z-index:5}
.back-btn{font-size:20px;color:var(--lav);padding:4px 8px}
.gallery-title{font-size:24px}
.year-select{margin-left:auto;border:1.5px solid rgba(51,128,255,.35);background:#fff;
  color:var(--lav);border-radius:999px;padding:6px 12px;font-size:13px;outline:none}
.masonry{display:flex;flex-direction:column;gap:16px;padding:16px}
.masonry-row{display:flex;gap:16px;align-items:flex-start}
.masonry-row>*{flex:1;min-width:0}
.polaroid{background:#fff;padding:12px 12px 32px;box-shadow:2px 5px 10px rgba(0,0,0,.1);
  position:relative;cursor:pointer}
.polaroid img{width:100%;object-fit:cover;display:block}
.polaroid .cap{font-size:15px;font-family:Georgia,serif;font-style:italic;text-align:center;
  margin-top:12px;color:var(--text)}
.polaroid.quote{padding:20px;display:flex;flex-direction:column;gap:12px}
.polaroid.quote .q{font-size:19px;font-family:Georgia,serif;font-style:italic}
.polaroid.quote .foot{display:flex;justify-content:space-between;font-size:12px;
  color:rgba(26,64,153,.8);margin-top:auto}
.polaroid.location .loc{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:0 4px 8px}
.polaroid.location .loc .pin{color:var(--heart)}
.polaroid.location .loc .lt{font-weight:600;font-size:15px}
.polaroid.location .loc .ld{font-size:12px;color:#999}
.tape{position:absolute;top:-6px;left:50%;margin-left:-22px;width:45px;height:16px;
  transform:rotate(-5deg);opacity:.85}
.polaroid .pdel{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;font-size:11px;display:none;align-items:center;
  justify-content:center;z-index:2}
.polaroid:hover .pdel{display:flex}
.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;
  color:#fff;font-size:26px;box-shadow:0 6px 16px rgba(230,77,102,.4);z-index:20;
  display:flex;align-items:center;justify-content:center}

/* All photos grid */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:16px}
.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;cursor:pointer}

/* ===== Sheets / modals ===== */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:none;
  align-items:flex-end;justify-content:center}
.backdrop.open{display:flex}
@media(min-width:600px){.backdrop{align-items:center}}
.sheet{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;padding:20px;animation:slideup .25s ease}
@media(min-width:600px){.sheet{border-radius:20px}}
@keyframes slideup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 16px;font-size:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:#999;margin-bottom:6px;
  letter-spacing:.5px}
.field input[type=text],.field input[type=date],.field input[type=number],.field select,
.field textarea{width:100%;border:1px solid #e5dce5;border-radius:10px;padding:10px 12px;
  outline:none;background:#faf7fa;color:var(--text)}
.field textarea{resize:vertical;min-height:60px}
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.icon-grid button{font-size:20px;padding:8px 0;border-radius:10px;background:#faf7fa;
  border:2px solid transparent}
.icon-grid button.sel{border-color:var(--lav);background:rgba(51,128,255,.08)}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:9px 0;border-radius:10px;background:#faf7fa;font-size:13px;
  font-weight:600;color:#999;border:2px solid transparent}
.seg button.sel{color:var(--lav);border-color:var(--lav);background:rgba(51,128,255,.08)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.toggle-row span{font-size:14px;font-weight:500}
.sheet-actions{display:flex;gap:10px;margin-top:20px}
.btn{flex:1;padding:13px 0;border-radius:12px;font-size:15px;font-weight:600;text-align:center}
.btn-primary{color:#fff}
.btn-ghost{background:#f1ecf1;color:#888}
.btn-danger{background:rgba(230,77,102,.12);color:var(--heart)}
.archive-row{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid #f1ecf1}
.archive-row .t{flex:1;font-size:14px}
.archive-row button{font-size:12px;color:var(--lav);padding:4px 8px}
.author-manage-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.author-manage-row .t{flex:1;font-size:15px;font-weight:500}

/* ===== Photo viewer ===== */
#viewer{position:fixed;inset:0;background:rgba(15,10,20,.92);z-index:200;display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:20px}
#viewer.open{display:flex}
#viewer img{max-width:92vw;max-height:62vh;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#viewer .vcard{background:rgba(255,255,255,.1);border-radius:14px;padding:14px 20px;
  color:#fff;margin-top:18px;max-width:480px;text-align:center;backdrop-filter:blur(8px)}
#viewer .vt{font-size:18px;font-family:Georgia,serif;font-style:italic}
#viewer .vd{font-size:13px;opacity:.75;margin-top:4px}
#viewer .vdate{font-size:11px;opacity:.55;margin-top:8px;letter-spacing:1px}
#viewer .vclose{position:absolute;top:18px;right:20px;color:#fff;font-size:22px;opacity:.8}
#viewer .vactions{margin-top:14px;display:flex;gap:10px}
#viewer .vactions button{font-size:13px;color:#fff;background:rgba(255,255,255,.15);
  border-radius:999px;padding:7px 16px}

/* ===== Time together ===== */
#timetogether{position:fixed;inset:0;background:var(--bg);z-index:150;display:none;
  flex-direction:column;align-items:center;overflow:hidden}
#timetogether.open{display:flex}
.tt-top{width:100%;display:flex;justify-content:space-between;padding:14px}
.tt-top button{font-size:20px;color:var(--lav);padding:8px}
.tt-heart{font-size:110px;color:var(--heart);line-height:1;margin-top:6vh;
  filter:drop-shadow(0 10px 20px rgba(230,77,102,.4));transition:transform .4s;cursor:pointer}
#timetogether.collapsed .tt-heart{animation:beat .8s ease-in-out infinite alternate}
@keyframes beat{from{transform:scale(1)}to{transform:scale(1.15)}}
.tt-title{font-size:34px;margin:20px 0;transition:all .4s}
#timetogether.collapsed .tt-title,#timetogether.collapsed .tt-units{opacity:0;transform:scale(.8)}
.tt-units{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:0 16px;
  transition:all .4s}
.tt-unit{text-align:center;background:rgba(255,255,255,.65);border-radius:14px;
  padding:12px 14px;min-width:74px;box-shadow:0 4px 10px rgba(0,0,0,.04)}
.tt-unit .n{font-size:30px;font-weight:300;font-family:Georgia,serif}
.tt-unit .u{font-size:10px;color:#999;letter-spacing:1.5px;margin-top:2px}
.tt-player{margin-top:auto;margin-bottom:26px;width:min(92%,480px);background:rgba(255,255,255,.6);
  border-radius:20px;padding:14px 20px;backdrop-filter:blur(6px);transition:all .4s}
#timetogether.collapsed .tt-player{opacity:0;pointer-events:none}
.tt-player .row{display:flex;align-items:center;gap:14px}
.tt-player .art{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;color:var(--lav);font-size:18px}
.tt-player .meta{flex:1;min-width:0}
.tt-player .sn{font-size:14px;font-weight:600;color:var(--lav);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tt-player .pp{font-size:20px;color:var(--lav)}
.tt-progress{height:4px;border-radius:4px;background:rgba(51,128,255,.2);margin-top:12px;
  cursor:pointer;position:relative}
.tt-progress .fill{height:100%;border-radius:4px;background:var(--lav);width:0%}
.tt-times{display:flex;justify-content:space-between;font-size:10px;
  font-family:ui-monospace,monospace;color:rgba(51,128,255,.6);margin-top:4px}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#333;
  color:#fff;font-size:13px;border-radius:999px;padding:9px 18px;z-index:300;opacity:0;
  transition:opacity .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}
/* ===== COUNTDOWN SCREEN ===== */
#screen-countdown .app {
  display: flex; flex-direction: column; height: 100vh;
}
.cd-header {
  padding: 20px;
}
.cd-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 80px;
}
.cd-title {
  font-size: 28px; margin-bottom: 40px; text-align: center;
}
.cd-timer {
  display: flex; gap: 20px; align-items: center; justify-content: center;
}
.cd-group {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cd-group-label {
  font-size: 14px; font-weight: 600; color: var(--text); opacity: 0.6; text-transform: uppercase; letter-spacing: 1px;
}
.flip-flap {
  position: relative; width: 70px; height: 100px;
  background: white; border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  perspective: 1000px;
  font-family: ui-monospaced, monospace; font-size: 56px; font-weight: bold; color: var(--text);
}
.flip-flap::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  background: var(--bg); z-index: 10; margin-top: -1px;
}
.digit-half {
  position: absolute; width: 100%; height: 50%; left: 0;
  overflow: hidden; background: white; border-radius: 12px;
  display: flex; justify-content: center;
}
.digit-half.top {
  top: 0; align-items: flex-end; transform-origin: bottom;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.digit-half.top span { transform: translateY(50%); }
.digit-half.bottom {
  bottom: 0; align-items: flex-start; transform-origin: top;
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.digit-half.bottom span { transform: translateY(-50%); }
.digit-half.flip-top {
  z-index: 2; animation: flipTop 0.25s ease-in forwards;
}
.digit-half.flip-bottom {
  z-index: 2; animation: flipBottom 0.25s ease-out 0.25s forwards; transform: rotateX(90deg);
}
@keyframes flipTop {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}
@keyframes flipBottom {
  0% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

/* ===== FULLSCREEN VIEWER ===== */
.fullscreen-viewer {
  display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.9); z-index: 1000;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fullscreen-viewer.open { display: block; animation: fade 0.3s ease; }
.viewer-carousel {
  display: flex; width: 100vw; height: 100vh;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.viewer-carousel::-webkit-scrollbar { display: none; }
.viewer-slide {
  flex: none; width: 100vw; height: 100vh; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.viewer-slide img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.viewer-slide .quote-display {
  font-family: 'Georgia', serif; font-style: italic; font-size: 32px;
  color: white; text-align: center; padding: 40px;
}
.viewer-overlays {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px; transition: opacity 0.3s;
}
.viewer-overlays.hidden { opacity: 0; }
.vclose {
  pointer-events: auto; align-self: flex-start;
  background: rgba(255,255,255,0.2); border: none; color: white;
  width: 44px; height: 44px; border-radius: 22px; font-size: 20px;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px);
}
.v-glass-card {
  pointer-events: auto; align-self: center; width: 100%; max-width: 500px;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border-radius: 16px; padding: 20px; color: white;
  margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.v-glass-card .vt { font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.v-glass-card .vd { font-size: 14px; opacity: 0.9; margin-bottom: 12px; }
.v-glass-card .vdate { font-size: 12px; opacity: 0.6; margin-bottom: 16px; }
.v-glass-card .vactions { display: flex; gap: 12px; }
.v-glass-card .vactions button {
  flex: 1; padding: 10px; border-radius: 8px; border: none;
  background: rgba(255,255,255,0.2); color: white; font-weight: 500;
}