:root {
    --ink: #17253b;
    --muted: #78869a;
    --line: #e8edf3;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --navy: #112a47;
    --navy-2: #183b61;
    --blue: #2f6fed;
    --green: #15966a;
    --red: #d94848;
    --shadow: 0 18px 55px rgba(25, 48, 78, .08);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
}

body {
    background: var(--canvas);
}

a {
    text-decoration: none;
}

.registration-page {
    min-height: 100vh;
    background: #f6f8fb;
}

.registration-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(390px, .92fr) minmax(520px, 1.08fr);
}

.registration-intro {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 44px clamp(32px, 6vw, 90px) 34px;
    color: #fff;
    background: radial-gradient(circle at 80% 18%, rgba(65, 130, 191, .34), transparent 28%), linear-gradient(145deg, #102944 0%, #153d63 55%, #0d253e 100%);
    position: relative;
    overflow: hidden;
}

.registration-intro::after {
    content: '';
    position: absolute;
    width: 530px;
    height: 530px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    right: -290px;
    bottom: -220px;
    box-shadow: 0 0 0 48px rgba(255, 255, 255, .025), 0 0 0 96px rgba(255, 255, 255, .02);
}

.brand-lockup,
.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
    position: relative;
    z-index: 1;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #5e9bf1, #2f6fed);
    color: #fff;
    box-shadow: 0 8px 24px rgba(47, 111, 237, .35);
}

.intro-copy {
    max-width: 540px;
    margin: auto 0;
    padding: 70px 0 45px;
    position: relative;
    z-index: 1;
}

.eyebrow {
    color: #5789d4;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.registration-intro .eyebrow {
    color: #8dbbff;
}

.intro-copy h1 {
    max-width: 520px;
    margin: 18px 0 17px;
    font-size: clamp(34px, 4.5vw, 58px);
    font-weight: 800;
    line-height: 1.11;
    letter-spacing: -2px;
}

.intro-copy > p {
    max-width: 470px;
    color: rgba(238, 245, 255, .72);
    font-size: 14px;
    line-height: 1.85;
}

.intro-points {
    display: grid;
    gap: 22px;
    margin-top: 44px;
}

.intro-points > div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.intro-points > div > span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 13px;
    background: rgba(255, 255, 255, .08);
    color: #9ec5ff;
}

.intro-points strong,
.intro-points small {
    display: block;
}

.intro-points strong {
    font-size: 13px;
    font-weight: 700;
}

.intro-points small {
    margin-top: 4px;
    color: rgba(238, 245, 255, .58);
    font-size: 11px;
}

.intro-footer {
    color: rgba(238, 245, 255, .46);
    font-size: 10px;
    position: relative;
    z-index: 1;
}

.registration-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 44px clamp(24px, 5vw, 76px);
}

.registration-card {
    width: 100%;
    max-width: 520px;
    padding: clamp(26px, 4vw, 48px);
    border: 1px solid #edf1f6;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 25px 80px rgba(25, 48, 78, .075);
}

.form-heading {
    margin-bottom: 30px;
}

.form-heading h2,
.success-panel h2 {
    margin: 9px 0 8px;
    color: #142b46;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -.9px;
}

.form-heading p,
.success-panel > p {
    margin: 0;
    color: #8793a4;
    font-size: 12px;
    line-height: 1.7;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #34445b;
    font-size: 11px;
    font-weight: 700;
}

.field-wrap {
    position: relative;
}

.field-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    color: #91a0b2;
    font-size: 13px;
    transform: translateY(-50%);
}

.field-wrap .form-control {
    min-height: 49px;
    padding: 11px 14px 11px 42px;
    border: 1px solid #e6ebf2;
    border-radius: 11px;
    background: #fbfcfe;
    color: #23354c;
    font-size: 12px;
    box-shadow: none;
}

.field-wrap .form-control:focus,
.form-control:focus,
.form-select:focus {
    border-color: #8bb4f5;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(47, 111, 237, .09);
}

.field-wrap .form-control::placeholder {
    color: #b1bbc8;
}

