@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --d11-red: #e41e2b;
  --d11-red-dark: #c41520;
  --d11-red-soft: #fff1f2;
  --d11-bg: #f4f5f7;
  --d11-card: #ffffff;
  --d11-ink: #141416;
  --d11-muted: #6b7280;
  --d11-line: #e8eaed;
  --d11-green: #00b137;
  --d11-navy: #12131a;

  --bg-surface: #ffffff;
  --bg-elevated: #f4f5f7;
  --text-primary: #141416;
  --text-secondary: #6b7280;
  --accent-primary: #e41e2b;
  --accent-success: #00b137;
  --border-subtle: #e8eaed;
  --team-a: #1a4a7a;
  --team-b: #c41520;

  --app-header: 3rem;
  --app-nav: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  --app-radius: 1rem;
  --app-radius-sm: 0.75rem;
}

html {
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  color: var(--d11-ink);
  background:
    radial-gradient(ellipse 120% 60% at 50% -20%, rgba(228, 30, 43, 0.07), transparent 55%),
    radial-gradient(ellipse 80% 40% at 100% 0%, rgba(0, 177, 55, 0.04), transparent 45%),
    var(--d11-bg);
  font-family: var(--font-sans), system-ui, sans-serif;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

.font-display {
  font-family: var(--font-display), var(--font-sans), system-ui, sans-serif;
}

/* App shell canvas */
.app-shell {
  position: relative;
  isolation: isolate;
}

.app-shell::before {
  content: '';
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(20, 20, 22, 0.035) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 70%);
}

@layer components {
  .d11-card {
    @apply rounded-2xl border border-d11-line/80 bg-white shadow-card transition;
  }
  .d11-card:active {
    @apply scale-[0.992];
  }
  .d11-sheet {
    @apply rounded-2xl border border-d11-line/80 bg-white shadow-card;
  }
  .d11-tab {
    @apply relative flex-1 cursor-pointer py-2.5 text-center text-xs font-bold tracking-wide text-gray-500 transition active:bg-gray-50;
  }
  .d11-input {
    @apply w-full rounded-xl border border-gray-200 bg-gray-50/80 px-3.5 py-2.5 text-sm text-gray-900 outline-none transition placeholder:text-gray-400 focus:border-d11-red focus:bg-white focus:ring-2 focus:ring-d11-red/15;
  }
  .d11-tab-active {
    @apply text-d11-red;
  }
  .d11-tab-active::after {
    content: '';
    @apply absolute bottom-0 left-[20%] right-[20%] h-0.5 rounded-full bg-d11-red;
  }
  .d11-progress {
    @apply h-1.5 w-full overflow-hidden rounded-full bg-gray-100;
  }
  .d11-progress > span {
    @apply block h-full rounded-full bg-gradient-to-r from-d11-red to-[#ff4d57] transition-[width] duration-500;
  }
  .d11-segment {
    @apply sticky z-30 overflow-hidden rounded-2xl border border-d11-line/80 bg-white/90 shadow-card backdrop-blur-xl;
    top: calc(3rem + env(safe-area-inset-top, 0px));
  }
  .app-page {
    @apply animate-page-in space-y-3;
  }
  .app-section-title {
    @apply px-1 text-[11px] font-bold uppercase tracking-[0.14em] text-d11-muted;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto;
  }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: #c4c4c4;
  border-radius: 4px;
}

@keyframes shimmer-slide {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-block {
  background: linear-gradient(
    90deg,
    rgb(39 39 42) 0%,
    rgb(63 63 70) 40%,
    rgb(39 39 42) 80%
  );
  background-size: 200% 100%;
  animation: shimmer-slide 1.4s ease-in-out infinite;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-page-in {
  animation: page-in 0.28s ease-out both;
}

@keyframes live-ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  75%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.live-dot {
  position: relative;
}
.live-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: currentColor;
  animation: live-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-block {
    animation: none;
    background: rgb(39 39 42);
  }
  .animate-page-in {
    animation: none;
  }
  .live-dot::before {
    animation: none;
  }
}

@keyframes success-pop-in {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.success-pop {
  animation: success-pop-in 0.35s ease-out both;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(72px) rotate(220deg);
    opacity: 0;
  }
}

.confetti {
  position: absolute;
  top: 12%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti-fall 1.1s ease-out forwards;
}
.confetti.c1 {
  left: 18%;
  background: #fbbf24;
  animation-delay: 0.05s;
}
.confetti.c2 {
  left: 32%;
  background: #fff;
  animation-delay: 0.15s;
}
.confetti.c3 {
  left: 48%;
  background: #fde68a;
  animation-delay: 0.08s;
}
.confetti.c4 {
  left: 64%;
  background: #fff;
  animation-delay: 0.2s;
}
.confetti.c5 {
  left: 78%;
  background: #fbbf24;
  animation-delay: 0.12s;
}

@keyframes notif-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

.notif-pulse {
  animation: notif-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .success-pop,
  .confetti,
  .notif-pulse {
    animation: none;
  }
}

.d11-pitch {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.35) 0%, transparent 50%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 32px,
      rgba(255, 255, 255, 0.12) 32px,
      rgba(255, 255, 255, 0.12) 33px
    ),
    linear-gradient(180deg, #3ecf6a 0%, var(--accent-success) 40%, #00992f 100%);
  background-color: var(--accent-success);
}

.ftb-shell {
  --ftb-header: 2.75rem;
  --ftb-footer: 3.5rem;
  display: flex;
  flex-direction: column;
  min-height: min(68dvh, 640px);
  max-height: min(82dvh, 760px);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ftb-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-elevated);
}

