:root{color-scheme:dark;--bg:#111216;--side:#15161c;--surface:#1b1d25;--surface-hover:#232630;--field:#15171e;--text:#f3f4f8;--muted:#9da4b5;--faint:#727b90;--line:#2b2e3a;--soft-line:rgba(255,255,255,.055);--accent:#9c87ff;--accent-solid:#7859ed;--accent-soft:#29233e;--green:#7cdbb5;--shadow:0 14px 40px #0002;--focus:#ad9bff;--danger:#ff9dab;--header:rgba(17,18,22,.93)}
:root[data-theme=light]{color-scheme:light;--bg:#f4f5f9;--side:#fff;--surface:#fff;--surface-hover:#f4f3fa;--field:#f7f8fb;--text:#171a28;--muted:#616b81;--faint:#7d8698;--line:#e0e3ed;--soft-line:rgba(23,26,40,.07);--accent:#6546cc;--accent-solid:#704be7;--accent-soft:#efebfc;--green:#16765a;--shadow:0 12px 38px #20244808;--focus:#7654e0;--danger:#b32542;--header:rgba(244,245,249,.94)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 Inter,'Noto Sans Khmer',sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}button{border:0}p,h1,h2,h3{margin:0}img{display:block}svg{display:block;width:20px;height:20px;flex:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:4px}input,select,textarea{min-width:0}button{transition:background .18s,box-shadow .18s,border-color .18s,color .18s}button:hover:not(:disabled){filter:brightness(1.06)}[hidden]{display:none!important}::-webkit-scrollbar{width:6px;height:4px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px}.skip-link{position:fixed;top:-90px;left:12px;z-index:300;background:var(--surface);padding:12px}.skip-link:focus{top:12px}.app-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}.sidebar{height:100dvh;position:sticky;top:0;background:var(--side);padding:30px 18px 18px;border-right:1px solid var(--soft-line);display:flex;flex-direction:column}.wordmark{display:flex;gap:11px;align-items:center;padding:0 12px;margin-bottom:42px}.wordmark-mark{font:800 italic 33px/1 Inter,sans-serif;color:#fff;background:linear-gradient(145deg,#9276ff,#5e49cb);width:37px;height:37px;border-radius:12px;display:grid;place-items:center;padding-right:4px}.wordmark strong{font-size:24px;letter-spacing:-1px}.wordmark strong span{color:var(--accent)}.side-caption{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:var(--faint);padding:0 14px 12px}.desktop-nav{display:grid;gap:7px}.nav-link{display:flex;align-items:center;gap:13px;padding:14px 14px;border-radius:11px;color:var(--muted);font-size:14px;line-height:1.4}.nav-link svg{width:20px;height:20px}.nav-link.active{color:var(--text);background:var(--accent-soft)}.nav-link.active svg{color:var(--accent)}.nav-link.active:after{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:auto}.nav-link:hover{background:var(--surface-hover);color:var(--text)}.sidebar-bottom{margin-top:auto;padding-top:28px}.help-note{padding:18px 14px 22px;border-top:1px solid var(--soft-line)}.help-symbol{color:var(--accent);display:block;margin-bottom:10px}.help-note b{font-size:13px}.help-note p{font-size:12px;line-height:1.9;margin-top:6px;color:var(--muted)}.text-link{background:transparent;color:var(--accent);display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:10px 0 0}.text-link svg{width:15px;height:15px}.side-version{display:flex;align-items:center;gap:7px;padding:14px 12px 0;border-top:1px solid var(--soft-line);font-size:9px;letter-spacing:1px;color:var(--faint)}.side-version span:last-child{margin-left:auto}.status-dot{width:5px;height:5px;background:var(--accent);border-radius:50%}.main-shell{min-width:0}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:var(--header);border-bottom:1px solid var(--soft-line);gap:20px;position:sticky;top:0;z-index:30;backdrop-filter:blur(18px)}.top-left{display:flex;gap:16px;align-items:center;font-size:13px}.desktop-breadcrumb{color:var(--faint);display:flex;gap:20px}.breadcrumb-slash{opacity:.55}.top-left b{font-weight:500;color:var(--muted)}.top-actions{display:flex;gap:10px;align-items:center}.balance-pill{display:flex;align-items:center;gap:10px;margin-right:12px}.balance-icon{color:var(--accent);background:var(--accent-soft);width:36px;height:36px;border-radius:11px;display:grid;place-items:center}.balance-icon svg{width:18px}.balance-pill small{font-size:10px;color:var(--muted);display:block}.balance-pill b{font-size:15px;line-height:1.2;font-variant-numeric:tabular-nums}.icon-button,.language-button{border:1px solid var(--line);background:transparent;min-width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:600}.icon-button svg{width:17px;height:17px}.avatar{background:#39364c;color:#dcd5ff;border:2px solid #514664;width:36px;height:36px;border-radius:50%;font-size:11px;display:grid;place-items:center;margin-left:7px}.mobile-wordmark{display:none}main{max-width:1600px;padding:32px 34px 48px;margin:auto;outline:0}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:27px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--accent);text-transform:uppercase;display:flex;align-items:center;gap:7px;margin-bottom:10px}.eyebrow i{width:18px;height:1px;background:var(--accent)}h1{font-size:32px;line-height:1.4;letter-spacing:-.9px;font-weight:700}.page-intro p{color:var(--muted);font-size:13px;margin-top:6px;line-height:1.8}.preview-tag{font-size:11px;white-space:nowrap;color:var(--muted);border:1px solid var(--line);border-radius:30px;padding:7px 11px;display:flex;gap:6px;align-items:center}.preview-tag svg{width:13px;height:13px;color:var(--accent)}.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:24px;align-items:start}.composer{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);min-width:0;position:relative}.composer-head{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:12px;border-bottom:1px solid var(--soft-line)}.composer-title{display:flex;align-items:center;gap:10px}.composer-title h2{font-size:17px;font-weight:600}.composer-title svg{width:19px;color:var(--accent)}.reset-button{font-size:12px;color:var(--muted);background:transparent;display:flex;gap:6px;align-items:center;padding:8px 0}.reset-button svg{width:14px;height:14px}.composer-body{padding:22px 24px 24px}.section-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:13px}.step-num{display:grid;place-items:center;width:20px;height:20px;background:var(--accent-soft);color:var(--accent);border-radius:6px;font:600 10px Inter,sans-serif}.platform-pills{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:25px}.platform-pill{min-width:0;background:transparent;border:1px solid transparent;border-radius:13px;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center;height:84px;padding:8px 3px;color:var(--muted);font-size:11px}.platform-pill img{width:37px;height:37px;object-fit:contain;animation:none!important;filter:none!important}.platform-pill.active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--text)}.platform-pill:hover{background:var(--surface-hover)}.field{margin-top:19px;min-width:0}.field-label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;line-height:1.5}.field-label b,.field-label label{font-weight:500;font-size:13px}.field-label small,.field-label span{font-size:11px;color:var(--muted)}.service-field{margin-top:0}.select-wrap{position:relative}.service-select{width:100%;background:var(--field);border:1px solid var(--line);border-radius:12px;min-height:60px;padding:11px 13px;display:flex;align-items:center;gap:11px;text-align:left}.service-select .social-icon{width:29px;height:29px}.service-selected-copy{flex:1;min-width:0}.service-selected-copy b{display:block;font-size:13px;font-weight:600}.service-selected-copy small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.service-select>svg{width:16px;height:16px;color:var(--muted)}.select-dropdown{position:absolute;left:0;right:0;top:calc(100% + 6px);padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 50px #0006;z-index:45;max-height:320px;overflow:auto}.service-option{width:100%;border-radius:9px;padding:11px 9px;display:flex;align-items:center;gap:10px;background:transparent;text-align:left}.service-option[aria-selected=true]{background:var(--accent-soft)}.service-option:hover{background:var(--surface-hover)}.service-option .social-icon{width:27px;height:27px}.service-option .option-copy{flex:1;min-width:0}.service-option b{display:block;font-size:13px;font-weight:500}.service-option small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.service-option>strong{color:var(--accent);font-size:13px;font-weight:600}.social-icon{width:30px;height:30px;object-fit:contain;flex:none;filter:none!important;animation:none!important;mix-blend-mode:normal}.service-facts{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:11px;margin-top:11px;color:var(--muted)}.service-facts svg{width:13px;height:13px}.service-facts span{display:inline-flex;align-items:center;gap:4px}.service-facts .positive{color:var(--green)}.fact-sep{width:3px;height:3px;border-radius:50%;background:var(--faint);opacity:.6}.form-divider{height:1px;background:var(--soft-line);margin:22px 0 0}.input-box{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;background:var(--field);padding:0 13px;min-height:50px}.input-box:focus-within,.service-select[aria-expanded=true]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}.input-box>svg{width:17px;height:17px;color:var(--faint)}.input-box input{background:transparent;color:var(--text);border:0;outline:0!important;min-width:0;width:100%;padding:14px 0;font-size:14px}.input-box input::placeholder{color:var(--faint)}.quantity-control{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;min-height:50px;border:1px solid var(--line);background:var(--field);border-radius:11px;overflow:hidden}.quantity-control button{display:grid;place-items:center;background:transparent;color:var(--muted)}.quantity-control button svg{width:16px;height:16px}.quantity-control input{border:0;outline:0;background:transparent;color:var(--text);width:100%;text-align:center;font-size:17px;font-weight:600;letter-spacing:.4px;font-variant-numeric:tabular-nums}.package-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}.package-button{background:transparent;border:1px solid var(--line);border-radius:10px;padding:9px 3px;color:var(--muted)}.package-button b{display:block;font-size:12px;font-weight:600}.package-button small{display:block;font-size:10px;margin-top:2px;color:var(--faint)}.package-button.active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--text)}.package-button.active small{color:var(--accent)}.quantity-foot{display:flex;justify-content:space-between;align-items:center;color:var(--faint);font-size:10px;margin-top:9px}.max-link{color:var(--accent);background:transparent;font-size:11px;padding:0}.inline-error{font-size:11px;color:var(--danger);margin-top:7px;line-height:1.7}.checkout-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--soft-line);margin-top:23px;padding-top:22px}.total-copy small{display:block;color:var(--muted);font-size:11px}.total-copy strong{display:block;font-size:30px;line-height:1.35;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}.primary-button{height:49px;border-radius:11px;padding:0 20px;background:linear-gradient(125deg,#8867f3,#6e50db);color:#fff;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 6px 18px #7354e922}.primary-button svg{width:16px;height:16px}.order-note{display:flex;gap:5px;align-items:center;justify-content:center;color:var(--faint);font-size:10px;margin-top:14px;text-align:center;line-height:1.7}.order-note svg{width:12px;height:12px}.right-column{min-width:0}.right-heading{display:flex;align-items:center;justify-content:space-between;margin:4px 0 16px}.right-heading h2{font-size:16px;font-weight:600}.right-heading a{font-size:11px;color:var(--accent)}.recommendations{display:grid;gap:13px}.product-card{border:1px solid var(--line);border-radius:17px;background:var(--surface);padding:19px;position:relative;overflow:hidden}.product-card.featured{background:radial-gradient(ellipse at 120% -10%,#584ab14d,transparent 60%),var(--surface)}.product-top{display:flex;align-items:center;gap:11px;margin-bottom:17px}.product-top .social-icon{width:39px;height:39px}.product-top small{display:block;font-size:10px;color:var(--muted);margin-bottom:1px}.product-top h3{font-size:14px;font-weight:600;line-height:1.5}.product-description{font-size:12px;line-height:1.8;color:var(--muted);min-height:22px;margin-bottom:16px}.product-buy{display:flex;justify-content:space-between;align-items:end}.product-price small{font-size:10px;color:var(--faint);display:block}.product-price strong{font-size:23px;font-weight:600;letter-spacing:-.6px}.product-price strong>span{font-size:11px;letter-spacing:0;color:var(--muted);font-weight:400;margin-left:4px}.pick-button{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}.pick-button svg{width:17px;height:17px}.product-bottom{margin-top:16px;padding-top:12px;border-top:1px solid var(--soft-line);font-size:10px;display:flex;align-items:center;gap:6px;color:var(--muted)}.product-bottom svg{width:12px;height:12px;color:var(--green)}.tip-box{display:flex;gap:10px;padding:19px 3px;color:var(--muted);font-size:11px;line-height:1.9}.tip-box>svg{color:var(--accent);width:17px;height:17px;margin-top:4px}.tip-box b{font-size:12px;color:var(--text);font-weight:500;display:block;margin-bottom:4px}.page-foot{display:flex;justify-content:space-between;gap:15px;margin-top:29px;color:var(--faint);font-size:10px}.page-foot a{color:var(--muted)}
/* Catalogue, history, wallet and preferences keep the original five-page workflow. */
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:21px}.search-box{max-width:380px;width:100%;height:47px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:0 13px;background:var(--surface)}.search-box svg{color:var(--faint);width:17px;height:17px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.catalog-count{font-size:12px;color:var(--muted)}.category-panel{display:flex;gap:7px;overflow:auto;margin-bottom:23px;padding-bottom:4px;scrollbar-width:thin}.category-button{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px 13px;display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.category-button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.category-button .social-icon{width:25px;height:25px}.category-button .count{font-size:10px;color:var(--faint);padding-left:2px}.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.catalog-grid .product-card{padding:16px}.catalog-grid .product-top{gap:8px;margin-bottom:13px}.catalog-grid .product-top h3{font-size:13px}.catalog-grid .product-top .social-icon{width:31px;height:31px}.catalog-grid .product-description{font-size:11px}.catalog-grid .product-price strong{font-size:22px}.catalog-grid .product-bottom{font-size:10px}.order-panel{position:sticky;top:105px}.order-panel .composer-head{padding:0 18px;height:63px}.order-panel .composer-title h2{font-size:15px}.order-panel .composer-body{padding:18px}.order-panel .primary-button{font-size:12px;padding:0 12px}.order-panel .checkout-bar{gap:8px}.order-panel .total-copy strong{font-size:26px}.selected-preview{display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid var(--soft-line)}.selected-preview .social-icon{width:34px;height:34px}.selected-preview b{display:block;font-size:13px}.selected-preview small{color:var(--muted);font-size:11px}.sheet-close{display:none}.empty{padding:35px 20px;text-align:center;border:1px dashed var(--line);border-radius:15px;color:var(--muted);font-size:13px;grid-column:1/-1}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:25px}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:21px}.stat-card small{display:block;font-size:12px;color:var(--muted)}.stat-card strong{display:block;font-size:27px;margin-top:7px;letter-spacing:-.6px}.history-card{border:1px solid var(--line);border-radius:17px;background:var(--surface);overflow:hidden}.history-title{display:flex;justify-content:space-between;align-items:center;padding:21px 22px;border-bottom:1px solid var(--soft-line)}.history-title h2{font-size:16px;font-weight:600}.history-title span{font-size:11px;color:var(--muted)}.history-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 80px 110px;align-items:center;gap:15px;padding:19px 22px;border-bottom:1px solid var(--soft-line)}.history-row:last-child{border:0}.history-service{display:flex;gap:12px;align-items:center;min-width:0}.history-service .social-icon{width:29px;height:29px}.history-service b{font-size:13px;display:block;font-weight:500}.history-service small,.history-cell small{font-size:10px;display:block;color:var(--muted);margin-top:3px}.history-cell b{font-size:13px;font-weight:500}.status{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--green);white-space:nowrap}.status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.status.processing{color:var(--accent)}.two-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.panel{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px}.panel h2{font-size:17px;font-weight:600}.panel>p{font-size:12px;color:var(--muted);margin:8px 0 16px;line-height:1.9}.wallet-card{background:radial-gradient(ellipse at 100% 0,#6854b533,transparent 65%),var(--surface)}.wallet-card .wallet-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.wallet-card h2{font-size:43px;letter-spacing:-1.3px;margin:18px 0 25px;line-height:1.4}.wallet-card .primary-button{font-size:13px}.wallet-card .order-note{justify-content:start}.amount-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:20px 0}.amount-button{padding:13px 4px;border:1px solid var(--line);border-radius:10px;background:var(--field);font-size:13px}.amount-button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.activity-row{display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--soft-line);padding:18px 0}.activity-row:last-child{border-bottom:0}.activity-row b{font-size:13px;font-weight:500}.activity-row small{font-size:11px;color:var(--muted);display:block;margin-top:3px}.activity-row strong{font-size:14px;font-weight:500;color:var(--green)}.activity-row .unavailable{color:var(--muted);font-size:11px;border:1px solid var(--line);padding:4px 8px;border-radius:20px}.profile-heading{display:flex;gap:13px;align-items:center;margin-bottom:22px}.profile-heading .avatar{width:48px;height:48px;font-size:14px;margin:0}.profile-heading h2{font-size:19px}.profile-heading p{font-size:12px;color:var(--muted)}.setting-row{width:100%;padding:18px 0;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--soft-line);background:transparent;text-align:left}.setting-row:last-child{border:0}.setting-row>svg{color:var(--accent);width:19px;height:19px}.setting-copy{flex:1}.setting-copy b{font-size:13px;display:block;font-weight:500}.setting-copy small{font-size:11px;color:var(--muted);display:block;margin-top:3px}.setting-value{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.setting-value svg{width:15px;height:15px}.review-dialog{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:20px;padding:0;max-width:480px;width:calc(100% - 32px);max-height:calc(100dvh - 40px);box-shadow:0 25px 100px #0008}.review-dialog::backdrop{background:#05060bc4;backdrop-filter:blur(6px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--soft-line)}.dialog-head h2{font-size:19px}.dialog-head button{background:transparent;color:var(--muted);padding:3px}.dialog-content{padding:23px 24px}.dialog-content .selected-preview{margin-bottom:15px}.review-line{display:flex;gap:15px;justify-content:space-between;font-size:13px;padding:10px 0}.review-line span{color:var(--muted)}.review-line b{font-weight:500}.review-link{color:var(--faint);background:var(--field);border-radius:9px;padding:10px 12px;font-size:11px;overflow-wrap:anywhere;margin:10px 0}.dialog-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:14px}.dialog-total strong{font-size:29px;letter-spacing:-.7px}.dialog-content .primary-button{width:100%;margin-top:21px}.guide-text p{font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:15px}.guide-text h3{font-size:14px;font-weight:600;margin-bottom:8px}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px 19px;max-width:calc(100% - 24px);min-width:240px;font-size:12px}.toast svg{color:var(--green);width:17px;height:17px}.toast b{display:block;font-weight:500}.toast small{display:block;color:var(--muted);margin-top:3px;font-size:11px}.bottom-nav{display:none}.sheet-backdrop{position:fixed;inset:0;background:#05060bc4;backdrop-filter:blur(4px);z-index:80}.noscript{padding:40px;text-align:center}
@media(min-width:1600px){.home-grid{grid-template-columns:minmax(0,1fr) 348px}.composer-body{padding:27px 30px}.composer-head{padding:0 30px}.platform-pill{height:89px}.right-heading{margin-top:6px}}
@media(max-width:1240px){.app-shell{grid-template-columns:200px minmax(0,1fr)}.sidebar{padding-left:12px;padding-right:12px}.wordmark{padding:0 9px}.wordmark strong{font-size:21px}.topbar{padding:0 24px}main{padding:25px 24px 38px}.home-grid{grid-template-columns:minmax(0,1fr) 275px;gap:18px}.composer-body{padding:20px}.composer-head{padding:0 20px}.platform-pill{font-size:10px}.product-card{padding:16px}.product-top h3{font-size:13px}.product-top .social-icon{width:34px;height:34px}.product-description{font-size:11px}.product-price strong{font-size:22px}.primary-button{padding:0 16px}.catalog-layout{grid-template-columns:minmax(0,1fr) 310px;gap:16px}.catalog-grid{grid-template-columns:1fr}.history-row{grid-template-columns:minmax(0,1fr) 75px 68px 100px;gap:10px}.stats{gap:10px}.stat-card{padding:17px}.stat-card small{font-size:11px}.page-intro h1{font-size:29px}}
@media(max-width:1040px){.app-shell{grid-template-columns:76px minmax(0,1fr)}.sidebar{padding:26px 11px 16px}.wordmark{padding:0 8px}.wordmark strong,.side-caption,.nav-link span,.nav-link.active:after,.help-note,.side-version{display:none}.wordmark-mark{min-width:37px}.wordmark{margin-bottom:26px}.nav-link{justify-content:center;padding:15px}.desktop-nav{gap:12px}.home-grid{grid-template-columns:minmax(0,1fr) 270px}.topbar{height:74px}main{padding:26px 24px}.catalog-layout{grid-template-columns:minmax(0,1fr) 310px}}
@media(max-width:860px){.home-grid{grid-template-columns:1fr}.right-column{margin-top:6px}.recommendations{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.product-card{padding:14px}.product-top{gap:7px;align-items:start}.product-top .social-icon{width:28px;height:28px}.product-top h3{font-size:12px}.product-top small{font-size:9px}.product-description{font-size:11px;line-height:1.8}.product-bottom{font-size:9px}.product-price strong{font-size:21px}.product-price strong span{font-size:9px}.pick-button{height:31px;width:31px}.tip-box{max-width:500px}.catalog-layout{display:block}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.order-panel{display:none}.order-panel.sheet-open{display:block;position:fixed;inset:auto 10px calc(12px + env(safe-area-inset-bottom));z-index:90;max-height:88dvh;overflow:auto;border-radius:20px}.sheet-close{display:grid}.order-panel .composer-body{padding:22px}.order-panel .composer-head{height:66px;padding:0 22px}.order-panel .primary-button{font-size:14px;padding:0 22px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.two-columns{gap:14px}.panel{padding:21px}.history-row{grid-template-columns:minmax(0,1fr) 85px 95px}.history-row .history-date{display:none}.page-intro .preview-tag{font-size:10px}}
@media(max-width:600px){.app-shell{display:block}.sidebar{display:none}.topbar{height:68px;padding:0 16px;gap:10px}.desktop-breadcrumb,#pageCrumb{display:none}.mobile-wordmark{display:block;font-size:21px;font-weight:800;letter-spacing:-.8px}.mobile-wordmark span{color:var(--accent)}.top-actions{gap:7px}.balance-pill{margin-right:2px;gap:5px}.balance-icon{display:none}.balance-pill small{display:none}.balance-pill b{font-size:13px}.icon-button,.language-button{min-width:33px;width:33px;height:34px;border-radius:9px;font-size:10px}.icon-button svg{width:15px;height:15px}.avatar{display:none}main{padding:22px 16px 105px}.page-intro{margin-bottom:21px;gap:8px}.eyebrow{font-size:9px;letter-spacing:1.4px;margin-bottom:8px}.page-intro h1{font-size:27px;letter-spacing:-.6px}.page-intro p{font-size:12px;max-width:270px;line-height:1.9;margin-top:5px}.page-intro .preview-tag{font-size:9px;padding:5px 8px;align-self:flex-start;margin-top:24px}.page-intro .preview-tag svg{display:none}.home-grid{gap:25px}.composer{border-radius:17px}.composer-head{height:66px;padding:0 18px}.composer-title h2{font-size:15px}.composer-title svg{width:17px;height:17px}.reset-button{font-size:11px}.composer-body{padding:18px}.platform-pills{gap:3px;margin-bottom:21px}.platform-pill{height:78px;font-size:10px;padding:7px 0}.platform-pill img{width:32px;height:32px}.section-label{font-size:13px;margin-bottom:11px}.field{margin-top:18px}.service-field{margin-top:0}.field-label b,.field-label label{font-size:13px}.field-label small,.field-label span{font-size:10px}.service-selected-copy b{font-size:12px}.service-select{padding:11px;gap:9px;min-height:60px}.service-selected-copy small{font-size:10px}.service-select .social-icon{width:26px;height:26px}.service-facts{font-size:10px;gap:7px}.input-box{padding:0 12px}.input-box input{font-size:16px}.quantity-control input{font-size:18px}.package-row{gap:6px}.package-button{padding:10px 2px}.package-button b{font-size:12px}.package-button small{font-size:10px}.quantity-foot{font-size:9px}.checkout-bar{margin-top:21px;padding-top:20px;gap:10px}.total-copy strong{font-size:29px}.total-copy small{font-size:10px}.primary-button{font-size:14px;padding:0 15px;height:49px}.primary-button svg{width:15px;height:15px}.order-note{font-size:9px;gap:4px;line-height:1.8}.right-heading{margin:1px 0 14px}.right-heading h2{font-size:17px}.right-heading a{font-size:11px}.recommendations{display:grid;grid-template-columns:1fr;gap:12px}.product-card{padding:18px}.product-top{align-items:center;gap:11px}.product-top .social-icon{width:36px;height:36px}.product-top h3{font-size:15px}.product-top small{font-size:11px}.product-description{font-size:12px;margin-bottom:14px}.product-price strong{font-size:24px}.product-price strong span{font-size:11px}.product-bottom{font-size:11px}.pick-button{width:38px;height:38px}.tip-box{font-size:12px;padding:17px 3px}.tip-box b{font-size:13px}.page-foot{font-size:9px;flex-wrap:wrap;margin-top:17px}.bottom-nav{position:fixed;z-index:70;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:10px 8px max(10px,env(safe-area-inset-bottom));background:var(--header);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.bottom-nav .nav-link{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;padding:6px 1px;background:transparent;font-size:9px;border-radius:9px;line-height:1.5}.bottom-nav .nav-link span{display:block}.bottom-nav .nav-link svg{width:20px;height:20px}.bottom-nav .nav-link.active{color:var(--accent);background:transparent}.bottom-nav .nav-link.active:after{display:none}.toast{bottom:91px;font-size:12px}.catalog-toolbar{gap:10px;margin-bottom:17px}.search-box{height:47px}.search-box input{font-size:16px}.catalog-count{font-size:10px;white-space:nowrap}.category-panel{gap:6px;margin-bottom:16px;margin-right:-16px;padding-right:16px}.category-button{padding:7px 10px;font-size:11px}.category-button .social-icon{width:23px;height:23px}.catalog-grid{gap:11px;grid-template-columns:1fr}.catalog-grid .product-card{padding:18px}.catalog-grid .product-top .social-icon{width:35px;height:35px}.catalog-grid .product-top h3{font-size:14px}.catalog-grid .product-top small{font-size:11px}.catalog-grid .product-description{font-size:12px}.catalog-grid .product-price strong{font-size:24px}.catalog-grid .product-bottom{font-size:10px}.stats{gap:10px;margin-bottom:18px}.stat-card{padding:16px}.stat-card small{font-size:11px}.stat-card strong{font-size:25px}.history-title{padding:18px 15px}.history-title h2{font-size:14px}.history-title span{font-size:10px}.history-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:18px 15px}.history-service .social-icon{width:27px;height:27px}.history-service b{font-size:12px}.history-service small{font-size:10px}.history-row .history-qty{display:none}.history-row .status{grid-column:2;justify-self:end;font-size:9px}.history-cell{font-size:11px;text-align:right}.two-columns{grid-template-columns:1fr;gap:14px}.panel{padding:22px}.panel h2{font-size:17px}.panel>p{font-size:12px}.wallet-card h2{font-size:41px}.setting-row{padding:19px 0}.setting-copy b{font-size:13px}.setting-copy small{font-size:11px}.setting-value{font-size:11px}.review-dialog{border-radius:18px}.dialog-head{padding:18px 20px}.dialog-head h2{font-size:18px}.dialog-content{padding:20px}.select-dropdown{max-height:285px}.service-option b{font-size:12px}.service-option small{font-size:10px}.service-option>strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Approved polish, 2026-09-27: whitespace, readable price pairs, and mobile checkout.
   Social image assets, dimensions, motion and the approved palette/layout are unchanged. */
:root[data-theme=light] #main{--muted:#525e75;--faint:#656f82}
@media(min-width:601px){main{padding-top:24px}.page-intro{margin-bottom:19px}#homeComposer>.composer-head{height:64px}}
@media(max-width:600px){main{padding-top:16px}.page-intro{margin-bottom:16px}#homeComposer>.composer-head{height:60px}}
.product-buy{gap:12px;align-items:center}
.product-price{min-width:0;flex:1}
.package-price-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:7px;row-gap:0;line-height:1.55;margin-top:2px}
.package-quantity{font-size:13px;font-weight:500;color:var(--text);overflow-wrap:anywhere}
.package-price-value{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.package-separator{font-size:13px;color:var(--muted)}
.package-price-value strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.product-buy .pick-button{flex:none}
.mobile-checkout{display:none}
@media(max-width:600px){
 body[data-mobile-order-page=true] main{padding-bottom:calc(var(--mobile-nav-height,80px) + var(--mobile-checkout-height,80px) + 24px)}
 .mobile-checkout{position:fixed;z-index:65;left:0;right:0;bottom:var(--mobile-nav-height,80px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:var(--header);border-top:1px solid var(--line);box-shadow:0 -8px 24px #171a2810;backdrop-filter:blur(18px)}
 .mobile-checkout-total{min-width:0;flex:1}
 .mobile-checkout-total small{display:block;font-size:10px;color:var(--muted);line-height:1.6}
 .mobile-checkout-total strong{display:block;font-size:22px;font-weight:700;line-height:1.3;letter-spacing:-.6px;font-variant-numeric:tabular-nums;white-space:nowrap}
 .mobile-checkout .primary-button{height:46px;padding:0 13px;font-size:12px;gap:7px;flex:none;max-width:72%;line-height:1.7}
 .mobile-checkout .primary-button>span:last-child{display:flex}
 .mobile-checkout .primary-button svg{width:15px;height:15px}
 body[data-mobile-checkout-visible=true] .toast{bottom:calc(var(--mobile-nav-height,80px) + var(--mobile-checkout-height,80px) + 10px)}
}

/* 2026-09-27 — compact premium arrow action */
.pick-button{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 72%,var(--surface)) 0%,var(--accent-soft) 100%);
  color:var(--accent);
  display:grid;
  place-items:center;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 10%,transparent);
  flex:none;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.pick-button svg{width:18px;height:18px;stroke-width:2.2}
.pick-button:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 16%,transparent);
}
.pick-button:active{transform:translateY(0);box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 10%,transparent)}
@media(max-width:600px){
  .pick-button{width:40px;height:40px;border-radius:12px}
  .pick-button svg{width:16px;height:16px}
}
/* Wallet redesign — premium SMMKH treatment inspired by NOKOR REUNG quality, without its imagery. */
.wallet-dashboard{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);gap:18px;align-items:stretch}
.wallet-balance-card,.wallet-topup-card,.wallet-transactions,.wallet-security{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.wallet-balance-card{position:relative;overflow:hidden;padding:28px;background:radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 38%),linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 70%,var(--surface)),var(--surface) 60%)}
.wallet-balance-card:after{content:'';position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;bottom:-105px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),transparent);pointer-events:none}
.wallet-balance-label{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}
.wallet-balance-label svg{width:18px;height:18px;color:var(--accent)}
.wallet-balance-amount{font-size:54px;font-weight:750;letter-spacing:-2px;line-height:1.05;margin-top:20px;font-variant-numeric:tabular-nums}
.wallet-balance-hint{font-size:12px;color:var(--muted);margin:8px 0 0}
.wallet-balance-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:24px 0 18px}
.wallet-balance-meta>span{display:grid;grid-template-columns:28px 1fr;gap:0 8px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 82%,transparent)}
.wallet-balance-meta svg{grid-row:1/3;width:16px;height:16px;color:var(--green)}
.wallet-balance-meta b{font-size:12px}.wallet-balance-meta small{font-size:9px;color:var(--muted)}
.wallet-main-topup{min-width:210px}
.wallet-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--soft-line)}
.wallet-benefits span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px}.wallet-benefits svg{width:15px;height:15px;color:var(--accent)}.wallet-benefits b{font-weight:500}
.wallet-topup-card{padding:26px}.wallet-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:19px}
.wallet-card-heading h2,.wallet-section-head h2,.wallet-security h2{font-size:18px;font-weight:650}.wallet-card-heading p,.wallet-security-title p{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.75}
.wallet-card-icon{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}.wallet-card-icon svg{width:17px}
.wallet-amount-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.wallet-amount-button{min-height:62px;border:1px solid var(--line);border-radius:12px;background:var(--field);display:grid;place-items:center;padding:8px 5px}
.wallet-amount-button b{font-size:14px}.wallet-amount-button small{font-size:9px;color:var(--muted)}.wallet-amount-button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent)}
.wallet-custom-amount{height:50px;border:1px solid var(--line);border-radius:11px;background:var(--field);display:grid;grid-template-columns:44px 1fr;align-items:center;margin-top:10px}.wallet-custom-amount>span{display:grid;place-items:center;height:100%;border-right:1px solid var(--line);font-weight:650;color:var(--accent)}
.wallet-custom-amount input{border:0;outline:0;background:transparent;color:var(--text);font-size:14px;padding:0 13px;width:100%}.wallet-custom-amount input::placeholder{color:var(--faint)}
.wallet-method-title{font-size:12px;font-weight:650;margin:22px 0 9px}.wallet-payment-grid{display:grid;grid-template-columns:1fr;gap:9px}
.wallet-payment-method{min-height:72px;border:1px solid var(--line);border-radius:13px;background:var(--field);display:grid;grid-template-columns:44px 1fr 22px;gap:10px;align-items:center;padding:10px;text-align:left}
.wallet-payment-method.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 65%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 8%,transparent)}.wallet-payment-method>span:nth-child(2){min-width:0}.wallet-payment-method b{display:block;font-size:12px}.wallet-payment-method small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.wallet-payment-method i{color:var(--accent);font-style:normal}.wallet-payment-method i svg{width:17px}
.payment-logo{width:44px;height:44px;border-radius:11px;display:block;object-fit:cover;background:#fff}.payment-logo.aba{background:#fff}
.wallet-topup-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 2px 0;margin-top:12px;border-top:1px solid var(--soft-line);font-size:11px}.wallet-topup-summary span{color:var(--muted)}.wallet-topup-summary b{font-size:13px;font-variant-numeric:tabular-nums}
.wallet-continue{width:100%;margin-top:12px}.wallet-payment-note{display:flex;justify-content:center;align-items:center;gap:6px;font-size:9px;color:var(--muted);margin-top:10px;line-height:1.7}.wallet-payment-note svg{width:12px;height:12px}
.wallet-transactions,.wallet-security{padding:23px;margin-top:2px}.wallet-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}.wallet-section-head .text-link{padding:0}
.wallet-transaction-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px 0;border-bottom:1px solid var(--soft-line)}.wallet-transaction-row:last-child{border-bottom:0}
.transaction-badge{width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.transaction-badge.incoming{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}.transaction-badge.outgoing{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}.transaction-badge svg{width:15px;height:15px}
.transaction-copy b{display:block;font-size:12px;font-weight:550}.transaction-copy small,.transaction-value small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.transaction-value{text-align:right;font-size:13px;font-weight:650}.transaction-value.positive{color:var(--green)}
.wallet-security{background:radial-gradient(circle at 100% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent 42%),var(--surface)}
.wallet-security-title{display:flex;gap:12px;align-items:flex-start}.wallet-security-title>svg{width:24px;height:24px;color:var(--accent);margin-top:2px}
.wallet-security-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:22px}.wallet-security-grid>div{display:flex;align-items:center;gap:9px;padding:13px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--field) 80%,transparent)}
.wallet-security-grid>div>svg{width:17px;height:17px;color:var(--accent)}.wallet-security-grid b{display:block;font-size:10px}.wallet-security-grid small{display:block;font-size:8px;color:var(--muted);margin-top:2px}
@media(max-width:1000px){.wallet-dashboard{grid-template-columns:1fr}.wallet-balance-card,.wallet-topup-card{min-height:auto}}
@media(max-width:600px){.wallet-dashboard{gap:12px}.wallet-balance-card,.wallet-topup-card,.wallet-transactions,.wallet-security{border-radius:16px}.wallet-balance-card,.wallet-topup-card,.wallet-transactions,.wallet-security{padding:18px}.wallet-balance-amount{font-size:42px}.wallet-balance-meta{grid-template-columns:1fr}.wallet-benefits{gap:5px}.wallet-benefits span{flex-direction:column;text-align:center;font-size:9px}.wallet-main-topup{width:100%}.wallet-amount-grid{grid-template-columns:repeat(3,1fr)}.wallet-payment-grid{grid-template-columns:1fr}.wallet-security-grid{grid-template-columns:1fr}.wallet-transaction-row{grid-template-columns:34px minmax(0,1fr) auto;gap:9px}.transaction-value{font-size:12px}}

/* Account redesign — same premium SMMKH system as Wallet. */
.account-dashboard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;align-items:stretch}
.account-profile-card,.account-preferences-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);padding:26px;min-width:0}
.account-profile-card{background:radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%),var(--surface)}
.account-profile-hero{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:15px;padding-bottom:22px;border-bottom:1px solid var(--soft-line)}
.account-avatar-xl{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;color:#fff;font:700 19px/1 Inter,sans-serif;background:linear-gradient(145deg,#6f55e5,#3b3654);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 18%,transparent)}
.account-profile-copy>span{display:block;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.account-profile-copy h2{font-size:24px;line-height:1.3;margin-top:3px;letter-spacing:-.5px}.account-profile-copy p{font-size:11px;color:var(--muted);margin-top:2px}
.account-status-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px;white-space:nowrap;background:color-mix(in srgb,var(--field) 75%,transparent)}
.account-status-pill svg{width:13px;height:13px;color:var(--accent)}
.account-section-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;margin:22px 0 10px}
.account-info-grid{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:9px}.account-info-item{display:flex;align-items:center;gap:10px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--field)}
.account-info-icon{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}.account-info-icon svg{width:16px;height:16px}
.account-info-item>span:last-child{min-width:0}.account-info-item small{display:block;color:var(--muted);font-size:9px}.account-info-item b{display:block;font-size:11px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}.account-balance-value{color:var(--green);font-size:15px!important}
.account-workspace-note{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:14px 15px;border-radius:13px;background:color-mix(in srgb,var(--accent-soft) 38%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 13%,var(--line))}
.account-workspace-note>svg{width:17px;height:17px;color:var(--accent);margin-top:2px}.account-workspace-note b{font-size:11px}.account-workspace-note p{font-size:10px;line-height:1.75;color:var(--muted);margin-top:3px}
.account-card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--soft-line)}
.account-card-heading h2{font-size:18px;font-weight:650}.account-card-heading p{font-size:11px;line-height:1.75;color:var(--muted);margin-top:4px;max-width:340px}
.account-card-heading>span{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}.account-card-heading>span svg{width:18px;height:18px}
.account-settings-list{display:grid;gap:9px;margin-top:18px}.account-setting-card{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto 18px;gap:11px;align-items:center;text-align:left;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--field);min-height:68px}
.account-setting-card:hover{background:var(--surface-hover);border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.account-setting-icon{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}.account-setting-icon svg{width:18px;height:18px}
.account-setting-copy b{display:block;font-size:12px;font-weight:600}.account-setting-copy small{display:block;color:var(--muted);font-size:9px;margin-top:2px;line-height:1.6}
.account-setting-value{font-size:10px;font-weight:600;color:var(--accent);padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent-soft) 70%,transparent);white-space:nowrap}
.account-setting-chevron{color:var(--muted)}.account-setting-chevron svg{width:15px;height:15px}
.account-privacy-note{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:15px;border-top:1px solid var(--soft-line);color:var(--muted)}
.account-privacy-note>svg{width:18px;height:18px;color:var(--green);margin-top:2px}.account-privacy-note b{font-size:11px;color:var(--text)}.account-privacy-note p{font-size:9px;line-height:1.75;margin-top:3px}
@media(max-width:1000px){.account-dashboard{grid-template-columns:1fr}.account-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
 .account-dashboard{grid-template-columns:1fr;gap:12px}
 .account-profile-card,.account-preferences-card{padding:18px;border-radius:16px}
 .account-profile-hero{grid-template-columns:58px minmax(0,1fr);gap:12px}
 .account-avatar-xl{width:58px;height:58px;border-radius:18px;font-size:16px}
 .account-profile-copy h2{font-size:20px}
 .account-status-pill{grid-column:1/-1;justify-self:start}
 .account-info-grid{grid-template-columns:1fr}
 .account-info-item{padding:12px}
 .account-section-label{margin-top:18px}
 .account-setting-card{grid-template-columns:40px minmax(0,1fr) auto 16px;gap:9px;padding:10px}
 .account-setting-value{font-size:9px;padding:4px 7px}
 .account-card-heading h2{font-size:16px}
 .account-card-heading p{font-size:10px}
}

