:root {
  --bg:     #07090f;
  --bg2:    #0e1119;
  --card:   #131720;
  --card2:  #1a2030;
  --border: rgba(255,255,255,.07);
  --border2:rgba(255,255,255,.13);
  --text:   #eef2f7;
  --text2:  #8896ac;
  --muted:  #4a5568;

  --p:      #6ee7b7;
  --pdim:   rgba(110,231,183,.10);
  --pglow:  rgba(110,231,183,.22);
  --pa:     #34d399;

  --gold:   #fbbf24;
  --goldd:  rgba(251,191,36,.11);
  --rose:   #fb7185;
  --rosed:  rgba(251,113,133,.10);
  --sky:    #67e8f9;
  --skyd:   rgba(103,232,249,.10);
  --violet: #c084fc;
  --viold:  rgba(192,132,252,.10);

  --cat-emotion:  #6ee7b7;
  --cat-addiction:#fb923c;
  --cat-attention:#f472b6;

  --r1:5px; --r2:10px; --r3:16px; --r4:22px; --r5:999px;
  --nav:64px;
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body {
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:.9rem; line-height:1.6;
  color:var(--text); background:var(--bg);
  min-height:100dvh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.4;
}

h1,h2,h3 { font-family:'Lora',serif; font-weight:600; line-height:1.2 }
p { color:var(--text2) }
button { font-family:'DM Sans',sans-serif; cursor:pointer; border:none; outline:none }
button:focus-visible { outline:2px solid var(--p); outline-offset:2px }
input,select,textarea {
  font-family:'DM Sans',sans-serif; font-size:.9rem; color:var(--text);
  background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r2);
  padding:11px 14px; outline:none; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus {
  border-color:rgba(110,231,183,.45);
  box-shadow:0 0 0 3px var(--pdim);
}
input::placeholder { color:var(--muted) }
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px }

@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes slideRight { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes popIn   { 0%{transform:scale(0) rotate(-10deg);opacity:0} 65%{transform:scale(1.15) rotate(3deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border-radius:var(--r2); font-size:.85rem; font-weight:600;
  transition:all .2s var(--ease); white-space:nowrap; cursor:pointer; border:none;
  position:relative; overflow:hidden;
}
.btn-primary { background:var(--p); color:#07090f }
.btn-primary:hover { filter:brightness(1.1); box-shadow:0 4px 20px var(--pglow) }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border2) }
.btn-ghost:hover { background:var(--card2); color:var(--text); border-color:var(--border2) }
.btn-danger { background:var(--rosed); color:var(--rose); border:1px solid rgba(251,113,133,.2) }
.btn-danger:hover { background:rgba(251,113,133,.18) }
.btn-sm  { padding:6px 12px; font-size:.76rem; border-radius:var(--r1) }
.btn-lg  { padding:14px 28px; font-size:.95rem; border-radius:var(--r3) }
.btn:disabled { opacity:.35; cursor:not-allowed; pointer-events:none }

.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r4); padding:22px }

.screen { display:none; position:fixed; inset:0; background:var(--bg); z-index:200; overflow-y:auto }
.screen.open { display:block; animation:fadeIn .2s var(--ease) }
.screen-inner { max-width:520px; margin:0 auto; padding:52px 20px 80px }

#app { display:none; min-height:100dvh; flex-direction:column }
#app.show { display:flex }

#topbar {
  position:sticky; top:0; z-index:100;
  background:rgba(7,9,15,.88); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
  padding:10px 20px;
}
#tb-avatar { font-size:1.5rem; line-height:1 }
#tb-info { flex:1; min-width:0 }
#tb-name { font-weight:700; font-size:.9rem; line-height:1.2 }
#tb-level { font-size:.65rem; color:var(--p); font-family:'DM Mono',monospace; font-weight:500 }
#tb-xp-wrap { width:80px; height:3px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-top:4px }
#tb-xp-fill { height:100%; background:var(--p); border-radius:2px; transition:width .6s var(--spring) }
#tb-mood-btn {
  width:36px; height:36px; border-radius:50%; font-size:1.2rem;
  background:var(--card2); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0;
}
#tb-mood-btn:hover { background:var(--card); transform:scale(1.08) }
#tb-change { font-size:.72rem; font-weight:600; color:var(--text2); background:transparent; border:1px solid var(--border); padding:5px 10px; border-radius:var(--r5); flex-shrink:0; transition:all .18s }
#tb-change:hover { color:var(--text); border-color:var(--border2) }

