.fines-page, .fines-page * { box-sizing: border-box; }

.fines-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: rgba(255,255,255,.94);
  min-height: 100%;
  padding: 4px;
}

.fines-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.fines-header h1 { margin: 0; font-size: 30px; font-weight: 800; }
.fines-header p { margin: 6px 0 0; opacity: .72; }
.fines-header-actions { display:flex; gap:10px; flex-wrap:wrap; }

.fines-kpis {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

.fine-kpi {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.fine-kpi.danger { border-color: rgba(239,68,68,.25); }
.fine-kpi.success { border-color: rgba(16,185,129,.25); }
.fine-kpi.warning { border-color: rgba(245,158,11,.25); }
.fine-kpi .kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity:.65; }
.fine-kpi .kpi-value { margin-top: 8px; font-size: 28px; font-weight: 800; }
.fine-kpi .kpi-sub { margin-top: 4px; font-size: 13px; opacity:.66; }

.fines-card {
  background: linear-gradient(180deg, rgba(19,23,33,.95), rgba(12,16,24,.96));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(0,0,0,.26);
  overflow: hidden;
}

.fines-card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.fines-card-head h3 { margin:0; font-size:18px; }
.fines-card-head .sub { opacity:.65; font-size:13px; }

.fines-toolbar {
  display:grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(140px, .8fr)) auto;
  gap:10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.fine-input, .fine-select, .fine-textarea {
  width:100%;
  background: rgba(255,255,255,.055);
  color:#f3f4f6;
  border:1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  outline:none;
  padding: 12px 14px;
  font-size:14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.fine-textarea { resize: vertical; min-height: 112px; }

.fine-input:focus, .fine-select:focus, .fine-textarea:focus {
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
  background: rgba(255,255,255,.075);
}

.fine-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.82) 50%),
    linear-gradient(135deg, rgba(255,255,255,.82) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.fine-select option {
  background: #111827;
  color: #f3f4f6;
}

.fines-table-wrap {
  max-height: calc(100vh - 360px);
  overflow: auto;
}

.fines-table {
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  min-width: 1180px;
}

.fines-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(10,13,20,.98);
  text-align:left;
  padding: 13px 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.fines-table tbody td {
  padding: 14px;
  border-bottom:1px solid rgba(255,255,255,.055);
  vertical-align: top;
}

.fines-table tbody tr:hover { background: rgba(255,255,255,.03); }

.fine-number {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  background: rgba(59,130,246,.12);
  color: #bfdbfe;
  border:1px solid rgba(59,130,246,.18);
}

.fine-subinfo { font-size: 12px; opacity: .64; margin-top: 4px; }
.fine-title { font-weight: 700; }
.fine-money { font-weight: 800; }
.fine-balance.positive { color: #fca5a5; }
.fine-balance.zero { color: #86efac; }

.fine-status {
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
  white-space: nowrap;
}

.fine-status.unpaid { color:#fde68a; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.24); }
.fine-status.partial { color:#c4b5fd; background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.24); }
.fine-status.paid { color:#86efac; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.24); }
.fine-status.contested { color:#93c5fd; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.24); }
.fine-status.cancelled { color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.24); }

.fine-actions { display:flex; gap:8px; flex-wrap:wrap; }

.fine-btn, .fine-btn-primary, .fine-btn-danger {
  border:none;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.fine-btn:hover, .fine-btn-primary:hover, .fine-btn-danger:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.fine-btn { background: rgba(255,255,255,.08); color:#f3f4f6; }
.fine-btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); color:#fff; }
.fine-btn-danger { background: linear-gradient(135deg, #dc2626, #b91c1c); color:#fff; }

.fmodal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,8,14,.66);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  padding: 18px;
}

.fmodal-overlay.active { display:flex; }

.fmodal {
  width: min(1360px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(17,22,31,.98), rgba(11,15,23,.99));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  display:flex;
  flex-direction:column;
}

.fmodal.view { width:min(1120px, 94vw); }

.fmodal-head, .fmodal-foot {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.fmodal-foot {
  border-bottom:none;
  border-top: 1px solid rgba(255,255,255,.07);
  align-items:center;
  justify-content:flex-end;
}

.fmodal-head h2 { margin:0; font-size:24px; }
.fmodal-head p { margin:5px 0 0; opacity:.68; }

.fmodal-close {
  width:42px;
  height:42px;
  border-radius:14px;
  border:none;
  cursor:pointer;
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
}

.fmodal-body {
  padding: 18px;
  overflow: auto;
}

.fines-form-grid {
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:start;
}

.fines-col { display:flex; flex-direction:column; gap:18px; min-width:0; }

.fines-section {
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.03);
  border-radius: 20px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.fines-section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom: 14px;
}

.fines-section-title h3 { margin:0; font-size:16px; }
.fines-section-title .hint { opacity:.62; font-size:12px; }

.fine-grid-2, .fine-grid-3 { display:grid; gap:12px; }
.fine-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fine-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fine-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.fine-field.full { grid-column: 1 / -1; }
.fine-field label { font-size:13px; color: rgba(255,255,255,.78); }
.fine-field .caption { font-size:12px; opacity:.58; }

.citizen-pick { display:grid; grid-template-columns: 1fr 340px; gap:12px; }

.pick-results, .fine-items-list {
  border:1px solid rgba(255,255,255,.08);
  background: rgba(6,10,16,.45);
  border-radius:16px;
  max-height: 220px;
  overflow:auto;
  padding: 8px;
}

.pick-hint, .fine-empty-state {
  padding: 14px;
  text-align:center;
  opacity:.6;
  font-size:13px;
}

.pick-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px;
  border-radius: 14px;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}

.pick-row:hover { background: rgba(255,255,255,.05); transform: translateX(2px); }

.pick-name { font-weight:700; }
.pick-sub, .pick-meta { font-size:12px; opacity:.66; }

.picked-card {
  border:1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.08);
  border-radius:18px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:100%;
}

.picked-name { font-size:18px; font-weight:800; }
.picked-sub { font-size:13px; opacity:.72; }
.picked-actions { margin-top:auto; }

.fine-item-row {
  display:grid;
  grid-template-columns: 1.25fr .9fr .6fr .7fr auto;
  gap:10px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  margin-bottom: 10px;
  align-items:end;
}

.fine-item-total {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 86px;
  font-weight:800;
  color:#bfdbfe;
}

.fine-summary-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top: 12px;
}

.fine-summary-card {
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}

.fine-summary-card .label { font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.62; }
.fine-summary-card .value { margin-top:6px; font-size:22px; font-weight:800; }
.fine-summary-card .value.negative { color:#fca5a5; }
.fine-summary-card .value.positive { color:#86efac; }

.catalog-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  max-height: 260px;
  overflow:auto;
  padding-right: 2px;
}

.catalog-card {
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.catalog-card h4 { margin:0; font-size:14px; }
.catalog-card .meta { font-size:12px; opacity:.64; }
.catalog-card .price { font-weight:800; color:#bfdbfe; }

.fine-view-grid {
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
}

.fine-view-card {
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  padding:16px;
}

.fine-view-card h3 { margin:0 0 12px; font-size:16px; }

.view-row {
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}

.view-row:last-child { border-bottom:none; }
.view-k { opacity:.62; }
.view-v { font-weight:600; }

.view-note {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  white-space: pre-wrap;
  line-height: 1.5;
}

.view-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.view-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 700;
}

.fines-table-wrap::-webkit-scrollbar,
.pick-results::-webkit-scrollbar,
.fine-items-list::-webkit-scrollbar,
.catalog-grid::-webkit-scrollbar,
.fmodal-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.fines-table-wrap::-webkit-scrollbar-thumb,
.pick-results::-webkit-scrollbar-thumb,
.fine-items-list::-webkit-scrollbar-thumb,
.catalog-grid::-webkit-scrollbar-thumb,
.fmodal-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.fines-table-wrap::-webkit-scrollbar-track,
.pick-results::-webkit-scrollbar-track,
.fine-items-list::-webkit-scrollbar-track,
.catalog-grid::-webkit-scrollbar-track,
.fmodal-body::-webkit-scrollbar-track {
  background: rgba(255,255,255,.03);
  border-radius:999px;
}

.fmodal-close:disabled,
.fine-btn:disabled,
.fine-btn-primary:disabled,
.fine-btn-danger:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}

@media (max-width: 1220px) {
  .fines-kpis,
  .fines-toolbar,
  .fines-form-grid,
  .fine-view-grid,
  .citizen-pick,
  .fine-grid-3 { grid-template-columns: 1fr 1fr; }

  .catalog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .fines-kpis,
  .fines-toolbar,
  .fines-form-grid,
  .fine-view-grid,
  .citizen-pick,
  .fine-grid-2,
  .fine-grid-3,
  .fine-item-row,
  .fine-summary-grid { grid-template-columns: 1fr; }

  .fmodal { width: 100%; max-height: 96vh; }
}

.fmodal-confirm {
  width: min(560px, 94vw);
  max-height: 90vh;
}

.fine-confirm-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(239,68,68,.18);
  background: linear-gradient(180deg, rgba(239,68,68,.08), rgba(255,255,255,.03));
}

.fine-confirm-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: #fecaca;
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.22);
}

.fine-confirm-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fine-confirm-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.58);
}

.fine-confirm-text {
  color: rgba(255,255,255,.92);
  line-height: 1.55;
}