:root{--ink:#202044;--muted:#74748e;--line:#e9e8f3;--paper:#fff;--bg:#f5f6fc;--purple:#673bd0;--purple2:#4326a2;--blue:#2876dc;--cyan:#21b9d4;--soft:#f0edff;--green:#168b68;--shadow:0 16px 46px rgba(43,35,112,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,rgba(115,80,218,.10),transparent 32rem),var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1240px)/2));background:rgba(255,255,255,.92);border-bottom:1px solid rgba(220,218,238,.8);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand-icon{height:48px;width:48px;object-fit:cover;border-radius:14px;box-shadow:0 4px 14px #32218c26}.brand-copy{display:grid;gap:2px}.brand-copy strong{font-size:18px;letter-spacing:-.4px}.brand-copy span{font-size:11px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:16px}.preview-state{font-size:11px;color:#686783;background:#f5f3ff;padding:9px 12px;border-radius:30px;display:flex;align-items:center;gap:8px}.state-dot{width:7px;height:7px;border-radius:20px;background:#d39c29;display:inline-block;flex-shrink:0}.state-dot.muted{background:#aaaabd}.account-button{border:1px solid var(--line);background:white;color:#9a98ac;border-radius:12px;padding:10px 13px;font-size:12px}.main-wrap{max-width:1240px;margin:auto;padding:34px 28px 22px}.welcome-row{display:flex;justify-content:space-between;align-items:center;min-height:190px;position:relative;overflow:hidden;padding:8px 22px 26px}.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:800;color:var(--purple);margin:0 0 9px}.welcome-row h1{font-size:clamp(28px,4vw,43px);line-height:1.1;letter-spacing:-1.8px;margin:0;color:#24204d}.welcome-row h1 span{background:linear-gradient(100deg,#5132bb,#218acb);background-clip:text;color:transparent}.welcome-desc{font-size:13px;line-height:1.7;color:var(--muted);max-width:620px;margin:14px 0 0}.welcome-mark{width:170px;height:150px;position:relative;display:grid;place-items:center;margin-right:50px}.welcome-mark img{width:112px;height:112px;object-fit:cover;position:relative;z-index:2;border-radius:28px;box-shadow:0 18px 36px #34218d33}.mark-orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:145px;height:145px;background:linear-gradient(135deg,#26b8d7aa,#6237d0aa);right:8px;top:0}.orb-two{width:65px;height:65px;background:#efb4ff88;left:0;bottom:8px}.service-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 18px}.nav-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px 17px;display:flex;align-items:center;gap:12px;text-align:left;box-shadow:0 5px 18px #31217407;transition:.18s}.nav-card:hover{transform:translateY(-2px);border-color:#c6b9ef}.nav-card.is-active{border-color:#a995e8;background:linear-gradient(120deg,#f4f0ff,#fff);box-shadow:0 7px 22px #593cc013}.nav-icon{height:42px;width:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(140deg,#f0ecff,#e9f8ff);color:var(--purple);font-size:21px;flex-shrink:0}.nav-card strong,.nav-card small{display:block}.nav-card strong{font-size:13px}.nav-card small{font-size:10px;color:var(--muted);margin-top:4px}.cart-nav .nav-icon{background:#e9f8fb}.preview-notice{font-size:11px;line-height:1.6;padding:11px 14px;border:1px solid #e9dba9;background:#fffbed;color:#78612d;border-radius:12px;margin-bottom:22px}.preview-notice strong{color:#6c4f14}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px;align-items:start}.view-panel{display:none}.view-panel.is-visible{display:block;animation:fade .2s ease}@keyframes fade{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:2px 4px 15px}.section-heading h2{font-size:25px;letter-spacing:-.8px;margin:0 0 5px}.section-heading p:not(.eyebrow){font-size:11px;color:var(--muted);margin:0;line-height:1.5}.section-symbol{height:48px;width:48px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#eeeaff,#e5f9fc);color:#5836bd;font-size:24px}.panel-card{background:white;border:1px solid var(--line);border-radius:18px;padding:21px;box-shadow:var(--shadow);margin-bottom:16px}.upload-zone{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;min-height:155px;border:1.5px dashed #b9addf;background:linear-gradient(120deg,#faf8ff,#f5fbff);border-radius:15px;padding:18px;cursor:pointer;transition:.15s}.upload-zone:hover{border-color:var(--purple);background:#f8f5ff}.upload-zone.is-dragging{border-color:var(--purple);border-style:solid;background:linear-gradient(120deg,#f0eaff,#e8f8ff);box-shadow:0 0 0 4px #7655d91a;transform:scale(1.003)}.upload-zone:focus-visible{outline:3px solid #7655d966;outline-offset:3px}.upload-zone.compact{min-height:120px}.upload-zone input{display:none}.upload-symbol{display:grid;place-items:center;width:35px;height:35px;border-radius:12px;background:#ebe5ff;color:var(--purple);font-size:22px;font-weight:700;margin-bottom:8px}.upload-zone strong{font-size:13px}.upload-zone span:not(.upload-symbol){font-size:11px;color:var(--muted);margin-top:5px}.upload-zone small{font-size:10px;color:#9997ab;margin-top:7px}.selected-file{font-size:11px;padding:10px 12px;background:#f7f7fb;border:1px solid #efedf6;border-radius:10px;margin:11px 0 17px;color:#4f4b70}.empty-file{color:#9a98aa}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}.field label{font-size:11px;font-weight:700;color:#44415f}.field label em{font-size:9px;font-style:normal;color:#b45a2e;font-weight:700;margin-left:4px}.field input,.field select,.field textarea{width:100%;border:1px solid #e2e0ed;border-radius:10px;padding:10px 11px;background:#fff;color:var(--ink);font-size:12px;outline:none;min-height:39px}.field input:focus,.field select:focus,.field textarea:focus{border-color:#9279dc;box-shadow:0 0 0 3px #7655d91a}.field small{font-size:9px;line-height:1.5;color:#9290a4}.option-block{border-top:1px solid #f0eef6;margin-top:3px;padding:15px 0}.option-block h3{font-size:12px;margin:0 0 12px}.check-row{display:flex;gap:16px;flex-wrap:wrap}.check-row label{display:flex;align-items:center;gap:7px;font-size:11px;color:#5e5b78}.check-row input{accent-color:var(--purple)}.check-row b{color:var(--green);font-size:9px}.analysis-line{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:7px;margin:8px 0 12px}.estimate-row{border-top:1px solid #f0eef6;margin-top:14px;padding-top:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}.estimate-row small{font-size:9px;color:var(--muted);display:block;margin-bottom:5px}.estimate-row strong{font-size:18px;letter-spacing:-.4px}.primary-button,.secondary-button{border:0;border-radius:11px;padding:12px 16px;font-size:11px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s}.primary-button{color:white;background:linear-gradient(105deg,#643bd0,#327ed5);box-shadow:0 7px 15px #5333bd26}.primary-button:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}.primary-button:disabled{background:#c9c6d8;box-shadow:none;cursor:not-allowed}.secondary-button{color:#5136a7;background:#f0edff;border:1px solid #e5defc}.full-width{width:100%}.mode-switch{display:flex;gap:6px;background:#eeedf6;padding:5px;border-radius:12px;margin-bottom:14px}.mode-button{flex:1;border:0;background:transparent;color:#77748d;border-radius:9px;padding:10px;font-size:11px;font-weight:700}.mode-button.is-active{background:white;color:#4b2fa9;box-shadow:0 2px 8px #24105f12}.package-info{display:flex;justify-content:space-between;gap:12px;padding:2px 0 14px}.package-info h3{font-size:17px;margin:0 0 5px}.package-info p:not(.eyebrow){font-size:10px;color:var(--muted);margin:0;line-height:1.5}.package-price{font-size:16px;font-weight:850;color:var(--purple);background:#f2edff;padding:10px;border-radius:12px;height:max-content;white-space:nowrap}.package-members{margin:12px 0}.package-member{display:grid;grid-template-columns:44px minmax(0,1fr) 80px;gap:10px;align-items:center;border:1px solid #efedf6;border-radius:11px;padding:8px;margin-bottom:7px}.member-thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#f0eff7}.member-name{font-size:10px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-qty{font-size:9px;color:var(--muted)}.package-member input{width:100%;border:1px solid #e5e2ee;border-radius:8px;padding:7px;font-size:11px}.package-summary{display:flex;justify-content:space-between;font-size:10px;background:#f7f6fb;border-radius:10px;padding:10px 12px}.package-summary strong{color:#a05b2f}.catalog-placeholder{text-align:center;padding:45px 24px}.catalog-icon{height:58px;width:58px;border-radius:18px;margin:0 auto 14px;background:#f0edff;color:var(--purple);display:grid;place-items:center;font-size:29px}.catalog-placeholder h3{font-size:16px;margin:0 0 9px}.catalog-placeholder p{font-size:11px;color:var(--muted);line-height:1.6;max-width:470px;margin:0 auto 12px}.collection-tags{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:12px 0}.collection-tags code,.payment-note code{font-size:10px;border:1px solid #ded9f2;background:#f6f3ff;color:#5836b9;padding:5px 7px;border-radius:6px}.catalog-placeholder .muted-text{font-size:10px;color:#a09eae}.catalog-placeholder .secondary-button{margin-top:5px}.cart-empty{text-align:center;padding:27px 10px 32px}.cart-empty>span{font-size:30px}.cart-empty h3{font-size:15px;margin:8px 0 5px}.cart-empty p{font-size:10px;color:var(--muted);margin:0}.cart-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-bottom:1px solid #f0eef6;align-items:start}.cart-item:last-child{border-bottom:0}.cart-item-icon{height:39px;width:39px;border-radius:12px;background:#f0edff;color:var(--purple);display:grid;place-items:center;font-size:18px}.cart-item h4{font-size:11px;margin:2px 0 4px}.cart-item p{font-size:9px;line-height:1.5;color:var(--muted);margin:0}.cart-item-price{font-size:11px;font-weight:800;white-space:nowrap}.cart-total-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #f0eef6;font-size:11px;color:#77748d}.cart-total-row strong{color:var(--ink)}.total-highlight{font-weight:750;color:#4d4880}.total-highlight strong{font-size:16px;color:var(--purple)}.checkout-card{margin-top:16px}.checkout-title{display:flex;gap:10px;align-items:center;margin-bottom:13px}.checkout-title h3{font-size:13px;margin:0 0 3px}.checkout-title p{font-size:10px;color:var(--muted);margin:0}.step-number{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#eee9ff;color:var(--purple);font-weight:800;font-size:11px}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.choice-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;border:1px solid #e6e4ef;border-radius:12px;padding:12px;cursor:pointer;position:relative}.choice-card.is-selected{border-color:#957cdf;background:#f7f4ff;box-shadow:inset 0 0 0 1px #957cdf22}.choice-card input{position:absolute;right:11px;top:12px;accent-color:var(--purple)}.choice-icon{font-size:18px;color:var(--purple)}.choice-card strong{font-size:11px}.choice-card small{font-size:9px;color:var(--muted);line-height:1.45}.payment-step{margin-top:22px}.payment-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-choices .choice-card{padding:10px}.payment-choices .choice-card strong{font-size:10px}.payment-note{font-size:10px;line-height:1.6;color:#65558e;background:#f8f6ff;border-radius:9px;padding:10px;margin:11px 0}.courier-fields{margin-top:13px;padding:13px;background:#fbfaff;border:1px solid #eeeaf9;border-radius:12px}.map-placeholder{border:1px dashed #beb4e3;border-radius:9px;background:#f6f3ff;padding:13px;font-size:10px;color:#7a6b9e}.payable-row{font-weight:800;border-top:1px solid #e3def2}.payable-row strong{font-size:18px;color:var(--purple)}.security-copy{font-size:9px;line-height:1.6;color:#9492a4;margin:9px 0 0;text-align:center}.side-column{display:flex;flex-direction:column;gap:14px;position:sticky;top:95px}.side-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:17px;box-shadow:0 10px 30px #2f267409}.side-card-heading{display:flex;gap:10px;align-items:center}.side-icon{width:34px;height:34px;border-radius:11px;background:#f0edff;display:grid;place-items:center;color:var(--purple)}.side-card-heading strong,.side-card-heading small{display:block}.side-card-heading strong{font-size:12px}.side-card-heading small{font-size:9px;color:var(--muted);margin-top:3px}.summary-number{font-size:29px;font-weight:850;letter-spacing:-1px;margin:21px 0 12px;color:#32266f}.summary-number small{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}.side-separator{height:1px;background:#efedf5;margin-bottom:8px}.side-line{display:flex;justify-content:space-between;padding:7px 0;font-size:10px;color:var(--muted)}.side-line strong{color:var(--ink)}.side-line.final{border-top:1px solid #efedf5;margin:5px 0 13px;padding-top:12px;font-weight:750}.side-line.final strong{color:var(--purple);font-size:14px}.help-card{background:linear-gradient(145deg,#34228b,#5140b8);color:white}.help-icon{height:27px;width:27px;display:grid;place-items:center;border:1px solid #ffffff77;border-radius:9px;margin-bottom:10px;font-weight:800}.help-card strong{font-size:12px}.help-card p{font-size:10px;line-height:1.6;color:#d8d3f5}.help-card a{color:white;font-size:10px;font-weight:750;text-decoration:none}.system-card strong{font-size:11px;display:block;margin-bottom:12px}.system-card>div{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:9px;color:var(--muted)}.status-pill{font-size:8px;font-weight:800;border-radius:6px;padding:5px 6px;white-space:nowrap}.status-pill.pending{background:#f5f0de;color:#8a702b}.app-footer{display:flex;justify-content:space-between;color:#9997a9;font-size:9px;padding:25px 4px 5px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#29234c;color:white;border-radius:10px;padding:11px 15px;font-size:11px;box-shadow:0 8px 30px #15102d33;transition:.2s;z-index:50;max-width:calc(100vw - 30px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}
@media(max-width:900px){.content-grid{grid-template-columns:minmax(0,1fr) 245px;gap:14px}.main-wrap{padding-left:18px;padding-right:18px}.topbar{padding:0 18px}.welcome-mark{margin-right:15px}.nav-card{padding:12px}.nav-icon{width:36px;height:36px}.payment-choices{grid-template-columns:1fr}}
@media(max-width:680px){.topbar{height:64px}.brand-icon{width:40px;height:40px}.brand-copy strong{font-size:15px}.brand-copy span{font-size:9px}.preview-state{display:none}.account-button{font-size:10px;padding:9px}.main-wrap{padding:22px 13px}.welcome-row{min-height:145px;padding:0 4px 18px}.welcome-row h1{font-size:29px}.welcome-desc{font-size:11px;max-width:75%}.welcome-mark{width:90px;height:95px;margin:0}.welcome-mark img{width:65px;height:65px;border-radius:17px}.orb-one{width:88px;height:88px}.orb-two{width:40px;height:40px}.service-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.nav-card{padding:9px 4px;flex-direction:column;text-align:center;gap:5px;border-radius:12px}.nav-icon{width:32px;height:32px;font-size:17px}.nav-card strong{font-size:9px}.nav-card small{font-size:8px;margin-top:2px}.preview-notice{font-size:9px;padding:9px 10px}.content-grid{display:flex;flex-direction:column}.primary-content,.side-column{width:100%}.side-column{position:static;display:grid;grid-template-columns:1fr 1fr}.summary-card{grid-column:1/-1}.system-card{grid-column:1/-1}.side-card{padding:13px}.section-heading h2{font-size:22px}.section-heading p:not(.eyebrow){font-size:10px;max-width:290px}.section-symbol{width:40px;height:40px}.panel-card{padding:14px;border-radius:15px}.form-grid{gap:10px}.field input,.field select,.field textarea{font-size:11px;padding:9px}.check-row{gap:10px}.check-row label{font-size:10px}.estimate-row{align-items:flex-start;flex-direction:column}.estimate-row .primary-button{width:100%}.choice-grid{gap:7px}.choice-card{padding:10px}.payment-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.payment-choices .choice-card{padding:8px 6px}.payment-choices .choice-card small{font-size:8px}.app-footer{font-size:8px;gap:8px;flex-direction:column}.side-column{gap:9px}}


/* Firebase Stage 2 — read-only customer catalog */
.account-button{color:#4b329e;background:#f8f6ff;border-color:#ddd5f7;font-weight:750}
.account-button:hover{background:#f0ebff}
.preview-state.is-connected{color:#126b54;background:#eaf8f2}
.preview-state.is-error{color:#8b3c42;background:#fff0f0}
.catalog-panel{text-align:left;padding:20px}
.catalog-controls{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.8fr);gap:12px;margin-bottom:12px}
.catalog-feedback{font-size:11px;line-height:1.55;color:var(--muted);padding:10px 12px;border:1px solid #ebe8f5;background:#faf9ff;border-radius:10px;margin-bottom:14px}
.catalog-feedback.is-error{color:#9b3e48;background:#fff5f5;border-color:#f4d9dc}
.catalog-feedback.is-success{color:#176e55;background:#effaf5;border-color:#d5f0e3}
.atk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.atk-card{min-width:0;border:1px solid #ece9f5;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.atk-card-image{height:132px;background:#f6f4fb;display:grid;place-items:center;overflow:hidden;color:#8c83ad;font-size:28px}
.atk-card-image img{width:100%;height:100%;object-fit:contain}
.atk-card-body{padding:11px;display:flex;flex-direction:column;gap:6px;flex:1}
.atk-card h3{font-size:12px;line-height:1.4;margin:0;color:var(--ink)}
.atk-card-meta{font-size:9px;color:var(--muted);line-height:1.4}
.atk-card-description{font-size:9px;color:#737189;line-height:1.45;min-height:26px}
.atk-card-price{font-size:14px;font-weight:850;color:var(--purple);margin-top:auto}
.atk-card-actions{display:grid;grid-template-columns:68px minmax(0,1fr);gap:7px;margin-top:5px}
.atk-card-actions input{min-width:0;width:100%;border:1px solid #e5e2ee;border-radius:8px;padding:8px 6px;font-size:10px}
.atk-card-actions button{padding:8px 7px;font-size:9px}
.atk-empty{grid-column:1/-1;text-align:center;border:1px dashed #dcd7ed;border-radius:12px;padding:25px 12px;color:var(--muted);font-size:11px}
.catalog-footnote{font-size:9px;color:#9996a8;margin:14px 0 0;text-align:left}
.status-pill.ok{background:#e8f7f0;color:#177251}
.status-pill.error{background:#fff0f0;color:#9c4148}
@media(max-width:900px){.atk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.catalog-controls{grid-template-columns:1fr}.atk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.atk-card-image{height:105px}.atk-card-body{padding:9px}.atk-card h3{font-size:10px}.atk-card-price{font-size:12px}.atk-card-actions{grid-template-columns:52px minmax(0,1fr);gap:5px}.atk-card-actions button{font-size:8px;padding:7px 4px}}


/* Mandatory Google sign-in gate — BG Papinka Web V5.2 DEV */
.login-gate{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:42px 20px 60px;background:radial-gradient(ellipse at 50% 8%,rgba(106,75,213,.13),transparent 33rem)}
.login-gate-card{width:min(100%,520px);background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:25px;padding:36px 38px 30px;text-align:center;box-shadow:0 22px 70px rgba(43,35,112,.11)}
.login-gate-brand{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:28px}
.login-gate-brand img{width:54px;height:54px;object-fit:cover;border-radius:16px;box-shadow:0 7px 19px #32218c20}
.login-gate-brand span{font-size:9px;letter-spacing:1.5px;font-weight:850;color:var(--purple)}
.login-gate-card .eyebrow{margin-bottom:12px}
.login-gate-card h1{font-size:clamp(27px,5vw,36px);line-height:1.12;letter-spacing:-1.2px;margin:0;color:#24204d}
.login-gate-copy{font-size:13px;line-height:1.75;color:var(--muted);max-width:410px;margin:15px auto 23px}
.login-gate-button{min-height:48px;min-width:240px;font-size:13px}
.login-gate-button:disabled,.account-button:disabled{opacity:.65;cursor:wait}
.google-g{font-family:Arial,sans-serif;font-size:17px;font-weight:850;color:#fff;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:none}
.login-gate-message{font-size:11px;line-height:1.5;color:#716e89;margin:16px 0 0;min-height:17px}
.login-gate-message.is-error{color:#a13f4a}
.login-gate-footnote{border-top:1px solid #f0eef6;padding-top:17px;margin-top:21px;color:#9996aa;font-size:10px;line-height:1.6}
@media(max-width:680px){.login-gate{min-height:calc(100vh - 64px);padding:25px 14px 38px}.login-gate-card{padding:29px 21px 24px;border-radius:20px}.login-gate-brand{margin-bottom:24px}.login-gate-copy{font-size:12px}.login-gate-button{width:100%;min-width:0}}

/* BG Papinka Web V5.2 — Courier map / Google Routes */
.map-instruction{font-size:10px;line-height:1.55;color:var(--muted);margin:0 0 8px}
.delivery-map{width:100%;height:330px;min-height:260px;border:1px solid #e4e0f1;border-radius:12px;background:#ebeaf2;overflow:hidden}
.map-control-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;flex-wrap:wrap}
.map-selection-status{font-size:10px;color:var(--muted);line-height:1.5;flex:1;min-width:180px}
.map-location-button{font-size:10px;padding:9px 12px}
.route-map-status{font-size:10px;line-height:1.55;padding:9px 11px;margin-top:9px;border-radius:9px;background:#f7f5ff;color:#6b5d91;border:1px solid #e9e4f7}
.route-map-status.is-error{background:#fff4f2;color:#a54c40;border-color:#f1d5d0}
.route-map-status.is-success{background:#eefaf5;color:#23785d;border-color:#d5eee3}
.route-action-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.route-small-note{font-size:9px;color:var(--muted)}
.route-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;margin-top:11px;border:1px solid #e6e0f4;border-radius:11px;background:#fff}
.route-result>div{display:flex;flex-direction:column;gap:4px;font-size:9px;color:var(--muted)}
.route-result strong{font-size:12px;color:var(--ink)}
.route-result .route-result-total{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;padding-top:10px;margin-top:2px;border-top:1px solid #eeeaf6}
.route-result .route-result-total strong{font-size:17px;color:var(--purple)}
@media(max-width:680px){.delivery-map{height:290px;min-height:240px}.route-action-row{align-items:stretch;flex-direction:column}.route-action-row .primary-button{width:100%}.route-small-note{line-height:1.5}.route-result{grid-template-columns:1fr 1fr}.map-control-row{align-items:flex-start;flex-direction:column}.map-location-button{width:100%}}

/* Web Stage4 — Android V5.2 print summary and payment-channel parity */
.doc-calculation-card{border:1px solid #ebe4fb;border-radius:15px;background:#fbf8ff;padding:16px 17px;margin-top:14px;color:var(--ink)}
.doc-calculation-card h3{font-size:13px;margin:0 0 7px;font-weight:800;text-align:center}
.doc-calculation-title{display:block;text-align:center;color:#4b239e;font-size:16px;font-weight:900;letter-spacing:.35px;margin:3px 0 13px}
.doc-calculation-body{display:flex;flex-direction:column;gap:8px;font-size:11px;line-height:1.5;color:#4e4568}
.doc-summary-line{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid #eee8f7;padding-bottom:6px}
.doc-summary-line strong{color:#2b2450;text-align:right}
.doc-calculation-total{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ded3f3;padding-top:11px;margin-top:12px;font-size:11px;font-weight:850;color:#4c249b}
.doc-calculation-total strong{font-size:19px;color:#6825ad}
.doc-wait-state{text-align:center;padding:10px 5px 7px;display:flex;align-items:center;flex-direction:column;gap:9px}
.doc-wait-state strong{font-size:12px;color:#4c249b}
.doc-wait-state p{margin:0;max-width:460px;color:#716887;font-size:10px;line-height:1.65}
.doc-spinner{display:inline-block;width:18px;height:18px;border:2px solid #d9c8f5;border-top-color:#7624b5;border-radius:50%;animation:bgp-spin .8s linear infinite;vertical-align:middle}
@keyframes bgp-spin{to{transform:rotate(360deg)}}
.doc-analysis-error{padding:10px 12px;border-radius:10px;background:#fff1f1;border:1px solid #f0d1d4;color:#9a3943;font-size:11px;line-height:1.55}
.analysis-line .state-dot.error{background:#c0393b}
.catalog-controls{grid-template-columns:minmax(0,1.3fr) minmax(160px,.7fr) minmax(165px,.7fr)}
.payment-family-stack{display:flex;flex-direction:column;gap:9px}
.payment-family-option{display:flex;flex-direction:column;gap:7px}
.payment-channel-list{margin:0 0 5px 14px;padding:11px 13px;border:1px solid #ebe6f5;border-radius:12px;background:#fbfaff;display:flex;flex-direction:column;gap:8px}
.payment-list-title{font-size:10px;font-weight:850;color:#403278;margin:0 0 2px}
.payment-list-message{font-size:10px;line-height:1.5;color:var(--muted);padding:8px 2px}
.payment-list-message.is-error{color:#9b3e48}
.payment-channel-option{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border:1px solid transparent;border-radius:10px;cursor:pointer;background:#fff}
.payment-channel-option.is-selected{background:#eef5ff;border-color:#d4e4ff}
.payment-channel-option.is-unavailable{opacity:.62;cursor:not-allowed}
.payment-channel-option input{position:absolute;opacity:0;pointer-events:none}
.payment-channel-logo{width:29px;height:29px;display:grid;place-items:center;flex:0 0 29px;border-radius:8px;background:#f2eff9;color:#5b3c9d;font-size:15px;overflow:hidden}
.payment-channel-logo img{width:100%;height:100%;object-fit:contain}
.payment-channel-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.payment-channel-copy strong{font-size:10px;color:#282341}
.payment-channel-copy small{font-size:9px;color:#77718c}
.payment-channel-radio{width:17px;height:17px;border:1.7px solid #a7a1b8;border-radius:50%;flex:0 0 17px;position:relative}
.payment-channel-option.is-selected .payment-channel-radio{border-color:#6b22b1}
.payment-channel-option.is-selected .payment-channel-radio:after{content:"";position:absolute;inset:3px;background:#6b22b1;border-radius:50%}
.payment-family-option .choice-card{margin:0}
@media(max-width:900px){.catalog-controls{grid-template-columns:1fr 1fr}.catalog-controls .field:first-child{grid-column:1/-1}}
@media(max-width:680px){.catalog-controls{grid-template-columns:1fr}.catalog-controls .field:first-child{grid-column:auto}.doc-calculation-card{padding:13px}.doc-calculation-title{font-size:14px}.doc-calculation-total strong{font-size:17px}.payment-channel-list{margin-left:8px;padding:9px}.payment-channel-option{min-height:45px;padding:7px 8px}}


/* BG Papinka Web DEV — multi-photo single queue and package thumbnails */
.photo-single-list{display:flex;flex-direction:column;gap:11px;margin:12px 0}
.photo-single-card{border:1px solid #e9e5f2;border-radius:13px;background:#fff;padding:12px;box-shadow:0 4px 14px rgba(43,35,112,.035)}
.photo-single-card-head{display:grid;grid-template-columns:64px minmax(0,1fr) 30px;align-items:center;gap:11px}
.photo-single-preview{width:64px;height:64px;overflow:hidden;border-radius:10px;background:#f1eff8;display:grid;place-items:center}
.photo-preview-image{width:100%;height:100%;object-fit:cover;display:block}
.photo-preview-fallback,.member-thumb-fallback{display:grid;place-items:center;color:var(--purple);font-size:22px}
.photo-single-file-copy{min-width:0;display:flex;flex-direction:column;gap:5px}
.photo-single-file-copy strong{font-size:11px;overflow-wrap:anywhere;color:var(--ink)}
.photo-single-file-copy small{font-size:9px;color:var(--muted);line-height:1.4}
.photo-remove-button{width:28px;height:28px;border:1px solid #f0dfe3;border-radius:8px;background:#fff7f8;color:#a44757;font-size:19px;line-height:1;display:grid;place-items:center;padding:0}
.photo-remove-button:hover{background:#ffedef;border-color:#e9c9d0}
.photo-single-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;margin-top:12px}
.photo-single-options .field{margin:0;min-width:0}
.photo-single-options .field label{font-size:10px}
.photo-single-options .field select,.photo-single-options .field input{min-height:36px;padding:8px 9px;font-size:11px}
.photo-single-line-total{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #f0eef6;margin-top:10px;padding-top:9px;font-size:10px;color:var(--muted)}
.photo-single-line-total strong{font-size:12px;color:var(--purple)}
.photo-single-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #f0eef6;padding-top:13px;margin-top:12px}
.photo-single-actions small{display:block;font-size:9px;color:var(--muted);margin-bottom:4px}
.photo-single-actions strong{font-size:17px;color:var(--purple)}
.package-member{grid-template-columns:48px minmax(0,1fr) 72px 28px}
.package-member-copy{min-width:0}
.package-member .member-thumb{width:48px;height:48px;display:block;object-fit:cover;border-radius:8px;background:#f0eff7}
.package-remove-button{width:26px;height:26px}
@media(max-width:680px){
  .photo-single-card{padding:10px}
  .photo-single-options{gap:8px}
  .photo-single-options .field label{font-size:9px}
  .photo-single-actions{align-items:stretch;flex-direction:column}
  .photo-single-actions .primary-button{width:100%}
  .package-member{grid-template-columns:42px minmax(0,1fr) 58px 26px;gap:7px;padding:7px}
  .package-member .member-thumb{width:42px;height:42px}
}

/* Web DEV — serial multi-document upload queue, one Worker task at a time */
.document-queue-panel .upload-zone{margin-bottom:14px}
.doc-queue-toolbar{display:flex;flex-direction:column;gap:5px;padding:10px 2px 4px}
.doc-queue-toolbar strong{font-size:12px;color:var(--ink)}
.doc-queue-toolbar span{font-size:10px;line-height:1.5;color:var(--muted)}
.doc-queue-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.doc-queue-empty{display:flex;align-items:center;flex-direction:column;gap:6px;padding:24px 12px;border:1px dashed #d8d2e8;border-radius:13px;background:#fcfbff;text-align:center}
.doc-queue-empty>span{font-size:25px;color:var(--purple)}
.doc-queue-empty strong{font-size:11px;color:var(--ink)}
.doc-queue-empty small{font-size:9px;line-height:1.5;color:var(--muted)}
.doc-queue-card{border:1px solid #e7e3f0;border-radius:14px;background:#fff;padding:13px;box-shadow:0 4px 14px rgba(43,35,112,.035)}
.doc-queue-card.is-added{background:#fbfffd;border-color:#d6eee4}
.doc-queue-card-head{display:grid;grid-template-columns:36px minmax(0,1fr) auto 27px;align-items:center;gap:9px}
.doc-queue-file-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f0edff;color:var(--purple);font-size:18px}
.doc-queue-file-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.doc-queue-file-copy strong{font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.doc-queue-file-copy small{font-size:9px;color:var(--muted)}
.doc-queue-status{font-size:8px;font-weight:800;white-space:nowrap;padding:6px 7px;border-radius:7px;background:#f1eff7;color:#68627b}
.doc-queue-status.queued,.doc-queue-status.processing{background:#fff6df;color:#8d6b1d}
.doc-queue-status.ready{background:#eaf8f1;color:#14734e}
.doc-queue-status.error{background:#fff0f0;color:#a03d48}
.doc-queue-status.needs-pages{background:#fff3e8;color:#995b24}
.doc-queue-status.added{background:#eaf8f1;color:#14734e}
.doc-queue-remove{width:27px;height:27px;border:1px solid #f0dfe3;border-radius:8px;background:#fff7f8;color:#a44757;font-size:18px;line-height:1;display:grid;place-items:center;padding:0}
.doc-queue-message{margin:10px 0;padding:8px 10px;border-radius:8px;background:#f8f6fd;color:#756c8d;font-size:9px;line-height:1.55;overflow-wrap:anywhere}
.doc-queue-message.is-error{background:#fff1f1;color:#963d48}
.doc-queue-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:11px}
.doc-queue-options .field{margin:0;min-width:0}
.doc-queue-options .field>span,.doc-queue-note>span{display:block;font-size:9px;font-weight:750;color:#5b5670;margin-bottom:5px}
.doc-queue-options .field input,.doc-queue-options .field select,.doc-queue-note textarea{width:100%;min-width:0;min-height:36px;padding:8px 9px;border:1px solid #e5e1ef;border-radius:8px;background:#fff;color:var(--ink);font-size:10px}
.doc-queue-options .field small{display:block;font-size:8px;line-height:1.4;color:var(--muted);margin-top:4px}
.doc-queue-options .field input:disabled,.doc-queue-options .field select:disabled,.doc-queue-note textarea:disabled{background:#f7f6fa;color:#817d91}
.doc-queue-finishing{display:flex;flex-wrap:wrap;gap:9px 17px;padding:11px 0;border-bottom:1px solid #f0eef6}
.doc-queue-finishing label{display:flex;align-items:center;gap:6px;font-size:9px;color:#615c73}
.doc-queue-finishing input{accent-color:var(--purple)}
.doc-queue-note{display:block;margin-top:10px}
.doc-queue-note textarea{display:block;min-height:54px;resize:vertical}
.doc-queue-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #f0eef6;margin-top:11px;padding-top:11px}
.doc-queue-footer>div:first-child{display:flex;flex-direction:column;gap:4px}
.doc-queue-footer small{font-size:8px;color:var(--muted)}
.doc-queue-footer strong{font-size:14px;color:var(--purple)}
.doc-queue-actions .primary-button,.doc-queue-actions .secondary-button{min-height:36px;padding:9px 13px;font-size:9px;white-space:nowrap}
.doc-queue-actions button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:680px){
  .doc-queue-card{padding:10px}
  .doc-queue-card-head{grid-template-columns:32px minmax(0,1fr) auto 25px;gap:6px}
  .doc-queue-file-icon{width:32px;height:32px}
  .doc-queue-status{font-size:7px;padding:5px 6px}
  .doc-queue-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .doc-queue-footer{align-items:stretch;flex-direction:column}
  .doc-queue-actions button{width:100%}
}
.doc-queue-summary{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;padding:9px 10px;border-radius:9px;background:#f8f6fd;color:#675d7f;font-size:8px;line-height:1.45}
.doc-queue-summary span{display:inline-flex;align-items:center}
.doc-queue-summary span+span:before{content:"·";margin-right:12px;color:#aaa1bd}
@media(max-width:680px){.doc-queue-summary{gap:5px 8px}.doc-queue-summary span+span:before{margin-right:8px}}


/* Checkout result / Duitku instructions (Audit15 reference-copy parity). */
.checkout-result {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line, #e4e8ef);
  border-radius: 16px;
  background: var(--surface, #fff);
  display: grid;
  gap: 12px;
}
.checkout-result[hidden] { display: none !important; }
.checkout-result-heading { display: flex; align-items: flex-start; gap: 10px; }
.checkout-result-heading h3 { margin: 0 0 4px; }
.checkout-result-heading p { margin: 0; color: var(--muted, #667085); font-size: 13px; line-height: 1.5; }
.checkout-result-row { display: grid; gap: 6px; font-size: 13px; }
.checkout-result-row > span, .checkout-result-code-row > label { color: var(--muted, #667085); font-weight: 600; }
.checkout-copy-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.checkout-copy-line strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.checkout-result-code-row { display: grid; gap: 8px; }
.checkout-result-code-row[hidden] { display: none !important; }
.checkout-result-code-row textarea { width: 100%; max-width: 100%; resize: vertical; padding: 10px; border: 1px solid var(--line, #d0d5dd); border-radius: 10px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.checkout-payment-link { display: block; text-align: center; text-decoration: none; }
.checkout-result-validity, .checkout-result-note { margin: 0; color: var(--muted, #667085); font-size: 12px; line-height: 1.55; }
.checkout-result-note { padding: 10px 12px; border-radius: 10px; background: var(--soft, #f7f8fa); }
@media (max-width: 640px) {
  .checkout-result { padding: 13px; }
  .checkout-copy-line { align-items: flex-start; }
}


/* Web DEV — visible file previews in the document upload queue. */
.doc-queue-card-head{grid-template-columns:64px minmax(0,1fr) auto 27px;align-items:center}
.doc-queue-preview-button{width:64px;height:76px;display:grid;place-items:center;overflow:hidden;padding:0;border:1px solid #e2dced;border-radius:10px;background:#f5f2fb;color:#5f45d6;font-size:11px;font-weight:850;cursor:pointer}
.doc-queue-preview-button img{display:block;width:100%;height:100%;object-fit:cover;background:#f5f2fb}
.doc-queue-preview-button:disabled{opacity:.55;cursor:not-allowed}
.doc-queue-file-copy{align-self:center}
.doc-queue-preview-link{align-self:flex-start;border:0;padding:2px 0;background:transparent;color:#5d49c8;font-size:9px;font-weight:750;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.doc-queue-preview-link:disabled{color:#8b8796;cursor:not-allowed}
.doc-preview-dialog{width:min(920px,calc(100vw - 28px));max-width:920px;max-height:90vh;padding:0;border:1px solid #e4deef;border-radius:16px;background:#fff;color:var(--ink,#211d39);box-shadow:0 24px 80px rgba(22,16,56,.28)}
.doc-preview-dialog::backdrop{background:rgba(17,14,38,.62);backdrop-filter:blur(2px)}
.doc-preview-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid #eeeaf5;background:#fbfaff}
.doc-preview-dialog-head>div{display:flex;min-width:0;flex-direction:column;gap:4px}
.doc-preview-dialog-head strong{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.doc-preview-close{width:34px;height:34px;flex:0 0 auto;border:1px solid #eadfe5;border-radius:9px;background:#fff;color:#8f4050;font-size:23px;line-height:1;cursor:pointer}
.doc-preview-dialog-body{max-height:calc(90vh - 68px);overflow:auto;padding:14px;background:#f7f6fb}
.doc-preview-image{display:block;max-width:100%;max-height:72vh;margin:0 auto;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 2px 12px rgba(20,18,40,.08)}
.doc-preview-pdf-frame{display:block;width:100%;height:72vh;border:1px solid #e2dced;border-radius:8px;background:#fff}
.doc-preview-unavailable{max-width:560px;margin:28px auto;padding:22px;border:1px solid #e4deef;border-radius:13px;background:#fff;text-align:center}
.doc-preview-unavailable strong{font-size:14px}
.doc-preview-unavailable p{font-size:12px;line-height:1.6;color:#6e6880}
.doc-preview-actions{display:flex;justify-content:center;gap:10px;padding-top:12px}
.doc-preview-actions a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:680px){
  .doc-queue-card-head{grid-template-columns:54px minmax(0,1fr) auto 25px;gap:7px}
  .doc-queue-preview-button{width:54px;height:66px;border-radius:9px}
  .doc-preview-dialog{width:calc(100vw - 16px);max-height:94vh;border-radius:12px}
  .doc-preview-dialog-body{max-height:calc(94vh - 65px);padding:8px}
  .doc-preview-pdf-frame{height:76vh}
  .doc-preview-unavailable{margin:12px auto;padding:16px}
}


/* Checkout button eligibility feedback */
.checkout-block-reason { margin: 9px 0 0; padding: 10px 12px; border: 1px solid #f0d9a4; border-radius: 10px; background: #fffaf0; color: #795b21; font-size: 11px; line-height: 1.55; }
.checkout-block-reason[hidden] { display: none !important; }

/* ===== Customer Active Orders + History (Android Audit15 parity) ===== */
.order-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.order-shortcut {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e2def8;
  border-radius: 15px;
  background: #fff;
  color: #29215c;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.order-shortcut:hover { border-color: #9380ee; box-shadow: 0 5px 16px rgba(70, 54, 150, .08); }
.order-shortcut.is-active { border-color: #7652e9; background: #f7f4ff; box-shadow: inset 0 0 0 1px rgba(118, 82, 233, .08); }
.order-shortcut-icon {
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 11px;
  background: #eeeaff;
  color: #6845d6;
  font-size: 20px;
  font-weight: 800;
}
.order-shortcut-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.order-shortcut-copy strong { font-size: 12px; }
.order-shortcut-copy small { color: #77749c; font-size: 10px; }
.order-shortcut-count {
  display: grid;
  place-items: center;
  flex: 0 0 25px;
  min-width: 25px;
  height: 25px;
  padding: 0 6px;
  border-radius: 20px;
  background: #eeeaff;
  color: #5737c4;
  font-size: 11px;
  font-weight: 800;
}
.orders-view-panel { min-height: 350px; }
.orders-feedback {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #e8e4fa;
  border-radius: 11px;
  background: #f8f6ff;
  color: #6a668c;
  font-size: 11px;
  line-height: 1.55;
}
.orders-feedback.is-error { border-color: #f3c2c2; background: #fff8f8; color: #a33a3a; }
.orders-feedback.is-success { border-color: #c6ead6; background: #f2fbf6; color: #236b48; }
.customer-order-list { display: grid; gap: 12px; }
.customer-order-card {
  overflow: hidden;
  padding: 14px;
  border: 1px solid #e5e1f3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(46, 37, 96, .035);
}
.customer-order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.customer-order-title-wrap { min-width: 0; }
.customer-order-title { margin: 0; color: #211a52; font-size: 13px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.customer-order-meta { margin: 4px 0 0; color: #8884a6; font-size: 10px; line-height: 1.45; }
.customer-order-status {
  flex: 0 0 auto;
  max-width: 48%;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fff4df;
  color: #975514;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.customer-order-status.is-paid, .customer-order-status.is-ready { background: #e8f8ef; color: #167447; }
.customer-order-status.is-process { background: #eaf2ff; color: #2459a5; }
.customer-order-status.is-terminal { background: #fff0f0; color: #a73535; }
.customer-order-id {
  margin-top: 10px;
  color: #77738f;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.customer-order-lines { display: grid; gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #efedf7; }
.customer-order-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: #77738f; font-size: 10px; line-height: 1.45; }
.customer-order-line strong { color: #302963; text-align: right; font-size: 11px; font-weight: 750; }
.customer-order-countdown {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid #f1dfbd;
  border-radius: 10px;
  background: #fff9ec;
  color: #84511b;
  font-size: 11px;
  font-weight: 750;
}
.customer-order-countdown.is-urgent { border-color: #f2b9b9; background: #fff3f3; color: #a42c2c; }
.customer-order-countdown.is-overdue { border-color: #e8d4bc; background: #fff9f1; color: #88561d; }
.customer-order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.customer-order-actions button { flex: 1 1 145px; min-height: 37px; }
.customer-order-actions .primary-button { color: #fff; }
.customer-order-actions .secondary-button { color: #563ac2; }
.customer-order-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 36px 18px;
  border: 1px dashed #d9d3ef;
  border-radius: 15px;
  background: #fbfaff;
  color: #8a86a9;
  text-align: center;
}
.customer-order-empty strong { color: #4a4278; font-size: 13px; }
.customer-order-empty small { max-width: 420px; font-size: 10px; line-height: 1.6; }
.customer-order-empty-icon { color: #8d72e8; font-size: 30px; }
.customer-order-file-list { display: grid; gap: 5px; margin-top: 7px; }
.customer-order-file-list a { color: #5d42c5; font-size: 10px; text-decoration: none; overflow-wrap: anywhere; }
.customer-order-file-list a:hover { text-decoration: underline; }

.payment-modal-backdrop, .order-detail-modal-backdrop {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 17, 47, .58);
  backdrop-filter: blur(5px);
}
.payment-modal-backdrop[hidden], .order-detail-modal-backdrop[hidden] { display: none !important; }
.payment-modal, .order-detail-modal {
  display: flex;
  flex-direction: column;
  width: min(100%, 540px);
  max-height: min(92vh, 820px);
  overflow: hidden;
  border: 1px solid rgba(226, 221, 245, .95);
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 24px 85px rgba(17, 13, 46, .3);
}
.payment-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #efedf7;
}
.payment-modal-header .eyebrow { margin: 0 0 5px; color: #7e73ad; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.payment-modal-header h2 { margin: 0; color: #241b5b; font-size: 19px; line-height: 1.3; }
.payment-modal-close {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid #e6e1f5;
  border-radius: 10px;
  background: #f7f5ff;
  color: #5540ad;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.payment-modal-body, .order-detail-modal-body { overflow: auto; padding: 16px 20px 18px; }
.payment-modal-footer { display: flex; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid #efedf7; }
.payment-state-banner { padding: 11px 13px; border: 1px solid #eed8a8; border-radius: 11px; background: #fff8e9; color: #84531a; font-size: 11px; line-height: 1.55; }
.payment-state-banner.is-paid { border-color: #c4e6d0; background: #effbf3; color: #17643e; }
.payment-state-banner.is-error { border-color: #efc1c1; background: #fff5f5; color: #a33939; }
.payment-countdown-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #f4f0ff;
  color: #4d3a9d;
}
.payment-countdown-panel span { font-size: 11px; font-weight: 650; }
.payment-countdown-panel strong { font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.payment-countdown-panel.is-urgent { background: #fff0f0; color: #a72e2e; }
.payment-qr-box {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 14px;
  border: 1px solid #ebe7f6;
  border-radius: 15px;
  background: #fbfaff;
}
.payment-qr-box img, .payment-qr-box svg { display: block; width: min(100%, 232px); height: auto; padding: 7px; border-radius: 9px; background: #fff; }
.payment-qr-box small { color: #77728f; font-size: 10px; text-align: center; line-height: 1.5; }
.payment-code-block { display: grid; gap: 7px; }
.payment-code-block label { color: #706b8a; font-size: 10px; font-weight: 750; }
.payment-code-value {
  max-height: 104px;
  overflow: auto;
  padding: 10px 11px;
  border: 1px solid #e4e0f0;
  border-radius: 10px;
  background: #faf9ff;
  color: #302765;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  user-select: text;
}
.payment-modal-summary { display: grid; gap: 7px; padding: 12px; border: 1px solid #eeeaf8; border-radius: 12px; }
.payment-modal-summary div { display: flex; justify-content: space-between; gap: 12px; color: #77728f; font-size: 10px; }
.payment-modal-summary strong { color: #302766; font-size: 11px; text-align: right; }
.payment-modal-summary .total { padding-top: 8px; border-top: 1px solid #ece8f5; color: #342568; font-weight: 800; }
.payment-modal-summary .total strong { color: #673fe0; font-size: 16px; }
.payment-modal-actions { display: grid; gap: 8px; }
.payment-modal-actions button, .payment-modal-actions a { display: flex; align-items: center; justify-content: center; min-height: 42px; text-decoration: none; }
.payment-modal-reference { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid #eeeaf8; border-radius: 10px; }
.payment-modal-reference div { display: grid; min-width: 0; gap: 4px; }
.payment-modal-reference small { color: #88839f; font-size: 9px; }
.payment-modal-reference strong { color: #332968; font-size: 11px; overflow-wrap: anywhere; }
.payment-modal-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 150px; color: #686184; font-size: 12px; }
.payment-modal-spinner { width: 19px; height: 19px; border: 2px solid #e2dcfa; border-top-color: #6844d8; border-radius: 50%; animation: payment-spin .8s linear infinite; }
@keyframes payment-spin { to { transform: rotate(360deg); } }
.order-detail-section { display: grid; gap: 8px; margin-bottom: 14px; }
.order-detail-section h3 { margin: 0; color: #30275f; font-size: 12px; }
.order-detail-section p, .order-detail-section li { color: #716c88; font-size: 10px; line-height: 1.55; }
.order-detail-section ul { margin: 0; padding-left: 17px; }
.order-detail-file { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #eeeaf8; border-radius: 9px; }
.order-detail-file strong { min-width: 0; color: #3d356f; font-size: 10px; overflow-wrap: anywhere; }
.order-detail-file a { color: #6040ca; font-size: 10px; white-space: nowrap; }

@media (max-width: 680px) {
  .order-shortcuts { gap: 8px; }
  .order-shortcut { padding: 10px 9px; gap: 7px; border-radius: 12px; }
  .order-shortcut-icon { flex-basis: 30px; width: 30px; height: 30px; font-size: 17px; }
  .order-shortcut-copy strong { font-size: 10px; }
  .order-shortcut-copy small { font-size: 8px; }
  .order-shortcut-count { flex-basis: 22px; min-width: 22px; height: 22px; font-size: 9px; }
  .customer-order-card { padding: 12px; }
  .customer-order-status { max-width: 44%; font-size: 9px; }
  .payment-modal-backdrop, .order-detail-modal-backdrop { align-items: end; padding: 8px; }
  .payment-modal, .order-detail-modal { width: 100%; max-height: 94vh; border-radius: 19px 19px 13px 13px; }
  .payment-modal-header { padding: 15px 15px 12px; }
  .payment-modal-body, .order-detail-modal-body { padding: 13px 15px 15px; }
  .payment-modal-footer { padding: 10px 15px 13px; }
}