/* Qriton Causal Intelligence Platform - Enhanced CSS v3.0.0 */
*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#006086;--primary-dark:#00425c;--primary-light:#0080b3;--accent:#667eea;--success:#00c896;--warning:#ff9500;--danger:#ff3b30;--text:#1a1d23;--text-secondary:#6b7280;--text-light:#9ca3af;--background:#fff;--surface:#f9fafb;--surface-2:#f3f4f6;--border:#e5e7eb;--border-light:#f1f3f5;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Helvetica Neue',sans-serif;--font-mono:'SF Mono','Monaco','Inconsolata','Fira Code',monospace;--space-xs:0.5rem;--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-xxl:4rem;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--spring:cubic-bezier(0.175,0.885,0.32,1.275)}
html{font-size:16px;-webkit-text-size-adjust:100%;height:100%}
body{font-family:var(--font-sans);color:var(--text);background:var(--background);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh}
#app{min-height:100vh;display:flex;position:relative;transition:background-color 0.6s var(--ease-in-out)}
#app.analyzing{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%)}
#app.has-result{background:var(--surface)}
#app.result-expanded{background:var(--background)}
#app.authenticated{background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 100%)}

/* Container */
.qriton-container{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(to bottom,var(--background) 0%,rgba(255,255,255,0.98) 50%,rgba(249,250,251,0.95) 100%)}

/* Animated Background */
.animated-bg{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;opacity:0;transition:opacity 1s var(--ease-in-out);z-index:0}
.animated-bg.active{opacity:1}
.gradient-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.2;animation:float 20s infinite;will-change:transform}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,var(--primary-light) 0%,transparent 60%);top:-300px;left:-300px;animation-delay:0s}
.orb-2{width:400px;height:400px;background:radial-gradient(circle,var(--accent) 0%,transparent 60%);bottom:-200px;right:-200px;animation-delay:7s}
.orb-3{width:350px;height:350px;background:radial-gradient(circle,var(--success) 0%,transparent 60%);top:60%;left:50%;transform:translate(-50%,-50%);animation-delay:14s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(0.9)}}

/* Enhanced Header with User Section */
.qriton-header{padding:var(--space-lg) var(--space-md);text-align:center;transition:all 0.4s var(--ease-out);position:relative;z-index:10;background:linear-gradient(to bottom,var(--background) 0%,transparent 100%)}
.qriton-header.compact{padding:var(--space-md)}
.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}
.brand-mark{display:flex;align-items:center;gap:var(--space-sm)}
.brand-title{font-size:2.5rem;font-weight:200;letter-spacing:-0.02em;margin:0}
.brand-title .dot{color:var(--primary);font-weight:600}
.brand-tagline{color:var(--text-secondary);font-size:1.1rem;opacity:0;animation:fadeInUp 0.6s var(--ease-out) 0.3s forwards}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* User Section */
.user-section{display:flex;align-items:center;gap:var(--space-md)}
.login-btn{background:var(--primary);color:white;border:none;padding:10px 24px;border-radius:24px;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.3s var(--ease-out)}
.login-btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.user-menu{display:flex;align-items:center;gap:var(--space-md)}
.dashboard-btn{background:linear-gradient(135deg,var(--accent) 0%,var(--primary) 100%);color:white;border:none;padding:10px 20px;border-radius:20px;font-size:0.875rem;cursor:pointer;transition:all 0.3s var(--ease-out)}
.dashboard-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.user-info{display:flex;align-items:center;gap:var(--space-sm);background:var(--surface);padding:8px 16px;border-radius:20px}
.username{font-weight:500;color:var(--text)}
.logout-btn{background:transparent;border:1px solid var(--border);padding:6px 12px;border-radius:12px;font-size:0.75rem;color:var(--text-secondary);cursor:pointer;transition:all 0.2s var(--ease-out)}
.logout-btn:hover{border-color:var(--danger);color:var(--danger)}

/* Quick Stats */
.quick-stats{display:flex;justify-content:center;gap:var(--space-lg);margin:var(--space-md) 0;opacity:0;animation:fadeIn 0.6s var(--ease-out) 0.4s forwards}
.quick-stats .stat{font-size:0.875rem;color:var(--text-secondary);padding:4px 12px;background:var(--surface);border-radius:16px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Content Area */
.content-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 var(--space-md) var(--space-xl);position:relative;z-index:10;background:radial-gradient(ellipse at center 70%,transparent 0%,rgba(0,96,134,0.02) 100%)}