.btn-primary-wide {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 19px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(100deg, #2868d9, #397ff0);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(47, 111, 237, .22);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn-primary-wide:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 13px 27px rgba(47, 111, 237, .3);
}

.btn-primary-wide:disabled {
    cursor: wait;
    opacity: .7;
}

.privacy-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 17px 0 0;
    color: #98a4b3;
    font-size: 10px;
}

.privacy-note i {
    color: #24976c;
}

.form-alert {
    display: none;
    margin: 0 0 15px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 1.6;
}

.form-alert.is-visible {
    display: block;
}

.form-alert.is-error {
    border: 1px solid #f5d1d1;
    background: #fff4f4;
    color: #b83232;
}

.success-panel {
    text-align: center;
}

.success-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 23px;
    border-radius: 21px;
    background: #e7f8f0;
    color: #15966a;
    font-size: 25px;
    box-shadow: 0 0 0 9px #f4fcf8;
}

.success-panel h2 {
    font-size: 27px;
}

.success-panel > p {
    margin-bottom: 24px;
}

.registration-reference {
    display: grid;
    gap: 7px;
    padding: 17px;
    margin-bottom: 14px;
    border: 1px dashed #b6c9e5;
    border-radius: 13px;
    background: #f7faff;
}

.registration-reference span {
    color: #8391a5;
    font-size: 10px;
}

.registration-reference strong {
    color: #173c68;
    font-size: 20px;
    letter-spacing: 1px;
}

.success-email {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 24px;
    padding: 13px;
    border-radius: 11px;
    background: #f4f7fb;
    color: #66758b;
    text-align: left;
    font-size: 11px;
    line-height: 1.7;
}

.success-email i {
    margin-top: 2px;
    color: #407bd9;
}

.back-home {
    margin-top: 22px;
    color: #8794a6;
    font-size: 11px;
    font-weight: 600;
}

.back-home:hover {
    color: #2868d9;
}

.admin-page {
    background: #f5f7fb;
}

.admin-shell {
    min-height: 100vh;
}

.admin-sidebar {
    width: 252px;
    display: flex;
    flex-direction: column;
    padding: 26px 17px 20px;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1050;
    background: #102843;
    color: #fff;
    box-shadow: 8px 0 35px rgba(12, 34, 57, .08);
    transition: transform .25s ease;
}

