/*! core.css | Tailwind-like minimal utilities + custom UI for Django (production) */

/* -----------------------------
   THEME TOKENS
------------------------------*/
:root{
  --font-size: 16px;

  --background: #ffffff;
  --foreground: #0b0b0f;

  --card: #ffffff;
  --card-foreground: #0b0b0f;

  --popover: #ffffff;
  --popover-foreground: #0b0b0f;

  --primary: #030213;
  --primary-foreground: #ffffff;

  --secondary: #f3f4f6;
  --secondary-foreground: #030213;

  --muted: #ececf0;
  --muted-foreground: #717182;

  --accent: #e9ebef;
  --accent-foreground: #030213;

  --destructive: #d4183d;
  --destructive-foreground: #ffffff;

  --border: rgba(0,0,0,.10);
  --input-background: #f3f3f5;
  --ring: rgba(0,0,0,.20);

  --radius: 0.625rem;
  --spacing: 0.25rem;

  --container-md: 28rem;
  --container-2xl: 42rem;
  --container-4xl: 56rem;
  --container-7xl: 80rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --leading-tight: 1.25;
  --leading-relaxed: 1.625;

  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dark{
  --background: #0b0b0f;
  --foreground: #f8f8fb;

  --card: #0b0b0f;
  --card-foreground: #f8f8fb;

  --popover: #0b0b0f;
  --popover-foreground: #f8f8fb;

  --primary: #f8f8fb;
  --primary-foreground: #111118;

  --secondary: #1b1b22;
  --secondary-foreground: #f8f8fb;

  --muted: #1b1b22;
  --muted-foreground: #a2a2b3;

  --accent: #1b1b22;
  --accent-foreground: #f8f8fb;

  --border: rgba(255,255,255,.12);
  --input-background: #1b1b22;
  --ring: rgba(255,255,255,.20);
}

/* -----------------------------
   BASE RESET (Tailwind-like)
------------------------------*/
*,
::before,
::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0 solid transparent;
}