/* Input Section */
.input-section{width:100%;max-width:720px;transition:all 0.4s var(--ease-out);position:relative;animation:emergeFromBottom 0.8s var(--ease-out) backwards}
@keyframes emergeFromBottom{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.input-section::before{content:'';position:absolute;top:-50px;left:-50px;right:-50px;bottom:-30px;background:radial-gradient(ellipse at center bottom,rgba(0,96,134,0.08) 0%,rgba(0,96,134,0.03) 40%,transparent 70%);pointer-events:none;z-index:-1}
.input-section.minimal{max-width:680px;margin-bottom:var(--space-lg)}
.input-section.minimal::before{opacity:0.5}

/* Input Container */
.input-container{background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 100%);border-radius:24px;box-shadow:0 -5px 20px -5px rgba(0,96,134,0.1),0 10px 25px -5px rgba(0,0,0,0.1),0 20px 40px -10px rgba(0,96,134,0.05);padding:var(--space-lg);transition:all 0.3s var(--ease-out);position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.input-section.minimal .input-container{padding:var(--space-md);box-shadow:0 -2px 10px -5px rgba(0,96,134,0.08),0 5px 15px -5px rgba(0,0,0,0.08)}
.input-container:focus-within{box-shadow:0 -8px 25px -5px rgba(0,96,134,0.15),0 15px 35px -5px rgba(0,0,0,0.12),0 25px 50px -10px rgba(0,96,134,0.08);transform:translateY(-4px)}

/* Statement Input */
.statement-input{width:100%;border:none;background:transparent;font-size:1.125rem;font-family:inherit;resize:none;outline:none;color:var(--text);min-height:60px;transition:all 0.3s var(--ease-out);padding:10px;background:linear-gradient(to bottom,transparent 0%,rgba(0,96,134,0.01) 100%)}
.input-section.minimal .statement-input{font-size:1rem;min-height:40px}
.statement-input::placeholder{color:var(--text-light);transition:color 0.3s var(--ease-out)}
.statement-input:focus::placeholder{color:var(--text-secondary)}

/* Input Meta */
.input-meta{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid rgba(0,96,134,0.05);background:linear-gradient(to top,rgba(0,96,134,0.01) 0%,transparent 100%)}
.char-count{font-size:0.875rem;color:var(--text-light);font-variant-numeric:tabular-nums}
.analyze-btn{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:white;border:none;padding:12px 32px;border-radius:24px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.3s var(--ease-out);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 4px 15px -3px rgba(0,96,134,0.4)}
.analyze-btn:hover:not(:disabled){transform:scale(1.05) translateY(-2px);box-shadow:0 8px 20px rgba(0,96,134,0.4),0 -2px 10px rgba(0,96,134,0.1);background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%)}
.analyze-btn:active{transform:scale(0.98) translateY(1px);box-shadow:0 2px 8px -2px rgba(0,96,134,0.3)}
.analyze-btn:disabled{opacity:0.5;cursor:not-allowed}
.analyze-btn.pulse{animation:btnPulse 2s var(--ease-in-out) infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,96,134,0.4)}50%{box-shadow:0 0 0 12px rgba(0,96,134,0)}}
.loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Quick Examples */
.quick-examples{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-lg);flex-wrap:wrap;justify-content:center;opacity:0.9;animation:fadeInUp 0.6s var(--ease-out) 0.4s backwards}
.examples-label{color:var(--text-secondary);font-size:0.875rem}
.example-pill{background:transparent;border:1px solid var(--border);padding:8px 16px;border-radius:20px;font-size:0.875rem;color:var(--text-secondary);cursor:pointer;transition:all 0.2s var(--ease-out)}
.example-pill:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* Analysis Progress */
.analysis-progress{text-align:center;padding:var(--space-xl) var(--space-md);animation:fadeIn 0.4s var(--ease-out)}
.progress-status{font-size:1.125rem;color:var(--text-secondary);margin-bottom:var(--space-lg)}
.analysis-steps{display:flex;flex-direction:column;gap:var(--space-sm);text-align:left;max-width:300px;margin:0 auto}
.step-item{display:flex;align-items:center;gap:var(--space-sm);color:var(--text-light);transition:all 0.3s var(--ease-out)}
.step-item.active{color:var(--primary);transform:translateX(4px)}
.step-item.complete{color:var(--success)}
.step-icon{font-size:0.875rem;width:20px;text-align:center}
.step-label{font-size:0.875rem}

/* Shared Loading */
.shared-loading{text-align:center;padding:var(--space-xl)}
.loading-spinner-large{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;margin:0 auto var(--space-md);animation:spin 0.8s linear infinite}

/* Result Container */
.result-container{width:100%;max-width:1000px;animation:resultFadeIn 0.6s var(--ease-out)}
@keyframes resultFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Result Cards */
.result-card{background:white;border-radius:32px;padding:var(--space-xl);margin-bottom:var(--space-lg);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(20px) scale(0.95);transition:all 0.6s var(--ease-out)}
.result-card.revealed{opacity:1;transform:translateY(0) scale(1)}
.card-label{font-size:0.875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-light);margin-bottom:var(--space-sm)}

/* Statement Card */
.statement-card{text-align:center}
.analyzed-text{font-size:1.25rem;line-height:1.8;color:var(--text-secondary);font-style:italic;margin:0;margin-top:-10px;padding-left:20px}

/* Score Card */
.score-card{background:linear-gradient(135deg,white 0%,var(--surface) 100%);text-align:center;position:relative;overflow:hidden;padding:var(--space-xxl) var(--space-xl);transition:all 0.3s var(--ease-out)}
.score-card.clickable{cursor:pointer;animation:makeClickable 0.3s var(--ease-out)}
@keyframes makeClickable{0%{transform:scale(1);box-shadow:var(--shadow-lg)}50%{transform:scale(1.01);box-shadow:var(--shadow-xl),0 0 20px 0 rgba(0,96,134,0.1)}100%{transform:scale(1);box-shadow:var(--shadow-lg)}}
.score-card.clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.score-card.clickable:active{transform:translateY(0)}
.score-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--primary-light) 0%,transparent 40%);opacity:0.05}

