:root {
  --gold: #f5c56b; --gold-soft: #ffd98a; --amber: #b8651f;
  --ink: #0a0a12; --glass: rgba(255,255,255,.07); --glass-brd: rgba(255,255,255,.16);
  --txt: #f4efe6; --txt-dim: #b9b3a6;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  background: var(--ink); color: var(--txt);
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow:hidden; position:fixed; inset:0;
}

/* living background */
#aurora { position:fixed; inset:0; z-index:0; overflow:hidden;
  background: radial-gradient(120% 90% at 70% 10%, #1b1426 0%, #0a0a12 55%, #07070d 100%); }
.blob { position:absolute; border-radius:50%; filter: blur(70px); opacity:.5; }
.b1 { width:60vmax; height:60vmax; left:-20vmax; top:-15vmax;
  background: radial-gradient(circle at 35% 35%, #8a5a1e, #2a1608 70%);
  animation: drift1 26s ease-in-out infinite alternate; }
.b2 { width:50vmax; height:50vmax; right:-18vmax; bottom:-12vmax;
  background: radial-gradient(circle at 60% 40%, #3b2a55, #120a1e 70%);
  animation: drift2 32s ease-in-out infinite alternate; }
.b3 { width:34vmax; height:34vmax; right:8vmax; top:12vmax;
  background: radial-gradient(circle at 50% 50%, #5f4318, transparent 70%);
  animation: drift1 22s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(9vmax, 6vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-8vmax, -7vmax) scale(.92); } }
.grain { position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

/* screens */
.screen { position:fixed; inset:0; z-index:1; display:none; flex-direction:column;
  opacity:0; transform: translateY(14px); transition: opacity .38s ease, transform .38s ease; }
.screen.active { display:flex; opacity:1; transform:none; }
.screen.dark { background:#000; }
.content { flex:1; overflow-y:auto; padding: 14px 18px calc(96px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; }
.content > * { flex-shrink:0; }

/* top bar */
.topbar { display:flex; align-items:center; gap:12px; padding: calc(12px + env(safe-area-inset-top)) 18px 10px; }
.topbar.overlay { position:absolute; top:0; left:0; right:0; z-index:3;
  background: linear-gradient(rgba(0,0,0,.55), transparent); }
.topbar-title { font-weight:700; letter-spacing:.14em; font-size:15px; }
.topbar-sub { font-size:11px; color:var(--txt-dim); letter-spacing:.06em; }
.mini-orb { width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; color:#201204;
  background: radial-gradient(circle at 35% 30%, var(--gold-soft), var(--amber) 65%, #4a2c0d);
  box-shadow: 0 2px 14px rgba(245,197,107,.35), inset 0 1px 2px rgba(255,255,255,.5); }
.back { background:var(--glass); border:1px solid var(--glass-brd); color:var(--txt);
  width:34px; height:34px; border-radius:12px; font-size:20px; line-height:1; backdrop-filter: blur(14px); }

/* liquid glass */
.glass-card, .glass-btn, .glass-pill {
  position:relative; border-radius:22px; border:1px solid var(--glass-brd);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045) 40%, rgba(255,255,255,.02));
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 18px rgba(255,255,255,.03);
  color:var(--txt); overflow:hidden;
}
.glass-card::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 22%); opacity:.5; }
.glass-btn { padding:14px 16px; font-size:14px; font-weight:600; letter-spacing:.04em; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease; text-align:center; border-radius:18px; }
.glass-btn:active { transform: scale(.97); }
.glass-btn.primary { background: linear-gradient(135deg, #f7cd7d, #c47a24 70%);
  color:#231303; border-color: rgba(255,220,150,.6);
  box-shadow: 0 8px 26px rgba(212,138,38,.35), inset 0 1px 0 rgba(255,255,255,.6); }
.glass-btn.ghost { background:transparent; box-shadow:none; }
.glass-pill { padding:7px 14px; border-radius:999px; font-size:11px; letter-spacing:.08em; color:var(--gold-soft); }
.glass-pill.center { align-self:center; }

/* home */
.hero-cta { display:flex; align-items:center; gap:16px; padding:22px; cursor:pointer; text-align:left; }
.cta-icon { font-size:34px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.cta-text strong { font-size:18px; display:block; }
.cta-text span { font-size:12px; color:var(--txt-dim); }
.row-item { display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; text-align:left; width:100%; }
.row-icon { font-size:20px; }
.row-text { flex:1; } .row-text strong { display:block; font-size:14.5px; }
.row-text span { font-size:11.5px; color:var(--txt-dim); }
.chev { color:var(--gold); font-size:20px; }
.note-card { padding:16px 18px; font-size:12.5px; line-height:1.55; color:var(--txt-dim); }
.note-card strong { color:var(--gold-soft); }
.note-card.small { font-size:11.5px; }
.footer { position:absolute; bottom: calc(14px + env(safe-area-inset-bottom)); width:100%; text-align:center;
  font-size:12px; letter-spacing:.22em; color:var(--gold); opacity:.85; z-index:2; }

/* splash */
#screen-splash { align-items:center; justify-content:center; }
.splash-inner { text-align:center; animation: rise .9s ease both; }
@keyframes rise { from { opacity:0; transform: translateY(24px) scale(.96); } }
.orb, .spinner-orb { position:relative; width:110px; height:110px; margin:0 auto 22px; }
.orb-core { position:absolute; inset:14px; border-radius:50%; display:grid; place-items:center;
  font-size:44px; font-weight:800; color:#241404;
  background: radial-gradient(circle at 34% 28%, #ffe9bd, var(--gold) 45%, var(--amber) 80%, #3d2408);
  box-shadow: 0 10px 40px rgba(245,197,107,.4), inset 0 2px 6px rgba(255,255,255,.65), inset 0 -10px 22px rgba(80,45,5,.55); }
.orb-ring { position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent; border-top-color: var(--gold-soft); border-right-color: rgba(255,217,138,.4);
  animation: spin 2.6s linear infinite; }
.orb-ring.fast { animation-duration: 1s; }
@keyframes spin { to { transform: rotate(360deg); } }
.brand { font-size:30px; letter-spacing:.34em; font-weight:800; text-indent:.34em;
  background: linear-gradient(180deg, #fff6e2, var(--gold) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { margin-top:8px; font-size:12px; letter-spacing:.18em; color:var(--txt-dim); text-transform:uppercase; }

/* mode */
.picked { display:flex; gap:14px; padding:14px; align-items:center; }
.picked img { width:74px; height:74px; object-fit:cover; border-radius:14px; border:1px solid var(--glass-brd); }
.picked-meta { font-size:12px; color:var(--txt-dim); line-height:1.6; }
.picked-meta b { color:var(--txt); }
.mode-card { padding:18px; text-align:left; cursor:pointer; display:block; }
.mode-card strong { font-size:16px; display:block; margin-bottom:6px; color:var(--gold-soft); }
.mode-card span { font-size:12px; color:var(--txt-dim); line-height:1.55; }

/* processing */
#screen-processing { align-items:center; justify-content:center; }
.processing-inner { text-align:center; }
.proc-step { font-size:14px; letter-spacing:.06em; margin-bottom:14px; }
.proc-engine { display:inline-block; }

/* preview */
.preview-wrap { padding:10px; display:flex; justify-content:center; }
.preview-wrap img { max-width:100%; max-height:46vh; border-radius:14px; }
.btn-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* viewer */
#viewer-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.viewer-banner { position:absolute; left:14px; right:14px; bottom: calc(54px + env(safe-area-inset-bottom));
  z-index:3; padding:12px 16px; font-size:12px; line-height:1.5; border-radius:16px;
  background: rgba(10,10,18,.72); border:1px solid var(--glass-brd); backdrop-filter: blur(14px); display:none; }
.viewer-hint { position:absolute; bottom: calc(18px + env(safe-area-inset-bottom)); width:100%; text-align:center;
  font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.65); z-index:3; text-transform:uppercase; }

/* lab */
.variant { padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.variant h4 { font-size:14px; color:var(--gold-soft); }
.variant p { font-size:11.5px; color:var(--txt-dim); line-height:1.5; }
.variant .v-actions { display:flex; gap:10px; flex-wrap:wrap; }
.variant .glass-btn { padding:10px 12px; font-size:12px; flex:1; min-width:120px; }
.section-title { margin-top:8px; font-size:12px; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; }
.log-row { display:flex; justify-content:space-between; gap:10px; padding:12px 16px; font-size:12px; align-items:center; }
.log-row select { flex:1; max-width:180px; }

/* settings */
.setting { padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.setting label { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); }
.setting select { background: rgba(0,0,0,.35); color:var(--txt); border:1px solid var(--glass-brd);
  border-radius:12px; padding:11px 12px; font-size:14px; outline:none; }
.setting .hint { font-size:11px; color:var(--txt-dim); }
.about div { font-size:14px; }

/* recent */
.recent-row { display:flex; gap:12px; padding:12px; align-items:center; }
.recent-row img { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.recent-row .r-meta { flex:1; font-size:11.5px; color:var(--txt-dim); line-height:1.5; }
.recent-row .r-meta b { color:var(--txt); font-size:12.5px; }
.empty-note { text-align:center; color:var(--txt-dim); font-size:12.5px; padding:30px 10px; }

#toast { position:fixed; left:50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px);
  background: rgba(20,16,10,.92); border:1px solid var(--glass-brd); color:var(--txt);
  padding:11px 18px; border-radius:14px; font-size:12.5px; z-index:50; opacity:0; pointer-events:none;
  transition: all .3s ease; max-width:86vw; text-align:center; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (min-width: 720px) {
  .content { max-width: 560px; margin: 0 auto; width:100%; }
  .topbar { max-width: 560px; margin: 0 auto; width:100%; }
}
.appcard { margin-top: 14px; text-align: center; }

.appcard { margin-top: 14px; text-align: center; }
.appcard-btn { display: block; margin-top: 12px; text-decoration: none; text-align: center; }