:root{
 --bg:#061218;--surface:#0a1a21;--surface2:#0d2028;--line:#182c34;--text:#f5fafc;
 --muted:#8299a5;--green:#3fde75;--green2:#27bb60;--danger:#ef626d;--amber:#f2bd3e
}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}.hidden,.hidden-pane{display:none!important}.grow{flex:1;min-width:0}.empty,.admin-info{color:var(--muted);font-size:12px;text-align:center;padding:18px 8px}
.app-body{min-height:100vh}.phone-app{width:min(100%,430px);min-height:100dvh;margin:0 auto;background:#061218;position:relative;padding-bottom:64px;border-left:1px solid rgba(255,255,255,.02);border-right:1px solid rgba(255,255,255,.02)}
.app-header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #14272f;background:#061218;position:sticky;top:0;z-index:50}
.app-logo{font-size:15px;letter-spacing:.025em}.app-logo span{color:var(--green)}.header-menu{width:34px;height:34px;background:transparent;border:0;display:grid;place-content:center;gap:4px}.header-menu i{display:block;width:16px;height:2px;border-radius:99px;background:#e7eff2}.hidden-runtime{display:none}
.app-content{padding:18px 13px 18px}.screen{display:none}.screen.active-screen{display:block}.screen-title span,.screen-kicker,.category-label{display:block;color:var(--green);font-size:9px;font-weight:800;letter-spacing:.13em}.screen-title h1{font-size:23px;letter-spacing:-.025em;margin:6px 0 7px}.screen-title p{font-size:10px;line-height:1.5;color:var(--muted);margin:0 0 15px;max-width:330px}
.summary-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px;margin-bottom:12px}.summary-head{display:grid;grid-template-columns:45px 1fr;gap:11px;align-items:center}.summary-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--green);background:#102a25;border:1px solid #1a3a30;font-weight:800}.summary-head small{display:block;color:#91a6b0;font-size:9px}.summary-head strong{display:block;font-size:27px;line-height:1.05;margin-top:2px}.summary-head em{display:block;color:#849ba6;font-size:8px;font-style:normal;margin-top:3px}.mock-progress{height:7px;border-radius:999px;background:#172a31;overflow:hidden;margin-top:13px}.mock-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--green2));width:0;transition:.35s}.progress-caption{display:flex;justify-content:space-between;color:#8499a4;font-size:8px;margin-top:6px}.progress-caption b{color:#e3ecef;font-weight:600}.level-summary-head{display:flex;align-items:center;justify-content:space-between}.level-summary-head small{display:block;color:var(--green);font-size:8px;letter-spacing:.1em}.level-summary-head strong{display:block;font-size:17px;margin-top:2px}.level-summary-head>span{width:36px;height:36px;border-radius:12px;background:#102a25;display:grid;place-items:center}