#main { flex:1; width:min(780px,100%); margin:0 auto; padding:24px 20px calc(var(--nav) + 24px) }

#nav {
  position:fixed; bottom:0; left:0; right:0;
  height:var(--nav);
  background:rgba(13,17,25,.94); backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:flex; align-items:stretch;
  z-index:100;
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; background:none; border:none; color:var(--muted); cursor:pointer;
  transition:all .18s var(--ease); padding:8px 4px; position:relative;
}
.nav-btn::after {
  content:''; position:absolute; bottom:0; left:25%; right:25%; height:2px;
  background:var(--p); border-radius:2px 2px 0 0;
  transform:scaleX(0); transition:transform .2s var(--spring);
}
.nav-btn.active { color:var(--p) }
.nav-btn.active::after { transform:scaleX(1) }
.nav-btn:hover { color:var(--text2) }
.nav-icon { font-size:1.25rem; line-height:1 }
.nav-lbl { font-size:.52rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em }

#desktop-nav { display:none }

@media(min-width:740px) {
  #main { padding-bottom:28px }
  #nav { display:none }
  #topbar { padding:10px 28px }
  #desktop-nav { display:flex; gap:2px; margin-left:auto }
  #desktop-nav .nav-btn { flex:none; flex-direction:row; gap:6px; padding:7px 14px; border-radius:var(--r2); font-size:.82rem }
  #desktop-nav .nav-btn.active { background:var(--pdim) }
  #desktop-nav .nav-btn::after { display:none }
  #desktop-nav .nav-icon { font-size:.95rem }
  #desktop-nav .nav-lbl { font-size:.82rem; text-transform:none; letter-spacing:0; font-weight:600 }
}

.view { display:none }
.view.active { display:block; animation:fadeUp .22s var(--ease) }

.ph { margin-bottom:28px }
.ph-eyebrow { font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--p); margin-bottom:8px }
.ph-title { font-size:clamp(1.5rem,3.5vw,2rem); margin-bottom:6px }
.ph-sub { font-size:.82rem; color:var(--muted) }

.xp-hero {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r4);
  padding:24px;
  margin-bottom:24px;
  position:relative; overflow:hidden;
}
.xp-hero::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,var(--pglow) 0%,transparent 70%);
  pointer-events:none;
}
.xp-hero-top { display:flex; align-items:center; gap:14px; margin-bottom:16px }
.xp-hero-avatar { font-size:2.2rem; width:54px; height:54px; background:var(--pdim); border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid rgba(110,231,183,.2); flex-shrink:0 }
.xp-hero-name { font-family:'Lora',serif; font-size:1.25rem; font-weight:600 }
.xp-hero-obj { font-size:.72rem; color:var(--text2); margin-top:2px }
.xp-hero-num { margin-left:auto; text-align:right; font-family:'DM Mono',monospace; font-size:1.8rem; font-weight:500; color:var(--p); line-height:1 }
.xp-hero-lbl { font-size:.62rem; color:var(--muted); text-align:right; margin-top:2px }
.xp-bar-track { background:rgba(255,255,255,.06); border-radius:4px; height:6px; overflow:hidden }
.xp-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--pa),var(--p)); transition:width .7s var(--spring) }
.xp-bar-labels { display:flex; justify-content:space-between; font-size:.62rem; color:var(--muted); margin-top:5px }

.section-label {
  display:flex; align-items:center; gap:10px;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  margin-bottom:14px;
}
.section-label::after { content:''; flex:1; height:1px; background:var(--border) }

