.card {
    background: rgba(35, 31, 32, 0.67); border-radius: 36px; padding: 24px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); max-width: 450px; width: 90%;
    color: #fff; margin: auto 0; min-height: 0;
    /* scroll, never clip: with overflow:hidden anything past the height clamp (typically the
       Save/Next/Submit button at the bottom) was unreachable on short viewports */
    overflow-y: auto; overflow-x: hidden;
    max-height: calc(100vh - 180px); display: flex; flex-direction: column;
}
/* keep the (desktop) scrollbar track clear of the card's rounded corners, which otherwise clip
   its ends */
.card::-webkit-scrollbar-track { margin: 24px 0; }
@media (max-width: 1000px), (max-height: 700px) {
    /* .content is the scroller here (base.css) with 24px bottom padding, and the header may be
       compacted — clamp the card to what actually fits so it never forces a few-px phantom scroll
       (--header-height follows the compacted header) */
    .card.card { max-height: calc(100vh - var(--header-height) - 32px); }
}
.card-title {
    font-family: 'IllumyntSite', sans-serif; font-size: 28px; font-weight: 700;
    margin-bottom: 32px; text-align: center; color: white;
}
.card-subtitle {
    font-size: 13px; color: rgba(255,255,255,0.6);
    text-align: center; margin: -20px 0 24px;
}
.section-header {
    font-size: 12px; font-weight: 600; color: #67A4D6;
    text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 12px;
}
.input-group { margin-bottom: 24px; width: 100%; }
.input-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.input-group input,
.input-group select,
.input-group textarea {
    width: 100%; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px;
    background: #fff; color: #231F20; font-family: inherit; font-size: 16px; outline: none;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus { border-color: #67A4D6; }
.button {
    font-family: inherit; padding: 16px 32px 25px; background: rgba(255,255,255,0.15);
    color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; font-size: 16px; font-weight: 600;
    cursor: pointer; transition: background 0.2s, color 0.2s;
}
.button:hover { background: #031E3B; color: #fff; }
.button:disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.35); cursor: not-allowed; }
.small-button {
    font-family: inherit; padding: 8px 16px 12px; background: rgba(255,255,255,0.15);
    color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 100px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background 0.2s, color 0.2s;
}
.small-button:hover { background: #031E3B; color: #fff; }
.small-button.danger { background: #dc2626; color: #fff; border-color: transparent; }
.small-button.danger:hover { background: #b91c1c; }
.small-button:disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.35); cursor: not-allowed; }
.icon-button {
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; width: 48px; height: 48px;
    border-radius: 50%; cursor: pointer; font-size: 24px; display: flex;
    align-items: center; justify-content: center; transition: background 0.2s;
    text-shadow: 0 0 10px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,0.5);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.icon-button:hover { background: #031E3B; }
.login-card { display: flex; flex-direction: column; align-items: center; }
/* .card clips (overflow:hidden); on a short viewport that hid the login form's Sign In button below
   an invisible fold. Scroll instead so it's always reachable. Compound selector so it out-specifies
   a consumer page's own single-class .card override. (Consumers also reuse .login-card for menu
   cards, so it must keep .card's height clamp — never let it grow into the header.) */
.card.login-card { overflow-y: auto; overflow-x: hidden; }
.login-card form { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* was a hardcoded 350px — on a narrow window/panel the .card itself shrinks (width:90%) but this
   fixed-width input group did not, so it overflowed the card and got clipped by .card's own
   overflow:hidden (labels/inputs cut off). Cap at 350px but never exceed the card's own content
   width. */
.login-card .input-group { width: 100%; max-width: min(350px, 100%); }
.login-button { width: 100%; max-width: min(280px, 100%); height: 55px; margin-top: 16px; padding: 0 32px; line-height: 55px; }
.error-msg { color: #f87171; font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; }
.loading-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; z-index: 350;
}
.loading-overlay.active { display: flex; }
.loading-spinner {
    width: 56px; height: 56px; border: 4px solid rgba(255,255,255,0.18);
    border-top-color: var(--color-accent); border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.form-row .input-group { flex: 1 1 160px; margin-bottom: 0; width: auto; }

/* ---- Responsive safety net (every consumer app) --------------------------------------------------
   Consumers routinely give these shell classes fixed pixel widths (350px inputs / menu buttons,
   280px login buttons, 400–560px dialogs). A max-width cap never fights a consumer's `width:` — it
   only stops the element being wider than its container on phones and narrow windows, where a
   fixed width would otherwise overflow the card and get clipped. */
.input-group, .form-row, .button, .small-button, .login-button, .card-title, .card-subtitle,
.card-header, .section-header, .error-msg { max-width: 100%; }
/* long unbreakable tokens (ids, camel-cased names, e-mails) break inside their box instead of
   spilling out of a button, a list row or a dialog (inherited by everything in a card) */
.card, .button, .small-button, .login-button { overflow-wrap: anywhere; }
/* …but never inside tables: a squeezed cell must not break "2026-08-16" one character per line —
   tables keep their content width and scroll horizontally in their wrapper */
.card table, .card th, .card td { overflow-wrap: normal; }
/* wide data tables: put them in a .table-wrap and give the table min-width:max-content — the wrap
   scrolls sideways instead of the columns being squeezed into slivers */
.table-wrap { overflow-x: auto; max-width: 100%; }
.table-wrap > table { min-width: max-content; }
/* .card is a flex column with a height clamp: its text blocks, titles and form rows must never be
   the thing that shrinks (a squeezed paragraph spills its lines over the buttons below) — the card
   scrolls instead. Inner list/scroll regions opt back in with their own flex rules. */
.card > p, .card > h1, .card > h2, .card > h3, .card > h4, .card > .card-title, .card > .card-subtitle,
.card > .section-header, .card > label, .card > .input-group, .card > .form-row, .card > .error-msg,
.card > .table-wrap, .card > form > p, .card > form > .input-group, .card > form > .form-row { flex-shrink: 0; }
.input-group input, .input-group select, .input-group textarea { max-width: 100%; min-width: 0; }
.card img { max-width: 100%; }
.card-header { display: flex; align-items: center; margin-bottom: 24px; flex-shrink: 0; }
.card-header .icon-button { flex: 0 0 auto; }
.card-header .card-title { flex: 1; margin-bottom: 0; min-width: 0; }
.card-header .spacer { width: 48px; flex-shrink: 0; }
/* very narrow phones: a 28px single-word title between a back button and its balancing spacer
   ("Management") does not fit a ~240px card; shrink it and let the spacer give way */
@media (max-width: 420px) {
    .card-title { font-size: 22px; overflow-wrap: anywhere; }
    .card-header .spacer { width: 8px; }
}