:root{--bg-primary: #0a0810;--bg-secondary: #0e0c18;--bg-tertiary: #14101f;--bg-card: rgba(14, 12, 24, .58);--text-primary: #f5f3fa;--text-secondary: #d4c6e3;--text-muted: #a89cc4;--text-light: #7a6d8a;--accent-primary: #8b5cf6;--accent-secondary: #a78bfa;--accent-tertiary: #c4b5fd;--accent-light: #ddd6fe;--success: #10b981;--error: #ef4444;--warning: #f59e0b;--border-default: rgba(139, 92, 246, .12);--border-light: rgba(139, 92, 246, .06);--border-focus: #8b5cf6;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;--space-xs: .24rem;--space-sm: .51rem;--space-md: 1.02rem;--space-lg: 1.48rem;--space-xl: 2.03rem;--radius-sm: 5px;--radius-md: 7px;--radius-lg: 11px;--radius-xl: 15px;--shadow-sm: 0 2px 7px rgba(139, 92, 246, .1);--shadow-md: 0 4px 15px rgba(139, 92, 246, .15);--shadow-lg: 0 11px 31px rgba(139, 92, 246, .2);--shadow-xl: 0 19px 47px rgba(139, 92, 246, .25);--transition-fast: .16s ease;--transition-base: .21s cubic-bezier(.33, 1.55, .63, .98);--transition-smooth: .29s cubic-bezier(.32, 1.54, .67, 1.01);font-family:var(--font-sans);font-size:14px;line-height:1.58;color:var(--text-primary);background:linear-gradient(127deg,#0a0810,#0e0c18,#140d22)}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-height:100vh;background:var(--bg-primary)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg-primary);overflow-x:hidden}#root{min-height:100vh;width:100%}*{transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}input,select,button,textarea{font-family:inherit;font-size:14px;transition:all var(--transition-smooth)}input,select,textarea{background:#ffffff0a;border:1px solid var(--border-default);border-radius:var(--radius-md);padding:10px 12px;color:var(--text-primary)}input::placeholder,textarea::placeholder{color:var(--text-light)}input:focus,select:focus,button:focus,textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 20px #6366f133;background:#6366f10d}button{cursor:pointer;border:none;border-radius:var(--radius-md);font-weight:500;padding:10px 16px;background:#6366f11a;border:1px solid rgba(99,102,241,.2);color:var(--accent-light)}button:hover{background:#6366f126;border-color:#6366f14d}button:active{transform:scale(.96)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#6366f133;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6366f14d}::selection{background:#6366f140;color:var(--accent-light)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.loading{background:linear-gradient(90deg,#ffffff0d,#ffffff26,#ffffff0d);background-size:1000px 100%;animation:shimmer 2s infinite;border-radius:var(--radius-md)}*{transition:color .19s ease,background .23s ease}@keyframes violet-glow{0%,to{box-shadow:0 0 19px #8b5cf61f}50%{box-shadow:0 0 31px #8b5cf638}}@keyframes ambient-glow{0%,to{opacity:.05}50%{opacity:.11}}.board-preview-glow{animation:ambient-glow 3.2s ease-in-out infinite}.comp-card{transform-origin:center;transition:all .25s cubic-bezier(.33,1.52,.64,1.01);border:1px solid rgba(139,92,246,.1)}.comp-card:hover{transform:translateY(-3px) scale(1.008);box-shadow:0 11px 29px #8b5cf626;border-color:#8b5cf640}.comp-card:active{transform:translateY(-1px) scale(.985)}input,select,textarea{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .27s cubic-bezier(.32,1.58,.67,.98);border-color:#8b5cf626!important}input:focus,select:focus,textarea:focus{border-color:#8b5cf6!important;box-shadow:0 0 17px #8b5cf640!important;background:#8b5cf60d}button{position:relative;overflow:hidden;transition:all .31s cubic-bezier(.34,1.53,.61,.99);color:#c4b5fd;border-color:#8b5cf633}button:hover{border-color:#8b5cf659;background:#8b5cf61f}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:radial-gradient(circle,rgba(139,92,246,.1),transparent);transition:left .38s ease}button:hover:before{left:100%}button:active{transform:scale(.97)}.yaml-line{position:relative;transition:all .18s ease;border-left:2px solid transparent}.yaml-line:hover{background:#8b5cf614;border-left-color:#8b5cf6;padding-left:5px}.category-tab{position:relative;transition:all .29s cubic-bezier(.33,1.51,.66,1);color:#a8a0c4}.category-tab:hover{color:#c4b5fd}.category-tab:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#8b5cf6,#c4b5fd);transition:width .32s ease}.category-tab:hover:after{width:100%}.toast{position:fixed;bottom:22px;right:19px;padding:13px 23px;border-radius:9px;background:#8b5cf626;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border:1px solid rgba(139,92,246,.3);color:#c4b5fd;font-size:12px;z-index:1000;animation:toast-slide .42s cubic-bezier(.34,1.54,.63,1);box-shadow:0 9px 38px #8b5cf626}@keyframes toast-slide{0%{transform:translate(410px) scale(.79);opacity:0}to{transform:translate(0) scale(1);opacity:1}}.resizable-divider{background:linear-gradient(180deg,#8b5cf61a,#8b5cf633,#8b5cf61a);cursor:col-resize;-webkit-user-select:none;user-select:none;transition:all .2s}.resizable-divider:hover{background:linear-gradient(180deg,#8b5cf633,#8b5cf666,#8b5cf633)}.code-panel::-webkit-scrollbar{width:4px}.code-panel::-webkit-scrollbar-thumb{background:#6366f166;border-radius:2px}.spinner{width:20px;height:20px;border:2px solid rgba(99,102,241,.2);border-top-color:var(--accent-purple);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}.empty-state-icon{font-size:48px;opacity:.5;margin-bottom:16px}@media (max-width: 1200px){.three-col-layout{grid-template-columns:300px 1fr 350px}}@media (max-width: 1024px){.three-col-layout{grid-template-columns:280px 1fr}.yaml-panel{display:none}}@media (max-width: 768px){.three-col-layout{grid-template-columns:1fr}.sidebar{max-height:50vh;overflow-y:auto}}