/* ============ MyTime ============ */
/* ============ Tema tokenları ============
   Koyu tema (varsayılan): derin lacivert zemin, yüksek kontrast açık metin.
   Açık tema: WCAG AA gözetilerek seçilmiş koyu tonlar (metin/vurgu ≥ 4.5:1). */
:root {
  --bg: #0b1020;
  --bg2: #101736;
  --card: #161f3f;
  --card2: #1c2750;
  --line: #27335f;
  --txt: #e6eaf6;
  --muted: #8b95b8;
  --accent: #6366f1;
  --accent-deep: #4f46e5;
  --accent2: #22d3ee;
  --good: #34d399;
  --good-strong: #10b981;
  --good-deep: #059669;
  --warn: #fbbf24;
  --warn-deep: #d97706;
  --bad: #f87171;
  --bad-strong: #ef4444;
  --bad-deep: #dc2626;
  --body-grad: radial-gradient(1200px 800px at 80% -10%, #1b2450 0%, var(--bg) 55%);
  --sidebar-bg: rgba(13, 18, 40, .85);
  --nav-active-bg: linear-gradient(90deg, rgba(99, 102, 241, .25), rgba(34, 211, 238, .12));
  --nav-active-ring: rgba(99, 102, 241, .35);
  --clock-from: #ffffff;
  --clock-to: #b6c3f5;
  --flash-to: #6b1d1d;
  --rang-bg: #3b2c10;
  --rang-border: #b45309;
  --dist-active-bg: rgba(251, 191, 36, .14);
  --complete-bg: rgba(52, 211, 153, .08);
  --chip-play-bg: rgba(34, 211, 238, .12);
  --overlay: rgba(5, 8, 20, .88);
  --overlay2: rgba(5, 8, 20, .7);
  --scale: 1;
  font-size: 16px;
}

html[data-theme="light"] {
  --bg: #eef1f8;
  --bg2: #ffffff;
  --card: #ffffff;
  --card2: #f2f5fb;
  --line: #d7ddee;
  --txt: #1a2340;         /* beyaz üstünde ~14.9:1 */
  --muted: #5a6486;       /* beyaz üstünde ~5.5:1 */
  --accent: #4f46e5;      /* beyaz üstünde 6.3:1 — buton zemini + metin için güvenli */
  --accent-deep: #4338ca;
  --accent2: #0e7490;     /* camgöbeği koyulaştı: beyazda 5.3:1, sayaçlar okunur */
  --good: #047857;        /* 5.1:1 */
  --good-strong: #059669;
  --good-deep: #065f46;
  --warn: #b45309;        /* 4.8:1 */
  --warn-deep: #92400e;
  --bad: #dc2626;         /* 4.5:1 */
  --bad-strong: #dc2626;
  --bad-deep: #b91c1c;
  --body-grad: radial-gradient(1200px 800px at 80% -10%, #dfe6fb 0%, var(--bg) 55%);
  --sidebar-bg: rgba(255, 255, 255, .92);
  --nav-active-bg: linear-gradient(90deg, rgba(79, 70, 229, .12), rgba(14, 116, 144, .08));
  --nav-active-ring: rgba(79, 70, 229, .35);
  --clock-from: #1a2340;
  --clock-to: #4338ca;
  --flash-to: #fecaca;
  --rang-bg: #fef3c7;
  --rang-border: #f59e0b;
  --dist-active-bg: rgba(180, 83, 9, .12);
  --complete-bg: rgba(4, 120, 87, .08);
  --chip-play-bg: rgba(14, 116, 144, .10);
  --overlay: rgba(226, 232, 246, .88);
  --overlay2: rgba(226, 232, 246, .75);
}

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

body {
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--body-grad);
  color: var(--txt);
  min-height: 100vh;
}

.app { display: flex; min-height: 100vh; }

/* ============ Sidebar ============ */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand-icon { width: 34px; height: 34px; }
.brand-name { font-size: 1.35rem; font-weight: 300; letter-spacing: .5px; }
.brand-name b { font-weight: 700; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-btn, .pip-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--muted);
  font-size: .95rem; font-family: inherit;
  cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.nav-btn:hover, .pip-btn:hover { background: var(--card); color: var(--txt); }
.nav-btn.active { background: var(--nav-active-bg); color: var(--txt); box-shadow: inset 0 0 0 1px var(--nav-active-ring); }
.nav-ico { font-size: 1.1rem; width: 24px; text-align: center; }
.pip-btn { border: 1px dashed var(--line); justify-content: flex-start; }

/* ============ Main ============ */
.main { flex: 1; padding: 28px 34px 60px; max-width: 1100px; }
.tab { display: none; }
.tab.active { display: block; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.tab-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.tab-head h1 { font-size: 1.5rem; font-weight: 600; }
.tab-desc { color: var(--muted); margin: -6px 0 18px; line-height: 1.5; max-width: 720px; }
.section-title { margin: 22px 0 10px; font-size: 1.02rem; color: var(--muted); font-weight: 600; }

/* ============ Buttons ============ */
.btn {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--txt);
  font-family: inherit; font-size: .92rem;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.25); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border-color: transparent; color: #fff; }
.btn.good { background: linear-gradient(135deg, var(--good-deep), var(--good-strong)); border-color: transparent; color: #fff; }
.btn.danger { background: linear-gradient(135deg, var(--bad-deep), var(--bad-strong)); border-color: transparent; color: #fff; }
.btn.big { padding: 13px 26px; font-size: 1.05rem; border-radius: 12px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

.icon-btn {
  background: transparent; border: none; color: var(--muted);
  font-size: 1.05rem; cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.icon-btn:hover { background: var(--card2); color: var(--txt); }

/* ============ Cards ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.card h3 { margin-bottom: 14px; font-size: 1.05rem; }
.card-list { display: flex; flex-direction: column; gap: 12px; }
.empty { color: var(--muted); padding: 30px 10px; text-align: center; display: none; }

.item-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.item-card.off { opacity: .55; }
.item-main { flex: 1; min-width: 180px; }
.item-title { font-weight: 600; font-size: 1.05rem; }
.item-sub { color: var(--muted); font-size: .85rem; margin-top: 3px; }
.item-big {
  font-size: calc(1.9rem * var(--scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}
.item-actions { display: flex; align-items: center; gap: 8px; }

/* toggle switch */
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.switch input { display: none; }
.switch .sl {
  position: absolute; inset: 0; border-radius: 13px;
  background: var(--line); transition: background .2s;
}
.switch .sl::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: left .2s;
  box-shadow: 0 1px 3px rgba(10, 15, 35, .35);
}
.switch input:checked + .sl { background: var(--accent); }
.switch input:checked + .sl::after { left: 23px; }

/* progress bar */
.pbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; width: 100%; margin-top: 10px; }
.pbar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 3px; transition: width .5s linear; }

/* day chips */
.day-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.day-chip {
  width: 38px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--muted);
  font-size: .8rem; cursor: pointer; font-family: inherit;
}
.day-chip.on { background: var(--accent); color: #fff; border-color: transparent; }

/* ============ Dashboard ============ */
/* Günlük odak hedefi çubuğu */
.focus-bar {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 14px; cursor: pointer; transition: border-color .12s;
}
.focus-bar:hover { border-color: var(--accent); }
.fb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.fb-label { font-weight: 600; font-size: .95rem; }
.fb-val { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-track { height: 10px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.fb-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s ease; }
.focus-bar.done { border-color: var(--good); }
.focus-bar.done .fb-fill { background: linear-gradient(90deg, var(--good-deep), var(--good)); }
.focus-bar.done .fb-val { color: var(--good); font-weight: 600; }
/* Odak detay modalı */
.fd-total { font-size: 1.05rem; margin-bottom: 2px; }
.fd-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.fd-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.fd-when { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.fd-dur { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.dash-w {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; position: relative;
  transition: transform .12s, opacity .12s;
}
.dash-w.dragging { opacity: .4; transform: scale(.98); border-style: dashed; border-color: var(--accent); }
.dash-w.drop-before { box-shadow: -4px 0 0 0 var(--accent2); }
.dash-w.drop-after { box-shadow: 4px 0 0 0 var(--accent2); }
.dash-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--card2); cursor: grab; user-select: none;
}
.dash-head:active { cursor: grabbing; }
.dash-grab { color: var(--muted); font-size: .9rem; }
.dash-title { font-weight: 600; font-size: .95rem; flex: 1; }
.dash-body { padding: 14px 16px; min-height: 64px; display: flex; flex-direction: column; gap: 8px; }
.dw-clock { font-size: calc(2.6rem * var(--scale)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--clock-from), var(--clock-to)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dw-date { color: var(--muted); font-size: .95rem; }
.dw-row { display: flex; align-items: center; gap: 10px; }
.dw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.dw-time { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem; }
.dw-time.accent { color: var(--accent2); }
.dw-time.good { color: var(--good); }
.dw-time.warn { color: var(--warn); }
.dw-muted { color: var(--muted); }
.dw-sub { color: var(--muted); font-size: .84rem; }
.dw-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dw-actions .btn { padding: 6px 12px; font-size: .85rem; }
.btn.sm { padding: 4px 10px; font-size: .8rem; }

/* ============ Clock tab ============ */
.clock-hero { text-align: center; padding: 7vh 0 4vh; }
.clock-time {
  font-size: calc(clamp(4rem, 11vw, 8.5rem) * var(--scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  background: linear-gradient(180deg, var(--clock-from), var(--clock-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.05;
}
.clock-date { color: var(--muted); font-size: calc(1.2rem * var(--scale)); margin-top: 10px; }
.clock-next { color: var(--accent2); font-size: 1rem; margin-top: 16px; min-height: 1.4em; }
.clock-summary { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mini-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 20px; text-align: center; min-width: 150px; cursor: pointer;
}
.mini-stat:hover { border-color: var(--accent); }
.mini-stat .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-stat .k { color: var(--muted); font-size: .8rem; margin-top: 4px; }

/* ============ Pomodoro ============ */
.pomo-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pomo-ring-box { position: relative; width: min(320px, 78vw); }
.pomo-svg { width: 100%; transform: rotate(-90deg); }
.pomo-track { fill: none; stroke: var(--line); stroke-width: 10; }
.pomo-prog {
  fill: none; stroke: url(#pomoGrad); stroke: var(--accent);
  stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 741.4; stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s linear, stroke .3s;
}
.pomo-prog.break { stroke: var(--good); }
.pomo-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.pomo-phase { color: var(--muted); letter-spacing: 3px; font-size: .85rem; font-weight: 600; }
.pomo-time { font-size: calc(3.4rem * var(--scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.pomo-session { color: var(--accent2); font-size: .9rem; min-height: 1.2em; }
.pomo-controls { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pomo-today { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .95rem; }
.pomo-today .tomato { font-size: 1.1rem; }
.pomo-settings { width: 100%; max-width: 640px; }

/* ============ Tasks ============ */
.task-start-card { padding: 24px; }
.task-idle { display: flex; gap: 12px; flex-wrap: wrap; }
.task-idle input {
  flex: 1; min-width: 220px;
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-size: 1rem; font-family: inherit;
}
.task-idle input:focus { outline: none; border-color: var(--accent); }
.task-active { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.task-active-name { font-size: 1.15rem; font-weight: 600; }
.task-active-timer {
  font-size: calc(2.6rem * var(--scale)); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent2);
}
.task-active-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* aktif bölücü: kart amber vurgulu (iş değil, dikkat dağıtıcı) */
.task-active.dist { box-shadow: 0 0 0 1px var(--warn); border-radius: 12px; }
.task-active.dist .task-active-timer { color: var(--warn); }
.dist-tag { font-size: .72rem; font-weight: 600; color: var(--warn); border: 1px solid var(--warn); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }

/* Bölücü ızgarası */
.distraction-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 8px; }
.dist-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px 8px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt); cursor: pointer; font-family: inherit;
  transition: border-color .15s, transform .05s, background .15s;
}
.dist-btn:hover { border-color: var(--accent2); }
.dist-btn:active { transform: scale(.96); }
.dist-btn .di { font-size: 2.1rem; line-height: 1; }
.dist-btn .dn { font-size: .92rem; text-align: center; }
.dist-btn .dcount { font-size: .7rem; color: var(--muted); }
.dist-btn .dtimer { font-size: .8rem; color: var(--warn); font-variant-numeric: tabular-nums; font-weight: 600; }
.dist-btn.active { border-color: var(--warn); background: var(--dist-active-bg); box-shadow: 0 0 0 1px var(--warn); }
.dist-btn .dx {
  position: absolute; top: 4px; right: 6px; opacity: 0;
  color: var(--muted); font-size: .85rem; transition: opacity .15s;
}
.dist-btn:hover .dx { opacity: .6; }
.dist-btn .dx:hover { opacity: 1; color: var(--bad); }
.dist-btn.dist-add { border-style: dashed; color: var(--muted); }
.dist-btn.dist-add .di { font-size: 1.5rem; }
.item-card.rec-dist { border-left: 3px solid var(--warn); }

/* galeriden gelen görsel butonlar: daha büyük ve net */
.dist-btn { min-height: 92px; }
.dist-btn .di-img { width: 52px; height: 52px; object-fit: contain; }

/* hazır galeri seçici (ekleme modalı) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; }
.gal-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--txt); cursor: pointer; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.gal-item:hover { border-color: var(--accent2); }
.gal-item img { width: 46px; height: 46px; object-fit: contain; }
.gal-item span:not(.gal-check) { font-size: .78rem; text-align: center; }
.gal-item.added { border-color: var(--good); background: rgba(52, 211, 153, .1); }
.gal-check { display: none; position: absolute; top: 4px; right: 6px; color: var(--good); font-weight: 800; }
.gal-item.added .gal-check { display: block; }

/* İşlerim: arama, tamamlama, kayıt filtreleri */
.task-search-row { margin: 4px 0 14px; }
.task-search-row input {
  width: 100%; padding: 11px 15px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .95rem;
}
.task-search-row input::placeholder { color: var(--hint); }
.task-search-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* 🔒 Şifreli Kasa */
.vault-card { border-color: var(--accent2); }
.vault-head h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.vault-head .hint { display: block; margin-top: 4px; }
.vault-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.vault-form input[type="password"] {
  flex: 1; min-width: 200px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .95rem;
}
.vault-form input[type="password"]:focus { outline: none; border-color: var(--accent); }
.vault-bar { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.vault-list { display: flex; flex-direction: column; gap: 8px; }
.vault-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; }
.vi-main { flex: 1; min-width: 0; }
.vi-title { font-weight: 600; font-size: .95rem; }
.vi-val { margin-top: 3px; }
.vi-secret { font-family: "Consolas", "Courier New", monospace; font-size: .9rem; color: var(--accent2); word-break: break-all; background: var(--card2); padding: 2px 8px; border-radius: 6px; }
.vi-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ☁️ Hesap & Bulut */
.acct-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.acct-email { font-weight: 600; font-size: .98rem; }
.acct-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.acct-form input { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .95rem; }
.acct-form input:focus { outline: none; border-color: var(--accent); }
.acct-btns { display: flex; gap: 10px; }
.acct-btns .btn { flex: 1; }
.acct-google { width: 100%; border: 1px solid var(--line); background: var(--bg2); color: var(--txt); }

.btn.complete {
  border-color: var(--good); color: var(--good); background: var(--complete-bg);
  transition: background .15s, color .15s, transform .05s;
}
.btn.complete:hover { background: linear-gradient(135deg, var(--good-deep), var(--good-strong)); color: #fff; }
.btn.complete.big { background: linear-gradient(135deg, var(--good-deep), var(--good-strong)); color: #fff; border-color: transparent; }

.item-card.done-def { opacity: .8; border-left: 3px solid var(--good); }
.item-card.done-def .item-title { color: var(--good); }

.rec-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.rec-dates { display: flex; gap: 8px; align-items: center; }
.rec-dates input {
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .85rem;
}
.rec-totals { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rec-totals .tot {
  padding: 8px 14px; border-radius: 10px; font-size: .9rem;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
}
.rec-totals .tot b { color: var(--txt); font-variant-numeric: tabular-nums; }
.rec-totals .tot.work { border-left: 3px solid var(--accent2); }
.rec-totals .tot.dist { border-left: 3px solid var(--warn); }
.item-card.running { border-color: var(--good); box-shadow: 0 0 0 1px rgba(52, 211, 153, .25); }
.run-dot { color: var(--good); font-size: .78rem; font-weight: 600; }

/* iş kartı: başlık satırı + açılır madde listesi */
.item-card.task-def { display: block; }
.def-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.todo-chip.all-done { border-color: var(--good); color: var(--good); }
.todo-box {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.todo-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.todo-item label { display: flex; gap: 10px; align-items: center; cursor: pointer; flex: 1; }
.todo-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.todo-item.done span { text-decoration: line-through; color: var(--muted); }
.todo-addrow { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.todo-add-input {
  flex: 1; min-width: 160px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .9rem;
}
.todo-add-input:focus { outline: none; border-color: var(--accent); }

/* saat/dakika seçici (native time input yerine — sarmaz, uçlarda durur) */
.time-sel { display: inline-flex; gap: 6px; align-items: center; }
.time-sel select { width: auto; min-width: 64px; }
.time-sel b { color: var(--muted); }

/* iş kartı sürükleme tutamacı */
.def-grab { cursor: grab; color: var(--muted); user-select: none; padding: 4px 6px; font-size: 1rem; flex-shrink: 0; touch-action: none; }
.def-grab:active { cursor: grabbing; }
.item-card.dragging { opacity: .4; border-style: dashed; border-color: var(--accent); }
.item-card.drop-above { box-shadow: 0 -4px 0 0 var(--accent2); }
.item-card.drop-below { box-shadow: 0 4px 0 0 var(--accent2); }
.desc-line { color: var(--accent2); opacity: .85; }
.te-area {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .95rem; resize: vertical;
}
.te-area:focus { outline: none; border-color: var(--accent); }
.ttext, .ttext-view { flex: 1; min-width: 0; }
.todo-item .ttext { cursor: text; }
.di-img { width: 34px; height: 34px; object-fit: contain; }
body.compact .di-img { width: 24px; height: 24px; }

/* madde sürükleme tutamacı + yerleştirme göstergeleri (iş düzenleyici) */
.tgrab { cursor: grab; color: var(--muted); user-select: none; padding: 0 4px; font-size: .95rem; flex-shrink: 0; touch-action: none; }
.tgrab:active { cursor: grabbing; }
.todo-item { position: relative; }
.todo-item.dragging { opacity: .45; }
.todo-item.drop-above::before, .todo-item.drop-below::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.todo-item.drop-above::before { top: -2px; }
.todo-item.drop-below::after { bottom: -2px; }

/* alarmı çalan kart: zemin yanıp söner; susturulunca kehribar renkte kalır */
.item-card.flash {
  animation: cardFlash .55s ease-in-out infinite alternate;
  border-color: var(--bad);
  opacity: 1;
}
@keyframes cardFlash {
  from { background: var(--card); }
  to   { background: var(--flash-to); }
}
.item-card.rang { background: var(--rang-bg); border-color: var(--rang-border); opacity: 1; }

/* ön uyarı: süre yaklaşıyor — amber nabız (tıklayınca susar) */
.item-card.prewarn {
  animation: prewarnPulse .8s ease-in-out infinite alternate;
  border-color: var(--warn); cursor: pointer; opacity: 1;
}
@keyframes prewarnPulse {
  from { box-shadow: 0 0 0 1px var(--warn); }
  to   { box-shadow: 0 0 14px 2px var(--warn); background: var(--rang-bg); }
}

/* ============ Analytics ============ */
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button {
  padding: 8px 16px; border: none; background: transparent; color: var(--muted);
  font-family: inherit; font-size: .88rem; cursor: pointer;
}
.seg button.active { background: var(--accent); color: #fff; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-tile {
  flex: 1; min-width: 160px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
}
.stat-tile .v { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-tile .k { color: var(--muted); font-size: .82rem; margin-top: 4px; }

.hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hbar-label { width: 160px; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--muted); flex-shrink: 0; }
.hbar-track { flex: 1; height: 22px; background: var(--bg2); border-radius: 6px; overflow: hidden; }
.hbar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 6px; min-width: 2px; }
.hbar-fill.good { background: linear-gradient(90deg, var(--good-deep), var(--good)); }
.hbar-fill.warn { background: linear-gradient(90deg, var(--warn-deep), var(--warn)); }
.hbar-val { width: 90px; font-size: .85rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.hours-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; margin-top: 8px; }
.hours-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.hours-bar { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent2), var(--accent)); min-height: 2px; }
.hours-bar.peak { background: linear-gradient(180deg, var(--warn), var(--warn-deep)); }
.hours-lbl { font-size: .62rem; color: var(--muted); }

/* ============ Settings ============ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; font-size: .88rem; color: var(--muted); }
.form-grid input, .form-grid select, .modal input, .modal select {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-size: .95rem; font-family: inherit;
}
.form-grid input:focus, .modal input:focus, .modal select:focus { outline: none; border-color: var(--accent); }
input[type="range"] { padding: 0; accent-color: var(--accent); }
input[type="date"], input[type="time"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.75); cursor: pointer; }
.hint { color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* Notlar */
#note-input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: 1rem; resize: vertical; min-height: 60px;
}
#note-input:focus { outline: none; border-color: var(--accent); }
.note-text { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sound-chip {
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--txt); cursor: pointer;
  font-family: inherit; font-size: .88rem; text-align: center;
  transition: border-color .15s;
}
.sound-chip:hover { border-color: var(--accent2); }
.sound-chip.playing { border-color: var(--accent2); background: var(--chip-play-bg); }

/* ============ Ring overlay ============ */
.ring-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.ring-box {
  text-align: center; padding: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: 90vw;
}
.ring-anim { font-size: 5rem; animation: ringshake .5s infinite; }
@keyframes ringshake {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
.ring-item { margin-bottom: 6px; }
.ring-item .t { font-size: 2rem; font-weight: 700; }
.ring-item .s { color: var(--muted); margin-top: 4px; }

/* ============ Modal ============ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: var(--overlay2); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
}
.modal h2 { font-size: 1.2rem; margin-bottom: 18px; }
.modal .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; font-size: .88rem; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ============ Raporlar ============ */
.rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.score-badge {
  text-align: center; padding: 16px 26px; border-radius: 16px; min-width: 150px;
  border: 1px solid var(--line); background: var(--card2);
}
.score-badge .sc-num { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.score-badge .sc-lbl { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.score-badge.good .sc-num { color: var(--good); }
.score-badge.mid .sc-num { color: var(--warn); }
.score-badge.low .sc-num { color: var(--bad); }
.score-badge.none { color: var(--muted); padding: 24px; }
.score-badge .trend { display: block; margin-top: 8px; font-size: .9rem; font-weight: 700; }
.score-badge .trend.up { color: var(--good); }
.score-badge .trend.down { color: var(--bad); }
.score-badge .trend.flat { color: var(--muted); }
.score-badge .sc-prev { color: var(--muted); font-size: .74rem; margin-top: 4px; }
.rep-warn { border-color: var(--warn); color: var(--warn); font-weight: 600; }
.rep-ozet { line-height: 1.65; font-size: 1.02rem; }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rep-cols .card { margin-bottom: 0; }
.rep-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rep-list li { line-height: 1.5; }

/* sesli kayıt durumu */
.btn.recording, .b.recording {
  background: linear-gradient(135deg, var(--bad-deep), var(--bad-strong)) !important;
  color: #fff !important; border-color: transparent;
  animation: recPulse 1s ease-in-out infinite alternate;
}
@keyframes recPulse { from { box-shadow: 0 0 0 1px rgba(239,68,68,.4); } to { box-shadow: 0 0 12px 3px rgba(239,68,68,.55); } }

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ Responsive ============ */
@media (max-width: 760px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .brand { padding-bottom: 4px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-btn span:last-child { display: none; }
  .main { padding: 18px; }
  .hbar-label { width: 90px; }
  .distraction-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ Kısayollar (Ayarlar) ============ */
.sc-form { margin-top: 12px; }
.sc-kinds { display: flex; gap: 8px; margin-bottom: 10px; }
.sc-kind {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--muted); font-family: inherit; font-size: .86rem;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.sc-kind:hover { border-color: var(--accent); color: var(--txt); }
.sc-kind.on { border-color: var(--accent); background: var(--accent-soft, rgba(99,102,241,.14)); color: var(--txt); font-weight: 600; }
.sc-kind span:first-child { font-size: 1.05rem; }

.sc-fields { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-fields input {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .9rem; padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s;
}
.sc-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.sc-in-icon { width: 54px; text-align: center; font-size: 1.05rem; }
.sc-in-name { width: 170px; }
.sc-in-target { flex: 1; min-width: 200px; }

.sc-msg { min-height: 18px; margin-top: 8px; font-size: .82rem; color: var(--muted); }
.sc-msg.good { color: var(--good-strong); }
.sc-msg.warn { color: var(--warn); }

.sc-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sc-empty { color: var(--muted); font-size: .86rem; padding: 14px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }

.sc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg2); transition: border-color .15s, opacity .15s;
}
.sc-item:hover { border-color: var(--accent); }
.sc-grab { cursor: grab; color: var(--muted); user-select: none; font-size: 1rem; flex: none; padding: 2px 2px 2px 0; touch-action: none; }
.sc-grab:active { cursor: grabbing; }
.sc-item.dragging { opacity: .4; border-style: dashed; border-color: var(--accent); }
.sc-item.drop-above { box-shadow: 0 -4px 0 0 var(--accent2); }
.sc-item.drop-below { box-shadow: 0 4px 0 0 var(--accent2); }
.sc-item.off { opacity: .5; }
.sc-item.alien { opacity: .45; }
.sc-ico {
  width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.sc-info { flex: 1; min-width: 0; }
.sc-name { font-weight: 600; color: var(--txt); font-size: .92rem; }
.sc-target { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.sc-tags { display: flex; gap: 5px; flex: none; }
.sc-tag { font-size: .68rem; padding: 3px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.sc-tag.warn { border-color: var(--warn); color: var(--warn); }
.sc-acts { display: flex; align-items: center; gap: 6px; flex: none; }

/* aç/kapa anahtarı */
.sc-switch { position: relative; width: 38px; height: 21px; flex: none; cursor: pointer; }
.sc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-switch span {
  position: absolute; inset: 0; border-radius: 999px; background: var(--line);
  transition: background .18s;
}
.sc-switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; transition: transform .18s;
}
.sc-switch input:checked + span { background: var(--good-strong); }
.sc-switch input:checked + span::after { transform: translateX(17px); }

.sc-pip-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .86rem; color: var(--muted); cursor: pointer; }
.sc-pip-toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* kısayol ikonu: otomatik çekilen görsel (uygulama ikonu / favicon) */
.sc-ico img { width: 24px; height: 24px; object-fit: contain; display: block; image-rendering: -webkit-optimize-contrast; }

/* uygulama kataloğu modalı */
.sc-cat-search {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .92rem;
}
.sc-cat-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.sc-cat-list {
  margin-top: 10px; max-height: 46vh; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px;
}
.sc-cat-item {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .86rem;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.sc-cat-item:hover { border-color: var(--accent); background: var(--card2); }
.sc-cat-ico { flex: none; font-size: 1rem; }
.sc-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ Döngü türleri + alışkanlık takibi ============ */
.lp-kinds { display: flex; gap: 8px; margin-top: 6px; }
.lp-kind {
  flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--muted); font-family: inherit; font-size: .85rem;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.lp-kind:hover { border-color: var(--accent); color: var(--txt); }
.lp-kind.on { border-color: var(--accent); background: rgba(99,102,241,.14); color: var(--txt); font-weight: 600; }

.lp-todo-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px dashed var(--line); }
.lp-todo-text { flex: 1; color: var(--txt); font-size: .9rem; }

.lp-streak {
  font-size: .74rem; font-weight: 700; color: var(--warn);
  background: rgba(251,191,36,.13); border: 1px solid rgba(251,191,36,.4);
  border-radius: 999px; padding: 1px 8px; vertical-align: 2px;
}

.lp-todos-card { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.lp-todo { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: .88rem; cursor: pointer; padding: 3px 2px; }
.lp-todo input { width: 16px; height: 16px; accent-color: var(--good-strong); cursor: pointer; }
.lp-todo.tdone span { text-decoration: line-through; color: var(--muted); }

/* alışkanlık saat mini-grafiği (analitik) */
.habit-hours { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 6px 0 2px; }
.habit-hours .hc { flex: 1; min-width: 3px; background: var(--line); border-radius: 2px 2px 0 0; }
.habit-hours .hc.warn { background: var(--warn); }
.habit-hours .hc.good { background: var(--good-strong); }
.habit-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }

/* ============ Kenar çubuğu alt menüsü (Ayarlar ailesi) ============ */
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 2px 14px; padding-left: 8px; border-left: 2px solid var(--line); }
.nav-sub.open { display: flex; }
.nav-btn.sub { font-size: .84rem; padding-top: 7px; padding-bottom: 7px; opacity: .9; }
.nav-btn.sub .nav-ico { font-size: .92rem; }

/* ============ Profil ============ */
.prof-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.prof-grid select, .prof-grid input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .92rem; padding: 9px 11px;
}
.prof-grid select:focus, .prof-grid input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.prof-grid select:disabled { opacity: .5; cursor: not-allowed; }
.prof-privacy { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ============ Projeler (işleri gruplayan üst başlık) ============ */
.proj-addrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.proj-addrow input {
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--txt);
  font-family: inherit; font-size: .9rem; padding: 8px 11px;
}
.proj-addrow input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
#proj-icon { width: 52px; text-align: center; }
#proj-name { width: 240px; }

.proj-group { margin-bottom: 14px; border: 1px solid transparent; border-radius: 14px; transition: border-color .15s, background .15s; }
.proj-group.proj-drop { border-color: var(--accent2); background: rgba(34,211,238,.07); }
.proj-head {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px; margin-bottom: 6px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
}
.proj-head.loose { background: transparent; border-style: dashed; opacity: .75; }
.proj-ico { font-size: 1.05rem; }
.proj-name { font-weight: 600; color: var(--txt); }
.proj-meta { color: var(--muted); font-size: .78rem; }
.proj-actions { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.proj-body { display: flex; flex-direction: column; gap: 8px; padding-left: 10px; border-left: 2px solid var(--line); margin-left: 10px; }
.proj-group.loose .proj-body { border-left-color: transparent; }

.proj-group.proj-empty .proj-head { border-style: dashed; opacity: .8; }
.proj-group.proj-empty { margin-bottom: 8px; }
.proj-group.proj-empty.proj-drop .proj-head { border-style: solid; border-color: var(--accent2); opacity: 1; }
#te-project, #f-defproj {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2);
  color: var(--txt); font-family: inherit; font-size: .92rem; padding: 9px 11px;
}

/* ============ DragKit — uygulama geneli sürükleme görselleri ============ */
.dk-ghost {
  position: fixed !important; left: 0; top: 0; margin: 0 !important;
  z-index: 99999; pointer-events: none; opacity: .95;
  box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 2px var(--accent);
  border-radius: 12px; background: var(--card);
}
.dk-src {
  opacity: .35;
  box-shadow: inset 0 0 0 2px var(--accent) !important;
  border-radius: 12px;
}
.dk-line {
  height: 5px; margin: 3px 6px; border-radius: 3px; list-style: none;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 10px var(--accent2);
}
.dk-into {
  outline: 2px solid var(--accent2) !important; outline-offset: 2px;
  background: rgba(34,211,238,.10) !important; border-radius: 14px;
}
.dk-edge-before { box-shadow: -5px 0 0 0 var(--accent2), 0 0 12px rgba(34,211,238,.35) !important; }
.dk-edge-after  { box-shadow:  5px 0 0 0 var(--accent2), 0 0 12px rgba(34,211,238,.35) !important; }

/* ============ Dil seçim modalı ============ */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.lang-opt {
  user-select: none;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg2); color: var(--txt); font-family: inherit; font-size: .88rem;
  cursor: pointer; text-align: left; transition: border-color .12s, background .12s;
}
.lang-opt:hover { border-color: var(--accent); }
.lang-opt.on { border-color: var(--accent); background: rgba(99,102,241,.16); font-weight: 600; }
#btn-lang-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }