:root{--bg: #0e0e11;--bg-elevated: #15151a;--panel: #17171b;--panel-2: #1d1d22;--surface: #1a1a1f;--hover-bg: #22222a;--chip-hover: #2a2a32;--row-hover: rgba(255, 255, 255, .04);--input-bg: #121216;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .14);--drop-bg: rgba(91, 108, 255, .14);--text: #ecedf1;--text-muted: #9899a3;--text-faint: #6c6d77;--muted: var(--text-muted);--panel-bg: var(--panel);--text-dim: var(--text-muted);--accent: #5b6cff;--accent-hover: #7281ff;--accent-soft: rgba(91, 108, 255, .16);--accent-strong: #4456e6;--on-accent: #ffffff;--success: #3ecf8e;--warning: #e0a23e;--danger: #f0556a;--danger-strong: #d6453d;--r-xs: 4px;--r-sm: 6px;--r-md: 8px;--r-lg: 12px;--r-xl: 16px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 4px 14px rgba(0, 0, 0, .36);--shadow-lg: 0 24px 64px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);--ease: cubic-bezier(.2, .9, .3, 1);--t-fast: .12s;--t-base: .18s;--typo-card-bg: var(--panel-2);--typo-card-border: var(--border);--typo-field-bg: var(--input-bg);--typo-field-border:var(--border-strong);color-scheme:dark}:root[data-theme=light]{--bg: #fbfbfc;--bg-elevated: #ffffff;--panel: #f5f5f7;--panel-2: #ececef;--surface: #ffffff;--hover-bg: #e9e9ed;--chip-hover: #dededf;--row-hover: rgba(0, 0, 0, .045);--input-bg: #ffffff;--border: rgba(0, 0, 0, .1);--border-strong: rgba(0, 0, 0, .18);--drop-bg: rgba(68, 86, 230, .1);--text: #0e0e11;--text-muted: #54545c;--text-faint: #8b8b94;--accent: #4456e6;--accent-hover: #5b6cff;--accent-soft: rgba(68, 86, 230, .1);--accent-strong: #3343c9;--on-accent: #ffffff;--shadow-sm: 0 1px 2px rgba(15, 17, 25, .06);--shadow-md: 0 6px 18px rgba(15, 17, 25, .08);--shadow-lg: 0 24px 64px rgba(15, 17, 25, .16), 0 2px 6px rgba(15, 17, 25, .06);--typo-card-bg: #ffffff;--typo-card-border: #eeeef1;--typo-field-bg: #ffffff;--typo-field-border:#e4e4e7;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font:13px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01","ss03";font-variant-numeric:tabular-nums}:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}::selection{background:var(--accent-soft);color:var(--text)}.app{display:grid;grid-template-columns:240px 1fr 280px;grid-template-rows:48px 1fr;grid-template-areas:"toolbar toolbar toolbar" "left    stage   right";height:100%}.toolbar{grid-area:toolbar;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border)}.brand{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--text)}.project-menu{display:flex;align-items:center;gap:4px}.update-banner{position:fixed;top:60px;left:50%;transform:translate(-50%);z-index:50;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px #00000052;font-size:12.5px;color:var(--text);animation:update-banner-in .16s ease-out}@keyframes update-banner-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}.update-banner-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);flex:none}.update-banner-text{white-space:nowrap}.update-banner-btn{font:inherit;font-size:12px;font-weight:600;line-height:1;color:#fff;background:var(--accent);border:1px solid var(--accent-strong);border-radius:7px;padding:6px 12px;cursor:pointer}.update-banner-btn:hover{background:var(--accent-hover)}.update-banner-dismiss{font:inherit;font-size:12px;line-height:1;color:var(--text-muted);background:transparent;border:none;border-radius:var(--r-sm);padding:6px 8px;cursor:pointer}.update-banner-dismiss:hover{background:var(--hover-bg);color:var(--text)}.update-banner--synced .update-banner-dot{background:var(--success);box-shadow:0 0 0 3px #3ecf8e2e}.tbtn{font:inherit;font-size:12px;font-weight:500;line-height:1;color:var(--text);background:transparent;border:1px solid transparent;border-radius:var(--r-sm);padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.tbtn:hover:not(:disabled){background:var(--hover-bg);color:var(--text)}.tbtn:active:not(:disabled){background:var(--chip-hover);transform:translateY(.5px)}.tbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tbtn:disabled{opacity:.42;cursor:not-allowed}.home-primary,.login-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--r-md);box-shadow:0 1px #ffffff1f inset,var(--shadow-sm)}.home-primary:hover:not(:disabled),.login-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}.home-primary:active:not(:disabled),.login-primary:active:not(:disabled){background:var(--accent-strong);border-color:var(--accent-strong);transform:translateY(.5px)}.project-name{margin-left:6px;font-size:12px;font-weight:500;color:var(--text)}.project-savedat{color:var(--text-muted);display:inline-flex;align-items:center;gap:5px;margin-left:4px;font-weight:400}.project-pending{color:var(--warning)}.project-saving{color:var(--accent)}.save-spinner{display:inline-block;width:10px;height:10px;border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:save-spin .9s linear infinite;vertical-align:-1px}@keyframes save-spin{to{transform:rotate(360deg)}}.hint{color:var(--text-muted);font-size:12px}.spacer{flex:1}.status{color:var(--text-muted);font-size:12px}.status.ok{color:var(--success)}.status.err{color:var(--danger)}.panel{background:var(--panel);display:flex;flex-direction:column;min-height:0;overflow:hidden}.panel-left{grid-area:left;border-right:1px solid var(--border)}.panel-right{grid-area:right;border-left:1px solid var(--border);overflow:auto}.panel-title{padding:12px 14px;font-weight:600;font-size:12px;letter-spacing:-.005em;border-bottom:1px solid var(--border)}.panel-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 6px}.panel-tab{position:relative;background:transparent;border:none;color:var(--text-muted);font:inherit;font-size:12px;font-weight:600;padding:11px 10px;cursor:pointer;transition:color var(--t-fast) var(--ease)}.panel-tab:after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:transparent;border-radius:2px 2px 0 0;transition:background var(--t-fast) var(--ease)}.panel-tab:hover,.panel-tab.active{color:var(--text)}.panel-tab.active:after{background:var(--accent)}.panel-placeholder{padding:14px;color:var(--text-muted)}.file-tab{display:grid;grid-template-rows:minmax(80px,33%) auto 1fr;flex:1;min-height:0}.pages-section{display:flex;flex-direction:column;min-height:0;border-bottom:1px solid var(--border)}.pages-list{flex:1;min-height:0;overflow:auto;padding:4px 0 6px}.panel-subhead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--border);flex:none}.panel-subhead-title{font-weight:600}.page-row{display:flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;cursor:default;-webkit-user-select:none;user-select:none;min-width:0;border-radius:var(--r-xs);margin:0 4px;transition:background var(--t-fast) var(--ease)}.page-row:hover{background:var(--row-hover)}.page-row.selected{background:var(--accent-soft);color:var(--text)}.page-row.selected .page-glyph{color:var(--accent)}.page-row.selected .icon-btn{color:var(--text)}.page-glyph{flex:none;width:14px;text-align:center;color:var(--text-faint)}.page-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-context-menu{position:fixed;z-index:1000;min-width:168px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:4px;display:flex;flex-direction:column}.page-context-item{font:inherit;font-size:12px;color:var(--text);background:transparent;border:none;border-radius:var(--r-xs);padding:7px 10px;text-align:left;cursor:pointer}.page-context-item:hover:not(:disabled){background:var(--row-hover)}.page-context-item:disabled{opacity:.45;cursor:not-allowed}.page-context-item.danger{color:var(--danger)}.layers{padding:4px 0;overflow:auto;min-height:0}.layer-row{padding:5px 12px;cursor:default;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:2px;min-width:0;margin:0 4px;border-radius:var(--r-xs);transition:background var(--t-fast) var(--ease)}.layer-icon{display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;margin-right:4px;color:var(--text-faint);flex:0 0 auto}.layer-row.selected .layer-icon{color:var(--text)}.layer-icon-btn{display:inline-flex;cursor:pointer;border-radius:3px;padding:1px;margin:-1px 0}.layer-icon-btn:hover{background:var(--row-hover);color:var(--text)}.layer-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-row:hover{background:var(--row-hover)}.layer-row.selected{background:var(--accent-soft)}.layer-row.over-inside{box-shadow:inset 0 0 0 1px var(--accent);background:var(--drop-bg)}.layer-row.over-above{box-shadow:inset 0 2px 0 0 var(--accent)}.layer-row.over-below{box-shadow:inset 0 -2px 0 0 var(--accent)}.layer-caret{display:inline-block;width:12px;margin-right:2px;text-align:center;font-size:10px;line-height:1;color:var(--text-faint);cursor:pointer;transition:transform 80ms ease}.layer-caret.collapsed{transform:rotate(-90deg)}.layer-caret-spacer{display:inline-block;width:14px}.layer-edit{flex:1;min-width:0;box-sizing:border-box;font:inherit;color:var(--text);background:var(--input-bg);border:none;border-radius:3px;padding:0 3px;margin:-1px 0;box-shadow:inset 0 0 0 1px var(--accent);outline:none}.layer-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:-1px 0 -1px 2px;border-radius:3px;color:var(--text-faint);cursor:pointer;opacity:0;transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);flex:0 0 auto}.layer-row:hover .layer-toggle,.layer-row.selected .layer-toggle,.layer-toggle.active{opacity:1}.layer-toggle:hover{background:var(--row-hover);color:var(--text)}.layer-toggle.active{color:var(--text)}.layer-row.hidden .layer-name,.layer-row.hidden .layer-icon{opacity:.45}.props{padding:12px 14px}.prop-kind{font-weight:600;margin-bottom:6px;letter-spacing:-.005em}.prop-section{margin:14px 0 6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:600}.prop-section-row{display:flex;align-items:center;justify-content:space-between}.unit-toggle{display:inline-flex;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:1px;letter-spacing:0;text-transform:none}.unit-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;color:var(--text-muted);border:none;font:inherit;font-size:10px;padding:1px 6px;border-radius:var(--r-xs);cursor:pointer;line-height:1.4}.unit-btn:hover{color:var(--text)}.unit-btn.active{background:var(--chip-hover);color:var(--text)}.unit-btn.disabled{opacity:.4}.field-suffix{flex:none;padding-right:4px;color:var(--text-muted);font-size:11px;-webkit-user-select:none;user-select:none}.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field{display:flex;align-items:center;gap:2px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 4px;transition:border-color var(--t-fast) var(--ease)}.field:hover{border-color:var(--border-strong)}.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.field-label{flex:none;min-width:16px;padding:2px 4px;text-align:center;color:var(--text-muted);font-size:11px;cursor:ew-resize;-webkit-user-select:none;user-select:none;border-radius:var(--r-xs)}.field-label:hover{color:var(--text);background:var(--chip-hover)}.field-input{width:100%;min-width:0;font:inherit;color:var(--text);background:transparent;border:none;outline:none;padding:3px 2px}.field-input::-webkit-outer-spin-button,.field-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.field-input{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.assets-panel{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.assets-toolbar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border);flex-wrap:nowrap}.tbtn.small{font-size:11px;padding:4px 8px}.tbtn.small:disabled{opacity:.4;cursor:default}.tbtn.small.danger:hover:not(:disabled){background:var(--danger-strong);border-color:var(--danger-strong);color:#fff}.tbtn.small.drop-target{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.tbtn.small.active{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}.breadcrumb{flex:1;min-width:0;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumb.link{color:var(--text);cursor:pointer}.crumb.link:hover{text-decoration:underline}.crumb-sep{opacity:.5}.sizer{display:inline-flex;align-items:center}.sizer input[type=range]{width:70px;accent-color:var(--accent)}.assets-view.grid{display:grid;gap:10px;padding:10px}.assets-view.list{display:flex;flex-direction:column;padding:4px 0}.tile{position:relative;-webkit-user-select:none;user-select:none;border-radius:var(--r-sm)}.tile:not(.list){display:flex;flex-direction:column;gap:6px}.tile:not(.list) .tile-thumb{width:100%;height:var(--tile-size);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#c6a86a;transition:border-color var(--t-fast) var(--ease)}.tile:not(.list) .tile-thumb img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;display:block}.tile:not(.list) .folder-glyph{width:55%;height:55%}.tile:not(.list) .tile-name{font-size:11px;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.tile.list{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:0}.tile.list:hover{background:var(--row-hover)}.tile.list .tile-thumb{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#c6a86a}.tile.list .tile-thumb img{width:20px;height:20px;object-fit:contain;border-radius:2px;pointer-events:none}.tile.list .folder-glyph{width:18px;height:18px}.tile.list .tile-name{flex:1;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-meta{color:var(--text-muted);font-size:10px}.tile.folder{cursor:pointer}.tile.folder.trash .tile-thumb{color:var(--text-muted)}.tile.asset{cursor:grab}.tile.asset:active{cursor:grabbing}.tile.asset.trashed{cursor:default}.tile.asset.trashed .tile-thumb img{opacity:.55}.tile.asset.font,.tile.asset.font:active{cursor:default}.font-thumb{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:28px;line-height:1;color:var(--text);-webkit-user-select:none;user-select:none}.tile.list .font-thumb{font-size:14px}.tile:not(.list):hover .tile-thumb{border-color:var(--border-strong)}.tile.list.drop-target,.tile:not(.list).drop-target .tile-thumb{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--drop-bg)}.tile.list.drop-target{box-shadow:inset 0 0 0 1px var(--accent)}.tile-actions{position:absolute;top:4px;right:4px;display:none;gap:2px}.tile:hover .tile-actions{display:flex}.tile.list .tile-actions{position:static;display:flex}.tile.list .tile-actions .icon-btn{visibility:hidden}.tile.list:hover .tile-actions .icon-btn{visibility:visible}.tile-actions .icon-btn{background:#0000008c;border:1px solid rgba(0,0,0,.55);color:#fff;padding:1px 5px;font-size:10px;border-radius:var(--r-xs);cursor:pointer}.tile-actions .icon-btn:hover{background:var(--danger-strong);border-color:var(--danger-strong)}.tile.list .tile-actions .icon-btn{background:transparent;border-color:transparent;color:var(--text-muted)}.tile.list .tile-actions .icon-btn:hover{color:#fff;background:var(--danger-strong);border-color:var(--danger-strong)}.icon-btn{background:transparent;border:1px solid transparent;color:var(--text-muted);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:var(--r-xs);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.icon-btn:hover{color:var(--text);background:var(--chip-hover)}.tile-name-edit{font-size:11px;padding:1px 3px;text-align:center}.tile.list .tile-name-edit{text-align:left}.palette{padding:10px}.palette-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);cursor:grab;-webkit-user-select:none;user-select:none;background:var(--hover-bg);transition:border-color var(--t-fast) var(--ease)}.palette-item:hover{border-color:var(--accent)}.palette-item:active{cursor:grabbing}.palette-item .swatch{width:16px;height:12px;border-radius:2px;background:var(--accent)}.stage{grid-area:stage;position:relative;overflow:hidden}.canvas-surface{display:block;width:100%;height:100%}.frame-labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.frame-label{position:absolute;top:0;left:0;transform-origin:top left;margin-top:-18px;font-size:11px;line-height:14px;color:var(--text-muted);white-space:nowrap;-webkit-user-select:none;user-select:none}.text-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.text-node{position:absolute;top:0;left:0;transform-origin:0 0;white-space:pre-wrap;word-break:break-word;-webkit-user-select:none;user-select:none}[contenteditable=plaintext-only].text-node,.text-node>[contenteditable=plaintext-only]{outline:1px solid var(--accent);-webkit-user-select:text;user-select:text;cursor:text}.framebar{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:flex;gap:4px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:6px;box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.tool-button{display:flex;align-items:center;gap:6px;padding:7px 11px;font:inherit;font-weight:500;color:var(--text);background:transparent;border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.tool-button:hover:not(.active){background:var(--hover-bg)}.tool-button.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.tool-button.active:hover{background:var(--accent-hover)}.tool-button-label{font-size:12px}.prop-fill{display:flex;align-items:center;gap:8px;margin-top:6px}.prop-fill input[type=color]{width:28px;height:24px;padding:0;background:transparent;border:1px solid var(--border);border-radius:var(--r-xs);cursor:pointer}.prop-align-row{display:flex;gap:8px;margin-top:6px}.prop-align-group{display:flex;flex:1;gap:2px}.align-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0;font:inherit;color:var(--text);background:transparent;border:1px solid var(--border);border-radius:var(--r-xs);cursor:pointer;transition:background var(--t-fast) var(--ease)}.align-btn:hover{background:var(--hover-bg)}.align-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.typo-card{display:flex;flex-direction:column;gap:8px;padding:12px;margin-top:6px;background:var(--typo-card-bg);border:1px solid var(--typo-card-border);border-radius:var(--r-md)}.typo-header{display:flex;align-items:center;justify-content:space-between}.typo-title{font-size:12px;font-weight:600;color:var(--text)}.typo-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;color:var(--text-muted);background:transparent;border:none;border-radius:var(--r-xs);cursor:pointer;transition:background var(--t-fast) var(--ease)}.typo-icon-btn:hover{background:var(--hover-bg)}.typo-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.typo-row .typo-weight,.typo-row .typo-size{grid-column:span 1}.typo-row>*{min-width:0}.typo-card{min-width:0}.typo-select{position:relative;display:flex;align-items:center;height:28px;padding:0 8px;background:var(--typo-field-bg);border:1px solid var(--typo-field-border);border-radius:var(--r-sm);color:var(--text);font-size:12px;transition:border-color var(--t-fast) var(--ease)}.typo-select:focus-within{border-color:var(--accent)}.typo-select>select{flex:1;min-width:0;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;cursor:pointer;text-overflow:ellipsis}.typo-select>svg{margin-left:6px;color:var(--text-muted);pointer-events:none}.typo-select>select:disabled{color:var(--text);cursor:default;opacity:1}.typo-field{position:relative;display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;background:var(--typo-field-bg);border:1px solid var(--typo-field-border);border-radius:var(--r-sm);color:var(--text);font-size:12px;transition:border-color var(--t-fast) var(--ease)}.typo-field:focus-within{border-color:var(--accent)}.typo-field>input{flex:1;min-width:0;-webkit-appearance:none;appearance:none;-moz-appearance:textfield;background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0}.typo-field>input::-webkit-outer-spin-button,.typo-field>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.typo-field>input:disabled{color:var(--text);opacity:1}.typo-field>svg{color:var(--text-muted);pointer-events:none;flex-shrink:0}.typo-prefix{display:inline-flex;align-items:center;color:var(--text-muted)}.typo-size-presets{position:absolute;top:0;right:0;height:100%;width:22px;margin:0;padding:0;border:none;background:transparent;color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;opacity:0}.typo-align-row{display:flex;gap:8px;align-items:stretch}.typo-align-row .prop-align-group{flex:1}.typo-advanced-btn{flex:0 0 28px;height:24px}.typo-advanced-btn.active{color:var(--accent);background:transparent;border-color:var(--accent)}.prop-text{width:100%;margin-top:6px;padding:8px 10px;font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);outline:none;resize:vertical;min-height:64px;transition:border-color var(--t-fast) var(--ease)}.prop-text:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.prop-font-select{width:100%;margin-top:6px;padding:7px 8px;font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);outline:none;transition:border-color var(--t-fast) var(--ease)}.prop-font-select:focus{border-color:var(--accent)}.prop-fill-hex{font-size:11px;color:var(--text-muted)}input.prop-fill-hex{flex:0 0 auto;width:8ch;font:inherit;font-size:11px;background:transparent;border:1px solid transparent;border-radius:var(--r-xs);padding:2px 4px;outline:none}input.prop-fill-hex:hover{border-color:var(--border)}input.prop-fill-hex:focus{border-color:var(--accent);color:var(--text);background:var(--surface)}.prop-template{width:100%;margin-top:6px;font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px}.frame-templates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}.frame-template{font:inherit;color:var(--text);background:var(--hover-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 8px;cursor:pointer;text-align:center;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.frame-template:hover{border-color:var(--border-strong)}.frame-template.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.frame-template-name{font-size:11px;font-weight:600}.frame-template-size{font-size:10px;color:var(--text-muted);margin-top:2px}.frame-template.active .frame-template-size{color:#ffffffd9}.home-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(1100px 600px at 80% -10%,var(--accent-soft),transparent 60%),var(--bg);z-index:100;overflow:auto}.home{max-width:1080px;margin:0 auto;padding:64px 40px 96px;display:flex;flex-direction:column;gap:40px}.home-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--border)}.home-header h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--text);display:inline-flex;align-items:center;gap:10px}.home-actions{display:flex;gap:10px;align-items:center}.home-notice{padding:12px 14px;border-radius:var(--r-sm);background:var(--hover-bg);border:1px solid var(--border);color:var(--text-muted);font-size:12px}.home-section{display:flex;flex-direction:column;gap:14px}.home-section-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);font-weight:600;margin:0}.home-empty{padding:40px 24px;border:1px dashed var(--border-strong);border-radius:var(--r-lg);color:var(--text-muted);text-align:center;font-size:13px;background:var(--surface)}.home-empty strong{color:var(--text)}.home-projects{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.home-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease)}.home-card:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow-md);background:var(--bg-elevated)}.home-card-body{display:flex;align-items:center;gap:14px;width:100%;padding:16px;background:transparent;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.home-card-icon{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);border-radius:var(--r-md)}.home-card-icon svg{width:20px;height:20px}.home-card-meta{display:flex;flex-direction:column;min-width:0;gap:3px}.home-card-name{font-weight:600;font-size:13px;color:var(--text);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-card-when{font-size:11px;color:var(--text-muted)}.home-card-fav{position:absolute;top:8px;right:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;border-radius:var(--r-sm);color:var(--text-faint);opacity:0;cursor:pointer;transition:opacity var(--t-base) var(--ease),color var(--t-base) var(--ease),background var(--t-base) var(--ease)}.home-card-fav svg{width:16px;height:16px}.home-card:hover .home-card-fav,.home-card-fav:focus-visible,.home-card.favorited .home-card-fav{opacity:1}.home-card-fav:hover{background:var(--row-hover);color:var(--text)}.home-card.favorited .home-card-fav{color:var(--warning)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#08080c8c;display:flex;align-items:center;justify-content:center;padding:24px;animation:modal-fade .14s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}.modal-card{width:100%;max-width:440px;background:var(--bg-elevated);color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:modal-pop .18s var(--ease)}@keyframes modal-pop{0%{transform:translateY(8px) scale(.985);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.modal-header{padding:16px 20px;font-weight:600;font-size:14px;letter-spacing:-.005em;border-bottom:1px solid var(--border)}.modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:10px}.modal-body p{margin:0;font-size:13px;line-height:1.55;color:var(--text)}.modal-hint{color:var(--text-muted);font-size:12px!important}.modal-input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);color:var(--text);font:inherit;font-size:13px;transition:border-color var(--t-fast) var(--ease)}.modal-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border);background:var(--panel)}.modal-actions .tbtn{font-size:12px;padding:7px 14px;border:1px solid var(--border-strong)}.modal-actions .tbtn:hover:not(:disabled){background:var(--hover-bg);border-color:var(--border-strong)}.modal-danger{background:var(--danger-strong);border-color:var(--danger-strong)!important;color:var(--on-accent)}.modal-danger:hover:not(:disabled){background:var(--danger);border-color:var(--danger)!important;color:var(--on-accent)}.login-view{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 500px at 50% -10%,var(--accent-soft),transparent 60%),var(--bg);z-index:100}.login-card{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:40px 40px 32px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);min-width:340px;max-width:400px}.login-mark{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);margin-bottom:4px}.login-mark svg{width:24px;height:24px}.login-card h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--text)}.login-tag{margin:0;color:var(--text-muted);font-size:13px;line-height:1.5}.login-tag strong{color:var(--text);font-weight:600}.login-primary{margin-top:4px;min-width:160px;justify-content:center}.login-fine{margin:8px 0 0;color:var(--text-faint);font-size:11px}.home-user{display:inline-flex;align-items:center;gap:10px;margin-left:12px}.home-user-email{font-size:12px;color:var(--text-muted);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--border-strong)}.modal-wide{min-width:520px;max-width:720px;width:92vw}.history-list,.member-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.history-row,.member-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--t-fast) var(--ease)}.history-row:hover,.member-row:hover{border-color:var(--border-strong)}.history-row.current{outline:2px solid var(--accent)}.history-row-main{flex:1;display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;background:transparent;border:none;color:inherit;text-align:left;padding:0;cursor:pointer}.history-row-when{font-size:12px;color:var(--text-muted)}.history-row-label{font-size:13px}.history-row-size{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}.member-invite-row{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap}.member-invite-row input[type=email]{flex:1;min-width:200px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);color:var(--text);font:inherit;font-size:13px;transition:border-color var(--t-fast) var(--ease)}.member-invite-row input[type=email]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.member-invite-row input[type=email]::placeholder{color:var(--text-faint)}.member-invite-row select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--input-bg);color:var(--text);font:inherit;font-size:13px}.member-share-link{font-size:12px;color:var(--text-muted);margin-bottom:10px;word-break:break-all}.member-share-link code{font-family:ui-monospace,JetBrains Mono,SF Mono,Consolas,monospace;background:var(--hover-bg);padding:2px 6px;border-radius:var(--r-xs);color:var(--text)}.member-meta{flex:1;display:flex;flex-direction:column;min-width:0;gap:2px}.member-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-email{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-role{font-size:12px;color:var(--text-muted);text-transform:capitalize}.member-pending-header{margin:16px 0 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.member-row-pending{border-style:dashed;background:transparent}.user-menu{position:relative;display:inline-block}.user-menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong);background:var(--hover-bg);cursor:pointer;padding:0;overflow:hidden;transition:filter var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.user-menu-trigger:hover{filter:brightness(1.1);border-color:var(--accent)}.user-menu-trigger[aria-expanded=true]{outline:2px solid var(--accent);outline-offset:1px}.user-menu-avatar{width:100%;height:100%;object-fit:cover}.user-menu-fallback{font-size:13px;font-weight:600;color:var(--text);text-transform:uppercase}.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:6px;z-index:250;animation:modal-fade .1s ease-out}.user-menu-header{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;position:relative}.user-menu-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-email{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-badge{position:absolute;top:10px;right:12px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:3px;background:var(--accent);color:var(--on-accent);font-weight:600}.user-menu-divider{height:1px;background:var(--border);margin:4px 0}.user-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:none;border:none;color:var(--text);font:inherit;font-size:12px;border-radius:var(--r-xs);cursor:pointer;text-align:left;transition:background var(--t-fast) var(--ease)}.user-menu-item:hover{background:var(--row-hover)}.user-menu-item-icon{display:inline-flex;width:16px;justify-content:center;font-size:14px;color:var(--text-muted)}.settings-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--panel)}.settings-tabs .panel-tab{padding:12px 14px;font-size:12px}.domains-tab{display:flex;flex-direction:column;gap:20px}.domains-hint{margin:0;padding:10px 14px;font-size:12px;line-height:1.55;color:var(--text-muted);background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r-md)}.domains-section{display:flex;flex-direction:column;gap:10px}.domains-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:2px}.domains-section-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}.domains-section-meta{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}.domain-add{display:flex;gap:8px;align-items:stretch}.domain-input{flex:1;display:flex;align-items:center;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:0 10px;height:34px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}.domain-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.domain-input-prefix{color:var(--text-faint);font-family:ui-monospace,JetBrains Mono,SF Mono,Consolas,monospace;font-size:13px;padding-right:6px;margin-right:6px;border-right:1px solid var(--border);-webkit-user-select:none;user-select:none}.domain-input input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font:inherit;font-size:13px;font-family:ui-monospace,JetBrains Mono,SF Mono,Consolas,monospace;padding:0}.domain-input input::placeholder{color:var(--text-faint)}.domain-add .home-primary{height:34px;padding:0 16px}.domains-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.domain-row{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:12px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.domain-row:hover{border-color:var(--border-strong)}.domain-row-readonly{background:var(--panel);grid-template-columns:24px 1fr auto}.domain-glyph{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text-muted)}.domain-glyph svg{width:16px;height:16px}.domain-row-readonly .domain-glyph{color:var(--text-faint)}.domain-name{font-family:ui-monospace,JetBrains Mono,SF Mono,Consolas,monospace;font-size:13px;color:var(--text);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.domain-row-readonly .domain-name{color:var(--text-muted)}.domain-when{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}.domain-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:999px;background:var(--hover-bg);color:var(--text-muted);border:1px solid var(--border)}.domain-remove{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--r-xs);color:var(--text-faint);cursor:pointer;opacity:0;transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.domain-remove svg{width:14px;height:14px}.domain-row:hover .domain-remove,.domain-remove:focus-visible{opacity:1}.domain-remove:hover:not(:disabled){color:var(--danger);background:var(--hover-bg);border-color:var(--border)}.domain-remove:disabled{cursor:not-allowed}.domains-empty{display:flex;align-items:center;gap:12px;padding:16px;border:1px dashed var(--border-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text-muted);font-size:12px;line-height:1.55}.domains-empty-glyph{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;color:var(--text-faint)}.domains-empty-glyph svg{width:20px;height:20px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
