@import 'tailwindcss';
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lilita+One&family=Outfit:wght@400;500;600;700;800&display=swap');

:root { --ink:#151515; --paper:#f4f2ed; --white:#fff; --line:#c9c6bf; --soft:#e9e6df; --green:#1f8f5f; --green-soft:#dceee4; --amber:#f1b948; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; }
button { color:inherit; font:inherit; }
.review-shell { min-height:100vh; padding:28px 38px 48px; }
.review-header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; max-width:1180px; margin:0 auto 22px; }
.eyebrow,.panel-label { display:block; color:#68645c; font-size:10px; font-weight:800; letter-spacing:1.7px; }
.review-header h1 { margin:5px 0 3px; font-size:34px; letter-spacing:-1.3px; }
.review-header p { margin:0; color:#6d6962; font-size:13px; }
.review-status { border:1px solid var(--line); border-radius:99px; background:#fff; padding:9px 14px; color:#615e58; font-size:11px; font-weight:700; }
.review-status span { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--amber); }
.flow-line { max-width:1180px; margin:0 auto 18px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; gap:14px; color:#5d5952; font-size:11px; }
.flow-line button { border:0; background:transparent; color:#25231f; font-size:11px; font-weight:800; cursor:pointer; }.flow-line i { color:#aaa59c; font-style:normal; }
.workspace { max-width:1180px; min-height:760px; margin:0 auto; display:grid; grid-template-columns:220px 1fr; border:1px solid #aaa69e; border-radius:18px; overflow:hidden; background:#ddd9d1; box-shadow:0 12px 40px rgba(30,28,23,.08); }
.scenario-panel { padding:24px 16px; border-right:1px solid var(--line); background:#faf9f6; }
.group-label { margin-top:22px; }
.scenario-panel>button { width:100%; display:flex; gap:12px; align-items:center; margin-top:10px; padding:13px; border:1px solid transparent; border-radius:10px; background:transparent; text-align:left; cursor:pointer; }
.scenario-panel>button.active { border-color:#aaa69e; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.scenario-panel>button>span { width:30px; height:30px; display:grid; place-items:center; border:1px solid #b5b1aa; border-radius:8px; background:#eeece7; font-size:10px; font-weight:800; }
.scenario-panel button b { display:block; font-size:12px; }.scenario-panel button small { display:block; margin-top:3px; color:#777269; font-size:10px; }
.decision-card { margin-top:28px; padding:16px; border:1px dashed #aaa69e; border-radius:10px; background:#f1efe9; }
.decision-card ul { margin:13px 0 0; padding-left:17px; color:#625e57; font-size:10px; line-height:1.8; }
.stage { min-width:0; display:grid; grid-template-columns:minmax(410px,1fr) 240px; gap:20px; align-items:center; padding:24px; }
.phone { width:390px; height:720px; justify-self:center; position:relative; overflow:hidden; border:3px solid #222; border-radius:36px; background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.phone-top { height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; background:#fff; font-size:9px; font-weight:800; }
.phone-top i { width:72px; height:19px; position:absolute; top:0; left:50%; transform:translateX(-50%); border-radius:0 0 12px 12px; background:#222; }
.app-screen { height:665px; position:relative; overflow:hidden; background:#f5f4f0; }
.appbar { height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid #d4d1ca; background:#fff; }
.appbar b { font-size:13px; }.appbar button { width:30px; height:30px; border:0; background:transparent; font-size:22px; cursor:pointer; }
.scroll-area { height:617px; overflow:auto; padding-bottom:18px; scrollbar-width:none; }.scroll-area::-webkit-scrollbar{display:none}
.state-switch { height:30px; display:flex; align-items:center; justify-content:center; gap:4px; border-bottom:1px solid #d5d2cb; background:#f6f4ef; }.state-switch button { padding:4px 10px; border:0; border-radius:99px; background:transparent; color:#777269; font-size:7px; font-weight:800; cursor:pointer; }.state-switch button.active { background:#222; color:#fff; }.home-scroll { height:587px; }
.campaign-hero { min-height:180px; padding:18px 20px; position:relative; overflow:hidden; border-bottom:1px solid #bcb8b0; background:#e8e6df; }
.campaign-hero::after { content:'GIFT BOX'; position:absolute; right:22px; bottom:19px; width:112px; height:78px; display:grid; place-items:center; border:2px solid #5d5a55; border-radius:8px; background:#f8f7f4; transform:rotate(-3deg); color:#8a867f; font-size:10px; font-weight:800; }
.mini-tag { display:inline-block; padding:5px 7px; border:1px solid #6b6760; border-radius:4px; font-size:8px; font-weight:800; letter-spacing:.6px; }
.campaign-hero h2 { margin:13px 0 5px; font-size:25px; line-height:1; letter-spacing:-.8px; }.campaign-hero h2 strong { color:var(--green); }
.campaign-hero p { width:180px; margin:0; color:#66625c; font-size:10px; line-height:1.4; }
.gift-sketch { position:absolute; right:34px; top:40px; display:flex; gap:5px; color:#8b877f; font-size:19px; }
.pool-card { margin:8px 12px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; border:1px solid #aaa69e; border-radius:10px; background:#fff; }
.pool-card small,.quota-card small,.preview-card small { display:block; color:#777269; font-size:8px; font-weight:800; letter-spacing:.8px; }
.pool-card strong { display:block; margin-top:1px; font-size:24px; letter-spacing:-1px; }.pool-card>span { align-self:start; padding:4px 6px; border-radius:99px; background:var(--green-soft); color:#236646; font-size:7px; font-weight:800; }
.progress { grid-column:1/-1; height:4px; margin-top:6px; overflow:hidden; border-radius:9px; background:#e7e4de; }.progress i { display:block; width:77%; height:100%; background:var(--green); transition:width 2s linear; }
.pool-card p { grid-column:1/-1; margin:7px 0 0; color:#777269; font-size:8px; }.pool-card p b { color:#333; }
.quota-card { margin:0 12px 12px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; border:1px solid #c7c3bb; border-radius:10px; background:#faf9f6; }.quota-card b { display:block; margin-top:4px; font-size:11px; }.quota-card>span { font-size:18px; font-weight:800; }
.primary-actions { padding:0 12px; }.primary-actions button { width:100%; height:42px; margin-bottom:8px; border:1px solid #3c3a36; border-radius:8px; background:#fff; font-size:11px; font-weight:800; cursor:pointer; }.primary-actions .primary { display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:var(--ink); color:#fff; }.primary-actions .primary span { font-size:16px; }
.quota-hint { display:flex; align-items:center; justify-content:space-between; margin:0 2px 7px; color:#6d6962; font-size:8px; }.quota-hint b { color:#2e2c28; font-size:9px; }.quota-hint span { font-size:7px; }
.preview-card { margin:4px 12px 0; padding:12px; border:1px solid #c5c1b9; border-radius:10px; background:#fff; }.preview-card>div { display:flex; gap:11px; align-items:center; }.placeholder-box { width:46px; height:46px; display:grid; place-items:center; border:1px dashed #87837c; border-radius:7px; background:#efede8; color:#55514b; font-weight:800; }.preview-card b { display:block; margin-top:4px; font-size:10px; }.preview-card button { width:100%; margin-top:10px; padding-top:9px; border:0; border-top:1px solid #e2dfd9; background:#fff; color:#3d7259; text-align:left; font-size:9px; font-weight:800; cursor:pointer; }
.sender-note { display:flex; gap:10px; align-items:center; margin:10px 12px; padding:11px; border:1px solid #aaa69e; border-radius:10px; background:#fff; }.sender-note>span { width:37px; height:37px; display:grid; place-items:center; border-radius:50%; background:#ddd9d1; font-size:13px; font-weight:800; }.sender-note p { margin:0; font-size:9px; line-height:1.45; }.sender-note p b { font-size:11px; }
.pool-inline { display:flex; justify-content:space-between; padding:0 14px 10px; color:#69655e; font-size:8px; }.pool-inline span i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); }.pool-inline b { color:#4c4944; }
.category-tabs { display:flex; gap:6px; padding:9px 12px; border-top:1px solid #dad7d0; border-bottom:1px solid #dad7d0; background:#fff; }.category-tabs button { padding:6px 13px; border:1px solid #c1bdb6; border-radius:99px; background:#fff; font-size:9px; cursor:pointer; }.category-tabs button.active { border-color:#222; background:#222; color:#fff; }
.sort-row { display:flex; align-items:center; justify-content:space-between; padding:11px 13px 8px; }.sort-row b { font-size:11px; }.sort-row button { border:0; background:transparent; color:#6b6760; font-size:9px; }
.product-grid { height:427px; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; padding:0 12px 95px; scrollbar-width:none; }.product-grid::-webkit-scrollbar{display:none}.product { min-width:0; position:relative; padding:0 0 9px; overflow:hidden; border:1px solid #c6c2ba; border-radius:9px; background:#fff; text-align:left; cursor:pointer; }.product.selected { outline:2px solid #24231f; outline-offset:-2px; }.product.unavailable { opacity:.62; cursor:not-allowed; }.product-image { height:88px; display:grid; place-items:center; position:relative; background:#e3e0da; }.product-image.violet{background:#e7e3eb}.product-image.orange{background:#eee4d8}.product-image.blue{background:#dfe8e9}.product-image.pink{background:#eadfe1}.product-image.gray{background:#dededb}.product-image.sand{background:#e7e2d7}.product-image>i { color:#8d8982; font-size:8px; font-style:normal; font-weight:800; }.product-image em { position:absolute; left:6px; bottom:6px; padding:3px 5px; border-radius:3px; background:#fff; color:#236646; font-size:7px; font-style:normal; font-weight:900; }.product.unavailable .product-image em { color:#555; }.product>b,.product>small { display:block; margin:7px 8px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.product>b { padding-right:16px; font-size:9px; }.product>small { margin-top:3px; color:#6e6a64; font-size:8px; text-decoration:line-through; }.radio { width:13px; height:13px; position:absolute; right:7px; bottom:17px; border:1px solid #8a867f; border-radius:50%; }.product.selected .radio { border:4px solid #222; }
.sticky-action { position:absolute; right:0; bottom:0; left:0; display:flex; gap:10px; align-items:center; padding:10px 12px 12px; border-top:1px solid #bbb7af; background:rgba(255,255,255,.97); box-shadow:0 -6px 18px rgba(0,0,0,.06); }.sticky-action p { min-width:0; flex:1; margin:0; }.sticky-action p b,.sticky-action p span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.sticky-action p b { font-size:9px; }.sticky-action p span { margin-top:3px; color:#6d6962; font-size:7px; }.sticky-action button { height:38px; padding:0 14px; border:0; border-radius:7px; background:#222; color:#fff; font-size:9px; font-weight:800; cursor:pointer; }
.home-indicator { width:120px; height:4px; position:absolute; bottom:7px; left:50%; transform:translateX(-50%); border-radius:9px; background:#222; }
.home-gift-showcase,.home-card { margin:12px; padding:13px; border:1px solid #aaa69e; border-radius:11px; background:#fff; }
.home-gift-showcase { margin-top:12px; padding-right:0; overflow:hidden; }
.home-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding-right:12px; }.home-section-head small { display:block; color:#5f5b54; font-size:7px; font-weight:800; letter-spacing:.9px; }.home-section-head h3 { margin:3px 0 0; font-size:13px; line-height:1.1; }.home-section-head>button { padding:0; border:0; background:transparent; color:#276849; font-size:8px; font-weight:800; white-space:nowrap; cursor:pointer; }
.home-product-rail { display:flex; gap:7px; margin-top:11px; padding-right:12px; overflow-x:auto; scrollbar-width:none; }.home-product-rail::-webkit-scrollbar{display:none}.home-product-rail>button { width:94px; flex:0 0 94px; padding:0 0 9px; overflow:hidden; border:1px solid #c7c3bb; border-radius:8px; background:#faf9f6; text-align:left; cursor:pointer; }.rail-image { height:76px; display:grid; place-items:center; color:#8a867f; background:#e4e1da; font-size:7px; font-weight:800; }.rail-image.tone-1{background:#eee3d5}.rail-image.tone-2{background:#dde8e7}.rail-image.tone-3{background:#e9dfe2}.rail-image.tone-4{background:#e6e3ee}.home-product-rail b,.home-product-rail small { display:block; margin:7px 7px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-product-rail b { font-size:9px; }.home-product-rail small { margin-top:3px; color:#276849; font-size:7px; font-weight:900; }
.activity-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:11px 0 4px; }.activity-stats div { padding:8px 4px; border-radius:7px; background:#f0eee9; text-align:center; }.activity-stats b,.activity-stats span { display:block; }.activity-stats b { font-size:15px; }.activity-stats span { margin-top:2px; color:#777; font-size:6px; font-weight:800; }
.home-friend { display:flex; align-items:center; gap:8px; min-height:45px; border-bottom:1px solid #ece9e3; }.home-friend:last-child { border-bottom:0; }.home-friend>span { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#e3e0da; font-size:8px; font-weight:800; }.home-friend>div { min-width:0; flex:1; }.home-friend b,.home-friend small { display:block; }.home-friend b { font-size:9px; }.home-friend small { margin-top:2px; color:#777; font-size:7px; }.home-friend em { padding:4px 6px; border-radius:99px; background:#efe8cf; color:#726023; font-size:6px; font-style:normal; font-weight:900; }.home-friend em.ordered { background:#dceee4; color:#246747; }.home-friend em.waiting { background:#e7e5e0; color:#777; }
.home-thanks { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }.home-thanks article { min-height:90px; padding:10px; position:relative; border-radius:6px 12px 9px 10px; background:#efe3aa; transform:rotate(-1deg); }.home-thanks article:nth-child(2) { background:#dceee4; transform:rotate(1deg); }.home-thanks article::after { content:''; position:absolute; right:10px; bottom:-5px; width:13px; height:13px; background:inherit; transform:rotate(45deg); }.home-thanks p { margin:0 0 13px; font-size:8px; font-weight:800; line-height:1.4; }.home-thanks b { position:absolute; left:10px; bottom:9px; font-size:7px; }
.home-milestones { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:11px; }.home-milestones button { min-width:0; padding:9px 3px 8px; border:1px solid #d5d1c9; border-radius:9px; background:#f7f6f2; text-align:center; cursor:pointer; }.home-milestones button.unlocked { border-color:#a7985a; background:#f3ebc8; }.home-milestones span { width:37px; height:37px; display:grid; place-items:center; margin:0 auto 6px; border:1px solid #77736c; border-radius:50%; background:#e5e2db; font-size:18px; }.home-milestones .unlocked span { background:#dceee4; }.home-milestones b,.home-milestones small,.home-milestones em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-milestones b { font-size:8px; }.home-milestones small { margin-top:3px; color:#777; font-size:6px; font-weight:800; }.home-milestones em { margin-top:4px; color:#5f5b54; font-size:6px; font-style:normal; }.next-achievement { margin:10px 0 0; padding:8px; border-radius:7px; background:#f0eee9; color:#777; font-size:8px; line-height:1.35; text-align:center; }.next-achievement b { color:#333; }
.campaign-end { margin:12px; padding:13px; border:1px dashed #aaa69e; border-radius:8px; background:#f0eee9; text-align:center; }.campaign-end b,.campaign-end span { display:block; }.campaign-end b { font-size:9px; }.campaign-end span { margin-top:4px; color:#777; font-size:7px; }
.wa-screen { height:100%; position:relative; overflow:hidden; background:#e8e1d6; }.wa-screen .appbar { background:#f7f7f5; }.wa-encryption { margin:8px auto; width:max-content; padding:4px 8px; border-radius:6px; background:#f4ead3; color:#776f62; font-size:7px; }.wa-chat { height:475px; padding:8px 12px; background:radial-gradient(#d1cbc0 1px, transparent 1px) 0 0 / 14px 14px; }.wa-date { width:max-content; margin:0 auto 16px; padding:5px 8px; border-radius:6px; background:#fff; color:#777; font-size:7px; font-weight:800; }.wa-bubble { width:255px; margin-left:auto; padding:7px; border-radius:9px 0 9px 9px; background:#d9f7c9; box-shadow:0 1px 2px rgba(0,0,0,.15); }.wa-bubble>p { margin:2px 2px 7px; font-size:9px; line-height:1.45; }.link-preview { overflow:hidden; border-radius:6px; background:#f4f2ed; }.link-art { height:88px; display:grid; place-items:center; background:#d8d5ce; color:#817c74; font-size:12px; font-weight:900; letter-spacing:1px; }.link-preview b,.link-preview span,.link-preview small { display:block; margin:6px 8px 0; }.link-preview b { font-size:10px; }.link-preview span { color:#68645d; font-size:8px; line-height:1.35; }.link-preview small { margin:5px 8px 8px; color:#777; font-size:7px; }.wa-bubble time { display:block; margin-top:4px; color:#54856b; font-size:7px; text-align:right; }.wa-bottom { height:48px; display:flex; gap:7px; align-items:center; padding:6px 9px; background:#f5f5f3; }.wa-bottom>span { font-size:22px; }.wa-bottom>div { flex:1; padding:8px 12px; border-radius:99px; background:#fff; color:#999; font-size:9px; }.wa-bottom button { padding:9px 11px; border:0; border-radius:99px; background:#198b5a; color:#fff; font-size:8px; font-weight:800; cursor:pointer; }.wa-rule { position:absolute; right:12px; bottom:12px; left:12px; padding:10px; border:1px solid #aaa69e; border-radius:8px; background:#fff; }.wa-rule b,.wa-rule span { display:block; font-size:8px; }.wa-rule span { margin-top:3px; color:#777269; line-height:1.35; }
.success-background { height:100%; position:relative; overflow:hidden; background:#ece9e2; }.fake-home { filter:grayscale(.2); }.fake-home .campaign-hero { min-height:175px; }.fake-lines { margin:15px; }.fake-lines i { display:block; height:50px; margin-bottom:9px; border:1px solid #aaa; border-radius:10px; background:#fff; }.scrim { position:absolute; inset:48px 0 0; background:rgba(0,0,0,.48); }.success-modal { width:342px; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:18px; border:2px solid #222; border-radius:18px; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.2); text-align:center; }.success-mark { width:42px; height:42px; display:grid; place-items:center; margin:-42px auto 10px; border:2px solid #222; border-radius:50%; background:#dceee4; font-size:22px; font-weight:900; }.success-modal h2 { margin:9px 0 5px; font-size:21px; letter-spacing:-.5px; }.success-modal>p { margin:0 auto; max-width:275px; color:#6d6962; font-size:9px; line-height:1.45; }.deduction-note { margin:11px 0; padding:9px; border-radius:7px; background:#f0eee9; }.deduction-note b,.deduction-note span { display:block; font-size:8px; }.deduction-note span { margin-top:3px; color:#777; }.thanks-box { padding:10px; border:1px dashed #aaa69e; border-radius:8px; text-align:left; }.thanks-box small,.thanks-box b { display:block; }.thanks-box small { color:#777; font-size:7px; font-weight:800; letter-spacing:.6px; }.thanks-box b { margin-top:6px; font-size:9px; }.thanks-box button { margin-top:7px; padding:0; border:0; background:transparent; color:#246747; font-size:8px; font-weight:800; cursor:pointer; }.modal-primary,.modal-secondary { width:100%; height:38px; margin-top:9px; border:1px solid #222; border-radius:7px; font-size:9px; font-weight:800; cursor:pointer; }.modal-primary { background:#222; color:#fff; }.modal-secondary { margin-top:6px; background:#fff; }
.reward-page { height:617px; overflow:auto; padding-bottom:90px; background:#f5f4f0; }.reward-image { height:235px; position:relative; display:grid; place-items:center; background:#e7e3eb; color:#817c74; font-size:10px; font-weight:800; }.reward-image em { position:absolute; left:14px; bottom:13px; padding:6px 8px; border:1px solid #222; border-radius:4px; background:#fff; color:#276849; font-size:8px; font-style:normal; }.reward-copy { padding:16px; }.reward-copy h2 { margin:10px 0 7px; font-size:23px; }.reward-price { display:flex; gap:9px; align-items:center; margin:0; }.reward-price del { color:#777; font-size:10px; }.reward-price strong { color:#246747; font-size:16px; }.reward-info,.order-summary { margin-top:14px; padding:12px; border:1px solid #bbb7af; border-radius:9px; background:#fff; }.reward-info b,.reward-info span { display:block; font-size:9px; }.reward-info span { margin-top:5px; color:#777; }.order-summary p { display:flex; justify-content:space-between; margin:0; padding:6px 0; color:#777; font-size:9px; }.order-summary .total { margin-top:4px; border-top:1px solid #ddd9d1; color:#222; font-weight:800; }.reward-action { position:absolute; right:0; bottom:0; left:0; padding:10px 12px 12px; border-top:1px solid #aaa; background:#fff; }.reward-action button,.full-dark { width:100%; height:40px; border:0; border-radius:7px; background:#222; color:#fff; font-size:9px; font-weight:800; cursor:pointer; }.reward-action span { display:block; margin-top:5px; color:#777; font-size:7px; text-align:center; }
.request-page,.received-page { height:617px; overflow:auto; padding:24px 22px; text-align:center; background:#f5f4f0; }.request-avatar { width:55px; height:55px; display:grid; place-items:center; margin:0 auto 13px; border:2px solid #222; border-radius:50%; background:#ddd9d1; font-size:18px; font-weight:800; }.request-page h2,.received-page h2 { margin:11px 0 7px; font-size:26px; line-height:1.02; }.request-page>p,.received-page>p { margin:0 auto; max-width:285px; color:#6d6962; font-size:10px; line-height:1.5; }.request-card { display:flex; gap:12px; align-items:center; margin:18px 0 13px; padding:13px; border:1px solid #aaa69e; border-radius:10px; background:#fff; text-align:left; }.request-card small,.request-card b,.request-card p { display:block; margin:0; }.request-card small { color:#777; font-size:7px; font-weight:800; }.request-card b { margin-top:4px; font-size:12px; }.request-card p { margin-top:4px; color:#777; font-size:8px; }.rule-stack { margin-bottom:16px; }.rule-stack p { display:flex; gap:10px; align-items:center; margin:0; padding:8px 0; border-bottom:1px solid #ddd9d1; text-align:left; }.rule-stack span { width:22px; height:22px; display:grid; place-items:center; border:1px solid #888; border-radius:50%; font-size:8px; }.rule-stack b { font-size:9px; }.text-link { margin-top:11px; border:0; background:transparent; color:#555; font-size:9px; font-weight:800; cursor:pointer; }
.received-art { width:180px; height:140px; display:grid; place-items:center; margin:7px auto 18px; border:2px solid #77736c; border-radius:13px; background:#e2dfd8; transform:rotate(-2deg); color:#827e76; font-size:12px; font-weight:900; }.single-gift-rule { margin:20px 0; padding:13px; border:1px dashed #969189; border-radius:9px; background:#fff; text-align:left; }.single-gift-rule b,.single-gift-rule span { display:block; font-size:9px; }.single-gift-rule span { margin-top:4px; color:#777; line-height:1.4; }
.center-tabs { height:38px; display:flex; gap:4px; padding:5px 10px; border-bottom:1px solid #ccc; background:#fff; }.center-tabs button { flex:1; border:0; border-radius:6px; background:transparent; color:#777; font-size:8px; font-weight:800; }.center-tabs button.active { background:#222; color:#fff; }.gift-center { height:579px; overflow:auto; padding:12px; scrollbar-width:none; }.center-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.center-summary div { padding:11px 8px; border:1px solid #bbb7af; border-radius:8px; background:#fff; text-align:center; }.center-summary small,.center-summary b { display:block; }.center-summary small { color:#777; font-size:6px; font-weight:800; }.center-summary b { margin-top:4px; font-size:18px; }.achievement { display:flex; gap:10px; align-items:center; margin-top:10px; padding:12px; border:1px solid #aaa69e; border-radius:9px; background:#fff; }.achievement>span { width:42px; height:42px; display:grid; place-items:center; border:1px solid #777; border-radius:50%; background:#eeeae1; font-size:20px; }.achievement>div { flex:1; min-width:0; }.achievement small,.achievement b,.achievement p { display:block; margin:0; }.achievement small { color:#777; font-size:6px; font-weight:800; }.achievement b { margin-top:3px; font-size:9px; }.achievement p { margin-top:3px; color:#777; font-size:7px; }.achievement-line { height:4px; margin-top:7px; border-radius:8px; background:#ddd9d1; }.achievement-line i { display:block; width:34%; height:100%; background:#222; }.gift-center h3 { margin:15px 0 7px; font-size:11px; }.record { display:flex; align-items:center; gap:9px; margin-bottom:6px; padding:9px; border:1px solid #c6c2ba; border-radius:8px; background:#fff; }.record>span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#e4e1db; font-size:9px; font-weight:800; }.record>div { flex:1; }.record b,.record small { display:block; }.record b { font-size:9px; }.record small { margin-top:2px; color:#777; font-size:7px; }.record em { padding:4px 6px; border-radius:99px; background:#efe8cf; color:#726023; font-size:6px; font-style:normal; font-weight:800; }.record em.ordered { background:#dceee4; color:#246747; }.record em.waiting { background:#e7e5e0; color:#777; }.gift-center blockquote { margin:0; padding:12px; border-left:3px solid #222; background:#fff; font-size:10px; font-weight:800; line-height:1.4; }.gift-center blockquote small { display:block; margin-top:6px; color:#777; font-size:7px; font-weight:400; }
.annotation-panel { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:22px; border:1px solid #b6b2aa; border-radius:12px; background:rgba(250,249,246,.75); }.annotation-panel h2 { margin:12px 0 9px; font-size:20px; line-height:1.15; letter-spacing:-.5px; }.annotation-panel>p { margin:0; color:#68645d; font-size:11px; line-height:1.6; }.annotation-panel ol { margin:18px 0 0; padding-left:18px; color:#625e57; font-size:10px; line-height:1.65; }.annotation-panel li+li { margin-top:7px; }.annotation-panel li b { color:#222; }.prototype-note { margin-top:22px; padding:12px; border-left:3px solid var(--green); background:#fff; }.prototype-note b,.prototype-note span { display:block; font-size:9px; }.prototype-note span { margin-top:3px; color:#777269; line-height:1.45; }

/* Home page visual direction follows the earlier 100GiftV3 campaign language. */
body { font-family:"Outfit", Arial, Helvetica, sans-serif; }
.review-header h1,.campaign-hero h2,.home-section-head h3 { font-family:"Lilita One", "Trebuchet MS", sans-serif; font-weight:400; }
.home-screen { background:#ebfff1; }
.home-screen .appbar { background:var(--green); border-bottom:2px solid #087b42; color:#151515; }
.home-screen .appbar b { font-family:"Lilita One", sans-serif; font-size:16px; letter-spacing:-.2px; }
.home-screen .appbar button { width:30px; height:30px; border:2px solid #151515; border-radius:50%; background:#fff; font-weight:800; line-height:1; }
.campaign-hero { min-height:0; padding:0; aspect-ratio:4 / 3; display:grid; place-items:center; border-bottom:0; background:#075c39; color:#151515; }
.campaign-hero { position:relative; z-index:0; }
.home-screen .campaign-hero { min-height:0; aspect-ratio:4 / 3; height:auto; }
.campaign-hero-art { display:block; width:100%; height:100%; object-fit:contain; }
.campaign-hero::before,.campaign-hero::after { display:none; }
.campaign-hero-nav { position:absolute; z-index:3; top:10px; left:12px; right:12px; display:flex; align-items:center; gap:8px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.campaign-hero-nav button { width:22px; height:20px; display:flex; align-items:center; justify-content:center; padding:0 0 3px; border:0; border-radius:0; background:transparent; color:#fff; font-size:20px; line-height:1; opacity:1; cursor:default; pointer-events:none; }
.campaign-hero-nav span { font-size:12px; font-weight:800; letter-spacing:.2px; line-height:1; }
.campaign-hero::before { content:""; position:absolute; width:220px; height:130px; left:-90px; bottom:-75px; border:18px solid rgba(255,255,255,.2); border-radius:50%; transform:rotate(-14deg); }
.campaign-hero::after { content:'100'; right:20px; bottom:18px; width:108px; height:80px; border:3px solid #151515; border-radius:10px 7px 12px 8px; background:var(--amber); color:#151515; font-family:"Anton", sans-serif; font-size:42px; letter-spacing:-1px; box-shadow:5px 6px 0 rgba(0,0,0,.17); }
.campaign-hero h2 { position:relative; z-index:2; margin:15px 0 6px; font-size:30px; line-height:.92; letter-spacing:-.7px; }.campaign-hero h2 strong { color:#fff; text-shadow:2px 2px 0 #087b42; }.campaign-hero p { position:relative; z-index:2; color:#0e4c2f; font-size:10px; font-weight:700; }.campaign-hero .mini-tag { border-color:#151515; background:rgba(255,255,255,.8); }
.gift-sketch { z-index:2; right:44px; top:39px; color:#151515; opacity:.45; }
.home-gift-showcase { margin-top:10px; border:2px solid #151515; border-radius:17px; box-shadow:3px 4px 0 rgba(0,0,0,.1); }.home-gift-showcase .home-section-head h3 { font-size:17px; letter-spacing:-.3px; }.home-gift-showcase .home-section-head small,.home-card .home-section-head small { color:#087b42; }.home-gift-showcase .home-section-head>button,.home-card .home-section-head>button { color:#087b42; }
.home-product-rail>button { border:1px solid #b7d6c0; border-radius:11px; background:#f9fffb; }.rail-image { height:76px; border-bottom:1px solid #d9eadc; }.rail-image img { width:100%; height:100%; display:block; object-fit:contain; padding:7px; mix-blend-mode:multiply; }.home-product-rail b { font-size:9px; }
.home-product-rail { overflow:hidden; animation:none; padding-left:0; mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%); }
.home-product-rail-track { display:flex; gap:7px; width:max-content; animation:gift-rail-loop 24s linear infinite; }
.home-product-rail-track>button { width:94px; flex:0 0 94px; border:0; background:transparent; }
.home-product-rail .rail-image { border-radius:8px; overflow:hidden; }
.home-product-rail .rail-image { height:auto; aspect-ratio:1 / 1; }
.rail-price { display:flex; align-items:center; justify-content:space-between; gap:4px; margin:3px 7px 0; }
.rail-price del { color:#7a817c; font-size:7px; white-space:nowrap; }
.rail-price strong { color:#087b42; font-size:9px; font-weight:900; text-transform:uppercase; }
@keyframes gift-rail-loop { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes v3-button-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.025); } }
.pool-card small { letter-spacing:1.2px; }
.pool-card strong { letter-spacing:2px; }
.pool-card .pool-title { display:block; margin-bottom:3px; color:#191b19; font-family:"Outfit",Arial,sans-serif; font-size:16px; font-weight:700; letter-spacing:-.35px; line-height:1.1; }
.progress { position:relative; height:10px; overflow:hidden; border-radius:999px; background:#dcefe2; box-shadow:inset 0 1px 2px rgba(0,0,0,.08); }
.progress i { position:relative; display:block; height:100%; overflow:hidden; border-radius:inherit; background:linear-gradient(90deg,#087b42,#18df63); transition:width .1s linear; }
.progress i::after { content:""; position:absolute; inset:0 auto 0 -45%; width:42%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:progress-glow 2.6s linear infinite; }
@keyframes progress-glow { to { transform:translateX(360%) skewX(-18deg); } }
.pool-card .pool-ticker { grid-column:1/-1; height:28px; overflow:hidden; position:relative; margin-top:6px; mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 76%,transparent 100%); }
.pool-card .pool-ticker-track { animation:pool-ticker-scroll 22s linear infinite; }
.pool-card .pool-ticker p { height:22px; display:flex; align-items:center; margin:0; color:#777269; font-size:12px; line-height:22px; white-space:nowrap; }
@keyframes pool-ticker-scroll { from { transform:translateY(0); } to { transform:translateY(-220px); } }
.pool-card { border:2px solid #151515; box-shadow:3px 4px 0 rgba(0,0,0,.1); }.pool-card strong { font-family:"Anton", sans-serif; color:#087b42; font-weight:400; }.pool-card>span { background:#d8ffe5; border:1px solid #9ad0a9; }
.primary-actions .primary { background:#151515; box-shadow:0 4px 0 #087b42; }.primary-actions button { border-width:2px; }.quota-hint b { color:#087b42; }
.home-card { border:2px solid #151515; border-radius:17px; box-shadow:3px 4px 0 rgba(0,0,0,.1); }.home-card .home-section-head { margin-bottom:12px; }.home-card .home-section-head h3 { font-size:20px; line-height:1.1; letter-spacing:-.45px; }
.home-milestones b { font-size:11px; line-height:1.1; }.home-milestones small { font-size:7px; }.home-milestones em { font-size:7px; }
.home-card .home-section-head h3 { font-family:"Outfit", Arial, sans-serif; font-size:16px; font-weight:700; line-height:1.1; letter-spacing:-.35px; color:#191b19; }
.home-gift-showcase,.home-card { margin-left:14px; margin-right:14px; }
.home-card { padding:18px 16px; border:1px solid rgba(11,92,46,.08); border-radius:22px; box-shadow:none; }
.home-gift-showcase { position:relative; z-index:2; margin-top:12px; padding:16px 0; border:1px solid rgba(11,92,46,.08); border-radius:22px; box-shadow:none; background:#fff; }
.gift-box-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px 0 12px; margin-bottom:12px; }
.gift-box-head h3 { margin:0; color:#191b19; font-family:"Outfit",Arial,sans-serif; font-size:16px; font-weight:700; line-height:1.1; letter-spacing:-.35px; }
.gift-box-subtitle { display:inline-block; margin:6px 0 0; padding:5px 10px; border-radius:0 8px 8px 8px; background:#17DF64; color:#fff; font-size:12px; font-weight:800; line-height:1.1; }
.choose-free-tag { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#17DF64; color:#fff; font-size:9px; font-weight:800; white-space:nowrap; }
.pool-card { margin-left:14px; margin-right:14px; border:1px solid rgba(11,92,46,.08); border-radius:22px; box-shadow:none; }
.home-scroll > .pool-card { margin-top:-22px; }
.home-scroll > .pool-card { position:relative; z-index:1; }
.primary-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-left:14px; padding-right:14px; }
.primary-actions button { min-height:50px; height:auto; margin-bottom:0; border-radius:16px; padding:0 12px; font-size:12px; }
.primary-actions .primary { grid-column:auto; }
.primary-actions .quota-hint { grid-column:1/-1; }
.home-friend { min-height:64px; }
.home-friend b { font-size:13px; font-weight:800; }.home-friend small { font-size:10px; }.home-friend em { font-size:10px; }
.activity-stats b { font-size:18px; }.activity-stats span { font-size:11px; }
.home-thanks article { min-height:130px; }.home-thanks p { font-size:13px; font-weight:700; }.home-thanks b { font-size:10px; }
.home-milestones button { padding-top:12px; padding-bottom:10px; }.home-milestones span { width:52px; height:52px; font-size:23px; }.home-milestones b { font-size:11px; font-weight:700; }.home-milestones small { font-size:9px; }.home-milestones em { font-size:10px; }
.home-milestones button { border-radius:12px; }.home-milestones button.unlocked { border-color:#d2a919; background:#fff4bd; }.home-milestones span { border:2px solid #151515; background:#e5e2db; }.home-milestones .unlocked span { background:var(--amber); }
.campaign-end { margin:14px; padding:14px 16px; border:1px solid #b7e2c4; border-radius:14px; background:#effbf2; color:#191b19; text-align:left; }
.campaign-end::before,.campaign-end::after { display:none; }
.campaign-end small { display:block; margin-bottom:5px; color:#087b42; font-size:9px; font-weight:700; letter-spacing:.5px; }
.campaign-end b { display:block; font-family:"Outfit",Arial,sans-serif; font-size:16px; font-weight:700; letter-spacing:-.2px; line-height:1.15; }
.campaign-end span { display:block; max-width:245px; margin-top:5px; color:#66736a; font-size:10px; font-weight:500; line-height:1.35; }
.review-shell { min-height:100vh; padding:0; background:var(--green); }
.review-header,.flow-line,.scenario-panel,.annotation-panel { display:none; }
.workspace { width:390px; max-width:100vw; min-height:100vh; margin:0 auto; display:block; border:0; border-radius:0; background:#fff; box-shadow:none; }
.stage { display:block; padding:0; }
.phone { width:390px; max-width:100vw; min-height:100vh; height:auto; justify-self:auto; border:0; border-radius:0; box-shadow:none; }
.phone-top { height:28px; }
.phone-top { display:none; }
.review-shell { background:#eff4f0; }
.app-screen { min-height:100vh; height:auto; background:#18df63; }
.home-scroll { height:100vh; min-height:587px; background:radial-gradient(circle at 84% 14%, rgba(255,255,255,.22) 0 2px, transparent 3px) 0 0 / 13px 13px, #18df63; }
.onboarding-backdrop { position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(9,45,28,.62); backdrop-filter:blur(5px); }
.onboarding-modal { width:100%; max-width:318px; overflow:hidden; border:2px solid #191b19; border-radius:22px; background:#fff; box-shadow:0 16px 36px rgba(0,0,0,.28); }
.onboarding-title { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 15px 5px; text-align:center; }
.onboarding-title h2 { width:100%; margin:0; color:#191b19; font-family:"Outfit",Arial,sans-serif; font-size:18px; font-weight:800; line-height:1.08; letter-spacing:-.4px; text-align:center; }
.onboarding-step { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#17DF64; color:#fff; font-size:10px; font-weight:800; }
.onboarding-image { display:block; width:100%; aspect-ratio:1 / 1; height:auto; object-fit:contain; object-position:center; background:#18df64; }
.onboarding-copy { margin:0; padding:9px 15px 5px; color:#4b554e; font-size:13px; font-weight:600; line-height:1.3; text-align:center; }
.onboarding-primary { width:calc(100% - 30px); height:42px; margin:9px 15px 15px; border:0; border-radius:13px; background:#191b19; color:#fff; font-size:14px; font-weight:800; cursor:pointer; box-shadow:0 3px 0 #087b42; }
.v3-share-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:0 16px; margin-bottom:16px; position:relative; z-index:3; align-items:start; }
.v3-share-actions .share-col { min-width:0; text-align:center; }
.v3-share-actions .share-col .share-btn { width:100%; }
.v3-card .quota-under-stat { display:block; margin-top:5px; color:#087b42; font-size:10px; font-weight:700; line-height:1.1; white-space:nowrap; }
.v3-share-actions .share-btn { min-height:44px; height:auto; margin:0; border-radius:14px; border:2px solid #191b19; padding:0 10px; font-size:12px; font-weight:800; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; animation:v3-button-breathe 2.4s ease-in-out infinite; }
.v3-share-actions .share-btn.primary { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#191b19; color:#fff; box-shadow:0 4px 0 rgba(0,0,0,.16); }
.v3-share-actions .share-btn.secondary { background:#fff; color:#191b19; box-shadow:0 4px 0 rgba(0,0,0,.1); }
.v3-share-actions .whatsapp-logo { display:block; width:24px; height:24px; margin:0; padding:4px; border-radius:50%; background:#25d366; }
.v3-share-actions .whatsapp-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.v3-card { margin:0 14px 12px; padding:18px 16px; border:1px solid rgba(11,92,46,.08); border-radius:22px; background:#fff; box-shadow:none; }
.v3-card .section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.v3-card .section-kicker,.v3-card .activity-card-head .section-kicker { margin-bottom:2px; color:#191b19; font-size:16px; font-weight:700; letter-spacing:-.35px; line-height:1.1; text-transform:none; }
.v3-card .section-head h2,.v3-card .activity-card-head h2 { margin:3px 0 0; color:#087b42; font-size:10px; font-weight:800; letter-spacing:1.2px; line-height:1.2; text-transform:uppercase; }
.v3-card .activity-card-head { padding-bottom:0; }
.v3-card .pool-stats { display:flex; gap:18px; margin-top:14px; padding:0; border:0; }
.v3-card .stat { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:1; padding:0; border:0; background:transparent; white-space:normal; text-align:center; }
.v3-card .stat + .stat { padding-left:18px; border-left:1px solid #e1e7e2; }
.v3-card .stat b { color:#087b42; font-family:"Lilita One",sans-serif; font-size:22px; line-height:1; }
.v3-card .stat span { color:#666d68; font-size:10px; line-height:1.2; }
.v3-card .friend-list { display:grid; gap:2px; margin-top:16px; }
.v3-card .friend { display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; min-height:64px; border-bottom:1px solid #edf1ee; }
.v3-card .friend:last-child { border-bottom:0; }
.v3-card .friend-name { font-size:13px; font-weight:800; }
.v3-card .friend-name-row { display:flex; align-items:center; gap:7px; min-width:0; }
.v3-card .friend-meta { margin-top:2px; color:#6b746d; font-size:10px; }
.v3-card .status { padding:5px 8px; border-radius:7px 7px 7px 2px; font-size:10px; font-weight:800; }
.v3-card .status.used { background:#d8ffe2; color:#08743e; }
.v3-card .status.claimed { background:#fff1be; color:#8b6500; }
.v3-card .remind { border:0; border-radius:9px; padding:7px 9px; background:#edfff2; color:#087b42; font-size:10px; font-weight:800; }
.thanks-wall { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.thanks-note { min-height:130px; padding:13px; position:relative; border-radius:7px 16px 12px 14px; background:#ffe277; transform:rotate(-1deg); }
.thanks-note:nth-child(2) { background:#d7ffe2; transform:rotate(1deg); }
.thanks-note::after { content:""; position:absolute; right:12px; bottom:-7px; width:18px; height:18px; background:inherit; transform:rotate(45deg); }
.thanks-note p { margin:0 0 17px; font-size:13px; font-weight:700; line-height:1.3; }
.thanks-from { font-size:10px; font-weight:800; }
.milestones { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; position:relative; }
.milestone { min-width:0; padding:12px 3px 10px; border:1px solid #e2e9e4; border-radius:16px; background:linear-gradient(180deg,#fff,#f2f6f3); color:inherit; font:inherit; text-align:center; cursor:pointer; }
.milestone.unlocked { border-color:#f0c944; background:linear-gradient(180deg,#fff9da,#fff4b9); box-shadow:inset 0 0 0 2px rgba(255,255,255,.65); }
.badge-image-wrap { width:92px; height:92px; margin:0 auto 10px; position:relative; border-radius:50%; background:#f7f8f7; box-shadow:0 7px 12px rgba(30,55,38,.18); }
.badge-image-wrap img { width:100%; height:100%; display:block; border:2px solid #fff; border-radius:50%; object-fit:cover; }
.milestone:not(.unlocked) .badge-image-wrap img { filter:grayscale(.78); opacity:.64; }
.badge-level { display:block; margin:3px 0 2px; color:#6b746d; font-size:9px; font-weight:800; letter-spacing:.6px; }
.milestone b { display:block; font-size:11px; }
.milestone span { color:#6b746d; font-size:10px; }
.next-title { margin:16px 0 0; padding:10px 12px; border-radius:12px; background:#f3f6f4; text-align:center; color:#6b746d; font-size:13px; }
.next-title strong { color:#191b19; }
@media (max-width:1050px){.stage{grid-template-columns:1fr}.annotation-panel{display:none}.workspace{grid-template-columns:210px 1fr}}
@media (max-width:720px){.review-shell{padding:16px 0}.review-header,.flow-line{margin-left:16px;margin-right:16px}.review-header{align-items:flex-start}.review-status{display:none}.flow-line{justify-content:flex-start;overflow:auto}.workspace{display:block;border-right:0;border-left:0;border-radius:0}.scenario-panel{display:flex;gap:7px;overflow:auto;padding:10px;border-right:0;border-bottom:1px solid var(--line)}.scenario-panel>.panel-label,.decision-card{display:none}.scenario-panel>button{min-width:145px;margin:0}.stage{padding:16px 0}.phone{width:min(390px,100vw);border-right:0;border-left:0;border-radius:0}}