:root{--blue:#079fdb;--pink:#ec008c;--ink:#16254a;--muted:#6f7d96;--bg:#f6f9fc;--line:#dfe8f2;--green:#20a66a;--red:#d94a67;--orange:#f0a020;--brand-gradient:linear-gradient(135deg,#ec008c 0%,#079fdb 100%)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}a{text-decoration:none;color:inherit}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 5vw}.topbar nav{display:flex;gap:22px;font-size:13px;color:#506079}.brand{display:flex;align-items:center;gap:9px}.brand b{font-size:18px}.brand small{display:block;font-size:8px;letter-spacing:1px;color:var(--muted)}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:var(--blue);color:#fff;font-weight:900}.hero{max-width:1200px;margin:auto;padding:70px 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.eyebrow{font-size:11px;font-weight:850;letter-spacing:1.5px;color:var(--blue)}h1{font-size:52px;line-height:1.03;letter-spacing:-2px;margin:10px 0 18px}h1 span{color:var(--blue)}p{line-height:1.6}.hero>section>p{max-width:680px;color:#56657c;font-size:17px}.track-form{display:flex;background:#fff;border:1px solid var(--line);padding:6px;border-radius:12px;max-width:680px;margin:26px 0}.track-form input{flex:1;border:0;outline:0;padding:13px;font:inherit}.btn,.track-form button{border:0;background:var(--blue);color:#fff;border-radius:8px;padding:11px 16px;font-weight:800;cursor:pointer}.track-form button{padding:13px 20px}.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.small{padding:7px 10px;font-size:11px}.feature-row{display:flex;gap:25px;margin-top:25px}.feature-row div{font-size:13px}.feature-row small{display:block;color:var(--muted);margin-top:3px}.hero-card{background:linear-gradient(135deg,#eaf4ff,#fff);padding:28px;border-radius:22px;border:1px solid #dce9f8;box-shadow:0 20px 55px #123c7417}.ticket-mini{background:#fff;border-radius:15px;padding:22px;box-shadow:0 8px 25px #123c7412}.mini-head,.line,.total,.page-title,.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.ticket-mini h2{font-size:24px;margin:20px 0 2px}.timer-demo{font-size:29px;color:var(--red);font-weight:900;margin:15px 0}.line{padding:12px 0;border-top:1px solid var(--line);font-size:12px}.total{padding-top:15px;border-top:2px solid var(--ink);margin-top:7px}.total b,.grand-total b{font-size:22px;color:var(--blue)}.badge{display:inline-flex;padding:6px 9px;border-radius:99px;font-size:10px;font-weight:850}.badge.warn{background:#fff0d9;color:#a25c00}.badge.blue{background:#e7f1ff;color:#1265c8}.badge.danger{background:#ffe7e7;color:#b32830}.badge.gray{background:#edf0f4;color:#667287}footer{text-align:center;padding:25px;color:#8490a3;font-size:11px}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eaf3ff,#f7f9fc)}.login-card{width:min(410px,92vw);background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:0 20px 60px #123c7418}.centered{justify-content:center;margin-bottom:20px}.login-card h1{font-size:29px;letter-spacing:-1px}.muted,.hint{color:var(--muted);font-size:12px}.login-card label,.panel label{display:block;font-size:12px;font-weight:750;margin:14px 0}.login-card input,.panel input,.panel textarea,.search input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;margin-top:6px;font:inherit;outline:0;background:#fff}.full{width:100%;margin-top:8px}.hint{text-align:center}.alert{padding:12px 14px;border-radius:9px;margin:15px 0;font-size:12px}.alert.error{background:#fff0f0;color:#a3242c}.alert.success{background:#eaf9f1;color:#14764d}.alert.warning{background:#fff7e8;color:#8b5c0a}.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 72px)}.sidebar{background:#10233d;color:#cad5e5;padding:26px 14px}.sidebar>b{font-size:10px;letter-spacing:1.5px;display:block;margin:0 12px 15px;color:#91a7c2}.sidebar a{display:block;padding:11px 12px;border-radius:8px;font-size:12px;margin:4px 0}.sidebar a.active,.sidebar a:hover{background:#176fe7;color:#fff}.sidebar small{display:block;font-size:8px;color:#8ea4be}.admin-main{padding:30px;max-width:1500px;width:100%;margin:auto}.page-title{margin-bottom:22px}.page-title h1{font-size:31px;letter-spacing:-1px;margin:5px 0}.page-title p{margin:0;color:var(--muted);font-size:12px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}.stats>div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:17px}.stats span{font-size:11px;color:var(--muted)}.stats b{display:block;font-size:27px;margin-top:4px}.search{display:flex;gap:8px;margin:14px 0}.search input{max-width:500px;margin:0}.panel{background:#fff;border:1px solid var(--line);border-radius:11px;padding:19px;margin-bottom:17px}.panel h2{font-size:15px;margin:0 0 14px}.table-panel{padding:0}.table-panel .panel-head{padding:17px 19px;border-bottom:1px solid var(--line)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #edf0f4}th{font-size:10px;color:#76839a;text-transform:uppercase}td small{display:block;color:var(--muted);margin-top:3px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.full-width{grid-column:1/-1}.rule{display:flex;justify-content:space-between;background:#f6f9fd;padding:12px;border-radius:8px;font-size:11px}.check{display:flex!important;align-items:center;gap:7px}.check input{width:auto;margin:0}.notice{background:#eef6ff;color:#285e9e;border-radius:8px;padding:11px;font-size:11px;margin-top:12px}.item-row{display:grid;grid-template-columns:1.1fr 1.4fr .5fr .7fr 35px;gap:7px;margin-bottom:7px}.item-row input{margin:0}.icon-btn{border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--red);font-size:17px}.total-preview{text-align:right;padding-top:13px;border-top:1px solid var(--line)}.actions{text-align:right}.ticket-page{max-width:1100px;margin:auto;padding:32px 20px}.countdown-card{background:#fff0f0;border:1px solid #ffd2d2;border-radius:11px;padding:12px 16px;text-align:right;min-width:185px}.countdown-card small,.countdown-card span{display:block;font-size:9px;color:#a34b51}.countdown-card b{display:block;color:var(--red);font-size:25px}.expired-card{background:#eef1f5;border-color:#d9dee6}.expired-card b,.expired-card small,.expired-card span{color:#697488}.ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.ticket-grid>*{min-width:0}.ticket-grid .full-width{grid-column:1/-1}.detail-list>div{display:grid;grid-template-columns:100px 1fr;padding:10px 0;border-bottom:1px solid #edf0f4;font-size:12px}.detail-list span{color:var(--muted)}.timeline>div{display:flex;gap:11px;padding:10px 0;position:relative}.timeline i{width:28px;height:28px;border-radius:50%;background:#edf1f6;display:grid;place-items:center;font-style:normal;font-size:11px}.timeline .done i{background:var(--green);color:#fff}.timeline .current i{background:var(--blue);color:#fff}.timeline b,.timeline small{display:block}.timeline small{font-size:10px;color:var(--muted);margin-top:3px}.grand-total{display:flex;justify-content:space-between;padding-top:16px}.file-card{display:flex;align-items:center;gap:7px;background:#f7f9fc;padding:12px;border-radius:8px;font-size:11px}.file-card a{margin-left:auto;color:var(--blue);font-weight:800}.log{border-bottom:1px solid #edf0f4;padding:8px 0;font-size:10px}.log small{float:right;color:var(--muted)}.log p{margin:4px 0;color:#68768d}.reissue{border:1px dashed #9dbce8;background:#f7fbff}@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:40px}.hero-card{order:-1}.admin-layout{grid-template-columns:1fr}.sidebar{display:none}.stats{grid-template-columns:1fr 1fr}.form-grid,.ticket-grid{grid-template-columns:1fr}.full-width{grid-column:auto}.item-row{grid-template-columns:1fr 1fr}.item-row input:nth-child(2){grid-column:1/-1}.page-title{align-items:flex-start}.page-title h1,h1{font-size:34px}.topbar{padding:0 16px}.topbar nav{gap:10px}}
.nav-count{background:#e7f1ff;color:#1265c8;padding:2px 6px;border-radius:9px;font-size:9px}.danger-btn{background:#fff0f0!important;color:#b32830!important;border:1px solid #ffd0d0!important}.link{color:var(--blue);font-weight:800}.payment-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 18px}.payment-options label{border:1px solid var(--line);padding:15px;border-radius:10px;cursor:pointer;margin:0!important}.payment-options label:has(input:checked){border-color:#79aeea;background:#f2f8ff}.payment-options input{width:auto!important;margin:0 5px 0 0!important}.payment-options b,.payment-options small{display:block;margin-left:23px}.payment-options small{font-weight:400;color:var(--muted);margin-top:5px}.tracking-box{border-color:#9dc5f2;background:#f6fbff}.tracking-event{display:flex;gap:12px;align-items:flex-start}.tracking-event i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-style:normal}.tracking-event b,.tracking-event small{display:block}.tracking-event small{font-size:10px;color:var(--muted)}.tracking-event p{font-size:11px}.empty{color:var(--muted);padding:10px 0;font-size:12px}@media(max-width:850px){.payment-options{grid-template-columns:1fr}}

select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;margin-top:6px;font:inherit;background:#fff}.payment-form{display:flex;flex-direction:column;gap:15px}.payment-form .btn{width:100%;margin-top:2px}.actions-row{display:flex;gap:10px;align-items:center;margin-top:16px}.reject-form{display:flex;gap:7px;flex:1}.reject-form input{margin:0}.empty{padding:14px;background:#f7f9fc;border-radius:8px;font-size:11px}@media(max-width:700px){.actions-row,.reject-form{flex-direction:column;align-items:stretch}}


/* QRIS final visibility + responsive layout */
#qrisBox[hidden]{display:none!important}
.qris-payment{width:100%;clear:both;margin:4px 0 18px}
.qris-card{display:grid;grid-template-columns:minmax(280px,320px) minmax(0,1fr);gap:28px;align-items:center;width:100%;max-width:100%;padding:22px;border:1px solid #dbe7f5;border-radius:16px;background:linear-gradient(135deg,#f4f9ff,#fff);overflow:hidden}
.qris-image-wrap{width:100%;max-width:320px;display:flex;justify-content:center;align-items:center;min-width:0;margin:0 auto}
.qris-image{display:block;width:auto;max-width:320px;height:auto;max-height:320px;object-fit:contain;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px;box-sizing:border-box}
.qris-placeholder{width:320px;max-width:320px;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fff;border:1px dashed #b8c7d9;border-radius:12px;font-size:38px;font-weight:800;color:#172b4d}
.qris-placeholder small{display:block;margin:12px 25px 0;font-size:13px;font-weight:500;color:#64748b}
.qris-info{min-width:0}.qris-info h3{margin:0 0 8px;font-size:21px}.qris-info p{color:#52627a;line-height:1.6}.qris-info ol{padding-left:22px;line-height:1.8}.qris-note{margin-top:14px;padding:11px 13px;border-radius:10px;background:#fff8e8;color:#8a5a00;font-size:13px}.qris-info b{color:#0878ff}
@media(max-width:700px){.qris-card{grid-template-columns:1fr;gap:18px;padding:16px}.qris-image-wrap{max-width:280px}.qris-image{width:280px;max-width:280px;max-height:280px}.qris-placeholder{width:280px;max-width:280px}}

/* Namichii calm brand theme */
.topbar{background:rgba(255,255,255,.96);box-shadow:0 4px 18px rgba(25,55,90,.05)}
.brand{gap:11px}.brand-logo{width:42px;height:42px;object-fit:contain;display:block}.brand-text b{font-size:18px;letter-spacing:.2px}.brand-text small{color:#7c8aa0}.btn,.track-form button{background:var(--brand-gradient)}.eyebrow{color:var(--pink)}h1 span{color:var(--pink)}
.sidebar a.active,.sidebar a:hover{background:var(--brand-gradient)}
.payment-media[hidden]{display:none!important}.payment-media{width:100%;margin:4px 0 18px}.media-card{display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(280px,.95fr);gap:24px;align-items:center;padding:18px;border:1px solid #e1eaf3;border-radius:16px;background:linear-gradient(135deg,#fff7fc,#f3fbff);overflow:hidden}.media-card>img{display:block;width:100%;height:auto;max-width:620px;max-height:430px;object-fit:contain;border-radius:12px;background:#fff}.media-copy h3{margin:0 0 8px;font-size:20px;color:var(--ink)}.media-copy p,.media-copy ol{font-size:13px;line-height:1.65}.media-copy ol{padding-left:20px}.media-note{padding:11px 13px;border-radius:10px;background:#fff7fb;color:#9a246d;font-size:12px}
.cod-policy-card{display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid #e3eaf3;border-radius:16px;background:linear-gradient(135deg,#fff,#f7fbff)}.cod-policy-card>img{display:block;width:100%;height:auto;max-width:100%;max-height:600px;object-fit:contain;border-radius:12px}.cod-notice{margin:0;line-height:1.55}.cod-ok{background:#effaf5;color:#176d4a;border:1px solid #ccefe0}.cod-warning{background:#fff5fa;color:#8d235f;border:1px solid #f4cce4}
.qris-card{background:linear-gradient(135deg,#fff7fc,#f3fbff);border-color:#e1dff0}.qris-info b{color:var(--pink)}
@media(max-width:700px){.media-card{grid-template-columns:1fr}.media-card>img{max-height:none}.cod-policy-card{padding:10px}}

/* Final layout hardening: compact brand + consistent payment media */
html,body{max-width:100%;overflow-x:hidden}
.topbar{min-width:0;overflow:hidden}
.topbar .brand{min-width:0;max-width:calc(100% - 110px);flex:0 1 auto}
.topbar .brand-logo{flex:0 0 42px!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;object-fit:contain!important}
.topbar .brand-text{min-width:0;white-space:nowrap}
.topbar .brand-text b{font-size:16px}
.topbar .brand-text small{font-size:7px}
.ticket-page{overflow:visible}
.payment-media{display:block!important}
.payment-media[hidden]{display:none!important}
.media-card{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:18px}
.media-card>img{width:auto!important;height:auto!important;max-width:360px!important;max-height:360px!important;object-fit:contain!important;margin:0 auto}
.media-copy{width:100%;max-width:760px}
.cod-policy-card{align-items:center}
.cod-policy-card>img{width:auto!important;height:auto!important;max-width:360px!important;max-height:360px!important;object-fit:contain!important;margin:0 auto}
.cod-policy-card .cod-notice{width:100%;max-width:760px}
.qris-card{grid-template-columns:320px minmax(0,1fr)}
.qris-image-wrap{width:320px;max-width:320px}
.qris-image{width:auto!important;height:auto!important;max-width:320px!important;max-height:320px!important}
@media(max-width:700px){
  .topbar .brand-logo{flex-basis:36px!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important}
  .topbar .brand-text b{font-size:14px}
  .media-card>img,.cod-policy-card>img{max-width:300px!important;max-height:300px!important}
  .qris-image-wrap{width:280px;max-width:280px}
  .qris-image{max-width:280px!important;max-height:280px!important}
}

/* Fixed payment amount + COD DP flow */
.fixed-amount,.cod-balance{width:100%;padding:14px 16px;border:1px solid #dce7f2;border-radius:12px;background:linear-gradient(135deg,#f7fbff,#fff);display:flex;flex-direction:column;gap:4px}
.fixed-amount span,.cod-balance span{font-size:11px;color:var(--muted);font-weight:750}
.fixed-amount b,.cod-balance b{font-size:21px;color:var(--pink)}
.fixed-amount small,.cod-balance small{font-size:10px;color:var(--muted);line-height:1.5}
.cod-dp-method{width:100%;padding:14px;border:1px solid #f0d4e4;border-radius:14px;background:#fff9fc}
.cod-dp-method[hidden],.fixed-amount[hidden],.cod-full-amount[hidden]{display:none!important}
.cod-dp-method .notice{margin-top:0;margin-bottom:12px}
.cod-dp-method label{margin:10px 0!important}
.cod-balance{margin-top:10px;background:#f5fbff;border-color:#d8eaf7}
.cod-balance b{color:#0878ff}
.cod-full-amount{background:#f1fbf7;border-color:#cdeee0}
.cod-full-amount b{color:#16845b}

/* Phase 3 production & tracking */
.phase3-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px;padding:12px 14px;border:1px solid #dfeaf4;border-radius:14px;background:linear-gradient(90deg,#f7fbff,#fff8fc);font-size:11px;color:#49617c}.phase3-flow span{padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #e2eaf2}.phase3-flow b{color:#b3bfd0}.tracking-editor{border-color:#d8e7f3}.tracking-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 18px}.tracking-meta>div{padding:11px 12px;border:1px solid #e5edf5;border-radius:10px;background:#f9fbfd}.tracking-meta span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.tracking-meta b{font-size:12px}.tracking-form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.tracking-form label{margin:0!important}.tracking-form .full-span{grid-column:1/-1}.tracking-form .btn{margin-top:2px}.status-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;background:#edf3f9;color:#486078}.status-payment_verified,.status-production_approved{background:#eaf7ff;color:#1472b9}.status-production{background:#eef5ff;color:#2d63b8}.status-finishing{background:#f3efff;color:#7253b7}.status-qc{background:#fff7df;color:#9b6b00}.status-rework{background:#fff0f0;color:#b23c45}.status-packing{background:#eefaf5;color:#25805e}.status-ready_to_ship{background:#eafaf8;color:#137c78}.status-shipped{background:#eef2ff;color:#4f5fb2}.status-delivered,.status-completed{background:#eaf8ef;color:#25744d}.inline-form{display:inline-flex;margin:0 4px 4px 0}.customer-tracking{border-color:#cfe5f5;background:linear-gradient(135deg,#fff,#f5fbff)}.customer-meta{margin-top:4px}.customer-progress{display:flex;align-items:flex-start;gap:4px;overflow:auto;padding:14px 0 8px}.progress-step{min-width:92px;flex:1;text-align:center;color:#8a98aa}.progress-step i{width:26px;height:26px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;background:#edf2f6;font-style:normal;font-size:10px}.progress-step span{display:block;font-size:9px;line-height:1.25}.progress-step.done,.progress-step.active{color:#1d6fae}.progress-step.done i{background:#16a87a;color:#fff}.progress-step.active i{background:#e9008c;color:#fff}.tracking-events{border-top:1px solid #e8eef4;margin-top:8px;padding-top:12px}.tracking-events h3{font-size:14px;margin:0 0 8px}.tracking-events .tracking-event{padding:8px 0;border-bottom:1px solid #edf1f5}.tracking-events .tracking-event i{background:#16a87a;width:28px;height:28px;flex:0 0 28px}.tracking-events .tracking-event p{margin:4px 0 0;color:#5f7187;font-size:10px}.tracking-events .tracking-event small{font-size:9px;color:var(--muted)}
@media(max-width:850px){.tracking-meta{grid-template-columns:1fr 1fr}.tracking-form{grid-template-columns:1fr}.tracking-form .full-span{grid-column:auto}.phase3-flow{overflow:auto;flex-wrap:nowrap}.customer-progress{justify-content:flex-start}.progress-step{flex:0 0 92px}}

/* Phase 3 production intake */
.production-intake{margin:16px 0;padding:16px;border:1px solid #dceaf4;border-radius:14px;background:linear-gradient(135deg,#f7fcff,#fff8fc)}.production-intake h3{margin:0 0 6px}.production-intake p{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.6}.production-intake-form{display:flex;align-items:end;gap:12px}.production-intake-form label{flex:1;margin:0!important}.production-summary{display:flex;justify-content:space-between;gap:16px;margin:14px 0;padding:12px 14px;border-radius:12px;background:#eefaff;border:1px solid #d5eef8;color:#31566e}.production-summary span{color:#416b82}.production-ready-customer{margin-top:10px;padding:9px 12px;border-radius:10px;background:#fff6fb;color:#9a246d;font-size:12px}.status-production{background:#eaf7ff;color:#1472b9}
@media(max-width:700px){.production-intake-form{display:grid;grid-template-columns:1fr}.production-summary{display:block}.production-summary span{display:block;margin-top:4px}}

.design-confirmation{border:1px solid #d9e6f3;background:linear-gradient(135deg,#f7fbff,#fff);border-radius:12px;padding:14px;margin-top:4px}.design-check{display:flex!important;align-items:flex-start;gap:10px;margin:0!important;font-size:12px!important;line-height:1.5}.design-check input{width:18px!important;height:18px;margin:2px 0 0!important;flex:0 0 auto}.design-check span{display:block}.design-check b{display:block;font-size:12px}.design-check small{display:block;color:var(--muted);font-size:10px;line-height:1.55;font-weight:500;margin-top:5px}.payment-submit:disabled{opacity:.45;cursor:not-allowed}.design-confirmed{margin-top:10px;padding:10px 12px;border-radius:8px;background:#eaf9f1;color:#14764d;font-size:11px;font-weight:800}.design-confirmed small{display:block;color:#5d7c6d;font-weight:500;margin-top:3px}
.customer-design-confirmation{margin-top:14px}.design-required-note{margin-top:9px;color:#9a5a00;font-size:10px;line-height:1.5}.customer-design-confirmation .design-check{cursor:pointer}.customer-design-confirmation .design-check input{accent-color:#e9008c}

.customer-email-form{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}.customer-email-form label{display:grid;gap:6px}.customer-email-form label small{font-weight:500}.customer-email-form input[type=email]{width:100%;box-sizing:border-box}.customer-email-form .btn{justify-self:start}

/* Mobile-friendly UI - final responsive layer */
html{scroll-behavior:smooth}
button,input,textarea,select{font-size:16px}
.btn,.track-form button,.icon-btn{min-height:42px}
@media(max-width:850px){
  .topbar{height:auto;min-height:64px;padding:10px 14px;gap:10px;align-items:center}
  .topbar nav{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;max-width:58%;padding:2px 0;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{padding:8px 7px;border-radius:7px;font-size:11px}
  .topbar .brand{max-width:42%}
  .topbar .brand-text b{font-size:13px}
  .topbar .brand-text small{font-size:6px;letter-spacing:.7px}

  .hero{padding:28px 14px 34px;gap:20px;grid-template-columns:1fr!important}
  .hero>section>p{font-size:14px}
  h1,.page-title h1{font-size:30px;line-height:1.08;letter-spacing:-1px}
  .hero-card{padding:14px;border-radius:16px}
  .ticket-mini{padding:16px}
  .ticket-mini h2{font-size:20px}
  .feature-row{gap:10px;justify-content:space-between}
  .feature-row div{font-size:11px}
  .track-form{display:flex;flex-direction:column;padding:8px;margin:18px 0 0;max-width:none}
  .track-form input,.track-form button{width:100%;min-height:44px}

  .admin-main{padding:18px 12px 30px}
  .page-title{gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .page-title>div{min-width:0;flex:1 1 100%}
  .page-title>.btn{width:100%}
  .stats{gap:8px}
  .stats>div{padding:13px 11px}
  .stats b{font-size:23px}
  .stats span{font-size:10px}
  .search{flex-direction:column}
  .search input,.search .btn{max-width:none;width:100%;min-height:44px}
  .panel{padding:14px;margin-bottom:12px;border-radius:10px}
  .panel h2{font-size:14px}
  .panel-head{align-items:flex-start;flex-wrap:wrap}
  .panel-head .btn{width:100%}

  .form-grid{gap:0}
  .form-grid>.panel{margin-bottom:12px}
  .item-row{grid-template-columns:1fr 1fr;gap:8px;padding:10px;border:1px solid #edf1f5;border-radius:9px;background:#fafcff;margin-bottom:8px}
  .item-row input:nth-child(1),.item-row input:nth-child(2){grid-column:1/-1}
  .item-row input,.item-row .icon-btn{min-height:44px}
  .item-row .icon-btn{width:44px;justify-self:end}
  .actions{text-align:stretch}
  .actions .btn{width:100%}

  .table-wrap{margin:0 -14px;padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:680px}
  .ticket-page .table-wrap{margin:0;padding:0;overflow:visible}
  .ticket-page .table-wrap table{min-width:0;width:100%}
  .ticket-page .table-wrap thead{display:none}
  .ticket-page .table-wrap tbody{display:block}
  .ticket-page .table-wrap tr{display:block;border:1px solid #edf0f4;border-radius:9px;padding:10px 12px;margin-bottom:8px;background:#fafcff}
  .ticket-page .table-wrap td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0;border:0;font-size:12px;text-align:right}
  .ticket-page .table-wrap td::before{content:attr(data-label);color:#6f7d96;font-weight:600;text-align:left;flex:0 0 auto}
  .table-panel .panel-head{margin:0 -14px;padding:14px;border-radius:10px 10px 0 0}
  th,td{padding:11px 10px}
  .inline-form{display:flex;margin:0 0 6px}
  .inline-form .btn{width:100%;min-width:100px}

  .ticket-page{padding:18px 12px 28px}
  .ticket-page>.page-title{display:block}
  .ticket-page>.page-title .countdown-card{margin-top:12px;width:100%;min-width:0;text-align:center}
  .ticket-grid{gap:12px}
  .ticket-grid .panel{margin-bottom:0}
  .detail-list>div{grid-template-columns:minmax(82px,30%) 1fr;gap:8px;word-break:break-word}
  .detail-list b{overflow-wrap:anywhere}
  .grand-total{align-items:center}
  .grand-total b,.total b{font-size:19px}
  .file-card{align-items:flex-start;flex-wrap:wrap;word-break:break-word}
  .file-card a{margin-left:0;width:100%;padding-top:5px}
  .payment-options{gap:8px}
  .payment-options label{padding:12px 10px;min-height:64px}
  .payment-form{gap:12px}
  .payment-form .btn{min-height:46px}
  .media-card{padding:12px;gap:12px}
  .media-card>img,.cod-policy-card>img{max-width:min(100%,300px)!important;max-height:300px!important}
  .qris-image-wrap{width:min(100%,280px);max-width:280px}
  .qris-image{max-width:100%!important;max-height:280px!important}
  .production-intake{padding:12px}
  .production-intake-form{gap:9px}
  .tracking-meta{gap:8px}
  .tracking-meta>div{padding:10px}
  .tracking-form{gap:9px}
  .customer-progress{overflow:visible;gap:2px;padding-bottom:4px}
  .progress-step{min-width:0;flex:1 1 0}
  .progress-step span{font-size:8px;line-height:1.2}
  .timeline>div{gap:9px}
  .timeline i{flex:0 0 28px}

  .customer-email-form .btn{width:100%}
  .customer-email-form input{min-height:44px}
  .design-confirmation{padding:12px}
  .design-check{gap:9px}
  .design-check input{width:20px!important;height:20px}
}
@media(max-width:480px){
  .topbar{align-items:flex-start}
  .topbar nav{max-width:54%;font-size:10px}
  .topbar nav a{padding:7px 5px}
  .topbar .brand{max-width:44%}
  .brand-text b{letter-spacing:.1px}
  .stats{grid-template-columns:1fr 1fr}
  .stats>div{min-width:0}
  .page-title h1{font-size:27px}
  .panel{padding:12px}
  .panel-head{gap:8px}
  .payment-options{grid-template-columns:1fr}
  .payment-options label{min-height:58px}
  .rule{display:block}
  .rule span{display:block;margin-top:5px}
  .detail-list>div{grid-template-columns:88px 1fr}
  .countdown-card b{font-size:22px}
  .production-summary{font-size:11px}
  .status-pill{white-space:normal;text-align:center}
}

/* QRIS save button: available on desktop and mobile */
.qris-image-wrap{flex-direction:column;gap:10px}
.qris-save-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;text-decoration:none;white-space:nowrap}
@media(max-width:700px){.qris-save-btn{width:100%;max-width:280px;min-height:44px}}

/* Pembaruan data penerima dan salin rekening */
.locked-field{background:#eceff1!important;color:#555!important;cursor:not-allowed!important;opacity:1!important;border-color:#c7ccd1!important}
.customer-data-confirmation .design-check{cursor:pointer}
.customer-data-confirmation .design-check input:disabled{cursor:not-allowed}
.transfer-account-copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 16px;padding:12px;border:1px solid #dbe3ec;border-radius:12px;background:#f7fafc}
.transfer-account-copy>div{display:flex;flex-direction:column;gap:3px}
.transfer-account-copy span{font-size:12px;color:#687386}
.transfer-account-copy b{font-size:15px;color:#16243a}
.transfer-account-copy .btn{grid-column:1/-1;width:max-content}
@media(max-width:700px){.transfer-account-copy{grid-template-columns:1fr}.transfer-account-copy .btn{width:100%}}
.design-preview-card{padding:12px}
.design-preview-card>a{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit}
.design-preview-image{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:10px;border:1px solid #dbe3ec;background:#f7fafc;cursor:pointer}
.design-preview-card>a>span{font-weight:700;color:#1769e0}
@media(max-width:700px){.design-preview-image{max-height:360px}.design-preview-card>a>span{width:100%;text-align:center}}
.sidebar-separator{height:1px;background:#e7ebf0;margin:14px 10px}
/* Portrait order: ticket input first, preview second. */
@media(max-width:600px) and (orientation:portrait){.hero{display:flex;flex-direction:column}.hero>section:first-child{order:1}.hero-card{order:2!important}.track-form{width:100%}.track-form input,.track-form button{min-height:46px}}

/* Ensure center page content never gets cut off on mobile */
@media(max-width:600px){
  .hero{max-width:100%!important;padding:20px 12px!important}
  .hero>section{width:100%!important;max-width:100%!important}
  .track-form{max-width:none!important;width:100%!important}
  .track-form input{width:100%!important;max-width:100%!important;padding:12px!important}
  .track-form button{width:100%!important;max-width:100%!important;padding:14px 20px!important}
  .feature-row{flex-wrap:wrap!important;gap:12px!important}
  .feature-row div{flex:1 1 calc(50% - 6px)!important;min-width:0!important}
  .feature-row small{word-break:break-word!important}
  .hero h1{font-size:28px!important;line-height:1.1!important}
  .hero p{font-size:14px!important;line-height:1.5!important}
}
@media(max-width:480px){
  .feature-row div{flex:1 1 100%!important}
  .hero h1{font-size:24px!important}
}