/* Credibility Meter */
.credibility-meter{position:relative;margin:0 auto var(--space-lg);display:flex;flex-direction:column;align-items:center;width:100%}
.credibility-meter::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:320px;height:320px;background:radial-gradient(circle,rgba(0,96,134,0.02) 0%,transparent 50%);border-radius:50%;z-index:0}
.meter-svg{width:100%;max-width:400px;height:auto;margin-bottom:-10px;position:relative;z-index:1;filter:drop-shadow(0 4px 20px rgba(0,0,0,0.08))}
.meter-fill{transition:stroke-dasharray 1.5s var(--ease-out);filter:drop-shadow(0 0 12px rgba(0,96,134,0.4));animation:meterPulse 3s ease-in-out infinite}
@keyframes meterPulse{0%,100%{filter:drop-shadow(0 0 12px rgba(0,96,134,0.4));opacity:1}50%{filter:drop-shadow(0 0 20px rgba(0,96,134,0.6));opacity:0.95}}
.meter-indicator{transition:all 1.5s var(--ease-out);filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));animation:indicatorGlow 2s ease-in-out infinite}
@keyframes indicatorGlow{0%,100%{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3)) drop-shadow(0 0 12px rgba(0,96,134,0.5))}50%{filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3)) drop-shadow(0 0 20px rgba(0,96,134,0.8))}}

