:root {
  --bg: #0d0a12; --panel: #17111f; --panel2: #21172e; --purple: #a970ff;
  --purple-bright: #c5a0ff; --text: #f6f1fc; --muted: #b8adca; --line: #342544;
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.topline { text-align: center; padding: 8px 16px; background: #21142f; color: #d8c4ff; font-size: .75rem; letter-spacing: .08em; }
.site-header { max-width: var(--max); margin: auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--purple); border-radius: 13px 13px 13px 3px; color: var(--purple-bright); box-shadow: 0 0 24px #9b5cff22; padding: 7px; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand strong { display: block; font-size: .98rem; letter-spacing: .16em; }
.brand small { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .12em; }
nav { display: flex; align-items: center; gap: 28px; font-size: .9rem; color: var(--muted); }
nav a:hover { color: white; }
.nav-cta { border: 1px solid #684a8b; padding: 10px 15px; border-radius: 9px; color: white; }
.menu-toggle { display: none; border: 1px solid #e4d4ff66; color: white; background: linear-gradient(135deg,#ffffff20,#a970ff20); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding: 8px 14px; border-radius: 999px; box-shadow:inset 0 1px 0 #ffffff55,0 6px 20px #0004; }
.hero { max-width: var(--max); margin: auto; padding: 70px 24px 82px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; min-height: 520px; }
.eyebrow { color: var(--purple-bright); font-size: .72rem; letter-spacing: .18em; font-weight: 800; margin: 0 0 18px; }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #bd90ff; margin-right: 9px; box-shadow: 0 0 12px var(--purple); }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: 1.04; letter-spacing: -.055em; margin-bottom: 24px; }
h1 span { color: var(--purple-bright); }
.hero-intro { max-width: 530px; color: var(--muted); font-size: 1.1rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 25px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #e4d4ff66; border-radius: 999px; padding: 13px 20px; font: inherit; font-weight: 750; cursor: pointer; color: #fff; background: linear-gradient(135deg, #ffffff24, #a970ff24 55%, #f4b8ff12); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); box-shadow: inset 0 1px 0 #ffffff55, inset 0 -1px 0 #ffffff12, 0 8px 28px #0005, 0 0 18px #b66bff16; position: relative; overflow: hidden; }
.button::before, .login-nav::before, .staff-login-link::before { content: ""; position: absolute; inset: 1px 18% auto; height: 42%; border-radius: inherit; background: linear-gradient(180deg, #ffffff2b, transparent); pointer-events: none; }
.button-primary { color: #fff; border-color: #e4caffaa; background: linear-gradient(135deg, #ffffff35, #bb8bff55 45%, #e4a8ff28); box-shadow: inset 0 1px 0 #ffffff88, inset 0 -1px 0 #ffffff18, 0 8px 28px #7f35c644, 0 0 22px #b66bff28; }
.button-primary:hover, .button-quiet:hover { filter: brightness(1.13); transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffffaa, 0 10px 32px #7f35c655, 0 0 28px #b66bff35; }
.button-quiet { color: var(--text); border: 1px solid #d9c5ff66; background: linear-gradient(135deg, #ffffff14, #a970ff12); }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); font-size: .8rem; }
.trust-row i { color: var(--purple-bright); font-style: normal; margin-right: 5px; }
.hero-art { min-height: 360px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid #352347; border-radius: 28px; background: radial-gradient(ellipse at 50% 48%, #45275e 0%, #21142f 35%, #100b18 72%); }
.hero-art::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(#9f76ca22 1px, transparent 1px), linear-gradient(90deg, #9f76ca22 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(transparent, black, transparent); }
.moon { position: absolute; width: 210px; height: 210px; border-radius: 50%; background: linear-gradient(145deg, #f0e3ff, #b784f7 48%, #6b3d9e); box-shadow: 0 0 70px #b77aff77, inset -24px -20px 38px #4c276c66; }
.moon::after { content: ""; position: absolute; inset: 18px 20px 18px 44px; border-radius: 50%; background: #241333; box-shadow: -8px 0 18px #b784f7; }
.sigil { position: relative; z-index: 2; width: 105px; height: 105px; color: #f5eaff; filter: drop-shadow(0 4px 25px #a970ff); transform: translateY(4px); }
.sigil svg { display: block; width: 100%; height: 100%; }
.orbit { position: absolute; border: 1px solid #d4b7ff55; border-radius: 50%; width: 310px; height: 115px; transform: rotate(-28deg); }
.orbit-two { width: 350px; height: 145px; transform: rotate(40deg); border-color: #d4b7ff33; }
.art-label { position: absolute; z-index: 3; color: #d9c5f7; font-size: .65rem; letter-spacing: .2em; }
.label-top { top: 28px; left: 28px; }.label-bottom { bottom: 26px; right: 24px; }
.ticker { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; padding: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #c6b5dc; font-size: .7rem; letter-spacing: .15em; }
.ticker b { color: var(--purple); }
.section { max-width: var(--max); margin: auto; padding: 90px 24px; }
.section-heading { max-width: 720px; margin: 0 auto 38px; text-align: center; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.045em; line-height: 1.1; margin-bottom: 16px; }
.section-heading > p:last-child, .muted { color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-card { position: relative; background: linear-gradient(155deg, #1b1425, #120e18); border: 1px solid var(--line); border-radius: 17px; padding: 26px; min-height: 290px; }
.service-card.featured { border-color: #7a55a6; box-shadow: inset 0 1px #c6a3ff20; }
.service-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; background: #39234e; color: var(--purple-bright); border-radius: 13px; font-size: 1.5rem; }
.card-kicker { display: block; color: var(--purple-bright); font-size: .62rem; letter-spacing: .12em; margin: -8px 0 8px; }
.service-card h3 { font-size: 1.22rem; margin-bottom: 10px; }.service-card p { color: var(--muted); font-size: .92rem; min-height: 70px; }
.price { border-top: 1px solid var(--line); padding-top: 15px; font-weight: 750; }
.price small { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; margin-top: 3px; }
.small-note { color: #9385a7; font-size: .78rem; text-align: center; margin: 22px 0 0; }
.process-section { background: #130e1a; border-top: 1px solid #251a32; border-bottom: 1px solid #251a32; }
.process-layout { max-width: var(--max); margin: auto; padding: 90px 24px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; }
.process-layout > div:first-child { padding-top: 20px; }
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 55px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.step:first-child { border-top: 1px solid var(--line); }
.step > span { color: var(--purple-bright); font-size: .9rem; font-weight: 800; letter-spacing: .08em; }
.step h3 { margin-bottom: 5px; font-size: 1.05rem; }.step p { margin: 0; color: var(--muted); font-size: .9rem; }
.request-section { padding-top: 82px; padding-bottom: 82px; }
.request-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; padding: clamp(24px, 5vw, 52px); border: 1px solid #50366b; border-radius: 22px; background: radial-gradient(ellipse at top left, #342047, #18111f 58%); }
.request-panel h2 { margin-bottom: 18px; }
.notice { display: flex; gap: 12px; padding: 14px; border: 1px solid #6c4d8e; background: #231832; border-radius: 11px; color: #d9c8f0; margin-top: 24px; font-size: .85rem; }
.notice span { color: var(--purple-bright); font-size: 1.2rem; }.notice p { margin: 0; }.notice strong { color: white; }
form { display: grid; align-content: center; gap: 10px; }
label { font-size: .8rem; color: #d7cce5; font-weight: 700; margin-top: 5px; }
select, textarea { width: 100%; border: 1px solid #473454; background: #100b17; color: #a99bb9; border-radius: 9px; padding: 13px; font: inherit; }
select:disabled, textarea:disabled { opacity: .75; cursor: not-allowed; }
.full { width: 100%; margin-top: 8px; }.form-help { color: #a99bb9; font-size: .72rem; text-align: center; margin: 0; }
.faq-section { max-width: 850px; padding-top: 35px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-list summary { cursor: pointer; font-weight: 750; list-style: none; display: flex; justify-content: space-between; gap: 15px; }
.faq-list summary::after { content: "+"; color: var(--purple-bright); font-size: 1.3rem; line-height: 1; }.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--muted); margin: 12px 0 0; max-width: 700px; }
.site-footer { border-top: 1px solid var(--line); padding: 35px max(24px, calc((100vw - var(--max)) / 2)); }
.site-footer > p { color: var(--muted); font-size: .8rem; margin: 18px 0 25px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; color: #9485a7; font-size: .72rem; }
@media (max-width: 800px) {
  .site-header { flex-wrap: wrap; }.menu-toggle { display: block; }
  nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
  nav.open { display: flex; } nav a { padding: 12px 4px; border-top: 1px solid var(--line); }
  .hero { grid-template-columns: 1fr; padding-top: 45px; gap: 35px; }.hero-art { min-height: 300px; }
  .service-grid { grid-template-columns: 1fr; }.service-card { min-height: auto; }.service-card p { min-height: auto; }
  .process-layout { grid-template-columns: 1fr; gap: 30px; padding-top: 65px; padding-bottom: 65px; }
  .request-panel { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .topline { font-size: .65rem; }.site-header { padding: 16px; }.hero, .section { padding-left: 18px; padding-right: 18px; }
  h1 { font-size: 2.7rem; }.hero-art { min-height: 265px; }.moon { width: 165px; height: 165px; }.sigil { width: 86px; height: 86px; }
  .orbit { width: 250px; }.ticker { gap: 10px; font-size: .6rem; }.hero-actions .button { width: 100%; }
  .site-footer { padding-left: 18px; padding-right: 18px; }
}


/* Customer login */
.login-nav { border: 1px solid #7046a2; color: #f4eaff; background: #21142f; border-radius: 999px; padding: .65rem 1rem; font: inherit; cursor: pointer; }
.login-nav:hover { background: #38204e; }
.login-overlay[hidden] { display: none !important; }
.login-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(7, 4, 12, .82); backdrop-filter: blur(8px); }
.login-panel { width: min(100%, 460px); max-height: 90vh; overflow: auto; position: relative; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid #69428b; border-radius: 22px; background: #15101e; box-shadow: 0 24px 90px #0009; }
.login-panel h2 { margin: .2rem 0 .8rem; }
.login-panel input { display: block; width: 100%; box-sizing: border-box; margin: .4rem 0 1rem; padding: .85rem 1rem; border: 1px solid #554365; border-radius: 10px; color: #fff; background: #0d0913; font: inherit; }
.login-close { position: absolute; top: .7rem; right: .9rem; border: 0; background: transparent; color: #eee; font-size: 2rem; cursor: pointer; }
.text-button { border: 0; background: transparent; color: #d7b8ff; text-decoration: underline; padding: .7rem; cursor: pointer; font: inherit; }
.full { width: 100%; }
body.login-open { overflow: hidden; }


/* Sakura-framed Shinobi Fix visual refresh */
body { background-image: radial-gradient(ellipse at 8% 18%, #51205a30, transparent 32%), radial-gradient(ellipse at 94% 44%, #51205a25, transparent 28%); }
body::before, body::after { content:""; position:fixed; top:0; bottom:0; width:clamp(34px, 7vw, 105px); z-index:0; pointer-events:none; opacity:.48; background-image:url("sakura-edge.png"); background-size:auto 100%; background-repeat:no-repeat; filter:saturate(1.18); }
body::before { left:0; background-position:left center; }
body::after { right:0; transform:scaleX(-1); background-position:left center; }
.site-header, main, .site-footer, .topline { position:relative; z-index:1; }
.brand-mark svg { filter:drop-shadow(0 0 8px #b05affaa); }
.character-art { display:flex; flex-direction:column; justify-content:space-between; min-height:470px; padding:12px 10px 16px; border-radius:22px; background:radial-gradient(ellipse at 50% 20%,#51266b 0%,#160d24 52%,#08060d 100%); border:1px solid #6e3a91; box-shadow:0 0 35px #9d42d52b,inset 0 0 35px #9d42d51c; }
.character-art::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(90deg,#05030b4d,transparent 35%,transparent 65%,#05030b4d); }
.character-row { display:grid; grid-template-columns:1fr .72fr 1fr; align-items:center; gap:2px; width:100%; min-height:310px; position:relative; z-index:1; }
.ninja-figure { margin:0; min-width:0; text-align:center; }
.ninja-figure img { display:block; width:100%; height:280px; object-fit:cover; object-position:top center; mix-blend-mode:screen; filter:drop-shadow(0 0 10px #b94cff30); -webkit-mask-image:linear-gradient(#000 75%,transparent); mask-image:linear-gradient(#000 75%,transparent); }
.ninja-figure.girl img { object-position:48% top; }
.ninja-figure.boy img { object-position:55% top; }
.ninja-figure figcaption { margin-top:-16px; position:relative; font-size:.6rem; letter-spacing:.15em; color:#f4dfff; }
.ninja-figure figcaption span { display:block; color:#c58cff; font-size:.5rem; margin-top:4px; }
.hero-emblem { text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2; }
.sharp-z { font-size:clamp(4.5rem,9vw,7rem); line-height:.9; font-weight:950; font-style:italic; font-family:Impact,"Arial Black",sans-serif; letter-spacing:-.13em; padding-right:.12em; color:#d5a0ff; transform:skew(-9deg); -webkit-text-stroke:1px #f8eaff; text-shadow:3px 3px 0 #6827a4,0 0 12px #c45cff,0 0 35px #9c36ff; }
.hero-emblem small { font-size:.48rem; letter-spacing:.18em; color:#edceff; white-space:nowrap; }
.headset-display { width:100%; text-align:center; position:relative; z-index:1; }
.headset-display img { display:block; width:100%; height:118px; object-fit:cover; object-position:center 56%; border-radius:12px; mix-blend-mode:screen; filter:drop-shadow(0 0 12px #c077ff45); }
.headset-display span { display:inline-block; margin-top:4px; font-size:.68rem; letter-spacing:.18em; color:#efdcff; }
.footer-links { display:flex; align-items:center; flex-wrap:wrap; gap:18px; padding:0 0 22px; border-bottom:1px solid var(--line); }
.footer-links a, .staff-login-link { color:#d9b8ff; text-decoration:none; font:inherit; font-size:.9rem; }
.staff-login-link { position:relative; overflow:hidden; cursor:pointer; border:1px solid #e4d4ff66; color:#fff; background:linear-gradient(135deg,#ffffff20,#a970ff24); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:999px; padding:.65rem 1rem; box-shadow:inset 0 1px 0 #ffffff55,0 6px 20px #0004; }
.staff-login-link:hover { background:#2c1740; box-shadow:0 0 18px #b450ff30; }
.button, .login-nav, .staff-login-link, .service-card, .faq-list details { transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.button:active, .login-nav:active, .staff-login-link:active { transform:scale(.97); }
@media (max-width:760px) {
  body::before, body::after { width:25px; opacity:.24; }
  .character-art { min-height:360px; }
  .character-row { min-height:230px; }
  .ninja-figure img { height:210px; }
  .headset-display img { height:82px; }
  .hero-emblem small { white-space:normal; font-size:.4rem; }
}
@media (prefers-reduced-motion:no-preference) {
  .sakura-layer::before { content:"✿　✧　❀　✿"; position:fixed; top:-20px; right:7%; color:#f5a9e5; opacity:.7; font-size:1.4rem; letter-spacing:1.4rem; pointer-events:none; animation:petalDrift 12s linear infinite; z-index:4; }
  @keyframes petalDrift { 0%{transform:translate3d(0,-5vh,0) rotate(0deg);opacity:0} 12%{opacity:.7} 100%{transform:translate3d(-45px,110vh,0) rotate(260deg);opacity:0} }
}

.click-bloom { position:fixed; z-index:2000; pointer-events:none; color:#ffb9ec; font-size:1.8rem; text-shadow:0 0 12px #d66aff; transform:translate(-50%,-50%) scale(.4); animation:bloomPop .85s ease-out forwards; }
@keyframes bloomPop { 20%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(25deg)} 100%{opacity:0;transform:translate(-50%,-85%) scale(1.7) rotate(80deg)} }

.social-label { color: var(--muted); font-size: .82rem; margin-left: auto; }
.social-name { color: #f0c5ff; border: 1px solid #70418c; border-radius: 999px; padding: .55rem .9rem; font-size: .82rem; background: #130b1d; }
@media (max-width: 620px) { .social-label { margin-left: 0; width: 100%; } }


/* Final polish: centered pricing, named mascots, and layered sakura motion */
.pricing-strip { padding: clamp(38px, 6vw, 72px) 20px; overflow: hidden; text-align: center; }
.pricing-inner { width: min(100%, 760px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.pricing-inner > div { width: 100%; max-width: 650px; margin: 0 auto; text-align: center; overflow-wrap: anywhere; }
.pricing-inner h2 { margin: 0 auto 14px; font-size: clamp(2.5rem, 8vw, 4.5rem); }
.pricing-inner h2 span { display: block; font-size: clamp(1rem, 2.6vw, 1.35rem); letter-spacing: .08em; margin-top: 8px; }
.pricing-inner p:not(.eyebrow) { max-width: 590px; margin: 0 auto; color: var(--muted); }
.pricing-note { max-width: 720px; margin: 22px auto 0; text-align: center; padding: 0 8px; overflow-wrap: anywhere; }
.ninja-figure figcaption { margin-top: -12px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #f4dfff; text-shadow: 0 0 12px #b65aff88; }
.ninja-figure figcaption span { display: none; }
.social-name { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .pricing-strip { padding-left: 14px; padding-right: 14px; } .pricing-inner > div { max-width: 100%; } .pricing-inner h2 { line-height: 1.05; } .pricing-note { font-size: .8rem; } .footer-links { gap: 10px; } }
.sakura-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.drifting-petal { position: absolute; top: -12vh; left: 0; color: var(--petal-color, #ffb9ec); opacity: 0; text-shadow: 0 0 10px #d35effaa, 0 0 20px #d35eff55; animation: sakuraFall var(--fall-time, 18s) cubic-bezier(.37,.02,.64,.98) var(--fall-delay, 0s) infinite; will-change: transform; transform-origin: center; filter:drop-shadow(0 0 4px #ff8de855); }
@keyframes sakuraFall { 0% { transform: translate3d(var(--start-x),-12vh,0) rotate(var(--spin-start)); opacity: 0; } 7% { opacity: var(--petal-opacity,.72); } 24% { transform: translate3d(calc(var(--start-x) + var(--drift-a)),22vh,0) rotate(calc(var(--spin-start) + 110deg)); } 47% { transform: translate3d(calc(var(--start-x) + var(--drift-b)),49vh,0) rotate(calc(var(--spin-start) - 65deg)); opacity: var(--petal-opacity,.72); } 71% { transform: translate3d(calc(var(--start-x) + var(--drift-c)),78vh,0) rotate(calc(var(--spin-start) + 230deg)); } 92% { opacity: .42; } 100% { transform: translate3d(calc(var(--start-x) + var(--drift-d)),112vh,0) rotate(calc(var(--spin-start) + 510deg)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .drifting-petal { display:none; } }

/* Account dashboard and repair management additions */
input, select, textarea { color: var(--text); }
input { width:100%; border:1px solid #473454; background:#100b17; color:var(--text); border-radius:9px; padding:13px; font:inherit; }
.orders-list { display:grid; gap:12px; margin-top:18px; max-height:45vh; overflow:auto; }
.order-card { border:1px solid #62447c; border-radius:14px; padding:16px; background:linear-gradient(145deg,#21172eeb,#120d19eb); min-width:0; overflow-wrap:anywhere; }
.order-card h3 { margin:0 0 8px; color:#e8d9ff; }
.order-card p { margin:7px 0; color:var(--muted); font-size:.9rem; }
.status-pill { display:inline-block; border:1px solid #9873c5; border-radius:999px; padding:2px 9px; color:#f0dcff; font-size:.75rem; }
.order-card details { margin-top:10px; color:var(--muted); }
.order-card li { margin:6px 0; }
.order-card li small { display:block; opacity:.75; }
.staff-edit { display:grid; gap:7px; border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
.staff-edit label { margin-top:4px; }
.staff-edit .button { margin-top:8px; }
@media(max-width:650px) { .orders-list { max-height:40vh; } .order-card { padding:12px; } }

/* FIX: Make hidden login windows actually disappear */
#loginOverlay[hidden],
#staffLoginOverlay[hidden],
#customerOrders[hidden],
#staffOrders[hidden],
#signOutButton[hidden],
#staffSignOut[hidden] {
  display: none !important;
}

/* Shinobi Fix: expanded staff dashboard */
.staff-overlay {
  padding: 20px;
  overflow-y: auto;
  align-items: stretch;
}

.staff-overlay .staff-panel {
  width: 100%;
  max-width: 1200px;
  max-height: none;
  min-height: min(850px, calc(100vh - 40px));
  margin: auto;
  padding: clamp(20px, 4vw, 42px);
  overflow: visible;
}

.staff-panel.staff-dashboard-active {
  width: 100%;
  max-width: 1400px;
}

.staff-dashboard-active #staffLoginIntro,
.staff-dashboard-active #staffAuthForm label,
.staff-dashboard-active #staffAuthForm input,
.staff-dashboard-active #staffSignInButton {
  display: none !important;
}

.staff-dashboard-active #staffAuthForm {
  margin: 0;
}

.staff-dashboard-active #staffMessage {
  display: block;
  margin: 12px 0;
}

.staff-dashboard-active #staffOrders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-content: start;
  gap: 18px;
  max-height: none;
  overflow: visible;
  margin: 22px 0;
}

.staff-dashboard-active .order-card {
  padding: 22px;
}

.staff-dashboard-active .staff-edit input,
.staff-dashboard-active .staff-edit select {
  width: 100%;
  min-width: 0;
}

.staff-dashboard-active #staffSignOut {
  display: block;
  max-width: 240px;
  margin-top: 20px;
}

@media (max-width: 650px) {
  .staff-overlay {
    padding: 8px;
  }

  .staff-overlay .staff-panel {
    min-height: calc(100vh - 16px);
    padding: 18px 14px;
  }

  .staff-dashboard-active #staffOrders {
    grid-template-columns: 1fr;
  }
}


/* The authenticated staff dashboard uses the full screen. */
.staff-overlay.staff-dashboard-open {
  padding: 0;
  place-items: stretch;
  overflow: auto;
}
.staff-overlay.staff-dashboard-open .staff-panel,
.staff-overlay.staff-dashboard-open .staff-panel.staff-dashboard-active {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  max-height: none;
  margin: 0;
  border-radius: 0;
  overflow: visible;
}
.staff-overlay.staff-dashboard-open .staff-dashboard-active #staffOrders {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}
@media (max-width: 650px) {
  .staff-overlay.staff-dashboard-open .staff-panel,
  .staff-overlay.staff-dashboard-open .staff-panel.staff-dashboard-active {
    min-height: 100vh;
    padding: 18px 14px;
  }
}

/* Staff dashboard replaces the login form and fills the browser window. */
#staffDashboard[hidden] {
  display: none !important;
}
.staff-overlay.staff-dashboard-open {
  display: block !important;
  inset: 0;
  padding: 0;
  overflow: auto;
  background: #0d0a12;
  backdrop-filter: none;
}
.staff-overlay.staff-dashboard-open .staff-panel,
.staff-overlay.staff-dashboard-open .staff-panel.staff-dashboard-active {
  display: block;
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  margin: 0;
  padding: clamp(22px, 4vw, 56px);
  overflow: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(ellipse at top left, #241632, #0d0a12 62%);
}
.staff-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
}
.staff-dashboard-header h2 {
  margin-bottom: 8px;
}
.staff-dashboard-header .form-help {
  text-align: left;
}
.staff-dashboard-header .button {
  flex: 0 0 auto;
  min-width: 150px;
}
.staff-overlay.staff-dashboard-open #staffOrders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  align-content: start;
  gap: 18px;
  max-height: none;
  margin: 26px 0 0;
  overflow: visible;
}
.staff-overlay.staff-dashboard-open #staffOrders[hidden] {
  display: none !important;
}
@media (max-width: 650px) {
  .staff-overlay.staff-dashboard-open .staff-panel,
  .staff-overlay.staff-dashboard-open .staff-panel.staff-dashboard-active {
    padding: 54px 16px 20px;
  }
  .staff-dashboard-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .staff-dashboard-header .button {
    width: 100%;
  }
  .staff-overlay.staff-dashboard-open #staffOrders {
    grid-template-columns: 1fr;
  }
}

#staffAuthForm[hidden],
#staffLoginIntro[hidden] {
  display: none !important;
}

/* Customer repair history uses a full-screen dashboard after sign-in. */
#customerDashboard[hidden],
#authForm[hidden],
#customerLoginIntro[hidden] {
  display: none !important;
}
.customer-overlay.customer-dashboard-open {
  display: block !important;
  inset: 0;
  padding: 0;
  overflow: auto;
  background: #0d0a12;
  backdrop-filter: none;
}
.customer-overlay.customer-dashboard-open .customer-panel {
  display: block;
  width: 100%;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  max-height: none;
  margin: 0;
  padding: clamp(22px, 4vw, 56px);
  overflow: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(ellipse at top left, #241632, #0d0a12 62%);
}
.customer-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
}
.customer-dashboard-header h2 {
  margin-bottom: 8px;
}
.customer-dashboard-header .form-help {
  text-align: left;
}
.customer-dashboard-header .text-button {
  flex: 0 0 auto;
  min-width: 150px;
  border: 1px solid #d9c5ff66;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff14, #a970ff12);
  color: var(--text);
}
.customer-overlay.customer-dashboard-open #customerOrders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  align-content: start;
  gap: 18px;
  max-height: none;
  margin: 26px 0 0;
  overflow: visible;
}
.customer-overlay.customer-dashboard-open #customerOrders[hidden] {
  display: none !important;
}
@media (max-width: 650px) {
  .customer-overlay.customer-dashboard-open .customer-panel {
    padding: 54px 16px 20px;
  }
  .customer-dashboard-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .customer-dashboard-header .text-button {
    width: 100%;
  }
  .customer-overlay.customer-dashboard-open #customerOrders {
    grid-template-columns: 1fr;
  }
}