:root {
  color-scheme: light;
  --sta: #51358c;
  --sta-dark: #34245a;
  --gold: #f2a654;
  --surface: #f7f7fa;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--surface); color: #23202a; }
[x-cloak] { display: none !important; }

.sta-grid-bg {
  background-image:
    radial-gradient(circle at 92% 10%, rgba(242, 166, 84, .23), transparent 23rem),
    radial-gradient(circle at 7% 91%, rgba(118, 84, 173, .46), transparent 27rem),
    linear-gradient(145deg, #2e1e51 0%, #51358c 55%, #66429e 100%);
}

.sta-grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .16;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.card {
  border: 1px solid #ebe7f1;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 36px rgba(49, 31, 82, .06);
}

.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(49, 31, 82, .12); border-color: #dccfed; }

.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border-radius: .75rem;
  padding: .65rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  transition: all .18s ease;
}
.btn-primary { background: var(--sta); color: #fff; box-shadow: 0 8px 18px rgba(81, 53, 140, .2); }
.btn-primary:hover { background: #402a6d; transform: translateY(-1px); }
.btn-secondary { background: #fff7e8; color: #9a5700; border: 1px solid #f9d99f; }
.btn-secondary:hover { background: #ffedc8; }
.btn-ghost { background: #fff; color: #4d4655; border: 1px solid #ded9e5; }
.btn-ghost:hover { color: var(--sta); border-color: #bea9dd; background: #faf8fd; }
.btn-danger { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.btn-danger:hover { background: #ffe4e6; }
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled { cursor: not-allowed; opacity: .45; transform: none; }

.form-label { display: block; margin-bottom: .45rem; color: #4e4757; font-size: .82rem; font-weight: 700; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  border: 1px solid #dcd7e3;
  border-radius: .75rem;
  background: #fff;
  padding: .72rem .85rem;
  color: #28222f;
  font-size: .9rem;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #7654ad; box-shadow: 0 0 0 3px rgba(118, 84, 173, .12); }
.form-textarea { min-height: 7rem; resize: vertical; }

.badge { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .62rem; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.badge::before { content: ''; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; opacity: .8; }

.table-shell { overflow: hidden; border: 1px solid #ebe7f1; border-radius: 1rem; background: #fff; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #faf9fc; color: #706879; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: .8rem 1rem; }
.data-table td { border-top: 1px solid #efecf3; color: #4d4655; font-size: .84rem; padding: .9rem 1rem; vertical-align: middle; }
.data-table tbody tr { transition: background .16s ease; }
.data-table tbody tr:hover { background: #fcfbfe; }

.nav-link { display: flex; align-items: center; gap: .75rem; border-radius: .75rem; padding: .68rem .8rem; color: #d9d0e8; font-size: .84rem; font-weight: 600; transition: all .17s ease; }
.nav-link:hover { background: rgba(255,255,255,.09); color: white; }
.nav-link.active { background: linear-gradient(100deg, rgba(242,166,84,.28), rgba(255,255,255,.1)); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.nav-link svg { width: 1.1rem; height: 1.1rem; }

.metric-spark { position: relative; overflow: hidden; }
.metric-spark::after { content: ''; position: absolute; right: -1.7rem; bottom: -2.4rem; width: 7rem; height: 7rem; border-radius: 999px; background: currentColor; opacity: .055; }

.timeline-line { position: absolute; left: 1.25rem; top: 2.5rem; bottom: -1rem; width: 2px; background: #e8e2f0; }
.progress-stripes { background-image: linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.16) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }

.lot-image {
  background:
    linear-gradient(to top, rgba(28,19,44,.66), transparent 55%),
    radial-gradient(circle at 75% 30%, rgba(242,166,84,.44), transparent 30%),
    linear-gradient(145deg, #4c3e61, #21172e);
}

.shimmer { background: linear-gradient(90deg, #f5f2f8 25%, #fff 38%, #f5f2f8 60%); background-size: 400% 100%; animation: shimmer 1.6s infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 767px) {
  .data-table { min-width: 760px; }
  .mobile-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media print {
  stas-sidebar, stas-header, .no-print { display: none !important; }
  .lg\:pl-72 { padding-left: 0 !important; }
  body { background: white; }
  .card, .table-shell { box-shadow: none; break-inside: avoid; }
}