:root{--color-primary:#6366f1;--color-primary-hover:#4f46e5;--color-primary-light:#818cf8;--color-primary-dark:#4338ca;--color-primary-gradient:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);--color-primary-glow:#6366f140;--color-accent:#06b6d4;--color-secondary:#f43f5e;--color-gray-50:#f8fafc;--color-gray-100:#f1f5f9;--color-gray-200:#e2e8f0;--color-gray-300:#cbd5e1;--color-gray-400:#94a3b8;--color-gray-500:#64748b;--color-gray-600:#475569;--color-gray-700:#334155;--color-gray-800:#1e293b;--color-gray-900:#0f172a;--color-success:#10b981;--color-success-bg:#10b9811a;--color-warning:#f59e0b;--color-warning-bg:#f59e0b1a;--color-error:#ef4444;--color-error-bg:#ef44441a;--color-info-bg:#6366f11a;--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--bg-app:#f4f6f8;--bg-header:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);--bg-canvas:#fff;--bg-card:#fff;--bg-overlay:#0f172a80;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#64748b;--text-inverse:#fff;--text-muted:#94a3b8;--border-light:#e2e8f0;--border-medium:#cbd5e1;--font-family-base:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-size-xs:.75rem;--font-size-sm:.8125rem;--font-size-base:.875rem;--font-size-lg:.9375rem;--font-size-xl:1.0625rem;--font-size-2xl:1.25rem;--font-size-3xl:1.5rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:.75rem;--spacing-lg:1rem;--spacing-xl:1.25rem;--spacing-2xl:1.5rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.625rem;--radius-xl:.75rem;--radius-full:9999px;--shadow-xs:0 1px 2px #0000000a;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 3px 8px #00000014;--shadow-lg:0 6px 16px #0000001a;--shadow-card:0 1px 3px #0000000f,0 1px 2px #0000000a;--shadow-card-hover:0 4px 12px #0000001a;--shadow-button:0 2px 4px #6366f133;--transition-fast:.12s ease;--transition-normal:.18s ease;--z-sticky:100;--z-modal:500;--header-height:52px}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text-primary);background:var(--bg-app);min-height:100vh;min-height:100dvh}#root{min-height:100vh;flex-direction:column;min-height:100dvh;display:flex}h1,h2,h3,h4{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--text-primary)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}h4{font-size:var(--font-size-base)}p{color:var(--text-secondary);line-height:var(--line-height-relaxed)}a{color:var(--color-primary);text-decoration:none}button{font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);min-height:36px;padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--spacing-sm);border:none;display:inline-flex}button:active{transform:scale(.98)}.btn-primary{background:var(--color-primary-gradient);color:var(--text-inverse);box-shadow:var(--shadow-button)}.btn-primary:hover{opacity:.9;box-shadow:0 4px 8px #6366f14d}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-light)}.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--border-medium)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{background:var(--bg-tertiary)}.btn-danger{background:var(--color-error);color:var(--text-inverse)}.btn-icon{border-radius:var(--radius-full);width:36px;height:36px;padding:0}.btn-full{width:100%}.btn-lg{min-height:44px;padding:var(--spacing-md)var(--spacing-xl);font-size:var(--font-size-base);border-radius:var(--radius-lg)}input,textarea,select{font-family:inherit;font-size:var(--font-size-base);min-height:40px;padding:var(--spacing-sm)var(--spacing-md);border:1px solid var(--border-light);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);width:100%;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}input:focus,textarea:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow);outline:none}label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light)}.badge{padding:2px var(--spacing-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-secondary);align-items:center;display:inline-flex}.badge-primary{background:var(--color-info-bg);color:var(--color-primary)}.badge-success{background:var(--color-success-bg);color:var(--color-success)}.empty-state{padding:var(--spacing-2xl);text-align:center;flex-direction:column;align-items:center;display:flex}.empty-state-icon{width:56px;height:56px;margin-bottom:var(--spacing-lg);background:var(--color-primary-gradient);border-radius:var(--radius-lg);color:var(--text-inverse);justify-content:center;align-items:center;display:flex}.empty-state-icon svg{width:28px;height:28px}.empty-state-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm)}.empty-state-description{font-size:var(--font-size-sm);color:var(--text-tertiary);max-width:260px}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sr-only{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media (prefers-color-scheme:dark){:root{--bg-app:#0f172a;--bg-primary:#1e293b;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-card:#1e293b;--bg-canvas:#1e293b;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-tertiary:#64748b;--border-light:#334155;--border-medium:#475569;--shadow-card:0 1px 3px #0003}}.home-page{padding:var(--spacing-lg)0;min-height:calc(100vh - var(--header-height));padding-bottom:100px;position:relative}.project-list-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;display:flex}.project-list-header h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.project-count{font-size:var(--font-size-sm);color:var(--text-tertiary)}.project-list{gap:var(--spacing-sm);flex-direction:column;display:flex}.project-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-md)var(--spacing-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);cursor:pointer;transition:all var(--transition-normal);align-items:center;gap:var(--spacing-md);display:flex}.project-card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--color-primary-light)}.project-card:active{transform:scale(.99)}.project-card-icon{border-radius:var(--radius-md);background:var(--color-primary-gradient);width:44px;height:44px;color:var(--text-inverse);flex-shrink:0;justify-content:center;align-items:center;display:flex}.project-card-icon svg{width:22px;height:22px}.project-card-content{flex:1;min-width:0}.project-card h3{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);margin-bottom:2px}.project-card p{font-size:var(--font-size-sm);color:var(--text-tertiary);margin:0}.project-card-arrow{color:var(--text-muted);transition:transform var(--transition-fast);flex-shrink:0}.project-card:hover .project-card-arrow{color:var(--color-primary);transform:translate(2px)}.project-card-arrow svg{width:18px;height:18px}.fab{background:var(--color-primary-gradient);width:56px;height:56px;min-height:56px;color:var(--text-inverse);cursor:pointer;transition:all var(--transition-normal);z-index:100;border:none;border-radius:16px;justify-content:center;align-items:center;display:flex;position:absolute;bottom:24px;right:0;box-shadow:0 4px 12px #6366f166}.fab:hover{transform:scale(1.05);box-shadow:0 6px 20px #6366f180}.fab:active{transform:scale(.95)}@media (max-width:767px){.fab{position:fixed;right:24px}}.project-page{height:calc(100vh - var(--header-height));height:calc(100dvh - var(--header-height));flex-direction:column;display:flex}.project-header{padding:var(--spacing-md)0}.tab-content{background:var(--bg-app);flex:1;min-height:0;overflow-y:auto}.canvas-container{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);aspect-ratio:16/10;position:relative;overflow:hidden}.canvas-placeholder{color:var(--text-muted);text-align:center;padding:var(--spacing-xl)}.canvas-tools{gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);display:flex;overflow-x:auto}.canvas-tool-btn{min-width:40px;height:40px;padding:var(--spacing-sm);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-secondary);border:none;flex-shrink:0}.canvas-tool-btn.active{background:var(--color-primary-gradient);color:var(--text-inverse)}.materials-list{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.material-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light)}.material-card-header{margin-bottom:var(--spacing-md);justify-content:space-between;display:flex}.material-name{font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.material-layer{font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:2px}.material-details{gap:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-light);grid-template-columns:repeat(3,1fr);display:grid}.material-detail-label{font-size:var(--font-size-xs);color:var(--text-tertiary);margin-bottom:2px}.summary-total{background:var(--color-primary-gradient);border-radius:var(--radius-lg);padding:var(--spacing-xl);color:var(--text-inverse);text-align:center;margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-button)}.summary-total-label{font-size:var(--font-size-sm);opacity:.9;margin-bottom:var(--spacing-xs)}.summary-total-value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold)}.summary-section{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);margin-bottom:var(--spacing-md)}.summary-section-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--spacing-md)}.summary-item{padding:var(--spacing-sm)0;border-bottom:1px solid var(--border-light);font-size:var(--font-size-sm);justify-content:space-between;display:flex}.summary-item:last-child{border-bottom:none;padding-bottom:0}.summary-item-value{font-weight:var(--font-weight-semibold);color:var(--color-primary)}.settings-page{padding:var(--spacing-lg)0}.settings-page h1{font-size:var(--font-size-2xl);margin-bottom:var(--spacing-xl)}.settings-section{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);margin-bottom:var(--spacing-lg);overflow:hidden}.settings-section-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;padding:var(--spacing-md)var(--spacing-lg);padding-bottom:var(--spacing-sm)}.settings-item{padding:var(--spacing-md)var(--spacing-lg);border-bottom:1px solid var(--border-light);cursor:pointer;min-height:52px;transition:background var(--transition-fast);justify-content:space-between;align-items:center;display:flex}.settings-item:last-child{border-bottom:none}.settings-item:hover{background:var(--bg-tertiary)}.settings-item.static{cursor:default}.settings-item.static:hover{background:0 0}.settings-item-content{flex:1}.settings-item-label{font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.settings-item-description{font-size:var(--font-size-sm);color:var(--text-tertiary);margin-top:2px}.settings-item-value{font-size:var(--font-size-sm);color:var(--text-tertiary)}.settings-item-arrow{color:var(--text-muted);font-size:var(--font-size-lg);margin-left:var(--spacing-sm)}.settings-item.danger .settings-item-label{color:var(--color-error)}.settings-item.danger:hover{background:var(--color-error-bg)}.version-info{text-align:center;padding:var(--spacing-xl);color:var(--text-muted);font-size:var(--font-size-sm)}.confirm-dialog-overlay{background:var(--bg-overlay);z-index:var(--z-modal);padding:var(--spacing-lg);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.confirm-dialog{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:360px;box-shadow:var(--shadow-lg)}.confirm-dialog h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md)}.confirm-dialog p{font-size:var(--font-size-sm);margin-bottom:var(--spacing-xl);line-height:var(--line-height-relaxed)}.confirm-dialog-actions{gap:var(--spacing-md);justify-content:flex-end;display:flex}@media (min-width:768px){.fab{bottom:32px}}.auto-save-status{font-size:var(--font-size-xs);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--radius-sm);align-items:center;gap:var(--spacing-xs);transition:all var(--transition-fast);margin-left:auto;display:inline-flex}.auto-save-status.saving{color:var(--text-tertiary);background:var(--bg-tertiary)}.auto-save-status.saved{color:var(--color-success);background:var(--color-success-bg)}.auto-save-status.error{color:var(--color-error);background:var(--color-error-bg)}.project-header{align-items:center;gap:var(--spacing-md);display:flex}.project-tabs{flex:1}.layout{min-height:100vh;background:var(--bg-app);flex-direction:column;min-height:100dvh;display:flex}.header{background:var(--bg-header);color:var(--text-inverse);height:var(--header-height);z-index:var(--z-sticky);position:sticky;top:0}.header-content{max-width:1100px;height:100%;padding:0 var(--spacing-xl);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.logo{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-inverse);align-items:center;gap:var(--spacing-sm);transition:opacity var(--transition-fast);text-decoration:none;display:flex}.logo:hover{color:var(--text-inverse);opacity:.9}.logo .project-title{font-weight:var(--font-weight-medium)}.logo-icon{background:var(--color-primary-gradient);border-radius:var(--radius-md);justify-content:center;align-items:center;width:32px;height:32px;display:flex}.logo-icon svg{width:18px;height:18px}.desktop-nav{gap:var(--spacing-xs);display:none}.nav-link{color:#ffffffb3;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast);text-decoration:none}.nav-link:hover{color:var(--text-inverse);background:#ffffff1a}.nav-link.active{color:var(--text-inverse);background:#ffffff26}.settings-icon-btn{color:#ffffffb3;border-radius:var(--radius-full);width:36px;height:36px;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.settings-icon-btn:hover{color:var(--text-inverse);background:#ffffff1a}.settings-icon-btn.active{color:var(--text-inverse);background:#ffffff26}.settings-icon-btn svg{width:20px;height:20px}.main-content{width:100%;max-width:1100px;padding:0 var(--spacing-xl);flex-direction:column;flex:1;margin:0 auto;display:flex}@media (min-width:768px){.desktop-nav{display:flex}.settings-icon-btn{display:none}}.tab-navigation{background:var(--bg-tertiary);border-radius:var(--radius-lg);gap:4px;padding:4px;display:flex}.tab-button{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);color:var(--text-tertiary);background:0 0;border:none;flex:1;min-height:40px;display:flex}.tab-button:hover{color:var(--text-secondary)}.tab-button.active{background:var(--bg-card);color:var(--color-primary);box-shadow:var(--shadow-sm)}.tab-icon{align-items:center;display:flex}.tab-icon svg{width:18px;height:18px}.tab-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}@media (min-width:640px){.tab-button{padding:var(--spacing-sm)var(--spacing-lg)}}.drawing-modal-backdrop{z-index:1000;background:#00000080;justify-content:center;align-items:center;animation:.15s ease-out fadeIn;display:flex;position:fixed;inset:0}.drawing-modal{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:90%;max-width:400px;max-height:90vh;animation:.2s ease-out slideUp;overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.drawing-modal-header{padding:var(--spacing-md)var(--spacing-lg);border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;display:flex}.drawing-modal-header h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0}.drawing-modal-tabs{border-bottom:1px solid var(--border-light);padding:0 var(--spacing-lg);display:flex}.drawing-modal-tab{padding:var(--spacing-sm)var(--spacing-md);color:var(--text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;position:relative}.drawing-modal-tab:hover{color:var(--text-secondary)}.drawing-modal-tab.active{color:var(--color-primary)}.drawing-modal-tab.active:after{content:"";background:var(--color-primary);border-radius:2px 2px 0 0;height:2px;position:absolute;bottom:-1px;left:0;right:0}.drawing-modal-close{width:32px;height:32px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.drawing-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.drawing-modal-close svg{width:18px;height:18px}.drawing-modal-body{padding:var(--spacing-lg);gap:var(--spacing-md);flex-direction:column;display:flex}.drawing-modal-info{align-items:center;gap:var(--spacing-sm);display:flex}.drawing-type-badge{padding:var(--spacing-xs)var(--spacing-sm);background:var(--color-primary-light);color:var(--color-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-full);align-items:center;display:inline-flex}.drawing-modal-field{gap:var(--spacing-xs);flex-direction:column;display:flex}.drawing-modal-field label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.drawing-modal-field input[type=text]{padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-base);background:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);border:2px solid #cbd5e1}.drawing-modal-field input[type=text]:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #2563eb1a}.color-input-wrapper{align-items:center;gap:var(--spacing-sm);display:flex}.color-input-wrapper input[type=color]{border:2px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;background:0 0;width:40px;height:40px;padding:0}.color-input-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-input-wrapper input[type=color]::-webkit-color-swatch{border-radius:var(--radius-sm);border:none}.color-input-wrapper span{font-size:var(--font-size-sm);color:var(--text-muted);font-family:monospace}.drawing-modal-field input[type=range]{border-radius:var(--radius-full);background:var(--bg-tertiary);appearance:none;cursor:pointer;width:100%;height:6px}.drawing-modal-field input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;width:18px;height:18px;box-shadow:var(--shadow-sm);border-radius:50%}.drawing-modal-dimensions{gap:var(--spacing-sm);flex-direction:column;display:flex}.drawing-modal-dimensions>label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.dimension-inputs{gap:var(--spacing-md);display:flex}.dimension-input{gap:var(--spacing-xs);flex-direction:column;flex:1;display:flex}.dimension-input label{font-size:var(--font-size-xs);color:var(--text-muted)}.input-with-unit{border-radius:var(--radius-md);background:var(--bg-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);border:2px solid #cbd5e1;align-items:center;display:flex;overflow:hidden}.input-with-unit:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #2563eb1a}.input-with-unit input{padding:var(--spacing-sm)var(--spacing-md);font-size:var(--font-size-base);color:var(--text-primary);background:0 0;border:none;flex:1;min-width:0}.input-with-unit input:focus{outline:none}.input-with-unit span{padding:var(--spacing-sm)var(--spacing-md);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);background:#e2e8f0;border-left:2px solid #cbd5e1}.drawing-modal-footer{padding:var(--spacing-md)var(--spacing-lg);border-top:1px solid var(--border-light);background:var(--bg-secondary);justify-content:space-between;align-items:center;display:flex}.drawing-modal-footer-right{gap:var(--spacing-sm);display:flex}.drawing-modal-btn{padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);border:none}.drawing-modal-btn.cancel{background:var(--bg-tertiary);color:var(--text-secondary)}.drawing-modal-btn.cancel:hover{background:var(--border-default)}.drawing-modal-btn.save{background:var(--color-primary);color:var(--text-inverse)}.drawing-modal-btn.save:hover{background:var(--color-primary-hover)}.drawing-modal-btn.delete{color:var(--color-error);border:1px solid var(--color-error);background:0 0}.drawing-modal-btn.delete:hover{background:var(--color-error);color:#fff}.drawing-modal-body.materials-tab{min-height:200px}.add-material-btn{justify-content:center;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm)var(--spacing-md);border:2px dashed var(--border-default);border-radius:var(--radius-md);color:var(--color-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);background:0 0;display:flex}.add-material-btn:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.materials-empty{padding:var(--spacing-xl)var(--spacing-md);color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.materials-empty svg{width:48px;height:48px;margin-bottom:var(--spacing-md);opacity:.5}.materials-empty p{font-size:var(--font-size-sm);margin:0}.materials-list{gap:var(--spacing-sm);margin-top:var(--spacing-md);flex-direction:column;display:flex}.material-item{padding:var(--spacing-sm)var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-md);justify-content:space-between;align-items:center;display:flex}.material-item-info{flex-direction:column;gap:2px;display:flex}.material-item-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-primary)}.material-item-details{font-size:var(--font-size-xs);color:var(--text-muted)}.material-item-right{align-items:center;gap:var(--spacing-sm);display:flex}.material-item-total{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-primary)}.material-item-delete{width:28px;height:28px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.material-item-delete:hover{background:var(--color-error);color:#fff}.material-item-delete svg{width:14px;height:14px}.material-form-inline{gap:var(--spacing-md);flex-direction:column;display:flex}.material-form-field{gap:var(--spacing-xs);flex-direction:column;display:flex}.material-form-field label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.material-form-field input{padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-base);background:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);border:2px solid #cbd5e1}.material-form-field input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #2563eb1a}.material-form-field input.error{border-color:var(--color-error)}.field-error{font-size:var(--font-size-xs);color:var(--color-error)}.material-form-row{gap:var(--spacing-md);grid-template-columns:1fr 1fr;display:grid}.material-form-total{padding:var(--spacing-sm)var(--spacing-md);background:var(--bg-tertiary);border-radius:var(--radius-md);justify-content:space-between;align-items:center;display:flex}.material-form-total span{font-size:var(--font-size-sm);color:var(--text-secondary)}.material-form-total .total-value{font-weight:var(--font-weight-semibold);color:var(--color-primary)}.material-form-actions{gap:var(--spacing-sm);justify-content:flex-end;display:flex}.canvas-wrapper{background:var(--bg-canvas);width:100%;height:100%;position:relative;overflow:hidden}.drawing-canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.drawing-canvas.pan-mode{cursor:grab}.drawing-canvas.panning{cursor:grabbing}.drawing-canvas.selection-mode{cursor:default}.drawing-canvas.dragging{cursor:move}.drawing-canvas.resizing{cursor:nwse-resize}.canvas-zoom-controls{bottom:var(--spacing-md);right:var(--spacing-md);align-items:center;gap:var(--spacing-xs);background:var(--bg-card);border-radius:var(--radius-md);padding:var(--spacing-xs);box-shadow:var(--shadow-md);border:1px solid var(--border-light);z-index:10;display:flex;position:absolute}.zoom-btn{border-radius:var(--radius-sm);background:var(--bg-tertiary);width:32px;height:32px;min-height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;padding:0;display:flex}.zoom-btn:hover:not(:disabled){background:var(--color-primary);color:var(--text-inverse)}.zoom-btn:disabled{opacity:.4;cursor:not-allowed}.zoom-btn svg{width:16px;height:16px}.zoom-level{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);text-align:center;min-width:44px}.canvas-empty-state{text-align:center;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-empty-icon{width:52px;height:52px;margin:0 auto var(--spacing-md);background:var(--color-primary-gradient);border-radius:var(--radius-lg);color:var(--text-inverse);opacity:.8;justify-content:center;align-items:center;display:flex}.canvas-empty-icon svg{width:26px;height:26px}.canvas-empty-state p{font-size:var(--font-size-sm);color:var(--text-muted);max-width:220px;margin:0}.canvas-hint{opacity:.7;margin-top:var(--spacing-sm)!important;font-size:var(--font-size-xs)!important}.canvas-scale-bar{bottom:var(--spacing-md);left:var(--spacing-md);z-index:10;background:var(--bg-card);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);flex-direction:column;align-items:flex-start;gap:4px;display:flex;position:absolute}.scale-bar-line{background:var(--text-secondary);border-radius:2px;min-width:40px;height:4px;position:relative}.scale-bar-line:before,.scale-bar-line:after{content:"";background:var(--text-secondary);width:2px;height:8px;position:absolute;top:-2px}.scale-bar-line:before{left:0}.scale-bar-line:after{right:0}.scale-bar-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.layer-modal-overlay{z-index:1000;padding:var(--spacing-md);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.layer-modal{background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);flex-direction:column;width:100%;max-width:400px;max-height:80vh;display:flex;overflow:hidden}.layer-modal-header{padding:var(--spacing-md)var(--spacing-lg);border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;display:flex}.layer-modal-header h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0}.layer-modal-close{border-radius:var(--radius-sm);width:32px;height:32px;min-height:32px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.layer-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.layer-modal-close svg{width:18px;height:18px}.layer-modal-content{padding:var(--spacing-md);flex:1;overflow-y:auto}.layer-add-btn{width:100%;padding:var(--spacing-sm)var(--spacing-md);background:var(--color-primary);color:var(--text-inverse);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--spacing-md);border:none}.layer-add-btn:hover{background:var(--color-primary-hover)}.layer-add-form{gap:var(--spacing-xs);margin-bottom:var(--spacing-md);display:flex}.layer-add-form input{padding:var(--spacing-sm);border:1px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-size-sm);background:var(--bg-card);flex:1}.layer-add-form input:focus{border-color:var(--color-primary);outline:none}.layer-add-form .btn-primary{padding:var(--spacing-sm)var(--spacing-md);background:var(--color-primary);color:var(--text-inverse);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);border:none}.layer-add-form .btn-primary:hover:not(:disabled){background:var(--color-primary-hover)}.layer-add-form .btn-primary:disabled{opacity:.5;cursor:not-allowed}.layer-add-form .btn-secondary{padding:var(--spacing-sm)var(--spacing-md);background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-light);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast)}.layer-add-form .btn-secondary:hover{background:var(--bg-secondary)}.layer-list{gap:var(--spacing-xs);flex-direction:column;display:flex}.layer-empty{padding:var(--spacing-lg);text-align:center;color:var(--text-tertiary);font-size:var(--font-size-sm)}.layer-item{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:2px solid #0000;display:flex}.layer-item:hover{background:var(--bg-tertiary)}.layer-item.selected{background:var(--color-info-bg);border-color:var(--color-primary)}.layer-item.hidden-layer{opacity:.5}.layer-item-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.layer-item-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-primary)}.layer-item.selected .layer-item-name{color:var(--color-primary)}.layer-item-count{font-size:var(--font-size-xs);color:var(--text-tertiary)}.layer-edit-input{padding:var(--spacing-xs)var(--spacing-sm);border:1px solid var(--color-primary);border-radius:var(--radius-sm);font-size:var(--font-size-sm);background:var(--bg-card);width:100%}.layer-edit-input:focus{outline:none}.layer-item-actions{gap:var(--spacing-xs);display:flex}.layer-action-btn{border-radius:var(--radius-sm);width:28px;height:28px;min-height:28px;color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.layer-action-btn:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.layer-action-btn.delete:hover:not(:disabled){color:var(--color-error)}.layer-action-btn.save:hover{color:var(--color-success)}.layer-action-btn:disabled{opacity:.3;cursor:not-allowed}.layer-action-btn svg{width:14px;height:14px}.tool-panel{background:var(--bg-card);box-shadow:var(--shadow-card);border:1px solid var(--border-light);padding:var(--spacing-md)0;border-bottom:none}.tool-panel-content{max-width:1100px;padding:0 var(--spacing-xl);margin:0 auto}.canvas-tab .tool-panel{border-radius:var(--radius-lg)var(--radius-lg)0 0;border-bottom:none;max-width:1100px;margin:0 auto}.tool-list{gap:var(--spacing-sm);scrollbar-width:none;display:flex;overflow-x:auto}.tool-list::-webkit-scrollbar{display:none}.tool-btn{min-width:60px;min-height:56px;padding:var(--spacing-sm);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);border:none;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:4px;display:flex}.tool-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.tool-btn.active{background:var(--color-primary-gradient);color:var(--text-inverse);box-shadow:var(--shadow-button)}.tool-btn.navigation-tool{border:1px dashed var(--border-medium);background:var(--bg-secondary)}.tool-btn.navigation-tool.active{border-style:solid;border-color:#0000}.tool-btn:active{transform:scale(.97)}.tool-icon{justify-content:center;align-items:center;display:flex}.tool-icon svg{width:20px;height:20px}.tool-name{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}@media (min-width:768px){.tool-btn{gap:var(--spacing-sm);flex-direction:row;min-width:80px;min-height:40px}.tool-icon svg{width:18px;height:18px}.tool-name{font-size:var(--font-size-sm)}}.canvas-tab{flex-direction:column;height:100%;padding-bottom:90px;display:flex;position:relative}.canvas-tab-main{flex-direction:column;flex:1;min-height:0;display:flex}.canvas-area{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);border:1px solid var(--border-light);flex:1;min-height:0;position:relative;overflow:hidden}.canvas-tab>.canvas-tab-main+.tool-panel,.canvas-tab .tool-panel:not(.canvas-tab.fullscreen .tool-panel){z-index:100;border-radius:var(--radius-lg)var(--radius-lg)0 0;border-bottom:none;width:100%;max-width:1100px;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.canvas-controls-left{top:var(--spacing-sm);left:var(--spacing-sm);gap:var(--spacing-xs);z-index:10;flex-direction:column;display:flex;position:absolute}.canvas-controls-right{top:var(--spacing-sm);right:var(--spacing-sm);gap:var(--spacing-xs);z-index:10;flex-direction:column;display:flex;position:absolute}.canvas-control-btn{min-height:36px;padding:0 var(--spacing-sm);justify-content:center;align-items:center;gap:var(--spacing-xs);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-light);cursor:pointer;box-shadow:var(--shadow-sm);transition:all var(--transition-fast);display:flex}.canvas-control-btn:hover{background:var(--color-primary);color:var(--text-inverse);border-color:var(--color-primary)}.canvas-control-btn svg{flex-shrink:0;width:18px;height:18px}.canvas-control-btn .layer-name{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-overflow:ellipsis;white-space:nowrap;max-width:120px;overflow:hidden}.canvas-tab.fullscreen{z-index:9999;background:var(--bg-app);padding:var(--spacing-lg);padding-bottom:88px;position:fixed;inset:0}.canvas-tab.fullscreen .canvas-area{flex:1}.canvas-tab.fullscreen .tool-panel{z-index:10000;border-radius:var(--radius-lg)var(--radius-lg)0 0;width:100%;max-width:1100px;box-shadow:var(--shadow-lg);position:fixed;bottom:0;left:50%;transform:translate(-50%)}@media (min-width:768px){.canvas-tab-main{flex:1;min-width:0}}.layer-material-list{background-color:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden}.layer-material-header{padding:var(--spacing-md)var(--spacing-lg);border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;gap:var(--spacing-md);display:flex}.layer-material-title h3{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0}.layer-material-count{font-size:var(--font-size-xs);color:var(--text-tertiary)}.add-material-btn{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm)var(--spacing-md);background:var(--color-primary-gradient);color:var(--text-inverse);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;display:flex}.add-material-btn:hover{opacity:.9}.add-material-btn:active{transform:scale(.98)}.add-material-btn svg{width:16px;height:16px}.layer-material-empty{padding:var(--spacing-2xl);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-icon{background-color:var(--bg-tertiary);border-radius:var(--radius-xl);width:64px;height:64px;margin-bottom:var(--spacing-md);color:var(--text-muted);justify-content:center;align-items:center;display:flex}.empty-icon svg{width:32px;height:32px}.layer-material-empty p{font-size:var(--font-size-base);color:var(--text-tertiary);margin:0 0 var(--spacing-lg)0}.add-material-btn-secondary{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md)var(--spacing-lg);background-color:var(--bg-tertiary);color:var(--color-primary);border:1px dashed var(--color-primary);border-radius:var(--radius-lg);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);display:flex}.add-material-btn-secondary:hover{background-color:var(--color-info-bg)}.add-material-btn-secondary svg{width:16px;height:16px}.material-cards{flex-direction:column;display:flex}.material-card{padding:var(--spacing-lg);border-bottom:1px solid var(--border-light)}.material-card:last-child{border-bottom:none}.material-card-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:flex-start;display:flex}.material-info{gap:var(--spacing-xs);flex-direction:column;display:flex}.material-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.material-layer{font-size:var(--font-size-xs);color:var(--text-tertiary)}.material-actions{gap:var(--spacing-xs);display:flex}.material-action-btn{border-radius:var(--radius-md);background-color:var(--bg-tertiary);cursor:pointer;width:32px;height:32px;min-height:32px;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;padding:0;display:flex}.material-action-btn svg{width:16px;height:16px}.material-action-btn.edit{color:var(--color-primary)}.material-action-btn.edit:hover{background-color:var(--color-info-bg)}.material-action-btn.delete{color:var(--color-error)}.material-action-btn.delete:hover{background-color:var(--color-error-bg)}.material-details{gap:var(--spacing-md);grid-template-columns:repeat(3,1fr);display:grid}.material-detail{text-align:center}.material-detail-label{font-size:var(--font-size-xs);color:var(--text-tertiary);margin-bottom:var(--spacing-xs);display:block}.material-detail-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.material-detail-value.total{color:var(--color-primary)}.layer-material-total{padding:var(--spacing-lg);background-color:var(--bg-tertiary);border-top:1px solid var(--border-light);justify-content:space-between;align-items:center;display:flex}.layer-total-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.layer-total-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}@media (min-width:768px){.material-cards{grid-template-columns:repeat(2,1fr);display:grid}.material-card{border-bottom:none;border-right:1px solid var(--border-light)}.material-card:nth-child(2n){border-right:none}.material-card:nth-last-child(-n+2){border-bottom:none}}@media (min-width:1024px){.material-cards{grid-template-columns:repeat(3,1fr)}.material-card:nth-child(2n){border-right:1px solid var(--border-light)}.material-card:nth-child(3n){border-right:none}}.material-form-overlay{z-index:1000;padding:var(--spacing-md);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.material-form-modal{background-color:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:400px;max-height:90vh;animation:.2s ease-out slideUp;overflow-y:auto}.material-form-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-light)}.material-form-header h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0 0 var(--spacing-xs)0}.material-form-layer{font-size:var(--font-size-sm);color:var(--text-tertiary)}.material-form{padding:var(--spacing-lg);gap:var(--spacing-md);flex-direction:column;display:flex}.form-group{gap:var(--spacing-xs);flex-direction:column;display:flex}.form-group label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.form-group input{padding:var(--spacing-md);border:1px solid var(--border-medium);border-radius:var(--radius-lg);font-size:var(--font-size-base);background-color:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast)}.form-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-info-bg);outline:none}.form-group input.error{border-color:var(--color-error)}.form-group input::placeholder{color:var(--text-muted)}.form-error{font-size:var(--font-size-xs);color:var(--color-error)}.form-row{gap:var(--spacing-md);grid-template-columns:1fr 1fr;display:grid}.form-total{padding:var(--spacing-md);background-color:var(--bg-tertiary);border-radius:var(--radius-lg);margin-top:var(--spacing-sm);justify-content:space-between;align-items:center;display:flex}.form-total-label{font-size:var(--font-size-sm);color:var(--text-secondary)}.form-total-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}.form-actions{gap:var(--spacing-md);margin-top:var(--spacing-md);display:flex}.form-actions button{padding:var(--spacing-md);border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-fast);flex:1}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-medium)}.btn-secondary:hover{background-color:var(--bg-secondary)}.btn-primary{background:var(--color-primary-gradient);color:var(--text-inverse);border:none}.btn-primary:hover{opacity:.9}.btn-primary:active{transform:scale(.98)}@media (min-width:768px){.material-form-modal{max-width:480px}}.materials-tab{gap:var(--spacing-md);flex-direction:column;display:flex}.materials-layer-selector{background-color:var(--bg-card);border-radius:var(--radius-xl);padding:var(--spacing-md);box-shadow:var(--shadow-card)}.materials-section-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--spacing-md)0}.materials-layer-list{gap:var(--spacing-sm);-webkit-overflow-scrolling:touch;padding-bottom:var(--spacing-xs);display:flex;overflow-x:auto}.materials-layer-btn{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);background-color:var(--bg-tertiary);border-radius:var(--radius-lg);cursor:pointer;min-width:100px;transition:all var(--transition-fast);border:2px solid #0000;flex-direction:column;flex-shrink:0;display:flex}.materials-layer-btn:hover{background-color:var(--bg-secondary)}.materials-layer-btn.active{background-color:var(--color-info-bg);border-color:var(--color-primary)}.materials-layer-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.materials-layer-count{font-size:var(--font-size-xs);color:var(--text-tertiary)}.materials-layer-btn.active .materials-layer-name{color:var(--color-primary)}@media (min-width:768px){.materials-tab{gap:var(--spacing-lg)}.materials-layer-list{flex-wrap:wrap}.materials-layer-btn{flex:1;min-width:120px;max-width:200px}}@media (min-width:1024px){.materials-layer-btn{min-width:140px}}.materials-empty-state{padding:var(--spacing-2xl);text-align:center;color:var(--text-tertiary);background-color:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);flex-direction:column;justify-content:center;align-items:center;display:flex}.materials-empty-icon{width:64px;height:64px;margin-bottom:var(--spacing-md);opacity:.5}.materials-empty-state p{font-size:var(--font-size-base);margin:0}.materials-hint{opacity:.7;margin-top:var(--spacing-sm)!important;font-size:var(--font-size-sm)!important}.material-summary{background-color:var(--bg-card);border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:var(--shadow-card)}.material-summary-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--spacing-md)0}.material-summary-empty{padding:var(--spacing-xl)var(--spacing-md);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.material-summary-empty-icon{border-radius:var(--radius-full);background-color:var(--bg-tertiary);width:64px;height:64px;margin-bottom:var(--spacing-md);justify-content:center;align-items:center;display:flex}.material-summary-empty-icon svg{width:32px;height:32px;color:var(--text-muted)}.material-summary-empty p{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--text-secondary);margin:0 0 var(--spacing-xs)0}.material-summary-empty span{font-size:var(--font-size-sm);color:var(--text-muted)}.material-summary-list{gap:var(--spacing-sm);flex-direction:column;display:flex}.material-summary-item{background-color:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-md);transition:background-color var(--transition-fast)}.material-summary-item:hover{background-color:var(--bg-secondary)}.material-summary-item-header{margin-bottom:var(--spacing-sm);justify-content:space-between;align-items:flex-start;display:flex}.material-summary-item-info{gap:var(--spacing-xs);flex-direction:column;display:flex}.material-summary-item-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.material-summary-item-layer{font-size:var(--font-size-xs);color:var(--text-tertiary);background-color:var(--bg-primary);padding:2px var(--spacing-sm);border-radius:var(--radius-sm);width:fit-content;display:inline-block}.material-summary-item-total{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-primary)}.material-summary-item-details{gap:var(--spacing-lg);display:flex}.material-summary-detail{flex-direction:column;gap:2px;display:flex}.material-summary-detail-label{font-size:var(--font-size-xs);color:var(--text-muted)}.material-summary-detail-value{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary)}@media (min-width:768px){.material-summary-list{gap:var(--spacing-md)}.material-summary-item{padding:var(--spacing-lg)}.material-summary-item-details{gap:var(--spacing-xl)}}.cost-summary{background:var(--color-primary-gradient);border-radius:var(--radius-xl);padding:var(--spacing-xl);color:var(--text-inverse);text-align:center;box-shadow:var(--shadow-card)}.cost-summary-label{font-size:var(--font-size-sm);opacity:.9;margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.05em}.cost-summary-value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:1.2}.cost-summary-hint{font-size:var(--font-size-xs);opacity:.75;margin-top:var(--spacing-sm)}@media (min-width:768px){.cost-summary{padding:var(--spacing-2xl)}.cost-summary-value{font-size:var(--font-size-4xl)}}.summary-tab{gap:var(--spacing-md);flex-direction:column;display:flex}@media (min-width:768px){.summary-tab{gap:var(--spacing-lg)}}