:root{--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono',monospace;--radius:12px;--transition:0.25s ease}
[data-theme="dark"]{--bg:#0A1A0F;--bg2:#0F2416;--bg-card:rgba(15,36,22,0.85);--bg-input:rgba(30,60,40,0.5);--border:rgba(85,239,196,0.1);--text:#E8F5E9;--text2:#81C784;--text3:#4CAF50;--primary:#00B894;--secondary:#55EFC4;--accent:#E17055;--gradient:linear-gradient(135deg,#00B894,#55EFC4)}
[data-theme="light"]{--bg:#F1F8E9;--bg2:#FFFFFF;--bg-card:rgba(255,255,255,0.95);--bg-input:rgba(200,230,201,0.5);--border:rgba(0,0,0,0.08);--text:#1B5E20;--text2:#2E7D32;--text3:#66BB6A;--primary:#00897B;--secondary:#26A69A;--accent:#D84315;--gradient:linear-gradient(135deg,#00897B,#26A69A)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh}
.app{display:flex;flex-direction:column;min-height:100vh;max-width:800px;margin:0 auto}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:10px}
.logo h1{font-size:1.05rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:.82rem;font-weight:500;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 2px 8px rgba(0,184,148,.2)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,184,148,.35)}
.btn-ghost{background:transparent;color:var(--text2)}.btn-ghost:hover{color:var(--text);background:var(--bg-input)}
.main{flex:1;padding:24px;display:flex;flex-direction:column;gap:24px}
.section-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin-bottom:8px}
.input-row{display:flex;gap:8px}
.input-row input{flex:1;padding:10px 14px;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;outline:none}
.input-row input:focus{border-color:var(--primary)}
.note{font-size:.75rem;color:var(--text3);margin-top:8px}
.score-section{display:flex;justify-content:center}
.score-card{display:flex;align-items:center;gap:24px;padding:24px 32px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.score-ring{position:relative;width:90px;height:90px;flex-shrink:0}
.score-ring svg{width:100%;height:100%}
.score-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;font-family:var(--font-mono);color:var(--primary)}
.score-info h2{font-size:.95rem;font-weight:600;margin-bottom:4px}
.score-info p{font-size:.82rem;color:var(--text2);max-width:350px}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;animation:fadeIn .3s ease}
.cat-card h3{font-size:.85rem;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.cat-count{font-size:.72rem;padding:2px 8px;border-radius:10px;font-weight:600}
.cat-necessary{background:rgba(0,184,148,.1);color:var(--primary)}
.cat-analytics{background:rgba(85,239,196,.1);color:var(--secondary)}
.cat-marketing{background:rgba(225,112,85,.1);color:var(--accent)}
.cat-unknown{background:rgba(255,255,255,.06);color:var(--text3)}
.cookie-item{font-size:.75rem;font-family:var(--font-mono);color:var(--text2);padding:4px 0;border-bottom:1px solid var(--border)}
.cookie-item:last-child{border-bottom:none}
.recommendations{margin-top:16px}
.rec-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:8px}
.rec-card h4{font-size:.82rem;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.rec-card p{font-size:.78rem;color:var(--text2)}
.rec-pass{color:var(--primary)}.rec-warn{color:var(--accent)}.rec-fail{color:#FF6B6B}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.toast-container{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);font-size:.82rem;animation:toastIn .3s ease}
.toast.success{border-left:3px solid var(--primary)}.toast.info{border-left:3px solid var(--secondary)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
[data-theme="dark"] .icon-moon{display:none}[data-theme="dark"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:block}[data-theme="light"] .icon-sun{display:none}
@media(max-width:640px){.category-grid{grid-template-columns:1fr}.main{padding:16px}.score-card{flex-direction:column;text-align:center}}