html, body { height:100%; }
body { background: radial-gradient(1200px 600px at 70% 20%, rgba(255,255,255,0.08), transparent 60%),
                 linear-gradient(135deg, #0b2b57, #0a3a7a 45%, #0b2b57); color: #eaf2ff; }

a { color: #b9d6ff; }
a:hover { color: #ffffff; }

.navbar { backdrop-filter: blur(8px); background: rgba(10, 28, 58, 0.6) !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
.card { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.06); color: #eaf2ff; }
.card .text-muted { color: rgba(234,242,255,0.75) !important; }

.progress { height: 10px; background: rgba(255,255,255,0.14); }
.progress-bar { background: linear-gradient(90deg, #2a77ff, #52c6ff); }

.hero { padding: 2.5rem 0 1.5rem; }
.hero img { max-height: 110px; }
.badge-soft { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); color: #eaf2ff; }

.footer { opacity: .75; font-size: .9rem; padding: 2rem 0; }

/* Dashboard tiles */
.tile-badge{
  width:42px; height:42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  color: #eaf2ff;
}

/* SILi module: dark shell, readable work surfaces */
.area-sili main {
  color: #f7fbff;
}

.area-sili h1,
.area-sili h2,
.area-sili h3,
.area-sili h4,
.area-sili h5,
.area-sili h6 {
  color: #ffffff;
}

.area-sili .text-muted,
.area-sili .form-text {
  color: #d6e3f5 !important;
}

.area-sili .card {
  background: #ffffff;
  color: #0f172a !important;
  border-color: #cbd5e1;
  box-shadow: 0 0.75rem 1.75rem rgba(4, 18, 40, 0.18);
}

.area-sili .card *,
.area-sili .table * {
  color: inherit;
}

.area-sili .card .text-muted,
.area-sili .card .form-text {
  color: #475569 !important;
}

.area-sili .card-header,
.area-sili .card-footer {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border-color: #cbd5e1;
}

.area-sili .card-header {
  font-weight: 700;
}

.area-sili .table {
  --bs-table-color: #0f172a;
  --bs-table-bg: #ffffff;
  --bs-table-striped-bg: #f8fafc;
  --bs-table-hover-bg: #eef6ff;
  color: #0f172a !important;
  font-size: 0.94rem;
}

.area-sili .table > :not(caption) > * > * {
  color: #0f172a !important;
  background-color: #ffffff;
  border-bottom-color: #d6dee9;
  padding: 0.78rem 0.65rem;
}

.area-sili .table thead th {
  color: #020617 !important;
  background: #eef2f7 !important;
  border-bottom-color: #cbd5e1;
  font-weight: 700;
  white-space: nowrap;
}

.area-sili .table tbody tr:hover > * {
  background: #f0f7ff !important;
}

.area-sili .table .small,
.area-sili .table small {
  color: #1f2937 !important;
}

.area-sili code {
  color: #9d174d !important;
  background: #fff1f2;
  border-radius: 0.25rem;
  padding: 0.08rem 0.28rem;
  font-weight: 600;
}

.area-sili .badge {
  color: var(--bs-badge-color, #ffffff) !important;
  font-weight: 700;
}

.area-sili .btn-outline-primary {
  color: #0057d9 !important;
  border-color: #0d6efd;
  background: #ffffff;
}

.area-sili .btn-outline-primary:hover {
  color: #ffffff !important;
  background: #0d6efd;
}

.area-sili .btn-primary {
  color: #ffffff !important;
}

.area-sili .sili-filter-card {
  box-shadow: 0 0.45rem 1.2rem rgba(4, 18, 40, 0.12);
}

.area-sili .sili-filter-card .card-body {
  padding: 0.9rem 1rem;
}

.sili-review-image-cell {
  width: 5.25rem;
}

.sili-review-thumb {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #f8fafc;
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.12);
}

.sili-review-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sili-review-thumb span {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  place-items: center;
  height: 1.45rem;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.76);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sili-review-thumb:hover span,
.sili-review-thumb:focus-visible span {
  opacity: 1;
}

.sili-review-thumb:focus-visible {
  outline: 3px solid rgba(13, 110, 253, 0.35);
  outline-offset: 2px;
}

.sili-image-modal .modal-content {
  color: #f8fafc;
  background: #07111f;
}

.sili-image-modal .modal-header {
  min-height: 4.5rem;
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.96);
}

.sili-image-modal .modal-title {
  color: #ffffff;
  max-width: min(72vw, 70rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sili-image-modal-meta {
  color: #cbd5e1;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

.sili-image-modal .modal-body {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 1rem;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.035) 75%),
    #07111f;
  background-size: 2rem 2rem;
  background-position: 0 0, 0 1rem, 1rem -1rem, -1rem 0;
}

.sili-image-modal .modal-body img {
  max-width: 100%;
  max-height: calc(100dvh - 7rem);
  object-fit: contain;
  border-radius: 0.35rem;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.42);
}

.sili-dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(18rem, 34vh, 28rem);
  padding: 2rem;
  border: 3px dashed #6ba3df;
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(248, 251, 255, 0.98));
  color: #12325a;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sili-dropzone:hover,
.sili-dropzone.is-dragover,
.sili-dropzone.is-processing {
  border-color: #0d6efd;
  background: #edf6ff;
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.18), 0 0.85rem 1.8rem rgba(13, 110, 253, 0.16);
  transform: translateY(-1px);
}

.sili-dropzone.is-processing {
  cursor: wait;
}

.sili-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.sili-dropzone-content {
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  text-align: center;
  pointer-events: none;
  max-width: 46rem;
}

.sili-dropzone-icon {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, #0d6efd, #38bdf8);
  box-shadow: 0 0.85rem 1.7rem rgba(13, 110, 253, 0.28);
}

.sili-dropzone-content i {
  color: #0d6efd;
  color: inherit;
  font-size: 3rem;
}

.sili-dropzone-content strong {
  color: #0f172a;
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  line-height: 1.1;
}

.sili-dropzone-content span {
  color: #334155;
  font-size: 1rem;
}

.sili-dropzone-content small {
  color: #64748b;
  font-size: 0.92rem;
  max-width: 38rem;
}

.sili-dropzone-content em {
  margin-top: 0.35rem;
  color: #0b5ed7;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-style: normal;
  font-weight: 700;
}

.sili-upload-list {
  display: grid;
  gap: 0.65rem;
}

.sili-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  gap: 1rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #dbe3ee;
  border-radius: 0.5rem;
  background: #fbfdff;
}

.sili-upload-file {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.sili-upload-file i {
  color: #0d6efd;
  font-size: 1.25rem;
}

.sili-upload-file strong,
.sili-upload-file span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sili-upload-file span {
  color: #64748b;
  font-size: 0.85rem;
}

.sili-upload-state {
  min-width: 0;
}

.sili-upload-state .progress {
  height: 0.55rem;
}

.area-sili pre {
  color: #dcecff;
  background: #0f2747;
  border-radius: 0.45rem;
  padding: 0.75rem;
  white-space: pre-wrap;
}

@media (max-width: 767.98px) {
  .sili-upload-row {
    grid-template-columns: minmax(0, 1fr);
  }
}