/* ==========================================================================
   Sorular sekmesi v2 (#soru-view) — davranış soru.js
   Kaldırmak için index.html'deki soru.css / soru.js satırlarını silmek yeterli.
   ========================================================================== */

#planoxa-sidebar .tabs #tab-soru { order: 3 !important; }

#soru-view {
  --sr-acc: var(--px-acc-rgb, 45, 212, 191);
  --sr-ink: #F1F5F9;
  --sr-mute: #8B95A7;
  --sr-faint: rgba(255, 255, 255, .06);
  --sr-line: rgba(255, 255, 255, .08);
  --sr-gold: #FBBF24;
  --sr-up: #34D399;
  --sr-down: #F59E0B;
  --sr-bad: #F87171;
  --sr-card: rgba(11, 14, 23, .86);
  width: 100%;
  color: var(--sr-ink);
  font-variant-numeric: tabular-nums;
}
#soru-view[hidden] { display: none !important; }

.sr-page { display: flex; flex-direction: column; gap: 14px; max-width: 1240px; }
.sr-muted { color: var(--sr-mute); font-weight: 500; }
.sr-lbl { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--sr-mute); }
.sr-empty { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--sr-mute); }
.sr-empty b { color: rgb(var(--sr-acc)); font-weight: 600; }

/* ---------- Başlık ---------- */
.sr-head h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--sr-ink);
}
.sr-head h2 svg { width: 20px; height: 20px; fill: none; stroke: rgb(var(--sr-acc)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-head p { margin: 4px 0 0; font-size: 13px; color: var(--sr-mute); }

/* ---------- Kart ---------- */
.sr-card {
  position: relative;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, 0) 45%), var(--sr-card);
  border: 1px solid var(--sr-line);
  box-shadow: rgba(255, 255, 255, .04) 0 1px 0 0 inset, rgba(0, 0, 0, .8) 0 24px 48px -30px;
  min-width: 0;
}
.sr-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.sr-card-h h3 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--sr-ink); }
.sr-card-h > span { font-size: 12.5px; font-weight: 700; }

/* ---------- Giriş ---------- */
.sr-entry { border-color: rgba(var(--sr-acc), .22); padding: 14px; }
.sr-field {
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 6px 0 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--sr-line);
  transition: border-color .15s, box-shadow .15s;
  cursor: text;
}
.sr-field:focus-within { border-color: rgba(var(--sr-acc), .6); box-shadow: 0 0 0 4px rgba(var(--sr-acc), .1); }
.sr-field > svg { width: 18px; height: 18px; flex: none; color: var(--sr-mute); }
.sr-field:focus-within > svg { color: rgb(var(--sr-acc)); }
.sr-field input {
  all: unset; box-sizing: border-box; flex: 1 1 auto; min-width: 0; height: 100%;
  font-size: 16px !important; font-weight: 500; color: var(--sr-ink);
}
.sr-field input::placeholder { color: var(--sr-mute); opacity: .8; }
.sr-field.shake { animation: sr-shake .35s; border-color: rgba(248, 113, 113, .6); }
.sr-add {
  all: unset; box-sizing: border-box; flex: none;
  height: 40px; padding: 0 18px; border-radius: 9px;
  font-size: 13.5px; font-weight: 700; color: #04110D; background: rgb(var(--sr-acc));
  cursor: pointer; transition: filter .15s, transform .1s;
}
.sr-add:hover { filter: brightness(1.08); }
.sr-add:active { transform: scale(.97); }

.sr-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; }
.sr-preview:not(:empty) { margin-top: 10px; }
.sr-pv {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px 10px; border-radius: 9px;
  background: rgba(var(--sr-acc), .08); border: 1px solid rgba(var(--sr-acc), .2);
  font-size: 12.5px; animation: sr-in .15s ease-out;
}
.sr-pv b.d { color: rgb(var(--sr-acc)); font-weight: 700; }
.sr-pv b.d.guess { color: var(--sr-down); }
.sr-pv span + span::before, .sr-pv b + span::before { content: "·"; margin-right: 6px; color: var(--sr-mute); }
.sr-pv .k { color: var(--sr-ink); }
.sr-pv .s { color: var(--sr-ink); font-weight: 600; }
.sr-pv .n { font-weight: 700; }
.sr-pv .dy::before { display: none; }
.sr-pv .e { color: var(--sr-bad); font-weight: 600; }
.sr-pv.has-err { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .3); }
.sr-pv-day { font-size: 12px; font-weight: 700; color: var(--sr-gold); margin-right: 2px; }
.sr-pv-enter { margin-left: auto; font-size: 11px; color: var(--sr-mute); }
.sr-pv-hint { font-size: 12.5px; color: var(--sr-mute); }
.sr-pv-hint b { color: var(--sr-ink); }
.sr-preview.is-err .sr-pv-hint { color: var(--sr-bad); }

