:root {
  color-scheme: dark;
  --bg: #080d1c;
  --panel: #11182a;
  --panel-2: #171e32;
  --line: rgba(238,231,216,.13);
  --text: #f6f1e7;
  --muted: #8f96a7;
  --gold: #d3a85c;
  --gold-2: #f0c66c;
  --ink: #17130b;
  --green: #7ba58d;
  --red: #c98083;
  --blue: #7d8fc6;
  --plum: #241b35;
  --paper: #eee7d8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html, body { background: var(--bg); }
body { background: radial-gradient(circle at 50% 9%, rgba(125,143,198,.16), transparent 29%), linear-gradient(180deg,#0d1325 0,#080d1c 47%,#080b14 100%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.24; background-image:radial-gradient(rgba(238,231,216,.18) .55px,transparent .7px); background-size:13px 13px; mask-image:linear-gradient(to bottom,#000,transparent 74%); }
.paper-noise { opacity:.18; background-image:radial-gradient(rgba(211,168,92,.15) .55px,transparent .65px); background-size:21px 21px; }
.shell { width:min(100%,480px); padding:var(--safe-top) 16px calc(100px + var(--safe-bottom)); }

/* Brand chrome */
.topbar { position:relative; z-index:10; height:54px; grid-template-columns:42px 1fr 42px; margin-bottom:12px; }
.wordmark { display:flex; align-items:center; justify-content:center; gap:9px; font-size:15px; letter-spacing:1.25px; }
.brand-mark { position:relative; width:19px; height:19px; border:1px solid var(--gold); border-radius:50%; }
.brand-mark::before { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--gold); }
.brand-mark::after { content:""; position:absolute; width:25px; height:8px; left:-4px; top:4px; border:1px solid var(--blue); border-radius:50%; transform:rotate(-22deg); }
.icon-button { border-radius:50%; background:rgba(255,255,255,.025); color:var(--paper); }
.icon-button:active { transform:scale(.96); }
.kicker { color:var(--muted); font-size:8px; letter-spacing:1.55px; }

/* Loading and empty states */
.state-view { min-height:72vh; }
.state-view>strong { font:500 25px/1.1 Georgia,"Times New Roman",serif; }
.state-view>span { color:var(--muted); }
.state-glyph { border-color:rgba(211,168,92,.28); color:var(--gold); background:rgba(211,168,92,.06); border-radius:50%; }
.loading-orbit { position:relative; width:112px; height:112px; margin-bottom:20px; }
.loading-orbit::before,.loading-orbit::after { content:""; position:absolute; inset:-10px; border:1px dashed rgba(125,143,198,.32); border-radius:50%; animation:orbit-spin 7s linear infinite; }
.loading-orbit::after { inset:-24px; border-color:rgba(211,168,92,.2); animation-direction:reverse; animation-duration:11s; }
.loading-orbit img { width:100%; height:100%; object-fit:cover; border:1px solid rgba(211,168,92,.42); border-radius:50%; box-shadow:0 24px 60px rgba(0,0,0,.46); }
@keyframes orbit-spin { to { transform:rotate(1turn); } }
.empty-card { border-color:rgba(211,168,92,.2); border-radius:22px; background:rgba(211,168,92,.035); }

/* Projects / orbital overview */
.orbit-greeting { position:relative; z-index:2; margin:22px 0 0; text-align:center; }
.orbit-greeting h1 { margin:7px 0 5px; font:500 clamp(28px,8vw,35px)/1.08 Georgia,"Times New Roman",serif; letter-spacing:-.7px; }
.orbit-greeting p { max-width:300px; margin:0 auto; color:var(--muted); font-size:10px; line-height:1.5; }
.orbit-balance { position:relative; z-index:1; width:218px; height:218px; margin:26px auto 35px; display:grid; place-items:center; border:1px solid rgba(211,168,92,.34); border-radius:50%; background:radial-gradient(circle,rgba(211,168,92,.14),rgba(13,19,37,.84) 63%); box-shadow:inset 0 0 0 11px rgba(255,255,255,.017),0 28px 65px rgba(0,0,0,.28); text-align:center; }
.orbit-balance::before,.orbit-balance::after { content:""; position:absolute; border:1px dashed rgba(125,143,198,.23); border-radius:50%; }
.orbit-balance::before { inset:-16px; }
.orbit-balance::after { inset:23px; }
.orbit-balance img { position:absolute; z-index:3; width:52px; height:52px; top:-25px; right:20px; object-fit:cover; border:2px solid var(--gold); border-radius:50%; box-shadow:0 11px 28px rgba(0,0,0,.42); }
.orbit-balance div { position:relative; z-index:2; }
.orbit-balance span,.orbit-balance small { color:var(--gold); font-size:9px; font-weight:850; letter-spacing:1px; }
.orbit-balance small { display:inline-flex; align-items:center; justify-content:center; gap:5px; }
.ton-symbol { width:13px; height:13px; display:inline-block; flex:0 0 auto; overflow:visible; color:#48b8ff; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; }
.ton-symbol.large { width:29px; height:29px; margin-right:1px; vertical-align:middle; }
.balance { align-items:center; gap:8px; }
.balance strong { line-height:1; }
.balance small { align-self:flex-end; margin-bottom:4px; line-height:1; }
.orbit-balance strong { display:block; margin:4px 0 1px; font:500 45px/1 Georgia,"Times New Roman",serif; letter-spacing:-1px; }
.orbit-balance em { display:block; width:128px; margin:10px auto 0; color:var(--muted); font-size:8px; font-style:normal; line-height:1.35; }
.orbit-section-head { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:0 1px 12px; }
.orbit-section-head h2 { margin:4px 0 0; font:500 23px Georgia,"Times New Roman",serif; }
.square-add { display:grid; place-items:center; padding:0; border-color:rgba(211,168,92,.35); border-radius:50%; background:rgba(211,168,92,.08); color:var(--gold-2); line-height:1; text-indent:0; }
.project-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.project-card { position:relative; aspect-ratio:1 / 1; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; gap:0; min-width:0; min-height:0; padding:15px; border-color:var(--line); border-radius:24px; background-image:linear-gradient(to bottom,rgba(5,8,17,.08) 18%,rgba(5,8,17,.42) 50%,rgba(5,8,17,.96) 100%),var(--project-photo),radial-gradient(circle at 70% 10%,rgba(125,143,198,.34),transparent 34%),linear-gradient(145deg,#252b46,#11182a); background-position:center; background-size:cover; text-align:left; box-shadow:inset 0 -100px 90px -60px rgba(0,0,0,.7); }
.project-card:nth-child(even) { background-image:linear-gradient(to bottom,rgba(5,8,17,.08) 18%,rgba(5,8,17,.42) 50%,rgba(5,8,17,.96) 100%),var(--project-photo),radial-gradient(circle at 70% 10%,rgba(183,124,134,.3),transparent 34%),linear-gradient(145deg,#31233a,#11182a); }
.project-card::after { width:102px; height:102px; right:-40px; top:-40px; border-width:1px; border-color:rgba(211,168,92,.16); box-shadow:0 0 0 16px rgba(211,168,92,.018); pointer-events:none; }
.project-card:active { transform:scale(.985); }
.project-copy strong { font-size:12px; }
.project-copy small { margin-top:5px; color:#b1b6c2; font-size:8px; }
.project-balance { display:flex; align-items:center; justify-content:space-between; margin-top:13px; text-align:left; }
.project-balance strong { color:var(--gold-2); font-size:11px; }
.project-balance small { color:var(--green); font-size:7px; font-weight:800; }
.project-arrow { position:absolute; z-index:2; right:13px; top:13px; width:29px; height:29px; display:grid; place-items:center; border:1px solid rgba(238,231,216,.2); border-radius:50%; background:rgba(8,13,28,.5); color:var(--paper); font:400 22px/1 Georgia,serif; backdrop-filter:blur(8px); }
.outline-button { border-color:rgba(211,168,92,.28); border-radius:18px; color:var(--gold); }
.lumen-note { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:11px; margin-top:11px; padding:11px; border:1px solid var(--line); border-radius:18px; background:rgba(238,231,216,.04); }
.lumen-note img { width:44px; height:44px; object-fit:cover; border-radius:50%; }
.lumen-note strong { display:block; font-size:10px; }
.lumen-note small { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.lumen-note>span { color:var(--green); font-size:9px; }

/* Inner pages */
.page.active { animation:orbit-enter .25s ease both; }
@keyframes orbit-enter { from { opacity:0; transform:translateY(6px); } }
.hero-heading h1,.detail-heading h1,.mode-hero h1,.section-heading h2,.dialog-head h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.5px; }
.hero-heading { margin-top:25px; }
.hero-heading h1,.detail-heading h1,.mode-hero h1 { font-size:36px; }
.lead { font-size:11px; line-height:1.55; }
.detail-heading { position:relative; margin-top:18px; padding:0 68px 20px 2px; }
.detail-lumen,.section-lumen { width:54px; height:54px; object-fit:cover; border:1px solid rgba(211,168,92,.36); border-radius:50%; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.detail-lumen { position:absolute; top:0; right:0; }
.hero-heading .section-lumen { flex:0 0 auto; }
.status-chip { background:rgba(123,165,141,.09); color:#a8c7b2; }
.ton-balance-card { min-height:177px; border:1px solid rgba(211,168,92,.25); border-radius:28px; background:radial-gradient(circle at 85% 0,rgba(211,168,92,.16),transparent 28%),linear-gradient(145deg,#22253a,#151a2b); color:var(--text); }
.ton-balance-card::after { content:""; width:170px; height:170px; right:-72px; top:-83px; border:1px solid rgba(211,168,92,.16); border-radius:50%; box-shadow:0 0 0 27px rgba(125,143,198,.03); }
.ton-balance-card .kicker.ink { color:var(--muted); }
.ton-balance-card .balance>span,.ton-balance-card .balance strong { color:var(--gold-2); }
.ton-balance-card p { color:var(--muted); }
.ton-balance-card button { border:1px solid rgba(211,168,92,.3); background:rgba(211,168,92,.1); color:var(--gold-2); }
.integration-warning { border-color:rgba(201,128,131,.2); background:rgba(201,128,131,.07); color:#d6a2a6; }
.section-heading { margin-top:28px; }
.section-heading h2 { font-size:23px; }
.text-action { color:var(--gold-2); }
.mode-grid { gap:10px; }
.mode-card { position:relative; min-height:190px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; overflow:hidden; border-color:var(--line); border-radius:22px; background-image:linear-gradient(to bottom,rgba(8,13,28,.04) 26%,rgba(8,13,28,.88) 86%),var(--mode-cover),linear-gradient(145deg,#242a43,#11182a); background-size:cover; background-position:center; box-shadow:inset 0 -85px 65px -40px rgba(0,0,0,.76); }
.mode-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,transparent 54%,rgba(211,168,92,.06)); pointer-events:none; }
.mode-card>* { position:relative; z-index:2; }
.mode-card strong { font-family:Georgia,"Times New Roman",serif; font-size:16px; font-weight:500; }
.mode-card small { color:#b2b7c3; }
.mode-card.add { border-color:rgba(211,168,92,.2); background:rgba(211,168,92,.025); }
.mode-hero { margin-top:23px; }
.mode-hero>span { border:1px solid rgba(211,168,92,.25); border-radius:50%; background:radial-gradient(circle,rgba(211,168,92,.18),rgba(17,24,42,.8)); transform:none; }
.explain-card { border:1px solid rgba(125,143,198,.17); border-radius:18px; background:rgba(125,143,198,.07); color:#b6bfd9; }
.mode-delete-button { width:100%; height:48px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:24px; border:1px solid rgba(201,128,131,.22); border-radius:16px; background:rgba(201,128,131,.055); color:#cf9296; font-size:11px; font-weight:800; }
.mode-delete-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mode-delete-button:active { transform:scale(.985); background:rgba(201,128,131,.1); }
.public-project-hero { position:relative; min-height:218px; display:flex; flex-direction:column; justify-content:flex-end; margin-top:18px; padding:24px 96px 22px 20px; overflow:hidden; border:1px solid rgba(211,168,92,.2); border-radius:28px; background:radial-gradient(circle at 88% 8%,rgba(211,168,92,.16),transparent 33%),linear-gradient(145deg,#22263d,#11172a); }
.public-project-hero::after { content:""; position:absolute; width:170px; height:170px; right:-75px; top:-80px; border:1px solid rgba(211,168,92,.14); border-radius:50%; box-shadow:0 0 0 25px rgba(125,143,198,.025); }
.public-project-hero img { position:absolute; z-index:2; right:20px; top:20px; width:64px; height:64px; object-fit:cover; border:1px solid rgba(211,168,92,.36); border-radius:50%; box-shadow:0 12px 30px rgba(0,0,0,.32); }
.public-project-hero>*:not(img) { position:relative; z-index:2; }
.public-project-hero h1 { max-width:270px; margin:6px 0 10px; font:500 34px/1 Georgia,"Times New Roman",serif; letter-spacing:-.8px; overflow-wrap:anywhere; }
.public-project-hero p { max-width:330px; margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.public-games { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.public-game-chip { min-width:52px; height:43px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.03); }
.public-game-chip b { font-size:20px; }
.public-game-chip span { color:#bbc0cc; font-size:9px; font-weight:800; }
.public-prize-heading { margin-top:25px; }
.public-prizes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.public-outcome-card { position:relative; aspect-ratio:1 / 1; display:flex; align-items:flex-end; min-width:0; padding:14px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background-image:linear-gradient(to bottom,rgba(5,8,17,.02) 30%,rgba(5,8,17,.9) 100%),var(--public-outcome-image),linear-gradient(145deg,#242a43,#11182a); background-position:center; background-size:cover; box-shadow:inset 0 -78px 60px -35px rgba(0,0,0,.74); }
.public-outcome-card::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,transparent 60%,rgba(211,168,92,.07)); pointer-events:none; }
.public-outcome-card strong { position:relative; z-index:2; display:block; width:100%; color:var(--paper); font:500 15px/1.15 Georgia,"Times New Roman",serif; overflow-wrap:anywhere; text-shadow:0 2px 8px rgba(0,0,0,.75); }
.reward-card { border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(125,143,198,.035)); }
.outcome-tile { border:1px solid rgba(211,168,92,.17); background:rgba(211,168,92,.07); }
.outcome-tile.has-image { padding:0; overflow:hidden; background:#0b1120; }
.outcome-tile img { width:100%; height:100%; display:block; object-fit:cover; }

/* Payouts and statistics */
.project-filter select,.field input,.field select { border-color:var(--line); background:#101629; }
.summary-strip article,.metric-grid article { border-color:var(--line); background:rgba(255,255,255,.028); }
.summary-strip article:first-child { border-color:rgba(123,165,141,.2); background:rgba(123,165,141,.055); }
.timeline-item { border-color:var(--line); }
.timeline-icon { border:1px solid var(--line); background:rgba(255,255,255,.035); }
.timeline-icon.ok { background:rgba(123,165,141,.09); }
.timeline-icon.wait { background:rgba(211,168,92,.08); }
.metric-grid article:first-child { border-color:rgba(211,168,92,.22); background:radial-gradient(circle at 80% 20%,rgba(211,168,92,.12),transparent 40%),rgba(211,168,92,.04); }
.stat-card { border-color:var(--line); background:rgba(255,255,255,.027); }
.stat-card>span { border:1px solid var(--line); background:rgba(125,143,198,.07); }

/* Navigation and dialogs */
.bottom-nav { border-color:var(--line); background:rgba(11,16,31,.93); box-shadow:0 16px 42px rgba(0,0,0,.48); }
.bottom-nav button { color:#727b90; }
.bottom-nav button.active { background:rgba(238,231,216,.085); color:var(--paper); }
.bottom-nav button.active .nav-icon { color:var(--gold-2); }
.lucide-icon { width:21px; height:21px; display:block; margin:0 auto 4px; }
.lucide-icon svg { width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
dialog { border-radius:28px; }
dialog::backdrop { background:rgba(3,6,13,.78); backdrop-filter:blur(10px); }
.dialog-card { border-color:rgba(211,168,92,.17); background:radial-gradient(circle at 80% 0,rgba(125,143,198,.1),transparent 33%),#111728; }
.dialog-close { border-radius:50%; background:rgba(255,255,255,.025); }
.mode-choice,.reward-types button,.amount-pills button { border-color:var(--line); background:rgba(255,255,255,.025); }
.reward-types button.active { border-color:rgba(211,168,92,.48); background:rgba(211,168,92,.09); }
.outcome-preview { border:1px solid rgba(211,168,92,.16); background:rgba(211,168,92,.07); }
.outcome-preview.has-image { height:128px; display:grid; place-items:center; padding:8px; overflow:hidden; }
.outcome-preview.has-image img { width:110px; height:110px; display:block; border-radius:17px; object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.34); }
.gold-button { background:linear-gradient(135deg,var(--gold-2),var(--gold)); }
.secondary-button { border-color:var(--line); background:rgba(255,255,255,.025); }
.deposit-row { border-color:var(--line); background:#0d1324; }
.toast { border-color:rgba(211,168,92,.24); background:#1a2032; }
.toast.error { background:#482529; }

@media (max-width:350px) {
  .project-list { grid-template-columns:1fr; }
}
@media (min-width:520px) {
  .shell { padding-left:22px; padding-right:22px; }
  .project-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-card { display:flex; }
  .project-balance { grid-column:auto; text-align:left; }
}
@media (prefers-reduced-motion:reduce) { .loading-orbit::before,.loading-orbit::after { animation:none; } }