/* 乐秀 KTV 证照管理平台 — 视觉合同：青绿色、浅灰背景、白色卡片 */
:root {
  --lx-bg: #f4f7f8;
  --lx-surface: #ffffff;
  --lx-surface-muted: #f7fafb;
  --lx-surface-accent: #ecf7f5;
  --lx-line: #dfe7e8;
  --lx-line-strong: #cbd8d8;
  --lx-text: #17272a;
  --lx-text-soft: #43565a;
  --lx-muted: #738388;
  --lx-primary: #117c71;
  --lx-primary-dark: #0c625a;
  --lx-primary-light: #d9f0ec;
  --lx-on-primary: #ffffff;
  --lx-green: #187b51;
  --lx-green-bg: #eaf7f0;
  --lx-yellow: #956300;
  --lx-yellow-bg: #fff6dc;
  --lx-orange: #b95513;
  --lx-orange-bg: #fff0e4;
  --lx-red: #b73540;
  --lx-red-bg: #ffebed;
  --lx-gray: #607177;
  --lx-gray-bg: #edf1f2;
  --lx-shadow: 0 4px 18px rgba(23, 47, 49, .055);
  --lx-radius-sm: 8px;
  --lx-radius-md: 12px;
  --lx-radius-lg: 16px;
  --lx-sidebar: 238px;
  --lx-topbar: 68px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--lx-bg); }
