/* ============================================================
   TheLoi Media Studio — shared theme tokens (LIGHT)
   ============================================================ */
:root{
  --bg:            #F6F6FB;
  --surface:       #FFFFFF;
  --card:          #FFFFFF;
  --card-2:        #F2F2F9;
  --border:        #E7E7F1;
  --border-2:      #D9D9EC;

  --accent:        #7c5cff;
  --accent-glow:   rgba(124,92,255,.14);
  --teal:          #12A78E;
  --pink:          #E8408F;

  --tt-cyan:       #0FC7C0;
  --tt-red:        #FE2C55;

  --text:          #17172B;
  --text-2:        #62627E;
  --muted:         #9B9BB4;
  --success:       #16A34A;
  --warning:       #B45309;
  --danger:        #DC2626;

  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --font-display: 'Sora', system-ui, sans-serif;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --grad-brand: linear-gradient(120deg, #5b8cff 0%, #8c5cff 45%, #ff4fa3 100%);
  --grad-tiktok: linear-gradient(120deg, var(--tt-cyan), var(--tt-red));
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
.mono{ font-family: var(--mono); }

.tls-nav{
  position: sticky; top:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.tls-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.tls-brand-mark{
  width:34px; height:34px; border-radius:10px;
  background: var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; box-shadow: 0 6px 18px rgba(124,92,255,.25);
  flex-shrink:0;
}
.tls-brand-name{ font-family: var(--font-display); font-weight:800; font-size:16px; color:var(--text); letter-spacing:-.2px; }
.tls-brand-name span{ color: var(--accent); }

.tls-nav-actions{ display:flex; align-items:center; gap:10px; }

.lang-toggle{
  display:flex; align-items:center; gap:2px;
  background: var(--card-2); border:1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.lang-toggle button{
  border:none; background:transparent; color: var(--text-2);
  font-family: var(--font); font-size:12px; font-weight:700;
  padding: 6px 12px; border-radius: 999px; cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.lang-toggle button.active{ background: var(--grad-brand); color:#fff; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius: var(--radius-sm);
  font-family: var(--font); font-weight:600; font-size:14px;
  padding: 12px 22px; cursor:pointer; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary{
  background: var(--grad-brand); color:#fff;
  box-shadow: 0 8px 24px rgba(124,92,255,.25);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124,92,255,.32); }
.btn-ghost{
  background: var(--card-2); color: var(--text);
  border:1px solid var(--border-2);
}
.btn-ghost:hover{ background: #E9E9F5; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; }

.tls-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(23,23,43,.03), 0 8px 24px rgba(23,23,43,.04);
}

.tls-footer{
  text-align:center; padding: 32px 24px 48px;
  font-size:12px; color: var(--muted);
}
.tls-footer a{ color: var(--muted); text-decoration:none; margin: 0 8px; }
.tls-footer a:hover{ color: var(--text-2); }

::selection{ background: var(--accent-glow); }