@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

/* ************************* थीम: White (YouTube light) और Black (YouTube dark) ************************* */
:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-2: #F9F9F9;
  --surface: #F2F2F2;
  --card: #FFFFFF;
  --text: #0F0F0F;
  --text-2: #606060;
  --border: #E5E5E5;
  --accent: #FF0000;
  --link: #065FD4;
  --btn-bg: #0F0F0F;
  --btn-text: #FFFFFF;
  --avatar-bg: #065FD4;
  --avatar-text: #FFFFFF;
  --error-bg: #FDECEA;
  --error-text: #B3261E;
  --error-border: #F5C2BD;
  --ok-bg: #E6F4EA;
  --ok-text: #137333;
  --ok-border: #B7DFC2;
  /* रिपोर्ट कार्ड के रंगीन बॉक्स */
  --info-bg-l: 96%;
  --info-bd-l: 86%;
  --info-bar-l: 45%;
  --chip-bg-l: 90%;
  --chip-tx-l: 22%;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F0F0F;
  --bg-2: #181818;
  --surface: #272727;
  --card: #1A1A1A;
  --text: #F1F1F1;
  --text-2: #AAAAAA;
  --border: #303030;
  --link: #3EA6FF;
  --btn-bg: #F1F1F1;
  --btn-text: #0F0F0F;
  --avatar-bg: #3EA6FF;
  --avatar-text: #0F0F0F;
  --error-bg: #3B1C1A;
  --error-text: #FFB4AB;
  --error-border: #6B2C27;
  --ok-bg: #12301D;
  --ok-text: #8FD5A6;
  --ok-border: #245A37;
  --info-bg-l: 15%;
  --info-bd-l: 28%;
  --info-bar-l: 55%;
  --chip-bg-l: 26%;
  --chip-tx-l: 88%;
}

* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Roboto', Arial, sans-serif;
  margin: 0;
  padding-bottom: 24px;
}
/* नीचे का बार दिख रहा हो तो उसके पीछे कुछ छुपे नहीं */
body:has(.bottom-nav) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

h1, h2, h3 { font-family: 'Roboto', Arial, sans-serif; }
a { color: var(--link); }

/* ************************* टॉप बार: सिर्फ़ लोगो ************************* */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.logo svg { width: 32px; height: 24px; display: block; }
.logo span {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--text);
}

/* ************************* बॉटम बार: Home / Report / Reports / Profile ************************* */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 640px;
  margin: 0 auto;
}
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 4px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 400;
  text-decoration: none;
}
.nav-item svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--text); font-weight: 700; }
.nav-item.active svg .fillable { fill: currentColor; }
.nav-item.active svg .cut { stroke: var(--bg); }
.nav-item:focus-visible { outline: 3px solid var(--link); outline-offset: -3px; border-radius: 8px; }

/* ************************* बटन ************************* */
.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.hero .btn,
a.btn {
  display: inline-block;
  text-decoration: none;
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  background: var(--surface);
  color: var(--text);
}
.btn:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* बटन के चारों ओर फैलती रिंग */
.btn-pulse { position: relative; }
.btn-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--accent);
  animation: ring 2s ease-out infinite;
}
@keyframes ring {
  from { transform: scale(1); opacity: 0.8; }
  to   { transform: scale(1.3, 1.6); opacity: 0; }
}

/* ************************* home ************************* */
.hero {
  max-width: 640px;
  margin: 40px 64px;
}
.hero h1 {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 20px;
}
.hero p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-2);
  margin-bottom: 28px;
}

