:root{--bg: #0a0812;--bg-soft: #120d1d;--card: rgba(24, 17, 38, .72);--line: rgba(179, 136, 255, .22);--line-soft: rgba(179, 136, 255, .1);--accent: #b388ff;--accent-deep: #7c5cff;--text: #ece8f8;--muted: #8e86a8;--gold: #ffd166;--danger: #ff6b8a;--ok: #5ddba0;--nav-h: 66px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100%}body{margin:0;background:radial-gradient(1100px 620px at 50% -12%,rgba(124,92,255,.22),transparent 62%),radial-gradient(760px 520px at 105% 12%,rgba(179,136,255,.1),transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;line-height:1.45}h1,h2,h3,.serif{font-family:Cormorant Garamond,Georgia,serif;font-weight:700;letter-spacing:.4px;margin:0}.app{max-width:620px;margin:0 auto;padding:16px 16px calc(var(--nav-h) + 28px)}.card{position:relative;background:linear-gradient(160deg,rgba(40,28,66,.6),var(--card));border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 0 22px #7c5cff17,inset 0 1px #ffffff0a}.card.tight{padding:12px 14px}.card.flat{background:#120d1d99;box-shadow:none}.section-title{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--accent);margin:22px 0 10px;opacity:.85}.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11.5px}.row{display:flex;align-items:center;gap:12px}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:4px}.grow{flex:1;min-width:0}.center{text-align:center}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button{font:inherit;color:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--line);background:#7c5cff1f;padding:10px 14px;transition:transform .08s ease,background .15s ease,opacity .15s ease}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button.primary{background:linear-gradient(135deg,var(--accent-deep),var(--accent));border-color:transparent;color:#120a22;font-weight:700;box-shadow:0 6px 20px #7c5cff59}button.ghost{background:transparent}button.danger{color:var(--danger);border-color:#ff6b8a59;background:#ff6b8a14}button.wide{width:100%}button.mini{padding:6px 10px;font-size:12.5px;border-radius:9px}input{font:inherit;color:var(--text);background:#0a0812b3;border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;outline:none}input:focus{border-color:var(--accent)}.avatar{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 18px #b388ff73;object-fit:cover;background:var(--bg-soft);display:grid;place-items:center;font-size:24px}.level-badge{font-family:Cormorant Garamond,serif;font-size:13px;letter-spacing:1px;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:2px 10px}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat-tile{border:1px solid var(--line-soft);border-radius:12px;padding:10px 12px;background:#0a081273}.stat-tile b{font-size:19px;font-weight:700}.bar{height:6px;border-radius:999px;background:#ffffff14;overflow:hidden}.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-deep),var(--accent))}.bar.hp>i{background:linear-gradient(90deg,#ff6b8a,#ffd166)}.bar.lg{height:10px}.option{border:1px solid var(--line-soft);border-radius:13px;padding:11px 13px;background:#0a081266;cursor:pointer;transition:border-color .15s ease,background .15s ease}.option+.option{margin-top:8px}.option.selected{border-color:var(--accent);background:#7c5cff29;box-shadow:0 0 16px #7c5cff2e}.option.done{opacity:.55}.pill{display:inline-block;font-size:11.5px;letter-spacing:.4px;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--accent)}.pill.gold{color:var(--gold);border-color:#ffd16659}.pill.ok{color:var(--ok);border-color:#5ddba059}.pill.dim{color:var(--muted);border-color:var(--line-soft)}.timer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#06040cf0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:18px;text-align:center}.timer-dial{position:relative;width:232px;height:232px}.timer-dial svg{transform:rotate(-90deg)}.timer-value{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:Cormorant Garamond,serif;font-size:52px;font-weight:700}.timer-phase{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--accent)}.entry{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft)}.entry:last-child{border-bottom:none}.entry .place{width:22px;text-align:center;color:var(--muted);font-family:Cormorant Garamond,serif;font-size:18px}.entry .ava{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--bg-soft);display:grid;place-items:center;border:1px solid var(--line)}.entry.me{background:#7c5cff17;border-radius:10px;padding-inline:8px}.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:stretch;background:#0a0812ed;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}.nav button{flex:1;border:none;background:none;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px;padding:0}.nav button.active{color:var(--accent);text-shadow:0 0 14px rgba(179,136,255,.55)}.nav .ico{font-size:19px;line-height:1}.toast{position:fixed;left:16px;right:16px;bottom:calc(var(--nav-h) + 16px);z-index:50;background:#1e1432f7;border:1px solid var(--line);border-radius:13px;padding:12px 14px;text-align:center;box-shadow:0 10px 30px #00000080;animation:rise .18s ease}.toast.error{border-color:#ff6b8a73}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:#06040cb3;display:flex;align-items:flex-end;justify-content:center}.sheet{width:100%;max-width:620px;background:var(--bg-soft);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));max-height:82vh;overflow-y:auto;animation:rise .2s ease}.spinner{width:26px;height:26px;margin:60px auto;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
