body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #080303;
  color: #FDFBF7;
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(136, 19, 19, 0.45) 0%, transparent 60%),
    radial-gradient(circle at 90% 90%, rgba(217, 119, 6, 0.15) 0%, transparent 50%);
}

.font-luxury { font-family: 'Cinzel', Georgia, serif; }
.portal-card { background: linear-gradient(145deg, rgba(28, 12, 12, 0.85) 0%, rgba(18, 6, 6, 0.95) 100%); border: 1px solid rgba(212, 175, 55, 0.25); backdrop-filter: blur(16px); }

#historyDetailModal:not(.hidden) {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(7, 5, 5, 0.7);
  overflow: hidden;
}

.history-detail-card {
  position: relative;
  width: min(100%, 36rem);
  background: linear-gradient(180deg, rgba(35, 14, 10, 0.99) 0%, rgba(18, 9, 7, 0.97) 100%);
  border: 1px solid rgba(214, 175, 78, 0.26);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(214, 175, 78, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
  max-height: min(74vh, 680px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
}

.history-detail-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 28%, transparent 72%, rgba(255,255,255,0.02));
  pointer-events: none;
}

.history-detail-scroll { overflow-y: auto; padding-right: 0.25rem; -webkit-overflow-scrolling: touch; }
.history-detail-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0.1rem 0.8rem; border-bottom: 1px solid rgba(214, 175, 78, 0.18); z-index: 1; }
.history-detail-header-title { display: flex; align-items: center; gap: 0.65rem; }
.history-detail-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 0.65rem; background: linear-gradient(135deg, rgba(214,175,78,0.18), rgba(214,175,78,0.05)); border: 1px solid rgba(214,175,78,0.25); color: #f7d78c; font-size: 0.7rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.history-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.9rem; }
.history-detail-item { position: relative; display: flex; flex-direction: column; gap: 0.38rem; min-height: 76px; padding: 0.72rem 0.82rem; border-radius: 0.9rem; background: linear-gradient(180deg, rgba(18, 12, 11, 0.8) 0%, rgba(11, 8, 8, 0.72) 100%); border: 1px solid rgba(214, 175, 78, 0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); overflow: hidden; }
.history-detail-item::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(214,175,78,0.55), transparent 55%); opacity: 0.7; }
.history-detail-item--emerald { border-color: rgba(16, 185, 129, 0.28); background: linear-gradient(180deg, rgba(9, 28, 22, 0.76) 0%, rgba(8, 18, 16, 0.7) 100%); }
.history-detail-item--red { border-color: rgba(248, 113, 113, 0.28); background: linear-gradient(180deg, rgba(38, 12, 12, 0.76) 0%, rgba(21, 9, 10, 0.7) 100%); }
.history-detail-item--blue { border-color: rgba(96, 165, 250, 0.28); background: linear-gradient(180deg, rgba(12, 20, 35, 0.78) 0%, rgba(9, 14, 24, 0.72) 100%); }
.history-detail-item--amber { border-color: rgba(245, 158, 11, 0.22); background: linear-gradient(180deg, rgba(35, 19, 7, 0.72) 0%, rgba(22, 12, 6, 0.68) 100%); }
.history-detail-label { display: block; font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: rgba(252, 218, 129, 0.82); }
.history-detail-value { display: block; font-size: 0.82rem; line-height: 1.45; font-weight: 800; color: #f8f5f2; word-break: break-word; letter-spacing: 0.01em; }
.history-detail-note { margin-top: 0.9rem; padding: 0.8rem 0.85rem 0.75rem; border-radius: 0.9rem; border: 1px solid rgba(214, 175, 78, 0.18); background: linear-gradient(180deg, rgba(15, 9, 8, 0.68) 0%, rgba(12, 8, 8, 0.62) 100%); }
.history-detail-photo { margin-top: 0.9rem; padding: 0.8rem; border-radius: 0.9rem; border: 1px solid rgba(214, 175, 78, 0.18); background: linear-gradient(180deg, rgba(14, 11, 11, 0.7) 0%, rgba(10, 8, 8, 0.62) 100%); }
.gold-gradient-text { background: linear-gradient(135deg, #FFF0B3 0%, #D4AF37 50%, #AA8010 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.6); }

.history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1rem; border: 1px solid rgba(212, 175, 55, 0.15); background: rgba(2, 6, 23, 0.45); }
.history-table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; }
.history-table th:first-child,
.history-table td:first-child { width: 16%; }
.history-table th:last-child,
.history-table td:last-child { width: 8%; }
.history-table th,
.history-table td { padding: 0.7rem 0.5rem; vertical-align: top; word-break: break-word; overflow-wrap: anywhere; white-space: normal; border-bottom: 1px solid rgba(212, 175, 55, 0.12); }
.history-table thead th { position: sticky; top: 0; z-index: 1; background: rgba(17, 24, 39, 0.9); backdrop-filter: blur(8px); }
.history-table tbody tr:hover { background: rgba(120, 53, 15, 0.12); }
.history-expand-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; margin-right: 0.35rem; border: 1px solid rgba(212, 175, 55, 0.28); border-radius: 0.45rem; color: #f0b93e; background: rgba(212, 175, 55, 0.08); transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease; vertical-align: middle; }
.history-expand-toggle:hover { border-color: rgba(255, 214, 102, 0.7); background: rgba(212, 175, 55, 0.2); }
.history-expand-toggle.is-expanded { transform: rotate(180deg); border-color: rgba(53, 211, 153, 0.55); color: #35d399; background: rgba(53, 211, 153, 0.12); }
.history-detail-inline { background: rgba(18, 12, 10, 0.94); border-top: 1px solid rgba(212, 175, 55, 0.18); border-bottom: 1px solid rgba(212, 175, 55, 0.18); }
.history-detail-inline-card { margin: 0.45rem 0.5rem 0.55rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.9rem; background: linear-gradient(135deg, rgba(22, 24, 29, 0.98), rgba(12, 14, 18, 0.98)); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 3px 0 0 #d4af37; overflow: hidden; }
.history-detail-inline-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.025); }
.history-detail-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; padding: 0.7rem 0.8rem 0.65rem; }
.history-detail-inline-item { padding: 0.55rem 0.6rem; border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.09); border-left: 3px solid rgba(212, 175, 55, 0.75); background: rgba(255, 255, 255, 0.035); min-height: 62px; }
.history-detail-inline-label { display: block; font-size: 0.48rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(252, 218, 129, 0.85); font-weight: 700; }
.history-detail-inline-value { display: block; margin-top: 0.28rem; font-size: 0.72rem; font-weight: 800; color: #f8f5f2; word-break: break-word; line-height: 1.3; }
.history-detail-inline-item:nth-child(odd) { background: rgba(255, 255, 255, 0.05); }
.history-detail-inline-item:nth-child(1),
.history-detail-inline-item:nth-child(2),
.history-detail-inline-item:nth-child(4),
.history-detail-inline-item:nth-child(5),
.history-detail-inline-item:nth-child(6),
.history-detail-inline-item:nth-child(9) { border-left-color: #f0b93e; }
body:not(.admin-authenticated) > header,
body:not(.admin-authenticated) > main,
body:not(.admin-authenticated) > footer { display: none; }
.history-detail-inline-item:nth-child(3),
.history-detail-inline-item:nth-child(10) { border-left-color: #35d399; }
.history-detail-inline-item:nth-child(7) { border-left-color: #f05b67; }
.history-detail-inline-item:nth-child(8) { border-left-color: #5795f6; }
.history-detail-inline-item:nth-child(11),
.history-detail-inline-item:nth-child(12) { border-left-color: #aab4c3; background: rgba(255, 255, 255, 0.045); }
.history-detail-photo-button { position: relative; display: block; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.28); border-radius: 0.65rem; background: rgba(0, 0, 0, 0.3); cursor: zoom-in; }
.history-detail-photo-button::after { content: '\f00e'; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-family: 'Font Awesome 6 Free'; font-size: 0.8rem; font-weight: 900; background: rgba(0, 0, 0, 0.42); opacity: 0; transition: opacity 160ms ease; }
.history-detail-photo-button:hover::after,
.history-detail-photo-button:focus-visible::after { opacity: 1; }
.document-photo-viewer { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(2, 4, 8, 0.92); }
.document-photo-viewer.hidden { display: none; }
.document-photo-viewer img { max-width: min(94vw, 1200px); max-height: 88vh; object-fit: contain; border: 1px solid rgba(212, 175, 55, 0.4); border-radius: 0.8rem; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.document-photo-viewer-close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.7rem; color: white; background: rgba(15, 23, 42, 0.8); font-size: 1rem; }
.document-photo-viewer-close:hover { border-color: rgba(212, 175, 55, 0.65); color: #fcd681; }
.history-table td:nth-child(9),
.history-table td:nth-child(10) { max-width: 120px; }
.history-table td:first-child { line-height: 1.35; }

@media (max-width: 640px) {
  .history-table { min-width: 780px; }
  .history-table th,
  .history-table td { padding-left: 0.35rem; padding-right: 0.35rem; font-size: 9.5px; line-height: 1.35; }
}