/* Clean Solid Local Helvetica Neue */
@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/HelveticaNeue-Roman.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/HelveticaNeue-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/HelveticaNeue-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/HelveticaNeue-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Helvetica Neue';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('fonts/HelveticaNeue-Bold.woff') format('woff');
}

/* ==========================================================================
   MINIMALIST SWISS NOIR — DR. AMBEDKAR INSTITUTE OF TECHNOLOGY
   LOST & FOUND PORTAL
   Style: Pure Black & White, 100% Helvetica, Full-Page Light Grid,
   Clean Tactile Hover States, Zero Distracting Auto-Animations
   ========================================================================== */

:root {
  --bg: #000000;
  --bg-surface: #0e0e0e;
  --surface: #121212;
  --surface-hover: #1c1c1c;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.4);
  --text: #ffffff;
  --text-dim: #cccccc;
  --muted: #888888;
  --white: #ffffff;
  --black: #000000;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   GLOBAL RESET & 100% HELVETICA
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

/* Full-Page Continuous Light Grid */
body {
  margin: 0;
  background-color: var(--bg);
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  font-size: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

/* Crisp Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

::selection {
  background: #ffffff;
  color: #000000;
}

/* ==========================================================================
   VOLUMETRIC LIGHT GOLDEN WINDOW SUNLIGHT (FIRST VERSION DYNAMICS)
   Dreamy, atmospheric warm sunlight streaming from corner window
   ========================================================================== */

.window-sunlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.9;
}

/* Primary Volumetric Golden God Ray Beams */
.window-sunlight::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 150vw;
  height: 150vh;
  transform-origin: 0% 0%;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  background: repeating-conic-gradient(
    from 115deg at 0% 0%,
    rgba(255, 235, 175, 0.16) 0deg 3.5deg,
    transparent 3.5deg 8deg,
    rgba(255, 220, 140, 0.24) 8deg 14deg,
    transparent 14deg 22deg,
    rgba(255, 238, 185, 0.14) 22deg 28deg,
    transparent 28deg 36deg,
    rgba(255, 215, 125, 0.2) 36deg 44deg,
    transparent 44deg 54deg,
    rgba(255, 205, 110, 0.12) 54deg 62deg,
    transparent 62deg 75deg
  );
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 0% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
  mask-image: radial-gradient(ellipse 95% 85% at 0% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 80%);
  filter: blur(14px);
  animation: sunlightSway 8s ease-in-out infinite alternate;
}

/* Secondary Golden Window Slat & Atmospheric Haze Layer */
.window-sunlight::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 150vw;
  height: 150vh;
  transform-origin: 0% 0%;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  background: 
    radial-gradient(circle at 0% 0%, rgba(255, 240, 190, 0.35) 0%, rgba(255, 210, 120, 0.12) 35%, transparent 70%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 225, 140, 0.08) 0px 40px,
      transparent 40px 90px
    );
  -webkit-mask-image: radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.95) 0%, transparent 65%);
  mask-image: radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.95) 0%, transparent 65%);
  filter: blur(26px);
  animation: sunlightDustDrift 10s ease-in-out infinite alternate;
}

/* 100% GPU-accelerated motion (Dynamic active sweep, zero lag) */
@keyframes sunlightSway {
  0% {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(0.97);
    opacity: 0.7;
  }
  45% {
    transform: translate3d(28px, 16px, 0) rotate(5.5deg) scale(1.06);
    opacity: 1;
  }
  75% {
    transform: translate3d(14px, 32px, 0) rotate(2deg) scale(1.02);
    opacity: 0.88;
  }
  100% {
    transform: translate3d(-16px, 12px, 0) rotate(-6deg) scale(1.01);
    opacity: 0.72;
  }
}

@keyframes sunlightDustDrift {
  0% {
    opacity: 0.6;
    transform: translate3d(-10px, -5px, 0) scale(0.96);
  }
  50% {
    opacity: 0.95;
    transform: translate3d(32px, 24px, 0) scale(1.08);
  }
  100% {
    opacity: 0.65;
    transform: translate3d(8px, 36px, 0) scale(1.02);
  }
}

.wrap, .gate, .hero, main, footer {
  position: relative;
  z-index: 2;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  width: 100%;
}

a {
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   USN GATE PAGE
   ========================================================================== */

.gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 48px);
}

