/* ═══════════════════════════════════════════════════════════
   Transkript Aracı — Shared Design System
   Palette: Midnight Slate (dark-first, neon-free)
═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design Tokens: Dark (default) ──────────────────────── */
:root {
  --bg:       #0e0f14;
  --surface:  #13151e;
  --elevated: #1a1d28;
  --hover:    #1f2230;
  --border:   #252836;
  --border-s: #1c1f2e;
  --focus:    #5b6ad1;

  --text:   #eeeef5;
  --text-2: #9295b0;
  --text-3: #5a5d78;

  --accent:   #5b6ad1;
  --accent-h: #4c5bc2;
  --accent-d: rgba(91,106,209,.13);

  --ok:   #4a9e70;
  --ok-d: rgba(74,158,112,.13);
  --err:  #c45858;
  --err-d:rgba(196,88,88,.13);
  --warn: #c49a3a;
  --warn-d:rgba(196,154,58,.13);

  --r:   14px;
  --r-s: 9px;
  --r-xs:6px;

  --shadow:   0 1px 3px rgba(0,0,0,.45), 0 8px 32px rgba(0,0,0,.35);
  --shadow-s: 0 1px 4px rgba(0,0,0,.3);
  --glow:     0 0 0 3px rgba(91,106,209,.22);
}

/* ── Design Tokens: Light ────────────────────────────────── */
[data-theme="light"] {
  --bg:       #f2f3f8;
  --surface:  #ffffff;
  --elevated: #edf0f9;
  --hover:    #e4e8f4;
  --border:   #ced3e8;
  --border-s: #e4e8f4;
  --focus:    #5b6ad1;

  --text:   #12131e;
  --text-2: #484b6a;
  --text-3: #888bab;

  --accent:   #5b6ad1;
  --accent-h: #4c5bc2;
  --accent-d: rgba(91,106,209,.1);

  --ok:   #2d7a52;
  --ok-d: rgba(45,122,82,.1);
  --err:  #a83535;
  --err-d:rgba(168,53,53,.1);
  --warn: #9e7520;
  --warn-d:rgba(158,117,32,.1);

  --shadow:   0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.07);
  --shadow-s: 0 1px 4px rgba(0,0,0,.07);
  --glow:     0 0 0 3px rgba(91,106,209,.18);
}

/* ── Base ────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 0 1rem;
}
.nav-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: .55rem; height: 56px;
}
.nav-logo {
  font-size: .9rem; font-weight: 700; text-decoration: none; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #8b80e0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-sep { flex: 1; }
.nav-email {
  font-size: .75rem; color: var(--text-3);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-link {
  font-size: .8rem; font-weight: 500; color: var(--text-2); text-decoration: none;
  padding: .3rem .6rem; border-radius: var(--r-xs); transition: all .15s;
}
.nav-link:hover { color: var(--text); background: var(--hover); }
.nav-btn {
  font-size: .8rem; font-weight: 500; color: var(--text-2);
  background: none; border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: .3rem .6rem; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.nav-btn:hover { color: var(--text); border-color: var(--text-3); background: var(--hover); }

/* ── Theme Toggle ────────────────────────────────────────── */
.theme-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--elevated); color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.theme-btn:hover { color: var(--text); border-color: var(--text-3); }
.icon-sun  { display: block;  }
.icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }

.theme-fixed { position: fixed; top: 1rem; right: 1rem; z-index: 200; }

/* ── Page Content ────────────────────────────────────────── */
.page { max-width: 760px; margin: 0 auto; padding: 2rem 1rem 5rem; }

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow);
}

/* ── Input ───────────────────────────────────────────────── */
.inp {
  width: 100%; background: var(--elevated); border: 1px solid var(--border);
  border-radius: var(--r-s); color: var(--text);
  padding: .65rem .875rem; font-size: .9rem; font-family: inherit;
  outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none;
}
.inp:focus { border-color: var(--focus); box-shadow: var(--glow); }
.inp::placeholder { color: var(--text-3); }
.inp:disabled { opacity: .5; cursor: not-allowed; }
.inp-wrap { position: relative; }
.inp-wrap .inp { width: 100%; }

/* ── Eye button ──────────────────────────────────────────── */
.eye-btn {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-3); display: flex; padding: 0; transition: color .15s;
}
.eye-btn:hover { color: var(--text-2); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.25rem; font-size: .875rem; font-weight: 600; font-family: inherit;
  border-radius: var(--r-s); border: none; cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background .15s, transform .1s, opacity .15s; line-height: 1;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-h); }