/* Avatar image profile polish */
.account-profile-hero{grid-template-columns:104px minmax(0,1fr) auto}
.account-avatar-block{display:grid;justify-items:center;gap:7px}
.account-avatar-photo{width:82px;height:82px;border-radius:24px;position:relative;overflow:visible;background:linear-gradient(145deg,#8068ff,#3b3654);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 18%,transparent)}
.account-avatar-photo img{width:100%;height:100%;object-fit:cover;border-radius:24px;display:none}
.account-avatar-photo.has-photo img{display:block}
.account-avatar-fallback{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:700 20px/1 Inter,sans-serif}
.account-avatar-photo.has-photo .account-avatar-fallback{display:none}
.avatar-edit-badge{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,#8c6df2,#6948d9);color:#fff;display:grid;place-items:center;border:3px solid var(--surface);box-shadow:0 5px 14px #0002}
.avatar-edit-badge svg{width:13px;height:13px}
.account-avatar-actions{display:flex;gap:5px;justify-content:center}
.account-avatar-actions button{background:transparent;color:var(--muted);font-size:8.5px;padding:2px 4px}
.account-avatar-actions button:first-child{color:var(--accent)}
.avatar.has-photo{overflow:hidden;padding:0;border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@media(max-width:600px){
 .account-profile-hero{grid-template-columns:76px minmax(0,1fr)}
 .account-avatar-photo{width:62px;height:62px;border-radius:18px}
 .account-avatar-photo img{border-radius:18px}
 .avatar-edit-badge{width:24px;height:24px;border-radius:8px}
 .account-avatar-actions{gap:3px}
 .account-avatar-actions button{font-size:8px;padding:1px 2px}
}
/* PublicPageKh wordmark sizing; product layout and social artwork unchanged. */
.wordmark-mark{font:800 24px/1 Inter,sans-serif;padding-right:0}
.wordmark strong{font-size:18px;letter-spacing:-.75px;white-space:nowrap}
@media(max-width:1240px) and (min-width:1041px){.wordmark strong{font-size:17px;letter-spacing:-.7px}}
@media(max-width:600px){.mobile-wordmark{font-size:17px;letter-spacing:-.65px;white-space:nowrap}}
/* PublicPageKh final vector mark — ribbon P + chat bubble + one orbit. */
.wordmark{gap:7px}
.public-brand-logo{display:inline-grid;place-items:center;flex:none;position:relative;isolation:isolate;background:none!important;overflow:visible;animation:brandIconFloat 5.2s ease-in-out infinite}
.wordmark .public-brand-logo{width:48px;height:48px}
.public-brand-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px rgba(79,83,220,.12))}
.brand-logo-orbit{fill:none;stroke-width:1.55;stroke-linecap:round;opacity:.46;transform-box:fill-box;transform-origin:center;animation:brandLogoOrbitSpin 9.5s linear infinite}
.brand-logo-orbit .brand-orbit-dot{fill:#7f6fe8;stroke:#dffaff;stroke-width:1.1}
.brand-chat-bubble{fill:#111d63;opacity:.92}
.brand-chat-dots{fill:#dff9ff}
.brand-chat-dots circle:first-child{fill:#aa7cf3}
.brand-chat-dots circle:last-child{fill:#56d9ee}
.brand-highlight{fill:#fff;opacity:.14}
.public-brand-logo:before{content:'';position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(103,85,233,.10),rgba(74,207,235,.045) 48%,transparent 72%);filter:blur(7px);z-index:-1;animation:brandIconGlow 4.8s ease-in-out infinite}
.wordmark strong{font-size:19px;letter-spacing:-.72px;white-space:nowrap}
.mobile-wordmark{display:none;align-items:center;gap:7px}
.mobile-wordmark .public-brand-logo{width:33px;height:33px}
.mobile-brand-text{font-weight:800;letter-spacing:-.58px;white-space:nowrap}
.mobile-brand-text>span{color:var(--accent)}
@keyframes brandLogoOrbitSpin{to{transform:rotate(360deg)}}
@keyframes brandIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes brandIconGlow{0%,100%{opacity:.38;transform:scale(.96)}50%{opacity:.65;transform:scale(1.04)}}
@media(max-width:1240px) and (min-width:1041px){.wordmark{gap:5px}.wordmark .public-brand-logo{width:43px;height:43px}.wordmark strong{font-size:17px;letter-spacing:-.68px}}
@media(max-width:1040px) and (min-width:601px){.wordmark{justify-content:center}.wordmark .public-brand-logo{width:40px;height:40px}}
@media(max-width:600px){.mobile-wordmark{display:flex;font-size:15px}.mobile-wordmark .public-brand-logo{width:33px;height:33px}.mobile-brand-text{font-size:15px}}
@media(prefers-reduced-motion:reduce){.public-brand-logo,.brand-logo-orbit,.public-brand-logo:before{animation:none!important}}

/* PublicPageKh final approved logo pack — exact artwork from the supplied pack. */
.wordmark{padding:0;margin-bottom:42px;gap:0;justify-content:center;overflow:visible}
.mobile-wordmark{display:none;align-items:center;padding:0;background:transparent}
.brand-official-lockup{width:188px;display:block;line-height:0;position:relative}
.brand-official-horizontal{width:100%;height:auto;display:block}
.brand-official-dark,.brand-official-icon-only{display:none}
[data-theme="dark"] .brand-official-light{display:none}
[data-theme="dark"] .brand-official-dark{display:block}
@media(max-width:1240px) and (min-width:1041px){
 .brand-official-lockup{width:164px}
}
@media(max-width:1040px) and (min-width:601px){
 .wordmark{padding:0;background:transparent!important}
 .wordmark .brand-official-lockup{width:46px}
 .wordmark .brand-official-horizontal{display:none!important}
 .wordmark .brand-official-icon-for-light{display:block;width:46px;height:46px}
 [data-theme="dark"] .wordmark .brand-official-icon-for-light{display:none}
 [data-theme="dark"] .wordmark .brand-official-icon-for-dark{display:block;width:46px;height:46px}
}
@media(max-width:600px){
 .mobile-wordmark{display:flex}
 .mobile-wordmark .brand-official-lockup{width:148px}
}


/* Dark-mode logo motion: animate the P only; keep the wordmark still. */
@keyframes ppkDarkFloat{
  0%,100%{transform:translateY(-50%) scale(1);filter:drop-shadow(0 0 2px rgba(156,135,255,.12))}
  50%{transform:translateY(calc(-50% - 3px)) scale(1.045);filter:drop-shadow(0 7px 13px rgba(156,135,255,.48))}
}
@keyframes ppkDarkOrbit{
  from{transform:translateY(-50%) rotate(0deg)}
  to{transform:translateY(-50%) rotate(360deg)}
}
@keyframes ppkDarkShimmer{
  0%,70%{opacity:0;transform:translateX(-14px) skewX(-18deg)}
  78%{opacity:.42}
  92%,100%{opacity:0;transform:translateX(46px) skewX(-18deg)}
}
@media(min-width:1041px){
  [data-theme="dark"] .wordmark .brand-official-lockup:before{content:"";position:absolute;z-index:2;left:-2px;top:50%;width:47px;height:47px;transform:translateY(-50%);background:var(--side);border:1.5px solid rgba(156,135,255,.58);border-right-color:#7c3aed;border-bottom-color:transparent;border-radius:50%;box-shadow:0 0 10px rgba(124,58,237,.16);animation:ppkDarkOrbit 4.2s linear infinite}
  [data-theme="dark"] .wordmark .brand-official-lockup:after{content:"";position:absolute;z-index:4;left:4px;top:5px;width:9px;height:38px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);animation:ppkDarkShimmer 4.8s ease-in-out infinite;pointer-events:none}
  [data-theme="dark"] .wordmark .brand-official-icon-for-dark{display:block;position:absolute;z-index:3;left:1px;top:50%;width:43px;height:43px;animation:ppkDarkFloat 3.2s ease-in-out infinite;transform-origin:center;will-change:transform,filter}
}
[data-theme="dark"] .wordmark:hover .brand-official-icon-for-dark{filter:drop-shadow(0 0 10px rgba(156,135,255,.42))}
@media(max-width:1040px) and (min-width:601px){
  [data-theme="dark"] .wordmark .brand-official-icon-for-dark{animation:ppkDarkFloat 3.8s ease-in-out infinite}
}
@media(max-width:600px){
  [data-theme="dark"] .mobile-wordmark .brand-official-lockup:before{content:"";position:absolute;z-index:2;left:-1px;top:50%;width:38px;height:38px;transform:translateY(-50%);background:var(--header);border:1.3px solid rgba(156,135,255,.58);border-right-color:#7c3aed;border-bottom-color:transparent;border-radius:50%;box-shadow:0 0 8px rgba(124,58,237,.16);animation:ppkDarkOrbit 4.2s linear infinite}
  [data-theme="dark"] .mobile-wordmark .brand-official-lockup:after{content:"";position:absolute;z-index:4;left:3px;top:4px;width:8px;height:31px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);animation:ppkDarkShimmer 4.8s ease-in-out infinite;pointer-events:none}
  [data-theme="dark"] .mobile-wordmark .brand-official-icon-for-dark{display:block;position:absolute;z-index:3;left:0;top:50%;width:36px;height:36px;animation:ppkDarkFloat 3.2s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.brand-official-icon-for-dark,.brand-official-lockup:before,.brand-official-lockup:after{animation:none!important}}

/* Light-mode logo motion: same P activity, softer on white. */
@media(min-width:1041px){
  [data-theme="light"] .wordmark .brand-official-lockup:before{
    content:"";position:absolute;z-index:2;left:-2px;top:50%;width:47px;height:47px;transform:translateY(-50%);
    background:var(--side);border:1.5px solid rgba(124,58,237,.46);border-right-color:#7c3aed;border-bottom-color:transparent;
    border-radius:50%;box-shadow:0 0 10px rgba(124,58,237,.12);animation:ppkDarkOrbit 4.2s linear infinite
  }
  [data-theme="light"] .wordmark .brand-official-lockup:after{
    content:"";position:absolute;z-index:4;left:4px;top:5px;width:9px;height:38px;border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
    animation:ppkDarkShimmer 4.8s ease-in-out infinite;pointer-events:none
  }
  [data-theme="light"] .wordmark .brand-official-icon-for-light{
    display:block;position:absolute;z-index:3;left:1px;top:50%;width:43px;height:43px;
    animation:ppkDarkFloat 3.2s ease-in-out infinite;transform-origin:center;will-change:transform,filter
  }
}
[data-theme="light"] .wordmark:hover .brand-official-icon-for-light{filter:drop-shadow(0 0 10px rgba(124,58,237,.34))}
@media(max-width:1040px) and (min-width:601px){
  [data-theme="light"] .wordmark .brand-official-icon-for-light{animation:ppkDarkFloat 3.2s ease-in-out infinite}
}
@media(max-width:600px){
  [data-theme="light"] .mobile-wordmark .brand-official-lockup:before{
    content:"";position:absolute;z-index:2;left:-1px;top:50%;width:38px;height:38px;transform:translateY(-50%);
    background:var(--header);border:1.3px solid rgba(124,58,237,.46);border-right-color:#7c3aed;border-bottom-color:transparent;
    border-radius:50%;box-shadow:0 0 8px rgba(124,58,237,.12);animation:ppkDarkOrbit 4.2s linear infinite
  }
  [data-theme="light"] .mobile-wordmark .brand-official-lockup:after{
    content:"";position:absolute;z-index:4;left:3px;top:4px;width:8px;height:31px;border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
    animation:ppkDarkShimmer 4.8s ease-in-out infinite;pointer-events:none
  }
  [data-theme="light"] .mobile-wordmark .brand-official-icon-for-light{
    display:block;position:absolute;z-index:3;left:0;top:50%;width:36px;height:36px;animation:ppkDarkFloat 3.2s ease-in-out infinite
  }
}

/* Production wallet / payment presentation */
.wallet-payment-note{display:flex;justify-content:center;align-items:center;gap:7px;font-size:10px;color:var(--muted);margin-top:12px;line-height:1.7;text-align:center}
.wallet-payment-note svg{width:13px;height:13px;flex:none}
.wallet-empty-state{min-height:118px;border:1px dashed var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);text-align:left;padding:22px}
.wallet-empty-state>svg{width:22px;height:22px;color:var(--accent)}
.wallet-empty-state b{display:block;color:var(--text);font-size:13px;font-weight:600}
.wallet-empty-state small{display:block;margin-top:4px;font-size:11px;line-height:1.7}
.payment-checkout{display:grid;gap:14px}
.payment-summary-card{padding:18px 20px;border-radius:16px;background:linear-gradient(135deg,var(--accent-soft),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));display:flex;align-items:center;justify-content:space-between;gap:16px}
.payment-summary-card span{font-size:12px;color:var(--muted)}
.payment-summary-card strong{font-size:30px;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.payment-method-row{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--field)}
.payment-method-mark{width:46px;height:46px;border-radius:12px;display:block;object-fit:cover;background:#fff;flex:none}
.payment-method-row>span:nth-child(2){display:grid;gap:2px;flex:1}
.payment-method-row small{font-size:10px;color:var(--muted)}
.payment-method-row b{font-size:13px}
.payment-method-row i{color:var(--green)}
.payment-method-row i svg{width:17px;height:17px}
.payment-qr-shell{display:grid;place-items:center;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.payment-qr-placeholder{width:min(240px,100%);aspect-ratio:1/1;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:18px;background:linear-gradient(145deg,var(--field),var(--surface));display:grid;place-items:center;align-content:center;gap:8px;text-align:center;color:var(--muted)}
.payment-qr-placeholder svg{width:34px;height:34px;color:var(--accent)}
.payment-qr-placeholder b{color:var(--text);font-size:14px}
.payment-qr-placeholder small{font-size:10px}
.payment-status-note{display:flex;gap:8px;align-items:flex-start;padding:12px 13px;border-radius:12px;background:var(--field);border:1px solid var(--line);font-size:11px;line-height:1.7;color:var(--muted)}
.payment-status-note svg{width:15px;height:15px;color:var(--accent);margin-top:2px}
.payment-continue{width:100%}
.payment-continue:disabled{opacity:.46}
@media(max-width:600px){.payment-summary-card{padding:15px 16px}.payment-summary-card strong{font-size:26px}.payment-qr-placeholder{width:min(205px,100%)}}

/* Live ABA KHQR payment states */
.payment-qr-image{display:block;width:min(248px,100%);height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:18px;border:1px solid var(--line);padding:8px}
.payment-loading{animation:paymentPulse 1.6s ease-in-out infinite}
@keyframes paymentPulse{0%,100%{opacity:.58}50%{opacity:1}}
.payment-invoice-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--field);font-size:11px}
.payment-invoice-row span{color:var(--muted)}.payment-invoice-row b{font-size:11px;letter-spacing:.2px;overflow-wrap:anywhere;text-align:right}
.payment-status-note span{display:grid;gap:2px}.payment-status-note span small{display:block;color:var(--faint);font-size:9px}
.payment-error{border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--danger)}
.payment-retry{width:100%;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:12px;font-weight:700}
@media(max-width:600px){.payment-qr-image{width:min(210px,100%)}}


/* Custom-comment services */
.comments-box{
 width:100%;
 min-height:164px;
 resize:vertical;
 border:1px solid var(--line);
 border-radius:12px;
 background:var(--field);
 color:var(--text);
 padding:13px 14px;
 font:500 12px/1.65 Inter,'Noto Sans Khmer',sans-serif;
 outline:0;
 transition:border-color .18s,box-shadow .18s,background .18s;
}
.comments-box::placeholder{color:var(--faint)}
.comments-box:focus{
 border-color:var(--accent);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent);
 background:var(--surface);
}
.custom-comments-field .quantity-foot{margin-top:8px}
.review-comments{
 display:grid;
 gap:6px;
 margin:10px 0;
 padding:11px 12px;
 border:1px solid var(--line);
 border-radius:11px;
 background:var(--field);
}
.review-comments small{color:var(--muted);font-size:9px}
.review-comments span{
 display:block;
 padding:5px 8px;
 border-radius:7px;
 background:var(--surface);
 font-size:10px;
 overflow-wrap:anywhere;
}
.review-comments em{font-style:normal;color:var(--accent);font-size:10px;font-weight:700}



/* Premium ABA payment checkout */
.review-dialog:has(.payment-checkout){max-width:540px;overflow:hidden}
.review-dialog:has(.payment-checkout) .dialog-head{padding:18px 22px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 4%),var(--surface))}
.review-dialog:has(.payment-checkout) .dialog-head h2{font-size:17px;font-weight:700}
.review-dialog:has(.payment-checkout) .dialog-content{padding:16px 18px 18px}
.payment-checkout{display:grid;gap:11px}
.payment-hero-card{border:1px solid color-mix(in srgb,#0b718e 22%,var(--line));border-radius:18px;padding:14px 16px;background:radial-gradient(circle at 90% -20%,color-mix(in srgb,#1bb5cc 16%,transparent),transparent 46%),linear-gradient(145deg,color-mix(in srgb,#0b718e 6%,var(--surface)),var(--surface));box-shadow:0 10px 30px #0000000b}
.payment-hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.payment-brand-chip,.payment-secure-chip{display:inline-flex;align-items:center;gap:8px}
.payment-brand-chip img{width:30px;height:30px;border-radius:9px;object-fit:cover;box-shadow:0 4px 12px #075a7040}
.payment-brand-chip b{font-size:11px;letter-spacing:.8px;color:#0a728d}
.payment-secure-chip{padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--green) 9%,transparent);color:var(--green);font-size:9px;font-weight:700}
.payment-secure-chip svg{width:12px;height:12px}
.payment-hero-amount{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:14px 0 12px}
.payment-hero-amount span{font-size:10px;color:var(--muted)}
.payment-hero-amount strong{font-size:34px;line-height:1;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}
.payment-hero-method{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:11px;border-top:1px solid var(--soft-line)}
.payment-hero-method span{display:grid;gap:1px}.payment-hero-method b{font-size:12px}.payment-hero-method small{font-size:9px;color:var(--muted)}
.payment-hero-method i{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:color-mix(in srgb,var(--green) 10%,transparent);color:var(--green);font-style:normal}
.payment-hero-method i svg{width:14px;height:14px}
.payment-qr-card{border:1px solid var(--line);border-radius:18px;padding:14px 15px 13px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--field) 62%,var(--surface)))}
.payment-qr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.payment-qr-head>div{display:flex;align-items:center;gap:9px;min-width:0}
.payment-step{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font:700 10px/1 Inter,sans-serif;flex:none}
.payment-qr-head span span{display:grid}.payment-qr-head b{font-size:11px}.payment-qr-head small{font-size:9px;color:var(--muted);margin-top:1px}
.payment-timer{display:flex!important;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:700 10px/1 Inter,sans-serif;white-space:nowrap}
.payment-timer svg{width:12px;height:12px}.payment-timer.ending{background:#fff5df;color:#b97100}.payment-timer.expired{background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger)}
.payment-qr-stage{display:grid;place-items:center;position:relative;padding:8px;border-radius:16px;background:radial-gradient(circle at 50% 45%,#ffffff 0 35%,color-mix(in srgb,var(--accent) 4%,var(--surface)) 70%)}
.payment-qr-image{display:block;width:min(232px,100%);aspect-ratio:1/1;object-fit:contain;background:#fff;border:0;border-radius:17px;padding:10px;box-shadow:0 12px 30px #0e17301a,0 0 0 1px #e4e9f1}
.payment-qr-placeholder{width:min(232px,100%);border-radius:17px}
.payment-merchant-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--soft-line);font-size:10px}
.payment-merchant-row span{color:var(--muted)}.payment-merchant-row b{font-size:10px;font-weight:650;text-align:right}
.payment-meta-card{border:1px solid var(--line);border-radius:15px;background:var(--field);overflow:hidden}
.payment-invoice-row{border:0;border-radius:0;background:transparent;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.payment-invoice-row>span{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint)}
.payment-invoice-row>div{display:flex;align-items:center;gap:7px;min-width:0}
.payment-invoice-row code{font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);white-space:nowrap}
.payment-copy-btn{display:flex;align-items:center;gap:4px;height:28px;padding:0 8px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:700}
.payment-copy-btn svg{width:12px;height:12px}.payment-copy-btn.copied{color:var(--green);border-color:color-mix(in srgb,var(--green) 28%,var(--line));background:color-mix(in srgb,var(--green) 6%,var(--surface))}
.payment-meta-card .payment-status-note{border:0;border-top:1px solid var(--soft-line);border-radius:0;background:transparent;padding:10px 12px;align-items:center}
.payment-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 10%,transparent);flex:none;animation:paymentLivePulse 1.8s ease-in-out infinite}
@keyframes paymentLivePulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 9%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.payment-status-copy{display:grid;gap:1px}.payment-status-copy b{font-size:10px;color:var(--text);font-weight:650}.payment-status-copy small{font-size:8.5px!important;color:var(--faint)}
.payment-security-line{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--faint);font-size:8.5px;text-align:center;line-height:1.6;padding:1px 8px}
.payment-security-line svg{width:11px;height:11px;flex:none;color:var(--green)}
.payment-new-qr{justify-self:center;display:flex;align-items:center;gap:6px;background:transparent;color:var(--muted);font-size:9.5px;font-weight:650;padding:5px 9px;border-radius:8px}
.payment-new-qr svg{width:12px;height:12px}.payment-new-qr:hover{background:var(--field);color:var(--accent)}
.payment-error-state .payment-status-note{border-radius:14px;border:1px solid color-mix(in srgb,var(--danger) 30%,var(--line));background:color-mix(in srgb,var(--danger) 4%,var(--field))}
.payment-loading-state .payment-qr-card{min-height:320px}
@media(max-width:600px){
 .review-dialog:has(.payment-checkout){width:calc(100% - 20px);max-height:calc(100dvh - 18px);border-radius:20px}
 .review-dialog:has(.payment-checkout) .dialog-head{padding:15px 17px}.review-dialog:has(.payment-checkout) .dialog-content{padding:12px 13px 15px}
 .payment-hero-card{padding:12px 13px;border-radius:16px}.payment-hero-amount{padding:11px 0 10px}.payment-hero-amount strong{font-size:31px}
 .payment-qr-card{padding:12px;border-radius:16px}.payment-qr-head small{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .payment-qr-stage{padding:5px}.payment-qr-image,.payment-qr-placeholder{width:min(205px,100%)}
 .payment-merchant-row{font-size:9px}.payment-merchant-row b{font-size:9px}
 .payment-invoice-row code{font-size:9px}.payment-copy-btn span{display:none}.payment-copy-btn{width:29px;padding:0;justify-content:center}
}



.payment-qr-head>div>span:last-child{display:grid;gap:1px;min-width:0}
.payment-qr-head>div>span:last-child b{display:block}
.payment-qr-head>div>span:last-child small{display:block;line-height:1.45}
@media(max-width:600px){
 .payment-qr-head>div>span:last-child{max-width:205px}
 .payment-qr-head>div>span:last-child small{max-width:205px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}



.payment-open-aba{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:15px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#086984,#13b4cc);box-shadow:0 10px 24px #08718e26;transition:transform .16s ease,box-shadow .16s ease}
.payment-open-aba:hover{transform:translateY(-1px);box-shadow:0 14px 28px #08718e32}
.payment-open-aba img{width:36px;height:36px;border-radius:10px;object-fit:cover;flex:none;box-shadow:0 4px 12px #003c4d35}
.payment-open-aba span{display:grid;gap:1px;flex:1;text-align:left}
.payment-open-aba b{font-size:12px;color:#fff}.payment-open-aba small{font-size:9px;color:#d9f6fb}
.payment-open-aba>svg{width:16px;height:16px;flex:none}
@media(max-width:600px){.payment-open-aba{min-height:54px;padding:9px 11px}.payment-open-aba b{font-size:12px}.payment-open-aba small{font-size:9px}}



.payment-refresh-row{display:flex;justify-content:flex-end;padding:8px 10px;border-top:1px solid var(--soft-line)}
.payment-refresh-row .payment-new-qr{justify-self:auto;margin:0;display:flex;align-items:center;gap:6px;min-height:30px;padding:6px 9px;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:9px}
.payment-refresh-row .payment-new-qr svg{width:12px;height:12px}
.payment-ready.is-expired .payment-open-aba{pointer-events:none;opacity:.42;filter:grayscale(.35)}
.payment-ready.is-expired .payment-live-dot{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 10%,transparent);animation:none}
.payment-ready.is-expired .payment-refresh-row{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.payment-ready.is-expired .payment-refresh-row .payment-new-qr{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 18%,transparent)}
.payment-ready.is-expired .payment-refresh-row .payment-new-qr svg{color:#fff}
@media(max-width:600px){.payment-refresh-row{justify-content:stretch}.payment-refresh-row .payment-new-qr{width:100%;justify-content:center}}



.payment-qr-actions{display:flex;align-items:center;gap:6px;flex:none}
.payment-quick-refresh{display:flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));background:var(--surface);color:var(--accent);font-size:9px;font-weight:750;white-space:nowrap}
.payment-quick-refresh svg{width:12px;height:12px}
.payment-quick-refresh:hover{background:var(--accent-soft);border-color:var(--accent)}
.payment-ready.is-expired .payment-quick-refresh{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 18%,transparent)}
@media(max-width:600px){
 .payment-qr-actions{gap:4px}
 .payment-quick-refresh{width:30px;padding:0;justify-content:center}
 .payment-quick-refresh span{display:none}
}



/* Live order history */
.orders-refresh{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--field);color:var(--muted);font-size:10px;font-weight:650}
.orders-refresh svg{width:13px;height:13px}.orders-refresh:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.orders-refresh.loading svg{animation:orderSpin .85s linear infinite}@keyframes orderSpin{to{transform:rotate(360deg)}}
.history-order-state{display:grid;gap:8px;justify-items:start;min-width:0}
.status.failed{color:var(--danger)}.status.warning{color:#b77900}
.order-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.order-actions button{height:27px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--accent);font-size:9px;font-weight:700}
.order-actions button:hover{border-color:var(--accent);background:var(--accent-soft)}
.order-actions button.danger{color:var(--danger)}.order-actions button.danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--field))}
.order-actions button:disabled,.orders-refresh:disabled{opacity:.55;cursor:wait}
.order-refund{color:var(--green)!important}
.order-submit-error{margin:9px 0 0!important;padding:9px 11px;border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--danger) 5%,var(--field));color:var(--danger)!important;text-align:left}
.order-error{color:var(--danger)}
@media(max-width:860px){.history-order-state{justify-items:end}}
@media(max-width:600px){
 .orders-refresh{width:32px;padding:0;justify-content:center}.orders-refresh span{display:none}
 .history-order-state{justify-items:end}.order-actions{justify-content:flex-end}
 .order-actions button{height:26px;padding:0 7px}
}



.order-refill-meta{display:block!important;margin-top:4px!important;color:var(--green)!important;font-size:9px!important;line-height:1.5}


/* Account profile identity */
.account-profile-actions{display:flex;align-items:center;gap:8px;justify-self:end;flex-wrap:wrap;justify-content:flex-end}.account-profile-edit{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font-size:10px;font-weight:750}.account-profile-edit:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accent)}.account-profile-edit svg{width:14px;height:14px}.profile-edit-form{display:flex;flex-direction:column;gap:14px}.profile-edit-form label{display:flex;flex-direction:column;gap:7px}.profile-edit-form label>span{font-size:10px;font-weight:750;color:var(--muted)}.profile-edit-form input{height:44px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);padding:0 12px;font:inherit;outline:none}.profile-edit-form input:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}.profile-edit-form .primary-button{margin-top:4px}
@media(max-width:760px){.account-profile-actions{grid-column:1/-1;justify-self:start;justify-content:flex-start}.account-profile-edit{height:34px}.account-info-grid{grid-template-columns:1fr}}

/* Real account authentication */
body.auth-locked{overflow:hidden}.auth-gate{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 34%),radial-gradient(circle at 88% 88%,color-mix(in srgb,#35b8d0 10%,transparent),transparent 34%),color-mix(in srgb,var(--bg) 94%,#000 6%);backdrop-filter:blur(18px)}.auth-panel{width:min(440px,100%);border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%,var(--accent) 3%),var(--surface));box-shadow:0 30px 80px #0005;padding:28px}.auth-brand{display:flex;justify-content:center;margin-bottom:22px}.auth-brand img{width:190px;height:auto}.auth-copy{text-align:center}.auth-copy>span{font-size:9px;letter-spacing:1.8px;font-weight:800;color:var(--accent)}.auth-copy h1{font-size:27px;margin-top:7px}.auth-copy p{font-size:11px;color:var(--muted);margin:6px auto 0;max-width:320px;line-height:1.7}.auth-form{display:grid;gap:12px;margin-top:22px}.auth-form label{display:grid;gap:6px}.auth-form label>span{font-size:10px;color:var(--muted);font-weight:700}.auth-form input{height:46px;border:1px solid var(--line);border-radius:12px;background:var(--field);color:var(--text);padding:0 13px;outline:none}.auth-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}.auth-submit{width:100%;margin-top:3px}.auth-error{font-size:10px;line-height:1.6;color:var(--danger);padding:9px 11px;border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--danger) 5%,var(--field))}.auth-switch{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:17px;font-size:10px;color:var(--muted)}.auth-switch button{background:transparent;color:var(--accent);font-weight:750;padding:0}.auth-security{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;padding-top:16px;border-top:1px solid var(--soft-line);font-size:9px;color:var(--faint);text-align:center}.auth-security svg{width:12px;color:var(--green)}.account-profile-logout{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 12px;border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--danger) 4%,var(--surface));color:var(--danger);font-size:10px;font-weight:750}.account-profile-logout svg{width:14px;height:14px;transform:rotate(180deg)}.account-profile-logout:hover{border-color:var(--danger)}
@media(max-width:600px){.auth-gate{padding:12px}.auth-panel{padding:22px 17px;border-radius:20px}.auth-brand img{width:168px}.auth-copy h1{font-size:24px}.auth-form{margin-top:18px}.account-profile-logout{height:34px}}

.wallet-activity-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}.wallet-activity-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}.wallet-activity-row:first-child{border-top:0}.wallet-activity-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}.wallet-activity-icon svg{width:15px;height:15px}.wallet-activity-copy{display:flex;flex-direction:column;min-width:0}.wallet-activity-copy b{font-size:11px}.wallet-activity-copy small{font-size:9px;color:var(--muted);margin-top:2px}.wallet-activity-row strong{font-size:11px;font-variant-numeric:tabular-nums}.wallet-activity-row strong.positive{color:var(--green)}.wallet-activity-row strong.negative{color:var(--text)}

/* Login / Register polish */
.auth-gate{padding:28px;background:
 radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 34%),
 radial-gradient(circle at 86% 86%,color-mix(in srgb,#39b6d1 7%,transparent),transparent 30%),
 var(--bg);backdrop-filter:none}
.auth-panel{position:relative;width:min(410px,100%);max-height:calc(100dvh - 44px);overflow:auto;padding:32px 30px 27px;border-radius:22px;border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));background:var(--surface);box-shadow:0 28px 70px #00000026}
.auth-panel:before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:92px;height:3px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,var(--accent),#8d63f1)}
.auth-brand{position:relative;display:grid;place-items:center;height:42px;margin:0 0 24px}
.auth-brand .auth-logo{grid-area:1/1;width:184px;max-height:42px;object-fit:contain}
:root[data-theme=light] .auth-logo-dark{display:none}
:root[data-theme=dark] .auth-logo-light{display:none}
.auth-copy{text-align:center}.auth-copy>span{font-size:8.5px;letter-spacing:1.9px;font-weight:800;color:var(--accent)}.auth-copy h1{margin-top:8px;font-size:28px;line-height:1.35;letter-spacing:-.55px}
.auth-form{display:grid;gap:15px;margin-top:26px}.auth-form label{display:grid;gap:7px}.auth-form label>span{font-size:10.5px;font-weight:700;color:var(--muted)}
.auth-form input{height:50px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--text);font-size:14px;transition:border-color .18s,box-shadow .18s,background .18s}
.auth-form input:hover{border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}.auth-form input:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.auth-submit{width:100%;height:50px;margin-top:2px;border-radius:12px;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 18%,transparent)}.auth-submit span{font-weight:700}.auth-submit svg{width:15px;height:15px}
.auth-error{margin:0;padding:10px 12px;border-radius:10px;font-size:10px}
.auth-switch{margin-top:20px;padding-top:18px;border-top:1px solid var(--soft-line);font-size:10.5px}.auth-switch button{font-size:10.5px;font-weight:800}.auth-switch button:hover{text-decoration:underline;text-underline-offset:3px}
:root[data-theme=light] .auth-panel{box-shadow:0 28px 70px #3f3a5c20}
@media(max-width:600px){.auth-gate{padding:12px}.auth-panel{max-height:calc(100dvh - 24px);padding:26px 18px 22px;border-radius:19px}.auth-brand{height:38px;margin-bottom:20px}.auth-brand .auth-logo{width:168px;max-height:38px}.auth-copy h1{font-size:25px}.auth-form{margin-top:22px;gap:13px}.auth-form input,.auth-submit{height:48px}.auth-switch{margin-top:17px;padding-top:16px}}

/* Password visibility + Google Sign-In */
.auth-password-field{position:relative}.auth-password-field input{width:100%;padding-right:48px}.auth-password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:9px;background:transparent;color:var(--muted);display:grid;place-items:center}.auth-password-toggle:hover{background:var(--surface-hover);color:var(--accent)}.auth-password-toggle svg{width:17px;height:17px}.auth-google-section{margin-top:18px}.auth-divider{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--faint);font-size:9px;font-weight:700;letter-spacing:.7px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--soft-line);flex:1}.auth-google-button{display:flex;justify-content:center;min-height:44px}.auth-google-button>div{margin:auto!important}.auth-google-section.loading{opacity:.6;pointer-events:none}

