:root {
  --navy: #1F4E78;
  --navy-dark: #143651;
  --navy-light: #D9E1F2;
  --red: #C00000;
  --red-bg: #FCE4E4;
  --orange: #ED7D31;
  --orange-bg: #FBE5D6;
  --green: #70AD47;
  --green-bg: #E2EFDA;
  --purple: #7030A0;
  --purple-bg: #E4D9F2;
  --teal: #2E8B8B;
  --teal-bg: #D6EAEA;
  --yellow: #FFC000;
  --yellow-bg: #FFF2CC;
  --handover: #FFE699;
  --grey: #595959;
  --grey-2: #8C8C8C;
  --grey-3: #BFBFBF;
  --grey-bg: #F5F5F5;
  --bg: #FAFBFC;
  --card: #FFFFFF;
  --border: #E1E4E8;
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 10px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: #212529;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

body:not(.gate-passed) #loginScreen,
body:not(.gate-passed) #app { display: none !important; }
body.gate-passed #gateScreen { display: none !important; }

.gate-screen {
  position: fixed; inset: 0;
  z-index: 99999;
  background: linear-gradient(135deg, #143651 0%, #1F4E78 55%, #2a6299 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gate-card {
  background: rgba(255,255,255,0.98);
  border-radius: 22px;
  padding: 40px 32px 28px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.4);
  animation: gateIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes gateIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.gate-logo {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #1F4E78 0%, #143651 100%);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 26px; color: #fff;
  box-shadow: 0 8px 20px rgba(31,78,120,0.35);
}
.gate-title { font-size: 22px; font-weight: 800; color: #1F4E78; letter-spacing: 0.3px; }
.gate-subtitle { font-size: 13px; color: #8C8C8C; margin-top: 2px; }
.gate-lock-icon { font-size: 30px; margin: 18px 0 8px; }
.gate-label { font-size: 13px; color: #595959; margin-bottom: 16px; line-height: 1.4; }
.gate-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #E1E4E8;
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  text-align: center;
  letter-spacing: 2px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gate-input:focus { border-color: #1F4E78; box-shadow: 0 0 0 4px rgba(31,78,120,0.12); }
.gate-input.shake { animation: gateShake 0.4s; border-color: #C00000; }
@keyframes gateShake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-8px); }
  40%,80% { transform: translateX(8px); }
}
.gate-error {
  font-size: 13px; color: #C00000; font-weight: 600;
  min-height: 18px; margin-top: 10px;
  opacity: 0; transition: opacity 0.2s;
}
.gate-error.show { opacity: 1; }
.gate-submit {
  width: 100%;
  padding: 14px;
  margin-top: 14px;
  background: linear-gradient(135deg, #1F4E78 0%, #143651 100%);
  color: #fff;
  border-radius: 12px;
  font-weight: 700; font-size: 16px;
  transition: filter 0.15s, transform 0.1s;
}
.gate-submit:hover { filter: brightness(1.08); }
.gate-submit:active { transform: scale(0.98); }
.gate-submit:disabled { opacity: 0.6; cursor: wait; }
.gate-footer { font-size: 11px; color: #BFBFBF; margin-top: 22px; }

@media (min-width: 1024px) {
  .gate-card { max-width: 440px; padding: 48px 40px 32px; }
  .gate-title { font-size: 25px; }
  .gate-input { font-size: 17px; padding: 15px 18px; }
}

.login-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  background: #fff;
  border-radius: 18px;
  padding: 32px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.login-brand {
  text-align: center;
  margin-bottom: 24px;
}
.login-logo {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 26px; color: #fff;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(31,78,120,0.3);
}
.login-title {
  font-size: 20px; font-weight: 700; color: var(--navy);
  margin-bottom: 4px;
}
.login-subtitle {
  font-size: 13px; color: var(--grey-2);
}
.login-section-label {
  font-size: 11px; color: var(--grey-2);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600;
  margin: 18px 0 10px;
}
.login-users {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.login-user-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--grey-bg);
  border: 2px solid transparent;
  border-radius: 12px;
  width: 100%;
  text-align: left;
  transition: all 0.15s;
}
.login-user-btn:hover {
  background: var(--navy-light);
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.login-user-btn.manager {
  background: linear-gradient(135deg, #FFF8DC 0%, #FFE699 100%);
  border-color: #E6C547;
}
.login-user-btn.manager:hover {
  border-color: #B8860B;
}
.login-user-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
.login-user-name { font-weight: 700; font-size: 15px; color: #212529; }
.login-user-role { font-size: 11px; color: var(--grey-2); margin-top: 1px; }
.login-user-role.manager { color: #826600; font-weight: 600; }

.login-footer {
  font-size: 11px; color: var(--grey-2);
  text-align: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.login-back-btn {
  font-size: 12px; color: var(--navy); font-weight: 600;
  padding: 4px 0; margin-bottom: 12px;
}
.login-back-btn:hover { text-decoration: underline; }
.login-user-card-selected {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, var(--navy-light) 0%, #EEF3FA 100%);
  border-radius: 12px;
  margin-bottom: 16px;
}
.login-pw-row { margin-top: 6px; }
.login-pw-label {
  display: block;
  font-size: 12px; color: var(--grey); font-weight: 600;
  margin-bottom: 6px;
}
.login-pw-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  outline: none;
  font-family: inherit;
  letter-spacing: 1px;
  background: #fff;
}
.login-pw-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31,78,120,0.12); }
.login-pw-input.shake { animation: shake 0.4s; border-color: var(--red); }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.login-pw-hint {
  font-size: 11px; color: var(--grey-2);
  margin-top: 6px; line-height: 1.4;
}
.login-pw-error {
  font-size: 12px; color: var(--red); font-weight: 600;
  background: var(--red-bg); padding: 8px 10px;
  border-radius: 8px;
  margin-top: 8px;
}
.login-pw-submit {
  width: 100%;
  padding: 14px;
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  font-weight: 700; font-size: 15px;
  margin-top: 14px;
  transition: background 0.15s;
}
.login-pw-submit:hover { background: var(--navy-dark); }
.login-pw-submit:disabled { background: var(--grey-3); cursor: wait; }

.settings-panel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 280;
  display: none;
  align-items: flex-end; justify-content: center;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.settings-panel.show { display: flex; }
.settings-content {
  background: #fff;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column;
  animation: slideUp 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@media (min-width: 768px) {
  .settings-panel { align-items: center; }
  .settings-content { border-radius: 16px; max-height: 88vh; }
}
.settings-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.settings-header-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  display: flex; align-items: center; gap: 8px;
}
.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 24px;
}
.settings-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.settings-section-header {
  background: var(--navy-light);
  color: var(--navy);
  padding: 10px 14px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex; align-items: center; gap: 6px;
}
.settings-section-header.admin {
  background: linear-gradient(135deg, #FFF8DC 0%, #FFE699 100%);
  color: #826600;
}
.settings-section-body { padding: 14px; }
.settings-field { margin-bottom: 14px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field label {
  display: block;
  font-size: 12px;
  color: var(--grey);
  font-weight: 600;
  margin-bottom: 6px;
}
.settings-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.settings-field input:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(31,78,120,0.12); }
.settings-field-hint {
  font-size: 11px; color: var(--grey-2);
  margin-top: 4px;
  line-height: 1.4;
}
.settings-field-status {
  font-size: 12px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  display: none;
}
.settings-field-status.show { display: block; }
.settings-field-status.success { background: var(--green-bg); color: var(--green); }
.settings-field-status.error { background: var(--red-bg); color: var(--red); }
.settings-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--grey-bg);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.settings-user-row .user-info { flex: 1; }
.settings-user-row .user-status { font-size: 11px; color: var(--grey-2); }
.settings-user-row button {
  padding: 6px 10px;
  background: var(--orange);
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.settings-user-row button:hover { background: #C76600; }

.edit-record-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px;
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF3D6 100%);
  border: 1px solid #FCD34D;
  border-radius: 8px;
  margin-bottom: 12px;
}
.edit-record-btn {
  padding: 6px 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 6px;
  font-weight: 600; font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.edit-record-btn:hover { background: var(--navy-dark); }
.edit-record-reset {
  padding: 6px 10px;
  background: var(--red-bg);
  color: var(--red);
  border-radius: 6px;
  font-weight: 600; font-size: 11px;
}
.edit-record-reset:hover { background: var(--red); color: #fff; }
.override-indicator {
  font-size: 11px;
  font-weight: 600;
  color: #92400E;
  background: #FEF3C7;
  padding: 4px 10px;
  border-radius: 100px;
  cursor: help;
}

.edit-field {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--grey-bg);
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.edit-field.changed {
  background: #FFFBEB;
  border-left-color: #F59E0B;
}
.edit-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--grey);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.edit-field input[type="text"],
.edit-field input[type="number"],
.edit-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fff;
}
.edit-field input:focus, .edit-field textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(31,78,120,0.1);
}
.edit-field textarea { resize: vertical; line-height: 1.4; }
.edit-field-checkbox {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.edit-field-checkbox input { width: 16px; height: 16px; }
.edit-field-hint {
  font-size: 10px; color: var(--grey-2);
  margin-top: 4px;
  font-style: italic;
}
.edit-field-original {
  font-size: 11px; color: #92400E;
  margin-top: 4px;
  padding: 4px 8px;
  background: #FEF3C7;
  border-radius: 4px;
  font-family: 'SF Mono', Consolas, monospace;
}
.edit-field-changed {
  display: inline-block;
  width: 8px; height: 8px;
  background: #F59E0B;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.derived-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.derived-row:last-child { border-bottom: none; }
.derived-row span:first-child { color: var(--grey); }
.firebase-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--grey-2);
}
.firebase-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grey-3);
}
.firebase-status.online .dot { background: var(--green); }
.firebase-status.offline .dot { background: var(--orange); }
.firebase-status.error .dot { background: var(--red); }

.header {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 12px 16px 12px;
  box-shadow: 0 2px 12px rgba(31,78,120,0.25);
}
.header-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.3px; }
.brand-sub { font-size: 11px; opacity: 0.85; }

.header-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s;
}
.header-user:hover { background: rgba(255,255,255,0.25); }
.header-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.header-user-name { font-size: 12px; font-weight: 600; }
.header-user-name .role-badge {
  display: inline-block;
  background: #FFC000; color: #5C4500;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.header-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,0.12);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background 0.15s;
  position: relative;
}
.icon-btn:hover { background: rgba(255,255,255,0.22); }
.icon-btn:active { background: rgba(255,255,255,0.30); }
.icon-btn .sync-dot {
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--navy-dark);
}
.sync-dot.online { background: #4ADE80; }
.sync-dot.offline { background: #FB923C; }
.sync-dot.error { background: #EF4444; }
.sync-dot.syncing { background: #60A5FA; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.search-wrap { position: relative; }
.search-input {
  width: 100%; padding: 10px 14px 10px 38px;
  background: rgba(255,255,255,0.95);
  border: none; border-radius: 10px;
  color: #212529; font-size: 14px;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.search-input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--grey-2); pointer-events: none;
}
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  color: var(--grey-2);
  font-size: 12px;
}
.search-clear.show { display: flex; }
.search-clear:hover { background: var(--grey-bg); color: var(--navy); }

.stats {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex; gap: 12px; align-items: center;
  font-size: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stats::-webkit-scrollbar { height: 0; }
.stat { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.stat-label { color: var(--grey-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-value { font-weight: 700; font-size: 15px; color: var(--navy); }
.stat-value.green { color: var(--green); }
.stat-value.orange { color: var(--orange); }
.stat-value.red { color: var(--red); }
.stat-value.purple { color: var(--purple); }
.stat-value.yellow { color: #B8860B; }
.stat-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.stat-group-header {
  font-weight: 700; color: var(--navy);
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--navy-light);
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.stat-group-header.conv {
  background: var(--purple-bg);
  color: var(--purple);
}

.filters {
  background: #fff;
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.filter-label {
  font-size: 10px; text-transform: uppercase; color: var(--grey-2);
  letter-spacing: 0.5px; margin-bottom: 6px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.filter-label .filter-extra {
  text-transform: none; color: var(--navy); font-weight: 600;
}
.filter-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.filter-row:last-child { margin-bottom: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--grey-bg);
  color: var(--grey);
  font-size: 12px; font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.chip:hover { background: #ECEEF0; }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip-count {
  background: rgba(0,0,0,0.08);
  color: inherit;
  padding: 1px 7px;
  border-radius: 100px;
  font-size: 11px; font-weight: 700;
}
.chip.active .chip-count { background: rgba(255,255,255,0.25); }

.chip.g-1 { background: var(--red-bg); color: var(--red); }
.chip.g-1.active { background: var(--red); color: #fff; }
.chip.g-2a { background: var(--orange-bg); color: var(--orange); }
.chip.g-2a.active { background: var(--orange); color: #fff; }
.chip.g-2b { background: var(--green-bg); color: var(--green); }
.chip.g-2b.active { background: var(--green); color: #fff; }
.chip.g-3a { background: var(--purple-bg); color: var(--purple); }
.chip.g-3a.active { background: var(--purple); color: #fff; }
.chip.g-3b { background: var(--teal-bg); color: var(--teal); }
.chip.g-3b.active { background: var(--teal); color: #fff; }

.chip.user-kha { background: linear-gradient(135deg, #FFF8DC 0%, #FFE699 100%); color: #826600; }
.chip.user-kha.active { background: linear-gradient(135deg, #FFC000 0%, #B8860B 100%); color: #fff; }
.chip.batch { background: #E8F4FD; color: var(--navy); }
.chip.batch.active { background: var(--navy); color: #fff; }
.chip.handover { background: var(--handover); color: #826600; }
.chip.handover.active { background: #B8860B; color: #fff; }

.chip-action {
  margin-left: auto;
  padding: 6px 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.chip-action:hover { background: var(--navy-dark); }

.sort-wrap {
  display: flex; gap: 8px; align-items: center;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--grey-bg);
}
.sort-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--grey);
  cursor: pointer;
  outline: none;
}
.sort-select:focus { border-color: var(--navy); }

.results-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px 8px;
  font-size: 12px;
  color: var(--grey-2);
}
.results-count { font-weight: 600; color: var(--navy); }

.grid {
  padding: 0 12px 100px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .grid { padding: 0 16px 100px; }
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--navy-light); transform: translateY(-1px); }
.card.handover {
  background: linear-gradient(0deg, #FFFCF0 0%, #FFFAEB 100%);
  border-color: #E6C547;
}
.card.handover::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #FFC000 0%, #B8860B 100%);
}
.card.assigned-to-me {
  border-left: 4px solid var(--green);
  background: linear-gradient(90deg, #F5FBF1 0%, #fff 30%);
}

.card-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  margin-bottom: 6px;
}
.card-id {
  font-weight: 700; font-size: 14px;
  color: var(--navy);
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.card-unit {
  background: var(--grey-bg);
  color: var(--grey);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.card-pct {
  font-weight: 700; font-size: 15px;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.card-pct.g-1 { background: var(--red-bg); color: var(--red); }
.card-pct.g-2a { background: var(--orange-bg); color: var(--orange); }
.card-pct.g-2b { background: var(--green-bg); color: var(--green); }
.card-pct.g-3a { background: var(--purple-bg); color: var(--purple); }
.card-pct.g-3b { background: var(--teal-bg); color: var(--teal); }
.card-pct.g-X { background: var(--grey-bg); color: var(--grey-2); }

.card-name {
  font-size: 13px;
  color: #212529;
  margin-bottom: 8px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.tag.luong-359 { background: var(--navy-light); color: var(--navy); }
.tag.luong-447 { background: var(--red-bg); color: var(--red); }
.tag.quy-ban-moi { background: #E4F7E4; color: #157A2E; font-weight: 700; }
.tag.no-pl { background: var(--yellow-bg); color: #997700; }
.tag.handover { background: #FFEEAD; color: #826600; }
.tag.paid-70 { background: #D6F5D6; color: #156A14; font-weight: 700; }
.tag.paid-100 { background: #CDE7FF; color: #0B4F8A; font-weight: 700; }
.tag.new { background: var(--purple-bg); color: var(--purple); }
.tag.bid { background: var(--orange-bg); color: var(--orange); }
.tag.in50 { background: #E8F4FD; color: var(--navy); }
.tag.batch { background: #E0E7FF; color: #3730A3; }
.tag.assigned {
  background: var(--green-bg);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tag.assigned-kha { background: linear-gradient(135deg, #FFF8DC 0%, #FFE699 100%); color: #826600; }
.tag.unassigned { background: #FEE2E2; color: #B91C1C; }

.tag-status {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.tag-status.s-chua { background: #F0F0F0; color: var(--grey-2); }
.tag-status.s-da-lien-he { background: #FFF4E0; color: #C97A00; }
.tag-status.s-dam-phan { background: #FFE4B5; color: #B8650B; }
.tag-status.s-da-ky-pl { background: #D6EAF8; color: var(--navy); }
.tag-status.s-da-thu { background: var(--green-bg); color: var(--green); }
.tag-status.s-tu-choi { background: var(--red-bg); color: var(--red); }
.tag-status.s-can-ho-tro { background: var(--purple-bg); color: var(--purple); }

.card-finance-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.card-finance-title {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--grey-2);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.card-finance-title.conv {
  color: var(--purple);
}
.card-finance {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  font-size: 11px;
}
.fin-item {
  display: flex; flex-direction: column;
  padding: 4px 6px;
  background: var(--grey-bg);
  border-radius: 5px;
}
.fin-item.conv {
  background: #F5F0FB;
  border-left: 2px solid var(--purple);
}
.fin-label { color: var(--grey-2); font-size: 10px; }
.conv-mark { color: var(--purple); font-size: 9px; vertical-align: super; margin-left: 1px; }
.fin-value { font-weight: 700; color: #212529; font-size: 12px; }
.fin-value.due { color: var(--orange); }
.fin-value.green { color: var(--green); }
.fin-value.purple { color: var(--purple); }

.card-note-preview {
  margin-top: 8px;
  padding: 6px 8px;
  background: #FFFEF5;
  border-left: 3px solid var(--yellow);
  border-radius: 4px;
  font-size: 11px;
  color: #6c5d00;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.card-note-preview-icon { font-weight: 700; margin-right: 4px; }

.empty { text-align: center; padding: 60px 20px; color: var(--grey-2); }
.empty-icon { font-size: 48px; margin-bottom: 8px; opacity: 0.4; }
.empty-text { font-size: 14px; }
.empty-sub { font-size: 12px; margin-top: 4px; }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
  align-items: flex-end; justify-content: center;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-backdrop.show { display: flex; }
.modal {
  background: #fff;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  animation: slideUp 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 768px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 16px; max-height: 88vh; }
}
.modal-handle {
  width: 36px; height: 4px;
  background: var(--grey-3);
  border-radius: 100px;
  margin: 8px auto 4px;
}
@media (min-width: 768px) { .modal-handle { display: none; } }

.modal-header {
  padding: 14px 18px 0;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: #fff;
  z-index: 2;
}
.modal-title-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding-bottom: 12px;
}
.modal-title {
  font-size: 18px; font-weight: 700;
  color: var(--navy);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grey-bg);
  color: var(--grey);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.modal-close:hover { background: #E1E4E8; }
.modal-subtitle { font-size: 13px; color: var(--grey); margin-top: 4px; }

.modal-tabs {
  display: flex;
  gap: 0;
  border-top: 1px solid transparent;
  overflow-x: auto;
}
.modal-tabs::-webkit-scrollbar { height: 0; }
.modal-tab {
  flex: 1;
  min-width: 130px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-2);
  border-bottom: 3px solid transparent;
  background: #fff;
  text-align: center;
  transition: all 0.15s;
  white-space: nowrap;
}
.modal-tab:hover { color: var(--navy); background: var(--grey-bg); }
.modal-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
  background: #fff;
}

.modal-body { padding: 16px 18px 24px; flex: 1; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.permission-banner {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #92400E;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.permission-banner.locked { background: #FEE2E2; border-color: #FCA5A5; color: #991B1B; }
.permission-icon { font-size: 16px; flex-shrink: 0; }

.detail-section { margin-bottom: 18px; }
.detail-section-title {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--grey-2);
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.detail-row {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--grey-bg);
  border-radius: 8px;
}
.detail-row.full { grid-column: 1 / -1; }
.detail-label { font-size: 11px; color: var(--grey-2); }
.detail-value { font-size: 13px; font-weight: 600; color: #212529; }
.detail-value.big { font-size: 16px; color: var(--navy); }
.detail-value.due { color: var(--orange); }
.detail-value.paid { color: var(--green); }
.detail-value.due-red { color: var(--red); }

.notes-section {
  margin-top: 8px;
  background: linear-gradient(0deg, #FFFEF5 0%, #FFFCEF 100%);
  border: 1px solid #F0E5B0;
  border-radius: 10px;
  padding: 14px;
}
.notes-section.locked {
  background: var(--grey-bg);
  border-color: var(--border);
  opacity: 0.7;
  pointer-events: none;
}
.notes-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700;
  color: #826600;
  margin-bottom: 10px;
  font-size: 13px;
}
.status-group { margin-bottom: 12px; }
.status-label {
  font-size: 11px; color: var(--grey-2);
  margin-bottom: 5px; font-weight: 600;
}
.status-options { display: flex; flex-wrap: wrap; gap: 5px; }
.status-option {
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--grey);
  font-weight: 500;
  transition: all 0.12s;
}
.status-option:hover { background: var(--grey-bg); }
.status-option.active { font-weight: 700; }
.status-option.s-chua.active { background: var(--grey); color: #fff; border-color: var(--grey); }
.status-option.s-da-lien-he.active { background: #C97A00; color: #fff; border-color: #C97A00; }
.status-option.s-dam-phan.active { background: #B8650B; color: #fff; border-color: #B8650B; }
.status-option.s-da-ky-pl.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.status-option.s-da-thu.active { background: var(--green); color: #fff; border-color: var(--green); }
.status-option.s-tu-choi.active { background: var(--red); color: #fff; border-color: var(--red); }
.status-option.s-can-ho-tro.active { background: var(--purple); color: #fff; border-color: var(--purple); }

.field-row { margin-bottom: 10px; }
.field-label {
  display: block;
  font-size: 11px;
  color: var(--grey-2);
  margin-bottom: 5px;
  font-weight: 600;
}
.field-input, .field-textarea, .field-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #E0D9A8;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #212529;
  outline: none;
  font-family: inherit;
}
.field-input:focus, .field-textarea:focus, .field-select:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255,192,0,0.15);
}
.field-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field-input[disabled], .field-textarea[disabled], .field-select[disabled] {
  background: var(--grey-bg); color: var(--grey-2); cursor: not-allowed;
}

.notes-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  font-size: 11px;
  color: var(--grey-2);
  flex-wrap: wrap;
  gap: 6px;
}
.save-indicator { display: flex; align-items: center; gap: 4px; }
.save-indicator.saving { color: var(--orange); }
.save-indicator.saved { color: var(--green); }
.save-indicator.error { color: var(--red); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.btn-clear-note {
  font-size: 11px; color: var(--red);
  padding: 4px 8px; border-radius: 6px;
}
.btn-clear-note:hover { background: var(--red-bg); }

.assignment-section {
  background: #FEFCE8;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.assignment-title {
  font-weight: 700;
  color: #92400E;
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.assignment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.assignment-current {
  font-size: 12px;
  color: var(--grey);
  padding: 4px 10px;
  background: #fff;
  border-radius: 6px;
  font-weight: 600;
}
.assignment-current.has {
  background: var(--green-bg);
  color: var(--green);
}
.assignment-select {
  flex: 1;
  min-width: 140px;
  padding: 7px 10px;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  outline: none;
}

.conv-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.conv-banner-title {
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.conv-banner-sub { font-size: 12px; opacity: 0.85; }

.conv-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.conv-section-header {
  background: var(--navy-light);
  color: var(--navy);
  padding: 8px 14px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.conv-section-body { padding: 12px 14px; }

.conv-row {
  display: grid;
  grid-template-columns: 1.5fr auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #ECEEF0;
}
.conv-row:last-child { border-bottom: none; }
.conv-label {
  font-size: 12px;
  color: #212529;
  display: flex; align-items: baseline; gap: 6px;
}
.conv-mark {
  display: inline-block;
  font-weight: 700;
  color: var(--navy);
  background: var(--navy-light);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  font-family: 'SF Mono', Consolas, monospace;
  min-width: 22px;
  text-align: center;
}
.conv-formula {
  font-size: 10px;
  color: var(--grey-2);
  font-family: 'SF Mono', Consolas, monospace;
  white-space: nowrap;
}
.conv-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  width: 100%;
  outline: none;
  color: #212529;
  font-family: inherit;
}
.conv-input:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(31,78,120,0.15); }
.conv-input.editable { background: #FFFCEF; border-color: #E6C547; }
.conv-input[disabled] { background: var(--grey-bg); color: var(--grey-2); border-color: var(--border); }
.conv-value {
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 10px;
  background: var(--grey-bg);
  border-radius: 6px;
}
.conv-value.calc { background: #F0F7FF; color: var(--navy); border-left: 3px solid var(--navy); }
.conv-value.highlight {
  background: linear-gradient(135deg, #FFF4D6 0%, #FFE699 100%);
  color: #826600;
  font-weight: 700;
  border-left: 3px solid #B8860B;
}

.conv-summary {
  background: linear-gradient(135deg, #FFF8DC 0%, #FFE699 100%);
  border: 2px solid #E6C547;
  border-radius: 12px;
  padding: 16px;
  margin: 18px 0;
  text-align: center;
}
.conv-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: #826600;
  margin-bottom: 6px;
}
.conv-summary-value {
  font-size: 26px;
  font-weight: 800;
  color: #5C4500;
  line-height: 1;
}
.conv-summary-sub { font-size: 12px; color: #826600; margin-top: 4px; }

.pay-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pay-table th {
  background: var(--navy);
  color: #fff;
  padding: 8px 6px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pay-table th.r { text-align: right; }
.pay-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.pay-table td.r { text-align: right; font-weight: 600; }
.pay-table td.amount { color: var(--navy); font-weight: 700; }
.pay-table tr:last-child td { border-bottom: none; }
.pay-table tr:nth-child(even) { background: #FAFBFC; }
.pay-table tr.maintenance { background: #FFF4E0 !important; }
.pay-table tr.total { background: var(--navy) !important; color: #fff; }
.pay-table tr.total td { color: #fff; font-weight: 700; }
.pay-times { font-size: 11px; color: var(--grey); line-height: 1.4; }

.conv-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.btn-primary, .btn-secondary, .btn-danger {
  flex: 1;
  padding: 11px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-primary[disabled] { background: var(--grey-3); cursor: not-allowed; }
.btn-secondary { background: var(--grey-bg); color: var(--navy); border: 1px solid var(--border); }
.btn-secondary:hover { background: #E1E4E8; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #A00000; }

.conv-note {
  font-size: 11px;
  color: var(--grey-2);
  font-style: italic;
  padding: 8px 12px;
  background: var(--grey-bg);
  border-radius: 6px;
  margin-top: 8px;
  line-height: 1.5;
}

.history-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--grey-2);
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-item {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy-light);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
}
.history-item.action-status_change { border-left-color: var(--purple); }
.history-item.action-note_update { border-left-color: var(--yellow); }
.history-item.action-conv_update { border-left-color: var(--orange); }
.history-item.action-assign { border-left-color: var(--green); }
.history-item.action-unassign { border-left-color: var(--red); }
.history-item.action-batch_create { border-left-color: var(--navy); }

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.history-user {
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 4px;
}
.history-time {
  font-size: 11px;
  color: var(--grey-2);
}
.history-desc {
  color: #212529;
  line-height: 1.4;
}
.history-diff {
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--grey-bg);
  border-radius: 4px;
  font-size: 11px;
  color: var(--grey);
}
.history-diff strike { color: var(--red); }
.history-diff .new { color: var(--green); font-weight: 600; }

.batch-panel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 250;
  display: none;
  align-items: flex-end; justify-content: center;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.batch-panel.show { display: flex; }
.batch-content {
  background: #fff;
  width: 100%;
  max-width: 800px;
  max-height: 92vh;
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@media (min-width: 768px) {
  .batch-panel { align-items: center; }
  .batch-content { border-radius: 16px; max-height: 88vh; }
}

.batch-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.batch-header-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  display: flex; align-items: center; gap: 8px;
}
.batch-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 24px;
}

.batch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.batch-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.batch-item:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow);
}
.batch-item-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.batch-item-name {
  font-weight: 700; color: var(--navy); font-size: 14px;
}
.batch-item-meta {
  font-size: 11px;
  color: var(--grey-2);
}
.batch-item-count {
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.batch-item-progress {
  margin-top: 6px;
  font-size: 11px;
  color: var(--grey);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.batch-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--grey-bg);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 6px;
  display: flex;
}
.batch-progress-segment {
  height: 100%;
  transition: width 0.2s;
}
.batch-progress-segment.assigned { background: var(--green); }
.batch-progress-segment.unassigned { background: var(--orange); }

.btn-create-batch {
  width: 100%;
  padding: 12px;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 14px;
}
.btn-create-batch:hover { background: var(--navy-dark); }
.btn-create-batch[disabled] { background: var(--grey-3); cursor: not-allowed; }

.batch-detail-back {
  font-size: 12px;
  color: var(--navy);
  font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
  cursor: pointer;
}
.batch-detail-back:hover { text-decoration: underline; }
.batch-detail-meta {
  background: var(--navy-light);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--navy);
}
.batch-detail-meta-row { margin-bottom: 3px; }

.batch-manage-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.batch-manage-btn {
  padding: 7px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.batch-manage-btn:hover { background: var(--grey-bg); border-color: var(--navy); color: var(--navy); }
.batch-manage-btn.primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.batch-manage-btn.primary:hover { background: var(--navy-dark); }
.batch-manage-btn.danger {
  background: var(--red-bg);
  color: var(--red);
  border-color: #F5C0C0;
}
.batch-manage-btn.danger:hover { background: var(--red); color: #fff; }

.batch-record-remove {
  width: 28px; height: 28px;
  background: transparent;
  color: var(--grey-2);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.batch-record-remove:hover {
  background: var(--red-bg);
  color: var(--red);
}

.batch-bulk-bar {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.batch-bulk-bar select {
  padding: 5px 8px;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

.batch-records-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.batch-record {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.batch-record-checkbox {
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.batch-record-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.batch-record-id {
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  display: flex; align-items: center; gap: 6px;
}
.batch-record-name {
  font-size: 11px;
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.batch-record-assignment {
  flex-shrink: 0;
}

.create-batch-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.create-batch-tab {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-2);
  border-bottom: 3px solid transparent;
  background: #fff;
}
.create-batch-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

.create-batch-name-row {
  margin-bottom: 12px;
}
.create-batch-name-row input,
.create-batch-name-row textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  margin-bottom: 6px;
  font-family: inherit;
}
.create-batch-name-row input:focus,
.create-batch-name-row textarea:focus { border-color: var(--navy); }
.create-batch-name-row label {
  font-size: 11px;
  color: var(--grey-2);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

.create-batch-pick-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 12px;
}
.create-batch-pick-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
.create-batch-pick-item:hover { background: var(--grey-bg); }
.create-batch-pick-item input { width: 16px; height: 16px; flex-shrink: 0; }
.create-batch-pick-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.create-batch-pick-pct {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 100px;
  font-weight: 700;
  flex-shrink: 0;
}

.create-batch-paste-area {
  width: 100%;
  min-height: 200px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12px;
  outline: none;
  margin-bottom: 8px;
  resize: vertical;
}
.create-batch-paste-area:focus { border-color: var(--navy); }
.create-batch-paste-result {
  font-size: 12px;
  padding: 8px 12px;
  background: var(--grey-bg);
  border-radius: 6px;
  margin-bottom: 12px;
}
.create-batch-paste-result.valid { background: var(--green-bg); color: var(--green); }
.create-batch-paste-result.invalid { background: var(--red-bg); color: var(--red); }

.create-batch-actions {
  display: flex; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.fab {
  position: fixed; bottom: 18px; right: 18px;
  background: var(--navy);
  color: #fff;
  border-radius: 100px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(31,78,120,0.35);
  z-index: 50;
  transition: all 0.15s;
}
.fab:hover { background: var(--navy-dark); transform: translateY(-2px); }

.menu-panel {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  display: none;
  align-items: flex-end; justify-content: center;
}
.menu-panel.show { display: flex; }
.menu-content {
  background: #fff;
  width: 100%;
  max-width: 460px;
  border-radius: 18px 18px 0 0;
  padding: 8px 0 24px;
  animation: slideUp 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@media (min-width: 768px) {
  .menu-panel { align-items: center; }
  .menu-content { border-radius: 16px; }
}
.menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.menu-title { font-weight: 700; color: var(--navy); font-size: 16px; }
.menu-list { padding: 8px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.menu-content { max-height: 90vh; display: flex; flex-direction: column; }
.menu-header { flex: 0 0 auto; }
.nav-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 320; display: flex; align-items: flex-end; justify-content: center; }
.nav-sheet { background: #fff; width: 100%; max-width: 420px; border-radius: 18px 18px 0 0; padding: 14px 14px 24px; animation: slideUp 0.22s cubic-bezier(0.2,0.9,0.3,1); max-height: 80vh; overflow-y: auto; }
.nav-sheet-title { font-weight: 700; color: var(--navy); font-size: 15px; padding: 2px 6px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.nav-sheet-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 13px 12px; font-size: 14px; font-weight: 600; color: #212529; background: none; border: none; border-radius: 10px; cursor: pointer; }
.nav-sheet-item:hover { background: var(--navy-light); }
@media (min-width: 768px) { .nav-sheet-backdrop { align-items: center; } .nav-sheet { border-radius: 16px; } }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  width: 100%;
  text-align: left;
  color: #212529;
  font-size: 14px;
}
.menu-item:hover { background: var(--grey-bg); }
.menu-item[disabled] { opacity: 0.4; cursor: not-allowed; }
.menu-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--navy-light);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.menu-icon.green { background: var(--green-bg); color: var(--green); }
.menu-icon.orange { background: var(--orange-bg); color: var(--orange); }
.menu-icon.red { background: var(--red-bg); color: var(--red); }
.menu-icon.yellow { background: var(--yellow-bg); color: #826600; }
.menu-text { flex: 1; }
.menu-label-main { font-weight: 600; }
.menu-label-sub { font-size: 11px; color: var(--grey-2); margin-top: 1px; }

.menu-version {
  text-align: center;
  font-size: 11px;
  color: var(--grey-2);
  padding: 14px 8px 4px;
  font-family: 'SF Mono', Consolas, monospace;
  letter-spacing: 0.3px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(20,54,81,0.95);
  color: #fff;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 13px; font-weight: 500;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  max-width: 90%;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.success { background: rgba(83,140,71,0.95); }
.toast.error { background: rgba(192,0,0,0.95); }
.toast.warn { background: rgba(237,125,49,0.95); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--grey-3); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--grey-2); }

.dash-print-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--navy-light); color: var(--navy);
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.dash-print-btn:hover { background: var(--navy); color: #fff; }
.dash-meta { font-size: 12px; color: var(--grey-2); margin-bottom: 14px; }

.dash-kpi-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px;
}
.dash-kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow);
}
.dash-kpi-label { font-size: 11px; color: var(--grey); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.dash-kpi-value { font-size: 24px; font-weight: 800; margin: 4px 0 2px; line-height: 1.1; }
.dash-kpi-sub { font-size: 11px; color: var(--grey-2); }

.dash-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.dash-card-title { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.dash-two-col { display: grid; grid-template-columns: 1fr; gap: 14px; }

.dash-progress-big {
  position: relative; height: 34px; background: var(--grey-bg);
  border-radius: 10px; overflow: hidden; margin-bottom: 10px;
}
.dash-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--green) 0%, #8fc96a 100%);
  border-radius: 10px; transition: width 0.6s cubic-bezier(0.2,0.9,0.3,1);
}
.dash-progress-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-weight: 700; font-size: 13px; color: #1a3a1a; white-space: nowrap;
}
.dash-progress-legend { display: flex; gap: 24px; font-size: 13px; flex-wrap: wrap; }

.dash-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dash-bar-label { flex: 0 0 90px; font-size: 13px; font-weight: 600; color: #333; }
.dash-bar-track { flex: 1; height: 18px; background: var(--grey-bg); border-radius: 9px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 9px; transition: width 0.6s cubic-bezier(0.2,0.9,0.3,1); min-width: 2px; }
.dash-bar-val { flex: 0 0 auto; font-size: 12px; color: var(--grey); white-space: nowrap; font-weight: 600; }

.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th, .dash-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.dash-table th { font-size: 11px; text-transform: uppercase; color: var(--grey); font-weight: 700; letter-spacing: 0.2px; }
.dash-table .num { text-align: right; white-space: nowrap; }
.dash-table tbody tr:hover { background: var(--grey-bg); }
.dash-team-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dash-mini-track { display: inline-block; width: 80px; height: 8px; background: var(--grey-bg); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.dash-mini-fill { height: 100%; border-radius: 4px; }
.dash-mini-pct { font-size: 12px; margin-left: 7px; color: var(--grey); font-weight: 600; }
.dash-note-sm { font-size: 11px; color: var(--grey-2); margin-top: 8px; font-style: italic; }

.dash-seg-grid { display: flex; gap: 12px; }
.dash-seg { flex: 1; text-align: center; padding: 10px; background: var(--grey-bg); border-radius: 10px; }
.dash-seg-num { font-size: 26px; font-weight: 800; line-height: 1; }
.dash-seg-label { font-size: 11px; color: var(--grey); margin-top: 5px; }

@media (min-width: 768px) {
  .dash-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-two-col { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .dash-kpi-grid { grid-template-columns: repeat(6, 1fr); }
  .dash-kpi-value { font-size: 22px; }
}

.conv-area-compare {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  gap: 10px; align-items: stretch; margin: 14px 0 8px;
}
.conv-area-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: #fff;
}
.conv-area-card.old { background: #F8FAFC; }
.conv-area-card.new { background: #F3EEF9; border-color: #C9B3E0; }
.conv-area-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--grey); margin-bottom: 4px; }
.conv-area-card.new .conv-area-card-label { color: var(--purple); }
.conv-area-card-code { font-size: 11px; color: var(--grey-2); margin-bottom: 8px; }
.conv-area-card-val { font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.conv-area-card.new .conv-area-card-val { color: var(--purple); }
.conv-area-card-val.sub { font-size: 13px; font-weight: 600; color: var(--grey); margin-top: 2px; }
.conv-area-card-unit { font-size: 10px; font-weight: 400; color: var(--grey-2); margin-left: 5px; }
.conv-area-arrow { display: flex; align-items: center; font-size: 22px; color: var(--grey-2); font-weight: 700; }
.conv-area-delta { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; }
.conv-area-delta-val { font-size: 16px; font-weight: 800; }
.conv-area-delta-val.up { color: var(--orange); }
.conv-area-delta-val.down { color: var(--teal); }
.conv-area-delta-val.same { color: var(--grey-2); }
.conv-area-delta-label { font-size: 10px; color: var(--grey-2); margin-top: 2px; }
.conv-area-note {
  font-size: 12px; color: #6b21a8; background: #F3EEF9;
  border-left: 3px solid var(--purple); border-radius: 6px;
  padding: 8px 12px; margin-bottom: 14px;
}
@media (max-width: 600px) {
  .conv-area-compare { grid-template-columns: 1fr; }
  .conv-area-arrow { transform: rotate(90deg); justify-content: center; }
}

.member-add-block {
  background: #F8FAFC;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
}
.member-add-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.member-input {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-size: 13px; outline: none; width: 100%;
}
.member-input:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(31,78,120,0.1); }
.member-add-btn { width: 100%; padding: 10px; font-weight: 700; }
.member-del-btn {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--grey-bg); color: var(--grey);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.member-del-btn:hover { background: var(--red); color: #fff; }
@media (min-width: 768px) {
  .member-add-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.dash-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--grey-2); padding: 4px 2px 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.dash-conv-banner {
  background: linear-gradient(135deg, #7030A0 0%, #5A2682 100%);
  color: #fff; border-radius: 12px;
  padding: 14px 16px; margin: 20px 0 12px;
  box-shadow: 0 6px 18px rgba(112,48,160,0.25);
}
.dash-conv-banner-title { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; }
.dash-conv-banner-sub { font-weight: 400; font-size: 12px; opacity: 0.92; display: block; margin-top: 3px; }
.dash-kpi-grid-5 { grid-template-columns: repeat(2, 1fr); }
.dash-kpi-grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .dash-kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
  .dash-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .dash-kpi-grid-5 { grid-template-columns: repeat(5, 1fr); }
  .dash-kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }
}

.dash-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF4F9 100%);
  border: 1px solid var(--border); border-radius: 12px;
}
.dash-filter-label { font-size: 12px; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: 0.3px; }
.dash-filter-select {
  flex: 1; min-width: 220px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; outline: none;
}
.dash-filter-select:focus { border-color: var(--navy); }
.dash-filter-current { font-size: 12px; color: var(--grey); }
.dash-card-sub { font-size: 12px; color: var(--grey-2); font-weight: 400; margin-left: 6px; }
.dash-batch-link { color: var(--navy); font-weight: 600; cursor: pointer; text-decoration: none; border-bottom: 1px dashed transparent; }
.dash-batch-link:hover { border-bottom-color: var(--navy); }
.dash-batch-active { background: #FFF6D9 !important; }
.dash-batch-active td:first-child { border-left: 3px solid #B8860B; }

.menu-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 100px; text-align: center;
  margin-left: 6px; vertical-align: middle;
}
.menu-badge.urgent { background: var(--red); animation: pulseBadge 1.8s infinite; }
@keyframes pulseBadge { 0%,100% { box-shadow: 0 0 0 0 rgba(192,0,0,0.5); } 50% { box-shadow: 0 0 0 6px rgba(192,0,0,0); } }

.reminder-add-block {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFF3D6 100%);
  border: 1px solid #FCD34D;
  border-radius: 12px; padding: 14px; margin-bottom: 18px;
}
.reminder-add-title { font-weight: 700; color: #92400E; margin-bottom: 10px; font-size: 14px; }
.reminder-add-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.reminder-input {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font-size: 13px; outline: none;
}
.reminder-input:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(31,78,120,0.1); }
.reminder-add-btn {
  grid-column: 1 / -1;
  padding: 11px; background: var(--navy); color: #fff;
  border-radius: 8px; font-weight: 700; font-size: 14px;
  transition: filter 0.15s;
}
.reminder-add-btn:hover { filter: brightness(1.1); }

.reminder-section { margin-bottom: 18px; }
.reminder-section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--grey); padding: 6px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.reminder-section-title.urgent { color: var(--red); }
.reminder-section-title.soon { color: var(--orange); }
.reminder-section-title.done { color: var(--green); }

.reminder-row {
  display: grid; grid-template-columns: 160px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 12px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 6px;
  transition: background 0.15s;
}
.reminder-row:hover { background: var(--grey-bg); }
.reminder-row.overdue { border-left: 3px solid var(--red); background: #FEF2F2; }
.reminder-row.done { opacity: 0.55; }
.reminder-row.done .reminder-note { text-decoration: line-through; }
.reminder-time-main { font-size: 13px; font-weight: 700; color: var(--navy); }
.reminder-row.overdue .reminder-time-main { color: var(--red); }
.reminder-user { font-size: 11px; color: var(--grey); margin-top: 2px; }
.reminder-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.reminder-hd { font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer; display: block; }
.reminder-hd:hover { text-decoration: underline; }
.reminder-note { font-size: 12px; color: #555; margin-top: 3px; line-height: 1.35; }
.reminder-actions { display: flex; gap: 6px; }
.reminder-btn {
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.reminder-btn.done { background: var(--green-bg); color: var(--green); }
.reminder-btn.done:hover { background: var(--green); color: #fff; }
.reminder-btn.del { background: var(--grey-bg); color: var(--grey); }
.reminder-btn.del:hover { background: var(--red); color: #fff; }
.reminder-empty { text-align: center; padding: 40px 20px; color: var(--grey-2); font-style: italic; }

.export-block { padding: 8px 4px; }
.export-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.export-desc { font-size: 13px; color: var(--grey); line-height: 1.5; margin-bottom: 16px; }
.export-form { display: flex; flex-direction: column; gap: 8px; }
.export-label { font-size: 12px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 6px; }
.export-select {
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; font-size: 14px; outline: none;
}
.export-select:focus { border-color: var(--navy); }
.export-format-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
.export-format-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: #fff;
  border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: all 0.15s; text-align: left;
}
.export-format-btn:hover { border-color: var(--navy); background: #F8FAFC; transform: translateY(-1px); box-shadow: var(--shadow); }
.export-format-icon {
  width: 44px; height: 44px; border-radius: 10px;
  color: #fff; font-weight: 800; font-size: 22px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.export-format-name { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.export-format-desc { font-size: 12px; color: var(--grey); margin-top: 2px; }

@media (min-width: 768px) {
  .export-format-row { grid-template-columns: 1fr 1fr; }
  .reminder-add-form { grid-template-columns: 1fr 1fr 1fr; }
}

#printArea { display: none; }

@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
  }

  body > *:not(#printArea) { display: none !important; }
  #app, #loginScreen,
  .modal-backdrop, .batch-panel, .menu-panel,
  .settings-panel, .toast, .fab, .header, .filters, .stats, .grid {
    display: none !important;
  }
  #printArea {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  @page { size: A4; margin: 14mm 16mm 16mm 18mm; }

  .print-doc {
    width: 100%;
    color: #000;
    font-family: "Times New Roman", "Liberation Serif", Times, serif;
    font-size: 11.5pt;
    line-height: 1.4;
  }

  .print-header {
    display: table;
    width: 100%;
    margin-bottom: 8pt;
    border-bottom: 1pt solid #000;
    padding-bottom: 6pt;
  }
  .print-header-left, .print-header-right {
    display: table-cell;
    vertical-align: top;
    width: 50%;
    text-align: center;
  }
  .print-org-name {
    font-weight: bold;
    font-size: 11pt;
    text-transform: uppercase;
    line-height: 1.2;
  }
  .print-org-sub {
    font-size: 10pt;
    margin-top: 2pt;
    font-style: italic;
  }
  .print-org-underline {
    display: inline-block;
    border-bottom: 0.75pt solid #000;
    width: 40pt;
    margin-top: 3pt;
  }
  .print-motto-1 {
    font-weight: bold;
    font-size: 11pt;
    text-transform: uppercase;
  }
  .print-motto-2 {
    font-weight: bold;
    font-size: 11pt;
    margin-top: 2pt;
  }
  .print-motto-underline {
    display: inline-block;
    border-bottom: 0.75pt solid #000;
    width: 80pt;
    margin-top: 3pt;
  }

  .print-title-block {
    text-align: center;
    margin: 8pt 0 10pt;
  }
  .print-title {
    font-size: 15pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    margin-bottom: 3pt;
    line-height: 1.2;
  }
  .print-title::after {
    content: '';
    display: block;
    width: 50pt;
    height: 1pt;
    background: #000;
    margin: 4pt auto 0;
  }
  .print-subtitle {
    font-style: italic;
    font-size: 10.5pt;
    margin-top: 5pt;
    color: #333;
    line-height: 1.35;
  }
  .print-meta {
    text-align: right;
    font-style: italic;
    font-size: 10.5pt;
    margin: 6pt 0 8pt;
  }

  .print-info-block {
    margin-bottom: 8pt;
    border: 0.5pt solid #999;
    background: #FAFAFA;
    padding: 7pt 10pt;
  }
  .print-info-title {
    font-weight: bold;
    font-size: 10.5pt;
    text-transform: uppercase;
    margin-bottom: 4pt;
    color: #1a3a5c;
    border-bottom: 0.5pt solid #999;
    padding-bottom: 2pt;
  }
  .print-info-grid {
    display: table;
    width: 100%;
  }
  .print-info-row {
    display: table-row;
  }
  .print-info-label, .print-info-value {
    display: table-cell;
    padding: 2pt 0;
    font-size: 10.5pt;
    vertical-align: top;
  }
  .print-info-label {
    width: 32%;
    font-weight: bold;
    padding-right: 8pt;
  }
  .print-info-value {
    width: 68%;
  }

  .print-section-title {
    font-weight: bold;
    font-size: 11pt;
    text-transform: uppercase;
    margin: 8pt 0 4pt;
    color: #fff;
    background: #1a3a5c;
    padding: 4pt 9pt;
    letter-spacing: 0.4pt;
    page-break-after: avoid;
  }

  .print-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6pt;
    font-size: 10.5pt;
  }
  .print-table thead {
    display: table-header-group;
  }
  .print-table th, .print-table td {
    border: 0.5pt solid #444;
    padding: 4pt 7pt;
    text-align: left;
    vertical-align: middle;
  }
  .print-table tr { page-break-inside: avoid; }
  .print-table th {
    background: #1a3a5c !important;
    color: #fff !important;
    font-weight: bold;
    text-align: center;
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 0.2pt;
  }
  .print-table tbody tr:nth-child(even) {
    background: #F5F7FA !important;
  }
  .print-table .num {
    text-align: right;
    font-family: "Times New Roman", serif;
    white-space: nowrap;
  }
  .print-table .center { text-align: center; }
  .print-table .mark {
    font-weight: bold;
    text-align: center;
    width: 30pt;
    font-style: italic;
    color: #1a3a5c;
  }
  .print-table .formula {
    font-style: italic;
    font-size: 9.5pt;
    color: #555;
    width: 90pt;
    text-align: center;
  }
  .print-highlight {
    background: #FFF6D9 !important;
    font-weight: bold;
  }
  .print-highlight td {
    color: #5C4500;
  }
  .print-table .total-row {
    background: #1a3a5c !important;
    color: #fff !important;
    font-weight: bold;
    font-size: 11pt;
  }
  .print-table .total-row td { color: #fff; border-color: #1a3a5c; }

  .print-key-box {
    background: linear-gradient(180deg, #FFFBE5 0%, #FFF6D9 100%) !important;
    border: 1pt solid #B8860B;
    padding: 8pt 14pt;
    text-align: center;
    margin: 6pt 0 8pt;
    page-break-inside: avoid;
  }
  .print-key-label {
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 0.4pt;
    color: #6b5200;
    font-weight: bold;
    margin-bottom: 3pt;
  }
  .print-key-value {
    font-size: 19pt;
    font-weight: bold;
    color: #5C4500;
    line-height: 1.1;
    letter-spacing: 0.3pt;
  }
  .print-key-sub {
    font-size: 9.5pt;
    margin-top: 3pt;
    font-style: italic;
    color: #6b5200;
  }

  .print-pay-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8pt;
    font-size: 10pt;
  }
  .print-pay-table thead {
    display: table-header-group;
  }
  .print-pay-table th, .print-pay-table td {
    border: 0.5pt solid #444;
    padding: 4pt 6pt;
    vertical-align: top;
  }
  .print-pay-table tr { page-break-inside: avoid; }
  .print-pay-table th {
    background: #1a3a5c !important;
    color: #fff !important;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 9.5pt;
  }
  .print-pay-table tbody tr:nth-child(even) {
    background: #F5F7FA !important;
  }
  .print-pay-table .lan-col { width: 26pt; text-align: center; font-weight: bold; }
  .print-pay-table .pct-col { width: 56pt; text-align: center; font-style: italic; color: #444; }
  .print-pay-table .amount-col { width: 110pt; text-align: right; font-weight: bold; color: #1a3a5c; white-space: nowrap; }
  .print-pay-table .moc-col { line-height: 1.35; }

  .print-note {
    font-size: 9.5pt;
    font-style: italic;
    color: #444;
    background: #FAFAFA;
    border-left: 2pt solid #1a3a5c;
    padding: 6pt 9pt;
    margin: 6pt 0;
    line-height: 1.4;
  }

  .print-footer {
    margin-top: 14pt;
    display: table;
    width: 100%;
    page-break-inside: avoid;
  }
  .print-sign-block {
    display: table-cell;
    width: 50%;
    text-align: center;
    vertical-align: top;
    padding: 0 8pt;
  }
  .print-sign-title {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11pt;
    letter-spacing: 0.4pt;
  }
  .print-sign-sub {
    font-size: 9.5pt;
    font-style: italic;
    margin-top: 2pt;
    color: #444;
  }
  .print-sign-spacer {
    height: 48pt;
  }
  .print-sign-name {
    font-weight: bold;
    font-size: 11pt;
    margin-top: 4pt;
  }

  .print-page-footer {
    margin-top: 10pt;
    padding-top: 4pt;
    border-top: 0.5pt solid #999;
    font-size: 9pt;
    color: #666;
    display: table;
    width: 100%;
  }
  .print-page-footer-left, .print-page-footer-right {
    display: table-cell;
    width: 50%;
  }
  .print-page-footer-right { text-align: right; }
}

:root {
  --desktop-max: 1640px;
  --shadow-card: 0 10px 30px rgba(20,54,81,0.08), 0 2px 8px rgba(20,54,81,0.05);
  --shadow-card-hover: 0 18px 44px rgba(20,54,81,0.14), 0 4px 14px rgba(20,54,81,0.08);
}

body {
  font-size: 15px;
  background:
    radial-gradient(circle at top left, rgba(217,225,242,0.7), transparent 34%),
    linear-gradient(180deg, #F7FAFD 0%, #F3F6FA 100%);
}

@media (min-width: 1024px) {
  body { font-size: 16px; }

  .login-card {
    max-width: 520px;
    padding: 42px 38px;
    border-radius: 24px;
  }
  .login-logo { width: 78px; height: 78px; font-size: 32px; border-radius: 22px; }
  .login-title { font-size: 25px; }
  .login-subtitle { font-size: 15px; }
  .login-user-btn { padding: 18px 20px; border-radius: 16px; }
  .login-user-icon { width: 52px; height: 52px; font-size: 25px; }
  .login-user-name { font-size: 17px; }
  .login-user-role { font-size: 13px; }

  .header {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(460px, 1fr) minmax(460px, 720px);
    align-items: center;
    gap: 24px;
    padding: 18px clamp(24px, 3vw, 48px);
  }
  .header-top,
  .search-wrap {
    width: 100%;
    max-width: var(--desktop-max);
    margin: 0 auto;
  }
  .header-top { margin-bottom: 0; }
  .brand { gap: 14px; }
  .brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 22px;
  }
  .brand-name { font-size: 21px; letter-spacing: 0.2px; }
  .brand-sub { font-size: 14px; opacity: 0.9; margin-top: 3px; }
  .header-actions { gap: 10px; }
  .icon-btn { width: 44px; height: 44px; border-radius: 13px; font-size: 20px; }
  .header-user { padding: 7px 12px 7px 7px; gap: 10px; }
  .header-user-avatar { width: 34px; height: 34px; font-size: 17px; }
  .header-user-name { font-size: 14px; }
  .search-input {
    height: 50px;
    padding: 0 48px 0 48px;
    border-radius: 15px;
    font-size: 16px;
  }
  .search-icon { left: 18px; font-size: 18px; }
  .search-clear { width: 32px; height: 32px; right: 12px; font-size: 14px; }

  .stats,
  .filters,
  .results-header,
  .grid {
    max-width: var(--desktop-max);
    margin-left: auto;
    margin-right: auto;
  }
  .stats {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 20px;
    gap: 18px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    overflow: visible;
  }
  .stat-label { font-size: 11px; }
  .stat-value { font-size: 20px; }
  .stat-sep { height: 34px; }
  .stat-group-header { font-size: 12px; padding: 7px 10px; border-radius: 8px; }

  .filters {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px 20px 20px;
    box-shadow: var(--shadow);
  }
  .filter-label {
    font-size: 12px;
    margin-top: 14px;
    margin-bottom: 9px;
  }
  .filter-label:first-child { margin-top: 0; }
  .filter-row { gap: 8px; margin-bottom: 10px; }
  .chip,
  .chip-action {
    padding: 9px 15px;
    font-size: 14px;
    border-radius: 999px;
  }
  .chip-count { font-size: 12px; padding: 2px 8px; }
  .sort-wrap { margin-top: 14px; padding-top: 14px; }
  .sort-select {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 10px;
  }

  .results-header {
    padding: 20px 8px 12px;
    font-size: 14px;
  }

  .grid {
    padding: 0 0 120px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .card {
    border-radius: 18px;
    padding: 20px 22px;
    min-height: 248px;
    box-shadow: var(--shadow-card);
  }
  .card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
  }
  .card-top { margin-bottom: 10px; gap: 12px; }
  .card-id { font-size: 18px; }
  .card-unit { font-size: 13px; padding: 3px 9px; border-radius: 7px; }
  .card-pct { font-size: 17px; padding: 6px 12px; }
  .card-name { font-size: 15px; line-height: 1.45; margin-bottom: 12px; }
  .card-tags { gap: 7px; margin-bottom: 12px; }
  .tag, .tag-status { font-size: 11px; padding: 4px 9px; border-radius: 7px; }
  .card-finance-section { margin-top: 12px; padding-top: 12px; }
  .card-finance-title { font-size: 10px; margin-bottom: 7px; }
  .card-finance { gap: 9px; font-size: 13px; }
  .fin-item { padding: 8px 10px; border-radius: 10px; }
  .fin-label { font-size: 11px; }
  .fin-value { font-size: 14px; }
  .card-note-preview { margin-top: 12px; padding: 10px 12px; font-size: 13px; border-radius: 8px; }

  .modal,
  .batch-content,
  .settings-content {
    width: min(1180px, calc(100vw - 56px));
    max-width: none;
    border-radius: 22px;
    max-height: 88vh;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  }
  .modal-header,
  .batch-header,
  .settings-header { padding: 22px 28px 0; }
  .batch-header,
  .settings-header { padding-bottom: 20px; }
  .modal-title { font-size: 25px; }
  .modal-subtitle { font-size: 15px; }
  .modal-close { width: 40px; height: 40px; font-size: 22px; }
  .modal-tab { min-width: 170px; padding: 15px 18px; font-size: 15px; }
  .modal-body,
  .batch-body,
  .settings-body { padding: 24px 28px 32px; }
  .detail-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .detail-row { padding: 13px 15px; border-radius: 12px; }
  .detail-label { font-size: 12px; }
  .detail-value { font-size: 15px; }
  .detail-value.big { font-size: 20px; }
  .notes-section,
  .assignment-section,
  .conv-section,
  .conv-banner { border-radius: 16px; }
  .field-input, .field-textarea, .field-select,
  .conv-input, .conv-value { font-size: 15px; }
  .pay-table { font-size: 14px; }
  .pay-table th { font-size: 12px; padding: 11px 10px; }
  .pay-table td { padding: 11px 10px; }
  .conv-summary-value { font-size: 34px; }

  .menu-content {
    max-width: 560px;
    border-radius: 22px;
    padding-bottom: 28px;
  }
  .menu-title { font-size: 19px; }
  .menu-item { padding: 17px 22px; font-size: 16px; }
  .menu-icon { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .menu-label-sub { font-size: 13px; }

  .fab {
    bottom: 28px;
    right: 32px;
    padding: 16px 24px;
    font-size: 15px;
    box-shadow: 0 12px 32px rgba(31,78,120,0.35);
  }
  .toast { bottom: 110px; font-size: 15px; padding: 13px 22px; }
}

@media (min-width: 1440px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { min-height: 270px; }
}

@media (min-width: 1800px) {
  :root { --desktop-max: 1760px; }
}

@media (max-width: 1023px) {
  .grid { max-width: 940px; }
}

.giohang-panel {
  position: fixed; inset: 0; background: #F5F7FA;
  z-index: 9000; overflow-y: auto; display: none;
}
.gh-header {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, #C0504D 0%, #A03B3B 100%); color: #fff;
  padding: 14px 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky; top: 0; z-index: 10;
}
.gh-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.gh-header .btn-close {
  background: rgba(255,255,255,0.2); color: #fff; border: 0;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px;
}
.gh-tabs {
  display: flex; background: #fff; padding: 0 22px;
  border-bottom: 1px solid #E0E4EB; gap: 4px;
  position: sticky; top: 58px; z-index: 9;
}
.gh-tab {
  background: transparent; border: 0; padding: 12px 18px;
  font-size: 13px; cursor: pointer; color: #555; border-bottom: 3px solid transparent;
  font-weight: 500;
}
.gh-tab:hover { background: #F0F2F5; }
.gh-tab.active { color: #C0504D; border-bottom-color: #C0504D; font-weight: 700; }
.gh-body { padding: 20px 22px; max-width: 1300px; margin: 0 auto; }

.gh-toolbar {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.gh-title { font-size: 15px; font-weight: 700; color: #1F4E78; }

.gh-table {
  width: 100%; background: #fff; border-radius: 8px; overflow: hidden;
  border: 1px solid #E0E4EB; border-collapse: collapse;
}
.gh-table th, .gh-table td {
  padding: 10px 12px; text-align: left; font-size: 13px; border-bottom: 1px solid #F0F2F5;
}
.gh-table th { background: #F8FAFC; font-weight: 700; color: #1F4E78; font-size: 12px; text-transform: uppercase; }
.gh-table tbody tr:hover { background: #F8FAFC; }
.gh-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.btn-mini {
  background: #F0F2F5; border: 0; padding: 4px 8px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.btn-mini:hover { background: #E0E4EB; }

.gh-config { background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #E0E4EB; max-width: 600px; }
.gh-config h3 { margin: 0 0 6px; color: #1F4E78; }
.gh-config-row { display: grid; grid-template-columns: 200px 150px 1fr; gap: 12px; align-items: center; margin: 12px 0; }
.gh-config-row label { font-weight: 600; font-size: 13px; }
.gh-config-row input { padding: 6px 10px; border: 1px solid #E0E4EB; border-radius: 4px; }
.gh-config-note { font-size: 12px; color: #999; }

.gh-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 9500;
}
.gh-modal {
  background: #fff; border-radius: 10px; width: 92%; max-width: 540px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.gh-modal-header {
  background: #1F4E78; color: #fff; padding: 14px 20px;
  border-radius: 10px 10px 0 0; display: flex; justify-content: space-between; align-items: center;
}
.gh-modal-header h3 { margin: 0; font-size: 16px; }
.gh-modal-header button { background: transparent; color: #fff; border: 0; font-size: 18px; cursor: pointer; }
.gh-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.gh-modal-footer {
  padding: 12px 20px; border-top: 1px solid #E0E4EB;
  display: flex; justify-content: flex-end; gap: 8px;
}
.gh-form-row { margin-bottom: 12px; }
.gh-form-row label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; }
.gh-form-row input, .gh-form-row select, .gh-form-row textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #E0E4EB; border-radius: 4px;
  font-size: 13px; box-sizing: border-box;
}
.gh-form-row textarea { resize: vertical; min-height: 60px; }

.card-cart-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  background: #FCE4D6; color: #C0504D; font-size: 11px; font-weight: 700;
  margin-left: 6px;
}
.card-cart-badge.sold { background: #CDE7FF; color: #0B4F8A; }

@media (max-width: 768px) {
  .gh-config-row { grid-template-columns: 1fr; gap: 6px; }
  .gh-tabs { overflow-x: auto; padding: 0 8px; }
  .gh-tab { white-space: nowrap; padding: 12px 12px; font-size: 12px; }
  .gh-table { font-size: 12px; }
  .gh-table th, .gh-table td { padding: 8px 6px; }
  .gh-body { padding: 12px; }
}

.danhba-panel { position: fixed; inset: 0; background: #F5F7FA; z-index: 9000; overflow-y: auto; display: none; }
.db-header {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(135deg, #1F6FB2 0%, #145A93 100%); color: #fff;
  padding: 14px 22px; position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.db-header h2 { margin: 0; font-size: 18px; }
.db-header .btn-close { background: rgba(255,255,255,0.2); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.db-toolbar { display: flex; gap: 10px; padding: 14px 22px 6px; max-width: 900px; margin: 0 auto; }
.db-search { flex: 1; padding: 10px 14px; border: 1px solid #D0D7E2; border-radius: 8px; font-size: 14px; }
.db-filters { display: flex; gap: 8px; padding: 6px 22px; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
.db-chip { background: #fff; border: 1px solid #D0D7E2; border-radius: 16px; padding: 5px 14px; font-size: 12px; cursor: pointer; color: #555; }
.db-chip.active { background: #1F6FB2; color: #fff; border-color: #1F6FB2; font-weight: 600; }
.db-count { padding: 4px 22px 10px; color: #888; font-size: 12px; max-width: 900px; margin: 0 auto; }
.db-list { padding: 0 22px 40px; max-width: 900px; margin: 0 auto; display: grid; gap: 10px; }
.db-card { background: #fff; border: 1px solid #E0E4EB; border-radius: 10px; padding: 14px 16px; }
.db-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.db-card-name { font-weight: 700; font-size: 15px; color: #1F2D3D; }
.db-link-badge { display: inline-block; background: #E3F0FB; color: #1F6FB2; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-left: 6px; }
.db-link-badge.muted { background: #F0F0F0; color: #999; }
.db-edit { background: #F0F2F5; border: 0; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 14px; flex-shrink: 0; }
.db-card-sub { color: #888; font-size: 12px; margin-top: 2px; }
.db-card-addr { color: #555; font-size: 13px; margin-top: 6px; }
.db-phones { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.db-phone-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-phone-num { font-weight: 600; font-size: 14px; color: #1F2D3D; min-width: 120px; }
.db-nophone { color: #BBB; font-size: 13px; font-style: italic; }
.db-btn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.db-call { background: #1A7F3F; color: #fff; }
.db-call:active { background: #14692f; }
.db-zalo { background: #0068FF; color: #fff; }
.db-zalo:active { background: #0052cc; }

.phone-actions { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.phone-actions .db-phone-item { background: #F8FAFC; padding: 6px 8px; border-radius: 8px; }
.phone-src { font-size: 11px; color: #1F6FB2; margin-bottom: 2px; }

.ct-phone-row { display: flex; gap: 6px; margin-bottom: 6px; }
.ct-phone-row input { flex: 1; padding: 8px 10px; border: 1px solid #E0E4EB; border-radius: 6px; }
.ct-phone-del { background: #FBE4E4; color: #C00; border: 0; width: 34px; border-radius: 6px; cursor: pointer; }

@media (max-width: 768px) {
  .db-toolbar { padding: 12px 12px 6px; }
  .db-list { padding: 0 12px 40px; }
  .db-phone-num { min-width: 0; }
}

.card-note-time { display: inline-block; margin-left: 8px; font-size: 11px; color: #1F6FB2; font-weight: 600; white-space: nowrap; }
.card-note-time-only { margin-top: 6px; font-size: 11px; color: #9AA5B1; }

.member-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.member-act-btn { background: #EEF2F7; border: 0; width: 32px; height: 32px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.member-act-btn:hover { background: #DDE6F0; }
.member-act-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.member-del-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.settings-user-row.member-hidden { opacity: 0.55; }
.settings-user-row.member-hidden .user-info > div:first-child { text-decoration: none; }
.member-badge-hidden { display: inline-block; background: #6B7280; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9px; margin-left: 6px; vertical-align: middle; }
.member-badge-self { display: inline-block; background: #1F6FB2; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9px; margin-left: 6px; vertical-align: middle; }

.db-pool-badge { display:inline-block; font-size:10px; font-weight:700; padding:1px 7px; border-radius:9px; margin-left:4px; vertical-align:middle; }
.db-pool-badge.q359 { background:#EEF2F7; color:#5B6B7B; }
.db-pool-badge.q447 { background:#FCE9D6; color:#C0670D; }

.moilv-box { background:#FBFAF5; border:1px solid #ECE6D6; border-radius:10px; padding:12px 14px; }
.moilv-box.locked { opacity:.85; }
.moilv-info { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.moilv-row { display:flex; gap:10px; font-size:13px; align-items:flex-start; }
.moilv-k { flex:0 0 110px; color:#8A7F63; font-weight:600; }
.moilv-v { flex:1; color:#2B2B2B; word-break:break-word; }
.moilv-phones { display:flex; flex-direction:column; gap:6px; }
.moilv-empty-tag { font-size:11px; font-weight:400; color:#B0A98F; }
@media (max-width:768px){ .moilv-k{flex-basis:92px;} }

.card-moilv { display:flex; align-items:center; gap:4px; margin-top:6px; padding:5px 8px;
  background:#FFF4E6; border:1px solid #FCE0B8; border-radius:7px; font-size:11.5px;
  color:#9A5B0E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-moilv-ic { flex:0 0 auto; }
.card-moilv-st { font-weight:700; flex:0 0 auto; }
.card-moilv-note { color:#B07A3A; overflow:hidden; text-overflow:ellipsis; }
.moilv-addr { margin-top:6px; font-size:12px; color:#7A6C4F; }

.dq-header-btn { font-size: 16px; }
.dq-backdrop { z-index: 360; padding: 12px; }
.dq-modal { max-width: 1180px; width: 96vw; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; }
.dq-modal-header { flex-shrink: 0; }
.dq-body { overflow: auto; padding: 14px 16px 18px; }
.dq-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dq-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.dq-card.ok { border-color: rgba(112,173,71,.35); background: #F6FBF3; }
.dq-card.warn { border-color: rgba(237,125,49,.4); background: #FFF8F1; }
.dq-card.bad { border-color: rgba(192,0,0,.25); background: #FFF5F5; }
.dq-card-value { font-weight: 800; font-size: 20px; color: var(--navy); line-height: 1.15; }
.dq-card-label { margin-top: 4px; color: var(--grey-2); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.dq-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
.dq-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background: #fff; max-height: 55vh; }
.dq-table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 12px; }
.dq-table th, .dq-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.dq-table th { position: sticky; top: 0; z-index: 1; background: var(--navy); color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .25px; }
.dq-table tbody tr:nth-child(even) { background: #FAFBFC; }
.dq-table .num { text-align: right; white-space: nowrap; }
.dq-issue { color: #C00000; font-weight: 700; }
.dq-empty { text-align: center; color: var(--green); font-weight: 700; padding: 24px !important; }
.dq-note { color: var(--grey-2); margin-top: 8px; font-size: 12px; }
@media (max-width: 768px) {
  .dq-modal { width: 100vw; max-height: 96vh; border-radius: 18px 18px 0 0; align-self: flex-end; }
  .dq-backdrop { padding: 0; align-items: flex-end; }
  .dq-body { padding: 12px; }
  .dq-card-value { font-size: 17px; }
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 16px 80px;
  max-width: 1480px;
  margin: 0 auto;
}
.pager-summary {
  font-size: 12px;
  color: var(--grey-2);
}
.pager-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.pager-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.pager-btn:hover:not(:disabled) {
  background: #EEF4FA;
  border-color: #BFD2E6;
}
.pager-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.pager-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.pager-ellipsis {
  color: var(--grey-2);
  padding: 0 2px;
  font-weight: 700;
}
@media (max-width: 768px) {
  .pagination-bar {
    padding: 2px 12px 76px;
    justify-content: center;
  }
  .pager-summary { width: 100%; text-align: center; }
  .pager-actions { justify-content: center; }
  .pager-btn { min-width: 32px; height: 32px; padding: 0 8px; }
}

body:not(.gate-passed) #loginScreen { display: flex !important; }
body:not(.gate-passed) #app { display: none !important; }
#gateScreen { display: none !important; }
.simple-login-card { max-width: 420px; }
.simple-login-form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.simple-login-form .login-pw-label { margin-top: 4px; }
.simple-login-form .login-pw-submit { margin-top: 8px; }
@media (max-width: 520px) {
  .simple-login-card { max-width: calc(100vw - 28px); padding: 28px 22px; }
  .simple-login-form { gap: 9px; }
}

#buildingSwitchWrap { display:flex; align-items:center; }
.building-select {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  max-width: 150px;
  cursor: pointer;
}
.building-select option { color: #1F2937; background: #fff; }

.perm-user-row {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card-bg, #fff);
}
.perm-user-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.perm-user-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.perm-detail { margin-top: 10px; border-top: 1px dashed var(--border, #E5E7EB); padding-top: 10px; }
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 12px;
}
.perm-check {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 4px 2px; cursor: pointer; user-select: none;
}
.perm-check input { accent-color: var(--blue, #1F4E78); width: 15px; height: 15px; flex: 0 0 auto; }
.perm-check-disabled { opacity: 0.55; cursor: not-allowed; }

/* ===================== Tab Tính HĐ (Cong_cu_tinh_HD_CT1104) ===================== */
.modal-backdrop.modal-calc-wide .modal {
  max-width: 1150px;
}
.calc-banner {
  background: linear-gradient(135deg, #1C2126 0%, #2D353E 100%);
  color: #F5F2EC;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.calc-banner-title {
  font-size: 15px; font-weight: 700; color: #FFF;
}
.calc-banner-sub {
  font-size: 12px; opacity: 0.8; margin-top: 2px;
}
.calc-actions-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; justify-content: flex-end;
}
.calc-seg { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #fff; }
.calc-seg button { border: 0; border-radius: 0; background: transparent; color: var(--grey); padding: 7px 12px; font-size: 12.5px; font-weight: 600; }
.calc-seg button + button { border-left: 1px solid var(--border); }
.calc-seg button.on { background: #9A2C22; color: #fff; }
.calc-only-kh { display: none; }
.calc-btn-ghost {
  background: #F0F4F8; color: var(--navy); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
}
.calc-btn-ghost:hover { background: #E2E8F0; }
.calc-btn-seal {
  background: var(--navy); color: #fff; border: 1px solid var(--navy-dark);
  padding: 7px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.calc-btn-seal:hover { background: var(--navy-dark); }

.calc-desk {
  display: flex; gap: 18px; align-items: flex-start; margin-top: 10px;
}
.calc-console {
  width: 380px; flex: none; background: #FFFDF9; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px 18px; box-shadow: var(--shadow);
}
.calc-console h2 {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9A2C22;
  border-bottom: 2px solid #9A2C22; padding-bottom: 4px; margin: 16px 0 10px; font-weight: 700;
}
.calc-console h2:first-child { margin-top: 2px; }
.calc-fld { margin-bottom: 9px; }
.calc-fld label { display: block; font-size: 11.5px; color: var(--grey); margin-bottom: 3px; font-weight: 600; }
.calc-fld input[type=text], .calc-fld input[type=date], .calc-fld input[type=number], .calc-fld textarea {
  width: 100%; padding: 6px 9px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: #fff; font-size: 12.5px;
}
.calc-fld textarea { min-height: 70px; resize: vertical; }
.calc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.calc-hint { font-size: 11px; color: var(--grey); margin-top: 2px; }
.calc-warn { color: #C00000; font-weight: 700; }
.calc-sched { width: 100%; border-collapse: collapse; margin-top: 4px; }
.calc-sched td { padding: 3px 2px; vertical-align: middle; }
.calc-sched td:first-child { font-size: 12px; white-space: nowrap; color: #212529; font-weight: 600; }
.calc-sched input[type=number] { width: 50px; padding: 4px 5px; border: 1px solid var(--border); border-radius: 5px; font-size: 12px; }
.calc-sched input[type=date] { width: 100%; padding: 4px 5px; border: 1px solid var(--border); border-radius: 5px; font-size: 11.5px; }
.calc-sched .fx { font-size: 11px; color: var(--grey); }
.calc-mini { font-size: 11.5px; padding: 4px 8px; background: #fff; border: 1px solid var(--border); color: #212529; border-radius: 5px; cursor: pointer; }
.calc-mini:hover { border-color: #9A2C22; color: #9A2C22; }
.calc-chk { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; margin: 8px 0; }
.calc-chk input { margin-top: 2px; }

.calc-sheetwrap { flex: 1; min-width: 0; }
.calc-sheet {
  background: #FFF; padding: 28px 34px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid var(--border); border-radius: 8px; overflow-x: auto;
}
.rp { font-family: "Times New Roman", Times, serif; font-size: 12.5pt; color: #000; line-height: 1.38; }
.rp p { margin: 0 0 6pt; text-align: justify; text-indent: 24pt; }
.rp p.ni { text-indent: 0; }
.rp .c { text-align: center; text-indent: 0; }
.rp .b { font-weight: bold; }
.rp .i { font-style: italic; }
.rp .sm { font-size: 10.5pt; }
.rp h3 { font-size: 12.5pt; margin: 10pt 0 4pt; text-indent: 0; font-weight: bold; page-break-after: avoid; }
.rp table { border-collapse: collapse; width: 100%; margin: 4pt 0 8pt; table-layout: fixed; }
.rp td, .rp th { border: 1px solid #000; padding: 3pt 5pt; font-size: 11pt; vertical-align: middle; }
.rp th { background: #d9d9d9; text-align: center; font-weight: bold; }
.rp td.n { text-align: right; font-variant-numeric: tabular-nums; }
.rp td.ctr { text-align: center; }
.rp tr.tot td { background: #f2f2f2; font-weight: bold; }
.rp table.bare { table-layout: auto; }
.rp table.bare td, .rp table.bare th { border: none; padding: 1pt 4pt; }
.rp .ghichu { font-size: 10.5pt; font-style: italic; text-indent: 0; margin-top: 2pt; }

@media (max-width: 900px) {
  .calc-desk { flex-direction: column; }
  .calc-console { width: 100%; }
  .calc-sheet { padding: 16px; }
}