/* Dopamine Retro — 90s Web Meets Modern */
:root{--rad:18px;--t-shadow:3px 3px 0 var(--border);--t-shadow-hover:5px 5px 0 var(--border);--t-shadow-lg:6px 6px 0 var(--border);--t-hover-scale:1.03;--t-speed:.3s;--t-ease:cubic-bezier(0.34, 1.56, 0.64, 1);--t-space:1;--t-body-lh:1.65;--t-heading-weight:800;--t-heading-spacing:-.02em;--t-divider-width:2px;--t-divider-style:solid;--t-grain:''}

/* Film grain overlay */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}

/* Wobble keyframe */
@keyframes dr-wobble{0%{transform:rotate(0)}25%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}75%{transform:rotate(-.5deg)}100%{transform:rotate(0)}}
@keyframes dr-pop{0%{transform:scale(.9)}50%{transform:scale(1.06)}75%{transform:scale(.98)}100%{transform:scale(1)}}

/* ── HEADER / NAV / HAMBURGER ── */
header[role=banner]{background:var(--main);color:var(--txt-main);border-bottom:2px solid var(--border);box-shadow:0 2px 0 var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,3vw,2rem)}
h1#header-title{font-weight:800;letter-spacing:-.02em}
#main-nav{display:flex;gap:clamp(.5rem,1.5vw,1rem);align-items:center}
#main-nav a{font-weight:600;border-radius:999px;padding:4px 14px;border:2px solid transparent;color:var(--txt-main);transition:border-color var(--t-speed) var(--t-ease),background var(--t-speed) var(--t-ease),transform var(--t-speed) var(--t-ease)}
#main-nav a:hover{border-color:color-mix(in srgb,var(--txt-main) 40%,transparent);background:color-mix(in srgb,var(--txt-main) 10%,transparent);transform:scale(1.05)}
.nav-toggle{display:none;background:none;border:2px solid var(--border);border-radius:var(--rad);padding:6px 10px;font-size:1.3rem;cursor:pointer;color:var(--txt-main)}
@media(max-width:768px){
.nav-toggle{display:flex;align-items:center;justify-content:center}
#main-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--main);border:2px solid var(--border);border-top:0;border-radius:0 0 var(--rad) var(--rad);padding:1rem;gap:.5rem;box-shadow:var(--t-shadow-lg);z-index:100}
#main-nav a{color:var(--txt-main)}
header[role=banner]{position:relative;flex-wrap:wrap}
header[role=banner].nav-open #main-nav{display:flex;animation:dr-pop .35s var(--t-ease)}
}

/* ── FOOTER ── */
footer[role=contentinfo]{background:var(--main);color:var(--txt-main);border-top:2px solid var(--border);box-shadow:0 -2px 0 var(--border);padding:clamp(1rem,2vw,1.5rem) clamp(1rem,4vw,3rem);text-align:center;font-weight:600}

/* ── HERO ── */
.hero{padding-top:calc(48px*var(--t-space));padding-bottom:calc(48px*var(--t-space));color:var(--txt-main)}
.hero h2{font-weight:800;letter-spacing:-.02em;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.hero p{color:inherit;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.2)}