.ftb-seg {
  height: 6px;
  border-radius: 999px;
  border: 1.5px solid var(--border-subtle);
  background: transparent;
  flex: 1;
  min-width: 0;
}
.ftb-seg-filled {
  border-color: var(--accent-success);
  background: var(--accent-success);
}

/* Soft light shimmer for public app loaders */
@keyframes soft-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.soft-shimmer {
  background: linear-gradient(
    90deg,
    #eceef2 0%,
    #f8f9fb 40%,
    #eceef2 80%
  );
  background-size: 200% 100%;
  animation: soft-shimmer 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .soft-shimmer {
    animation: none;
    background: #eceef2;
  }
}

/* MY11s premium admin console */
.admin-body { background: #07080c; color: #f4f4f5; }
.admin-topbar { position: sticky; top: 0; z-index: 50; height: 72px; display:flex; align-items:center; justify-content:space-between; padding: 0 22px; background: rgba(7,8,12,.92); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,.07); box-shadow: 0 12px 40px rgba(0,0,0,.24); }
.admin-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.admin-brand-mark { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; overflow:hidden; background: radial-gradient(circle at 35% 25%, rgba(239,68,68,.24), transparent 55%), #101116; border:1px solid rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(220,38,38,.18); }
.admin-brand-mark img { width:52px; height:38px; object-fit:contain; }
.topbar-pill,.topbar-switch { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:9px; font-size:10px; font-weight:700; color:#a1a1aa; border:1px solid rgba(255,255,255,.07); background:#0d0f14; }
.topbar-pill { color:#fca5a5; border-color:rgba(239,68,68,.18); }
.topbar-switch:hover,.topbar-switch.active { color:#fff; background:#17191f; }
.admin-icon-btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:#a1a1aa; background:#0d0f14; border:1px solid rgba(255,255,255,.07); transition:.2s; }
.admin-icon-btn:hover { color:#fca5a5; border-color:rgba(239,68,68,.3); }
.admin-sidebar { width:258px; flex:0 0 258px; min-height:calc(100dvh - 72px); display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(180deg,#0a0b10,#08090d); border-right:1px solid rgba(255,255,255,.06); }
.admin-sidebar-scroll { padding:18px 12px; overflow:auto; }
.admin-nav-label { padding:7px 10px 10px; color:#52525b; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; }
.admin-nav-item { position:relative; display:flex; align-items:center; gap:11px; min-height:42px; padding:0 11px; margin:3px 0; border-radius:11px; color:#8f9199; font-size:12px; font-weight:650; border:1px solid transparent; transition:.18s ease; }
.admin-nav-item:hover { color:#f4f4f5; background:rgba(255,255,255,.035); }
.admin-nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(220,38,38,.15),rgba(220,38,38,.04)); border-color:rgba(239,68,68,.16); box-shadow: inset 2px 0 0 #ef4444, 0 8px 22px rgba(0,0,0,.12); }
.admin-nav-icon { width:27px; height:27px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#111319; border:1px solid rgba(255,255,255,.05); }
.admin-nav-icon svg { width:14px; height:14px; }
.admin-nav-item.active .admin-nav-icon { color:#fca5a5; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.15); }
.admin-nav-arrow { width:13px; color:#ef4444; }
.admin-sidebar-footer { margin:12px; padding:14px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.admin-main { min-width:0; flex:1; overflow:auto; }
.admin-page { max-width:1480px; margin:0 auto; padding:28px; }
.admin-kicker { color:#71717a; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; }
.admin-title { margin-top:5px; font-size:26px; line-height:1.1; font-weight:900; letter-spacing:-.03em; color:#fff; }
.admin-subtitle { margin-top:7px; color:#71717a; font-size:11px; }
.admin-panel { border:1px solid rgba(255,255,255,.07); border-radius:18px; background:linear-gradient(145deg,rgba(19,21,28,.96),rgba(10,11,15,.96)); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.admin-table { width:100%; border-collapse:separate; border-spacing:0; }
.admin-table th { padding:12px 16px; text-align:left; color:#62646d; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.14); }
.admin-table td { padding:13px 16px; color:#d4d4d8; font-size:11px; border-bottom:1px solid rgba(255,255,255,.045); }
.admin-table tr:hover td { background:rgba(255,255,255,.018); }
.admin-table tr:last-child td { border-bottom:0; }
.admin-input { width:100%; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:#090a0e; color:#fff; padding:10px 12px; outline:none; font-size:12px; transition:.18s; }
.admin-input:focus { border-color:rgba(239,68,68,.55); box-shadow:0 0 0 3px rgba(239,68,68,.08); }
.admin-label { display:block; margin-bottom:6px; color:#a1a1aa; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.admin-action { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 10px; border-radius:9px; font-size:10px; font-weight:800; border:1px solid rgba(255,255,255,.08); background:#111319; color:#d4d4d8; transition:.18s; }
.admin-action:hover { background:#181a20; color:#fff; border-color:rgba(255,255,255,.14); }
.admin-action.red { color:#fca5a5; border-color:rgba(239,68,68,.18); background:rgba(239,68,68,.06); }
.admin-action.red:hover { background:rgba(239,68,68,.12); }
.admin-stat { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:17px; padding:17px; background:linear-gradient(145deg,#14161d,#0c0d12); box-shadow:0 14px 34px rgba(0,0,0,.16); }
.admin-stat::after { content:''; position:absolute; right:-28px; top:-32px; width:100px; height:100px; border-radius:999px; background:rgba(239,68,68,.07); filter:blur(4px); }
.admin-modal-backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(10px); }
.admin-modal { border:1px solid rgba(255,255,255,.09); background:linear-gradient(145deg,#161820,#0b0c10); box-shadow:0 30px 90px rgba(0,0,0,.6); }
@media (max-width: 900px) { .admin-sidebar { width:78px; flex-basis:78px; } .admin-nav-item { justify-content:center; } .admin-nav-item > span.flex-1,.admin-nav-arrow,.admin-nav-label,.admin-sidebar-footer { display:none; } .admin-page { padding:18px; } }
@media (max-width: 640px) { .admin-sidebar { display:none; } .admin-topbar { padding:0 12px; } .admin-page { padding:14px; } .admin-title { font-size:22px; } }