/* ============================================================
   संशोधन वार्ता v2 — modern responsive theme
   Light + dark, glass header, hero slider, animated cards
   ============================================================ */

:root{
  --bg:#F1F4F3; --surface:#FFFFFF; --surface2:#E9EFED;
  --ink:#18211F; --muted:#5E6B67; --line:#DBE2DF;
  --accent:#0E6E63; --accent2:#0A5049; --gold:#EFA83C; --gold-ink:#3B2A08;
  --danger:#B0483A;
  --shadow:0 8px 28px rgba(14,110,99,.12);
  --r:16px;
  --hero-grad:linear-gradient(135deg,#0E6E63 0%,#0A4B54 55%,#123B4C 100%);
}
[data-theme="dark"]{
  --bg:#101615; --surface:#1A2321; --surface2:#22302D;
  --ink:#E8EEEC; --muted:#93A29D; --line:#2C3A36;
  --accent:#3FC1AE; --accent2:#2E9C8C; --gold:#EFA83C;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --hero-grad:linear-gradient(135deg,#0B3D37 0%,#0E2F38 55%,#101E29 100%);
}

*{box-sizing:border-box; margin:0}
html{scroll-behavior:smooth}
::selection{background:var(--gold); color:#3B2A08}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px; border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
body{background:var(--bg); color:var(--ink);
     background-image:radial-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
     background-size:26px 26px;
     font:400 16px/1.75 "Mukta",sans-serif;
     transition:background .3s,color .3s;}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
.dev{font-family:"Tiro Devanagari Marathi",serif; font-weight:400}

/* ---------------- scroll progress ---------------- */
#scrollbar{position:fixed; top:0; left:0; height:3px; width:0%;
     background:linear-gradient(90deg,var(--accent),var(--gold)); z-index:60;
     transition:width .1s linear}

/* ---------------- header ---------------- */
.hdr{position:sticky; top:0; z-index:40;
     background:var(--surface);
     background:color-mix(in srgb, var(--surface) 82%, transparent);
     backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
     border-bottom:1px solid var(--line);}
.hdr-in{max-width:1120px; margin:0 auto; padding:12px 20px;
     display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.logo{font:400 27px/1 "Tiro Devanagari Marathi",serif; white-space:nowrap;
     background:linear-gradient(100deg,var(--accent) 30%,var(--gold) 90%);
     -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
     filter:drop-shadow(0 1px 0 rgba(0,0,0,.06))}
.logo span{-webkit-text-fill-color:currentColor; color:var(--ink)}
.hdr form.search{display:flex; gap:6px; flex:1; min-width:180px; max-width:380px; margin-left:auto}
.hdr input[type=text]{flex:1; padding:8px 14px; border:1px solid var(--line);
     border-radius:999px; font:inherit; background:var(--surface); color:var(--ink); min-width:0}
.hdr input[type=text]:focus{outline:2px solid var(--accent); outline-offset:-1px}
.hdr .sbtn{border:0; border-radius:999px; padding:8px 16px;
     background:var(--gold); color:var(--gold-ink); font-weight:600}
.iconb{width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
     background:var(--surface); color:var(--ink); font-size:16px;
     display:flex; align-items:center; justify-content:center; transition:.18s}
.iconb:hover{border-color:var(--accent); transform:translateY(-1px)}
.userpill{display:flex; align-items:center; gap:8px; padding:5px 14px 5px 6px;
     border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:14.5px}
.avatar{width:28px; height:28px; border-radius:50%; background:var(--accent);
     color:#fff; display:flex; align-items:center; justify-content:center;
     font-weight:600; font-size:14px}

/* ---------------- hero slider ---------------- */
.hero{max-width:1120px; margin:20px auto 0; padding:0 20px}
.slider{position:relative; border-radius:24px; overflow:hidden;
     background:var(--hero-grad); color:#fff; box-shadow:var(--shadow);
     min-height:240px; isolation:isolate}
.slider::before{content:""; position:absolute; inset:-40%; z-index:-1;
     background:
       radial-gradient(38% 55% at 22% 28%, rgba(239,168,60,.34), transparent 68%),
       radial-gradient(45% 60% at 80% 72%, rgba(63,193,174,.30), transparent 70%),
       radial-gradient(30% 45% at 62% 18%, rgba(255,255,255,.10), transparent 65%);
     animation:aurora 16s ease-in-out infinite alternate; filter:blur(6px)}
@keyframes aurora{
  0%{transform:translate(-3%,-2%) rotate(0deg) scale(1)}
  100%{transform:translate(3%,3%) rotate(6deg) scale(1.12)}}
.slider::after{content:""; position:absolute; inset:0; pointer-events:none;
     background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.08) 47%,transparent 62%);
     background-size:240% 100%; animation:shine 7s linear infinite}
