@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#f4f6fa;--color-surface:#fafbfd;--color-surface-2:#edf0f7;--color-border:#dde3ee;--color-border-strong:#bcc6da;--color-text:#0f1520;--color-text-2:#3a4560;--color-text-muted:#7a8ba0;--color-brand:#2563eb;--color-brand-subtle:#eef3ff;--color-brand-hover:#1d55d0;--color-error:#d42b3a;--color-error-subtle:#fef0f1;--color-warning:#c08a10;--color-warning-subtle:#fef9ec;--color-success:#1e7a4a;--color-success-subtle:#edfbf3;--shadow-sm:0 1px 3px #2563eb14, 0 0 0 1px #2563eb0a;--shadow-md:0 4px 16px #2563eb1a, 0 1px 4px #2563eb0f;--shadow-lg:0 12px 40px #2563eb1f, 0 2px 8px #2563eb0f;--brand-rgb:37,99,235;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700}html,body{height:100%;font-family:Inter,-apple-system,PingFang SC,sans-serif;font-size:var(--font-size-sm);line-height:1.6;font-weight:var(--font-weight-normal);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}#app{min-height:100vh}.app-layout[data-v-5c208d1a]{background:var(--color-bg);min-height:100vh;transition:background .25s;display:flex}.control-panel[data-v-5c208d1a]{background:var(--color-surface);border-right:1px solid var(--color-border);width:300px;box-shadow:var(--shadow-sm);flex-direction:column;flex-shrink:0;gap:0;height:100vh;display:flex;position:sticky;top:0;overflow-y:auto}.panel-header[data-v-5c208d1a]{border-bottom:1px solid var(--color-border);padding:24px 20px 16px}.logo[data-v-5c208d1a]{align-items:center;gap:8px;margin-bottom:8px;display:flex}.logo-icon[data-v-5c208d1a]{color:var(--color-brand);font-size:20px}.logo-text[data-v-5c208d1a]{color:var(--color-text);letter-spacing:-.3px;font-size:15px;font-weight:700}.panel-desc[data-v-5c208d1a]{color:var(--color-text-muted);font-size:12px;line-height:1.5}.section[data-v-5c208d1a]{border-bottom:1px solid var(--color-border);padding:16px 20px}.section-label[data-v-5c208d1a]{text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);margin-bottom:10px;font-size:11px;font-weight:600}.color-picker-row[data-v-5c208d1a]{align-items:center;gap:8px;margin-bottom:10px;display:flex}.color-preview[data-v-5c208d1a]{width:36px;height:36px;box-shadow:var(--shadow-sm);border-radius:8px;flex-shrink:0}.color-input[data-v-5c208d1a]{cursor:pointer;background:0 0;border:none;border-radius:8px;width:36px;height:36px;padding:2px}.hex-input[data-v-5c208d1a]{background:var(--color-bg);border:1px solid var(--color-border);height:36px;color:var(--color-text);border-radius:8px;outline:none;flex:1;padding:0 10px;font-family:monospace;font-size:13px;transition:border-color .15s}.hex-input[data-v-5c208d1a]:focus{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb), .12)}.presets[data-v-5c208d1a]{flex-wrap:wrap;gap:6px;display:flex}.preset-dot[data-v-5c208d1a]{cursor:pointer;border:2px solid #0000;border-radius:50%;width:24px;height:24px;transition:transform .15s,border-color .15s}.preset-dot[data-v-5c208d1a]:hover{transform:scale(1.2)}.preset-dot.active[data-v-5c208d1a]{border-color:var(--color-text);transform:scale(1.1)}.mode-tabs[data-v-5c208d1a]{gap:6px;display:flex}.mode-tab[data-v-5c208d1a]{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-2);cursor:pointer;border-radius:8px;flex:1;padding:8px;font-size:13px;transition:all .15s}.mode-tab.active[data-v-5c208d1a]{background:var(--color-brand);border-color:var(--color-brand);color:#fff;box-shadow:var(--shadow-sm)}.token-list[data-v-5c208d1a]{flex-direction:column;gap:4px;max-height:280px;display:flex;overflow-y:auto}.token-item[data-v-5c208d1a]{background:var(--color-bg);border-radius:6px;padding:6px 8px;font-size:11px}.token-key[data-v-5c208d1a]{color:var(--color-text-muted);margin-bottom:2px;font-family:monospace;font-size:10px}.token-val-row[data-v-5c208d1a]{align-items:center;gap:6px;display:flex}.token-swatch[data-v-5c208d1a]{border:1px solid #00000014;border-radius:3px;flex-shrink:0;width:14px;height:14px}.token-val[data-v-5c208d1a]{color:var(--color-text);word-break:break-all;font-family:monospace;font-size:11px}.export-actions[data-v-5c208d1a]{flex-direction:column;gap:10px;display:flex}.export-btn[data-v-5c208d1a]{background:var(--color-brand);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:8px;width:100%;padding:10px;font-size:13px;font-weight:600;transition:all .15s}.export-btn[data-v-5c208d1a]:hover{background:var(--color-brand-hover);box-shadow:var(--shadow-md)}.export-btn.outline[data-v-5c208d1a]{color:var(--color-brand);border:1px solid var(--color-brand);background:0 0}.export-btn.outline[data-v-5c208d1a]:hover{background:var(--color-brand-subtle);box-shadow:none}.copy-tip[data-v-5c208d1a]{color:var(--color-success);text-align:center;margin-top:8px;font-size:12px}.preview-area[data-v-5c208d1a]{flex:1;overflow-y:auto}.preview-scroll[data-v-5c208d1a]{flex-direction:column;gap:40px;max-width:900px;padding:32px;display:flex}.section-title[data-v-5c208d1a]{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--color-border);margin-bottom:16px;padding-bottom:8px;font-size:13px;font-weight:600}.color-swatches[data-v-5c208d1a]{flex-wrap:wrap;gap:12px;display:flex}.swatch-item[data-v-5c208d1a]{flex-direction:column;gap:4px;width:80px;display:flex}.swatch-block[data-v-5c208d1a]{height:56px;box-shadow:var(--shadow-sm);border-radius:10px}.swatch-name[data-v-5c208d1a]{color:var(--color-text-2);font-size:11px;font-weight:600}.swatch-var[data-v-5c208d1a]{color:var(--color-text-muted);font-family:monospace;font-size:10px;line-height:1.3}.preview-card[data-v-5c208d1a]{background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-radius:14px;flex-direction:column;gap:16px;padding:24px;display:flex}.text-primary[data-v-5c208d1a]{color:var(--color-text);font-size:15px;font-weight:500}.text-secondary[data-v-5c208d1a]{color:var(--color-text-2);font-size:14px}.text-muted[data-v-5c208d1a]{color:var(--color-text-muted);font-size:13px}.text-brand[data-v-5c208d1a]{color:var(--color-text-brand);font-size:13px;font-weight:600}.btn-row[data-v-5c208d1a]{flex-wrap:wrap;gap:10px;display:flex}.btn[data-v-5c208d1a]{cursor:pointer;border:none;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;transition:all .15s}.btn-primary[data-v-5c208d1a]{background:var(--color-brand);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary[data-v-5c208d1a]:hover{background:var(--color-brand-hover);box-shadow:var(--shadow-md)}.btn-secondary[data-v-5c208d1a]{background:var(--color-brand-subtle);color:var(--color-brand);border:1px solid var(--color-border)}.btn-secondary[data-v-5c208d1a]:hover{border-color:var(--color-brand)}.btn-ghost[data-v-5c208d1a]{color:var(--color-text-2);border:1px solid var(--color-border);background:0 0}.btn-ghost[data-v-5c208d1a]:hover{background:var(--color-surface-2)}.btn-danger[data-v-5c208d1a]{background:var(--color-error-subtle);color:var(--color-error);border:1px solid #0000}.btn-danger[data-v-5c208d1a]:hover{border-color:var(--color-error)}.btn-full[data-v-5c208d1a]{width:100%}.input-demo[data-v-5c208d1a]{flex-direction:column;gap:6px;display:flex}.form-label[data-v-5c208d1a]{color:var(--color-text-2);font-size:12px;font-weight:600}.form-input[data-v-5c208d1a]{background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);border-radius:8px;outline:none;padding:10px 14px;font-family:inherit;font-size:14px;transition:all .15s}.form-input[data-v-5c208d1a]::placeholder{color:var(--color-text-muted)}.form-input[data-v-5c208d1a]:focus,.form-input.focused[data-v-5c208d1a]{border-color:var(--color-brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb), .12)}.form-input.error[data-v-5c208d1a]{border-color:var(--color-error);box-shadow:0 0 0 3px rgba(var(--brand-rgb), .06);background:var(--color-error-subtle)}.input-hint[data-v-5c208d1a]{font-size:12px}.error-hint[data-v-5c208d1a]{color:var(--color-error)}.cards-grid[data-v-5c208d1a]{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.demo-card[data-v-5c208d1a]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;flex-direction:column;gap:6px;padding:20px;transition:transform .15s;display:flex}.demo-card[data-v-5c208d1a]:hover{transform:translateY(-2px)}.shadow-sm-card[data-v-5c208d1a]{box-shadow:var(--shadow-sm)}.shadow-md-card[data-v-5c208d1a]{box-shadow:var(--shadow-md)}.shadow-lg-card[data-v-5c208d1a]{box-shadow:var(--shadow-lg)}.card-icon[data-v-5c208d1a]{margin-bottom:4px;font-size:22px}.card-title[data-v-5c208d1a]{color:var(--color-text);font-size:13px;font-weight:700}.card-desc[data-v-5c208d1a]{color:var(--color-text-muted);font-size:12px}.card-value[data-v-5c208d1a]{color:var(--color-brand);margin-top:8px;font-size:22px;font-weight:700}.semantic-grid[data-v-5c208d1a]{flex-direction:column;gap:10px;display:flex}.semantic-item[data-v-5c208d1a]{border:1px solid #0000;border-radius:10px;align-items:flex-start;gap:14px;padding:14px 16px;display:flex}.semantic-error[data-v-5c208d1a]{background:var(--color-error-subtle);border-color:var(--color-error);color:var(--color-error)}.semantic-warning[data-v-5c208d1a]{background:var(--color-warning-subtle);border-color:var(--color-warning);color:var(--color-warning)}.semantic-success[data-v-5c208d1a]{background:var(--color-success-subtle);border-color:var(--color-success);color:var(--color-success)}.semantic-icon[data-v-5c208d1a]{flex-shrink:0;margin-top:1px;font-size:16px;font-weight:700}.semantic-title[data-v-5c208d1a]{margin-bottom:2px;font-size:13px;font-weight:700}.semantic-desc[data-v-5c208d1a]{opacity:.8;color:var(--color-text-2);font-size:12px}.scene-container[data-v-5c208d1a]{grid-template-columns:1fr 1fr;gap:20px;display:grid}.login-card[data-v-5c208d1a]{background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);border-radius:16px;padding:32px 28px}.login-header[data-v-5c208d1a]{text-align:center;margin-bottom:24px}.login-avatar[data-v-5c208d1a]{color:var(--color-brand);margin-bottom:10px;font-size:32px;display:block}.login-title[data-v-5c208d1a]{color:var(--color-text);margin-bottom:4px;font-size:20px;font-weight:700}.login-sub[data-v-5c208d1a]{color:var(--color-text-muted);font-size:13px}.login-form[data-v-5c208d1a]{flex-direction:column;gap:14px;display:flex}.login-footer[data-v-5c208d1a]{color:var(--color-text-muted);text-align:center;font-size:13px}.link[data-v-5c208d1a]{color:var(--color-brand);font-weight:600;text-decoration:none}.link[data-v-5c208d1a]:hover{text-decoration:underline}.stats-card[data-v-5c208d1a]{background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-radius:16px;flex-direction:column;gap:20px;padding:24px;display:flex}.stats-header[data-v-5c208d1a]{justify-content:space-between;align-items:center;display:flex}.stats-title[data-v-5c208d1a]{color:var(--color-text);font-size:15px;font-weight:700}.stats-badge[data-v-5c208d1a]{color:var(--color-success);background:var(--color-success-subtle);border-radius:20px;padding:3px 8px;font-size:11px;font-weight:600}.stats-grid[data-v-5c208d1a]{grid-template-columns:1fr 1fr;gap:16px;display:grid}.stat-item[data-v-5c208d1a]{background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;padding:14px}.stat-val[data-v-5c208d1a]{color:var(--color-text);margin-bottom:2px;font-size:22px;font-weight:700}.stat-label[data-v-5c208d1a]{color:var(--color-text-muted);margin-bottom:4px;font-size:11px}.stat-change[data-v-5c208d1a]{font-size:12px;font-weight:600}.stat-change.up[data-v-5c208d1a]{color:var(--color-success)}.stat-change.down[data-v-5c208d1a]{color:var(--color-error)}.contrast-grid[data-v-5c208d1a]{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.contrast-item[data-v-5c208d1a]{flex-direction:column;gap:8px;display:flex}.contrast-sample[data-v-5c208d1a]{height:64px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);border-radius:10px;justify-content:center;align-items:center;font-size:28px;font-weight:700;display:flex}.contrast-label[data-v-5c208d1a]{color:var(--color-text-2);font-size:11px;font-weight:600}.contrast-ratio[data-v-5c208d1a]{font-family:monospace;font-size:12px}.contrast-ratio.pass[data-v-5c208d1a]{color:var(--color-success)}.contrast-ratio.fail[data-v-5c208d1a]{color:var(--color-error)}