/* ऊपर उठकर आना */
.hero h1, .hero p, .hero .btn, .stat-card {
  animation: rise 0.7s ease both;
}
.hero p { animation-delay: 0.1s; }
.hero .btn { animation-delay: 0.2s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* आँकड़ों वाली बार्स */
.stats {
  max-width: 640px;
  margin: 60px 64px;
}
.stats h2 {
  font-size: 26px;
  font-weight: 700;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.stat-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-weight: 500;
}
.bar {
  background: var(--surface);
  border-radius: 99px;
  height: 10px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: var(--w);
  background: var(--accent);
  border-radius: 99px;
  transform-origin: left;
  animation: fill 1.2s ease-out both;
}
@keyframes fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.note { color: var(--text-2); font-size: 14px; }
.stat-count { font-weight: 400; opacity: 0.75; margin-left: 8px; font-size: 0.9em; }
.stat-total { margin: 0 0 12px; color: var(--text-2); }

/* ************************* forms (report + auth) ************************* */
.report-page {
  max-width: 560px;
  margin: 24px 64px;
}
.report-page input,
.report-page select,
.report-page textarea,
.auth-page input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin: 8px 0 16px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
}
.report-page label,
.auth-page label {
  display: block;
  font-weight: 500;
  margin-top: 4px;
}
.report-page textarea { resize: vertical; }
.report-page input:focus,
.report-page select:focus,
.report-page textarea:focus,
.auth-page input:focus {
  outline: 2px solid var(--link);
  outline-offset: 1px;
}
.report-page .hint {
  color: var(--text-2);
  font-size: 14px;
  margin: -8px 0 20px;
}
.report-page .btn[disabled] { opacity: 0.6; cursor: wait; }
.form-row { display: flex; gap: 12px; }

.form-error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid var(--error-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.form-success {
  background: var(--ok-bg);
  color: var(--ok-text);
  border: 1px solid var(--ok-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.auth-page {
  max-width: 420px;
  margin: 40px 64px;
}
.auth-page h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 8px;
}
.auth-page > p { color: var(--text-2); margin-bottom: 24px; }
.auth-page .btn { width: 100%; }
.auth-switch { margin-top: 20px; }
.auth-switch a { font-weight: 700; }

.logout-form { display: inline; margin-left: 20px; }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--link);
  cursor: pointer;
}

/* ************************* profile ************************* */
.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.profile-avatar-lg { width: 72px; height: 72px; font-size: 30px; flex-shrink: 0; }
.profile-avatar-sm { width: 26px; height: 26px; font-size: 12px; flex-shrink: 0; }

.profile-page {
  max-width: 560px;
  margin: 24px 64px;
}
.profile-page.has-reports { max-width: 900px; }

.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  animation: rise 0.7s ease both;
}
.profile-card h1 { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.profile-card p { margin: 0; color: var(--text-2); }
.profile-stats { margin-top: 6px !important; font-size: 14px; }

.profile-section { margin-top: 40px; }
.profile-section h2 { font-size: 22px; font-weight: 700; }
.profile-section .report-list { margin-top: 20px; }

/* सेटिंग्स बटन (ऊपर दाईं तरफ़) और उसका मेनू */
.profile-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.settings-menu { position: relative; }
.settings-menu summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
}
.settings-menu summary::-webkit-details-marker { display: none; }
.settings-menu summary:hover { background: var(--surface); }
.settings-menu summary:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.settings-panel {
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 30;
  width: 260px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}
.settings-panel h3 {
  margin: 8px 12px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.theme-options { display: flex; gap: 8px; padding: 4px 8px 10px; }
.theme-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.theme-btn[aria-pressed="true"] {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);
}
.settings-panel form { border-top: 1px solid var(--border); padding-top: 6px; }
.settings-signout {
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.settings-signout:hover { background: var(--surface); }

/* ************************* reports list ************************* */
.reports-page {
  max-width: 900px;
  margin: 32px 64px;
}
.reports-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.reports-head h1 { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 6px; }
.reports-head p { margin: 0; color: var(--text-2); }

/* बॉक्स के चारों तरफ़ ज़्यादा जगह */
.report-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 36px 28px;
  padding: 8px 0;
}

.empty-state {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 24px;
  text-align: center;
  color: var(--text-2);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}
.pager-info { color: var(--text-2); font-size: 14px; }
.pager .btn { display: inline-block; text-decoration: none; padding: 10px 20px; }

/* सबकी रिपोर्ट में कार्ड पर नाम */
.report-desc { overflow-wrap: anywhere; white-space: pre-line; }

