@font-face{
  font-family:"Google Sans";
  src:local("Google Sans Regular"),local("GoogleSans-Regular"),
      url("assets/fonts/GoogleSans-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Google Sans";
  src:local("Google Sans Medium"),local("GoogleSans-Medium"),
      url("assets/fonts/GoogleSans-Medium.ttf") format("truetype");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:"Google Sans";
  src:local("Google Sans SemiBold"),local("GoogleSans-SemiBold"),
      url("assets/fonts/GoogleSans-SemiBold.ttf") format("truetype");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}

:root{color-scheme:light;--bg:#f6f8fb;--surface:#ffffff;--surface-2:#eef3f8;--text:#112033;--muted:#6b788b;--line:#d9e4ee;--primary:#1688f7;--primary-soft:#e8f4ff;--danger:#c83e4d;--danger-soft:#fff0f2;--success:#219653;--success-soft:#eaf8ef;--pending:#a66b0a;--pending-soft:#fff6e5;--tools:#177cf3;--tools-soft:#eaf3ff;--stock:#20a447;--stock-soft:#eaf8ee;--design:#f27b1f;--design-soft:#fff2e7;--shadow:0 5px 18px #15283b0a;--radius:18px;--nav-h:80px}
html[data-theme="dark"]{color-scheme:dark;--bg:#0d141e;--surface:#161f2c;--surface-2:#202c3d;--text:#f0f5fc;--muted:#a0aec1;--line:#293547;--primary:#6ab4ff;--primary-soft:#1a304a;--danger:#ff8c98;--danger-soft:#36232c;--success:#75dba7;--success-soft:#19372e;--pending:#f4c36a;--pending-soft:#352d20;--tools:#83baff;--tools-soft:#1d3048;--stock:#77d6a4;--stock-soft:#1c352d;--design:#ffa36d;--design-soft:#382b24;--shadow:none}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Google Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5}
body{min-height:100vh;overscroll-behavior-y:none}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button{transition:background .18s,box-shadow .18s,transform .18s}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--primary);outline-offset:4px}button,input{min-width:0}h1,h2,p{overflow-wrap:break-word}
.app{width:min(100%,640px);margin:auto;min-height:100vh;position:relative}.page{display:none;min-height:100vh;padding:0 20px calc(var(--nav-h) + 32px + env(safe-area-inset-bottom))}.page.active{display:block}.page.no-nav{padding-bottom:36px}
.header{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:15;background:var(--bg);padding:14px 0}.brand-caption{font-size:.6875rem;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:2px}.header h1{font-size:1.875rem;line-height:1.2;margin:0;font-weight:600;letter-spacing:-.055em}.header-side{display:flex;align-items:center;gap:7px;flex-shrink:0}.header.center{min-height:82px}.header.center h1{font-size:1.125rem;letter-spacing:-.02em;flex:1}.header.center .header-side{min-width:44px}.header.center .right{min-width:64px}.icon-btn,.text-icon-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);height:42px;min-width:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 11px;font-size:.875rem;font-weight:600}.text-icon-btn{color:var(--primary)}.icon-btn:hover,.text-icon-btn:hover{background:var(--surface-2)}
.ico{width:21px;height:21px;display:inline-block;flex:0 0 auto;vertical-align:middle;fill:none}
.hero-copy{padding:0 0 20px}.hero-copy p{margin:0;color:var(--muted);font-size:.875rem;line-height:1.6;max-width:390px}
.credit-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--primary-soft);border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line));border-radius:18px;padding:15px 16px;margin-bottom:24px}.credit-card .left{display:flex;gap:12px;align-items:center;font-size:.875rem;font-weight:500}.credit-card .wallet-icon{background:var(--surface);border-radius:12px;display:grid;place-items:center;width:40px;height:40px;color:var(--primary)}.credit-card strong{font-size:1.2rem;letter-spacing:-.03em;white-space:nowrap;color:var(--primary);font-variant-numeric:tabular-nums}.catalog-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.catalog-label h2{font-size:.8125rem;letter-spacing:.03em;font-weight:600;margin:0;color:var(--muted)}.catalog-label span{font-size:.75rem;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.product-card{padding:20px;margin-bottom:15px;position:relative}.product-main{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center}.product-logo{width:76px;height:76px;border-radius:0;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;background:#101923;flex:0 0 auto}.product-logo img{width:144%;height:144%;max-width:none;object-fit:contain;flex-shrink:0;mix-blend-mode:screen}.product-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.product-title{font-size:1.1875rem;font-weight:600;letter-spacing:-.035em;line-height:1.3}.tag{font-size:.75rem;font-weight:600;border-radius:6px;padding:2px 6px;background:var(--surface-2);color:var(--muted)}.tag.new{background:var(--tools-soft);color:var(--tools)}.product-desc{font-size:.875rem;color:var(--muted);line-height:1.5;margin-top:5px;max-width:250px}.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.price-label{font-size:.75rem;color:var(--muted);margin-bottom:3px}.price{font-size:1.4375rem;font-weight:600;letter-spacing:-.045em;line-height:1.25;font-variant-numeric:tabular-nums}.price small{font-size:.75rem;font-weight:600;letter-spacing:0;color:var(--muted);margin-left:3px}.price.tools{color:var(--tools)}.price.stock{color:var(--stock)}.price.design{color:var(--design);font-size:1rem;letter-spacing:-.01em}
.btn{border:0;border-radius:13px;min-height:46px;padding:10px 17px;font-size:.875rem;line-height:1.4;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.full{width:100%}.btn.primary{background:#2379db;color:#fff}.btn.tools{background:#2374d7;color:#fff}.btn.stock{background:#168250;color:#fff}.btn.ghost{background:var(--surface-2);color:var(--text)}.btn.danger{background:#c53746;color:#fff}.btn:disabled{color:var(--muted);background:var(--surface-2)}.btn.small{min-height:42px}.btn:hover:not(:disabled){box-shadow:0 4px 12px #162d4920}.product-bottom .btn{min-width:108px}
.bottom-nav{position:fixed;z-index:25;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,640px);min-height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:9px 24px calc(9px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--surface);border-top:1px solid var(--line)}.bottom-nav.hidden{display:none}.nav-item{border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:9px;font-size:.875rem;font-weight:600;border-radius:14px;min-height:52px}.nav-item .ico{width:22px;height:22px}.nav-item.active{color:var(--primary);background:var(--primary-soft)}
.section{margin-top:23px}.section-title{font-size:.875rem;font-weight:600;margin:0 0 10px;color:var(--text)}.summary-card{padding:18px;display:flex;align-items:center;gap:15px}.summary-card .product-logo{width:58px;height:58px}.summary-card .title{font-size:1.125rem;font-weight:600;letter-spacing:-.03em}.summary-card .sub{color:var(--muted);font-size:.8125rem;margin-top:3px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.plan{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:14px 6px;text-align:center;color:var(--text);min-height:78px}.plan strong{display:block;font-size:.875rem;font-weight:600}.plan span{display:block;margin-top:4px;font-size:.8125rem;color:var(--muted)}.plan.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;background:var(--primary-soft)}.plan.active strong{color:var(--primary)}
.input-wrap{position:relative}.input{width:100%;min-height:54px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:14px;padding:13px 15px;font-size:1rem;outline:none}.input::placeholder{color:var(--muted)}#computerId{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.055em}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.hint,.error{font-size:.8125rem;margin-top:8px;line-height:1.5}.hint{color:var(--muted)}.error{color:var(--danger);display:none}.error.show{display:block}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}.method{min-height:75px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--text);padding:13px;text-align:left}.method strong{display:block;font-size:.875rem;font-weight:600}.method span{font-size:.75rem;color:var(--muted)}.method.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 1px var(--primary) inset}.method.active span{color:var(--primary)}
.account-card,.amount-card{padding:9px 17px}.account-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0}.account-row+.account-row{border-top:1px solid var(--line)}.account-row .k{font-size:.75rem;color:var(--muted)}.account-row .v{font-size:.9375rem;font-weight:600;margin-top:3px;word-break:break-word}.copy-mini{border:0;background:var(--surface-2);color:var(--primary);width:42px;height:42px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center}.amount-line{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;padding:9px 0}.amount-line span:first-child{color:var(--muted)}.amount-line strong{font-size:.875rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.amount-line.total{border-top:1px solid var(--line);margin-top:4px;padding:15px 0;font-size:1.0625rem;font-weight:600}.amount-line.total span:first-child{color:var(--text)}.amount-line.total strong{color:var(--primary);font-variant-numeric:tabular-nums}
.upload-box{border:1.5px dashed color-mix(in srgb,var(--primary) 35%,var(--line));border-radius:18px;padding:24px 14px;background:var(--surface);color:var(--text);text-align:center}.upload-box .ico{width:28px;height:28px;color:var(--primary)}.upload-box strong{display:block;font-size:.9375rem;font-weight:600;margin-top:10px}.upload-box p{margin:5px 0 0;color:var(--muted);font-size:.8125rem}.receipt-ready{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px}.receipt-thumb{width:58px;height:68px;border-radius:9px;object-fit:cover;background:var(--surface-2)}.receipt-info{min-width:0;flex:1}.receipt-info strong{font-size:.875rem;color:var(--success)}.receipt-info p{font-size:.75rem;color:var(--muted);margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.receipt-actions{display:flex;gap:4px}.mini-icon{border:0;background:var(--surface-2);color:var(--muted);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}.submit-wrap{margin-top:24px}.submit-wrap .btn{min-height:52px;font-size:1rem}.legal-note{font-size:.75rem;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}
.filters{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity}.filters::-webkit-scrollbar{display:none}.filter{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:12px;padding:10px 14px;font-size:.875rem;font-weight:500;min-height:43px}.filter.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:500}
.order-card{padding:18px;margin-bottom:14px;position:relative;user-select:none}.order-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.order-name{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}.order-id{font-size:.75rem;color:var(--muted);margin-top:4px}.status-pill{border-radius:9px;padding:6px 9px;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:6px;flex-shrink:0}.status-pill .ico{width:15px;height:15px}.status-pill.completed{background:var(--success-soft);color:var(--success)}.status-pill.pending{background:var(--pending-soft);color:var(--pending)}.status-pill.declined{background:var(--danger-soft);color:var(--danger)}.order-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px 12px;margin-top:18px}.order-info .k{font-size:.75rem;color:var(--muted)}.order-info .v{font-size:.875rem;font-weight:500;margin-top:3px;overflow-wrap:anywhere}.order-info>div:has(.license-value){grid-column:1/-1}.status-panel{border-radius:13px;padding:15px;margin-top:16px;font-size:.875rem;display:flex;gap:12px;align-items:center}.status-panel .ico{width:36px;height:36px;margin-top:0;flex:0 0 36px}.status-panel.pending{background:var(--pending-soft);color:var(--pending)}.status-panel.declined{background:var(--danger-soft);color:var(--danger)}.status-panel.completed{background:var(--success-soft);color:var(--success)}.status-panel b{display:block;font-weight:600}.status-panel span{display:block;margin-top:3px;color:var(--muted);font-size:.8125rem}.order-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:11px;border-top:1px solid var(--line)}.details-link{border:0;background:transparent;color:var(--primary);font-size:.875rem;font-weight:600;padding:8px 0;min-height:42px}.restore-btn{border:0;background:var(--primary-soft);color:var(--primary);font-size:.875rem;font-weight:600;padding:10px 12px;border-radius:11px;display:flex;align-items:center;gap:6px}.restore-btn .ico{width:17px;height:17px}.more-btn{border:0;background:var(--surface-2);color:var(--muted);width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.empty{padding:64px 22px 30px;text-align:center}.empty-icon{width:80px;height:80px;border-radius:24px;background:var(--surface);border:1px solid var(--line);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;color:var(--muted)}.empty-icon .ico{width:36px;height:36px}.empty h2{font-size:1.25rem;letter-spacing:-.03em;margin:0 0 8px}.empty p{font-size:.875rem;color:var(--muted);line-height:1.6;margin:0 auto 20px;max-width:290px}
.detail-card{padding:8px 18px;margin-bottom:14px}.kv{display:flex;justify-content:space-between;gap:16px;padding:13px 0}.kv+.kv{border-top:1px solid var(--line)}.kv .k{font-size:.875rem;color:var(--muted)}.kv .v{text-align:right;font-size:.875rem;font-weight:600;overflow-wrap:anywhere;min-width:0}.license-card{padding:18px;border-color:var(--line);background:var(--surface)}.license-card .section-title{color:var(--text)}.license-key{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.license-key code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:600;font-size:1.0625rem;overflow-wrap:anywhere;color:var(--text)}.copy-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.copy-row .btn{font-size:.8125rem;padding:12px 9px}.locked .input{background:var(--surface-2);font-size:.875rem}
.sheet-backdrop{display:none;position:fixed;inset:0;z-index:60;background:#050c1880;align-items:flex-end;justify-content:center}.sheet-backdrop.open{display:flex}.sheet{width:min(100%,640px);background:var(--surface);border-radius:26px 26px 0 0;padding:16px 24px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -14px 40px #050c1820}.sheet-handle{width:38px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 22px}.sheet h2{font-size:1.25rem;letter-spacing:-.03em;margin:0 0 8px}.sheet p{font-size:.875rem;color:var(--muted);line-height:1.6;margin:0 0 22px}.sheet-actions{display:grid;gap:10px}.menu-pop{display:none;position:absolute;z-index:55;min-width:166px;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:5px;box-shadow:0 12px 36px #050c1826}.menu-pop.open{display:block}.menu-item{width:100%;border:0;background:transparent;color:var(--text);min-height:44px;border-radius:10px;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:.875rem;font-weight:600}.menu-item:hover{background:var(--surface-2)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:80;background:var(--text);color:var(--bg);border-radius:14px;padding:12px 18px;font-size:.875rem;font-weight:500;opacity:0;pointer-events:none;transition:.18s ease;max-width:calc(100% - 32px);text-align:center;width:max-content}.toast.show{opacity:1;transform:translate(-50%,0)}.loading-dot{display:inline-block;width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.confetti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}.confetti i{position:absolute;top:-15px;width:7px;height:12px;background:var(--primary);animation:fall 1.2s linear forwards}.confetti i:nth-child(3n){background:var(--success)}.confetti i:nth-child(3n+1){background:var(--pending)}@keyframes fall{to{transform:translateY(110vh) rotate(500deg);opacity:.7}}
@media(min-width:700px){.page{padding-left:32px;padding-right:32px}.header{min-height:110px}.product-card{padding:23px}.product-main{grid-template-columns:84px 1fr;gap:20px}.product-logo{width:84px;height:84px}.product-desc{max-width:none}.product-title{font-size:1.3125rem}.bottom-nav{border-radius:22px 22px 0 0;border:1px solid var(--line);border-bottom:0}}
@media(max-width:380px){.page{padding-left:15px;padding-right:15px}.product-card{padding:16px}.product-main{grid-template-columns:62px minmax(0,1fr);gap:12px}.product-logo{width:62px;height:62px}.product-title{font-size:1.0625rem}.product-desc{font-size:.8125rem}.product-bottom .btn{min-width:94px}.copy-row{grid-template-columns:1fr}.header h1{font-size:1.7rem}.header.center h1{font-size:1rem}.brand-caption{letter-spacing:.09em}.credit-card{padding:13px}.credit-card .left{gap:9px}.credit-card strong{font-size:1.0625rem}.order-head{flex-wrap:wrap}.plan-grid{gap:6px}.plan{padding-left:4px;padding-right:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confetti{display:none}}


/* Phase 2 v4 — approved Shop visual match */
body{background:var(--bg)}
.app{width:min(100%,620px)}
.page{padding-left:18px;padding-right:18px}
.header{min-height:88px;padding:17px 0 12px;background:color-mix(in srgb,var(--bg) 96%,transparent)}
.header h1{font-size:2rem;font-weight:600;letter-spacing:-.045em}
.icon-btn,.text-icon-btn{height:44px;min-width:44px;border-radius:13px;background:color-mix(in srgb,var(--surface) 88%,transparent);border-color:var(--line)}
.text-icon-btn{font-size:.95rem;font-weight:500;padding:0 12px}

.credit-card{justify-content:flex-start;gap:16px;padding:18px 20px;margin:4px 0 28px;border-radius:18px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid color-mix(in srgb,var(--primary) 48%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 8%,transparent) inset}
.credit-card .wallet-icon{width:58px;height:58px;border-radius:15px;background:color-mix(in srgb,var(--primary) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 68%,var(--line));color:var(--primary)}
.credit-card .wallet-icon .ico{width:31px;height:31px}
.credit-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.credit-copy>span{font-size:.9rem;color:var(--muted);font-weight:500}
.credit-copy strong{font-size:1.75rem;line-height:1.15;color:var(--success);font-weight:600;letter-spacing:-.03em}
.catalog-label{margin:0 2px 14px}.catalog-label h2{font-size:1.18rem;letter-spacing:-.02em;font-weight:600;color:var(--text)}

.product-card{display:grid;grid-template-columns:88px minmax(0,1fr) 44px;grid-template-areas:"logo copy quick" "action action action";align-items:start;gap:16px;padding:18px 19px 17px;margin-bottom:14px;border-radius:18px;background:var(--surface);border-color:var(--line);overflow:hidden}
html[data-theme="dark"] .product-card{background:var(--surface);border-color:var(--line)}
.product-logo{grid-area:logo;width:88px;height:88px;border-radius:18px;background:color-mix(in srgb,var(--surface-2) 70%,transparent);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-logo img{width:71%;height:71%;object-fit:contain;mix-blend-mode:normal;max-width:100%;filter:none}
.product-logo.tools{background:color-mix(in srgb,var(--tools) 8%,var(--surface));border-color:color-mix(in srgb,var(--tools) 72%,var(--line))}
.product-logo.stock{background:color-mix(in srgb,var(--stock) 8%,var(--surface));border-color:color-mix(in srgb,var(--stock) 72%,var(--line))}
.product-logo.design{background:color-mix(in srgb,var(--design) 7%,var(--surface));border-color:color-mix(in srgb,#aa72ff 60%,var(--line))}
html[data-theme="dark"] .product-logo{background:#071827}
html[data-theme="dark"] .product-logo.tools{box-shadow:inset 0 0 24px #168dff12}
html[data-theme="dark"] .product-logo.stock{box-shadow:inset 0 0 24px #49d45d12}
html[data-theme="dark"] .product-logo.design{box-shadow:inset 0 0 24px #ff8a1f10}
.product-copy{grid-area:copy;min-width:0;align-self:center;padding-right:2px}
.product-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.tag{font-size:.72rem;font-weight:500;padding:4px 8px;border-radius:10px;line-height:1.15}
.tag.new{background:color-mix(in srgb,var(--stock) 18%,var(--surface));border:1px solid color-mix(in srgb,var(--stock) 68%,transparent);color:var(--stock)}
.tag.device{background:color-mix(in srgb,var(--tools) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--tools) 38%,transparent);color:var(--tools)}
.product-title{font-size:1.13rem;font-weight:600;letter-spacing:-.025em;line-height:1.3}
.product-desc{font-size:.84rem;color:var(--muted);line-height:1.55;margin-top:6px;max-width:245px}
.product-go{grid-area:quick;align-self:start;justify-self:end;width:44px;height:44px;border:none;border-radius:14px;background:color-mix(in srgb,var(--surface-2) 82%,transparent);border:1px solid var(--line);color:var(--text);display:grid;place-items:center;cursor:pointer}
.product-go .ico,.channel-arrow .ico{width:18px;height:18px;transform:rotate(180deg)}
.product-go:disabled{opacity:.65;cursor:default}
.product-action{grid-area:action;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;min-width:0;margin-top:6px}
.shop-price{font-size:1.05rem;font-weight:600;white-space:nowrap;letter-spacing:-.015em;display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;gap:3px}
.shop-price strong{font-size:1.15em;line-height:1.05;font-weight:600}
.price-from{font-size:.78rem;color:var(--muted);font-weight:500;letter-spacing:0}
.shop-price.tools{color:var(--success)}
.shop-price.stock{color:var(--stock)}
.shop-price.design{color:var(--muted);font-weight:520}
.product-action .btn{min-width:104px;min-height:45px;border-radius:13px;font-size:.91rem;font-weight:500;padding:10px 16px;white-space:nowrap}
html[data-theme="dark"] .product-action .btn.tools{box-shadow:0 0 16px #168dff35}
html[data-theme="dark"] .product-action .btn.stock{box-shadow:0 0 16px #49d45d2c}

.bottom-nav{background:color-mix(in srgb,var(--surface) 95%,transparent);border-top-color:var(--line);padding-top:7px}
html[data-theme="dark"] .bottom-nav{background:#061625}
.nav-item{flex-direction:column;gap:3px;min-height:58px;font-size:.8rem;font-weight:500;background:transparent!important}
.nav-item .ico{width:25px;height:25px}.nav-item.active{color:var(--primary)}

.summary-card .product-logo{width:62px;height:62px;border-radius:15px}

@media(max-width:470px){
  .page{padding-left:14px;padding-right:14px}
  .header{min-height:82px}.header h1{font-size:1.82rem}
  .product-card{grid-template-columns:76px minmax(0,1fr) 40px;grid-template-areas:"logo copy quick" "action action action";gap:12px 12px;padding:15px 16px}
  .product-logo{width:76px;height:76px;border-radius:16px}
  .product-title{font-size:1.04rem}.product-desc{font-size:.8rem;line-height:1.48;max-width:none}
  .product-go{width:40px;height:40px;border-radius:13px}
  .product-action{width:100%;min-width:0;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:4px}
  .shop-price{font-size:.98rem}.product-action .btn{min-width:104px;padding:9px 12px;font-size:.84rem}
  .tag{font-size:.68rem;padding:3px 7px}.product-badges{margin-bottom:6px;gap:5px}
  .credit-card{padding:15px 16px}.credit-card .wallet-icon{width:52px;height:52px}.credit-copy strong{font-size:1.52rem}
}
@media(max-width:380px){
  .product-card{grid-template-columns:68px minmax(0,1fr) 38px;grid-template-areas:"logo copy quick" "action action action";align-items:start;gap:10px 11px;padding:14px}
  .product-logo{width:68px;height:68px}.product-go{width:38px;height:38px;border-radius:12px}.product-action{align-items:flex-end;justify-content:space-between;width:100%;min-width:0;gap:8px}.shop-price{align-self:flex-start}.product-action .btn{min-width:96px}
}

/* v5 polish */
.method .method-number{display:block;margin-top:4px;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.method.active .method-number{color:var(--primary)}
.method .method-state{display:block;margin-top:3px;font-size:.68rem;color:var(--muted)}
.method.active .method-state{color:var(--primary)}
.order-account-number{font-variant-numeric:tabular-nums}

/* v6 payment method logos */
.method-top{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.method-top strong{margin:0}
.method-logo{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:color-mix(in srgb,var(--surface) 86%,transparent)}
.method-logo img{width:27px;height:27px;object-fit:contain;display:block}
.method.active .method-logo{background:color-mix(in srgb,var(--primary-soft) 82%,var(--surface))}

/* Phase 2 v7 final fixes */
.amount-copy{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
.amount-copy-btn{width:34px;height:34px;border-radius:10px}
.amount-copy-btn .ico{width:18px;height:18px}

.method-logo{
  width:44px!important;
  height:44px!important;
  border-radius:12px!important;
  background:#fff!important;
  border:1px solid rgba(15,23,42,.08)!important;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
  overflow:hidden;
}
.method-logo img{
  width:32px!important;
  height:32px!important;
  object-fit:contain;
}
html[data-theme="dark"] .method-logo{
  background:#fff!important;
  border-color:rgba(255,255,255,.12)!important;
}
.status-panel{gap:14px}

/* Phase 2 v12 */
.status-panel{align-items:center!important}
.status-panel > .ico,
.status-panel .status-title .ico,
.status-panel strong .ico{
  margin-top:0!important;
  align-self:center!important;
}


/* Phase 2 UI v13 — final pre-Phase-3 refinements */
/* Plan choices are a simple list in the approved order: Lifetime, 1 Year, 3 Months. */
.plan-grid{grid-template-columns:1fr;gap:9px}
.plan{min-height:60px;padding:12px 15px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:14px}
.plan strong{font-size:.9rem}
.plan span{margin-top:0;font-size:.84rem;white-space:nowrap}

/* Payment method tabs show only method name + selection state; account details stay below. */
.method{min-height:82px;display:flex;flex-direction:column;justify-content:center}
.method-top{margin-bottom:4px}
.method-state{display:block!important;margin-top:2px!important;font-size:.72rem!important}

/* Payable/remaining amount uses the same visual scale as account values. */
.amount-line.total{font-size:.875rem;font-weight:400}
.amount-line.total>span:first-child{font-size:.75rem;color:var(--muted)}
.amount-line.total .amount-copy strong{font-size:.9375rem;font-weight:600;letter-spacing:0;color:var(--primary)}
.amount-copy-btn{width:42px;height:42px;border-radius:12px}
.amount-copy-btn .ico{width:21px;height:21px}

/* Shop footer card replacing the old 'more tools coming soon' message. */
.channel-card{width:100%;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line));background:color-mix(in srgb,var(--primary-soft) 58%,var(--surface));color:var(--text);border-radius:18px;padding:16px 17px;margin:8px 0 12px;display:grid;grid-template-columns:46px minmax(0,1fr) 38px;gap:13px;align-items:center;text-align:left;box-shadow:var(--shadow)}
.channel-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}
.channel-icon .ico{width:25px;height:25px}
.channel-copy{display:flex;flex-direction:column;min-width:0}
.channel-copy strong{font-size:.94rem;font-weight:600;letter-spacing:-.015em}
.channel-copy span{font-size:.8rem;color:var(--muted);margin-top:3px;line-height:1.4}
.channel-arrow{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--primary);border:1px solid var(--line)}
.channel-arrow .ico{width:20px;height:20px;transform:rotate(180deg)}
html[data-theme="dark"] .channel-card{background:color-mix(in srgb,var(--primary-soft) 45%,var(--surface))}

/* Day/night status colors stay soft while retaining clear state contrast. */
.status-pill.completed,.status-panel.completed{border:1px solid color-mix(in srgb,var(--success) 22%,transparent)}
.status-pill.pending,.status-panel.pending{border:1px solid color-mix(in srgb,var(--pending) 22%,transparent)}
.status-pill.declined,.status-panel.declined{border:1px solid color-mix(in srgb,var(--danger) 22%,transparent)}
html[data-theme="dark"] .status-pill.completed,html[data-theme="dark"] .status-panel.completed{background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success)}
html[data-theme="dark"] .status-pill.pending,html[data-theme="dark"] .status-panel.pending{background:color-mix(in srgb,var(--pending) 13%,var(--surface));color:var(--pending)}
html[data-theme="dark"] .status-pill.declined,html[data-theme="dark"] .status-panel.declined{background:color-mix(in srgb,var(--danger) 13%,var(--surface));color:var(--danger)}

.menu-divider{height:1px;background:var(--line);margin:2px 8px}

@media(max-width:380px){
  .plan{padding:11px 13px}
  .channel-card{grid-template-columns:42px minmax(0,1fr) 36px;padding:14px;gap:10px}
  .channel-icon{width:42px;height:42px}.channel-arrow{width:36px;height:36px}
}

/* v16 — keep Shop exactly as v14; Purchase-only refinements */
.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plan-grid .plan:last-child:nth-child(odd){grid-column:1 / span 1}
.amount-line.total{font-size:.875rem;font-weight:400;padding:12px 0 9px}
.amount-line.total>span:first-child{font-size:.875rem;color:var(--muted)}
.amount-line.total .amount-copy strong{font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--text)}
@media(max-width:380px){
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .amount-line.total .amount-copy strong{font-size:.875rem}
}

.remaining-amount-card .remaining-total{border-top:0;margin-top:0;padding-top:9px;padding-bottom:9px;align-items:center}.remaining-amount-card .remaining-total>span:first-child{color:var(--text)}.remaining-amount-card .amount-copy{justify-content:center;align-items:center}.remaining-amount-card .remaining-total strong{display:inline-flex;align-items:center}

/* v18 payable alignment */
.amount-line.total{align-items:center;padding:12px 0 12px}
.amount-line.total>span:first-child{display:inline-flex;align-items:center;font-size:.875rem;color:var(--muted)}
.amount-line.total .amount-copy{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px}
.amount-line.total .amount-copy strong{font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--text);display:inline-flex;align-items:center;line-height:1}
.amount-line.total .amount-copy .amount-copy-btn{align-self:center}
.remaining-amount-card .remaining-total{border-top:0;margin-top:0;padding:10px 0;align-items:center}
.remaining-amount-card .remaining-total>span:first-child{color:var(--text)}
.remaining-amount-card .amount-copy{justify-content:center;align-items:center}
.remaining-amount-card .remaining-total strong{display:inline-flex;align-items:center}

/* Phase 3 Step 4 UI v2 — dynamic product color + product info refinements */
.product-card{--product-accent:var(--primary)}
.shop-price.product-accent{color:var(--product-accent)}
.product-action .btn.product-accent-btn{background:var(--product-accent);color:#fff}
.product-action .btn.product-accent-btn:hover:not(:disabled){box-shadow:0 4px 14px color-mix(in srgb,var(--product-accent) 28%,transparent)}
.shop-price.unavailable{color:var(--muted);font-weight:520}
.product-card.single-plan .product-action{align-items:center}
.product-card.single-plan .shop-price{justify-content:center;align-self:center}
.product-card.single-plan .product-action .btn{align-self:center}
.product-go{transition:background .15s ease,color .15s ease,border-color .15s ease}
.product-go:hover{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,var(--line));background:var(--primary-soft)}

/* Phase 3 Step 4 UI v3 — product info page + consistent info controls */
.header .text-icon-btn{width:96px;min-width:96px;padding:0 10px}
.product-go .ico{width:21px;height:21px;transform:none}
.info-page-body{padding:22px 4px 32px;min-height:180px}
.info-text{font-size:.9375rem;line-height:1.7;color:var(--text);white-space:normal;overflow-wrap:anywhere}
.info-empty{font-size:.875rem;color:var(--muted)}
.info-link-list{display:grid;gap:10px;margin-top:20px}
.product-card.single-plan .product-action{align-items:center;min-height:58px}
.product-card.single-plan .shop-price,.product-card.single-plan .product-action .btn{align-self:center}
@media(max-width:380px){.header .text-icon-btn{width:92px;min-width:92px}.info-page-body{padding:18px 2px 28px}}

/* Phase 3 Step 4 UI v4 — navigation back restored + shop Info badge styling */
.product-go{
  background:color-mix(in srgb,var(--tools) 14%,var(--surface));
  border-color:color-mix(in srgb,var(--tools) 38%,transparent);
  color:var(--tools);
}
.product-go:hover{
  color:var(--tools);
  border-color:color-mix(in srgb,var(--tools) 55%,transparent);
  background:color-mix(in srgb,var(--tools) 20%,var(--surface));
}
html[data-theme="dark"] .product-go{
  background:color-mix(in srgb,var(--tools) 14%,var(--surface));
  border-color:color-mix(in srgb,var(--tools) 38%,transparent);
  color:var(--tools);
}

/* v6 — Shop price/action vertical alignment */
.product-action{align-items:center}
.product-action .shop-price{align-self:center;justify-content:center}
.product-action .btn{align-self:center}
.product-card.single-plan .product-action{align-items:center}
.product-card.single-plan .shop-price{align-self:center;justify-content:center}
@media(max-width:380px){
  .product-action{align-items:center}
  .product-action .shop-price,.product-action .btn{align-self:center}
}

/* v9 — Shop info tint + optional manual transaction verification */
.product-go{
  background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line));
  color:var(--primary);
}
.product-go:hover{
  background:color-mix(in srgb,var(--primary) 16%,var(--surface));
  border-color:color-mix(in srgb,var(--primary) 40%,var(--line));
  color:var(--primary);
}
html[data-theme="dark"] .product-go{
  background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line));
  color:var(--primary);
}
.verification-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.transaction-entry{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:14px;min-width:0}
.transaction-entry label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.875rem;font-weight:600;color:var(--text);margin-bottom:10px}
.transaction-entry label span{font-size:.6875rem;font-weight:500;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 7px}
.transaction-entry .input{height:48px;border-radius:13px;font-size:.875rem;text-transform:uppercase}
.transaction-entry p{margin:8px 2px 0;color:var(--muted);font-size:.75rem;line-height:1.45}
.verification-upload{min-width:0;display:flex}
.verification-upload>.upload-box,.verification-upload>.receipt-ready{width:100%;height:100%;min-height:132px}
.verification-upload>.receipt-ready{align-self:stretch}
@media(max-width:520px){.verification-row{grid-template-columns:1fr}.verification-upload>.upload-box,.verification-upload>.receipt-ready{min-height:auto}}


/* v12 — shop Info matches channel icon + pending actions */
.product-go{
  background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  color:var(--primary);
  border-color:transparent;
}
.product-go:hover{
  background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  color:var(--primary);
  border-color:transparent;
}
html[data-theme="dark"] .product-go{
  background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  color:var(--primary);
  border-color:transparent;
}
.menu-item.danger{color:var(--danger)}
.pending-fast-verify{margin-top:16px;padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.pending-fast-verify .section-title{margin-bottom:8px}
.pending-fast-verify .hint{margin:7px 0 12px}
.pending-fast-actions{display:flex;gap:10px;align-items:center}
.pending-fast-actions .input{min-width:0;flex:1}
.pending-fast-actions .btn{flex:0 0 auto;min-width:92px}
@media(max-width:380px){.pending-fast-actions{display:grid;grid-template-columns:1fr}.pending-fast-actions .btn{width:100%}}


/* v15 — final Mini App refinements */
.product-go{
  background:var(--surface);
  color:var(--primary);
  border:1px solid var(--line);
}
.product-go:hover{
  background:var(--surface-2);
  color:var(--primary);
  border-color:var(--line);
}
html[data-theme="dark"] .product-go{
  background:var(--surface);
  color:var(--primary);
  border-color:var(--line);
}

.product-card{--soft-product-border:color-mix(in srgb,var(--product-accent) 10%,transparent)}

.product-card .tag.new,
.product-card .tag.device{border:1px solid var(--soft-product-border)}
.product-card .product-action .btn.product-accent-btn{
  border:1px solid var(--soft-product-border);
}

.account-card .account-row .v{font-variant-numeric:tabular-nums}
.pending-support-btn{margin-top:10px}
.pending-fast-actions .btn:disabled{
  opacity:1;
  color:var(--muted);
  background:var(--surface-2);
  border:1px solid var(--line);
}


/* v19 — logo border restored; Buy Now / Choose border added */
.product-card .product-action .btn{
  border:1px solid var(--soft-product-border);
}


/* v23 — payment status palette matched to supplied reference */
:root{
  --status-success:#138a68;
  --status-success-soft:#e8f8f2;
  --status-success-border:#69c9aa;
  --status-pending:#a96800;
  --status-pending-soft:#fff5df;
  --status-pending-border:#e7b35d;
  --status-danger:#c84b59;
  --status-danger-soft:#fff0f2;
  --status-danger-border:#e88993;
}
html[data-theme="dark"]{
  --status-success:#58efbe;
  --status-success-soft:color-mix(in srgb,#58efbe 12%,var(--surface));
  --status-success-border:color-mix(in srgb,#58efbe 62%,transparent);
  --status-pending:#ffc55f;
  --status-pending-soft:color-mix(in srgb,#ffc55f 12%,var(--surface));
  --status-pending-border:color-mix(in srgb,#ffc55f 58%,transparent);
  --status-danger:#ff6d7d;
  --status-danger-soft:color-mix(in srgb,#ff6d7d 12%,var(--surface));
  --status-danger-border:color-mix(in srgb,#ff6d7d 58%,transparent);
}
.status-pill.completed,.status-panel.completed{
  background:var(--status-success-soft)!important;
  color:var(--status-success)!important;
  border:1px solid var(--status-success-border)!important;
}
.status-pill.pending,.status-panel.pending{
  background:var(--status-pending-soft)!important;
  color:var(--status-pending)!important;
  border:1px solid var(--status-pending-border)!important;
}
.status-pill.declined,.status-panel.declined{
  background:var(--status-danger-soft)!important;
  color:var(--status-danger)!important;
  border:1px solid var(--status-danger-border)!important;
}
html[data-theme="dark"] .status-panel.completed{box-shadow:inset 0 0 28px color-mix(in srgb,#58efbe 5%,transparent)}
html[data-theme="dark"] .status-panel.pending{box-shadow:inset 0 0 28px color-mix(in srgb,#ffc55f 5%,transparent)}
html[data-theme="dark"] .status-panel.declined{box-shadow:inset 0 0 28px color-mix(in srgb,#ff6d7d 5%,transparent)}


/* v29 receipt preview + simple bank tabs */

.receipt-ready{align-items:center}
.receipt-thumb-wrap{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:70px;height:82px;padding:3px;border-radius:13px;background:color-mix(in srgb,var(--surface) 70%, #ffffff 30%);border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 70%,transparent) inset}
.receipt-thumb{width:100%;height:100%;border-radius:10px;object-fit:cover;background:#fff;border:1px solid color-mix(in srgb,var(--line) 72%, transparent)}
.receipt-thumb.placeholder{display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted)}
.receipt-thumb.placeholder .ico{width:22px;height:22px}
.preview-broken .receipt-info strong{color:var(--warning,#f59e0b)}