:root{
  --bg:#070d1e;
  --bg-2:#0b1530;
  --surface: rgba(255,255,255,0.045);
  --surface-solid:#101b38;
  --glass-border: rgba(255,255,255,0.09);
  --text-primary:#f4f6fb;
  --text-secondary:#9aa5c4;
  --text-muted:#6b7597;
  --cyan:#00c9d6;
  --magenta:#f0479a;
  --amber:#ffc53d;
  --green:#22e29f;
  --purple:#a487ff;
  --coral:#ff7a5c;
  --sky:#4fc3ff;
  --spectrum: linear-gradient(90deg, var(--cyan), var(--magenta), var(--amber));
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(0,201,214,0.12), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(240,71,154,0.10), transparent 55%),
    var(--bg);
  color:var(--text-primary);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:1040px;margin:0 auto;padding:44px 24px 90px;}

.brand-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
.brand .mark{width:38px;height:38px;border-radius:10px;background:var(--spectrum);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;color:#04101f;font-size:15px;}
.brand h1{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;margin:0;letter-spacing:0.01em;
  background:var(--spectrum); -webkit-background-clip:text; background-clip:text; color:transparent;}
.account-links{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--text-secondary);}
.account-links a{cursor:pointer;}
.account-links a:hover{color:var(--text-primary);}

.trust-bar{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:30px;}
.trust-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);font-family:'IBM Plex Mono',monospace;}
.trust-item svg{width:15px;height:15px;color:var(--green);flex-shrink:0;}

.rail{display:flex;gap:6px;margin-bottom:32px;overflow-x:auto;}
.rail .tick{flex:1;min-width:100px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--glass-border);font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-muted);position:relative;transition:all .25s;}
.rail .tick .num{display:block;font-size:11px;opacity:0.7;margin-bottom:2px;}
.rail .tick.active{color:var(--text-primary);border-color:transparent;background:linear-gradient(var(--surface-solid),var(--surface-solid)) padding-box, var(--spectrum) border-box;border:1px solid transparent;box-shadow:0 0 24px rgba(0,201,214,0.18);}
.rail .tick.done{color:var(--green);border-color:rgba(34,226,159,0.35);}
.rail .tick.done::after{content:"✓";position:absolute;right:12px;top:12px;color:var(--green);font-family:'Inter',sans-serif;font-weight:600;}

.grid{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start;}
@media (max-width:780px){.grid{grid-template-columns:1fr;}}
.grid.home{grid-template-columns:1fr;}

.panel{background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:20px;padding:34px;min-height:400px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.35);}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--spectrum);}
.panel h2{font-family:'Sora',sans-serif;font-weight:700;font-size:21px;margin:0 0 6px;}
.panel .sub{color:var(--text-secondary);font-size:13.5px;margin:0 0 28px;line-height:1.5;}

.cat-label{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.09em;color:var(--text-muted);margin:28px 0 12px;display:flex;align-items:center;gap:8px;}
.cat-label:first-of-type{margin-top:0;}
.cat-label .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
.prod-card{border:1px solid var(--glass-border);border-radius:14px;padding:18px;cursor:pointer;transition:transform .15s, box-shadow .15s, border-color .15s;background:rgba(255,255,255,0.02);position:relative;}
.prod-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 12px 30px -8px var(--accent);}
.prod-card .icon-badge{width:40px;height:40px;border-radius:10px;background:color-mix(in srgb, var(--accent) 18%, transparent);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--accent);}
.prod-card .icon-badge svg{width:20px;height:20px;}
.prod-card strong{display:block;font-size:14px;margin-bottom:4px;font-family:'Sora',sans-serif;font-weight:600;}
.prod-card span{font-size:12px;color:var(--text-secondary);}

.field{margin-bottom:22px;}
.field label{display:block;font-size:11.5px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:9px;}
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password], .field textarea{
  width:100%;background:rgba(255,255,255,0.03);color:var(--text-primary);border:1px solid var(--glass-border);border-radius:10px;padding:12px 13px;font-family:'Inter',sans-serif;font-size:13.5px;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){.two-col{grid-template-columns:1fr;}}

