.layout{min-height:100vh;display:flex;flex-direction:column}.layout-header{background-color:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#ffffffe6}.layout-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg);width:100%}.layout-header-content{display:flex;justify-content:space-between;align-items:center}.layout-title{font-size:20px;font-weight:600;color:var(--color-text);letter-spacing:-.02em;transition:color .2s ease}.layout-title:hover{color:var(--color-primary)}.layout-nav{display:flex;gap:var(--spacing-lg);align-items:center}.layout-nav-link{background:none;border:none;font-size:14px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:all .2s ease}.layout-nav-link:hover{color:var(--color-primary);background-color:var(--color-surface)}.layout-nav-link.active{color:var(--color-primary);background-color:var(--color-surface);font-weight:600}@media (max-width: 768px){.layout-header-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.layout-nav{width:100%}.layout-nav-link{width:100%;text-align:left;padding:var(--spacing-sm) var(--spacing-md)}}.layout-main{flex:1;padding:var(--spacing-xl) 0}.projects-index{width:100%}.projects-header{margin-bottom:var(--spacing-2xl);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg)}.projects-actions{display:flex;gap:var(--spacing-md);flex-shrink:0}@media (max-width: 768px){.projects-header{flex-direction:column}.projects-actions{width:100%;flex-direction:column}.projects-actions .btn{width:100%;justify-content:center}}.projects-title{font-size:32px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.projects-subtitle{font-size:16px;color:var(--color-text-secondary)}.projects-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary);background-color:var(--color-surface);border-radius:var(--radius-lg);border:1px dashed var(--color-border)}.projects-empty p{margin-bottom:var(--spacing-lg)}.projects-section{margin-bottom:var(--spacing-2xl)}.projects-section:last-child{margin-bottom:0}.projects-section-title{font-size:20px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-lg);letter-spacing:-.02em}.design-card{cursor:pointer}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-lg)}.project-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all .2s ease;cursor:pointer}.project-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.project-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-md)}.project-card-title{font-size:18px;font-weight:600;color:var(--color-text);flex:1}.project-card-status{font-size:12px;font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-surface);border-radius:var(--radius-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.project-card-description{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-md);line-height:1.5}.project-card-footer{display:flex;justify-content:space-between;font-size:12px;color:var(--color-text-secondary);padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.project-card-meta{font-size:12px;color:var(--color-text-secondary)}.btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--spacing-xs)}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-bg);border-color:var(--color-primary)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn:disabled:hover{background-color:inherit;border-color:inherit;transform:none}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1002;padding:var(--spacing-lg)}.modal-content{background-color:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:500px;max-height:90vh;display:flex;flex-direction:column}.modal-content--wide{max-width:960px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);gap:var(--spacing-md)}.modal-header-left{display:flex;flex-direction:column;gap:4px;min-width:0}.modal-subtitle{margin:0;font-size:.9rem;color:var(--color-text-secondary)}.modal-header-right{display:flex;align-items:center;gap:var(--spacing-sm)}.modal-title{font-size:20px;font-weight:600;color:var(--color-text);margin:0}.modal-close{background:none;border:none;font-size:28px;color:var(--color-text-secondary);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s ease}.modal-close:hover{background-color:var(--color-surface);color:var(--color-text)}.modal-body{padding:var(--spacing-lg);flex:1;display:flex;flex-direction:column;overflow:hidden}.modal-body-static{flex:0 0 auto}.modal-body-content{flex:1 1 auto;overflow-y:auto}.modal-form-group{margin-bottom:var(--spacing-lg)}.modal-label{display:block;font-size:14px;font-weight:500;color:var(--color-text);margin-bottom:var(--spacing-sm)}.modal-required{color:var(--color-primary)}.modal-input,.modal-textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;background-color:var(--color-bg);color:var(--color-text);transition:border-color .2s ease;font-family:inherit}.modal-input:focus,.modal-textarea:focus{outline:none;border-color:var(--color-primary)}.modal-textarea{resize:vertical;min-height:100px}.modal-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--spacing-md)}.modal-radio-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.modal-radio{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-sm);transition:background-color .2s ease}.modal-radio:hover{background-color:var(--color-surface)}.modal-radio input[type=radio]{margin:0;cursor:pointer}.modal-radio span{font-size:14px;color:var(--color-text)}.project-detail{width:100%}.project-detail-error{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.project-detail-header{margin-bottom:var(--spacing-xl);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg)}.project-detail-back{display:inline-block;color:var(--color-text-secondary);text-decoration:none;font-size:14px;margin-bottom:var(--spacing-md);transition:color .2s ease}.project-detail-back:hover{color:var(--color-primary)}.project-detail-title{font-size:32px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.project-detail-description{font-size:16px;color:var(--color-text-secondary);margin-top:var(--spacing-sm)}.project-detail-meta{display:flex;gap:var(--spacing-lg);padding:var(--spacing-md) 0;margin-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border);flex-wrap:wrap}.project-detail-meta-item{font-size:14px;color:var(--color-text-secondary)}.project-detail-meta-item strong{color:var(--color-text);margin-right:var(--spacing-xs)}.designs-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary);background-color:var(--color-surface);border-radius:var(--radius-lg);border:1px dashed var(--color-border)}.designs-empty p{margin-bottom:var(--spacing-md)}.designs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-lg)}.design-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all .2s ease;cursor:pointer}.design-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.design-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-md)}.design-card-title{font-size:16px;font-weight:600;color:var(--color-text);flex:1}.design-card-badge{font-size:11px;font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-sm);text-transform:none;letter-spacing:0;margin-left:var(--spacing-sm)}.design-card-status{font-size:11px;font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-surface);border-radius:var(--radius-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.design-card-description{font-size:13px;color:var(--color-text-secondary);margin-bottom:var(--spacing-md);line-height:1.5}.design-card-footer{padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.design-card-meta{font-size:12px;color:var(--color-text-secondary)}@media (max-width: 768px){.project-detail-header{flex-direction:column}.project-detail-meta{flex-direction:column;gap:var(--spacing-sm)}}.back-button{background:none;border:none;color:var(--color-text-secondary);font-size:14px;cursor:pointer;padding:0;margin-bottom:var(--spacing-md);transition:color .2s ease;text-align:left}.back-button:hover{color:var(--color-primary)}.design-dashboard{width:100%}.design-dashboard-error{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.design-dashboard-header{margin-bottom:var(--spacing-xl);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg)}.design-dashboard-back{display:inline-block;color:var(--color-text-secondary);text-decoration:none;font-size:14px;margin-bottom:var(--spacing-md);transition:color .2s ease}.design-dashboard-back:hover{color:var(--color-primary)}.design-dashboard-title{font-size:32px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.design-dashboard-title-editable{cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background-color .2s ease}.design-dashboard-title-editable:hover{background-color:var(--color-surface)}.design-dashboard-title-input{font-size:32px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em;padding:var(--spacing-xs) var(--spacing-sm);border:2px solid var(--color-primary);border-radius:var(--radius-sm);background-color:var(--color-bg);width:100%;max-width:600px;font-family:inherit}.design-dashboard-title-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0066cc1a}.design-dashboard-description{font-size:16px;color:var(--color-text-secondary);margin-top:var(--spacing-sm)}.design-dashboard-actions{display:flex;gap:var(--spacing-md);flex-shrink:0}.design-dashboard-content{display:grid;grid-template-columns:1fr 320px;gap:var(--spacing-xl);overflow:hidden}.design-dashboard-main{min-height:600px;overflow:hidden}.design-preview{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);min-height:600px;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);overflow:auto;max-width:100%;box-sizing:border-box}.design-preview-wrapper{width:100%;max-width:100%;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;box-sizing:border-box;min-height:200px}.design-preview-stage{background-color:#fff;box-shadow:var(--shadow-lg);display:block}.design-preview-placeholder{text-align:center;color:var(--color-text-secondary)}.design-preview-placeholder p{font-size:18px;font-weight:500;margin-bottom:var(--spacing-sm);color:var(--color-text)}.design-preview-hint{font-size:14px;color:var(--color-text-secondary)}.design-dashboard-nav{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-md)}.design-dashboard-nav-item{padding:var(--spacing-sm) var(--spacing-md);background:none;border:none;border-bottom:2px solid transparent;font-size:14px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;margin-bottom:calc(-1 * var(--spacing-md) - 2px)}.design-dashboard-nav-item:hover{color:var(--color-text)}.design-dashboard-nav-item.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.design-dashboard-nav-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.design-dashboard-nav-item:disabled{opacity:.5;cursor:not-allowed}.design-dashboard-sidebar{display:flex;flex-direction:column;gap:var(--spacing-lg)}.design-dashboard-section{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg)}.design-dashboard-section-title{font-size:16px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-md)}.design-dashboard-info{display:flex;flex-direction:column;gap:var(--spacing-md)}.design-dashboard-info-item{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border)}.design-dashboard-info-item:last-child{border-bottom:none;padding-bottom:0}.design-dashboard-info-label{font-size:14px;color:var(--color-text-secondary)}.design-dashboard-info-value{font-size:14px;font-weight:500;color:var(--color-text)}.design-dashboard-link{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:14px;padding:0;text-decoration:underline}.design-dashboard-link:hover{color:var(--color-primary-hover)}.design-dashboard-toggle{padding:var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.design-dashboard-toggle-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;margin-bottom:var(--spacing-xs)}.design-dashboard-toggle-input{width:18px;height:18px;cursor:pointer;accent-color:var(--color-primary)}.design-dashboard-toggle-text{font-size:14px;font-weight:500;color:var(--color-text)}.design-dashboard-toggle-hint{font-size:12px;color:var(--color-text-secondary);margin-top:var(--spacing-xs);margin-left:calc(18px + var(--spacing-sm))}.design-dashboard-brandkit{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.design-dashboard-brandkit-label{font-size:13px;font-weight:500;color:var(--color-text);display:flex;align-items:center;gap:var(--spacing-xs)}.design-dashboard-brandkit-inherited{font-size:11px;font-weight:400;color:var(--color-text-secondary);font-style:italic}.design-dashboard-brandkit-select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;background-color:var(--color-bg);color:var(--color-text);cursor:pointer;transition:border-color .2s ease;font-family:inherit}.design-dashboard-brandkit-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0066cc1a}.design-dashboard-brandkit-select:hover{border-color:var(--color-primary)}.design-dashboard-subdesigns{display:flex;flex-direction:column;gap:var(--spacing-sm)}.design-dashboard-subdesign-item{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;display:flex;justify-content:space-between;align-items:center}.design-dashboard-subdesign-name{font-size:14px;font-weight:500;color:var(--color-text)}.design-dashboard-subdesign-channel{font-size:12px;color:var(--color-text-secondary);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-bg);border-radius:var(--radius-sm)}.design-dashboard-subdesign-name-editable{cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:background-color .2s ease}.design-dashboard-subdesign-name-editable:hover{background-color:var(--color-surface)}.design-dashboard-subdesign-name-input{flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:2px solid var(--color-primary);border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--color-text);background-color:var(--color-bg);font-family:inherit}.design-dashboard-subdesign-name-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0066cc1a}.design-dashboard-subdesign-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all .2s ease}.design-dashboard-subdesign-item:hover{border-color:var(--color-primary);background-color:var(--color-bg)}.design-dashboard-subdesign-actions{display:flex;gap:var(--spacing-xs);margin-left:auto}.design-dashboard-subdesign-action{background:none;border:none;font-size:16px;cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:background-color .2s ease;display:flex;align-items:center;justify-content:center}.design-dashboard-subdesign-action:hover{background-color:var(--color-surface)}.design-dashboard-subnav{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-md);flex-wrap:wrap}.design-dashboard-subnav-item{background:none;border:1px solid var(--color-border);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-size:13px;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;white-space:nowrap}.design-dashboard-subnav-item:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-surface)}.design-dashboard-subnav-item.active{border-color:var(--color-primary);color:var(--color-primary);background-color:#0066cc1a;font-weight:500}.design-dashboard-subnav-siblings{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.design-dashboard-settings{display:flex;flex-direction:column;gap:var(--spacing-md)}.design-dashboard-setting-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.design-dashboard-setting-item label{font-size:13px;font-weight:500;color:var(--color-text)}.design-dashboard-input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;background-color:var(--color-bg);color:var(--color-text);transition:border-color .2s ease}.design-dashboard-input:focus{outline:none;border-color:var(--color-primary)}@media (max-width: 1024px){.design-dashboard-content{grid-template-columns:1fr}.design-dashboard-header{flex-direction:column}.design-dashboard-actions{width:100%;flex-direction:column}.design-dashboard-actions .btn{width:100%;justify-content:center}}.generation-page{width:100%}.generation-header{margin-bottom:var(--spacing-xl)}.generation-title{font-size:28px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.generation-subtitle{font-size:16px;color:var(--color-text-secondary)}.generation-content{max-width:100%}.generation-form{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.generation-form-section{margin-bottom:var(--spacing-xl)}.generation-form-section:last-of-type{margin-bottom:var(--spacing-lg)}.generation-label{display:block;font-size:16px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-md)}.generation-input-group{margin-bottom:var(--spacing-md)}.generation-input-group label{display:block;font-size:14px;font-weight:500;color:var(--color-text);margin-bottom:var(--spacing-xs)}.generation-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;background-color:var(--color-bg);color:var(--color-text);transition:border-color .2s ease}.generation-input:focus{outline:none;border-color:var(--color-primary)}.generation-actions{display:flex;gap:var(--spacing-md);justify-content:flex-end;padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.generation-button{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.generation-button-primary{background-color:var(--color-primary);color:#fff}.generation-button-primary:hover{background-color:var(--color-primary-hover)}.generation-button-secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.generation-button-secondary:hover{background-color:var(--color-bg);border-color:var(--color-primary)}.generation-results-content{width:100%}.generation-results-stats{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.generation-stat{display:flex;flex-direction:column;align-items:center;flex:1}.generation-stat-value{font-size:24px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-xs)}.generation-stat-label{font-size:14px;color:var(--color-text-secondary)}.generation-progress-bar{width:100%;height:8px;background-color:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-xl)}.generation-progress-fill{height:100%;background-color:var(--color-primary);transition:width .3s ease;border-radius:var(--radius-md)}.generation-channel-section{margin-bottom:var(--spacing-2xl)}.generation-channel-section:last-child{margin-bottom:0}.generation-channel-title{font-size:20px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-sm)}.generation-channel-count{font-size:14px;font-weight:400;color:var(--color-text-secondary)}.generation-channel-empty{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.generation-assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-lg)}.generation-asset-card{background-color:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all .2s ease}.generation-asset-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.generation-asset-card.selected{border-color:var(--color-primary);box-shadow:var(--shadow-lg)}.generation-asset-preview{width:100%;aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;transition:opacity .2s ease}.generation-asset-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);padding:var(--spacing-md);opacity:0;transition:opacity .2s ease}.generation-asset-card:hover .generation-asset-overlay{opacity:1}.generation-asset-name{color:#fff;font-size:14px;font-weight:500}.generation-asset-footer{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md);border-top:1px solid var(--color-border)}.generation-asset-id{font-size:12px;color:var(--color-text-secondary)}.generation-asset-action{padding:var(--spacing-xs) var(--spacing-sm);background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:12px;color:var(--color-text);cursor:pointer;transition:all .2s ease}.generation-asset-action:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.one-off-generation-content{display:grid;grid-template-columns:1fr 400px;gap:var(--spacing-xl);max-width:100%;overflow:hidden}.one-off-generation-preview{min-height:600px;max-width:100%;overflow:hidden}.one-off-previews-container{width:100%;max-width:100%;overflow:hidden}.one-off-previews-scroll{display:flex;flex-direction:column;gap:var(--spacing-lg);max-height:calc(100vh - 300px);overflow-y:auto;overflow-x:hidden;padding-right:var(--spacing-sm)}.one-off-preview-item{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:all .2s ease;width:100%;max-width:100%;box-sizing:border-box}.one-off-preview-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.one-off-preview-item.active{border-color:var(--color-primary);border-width:2px;background-color:#0066cc0d}.one-off-preview-label{font-size:14px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.5px}.one-off-canvas-wrapper{display:flex;align-items:center;justify-content:center;background-color:#fff;border-radius:var(--radius-md);padding:var(--spacing-lg);overflow:hidden;width:100%;max-width:100%;box-sizing:border-box}.one-off-preview-stage{background-color:#fff;box-shadow:var(--shadow-md);max-width:100%}.one-off-generation-form{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);height:fit-content;position:sticky;top:var(--spacing-xl)}.one-off-text-inputs{display:flex;flex-direction:column;gap:var(--spacing-md)}.one-off-no-text-layers{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary)}.one-off-hint{font-size:13px;margin-top:var(--spacing-sm);color:var(--color-text-secondary)}.generation-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:600px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-2xl)}.generation-spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-lg)}.generation-loading-state p{font-size:16px;color:var(--color-text-secondary)}.generation-loading{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.generation-upload-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-2xl)}.generation-upload-loading p{font-size:16px;color:var(--color-text-secondary);margin-top:var(--spacing-lg)}.generation-result{display:flex;flex-direction:column;gap:var(--spacing-lg)}.generation-result-preview{width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);min-height:500px}.generation-result-content{text-align:center;color:#fff;padding:var(--spacing-xl)}.generation-result-content h3{font-size:24px;font-weight:600;margin-bottom:var(--spacing-sm)}.generation-result-content p{font-size:16px;opacity:.9}.generation-result-actions{display:flex;gap:var(--spacing-md);justify-content:center}.generation-table-container{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.generation-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border)}.generation-table-info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.generation-table-count{font-size:14px;font-weight:600;color:var(--color-text)}.generation-table-fields{font-size:12px;color:var(--color-text-secondary)}.generation-table-wrapper{overflow-x:auto;margin-bottom:var(--spacing-lg)}.generation-table{width:100%;border-collapse:collapse;font-size:14px}.generation-table thead{background-color:var(--color-surface)}.generation-table-header-cell{padding:var(--spacing-md);text-align:left;font-weight:600;color:var(--color-text);border-bottom:2px solid var(--color-border);white-space:nowrap}.generation-table-row-number{width:50px;padding:var(--spacing-md);text-align:center;font-weight:600;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border)}.generation-table-status{width:100px;padding:var(--spacing-md);text-align:center;border-bottom:1px solid var(--color-border)}.generation-table-row{border-bottom:1px solid var(--color-border);transition:background-color .2s ease}.generation-table-row:hover{background-color:var(--color-surface)}.generation-table-row-warning{background-color:#ffc1071a}.generation-table-row-warning:hover{background-color:#ffc10726}.generation-table-cell{padding:var(--spacing-md);color:var(--color-text);border-bottom:1px solid var(--color-border)}.generation-table-empty{color:var(--color-text-secondary);font-style:italic}.generation-table-warnings{position:relative;display:inline-flex;align-items:center;cursor:help}.generation-table-warning-icon{font-size:18px}.generation-table-warning-tooltip{position:absolute;bottom:100%;right:0;margin-bottom:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-text);color:#fff;border-radius:var(--radius-md);font-size:12px;white-space:normal;max-width:300px;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:10;box-shadow:var(--shadow-lg)}.generation-table-warning-tooltip>div{margin-bottom:var(--spacing-xs)}.generation-table-warning-tooltip>div:last-child{margin-bottom:0}.generation-table-warning-tooltip:after{content:"";position:absolute;top:100%;right:20px;border:6px solid transparent;border-top-color:var(--color-text)}.generation-table-warnings:hover .generation-table-warning-tooltip{opacity:1}.generation-table-valid{color:#4caf50;font-weight:600;font-size:16px}.generation-table-empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary)}.generation-table-actions{display:flex;justify-content:flex-end;padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}@media (max-width: 1024px){.one-off-generation-content{grid-template-columns:1fr}.one-off-generation-form{position:static}.generation-table-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.generation-table-wrapper{overflow-x:scroll}}.pre-design-editor{width:100%;max-width:800px;margin:0 auto}.pre-design-editor-header{margin-bottom:var(--spacing-2xl);text-align:center}.pre-design-editor-back{display:inline-block;color:var(--color-text-secondary);text-decoration:none;font-size:14px;margin-bottom:var(--spacing-lg);transition:color .2s ease}.pre-design-editor-back:hover{color:var(--color-primary)}.pre-design-editor-title{font-size:32px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.pre-design-editor-subtitle{font-size:16px;color:var(--color-text-secondary)}.pre-design-editor-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-2xl)}.pre-design-editor-option{background-color:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);cursor:pointer;transition:all .2s ease;display:flex;align-items:flex-start;gap:var(--spacing-md);position:relative}.pre-design-editor-option:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.pre-design-editor-option.selected{border-color:var(--color-primary);background-color:#0066cc0d;box-shadow:var(--shadow-md)}.pre-design-editor-option-icon{font-size:32px;flex-shrink:0}.pre-design-editor-option-content{flex:1}.pre-design-editor-option-title{font-size:18px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-xs)}.pre-design-editor-option-description{font-size:14px;color:var(--color-text-secondary);line-height:1.5}.pre-design-editor-option-check{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:24px;height:24px;background-color:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.pre-design-editor-option-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.pre-design-editor-option-badge{position:absolute;top:var(--spacing-md);right:var(--spacing-md);font-size:11px;font-weight:600;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-surface);color:var(--color-text-secondary);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px}.pre-design-editor-actions{display:flex;justify-content:flex-end;gap:var(--spacing-md);padding-top:var(--spacing-xl);border-top:1px solid var(--color-border)}.btn.disabled{opacity:.5;cursor:not-allowed}.btn.disabled:hover{background-color:var(--color-primary)}.templates{width:100%;max-width:800px;margin:0 auto}.templates-header{margin-bottom:var(--spacing-2xl);text-align:center}.templates-back{display:inline-block;color:var(--color-text-secondary);text-decoration:none;font-size:14px;margin-bottom:var(--spacing-lg);transition:color .2s ease}.templates-back:hover{color:var(--color-primary)}.templates-title{font-size:32px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.templates-subtitle{font-size:16px;color:var(--color-text-secondary)}.templates-content{margin-top:var(--spacing-2xl)}.templates-placeholder{text-align:center;padding:var(--spacing-2xl);background-color:var(--color-surface);border-radius:var(--radius-lg);border:1px dashed var(--color-border)}.templates-placeholder-icon{font-size:64px;margin-bottom:var(--spacing-md)}.templates-placeholder-title{font-size:24px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-md)}.templates-placeholder-description{font-size:16px;color:var(--color-text-secondary);line-height:1.6;max-width:500px;margin:0 auto}.editor{width:100%;height:calc(100vh - 80px);display:flex;flex-direction:column;overflow:hidden}.editor-header{display:flex;justify-content:space-between;align-items:flex-start;padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-md)}.editor-header-left{display:flex;align-items:center;gap:var(--spacing-md)}.editor-back{color:var(--color-text-secondary);text-decoration:none;font-size:14px;transition:color .2s ease}.editor-back:hover{color:var(--color-primary)}.editor-title-section{display:flex;align-items:center;gap:var(--spacing-md)}.editor-title-input{font-size:24px;font-weight:600;color:var(--color-text);border:none;background:transparent;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);min-width:200px;transition:background-color .2s ease}.editor-title-input:hover{background-color:var(--color-surface)}.editor-title-input:focus{outline:none;background-color:var(--color-surface);border:1px solid var(--color-border)}.editor-saved-indicator{font-size:14px;color:var(--color-primary);font-weight:500;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.editor-header-actions{display:flex;gap:var(--spacing-md)}.editor-content{display:flex;flex:1;gap:var(--spacing-lg);overflow:hidden}.editor-toolbar{width:250px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);overflow-y:auto;flex-shrink:0}.editor-toolbar-section{margin-bottom:var(--spacing-xl)}.editor-toolbar-section:last-child{margin-bottom:0}.editor-toolbar-title{font-size:14px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.5px}.editor-toolbar-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm)}.editor-toolbar-buttons .btn{width:100%;justify-content:center}.editor-canvas-size{display:flex;align-items:center;gap:var(--spacing-sm)}.editor-canvas-size span{color:var(--color-text-secondary)}.editor-input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;background-color:var(--color-bg);color:var(--color-text);transition:border-color .2s ease;width:100%}.editor-input:focus{outline:none;border-color:var(--color-primary)}.editor-main{flex:1;display:flex;gap:var(--spacing-lg);overflow:hidden}.editor-canvas-container{flex:1;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);overflow:auto;display:flex;align-items:center;justify-content:center}.editor-stage{background-color:#fff;box-shadow:var(--shadow-lg)}.editor-sidebar{width:280px;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);overflow-y:auto;flex-shrink:0}.editor-sidebar-section{margin-bottom:var(--spacing-xl)}.editor-sidebar-section:last-child{margin-bottom:0}.editor-sidebar-title{font-size:14px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-md);text-transform:uppercase;letter-spacing:.5px}.editor-sidebar-empty{font-size:14px;color:var(--color-text-secondary);text-align:center;padding:var(--spacing-md)}.editor-layers-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.editor-layer-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.editor-layer-item:hover{border-color:var(--color-primary);background-color:#0066cc0d}.editor-layer-item.selected{border-color:var(--color-primary);background-color:#0066cc1a}.editor-layer-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:var(--color-text-secondary);flex-shrink:0}.editor-layer-name{flex:1;font-size:14px;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-layer-delete{width:20px;height:20px;border:none;background:none;color:var(--color-text-secondary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s ease;flex-shrink:0}.editor-layer-delete:hover{background-color:var(--color-border);color:var(--color-text)}.editor-layer-delete:disabled{opacity:.3;cursor:not-allowed}.editor-layer-delete:disabled:hover{background-color:transparent}.editor-layer-item.inherited{border-left:3px solid var(--color-primary)}.editor-layer-item.overridden{background-color:#ffc1071a}.editor-layer-badge{display:inline-block;margin-left:var(--spacing-xs);font-size:12px;color:var(--color-primary);opacity:.7}.editor-layer-badge.overridden{color:#ff9800}.editor-layer-actions{display:flex;align-items:center;gap:var(--spacing-xs)}.editor-layer-reset{width:20px;height:20px;border:none;background:none;color:var(--color-text-secondary);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all .2s ease;flex-shrink:0}.editor-layer-reset:hover{background-color:var(--color-border);color:var(--color-primary)}.editor-subnav{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-border);margin-bottom:var(--spacing-md);flex-wrap:wrap}.editor-subnav-item{background:none;border:1px solid var(--color-border);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-size:13px;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;white-space:nowrap}.editor-subnav-item:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-surface)}.editor-subnav-item.active{border-color:var(--color-primary);color:var(--color-primary);background-color:#0066cc1a;font-weight:500}.editor-subnav-siblings{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.editor-properties{display:flex;flex-direction:column;gap:var(--spacing-md)}.editor-property{display:flex;flex-direction:column;gap:var(--spacing-xs)}.editor-property label{font-size:13px;font-weight:500;color:var(--color-text)}@media (max-width: 1024px){.editor-content{flex-direction:column}.editor-toolbar{width:100%;max-height:200px}.editor-sidebar{width:100%;max-height:300px}}.brand-center{width:100%}.brand-center-header{margin-bottom:var(--spacing-xl)}.brand-center-title{font-size:32px;font-weight:600;color:var(--color-text);margin-bottom:var(--spacing-sm);letter-spacing:-.02em}.brand-center-subtitle{font-size:16px;color:var(--color-text-secondary)}.brand-center-tabs{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border)}.brand-center-tab{padding:var(--spacing-md) var(--spacing-lg);background:none;border:none;border-bottom:2px solid transparent;font-size:16px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease;margin-bottom:-1px}.brand-center-tab:hover{color:var(--color-text)}.brand-center-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.brand-center-content{width:100%}.brand-center-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.brand-center-section-title{font-size:24px;font-weight:600;color:var(--color-text)}.brand-center-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary);background-color:var(--color-surface);border-radius:var(--radius-lg);border:1px dashed var(--color-border)}.brand-kits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-lg)}.brand-kit-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all .2s ease}.brand-kit-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.brand-kit-card-header{margin-bottom:var(--spacing-md)}.brand-kit-card-title{font-size:18px;font-weight:600;color:var(--color-text)}.brand-kit-logo{margin-bottom:var(--spacing-md);padding:var(--spacing-md);background-color:var(--color-surface);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;min-height:100px}.brand-kit-logo-image{max-width:100%;max-height:100px;object-fit:contain}.brand-kit-section{margin-bottom:var(--spacing-md)}.brand-kit-section:last-of-type{margin-bottom:var(--spacing-lg)}.brand-kit-section-label{font-size:12px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm);display:block}.brand-kit-colors{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.brand-kit-color-item{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-surface);border-radius:var(--radius-sm)}.brand-kit-color-swatch{width:20px;height:20px;border-radius:var(--radius-sm);border:1px solid var(--color-border);flex-shrink:0}.brand-kit-color-name{font-size:12px;color:var(--color-text);font-weight:500}.brand-kit-fonts{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.brand-kit-font-item{padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-surface);border-radius:var(--radius-sm);font-size:12px;color:var(--color-text);font-weight:500}.brand-kit-card-footer{padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.brand-kit-action{width:100%}.channels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--spacing-lg)}.channel-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all .2s ease}.channel-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}.channel-card-header{margin-bottom:var(--spacing-md)}.channel-card-title{font-size:18px;font-weight:600;color:var(--color-text)}.channel-details{margin-bottom:var(--spacing-lg)}.channel-detail-item{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.channel-detail-item:last-child{margin-bottom:0}.channel-detail-label{font-size:12px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.channel-detail-value{font-size:14px;color:var(--color-text);word-break:break-all}.channel-detail-value code{background-color:var(--color-surface);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-family:Courier New,monospace;font-size:13px;display:inline-block}.channel-card-footer{padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.channel-action{width:100%}@media (max-width: 768px){.brand-center-section-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.brand-center-section-header .btn{width:100%}.brand-kits-grid,.channels-grid{grid-template-columns:1fr}}.preferences{width:100%;max-width:900px;margin:0 auto;padding:var(--spacing-xl) 0}.preferences-header{margin-bottom:var(--spacing-2xl)}.preferences-title{font-size:32px;font-weight:600;color:var(--color-text);margin:var(--spacing-md) 0 var(--spacing-sm);letter-spacing:-.02em}.preferences-subtitle{font-size:16px;color:var(--color-text-secondary);margin:0}.preferences-content{display:flex;flex-direction:column;gap:var(--spacing-2xl)}.preferences-section{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.preferences-section-title{font-size:24px;font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-md)}.preferences-section-description{font-size:14px;color:var(--color-text-secondary);margin:0 0 var(--spacing-lg)}.preferences-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.preferences-field{display:flex;flex-direction:column;gap:var(--spacing-xs)}.preferences-field-header{display:flex;align-items:center;gap:var(--spacing-xs)}.preferences-field-label{font-size:14px;font-weight:500;color:var(--color-text)}.preferences-tooltip-container{position:relative;display:inline-block}.preferences-tooltip-icon{width:20px;height:20px;border-radius:50%;border:1px solid var(--color-border);background-color:var(--color-bg);color:var(--color-text-secondary);font-size:12px;font-weight:600;cursor:help;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;line-height:1}.preferences-tooltip-icon:hover{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.preferences-tooltip{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;background-color:var(--color-text);color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:13px;line-height:1.5;max-width:300px;min-width:200px;box-shadow:0 4px 12px #00000026;pointer-events:none;white-space:normal;word-wrap:break-word}.preferences-tooltip:before{content:"";position:absolute;bottom:100%;left:12px;border:6px solid transparent;border-bottom-color:var(--color-text)}.preferences-tooltip p{margin:0}.preferences-input-wrapper{position:relative;display:flex;align-items:center}.preferences-input{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px;background-color:var(--color-bg);color:var(--color-text);transition:border-color .2s ease;font-family:inherit;width:100%;padding-right:40px}.preferences-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #0066cc1a}.preferences-input::placeholder{color:var(--color-text-secondary)}.preferences-input-toggle{position:absolute;right:var(--spacing-sm);background:none;border:none;cursor:pointer;padding:var(--spacing-xs);font-size:16px;color:var(--color-text-secondary);transition:color .2s ease;display:flex;align-items:center;justify-content:center}.preferences-input-toggle:hover{color:var(--color-text)}.preferences-field-hint{font-size:12px;color:var(--color-text-secondary);margin-top:var(--spacing-xs)}.preferences-field-separator{height:1px;background-color:var(--color-border);margin:var(--spacing-md) 0}.preferences-form-actions{margin-top:var(--spacing-md);display:flex;justify-content:flex-end}.preferences-integrations{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-lg)}.preferences-integration-card{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);transition:all .2s ease;position:relative;opacity:.7}.preferences-integration-card:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #0066cc1a}.preferences-integration-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.preferences-integration-icon{font-size:32px;line-height:1}.preferences-integration-badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);background-color:var(--color-surface);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.preferences-integration-name{font-size:16px;font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-xs)}.preferences-integration-description{font-size:13px;color:var(--color-text-secondary);margin:0;line-height:1.5}@media (max-width: 768px){.preferences{padding:var(--spacing-lg) 0}.preferences-section{padding:var(--spacing-lg)}.preferences-integrations{grid-template-columns:1fr}.preferences-tooltip{left:auto;right:0;max-width:calc(100vw - 32px);min-width:auto;font-size:12px}.preferences-tooltip:before{left:auto;right:12px}}.label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.toggle-wrapper{display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-label{font-size:.6rem;color:#888;text-transform:uppercase}.toggle-track{width:36px;height:20px;background-color:#444;border-radius:10px;position:relative;transition:background-color .2s ease}.toggle-track.active{background-color:var(--active-color)}.toggle-thumb{width:16px;height:16px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s ease}.toggle-track.active .toggle-thumb{transform:translate(16px)}.control-group input:disabled{opacity:.5;cursor:not-allowed;border-color:transparent;background-color:#2a2a2a}.control-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px;padding-right:2.5rem;cursor:pointer}:root{--active-color: #03a9f4}.playground-container{display:flex;flex-direction:column;height:calc(100vh - 64px);width:100vw;background-color:#1e1e1e;color:#fff;overflow:hidden;position:fixed;top:64px;left:0}.playground-top-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid #333;background-color:#111;z-index:2}.playground-nav-title,.playground-nav-actions{display:flex;align-items:center;gap:.75rem}.playground-nav-title h2{margin:0;font-size:1.25rem;font-weight:600}.playground-nav-title h3{margin:0;font-size:.875rem;font-weight:500;color:#bbb;padding:.25rem .75rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:999px;font-style:italic}.playground-new-btn{border:1px solid #2f80ed;background:#2f80ed26;color:#d7e9ff;font-weight:600;padding:.35rem 1rem;border-radius:999px;cursor:pointer;transition:all .2s ease}.playground-new-btn:hover{background:#2f80ed;color:#fff;border-color:#2f80ed}.playground-nav-links{display:inline-flex;gap:.5rem;background-color:#1a1a1a;border:1px solid #333;border-radius:999px;padding:.25rem}.playground-nav-link{padding:.35rem 1.2rem;border-radius:999px;color:#bbb;text-decoration:none;font-size:.9rem;transition:all .2s ease}.playground-nav-link:hover{color:#fff;background-color:#ffffff14}.playground-nav-link.active{background-color:var(--active-color);color:#fff}.playground-route-shell{flex:1;display:flex;overflow:hidden}.playground-content{display:flex;flex:1;overflow:hidden;height:100%}.preview-tabs{display:inline-flex;position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:10;background-color:#252525;border:1px solid #444;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px #0000004d}.textual-preview{flex:1;width:100%;overflow-y:auto;padding:1rem;margin-top:3.5rem}.url-preview-card{background-color:#252525;border:1px solid #444;border-radius:6px;padding:1rem;margin-bottom:1.5rem;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace}.url-preview-label{font-size:.75rem;color:#888;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.url-open-button{background-color:#333;border:1px solid #555;border-radius:4px;padding:.4rem .6rem;color:#aaa;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.url-open-button:hover{background-color:var(--active-color);border-color:var(--active-color);color:#fff}.url-preview-content{font-size:0;line-height:1.6;word-break:break-all;color:#ccc;letter-spacing:0;overflow-wrap:break-word}.preview-wrapper{flex:1;box-shadow:0 20px 50px #00000080;transition:all .3s ease;position:relative;max-width:100%;max-height:100%;display:flex;width:100%;margin-top:3.5rem}.control-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px;padding-right:2.5rem;cursor:pointer}.asset-switcher{position:relative;display:inline-flex;flex-direction:column;gap:.35rem;z-index:5}.asset-switcher-trigger{display:flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);background-color:#0006;color:#fff;cursor:pointer;transition:all .2s ease;font-size:.85rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.asset-switcher-trigger img{width:28px;height:28px;object-fit:contain;border-radius:50%;background-color:#111;padding:2px}.asset-switcher-trigger svg{transition:transform .2s ease}.asset-switcher.open .asset-switcher-trigger svg{transform:rotate(180deg)}.asset-switcher-panel{position:absolute;top:calc(100% + .5rem);left:0;display:flex;flex-direction:column;gap:.35rem;background-color:#0e0e0ef2;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.5rem;box-shadow:0 10px 30px #0006;min-width:220px;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.asset-switcher.open .asset-switcher-panel{opacity:1;transform:translateY(0);pointer-events:auto}.asset-switcher-option{display:flex;align-items:center;gap:.6rem;padding:.35rem .4rem;border-radius:8px;background:transparent;border:1px solid transparent;color:#eee;cursor:pointer;transition:all .2s ease;width:100%;text-align:left}.asset-switcher-option img{width:34px;height:34px;object-fit:contain;border-radius:6px;background-color:#111;padding:2px}.asset-switcher-option.active{border-color:var(--active-color);background-color:#03a9f41f}.asset-switcher-option:hover:not(.active){background-color:#ffffff0d}.asset-switcher-copy{display:flex;flex-direction:column;gap:.1rem}.asset-switcher-copy p{margin:0;font-size:.85rem;color:#f5f5f5}.figma-modal-shell{--figma-bg: #0a0f1d;--figma-panel: #11182a;--figma-surface: #151d31;--figma-border: rgba(255, 255, 255, .08);--figma-text: #f4f7ff;--figma-muted: rgba(244, 247, 255, .75)}.figma-modal-shell .modal-content{background:var(--figma-bg);color:var(--figma-text)}.figma-modal-shell .modal-header,.figma-modal-shell .modal-footer,.figma-modal-shell .modal-body-static{background:var(--figma-panel);border-color:var(--figma-border)}.figma-modal-shell .modal-title{color:var(--figma-text)}.figma-modal-shell .modal-subtitle,.figma-modal-shell .modal-header-right .modal-close{color:var(--figma-muted)}.figma-modal-shell .modal-body{padding:0;display:flex;flex-direction:column;min-height:640px;background:var(--figma-bg);color:var(--figma-text)}.figma-modal-shell .modal-footer{background:var(--figma-panel)}.figma-import-body{display:flex;flex-direction:column;gap:var(--spacing-lg);flex:1;overflow:hidden;color:var(--figma-text);background:var(--figma-bg);position:relative}.figma-content-blurred{opacity:.5;pointer-events:none;transition:opacity .2s ease}.figma-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0a0f1df2;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;border-radius:var(--radius-lg)}.figma-loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.figma-loading-text{color:var(--figma-text);font-size:.95rem;margin:0}.figma-body-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.figma-import-body p,.figma-import-body label,.figma-import-body span{color:var(--figma-text)}.figma-import-body .figma-team-help,.figma-import-body .figma-start-description{color:var(--figma-muted)}.figma-modal-shell .modal-body-static{padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-md)}.figma-modal-shell .modal-body-static .figma-error{margin-top:var(--spacing-sm)}.figma-modal-shell .modal-body-content{padding:0 var(--spacing-xl) var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-lg)}.figma-wizard-steps{display:flex;gap:var(--spacing-md);padding:0;margin:0;list-style:none;flex-wrap:wrap;justify-content:center}.figma-wizard-step{display:flex;align-items:center;gap:var(--spacing-xs);font-size:.9rem;color:var(--figma-muted)}.figma-wizard-step__label{color:var(--figma-text);font-weight:600}.figma-wizard-step__bullet{width:1.75rem;height:1.75rem;border-radius:999px;border:1px solid var(--figma-border);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;background:var(--figma-surface)}.figma-wizard-step--complete .figma-wizard-step__bullet{background:#2db3a9;border-color:#2db3a9;color:#fff;font-weight:700}.figma-wizard-step--complete .figma-wizard-step__label{color:#f4f7ffa6}.figma-wizard-step--current{color:var(--color-text);font-weight:600}.figma-wizard-step--current .figma-wizard-step__label{color:var(--figma-text)}.figma-wizard-step--current .figma-wizard-step__bullet{border-color:var(--color-primary);color:var(--color-primary)}.figma-footer{width:100%;flex:1 1 auto;display:flex;justify-content:space-between;align-items:center}.figma-footer button:disabled{opacity:.5;cursor:not-allowed}.figma-step-panel{display:flex;flex-direction:column;gap:var(--spacing-lg)}.figma-step-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md)}.figma-step-description{margin:0;color:var(--color-text-secondary)}.figma-profile-menu{position:relative;display:inline-flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-sm)}.figma-profile-chip{width:44px;height:44px;border-radius:50%;border:1px solid var(--figma-border);background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.figma-profile-chip img,.figma-profile-chip span{width:100%;height:100%;border-radius:50%;object-fit:cover;font-weight:600;display:inline-flex;align-items:center;justify-content:center}.figma-profile-dropdown{position:absolute;top:100%;right:0;width:220px;background:var(--figma-surface);border:1px solid var(--figma-border);border-radius:var(--radius-md);padding:var(--spacing-md);box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease;z-index:3;margin-top:var(--spacing-xs)}.figma-profile-dropdown.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.figma-profile-avatar{width:44px;height:44px;border-radius:50%;background-color:#0000000f;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--color-border)}.figma-profile-avatar img{width:100%;height:100%;object-fit:cover}.figma-profile-avatar span{font-weight:600;color:var(--color-text)}.figma-profile-meta{display:flex;flex-direction:column;gap:2px}.figma-profile-handle{margin:0;font-weight:600;color:var(--color-text)}.figma-profile-dropdown .figma-profile-handle{margin-bottom:2px}.figma-profile-dropdown .figma-profile-email{margin-bottom:var(--spacing-sm)}.figma-profile-email{margin:0;font-size:.85rem;color:var(--color-text-secondary)}.figma-import-subtitle{margin:0;color:var(--color-text-secondary);font-size:.95rem}.figma-start-description{margin:0;color:var(--color-text-secondary);font-size:.95rem;line-height:1.4}.figma-start-btn{width:100%;border:none;border-radius:var(--radius-lg);padding:var(--spacing-lg);background:linear-gradient(120deg,#03a9f4,#4caf50);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-lg);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left}.figma-start-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.figma-start-btn h4{margin:0;font-size:1.25rem}.figma-start-btn p{margin:.35rem 0 0;color:#ffffffd9;font-size:.95rem}.figma-start-btn span[aria-hidden=true]{font-size:1.5rem;font-weight:600}.figma-start-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.figma-start-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:#ffffffbf;margin-bottom:.35rem}.figma-error{color:#ffb4b4;background-color:#d32f2f26;border:1px solid rgba(211,47,47,.4);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);font-size:.9rem}.figma-actions{display:flex;justify-content:flex-end;gap:var(--spacing-sm)}.figma-primary-btn,.figma-secondary-btn{border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);font-weight:600;border:1px solid transparent;cursor:pointer;transition:background-color .2s ease,color .2s ease,border .2s ease}.figma-primary-btn{background-color:var(--color-primary);color:#fff}.figma-primary-btn:hover{background-color:var(--color-primary-hover)}.figma-secondary-btn{background-color:transparent;border-color:var(--figma-border);color:var(--figma-text)}.figma-secondary-btn:hover{border-color:var(--color-primary);color:var(--figma-text);background-color:#0066cc26}.figma-connecting-card{border:1px solid var(--figma-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);background-color:var(--figma-surface);display:flex;flex-direction:column;gap:var(--spacing-sm)}.figma-connecting-title{margin:0;font-weight:600;color:var(--color-text)}.figma-connecting-help,.figma-connecting-hint{margin:0;color:var(--color-text-secondary);font-size:.9rem;line-height:1.4}.figma-inline-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.1);border-top-color:#2db3a9;border-radius:50%;animation:figma-spin 1s linear infinite}@keyframes figma-spin{to{transform:rotate(360deg)}}.figma-designs-header{display:flex;align-items:center;justify-content:space-between}.figma-designs-header h4{margin:.25rem 0 0}.figma-loading{margin:0;color:var(--color-text-secondary);font-size:.9rem}.figma-empty-state{margin:0;color:var(--color-text-secondary);font-size:.95rem}.figma-team-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.figma-recent-teams{margin-top:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-xs)}.figma-recent-label{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary)}.figma-recent-chips{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.figma-chip{border:1px solid var(--figma-border);border-radius:999px;padding:.25rem .75rem;background:#ffffff0d;color:var(--figma-text);font-size:.85rem;cursor:pointer;transition:all .2s ease}.figma-chip:hover{border-color:var(--color-primary);color:var(--figma-text);background:#0066cc26}.figma-team-label{font-weight:600;color:var(--color-text)}.figma-team-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--figma-border);font-size:1rem;background:var(--figma-surface);color:var(--figma-text)}.figma-team-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #0066cc40}.figma-team-help{margin:0;font-size:.9rem;color:var(--color-text-secondary);line-height:1.4}.figma-url-shortcut{border:1px solid var(--figma-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);background:#ffffff05;display:flex;flex-direction:column;gap:var(--spacing-sm)}.figma-file-actions{margin-top:var(--spacing-sm)}.figma-converter-panel{margin-top:var(--spacing-xl);border:1px solid var(--figma-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);background-color:var(--figma-surface);display:flex;flex-direction:column;gap:var(--spacing-lg);color:var(--figma-text)}.figma-preview-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.figma-toggle{display:inline-flex;border:1px solid var(--figma-border);border-radius:999px;overflow:hidden;padding:2px;background:#ffffff08;gap:2px}.figma-toggle__option{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.35rem .75rem;border-radius:999px;cursor:pointer;color:var(--figma-muted);font-size:.9rem;-webkit-user-select:none;user-select:none}.figma-toggle__option input{position:absolute;opacity:0;pointer-events:none}.figma-toggle__option.is-active{background:#0066cc38;color:var(--figma-text)}.figma-switch{display:inline-flex;align-items:center;gap:var(--spacing-sm);font-size:.9rem;color:var(--figma-muted);-webkit-user-select:none;user-select:none}.figma-switch input[type=checkbox]{width:16px;height:16px}.figma-converter-header{display:flex;justify-content:space-between;gap:var(--spacing-lg);flex-wrap:wrap}.figma-converter-status-pills{display:flex;align-items:center;gap:var(--spacing-sm)}.figma-converter-loading{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.9rem;color:var(--figma-muted)}.figma-frame-picker{display:flex;flex-direction:column;gap:var(--spacing-lg)}.figma-template-field{display:flex;flex-direction:column;gap:var(--spacing-sm);border:1px solid var(--figma-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);background:#ffffff05}.figma-template-hint{margin:0;font-size:.85rem;color:var(--figma-muted)}.figma-template-hint code{background:#ffffff14;padding:0 .35rem;border-radius:var(--radius-sm)}.figma-preflight-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--spacing-lg)}.figma-preview-group{border:1px solid var(--figma-border);border-radius:var(--radius-lg);background:#ffffff05;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);overflow-x:auto}.figma-preview-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.figma-preview-count{font-size:.85rem;color:var(--figma-muted)}.figma-preview-table{width:100%;border-collapse:collapse}.figma-preview-table th,.figma-preview-table td{text-align:left;padding:.4rem .25rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem}.figma-preview-table th.figma-preview-check-col,.figma-preview-table td.figma-preview-check-col{width:56px;text-align:center}.figma-preview-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--figma-muted)}.figma-preview-table tr:last-child td{border-bottom:none}.figma-empty-state--muted{color:var(--figma-muted);margin:0}.figma-layer-checkbox{display:inline-flex;align-items:center;justify-content:center}.figma-layer-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer}.figma-preview-row.is-disabled{opacity:.45}.figma-frame-list{display:flex;flex-direction:column;gap:var(--spacing-sm);max-height:360px;overflow-y:auto;padding-right:var(--spacing-sm)}.figma-cloudinary-section{margin-top:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.figma-cloudinary-summary{border:1px solid var(--figma-border);border-radius:var(--radius-md);padding:var(--spacing-md);background:var(--figma-surface);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.figma-cloudinary-summary-name{margin:.25rem 0 0;font-size:1rem;font-weight:600}.figma-cloudinary-summary-meta{margin:.15rem 0 0;color:var(--figma-muted);font-size:.9rem}.figma-cloudinary-actions{display:flex;justify-content:flex-end;margin-top:var(--spacing-sm)}.figma-frame-row{width:100%;text-align:left;border:1px solid var(--figma-border);border-radius:var(--radius-md);padding:var(--spacing-md);background:transparent;color:var(--figma-text);cursor:pointer;transition:border-color .2s ease,background .2s ease}.figma-frame-row.active{border-color:var(--color-primary);background:#0066cc26}.figma-frame-name{margin:0;font-weight:600}.figma-frame-meta{margin:.25rem 0 0;font-size:.85rem;color:var(--color-text-secondary)}.figma-frame-filter{display:flex;align-items:center;gap:var(--spacing-sm)}.figma-frame-filter__meta{font-size:.85rem;color:var(--figma-muted)}.figma-frame-settings{display:flex;flex-direction:column;gap:var(--spacing-sm)}.figma-converter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--spacing-lg)}.figma-converter-column select{width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--color-border);font-size:1rem}.figma-cloudinary-form{display:flex;flex-direction:column;gap:var(--spacing-sm)}.figma-cloudinary-form input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:1px solid var(--color-border);font-size:1rem}.figma-cloudinary-form input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #0066cc26}.figma-copy-hint{font-size:.85rem;color:var(--color-text-secondary)}.figma-converter-output{display:flex;flex-direction:column;gap:var(--spacing-md)}.figma-transformation-textarea{width:100%;min-height:120px;padding:var(--spacing-sm);border-radius:var(--radius-md);border:1px solid var(--color-border);font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.85rem;background-color:#0f0f0f;color:#f7f7f7}.figma-converter-output-actions{display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.figma-layers-table table{width:100%;border-collapse:collapse}.figma-layers-table{overflow-x:auto}.figma-layers-table th,.figma-layers-table td{text-align:left;padding:var(--spacing-sm);border-bottom:1px solid var(--color-border);font-size:.9rem}.figma-layers-table th{text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;color:var(--color-text-secondary)}.figma-projects-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.figma-projects-shell{display:flex;gap:var(--spacing-lg);align-items:flex-start}.figma-projects-shell.collapsed{flex-direction:column}.figma-collapsed-summary{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-md);width:100%}.figma-list-actions{display:flex;justify-content:flex-end;margin-bottom:var(--spacing-sm)}.figma-projects-column{flex:0 0 320px}.figma-projects-column--files{flex:1;min-width:0}.figma-projects-list{border:1px solid var(--figma-border);border-radius:var(--radius-lg);padding:var(--spacing-md);background-color:var(--figma-surface)}.figma-projects-list-head{display:grid;grid-template-columns:1fr 120px;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--figma-muted);margin-bottom:var(--spacing-sm)}.figma-projects-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:360px;overflow-y:auto}.figma-project-row{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--figma-text);cursor:pointer;transition:all .2s ease;text-align:left}.figma-project-row:hover{border-color:var(--color-primary);background-color:#0066cc1f}.figma-project-row.active{border-color:var(--color-primary);background-color:#06c3}.figma-project-row.disabled{cursor:not-allowed;opacity:.6;border-color:transparent}.figma-project-row-main{display:flex;flex-direction:column;gap:2px}.figma-project-name{margin:0;font-weight:600;font-size:.95rem}.figma-project-meta{margin:0;font-size:.8rem;color:var(--figma-muted)}.figma-project-row-id{font-size:.8rem;color:var(--figma-muted)}.figma-projects-column--files{background-color:var(--figma-surface);border:1px solid var(--figma-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);color:var(--figma-text)}.figma-files-panel{display:flex;flex-direction:column;gap:var(--spacing-md)}.figma-files-panel-header{display:flex;align-items:center;justify-content:space-between}.figma-files-panel-header h5{margin:0;font-size:1.1rem;color:var(--figma-text)}.figma-files-eyebrow{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-primary)}.figma-files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--spacing-md)}.figma-file-card{border:1px solid var(--figma-border);border-radius:var(--radius-md);padding:var(--spacing-sm);display:flex;gap:var(--spacing-sm);background-color:#ffffff0d;box-shadow:0 2px 6px #00000040;color:var(--figma-text)}.figma-file-thumb{width:48px;height:48px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background-color:#ffffff14;display:flex;align-items:center;justify-content:center}.figma-file-thumb img{width:100%;height:100%;object-fit:cover}.figma-file-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--color-primary);background:#0066cc1a}.figma-file-card-body{display:flex;flex-direction:column;gap:.25rem}.figma-file-name{margin:0;font-weight:600;font-size:.95rem;color:var(--figma-text)}.figma-file-meta{margin:0;font-size:.8rem;color:var(--figma-muted)}.figma-designs-actions{display:flex;gap:var(--spacing-sm)}.figma-empty-state--spacious{padding:var(--spacing-md);border:1px dashed var(--color-border);border-radius:var(--radius-md);text-align:center}@media (max-width: 960px){.figma-projects-shell{flex-direction:column}.figma-projects-column{width:100%;flex:1}.figma-frame-picker{flex-direction:column}}.figma-row-title{display:flex;align-items:center;gap:var(--spacing-sm);width:100%}.figma-primary-btn .figma-inline-spinner{width:1rem;height:1rem;margin-right:var(--spacing-sm);border-width:2px;display:inline-block;vertical-align:middle}.figma-inline-spinner.on-dark{border-color:#ffffff4d;border-top-color:#fff}.figma-frame-preview{border:1px solid var(--figma-border);border-radius:var(--radius-lg);background:#ffffff05;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.figma-frame-preview__header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);flex-wrap:wrap}.figma-frame-preview__meta{margin:.25rem 0 0;color:var(--figma-muted);font-size:.9rem;display:flex;gap:var(--spacing-xs);flex-wrap:wrap}.figma-frame-preview__dot{opacity:.6}.figma-frame-preview__hint{margin:0;color:var(--figma-muted);font-size:.85rem}.figma-frame-preview__canvas{position:relative;width:100%;height:min(52vh,420px);width:auto;max-width:100%;margin:0 auto;border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0000001f}.figma-frame-preview__image{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;object-fit:contain}.figma-frame-preview__overlay,.figma-frame-preview__background{position:absolute;top:0;right:0;bottom:0;left:0}.figma-frame-preview__piece{position:absolute;object-fit:contain;pointer-events:none}.figma-frame-preview__box{position:absolute;border:2px solid rgba(45,179,169,.85);border-radius:6px;background:#2db3a914;padding:0;margin:0;pointer-events:none}.figma-frame-preview__box.tone-text{border-color:#00aaffe6;background:#00aaff14}.figma-frame-preview__box.is-muted{opacity:.28}.figma-frame-preview__box.is-main{border-width:3px;box-shadow:0 0 0 2px #ffffff14}button.figma-frame-preview__box{pointer-events:auto;cursor:pointer;background-clip:padding-box}button.figma-frame-preview__box:hover{opacity:1;background:#ffffff0f}.figma-frame-preview__label{position:absolute;left:6px;top:6px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#ffffffeb;background:#0000008c;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.1rem .45rem;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.figma-frame-preview__empty{border:1px dashed rgba(255,255,255,.12);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-sm)}.new-design-modal-shell{--new-design-bg: #0a0f1d;--new-design-panel: #11182a;--new-design-surface: #151d31;--new-design-border: rgba(255, 255, 255, .08);--new-design-text: #f4f7ff;--new-design-muted: rgba(244, 247, 255, .75)}.new-design-modal-shell .modal-content{background:var(--new-design-bg);color:var(--new-design-text)}.new-design-modal-shell .modal-header,.new-design-modal-shell .modal-footer{background:var(--new-design-panel);border-color:var(--new-design-border)}.new-design-modal-shell .modal-title{color:var(--new-design-text)}.new-design-modal-shell .modal-subtitle,.new-design-modal-shell .modal-header-right .modal-close{color:var(--new-design-muted)}.new-design-modal-shell .modal-body{background:var(--new-design-bg);color:var(--new-design-text)}.new-design-options{display:flex;flex-direction:column;gap:1rem;padding:1rem 0}.new-design-option{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border:1px solid var(--new-design-border);border-radius:.75rem;background:var(--new-design-surface);color:var(--new-design-text);cursor:pointer;transition:all .3s ease;text-align:left;width:100%;position:relative;overflow:hidden}.new-design-option:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity .3s ease;z-index:0}.new-design-option--example:before{background:linear-gradient(135deg,#2f80ed33,#8a2be233)}.new-design-option--figma:before{background:linear-gradient(135deg,#ff572233,#ff980033)}.new-design-option--cloudinary:before{background:linear-gradient(135deg,#2dd4bf33,#22c55e33)}.new-design-option:hover:not(:disabled):before{opacity:1}.new-design-option:hover:not(:disabled){border-color:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.new-design-option--disabled{opacity:.5;cursor:not-allowed}.new-design-option-content{flex:1;position:relative;z-index:1}.new-design-option-content h4{margin:0 0 .5rem;font-size:1.15rem;font-weight:600;color:var(--new-design-text)}.new-design-option-content p{margin:0;font-size:.9rem;color:var(--new-design-muted)}.new-design-option-arrow{font-size:1.5rem;color:var(--new-design-muted);margin-left:1rem;transition:all .3s ease;position:relative;z-index:1}.new-design-option:hover:not(:disabled) .new-design-option-arrow{transform:translate(6px);color:var(--new-design-text)}.new-design-option--example:hover:not(:disabled) .new-design-option-arrow{color:#6ba3ff}.new-design-option--figma:hover:not(:disabled) .new-design-option-arrow{color:#ff7043}.new-design-option--cloudinary:hover:not(:disabled) .new-design-option-arrow{color:#2dd4bf}.design-selector{width:250px;background-color:#252525;border-right:1px solid #333;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;overflow-y:auto}.design-selector h3{margin:0 0 1rem;font-size:1rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em}.design-option{position:relative;padding:1rem;background-color:#333;border-radius:8px;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.design-option:hover{background-color:#3d3d3d}.design-option.active{background-color:#444;border-color:var(--active-color)}.design-name{font-weight:600;margin-bottom:.25rem;line-height:1.3}.design-icon-wrapper{position:absolute;bottom:.75rem;right:.75rem;display:flex;align-items:center;justify-content:center}.design-icon{opacity:.6;color:#888;transition:all .2s ease}.design-option.active .design-icon{color:var(--active-color);opacity:1}.design-option:hover .design-icon{opacity:.8}.design-dims{font-size:.8rem;color:#888;line-height:1.3}.design-tree{display:flex;flex-direction:column;gap:0;position:relative}.design-option.parent{position:relative;margin-bottom:.75rem;transition:all .3s ease;overflow:visible}.design-card-content{position:relative;z-index:1}.inheritance-toggles{margin-top:.75rem;padding:.75rem;background-color:#1a1a1a;border:1px solid #444;border-radius:6px;display:flex;flex-direction:column;gap:.75rem;z-index:2;box-shadow:0 4px 12px #0000004d;position:relative}.inheritance-toggle-item{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.inheritance-toggle-item label{font-size:.85rem;color:#ccc;font-weight:500}.design-option.sub{position:relative;margin-left:2rem;width:calc(100% - 2rem)}.tree-connector{position:relative;height:20px;margin-left:1rem;margin-bottom:0}.tree-line-vertical{position:absolute;left:0;top:0;width:2px;height:20px;background-color:#555}.tree-line-horizontal{position:absolute;left:0;top:18px;width:1rem;height:2px;background-color:#555}.sub-designs-container{display:flex;flex-direction:column;gap:.75rem;margin-left:1rem;position:relative;padding-top:0}.sub-designs-container:before{content:"";position:absolute;left:1rem;top:-2px;width:2px;height:100%;background-color:#555;z-index:0}.sub-design-wrapper{position:relative;display:flex;align-items:center}.sub-design-wrapper:before{content:"";position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1rem;height:2px;background-color:#555;z-index:1}.sub-design-wrapper:last-child:after{content:"";position:absolute;left:1rem;top:50%;width:2px;height:calc(50% + .375rem);background-color:#252525;z-index:2}.preview-area{flex:1;background-color:#1e1e1e;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;overflow:hidden;position:relative}.preview-tabs{position:absolute;left:50%;transform:translate(-50%);top:1rem;z-index:11;display:inline-flex;background-color:#252525;border:1px solid #444;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px #0000004d}.preview-tab{padding:.6rem 1.2rem;background-color:#333;border:none;border-right:1px solid #444;color:#aaa;cursor:pointer;transition:all .2s ease;font-size:.85rem;font-weight:500;position:relative}.preview-tab:last-child{border-right:none}.preview-tab:hover:not(.active){background-color:#3d3d3d;color:#fff}.preview-tab.active{background-color:var(--active-color);color:#fff;z-index:1}.textual-preview{flex:1;width:100%;overflow-y:auto;padding:1rem;margin-top:4rem}.yoga-preview-wrapper{flex:1;width:100%;height:100%;margin-top:4rem;overflow:hidden}.preview-wrapper{flex:1;box-shadow:0 20px 50px #00000080;transition:all .3s ease;position:relative;max-width:100%;max-height:100%;display:flex;width:100%;margin-top:4rem}.preview-image{display:block;border-radius:4px;width:100%;height:100%;object-fit:contain}.preview-image.previous{position:absolute;top:0;left:0;z-index:1}.preview-image.current{position:relative;z-index:2;opacity:1;transition:opacity .3s ease}.preview-image.current.loading{opacity:0}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:10;background:#0003;border-radius:4px}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:var(--active-color);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.broken-image-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#2a2a2a;border:2px dashed #555;border-radius:4px;color:#888;z-index:5}.broken-icon{font-size:3rem;margin-bottom:.5rem;opacity:.6}.broken-text{font-size:.9rem;text-align:center;color:#999}.layer-overlay-toggle{position:absolute;bottom:1rem;left:1rem;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:#252525e6;border:1px solid #444;border-radius:6px;color:#aaa;cursor:pointer;transition:all .2s ease;z-index:1001;font-size:.85rem;font-weight:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.layer-overlay-toggle:hover{background-color:#2d2d2df2;border-color:#555;color:#fff}.layer-overlay-toggle.active{background-color:#03a9f433;border-color:var(--active-color);color:var(--active-color)}.layer-overlay-toggle svg{flex-shrink:0}.layer-overlay-toggle span{white-space:nowrap}.layer-overlay{position:absolute;border:1px solid rgba(3,169,244,.8);background-color:#03a9f41a;pointer-events:none;z-index:1000;box-sizing:border-box;transition:all .2s ease}.layer-overlay:hover{border-color:#03a9f4;background-color:#03a9f426}.layer-overlay.dimmed{opacity:.4}.layer-overlay-label{position:absolute;top:-20px;left:0;font-size:10px;font-weight:600;color:#03a9f4;background:#000000bf;padding:2px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:all .15s ease;text-transform:uppercase;letter-spacing:.5px}.layer-overlay:hover .layer-overlay-label,.layer-overlay.hovered .layer-overlay-label{opacity:1;transform:translateY(0)}.layer-info-btn{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;background:#000000b3;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#ffffffb3;cursor:pointer;opacity:0;transform:scale(.8);transition:all .15s ease;pointer-events:auto}.layer-overlay:hover .layer-info-btn,.layer-overlay.hovered .layer-info-btn{opacity:1;transform:scale(1)}.layer-info-btn:hover{background:#03a9f4e6;border-color:#03a9f4;color:#fff}.layer-info-panel{position:absolute;top:100%;left:0;margin-top:8px;min-width:180px;background:#141416fa;border:1px solid rgba(3,169,244,.5);border-radius:8px;padding:0;z-index:1010;box-shadow:0 8px 32px #00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:infoSlideIn .15s ease-out;pointer-events:auto}@keyframes infoSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.layer-info-header{padding:8px 12px;font-size:11px;font-weight:700;color:#03a9f4;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.1);background:#03a9f41a;border-radius:8px 8px 0 0}.layer-info-content{padding:10px 12px}.layer-info-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0}.layer-info-row+.layer-info-row{border-top:1px solid rgba(255,255,255,.05);padding-top:8px;margin-top:4px}.layer-info-label{font-size:10px;color:#ffffff80;text-transform:uppercase;letter-spacing:.3px}.layer-info-value{font-size:12px;font-weight:500;color:#ffffffe6;font-family:SF Mono,Monaco,Consolas,monospace}.rules-table{width:100%;border-collapse:collapse;background-color:#252525;border-radius:4px;overflow:hidden;table-layout:fixed}.rules-table thead{background-color:#333}.rules-table th{padding:.75rem;text-align:left;font-weight:600;color:#fff;border-bottom:2px solid #444;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.rules-table th:first-child{width:40%}.rules-table th:last-child{width:60%}.rules-table td{padding:.75rem;border-bottom:1px solid #333;color:#ccc;font-size:.9rem}.rules-table tbody tr:hover,.rules-table .category-row{background-color:#2a2a2a}.rules-table .category-row td{padding:1rem .75rem;color:var(--active-color);font-size:.95rem;border-bottom:2px solid #444}.rules-table .sub-category-row{background-color:#2f2f2f}.rules-table .sub-category-row td{padding:.75rem .75rem .5rem 1.5rem;color:#aaa;font-size:.9rem;border-bottom:1px solid #3a3a3a;font-weight:600}.rules-table tbody tr[data-row-key]{transition:all .4s ease}.rules-table tbody tr[data-row-key].highlighted{background-color:#03a9f433!important;box-shadow:0 0 12px #03a9f466;transform:scale(1.01)}.rules-table tbody tr[data-row-key].highlighted td{color:#fff;font-weight:600}.rule-input{width:100%;padding:.4rem .5rem;background-color:#2a2a2a;border:1px solid #444;border-radius:4px;color:#fff;font-size:.85rem;font-family:inherit;transition:all .2s ease}.rule-input:focus{outline:none;border-color:var(--active-color);background-color:#333;box-shadow:0 0 0 2px #03a9f433}.rule-input:hover:not(:disabled):not([readonly]){border-color:#555;background-color:#2f2f2f}.rule-input:disabled,.rule-input[readonly]{opacity:.5;cursor:not-allowed;background-color:#1f1f1f}.rule-input-color{height:32px;padding:2px;cursor:pointer}.rule-input-color:disabled{cursor:not-allowed}.rule-input-number{width:100px}.rule-input-select{cursor:pointer}.rule-input-text{min-width:150px}.url-preview-card{background-color:#252525;border-radius:8px;padding:1rem;margin-bottom:1rem;border:1px solid #333}.url-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.url-preview-label{font-size:.9rem;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:.05em}.url-open-button{display:flex;align-items:center;justify-content:center;padding:.25rem .5rem;background-color:transparent;border:1px solid #555;border-radius:4px;color:#aaa;cursor:pointer;transition:all .2s ease}.url-open-button:hover{border-color:var(--active-color);color:var(--active-color);background-color:#03a9f41a}.url-preview-content{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.75rem;line-height:1.6;color:#ccc;word-break:break-all;overflow-wrap:break-word}.url-preview-content .url-segment{font-size:.7rem;display:inline}.url-segment{transition:all .3s ease;border-radius:3px;display:inline}.url-segment-base{color:#4a9eff}.url-segment-variable{color:#ff6b9d;background-color:#ff6b9d1a}.url-segment-canvas{color:#51cf66;background-color:#51cf661a}.url-segment[class*=url-segment-layer-]:not(.url-segment-layer-apply){color:#74c0fc;background-color:#74c0fc1a}.url-segment-layer-apply{color:#9775fa;background-color:#9775fa1a}.url-segment-publicId{color:#868e96}.url-segment-separator{color:#666}.url-segment.highlighted{background-color:var(--active-color)!important;color:#fff!important;box-shadow:0 0 8px #03a9f480;transform:scale(1.05)}.banner-size-controls{padding:1rem 1.5rem;background:#fff;border-top:1px solid #e0e0e0;flex-shrink:0}.banner-size-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.banner-size-actions{display:flex;gap:.5rem;align-items:center}.banner-size-label{font-size:.75rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.save-design-btn{padding:.25rem .75rem;border:1px solid #4caf50;background:#4caf50;color:#fff;font-size:.75rem;font-weight:600;border-radius:4px;cursor:pointer;transition:all .2s}.save-design-btn:hover{background:#45a049;border-color:#45a049;transform:translateY(-1px);box-shadow:0 2px 4px #4caf504d}.reset-size-btn{padding:.25rem .75rem;border:1px solid #ddd;background:#fff;color:#666;font-size:.75rem;font-weight:600;border-radius:4px;cursor:pointer;transition:all .2s}.reset-size-btn:hover{background:#f5f5f5;border-color:#999;color:#333}.banner-size-buttons{display:flex;gap:.75rem;flex-wrap:wrap}.banner-size-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem 1rem;border:2px solid #e0e0e0;background:#fff;border-radius:6px;cursor:pointer;transition:all .2s;min-width:120px}.banner-size-btn:hover{border-color:#4caf50;background:#f9fdf9;transform:translateY(-2px);box-shadow:0 2px 8px #4caf5033}.banner-size-btn.active{border-color:#4caf50;background:#4caf50;color:#fff}.banner-size-name{font-size:.8rem;font-weight:600}.banner-size-btn.active .banner-size-name{color:#fff}.banner-size-dims{font-size:.7rem;font-family:SF Mono,Monaco,Courier New,monospace;color:#999}.banner-size-btn.active .banner-size-dims{color:#ffffffd9}@media (max-width: 768px){.banner-size-buttons{gap:.5rem}.banner-size-btn{min-width:100px;padding:.5rem .75rem}}.yoga-preview{display:flex;flex-direction:column;height:100%;background:#f8f9fa;overflow:hidden}.yoga-preview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#666;padding:2rem;text-align:center}.yoga-empty-icon{font-size:4rem;margin-bottom:1rem}.yoga-empty-hint{font-size:.875rem;color:#999;margin-top:.5rem}.yoga-preview-header{display:flex;gap:2rem;padding:1rem 1.5rem;background:#fff;border-bottom:1px solid #e0e0e0;flex-shrink:0}.yoga-info{display:flex;gap:.5rem;align-items:center}.yoga-info-label{font-size:.75rem;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.yoga-info-value{font-size:.875rem;color:#333;font-family:SF Mono,Monaco,Courier New,monospace}.yoga-preview-viewport{flex:1;overflow:auto;padding:2rem;display:flex;justify-content:center;align-items:center}.yoga-container{position:relative;border:2px solid #333;box-shadow:0 4px 12px #00000026;flex-shrink:0}.yoga-layer{position:absolute;border:2px solid;background:#ffffff0d;transition:all .2s;cursor:pointer;overflow:visible}.yoga-layer:hover{box-shadow:0 4px 12px #0003;background:#ffffffe6}.yoga-layer:not(.yoga-background):hover{z-index:100}.yoga-layer.text{border-color:#ff9800}.yoga-layer.image{border-color:#9c27b0}.yoga-layer.yoga-background{border-color:#2196f3;background:#2196f31a}.yoga-layer.yoga-background:hover{background:#2196f333}.yoga-layer-name{position:absolute;top:2px;left:2px;display:flex;align-items:center;gap:.25rem;padding:.125rem .375rem;border-radius:3px;font-size:.625rem;font-weight:600;white-space:nowrap;pointer-events:none}.yoga-layer-icon{font-size:.875rem;font-weight:700;display:flex;align-items:center;justify-content:center}.yoga-layer.text .yoga-layer-icon{color:#ff9800}.yoga-layer.image .yoga-layer-icon{color:#9c27b0}.yoga-layer.yoga-background .yoga-layer-icon{color:#2196f3}.yoga-layer-label{color:#333;max-width:120px;overflow:hidden;text-overflow:ellipsis}.yoga-layer-hover-details{position:absolute;top:100%;left:0;margin-top:.25rem;padding:.5rem;background:#fffffffa;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px #00000026;font-size:.625rem;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:101;min-width:150px;pointer-events:none}.yoga-layer:hover .yoga-layer-hover-details{opacity:1;visibility:visible}.yoga-layer-dimensions,.yoga-layer-position{font-size:.625rem;color:#333;font-weight:600;margin-bottom:.25rem}.yoga-layer-position{color:#666;font-weight:400}.yoga-layer-details{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #eee;color:#666}.yoga-detail-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yoga-detail-line.text-preview{font-style:italic;color:#999}.yoga-badge{display:inline-block;padding:.125rem .375rem;background:#4caf50;color:#fff;border-radius:3px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.yoga-layer-dimensions,.yoga-layer-position{position:absolute;font-size:.625rem;font-family:SF Mono,Monaco,Courier New,monospace;background:#000000bf;color:#fff;padding:.125rem .25rem;border-radius:2px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}.yoga-layer:hover .yoga-layer-dimensions,.yoga-layer:hover .yoga-layer-position{opacity:1}.yoga-layer-dimensions{bottom:-1.25rem;left:50%;transform:translate(-50%)}.yoga-layer-position{top:-1.25rem;left:50%;transform:translate(-50%)}.yoga-legend{display:flex;gap:1.5rem;padding:1rem 1.5rem;background:#fff;border-top:1px solid #e0e0e0;flex-shrink:0}.yoga-legend-item{display:flex;gap:.5rem;align-items:center;font-size:.75rem;color:#666}.yoga-legend-swatch{width:1.5rem;height:1.5rem;border:2px solid;border-radius:3px}.yoga-legend-swatch.text{border-color:#ff9800;background:#ff980033}.yoga-legend-swatch.image{border-color:#9c27b0;background:#9c27b033}.yoga-legend-swatch.background{border-color:#2196f3;background:#2196f333}@media (max-width: 768px){.yoga-preview-header,.yoga-legend{flex-wrap:wrap;gap:1rem}}.yoga-layout-viewer{display:flex;flex-direction:column;gap:1rem;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;background:#fff;font-family:SF Mono,Monaco,Courier New,monospace}.yoga-layout-viewer.empty{padding:2rem;text-align:center;color:#999}.yoga-layout-viewer-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.5rem;border-bottom:1px solid #e0e0e0}.yoga-layout-viewer-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.yoga-layout-viewer-tabs{display:flex;gap:.5rem}.yoga-tab{padding:.5rem 1rem;border:1px solid #e0e0e0;border-radius:4px;background:#f5f5f5;cursor:pointer;font-size:.875rem;transition:all .2s}.yoga-tab:hover{background:#e0e0e0}.yoga-tab.active{background:#007bff;color:#fff;border-color:#007bff}.yoga-layout-viewer-content{min-height:200px;max-height:600px;overflow:auto}.yoga-json{margin:0;padding:1rem;background:#f8f9fa;border-radius:4px;font-size:.75rem;line-height:1.5;overflow-x:auto}.yoga-tree{padding:1rem}.yoga-tree-node{margin:.5rem 0;padding:.75rem;border:1px solid #e0e0e0;border-radius:4px;background:#fafafa}.yoga-tree-node.root{background:#e3f2fd;border-color:#90caf9}.yoga-tree-node.child{margin-left:2rem}.yoga-tree-node.child.text{background:#fff3e0;border-color:#ffb74d}.yoga-tree-node.child.image{background:#f3e5f5;border-color:#ba68c8}.yoga-tree-node-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-weight:600}.yoga-tree-node-type{display:inline-block;padding:.125rem .5rem;margin-right:.5rem;background:#007bff;color:#fff;border-radius:3px;font-size:.625rem;text-transform:uppercase;letter-spacing:.5px}.yoga-tree-node-label{color:#333;font-size:.875rem}.yoga-tree-node-size{color:#666;font-size:.75rem;font-weight:400}.yoga-tree-children{margin-top:.5rem}.yoga-tree-node-details{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;color:#666}.yoga-tree-node-detail{padding:.25rem 0}.yoga-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:1rem}.yoga-stat{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.yoga-stat-label{font-size:.75rem;color:#666;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.yoga-stat-value{font-size:1.25rem;color:#333;font-weight:700}.controls-panel{width:300px;background-color:#252525;border-left:1px solid #333;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto}.controls-panel h3{margin:0;font-size:1rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em}.control-group{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}.control-group:last-child{margin-bottom:0}.control-group label{font-size:.9rem;font-weight:500}.control-group input,.control-group select{background-color:#333;border:1px solid #444;border-radius:6px;padding:.75rem;color:#fff;font-size:1rem;transition:border-color .2s;width:100%;font-family:Inter,sans-serif}.control-group input:focus,.control-group select:focus{outline:none;border-color:var(--active-color)}.control-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px;padding-right:2.5rem;cursor:pointer}.control-section{margin-bottom:1.5rem}.control-section:last-of-type{margin-bottom:0}.control-subsection{margin-bottom:1rem;padding-left:.5rem;border-left:2px solid #444}.control-subsection:last-child{margin-bottom:0}.subsection-title{font-size:.85rem;font-weight:600;color:#aaa;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.section-title{font-size:.85rem;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #333}.generated-url{margin-top:auto;padding-top:1rem;border-top:1px solid #333}.url-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.url-header label{font-size:.8rem;color:#888}.copy-btn{background:transparent;border:1px solid #444;color:#aaa;font-size:.7rem;padding:2px 8px;border-radius:4px;cursor:pointer;transition:all .2s}.copy-btn:hover{border-color:var(--active-color);color:var(--active-color)}.url-display{border:1px solid #444;border-radius:4px;padding:.75rem;background-color:#1a1a1a;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;font-size:.75rem;color:#ccc;line-height:1.5;max-height:200px;overflow-y:auto;overflow-x:auto;word-break:break-all;white-space:pre-wrap}.url-display::-webkit-scrollbar{width:8px;height:8px}.url-display::-webkit-scrollbar-track{background:#1a1a1a;border-radius:4px}.url-display::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.url-display::-webkit-scrollbar-thumb:hover{background:#555}.control-group.highlighted{background-color:#03a9f41a!important;box-shadow:0 0 12px #03a9f466;border-radius:6px;padding:.5rem;margin:.5rem -.5rem;transition:all .4s ease;transform:scale(1.02)}.control-group.highlighted label{color:var(--active-color);font-weight:600}.layer-accordion{border:1px solid #333;border-radius:6px;margin-bottom:.75rem;background-color:#2a2a2a;overflow:hidden;transition:all .2s ease}.layer-accordion:last-child{margin-bottom:0}.layer-accordion-header{padding:.75rem 1rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;background-color:#2a2a2a;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}.layer-accordion-header:hover{background-color:#333}.layer-accordion-title{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;color:#ccc}.accordion-chevron{transition:transform .2s ease;color:#888;flex-shrink:0}.accordion-chevron.expanded{transform:rotate(180deg)}.layer-accordion-content{padding:.75rem 1rem;border-top:1px solid #333;background-color:#252525;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:2000px}}.layer-accordion-content .control-group{margin-bottom:.75rem}.layer-accordion-content .control-group:last-child{margin-bottom:0}.layer-accordion.highlighted{background-color:#03a9f433!important;box-shadow:0 0 12px #03a9f466;border-color:var(--active-color);transform:scale(1.01);transition:all .4s ease}.layer-accordion.highlighted .layer-accordion-header{background-color:#03a9f426}.layer-accordion.highlighted .layer-accordion-title{color:#fff;font-weight:600}.playground-review-page{flex:1;display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem 0 1.5rem;position:relative;height:100%;min-height:0;overflow:hidden}.review-content-shell{flex:1;display:flex;position:relative;height:100%;min-height:0;width:100%;overflow:hidden}.review-content-shell.copy-open .review-main-content{padding-right:calc(2rem + 320px)}.review-main-content{flex:1;height:100%;min-height:0;overflow:hidden;padding:0 2rem;transition:padding .25s ease}.review-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.review-mode-switcher{display:inline-flex;border:1px solid #333;border-radius:999px;overflow:hidden;align-self:center;background-color:#181818f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.15rem;position:sticky;top:.5rem;z-index:2}.review-mode-btn{padding:.5rem 1.25rem;background:transparent;border:none;color:#bbb;font-size:.9rem;cursor:pointer;transition:all .2s ease}.review-mode-btn+.review-mode-btn{border-left:1px solid #333}.review-mode-btn:hover{color:#fff;background-color:#ffffff0a}.review-mode-btn.active{background-color:var(--active-color);color:#fff}.review-grid-layout{display:grid;grid-template-columns:minmax(0,60%) minmax(260px,40%);gap:1.25rem;width:100%;flex:1;min-height:0;height:100%}.review-grid-scroll{overflow-y:auto;padding-right:.5rem;height:100%;min-height:0}.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.85rem;align-content:flex-start}.review-grid-card{background-color:#1b1b1b;border:1px solid #333;border-radius:10px;padding:.75rem;display:flex;flex-direction:column;gap:.4rem;cursor:pointer;transition:all .2s ease;color:#f5f5f5;text-align:left;height:200px}.review-grid-card:hover{border-color:var(--active-color);color:#fff}.review-grid-card.selected{border-color:var(--active-color);box-shadow:0 0 0 1px var(--active-color)}.review-grid-thumbnail{width:100%;height:clamp(120px,12vw,150px);background-color:#0b0b0b;border-radius:6px;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;padding:clamp(.35rem,.8vw,.7rem)}.review-grid-thumbnail img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}.review-grid-label{display:flex;justify-content:space-between;font-size:.8rem;color:#bbb;margin-top:auto}.review-detail-panel{background-color:#111;border:1px solid #333;border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-height:0;overflow:hidden;height:100%}.review-detail-header{display:flex;justify-content:space-between;align-items:center}.review-detail-eyebrow{text-transform:uppercase;font-size:.65rem;letter-spacing:.08em;color:#999;margin:0 0 .2rem}.review-detail-header h4{margin:0;font-size:1.05rem;color:#fff}.review-detail-dimensions{font-size:.85rem;color:#aaa}.review-detail-frame{flex:1;width:100%;background-color:#050505;border-radius:12px;border:1px solid #1f1f1f;padding:clamp(.75rem,3vw,2.5rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;max-height:100%}.review-detail-canvas{width:100%;background-color:#000;border-radius:8px;border:1px solid #222;display:flex;align-items:center;justify-content:center;max-height:100%}.review-detail-canvas img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}.review-detail-description{margin:0;font-size:.85rem;color:#c5c5c5;opacity:.9}.review-carousel{flex:1;width:100%;display:flex;align-items:center;gap:1rem;min-height:0;height:100%}.carousel-nav-btn{width:48px;height:48px;border-radius:50%;border:1px solid #444;background-color:#1f1f1f;color:#f3f3f3;font-size:1.2rem;cursor:pointer;transition:all .2s ease;flex-shrink:0}.carousel-nav-btn:hover{border-color:var(--active-color);color:var(--active-color)}.carousel-stage{flex:1;background-color:#111;border:1px solid #333;border-radius:12px;padding:clamp(1rem,2vw,2rem);display:flex;align-items:center;justify-content:center;min-height:0;height:100%}.carousel-stage-content{width:100%;max-width:820px;display:flex;flex-direction:column;gap:.75rem;margin:0 auto;height:100%}.carousel-frame{width:100%;max-width:820px;padding:clamp(1rem,4vw,3rem);display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex:1;min-height:0}.carousel-frame img{max-width:100%;max-height:100%;object-fit:contain;width:100%;height:100%}.review-carousel-info{display:flex;justify-content:center;gap:1.5rem;font-size:.85rem;color:#cfcfcf}.review-copy-panel{position:absolute;top:0;right:0;bottom:0;width:320px;min-width:320px;background-color:#101010;border-left:1px solid #2b2b2b;box-shadow:-10px 0 30px #00000040;display:flex;flex-direction:column;align-items:flex-start;transition:transform .25s ease;transform:translate(100%);z-index:3}.review-copy-panel.open{transform:translate(0)}.copy-panel-toggle{margin:1rem 0 0;width:48px;height:72px;border-radius:20px 0 0 20px;border:1px solid #2b2b2b;border-right:none;background-color:#151515;color:#f4f4f4;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;transition:background .2s ease,color .2s ease;position:absolute;top:0;left:0;transform:translate(-100%)}.copy-panel-toggle:hover{background-color:#1f1f1f}.copy-panel-icon{opacity:.75;transition:color .2s ease,opacity .2s ease}.copy-panel-toggle:hover .copy-panel-icon,.review-copy-panel.open .copy-panel-icon{color:var(--active-color);opacity:1}.copy-panel-content{width:100%;flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease}.review-copy-panel.open .copy-panel-content{padding:1.25rem;opacity:1;visibility:visible;pointer-events:auto}.copy-panel-header h3{margin:0 0 .25rem;font-size:1rem}.copy-panel-header p{margin:0;font-size:.8rem;color:#9a9a9a}.copy-panel-body{margin-top:1rem;overflow-y:auto;padding-right:.4rem;flex:1;display:flex;flex-direction:column;gap:1rem}.copy-panel-empty{color:#9a9a9a;font-size:.85rem}.copy-panel-item{border:1px solid #2b2b2b;border-radius:10px;padding:.9rem;background-color:#151515;display:flex;flex-direction:column;gap:.5rem}.copy-panel-item-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.copy-panel-item-header h4{margin:0;font-size:.95rem}.copy-panel-item-header span{font-size:.75rem;color:#9b9b9b}.copy-panel-jump{border:none;background:#ffffff0d;color:#f4f4f4;width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-panel-jump:hover{background:#03a9f433;color:var(--active-color)}.copy-panel-item input{width:100%;border-radius:8px;border:1px solid #2f2f2f;background-color:#1a1a1a;color:#f5f5f5;padding:.6rem;font-size:.9rem;font-family:inherit}.copy-panel-item input:focus{outline:none;border-color:var(--active-color);background-color:#222}.review-empty-state{width:100%;padding:2rem;border:1px dashed #444;border-radius:12px;text-align:center;color:#bbb;background-color:#ffffff05;margin-top:2rem}@media (max-width: 1100px){.review-grid-layout{grid-template-columns:1fr}.review-detail-panel{order:-1;max-height:60vh}.review-carousel{flex-direction:column}.carousel-nav-btn{width:100%;border-radius:8px}.review-copy-panel{width:min(320px,85%);min-width:min(320px,85%)}.review-content-shell.copy-open .review-main-content{padding-right:calc(2rem + min(320px,85%))}}@media (max-height: 800px){.playground-review-page{overflow-y:auto}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #ffffff;--color-surface: #fafafa;--color-border: #e5e5e5;--color-text: #1a1a1a;--color-text-secondary: #666666;--color-primary: #0066cc;--color-primary-hover: #0052a3;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .07);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}