:root{
  --accent: #6d28d9;
  --glow: 0 0 0.75rem color-mix(in srgb, var(--accent), transparent 50%);
  --card-radius: 1.25rem;
}
[data-bs-theme="dark"]{
  --bs-body-bg: #0b0f17;
}

.app-bg{
  background:
    radial-gradient(1000px 600px at 10% 0%, color-mix(in srgb, var(--accent), transparent 70%), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(16,185,129,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 18%),
    var(--bs-body-bg);
  min-height: 100vh;
}

.glass-nav{
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bs-body-bg), transparent 35%);
  border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 25%);
}

/* Ensure brand is visible in both themes (Bootstrap navbar defaults can force white text) */
.gozst-brand{
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .gozst-brand{ color: #fff !important; }
[data-bs-theme="light"] .gozst-brand{ color: #111 !important; }

.brand-dot{
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--glow);
}

.hero{
  padding: 2.75rem 0 1.5rem;
}

.hero-card{
  border-radius: var(--card-radius);
  border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%);
  background: color-mix(in srgb, var(--bs-body-bg), transparent 22%);
  box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.badge-soft{
  border: 1px solid color-mix(in srgb, var(--accent), transparent 65%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: color-mix(in srgb, var(--accent), white 20%);
}

.btn-primary{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent), black 10%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent), black 10%);
  --bs-btn-focus-shadow-rgb: 109, 40, 217;
}

.form-control:focus, .form-select:focus{
  border-color: color-mix(in srgb, var(--accent), transparent 35%);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--accent), transparent 75%);
}

.floating-orb{
  position:absolute; inset:auto auto 0 0;
  width: 220px; height: 220px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent), white 15%), transparent 55%),
              radial-gradient(circle at 60% 60%, rgba(59,130,246,0.25), transparent 60%);
  filter: blur(0px);
  transform: translate(-35%, 30%);
  opacity: .75;
  animation: floaty 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floaty{
  0%,100% { transform: translate(-35%, 30%) scale(1); }
  50% { transform: translate(-30%, 22%) scale(1.06); }
}

.toast-container{ z-index: 1080; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.small-muted{ color: color-mix(in srgb, var(--bs-body-color), transparent 35%); }

.admin-shell{
  min-height: 100vh;
}
.sidebar{
  width: 280px;
  border-right: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%);
  background: color-mix(in srgb, var(--bs-body-bg), transparent 12%);
}
.sidebar .nav-link{
  border-radius: .9rem;
}
.sidebar .nav-link.active{
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: color-mix(in srgb, var(--accent), white 20%);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 75%);
}
.table td, .table th{ vertical-align: middle; }

/* === UI Hotfix: Accent styles (Jan 2026) ============================== */
.text-accent{ color: var(--accent) !important; }

.btn-accent{
  background: linear-gradient(135deg, var(--accent), #22c55e);
  border: 0 !important;
  color: #06110b !important;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 10px 30px rgba(34,197,94,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-accent:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 14px 34px rgba(34,197,94,.22);
}
.btn-accent:active{
  transform: translateY(0);
  filter: brightness(1.0);
}
.btn-accent:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent),
    0 10px 30px rgba(34,197,94,.18);
}
.btn-accent:disabled{
  opacity: .75;
  transform: none;
}

/* Make the primary CTA feel "app-like" without breaking layout */
#createForm .btn-accent{
  min-height: 56px;
  border-radius: 999px;
}

/* Add-on UI styles for CTA + accent (safe to paste at END of assets/css/app.css) */
.text-accent{ color: var(--accent) !important; }

.btn-accent{
  background: linear-gradient(135deg, var(--accent), #22c55e);
  border: 0 !important;
  color: #06110b !important;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 10px 30px rgba(34,197,94,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-accent:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 14px 34px rgba(34,197,94,.22);
}
.btn-accent:active{ transform: translateY(0); }
.btn-accent:disabled{ opacity: .75; transform:none; }

#createForm .btn-accent{
  min-height: 56px;
  border-radius: 999px;
}

/* ================= GOZST Admin/UI Theme Fix (Jan 2026 - v2) =================
   Fix: light theme content appearing blank (white-on-white).
   Paste at end of assets/css/app.css
*/

:root{
  --card-bg: rgba(255,255,255,.06);
  --card-border: rgba(255,255,255,.10);
  --muted: rgba(255,255,255,.72);
  --muted-2: rgba(255,255,255,.60);
  --shell-bg:
    radial-gradient(1100px 700px at 10% 10%, rgba(109,40,217,.20), transparent 55%),
    radial-gradient(900px 550px at 90% 0%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,14,20,1), rgba(8,10,14,1));
}

