:root {
  --bg: #f6f1eb;
  --panel: rgba(255,255,255,0.94);
  --text: #1f1a17;
  --muted: #6e6258;
  --accent: #6f2d3d;
  --accent-dark: #52202c;
  --line: rgba(111,45,61,0.14);
  --shadow: 0 18px 60px rgba(78, 35, 47, 0.12);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; color: var(--text); background: linear-gradient(135deg, #f7f3ee 0%, #efe5dc 100%); }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4, p { margin-top: 0; }
p { color: var(--muted); line-height: 1.6; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.auth-shell { width: min(1120px, 100%); display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: 'copy card'; gap: 32px; align-items: center; }
.auth-copy, .auth-card, .panel-card, .hero-card, .stat-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.auth-copy { grid-area: copy; border-radius: 28px; padding: 44px; }
.auth-card { grid-area: card; border-radius: 24px; padding: 32px; }
.mercure-logo img { width: 164px; height: auto; display: block; margin-bottom: 24px; }
.eyebrow, .badge, .pill { display: inline-flex; align-items: center; justify-content: center; }
.eyebrow, .badge { padding: 8px 12px; border-radius: 999px; background: rgba(111,45,61,0.08); color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.02; margin-bottom: 18px; }
h2 { font-size: 30px; margin-bottom: 8px; }
.feature-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.feature-list li::before { content: '✦'; color: var(--accent); margin-right: 10px; }
.alert { margin: 18px 0; padding: 12px 14px; border-radius: 14px; background: #fff3f3; color: #8a2435; border: 1px solid #f0c7ce; }
.flash { padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; }
.flash-success { background: #edf9f0; color: #1f6a35; border-color: #bde3c7; }
.flash-error { background: #fff1f1; color: #8d2434; border-color: #f0c4cb; }
.flash-info { background: #f5f1ff; color: #5b3d97; border-color: #d5c8f6; }
.stack { display: grid; gap: 16px; }
label { display: grid; gap: 8px; font-weight: 600; color: var(--text); }
input, select, textarea { width: 100%; border: 1px solid #decfc6; border-radius: 14px; padding: 14px 16px; font: inherit; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(111,45,61,.14); border-color: var(--accent); }
button, .primary-btn, .ghost-btn, .danger-btn { border-radius: 14px; padding: 14px 18px; font-weight: 700; font-size: 15px; }
button, .primary-btn { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; cursor: pointer; box-shadow: 0 12px 30px rgba(111,45,61,.24); }
.ghost-btn { border: 1px solid var(--line); background: #fff; color: var(--accent); }
.small-link-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 12px; }
.export-tab { background: #f8f2ff; border-color: #dacbf9; }
.danger-btn { border: 0; background: linear-gradient(135deg, #b53b4d, #8f2434); color: #fff; cursor: pointer; }
.muted { font-size: 14px; margin-top: 12px; }

.app-page { min-height: 100vh; padding: 22px; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 0 auto 24px; max-width: 1240px; }
.topbar-brand { font-size: 24px; font-weight: 800; }
.topbar-sub { color: var(--muted); margin-top: 6px; }
.topbar-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dashboard-shell, .form-shell { max-width: 1240px; margin: 0 auto; display: grid; gap: 24px; }
.two-col { grid-template-columns: 420px 1fr; align-items: start; }
.hero-card { border-radius: 28px; padding: 30px; }
.stats-grid { display: grid; gap: 18px; }
.four-grid { grid-template-columns: repeat(4, 1fr); }
.stat-card { border-radius: 22px; padding: 22px; }
.stat-link { display: block; color: inherit; }
.stat-link:hover { color: inherit; }
.stat-card span { display: block; color: var(--muted); margin-bottom: 10px; }
.stat-card strong { font-size: 38px; }
.stat-new { border-left: 6px solid #3b82f6; }
.stat-progress { border-left: 6px solid #f59e0b; }
.stat-resolved { border-left: 6px solid #16a34a; }
.stat-unresolved { border-left: 6px solid #dc2626; }
.panel-card { border-radius: 28px; padding: 28px; }
.department-alert-card { border: 1px solid #f7ddb0; background: linear-gradient(135deg, #fff8e8, #fff3cf); }
.department-alert-head { display: flex; gap: 14px; align-items: flex-start; }
.alert-bulb { width: 14px; height: 14px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 6px rgba(245,158,11,.18), 0 0 18px rgba(245,158,11,.5); margin-top: 4px; flex: 0 0 auto; }
.department-alert-list { display: grid; gap: 8px; margin-top: 12px; }
.department-alert-item { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid rgba(245,158,11,.18); font-size: 14px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.panel-head.solo { margin-bottom: 24px; }
.filters-head { align-items: center; }
.tickets-toolbar { align-items: flex-start; }
.toolbar-right { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-tab { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--accent); font-weight: 700; }
.filter-tab.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-color: transparent; }
.status-tabs-inline { margin-top: -8px; margin-bottom: 2px; }
.ticket-sort-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid #efe3dd; }
.footer-controls { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.pill { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.priority-low { background: #eaf6ea; color: #2d7a3d; }
.priority-normal { background: #f6eedc; color: #9c6b00; }
.priority-high { background: #ffe8cc; color: #c96c00; }
.priority-urgent { background: #ffe2e2; color: #b72b2b; }
.status-new { background: #e6f0ff; color: #185bb8; }
.status-in_progress { background: #fff3d9; color: #aa6c00; }
.status-resolved { background: #e7f8ea; color: #1f7a34; }
.status-unresolved { background: #ffe7e7; color: #af2537; }
.role-admin { background: #efe6ff; color: #5f38a8; }
.role-operator { background: #e7f4ff; color: #0a5f9c; }
.neutral-pill { background: #efe7e1; color: #6b574b; }

.ticket-stack { display: grid; gap: 18px; }
.ticket-card { border: 1px solid #efe3dd; border-radius: 24px; background: #fffdfb; overflow: hidden; }
.ticket-new { box-shadow: inset 0 0 0 2px rgba(59,130,246,.18); }
.ticket-in_progress { box-shadow: inset 0 0 0 2px rgba(245,158,11,.18); }
.ticket-summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 20px; }
.ticket-summary::-webkit-details-marker { display: none; }
.ticket-summary-main h3 { margin-bottom: 8px; font-size: 24px; }
.ticket-summary-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.ticket-details { padding: 0 20px 20px; border-top: 1px solid #efe3dd; }
.ticket-id { color: var(--muted); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.ticket-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ticket-description { margin-top: 8px; font-size: 14px; }
.ticket-audit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 0; }
.ticket-audit-grid span, .mobile-ticket-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.ticket-audit-grid strong, .mobile-ticket-grid strong { font-size: 14px; }
.attachment-strip { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 18px; }
.attachment-thumb { width: 92px; height: 92px; border-radius: 14px; overflow: hidden; border: 1px solid #eadbd1; display: block; background: #fff; }
.attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.small-strip { margin-top: 10px; }
.small-thumb { width: 72px; height: 72px; }
.ticket-update-box { border: 1px solid #efe3dd; border-radius: 18px; padding: 16px; background: #fff; }
.ticket-lock-box { border: 1px solid #ead7bf; border-radius: 18px; padding: 16px; background: #fff8ea; color: #7a5b17; }
.inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ticket-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.small-btn { padding: 10px 12px; border-radius: 12px; }
.done-mark { color: #1f6a35; font-weight: 700; }
.history-box { margin-top: 18px; border-top: 1px solid #efe3dd; padding-top: 16px; }
.history-box h4 { margin-bottom: 14px; }
.history-list { display: grid; gap: 12px; }
.history-item { border-left: 3px solid #e8d7cf; padding-left: 14px; }
.grand-log-list { display: grid; gap: 12px; }
.grand-log-item { border-left: 3px solid #d8c2b6; padding-left: 14px; background: #fffdfb; border-radius: 12px; padding-top: 10px; padding-bottom: 10px; }
.history-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.history-comment { margin-top: 8px; padding: 12px 14px; background: #faf6f3; border-radius: 14px; color: var(--text); }

.table-wrap { overflow: auto; }
.desktop-only { display: block; }
.mobile-only { display: none; }
.mobile-ticket-list { display: grid; gap: 14px; }
.mobile-ticket-card { border: 1px solid #efe3dd; border-radius: 20px; padding: 16px; background: #fffdfb; }
.mobile-ticket-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.mobile-ticket-top h3 { margin: 4px 0 0; font-size: 18px; }
.mobile-ticket-id { color: var(--muted); font-size: 13px; }
.mobile-ticket-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mobile-ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mobile-actions { margin-top: 14px; }

.empty-state { padding: 26px 8px 8px; text-align: center; }
.form-card { max-width: 900px; }
.form-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.full-span { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; }

.user-list { display: grid; gap: 16px; }
.user-card { border: 1px solid #efe3dd; border-radius: 20px; background: #fffdfb; overflow: hidden; }
.user-summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; }
.user-summary::-webkit-details-marker { display: none; }
.user-form { padding: 0 18px 18px; border-top: 1px solid #efe3dd; }
.user-card-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.department-checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.department-check-item { padding: 12px 14px; border: 1px solid #efe3dd; border-radius: 14px; background: #fffdfb; }
.checkbox-row { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.checkbox-row input { width: 18px; height: 18px; }
.full-span-block { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .auth-shell, .stats-grid, .form-grid, .two-col, .four-grid, .ticket-audit-grid, .inline-grid, .department-checkbox-grid { grid-template-columns: 1fr; }
  .auth-shell { grid-template-areas: 'card' 'copy'; }
  .auth-page { padding: 18px; }
  .auth-copy, .auth-card, .panel-card, .hero-card, .stat-card { border-radius: 22px; }
  .auth-copy { padding: 24px; }
  .auth-card { padding: 22px; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .topbar-actions { width: 100%; }
  .toolbar-right { width: 100%; align-items: flex-start; }
  .footer-controls { flex-direction: column; align-items: stretch; }
  .ticket-summary { flex-direction: column; }
  .ticket-summary-main h3 { font-size: 20px; }
  .ticket-summary-meta { flex-direction: column; gap: 6px; }
  .ticket-badges { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .app-page { padding: 14px; }
  h1 { font-size: 32px; }
  .panel-card, .hero-card, .ticket-card { padding: 18px; }
  .stat-card span { font-size: 16px; }
  .stat-card strong { font-size: 48px; line-height: 1; }
  .ticket-id, .mobile-ticket-id { font-size: 18px; font-weight: 700; }
  .mobile-ticket-grid { grid-template-columns: 1fr; }
  .ticket-actions form, .ticket-actions button, .ticket-actions .danger-btn, .ghost-btn { width: 100%; }
  .user-summary { align-items: flex-start; }
}

.spa-shell { gap: 20px; }
.spa-nav-wrap { justify-content: flex-end; }
.spa-active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-color: transparent; }
.spa-table { width: 100%; border-collapse: collapse; }
.spa-table th, .spa-table td { padding: 12px 14px; border-bottom: 1px solid #efe3dd; text-align: left; vertical-align: top; }
.spa-table th { background: #faf6f3; color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.spa-filter-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; margin-bottom: 18px; }
.spa-filter-search { grid-column: span 2; }
.spa-filter-actions { display: flex; gap: 10px; align-items: center; }
.spa-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.spa-alert-item { padding: 12px 14px; border-radius: 14px; background: #fff8ea; border: 1px solid #f2d9a7; color: #7a5b17; }
.spa-compact-empty { padding: 8px 0; text-align: left; }
.spa-form-card .checkbox-row { margin-top: 10px; }
.spa-reference-box { border: 1px solid #efe3dd; border-radius: 18px; padding: 16px; background: #fffdfb; }
.spa-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: 14px; color: var(--muted); }
.spa-calendar-table td { min-width: 170px; }
.spa-calendar-cell { padding: 8px 10px; border-radius: 12px; background: #f7f1eb; border: 1px solid #eadcd3; }
.spa-day-bookings { display: grid; gap: 10px; }
.spa-day-booking-item { padding: 12px 14px; border-radius: 14px; background: #fffdfb; border: 1px solid #efe3dd; }

@media (max-width: 900px) {
  .spa-filter-bar, .spa-quick-grid, .spa-reference-grid { grid-template-columns: 1fr; }
  .spa-filter-search { grid-column: auto; }
  .spa-mobile-head { flex-direction: column; align-items: flex-start; }
}


.spa-action-stack{display:flex;gap:8px;flex-wrap:wrap}
.spa-inline-actions{display:flex;gap:10px;flex-wrap:wrap}
.spa-month-table td{min-width:140px}
.spa-outside-month{opacity:.45;background:#fafafa}
.spa-report-filter{display:flex;gap:10px;align-items:center}


.spa-settings-list{display:grid;gap:10px;margin-top:16px}
.spa-settings-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;border:1px solid #efe3dd;border-radius:14px;background:#fffdfb}
.spa-mini-form{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}
@media (max-width: 900px){.spa-mini-form{grid-template-columns:1fr}}


.spa-topbar{align-items:flex-start}
.spa-nav-wrap{display:flex;gap:8px;flex-wrap:wrap;max-width:100%}
.spa-nav-wrap .ghost-btn{white-space:nowrap}
.spa-shell{max-width:100%;overflow-x:hidden}
.table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.spa-table{min-width:720px}
.spa-calendar-table,.spa-month-table{min-width:980px}
.spa-form-card{overflow:hidden}
.spa-filter-bar label,.spa-report-filter{min-width:0}
.spa-mini-form input,.spa-mini-form button,.spa-filter-bar input,.spa-filter-bar select{min-width:0}

@media (max-width: 900px){
  .spa-nav-wrap{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;width:100%}
  .spa-nav-wrap .ghost-btn{flex:0 0 auto;width:auto}
  .spa-inline-actions{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .spa-inline-actions > *{flex:0 0 auto;width:auto}
  .spa-quick-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  .topbar-brand{font-size:20px}
  .topbar-sub{font-size:13px}
  .panel-card{padding:14px}
  .spa-table th,.spa-table td{padding:10px 10px;font-size:13px}
  .spa-quick-grid{grid-template-columns:1fr}
  .spa-filter-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .spa-filter-actions .ghost-btn,.spa-filter-actions button{width:100%}
  .spa-report-filter{display:grid;grid-template-columns:1fr;width:100%}
  .spa-report-filter input,.spa-report-filter button{width:100%}
  .spa-settings-item{flex-direction:column;align-items:flex-start}
  .spa-settings-item form,.spa-settings-item .spa-action-stack{width:100%}
  .spa-settings-item .spa-action-stack .ghost-btn{width:100%}
}


@media (max-width: 900px){
  .spa-calendar-table,.spa-month-table{min-width:720px}
  .spa-calendar-mobile{display:grid;gap:12px}
}
@media (max-width: 640px){
  .desktop-only.spa-calendar-table-wrap,.desktop-only .spa-calendar-table{display:none}
  .spa-month-table{min-width:640px}
}


@media (max-width: 820px){
  .desktop-only.spa-calendar-table-wrap{display:none !important}
  .mobile-only.spa-calendar-mobile{display:grid !important}
  .spa-filter-bar{grid-template-columns:1fr !important}
  .spa-filter-actions{grid-template-columns:1fr !important;display:grid !important}
}
@media (min-width: 821px){
  .mobile-only.spa-calendar-mobile{display:none !important}
}


.spa-filter-bar{grid-template-columns:minmax(0,1fr) auto}
@media (max-width: 640px){
  .spa-filter-bar{grid-template-columns:1fr !important}
}


@media (max-width: 640px){
  .spa-month-table{min-width:0 !important;width:100%;table-layout:fixed}
  .spa-month-table th,.spa-month-table td{padding:6px 4px !important;font-size:11px !important;vertical-align:top}
  .spa-month-table th{font-size:10px !important;letter-spacing:0 !important}
  .spa-month-table td strong{font-size:14px}
  .spa-month-table .meta{font-size:10px !important;line-height:1.2;margin:2px 0}
  .spa-month-table .ghost-btn.small-link-btn{padding:6px 4px !important;font-size:10px !important;border-radius:8px;width:100%}
}


/* SPA responsive hardening */
html, body { max-width: 100%; overflow-x: hidden; }
.spa-app, .spa-shell, .dashboard-shell, .panel-card, .form-card { max-width: 100%; }
.spa-shell { width: min(1240px, 100%); margin: 0 auto; }
.topbar, .spa-topbar { max-width: 1240px; width: 100%; }
.topbar-actions, .spa-nav-wrap { max-width: 100%; }
.spa-nav-wrap { scrollbar-width: thin; }
.spa-nav-wrap::-webkit-scrollbar { height: 6px; }
.spa-nav-wrap::-webkit-scrollbar-thumb { background: rgba(111,45,61,.25); border-radius: 999px; }

.panel-card, .hero-card, .stat-card, .auth-card, .auth-copy { min-width: 0; }
.form-grid, .spa-filter-bar, .spa-report-filter, .spa-mini-form, .spa-quick-grid, .two-col, .stats-grid, .four-grid, .spa-reference-grid { min-width: 0; }
label, input, select, textarea, button { min-width: 0; }
.table-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; }

@media (max-width: 1200px) {
  .four-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app-page { padding: 12px; }
  .topbar, .spa-topbar { gap: 12px; margin-bottom: 16px; }
  .topbar-actions, .spa-nav-wrap { width: 100%; }
  .panel-card { border-radius: 20px; }
  .stats-grid, .four-grid, .two-col, .spa-quick-grid, .spa-reference-grid, .spa-mini-form, .spa-filter-bar, .spa-report-filter { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .form-actions { justify-content: stretch; }
  .form-actions button { width: 100%; }
  .spa-filter-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .spa-filter-actions button, .spa-filter-actions a { width: 100%; }
  .spa-settings-item { flex-direction: column; align-items: stretch; }
  .spa-settings-item form, .spa-settings-item .spa-action-stack { width: 100%; }
}

@media (max-width: 640px) {
  .app-page { padding: 10px; }
  .topbar-brand { font-size: 19px; }
  .topbar-sub, .meta, p { font-size: 13px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  .panel-card, .hero-card, .stat-card, .form-card { padding: 14px; border-radius: 18px; }
  .stat-card strong { font-size: 32px; }
  .stat-card span { font-size: 13px; }
  input, select, textarea, button, .primary-btn, .ghost-btn, .danger-btn { padding: 12px 14px; font-size: 14px; }
  .spa-nav-wrap { gap: 6px; }
  .spa-nav-wrap .ghost-btn { padding: 10px 12px; font-size: 13px; }
  .spa-table { min-width: 560px; }
  .spa-table th, .spa-table td { padding: 8px 8px; font-size: 12px; }
  .spa-table th { font-size: 11px; }
  .mobile-ticket-card { padding: 12px; }
  .mobile-ticket-top h3 { font-size: 16px; }
  .pill { font-size: 11px; padding: 5px 8px; }
}

@media (max-width: 400px) {
  .app-page { padding: 8px; }
  .panel-card, .hero-card, .stat-card, .form-card { padding: 12px; }
  .topbar-brand { font-size: 17px; }
  .spa-nav-wrap .ghost-btn { font-size: 12px; padding: 9px 10px; }
  input, select, textarea, button, .primary-btn, .ghost-btn { font-size: 13px; }
  .spa-table { min-width: 520px; }
}