/* ============================================
   मोहन बधाला — चुनाव वेबसाइट
   मुख्य स्टाइलशीट
   ============================================ */

:root {
  --kesari: #FF6B1A;
  --kesari-dark: #D9500A;
  --kesari-light: #FFF1E6;
  --hara: #128807;
  --hara-dark: #0C5E05;
  --neela: #0B2545;
  --neela-light: #1B3A63;
  --safed: #FFFFFF;
  --bg: #FAF8F5;
  --bg-alt: #F2EEE8;
  --text: #22201D;
  --text-muted: #6B6660;
  --border: #E4DED5;
  --shadow-sm: 0 2px 8px rgba(11, 37, 69, .06);
  --shadow-md: 0 8px 28px rgba(11, 37, 69, .10);
  --shadow-lg: 0 18px 50px rgba(11, 37, 69, .16);
  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1180px;
  --font: 'Noto Sans Devanagari', 'Nirmala UI', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--kesari-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.35;
  color: var(--neela);
  margin: 0 0 .6em;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- टॉप पट्टी ---------- */
.topbar {
  background: var(--neela);
  color: #D7E2F0;
  font-size: .85rem;
  padding: 7px 0;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.topbar a { color: #FFD9BF; }
.topbar .tb-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- हेडर / नेविगेशन ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--kesari), var(--hara));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.25rem;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.brand-text strong {
  display: block;
  font-size: 1.18rem;
  color: var(--neela);
  line-height: 1.2;
}
.brand-text span {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .04em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  display: block;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  color: var(--neela);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.nav-links a:hover { background: var(--kesari-light); color: var(--kesari-dark); text-decoration: none; }
.nav-links a.active { background: var(--neela); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--neela);
  line-height: 1;
}

/* ---------- बटन ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .18s, background .18s;
  font-family: inherit;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--kesari); color: #fff; box-shadow: 0 6px 18px rgba(255,107,26,.35); }
.btn-primary:hover { background: var(--kesari-dark); color: #fff; }
.btn-green { background: var(--hara); color: #fff; box-shadow: 0 6px 18px rgba(18,136,7,.3); }
.btn-green:hover { background: var(--hara-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--neela); border-color: var(--neela); }
.btn-ghost:hover { background: var(--neela); color: #fff; }
.btn-white { background: #fff; color: var(--neela); }
.btn-white:hover { background: var(--kesari-light); color: var(--kesari-dark); }

/* ---------- पेज हेडर (अंदरूनी पेज) ---------- */
.page-head {
  background: linear-gradient(135deg, var(--neela) 0%, var(--neela-light) 100%);
  color: #fff;
  padding: 54px 0 46px;
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 6px;
  background: linear-gradient(90deg, var(--kesari) 0 33%, #fff 33% 66%, var(--hara) 66% 100%);
}
.page-head h1 { color: #fff; margin-bottom: .3em; }
.page-head p { color: #C9D8EC; max-width: 640px; margin: 0; }
.crumb { font-size: .85rem; color: #9FB6D4; margin-bottom: 10px; }
.crumb a { color: #FFD9BF; }

/* ---------- हीरो (होम) ---------- */
.hero {
  background:
    radial-gradient(900px 420px at 82% 18%, rgba(255,107,26,.16), transparent 60%),
    linear-gradient(135deg, var(--neela) 0%, #143156 60%, var(--neela-light) 100%);
  color: #fff;
  padding: 62px 0 70px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 7px;
  background: linear-gradient(90deg, var(--kesari) 0 33%, #fff 33% 66%, var(--hara) 66% 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 46px;
  align-items: center;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: .35em; }
.hero .lead { color: #D3E0F0; font-size: 1.12rem; max-width: 560px; }
.eyebrow {
  display: inline-block;
  background: rgba(255,107,26,.18);
  border: 1px solid rgba(255,107,26,.45);
  color: #FFC79E;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 18px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

.hero-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 26px;
  backdrop-filter: blur(6px);
  text-align: center;
}
.hero-photo {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,107,26,.35), rgba(18,136,7,.3));
  display: grid; place-items: center;
  color: rgba(255,255,255,.75);
  font-size: .92rem;
  text-align: center;
  padding: 20px;
  border: 2px dashed rgba(255,255,255,.35);
  margin-bottom: 18px;
}
.hero-card h3 { color: #fff; margin-bottom: 2px; }
.hero-card .role { color: #FFC79E; font-size: .92rem; font-weight: 600; }

/* ---------- सेक्शन ---------- */
.section { padding: 62px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--neela); color: #D7E2F0; }
.section-dark h2, .section-dark h3 { color: #fff; }

.section-title { text-align: center; margin-bottom: 42px; }
.section-title h2 { margin-bottom: .3em; }
.section-title p { color: var(--text-muted); max-width: 620px; margin: 0 auto; }
.section-title .kicker {
  display: inline-block;
  color: var(--kesari-dark);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .12em;
  margin-bottom: 8px;
}

/* ---------- कार्ड ग्रिड ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--safed);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--kesari-light);
  color: var(--kesari-dark);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}

/* ---------- आँकड़े ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.stat {
  background: var(--safed);
  border: 1px solid var(--border);
  border-left: 4px solid var(--kesari);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat .num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--neela);
  line-height: 1.1;
}
.stat .label { color: var(--text-muted); font-size: .92rem; }

/* ---------- टाइमलाइन ---------- */
.timeline { position: relative; padding-right: 0; margin-top: 10px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 15px; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(180deg, var(--kesari), var(--hara));
  border-radius: 3px;
}
.tl-item { position: relative; padding: 0 0 30px 52px; }
.tl-item::before {
  content: "";
  position: absolute;
  left: 7px; top: 7px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--kesari);
  box-shadow: 0 0 0 4px rgba(255,107,26,.14);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-year {
  display: inline-block;
  background: var(--neela);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.tl-item h3 { margin-bottom: .3em; }
.tl-item p { color: var(--text-muted); margin-bottom: 0; }

/* ---------- समाचार ---------- */
.news-card {
  background: var(--safed);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.news-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(140deg, var(--kesari-light), #E6F3E4);
  display: grid; place-items: center;
  color: var(--text-muted);
  font-size: .85rem;
}
.news-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.news-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: .8rem; color: var(--text-muted); margin-bottom: 10px;
}
.tag {
  background: var(--kesari-light);
  color: var(--kesari-dark);
  font-weight: 700;
  font-size: .74rem;
  padding: 3px 10px;
  border-radius: 999px;
}
.tag-green { background: #E6F3E4; color: var(--hara-dark); }
.news-body h3 { font-size: 1.08rem; margin-bottom: .4em; }
.news-body p { color: var(--text-muted); font-size: .94rem; flex: 1; }
.news-body .more { font-weight: 700; font-size: .9rem; }

/* ---------- गैलरी ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.gal-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--kesari-light), #E6F3E4);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: .9rem;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .2s;
}
.gal-item:hover { transform: scale(1.02); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; }
.gal-cap {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(11,37,69,.85));
  color: #fff;
  padding: 26px 14px 12px;
  font-size: .88rem;
  font-weight: 600;
  text-align: right;
}

/* ---------- फ़ॉर्म ---------- */
.form-box {
  background: var(--safed);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-md);
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  margin-bottom: 6px;
  color: var(--neela);
}
.field .req { color: #C62828; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--kesari);
  box-shadow: 0 0 0 3px rgba(255,107,26,.15);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .hint { font-size: .82rem; color: var(--text-muted); margin-top: 4px; }
.field .err { font-size: .84rem; color: #C62828; margin-top: 5px; display: none; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #C62828; }
.field.invalid .err { display: block; }

.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; flex-wrap: wrap; }
.checkline input { width: auto; margin-top: 5px; flex: none; }
.checkline label { flex: 1; }
.checkline .err { flex-basis: 100%; margin-top: 0; }
.field.checkline.invalid { background: #FDECEC; border-radius: var(--radius-sm); padding: 10px 12px; }

.form-msg {
  display: none;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-weight: 600;
}
.form-msg.ok { display: block; background: #E6F3E4; color: var(--hara-dark); border: 1px solid #B9DFB4; }

.contact-item { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-item .ci-icon {
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  background: var(--kesari-light);
  color: var(--kesari-dark);
  display: grid; place-items: center;
  font-size: 1.2rem;
}
.contact-item strong { display: block; color: var(--neela); }
.contact-item span { color: var(--text-muted); font-size: .95rem; }

/* ---------- CTA पट्टी ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--kesari) 0%, var(--kesari-dark) 100%);
  color: #fff;
  padding: 48px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #FFE7D6; max-width: 620px; margin: 0 auto 22px; }
.cta-band .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- सूची ---------- */
.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li {
  position: relative;
  padding-right: 0;
  padding-left: 32px;
  margin-bottom: 12px;
}
.tick-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--hara);
  color: #fff;
  font-size: .75rem;
  display: grid; place-items: center;
  font-weight: 700;
}

/* ---------- पूर्वावलोकन पट्टी (सिर्फ़ एडमिन को दिखती है) ---------- */
.preview-bar {
  background: repeating-linear-gradient(45deg, #2D2A26, #2D2A26 12px, #3A362F 12px, #3A362F 24px);
  color: #FFD9BF;
  padding: 10px 20px;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  text-align: center;
}
.preview-bar a {
  color: #fff;
  background: var(--kesari);
  padding: 4px 15px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.preview-bar a:hover { background: var(--kesari-dark); text-decoration: none; }

/* ---------- एडमिन डैशबोर्ड ---------- */
.admin-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  margin-bottom: 28px;
}
.admin-tab {
  padding: 12px 22px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .16s, border-color .16s;
}
.admin-tab:hover { color: var(--kesari-dark); }
.admin-tab.active { color: var(--neela); border-bottom-color: var(--kesari); }

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.item-row {
  background: var(--safed);
  border: 1px solid var(--border);
  border-right: 4px solid var(--kesari);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-row.is-green { border-right-color: var(--hara); }
.item-row.is-blue { border-right-color: var(--neela); }
.item-row.is-featured { border: 2px solid #D9534F; border-right-width: 4px; }
.item-row .it-main { flex: 1; min-width: 240px; }
.item-row h4 { margin: 0 0 4px; font-size: 1.04rem; color: var(--neela); }
.item-row .it-meta { font-size: .84rem; color: var(--text-muted); margin-bottom: 6px; }
.item-row p { margin: 0; font-size: .93rem; color: var(--text-muted); }
.item-row .it-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.empty-note {
  text-align: center;
  padding: 34px 20px;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
}

.code-box {
  background: #0E1F36;
  color: #CFE0F5;
  border-radius: var(--radius-sm);
  padding: 18px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .82rem;
  line-height: 1.6;
  direction: ltr;
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid #23405F;
}

.step-list { counter-reset: st; list-style: none; padding: 0; margin: 0; }
.step-list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 14px;
}
.step-list li::before {
  counter-increment: st;
  content: counter(st);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--neela);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  display: grid; place-items: center;
}

.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 200;
  background: var(--hara);
  color: #fff;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ---------- तस्वीर ---------- */
.photo-box {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, var(--kesari-light), #E6F3E4);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* फ़ाइल न मिले तो यह दिखेगा */
.photo-box.photo-missing {
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: .92rem;
  border-style: dashed;
  border-width: 2px;
  box-shadow: none;
}
.photo-box.photo-missing::after { content: attr(data-fallback); }

.photo-cap {
  margin-top: 10px;
  font-size: .9rem;
  color: var(--text-muted);
  text-align: center;
}
.section-dark .photo-cap { color: #8FA6C2; }

/* ---------- वीडियो ---------- */
.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* क्लिक करने पर चलने वाला थंबनेल */
.video-wrap[data-yt] {
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
.video-wrap[data-yt]::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .28);
  transition: background .2s;
}
.video-wrap[data-yt]:hover::after { background: rgba(0, 0, 0, .12); }
.video-wrap.playing { cursor: default; }
.video-wrap.playing::after { display: none; }

.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 82px; height: 58px;
  border: 0;
  border-radius: 14px;
  background: rgba(200, 30, 25, .92);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .18s, background .18s;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.video-wrap:hover .video-play { background: #C81E19; transform: translate(-50%, -50%) scale(1.08); }
.video-play::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.video-wrap.playing .video-play { display: none; }

.video-note {
  text-align: center;
  font-size: .88rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ---------- अत्यावश्यक पट्टी ---------- */
/* ---------- ऊपर की चलती हुई सूचना पट्टी ----------
   सरकारी वेबसाइटों जैसी: बायें चमकता "ज़रूरी सूचना", बीच में चलता संदेश,
   दायें पक्का बटन. माउस/उँगली रखते ही रुक जाती है. */
.alert-bar {
  background: linear-gradient(100deg, #8E1F1C, #B23A37 45%, #D9534F);
  color: #fff;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 2px solid #6E1614;
}

.alert-bar .ab-badge {
  display: flex; align-items: center; gap: 8px;
  background: #6E1614;
  padding: 10px 16px;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: abBlink 1.4s steps(1, end) infinite;
}

.alert-bar .ab-track {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 0;
}
.alert-bar .ab-run {
  display: flex;
  white-space: nowrap;
  animation: abScroll 26s linear infinite;
}
.alert-bar .ab-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 30px 10px 0;
  font-size: .94rem; font-weight: 600;
}
.alert-bar .ab-star { color: #FFD9A0; font-size: .7rem; }

.alert-bar a {
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);
  padding: 3px 14px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-size: .86rem;
}
.alert-bar a:hover { background: #fff; color: #B23A37; text-decoration: none; }

.alert-bar .ab-cta {
  display: flex; align-items: center;
  background: var(--kesari);
  border: none; border-radius: 0;
  padding: 10px 20px;
  font-size: .88rem; font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.alert-bar .ab-cta:hover { background: #fff; color: #B23A37; }

@keyframes abScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes abBlink {
  0%, 49%  { background: #6E1614; color: #fff; }
  50%, 99% { background: #E8A33D; color: #4A1210; }
}

/* जिन्हें हिलती-डुलती चीज़ों से तकलीफ़ होती है, उनके लिए सब स्थिर */
@media (prefers-reduced-motion: reduce) {
  .alert-bar .ab-run,
  .alert-bar .ab-badge { animation: none; }
}

/* छोटे फ़ोन पर दायाँ बटन हटा दें — पट्टी में जगह कम पड़ती है */
@media (max-width: 620px) {
  .alert-bar .ab-cta { display: none; }
  .alert-bar .ab-badge { padding: 9px 11px; font-size: .74rem; }
  .alert-bar .ab-item { font-size: .87rem; }
}
.pulse {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #FFD9BF;
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(1.5); }
}

.urgent-card {
  background: #FBE9E8;
  border: 2px solid #D9534F;
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow-md);
}
.urgent-card h2, .urgent-card h3 { color: #96302D; }
.urgent-tag {
  display: inline-block;
  background: #B23A37;
  color: #fff;
  font-size: .8rem; font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.order-box {
  background: var(--safed);
  border: 1px solid var(--border);
  border-right: 4px solid #B23A37;
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 14px;
}
.order-box .lbl {
  font-size: .78rem; font-weight: 700;
  color: #B23A37; letter-spacing: .06em;
  display: block; margin-bottom: 4px;
}
.order-box p { margin-bottom: 0; }

.gyapan-list { list-style: none; padding: 0; margin: 0; }
.gyapan-list li {
  padding: 11px 0;
  border-bottom: 1px dashed var(--border);
  display: flex; gap: 12px; align-items: center;
}
.gyapan-list li:last-child { border-bottom: none; }
.gyapan-list .dot {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: var(--hara); color: #fff;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
}

/* ---------- सचिव — उद्धरण एवं समस्या कार्ड ---------- */
.quote-card {
  background: var(--safed);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quote-card::before {
  content: "”";
  position: absolute;
  top: 2px; right: 22px;
  font-size: 4rem;
  line-height: 1;
  color: var(--kesari);
  opacity: .22;
}
.quote-card p { font-size: 1.02rem; color: var(--text); }
.quote-who {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.quote-who .av {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--kesari), var(--hara));
  color: #fff; font-weight: 700;
  display: grid; place-items: center;
}
.quote-who strong { display: block; color: var(--neela); font-size: .96rem; }
.quote-who span { color: var(--text-muted); font-size: .86rem; }

.pain-card {
  background: var(--safed);
  border: 1px solid var(--border);
  border-right: 4px solid #D9534F;
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}
.pain-card h3 { font-size: 1.02rem; margin-bottom: .3em; color: #B23A37; }
.pain-card p { margin-bottom: 0; color: var(--text-muted); font-size: .94rem; }

.fix-card {
  background: var(--safed);
  border: 1px solid var(--border);
  border-right: 4px solid var(--hara);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
}
.fix-card h3 { font-size: 1.02rem; margin-bottom: .3em; color: var(--hara-dark); }
.fix-card p { margin-bottom: 0; color: var(--text-muted); font-size: .94rem; }

.num-card {
  background: var(--safed);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  position: relative;
  padding-right: 74px;
  transition: transform .2s, box-shadow .2s;
}
.num-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.num-card .n {
  position: absolute;
  top: 22px; right: 24px;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--kesari);
  color: #fff;
  font-weight: 800; font-size: 1.05rem;
  display: grid; place-items: center;
}
.num-card h3 { margin-bottom: .4em; }
.num-card p:last-child, .num-card ul { margin-bottom: 0; }

/* ---------- DCS प्रबंधन ---------- */
.dcs-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.sum-tile {
  background: var(--safed);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
}
.sum-tile .n { font-size: 1.7rem; font-weight: 800; color: var(--neela); line-height: 1.1; }
.sum-tile .l { font-size: .82rem; color: var(--text-muted); }
.sum-tile.t-green { border-top-color: var(--hara); }
.sum-tile.t-lime { border-top-color: #7CB342; }
.sum-tile.t-grey { border-top-color: #B0AAA2; }
.sum-tile.t-amber { border-top-color: #F0A02A; }
.sum-tile.t-red { border-top-color: #D9534F; }


.dcs-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; margin-bottom: 16px;
}
.dcs-toolbar input[type="search"],
.dcs-toolbar select {
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: .95rem;
  background: #fff; color: var(--text);
}
.dcs-toolbar input[type="search"] { flex: 1; min-width: 220px; }
.dcs-toolbar input[type="search"]:focus,
.dcs-toolbar select:focus {
  outline: none; border-color: var(--kesari);
  box-shadow: 0 0 0 3px rgba(255,107,26,.15);
}

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  padding: 7px 16px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 999px;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .16s;
}
.chip:hover { border-color: var(--kesari); color: var(--kesari-dark); }
.chip.active { background: var(--neela); border-color: var(--neela); color: #fff; }

.table-scroll {
  overflow-x: auto;
  background: var(--safed);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.dcs-table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 880px; }
.dcs-table th {
  background: var(--bg-alt);
  text-align: right;
  padding: 13px 14px;
  font-size: .85rem;
  color: var(--neela);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.dcs-table th[data-sort] { cursor: pointer; user-select: none; }
.dcs-table th[data-sort]:hover { color: var(--kesari-dark); }
.dcs-table th[data-sort]::after { content: " ⇅"; opacity: .4; font-size: .8em; }
.dcs-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dcs-table tbody tr:hover { background: var(--kesari-light); }
.dcs-table tbody tr:last-child td { border-bottom: none; }

.st-select {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: inherit; font-size: .84rem; font-weight: 700;
  cursor: pointer;
}
.st-select:focus { outline: 2px solid var(--kesari); }
.st-green { background: #E6F3E4; color: var(--hara-dark); border-color: #B9DFB4; }
.st-lime  { background: #F0F7E4; color: #558B2F; border-color: #D3E8B5; }
.st-grey  { background: #EFEDEA; color: #5C5751; border-color: #DCD8D2; }
.st-amber { background: #FDF0DA; color: #B26A00; border-color: #F5DFB4; }
.st-red   { background: #FBE9E8; color: #B23A37; border-color: #F2C9C7; }

.mini-btn {
  padding: 5px 11px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--neela); cursor: pointer;
  transition: all .16s;
}
.mini-btn:hover { border-color: var(--kesari); color: var(--kesari-dark); }
.mini-btn.danger:hover { border-color: #D9534F; color: #B23A37; }

.dcs-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; margin-top: 18px;
}
.file-label {
  display: inline-block;
  padding: 10px 20px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 999px;
  font-weight: 600; font-size: .92rem;
  color: var(--neela); cursor: pointer;
}
.file-label:hover { border-color: var(--kesari); color: var(--kesari-dark); }
.file-label input { display: none; }

/* ---------- विज़िटर के आँकड़े — दिन-वार पट्टियाँ ---------- */
.bar-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; font-size: .9rem;
}
.bar-row .bd { width: 130px; color: var(--text-muted); white-space: nowrap; }
.bar-row .bt {
  flex: 1; min-width: 60px; height: 16px;
  background: var(--bg-alt); border-radius: 999px; overflow: hidden;
}
.bar-row .bf {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--kesari), var(--kesari-dark));
  border-radius: 999px;
}
.bar-row .bn { width: 54px; text-align: left; font-weight: 700; color: var(--neela); }

.sub-detail { color: var(--text-muted); font-size: .86rem; }

@media (max-width: 560px) {
  .bar-row .bd { width: 96px; font-size: .8rem; }
}

.note-box {
  background: #FFF8E8;
  border: 1px solid #F0DFB8;
  border-right: 4px solid var(--kesari);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: .92rem;
  margin-bottom: 24px;
}
.note-box strong { color: var(--neela); }

@media (max-width: 980px) {
  .dcs-summary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .dcs-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- फ़ुटर ---------- */
.site-footer {
  background: #08192F;
  color: #A9BCD4;
  padding: 48px 0 0;
  font-size: .94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 34px;
  padding-bottom: 34px;
}
.site-footer h4 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 14px;
}
.site-footer a { color: #A9BCD4; }
.site-footer a:hover { color: var(--kesari); }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 9px; }
.social-row { display: flex; gap: 10px; margin-top: 12px; }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  transition: background .18s;
}
.social-row a:hover { background: var(--kesari); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 16px 0 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: #7D93AE;
}

/* ---------- व्हाट्सएप फ़्लोट ---------- */
.wa-float {
  position: fixed;
  left: 22px; bottom: 22px;
  z-index: 90;
  background: #25D366;
  color: #fff;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  font-size: 1.5rem;
  text-decoration: none;
  transition: transform .18s;
}
.wa-float:hover { transform: scale(1.08); color: #fff; text-decoration: none; }

/* ---------- रिस्पॉन्सिव ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 380px; margin: 0 auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 18px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    gap: 2px;
  }
  .nav-links.open { display: flex; }
  .site-header { position: sticky; }
  .nav-row { position: relative; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 46px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar .wrap { justify-content: center; text-align: center; }
}

/* ============================================
   एडमिन का लॉगिन पन्ना
   ============================================ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(150deg, #1B3A5C 0%, #14293F 55%, #0E1D2C 100%);
  overflow-y: auto;
}
.login-screen[hidden] { display: none; }

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--safed);
  border-radius: var(--radius);
  padding: 38px 32px 28px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  text-align: center;
}
.login-mark {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--kesari);
  color: #fff;
  font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.login-card h1 { font-size: 1.5rem; margin: 0 0 .15em; }
.login-sub {
  color: var(--text-muted);
  font-size: .92rem;
  margin: 0 0 26px;
}
.login-card .field { text-align: right; margin-bottom: 14px; }

.pass-wrap { position: relative; }
.pass-wrap input { padding-left: 78px !important; }
.pass-eye {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  border: none; background: none;
  color: var(--neela);
  font-family: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.pass-eye:hover { background: var(--kesari-light); color: var(--kesari-dark); }

.login-err {
  background: #FBE9E8;
  border: 1px solid #F2C9C7;
  border-right: 4px solid #B23A37;
  color: #B23A37;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: .9rem; font-weight: 600;
  text-align: right;
  margin-bottom: 14px;
}
.login-err[hidden] { display: none; }

.login-note {
  color: var(--text-muted);
  font-size: .84rem;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.login-back { margin: 10px 0 0; font-size: .88rem; }
.login-back a { color: var(--neela); font-weight: 600; }

/* लॉगिन खुला हो तो पीछे का डैशबोर्ड छिपा रहे */
body.locked-out > *:not(.login-screen) { display: none !important; }

/* ============================================
   "सूचना चालू कीजिए" वाली घंटी
   ============================================ */
.suchna-box {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 900;
  width: min(330px, calc(100vw - 40px));
  background: var(--safed);
  border: 1px solid var(--border);
  border-top: 4px solid var(--kesari);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .35s, transform .35s;
}
.suchna-box.dikho { opacity: 1; transform: translateY(0); }

.suchna-box .sb-text { display: flex; flex-direction: column; gap: 3px; padding-left: 18px; }
.suchna-box .sb-text strong { font-size: 1rem; }
.suchna-box .sb-text span { font-size: .88rem; color: var(--text-muted); line-height: 1.45; }
.suchna-box .sb-haan { width: 100%; padding: 10px; }

.suchna-box .sb-band {
  position: absolute;
  left: 10px; top: 10px;
  border: none; background: none;
  color: var(--text-muted);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.suchna-box .sb-band:hover { background: var(--bg-alt); color: var(--text); }

/* व्हाट्सएप वाला गोल बटन नीचे दायें रहता है — घंटी बायें, टकराव नहीं */
@media (max-width: 480px) {
  .suchna-box { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ============================================
   एडमिन — सूचना भेजने वाला हिस्सा
   ============================================ */
.notice-log { margin-top: 10px; }
.notice-log .nl-row {
  display: flex; justify-content: space-between; gap: 14px;
  align-items: flex-start; flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-right: 3px solid var(--kesari);
  border-radius: var(--radius-sm);
  background: var(--safed);
  margin-bottom: 8px;
}
.notice-log .nl-row h4 { margin: 0 0 3px; font-size: .98rem; }
.notice-log .nl-row p { margin: 0; font-size: .89rem; color: var(--text-muted); }
.notice-log .nl-count {
  font-size: .82rem; font-weight: 700;
  color: var(--hara-dark);
  background: #E6F3E4;
  border: 1px solid #B9DFB4;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* iPhone वाले बक्से के कदम */
.suchna-box .sb-kadam {
  margin: 0; padding: 0 18px 0 0;
  list-style: none;
  counter-reset: kadam;
  display: flex; flex-direction: column; gap: 8px;
}
.suchna-box .sb-kadam li {
  counter-increment: kadam;
  position: relative;
  padding-right: 30px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
}
.suchna-box .sb-kadam li::before {
  content: counter(kadam);
  position: absolute;
  right: 0; top: 2px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--kesari);
  color: #fff;
  font-size: .74rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.suchna-box .sb-icon {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0 6px;
  font-size: .9em;
}

/* ============================================
   वेबसाइट पर दिखने वाली सूचना पट्टी
   (हर ब्राउज़र, हर फ़ोन पर चलती है)
   ============================================ */
.suchna-patti {
  background: linear-gradient(100deg, #0C5E05, #128807 60%, #1AA30C);
  color: #fff;
  border-bottom: 2px solid #094703;
}
.suchna-patti .sp-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.suchna-patti .sp-chihn { font-size: 1.15rem; flex-shrink: 0; }

.suchna-patti .sp-paath {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.suchna-patti .sp-paath strong { font-size: .97rem; line-height: 1.35; }
.suchna-patti .sp-paath span {
  font-size: .88rem;
  color: #D8F0D4;
  line-height: 1.4;
}

.suchna-patti .sp-link {
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);
  padding: 5px 15px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.suchna-patti .sp-link:hover { background: #fff; color: var(--hara-dark); text-decoration: none; }

.suchna-patti .sp-band {
  border: none;
  background: none;
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.suchna-patti .sp-band:hover { background: rgba(255,255,255,.2); color: #fff; }

@media (max-width: 620px) {
  .suchna-patti .sp-wrap { align-items: flex-start; gap: 9px; }
  .suchna-patti .sp-chihn { padding-top: 2px; }
  .suchna-patti .sp-link { padding: 4px 11px; font-size: .8rem; }
}

/* ---------- DCS कोड — फ़ॉर्म में सबसे ऊपर ---------- */
.dcs-pehle {
  background: linear-gradient(180deg, #FFF8E8, #FFFDF7);
  border: 1.5px solid #F0DFB8;
  border-right: 4px solid var(--kesari);
  border-radius: var(--radius-sm);
  padding: 16px 18px 14px;
  margin-bottom: 22px;
}
.dcs-pehle .field { margin-bottom: 0; }
.dcs-pehle input {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  max-width: 220px;
}
.dcs-pehle .hint { margin-top: 7px; }

/* कोड डालने पर आने वाली सूचना */
.dcs-suchna {
  margin-top: 10px;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1.5;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.dcs-suchna span {
  display: block;
  font-size: .84rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}
.dcs-suchna.is-mila {
  background: #E6F3E4;
  border-color: #B9DFB4;
  color: var(--hara-dark);
}
.dcs-suchna.is-nahi {
  background: #FDF0DA;
  border-color: #F5DFB4;
  color: #B26A00;
}
.dcs-suchna.is-dekh { font-style: italic; }

/* जो खाना अपने आप भरा, वह एक पल चमक जाए */
@keyframes apneAap {
  0%   { background: #FFF3D6; border-color: var(--kesari); }
  100% { background: #fff;    border-color: var(--border); }
}
.field input.apne-aap,
.field select.apne-aap {
  animation: apneAap 1.6s ease-out;
}

@media (max-width: 600px) {
  .dcs-pehle { padding: 14px 14px 12px; }
  .dcs-pehle input { max-width: 100%; }
}