.gate-box {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 6vw, 48px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

.gate-box h1 {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: #ffffff;
}

.gate-err {
  color: #ffffff;
  border-left: 3px solid #ffffff;
  background: #1c1c1c;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 0 0 20px;
  font-size: 14px;
}

.hint {
  color: var(--muted);
  font-size: 13px;
  margin-top: 24px;
  text-align: center;
  line-height: 1.5;
}

.block {
  width: 100%;
}

/* ==========================================================================
   HERO & TOP NAVIGATION
   ========================================================================== */

.hero {
  border-bottom: 1px solid var(--line);
  padding: 24px 0 44px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 44px;
  padding: 8px 16px;
  background: rgba(18, 18, 18, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.topbar strong {
  color: #ffffff;
  font-weight: 700;
}

.topbar a {
  color: var(--muted);
  font-weight: 600;
  text-underline-offset: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.topbar a:hover {
  color: #000000;
  background: #ffffff;
}

.hero h1 {
  font-size: clamp(28px, 5.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: #ffffff;
}

.sub {
  font-size: clamp(12px, 1.8vw, 13px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(18, 18, 18, 0.8);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.sub::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  color: #ffffff;
  background: transparent;
  border: 1px solid var(--line-strong);
  transition: all 0.2s var(--ease);
  text-align: center;
}

.btn:hover {
  border-color: #ffffff;
  color: #000000;
  background: #ffffff;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Solid White Button */
.btn.solid {
  background: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
  font-weight: 700;
}

.btn.solid:hover {
  background: #e0e0e0;
  border-color: #e0e0e0;
  color: #000000;
  transform: translateY(-2px);
}

/* ==========================================================================
   MAIN FEED & FLASH NOTIFICATIONS
   ========================================================================== */

main.wrap {
  padding-top: 36px;
  padding-bottom: 64px;
  flex: 1;
}

.flash {
  padding: 16px 20px;
  margin-bottom: 32px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #ffffff;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.flash.err {
  border-left: 4px solid #ffffff;
  background: #1c1c1c;
}

.flash.ok {
  border-left: 4px solid #ffffff;
  background: #141414;
}

/* ==========================================================================
   PANEL FORMS (:target)
   ========================================================================== */

.panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 36px);
  margin-bottom: 40px;
  max-width: 640px;
  scroll-margin-top: 24px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7);
}

.panel:target {
  display: block;
}

.panel h2 {
  margin: 0 0 6px;
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.as {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
}

.as strong {
  color: #ffffff;
  font-weight: 700;
}

/* ==========================================================================
   INPUTS & LABELS
   ========================================================================== */

label {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  transition: color 0.2s ease;
}

label:focus-within {
  color: #ffffff;
}

input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 16px;
  background: #090909;
  color: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

input:hover {
  border-color: #666666;
  background: #111111;
}

input:focus {
  outline: none;
  border-color: #ffffff;
  background: #161616;
}

input[type=file] {
  padding: 10px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: #090909;
  cursor: pointer;
}

input[type=file]::file-selector-button {
  background: #ffffff;
  color: #000000;
  border: 0;
  padding: 7px 16px;
  margin-right: 14px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type=file]::file-selector-button:hover {
  background: #d4d4d8;
}

/* ==========================================================================
   FEED CONTROLS (TABS & INSTANT SEARCH)
   Instant toggle between Lost, Found, and All items — eliminates scrolling
   ========================================================================== */

.feed-controls {
  margin: 32px 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.tab-group {
  display: inline-flex;
  gap: 6px;
  background: rgba(18, 18, 18, 0.95);
  border: 1px solid var(--line);
  padding: 5px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tab-btn:hover {
  color: #ffffff;
}

.tab-btn.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.tab-btn .badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font-weight: 700;
}

.tab-btn.active .badge {
  background: #000000;
  color: #ffffff;
}

.search-wrap {
  flex: 1;
  min-width: 260px;
  max-width: 440px;
}

#feed-search {
  width: 100%;
  padding: 12px 20px;
  background: #0c0c0c;
  color: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

#feed-search:focus {
  outline: none;
  border-color: #ffffff;
  background: #141414;
}

@media (max-width: 700px) {
  .feed-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .tab-group {
    width: 100%;
  }
  .tab-btn {
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
    font-size: 11px;
  }
  .search-wrap {
    max-width: 100%;
    min-width: 100%;
  }
}

/* ==========================================================================
   SECTION TITLES & CARDS FEED
   ========================================================================== */

.section-title {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin: 52px 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title span {
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid var(--line);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.empty {
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 52px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: rgba(18, 18, 18, 0.6);
  grid-column: 1 / -1;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 0 1px #ffffff;
}

.imgwrap {
  display: block;
  overflow: hidden;
  position: relative;
  background: #090909;
}

.card img, .noimg {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: #111111;
  transition: transform 0.4s var(--ease);
}

.card:hover img {
  transform: scale(1.04);
}

/* Minimalist Static Placeholder */
.noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  background: #111111;
  border-bottom: 1px solid var(--line);
}

.card .body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card h3 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  word-break: break-word;
}

dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

dt {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 700;
  opacity: 0.6;
  margin-top: 8px;
}

dd {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--text-dim);
  word-break: break-word;
  line-height: 1.45;
}

dd a {
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

dd a:hover {
  color: #ffffff;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  color: var(--muted);
  margin-top: auto;
  background: rgba(0, 0, 0, 0.7);
}

footer .team {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px 28px;
  flex-wrap: wrap;
  font-size: 14px;
}

footer a {
  color: var(--muted);
  font-weight: 500;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #ffffff;
}

/* ==========================================================================
   RESPONSIVE DESIGN & MOBILE DOCK
   ========================================================================== */

@media (max-width: 768px) {
  .wrap {
    padding: 0 16px;
  }
  .hero {
    padding: 20px 0 32px;
  }
  .topbar {
    margin-bottom: 28px;
  }
  .items {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .card img, .noimg {
    height: 220px;
  }
  .panel {
    padding: 18px;
    border-radius: var(--radius-md);
  }
  .row .btn {
    flex: 1;
  }
}

@media (max-width: 700px) {
  /* Keep Add Item buttons naturally in the Hero header on mobile */
  .actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
  }
  .actions .btn {
    width: 100%;
    padding: 14px 18px;
    font-size: 13px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}