/* ── CARDS (all card-like elements) ── */
article.card,.adv-card,.compress-opts,.dash-card,.dash-chart-wrap,.domain-card,.em-compose,.em-detail,.em-item,.em-sig-card,.fnl-step,.nw-card,.ob-step,.post-item,.settings-group,.sh-post,.sp-card,.sp-episode,.sp-detail,.pp-card,.toc-sidebar,.toc-nav,.cm-item,.sh-feed-post,.social-card,.social-post-card,.funnel-section,.author-card,.member-card,.sub-card,.related-post,.chat-box,.summary-card{border:2px solid var(--border);background:var(--card);padding:clamp(.8rem,1.5vw,1.2rem);border-radius:var(--rad)}
.pricing-mini{background:var(--card);padding:clamp(.8rem,1.5vw,1.2rem);border:2px solid var(--border);border-radius:calc(var(--rad) + 4px)}
/* article.card uses transform+transition instead of animation to avoid replacing fadeUp */
article.card{transition:transform var(--t-speed) var(--t-ease),border-color var(--t-speed) var(--t-ease)}
article.card:hover{border-color:var(--border);transform:rotate(-1deg)}
/* Other card-like elements can safely use dr-wobble animation */
.adv-card,.em-item,.nw-card,.post-item,.sh-post,.sh-feed-post,.social-card,.social-post-card,.sp-card,.pp-card,.related-post,.pricing-mini,.member-card,.sub-card,.summary-card{transition:border-color var(--t-speed) var(--t-ease),box-shadow var(--t-speed) var(--t-ease)}
.adv-card:hover,.em-item:hover,.nw-card:hover,.post-item:hover,.sh-post:hover,.sh-feed-post:hover,.social-card:hover,.social-post-card:hover,.sp-card:hover,.pp-card:hover,.related-post:hover,.pricing-mini:hover,.member-card:hover,.sub-card:hover,.summary-card:hover{border-color:var(--border);animation:dr-wobble .4s var(--t-ease)}

/* ── BUTTONS ── */
.btn,.btn-alt{border-radius:999px;padding:calc(10px*var(--t-space)) calc(22px*var(--t-space));font-weight:700;font-size:.85rem;border:2px solid var(--border)}
.btn-alt{border-color:var(--border-subtle)}
.btn-sm{border-radius:999px;padding:calc(5px*var(--t-space)) calc(14px*var(--t-space));font-weight:600;font-size:.8rem}
.btn-sub,.btn-ot{border-radius:999px;padding:calc(8px*var(--t-space)) calc(18px*var(--t-space));font-weight:600;font-size:.85rem;border:2px solid var(--border)}
.btn-danger{border-radius:999px;border:2px solid var(--border);padding:calc(10px*var(--t-space)) calc(22px*var(--t-space));font-weight:700;font-size:.85rem}
.funnel-btn,.funnel-btn-next{border-radius:999px;border:2px solid var(--border);font-weight:700;padding:calc(10px*var(--t-space)) calc(24px*var(--t-space))}
.pp-buy-btn{border-radius:999px;border:2px solid var(--border);font-weight:700}
.cm-ai-btn{border-radius:999px;border:2px solid var(--border);font-weight:600;padding:calc(6px*var(--t-space)) calc(14px*var(--t-space))}
.btn,.btn-alt,.btn-danger,.funnel-btn,.funnel-btn-next,.pp-buy-btn,.btn-sub,.btn-ot,.cm-ai-btn{transition:transform var(--t-speed) var(--t-ease),box-shadow var(--t-speed) var(--t-ease)}
.btn:hover,.btn-alt:hover,.btn-danger:hover,.funnel-btn:hover,.funnel-btn-next:hover,.pp-buy-btn:hover,.btn-sub:hover,.btn-ot:hover,.cm-ai-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--border)}
.btn:active,.btn-alt:active,.btn-danger:active,.funnel-btn:active,.funnel-btn-next:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--border)}

/* ── INPUTS ── */
input,textarea,select{border:2px solid var(--border);border-radius:calc(var(--rad) - 4px);padding:calc(10px*var(--t-space)) calc(14px*var(--t-space));font-size:.9rem}
input:focus,textarea:focus,select:focus{border-color:var(--txt);outline:0;animation:dr-wobble .3s var(--t-ease)}

/* ── TABS (admin / backend) ── */
nav button[role=tab]{font-weight:600}
.cal-sub-nav button,.content-tabs button,.stab-nav button,.em-folders button{border-radius:999px;padding:calc(7px*var(--t-space)) calc(16px*var(--t-space));font-weight:600;border:2px solid transparent}
.stab-nav button.active,.content-tabs button.active,.cal-sub-nav button.active,.em-folders button.active{border-color:var(--border)}

