/* =========================================================
   JANASATHI — stylesheet v3
   Palette and motifs pulled directly from the JANASATHI mark:
   light leaf-green + warm orange, on clean airy paper, with
   soft gradient blobs and smooth wave dividers instead of a
   heavy carved border — a modern, brand-led NGO site.
   ========================================================= */

:root{
  /* ---- color tokens (sampled from the logo) ---- */
  --ink:          #2B2B35;   /* logo wordmark charcoal */
  --ink-soft:     #55555F;
  --paper:        #F7FAF2;   /* airy, faint green-white */
  --paper-deep:   #EAF3DE;   /* light green card surface */
  --cream:        #FFFFFF;
  --green:        #7FBF3F;   /* primary — logo leaf green */
  --green-light:  #A7D96C;
  --green-deep:   #3F7A22;   /* darker green for text/hover */
  --green-ink:    #1F4A12;   /* near-black green for dark sections */
  --orange:       #F0821E;   /* logo accent orange */
  --orange-deep:  #C9670F;
  --line:         rgba(43,43,53,.12);

  /* ---- type ---- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-grotesk: "Space Grotesk", "Work Sans", sans-serif;
  --font-body:    "Work Sans", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", monospace;

  --radius: 14px;
  --wrap: 1180px;

  /* legacy aliases so nothing silently breaks */
  --clay: var(--orange);
  --clay-deep: var(--orange-deep);
  --forest: var(--green-ink);
  --forest-soft: var(--ink-soft);
  --moss: var(--green);
  --turmeric: var(--orange);
  --vermillion: var(--orange);
  --vermillion-d: var(--orange-deep);
  --emerald: var(--green);
  --emerald-d: var(--green-deep);
  --gold: var(--orange);
  --gold-d: var(--orange-deep);
  --indigo: #3E7CB1;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--green-deep);
  font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--orange); display:inline-block; border-radius:2px; }
button, .btn{
  font-family:var(--font-grotesk);
  font-weight:700;
  cursor:pointer;
  border:none;
  border-radius:100px;
}
:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* soft gradient blob backdrop, used behind hero / feature sections */
.blob{
  position:absolute; border-radius:50%; filter:blur(50px); z-index:0; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, var(--green-light), var(--green) 70%);
  opacity:.55;
}
.blob.orange{ background:radial-gradient(circle at 30% 30%, #FBBF77, var(--orange) 70%); }

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.94); }
[data-reveal="scale"].in-view{ transform:scale(1); }

/* =========================================================
   Signature motif: smooth modern wave divider (replaces the
   old carved border). Colour set by the --wave-fill variable.
   ========================================================= */
.wave-divider{
  --wave-fill: var(--green);
  display:block; width:100%; height:56px; line-height:0;
  background:var(--paper);
}
.wave-divider svg{ width:100%; height:100%; display:block; }
.wave-divider path{ fill:var(--wave-fill); }
.wave-divider.flip{ transform:scaleY(-1); }
.wave-divider.on-dark{ background:var(--green-ink); }
.wave-divider.on-paper-deep{ background:var(--paper-deep); }

/* =========================================================
   Marquee ticker
   ========================================================= */
.ticker{
  background:var(--green-ink); color:var(--cream); overflow:hidden; white-space:nowrap;
}
.ticker-track{
  display:inline-flex; align-items:center; gap:0;
  animation: ticker-scroll 34s linear infinite;
  padding:12px 0;
}
.ticker-track span{
  font-family:var(--font-grotesk); font-weight:700; font-size:.85rem; letter-spacing:.04em;
  text-transform:uppercase; padding:0 22px; display:inline-flex; align-items:center; gap:22px;
}
.ticker-track span::after{ content:"●"; color:var(--orange); font-size:.5rem; }
@keyframes ticker-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   Header
   ========================================================= */
.site-header{ background:rgba(247,250,242,.92); backdrop-filter:blur(8px); position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img.logo-img{ height:50px; width:auto; max-width:190px; object-fit:contain; }
.brand .logo-fallback{
  height:46px; width:46px; border-radius:50%; background:var(--green); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; flex:none;
}
.brand-text .name{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink); letter-spacing:-.01em; }
.brand-text .tag{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; color:var(--green-deep); text-transform:uppercase; }