.today-overview{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:8px;align-items:center;padding:3px 1px 18px;border-bottom:1px solid #152830}.today-number{display:flex;align-items:flex-end;gap:6px;margin-top:8px}.today-number strong{font-size:53px;line-height:.9;letter-spacing:-.055em}.today-number span{font-size:16px;font-weight:700;margin-bottom:4px}.today-overview p{font-size:9px;color:#8ba0aa;margin:9px 0 0}.status-pills{display:flex;gap:6px;margin-top:15px}.status-pills span{font-size:8px;color:#73cf8d;border:1px solid #18372d;background:#0c211f;border-radius:10px;padding:7px 8px}.liquid-ring{--p:0;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--p)*1%),#192b33 0);position:relative}.liquid-ring:before{content:"";position:absolute;width:86px;height:86px;border-radius:50%;background:#0b1b22}.liquid-core{position:relative;z-index:2;display:grid;place-items:center}.liquid-core img{width:28px;height:28px}.liquid-core b{font-size:19px;margin-top:2px}.liquid-core small{font-size:7px;color:#8499a4}
.history-block{padding:16px 0;border-bottom:1px solid #14272f}.history-chart{height:145px;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:10px;padding:8px 8px 0;background:repeating-linear-gradient(to top,transparent 0,transparent 34px,rgba(255,255,255,.03) 35px)}.history-col{height:100%;display:flex;align-items:flex-end;justify-content:center}.history-col i{display:block;width:15px;min-height:4px;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#45e47b,#29bc60)}.history-axis{display:grid;grid-template-columns:repeat(7,1fr);font-size:7px;color:#748b96;text-align:center;margin-top:5px}.category-list{display:grid;gap:11px;margin-top:12px}.history-cat>div:first-child{display:flex;justify-content:space-between;font-size:9px;margin-bottom:5px}.history-cat b{font-weight:500}.history-cat-track{height:7px;background:#172a31;border-radius:999px;overflow:hidden}.history-cat-track i{display:block;height:100%;border-radius:inherit;background:var(--green)}

.add-title-row,.social-title{display:flex;align-items:center;justify-content:space-between}.add-title-row h1,.social-title h1{font-size:14px;letter-spacing:.02em;margin:0}.close-like,.social-title button{border:0;background:transparent;color:#dbe6ea;font-size:21px}.category-label{margin:22px 0 9px;color:#dbe5e9;letter-spacing:.08em}
.drink-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.drink-card{position:relative;min-height:80px;border:1px solid #162a32;border-radius:12px;background:#08191f;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:8px 3px}.drink-card.active{border-color:var(--green);background:#0b211d}.drink-art{width:32px;height:32px;display:grid;place-items:center}.drink-art img{width:28px;height:28px}.drink-card b{font-size:8px}.drink-card small{display:none}.drink-card i{position:absolute;right:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--green);color:#041009;display:none;font-size:8px;font-style:normal}.drink-card.active i{display:grid;place-items:center}.compact-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:9px 0}.pager-arrow{width:29px;height:29px;border-radius:9px;border:1px solid #1b3038;background:#0a1b22;color:#d9e4e8}.pager-dots{display:flex;gap:4px}.pager-dot{width:5px;height:5px;border-radius:50%;background:#2a3d45}.pager-dot.active{background:var(--green)}.compact-pager span{font-size:8px;color:#8096a0}.custom-drink-link{display:block;margin:0 auto;border:0;background:transparent;color:var(--green);font-size:9px}.amount-section{border-top:1px solid #152830;margin-top:13px;padding-top:1px}.amount-section>p{font-size:9px;color:#8299a5;margin:0 0 9px}.volume-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.volume-btn{min-height:65px;border:1px solid #1b3038;border-radius:13px;background:#0b1c23;color:#fff}.volume-btn.featured{border-color:var(--green);background:#0c211e}.measure{display:block;font-size:19px;font-weight:800}.volume-btn small{font-size:8px;color:#8299a5}.custom-row{display:grid;gap:8px;margin-top:10px}.custom-input{min-height:43px;border:1px solid #1b3038;border-radius:12px;background:#0b1c23;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;color:#8299a5;font-size:9px}.custom-input>div{display:flex;align-items:center}.custom-input input{width:86px;border:0;background:transparent;color:white;text-align:right;outline:none}.custom-input em{font-style:normal;margin-left:4px}.primary,.secondary,.ghost,.danger{border:0;border-radius:12px;padding:11px 12px}.primary{background:linear-gradient(135deg,#42e278,#28bc61);color:#041009;font-weight:800}.secondary{background:#10252d;color:#e2ecef;border:1px solid #20363e}.ghost{background:transparent;color:#a8bbc4;border:1px solid #20363e}.danger{background:#3b171b;color:#ff9da3}.wide{width:100%}.tiny{padding:7px 9px;font-size:9px}.recent-section{border-top:1px solid #152830;margin-top:14px;padding-top:14px}.recent-heading{display:flex;align-items:flex-end;justify-content:space-between}.recent-heading h3{font-size:13px;margin:4px 0 0}.recent-heading>span{font-size:8px;color:#8096a0}.recent-drinks{display:grid;gap:0;margin-top:8px}.recent-drink-row{display:flex;align-items:center;gap:9px;padding:10px 1px;border-bottom:1px solid #14272f}.recent-drink-icon{width:34px;height:34px;border-radius:10px;background:#0c2027;display:grid;place-items:center}.recent-drink-icon img{width:24px;height:24px}.recent-drink-row b{font-size:10px}.recent-drink-row small{display:block;color:#8198a3;font-size:8px;margin-top:2px}.delete-drink-btn{width:31px;height:31px;border:1px solid #263941;border-radius:10px;background:transparent;color:#d06b72}.delete-drink-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}

.social-title button{font-size:15px}.social-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#0a1b22;border:1px solid #182c34;border-radius:12px;padding:3px;margin:14px 0 10px}.social-tabs button{border:0;border-radius:9px;background:transparent;color:#859ba6;font-size:9px;padding:8px 4px}.social-tabs button.active{background:#172b31;color:white}.list{display:grid}.friend-profile-card{display:flex;align-items:center;border-bottom:1px solid #14272f;padding:9px 0}.friend-profile-open{display:flex;align-items:center;gap:10px;flex:1;border:0;background:transparent;color:white;text-align:left;padding:0}.avatar,.friend-avatar{width:43px;height:43px;border-radius:50%;background:#14252c;display:grid;place-items:center;color:var(--green);font-weight:800;overflow:hidden}.avatar img,.friend-avatar img{width:100%;height:100%;object-fit:cover}.friend-profile-open b{font-size:11px}.friend-profile-open small{display:block;font-size:8px;color:#d8a933;margin-top:2px}.friend-chevron{color:var(--green)}.friend-profile-card>.ghost{border:0;font-size:0;padding:8px}.friend-profile-card>.ghost:after{content:"×";font-size:14px}.requests .mini-heading,.mini-heading{font-size:9px;color:#8299a5;margin-bottom:6px}.list-row,.session-row{display:flex;align-items:center;gap:9px;border-bottom:1px solid #14272f;padding:10px 0}.list-row b,.session-row b{font-size:10px}.list-row small,.session-row small{display:block;color:#8198a3;font-size:8px}.row-actions{display:flex;gap:5px}.session-row{width:100%;border-left:0;border-right:0;border-top:0;background:transparent;color:white;text-align:left}.session-symbol{width:42px;height:42px;border-radius:12px;background:#0c2027;display:grid;place-items:center}.session-symbol img{width:28px;height:28px}.session-name{display:flex;align-items:center;gap:5px}.status{font-size:7px;padding:2px 5px;border-radius:99px}.status.live{color:#4ce580;background:#0c2a1b}.status.ended{color:#9db0b8;background:#17272e}.session-meta{display:flex;gap:8px;margin-top:4px;font-size:8px;color:#8299a5}.session-score{text-align:right}.session-score strong{font-size:11px;color:var(--green)}.session-score small{font-size:7px}.session-score span{display:block;color:#8399a3}

.app-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,430px);height:62px;background:#07171d;border-top:1px solid #172a31;display:grid;grid-template-columns:repeat(5,1fr);z-index:100;padding:5px 9px calc(5px + env(safe-area-inset-bottom))}.nav-item{border:0;background:transparent;color:#8b9fa9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.nav-item.active{color:var(--green)}.nav-item svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.nav-item small{font-size:6.5px}.nav-plus{width:42px;height:42px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#46e67c,#27bc60);border:3px solid #07171d;color:white}.nav-plus svg{width:23px;height:23px}.nav-plus-item small{margin-top:-1px}

.modal{position:fixed;inset:0;z-index:200;background:#061218;display:flex;align-items:stretch;justify-content:center}.modal.hidden{display:none}.modal-card{width:min(100%,430px);height:100dvh;max-height:none;overflow:auto;background:#061218;padding:64px 14px 76px;position:relative}.modal-close{position:fixed;top:12px;right:max(14px,calc((100vw - 430px)/2 + 14px));z-index:230;width:32px;height:32px;border:0;background:transparent;color:white;font-size:22px}.modal-icon{width:48px;height:48px;border-radius:14px;background:#0c2027;display:grid;place-items:center}.modal-icon img{width:32px;height:32px}.modal-card h2{font-size:21px;margin:10px 0 5px}.modal-card>p{color:#8299a5;font-size:10px}.modal-card input,.modal-card select{width:100%;border:1px solid #1b3038;border-radius:12px;background:#0b1c23;color:white;padding:11px;margin-top:5px}.modal-card label{display:block;font-size:9px;color:#9bb0b9;margin:10px 0}.profile-head{display:flex;flex-direction:column;align-items:center;text-align:center}.profile-avatar-large{width:104px;height:104px;border-radius:50%;background:#14252c;display:grid;place-items:center;font-size:34px;font-weight:800;overflow:hidden}.profile-avatar-large img{width:100%;height:100%;object-fit:cover}.profile-head .eyebrow{display:none}.profile-head h2{font-size:22px;margin:10px 0 2px}.friend-title-line{font-size:10px;color:#e2b23b;margin:2px 0}.fun-status-line{font-size:8px;color:#8299a5}.profile-head>div>p:last-child{font-size:9px;color:#9cb0b8}.level-card{margin-top:10px}.level-top{text-align:center}.level-top .eyebrow,.level-orb{display:none}.level-top h3{font-size:11px;margin:0}.level-top p{font-size:8px;color:#8299a5}.xp-track{height:7px;border-radius:999px;background:#172a31;overflow:hidden;margin:9px 18px;position:relative}.xp-fill{height:100%;background:var(--green);border-radius:inherit}.xp-track span{display:none}.level-next,.xp-sources{font-size:7px;color:#8299a5;display:flex;justify-content:space-between;gap:7px}.profile-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #14272f;border-bottom:1px solid #14272f;margin-top:12px;padding:10px 0}.profile-stat-grid article{text-align:center}.profile-stat-grid span{display:block;font-size:7px;color:#8299a5}.profile-stat-grid strong{font-size:15px}.profile-stat-grid small,.profile-stat-grid em{display:block;font-size:7px;color:#8299a5;font-style:normal}.profile-section{border-top:1px solid #14272f;padding-top:14px;margin-top:14px}.profile-section h3{font-size:14px;margin:0}.profile-section p{font-size:8px;color:#8299a5}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.profile-bars{height:150px;display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;margin-top:10px}.profile-bars>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}.profile-bars>div>span{font-size:6px;color:#7e949e}.profile-bars i{height:110px;width:100%;display:flex;align-items:flex-end;justify-content:center}.profile-bars b{width:65%;min-height:2px;background:var(--green);border-radius:3px 3px 0 0}.profile-bars small{font-size:6px}.year-picker{display:flex;align-items:center;gap:6px;margin:8px 0}.year-chips{display:flex;gap:5px;overflow:auto;flex:1}.year-chip{border:1px solid #1b3038;border-radius:99px;background:#0b1c23;color:white;font-size:8px;padding:6px 9px}.year-chip.active{background:var(--green);color:#041009;border-color:var(--green)}.title-shop{display:grid;gap:7px}.title-item{display:flex;align-items:center;gap:8px;border-bottom:1px solid #14272f;padding:8px 0}.title-icon{width:34px;height:34px;border-radius:10px;background:#0c2027;display:grid;place-items:center}.title-item b{font-size:10px}.title-item small{display:block;font-size:7px;color:#8299a5}.title-item .primary,.title-item .secondary{font-size:7px;padding:6px 7px}.profile-settings-grid{display:grid}.danger.wide{margin-top:5px}.toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:300;background:#10252d;border:1px solid #28414a;border-radius:12px;padding:9px 12px;font-size:9px;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.site-footer{display:none!important}

/* Battle detail dynamic content */
.battle-hero,.finale-hero{padding-bottom:12px;border-bottom:1px solid #14272f}.battle-hero h2,.finale-hero h2{font-size:21px}.battle-stats,.finale-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.battle-stats>div,.finale-stats>div{background:#0a1b22;border-radius:11px;padding:9px;text-align:center}.battle-stats strong,.finale-stats strong{font-size:13px}.battle-stats small,.finale-stats small{font-size:7px;color:#8299a5}.battle-drink-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.battle-drink-card{min-height:74px;border:1px solid #162a32;border-radius:11px;background:#08191f;color:white;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.battle-drink-card.active{border-color:var(--green)}.battle-drink-card img{width:26px;height:26px}.battle-drink-card strong{font-size:8px}.battle-drink-card small{font-size:6px;color:#8299a5}.leader-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #14272f;padding:9px 0}.rank-number{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#0c2027}.leader-row b{font-size:10px}.leader-row small{font-size:7px;color:#8299a5}.leader-score{text-align:right}.group-section-head{display:flex;justify-content:space-between;align-items:flex-start;margin-top:14px}.group-section-head h3{font-size:13px;margin:2px 0}.ranking-count{font-size:8px;color:#8299a5}

/* Auth & reset */
.auth-body{min-height:100vh;background:#061218}.auth-layout{width:min(100%,900px);margin:0 auto;min-height:100vh;display:grid;grid-template-columns:1fr 420px;align-items:center;gap:30px;padding:30px}.auth-showcase{color:white}.auth-logo{display:flex;align-items:center;gap:9px}.auth-logo span,.auth-mobile-brand span,.reset-brand span{width:40px;height:40px;border-radius:12px;background:#0c2027;display:grid;place-items:center}.auth-logo img,.auth-mobile-brand img,.reset-brand img{width:28px;height:28px}.auth-copy h1{font-size:42px;line-height:1.05}.auth-copy em{color:var(--green);font-style:normal}.auth-copy p,.auth-feature-row{color:#8299a5}.auth-preview{display:grid;gap:8px}.preview-drinks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.preview-drinks>div,.preview-battle{background:#0a1b22;border:1px solid #182c34;border-radius:12px;padding:10px}.preview-drinks img{width:30px;height:30px}.preview-drinks span{display:block;font-size:8px}.auth-panel-wrap{width:100%}.auth-card,.auth-reset-card{background:#0a1b22;border:1px solid #182c34;border-radius:20px;padding:22px}.auth-mobile-brand{display:none}.auth-heading h2,.auth-reset-card h1{font-size:23px;margin:5px 0}.auth-heading p,.auth-reset-card p,.auth-note{color:#8299a5;font-size:10px}.eyebrow{color:var(--green);font-size:9px;font-weight:800;letter-spacing:.12em}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:#07171d;border-radius:11px;padding:3px;margin:14px 0}.auth-tabs button{border:0;border-radius:9px;background:transparent;color:#8299a5;padding:9px}.auth-tabs button.active{background:var(--green);color:#041009}.auth-form{display:grid;gap:10px}.auth-form label>span{display:block;font-size:9px;color:#9eb1ba;margin-bottom:5px}.auth-input{display:flex;align-items:center;gap:8px;background:#07171d;border:1px solid #1b3038;border-radius:12px;padding:0 10px}.auth-input svg{width:16px;height:16px;fill:none;stroke:#8097a2;stroke-width:1.7}.auth-input input{width:100%;border:0;background:transparent;color:white;padding:11px 0;outline:none}.auth-helper-row{display:flex;justify-content:space-between;align-items:center;font-size:9px}.auth-helper-row a,.back-login{color:var(--green)}.remember-check{display:flex;align-items:center;gap:5px}.auth-submit{margin-top:4px}.auth-note{text-align:center}.alert{padding:9px;border-radius:10px;font-size:9px}.alert.error{background:#35161a;color:#ffabb0}.alert.success{background:#102a20;color:#84e8a5}.auth-simple-shell{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-reset-card{width:min(100%,430px)}.reset-brand{display:flex;align-items:center;gap:9px;color:white;text-decoration:none}.reset-icon{width:52px;height:52px;border-radius:15px;background:#0c2027;display:grid;place-items:center;margin:16px 0}.reset-icon svg{width:25px;height:25px;fill:none;stroke:var(--green);stroke-width:1.7}
@media(max-width:760px){.auth-layout{display:block;padding:16px;min-height:100vh}.auth-showcase{display:none}.auth-card{margin:25px auto;width:min(100%,430px)}.auth-mobile-brand{display:flex;align-items:center;gap:9px;margin-bottom:18px}}
@media(min-width:431px){.phone-app{box-shadow:0 0 0 1px #152830,0 24px 70px rgba(0,0,0,.35)}}


/* V22 — dashboard statistics, notices and rendering polish */
.dashboard-section-title{margin:19px 1px 9px}.dashboard-section-title>span{display:block;color:var(--green);font-size:8px;font-weight:800;letter-spacing:.13em}.dashboard-section-title h2{font-size:14px;margin:3px 0 0}.dashboard-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.dashboard-stat-grid article{min-width:0;background:#0a1a21;border:1px solid #182c34;border-radius:13px;padding:11px 7px;text-align:center;overflow:hidden}.dashboard-stat-grid article span{display:block;color:#849ba6;font-size:7px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dashboard-stat-grid article strong{display:block;font-size:14px;margin-top:5px;white-space:nowrap;letter-spacing:-.025em}.dashboard-stat-grid article small{display:block;color:#8299a5;font-size:7px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notice-title{margin-top:18px}.dashboard-notices{display:grid;gap:7px}.notice-card{width:100%;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid #182c34;border-radius:13px;background:#0a1a21;color:white;padding:10px}.notice-card>div{min-width:0;flex:1}.notice-card b{display:block;font-size:10px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}.notice-card small{display:block;color:#8299a5;font-size:8px;line-height:1.35;margin-top:2px;white-space:normal;overflow-wrap:anywhere}.notice-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#10252c;display:grid;place-items:center;font-size:15px}.friend-notice{background:#102a25}.title-notice{background:#2b2412}.xp-notice{background:#1b2530}.notice-action{cursor:pointer}.notice-chevron{font-size:19px;color:var(--green)}.muted-notice{opacity:.72}.nav-with-badge{position:relative}.nav-badge{position:absolute;top:1px;right:20%;min-width:15px;height:15px;padding:0 4px;border-radius:99px;background:#ee5f69;color:white;font-size:8px;font-weight:800;display:grid;place-items:center;border:2px solid #07171d}

/* Stop mobile text/icon distortion */
.screen,.summary-card,.notice-card,.friend-profile-card,.recent-drink-row,.title-item,.list-row,.session-row{min-width:0}
.screen h1,.screen h2,.screen h3,.modal-card h2,.profile-section h3{overflow-wrap:anywhere}
img,svg{max-width:100%}
.drink-art img,.recent-drink-icon img,.modal-icon img,.session-symbol img,.liquid-core img{object-fit:contain!important;display:block}
.friend-avatar img,.avatar img,.profile-avatar-large img{object-fit:cover!important;display:block}
.drink-card{overflow:hidden}.drink-card b{width:100%;line-height:1.15;white-space:normal;overflow-wrap:anywhere}.drink-card small{width:100%;white-space:normal}
.friend-profile-open{min-width:0}.friend-profile-open .grow{min-width:0}.friend-profile-open b,.friend-profile-open small{white-space:normal;overflow-wrap:anywhere}
.recent-drink-row .grow,.list-row .grow,.title-item .grow{min-width:0}.recent-drink-row b,.recent-drink-row small,.list-row b,.list-row small,.title-item b,.title-item small{white-space:normal;overflow-wrap:anywhere}
.profile-head>div{min-width:0}.profile-head h2,.friend-title-line,.fun-status-line{max-width:100%;white-space:normal;overflow-wrap:anywhere}

@media(max-width:360px){
 .app-content{padding-left:10px;padding-right:10px}
 .summary-head{grid-template-columns:40px 1fr}.summary-icon{width:39px;height:39px;font-size:12px}
 .summary-head strong{font-size:24px}
 .dashboard-stat-grid{gap:5px}.dashboard-stat-grid article{padding:9px 4px}.dashboard-stat-grid article strong{font-size:12px}
 .drink-picker{gap:5px}.drink-card{min-height:75px}.drink-art{width:28px;height:28px}.drink-art img{width:25px;height:25px}
 .nav-item small{font-size:6px}
}


/* =========================================================
   V23 — Battle image sizing + readability polish
   ========================================================= */

/* Global readability */
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.screen-title h1,
.add-title-row h1,
.social-title h1,
.modal-card h2,
.profile-head h2{
  line-height:1.18;
}
.screen-title p,
.today-overview p,
.notice-card small,
.recent-drink-row small,
.friend-profile-open small,
.list-row small,
.session-row small,
.title-item small,
.modal-card>p,
.profile-section p{
  line-height:1.45;
}
.summary-head strong,
.today-number strong,
.dashboard-stat-grid article strong{
  letter-spacing:-.02em;
}
.summary-card,
.dashboard-stat-grid article,
.notice-card,
.modal-card{
  border-color:#20343c;
}
.screen-title p,
.summary-head small,
.summary-head em,
.progress-caption,
.dashboard-stat-grid article span,
.dashboard-stat-grid article small,
.notice-card small,
.today-overview p,
.amount-section>p,
.recent-drink-row small,
.friend-profile-open small,
.list-row small,
.session-row small,
.title-item small,
.modal-card>p,
.profile-section p{
  color:#9aafb8;
}

/* Make buttons/text easier to tap/read */
.primary,.secondary,.ghost,.danger{
  min-height:40px;
}
.tiny{
  min-height:32px;
}
.nav-item small{
  font-weight:600;
  letter-spacing:.01em;
}

/* Battle drink cards: fixed visual frame */
.battle-drink-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.battle-drink-card{
  min-width:0!important;
  min-height:96px!important;
  padding:10px 8px!important;
  border:1px solid #1a3038!important;
  border-radius:13px!important;
  background:#08191f!important;
  color:#fff!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  justify-items:start!important;
  gap:3px 9px!important;
  text-align:left!important;
}
.battle-drink-card.active{
  border-color:var(--green)!important;
  background:#0b211d!important;
}
.battle-drink-card img{
  grid-row:1 / span 2!important;
  grid-column:1!important;
  width:42px!important;
  height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  flex:none!important;
  margin:0!important;
}
.battle-drink-card strong{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  font-size:10px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.battle-drink-card small{
  grid-column:2!important;
  grid-row:2!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  font-size:8px!important;
  line-height:1.35!important;
  color:#9aafb8!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Battle user avatars / ranking images */
.leader-row img,
.rank-row img,
.leaderboard-row img,
.battle-member img,
.finale-podium img,
.podium-avatar img{
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
  flex:0 0 38px!important;
}
.member-avatar img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

/* Battle icon wrappers */
.battle-drink-icon,
.battle-icon,
.session-symbol,
.recent-drink-icon{
  overflow:hidden!important;
}
.battle-drink-icon img,
.battle-icon img,
.session-symbol img,
.recent-drink-icon img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* Ranking layout stability */
.leader-row,
.rank-row,
.leaderboard-row{
  min-width:0!important;
}
.leader-row .grow,
.rank-row .grow,
.leaderboard-row .grow{
  min-width:0!important;
}
.leader-row b,
.rank-row b,
.leaderboard-row b{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.25!important;
}
.leader-score,
.rank-score{
  flex:0 0 auto!important;
  min-width:58px!important;
}

/* Modal spacing for battle details */
#sessionDetailModal .modal-card{
  padding-left:15px!important;
  padding-right:15px!important;
}
#sessionDetail h2{
  line-height:1.2!important;
}
#sessionDetail .group-section-head{
  gap:10px!important;
}
#sessionDetail .group-section-head>div{
  min-width:0!important;
}
#sessionDetail .group-section-head h3{
  line-height:1.25!important;
}
#sessionDetail .ranking-count{
  white-space:nowrap!important;
}

/* Friend and general image consistency */
.friend-avatar,
.avatar,
.profile-avatar-large{
  background:#10242c;
}
.friend-avatar img,
.avatar img,
.profile-avatar-large img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Slightly more breathing room in lists/cards */
.friend-profile-card,
.list-row,
.session-row,
.recent-drink-row,
.title-item{
  padding-top:11px!important;
  padding-bottom:11px!important;
}
.friend-profile-open b,
.recent-drink-row b,
.list-row b,
.session-row b,
.title-item b{
  line-height:1.3!important;
}

/* Dashboard polish */
.summary-card{
  padding:17px 16px;
}
.dashboard-stat-grid article{
  padding:12px 7px;
}
.notice-card{
  padding:11px;
}
.today-overview{
  gap:12px;
}
.status-pills span{
  line-height:1.25;
}

/* Prevent all app icons from stretching */
.drink-art img,
.liquid-core img,
.modal-icon img,
.session-symbol img,
.recent-drink-icon img,
.battle-drink-card img{
  aspect-ratio:1/1;
}

/* Small screens */
@media(max-width:360px){
  .battle-drink-grid{
    grid-template-columns:1fr!important;
  }
  .battle-drink-card{
    grid-template-columns:40px minmax(0,1fr)!important;
    min-height:88px!important;
  }
  .battle-drink-card img{
    width:40px!important;
    height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
  }
  .screen-title h1{font-size:21px}
  .today-number strong{font-size:48px}
}


/* =========================================================
   V24 — REAL Battle counter fix
   The battle uses .group-drink-card / .group-volumes.
   ========================================================= */
#sessionDetailModal .modal-card{
  background:#061218!important;
}
#sessionDetail{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.battle-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:end!important;
  padding-bottom:14px!important;
  border-bottom:1px solid #14272f!important;
}
.battle-head>div{min-width:0!important}
.battle-head h2{
  margin:5px 0 7px!important;
  font-size:22px!important;
  line-height:1.15!important;
  overflow-wrap:anywhere!important;
}
.battle-head p{
  margin:0!important;
  color:#a1b3bb!important;
  font-size:9px!important;
  line-height:1.4!important;
}
.battle-total{
  text-align:right!important;
  min-width:74px!important;
}
.battle-total small{
  display:block!important;
  color:#8198a3!important;
  font-size:8px!important;
}
.battle-total strong{
  display:block!important;
  font-size:17px!important;
  margin-top:2px!important;
  white-space:nowrap!important;
}

.group-counter{
  width:100%!important;
  margin-top:15px!important;
  padding:0!important;
}
.group-section-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-bottom:10px!important;
}
.group-section-head>div{min-width:0!important}
.group-section-head .eyebrow{
  display:block!important;
  color:var(--green)!important;
  font-size:8px!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
  margin-bottom:4px!important;
}
.group-section-head h3{
  margin:0!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.28!important;
  overflow-wrap:anywhere!important;
}
.live-save{
  flex:0 0 auto!important;
  color:#dce8ec!important;
  font-size:9px!important;
  white-space:nowrap!important;
}
.live-save::first-letter{color:var(--green)!important}

/* Actual group drink pager */
.group-drink-types{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}
.group-drink-card{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:82px!important;
  max-height:none!important;
  margin:0!important;
  padding:9px 28px 9px 9px!important;
  border:1px solid #1a3038!important;
  border-radius:13px!important;
  background:#0a1b22!important;
  color:#fff!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  text-align:left!important;
  overflow:hidden!important;
  box-shadow:none!important;
}
.group-drink-card.active{
  border-color:var(--green)!important;
  background:#0c211d!important;
  box-shadow:inset 0 0 0 1px rgba(63,222,117,.08)!important;
}
.group-drink-icon{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  max-width:40px!important;
  max-height:40px!important;
  border-radius:11px!important;
  background:#10232a!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.group-drink-icon img{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  margin:0!important;
  transform:none!important;
}
.group-drink-copy{
  min-width:0!important;
  width:100%!important;
  display:block!important;
}
.group-drink-copy b{
  display:block!important;
  width:100%!important;
  color:#fff!important;
  font-size:10px!important;
  line-height:1.22!important;
  font-weight:750!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  margin:0!important;
}
.group-drink-copy small{
  display:block!important;
  width:100%!important;
  color:#8ea4ae!important;
  font-size:7.5px!important;
  line-height:1.3!important;
  margin-top:3px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.group-drink-check{
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  width:17px!important;
  height:17px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#20353d!important;
  color:#7f96a0!important;
  font-size:8px!important;
  opacity:.45!important;
}
.group-drink-card.active .group-drink-check{
  background:var(--green)!important;
  color:#041009!important;
  opacity:1!important;
}

/* Pager */
.group-counter .pager-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:9px 0 12px!important;
}
.group-counter .pager-arrow{
  width:30px!important;
  height:30px!important;
  padding:0!important;
  border-radius:9px!important;
  border:1px solid #1b3038!important;
  background:#0a1b22!important;
  color:#dce8ec!important;
}
.group-counter .pager-dots{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
}
.group-counter .pager-footer>span{
  color:#8399a3!important;
  font-size:8px!important;
  white-space:nowrap!important;
}

/* Amount buttons */
.group-volumes{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  margin-top:0!important;
  align-items:stretch!important;
}
.group-volumes>button[data-group-ml]{
  min-width:0!important;
  min-height:62px!important;
  padding:8px 5px!important;
  margin:0!important;
  border:1px solid #1a3038!important;
  border-radius:12px!important;
  background:#0a1b22!important;
  color:#fff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:1px!important;
  position:relative!important;
  overflow:hidden!important;
}
.group-volumes>button[data-group-ml].featured{
  border-color:var(--green)!important;
  background:#0c211d!important;
}
.group-volumes>button[data-group-ml] strong{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
}
.group-volumes>button[data-group-ml] small{
  display:block!important;
  color:#8da3ad!important;
  font-size:7px!important;
  line-height:1.2!important;
}
.group-volumes>button[data-group-ml] span{
  position:absolute!important;
  right:6px!important;
  bottom:5px!important;
  width:16px!important;
  height:16px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#17352a!important;
  color:var(--green)!important;
  font-size:10px!important;
}

/* Custom ml input is a full-width row */
.group-custom{
  grid-column:1 / -1!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:7px!important;
  margin-top:1px!important;
}
.group-custom input{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  border:1px solid #1a3038!important;
  border-radius:12px!important;
  background:#0a1b22!important;
  color:#fff!important;
  padding:0 12px!important;
  font-size:12px!important;
  outline:none!important;
}
.group-custom input::placeholder{color:#6e8792!important}
.group-custom button{
  width:42px!important;
  height:44px!important;
  border:0!important;
  border-radius:12px!important;
  background:var(--green)!important;
  color:#041009!important;
  font-size:18px!important;
  font-weight:800!important;
}

/* Ranking below counter */
.battle-ranking{
  margin-top:18px!important;
  padding-top:14px!important;
  border-top:1px solid #14272f!important;
}
.leaderboard{
  display:grid!important;
  gap:0!important;
}
.leader-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:30px 36px minmax(0,1fr) auto!important;
  gap:8px!important;
  align-items:center!important;
  padding:10px 0!important;
  border-bottom:1px solid #14272f!important;
}
.member-avatar{
  width:36px!important;
  height:36px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#11252c!important;
  color:var(--green)!important;
  font-size:11px!important;
  font-weight:800!important;
  overflow:hidden!important;
}
.member-name{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
}
.member-name b{
  min-width:0!important;
  font-size:10px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.member-name span{
  font-size:6px!important;
  color:#041009!important;
  background:var(--green)!important;
  border-radius:99px!important;
  padding:2px 5px!important;
}
.leader-row .grow>small{
  display:block!important;
  margin-top:2px!important;
  color:#8da3ad!important;
  font-size:7px!important;
}
.leader-score{
  min-width:58px!important;
  text-align:right!important;
}
.leader-score strong{
  display:block!important;
  font-size:10px!important;
  color:#fff!important;
  white-space:nowrap!important;
}

/* Admin section */
.admin-box{
  margin-top:18px!important;
  padding-top:14px!important;
  border-top:1px solid #14272f!important;
}
.member-add-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:7px!important;
}
.member-add-row select{
  min-width:0!important;
}
.admin-actions{
  display:grid!important;
  gap:7px!important;
  margin-top:10px!important;
}

/* The old global .paged-grid or button styles must not win here */
#groupDrinkPager.paged-grid{
  display:grid!important;
}
#groupDrinkPager button{
  transform:none!important;
}

/* Mobile widths */
@media(max-width:360px){
  .group-drink-types{
    grid-template-columns:1fr!important;
  }
  .battle-head{
    grid-template-columns:1fr!important;
  }
  .battle-total{
    text-align:left!important;
  }
}


/* V25 — dashboard level sync */
.dashboard-level-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #14272f;
}
.dashboard-level-total span{
  color:#8fa4ae;
  font-size:8px;
}
.dashboard-level-total strong{
  color:#fff;
  font-size:10px;
  white-space:nowrap;
}
#dashLevelFill{
  transition:width .35s ease;
}


/* V26 — live refresh polish */
.status-pills span:first-child::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--green);
  margin-right:5px;
  box-shadow:0 0 0 3px rgba(63,222,117,.09);
  vertical-align:middle;
}