/* Keep password eye inside the field */
.auth-password-field{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;height:50px;border:1px solid var(--line);border-radius:12px;background:var(--field);overflow:hidden;transition:border-color .18s,box-shadow .18s,background .18s}
.auth-password-field:hover{border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}
.auth-password-field:focus-within{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent)}
.auth-password-field input{width:100%;height:48px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0 8px 0 14px!important;outline:0!important}
.auth-password-toggle{position:static!important;transform:none!important;right:auto!important;top:auto!important;width:40px;height:40px;margin:0 3px 0 0;border-radius:9px;background:transparent;color:var(--muted);display:grid;place-items:center}
.auth-password-toggle:hover{background:var(--surface-hover);color:var(--accent)}

/* Stable order screen + smoother sticky mobile checkout */
.topbar{border-bottom:0;box-shadow:0 10px 28px color-mix(in srgb,#111827 5%,transparent)}
.orders-loading-state{min-height:130px;border:0!important;border-radius:0!important;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 3%,transparent),transparent);color:var(--muted)}
@media(max-width:600px){
 body[data-mobile-order-page=true] main{padding-bottom:calc(var(--mobile-nav-height,80px) + var(--mobile-checkout-height,80px) + 34px)}
 .mobile-checkout{left:10px;right:10px;bottom:calc(var(--mobile-nav-height,80px) + 10px);border:1px solid var(--line);border-radius:16px;padding:10px 12px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 14px 38px #1118271f;backdrop-filter:blur(20px)}
 .mobile-checkout-total strong{font-size:20px}.mobile-checkout .primary-button{height:44px;border-radius:11px}
 .bottom-nav{border-top:0;box-shadow:0 -10px 30px #1118270d}
 .history-card{border-radius:16px}
 .history-title{padding:15px 14px}
 .history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 10px;padding:16px 14px}
 .history-service{grid-column:1/-1;align-items:flex-start}
 .history-service>div{min-width:0}
 .history-service b{font-size:12px;line-height:1.55}
 .history-service small{font-size:9px;line-height:1.55;overflow-wrap:anywhere}
 .history-row .history-qty{display:flex!important;flex-direction:column;text-align:left}
 .history-row .history-cell:not(.history-qty){text-align:right}
 .history-order-state{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:2px}
 .order-actions{justify-content:flex-end}
}

/* Refresh never flashes stale catalog prices */
.auth-startup-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:250px;text-align:center}.auth-startup-panel .auth-brand{margin-bottom:18px}.auth-startup-panel>p{margin-top:13px;color:var(--muted);font-size:10px}.auth-startup-panel>h2{font-size:20px;margin-top:4px}.auth-startup-panel>.primary-button{width:100%;margin-top:18px}.auth-startup-spinner{width:24px;height:24px;border:2px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-top-color:var(--accent);border-radius:50%;animation:ppkhStartupSpin .7s linear infinite}@keyframes ppkhStartupSpin{to{transform:rotate(360deg)}}

/* Inline startup loading: keep the app visible while live prices sync */
.inline-load-page{padding:34px 0 10px;animation:inlineLoadIn .18s ease-out}.inline-load-head{display:grid;gap:10px;margin-bottom:26px}.inline-load-head span,.inline-load-head b,.inline-load-head i,.inline-load-line,.inline-load-grid article{position:relative;overflow:hidden;background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:1px solid var(--line)}.inline-load-head span{width:110px;height:9px;border-radius:99px}.inline-load-head b{width:260px;max-width:70%;height:35px;border-radius:10px}.inline-load-head i{width:340px;max-width:82%;height:12px;border-radius:99px}.inline-load-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.inline-load-grid article{height:106px;border-radius:17px}.inline-load-panel{padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);display:grid;gap:14px}.inline-load-line{height:16px;border-radius:8px}.inline-load-line.w40{width:40%}.inline-load-line.w90{width:90%}.inline-load-line.w80{width:80%}.inline-load-line.w70{width:70%}.inline-load-head span:after,.inline-load-head b:after,.inline-load-head i:after,.inline-load-line:after,.inline-load-grid article:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 11%,transparent),transparent);animation:inlineShimmer 1.2s infinite}@keyframes inlineShimmer{to{transform:translateX(100%)}}@keyframes inlineLoadIn{from{opacity:.45}to{opacity:1}}@media(max-width:850px){.inline-load-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.inline-load-page{padding-top:18px}.inline-load-grid{grid-template-columns:1fr 1fr;gap:9px}.inline-load-grid article{height:82px}.inline-load-panel{padding:16px}}

.inline-load-status{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--muted);font-size:10px}.inline-load-status b{font-weight:700}.inline-load-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent);animation:inlinePulse 1s ease-in-out infinite}@keyframes inlinePulse{50%{opacity:.45;transform:scale(.86)}}


/* PublicBoost v2 official artwork — exact selected #4 package */
.wordmark .brand-official-lockup{
  width:190px;
  padding:7px 9px;
  border-radius:12px;
  background:#07101f;
  box-shadow:0 8px 24px #08142614;
}
.brand-official-horizontal{
  width:100%;
  height:auto;
  object-fit:contain;
  filter:none!important;
}
.wordmark .brand-official-lockup:before,
.wordmark .brand-official-lockup:after,
.mobile-wordmark .brand-official-lockup:before,
.mobile-wordmark .brand-official-lockup:after{content:none!important;display:none!important}
.wordmark .brand-official-icon-only,
.mobile-wordmark .brand-official-icon-only{filter:drop-shadow(0 5px 12px rgba(27,132,255,.22))!important;animation:none!important}

@media(max-width:1240px) and (min-width:1041px){
  .wordmark .brand-official-lockup{width:164px;padding:6px 8px}
}
@media(max-width:1040px) and (min-width:601px){
  .wordmark .brand-official-lockup{width:48px;padding:2px;background:transparent;box-shadow:none}
  .wordmark .brand-official-horizontal{display:none!important}
  .wordmark .brand-official-icon-only{display:none!important;width:46px!important;height:46px!important;object-fit:contain}
  :root[data-theme=light] .wordmark .brand-official-icon-for-light{display:block!important}
  :root[data-theme=dark] .wordmark .brand-official-icon-for-dark{display:block!important}
}
@media(max-width:600px){
  .mobile-wordmark .brand-official-lockup{width:42px;padding:0;background:transparent;box-shadow:none}
  .mobile-wordmark .brand-official-horizontal{display:none!important}
  .mobile-wordmark .brand-official-icon-only{display:none!important;width:42px!important;height:42px!important;object-fit:contain}
  :root[data-theme=light] .mobile-wordmark .brand-official-icon-for-light{display:block!important}
  :root[data-theme=dark] .mobile-wordmark .brand-official-icon-for-dark{display:block!important}
}

/* Login / register uses the official full PublicBoost lockup */
.auth-brand{
  height:118px;
  margin-bottom:16px;
  padding:7px;
  border-radius:18px;
  background:#050b18;
}
.auth-brand .auth-logo{
  width:128px;
  max-height:108px;
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(30,139,255,.20));
}
@media(max-width:600px){
  .auth-brand{height:96px;margin-bottom:15px;border-radius:16px}
  .auth-brand .auth-logo{width:108px;max-height:88px}
}

