:root { color-scheme: dark; --bg: 6 9 7; --fg: 255 255 255; --card: 14 19 18; --field: 21 27 26;
        --teal2: 27 165 173; --mint: 158 210 214; --ice: 207 233 236; --grey: 130 131 129; }
html.light { color-scheme: light; --bg: 241 245 245; --fg: 6 9 7; --card: 255 255 255; --field: 234 240 240;
             --teal2: 0 122 131; --mint: 0 112 120; --ice: 11 59 63; --grey: 95 100 99; }
html.light .text-amber-300 { color: #b45309; }
html.light .text-red-300 { color: #dc2626; }
html.light .text-emerald-300 { color: #047857; }
html.light .card { box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .04); }
html.light #modal { background: rgb(6 9 7 / .45); }
body { font-stretch: 100%; transition: background-color .2s, color .2s; }
.ext { font-stretch: 151%; letter-spacing: -0.01em; }
.caps { font-stretch: 140%; text-transform: uppercase; letter-spacing: 0.04em; }

.field { width: 100%; background: rgb(var(--field)); border: 1px solid rgb(var(--fg) / .09); border-radius: 12px;
         padding: 10px 12px; font-size: 14px; color: rgb(var(--fg)); outline: none; transition: border-color .15s; }
.field:focus { border-color: rgb(var(--teal2)); }
.field::placeholder { color: rgb(var(--grey) / .8); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #828381 50%), linear-gradient(135deg, #828381 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
input[type="date"].field::-webkit-calendar-picker-indicator { filter: invert(.7); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px;
       padding: 9px 18px; font-size: 13px; font-weight: 600; transition: all .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-primary { background: #008E98; color: #fff; }
.btn-primary:hover { background: #1BA5AD; }
.btn-ghost { border: 1px solid rgb(var(--fg) / .14); color: rgb(var(--fg)); }
.btn-ghost:hover { border-color: rgb(var(--mint)); color: rgb(var(--mint)); }
.btn-danger { border: 1px solid rgba(248,113,113,.4); color: #f87171; }
.btn-danger:hover { background: rgba(248,113,113,.1); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.card { background: rgb(var(--card)); border: 1px solid rgb(var(--fg) / .09); border-radius: 20px; }
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tab { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: rgb(var(--grey)); transition: color .15s, background .15s; }
.tab:hover { color: rgb(var(--fg)); }
.tab.active { color: rgb(var(--bg)); background: rgb(var(--ice)); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

.board td, .board th { border-right: 1px solid rgb(var(--fg) / .05); border-bottom: 1px solid rgb(var(--fg) / .05); }
.board .sticky-col { position: sticky; left: 0; z-index: 2; background: rgb(var(--card)); }
.board thead th { position: sticky; top: 0; z-index: 3; background: rgb(var(--card)); }
.board thead th.sticky-col { z-index: 4; }

.glow { background: radial-gradient(60% 60% at 20% 0%, rgba(0,142,152,.35) 0%, rgb(var(--bg) / 0) 70%), rgb(var(--bg)); }

#print-area { display: none; }
@media print {
  @page { size: 58mm 40mm; margin: 0; }
  body > *:not(#print-area) { display: none !important; }
  body { background: #fff !important; }
  #print-area { display: block !important; }
  .label { width: 58mm; height: 40mm; padding: 2mm 2.5mm; box-sizing: border-box; page-break-after: always;
           color: #000; background: #fff; font-family: Arial, sans-serif; display: flex; flex-direction: column; }
}