:root{--bg:#f6f7ff;--card:#ffffff;--muted:#6b7280;--primary:#8b5cf6;--secondary:#86efac;--danger:#ef4444;--text:#111827;--border:#e5e7eb;--shadow:0 8px 24px rgba(17,24,39,.08);--radius:16px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#f6f7ff,#eef2ff);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.app{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.title{font-size:20px;font-weight:600;color:#4b5563}
.tabs{display:flex;gap:10px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px;box-shadow:var(--shadow)}
.tab{background:transparent;border:none;color:#374151;padding:8px 16px;border-radius:999px;cursor:pointer}
.tab:hover{background:#f3f4f6}
.tab.active{background:#ede9fe;color:#4c1d95;box-shadow:0 4px 12px rgba(139,92,246,.25)}
.content{display:block}
.panel{display:none}
.panel.show{display:block}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
.card-title{font-size:16px;font-weight:600;margin-bottom:12px;color:#374151}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.field{grid-column:span 6;display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-size:12px;color:var(--muted)}
input,select,textarea{background:#fff;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:10px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:#c4b5fd;box-shadow:0 0 0 3px rgba(139,92,246,.2)}
textarea{resize:vertical}
.actions{grid-column:1/-1;display:flex;gap:10px}
button{border:none;border-radius:12px;padding:10px 16px;color:#fff;cursor:pointer;transition:transform .06s ease,box-shadow .2s}
button:active{transform:scale(.98)}
.primary{background:var(--primary);box-shadow:0 6px 12px rgba(139,92,246,.25)}
.secondary{background:var(--secondary);color:#065f46}
.danger{background:var(--danger)}
.range-value{margin-top:4px;color:var(--muted);font-size:12px}
.results{display:flex;flex-direction:column;gap:16px}
.group-title{font-size:14px;color:var(--muted)}
.table{overflow-x:auto;border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted);font-weight:500}
.checkboxes{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 10px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#fff;color:#111827;padding:10px 14px;border-radius:10px;border:1px solid var(--border);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.progress{display:flex;align-items:center;gap:10px}
.progress-track{flex:1;background:#f3f4f6;border:1px solid var(--border);border-radius:999px;height:10px;overflow:hidden}
.progress-bar{height:100%;background:var(--primary);width:0%}
.progress-text{font-size:12px;color:var(--muted)}
 @media (max-width:768px){.field{grid-column:1/-1}}