@keyframes shine{0%{background-position:130% 0}100%{background-position:-110% 0}}
.slide{position:absolute; inset:0; padding:34px 40px 58px;
     display:flex; flex-direction:column; justify-content:center; gap:12px;
     opacity:0; transform:translateX(42px); filter:blur(5px);
     transition:opacity .65s,transform .65s,filter .65s;
     pointer-events:none;}
.slide.on{opacity:1; transform:none; filter:none; pointer-events:auto; position:relative}
.slide.on .tag{animation:pop .5s .25s both}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.94)} to{opacity:1}}
.slide .tag{align-self:flex-start; background:rgba(255,255,255,.16);
     border:1px solid rgba(255,255,255,.28); padding:3px 14px;
     border-radius:999px; font-size:13.5px; letter-spacing:.3px}
.slide h2{font:400 clamp(20px,3.2vw,30px)/1.4 "Tiro Devanagari Marathi",serif; max-width:820px}
.slide p{opacity:.85; font-size:15px; max-width:760px;
     display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.slide a.go{align-self:flex-start; margin-top:4px; background:var(--gold);
     color:var(--gold-ink); font-weight:600; padding:8px 20px; border-radius:999px;
     transition:transform .18s}
.slide a.go:hover{transform:translateY(-2px)}
.dots{position:absolute; bottom:18px; left:40px; display:flex; gap:8px; z-index:2}
.dots button{width:9px; height:9px; border-radius:50%; border:0;
     background:rgba(255,255,255,.35); transition:.25s}
.dots button.on{background:var(--gold); width:26px; border-radius:999px}

/* ---------------- toolbar ---------------- */
.toolbar{max-width:1120px; margin:22px auto 4px; padding:0 20px;
     display:flex; flex-wrap:wrap; gap:9px; align-items:center;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 16px;
     border:1px solid var(--line); border-radius:999px; background:var(--surface);
     font-size:14.5px; color:var(--ink); transition:.18s; cursor:pointer}
.chip:hover{border-color:var(--accent); transform:translateY(-1px)}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.chip.gold{border-color:var(--gold)}
.trend{max-width:1120px; margin:8px auto 0; padding:0 20px;
     display:flex; gap:8px; align-items:center; flex-wrap:wrap;
     color:var(--muted); font-size:14px}
.trend a{background:var(--surface2); border-radius:8px; padding:2px 12px;
     font-size:13.5px; transition:.18s}
.trend a:hover{background:var(--accent); color:#fff}

/* ---------------- grid + cards ---------------- */
.grid{max-width:1120px; margin:18px auto 30px; padding:0 20px;
     display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px;}
.card{--edge:var(--accent);
     position:relative; overflow:hidden;
     background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
     padding:22px 22px 20px; display:flex; flex-direction:column; gap:10px;
     opacity:0; transform:translateY(26px) scale(.985);
     transition:opacity .55s,transform .55s cubic-bezier(.22,.9,.3,1.2),
                box-shadow .25s,border-color .25s;}
.card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px;
     background:linear-gradient(90deg,var(--edge),color-mix(in srgb,var(--edge) 40%,var(--gold)));
     opacity:.9}
.card::after{content:""; position:absolute; inset:0; pointer-events:none;
     background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
     transform:translateX(-120%); transition:transform .7s ease}
.card:hover::after{transform:translateX(120%)}
[data-theme="dark"] .card::after{background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.06) 50%,transparent 58%)}
.card.in{opacity:1; transform:none}
.card:hover{box-shadow:var(--shadow); border-color:var(--edge); transform:translateY(-5px)}
.card.speaking{outline:2px solid var(--gold); outline-offset:2px}
.meta{display:flex; justify-content:space-between; align-items:center;
     font-size:13px; color:var(--muted)}
