@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";
:root{--surface-0:#06080d;--surface-1:#0c1017;--surface-2:#121721;--surface-3:#1a1f2e;--surface-4:#232a3b;--accent-1:#00e5c8;--accent-2:#00c9a7;--accent-3:#0ea5e9;--accent-glow:#00e5c826;--accent-gradient:linear-gradient(135deg,#00e5c8 0%,#0ea5e9 50%,#a78bfa 100%);--accent-gradient-subtle:linear-gradient(135deg,#00e5c814 0%,#0ea5e914 100%);--positive:#34d399;--negative:#f87171;--warning:#fbbf24;--info:#60a5fa;--viral:#c084fc;--text-primary:#f0f4f8;--text-secondary:#8b95a5;--text-muted:#556275;--text-accent:#00e5c8;--glass-bg:#12172199;--glass-border:#ffffff0f;--glass-hover:#ffffff08;--glass-blur:20px;--sidebar-width:260px;--sidebar-collapsed:72px;--header-height:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--ease-out-expo:cubic-bezier(.16,1,.3,1);--transition-fast:.15s var(--ease-out-expo);--transition-normal:.25s var(--ease-out-expo);--transition-slow:.4s var(--ease-out-expo)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--surface-0);color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;overflow-x:hidden}::selection{color:#fff;background:#00e5c840}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:600;line-height:1.25}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.2rem}.mono{font-family:JetBrains Mono,monospace}.gradient-text{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.app-layout{min-height:100vh;display:flex}.main-content{margin-left:var(--sidebar-width);padding:32px;padding-top:calc(var(--header-height) + 32px);min-height:100vh;transition:margin-left var(--transition-normal);flex:1;position:relative}.main-content.collapsed{margin-left:var(--sidebar-collapsed)}.bg-mesh{z-index:-1;background:var(--surface-0);position:fixed;inset:0;overflow:hidden}.bg-mesh:before{content:"";background:radial-gradient(at 20%,#00e5c80a 0%,#0000 50%),radial-gradient(at 80% 20%,#0ea5e908 0%,#0000 50%),radial-gradient(at 40% 80%,#a78bfa08 0%,#0000 50%);width:200%;height:200%;animation:30s ease-in-out infinite alternate meshDrift;position:absolute;top:-50%;left:-50%}@keyframes meshDrift{0%{transform:translate(0)rotate(0)}33%{transform:translate(2%,-3%)rotate(1deg)}66%{transform:translate(-1%,2%)rotate(-.5deg)}to{transform:translate(1%,-1%)rotate(.5deg)}}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);padding:24px;position:relative;overflow:hidden}.glass-card:before{content:"";background:linear-gradient(90deg,#0000,#ffffff14,#0000);height:1px;position:absolute;top:0;left:0;right:0}.glass-card:hover{border-color:#00e5c826;transform:translateY(-1px);box-shadow:0 0 0 1px #00e5c80d,0 8px 32px #0000004d}.glass-card.no-hover:hover{border-color:var(--glass-border);box-shadow:none;transform:none}.kpi-card{composes:glass-card;flex-direction:column;gap:12px;min-height:140px;display:flex}.kpi-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:500}.kpi-value{letter-spacing:-.03em;font-family:JetBrains Mono,monospace;font-size:2.2rem;font-weight:700;line-height:1}.kpi-change{border-radius:6px;align-items:center;gap:4px;padding:3px 8px;font-family:JetBrains Mono,monospace;font-size:.82rem;font-weight:500;display:inline-flex}.kpi-change.positive{color:var(--positive);background:#34d3991a}.kpi-change.negative{color:var(--negative);background:#f871711a}.kpi-sparkline{opacity:.7;height:40px;margin-top:auto}.sidebar{width:var(--sidebar-width);-webkit-backdrop-filter:blur(24px);border-right:1px solid var(--glass-border);z-index:100;transition:width var(--transition-normal);background:#0a0d14d9;flex-direction:column;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar-logo{height:var(--header-height);border-bottom:1px solid var(--glass-border);cursor:pointer;transition:background var(--transition-fast);flex-shrink:0;align-items:center;gap:12px;padding:20px;display:flex}.sidebar-logo:hover{background:var(--glass-hover)}.sidebar-logo-icon{background:var(--accent-gradient);width:32px;height:32px;box-shadow:0 0 20px var(--accent-glow);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-logo-text{white-space:nowrap;transition:opacity var(--transition-fast);font-size:1.05rem;font-weight:700;overflow:hidden}.sidebar.collapsed .sidebar-logo-text{opacity:0}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px;display:flex;overflow-y:auto}.sidebar-section-label{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);white-space:nowrap;padding:16px 12px 6px;font-size:.65rem;font-weight:600;overflow:hidden}.sidebar.collapsed .sidebar-section-label{opacity:0;height:0;padding:0;overflow:hidden}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);white-space:nowrap;align-items:center;gap:12px;padding:10px 12px;font-size:.88rem;font-weight:500;text-decoration:none;display:flex;position:relative}.nav-item:hover{background:var(--glass-hover);color:var(--text-primary)}.nav-item.active{background:var(--accent-gradient-subtle);color:var(--text-accent)}.nav-item.active:before{content:"";background:var(--accent-gradient);border-radius:0 2px 2px 0;width:3px;height:20px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.nav-item-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.nav-item-label{transition:opacity var(--transition-fast);overflow:hidden}.sidebar.collapsed .nav-item-label{opacity:0;width:0}.nav-badge{color:var(--accent-1);white-space:nowrap;background:#00e5c826;border-radius:10px;margin-left:auto;padding:2px 7px;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:600}.sidebar.collapsed .nav-badge{display:none}.sidebar-footer{border-top:1px solid var(--glass-border);flex-shrink:0;padding:16px}.sidebar-toggle{border-radius:var(--radius-sm);width:100%;color:var(--text-muted);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;gap:8px;padding:8px;font-size:.82rem;display:flex}.sidebar-toggle:hover{background:var(--glass-hover);color:var(--text-secondary)}.top-header{top:0;left:var(--sidebar-width);height:var(--header-height);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--glass-border);z-index:90;transition:left var(--transition-normal);background:#06080db3;justify-content:space-between;align-items:center;padding:0 32px;display:flex;position:fixed;right:0}.top-header.collapsed{left:var(--sidebar-collapsed)}.header-title{font-size:1.1rem;font-weight:600}.header-right{align-items:center;gap:16px;display:flex}.header-status{color:var(--text-secondary);align-items:center;gap:8px;font-size:.82rem;display:flex}.status-dot{background:var(--positive);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #34d39966}50%{opacity:.7;box-shadow:0 0 0 6px #34d39900}}.header-btn{border:1px solid var(--glass-border);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);background:0 0;justify-content:center;align-items:center;display:flex}.header-btn:hover{background:var(--glass-hover);color:var(--text-primary);border-color:#ffffff1a}.page-header{margin-bottom:28px}.page-title{margin-bottom:4px;font-size:1.6rem;font-weight:700}.page-subtitle{color:var(--text-secondary);font-size:.92rem}.section-title{align-items:center;gap:8px;margin-bottom:16px;font-size:1rem;font-weight:600;display:flex}.section-title .icon{color:var(--accent-1)}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px;display:grid}.chart-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:28px;display:grid}.chart-grid-3{grid-template-columns:2fr 1fr;gap:16px;margin-bottom:28px;display:grid}.chart-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:24px;position:relative;overflow:hidden}.chart-card:before{content:"";background:linear-gradient(90deg,#0000,#ffffff0f,#0000);height:1px;position:absolute;top:0;left:0;right:0}.chart-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.chart-title{color:var(--text-primary);font-size:.92rem;font-weight:600}.chart-subtitle{color:var(--text-muted);margin-top:2px;font-size:.78rem}.trend-list{flex-direction:column;gap:4px;display:flex}.trend-item{border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);align-items:center;gap:12px;padding:12px 16px;display:flex}.trend-item:hover{background:var(--glass-hover)}.trend-rank{color:var(--text-muted);text-align:center;width:20px;font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:600}.trend-keyword{flex:1;font-size:.9rem;font-weight:500}.trend-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:12px;padding:3px 10px;font-size:.72rem;font-weight:600}.trend-badge.emerging{color:var(--positive);background:#34d3991f}.trend-badge.viral{color:var(--viral);background:#c084fc1f}.trend-badge.declining{color:var(--negative);background:#f871711f}.trend-badge.stable{color:var(--info);background:#60a5fa1f}.trend-momentum{text-align:right;min-width:60px;font-family:JetBrains Mono,monospace;font-size:.82rem;font-weight:600}.rec-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;display:grid}.rec-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg);cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);flex-direction:column;gap:16px;padding:24px;display:flex;position:relative;overflow:hidden}.rec-card:before{content:"";background:var(--accent-gradient);opacity:0;height:2px;transition:opacity var(--transition-fast);position:absolute;top:0;left:0;right:0}.rec-card:hover:before{opacity:1}.rec-card:hover{border-color:#00e5c826;transform:translateY(-2px);box-shadow:0 8px 32px #0000004d}.rec-format{border:1px solid var(--glass-border);text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);border-radius:6px;align-items:center;gap:4px;width:fit-content;padding:4px 10px;font-size:.72rem;font-weight:600;display:inline-flex}.rec-title{font-size:1.05rem;font-weight:600;line-height:1.4}.rec-angle{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.rec-scores{gap:12px;margin-top:auto;display:flex}.score-pill{border-radius:8px;align-items:center;gap:6px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.78rem;font-weight:500;display:flex}.score-pill.seo{color:var(--positive);background:#34d3991a}.score-pill.geo{color:var(--info);background:#60a5fa1a}.score-pill.confidence{color:var(--warning);background:#fbbf241a}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:none;align-items:center;gap:8px;padding:10px 20px;font-size:.88rem;font-weight:500;text-decoration:none;display:inline-flex}.btn-primary{background:var(--accent-gradient);color:#06080d;font-weight:600}.btn-primary:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}.btn-ghost{border:1px solid var(--glass-border);color:var(--text-secondary);background:0 0}.btn-ghost:hover{color:var(--text-primary);background:var(--glass-hover);border-color:#ffffff26}.tag{color:var(--text-secondary);background:#ffffff0a;border:1px solid #ffffff0f;border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:.75rem;font-weight:500;display:inline-flex}.tag-platform{border:none}.tag-platform.reddit{color:#ff6b35;background:#ff45001f}.tag-platform.twitter{color:#1da1f2;background:#1da1f21f}.tag-platform.youtube{color:#f44;background:#ff00001a}.sentiment-bar{border-radius:3px;gap:2px;height:6px;display:flex;overflow:hidden}.sentiment-bar .seg-positive{background:var(--positive);border-radius:3px}.sentiment-bar .seg-neutral{background:var(--text-muted);border-radius:3px}.sentiment-bar .seg-negative{background:var(--negative);border-radius:3px}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 24px;display:flex}.empty-state-icon{border-radius:var(--radius-lg);background:var(--accent-gradient-subtle);width:64px;height:64px;color:var(--accent-1);justify-content:center;align-items:center;margin-bottom:20px;display:flex}.empty-state-title{margin-bottom:8px;font-size:1.1rem;font-weight:600}.empty-state-desc{color:var(--text-secondary);max-width:400px;margin-bottom:20px;font-size:.9rem}.skeleton{background:linear-gradient(90deg,var(--surface-3)25%,var(--surface-4)50%,var(--surface-3)75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media (max-width:1200px){.chart-grid,.chart-grid-3{grid-template-columns:1fr}}@media (max-width:768px){.main-content{padding:16px;padding-top:calc(var(--header-height) + 16px);margin-left:0}.sidebar{transform:translate(-100%)}.top-header{left:0}.kpi-grid{grid-template-columns:repeat(2,1fr)}.rec-grid{grid-template-columns:1fr}}