.options{display:flex;flex-wrap:wrap;gap:9px;}
.opt{border:1px solid var(--glass-border);border-radius:9px;padding:9px 15px;font-size:13px;cursor:pointer;background:rgba(255,255,255,0.02);color:var(--text-secondary);transition:all .15s;}
.opt:hover{border-color:var(--text-secondary);}
.opt.sel{background:var(--surface-solid);color:var(--text-primary);border-color:transparent;box-shadow:0 0 0 1.5px var(--cyan), 0 0 16px rgba(0,201,214,0.35);}
.qty-row{display:flex;align-items:center;gap:10px;}
.qty-row button{width:36px;height:36px;border-radius:9px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);color:var(--text-primary);cursor:pointer;font-size:16px;line-height:1;}
.qty-row button:hover{border-color:var(--cyan);color:var(--cyan);}
.qty-row input{width:86px;text-align:center;border-radius:9px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);height:36px;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--text-primary);}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--text-primary);color:#0b1122;border:none;border-radius:11px;padding:13px 22px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.btn:hover{filter:brightness(0.92);}
.btn:disabled{background:rgba(255,255,255,0.08);color:var(--text-muted);cursor:not-allowed;}
.btn-outline{background:transparent;border:1px solid var(--glass-border);color:var(--text-secondary);}
.btn-outline:hover{border-color:var(--text-secondary);color:var(--text-primary);filter:none;}
.actions{display:flex;justify-content:flex-end;margin-top:30px;gap:10px;flex-wrap:wrap;}

.drop{border:1.5px dashed var(--glass-border);border-radius:16px;padding:44px 20px;text-align:center;cursor:pointer;transition:all .2s;}
.drop:hover, .drop.drag{border-color:var(--cyan);background:rgba(0,201,214,0.05);}
.drop p{margin:10px 0 0;font-size:13px;color:var(--text-secondary);}
.drop .icon-wrap{width:52px;height:52px;border-radius:50%;background:rgba(0,201,214,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto;color:var(--cyan);}
.drop .icon-wrap svg{width:24px;height:24px;}

.file-received{border:1px solid rgba(34,226,159,0.35);background:rgba(34,226,159,0.06);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:14px;}
.file-received .mark{width:34px;height:34px;border-radius:50%;background:var(--green);color:#04211a;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.file-received .mark svg{width:18px;height:18px;}
.file-received .meta strong{display:block;font-size:14px;font-family:'Sora',sans-serif;}
.file-received .meta span{font-size:12px;color:var(--text-secondary);font-family:'IBM Plex Mono',monospace;}
.progress-bar{height:6px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden;margin-top:10px;}
.progress-bar-fill{height:100%;background:var(--spectrum);width:0%;transition:width .2s;}

.seal-row{display:flex;align-items:center;gap:16px;margin:22px 0 30px;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,0.025);border:1px solid var(--glass-border);}
.seal{width:52px;height:52px;border-radius:50%;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--cyan),var(--magenta),var(--amber),var(--cyan));animation:spin 6s linear infinite;}
.seal::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface-solid);}
.seal svg{position:relative;z-index:1;width:20px;height:20px;color:var(--text-primary);}
@media (prefers-reduced-motion: reduce){.seal{animation:none;}}
.seal-text strong{display:block;font-family:'Sora',sans-serif;font-size:13.5px;}
.seal-text span{font-size:12px;color:var(--text-secondary);}
@keyframes spin{to{transform:rotate(360deg);}}

.pay-total{font-family:'Sora',sans-serif;font-weight:800;font-size:34px;margin:8px 0 6px;
  background:linear-gradient(90deg,#fff,var(--cyan)); -webkit-background-clip:text;background-clip:text;color:transparent;}
.pay-total-label{font-size:12.5px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.25);border-top-color:#0b1122;border-radius:50%;display:inline-block;animation:s .7s linear infinite;}
@keyframes s{to{transform:rotate(360deg);}}

.confirm{text-align:center;padding:18px 0;}
.confirm .mark{width:64px;height:64px;border-radius:50%;background:var(--green);color:#04211a;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 0 0 8px rgba(34,226,159,0.12);}
.confirm .mark svg{width:30px;height:30px;}
.confirm h2{font-size:22px;font-family:'Sora',sans-serif;}
.confirm .oid{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-muted);margin-bottom:22px;}
.confirm .cs-msg{max-width:440px;margin:0 auto 28px;font-size:13.5px;line-height:1.65;background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);border-radius:14px;padding:18px 20px;text-align:left;color:var(--text-secondary);}
.confirm .cs-msg strong{color:var(--text-primary);}

.ticket{position:relative;background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:18px;padding:26px 22px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.ticket::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;background:var(--spectrum);border-radius:0 0 4px 4px;}
.ticket h3{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);margin:6px 0 18px;display:flex;align-items:center;gap:7px;}
.ticket h3 svg{width:13px;height:13px;color:var(--green);}
.ticket-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:11px;gap:10px;}
.ticket-row span:first-child{color:var(--text-muted);flex-shrink:0;}
.ticket-row span:last-child{color:var(--text-primary);text-align:right;}
.tear{border-top:1px dashed var(--glass-border);margin:16px 0;}
.ticket-total{display:flex;justify-content:space-between;font-family:'Sora',sans-serif;font-size:20px;font-weight:700;}
.ticket .status{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--green);margin-top:16px;display:flex;align-items:center;gap:6px;}
.ticket .status svg{width:12px;height:12px;}

