*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f8fafc;--surface: #ffffff;--border: #e2e8f0;--text: #0f172a;--text-secondary: #64748b;--accent: #6366f1;--accent-light: #818cf8;--accent-bg: #eef2ff}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);min-height:100vh;color:var(--text)}.app{min-height:100vh}.app-header{padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between}.app-header h1{font-size:.9375rem;font-weight:700;color:var(--accent)}.app-header .credit{font-size:.6875rem;color:var(--text-secondary);letter-spacing:.025em}main{display:flex;height:calc(100vh - 49px)}.controls{width:340px;background:var(--surface);border-right:1px solid var(--border);padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;flex-shrink:0}.section{padding-bottom:1.5rem;border-bottom:1px solid var(--border)}.section:last-child{border-bottom:none;padding-bottom:0}.section h2{font-size:.6875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.075em;margin-bottom:1rem}.chart-area{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden;background:radial-gradient(circle at 20% 20%,rgba(99,102,241,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(99,102,241,.03) 0%,transparent 50%),var(--bg)}.chart-container{width:100%;height:100%;max-width:700px;max-height:600px;min-height:400px;position:relative}.btn{padding:.5rem .875rem;border:1px solid var(--border);border-radius:8px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s ease;background:var(--surface);color:var(--text)}.btn:hover{border-color:#cbd5e1;background:var(--bg)}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:var(--accent-light);border-color:var(--accent-light)}.btn-danger{color:#ef4444;background:#fef2f2;border-color:#fecaca}.btn-danger:hover{background:#fee2e2}.add-dataset-btn{width:100%;margin-top:.75rem;color:var(--accent);border-style:dashed}.add-dataset-btn:hover{background:var(--accent-bg);border-color:var(--accent)}.chart-type-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.375rem}.chart-type-btn{display:flex;flex-direction:column;align-items:center;padding:.625rem .25rem;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;transition:all .15s ease}.chart-type-btn:hover{background:var(--bg)}.chart-type-btn.selected{background:var(--accent-bg);border-color:var(--accent)}.chart-type-btn svg{width:20px;height:20px;margin-bottom:.25rem;color:var(--text-secondary)}.chart-type-btn.selected svg{color:var(--accent)}.chart-type-btn span{font-size:.5625rem;color:var(--text-secondary);text-align:center;font-weight:500}.chart-type-btn.selected span{color:var(--accent)}.dataset-container{background:var(--bg);border-radius:10px;padding:.875rem;margin-bottom:.625rem}.dataset-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.dataset-header input[type=text]{flex:1;padding:.4375rem .625rem;border:1px solid var(--border);border-radius:6px;font-size:.8125rem;font-weight:500;background:var(--surface)}.dataset-header input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.dataset-header input[type=color]{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;padding:0}.remove-dataset-btn{padding:.25rem .5rem;font-size:.6875rem}.data-table{width:100%;border-collapse:separate;border-spacing:0}.data-table th,.data-table td{padding:.375rem .25rem;text-align:left}.data-table th{font-size:.625rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.025em;padding-bottom:.5rem}.data-table input{width:100%;padding:.375rem .5rem;border:1px solid var(--border);border-radius:5px;font-size:.8125rem;background:var(--surface)}.data-table input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.row-actions{display:flex;justify-content:center}.row-btn{padding:.125rem .375rem;font-size:.875rem;border:none;border-radius:4px;cursor:pointer;background:transparent;color:#cbd5e1;line-height:1;transition:all .15s ease}.row-btn.delete:hover{color:#ef4444}.add-row-btn{margin-top:.5rem;width:100%;padding:.375rem;font-size:.75rem}.csv-import{margin-bottom:.75rem}.csv-dropzone{border:1px dashed var(--border);border-radius:8px;padding:1rem;text-align:center;cursor:pointer;transition:all .15s ease;background:var(--surface)}.csv-dropzone:hover,.csv-dropzone.dragover{border-color:var(--accent);background:var(--accent-bg)}.csv-dropzone p{color:var(--text-secondary);font-size:.75rem}.csv-dropzone span{color:var(--accent);font-weight:600}.customizer-group{margin-bottom:.875rem}.customizer-group:last-child{margin-bottom:0}.customizer-group label{display:block;font-size:.75rem;font-weight:500;color:var(--text);margin-bottom:.375rem}.customizer-group input[type=text],.customizer-group select{width:100%;padding:.4375rem .625rem;border:1px solid var(--border);border-radius:6px;font-size:.8125rem;background:var(--surface)}.customizer-group input:focus,.customizer-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.checkbox-group{display:flex;align-items:center;gap:.5rem;padding:.25rem 0}.checkbox-group input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}.checkbox-group label{margin-bottom:0;cursor:pointer;font-size:.8125rem}.export-buttons{display:flex;gap:.5rem}.export-buttons .btn{flex:1}@media (max-width: 900px){main{flex-direction:column-reverse;height:auto;min-height:calc(100vh - 49px)}.controls{width:100%;border-right:none;border-top:1px solid var(--border);max-height:none;overflow-y:visible}.chart-area{min-height:50vh;padding:1.5rem;overflow:visible}.chart-container{max-width:100%;max-height:none;min-height:45vh}}@media (max-width: 480px){.app-header{padding:.75rem 1rem}.controls{padding:1rem}.chart-area{padding:.75rem;min-height:55vh}.chart-container{min-height:50vh}.chart-type-grid{grid-template-columns:repeat(5,1fr)}}