:root {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #242b26;
  background: #f4f5f3;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color-scheme: light;
  --ink: #202721;
  --muted: #727a74;
  --line: #e3e6e2;
  --surface: #fff;
  --green: #277047;
  --green-dark: #205a39;
  --green-light: #edf5ef;
  --red: #9b3d39;
  --red-light: #fcf0ef;
  --sidebar-width: 232px;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
svg.icon { display: block; width: 18px; height: 18px; flex: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.admin-page { background: #f4f5f3; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 12; display: flex; width: var(--sidebar-width); flex-direction: column; padding: 24px 16px 17px; color: #fff; background: var(--ink); }
.brand { display: flex; min-height: 49px; align-items: center; gap: 10px; }
.brand-mark { display: grid; width: 37px; height: 40px; flex: none; place-items: center; color: #dae8dc; }
.brand-mark svg { width: 30px; height: 35px; }
.brand-name { display: flex; flex-direction: column; }
.brand-name strong { font-size: 14px; font-weight: 650; letter-spacing: .035em; }
.brand-name > span { color: #b4beb6; font-size: 11px; }
.nav-heading { margin: 34px 8px 10px; color: #98a39b; font-size: 9px; font-weight: 650; letter-spacing: .12em; }
.primary-nav { display: grid; gap: 4px; }
.nav-link { display: flex; min-height: 43px; align-items: center; gap: 11px; padding: 0 10px; border-radius: 3px; color: #d3dad4; font-size: 12px; }
.nav-link:hover { background: #29332c; color: #fff; }
.nav-link.is-active { background: #304137; color: #fff; box-shadow: inset 2px 0 #81aa8b; }
.nav-link .icon { width: 17px; height: 17px; }
.sidebar-bottom { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 14px 7px 3px; border-top: 1px solid #364139; color: #bbc4bd; font-size: 10px; }
.system-dot { width: 7px; height: 7px; border-radius: 50%; background: #7aab85; }
.workspace { display: flex; min-height: 100vh; flex-direction: column; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 8; display: flex; min-height: 59px; align-items: center; justify-content: space-between; padding: 0 31px; border-bottom: 1px solid var(--line); background: #fff; }
.topbar-title { color: #646c66; font-size: 11px; }
.account, .account form { display: flex; align-items: center; gap: 15px; }
.account-name { color: #3c453f; font-size: 11px; }
.logout { display: flex; align-items: center; gap: 6px; padding: 6px 0 6px 12px; border: 0; border-left: 1px solid var(--line); background: transparent; color: #636b64; cursor: pointer; font-size: 10px; }
.logout:hover { color: var(--ink); }
.logout .icon { width: 15px; height: 15px; }
.mobile-toggle { display: none; align-items: center; justify-content: center; padding: 7px; border: 1px solid var(--line); border-radius: 3px; background: #fff; cursor: pointer; }
.main-content { width: min(100%, 1420px); flex: 1; margin: 0 auto; padding: 32px; }
.app-footer { display: flex; justify-content: space-between; padding: 13px 32px; border-top: 1px solid var(--line); color: #747c75; font-size: 10px; }
.app-footer span { color: #929992; }

.page-heading { display: flex; min-height: 87px; align-items: flex-end; justify-content: space-between; gap: 17px; margin-bottom: 22px; }
.eyebrow { display: block; color: #758078; font-size: 9px; font-weight: 650; letter-spacing: .115em; }
.page-heading h1 { margin: 5px 0 4px; color: #202721; font-size: 24px; font-weight: 600; letter-spacing: -.035em; line-height: 1.25; }
.page-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 11px; font-weight: 550; white-space: nowrap; transition: background-color .14s, border-color .14s; }
.button .icon { width: 15px; height: 15px; }
.button-primary { border-color: var(--green); color: #fff; background: var(--green); }
.button-primary:hover { border-color: var(--green-dark); background: var(--green-dark); }
.button-secondary { border-color: #dce1dc; color: #354038; background: #fff; }
.button-secondary:hover { border-color: #adb8b0; background: #fafbfa; }
.button-warning { border-color: #e7cecc; color: var(--red); background: #fff; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.panel-header { display: flex; min-height: 67px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0 0 3px; font-size: 13px; font-weight: 600; }
.panel-header p { margin: 0; color: var(--muted); font-size: 10px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; font-weight: 550; }
.text-link .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 19px; }
.metric { display: flex; min-height: 111px; flex-direction: column; align-items: flex-start; padding: 15px 17px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.metric > span { color: #687069; font-size: 11px; font-weight: 500; }
.metric > strong { margin-top: 3px; color: #222b24; font-size: 27px; font-weight: 600; letter-spacing: -.04em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.metric > small { margin-top: auto; color: #929992; font-size: 9px; }
.notice { padding: 10px 12px; border: 1px solid; border-radius: 3px; font-size: 11px; }
.notice-warning { margin-bottom: 17px; border-color: #eadfc5; color: #72591e; background: #faf7ee; }
.notice-success { margin-top: 11px; border-color: #d4e6d9; color: #286441; background: #f0f7f2; }

.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.data-table th { height: 39px; padding: 0 11px; border-bottom: 1px solid var(--line); background: #fafbfa; color: #737b75; font-size: 9px; font-weight: 600; }
.data-table td { height: 54px; padding: 8px 11px; border-bottom: 1px solid #edf0ed; color: #38413a; font-size: 10px; }
.data-table th:first-child, .data-table td:first-child { padding-left: 18px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 18px; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fcfdfc; }
.player-thumb { display: block; width: 32px; height: 38px; object-fit: cover; object-position: center 28%; border: 1px solid #e2e6e2; border-radius: 2px; }
.photo-placeholder { display: grid; place-items: center; background: #eff1ef; color: #647067; font-size: 10px; font-weight: 600; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .025em; }
.player-link { font-weight: 550; }
.player-link:hover { color: var(--green); }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 2px; font-size: 9px; font-weight: 550; }
.status-badge > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active { color: var(--green); background: var(--green-light); }
.status-inactive { color: var(--red); background: var(--red-light); }
.row-actions { display: flex; align-items: center; gap: 11px; }
.row-actions a { color: #566159; font-size: 10px; }
.row-actions a:hover { color: var(--green); text-decoration: underline; }
.empty-state { height: 84px !important; color: #747d76 !important; text-align: center; white-space: normal; }
.table-summary { padding: 10px 18px; border-top: 1px solid var(--line); color: #7e867f; font-size: 10px; }
.filter-bar { display: flex; min-height: 63px; align-items: center; gap: 9px; padding: 11px 17px; border-bottom: 1px solid var(--line); }
.search-box { display: flex; width: min(100%, 330px); height: 35px; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #dfe3df; border-radius: 3px; }
.search-box .icon { width: 14px; height: 14px; color: #838b84; }
.search-box input { width: 100%; height: 100%; min-width: 0; border: 0; outline: 0; font-size: 10px; }
.filter-field select, .field select { min-height: 36px; padding: 0 10px; border: 1px solid #dde2dd; border-radius: 3px; background: #fff; color: #404a42; font-size: 10px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 16px; color: #6e776f; font-size: 10px; }

.back-link { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 12px; color: #69726b; font-size: 10px; }
.back-link .icon { width: 14px; height: 14px; }
.back-link:hover { color: var(--green); }
.form-panel { padding: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.field > span { color: #465048; font-size: 10px; font-weight: 550; }
.field input, .field select { width: 100%; min-height: 37px; padding: 0 10px; border: 1px solid #dce1dc; border-radius: 3px; outline: 0; background: #fff; color: #303a32; font-size: 11px; }
.field input:focus, .field select:focus { border-color: #7a9c81; box-shadow: 0 0 0 2px #eef4ef; }
.field small { color: #808981; font-size: 9px; line-height: 1.5; }
.field-photo { grid-column: 1 / -1; }
.photo-picker { display: flex; align-items: center; gap: 12px; }
.form-photo { display: grid; width: 68px; height: 78px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 2px; object-fit: cover; object-position: center 25%; }
.photo-picker > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.file-button { position: relative; overflow: hidden; min-height: 32px; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.selected-file { color: #58635b; font-size: 9px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.form-error { margin-bottom: 16px; padding: 11px; border: 1px solid #eed1ce; border-radius: 3px; color: #913c36; background: #fff7f6; font-size: 10px; }
.form-error ul { margin: 5px 0 0; padding-left: 18px; }
.profile-panel { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; padding: 20px; }
.profile-photo-wrap { min-height: 214px; overflow: hidden; border: 1px solid var(--line); background: #eff1ef; }
.profile-photo { display: block; width: 100%; height: 100%; min-height: 214px; object-fit: cover; object-position: center 24%; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 21px; margin: 4px 0 0; }
.detail-grid div, .verified-details div { min-width: 0; }
.detail-grid dt, .verified-details dt { margin-bottom: 3px; color: #777f79; font-size: 9px; }
.detail-grid dd, .verified-details dd { margin: 0; color: #29322b; font-size: 11px; font-weight: 550; }
.player-credential { display: grid; grid-template-columns: minmax(130px, 1fr) 115px minmax(180px, auto); align-items: center; gap: 19px; margin-top: 16px; padding: 17px; }
.player-credential h2 { margin: 0 0 3px; font-size: 12px; font-weight: 600; }
.player-credential p { margin: 0; color: #7b837c; font-size: 9px; }
.detail-qr { display: block; width: 105px; height: 105px; object-fit: contain; border: 1px solid var(--line); }
.qr-missing { display: grid; width: 105px; height: 105px; place-items: center; border: 1px dashed #dfe3df; color: #778078; font-size: 9px; text-align: center; }
.credential-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.credential-detail-actions form { margin: 0; }

.credential-toolbar { padding: 15px; }
.credential-toolbar > form { display: flex; align-items: flex-end; gap: 9px; }
.credential-toolbar .field { width: min(100%, 320px); }
.credential-toolbar .field select { width: 100%; }
.credential-toolbar > p { margin: 9px 0 0; color: #768078; font-size: 9px; }
.credential-toolbar .notice-success { padding: 8px 10px; }
.batch-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 13px 0 8px; color: #707972; font-size: 10px; }
.credential-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.id-card { display: flex; min-height: 205px; flex-direction: column; overflow: hidden; border: 1px solid #dfe3df; border-radius: 4px; background: #fff; }
.id-card-header { display: flex; min-height: 36px; align-items: center; gap: 6px; padding: 5px 9px; border-bottom: 1px solid var(--line); }
.id-card-header .brand-mark { width: 20px; height: 22px; color: #46634d; }
.id-card-header .brand-mark svg { width: 18px; height: 20px; }
.id-card-header > strong { font-size: 8px; letter-spacing: .035em; }
.id-card-header > span:last-child { margin-left: auto; color: #7b837c; font-size: 7px; }
.id-card-main { display: grid; grid-template-columns: 61px minmax(0, 1fr) 53px; flex: 1; gap: 8px; align-items: center; padding: 8px; }
.id-player-photo { display: block; width: 61px; height: 82px; border: 1px solid var(--line); object-fit: cover; object-position: center 25%; }
.id-card-info { display: grid; align-content: center; gap: 4px; overflow: hidden; font-size: 8px; }
.id-card-info h2 { overflow: hidden; margin: 0; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.id-card-info span { overflow: hidden; color: #454e47; text-overflow: ellipsis; white-space: nowrap; }
.id-card-info b { color: #7a827c; font-weight: 500; }
.id-card-number { color: #4c6652 !important; font-weight: 600; }
.id-card-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.id-card-qr img { width: 47px; height: 47px; object-fit: contain; }
.id-card-qr small { color: #778078; font-size: 6px; line-height: 1.3; }
.id-card-qr > span { color: #858c86; font-size: 7px; }
.id-card-footer { display: flex; min-height: 21px; align-items: center; justify-content: space-between; padding: 0 8px; border-top: 1px solid var(--line); background: #fafbfa; color: #747c75; font-size: 7px; }
.id-card-footer .status-badge { padding: 2px 4px; font-size: 7px; }
.id-card-footer .status-badge > span { width: 4px; height: 4px; }
.pagination + .credential-sheet { margin-top: 8px; }
.empty-panel { padding: 20px; color: #737b75; font-size: 11px; }
.empty-panel p { margin: 0; }
.print-sheet { width: min(100% - 32px, 720px); margin: 23px auto 10px; }
.print-toolbar { display: flex; justify-content: space-between; margin-bottom: 14px; }
.print-sheet > .id-card { min-height: 235px; }
.print-sheet > .id-card .id-card-header { min-height: 52px; gap: 9px; padding: 8px 13px; }
.print-sheet > .id-card .id-card-header .brand-mark { width: 29px; height: 33px; }
.print-sheet > .id-card .id-card-header .brand-mark svg { width: 26px; height: 29px; }
.print-sheet > .id-card .id-card-header strong { font-size: 10px; }
.print-sheet > .id-card .id-card-header > span:last-child { font-size: 9px; }
.print-sheet > .id-card .id-card-main { grid-template-columns: 95px minmax(0, 1fr) 100px; gap: 13px; padding: 12px; }
.print-sheet > .id-card .id-player-photo { width: 95px; height: 118px; }
.print-sheet > .id-card .id-card-info { gap: 7px; font-size: 10px; }
.print-sheet > .id-card .id-card-info h2 { font-size: 15px; }
.print-sheet > .id-card .id-card-qr img { display: block; width: min(82px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; }
.print-sheet > .id-card .id-card-qr small { font-size: 8px; }
.virtual-card-link { display: inline-flex; margin: 11px 0; color: var(--green); font-size: 10px; }

.import-panel { padding: 20px; }
.import-panel form { display: grid; gap: 16px; }
.import-panel input[type="file"] { min-height: 38px; padding: 7px; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.import-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.import-errors { margin: 16px 0; padding: 13px; border: 1px solid #eed1ce; border-radius: 3px; color: #8d3935; background: #fff7f6; font-size: 10px; }
.import-errors ul { margin: 7px 0; padding-left: 18px; }
.import-summary { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding: 18px; }
.summary-count { color: var(--green); font-size: 28px; font-weight: 600; }
.import-summary h2 { margin: 0 0 4px; font-size: 12px; }
.import-summary p { margin: 0; color: #757d77; font-size: 10px; }

.scan-heading { margin-bottom: 16px; }
.scan-heading .page-heading { min-height: 69px; margin-bottom: 0; }
.scan-panel { width: min(100%, 600px); margin: 0 auto; padding: 13px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
#qr-reader { width: 100%; overflow: hidden; border: 0 !important; }
#qr-reader__dashboard { padding: 8px !important; color: #59635b; font-size: 10px; }
#qr-reader__dashboard_section_swaplink { color: var(--green) !important; }
#qr-reader video { max-height: min(62vh, 550px); object-fit: cover; }
#qr-reader__scan_region { min-height: 260px; }
#qr-reader__scan_region img { max-height: 42px; }
#qr-reader__status_span { display: none; }
.camera-error { margin-top: 9px; padding: 10px; border: 1px solid #ecd5d2; border-radius: 3px; color: #873c37; background: #fdf5f4; font-size: 10px; }
.scan-footer { display: flex; align-items: center; gap: 7px; padding-top: 10px; color: #6d776f; font-size: 9px; }
.camera-indicator { width: 6px; height: 6px; border-radius: 50%; background: #548362; }
.scan-help { margin: 11px auto; color: #777f78; font-size: 9px; text-align: center; }

.login-page { background: #f5f6f4; }
.login-shell { width: min(100% - 32px, 380px); margin: max(8vh, 38px) auto 28px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 17px; color: var(--ink); }
.login-brand .brand-mark { color: #4a6750; }
.login-brand > div { display: flex; flex-direction: column; }
.login-brand > div strong { font-size: 12px; letter-spacing: .045em; }
.login-brand > div span { color: #767e77; font-size: 9px; letter-spacing: .07em; }
.login-panel { padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.login-panel h1 { margin: 5px 0; font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.login-panel > p { margin: 0 0 18px; color: #737b75; font-size: 10px; }
.login-panel form { display: grid; gap: 14px; }
.login-submit { width: 100%; margin-top: 4px; }
.login-footer { margin-top: 13px; color: #838a84; font-size: 9px; text-align: center; }

.result-page, .virtual-page { background: #f3f5f2; }
.result-shell { width: min(100% - 32px, 500px); min-height: 100dvh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 0 20px; }
.result-brand { display: flex; min-height: 51px; align-items: center; gap: 9px; border-bottom: 1px solid #dfe4df; color: #202721; }
.result-brand .brand-mark { width: 31px; height: 35px; color: #43624b; }
.result-brand .brand-mark svg { width: 27px; height: 31px; }
.result-brand strong { font-size: 11px; letter-spacing: .04em; }
.verified-card { margin-top: 17px; padding: 14px; border: 1px solid #e0e5df; border-radius: 4px; background: #fff; }
.verified-photo-wrap { overflow: hidden; height: clamp(238px, 47vh, 430px); border: 1px solid #e1e5e1; border-radius: 2px; background: #eff1ef; }
.verified-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 23%; }
.verified-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 15px 2px 12px; border-bottom: 1px solid var(--line); }
.verified-header h1 { margin: 4px 0 0; color: #202721; font-size: 21px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
.verified-stamp { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 6px 7px; border: 1px solid #d6e6da; border-radius: 3px; color: #246741; background: #edf6ef; font-size: 8px; font-weight: 700; }
.verified-stamp .icon { width: 13px; height: 13px; }
.verified-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 13px 2px; }
.verified-details dt { font-size: 9px; }
.verified-details dd { font-size: 11px; }
.verified-enabled { color: #266c43 !important; font-weight: 700 !important; letter-spacing: .04em; }
.verified-record { padding-top: 10px; border-top: 1px solid #eef0ee; color: #848b85; font-size: 8px; }
.result-status { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 17px; border: 1px solid; border-radius: 4px; }
.result-status > span { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 22px; line-height: 1; }
.result-status h1 { margin: 0 0 3px; font-size: 14px; font-weight: 700; letter-spacing: .025em; }
.result-status p { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.result-status.invalid { margin-top: clamp(70px, 22vh, 200px); border-color: #edcfcc; color: #953b36; background: #fbefee; }
.result-connection { margin-top: clamp(70px, 22vh, 200px); border-color: #e8dec6; color: #725c26; background: #faf7ef; }
.virtual-shell { width: min(100% - 28px, 520px); margin: 0 auto; padding: max(17px, env(safe-area-inset-top)) 0 20px; }
.virtual-header { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .04em; }
.virtual-header .brand-mark { width: 30px; height: 34px; color: #46654e; }
.virtual-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; margin-top: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.virtual-photo { grid-row: 1 / 3; overflow: hidden; min-height: 174px; background: #eff1ef; }
.virtual-player-photo { display: block; width: 100%; height: 100%; min-height: 174px; object-fit: cover; object-position: center 24%; }
.virtual-data h1 { margin: 3px 0 4px; font-size: 17px; font-weight: 600; line-height: 1.2; }
.number-tag { color: #707970; font-size: 8px; }
.virtual-data .detail-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.virtual-data .status-badge { margin-top: 10px; }
.virtual-qr { display: flex; grid-column: 2; align-items: center; gap: 7px; }
.virtual-qr img { width: 66px; height: 66px; object-fit: contain; }
.virtual-qr small { max-width: 100px; color: #737b75; font-size: 8px; }
.virtual-note { color: #7c847d; font-size: 8px; }
.not-found { display: flex; min-height: 280px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.not-found h1 { font-size: 22px; }

@media (max-width: 1000px) {
  :root { --sidebar-width: 210px; }
  .main-content { padding: 25px 22px; }
  .topbar { padding: 0 22px; }
  .player-credential { grid-template-columns: 1fr 95px; }
  .credential-detail-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .sidebar { transform: translateX(-101%); transition: transform .17s ease; box-shadow: 8px 0 24px rgb(20 28 22 / 12%); }
  .sidebar.sidebar-open { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .mobile-toggle { display: inline-flex; }
  .topbar { justify-content: flex-start; gap: 10px; }
  .topbar-title { margin-right: auto; }
  .account { gap: 8px; }
  .metrics-grid { gap: 9px; }
  .main-content { padding: 23px 17px; }
}
@media (max-width: 540px) {
  .topbar { min-height: 54px; padding: 0 12px; }
  .topbar-title { max-width: 140px; font-size: 9px; }
  .account { gap: 4px; }
  .account-name { max-width: 88px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .logout { gap: 4px; padding-left: 7px; font-size: 9px; }
  .logout .icon { width: 13px; height: 13px; }
  .app-footer { padding: 11px 14px; font-size: 9px; }
  .app-footer span { display: none; }
  .main-content { padding: 20px 12px; }
  .page-heading { min-height: 79px; align-items: flex-end; margin-bottom: 15px; }
  .page-heading h1 { font-size: 21px; }
  .page-heading p { max-width: 245px; font-size: 9px; }
  .page-heading > .button, .heading-actions .button { min-height: 33px; padding: 0 8px; font-size: 9px; }
  .heading-actions { gap: 5px; }
  .heading-actions .icon { width: 13px; height: 13px; }
  .metrics-grid { gap: 6px; margin-bottom: 14px; }
  .metric { min-height: 91px; padding: 11px 9px; }
  .metric > span { font-size: 9px; line-height: 1.3; }
  .metric > strong { font-size: 23px; }
  .metric > small { font-size: 8px; line-height: 1.25; }
  .panel-header { min-height: 58px; padding: 11px; }
  .panel-header h2 { font-size: 11px; }
  .panel-header p { font-size: 9px; }
  .filter-bar { align-items: stretch; flex-wrap: wrap; gap: 7px; padding: 10px; }
  .search-box { width: 100%; height: 34px; }
  .filter-field { flex: 1; }
  .filter-field select { width: 100%; min-height: 33px; font-size: 9px; }
  .filter-bar > .button { min-height: 33px; }
  .data-table { min-width: 640px; }
  .data-table th { height: 36px; }
  .data-table td { height: 49px; }
  .table-summary { padding: 9px 11px; }
  .pagination { gap: 8px; }
  .pagination .button { min-height: 31px; padding: 0 9px; font-size: 9px; }
  .form-panel { padding: 13px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .field-photo { grid-column: auto; }
  .form-actions .button { padding: 0 9px; font-size: 10px; }
  .profile-panel { grid-template-columns: 105px minmax(0, 1fr); gap: 11px; padding: 12px; }
  .profile-photo-wrap, .profile-photo { min-height: 145px; }
  .detail-grid { gap: 12px 9px; }
  .detail-grid dt { font-size: 8px; }
  .detail-grid dd { font-size: 10px; }
  .player-credential { grid-template-columns: 1fr 76px; gap: 10px; padding: 12px; }
  .player-credential p { font-size: 8px; }
  .detail-qr, .qr-missing { width: 72px; height: 72px; }
  .credential-detail-actions { gap: 6px; }
  .credential-detail-actions .button { min-height: 32px; padding: 0 8px; font-size: 9px; }
  .credential-toolbar { padding: 11px; }
  .credential-toolbar > form { align-items: stretch; flex-direction: column; }
  .credential-toolbar .field { width: 100%; }
  .credential-toolbar .button { align-self: flex-start; }
  .credential-sheet { grid-template-columns: 1fr; }
  .id-card { min-height: 190px; }
  .print-sheet { width: min(100% - 24px, 720px); }
  .print-sheet > .id-card .id-card-main {
    grid-template-columns: minmax(58px, 24%) minmax(0, 1fr) minmax(62px, 25%);
    gap: clamp(5px, 2vw, 10px);
    padding: clamp(6px, 2vw, 10px);
  }
  .print-sheet > .id-card .id-player-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .print-sheet > .id-card .id-card-qr img { width: min(82px, 100%); }
  .print-sheet > .id-card .id-card-info { min-width: 0; }
  .scan-heading .page-heading { min-height: 62px; }
  .scan-panel { padding: 8px; }
  #qr-reader video { max-height: min(55vh, 450px); }
  #qr-reader__scan_region { min-height: 210px; }
  #qr-reader__dashboard { padding: 5px !important; }
  .scan-footer { font-size: 8px; }
  .login-panel { padding: 19px; }
  .result-shell { width: min(100% - 24px, 500px); padding-top: max(13px, env(safe-area-inset-top)); }
  .verified-card { margin-top: 12px; padding: 10px; }
  .verified-photo-wrap { height: clamp(210px, 43vh, 360px); }
  .verified-header { flex-direction: column; gap: 7px; padding: 12px 2px 9px; }
  .verified-header h1 { font-size: 19px; }
  .verified-stamp { font-size: 8px; }
  .verified-details { gap: 10px; margin: 10px 2px; }
  .virtual-card { grid-template-columns: 105px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .virtual-photo, .virtual-player-photo { min-height: 152px; }
  .virtual-data h1 { font-size: 14px; }
  .virtual-qr img { width: 58px; height: 58px; }
  .import-panel { padding: 12px; }
}
@media print {
  @page { size: A4 portrait; margin: 9mm; }
  @page :first { margin-top: 9mm; }
  @page physical-card { size: 86mm 54mm; margin: 0; }
  .sidebar, .topbar, .app-footer, .page-heading, .credential-toolbar,
  .batch-toolbar, .pagination, .print-toolbar, .virtual-card-link { display: none !important; }
  .admin-page, .workspace, .main-content { width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; background: #fff !important; }
  .main-content > .credential-sheet { margin: 0; }
  .credential-sheet { grid-template-columns: repeat(2, 86mm); gap: 2mm; }
  .credential-sheet .id-card { width: 86mm; height: 54mm; min-height: 54mm; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .credential-sheet .id-card-main { grid-template-columns: 19mm minmax(0, 1fr) 21mm; gap: 2mm; padding: 2mm 2.5mm; }
  .credential-sheet .id-player-photo { width: 19mm; height: 25mm; }
  .credential-sheet .id-card-qr img { width: 18mm; height: 18mm; }
  .credential-sheet .id-card-qr small { font-size: 5pt; }
  .credential-sheet .id-card-info { gap: 1mm; font-size: 6pt; }
  .credential-sheet .id-card-info h2 { font-size: 8pt; }
  .credential-sheet .id-card-header { min-height: 9mm; }
  .credential-sheet .id-card-header > strong { font-size: 7pt; }
  .credential-sheet .id-card-footer { min-height: 6mm; }
  .credential-sheet .id-card-footer { font-size: 5pt; }
  .credential-sheet .id-card-footer .status-badge { font-size: 5pt; }
  .print-credential .sidebar, .print-credential .topbar, .print-credential .app-footer,
  .print-credential .back-link, .print-credential .page-heading, .print-credential > .virtual-card-link { display: none !important; }
  .print-credential, .print-credential.admin-page, .print-credential .workspace, .print-credential .main-content { page: physical-card; margin: 0; padding: 0; background: #fff !important; }
  .print-sheet { width: 86mm; height: 54mm; margin: 0; }
  .print-toolbar { display: none !important; }
  .print-sheet > .id-card { width: 86mm; height: 54mm; min-height: 54mm; border: .25mm solid #9ba39d; border-radius: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .print-sheet > .id-card .id-card-header { min-height: 9mm; padding: 1mm 2mm; }
  .print-sheet > .id-card .id-card-main { grid-template-columns: 19mm minmax(0, 1fr) 21mm; gap: 2mm; flex: 1; padding: 2mm; }
  .print-sheet > .id-card .id-player-photo { width: 19mm; height: 25mm; }
  .print-sheet > .id-card .id-card-qr img { width: 18mm; height: 18mm; }
  .print-sheet > .id-card .id-card-info { gap: 1mm; font-size: 6pt; }
  .print-sheet > .id-card .id-card-info h1 { margin: 0; font-size: 9pt; }
  .print-sheet > .id-card .id-card-info dl { gap: 1mm; }
  .print-sheet > .id-card .id-card-info dt { font-size: 5pt; }
  .print-sheet > .id-card .id-card-info dd { font-size: 6pt; }
  .print-sheet > .id-card .id-card-qr small { font-size: 5pt; }
  .print-sheet > .id-card .id-card-footer { min-height: 6mm; }
  .print-sheet > .id-card .id-card-footer { font-size: 5pt; }
}