:root {
  --ink: #17251e;
  --muted: #6f7973;
  --line: #dfe3dc;
  --paper: #fffefb;
  --canvas: #f3f4ef;
  --green: #215c43;
  --green-soft: #e5efe8;
  --red: #a84735;
  --red-soft: #f5e8e4;
  --amber: #a46917;
  --amber-soft: #f7edd8;
  --shadow: 0 18px 50px rgba(34, 47, 40, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background-color: var(--canvas); background-image: url("mob-background.png"); background-position: center top; background-size: 100vw auto; background-attachment: fixed; background-repeat: no-repeat; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.logged-out > .sidebar, body.logged-out > main { display: none; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background-color: #071f36; background-image: url("mob-background.png"); background-position: center top; background-size: 100vw auto; background-repeat: no-repeat; background-attachment: fixed; }
.login-screen[hidden] { display: none; }
.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid #789bb7; border-radius: 14px; background: #b7d0e2; color: #05080c; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.login-brand { margin-bottom: 35px; display: flex; align-items: center; gap: 12px; font: 700 24px Georgia, serif; }
.login-brand > span:last-child { display: flex; flex-direction: column; line-height: .9; }
.login-brand small { margin-top: 7px; font: 800 9px Inter, sans-serif; letter-spacing: .2em; }
.login-card h1 { margin-bottom: 10px; }
.login-intro { margin-bottom: 24px; color: #263947; font-size: 12px; line-height: 1.6; }
.login-form { display: grid; gap: 14px; }
.login-form[hidden] { display: none; }
.login-form label { font-size: 10px; font-weight: 800; }
.login-form input { width: 100%; height: 46px; margin-top: 7px; padding: 0 13px; border: 1px solid #789bb7; border-radius: 6px; outline: none; background: #d7e7f1; color: #05080c; }
.login-form input:focus { border-color: #173e64; box-shadow: 0 0 0 3px rgba(23,62,100,.14); }
.login-form .primary { height: 46px; margin-top: 4px; }
.login-error { margin: 0; padding: 9px 11px; border: 1px solid #df2115; border-radius: 5px; background: #ffb5ae; color: #7e0903; font-size: 10px; font-weight: 800; }
.first-admin-form { padding-top: 8px; }
.first-admin-form h2 { margin-bottom: 4px; font: 400 24px Georgia, serif; }
.login-note { display: block; margin-top: 18px; color: #263947; font-size: 9px; line-height: 1.5; text-align: center; }
button, input, select { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; width: 244px; padding: 31px 22px 24px; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #52738c #071f36; background: #17281f; color: #edf2ed; }
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: #071f36; }
.sidebar::-webkit-scrollbar-thumb { border-radius: 8px; background: #52738c; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; padding: 0 11px; color: #fff; font-family: Georgia, serif; font-size: 24px; text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: .95; }
.brand small { margin-top: 7px; font: 800 9px Inter, sans-serif; letter-spacing: .2em; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #dce6dd; border-radius: 50% 50% 50% 8px; font: 700 17px Georgia, serif; }
.main-nav { flex: none; margin-top: 51px; display: grid; gap: 7px; }
.main-nav a { display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 7px; color: #abb8b0; font-size: 13px; font-weight: 600; text-decoration: none; transition: .2s ease; }
.main-nav a:hover, .main-nav a.active { background: rgba(255,255,255,.09); color: #fff; }
.main-nav a > span { width: 18px; font-size: 18px; text-align: center; }
.main-nav b { min-width: 21px; margin-left: auto; padding: 3px 6px; border-radius: 10px; background: #d76a53; color: #fff; font-size: 10px; text-align: center; }
.account-overview { min-height: 0; flex: none; margin-top: 30px; }
.vehicle-overview { min-height: 0; flex: none; margin-top: 14px; }
.account-overview-toggle { width: 100%; margin: 0 0 9px; padding: 7px 10px 7px 11px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 5px; background: transparent; color: #7893a9; font-size: 8px; font-weight: 800; letter-spacing: .16em; cursor: pointer; }
.account-overview-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
.account-overview-toggle b { font-size: 13px; line-height: 1; transition: transform .2s ease; }
.account-overview-toggle[aria-expanded="false"] b { transform: rotate(180deg); }
.account-overview-toggle[aria-expanded="false"] + #accountOverviewList { display: none; }
.account-overview-toggle[aria-expanded="false"] + #vehicleOverviewList { display: none; }
.account-overview > div { max-height: 245px; display: grid; gap: 4px; overflow-y: auto; padding-right: 3px; }
.vehicle-overview-list { max-height: 190px; padding: 10px 11px; overflow-y: auto; border: 1px dashed rgba(169,196,215,.35); border-radius: 6px; }
.vehicle-overview-list p { margin: 0; color: #7893a9; font-size: 9px; line-height: 1.5; }
.vehicle-sidebar-item { width: 100%; position: relative; display: grid; grid-template-columns: 1fr; gap: 5px; align-items: center; padding: 6px; border-bottom: 1px solid rgba(169,196,215,.18); color: #fff; }
.vehicle-sidebar-item:last-child { border-bottom: 0; }
.vehicle-sidebar-item strong, .vehicle-sidebar-item small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-sidebar-item strong { font-size: 9px; }
.vehicle-sidebar-item small { color: #8eabc0; font-size: 8px; }
.vehicle-item-toggle { width: 100%; min-width: 0; min-height: 31px; position: relative; display: grid; place-items: center; padding: 5px 38px; border: 0; border-radius: 4px; background: rgba(169,196,215,.08); color: #fff; text-align: center; cursor: pointer; }
.vehicle-item-toggle:hover { background: rgba(169,196,215,.17); }
.vehicle-item-toggle strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.vehicle-item-toggle > span { position: absolute; right: 8px; color: #9fb9cf; font-size: 14px; line-height: 1; transition: transform .18s ease; }
.vehicle-sidebar-item:has(.vehicle-delete-button) .vehicle-item-toggle > span { right: 36px; }
.vehicle-item-toggle[aria-expanded="true"] > span { transform: rotate(180deg); }
.vehicle-delete-button { width: 25px; height: 25px; position: absolute; top: 9px; right: 9px; z-index: 2; border: 0; border-radius: 4px; background: rgba(255,42,26,.15); color: #ff6b60; cursor: pointer; }
.vehicle-delete-button:hover { background: #ff2a1a; color: #fff; }
.vehicle-item-details { grid-column: 1 / -1; display: grid; gap: 5px; padding: 3px 7px 6px; }
.vehicle-item-details[hidden] { display: none; }
.vehicle-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.vehicle-tags em { padding: 2px 5px; border-radius: 8px; background: #afc9dc; color: #071f36; font-size: 6px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.vehicle-tags em.illegal { background: #ff2a1a; color: #fff; }
.vehicle-tags em.legal { background: #45b66b; color: #041d0c; }
.vehicle-tags em.inspection-due { background: #ff2a1a; color: #fff; }
.vehicle-tags em.inspection-ok { background: #e2c267; color: #211805; }
.vehicle-options { margin: 0; padding: 0; border: 0; }
.vehicle-options legend { margin-bottom: 8px; color: #05080c; font-size: 9px; font-weight: 800; }
.vehicle-options > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vehicle-options button { min-height: 42px; padding: 7px 10px; border: 1px solid #789bb7; border-radius: 6px; background: #b8d0e1; color: #05080c; font-size: 9px; font-weight: 900; cursor: pointer; }
.vehicle-options button:hover { background: #a9c5d9; }
.vehicle-options button[data-vehicle-lt="illegal"][aria-pressed="true"] { border-color: #df2115; background: #ff2a1a; color: #fff; }
.vehicle-options button[data-vehicle-lt="legal"][aria-pressed="true"] { border-color: #258449; background: #45b66b; color: #041d0c; }
.vehicle-options #bulletproofTiresButton[aria-pressed="true"] { border-color: #173e64; background: #173e64; color: #fff; }
.vehicle-options #radioInstalledButton[aria-pressed="true"] { border-color: #6b4e9d; background: #7654ad; color: #fff; }
.vehicle-options #hardenedTiresButton[aria-pressed="true"] { border-color: #9a6411; background: #d49a35; color: #211405; }
.current-radio { flex: none; margin-top: 14px; padding: 10px; border: 1px solid rgba(169,196,215,.3); border-radius: 7px; background: rgba(169,196,215,.06); }
.current-radio + .current-radio { margin-top: 8px; }
.radio-section-content[hidden] { display: none; }
.radio-controls { display: grid; grid-template-columns: 1fr 30px 30px; gap: 5px; }
.current-radio input { min-width: 0; height: 31px; padding: 0 8px; border: 1px solid rgba(169,196,215,.45); border-radius: 5px; outline: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 10px; font-weight: 800; text-align: center; }
.current-radio input::placeholder { color: #6f8ca2; }
.current-radio input:focus { border-color: #9fc2da; }
.current-radio button { width: 30px; height: 31px; border: 0; border-radius: 5px; background: #45b66b; color: #041d0c; font-weight: 1000; cursor: pointer; }
.current-radio button:hover { background: #69ca89; }
.current-radio .radio-section-toggle { width: 100%; height: 25px; margin-bottom: 7px; padding: 0 2px; display: flex; align-items: center; justify-content: space-between; border-radius: 4px; background: transparent; color: #7893a9; font-size: 8px; font-weight: 900; letter-spacing: .15em; text-align: left; }
.current-radio .radio-section-toggle:hover { background: rgba(169,196,215,.1); color: #d8e8f2; }
.radio-section-toggle b { font-size: 12px; line-height: 1; transition: transform .18s ease; }
.radio-section-toggle[aria-expanded="false"] { margin-bottom: 0; }
.radio-section-toggle[aria-expanded="false"] b { transform: rotate(180deg); }
.current-radio .radio-generate { background: #b5cedf; color: #071f36; }
.current-radio .radio-generate:hover { background: #d0e2ee; }
.current-radio small { display: block; margin-top: 6px; overflow: hidden; color: #9fb9cf; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.current-radio.streamer-hidden { border-color: rgba(255,42,26,.55); background: rgba(255,42,26,.08); }
.current-radio.streamer-hidden input { color: #ff8b82; letter-spacing: .18em; cursor: not-allowed; }
.current-radio button:disabled { background: #526b7e; color: #9fb2c0; cursor: not-allowed; }
.account-filter { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: #9fb9cf; text-align: left; cursor: pointer; }
.account-filter:hover, .account-filter.active { background: rgba(255,255,255,.1); color: #fff; }
.account-filter .user-avatar { width: 25px; height: 25px; background: #a9c4d7; color: #071f36; font-size: 8px; }
.account-filter span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; }
.account-filter.all .user-avatar { border-radius: 6px; }
.sidebar-bottom { flex: none; margin-top: auto; padding-top: 14px; }
.sidebar-bottom > p { margin: 0 0 7px 11px; color: #7f9186; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.sidebar-bottom > time { display: block; margin: 0 0 26px 11px; color: #cad4cd; font-size: 12px; }
.profile { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 10px; }
.profile-open-button { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; padding: 5px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.profile-open-button:hover { background: rgba(255,255,255,.08); }
.avatar { width: 35px; height: 35px; display: grid; flex: none; place-items: center; border-radius: 50%; background: #d8e4d6; color: var(--green); font-size: 11px; font-weight: 800; }
.avatar.has-profile-image, .user-avatar.has-profile-image { background-position: center; background-size: cover; background-repeat: no-repeat; color: transparent; }
.profile strong, .profile small { display: block; }
.profile strong { font-size: 11px; }
.profile small { margin-top: 3px; color: #899b90; font-size: 9px; }
.profile > #logoutButton { margin-left: auto; border: 0; background: none; color: #8b9a91; cursor: pointer; }
.profile > #logoutButton:hover { color: #fff; }
.profile-dialog-person { margin: 20px 27px 16px; display: flex; align-items: center; gap: 13px; }
.profile-dialog-person .user-avatar { width: 52px; height: 52px; font-size: 13px; }
.profile-dialog-person strong, .profile-dialog-person small { display: block; }
.profile-dialog-person strong { margin-bottom: 5px; font: 400 23px Georgia, serif; }
.profile-dialog-person small { color: #263947; font-size: 10px; }
.profile-summary-grid { margin: 0 27px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.profile-summary-grid article { padding: 14px; border: 1px solid #789bb7; border-radius: 6px; background: #afc9dc; text-align: center; }
.profile-summary-grid strong, .profile-summary-grid small { display: block; }
.profile-summary-grid strong { font: 700 22px Georgia, serif; }
.profile-summary-grid small { margin-top: 4px; color: #263947; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.profile-settings-form { padding-top: 0; }
.profile-picture-field input[type="file"] { height: auto; min-height: 46px; padding: 10px 12px; }
.remove-profile-image { width: 100%; border-color: #a84735; color: #7e1e12; font-size: 10px; font-weight: 800; }
.remove-profile-image[hidden] { display: none; }
.automatic-pin-note { padding: 14px 16px; border: 1px solid #789bb7; border-radius: 6px; background: #a9c8dc; }
.automatic-pin-note strong, .automatic-pin-note small { display: block; }
.automatic-pin-note strong { font-size: 11px; }
.automatic-pin-note small { margin-top: 6px; color: #263947; font-size: 9px; line-height: 1.45; }
.generated-pin-panel { padding-bottom: 24px; }
.generated-login-pin { width: calc(100% - 54px); margin: 8px 27px 12px; padding: 20px; display: block; overflow-wrap: anywhere; border: 3px solid #173e64; border-radius: 8px; background: #9fbed3; color: #071f36; font: 900 28px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .1em; text-align: center; }
.generated-pin-hint { margin: 0 27px 8px; color: #263947; font-size: 10px; line-height: 1.5; text-align: center; }

main { width: min(1390px, calc(100% - 244px)); min-height: 100vh; margin-left: 244px; padding: 48px clamp(28px, 4.2vw, 68px) 28px; }
.topbar { min-height: 165px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy clock" "notice notice" "actions actions"; align-items: start; gap: 16px 24px; }
.topbar > div:first-child { grid-area: copy; }
.live-clock { grid-area: clock; min-width: 190px; position: static; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid #789bb7; border-radius: 8px; background: #c9ddea; color: #05080c; box-shadow: 0 8px 24px rgba(4,18,31,.1); }
.clock-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #22a35a; box-shadow: 0 0 0 4px rgba(34,163,90,.15); animation: clockPulse 2s infinite; }
.live-clock strong, .live-clock small { display: block; }
.live-clock strong { font: 800 21px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; }
.live-clock small { margin-top: 6px; color: #263947; font-size: 9px; font-weight: 700; text-transform: capitalize; }
@keyframes clockPulse { 50% { opacity: .45; transform: scale(.85); } }
.eyebrow { margin: 0 0 10px; color: #87918b; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 9px; font: 400 clamp(30px, 3.2vw, 46px)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.intro { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.top-actions { grid-area: actions; margin-left: 0; display: flex; flex-wrap: nowrap; justify-content: flex-end; justify-self: end; gap: 10px; align-items: center; }
.penalty-ticker { grid-area: notice; height: 34px; position: relative; overflow: hidden; border-top: 2px solid rgba(255,42,26,.45); border-bottom: 2px solid rgba(255,42,26,.45); background: rgba(255,255,255,.3); }
.penalty-ticker strong { position: absolute; top: 50%; left: 0; color: #ed1c12; font-size: 18px; font-weight: 1000; letter-spacing: .08em; white-space: nowrap; text-shadow: 0 1px 0 #fff, 0 0 9px rgba(255,42,26,.35); animation: penaltyTicker 9s linear infinite; }
@keyframes penaltyTicker {
  from { left: 0; transform: translate(-100%, -50%); }
  to { left: 100%; transform: translate(0, -50%); }
}
.active-account-banner { margin-top: 18px; padding: 13px 17px; display: flex; align-items: center; gap: 11px; border: 2px solid #071f36; border-radius: 8px; background: #c9ddea; color: #05080c; }
.active-account-banner[hidden] { display: none; }
.active-account-banner small, .active-account-banner strong { display: block; }
.active-account-banner small { margin-bottom: 3px; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.active-account-banner strong { font-size: 12px; }
.active-account-banner b { margin-left: auto; padding: 6px 9px; border-radius: 12px; background: #9fbed3; font-size: 9px; }
.primary, .secondary, .icon-btn { height: 42px; border-radius: 6px; cursor: pointer; transition: transform .15s, background .15s; }
.primary { padding: 0 18px; border: 1px solid var(--green); background: var(--green); color: #fff; font-size: 11px; font-weight: 700; }
.primary span { margin-right: 7px; font-size: 17px; font-weight: 400; vertical-align: -1px; }
.top-user-button { padding: 0 17px; background: var(--paper); border-color: #cfd6cf; color: var(--green); }
.vehicle-entry-button { height: 42px; padding: 0 16px; border: 1px solid #6f91aa; background: #b8d0e1; color: #05080c; font-size: 10px; font-weight: 800; }
.vehicle-entry-button span { margin-right: 6px; font-size: 16px; }
.vehicle-entry-button:hover { background: #a9c5d9; }
.top-user-button span { margin-right: 6px; font-size: 16px; vertical-align: -1px; }
.top-user-button:hover { background: var(--green-soft); border-color: #b7cabd; }
.streamer-button { min-width: 145px; height: 48px; padding: 0 18px; border: 2px solid #c9180e; border-radius: 7px; background: #ff2a1a; color: #fff; font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 7px 18px rgba(255,42,26,.25); }
.streamer-button span { margin-right: 5px; }
.streamer-button:hover { background: #dc1d12; }
.streamer-button[aria-pressed="true"] { border-color: #fff; background: #ff2a1a; color: #fff; box-shadow: 0 0 25px rgba(255,42,26,.75); }
.gambo-bell-button { width: 48px; min-width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; box-shadow: none; }
.gambo-bell-button span { display: block; margin: 0; font-size: 25px; line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,.22)); }
.gambo-bell-button:hover { background: transparent; transform: translateY(-1px) scale(1.08); }
.gambo-bell-button:active { transform: translateY(1px); }
.primary:hover { background: #174b35; }
.primary:active, .icon-btn:active, .secondary:active { transform: translateY(1px); }
.icon-btn { width: 42px; border: 1px solid var(--line); background: var(--paper); font-size: 19px; }

.stats { margin: 39px 0 23px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stat-card { min-height: 137px; position: relative; display: flex; gap: 13px; padding: 22px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.stat-card::after { content: ""; position: absolute; right: -23px; bottom: -43px; width: 94px; height: 94px; border: 1px solid currentColor; border-radius: 50%; opacity: .07; }
.stat-icon { width: 30px; height: 30px; display: grid; flex: none; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; }
.urgent .stat-icon { background: var(--red-soft); color: var(--red); }
.warning .stat-icon { background: var(--amber-soft); color: var(--amber); }
.good .stat-icon { background: var(--green-soft); color: var(--green); }
.neutral .stat-icon { background: #eceeea; color: #607068; }
.stat-card p { margin: 1px 0 6px; color: #657169; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stat-card strong { display: block; font: 400 29px/1 Georgia, serif; }
.stat-card small { display: block; margin-top: 8px; color: #8a928d; font-size: 9px; }
.trend { position: absolute; right: 16px; top: 22px; padding: 4px 7px; border-radius: 10px; background: #f0f2ed; color: #87908a; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.urgent .trend { background: var(--red-soft); color: var(--red); }
.warning .trend { background: var(--amber-soft); color: var(--amber); }
.good .trend { background: var(--green-soft); color: var(--green); }

.inventory-card { border: 1px solid var(--line); border-radius: 9px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.anonymous-card { margin-top: 23px; border: 1px solid #789bb7; border-radius: 9px; background: #b7d0e2; box-shadow: var(--shadow); overflow: hidden; }
.anonymous-card table { min-width: 760px; }
.anonymous-card th { background: #9ebdd2; }
.countdown { display: inline-flex; min-width: 116px; padding: 7px 9px; justify-content: center; border: 1px solid #6c91ac; border-radius: 5px; background: #c8ddea; color: #05080c; font: 800 11px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.countdown.expired { border-color: #a84735; background: var(--red-soft); color: var(--red); }
.users-card { margin-top: 39px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.pin-view { margin-top: 39px; display: grid; gap: 20px; }
.pin-view[hidden] { display: none; }
.tasks-view { margin-top: 39px; }
.tasks-view[hidden] { display: none; }
.ranks-view { margin-top: 39px; }
.ranks-view[hidden] { display: none; }
.penalties-view { margin-top: 39px; }
.penalties-view[hidden] { display: none; }
.penalties-card { overflow: hidden; border: 1px solid #bd2419; border-radius: 9px; background: rgba(201,221,234,.86); box-shadow: var(--shadow); }
.penalty-item { min-height: 118px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 18px; padding: 22px 30px; border-top: 2px solid rgba(223,33,21,.65); background: rgba(255,181,174,.72); }
.penalty-symbol { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #ff2a1a; color: #fff; font-size: 25px; font-weight: 1000; box-shadow: 0 6px 18px rgba(255,42,26,.3); }
.penalty-item strong, .penalty-item small { display: block; }
.penalty-item strong { color: #8e1008; font: 700 20px Georgia, serif; }
.penalty-item span > small { margin-top: 7px; color: #4c201c; font-size: 10px; }
.penalty-item > b { color: #e11c11; font: 900 28px Georgia, serif; text-align: right; }
.penalty-item > b small { margin-top: 4px; font: 900 9px Inter, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.penalty-account-heading { padding: 24px 30px 15px; display: flex; align-items: end; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(120,155,183,.65); }
.penalty-account-heading h3 { margin-bottom: 0; font: 400 23px Georgia, serif; }
.penalty-account-heading > strong { padding: 9px 13px; border-radius: 6px; background: #ff2a1a; color: #fff; font-size: 12px; }
.penalty-account-list { display: grid; }
.penalty-account-item { min-height: 118px; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.5fr) 180px 170px; align-items: center; gap: 22px; padding: 22px 30px; border-top: 1px solid rgba(120,155,183,.65); background: rgba(255,255,255,.18); }
.penalty-account-item strong, .penalty-account-item small { display: block; }
.penalty-account-item strong { font-size: 17px; }
.penalty-account-item small { margin-top: 7px; color: #4c201c; font-size: 12px; line-height: 1.5; }
.penalty-days { color: #8e1008; font-size: 17px; font-weight: 900; text-align: center; }
.penalty-days small { margin-top: 8px; color: #4c201c; font: 800 12px ui-monospace, Consolas, monospace; white-space: nowrap; }
.penalty-amount { color: #e11c11; font: 900 29px Georgia, serif; text-align: right; }
.ranks-card { overflow: hidden; border: 1px solid #789bb7; border-radius: 9px; background: rgba(201,221,234,.82); box-shadow: var(--shadow); }
.rank-list { display: grid; }
.rank-item { min-height: 92px; display: grid; grid-template-columns: 48px minmax(150px,.7fr) minmax(480px,2fr) auto; align-items: center; gap: 16px; padding: 15px 27px; border-top: 1px solid rgba(120,155,183,.65); }
.rank-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #173e64; color: #fff; font-size: 14px; }
.rank-item strong, .rank-item small { display: block; }
.rank-item strong { font-size: 12px; }
.rank-item small { margin-top: 4px; color: #263947; font-size: 9px; }
.rank-permissions { display: grid; grid-template-columns: repeat(3, minmax(130px,1fr)); gap: 8px; }
.rank-permission { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #789bb7; border-radius: 6px; background: rgba(181,206,223,.72); color: #07131d; font-size: 9px; font-weight: 900; cursor: pointer; }
.rank-permission input { width: 17px; height: 17px; flex: none; accent-color: #173e64; cursor: pointer; }
.rank-permission:has(input:checked) { border-color: #327b55; background: rgba(143,202,164,.72); }
.rank-permission:has(input:disabled) { opacity: .75; cursor: default; }
.rank-delete { min-height: 34px; padding: 0 12px; border: 1px solid #df2115; border-radius: 5px; background: #ff2a1a; color: #fff; font-size: 8px; font-weight: 900; cursor: pointer; }
.rank-delete:disabled { border-color: #789bb7; background: #9db8cb; color: #263947; cursor: not-allowed; }
.tasks-card { overflow: hidden; border: 1px solid #789bb7; border-radius: 9px; background: rgba(201,221,234,.82); box-shadow: var(--shadow); }
.price-list-view { display: grid; gap: 18px; }
.price-list-view[hidden] { display: none; }
.price-list-card, .price-calculator-card { overflow: hidden; border: 1px solid #789bb7; border-radius: 9px; background: rgba(201,221,234,.84); box-shadow: var(--shadow); }
.price-list-heading { align-items: center; }
.price-heading-actions { display: flex; align-items: center; gap: 12px; }
.price-heading-actions > p { margin: 0; color: #263947; font-size: 10px; }
.price-list-toggle { min-height: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #789bb7; border-radius: 6px; background: #b5cedf; color: #07131d; font-size: 9px; font-weight: 900; cursor: pointer; }
.price-list-toggle:hover { background: #a5c4d8; }
.price-list-toggle b { font-size: 13px; transition: transform .2s ease; }
.price-list-toggle[aria-expanded="false"] b { transform: rotate(180deg); }
.price-list-content[hidden] { display: none; }
.price-entry-form { padding: 0 27px 22px; display: grid; grid-template-columns: minmax(220px,1.5fr) minmax(150px,.7fr) auto; align-items: end; gap: 12px; border-bottom: 1px solid rgba(120,155,183,.65); }
.price-entry-form[hidden] { display: none; }
.price-entry-form label, .price-calculator label { color: #182735; font-size: 9px; font-weight: 900; }
.price-entry-form input, .price-calculator input, .price-calculator select, .price-item input { width: 100%; height: 40px; margin-top: 7px; padding: 0 11px; border: 1px solid #789bb7; border-radius: 5px; background: #b8d0e1; color: #05080c; font-size: 11px; font-weight: 800; }
.price-list { display: grid; }
.price-item { min-height: 72px; padding: 13px 27px; display: grid; grid-template-columns: minmax(200px,1fr) 160px auto; align-items: center; gap: 15px; border-top: 1px solid rgba(120,155,183,.55); }
.price-item:first-child { border-top: 0; }
.price-item strong, .price-item small { display: block; }
.price-item > span strong { font-size: 13px; }
.price-item small { margin-top: 5px; color: #263947; font-size: 8px; }
.price-item input { margin-top: 0; text-align: right; }
.price-item-value { color: #173e64; font: 900 20px Georgia, serif; text-align: right; }
.price-delete { min-height: 36px; padding: 0 12px; border: 1px solid #df2115; border-radius: 5px; background: #ff2a1a; color: #fff; font-size: 9px; font-weight: 900; cursor: pointer; }
.price-calculator { padding: 0 27px 26px; display: grid; grid-template-columns: minmax(220px,1fr) 150px 220px; align-items: end; gap: 14px; }
.price-result { min-height: 61px; padding: 11px 16px; display: grid; align-content: center; border: 2px solid #173e64; border-radius: 7px; background: #9fbed3; text-align: right; }
.price-result small { color: #263947; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.price-result strong { margin-top: 4px; color: #071f36; font: 900 24px Georgia, serif; }
.price-result.limit-reached { border-color: #a40000; background: #ff2a1a; box-shadow: 0 0 0 3px rgba(255,42,26,.2), 0 7px 18px rgba(164,0,0,.3); }
.price-result.limit-reached small, .price-result.limit-reached strong { color: #fff; }
.task-list { display: grid; }
.task-item { min-height: 96px; display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) 150px auto; align-items: center; gap: 18px; padding: 17px 27px; border-top: 1px solid rgba(120,155,183,.65); }
.task-item.completed { background: rgba(137,190,155,.45); }
.task-item strong, .task-item small { display: block; }
.task-item strong { font-size: 13px; }
.task-item small { margin-top: 5px; color: #263947; font-size: 9px; line-height: 1.4; }
.task-item.completed strong { text-decoration: line-through; opacity: .7; }
.task-due { font-size: 10px; font-weight: 800; }
.task-due.overdue { color: #c51f14; }
.task-actions { display: flex; gap: 6px; }
.task-actions button { min-height: 34px; padding: 0 10px; border: 1px solid #7194ad; border-radius: 5px; background: #b5cedf; color: #05080c; font-size: 8px; font-weight: 900; cursor: pointer; }
.task-actions .task-delete { border-color: #df2115; background: #ff2a1a; color: #fff; }
.pin-form-card, .pin-list-card { border: 1px solid var(--line); border-radius: 9px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.pin-form { padding: 0 27px 25px; display: grid; grid-template-columns: 1.2fr 1.2fr .8fr auto; align-items: end; gap: 13px; }
.pin-form label { color: #182735; font-size: 9px; font-weight: 800; }
.pin-form input, .pin-form select { width: 100%; height: 41px; margin-top: 7px; padding: 0 10px; border: 1px solid #89a8bf; border-radius: 5px; background: #b8d0e1; color: #05080c; font-size: 10px; }
.pin-list { display: grid; }
.pin-item { min-height: 96px; display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(170px, 1fr) 135px auto; align-items: center; gap: 20px; padding: 18px 30px; border-top: 1px solid #9fb5c7; }
.pin-item strong, .pin-item small { display: block; }
.pin-item strong { font-size: 15px; }
.pin-item small { margin-top: 6px; color: #263947; font-size: 11px; }
.pin-value { padding: 11px 13px; border: 1px solid #7396af; border-radius: 6px; background: #b6cede; font: 900 16px ui-monospace, Consolas, monospace; letter-spacing: .18em; text-align: center; }
.pin-actions { display: flex; gap: 5px; }
.pin-reveal { height: 36px; padding: 0 13px; border: 1px solid #7194ad; border-radius: 5px; background: #b5cedf; font-size: 10px; font-weight: 800; cursor: pointer; }
.pin-item .delete-button { height: 36px; padding: 0 13px; font-size: 10px; }
.users-head, .user-row { display: grid; grid-template-columns: minmax(240px, 2fr) minmax(140px, 1fr) 110px minmax(230px, auto); align-items: center; gap: 18px; }
.admin-heading-actions { display: flex; align-items: center; gap: 12px; }
.admin-heading-actions > p { margin: 0; color: #1f3342; font-size: 10px; }
.admin-heading-actions .icon-btn { flex: none; }
.users-head { padding: 12px 27px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7f8f4; color: #89928c; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.user-row { min-height: 76px; padding: 12px 27px; border-bottom: 1px solid #e8ebe5; }
.user-row:last-child { border-bottom: 0; }
.user-role-select { width: 100%; height: 36px; padding: 0 9px; border: 1px solid #789bb7; border-radius: 5px; background: #b8d0e1; color: #05080c; font-size: 10px; font-weight: 800; }
.user-role-select:disabled { opacity: .72; cursor: not-allowed; }
.delete-user-button { min-height: 36px; padding: 0 12px; border: 1px solid #df2115; border-radius: 5px; background: #ff2a1a; color: #fff; font-size: 9px; font-weight: 900; cursor: pointer; }
.delete-user-button:hover { background: #d7190e; box-shadow: 0 5px 14px rgba(223,33,21,.25); }
.delete-user-button:disabled { border-color: #789bb7; background: #9db8cb; color: #263947; box-shadow: none; cursor: not-allowed; }
.user-admin-actions { display: flex; justify-content: flex-end; gap: 7px; }
.manage-user-button { min-height: 36px; padding: 0 12px; border: 1px solid #527c9b; border-radius: 5px; background: #a9c8dc; color: #07131d; font-size: 9px; font-weight: 900; cursor: pointer; }
.manage-user-button:hover { background: #8fb7d1; }
.user-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-account-link { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.user-account-link:hover strong { text-decoration: underline; }
.user-avatar { width: 39px; height: 39px; display: grid; flex: none; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 10px; font-weight: 800; }
.user-person strong, .user-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-person strong { margin-bottom: 4px; font-size: 11px; }
.user-person small { color: #8c958f; font-size: 9px; }
.user-role { color: #59665e; font-size: 10px; font-weight: 600; }
.user-status { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 9px; font-weight: 700; }
.user-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4f9b71; }
.users-card .empty-state .primary { margin-top: 9px; }
.section-heading { padding: 24px 27px 18px; display: flex; justify-content: space-between; align-items: flex-end; }
.section-heading h2 { margin-bottom: 0; font: 400 24px Georgia, serif; }
.section-heading > p { margin: 0; color: #8a928d; font-size: 10px; }
.toolbar { padding: 0 27px 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.search { width: min(335px, 100%); height: 37px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; background: #fafaf7; color: #8a948e; }
.search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.search input::placeholder { color: #9ba39e; }
.filters { display: flex; align-items: center; gap: 3px; padding: 3px; border-radius: 6px; background: #f0f1ec; }
.filters button { height: 29px; padding: 0 11px; border: 0; border-radius: 4px; background: transparent; color: #748078; font-size: 9px; font-weight: 700; cursor: pointer; }
.filters button.active { background: var(--paper); color: var(--ink); box-shadow: 0 2px 7px rgba(32,47,39,.08); }
.filters span { margin-left: 4px; padding: 2px 5px; border-radius: 8px; background: #e1e4df; font-size: 8px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1200px; }
th { padding: 12px 16px; color: #89928c; font-size: 8px; text-align: left; text-transform: uppercase; letter-spacing: .12em; background: #f7f8f4; }
th:first-child, td:first-child { padding-left: 27px; }
th:last-child, td:last-child { padding-right: 27px; }
td { height: 69px; padding: 10px 16px; border-top: 1px solid #e8ebe5; color: #59665e; font-size: 10px; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #fafbf7; }
tbody tr.problem-row { background: #f0c8bf; box-shadow: inset 4px 0 0 #ff2a1a; }
tbody tr.problem-row:hover { background: #eeb5aa; }
tbody tr.problem-row td { color: #3b0c07; }
tbody tr.soon-row { background: #f6d6a0; box-shadow: inset 4px 0 0 #ff9800; }
tbody tr.soon-row:hover { background: #f3c97f; }
tbody tr.soon-row td { color: #4b2b05; }
.product { display: flex; align-items: center; gap: 11px; }
.product-icon { width: 35px; height: 35px; display: grid; flex: none; place-items: center; border-radius: 7px; background: #edf0e9; color: #67746c; font: 700 11px Georgia, serif; }
.product strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 11px; }
.product small { color: #929a95; font-size: 9px; }
.location { display: flex; align-items: center; gap: 6px; color: #4d5a52; font-weight: 600; }
.location::before { content: "⌂"; color: #8c9790; font-size: 13px; }
.warehouse-code { display: inline-block; padding: 6px 8px; border: 1px solid #7396af; border-radius: 4px; background: #b6cede; color: #05080c; font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.date strong { display: block; color: var(--ink); font-size: 10px; }
.date small { display: block; margin-top: 3px; color: #8c958f; font-size: 8px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 12px; font-size: 8px; font-weight: 800; white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.expired { background: var(--red-soft); color: var(--red); }
.status.soon { background: var(--amber-soft); color: var(--amber); }
.status.good { background: var(--green-soft); color: var(--green); }
.sort-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.more { width: 28px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: #8b948e; cursor: pointer; }
.more:hover { background: #ecefe9; color: var(--red); }
.row-actions { display: flex; align-items: center; gap: 5px; }
.extend-button { height: 27px; padding: 0 8px; border: 1px solid #7194ad; border-radius: 4px; background: #b5cedf; color: #05080c; font-size: 8px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.extend-button:hover { background: #9fbed3; }
.delete-button { height: 27px; padding: 0 9px; border: 1px solid #a84735; border-radius: 4px; background: var(--red-soft); color: #8f3427; font-size: 8px; font-weight: 800; cursor: pointer; }
.delete-button:hover { background: #a84735; color: #fff; }
.anonymous-note { color: #23394b; font-size: 8px; font-weight: 700; white-space: nowrap; }
.empty-state { padding: 56px 20px; text-align: center; color: #8a948d; }
.empty-state > span { font-size: 30px; }
.empty-state h3 { margin: 10px 0 6px; color: var(--ink); font: 400 20px Georgia, serif; }
.empty-state p { font-size: 11px; }
.footer-note { margin: 15px 2px 0; color: #929a95; font-size: 9px; }
.footer-note span { width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; background: #5d9b78; }

dialog { width: min(535px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 28px 90px rgba(13,29,20,.3); }
dialog::backdrop { background: rgba(18,31,24,.56); backdrop-filter: blur(3px); }
dialog form { padding: 28px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; }
.dialog-head h2 { margin: 0; font: 400 27px Georgia, serif; }
.close-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #758078; font-size: 20px; cursor: pointer; }
.dialog-intro { margin: 10px 0 22px; color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { color: #58655d; font-size: 10px; font-weight: 700; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; margin-top: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; outline: none; background: #fafaf7; color: var(--ink); font-size: 11px; }
.form-grid input, .form-grid select { height: 41px; }
.form-grid textarea { min-height: 92px; padding-top: 10px; resize: vertical; font: inherit; }
.form-grid input:focus, .form-grid select:focus { border-color: #67927d; box-shadow: 0 0 0 3px rgba(43,100,72,.09); }
.field-hint { display: block; margin-top: 6px; color: #8a948d; font-size: 8px; font-weight: 500; }
.anonymous-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.2); }
.anonymous-row small { color: #1f3342; font-size: 8px; font-weight: 600; }
.anonymous-toggle { height: 34px; flex: none; padding: 0 12px; border: 1px solid #7898b1; border-radius: 5px; background: #b8d0e1; color: #05080c; font-size: 9px; font-weight: 800; cursor: pointer; }
.anonymous-toggle span { margin-right: 5px; }
.anonymous-toggle[aria-pressed="true"] { border-color: #071f36; background: #071f36; color: #fff; }
.dialog-actions { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }
.vehicle-details-dialog { width: min(650px, calc(100% - 28px)); }
.vehicle-details-content { padding: 28px; }
.vehicle-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vehicle-details-grid article { min-height: 76px; padding: 14px; display: grid; align-content: center; gap: 7px; border: 1px solid #789bb7; border-radius: 7px; background: #b5cede; }
.vehicle-details-grid small, .vehicle-details-equipment > small { color: #263947; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.vehicle-details-grid strong { font-size: 15px; }
.vehicle-details-equipment { margin-top: 12px; padding: 15px; border: 1px solid #789bb7; border-radius: 7px; background: #b5cede; }
.vehicle-details-equipment .vehicle-tags { margin-top: 10px; gap: 7px; }
.vehicle-details-equipment .vehicle-tags em { padding: 6px 9px; font-size: 8px; }
.vehicle-details-equipment .vehicle-tags > small { color: #263947; font-size: 10px; }
.account-details-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 14px; background: rgba(4,18,31,.78); backdrop-filter: blur(5px); }
.account-details-overlay[hidden] { display: none; }
.account-details-dialog { width: min(760px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 27px; overflow: auto; border: 1px solid #789bb7; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 28px 90px rgba(4,16,27,.55); }
.account-details-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.account-details-head .user-avatar { width: 45px; height: 45px; }
.account-details-head .eyebrow { margin-bottom: 5px; }
.account-details-head h2 { margin: 0 0 4px; font: 400 26px Georgia, serif; }
.account-details-head small { color: #263947; font-size: 9px; }
.account-details-list { max-height: 430px; margin-top: 24px; display: grid; gap: 9px; overflow-y: auto; }
.account-detail-item { display: grid; grid-template-columns: minmax(150px,1fr) 112px 100px 145px 100px; align-items: center; gap: 12px; padding: 14px; border: 1px solid #88a7bd; border-radius: 7px; background: #b8d0e1; }
.account-detail-item[type="button"] { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.account-detail-item[type="button"]:hover { border-color: #173e64; transform: translateY(-1px); }
.account-detail-item.problem { border: 2px solid #ff2a1a; background: #f0c8bf; }
.account-detail-item.soon { border: 2px solid #ff9800; background: #f6d6a0; }
.account-detail-location strong, .account-detail-location small { display: block; }
.account-detail-location strong { margin-bottom: 4px; font-size: 11px; }
.account-detail-location small { color: #263947; font-size: 8px; }
.account-detail-expiry { font-size: 9px; font-weight: 700; }
.account-detail-pin { padding: 7px 8px; border: 1px solid #567f9c; border-radius: 5px; background: #9fbed3; color: #05080c; font: 900 11px ui-monospace, Consolas, monospace; text-align: center; white-space: nowrap; }
.account-details-dialog .dialog-actions { margin-bottom: 0; }
.warehouse-reference-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #83a3ba; }
.reference-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.reference-heading .eyebrow { margin-bottom: 3px; }
.reference-heading small { color: #263947; font-size: 8px; font-weight: 700; }
.reference-heading h3 { margin: 0; font: 400 19px Georgia, serif; }
.warehouse-reference-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.warehouse-reference-item { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid #8ba9be; border-radius: 5px; background: #b5cede; }
.warehouse-reference-item[type="button"] { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.warehouse-reference-item[type="button"]:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(4,18,31,.16); }
.warehouse-reference-item strong { font-size: 9px; }
.warehouse-reference-item code { color: #05080c; font: 800 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.warehouse-reference-item.reference-active { border: 2px solid #187443; background: #a9d8bb; }
.warehouse-reference-item.reference-active::before { content: "✓"; color: #0d6235; font-size: 11px; font-weight: 900; }
.warehouse-reference-item.reference-inactive { border: 2px solid #c5382a; background: #efb8ae; }
.warehouse-reference-item.reference-inactive::before { content: "×"; color: #a51f14; font-size: 13px; font-weight: 900; }
.warehouse-reference-item.reference-active code { color: #074825; }
.warehouse-reference-item.reference-inactive code { color: #78190f; }
.warehouse-reference-item .pin-present { padding: 3px 5px; border-radius: 8px; background: #173e64; color: #fff; font-size: 7px; font-weight: 900; }
.quick-pin-panel { margin-top: 18px; padding: 15px; display: grid; grid-template-columns: 1fr 160px auto auto; align-items: center; gap: 10px; border: 2px solid #173e64; border-radius: 7px; background: #9fbed3; }
.quick-pin-panel[hidden] { display: none; }
.quick-pin-panel small, .quick-pin-panel strong { display: block; }
.quick-pin-panel small { margin-bottom: 3px; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.quick-pin-panel strong { font-size: 12px; }
.quick-pin-panel input { height: 41px; padding: 0 11px; border: 1px solid #7396af; border-radius: 5px; background: #c9ddea; font: 900 14px ui-monospace, Consolas, monospace; letter-spacing: .16em; }
.secondary { padding: 0 17px; border: 1px solid var(--line); background: transparent; font-size: 11px; font-weight: 700; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 20; padding: 12px 16px; border-radius: 6px; background: #17281f; color: #fff; font-size: 11px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.warehouse-alert { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; padding: 30px; overflow: auto; background: radial-gradient(circle at 50% 38%, #335e82 0, #123a61 40%, #061a2c 100%); color: #05080c; text-align: center; }
.warehouse-alert[hidden] { display: none; }
.warehouse-alert::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(201,221,234,.35); border-radius: 14px; pointer-events: none; }
.alert-visual { width: 150px; height: 150px; position: relative; display: grid; place-items: center; margin-bottom: 27px; border: 2px solid #05080c; border-radius: 50%; background: #b7d0e2; box-shadow: 0 22px 65px rgba(0,0,0,.35); }
.alert-building { font-size: 72px; line-height: 1; }
.alert-mark { width: 42px; height: 42px; position: absolute; right: -4px; top: 2px; display: grid; place-items: center; border: 3px solid #b7d0e2; border-radius: 50%; background: #b54031; color: #fff; font-size: 25px; font-weight: 900; }
.warehouse-alert .eyebrow { margin-bottom: 13px; color: #d7e5ef; }
.warehouse-alert h2 { max-width: 720px; margin: 0; color: #ff2a1a; font: 700 clamp(35px, 6vw, 74px)/.98 Georgia, serif; letter-spacing: -.04em; text-shadow: 0 3px 18px rgba(255,42,26,.28); }
.warehouse-alert > p:not(.eyebrow) { margin: 22px 0 14px; color: #d7e5ef; font-size: 13px; }
.alert-affected-list { width: min(620px, 92vw); max-height: 190px; margin-bottom: 24px; display: grid; gap: 7px; overflow-y: auto; }
.alert-affected-item { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, .7fr); align-items: center; gap: 15px; padding: 11px 14px; border: 1px solid rgba(5,8,12,.35); border-radius: 6px; background: rgba(183,208,226,.92); color: #05080c; text-align: left; }
.alert-affected-item strong, .alert-affected-item small { display: block; }
.alert-affected-item strong { margin-bottom: 3px; font-size: 11px; }
.alert-affected-item small { color: #263947; font-size: 9px; }
.alert-affected-item > span:last-child { font-size: 10px; font-weight: 800; text-align: right; }
.alert-affected-item > span:last-child small { margin-top: 4px; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.alert-affected-item.needs-payment { border: 2px solid #a84735; background: #f0c8bf; }
.alert-affected-item.needs-payment > span:last-child small { color: #8d2f22; }
.alert-affected-item.needs-anonymization { border: 2px solid #9b6818; background: #f4ddb3; }
.alert-affected-item.needs-anonymization > span:last-child small { color: #76480b; }
.alert-affected-item.is-anonymous { border: 2px solid #a84735; background: #f0c8bf; }
.alert-affected-item.is-anonymous > span:last-child small { color: #8d2f22; }
.alert-close { height: 44px; padding: 0 22px; border: 1px solid #05080c; border-radius: 6px; background: #b7d0e2; color: #05080c; font-size: 11px; font-weight: 800; cursor: pointer; }
.alert-close:hover { background: #c9ddea; }
.gambo-alert { position: fixed; inset: 0; z-index: 1300; display: grid; place-content: center; justify-items: center; padding: 30px; overflow: auto; background: radial-gradient(circle at center, rgba(255,201,40,.97), rgba(146,18,8,.98) 72%); color: #fff; text-align: center; }
.gambo-alert[hidden] { display: none; }
.gambo-alert-bell { font-size: clamp(75px, 12vw, 150px); filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); animation: gamboBellShake .55s ease-in-out infinite alternate; }
.gambo-alert > p { margin: 20px 0 8px; font-size: clamp(13px, 2vw, 23px); font-weight: 1000; letter-spacing: .22em; }
.gambo-alert h2 { margin: 0; color: #fff; font: 1000 clamp(52px, 10vw, 135px)/.88 Georgia, serif; letter-spacing: -.035em; text-shadow: 0 5px 0 #791008, 0 12px 35px rgba(0,0,0,.38); }
.gambo-alert button { min-width: 190px; height: 52px; margin-top: 34px; border: 2px solid #fff; border-radius: 7px; background: #071f36; color: #fff; font-size: 13px; font-weight: 1000; cursor: pointer; }
.gambo-alert button:hover { background: #123a61; }
@keyframes gamboBellShake { from { transform: rotate(-10deg) scale(.96); } to { transform: rotate(10deg) scale(1.04); } }

@media (max-height: 760px) and (min-width: 721px) {
  .sidebar { padding-top: 18px; padding-bottom: 14px; }
  .main-nav { margin-top: 22px; gap: 3px; }
  .main-nav a { padding-top: 8px; padding-bottom: 8px; }
  .account-overview { margin-top: 14px; }
  .vehicle-overview { margin-top: 8px; }
  .current-radio { margin-top: 8px; padding: 7px; }
  .account-overview > div, .vehicle-overview-list { max-height: 105px; }
  .sidebar-bottom { padding-top: 9px; }
  .sidebar-bottom > time { margin-bottom: 10px; }
  .profile { padding-top: 10px; }
}

@media (max-width: 1080px) {
  .topbar { align-items: start; }
  .top-actions { flex-wrap: wrap; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
  .filters { align-self: flex-start; }
  .rank-item { grid-template-columns: 48px 1fr auto; }
  .rank-permissions { grid-column: 2 / -1; width: 100%; }
}
@media (max-width: 720px) {
  .sidebar { position: static; width: 100%; min-height: auto; padding: 18px; }
  .main-nav { margin-top: 20px; grid-template-columns: repeat(2, 1fr); }
  .sidebar-bottom { display: none; }
  .account-overview { margin-top: 18px; }
  .account-overview > div { max-height: 140px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main { width: 100%; margin: 0; padding: 28px 16px; }
  .topbar { min-height: auto; grid-template-columns: 1fr; grid-template-areas: "copy" "clock" "notice" "actions"; align-items: start; }
  .live-clock { width: 100%; position: static; }
  .stats { grid-template-columns: 1fr; }
  .stat-card { min-height: 118px; }
  .top-actions { width: 100%; margin-left: 0; justify-self: stretch; flex-wrap: wrap; }
  .top-actions .primary, .top-actions .top-user-button, .top-actions .vehicle-entry-button { flex: 1; }
  .top-actions .streamer-button { flex: 1 0 130px; }
  .top-actions .gambo-bell-button { flex: 0 0 48px; }
  .filters { width: 100%; overflow-x: auto; }
  .filters button { flex: none; }
  .users-head { display: none; }
  .user-row { grid-template-columns: 1fr auto; gap: 8px; }
  .user-role-select, .user-status { grid-column: 1; margin-left: 51px; }
  .user-admin-actions { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; }
  .account-detail-item { grid-template-columns: 1fr 1fr; }
  .quick-pin-panel { grid-template-columns: 1fr 1fr; }
  .pin-form { grid-template-columns: 1fr 1fr; }
  .pin-item { grid-template-columns: 1fr 1fr; }
  .task-item { grid-template-columns: 1fr 1fr; }
  .price-entry-form, .price-calculator { grid-template-columns: 1fr; }
  .price-item { grid-template-columns: 1fr auto; }
  .price-item > label, .price-item-value { grid-column: 1; }
  .price-delete { grid-column: 2; grid-row: 1 / span 2; }
  .rank-item { grid-template-columns: 42px 1fr; }
  .rank-delete { grid-column: 2; justify-self: start; }
  .rank-permissions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .penalty-account-item { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .main-nav { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .top-actions { align-items: stretch; flex-wrap: wrap; }
  .top-actions .icon-btn { flex: 0 0 42px; }
  .anonymous-row { align-items: flex-start; flex-direction: column; }
  .alert-affected-item { grid-template-columns: 1fr; }
  .alert-affected-item > span:last-child { text-align: left; }
  .warehouse-reference-list { grid-template-columns: 1fr; }
  .vehicle-options > div { grid-template-columns: 1fr; }
  .vehicle-details-grid { grid-template-columns: 1fr; }
}

/* Dunkelblaues Farbschema */
:root {
  --ink: #05080c;
  --muted: #182735;
  --line: #89a8bf;
  --paper: #c9ddea;
  --canvas: #123a61;
  --green: #173e64;
  --green-soft: #afc9dc;
  --shadow: 0 18px 50px rgba(2, 14, 26, .22);
}

.sidebar { background: #071f36; }
.topbar { padding: 24px 26px; border: 1px solid #789bb7; border-radius: 9px; background: #b7d0e2; }
.eyebrow, .section-heading > p, .stat-card p, .stat-card small, .product small,
.date small, .footer-note, .field-hint, .user-person small { color: #1f3342; }
.top-user-button, .icon-btn, .search, .form-grid input, .form-grid select, .form-grid textarea { background: #b8d0e1; color: #05080c; }
.top-user-button { border-color: #6f91aa; }
.top-user-button:hover { background: #a9c5d9; border-color: #547c9a; }
.filters, .trend { background: #aac4d6; color: #111b23; }
.filters button { color: #111b23; }
.filters span { background: #95b5cb; }
th, .users-head { background: #aec8da; color: #05080c; }
td, .user-role, .location, .form-grid label { color: #05080c; }
tbody tr:hover { background: #b9d1e1; }
.neutral .stat-icon, .product-icon { background: #a9c4d7; color: #05080c; }
.secondary { color: #05080c; }

/* Transparente Inhaltsflächen – das Hintergrundbild bleibt sichtbar */
.topbar { background: rgba(183, 208, 226, .82); }
.stat-card { background: rgba(201, 221, 234, .84); }
.inventory-card,
.anonymous-card,
.users-card,
.pin-form-card,
.pin-list-card { background: rgba(201, 221, 234, .82); }
th, .users-head { background: rgba(158, 189, 210, .86); }
tbody tr:hover { background: rgba(185, 209, 225, .86); }