.cat-block { margin-bottom:32px }
.cat-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; border-radius:var(--r5);
  font-size:.72rem; font-weight:700;
  background:color-mix(in srgb,var(--cc) 10%,transparent);
  color:var(--cc); border:1px solid color-mix(in srgb,var(--cc) 22%,transparent);
  margin-bottom:12px;
}

.mod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px }

.mod-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r4);
  padding:20px; cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
  display:flex; flex-direction:column; gap:11px;
  position:relative; overflow:hidden;
}
.mod-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--cc,var(--p)),transparent);
  opacity:0; transition:opacity .2s;
}
.mod-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--cc,var(--p)) 30%,transparent); box-shadow:0 12px 36px rgba(0,0,0,.35) }
.mod-card:hover::after { opacity:1 }
.mod-card.cap { opacity:.45; cursor:not-allowed; transform:none!important }

.mod-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px }
.mod-icon { font-size:1.8rem; line-height:1 }
.mod-badge { font-size:.6rem; font-weight:700; padding:2px 8px; border-radius:var(--r5); background:var(--wdim,rgba(251,191,36,.1)); color:var(--gold); border:1px solid rgba(251,191,36,.2) }

.mod-title { font-family:'Lora',serif; font-size:1rem; font-weight:600; line-height:1.25 }
.mod-desc { font-size:.76rem; color:var(--text2); line-height:1.6; flex:1 }
.mod-evidence { font-size:.6rem; color:var(--muted); font-style:italic; margin-top:-4px }

.mod-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap }
.mod-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.mod-dur { font-size:.65rem; color:var(--muted) }
.mod-xp { font-size:.65rem; color:var(--p); font-weight:600; font-family:'DM Mono',monospace }
.diff-dots { display:flex; gap:3px }
.dd { width:5px; height:5px; border-radius:50%; background:var(--border2) }
.dd.on { background:var(--cc,var(--p)) }

.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:24px }
@media(min-width:500px){ .stats-grid { grid-template-columns:repeat(4,1fr) } }
.stat-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r3);
  padding:16px 12px; text-align:center;
}
.stat-val { font-family:'DM Mono',monospace; font-size:1.5rem; font-weight:500; margin-bottom:3px; line-height:1 }
.stat-lbl { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em }

