:root {
  --ink: #11151d;
  --ink-soft: #5e6674;
  --paper: #f4f5f7;
  --surface: #ffffff;
  --line: #e6e8ec;
  --night: #171a21;
  --night-2: #222631;
  --red: #e32636;
  --red-dark: #bc1321;
  --green: #147d5a;
  --green-soft: #e6f5ef;
  --amber: #a96800;
  --amber-soft: #fff3db;
  --danger-soft: #fde9eb;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(22, 27, 38, .07);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.app-shell { display: flex; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 264px; display: flex; flex-direction: column; padding: 24px 18px 18px; overflow: hidden; color: #fff; background: var(--night); z-index: 50; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px; color: #fff; }
.brand > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.brand strong { font-size: 17px; letter-spacing: -.2px; }
.brand small { color: #969dab; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 12px; color: #fff; background: var(--red); font-weight: 800; letter-spacing: -1px; box-shadow: 0 8px 20px rgba(227, 38, 54, .3); }
.brand-logo { width: 104px; height: 42px; display: grid; place-items: center; flex: 0 0 104px; overflow: hidden; border-radius: 9px; background: #fff; }
.brand-logo img { width: 94px; height: auto; display: block; }
.brand-dark { color: var(--ink); }

.main-nav { min-height: 0; margin: 38px -6px 0 0; padding-right: 6px; display: flex; flex: 1 1 auto; flex-direction: column; gap: 5px; overflow-x: hidden; overflow-y: auto; scrollbar-color: #444a56 transparent; scrollbar-width: thin; }
.main-nav::-webkit-scrollbar { width: 6px; }
.main-nav::-webkit-scrollbar-track { background: transparent; }
.main-nav::-webkit-scrollbar-thumb { border-radius: 10px; background: #444a56; }
.nav-label { margin: 25px 12px 8px; color: #737b89; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.nav-label:first-child { margin-top: 0; }
.main-nav a { display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 0 13px; border-radius: 11px; color: #b9bec8; font-size: 14px; font-weight: 600; transition: .18s ease; }
.main-nav a:hover { color: #fff; background: #222630; }
.main-nav a.active { color: #fff; background: var(--red); box-shadow: 0 9px 24px rgba(227, 38, 54, .18); }
.nav-icon { width: 22px; text-align: center; font-size: 20px; font-weight: 400; }
.sidebar-footer { margin-top: 10px; padding: 17px 8px 3px; border-top: 1px solid #30343e; display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.user-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #3d424e; font-weight: 700; }
.user-summary { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.user-summary strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-summary small { margin-top: 3px; color: #858c99; font-size: 10px; }
.icon-button { width: 30px; height: 30px; border: 0; color: #aab0bb; background: transparent; font-size: 19px; }

.main-content { width: calc(100% - 264px); min-height: 100vh; margin-left: 264px; }
.topbar { min-height: 112px; padding: 27px clamp(24px, 4vw, 60px) 21px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); backdrop-filter: blur(12px); }
.topbar h1 { margin: 3px 0 0; font-size: clamp(25px, 3vw, 34px); letter-spacing: -1.1px; line-height: 1.1; }
.eyebrow { margin: 0; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 1.55px; text-transform: uppercase; }
.translation-en { display: block; margin-top: 4px; color: #858c97; font-size: .75em; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.eyebrow .translation-en { color: currentColor; font-size: .72em; opacity: .68; }
.topbar-actions { margin-left: auto; }
.menu-toggle { display: none; border: 0; background: transparent; font-size: 24px; }
.page-content { padding: 30px clamp(24px, 4vw, 60px) 60px; }
.messages { padding: 18px clamp(24px, 4vw, 60px) 0; }
.message { padding: 13px 16px; border: 1px solid #b9dfcf; border-radius: 11px; color: #0e6245; background: var(--green-soft); font-size: 13px; font-weight: 600; }
.message.error { border-color: #f0bfc4; color: #a31623; background: var(--danger-soft); }

.button { min-height: 42px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 750; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--red); box-shadow: 0 8px 20px rgba(227, 38, 54, .16); }
.button-primary:hover { background: var(--red-dark); }
.button-secondary { border-color: var(--line); color: var(--ink); background: #fff; box-shadow: 0 3px 10px rgba(20,25,35,.03); }
.button-danger { color: #fff; background: #b91e2c; }
.button-ghost { border-color: var(--line); background: transparent; }
.button-small { min-height: 34px; padding: 0 13px; }
.button-wide { width: 100%; }
.button.primary { color: #fff; background: var(--red); box-shadow: 0 8px 20px rgba(227, 38, 54, .16); }
.button.primary:hover { background: var(--red-dark); }
.button.secondary { border-color: var(--line); color: var(--ink); background: #fff; box-shadow: 0 3px 10px rgba(20,25,35,.03); }
.button.small { min-height: 34px; padding: 0 13px; }
.page-actions { margin-bottom: 18px; display: flex; justify-content: flex-end; gap: 10px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metric-card { min-height: 146px; padding: 23px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metric-card::after { content: ""; width: 68px; height: 68px; position: absolute; right: -20px; bottom: -27px; border: 18px solid #f1f2f4; border-radius: 50%; }
.metric-card.accent-red::after { border-color: #fbe2e4; }
.metric-label { color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.metric-card > strong { margin-top: auto; font-size: 39px; line-height: 1; letter-spacing: -2px; }
.metric-card > small { margin-top: 8px; color: #8b919b; font-size: 10px; }
.metric-action { color: #fff; background: var(--night); border-color: var(--night); }
.metric-action .metric-label { color: #989eaa; }
.metric-action a { margin-top: auto; padding-bottom: 4px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; font-size: 15px; font-weight: 750; }
.metric-action a span { color: var(--red); font-size: 22px; }
.metric-action::after { border-color: #292d36; }

.dashboard-grid { margin-top: 18px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-header { min-height: 82px; padding: 21px 24px 17px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.4px; }
.panel-header > a { color: var(--red); font-size: 11px; font-weight: 750; }
.people-live-list { padding: 7px 13px 13px; }
.person-live-row { min-height: 70px; padding: 10px 11px; display: flex; align-items: center; gap: 13px; border-radius: 12px; transition: .15s; }
.person-live-row:hover { background: #f7f8f9; }
.person-live-row > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 5px; }
.person-live-row strong { font-size: 13px; }
.person-live-row small { color: #808793; font-size: 11px; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #81212a; background: #f7dfe2; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.avatar-small { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.avatar-large { width: 58px; height: 58px; border-radius: 17px; font-size: 16px; }
.avatar-xl { width: 84px; height: 84px; margin-bottom: 25px; border-radius: 23px; font-size: 23px; }
.live-time { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 10px; font-weight: 700; }
.live-time i, .live-dot i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #20a976; box-shadow: 0 0 0 4px #e3f5ee; }
.chevron { color: #a6acb5; font-size: 22px; }
.deadline-list { padding: 11px 18px 17px; }
.deadline-row { padding: 11px 4px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #f0f1f3; }
.deadline-row:last-child { border: 0; }
.date-block { width: 45px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #f0ced2; border-radius: 11px; color: #8e222d; background: #fff8f8; font-size: 8px; text-transform: uppercase; }
.date-block strong { font-size: 17px; line-height: 1; }
.deadline-row > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deadline-row > span:last-child strong { font-size: 11px; }
.deadline-row small { overflow: hidden; color: #818893; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.empty-state { min-height: 220px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8a9099; text-align: center; }
.empty-state.small { min-height: 180px; }
.empty-state.wide { min-height: 260px; grid-column: 1 / -1; border: 1px dashed #cfd3d9; border-radius: var(--radius); background: #fff; }
.empty-state strong { color: var(--ink); }
.empty-state p { margin-bottom: 0; font-size: 12px; }

.table-panel { margin-top: 18px; overflow: hidden; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 21px; color: #898f99; background: #f8f9fa; font-size: 9px; text-align: left; text-transform: uppercase; letter-spacing: 1.1px; white-space: nowrap; }
td { padding: 16px 21px; border-top: 1px solid #eff0f2; color: #343945; font-size: 12px; vertical-align: middle; }
.table-wrap td > small { margin-top: 4px; display: block; color: #8a919c; font-size: 10px; }
tbody tr:hover { background: #fcfcfd; }
.table-primary { color: var(--ink); font-weight: 750; }
.table-primary:hover, .row-action:hover { color: var(--red); }
.table-empty { height: 130px; color: #888f99; text-align: center; }
.cell-subtitle { margin-top: 5px; display: block; color: #8a919c; font-size: 10px; }
.person-cell { display: flex; align-items: center; gap: 10px; }
.status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; color: #68707c; background: #eff1f3; font-size: 9px; font-weight: 800; white-space: nowrap; }
.status-ok { color: #08734e; background: var(--green-soft); }
.status-live { color: #08734e; background: #dff5ec; }
.status-danger { color: #aa1422; background: var(--danger-soft); }
.status-warning { color: #956000; background: var(--amber-soft); }
.mini-badge { margin-left: 5px; padding: 2px 5px; border-radius: 5px; color: #fff; background: var(--red); font-size: 8px; font-weight: 800; }
.mini-badge.warning { background: #cf8500; }
.row-action { color: #313641; font-size: 10px; font-weight: 800; }
.actions-inline { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.actions-inline form { margin: 0; }
.actions-inline button, .text-danger { padding: 0; border: 0; background: transparent; font-size: 10px; font-weight: 800; }
.text-danger { color: var(--red); }

.filterbar { padding: 18px 21px; display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--line); }
.filterbar input, .filterbar select { min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; outline: none; }
.filterbar input { min-width: 280px; flex: 1; }
.filterbar select { max-width: 230px; }
.filterbar input:focus, .filterbar select:focus, .form-control:focus, .stack-form input:focus { border-color: #dba1a7; box-shadow: 0 0 0 3px rgba(227,38,54,.08); }
.filter-date { min-height: 42px; padding-left: 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; color: #777e89; background: #fff; font-size: 10px; font-weight: 750; }
.filter-date input { min-width: 132px; padding-left: 0; border: 0; }
.log-details { max-width: 390px; overflow-wrap: anywhere; color: #6f7681; font-family: Consolas, monospace; font-size: 10px; line-height: 1.5; }

.form-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(250px, 1fr); gap: 30px; align-items: start; }
.form-panel { padding: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.form-grid label { display: grid; gap: 7px; color: #464c57; font-size: 11px; font-weight: 750; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dfe2e6; border-radius: 10px; color: var(--ink); background: #fff; outline: none; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #dba1a7; box-shadow: 0 0 0 3px rgba(227,38,54,.08); }
.form-grid label > small { color: #858c97; font-size: 10px; font-weight: 400; line-height: 1.4; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .checkbox { display: flex; align-items: center; gap: 9px; }
.form-grid .checkbox input { width: 18px; min-height: 18px; }
.app-form { display: grid; gap: 19px; }
.app-form.compact { margin-top: 22px; gap: 14px; }
.field-row { display: grid; gap: 7px; }
.field-row > label, .app-form > label, .app-form p label { color: #464c57; font-size: 11px; font-weight: 750; }
.field-row label span { color: var(--red); }
.form-control, .app-form input, .app-form select, .app-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dfe2e6; border-radius: 10px; color: var(--ink); background: #fff; outline: none; }
.app-form input[type="checkbox"], .field-checkbox input { width: 18px; min-height: 18px; }
.field-checkbox { grid-template-columns: auto 1fr; align-items: center; }
.field-checkbox label { grid-column: 2; grid-row: 1; }
.field-checkbox input { grid-column: 1; grid-row: 1; }
.field-row small { color: #858c97; font-size: 10px; }
.field-error, .errorlist { color: var(--red) !important; font-size: 11px; }
.errorlist { margin: 4px 0; padding-left: 18px; }
.form-actions { margin-top: 8px; display: flex; gap: 10px; }
.form-aside { min-height: 350px; padding: 40px; border-radius: var(--radius); color: #fff; background: var(--night); }
.form-aside .aside-number { color: var(--red); font-size: 13px; font-weight: 800; }
.form-aside h2 { margin: 70px 0 15px; font-size: 29px; line-height: 1.15; letter-spacing: -1px; }
.form-aside p { color: #a5abb5; font-size: 12px; line-height: 1.7; }

.printer-setup { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr); gap: 20px; align-items: start; }
.printer-setup-main { overflow: hidden; }
.printer-steps { padding: 9px 25px 25px; }
.printer-step { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.printer-step:last-child { border-bottom: 0; }
.printer-step > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--night); font-size: 13px; font-weight: 800; }
.printer-step h3 { margin: 2px 0 7px; font-size: 15px; }
.printer-step p { margin: 0 0 14px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.printer-agent-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.printer-agent-actions .text-link { margin-top: 0; }
.printer-fields { display: grid; gap: 13px; }
.printer-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.printer-fields label { display: grid; gap: 6px; color: #464c57; font-size: 11px; font-weight: 750; }
.printer-fields small { color: #858c97; font-size: 10px; font-weight: 400; line-height: 1.4; }
.printer-toggle { padding: 13px 14px; display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 11px !important; border: 1px solid var(--line); border-radius: 10px; background: #f8f9fa; }
.printer-toggle input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--red); }
.printer-toggle span { display: grid; gap: 4px; }
.printer-toggle strong { color: var(--ink); font-size: 12px; }
.pairing-code { max-width: 180px; font-size: 22px; font-weight: 800; letter-spacing: 5px; }
.agent-status { min-height: 52px; margin: 0 25px 25px; padding: 15px 17px; border-radius: 11px; color: #626a76; background: #f3f4f6; font-size: 12px; line-height: 1.5; }
.agent-status:empty::before { content: "In attesa di verifica dell’agente."; color: #8b919b; }
.agent-status[data-state="success"] { color: #0e6245; background: var(--green-soft); }
.agent-status[data-state="error"] { color: #a31623; background: var(--danger-soft); }
.printer-summary { padding: 28px; }
.printer-summary h2 { margin: 9px 0 25px; font-size: 22px; }
.printer-summary .detail-list { margin-bottom: 22px; }

.register-hero { min-height: 220px; padding: 35px 38px; display: flex; align-items: center; gap: 50px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 80% 20%, #363b47 0, transparent 34%), var(--night); }
.register-hero > div { flex: 1; }
.register-hero h2 { margin: 22px 0 8px; font-size: 30px; letter-spacing: -1px; }
.register-hero p { max-width: 570px; margin: 0; color: #aeb3bd; font-size: 12px; line-height: 1.6; }
.live-dot { display: inline-flex; align-items: center; gap: 9px; color: #c7ccd5; font-size: 10px; font-weight: 700; }
.hero-search { min-width: min(420px, 42%); display: flex; padding: 6px; border: 1px solid #414651; border-radius: 13px; background: #232730; }
.hero-search input { min-width: 0; min-height: 45px; padding: 0 15px; flex: 1; border: 0; color: #fff; background: transparent; outline: none; }
.hero-search button { width: 45px; border: 0; border-radius: 9px; color: #fff; background: var(--red); font-size: 20px; }
.people-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.person-card { padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.person-card.is-inside { border-color: #bfe5d7; }
.person-card-top { margin-bottom: 25px; display: flex; align-items: start; justify-content: space-between; }
.person-card h3 { margin: 7px 0 5px; font-size: 18px; letter-spacing: -.4px; }
.person-card .muted { min-height: 34px; }
.person-card .button { margin-top: 15px; }
.person-history-link { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.person-history-link:hover, .person-history-link:focus-visible { transform: translateY(-2px); background: #f3cfd4; box-shadow: 0 8px 18px rgba(129,33,42,.13); outline: none; }
.person-name-link { border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; }
.person-name-link:hover, .person-name-link:focus-visible { color: var(--red-dark); border-bottom-color: currentColor; outline: none; }
.history-person-context { margin-bottom: 14px; padding: 14px 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; border: 1px solid #f0d1d5; border-radius: 12px; color: var(--ink-soft); background: #fff8f8; font-size: 12px; }
.history-person-context strong { color: var(--ink); font-size: 14px; }
.history-person-context small { margin-right: auto; color: #8b929d; }
.history-person-context a { color: var(--red-dark); font-weight: 800; }
.muted { color: var(--ink-soft); font-size: 12px; line-height: 1.6; }

.confirm-grid, .access-detail-grid { max-width: 1020px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.identity-card { padding: 36px; }
.identity-card h2 { margin: 8px 0 5px; font-size: 26px; }
.identity-card > p:not(.eyebrow) { color: var(--ink-soft); font-size: 12px; }
.identity-card dl { margin: 38px 0 0; }
.identity-card dl div, .detail-list div { padding: 14px 0; border-top: 1px solid var(--line); }
dt { color: #8a919c; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
dd { margin: 5px 0 0; font-size: 12px; font-weight: 650; }
.confirmation-panel { padding: 38px; }
.confirmation-panel h2 { margin: 18px 0 8px; font-size: 25px; }
.success-symbol, .alert-symbol { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 25px; font-weight: 900; }
.alert-symbol { color: #a86800; background: var(--amber-soft); }
.warning-list { margin: 22px 0; padding: 0; list-style: none; }
.warning-list li { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }
.warning-list li > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.warning-list small { color: var(--ink-soft); font-size: 10px; }
.text-link { margin-top: 20px; display: inline-block; color: var(--red); font-size: 11px; font-weight: 800; }

.access-detail-grid { grid-template-columns: 1.25fr .75fr; }
.access-summary, .qr-panel { padding: 30px; }
.access-status-line { display: flex; align-items: center; justify-content: space-between; color: #8a919c; font-size: 10px; }
.access-person { margin: 30px 0; display: flex; align-items: center; gap: 18px; }
.access-person h2 { margin: 6px 0 4px; font-size: 25px; }
.access-person p:last-child { margin: 0; color: var(--ink-soft); font-size: 11px; }
.timeline { margin: 25px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.timeline-item { display: flex; align-items: center; gap: 10px; }
.timeline-item i { width: 13px; height: 13px; border: 3px solid #d6d9dd; border-radius: 50%; background: #fff; }
.timeline-item.done i { border-color: var(--green); background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.timeline-item span { display: flex; flex-direction: column; gap: 4px; }
.timeline-item small { color: #8a919c; font-size: 9px; }
.timeline-item strong { font-size: 11px; }
.timeline-line { height: 2px; margin: 0 14px; background: #e2e4e7; }
.detail-list { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 25px; }
.qr-panel { text-align: center; }
.qr-panel h2 { margin: 9px 0 5px; }
.qr-frame { max-width: 230px; margin: 22px auto 12px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 6px #f5f6f7; }
.qr-frame img { display: block; }
.token-hint { display: block; color: #959ba5; font-size: 9px; }

.portal-shell { background: #f6f6f7; }
.portal-header { min-height: 84px; padding: 18px max(25px, calc((100% - 1180px) / 2)); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: #fff; }
.portal-user { display: flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 700; }
.portal-user form { margin: 0; }
.portal-main { max-width: 1180px; margin: 0 auto; padding: 42px 25px 70px; }
.portal-main .messages { padding: 0 0 20px; }
.portal-welcome { min-height: 190px; padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, #1a1d24, #282d38); }
.portal-welcome h1 { margin: 10px 0 8px; font-size: 34px; letter-spacing: -1.2px; }
.portal-welcome p:not(.eyebrow) { margin: 0; color: #aeb4be; font-size: 12px; }
.portal-stats { margin: 18px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.portal-stats div { padding: 22px 25px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.portal-stats span { color: var(--ink-soft); font-size: 11px; }
.portal-stats strong { font-size: 25px; }
.portal-stats-four { grid-template-columns: repeat(4, 1fr); }
.portal-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.text-danger-strong { color: var(--red); }
.file-current { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--line); border-radius: 10px; background: #f8f9fa; }
.file-current span { color: #858c97; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .7px; }
.file-current a { overflow: hidden; color: var(--red); font-size: 11px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
[hidden] { display: none !important; }
.portal-form-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 50px; align-items: start; }
.portal-form-grid h1 { margin: 10px 0; font-size: 37px; letter-spacing: -1.2px; }
.upload-guidelines { margin-top: 30px; padding: 18px; display: flex; flex-direction: column; gap: 5px; border-left: 3px solid var(--red); background: #fff; }
.upload-guidelines strong { font-size: 11px; }
.upload-guidelines span { color: var(--ink-soft); font-size: 10px; }

.login-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: #e9eaed; }
.login-card { width: min(1060px, 100%); min-height: 650px; display: grid; grid-template-columns: 1.12fr .88fr; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 30px 90px rgba(19,24,34,.16); }
.login-visual { padding: 38px; display: flex; flex-direction: column; position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 70% 60%, #333844 0, transparent 38%), var(--night); }
.login-visual::after { content: ""; width: 340px; height: 340px; position: absolute; right: -150px; bottom: -150px; border: 70px solid rgba(227,38,54,.88); border-radius: 50%; }
.login-copy { margin: auto 20px; position: relative; z-index: 1; }
.login-copy h1 { margin: 25px 0 18px; font-size: clamp(38px, 5vw, 57px); line-height: 1.03; letter-spacing: -2.7px; }
.login-copy p { max-width: 440px; color: #aeb3bd; line-height: 1.7; }
.pill { display: inline-flex; padding: 7px 11px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.pill-light { color: #cad0d9; background: #2b303a; }
.login-metric { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.login-metric > strong { color: #31c48d; }
.login-metric > span { display: flex; flex-direction: column; font-size: 10px; font-weight: 700; }
.login-metric small { margin-top: 3px; color: #7d8490; font-size: 8px; }
.login-form-panel { display: grid; place-items: center; padding: 50px; }
.login-form-wrap { width: min(340px, 100%); }
.setup-form-wrap { width: min(430px, 100%); }
.login-form-wrap h2 { margin: 8px 0; font-size: 29px; letter-spacing: -1px; }
.stack-form { margin-top: 30px; display: grid; gap: 18px; }
.stack-form label { display: grid; gap: 7px; color: #454b56; font-size: 11px; font-weight: 750; }
.stack-form input { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #dfe2e6; border-radius: 10px; outline: none; }
.stack-form .button { margin-top: 7px; min-height: 48px; }
.setup-form { gap: 13px; }
.setup-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.public-exit-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: linear-gradient(150deg, #eef0f2, #f8f8f8); }
.public-exit-card { width: min(440px, 100%); padding: 35px; border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.public-exit-card .brand { margin-bottom: 45px; justify-content: center; text-align: left; }
.public-exit-card h1 { margin: 12px 0; font-size: 31px; letter-spacing: -1px; }
.public-exit-card > p:not(.eyebrow) { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.public-exit-card .app-form { margin-top: 28px; text-align: left; }
.exit-illustration { width: 65px; height: 65px; margin: 0 auto 25px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: var(--red); font-size: 30px; }
.public-exit-card .success-symbol { margin: 0 auto 25px; }
.duration-chip { margin-top: 25px; padding: 13px; border-radius: 10px; color: var(--green); background: var(--green-soft); font-size: 12px; font-weight: 800; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.settings-main { overflow: hidden; }
.settings-form { padding: 26px; }
.settings-form .checkbox { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fafafb; }
.settings-form .checkbox small { margin-left: auto; }
.input-with-suffix { display: grid; grid-template-columns: 1fr auto; align-items: center; overflow: hidden; border: 1px solid #dfe2e6; border-radius: 10px; background: #f5f6f7; }
.input-with-suffix input { border: 0; border-radius: 0; }
.input-with-suffix > span { padding: 0 13px; color: #858c97; font-size: 10px; font-weight: 650; }
.settings-side { display: grid; gap: 16px; }
.settings-status { padding: 27px; }
.settings-status-icon { width: 50px; height: 50px; margin: 25px 0 20px; display: grid; place-items: center; border-radius: 15px; color: #7a818c; background: #eef0f2; font-size: 23px; font-weight: 900; }
.settings-status-icon.is-success { color: #08734e; background: var(--green-soft); }
.settings-status h2 { margin: 0 0 10px; font-size: 21px; }
.settings-status > p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.smtp-error { margin-top: 16px; padding: 12px; border-radius: 9px; color: #a31623; background: var(--danger-soft); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.smtp-security-note { padding: 20px 22px; border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; background: #fff; box-shadow: var(--shadow); }
.smtp-security-note strong { font-size: 11px; }
.smtp-security-note p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }

.qr-display-panel { min-height: calc(100vh - 210px); padding: clamp(35px, 5vw, 72px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(40px, 7vw, 100px); overflow: hidden; position: relative; color: #fff; background: radial-gradient(circle at 85% 20%, #363b47 0, transparent 34%), var(--night); }
.qr-display-panel::after { content: ""; width: 320px; height: 320px; position: absolute; left: -190px; bottom: -200px; border: 65px solid rgba(227,38,54,.8); border-radius: 50%; }
.qr-display-copy { position: relative; z-index: 1; }
.qr-display-copy h2 { max-width: 650px; margin: 22px 0 17px; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -2.5px; }
.qr-display-copy > p:not(.eyebrow) { max-width: 520px; color: #acb2bc; font-size: 15px; line-height: 1.65; }
.qr-countdown { margin-top: 35px; display: inline-flex; gap: 8px; padding: 11px 15px; border: 1px solid #3a3f49; border-radius: 10px; color: #abb1bc; background: #22262f; font-size: 12px; }
.qr-countdown strong { color: #fff; font-variant-numeric: tabular-nums; }
.qr-display-code { min-width: 410px; padding: 25px; position: relative; z-index: 1; border-radius: 25px; color: #777e89; background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.3); text-align: center; }
.qr-display-code #rotating-qr { min-height: 360px; display: grid; place-items: center; }
.qr-display-code img, .qr-display-code canvas { max-width: 100%; height: auto !important; }
.qr-display-code small { margin-top: 15px; display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }

.qr-kiosk-shell { min-height: 100vh; overflow: hidden; color: #fff; background: var(--night); }
.qr-kiosk { width: 100vw; height: 100vh; min-height: 520px; padding: 18px 28px 10px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 58px 1fr 28px; gap: 8px; overflow: hidden; position: relative; background: radial-gradient(circle at 82% 22%, #363b47 0, transparent 32%), var(--night); }
.qr-kiosk::after { content: ""; width: 280px; height: 280px; position: absolute; left: -180px; bottom: -195px; border: 58px solid rgba(227,38,54,.88); border-radius: 50%; }
.qr-kiosk-header { width: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.qr-kiosk-header img { width: 168px; padding: 8px 11px; border-radius: 10px; background: #fff; }
.qr-kiosk-content { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 430px; align-items: center; gap: clamp(30px, 4vw, 58px); position: relative; z-index: 1; }
.qr-kiosk .eyebrow { font-size: 22px; letter-spacing: 2.3px; }
.qr-kiosk .qr-display-copy h1 { max-width: 640px; margin: 16px 0 25px; font-size: clamp(78px, 6.8vw, 96px); line-height: .91; letter-spacing: -4.2px; }
.qr-kiosk .qr-display-copy h1 .translation-en { margin-top: 13px; color: #aeb4be; font-size: .35em; font-weight: 650; line-height: 1.1; letter-spacing: -.4px; }
.qr-kiosk .qr-display-copy > p:not(.eyebrow) { max-width: 610px; margin: 0; color: #c2c6cd; font-size: 28px; line-height: 1.34; }
.qr-kiosk .qr-display-copy > p:not(.eyebrow) .translation-en { margin-top: 7px; color: #8f96a2; font-size: .65em; }
.qr-kiosk-steps { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 18px; }
.qr-kiosk-steps > span { display: flex; align-items: center; gap: 8px; color: #c5c9d0; font-size: 22px; font-weight: 700; }
.qr-kiosk-steps small { color: #858d99; font-size: .58em; font-weight: 650; }
.qr-kiosk-steps strong { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-size: 19px; }
.qr-kiosk .qr-display-code { width: 430px; min-width: 0; padding: 14px 16px 12px; border-radius: 24px; }
.qr-kiosk .qr-display-code #rotating-qr { min-height: 390px; }
.qr-kiosk .qr-display-code img, .qr-kiosk .qr-display-code canvas { margin: 0 auto; }
.qr-kiosk-meta { margin-top: 7px; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #626a76; font-size: 17px; font-weight: 750; }
.qr-kiosk-meta small { margin: 0 3px; color: #9298a2; font-size: .62em; font-weight: 650; }
.qr-kiosk-meta strong, .qr-kiosk-meta [data-live-clock] { color: var(--ink); font-variant-numeric: tabular-nums; }
.qr-kiosk-meta [data-live-clock] { font-size: 27px; font-weight: 850; }
.qr-kiosk footer { align-self: end; position: relative; z-index: 2; color: #979da7; font-size: 16px; font-weight: 600; text-align: center; }

@media (min-width: 1200px) and (min-height: 760px) {
  .qr-kiosk { padding: 20px 28px 12px; grid-template-rows: 62px 1fr 30px; gap: 10px; }
  .qr-kiosk-header img { width: 180px; }
  .qr-kiosk-content { grid-template-columns: minmax(0, 1fr) 550px; gap: clamp(55px, 5vw, 82px); }
  .qr-kiosk .qr-display-copy { transform: translateY(-34px); }
  .qr-kiosk .eyebrow { font-size: 26px; letter-spacing: 2.6px; }
  .qr-kiosk .qr-display-copy h1 { max-width: 760px; margin: 20px 0 30px; font-size: clamp(100px, 7.8vw, 118px); line-height: .9; letter-spacing: -5px; }
  .qr-kiosk .qr-display-copy > p:not(.eyebrow) { max-width: 700px; font-size: 34px; line-height: 1.32; }
  .qr-kiosk-steps { margin-top: 38px; gap: 18px 24px; }
  .qr-kiosk-steps span { gap: 11px; font-size: 26px; }
  .qr-kiosk-steps strong { width: 50px; height: 50px; font-size: 22px; }
  .qr-kiosk .qr-display-code { width: 550px; padding: 15px 16px 13px; border-radius: 26px; }
  .qr-kiosk .qr-display-code #rotating-qr { min-height: 518px; }
  .qr-kiosk-meta { font-size: 20px; }
  .qr-kiosk-meta [data-live-clock] { font-size: 32px; }
  .qr-kiosk footer { font-size: 18px; }
}

.self-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; color: var(--ink); background: radial-gradient(circle at 15% 10%, #fff 0, transparent 32%), #e9eaed; }
.self-shell .messages { width: min(560px, calc(100% - 30px)); padding: 0; position: fixed; top: 18px; left: 50%; z-index: 5; transform: translateX(-50%); }
.self-card { width: min(500px, 100%); padding: clamp(30px, 6vw, 52px); border: 1px solid rgba(255,255,255,.8); border-radius: 27px; background: #fff; box-shadow: 0 28px 80px rgba(20,25,35,.14); }
.self-card-wide { width: min(680px, 100%); }
.self-brand { margin-bottom: 48px; display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.self-brand span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--red); font-size: 13px; font-weight: 850; box-shadow: 0 9px 20px rgba(227,38,54,.2); }
.self-brand img { width: 122px; height: auto; display: block; }
.self-brand strong { font-size: 15px; }

.table-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.table-actions form { margin: 0; }
.table-actions .text-link { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; }

.badge-preview-shell { margin: 0; min-height: 100vh; background: #e9eaed; }
.badge-preview-page { min-height: 100vh; padding: 28px; display: grid; place-items: center; align-content: center; gap: 22px; }
.badge-label { --badge-accent: #e32636; width: 372px; min-height: 600px; padding: 28px; display: flex; flex-direction: column; color: #111; background: #fff; box-shadow: 0 18px 48px rgba(19,24,34,.16); }
.badge-label.is-mono { --badge-accent: #111; }
.badge-label.is-landscape { width: 600px; min-height: 372px; display: grid; grid-template-columns: 1.6fr .8fr; grid-template-rows: auto 1fr auto; column-gap: 28px; }
.badge-label.is-landscape .badge-label-header { grid-column: 1 / -1; }
.badge-label.is-landscape .badge-label-identity { min-width: 0; padding: 25px 0 18px; }
.badge-label.is-landscape .badge-label-meta { margin: 25px 0 18px; padding: 0 0 0 24px; grid-template-columns: 1fr; align-content: center; border-top: 0; border-left: 3px solid var(--badge-accent); }
.badge-label.is-landscape footer { grid-column: 1 / -1; }
.badge-label-header { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 5px solid #111; }
.badge-label-header { border-color: var(--badge-accent); }
.badge-label-header strong, .badge-label-identity small, .badge-label-meta dt { color: var(--badge-accent); }
.badge-label-header img { width: 190px; height: auto; }
.badge-label.is-mono .badge-label-header img { filter: grayscale(1) contrast(1.15); }
.badge-label-header strong { font-size: 18px; letter-spacing: 1px; }
.badge-label-identity { padding: 36px 0; flex: 1; }
.badge-label-identity small, .badge-label-meta dt { font-size: 10px; font-weight: 800; letter-spacing: 1.1px; }
.badge-label-identity h1 { margin: 13px 0 24px; font-size: 32px; line-height: 1.05; }
.badge-label-identity h2 { margin: 0 0 8px; font-size: 19px; }
.badge-label-identity p { margin: 0; color: #555; }
.badge-label-meta { margin: 0 0 28px; padding: 22px 0; display: grid; grid-template-columns: 1fr auto; gap: 28px; border-top: 3px solid var(--badge-accent); }
.badge-label-meta div { display: grid; gap: 7px; }
.badge-label-meta dd { margin: 0; font-size: 16px; font-weight: 800; }
.badge-label footer { margin: 0 -28px -28px; padding: 22px 18px; color: #fff; background: var(--badge-accent); text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .7px; }
.badge-preview-toolbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.badge-preview-toolbar small { width: 100%; color: #656c77; text-align: center; }
.self-card h1 { margin: 9px 0 13px; font-size: clamp(31px, 7vw, 43px); line-height: 1.06; letter-spacing: -1.5px; }
.self-card h1 > .translation-en { margin-top: 8px; color: #767e89; font-size: .48em; font-weight: 650; line-height: 1.2; letter-spacing: -.2px; }
.self-lead { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.self-lead .translation-en { margin-top: 6px; }
.self-form { margin-top: 30px; }
.self-form label { color: #464c57; font-size: 12px; font-weight: 750; }
.self-form input { font-size: 15px; }
.self-privacy { margin-top: 18px; display: block; color: #8a919c; font-size: 10px; line-height: 1.55; }
.bilingual-button { min-height: 54px; padding-top: 7px; padding-bottom: 7px; }
.bilingual-button > span:first-child { display: grid; gap: 2px; }
.bilingual-button small, .bilingual-link small { display: block; font-size: .72em; font-weight: 600; opacity: .72; }
.otp-input { min-height: 62px !important; font-size: 27px !important; font-weight: 800; letter-spacing: 9px; text-align: center; }
.self-avatar { margin: 0 0 25px; }
.self-acceptance { padding: 15px; align-items: flex-start !important; border: 1px solid var(--line); border-radius: 11px; background: #f8f9fa; font-size: 11px !important; font-weight: 500 !important; line-height: 1.5; }
.self-warning { margin-top: 28px; padding: 20px; border-radius: 13px; color: #a31623; background: var(--danger-soft); }
.self-warning strong { font-size: 13px; }
.self-warning p { margin: 7px 0 0; font-size: 11px; line-height: 1.6; }
.self-success { text-align: center; }
.self-success .self-brand { margin-bottom: 55px; }
.self-success .success-symbol, .self-success .alert-symbol { margin: 0 auto 30px; }
.self-close-hint { margin: 32px 0 0; color: #9298a2; font-size: 11px; }
.self-change-email { margin-top: 24px; text-align: center; }
.self-change-email .text-link { margin: 0; padding: 0; border: 0; background: transparent; }
.sidebar-scrim { display: none; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .people-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8,11,16,.55); }
  .menu-open .sidebar-scrim { display: block; }
  .main-content { width: 100%; margin-left: 0; }
  .menu-toggle { display: block; }
  .dashboard-grid, .form-layout, .confirm-grid, .access-detail-grid, .portal-form-grid, .printer-setup, .settings-layout { grid-template-columns: 1fr; }
  .form-aside { display: none; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .register-hero { align-items: stretch; flex-direction: column; gap: 25px; }
  .hero-search { min-width: 100%; }
  .login-card { grid-template-columns: 1fr; }
  .portal-stats-four { grid-template-columns: repeat(2, 1fr); }
  .qr-display-panel { grid-template-columns: 1fr; text-align: center; }
  .qr-display-copy h2, .qr-display-copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .qr-display-code { min-width: 0; width: min(410px, 100%); margin: 0 auto; }
  .login-visual { min-height: 320px; }
  .login-copy { margin: 55px 10px 35px; }
  .login-copy h1 { font-size: 39px; }
  .login-metric { display: none; }
}

@media (max-width: 800px) {
  .qr-kiosk-shell { overflow: auto; }
  .qr-kiosk { height: auto; min-height: 100vh; padding: 20px; grid-template-rows: auto 1fr auto; overflow: visible; }
  .qr-kiosk-content { padding: 25px 0; grid-template-columns: 1fr; text-align: center; }
  .qr-kiosk .qr-display-copy h1, .qr-kiosk .qr-display-copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .qr-kiosk-steps { justify-content: center; }
  .qr-kiosk .qr-display-code { width: min(390px, 100%); margin: 0 auto; }
}

@media (max-width: 640px) {
  .printer-option-grid { grid-template-columns: 1fr; }
  .topbar { min-height: 92px; padding: 20px; }
  .topbar-actions .button { min-height: 38px; padding: 0 12px; font-size: 11px; }
  .page-content { padding: 20px 15px 45px; }
  .messages { padding: 15px 15px 0; }
  .metric-grid, .people-grid, .portal-stats { grid-template-columns: 1fr; }
  .portal-date-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 125px; }
  .panel-header { padding: 18px; }
  .filterbar { align-items: stretch; flex-direction: column; }
  .filterbar input { min-width: 0; }
  .register-hero { padding: 28px 23px; border-radius: 18px; }
  .register-hero h2 { font-size: 25px; }
  .form-panel, .identity-card, .confirmation-panel, .access-summary, .qr-panel { padding: 22px; }
  .detail-list { grid-template-columns: 1fr; }
  .portal-header { padding: 14px 18px; }
  .portal-user > span { display: none; }
  .portal-main { padding: 25px 15px 50px; }
  .portal-welcome { padding: 28px 23px; align-items: flex-start; flex-direction: column; }
  .portal-welcome h1 { font-size: 27px; }
  .login-shell { padding: 0; }
  .self-shell { padding: 0; }
  .self-card { min-height: 100vh; padding: 38px 25px; display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; box-shadow: none; }
  .self-card .self-form { width: 100%; }
  .qr-display-panel { min-height: calc(100vh - 150px); padding: 30px 20px; }
  .qr-display-copy h2 { font-size: 34px; letter-spacing: -1.3px; }
  .qr-display-code { padding: 16px; }
  .qr-display-code #rotating-qr { min-height: 0; }
  .login-card { min-height: 100vh; border-radius: 0; }
  .login-visual { min-height: 260px; padding: 25px; }
  .login-copy { margin: 42px 5px 20px; }
  .form-grid, .setup-name-grid { grid-template-columns: 1fr; }
  .login-copy h1 { margin: 17px 0 8px; font-size: 31px; }
  .login-copy p { font-size: 12px; }
  .login-form-panel { padding: 40px 28px; }
  th, td { padding: 13px 15px; }
}

@media print {
  .sidebar, .topbar, .button, form { display: none !important; }
  .main-content { width: 100%; margin: 0; }
  .page-content { padding: 0; }
  .panel { box-shadow: none; }
  .badge-preview-shell { background: #fff; }
  .badge-preview-page { min-height: auto; padding: 0; display: block; }
  .badge-label { width: 62mm; height: 100mm; min-height: 100mm; padding: 5mm; box-shadow: none; overflow: hidden; }
  .badge-label.is-landscape { width: 100mm; height: 62mm; min-height: 62mm; }
  .badge-label-header { min-height: 14mm; }
  .badge-label-header img { width: 36mm; }
  .badge-label-identity { padding: 8mm 0; }
  .badge-label-identity h1 { font-size: 23pt; }
  .badge-label-meta { margin-bottom: 5mm; padding: 5mm 0; }
  .badge-label footer { margin: 0 -5mm -5mm; padding: 5mm 2mm; }
  .badge-label.is-landscape .badge-label-identity { padding: 5mm 0 3mm; }
  .badge-label.is-landscape .badge-label-meta { margin: 5mm 0 3mm; padding: 0 0 0 5mm; }
  .badge-preview-toolbar { display: none !important; }
}