:root {
  --navy-950: #0c1f36;
  --navy-900: #102a49;
  --navy-850: #153455;
  --navy-800: #1a3d63;
  --blue-700: #1d5fae;
  --blue-600: #2673c9;
  --blue-100: #e9f2fc;
  --green-700: #18744d;
  --green-100: #e7f5ee;
  --amber-700: #9b5b08;
  --amber-100: #fff3dd;
  --purple-700: #6650a4;
  --purple-100: #f0ebfb;
  --red-700: #b23838;
  --red-100: #fbeaea;
  --ink-950: #111827;
  --ink-800: #263445;
  --ink-700: #405064;
  --ink-600: #59687a;
  --ink-500: #768397;
  --line-300: #cfd8e4;
  --line-200: #dce3eb;
  --line-100: #e9eef4;
  --surface: #ffffff;
  --surface-soft: #f6f8fb;
  --surface-muted: #eef2f6;
  --shadow: 0 1px 2px rgba(12, 31, 54, .05), 0 8px 24px rgba(12, 31, 54, .04);
  --sidebar-width: 258px;
  --radius: 8px;
  --radius-sm: 5px;
  --font: "Malgun Gothic", "맑은 고딕", "Noto Sans KR", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--surface-soft); }
body { margin: 0; font-family: var(--font); color: var(--ink-950); background: var(--surface-soft); font-size: 13px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .55; }
img { max-width: 100%; }
svg.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.number { text-align: right !important; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-500); }
.danger-text { color: var(--red-700) !important; }
.break-word { word-break: break-all; }
.soft-strong { font-weight: 600; }
.inverse-text { color: rgba(255,255,255,.7) !important; }

