:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-panel: #0f0f1a;--text-primary: #eaeaea;--text-secondary: #a0a0a0;--text-muted: #666;--accent: #4fc3f7;--accent-hover: #81d4fa;--border: #333;--edge-disabled: #333;--edge-enabled: #4fc3f7;--edge-hover: #81d4fa;--vertex: #555;--vertex-active: #4fc3f7;--warning: #ff6b6b;--warning-bg: rgba(255, 107, 107, .15);--success: #69db7c;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=light]{--bg-primary: #f5f5f5;--bg-secondary: #ffffff;--bg-panel: #e8e8e8;--text-primary: #1a1a1a;--text-secondary: #555;--text-muted: #888;--accent: #0288d1;--accent-hover: #0277bd;--border: #ccc;--edge-disabled: #ccc;--edge-enabled: #0288d1;--edge-hover: #0277bd;--vertex: #aaa;--vertex-active: #0288d1;--warning: #d32f2f;--warning-bg: rgba(211, 47, 47, .1);--success: #388e3c}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{background-color:var(--bg-primary);color:var(--text-primary)}.app{display:grid;grid-template-rows:auto 1fr;height:100vh;width:100vw}.header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;background-color:var(--bg-secondary);border-bottom:1px solid var(--border)}.header h1{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.main-content{display:grid;grid-template-columns:280px 1fr 220px;gap:0;height:100%;overflow:hidden}.panel{background-color:var(--bg-secondary);border-right:1px solid var(--border);padding:1rem;overflow-y:auto}.panel:last-child{border-right:none;border-left:1px solid var(--border)}.panel-section{margin-bottom:1.5rem}.panel-section h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:.75rem}.grid-container{display:flex;align-items:center;justify-content:center;background-color:var(--bg-primary);padding:1rem;overflow:hidden}.input-group{margin-bottom:.75rem}.input-group label{display:block;font-size:.8rem;color:var(--text-secondary);margin-bottom:.25rem}.input-group input,.input-group select{width:100%;padding:.5rem;border:1px solid var(--border);border-radius:4px;background-color:var(--bg-panel);color:var(--text-primary);font-size:.9rem}.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--accent)}.input-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}button{padding:.5rem 1rem;border:1px solid var(--border);border-radius:4px;background-color:var(--bg-panel);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .15s ease}button:hover,button.primary{background-color:var(--accent);border-color:var(--accent);color:var(--bg-primary)}button.primary:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}button.danger{border-color:var(--warning);color:var(--warning)}button.danger:hover{background-color:var(--warning);color:#fff}.theme-toggle{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:.25rem;color:var(--text-secondary)}.theme-toggle:hover{color:var(--accent);background:none}.stat-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border)}.stat-item:last-child{border-bottom:none}.stat-label{font-size:.85rem;color:var(--text-secondary)}.stat-value{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}.stat-value.warning{color:var(--warning);background-color:var(--warning-bg);padding:.15rem .5rem;border-radius:4px}.stat-limit{font-size:.75rem;color:var(--text-muted)}.radio-group{display:flex;flex-direction:column;gap:.35rem}.radio-option{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:4px;cursor:pointer;transition:background-color .15s ease}.radio-option:hover{background-color:var(--bg-panel)}.radio-option input{accent-color:var(--accent)}.radio-option span{font-size:.85rem}.toggle-container{display:flex;align-items:center;gap:.75rem}.toggle-switch{position:relative;width:48px;height:24px;background-color:var(--bg-panel);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .2s ease}.toggle-switch.active{background-color:var(--accent);border-color:var(--accent)}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background-color:var(--text-primary);border-radius:50%;transition:transform .2s ease}.toggle-switch.active:after{transform:translate(24px);background-color:var(--bg-primary)}.grid-info{font-size:.8rem;color:var(--text-muted);margin-top:.5rem;padding:.5rem;background-color:var(--bg-panel);border-radius:4px}.saved-designs{max-height:150px;overflow-y:auto}.saved-design-item{display:flex;justify-content:space-between;align-items:center;padding:.35rem .5rem;border-radius:4px;cursor:pointer;font-size:.85rem}.saved-design-item:hover{background-color:var(--bg-panel)}.saved-design-item .delete-btn{opacity:0;padding:.15rem .35rem;font-size:.75rem}.saved-design-item:hover .delete-btn{opacity:1}.hex-grid-svg{max-width:100%;max-height:100%}.hex-edge{stroke:var(--edge-disabled);stroke-width:2;stroke-linecap:round;cursor:pointer;transition:stroke .1s ease,stroke-width .1s ease}.hex-edge:hover{stroke:var(--edge-hover);stroke-width:4}.hex-edge.enabled{stroke:var(--edge-enabled);stroke-width:3}.hex-edge.enabled:hover{stroke:var(--edge-hover);stroke-width:5}.hex-edge-hitbox{stroke:transparent;stroke-width:12;cursor:pointer}.hex-vertex{fill:var(--vertex);transition:fill .1s ease}.hex-vertex.active-2{fill:var(--accent)}.hex-vertex.active-3{fill:var(--success)}.mirror-guide{stroke:var(--text-muted);stroke-width:1.5;stroke-dasharray:8,6;stroke-linecap:round;opacity:.6}.mirror-center{fill:none;stroke:var(--text-muted);stroke-width:2;stroke-dasharray:4,3;opacity:.6}@media(max-width:900px){.main-content{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.panel{border-right:none;border-bottom:1px solid var(--border)}.panel:last-child{border-left:none;border-top:1px solid var(--border)}}