:root{
  --bg:#052c73;--bg2:#04469f;--panel:#0a56b7;--panel2:#07377f;
  --text:#fff;--muted:#b8cdf4;--gold:#ffd218;--yellow:#ffcb12;
  --cyan:#72e8ff;--green:#29e3a4;--purple:#7d64ff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% -20%,#0b7be7 0,#05479f 30%,#042b6e 65%,#031b47 100%);color:white}
button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-shell{width:min(980px,100%);display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.brand-big{display:flex;gap:16px;align-items:center}.brand-big strong{display:block;font-size:26px;letter-spacing:.08em}.brand-big span{display:block;color:var(--muted);margin-top:5px}
.brand-icon{width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,#ffdf42,#ff9d00);display:grid;place-items:center;color:#062f77;font-weight:1000;font-size:26px;box-shadow:0 20px 40px #00143799}
.auth-card{background:white;color:#182744;border-radius:26px;padding:24px;box-shadow:0 30px 100px #00184288}
.auth-toggle{display:grid;grid-template-columns:1fr 1fr;background:#edf1f8;border-radius:12px;padding:4px}
.auth-tab{border:0;background:transparent;padding:12px;border-radius:10px;color:#75829a;font-weight:900}
.auth-tab.active{background:white;color:#1d4d9b;box-shadow:0 3px 12px #0001}
.auth-form{display:none}.auth-form.active{display:block}.auth-form h1{margin:22px 0 7px}.auth-form p{color:#6d7890;line-height:1.5}
.auth-form label,.modal-card label{display:block;font-size:12px;font-weight:800;margin:14px 0}.auth-form input,.modal-card input{width:100%;padding:13px;border:1px solid #d8e0ec;border-radius:11px;margin-top:7px}
.primary-btn,.secondary-btn,.yellow-action{border:0;border-radius:11px;padding:12px 16px;font-weight:900}
.primary-btn{background:linear-gradient(135deg,#ffd52c,#ffae00);color:#092a64}.secondary-btn{background:#164d9a;color:white;border:1px solid #ffffff22}.full{width:100%}.demo-copy{margin-top:14px;padding:10px;border-radius:9px;background:#f3f6fb;color:#74829a;font-size:11px}
.app{min-height:100vh}.topbar{position:fixed;top:0;left:0;right:0;height:78px;padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#063f97ee,#07367bd9);border-bottom:1px solid #ffffff14;backdrop-filter:blur(14px);z-index:40}
.plain-btn{border:0;background:transparent;color:white;font-size:27px;width:46px}.brand-pill{display:flex;align-items:center;gap:9px;background:white;color:#1e4b85;border-radius:10px;padding:7px 10px;box-shadow:0 6px 18px #001b4766}.brand-pill strong{display:block;font-size:11px;letter-spacing:.07em}.brand-pill small{display:block;font-size:7px;color:#6f7e96;letter-spacing:.15em;margin-top:2px}.brand-mini{font-weight:1000;font-size:14px}
.top-avatar{width:42px;height:42px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffe674,#ffae00 48%,#e97800 100%);color:#713e00;font-weight:1000}
.drawer{position:fixed;top:0;bottom:0;left:0;width:265px;background:#041f51f6;border-right:1px solid #ffffff18;padding:100px 18px 20px;transform:translateX(-100%);transition:.25s;z-index:55;box-shadow:20px 0 60px #00102b99}.drawer.open{transform:translateX(0)}.drawer-brand{font-size:13px;font-weight:1000;letter-spacing:.1em;margin-bottom:18px;color:#ffdd44}.drawer-link{display:block;width:100%;text-align:left;border:0;background:transparent;color:#d8e6ff;padding:13px;border-radius:10px;font-weight:800;margin:3px 0}.drawer-link:hover,.drawer-link.active{background:#ffffff12}.drawer-link.danger{margin-top:25px;color:#ffd1c9}
.profile-menu{position:fixed;top:70px;right:12px;width:235px;background:#0a3f8e;border:1px solid #ffffff2a;border-radius:14px;padding:10px;z-index:60;box-shadow:0 30px 60px #001438aa}.profile-menu button{width:100%;text-align:left;border:0;background:transparent;color:white;padding:11px;border-radius:8px;font-weight:750}.profile-menu button:hover{background:#ffffff10}.profile-menu hr{border:0;border-top:1px solid #ffffff1f}
.content{max-width:900px;margin:0 auto;padding:102px 14px 100px}.view{display:none}.view.active{display:block}
.hero-panel{border:1px solid #88c5ff61;background:linear-gradient(145deg,#4db8c632,#247fe453 55%,#104ab038);border-radius:26px;padding:38px 25px;text-align:center;box-shadow:inset 0 1px #ffffff30,0 18px 40px #001e5177}
.kicker{color:var(--gold);letter-spacing:.19em;font-size:11px;font-weight:1000}.hero-panel h1{font-size:42px;margin:12px 0}.hero-panel p{font-size:18px;line-height:1.55;color:#eef6ff;max-width:650px;margin:auto}.joined-pill{display:inline-block;background:#ffffff28;border-radius:999px;padding:8px 16px;font-weight:900;font-size:12px;margin-top:18px}
.boards-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.board-card{text-align:center;position:relative;padding:10px 4px 14px}.board-disc{width:210px;height:210px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 9px #ffffff22,inset 0 0 0 13px #00000012,0 14px 35px #001a4788}
.board-disc:before,.board-disc:after{content:"";position:absolute;border-radius:50%;inset:17px;border:2px solid #ffffff32}.board-disc:after{inset:31px;border-width:1px}
.board-disc .disc-inner{position:relative;z-index:1;color:#335}.board-disc span{display:block;font-weight:900;letter-spacing:.08em;font-size:13px}.board-disc strong{display:block;font-size:33px;margin:7px 0}.board-disc small{font-size:11px;letter-spacing:.08em}
.starter{background:linear-gradient(145deg,#ffef89,#efa000)}.silver{background:linear-gradient(145deg,#fff,#b8cce0)}.pearl{background:linear-gradient(145deg,#efffff,#82ddea)}.gold{background:linear-gradient(145deg,#fff467,#f6c000)}.platinum{background:linear-gradient(145deg,#ffe7ff,#c5a5e8)}.vvip{background:linear-gradient(145deg,#ffbad4,#f64085)}.diamond{background:linear-gradient(145deg,#efffff,#8ee3d3)}
.board-card button{background:#7569ff;border:0;color:white;border-radius:9px;padding:9px 22px;font-weight:1000;box-shadow:0 7px 14px #2b1bc166}.board-card button.viewing{background:#ffbb00;color:white}.flag{position:absolute;right:17%;top:15px;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:1000;color:white}.flag.hot{background:#ff4d19}.flag.new{background:#ffa500}.joined-mark{display:block;color:#79ffbf;font-size:11px;font-weight:900;margin-top:8px}
.support-line{text-align:center;color:#e5efff;font-size:11px;margin-top:20px}
.back-btn{border:1px solid #6db7ff;background:#0b4ea3;color:white;border-radius:9px;padding:9px 14px;font-weight:900}.detail-card{background:linear-gradient(145deg,#1d258b,#164ec0 55%,#0d2c7a);border:1px solid #ffed8580;border-radius:18px;padding:20px;margin-top:15px;box-shadow:0 18px 40px #00174466}.detail-top{display:flex;justify-content:space-between}.detail-top small,.legend small{display:block;color:#c7d6f6;font-size:10px}.detail-top strong{font-size:18px}.legend{text-align:right}.legend span{display:block;color:#ffe14c;font-size:11px;font-weight:900}.legend b{display:block;font-size:19px;margin:3px 0}.notice-box{border:1px solid #ffe6799c;border-radius:14px;padding:14px;margin:18px 0;background:#ffffff08}.notice-box b{color:#fffad3}.notice-box p{color:#eff5ff;line-height:1.5;margin:7px 0 0}.progress-row{display:flex;justify-content:space-between;font-size:12px}.bar{height:10px;border-radius:999px;background:#7f78ff;margin:10px 0 16px;overflow:hidden}.bar i{height:100%;display:block;background:linear-gradient(90deg,#ffec00,#41efad)}.yellow-action{width:100%;background:linear-gradient(135deg,#ffd91f,#ffb900);color:white;font-size:16px}.board-title{text-align:center;margin:24px 0 15px}.board-title h2{margin:0}.board-title small{color:#c7d8f5}.chat-legend{width:100%;border:1px solid #54b3ff;background:#0d67d8;color:white;border-radius:11px;padding:14px;font-weight:900}.stat-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}.stat-chips span{background:#3a93eb;padding:8px 12px;border-radius:999px;font-size:11px}.green-chip{background:#10a985!important}.circle-visual{border:1px solid #65b9ff55;background:#0a5bb436;border-radius:22px;padding:26px 12px}.section-label{text-align:center;color:#a9c7f2;font-size:11px;letter-spacing:.16em;font-weight:900;margin:9px 0 12px}.people-grid{display:grid;justify-content:center;gap:18px;margin-bottom:18px}.people-grid.top{grid-template-columns:repeat(4,80px)}.people-grid.mid{grid-template-columns:repeat(2,80px)}.people-grid.one{grid-template-columns:80px}.person-node{text-align:center;position:relative}.person-node>div{width:62px;height:62px;border-radius:50%;border:4px solid #2d67ff;background:#0a397e;display:grid;place-items:center;margin:auto;font-weight:1000}.person-node i{position:absolute;top:-6px;left:2px;background:#f7a800;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:1000}.person-node b{display:block;background:#05285c;border-radius:5px;padding:4px;margin-top:5px;font-size:9px}.person-node.featured>div{border-color:#22e3ae;background:#0c9c80}.person-node.featured b{background:#16c6a1}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-head h1{font-size:32px;margin:5px 0 0}.market-list{display:grid;gap:14px}.market-list article{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px;border:1px solid #ffffff1b;background:#ffffff08;border-radius:16px}.market-list article>span{font-size:28px}.market-list h3{margin:0}.market-list p{margin:4px 0 0;color:var(--muted)}.market-list button{border:0;border-radius:9px;padding:9px 12px;background:#6d62ff;color:white;font-weight:900}
.family-card,.wallet-card,.activity-card,.profile-card-lg,.ranking-card,.notification-card{border:1px solid #ffffff1c;background:#ffffff08;border-radius:20px;padding:22px;text-align:center}.family-ring,.profile-avatar-lg{width:90px;height:90px;border-radius:50%;display:grid;place-items:center;margin:auto;background:linear-gradient(145deg,#ffe35a,#ff9700);color:#083578;font-weight:1000;font-size:27px;box-shadow:0 12px 25px #00163a88}.family-card p{color:var(--muted)}.family-members{display:flex;justify-content:center;margin:20px 0}.family-members span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#1d64c5;border:3px solid #0a367e;margin-left:-7px;font-weight:900}.goal-progress{text-align:left;margin-top:20px}.goal-progress div:first-child{display:flex;justify-content:space-between}.chat-window{border:1px solid #ffffff1a;background:#ffffff08;border-radius:20px;padding:15px}.messages{min-height:450px;display:flex;flex-direction:column;gap:12px}.message{max-width:78%;padding:12px 14px;border-radius:14px}.message.left{background:#175bb4;align-self:flex-start}.message.right{background:#16866f;align-self:flex-end}.message p{margin:5px 0}.message small{color:#d2e0f5;font-size:10px}.chat-input{display:flex;gap:8px;border-top:1px solid #ffffff1a;padding-top:12px}.chat-input input{flex:1;border:1px solid #ffffff20;background:#082c6b;color:white;border-radius:10px;padding:12px}.chat-input button{border:0;background:#ffcf24;color:#083472;border-radius:10px;padding:0 16px;font-weight:900}.wallet-card h1{font-size:48px;margin:10px 0 0}.wallet-card p{color:var(--muted)}.wallet-actions{display:flex;justify-content:center;gap:8px;margin-top:20px}.activity-card{margin-top:16px;text-align:left}.activity-card>div{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid #ffffff13}.profile-card-lg h2{margin:14px 0 4px}.profile-card-lg p{color:var(--muted)}.profile-items{margin-top:20px}.profile-items>div{display:flex;justify-content:space-between;padding:13px 0;border-top:1px solid #ffffff14}.award-list{display:grid;gap:12px}.award-item{display:flex;justify-content:space-between;align-items:center;border:1px solid #ffffff18;background:#ffffff08;padding:14px;border-radius:14px}.ranking-card,.notification-card{text-align:left}.ranking-card>div{display:grid;grid-template-columns:45px 1fr auto;align-items:center;padding:12px;border-bottom:1px solid #ffffff16}.ranking-card>div:last-child{border:0}.ranking-card small{color:var(--muted)}.notification-card p{padding:10px 0;border-bottom:1px solid #ffffff13}.notification-card p:last-child{border:0}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:74px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:#06275cef;border-top:1px solid #ffffff17;backdrop-filter:blur(12px);z-index:35}.bottom-nav button{border:0;background:transparent;color:#dbeaff;font-weight:800}.bottom-nav button.active{color:#ffdf28}.bottom-nav span,.bottom-nav small{display:block}.bottom-nav span{font-size:20px}.bottom-nav small{font-size:10px;margin-top:2px}
.modal-wrap{position:fixed;inset:0;background:#00102edb;display:grid;place-items:center;padding:18px;z-index:80}.modal-card{width:min(430px,100%);background:#0b397f;border:1px solid #ffffff2c;border-radius:20px;padding:23px;position:relative}.modal-x{position:absolute;right:13px;top:9px;border:0;background:transparent;color:white;font-size:28px}.modal-card h2{margin:7px 0}.modal-card>p{color:#c5d6f2}.modal-card input{background:#06275f;border-color:#ffffff1e;color:white}.currency{display:flex;align-items:center;gap:6px}.currency input{margin:7px 0 0}.safety-note{background:#ffffff0b;color:#bdd0ef;padding:10px;border-radius:9px;font-size:11px;margin:12px 0}.toast{position:fixed;right:15px;bottom:88px;background:white;color:#16457f;border-radius:10px;padding:11px 14px;font-weight:900;z-index:90;opacity:0;transform:translateY(10px);transition:.2s}.toast.show{opacity:1;transform:none}
@media(min-width:950px){.content{padding-left:80px;padding-right:80px}.boards-grid{grid-template-columns:repeat(3,1fr)}.board-disc{width:190px;height:190px}}
@media(max-width:680px){.auth-shell{grid-template-columns:1fr}.brand-big{justify-content:center;text-align:left}.brand-big strong{font-size:20px}.brand-icon{width:64px;height:64px}.hero-panel{padding:29px 18px}.hero-panel h1{font-size:36px}.hero-panel p{font-size:15px}.boards-grid{gap:10px}.board-disc{width:150px;height:150px}.board-disc strong{font-size:25px}.board-disc span{font-size:11px}.board-disc small{font-size:9px}.flag{right:5%;top:8px}.people-grid.top{grid-template-columns:repeat(4,68px);gap:8px}.people-grid.mid{grid-template-columns:repeat(2,68px)}.person-node>div{width:55px;height:55px}.wallet-card h1{font-size:39px}}
@media(max-width:370px){.board-disc{width:135px;height:135px}.board-disc strong{font-size:22px}.boards-grid{gap:4px}}