:root{
  --primary:#098df5;
  --primary-2:#1168ed;
  --primary-soft:#eaf4ff;
  --primary-faint:#f2f8ff;
  --ink:#303336;
  --ink-2:#4c5155;
  --muted:#858b90;
  --line:#e2e8ec;
  --line-strong:#ced9df;
  --app-bg:#e8f2f6;
  --surface:#ffffff;
  --danger:#e63e45;
  --success:#20a53b;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:28px;
  --shadow-sm:0 3px 12px rgba(31,75,99,.08);
  --shadow:0 10px 28px rgba(25,72,100,.12);
  --shadow-float:0 16px 42px rgba(18,75,112,.16);
  --nav-h:82px;
}

*{box-sizing:border-box}
html{min-height:100%;background:#dbe7ed}
body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#dbe7ed;display:flex;justify-content:center;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,button,input,select,textarea{font-size:14px}
button,input,select,textarea{font-family:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{color:inherit}

.app-shell{position:relative;width:100%;max-width:430px;min-height:100dvh;background:var(--surface);overflow:hidden;isolation:isolate}
.page{position:relative;min-height:100dvh;background:var(--surface)}
.page.with-nav{padding-bottom:calc(var(--nav-h) + 8px + env(safe-area-inset-bottom))}
.grow{flex:1;min-width:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:#777e83;line-height:1.55}
.muted a,.blue,a.blue{color:#0878ea;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.blue{color:#0878ea}
.danger{color:var(--danger)}
.icon{display:block;flex:none}

/* Controls */
.icon-btn{position:relative;width:44px;height:44px;border:0;border-radius:13px;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;color:#25292c;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.icon-btn:active{transform:scale(.95)}
.icon-btn.white{background:rgba(255,255,255,.97);box-shadow:0 5px 16px rgba(0,0,0,.12)}
.icon-btn.soft{background:#e9f5fb;color:#0086ee}
.icon-btn.primary{background:linear-gradient(135deg,#0aa7f8,#1167ee);color:#fff;box-shadow:0 7px 17px rgba(15,126,237,.26)}
.icon-btn.ghost{background:transparent;box-shadow:none}
.icon-btn .notify-dot,.community-row .icon-btn:after{content:"";position:absolute;width:7px;height:7px;background:#f0262b;border:2px solid #fff;border-radius:50%;right:8px;top:7px}

.btn{min-height:48px;border:0;border-radius:15px;padding:13px 19px;font-size:16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.btn:active{transform:scale(.985)}
.btn.primary{color:#fff;background:linear-gradient(105deg,#0ca8f7 0%,#1166ed 100%);box-shadow:0 8px 20px rgba(10,137,240,.28)}
.btn.primary:hover{filter:saturate(1.05)}
.btn.outline{background:#fff;border:1px solid #cbd3d8;color:#303336;box-shadow:none}
.btn.full{width:100%}
.white-btn{background:#fff;color:#303336;box-shadow:none}
.success-btn{background:#e8f8eb;color:#15952c}
.text-btn{border:0;background:transparent;color:#0782ef;text-decoration:underline;cursor:pointer;padding:8px}

.badge{display:inline-flex;align-items:center;gap:5px;width:max-content;padding:5px 9px;border-radius:9px;font-size:13px;font-weight:600;line-height:1}
.badge.primary{background:#078bf4;color:#fff}
.badge.glass{color:#fff;background:rgba(44,48,50,.45);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}

.toast{position:fixed;z-index:999;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(390px,calc(100% - 28px));padding:13px 16px;border-radius:13px;color:#fff;font-weight:600;box-shadow:var(--shadow-float);animation:toast-in .22s ease-out}
.toast-success{background:#168f4b}.toast-error{background:#cf444b}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Generic top bar */
.simple-topbar{min-height:106px;padding:calc(45px + env(safe-area-inset-top)) 16px 12px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:#fff;border-bottom:1px solid #edf1f3}
.simple-topbar .topbar-title{font-size:18px;font-weight:700;padding-left:2px}
.topbar-spacer{width:44px}

/* Bottom navigation */
.bottom-nav{position:fixed;z-index:70;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;min-height:var(--nav-h);padding:8px 9px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border-top:1px solid rgba(225,232,236,.8);border-radius:18px 18px 0 0;box-shadow:0 -7px 26px rgba(28,78,104,.10)}
.bottom-nav a{height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#5c6266;font-size:12px;font-weight:600;border-radius:13px;transition:color .16s ease,background .16s ease}
.bottom-nav a .nav-icon{height:25px;display:grid;place-items:center}
.bottom-nav a.active{color:#0788f5}
.bottom-nav a.active .nav-icon{color:#0788f5}
.bottom-nav small{font-size:12px;line-height:1}

/* Home */
.home-page{background:#fff}
.home-hero{background:#e7f1f6;padding:calc(50px + env(safe-area-inset-top)) 12px 18px}
.home-hero.compact{padding-bottom:22px}
.community-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.community-brand{display:flex;align-items:center;gap:8px;min-width:0}
.community-brand>img{width:47px;height:47px;border-radius:12px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 2px 9px rgba(22,62,84,.06)}
.community-brand b{display:block;font-size:12px;white-space:nowrap;letter-spacing:-.2px}
.community-brand small{display:flex;align-items:center;gap:4px;color:#0778ed;font-size:11px;margin-top:3px}
.community-brand small:before{content:"";width:6px;height:6px;background:#0789f4;border-radius:50%}

.profile-card{margin-top:9px;padding:9px 11px;display:flex;align-items:center;gap:10px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.8)}
.profile-card>img{width:47px;height:47px;border-radius:50%;object-fit:cover;border:2px solid #0b83f3;box-shadow:0 2px 8px rgba(0,91,193,.14)}
.profile-card b{display:block;font-size:16px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-card small{display:block;color:#067aee;margin-top:3px;font-size:12px}
.qr-mini{width:44px;height:44px;border-radius:12px;background:#f4f8fa;color:#30373b;display:grid;place-items:center}

.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px}
.stats-grid>div{min-height:65px;padding:9px 6px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.stats-grid b{display:block;font-size:19px;line-height:1.05}
.stats-grid b small{font-size:10px;font-weight:500;color:#62686c}
.stats-grid span{display:block;margin-top:3px;color:#93999d;font-size:10px;font-weight:400}
.stat-inline{display:flex!important;align-items:center;justify-content:center;gap:5px}
.stat-inline .icon{color:#087ff0}

.member-head{display:flex;align-items:center;justify-content:space-between;margin:15px 0 8px;font-size:12px}
.member-head a,.section-title a{color:#006ff0;font-weight:500}
.avatar-row{display:flex;gap:9px;overflow-x:auto;padding:1px 0 2px;scrollbar-width:none}
.avatar-row::-webkit-scrollbar,.chips::-webkit-scrollbar,.h-scroll::-webkit-scrollbar{display:none}
.avatar-row img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;border:2px solid #087efa;box-shadow:0 3px 9px rgba(20,73,103,.15)}

.content-card{position:relative;background:#fff;border-radius:24px 24px 0 0;padding:12px 12px 22px}
.content-card.flush-top{margin-top:-1px}
.chips{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 0 8px}
.chip{height:40px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:0;border-radius:22px;background:transparent;padding:0 12px;color:#5c6064;font-weight:500;font-size:15px;cursor:pointer}
.chip.active{background:#e7f0ff;color:#057ef1}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-title h3{margin:12px 0 10px;font-size:17px}
.section-title a{font-size:12px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}

.h-scroll{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.event-card{position:relative;flex:0 0 186px;height:280px;border-radius:15px;background-size:cover;background-position:center;color:#fff;overflow:hidden;scroll-snap-align:start;box-shadow:inset 0 -80px 80px rgba(0,0,0,.16)}
.event-card.tall{height:340px}
.event-card>.badge{position:absolute;right:8px;top:8px}
.event-card-body{position:absolute;left:12px;right:12px;bottom:9px;display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 5px rgba(0,0,0,.35)}
.event-card-body>small{font-size:10px;color:rgba(255,255,255,.87)}
.event-card-body b{font-size:16px;line-height:1.04;letter-spacing:-.25px}
.event-card-body strong{font-size:14px}
.event-card-body strong small{font-weight:400;font-size:10px}
.event-card-body .card-label{margin-top:4px}
.card-cta{margin-top:3px;padding:10px 12px;border-radius:22px;background:rgba(0,92,126,.90);text-align:center;font-size:13px;font-weight:500;text-shadow:none}

.shop-banner{margin:28px -4px 14px;padding:28px 24px;border-radius:16px;background:linear-gradient(110deg,#0da7f6,#1262e9);color:#fff;box-shadow:0 9px 23px rgba(0,107,230,.18)}
.shop-banner h2{display:flex;align-items:center;gap:8px;margin:0 0 5px;font-size:25px;letter-spacing:-.5px}
.shop-banner small{font-size:12px}.shop-banner p{margin:9px 0 0;font-size:12px;opacity:.82}
.shop-chips{margin-top:2px}

.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.product-grid.padded{padding:8px}
.product-card{min-width:0;padding:5px 5px 8px;border-radius:15px;background:#fff;box-shadow:0 4px 14px rgba(22,73,96,.14);display:flex;flex-direction:column;overflow:hidden}
.product-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px}
.product-card>b{padding:0 1px;margin-top:6px;font-size:14px;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card>small{padding:0 1px;margin-top:2px;font-size:10px;color:#7c8286}
.product-card>div{display:flex;align-items:end;justify-content:space-between;gap:4px;padding:0 1px;margin-top:5px}
.product-card strong{font-size:18px;line-height:1;color:#075fe8;letter-spacing:-.3px;white-space:nowrap}
.stock{flex:none;padding:1px 5px;border:1px solid #cfd5d8;border-radius:8px;color:#666b6e;font-size:9px;white-space:nowrap}

/* Event list */
.blue-head{padding:calc(54px + env(safe-area-inset-top)) 12px 34px;border-radius:0 0 38px 38px;background:linear-gradient(145deg,#0aa8f8 0%,#1875ee 100%)}
.search-row{display:flex;align-items:center;gap:12px}
.search-row .search-box{position:relative;flex:1}
.search-row input,.shop-search input{width:100%;height:44px;border:0;border-radius:24px;background:#fff;padding:0 16px 0 42px;color:#2e3235;outline:none}
.search-row .search-box .icon,.shop-search .search-box .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#495158}
.featured-event{height:220px;margin-top:24px;padding:15px;border-radius:17px;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.04)),url('../img/event-hero.jpg') center/cover;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 10px 26px rgba(0,73,140,.12)}
.featured-event h2{margin:8px 0 3px;font-size:22px;line-height:1.08}.featured-event p{margin:0;font-size:12px}
.event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.event-grid .event-card{width:auto;flex:none}

/* Hero / detail pages */
.hero-image,.product-hero{position:relative;height:310px;padding:calc(52px + env(safe-area-inset-top)) 12px 12px;background-size:cover;background-position:center;display:flex;align-items:flex-start;justify-content:space-between}
.hero-image:after,.product-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 34%);pointer-events:none}
.hero-image>* ,.product-hero>*{position:relative;z-index:1}
.hero-actions,.product-hero>div{display:flex;gap:10px}
.detail-sheet{position:relative;margin-top:-2px;padding:20px 20px 120px;border-radius:24px 24px 0 0;background:#fff;z-index:2}
.detail-sheet h1{margin:16px 0 9px;font-size:22px;line-height:1.12;letter-spacing:-.4px}
.detail-sheet h3{margin:26px 0 10px;font-size:15px}
.detail-sheet hr,.transaction-card hr,.profile-menu-v2 hr{border:0;border-top:1px solid var(--line);margin:17px 0}
.meta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:#71787d;font-size:12px}
.meta-row span{display:flex;align-items:center;gap:5px}.meta-row .icon{color:#0789f4}
.participant-row{display:flex;align-items:center;gap:8px;margin:17px 0}
.participant-row>a{margin-left:auto;color:#086bea;font-size:13px}
.avatar-stack{display:flex;align-items:center}
.avatar-stack img,.avatar-stack .avatar-plus{width:31px;height:31px;border-radius:50%;border:2px solid #fff;margin-right:-8px;object-fit:cover;box-shadow:0 2px 5px rgba(0,0,0,.08)}
.avatar-stack .avatar-plus{display:grid;place-items:center;margin-right:3px;background:#0e87ed;color:#fff}

.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ticket{position:relative;padding:10px 13px;border:1px solid #d8dde0;border-radius:11px;display:flex;flex-direction:column;gap:2px;cursor:pointer;background:#fff}
.ticket.active{border:1.6px solid #078ef6;background:#ebf8ff;color:#0878eb}
.ticket input{position:absolute;opacity:0}.ticket span{display:flex;align-items:center;gap:5px;color:#7f8589;font-size:12px}.ticket.active span{color:#1889e8}.ticket b{font-size:18px}
.person-row{display:flex;align-items:center;gap:10px}
.person-row>img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 2px 7px rgba(0,0,0,.12)}
.person-row>div{flex:1}.person-row small{display:block;margin-top:3px;color:#8a9094}
.route-img{width:100%;height:285px;object-fit:cover;border-radius:14px}
.timeline{margin-left:7px;border-left:2px dotted #c9d3d8}
.timeline>div{position:relative;padding:0 0 8px 17px}
.timeline>div:before{content:"";position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:#078cf5;box-shadow:0 0 0 2px #fff}
.timeline b{color:#0788f2}.timeline p{margin:3px 0;font-size:14px;line-height:1.43}

.sticky-action,.sticky-pay{position:fixed;z-index:60;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;border-radius:17px 17px 0 0;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);box-shadow:0 -8px 24px rgba(24,76,103,.11)}
.sticky-action>div{flex:1}.sticky-action small{display:block;color:#7e8488}.sticky-action b{display:block;margin-top:3px;color:#075fe9;font-size:20px}.sticky-action .btn{min-width:200px}.sticky-action.two .btn{flex:1;min-width:0}

/* Donation / social */
.donation-stats{display:flex;justify-content:space-between;gap:16px;margin:22px 0 8px}
.donation-stats>div{display:flex;flex-direction:column;gap:3px}.donation-stats>div:last-child{text-align:right}.donation-stats small{font-size:11px;color:#858b90}.donation-stats b{font-size:16px}
.progress{height:8px;margin:8px 0 8px;border-radius:10px;background:#e5edf1;overflow:hidden}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0ba5f5,#1266e9)}
.withdrawal{padding:0 0 12px;margin-top:12px;border-bottom:1px solid var(--line)}
.withdrawal:last-child{border-bottom:0}.withdrawal>.row a{color:#0584f1;font-size:12px}.withdrawal-main{display:grid;grid-template-columns:1fr 40px 1.45fr;align-items:center;margin-top:8px}.withdrawal-main>span{font-size:27px;text-align:center;color:#0a89ef}.withdrawal-main small{display:block;color:#888e92;font-size:11px}.withdrawal-main b{display:block;margin-top:2px;font-size:14px}.withdrawal-main .right{text-align:right}.withdrawal p{margin:9px 0 0;font-size:13px}
.social-sheet{min-height:500px}

/* Shop */
.shop-page{background:#fff}
.shop-search{display:flex;align-items:center;gap:12px;padding:calc(53px + env(safe-area-inset-top)) 12px 10px;background:#fff}
.shop-search .search-box{position:relative;flex:1}.shop-search input{height:40px;border:1px solid #d0dae0;background:#fff}.shop-search>a{width:34px;height:34px;display:grid;place-items:center;color:#31373a;position:relative}.shop-search>a:last-child:after{content:"";position:absolute;right:4px;top:3px;width:6px;height:6px;border-radius:50%;background:#f12832;border:2px solid #fff}
.sticky-chips{padding:5px 12px;border-bottom:1px solid #eef2f4;background:#fff;position:sticky;top:0;z-index:20}
.product-hero{height:392px}
.product-hero>small{position:absolute;left:12px;bottom:16px;padding:5px 10px;border-radius:6px;background:#fff;color:#303336;font-size:12px}
.product-sheet{padding-bottom:100px}.price-big{margin-bottom:17px;color:#075be9;font-size:25px;font-weight:800;letter-spacing:-.4px}
.product-meta{display:grid;grid-template-columns:1.1fr 1fr 1fr;margin:10px 0 22px}.product-meta span{padding-right:8px;border-right:1px solid #edf0f2;color:#8a9093;font-size:10px}.product-meta span:last-child{border:0}.product-meta b{color:#303336;font-size:12px}.product-meta img{float:left;width:28px;height:28px;margin-right:8px;border-radius:50%;object-fit:cover}
.option-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.option-row+.option-row{margin-top:0}.option{height:34px;border:1px solid #d6dadd;border-radius:10px;background:#fff;color:#777d81;cursor:pointer}.option.active{border-color:#0b8ef4;background:#ebf9ff;color:#0789ef}

/* Checkout & payment */
.checkout-bg{min-height:calc(100dvh - 106px);padding:12px;background:#e8f2f6}
.checkout-card,.transaction-card{padding:13px;border-radius:13px;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.6)}
.checkout-card+ .checkout-card{margin-top:10px}.checkout-card>small{display:block;margin-bottom:8px}.checkout-card> b{display:flex;align-items:center;gap:7px;font-size:14px}.checkout-card p{margin:8px 0 0;color:#747b80;font-size:12px;line-height:1.45}
.item-card{display:flex;gap:11px;align-items:center}.item-card img{width:89px;height:89px;border-radius:7px;object-fit:cover}.item-card b{font-size:16px;line-height:1.15}.item-card small{display:block;margin:5px 0 10px;color:#777d81}.item-card strong{font-size:17px}.qty{font-size:16px;font-weight:700}
.summary{padding:14px 0 100px}.summary h3{font-size:15px}.summary>div{display:flex;justify-content:space-between;gap:14px;padding:6px 0;color:#747b80;font-size:12px}.summary>div b{color:#3b3f42;font-weight:500}.summary hr{border:0;border-top:1px solid #d9e0e4}.summary .grand{color:#333;font-size:13px;font-weight:700}.summary .grand b{font-weight:800}
.empty-state{margin-top:12px;padding:34px 20px;border-radius:14px;background:#fff;text-align:center;color:#737a7f}.empty-state .btn{margin-top:16px}
.payment-bg{padding-bottom:30px}.payment-card{padding:13px 12px 11px;border-radius:13px;background:#fff;text-align:center}.payment-card>p:first-child{margin:2px 0 14px;font-size:15px}.payment-card>small{color:#858b90}.payment-card h1{margin:4px 0 13px;font-size:30px}.payment-card img{width:275px;max-width:84%;margin:0 auto}.payment-card p{font-size:14px}.payment-card .btn{border-radius:5px}.demo-paid{margin-top:8px}

/* Transaction */
.transaction-tabs{padding:12px;overflow-x:auto;border-bottom:1px solid #edf1f3}.transaction-tabs .chip{font-size:14px}
.order-list{display:flex;flex-direction:column;gap:8px}.order-card{padding:12px;border-radius:12px;background:#fff}
.order-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}.order-head>span{color:#067de9;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-pill{padding:4px 12px;border-radius:12px;font-size:11px;font-weight:500;background:#eee}.status-pill.success{color:#15942d;background:#e2f7e6}.status-pill.pending{color:#a96e00;background:#fff3d3}.status-pill.processing{color:#087ae8;background:#e8f4ff}.status-pill.cancelled{color:#d33d45;background:#ffe9eb}
.order-product{display:flex;align-items:center;gap:10px;margin:10px 0}.order-product img{width:48px;height:48px;border-radius:4px;object-fit:cover}.order-product b{display:block;font-size:16px;line-height:1.12}.order-product small{display:block;margin-top:3px;color:#80868a}.order-card>small{display:block;font-size:9px;color:#83898d}.order-card>strong{font-size:13px}
.transaction-card h3{margin:0 0 11px;font-size:14px}.transaction-card .row{padding:5px 0;font-size:12px}.transaction-card .row>a{color:#007bee}.transaction-card .row>span{color:#757b80}.transaction-card .grand{font-size:14px}

/* Album */
.album-page{background:#e7f1f6}.album-head{display:flex;align-items:center;justify-content:space-between;padding:calc(52px + env(safe-area-inset-top)) 16px 18px}.album-head>div:last-child{display:flex;gap:10px}.album-head small{color:#767d82;font-size:13px}.album-head h1{margin:3px 0 0;font-size:21px}.album-list{padding:0 16px 16px;display:flex;flex-direction:column;gap:16px}.album-card{padding:12px;border-radius:13px;background:#fff}.collage{height:133px;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;overflow:hidden;border-radius:9px}.collage img{width:100%;height:100%;object-fit:cover}.collage img:first-child{grid-row:1/3}.collage img:nth-child(4),.collage img:nth-child(5){grid-column:auto}.album-card h3{margin:10px 0 8px;font-size:17px}.album-card h3 small{color:#73797e;font-weight:400;font-size:13px;margin-left:4px}.album-card p{margin:0;color:#777d81;font-size:12px;line-height:1.25}
.album-gallery-page{min-height:100dvh;padding:calc(49px + env(safe-area-inset-top)) 16px 90px;background:#e8f2f6}.gallery-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}.gallery-head .icon-btn{margin-left:-4px}.gallery-head b{display:block;font-size:17px}.gallery-head small{display:block;color:#858b90;margin-top:3px}.masonry-gallery{columns:3;column-gap:7px}.masonry-gallery img{width:100%;margin:0 0 7px;border-radius:7px;break-inside:avoid;object-fit:cover}.masonry-gallery img:nth-child(5n+1){height:92px}.masonry-gallery img:nth-child(5n+2){height:110px}.masonry-gallery img:nth-child(5n+3){height:185px}.masonry-gallery img:nth-child(5n+4){height:91px}.masonry-gallery img:nth-child(5n){height:91px}.fab{position:fixed;z-index:30;left:50%;bottom:24px;transform:translateX(-50%);width:68px;height:68px;border:0;border-radius:50%;background:#fff;color:#0788f5;box-shadow:0 8px 24px rgba(25,79,109,.19);display:grid;place-items:center}

/* Welcome */
.welcome-page{min-height:100dvh;padding:calc(56px + env(safe-area-inset-top)) 24px 38px;background:linear-gradient(165deg,#138ef5 0%,#158df5 29%,#d7e9f1 62%,#9bc5f6 100%);display:flex;flex-direction:column}
.welcome-logo-wrap{height:min(40vh,360px);display:flex;align-items:center;justify-content:center}.welcome-logo-wrap img{width:min(92%,360px);max-height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.08))}
.welcome-copy{margin-top:auto}.welcome-copy p{margin:0 0 4px;font-size:20px;font-weight:300}.welcome-copy h1{margin:0;font-size:33px;line-height:1.16;letter-spacing:-.8px}.welcome-copy h1 span{color:#087df2}.welcome-copy>small{display:block;margin-top:19px;color:#6d757a;font-size:12px;line-height:1.5}
.welcome-actions{display:flex;flex-direction:column;gap:12px;margin-top:38px}.welcome-btn{height:56px;border-radius:28px;font-size:16px}.welcome-actions form{width:100%}.join-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;color:#93999d}.join-divider span{height:1px;background:rgba(115,128,137,.22)}.join-divider small{font-size:11px}.welcome-actions>a:last-child{justify-content:center;position:relative}.welcome-actions>a:last-child b{position:absolute;right:92px;font-size:22px;font-weight:400}

/* Onboarding */
.onboarding{min-height:100dvh;padding:calc(51px + env(safe-area-inset-top)) 20px 20px;background:
 radial-gradient(circle at 52% 48%,rgba(181,111,117,.72) 0 9%,rgba(137,142,166,.60) 18%,rgba(108,164,210,.22) 35%,transparent 57%),
 linear-gradient(180deg,#78b9f4 0%,#a8d4f5 40%,#e7f1f5 82%);display:flex;flex-direction:column}
.onboarding:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 50%);pointer-events:none}
.steps{position:relative;z-index:2;display:flex;justify-content:center;gap:8px}.steps i{width:48px;height:4px;border-radius:4px;background:rgba(255,255,255,.34)}.steps i.active{background:#fff}.steps.four i{width:48px}
.onboard-card{position:relative;z-index:2;margin-top:auto;padding:24px;border-radius:23px;background:#fff}.onboard-card.low{margin-top:auto}.onboard-card.mid{margin-top:auto}.onboard-card.form-card{padding:24px}.onboard-card h2{margin:0;font-size:20px;text-align:center}.onboard-card>small,.onboard-card .center-title+small{display:block;color:#8b9195;font-size:10px}.form-card>h2{text-align:left}.form-card>small{text-align:left;margin-bottom:23px}
.center-title{min-height:32px;display:grid;grid-template-columns:32px 1fr 32px;align-items:center;gap:7px}.center-title>h2,.center-title>div h2{text-align:center;font-size:20px}.center-title>div small{display:block;text-align:center;color:#8b9195;font-size:10px}.mini-circle{width:24px;height:24px;border:0;border-radius:50%;background:#e8f1f5;color:#88949b;display:grid;place-items:center}
.onboard-card form{margin-top:20px}.onboard-card form>small{display:block;margin:8px 6px 20px;text-align:center;color:#969ca0;line-height:1.45;font-size:11px}
.field{width:100%;min-height:47px;border:1.4px solid #cbd8df;border-radius:13px;background:#fff;padding:11px 13px;color:#323639;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.field:focus{border-color:#097df0;box-shadow:0 0 0 2px rgba(10,124,239,.08)}textarea.field{min-height:100px;resize:vertical}.form-card label{display:block;margin:12px 0 5px;color:#90969a;font-size:12px}.form-card label:first-of-type{margin-top:20px}.form-card hr{border:0;border-top:1px solid var(--line);margin:18px 0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}.form-card .btn{margin-top:18px}
.otp-inputs{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.otp-inputs input{width:100%;height:47px;border:1.4px solid #cbd8df;border-radius:13px;background:#fff;text-align:center;font-size:21px;outline:none}.otp-inputs input:focus{border-color:#087df2;box-shadow:0 0 0 2px rgba(8,125,242,.08)}.resend-form{margin-top:-12px!important;text-align:center}.resend{color:#8a8f93}
.upload-box{min-height:184px!important;margin:14px 0!important;border:1.5px dashed #b9cbd4;border-radius:13px;color:#6092ab!important;background:#fbfdfe;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;cursor:pointer}.upload-box .icon{color:#5a8fa9}.upload-box b{color:#5c91ab;font-size:15px}.upload-box small{color:#9db3be;font-size:11px}.upload-box input{position:absolute;opacity:0;width:1px;height:1px}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);height:40px;border-radius:20px;background:#e8f2f6;overflow:hidden}.segmented label{margin:0!important;display:grid!important;place-items:center;color:#697277!important;cursor:pointer}.segmented input{display:none}.segmented label:has(input:checked){background:linear-gradient(100deg,#0ca6f6,#1166ed);color:#fff!important}

/* Profile */
.profile-page-v2{padding:calc(53px + env(safe-area-inset-top)) 12px calc(var(--nav-h) + 18px);background:#e8f2f6}
.profile-identity-card{position:relative;padding:8px 12px 14px;border-radius:15px;background:#fff}.profile-blue-cover{height:128px;border-radius:9px;background:linear-gradient(120deg,#0ca7f7,#1264ea)}
.profile-avatar-wrap{position:absolute;left:24px;top:98px;width:90px;height:90px;padding:2px;border-radius:50%;background:#fff}.profile-avatar-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #27373e}
.profile-actions{height:54px;display:flex;justify-content:flex-end;align-items:center;gap:8px}.square-soft{width:37px;height:37px;border-radius:10px;background:#f1f6f8;color:#374248;display:grid;place-items:center}
.membership-badge{width:max-content;max-width:100%;height:25px;margin:3px 0 10px;padding:0 9px;border-radius:12px;background:#eaf8ff;color:#087fe9;display:flex;align-items:center;gap:7px;font-size:11px}.membership-badge img{width:19px;height:19px;object-fit:contain}
.profile-identity-card h1{display:flex;align-items:center;gap:5px;margin:0;font-size:21px;line-height:1.2}.verified{color:#078af3;display:inline-flex}.profile-identity-card>p{margin:3px 0 0;color:#777d82;font-size:12px}.profile-stats{margin-top:10px}.profile-stats>div{border:1px solid #e1e7ea;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.profile-menu-v2{margin-top:12px;padding:7px 20px 12px;border-radius:15px;background:#fff}.profile-menu-v2>a{min-height:45px;display:flex;align-items:center;justify-content:space-between;font-size:16px}.profile-menu-v2>a>span:first-child{display:flex;align-items:center;gap:10px}.profile-menu-v2 .menu-icon{color:#697176}.member-menu-row{gap:5px}.mini-members{display:flex!important;align-items:center;gap:0;font-size:12px}.mini-members i{width:22px;height:22px;margin-right:-6px;border:2px solid #fff;border-radius:50%;overflow:hidden}.mini-members img{width:100%;height:100%;object-fit:cover}.mini-members b{margin-left:8px;font-size:12px;font-weight:500}
.logout-form{margin-top:8px}.logout-form button{width:100%;height:44px;border:0;border-radius:11px;background:#fde9eb;color:#d82d34;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.profile-subpage{background:#e8f2f6}.placeholder-card{margin:14px;padding:20px;border-radius:15px;background:#fff}.placeholder-card h2{margin-top:0}

/* Install banner */
.install-banner{position:fixed;z-index:120;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(398px,calc(100% - 22px));padding:12px 13px;border-radius:15px;background:#fff;box-shadow:var(--shadow-float);display:flex;align-items:center;justify-content:space-between;gap:12px}.install-banner[hidden]{display:none}.install-banner b{display:block}.install-banner small{display:block;margin-top:2px;color:#848a8f}.install-banner button{border:0;border-radius:10px;padding:9px 13px;background:#078af3;color:#fff;font-weight:700}

@media (min-width:700px){
  body{padding:16px 0}.app-shell{min-height:calc(100dvh - 32px);border-radius:28px;box-shadow:0 18px 60px rgba(34,66,83,.18)}
  .bottom-nav,.sticky-action,.sticky-pay{bottom:16px;border-radius:18px;max-width:430px}
  .welcome-page,.onboarding{min-height:calc(100dvh - 32px)}
}

@media (max-width:360px){
  .product-card strong{font-size:15px}.event-card{flex-basis:166px}.community-brand b{font-size:11px}.welcome-copy h1{font-size:29px}.detail-sheet{padding-left:16px;padding-right:16px}
}

/* Form icon helpers */
.field-wrap{position:relative}.field-wrap>.icon{position:absolute;z-index:2;left:14px;top:50%;transform:translateY(-50%);color:#69757b;pointer-events:none}.field-wrap>.field{padding-left:42px}.form-card .field-wrap{margin-top:0}.form-card .field-wrap+.field-wrap{margin-top:0}.section-title h3,.featured-event p,.member-head a{display:flex;align-items:center;gap:4px}.empty-state>.icon{margin:0 auto 5px;color:#9aa6ac}
\n\n/* iOS PWA install guide */\n.modal-open{overflow:hidden}\n.install-modal[hidden]{display:none}\n.install-modal{position:fixed;z-index:220;inset:0;padding:20px;display:flex;align-items:flex-end;justify-content:center;background:rgba(17,28,36,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}\n.install-modal-card{position:relative;width:min(408px,100%);padding:24px 22px calc(22px + env(safe-area-inset-bottom));border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(27,51,65,.28);animation:installSheetIn .2s ease-out}\n.install-modal-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#eef4f7;color:#7c8990;font-size:25px;line-height:1;display:grid;place-items:center}\n.install-app-icon{width:70px;height:70px;margin:2px auto 14px;border-radius:18px;overflow:hidden;box-shadow:0 7px 20px rgba(25,75,108,.15)}\n.install-app-icon img{width:100%;height:100%;object-fit:cover}\n.install-modal-card h3{margin:0;text-align:center;font-size:20px;color:#2f363a}\n.install-modal-card>p{margin:9px 0 15px;text-align:center;color:#727b80;font-size:13px;line-height:1.5}\n.install-modal-card ol{margin:0;padding:0;counter-reset:install-step;list-style:none}\n.install-modal-card li{position:relative;min-height:42px;padding:8px 4px 8px 46px;color:#4f585d;font-size:13px;line-height:1.45}\n.install-modal-card li:before{counter-increment:install-step;content:counter(install-step);position:absolute;left:2px;top:5px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e9f5ff;color:#087ff0;font-weight:800}\n.install-modal-card .install-note{margin:12px 0 18px;padding:10px 12px;border-radius:12px;background:#f4f8fa;text-align:left;font-size:11px}\n.install-modal-card .btn{width:100%}\n@keyframes installSheetIn{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}\n