@property --sig { syntax: '<color>'; inherits: true; initial-value: rgb(235 235 235); }
:root {
  color-scheme: dark;
  --ground: #09090a;
  --ink: #f2f2f2;
  --ink-2: rgb(242 242 242 / .64);
  --ink-3: rgb(242 242 242 / .44);
  --card: #151517;
  --cell: #1a1a1c;
  --raised: #222225;
  --raised-2: #2a2a2e;
  --line: #232326;
  --input: #0e0e10;
  --solid: #f2f2f2;
  --on-solid: #0b0b0c;
  --green: #30a46c; --yellow: #ffc53d; --orange: #f76b15; --red: #e5484d; --gray: #8b8d98;
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px));
  --font: 'Inter', -apple-system, system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); font-family: var(--font); letter-spacing: 0; -webkit-font-smoothing: antialiased; }
body { overscroll-behavior: none; }
button, input { font: inherit; color: inherit; letter-spacing: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
p { margin: 0; }
svg.i { width: 20px; height: 20px; fill: currentColor; flex: none; }
svg.i.s { width: 18px; height: 18px; }

.app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; transition: --sig .9s ease; }
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.beam { position: absolute; width: 900px; transform: rotate(38deg); background: linear-gradient(90deg, transparent, rgb(255 255 255 / var(--a)), transparent); }
.light { position: absolute; width: 460px; height: 460px; left: 80%; top: 30%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--sig) calc(var(--li, 1) * 20%), transparent) 0%, color-mix(in srgb, var(--sig) calc(var(--li, 1) * 6%), transparent) 38%, transparent 64%);
  transition: left .9s cubic-bezier(.2,.7,.2,1), top .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.flutes { position: absolute; inset: 0; display: flex; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.rib { flex: 0 0 40px; height: 100%; mix-blend-mode: hard-light; backdrop-filter: blur(58px); -webkit-backdrop-filter: blur(58px);
  background:
    linear-gradient(180deg, transparent calc(var(--vy, 30%) - var(--band, 8%)), color-mix(in srgb, var(--sig) calc(var(--li, 1) * 30%), rgb(255 255 255 / calc(var(--pk, .03) * var(--li, 1)))) var(--vy, 30%), transparent calc(var(--vy, 30%) + var(--band, 8%))),
    linear-gradient(268.7deg, rgb(255 255 255 / .03) 15.4%, rgb(112 108 108 / .03) 25.1%, rgb(255 255 255 / .03) 63.7%, rgb(0 0 0 / .6) 86.2%); }
.rib:last-child { flex: 1 1 auto; }
.grain { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background: url(/grain.png) 0 0 / 171px 171px; image-rendering: pixelated; }

.topfade { position: absolute; z-index: 15; left: 0; right: 0; top: 0; height: calc(max(var(--safe-top), 44px) + 18px); background: linear-gradient(180deg, var(--ground) 0%, rgb(9 9 10 / .92) 70%, transparent 100%); pointer-events: none; }
.topbar { position: absolute; z-index: 20; left: 0; right: 0; top: var(--tg-safe-area-inset-top, 0px); height: max(var(--tg-content-safe-area-inset-top, 0px), 44px); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 500; pointer-events: none; }
.mark { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: #0d0d0d; background: linear-gradient(180deg, #f7f7f7 0%, #9e9ea1 42%, #e6e6e8 58%, #616163 100%); }

.view { position: absolute; inset: 0; z-index: 10; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(max(var(--safe-top), 44px) + 12px) 20px calc(max(var(--safe-bottom), 20px) + 28px); display: flex; flex-direction: column; gap: 16px; scrollbar-width: none; touch-action: pan-y; }
.view::-webkit-scrollbar { display: none; }
.micro { font-size: 10px; line-height: 1.4; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-2); } .dim { color: var(--ink-3); }
.index { display: flex; align-items: center; gap: 12px; }
.index b { font-size: 64px; line-height: 1; font-weight: 200; color: rgb(255 255 255 / .16); }
h1.hero { font-size: 30px; line-height: 1.08; font-weight: 300; margin: 0; text-wrap: balance; }
.lead { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.card { background: var(--card); border-radius: 20px; padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.input-row { display: flex; gap: 8px; }
.field { flex: 1; min-width: 0; display: flex; align-items: center; background: var(--input); padding: 0 14px; height: 52px; border-radius: 12px; }
.field input { width: 100%; background: none; border: 0; color: var(--ink); font-size: 14px; outline: none; text-overflow: ellipsis; }
.field input::placeholder { color: rgb(255 255 255 / .32); }
.sq { width: 52px; height: 52px; display: grid; place-items: center; background: var(--raised); border-radius: 12px; flex: none; }
.sq:active, .btn:active, .act:active, .pack:active, .row-btn:active { opacity: .7; }
.btn { height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 500; background: var(--solid); color: var(--on-solid); width: 100%; }
.btn:disabled { background: var(--raised); color: var(--ink-3); }
.btn.ghost { background: var(--raised); color: var(--ink); }
.btn.sm { height: 44px; width: auto; padding: 0 16px 0 20px; border-radius: 22px; }
.hint { display: flex; gap: 10px; align-items: stretch; font-size: 12.5px; line-height: 1.45; padding: 10px 12px; background: var(--raised); border-radius: 14px; }
.hint .bar { width: 3px; border-radius: 1.5px; flex: none; }
.ok .bar { background: var(--green); } .warn .bar { background: var(--yellow); } .err .bar { background: var(--red); }
.steps .row { display: flex; gap: 16px; align-items: center; padding: 10px 0; }
.steps .row + .row { border-top: 1px solid var(--line); }
.steps .num { font-size: 11px; color: var(--ink-3); width: 16px; }
.steps .t { font-size: 15px; } .steps .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.quota { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.segs { flex: 1; display: flex; gap: 4px; }
.segs i { flex: 1; height: 3px; border-radius: 1.5px; background: #2b2b2e; }
.segs i.on { background: #b8b8ba; }
.quota .q { font-size: 11px; color: var(--ink-3); text-align: right; line-height: 1.35; max-width: 55%; }
.quota .sq { width: 36px; height: 36px; border-radius: 10px; }

.load { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.load .row { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink-3); }
.load .row.done, .load .row.now { color: var(--ink); }
.load .tick { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.load .lbl { flex: 1; min-width: 0; }
.load .prog { flex: 0 0 72px; height: 2px; border-radius: 1px; background: #2a2a2d; position: relative; overflow: hidden; }
.load .row.now .prog::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--ink); animation: slide 1s linear infinite; }
.load .row.done .prog { background: #9a9a9c; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.addr { font-size: 13px; line-height: 1.5; word-break: break-all; }
.verdict h2 { font-size: 38px; line-height: 1; font-weight: 300; margin: 0; text-wrap: balance; }
.meter { display: flex; gap: 4px; }
.meter i { flex: 1; height: 4px; border-radius: 2px; background: #2b2b2e; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; line-height: 1; padding: 5px 9px; background: var(--raised); color: var(--ink-2); border-radius: 11px; }
.advice ul { margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.advice li { list-style: none; display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.advice li::before { content: ''; width: 12px; height: 1px; background: var(--ink-3); margin-top: 10px; flex: none; }
.note { font-size: 11.5px; line-height: 1.45; color: var(--ink-2); padding: 10px 12px; background: var(--cell); border-radius: 14px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { background: var(--card); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.metric .v { font-size: 24px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric .u { font-size: 10px; color: var(--ink-3); }
.list-head { display: flex; justify-content: space-between; padding-bottom: 6px; }
.row-btn { display: flex; gap: 12px; align-items: stretch; padding: 14px 0; width: 100%; text-align: left; }
.row-btn + .row-btn { border-top: 1px solid var(--line); }
.row-btn .sb { width: 3px; border-radius: 1.5px; flex: none; }
.row-btn .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.row-btn .mid .a { font-size: 13px; }
.row-btn .end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; justify-content: center; font-size: 13px; text-align: right; }
.row-btn .end .d { font-size: 10px; color: var(--ink-3); }
.row-btn > svg { align-self: center; color: var(--ink-3); }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; background: var(--card); border-radius: 14px; font-size: 12px; color: var(--ink-2); }
.fresh { font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.disc { font-size: 11px; line-height: 1.5; color: rgb(255 255 255 / .36); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 9px 16px; font-size: 13px; background: var(--card); color: var(--ink-2); border-radius: 18px; }
.chip.on { background: var(--solid); color: var(--on-solid); }
.list { background: var(--card); border-radius: 20px; padding: 0 12px 0 16px; }
.empty { padding: 40px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.err-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; background: var(--card); border-radius: 20px; }
.onb .pt { display: flex; gap: 14px; }
.onb .pt b { font-size: 11px; line-height: 1.8; font-weight: 400; color: var(--ink-3); flex: none; }
.center-msg { margin: auto 0; display: flex; flex-direction: column; gap: 14px; }

.scrim { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .55); display: flex; align-items: flex-end; animation: fade .2s ease; }
.sheet { width: 100%; max-height: 88%; overflow-y: auto; background: #161618; border-radius: 24px 24px 0 0; padding: 20px 20px calc(var(--safe-bottom) + 32px); display: flex; flex-direction: column; gap: 14px; animation: up .25s cubic-bezier(.2,.7,.2,1); scrollbar-width: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet h3 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 400; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 13px; line-height: 1.4; margin: 0; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pack { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--raised); border-radius: 14px; width: 100%; text-align: left; }
.pack .mid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.stars { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; padding: 9px 12px; background: var(--solid); color: var(--on-solid); border-radius: 18px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; width: 100%; text-align: left; font-size: 15px; }
.menu-item + .menu-item { border-top: 1px solid var(--line); }
.menu-item span { flex: 1; }
.toast { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 20px); padding: 14px 16px; background: #f2f2f2; color: #0b0b0c; font-size: 13.5px; line-height: 1.35; font-weight: 500; display: flex; gap: 10px; align-items: center; border-radius: 16px; animation: up .25s ease; }
@keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.btn, .sq, .act, .pack, .row-btn, .chip, .menu-item, .card, .metric { transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease, background-color .2s ease; }
.btn:active, .sq:active, .act:active, .pack:active, .chip:active, .menu-item:active { transform: scale(.96); opacity: 1; }
.row-btn:active { transform: scale(.985); opacity: 1; }
.btn:disabled:active { transform: none; }
.view.anim > * { animation: rise .46s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.view.fwd { --dx: 22px; } .view.back { --dx: -22px; } .view.fade { --dx: 0px; }
@keyframes rise { from { opacity: 0; transform: translate3d(var(--dx, 0px), 14px, 0); } to { opacity: 1; transform: none; } }
.hint { animation: pop .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.meter i.on { transform-origin: left center; animation: grow .7s .25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.row-btn { animation: rise .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--j, 0) * 40ms + 120ms); }
.sheet > * { animation: rise .38s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms + 60ms); }
.scrim.closing { animation: fadeout .22s ease forwards; }
.scrim.closing .sheet { animation: down .22s cubic-bezier(.4,0,1,1) forwards; }
@keyframes fadeout { to { opacity: 0; } }
@keyframes down { to { transform: translateY(100%); } }
.toast.out { animation: fadeout .2s ease forwards; }
.load .tick svg { animation: pop .3s ease both; }
.tabbar { position: absolute; z-index: 25; left: 16px; right: 16px; bottom: calc(max(var(--safe-bottom), 12px) + 6px); height: 64px; padding: 5px; display: flex; gap: 4px; background: #1b1b1d; border-radius: 32px; box-shadow: 0 8px 24px rgb(0 0 0 / .45); animation: rise .35s cubic-bezier(.2,.8,.2,1) both; }
.tabbar[hidden] { display: none; }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 27px; color: rgb(255 255 255 / .5); font-size: 10.5px; transition: background-color .25s ease, color .25s ease, transform .18s ease; }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.on { background: #333336; color: #fff; font-weight: 500; }
.tabbar button:active { transform: scale(.94); }
.app.tabs .view { padding-bottom: calc(max(var(--safe-bottom), 12px) + 100px); }
.quota-line { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; font-size: 12.5px; color: var(--ink-3); padding: 2px 0; }
.quota-line svg { width: 16px; height: 16px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--card); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.stat b { font-size: 28px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
.chip .n { margin-left: 6px; opacity: .5; }
.big { display: flex; align-items: baseline; gap: 8px; }
.big b { font-size: 44px; line-height: 1; font-weight: 300; font-variant-numeric: tabular-nums; }
.big span { font-size: 15px; color: var(--ink-2); }
.segs.lg i { height: 4px; border-radius: 2px; }
.section-title { font-size: 10px; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.plist { background: var(--card); border-radius: 20px; padding: 0 16px; }
.plist .row { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.plist .row + .row { border-top: 1px solid var(--line); }
.plist .mid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.plist .mid span { font-size: 11px; color: var(--ink-3); }
.plist .end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.plist .end .s { display: inline-flex; align-items: center; gap: 4px; }
.plist .empty { padding: 22px 0; }
.menu-card { background: var(--card); border-radius: 20px; padding: 0 16px; }
.menu-card .menu-item { color: var(--ink); }
.menu-card .menu-item > svg:first-child { color: var(--ink-2); }
.menu-card .menu-item > svg:last-child { color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .tabbar { animation: none; } }
@media (prefers-reduced-motion: reduce) { .view.anim > *, .row-btn, .sheet > *, .meter i.on, .hint { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .light, .app { transition: none; } .load .row.now .prog::after { animation: none; } .sheet, .toast, .scrim { animation: none; } }