/*
 * DTF CLICK — Platform Design System v1.0
 * ─────────────────────────────────────────────────────────────────
 * Single source of truth for every token, component, and utility
 * across the entire DTF CLICK platform.
 *
 * Include on every page: <link rel="stylesheet" href="/dtf-system.css">
 * Load BEFORE any page-level <style> blocks so page overrides win.
 */

/* ── Inter font (premium, modern, streaming-platform feel) ─────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --dtf-bg:        #08080e;
  --dtf-surface-0: #0c0c15;
  --dtf-surface-1: #111119;
  --dtf-surface-2: #17172a;

  /* Borders */
  --dtf-border:       rgba(255,255,255,0.07);
  --dtf-border-hover: rgba(255,255,255,0.14);
  --dtf-border-focus: rgba(232,88,32,0.45);

  /* Brand orange */
  --dtf-orange:      #e85820;
  --dtf-orange-lite: #f06535;
  --dtf-orange-dim:  rgba(232,88,32,0.12);
  --dtf-orange-glow: rgba(232,88,32,0.22);

  /* Purple accent (competitions) */
  --dtf-purple:     #7c3aed;
  --dtf-purple-dim: rgba(124,58,237,0.14);

  /* Status */
  --dtf-green:     #22c55e;
  --dtf-green-dim: rgba(34,197,94,0.12);
  --dtf-red:       #ef4444;
  --dtf-red-dim:   rgba(239,68,68,0.11);
  --dtf-gold:      #f59e0b;
  --dtf-gold-dim:  rgba(245,158,11,0.12);

  /* Text */
  --dtf-text:   #efeff5;
  --dtf-text-2: rgba(239,239,245,0.58);
  --dtf-text-3: rgba(239,239,245,0.32);

  /* Aliases so existing pages that reference --bg, --surface etc. keep working */
  --bg:         var(--dtf-bg);
  --surface:    var(--dtf-surface-1);
  --border:     var(--dtf-border);
  --orange:     var(--dtf-orange);
  --purple:     var(--dtf-purple);
  --text-muted: var(--dtf-text-2);

  /* Typography */
  --dtf-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Shape */
  --dtf-r-xs: 6px;
  --dtf-r-sm: 8px;
  --dtf-r:    12px;
  --dtf-r-lg: 16px;
  --dtf-r-xl: 20px;

  /* Elevation */
  --dtf-shadow:      0 4px 24px rgba(0,0,0,0.38);
  --dtf-shadow-lg:   0 8px 48px rgba(0,0,0,0.55);
  --dtf-shadow-glow: 0 4px 24px var(--dtf-orange-glow);

  /* Motion */
  --dtf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dtf-dur:  0.18s;
}

/* ── Base reset & typography ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--dtf-font);
  background: var(--dtf-bg);
  color: var(--dtf-text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
}

a { color: inherit; }
button { font-family: var(--dtf-font); }
input, textarea, select { font-family: var(--dtf-font); }

/* ── Unified navigation ────────────────────────────────────────── */
.dtf-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8,8,14,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--dtf-border);
}

.dtf-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.dtf-nav-brand img { width: 28px; height: 28px; border-radius: 6px; }
.dtf-nav-brand-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--dtf-orange);
  letter-spacing: -0.5px;
  font-feature-settings: "cv11";
}

.dtf-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dtf-nav-link {
  color: var(--dtf-text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--dtf-r-sm);
  transition: color var(--dtf-dur) var(--dtf-ease),
              background var(--dtf-dur) var(--dtf-ease);
}
.dtf-nav-link:hover  { color: var(--dtf-text); background: rgba(255,255,255,0.06); }
.dtf-nav-link.active { color: var(--dtf-text); font-weight: 600; }

.dtf-nav-cta {
  margin-left: 8px;
  border: 1px solid rgba(232,88,32,0.42) !important;
  color: var(--dtf-orange) !important;
  font-weight: 700 !important;
  border-radius: var(--dtf-r-sm);
}
.dtf-nav-cta:hover {
  background: var(--dtf-orange-dim) !important;
  border-color: var(--dtf-orange) !important;
}