.admin-brand {
    gap: 10px;
    padding: 3px 8px 32px;
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand strong {
    font-size: 12px;
}

.admin-brand small {
    margin-top: 4px;
    color: #85a1be;
    font-size: 8px;
    letter-spacing: 1.5px;
}

.admin-brand .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.sidebar-caption {
    padding: 0 13px 10px;
    color: #728ca8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}

.sidebar-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #a8bbcf;
    font-size: 11px;
    font-weight: 600;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.sidebar-link > i {
    width: 17px;
    color: #89a3be;
    font-size: 14px;
    text-align: center;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    transform: translateX(2px);
}

.sidebar-link.active {
    border-color: rgba(129, 180, 247, .17);
    background: linear-gradient(100deg, rgba(59, 123, 215, .26), rgba(59, 123, 215, .1));
    color: #fff;
}

.sidebar-link.active > i {
    color: #85b5ff;
}

.sidebar-bottom {
    display: grid;
    gap: 12px;
    margin-top: auto;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 9px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.user-avatar,
.person-avatar,
.result-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    border-radius: 12px;
    background: #e7efff;
    color: #386fc2;
    font-size: 12px;
    font-weight: 800;
}

.sidebar-user .user-avatar {
    background: #254d73;
    color: #bfdbfe;
}

.sidebar-user strong,
.sidebar-user small {
    display: block;
}

.sidebar-user strong {
    max-width: 145px;
    overflow: hidden;
    color: #f2f6fb;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user small {
    margin-top: 4px;
    color: #7994b0;
    font-size: 9px;
}

.sidebar-link.logout-link {
    min-height: 40px;
    color: #e4a3a3;
}

.sidebar-link.logout-link > i {
    color: #dc8585;
}

.logout-form {
    margin: 0;
}

.logout-form .logout-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.admin-main {
    min-height: 100vh;
    margin-left: 252px;
}

.admin-topbar {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px clamp(22px, 3vw, 42px);
    border-bottom: 1px solid #e9eef4;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
}

.topbar-kicker {
    margin-bottom: 4px;
    color: #9ba8b8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.admin-topbar h1 {
    margin: 0;
    color: #182e49;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.topbar-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #66778d;
    font-size: 10px;
    font-weight: 600;
}

.online-dot,
.scanner-live > span {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #19a876;
    box-shadow: 0 0 0 4px rgba(25, 168, 118, .1);
}

.role-chip {
    padding: 6px 8px;
    border-radius: 6px;
    background: #edf3fc;
    color: #5277ac;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .6px;
}

.role-chip-scanner {
    background: #e9f8f1;
    color: #16835e;
}

.admin-content {
    max-width: 1600px;
    padding: 30px clamp(20px, 3vw, 42px) 50px;
    margin: 0 auto;
}

.sidebar-toggle {
    width: 36px;
    height: 36px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4eaf2;
    border-radius: 9px;
    background: #fff;
    color: #4b607b;
}

.welcome-banner {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 34px 38px;
    border-radius: 18px;
    background: linear-gradient(115deg, #153b62, #1e4e7c 62%, #275d8d);
    color: #fff;
    overflow: hidden;
    position: relative;
    box-shadow: 0 18px 38px rgba(20, 58, 94, .13);
}

.welcome-banner > div:first-child,
.welcome-banner > a {
    position: relative;
    z-index: 2;
}

.welcome-banner .eyebrow {
    color: #9bc5fa;
}

.welcome-banner h2 {
    margin: 10px 0 8px;
    font-size: clamp(21px, 2.5vw, 29px);
    font-weight: 800;
    letter-spacing: -.8px;
}

.welcome-banner p {
    max-width: 570px;
    margin: 0;
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    line-height: 1.7;
}

.btn-light-action,
.btn-primary-action,
.btn-outline-action,
.btn-plain-action,
.btn-danger-soft {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-light-action {
    background: #fff;
    color: #1a4774;
}

.btn-light-action:hover {
    color: #1a4774;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .15);
}

.btn-primary-action {
    background: #2f6fed;
    color: #fff;
    box-shadow: 0 6px 14px rgba(47, 111, 237, .14);
}

.btn-primary-action:hover {
    background: #245fd5;
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-action {
    border-color: #dfe7f1;
    background: #fff;
    color: #50647e;
}

.btn-outline-action:hover {
    border-color: #a9c4e9;
    color: #2f6fed;
}

.btn-plain-action {
    border-color: transparent;
    background: transparent;
    color: #708097;
}

.btn-danger-soft {
    border-color: #f7dfdf;
    background: #fff5f5;
    color: #d34b4b;
}

.welcome-orbit {
    width: 260px;
    height: 260px;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 50%;
}

.orbit-one {
    right: 8%;
    top: -145px;
}

.orbit-two {
    right: -70px;
    bottom: -185px;
    width: 350px;
    height: 350px;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, .025);
}

.metric-grid {
    margin-top: 20px;
}

.metric-card {
    min-height: 145px;
    padding: 18px 19px;
    border: 1px solid #e9eef4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(27, 48, 76, .025);
}

.metric-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 11px;
    font-size: 13px;
}

.icon-blue {
    background: #eaf1ff;
    color: #3978e4;
}

.icon-green {
    background: #e7f7f0;
    color: #15966a;
}

.icon-amber {
    background: #fff5e4;
    color: #c88923;
}

.icon-violet {
    background: #f0ebff;
    color: #7654c8;
}

.metric-card > span,
.metric-card > small {
    display: block;
    color: #8996a8;
    font-size: 9px;
}

.metric-card > strong {
    display: block;
    margin: 2px 0 3px;
    color: #1b3655;
    font-size: 25px;
    font-weight: 800;
}

.content-panel {
    border: 1px solid #e9eef4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(27, 48, 76, .025);
    overflow: hidden;
}

.panel-heading {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 17px 21px;
}

.panel-heading h3 {
    margin: 0 0 5px;
    color: #1d3553;
    font-size: 12px;
    font-weight: 800;
}

.panel-heading p {
    margin: 0;
    color: #93a0b0;
    font-size: 9px;
}

.text-link {
    color: #3475df;
    font-size: 10px;
    font-weight: 700;
}

.text-link i {
    margin-left: 5px;
    font-size: 9px;
}

.app-table {
    min-width: 760px;
    margin: 0;
    color: #43536b;
    font-size: 10px;
}

.app-table thead th {
    padding: 12px 15px;
    border-top: 1px solid #edf1f5;
    border-bottom: 1px solid #edf1f5;
    background: #fafbfd;
    color: #98a4b3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-table tbody td {
    padding: 13px 15px;
    border-color: #f0f3f7;
    vertical-align: middle;
}

.app-table tbody tr:last-child td {
    border-bottom: 0;
}

.person-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.person-cell > span:last-child {
    min-width: 0;
}

.person-cell strong,
.person-cell small {
    display: block;
}

.person-cell strong {
    max-width: 250px;
    overflow: hidden;
    color: #293d58;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-cell small {
    max-width: 260px;
    overflow: hidden;
    margin-top: 4px;
    color: #98a4b2;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-state {
    padding: 42px 20px !important;
    color: #9ba7b7 !important;
    font-size: 11px !important;
    text-align: center;
}

.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 23px;
}

.page-intro h2 {
    margin: 7px 0 7px;
    color: #1c3554;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.8px;
}

.page-intro p {
    max-width: 690px;
    margin: 0;
    color: #8794a5;
    font-size: 10px;
    line-height: 1.7;
}

.intro-count {
    display: grid;
    gap: 3px;
    min-width: 110px;
    padding: 12px 16px;
    border: 1px solid #e8edf3;
    border-radius: 11px;
    background: #fff;
    text-align: center;
}

.intro-count strong {
    color: #1d426d;
    font-size: 21px;
    font-weight: 800;
}

.intro-count span {
    color: #95a1b1;
    font-size: 8px;
}

.search-toolbar,
.bulk-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 17px;
}

.search-field {
    min-width: 220px;
    flex: 1;
    position: relative;
}

.search-field i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: #9aa7b8;
    font-size: 11px;
    transform: translateY(-50%);
}

.search-field input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px 9px 35px;
    border: 1px solid #e8edf3;
    border-radius: 9px;
    outline: 0;
    color: #3a4c64;
    font-family: inherit;
    font-size: 10px;
}

.search-field input:focus {
    border-color: #9cbcf0;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, .07);
}

.bulk-toolbar {
    flex-wrap: wrap;
}

.bulk-copy {
    display: grid;
    flex: 1;
    gap: 4px;
}

.bulk-copy strong {
    color: #2b405a;
    font-size: 10px;
}

.bulk-copy span {
    color: #98a4b3;
    font-size: 8px;
}

.bulk-toolbar .form-select {
    width: 185px;
}

.form-control,
.form-select {
    min-height: 39px;
    border-color: #e3eaf2;
    border-radius: 9px;
    color: #3a4c64;
    font-family: inherit;
    font-size: 10px;
    box-shadow: none;
}

.select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #7d8ca1;
    font-size: 9px;
    font-weight: 600;
}

.participant-table {
    min-width: 1120px;
}

.participant-table input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #3477e5;
    cursor: pointer;
}

.participant-table tbody td:nth-child(3) > strong {
    display: block;
    max-width: 190px;
    overflow: hidden;
    color: #344861;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-table tbody td:nth-child(3) small {
    margin-top: 4px;
    font-size: 8px;
}