/* PublicBoost unified brandmark — same colors in light & dark */
.wordmark{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:0;
  margin-bottom:28px;
  overflow:visible;
}
.pb-brandmark{
  --pb-speed:860ms;
  display:grid;
  place-items:center;
  position:relative;
  isolation:isolate;
  line-height:0;
}
.pb-brandmark--sidebar{
  width:178px;
  min-height:94px;
}
.pb-brandmark__icon{
  width:58px;
  height:auto;
  display:block;
  grid-column:1;
  grid-row:1;
  z-index:3;
  filter:drop-shadow(0 4px 8px rgba(20,95,205,.08));
  animation:pbBrandIconIn var(--pb-speed) cubic-bezier(.16,.8,.2,1) both;
}
.pb-brandmark__copy{
  grid-column:1;
  grid-row:2;
  margin-top:-7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  opacity:0;
  transform:translateY(7px);
  animation:pbBrandCopyIn .46s .62s ease-out forwards;
}
.pb-brandmark__name{
  display:flex;
  align-items:baseline;
  white-space:nowrap;
  font:800 22px/1 Inter,sans-serif;
  letter-spacing:-1.35px;
}
.pb-brandmark__name b,
.pb-brandmark__name strong{
  font-weight:800;
  background:linear-gradient(100deg,#4b68ff 0%,#18c7ff 42%,#287cff 60%,#6a48ff 78%,#cf31e8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pb-brandmark__tag{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.pb-brandmark__tag em{
  font:600 6px/1 Inter,sans-serif;
  font-style:normal;
  letter-spacing:2.7px;
  color:#7f8ba3;
  white-space:nowrap;
}
.pb-brandmark__tag i{
  display:block;
  width:17px;
  height:2px;
  border-radius:99px;
}
.pb-brandmark__tag i:first-child{background:linear-gradient(90deg,#14dfee,#167cff)}
.pb-brandmark__tag i:last-child{background:linear-gradient(90deg,#c62fea,#6841ff)}
.pb-brandmark--sidebar:after{
  content:"";
  position:absolute;
  left:-2px;
  top:41px;
  width:66px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#a73cff 18%,#1fa8ff 65%,#81f6ff);
  box-shadow:0 0 5px rgba(107,75,255,.40),0 0 11px rgba(20,184,255,.30);
  transform:rotate(-31deg) scaleX(.08);
  transform-origin:right center;
  opacity:0;
  animation:pbBrandTrail 940ms 90ms cubic-bezier(.2,.75,.25,1) both;
  z-index:2;
  pointer-events:none;
}
@keyframes pbBrandIconIn{
  0%{opacity:0;transform:translate(-58px,40px) scale(.86);filter:blur(6px) drop-shadow(0 0 22px rgba(53,129,255,.55))}
  65%{opacity:1;transform:translate(3px,-2px) scale(1.02);filter:blur(0)}
  100%{opacity:1;transform:none}
}
@keyframes pbBrandCopyIn{
  to{opacity:1;transform:none}
}
@keyframes pbBrandTrail{
  0%{opacity:0;transform:rotate(-31deg) translateX(-46px) scaleX(.08)}
  22%{opacity:1}
  72%{opacity:.8;transform:rotate(-31deg) translateX(70px) scaleX(1)}
  100%{opacity:0;transform:rotate(-31deg) translateX(110px) scaleX(.25)}
}
@media(max-width:1240px) and (min-width:1041px){
  .pb-brandmark--sidebar{width:154px;min-height:86px}
  .pb-brandmark__icon{width:52px}
  .pb-brandmark__name{font-size:19px;letter-spacing:-1.1px}
  .pb-brandmark__tag em{font-size:5.4px;letter-spacing:2.3px}
}
@media(max-width:1040px) and (min-width:601px){
  .wordmark{margin-bottom:24px}
  .pb-brandmark--sidebar{width:48px;min-height:48px}
  .pb-brandmark--sidebar .pb-brandmark__icon{width:46px}
  .pb-brandmark--sidebar .pb-brandmark__copy,
  .pb-brandmark--sidebar:after{display:none!important}
}
.mobile-wordmark{display:none}
.pb-brandmark--mobile{
  width:40px;
  height:40px;
}
.pb-brandmark--mobile .pb-brandmark__icon{
  width:40px;
  animation:pbBrandMobileIn .56s cubic-bezier(.16,.8,.2,1) both;
}
@keyframes pbBrandMobileIn{
  0%{opacity:0;transform:translate(-14px,10px) scale(.86)}
  100%{opacity:1;transform:none}
}
@media(max-width:600px){
  .mobile-wordmark{display:flex!important}
}
@media(prefers-reduced-motion:reduce){
  .pb-brandmark__icon,
  .pb-brandmark__copy,
  .pb-brandmark:after{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* PublicBoost auth brand — same clean artwork as the live shell */
.auth-brandmark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 0 22px;
}
.auth-brandmark>img{
  width:54px;
  height:54px;
  object-fit:contain;
  filter:drop-shadow(0 5px 12px rgba(28,116,225,.12));
}
.auth-brandmark>span{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.auth-brandmark b{
  font:800 23px/1 Inter,sans-serif;
  letter-spacing:-1.2px;
  background:linear-gradient(100deg,#4b68ff,#18c7ff 43%,#6a48ff 74%,#cf31e8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.auth-brandmark small{
  font:700 7px/1 Inter,sans-serif;
  letter-spacing:2.5px;
  color:var(--faint);
}
.auth-startup-panel .auth-brandmark{margin-bottom:18px}
@media(max-width:600px){
  .auth-brandmark{margin-bottom:18px;gap:8px}
  .auth-brandmark>img{width:48px;height:48px}
  .auth-brandmark b{font-size:21px}
  .auth-brandmark small{font-size:6.5px;letter-spacing:2.2px}
}

/* Account recovery + password security */
.auth-forgot{display:block;margin:13px auto 0;padding:4px 6px;background:transparent;color:var(--accent);font-size:10.5px;font-weight:750}
.auth-forgot:hover{text-decoration:underline;text-underline-offset:3px}
.auth-recovery-help{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--field);color:var(--muted);font-size:9.5px;line-height:1.55}
.auth-recovery-help svg{width:15px;height:15px;flex:none;color:var(--accent);margin-top:1px}
.account-security-actions{display:grid;gap:9px;margin-top:12px}
.account-security-actions>button{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--field);color:var(--text);text-align:left}
.account-security-actions>button:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--surface-hover)}
.account-security-actions>button>svg:first-child{width:18px;height:18px;color:var(--accent)}
.account-security-actions>button>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.account-security-actions>button b{font-size:10.5px}
.account-security-actions>button small{font-size:9px;color:var(--muted);line-height:1.45}
.account-security-actions>button>svg:last-child{width:15px;height:15px;color:var(--faint)}
.recovery-key-panel{text-align:center;display:grid;gap:12px}
.recovery-key-icon{width:50px;height:50px;margin:0 auto;border-radius:15px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.recovery-key-icon svg{width:23px;height:23px}
.recovery-key-panel h3{margin:0;font-size:17px}
.recovery-key-panel p{margin:0 auto;color:var(--muted);font-size:10.5px;line-height:1.65;max-width:360px}
.recovery-key-panel code{display:block;padding:14px 12px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:12px;background:var(--field);color:var(--text);font:800 15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.8px;word-break:break-all}
.recovery-key-panel .recovery-copy{height:42px;justify-self:center}
.recovery-key-panel>small{color:var(--faint);font-size:9px;line-height:1.55}
@media(max-width:600px){.account-security-actions>button{grid-template-columns:34px minmax(0,1fr) 16px}.recovery-key-panel code{font-size:13px}}

/* Order success — direct purchase result with animated check */
.review-dialog:has(.order-success){max-width:510px;overflow:hidden;border-radius:24px}
.review-dialog:has(.order-success) .dialog-head{position:absolute;top:14px;right:14px;z-index:6;padding:0;border:0}
.review-dialog:has(.order-success) .dialog-head h2{display:none}
.review-dialog:has(.order-success) .dialog-head button{width:38px;height:38px;padding:0;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--field) 90%,transparent);color:var(--muted)}
.review-dialog:has(.order-success) .dialog-head button:hover{background:var(--surface-hover);color:var(--text)}
.review-dialog:has(.order-success) .dialog-content{padding:30px 30px 28px}
.order-success{position:relative;text-align:center;overflow:hidden}
.order-success-burst{position:absolute;left:50%;top:38px;width:190px;height:120px;transform:translateX(-50%);pointer-events:none}
.order-success-burst i{position:absolute;width:8px;height:3px;border-radius:4px;background:#18b979;opacity:0;animation:pbSuccessSpark .72s .15s cubic-bezier(.2,.8,.2,1) forwards}
.order-success-burst i:nth-child(1){left:10px;top:44px;transform:rotate(62deg);background:#6f50e7}
.order-success-burst i:nth-child(2){left:32px;top:12px;transform:rotate(68deg)}
.order-success-burst i:nth-child(3){right:28px;top:13px;transform:rotate(-35deg)}
.order-success-burst i:nth-child(4){right:7px;top:51px;transform:rotate(-55deg);background:#7c5df0}
.order-success-burst i:nth-child(5){left:34px;bottom:5px;transform:rotate(-28deg)}
.order-success-burst i:nth-child(6){right:33px;bottom:9px;transform:rotate(36deg);background:#22c78a}
.order-success-check{position:relative;width:96px;height:96px;margin:0 auto 17px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#14aa70 14%,var(--surface));animation:pbSuccessHalo .7s cubic-bezier(.2,.8,.2,1) both}
.order-success-check:before,.order-success-check:after{content:'';position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(20,170,112,.18);animation:pbSuccessRing 1.35s .2s ease-out 2}
.order-success-check:after{inset:2px;border-color:rgba(20,170,112,.10);animation-delay:.36s}
.order-success-check span{position:relative;z-index:2;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#14aa70;color:#fff;box-shadow:0 10px 28px rgba(20,170,112,.24);animation:pbSuccessPop .54s .08s cubic-bezier(.18,1.35,.35,1) both}
.order-success-check svg{width:30px;height:30px;stroke-width:2.5;animation:pbSuccessCheck .38s .34s ease-out both}
.order-success-heading h2{font-size:27px;line-height:1.35;letter-spacing:-.55px;color:#12a36a}
.order-success-heading p{margin:7px auto 0;max-width:390px;color:var(--muted);font-size:11.5px;line-height:1.7}
.order-success-summary{margin-top:22px;padding:14px 16px;display:flex;align-items:center;gap:11px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--field)}
.order-success-summary .social-icon{width:35px;height:35px;flex:none}
.order-success-summary div{min-width:0}
.order-success-summary b{display:block;font-size:12.5px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.order-success-summary small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.order-success-actions{display:grid;gap:9px;margin-top:18px}
.order-success-track{width:100%;height:50px;margin:0!important;justify-content:center;border-radius:12px;font-size:13px;font-weight:800}
.order-success-new{width:100%;height:48px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:12px;background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:750}
.order-success-new svg{width:16px;height:16px}
@keyframes pbSuccessHalo{0%{opacity:0;transform:scale(.72)}70%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes pbSuccessPop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}70%{opacity:1;transform:scale(1.12) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes pbSuccessRing{0%{opacity:.65;transform:scale(.75)}100%{opacity:0;transform:scale(1.4)}}
@keyframes pbSuccessCheck{0%{opacity:0;transform:scale(.5) rotate(-14deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes pbSuccessSpark{0%{opacity:0;transform:translateY(10px) scale(.4) rotate(0)}55%{opacity:1}100%{opacity:0;transform:translateY(-7px) scale(1) rotate(130deg)}}
@media(max-width:600px){.review-dialog:has(.order-success){width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:20px}.review-dialog:has(.order-success) .dialog-content{padding:27px 17px 18px}.review-dialog:has(.order-success) .dialog-head{top:10px;right:10px}.order-success-check{width:88px;height:88px;margin-bottom:14px}.order-success-check span{width:57px;height:57px}.order-success-heading h2{font-size:23px}.order-success-heading p{font-size:10.5px}.order-success-summary{margin-top:18px;padding:13px}.order-success-summary b{font-size:11.5px}.order-success-burst{width:175px;top:35px}}
@media(prefers-reduced-motion:reduce){.order-success-burst i,.order-success-check,.order-success-check:before,.order-success-check:after,.order-success-check span,.order-success-check svg{animation:none!important;opacity:1!important;transform:none!important}}

/* Recent/saved order links */
.link-history-wrap{position:relative}
.saved-link-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 7px);
  z-index:48;
  padding:6px;
  max-height:248px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 18px 52px #0007;
}
.saved-link-menu button{
  width:100%;
  min-height:43px;
  padding:9px 10px;
  border-radius:9px;
  display:flex;
  align-items:center;
  gap:9px;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.saved-link-menu button:hover{background:var(--surface-hover)}
.saved-link-menu button svg{
  width:15px;
  height:15px;
  flex:none;
  color:var(--accent);
}
.saved-link-menu button span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}
@media(max-width:600px){
  .saved-link-menu{top:calc(100% + 6px);max-height:220px;border-radius:12px}
  .saved-link-menu button{min-height:45px;padding:10px 9px}
  .saved-link-menu button span{font-size:13px}
}

/* Mobile PublicBoost wordmark */
.pb-mobile-name{display:none}
@media(max-width:600px){
  .mobile-wordmark{
    display:flex!important;
    align-items:center;
    min-width:0;
  }
  .pb-brandmark--mobile{
    width:auto;
    height:40px;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .pb-brandmark--mobile .pb-brandmark__icon{
    width:38px;
    flex:0 0 38px;
  }
  .pb-mobile-name{
    display:flex;
    align-items:baseline;
    white-space:nowrap;
    font:800 15px/1 Inter,sans-serif;
    letter-spacing:-.75px;
  }
  .pb-mobile-name b{
    color:var(--text);
    font-weight:800;
  }
  .pb-mobile-name strong{
    font-weight:800;
    background:linear-gradient(100deg,#22dfff 0%,#0b82ff 38%,#5147ff 68%,#cf31e8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .top-left{min-width:0}
}
@media(max-width:370px){
  .pb-mobile-name{font-size:13.5px;letter-spacing:-.65px}
  .pb-brandmark--mobile{gap:5px}
  .pb-brandmark--mobile .pb-brandmark__icon{width:35px;flex-basis:35px}
}

/* Mobile shell polish — floating header + dock navigation */
@media(max-width:600px){
  :root{
    --mobile-dock-gap:10px;
  }

  .topbar{
    top:8px;
    width:calc(100% - 20px);
    height:60px;
    margin:8px 10px 0;
    padding:0 10px;
    gap:8px;
    border:1px solid color-mix(in srgb,var(--line) 88%,transparent);
    border-radius:18px;
    background:color-mix(in srgb,var(--surface) 90%,transparent);
    box-shadow:0 12px 34px color-mix(in srgb,#111827 12%,transparent);
    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
  }

  .top-left{
    min-width:0;
    flex:1;
    gap:0;
  }
  .mobile-wordmark{
    min-width:0;
    max-width:100%;
  }
  .pb-brandmark--mobile{
    width:auto;
    height:38px;
    gap:6px;
  }
  .pb-brandmark--mobile .pb-brandmark__icon{
    width:35px;
    flex:0 0 35px;
  }
  .pb-mobile-name{
    font-size:14px;
    letter-spacing:-.7px;
  }

  .top-actions{
    gap:5px;
    flex:none;
  }
  .balance-pill{
    min-width:64px;
    height:38px;
    margin:0;
    padding:0 9px;
    justify-content:center;
    border:1px solid color-mix(in srgb,var(--accent) 15%,var(--line));
    border-radius:12px;
    background:color-mix(in srgb,var(--accent-soft) 52%,var(--surface));
  }
  .balance-pill b{
    font-size:13px;
    font-weight:750;
    letter-spacing:-.2px;
  }
  .icon-button,.language-button{
    min-width:38px;
    width:38px;
    height:38px;
    border-radius:12px;
    background:color-mix(in srgb,var(--surface) 94%,var(--accent) 6%);
    box-shadow:0 2px 8px #11182708;
  }

  /* Premium floating bottom dock */
  .bottom-nav{
    left:10px;
    right:10px;
    bottom:max(8px,env(safe-area-inset-bottom));
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding:7px 6px;
    border:1px solid color-mix(in srgb,var(--line) 90%,transparent);
    border-radius:21px;
    background:color-mix(in srgb,var(--surface) 91%,transparent);
    box-shadow:0 16px 42px color-mix(in srgb,#111827 17%,transparent);
    backdrop-filter:blur(26px) saturate(150%);
    -webkit-backdrop-filter:blur(26px) saturate(150%);
    overflow:hidden;
  }
  .bottom-nav .nav-link{
    min-height:54px;
    padding:7px 2px 6px;
    gap:3px;
    border-radius:14px;
    font-size:9px;
    font-weight:650;
    color:var(--muted);
    transition:background .18s,color .18s,transform .18s,box-shadow .18s;
  }
  .bottom-nav .nav-link svg{
    width:20px;
    height:20px;
  }
  .bottom-nav .nav-link.active{
    color:var(--accent);
    background:color-mix(in srgb,var(--accent-soft) 82%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent);
  }
  .bottom-nav .nav-link.active svg{
    transform:translateY(-1px);
  }
  .bottom-nav .nav-link.active:before{
    content:"";
    position:absolute;
    top:3px;
    width:18px;
    height:2px;
    border-radius:999px;
    background:var(--accent);
    opacity:.72;
  }
  .bottom-nav .nav-link{
    position:relative;
  }

  /* Floating checkout sits clearly above the dock */
  .mobile-checkout{
    left:12px;
    right:12px;
    bottom:calc(var(--mobile-nav-height,72px) + 18px);
    min-height:66px;
    padding:10px 12px;
    border:1px solid color-mix(in srgb,var(--line) 90%,transparent);
    border-radius:18px;
    background:color-mix(in srgb,var(--surface) 94%,transparent);
    box-shadow:0 14px 36px color-mix(in srgb,#111827 15%,transparent);
    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
  }
  .mobile-checkout-total strong{
    font-size:21px;
  }
  .mobile-checkout .primary-button{
    height:46px;
    min-width:132px;
    border-radius:13px;
    box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 22%,transparent);
  }

  body[data-mobile-order-page=true] main{
    padding-bottom:calc(var(--mobile-nav-height,72px) + 42px);
  }
  body[data-mobile-checkout-visible=true] main{
    padding-bottom:calc(var(--mobile-nav-height,72px) + var(--mobile-checkout-height,66px) + 58px);
  }
  body[data-mobile-checkout-visible=true] #homeComposer .checkout-bar{
    opacity:0;
    pointer-events:none;
  }

  .toast{
    bottom:calc(var(--mobile-nav-height,72px) + 22px);
  }
  body[data-mobile-checkout-visible=true] .toast{
    bottom:calc(var(--mobile-nav-height,72px) + var(--mobile-checkout-height,66px) + 30px);
  }
}

@media(max-width:370px){
  .topbar{
    width:calc(100% - 14px);
    margin-left:7px;
    margin-right:7px;
    padding:0 8px;
  }
  .pb-brandmark--mobile .pb-brandmark__icon{
    width:32px;
    flex-basis:32px;
  }
  .pb-mobile-name{
    font-size:12.5px;
  }
  .balance-pill{
    min-width:58px;
    padding:0 7px;
  }
  .icon-button,.language-button{
    min-width:35px;
    width:35px;
    height:35px;
  }
  .bottom-nav{
    left:7px;
    right:7px;
  }
}

/* Desktop sidebar polish — compact premium navigation */
@media(min-width:1041px){
  .sidebar{
    padding:24px 14px 16px;
    border-right:1px solid color-mix(in srgb,var(--line) 72%,transparent);
    box-shadow:10px 0 30px color-mix(in srgb,#111827 3.5%,transparent);
  }

  .wordmark{
    margin-bottom:28px;
  }

  .side-caption{
    padding:0 12px 10px;
    font-size:9px;
    font-weight:650;
    letter-spacing:1.35px;
    color:color-mix(in srgb,var(--faint) 88%,transparent);
  }

  .desktop-nav{
    display:grid;
    gap:6px;
    padding:6px;
    border:1px solid color-mix(in srgb,var(--line) 54%,transparent);
    border-radius:18px;
    background:color-mix(in srgb,var(--surface) 44%,transparent);
  }

  .desktop-nav .nav-link{
    min-height:50px;
    padding:8px 10px;
    gap:10px;
    border-radius:13px;
    color:var(--muted);
    font-size:13px;
    font-weight:560;
    position:relative;
    background:transparent;
  }

  .desktop-nav .nav-link svg{
    width:19px;
    height:19px;
    padding:0;
    color:color-mix(in srgb,var(--muted) 92%,transparent);
  }

  .desktop-nav .nav-link:hover{
    background:color-mix(in srgb,var(--surface-hover) 72%,transparent);
    color:var(--text);
  }

  .desktop-nav .nav-link.active{
    color:var(--text);
    background:
      linear-gradient(120deg,
        color-mix(in srgb,var(--accent-soft) 92%,var(--surface)) 0%,
        color-mix(in srgb,var(--accent-soft) 68%,var(--surface)) 100%);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),
      0 8px 18px color-mix(in srgb,var(--accent) 7%,transparent);
  }

  .desktop-nav .nav-link.active svg{
    color:var(--accent);
  }

  .desktop-nav .nav-link.active:before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:3px;
    height:20px;
    border-radius:0 999px 999px 0;
    background:linear-gradient(180deg,#9c87ff,#704be7);
    transform:translateY(-50%);
    box-shadow:0 0 10px color-mix(in srgb,var(--accent) 28%,transparent);
  }

  .desktop-nav .nav-link.active:after{
    width:5px;
    height:5px;
    margin-left:auto;
    background:var(--accent);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent);
  }

  .sidebar-bottom{
    padding-top:20px;
  }

  .help-note{
    padding:15px 12px 18px;
    margin:0 6px;
    border-top:1px solid color-mix(in srgb,var(--line) 58%,transparent);
  }

  .help-note p{
    margin-top:4px;
    font-size:11px;
    line-height:1.75;
  }

  .side-version{
    margin:0 6px;
    padding:11px 8px 0;
    font-size:8px;
    letter-spacing:1.2px;
    border-top:1px solid color-mix(in srgb,var(--line) 48%,transparent);
  }
}

@media(min-width:1041px) and (max-width:1240px){
  .sidebar{
    padding-left:10px;
    padding-right:10px;
  }
  .desktop-nav{
    padding:5px;
  }
  .desktop-nav .nav-link{
    min-height:48px;
    padding:8px 9px;
    font-size:12px;
  }
}

/* Refill-aware order status */
.status.refill-protected{
  color:var(--green);
  font-weight:650;
}
.status.refill-protected:before{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 10%,transparent);
}

/* Keep refill/order status inside the Orders card */
.history-row{
  grid-template-columns:minmax(0,1fr) 92px 90px minmax(150px,190px);
}
.history-order-state{
  width:100%;
  max-width:100%;
  min-width:0;
  justify-items:end;
}
.history-order-state .status{
  max-width:100%;
  white-space:normal;
  text-align:right;
  justify-content:flex-end;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.order-actions{
  max-width:100%;
  justify-content:flex-end;
}

@media(max-width:1000px){
  .history-row{
    grid-template-columns:minmax(0,1fr) 78px 76px minmax(132px,170px);
    gap:10px;
  }
  .history-order-state .status{
    font-size:9px;
  }
}

@media(max-width:860px){
  .history-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .history-order-state{
    grid-column:1/-1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .history-order-state .status{
    flex:1 1 auto;
    min-width:0;
    text-align:left;
    justify-content:flex-start;
  }
  .order-actions{
    flex:0 0 auto;
  }
}

@media(max-width:600px){
  .history-row{
    overflow:hidden;
  }
  .history-order-state{
    align-items:flex-start;
  }
  .history-order-state .status{
    font-size:9px;
    line-height:1.55;
  }
}


/* Customer UX — smart link, fast repeat orders, live tracking */
.orders-title-stack{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:5px}
.orders-title-stack h2{margin:0}
.history-title .orders-live-label{display:inline-flex;align-items:center;gap:6px;font-size:10px;line-height:1.5;white-space:normal;color:var(--muted)}
.orders-live-pulse{height:6px;width:6px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.order-actions button.order-reorder{display:inline-flex;align-items:center;justify-content:center;gap:5px;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 22%,var(--line));font-weight:750;min-height:30px;max-width:100%;line-height:1.4;white-space:normal;text-align:center}
.order-actions button.order-reorder svg{width:12px;height:12px;flex:none}
@media(max-width:600px){
 .history-title{gap:12px;align-items:flex-start}
 .history-title .orders-live-label{font-size:9px}
 .history-title .orders-refresh{flex:none}
 .order-actions{gap:6px;flex-wrap:wrap;justify-content:flex-start}
 .order-actions button.order-reorder{min-height:34px;padding:7px 9px;font-size:9.5px}
}

@media(min-width:861px){.history-row{grid-template-columns:minmax(0,1fr) 88px 80px minmax(132px,165px)}}
@media(max-width:860px) and (min-width:601px){.history-row{grid-template-columns:minmax(0,1fr) 70px 72px minmax(122px,140px);gap:9px}.order-actions button.order-reorder{font-size:9px}}

/* Customer essentials: discreet controls, not extra home clutter */
.customer-favorite{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:11px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--field);color:var(--muted);font:700 10px/1.4 Inter,'Noto Sans Khmer',sans-serif;cursor:pointer}
.customer-favorite svg{width:13px;height:13px}.customer-favorite.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 24%,var(--line));background:var(--accent-soft)}
.customer-favorites-panel{border:1px solid var(--line);background:var(--surface);padding:14px;border-radius:14px;margin:15px 0}.customer-favorites-head{display:flex;align-items:center;gap:7px;font-size:12px}.customer-favorites-head svg{width:15px;height:15px;color:var(--accent)}.customer-favorites-list{display:flex;flex-direction:column;gap:7px;margin-top:9px}.customer-favorites-list button{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);color:var(--text);background:var(--field);text-align:left;font:600 10px/1.6 Inter,'Noto Sans Khmer',sans-serif;cursor:pointer}.customer-favorites-list svg{width:13px;height:13px;flex:none}
.customer-support-toolbar{display:flex;justify-content:flex-end;margin:0 0 13px}.customer-support-toolbar button{display:flex;gap:7px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--text);font:700 11px/1.5 Inter,'Noto Sans Khmer',sans-serif;cursor:pointer}.customer-support-toolbar svg{width:15px;height:15px}
.customer-receipt{display:grid;gap:3px}.customer-receipt-row{display:flex;align-items:start;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:10px 0;font-size:11px}.customer-receipt-row span{color:var(--muted);flex:none}.customer-receipt-row b{text-align:right;overflow-wrap:anywhere;font-size:11px}.customer-receipt>p{font-size:10px;color:var(--muted);line-height:1.7;margin:12px 0}.customer-receipt button{display:flex;align-items:center;justify-content:center;gap:7px}.customer-receipt button svg{width:16px;height:16px}
#customerSupportForm,#customerTicketReply{display:grid;gap:14px}#customerSupportForm label{display:grid;gap:6px;color:var(--muted);font-size:11px}#customerSupportForm textarea,#customerSupportForm select,#customerTicketReply textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--text);font:12px/1.7 Inter,'Noto Sans Khmer',sans-serif;outline:0;resize:vertical}#customerSupportForm button,#customerTicketReply button{width:100%}.customer-small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.customer-ticket-chat{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto;margin:12px 0}.customer-ticket-msg{padding:12px;border-radius:11px;border:1px solid var(--line);background:var(--field);align-self:flex-end;max-width:95%}.customer-ticket-msg.admin{align-self:flex-start;background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.customer-ticket-msg b{font-size:10px}.customer-ticket-msg p{margin:5px 0;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.customer-ticket-msg small{color:var(--muted);font-size:9px}.customer-ticket-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.customer-ticket-head small{color:var(--muted);font-size:10px;overflow-wrap:anywhere}.customer-ticket-head b{font-size:11px;color:var(--accent)}.customer-ticket-list{display:flex;flex-direction:column;gap:8px}.customer-ticket-list button{display:flex;flex-direction:column;align-items:start;gap:5px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--field);color:var(--text);text-align:left}.customer-ticket-list b{font-size:12px}.customer-ticket-list small{font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.customer-resume-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 15px;margin-bottom:16px;border-radius:13px;border:1px solid color-mix(in srgb,var(--accent) 27%,var(--line));background:var(--accent-soft);color:var(--text);font-size:11px;line-height:1.7}.customer-resume-note>svg{width:17px;height:17px;color:var(--accent);flex:none}.customer-resume-note span{flex:1;min-width:170px}.customer-resume-note button{border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));padding:8px 10px;border-radius:9px;background:var(--surface);color:var(--accent);font-size:11px;font-weight:800;cursor:pointer}.customer-resume-note.ready{border-color:var(--green)}
.customer-notification-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}.customer-notification-trigger i{position:absolute;right:-2px;top:-3px;min-width:16px;padding:2px 4px;background:#e65c70;color:white;font:800 9px/1.2 Inter,Arial,sans-serif;font-style:normal;border-radius:99px}.customer-notification-trigger i[hidden]{display:none}.customer-notification-list{display:grid;gap:9px}.customer-notification-item{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:1px solid var(--line);border-radius:12px;padding:12px}.customer-notification-item.read{background:var(--field)}.customer-notification-item b{font-size:11px}.customer-notification-item p{font-size:11px;overflow-wrap:anywhere;margin:5px 0}.customer-notification-item small{font-size:9px;color:var(--muted)}
@media(max-width:600px){.customer-favorite{font-size:11px}.customer-resume-note{padding:12px}.customer-resume-note button{width:100%;min-height:37px}.customer-notification-trigger{min-width:31px!important;width:31px!important;height:32px!important}.customer-notification-trigger svg{width:16px!important}.customer-receipt-row{flex-wrap:wrap;gap:6px}.customer-receipt-row span{flex:1 0 80px}.customer-receipt-row b{flex:1 0 120px}}

/* Order support: clear optional details, visible feedback */
#customerSupportForm .customer-support-help{margin:0;color:var(--muted);font-size:11px;line-height:1.7}
#customerSupportForm .customer-support-error{color:var(--danger);font-size:11px;line-height:1.7;margin:0;padding:9px 11px;border-radius:9px;border:1px solid color-mix(in srgb,var(--danger) 25%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--surface));overflow-wrap:anywhere}
#customerSupportForm .customer-support-error[hidden]{display:none}
#customerSupportForm button[disabled]{opacity:.65;cursor:wait}

/* Reliable click/touch selection for Support issues (no native select popup) */
.customer-support-category{display:grid;gap:9px;min-width:0}
.customer-support-category-heading{color:var(--muted);font-size:11px;font-weight:650;line-height:1.6}
.customer-support-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.customer-support-choice{display:flex;align-items:center;gap:8px;min-height:43px;width:100%;text-align:left;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:11px;padding:10px 12px;font:650 11px/1.5 Inter,'Noto Sans Khmer',sans-serif;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}
.customer-support-choice:hover,.customer-support-choice:focus-visible{border-color:var(--accent);outline:2px solid transparent;background:var(--accent-soft)}
.customer-support-choice.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent)}
.customer-choice-check{width:19px;height:19px;display:grid;place-items:center;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface)}
.customer-choice-check svg{width:11px;height:11px;visibility:hidden}
.customer-support-choice.selected .customer-choice-check{border-color:var(--accent);background:var(--accent);color:#fff}
.customer-support-choice.selected .customer-choice-check svg{visibility:visible}
@media(max-width:600px){.customer-support-choice-grid{gap:7px}.customer-support-choice{min-height:44px;padding:9px 8px;font-size:10px;gap:6px}}


/* Mobile viewport continuity v20261009.18
   iOS rubber-band overscroll reveals the document canvas. Keep that canvas the
   same color as the actual page, including dark-mode and outside the app shell.
   Native Safari browser toolbars themselves remain managed by iOS. */
html {
  background-color: var(--bg);
}
body {
  background-color: var(--bg);
}
@media (max-width:600px) {
  :root {
    --pb-safe-top: env(safe-area-inset-top, 0px);
    --pb-safe-bottom: env(safe-area-inset-bottom, 0px);
  }
  html {
    min-height: 100%;
    background-color: var(--bg);
    overscroll-behavior-x: none;
  }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background-color: var(--bg);
    overflow-x: clip;
  }
  .app-shell,
  .main-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: transparent;
  }
  /* Reserve the status-bar safe area in standalone iOS, without doubling it
     inside ordinary Safari where the top safe-area is generally zero. */
  .topbar {
    top: calc(var(--pb-safe-top) + 8px);
    margin-top: calc(var(--pb-safe-top) + 8px);
    background: color-mix(in srgb,var(--surface) 94%,transparent);
    border: 1px solid color-mix(in srgb,var(--line) 84%,transparent);
    border-radius: 20px;
    box-shadow: 0 12px 30px color-mix(in srgb,#16162c 12%,transparent);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    isolation: isolate;
  }
  .bottom-nav {
    bottom: calc(9px + var(--pb-safe-bottom));
    left: 10px;
    right: 10px;
    padding: 7px 7px;
    border: 1px solid color-mix(in srgb,var(--line) 82%,transparent);
    border-radius: 23px;
    background: color-mix(in srgb,var(--surface) 95%,transparent);
    box-shadow: 0 12px 36px color-mix(in srgb,#16162c 16%,transparent);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
  }
  .bottom-nav .nav-link {
    min-height: 54px;
    touch-action: manipulation;
  }
  /* --mobile-nav-height includes the complete safe-area dock footprint,
     calculated by syncMobileCheckout(). Prevent overlap on short screens. */
  main {
    padding-bottom: calc(var(--mobile-nav-height,88px) + 24px);
  }
  body[data-mobile-order-page=true] main {
    padding-bottom: calc(var(--mobile-nav-height,88px) + 40px);
  }
  body[data-mobile-checkout-visible=true] main {
    padding-bottom: calc(var(--mobile-nav-height,88px) + var(--mobile-checkout-height,66px) + 48px);
  }
  .mobile-checkout {
    bottom: calc(var(--mobile-nav-height,88px) + 12px);
  }
  .toast {
    bottom: calc(var(--mobile-nav-height,88px) + 18px);
  }
  body[data-mobile-checkout-visible=true] .toast {
    bottom: calc(var(--mobile-nav-height,88px) + var(--mobile-checkout-height,66px) + 22px);
  }
}
@media (max-width:370px) {
  .bottom-nav {left:7px;right:7px;border-radius:19px;}
  .topbar {border-radius:17px;}
}


/* iOS app shell: lock root document scroll v20261009.19
   Safari can paint a moving root-scrolled page behind its translucent bars.
   Scroll ONLY .main-shell on phones, so the root canvas never rubber-bands.
   Desktop and tablet layout remain unchanged. */
@media (max-width:600px) {
  html,
  body {
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    background: var(--bg);
  }
  .app-shell {
    display: block;
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .main-shell {
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: clip;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    background: transparent;
  }
  /* The 8px space above the floating header and the area under the home
     indicator are painted by the app, never by scrolling content. */
  body::before,
  body::after {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
    background: var(--bg);
  }
  body::before {
    top: 0;
    height: calc(var(--pb-safe-top,0px) + 9px);
    z-index: 29;
  }
  body::after {
    bottom: 0;
    height: calc(var(--pb-safe-bottom,0px) + 9px);
    z-index: 60;
  }
  .main-shell .topbar {
    position: sticky;
    z-index: 30;
  }
  /* The bottom nav stays outside the scrolling shell (fixed viewport dock). */
  .bottom-nav { z-index: 70; }
}

/* Wallet transaction history: paged real ledger, responsive and keyboard accessible */
.wallet-view-all{display:inline-flex;align-items:center;gap:5px;border-radius:8px;padding:7px 10px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}
.wallet-view-all svg{width:13px;height:13px}
.pb-wallet-detail{display:grid;gap:12px;min-height:120px}
.pb-wallet-detail-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pb-wallet-detail-top p{margin:0;max-width:280px;font-size:11px;color:var(--muted);line-height:1.6}
.pb-wallet-detail-top select{min-height:39px;background:var(--field);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:7px 12px;font-size:11px}
.pb-wallet-detail-list{max-height:min(54vh,440px);overflow-y:auto;border:1px solid var(--line);border-radius:13px}
.pb-wallet-detail-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px 12px;border-top:1px solid var(--line)}
.pb-wallet-detail-row:first-child{border-top:0}
.pb-wallet-detail-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.pb-wallet-detail-icon.plus{background:color-mix(in srgb,var(--green) 12%,var(--surface));color:var(--green)}
.pb-wallet-detail-icon svg{width:16px;height:16px}
.pb-wallet-detail-description{min-width:0}
.pb-wallet-detail-description b{display:block;font-size:11px;line-height:1.55}
.pb-wallet-detail-description small{display:block;color:var(--muted);font-size:10px}
.pb-wallet-detail-row strong{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-wallet-detail-row .positive{color:var(--green)}
.pb-wallet-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:11px}
.pb-wallet-detail-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pb-wallet-detail-footer small{color:var(--muted);font-size:10px}
.pb-wallet-detail-footer button{padding:8px 10px;border:1px solid var(--line);background:var(--accent-soft);color:var(--accent);border-radius:9px;font-size:11px}
@media(max-width:600px){.pb-wallet-detail-top select{flex:1;max-width:190px}.pb-wallet-detail-row{padding:9px}.pb-wallet-detail-row strong{font-size:11px}}

/* PublicBoost Order History: open/copy the original target, in native purple UI */
.history-service>div{min-width:0}
.history-target{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%;margin-top:9px}
.history-target-caption{display:inline-flex;align-items:center;gap:5px;font-size:10px;line-height:1.5;font-weight:650;color:var(--muted)}
.history-target-caption svg{width:13px;height:13px;color:var(--accent)}
.history-target-controls{display:flex;align-items:stretch;gap:7px;min-width:0;max-width:100%}
.history-target-url{display:flex;align-items:center;gap:7px;flex:0 1 345px;max-width:345px;min-width:0;height:34px;padding:0 10px;color:var(--accent);font-size:10.5px;line-height:1.3;font-weight:600;background:color-mix(in srgb,var(--accent-soft) 58%,var(--field));border:1px solid color-mix(in srgb,var(--accent) 21%,var(--line));border-radius:9px;transition:background .18s,border-color .18s}
.history-target-url>span:first-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.history-target-url .history-target-open{display:grid;place-items:center;flex:none}
.history-target-url svg{width:13px;height:13px}
.history-target-url:hover,.history-target-url:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.history-target-copy{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:5px;min-height:34px;padding:0 10px;background:var(--field);border:1px solid var(--line);color:var(--muted);border-radius:9px;font:700 10px/1.5 Inter,'Noto Sans Khmer',sans-serif}
.history-target-copy svg{width:13px;height:13px}
.history-target-copy:hover,.history-target-copy:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
@media(max-width:860px){.history-target{margin-top:10px}.history-target-url{max-width:100%;flex:1 1 0}.history-target-controls{width:100%}.history-target-copy{min-height:36px}.history-target-caption{font-size:9px}}
@media(max-width:400px){.history-target-copy span{display:none}.history-target-copy{width:38px;padding:0}.history-target-url{font-size:10px}}

/* PublicBoost v20261017.7 — real KHQR receipt-style checkout (NOKOR-inspired)
   Visual-only: keep the Payment API's original QR image and the existing poll,
   expiry timer, ABA deep link, invoice copy, and dynamic QR regeneration. */
.review-dialog:has(.payment-ready){width:min(486px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.review-dialog:has(.payment-ready) .dialog-head{padding:14px 20px}
.review-dialog:has(.payment-ready) .dialog-content{padding:14px 20px 17px}
.review-dialog:has(.payment-ready) .dialog-head button{border:0;border-radius:10px;outline-offset:3px}
.review-dialog:has(.payment-ready) .dialog-head button:focus-visible{outline:2px solid var(--accent)}
.payment-ready{gap:10px;justify-items:stretch}
.payment-ready .payment-method-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px;min-height:40px}
.payment-ready .payment-method-brand{display:flex;align-items:center;gap:9px;min-width:0}
.payment-ready .payment-method-brand>img{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:none}
.payment-ready .payment-method-brand>span{min-width:0;display:grid;gap:1px}
.payment-ready .payment-method-brand b{font-size:12px;font-weight:800;color:var(--text)}
.payment-ready .payment-method-brand small{font-size:9px;color:var(--muted)}
.payment-ready .payment-method-secure{display:flex;align-items:center;gap:5px;color:var(--green);font-size:9px;white-space:nowrap;font-weight:700}
.payment-ready .payment-method-secure svg{width:13px;height:13px}
.payment-ready .payment-qr-card.khqr-receipt{width:min(100%,338px);margin:0 auto;padding:0;border:0;border-radius:15px;overflow:hidden;background:#fff;color:#171717;box-shadow:0 12px 32px rgba(0,0,0,.15)}
.payment-ready .khqr-receipt-head{height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 17px;background:#e92332;color:#fff}
.payment-ready .khqr-receipt-head strong{font:900 19px/1 Inter,'Noto Sans Khmer',sans-serif;letter-spacing:-.8px;color:#fff}
.payment-ready .khqr-receipt-head span{font:750 10px/1.2 Inter,sans-serif;letter-spacing:.4px;color:#fff9}
.payment-ready .khqr-receipt-body{padding:15px 17px 13px;text-align:center;color:#161616;background:#fff}
.payment-ready .khqr-merchant-label{font-size:9px;line-height:1.5;color:#707070}
.payment-ready .khqr-merchant{font:800 14px/1.5 Inter,'Noto Sans Khmer',sans-serif;letter-spacing:-.2px;color:#1c1c1c;overflow-wrap:anywhere}
.payment-ready .khqr-amount{display:grid;gap:1px;margin-top:10px}
.payment-ready .khqr-amount span{font-size:9px;line-height:1.5;color:#777}
.payment-ready .khqr-amount strong{font:850 28px/1.15 Inter,sans-serif;letter-spacing:-.8px;color:#141414;font-variant-numeric:tabular-nums}
.payment-ready .khqr-divider{height:1px;margin:13px 0 10px;background:repeating-linear-gradient(to right,#c7c7c7 0px,#c7c7c7 6px,transparent 6px,transparent 11px)}
.payment-ready .khqr-receipt .payment-qr-stage{display:grid;place-items:center;width:100%;padding:0;margin:0;border-radius:0;background:#fff!important;box-shadow:none!important}
.payment-ready .khqr-receipt .payment-qr-image{display:block;max-width:100%;width:min(246px,100%);height:auto;aspect-ratio:1/1;object-fit:contain;padding:0;border:0;border-radius:0;background:#fff!important;box-shadow:none!important;filter:none!important}
.payment-ready .khqr-receipt .payment-qr-placeholder{width:min(246px,100%);border-radius:11px;aspect-ratio:1}
.payment-ready .khqr-receipt-instruction{margin:8px 0 0;color:#666;font-size:9px;line-height:1.6}
.payment-ready .payment-qr-head.payment-qr-head-below{width:min(100%,372px);margin:0 auto;padding:5px 3px 2px;align-items:center;gap:6px}
.payment-ready .payment-qr-head-below>div{gap:7px;min-width:0}
.payment-ready .payment-qr-head-below .payment-step{width:23px;height:23px;border-radius:8px}
.payment-ready .payment-qr-head-below small{font-size:9px;line-height:1.35;color:var(--muted)}
.payment-ready .payment-qr-head-below .payment-timer{font-size:11px;min-height:29px;flex:none}
.payment-ready .payment-open-aba{max-width:388px;width:100%;margin:0 auto;min-height:52px;border-radius:12px}
.payment-ready .payment-meta-card{max-width:388px;width:100%;margin:0 auto;border-radius:12px}
.payment-ready .payment-invoice-row{padding:8px 11px}
.payment-ready .payment-meta-card .payment-status-note{padding:8px 11px}
.payment-ready .payment-refresh-row{padding:5px 9px}
.payment-ready .payment-security-line{max-width:388px;margin:0 auto;font-size:8.5px;line-height:1.5}
@media(max-width:600px){
 .review-dialog:has(.payment-ready){width:calc(100% - 18px);max-height:calc(100dvh - 16px);border-radius:18px}
 .review-dialog:has(.payment-ready) .dialog-head{padding:11px 14px}
 .review-dialog:has(.payment-ready) .dialog-content{padding:10px 13px 12px}
 .payment-ready{gap:8px}
 .payment-ready .payment-method-strip{min-height:35px}
 .payment-ready .payment-method-brand>img{height:31px;width:31px}
 .payment-ready .payment-qr-card.khqr-receipt{width:min(100%,326px);border-radius:13px}
 .payment-ready .khqr-receipt-head{height:38px;padding:0 13px}
 .payment-ready .khqr-receipt-head strong{font-size:17px}
 .payment-ready .khqr-receipt-body{padding:11px 12px 10px}
 .payment-ready .khqr-merchant{font-size:12px}
 .payment-ready .khqr-amount{margin-top:7px}
 .payment-ready .khqr-amount strong{font-size:25px}
 .payment-ready .khqr-divider{margin:9px 0 8px}
 .payment-ready .khqr-receipt .payment-qr-image{width:min(234px,100%)}
 .payment-ready .khqr-receipt-instruction{margin-top:6px;font-size:8px}
 .payment-ready .payment-qr-head-below small{max-width:180px;white-space:normal}
 .payment-ready .payment-open-aba{min-height:49px}
}
@media(max-width:350px){
 .payment-ready .khqr-receipt .payment-qr-image{width:min(204px,100%)}
 .payment-ready .payment-method-secure b{display:none}
 .payment-ready .payment-qr-head-below small{font-size:8px;max-width:144px}
}

/* Compact authentic KHQR receipt without a redundant Merchant caption. */
.payment-ready .khqr-merchant{margin-top:3px;margin-bottom:5px}
@media(max-width:600px){.payment-ready .khqr-merchant{margin-top:2px;margin-bottom:3px}}


/* Desktop ABA Mobile button: never leave payment QR; show a red phone-only hint */
.payment-desktop-hint{width:100%;max-width:388px;margin:0 auto;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,#e33443 35%,var(--line));border-radius:11px;background:color-mix(in srgb,#e33443 8%,var(--surface));color:#ec4255;font:700 11px/1.8 Inter,'Noto Sans Khmer',sans-serif;text-align:left}
.payment-desktop-hint[hidden]{display:none!important}
.payment-desktop-hint svg{width:17px;height:17px;flex:none;margin-top:2px;color:#ec4255}
:root[data-theme=light] .payment-desktop-hint{color:#b42334;border-color:#f0c4c9;background:#fff2f3}
:root[data-theme=light] .payment-desktop-hint svg{color:#b42334}
@media(max-width:600px){.payment-desktop-hint{padding:9px 10px;font-size:10px}}


/* True button: Mac/Windows never navigate away from the active QR modal. */
.payment-ready button.payment-open-aba{width:100%;border:0;text-align:left;cursor:pointer;font:inherit}
.payment-ready button.payment-open-aba:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.payment-ready button.payment-open-aba:disabled{cursor:not-allowed;pointer-events:none;opacity:.45}
.payment-ready .payment-desktop-hint:not([hidden]){animation:pbDesktopAbaHint .18s ease-out}
@keyframes pbDesktopAbaHint{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.payment-ready .payment-desktop-hint:not([hidden]){animation:none}}

/* ABA KHQR payment identity, following PublicBoost purple theme
   asset; keeps PublicBoost's existing, real wallet/payment functionality. */
.wallet-payment-method.active.wallet-khqr-method{
  min-height:109px;
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 22px;
  align-items:center;
  column-gap:17px;
  padding:15px 19px;
  border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line));
  border-radius:21px;
  background:color-mix(in srgb,var(--accent-soft) 48%,var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent);
  transition:border-color .16s,box-shadow .16s;
}
.wallet-payment-method.wallet-khqr-method:hover,
.wallet-payment-method.wallet-khqr-method:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent);
}
.wallet-payment-method.wallet-khqr-method .payment-logo.khqr-logo{
  display:block;
  width:76px;
  height:76px;
  padding:0;
  border:0;
  border-radius:19px;
  background:transparent;
  object-fit:contain;
}
.wallet-payment-method.wallet-khqr-method>span:nth-child(2){
  display:grid;
  gap:6px;
  min-width:0;
}
.wallet-payment-method.wallet-khqr-method>span:nth-child(2) b{
  font:800 17px/1.35 Inter,'Noto Sans Khmer',sans-serif;
  color:var(--text);
  letter-spacing:-.15px;
}
.wallet-payment-method.wallet-khqr-method>span:nth-child(2) small{
  margin:0;
  font:550 11px/1.7 Inter,'Noto Sans Khmer',sans-serif;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.wallet-payment-method.wallet-khqr-method>i{color:var(--accent)}
:root[data-theme=light] .wallet-payment-method.active.wallet-khqr-method{
  background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 58%,var(--line));
}
:root[data-theme=light] .wallet-payment-method.wallet-khqr-method>span:nth-child(2) b{color:#23232b}
:root[data-theme=light] .wallet-payment-method.wallet-khqr-method>span:nth-child(2) small{color:var(--muted)}
:root[data-theme=light] .wallet-payment-method.wallet-khqr-method>i{color:var(--accent)}
/* QR modal method header shows the same branding without increasing modal width. */
.payment-ready .payment-method-strip{min-height:53px;gap:8px}
.payment-ready .payment-method-brand{gap:10px;flex:1 1 auto}
.payment-ready .payment-method-brand>img{width:45px;height:45px;border-radius:12px;object-fit:contain;background:transparent}
.payment-ready .payment-method-brand>span{gap:2px}
.payment-ready .payment-method-brand b{font-size:15px;line-height:1.4;font-weight:800;letter-spacing:-.15px}
.payment-ready .payment-method-brand small{font-size:10px;line-height:1.55;color:var(--muted)}
.payment-hero-card .payment-brand-chip img{object-fit:contain;background:transparent}
@media(max-width:600px){
  .wallet-payment-method.active.wallet-khqr-method{min-height:95px;grid-template-columns:63px minmax(0,1fr) 19px;gap:11px;padding:12px 13px;border-radius:17px}
  .wallet-payment-method.wallet-khqr-method .payment-logo.khqr-logo{width:63px;height:63px;border-radius:15px}
  .wallet-payment-method.wallet-khqr-method>span:nth-child(2) b{font-size:15px}
  .wallet-payment-method.wallet-khqr-method>span:nth-child(2) small{font-size:10px;line-height:1.6}
  .payment-ready .payment-method-brand>img{width:40px;height:40px;border-radius:10px}
  .payment-ready .payment-method-brand b{font-size:13px}
  .payment-ready .payment-method-brand small{font-size:9px}
  .payment-ready .payment-method-secure{font-size:8px;flex:none}
}
@media(max-width:360px){
  .payment-ready .payment-method-secure b{display:none}
}


/* Compact payment-method proportions and corrected ABA mark */
.wallet-payment-method.active.wallet-khqr-method{min-height:82px;grid-template-columns:53px minmax(0,1fr) 19px;column-gap:11px;padding:11px 14px;border-width:1px;border-radius:15px}
.wallet-payment-method.wallet-khqr-method .payment-logo.khqr-logo{width:53px;height:53px;border-radius:13px}
.wallet-payment-method.wallet-khqr-method>span:nth-child(2){gap:3px}
.wallet-payment-method.wallet-khqr-method>span:nth-child(2) b{font-size:14px;line-height:1.35}
.wallet-payment-method.wallet-khqr-method>span:nth-child(2) small{font-size:10px;line-height:1.55}
.payment-ready .payment-method-brand>img{width:39px;height:39px;border-radius:10px}
.payment-ready .payment-method-brand b{font-size:13px}
@media(max-width:600px){
 .wallet-payment-method.active.wallet-khqr-method{min-height:77px;grid-template-columns:49px minmax(0,1fr) 18px;gap:9px;padding:10px 12px;border-radius:14px}
 .wallet-payment-method.wallet-khqr-method .payment-logo.khqr-logo{width:49px;height:49px;border-radius:12px}
 .wallet-payment-method.wallet-khqr-method>span:nth-child(2) b{font-size:13px}
 .wallet-payment-method.wallet-khqr-method>span:nth-child(2) small{font-size:9px}
 .payment-ready .payment-method-brand>img{width:36px;height:36px;border-radius:9px}
}

/* v20261017.15 — compact mobile KHQR checkout.
   Keep the actual QR SVG/PNG at a scanner-friendly size; minimize only repeated UI. */
.review-dialog:has(.compact-khqr){width:min(430px,calc(100% - 18px));max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}
.review-dialog:has(.compact-khqr) .dialog-head{position:sticky;top:0;z-index:10;padding:8px 15px;background:var(--surface);border-bottom:1px solid var(--soft-line)}
.review-dialog:has(.compact-khqr) .dialog-head h2{font-size:13px}
.review-dialog:has(.compact-khqr) .dialog-head button{width:31px;height:31px;display:grid;place-items:center}
.review-dialog:has(.compact-khqr) .dialog-content{padding:8px 13px 11px}
.payment-ready.compact-khqr{gap:8px}
.payment-ready.compact-khqr .payment-method-strip{min-height:29px;gap:7px;padding:0 2px}
.payment-ready.compact-khqr .payment-method-brand>img{height:28px;width:28px;border-radius:7px}
.payment-ready.compact-khqr .payment-method-brand b{font-size:12px}
.payment-ready.compact-khqr .payment-method-secure{font-size:9px}
.payment-ready.compact-khqr .payment-qr-card.khqr-receipt{width:min(100%,294px);border-radius:12px;box-shadow:0 8px 24px #00000016}
.payment-ready.compact-khqr .khqr-receipt-head{height:31px;padding:0 12px}
.payment-ready.compact-khqr .khqr-receipt-head strong{font-size:15px}
.payment-ready.compact-khqr .khqr-receipt-head span{font-size:9px}
.payment-ready.compact-khqr .khqr-receipt-body{padding:7px 11px 9px}
.payment-ready.compact-khqr .khqr-merchant{font-size:11.5px;line-height:1.4;margin:0}
.payment-ready.compact-khqr .khqr-amount{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:4px 0 0}
.payment-ready.compact-khqr .khqr-amount span{font-size:9px}
.payment-ready.compact-khqr .khqr-amount strong{font-size:23px;line-height:1.1}
.payment-ready.compact-khqr .khqr-divider{margin:8px 0}
.payment-ready.compact-khqr .khqr-receipt .payment-qr-image{width:min(216px,100%);height:auto;aspect-ratio:1/1;object-fit:contain;padding:0;image-rendering:auto}
.payment-ready.compact-khqr .khqr-receipt .payment-qr-placeholder{width:min(216px,100%)}
.payment-ready.compact-khqr .payment-compact-status{display:flex;align-items:center;gap:7px;min-height:29px;padding:0 2px;min-width:0}
.payment-ready.compact-khqr .payment-compact-status .payment-status-note{flex:1 1 0;min-width:0;padding:2px 0;align-items:center;border:0;background:transparent;gap:7px}
.payment-ready.compact-khqr .payment-compact-status .payment-status-copy{min-width:0;display:block}
.payment-ready.compact-khqr .payment-compact-status .payment-status-copy b{font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.payment-ready.compact-khqr .payment-compact-status .payment-live-dot{width:6px;height:6px}
.payment-ready.compact-khqr .payment-compact-status .payment-timer{padding:6px 8px;font-size:10px;min-height:26px}
.payment-ready.compact-khqr .payment-compact-status .payment-new-qr{flex:none;margin:0;display:flex;justify-content:center;gap:4px;padding:5px 7px;min-height:28px;border:1px solid var(--line);border-radius:8px;background:var(--field);font-size:9px}
.payment-ready.compact-khqr .payment-compact-status .payment-new-qr svg{width:12px;height:12px}
.payment-ready.compact-khqr .payment-open-aba{width:100%;max-width:350px;margin:0 auto;min-height:43px;height:43px;padding:6px 11px;border-radius:10px}
.payment-ready.compact-khqr .payment-open-aba img{width:28px;height:28px;border-radius:8px}
.payment-ready.compact-khqr .payment-open-aba b{font-size:11px}
.payment-ready.compact-khqr .payment-open-aba small{font-size:8.5px}
.payment-ready.compact-khqr .payment-extra{width:100%;max-width:350px;margin:0 auto;border:1px solid var(--line);border-radius:9px;background:var(--field);overflow:hidden}
.payment-ready.compact-khqr .payment-extra summary{display:flex;align-items:center;gap:7px;min-height:31px;padding:5px 11px;list-style:none;font-size:10px;color:var(--muted);cursor:pointer;user-select:none}
.payment-ready.compact-khqr .payment-extra summary::-webkit-details-marker{display:none}
.payment-ready.compact-khqr .payment-extra summary>svg{width:13px;height:13px;color:var(--accent)}
.payment-ready.compact-khqr .payment-extra summary>span:first-of-type{flex:1}
.payment-ready.compact-khqr .payment-extra .payment-extra-arrow svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .2s}
.payment-ready.compact-khqr .payment-extra[open] .payment-extra-arrow svg{transform:rotate(-90deg)}
.payment-ready.compact-khqr .payment-extra .payment-invoice-row{border-top:1px solid var(--line);padding:7px 9px;gap:7px}
.payment-ready.compact-khqr .payment-extra .payment-invoice-row code{overflow-wrap:anywhere;white-space:normal;font-size:9px}
.payment-ready.compact-khqr .payment-extra .payment-security-line{padding:6px 10px 9px;font-size:8px}
.payment-ready.compact-khqr.is-expired .payment-compact-status .payment-new-qr{background:var(--accent);color:#fff;border-color:var(--accent)}
.payment-ready.compact-khqr .payment-desktop-hint{max-width:350px;font-size:10px;line-height:1.6;padding:8px 10px}
@media(max-width:600px){
 .review-dialog:has(.compact-khqr){width:calc(100% - 14px);max-height:calc(100dvh - 10px);border-radius:15px}
 .review-dialog:has(.compact-khqr) .dialog-head{padding:6px 12px}
 .review-dialog:has(.compact-khqr) .dialog-content{padding:7px 10px 10px}
 .payment-ready.compact-khqr{gap:6px}
 .payment-ready.compact-khqr .payment-qr-card.khqr-receipt{width:min(100%,284px)}
 .payment-ready.compact-khqr .khqr-receipt .payment-qr-image{width:min(208px,100%)}
 .payment-ready.compact-khqr .khqr-receipt .payment-qr-placeholder{width:min(208px,100%)}
 .payment-ready.compact-khqr .payment-method-brand>img{height:25px;width:25px}
 .payment-ready.compact-khqr .payment-method-strip{min-height:26px}
}
@media(max-height:720px) and (max-width:600px){
 .review-dialog:has(.compact-khqr) .dialog-head{padding:4px 10px}
 .review-dialog:has(.compact-khqr) .dialog-content{padding:5px 9px 8px}
 .payment-ready.compact-khqr{gap:5px}
 .payment-ready.compact-khqr .khqr-receipt-head{height:28px}
 .payment-ready.compact-khqr .khqr-receipt-body{padding:5px 10px 7px}
 .payment-ready.compact-khqr .khqr-amount{margin:2px 0 0}
 .payment-ready.compact-khqr .khqr-amount strong{font-size:21px}
 .payment-ready.compact-khqr .khqr-divider{margin:6px 0}
 .payment-ready.compact-khqr .khqr-receipt .payment-qr-image{width:min(192px,100%)}
 .payment-ready.compact-khqr .khqr-receipt .payment-qr-placeholder{width:min(192px,100%)}
 .payment-ready.compact-khqr .payment-open-aba{height:41px;min-height:41px}
}

/* v20261017.16: compact KHQR creation/error states (same footprint as QR ready). */
.review-dialog:has(.payment-loading-state.compact-khqr),
.review-dialog:has(.payment-error-state.compact-khqr){width:min(430px,calc(100% - 18px));max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}
.review-dialog:has(.payment-loading-state.compact-khqr) .dialog-head,
.review-dialog:has(.payment-error-state.compact-khqr) .dialog-head{position:sticky;top:0;z-index:10;padding:8px 15px;background:var(--surface);border-bottom:1px solid var(--soft-line)}
.review-dialog:has(.payment-loading-state.compact-khqr) .dialog-head h2,
.review-dialog:has(.payment-error-state.compact-khqr) .dialog-head h2{font-size:13px}
.review-dialog:has(.payment-loading-state.compact-khqr) .dialog-content,
.review-dialog:has(.payment-error-state.compact-khqr) .dialog-content{padding:8px 13px 11px}
.payment-loading-state.compact-khqr,.payment-error-state.compact-khqr{gap:9px;justify-items:stretch}
.payment-loading-state.compact-khqr .payment-method-strip,
.payment-error-state.compact-khqr .payment-method-strip{display:flex;align-items:center;justify-content:space-between;min-height:29px;gap:7px}
.payment-loading-state.compact-khqr .payment-method-brand,
.payment-error-state.compact-khqr .payment-method-brand{display:flex;align-items:center;gap:8px}
.payment-loading-state.compact-khqr .payment-method-brand>img,
.payment-error-state.compact-khqr .payment-method-brand>img{width:28px;height:28px;border-radius:7px;object-fit:contain}
.payment-loading-state.compact-khqr .payment-method-brand b,
.payment-error-state.compact-khqr .payment-method-brand b{font-size:12px}
.payment-loading-state.compact-khqr .payment-method-secure{display:flex;align-items:center;gap:4px;color:var(--green);font-size:9px}
.payment-loading-state.compact-khqr .payment-method-secure svg{width:12px;height:12px}
.payment-loading-state.compact-khqr .payment-qr-card.khqr-receipt{width:min(100%,294px);margin:0 auto;padding:0;min-height:0;overflow:hidden;border:0;border-radius:12px;background:#fff;color:#161616;box-shadow:0 8px 24px #00000016}
.payment-loading-state.compact-khqr .khqr-receipt-head{height:31px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;background:#e92332;color:#fff}
.payment-loading-state.compact-khqr .khqr-receipt-head strong{font-size:15px;font-weight:900;color:#fff}
.payment-loading-state.compact-khqr .khqr-receipt-head span{font-size:9px;font-weight:750;color:#fff9}
.payment-loading-state.compact-khqr .khqr-receipt-body{background:#fff;color:#161616;text-align:center;padding:7px 11px 9px}
.payment-loading-state.compact-khqr .khqr-merchant{font-size:11.5px;line-height:1.4;font-weight:800;margin:0}
.payment-loading-state.compact-khqr .khqr-amount{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:4px 0 0}
.payment-loading-state.compact-khqr .khqr-amount span{font-size:9px;color:#777}
.payment-loading-state.compact-khqr .khqr-amount strong{font-size:23px;line-height:1.1;color:#141414;font-weight:850}
.payment-loading-state.compact-khqr .khqr-divider{height:1px;margin:8px 0;background:repeating-linear-gradient(to right,#c7c7c7 0px,#c7c7c7 6px,transparent 6px,transparent 11px)}
.payment-loading-state.compact-khqr .payment-qr-stage{padding:0;background:#fff!important;display:grid;place-items:center;border-radius:0;box-shadow:none}
.payment-loading-state.compact-khqr .payment-compact-skeleton{width:min(216px,100%);height:auto;aspect-ratio:1/1;padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border-radius:10px;background:#f2f4f8;color:#60687b;box-shadow:none}
.payment-loading-state.compact-khqr .payment-compact-skeleton b{font-size:11px;line-height:1.6;text-align:center;color:#343c50}
.payment-loading-state.compact-khqr .payment-compact-skeleton small{font-size:9px;color:#778093}
.payment-loading-spinner{display:block;width:24px;height:24px;border:3px solid #d1d5e0;border-top-color:#7859ed;border-radius:50%;animation:pbQrSpinner .9s linear infinite}
@keyframes pbQrSpinner{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.payment-loading-spinner{animation:none}}
.payment-loading-state.compact-khqr .payment-loading-footer{display:flex;align-items:center;justify-content:center;gap:9px;max-width:350px;margin:0 auto;color:var(--muted);font-size:10px;line-height:1.5}
.payment-loading-state.compact-khqr .payment-loading-footer .payment-live-dot{width:6px;height:6px}
.payment-error-state.compact-khqr .payment-error-card{display:flex;align-items:flex-start;gap:10px;background:color-mix(in srgb,var(--danger) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 32%,var(--line));border-radius:12px;padding:14px;color:var(--danger);line-height:1.6}
.payment-error-state.compact-khqr .payment-error-card svg{width:17px;height:17px;flex:none;margin-top:2px}
.payment-error-state.compact-khqr .payment-error-card b{display:block;font-size:12px}
.payment-error-state.compact-khqr .payment-error-card p{font-size:11px;margin-top:4px}
.payment-error-state.compact-khqr .payment-retry-qr{justify-self:stretch;display:flex;align-items:center;justify-content:center;gap:7px;min-height:39px;margin:0;background:var(--accent-solid);color:#fff;border-radius:10px;font-size:12px;font-weight:750}
.payment-error-state.compact-khqr .payment-retry-qr svg{width:14px;height:14px}
@media(max-width:600px){
 .review-dialog:has(.payment-loading-state.compact-khqr),.review-dialog:has(.payment-error-state.compact-khqr){width:calc(100% - 14px);max-height:calc(100dvh - 10px);border-radius:15px}
 .review-dialog:has(.payment-loading-state.compact-khqr) .dialog-head,.review-dialog:has(.payment-error-state.compact-khqr) .dialog-head{padding:6px 12px}
 .review-dialog:has(.payment-loading-state.compact-khqr) .dialog-content,.review-dialog:has(.payment-error-state.compact-khqr) .dialog-content{padding:7px 10px 10px}
 .payment-loading-state.compact-khqr .payment-qr-card.khqr-receipt{width:min(100%,284px)}
 .payment-loading-state.compact-khqr .payment-compact-skeleton{width:min(208px,100%)}
}
@media(max-height:720px) and (max-width:600px){
 .payment-loading-state.compact-khqr .payment-compact-skeleton{width:min(192px,100%)}
 .payment-loading-state.compact-khqr .khqr-receipt-head{height:28px}
}

/* v20261017.17 · PublicBoost Recovery Key · premium, legible, no grey native button */
.review-dialog:has(.recovery-key-panel){
  width:min(420px,calc(100% - 28px));
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 24px 76px #0006;
}
.review-dialog:has(.recovery-key-panel):focus{outline:none}
.review-dialog:has(.recovery-key-panel) .dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 19px;
  background:var(--surface);
  border-bottom:1px solid var(--soft-line);
}
.review-dialog:has(.recovery-key-panel) .dialog-head h2{font-size:15px;font-weight:800;letter-spacing:-.15px}
.review-dialog:has(.recovery-key-panel) .dialog-head button{
  display:grid;
  place-items:center;
  height:32px;width:32px;
  padding:0;
  background:var(--field);
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:10px;
}
.review-dialog:has(.recovery-key-panel) .dialog-head button:hover{color:var(--text);border-color:var(--accent)}
.review-dialog:has(.recovery-key-panel) .dialog-head button svg{width:17px;height:17px}
.review-dialog:has(.recovery-key-panel) .dialog-content{padding:21px 21px 22px}
.recovery-key-panel{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  text-align:center;
}
.recovery-key-panel .recovery-key-icon{
  width:53px;height:53px;
  margin:0 auto 13px;
  display:grid;place-items:center;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  background:var(--accent-soft);
  color:var(--accent);
}
.recovery-key-panel .recovery-key-icon svg{width:24px;height:24px}
.recovery-key-panel h3{font-size:17px;font-weight:800;line-height:1.6;letter-spacing:-.2px;color:var(--text);margin:0 0 5px}
.recovery-key-panel p{
  font-size:11.5px;
  line-height:1.85;
  color:var(--muted);
  max-width:330px;
  margin:0 auto 16px;
}
.recovery-key-panel .recovery-key-value{
  display:grid;gap:7px;
  width:100%;
  min-width:0;
  padding:12px 13px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--accent-soft) 38%,var(--field));
}
.recovery-key-panel .recovery-key-caption{
  font:750 9px/1.5 Inter,sans-serif;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--accent);
}
.recovery-key-panel .recovery-key-value code{
  display:block;
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  font:800 16px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.7px;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  user-select:all;
}
.recovery-key-panel button.recovery-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  height:auto;
  min-height:45px;
  margin-top:12px;
  padding:11px 14px;
  border:1px solid transparent;
  border-radius:12px;
  background:var(--accent-solid);
  color:#fff;
  font:750 12px/1.65 Inter,'Noto Sans Khmer',sans-serif;
  box-shadow:0 8px 19px color-mix(in srgb,var(--accent) 14%,transparent);
  cursor:pointer;
}
.recovery-key-panel button.recovery-copy svg{height:17px;width:17px;flex:none}
.recovery-key-panel button.recovery-copy span{color:inherit;font:inherit}
.recovery-key-panel button.recovery-copy:hover{filter:brightness(1.09)}
.recovery-key-panel button.recovery-copy:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.recovery-key-panel .recovery-key-help{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:13px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--field);
  color:var(--muted);
  text-align:left;
}
.recovery-key-panel .recovery-key-help svg{height:15px;width:15px;margin-top:2px;flex:none;color:var(--accent)}
.recovery-key-panel .recovery-key-help span{font-size:10.5px;line-height:1.75;color:var(--muted)}
:root[data-theme=light] .review-dialog:has(.recovery-key-panel){box-shadow:0 22px 60px #24223b18}
@media(max-width:600px){
  .review-dialog:has(.recovery-key-panel){width:calc(100% - 24px);border-radius:18px;max-height:calc(100dvh - 22px)}
  .review-dialog:has(.recovery-key-panel) .dialog-head{padding:12px 15px}
  .review-dialog:has(.recovery-key-panel) .dialog-content{padding:18px 16px 19px}
  .recovery-key-panel .recovery-key-icon{width:47px;height:47px;margin-bottom:10px;border-radius:13px}
  .recovery-key-panel h3{font-size:15px}
  .recovery-key-panel p{font-size:11px;margin-bottom:13px}
  .recovery-key-panel .recovery-key-value{padding:10px 9px 12px}
  .recovery-key-panel .recovery-key-value code{font-size:13.5px;letter-spacing:.4px}
  .recovery-key-panel button.recovery-copy{min-height:44px;font-size:11.5px}
  .recovery-key-panel .recovery-key-help span{font-size:10px}
}

/* v20261017.18 · Password visibility: no grey browser-native buttons.
   Shared by login, register, reset and account Password change dialogs. */
.auth-password-field{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;min-height:50px;height:auto;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--field);overflow:hidden}
.auth-password-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)}
.auth-password-field input{
  display:block;
  min-width:0;
  width:100%;
  height:48px!important;
  padding:0 11px 0 14px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--text)!important;
  box-shadow:none!important;
  outline:none!important;
  font-size:13px;
}
.auth-password-field > button.auth-password-toggle[data-password-toggle]{
  position:static!important;
  display:grid!important;
  place-items:center!important;
  transform:none!important;
  margin:0 6px 0 0!important;
  width:40px!important;
  height:40px!important;
  min-width:40px;
  min-height:40px;
  padding:0!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--accent) 5%,var(--surface))!important;
  color:var(--muted)!important;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.auth-password-field > button.auth-password-toggle[data-password-toggle]:hover,
.auth-password-field > button.auth-password-toggle[data-password-toggle][aria-pressed="true"]{
  color:var(--accent)!important;
  background:var(--accent-soft)!important;
}
.auth-password-field > button.auth-password-toggle[data-password-toggle]:focus-visible{
  outline:2px solid var(--focus)!important;
  outline-offset:-2px!important;
}
.auth-password-field > button.auth-password-toggle svg{
  display:block;
  width:19px!important;
  height:19px!important;
  stroke:currentColor;
}
.review-dialog:has(#passwordChangeForm){width:min(450px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;border-radius:19px}
.review-dialog:has(#passwordChangeForm) .dialog-head{padding:16px 20px}
.review-dialog:has(#passwordChangeForm) .dialog-head h2{font-size:17px;font-weight:800}
.review-dialog:has(#passwordChangeForm) .dialog-content{padding:18px 20px 21px}
.review-dialog #passwordChangeForm{gap:14px}
.review-dialog #passwordChangeForm label{gap:7px;min-width:0}
.review-dialog #passwordChangeForm label>span{font-size:12px;line-height:1.6;color:var(--muted);font-weight:700}
.review-dialog #passwordChangeForm .primary-button{width:100%;min-height:46px;border-radius:11px;font-size:13px;gap:9px}
@media(max-width:600px){
  .auth-password-field{grid-template-columns:minmax(0,1fr) 47px;min-height:48px}
  .auth-password-field > button.auth-password-toggle[data-password-toggle]{height:40px!important;width:40px!important}
  .review-dialog:has(#passwordChangeForm){width:calc(100% - 20px);max-height:calc(100dvh - 18px);border-radius:17px}
  .review-dialog:has(#passwordChangeForm) .dialog-head{padding:13px 15px}
  .review-dialog:has(#passwordChangeForm) .dialog-content{padding:15px 15px 18px}
  .review-dialog #passwordChangeForm label>span{font-size:11.5px}
}

/* PublicBoost v20261017.21 — compact accessible help centre in Khmer / English. */
.review-dialog:has(.pb-help-center){
 width:min(478px,calc(100% - 26px));
 max-height:calc(100dvh - 28px);
 overflow-y:auto;
 overscroll-behavior:contain;
 border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
 border-radius:20px;
 background:var(--surface);
}
.review-dialog:has(.pb-help-center) .dialog-head{
 position:sticky;
 top:0;
 z-index:2;
 display:flex;
 align-items:center;
 padding:16px 19px;
 background:var(--surface);
 border-bottom:1px solid var(--soft-line);
}
.review-dialog:has(.pb-help-center) .dialog-head h2{font-size:17px;font-weight:800;line-height:1.5}
.review-dialog:has(.pb-help-center) .dialog-head button{
 display:grid;place-items:center;
 height:33px;width:33px;
 padding:0;
 border:1px solid var(--line);
 border-radius:10px;
 background:var(--field);
 color:var(--muted);
}
.review-dialog:has(.pb-help-center) .dialog-head button:hover{border-color:var(--accent);color:var(--text)}
.review-dialog:has(.pb-help-center) .dialog-content{padding:15px 18px 17px}
.pb-help-center{display:grid;gap:12px;min-width:0}
.pb-help-intro{font-size:11.5px;line-height:1.8;color:var(--muted);margin:0}
.pb-help-topics{display:grid;gap:8px}
.pb-help-topic{
 border:1px solid var(--line);
 border-radius:13px;
 background:var(--field);
 overflow:hidden;
 transition:background .16s,border-color .16s;
}
.pb-help-topic[open]{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 39%,var(--line))}
.pb-help-topic summary{
 cursor:pointer;
 display:flex;
 align-items:center;
 gap:11px;
 padding:12px 13px;
 list-style:none;
 min-height:62px;
 user-select:none;
}
.pb-help-topic summary::-webkit-details-marker{display:none}
.pb-help-topic summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:12px}
.pb-help-topic-icon{
 display:grid;place-items:center;
 width:36px;height:36px;
 flex:none;
 border-radius:11px;
 background:var(--accent-soft);
 color:var(--accent);
}
.pb-help-topic-icon svg{width:18px;height:18px}
.pb-help-topic-label{display:grid;min-width:0;gap:1px;flex:1}
.pb-help-topic-label b{font-size:12px;font-weight:750;line-height:1.55;color:var(--text)}
.pb-help-topic-label small{font-size:9.5px;color:var(--muted)}
.pb-help-chevron{display:grid;place-items:center;color:var(--faint);flex:none}
.pb-help-chevron svg{width:15px;height:15px;transition:transform .2s}
.pb-help-topic[open] .pb-help-chevron svg{transform:rotate(180deg);color:var(--accent)}
.pb-help-topic-body{padding:0 13px 13px 60px}
.pb-help-topic-body p{margin:0;font-size:11px;line-height:1.85;color:var(--muted)}
.pb-help-topic-action{
 margin-top:11px;
 min-height:34px;
 display:inline-flex;align-items:center;justify-content:center;gap:7px;
 padding:7px 11px;
 border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
 border-radius:9px;
 background:var(--accent-soft);
 color:var(--accent);
 font-size:10.5px;font-weight:750;
}
.pb-help-topic-action svg{width:13px;height:13px}
.pb-help-topic-action:hover,.pb-help-topic-action:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 80%,var(--surface))}
.pb-help-start{
 width:100%;min-height:44px;
 display:flex;align-items:center;justify-content:center;gap:10px;
 padding:10px 16px;
 border-radius:11px;
 background:var(--accent-solid);
 color:#fff;
 font-size:12px;font-weight:750;
}
.pb-help-start svg{width:16px;height:16px}
.pb-help-start:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:root[data-theme=light] .review-dialog:has(.pb-help-center){box-shadow:0 20px 65px #191a311b}
@media(max-width:600px){
 .review-dialog:has(.pb-help-center){width:calc(100% - 18px);max-height:calc(100dvh - 16px);border-radius:17px}
 .review-dialog:has(.pb-help-center) .dialog-head{padding:11px 14px}
 .review-dialog:has(.pb-help-center) .dialog-head h2{font-size:15px}
 .review-dialog:has(.pb-help-center) .dialog-content{padding:12px 12px 13px}
 .pb-help-center{gap:10px}
 .pb-help-intro{font-size:10.5px}
 .pb-help-topics{gap:7px}
 .pb-help-topic summary{min-height:57px;padding:9px 10px;gap:10px}
 .pb-help-topic-icon{width:34px;height:34px;border-radius:10px}
 .pb-help-topic-label b{font-size:11.5px}
 .pb-help-topic-body{padding:0 11px 12px 54px}
 .pb-help-topic-body p{font-size:10.5px;line-height:1.8}
 .pb-help-topic-action{font-size:10px;min-height:34px}
 .pb-help-start{min-height:42px}
}
@media(prefers-reduced-motion:reduce){.pb-help-chevron svg{transition:none}}

/* Customer Telegram — optional, identity-verified, compact mobile-first */
.pb-telegram-card{border:1px solid color-mix(in srgb,var(--accent) 19%,var(--line));border-radius:13px;background:var(--field);padding:14px;margin-top:13px;text-align:left}
.pb-telegram-header{display:flex;align-items:center;gap:9px;min-width:0}
.pb-telegram-icon{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);height:37px;width:37px;border-radius:11px;flex:none}
.pb-telegram-icon svg{width:18px;height:18px}
.pb-telegram-title{display:grid;gap:2px;min-width:0;flex:1}
.pb-telegram-title b{font-size:12px;overflow-wrap:anywhere}.pb-telegram-title small{font-size:9px;color:var(--muted)}
.pb-telegram-pill{flex:none;border:1px solid var(--line);border-radius:20px;padding:4px 7px;font-size:9px;color:var(--muted)}
.pb-telegram-pill.connected{background:color-mix(in srgb,var(--green) 9%,var(--field));color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,var(--line))}
.pb-telegram-card>p{font-size:10px;line-height:1.75;margin:11px 0;color:var(--muted)}
.pb-telegram-actions{display:flex;gap:8px;flex-wrap:wrap}
.pb-telegram-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:35px;padding:7px 11px;border-radius:9px;font-size:10px;font-weight:750;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 23%,var(--line))}
.pb-telegram-actions button svg{height:14px;width:14px}
.pb-telegram-actions button.pb-tg-connect{background:var(--accent-solid);color:white}
.pb-telegram-actions button.pb-tg-unlink{color:var(--danger);background:color-mix(in srgb,var(--danger) 6%,var(--field));border-color:color-mix(in srgb,var(--danger) 24%,var(--line))}
.pb-telegram-connect-dialog{text-align:center;display:grid;justify-items:center;gap:11px}
.pb-telegram-connect-dialog h3{margin:0;font-size:15px}.pb-telegram-connect-dialog>p{font-size:11px;line-height:1.7;color:var(--muted)}
.pb-telegram-connect-dialog .pb-tg-open{display:flex;align-items:center;justify-content:center;gap:9px;border-radius:10px;background:var(--accent-solid);color:white;min-height:43px;width:100%;font-size:12px;font-weight:750}
.pb-telegram-connect-dialog .pb-tg-open svg{height:16px;width:16px}
.pb-telegram-connect-dialog button{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:9px 13px;font-size:11px;display:flex;align-items:center;gap:7px}
.pb-telegram-connect-dialog button svg{height:14px;width:14px}.pb-telegram-connect-dialog small{font-size:9px;line-height:1.7;color:var(--muted)}
@media(max-width:600px){.pb-telegram-card{padding:12px}.pb-telegram-header{gap:7px}.pb-telegram-pill{font-size:8px}.pb-telegram-actions button{flex:1 1 auto}}

/* PublicBoost v20261017.24 — one subtle purple active glow throughout the User UI.
   Static, theme-aware, active/selected controls only. Inactive controls stay calm. */
:root{
 --pb-selected-outline:color-mix(in srgb,var(--accent) 37%,var(--line));
 --pb-selected-halo:color-mix(in srgb,var(--accent) 12%,transparent);
 --pb-selected-glow:color-mix(in srgb,var(--accent) 15%,transparent);
 --pb-hover-glow:color-mix(in srgb,var(--accent) 8%,transparent);
}
:root[data-theme=light]{
 --pb-selected-outline:color-mix(in srgb,var(--accent) 45%,var(--line));
 --pb-selected-halo:color-mix(in srgb,var(--accent) 10%,transparent);
 --pb-selected-glow:color-mix(in srgb,var(--accent) 11%,transparent);
 --pb-hover-glow:color-mix(in srgb,var(--accent) 6%,transparent);
}
/* Primary navigation: keep the existing left Active marker and purple dot. */
.desktop-nav .nav-link.active{
 background:linear-gradient(120deg,color-mix(in srgb,var(--accent-soft) 92%,var(--surface)),color-mix(in srgb,var(--accent-soft) 70%,var(--surface)));
 box-shadow:inset 0 0 0 1px var(--pb-selected-outline),0 0 0 2px var(--pb-selected-halo),0 8px 21px var(--pb-selected-glow);
}
.desktop-nav .nav-link.active:after{box-shadow:0 0 0 4px var(--pb-selected-halo),0 0 12px color-mix(in srgb,var(--accent) 25%,transparent)}
/* Bottom dock clips outward light, so the glow stays inset and cannot overflow. */
.bottom-nav .nav-link.active{
 background:color-mix(in srgb,var(--accent-soft) 82%,transparent);
 box-shadow:inset 0 0 0 1px var(--pb-selected-outline),inset 0 0 13px var(--pb-selected-halo);
}
/* Real toggle / selection state from the app, not decorative cards. */
.platform-pill.active,.category-button.active,.wallet-amount-button.active,.wallet-payment-method.active:not(.wallet-khqr-method),.customer-support-choice.selected{
 border-color:var(--pb-selected-outline);
 background:color-mix(in srgb,var(--accent-soft) 82%,var(--surface));
 box-shadow:inset 0 0 0 1px var(--pb-selected-halo),0 0 0 2px var(--pb-selected-halo),0 7px 18px var(--pb-selected-glow);
}
.wallet-payment-method.active.wallet-khqr-method{
 border-color:var(--pb-selected-outline);
 background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface));
 box-shadow:inset 0 0 0 1px var(--pb-selected-halo),0 0 0 2px var(--pb-selected-halo),0 7px 18px var(--pb-selected-glow);
}
/* Open guide topics and password visibility are selections too, but less prominent. */
.pb-help-topic[open]{border-color:var(--pb-selected-outline);box-shadow:0 0 0 1px var(--pb-selected-halo),0 5px 15px var(--pb-hover-glow)}
.auth-password-field > button.auth-password-toggle[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--pb-selected-outline)}
/* Interaction feedback: subtle on hover and focus, never a permanent selection. */
@media(hover:hover){
 .platform-pill:not(.active):not(:disabled):hover,
 .category-button:not(.active):not(:disabled):hover,
 .wallet-amount-button:not(.active):not(:disabled):hover,
 .account-setting-card:not(:disabled):hover,
 .account-security-actions>button:not(:disabled):hover{
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  box-shadow:0 0 0 1px var(--pb-hover-glow),0 5px 13px var(--pb-hover-glow);
 }
}
:is(.platform-pill,.category-button,.wallet-amount-button,.wallet-payment-method,.account-setting-card,.account-security-actions>button):focus-visible{
 outline:2px solid var(--focus);outline-offset:2px;
 box-shadow:0 0 0 4px var(--pb-selected-halo);
}
/* Disabled controls should not appear highlighted or invite clicking. */
:is(.platform-pill,.category-button,.wallet-amount-button,.wallet-payment-method):disabled{box-shadow:none;filter:none}
@media(prefers-reduced-motion:reduce){
 .platform-pill,.category-button,.wallet-amount-button,.wallet-payment-method,.pb-help-topic{transition:none!important;animation:none!important}
}

/* PublicBoost v20261017.25 — VISIBLE selected glow.
   Previous halo was only 8–15% accent and looked unchanged on dark screens.
   Larger tonal difference, glowing rail + breathing dot, without global flashing. */
:root{
 --pb-strong-selected-bg:color-mix(in srgb,var(--accent) 27%,var(--surface));
 --pb-strong-selected-end:color-mix(in srgb,var(--accent) 14%,var(--surface));
 --pb-strong-selected-line:color-mix(in srgb,var(--accent) 69%,var(--line));
 --pb-strong-selected-ring:color-mix(in srgb,var(--accent) 25%,transparent);
 --pb-strong-selected-ambient:color-mix(in srgb,var(--accent) 29%,transparent);
}
:root[data-theme=light]{
 --pb-strong-selected-bg:color-mix(in srgb,var(--accent) 17%,var(--surface));
 --pb-strong-selected-end:color-mix(in srgb,var(--accent) 9%,var(--surface));
 --pb-strong-selected-line:color-mix(in srgb,var(--accent) 69%,var(--line));
 --pb-strong-selected-ring:color-mix(in srgb,var(--accent) 19%,transparent);
 --pb-strong-selected-ambient:color-mix(in srgb,var(--accent) 21%,transparent);
}
.desktop-nav .nav-link.active{
 color:var(--text);
 background:linear-gradient(108deg,var(--pb-strong-selected-bg) 0%,var(--pb-strong-selected-end) 100%);
 box-shadow:inset 0 0 0 1px var(--pb-strong-selected-line),inset 0 0 17px color-mix(in srgb,var(--accent) 7%,transparent),0 0 0 2px var(--pb-strong-selected-ring),0 4px 24px var(--pb-strong-selected-ambient);
}
.desktop-nav .nav-link.active:before{
 width:4px;height:27px;
 background:linear-gradient(180deg,#c6a9ff,#7851ed);
 box-shadow:0 0 12px color-mix(in srgb,var(--accent) 85%,transparent),0 0 24px var(--pb-strong-selected-ambient);
}
.desktop-nav .nav-link.active:after{
 width:7px;height:7px;
 flex:none;
 border-radius:50%;
 background:#b9a2ff;
 box-shadow:0 0 0 5px var(--pb-strong-selected-ring),0 0 13px color-mix(in srgb,var(--accent) 72%,transparent);
 animation:pbSelectedDotPulse 2.7s ease-in-out infinite;
}
.desktop-nav .nav-link.active svg{color:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 30%,transparent))}
@keyframes pbSelectedDotPulse{
 0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent),0 0 7px color-mix(in srgb,var(--accent) 58%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 14%,transparent),0 0 16px color-mix(in srgb,var(--accent) 80%,transparent)}
}
/* Mobile bottom dock: visibly selected, but no overflow beyond clipped dock. */
.bottom-nav .nav-link.active{
 background:linear-gradient(180deg,var(--pb-strong-selected-bg),var(--pb-strong-selected-end));
 box-shadow:inset 0 0 0 1px var(--pb-strong-selected-line),inset 0 0 18px var(--pb-strong-selected-ring);
}
.bottom-nav .nav-link.active:before{
 width:22px;height:3px;
 background:linear-gradient(90deg,#bda5ff,#7859ed);
 box-shadow:0 0 12px var(--pb-strong-selected-ambient);
}
.bottom-nav .nav-link.active svg{color:var(--accent);filter:drop-shadow(0 0 5px var(--pb-strong-selected-ambient))}
/* One clearly highlighted choice, all other choices remain neutral. */
.platform-pill.active,.category-button.active,.wallet-amount-button.active,
.wallet-payment-method.active:not(.wallet-khqr-method),.customer-support-choice.selected{
 background:linear-gradient(120deg,var(--pb-strong-selected-bg),var(--pb-strong-selected-end));
 border-color:var(--pb-strong-selected-line);
 color:var(--text);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 19%,transparent),0 0 0 1px var(--pb-strong-selected-ring),0 5px 22px var(--pb-strong-selected-ambient);
}
.wallet-payment-method.active.wallet-khqr-method{
 border-color:var(--pb-strong-selected-line);
 background:linear-gradient(120deg,var(--pb-strong-selected-bg),var(--pb-strong-selected-end));
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 19%,transparent),0 0 0 1px var(--pb-strong-selected-ring),0 5px 20px var(--pb-strong-selected-ambient);
}
/* Clickable but non-selected controls show a mild hover, not fake Active glow. */
@media(hover:hover){
 .desktop-nav .nav-link:not(.active):hover,
 .platform-pill:not(.active):not(:disabled):hover,
 .category-button:not(.active):not(:disabled):hover,
 .wallet-amount-button:not(.active):not(:disabled):hover{
  background:color-mix(in srgb,var(--accent-soft) 68%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 13%,transparent),0 5px 16px color-mix(in srgb,var(--accent) 10%,transparent);
 }
}
@media(prefers-reduced-motion:reduce){.desktop-nav .nav-link.active:after{animation:none}}

/* PublicBoost v20261017.26 — visible MINT green live tracking glow.
   Only while the Orders live-pulse dot is present (not for connection errors). */
.history-title .orders-live-label:has(.orders-live-pulse){
 display:inline-flex;
 align-items:center;
 gap:9px;
 max-width:100%;
 min-width:0;
 padding:7px 10px;
 border:1px solid color-mix(in srgb,var(--green) 36%,var(--line));
 border-radius:999px;
 background:color-mix(in srgb,var(--green) 9%,var(--surface));
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 5%,transparent),0 0 16px color-mix(in srgb,var(--green) 11%,transparent);
 color:color-mix(in srgb,var(--green) 20%,var(--muted));
 line-height:1.65;
 overflow-wrap:anywhere;
}
.history-title .orders-live-pulse{
 position:relative;
 display:inline-block;
 flex:none;
 width:9px;
 height:9px;
 border-radius:50%;
 background:var(--green);
 box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 19%,transparent),0 0 13px color-mix(in srgb,var(--green) 64%,transparent);
 animation:pbLiveTrackingGlow 2.5s ease-in-out infinite;
}
@keyframes pbLiveTrackingGlow{
 0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 19%,transparent),0 0 8px color-mix(in srgb,var(--green) 48%,transparent)}
 50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--green) 13%,transparent),0 0 17px color-mix(in srgb,var(--green) 72%,transparent)}
}
:root[data-theme=light] .history-title .orders-live-label:has(.orders-live-pulse){
 border-color:color-mix(in srgb,var(--green) 38%,var(--line));
 background:color-mix(in srgb,var(--green) 9%,var(--surface));
 box-shadow:0 0 10px color-mix(in srgb,var(--green) 9%,transparent);
 color:color-mix(in srgb,var(--green) 24%,var(--muted));
}
@media(max-width:600px){
 .history-title .orders-live-label:has(.orders-live-pulse){gap:7px;padding:5px 8px;border-radius:12px;max-width:100%;font-size:9px;line-height:1.65}
 .history-title .orders-live-pulse{width:8px;height:8px}
}
@media(prefers-reduced-motion:reduce){
 .history-title .orders-live-pulse{animation:none}
}

/* PublicBoost v20261017.27 — compact Recent Links dropdown.
   Full original URLs remain in the item data/tooltip; only labels are shortened. */
.link-history-wrap{min-width:0}
.saved-link-menu{
 top:calc(100% + 5px);
 padding:5px;
 max-height:228px;
 overflow-x:hidden;
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-width:thin;
 border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
 border-radius:12px;
 background:var(--surface);
 box-shadow:0 11px 30px color-mix(in srgb,#000 24%,transparent);
}
.saved-link-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 padding:5px 8px 6px;
 color:var(--muted);
 font-size:10px;
 font-weight:700;
}
.saved-link-head small{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:20px;
 height:20px;
 padding:2px 5px;
 border-radius:999px;
 background:var(--accent-soft);
 color:var(--accent);
 font-size:9px;
 font-weight:750;
}
.saved-link-menu button.saved-link-option{
 width:100%;
 min-width:0;
 min-height:37px;
 display:flex;
 align-items:center;
 gap:9px;
 padding:7px 9px;
 border:1px solid transparent;
 border-radius:9px;
 background:transparent;
 color:var(--text);
 text-align:left;
}
.saved-link-menu button.saved-link-option:hover,
.saved-link-menu button.saved-link-option:focus-visible{
 border-color:color-mix(in srgb,var(--accent) 19%,var(--line));
 background:color-mix(in srgb,var(--accent-soft) 67%,var(--surface));
}
.saved-link-menu .saved-link-icon{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;background:var(--accent-soft);color:var(--accent)}
.saved-link-menu .saved-link-icon svg{width:13px;height:13px}
.saved-link-menu button.saved-link-option span.saved-link-label{
 display:block;
 flex:1 1 0;
 min-width:0;
 max-width:100%;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 font:550 11.5px/1.4 Inter,'Noto Sans Khmer',sans-serif;
}
.saved-link-menu button.saved-link-more{display:none}
.saved-link-menu.opens-up{top:auto;bottom:calc(100% + 6px)}
@media(max-width:600px){
 .saved-link-menu{top:calc(100% + 4px);padding:4px;max-height:187px;border-radius:11px}
 .saved-link-menu button.saved-link-option{min-height:36px;padding:6px 8px;gap:8px}
 .saved-link-menu .saved-link-icon{height:22px;width:22px}
 .saved-link-menu button.saved-link-option span.saved-link-label{font-size:11.5px}
 .saved-link-head{font-size:9.5px;padding:3px 7px 4px}
 .saved-link-menu:not(.expanded) button.saved-link-option:nth-of-type(n+4){display:none}
 .saved-link-menu button.saved-link-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:32px;
  padding:5px 8px;
  margin-top:3px;
  border-top:1px solid var(--line);
  border-radius:7px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:10px;
  font-weight:750;
 }
 .saved-link-menu button.saved-link-more svg{width:13px;height:13px}
 .saved-link-menu.expanded button.saved-link-more svg{transform:rotate(180deg)}
 .saved-link-menu.opens-up{top:auto;bottom:calc(100% + 4px)}
}
@media(prefers-reduced-motion:reduce){.saved-link-menu button.saved-link-more svg{transition:none}}

/* PublicBoost v20261017.28 — fix the ACTUAL saved-link popup box.
   Desktop was spanning the entire order form, mobile had excess list height. */
.link-history-wrap > .saved-link-menu{
  left:0;
  right:auto;
  width:min(365px,100%);
  max-width:100%;
  height:auto;
  max-height:180px;
  padding:5px;
  overflow-x:hidden;
  overflow-y:hidden;
  border-radius:11px;
  box-shadow:0 10px 25px color-mix(in srgb,#000 22%,transparent);
}
/* Show only 3 rows by default on desktop AND mobile. */
.saved-link-menu:not(.expanded) button.saved-link-option:nth-of-type(n+4){display:none}
.saved-link-menu button.saved-link-option{
  min-height:33px;
  height:33px;
  gap:7px;
  padding:4px 7px;
  border-radius:7px;
}
.saved-link-menu .saved-link-icon{width:20px;height:20px;border-radius:6px}
.saved-link-menu .saved-link-icon svg{width:12px;height:12px}
.saved-link-menu button.saved-link-option span.saved-link-label{font-size:11px;line-height:1.35}
.saved-link-menu .saved-link-head{padding:3px 7px 5px;line-height:1.35;font-size:9px}
.saved-link-menu .saved-link-head small{min-width:18px;height:18px;font-size:9px}
.saved-link-menu button.saved-link-more{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  min-height:29px;
  height:29px;
  margin-top:3px;
  padding:4px 7px;
  border:0;
  border-radius:7px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:10px;
  font-weight:750;
}
.saved-link-menu button.saved-link-more svg{width:12px;height:12px}
.saved-link-menu.expanded{max-height:205px;overflow-y:auto;overscroll-behavior:contain}
.saved-link-menu.expanded button.saved-link-more{position:sticky;bottom:0;z-index:1}
@media(max-width:600px){
 .link-history-wrap > .saved-link-menu{width:100%;max-width:100%;max-height:172px;padding:4px}
 .saved-link-menu button.saved-link-option{min-height:32px;height:32px;padding:4px 7px}
 .saved-link-menu button.saved-link-option span.saved-link-label{font-size:10.5px}
 .saved-link-menu button.saved-link-more{min-height:29px;height:29px}
 .saved-link-menu.expanded{max-height:min(202px,38dvh);overflow-y:auto}
}

/* PublicBoost v20261017.29 — HIGH CONTRAST selected state on WHITE/LIGHT mode.
   Do not alter dark-mode selection or normal/inactive links. */
:root[data-theme=light]{
 --pb-light-selected-start:#d9ccfa;
 --pb-light-selected-end:#eee8ff;
 --pb-light-selected-border:#8052dd;
 --pb-light-selected-text:#3d286d;
 --pb-light-selected-shadow:rgba(93,53,174,.19);
 --pb-light-selected-ring:rgba(108,69,205,.15);
}
:root[data-theme=light] .desktop-nav .nav-link.active{
 color:var(--pb-light-selected-text);
 background:linear-gradient(110deg,var(--pb-light-selected-start),var(--pb-light-selected-end));
 box-shadow:inset 0 0 0 1.5px var(--pb-light-selected-border),0 0 0 2px var(--pb-light-selected-ring),0 8px 23px var(--pb-light-selected-shadow);
 font-weight:750;
}
:root[data-theme=light] .desktop-nav .nav-link.active svg{
 color:#6335ba;
 filter:drop-shadow(0 0 4px rgba(97,51,180,.19));
}
:root[data-theme=light] .desktop-nav .nav-link.active:before{
 width:4px;height:27px;
 background:linear-gradient(180deg,#9f73f5,#6535d4);
 box-shadow:0 0 9px rgba(93,49,190,.34);
}
/* The dot must remain dark purple on white, not pale lavender. */
:root[data-theme=light] .desktop-nav .nav-link.active:after{
 width:7px;height:7px;
 background:#6c40d0;
 animation:pbLightActiveDotPulse 2.7s ease-in-out infinite;
}
@keyframes pbLightActiveDotPulse{
 0%,100%{box-shadow:0 0 0 4px rgba(108,64,208,.20),0 0 8px rgba(108,64,208,.35)}
 50%{box-shadow:0 0 0 7px rgba(108,64,208,.12),0 0 14px rgba(108,64,208,.42)}
}
:root[data-theme=light] .bottom-nav .nav-link.active{
 color:#5936ad;
 background:linear-gradient(180deg,#dfd3ff,#f0eaff);
 box-shadow:inset 0 0 0 1.5px var(--pb-light-selected-border),inset 0 0 13px var(--pb-light-selected-ring);
 font-weight:750;
}
:root[data-theme=light] .bottom-nav .nav-link.active svg{color:#6335ba}
:root[data-theme=light] .bottom-nav .nav-link.active:before{background:#8052dd;box-shadow:0 0 7px rgba(108,64,208,.22)}
/* Selected form choices must also be distinct on white background. */
:root[data-theme=light] :is(.platform-pill.active,.category-button.active,.wallet-amount-button.active,.wallet-payment-method.active,.customer-support-choice.selected){
 color:var(--pb-light-selected-text);
 background:linear-gradient(120deg,#ded3ff,#f2edff);
 border-color:var(--pb-light-selected-border);
 box-shadow:inset 0 0 0 1px rgba(107,59,201,.17),0 0 0 1px var(--pb-light-selected-ring),0 5px 18px rgba(93,53,174,.14);
}
:root[data-theme=light] :is(.platform-pill.active,.category-button.active,.wallet-amount-button.active) :is(svg,b){color:#6335ba}
@media(prefers-reduced-motion:reduce){:root[data-theme=light] .desktop-nav .nav-link.active:after{animation:none}}

/* PublicBoost v20261017.32 — public policies and authentic ABA/KHQR accepted payments footer. */
.pb-legal-footer{
 margin-top:27px;
 padding:21px 23px 10px;
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:17px;
 box-shadow:0 7px 20px color-mix(in srgb,#000 6%,transparent);
 min-width:0;
}
.pb-legal-footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(165px,1.2fr) minmax(160px,.9fr);gap:18px;align-items:start}
.pb-legal-footer h3{font-size:12.5px;font-weight:800;line-height:1.7;margin:0 0 9px;color:var(--text)}
.pb-legal-brand{font-weight:850;font-size:18px;letter-spacing:-.6px;line-height:1.4}.pb-legal-brand span{color:var(--accent)}
.pb-legal-about>p{max-width:275px;font-size:10px;line-height:1.85;color:var(--muted);margin:7px 0 11px}
.pb-footer-help{display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:9px;background:var(--accent-soft);color:var(--accent);padding:8px 11px;font-size:10px;font-weight:750}
.pb-footer-help svg{width:14px;height:14px}
.pb-legal-links{display:grid;justify-items:start;gap:6px;min-width:0}
.pb-legal-links h3{margin-bottom:4px}
.pb-legal-links a{font-size:10px;color:var(--muted);line-height:1.8;transition:color .18s;overflow-wrap:anywhere}
.pb-legal-links a:hover,.pb-legal-links a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.pb-legal-payment a:first-of-type{display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:9px}
.pb-legal-payment img{display:block;width:162px;max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 3px 9px rgba(0,0,0,.13))}
.pb-legal-payment>p{font-size:9.5px;line-height:1.7;color:var(--muted);margin:7px 0}
.pb-payment-how{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-weight:750;font-size:10px}
.pb-payment-how svg{width:13px;height:13px}
.pb-legal-footer .page-foot.pb-legal-footline{border-top:1px solid var(--soft-line);padding:10px 0 1px;margin-top:17px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--faint);font-size:9px}
.pb-order-policy-link,.pb-wallet-policy-link{display:inline;text-decoration:underline;text-underline-offset:3px;color:var(--accent);font-weight:750;overflow-wrap:anywhere}
.pb-order-policy-link:hover,.pb-wallet-policy-link:hover{color:var(--text)}
@media(max-width:960px){
 .pb-legal-footer{padding:17px 16px 10px}
 .pb-legal-footer-grid{grid-template-columns:1fr 1fr;gap:16px}
 .pb-legal-payment{grid-column:1/-1;padding-top:13px;border-top:1px solid var(--soft-line)}
}
@media(max-width:600px){
 .pb-legal-footer{margin-top:22px;border-radius:15px;padding:16px 13px 10px}
 .pb-legal-footer-grid{grid-template-columns:1fr 1fr;column-gap:11px;row-gap:14px}
 .pb-legal-brand{font-size:16px}
 .pb-legal-about>p{font-size:9.5px;line-height:1.7}
 .pb-legal-footer h3{font-size:11px;margin-bottom:6px}
 .pb-legal-links{gap:7px}
 .pb-legal-links a{font-size:9px;line-height:1.7}
 .pb-footer-help{font-size:9px;padding:7px 8px}
 .pb-legal-payment{grid-column:1/-1;display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:3px 11px}
 .pb-legal-payment h3{grid-column:1/-1;margin-bottom:2px}
 .pb-legal-payment img{width:160px}
 .pb-legal-payment>p{font-size:9px;margin:0}
 .pb-payment-how{grid-column:1/-1;margin-top:5px;font-size:9px}
 .pb-legal-footer .page-foot.pb-legal-footline{margin-top:13px;padding-top:11px;gap:5px;flex-direction:column;align-items:flex-start;font-size:8.5px}
}
@media(max-width:370px){.pb-legal-footer-grid{grid-template-columns:1fr}.pb-legal-links{padding-top:10px;border-top:1px solid var(--soft-line)}.pb-legal-payment{grid-column:1/-1}}

/* PublicBoost v20261017.34 — compact footer: deliberately smaller than the actual Payment page. */
.pb-legal-footer{
  margin-top:20px;
  padding:14px 17px 7px;
  border-radius:14px;
}
.pb-legal-footer-grid{
  grid-template-columns:minmax(0,1fr) minmax(150px,1.1fr) minmax(128px,.82fr);
  column-gap:16px;
  row-gap:10px;
}
.pb-legal-footer h3{font-size:11px;line-height:1.55;margin-bottom:6px}
.pb-legal-brand{font-size:16px}
.pb-legal-about>p{margin:4px 0 8px;font-size:9.5px;line-height:1.65}
.pb-footer-help{padding:6px 9px;font-size:9.5px;border-radius:8px;min-height:29px}
.pb-footer-help svg{width:12px;height:12px}
.pb-legal-links{gap:3px}
.pb-legal-links h3{margin-bottom:3px}
.pb-legal-links a{font-size:9.5px;line-height:1.65}
.pb-legal-payment img{width:120px;max-width:100%;height:auto}
.pb-legal-payment>p{font-size:9px;line-height:1.6;margin:5px 0}
.pb-payment-how{font-size:9.5px}
.pb-legal-footer .page-foot.pb-legal-footline{
  margin-top:10px;
  padding:8px 0 0;
  font-size:8.5px;
}
@media(max-width:960px){
  .pb-legal-footer{padding:13px 14px 7px}
  .pb-legal-footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;row-gap:9px}
  .pb-legal-payment{padding-top:8px}
}
@media(max-width:600px){
  .pb-legal-footer{margin-top:15px;padding:12px 11px 7px;border-radius:12px}
  .pb-legal-footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px;row-gap:8px}
  .pb-legal-brand{font-size:14px}
  .pb-legal-footer h3{font-size:10px;line-height:1.5;margin-bottom:4px}
  .pb-legal-about>p{font-size:9px;line-height:1.55;margin:4px 0 7px}
  .pb-footer-help{font-size:9px;padding:5px 7px;min-height:28px}
  .pb-legal-links{gap:4px}
  .pb-legal-links a{font-size:9px;line-height:1.55}
  .pb-legal-payment{
    display:grid;
    grid-column:1/-1;
    grid-template-columns:minmax(100px,112px) minmax(0,1fr);
    gap:2px 9px;
    padding-top:8px;
  }
  .pb-legal-payment h3{grid-column:1/-1;margin:0 0 3px}
  .pb-legal-payment img{width:102px;max-width:100%;height:auto}
  .pb-legal-payment>p{font-size:9px;line-height:1.6;margin:0;align-self:center}
  .pb-payment-how{grid-column:1/-1;margin-top:3px;font-size:9px}
  .pb-legal-footer .page-foot.pb-legal-footline{margin-top:9px;padding-top:8px;gap:2px;font-size:8px}
}
@media(max-width:370px){
  .pb-legal-footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pb-legal-links{padding-top:0;border-top:0}
  .pb-legal-payment{grid-column:1/-1}
  .pb-legal-payment img{width:95px}
}

/* Keep Khmer policy links readable while removing nonessential mobile footer copy. */
@media(max-width:600px){
  .pb-legal-about>p{display:none}
  .pb-legal-links a{font-size:10px;line-height:1.65}
  .pb-legal-footer h3{font-size:10.5px}
  .pb-legal-footer .page-foot.pb-legal-footline{margin-top:7px}
  .pb-legal-footer .page-foot.pb-legal-footline span:last-child{display:none}
}

/* PublicBoost v20261017.35 — lightweight Wallet: four most recent transactions.
   View All retains the full, session-protected paginated transaction history. */
.wallet-transactions{padding-bottom:16px}
.wallet-transactions .wallet-section-head{margin-bottom:4px}
.wallet-activity-preview-caption{font-size:10px;line-height:1.65;color:var(--muted);margin:0 0 10px}
.wallet-transactions .wallet-activity-list{border-radius:12px}
.wallet-transactions .wallet-activity-row{min-height:0;padding:9px 12px;grid-template-columns:33px minmax(0,1fr) auto;gap:9px}
.wallet-transactions .wallet-activity-icon{width:31px;height:31px;border-radius:9px}
.wallet-transactions .wallet-activity-icon svg{height:14px;width:14px}
.wallet-transactions .wallet-activity-copy b{font-size:10.5px;line-height:1.5}
.wallet-transactions .wallet-activity-copy small{font-size:9px;line-height:1.5;margin-top:0}
.wallet-transactions .wallet-activity-row strong{font-size:11px;white-space:nowrap}
/* v20261017.36 — ABA KHQR uses a genuine in-place shimmer image like FB/IG/TikTok.
   No CSS transforms, bouncing or resizing. Motion Off renders the original SVG.
   Animation pixels are confined to the logo itself and do not indicate payment status. */
.wallet-payment-method.wallet-khqr-method .payment-logo.khqr-logo{
 animation:none!important;
 transform:none!important;
 will-change:auto;
}
@media(max-width:600px){
 .wallet-transactions{padding:13px 12px 12px}
 .wallet-transactions .wallet-section-head{gap:7px}
 .wallet-activity-preview-caption{font-size:9.5px;margin-bottom:7px}
 .wallet-transactions .wallet-activity-row{grid-template-columns:29px minmax(0,1fr) auto;gap:8px;padding:8px 10px}
 .wallet-transactions .wallet-activity-icon{width:28px;height:28px;border-radius:8px}
 .wallet-transactions .wallet-activity-row strong{font-size:10.5px}
 .wallet-transactions .wallet-activity-copy b{font-size:10px}
 .wallet-transactions .wallet-activity-copy small{font-size:9px}
 .wallet-view-all{font-size:10px;padding:6px 9px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
 .wallet-payment-method.wallet-khqr-method .payment-logo.khqr-logo{animation:none!important;transform:none!important;will-change:auto}
}

/* PublicBoost v20261017.37 — secure email & optional phone account UI. */
.pb-email-card{margin-top:13px;padding:15px;border-radius:13px;border:1px solid color-mix(in srgb,var(--accent) 19%,var(--line));background:var(--field);min-width:0}
.pb-email-card-heading{display:flex;align-items:center;gap:10px;min-width:0}
.pb-email-glyph{display:grid;place-items:center;flex:none;width:37px;height:37px;border-radius:11px;background:var(--accent-soft);color:var(--accent)}
.pb-email-glyph svg{width:18px;height:18px}
.pb-email-card-heading>div{min-width:0;flex:1;display:grid;gap:2px}
.pb-email-card-heading b{font-size:12px}
.pb-email-card-heading small{color:var(--muted);font-size:9px;overflow-wrap:anywhere}
.pb-email-chip{flex:none;font-size:9px;color:var(--muted);padding:4px 7px;border-radius:999px;border:1px solid var(--line)}
.pb-email-chip.verified{background:color-mix(in srgb,var(--green) 10%,var(--field));color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,var(--line))}
.pb-email-card>p{font-size:10px;line-height:1.8;color:var(--muted);margin:10px 0}
.pb-email-primary,.pb-email-code-form button{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;min-height:36px;border-radius:10px;background:var(--accent-solid);color:white;font-size:10.5px;font-weight:750}
.pb-email-code-form{display:grid;gap:8px;margin-top:11px;max-width:280px}
.pb-email-code-form label,.pb-phone-form label{display:grid;gap:6px;font-size:11px}
.pb-email-code-form input,.pb-phone-form input{height:43px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:0 12px;letter-spacing:.8px}
.pb-phone-status{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:12px;padding-top:11px}
.pb-phone-status>div{display:grid;gap:3px;min-width:0}.pb-phone-status b{font-size:10.5px}.pb-phone-status small{color:var(--muted);font-size:9px;overflow-wrap:anywhere}
.pb-phone-status button{border:1px solid var(--line);border-radius:9px;background:var(--surface);padding:7px 10px;color:var(--accent);font-weight:750;font-size:10px}
.pb-phone-form{display:grid;gap:12px}.pb-phone-form>p{font-size:11px;line-height:1.85;color:var(--muted)}
.pb-phone-form .primary-button{min-height:43px;border-radius:10px}
.auth-form .account-email-tip{margin:0;color:var(--muted);font-size:10px;line-height:1.65}
.pb-email-reset-option{width:100%;min-height:40px;padding:9px 11px;margin-top:12px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 23%,var(--line));border-radius:10px;color:var(--accent);font-size:11px;font-weight:750}
.pb-email-reset-unavailable{font-size:10px;line-height:1.75;background:var(--field);border:1px solid var(--line);padding:10px 12px;border-radius:10px;margin-top:10px;color:var(--muted)}
@media(max-width:600px){.pb-email-card{padding:12px}.pb-email-card-heading{gap:7px}.pb-email-chip{font-size:8px;max-width:120px;text-align:center}.pb-email-card-heading b{font-size:11px}.pb-email-card>p{font-size:9.5px}.pb-phone-status{align-items:start}.pb-phone-status button{flex:none}}

/* v20261017.38 — NOKOR-style account recovery choices, separate from existing login. */
.pb-recovery-panel{max-width:500px}
.pb-recovery-heading{text-align:center;display:grid;gap:7px;margin:21px 0 12px}
.pb-recovery-heading>small{letter-spacing:2px;font-weight:800;color:var(--accent);font-size:9px}
.pb-recovery-heading h1{font-size:21px;font-weight:830;line-height:1.65;margin:0}
.pb-recovery-lead{text-align:center;font-size:11px;line-height:1.95;color:var(--muted);margin:0 0 18px}
.pb-recovery-choice-list{display:grid;gap:11px}
.pb-recovery-choice{display:flex;align-items:center;gap:11px;min-height:76px;border:1px solid var(--line);border-radius:15px;padding:11px 14px;text-align:left;background:var(--field);color:var(--text)}
.pb-recovery-choice:not(:disabled):hover,.pb-recovery-choice:not(:disabled):focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.pb-recovery-choice>span:nth-child(2){display:grid;gap:4px;min-width:0;flex:1}
.pb-recovery-choice>span:nth-child(2)>b{font-size:13px}
.pb-recovery-choice>span:nth-child(2)>small{font-size:10px;color:var(--muted);line-height:1.65}
.pb-recovery-choice>svg{width:16px;height:16px;color:var(--muted);flex:none}
.pb-recovery-choice-icon{width:45px;height:45px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent);border-radius:13px}
.pb-recovery-choice-icon.tg{color:#43adee;background:color-mix(in srgb,#43adee 13%,var(--field));border:1px solid color-mix(in srgb,#43adee 39%,var(--line))}
.pb-recovery-choice-icon>svg{width:22px;height:22px}
.pb-recovery-choice.disabled{opacity:.60;cursor:not-allowed}
.pb-recovery-steps{border:1px solid var(--line);background:var(--field);border-radius:13px;padding:12px 14px;margin-top:13px;color:var(--muted);font-size:10px;line-height:1.8}
.pb-recovery-steps>b{font-size:11px;color:var(--text)}
.pb-recovery-steps>p{margin:6px 0 0;font-size:10px;line-height:1.8}
.pb-telegram-waiting{border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:var(--accent-soft);border-radius:13px;padding:17px;text-align:center;display:grid;justify-items:center;gap:9px;color:var(--text);margin-bottom:12px}
.pb-telegram-waiting>svg{width:27px;height:27px;color:var(--accent)}
.pb-telegram-waiting>b{font-size:12px}
.pb-telegram-waiting>small{font-size:10px;line-height:1.8;color:var(--muted)}
.pb-tg-open-recovery,.pb-recovery-check{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:43px;padding:10px;border-radius:10px;background:#2695ce;color:#fff;font-size:12px;font-weight:750}
.pb-tg-open-recovery svg{width:16px;height:16px}.pb-recovery-check{margin-top:10px;background:var(--accent-soft);border:1px solid var(--line);color:var(--accent)}
.pb-tg-verify-phone{border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));background:var(--accent-soft);color:var(--accent)}
@media(max-width:600px){.pb-recovery-panel{width:min(100%,440px)}.pb-recovery-choice{min-height:68px;padding:10px}.pb-recovery-choice-icon{width:39px;height:39px}.pb-recovery-heading h1{font-size:18px}.pb-recovery-lead{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.pb-recovery-choice{transition:none}}

/* Secure Telegram phone sign-in: visually matches PublicBoost recovery and leaves email login prominent. */
.pb-login-tg-slot{display:grid;gap:5px;margin:12px 0;text-align:center}
.pb-login-via-tg{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:43px;border:1px solid #227db1;border-radius:11px;background:color-mix(in srgb,#289de0 13%,var(--surface));color:var(--text);font-size:12px;font-weight:760}
.pb-login-via-tg>svg{width:17px;height:17px;color:#2ba5e8}
.pb-login-via-tg:disabled{opacity:.60;cursor:not-allowed}
.pb-login-tg-slot>small{font-size:9px;color:var(--muted);line-height:1.6}
@media(max-width:600px){.pb-login-via-tg{min-height:41px;font-size:11px}}