*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; }

.hidden{ display:none !important; }
.block{ display:block; }
.inline-block{ display:inline-block; }
.flex{ display:flex; }
.grid{ display:grid; }
.fixed{ position:fixed; }
.absolute{ position:absolute; }
.sticky{ position:sticky; }
.inset-0{ inset:0; }
.inset-x-0{ left:0; right:0; }
.top-0{ top:0; }
.top-6{ top:1.5rem; }
.top-10{ top:2.5rem; }
.top-16{ top:4rem; }
.bottom-0{ bottom:0; }
.z-40{ z-index:40; }
.z-50{ z-index:50; }
.z-sheet{ z-index:70; }
.toast-layer{ z-index:10000; }

.pointer-events-none{ pointer-events:none; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-3{ margin-top:.75rem; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:.75rem; }
.max-w-5xl{ max-width:64rem; }
.min-w-0{ min-width:0; }
.w-full{ width:100%; }
.w-3{ width:.75rem; }
.w-5{ width:1.25rem; }
.w-20{ width:5rem; }
.h-3{ height:.75rem; }
.flex-1{ flex:1 1 0%; }
.shrink-0{ flex-shrink:0; }
.flex-col{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.items-start{ align-items:flex-start; }
.items-center{ align-items:center; }
.items-end{ align-items:flex-end; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }
.gap-2{ gap:.5rem; }
.gap-3{ gap:.75rem; }
.gap-4{ gap:1rem; }
.gap-x-4{ column-gap:1rem; }
.gap-y-1{ row-gap:.25rem; }
.space-y-2 > * + *{ margin-top:.5rem; }
.space-y-3 > * + *{ margin-top:.75rem; }
.space-y-4 > * + *{ margin-top:1rem; }

.grid-cols-1{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.p-2{ padding:.5rem; }
.p-3{ padding:.75rem; }
.p-4{ padding:1rem; }
.px-2{ padding-left:.5rem; padding-right:.5rem; }
.px-3{ padding-left:.75rem; padding-right:.75rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.py-1{ padding-top:.25rem; padding-bottom:.25rem; }
.py-1\.5{ padding-top:.375rem; padding-bottom:.375rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; }
.py-3{ padding-top:.75rem; padding-bottom:.75rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }

.rounded{ border-radius:.25rem; }
.rounded-md{ border-radius:.375rem; }
.rounded-lg{ border-radius:.5rem; }
.rounded-xl{ border-radius:.75rem; }
.rounded-full{ border-radius:999px; }
.rounded-t-2xl{ border-top-left-radius:1rem; border-top-right-radius:1rem; }
.border{ border:1px solid #d8e0ea; }
.border-b{ border-bottom:1px solid #e2e8f0; }
.border-t{ border-top:1px solid #e2e8f0; }
.border-t-2{ border-top-width:2px; border-top-style:solid; border-color:#e2e8f0; }
.border-dashed{ border-style:dashed; }
.border-slate-100{ border-color:#eef2f7; }
.border-slate-200{ border-color:#e2e8f0; }
.border-slate-300{ border-color:#cbd5e1; }
.last\:border-0:last-child{ border:0; }
.shadow-sm{ box-shadow:0 1px 2px rgba(15,23,42,.08); }
.shadow{ box-shadow:0 10px 30px rgba(15,23,42,.14); }

.bg-slate-50{ background:#f8fafc; }
.bg-slate-900{ background:#0f172a; }
.bg-white{ background:#fff; }
.bg-white\/90{ background:rgba(255,255,255,.92); }
.bg-black\/30{ background:rgba(15,23,42,.34); }
.text-xs{ font-size:.75rem; }
.text-sm{ font-size:.875rem; }
.text-base{ font-size:1rem; }
.font-medium{ font-weight:500; }
.font-semibold{ font-weight:650; }
.text-left{ text-align:left; }
.text-white{ color:#fff; }
.text-red-600{ color:#dc2626; }
.text-slate-400{ color:#94a3b8; }
.text-slate-500{ color:#64748b; }
.text-slate-600{ color:#475569; }
.text-slate-700{ color:#334155; }
.text-slate-800{ color:#1e293b; }
.text-slate-900{ color:#0f172a; }
.hover\:bg-slate-50:hover{ background:#f8fafc; }
.hover\:bg-slate-100:hover{ background:#f1f5f9; }
.hover\:bg-slate-800:hover{ background:#1e293b; }
.hover\:underline:hover{ text-decoration:underline; }
.backdrop-blur{ backdrop-filter:blur(10px); }

.brand{
  letter-spacing:0;
  white-space:nowrap;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.5rem;
  padding:.375rem .75rem;
  font-size:.875rem;
  color:#0f172a;
  transition:background-color .16s ease, color .16s ease;
}
.nav-btn:hover{ background:rgba(15,23,42,.06); }
.nav-btn-active{ background:rgba(15,23,42,.09); }

.card{
  border:1px solid #e2e8f0;
  border-radius:.75rem;
  background:#fff;
  padding:.75rem;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}
a.card:hover{
  border-color:#cbd5e1;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  transform:translateY(-1px);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.25rem;
  border-radius:.5rem;
  padding:.5rem .75rem;
  font-size:.875rem;
  border:1px solid #cbd5e1;
  background:#fff;
  color:#0f172a;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, opacity .16s ease;
}
.btn:hover{ background:#f8fafc; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; }
.btn:disabled:hover{ background:#fff; }
.btn-primary{ background:#0f172a; color:#fff; border-color:#0f172a; }
.btn-primary:hover{ background:#1e293b; }
.btn-danger{ border-color:#fecaca; color:#b91c1c; }
.btn-danger:hover{ background:#fef2f2; }

.input{
  width:100%;
  min-height:2.35rem;
  border-radius:.5rem;
  border:1px solid #cbd5e1;
  background:#fff;
  padding:.5rem .75rem;
  font-size:.875rem;
  color:#0f172a;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.input:focus,
input:focus,
select:focus{
  outline:none;
  border-color:#64748b;
  box-shadow:0 0 0 3px rgba(100,116,139,.14);
}

.label{ display:block; font-size:.875rem; color:#334155; margin-bottom:.25rem; }
.small{ font-size:.875rem; color:#475569; }

.tab-btn{
  flex:1;
  border-radius:.5rem;
  padding:.5rem .75rem;
  font-size:.875rem;
  border:1px solid #cbd5e1;
  color:#0f172a;
  background:#fff;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tab-btn-active{ background:#0f172a; border-color:#0f172a; color:#fff; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.34);
  animation:fade-in .14s ease-out;
}
.modal-panel{
  max-height:calc(100vh - 3rem);
  max-height:calc(100svh - 3rem);
  max-height:calc(100dvh - 3rem);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  animation:panel-in .16s ease-out;
}
.modal-panel-sm{ width:min(520px, calc(100% - 2rem)); }
.modal-panel-lg{ width:min(920px, calc(100% - 2rem)); }
.sheet-panel{
  max-height:80vh;
  overflow:auto;
  animation:sheet-in .18s ease-out;
}

#toast-inner{
  animation:toast-in .16s ease-out;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3.4rem;
  border-radius:999px;
  border:1px solid #e2e8f0;
  padding:.125rem .5rem;
  font-size:.75rem;
  line-height:1.2rem;
  font-weight:650;
  white-space:nowrap;
}
.status-signing{ color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
.status-full{ color:#854d0e; background:#fefce8; border-color:#fde68a; }
.status-started{ color:#1d4ed8; background:#eff6ff; border-color:#bfdbfe; }
.status-ended{ color:#475569; background:#f8fafc; border-color:#cbd5e1; }

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:.875rem;
}
.data-table th,
.data-table td{
  border-bottom:1px solid #e2e8f0;
  padding:.5rem .4rem;
  text-align:left;
  vertical-align:top;
}
.data-table th{
  color:#475569;
  font-weight:650;
  background:#f8fafc;
}
.data-table tr:last-child td{ border-bottom:0; }

.slot-cell{
  border:1px solid #e2e8f0;
  border-radius:.75rem;
  background:#fff;
  padding:.5rem;
  min-height:78px;
  transition:background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .12s ease, opacity .16s ease;
}
.slot-cell:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
  box-shadow:0 3px 12px rgba(15,23,42,.05);
  transform:translateY(-1px);
}
.slot-cell:active{ transform:translateY(0); }
.slot-cell[aria-disabled="true"]{ opacity:.6; pointer-events:none; }
.slot-empty{ background:#fff; }
.slot-occupied{ background:#fbfdff; }
.slot-mine{ border-color:#93c5fd; background:#eff6ff; }
.slot-title{ font-size:.75rem; color:#64748b; margin-bottom:.25rem; }
.slot-line{ font-size:.875rem; line-height:1.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-muted{ color:#64748b; }
.grid-5x5{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; }

@keyframes fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes panel-in{
  from{ opacity:0; transform:translateY(-6px) scale(.99); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes sheet-in{
  from{ transform:translateY(18px); }
  to{ transform:translateY(0); }
}
@keyframes toast-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@media (min-width:640px){
  .sm\:flex-row{ flex-direction:row; }
  .sm\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .sm\:items-center{ align-items:center; }
  .sm\:justify-between{ justify-content:space-between; }
}

@media (min-width:768px){
  .md\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .md\:col-span-2{ grid-column:span 2 / span 2; }
}

@media (min-width:1024px){
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lg\:col-span-1{ grid-column:span 1 / span 1; }
  .lg\:col-span-2{ grid-column:span 2 / span 2; }
}

@media (max-width:768px){
  .grid-5x5{ gap:.375rem; }
  .slot-cell{ padding:.375rem; min-height:68px; border-radius:.625rem; }
  .slot-title{ font-size:.68rem; }
  .slot-line{ font-size:.75rem; line-height:1rem; }
}

@media (max-width:520px){
  .brand{ max-width:8rem; overflow:hidden; text-overflow:ellipsis; }
  .nav-btn{ padding:.35rem .5rem; }
  .card{ padding:.65rem; border-radius:.625rem; }
  .btn{ padding:.45rem .6rem; }
  main.px-4{ padding-left:.75rem; padding-right:.75rem; }
  .modal-panel-sm,.modal-panel-lg{ width:calc(100% - 1rem); }
}