.dy { display: inline-flex; gap: 4px; }
.dy i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: var(--sr-faint); color: var(--sr-mute); }
.dy i.ok { color: var(--sr-up); background: rgba(52, 211, 153, .1); }
.dy i.no { color: var(--sr-bad); background: rgba(248, 113, 113, .1); }

.sr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.sr-chips-l { font-size: 11.5px; color: var(--sr-mute); margin-right: 2px; }
.sr-chips button {
  all: unset; box-sizing: border-box;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--sr-mute);
  border: 1px solid var(--sr-line); cursor: pointer;
  max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .15s, border-color .15s, background .15s;
}
.sr-chips button:hover { color: var(--sr-ink); border-color: rgba(var(--sr-acc), .45); background: rgba(var(--sr-acc), .06); }

.sr-undo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 7px 7px 7px 12px; border-radius: 10px;
  background: rgba(var(--sr-acc), .08); border: 1px solid rgba(var(--sr-acc), .2);
  font-size: 12.5px; animation: sr-in .18s ease-out;
}
.sr-undo[hidden] { display: none; }
.sr-undo b { color: rgb(var(--sr-acc)); }
.sr-undo button { all: unset; padding: 4px 10px; border-radius: 7px; font-weight: 700; background: var(--sr-faint); cursor: pointer; }
.sr-undo button:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Bugün + KPI ---------- */
.sr-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.sr-today { display: flex; align-items: center; gap: 22px; }
.sr-ring { position: relative; flex: none; width: 132px; height: 132px; }
.sr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sr-ring circle { fill: none; stroke-width: 9; }
.sr-ring .bg { stroke: var(--sr-faint); }
.sr-ring .fg { stroke: rgb(var(--sr-acc)); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.22, 1, .36, 1); filter: drop-shadow(0 0 6px rgba(var(--sr-acc), .4)); }
.sr-today.is-zero .sr-ring .fg { opacity: 0; }
.sr-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sr-ring-in b { font-size: 32px; font-weight: 800; letter-spacing: -1px; display: inline-block; }
.sr-ring-in b.bump { animation: sr-bump .35s cubic-bezier(.22, 1, .36, 1); }
.sr-ring-in span { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--sr-mute); }
.sr-today.celebrate { animation: sr-glow 1.8s ease-out 1; }
.sr-today.celebrate .sr-ring { animation: sr-pop .6s cubic-bezier(.22, 1.6, .36, 1); }

.sr-today-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sr-rem { font-size: 15px; }
.sr-rem b { font-size: 18px; font-weight: 800; }
.sr-rem b.ok { color: rgb(var(--sr-acc)); font-size: 16px; }
.sr-rem span { color: var(--sr-mute); }
.sr-streak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.sr-streak .fl { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sr-gold); }
.sr-streak .fl svg { width: 13px; height: 13px; }
.sr-goal { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--sr-line); display: flex; flex-direction: column; gap: 8px; }
.sr-step { display: flex; align-items: center; gap: 12px; }
.sr-step button {
  all: unset; box-sizing: border-box; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 17px; font-weight: 600;
  background: var(--sr-faint); cursor: pointer;
}
.sr-step button:hover { background: rgba(var(--sr-acc), .18); }
.sr-step button:disabled { opacity: .35; cursor: default; }
#sr-goal-val { font-size: 20px; font-weight: 800; letter-spacing: -.5px; min-width: 150px; }
#sr-goal-val small { font-size: 12px; font-weight: 600; color: var(--sr-mute); margin-left: 5px; letter-spacing: 0; }
.sr-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-presets button {
  all: unset; box-sizing: border-box; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--sr-mute); border: 1px solid var(--sr-line); cursor: pointer;
}
.sr-presets button:hover { color: var(--sr-ink); border-color: rgba(var(--sr-acc), .45); }
.sr-presets button.sel { color: rgb(var(--sr-acc)); border-color: rgba(var(--sr-acc), .6); background: rgba(var(--sr-acc), .1); }
.sr-suggest { font-size: 12px; line-height: 1.5; color: var(--sr-mute); }
.sr-suggest b { color: var(--sr-ink); }
.sr-suggest button {
  all: unset; margin-left: 2px; padding: 2px 8px; border-radius: 6px; font-weight: 700;
  color: rgb(var(--sr-acc)); background: rgba(var(--sr-acc), .1); cursor: pointer; white-space: nowrap;
}
.sr-suggest button:hover { background: rgba(var(--sr-acc), .2); }

.sr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.sr-kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0; }
.sr-kpi:nth-child(odd) { border-right: 1px solid var(--sr-line); }
.sr-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--sr-line); }
.sr-kpi > b { font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1; }
.sr-kpi .sub { font-size: 11.5px; line-height: 1.35; }
.sr-kpi .sub .up, .sr-kpi .sub .down { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.sr-kpi .sub .up { color: var(--sr-up); }
.sr-kpi .sub .down { color: var(--sr-down); }
.sr-kpi .sub svg { width: 10px; height: 10px; }

/* ---------- 30 gün grafiği ---------- */
.sr-bars { position: relative; display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; height: 150px; margin-top: 22px; align-items: end; }
.sr-bars .c { position: relative; height: 100%; display: flex; align-items: flex-end; }
.sr-bars .c i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px; background: rgba(255, 255, 255, .13); transition: height .5s cubic-bezier(.22, 1, .36, 1); }
.sr-bars .c.hit i { background: rgba(var(--sr-acc), .72); }
.sr-bars .c.today i { background: rgb(var(--sr-acc)); box-shadow: 0 0 12px -2px rgba(var(--sr-acc), .6); }
.sr-bars .c em {
  position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%);
  font-style: normal; font-size: 10px; font-weight: 700; color: var(--sr-ink);
  opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .12s;
}
.sr-bars .c { cursor: default; }
.sr-bars .c:hover i { filter: brightness(1.25); }
.sr-bars .c em { bottom: auto; top: -16px; }
.sr-bars .c:hover em, .sr-bars .c.today em { opacity: 1; }
.sr-bars .goal { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255, 255, 255, .3); pointer-events: none; }
.sr-bars .goal span { position: absolute; right: 0; bottom: 3px; font-size: 10px; font-weight: 600; color: var(--sr-mute); background: var(--sr-card); padding: 0 4px; border-radius: 4px; }
.sr-axis { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; margin-top: 7px; font-size: 10px; font-weight: 600; color: var(--sr-mute); }
.sr-axis span { white-space: nowrap; overflow: visible; }
.sr-axis .today { color: var(--sr-ink); direction: rtl; }

/* ---------- Ders dağılımı / konular ---------- */
.sr-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.sr-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--sr-faint); }
.sr-seg button { all: unset; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--sr-mute); cursor: pointer; }
.sr-seg button.sel { color: var(--sr-ink); background: rgba(255, 255, 255, .1); }
.sr-dist { display: flex; flex-direction: column; gap: 9px; }
.sr-dist .r, .sr-dist-h { display: grid; grid-template-columns: 96px minmax(0, 1fr) 44px 36px 42px; align-items: center; gap: 10px; font-size: 12.5px; }
.sr-dist .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-dist .br { height: 7px; border-radius: 99px; background: var(--sr-faint); overflow: hidden; }
.sr-dist .br i { display: block; height: 100%; border-radius: inherit; background: rgba(var(--sr-acc), .8); }
.sr-dist .r > b { text-align: right; font-weight: 700; }
.sr-dist .pc { text-align: right; color: var(--sr-mute); font-size: 11.5px; }
.sr-dist .acc { text-align: right; font-weight: 700; font-size: 12px; }
.sr-dist .acc.good { color: var(--sr-up); }
.sr-dist .acc.mid { color: var(--sr-gold); }
.sr-dist .acc.low { color: var(--sr-bad); }
.sr-dist .acc.none { color: var(--sr-mute); font-weight: 500; }
.sr-dist-h { order: -1; margin-bottom: -2px; font-size: 10.5px; color: var(--sr-mute); text-transform: uppercase; letter-spacing: .4px; }
.sr-dist-h span:nth-child(n+3) { text-align: right; }

