:root {
    --bo-navy: #102745;
    --bo-navy-deep: #0b1e36;
    --bo-blue: #2563eb;
    --bo-blue-soft: #eaf2ff;
    --bo-ink: #172b45;
    --bo-muted: #708198;
    --bo-line: #e5ebf3;
    --bo-canvas: #f3f6fb;
    --bo-radius: 16px;
    --bo-shadow: 0 12px 32px rgba(25, 48, 79, .07);
}

html, body { min-height: 100%; }
body { color: var(--bo-ink); background: var(--bo-canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
::selection { background: #dbeafe; color: #123d7b; }
.backoffice-shell { height: 100vh; height: 100dvh; }
.backoffice-shell #mobile-overlay { appearance: none; padding: 0; border: 0; transition: opacity .3s ease; }
.backoffice-skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; color: #fff; background: var(--bo-navy); border-radius: 8px; transform: translateY(-150%); }
.backoffice-skip-link:focus { transform: translateY(0); }
.backoffice-brand-name { display: block; color: #fff; font-size: 12px; font-weight: 850; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.backoffice-brand-name > span { color: #70a7ff; }
.backoffice-brand-name small { display: block; padding-top: 6px; color: #98abc4; font-size: 9px; font-weight: 600; letter-spacing: .18em; }

#sidebar {
    width: 272px;
    background: linear-gradient(180deg, var(--bo-navy) 0%, var(--bo-navy-deep) 100%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 8px 0 28px rgba(12, 31, 55, .08);
}
#sidebar > div:first-child { min-height: 76px; padding-left: 22px; padding-right: 18px; background: rgba(4, 19, 37, .24); border-color: rgba(255,255,255,.09); }
#sidebar nav { padding: 22px 14px; }
#sidebar nav > div { margin-bottom: 28px; }
#sidebar nav h3 { margin: 0 10px 10px; color: #91a6c0; font-size: 10px; letter-spacing: .14em; }
#sidebar nav a.group { min-height: 44px; gap: 12px; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; color: #c0cee0; font-size: 13px; font-weight: 550; }
#sidebar nav a.group:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.06); }
#sidebar nav a.group > div:not([class*="absolute"]) { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.07); color: #b8c9df; }
#sidebar nav a.group:hover > div:not([class*="absolute"]) { background: rgba(78,145,255,.18); color: #a9cbff; }
#sidebar nav a.group.bg-blue-500\/10 { color: #fff; background: rgba(55, 125, 235, .19); border-color: rgba(118, 169, 255, .2); }
#sidebar nav a.group.bg-blue-500\/10 > div:not([class*="absolute"]) { color: #fff; background: rgba(80, 145, 255, .28); }
#sidebar nav a.group [class*="absolute"] { left: -14px; width: 3px; height: 24px; border-radius: 0 4px 4px 0; box-shadow: 0 0 14px rgba(72, 145, 255, .65); }
#sidebar > div:last-child { padding: 14px; background: rgba(4, 19, 37, .26); border-color: rgba(255,255,255,.09); }
#sidebar > div:last-child p { color: #8ea5c1; font-size: 10px; letter-spacing: .16em; }

header.sticky { height: 76px; padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); background: rgba(255,255,255,.94); border-color: var(--bo-line); box-shadow: 0 4px 18px rgba(25,48,79,.035); }
header.sticky > div:first-of-type p { margin: 0; }
header.sticky > div:first-of-type h1 { color: var(--bo-ink); font-size: 15px; }
#user-menu-btn { border: 1px solid transparent; border-radius: 12px; padding: 6px 10px 6px 6px; }
#user-menu-btn:hover { background: #f5f8fc; border-color: var(--bo-line); }
#user-menu-btn > div:first-child { width: 38px; height: 38px; background: linear-gradient(145deg, #4388f5, #1e55bd); box-shadow: 0 3px 8px rgba(37,99,235,.24); }
#user-menu-btn span { color: var(--bo-ink); }
#user-dropdown { border: 1px solid var(--bo-line); border-radius: 14px; box-shadow: 0 18px 48px rgba(16,39,69,.16); }

main.flex-1 { background: var(--bo-canvas); }
main.flex-1 > div { padding-top: clamp(22px, 3vw, 36px); padding-bottom: 42px; }
.backoffice-page { min-height: calc(100vh - 160px); padding: clamp(18px, 2.3vw, 32px) !important; border: 1px solid var(--bo-line); border-radius: var(--bo-radius) !important; box-shadow: var(--bo-shadow) !important; }

.backoffice-page h1, .backoffice-page h2, .backoffice-page h3 { color: var(--bo-ink); letter-spacing: -.025em; }
.backoffice-page input:not([type="checkbox"]):not([type="radio"]), .backoffice-page select, .backoffice-page textarea,
input.form-control, select.form-control, textarea.form-control {
    min-height: 42px; border: 1px solid #dbe4ef; border-radius: 9px; background-color: #fff; color: var(--bo-ink); box-shadow: 0 1px 2px rgba(18,42,72,.025); transition: border-color .18s ease, box-shadow .18s ease;
}
.backoffice-page input:focus, .backoffice-page select:focus, .backoffice-page textarea:focus,
input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: #78a9f8; outline: 0; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.backoffice-page label, label { color: #405570; font-weight: 600; }
.backoffice-page button, .backoffice-page .btn { border-radius: 9px; font-weight: 650; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.backoffice-page .btn-primary, .backoffice-page button[type="submit"]:not(.text-red-600) { box-shadow: 0 4px 10px rgba(37,99,235,.14); }
.backoffice-page table { border-collapse: separate; border-spacing: 0; }
.backoffice-page table thead th { padding: 13px 14px; color: #64768d; background: #f6f8fc; border-bottom: 1px solid var(--bo-line); font-size: 11px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.backoffice-page table tbody td { padding: 13px 14px; border-bottom: 1px solid #edf1f6; color: #344a65; vertical-align: middle; }
.backoffice-page table tbody tr:hover { background: #f8faff; }
.backoffice-page .card, .backoffice-page .card-body { border-color: var(--bo-line); border-radius: 12px; }
.backoffice-page .table-responsive, .backoffice-page .overflow-x-auto { max-width: 100%; overscroll-behavior-x: contain; }
.backoffice-page img, .backoffice-page canvas, .backoffice-page iframe { max-width: 100%; }
.backoffice-page pre, .backoffice-page code { max-width: 100%; overflow-wrap: anywhere; }

.admin-dashboard { display: flex; flex-direction: column; gap: 30px; }
.admin-dashboard__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 2px 0 24px; border-bottom: 1px solid var(--bo-line); }
.admin-dashboard__eyebrow, .admin-action-card__eyebrow { margin: 0 0 8px; color: #3c72c3; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.admin-dashboard__intro h2 { margin: 0; color: var(--bo-ink); font-size: clamp(24px, 3vw, 32px); font-weight: 750; letter-spacing: -.04em; }
.admin-dashboard__description { margin: 8px 0 0; color: var(--bo-muted); font-size: 14px; }
.admin-dashboard__date { flex: 0 0 auto; padding: 9px 12px; color: #506782; background: #f4f7fb; border: 1px solid var(--bo-line); border-radius: 9px; font-size: 12px; font-weight: 650; }
.admin-dashboard__section-heading { display: flex; align-items: center; justify-content: space-between; }
.admin-dashboard__section-heading h3 { margin: 0; font-size: 16px; font-weight: 750; }
.admin-dashboard__section-heading p { margin: 4px 0 0; color: var(--bo-muted); font-size: 13px; }
.admin-dashboard__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
.admin-action-card { min-width: 0; padding: 22px; background: #fff; border: 1px solid var(--bo-line); border-radius: 14px; box-shadow: 0 4px 14px rgba(25,48,79,.035); }
.admin-action-card__icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 20px; border-radius: 12px; }
.admin-action-card__icon svg { width: 21px; height: 21px; }
.admin-action-card__icon--blue { color: #2768ca; background: #eaf2ff; }
.admin-action-card__icon--amber { color: #a66a0b; background: #fff5df; }
.admin-action-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.admin-action-card__heading h3 { margin: 0; font-size: 16px; font-weight: 750; line-height: 1.4; }
.admin-action-card__eyebrow { margin-bottom: 5px; font-size: 9px; }
.admin-action-card__badge { flex: 0 0 auto; padding: 5px 8px; color: #426b9e; background: #f1f6fd; border-radius: 999px; font-size: 10px; font-weight: 750; }
.admin-action-card__badge--amber { color: #8e5b07; background: #fff4dc; }
.admin-action-card__description { min-height: 42px; margin: 10px 0 20px; color: var(--bo-muted); font-size: 13px; line-height: 1.6; }
.admin-form { display: flex; flex-direction: column; gap: 16px; }
.admin-form__field { display: flex; flex-direction: column; gap: 7px; }
.admin-form__field label { color: #354c68; font-size: 12px; font-weight: 700; }
.admin-form__hint { color: #8191a5; font-size: 11px; }
.admin-action-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 9px; padding-top: 2px; }
.admin-action-card__footer--end { justify-content: flex-end; }
.admin-checkbox { display: flex; align-items: flex-start; gap: 9px; color: #405570; font-size: 12px; line-height: 1.5; cursor: pointer; }
.admin-checkbox input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--bo-blue); }
.admin-feedback { padding: 10px 12px; border-radius: 8px; font-size: 12px; }
.admin-feedback--error { color: #9e3030; background: #fff1f1; border: 1px solid #f6d2d2; }
.admin-action-card--caution { border-top: 3px solid #eab54f; }

.clinic-dashboard { display: flex; flex-direction: column; gap: 28px; }
.clinic-dashboard__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid var(--bo-line); }
.clinic-dashboard__eyebrow { color: #356fb9; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.clinic-dashboard__hero h2 { margin: 9px 0 7px; color: var(--bo-ink); font-size: clamp(23px, 3vw, 32px); font-weight: 750; letter-spacing: -.04em; }
.clinic-dashboard__hero p { margin: 0; color: var(--bo-muted); font-size: 14px; }
.clinic-dashboard__today { flex: 0 0 auto; padding: 9px 12px; color: #506782; background: #f4f7fb; border: 1px solid var(--bo-line); border-radius: 9px; font-size: 11px; font-weight: 650; }
.clinic-dashboard__notice { display: flex; align-items: flex-start; gap: 14px; padding: 17px 19px; background: linear-gradient(110deg, #f0f6ff, #f8fbff); border: 1px solid #d9e8fb; border-radius: 12px; }
.clinic-dashboard__notice-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; color: #2868b8; background: #e0edff; border-radius: 10px; }
.clinic-dashboard__notice-icon svg { width: 18px; height: 18px; }
.clinic-dashboard__notice strong { color: #24476f; font-size: 12px; font-weight: 750; }
.clinic-dashboard__notice p { margin: 5px 0 0; color: #5d7188; font-size: 12px; line-height: 1.6; }
.clinic-dashboard__section-title h3 { margin: 0; color: var(--bo-ink); font-size: 16px; font-weight: 750; }
.clinic-dashboard__section-title p { margin: 4px 0 0; color: var(--bo-muted); font-size: 12px; }
.clinic-dashboard__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.clinic-action { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 18px; color: inherit; background: #fff; border: 1px solid var(--bo-line); border-radius: 12px; box-shadow: 0 3px 12px rgba(25,48,79,.035); text-decoration: none; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.clinic-action:hover { color: inherit; border-color: #bed4f1; box-shadow: 0 9px 22px rgba(25,48,79,.08); transform: translateY(-2px); }
.clinic-action:focus-visible { outline: 3px solid rgba(37,99,235,.24); outline-offset: 2px; }
.clinic-action__icon { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 11px; }
.clinic-action__icon svg { width: 21px; height: 21px; }
.clinic-action__icon--blue { color: #2768c4; background: #eaf2ff; }
.clinic-action__icon--indigo { color: #555fc1; background: #f0efff; }
.clinic-action__icon--teal { color: #188b87; background: #e7f8f6; }
.clinic-action__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.clinic-action__copy strong { color: #203955; font-size: 13px; font-weight: 750; }
.clinic-action__copy > span { color: #77899e; font-size: 11px; line-height: 1.5; }
.clinic-action__arrow { flex: 0 0 auto; width: 17px; height: 17px; color: #8ea1b8; }

@media (max-width: 900px) {
    .admin-dashboard__grid { grid-template-columns: minmax(0, 1fr); }
    .admin-action-card__description { min-height: 0; }
    .clinic-dashboard__actions { grid-template-columns: minmax(0, 1fr); }
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(166,187,214,.38); border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(166,187,214,.62); }

@media (max-width: 767px) {
    .backoffice-shell { overflow: hidden; }
    body.backoffice-nav-open { overflow: hidden; }
    .backoffice-shell > .flex-1 { min-width: 0; }
    #sidebar { width: min(300px, 86vw); }
    header.sticky { height: 64px; padding-left: 18px; padding-right: 16px; }
    main.flex-1 > div { padding: 16px 12px 28px; }
    .backoffice-page { min-height: auto; padding: 18px 14px !important; border-radius: 13px !important; }
    .admin-dashboard { gap: 22px; }
    .admin-dashboard__intro { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 19px; }
    .admin-dashboard__date { font-size: 11px; }
    .clinic-dashboard { gap: 21px; }
    .clinic-dashboard__hero { align-items: flex-start; flex-direction: column; gap: 13px; padding-bottom: 19px; }
    .clinic-dashboard__today { font-size: 10px; }
    .clinic-dashboard__notice { gap: 11px; padding: 14px; }
    .clinic-action { padding: 15px; }
    .admin-action-card { padding: 18px; }
    .admin-action-card__heading { flex-wrap: wrap; }
    .admin-action-card__footer .btn { flex: 1 1 100%; min-height: 42px; }
    .admin-action-card__footer--end .btn { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Sign-in experience shared by backoffice and member portal */
.auth-shell { min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--bo-ink); background: #fff; }
.auth-layout, .auth-screen { min-height: 100vh; min-height: 100dvh; }
.auth-screen { display: grid; grid-template-columns: minmax(390px, .88fr) minmax(500px, 1.12fr); background: #fff; }
.auth-brand-panel { position: relative; display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(34px, 5vw, 68px); color: #fff; background: linear-gradient(145deg, #102744 0%, #123766 52%, #1455a0 100%); isolation: isolate; }
.auth-brand-panel::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 52px 52px; content: ""; mask-image: linear-gradient(120deg, #000, transparent 80%); }
.auth-brand { display: inline-flex; width: fit-content; align-items: center; gap: 13px; color: #fff; text-decoration: none; }
.auth-brand img { width: 44px; height: 44px; object-fit: contain; }
.auth-brand > span { padding-left: 13px; border-left: 1px solid rgba(255,255,255,.24); color: #d8e7fc; font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.auth-brand__content { position: relative; z-index: 2; max-width: 480px; margin: auto 0; padding: 70px 0 88px; }
.auth-brand__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #bdd6fb; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.auth-brand__eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #69a8ff; box-shadow: 0 0 0 5px rgba(105,168,255,.13); }
.auth-brand__content h1 { margin: 22px 0 14px; color: #fff; font-size: clamp(38px, 4.2vw, 58px); font-weight: 550; letter-spacing: -.055em; line-height: 1.07; }
.auth-brand__content h1 strong { color: #a9ccff; font-weight: 750; }
.auth-brand__content > p { max-width: 400px; margin: 0; color: #c1d1e6; font-size: 15px; line-height: 1.75; }
.auth-brand__features { display: grid; gap: 14px; margin-top: 40px; }
.auth-brand__features > div { display: flex; align-items: center; gap: 12px; color: #e2ecf8; font-size: 13px; font-weight: 550; }
.auth-feature-icon { display: grid; width: 32px; height: 32px; place-items: center; color: #b8d4fb; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.11); border-radius: 9px; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
.auth-brand__footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: #96b1d2; font-size: 10px; }
.auth-brand__orb { position: absolute; z-index: 0; pointer-events: none; border: 1px solid rgba(192,220,255,.12); border-radius: 50%; }
.auth-brand__orb--one { right: -215px; bottom: 12%; width: 510px; height: 510px; box-shadow: 0 0 0 45px rgba(192,220,255,.025), 0 0 0 90px rgba(192,220,255,.025); }
.auth-brand__orb--two { top: 16%; right: 13%; width: 130px; height: 130px; background: radial-gradient(circle, rgba(109,171,255,.18), transparent 70%); border: 0; }
.auth-main { display: flex; min-width: 0; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: clamp(34px, 6vw, 88px); background: linear-gradient(135deg, #fff 0%, #fbfcff 100%); }
.auth-card { width: min(100%, 440px); padding: 8px 0; }
.auth-card__header { margin-bottom: 32px; }
.auth-card__eyebrow { display: inline-block; margin-bottom: 12px; color: #2764b7; font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.auth-card__header h2 { margin: 0; color: #142943; font-size: clamp(28px, 3vw, 34px); font-weight: 750; letter-spacing: -.045em; }
.auth-card__header p { margin: 9px 0 0; color: #77889d; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-field { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.auth-field > label, .auth-field__label-row > label { color: #364c66; font-size: 12px; font-weight: 700; }
.auth-input-wrap { position: relative; display: flex; min-height: 52px; align-items: center; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; box-shadow: 0 2px 5px rgba(17,42,72,.025); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.auth-input-wrap:focus-within { border-color: #76a7ef; background: #fff; box-shadow: 0 0 0 4px rgba(42,108,202,.1); }
.auth-input-wrap > svg { position: absolute; left: 15px; width: 18px; height: 18px; color: #8a9bb0; pointer-events: none; }
.auth-input-wrap > input { width: 100%; min-width: 0; height: 50px; padding: 0 16px 0 45px; color: #1b304a; background: transparent; border: 0; border-radius: inherit; outline: 0; font: inherit; font-size: 13px; }
.auth-input-wrap > input::placeholder { color: #a0adbd; font-weight: 400; }
.auth-password-toggle { flex: 0 0 auto; margin-right: 10px; padding: 7px 8px; color: #53708f; background: transparent; border: 0; border-radius: 6px; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-password-toggle:hover { color: #1558aa; background: #f1f6fd; }
.auth-field__label-row { display: flex; justify-content: space-between; }
.auth-remember { display: flex; align-items: center; gap: 9px; color: #556b84; font-size: 12px; cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; margin: 0; accent-color: #2368c4; }
.auth-submit { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; padding: 0 18px; color: #fff; background: linear-gradient(100deg, #1f5eae, #2878da); border: 1px solid #2469bf; border-radius: 11px; box-shadow: 0 8px 18px rgba(32,99,184,.2); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.auth-submit:hover { filter: brightness(1.04); box-shadow: 0 11px 24px rgba(32,99,184,.26); transform: translateY(-1px); }
.auth-submit:focus-visible, .auth-password-toggle:focus-visible { outline: 3px solid rgba(49,123,221,.32); outline-offset: 2px; }
.auth-submit:disabled { cursor: wait; opacity: .8; transform: none; }
.auth-submit svg { width: 17px; height: 17px; }
.auth-spinner { animation: auth-spin .8s linear infinite; }
.auth-spinner.hidden { display: none; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-secure-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; padding: 13px 12px; color: #627790; background: #f5f8fc; border: 1px solid #e8eef5; border-radius: 9px; font-size: 11px; font-weight: 600; }
.auth-secure-note svg { flex: 0 0 auto; width: 17px; height: 17px; color: #3974bd; }
.auth-validation:not(.validation-summary-valid) { padding: 11px 13px; color: #a4323b; background: #fff3f3; border: 1px solid #f3d8db; border-radius: 9px; font-size: 12px; }
.auth-validation.validation-summary-valid { display: none; }
.auth-validation ul { margin: 0; padding-left: 18px; }
.auth-validation__field:not(:empty) { color: #a4323b; font-size: 11px; }
.auth-mobile-brand, .auth-mobile-footer { display: none; }

.legacy-account-shell { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; color: var(--bo-ink); background: #f3f6fb; }
.legacy-account-content { display: flex; flex: 1; align-items: center; justify-content: center; width: 100%; padding: 34px 18px; }
.legacy-account-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 18px; padding: 18px; color: #8292a6; font-size: 10px; }
.legacy-account-shell .container { max-width: 100%; }
.legacy-account-shell .card { border: 1px solid var(--bo-line); border-radius: 14px; box-shadow: var(--bo-shadow); }
.legacy-account-shell .btn { border-radius: 9px; font-weight: 650; }
.legacy-account-shell .form-control { min-height: 44px; border-color: #dce5ef; border-radius: 9px; }
.legacy-account-shell .form-control:focus { border-color: #76a7ef; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.account-register { width: min(100%, 980px); margin: 24px auto; }
.account-register__header { margin-bottom: 22px; text-align: center; }
.account-register__header > span { color: #346fb9; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.account-register__header h1 { margin: 8px 0; color: #172d49; font-size: clamp(24px, 3vw, 32px); font-weight: 750; letter-spacing: -.04em; }
.account-register__header p { margin: 0; color: #71849b; font-size: 13px; }
.account-register__form { padding: clamp(18px, 3vw, 30px); background: #fff; border: 1px solid var(--bo-line); border-radius: 14px; box-shadow: var(--bo-shadow); }
.account-register__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px 14px; }
.account-register__grid .form-group { min-width: 0; margin: 0; }
.account-register__grid label { display: block; margin-bottom: 7px; color: #405570; font-size: 11px; font-weight: 700; }
.account-register__grid .form-control { width: 100%; min-height: 42px; }
.account-register__actions { display: flex; justify-content: flex-end; margin-top: 23px; padding-top: 18px; border-top: 1px solid #edf1f6; }
.account-register__actions .btn { min-height: 42px; padding: 0 20px; background: #2366bd; border-color: #2366bd; }
.access-denied-card { width: min(100%, 500px); margin: 28px auto; padding: clamp(24px, 4vw, 42px); background: #fff; border: 1px solid var(--bo-line); border-radius: 16px; box-shadow: var(--bo-shadow); text-align: center; }
.access-denied-card__icon { display: grid; width: 54px; height: 54px; place-items: center; margin: 0 auto 18px; color: #ad7822; background: #fff5df; border-radius: 15px; }
.access-denied-card__icon svg { width: 26px; height: 26px; }
.access-denied-card__eyebrow { color: #a36b10; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.access-denied-card h1 { margin: 10px auto; color: var(--bo-ink); font-size: 23px; font-weight: 750; letter-spacing: -.03em; }
.access-denied-card p { margin: 0 auto 22px; color: #6e8199; font-size: 13px; line-height: 1.7; }
.access-denied-card .btn { padding: 10px 18px; background: #2366bd; border-color: #2366bd; }
.legacy-admin-shell { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; color: var(--bo-ink); background: var(--bo-canvas); }
.legacy-admin-header { position: sticky; z-index: 5; top: 0; display: flex; min-height: 76px; align-items: center; gap: 24px; padding: 12px clamp(18px, 4vw, 56px); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--bo-line); box-shadow: 0 3px 14px rgba(25,48,79,.035); }
.legacy-admin-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bo-ink); text-decoration: none; font-size: 13px; font-weight: 600; }
.legacy-admin-brand img { width: 42px; height: 36px; object-fit: contain; }
.legacy-admin-brand strong { color: #1d63b6; font-weight: 850; }
.legacy-admin-header__context { display: flex; flex: 1; flex-direction: column; gap: 2px; padding-left: 20px; border-left: 1px solid var(--bo-line); }
.legacy-admin-header__context span:first-child { color: #316bb5; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.legacy-admin-header__context span:last-child { color: #78899d; font-size: 11px; }
.legacy-admin-back { padding: 9px 12px; color: #536981; background: #f6f8fb; border: 1px solid var(--bo-line); border-radius: 8px; font-size: 11px; font-weight: 650; text-decoration: none; }
.legacy-admin-back:hover { color: #1e5ea8; background: #edf4fd; }
.legacy-admin-main { display: flex; flex: 1; justify-content: center; width: 100%; padding: clamp(22px, 4vw, 48px) 20px; }
.legacy-admin-main--plain { background: radial-gradient(circle at 50% 0, #fff 0, transparent 56%); }
.legacy-admin-query-content { width: min(100%, 1280px); }
.legacy-admin-surface { width: min(100%, 1160px); padding: clamp(20px, 3vw, 34px); background: #fff; border: 1px solid var(--bo-line); border-radius: 15px; box-shadow: var(--bo-shadow); }
.legacy-admin-surface .table-responsive { max-width: 100%; overflow-x: auto; }
.legacy-admin-surface table thead th { color: #61758e; background: #f5f8fc; border-color: var(--bo-line); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.legacy-admin-surface table td { color: #334a65; border-color: #ebf0f6; vertical-align: middle; }
.legacy-admin-surface .form-control { min-height: 42px; border-color: #dce5ef; border-radius: 8px; }
.legacy-admin-surface .btn { border-radius: 8px; font-weight: 650; }
.legacy-admin-surface h1, .legacy-admin-surface h2, .legacy-admin-surface h3, .legacy-admin-surface h4, .legacy-admin-surface h5 { color: var(--bo-ink); font-weight: 730; letter-spacing: -.025em; }

@media (max-width: 900px) {
    .auth-screen { grid-template-columns: minmax(320px, .82fr) minmax(410px, 1.18fr); }
    .auth-brand-panel { padding: 34px; }
    .auth-main { padding: 42px; }
}
@media (max-width: 700px) {
    .auth-screen { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
    .auth-brand-panel { display: none; }
    .auth-main { justify-content: flex-start; padding: 28px 22px 20px; }
    .auth-mobile-brand { display: flex; width: min(100%, 440px); align-items: center; gap: 11px; margin: 0 auto 48px; color: #172d49; font-size: 13px; font-weight: 800; }
    .auth-mobile-brand img { width: 42px; height: 42px; object-fit: contain; }
    .auth-mobile-brand strong { display: block; margin-top: 2px; color: #60758e; font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
    .auth-card { margin: auto; padding: 0; }
    .auth-card__header { margin-bottom: 27px; }
    .auth-form { gap: 18px; }
    .auth-mobile-footer { display: block; width: min(100%, 440px); margin: 45px auto 0; color: #8797aa; font-size: 9px; line-height: 1.6; text-align: center; }
    .legacy-admin-header { min-height: 66px; gap: 12px; padding: 10px 14px; }
    .legacy-admin-brand { gap: 6px; font-size: 11px; }
    .legacy-admin-brand img { width: 34px; height: 30px; }
    .legacy-admin-header__context { padding-left: 12px; }
    .legacy-admin-header__context span:last-child { max-width: 125px; }
    .legacy-admin-back { padding: 8px; font-size: 10px; white-space: nowrap; }
    .legacy-admin-main { padding: 16px 11px 28px; }
    .legacy-admin-surface { padding: 16px 12px; border-radius: 12px; }
    .account-register { margin: 0; }
    .account-register__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .account-register__grid { grid-template-columns: minmax(0, 1fr); }
    .account-register__actions .btn { width: 100%; }
}
@media (max-width: 380px) {
    .auth-main { padding-right: 17px; padding-left: 17px; }
    .auth-mobile-brand { margin-bottom: 34px; }
    .auth-input-wrap > input { padding-right: 10px; padding-left: 41px; }
}

/* Backoffice sign-in: a dedicated visual system; member sign-in keeps its own layout. */
.auth-screen--backoffice { grid-template-columns: minmax(0, 1.06fr) minmax(440px, .94fr); background: #f5f8fc; }
.auth-screen--backoffice .auth-brand-panel { padding: clamp(32px, 3.6vw, 64px); background: radial-gradient(circle at 88% 66%, rgba(35, 111, 210, .32), transparent 33%), linear-gradient(145deg, #081b33 4%, #0c2a4d 57%, #103e70 100%); }
.auth-screen--backoffice .auth-brand-panel::before { background-size: 48px 48px; opacity: .65; mask-image: linear-gradient(150deg, transparent 7%, #000 74%); }
.auth-screen--backoffice .auth-brand { gap: 14px; }
.auth-screen--backoffice .auth-brand img { width: 84px; height: 42px; }
.auth-screen--backoffice .auth-brand > span { color: #dceaff; font-size: 11px; letter-spacing: .2em; }
.auth-screen--backoffice .auth-brand__content { width: min(100%, 610px); max-width: none; padding: 52px 0 42px; }
.auth-screen--backoffice .auth-brand__eyebrow { color: #a9c9f2; font-size: 11px; letter-spacing: .16em; }
.auth-screen--backoffice .auth-brand__eyebrow > span { background: #5ba8ff; }
.auth-screen--backoffice .auth-brand__content h1 { max-width: 560px; margin: 20px 0 16px; font-size: clamp(42px, 4.2vw, 68px); font-weight: 620; letter-spacing: -.065em; line-height: 1.03; }
.auth-screen--backoffice .auth-brand__content h1 strong { color: #76b2ff; font-weight: 720; }
.auth-screen--backoffice .auth-brand__content > p { max-width: 470px; color: #b8cbe2; font-size: 15px; line-height: 1.7; }
.auth-screen--backoffice .auth-brand__footer { color: #8fa9c9; font-size: 11px; }
.auth-screen--backoffice .auth-brand__orb--one { right: -170px; bottom: 25%; width: 440px; height: 440px; opacity: .8; }
.auth-screen--backoffice .auth-brand__orb--two { top: 22%; right: 12%; }
.auth-workspace-preview { width: min(100%, 570px); margin-top: clamp(34px, 5vh, 62px); overflow: hidden; border: 1px solid rgba(180, 211, 249, .24); border-radius: 18px; background: rgba(238, 247, 255, .075); box-shadow: 0 30px 72px rgba(2, 14, 30, .29), inset 0 1px rgba(255, 255, 255, .11); transform: perspective(1100px) rotateY(-4deg) rotateX(2deg); }
.auth-workspace-preview__top { display: flex; height: 39px; align-items: center; justify-content: space-between; padding: 0 15px; background: rgba(255, 255, 255, .09); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.auth-workspace-preview__top > span:first-child { display: flex; gap: 5px; }
.auth-workspace-preview__top i { width: 5px; height: 5px; border-radius: 50%; background: #8baed3; }
.auth-workspace-preview__top small { color: #bbd3ed; font-size: 8px; font-weight: 750; letter-spacing: .19em; }
.auth-workspace-preview__top-mark { width: 19px; height: 7px; border: 1px solid #a8c5e3; border-radius: 6px; opacity: .75; }
.auth-workspace-preview__body { display: flex; min-height: 230px; }
.auth-workspace-preview__nav { display: flex; width: 74px; flex: 0 0 74px; flex-direction: column; gap: 15px; padding: 27px 17px; border-right: 1px solid rgba(255, 255, 255, .1); background: rgba(4, 20, 39, .22); }
.auth-workspace-preview__nav span { width: 30px; height: 8px; border-radius: 5px; background: rgba(188, 215, 243, .2); }
.auth-workspace-preview__nav .is-active { width: 40px; background: #63a5fa; box-shadow: 0 0 15px rgba(99, 165, 250, .5); }
.auth-workspace-preview__canvas { flex: 1; min-width: 0; padding: 23px; }
.auth-workspace-preview__heading { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.auth-workspace-preview__heading span:first-child { width: 36%; height: 12px; border-radius: 4px; background: rgba(230, 242, 255, .85); }
.auth-workspace-preview__heading span:last-child { width: 58%; height: 7px; border-radius: 4px; background: rgba(199, 222, 245, .27); }
.auth-workspace-preview__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.auth-workspace-preview__tiles > span { display: flex; height: 59px; flex-direction: column; justify-content: center; gap: 8px; padding: 12px; border: 1px solid rgba(193, 220, 247, .18); border-radius: 8px; background: rgba(255, 255, 255, .11); }
.auth-workspace-preview__tiles i:first-child { width: 50%; height: 6px; border-radius: 3px; background: #88b8f0; }
.auth-workspace-preview__tiles i:last-child { width: 70%; height: 10px; border-radius: 3px; background: rgba(231, 243, 255, .78); }
.auth-workspace-preview__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.auth-workspace-preview__rows > span { display: flex; height: 21px; align-items: center; gap: 13px; padding: 0 10px; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.auth-workspace-preview__rows i { height: 4px; border-radius: 3px; background: rgba(205, 227, 248, .32); }
.auth-workspace-preview__rows i:nth-child(1) { width: 23%; }
.auth-workspace-preview__rows i:nth-child(2) { width: 38%; }
.auth-workspace-preview__rows i:nth-child(3) { width: 13%; margin-left: auto; background: rgba(109, 184, 255, .63); }
.auth-screen--backoffice .auth-main { padding: 42px clamp(28px, 5vw, 90px); background: radial-gradient(circle at 95% 0, rgba(218, 233, 251, .48), transparent 38%), #f5f8fc; }
.auth-screen--backoffice .auth-card { width: min(100%, 470px); padding: clamp(30px, 3.1vw, 48px); border: 1px solid #e3ebf4; border-radius: 22px; background: #fff; box-shadow: 0 25px 70px rgba(18, 48, 85, .08), 0 2px 8px rgba(18, 48, 85, .025); }
.auth-screen--backoffice .auth-card__header { margin-bottom: 34px; }
.auth-screen--backoffice .auth-card__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; color: #346bb4; font-size: 10px; letter-spacing: .13em; }
.auth-screen--backoffice .auth-card__eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #3678d1; box-shadow: 0 0 0 4px #eaf2ff; }
.auth-screen--backoffice .auth-card__header h2 { color: #122b49; font-size: clamp(28px, 2.6vw, 36px); font-weight: 750; }
.auth-screen--backoffice .auth-card__header p { max-width: 340px; margin-top: 10px; color: #6d7f95; line-height: 1.6; }
.auth-screen--backoffice .auth-form { gap: 21px; }
.auth-screen--backoffice .auth-field > label, .auth-screen--backoffice .auth-field__label-row > label { color: #304761; font-size: 12px; }
.auth-screen--backoffice .auth-input-wrap { min-height: 54px; border-color: #d8e2ed; border-radius: 10px; box-shadow: none; }
.auth-screen--backoffice .auth-input-wrap:hover { border-color: #a8bfd9; }
.auth-screen--backoffice .auth-input-wrap:focus-within { border-color: #4386df; box-shadow: 0 0 0 4px rgba(43, 110, 206, .1); }
.auth-screen--backoffice .auth-input-wrap > input { height: 52px; font-size: 14px; }
.auth-screen--backoffice .auth-remember { color: #506780; font-size: 12px; }
.auth-screen--backoffice .auth-submit { min-height: 54px; margin-top: 1px; border-color: #1858ad; background: linear-gradient(105deg, #164d9a, #226bd0); box-shadow: 0 12px 23px rgba(30, 99, 190, .2); font-size: 13px; }
.auth-screen--backoffice .auth-secure-note { margin-top: 0; padding: 0; color: #6d8097; background: transparent; border: 0; font-size: 11px; font-weight: 550; }
.auth-screen--backoffice .auth-secure-note svg { width: 16px; height: 16px; }

@media (max-width: 1100px) {
    .auth-screen--backoffice { grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr); }
    .auth-screen--backoffice .auth-brand__content h1 { font-size: clamp(38px, 4vw, 50px); }
    .auth-workspace-preview { transform: none; }
}
@media (max-width: 700px) {
    .auth-screen--backoffice { display: flex; background: #f5f8fc; }
    .auth-screen--backoffice .auth-main { justify-content: flex-start; padding: 25px 20px 28px; }
    .auth-screen--backoffice .auth-mobile-brand { width: min(100%, 470px); margin-bottom: 34px; }
    .auth-screen--backoffice .auth-mobile-brand img { width: 64px; height: 36px; }
    .auth-screen--backoffice .auth-card { width: min(100%, 470px); margin: auto; padding: clamp(25px, 5vw, 36px); border-radius: 18px; }
    .auth-screen--backoffice .auth-input-wrap > input { font-size: 16px; }
    .auth-screen--backoffice .auth-mobile-footer { width: min(100%, 470px); }
}
@media (max-width: 420px) {
    .auth-screen--backoffice .auth-main { padding: 20px 14px 24px; }
    .auth-screen--backoffice .auth-card { padding: 25px 20px; }
    .auth-screen--backoffice .auth-card__header { margin-bottom: 27px; }
}