.btn-ghost { background: var(--elevated); color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--hover); border-color: var(--text-3); }
.btn-danger { background: var(--err-d); color: var(--err); border: 1px solid rgba(196,88,88,.22); }
.btn-danger:hover:not(:disabled) { background: rgba(196,88,88,.22); }
.btn-full { width: 100%; }
.btn-sm { padding: .32rem .65rem; font-size: .775rem; border-radius: var(--r-xs); }

/* ── Badge ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: .68rem; padding: .18rem .5rem; border-radius: 99px;
  font-weight: 500; white-space: nowrap;
}
.badge-accent { background: var(--accent-d); color: #8b80e0; border: 1px solid rgba(91,106,209,.22); }
.badge-ok     { background: var(--ok-d);     color: var(--ok);  border: 1px solid rgba(74,158,112,.22); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { padding: .65rem .875rem; border-radius: var(--r-s); font-size: .825rem; line-height: 1.5; }
.alert-err { background: var(--err-d); border: 1px solid rgba(196,88,88,.25); color: var(--err); }
.alert-ok  { background: var(--ok-d);  border: 1px solid rgba(74,158,112,.25); color: var(--ok); }

/* ── Field ───────────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.field-label { display: block; font-size: .8rem; font-weight: 500; color: var(--text-2); margin-bottom: .4rem; }

/* ── Strength bar ────────────────────────────────────────── */
.strength-bar { display: flex; gap: 4px; margin-top: .5rem; height: 3px; }
.strength-bar span { flex: 1; border-radius: 99px; background: var(--border); transition: background .2s; }
.strength-bar.weak   span:nth-child(1)    { background: var(--err); }
.strength-bar.fair   span:nth-child(-n+2) { background: var(--warn); }
.strength-bar.good   span:nth-child(-n+3) { background: #7fb859; }
.strength-bar.strong span                 { background: var(--ok); }
.strength-hint { font-size: .75rem; color: var(--text-3); margin-top: .3rem; }

/* ── Custom checkbox ─────────────────────────────────────── */
.cb-row { display: flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
.cb-row input[type=checkbox] { display: none; }
.cb-box {
  width: 17px; height: 17px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 5px;
  background: var(--elevated); display: grid; place-items: center; transition: all .15s;
}
.cb-row input:checked + .cb-box { background: var(--accent); border-color: var(--accent); }
.cb-check { display: none; }
.cb-row input:checked + .cb-box .cb-check { display: block; }
.cb-label { font-size: .85rem; color: var(--text-2); }

/* ── Divider ─────────────────────────────────────────────── */
.divider {
  display: flex; align-items: center; gap: .75rem;
  color: var(--text-3); font-size: .78rem; margin: 1.25rem 0;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Auth layout ─────────────────────────────────────────── */
.auth-body {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, var(--accent-d), transparent);
}
.auth-wrap { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.auth-brand { text-align: center; }
.auth-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--accent), #8b80e0);
  border-radius: 13px; display: grid; place-items: center; margin: 0 auto .75rem; font-size: 1.35rem;
}
.auth-brand h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.auth-brand p  { font-size: .84rem; color: var(--text-2); margin-top: .25rem; }
.auth-card { width: 100%; }
.auth-title { font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; }
.auth-desc  { font-size: .82rem; color: var(--text-3); margin-bottom: 1.5rem; line-height: 1.6; }
.auth-footer { text-align: center; font-size: .84rem; color: var(--text-3); }
.auth-footer a { color: var(--text-2); text-decoration: none; transition: color .15s; }
.auth-footer a:hover { color: var(--text); }
.auth-footer .la { color: var(--accent); }
.auth-footer .la:hover { color: #8b80e0; }
.auth-guest { text-align: center; }
.auth-guest a {
  font-size: .82rem; color: var(--text-3); text-decoration: none;
  border-bottom: 1px dashed var(--border); transition: color .15s;
}
.auth-guest a:hover { color: var(--text-2); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.75rem; max-width: 400px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal-title { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.modal-desc  { font-size: .85rem; color: var(--text-2); margin-bottom: 1.25rem; line-height: 1.6; }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2.5px solid rgba(255,255,255,.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }