:root{--color-bg-primary:#0a0a1a;--color-bg-secondary:#12122a;--color-bg-card:rgba(20, 25, 50, 0.85);--color-bg-input:rgba(30, 35, 60, 0.9);--color-accent-primary:#00d4ff;--color-accent-secondary:#7b2fff;--color-accent-gradient:linear-gradient(135deg, #00d4ff 0%, #7b2fff 100%);--color-text-primary:#e8eaf6;--color-text-secondary:#9fa8da;--color-text-muted:#5c6bc0;--color-border:rgba(100, 120, 200, 0.3);--color-glow:rgba(0, 212, 255, 0.4);--color-success:#00e676;--color-warning:#ffc107;--color-danger:#ff5252;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--shadow-card:0 8px 32px rgba(0, 0, 0, 0.4);--shadow-glow:0 0 20px var(--color-glow);--font-primary:'Segoe UI','Roboto','Oxygen',sans-serif;--font-mono:'Consolas','Monaco',monospace;--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-primary);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.6;min-height:100vh;background-image:radial-gradient(ellipse at 20% 20%,rgba(123,47,255,.15) 0,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(0,212,255,.1) 0,transparent 50%)}.app-container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.app-header{text-align:center;margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl)}.app-header h1{font-size:2.5rem;font-weight:700;background:var(--color-accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--spacing-sm);text-shadow:0 0 30px var(--color-glow)}.tagline{color:var(--color-text-secondary);font-size:1.1rem;letter-spacing:.5px}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-card);backdrop-filter:blur(10px);transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card),var(--shadow-glow)}.card h2{font-size:1.4rem;color:var(--color-accent-primary);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-border)}.hidden{display:none!important}.file-upload-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-md)}#csv-input{display:none}.file-upload-btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:var(--color-accent-gradient);color:#fff;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.file-upload-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.file-upload-btn .icon{font-size:1.2rem}.file-name{color:var(--color-text-muted);font-style:italic}.section-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.section-header-row h2{margin-bottom:0}.btn-share{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-bg-secondary);color:var(--color-text-primary);border:1px solid var(--color-accent-primary);border-radius:var(--radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--spacing-xs)}.btn-share:hover{background:var(--color-accent-primary);color:var(--color-bg-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,212,255,.3)}.btn-share:active{transform:translateY(0)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--spacing-lg)}.stat-item{background:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-lg);text-align:center;border:1px solid var(--color-border);transition:border-color var(--transition-normal)}.stat-item:hover{border-color:var(--color-accent-primary)}.stat-label{display:block;color:var(--color-text-secondary);font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--spacing-sm)}.stat-value{display:block;font-size:2rem;font-weight:700;color:var(--color-accent-primary);font-family:var(--font-mono)}.stat-unit{display:block;color:var(--color-text-muted);font-size:.9rem}.config-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.config-row label{min-width:180px;color:var(--color-text-secondary);font-weight:500}.config-row input[type=range]{flex:1;min-width:150px;height:8px;background:var(--color-bg-secondary);border-radius:var(--radius-sm);outline:0;-webkit-appearance:none;appearance:none}.config-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--color-accent-primary);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--color-glow);transition:transform var(--transition-fast)}.config-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.config-row input[type=number]{width:120px;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:1rem;font-family:var(--font-mono);outline:0;transition:border-color var(--transition-fast)}.config-row input[type=number]:focus{border-color:var(--color-accent-primary);box-shadow:0 0 8px var(--color-glow)}.dimension-select{flex:1;min-width:200px;max-width:350px;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:1rem;font-family:var(--font-mono);outline:0;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300d4ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.dimension-select:hover{border-color:var(--color-accent-primary)}.dimension-select:focus{border-color:var(--color-accent-primary);box-shadow:0 0 8px var(--color-glow)}.dimension-select option{background:var(--color-bg-secondary);color:var(--color-text-primary);padding:var(--spacing-sm)}.slider-value{min-width:40px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-accent-primary);color:var(--color-bg-primary);font-weight:700;font-family:var(--font-mono);border-radius:var(--radius-sm);text-align:center}.calculated-value{color:var(--color-text-muted);font-family:var(--font-mono)}#floor-width{color:var(--color-accent-primary);font-weight:600}.info-box{background:var(--color-bg-secondary);border-left:4px solid var(--color-accent-primary);padding:var(--spacing-md) var(--spacing-lg);border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text-secondary);font-family:var(--font-mono)}#sqm-per-floor{color:var(--color-accent-primary);font-weight:700;font-size:1.2rem}.floor-selector-container{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border)}.floor-selector-container label{color:var(--color-text-secondary);font-weight:500;min-width:100px}.floor-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.floor-item{display:flex;flex-direction:column;gap:var(--spacing-md);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);transition:border-color var(--transition-normal),background var(--transition-normal)}.floor-item:hover{border-color:var(--color-accent-primary);background:rgba(0,212,255,.05)}.floor-info{display:flex;align-items:center;gap:var(--spacing-lg)}.floor-number{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:var(--color-accent-gradient);border-radius:var(--radius-md);font-size:1.2rem;font-weight:700;color:#fff;flex-shrink:0}.floor-details{flex:1}.floor-name{font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.floor-dimensions{color:var(--color-text-muted);font-family:var(--font-mono);font-size:.9rem}.floor-canvas-container{width:100%;border-radius:var(--radius-md);overflow:hidden;box-shadow:inset 0 0 20px rgba(0,0,0,.3)}.floor-canvas{display:block;width:100%;height:auto;border-radius:var(--radius-md)}.components-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md)}.component-item{position:relative;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);transition:border-color var(--transition-normal)}.component-item:hover{border-color:var(--color-accent-secondary)}.component-category{display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--color-accent-secondary);background:rgba(123,47,255,.2);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm)}.component-name{font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.component-stats{display:flex;justify-content:space-between;color:var(--color-text-muted);font-size:.9rem;font-family:var(--font-mono)}@media (max-width:768px){.app-header h1{font-size:1.8rem}.config-row{flex-direction:column;align-items:flex-start}.config-row label{min-width:auto}.config-row input[type=range]{width:100%}.stats-grid{grid-template-columns:1fr}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card:not(.hidden){animation:fadeIn var(--transition-slow)}@keyframes pulse-glow{0%,100%{box-shadow:0 0 10px var(--color-glow)}50%{box-shadow:0 0 25px var(--color-glow)}}.file-upload-btn:hover{animation:1.5s infinite pulse-glow}.section-hint{color:var(--color-text-muted);font-size:.9rem;margin-bottom:var(--spacing-md)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:.2s fadeIn}.modal-content{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5),var(--shadow-glow)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.modal-header h3{margin:0;color:var(--color-accent-primary);font-size:1.3rem}.modal-close-btn{background:0 0;border:none;color:var(--color-text-muted);font-size:1.8rem;cursor:pointer;padding:0;line-height:1;transition:color var(--transition-fast)}.modal-close-btn:hover{color:var(--color-danger)}.modal-stats{display:flex;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-secondary);color:var(--color-text-secondary);font-family:var(--font-mono);font-size:.9rem;flex-wrap:wrap}.modal-area-display{padding:var(--spacing-md) var(--spacing-lg);background:var(--color-accent);color:var(--color-bg);font-family:var(--font-mono);font-size:.95rem;font-weight:600;text-align:center}.modal-area-display.hidden{display:none}.modal-body{padding:var(--spacing-lg)}.modal-row{margin-bottom:var(--spacing-lg)}.modal-row label{display:block;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);font-weight:500}.modal-row .dimension-select{width:100%;max-width:none}.modal-footer{display:flex;justify-content:flex-end;gap:var(--spacing-md);padding:var(--spacing-lg);border-top:1px solid var(--color-border)}.btn{padding:var(--spacing-sm) var(--spacing-xl);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-primary{background:var(--color-accent-gradient);color:#fff}.btn-primary:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--color-bg-secondary);color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn-secondary:hover{border-color:var(--color-accent-primary);color:var(--color-text-primary)}.multi-floor-section{background:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--spacing-md);margin-top:var(--spacing-md)}.multi-floor-notice{color:var(--color-warning);margin-bottom:var(--spacing-md)}.floor-selection-hint{background-color:rgba(33,150,243,.15);border-left:4px solid var(--color-accent-primary);padding:var(--spacing-md);margin-bottom:var(--spacing-md);font-size:.9em;color:var(--color-accent-primary);border-radius:var(--radius-sm);line-height:1.5}.floor-selection-hint.hidden{display:none}.floor-checkboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--spacing-sm)}.floor-checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--color-bg-input);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast)}.floor-checkbox-label:hover{background:var(--color-bg-card)}.floor-checkbox-label input[type=checkbox]{accent-color:var(--color-accent-primary)}.component-item{cursor:pointer;transition:all var(--transition-normal)}.component-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.3)}.component-item.placed{border-color:var(--color-success);background:rgba(0,230,118,.1)}.component-item.placed::before{content:'✓';position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);color:var(--color-success);font-weight:700}.component-item.no-area{opacity:.6;cursor:default}.component-item.no-area:hover{transform:none;box-shadow:none}.component-placement-info{margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--color-border);color:var(--color-success);font-size:.85rem}.component-quantity-info{margin-top:var(--spacing-sm);padding-top:var(--spacing-sm);border-top:1px solid var(--color-border);color:var(--color-accent-primary);font-size:.85rem}.component-item.fully-placed{opacity:.7;border-color:var(--color-success)}.component-item.fully-placed::before{content:'✓✓'}.floor-canvas.placement-mode{cursor:crosshair;box-shadow:0 0 20px var(--color-success);animation:1.5s infinite placement-pulse}@keyframes placement-pulse{0%,100%{box-shadow:0 0 10px var(--color-success)}50%{box-shadow:0 0 25px var(--color-success)}}.placement-instructions{position:fixed;bottom:var(--spacing-xl);left:50%;transform:translateX(-50%);background:var(--color-bg-card);border:1px solid var(--color-success);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-xl);color:var(--color-text-primary);font-weight:500;box-shadow:var(--shadow-card);z-index:100;animation:.3s slideUp}@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.floor-canvas.selection-mode{cursor:move;box-shadow:0 0 20px var(--color-accent-primary)}