/* ── MODAL ── */
.modal{border:2px solid var(--border);border-radius:calc(var(--rad) + 6px);animation:dr-pop .35s var(--t-ease)}
.modal-bg{background:color-mix(in srgb,var(--bg) 60%,transparent)}

/* ── AUTH BOX (slide-up panel) ── */
.auth-overlay{background:transparent}
.auth-box{border:2px solid var(--border);border-radius:calc(var(--rad) + 6px);animation:dr-pop .4s var(--t-ease)}

/* ── TOAST ── */
.toast{border:2px solid var(--border);border-radius:999px;background:var(--card);color:var(--txt);font-weight:600;padding:8px 18px;box-shadow:3px 3px 0 var(--border);animation:dr-pop .3s var(--t-ease)}

/* ── TOOLBAR / EDITOR ── */
.toolbar{border-bottom:2px solid var(--border);border-radius:var(--rad) var(--rad) 0 0}
.md-editor,.md-preview,.split-editor{border:2px solid var(--border);border-radius:var(--rad)}

/* ── AI CHAT ── */
.ai-chat-box{border:2px solid var(--border);border-radius:calc(var(--rad) + 6px)}

/* ── MEDIA DROPZONE ── */
.media-dropzone{border:3px dashed var(--border);border-radius:var(--rad)}

/* ── REGISTER ── */
.register-form{border:2px solid var(--border);border-radius:calc(var(--rad) + 6px)}

/* ── CALENDAR ── */
.cal-grid .cal-day{border:2px solid var(--border);border-radius:calc(var(--rad) - 4px);font-weight:700;padding:6px}
.cal-header h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800}
.cal-event-form{border:2px solid var(--border);border-radius:var(--rad)}
.cal-nav-btn,.cal-view-switch button{border-radius:999px}

/* ── DASHBOARD ── */
.dash-card-label{font-size:.8em;font-weight:700;opacity:.6}
.dash-card-value{font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800;letter-spacing:-.02em}
.dash-grid{display:grid;gap:calc(16px*var(--t-space))}
.dash-card{padding:clamp(.8rem,1.5vw,1.2rem)}

/* ── EMAIL ── */
.em-item{border-radius:var(--rad);margin-bottom:6px}

/* ── SOCIAL HUB ── */
.sh-post-author,.comment-author{font-weight:700}
.sh-post-body{cursor:pointer}
.sh-post-media{width:100%;border-radius:var(--rad)}
.sh-post-meta{display:flex;gap:1rem;opacity:.5}

/* ── COMMENTS ── */
.cm-item{padding:clamp(.8rem,1.5vw,1.2rem)}
.cm-section{margin-top:calc(16px*var(--t-space))}

/* ── FUNNEL ── */
.funnel-section{border-radius:var(--rad)}
.funnel-section-inner{padding:clamp(1rem,2vw,1.5rem)}

/* ── STREAMING ── */
.sp-card,.sp-episode,.sp-detail{overflow:hidden}

/* ── PRODUCTS ── */
.pp-card{overflow:hidden}
.pp-wrap{display:flex;flex-wrap:wrap;gap:calc(16px*var(--t-space))}

/* ── REACTIONS ── */
.reaction-bar{display:flex;gap:6px;flex-wrap:wrap}
.reaction-btn{border:2px solid var(--border);border-radius:999px;padding:4px 12px;font-weight:600;cursor:pointer}
.reaction-btn:hover{animation:dr-wobble .3s var(--t-ease);box-shadow:var(--t-shadow-hover)}

/* ── TOC SIDEBAR ── */
.toc-sidebar,.toc-nav{padding:clamp(.8rem,1.5vw,1.2rem)}
.toc-nav a{display:block;padding:4px 0;font-weight:500}

/* ── PRICING ── */
.pricing-mini .btn{font-size:.85rem}

/* ── NOTIFICATIONS ── */
.notif-badge{border-radius:999px;font-weight:700}

