:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --ink: #111827;
  --muted: #64748b;
  --border: #dbe3ee;
  --dark: #101827;
  --yellow: #fbbf24;
  --blue: #2563eb;
  --green: #0f8f63;
  --red: #dc2626;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.page { min-height: 100vh; }
.hero { background: var(--dark); color: #fff; padding: 28px 18px 66px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; left: 18px; top: 24px; width: 96px; height: 10px; border-radius: 999px; background: var(--yellow); }
.hero::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 260px; height: 260px; border: 28px solid rgba(251,191,36,.22); border-radius: 50%; }
.hero-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 28px; }
h1, h2, h3, p { margin-top: 0; letter-spacing: 0; }
h1 { margin-bottom: 8px; font-size: clamp(28px, 5vw, 46px); line-height: 1.04; }
.hero p { color: #cbd5e1; margin-bottom: 0; line-height: 1.55; overflow-wrap: anywhere; }
.shell { max-width: 1180px; margin: -42px auto 0; padding: 0 18px 28px; position: relative; z-index: 2; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 12px 34px rgba(15,23,42,.08); min-width: 0; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 14px; align-items: start; }
.intro-panel { min-height: 380px; display: grid; align-content: center; gap: 16px; }
.intro-panel h2 { font-size: 26px; margin-bottom: 0; }
.steps { display: grid; gap: 10px; }
.step { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px; padding: 11px; background: #f8fafc; }
.step span { flex: 0 0 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--dark); color: #fff; font-weight: 800; }
.step strong { display: block; margin-bottom: 3px; }
.muted { color: var(--muted); }
.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; background: #f1f5f9; padding: 5px; border-radius: 8px; }
.tabs button { border: 0; min-height: 38px; border-radius: 7px; background: transparent; font-weight: 800; color: var(--muted); }
.tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.form { display: grid; gap: 10px; }
.field { display: grid; gap: 6px; }
.field label { color: #334155; font-size: 12px; font-weight: 800; }
.field input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 11px; outline: none; }
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.btn { min-height: 40px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 800; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.primary { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.msg { margin: 8px 0 0; min-height: 20px; color: var(--muted); font-size: 13px; }
.msg.error { color: var(--red); }
.msg.success { color: var(--green); }
.link-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 900;
  cursor: pointer;
  padding: 3px 0;
  text-align: left;
}
.link-button:hover { text-decoration: underline; }

.register-address {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #f8fbff;
}

.register-section-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.register-section-title strong {
  color: #102039;
}

.register-section-title span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.register-terms {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfe0ec;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fcff, #eef7ff);
}

.register-terms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.register-terms-head strong {
  color: #102039;
}

.register-terms-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.terms-mini-scroll {
  max-height: 158px;
  overflow: auto;
  border: 1px solid #d8e6f2;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  color: #334155;
  line-height: 1.45;
  scrollbar-width: thin;
}

.terms-mini-scroll.read {
  border-color: #86efac;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .11);
}

.terms-mini-scroll p {
  margin: 10px 0 0;
  font-size: 13px;
}

.terms-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.terms-mini-grid span {
  border: 1px solid #dbeafe;
  border-radius: 9px;
  padding: 8px;
  background: #eff6ff;
  color: #17365d;
  font-size: 12px;
  font-weight: 800;
}

.terms-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: #102039;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.terms-consent input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: #2563eb;
}

.terms-consent input:disabled + span {
  color: #64748b;
}

#registerSubmit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dash { display: grid; gap: 14px; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.client-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stat { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 14px; min-height: 84px; display: grid; align-content: center; gap: 6px; }
.stat span { color: var(--muted); font-size: 12px; font-weight: 800; }
.stat strong { font-size: 24px; }
.client-command {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.6fr) minmax(240px, .9fr);
  gap: 12px;
  align-items: stretch;
}
.command-copy h2 {
  margin: 0 0 6px;
  color: #f4f8ff;
  font-size: 22px;
}
.client-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.client-menu-item {
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255,255,255,.03);
}
.client-menu-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.client-menu-item strong {
  font-size: 28px;
  line-height: 1;
  color: #f8fbff;
}
.client-menu-item small {
  color: var(--muted);
  font-weight: 800;
}
.client-menu-item.hot {
  border-color: rgba(32,217,242,.4);
  background: rgba(32,217,242,.1);
}
.client-menu-item.warn {
  border-color: rgba(251,191,36,.38);
  background: rgba(251,191,36,.08);
}
.client-menu-item.live {
  border-color: rgba(25,217,140,.36);
  background: rgba(25,217,140,.09);
}
.latest-live-card {
  border: 1px solid rgba(32,217,242,.22);
  border-radius: 8px;
  padding: 12px;
  background: rgba(8,17,31,.56);
  display: grid;
  gap: 6px;
  align-content: center;
}
.latest-live-card strong { color: #bff5ff; }
.latest-live-card p {
  margin: 0;
  color: #eaf7ff;
  line-height: 1.45;
}
.latest-live-card a {
  color: var(--yellow);
  font-weight: 900;
  text-decoration: none;
}
.empty-live p { color: var(--muted); }
.live-flash {
  margin-top: 10px;
  border: 1px solid rgba(25,217,140,.3);
  border-radius: 8px;
  padding: 9px 10px;
  color: #9ff4cb;
  background: rgba(25,217,140,.09);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.section-head h2 { margin: 0; font-size: 18px; }
.live-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(32,217,242,.24);
  border-radius: 8px;
  padding: 0 9px;
  color: #bff5ff;
  background: rgba(32,217,242,.08);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.repair-list, .doc-list, .event-list { display: grid; gap: 10px; }
.repair, .doc, .event { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 12px; }
.repair.highlight, .doc.highlight { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(251,191,36,.22); }
.repair-head, .doc-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.repair h3, .doc h3 { margin-bottom: 3px; font-size: 15px; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.repair-update {
  margin-top: 12px;
  border: 1px solid rgba(32,217,242,.22);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(32,217,242,.07);
}
.repair-update.waiting-part {
  border-color: rgba(246,178,61,.32);
  background: rgba(246,178,61,.1);
}
.repair-update.seal-update {
  border-color: rgba(22,163,74,.34);
  background: rgba(22,163,74,.11);
}
.repair-update.seal-update strong {
  color: #86efac;
}
.repair-update.planning-update {
  border-color: rgba(246,178,61,.32);
  background: rgba(246,178,61,.1);
}
.repair-update strong {
  display: block;
  color: #bff5ff;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.repair-update.planning-update strong {
  color: #ffd28c;
}
.repair-update p {
  margin: 0;
  color: #eaf7ff;
  line-height: 1.45;
}
.repair-update span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.repair-photos {
  margin-top: 12px;
  border: 1px solid #cfe2f3;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, #f8fcff, #f1fbff);
}
.repair-photos-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.repair-photos-head strong { color: #08213d; }
.repair-photos-head span { color: #627894; font-weight: 800; font-size: 13px; }
.repair-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.repair-photo-stage {
  border: 1px solid #d9e8f5;
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.78);
}
.repair-photo-stage h4 {
  margin: 0 0 8px;
  color: #0a2540;
  font-size: 15px;
}
.repair-photo-thumbs {
  display: grid;
  gap: 8px;
}
.repair-photo-link {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.repair-photo-link img {
  width: 82px;
  height: 66px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #cddfeb;
}
.repair-photo-video {
  width: 132px;
  max-width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #cddfeb;
  background: #0f172a;
}
.repair-video-link {
  grid-template-columns: 132px minmax(0, 1fr);
}
.repair-photo-link span {
  color: #425a74;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.25;
}
.quote-action-box {
  margin-top: 12px;
  border: 1px solid rgba(32,217,242,.22);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(32,217,242,.07);
  display: grid;
  gap: 8px;
}
.quote-action-box.accepted {
  border-color: rgba(25,217,140,.3);
  background: rgba(25,217,140,.08);
}
.quote-action-box.refused,
.quote-action-box.cancelled {
  border-color: rgba(255,92,120,.3);
  background: rgba(255,92,120,.08);
}
.quote-action-box strong { color: #f4f8ff; }
.quote-action-box span { color: var(--muted); line-height: 1.4; }
.quote-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
}
.portal-modal {
  width: min(560px, 100%);
  border: 1px solid rgba(32,217,242,.22);
  border-radius: 8px;
  padding: 16px;
  background: #0b1322;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(0,0,0,.55);
}
.portal-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.portal-modal-head h2 { margin: 2px 0 0; font-size: 20px; }
.quote-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #c7d2e3;
  font-weight: 800;
  line-height: 1.45;
}
.quote-consent input { margin-top: 3px; }
.pill { display: inline-flex; align-items: center; min-height: 24px; border-radius: 7px; padding: 0 9px; font-size: 12px; font-weight: 850; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; white-space: nowrap; }
.pill.ready, .pill.paid { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pill.irreparable { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.pill.waiting_client, .pill.overdue { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.pill.waiting_part { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.pill.repairing, .pill.accepted { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.pill.delivered, .pill.cancelled, .pill.refused, .pill.expired { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.node { height: 7px; border-radius: 999px; background: #e2e8f0; }
.node.done { background: var(--green); }
.meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.ticket-doc-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ticket-doc-chip {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 2px 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.ticket-doc-chip strong,
.ticket-doc-chip em,
.ticket-doc-chip small {
  font-style: normal;
}
.ticket-doc-chip small,
.ticket-doc-chip b {
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 5px;
  background: rgba(255,255,255,.72);
  color: inherit;
  font-size: 9px;
}
.ticket-doc-chip.quote { background: #f3e8ff; color: #6d28d9; border-color: #e9d5ff; }
.ticket-doc-chip.invoice { background: #e0f7fb; color: #0e7490; border-color: #a5f3fc; }
.ticket-doc-chip.invoice.sent,
.ticket-doc-chip.invoice.overdue { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ticket-doc-chip.invoice.paid,
.ticket-doc-chip.quote.accepted { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ticket-doc-chip.quote.refused,
.ticket-doc-chip.quote.expired,
.ticket-doc-chip.quote.cancelled,
.ticket-doc-chip.invoice.cancelled { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc-total { font-size: 20px; font-weight: 850; }
.event { border-left: 4px solid #cbd5e1; }
.event.client_info { border-left-color: var(--green); background: #f0fdf4; }
.event.status { border-left-color: var(--blue); }
.event strong { display: block; font-size: 13px; }
.event p { margin: 4px 0 0; color: #334155; }
.empty { border: 1px dashed #cbd5e1; border-radius: 8px; padding: 14px; color: var(--muted); text-align: center; background: #f8fafc; }
.company { font-size: 12px; color: var(--muted); line-height: 1.6; }
.client-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; padding: 2px 4px 0; }

@media (max-width: 900px) {
  .hero-inner, .repair-head, .doc-head, .section-head { flex-direction: column; align-items: center; text-align: center; }
  .top-actions { justify-content: center; width: 100%; }
  .auth-grid, .doc-grid { grid-template-columns: 1fr; }
  .auth-grid > .panel:nth-child(2) { order: -1; }
  .auth-grid > .panel { width: min(100%, 460px); justify-self: center; }
  .intro-panel { min-height: 0; text-align: center; align-content: start; }
  .step { text-align: left; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hero { padding: 18px 12px 54px; }
  .shell { margin-top: -34px; padding: 0 12px 22px; }
  .two, .stats { grid-template-columns: 1fr; }
  .progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .btn { width: 100%; }
  .tabs { grid-template-columns: 1fr; }
  .client-footer { flex-direction: column; align-items: center; text-align: center; }
}

/* Atelier Electro client portal refresh */
:root {
  --bg: #060a12;
  --panel: #0e1624;
  --ink: #edf5ff;
  --muted: #91a0b8;
  --border: #213149;
  --dark: #080f1d;
  --yellow: #20d9f2;
  --blue: #4b8dff;
  --green: #19d98c;
  --red: #ff5c78;
  --pink: #ef4bd8;
}

body {
  background:
    linear-gradient(rgba(32,217,242,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,217,242,.04) 1px, transparent 1px),
    #060a12;
  background-size: 58px 58px, 58px 58px, auto;
  color: var(--ink);
}

.hero {
  background: linear-gradient(180deg, rgba(8,15,29,.98), rgba(8,15,29,.82));
  border-bottom: 1px solid rgba(32,217,242,.14);
  padding: 28px 18px 68px;
}
.hero::before {
  display: none !important;
}
.hero::after { display: none; }
.hero-inner { padding-top: 0; }
.hero-inner > div:first-child { min-width: 0; }
h1 { font-size: 44px; }
.hero p { color: #c7d2e3; }
.shell { margin-top: -48px; }
.panel, .stat, .repair, .doc, .event, .step {
  background: rgba(14,22,36,.96);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
}
.intro-panel h2, .section-head h2, .repair h3, .doc h3 { color: #f4f8ff; }
.muted, .meta, .company, .client-footer { color: var(--muted); }
.company {
  text-align: center !important;
  line-height: 1.75;
  display: block;
}
.company strong { color: #f4f8ff; }
.portal-auth-company { margin-top: 14px; }
.client-footer {
  justify-content: center !important;
  text-align: center !important;
  align-items: center;
  flex-wrap: wrap;
}
.client-footer span { flex: 0 1 100%; }
.support-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items: start;
  border-color: rgba(32,217,242,.34);
  background: linear-gradient(135deg, rgba(32,217,242,.12), rgba(14,22,36,.96) 42%, rgba(239,75,216,.08));
}
.eyebrow {
  display: block;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.support-cta h2 {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.2;
  color: #f4f8ff;
}
.support-cta p { margin-bottom: 14px; }
.atelier-presence {
  margin-top: 14px;
  display: inline-grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  max-width: 440px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(8,17,31,.5);
}
.presence-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #64748b;
}
.atelier-presence.online .presence-dot {
  background: var(--green);
  box-shadow: 0 0 18px rgba(25,217,140,.7);
}
.atelier-presence.offline .presence-dot {
  background: #64748b;
}
.atelier-presence strong {
  display: block;
  color: #f4f8ff;
  font-size: 13px;
}
.atelier-presence small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}
.support-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.support-tags span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(32,217,242,.22);
  border-radius: 8px;
  padding: 0 10px;
  color: #bfefff;
  background: rgba(32,217,242,.07);
  font-size: 12px;
  font-weight: 800;
}
.payment-due {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 16px;
  align-items: stretch;
  border-color: rgba(25,217,140,.34);
  background: linear-gradient(135deg, rgba(25,217,140,.12), rgba(14,22,36,.96) 44%, rgba(32,217,242,.08));
}
.payment-due h2 {
  margin: 0 0 8px;
  color: #f4f8ff;
  font-size: 28px;
}
.payment-methods {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.payment-methods span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(25,217,140,.24);
  border-radius: 8px;
  padding: 0 10px;
  color: #9ff4cb;
  background: rgba(25,217,140,.08);
  font-size: 12px;
  font-weight: 850;
}
.payment-bank {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(8,17,31,.72);
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: center;
}
.payment-bank strong { color: #f4f8ff; }
.payment-bank p {
  margin: 0;
  display: grid;
  gap: 3px;
}
.payment-bank span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.payment-bank b {
  color: #eaf7ff;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.bank-copy { width: max-content; }
.invoice-payment-prompt {
  margin-top: 12px;
  border: 1px solid rgba(25,217,140,.28);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: rgba(25,217,140,.08);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.invoice-payment-prompt strong {
  color: #dfffee;
  display: block;
  margin-bottom: 3px;
}
.invoice-payment-prompt span {
  color: var(--muted);
  font-size: 13px;
}
.invoice-bank-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.invoice-bank-mini p {
  margin: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  padding: 9px;
}
.invoice-bank-mini p:nth-child(2) { grid-column: 1 / -1; }
.invoice-bank-mini span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.invoice-bank-mini b {
  display: block;
  color: #eaf7ff;
  overflow-wrap: anywhere;
}
.portal-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  border-radius: 8px;
  background: #102039;
  color: #fff;
  padding: 11px 14px;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
}
.portal-toast.error {
  background: #7f1d1d;
  border: 1px solid #ef4444;
  color: #fff;
}
.client-planning {
  border-color: rgba(246,178,61,.3);
  background: linear-gradient(135deg, rgba(246,178,61,.12), rgba(14,22,36,.96) 48%, rgba(32,217,242,.08));
}
.planning-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.planning-client-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(8,17,31,.64);
  display: grid;
  gap: 8px;
}
.planning-client-card h3 {
  margin: 8px 0 2px;
  color: #f4f8ff;
  font-size: 16px;
}
.planning-client-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}
.planning-client-card > strong {
  color: #ffd28c;
  font-size: 15px;
}
.planning-client-details {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 8px;
}
.planning-contact-note {
  margin: 12px 0 0;
}
.planning-contact-note a {
  color: #bff5ff;
  font-weight: 900;
}
.support-cta-form {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(8,17,31,.72);
}
.support-confirm {
  border: 1px solid rgba(25,217,140,.34);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  color: #9ff4cb;
  background: rgba(25,217,140,.1);
  font-weight: 800;
  line-height: 1.4;
}
.support-confirm.error {
  border-color: rgba(255,92,120,.36);
  color: #ff9aac;
  background: rgba(255,92,120,.1);
}
.support-reply-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 7px;
  padding: 0 8px;
  color: #9ff4cb;
  background: rgba(25,217,140,.12);
  border: 1px solid rgba(25,217,140,.28);
  font-size: 12px;
  font-weight: 900;
}
.support-cta-form .btn[disabled] {
  opacity: .68;
  cursor: wait;
}
.support-card-live.answered {
  border-color: rgba(25,217,140,.26);
}
.support-message-preview {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(8,17,31,.5);
  display: grid;
  gap: 5px;
}
.support-message-preview strong {
  color: #bff5ff;
  font-size: 12px;
  text-transform: uppercase;
}
.support-message-preview p {
  margin: 0;
  color: #eaf7ff;
  line-height: 1.45;
}
.support-message-preview span {
  color: var(--muted);
  font-size: 12px;
}
.doc-panel {
  scroll-margin-top: 18px;
}
.step { background: rgba(255,255,255,.03); }
.step span {
  background: var(--yellow);
  color: #06101c;
  box-shadow: 0 0 20px rgba(32,217,242,.18);
}
.tabs { background: #08111f; border: 1px solid var(--border); }
.tabs button { color: #a9b7ca; }
.tabs button.active {
  background: var(--yellow);
  color: #06101c;
  box-shadow: 0 0 20px rgba(32,217,242,.22);
}
.field label { color: #b9c5d7; }
.field input {
  background: #08111f;
  color: var(--ink);
  border-color: #263852;
}
.field input:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(32,217,242,.16);
}
.btn {
  background: #0b1526;
  color: #e8f1ff;
  border-color: #2a3b55;
}
.btn.primary {
  background: var(--yellow);
  color: #06101c;
  border-color: var(--yellow);
}
.btn.green { background: var(--green); border-color: var(--green); color: #04130d; }
.btn.ghost { color: #e8f1ff; border-color: rgba(255,255,255,.24); }
.stat strong, .doc-total { color: #f8fbff; }
.empty {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
}
.repair.highlight, .doc.highlight {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(32,217,242,.14);
}
.progress .node { background: #24344c; }
.progress .node.done { background: var(--green); box-shadow: 0 0 16px rgba(25,217,140,.22); }
.event { border-left-color: var(--yellow); }
.event p { color: #c9d3e2; }
.pill { background: rgba(75,141,255,.16); color: #9cc2ff; border-color: rgba(75,141,255,.3); }
.pill.ready, .pill.paid { background: rgba(25,217,140,.14); color: #7ff0bd; border-color: rgba(25,217,140,.28); }
.pill.irreparable { background: rgba(255,92,120,.16); color: #ffa7b6; border-color: rgba(255,92,120,.32); }
.pill.waiting_client, .pill.overdue { background: rgba(255,92,120,.14); color: #ff9aac; border-color: rgba(255,92,120,.28); }
.pill.waiting_part { background: rgba(246,178,61,.16); color: #ffd28c; border-color: rgba(246,178,61,.32); }
.pill.repairing, .pill.accepted { background: rgba(239,75,216,.14); color: #ffc0f5; border-color: rgba(239,75,216,.28); }
.pill.delivered, .pill.cancelled, .pill.refused, .pill.expired { background: rgba(145,160,184,.14); color: #c9d3e2; border-color: rgba(145,160,184,.25); }
.ticket-doc-chip {
  background: rgba(145,160,184,.14);
  color: #c9d3e2;
  border-color: rgba(145,160,184,.25);
}
.ticket-doc-chip.quote { background: rgba(184,108,255,.16); color: #d8c0ff; border-color: rgba(184,108,255,.3); }
.ticket-doc-chip.invoice { background: rgba(32,217,242,.13); color: #9cf5ff; border-color: rgba(32,217,242,.3); }
.ticket-doc-chip.invoice.sent,
.ticket-doc-chip.invoice.overdue { background: rgba(246,178,61,.16); color: #ffd28c; border-color: rgba(246,178,61,.32); }
.ticket-doc-chip.invoice.paid,
.ticket-doc-chip.quote.accepted { background: rgba(25,217,140,.14); color: #7ff0bd; border-color: rgba(25,217,140,.28); }
.ticket-doc-chip.quote.refused,
.ticket-doc-chip.quote.expired,
.ticket-doc-chip.quote.cancelled,
.ticket-doc-chip.invoice.cancelled { background: rgba(255,92,120,.14); color: #ff9aac; border-color: rgba(255,92,120,.28); }
.ticket-doc-chip small,
.ticket-doc-chip b {
  background: rgba(255,255,255,.1);
}

@media (max-width: 900px) {
  h1 { font-size: 38px; }
  .support-cta, .payment-due, .client-command { grid-template-columns: 1fr; }
  .client-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-grid > .panel:nth-child(2) { order: -1; }
  .auth-grid > .panel { width: min(100%, 460px); justify-self: center; }
}

@media (max-width: 560px) {
  h1 { font-size: 32px; }
  .hero-inner { padding-top: 0; }
  .hero { padding-top: 18px; }
  .client-menu { grid-template-columns: 1fr; }
  .client-menu-item { min-height: 78px; }
  .latest-live-card { padding: 10px; }
}

/* Client portal: light, simple and reassuring */
:root {
  --bg: #eef7ff;
  --panel: #ffffff;
  --ink: #132238;
  --muted: #64748b;
  --border: #cfe0ef;
  --dark: #0f2342;
  --yellow: #f59e0b;
  --blue: #3b82f6;
  --green: #16a34a;
  --red: #ef4444;
  --cyan: #12c8df;
  --pink: #ec4899;
}
body {
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.96)),
    radial-gradient(circle at 0% 0%, rgba(18,200,223,.24), transparent 30%),
    radial-gradient(circle at 100% 8%, rgba(236,72,153,.12), transparent 32%),
    #eef7ff;
  color: var(--ink);
}
.hero {
  background:
    linear-gradient(135deg, #ffffff 0%, #e8f8ff 48%, #f9f0ff 100%);
  color: var(--ink);
  border-bottom: 1px solid rgba(148,163,184,.22);
  padding-bottom: 58px;
}
.hero p {
  color: #52657f;
}
.hero .btn.ghost {
  background: #ffffff;
  color: #17314f;
  border-color: #cbddea;
}
.hero .btn.ghost:hover {
  border-color: var(--cyan);
}
.shell {
  margin-top: -34px;
}
.panel,
.stat,
.repair,
.doc,
.event,
.step,
.latest-live-card,
.support-cta-form,
.payment-bank,
.support-message-preview,
.quote-action-box {
  background: rgba(255,255,255,.96);
  color: var(--ink);
  border-color: rgba(148,163,184,.24);
  box-shadow: 0 18px 45px rgba(34,74,116,.12);
}
.intro-panel,
.support-cta,
.payment-due,
.client-command {
  border-color: rgba(18,200,223,.26);
}
.intro-panel {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,250,255,.96));
}
.intro-panel h2,
.section-head h2,
.repair h3,
.doc h3,
.command-copy h2,
.support-cta h2,
.payment-due h2,
.company strong,
.quote-action-box strong,
.latest-live-card strong,
.support-message-preview strong {
  color: #102039;
}
.muted,
.meta,
.company,
.client-footer,
.quote-action-box span,
.support-message-preview span {
  color: var(--muted);
}
.step {
  background: #f8fbff;
}
.step span {
  background: linear-gradient(135deg, #20d9f2, #60a5fa);
  color: #061524;
  box-shadow: none;
}
.tabs {
  background: #eaf3fb;
  border-color: #cfe0ef;
}
.tabs button {
  color: #64748b;
}
.tabs button.active {
  background: #ffffff;
  color: #102039;
  box-shadow: 0 8px 18px rgba(34,74,116,.08);
}
.field label {
  color: #425a75;
}
.field input,
.support-cta textarea,
.support-cta select,
.support-cta input {
  background: #ffffff;
  color: #132238;
  border-color: #cbddea;
}
.field input:focus,
.support-cta textarea:focus,
.support-cta select:focus,
.support-cta input:focus {
  border-color: #20c7dd;
  box-shadow: 0 0 0 3px rgba(32,199,221,.16);
}
.btn {
  background: #ffffff;
  color: #17314f;
  border-color: #cbddea;
  box-shadow: 0 6px 16px rgba(30,64,105,.06);
}
.btn.primary {
  background: linear-gradient(135deg, #20d9f2, #60a5fa);
  color: #061524;
  border-color: transparent;
}
.btn.green {
  background: #22c55e;
  border-color: #22c55e;
  color: #052e16;
}
.btn.blue {
  background: linear-gradient(135deg, #20d9f2, #60a5fa);
  border-color: transparent;
  color: #061524;
}
.doc-actions { align-items: center; }
.support-cta {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,253,255,.96)),
    radial-gradient(circle at 100% 0%, rgba(236,72,153,.12), transparent 36%);
}
.support-tags span {
  background: #e0f7fb;
  border-color: #bae6fd;
  color: #075985;
}
.atelier-presence {
  background: #f8fbff;
  border-color: #d8e6f2;
}
.atelier-presence strong {
  color: #102039;
}
.payment-due {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,253,244,.96));
}
.payment-methods span {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}
.payment-bank {
  background: #f8fbff;
}
.payment-bank strong,
.payment-bank b {
  color: #102039;
}
.invoice-payment-prompt {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.invoice-payment-prompt strong,
.invoice-bank-mini b {
  color: #102039;
}
.invoice-bank-mini p {
  background: #ffffff;
  border-color: #d8e6f2;
}
.client-planning {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,237,.96));
}
.planning-client-card {
  background: #ffffff;
  border-color: #d7e6f2;
  box-shadow: 0 8px 22px rgba(34,74,116,.06);
}
.planning-client-card h3 {
  color: #102039;
}
.planning-client-card > strong {
  color: #9a3412;
}
.planning-client-card p {
  color: #425a75;
}
.planning-client-details {
  border-color: #e2edf6;
}
.planning-contact-note a {
  color: #0369a1;
}
.client-menu-item {
  background: #ffffff;
  border-color: #d7e6f2;
  color: #102039;
  box-shadow: 0 10px 25px rgba(34,74,116,.08);
}
.client-menu-item strong {
  color: #102039;
}
.client-menu-item small {
  color: var(--muted);
}
.client-menu-item.hot { background: #e0f7fb; border-color: #a5f3fc; }
.client-menu-item.warn { background: #fff7ed; border-color: #fed7aa; }
.client-menu-item.live { background: #ecfdf5; border-color: #bbf7d0; }
.client-menu-item:nth-child(2) { background: #eff6ff; border-color: #bfdbfe; }
.latest-live-card,
.support-message-preview {
  background: #f8fbff;
}
.latest-live-card p,
.support-message-preview p,
.repair-update p,
.event p {
  color: #30445f;
}
.latest-live-card a {
  color: #0f766e;
}
.live-chip {
  background: #e0f7fb;
  border-color: #bae6fd;
  color: #075985;
}
.repair-update,
.quote-action-box {
  background: #eefbff;
  border-color: #bae6fd;
}
.repair-update.waiting-part {
  background: #fff7ed;
  border-color: #fed7aa;
}
.repair-update strong {
  color: #075985;
}
.repair-update.waiting-part strong,
.repair-update.waiting-part span {
  color: #9a3412;
}
.repair-update.waiting-part p {
  color: #7c2d12;
}
.repair-update.planning-update {
  background: #fff7ed;
  border-color: #fed7aa;
}
.repair-update.planning-update strong,
.repair-update.planning-update span {
  color: #9a3412;
}
.repair-update.planning-update p {
  color: #7c2d12;
}
.repair-update.recovered {
  background: #ecfdf5;
  border-color: #bbf7d0;
}
.repair-update.recovered strong,
.repair-update.recovered span {
  color: #166534;
}
.quote-action-box.accepted,
.support-confirm {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
}
.quote-action-box.refused,
.quote-action-box.cancelled,
.support-confirm.error {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}
.progress .node {
  background: #dbeafe;
}
.progress .node.done {
  background: #22c55e;
  box-shadow: none;
}
.pill {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.pill.quote-accepted,
.pill.ready,
.pill.paid {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.pill.irreparable {
  background: #ffe4e6;
  color: #be123c;
  border-color: #fecdd3;
}
.pill.waiting_client,
.pill.waiting_part,
.pill.overdue {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}
.pill.repairing,
.pill.accepted {
  background: #f3e8ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}
.pill.delivered,
.pill.cancelled,
.pill.refused,
.pill.expired {
  background: #f1f5f9;
  color: #475569;
  border-color: #dbe3ee;
}
.ticket-doc-chip {
  background: #f8fafc;
  color: #475569;
  border-color: #dbe3ee;
}
.ticket-doc-chip.quote { background: #f3e8ff; color: #6d28d9; border-color: #e9d5ff; }
.ticket-doc-chip.invoice { background: #e0f7fb; color: #0e7490; border-color: #a5f3fc; }
.ticket-doc-chip.invoice.sent,
.ticket-doc-chip.invoice.overdue { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.ticket-doc-chip.invoice.paid,
.ticket-doc-chip.quote.accepted { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ticket-doc-chip.quote.refused,
.ticket-doc-chip.quote.expired,
.ticket-doc-chip.quote.cancelled,
.ticket-doc-chip.invoice.cancelled { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
.ticket-doc-chip small,
.ticket-doc-chip b {
  background: rgba(255,255,255,.72);
}
.client-footer {
  color: #64748b;
}
.empty {
  background: rgba(255,255,255,.8);
  border-color: #cbddea;
  color: #64748b;
}
.stats .stat {
  position: relative;
  overflow: hidden;
  min-height: 98px;
  padding: 16px 16px 14px 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,251,255,.98));
  border-color: #c9ddeb;
}
.stats .stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: #20d9f2;
}
.stats .stat:nth-child(2)::before { background: #3b82f6; }
.stats .stat:nth-child(3)::before { background: #8b5cf6; }
.stats .stat:nth-child(4)::before { background: #f59e0b; }
.stats .stat:nth-child(5)::before { background: #16a34a; }
.stats .stat:nth-child(6)::before { background: #0ea5e9; }
.stats .stat span {
  color: #435a73;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.stats .stat strong {
  color: #071b36;
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1;
  font-weight: 900;
  text-shadow: none;
}

@media (max-width: 900px) {
  .hero {
    padding-bottom: 48px;
  }
  .shell {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Balanced client portal: calmer than pure white, still simple for clients */
:root {
  --bg: #dce9f3;
  --panel: #f7fbff;
  --ink: #102036;
  --muted: #556b84;
  --border: #b9ccdc;
  --dark: #10243d;
  --yellow: #f2a51d;
  --blue: #2f6fd6;
  --green: #128052;
  --red: #d93655;
  --cyan: #0aaec4;
  --pink: #cf3f97;
}
body {
  background:
    linear-gradient(180deg, rgba(224,237,247,.96), rgba(215,228,239,.98)),
    #dce9f3;
  color: var(--ink);
}
.hero {
  background: linear-gradient(135deg, #d4e9f5 0%, #eef6fb 52%, #eadff0 100%);
  border-bottom-color: rgba(84,108,132,.2);
}
.hero p { color: #405975; }
.panel,
.stat,
.repair,
.doc,
.event,
.step,
.latest-live-card,
.support-cta-form,
.payment-bank,
.support-message-preview,
.quote-action-box {
  background: rgba(247,251,255,.97);
  border-color: rgba(123,151,176,.32);
  box-shadow: 0 16px 36px rgba(35,67,96,.12);
}
.client-command,
.support-hub,
.payment-due {
  background: linear-gradient(135deg, rgba(244,250,255,.98), rgba(226,240,248,.98));
  border-color: rgba(10,174,196,.28);
}
.client-command.hot { border-color: rgba(10,174,196,.42); }
.client-command.warn,
.payment-due { border-color: rgba(242,165,29,.34); }
.client-command.live { border-color: rgba(18,128,82,.32); }
.command-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}
.command-copy h2 { font-size: clamp(22px, 3vw, 32px); }
.command-main-action { justify-self: start; }
.client-stats .stat { min-height: 82px; }
.support-hub {
  display: grid;
  gap: 14px;
  scroll-margin-top: 16px;
}
.support-hub-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.support-hub-head h2 {
  margin: 0 0 6px;
  color: #102039;
  font-size: 24px;
}
.support-hub-head p { margin-bottom: 0; max-width: 700px; }
.support-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 420px);
  gap: 14px;
  align-items: start;
}
.support-access-locked {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(16, 90, 72, .2);
  background: rgba(238, 248, 244, .86);
  border-radius: 8px;
}
.support-access-locked > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #176c58;
  background: #fff;
  border: 1px solid rgba(16, 90, 72, .16);
  border-radius: 50%;
}
.support-access-locked strong { display: block; color: #102039; }
.support-access-locked p { margin: 6px 0 12px; color: #52647a; line-height: 1.5; }
.support-access-locked .btn { width: 100%; justify-content: center; }
.lc-access-locked a { color: inherit; font-weight: 800; text-decoration: underline; }
.support-thread-list {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.section-head.compact {
  margin-bottom: 4px;
}
.section-head.compact h3 {
  margin: 0;
  font-size: 16px;
}
.support-mini-head {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}
.support-mini-head strong {
  color: #102039;
  font-size: 18px;
}
.support-mini-head span {
  color: var(--muted);
  font-size: 13px;
}
.field textarea,
.field select {
  width: 100%;
  border: 1px solid #b9ccdc;
  border-radius: 8px;
  padding: 10px 11px;
  background: #f9fcff;
  color: #132238;
  outline: none;
}
.field textarea { resize: vertical; min-height: 112px; }
.field textarea:focus,
.field select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(10,174,196,.16);
}
.support-card-live {
  display: grid;
  gap: 10px;
}
.support-card-actions {
  display: flex;
  justify-content: flex-end;
}
.support-card-live.answered {
  border-color: rgba(18,128,82,.38);
  background: #f0fbf6;
}
.support-thread-modal {
  width: min(760px, 100%);
}
.support-thread-body {
  display: grid;
  gap: 12px;
}
.support-thread-messages {
  max-height: min(52vh, 520px);
  overflow: auto;
  display: grid;
  gap: 10px;
  padding-right: 4px;
}
.support-bubble {
  width: min(88%, 560px);
  border: 1px solid rgba(123,151,176,.32);
  border-radius: 8px;
  padding: 10px 12px;
  background: #eef6fb;
}
.support-bubble.admin {
  justify-self: start;
  background: #e8f8f5;
  border-color: rgba(18,128,82,.28);
}
.support-bubble.client {
  justify-self: end;
  background: #eef3ff;
  border-color: rgba(47,111,214,.26);
}
.support-bubble strong {
  display: block;
  color: #344b64;
  font-size: 12px;
  margin-bottom: 5px;
}
.support-bubble p {
  margin: 0;
  color: #102036;
  line-height: 1.45;
}
.support-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.support-attachment {
  width: 118px;
  border: 1px solid rgba(123,151,176,.34);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  color: inherit;
  overflow: hidden;
  text-decoration: none;
}
.support-attachment img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e2e8f0;
}
.support-attachment span {
  display: block;
  padding: 6px 7px;
  color: #64748b;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-reply-form {
  border-top: 1px solid rgba(123,151,176,.26);
  padding-top: 12px;
}
.client-menu-item {
  background: #f8fcff;
}
.client-menu-item.hot { background: #dff6fa; }
.client-menu-item.warn { background: #fff3df; }
.client-menu-item.live { background: #e8f8f1; }
.latest-live-card,
.support-message-preview,
.payment-bank,
.atelier-presence {
  background: rgba(238,246,251,.9);
}
.empty {
  background: rgba(238,246,251,.82);
  border-color: rgba(123,151,176,.32);
}
.portal-modal {
  background: #f7fbff;
  color: #102036;
  border-color: rgba(123,151,176,.38);
}
.portal-modal-head { border-bottom-color: rgba(123,151,176,.28); }
.portal-modal-backdrop { background: rgba(15, 32, 54, .56); }

@media (max-width: 900px) {
  .support-hub-head,
  .support-hub-grid {
    grid-template-columns: 1fr;
  }
  .support-hub-head {
    display: grid;
    text-align: center;
    justify-items: center;
  }
  .command-main-action {
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .client-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .support-card-actions .btn {
    width: 100%;
  }
  .support-bubble {
    width: 100%;
  }
}

.client-quick-access {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.client-quick-card,
.warranty-card,
.store-client-card {
  border: 1px solid rgba(0, 160, 220, .22);
  background: linear-gradient(135deg, rgba(0, 210, 255, .09), rgba(68, 94, 255, .06));
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(7, 18, 37, .08);
}

.client-quick-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
}

.client-quick-card strong { font-size: 1.05rem; }
.client-quick-card span { color: var(--muted); text-align: right; }

.warranty-grid,
.store-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.warranty-card {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.warranty-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.warranty-card dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.warranty-card dd {
  margin: 2px 0 0;
  font-weight: 900;
}

.store-client-card {
  overflow: hidden;
  cursor: pointer;
}

.store-client-card img,
.store-client-image-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: linear-gradient(135deg, #dff6ff, #f7edff);
  display: grid;
  place-items: center;
  color: #31506e;
  font-weight: 900;
}

.store-client-body {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.store-price {
  font-size: 1.6rem;
  color: var(--text);
}

.store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.warranty-inline {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .07);
}

.warranty-inline.expired {
  border-color: rgba(148, 163, 184, .35);
  background: rgba(148, 163, 184, .07);
}

@media (max-width: 720px) {
  .client-quick-access,
  .warranty-card dl {
    grid-template-columns: 1fr;
  }
  .client-quick-card {
    flex-direction: column;
  }
  .client-quick-card span {
    text-align: left;
  }
}

.client-page-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
  border: 1px solid #cfe0ec;
  border-radius: 18px;
  background: rgba(248, 252, 255, .94);
  box-shadow: 0 14px 34px rgba(34, 74, 116, .10);
  scrollbar-width: thin;
}

.client-page-tabs a {
  flex: 0 0 auto;
  min-width: 128px;
  border: 1px solid #d6e5f0;
  border-radius: 14px;
  padding: 11px 13px;
  background: #fff;
  color: #102039;
  text-decoration: none;
  display: grid;
  gap: 2px;
}

.client-page-tabs a span {
  font-weight: 900;
}

.client-page-tabs a small {
  color: #667d96;
  font-weight: 800;
}

.client-page-tabs a.active {
  border-color: rgba(26, 192, 222, .75);
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: #061326;
}

.client-page-tabs a.active small {
  color: rgba(6, 19, 38, .82);
}

.client-page-tabs a.hot:not(.active) { background: #e0f7fb; }
.client-page-tabs a.warn:not(.active) { background: #fff7ed; }
.client-page-tabs a.live:not(.active) { background: #ecfdf5; }

.client-quick-card.legal {
  border-color: #c7d2fe;
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
}

.client-service-banner {
  border: 1px solid #a5f3fc;
  border-radius: 20px;
  padding: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, .22), transparent 34%),
    linear-gradient(135deg, #ffffff, #edf8ff 58%, #f5f3ff);
  box-shadow: 0 18px 42px rgba(34, 74, 116, .12);
}

.service-banner-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.service-banner-head h2 {
  margin: 3px 0 6px;
  color: #102039;
  font-size: clamp(22px, 3vw, 34px);
}

.service-banner-head p {
  margin: 0;
  color: #425a74;
  line-height: 1.5;
}

.service-price-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 10px 13px;
  background: #102039;
  color: #fff;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .16);
}

.client-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-service-offer {
  border: 1px solid #d7e5f1;
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  padding: 15px;
  display: grid;
  gap: 10px;
}

.client-service-offer h3 {
  margin: 0;
  color: #102039;
  font-size: 22px;
}

.client-service-offer p {
  margin: 0;
  color: #425a74;
  line-height: 1.45;
}

.client-service-offer ul {
  margin: 0;
  padding-left: 18px;
  color: #17365d;
  font-weight: 800;
  line-height: 1.55;
}

.service-badge {
  width: fit-content;
  border-radius: 999px;
  padding: 6px 9px;
  background: #ecfeff;
  color: #0e7490;
  border: 1px solid #a5f3fc;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.service-offer-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.service-offer-foot strong {
  font-size: 24px;
  color: #102039;
}

.service-small-note {
  color: #64748b;
  font-weight: 800;
}

.service-reservation-status,
.service-reservation-row {
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 10px 12px;
  background: #eff6ff;
  display: grid;
  gap: 3px;
}

.service-reservation-status.accepted,
.service-reservation-row.accepted {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
}

.service-reservation-status.requested,
.service-reservation-row.requested {
  border-color: #fde68a;
  background: #fffbeb;
  color: #713f12;
}

.service-reservation-status strong,
.service-reservation-row strong {
  color: inherit;
}

.service-reservation-status span,
.service-reservation-row span,
.service-reservation-row small {
  color: inherit;
  opacity: .82;
  font-weight: 800;
}

.service-reservation-list {
  display: grid;
  gap: 8px;
}

.service-modal .support-confirm {
  border-color: #a5f3fc;
  background: #ecfeff;
  color: #155e75;
}

.client-legal-page {
  display: grid;
  gap: 14px;
}

.client-legal-hero {
  border: 1px solid #cfe0ec;
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .18), transparent 34%),
    linear-gradient(135deg, #ffffff, #eef8ff);
}

.client-legal-hero.rules {
  background:
    radial-gradient(circle at 12% 0%, rgba(251, 191, 36, .22), transparent 34%),
    linear-gradient(135deg, #fff, #fff7ed);
}

.client-legal-hero h2 {
  margin: 4px 0 8px;
  font-size: clamp(26px, 3vw, 38px);
}

.client-legal-hero p {
  max-width: 860px;
  color: #425a74;
  font-size: 16px;
  line-height: 1.55;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legal-meta span {
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #fff;
  padding: 8px 11px;
  color: #17365d;
  font-weight: 900;
}

.legal-alert {
  border: 1px solid #bae6fd;
  border-radius: 16px;
  padding: 14px;
  background: #ecfeff;
  color: #164e63;
}

.legal-alert.danger {
  border-color: #fecaca;
  background: #fff1f2;
  color: #7f1d1d;
}

.legal-alert strong {
  display: block;
  margin-bottom: 5px;
  font-size: 17px;
}

.legal-alert p {
  margin: 0;
  line-height: 1.55;
}

.client-legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.client-legal-card {
  border: 1px solid #d7e5f1;
  border-radius: 16px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(34, 74, 116, .08);
}

.client-legal-card h3 {
  margin-bottom: 8px;
  color: #102039;
  font-size: 18px;
}

.client-legal-card p {
  margin: 0;
  color: #425a74;
  line-height: 1.58;
}

.client-legal-card.danger {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fff, #fff1f2);
}

.client-legal-card.warning {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fff, #fffbeb);
}

.client-legal-card.info {
  border-color: #bae6fd;
  background: linear-gradient(135deg, #fff, #ecfeff);
}

.client-legal-card.success {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #fff, #f0fdf4);
}

.terms-change-box {
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgba(59, 130, 246, .16), transparent 34%),
    linear-gradient(135deg, #f8fbff, #eef6ff);
}

.terms-change-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.terms-change-head span {
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #fff;
  color: #1e3a8a;
  padding: 8px 11px;
  font-weight: 900;
  font-size: 13px;
}

.terms-change-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.terms-change-grid article {
  border: 1px solid #d8e6f2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  padding: 12px;
}

.terms-change-grid article.after {
  border-color: #bae6fd;
  background: #ecfeff;
}

.terms-change-grid article.warning {
  border-color: #fed7aa;
  background: #fff7ed;
}

.terms-change-grid article.proof {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.terms-change-grid strong {
  display: block;
  color: #102039;
  margin-bottom: 5px;
}

.terms-change-grid p {
  margin: 0;
  color: #425a74;
  line-height: 1.5;
  font-size: 14px;
}

.terms-update-shell {
  display: grid;
  gap: 14px;
}

.terms-update-hero {
  border: 1px solid #bae6fd;
  border-radius: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 211, 238, .22), transparent 34%),
    linear-gradient(135deg, #ffffff, #eef8ff);
}

.terms-update-hero > span {
  color: #0891b2;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
}

.terms-update-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 44px);
}

.terms-update-hero p {
  max-width: 920px;
  color: #425a74;
  line-height: 1.58;
  font-size: 16px;
}

.terms-update-form {
  gap: 12px;
}

.terms-update-scroll {
  max-height: min(58vh, 640px);
  overflow: auto;
  border: 1px solid #d8e6f2;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 14px;
  scrollbar-width: thin;
}

.terms-update-scroll.read {
  border-color: #86efac;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

.terms-update-scroll h3 {
  margin: 4px 0 0;
  color: #102039;
  font-size: 20px;
}

.terms-update-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#termsUpdateSubmit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.client-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 14px;
}

.compact-list .repair {
  box-shadow: none;
}

.store-client-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 420px));
  align-items: start;
}

.store-client-card {
  max-width: 420px;
}

.store-client-card.reserved {
  border-color: rgba(245, 158, 11, .42);
  background: linear-gradient(135deg, rgba(255, 247, 237, .96), rgba(240, 249, 255, .96));
}

.store-client-card img,
.store-client-image-empty {
  aspect-ratio: 4 / 3;
  max-height: 230px;
}

.store-client-card.no-image .store-client-image-empty {
  min-height: 150px;
  max-height: 190px;
}

.store-reserved-note {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #9a3412;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
}

.store-bank-mini,
.store-bank-modal {
  display: grid;
  gap: 7px;
}

.store-bank-mini p,
.store-bank-modal p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.store-bank-mini b,
.store-bank-modal b {
  text-align: right;
  overflow-wrap: anywhere;
}

.store-bank-modal {
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  padding: 12px;
  background: #f8fbff;
}

.store-actions .btn[disabled] {
  opacity: .58;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .client-overview-grid {
    grid-template-columns: 1fr;
  }

  .client-service-grid {
    grid-template-columns: 1fr;
  }

  .service-banner-head,
  .service-offer-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .client-legal-grid {
    grid-template-columns: 1fr;
  }

  .terms-update-grid {
    grid-template-columns: 1fr;
  }

  .terms-change-grid {
    grid-template-columns: 1fr;
  }

  .terms-update-scroll {
    max-height: 62vh;
    padding: 10px;
  }

  .client-page-tabs {
    top: 0;
    margin-inline: -4px;
  }
}

@media (max-width: 560px) {
  .client-page-tabs {
    border-radius: 14px;
    padding: 6px;
  }

  .client-page-tabs a {
    min-width: 118px;
    padding: 10px;
  }

  .terms-mini-grid {
    grid-template-columns: 1fr;
  }

  .register-terms-head,
  .register-section-title,
  .legal-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .register-section-title span {
    text-align: left;
  }

  .store-client-grid {
    grid-template-columns: 1fr;
  }

  .store-client-card {
    max-width: none;
  }
}

/* Refonte portail client : suivi clair, compact et rassurant */
body {
  background:
    linear-gradient(180deg, #edf5fb 0%, #dfeaf3 42%, #e9eef5 100%);
}

.hero {
  padding: 18px;
  color: #0f2137;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(234,246,252,.96) 58%, rgba(246,241,253,.9));
  border-bottom: 1px solid rgba(146, 168, 190, .38);
  box-shadow: 0 10px 34px rgba(41, 70, 102, .08);
}

.hero::before,
.hero::after {
  display: none;
}

.hero-inner {
  max-width: 1320px;
  align-items: center;
  padding-top: 0;
}

.hero h1 {
  margin: 0 0 4px;
  font-size: clamp(24px, 3vw, 34px);
}

.hero p {
  color: #536981;
}

.shell {
  max-width: 1320px;
  margin-top: 0;
  padding-top: 16px;
}

.btn,
.panel,
.stat,
.repair,
.doc,
.event,
.client-page-tabs,
.client-service-banner,
.client-service-offer,
.client-quick-card,
.warranty-card,
.store-client-card,
.latest-live-card,
.payment-due,
.support-hub,
.portal-modal {
  border-radius: 8px;
}

.btn.primary {
  background: linear-gradient(135deg, #1fbdd0, #2f6fd6);
  border-color: transparent;
  color: #071627;
  box-shadow: 0 10px 22px rgba(47,111,214,.18);
}

.client-dashboard-v2 {
  gap: 16px;
}

.client-command-v2 {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(126, 151, 176, .34);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,247,253,.98) 62%, rgba(250,246,255,.94));
  box-shadow: 0 18px 42px rgba(33, 64, 98, .12);
}

.client-command-v2.hot {
  border-color: rgba(31, 189, 208, .55);
}

.client-command-v2.warn {
  border-color: rgba(242, 165, 29, .55);
}

.client-command-v2.live,
.client-command-v2.ready {
  border-color: rgba(18, 128, 82, .45);
}

.client-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .75fr);
  gap: 14px;
  align-items: stretch;
}

.command-copy {
  min-height: 158px;
  border: 1px solid rgba(186, 230, 253, .68);
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, .20), transparent 32%),
    linear-gradient(135deg, #f8fdff, #eef7ff);
}

.command-copy h2 {
  margin: 4px 0 8px;
  color: #0f2137;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.03;
}

.command-copy p {
  max-width: 760px;
  margin: 0;
  color: #435a73;
  font-size: 16px;
  line-height: 1.55;
}

.client-next-action {
  border: 1px solid rgba(15, 33, 55, .11);
  border-radius: 8px;
  padding: 16px;
  background: #0f2137;
  color: #fff;
  display: grid;
  align-content: center;
  gap: 8px;
}

.client-next-action > span {
  color: #67e8f9;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.client-next-action strong {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.08;
}

.client-next-action p {
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
}

.client-next-action .btn {
  justify-self: start;
  margin-top: 4px;
}

.client-tracking-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.tracking-metric {
  min-height: 96px;
  border: 1px solid rgba(126, 151, 176, .32);
  border-left: 5px solid #1fbdd0;
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.92);
  color: #0f2137;
  text-decoration: none;
  display: grid;
  gap: 4px;
  align-content: center;
  box-shadow: 0 10px 24px rgba(33, 64, 98, .08);
}

.tracking-metric span {
  color: #5c7188;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.tracking-metric strong {
  font-size: 30px;
  line-height: 1;
}

.tracking-metric small {
  color: #5c7188;
  font-weight: 850;
}

.tracking-metric.hot { border-left-color: #1fbdd0; background: #e9fbff; }
.tracking-metric.warn { border-left-color: #f2a51d; background: #fff7e6; }
.tracking-metric.live { border-left-color: #128052; background: #eefbf4; }

.client-command-foot {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1fr);
  gap: 10px;
}

.atelier-presence {
  border: 1px solid rgba(126, 151, 176, .30);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.78);
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
}

.atelier-presence span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 5px rgba(148,163,184,.14);
}

.atelier-presence.online span {
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.16);
}

.atelier-presence strong,
.atelier-presence small {
  grid-column: 2;
}

.atelier-presence small {
  color: #5c7188;
  font-weight: 750;
}

.latest-live-card {
  border: 1px solid rgba(126, 151, 176, .30);
  padding: 12px;
  background: rgba(255,255,255,.80);
  display: grid;
  gap: 5px;
}

.latest-live-card p {
  margin: 0;
  color: #455d76;
  line-height: 1.4;
}

.latest-live-card a {
  color: #1762c5;
  font-weight: 900;
  text-decoration: none;
}

.client-page-tabs {
  top: 10px;
  border-radius: 8px;
  padding: 6px;
  border-color: rgba(126, 151, 176, .32);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

.client-page-tabs a {
  min-width: 118px;
  border-radius: 8px;
  background: #f8fbff;
  border-color: #d5e4f0;
}

.client-page-tabs a.active {
  background: #0f2137;
  border-color: #0f2137;
  color: #fff;
}

.client-page-tabs a.active small {
  color: rgba(255,255,255,.74);
}

.client-service-banner {
  padding: 14px;
  border-color: rgba(47,111,214,.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,247,255,.96));
}

.service-banner-head {
  align-items: center;
}

.service-price-chip {
  border-radius: 8px;
  background: #10243d;
}

.client-service-offer {
  border-radius: 8px;
  box-shadow: none;
}

.service-badge {
  border-radius: 8px;
}

.client-overview-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
  align-items: start;
  gap: 16px;
}

.client-overview-main,
.client-overview-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.client-follow-panel,
.client-message-panel {
  padding: 16px;
}

.section-head {
  align-items: center;
}

.section-head h2 {
  color: #102039;
}

.repair,
.doc,
.support-card-live,
.event {
  border-color: rgba(126, 151, 176, .30);
  box-shadow: 0 10px 26px rgba(33, 64, 98, .07);
}

.client-quick-access {
  grid-template-columns: 1fr;
  gap: 10px;
}

.client-quick-card {
  border-radius: 8px;
  padding: 14px;
  background: rgba(255,255,255,.86);
  border-color: rgba(126, 151, 176, .30);
  box-shadow: 0 10px 24px rgba(33, 64, 98, .07);
}

.client-quick-card strong {
  color: #0f2137;
}

.client-quick-card.store { border-left: 5px solid #f2a51d; }
.client-quick-card.warranty { border-left: 5px solid #128052; }
.client-quick-card.legal { border-left: 5px solid #7c3aed; }

.payment-due {
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(33, 64, 98, .10);
}

.client-footer {
  border-top: 1px solid rgba(126, 151, 176, .26);
  padding: 16px 4px 4px;
  color: #536981;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .client-command-main,
  .client-command-foot,
  .client-overview-grid {
    grid-template-columns: 1fr;
  }

  .client-tracking-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-next-action .btn {
    justify-self: stretch;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 14px 12px;
  }

  .hero-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions {
    justify-content: stretch;
  }

  .top-actions .btn {
    width: 100%;
  }

  .shell {
    padding: 12px;
  }

  .client-command-v2,
  .command-copy,
  .client-next-action {
    padding: 13px;
  }

  .command-copy {
    min-height: 0;
  }

  .client-tracking-metrics {
    grid-template-columns: 1fr;
  }

  .tracking-metric {
    min-height: 76px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .tracking-metric strong {
    grid-row: span 2;
    font-size: 26px;
  }

  .client-page-tabs {
    position: relative;
    top: auto;
  }

  .client-page-tabs a {
    min-width: 112px;
  }

  .service-banner-head {
    align-items: stretch;
  }

  .service-price-chip {
    width: fit-content;
  }

  .client-footer {
    justify-content: center;
    text-align: center;
  }
}

/* Client portal v3: menu-first, calmer colors, repair-first reading order. */
body {
  background:
    radial-gradient(circle at 12% 0%, rgba(126, 199, 183, .24), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(236, 202, 117, .18), transparent 30%),
    linear-gradient(180deg, #f7faf6 0%, #eef6f4 48%, #f8f5ee 100%);
  color: #13243a;
}

.hero {
  background: rgba(255, 255, 255, .70);
  border-bottom: 1px solid rgba(126, 151, 176, .22);
  box-shadow: none;
}

.hero h1 {
  letter-spacing: 0;
  color: #13243a;
}

.client-dashboard-v3 {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.client-menu-v3 {
  position: sticky;
  top: 10px;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(91, 129, 149, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 46px rgba(39, 72, 89, .12);
  backdrop-filter: blur(14px);
  overflow: visible;
}

.client-menu-v3 a {
  position: relative;
  min-width: 0;
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(135, 165, 181, .38);
  border-radius: 8px;
  background: #fbfefd;
  color: #14253b;
  text-decoration: none;
  padding: 12px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8);
}

.client-menu-v3 a span,
.client-menu-v3 a small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-menu-v3 a span {
  font-weight: 950;
  font-size: 15px;
}

.client-menu-v3 a small {
  color: #65788f;
  font-size: 12px;
  font-weight: 850;
}

.client-menu-v3 a b {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 23px;
  height: 23px;
  padding: 0 7px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #eaf3ff;
  color: #1d5bbf;
  font-size: 12px;
  box-shadow: 0 5px 12px rgba(29, 91, 191, .12);
}

.client-menu-v3 a.active {
  background: linear-gradient(135deg, #226a66, #2f7ec8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 34px rgba(34, 106, 102, .22);
}

.client-menu-v3 a.active small {
  color: rgba(255,255,255,.78);
}

.client-menu-v3 a.active b {
  background: rgba(255,255,255,.96);
  color: #226a66;
}

.client-menu-v3 a.hot:not(.active) {
  border-color: rgba(224, 128, 42, .38);
  background: #fff8eb;
}

.client-menu-v3 a.warn:not(.active) {
  border-color: rgba(212, 96, 85, .34);
  background: #fff6f3;
}

.client-menu-v3 a.live:not(.active) {
  border-color: rgba(34, 106, 102, .30);
  background: #f1fbf8;
}

.client-current-repairs {
  border: 1px solid rgba(63, 139, 132, .24);
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(241, 250, 247, .94));
  box-shadow: 0 22px 52px rgba(39, 72, 89, .12);
}

.client-current-repairs .section-head {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.client-current-repairs .section-head p,
.client-current-repairs.calm-empty p {
  margin: 6px 0 0;
  color: #52687f;
  line-height: 1.55;
  font-size: 15px;
}

.client-current-repairs h2 {
  margin: 2px 0 0;
  color: #10243d;
}

.client-current-repairs.calm-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.current-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.current-list .repair {
  margin: 0;
  border-left: 6px solid #2f7ec8;
  background: #ffffff;
}

.panel,
.payment-due,
.client-service-banner,
.client-quick-card,
.doc,
.repair,
.support-card-live {
  border-radius: 8px;
}

.client-overview-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .8fr);
}

.client-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(47, 126, 200, .24);
  border-left: 5px solid #2f7ec8;
  border-radius: 8px;
  background: #eef6ff;
  color: #123150;
  box-shadow: 0 12px 30px rgba(47, 126, 200, .12);
}

.client-preview-banner strong {
  font-size: 1.02rem;
}

.client-preview-banner span {
  color: #4c6580;
  font-weight: 700;
}

.client-announcement-banner {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(270px, 340px);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(217, 119, 6, .32);
  border-radius: 16px;
  padding: 0;
  background: linear-gradient(135deg, #fffdf7 0%, #fff9e9 55%, #f4f9ff 100%);
  color: #10233f;
  box-shadow: 0 18px 46px rgba(109, 75, 17, .13);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.client-announcement-banner.is-acknowledged {
  border-color: rgba(22, 163, 74, .28);
  background: linear-gradient(135deg, #fbfffc 0%, #f1fbf5 55%, #f4f9ff 100%);
  box-shadow: 0 14px 34px rgba(22, 101, 52, .09);
}

.client-announcement-icon {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #f59e0b, #d97706);
  color: #fff;
}

.client-announcement-icon span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 950;
}

.client-announcement-banner.is-acknowledged .client-announcement-icon {
  background: linear-gradient(160deg, #22c55e, #15803d);
}

.client-announcement-content {
  min-width: 0;
  padding: 20px 22px;
}

.client-announcement-eyebrow {
  display: block;
  color: #a75408;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.client-announcement-content h2 {
  margin: 0 0 8px;
  color: #11243c;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  line-height: 1.2;
}

.client-announcement-banner p {
  margin: 0;
  color: #29445f;
  font-size: .98rem;
  line-height: 1.62;
  font-weight: 650;
}

.client-announcement-ack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 20px;
  border-left: 1px solid rgba(217, 119, 6, .2);
  background: rgba(255, 255, 255, .62);
}

.client-announcement-ack label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #17324d;
  font-size: .94rem;
  font-weight: 850;
  line-height: 1.35;
  cursor: pointer;
}

.client-announcement-ack input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #16a34a;
  cursor: pointer;
}

.client-announcement-ack input:disabled {
  cursor: default;
  opacity: 1;
}

.client-announcement-ack small {
  color: #66778a;
  font-size: .78rem;
  line-height: 1.4;
}

.client-announcement-ack.is-acknowledged {
  border-left-color: rgba(22, 163, 74, .2);
  background: rgba(240, 253, 244, .78);
}

.client-announcement-ack.is-acknowledged small {
  color: #166534;
  font-weight: 750;
}

.client-service-banner {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(243, 248, 244, .98));
  border-color: rgba(205, 163, 77, .28);
}

.doc-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.doc-summary-item {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(126, 151, 176, .30);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
}

.doc-summary-item dt {
  margin: 0 0 4px;
  color: #61758b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.doc-summary-item dd {
  margin: 0;
  color: #10243d;
  font-size: 15px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.doc-summary-item.total {
  border-color: rgba(34, 106, 102, .32);
  background: linear-gradient(135deg, #eefdf8, #eaf4ff);
}

.doc-summary-item.total dd {
  color: #0f766e;
  font-size: 20px;
}

.doc-summary-item.success {
  border-color: rgba(34, 197, 94, .32);
  background: #f0fdf4;
}

.doc-summary-item.success dd {
  color: #15803d;
}

.doc-summary-item.warning {
  border-color: rgba(245, 158, 11, .36);
  background: #fffbeb;
}

.doc-summary-item.warning dd {
  color: #92400e;
}

.doc-summary-item.danger {
  border-color: rgba(244, 63, 94, .30);
  background: #fff1f2;
}

.doc-summary-item.danger dd {
  color: #be123c;
}

.doc .doc-total {
  color: #10243d;
  background: #eef6ff;
  border: 1px solid rgba(47, 126, 200, .20);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .client-menu-v3 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .client-dashboard-v3 {
    gap: 14px;
  }

  .client-preview-banner {
    display: grid;
    gap: 4px;
  }


  .client-announcement-banner {
    grid-template-columns: 48px minmax(0, 1fr);
    border-radius: 13px;
  }

  .client-announcement-content {
    padding: 16px 15px;
  }

  .client-announcement-icon span {
    width: 28px;
    height: 28px;
  }

  .client-announcement-ack {
    grid-column: 1 / -1;
    padding: 14px 15px;
    border-top: 1px solid rgba(217, 119, 6, .18);
    border-left: 0;
  }

  .client-announcement-banner p {
    font-size: .95rem;
  }

  .client-menu-v3 {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
  }

  .client-menu-v3 a {
    min-height: 62px;
    padding: 10px;
  }

  .client-current-repairs,
  .client-current-repairs.calm-empty {
    display: grid;
    padding: 14px;
  }

  .client-current-repairs .section-head {
    display: grid;
  }

  .client-current-repairs .btn {
    width: 100%;
  }

  .current-list {
    grid-template-columns: 1fr;
  }

  .client-overview-grid {
    grid-template-columns: 1fr;
  }

  .doc-summary-grid {
    grid-template-columns: 1fr;
  }

  .repair-photos-head {
    display: grid;
  }

  .repair-photos-grid {
    grid-template-columns: 1fr;
  }

  .doc .doc-total,
  .doc-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
/* Return label upload */
.return-label-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 18px;
  align-items: start;
}

.return-label-form,
.return-label-list {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.76);
  border-radius: 18px;
  padding: 18px;
}

.return-label-list h3 {
  margin: 0 0 12px;
}

.return-label-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 39, 68, 0.06);
}

.return-label-card + .return-label-card {
  margin-top: 10px;
}

.return-label-card strong,
.return-label-card span,
.return-label-card small {
  display: block;
}

.return-label-card span {
  color: var(--text);
  margin-top: 4px;
}

.return-label-card small,
.return-label-card p {
  color: var(--muted);
}

.return-label-card p {
  margin: 8px 0 0;
}

@media (max-width: 860px) {
  .return-label-layout {
    grid-template-columns: 1fr;
  }

  .return-label-card {
    align-items: stretch;
    flex-direction: column;
  }

  .return-label-card .btn {
    width: 100%;
    justify-content: center;
  }
}