/* ── RESET & VARS ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Green-Blue palette */
  --bg:#edfaf4;
  --surface:#ffffff;
  --border:#b2e8d0;
  --text:#0d2b1f;
  --muted:#3d7a60;
  --accent:#0d9e6e;        /* teal-green */
  --accent-h:#0b8a5f;
  --accent-bg:#d4f5e9;
  --accent2:#0369a1;       /* deep blue */
  --accent2-bg:#dbeafe;
  --accent3:#059669;       /* emerald */
  --accent4:#06b6d4;       /* cyan */
  --accent5:#0ea5e9;       /* sky */
  --test-c:#dc2626;--test-bg:#fff1f0;
  --sum-c:#0d9e6e;--sum-bg:#d4f5e9;
  --danger:#dc2626;
  --admin-c:#0369a1;--admin-bg:#dbeafe;
  --radius:10px;--radius-lg:16px;
  --shadow:0 2px 8px rgba(13,158,110,.12),0 4px 20px rgba(13,158,110,.08);
  --shadow-lg:0 4px 16px rgba(13,158,110,.18),0 8px 40px rgba(13,158,110,.12);
  --font:'Heebo',sans-serif;--mono:'DM Mono',monospace;
  --nav-h:62px;
  --grad: linear-gradient(135deg,#0d9e6e 0%,#0ea5e9 60%,#06b6d4 100%);
  --grad2: linear-gradient(135deg,#059669 0%,#0369a1 100%);
  --grad3: linear-gradient(135deg,#06b6d4 0%,#0d9e6e 100%);
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;direction:rtl}
body.ltr{direction:ltr}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit}
main{flex:1}

/* ── AD SLOTS ──────────────────────────────────────────────────────────────── */
.ad-banner{
  background:linear-gradient(90deg,#cffafe,#a7f3d0);
  border-bottom:2px solid #67e8f9;
  padding:8px 24px;display:flex;align-items:center;justify-content:center;
  gap:12px;font-size:.85rem;color:#164e63;font-weight:500;
}
.ad-banner .ad-label{background:#0284c7;color:#fff;border-radius:4px;padding:1px 7px;font-size:.72rem;font-weight:700;letter-spacing:.4px}
.ad-banner button{background:none;border:none;cursor:pointer;font-size:1rem;opacity:.5;padding:2px 6px;margin-right:auto}
.ad-banner button:hover{opacity:1}
.ad-footer-banner{background:linear-gradient(90deg,#a7f3d0,#bae6fd);border-top:2px solid #6ee7b7;border-bottom:2px solid #6ee7b7;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:.85rem;color:#065f46;font-weight:500}
.ad-label-small{display:inline-block;background:#0284c7;color:#fff;border-radius:4px;padding:1px 7px;font-size:.68rem;font-weight:700;letter-spacing:.4px;margin-bottom:4px}
.ad-sidebar{margin-top:16px;background:linear-gradient(135deg,#cffafe,#a7f3d0);border:1.5px dashed #34d399;border-radius:var(--radius);padding:14px;text-align:center}
.ad-sidebar-inner{font-size:.82rem;color:#065f46;font-weight:500;margin-top:4px}
.ad-homepage{max-width:900px;margin:20px auto 0;padding:10px 20px;background:linear-gradient(90deg,#a7f3d0,#bae6fd);border:1.5px dashed #38bdf8;border-radius:var(--radius);display:flex;align-items:center;gap:12px;font-size:.85rem;color:#0c4a6e;font-weight:500}
.ad-mid-results{margin-top:24px;padding:10px 20px;background:linear-gradient(90deg,#cffafe,#d4f5e9);border:1.5px dashed #6ee7b7;border-radius:var(--radius);display:flex;align-items:center;gap:12px;font-size:.85rem;color:#065f46;font-weight:500}
.ad-detail{margin-top:24px;padding:12px 18px;background:linear-gradient(90deg,#bae6fd,#a7f3d0);border:1.5px dashed #38bdf8;border-radius:var(--radius);display:flex;align-items:center;gap:10px;font-size:.85rem;color:#0c4a6e;font-weight:500}

/* ── NAVBAR ───────────────────────────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:2px solid var(--border);height:var(--nav-h)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 16px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.logo{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:900}
.logo-icon{font-size:1.4rem}
.logo-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-sub{font-size:.7rem;color:var(--muted);font-weight:500;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-links a{padding:6px 10px;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--muted);transition:all .15s}
.nav-links a:hover{background:var(--accent-bg);color:var(--accent)}
.nav-upload{background:var(--accent)!important;color:#fff!important;font-weight:700!important}
.nav-upload:hover{background:var(--accent-h)!important;color:#fff!important}
.nav-admin{background:var(--admin-bg)!important;color:var(--admin-c)!important;font-weight:700!important}
.nav-register{border:2px solid var(--accent)!important;color:var(--accent)!important}
.nav-register:hover{background:var(--accent)!important;color:#fff!important}
.lang-toggle{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:5px 10px;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--muted);transition:all .15s}
.lang-toggle:hover{border-color:var(--accent);color:var(--accent)}
.nav-hamburger{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;padding:4px 8px;color:var(--text)}

/* ── FLASH ────────────────────────────────────────────────────────────────── */
.flash-container{max-width:900px;margin:12px auto 0;padding:0 16px}
.flash{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);margin-bottom:8px;font-weight:600;font-size:.88rem}
.flash-success{background:#d4f5e9;border:1.5px solid #6ee7b7;color:#065f46}
.flash-error{background:#fee2e2;border:1.5px solid #fca5a5;color:#991b1b}
.flash-warning{background:#fef9c3;border:1.5px solid #fcd34d;color:#92400e}
.flash-info{background:var(--accent2-bg);border:1.5px solid #93c5fd;color:#1e40af}
.flash button{margin-right:auto;background:none;border:none;cursor:pointer;font-size:1rem;opacity:.5}
.flash button:hover{opacity:1}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.footer{margin-top:48px;border-top:2px solid var(--border);padding:20px;text-align:center;color:var(--muted);font-size:.82rem}
.footer-inner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.footer-logo{font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,#d4f5e9 0%,#cffafe 50%,#dbeafe 100%);border-bottom:2px solid var(--border);padding:56px 16px 36px;text-align:center}
.hero-inner{max-width:660px;margin:0 auto}
.hero-badge{display:inline-block;background:var(--grad);color:#fff;border-radius:100px;padding:5px 16px;font-size:.78rem;font-weight:700;margin-bottom:18px;box-shadow:0 2px 12px rgba(13,158,110,.3)}
.hero-title{font-size:clamp(1.9rem,5vw,3rem);font-weight:900;line-height:1.15;letter-spacing:-.5px}
.hero-accent{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{margin-top:14px;color:var(--muted);font-size:.97rem;font-weight:500}
.hero-actions{margin-top:24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:40px;padding-top:30px;border-top:2px solid var(--border);flex-wrap:wrap}
.stat{text-align:center}
.stat-num{display:block;font-size:2rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:.8rem;color:var(--muted);font-weight:600}
.stat-divider{width:2px;height:40px;background:var(--grad);border-radius:2px;opacity:.3}

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
.subjects-section,.latest-section{max-width:1200px;margin:0 auto;padding:40px 16px 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.section-header h2{font-size:1.25rem;font-weight:800}
.see-all{font-size:.88rem;color:var(--accent);font-weight:700}
.see-all:hover{text-decoration:underline}

/* ── SUBJECTS GRID ────────────────────────────────────────────────────────── */
.subjects-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.subject-pill{background:var(--surface);border:2px solid var(--border);border-radius:100px;padding:7px 18px;font-size:.85rem;font-weight:600;transition:all .18s;white-space:nowrap;color:var(--text)}
.subject-pill:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(13,158,110,.25)}

/* ── CARDS ────────────────────────────────────────────────────────────────── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;transition:all .2s;overflow:hidden;cursor:pointer}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.card:nth-child(4n+1){border-top:4px solid var(--accent)}
.card:nth-child(4n+2){border-top:4px solid var(--accent5)}
.card:nth-child(4n+3){border-top:4px solid var(--accent4)}
.card:nth-child(4n+4){border-top:4px solid var(--accent2)}
.card-type{padding:7px 14px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.card-type-test{background:var(--test-bg);color:var(--test-c)}
.card-type-summary{background:var(--sum-bg);color:var(--sum-c)}
.card-body{padding:12px 14px;flex:1}
.card-title{font-size:.93rem;font-weight:700;margin-bottom:7px;line-height:1.3}
.card-meta{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.card-desc{font-size:.8rem;color:var(--muted);line-height:1.5;margin-bottom:6px}
.card-school{font-size:.75rem;color:var(--accent2);font-weight:600;margin-bottom:4px}
.card-stars{display:flex;align-items:center;gap:2px;font-size:.85rem}
.card-stars .star{color:#d1d5db}
.card-stars .star.filled{color:#f59e0b}
.rating-count{font-size:.75rem;color:var(--muted);margin-right:4px}
.card-footer{padding:9px 14px;border-top:1.5px solid var(--border);display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--muted)}
.card-user{font-weight:700;color:var(--accent)}
.card-stat{background:var(--bg);border-radius:5px;padding:1px 7px;font-weight:600}

/* ── TAGS ─────────────────────────────────────────────────────────────────── */
.tag{background:var(--bg);border:1.5px solid var(--border);border-radius:6px;padding:2px 9px;font-size:.75rem;font-weight:600;white-space:nowrap}
.tag-subject{background:var(--accent-bg);color:var(--accent);border-color:#6ee7b7}
.tag-school{background:var(--accent2-bg);color:var(--accent2);border-color:#93c5fd}
.stat-tag{background:var(--accent-bg);color:var(--accent-h);border-color:#6ee7b7;font-weight:700}

/* ── BADGES ───────────────────────────────────────────────────────────────── */
.admin-badge{display:inline-block;background:var(--admin-bg);color:var(--admin-c);border-radius:6px;padding:2px 8px;font-size:.72rem;font-weight:700;margin-right:4px}
.blocked-badge{display:inline-block;background:#fee2e2;color:#dc2626;border-radius:6px;padding:2px 8px;font-size:.72rem;font-weight:700;margin-right:4px}
.no-ads-badge{display:inline-block;background:var(--accent-bg);color:var(--accent);border-radius:6px;padding:2px 10px;font-size:.75rem;font-weight:700;margin-right:4px}
.muted-badge{font-size:.78rem;color:var(--muted)}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--radius);font-weight:700;font-size:.88rem;border:2px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 10px rgba(13,158,110,.3)}
.btn-primary:hover{background:var(--accent-h);transform:translateY(-1px);box-shadow:0 4px 16px rgba(13,158,110,.4)}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{background:var(--bg);border-color:var(--accent);color:var(--accent)}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn-ghost:hover{background:var(--bg);color:var(--text)}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{background:#b91c1c}
.btn-success{background:var(--accent3);color:#fff;border-color:var(--accent3)}
.btn-success:hover{background:#047857}
.btn-full{width:100%}
.btn-large{padding:14px 24px;font-size:1rem}
.btn-sm{padding:4px 10px;font-size:.78rem}
.btn-icon-danger{background:none;border:none;cursor:pointer;font-size:1rem;padding:5px;border-radius:6px;transition:background .15s;opacity:.5}
.btn-icon-danger:hover{background:var(--test-bg);opacity:1}

/* ── GOOGLE BUTTON ────────────────────────────────────────────────────────── */
.google-btn-wrap{padding:0 24px 16px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 18px;border-radius:var(--radius);font-weight:700;font-size:.9rem;border:2px solid #dadce0;background:#fff;color:#3c4043;cursor:pointer;transition:all .15s;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.btn-google:hover{background:#f8f9fa;box-shadow:0 2px 8px rgba(0,0,0,.15);border-color:#c6c9cd}

/* ── DIVIDER ────────────────────────────────────────────────────────────── */
.divider{display:flex;align-items:center;gap:10px;padding:0 24px 16px;color:var(--muted);font-size:.82rem;font-weight:500}
.divider::before,.divider::after{content:'';flex:1;height:1.5px;background:var(--border)}

/* ── SORT PILLS ─────────────────────────────────────────────────────────── */
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.results-count{font-size:.9rem;color:var(--muted);font-weight:500}
.count-num{font-weight:800;color:var(--text);font-size:1.1rem}
.sort-pills{display:flex;gap:6px;flex-wrap:wrap}
.sort-pill{padding:4px 12px;border-radius:100px;font-size:.78rem;font-weight:600;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);transition:all .15s;cursor:pointer}
.sort-pill:hover{border-color:var(--accent);color:var(--accent)}
.sort-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ── EMPTY STATE ──────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:56px 16px;color:var(--muted)}
.empty-icon{font-size:3rem;margin-bottom:16px}
.empty-state p{font-size:.97rem;margin-bottom:20px;font-weight:500}

/* ── PAGE HEADER ──────────────────────────────────────────────────────────── */
.page-header{max-width:1200px;margin:0 auto;padding:32px 16px 0}
.page-header h1{font-size:1.8rem;font-weight:900}

/* ── BROWSE ───────────────────────────────────────────────────────────────── */
.browse-layout{max-width:1200px;margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.filters-sidebar{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:18px;position:sticky;top:calc(var(--nav-h)+12px)}
.filter-group{margin-bottom:14px}
.filter-group label{display:block;font-size:.74rem;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.filter-input{width:100%;padding:8px 12px;border:2px solid var(--border);border-radius:var(--radius);background:var(--bg);font-size:.88rem;transition:border-color .15s;color:var(--text)}
.filter-input:focus{outline:none;border-color:var(--accent)}
.sort-select{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-h);font-weight:700}

/* ── SCHOOL MSG ───────────────────────────────────────────────────────────── */
.school-msg{margin-top:6px;font-size:.83rem;font-weight:600;padding:6px 12px;border-radius:8px}
.school-msg-new{background:var(--accent-bg);color:var(--accent-h);border:1.5px solid #6ee7b7}
.school-msg-exists{background:var(--accent2-bg);color:var(--accent2);border:1.5px solid #93c5fd}

/* ── FORM PAGE ────────────────────────────────────────────────────────────── */
.form-page{max-width:680px;margin:32px auto;padding:0 16px 64px}
.form-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.form-card-narrow{max-width:440px;margin:0 auto}
.form-card-header{padding:28px 28px 20px;background:linear-gradient(135deg,var(--accent-bg),#cffafe);border-bottom:2px solid var(--border)}
.form-card-header h1{font-size:1.55rem;font-weight:900;margin-bottom:5px}
.form-card-header p{font-size:.88rem;color:var(--muted);font-weight:500}
.upload-form{padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.form-row{display:flex;flex-direction:column;gap:16px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.82rem;font-weight:700;color:var(--text)}
.form-input{padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius);font-size:.92rem;background:var(--bg);color:var(--text);transition:border-color .15s,box-shadow .15s}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,158,110,.12)}
.form-textarea{min-height:90px;resize:vertical}
.form-footer{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 28px;border-top:2px solid var(--border);font-size:.88rem;background:var(--bg)}
.form-footer a{color:var(--accent);font-weight:700}

/* ── TYPE TOGGLE ──────────────────────────────────────────────────────────── */
.type-toggle{display:flex;gap:10px}
.type-option{flex:1}
.type-option input{display:none}
.type-label{display:block;text-align:center;padding:10px;border:2px solid var(--border);border-radius:var(--radius);font-size:.88rem;font-weight:700;cursor:pointer;transition:all .15s;background:var(--bg)}
.type-option input:checked+.type-label{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px rgba(13,158,110,.3)}

/* ── FILE DROP ────────────────────────────────────────────────────────────── */
.file-drop{border:2px dashed var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,background .2s;background:var(--bg);position:relative}
.file-drop:hover,.file-drop.drag-over{border-color:var(--accent);background:var(--accent-bg)}
.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}
.file-drop-ui{padding:28px;text-align:center;pointer-events:none}
.file-drop-icon{font-size:2rem;margin-bottom:8px}
.file-drop-text{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:4px}
.file-types{font-size:.76rem;color:var(--muted)}
.file-chosen{margin-top:8px;font-size:.82rem;font-weight:600;color:var(--accent);background:var(--accent-bg);padding:5px 12px;border-radius:6px;border:1.5px solid #6ee7b7}

/* ── DETAIL PAGE ────────────────────────────────────────────────────────── */
.detail-page{max-width:860px;margin:32px auto;padding:0 16px 64px}
.detail-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.detail-top{padding:28px;background:linear-gradient(135deg,var(--accent-bg),#cffafe);border-bottom:2px solid var(--border)}
.detail-title{font-size:1.55rem;font-weight:900;margin:12px 0}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px}
.detail-type{display:inline-block;padding:5px 14px;border-radius:8px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.detail-type-test{background:var(--test-bg);color:var(--test-c)}
.detail-type-summary{background:var(--sum-bg);color:var(--sum-c)}
.rating-section{padding:20px 28px;border-bottom:2px solid var(--border);background:var(--bg)}
.rating-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.rating-summary{color:var(--muted);font-size:.9rem}
.star-picker{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.star-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;color:#d1d5db;transition:color .1s;padding:0 2px}
.star-btn.active{color:#f59e0b}
.rating-msg{font-size:.85rem;font-weight:600;color:var(--accent);margin-top:6px;min-height:20px}
.detail-desc{padding:20px 28px;border-bottom:2px solid var(--border)}
.detail-desc h3{font-size:.95rem;font-weight:700;margin-bottom:8px;color:var(--muted)}
.detail-desc p{font-size:.92rem;line-height:1.7}
.detail-info{padding:20px 28px;border-bottom:2px solid var(--border);display:flex;flex-direction:column;gap:10px}
.info-row{display:flex;gap:12px;align-items:center;font-size:.88rem}
.info-label{font-weight:700;color:var(--muted);min-width:120px}
.info-link{color:var(--accent);font-weight:700}
.info-link:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-size:.82rem;background:var(--bg);padding:2px 8px;border-radius:5px;border:1px solid var(--border)}
.detail-actions{padding:20px 28px;border-bottom:2px solid var(--border);display:flex;gap:10px;flex-wrap:wrap}
.detail-owner-actions{padding:12px 28px 20px;display:flex}

/* ── REPORT SECTION ───────────────────────────────────────────────────────── */
.report-section{padding:16px 28px;border-bottom:2px solid var(--border)}
.btn-report{background:none;border:1.5px solid #fca5a5;color:#dc2626;border-radius:var(--radius);padding:6px 14px;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .15s}
.btn-report:hover{background:#fee2e2}
.already-reported{font-size:.84rem;color:var(--muted);font-weight:500}
.report-form{margin-top:12px;padding:16px;background:var(--bg);border-radius:var(--radius);border:1.5px solid var(--border)}
.hidden{display:none !important}
.report-form.hidden{display:none}
.report-title{font-size:.85rem;font-weight:700;margin-bottom:10px}
.report-reasons{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.report-reason-opt{display:flex;align-items:center;gap:8px;font-size:.88rem;cursor:pointer}
.report-reason-opt input{accent-color:var(--danger)}
.report-reason-tag{background:#fee2e2;color:#dc2626;border-radius:5px;padding:2px 8px;font-size:.78rem;font-weight:600}
.report-textarea{min-height:70px;margin-bottom:10px;width:100%}

/* ── PROFILE ─────────────────────────────────────────────────────────────── */
.profile-page{max-width:960px;margin:32px auto;padding:0 16px 64px}
.profile-header{background:linear-gradient(135deg,var(--accent-bg),#cffafe);border:2px solid var(--border);border-radius:var(--radius-lg);padding:28px;margin-bottom:24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;font-weight:900;flex-shrink:0}
.profile-info h1{font-size:1.5rem;font-weight:900;margin-bottom:6px}
.profile-stats{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px}
.profile-stat{text-align:center}
.profile-stat-num{display:block;font-size:1.3rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.profile-stat-label{font-size:.75rem;color:var(--muted);font-weight:600}
.profile-materials h2{font-size:1.15rem;font-weight:800;margin-bottom:14px}

/* ── ADMIN ────────────────────────────────────────────────────────────────── */
.admin-page{max-width:1150px;margin:32px auto;padding:0 16px 64px}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:24px}
.admin-stat-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:16px;text-align:center;box-shadow:var(--shadow)}
.admin-stat-card:nth-child(1){border-top:4px solid var(--accent)}
.admin-stat-card:nth-child(2){border-top:4px solid var(--accent2)}
.admin-stat-card:nth-child(3){border-top:4px solid var(--accent4)}
.admin-stat-card:nth-child(4){border-top:4px solid var(--accent5)}
.admin-stat-card:nth-child(5){border-top:4px solid #f59e0b}
.admin-stat-card:nth-child(6){border-top:4px solid var(--danger)}
.admin-stat-card:nth-child(7){border-top:4px solid #6b7280}
.stat-alert{background:#fee2e2!important;border-color:#fca5a5!important}
.astat-icon{font-size:1.4rem;margin-bottom:4px}
.astat-num{font-size:1.6rem;font-weight:900;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.astat-label{font-size:.72rem;color:var(--muted);font-weight:600;margin-top:2px}

/* ── ADMIN TABS ───────────────────────────────────────────────────────────── */
.admin-tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:2px solid var(--border);padding-bottom:0}
.admin-tab{background:transparent;border:none;border-bottom:3px solid transparent;padding:10px 18px;font-size:.9rem;font-weight:700;color:var(--muted);cursor:pointer;transition:all .15s;border-radius:6px 6px 0 0;margin-bottom:-2px}
.admin-tab:hover{background:var(--accent-bg);color:var(--accent)}
.admin-tab.active{border-bottom-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.tab-alert{color:var(--danger)!important}
.admin-tab-content{display:block}
.admin-tab-content.hidden{display:none}

.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.admin-panel{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}
.admin-panel-full{grid-column:1/-1}
.admin-panel h2{font-size:1rem;font-weight:800;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.admin-table{width:100%;border-collapse:collapse;font-size:.85rem}
.admin-table th{text-align:right;font-size:.73rem;font-weight:700;color:var(--muted);text-transform:uppercase;padding:6px 10px;border-bottom:2px solid var(--border);letter-spacing:.3px}
.admin-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:var(--accent-bg)}
.row-blocked td{background:#fff5f5;color:#9ca3af}
.row-blocked:hover td{background:#fee2e2!important}

/* ── IP MANAGEMENT ────────────────────────────────────────────────────────── */
.ip-code{font-family:var(--mono);font-size:.82rem;background:var(--bg);padding:2px 8px;border-radius:5px;border:1px solid var(--border)}
.btn-block-ip{background:none;border:none;cursor:pointer;font-size:.85rem;padding:2px 5px;border-radius:4px;opacity:.5;margin-right:4px}
.btn-block-ip:hover{opacity:1;background:#fee2e2}
.ip-block-form{display:flex;flex-direction:column;gap:12px}

/* ── USER MANAGEMENT BUTTONS ─────────────────────────────────────────────── */
.ads-toggle-btn{background:none;border:1.5px solid var(--border);border-radius:6px;padding:3px 10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s}
.ads-on{color:var(--muted)}
.ads-off{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.block-toggle-btn{border:1.5px solid var(--border);border-radius:6px;padding:3px 10px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .15s;background:none}
.btn-block{border-color:#fca5a5;color:#dc2626}
.btn-block:hover{background:#fee2e2}
.btn-unblock{border-color:#6ee7b7;color:var(--accent);background:var(--accent-bg)}

/* ── REPORT ACTION BUTTONS ───────────────────────────────────────────────── */
.report-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ── SUBJECT BARS ─────────────────────────────────────────────────────────── */
.subject-bars{display:flex;flex-direction:column;gap:8px}
.sbar-row{display:flex;align-items:center;gap:8px;font-size:.82rem}
.sbar-label{min-width:100px;font-weight:600;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar-track{flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.sbar-fill{height:100%;background:var(--grad);border-radius:4px;min-width:4px}
.sbar-num{font-weight:700;color:var(--accent);min-width:28px;text-align:left}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .admin-grid{grid-template-columns:1fr}
  .admin-panel-full{grid-column:1}
}
@media(max-width:768px){
  .browse-layout{grid-template-columns:1fr}
  .filters-sidebar{position:static}
  .form-row-2{grid-template-columns:1fr}
  .nav-hamburger{display:block}
  .nav-links{display:none;flex-direction:column;align-items:flex-start;padding:12px 16px;border-top:2px solid var(--border);background:var(--surface);position:absolute;top:var(--nav-h);right:0;left:0;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .nav-links.open{display:flex}
  .results-header{flex-direction:column;align-items:flex-start}
  .profile-header{flex-direction:column;text-align:center}
  .profile-stats{justify-content:center}
  .admin-tabs{flex-wrap:wrap}
}

/* ── PROFILE FIXES ────────────────────────────────────────────────────────── */
.profile-username { font-size:1.15rem; font-weight:900; margin-bottom:4px; }
.rename-section { margin-top:18px; padding-top:18px; border-top:1.5px solid var(--border); }
.user-score-badge {
  margin-top:8px; font-size:.78rem; color:var(--accent2);
  background:var(--accent2-bg); border-radius:6px; padding:3px 10px; display:inline-block;
}
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }

/* ── AD SLOT COMMENTS (Google AdSense ready) ──────────────────────────────── */
/*
  HOW TO SWAP IN REAL GOOGLE ADS:
  1. Sign up at https://adsense.google.com
  2. Wait for site approval (they crawl it)
  3. Get your publisher ID (ca-pub-XXXXXXXXXXXXXXXX)
  4. In base.html, uncomment the <script async src="pagead2..."> line
  5. Replace each .ad-banner / .ad-sidebar / .ad-footer-banner / .ad-mid-results div
     with your <ins class="adsbygoogle"> unit + push script
  6. Typical sizes: top banner = 728x90, sidebar = 300x250, footer = 728x90
  These divs are deliberately the right proportions already.
*/
.ad-banner        { min-height: 60px; }   /* matches 728×90 leaderboard */
.ad-sidebar       { min-height: 250px; }  /* matches 300×250 rectangle */
.ad-footer-banner { min-height: 60px; }   /* matches 728×90 leaderboard */
.ad-mid-results   { min-height: 100px; }  /* matches 970×90 billboard */

/* ── ADMIN EXTRAS ─────────────────────────────────────────────────────────── */
.admin-panel-full { grid-column: 1 / -1; }
.stat-alert .astat-num { color: var(--danger) !important; }
.tab-alert { color: var(--danger) !important; font-weight: 800; }
.row-blocked td { opacity: .5; }
.ip-code {
  font-family: var(--mono); font-size:.72rem;
  background:var(--bg); border:1px solid var(--border);
  border-radius:4px; padding:2px 6px;
}
.btn-block-ip { background:none; border:none; cursor:pointer; font-size:.85rem; opacity:.4; padding:0 4px; }
.btn-block-ip:hover { opacity:1; }
.ads-toggle-btn { padding:4px 10px; border-radius:6px; font-size:.75rem; font-weight:700; border:1.5px solid transparent; cursor:pointer; font-family:var(--font); }
.ads-on  { background:var(--test-bg); color:var(--test-c); border-color:#fca5a5; }
.ads-off { background:var(--sum-bg);  color:var(--sum-c);  border-color:#6ee7b7; }
.block-toggle-btn { padding:4px 10px; border-radius:6px; font-size:.75rem; font-weight:700; border:1.5px solid var(--border); cursor:pointer; font-family:var(--font); }
.btn-block   { background:var(--test-bg); color:var(--test-c); border-color:#fca5a5; }
.btn-unblock { background:var(--sum-bg);  color:var(--sum-c);  border-color:#6ee7b7; }
.admin-tab-content.hidden { display:none !important; }

/* ── LEADERBOARD ──────────────────────────────────────────────────────────── */
.leaderboard-wrap { max-width:860px; margin:24px auto; padding:0 16px 64px; }
.leaderboard-list { display:flex; flex-direction:column; gap:10px; }
.lb-row {
  display:flex; align-items:center; gap:14px;
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 20px; transition:all .18s; cursor:pointer;
}
.lb-row:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-1px); }
.lb-gold   { border-color:#f59e0b; background:linear-gradient(135deg,#fffbeb,var(--surface)); }
.lb-silver { border-color:#9ca3af; background:linear-gradient(135deg,#f9fafb,var(--surface)); }
.lb-bronze { border-color:#d97706; background:linear-gradient(135deg,#fef3c7,var(--surface)); }
.lb-rank { font-size:1.6rem; min-width:40px; text-align:center; }
.lb-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-size:1.2rem; font-weight:900;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lb-info { flex:1; min-width:0; }
.lb-name { font-size:1rem; font-weight:800; }
.lb-meta { font-size:.76rem; color:var(--muted); margin-top:3px; }
.lb-rating { text-align:center; }
.lb-stars { display:flex; gap:2px; font-size:.9rem; justify-content:center; }
.lb-stars .star { color:#d1d5db; }
.lb-stars .star.filled { color:#f59e0b; }
.lb-avg { font-size:.75rem; color:var(--muted); margin-top:3px; }
.lb-score { text-align:center; min-width:70px; }
.lb-score-num { font-size:1.3rem; font-weight:900; color:var(--accent); }
.lb-score-label { font-size:.7rem; color:var(--muted); }

/* ── AUTOCOMPLETE DROPDOWN ───────────────────────────────────────────────── */
.autocomplete-dropdown {
  position:absolute; z-index:200; background:var(--surface);
  border:2px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); max-height:220px; overflow-y:auto; min-width:200px;
}
.ac-item {
  padding:10px 14px; cursor:pointer; font-size:.88rem; transition:background .1s;
}
.ac-item:hover { background:var(--accent-bg); color:var(--accent); }
#searchInput { position:relative; }
.filter-group { position:relative; }

@media (max-width:768px) {
  .lb-row { flex-wrap:wrap; gap:10px; }
  .lb-score { min-width:auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PROFILE PAGE — complete rewrite
   ════════════════════════════════════════════════════════════════════════════ */
.prof-page {
  max-width: 860px;
  margin: 28px auto;
  padding: 0 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Top card: avatar + info + rating side by side */
.prof-top-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--accent-bg) 0%, #cffafe 50%, #dbeafe 100%);
}
.prof-avatar-wrap { flex-shrink: 0; position: relative; }
.prof-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(13,158,110,.3);
}
.prof-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(13,158,110,.3);
  display: block;
}
.avatar-upload-label {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 26px;
  height: 26px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .8rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: background .15s;
  line-height: 1;
}
.avatar-upload-label:hover { background: var(--accent-dark, #0a8a5f); }
.avatar-del-btn {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.avatar-del-form { display: contents; }
.prof-meta { flex: 1; min-width: 160px; }
.prof-name  { font-size: 1.4rem; font-weight: 900; margin-bottom: 3px; color: var(--text); }
.prof-email { font-size: .82rem; color: var(--muted); margin-bottom: 3px; }
.prof-since { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.prof-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 700;
}
.badge-admin { background: var(--admin-bg); color: var(--admin-c); }
.badge-green { background: var(--sum-bg); color: var(--sum-c); }
.badge-blue  { background: var(--accent2-bg); color: var(--accent2); }

/* Rating panel — right side of top card */
.prof-rating-panel {
  text-align: center;
  min-width: 140px;
  background: rgba(255,255,255,.6);
  border-radius: var(--radius);
  padding: 14px 18px;
  border: 1.5px solid rgba(255,255,255,.8);
}
.prof-stars { display: flex; justify-content: center; gap: 3px; font-size: 1.3rem; margin-bottom: 6px; }
.prof-stars .star { color: #d1d5db; }
.prof-stars .star.filled { color: #f59e0b; }
.prof-rating-avg {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.prof-rating-of { font-size: .85rem; color: var(--muted); font-weight: 400; }
.prof-rating-sub {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.prof-stat-chip {
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 700;
}
.prof-score { background: #fef9c3; color: #92400e; }

/* Rename bar */
.prof-rename-bar {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rename-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.rename-form.hidden { display: none; }
.rename-input { flex: 1; min-width: 180px; max-width: 300px; }

/* Materials section */
.prof-materials-section {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.prof-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.prof-section-header h2 { font-size: 1.15rem; font-weight: 800; }

.prof-list { display: flex; flex-direction: column; gap: 8px; }
.prof-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: all .15s;
  background: var(--bg);
}
.prof-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.ptype {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ptype-test    { background: var(--test-bg); color: var(--test-c); }
.ptype-summary { background: var(--sum-bg);  color: var(--sum-c); }
.prof-item-body { flex: 1; min-width: 0; }
.prof-item-title {
  font-weight: 700;
  font-size: .92rem;
  color: var(--text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prof-item-title:hover { color: var(--accent); }
.prof-item-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: .74rem;
  color: var(--muted);
}
.prof-item-del { flex-shrink: 0; }

/* Detail page missing pieces */
.report-section {
  padding: 14px 24px;
  border-top: 1.5px solid var(--border);
}
.btn-report {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
  font-family: var(--font);
}
.btn-report:hover { border-color: var(--danger); color: var(--danger); background: var(--test-bg); }
.report-form { margin-top: 12px; }
.report-form.hidden { display: none; }
.report-title { font-weight: 700; font-size: .85rem; margin-bottom: 8px; }
.report-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.report-reason-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  transition: all .15s;
}
.report-reason-opt:hover { border-color: var(--accent); }
.report-reason-opt input { accent-color: var(--accent); }
.report-textarea { margin-bottom: 10px; min-height: 60px; }
.already-reported { font-size: .85rem; color: var(--sum-c); font-weight: 600; padding: 6px 0; }

.detail-owner-actions {
  padding: 14px 24px;
  border-top: 1.5px solid var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── AD SLOTS — easy swap guide ──────────────────────────────────────────────
   HOW TO ADD REAL ADS (e.g. Google AdSense, Ezoic, Monetag, etc.):
   1. Find the div with class  ad-banner / ad-footer-banner / ad-sidebar /
      ad-detail / ad-mid-results  in the templates.
   2. Replace the <div> with your ad network's code snippet.
   3. The sizes below match standard IAB units so the layout won't break.
   ========================================================================== */
.ad-banner        { min-height: 60px;  } /* 728×90 leaderboard */
.ad-footer-banner { min-height: 60px;  } /* 728×90 leaderboard */
.ad-sidebar       { min-height: 250px; } /* 300×250 medium rectangle */
.ad-detail        { min-height: 90px;  } /* 728×90 or 320×50 mobile */
.ad-mid-results   { min-height: 90px;  } /* responsive banner */

/* Public profile — reuse prof-page styles */
.pub-prof-page {
  max-width: 860px;
  margin: 28px auto;
  padding: 0 16px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .prof-top-card   { flex-direction: column; align-items: center; text-align: center; }
  .prof-meta       { align-items: center; display: flex; flex-direction: column; }
  .prof-badges     { justify-content: center; }
  .prof-rating-panel { width: 100%; }
  .prof-rename-bar { flex-direction: column; align-items: flex-start; }
  .rename-form     { width: 100%; }
  .rename-input    { width: 100%; max-width: 100%; }
  .prof-item       { flex-wrap: wrap; }
  .detail-owner-actions { flex-direction: column; }
}


/* ── PREVENT DIM / OVERLAY ISSUES ────────────────────────────────────────── */
/* Ensure no ad slot or placeholder creates a dimming overlay */
.ad-banner, .ad-footer-banner, .ad-sidebar, .ad-detail, .ad-mid-results {
  pointer-events: auto;
  opacity: 1 !important;
  filter: none !important;
}
body::before, body::after { display: none !important; }

/* ── COMMENTS ─────────────────────────────────────────────────────────────── */
.comments-section { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--border); }
.comments-title { font-size: 1rem; font-weight: 800; margin-bottom: 14px; }
.comment-form { display: flex; gap: 8px; margin-bottom: 18px; }
.comment-input {
  flex: 1; padding: 10px 14px; border: 2px solid var(--border);
  border-radius: var(--radius); font-family: var(--font); font-size: .88rem;
  resize: none; min-height: 42px; max-height: 120px; transition: border-color .15s;
}
.comment-input:focus { outline: none; border-color: var(--accent); }
.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment-item {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.comment-avatar-img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.comment-avatar-init {
  width: 26px; height: 26px; border-radius: 50%; background: var(--grad);
  color: #fff; font-size: .72rem; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.comment-author { font-weight: 700; font-size: .85rem; color: var(--accent); }
.comment-time { font-size: .72rem; color: var(--muted); }
.comment-body { font-size: .88rem; line-height: 1.5; margin-bottom: 8px; }
.comment-actions { display: flex; align-items: center; gap: 10px; }
.comment-like-btn {
  background: none; border: 1.5px solid var(--border); border-radius: 6px;
  padding: 3px 10px; font-size: .78rem; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 4px; transition: all .15s;
}
.comment-like-btn:hover { border-color: var(--accent); color: var(--accent); }
.comment-like-btn.liked { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.comment-del-btn {
  background: none; border: none; cursor: pointer; font-size: .78rem;
  color: var(--muted); padding: 2px 6px; border-radius: 4px; transition: all .15s;
}
.comment-del-btn:hover { color: var(--danger); background: var(--test-bg); }

/* ── HELPFUL VOTES ────────────────────────────────────────────────────────── */
.helpful-section {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-top: 1.5px solid var(--border); margin-top: 14px;
  flex-wrap: wrap;
}
.helpful-label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.helpful-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  border: 2px solid var(--border); background: var(--surface);
  cursor: pointer; font-family: var(--font); font-size: .88rem; font-weight: 700;
  transition: all .15s;
}
.helpful-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.helpful-btn.up:hover, .helpful-btn.up.active {
  border-color: var(--accent); background: var(--accent-bg); color: var(--accent);
}
.helpful-btn.down:hover, .helpful-btn.down.active {
  border-color: var(--danger); background: var(--test-bg); color: var(--danger);
}
.helpful-count { font-size: .8rem; color: var(--muted); }

/* ── ADMIN ACTIVE SESSIONS ───────────────────────────────────────────────── */
.session-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; display: inline-block;
  box-shadow: 0 0 0 2px rgba(34,197,94,.3);
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%,100% { box-shadow: 0 0 0 2px rgba(34,197,94,.3); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,.1); }
}

/* ── SIGNUP CHART FIX ─────────────────────────────────────────────────────── */
.signup-bar-wrap {
  display: flex; align-items: flex-end; gap: 3px;
  height: 100px; overflow-x: auto; padding-bottom: 4px;
  padding-top: 20px; /* room for numbers above tallest bar */
}
.signup-bar-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; min-width: 22px; position: relative;
}
.signup-bar-num {
  font-size: .6rem; color: var(--muted); text-align: center;
  position: absolute; top: -18px; width: 100%;
}
.signup-bar-fill {
  width: 16px; background: var(--accent);
  border-radius: 3px 3px 0 0; min-height: 3px;
  transition: height .3s;
}
.signup-bar-day {
  font-size: .5rem; color: var(--muted);
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* ── FOOTER EMAIL ─────────────────────────────────────────────────────────── */
.footer-email {
  color: var(--accent);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.footer-email:hover { opacity: .75; text-decoration: underline; }

/* ── Leaderboard avatar image ─────────────────────────────────────────── */
.lb-avatar-img { width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0; }
/* ── Global hidden utility ───────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── SHARE MODAL ──────────────────────────────────────────────────────────── */
.share-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 600px) {
  .share-overlay { align-items: center; }
}
.share-modal {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 32px;
  width: 100%; max-width: 480px;
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
  animation: shareSlideUp .22s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 600px) {
  .share-modal {
    border-radius: 20px;
    padding: 24px 28px 28px;
    animation: shareScaleIn .18s cubic-bezier(.22,1,.36,1);
  }
}
@keyframes shareSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes shareScaleIn {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.share-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.share-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.share-close {
  background: var(--bg); border: none; border-radius: 50%;
  width: 30px; height: 30px; font-size: .9rem; cursor: pointer;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.share-close:hover { background: var(--border); }
.share-icons {
  display: flex; gap: 6px; justify-content: space-around;
  margin-bottom: 20px; flex-wrap: wrap;
}
.share-icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; cursor: pointer; background: none; border: none;
  padding: 6px 4px; border-radius: 10px; transition: background .15s;
  min-width: 64px;
}
.share-icon-btn:hover { background: var(--bg); }
.share-icon-circle {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: opacity .15s;
}
.share-icon-btn:hover .share-icon-circle { opacity: .88; }
.share-icon-label {
  font-size: .72rem; font-weight: 600; color: var(--text);
  text-align: center; line-height: 1.2;
}
.share-url-row {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 6px 6px 6px 12px;
}
.share-url-input {
  flex: 1; border: none; background: none; font-size: .8rem;
  color: var(--muted); font-family: var(--mono); outline: none;
  min-width: 0; direction: ltr;
}
.share-url-copy {
  background: var(--accent); color: #fff; border: none; border-radius: 7px;
  padding: 6px 14px; font-size: .82rem; font-weight: 700; cursor: pointer;
  flex-shrink: 0; transition: background .15s;
}
.share-url-copy:hover { background: var(--accent-dark, #0a8a5f); }

.footer-guide{font-size:.82rem;color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1.5px dashed var(--accent);padding-bottom:1px}
.footer-guide:hover{opacity:.75}