.sr-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sr-tops h4 { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--sr-mute); }
.sr-tops ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.sr-tops li { display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12.5px; counter-increment: t; }
.sr-tops li + li { border-top: 1px solid var(--sr-faint); }
.sr-tops li::before { content: counter(t); width: 14px; font-size: 11px; font-weight: 700; color: var(--sr-mute); }
.sr-tops li span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-tops li b { font-weight: 700; }

/* ---------- Geçmiş ---------- */
.sr-hd { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 6px; font-size: 11.5px; font-weight: 600; color: var(--sr-mute); text-transform: uppercase; letter-spacing: .4px; }
.sr-hd:first-child { padding-top: 0; }
.sr-hd b { text-transform: none; letter-spacing: 0; color: var(--sr-ink); }
.sr-hr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 48px 26px; align-items: center; gap: 10px; min-height: 36px; padding: 0 2px; border-top: 1px solid var(--sr-faint); font-size: 13px; }
.sr-hr .t { color: var(--sr-mute); font-size: 12px; }
.sr-hr .w { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.sr-hr .w b { font-weight: 650; }
.sr-hr .w .k { color: var(--sr-mute); overflow: hidden; text-overflow: ellipsis; }
.sr-hr .w .s { flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--sr-line); color: var(--sr-mute); }
.sr-hr .n { text-align: right; color: rgb(var(--sr-acc)); font-weight: 700; }
.sr-hr button { all: unset; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--sr-mute); opacity: .45; cursor: pointer; }
.sr-hr:hover button, .sr-hr button:focus-visible { opacity: 1; }
.sr-hr button:hover { color: var(--sr-bad); background: rgba(248, 113, 113, .1); }
.sr-hr button svg { width: 13px; height: 13px; }
.sr-more { all: unset; display: block; width: 100%; margin-top: 10px; padding: 8px 0; text-align: center; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--sr-mute); background: var(--sr-faint); cursor: pointer; }
.sr-more:hover { color: var(--sr-ink); }

#soru-view button:focus-visible { outline: 2px solid rgba(var(--sr-acc), .6); outline-offset: 1px; }

/* ---------- v2: bugünün ders kırılımı ---------- */
.sr-mix { display: flex; flex-wrap: wrap; gap: 5px; }
.sr-mix:empty { display: none; }
.sr-mix span { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; color: var(--sr-mute); background: var(--sr-faint); }
.sr-mix b { color: var(--sr-ink); font-weight: 700; }

/* ---------- v2: odaklanman gerekenler ---------- */
.sr-weak { display: flex; flex-direction: column; }
.sr-weak h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--sr-mute); }
.sr-weak h4:not(:first-child) { margin-top: 14px; }
.sr-wk { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) 40px auto; align-items: center; gap: 10px; min-height: 36px; font-size: 12.5px; }
.sr-wk + .sr-wk { border-top: 1px solid var(--sr-faint); }
.sr-wk.idle { grid-template-columns: minmax(0, 1fr) auto auto; }
.sr-wk .nm { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.sr-wk .nm b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.sr-wk .nm small { font-size: 11px; color: var(--sr-mute); flex: none; }
.sr-wk .br { height: 6px; border-radius: 99px; background: var(--sr-faint); overflow: hidden; }
.sr-wk .br i { display: block; height: 100%; border-radius: inherit; }
.sr-wk .br i.low { background: var(--sr-bad); }
.sr-wk .br i.mid { background: var(--sr-gold); }
.sr-wk .pc { text-align: right; font-weight: 700; }
.sr-wk .pc.low { color: var(--sr-bad); }
.sr-wk .pc.mid { color: var(--sr-gold); }
.sr-wk .gap { font-size: 12px; color: var(--sr-down); font-weight: 600; }
.sr-wk button {
  all: unset; box-sizing: border-box; padding: 4px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 700; color: rgb(var(--sr-acc)); background: rgba(var(--sr-acc), .1); cursor: pointer;
  transition: background .15s;
}
.sr-wk button:hover { background: rgba(var(--sr-acc), .2); }
.sr-empty + .sr-empty { margin-top: 8px; }
.sr-empty.sr-good { color: var(--sr-ink); }
.sr-empty.sr-tip { font-size: 12px; padding: 8px 10px; border-radius: 9px; background: var(--sr-faint); }

/* ---------- v2: çalışma takvimi ---------- */
.sr-heat { --hm-gap: 3px; max-width: 660px; }
.sr-hm-m, .sr-hm-g { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: var(--hm-gap); }
.sr-hm-m { margin-left: 30px; margin-bottom: 4px; font-size: 10px; font-weight: 600; color: var(--sr-mute); }
.sr-hm-m span { white-space: nowrap; overflow: visible; }
.sr-hm { display: flex; gap: 6px; }
.sr-hm-d { flex: none; width: 24px; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: var(--hm-gap); font-size: 9.5px; font-weight: 600; color: var(--sr-mute); }
.sr-hm-d span { display: flex; align-items: center; }
.sr-hm-g { flex: 1 1 auto; min-width: 0; grid-template-rows: repeat(7, auto); grid-auto-flow: column; }
.sr-hm-g i, .sr-hm-l i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--sr-faint); }
.sr-hm-g i.f { background: none; }
.sr-hm-g i.td { outline: 1.5px solid var(--sr-ink); outline-offset: 0; }
.sr-heat i.l1 { background: rgba(var(--sr-acc), .22); }
.sr-heat i.l2 { background: rgba(var(--sr-acc), .45); }
.sr-heat i.l3 { background: rgba(var(--sr-acc), .75); }
.sr-heat i.l4 { background: rgb(var(--sr-acc)); box-shadow: 0 0 6px -1px rgba(var(--sr-acc), .55); }
.sr-hm-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; }
.sr-hm-s { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--sr-mute); }
.sr-hm-s b { color: var(--sr-ink); font-weight: 700; }
.sr-hm-l { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--sr-mute); }
.sr-hm-l i { width: 10px; height: 10px; }
.sr-hm-l i:first-of-type { margin-left: 3px; }
.sr-hm-l i:last-of-type { margin-right: 3px; }

