:root {
  color-scheme: dark;
  --customer-bg: #071426;
  --customer-panel: #0d1d32;
  --customer-line: #203550;
  --customer-muted: #aab8c8;
  --customer-gold: #f5c451;
  --customer-white: #f8fafc;
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: var(--customer-bg); color: var(--customer-white); font: 14px "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--customer-gold); outline-offset: 3px; }
.customer-main { width: min(100% - 40px, 1100px); min-height: calc(100vh - 75px); margin: 0 auto; padding: 128px 0 68px; }
.customer-card { width: min(100%, 490px); margin: 0 auto; padding: clamp(24px, 5vw, 42px); border: 1px solid var(--customer-line); border-radius: 22px; background: var(--customer-panel); box-shadow: 0 25px 80px #0004; }
.back-link, .text-link { display: inline-block; margin-bottom: 25px; color: var(--customer-muted); font-size: 12px; }
.back-link:hover, .text-link:hover { color: var(--customer-gold); }
.eyebrow { display: block; color: var(--customer-gold); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
h1, h2 { font-family: Manrope, "DM Sans", sans-serif; }
.customer-card h1, .account-heading h1 { margin: 8px 0; font-size: clamp(27px, 5vw, 36px); font-weight: 800; letter-spacing: -.045em; }
.intro { color: var(--customer-muted); line-height: 1.65; }
.customer-card .intro { margin: 10px 0 22px; font-size: 13px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0 0 22px; padding: 5px; border-radius: 12px; background: #071426; }
.auth-tabs a { padding: 10px; border-radius: 9px; color: var(--customer-muted); font-size: 13px; font-weight: 700; text-align: center; }
.auth-tabs a.active { background: #203550; color: var(--customer-gold); }
.customer-form, .checkout-form { display: grid; gap: 9px; }
.customer-form label, .checkout-form label { margin-top: 8px; color: #e2e8f0; font-size: 12px; font-weight: 700; }
.customer-form label span, .checkout-form label span { color: var(--customer-muted); font-weight: 400; }
.customer-form input, .checkout-form input, .checkout-form textarea {
  width: 100%;
  min-height: 45px;
  padding: 11px 13px;
  border: 1px solid #29425f;
  border-radius: 10px;
  background: #09182b;
  color: var(--customer-white);
}
.checkout-form textarea { min-height: 115px; resize: vertical; }
.customer-form input:focus, .checkout-form input:focus, .checkout-form textarea:focus { border-color: var(--customer-gold); outline: none; box-shadow: 0 0 0 3px #f5c45120; }
.hint { margin: -3px 0 6px; color: var(--customer-muted); font-size: 11px; }
.primary-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 11px 17px;
  border: 1px solid var(--customer-gold);
  border-radius: 11px;
  background: linear-gradient(135deg, #f5c451, #d9a832);
  color: #071426;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
.primary-button:hover { filter: brightness(1.08); }
.button-link { width: auto; }
.account-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.account-actions .primary-button, .account-actions .account-secondary-link { min-height: 46px; margin: 0; padding: 11px 17px; line-height: 1.25; white-space: nowrap; }
.account-secondary-link { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--customer-line); border-radius: 11px; color: var(--customer-white); font-weight: 700; }
.account-secondary-link:hover { border-color: var(--customer-gold); color: var(--customer-gold); }
.notice { margin: 18px 0; padding: 13px 15px; border: 1px solid; border-radius: 11px; line-height: 1.55; }
.notice.error { border-color: #7f1d1d; background: #450a0a55; color: #fecaca; }
.notice.success { border-color: #145941; background: #063c2d; color: #a7f3d0; }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.account-heading .intro { margin: 5px 0; }
.account-heading .intro a { color: var(--customer-gold); font-weight: 700; }
.profile-section { max-width: 720px; }
.account-profile-form { padding: 20px; border: 1px solid var(--customer-line); border-radius: 16px; background: var(--customer-panel); }
.section-heading { margin: 30px 0 16px; }
.section-heading h2, .cart-summary h2, .checkout-form h2, .checkout-section-title { margin: 8px 0; font-size: 20px; font-weight: 800; }
.empty-state { padding: 34px; border: 1px dashed #29425f; border-radius: 16px; color: var(--customer-muted); text-align: center; }
.empty-state a { color: var(--customer-gold); font-weight: 700; }
.order-list, .cart-items { display: grid; gap: 14px; }
.order-card, .cart-item, .cart-summary, .checkout-form { border: 1px solid var(--customer-line); border-radius: 16px; background: var(--customer-panel); }
.order-card { padding: 20px; }
.order-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.order-head > div { display: grid; gap: 6px; }
.order-head strong { font: 800 15px Manrope, sans-serif; }
.order-head > div span, .cart-summary > p, .checkout-form > p { color: var(--customer-muted); font-size: 12px; }
.order-status { padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-pending { background: #f5c4511c; color: #f5c451; }
.status-contacted { background: #38bdf81c; color: #7dd3fc; }
.status-confirmed { background: #10b9811c; color: #6ee7b7; }
.status-cancelled { background: #f871711c; color: #fca5a5; }
.order-items { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.order-items li, .checkout-line { display: flex; justify-content: space-between; gap: 16px; color: #d5deea; font-size: 12px; line-height: 1.5; }
.order-items strong, .checkout-line strong { white-space: nowrap; }
.order-note { padding: 12px; border-radius: 10px; background: #ffffff08; color: var(--customer-muted); font-size: 12px; line-height: 1.6; }
.order-total { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding-top: 15px; border-top: 1px solid #ffffff12; }
.order-total span { color: var(--customer-muted); font-size: 12px; }
.order-total strong, .price { color: var(--customer-gold); font-size: 17px; }
.customer-footer { padding: 20px; border-top: 1px solid #ffffff10; color: #8294a9; font-size: 11px; text-align: center; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); align-items: start; gap: 20px; }
.cart-item { display: flex; align-items: center; gap: 16px; padding: 15px; }
.cart-item > img { width: 100px; height: 82px; border-radius: 10px; object-fit: cover; }
.cart-item-copy { display: grid; flex: 1; gap: 6px; min-width: 0; }
.cart-item-copy .eyebrow { font-size: 9px; }
.cart-item h2 { margin: 0; font-size: 16px; font-weight: 800; }
.cart-item .price { font-size: 14px; }
.remove-button { padding: 8px 10px; border: 1px solid #672632; border-radius: 8px; background: #35151b; color: #fecdd3; font-size: 11px; font-weight: 700; cursor: pointer; }
.remove-button:hover { background: #4c1d1d; }
.unavailable { color: #fca5a5; font-size: 12px; line-height: 1.5; }
.cart-summary { position: sticky; top: 100px; padding: 20px; }
.cart-summary h2 { margin-top: 0; }
.cart-summary .primary-button { width: 100%; }
.checkout-form { display: grid; gap: 10px; padding: 22px; }
.checkout-form h2 { margin: 0; }
.checkout-form > p { line-height: 1.6; }
.checkout-section-title { margin: 0 0 20px; }
.checkout-line { padding: 11px 0; border-bottom: 1px solid #ffffff0d; }
.payment-note { padding: 12px; border: 1px solid #f5c45130; border-radius: 10px; background: #f5c4510b; color: #e7dba9; font-size: 11px; line-height: 1.6; }
@media (max-width: 720px) {
  .customer-main { width: min(100% - 30px, 1100px); padding-top: 104px; }
  .account-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .cart-summary { position: static; }
}
@media (max-width: 460px) {
  .cart-item { align-items: flex-start; flex-wrap: wrap; }
  .cart-item > img { width: 74px; height: 68px; }
  .cart-item form { margin-left: auto; }
  .order-head { flex-direction: column; }
}