.medal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-top:8px }
.medal-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r3);
  padding:16px 12px; text-align:center; transition:all .2s; position:relative; overflow:hidden;
}
.medal-card.unlocked { border-color:var(--mc,var(--p)); background:color-mix(in srgb,var(--mc,var(--p)) 6%,var(--card)); box-shadow:0 0 24px color-mix(in srgb,var(--mc,var(--p)) 12%,transparent) }
.medal-card.locked { opacity:.3; filter:grayscale(1) }
.medal-icon { font-size:2rem; margin-bottom:7px; line-height:1 }
.medal-name { font-family:'Lora',serif; font-size:.8rem; font-weight:600; color:var(--mc,var(--text)); margin-bottom:4px }
.medal-desc { font-size:.62rem; color:var(--muted); line-height:1.4 }
.medal-prog { height:3px; background:rgba(255,255,255,.06); border-radius:2px; margin-top:8px; overflow:hidden }
.medal-prog-fill { height:100%; border-radius:2px; background:var(--mc,var(--p)); transition:width .6s var(--spring) }
.medal-check { position:absolute; top:7px; right:7px; font-size:.55rem; font-weight:700; padding:2px 6px; border-radius:var(--r5); background:var(--mc,var(--p)); color:#07090f; letter-spacing:.04em }

#medal-popup { display:none; position:fixed; inset:0; z-index:9999; background:rgba(7,9,15,.88); backdrop-filter:blur(8px); align-items:center; justify-content:center }
#medal-popup.open { display:flex }
#medal-popup-inner { text-align:center; padding:44px 32px; background:var(--card); border:1px solid var(--border2); border-radius:32px; max-width:320px; width:90%; animation:scaleIn .3s var(--spring) }
#mp-icon { font-size:4rem; margin-bottom:12px; animation:popIn .5s var(--spring) .1s both; display:block }
#mp-tag { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px }
#mp-name { font-family:'Lora',serif; font-size:1.6rem; font-weight:600; margin-bottom:6px }
#mp-desc { font-size:.82rem; color:var(--text2); margin-bottom:24px; line-height:1.55 }

.profile-settings { display:flex; flex-direction:column; gap:14px; margin-bottom:28px }
.ps-row {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r3);
  padding:16px 18px; display:flex; align-items:center; gap:14px;
}
.ps-icon { font-size:1.4rem; width:42px; height:42px; background:var(--pdim); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.ps-info { flex:1 }
.ps-label { font-weight:600; font-size:.88rem; margin-bottom:2px }
.ps-sub { font-size:.7rem; color:var(--muted) }
.ps-action { flex-shrink:0 }

.sw { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0 }
.sw input { opacity:0; width:0; height:0 }
.sw-track { position:absolute; inset:0; background:var(--border2); border-radius:11px; cursor:pointer; transition:background .2s }
.sw-track::before { content:''; position:absolute; width:16px; height:16px; left:3px; bottom:3px; background:white; border-radius:50%; transition:transform .2s var(--spring) }
.sw input:checked + .sw-track { background:var(--p) }
.sw input:checked + .sw-track::before { transform:translateX(18px) }

.hist-item {
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--border);
}
.hist-icon { font-size:1.4rem; width:38px; height:38px; border-radius:var(--r2); background:var(--card2); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.hist-info { flex:1; min-width:0 }
.hist-title { font-weight:600; font-size:.86rem }
.hist-date { font-size:.67rem; color:var(--muted) }
.hist-xp { font-family:'DM Mono',monospace; font-size:.88rem; font-weight:500; color:var(--p); flex-shrink:0 }

.stability-bar-chart { display:flex; gap:4px; align-items:flex-end; height:40px; margin-top:10px }
.stab-bar { flex:1; border-radius:3px 3px 0 0; min-height:4px }

#mood-canvas { display:none; position:fixed; inset:0; pointer-events:none; z-index:0 }
#mood-canvas.on { display:block }

.backdrop {
  display:none; position:fixed; inset:0; z-index:5000;
  background:rgba(7,9,15,.85); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:20px;
}
.backdrop.open { display:flex; animation:fadeIn .15s var(--ease) }
.modal {
  background:var(--card); border:1px solid var(--border2); border-radius:26px;
  padding:28px 24px; width:100%; max-width:440px; max-height:90dvh; overflow-y:auto;
  animation:scaleIn .2s var(--spring);
}
.modal-title { font-family:'Lora',serif; font-size:1.2rem; font-weight:600; margin-bottom:4px }
.modal-sub { font-size:.76rem; color:var(--muted); margin-bottom:20px }
.modal-actions { display:flex; gap:8px; margin-top:22px }
.modal-actions .btn { flex:1 }
.form-label { display:block; font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:6px }
.form-group { margin-bottom:18px }
.form-hint { font-size:.72rem; color:var(--muted); margin-top:5px }

.av-picker { display:flex; flex-wrap:wrap; gap:6px }
.av-opt { width:42px; height:42px; border-radius:var(--r2); font-size:1.35rem; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); background:rgba(255,255,255,.03); cursor:pointer; transition:all .15s }
.av-opt:hover { border-color:rgba(110,231,183,.4) }
.av-opt.sel { border-color:var(--p); background:var(--pdim) }

