:root{--bg-app:#0d0d1a;--bg-surface:#ffffff0a;--bg-surface-2:#ffffff12;--bg-surface-3:#ffffff1a;--border:#ffffff14;--border-strong:#ffffff24;--text-primary:#ffffffeb;--text-secondary:#ffffff80;--text-muted:#ffffff47;--accent:#28ee96;--accent-dim:#28ee961f;--accent-hover:#1fd47f;--negative:#ff5c5c;--font-ui:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-ui);color:var(--text-primary);background:var(--bg-app);-webkit-font-smoothing:antialiased;font-size:12px;line-height:1.5}input,select,button,textarea{font-family:inherit;font-size:inherit}button{cursor:pointer;color:inherit;background:0 0;border:none;outline:none}input[type=text],input[type=number],select{outline:none}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ffffff38}.app-layout{flex-direction:column;height:100%;display:flex}.top-bar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:100;background:#0d0d1aeb;flex-shrink:0;align-items:center;gap:10px;height:50px;min-height:50px;padding:0 16px;display:flex}.top-bar__logo{-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:9px;text-decoration:none;display:flex}.top-bar__logo-icon{background:var(--accent-dim);border:1px solid #28ee9640;border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.top-bar__logo-icon svg{width:16px;height:16px;color:var(--accent)}.top-bar__title{color:var(--text-primary);white-space:nowrap;font-size:13px;font-weight:600}.theme-name-editor{align-items:center;gap:6px;min-width:0;max-width:240px;display:flex}.theme-name-editor--mobile{width:100%;max-width:none;padding:0 2px 2px}.theme-name-editor__label{color:#ffffffbf;white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.theme-name-editor--mobile .theme-name-editor__label{color:var(--text-primary);flex:1;font-size:14px}.theme-name-editor__edit-btn{border-radius:var(--radius-sm);color:#ffffff73;cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;transition:color .15s,background .15s;display:flex}.theme-name-editor__edit-btn:hover{color:var(--accent);background:var(--accent-dim)}.theme-name-editor__input{color:#ffffffd9;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;outline:none;transition:border-color .15s}.theme-name-editor__input--desktop{width:200px;padding:4px 10px;font-size:11px}.theme-name-editor__input--mobile{border-color:var(--border);width:100%;color:var(--text-primary);border-radius:8px;padding:10px 12px;font-size:14px}.theme-name-editor__input:focus{border-color:#28ee9680}.top-bar__spacer{flex:1}.top-bar__btn{border-radius:var(--radius-md);white-space:nowrap;flex-shrink:0;align-items:center;gap:6px;padding:6px 13px;font-size:12px;font-weight:500;transition:all .15s;display:flex}.top-bar__btn--ghost{color:var(--text-secondary);border:1px solid var(--border)}.top-bar__btn--ghost:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-surface)}.top-bar__btn--outline{color:var(--text-secondary);border:1px solid var(--border)}.top-bar__btn--outline:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-surface)}.top-bar__btn--accent{background:var(--accent);color:#0d0d1a;border:none;font-weight:700}.top-bar__btn--accent:hover{background:var(--accent-hover)}.top-bar__toggle{border-radius:var(--radius-md);border:1px solid var(--border);color:var(--text-secondary);flex-shrink:0;align-items:center;gap:2px;padding:5px;transition:all .15s;display:flex}.top-bar__toggle:hover{border-color:var(--border-strong);background:var(--bg-surface)}.top-bar__toggle-icon{border-radius:5px;justify-content:center;align-items:center;width:26px;height:26px;transition:all .15s;display:flex}.top-bar__toggle-icon--active{background:var(--accent-dim);color:var(--accent)}.workspace{flex:1;min-height:0;position:relative;overflow:hidden}.main-shell{flex:1;min-height:0;display:flex;overflow:hidden}.preview-canvas{justify-content:center;align-items:center;width:100%;height:100%;padding:16px;display:flex;overflow:hidden}.preview-dashboard{transform-origin:50%;flex-shrink:0}.preview-pill{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-strong);z-index:50;white-space:nowrap;background:#0d0d1ad1;border-radius:24px;align-items:center;gap:8px;padding:5px 12px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006}.pill-btn{width:24px;height:24px;color:var(--text-secondary);border-radius:5px;justify-content:center;align-items:center;font-size:14px;font-weight:600;transition:all .15s;display:flex}.pill-btn:hover{color:var(--text-primary);background:var(--bg-surface-2)}.pill-sheet-btn{height:24px;color:var(--text-secondary);border-radius:5px;padding:0 8px;font-size:10px;font-weight:600;transition:all .15s}.pill-sheet-btn:hover{color:var(--text-primary);background:var(--bg-surface-2)}.pill-sheet-btn--active{color:var(--accent);background:var(--accent-dim)}.pill-label{color:var(--text-secondary);text-align:center;min-width:38px;font-size:11px;font-weight:500}.pill-sep{background:var(--border);width:1px;height:16px}.pill-bg-swatch{border:1.5px solid var(--border);cursor:pointer;border-radius:50%;flex-shrink:0;width:16px;height:16px;transition:all .12s}.pill-bg-swatch:hover{transform:scale(1.2)}.pill-bg-swatch--active{border-color:var(--accent);box-shadow:0 0 0 2px #28ee9640}.left-sidebar{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-right:1px solid var(--border);background:#0a0a14f5;flex-direction:column;width:360px;min-width:360px;max-width:360px;display:flex;overflow:hidden}.left-sidebar .bottom-tabs{flex-wrap:wrap;align-content:flex-start;gap:4px;height:auto;min-height:0;padding:8px 8px 6px}.left-sidebar .bottom-tab{height:24px;padding:3px 10px;font-size:10px}.left-sidebar .bottom-settings{flex-direction:column;flex:1;gap:8px;min-height:0;padding:8px;display:flex;overflow:hidden auto}.left-sidebar .detail-section{width:100%;min-width:0}.palette-row--sidebar{border-top:1px solid var(--border);box-sizing:border-box;flex-wrap:wrap;flex-shrink:0;align-content:flex-start;align-items:flex-start;gap:6px;min-height:104px;padding:10px 8px 20px;display:flex;overflow:auto visible}.bottom-bar{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top:1px solid var(--border);background:#0a0a14f5;flex-direction:column;flex-shrink:0;height:196px;min-height:196px;display:flex}.bottom-tabs{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:2px;height:34px;min-height:34px;padding:0 10px;display:flex}.bottom-tab{height:26px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:4px 13px;font-size:11px;font-weight:500;transition:all .15s}.bottom-tab:hover{color:var(--text-primary);background:var(--bg-surface)}.bottom-tab--active{color:var(--accent);background:var(--accent-dim);font-weight:600}.bottom-settings{flex:1;gap:6px;min-height:0;padding:6px 10px;display:flex;overflow:auto hidden}.detail-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);flex-direction:column;flex-shrink:0;gap:2px;min-width:154px;padding:6px 8px;display:flex;overflow-y:auto}.detail-section__title{text-transform:uppercase;letter-spacing:.9px;color:var(--text-muted);white-space:nowrap;flex-shrink:0;margin-bottom:4px;font-size:9px;font-weight:700}.detail-row{justify-content:space-between;align-items:center;gap:6px;min-height:22px;display:flex}.detail-label{color:var(--text-secondary);white-space:nowrap;flex-shrink:0;font-size:10px}.detail-slider{accent-color:var(--accent);flex:1;min-width:60px;max-width:100px;height:3px}.detail-input{border:1px solid var(--border);border-radius:var(--radius-sm);text-align:right;background:var(--bg-surface-2);width:44px;color:var(--text-primary);padding:2px 5px;font-size:10px}.detail-input:focus{border-color:var(--accent)}.control-select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface-2);color:var(--text-primary);flex:1;min-width:0;padding:2px 5px;font-size:10px}.control-select option{color:var(--text-primary);background:#1a1a2e}.control-value{color:var(--text-muted);text-align:right;flex-shrink:0;min-width:24px;font-family:Consolas,monospace;font-size:9px}.ctrl-select{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface-2);color:var(--text-primary);flex:1;min-width:0;padding:2px 5px;font-size:10px}.ctrl-select option{color:var(--text-primary);background:#1a1a2e}.ctrl-slider{accent-color:var(--accent);flex:1;min-width:60px;max-width:100px;height:3px}.ctrl-value{color:var(--text-muted);text-align:right;flex-shrink:0;min-width:26px;font-family:Consolas,monospace;font-size:9px}.detail-toggle{cursor:pointer;background:#ffffff1f;border-radius:9px;flex-shrink:0;width:30px;height:17px;transition:background .2s;position:relative}.detail-toggle--on{background:var(--accent)}.detail-toggle__thumb{background:#fff;border-radius:50%;width:13px;height:13px;transition:transform .18s;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #0000004d}.detail-toggle--on .detail-toggle__thumb{transform:translate(13px)}.detail-color-swatch{cursor:pointer;border:1px solid #ffffff26;border-radius:4px;flex-shrink:0;width:22px;height:22px;transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}.detail-color-swatch:hover{transform:scale(1.1);box-shadow:0 2px 8px #0006}.detail-color-swatch input[type=color]{cursor:pointer;opacity:0;border:none;width:150%;height:150%;padding:0;position:absolute;inset:-8px}.align-buttons{border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;overflow:hidden}.align-btn{color:var(--text-secondary);border-right:1px solid var(--border);padding:2px 7px;font-size:10px;transition:all .12s}.align-btn:last-child{border-right:none}.align-btn:hover{background:var(--bg-surface-2);color:var(--text-primary)}.align-btn--active{background:var(--accent-dim);color:var(--accent)}.palette-row{border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:6px;height:58px;min-height:58px;padding:0 10px;display:flex;overflow-x:auto}.palette-slot{flex-direction:column;flex-shrink:0;align-items:center;gap:2px;display:flex;position:relative}.palette-slot__swatch{cursor:pointer;border:1.5px solid #0000;border-radius:6px;width:32px;height:32px;transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}.palette-slot__swatch:hover{transform:scale(1.1);box-shadow:0 3px 10px #0006}.palette-slot__swatch--seed{border-color:var(--accent);box-shadow:0 0 0 2px #28ee9640}.palette-slot__swatch--locked{opacity:.65}.palette-slot__swatch--locked:after{content:"";pointer-events:none;border:1.5px dashed #fff6;border-radius:5px;position:absolute;inset:0}.palette-slot__swatch input[type=color]{cursor:pointer;opacity:0;border:none;width:150%;height:150%;padding:0;position:absolute;inset:-8px}.palette-slot__hex{color:var(--text-muted);letter-spacing:-.3px;font-family:Consolas,monospace;font-size:8px}.palette-slot__icons{gap:2px;margin-top:2px;padding-bottom:2px;display:flex}.palette-row--sidebar .palette-slot__icon-btn{width:16px;height:16px}.palette-slot__icon-btn{width:14px;height:14px;color:var(--text-muted);border-radius:2px;justify-content:center;align-items:center;transition:color .12s;display:flex}.palette-slot__icon-btn:hover{color:var(--text-secondary)}.palette-slot__icon-btn--active{color:var(--accent)}.palette-row__actions{flex-direction:column;flex-shrink:0;gap:4px;margin-left:6px;display:flex}.palette-row__btn{white-space:nowrap;border-radius:6px;padding:4px 12px;font-size:10px;font-weight:600;transition:all .15s}.palette-row__btn--accent{background:var(--accent);color:#0d0d1a}.palette-row__btn--accent:hover{background:var(--accent-hover)}.palette-row__btn--ghost{background:var(--bg-surface-2);color:var(--text-secondary);border:1px solid var(--border)}.palette-row__btn--ghost:hover{color:var(--text-primary);border-color:var(--border-strong)}.seed-swatch{cursor:pointer;border:1px solid #ffffff26;border-radius:4px;flex-shrink:0;width:22px;height:22px;transition:transform .12s;position:relative;overflow:hidden}.seed-swatch:hover{transform:scale(1.1)}.seed-swatch input[type=color]{cursor:pointer;opacity:0;border:none;width:150%;height:150%;padding:0;position:absolute;inset:-8px}.seed-hex{color:var(--text-primary);background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);width:66px;padding:2px 5px;font-family:Consolas,Monaco,monospace;font-size:10px}.seed-hex:focus{border-color:var(--accent)}.ctrl-stepper{border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:0;display:flex;overflow:hidden}.ctrl-stepper__btn{width:22px;height:22px;color:var(--text-secondary);justify-content:center;align-items:center;font-size:14px;font-weight:600;transition:background .1s;display:flex}.ctrl-stepper__btn:hover{background:var(--bg-surface-2);color:var(--text-primary)}.ctrl-stepper__val{text-align:center;min-width:22px;color:var(--text-primary);font-size:11px;font-weight:600}.app-footer{border-top:1px solid var(--border);background:#0a0a14f7;flex-shrink:0;justify-content:space-between;align-items:center;height:36px;min-height:36px;padding:0 16px;display:flex}.app-footer__left{align-items:center;gap:10px;display:flex}.app-footer__title{color:var(--text-muted);font-size:11px;font-weight:500}.app-footer__author{color:var(--text-muted);opacity:.7;font-size:10px}.app-footer__sep{background:var(--border);width:1px;height:12px}.app-footer__link{color:var(--text-muted);font-size:11px;text-decoration:none;transition:color .15s}.app-footer__link:hover{color:var(--accent)}.dash-widget{transition:box-shadow .15s,border-color .15s}.divider{background:var(--border);height:1px;margin:0}.btn-sm{border-radius:var(--radius-sm);padding:4px 10px;font-size:10px;font-weight:500;transition:all .15s}.btn-sm--primary{background:var(--accent);color:#0d0d1a;font-weight:700}.btn-sm--primary:hover{background:var(--accent-hover)}.btn-sm--ghost{color:var(--text-secondary);border:1px solid var(--border);background:0 0}.btn-sm--ghost:hover{background:var(--bg-surface);color:var(--text-primary)}.mobile-layout{flex-direction:column;height:100%;display:flex;overflow:hidden}.mobile-content{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow:hidden auto}.mobile-content--preview{flex-direction:column;display:flex;overflow:hidden}.mobile-top-bar{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;padding:10px 12px 8px}.mobile-top-bar__row{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.mobile-top-bar__logo{color:var(--accent);align-items:center;gap:8px;display:flex}.mobile-top-bar__logo svg{width:22px;height:22px}.mobile-top-bar__brand{color:var(--text-primary);font-size:14px;font-weight:700}.mobile-top-bar__actions{align-items:center;gap:6px;display:flex}.mobile-top-bar__export-btn span{display:none}@media (width>=380px){.mobile-top-bar__export-btn span{display:inline}}.mobile-top-bar__menu-wrap{position:relative}.mobile-top-bar__menu-btn{border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text-secondary);justify-content:center;align-items:center;transition:background .15s;display:flex}.mobile-top-bar__menu-btn:hover{background:var(--bg-surface-2);color:var(--text-primary)}.mobile-top-bar__dropdown{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-strong);border-radius:var(--radius-md);z-index:200;background:#0d0d1af2;min-width:180px;padding:4px;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 8px 24px #00000073}.mobile-top-bar__dropdown-item{border-radius:var(--radius-sm);width:100%;color:var(--text-secondary);text-align:left;align-items:center;gap:8px;padding:10px 12px;font-size:13px;transition:background .15s;display:flex}.mobile-top-bar__dropdown-item:hover{background:var(--bg-surface-2);color:var(--text-primary)}.mobile-top-bar__dropdown-item--danger{color:#ff7878e6}.mobile-top-bar__name-input{border:1px solid var(--border);width:100%;color:var(--text-primary);background:#ffffff0d;border-radius:8px;outline:none;padding:10px 12px;font-size:14px}.mobile-top-bar__name-input:focus{border-color:#28ee9680}.mobile-nav{height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border-strong);z-index:100;background:#0d0d1aeb;flex-shrink:0;justify-content:space-around;align-items:stretch;display:flex}.mobile-nav__item{min-height:44px;color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;transition:color .15s;display:flex}.mobile-nav__item--active{color:var(--accent)}.mobile-nav__label{font-size:10px;font-weight:500}.mobile-panel{padding:12px 14px 20px}.mobile-panel__title{color:var(--text-primary);margin:0 0 12px;font-size:15px;font-weight:600}.mobile-panel__body{flex-direction:column;gap:12px;display:flex}.theme-tab--mobile{flex-direction:column;gap:16px;display:flex}.theme-tab--mobile .detail-section--stacked{width:100%;min-width:unset!important}.theme-tab--mobile .detail-row{flex-wrap:wrap;gap:8px}.theme-tab--mobile .ctrl-slider{flex:1;min-width:120px}.theme-tab--mobile .seed-swatch,.theme-tab--mobile .seed-swatch input[type=color]{width:44px;height:44px}.theme-tab--mobile .seed-hex{padding:8px 10px;font-size:14px}.theme-tab--mobile .ctrl-select,.theme-tab--mobile .detail-input{min-height:40px;font-size:14px}.mobile-details{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.mobile-details__summary{color:var(--text-secondary);cursor:pointer;padding:12px 14px;font-size:13px;font-weight:600;list-style:none}.mobile-details__summary::-webkit-details-marker{display:none}.mobile-details[open] .mobile-details__summary{color:var(--accent);border-bottom:1px solid var(--border)}.mobile-details .detail-section{margin:0;padding:12px 14px}.mobile-input{width:100%;height:auto!important;padding:10px 12px!important;font-size:14px!important}.mobile-btn-full{width:100%;padding:12px!important;font-size:13px!important}.mobile-hint{color:var(--text-muted);margin:0;font-size:11px;line-height:1.5}.mobile-fetch-msg{word-break:break-word;border-radius:6px;padding:8px 10px;font-size:11px;line-height:1.5}.mobile-fetch-msg--ok{color:#28ee96;background:#28ee961a;border:1px solid #28ee964d}.mobile-fetch-msg--error{color:#ff8080;background:#ff50501a;border:1px solid #ff50504d}.mobile-fetch-msg--idle,.mobile-fetch-msg--loading{color:var(--text-muted);background:#ffffff0d}.mobile-styling-tabs{-webkit-overflow-scrolling:touch;gap:6px;margin-bottom:12px;padding-bottom:4px;display:flex;overflow-x:auto}.mobile-styling-tabs__btn{min-height:44px;color:var(--text-secondary);background:var(--bg-surface-2);border:1px solid var(--border);border-radius:8px;flex-shrink:0;padding:0 14px;font-size:13px;font-weight:600;transition:all .15s}.mobile-styling-tabs__btn--active{color:var(--accent);background:var(--accent-dim);border-color:#28ee9659}.mobile-styling-content .detail-section{min-width:unset!important}.palette-grid--mobile{grid-template-columns:repeat(3,1fr);gap:12px;padding:0;display:grid}.palette-grid--mobile .palette-slot{align-items:center}.palette-grid--mobile .palette-slot__swatch{aspect-ratio:1;width:100%;max-width:72px;margin:0 auto}.palette-grid--mobile .palette-slot__swatch input[type=color]{width:100%;height:100%}.palette-grid--mobile .palette-slot__hex{font-size:11px}.palette-row__actions--mobile{grid-column:1/-1;width:100%;margin:8px 0 0}.palette-row__actions--mobile .palette-row__btn{width:100%;min-height:44px;font-size:14px}.palette-add-slot{border:2px dashed var(--border-strong);border-radius:var(--radius-sm);color:var(--text-muted);background:#ffffff08;flex-shrink:0;justify-content:center;align-items:center;transition:border-color .15s,color .15s,background .15s;display:flex}.palette-add-slot:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.palette-add-slot--sidebar{align-self:flex-start;width:52px;min-height:66px}.palette-add-slot--grid{aspect-ratio:1;width:100%;max-width:72px;min-height:72px;margin:0 auto}.palette-grid--mobile .palette-add-slot--grid{grid-column:span 1}.workspace--mobile{flex-direction:column;flex:1;min-height:0;display:flex}.preview-canvas--mobile{flex:1;justify-content:center;align-items:center;padding:8px;display:flex;overflow:hidden}.preview-dashboard--mobile{transform-origin:50%;flex-shrink:0}.preview-pill--mobile{bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:10px;padding:8px 14px}.preview-pill--mobile .pill-btn{width:36px;min-width:36px;height:36px;min-height:36px}.preview-pill--mobile .pill-label{min-width:44px;font-size:13px}.preview-pill--mobile .pill-bg-swatch{cursor:pointer;border:none;border-radius:50%;width:28px;min-width:28px;height:28px;min-height:28px;padding:0}