:root{
  --bg:#070c0a; --surface:#0f1713; --surface-2:#15211b; --ink:#e7efe9; --ink-2:#8ea398;
  --line:#22312a; --brand:#1fc98d; --brand-ink:#04120c; --blood:#ff4d5e; --sun:#ffcf5c;
  --header:#101b16; --header-ink:#e7efe9; --header-sub:#7f958a;
  --chat-bg:#080d0b; --bub-in:#16231d; --bub-out:#0c3a2c; --bub-ink:#e9f1ec;
  --meta:#71867c; --meta-out:#8fb3a4; --send:#1fc98d; --ghost:#566a60; --bad:#ff4d5e;
  --sys:#141f1a; --sys-ink:#b7c8bf; --day:#111b16; --tick:#4fd6c0;
  --scene:radial-gradient(circle at 50% 20%,#1a2c26,#050807 72%);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --f-display:"Rubik Glitch","Arial Black",Impact,sans-serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-chat:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cs:1;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ece5d8; --surface:#f8f3e9; --surface-2:#efe7d8; --ink:#201713; --ink-2:#6f6157;
  --line:#dbcdba; --brand:#0b7a58; --brand-ink:#ffffff; --blood:#c9273a; --sun:#c98a00;
  --header:#241a17; --header-ink:#f4ece2; --header-sub:#b9a99c;
  --chat-bg:#e6ddce; --bub-in:#fbf7ef; --bub-out:#cdeedd; --bub-ink:#1c1815;
  --meta:#7d7268; --meta-out:#4d6b5f; --send:#0b7a58; --ghost:#a99d8f; --bad:#c9273a;
  --sys:#f3ecd9; --sys-ink:#5d5148; --day:#f7f1e4; --tick:#0b7a58;
  --scene:radial-gradient(circle at 50% 20%,#3a2a24,#0c0806 74%);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--brand)}
button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon.solid{fill:currentColor;stroke:none}
#app{
  position:relative;height:var(--app-h,100vh);max-width:460px;margin:0 auto;overflow:hidden;background:var(--bg);
  isolation:isolate;transform:translateY(var(--app-top,0px));
}
@supports (height:100dvh){#app{height:var(--app-h,100dvh)}}
@media (min-width:760px){
  body{display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#122019,#040706 70%)}
  #app{height:min(900px,calc(100dvh - 48px));width:414px;border-radius:38px;box-shadow:0 0 0 10px #0c1410,0 0 0 12px #1d2b24,var(--shadow)}
}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(26px);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s;
  background:var(--bg);
}
.screen.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.screen:not(.on) *{pointer-events:none!important}
.pad{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.spacer{flex:1}
.fine{font-size:.78rem;color:var(--ink-2);line-height:1.5}
.fine.center{text-align:center;margin-top:14px}
.center{text-align:center}

.logo{font-family:var(--f-display);line-height:.92;letter-spacing:.01em;text-align:center;color:var(--ink);user-select:none}
.logo .l1{display:block;font-size:2.1rem;color:var(--ink)}
.logo .l2{display:inline-block;font-size:3.1rem;position:relative;color:var(--blood)}
.logo .l2::after{
  content:"";position:absolute;left:3%;right:3%;bottom:-.2em;height:.28em;
  background:radial-gradient(circle at 50% 100%,transparent 38%,var(--blood) 40%,var(--blood) 58%,transparent 60%) 0 0/.32em .28em repeat-x;
  animation:squig 1.7s linear 4;
}
@keyframes squig{to{background-position:.32em 0}}
.logo.sm .l1{font-size:1rem}
.logo.sm .l2{font-size:1.5rem}
.logo.mini{text-align:left}
.tag{color:var(--ink-2);font-weight:600;font-size:.95rem;text-align:center}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:54px;
  border-radius:16px;font-weight:800;font-size:1.02rem;letter-spacing:.01em;
  background:var(--brand);color:var(--brand-ink);
  box-shadow:0 5px 0 color-mix(in srgb,var(--brand) 52%,#000);
  transition:transform .12s,box-shadow .12s,opacity .2s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--brand) 52%,#000)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.btn.ghost:active{box-shadow:0 1px 0 var(--line)}
.btn.red{background:var(--blood);color:#fff;box-shadow:0 5px 0 color-mix(in srgb,var(--blood) 50%,#000)}
.btn.big{min-height:62px;font-family:var(--f-display);font-weight:400;font-size:1.35rem;letter-spacing:.05em}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.link{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;font-size:.88rem}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:var(--ink)}
.icon-btn.dark{background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(8px)}
.backline{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:700;font-size:.85rem;min-height:44px;align-self:flex-start;margin-left:-10px;padding:0 10px}
.backline .icon{width:20px;height:20px}

.avatar{
  display:grid;place-items:center;border-radius:50%;flex:none;
  background:radial-gradient(circle at 30% 25%,#2b4137,#101a16 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  user-select:none;line-height:1;
}
:root[data-theme="light"] .avatar{background:radial-gradient(circle at 30% 25%,#fff8ea,#d8cbb8 75%)}
.avatar.av-md{width:42px;height:42px;font-size:1.4rem}
.avatar.av-lg{width:50px;height:50px;font-size:1.65rem}
.avatar.av-xl{width:78px;height:78px;font-size:2.5rem}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avatar-pick{
  position:relative;aspect-ratio:1;border-radius:18px;display:grid;place-items:center;font-size:1.7rem;
  background:var(--surface);border:2px solid var(--line);transition:.18s;
}
.avatar-pick[aria-pressed="true"]{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--surface));transform:translateY(-2px)}
.avatar-pick[aria-pressed="true"]::after{
  content:"";position:absolute;right:6px;bottom:6px;width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--surface)
}

#flash{position:absolute;inset:0;z-index:90;background:#fff;opacity:0;pointer-events:none}
#flash.on{animation:flashk .5s}
#flash.red{background:var(--blood)}
#flash.on.red{animation:flashr .45s}
@keyframes flashk{10%{opacity:.7}100%{opacity:0}}
@keyframes flashr{12%{opacity:.55}100%{opacity:0}}

#toast{
  position:absolute;left:50%;bottom:104px;z-index:95;transform:translate(-50%,16px);opacity:0;
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:14px;font-weight:700;font-size:.85rem;
  transition:.28s;pointer-events:none;max-width:84%;text-align:center;line-height:1.4;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

#sheet{position:absolute;inset:0;z-index:80;background:rgba(3,8,6,.65);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .24s;backdrop-filter:blur(2px)}
#sheet.on{opacity:1;pointer-events:auto}
.sheet-card{
  width:100%;background:var(--surface);border-radius:26px 26px 0 0;padding:20px max(18px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;gap:12px;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.9,.2,1);max-height:88%;overflow-y:auto;
}
#sheet.on .sheet-card{transform:none}
.sheet-card h3{font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1.1}
.sheet-card p{color:var(--ink-2);line-height:1.6;font-size:.9rem}
.sheet-card .row{display:flex;gap:10px}
.sheet-card .row .btn{flex:1;min-height:50px;font-size:.92rem}
.sheet-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);font-size:1.6rem}
.chip{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-weight:800;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);
}
.chip.solid{background:var(--brand);color:var(--brand-ink)}
.chip.red{background:color-mix(in srgb,var(--blood) 18%,transparent);color:var(--blood);border:1px solid color-mix(in srgb,var(--blood) 45%,transparent)}
.chip.gold{background:color-mix(in srgb,var(--sun) 20%,transparent);color:var(--sun)}

@media (display-mode:standalone){
  .screen{padding-top:env(safe-area-inset-top,0px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}