/* ============================================================
   U2bAi — Shared Stylesheet
   YouTube Color Palette — Full Fidelity
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* ──────────────────────────────────────────
   CSS Custom Properties (YouTube palette)
────────────────────────────────────────── */
:root {
  --yt-bg:            #0F0F0F;
  --yt-surface:       #272727;
  --yt-surface-alt:   #1F1F1F;
  --yt-hover:         #3F3F3F;
  --yt-red:           #FF0000;
  --yt-red-hover:     #CC0000;
  --yt-blue:          #3EA6FF;
  --yt-text:          #FFFFFF;
  --yt-text-sec:      #AAAAAA;
  --yt-text-muted:    #717171;
  --yt-border:        #3F3F3F;
  --yt-chip-bg:       #3F3F3F;

  --font:             'Roboto', sans-serif;
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-pill:      100px;

  --shadow-sm:        0 1px 3px rgba(0,0,0,.4);
  --shadow-md:        0 4px 16px rgba(0,0,0,.6);
  --shadow-lg:        0 8px 32px rgba(0,0,0,.8);

  --transition:       150ms ease;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font);
  background: var(--yt-bg);
  color: var(--yt-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--yt-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img, video { max-width: 100%; display: block; }

/* ──────────────────────────────────────────
   Typography
────────────────────────────────────────── */
.text-muted    { color: var(--yt-text-muted); }
.text-sec      { color: var(--yt-text-sec); }
.text-red      { color: var(--yt-red); }
.text-blue     { color: var(--yt-blue); }

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.25rem; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 500; }
p  { font-size: .9375rem; color: var(--yt-text-sec); }

/* ──────────────────────────────────────────
   Buttons (YouTube-style)
────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-red {
  background: var(--yt-red);
  color: #fff;
}
.btn-red:hover {
  background: var(--yt-red-hover);
  text-decoration: none;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--yt-text);
  border: 1px solid var(--yt-border);
}
.btn-ghost:hover {
  background: var(--yt-hover);
  text-decoration: none;
}

.btn-surface {
  background: var(--yt-surface);
  color: var(--yt-text);
}
.btn-surface:hover {
  background: var(--yt-hover);
  text-decoration: none;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}

.btn-sm {
  padding: 6px 12px;
  font-size: .8125rem;
}

.btn:active { transform: scale(.97); }

/* ──────────────────────────────────────────
   Chips / Badges
────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--yt-chip-bg);
  color: var(--yt-text);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: .8125rem;
  font-weight: 500;
}

.chip-red {
  background: rgba(255,0,0,.15);
  color: var(--yt-red);
  border: 1px solid rgba(255,0,0,.3);
}

.chip-blue {
  background: rgba(62,166,255,.12);
  color: var(--yt-blue);
  border: 1px solid rgba(62,166,255,.25);
}

/* ──────────────────────────────────────────
   Cards
────────────────────────────────────────── */
.card {
  background: var(--yt-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--yt-border);
  padding: 24px;
  transition: border-color var(--transition), transform var(--transition);
}

.card:hover {
  border-color: var(--yt-red);
  transform: translateY(-2px);
}

/* ──────────────────────────────────────────
   Layout helpers
────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yt-red);
  margin-bottom: 12px;
}

.section-title {
  margin-bottom: 16px;
}

.section-sub {
  color: var(--yt-text-sec);
  max-width: 560px;
  margin-bottom: 48px;
}

/* ──────────────────────────────────────────
   Divider
────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--yt-border);
  margin: 0;
}

/* ──────────────────────────────────────────
   Form elements
────────────────────────────────────────── */
.input {
  width: 100%;
  background: var(--yt-surface);
  border: 1px solid var(--yt-border);
  border-radius: var(--radius-md);
  color: var(--yt-text);
  font-family: var(--font);
  font-size: .9375rem;
  padding: 12px 16px;
  transition: border-color var(--transition);
  outline: none;
}

.input::placeholder { color: var(--yt-text-muted); }

.input:focus {
  border-color: var(--yt-blue);
}

.input-error {
  border-color: var(--yt-red) !important;
}

/* ──────────────────────────────────────────
   Scrollbar (YouTube-style)
────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--yt-bg); }
::-webkit-scrollbar-thumb { background: var(--yt-hover); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--yt-text-muted); }

/* ──────────────────────────────────────────
   Responsive
────────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .container { padding: 0 16px; }
}