nav.main-nav{ display:flex; align-items:center; gap:26px; }
nav.main-nav a{
  font-family:var(--font-grotesk); font-size:.92rem; font-weight:600; color:var(--ink);
  padding:6px 2px; position:relative;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2.5px; background:var(--orange);
  border-radius:3px; transition:right .2s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ right:0; }
nav.main-nav a.active{ color:var(--green-deep); }
.nav-donate{
  background:var(--green); color:var(--cream) !important; padding:10px 22px !important;
  border-radius:30px; font-weight:800 !important; box-shadow:0 6px 16px rgba(63,122,34,.3);
}
.nav-donate::after{ display:none; }
.nav-donate:hover{ background:var(--green-deep); }
.nav-toggle{ display:none; background:none; border:none; font-size:1.7rem; color:var(--ink); }

@media (max-width: 860px){
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--cream);
    flex-direction:column; align-items:flex-start; padding:16px 24px 22px; gap:16px;
    border-bottom:1px solid var(--line); display:none;
  }
  nav.main-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* =========================================================
   Hero — collage + rotating seal
   ========================================================= */
.hero{ background:var(--paper); padding:64px 0 70px; position:relative; overflow:hidden; }
.hero .blob.b1{ width:460px; height:460px; top:-160px; right:-120px; }
.hero .blob.b2{ width:280px; height:280px; bottom:-100px; left:-80px; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; position:relative; z-index:1; }
.hero-eyebrow-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.hero h1{ font-size:clamp(2.5rem, 5.2vw, 4.1rem); margin-bottom:.28em; font-weight:800; }
.hero h1 em{ font-style:italic; color:var(--green-deep); font-weight:800; }
.hero p.lede{ font-size:1.13rem; color:var(--ink-soft); max-width:48ch; font-weight:500; }
.hero-ctas{ display:flex; gap:16px; margin-top:26px; flex-wrap:wrap; }

.btn-primary{
  background:var(--green); color:var(--cream); padding:15px 30px; font-size:.95rem;
  box-shadow:0 10px 24px rgba(63,122,34,.32); transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(63,122,34,.4); background:var(--green-deep); }
.btn-outline{
  background:var(--cream); color:var(--ink); padding:14px 28px; font-size:.95rem;
  border:2px solid var(--ink); transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-outline:hover{ transform:translateY(-3px); background:var(--ink); color:var(--cream); }

/* collage */
.hero-collage{ position:relative; height:440px; }
.collage-frame{
  position:absolute; border-radius:22px; overflow:hidden;
  background:var(--green); box-shadow:0 30px 60px rgba(43,43,53,.18);
}
.collage-frame.main{ width:78%; height:80%; top:5%; left:4%; z-index:3; }
.collage-frame.main > div{ width:100%; height:100%; }
.collage-frame.main img{ width:100%; height:100%; object-fit:cover; }
.collage-frame.main .placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--cream); font-family:var(--font-mono); font-size:.78rem; padding:12px;
  background:linear-gradient(135deg, var(--green), var(--green-deep));
}
.collage-tag{
  position:absolute; z-index:4; background:var(--cream); color:var(--ink); font-family:var(--font-grotesk);
  font-weight:800; font-size:.82rem; padding:10px 18px; border-radius:30px; box-shadow:0 12px 26px rgba(43,43,53,.16);
}
.collage-tag.tag-1{ top:1%; right:2%; background:var(--orange); color:var(--cream); }
.collage-tag.tag-2{ bottom:4%; left:0%; }

.seal{ position:absolute; right:-4%; bottom:-6%; z-index:5; width:158px; height:158px; animation: spin 26s linear infinite; }
.seal-core{
  position:absolute; inset:36px; background:var(--green-ink); border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--cream); font-family:var(--font-grotesk); font-weight:800; font-size:.6rem;
  line-height:1.15; padding:8px; border:4px solid var(--paper);
}
@keyframes spin{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }

@media (max-width:980px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-collage{ height:360px; margin-top:20px; }
}

/* legal strip */
.legal-strip{
  background:var(--green-ink); color:var(--paper); font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.04em; text-align:center; padding:8px 16px;
}
.legal-strip strong{ color:var(--orange); }

/* =========================================================
   Impact stats — big editorial numbers on dark green
   ========================================================= */