.error-msg{background:rgba(255,122,92,0.1);border:1px solid rgba(255,122,92,0.4);color:#ffb3a1;border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:18px;}

footer{margin-top:38px;font-size:11.5px;color:var(--text-muted);text-align:center;font-family:'IBM Plex Mono',monospace;}

/* ---------- Auth modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(4,8,20,0.7);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-card{background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:18px;padding:30px;max-width:400px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.modal-card h2{margin-top:0;font-family:'Sora',sans-serif;}
.modal-tabs{display:flex;gap:8px;margin-bottom:20px;}
.modal-tabs button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--glass-border);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:13px;}
.modal-tabs button.active{background:var(--surface-solid);color:var(--text-primary);border-color:var(--cyan);}
.modal-close{position:absolute;top:14px;right:18px;cursor:pointer;color:var(--text-muted);font-size:20px;}

/* ---------- Admin ---------- */
.admin-body{padding:0;}
.admin-wrap{max-width:1200px;margin:0 auto;padding:34px 24px;}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-size:13px;color:var(--text-secondary);}
.admin-top h1{font-family:'Sora',sans-serif;margin:0;}
.admin-top a{color:var(--cyan);}
.admin-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
.chip{padding:7px 14px;border-radius:20px;border:1px solid var(--glass-border);font-size:12px;color:var(--text-secondary);text-decoration:none;}
.chip-active{background:var(--surface-solid);border-color:var(--cyan);color:var(--text-primary);}
.admin-table{width:100%;border-collapse:collapse;background:var(--surface-solid);border-radius:14px;overflow:hidden;font-size:13px;}
.admin-table th{text-align:left;padding:12px 14px;background:rgba(255,255,255,0.03);color:var(--text-muted);font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;}
.admin-table td{padding:12px 14px;border-top:1px solid var(--glass-border);}
.admin-table tr{cursor:pointer;}
.admin-table tr:hover td{background:rgba(255,255,255,0.02);}
.badge{padding:4px 10px;border-radius:20px;font-size:11px;font-family:'IBM Plex Mono',monospace;}
.badge-green{background:rgba(34,226,159,0.15);color:var(--green);}
.badge-amber{background:rgba(255,197,61,0.15);color:var(--amber);}
.badge-cyan{background:rgba(0,201,214,0.15);color:var(--cyan);}
.badge-muted{background:rgba(255,255,255,0.08);color:var(--text-muted);}

.admin-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.admin-login-card{background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:18px;padding:34px;width:340px;}
.admin-login-card h1{font-family:'Sora',sans-serif;font-size:20px;margin-top:0;}
.admin-login-card label{display:block;font-size:11px;color:var(--text-muted);margin:14px 0 6px;font-family:'IBM Plex Mono',monospace;text-transform:uppercase;}
.admin-login-card input{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);color:var(--text-primary);}
.admin-login-card .btn{width:100%;justify-content:center;margin-top:20px;}
.admin-error{background:rgba(255,122,92,0.1);border:1px solid rgba(255,122,92,0.4);color:#ffb3a1;border-radius:10px;padding:10px;font-size:13px;margin-bottom:6px;}

.order-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:800px){.order-detail-grid{grid-template-columns:1fr;}}
.panel-flat{background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:16px;padding:24px;}
.panel-flat h3{font-family:'Sora',sans-serif;font-size:14px;margin:18px 0 10px;}
.panel-flat h3:first-child{margin-top:0;}
.kv{width:100%;border-collapse:collapse;margin-bottom:6px;}
.kv td{padding:6px 0;font-size:13px;border-top:1px solid var(--glass-border);}
.kv td:first-child{color:var(--text-muted);width:140px;}
.panel-flat select, .panel-flat textarea{width:100%;padding:10px;border-radius:9px;border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);color:var(--text-primary);margin-bottom:14px;font-family:'Inter',sans-serif;}

/* ---------- Account pages ---------- */
.orders-table{width:100%;border-collapse:collapse;background:var(--surface-solid);border-radius:14px;overflow:hidden;font-size:13px;}
.orders-table th{text-align:left;padding:12px 14px;background:rgba(255,255,255,0.03);color:var(--text-muted);font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;}
.orders-table td{padding:12px 14px;border-top:1px solid var(--glass-border);}