.badge{font-size:12.5px; font-weight:600; padding:2px 10px; border-radius:7px; color:#fff}
.fresh{margin-left:6px; font-size:11.5px; font-weight:600; letter-spacing:.4px;
     background:var(--gold); color:#3B2A08; padding:1px 9px; border-radius:999px;
     animation:freshpulse 2.2s ease-in-out infinite}
@keyframes freshpulse{0%,100%{box-shadow:0 0 0 0 rgba(239,168,60,.55)}
     55%{box-shadow:0 0 0 7px rgba(239,168,60,0)}}
.card h3{font:400 20.5px/1.45 "Tiro Devanagari Marathi",serif}
.card p{color:var(--muted); font-size:15px;
     display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.card .src{font-size:13px; color:var(--muted); display:flex; gap:10px; align-items:center}
.card .src .views{margin-left:auto}
.actions{margin-top:auto; display:flex; align-items:center; gap:8px}
.actions .more{font-weight:600; color:var(--accent); font-size:14.5px; margin-right:auto}
.actions .more:hover{text-decoration:underline}
.abtn{width:36px; height:36px; border:1px solid var(--line); border-radius:50%;
     background:var(--surface); color:var(--ink); font-size:15px;
     display:flex; align-items:center; justify-content:center; transition:.18s}
.abtn:hover{border-color:var(--accent); transform:scale(1.08)}
.abtn.active{background:var(--accent); border-color:var(--accent); color:#fff}
.abtn.saved{background:var(--gold); border-color:var(--gold); color:var(--gold-ink)}

/* ---------------- FAB + fetch modal ---------------- */
.fab{position:fixed; right:22px; bottom:22px; z-index:45;
     display:flex; align-items:center; gap:10px; padding:13px 22px;
     border:0; border-radius:999px; background:var(--accent); color:#fff;
     font-weight:600; font-size:15.5px; box-shadow:var(--shadow); transition:.2s}
.fab:hover{background:var(--accent2); transform:translateY(-2px)}
.fab::after{content:""; position:absolute; inset:-4px; border-radius:inherit; z-index:-1;
     background:linear-gradient(90deg,var(--accent),var(--gold));
     filter:blur(12px); opacity:.45}
.fab{position:fixed}
#toTop{position:fixed; right:26px; bottom:88px; z-index:44;
     width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
     background:var(--surface); color:var(--accent); font-size:18px;
     box-shadow:var(--shadow); opacity:0; pointer-events:none;
     transform:translateY(14px); transition:.3s}
#toTop.show{opacity:1; pointer-events:auto; transform:none}
#toTop:hover{background:var(--accent); color:#fff}
.modal-bg{position:fixed; inset:0; background:rgba(10,20,18,.55);
     backdrop-filter:blur(3px); z-index:60; display:flex;
     align-items:center; justify-content:center; padding:20px;
     opacity:0; pointer-events:none; transition:opacity .28s}
.modal-bg.show{opacity:1; pointer-events:auto}
.modal{background:var(--surface); color:var(--ink); border-radius:20px;
     width:min(480px,100%); padding:28px 30px;
     transform:translateY(24px) scale(.97); transition:transform .28s}
.modal-bg.show .modal{transform:none}
.modal h3{font:400 23px "Tiro Devanagari Marathi",serif; color:var(--accent); margin-bottom:4px}
.modal .sub{color:var(--muted); font-size:14px; margin-bottom:16px}
.bar{height:14px; border-radius:999px; background:var(--surface2); overflow:hidden}
.bar i{display:block; height:100%; width:0%;
     background:linear-gradient(90deg,var(--accent),var(--gold));
     background-size:200% 100%;
     border-radius:999px; transition:width .45s ease; position:relative; overflow:hidden}
.bar i::after{content:""; position:absolute; inset:0;
     background:repeating-linear-gradient(60deg,
       rgba(255,255,255,.22) 0 10px, transparent 10px 20px);
     animation:stripes 1s linear infinite}
@keyframes stripes{to{transform:translateX(28px)}}
.pct{margin-top:8px; display:flex; justify-content:space-between;
     font-size:14px; color:var(--muted)}
.flog{margin-top:14px; max-height:150px; overflow:auto; font-size:13.5px;
     border-top:1px solid var(--line); padding-top:10px; color:var(--muted)}
.flog div{padding:2px 0; animation:fadein .3s}
.flog .ok{color:var(--accent)} .flog .err{color:var(--danger)}
.modal .close{margin-top:16px; width:100%; padding:10px; border:0;
     border-radius:12px; background:var(--accent); color:#fff; font-weight:600}
@keyframes fadein{from{opacity:0; transform:translateY(4px)} to{opacity:1}}

/* ---------------- auth pages ---------------- */
.auth-wrap{min-height:calc(100vh - 70px); display:flex; align-items:center;
     justify-content:center; padding:30px 20px}
.auth{background:var(--surface); border:1px solid var(--line); border-radius:22px;
     box-shadow:var(--shadow); width:min(420px,100%); padding:34px 34px 30px;
     animation:rise .45s ease}
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1}}
.auth h2{font:400 28px "Tiro Devanagari Marathi",serif; color:var(--accent); margin-bottom:2px}
.auth .sub{color:var(--muted); font-size:14.5px; margin-bottom:20px}
.auth label{display:block; font-size:14px; color:var(--muted); margin:12px 0 4px}
.auth input{width:100%; padding:10px 14px; border:1px solid var(--line);
     border-radius:12px; font:inherit; background:var(--bg); color:var(--ink)}
.auth input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.auth .btn{width:100%; margin-top:20px; padding:12px; border:0; border-radius:12px;
     background:var(--accent); color:#fff; font-weight:600; font-size:16px; transition:.18s}
.auth .btn:hover{background:var(--accent2)}
.auth .alt{margin-top:16px; text-align:center; font-size:14.5px; color:var(--muted)}
.auth .alt a{color:var(--accent); font-weight:600}
.alert{background:#FBEAE7; color:#8C3325; border:1px solid #EFC4BC;
     border-radius:12px; padding:10px 14px; font-size:14.5px; margin-bottom:6px}
[data-theme="dark"] .alert{background:#3A211D; color:#F0B3A8; border-color:#5A2F28}
.alert.good{background:#E5F4EF; color:#0A5049; border-color:#BFE3D8}
[data-theme="dark"] .alert.good{background:#123129; color:#8FDCC8; border-color:#1E4A3E}

/* interests picker */
.ints{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.ints input{display:none}
.ints span{display:inline-block; padding:5px 16px; border:1px solid var(--line);
     border-radius:999px; font-size:14.5px; transition:.18s; cursor:pointer}
.ints input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------------- misc ---------------- */
.empty{max-width:1120px; margin:70px auto; text-align:center; color:var(--muted)}
.empty a{color:var(--accent); font-weight:600}
.pager{max-width:1120px; margin:0 auto 90px; padding:0 20px; display:flex; gap:8px; flex-wrap:wrap}
.pager a{padding:6px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.pager a.on{background:var(--accent); color:#fff; border-color:var(--accent)}
footer{border-top:1px solid var(--line); padding:18px 20px 30px; text-align:center;
     color:var(--muted); font-size:13.5px}
footer a{color:var(--accent)}
#toast{position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(90px);
     background:var(--ink); color:var(--bg); padding:10px 24px; border-radius:999px;
     font-size:14.5px; opacity:0; transition:.35s; z-index:70; pointer-events:none;
     box-shadow:var(--shadow)}
#toast.show{transform:translateX(-50%); opacity:1}

@media (max-width:680px){
  .logo{font-size:22px}
  .hdr form.search{order:9; max-width:none; width:100%}
  .slide{padding:26px 22px 54px}
  .dots{left:22px}
  .fab{right:14px; bottom:14px; padding:12px 18px; font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  .card{opacity:1; transform:none}
  .card::after,.slider::before,.slider::after{display:none}
  html{scroll-behavior:auto}
}