:root{color-scheme:dark light;--bg-main: #0B0F19;--bg-card: rgba(17, 24, 39, .65);--bg-card-hover: rgba(31, 41, 55, .75);--bg-modal: #0F172A;--bg-header: rgba(11, 15, 25, .82);--bg-code: #090D16;--bg-input: rgba(15, 23, 42, .6);--border-glass: rgba(255, 255, 255, .08);--border-hover: rgba(99, 102, 241, .35);--border-focus: rgba(99, 102, 241, .6);--primary: #6366F1;--primary-hover: #4F46E5;--primary-light: rgba(99, 102, 241, .15);--accent-cyan: #06B6D4;--accent-pink: #EC4899;--success: #10B981;--danger: #EF4444;--text-main: #F8FAFC;--text-muted: #94A3B8;--text-sub: #64748B;--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 8px 24px -4px rgba(0, 0, 0, .35);--shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, .5);--shadow-glow: 0 0 24px rgba(99, 102, 241, .25);--ease-spring: cubic-bezier(.16, 1, .3, 1);--bg-gradient: radial-gradient(at 10% 10%, rgba(99, 102, 241, .12) 0px, transparent 45%), radial-gradient(at 90% 90%, rgba(236, 72, 153, .08) 0px, transparent 45%), radial-gradient(at 50% 50%, rgba(6, 182, 212, .06) 0px, transparent 50%)}[data-theme=light]{--bg-main: #F1F5F9;--bg-card: rgba(255, 255, 255, .85);--bg-card-hover: rgba(255, 255, 255, .98);--bg-modal: #FFFFFF;--bg-header: rgba(248, 250, 252, .85);--bg-code: #0F172A;--bg-input: #FFFFFF;--border-glass: rgba(15, 23, 42, .08);--border-hover: rgba(99, 102, 241, .3);--border-focus: rgba(79, 70, 229, .5);--primary: #4F46E5;--primary-hover: #4338CA;--primary-light: rgba(79, 70, 229, .08);--accent-cyan: #0891B2;--accent-pink: #DB2777;--text-main: #0F172A;--text-muted: #475569;--text-sub: #94A3B8;--shadow-sm: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .02);--shadow-md: 0 4px 16px -2px rgba(15, 23, 42, .06), 0 2px 4px -1px rgba(15, 23, 42, .03);--shadow-lg: 0 20px 30px -10px rgba(15, 23, 42, .08), 0 8px 10px -6px rgba(15, 23, 42, .04);--shadow-glow: 0 0 20px rgba(79, 70, 229, .12);--bg-gradient: radial-gradient(at 0% 0%, rgba(99, 102, 241, .05) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(236, 72, 153, .03) 0px, transparent 50%), radial-gradient(at 50% 30%, rgba(6, 182, 212, .03) 0px, transparent 50%)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;min-height:100vh;overflow-x:hidden;background-image:var(--bg-gradient);background-attachment:fixed;transition:background-color .3s var(--ease-spring),color .3s var(--ease-spring)}.glass-panel{background:var(--bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:background-color .25s var(--ease-spring),border-color .25s var(--ease-spring),box-shadow .25s var(--ease-spring)}.glass-panel:hover{border-color:var(--border-hover)}.glass-glow{box-shadow:var(--shadow-glow),var(--shadow-md)}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:10px 20px;font-weight:600;font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s var(--ease-spring);box-shadow:0 4px 12px #4f46e54d}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #4f46e573;filter:brightness(1.05)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:10px 18px;font-weight:500;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s var(--ease-spring)}.btn-secondary:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--primary);color:var(--primary)}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.theme-toggle-btn{background:var(--bg-card);border:1px solid var(--border-glass);color:var(--text-main);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s var(--ease-spring);box-shadow:var(--shadow-sm)}.theme-toggle-btn:hover{border-color:var(--primary);transform:scale(1.05);color:var(--primary)}.input-field,.textarea-field{width:100%;background:var(--bg-input);border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-main);padding:10px 14px;font-size:.9rem;outline:none;transition:border-color .2s var(--ease-spring),box-shadow .2s var(--ease-spring),background-color .2s var(--ease-spring)}.input-field:focus,.textarea-field:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-light)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172a99;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s var(--ease-spring)}.modal-content{background:var(--bg-modal);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:540px;padding:28px;animation:slideUp .25s var(--ease-spring)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.code-box{background:var(--bg-code);border-radius:var(--radius-sm);border:1px solid var(--border-glass);padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.85rem;color:#a5b4fc}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-sub);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}