/* ************************* रिपोर्ट कार्ड ************************* */
.rc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* सबसे ऊपर: रिपोर्ट करने वाले का नाम और प्रोफाइल */
.rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.rc-author {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.rc-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-text);
  font-weight: 700;
  font-size: 18px;
}
.rc-author-text { display: flex; flex-direction: column; min-width: 0; }
.rc-author-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-author-sub { font-size: 13px; color: var(--link); }
.rc-author:hover .rc-author-sub { text-decoration: underline; }
.rc-author:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; border-radius: 8px; }
.rc-date { flex-shrink: 0; font-size: 13px; color: var(--text-2); }

.rc-body { padding: 22px 20px 20px; }

/* एक ही बॉक्स में: समस्या + स्कूल + देश */
.rc-info {
  padding: 16px 18px;
  border-radius: 14px;
  background: hsl(var(--hue) 45% var(--info-bg-l));
  border: 1px solid hsl(var(--hue) 35% var(--info-bd-l));
  border-left: 6px solid hsl(var(--hue) 55% var(--info-bar-l));
}
.rc-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: hsl(var(--hue) 60% var(--chip-bg-l));
  color: hsl(var(--hue) 65% var(--chip-tx-l));
}
.rc-school {
  margin: 10px 0 2px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rc-country { margin: 0; color: var(--text-2); font-size: 15px; }

/* डिस्क्रिप्शन + Show more */
.rc-desc {
  margin: 18px 0 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-line;
  max-width: 70ch;
}
.rc-desc-short[hidden], .rc-desc-full[hidden] { display: none; }
.rc-more-btn {
  display: inline;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.rc-more-btn:hover { text-decoration: underline; }
.rc-more-btn:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 4px; }

/* ************************* फ़ोटो / वीडियो ************************* */
.rc-media-wrap { position: relative; margin-top: 20px; }

/* हर फ़ोटो या वीडियो का एक ही नियम (सिर्फ़ यहीं) */
.rc-media-item {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.rc-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
video.rc-media-item { background: #000; object-fit: contain; }

/* हमेशा साइड में सरकने वाली पट्टी (EJS में isSlider = true) */
.rc-media-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.rc-media-slider .rc-media-item {
  flex: 0 0 min(300px, 78%);
  scroll-snap-align: start;
}
/* सिर्फ़ 1 फ़ाइल हो तो पूरी चौड़ाई, और तीर के बटन छुपे रहें */
.rc-media-slider.rc-media-one .rc-media-item { flex: 0 0 100%; }
.rc-media-wrap:has(.rc-media-one) .rc-slide-btn { display: none; }
.rc-slide-btn {
  position: absolute;
  top: calc(50% - 22px);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0F0F0F;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.rc-slide-prev { left: 6px; }
.rc-slide-next { right: 6px; }
.rc-slide-btn:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
@media (hover: none) { .rc-slide-btn { display: none; } }

.rc-media-count { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }

/* ************************* mobile ************************* */
@media (max-width: 640px) {
  .topbar { padding: 0 14px; }

  .hero { margin: 28px 20px; }
  .hero h1 { font-size: 34px; line-height: 1.12; }
  .hero p { font-size: 16px; }

  .stats { margin: 36px 20px; }
  .stats h2 { font-size: 22px; }
  .stat-card { padding: 14px 16px; }

  .report-page { margin: 20px 20px; }
  .form-row { flex-direction: column; gap: 0; }

  .auth-page { margin: 24px 20px; }
  .auth-page h1 { font-size: 28px; }
  .logout-form { margin-left: 0; }

  .profile-page { margin: 20px 20px; }
  .profile-card { padding: 18px; }

  .reports-page { margin: 24px 20px; }
  .reports-head { flex-direction: column; align-items: flex-start; }
  .reports-head h1 { font-size: 30px; }
  .report-list { gap: 32px 0; }

  .rc-head { padding: 12px 14px; }
  .rc-body { padding: 18px 14px 16px; }
  .rc-school { font-size: 20px; }
}

/* ************************* कम एनिमेशन चाहने वालों के लिए ************************* */
@media (prefers-reduced-motion: reduce) {
  .rc-media-slider { scroll-behavior: auto; }
  .hero h1, .hero p, .hero .btn, .stat-card, .profile-card, .bar-fill, .btn-pulse::after { animation: none; }
}