/* Score Display */
.score-display{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;z-index:2;padding:var(--space-sm) var(--space-lg) var(--space-md);background:radial-gradient(ellipse at center,rgba(255,255,255,0.9) 0%,transparent 60%);border-radius:20px;margin-top:-120px}
.score-value{font-size:5rem;font-weight:200;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;animation:scoreReveal 1.5s var(--ease-out);margin:0;letter-spacing:-0.02em}
@keyframes scoreReveal{0%{opacity:0;transform:scale(0.5) translateY(20px);filter:blur(10px)}80%{opacity:1;transform:scale(1.05) translateY(0);filter:blur(0)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
.percent-sign{font-size:3rem;opacity:0.7}
.score-label{font-size:2.5rem;font-weight:600;margin:0;text-transform:uppercase;letter-spacing:0.1em;transition:color 0.3s var(--ease-out);animation:labelSlide 0.8s var(--ease-out) 0.8s backwards}
@keyframes labelSlide{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.truth-meter-label{font-size:0.875rem;color:var(--text-light);margin:var(--space-xs) 0 0;text-transform:uppercase;letter-spacing:0.2em;opacity:0;animation:fadeInUp 0.6s var(--ease-out) 1.8s forwards;font-weight:500}

/* Bias Indicator */
.bias-indicator{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--surface);border-radius:16px;display:flex;align-items:center;gap:var(--space-sm);justify-content:center}
.bias-label{font-size:0.875rem;color:var(--text-secondary)}
.bias-score{font-weight:600;padding:4px 12px;border-radius:12px}
.bias-score.good{background:rgba(0,200,150,0.1);color:var(--success)}
.bias-score.medium{background:rgba(255,149,0,0.1);color:var(--warning)}
.bias-score.poor{background:rgba(255,59,48,0.1);color:var(--danger)}

/* Click Hint */
.click-hint{position:absolute;bottom:var(--space-lg);left:50%;transform:translateX(-50%);opacity:0;animation:fadeInUp 0.6s var(--ease-out) 2s forwards;z-index:3}
.hint-text{font-size:0.75rem;color:var(--text-light);background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 20px;border-radius:24px;box-shadow:var(--shadow-sm),0 0 0 1px rgba(0,0,0,0.04);font-weight:500;letter-spacing:0.02em}

/* Causal Analysis Card */
.causal-card{background:linear-gradient(135deg,#f0f9ff 0%,#e6f7ff 100%);border:1px solid rgba(0,128,179,0.1)}
.causal-header,.bias-header,.community-header,.similar-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.causal-title,.bias-title,.community-title,.similar-title{display:flex;align-items:center;gap:var(--space-sm);margin:0;font-size:1.125rem;color:var(--text)}
.expand-toggle{background:var(--surface);border:none;width:32px;height:32px;border-radius:16px;font-size:1.25rem;color:var(--text-secondary);cursor:pointer;transition:all 0.3s var(--ease-out);display:flex;align-items:center;justify-content:center}
.expand-toggle:hover{background:var(--surface-2);transform:rotate(90deg)}

/* Causal Content */
.causal-content{margin-top:var(--space-lg)}
.causal-patterns{margin-bottom:var(--space-lg)}
.causal-patterns h4{font-size:0.9rem;color:var(--text-secondary);margin-bottom:var(--space-md)}
.causal-pattern{padding:var(--space-md);background:white;border-radius:16px;margin-bottom:var(--space-sm);box-shadow:var(--shadow-sm)}
.pattern-flow{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm)}
.cause{padding:8px 16px;background:var(--surface);border-radius:12px;font-size:0.875rem;color:var(--text)}
.arrow{color:var(--primary);font-weight:bold}
.effect{padding:8px 16px;background:rgba(0,200,150,0.1);border-radius:12px;font-size:0.875rem;color:var(--text)}
.pattern-confidence{font-size:0.75rem;color:var(--text-light);text-align:right}

/* Causal Predictions */
.causal-predictions h4{font-size:0.9rem;color:var(--text-secondary);margin-bottom:var(--space-md)}
.prediction{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm);background:white;border-radius:12px;margin-bottom:var(--space-xs)}
.pred-outcome{font-size:0.875rem;color:var(--text)}
.pred-probability{font-weight:600;color:var(--primary)}

/* Bias Audit Card */
.bias-card{background:linear-gradient(135deg,#fff9f0 0%,#fff5e6 100%);border:1px solid rgba(255,149,0,0.1)}
.bias-content{margin-top:var(--space-lg)}
.bias-checks{margin-bottom:var(--space-lg)}
.bias-check{display:flex;gap:var(--space-md);padding:var(--space-md);background:white;border-radius:12px;margin-bottom:var(--space-sm);transition:all 0.3s var(--ease-out)}
.bias-check:hover{transform:translateX(4px)}
.bias-check.detected{background:rgba(255,59,48,0.05);border:1px solid rgba(255,59,48,0.2)}
.check-status{font-size:1.25rem;flex-shrink:0}
.check-details strong{display:block;font-weight:600;color:var(--text);margin-bottom:0.25rem}
.check-details p{margin:0;font-size:0.875rem;color:var(--text-secondary);line-height:1.6}
.impact{display:inline-block;margin-top:4px;font-size:0.75rem;color:var(--warning);font-weight:500}

/* Bias Recommendations */
.bias-recommendations{padding:var(--space-md);background:var(--surface);border-radius:16px}
.bias-recommendations h4{font-size:0.9rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}
.bias-recommendations ul{margin:0;padding-left:var(--space-lg);color:var(--text-secondary)}
.bias-recommendations li{margin-bottom:var(--space-xs);font-size:0.875rem}

/* Community Card */
.community-card{background:linear-gradient(135deg,white 0%,var(--surface) 100%);cursor:pointer;transition:all 0.3s var(--ease-out)}
.community-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.community-content{margin-top:var(--space-lg)}
.community-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}
.stat-card{text-align:center;padding:var(--space-md);background:var(--surface);border-radius:12px;transition:all 0.3s var(--ease-out)}
.stat-card:hover{background:var(--surface-2);transform:translateY(-2px)}
.stat-value{display:block;font-size:1.5rem;font-weight:600;color:var(--primary);margin-bottom:4px}
.stat-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}

/* Trending Context */
.trending-context{margin-top:var(--space-lg)}
.trending-context h4{font-size:0.875rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}
.topic-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.topic-tag{background:var(--surface);padding:6px 12px;border-radius:20px;font-size:0.75rem;color:var(--primary);cursor:pointer;transition:all 0.2s var(--ease-out);border:1px solid transparent}
.topic-tag:hover{background:var(--primary);color:white;transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* Similar Statements Card */
.similar-card{background:white}
.similar-content{margin-top:var(--space-lg)}
.similar-item{padding:var(--space-md);background:var(--surface);border-radius:12px;margin-bottom:var(--space-sm);cursor:pointer;transition:all 0.3s var(--ease-out);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}
.similar-item:hover{background:var(--surface-2);transform:translateX(4px)}
.similar-item blockquote{margin:0;font-size:0.875rem;color:var(--text-secondary);flex:1}
.similar-score{font-weight:600;font-size:0.875rem;white-space:nowrap}

/* Analysis Details */
.analysis-details{background:white;border-radius:32px;padding:var(--space-xxl);margin-top:var(--space-lg);box-shadow:var(--shadow-xl);animation:expandIn 0.8s var(--ease-out);max-width:100%}
@keyframes expandIn{from{opacity:0;transform:translateY(20px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Detail Sections */
.detail-section{margin-bottom:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--border-light)}
.detail-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.section-title{font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:var(--space-lg)}

/* Components Grid */
.components-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg);margin-bottom:var(--space-lg)}
.component-card{background:var(--surface);border-radius:16px;padding:var(--space-md);transition:all 0.3s var(--ease-out)}
.component-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.component-card.high{background:linear-gradient(135deg,rgba(0,200,150,0.1) 0%,rgba(0,230,118,0.05) 100%);border:1px solid rgba(0,200,150,0.2)}
.component-card.medium{background:linear-gradient(135deg,rgba(255,149,0,0.1) 0%,rgba(255,183,77,0.05) 100%);border:1px solid rgba(255,149,0,0.2)}
.component-card.low{background:linear-gradient(135deg,rgba(255,59,48,0.1) 0%,rgba(255,107,107,0.05) 100%);border:1px solid rgba(255,59,48,0.2)}
.component-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md)}
.component-icon{font-size:1.5rem}
.component-header h4{font-size:0.875rem;font-weight:600;color:var(--text-secondary);margin:0}
.component-score{display:flex;align-items:center;gap:var(--space-sm)}
.score-bar-container{flex:1;height:6px;background:var(--border-light);border-radius:3px;overflow:hidden}
.score-bar-fill{height:100%;background:var(--primary);transition:width 1s var(--ease-out);border-radius:3px}
.component-card.high .score-bar-fill{background:var(--success)}
.component-card.medium .score-bar-fill{background:var(--warning)}
.component-card.low .score-bar-fill{background:var(--danger)}
.score-percentage{font-size:0.875rem;font-weight:600;color:var(--text);min-width:45px;text-align:right}

/* AI Reasoning */
.ai-reasoning{background:var(--surface);border-radius:16px;padding:var(--space-lg);border-left:4px solid var(--primary)}
.ai-reasoning p{margin:0;line-height:1.8;color:var(--text-secondary)}

/* Feedback Section */
.feedback-section{background:var(--surface);border-radius:16px;padding:var(--space-lg)}
.quick-reactions{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);padding:var(--space-md);background:white;border-radius:12px}
.reactions-label{font-size:0.875rem;color:var(--text-secondary)}
.reaction-btn
.feedback-section{background:var(--surface);border-radius:16px;padding:var(--space-lg)}
.feedback-form{display:flex;flex-direction:column;gap:var(--space-md)}
.feedback-textarea{width:100%;padding:var(--space-md);border:2px solid var(--border);border-radius:12px;font-family:inherit;font-size:1rem;resize:vertical;transition:all 0.3s var(--ease-out)}
.feedback-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,96,134,0.1)}
.feedback-btn{background:var(--primary);color:white;border:none;padding:var(--space-sm) var(--space-lg);border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.3s var(--ease-out);align-self:flex-start}
.feedback-btn:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow)}
.feedback-btn:disabled{opacity:0.5;cursor:not-allowed}
.feedback-message{padding:var(--space-sm) var(--space-md);border-radius:8px;font-size:0.875rem;text-align:center}
.feedback-message.success{background:rgba(0,200,150,0.1);color:var(--success)}
.feedback-message.error{background:rgba(255,59,48,0.1);color:var(--danger)}
.action-bar{display:flex;gap:var(--space-lg);justify-content:center;margin-top:var(--space-xl);opacity:0;transform:translateY(10px);transition:all 0.4s var(--ease-out)}
.action-bar.revealed{opacity:1;transform:translateY(0)}
.action-bar.revealed .action-btn{animation:buttonPop 0.4s var(--spring) backwards}
.action-bar.revealed .action-btn:nth-child(2){animation-delay:0.1s}
@keyframes buttonPop{from{opacity:0;transform:scale(0.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.action-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:100px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.3s var(--ease-out);border:none}
.action-btn.primary{background:var(--primary);color:white}
.action-btn.primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.action-btn.secondary{background:transparent;color:var(--text);border:2px solid var(--border)}
.action-btn.secondary:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.btn-icon{font-size:1.25rem}
.qriton-footer{padding:var(--space-md);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:10}
.footer-nav{display:flex;align-items:center;gap:var(--space-sm)}
.nav-link{background:none;border:none;color:var(--text-secondary);font-size:0.875rem;cursor:pointer;transition:color 0.2s var(--ease-out);padding:var(--space-xs) var(--space-sm)}
.nav-link:hover{color:var(--primary)}
.separator{color:var(--text-light);font-size:0.75rem}
.connection-indicator{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--text-light)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-light);transition:background-color 0.3s var(--ease-out)}
.connection-indicator.connected .status-dot{background:var(--success);animation:statusPulse 2s var(--ease-in-out) infinite}
.connection-indicator.disconnected .status-dot{background:var(--danger)}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:0.5}}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-md);overflow-y:auto}
.modal-content{background:white;border-radius:24px;padding:var(--space-xl);min-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-xl)}
.modal-close{position:absolute;top:var(--space-md);right:var(--space-md);background:var(--surface);border:none;width:40px;height:40px;border-radius:20px;font-size:1.5rem;color:var(--text-secondary);cursor:pointer;transition:all 0.2s var(--ease-out);display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--surface-2);color:var(--text);transform:scale(1.1)}
.modal-title{font-size:1.75rem;font-weight:600;margin-bottom:var(--space-lg)}
.modal-body{line-height:1.8}
.modal-body h3{font-size:1.25rem;font-weight:600;margin-top:var(--space-lg);margin-bottom:var(--space-md);color:var(--primary)}
.modal-body p{margin-bottom:var(--space-md);color:var(--text-secondary)}
.modal-body ul{margin:var(--space-sm) 0 var(--space-md) var(--space-lg);color:var(--text-secondary)}
.modal-body li{margin-bottom:var(--space-xs)}
.contact-form{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-xl)}
.form-input{padding:var(--space-md);border:2px solid var(--border);border-radius:12px;font-family:inherit;font-size:1rem;transition:all 0.3s var(--ease-out)}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,96,134,0.1)}
.submit-btn{background:var(--primary);color:white;border:none;padding:var(--space-sm) var(--space-lg);border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:all 0.3s var(--ease-out)}
.submit-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow)}
.contact-alt{text-align:center;padding-top:var(--space-lg);border-top:1px solid var(--border)}
.contact-alt a{color:var(--primary);text-decoration:none}
.disclaimer-modal{max-width:700px}
.disclaimer-content ul{line-height:1.8}
.disclaimer-highlight{background:var(--surface);border-radius:16px;padding:var(--space-lg);margin-bottom:var(--space-lg);border:2px solid var(--warning)}
.disclaimer-highlight h3{margin-top:0;color:var(--warning)}
.disclaimer-warning{color:var(--warning);font-weight:600;margin:var(--space-md) 0 var(--space-sm)}
.oracle-wisdom{text-align:center;margin:var(--space-xl) 0;padding:var(--space-lg);background:var(--surface);border-radius:16px}
.oracle-wisdom em{font-size:1.125rem;color:var(--text-secondary)}
.oracle-wisdom .signature{margin-top:var(--space-sm);font-size:0.875rem;color:var(--text-light)}
.disclaimer-footer{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--border);font-size:0.875rem;color:var(--text-secondary)}
.toast-notification{position:fixed;bottom:var(--space-lg);right:var(--space-lg);background:white;padding:var(--space-md) var(--space-lg);border-radius:12px;box-shadow:var(--shadow-lg);font-size:0.875rem;color:var(--text);opacity:0;transform:translateY(10px);transition:all 0.3s var(--ease-out);z-index:1100}
.toast-notification.show{opacity:1;transform:translateY(0)}
.toast-notification.error{background:var(--danger);color:white}
.fade-enter-active,.fade-leave-active{transition:opacity 0.3s var(--ease-out)}
.fade-enter-from,.fade-leave-to{opacity:0}
.fade-slide-enter-active,.fade-slide-leave-active{transition:all 0.3s var(--ease-out)}
.fade-slide-enter-from{opacity:0;transform:translateY(-10px)}
.fade-slide-leave-to{opacity:0;transform:translateY(10px)}
.slide-fade-enter-active,.slide-fade-leave-active{transition:all 0.6s var(--ease-out)}
.slide-fade-enter-from{opacity:0;transform:translateY(30px)}
.slide-fade-leave-to{opacity:0;transform:translateY(-20px)}
.expand-enter-active,.expand-leave-active{transition:all 0.4s var(--ease-out);max-height:500px}
.expand-enter-from,.expand-leave-to{opacity:0;max-height:0;transform:scale(0.95)}
.reveal-enter-active,.reveal-leave-active{transition:all 0.6s var(--ease-out)}
.reveal-enter-from{opacity:0;transform:translateY(30px) scale(0.9)}
.reveal-leave-to{opacity:0;transform:translateY(-30px) scale(0.9)}
.morph-enter-active,.morph-leave-active{transition:all 0.4s var(--ease-out)}
.morph-enter-from,.morph-leave-to{opacity:0;transform:scale(0.95)}
.modal-enter-active,.modal-leave-active{transition:all 0.3s var(--ease-out)}
.modal-enter-from,.modal-leave-to{opacity:0}
.modal-enter-active .modal-content,.modal-leave-active .modal-content{transition:all 0.3s var(--ease-out)}
.modal-enter-from .modal-content{transform:scale(0.9) translateY(20px)}
.modal-leave-to .modal-content{transform:scale(0.9) translateY(20px)}
@media (max-width:768px){:root{--space-xs:0.375rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-xxl:2.5rem}
.brand-title{font-size:2rem}
.content-area{padding:0 var(--space-sm) var(--space-lg);background:radial-gradient(ellipse at center 80%,transparent 0%,rgba(0,96,134,0.02) 100%)}
.input-section{max-width:100%}
.input-section::before{top:-30px;left:-30px;right:-30px;bottom:-20px}
.input-container{padding:var(--space-md);border-radius:20px;box-shadow:0 -3px 15px -5px rgba(0,96,134,0.08),0 8px 20px -5px rgba(0,0,0,0.08),0 15px 30px -10px rgba(0,96,134,0.04)}
.analyze-btn{width:180px;height:40px;font-size:1.25rem}
.quick-examples{gap:var(--space-xs)}
.example-pill{font-size:0.75rem;padding:6px 12px}
.progress-circle{width:120px;height:120px}
.progress-value{font-size:1.5rem}
.analysis-steps{max-width:100%}
.result-container{max-width:100%;padding:0 var(--space-sm)}
.result-card{padding:var(--space-md);border-radius:20px}
.analyzed-text{font-size:1.1rem}
.score-value{font-size:2.5rem}
.score-label{font-size:1.1rem}
.components-grid{grid-template-columns:1fr}
.analysis-details{padding:var(--space-lg);border-radius:20px}
.action-bar{flex-direction:column;width:100%}
.action-btn{width:100%;justify-content:center}
.qriton-footer{flex-direction:column;gap:var(--space-md);text-align:center}
.modal-content{padding:var(--space-lg);border-radius:20px}
.modal-close{width:36px;height:36px}
.toast-notification{bottom:var(--space-md);left:var(--space-md);right:var(--space-md)}
.gradient-orb{filter:blur(60px)}
.orb-1{width:300px;height:300px}
.orb-2{width:200px;height:200px}
.orb-3{width:175px;height:175px}}
@media (max-width:480px){.brand-title{font-size:1.75rem}
.brand-icon{font-size:1.5rem}
.statement-input{font-size:1rem}
.progress-circle{width:100px;height:100px}
.analyzed-text{font-size:1rem}
.score-value{font-size:3.5rem}
.score-label{font-size:1.5rem}
.meter-svg{max-width:250px;margin-bottom:-5px}
.meter-svg text{font-size:8px}
.credibility-meter::before{width:220px;height:220px}
.truth-meter-label{font-size:0.75rem}
.score-display{padding:var(--space-sm) var(--space-md)}
.gradient-orb{filter:blur(50px)}
.orb-1{width:250px;height:250px}
.orb-2{width:150px;height:150px}
.orb-3{width:125px;height:125px}}
@media (prefers-color-scheme:dark){:root{--text:#e5e7eb;--text-secondary:#9ca3af;--text-light:#6b7280;--background:#0f0f0f;--surface:#1a1a1a;--surface-2:#262626;--border:#333333;--border-light:#262626;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3);--shadow:0 4px 6px -1px rgba(0,0,0,0.3),0 2px 4px -1px rgba(0,0,0,0.2);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.3),0 4px 6px -2px rgba(0,0,0,0.2);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.3),0 10px 10px -5px rgba(0,0,0,0.2)}
.input-container{background:linear-gradient(to bottom,var(--surface) 0%,rgba(26,26,26,0.98) 100%);box-shadow:0 -5px 20px -5px rgba(0,128,179,0.15),0 10px 25px -5px rgba(0,0,0,0.3),0 20px 40px -10px rgba(0,128,179,0.1)}
.result-card{background:var(--surface)}
.score-card{background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%)}
.analysis-details{background:var(--surface)}
.modal-overlay{background:rgba(0,0,0,0.8)}
.modal-content{background:var(--surface)}
.toast-notification{background:var(--surface);border:1px solid var(--border)}
.meter-svg{filter:drop-shadow(0 4px 20px rgba(0,0,0,0.3))}
.meter-svg text{fill:var(--text-light)}
.meter-indicator{stroke:var(--primary-light)}
.content-area{background:radial-gradient(ellipse at center 70%,transparent 0%,rgba(0,128,179,0.03) 100%)}
.input-section::before{background:radial-gradient(ellipse at center bottom,rgba(0,128,179,0.12) 0%,rgba(0,128,179,0.05) 40%,transparent 70%)}
.qriton-container{background:linear-gradient(to bottom,var(--background) 0%,rgba(15,15,15,0.98) 50%,rgba(26,26,26,0.95) 100%)}}
@media print{.animated-bg,.qriton-footer,.action-bar,.expand-btn,.feedback-section{display:none!important}
.analysis-details{display:block!important;opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
button:focus-visible{outline-offset:4px}
.achievement-notification{position:fixed;top:20px;right:20px;background:white;border-radius:16px;padding:var(--space-md);box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:var(--space-md);opacity:0;transform:translateX(100%);transition:all 0.5s var(--spring);z-index:1200;max-width:320px}
.achievement-notification.show{opacity:1;transform:translateX(0)}
.achievement-icon{font-size:2rem;animation:achievementBounce 0.6s var(--spring)}
@keyframes achievementBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.achievement-content h4{margin:0 0 4px 0;font-size:0.875rem;color:var(--primary)}
.achievement-content p{margin:0;font-weight:600;color:var(--text)}
.achievement-content small{color:var(--text-secondary);font-size:0.75rem}
.trending-btn{position:absolute;bottom:var(--space-md);right:var(--space-md);background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);padding:8px 16px;border-radius:20px;color:var(--primary);font-size:0.875rem;cursor:pointer;transition:all 0.3s var(--ease-out)}
.trending-btn:hover{background:white;box-shadow:var(--shadow);transform:translateY(-1px)}
.social-proof-strip{display:flex;justify-content:center;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);animation:fadeInUp 0.6s var(--ease-out)}
.view-count{font-size:0.875rem;color:var(--text-secondary);background:var(--surface);padding:6px 12px;border-radius:12px}
.viral-badge{font-size:0.875rem;color:var(--warning);background:rgba(255,149,0,0.1);padding:6px 12px;border-radius:12px;animation:pulse 2s var(--ease-in-out) infinite}
.community-card{background:linear-gradient(135deg,white 0%,var(--surface) 100%);cursor:pointer;transition:all 0.3s var(--ease-out)}
.community-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.community-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.community-title{display:flex;align-items:center;gap:var(--space-sm);margin:0;font-size:1.125rem;color:var(--text)}
.expand-toggle{background:var(--surface);border:none;width:32px;height:32px;border-radius:16px;font-size:1.25rem;color:var(--text-secondary);cursor:pointer;transition:all 0.3s var(--ease-out);display:flex;align-items:center;justify-content:center}
.expand-toggle:hover{background:var(--surface-2);transform:rotate(90deg)}
.community-content{margin-top:var(--space-lg)}
.community-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}
.stat-card{text-align:center;padding:var(--space-md);background:var(--surface);border-radius:12px;transition:all 0.3s var(--ease-out)}
.stat-card:hover{background:var(--surface-2);transform:translateY(-2px)}
.stat-value{display:block;font-size:1.5rem;font-weight:600;color:var(--primary);margin-bottom:4px}
.stat-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em}
.trending-context{margin-top:var(--space-lg)}
.trending-context h4{font-size:0.875rem;color:var(--text-secondary);margin-bottom:var(--space-sm)}
.topic-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.topic-tag{background:var(--surface);padding:6px 12px;border-radius:20px;font-size:0.75rem;color:var(--primary);cursor:pointer;transition:all 0.2s var(--ease-out);border:1px solid transparent}
.topic-tag:hover{background:var(--primary);color:white;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.similar-card{background:white}
.similar-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.similar-title{display:flex;align-items:center;gap:var(--space-sm);margin:0;font-size:1.125rem;color:var(--text)}
.similar-content{margin-top:var(--space-lg)}
.similar-item{padding:var(--space-md);background:var(--surface);border-radius:12px;margin-bottom:var(--space-sm);cursor:pointer;transition:all 0.3s var(--ease-out);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}
.similar-item:hover{background:var(--surface-2);transform:translateX(4px)}
.similar-item blockquote{margin:0;font-size:0.875rem;color:var(--text-secondary);flex:1}
.similar-score{font-weight:600;font-size:0.875rem;white-space:nowrap}
.share-modal{max-width:500px}
.share-preview{background:var(--surface);border-radius:16px;padding:var(--space-lg);text-align:center;margin-bottom:var(--space-lg)}
.preview-score{font-size:3rem;font-weight:200;color:var(--text);margin-bottom:var(--space-xs)}
.preview-verdict{font-size:1.25rem;font-weight:600;color:var(--primary);margin-bottom:var(--space-md)}
.preview-statement{font-style:italic;color:var(--text-secondary);margin:0}
.share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-bottom:var(--space-lg)}
.share-option{background:var(--surface);border:2px solid var(--border);padding:var(--space-md);border-radius:12px;cursor:pointer;transition:all 0.3s var(--ease-out);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}
.share-option:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.share-option.twitter:hover{border-color:#1DA1F2;background:rgba(29,161,242,0.1)}
.share-option.linkedin:hover{border-color:#0077B5;background:rgba(0,119,181,0.1)}
.share-option.facebook:hover{border-color:#1877F2;background:rgba(24,119,242,0.1)}
.share-option.reddit:hover{border-color:#FF4500;background:rgba(255,69,0,0.1)}
.share-icon{font-size:1.5rem;font-weight:bold}
.share-url-section{margin-bottom:var(--space-md)}
.share-url-section label{display:block;font-size:0.875rem;color:var(--text-secondary);margin-bottom:var(--space-xs)}
.url-input-group{display:flex;gap:var(--space-xs)}
.url-input{flex:1;padding:var(--space-sm);border:2px solid var(--border);border-radius:8px;font-family:var(--font-mono);font-size:0.875rem;background:var(--surface)}
.copy-btn{background:var(--primary);color:white;border:none;padding:var(--space-sm) var(--space-md);border-radius:8px;cursor:pointer;transition:all 0.3s var(--ease-out)}
.copy-btn:hover{background:var(--primary-dark)}
.embed-section{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--border)}
.embed-textarea{width:100%;height:100px;padding:var(--space-sm);border:2px solid var(--border);border-radius:8px;font-family:var(--font-mono);font-size:0.75rem;background:var(--surface);margin:var(--space-sm) 0;resize:vertical}
.copy-embed-btn{background:var(--primary);color:white;border:none;padding:var(--space-sm) var(--space-md);border-radius:8px;cursor:pointer;transition:all 0.3s var(--ease-out)}
.quick-reactions{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);padding:var(--space-md);background:var(--surface);border-radius:12px}
.reactions-label{font-size:0.875rem;color:var(--text-secondary)}
.reaction-btn{background:white;border:2px solid var(--border);padding:8px 16px;border-radius:20px;font-size:0.875rem;cursor:pointer;transition:all 0.2s var(--ease-out)}
.reaction-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.reaction-btn.selected{background:var(--primary);color:white;border-color:var(--primary)}
.trending-modal{max-width:600px}
.trending-list{display:flex;flex-direction:column;gap:var(--space-md)}
.trending-item{display:flex;gap:var(--space-md);padding:var(--space-md);background:var(--surface);border-radius:12px;cursor:pointer;transition:all 0.3s var(--ease-out)}
.trending-item:hover{background:var(--surface-2);transform:translateX(4px)}
.trending-score{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:1.25rem;flex-shrink:0}
.trending-content{flex:1}
.trending-content blockquote{margin:0 0 var(--space-sm) 0;color:var(--text);font-size:0.9375rem}
.trending-meta{display:flex;gap:var(--space-md);font-size:0.75rem;color:var(--text-secondary)}
.no-trending{text-align:center;padding:var(--space-xl);color:var(--text-secondary)}
.shared-loading{text-align:center;padding:var(--space-xl)}
.loading-spinner-large{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;margin:0 auto var(--space-md);animation:spin 0.8s linear infinite}
@media (max-width:768px){.achievement-notification{right:var(--space-sm);left:var(--space-sm);max-width:none}
.trending-btn{position:static;margin-top:var(--space-sm)}
.community-stats{grid-template-columns:1fr}
.share-grid{grid-template-columns:repeat(2,1fr)}
.trending-item{flex-direction:column}
.trending-score{width:100%;height:48px}}
@media (prefers-color-scheme:dark){.achievement-notification{background:var(--surface);border:1px solid var(--border)}
.trending-btn{background:rgba(255,255,255,0.05);color:var(--text)}
.trending-btn:hover{background:var(--surface)}
.share-option{background:var(--surface-2)}
.url-input,.embed-textarea{background:var(--surface-2);color:var(--text)}}