/* Tycoon Hub web app: same colours and shapes as the Android app */
:root{
  --bg:#141311; --surface:#1D1B18; --surface2:#26231F; --line:#312E29;
  --text:#F6F0E3; --muted:#A39D92; --teal:#14958F; --teal-dark:#0F7A75; --teal-text:#4DC9C0; --teal-bg:#16302E;
  --gold:#F5B942; --gold-bg:#33291A; --gold-line:#6B5420; --purple:#A78BFA; --purple-bg:#2A2140;
  --blue:#6CA8F0; --blue-bg:#1B2A3A; --pink:#F28DB5; --pink-bg:#3A1F2C; --red:#E5706B; --red-bg:#3A1F1D;
  --nav:#161a19; --mine:#14958F; --theirs:#26231F;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{
  --bg:#FBF8F2; --surface:#FFFFFF; --surface2:#F3EEE4; --line:#E5DDCD; --text:#23201B; --muted:#6B6458;
  --teal:#0E8580; --teal-dark:#0B6F6B; --teal-text:#0E7D77; --teal-bg:#DDF2EF; --gold:#9A6A0E; --gold-bg:#FCEBC4; --gold-line:#E5C27A;
  --purple:#6D4BD8; --purple-bg:#ECE6FF; --blue:#2F6FBF; --blue-bg:#E2EDFB; --pink:#B83C72; --pink-bg:#FBE3EE; --red:#C0443E; --red-bg:#FBE4E2;
  --nav:#FFFFFF; --mine:#0E8580; --theirs:#F3EEE4;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#FBF8F2; --surface:#FFFFFF; --surface2:#F3EEE4; --line:#E5DDCD; --text:#23201B; --muted:#6B6458;
    --teal:#0E8580; --teal-dark:#0B6F6B; --teal-text:#0E7D77; --teal-bg:#DDF2EF; --gold:#9A6A0E; --gold-bg:#FCEBC4; --gold-line:#E5C27A;
    --purple:#6D4BD8; --purple-bg:#ECE6FF; --blue:#2F6FBF; --blue-bg:#E2EDFB; --pink:#B83C72; --pink-bg:#FBE3EE; --red:#C0443E; --red-bg:#FBE4E2;
    --nav:#FFFFFF; --mine:#0E8580; --theirs:#F3EEE4;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45;overscroll-behavior-y:none}
button{font:inherit;color:inherit}
a{color:var(--teal-text)}
:focus-visible{outline:2px solid var(--teal-text);outline-offset:2px;border-radius:8px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.ic-svg{display:inline-flex;line-height:0}

/* Shell */
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-top:var(--safe-top)}
.topbar{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;justify-content:center;background:var(--bg);border-bottom:1px solid var(--line);padding:0 8px}
.topbar h1{font-size:18px;margin:0;font-weight:700;max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.topbar .tb-left,.topbar .tb-right{position:absolute;top:4px;display:flex;gap:2px}
.topbar .tb-left{left:4px}.topbar .tb-right{right:4px}
.icon-btn{width:48px;height:48px;border:0;background:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--text);position:relative}
.icon-btn:hover{background:var(--surface)}
.dot{position:absolute;top:10px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--red)}
#view{flex:1;padding:16px 20px calc(96px + var(--safe-bottom))}
#view.flush{padding:0}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--nav);border-top:1px solid var(--line);padding-bottom:var(--safe-bottom)}
.bottom-nav .inner{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.nav-item{border:0;background:none;cursor:pointer;padding:10px 0 12px;color:var(--muted);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.nav-item .pill{width:60px;height:30px;border-radius:15px;display:grid;place-items:center}
.nav-item.on{color:var(--text);font-weight:700}
.nav-item.on .pill{background:var(--teal-bg);color:var(--teal-text)}
.nav-item .dot{top:8px;right:calc(50% - 26px)}

/* Building blocks */
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px}
.pad{padding:16px}
.label{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:22px 4px 8px}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border:0;background:none;width:100%;text-align:left;cursor:pointer;color:var(--text)}
.row:hover{background:var(--surface2)}
.row + .row{border-top:1px solid var(--line)}
.row .grow{flex:1;min-width:0}
.row b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row small{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile{border-radius:12px;display:grid;place-items:center;flex:none}
.t-teal{background:var(--teal-bg);color:var(--teal-text)}.t-gold{background:var(--gold-bg);color:var(--gold)}
.t-purple{background:var(--purple-bg);color:var(--purple)}.t-blue{background:var(--blue-bg);color:var(--blue)}
.t-pink{background:var(--pink-bg);color:var(--pink)}.t-red{background:var(--red-bg);color:var(--red)}.t-grey{background:var(--surface2);color:var(--text)}
.avatar{border-radius:50%;background:#2B4A6B center/cover no-repeat;color:#fff;font-weight:700;display:grid;place-items:center;flex:none;border:2px solid var(--line)}
.avatar.plus{border:2.5px solid var(--gold)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.btn{white-space:nowrap;height:50px;border-radius:14px;border:0;padding:0 18px;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:disabled{opacity:.55;cursor:default}
.btn-teal{background:var(--teal);color:#fff}.btn-teal:hover{background:var(--teal-dark)}
.btn-gold{background:var(--gold);color:#1b1407}
.btn-danger{background:var(--red);color:#fff}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-sm{height:38px;border-radius:12px;font-size:13px;padding:0 12px}
.btn-block{width:100%}
.seg{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px}
.seg button{flex:1;height:44px;border:0;border-radius:12px;background:none;cursor:pointer;font-weight:500;color:var(--text)}
.seg button.on{background:var(--teal);color:#fff;font-weight:700}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:none;cursor:pointer;white-space:nowrap;color:var(--text)}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}
.field{width:100%;min-height:52px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);color:var(--text);padding:13px 16px;font:inherit;font-size:16px;margin-top:10px}
textarea.field{min-height:96px;resize:vertical}
.field:focus{border-color:var(--teal);outline:none}
.field-label{display:block;color:var(--muted);font-size:13px;margin:14px 4px -4px}
.form-error{color:var(--red);font-size:14px;margin-top:8px;min-height:1px}
.empty{text-align:center;color:var(--muted);padding:40px 16px}
.spinner{width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;animation:spin 0.8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{height:8px;border-radius:99px;background:var(--surface2);overflow:hidden}
.progress i{display:block;height:100%;background:var(--teal);border-radius:99px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{text-align:center;padding:14px 0}
.stat b{display:block;font-size:20px}
.stat small{color:var(--muted);font-size:12px}

/* Banners */
#toasts{position:fixed;left:0;right:0;top:calc(10px + var(--safe-top));z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{max-width:min(92vw,480px);display:flex;gap:10px;align-items:center;background:var(--surface);color:var(--text);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;padding:12px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(-12px);transition:.25s}
.toast .ic-svg{color:var(--teal-text)}
.toast.bad{border-left-color:var(--red)}.toast.bad .ic-svg{color:var(--red)}
.toast.in{opacity:1;transform:none}

/* Bottom sheets */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;opacity:0;transition:.25s}
.scrim.in{opacity:1}
.sheet{position:fixed;left:50%;bottom:0;z-index:61;width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--surface);border-radius:28px 28px 0 0;padding:10px 20px calc(20px + var(--safe-bottom));transform:translate(-50%,100%);transition:.25s ease}
.sheet.in{transform:translate(-50%,0)}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 16px}
.sheet .tile{margin-bottom:12px}
.sheet-person{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:6px}
.sheet-title{margin:0 0 6px;font-size:20px}
.sheet-msg{margin:0 0 6px;color:var(--muted);white-space:pre-line}
.sheet-rows{margin:10px -8px 0}
.sheet-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:10px 8px;border-radius:14px;cursor:pointer;text-align:left;color:var(--text)}
.sheet-row:hover{background:var(--surface2)}
.sheet-row .tile{margin:0}
.sheet-row.danger b{color:var(--red)}
.sr-text{flex:1;min-width:0}.sr-text b{display:block;font-weight:500}.sr-text small{display:block;color:var(--muted);font-size:13px}
.sheet-buttons{display:grid;gap:8px;margin-top:14px}

/* Home */
.hello small{color:var(--muted);font-size:14px}
.hello h2{margin:0;font-size:26px}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.tool{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:14px;text-align:left;cursor:pointer;color:var(--text)}
.tool b{display:block;margin-top:10px;font-size:15px}
.tool small{color:var(--muted);font-size:12px}
.sponsor-empty{border:1.5px dashed var(--gold-line);background:var(--gold-bg);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;cursor:pointer}
.sponsor-img{width:100%;max-height:180px;object-fit:cover;border-radius:14px;display:block}

/* Album */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.set-card{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:14px;cursor:pointer;text-align:left;color:var(--text)}
.set-card b{display:block;margin:2px 0 8px}
.set-card.done{border-color:var(--teal)}
.stickers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sticker{border:1.5px solid var(--line);background:var(--surface);border-radius:16px;padding:10px 8px;min-height:116px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;position:relative;color:var(--text)}
.sticker.owned{border-color:var(--teal);background:var(--teal-bg)}
.sticker.gold{border-color:var(--gold)}
.sticker .num{font-size:20px;font-weight:900}
.sticker .nm{font-size:12px;line-height:1.2}
.sticker .stars{color:var(--gold);font-size:11px;letter-spacing:1px}
.sticker .qty{position:absolute;top:6px;right:6px;min-width:22px;height:22px;border-radius:11px;background:var(--teal);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.sticker .wish{position:absolute;top:6px;left:6px;color:var(--pink)}
.stepper{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0}
.stepper b{font-size:34px;min-width:60px;text-align:center}
.stepper .icon-btn{background:var(--surface2);width:56px;height:56px}

/* Chat */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 56px - var(--safe-top));height:calc(100dvh - 56px - var(--safe-top))}
.msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.bubble{max-width:78%;padding:9px 14px;border-radius:18px;background:var(--theirs);white-space:pre-wrap;word-wrap:break-word;align-self:flex-start}
.bubble.mine{background:var(--mine);color:#fff;align-self:flex-end}
.bubble img{display:block;max-width:100%;max-height:300px;border-radius:12px}
.bubble.photo{padding:4px}
.sender{font-size:12px;color:var(--teal-text);margin:8px 6px 0}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px 12px calc(12px + var(--safe-bottom));background:var(--surface);border-top:1px solid var(--line)}
.composer textarea{flex:1;min-height:46px;max-height:120px;border-radius:23px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:12px 16px;font:inherit;resize:none}
.round{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;flex:none}
.round.send{background:var(--teal);color:#fff}.round.attach{background:var(--surface2);color:var(--text)}
.pay-card{background:var(--theirs);border-radius:18px;padding:14px;align-self:flex-start;max-width:85%;min-width:240px}

/* Auth */
.auth{max-width:420px;margin:0 auto;padding:40px 22px}
.auth .logo{display:block;height:64px;margin:0 auto 14px}
.auth h1{text-align:center;margin:0 0 4px}
.auth p.lead{text-align:center;color:var(--muted);margin:0 0 20px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:16px 0 4px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}