:root {
    --arena-blue: #0066ff;
    --arena-red: #ff2d2d;
    --arena-black: #0b0d12;
    --arena-gray: #1f232b;
    color-scheme: dark;
    font-family: "Bahnschrift", "Century Gothic", "Segoe UI", sans-serif;
    background: var(--arena-black);
    color: #fff;
}
* { box-sizing: border-box; corner-shape: bevel; }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(ellipse at 0 0, #0066ff20, transparent 55%), radial-gradient(ellipse at 100% 20%, #ff2d2d14, transparent 50%), var(--arena-black);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
.customer-shell { min-height: 100vh; }
.customer-shell::before, .customer-shell::after { content: ""; position: fixed; top: 12vh; bottom: 12vh; width: 2px; pointer-events: none; }
.customer-shell::before { left: max(.3rem, calc((100vw - 1220px) / 2)); background: linear-gradient(transparent, var(--arena-blue), #00cfff, transparent); box-shadow: 0 0 18px #0066ff66; }
.customer-shell::after { right: max(.3rem, calc((100vw - 1220px) / 2)); background: linear-gradient(transparent, var(--arena-red), #ff2d2d, transparent); box-shadow: 0 0 18px #ff2d2d55; }
.page-wrap { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 0 0 clamp(2rem, 6vw, 5rem); }
.login-card, .booking-card { position: relative; border: 1px solid #35404f; border-radius: .6rem; background: linear-gradient(135deg, #151d28, var(--arena-black) 75%); box-shadow: 0 2rem 5rem #0008; }
.login-card { width: min(34rem, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem); }
.brand-logo { display: block; width: min(50vw, 13rem); aspect-ratio: 2.3; object-fit: cover; object-position: center 75%; margin: 0 auto 1rem; }
.eyebrow { margin-bottom: .65rem; color: #6ab5ff; font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .75rem; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: .025em; text-transform: uppercase; }
h2 { margin-bottom: .4rem; font-size: 1.35rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
p { color: #aeb6c2; line-height: 1.55; }
form { display: grid; gap: 1.1rem; margin-top: 2rem; }
label { display: grid; gap: .5rem; color: #dce2eb; font-size: .85rem; font-weight: 700; }
input, select { width: 100%; min-width: 0; min-height: 3rem; padding: .65rem .8rem; border: 1px solid #394454; border-radius: .35rem; outline: none; background: #0b0d12; color: #fff; }
input:focus, select:focus { border-color: #3399ff; box-shadow: 0 0 0 .2rem #0066ff33; }
input:disabled, select:disabled { color: #b7bfcc; background: var(--arena-gray); }
.primary, .secondary, .booking-tabs button { min-height: 2.8rem; padding: .75rem 1rem; border-radius: .35rem; font-weight: 800; }
.primary { border: 1px solid #3989ff; background: var(--arena-blue); color: #fff; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 24px #0066ff26; }
.primary:hover:not(:disabled) { background: #0054d6; }
.secondary { border: 1px solid #4d5a6c; background: #1f232b80; color: #fff; }
.secondary:hover { border-color: #6ab5ff; background: #0066ff14; }
button:focus-visible { outline: 2px solid #6ab5ff; outline-offset: 3px; }
.notice { margin: 1rem 0; padding: .9rem 1rem; border-radius: .7rem; }
.notice.error { border: 1px solid #ff6e8060; background: #761d2b55; color: #ffc2ca; }
.notice.success { border: 1px solid #55d89760; background: #14623e55; color: #bdfad9; }
.save-feedback {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 1.25rem 2.5rem;
    border: 2px solid #8bf0bb;
    border-radius: .6rem;
    background: #10251c;
    color: #bdfad9;
    box-shadow: 0 .75rem 3rem #000b;
    font-size: 1.75rem;
    font-weight: 800;
    pointer-events: none;
    animation: save-feedback 3s forwards;
}
@keyframes save-feedback {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
.customer-panel { padding: 1.25rem clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.account-bar span { display: block; margin-bottom: .3rem; color: #9ba8ba; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.account-bar strong { font-size: 1.1rem; }
.booking-tabs { display: flex; gap: .75rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #4d5a6c transparent; }
.booking-Planned { --booking-color: #8bf0bb; --booking-background: #164b35; }
.booking-InProgress { --booking-color: #ffbf80; --booking-background: #482b12; }
.booking-Completed { --booking-color: #93c5fd; --booking-background: #0066ff26; }
.booking-Canceled { --booking-color: #aaabb5; --booking-background: #272830; }
.booking-tabs button { min-width: 9rem; border: 1px solid var(--booking-color, #ffffff20); background: var(--booking-background, #151720); color: var(--booking-color, #fff); text-align: left; }
.booking-tabs button.active { border-color: #fff; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.booking-tabs span { display: block; margin-top: .2rem; font-size: .75rem; }
.booking-card { overflow: hidden; }
.booking-details { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 1.5rem clamp(1.5rem, 4vw, 2.5rem); gap: 1.25rem; border-bottom: 1px solid #ffffff12; }
.booking-details div { min-width: 0; }
.booking-details dt { margin-bottom: .35rem; color: #9ba8ba; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.booking-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }
.section-heading { padding: 2rem clamp(1.5rem, 4vw, 2.5rem) .6rem; }
.section-heading p { margin-bottom: 0; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem clamp(1.5rem, 4vw, 2.5rem) 2rem; }
.team-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    gap: 1rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid var(--team-color);
    border-radius: .5rem;
    background: linear-gradient(145deg, #1f232b, #10141c);
}
.team-name { color: var(--team-color); }
.team-language { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.team-photo {
    display: grid;
    width: 6rem;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--team-color);
    border-radius: .35rem;
    background: linear-gradient(135deg, #0066ff33, #0b0d12 60%, #ff2d2d1a);
    color: #d6e9ff;
    font-size: 1.7rem;
    font-weight: 900;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.camera-action .secondary { width: 100%; min-height: 3rem; padding: .4rem .25rem; font-size: .75rem; }
.photo-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.camera-dialog {
    width: min(40rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.25rem;
    border: 1px solid #394454;
    border-radius: .6rem;
    background: var(--arena-black);
    color: #fff;
}
.camera-dialog::backdrop { background: #000c; }
.camera-dialog [hidden] { display: none; }
.camera-dialog h2 { overflow-wrap: anywhere; }
.camera-preview { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 1rem auto; overflow: hidden; background: #000; }
.camera-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.camera-mask { position: absolute; top: 50%; left: 50%; width: 75%; height: 100%; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 0 0 50rem #0009; pointer-events: none; }
.camera-hint { margin-bottom: .75rem; font-size: .85rem; text-align: center; }
.camera-dialog p:empty { display: none; }
@media (max-width: 760px) {
    .customer-panel { padding: .75rem; }
    .account-bar { gap: .5rem; }
    .account-bar > div { min-width: 0; overflow-wrap: anywhere; }
    .account-bar .secondary { flex-shrink: 0; padding: .65rem .75rem; font-size: .8rem; }
    .login-card, .camera-dialog { padding: 1rem; }
    .booking-details { grid-template-columns: 1fr; gap: .75rem; padding: 1rem .75rem; }
    .booking-details div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1rem; }
    .booking-details dt { margin-bottom: 0; }
    .booking-details dd { text-align: right; }
    .section-heading { padding: 1.25rem .75rem .5rem; }
    .team-grid { grid-template-columns: 1fr; padding: .75rem .75rem 1rem; }
    .team-card { padding: .75rem; gap: .75rem; }
}
@media (max-width: 440px) {
    .page-wrap { width: min(100% - 1rem, 1120px); }
    .team-card { grid-template-columns: minmax(0, 1fr) 5rem; }
    .team-photo { width: 5rem; }
}