/* Sharlam gates - "Dark Modern" (design 02, board 1) from the sharlam-design repo,
   with a second colour scheme taken from design 08 "Glassmorphism" (board 2).
   The two themes differ in COLOUR ONLY: every size, spacing, radius, shadow offset
   and effect is shared, so the layout and behaviour are identical in both. The one
   exception is the logo, which has a version for each background.
   Layout is responsive: one column on phones, a sidebar menu from 960px up. */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --page-base: #0b1a24;
    --page-bg: radial-gradient(ellipse at 90% 12%, #25313d70, transparent 35%), linear-gradient(145deg, #0d1722, #0b1a24);
    --bg: #0e1923;
    --ink: #eef5fc;
    --soft: #a9bccb;
    --placeholder: #c9d6e2;
    --line: #536d80;
    --line-soft: #24475a;
    --field-bg: #162734a6;
    --field-ink: #ffffff;
    --field-icon: #dfe9f2;
    --option-bg: #13232f;
    --card-bg: linear-gradient(125deg, #1d2c39, #13232f);
    --nav-bg: linear-gradient(120deg, #1c3444, #182633);
    --nav-line: #24485b;
    --nav-ink: #f4f8fa;
    --nav-hover-line: #3a6a85;
    --menu-ink: #e3ecf4;
    --hover-veil: #ffffff0f;
    --hover-veil-soft: #ffffff0a;
    --active-bg: linear-gradient(120deg, #008efc, #0077ff);
    --blue: linear-gradient(120deg, #118ffe, #0572f4);
    --blue-line: #269fff;
    --link-ink: #8fcbff;
    --red: linear-gradient(120deg, #ef0732, #df1d27);
    --red-line: #ed1c2e;
    --red-ink: #ff5a64;
    --red-soft-line: #7a2a33;
    --red-veil: #ef073214;
    --green: linear-gradient(135deg, #248c47, #087d40);
    --focus: #2898ff;
    --shadow-card: 0 5px 16px #0003;
    --shadow-nav: 0 4px 11px #0002;
    --shadow-active: 0 4px 10px #0046af25;
    --shadow-drawer: 0 10px 43px #0005;
    --dialog-bg: #13232f;
    --backdrop: #00152870;
    --notice-bg: #0f2a3d;
    --notice-line: #2f5a78;
    --notice-ink: #eef5fc;
    --badge-bg: #0a86fb26;
    --badge-line: #0a86fb66;
    --badge-ink: #8fcbff;
    --badge-guest-bg: #248c4726;
    --badge-guest-line: #248c4766;
    --badge-guest-ink: #7fdca0;
    --badge-none-bg: #ffffff0d;
    --emergency-bg: #1b1119a6;
    --footer-ink: #cfd9e4;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6edf6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --radius-card: 24px;
    --radius-tile: 19px;
    --radius-field: 10px;
    --radius-action: 11px;
}

/* Colours only - every other value above is inherited unchanged. */
:root[data-theme="blue"] {
    color-scheme: light;
    --page-base: #8fcdf7;
    /* A windy sky: soft cloud masses with white streaks torn sideways across them. */
    --page-bg:
        linear-gradient(172deg, transparent 11%, #ffffff66 14%, #ffffff29 17%, transparent 20%),
        linear-gradient(186deg, transparent 25%, #ffffff4f 28%, transparent 32%),
        linear-gradient(176deg, transparent 40%, #ffffff5c 43%, #ffffff24 46%, transparent 50%),
        linear-gradient(184deg, transparent 57%, #ffffff3d 61%, transparent 65%),
        linear-gradient(178deg, transparent 73%, #ffffff47 76%, #ffffff1c 79%, transparent 83%),
        radial-gradient(115% 9% at 26% 20%, #ffffff8a, transparent 70%),
        radial-gradient(90% 7% at 74% 45%, #ffffff66, transparent 72%),
        radial-gradient(130% 10% at 44% 68%, #ffffff52, transparent 74%),
        radial-gradient(100% 8% at 62% 90%, #ffffff40, transparent 74%),
        linear-gradient(168deg, #8fcdf7 0%, #6fb4ee 40%, #9ed6fa 74%, #d9f2ff 100%);
    --bg: #d3edfeee;
    --ink: #00336f;
    --soft: #2d6398;
    --placeholder: #5580ad;
    --line: #ffffffc4;
    --line-soft: #ffffffb3;
    --field-bg: #ffffff96;
    --field-ink: #042d62;
    --field-icon: #3f72a6;
    --option-bg: #ffffff;
    --card-bg: linear-gradient(135deg, #ffffff73, #ffffff42);
    --nav-bg: linear-gradient(130deg, #ffffff87, #ffffff4a);
    --nav-line: #ffffffa8;
    --nav-ink: #04305f;
    --nav-hover-line: #ffffffe0;
    --menu-ink: #04305f;
    --hover-veil: #ffffff7a;
    --hover-veil-soft: #ffffff5c;
    --active-bg: linear-gradient(115deg, #028afa, #0075fb);
    --blue: linear-gradient(135deg, #058cfb, #0562ce);
    --blue-line: #2781fc;
    --link-ink: #0a5fc4;
    --red: linear-gradient(110deg, #e71c27, #ed2831);
    --red-line: #e71c27;
    --red-ink: #c81a26;
    --red-soft-line: #e7a3a8;
    --red-veil: #e71c2714;
    --green: linear-gradient(135deg, #248c47, #087d40);
    --focus: #0a63d6;
    --shadow-card: 0 5px 16px #4788bd33;
    --shadow-nav: 0 4px 11px #347ec324;
    --shadow-active: 0 4px 10px #0574c340;
    --shadow-drawer: 0 10px 43px #1c5c9633;
    --dialog-bg: #eaf6ffef;
    --backdrop: #0b4a8166;
    --notice-bg: #ffffffa8;
    --notice-line: #ffffffcc;
    --notice-ink: #093566;
    --badge-bg: #0a86fb1f;
    --badge-line: #0a86fb66;
    --badge-ink: #0a5fc4;
    --badge-guest-bg: #1c7a3f1f;
    --badge-guest-line: #1c7a3f5c;
    --badge-guest-ink: #146b35;
    --badge-none-bg: #ffffff73;
    --emergency-bg: #ffffffb8;
    --footer-ink: #0c4880;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306356e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { background: var(--page-base); }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    background: var(--page-bg);
    background-attachment: fixed;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.icon {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.05;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The logo has a version for each background; each theme shows its own. */
:root[data-theme="dark"] .logo-light,
:root[data-theme="blue"] .logo-dark { display: none; }

/* ---------- page shell ---------- */

.app {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header" "main" "footer";
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
    padding: env(safe-area-inset-top) 16px 0;
}

.app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    min-height: 92px;
    padding-block: 14px;
}

.brand {
    display: block;
    margin-inline-start: auto;
    border-radius: 8px;
}

.brand-logo {
    display: block;
    width: 104px;
    height: auto;
}

.menu-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-inline-start: -8px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
}

.menu-button .icon { width: 28px; height: 28px; stroke-width: 1.9; }
.menu-button:hover { background: var(--hover-veil); }

.app-sidebar { display: none; }

.app-main {
    grid-area: main;
    min-width: 0;
    padding-bottom: 12px;
}

.app-footer {
    grid-area: footer;
    padding: 18px 0 calc(18px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 11px;
    color: var(--footer-ink);
}

/* Sign-in and error pages: no menu, the card sits in the middle of the screen. */
.no-chrome .app {
    grid-template-rows: 1fr auto;
    grid-template-areas: "main" "footer";
    max-width: 420px;
}

.no-chrome .app-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 32px;
}

@media (min-width: 960px) {
    .has-chrome .app {
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-areas: "header header" "nav main" "footer footer";
        column-gap: 40px;
        max-width: 980px;
        padding-inline: 24px;
    }

    .has-chrome .app-sidebar {
        display: block;
        grid-area: nav;
    }

    .has-chrome .menu-button { display: none; }
    .has-chrome .app-main { max-width: 560px; }

    /* No menu button on wide screens: the logo takes the start (right) of the header, above the menu. */
    .has-chrome .brand { margin-inline-start: 0; }
}

/* ---------- menu list (drawer on phones, sidebar on desktop) ---------- */

.side-nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
}

.app-sidebar .side-nav { position: sticky; top: 16px; }

.nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link,
.nav-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--menu-ink);
    font-size: 15px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.nav-link .icon,
.nav-logout .icon { width: 20px; height: 20px; color: var(--soft); }

.nav-link:hover { border-color: var(--nav-line); background: var(--hover-veil-soft); }

.nav-link.is-active {
    border-color: var(--blue-line);
    background: var(--active-bg);
    box-shadow: var(--shadow-active);
    color: #fff;
    font-weight: 700;
}

.nav-link.is-active .icon { color: #fff; }

/* settings item: opens the theme choice inside the menu */
.nav-settings .nav-link {
    width: 100%;
    background: none;
    text-align: start;
}

.nav-settings .nav-link > span { flex: 1; }

.nav-settings .chevron {
    width: 16px;
    height: 16px;
    transition: transform .15s ease;
}

.nav-settings .nav-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.theme-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 2px;
    padding: 6px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--field-bg);
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--menu-ink);
    font-size: 14px;
    text-align: start;
}

.theme-option:hover { border-color: var(--nav-line); background: var(--hover-veil); }

.theme-option[aria-checked="true"] {
    border-color: var(--blue-line);
    background: var(--hover-veil);
    font-weight: 700;
}

.theme-option .icon { width: 16px; height: 16px; margin-inline-start: auto; opacity: 0; }
.theme-option[aria-checked="true"] .icon { opacity: 1; }

.theme-swatch {
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.theme-swatch.is-dark { background: linear-gradient(140deg, #16374f, #0b1a24); }
.theme-swatch.is-blue { background: linear-gradient(140deg, #cef0ff, #75b9f2); }

.nav-user {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 4px 2px;
    border-top: 1px solid var(--line-soft);
}

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--nav-line);
    border-radius: 50%;
    background: var(--nav-bg);
    color: var(--soft);
}

.avatar .icon { width: 18px; height: 18px; }

.nav-user-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-logout { min-height: 40px; padding: 0 12px; color: var(--red-ink); font-size: 14px; }
.nav-logout .icon { color: var(--red-ink); }
.nav-logout:hover { border-color: var(--red-soft-line); background: var(--red-veil); }

/* ---------- home tiles (design 02 on design 10's tile shapes) ---------- */

.tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-bottom: 22px;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 82px;
    padding: 8px;
    border: 1px solid var(--nav-line);
    border-radius: var(--radius-tile);
    background: var(--nav-bg);
    box-shadow: var(--shadow-nav);
    color: var(--nav-ink);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: border-color .15s ease, filter .15s ease;
}

.tile .icon { width: 25px; height: 25px; }
.tile:hover { border-color: var(--nav-hover-line); filter: brightness(1.08); }
.tile.wide { grid-column: 1 / -1; min-height: 51px; flex-direction: row; }

.tile.primary {
    border-color: var(--blue-line);
    background: var(--active-bg);
    box-shadow: var(--shadow-active);
    color: #fff;
}

.tile.primary.wide { min-height: 60px; font-size: 17px; }

.drawer {
    position: fixed;
    inset: 0;
    z-index: 50;
    visibility: hidden;
    transition: visibility 0s .22s;
}

.drawer.is-open { visibility: visible; transition-delay: 0s; }

.drawer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--backdrop);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .22s ease;
}

.drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    padding: calc(16px + env(safe-area-inset-top)) 16px 20px;
    overflow-y: auto;
    border-left: 1px solid var(--line-soft);
    border-radius: 0 0 0 21px;
    background: var(--bg);
    box-shadow: var(--shadow-drawer);
    transform: translateX(100%);
    transition: transform .22s ease;
}

.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.drawer-logo { display: block; width: 80px; height: auto; }

.drawer-panel .side-nav { padding: 6px; border: 0; background: none; box-shadow: none; }

.drawer-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
}

.drawer-close:hover { background: var(--hover-veil); }

/* ---------- cards and headings ---------- */

.card {
    padding: 26px 14px 20px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
}

.card + .card { margin-top: 20px; }

.card-head {
    margin-bottom: 16px;
    text-align: center;
}

.card-head h1 {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
}

.greeting {
    margin: 5px 0 0;
    font-size: 15px;
    line-height: 19px;
}

.quota {
    margin: 10px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--soft);
}

.section-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--soft);
    text-align: center;
}

/* ---------- form fields ---------- */

.fields {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-label {
    display: block;
    margin: 14px 1px 6px;
    font-size: 13px;
    color: var(--soft);
}

.form-stack > .form-label:first-child { margin-top: 0; }

.field {
    position: relative;
    display: flex;
    align-items: center;
}

.field input,
.field select,
.field textarea {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 11px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background-color: var(--field-bg);
    color: var(--field-ink);
    font-size: 15px;
    text-align: center;
}

.field textarea {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.5;
    text-align: right;
    resize: vertical;
}

.field select {
    padding-left: 36px;
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 18px;
    cursor: pointer;
}

.field select option { background: var(--option-bg); color: var(--field-ink); }

.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); opacity: 1; }

.field input[readonly] { color: var(--soft); cursor: default; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--blue-line);
    box-shadow: 0 0 0 3px #0a86fb40;
}

.field .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    color: var(--field-icon);
    pointer-events: none;
}

.field.has-icon input { padding-right: 42px; padding-left: 12px; }

.field.icon-left .icon { right: auto; left: 12px; width: 18px; height: 18px; }
.field.icon-left input { padding-right: 12px; padding-left: 38px; }

.field input[type=date],
.field input[type=time],
.field input.ltr { direction: ltr; }

/* The native date/time picker still opens, but from anywhere on the field and
   without its own glyph - the design's calendar/clock icon stands in for it. */
.field input::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    opacity: 0;
    cursor: pointer;
}

.field.date-stacked input { height: 50px; padding-top: 16px; }

.date-caption {
    position: absolute;
    top: 6px;
    right: 42px;
    left: 38px;
    z-index: 1;
    font-size: 12px;
    color: var(--soft);
    text-align: center;
    pointer-events: none;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    cursor: pointer;
}

.check input {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--field-bg);
    cursor: pointer;
}

.check input:checked { border-color: var(--blue-line); background: var(--active-bg); }

.check input:checked::after {
    content: "";
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

/* ---------- buttons ---------- */

.actions {
    display: flex;
    gap: 11px;
    margin-top: 15px;
}

.actions > .action { flex: 1; min-width: 0; }

.action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-action);
    box-shadow: 0 2px 3px #0002;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease;
}

.action .icon { width: 20px; height: 20px; }
.action:hover { filter: brightness(1.1); }
.action:disabled { opacity: .6; cursor: default; filter: none; }
.action.block { width: 100%; }
form > .action.block { margin-top: 14px; }
.action.primary { background: var(--blue); }
.action.danger { background: var(--red); }
.action.success { background: var(--green); }
.action.secondary { border: 1px solid var(--line); background: var(--nav-bg); color: var(--nav-ink); }

.add-row {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.add-row .action { min-width: 96px; }

.list-search {
    display: flex;
    height: 45px;
    margin-top: 18px;
}

.list-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--radius-field) var(--radius-field) 0;
    background: var(--field-bg);
    color: var(--field-ink);
    text-align: center;
}

.list-search input::placeholder { color: var(--placeholder); opacity: 1; }
.list-search input:focus { outline: none; border-color: var(--blue-line); }

.list-search button {
    display: grid;
    place-items: center;
    flex: none;
    width: 55px;
    border: 1px solid var(--blue-line);
    border-radius: var(--radius-field) 0 0 var(--radius-field);
    background: var(--blue);
    color: #fff;
}

.link-button {
    display: inline-block;
    margin-top: 16px;
    color: var(--link-ink);
    font-size: 14px;
    text-decoration: none;
}

.link-button:hover { text-decoration: underline; }

.icon-button {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid var(--nav-line);
    border-radius: 10px;
    background: var(--nav-bg);
    color: var(--nav-ink);
    text-decoration: none;
}

.icon-button .icon { width: 18px; height: 18px; }
.icon-button:hover { border-color: var(--nav-hover-line); filter: brightness(1.1); }
.icon-button.danger { border-color: var(--red-soft-line); color: var(--red-ink); }

/* ---------- lists of records ---------- */

.record-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.record {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--field-bg);
}

.record-body { flex: 1; min-width: 0; }

.record-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.record-title .plate { letter-spacing: .5px; }
.record-title .sub { font-weight: 400; color: var(--soft); }

.record-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 10px;
    margin: 8px 0 0;
    font-size: 13px;
}

.record-meta dt { color: var(--soft); }
.record-meta dd { margin: 0; overflow-wrap: anywhere; }

.record-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--soft);
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--badge-line);
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--badge-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.badge.guest { border-color: var(--badge-guest-line); background: var(--badge-guest-bg); color: var(--badge-guest-ink); }
.badge.none { border-color: var(--line-soft); background: var(--badge-none-bg); color: var(--soft); }

.empty {
    margin: 18px 0 0;
    padding: 14px;
    border: 1px dashed var(--line-soft);
    border-radius: 12px;
    color: var(--soft);
    font-size: 13px;
    text-align: center;
}

.notice {
    margin-top: 14px;
    padding: 11px;
    border: 1px solid var(--notice-line);
    border-radius: 10px;
    background: var(--notice-bg);
    color: var(--notice-ink);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.notice:empty { display: none; }

/* ---------- guest car / emergency ---------- */

.emergency {
    margin-top: 22px;
    padding: 14px 22px 19px;
    border: 1.3px solid var(--red-line);
    border-radius: 13px;
    background: var(--emergency-bg);
    text-align: center;
}

.emergency h2 {
    margin: 0 0 18px;
    color: var(--red-ink);
    font-size: 21px;
    line-height: 26px;
}

.emergency-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- sign-in ---------- */

.auth-card { padding-top: 30px; text-align: center; }

.auth-logo {
    display: block;
    width: 104px;
    height: auto;
    margin: 0 auto 20px;
}

.auth-card .fields { margin-top: 18px; }
.auth-card .action.block { margin-top: 16px; }

/* ---------- confirm dialog ---------- */

.confirm-dialog {
    width: min(360px, calc(100% - 32px));
    padding: 24px;
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    background: var(--dialog-bg);
    box-shadow: 0 20px 70px #0008;
    color: var(--ink);
}

.confirm-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(5px); }
.confirm-dialog h2 { margin: 0 0 10px; font-size: 21px; }
.confirm-dialog p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.6; }
.confirm-dialog .actions { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}