/* ── DROPDOWNS ── */
.nav-dd-menu,.user-dd-menu,.list-dropdown{border:2px solid var(--border);border-radius:var(--rad);box-shadow:var(--t-shadow-lg);background:var(--card);animation:dr-pop .25s var(--t-ease)}

/* ── SEARCH ── */
.site-search{border-radius:999px;border:2px solid var(--border)}
.ss-panel{border:2px solid var(--border);border-radius:var(--rad);box-shadow:var(--t-shadow-lg);background:var(--card)}
.ss-type{border-radius:999px}

/* ── SETTINGS ── */
.settings-group+.settings-group{margin-top:calc(16px*var(--t-space))}
.toggle{border-radius:999px}

/* ── VIDEO PLAYER ── */
.vp-controls{border-radius:var(--rad)}

/* ── MISC SPACING ── */
header{background:var(--main);color:var(--txt-main);border-bottom:2px solid var(--border);box-shadow:0 2px 0 var(--border)}
footer{background:var(--main);color:var(--txt-main);border-top:2px solid var(--border);box-shadow:0 -2px 0 var(--border)}

/* ── OB-STEP / FNL-STEP / COMPRESS-OPTS ── */
.ob-step{border-radius:var(--rad);padding:clamp(1rem,2vw,1.5rem)}
.ob-step h3{font-weight:800;letter-spacing:-.02em}
.fnl-step{border-radius:var(--rad);padding:clamp(1rem,2vw,1.5rem)}
.compress-opts{border-radius:var(--rad);padding:clamp(.8rem,1.5vw,1.2rem)}
.compress-opts label{font-weight:600}

/* === NOTIFICATION PANEL === */
.notif-panel{position:absolute;top:100%;right:0;background:var(--card);border:2px solid var(--border);border-radius:var(--rad);box-shadow:var(--t-shadow-lg);min-width:280px;max-height:360px;overflow-y:auto;z-index:60;padding:.3rem 0;animation:dr-pop .25s var(--t-ease)}.notif-item{padding:.6rem 1rem;border-bottom:2px solid var(--border);font-size:clamp(.78rem,1.3vw,.88rem);font-weight:600}.notif-item:last-child{border-bottom:none}.notif-empty{padding:1.5rem;text-align:center;opacity:.5;font-size:clamp(.78rem,1.3vw,.88rem);font-weight:600}

/* === AUTHOR OVERLAY === */
.author-overlay{background:transparent}

/* === SCROLL REVEAL === */
.t-scroll-reveal{opacity:0;transform:translateY(24px) rotate(1deg);transition:opacity .5s var(--t-ease),transform .5s var(--t-ease)}.t-scroll-reveal.t-visible{opacity:1;transform:translateY(0) rotate(0)}

/* === CALENDAR GRID === */
.cal-grid{display:grid;gap:4px}

/* === INVITATIONS === */
.gp-invitation,.cp-invitation,.rp-origin{border:2px solid var(--border);border-radius:var(--rad);background:var(--card);padding:clamp(.8rem,1.5vw,1.2rem)}
.gp-invitation:hover,.cp-invitation:hover,.rp-origin:hover{animation:dr-wobble .4s var(--t-ease)}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){body::after{display:none}.t-scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}article.card,.adv-card,.em-item,.nw-card,.post-item,.sh-post,.sh-feed-post,.social-card,.social-post-card,.sp-card,.pp-card,.related-post,.pricing-mini,.member-card,.sub-card,.summary-card,.modal,.auth-box,.toast,.notif-panel,.nav-dd-menu,.user-dd-menu,.list-dropdown,.gp-invitation,.cp-invitation,.rp-origin,.reaction-btn,.btn,.btn-alt,.btn-danger,.funnel-btn,.funnel-btn-next,.pp-buy-btn,.btn-sub,.btn-ot,.cm-ai-btn{animation:none!important;transition:none!important}}