*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0D1B2A;--surface: #1A2B3C;--surface-raised: #213345;--divider: #2A3B4C;--ink: #E8EDF2;--charcoal: #C8D5E0;--slate: #A8B8C8;--slate-light: #8899AA;--teal: #00D4B8;--teal-dim: #00B89E;--teal-pale: #B2EDE6;--amber: #F6A623;--red: #E53E3E;--rose: #E84C6A;--violet: #7B61FF;--sidebar-bg: #0A1628;--success: #22C55E;--success-bg: rgba(34,197,94,.12);--warning: #F59E0B;--warning-bg: rgba(245,158,11,.12);--error: #EF4444;--error-bg: rgba(239,68,68,.12);--info: #2563EB;--info-bg: rgba(37,99,235,.12);--purple: #7C3AED;--purple-bg: rgba(124,58,237,.12);--text-on-primary: #0D1B2A;--red-bg: #2d1a1a;--card-shadow: 0 4px 24px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.15);--card-border: 1px solid rgba(255,255,255,.05);--font-body: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--radius: 8px;--radius-lg: 12px;--sidebar-w: 240px}[data-theme=light]{--bg: #F8FAFC;--surface: #FFFFFF;--surface-raised: #F1F5F9;--divider: #E2E8F0;--ink: #0F172A;--charcoal: #334155;--slate: #64748B;--slate-light: #94A3B8;--teal: #0D9488;--teal-dim: #0F766E;--teal-pale: #CCFBF1;--amber: #D97706;--red: #DC2626;--rose: #E11D48;--violet: #6D28D9;--sidebar-bg: #FFFFFF;--success: #16A34A;--success-bg: rgba(22,163,74,.08);--warning: #D97706;--warning-bg: rgba(217,119,6,.08);--error: #DC2626;--error-bg: rgba(220,38,38,.08);--info: #2563EB;--info-bg: rgba(37,99,235,.08);--purple: #7C3AED;--purple-bg: rgba(124,58,237,.08);--text-on-primary: #FFFFFF;--red-bg: #FEF2F2;--card-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);--card-border: 1px solid #E2E8F0}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);min-height:100vh;font-size:.875rem;line-height:1.6}::selection{background:#00d4b84d;color:var(--ink)}*:focus-visible{outline:2px solid var(--teal);outline-offset:2px}a{color:var(--teal)}.layout{display:flex;min-height:100vh}.main{margin-left:var(--sidebar-w);flex:1;padding:var(--space-8);min-height:100vh;background:var(--bg)}.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:100;border-right:1px solid var(--divider)}.sidebar-logo{padding:var(--space-5) var(--space-4) var(--space-4);border-bottom:1px solid var(--divider)}.sidebar-logo h1{font-size:.9375rem;font-weight:700;color:var(--ink);letter-spacing:.05em}.sidebar-logo span{color:var(--teal)}.sidebar-logo p{font-size:.6875rem;color:var(--slate);margin-top:2px}.sidebar-section{padding:var(--space-4) var(--space-2) var(--space-2)}.sidebar-section-label{font-size:.625rem;font-weight:700;color:var(--slate);letter-spacing:.12em;padding:0 var(--space-2);margin-bottom:var(--space-1);text-transform:uppercase}.sidebar-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 10px;border-radius:var(--radius);color:var(--slate);text-decoration:none;font-size:.8125rem;font-weight:500;transition:all .15s;cursor:pointer;border:none;background:none;width:100%;text-align:left}.sidebar-link:hover{background:var(--divider);color:var(--ink)}.sidebar-link.active{background:var(--divider);color:var(--teal)}.sidebar-link svg{flex-shrink:0;opacity:.7}.sidebar-link.active svg{opacity:1}.sidebar-skill-tag{font-family:var(--font-mono);font-size:.625rem;font-weight:500;margin-left:auto;color:var(--slate-light)}.sidebar-footer{margin-top:auto;padding:var(--space-3) var(--space-2);border-top:1px solid var(--divider)}.card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 2px 8px #0003;padding:var(--space-5);color:var(--ink);border:1px solid var(--divider)}.card-sm{padding:14px var(--space-4)}.skill-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 2px 8px #0003;padding:var(--space-4) 18px;cursor:pointer;text-decoration:none;color:var(--ink);transition:all .18s;display:block;border:1px solid var(--divider);position:relative;overflow:hidden}.skill-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%}.skill-card:hover{box-shadow:0 6px 20px #0000004d;transform:translateY(-1px);border-color:var(--slate-light)}.skill-card-tag{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;margin-bottom:6px}.skill-card-name{font-size:.875rem;font-weight:700;margin-bottom:var(--space-1);color:var(--ink)}.skill-card-framework{font-size:.6875rem;color:var(--slate);margin-bottom:var(--space-2)}.skill-card-time{font-size:.6875rem;font-weight:700;padding:2px var(--space-2);border-radius:99px;display:inline-block}.skill-card-cat{font-size:.625rem;font-weight:700;letter-spacing:.1em;color:var(--slate);text-transform:uppercase;margin-bottom:var(--space-2)}.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px var(--space-5);border-radius:var(--radius);font-size:.875rem;font-weight:600;min-height:44px;cursor:pointer;border:none;transition:all .15s;text-decoration:none;font-family:var(--font-body)}.btn-primary{background:var(--teal);color:var(--bg)}.btn-primary:hover{background:var(--teal-dim)}.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--divider)}.btn-secondary:hover{background:var(--surface-raised);border-color:var(--slate-light)}.btn-ghost{background:transparent;color:var(--slate)}.btn-ghost:hover{background:var(--surface);color:var(--ink)}.btn-danger{background:#e53e3e1f;color:var(--red);border:1px solid rgba(229,62,62,.3)}.btn-danger:hover{background:#e53e3e33}.btn-sm{padding:6px 12px;font-size:.75rem;min-height:32px}.btn-lg{padding:14px 28px;font-size:1rem;min-height:52px}.btn:disabled,.btn-primary:disabled,.btn-secondary:disabled{opacity:.45;cursor:not-allowed}.input,.textarea,.select{width:100%;padding:9px var(--space-3);border:1.5px solid var(--divider);border-radius:var(--radius);font-size:.8125rem;font-family:var(--font-body);background:var(--surface);color:var(--ink);transition:border-color .15s}.input:focus,.textarea:focus,.select:focus{border-color:var(--teal);outline:none}.textarea{resize:vertical;min-height:140px;line-height:1.6}.input-mono{font-family:var(--font-mono);font-size:.75rem}.input::placeholder,.textarea::placeholder{color:var(--slate-light)}.select option{background:var(--surface);color:var(--ink)}.label{display:block;font-size:.75rem;font-weight:600;color:var(--slate);margin-bottom:6px}.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:.6875rem;font-weight:600;border:1px solid var(--divider);color:var(--slate);background:transparent;cursor:default;white-space:nowrap}.pill-teal{border-color:var(--teal);color:var(--teal);background:#00d4b814}.pill-amber{border-color:var(--amber);color:var(--amber);background:#f6a62314}.pill-red{border-color:var(--red);color:var(--red);background:#e53e3e14}.pill-purple{border-color:var(--purple);color:var(--purple);background:var(--purple-bg)}.pill-clickable{cursor:pointer;transition:all .15s;border:1px solid var(--divider)}.pill-clickable:hover{background:#00d4b826;border-color:var(--teal);color:var(--teal)}.pill-active{background:var(--teal);color:var(--bg);border-color:var(--teal)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:.6875rem;font-weight:600}.badge-teal{background:#00d4b81f;color:var(--teal)}.badge-slate{background:var(--surface-raised);color:var(--slate)}.markdown-output{line-height:1.75;color:var(--ink);font-size:.875rem}.markdown-output h1{font-size:1.375rem;font-weight:700;margin:var(--space-6) 0 var(--space-3);color:var(--ink)}.markdown-output h2{font-size:1.0625rem;font-weight:700;margin:var(--space-5) 0 10px;padding-bottom:6px;border-bottom:1.5px solid var(--divider);color:var(--ink)}.markdown-output h3{font-size:.875rem;font-weight:600;margin:var(--space-4) 0 var(--space-2);color:var(--charcoal)}.markdown-output p{margin-bottom:var(--space-3)}.markdown-output ul,.markdown-output ol{padding-left:var(--space-5);margin-bottom:var(--space-3)}.markdown-output li{margin-bottom:var(--space-1)}.markdown-output strong{font-weight:700;color:var(--ink)}.markdown-output code{font-family:var(--font-mono);font-size:.75rem;background:var(--surface-raised);padding:2px 5px;border-radius:4px;color:var(--teal)}.markdown-output pre{background:var(--sidebar-bg);color:var(--teal-pale);padding:14px;border-radius:var(--radius);overflow-x:auto;margin-bottom:14px;font-size:.75rem;border:1px solid var(--divider)}.markdown-output pre code{background:none;padding:0;color:inherit}.markdown-output blockquote{border-left:3px solid var(--teal);padding-left:14px;color:var(--slate);margin-bottom:var(--space-3);font-style:italic}.markdown-output table{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:.8125rem}.markdown-output th{background:var(--sidebar-bg);color:var(--teal);padding:var(--space-2) var(--space-3);text-align:left;font-size:.6875rem;letter-spacing:.05em;border-bottom:1px solid var(--divider)}.markdown-output td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--divider);color:var(--charcoal)}.markdown-output tr:hover td{background:var(--surface-raised)}.markdown-output input[type=checkbox]{margin-right:6px;accent-color:var(--teal)}.markdown-output hr{border:none;border-top:1px solid var(--divider);margin:var(--space-5) 0}.markdown-output a{color:var(--teal)}.prompt-block{background:var(--sidebar-bg);border-radius:var(--radius);overflow:hidden;border:1px solid var(--divider)}.prompt-block-header{background:var(--teal);padding:6px var(--space-3);font-family:var(--font-mono);font-size:.6875rem;font-weight:700;color:var(--bg);display:flex;align-items:center;justify-content:space-between}.prompt-block textarea{width:100%;background:transparent;border:none;color:var(--teal-pale);font-family:var(--font-mono);font-size:.75rem;padding:14px;line-height:1.7;resize:vertical;min-height:280px}.prompt-block textarea:focus{outline:none}.streaming-dot{display:inline-block;width:8px;height:8px;background:var(--teal);border-radius:50%;animation:pulse 1s ease-in-out infinite;margin-left:6px;vertical-align:middle}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.toast{position:fixed;bottom:var(--space-6);right:var(--space-6);background:var(--surface);color:var(--ink);padding:var(--space-3) 18px;border-radius:var(--radius);font-size:.8125rem;font-weight:500;box-shadow:0 4px 16px #0006;border:1px solid var(--divider);z-index:999;animation:slideUp .2s ease}@keyframes slideUp{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.empty-state{text-align:center;padding:60px var(--space-5);color:var(--slate)}.empty-state h3{font-size:1rem;font-weight:600;margin-bottom:var(--space-2);color:var(--charcoal)}.empty-state p{font-size:.8125rem;color:var(--slate);line-height:1.6}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}.page-header{margin-bottom:28px}.page-header h2{font-size:1.375rem;font-weight:700;color:var(--ink);margin-bottom:var(--space-1)}.page-header p{color:var(--slate);font-size:.875rem}.tabs{display:flex;gap:var(--space-1);border-bottom:2px solid var(--divider);margin-bottom:var(--space-5)}.tab{padding:var(--space-2) var(--space-4);font-size:.8125rem;font-weight:600;cursor:pointer;border:none;background:none;color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;font-family:var(--font-body)}.tab.active{color:var(--teal);border-bottom-color:var(--teal)}.tab:hover:not(.active){color:var(--ink)}.file-drop{border:2px dashed var(--divider);border-radius:var(--radius);padding:var(--space-5);text-align:center;cursor:pointer;transition:all .15s;color:var(--slate);background:transparent}.file-drop:hover,.file-drop.dragging{border-color:var(--teal);color:var(--teal);background:#00d4b80d}.file-drop input{display:none}.api-key-banner{background:#f6a62314;border:1.5px solid var(--amber);border-radius:var(--radius);padding:var(--space-3) var(--space-4);display:flex;align-items:center;gap:10px;margin-bottom:var(--space-5);font-size:.8125rem;color:var(--amber)}.export-dropdown{position:relative;display:inline-block}.export-dropdown-menu{position:absolute;top:100%;right:0;margin-top:var(--space-1);background:var(--surface);border:1px solid var(--divider);border-radius:var(--radius);box-shadow:0 8px 24px #0006;z-index:200;min-width:180px;overflow:hidden}.export-dropdown-item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:.8125rem;font-weight:500;color:var(--ink);background:none;border:none;cursor:pointer;transition:background .1s;font-family:var(--font-body);text-align:left}.export-dropdown-item:hover{background:var(--surface-raised)}.export-dropdown-item+.export-dropdown-item{border-top:1px solid var(--divider)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--divider);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--slate-light)}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:48px;background:var(--sidebar-bg);border-bottom:1px solid var(--divider);z-index:101;align-items:center;justify-content:space-between;padding:0 var(--space-3)}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:99}@media (max-width: 1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.mobile-header{display:flex}.sidebar-overlay{display:block}.sidebar{transform:translate(-100%);transition:transform .25s ease}.sidebar.sidebar-open{transform:translate(0)}.main{margin-left:0;padding:var(--space-4);padding-top:calc(48px + var(--space-4))}.grid-2,.grid-3,.grid-4,.grid-auto{grid-template-columns:1fr}.page-header h2{font-size:1.125rem}.page-header p{font-size:.8125rem}.main>div>div[style*="display: flex"][style*="gap: 24px"],.main>div>div[style*="display: flex"][style*="gap: 20px"]{flex-direction:column!important}}@media (max-width: 480px){.main{padding:var(--space-3);padding-top:calc(48px + var(--space-3))}.card{padding:var(--space-3)}.btn-lg{padding:9px 16px;font-size:.8125rem}}