:root {
  --ks-primary: #6C5CE7; --ks-accent: #1B9CFC; --ks-bg:#f7f8ff; --ks-card:#fff; --ks-text:#1f2937; --ks-muted:#6b7280;
  --ks-elev: rgba(20,20,60,0.06);
}
body.ks-dark { --ks-primary: #7c3aed; --ks-accent:#06b6d4; --ks-bg:#0b1220; --ks-card:#0f1724; --ks-text:#e6eef8; --ks-muted:#9aa6b2; --ks-elev: rgba(0,0,0,0.6); }
body .ks-root * { box-sizing: border-box; }
.ks-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; color: var(--ks-text); }
.ks-app { background: linear-gradient(135deg,#f8fafc 0%,var(--ks-bg) 100%); padding:16px; border-radius:20px; box-shadow:0 10px 30px var(--ks-elev); }
.ks-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.ks-title { font-size:22px; font-weight:800; }
.ks-badge { font-size:12px; padding:6px 10px; border-radius:999px; background:var(--ks-primary); color:#fff; }

.ks-theme-toggle { display:flex; gap:8px; align-items:center; }

.ks-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.ks-tab { padding:8px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
body.ks-dark .ks-tab { border-color: #263244; background: #0b1420; color: var(--ks-text); }
.ks-tab.active { background:var(--ks-primary); color:#fff; border-color:var(--ks-primary); }

.ks-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .ks-grid-2{ grid-template-columns:1fr 1fr;} .ks-grid-3{ grid-template-columns:repeat(3,1fr);} }

.ks-card { background:var(--ks-card); border:1px solid #e5e7eb; border-radius:16px; padding:14px; }
body.ks-dark .ks-card { border-color: #192333; }
.ks-card h3 { margin:0 0 8px; font-size:16px; font-weight:700; }

.ks-field { display:flex; flex-direction:column; gap:6px; }
.ks-input,.ks-select { padding:10px 12px; border:1px solid #d1d5db; border-radius:12px; outline:none; background:transparent; color:inherit; }
body.ks-dark .ks-input, body.ks-dark .ks-select { border-color:#273241; }
.ks-input:focus,.ks-select:focus { border-color:var(--ks-primary); box-shadow:0 0 0 3px rgba(108,92,231,.15); }

.ks-kpi { display:flex; align-items:center; justify-content:space-between; padding:12px; border-radius:14px; border:1px dashed #e5e7eb; }
body.ks-dark .ks-kpi { border-color:#263244; }
.ks-kpi .val { font-size:22px; font-weight:800; }

.ks-note { font-size:12px; color:var(--ks-muted); }
.ks-btn { padding:10px 14px; border-radius:12px; border:none; cursor:pointer; background:var(--ks-accent); color:#fff; font-weight:700; }
.ks-btn.ghost { background:#fff; color:#111827; border:1px solid #e5e7eb; }
body.ks-dark .ks-btn.ghost { background:transparent; color:var(--ks-text); border-color:#263244; }

.ks-result { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:768px){ .ks-result { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ks-result .item { background:var(--ks-card); border:1px solid #e5e7eb; border-radius:14px; padding:10px; }
body.ks-dark .ks-result .item { border-color:#192333; }

.ks-debug { position:fixed; right:12px; bottom:12px; width:320px; max-height:60vh; display:none; flex-direction:column; gap:8px; background:#0f172a; color:#e5e7eb; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); border:1px solid #1f2937; z-index:99999; }
.ks-debug.visible { display:flex; }
.ks-debug .hd { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; font-weight:800; background:#111827; border-radius:14px 14px 0 0; }
.ks-debug .body { padding:8px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; }
.ks-debug .row { padding:6px 0; border-bottom:1px dashed #374151; }

.ks-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:20px; background:#111827; color:#fff; padding:10px 14px; border-radius:999px; display:none; }
.ks-toast.show { display:block; }