.zone-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--zone-color) 20%, white);
    border-radius: 20px;
    background: color-mix(in srgb, var(--zone-color) 8%, white);
    color: color-mix(in srgb, var(--zone-color) 85%, #1c293b);
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.zone-pill::before {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 50%;
    background: var(--zone-color);
    content: '';
}

.seat-editor {
    min-width: 130px;
    display: flex;
    gap: 5px;
}

.seat-editor .form-control {
    min-width: 82px;
    min-height: 34px;
    font-size: 9px;
}

.icon-action {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e7edf4;
    border-radius: 8px;
    background: #fff;
    color: #71839b;
    font-size: 10px;
    transition: all .18s ease;
}

.icon-action:hover {
    border-color: #b8cdee;
    background: #f4f8ff;
    color: #3475df;
}

.icon-action:disabled {
    cursor: not-allowed;
    opacity: .35;
}

.row-actions {
    display: flex;
    gap: 5px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}

.status-ready {
    background: #e9f8f0;
    color: #16865f;
}

.status-pending {
    background: #fff6e7;
    color: #b47a1b;
}

.status-invalid {
    background: #fff0f0;
    color: #ca4a4a;
}

.zone-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.zone-card {
    padding: 21px;
    border: 1px solid #e8edf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(27, 48, 76, .025);
}

.zone-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zone-color-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--zone-color);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--zone-color) 12%, white);
}

.zone-card-count {
    color: #8996a8;
    font-size: 8px;
}

.zone-card h3 {
    margin: 22px 0 10px;
    color: #213b59;
    font-size: 17px;
    font-weight: 800;
}

.zone-color-code {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #95a1b1;
    font-size: 8px;
    letter-spacing: .8px;
}

.zone-color-code span {
    width: 8px;
    height: 8px;
    border-radius: 3px;
}

.zone-card-actions {
    display: flex;
    gap: 7px;
    margin-top: 23px;
    padding-top: 15px;
    border-top: 1px solid #f0f3f7;
}

.zone-card-actions .btn-outline-action {
    flex: 1;
    min-height: 34px;
}

.zone-card-actions .btn-danger-soft {
    width: 36px;
    padding: 0;
}

.wide-empty {
    grid-column: 1 / -1;
    border: 1px dashed #dbe4ef;
    border-radius: 13px;
    background: #fff;
}

.app-modal {
    border: 1px solid #e8edf3;
    border-radius: 17px;
    box-shadow: 0 25px 80px rgba(15, 38, 65, .2);
}

.app-modal .modal-header,
.app-modal .modal-footer {
    padding: 19px 22px;
    border-color: #edf1f5;
}

.app-modal .modal-body {
    padding: 22px;
}

.app-modal .modal-title {
    margin-top: 5px;
    color: #203a59;
    font-size: 16px;
    font-weight: 800;
}

.form-hint {
    margin: 10px 0 0;
    color: #8c99aa;
    font-size: 9px;
    line-height: 1.7;
}

.filter-select {
    min-width: 140px;
}

.history-metrics .mini-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    background: #fff;
}

.mini-metric span {
    color: #8996a8;
    font-size: 9px;
    font-weight: 600;
}

.mini-metric strong {
    font-size: 21px;
    font-weight: 800;
}

.scanner-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: 17px;
    align-items: start;
}

.scanner-main-card,
.scan-result-card {
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(27, 48, 76, .025);
}

.scanner-main-card {
    padding: 22px;
}

.scanner-card-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.scanner-card-heading h2 {
    margin: 7px 0 6px;
    color: #1c3554;
    font-size: 17px;
    font-weight: 800;
}

.scanner-card-heading p {
    margin: 0;
    color: #8996a7;
    font-size: 9px;
    line-height: 1.7;
}

.scanner-live {
    height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    border-radius: 20px;
    background: #eaf8f1;
    color: #16865f;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .7px;
    white-space: nowrap;
}

.scanner-reader-wrap {
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    background: #0b1929;
    position: relative;
}

#reader {
    width: 100%;
    border: 0 !important;
}

#reader video {
    width: 100% !important;
    max-height: 460px;
    object-fit: cover;
}

#reader img {
    display: none;
}

#reader__dashboard_section_csr,
#reader__dashboard_section_swaplink,
#reader__status_span {
    color: #dce7f4 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
}

#reader button {
    margin: 5px;
    padding: 7px 12px;
    border: 1px solid #54718f;
    border-radius: 7px;
    background: #183b5f;
    color: #fff;
    font-size: 9px;
}