.profile-list { display:flex; flex-direction:column; gap:10px }
.pf-card {
  background:var(--card); border:1.5px solid var(--border); border-radius:var(--r4);
  padding:16px 18px; display:flex; align-items:center; gap:14px;
  cursor:pointer; transition:all .2s var(--ease);
}
.pf-card:hover { border-color:var(--border2); background:var(--card2); transform:translateX(4px) }
.pf-avatar { font-size:2rem; width:50px; height:50px; background:rgba(255,255,255,.04); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.pf-info { flex:1; min-width:0}
.pf-name { font-family:'Lora',serif; font-size:1rem; font-weight:600; margin-bottom:2px }
.pf-meta { font-size:.68rem; color:var(--muted) }
.pf-add { border-style:dashed; opacity:.6 }
.pf-add:hover { opacity:1 }

#toast-wrap { position:fixed; bottom:calc(var(--nav) + 12px); left:50%; transform:translateX(-50%); z-index:1000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(400px,90vw) }
.toast { background:var(--card2); border:1px solid var(--border2); border-radius:var(--r3); padding:10px 18px; font-size:.83rem; font-weight:600; color:var(--text); box-shadow:0 8px 32px rgba(0,0,0,.5); animation:fadeUp .2s var(--spring); display:flex; align-items:center; gap:10px; width:100% }
.toast.s { border-left:3px solid var(--p) }
.toast.w { border-left:3px solid var(--gold) }
.toast.e { border-left:3px solid var(--rose) }
.toast.i { border-left:3px solid var(--sky) }

.mood-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px }
.mood-opt { display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px; border-radius:var(--r3); cursor:pointer; border:2px solid var(--border); background:var(--bg2); transition:all .18s var(--spring) }
.mood-opt:hover { border-color:var(--mc); transform:translateY(-2px); background:color-mix(in srgb,var(--mc) 8%,var(--bg2)) }
.mood-opt.sel { border-color:var(--mc); background:color-mix(in srgb,var(--mc) 12%,var(--bg2)); box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 18%,transparent) }
.mood-opt-e { font-size:1.7rem; line-height:1 }
.mood-opt-l { font-size:.6rem; font-weight:700; color:var(--mc); text-align:center }

#sess-ov { display:none; position:fixed; inset:0; z-index:500; flex-direction:column; background:var(--bg) }
#sess-ov.open { display:flex }
#sess-bar { display:flex; align-items:center; gap:12px; padding:10px 18px; background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap }
#sess-title { font-family:'Lora',serif; font-weight:600; font-size:.92rem; flex:1; min-width:0 }
#sess-prog-wrap { flex:1; max-width:140px; height:3px; background:var(--border2); border-radius:2px; overflow:hidden }
#sess-prog { height:100%; background:linear-gradient(90deg,var(--pa),var(--p)); border-radius:2px; width:0%; transition:width .3s var(--ease) }
#sess-diff { font-size:.68rem; color:var(--text2); font-family:'DM Mono',monospace }
#sess-xp { font-size:.75rem; font-weight:600; color:var(--p); font-family:'DM Mono',monospace }
#sess-actions { display:flex; gap:6px; margin-left:auto }
#game-frame { flex:1; border:none; width:100%; background:var(--bg) }

#confirm-modal .modal { max-width:360px; text-align:center }

@media print {
  body,#app,#topbar,#nav,#toast-wrap,#medal-popup,#mood-canvas,#sess-ov,#confirm-modal { display:none!important }
  #print-zone { display:block!important }
  .pr-section { margin-bottom:18pt; page-break-inside:avoid }
  .pr-tbl { width:100%; border-collapse:collapse; font-size:8.5pt; margin-top:8pt }
  .pr-tbl th { background:#f1f5f9; text-align:left; padding:5pt 8pt; font-size:7.5pt; text-transform:uppercase; letter-spacing:.05em; color:#475569 }
  .pr-tbl td { padding:5pt 8pt; border-bottom:1pt solid #e2e8f0; color:#111; vertical-align:top }
  .pr-stats { display:flex; gap:12pt; margin-bottom:16pt }
  .pr-stat { flex:1; border:1pt solid #e2e8f0; border-radius:5pt; padding:10pt; text-align:center }
  .pr-stat-val { font-size:18pt; font-weight:800; color:#1e293b }
  .pr-stat-lbl { font-size:6.5pt; text-transform:uppercase; letter-spacing:.1em; color:#64748b; margin-top:3pt }
}
#print-zone { display:none }

.empty { text-align:center; padding:44px 20px; color:var(--muted) }
.empty-ico { font-size:2.6rem; margin-bottom:12px; opacity:.5 }
.empty-t { font-family:'Lora',serif; font-size:1rem; color:var(--text2); font-weight:600; margin-bottom:6px }