/* ---------- v2: geçmiş filtresi + düzenleme ---------- */
.sr-hf { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px 0 12px; padding-bottom: 2px; }
.sr-hf::-webkit-scrollbar { display: none; }
.sr-hf:empty { display: none; }
.sr-hf button {
  all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--sr-mute);
  border: 1px solid var(--sr-line); cursor: pointer; transition: color .15s, border-color .15s;
}
.sr-hf button small { font-size: 10.5px; opacity: .7; }
.sr-hf button:hover { color: var(--sr-ink); }
.sr-hf button.sel { color: rgb(var(--sr-acc)); border-color: rgba(var(--sr-acc), .55); background: rgba(var(--sr-acc), .1); }

#soru-view .sr-hr { grid-template-columns: 44px minmax(0, 1fr) auto 48px 26px 26px; gap: 8px 10px; }
.sr-hr button.add { color: rgb(var(--sr-acc)); opacity: .7; }
.sr-hr button[data-edit]:hover { color: rgb(var(--sr-acc)); background: rgba(var(--sr-acc), .1); }
.dy i.nt { color: var(--sr-ink); background: rgba(var(--sr-acc), .12); }

#soru-view .sr-hr.sr-edit { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 8px 2px 10px; background: rgba(var(--sr-acc), .04); border-radius: 0 0 10px 10px; }
.sr-edit .n { color: var(--sr-mute); font-weight: 600; }
.sr-edit.shake { animation: sr-shake .35s; }
.sr-ed { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sr-ed label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.sr-ed label.ok { color: var(--sr-up); }
.sr-ed label.no { color: var(--sr-bad); }
.sr-ed input {
  all: unset; box-sizing: border-box; width: 62px; height: 32px; padding: 0 8px; border-radius: 8px;
  font-size: 14px !important; font-weight: 700; color: var(--sr-ink); text-align: center;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--sr-line);
}
.sr-ed input:focus { border-color: rgba(var(--sr-acc), .6); box-shadow: 0 0 0 3px rgba(var(--sr-acc), .1); }
.sr-ed input::-webkit-inner-spin-button { opacity: .4; }
.sr-ed .bsx { font-size: 12px; }
.sr-ed .bsx b { color: var(--sr-ink); }
.sr-ed .bsx.err { color: var(--sr-bad); font-weight: 600; }
.sr-ed-b { display: inline-flex; gap: 6px; margin-left: auto; }
#soru-view .sr-ed-b button { all: unset; width: auto; height: auto; opacity: 1; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--sr-mute); background: var(--sr-faint); cursor: pointer; }
#soru-view .sr-ed-b button.pri { color: #04110D; background: rgb(var(--sr-acc)); }
#soru-view .sr-ed-b button:hover { filter: brightness(1.08); color: var(--sr-ink); }
#soru-view .sr-ed-b button.pri:hover { color: #04110D; }

/* ---------- Animasyonlar ---------- */
@keyframes sr-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: rgb(var(--sr-acc)); } 100% { transform: scale(1); } }
@keyframes sr-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes sr-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes sr-glow { 0% { box-shadow: 0 0 0 0 rgba(var(--sr-acc), .5); } 100% { box-shadow: 0 0 0 18px rgba(var(--sr-acc), 0); } }
@keyframes sr-pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #soru-view *, #soru-view *::before { animation: none !important; transition: none !important; } }

/* ---------- Açık tema (paper) ---------- */
html[data-px-theme="paper"] #soru-view {
  --sr-ink: #0F172A;
  --sr-mute: #64748B;
  --sr-faint: rgba(15, 23, 42, .06);
  --sr-line: rgba(15, 23, 42, .1);
  --sr-gold: #D97706;
  --sr-up: #059669;
  --sr-down: #D97706;
  --sr-bad: #DC2626;
  --sr-card: #FFFFFF;
}
html[data-px-theme="paper"] .sr-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 30px -22px rgba(15, 23, 42, .25); }
html[data-px-theme="paper"] .sr-field { background: #F8FAFC; }
html[data-px-theme="paper"] .sr-add { color: #FFFFFF; }
html[data-px-theme="paper"] .sr-bars .c i { background: rgba(15, 23, 42, .12); }
html[data-px-theme="paper"] .sr-bars .c.hit i { background: rgba(var(--sr-acc), .75); }
html[data-px-theme="paper"] .sr-bars .c.today i { background: rgb(var(--sr-acc)); }
html[data-px-theme="paper"] .sr-bars .goal { border-top-color: rgba(15, 23, 42, .3); }
html[data-px-theme="paper"] .sr-seg button.sel { background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
html[data-px-theme="paper"] .sr-undo button:hover { background: rgba(15, 23, 42, .1); }
html[data-px-theme="paper"] .sr-ed input { background: #FFFFFF; }
html[data-px-theme="paper"] #soru-view .sr-ed-b button.pri,
html[data-px-theme="paper"] #soru-view .sr-ed-b button.pri:hover { color: #FFFFFF; }
html[data-px-theme="paper"] .sr-heat i.l1 { background: rgba(var(--sr-acc), .25); }

/* ---------- Dar ekran ---------- */
@media (max-width: 1100px) {
  .sr-top, .sr-two { grid-template-columns: minmax(0, 1fr); }
  .sr-bars { gap: 3px; }
}
@media (max-width: 640px) {
  .sr-card { padding: 14px; }
  .sr-entry { padding: 12px; }
  .sr-field { height: 48px; padding-left: 12px; }
  .sr-field > svg { display: none; }
  .sr-add { height: 36px; padding: 0 14px; }
  .sr-pv-enter { display: none; }
  .sr-today { flex-direction: column; align-items: stretch; gap: 14px; }
  .sr-ring { align-self: center; width: 120px; height: 120px; }
  #sr-goal-val { min-width: 0; }
  .sr-kpi { padding: 14px; }
  .sr-kpi > b { font-size: 22px; }
  .sr-bars { height: 120px; gap: 2px; }
  .sr-bars .c em { display: none; }
  .sr-axis { gap: 2px; font-size: 9px; }
  .sr-dist .r, .sr-dist-h { grid-template-columns: 76px minmax(0, 1fr) 38px 34px 38px; gap: 8px; }
  .sr-tops { grid-template-columns: minmax(0, 1fr); }
  #soru-view .sr-hr { grid-template-columns: 38px minmax(0, 1fr) 44px 26px 26px; gap: 6px 8px; }
  .sr-hr .dy { display: none; }
  #soru-view .sr-hr.sr-edit { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .sr-ed { grid-column: 1 / -1; }
  .sr-ed-b { margin-left: 0; width: 100%; }
  #soru-view .sr-ed-b button { flex: 1; text-align: center; padding: 9px 12px; }
  .sr-hm-m { margin-left: 0; }
  .sr-hm-d { display: none; }
  .sr-heat { --hm-gap: 2px; }
  .sr-hm-g i { border-radius: 2px; }
  .sr-wk { grid-template-columns: minmax(0, 1fr) 54px 36px auto; gap: 8px; }
  .sr-wk .nm small { display: none; }
}