@media (max-width: 640px) {
  .dtf-nav { padding: 0 16px; }
  .dtf-nav-link:not(.dtf-nav-cta) { display: none; }
}

/* ── Button system ─────────────────────────────────────────────── */
.dtf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--dtf-r-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--dtf-font);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background var(--dtf-dur) var(--dtf-ease),
              transform   var(--dtf-dur) var(--dtf-ease),
              box-shadow  var(--dtf-dur) var(--dtf-ease),
              opacity     var(--dtf-dur) var(--dtf-ease);
  white-space: nowrap;
  -webkit-appearance: none;
}
.dtf-btn:disabled,
.dtf-btn[disabled] { opacity: 0.42; cursor: not-allowed; pointer-events: none; }

.dtf-btn-primary {
  background: var(--dtf-orange);
  color: #fff;
}
.dtf-btn-primary:hover {
  background: var(--dtf-orange-lite);
  transform: translateY(-1px);
  box-shadow: var(--dtf-shadow-glow);
}
.dtf-btn-primary:active { transform: translateY(0); box-shadow: none; }

.dtf-btn-purple {
  background: var(--dtf-purple);
  color: #fff;
}
.dtf-btn-purple:hover {
  background: #8b5cf6;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(124,58,237,0.28);
}

.dtf-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--dtf-text);
  border: 1px solid var(--dtf-border);
}
.dtf-btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--dtf-border-hover);
}

.dtf-btn-danger {
  background: var(--dtf-red-dim);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.22);
}
.dtf-btn-danger:hover { background: rgba(239,68,68,0.18); }

.dtf-btn-sm  { padding: 7px 14px; font-size: 12px; border-radius: var(--dtf-r-xs); }
.dtf-btn-lg  { padding: 15px 32px; font-size: 16px; border-radius: 10px; }
.dtf-btn-xl  { padding: 18px 40px; font-size: 17px; border-radius: 11px; }
.dtf-btn-full { width: 100%; }

/* ── Card ──────────────────────────────────────────────────────── */
.dtf-card {
  background: var(--dtf-surface-1);
  border: 1px solid var(--dtf-border);
  border-radius: var(--dtf-r);
  overflow: hidden;
}
.dtf-card-interactive {
  cursor: pointer;
  transition: border-color var(--dtf-dur) var(--dtf-ease),
              transform    var(--dtf-dur) var(--dtf-ease),
              box-shadow   var(--dtf-dur) var(--dtf-ease);
}
.dtf-card-interactive:hover {
  border-color: var(--dtf-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--dtf-shadow);
}

/* ── Form inputs ───────────────────────────────────────────────── */
.dtf-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--dtf-r-sm);
  color: var(--dtf-text);
  font-size: 14px;
  font-family: var(--dtf-font);
  outline: none;
  transition: border-color var(--dtf-dur), box-shadow var(--dtf-dur);
  -webkit-appearance: none;
}
.dtf-input:focus {
  border-color: var(--dtf-border-focus);
  box-shadow: 0 0 0 3px rgba(232,88,32,0.1);
}
.dtf-input::placeholder { color: var(--dtf-text-3); }

.dtf-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dtf-text-2);
  margin-bottom: 8px;
}
.dtf-field { margin-bottom: 18px; }
.dtf-field .dtf-label { color: var(--dtf-text-3); }
.dtf-field .dtf-input:focus { border-color: var(--dtf-border-focus); }