.stats{ background:var(--green-ink); padding:64px 0 50px; position:relative; }
.stats .section-head .eyebrow{ color:var(--orange); }
.stats .section-head .eyebrow::before{ background:var(--orange); }
.stats .section-head h2{ color:var(--cream); }
.stats .section-head p{ color:rgba(247,250,242,.65); }
.stats .wrap > .stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:20px; }
.stat{ padding:22px 18px; border-left:1px solid rgba(247,250,242,.14); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat .value{ font-family:var(--font-display); font-size:clamp(2rem,4.2vw,3.1rem); color:var(--green-light); font-weight:800; line-height:1; }
.stat .label{ font-family:var(--font-grotesk); font-size:.8rem; letter-spacing:.02em; text-transform:uppercase; color:rgba(247,250,242,.7); margin-top:8px; font-weight:600; }
@media (max-width:820px){
  .stats .wrap > .stats-row{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-left:1px solid rgba(247,250,242,.14); }
  .stat:nth-child(odd){ border-left:none; }
}

/* =========================================================
   Section shell
   ========================================================= */
section.section{ padding:76px 0; }
section.section.tight{ padding:52px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:.3em; }
.section-head p{ color:var(--ink-soft); font-size:1.02rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }

/* =========================================================
   Program cards — soft, rounded, colour-tinted
   ========================================================= */
.program-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:prog; }
@media (max-width:980px){ .program-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .program-grid{ grid-template-columns:1fr; } }

.program-card{
  counter-increment:prog;
  background:var(--cream); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:transform .22s ease, box-shadow .22s ease;
  box-shadow:0 8px 24px rgba(43,43,53,.08);
}
.program-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(43,43,53,.16); }

