:root{--navy: #0f1729;--navy-light: #1a2744;--navy-mid: #243355;--slate: #2d3a56;--teal: #2dd4a8;--teal-dim: #1a8a6e;--teal-glow: rgba(45, 212, 168, .12);--teal-glow-strong: rgba(45, 212, 168, .25);--coral: #f47960;--amber: #f4b942;--lavender: #8b7cf6;--white: #f0f2f5;--gray-100: #e2e5ea;--gray-200: #c5c9d2;--gray-300: #9ca3b0;--gray-400: #6b7280;--gray-500: #4b5563;--gray-600: #374151;--surface-base: #0c1220;--surface-card: #141e33;--surface-card-hover: #1a2744;--surface-elevated: #1e2d4a;--surface-input: #0f1a2e;--surface-input-focus: #142040;--border-subtle: rgba(255, 255, 255, .06);--border-default: rgba(255, 255, 255, .1);--border-strong: rgba(255, 255, 255, .16);--border-teal: rgba(45, 212, 168, .3);--font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-teal: 0 0 20px rgba(45, 212, 168, .15);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--surface-base);color:var(--white);line-height:1.6;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}a{color:var(--teal);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}a:hover{color:var(--white)}h1,h2,h3,h4{font-weight:600;line-height:1.25;letter-spacing:-.02em}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.15rem}h4{font-size:1rem}.text-dim{color:var(--gray-300)}.text-muted{color:var(--gray-400)}.text-teal{color:var(--teal)}.app-layout{display:flex;min-height:100vh}.app-sidebar{width:260px;background:var(--surface-card);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}.app-main{flex:1;margin-left:260px;min-height:100vh}.app-content{max-width:1100px;margin:0 auto;padding:40px 48px}.sidebar-brand{padding:24px 24px 20px;border-bottom:1px solid var(--border-subtle)}.sidebar-brand h2{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:10px}.sidebar-brand .brand-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--teal),var(--lavender));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1rem}.sidebar-brand .brand-sub{font-size:.75rem;color:var(--gray-400);font-weight:400;margin-top:2px;letter-spacing:.02em}.sidebar-nav{padding:16px 12px;flex:1;display:flex;flex-direction:column;gap:2px}.sidebar-nav-label{font-size:.68rem;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.08em;padding:16px 12px 6px}.sidebar-nav a,.sidebar-nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--gray-300);font-size:.88rem;font-weight:450;border:none;background:none;cursor:pointer;width:100%;text-align:left;font-family:var(--font-sans);transition:all var(--duration-fast) var(--ease-out)}.sidebar-nav a:hover,.sidebar-nav button:hover{background:var(--surface-card-hover);color:var(--white)}.sidebar-nav a.active{background:var(--teal-glow);color:var(--teal)}.sidebar-nav .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.sidebar-user{padding:16px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:10px}.sidebar-user-avatar{width:34px;height:34px;border-radius:50%;background:var(--navy-mid);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:var(--teal);border:1px solid var(--border-default)}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-name{font-size:.82rem;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:.7rem;color:var(--gray-400)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.88rem;font-weight:550;border:none;cursor:pointer;transition:all var(--duration-fast) var(--ease-out);white-space:nowrap}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--teal);color:var(--navy)}.btn-primary:hover:not(:disabled){background:#3de8ba;box-shadow:var(--shadow-teal)}.btn-secondary{background:var(--surface-elevated);color:var(--white);border:1px solid var(--border-default)}.btn-secondary:hover:not(:disabled){background:var(--navy-mid);border-color:var(--border-strong)}.btn-ghost{background:transparent;color:var(--gray-300)}.btn-ghost:hover:not(:disabled){background:var(--surface-card-hover);color:var(--white)}.btn-danger{background:#f479601f;color:var(--coral);border:1px solid rgba(244,121,96,.2)}.btn-danger:hover:not(:disabled){background:#f4796033}.btn-sm{padding:6px 14px;font-size:.8rem}.btn-lg{padding:14px 28px;font-size:1rem}.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--duration-normal) var(--ease-out)}.card:hover{border-color:var(--border-default)}.card-body{padding:24px}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}.form-label{font-size:.82rem;font-weight:550;color:var(--gray-200)}.form-hint{font-size:.75rem;color:var(--gray-400)}.form-input{padding:10px 14px;background:var(--surface-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--white);font-family:var(--font-sans);font-size:.9rem;transition:all var(--duration-fast) var(--ease-out);outline:none}.form-input:focus{background:var(--surface-input-focus);border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow)}.form-input::placeholder{color:var(--gray-500)}textarea.form-input{resize:vertical;min-height:80px;line-height:1.5}.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:32px;gap:24px;flex-wrap:wrap}.page-header-text h1{margin-bottom:4px}.page-header-text p{color:var(--gray-400);font-size:.92rem}.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:100px;font-size:.72rem;font-weight:600;letter-spacing:.02em}.badge-teal{background:var(--teal-glow);color:var(--teal)}.badge-amber{background:#f4b9421f;color:var(--amber)}.badge-coral{background:#f479601f;color:var(--coral)}.badge-lavender{background:#8b7cf61f;color:var(--lavender)}.empty-state{text-align:center;padding:80px 40px;border:2px dashed var(--border-default);border-radius:var(--radius-lg);margin:20px 0}.empty-state-icon{font-size:3rem;margin-bottom:16px;opacity:.6}.empty-state h3{margin-bottom:8px;color:var(--gray-200)}.empty-state p{color:var(--gray-400);font-size:.9rem;max-width:400px;margin:0 auto 24px}.activity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.activity-card{cursor:pointer}.activity-card .card-body{display:flex;flex-direction:column;gap:12px}.activity-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.activity-card-icon{width:42px;height:42px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}.activity-card-title{font-size:1rem;font-weight:600;margin-bottom:2px}.activity-card-type{font-size:.75rem;color:var(--gray-400);font-weight:500}.activity-card-desc{font-size:.84rem;color:var(--gray-300);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.activity-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border-subtle)}.activity-card-meta{font-size:.75rem;color:var(--gray-400);display:flex;align-items:center;gap:8px}.activity-card-actions{display:flex;gap:6px}.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.pattern-card{cursor:pointer;position:relative;overflow:hidden}.pattern-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-md);border:2px solid transparent;transition:border-color var(--duration-fast) var(--ease-out);pointer-events:none;z-index:1}.pattern-card:hover:before{border-color:var(--teal)}.pattern-card .card-body{display:flex;flex-direction:column;gap:12px}.pattern-card-preview{height:120px;background:var(--surface-base);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:2.5rem;opacity:.7}.pattern-card-name{font-size:.95rem;font-weight:600}.pattern-card-desc{font-size:.8rem;color:var(--gray-400);line-height:1.5}.pattern-card-complexity{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--gray-400)}.complexity-dot{width:6px;height:6px;border-radius:50%;background:var(--gray-500)}.complexity-dot.active{background:var(--teal)}.creator-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;min-height:calc(100vh - 200px)}.creator-form-panel{display:flex;flex-direction:column;gap:0;padding-bottom:40px}.creator-preview-panel{position:sticky;top:24px;height:calc(100vh - 200px);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}.creator-preview-header{padding:12px 16px;background:var(--surface-elevated);border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:550;color:var(--gray-300);flex-shrink:0}.creator-preview-body{flex:1;overflow:hidden}.creator-preview-body iframe{width:100%;height:100%;border:none;background:#f8f9fa}.creator-preview-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray-400);gap:12px;font-size:.88rem}.creator-preview-empty .preview-icon{font-size:2.5rem;opacity:.4}.embed-code-box{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface-base);border:1px solid var(--border-default);border-radius:var(--radius-sm)}.embed-code-text{flex:1;font-family:var(--font-mono);font-size:.75rem;color:var(--gray-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:all;user-select:all}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--surface-base);position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 30% 20%,rgba(45,212,168,.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(139,124,246,.04) 0%,transparent 50%);pointer-events:none}.login-card{width:100%;max-width:400px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:40px;position:relative;z-index:1;box-shadow:var(--shadow-lg)}.login-brand{text-align:center;margin-bottom:32px}.login-brand-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--teal),var(--lavender));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 16px}.login-brand h1{font-size:1.4rem;margin-bottom:4px}.login-brand p{font-size:.85rem;color:var(--gray-400)}.login-form{display:flex;flex-direction:column;gap:4px}.login-form .btn-primary{margin-top:8px;padding:12px}.login-error{padding:10px 14px;background:#f479601a;border:1px solid rgba(244,121,96,.2);border-radius:var(--radius-sm);color:var(--coral);font-size:.82rem;margin-bottom:8px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeSlideIn var(--duration-normal) var(--ease-out) both}@media (max-width: 1200px){.creator-layout{grid-template-columns:1fr}.creator-preview-panel{position:relative;top:auto;height:600px}}@media (max-width: 768px){.app-sidebar{display:none}.app-main{margin-left:0}.app-content{padding:24px 20px}.activity-grid,.pattern-grid{grid-template-columns:1fr}}