/* Premium WordPress-like flashy design */
[data-theme=dark] body:before,body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 20%,#7ea5ff22,transparent 60%),radial-gradient(circle at 85% 70%,#ff7eb322,transparent 55%);}/* glows */
:root{--bg:#f5f7fb;--bg-alt:#ffffffd9;--bg-glass:rgba(255,255,255,.75);--border:#dbe2ec;--text:#1d2433;--text-soft:#556176;--accent:#2541b2;--accent-grad:linear-gradient(90deg,#2541b2,#4f7bff);--radius:16px;--shadow:0 4px 18px -4px rgba(20,40,90,.08),0 10px 32px -8px rgba(20,40,90,.08);--trans:.25s cubic-bezier(.4,.2,.2,1);--grad-hero:linear-gradient(115deg,#2541b2 0%,#3d64e2 40%,#7aa7ff 100%)}
[data-theme=dark]{--bg:#0f1622;--bg-alt:#1c2735cc;--bg-glass:rgba(30,41,55,.65);--border:#2f3d52;--text:#f5f7fa;--text-soft:#93a2b6;--accent:#5f86ff;--accent-grad:linear-gradient(90deg,#5f86ff,#8fa8ff);--shadow:0 4px 20px -4px rgba(0,0,0,.45),0 10px 38px -10px rgba(0,0,0,.55)}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.55;background:radial-gradient(circle at 25% 20%,#e5ecf7,#cfd9e9 60%,#b9c7dc) fixed;background-color:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden}
[data-theme=dark] body{background:radial-gradient(circle at 30% 25%,#0f1724,#132237 55%,#101b2a) fixed}
a{color:var(--accent);text-decoration:none;transition:color var(--trans)}a:hover{text-decoration:underline}
header.topbar{background:var(--bg-glass);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
header .inner{max-width:1180px;margin:0 auto;padding:.75rem clamp(.9rem,3vw,1.6rem);display:flex;align-items:center;gap:1.2rem}
.logo{display:flex;align-items:center;gap:.65rem;font-weight:600;font-size:1.05rem;letter-spacing:.5px;color:var(--text)}
.logo-mark{background:var(--accent-grad);color:#fff;padding:.55rem .65rem;border-radius:12px;font-size:.7rem;font-weight:700;letter-spacing:1px;box-shadow:0 4px 10px -2px rgba(37,65,178,.4)}
.logo-text{background:linear-gradient(90deg,var(--text),var(--text-soft));background-clip:text;-webkit-background-clip:text;color:transparent}
.nav-links{margin-left:auto;display:flex;gap:.9rem;align-items:center;font-size:.85rem}
.nav-links a{padding:.45rem .75rem;border-radius:8px;font-weight:500;color:var(--text-soft);background:transparent;border:1px solid transparent;transition:var(--trans)}
.nav-links a:hover{color:var(--text);background:var(--bg-alt);border-color:var(--border)}
.btn-small{background:var(--accent-grad);color:#fff !important;box-shadow:0 4px 14px -4px rgba(37,65,178,.5);border:1px solid #2343a0}
.btn-small:hover{filter:brightness(1.07)}
.user-chip{background:var(--bg-alt);padding:.4rem .7rem;border-radius:999px;font-size:.7rem;color:var(--text-soft);border:1px solid var(--border)}
.theme-toggle{background:var(--bg-alt);border:1px solid var(--border);color:var(--text-soft);padding:.4rem .6rem;border-radius:10px;cursor:pointer;font-size:.85rem;transition:var(--trans)}
.theme-toggle:hover{color:var(--text)}
.content{max-width:1180px;margin:0 auto;padding:1.4rem clamp(1rem,4vw,2rem) 4rem}
/* Hero */
.hero{position:relative;min-height:430px;display:flex;align-items:flex-end;overflow:hidden;margin:-1.4rem -2rem 2.2rem;padding:0 2rem}
.hero-inner{display:flex;justify-content:space-between;align-items:stretch;gap:3rem;max-width:1180px;width:100%;margin:0 auto;padding:3.2rem 0 2.4rem}
.hero-copy{max-width:640px;z-index:2}
.hero-copy h1{margin:0 0 1.3rem;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-1px;color:#fff;text-wrap:balance}
.grad{background:linear-gradient(90deg,#ffec9e,#ffd26e,#ff9d6c);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 4px 16px rgba(0,0,0,.25))}
.hero-copy .tagline{font-size:1.05rem;color:#f0f4ff;max-width:520px;margin:0 0 1.8rem;line-height:1.45}
.cta{display:inline-flex;align-items:center;gap:.55rem;background:linear-gradient(90deg,#ff8a3d,#ff5d7d 50%,#8855ff);color:#fff !important;padding:.95rem 1.55rem;border-radius:14px;font-weight:600;letter-spacing:.5px;box-shadow:0 10px 28px -8px rgba(255,90,80,.55);text-decoration:none;position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 55%,transparent 70%);opacity:0;transition:opacity .6s}
.cta:hover:before{opacity:1}
.cta.tiny{padding:.55rem .9rem;font-size:.75rem;box-shadow:none}
.hero-art{flex:1;position:relative}
.blob{position:absolute;top:15%;left:25%;width:280px;height:280px;background:conic-gradient(from 45deg,#4f7bff,#6da1ff,#4f7bff);filter:blur(40px) saturate(160%);animation:spin 22s linear infinite;border-radius:50%}
.blob.delay{top:auto;bottom:10%;left:55%;width:340px;height:340px;animation:spin 28s linear reverse infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero:after{content:"";position:absolute;inset:0;background:var(--grad-hero);mix-blend-mode:multiply;opacity:.85}
.hero-fade{position:absolute;inset:0;background:radial-gradient(circle at 40% 40%,#ffffff11,#000 120%);pointer-events:none}
.list-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 1rem;gap:1rem}
.list-header h2{margin:0;font-size:1.4rem}
.list-tools{display:flex;align-items:center;gap:1rem}
.list-tools input{padding:.65rem .9rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-alt);font:inherit;min-width:240px}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:.6rem}
.card{background:var(--bg-glass);border:1px solid var(--border);border-radius:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .6s cubic-bezier(.18,.8,.25,1),box-shadow var(--trans),border-color var(--trans);isolation:isolate}
.card.has-cover{padding:0}
.card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.card .cover-wrap{position:relative;aspect-ratio:16/9;overflow:hidden}
.card .cover-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.2s cubic-bezier(.2,.7,.3,1)}
.card .cover-wrap .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,25,.85),rgba(15,20,30,.35));opacity:.55;transition:opacity var(--trans)}
.card .cover-wrap .badge{position:absolute;top:.7rem;left:.7rem;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);font-size:.6rem;font-weight:600;letter-spacing:.8px;text-transform:uppercase;padding:.35rem .55rem;border-radius:8px;color:#fff}
.card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--accent);box-shadow:0 16px 40px -10px rgba(37,65,178,.45)}
.card:hover .cover-wrap img{scale:1.06}
.card:hover .cover-wrap .overlay{opacity:.75}
.card-body{padding:1rem 1.05rem 1.25rem;display:flex;flex-direction:column;flex:1}
.card-body h3{margin:.25rem 0 .65rem;font-size:1.15rem;line-height:1.22;letter-spacing:-.3px}
.meta-row{display:flex;gap:.8rem;font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;color:var(--text-soft);font-weight:600;margin:-.15rem 0 .55rem}
.excerpt{font-size:.8rem;line-height:1.45;color:var(--text-soft);margin:0 0 .9rem;flex:1}
.rating-row{display:flex;align-items:center;gap:.35rem;font-size:.65rem}
.stars{display:inline-flex;gap:2px}
.star{color:#b0bccf;filter:drop-shadow(0 0 1px rgba(0,0,0,.2));font-size:.9rem;transition:color var(--trans)}
.star.full{color:#ffb347}
.avg{font-size:.65rem;color:var(--text-soft);font-weight:600}
/* Forms */
.flash,.error{padding:.85rem 1rem;border-radius:14px;font-size:.75rem;font-weight:500;margin:0 0 1.2rem;line-height:1.3;backdrop-filter:blur(10px)}
.flash{background:#d1fae5;border:1px solid #10b981;color:#065f46}.error{background:#fee2e2;border:1px solid #f87171;color:#7f1d1d}
form.form,form.form-modern{display:flex;flex-direction:column;gap:1.1rem;max-width:820px;margin-top:.5rem}
form.form-modern label{display:flex;flex-direction:column;gap:.45rem;font-size:.78rem;font-weight:600;color:var(--text-soft);letter-spacing:.5px}
form.form-modern input,form.form-modern textarea,form.form input,form.form textarea{padding:.8rem .9rem;border:1px solid var(--border);border-radius:14px;font:inherit;background:var(--bg-alt);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);resize:vertical;min-height:52px}
form.form-modern textarea{min-height:220px}
form.form-modern input:focus,form.form-modern textarea:focus{outline:2px solid #2541b233;outline-offset:2px}
form.form-modern button,form.form button,.form-actions button{background:var(--accent-grad);color:#fff;border:none;padding:.85rem 1.4rem;border-radius:14px;font-weight:600;cursor:pointer;letter-spacing:.4px;box-shadow:0 6px 18px -6px rgba(37,65,178,.55);transition:var(--trans)}
form.form-modern button:hover{filter:brightness(1.07)}
.form-actions{display:flex;gap:.8rem;align-items:center}
.btn-muted{background:var(--bg-alt);color:var(--text-soft);padding:.8rem 1.2rem;border-radius:14px;border:1px solid var(--border);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:var(--trans)}
.btn-muted:hover{color:var(--text);border-color:var(--accent)}
/* Article hero & layout */
.article-hero{position:relative;min-height:340px;display:flex;align-items:flex-end;margin:-1.4rem -2rem 2rem;padding:0 2rem}
.article-hero.has-cover .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.8) saturate(120%) contrast(105%);transform:scale(1.05);}
.article-hero .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,12,18,.9),rgba(16,24,36,.55));backdrop-filter:blur(3px)}
.article-hero .hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:2.8rem 0 2.4rem;width:100%}
.article-hero .hero-meta{display:flex;gap:1rem;font-size:.62rem;letter-spacing:.6px;text-transform:uppercase;color:#d1d9e8;font-weight:600;margin:0 0 1rem;flex-wrap:wrap}
.article-hero h1{margin:0 0 1.1rem;font-size:clamp(2.1rem,4.5vw,3.1rem);letter-spacing:-1px;line-height:1.05;color:#fff;max-width:900px}
.article-hero .hero-rating{display:flex;align-items:center;gap:.5rem}
.article-hero .hero-rating .avg{color:#fff;font-weight:600;letter-spacing:.5px}
.article-layout{display:grid;grid-template-columns:260px 1fr;gap:2.4rem;max-width:1180px;margin:0 auto;padding:0 0 3.2rem}
.aside{position:relative;display:flex;flex-direction:column;gap:1.2rem}
.aside-box{background:var(--bg-glass);border:1px solid var(--border);padding:1rem 1rem 1.15rem;border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.aside-box h4{margin:.1rem 0 .8rem;font-size:.7rem;letter-spacing:.8px;text-transform:uppercase;color:var(--text-soft)}
.aside-box ul.mini{margin:0;padding:0;list-style:none;font-size:.78rem;display:flex;flex-direction:column;gap:.45rem}
.aside-box ul.mini li{color:var(--text-soft)}
.aside-box .share{display:flex;flex-direction:column;gap:.4rem}
.aside-box .share a{font-size:.78rem;color:var(--accent);text-decoration:none}
.aside-box .share a:hover{text-decoration:underline}
.aside-box .full{display:block;margin-top:.9rem;text-align:center}
.article.rich .body{white-space:pre-wrap;line-height:1.7;font-size:1.04rem;margin:0 0 2.4rem}
.article.rich .body p{margin:0 0 1.3rem}
.article.rich .interact{margin:2.2rem 0 0;padding-top:1.6rem;border-top:1px solid var(--border)}
/* Rating */
.rate-form{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.rate-form.fancy button{background:linear-gradient(145deg,#1f2d40,#22354c);color:#ffb347;border:1px solid #2d476b;padding:.55rem .75rem;font-weight:600;letter-spacing:.3px;box-shadow:0 4px 18px -6px rgba(0,0,0,.5)}
.rate-form.fancy button:hover{background:var(--accent-grad);color:#fff;border-color:var(--accent)}
.rate-form button{background:var(--bg-alt);color:var(--text-soft);border:1px solid var(--border);padding:.45rem .65rem;margin:.25rem .3rem 0 0;border-radius:10px;cursor:pointer;font-size:.75rem;transition:var(--trans)}
.rate-form button:hover{background:var(--accent-grad);color:#fff;border-color:var(--accent)}
/* Footer */
.foot{text-align:center;font-size:.72rem;color:var(--text-soft);padding:2.6rem 1rem 3rem;margin-top:3.6rem;border-top:1px solid var(--border);backdrop-filter:blur(6px)}
/* Responsive */
@media (max-width:1100px){.article-layout{grid-template-columns:1fr;}.aside{order:2;flex-direction:row;overflow:auto;padding-bottom:.5rem}.aside-box{min-width:220px}}
@media (max-width:920px){.hero{min-height:480px;flex-direction:column;align-items:flex-end;margin:-1.4rem -1rem 2rem;padding:0 1rem}.hero-inner{flex-direction:column;gap:2.5rem;padding:3.2rem 0 2rem}.hero-copy h1{font-size:clamp(2rem,9vw,3rem)}.hero-art{display:none}.content{padding:1.1rem 1.1rem 3.2rem}.cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.list-tools input{min-width:160px}.article-hero{margin:-1.4rem -1rem 1.4rem;padding:0 1rem}.article-hero h1{font-size:clamp(1.85rem,8.5vw,2.4rem)}.article-layout{padding:0 0 2.5rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}.blob{animation:none}}