/* ── Badges ────────────────────────────────────────────────────── */
.dtf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.dtf-badge-orange { background: var(--dtf-orange-dim); color: var(--dtf-orange); }
.dtf-badge-green  { background: var(--dtf-green-dim);  color: #4ade80; }
.dtf-badge-purple { background: var(--dtf-purple-dim); color: #a78bfa; }
.dtf-badge-red    { background: var(--dtf-red-dim);    color: #f87171; }
.dtf-badge-gold   { background: var(--dtf-gold-dim);   color: #fbbf24; }
.dtf-badge-muted  {
  background: rgba(255,255,255,0.06);
  color: var(--dtf-text-2);
  border: 1px solid var(--dtf-border);
}

/* ── Status messages ───────────────────────────────────────────── */
.dtf-msg {
  font-size: 13px;
  padding: 11px 14px;
  border-radius: var(--dtf-r-sm);
  line-height: 1.5;
  display: none;
}
.dtf-msg.show   { display: block; }
.dtf-msg-error  { background: var(--dtf-red-dim);   color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.dtf-msg-success{ background: var(--dtf-green-dim); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.dtf-msg-info   { background: var(--dtf-orange-dim);color: #fb923c; border: 1px solid rgba(232,88,32,0.2); }

/* ── Loading skeleton ──────────────────────────────────────────── */
.dtf-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: dtf-shimmer 1.6s var(--dtf-ease) infinite;
  border-radius: var(--dtf-r-xs);
}
@keyframes dtf-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Spinner ───────────────────────────────────────────────────── */
.dtf-spin {
  width: 32px;
  height: 32px;
  border: 2.5px solid rgba(255,255,255,0.09);
  border-top-color: var(--dtf-orange);
  border-radius: 50%;
  animation: dtf-rot 0.7s linear infinite;
}
.dtf-spin-sm { width: 20px; height: 20px; border-width: 2px; }
@keyframes dtf-rot { to { transform: rotate(360deg); } }

/* ── Empty state ───────────────────────────────────────────────── */
.dtf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  gap: 0;
}
.dtf-empty-icon   { width: 44px; height: 44px; color: var(--dtf-text-3); margin-bottom: 16px; }
.dtf-empty-title  { font-size: 16px; font-weight: 700; color: var(--dtf-text-2); margin-bottom: 6px; }
.dtf-empty-sub    { font-size: 13px; color: var(--dtf-text-3); line-height: 1.65; max-width: 300px; }

/* ── Divider ───────────────────────────────────────────────────── */
.dtf-divider { height: 1px; background: var(--dtf-border); width: 100%; }
.dtf-divider-text {
  display: flex; align-items: center; gap: 12px;
  color: var(--dtf-text-3); font-size: 12px;
}
.dtf-divider-text::before,
.dtf-divider-text::after { content: ''; flex: 1; height: 1px; background: var(--dtf-border); }

/* ── Section heading ───────────────────────────────────────────── */
.dtf-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dtf-text-3);
}

/* ── Page header (back-nav style, no global nav) ───────────────── */
.dtf-page-hdr {
  height: 54px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(8,8,14,0.96);
  border-bottom: 1px solid var(--dtf-border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dtf-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dtf-text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--dtf-r-sm);
  transition: color var(--dtf-dur), background var(--dtf-dur);
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  background: none;
}
.dtf-back-btn:hover { color: var(--dtf-text); background: rgba(255,255,255,0.08); }
.dtf-page-hdr-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--dtf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dtf-page-hdr-logo {
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--dtf-orange), #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Lucide icon base ──────────────────────────────────────────── */
.ic {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }

/* ── Page fade-in ──────────────────────────────────────────────── */
@keyframes dtf-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dtf-in { animation: dtf-in 0.28s var(--dtf-ease) both; }

/* ── Staggered list entrance ───────────────────────────────────── */
.dtf-stagger > * {
  animation: dtf-in 0.28s var(--dtf-ease) both;
}
.dtf-stagger > *:nth-child(1)  { animation-delay: 0.04s; }
.dtf-stagger > *:nth-child(2)  { animation-delay: 0.08s; }
.dtf-stagger > *:nth-child(3)  { animation-delay: 0.12s; }
.dtf-stagger > *:nth-child(4)  { animation-delay: 0.16s; }
.dtf-stagger > *:nth-child(5)  { animation-delay: 0.20s; }
.dtf-stagger > *:nth-child(6)  { animation-delay: 0.24s; }
.dtf-stagger > *:nth-child(7+) { animation-delay: 0.28s; }

/* ── Toast ─────────────────────────────────────────────────────── */
.dtf-toast-el {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(70px);
  background: var(--dtf-surface-2);
  border: 1px solid var(--dtf-border-hover);
  color: var(--dtf-text);
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  transition: transform 0.28s var(--dtf-ease), opacity 0.28s;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--dtf-shadow);
  max-width: min(90vw, 440px);
  text-align: center;
}
.dtf-toast-el.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Utility ───────────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}