.program-card::before{
  content:counter(prog,decimal-leading-zero);
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-grotesk); font-weight:800; font-size:.76rem;
  background:rgba(255,255,255,.85); color:var(--ink); padding:5px 10px; border-radius:20px;
  backdrop-filter:blur(4px);
}
.program-grid .program-card:nth-child(4n+1) .thumb{ background:linear-gradient(135deg, var(--green-light), var(--green)); }
.program-grid .program-card:nth-child(4n+2) .thumb{ background:linear-gradient(135deg, #FBBF77, var(--orange)); }
.program-grid .program-card:nth-child(4n+3) .thumb{ background:linear-gradient(135deg, var(--green), var(--green-deep)); }
.program-grid .program-card:nth-child(4n+4) .thumb{ background:linear-gradient(135deg, var(--orange), var(--orange-deep)); }

.program-card .thumb{
  aspect-ratio:4/3; background-position:center; background-size:cover;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.program-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.program-card .thumb .icon{ font-size:2.6rem; filter:drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.program-card .body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.program-card h3{ font-size:1.28rem; margin-bottom:.35em; }
.program-card p{ color:var(--ink-soft); font-size:.93rem; flex:1; }
.program-card .stat-line{
  font-family:var(--font-mono); font-size:.7rem; color:var(--green-deep); text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:12px; font-weight:700;
}
.program-card .read-more{ font-weight:800; color:var(--ink); font-size:.88rem; font-family:var(--font-grotesk); }
.program-card .read-more::after{ content:" →"; color:var(--orange); }

/* =========================================================
   Gallery — soft rounded scroller
   ========================================================= */
.gallery-scroll{ display:flex; gap:20px; overflow-x:auto; padding:14px 6px 26px; scroll-snap-type:x mandatory; }
.gallery-scroll::-webkit-scrollbar{ height:8px; }
.gallery-scroll::-webkit-scrollbar-thumb{ background:var(--green); border-radius:8px; }
.gallery-item{
  flex:none; width:270px; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  scroll-snap-align:start; position:relative; background:var(--paper-deep);
  box-shadow:0 10px 26px rgba(43,43,53,.12); transition:transform .2s ease;
}
.gallery-item:hover{ transform:translateY(-6px) scale(1.02); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:9px 12px;
  background:linear-gradient(0deg, rgba(31,74,18,.85), transparent);
  color:var(--cream); font-size:.78rem; font-family:var(--font-mono);
}
.gallery-empty{ font-family:var(--font-mono); font-size:.85rem; color:var(--ink-soft); padding:22px; border:2px dashed var(--line); border-radius:var(--radius); }

/* =========================================================
   About — pull quote feel
   ========================================================= */
.about-block{ max-width:820px; }
.about-block .big-quote{
  font-family:var(--font-display); font-style:italic; font-weight:600; font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--green-deep); border-left:5px solid var(--orange); padding-left:22px; margin:0 0 22px;
}

/* =========================================================
   Donate — full bleed green gradient
   ========================================================= */
.donate{
  background:linear-gradient(135deg, var(--green-deep), var(--green-ink));
  color:var(--cream); border-radius:28px; padding:54px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
  position:relative; overflow:hidden;
}
.donate::after{
  content:""; position:absolute; right:-60px; bottom:-80px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(240,130,30,.35), transparent 70%); pointer-events:none;
}
.donate .eyebrow{ color:var(--orange); }
.donate .eyebrow::before{ background:var(--orange); }
.donate h2{ color:var(--cream); }
.donate p{ color:#E4F0D8; }
.donate-panel{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:18px; padding:26px; position:relative; z-index:2; backdrop-filter:blur(6px);
}
.donate-panel dl{ margin:0; }
.donate-panel dt{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--orange); margin-top:14px; }
.donate-panel dt:first-child{ margin-top:0; }
.donate-panel dd{ margin:2px 0 0; font-size:.95rem; }
.donate .btn-primary{ background:var(--orange); box-shadow:0 10px 24px rgba(240,130,30,.4); }
.donate .btn-primary:hover{ background:var(--orange-deep); }
@media (max-width:820px){ .donate{ grid-template-columns:1fr; padding:36px; } }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.info-card{ background:var(--green-ink); color:var(--paper); border-radius:22px; padding:30px; }
.info-card .row{ display:flex; gap:12px; margin-bottom:16px; font-size:.94rem; }
.info-card .row .k{ font-family:var(--font-mono); color:var(--orange); text-transform:uppercase; font-size:.68rem; letter-spacing:.05em; width:88px; flex:none; padding-top:3px; }
.info-card a:hover{ color:var(--green-light); }

form.contact-form{ display:flex; flex-direction:column; gap:15px; }
.field label{ display:block; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; border:1.5px solid var(--line); background:var(--cream);
  border-radius:12px; padding:12px 14px; font-family:var(--font-body); font-size:.95rem; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--green); }
.form-note{ font-size:.8rem; color:var(--ink-soft); }
.form-status{ font-size:.85rem; padding:10px 12px; border-radius:10px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#E4F2DA; color:var(--green-deep); border:1px solid var(--green); }
.form-status.err{ background:#FBE3CE; color:var(--orange-deep); border:1px solid var(--orange); }

/* =========================================================
   Footer
   ========================================================= */
footer.site-footer{ background:var(--green-ink); color:#D6E6CB; padding:0 0 0; margin-top:20px; overflow:hidden; }
.footer-wordmark{
  font-family:var(--font-display); font-weight:800; color:rgba(247,250,242,.07);
  font-size:clamp(3.4rem,11vw,8rem); white-space:nowrap; padding:10px 0 0; letter-spacing:-.02em;
  border-bottom:1px solid rgba(255,255,255,.08);
}
footer .wrap.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:34px; padding-top:40px; }
footer h4{ color:var(--cream); font-size:1rem; font-family:var(--font-grotesk); }
footer a{ color:#D6E6CB; }
footer a:hover{ color:var(--orange); }
footer .flist{ display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
footer .bottom{
  margin-top:32px; padding:18px 0 26px; border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono); font-size:.72rem; color:#9BB68A; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
@media (max-width:760px){ footer .wrap.footer-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Generic page header (programs list / program detail / admin)
   ========================================================= */
.page-hero{ background:var(--green-ink); color:var(--cream); padding:60px 0 50px; position:relative; overflow:hidden; }
.page-hero .blob{ opacity:.3; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color:var(--cream); font-size:clamp(2.2rem,4.6vw,3.4rem); }
.page-hero p{ color:rgba(247,250,242,.72); }
.page-hero .eyebrow{ color:var(--orange); margin-bottom:10px; display:inline-flex; }
.page-hero .eyebrow::before{ background:var(--orange); }
.breadcrumb{ font-family:var(--font-mono); font-size:.78rem; color:rgba(247,250,242,.6); margin-bottom:16px; }
.breadcrumb a{ color:var(--orange); }

/* program detail */
.story-chapter{ margin-bottom:36px; padding-bottom:36px; border-bottom:2px dashed var(--line); }
.story-chapter:last-child{ border-bottom:none; }
.story-chapter h3{ font-size:1.4rem; }
.story-chapter .num{
  font-family:var(--font-grotesk); color:var(--cream); background:var(--green); font-weight:800;
  font-size:.78rem; display:inline-block; padding:4px 12px; border-radius:20px; margin-bottom:10px;
}
.detail-media{ aspect-ratio:16/9; border-radius:22px; overflow:hidden; background:var(--green); margin-bottom:34px; box-shadow:0 20px 44px rgba(43,43,53,.16); }
.detail-media img{ width:100%; height:100%; object-fit:cover; }
.cta-block{ background:var(--green-ink); color:var(--cream); border-radius:22px; padding:34px; margin-top:14px; text-align:center; }
.cta-block h3{ color:var(--cream); }
.cta-block p{ color:rgba(247,250,242,.75); }

/* =========================================================
   Admin (kept functional & clean, matched to new palette)
   ========================================================= */
.admin-shell{ min-height:100vh; background:var(--paper); }
.admin-login{ max-width:380px; margin:80px auto; background:var(--cream); border-radius:20px; padding:32px; box-shadow:0 20px 50px rgba(43,43,53,.14); }
.admin-login h1{ font-size:1.4rem; }
.admin-bar{ background:var(--green-ink); color:var(--cream); }
.admin-bar .wrap{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.admin-bar a, .admin-bar button{ color:var(--cream); background:transparent; font-size:.85rem; font-family:var(--font-grotesk); }
.admin-bar .logout{ border:1px solid rgba(255,255,255,.35); padding:7px 14px; border-radius:20px; }
.admin-tabs{ display:flex; gap:6px; border-bottom:2px solid var(--line); margin-bottom:28px; flex-wrap:wrap; }
.admin-tabs button{ background:transparent; padding:11px 16px; font-size:.9rem; color:var(--ink-soft); border-bottom:3px solid transparent; font-family:var(--font-grotesk); font-weight:700; border-radius:0; }
.admin-tabs button.active{ color:var(--green-deep); border-bottom-color:var(--green); }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }
.admin-card{ background:var(--cream); border-radius:18px; padding:22px; margin-bottom:18px; box-shadow:0 4px 18px rgba(43,43,53,.06); }
.admin-card h3{ font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; }
.admin-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .admin-grid-2{ grid-template-columns:1fr; } }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.chip{ font-family:var(--font-mono); font-size:.72rem; background:var(--paper-deep); padding:5px 10px; border-radius:20px; display:flex; align-items:center; gap:6px; }
.chip button{ background:none; color:var(--orange-deep); font-weight:700; }
.btn-sm{ padding:9px 16px; font-size:.82rem; background:var(--green); color:var(--cream); border-radius:20px; }
.btn-sm:hover{ background:var(--green-deep); }
.btn-danger{ background:transparent; color:var(--orange-deep); border:1.5px solid var(--orange-deep); padding:8px 15px; font-size:.82rem; border-radius:20px; }
.btn-danger:hover{ background:var(--orange-deep); color:var(--cream); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); padding:8px 15px; font-size:.82rem; border-radius:20px; }
.thumb-upload{
  border:2px dashed var(--line); border-radius:16px; padding:16px; text-align:center; cursor:pointer;
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); background:var(--paper-deep);
}
.thumb-upload img{ max-height:110px; margin:0 auto 8px; border-radius:10px; }
.admin-note{ background:#FBE7CB; border-radius:14px; padding:14px 18px; font-size:.85rem; color:var(--orange-deep); margin-bottom:22px; }
.chapter-block{ border:1.5px solid var(--line); border-radius:14px; padding:14px; margin-top:10px; background:var(--paper); }
.chapter-block .field{ margin-bottom:10px; }
.gallery-admin-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:12px; margin-top:12px; }
.gallery-admin-item{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:1/1; background:var(--paper-deep); }
.gallery-admin-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-admin-item button{
  position:absolute; top:6px; right:6px; background:rgba(43,43,53,.75); color:#fff; border-radius:50%;
  width:24px; height:24px; font-size:.8rem; line-height:1;
}
table.admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.admin-table th, table.admin-table td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); }
table.admin-table th{ font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; color:var(--ink-soft); }

/* utility */
.text-center{ text-align:center; }
.mt-24{ margin-top:24px; }
.small{ font-size:.82rem; color:var(--ink-soft); }
.hidden{ display:none !important; }