#reader select {
    max-width: 100%;
    padding: 7px;
    border-radius: 7px;
    font-size: 10px;
}

#reader__scan_region {
    min-height: 290px;
}

.camera-overlay {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.scan-corner {
    width: 28px;
    height: 28px;
    position: absolute;
    border-color: #83bcff;
    border-style: solid;
}

.corner-tl {
    top: 0;
    left: 0;
    border-width: 3px 0 0 3px;
    border-radius: 7px 0 0;
}

.corner-tr {
    top: 0;
    right: 0;
    border-width: 3px 3px 0 0;
    border-radius: 0 7px 0 0;
}

.corner-bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 3px 3px;
    border-radius: 0 0 0 7px;
}

.corner-br {
    right: 0;
    bottom: 0;
    border-width: 0 3px 3px 0;
    border-radius: 0 0 7px;
}

.scanner-state {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 2px 2px;
    color: #7e8da1;
    font-size: 9px;
}

.scanner-state i {
    color: #397be3;
}

.scanner-state.is-error,
.scanner-state.is-error i {
    color: #ce4e4e;
}

.scanner-manual {
    margin-top: 19px;
    padding-top: 17px;
    border-top: 1px solid #eef2f6;
}

.scanner-manual .form-control {
    min-height: 38px;
}

.scan-result-card {
    min-height: 530px;
    padding: 23px;
}

.result-placeholder {
    min-height: 475px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.placeholder-qr {
    width: 83px;
    height: 83px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px dashed #cdd9e8;
    border-radius: 22px;
    background: #f7f9fc;
    color: #9aafca;
    font-size: 31px;
}

.result-placeholder h3 {
    margin: 0 0 7px;
    color: #435873;
    font-size: 13px;
    font-weight: 800;
}

.result-placeholder p {
    max-width: 230px;
    margin: 0;
    color: #9aa6b5;
    font-size: 9px;
    line-height: 1.7;
}

.result-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 20px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .6px;
}

.result-valid {
    background: #e9f8f0;
    color: #16865f;
}

.result-invalid {
    background: #fff0f0;
    color: #cb4545;
}

.result-person {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    padding-bottom: 18px;
    border-bottom: 1px solid #edf1f5;
}

.result-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 14px;
    font-size: 15px;
}

.result-person h3 {
    margin: 0 0 5px;
    color: #1e3958;
    font-size: 15px;
    font-weight: 800;
}

.result-person span:last-child {
    color: #94a0af;
    font-size: 8px;
}

.result-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 12px;
}

.result-details > div {
    min-width: 0;
}

.result-details span,
.result-details strong {
    display: block;
}

.result-details span {
    margin-bottom: 5px;
    color: #9aa6b5;
    font-size: 8px;
}

.result-details strong {
    overflow-wrap: anywhere;
    color: #42546d;
    font-size: 10px;
    font-weight: 700;
}

.app-toast {
    min-width: 275px;
    max-width: 390px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    margin-bottom: 9px;
    border: 1px solid #e4ebf2;
    border-radius: 11px;
    background: #fff;
    color: #51627a;
    box-shadow: 0 14px 38px rgba(18, 40, 66, .14);
    font-size: 10px;
    line-height: 1.6;
    animation: toast-enter .22s ease-out;
}

.app-toast > i {
    margin-top: 1px;
    font-size: 14px;
}

.app-toast > span {
    flex: 1;
}

.app-toast button {
    border: 0;
    background: transparent;
    color: #9aa6b5;
}

.toast-success > i {
    color: #16976b;
}

.toast-error > i {
    color: #d44747;
}

@keyframes toast-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
    .registration-shell {
        grid-template-columns: minmax(330px, .78fr) minmax(480px, 1.22fr);
    }

    .registration-intro {
        padding-right: 35px;
        padding-left: 35px;
    }

    .scanner-layout {
        grid-template-columns: 1fr;
    }

    .scan-result-card {
        min-height: 300px;
    }

    .result-placeholder {
        min-height: 250px;
    }
}