body {
  margin: 0;
  color: var(--lx-text);
  background: var(--lx-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .6; }
:focus-visible { outline: 3px solid rgba(17, 124, 113, .28); outline-offset: 2px; }

.skip-link {
  position: fixed; left: 12px; top: 10px; z-index: 100;
  padding: 8px 12px; border-radius: 8px;
  color: var(--lx-on-primary); background: var(--lx-primary);
  transform: translateY(-150%); transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* App shell */
.site-shell { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  display: flex; flex-direction: column; width: var(--lx-sidebar);
  color: #dfeceb; background: #123b39;
}
.sidebar-brand { padding: 22px 18px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-sidebar-close { display: none; }
.brand-link { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 11px;
  color: #0d4943; background: #a8e0d8;
  font-size: 19px; font-weight: 800;
}
.brand-copy { display: grid; gap: 0; line-height: 1.2; }
.brand-copy strong { font-size: 15px; font-weight: 650; letter-spacing: .02em; }
.brand-copy small { margin-top: 4px; color: #9fc3bf; font-size: 11px; }
.local-badge {
  display: inline-flex; margin-top: 15px; padding: 3px 8px;
  color: #bde7e0; border: 1px solid rgba(180,233,225,.28); border-radius: 999px;
  font-size: 11px;
}
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 20px 12px; }
.nav-caption { margin: 0 10px 8px; color: #8eb5b0; font-size: 11px; letter-spacing: .08em; }
.nav-caption-spaced { margin-top: 25px; }
.primary-nav, .secondary-nav { display: grid; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 42px;
  padding: 9px 11px; border-radius: 9px; color: #c0d8d5;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-item.is-active { color: #0d4943; background: #a8e0d8; font-weight: 600; }
.nav-icon {
  display: grid; place-items: center; width: 20px; height: 20px;
  color: currentColor; font-size: 17px; line-height: 1;
}
.nav-item > span:last-child { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.nav-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; color: #0d4943; background: #d6f4ee; font-size: 10px; font-weight: 700;
}
.nav-count-alert { color: #8e3b30; background: #ffe4dd; }
.sidebar-footer {
  display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 14px 5px 18px;
  border-top: 1px solid rgba(255,255,255,.12); color: #8eb5b0; font-size: 11px;
}
.footer-dot, .status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6dd0a5; }
.app-column { display: flex; flex: 1; flex-direction: column; min-width: 0; margin-left: var(--lx-sidebar); }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  min-height: var(--lx-topbar); gap: 18px; padding: 0 32px;
  background: rgba(255,255,255,.95); border-bottom: 1px solid var(--lx-line);
  backdrop-filter: blur(12px);
}
.topbar-context { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-kicker { color: var(--lx-primary); font-size: 12px; font-weight: 650; }
.topbar-divider { color: var(--lx-line-strong); }
.topbar-page { overflow: hidden; color: var(--lx-text-soft); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.environment-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; color: var(--lx-green); background: var(--lx-green-bg); border-radius: 999px; font-size: 11px; }
.icon-button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; color: var(--lx-text-soft); border: 1px solid var(--lx-line); border-radius: 9px; background: var(--lx-surface); }
.icon-button:hover { color: var(--lx-primary); border-color: var(--lx-primary-light); background: var(--lx-surface-accent); }
.notification-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: var(--lx-red); }
.user-menu { display: flex; align-items: center; gap: 9px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--lx-primary-dark); background: var(--lx-primary-light); font-size: 13px; font-weight: 700; }
.user-summary { display: grid; line-height: 1.25; }
.user-summary strong { font-size: 12px; font-weight: 600; }
.user-summary small { margin-top: 3px; color: var(--lx-muted); font-size: 10px; }
.logout-form { display: inline-flex; margin-left: 2px; }
.logout-form .button { color: var(--lx-muted); }
.logout-form .button:hover { color: var(--lx-primary); }
.mobile-menu-button { display: none; width: 36px; height: 36px; padding: 0; color: var(--lx-text-soft); border: 1px solid var(--lx-line); border-radius: 9px; background: var(--lx-surface); }
.main-content { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 30px 32px 54px; }
.mobile-bottom-nav { display: none; }

/* Headings and controls */
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-heading h1 { margin: 0; font-size: 25px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
.page-heading p { margin: 7px 0 0; color: var(--lx-muted); font-size: 12px; }
.heading-actions, .button-row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading h2, .section-heading h3 { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 650; }
.section-heading p { margin: 3px 0 0; color: var(--lx-muted); font-size: 12px; }
.text-link { color: var(--lx-primary); font-size: 12px; font-weight: 600; }
.text-link:hover { color: var(--lx-primary-dark); text-decoration: underline; }
.text-danger { color: var(--lx-red) !important; }
.text-orange { color: var(--lx-orange) !important; }
.muted-count { color: var(--lx-muted); font-size: 12px; font-weight: 400; }
.breadcrumb { display: flex; align-items: center; gap: 7px; margin: 0 0 9px !important; color: var(--lx-muted); font-size: 11px !important; }
.breadcrumb a { color: var(--lx-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.form-optional { color: var(--lx-muted); font-size: 10px; font-weight: 400; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px;
  padding: 8px 13px; border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius-sm);
  color: var(--lx-text-soft); background: var(--lx-surface); font-size: 13px; font-weight: 550;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .05s ease;
}
.button:hover { color: var(--lx-primary-dark); border-color: #9bcec8; background: var(--lx-surface-accent); }
.button:active { transform: translateY(1px); }
.button-primary { color: var(--lx-on-primary); border-color: var(--lx-primary); background: var(--lx-primary); }
.button-primary:hover { color: var(--lx-on-primary); border-color: var(--lx-primary-dark); background: var(--lx-primary-dark); }
.button-danger { color: var(--lx-red); border-color: #f2c4c8; background: #fff; }
.button-danger:hover { color: #922832; border-color: #e9a3aa; background: var(--lx-red-bg); }
.button-quiet { border-color: transparent; background: transparent; }
.button-sm { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.button-block { width: 100%; }
.button-icon { width: 35px; padding: 0; }
.form-control, .form-select, .form-textarea {
  width: 100%; min-height: 40px; padding: 9px 11px; color: var(--lx-text);
  border: 1px solid var(--lx-line-strong); border-radius: var(--lx-radius-sm); background: var(--lx-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder, .form-textarea::placeholder { color: #a3afb2; }
.form-control:hover, .form-select:hover, .form-textarea:hover { border-color: #a8c5c2; }
.form-control:focus, .form-select:focus, .form-textarea:focus { border-color: var(--lx-primary); outline: 0; box-shadow: 0 0 0 3px rgba(17,124,113,.12); }
.form-textarea { min-height: 96px; resize: vertical; }
.form-label { display: block; margin: 0 0 6px; color: var(--lx-text-soft); font-size: 12px; font-weight: 600; }
.form-hint { display: block; margin-top: 5px; color: var(--lx-muted); font-size: 11px; }
.form-required::after { content: " *"; color: var(--lx-red); }
.input-with-action { display: flex; gap: 8px; }
.input-with-action .form-control { min-width: 0; }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.filter-bar .form-control { flex: 1 1 230px; }
.filter-bar .form-select { flex: 0 1 165px; }
.filter-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.filter-tab { flex: 0 0 auto; min-height: 34px; padding: 6px 11px; color: var(--lx-text-soft); border: 1px solid var(--lx-line); border-radius: 999px; background: var(--lx-surface); font-size: 12px; }
.filter-tab:hover { border-color: #9bcec8; color: var(--lx-primary-dark); }
.filter-tab.is-active { color: #0d4943; border-color: #a8e0d8; background: var(--lx-primary-light); font-weight: 650; }

/* Cards, dashboard and status */
.card { background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-radius-md); box-shadow: var(--lx-shadow); }
.card-body { padding: 18px; }
.card-body-compact { padding: 14px 16px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 17px 18px; border-bottom: 1px solid var(--lx-line); }
.card-header h2, .card-header h3 { margin: 0; font-size: 15px; font-weight: 650; }
.card-header p { margin: 4px 0 0; color: var(--lx-muted); font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric-card { position: relative; min-height: 108px; padding: 16px; overflow: hidden; }
.metric-card::after { position: absolute; right: -20px; bottom: -30px; width: 88px; height: 88px; content: ""; border-radius: 50%; background: var(--lx-surface-accent); }
.metric-card .metric-label { position: relative; z-index: 1; color: var(--lx-muted); font-size: 12px; }
.metric-card .metric-value { position: relative; z-index: 1; display: block; margin-top: 8px; color: var(--lx-text); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; font-weight: 650; }
.metric-card.is-ok .metric-value { color: var(--lx-green); }
.metric-card.is-warning .metric-value { color: var(--lx-orange); }
.metric-card.is-danger .metric-value { color: var(--lx-red); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 14px; }
.stack { display: grid; gap: 14px; }
.list { display: grid; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--lx-line); }
.list-row:last-child { border-bottom: 0; }
.list-row-main { min-width: 0; }
.list-row-title { display: block; overflow: hidden; color: var(--lx-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.list-row-meta { display: block; margin-top: 4px; overflow: hidden; color: var(--lx-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.list-row-action { flex: 0 0 auto; }
.status {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 24px;
  padding: 3px 8px; border-radius: 999px; font-size: 11px; line-height: 1.2; white-space: nowrap;
}
.status-ok { color: var(--lx-green); background: var(--lx-green-bg); }
.status-warning { color: var(--lx-yellow); background: var(--lx-yellow-bg); }
.status-warn { color: var(--lx-yellow); background: var(--lx-yellow-bg); }
.status-orange { color: var(--lx-orange); background: var(--lx-orange-bg); }
.status-danger { color: var(--lx-red); background: var(--lx-red-bg); }
.status-neutral { color: var(--lx-gray); background: var(--lx-gray-bg); }
.status-outline { color: var(--lx-text-soft); border: 1px solid var(--lx-line); background: var(--lx-surface); }
.status-with-dot::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); color: var(--lx-text-soft); background: var(--lx-surface-muted); font-size: 12px; }
.notice + .notice { margin-top: 8px; }
.notice-info { border-color: #cce5e1; background: var(--lx-surface-accent); }
.notice-warning { border-color: #f0dca8; background: var(--lx-yellow-bg); }
.notice-danger { border-color: #f2c4c8; background: var(--lx-red-bg); }
.notice-icon { flex: 0 0 auto; color: var(--lx-primary); font-weight: 700; }
.notice form { display: inline-flex; flex: 0 0 auto; align-items: center; }
.renew-action { display: flex; justify-content: flex-end; margin-top: -6px; }

/* Data table */
.table-card { overflow: hidden; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.data-table th, .data-table td { padding: 13px 15px; border-bottom: 1px solid var(--lx-line); text-align: left; vertical-align: middle; }
.data-table th { color: var(--lx-muted); background: var(--lx-surface-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.data-table td { color: var(--lx-text-soft); font-size: 12px; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: #fbfdfd; }
.record-name { display: inline-flex; align-items: center; gap: 7px; color: var(--lx-text); font-weight: 600; }
.record-name:hover { color: var(--lx-primary); }
.record-subline { display: block; margin-top: 4px; color: var(--lx-muted); font-size: 11px; }
.sort-link { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
.sort-link:hover { color: var(--lx-primary); }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-top: 1px solid var(--lx-line); color: var(--lx-muted); font-size: 11px; }
.pagination { display: flex; gap: 5px; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid var(--lx-line); border-radius: 7px; color: var(--lx-text-soft); background: var(--lx-surface); font-size: 11px; }
.pagination .is-current { color: var(--lx-on-primary); border-color: var(--lx-primary); background: var(--lx-primary); }

/* Mobile record cards shown instead of the wide table */
.record-card-list { display: none; }
.record-card { display: grid; gap: 11px; padding: 15px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-md); background: var(--lx-surface); box-shadow: var(--lx-shadow); }
.record-card + .record-card { margin-top: 9px; }
.record-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.record-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; padding-top: 10px; border-top: 1px solid var(--lx-line); }
.record-card-meta dt { color: var(--lx-muted); font-size: 10px; }
.record-card-meta dd { margin: 2px 0 0; color: var(--lx-text-soft); font-size: 12px; }

/* Detail */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 14px; align-items: start; }
.detail-main, .detail-aside { display: grid; gap: 14px; }
.detail-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.detail-title h1 { margin: 0; font-size: 23px; line-height: 1.3; }
.detail-title p { margin: 5px 0 0; color: var(--lx-muted); font-size: 12px; }
.detail-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; }
.detail-status strong { font-size: 13px; font-weight: 650; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 25px; }
.info-item { min-height: 62px; padding: 12px 0; border-bottom: 1px solid var(--lx-line); }
.info-item dt { color: var(--lx-muted); font-size: 11px; }
.info-item dd { margin: 4px 0 0; color: var(--lx-text); font-size: 13px; font-weight: 550; }
.info-item dd.is-danger { color: var(--lx-red); }
.detail-description { padding-top: 15px; }
.detail-description .muted-label { color: var(--lx-muted); font-size: 11px; }
.detail-description p { margin: 5px 0 0; color: var(--lx-text-soft); font-size: 12px; white-space: pre-line; }
.attachment-list { display: grid; }
.attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--lx-line); }
.attachment-row:last-child { border-bottom: 0; }
.attachment-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.file-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; color: var(--lx-primary); background: var(--lx-primary-light); font-size: 13px; font-weight: 700; }
.attachment-name-text { min-width: 0; }
.attachment-name-text strong { display: block; overflow: hidden; color: var(--lx-text); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.attachment-name-text small { display: block; margin-top: 2px; color: var(--lx-muted); font-size: 10px; }
.timeline { display: grid; gap: 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 9px; min-height: 65px; }
.timeline-item:not(:last-child)::before { position: absolute; left: 9px; top: 17px; bottom: 0; width: 1px; content: ""; background: var(--lx-line-strong); }
.timeline-dot { position: relative; z-index: 1; width: 9px; height: 9px; margin: 5px 0 0 5px; border: 2px solid var(--lx-surface); border-radius: 50%; background: var(--lx-primary); box-shadow: 0 0 0 1px var(--lx-primary); }
.timeline-content strong { display: block; color: var(--lx-text); font-size: 12px; font-weight: 600; }
.timeline-content small { display: block; margin-top: 4px; color: var(--lx-muted); font-size: 11px; }
.version-list { display: grid; gap: 8px; }
.version-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px; border: 1px solid var(--lx-line); border-radius: 9px; background: var(--lx-surface-muted); }
.version-row.is-current { border-color: #b9e1db; background: var(--lx-surface-accent); }
.version-row strong { display: block; font-size: 12px; }
.version-row small { display: block; margin-top: 3px; color: var(--lx-muted); font-size: 10px; }

/* Forms and upload */
.form-card { max-width: 980px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px 20px; }
.form-field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--lx-line); }
.upload-zone {
  display: flex; align-items: center; justify-content: center; min-height: 122px; padding: 20px;
  border: 1px dashed #a7c4c1; border-radius: var(--lx-radius-md); color: var(--lx-muted); background: #fbfefd; text-align: center;
}
.upload-zone:hover, .upload-zone.is-dragover { border-color: var(--lx-primary); background: var(--lx-surface-accent); }
.upload-zone strong { display: block; color: var(--lx-text-soft); font-size: 13px; font-weight: 600; }
.upload-zone small { display: block; margin-top: 5px; color: var(--lx-muted); font-size: 11px; }
.upload-zone input[type="file"] { display: block; max-width: 100%; margin: 11px auto 0; color: var(--lx-text-soft); font-size: 11px; }
.upload-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.upload-actions input[type="file"] { margin: 0; }
.camera-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.camera-upload { border-color: var(--lx-primary-light); color: var(--lx-primary-dark); background: var(--lx-surface-accent); }
.upload-camera-hint { margin-top: 8px !important; color: var(--lx-primary-dark) !important; }
.upload-camera-hint.camera-processing { color: var(--lx-primary-dark) !important; }
.upload-camera-hint.camera-processing::before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; vertical-align: -1px; animation: lx-camera-spin .8s linear infinite; }
@keyframes lx-camera-spin { to { transform: rotate(360deg); } }
.selected-files { display: grid; gap: 7px; margin-top: 9px; }
.selected-file { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--lx-line); border-radius: 8px; background: var(--lx-surface-muted); font-size: 11px; }
.selected-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { flex: 0 0 auto; color: var(--lx-muted); }
.upload-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.upload-preview-grid[hidden] { display: none; }
.image-preview-card { display: block; width: 100%; padding: 7px; overflow: hidden; color: var(--lx-text-soft); border: 1px solid var(--lx-line); border-radius: 10px; background: var(--lx-surface); text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
button.image-preview-card { cursor: pointer; }
.image-preview-card:hover { border-color: #9bcec8; box-shadow: 0 4px 14px rgba(23, 47, 49, .09); }
.image-preview-card:active { transform: translateY(1px); }
.image-preview-thumb { display: block; width: 100%; height: 112px; object-fit: contain; border-radius: 7px; background: var(--lx-surface-muted); }
.image-preview-meta { display: block; min-width: 0; padding: 7px 3px 2px; }
.image-preview-meta strong { display: block; overflow: hidden; color: var(--lx-text); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.image-preview-meta small { display: block; margin-top: 3px; color: var(--lx-muted); font-size: 10px; }
.existing-image-previews { margin-top: 9px; }
.image-preview-modal[hidden] { display: none; }
.image-preview-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.image-preview-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(10, 31, 31, .78); cursor: default; }
.image-preview-dialog { position: relative; z-index: 1; display: grid; justify-items: center; width: min(94vw, 980px); max-height: 92vh; padding: 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; background: #102c2c; box-shadow: 0 20px 70px rgba(0,0,0,.3); }
.image-preview-image { display: block; max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 7px; background: #f7fafb; }
.image-preview-caption { max-width: 100%; margin: 10px 34px 0; overflow: hidden; color: #e2f2ef; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.image-preview-close { position: absolute; top: 6px; right: 8px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #e2f2ef; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(16,44,44,.76); font-size: 23px; line-height: 1; }
.image-preview-close:hover { color: #fff; border-color: rgba(255,255,255,.48); background: rgba(16,44,44,.95); }
.image-preview-open { overflow: hidden; }
.field-error { display: block; margin-top: 5px; color: var(--lx-red); font-size: 11px; }
.has-error .form-control, .has-error .form-select, .has-error .form-textarea { border-color: var(--lx-red); }

/* Review and reminders */
.review-list, .reminder-list { display: grid; gap: 10px; }
.review-card, .reminder-card { padding: 16px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-md); background: var(--lx-surface); box-shadow: var(--lx-shadow); }
.review-card-head, .reminder-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.review-card h3, .reminder-card h3 { margin: 0; font-size: 14px; font-weight: 650; }
.review-card p, .reminder-card p { margin: 4px 0 0; color: var(--lx-muted); font-size: 11px; }
.review-note { padding: 9px 10px; margin: 11px 0 0 !important; border-radius: 7px; color: var(--lx-text-soft) !important; background: var(--lx-surface-muted); }
.review-card .attachment-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lx-line); }
.review-card-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.return-panel { padding: 13px; margin-top: 12px; border: 1px solid #f0dca8; border-radius: 9px; background: var(--lx-yellow-bg); }
.return-panel[hidden] { display: none; }
.reminder-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 15px; }
.reminder-summary-item { padding: 12px; border: 1px solid var(--lx-line); border-radius: 10px; background: var(--lx-surface); }
.reminder-summary-item strong { display: block; font-size: 18px; font-weight: 650; }
.reminder-summary-item small { display: block; margin-top: 3px; color: var(--lx-muted); font-size: 11px; }
.reminder-card { display: flex; align-items: center; gap: 13px; }
.reminder-entry { display: flex; align-items: center; gap: 9px; }
.reminder-entry .reminder-card { flex: 1; min-width: 0; }
.reminder-read-action { flex: 0 0 auto; }
.reminder-card-indicator { flex: 0 0 auto; width: 4px; min-height: 52px; border-radius: 999px; background: var(--lx-yellow); }
.reminder-card.is-danger .reminder-card-indicator { background: var(--lx-red); }
.reminder-card.is-ok .reminder-card-indicator { background: var(--lx-green); }
.reminder-card.is-neutral .reminder-card-indicator { background: var(--lx-gray); }
.reminder-card-content { flex: 1; min-width: 0; }
.reminder-card-content strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.reminder-card-content small { display: block; margin-top: 4px; color: var(--lx-muted); font-size: 11px; }
.reminder-card-side { flex: 0 0 auto; display: grid; justify-items: end; gap: 5px; }
.reminder-card-side small { color: var(--lx-muted); font-size: 10px; }

/* Accounts, settings and backup */
.two-column { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 14px; align-items: start; }
.user-row { display: grid; grid-template-columns: minmax(0,1fr) 120px 120px auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--lx-line); }
.user-row:last-child { border-bottom: 0; }
.user-cell strong { display: block; font-size: 12px; font-weight: 600; }
.user-cell small { display: block; margin-top: 3px; color: var(--lx-muted); font-size: 10px; }
.user-avatar-line { display: flex; align-items: center; gap: 9px; min-width: 0; }
.user-avatar-line .avatar { width: 30px; height: 30px; font-size: 11px; }
.account-actions { justify-content: flex-end; }
.account-checkbox { width: 18px; min-height: 18px; margin: 0 7px 0 0; accent-color: var(--lx-primary); }
.account-active-label { display: inline-flex; align-items: center; color: var(--lx-text-soft); font-size: 12px; font-weight: 600; }
.account-login-id { padding: 12px 13px; margin-bottom: 17px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-sm); background: var(--lx-surface-muted); }
.account-login-id .form-label { margin-bottom: 4px; }
.account-login-id strong { display: block; color: var(--lx-text); font-size: 13px; }
.account-login-id small { display: block; margin-top: 4px; color: var(--lx-muted); font-size: 11px; }
.setting-list { display: grid; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 11px 0; border-bottom: 1px solid var(--lx-line); }
.setting-row > span:first-child { min-width: 0; flex: 1; }
.setting-row:last-child { border-bottom: 0; }
.setting-row strong { display: block; font-size: 12px; font-weight: 600; }
.setting-row small { display: block; margin-top: 3px; color: var(--lx-muted); font-size: 11px; }
.setting-inline-input { width: min(250px, 100%); max-width: 100%; min-height: 34px; padding: 7px 10px; font-size: 13px; }
.switch { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; width: 42px; height: 24px; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--lx-line-strong); transition: background .15s ease; }
.switch span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; content: ""; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: transform .15s ease; }
.switch input:checked + span { background: var(--lx-primary); }
.switch input:checked + span::after { transform: translateX(18px); }
.backup-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--lx-line); }
.backup-card:last-child { border-bottom: 0; }
.backup-card strong { display: block; font-size: 12px; font-weight: 600; }
.backup-card small { display: block; margin-top: 4px; color: var(--lx-muted); font-size: 11px; }
.backup-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--lx-green); font-size: 11px; }
.backup-status::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: currentColor; }

/* Login */
.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--lx-bg); }
.auth-card { width: min(100%, 410px); padding: 29px; border: 1px solid var(--lx-line); border-radius: var(--lx-radius-lg); background: var(--lx-surface); box-shadow: 0 8px 30px rgba(23,47,49,.08); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px; text-align: left; }
.auth-brand .brand-mark { width: 42px; height: 42px; font-size: 21px; }
.auth-brand strong { display: block; font-size: 16px; }
.auth-brand small { display: block; margin-top: 3px; color: var(--lx-muted); font-size: 11px; }
.auth-card h1 { margin: 0; text-align: center; font-size: 21px; font-weight: 650; }
.auth-card-intro { margin: 7px 0 22px; color: var(--lx-muted); font-size: 12px; text-align: center; }
.auth-form { display: grid; gap: 13px; }
.auth-form .button { margin-top: 4px; }
.auth-note { display: flex; gap: 7px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--lx-line); color: var(--lx-muted); font-size: 11px; }
.auth-note-icon { color: var(--lx-primary); }
.auth-footer { margin-top: 18px; color: var(--lx-muted); font-size: 10px; text-align: center; }

/* Empty/loading/error/permission states */
.state-box { display: grid; justify-items: center; gap: 6px; padding: 42px 20px; color: var(--lx-muted); text-align: center; }
.state-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 13px; color: var(--lx-primary); background: var(--lx-surface-accent); font-size: 19px; }
.state-box strong { color: var(--lx-text-soft); font-size: 13px; font-weight: 600; }
.state-box p { max-width: 420px; margin: 0; font-size: 11px; }
.state-loading .state-icon { animation: pulse 1.1s ease-in-out infinite alternate; }
.inline-error { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #f2c4c8; border-radius: 8px; color: var(--lx-red); background: var(--lx-red-bg); font-size: 12px; }
.inline-success { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #b9e1db; border-radius: 8px; color: var(--lx-green); background: var(--lx-green-bg); font-size: 12px; }
.permission-box { max-width: 530px; margin: 42px auto; }
.flash-stack { display: grid; gap: 8px; margin-bottom: 15px; }
.flash { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 13px; border: 1px solid #cce5e1; border-radius: 8px; color: var(--lx-text-soft); background: var(--lx-surface-accent); font-size: 12px; }
.flash-success { border-color: #b9e1db; color: var(--lx-green); background: var(--lx-green-bg); }
.flash-warning { border-color: #f0dca8; color: var(--lx-yellow); background: var(--lx-yellow-bg); }
.flash-error { border-color: #f2c4c8; color: var(--lx-red); background: var(--lx-red-bg); }
.flash-dismiss { flex: 0 0 auto; padding: 0 2px; color: currentColor; border: 0; background: transparent; font-size: 17px; line-height: 1; }
@keyframes pulse { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Print: A4-friendly directory/detail output */
@media print {
  :root { --lx-text: #111; --lx-muted: #555; }
  .sidebar, .topbar, .mobile-bottom-nav, .heading-actions, .filter-bar, .filter-tabs, .button, .flash-stack { display: none !important; }
  .app-column { margin-left: 0; }
  .main-content { max-width: none; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  .page-heading { margin-bottom: 14px; }
  .data-table { min-width: 0; }
}

/* Tablet/phone */
@media (max-width: 1100px) {
  :root { --lx-sidebar: 210px; }
  .topbar, .main-content { padding-left: 24px; padding-right: 24px; }
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card:last-child { grid-column: span 1; }
  .dashboard-grid, .detail-layout, .two-column { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --lx-topbar: 58px; }
  .site-shell { min-height: calc(100vh - 64px); }
  .sidebar { width: min(82vw, 290px); transform: translateX(-102%); box-shadow: 8px 0 28px rgba(0,0,0,.17); transition: transform .18s ease; }
  .mobile-sidebar-close { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 17px; color: #b8d8d4; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: transparent; font-size: 12px; text-align: left; }
  .mobile-sidebar-close span:last-child { color: #e2f2ef; font-size: 22px; line-height: 1; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-open::after { position: fixed; inset: 0; z-index: 25; content: ""; background: rgba(10,31,31,.36); }
  .app-column { margin-left: 0; padding-bottom: 65px; }
  .topbar { gap: 10px; padding: 0 15px; }
  .mobile-menu-button { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 36px; padding: 0 10px; flex: 0 0 auto; }
  .mobile-menu-label { font-size: 12px; font-weight: 600; }
  .topbar-context { flex: 1; }
  .topbar-kicker, .topbar-divider { display: none; }
  .environment-chip { display: none; }
  .topbar-actions { gap: 8px; }
  .user-summary { display: none; }
  .main-content { padding: 21px 15px 30px; }
  .mobile-bottom-nav {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 24;
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
    height: 64px; padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--lx-line); background: rgba(255,255,255,.97); box-shadow: 0 -4px 18px rgba(23,47,49,.06);
    backdrop-filter: blur(12px);
  }
  .bottom-nav-item { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--lx-muted); font-size: 17px; }
  .bottom-nav-item small { font-size: 10px; }
  .bottom-nav-item.is-active { color: var(--lx-primary); font-weight: 650; }
  .bottom-count { position: absolute; top: 7px; margin-left: 2px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 999px; color: #fff; background: var(--lx-red); font-size: 9px; line-height: 14px; text-align: center; }
  .page-heading, .detail-title { display: block; }
  .page-heading h1 { font-size: 21px; }
  .heading-actions { justify-content: flex-start; margin-top: 13px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .metric-card { min-height: 94px; padding: 13px; }
  .metric-card .metric-value { margin-top: 7px; font-size: 24px; }
  .metric-card:last-child { grid-column: 1 / -1; }
  .dashboard-grid, .detail-layout, .two-column { gap: 10px; }
  .card-body { padding: 15px; }
  .card-header { padding: 14px 15px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .form-field-wide { grid-column: auto; }
  .form-actions { justify-content: stretch; }
  .form-actions .button { flex: 1 1 150px; }
  .info-grid { grid-template-columns: 1fr; }
  .detail-title .heading-actions { margin-top: 12px; }
  .detail-title .heading-actions .button { flex: 1 1 auto; }
  .reminder-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .user-row { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .user-row > :nth-child(2), .user-row > :nth-child(3) { display: none; }
  .user-row > :last-child { justify-self: end; }
  .backup-card { display: block; }
  .backup-card .button-row { justify-content: flex-start; margin-top: 10px; }
  .table-card { display: none; }
  .record-card-list { display: block; }
}
@media (max-width: 420px) {
  .auth-page { padding: 14px; }
  .auth-card { padding: 23px 18px; }
  .topbar-page { font-size: 12px; }
  .avatar, .icon-button { width: 32px; height: 32px; }
  .button { min-height: 40px; }
  .button-sm { min-height: 34px; }
  .list-row { gap: 8px; }
  .list-row-title { font-size: 12px; }
  .reminder-card { align-items: flex-start; padding: 13px; }
  .reminder-entry { align-items: stretch; flex-direction: column; }
  .reminder-read-action .button { width: 100%; }
  .reminder-card-side { align-items: end; }
}