[data-bs-theme="light"]{
  --card-bg: rgba(255,255,255,.82);
  --card-border: rgba(15,23,42,.10);
  --muted: rgba(15,23,42,.72);
  --muted-2: rgba(15,23,42,.60);
  --shell-bg:
    radial-gradient(1100px 700px at 10% 10%, rgba(109,40,217,.12), transparent 55%),
    radial-gradient(900px 550px at 90% 0%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(248,250,252,1), rgba(241,245,249,1));
}

.admin-shell, .app-bg{
  background: var(--shell-bg);
  min-height: 100vh;
}

.hero-card{
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
}

.small-muted{ color: var(--muted) !important; }
.small-muted-2{ color: var(--muted-2) !important; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Ensure headings/text visible in light mode */
[data-bs-theme="light"] .hero-card,
[data-bs-theme="light"] .hero-card *{
  color: color-mix(in srgb, var(--bs-body-color), transparent 0%);
}
[data-bs-theme="light"] .hero-card .small-muted,
[data-bs-theme="light"] .hero-card .form-text{
  color: var(--muted) !important;
}

/* Sidebar theme coherence */
.sidebar{
  background: color-mix(in srgb, var(--card-bg), transparent 30%) !important;
  border-right: 1px solid var(--card-border);
}
.sidebar .nav-link{ color: var(--muted) !important; }
[data-bs-theme="light"] .sidebar .nav-link{ color: rgba(15,23,42,.78) !important; }
.sidebar .nav-link.active{
  color: color-mix(in srgb, var(--accent), white 18%) !important;
}

/* Tables: make sure header isn't pure white and has contrast */
.table thead th{
  background: color-mix(in srgb, var(--card-bg), black 6%) !important;
}
[data-bs-theme="light"] .table thead th{
  background: color-mix(in srgb, var(--card-bg), black 2%) !important;
}
.table tbody td{ background: transparent !important; }


/* Global floating orbs background */
.floating-orbs{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.floating-orbs .orb{
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  opacity: .35;
  filter: blur(0px);
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent), white 18%), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(99,102,241,.22), transparent 62%);
  animation: gozstFloat 14s ease-in-out infinite;
}
.floating-orbs .orb1{ top: -120px; left: -140px; animation-duration: 18s; }
.floating-orbs .orb2{ top: 20%; right: -160px; width: 420px; height: 420px; opacity:.28; animation-duration: 22s; }
.floating-orbs .orb3{ bottom: -160px; left: 20%; width: 520px; height: 520px; opacity:.22; animation-duration: 26s; }
@keyframes gozstFloat{
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-22px,0) scale(1.03); }
}

/* Cookie notice */
.cookie-notice{
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: min(560px, calc(100% - 36px));
  padding: 14px 14px;
  background: color-mix(in srgb, var(--bs-body-bg), rgba(0,0,0,.05) 10%);
  border: 1px solid rgba(255,255,255,.08);
  z-index: 1055;
}

.brand-text{ color: var(--bs-body-color); }

/* Ensure content above background orbs */
.gozst-nav, main, footer, .hero, .container { position: relative; z-index: 1; }


/* === GoZST: Created modal (more opaque + larger) === */
.gozst-modal{
  background: rgba(18,20,24,.97);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 110px rgba(0,0,0,.65);
  border-radius: 18px;
}
.modal-backdrop.show{ opacity: .78; }
[data-bs-theme="light"] .gozst-modal{
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.08);
}

/* Keep share buttons in one row on desktop */
@media (min-width: 768px){
  #createdModal .modal-body .flex-md-nowrap{ flex-wrap: nowrap !important; }
}

/* Beta badge readable on light */
[data-bs-theme="light"] .navbar .badge{
  color: rgba(0,0,0,.75) !important;
  border-color: rgba(0,0,0,.12) !important;
  background: rgba(25,135,84,.12) !important;
}

/* Footer: tighter spacing */
.footer-links{
  margin-top: 8px;
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.footer-links a{ text-decoration:none; }


/* Share modal buttons */
.share-buttons{display:flex;flex-wrap:wrap;justify-content:center;}
.share-buttons .btn-share{flex:0 1 150px;min-width:140px;white-space:nowrap;padding:.65rem 1.1rem;}
@media (max-width: 520px){
  .share-buttons .btn-share{flex:1 1 42%;min-width:0;width:100%;}
}
.created-url{font-weight:800;letter-spacing:.5px;}


/* Admin table controls */
.gozst-table-controls{padding:4px 2px;}
.gozst-sortable{user-select:none;}
.gozst-sortable:hover{text-decoration:underline;}