@media (max-width: 850px) {
    .admin-sidebar {
        transform: translateX(-105%);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    .zone-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .registration-shell {
        display: block;
    }

    .registration-intro {
        min-height: auto;
        padding: 24px 24px 28px;
    }

    .intro-copy {
        padding: 36px 0 8px;
    }

    .intro-copy h1 {
        max-width: 480px;
        margin-top: 12px;
        font-size: 35px;
        letter-spacing: -1.2px;
    }

    .intro-copy > p {
        font-size: 12px;
    }

    .intro-points {
        display: none;
    }

    .intro-footer {
        display: none;
    }

    .registration-content {
        padding: 26px 16px 32px;
    }

    .registration-card {
        max-width: 540px;
        padding: 26px 22px;
        border-radius: 18px;
    }

    .admin-topbar {
        min-height: 70px;
        padding: 12px 16px;
    }

    .admin-topbar h1 {
        font-size: 14px;
    }

    .topbar-profile > span:not(.online-dot):not(.role-chip) {
        display: none;
    }

    .admin-content {
        padding: 21px 14px 35px;
    }

    .welcome-banner {
        min-height: 190px;
        display: block;
        padding: 25px 23px;
    }

    .welcome-banner h2 {
        max-width: 340px;
        font-size: 23px;
    }

    .welcome-banner p {
        max-width: 340px;
        margin-bottom: 18px;
    }

    .metric-card {
        min-height: 132px;
        padding: 14px;
    }

    .metric-icon {
        width: 31px;
        height: 31px;
        margin-bottom: 10px;
    }

    .metric-card > strong {
        font-size: 22px;
    }

    .page-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .page-intro h2 {
        font-size: 22px;
    }

    .page-intro > .btn-primary-action {
        align-self: stretch;
    }

    .intro-count {
        min-width: 120px;
        align-self: flex-start;
    }

    .search-toolbar {
        flex-wrap: wrap;
    }

    .search-field {
        flex-basis: 100%;
    }

    .bulk-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .bulk-toolbar .form-select {
        width: 100%;
    }

    .zone-grid {
        grid-template-columns: 1fr;
    }

    .panel-heading {
        align-items: flex-start;
        padding: 15px;
    }

    .panel-heading .select-all-label {
        padding-top: 4px;
    }

    .scanner-main-card,
    .scan-result-card {
        padding: 15px;
    }

    .scanner-card-heading {
        flex-direction: column;
    }

    .scanner-reader-wrap {
        min-height: 275px;
    }

    #reader__scan_region {
        min-height: 245px;
    }

    .camera-overlay {
        width: 205px;
        height: 205px;
    }

    .history-metrics .mini-metric {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding: 12px;
    }
}

@media (max-width: 390px) {
    .registration-card {
        padding: 23px 17px;
    }

    .form-heading h2 {
        font-size: 25px;
    }

    .intro-copy h1 {
        font-size: 31px;
    }

    .role-chip {
        display: none;
    }
}

.registration-header {
    width: 100%;
    min-height: 76px;
    padding: 12px clamp(18px, 5vw, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.registration-nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
}
.registration-nav a,
.registration-footer a {
    color: #334155;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.registration-nav a:hover,
.registration-footer a:hover {
    color: #0b5cab;
}
.registration-nav .registration-nav-cta {
    padding: 10px 18px;
    color: #fff;
    background: #0b5cab;
    border-radius: 999px;
}
.registration-footer {
    padding: 22px clamp(18px, 5vw, 72px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    color: #64748b;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, .08);
    font-size: 12px;
}
.registration-footer div {
    display: flex;
    gap: 18px;
}
@media (max-width: 640px) {
    .registration-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    .registration-nav {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px 16px;
    }
    .registration-nav a {
        font-size: 12px;
    }
    .registration-footer {
        align-items: flex-start;
        flex-direction: column;
    }
    .registration-footer div {
        flex-wrap: wrap;
        gap: 12px;
    }
}

.pdf-ticket-link{display:inline-flex;align-items:center;gap:6px;margin-top:7px;color:#1d4ed8;font-size:12px;font-weight:700;text-decoration:none}.pdf-ticket-link:hover{color:#1e40af;text-decoration:underline}