html{
  font-size: var(--font-size);
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  tab-size:4;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body{
  background: var(--background);
  color: var(--foreground);
  min-height: 100vh;
}

img, svg, video, canvas, audio, iframe, embed, object{
  display:block;
  vertical-align:middle;
}

img, video{
  max-width:100%;
  height:auto;
}

a{ color:inherit; text-decoration:inherit; }

button, input, select, textarea{
  font: inherit;
  color: inherit;
  background: transparent;
}

textarea{ resize: vertical; }

/* -----------------------------
   UTILITIES (minimal set)
------------------------------*/
.container{
  width:100%;
  margin-inline:auto;
  padding-inline: calc(var(--spacing) * 4);
}
@media (min-width: 640px){ .container{ max-width: 640px; } }
@media (min-width: 768px){ .container{ max-width: 768px; } }
@media (min-width: 1024px){ .container{ max-width: 1024px; } }
@media (min-width: 1280px){ .container{ max-width: 1280px; } }
@media (min-width: 1536px){ .container{ max-width: 1536px; } }

.mx-auto{ margin-inline:auto; }
.text-center{ text-align:center; }

.flex{ display:flex; }
.grid{ display:grid; }
.inline-flex{ display:inline-flex; }
.flex-1{ flex:1; }
.flex-col{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.justify-center{ justify-content:center; }
.justify-between{ justify-content:space-between; }

.relative{ position:relative; }
.absolute{ position:absolute; }
.sticky{ position:sticky; }
.top-0{ top:0; }
.right-0{ right:0; }
.inset-0{ inset:0; }
.z-50{ z-index:50; }
.z-10{ z-index:10; }

.w-full{ width:100%; }
.h-full{ height:100%; }
.min-h-screen{ min-height:100vh; }

.max-w-md{ max-width: var(--container-md); }
.max-w-2xl{ max-width: var(--container-2xl); }
.max-w-4xl{ max-width: var(--container-4xl); }
.max-w-7xl{ max-width: var(--container-7xl); }

.overflow-hidden{ overflow:hidden; }
.object-cover{ object-fit:cover; }

.rounded-md{ border-radius: calc(var(--radius) - 6px); }
.rounded-lg{ border-radius: calc(var(--radius) - 2px); }
.rounded-xl{ border-radius: calc(var(--radius) + 6px); }
.rounded-2xl{ border-radius: calc(var(--radius) + 10px); }
.rounded-full{ border-radius:999px; }

.border{ border:1px solid var(--border); }
.border-t{ border-top:1px solid var(--border); }
.border-b{ border-bottom:1px solid var(--border); }

.p-3{ padding: calc(var(--spacing) * 3); }
.p-4{ padding: calc(var(--spacing) * 4); }
.p-6{ padding: calc(var(--spacing) * 6); }

.px-2{ padding-inline: calc(var(--spacing) * 2); }
.px-3{ padding-inline: calc(var(--spacing) * 3); }
.px-4{ padding-inline: calc(var(--spacing) * 4); }
.py-1{ padding-block: calc(var(--spacing) * 1); }
.py-2{ padding-block: calc(var(--spacing) * 2); }
.py-3{ padding-block: calc(var(--spacing) * 3); }
.py-6{ padding-block: calc(var(--spacing) * 6); }
.py-8{ padding-block: calc(var(--spacing) * 8); }
.py-12{ padding-block: calc(var(--spacing) * 12); }
.py-16{ padding-block: calc(var(--spacing) * 16); }
.py-20{ padding-block: calc(var(--spacing) * 20); }
.pt-2{ padding-top: calc(var(--spacing) * 2); }
.pt-4{ padding-top: calc(var(--spacing) * 4); }
.pl-10{ padding-left: calc(var(--spacing) * 10); }

.mt-1{ margin-top: calc(var(--spacing) * 1); }
.mt-2{ margin-top: calc(var(--spacing) * 2); }
.mt-4{ margin-top: calc(var(--spacing) * 4); }
.mt-12{ margin-top: calc(var(--spacing) * 12); }
.mb-1{ margin-bottom: calc(var(--spacing) * 1); }
.mb-2{ margin-bottom: calc(var(--spacing) * 2); }
.mb-3{ margin-bottom: calc(var(--spacing) * 3); }
.mb-4{ margin-bottom: calc(var(--spacing) * 4); }
.mb-6{ margin-bottom: calc(var(--spacing) * 6); }
.mb-8{ margin-bottom: calc(var(--spacing) * 8); }
.my-6{ margin-block: calc(var(--spacing) * 6); }
.my-8{ margin-block: calc(var(--spacing) * 8); }
.mr-2{ margin-right: calc(var(--spacing) * 2); }

.gap-1{ gap: calc(var(--spacing) * 1); }
.gap-2{ gap: calc(var(--spacing) * 2); }
.gap-3{ gap: calc(var(--spacing) * 3); }
.gap-4{ gap: calc(var(--spacing) * 4); }
.gap-6{ gap: calc(var(--spacing) * 6); }
.gap-12{ gap: calc(var(--spacing) * 12); }

.space-y-4 > :not(:last-child){ margin-bottom: calc(var(--spacing) * 4); }
.space-y-5 > :not(:last-child){ margin-bottom: calc(var(--spacing) * 5); }
.space-y-6 > :not(:last-child){ margin-bottom: calc(var(--spacing) * 6); }

.text-xs{ font-size: var(--text-xs); line-height: 1.35; }
.text-sm{ font-size: var(--text-sm); line-height: 1.5; }
.text-lg{ font-size: var(--text-lg); line-height: 1.6; }
.text-xl{ font-size: var(--text-xl); line-height: 1.65; }
.text-2xl{ font-size: var(--text-2xl); line-height: 1.35; }
.text-3xl{ font-size: var(--text-3xl); line-height: 1.2; }
.text-4xl{ font-size: var(--text-4xl); line-height: 1.1; }

.font-medium{ font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold{ font-weight: 700; }

.leading-tight{ line-height: var(--leading-tight); }
.leading-relaxed{ line-height: var(--leading-relaxed); }

.shadow-lg{
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
}

.transition{
  transition: .15s cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-colors{
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-shadow{
  transition-property: box-shadow;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------
   BASE COMPONENTS (from your base.html)
------------------------------*/
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: calc(var(--radius) - 2px);
  padding:.5rem .85rem;
  font-weight:600;
  font-size:.95rem;
  transition: .15s ease;
}
.btn:focus{ outline: 2px solid var(--ring); outline-offset: 2px; }

.btn-primary{ background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover{ opacity:.92; }

.btn-outline{
  border:1px solid var(--border);
  background: transparent;
  color: var(--foreground);
}
.btn-outline:hover{ background: rgba(0,0,0,.03); }
.dark .btn-outline:hover{ background: rgba(255,255,255,.06); }

.btn-ghost{ background: transparent; color: var(--foreground); }
.btn-ghost:hover{ background: rgba(0,0,0,.03); }
.dark .btn-ghost:hover{ background: rgba(255,255,255,.06); }

.card{
  background: var(--card);
  color: var(--card-foreground);
  border:1px solid var(--border);
  border-radius: var(--radius);
}
.card-h{ padding: 1.25rem 1.25rem .75rem; }
.card-c{ padding: 0 1.25rem 1.25rem; }
.card-f{ padding: .75rem 1.25rem 1.25rem; border-top:1px solid var(--border); }

.field{ display:flex; flex-direction:column; gap:.35rem; }
.label{ font-size:.9rem; font-weight:600; }
.input, textarea, select{
  width:100%;
  background: var(--input-background);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: .6rem .75rem;
  color: var(--foreground);
}
textarea{ min-height: 110px; }
.help{ font-size:.8rem; color: var(--muted-foreground); }
.sep{ height:1px; width:100%; background: var(--border); }

/* Prose */
.prose{ max-width: 100%; }
.prose h2{ font-size:1.5rem; font-weight:700; margin-top:2rem; margin-bottom:1rem; }
.prose h3{ font-size:1.25rem; font-weight:700; margin-top:1.5rem; margin-bottom:.75rem; }
.prose p{ margin-bottom:1rem; line-height:1.75; }
.prose ul,.prose ol{ margin-bottom:1rem; margin-left:1.5rem; }
.prose li{ margin-bottom:.5rem; }
.prose pre{ background: var(--muted); padding:1rem; border-radius:.5rem; overflow-x:auto; margin-bottom:1rem; }
.prose code{ background: var(--muted); padding:.125rem .375rem; border-radius:.25rem; font-size:.875em; }
.prose pre code{ background: transparent; padding:0; }
.prose a{ color: var(--primary); text-decoration: underline; }
.prose a:hover{ opacity:.85; }

/* -----------------------------
   YOUR “EXAMPLE OUTPUT” COMPONENTS
------------------------------*/
body{ font-family: "Poppins", var(--font-sans); }

/* FORM CONTROLS (dark look) */
.input-dark,
.textarea-dark{
  width:100%;
  border-radius:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
}
.input-dark::placeholder,
.textarea-dark::placeholder{ color: rgba(255,255,255,.40); }
.textarea-dark{ resize:none; }

.input-dark:focus,
.textarea-dark:focus{
  outline:none;
  border-color: rgba(139,92,246,.65);
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

/* Glass header */
header{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,15,15,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  margin: 10px;
  padding: 5px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  font-size:14px;
  color: rgba(255,255,255,.72);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  border:1px solid transparent;
}
.nav-link:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.nav-link.is-active{
  color:#fff;
  background: rgba(139,92,246,.16);
  border-color: rgba(139,92,246,.35);
}

.mobile-menu{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:6px;
  padding-top:10px;
}

/* Motion helpers */
.fade-up{
  opacity:0;
  transform: translateY(10px);
  animation: fadeUp .7s ease forwards;
}
@keyframes fadeUp{ to { opacity:1; transform: translateY(0); } }

.hero-grad{
  background:
    radial-gradient(900px 500px at 20% 20%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(700px 420px at 75% 30%, rgba(167,139,250,.14), transparent 55%),
    radial-gradient(900px 560px at 55% 85%, rgba(74,20,140,.18), transparent 60%);
}

/* Reusable cards (dark aesthetic) */
.card-hover{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 12px 14px;
  color: rgba(255,255,255,.78);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.085);
  border-color: rgba(139,92,246,.28);
}

.info-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.info-ico{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: rgba(139,92,246,.18);
  border: 1px solid rgba(139,92,246,.25);
  color:#fff;
}

.list-card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 12px 14px;
  color: rgba(255,255,255,.78);
}

/* Flash messages */
#flashWrap{
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  width: 92%;
  max-width: 36rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.flash-item{
  width: 100%;
  text-align: center;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .75rem 1rem;
  font-size: .875rem;
  color: #fff;
  transition: opacity .5s ease, transform .5s ease;
}