/*
Theme Name: StreamFlow
Theme URI: https://your-domain.com/
Author: StreamFlow
Author URI: https://your-domain.com/
Description: StreamFlow — a premium, Apple-style dark theme that turns YouTube Live URLs into stable, player-friendly links via a custom REST endpoint.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: streamflow
*/

/* ---------- Design tokens ---------- */
:root {
  --sf-bg: #0a0a0c;
  --sf-bg-2: #111114;
  --sf-surface: rgba(255, 255, 255, 0.04);
  --sf-border: rgba(255, 255, 255, 0.10);
  --sf-text: #f5f5f7;
  --sf-muted: #9b9ba3;
  --sf-primary: #6aa9ff;
  --sf-primary-2: #b388ff;
  --sf-danger: #ff6a6a;
  --sf-radius: 18px;
  --sf-radius-lg: 26px;
  --sf-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
  --sf-glow: 0 0 40px rgba(106,169,255,0.35);
  --sf-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse at top, rgba(106,169,255,0.18), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(179,136,255,0.15), transparent 60%),
    var(--sf-bg);
  background-attachment: fixed;
  color: var(--sf-text);
  font-family: var(--sf-font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
input { font-family: inherit; }

/* ---------- Layout ---------- */
.sf-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.sf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0;
}
.sf-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
.sf-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sf-primary), var(--sf-primary-2));
  box-shadow: var(--sf-glow);
  display: grid; place-items: center; color: #0a0a0c; font-weight: 800;
}
.sf-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--sf-surface); border: 1px solid var(--sf-border);
  font-size: 12px; color: var(--sf-muted);
}
.sf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sf-primary); box-shadow: 0 0 10px currentColor; }

.sf-hero { text-align: center; padding: 64px 0 24px; }
.sf-hero h1 {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-weight: 600;
}
.sf-hero h1 .sf-grad {
  background: linear-gradient(90deg, var(--sf-primary), var(--sf-primary-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sf-hero p { color: var(--sf-muted); font-size: clamp(15px, 2vw, 18px); max-width: 560px; margin: 0 auto; }

/* ---------- Glass panels ---------- */
.sf-glass {
  background: var(--sf-surface);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow);
}

/* ---------- Converter ---------- */
.sf-converter { margin-top: 36px; padding: 14px; }
.sf-row { display: flex; gap: 10px; flex-direction: column; }
@media (min-width: 640px) { .sf-row { flex-direction: row; } }

.sf-input-wrap {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--sf-radius);
  background: rgba(0,0,0,0.35); border: 1px solid var(--sf-border);
  transition: border-color .2s ease;
}
.sf-input-wrap:focus-within { border-color: rgba(106,169,255,0.6); }
.sf-input-wrap svg { flex-shrink: 0; opacity: .7; }
.sf-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--sf-text); font-size: 16px;
}
.sf-input::placeholder { color: rgba(155,155,163,0.6); }

.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--sf-radius);
  font-weight: 600; font-size: 14px; color: #0a0a0c;
  background: linear-gradient(135deg, var(--sf-primary), var(--sf-primary-2));
  box-shadow: var(--sf-glow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sf-btn:hover { transform: translateY(-1px); box-shadow: 0 0 60px rgba(106,169,255,0.55); }

.sf-btn-ghost {
  background: rgba(255,255,255,0.06); color: var(--sf-text);
  border: 1px solid var(--sf-border); box-shadow: none;
}
.sf-btn-ghost:hover { background: rgba(255,255,255,0.12); transform: none; box-shadow: none; }

.sf-hint { padding: 10px 16px 4px; font-size: 12px; color: var(--sf-muted); }
.sf-hint code { color: var(--sf-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sf-error { padding: 10px 16px 4px; font-size: 12px; color: var(--sf-danger); }

/* ---------- Result ---------- */
.sf-result { margin-top: 22px; padding: 22px; }
.sf-result-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  font-size: 12px; color: var(--sf-muted); text-transform: uppercase; letter-spacing: 0.18em;
}
.sf-ready { color: var(--sf-primary); letter-spacing: 0.05em; text-transform: none; }
.sf-result-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .sf-result-row { flex-direction: row; align-items: stretch; } }
.sf-link {
  flex: 1; word-break: break-all;
  background: rgba(0,0,0,0.35); border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius); padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
}

/* ---------- Steps ---------- */
.sf-steps-title {
  text-align: center; font-size: 12px; letter-spacing: 0.2em;
  color: var(--sf-muted); text-transform: uppercase; margin: 80px 0 24px;
}
.sf-steps { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .sf-steps { grid-template-columns: repeat(3, 1fr); } }
.sf-step { padding: 24px; transition: transform .2s ease; }
.sf-step:hover { transform: translateY(-2px); }
.sf-step .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sf-primary); font-size: 12px; }
.sf-step h3 { margin: 8px 0 6px; font-size: 16px; font-weight: 600; }
.sf-step p { margin: 0; color: var(--sf-muted); font-size: 14px; line-height: 1.5; }

/* ---------- Footer ---------- */
.sf-footer { padding: 48px 0 28px; text-align: center; color: var(--sf-muted); font-size: 12px; }

/* ---------- Animation ---------- */
@keyframes sf-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sf-animate { animation: sf-fade-in .35s ease both; }