:root {
  color-scheme: dark;
  --navy: #081a33;
  --navy-light: #15385f;
  --panel: rgba(16, 40, 70, .94);
  --orange: #ff671f;
  --text: #f7f9fc;
  --muted: #b8c3d3;
  --green: #1f9d55;
  --yellow: #e0a72c;
  --red: #d64545;
  --blue: #2980d9;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(34, 82, 130, .46), transparent 36%),
    linear-gradient(145deg, #07172d 0%, #102e51 55%, #07172d 100%);
  color: var(--text);
}
.board-page { min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
header { padding: 20px 28px; border-bottom: 3px solid var(--orange); display: flex; justify-content: space-between; align-items: center; gap: 16px; background: rgba(4, 17, 35, .72); }
h1 { margin: 0; color: var(--orange); letter-spacing: .045em; font-size: clamp(1.65rem, 2.4vw, 2.7rem); }
.subtle { color: var(--muted); }
.header-time { display: flex; flex-direction: column; align-items: flex-end; color: var(--muted); }
.header-time strong { color: white; font-size: clamp(1.35rem, 2vw, 2.1rem); }
.board-main { flex: 1; min-height: 0; padding: 18px 26px 12px; display: flex; flex-direction: column; }
main:not(.board-main) { padding: 24px 28px 40px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.board-cards { grid-template-columns: repeat(5, minmax(140px, 1fr)); }
.card { background: var(--panel); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; padding: 14px 16px; box-shadow: 0 10px 25px rgba(0,0,0,.18); }
.metric-card { text-align: center; border-top: 4px solid rgba(255,103,31,.65); }
.metric-card span { color: var(--muted); font-size: clamp(.8rem, 1vw, 1.05rem); font-weight: 800; letter-spacing: .07em; }
.card strong { display: block; font-size: clamp(2rem, 3.3vw, 3.6rem); color: var(--orange); margin-top: 3px; line-height: 1; }
.overdue-card strong { color: #ff7777; }
.metric-card.current { border-color: rgba(31,157,85,.85); }
.metric-card.current strong { color: #86efac; font-size: clamp(1.55rem, 2.5vw, 2.7rem); }
.metric-card.due-soon { border-color: rgba(224,167,44,.9); }
.metric-card.due-soon strong { color: #fde68a; font-size: clamp(1.55rem, 2.5vw, 2.7rem); }
.metric-card.stale { border-color: rgba(214,69,69,.95); }
.metric-card.stale strong { color: #ff8d8d; font-size: clamp(1.35rem, 2.2vw, 2.4rem); }
.aging-strip { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; background: rgba(4,17,35,.68); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; font-size: 1.05rem; }
.aging-strip strong { color: white; font-size: 1.35rem; margin-left: 5px; }
.last-upload { margin-left: auto; color: var(--muted); }
.dot { width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 6px; }
.green-dot { background: var(--green); }.yellow-dot { background: var(--yellow); }.red-dot { background: var(--red); }
.recognition { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 12px; border-radius: 10px; background: rgba(31,157,85,.16); border: 1px solid rgba(134,239,172,.35); }
.recognition-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--green); font-weight: 900; font-size: 1.35rem; }
.recognition strong, .recognition span { display: block; }.recognition strong { color: #a7f3d0; font-size: 1.1rem; }
.table-wrap { overflow-x: auto; background: var(--panel); border-radius: 12px; border: 1px solid rgba(255,255,255,.12); }
.table-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.table-scroll::-webkit-scrollbar { display: none; }
table { width: 100%; border-collapse: collapse; min-width: 850px; }
th, td { padding: 14px 17px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; font-size: clamp(1rem, 1.25vw, 1.35rem); }
th { position: sticky; top: 0; z-index: 2; background: #102846; color: var(--orange); text-transform: uppercase; font-size: clamp(.82rem, 1vw, 1rem); letter-spacing: .07em; }
tr:last-child td { border-bottom: 0; }
tr:nth-child(even) { background: rgba(255,255,255,.025); }
.overdue-row { animation: overduePulse 4s ease-in-out infinite; }
@keyframes overduePulse { 0%, 80%, 100% { background-color: transparent; } 90% { background-color: rgba(214,69,69,.13); } }
.provider strong { font-size: 1.08em; }.call-number { font-weight: 800; letter-spacing: .03em; }
.badge { display: inline-block; padding: 7px 13px; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.badge.open { background: rgba(41,128,217,.27); color: #a8d5ff; border: 1px solid rgba(86,170,255,.4); }
.badge.qa { background: rgba(255,103,31,.24); color: #ffc09d; border: 1px solid rgba(255,132,73,.45); }
.age { min-width: 128px; text-align: center; color: white; }
.age.green { background: var(--green); }.age.yellow { background: var(--yellow); color: #111; }.age.red { background: var(--red); }
.empty { padding: 42px; text-align: center; color: var(--muted); font-size: 1.25rem; }
.board-footer { display: flex; justify-content: space-between; gap: 20px; padding: 9px 26px; background: rgba(4,17,35,.82); border-top: 1px solid rgba(255,255,255,.1); color: var(--muted); font-size: .9rem; }
button, .button { background: var(--orange); color: #111; border: 0; border-radius: 8px; padding: 11px 16px; font-weight: 700; cursor: pointer; text-decoration: none; }
button.secondary { background: #d9e2ef; }.danger { background: var(--red); color: white; }button:disabled { opacity: .5; cursor: not-allowed; }
.upload-panel { max-width: 1000px; margin: 0 auto; background: var(--panel); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 24px; }
.dropzone { border: 2px dashed rgba(255,255,255,.3); border-radius: 12px; padding: 34px; text-align: center; margin: 18px 0; transition: .2s ease; }
.dropzone.dragover { border-color: var(--orange); background: rgba(255,103,31,.08); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }.notice { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: rgba(255,255,255,.08); }.notice.error { background: rgba(214,69,69,.24); }.preview { margin-top: 20px; }
@media (max-width: 1050px) { .board-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .cards, .board-cards { grid-template-columns: repeat(2, 1fr); } header { align-items: flex-start; flex-direction: column; }.header-time { align-items: flex-start; }.board-footer { flex-direction: column; gap: 4px; }.last-upload { margin-left: 0; } }