/* ---------------------------------------------------------------- Spin the Wheel admin theme */
:root {
    --stw-red: #ec3013; --stw-red-dark: #c81e12; --stw-red-tint: #fdeceb;
    --stw-ink: #171a1f; --stw-ink-tint: #eef0f3;
    --stw-green: #1a7f43; --stw-green-tint: #e8f7ee;
    --stw-blue: #185fa5; --stw-blue-tint: #e6f1fb;
    --stw-amber: #b45309; --stw-amber-tint: #fff4e5;
    --stw-gray: #6b7280; --stw-gray-tint: #f3f4f6;
    --stw-muted: #9aa1ab; --stw-border: #e5e8ec;
}

/* KPI cards ----------------------------------------------------------------------------------- */
.stw-kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .stw-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .stw-kpi-grid { grid-template-columns: 1fr; } }

.stw-kpi {
    position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px;
    padding: 18px 18px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--stw-border);
    box-shadow: 0 2px 8px rgba(23, 26, 31, .05); text-decoration: none; color: var(--stw-ink);
    overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stw-kpi::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--stw-tone); opacity: .9;
}
.stw-kpi::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 999px;
    background: var(--stw-tone-tint); opacity: .8; pointer-events: none;
}
.stw-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(23, 26, 31, .28); border-color: var(--stw-tone); }
.stw-kpi > * { position: relative; z-index: 1; }

.stw-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stw-kpi-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 14px;
    background: var(--stw-tone-tint); color: var(--stw-tone);
}
.stw-kpi-icon svg { stroke-width: 1.6; }
.stw-kpi-label { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--stw-muted); }
.stw-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.stw-kpi-value { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--stw-ink); font-variant-numeric: tabular-nums; }
.stw-kpi-sub { font-size: 12.5px; color: var(--stw-gray); line-height: 1.4; }

.stw-kpi-sparkwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stw-spark { width: 96px; height: 30px; display: block; }
.stw-spark-line { fill: none; stroke: var(--stw-tone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stw-spark-area { fill: var(--stw-tone); opacity: .12; }
.stw-kpi-sparklabel { font-size: 10px; color: var(--stw-muted); }

.stw-chip { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.stw-chip-red   { background: var(--stw-red-tint);   color: var(--stw-red-dark); }
.stw-chip-green { background: var(--stw-green-tint); color: var(--stw-green); }
.stw-chip-blue  { background: var(--stw-blue-tint);  color: var(--stw-blue); }
.stw-chip-amber { background: var(--stw-amber-tint); color: var(--stw-amber); }
.stw-chip-ink   { background: var(--stw-ink-tint);   color: var(--stw-ink); }
.stw-chip-gray  { background: var(--stw-gray-tint);  color: var(--stw-gray); }

.stw-bar { margin-top: 6px; height: 6px; border-radius: 999px; background: var(--stw-ink-tint); overflow: hidden; }
.stw-bar span { display: block; height: 100%; border-radius: 999px; background: var(--stw-tone); transition: width .4s ease; }
.stw-bar-label { font-size: 10.5px; color: var(--stw-muted); }

.stw-kpi-foot { margin-top: 10px; font-size: 11px; color: var(--stw-muted); text-align: right; }

/* tones */
.stw-tone-red   { --stw-tone: var(--stw-red);   --stw-tone-tint: var(--stw-red-tint); }
.stw-tone-green { --stw-tone: var(--stw-green); --stw-tone-tint: var(--stw-green-tint); }
.stw-tone-blue  { --stw-tone: var(--stw-blue);  --stw-tone-tint: var(--stw-blue-tint); }
.stw-tone-amber { --stw-tone: var(--stw-amber); --stw-tone-tint: var(--stw-amber-tint); }
.stw-tone-ink   { --stw-tone: var(--stw-ink);   --stw-tone-tint: var(--stw-ink-tint); }
.stw-tone-gray  { --stw-tone: var(--stw-muted); --stw-tone-tint: var(--stw-gray-tint); }

/* dark mode */
.dark .stw-kpi { background: #1b1e24; border-color: rgba(255,255,255,.08); color: #f3f4f6; }
.dark .stw-kpi-value { color: #f3f4f6; }
.dark .stw-kpi::after { opacity: .18; }
.dark .stw-kpi-icon { background: rgba(255,255,255,.06); }
.dark .stw-bar { background: rgba(255,255,255,.08); }
.dark .stw-tone-ink { --stw-tone: #f59e8f; --stw-tone-tint: rgba(245,158,143,.15); }
.dark .stw-chip-ink { background: rgba(255,255,255,.08); color: #f3f4f6; }