/* App shell */
.app-layout { min-height: 100vh; display: flex; }
.sidebar {
  width: var(--sidebar-width); min-height: 100vh; position: fixed; inset: 0 auto 0 0; z-index: 40;
  display: flex; flex-direction: column; color: #eaf2fa;
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  border-right: 1px solid rgba(255,255,255,.06);
}
.brand { height: 82px; display: flex; align-items: center; gap: 12px; padding: 0 19px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: #fff; color: var(--navy-900); font-weight: 800; font-size: 19px; border-radius: 7px; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; }
.brand-copy strong { font-size: 14px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-copy span { margin-top: 2px; font-size: 10px; letter-spacing: .8px; color: #9fb3c9; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 12px; scrollbar-width: thin; }
.nav-section + .nav-section { margin-top: 23px; }
.nav-section-title { display: block; margin: 0 10px 7px; color: #839ab3; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 12px; margin: 2px 0; border-radius: 6px; color: #cbd8e6; font-weight: 600; transition: background .14s, color .14s; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: #fff; color: var(--navy-900); box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.nav-item.active::before { content: ""; width: 3px; align-self: stretch; margin: 7px 0 7px -12px; background: var(--blue-600); border-radius: 0 3px 3px 0; }
.nav-item.active svg { color: var(--blue-700); }
.sidebar-user { min-height: 76px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.09); background: rgba(0,0,0,.08); }
.user-avatar, .table-avatar { display: grid; place-items: center; border-radius: 50%; font-weight: 700; }
.user-avatar { width: 34px; height: 34px; color: var(--navy-900); background: #d8e6f4; }
.user-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.user-copy strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-copy span { font-size: 10px; color: #9fb3c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-main { width: calc(100% - var(--sidebar-width)); margin-left: var(--sidebar-width); min-width: 0; }
.topbar { min-height: 82px; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line-200); backdrop-filter: blur(8px); }
.topbar-left { display: flex; align-items: center; min-width: 0; }
.page-heading h1 { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.55px; }
.page-heading p { margin: 3px 0 0; color: var(--ink-600); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.global-search { width: min(390px, 33vw); height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--surface-soft); border: 1px solid var(--line-200); border-radius: 6px; color: var(--ink-500); }
.global-search:focus-within { background: #fff; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(38,115,201,.1); }
.global-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink-950); font-size: 12px; }
.global-search kbd { padding: 2px 5px; border: 1px solid var(--line-300); border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--ink-500); font-size: 9px; }
.mobile-menu { display: none !important; margin-right: 10px; }
.content { width: 100%; max-width: 1800px; margin: 0 auto; padding: 24px 28px 48px; }
.content-narrow { max-width: 760px; margin: 0 auto; }
.sidebar-backdrop { display: none; }

/* Buttons */
.button, .icon-button, .text-link, .text-button, .star-button, .copy-button, .password-toggle {
  border: 0; background: transparent; color: inherit;
}
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: 5px; font-weight: 700; font-size: 12px; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s, transform .06s; }
.button:active { transform: translateY(1px); }
.button.primary { color: #fff; background: var(--blue-700); border-color: var(--blue-700); }
.button.primary:hover { background: #174f91; border-color: #174f91; }
.button.secondary { color: var(--ink-800); background: #fff; border-color: var(--line-300); }
.button.secondary:hover { background: var(--surface-soft); border-color: #aebaca; }
.button.danger { color: #fff; background: var(--red-700); border-color: var(--red-700); }
.button.danger:hover { background: #982c2c; }
.button.warning { color: #fff; background: var(--amber-700); border-color: var(--amber-700); }
.button.compact { min-height: 32px; padding: 0 10px; font-size: 11px; }
.button.full { width: 100%; }
.button.disabled { opacity: .45; pointer-events: none; }
.button-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.button-row.centered { justify-content: center; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line-200); border-radius: 5px; color: var(--ink-600); }
.icon-button:hover { color: var(--blue-700); background: var(--blue-100); border-color: #bdd3ec; }
.icon-button.inverse { border: 0; color: #b9cadc; }
.icon-button.inverse:hover { background: rgba(255,255,255,.08); color: #fff; }
.text-link { display: inline-flex; align-items: center; gap: 3px; color: var(--blue-700); font-weight: 700; font-size: 11px; }
.text-link:hover { text-decoration: underline; }
.text-button { padding: 0; font-weight: 700; font-size: 11px; }
.star-button { width: 30px; height: 30px; display: inline-grid; place-items: center; color: #98a5b5; }
.star-button:hover, .star-button.active { color: #dc9600; }
.star-button.active svg { fill: #ffc64a; }
.favorite-active { color: #8a5b00 !important; background: #fff8e5 !important; border-color: #e8ca7b !important; }
.copy-button { display: inline-grid; place-items: center; padding: 4px; color: var(--ink-500); border-radius: 4px; }
.copy-button:hover { color: var(--blue-700); background: var(--blue-100); }
.copy-button.labeled { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-300); padding: 6px 9px; font-weight: 700; font-size: 11px; background: #fff; }

/* Panels and alerts */
.panel { background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 18px; }
.panel-header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line-100); }
.panel-header h2 { margin: 0; font-size: 15px; letter-spacing: -.25px; }
.panel-header p { margin: 3px 0 0; color: var(--ink-600); font-size: 11px; }
.count-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; margin-left: 5px; color: var(--blue-700); background: var(--blue-100); border-radius: 10px; font-size: 10px; vertical-align: 2px; }
.flash-stack { display: grid; gap: 8px; margin-bottom: 14px; }
.flash { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid; border-radius: 6px; font-weight: 600; }
.flash button { margin-left: auto; border: 0; background: transparent; font-size: 18px; color: inherit; }
.flash-success { color: var(--green-700); background: var(--green-100); border-color: #bfe3d0; }
.flash-danger { color: var(--red-700); background: var(--red-100); border-color: #edc5c5; }
.flash-warning { color: var(--amber-700); background: var(--amber-100); border-color: #edd39e; }
.flash-info { color: var(--blue-700); background: var(--blue-100); border-color: #c5d9ef; }
.inline-alert { min-height: 56px; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid; border-radius: 6px; }
.inline-alert > div { flex: 1; }
.inline-alert strong { display: block; margin-bottom: 2px; }
.inline-alert p { margin: 0; font-size: 11px; }
.inline-alert.warning { color: #744807; background: var(--amber-100); border-color: #ecd096; }
.inline-alert.info { color: #174f91; background: var(--blue-100); border-color: #bdd5ef; }
.inline-alert.danger { color: #912c2c; background: var(--red-100); border-color: #ebc1c1; }
.empty-state { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 28px; text-align: center; color: var(--ink-600); }
.empty-state-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 3px; color: var(--blue-700); background: var(--blue-100); border-radius: 50%; }
.empty-state strong { color: var(--ink-800); font-size: 14px; }
.empty-state p { margin: 0; font-size: 11px; }

/* Dashboard */
.welcome-strip { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; margin-bottom: 16px; color: #fff; background: linear-gradient(105deg, var(--navy-900), #1d4d7c); border: 1px solid #173b61; border-radius: var(--radius); box-shadow: var(--shadow); }
.welcome-strip h2 { margin: 2px 0 4px; font-size: 20px; letter-spacing: -.45px; }
.welcome-strip p { margin: 0; color: #c6d6e7; }
.welcome-strip .eyebrow { color: #8eb8e4; }
.welcome-actions { display: flex; gap: 8px; }
.welcome-actions .button.secondary { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.eyebrow { margin: 0 0 4px !important; color: var(--blue-700); font-size: 9px !important; font-weight: 800; letter-spacing: 1.2px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 112px; display: flex; align-items: center; gap: 14px; padding: 17px; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .12s, border-color .12s; }
a.metric-card:hover { transform: translateY(-1px); border-color: #b6c8dc; }
.metric-card.static:hover { transform: none; }
.metric-icon, .operation-icon { display: grid; place-items: center; flex: 0 0 auto; }
.metric-icon { width: 44px; height: 44px; border-radius: 8px; }
.metric-icon.blue, .operation-icon.blue { color: var(--blue-700); background: var(--blue-100); }
.metric-icon.green, .operation-icon.green { color: var(--green-700); background: var(--green-100); }
.metric-icon.amber, .operation-icon.amber { color: var(--amber-700); background: var(--amber-100); }
.metric-icon.purple, .operation-icon.purple { color: var(--purple-700); background: var(--purple-100); }
.metric-card > div:last-child { min-width: 0; }
.metric-card span { display: block; color: var(--ink-600); font-size: 11px; font-weight: 700; }
.metric-card strong { display: block; margin: 2px 0 1px; font-size: 24px; line-height: 1.2; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.metric-card strong small { margin-left: 3px; color: var(--ink-600); font-size: 11px; font-weight: 600; }
.metric-card p { margin: 0; color: var(--ink-500); font-size: 10px; }
.metric-card .date-metric { font-size: 15px; letter-spacing: -.2px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, .8fr); gap: 18px; }
.span-2 { grid-column: span 2; }
.quick-list, .action-list { padding: 8px; }
.quick-list a, .action-list a { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 5px; color: var(--ink-700); }
.quick-list a:hover, .action-list a:hover { background: var(--surface-soft); border-color: var(--line-200); color: var(--blue-700); }
.quick-list a > div, .action-list a > div { flex: 1; display: flex; flex-direction: column; }
.quick-list strong, .action-list strong { color: var(--ink-800); font-size: 12px; }
.quick-list span, .action-list span { color: var(--ink-500); font-size: 10px; }
.audit-preview { margin-top: 18px; }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 20px; padding: 8px 18px 15px; }
.activity-item { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line-100); }
.activity-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--blue-600); }
.activity-item > div:last-child { display: flex; flex-direction: column; }
.activity-item strong { font-size: 11px; }
.activity-item span { color: var(--ink-500); font-size: 10px; }

/* Tables */
.table-wrap { width: 100%; overflow: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; }
.data-table th { height: 39px; padding: 7px 11px; color: var(--ink-700); background: #f1f4f8; border-bottom: 1px solid var(--line-300); border-right: 1px solid var(--line-200); text-align: left; font-size: 10px; font-weight: 800; white-space: nowrap; }
.data-table th:last-child { border-right: 0; }
.data-table td { min-height: 43px; padding: 9px 11px; border-bottom: 1px solid var(--line-100); color: var(--ink-800); vertical-align: middle; font-size: 11px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #f8fafc; }
.data-table.compact-table td { padding-top: 7px; padding-bottom: 7px; }
.clickable-row { cursor: pointer; }
.primary-link { color: #164f8c; font-weight: 800; }
.primary-link:hover { text-decoration: underline; }
.plain-link:hover { color: var(--blue-700); text-decoration: underline; }
.cell-subtext { display: block; margin-top: 2px; color: var(--ink-500); font-size: 9px; font-weight: 400; }
.truncate-cell { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions-col { width: 90px; text-align: center !important; white-space: nowrap; }
.favorite-col { width: 62px; text-align: center !important; }
.table-title-row { min-height: 72px; }
.table-tools { display: flex; align-items: center; gap: 8px; }
.per-page { display: flex; align-items: center; gap: 6px; color: var(--ink-600); font-size: 10px; }
.per-page select { height: 32px; border: 1px solid var(--line-300); border-radius: 5px; background: #fff; }
.pagination-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line-100); color: var(--ink-600); font-size: 10px; }
.pagination-buttons { display: flex; gap: 6px; }
.badge, .grade-badge, .primary-badge, .role-badge, .action-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 7px; border-radius: 10px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.badge-success { color: var(--green-700); background: var(--green-100); }
.badge-warning { color: var(--amber-700); background: var(--amber-100); }
.badge-danger { color: var(--red-700); background: var(--red-100); }
.badge-neutral { color: var(--ink-600); background: var(--surface-muted); }
.grade-badge { color: #394a5d; background: #edf1f5; }
.primary-badge { color: var(--blue-700); background: var(--blue-100); }
.role-viewer { color: #4e5d6d; background: #edf1f5; }
.role-editor { color: #175f8c; background: #e5f2f8; }
.role-admin { color: #674b96; background: #f0ebfa; }
.role-superadmin { color: #8a4c09; background: #fff0dc; }
.inline-code { padding: 2px 5px; color: #334155; background: #eef2f6; border: 1px solid #dde4ec; border-radius: 4px; font-family: Consolas, monospace; font-size: 10px; }
.inline-form { display: inline-flex; align-items: center; margin: 0; }
/* Employee approval layout only. Field names, actions and approval authority are unchanged. */
.employee-requests .data-table {min-width:1040px;table-layout:auto;}
.employee-requests .employee-request-review {min-width:430px;width:52%;white-space:normal;}
.employee-requests .request-review-form {display:grid;grid-template-columns:minmax(110px,.8fr) minmax(170px,1.4fr);align-items:end;gap:12px 14px;width:100%;min-width:0;margin:0;padding:3px 0;}
.employee-requests .request-review-field {display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12px;line-height:1.5;color:#52677f;}
.employee-requests .request-review-field>span {font-weight:500;}
.employee-requests .request-review-field :is(input,select) {box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:38px;min-height:38px;padding:0 10px;border:1px solid #c8d5e6;border-radius:6px;background:#fff;color:#263445;font:inherit;font-size:13px;line-height:1.5;text-overflow:ellipsis;}
.employee-requests .request-review-field :is(input,select):focus-visible {outline:2px solid #406797;outline-offset:2px;}
.employee-requests .request-review-actions {grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:2px;}
.employee-requests .request-review-actions .button {box-sizing:border-box;min-width:70px;height:38px;min-height:38px;padding:0 14px;font-size:13px;line-height:1.5;}
@media(min-width:1500px){.employee-requests .request-review-form {grid-template-columns:minmax(105px,.7fr) minmax(190px,1.6fr) minmax(120px,1fr) minmax(135px,1fr);}}
@media(max-width:640px){.employee-requests .employee-request-review {min-width:310px;}.employee-requests .request-review-form {grid-template-columns:minmax(100px,.8fr) minmax(145px,1.2fr);gap:10px;}.employee-requests .request-review-actions .button {flex:1;}}
.user-cell { display: flex; align-items: center; gap: 8px; }
.table-avatar { width: 28px; height: 28px; color: var(--navy-800); background: #dfe9f3; }
.empty-cell { height: 90px; text-align: center; color: var(--ink-500) !important; }
.error-row td { background: #fff8f8 !important; }
.validation-errors { color: var(--red-700); font-size: 10px; font-weight: 700; }

/* Filters and forms */
.filter-panel { margin-bottom: 14px; box-shadow: none; }
.filter-form { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(120px, .7fr)) auto; gap: 10px; align-items: end; padding: 14px; }
.filter-form.audit-filter { grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(140px, .8fr)) auto; }
.filter-form > label:not(.filter-search) { display: flex; flex-direction: column; gap: 4px; color: var(--ink-600); font-size: 9px; font-weight: 800; }
.filter-search { height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-300); border-radius: 5px; background: #fff; color: var(--ink-500); }
.filter-search:focus-within { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(38,115,201,.09); }
.filter-search input { width: 100%; border: 0; outline: 0; }
.filter-form select, .field input, .field select, .field textarea, .confirm-input { width: 100%; border: 1px solid var(--line-300); border-radius: 5px; background: #fff; color: var(--ink-950); outline: 0; }
.filter-form select, .field input, .field select { height: 39px; padding: 0 10px; }
.field textarea { min-height: 90px; padding: 9px 10px; resize: vertical; }
.filter-form select:focus, .field input:focus, .field select:focus, .field textarea:focus, .confirm-input:focus { border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(38,115,201,.09); }
.filter-actions { display: flex; gap: 6px; }
.entity-form { display: grid; gap: 18px; padding-bottom: 70px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px 18px; padding: 18px; }
.form-grid.one-column { grid-template-columns: minmax(0,1fr); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--ink-700); font-size: 10px; font-weight: 800; }
.field > span em { color: var(--red-700); font-style: normal; }
.field small { color: var(--ink-500); font-size: 9px; font-weight: 400; }
.field.span-2, .check-field.span-2 { grid-column: span 2; }
.check-field { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--line-200); border-radius: 5px; background: var(--surface-soft); }
.check-field input { margin-top: 3px; }
.check-field span { display: flex; flex-direction: column; }
.check-field strong { font-size: 11px; }
.check-field small { color: var(--ink-500); font-size: 9px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 2px; }
.sticky-form-actions { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px; background: rgba(255,255,255,.96); border: 1px solid var(--line-300); border-radius: 7px; box-shadow: 0 8px 30px rgba(12,31,54,.14); backdrop-filter: blur(7px); }
.readonly-field { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border: 1px solid var(--line-200); border-radius: 5px; background: var(--surface-muted); }
.readonly-field span { color: var(--ink-600); font-size: 10px; font-weight: 800; }
.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.password-toggle { position: absolute; top: 3px; right: 3px; width: 34px; height: 33px; display: grid; place-items: center; color: var(--ink-500); }
.inline-reset-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 18px; }
.danger-soft-panel { border-color: #e6d2ae; }

/* Company detail */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(280px, .7fr); gap: 18px; margin-bottom: 18px; }
.company-summary { padding: 20px; }
.company-title-row { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--line-100); }
.company-monogram { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--navy-800); border-radius: 7px; font-size: 19px; font-weight: 800; }
.company-name-line, .contact-name-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.company-name-line h2 { margin: 0; font-size: 20px; }
.company-title-row p { margin: 2px 0 0; color: var(--ink-600); }
.detail-list { display: grid; margin: 0; }
.detail-list.four-col { grid-template-columns: repeat(4, minmax(0,1fr)); }
.detail-list.one-col { grid-template-columns: minmax(0,1fr); padding: 5px 18px 16px; }
.detail-list > div { min-width: 0; padding: 13px 11px; border-bottom: 1px solid var(--line-100); }
.detail-list > div.span-2 { grid-column: span 2; }
.detail-list dt { margin-bottom: 4px; color: var(--ink-500); font-size: 9px; font-weight: 800; }
.detail-list dd { margin: 0; color: var(--ink-800); font-size: 11px; word-break: break-word; }
.detail-list dd small { display: block; color: var(--ink-500); font-size: 9px; }
.detail-list dd a { color: var(--blue-700); }
.tag { display: inline-flex; margin: 1px 3px 1px 0; padding: 2px 6px; color: #465669; background: #edf1f5; border-radius: 9px; font-size: 9px; }
.memo-box { margin-top: 14px; padding: 12px 14px; background: #fffbed; border: 1px solid #ebdeb2; border-radius: 5px; }
.memo-box strong { font-size: 10px; }
.memo-box p { margin: 4px 0 0; color: var(--ink-700); white-space: pre-wrap; }
.company-side-actions { align-self: start; }
.danger-zone { margin: 12px; padding: 13px; border: 1px solid #e6bbbb; border-radius: 5px; background: #fff8f8; }
.danger-zone strong { font-size: 11px; color: var(--red-700); }
.danger-zone p { margin: 3px 0 10px; color: var(--ink-600); font-size: 9px; }
.contacts-panel { margin-bottom: 18px; }
.contact-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding: 14px; }
.contact-card { display: flex; flex-direction: column; min-width: 0; padding: 15px; border: 1px solid var(--line-200); border-radius: 7px; background: #fff; }
.contact-card:target { outline: 3px solid rgba(38,115,201,.18); border-color: var(--blue-600); }
.contact-card-header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-100); }
.contact-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: var(--navy-800); background: #dfeaf5; border-radius: 50%; font-weight: 800; }
.contact-card-header > div:nth-child(2) { min-width: 0; flex: 1; }
.contact-name-line h3 { margin: 0; font-size: 14px; }
.contact-card-header p { margin: 2px 0 0; color: var(--ink-600); font-size: 10px; }
.contact-actions { margin-left: auto; }
.contact-info { display: grid; gap: 7px; padding: 12px 0; }
.contact-info > div { display: grid; grid-template-columns: 18px 70px minmax(0,1fr) 25px; align-items: center; gap: 5px; min-width: 0; color: var(--ink-600); }
.contact-info span { font-size: 9px; }
.contact-info strong { min-width: 0; color: var(--ink-800); font-size: 11px; font-weight: 600; }
.contact-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0 0 12px; background: var(--surface-soft); border: 1px solid var(--line-100); border-radius: 5px; }
.contact-meta > div { min-width: 0; padding: 8px; border-right: 1px solid var(--line-100); }
.contact-meta > div:last-child { border-right: 0; }
.contact-meta dt { color: var(--ink-500); font-size: 8px; font-weight: 800; }
.contact-meta dd { margin: 2px 0 0; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-card-images { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.business-card-images a { position: relative; display: block; aspect-ratio: 1.75; overflow: hidden; background: var(--surface-muted); border: 1px solid var(--line-200); border-radius: 5px; }
.business-card-images img { width: 100%; height: 100%; object-fit: contain; background: #edf1f5; }
.business-card-images span { position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; color: #fff; background: rgba(12,31,54,.78); border-radius: 3px; font-size: 8px; }
.no-card-image { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 10px; color: var(--ink-500); background: var(--surface-soft); border: 1px dashed var(--line-300); border-radius: 5px; font-size: 10px; }
.contact-memo { padding: 9px 10px; margin-bottom: 9px; background: #fffbed; border: 1px solid #eee2b9; border-radius: 5px; }
.contact-memo strong { font-size: 9px; }
.contact-memo p { margin: 3px 0 0; color: var(--ink-700); font-size: 10px; white-space: pre-wrap; }
.contact-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--line-100); color: var(--ink-500); font-size: 9px; }
.timeline-list { padding: 8px 18px 16px; }
.timeline-list > div { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 8px 0 8px 17px; border-left: 1px solid var(--line-300); }
.timeline-list .timeline-dot { position: absolute; left: -4px; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-600); }
.timeline-list strong { font-size: 10px; }
.timeline-list small { color: var(--ink-500); font-size: 9px; }

/* Image upload */
.image-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; padding: 18px; }
.image-upload-card { min-width: 0; }
.image-upload-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.image-upload-title strong { font-size: 11px; }
.image-upload-title span { color: var(--ink-500); font-size: 9px; }
.image-dropzone { position: relative; display: block; aspect-ratio: 1.7; overflow: hidden; background: var(--surface-soft); border: 1px dashed #aebdcd; border-radius: 6px; cursor: pointer; }
.image-dropzone.dragover { border-color: var(--blue-600); background: var(--blue-100); }
.image-dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 3px; color: var(--ink-500); }
.image-placeholder strong { color: var(--ink-700); }
.image-placeholder span { font-size: 9px; }
.image-preview { width: 100%; height: 100%; object-fit: contain; background: #edf1f5; }
.remove-image-check { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--red-700); font-size: 9px; }

/* Duplicates */
.duplicate-group-list { display: grid; gap: 14px; padding: 14px; }
.duplicate-group { border: 1px solid var(--line-200); border-radius: 6px; overflow: hidden; }
.duplicate-group-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; background: #f7f9fb; border-bottom: 1px solid var(--line-200); }
.duplicate-group-head > div { display: flex; flex-direction: column; }
.duplicate-group-head strong { font-size: 12px; }
.duplicate-group-head span { color: var(--ink-500); font-size: 9px; }

/* Users and credentials */
.credential-panel, .result-panel { padding: 28px; text-align: center; }
.success-mark { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px; color: var(--green-700); background: var(--green-100); border-radius: 50%; }
.credential-panel h2, .result-panel h2 { margin: 5px 0 8px; font-size: 20px; }
.credential-box { display: grid; gap: 0; margin: 22px 0; border: 1px solid var(--line-200); border-radius: 6px; overflow: hidden; text-align: left; }
.credential-box > div { min-height: 58px; display: grid; grid-template-columns: 120px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line-100); }
.credential-box > div:last-child { border-bottom: 0; }
.credential-box span { color: var(--ink-600); font-size: 10px; font-weight: 800; }
.credential-box strong { font-family: Consolas, var(--font); font-size: 14px; word-break: break-all; }

/* Audit */
.action-badge { color: #405064; background: #edf1f5; }
.action-create, .action-restore, .action-login { color: var(--green-700); background: var(--green-100); }
.action-update, .action-import, .action-export, .action-merge { color: var(--blue-700); background: var(--blue-100); }
.action-delete, .action-purge, .action-login_fail { color: var(--red-700); background: var(--red-100); }
.audit-table .wide-cell { min-width: 260px; }
.audit-details summary { color: var(--blue-700); font-weight: 700; cursor: pointer; }
.audit-json-grid { position: fixed; inset: 8vh 4vw; z-index: 100; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 18px; background: #fff; border: 1px solid var(--line-300); border-radius: 8px; box-shadow: 0 20px 70px rgba(0,0,0,.28); overflow: auto; }
.audit-json-grid > div { min-width: 0; }
.audit-json-grid pre { max-height: 68vh; overflow: auto; padding: 12px; background: #111827; color: #dbe7f3; border-radius: 5px; font-family: Consolas, monospace; font-size: 10px; white-space: pre-wrap; word-break: break-word; }
.audit-details[open]::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(8,20,35,.5); }

/* Recycle */
.purge-form { display: flex; align-items: center; gap: 5px; }
.confirm-input { width: 85px; height: 32px; padding: 0 7px; font-size: 10px; }

/* Excel */
.operation-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.operation-card { display: flex; flex-direction: column; min-height: 250px; padding: 18px; background: #fff; border: 1px solid var(--line-200); border-radius: var(--radius); box-shadow: var(--shadow); }
.operation-card.emphasis { border-top: 3px solid var(--blue-600); }
.operation-icon { width: 47px; height: 47px; margin-bottom: 14px; border-radius: 8px; }
.operation-card h2 { margin: 0 0 6px; font-size: 16px; }
.operation-card p { margin: 0; color: var(--ink-600); font-size: 11px; }
.operation-card > div:nth-child(2) { flex: 1; }
.excel-upload-form { display: grid; gap: 8px; margin-top: 14px; }
.file-picker { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; overflow: hidden; border: 1px solid var(--line-300); border-radius: 5px; background: #fff; color: var(--ink-600); font-size: 10px; cursor: pointer; }
.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picker.large { min-width: 300px; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; padding: 18px; }
.mode-grid > div { padding: 14px; border: 1px solid var(--line-200); border-radius: 6px; }
.mode-number { width: 25px; height: 25px; display: grid; place-items: center; margin-bottom: 8px; color: var(--blue-700); background: var(--blue-100); border-radius: 50%; font-weight: 800; }
.mode-number.danger { color: var(--red-700); background: var(--red-100); }
.mode-grid strong { display: block; font-size: 12px; }
.mode-grid p { margin: 4px 0 0; color: var(--ink-600); font-size: 10px; }
.import-metrics { margin-bottom: 16px; }
.import-apply-panel { margin-bottom: 18px; }
.import-apply-form { padding: 18px; }
.radio-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.radio-card { min-height: 72px; display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid var(--line-300); border-radius: 6px; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--blue-600); background: var(--blue-100); box-shadow: inset 0 0 0 1px var(--blue-600); }
.radio-card.danger:has(input:checked) { border-color: var(--red-700); background: var(--red-100); box-shadow: inset 0 0 0 1px var(--red-700); }
.radio-card input { margin-top: 3px; }
.radio-card span { display: flex; flex-direction: column; }
.radio-card strong { font-size: 12px; }
.radio-card small { color: var(--ink-500); font-size: 9px; }
.replace-confirm { display: flex; align-items: end; gap: 12px; padding: 12px; margin-top: 12px; background: var(--red-100); border: 1px solid #e8bcbc; border-radius: 5px; }
.replace-confirm .field { width: 240px; }
.replace-confirm p { margin: 0 0 8px; color: var(--red-700); font-size: 10px; }
.import-apply-form .form-actions { margin-top: 14px; }
.result-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.result-grid > div { padding: 12px; background: var(--surface-soft); border: 1px solid var(--line-200); border-radius: 5px; }
.result-grid span { display: block; color: var(--ink-600); font-size: 9px; }
.result-grid strong { display: block; margin-top: 2px; font-size: 22px; }
.lead { color: var(--ink-600); }

/* Backup and settings */
.backup-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-bottom: 18px; }
.backup-info-card { display: flex; gap: 14px; padding: 18px; }
.backup-info-card h2 { margin: 0 0 5px; font-size: 15px; }
.backup-info-card p { margin: 0; color: var(--ink-600); font-size: 10px; }
.backup-info-card dl { display: grid; gap: 6px; margin: 12px 0 0; }
.backup-info-card dl div { display: grid; grid-template-columns: 75px 1fr; gap: 8px; }
.backup-info-card dt { color: var(--ink-500); font-size: 9px; }
.backup-info-card dd { margin: 0; font-size: 9px; word-break: break-all; }
.warning-card { border-color: #e7d4aa; background: #fffcf5; }
.strong-note { margin-top: 8px !important; color: var(--amber-700) !important; font-weight: 700; }
.restore-panel { margin-top: 18px; }
.restore-panel > .inline-alert { margin: 16px 18px 0; }
.restore-form { display: grid; grid-template-columns: minmax(280px,1fr) 240px auto; gap: 10px; align-items: end; padding: 16px 18px 18px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-bottom: 18px; }
.server-address-card { min-height: 84px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 16px 18px; padding: 12px; color: #fff; background: var(--navy-900); border-radius: 6px; }
.server-address-card.secondary { color: var(--ink-800); background: var(--surface-soft); border: 1px solid var(--line-200); }
.server-illustration { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border-radius: 6px; }
.server-address-card.secondary .server-illustration { color: var(--blue-700); background: var(--blue-100); }
.server-address-card span { display: block; color: #a9bfd6; font-size: 9px; }
.server-address-card.secondary span { color: var(--ink-500); }
.server-address-card strong { display: block; margin: 2px 0; font-family: Consolas, monospace; font-size: 16px; word-break: break-all; }
.server-address-card p { margin: 0; color: #c2d1e0; font-size: 9px; }
.server-address-card.secondary p { color: var(--ink-500); }
.path-list code { font-size: 9px; word-break: break-all; }
.checklist-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 18px; }
.checklist-grid > div { min-height: 105px; padding: 12px; border: 1px solid var(--line-200); border-radius: 6px; }
.checklist-grid > div > span { width: 23px; height: 23px; display: grid; place-items: center; margin-bottom: 8px; color: var(--blue-700); background: var(--blue-100); border-radius: 50%; font-weight: 800; }
.checklist-grid strong { display: block; font-size: 11px; }
.checklist-grid p { margin: 4px 0 0; color: var(--ink-600); font-size: 9px; }

/* Auth */
.auth-body { min-height: 100vh; background: #eaf0f6; }
.auth-main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-flashes { position: fixed; top: 20px; left: 50%; z-index: 10; width: min(500px, calc(100vw - 30px)); transform: translateX(-50%); }
.login-shell { width: min(980px, 100%); min-height: 580px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; background: #fff; border: 1px solid #cad5e1; border-radius: 10px; box-shadow: 0 28px 80px rgba(12,31,54,.18); }
.login-brand-panel { display: flex; flex-direction: column; justify-content: space-between; padding: 44px; color: #fff; background: linear-gradient(145deg, var(--navy-950), #17456f); }
.login-brand-mark { width: 50px; height: 50px; display: grid; place-items: center; color: var(--navy-900); background: #fff; border-radius: 8px; font-size: 25px; font-weight: 800; }
.login-brand-panel h1 { margin: 3px 0 10px; font-size: 30px; letter-spacing: -1px; }
.login-brand-panel p { max-width: 400px; margin: 0; color: #c3d4e5; font-size: 13px; }
.login-security-note { display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.06); color: #d7e4f0; font-size: 10px; }
.login-form-panel { display: grid; place-items: center; padding: 42px; }
.login-form-wrap { width: min(330px, 100%); }
.login-heading { margin-bottom: 25px; }
.login-heading h2 { margin: 0; font-size: 25px; }
.login-heading p { margin: 5px 0 0; color: var(--ink-600); }
.stack-form { display: grid; gap: 15px; }
.login-help { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line-200); }
.login-help strong { font-size: 10px; }
.login-help p { margin: 3px 0 0; color: var(--ink-500); font-size: 9px; }
.login-version { margin: 22px 0 0; color: var(--ink-500); font-size: 9px; text-align: center; }
.simple-auth-card { width: min(520px,100%); padding: 34px; text-align: center; background: #fff; border: 1px solid var(--line-300); border-radius: 9px; box-shadow: 0 20px 60px rgba(12,31,54,.14); }
.simple-auth-card.wide { width: min(700px,100%); }
.simple-auth-card h1 { margin: 8px 0; font-size: 23px; }
.simple-auth-card p { color: var(--ink-600); }
.simple-auth-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 10px; color: var(--blue-700); background: var(--blue-100); border-radius: 50%; }
.simple-auth-icon.danger { color: var(--red-700); background: var(--red-100); }
.code-panel { display: grid; gap: 7px; margin: 20px 0; padding: 14px; background: #101c2c; border-radius: 6px; color: #dce8f4; text-align: left; }
.code-panel code { padding: 8px; background: rgba(255,255,255,.08); border-radius: 4px; font-family: Consolas, monospace; }
.code-panel span { color: #9fb3c9; font-size: 10px; text-align: center; }
.setup-steps { max-width: 520px; margin: 0 auto 22px; padding-left: 22px; color: var(--ink-700); text-align: left; }
.error-page { min-height: 65vh; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.error-code { color: #c2ccd7; font-size: 56px; font-weight: 900; letter-spacing: -3px; line-height: 1; }
.error-icon { width: 62px; height: 62px; display: grid; place-items: center; color: var(--red-700); background: var(--red-100); border-radius: 50%; }
.error-page h2 { margin: 5px 0 0; }
.error-page p { margin: 0 0 10px; color: var(--ink-600); }

@media (max-width: 1350px) {
  .filter-form { grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(125px,.8fr)); }
  .filter-form .filter-actions { grid-column: -2 / -1; }
  .filter-form.audit-filter { grid-template-columns: minmax(240px,1.5fr) repeat(2,minmax(140px,.8fr)); }
  .detail-list.four-col { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operation-card-grid { grid-template-columns: 1fr 1fr; }
  .operation-card.emphasis { grid-column: span 2; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .span-2 { grid-column: auto; }
  .company-side-actions { display: none; }
  .global-search { width: 280px; }
  .detail-list.four-col { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .checklist-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .app-layout.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(8,20,35,.48); }
  .app-layout.sidebar-open + .sidebar-backdrop { display: block; }
  .app-main { width: 100%; margin-left: 0; }
  .mobile-menu { display: inline-grid !important; }
  .topbar { padding: 12px 16px; }
  .content { padding: 18px 15px 40px; }
  .global-search { display: none; }
  .welcome-strip { align-items: flex-start; flex-direction: column; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid .span-2 { grid-column: auto; }
  .activity-grid { grid-template-columns: 1fr; }
  .filter-form, .filter-form.audit-filter { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .filter-search { grid-column: span 2; }
  .filter-actions { grid-column: span 2 !important; }
  .contact-card-grid { grid-template-columns: 1fr; }
  .backup-summary-grid, .settings-grid { grid-template-columns: 1fr; }
  .settings-grid .span-2 { grid-column: auto; }
  .restore-form { grid-template-columns: 1fr; }
  .file-picker.large { min-width: 0; }
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 250px; padding: 30px; }
  .login-form-panel { padding: 30px; }
}

@media (max-width: 620px) {
  body { font-size: 12px; }
  .page-heading h1 { font-size: 17px; }
  .page-heading p { display: none; }
  .topbar-actions .button.secondary { display: none; }
  .metric-grid { grid-template-columns: 1fr; }
  .welcome-actions { width: 100%; flex-direction: column; }
  .welcome-actions .button { width: 100%; }
  .operation-card-grid { grid-template-columns: 1fr; }
  .operation-card.emphasis { grid-column: auto; }
  .form-grid, .image-upload-grid { grid-template-columns: 1fr; }
  .field.span-2, .check-field.span-2 { grid-column: auto; }
  .sticky-form-actions { flex-wrap: wrap; }
  .detail-list.four-col { grid-template-columns: 1fr; }
  .detail-list > div.span-2 { grid-column: auto; }
  .contact-meta { grid-template-columns: 1fr; }
  .contact-meta > div { border-right: 0; border-bottom: 1px solid var(--line-100); }
  .contact-meta > div:last-child { border-bottom: 0; }
  .filter-form, .filter-form.audit-filter { grid-template-columns: 1fr; }
  .filter-search, .filter-actions { grid-column: auto !important; }
  .filter-actions .button { flex: 1; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .table-tools { width: 100%; justify-content: flex-end; }
  .pagination-bar { align-items: flex-start; flex-direction: column; }
  .mode-grid, .radio-card-grid, .result-grid, .checklist-grid { grid-template-columns: 1fr; }
  .replace-confirm { align-items: stretch; flex-direction: column; }
  .replace-confirm .field { width: 100%; }
  .credential-box > div { grid-template-columns: 1fr; gap: 3px; }
  .audit-json-grid { grid-template-columns: 1fr; inset: 3vh 3vw; }
  .server-address-card { grid-template-columns: 40px minmax(0,1fr); }
  .server-address-card .copy-button { grid-column: span 2; justify-self: stretch; justify-content: center; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 520px; }
}

/* v0.2.0 · Excel-style flat business-card list */
.card-filter-form {
  grid-template-columns: minmax(360px, 2.5fr) minmax(150px, .8fr) minmax(145px, .75fr) minmax(170px, .8fr) auto;
  align-items: end;
}
.card-filter-form .filter-actions { grid-column: auto; }
.card-list-panel { overflow: hidden; }
.card-table-wrap { max-height: calc(100vh - 285px); overflow: auto; border-top: 1px solid var(--line-100); border-bottom: 1px solid var(--line-100); }
.card-list-table { min-width: 2350px; table-layout: fixed; border-collapse: separate; }
.card-list-table thead th { position: sticky; top: 0; z-index: 3; height: 38px; padding: 7px 8px; color: #fff; background: #7b8490; border-right: 1px solid #aab2bc; text-align: center; }
.card-list-table td { padding: 8px; border-right: 1px solid var(--line-100); vertical-align: middle; line-height: 1.42; }
.card-list-table tbody tr:nth-child(even) td { background: #f3f4f6; }
.card-list-table tbody tr:hover td { background: #eaf2fb; }
.card-list-table .col-no { width: 62px; }
.card-list-table .col-date { width: 105px; }
.card-list-table .col-name { width: 105px; }
.card-list-table .col-position { width: 105px; }
.card-list-table .col-department { width: 125px; }
.card-list-table .col-company { width: 210px; }
.card-list-table .col-industry { width: 125px; }
.card-list-table .col-phone { width: 230px; }
.card-list-table .col-fax { width: 215px; }
.card-list-table .col-mobile { width: 145px; }
.card-list-table .col-email { width: 245px; }
.card-list-table .col-address { width: 380px; }
.card-list-table .col-memo { width: 240px; }
.card-list-table .col-actions { width: 115px; }
.card-no-cell { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.preline-cell { white-space: pre-line; word-break: break-word; }
.email-cell { color: #0563c1 !important; word-break: break-all; }
.address-cell, .memo-cell { text-align: left; }
.company-cell-line { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.company-cell-line > a { min-width: 0; word-break: break-word; }
.star-button.mini { width: 24px; height: 24px; flex: 0 0 auto; }
.card-image-indicator { width: 27px; height: 27px; display: inline-grid; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 5px; vertical-align: middle; }
.record-number { display: inline-flex; align-items: center; height: 29px; padding: 0 10px; color: #fff; background: #5d6570; border-radius: 4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-form-grid .span-2 { grid-column: span 2; }
.card-form-grid textarea { min-height: 78px; resize: vertical; }
.card-detail-panel { overflow: hidden; }
.card-detail-heading { min-height: 112px; display: grid; grid-template-columns: auto minmax(0,1fr) minmax(240px,.7fr); align-items: center; gap: 14px; padding: 20px; color: #fff; background: linear-gradient(105deg, var(--navy-900), #1d4d7c); }
.contact-avatar.large { width: 54px; height: 54px; color: var(--navy-900); background: #fff; font-size: 20px; }
.card-detail-heading h2 { margin: 0; font-size: 22px; }
.card-detail-heading p { margin: 3px 0 0; color: #c7d8e9; }
.card-detail-company { min-width: 0; padding: 11px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.07); }
.card-detail-company span, .card-detail-company small { display: block; color: #a9c3dd; font-size: 9px; }
.card-detail-company a { display: block; margin: 2px 0; color: #fff; font-size: 14px; font-weight: 800; word-break: break-word; }
.card-detail-list { grid-template-columns: repeat(4, minmax(0,1fr)); padding: 4px 12px 14px; }
.card-detail-list > div { border-right: 1px solid var(--line-100); }
.card-detail-list > div:nth-child(4n) { border-right: 0; }
.card-detail-list > div.span-4 { grid-column: span 4; border-right: 0; }
.detail-images { grid-template-columns: repeat(2, minmax(0, 520px)); padding: 18px; margin: 0; }
.detail-images a { aspect-ratio: 1.75; }
.detail-no-image { margin: 18px; min-height: 130px; }
.record-meta-panel { display: flex; align-items: center; gap: 25px; padding: 15px 18px; }
.record-meta-panel > div { min-width: 170px; display: flex; flex-direction: column; }
.record-meta-panel > div span { color: var(--ink-500); font-size: 9px; font-weight: 800; }
.record-meta-panel > div strong { font-size: 11px; }
.record-meta-panel > div small { color: var(--ink-500); font-size: 9px; }
.record-meta-panel form { margin-left: auto; }
.excel-format-note { margin-bottom: 18px; }
.excel-card-preview { min-width: 2250px; }
.excel-card-preview th { text-align: center; }
.excel-card-preview td { vertical-align: middle; }
.excel-card-preview .preview-address { min-width: 330px; }

@media (max-width: 1450px) {
  .card-filter-form { grid-template-columns: minmax(320px, 2fr) repeat(3, minmax(140px,.8fr)); }
  .card-filter-form .filter-actions { grid-column: 4 / 5; }
}

@media (max-width: 1120px) {
  .card-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .card-detail-heading { grid-template-columns: auto minmax(0,1fr); }
  .card-detail-company { grid-column: span 2; }
  .card-detail-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-detail-list > div:nth-child(4n) { border-right: 1px solid var(--line-100); }
  .card-detail-list > div:nth-child(2n) { border-right: 0; }
  .card-detail-list > div.span-4 { grid-column: span 2; }
}

@media (max-width: 860px) {
  .card-filter-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .card-filter-form .filter-search { grid-column: span 2; }
  .card-filter-form .filter-actions { grid-column: span 2; }
  .card-table-wrap { max-height: none; }
  .record-meta-panel { align-items: stretch; flex-direction: column; gap: 10px; }
  .record-meta-panel form { margin-left: 0; }
}

@media (max-width: 620px) {
  .card-form-grid { grid-template-columns: 1fr; }
  .card-form-grid .span-2 { grid-column: auto; }
  .card-detail-heading { grid-template-columns: 1fr; text-align: center; }
  .card-detail-heading .contact-avatar { margin: 0 auto; }
  .card-detail-heading .contact-name-line { justify-content: center; }
  .card-detail-company { grid-column: auto; text-align: left; }
  .card-detail-list { grid-template-columns: 1fr; }
  .card-detail-list > div, .card-detail-list > div:nth-child(2n) { border-right: 0; }
  .card-detail-list > div.span-2, .card-detail-list > div.span-4 { grid-column: auto; }
  .detail-images { grid-template-columns: 1fr; }
}