/* ============================================================
   ÖĞRENME ÇIKTILARI DEFTER YARDIMCISI — v19 APP REDESIGN
   Full mobile-app feel · No overflow · Colored action buttons
   Day/Night readability · Centered titles · No horizontal scroll
   ============================================================ */

/* ── GOOGLE FONTS ── */
/* ── DESIGN TOKENS ── */
:root {
  color-scheme: light;

  /* Backgrounds */
  --bg-page:   #f0f6ff;
  --bg-card:   #ffffff;
  --bg-glass:  rgba(255,255,255,0.88);
  --bg-input:  #f5f9ff;

  /* Text */
  --text:      #0d2340;
  --text-sub:  #3a5572;
  --muted:     #6b829a;

  /* Brand */
  --primary:   #1d4ed8;
  --primary-lt:#3b82f6;
  --cyan:      #0891b2;
  --accent:    #f59e0b;
  --green:     #15803d;
  --pink:      #db2777;
  --violet:    #7c3aed;

  /* Borders & shadows */
  --line:      #d1e0f0;
  --line-strong:#b0c8e0;
  --shadow-xs: 0 2px 6px rgba(10,40,80,.07);
  --shadow-sm: 0 4px 14px rgba(10,40,80,.10);
  --shadow-md: 0 8px 28px rgba(10,40,80,.13);
  --shadow-lg: 0 16px 48px rgba(10,40,80,.16);

  /* Radius */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* Spacing */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top:    env(safe-area-inset-top, 0px);

  /* Button fills — named for intent */
  --btn-home:   #1d4ed8;
  --btn-back:   #0891b2;
  --btn-prev:   #7c3aed;
  --btn-next:   #15803d;
  --btn-theme:  #1e293b;
  --btn-week:   #0f172a;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page:   #060f1e;
  --bg-card:   #0d1e35;
  --bg-glass:  rgba(12,24,44,0.92);
  --bg-input:  #0a1828;

  --text:      #e8f4ff;
  --text-sub:  #a8c8e8;
  --muted:     #6a8aa8;

  --primary:   #60a5fa;
  --primary-lt:#93c5fd;
  --cyan:      #22d3ee;
  --accent:    #fbbf24;
  --green:     #34d399;
  --pink:      #f472b6;
  --violet:    #a78bfa;

  --line:      #1e3554;
  --line-strong:#2a4870;
  --shadow-xs: 0 2px 6px rgba(0,0,0,.20);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.28);
  --shadow-md: 0 8px 28px rgba(0,0,0,.36);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.42);

  --btn-home:   #2563eb;
  --btn-back:   #0e7490;
  --btn-prev:   #6d28d9;
  --btn-next:   #166534;
  --btn-theme:  #334155;
  --btn-week:   #1e293b;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100dvh;
  font-family: var(--ild-app-font) !important;
  background-color: var(--bg-page);
  background-image:
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(29,78,216,.10), transparent),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(8,145,178,.08), transparent);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
img { max-width: 100%; display: block; }

/* ── HIDDEN HELPERS ── */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.meta-hidden { display: none !important; }

/* ── APP SHELL ── */
.app-shell {
  width: 100%;
  max-width: 100vw;
  min-height: 100dvh;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── SCREENS ── */
.main { width: 100%; }
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; animation: fadeUp .22s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════
   GRADE & LESSON SCREENS
═══════════════════════════════════════ */

.hero-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(20px,3vw,32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* App header inside hero */
.app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.app-logo {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  color: #fff;
  font-size: 26px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.app-header-text { text-align: center; }
.app-header-text h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--text);
}
.app-header-text p {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  margin-top: 2px;
}

/* Screen title block */
.screen-title { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(29,78,216,.10);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
:root[data-theme="dark"] .eyebrow { background: rgba(96,165,250,.15); }
.screen-title h2 {
  margin: 10px 0 6px;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-align: center;
  color: var(--text);
}
.screen-title p {
  color: var(--muted);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  line-height: 1.5;
}

/* Choice grid */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  width: 100%;
}
.choice-grid.lessons {
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 560px;
  margin: 0 auto;
}
.choice-card {
  border: 1.5px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 18px 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 130px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  -webkit-tap-highlight-color: transparent;
}
.choice-card::after {
  content: '';
  position: absolute;
  inset: auto -20px -36px auto;
  width: 100px; height: 100px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(29,78,216,.12), transparent 70%);
  pointer-events: none;
}
.choice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary-lt); }
.choice-card:active { transform: scale(.97); }
.choice-card.disabled { opacity: .55; cursor: not-allowed; }
.choice-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(29,78,216,.14), rgba(8,145,178,.18));
  font-size: 22px;
  display: grid; place-items: center;
}
.choice-card strong {
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text);
}
.choice-card span {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Back button on lesson screen */
.soft-btn {
  border: 1px solid rgba(21, 128, 61, .22);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 800;
  font-size: 14px;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 52%, #4ade80 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(22, 163, 74, .24), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .15s, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.soft-btn:hover { filter: brightness(1.03); }
.soft-btn:active { transform: scale(.97); }
:root[data-theme="dark"] .soft-btn {
  border-color: rgba(74, 222, 128, .24);
  background: linear-gradient(135deg, #166534 0%, #15803d 52%, #16a34a 100%);
  color: #f8fffb;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ═══════════════════════════════════════
   WORKBENCH SCREEN
═══════════════════════════════════════ */

.workbench {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.result-panel-integrated {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ── TOP HEADER BAR ── */
.result-head-integrated {
  padding: 16px 18px 14px;
  background: linear-gradient(135deg,
    rgba(29,78,216,.13) 0%,
    rgba(8,145,178,.09) 50%,
    rgba(245,158,11,.07) 100%);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:root[data-theme="dark"] .result-head-integrated {
  background: linear-gradient(135deg,
    rgba(96,165,250,.12) 0%,
    rgba(34,211,238,.08) 50%,
    rgba(251,191,36,.06) 100%);
}

/* ── ROW 1: pill · oval-title-box · theme-btn ── */
.head-hero-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

/* Ders saati pill */
.pill {
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(21,128,61,.16), rgba(34,197,94,.10));
  color: var(--green);
  border: 1px solid rgba(21,128,61,.22);
}
:root[data-theme="dark"] .pill {
  background: rgba(52,211,153,.14);
  color: #4ade80;
  border-color: rgba(52,211,153,.22);
}

/* ── OVAL TITLE BOX — green ── */
.week-title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 45%, #22c55e 100%);
  border-radius: 999px;
  padding: 0 32px;
  height: 58px;
  box-shadow:
    0 6px 20px rgba(21,128,61,.32),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.10);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.week-title-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 55%);
  pointer-events: none;
}
:root[data-theme="dark"] .week-title-box {
  background: linear-gradient(135deg, #052e16 0%, #14532d 50%, #166534 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}

#weekTitle {
  width: 100%;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-size: clamp(13px, 1.05vw, 15px) !important;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.08;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,40,.28);
  overflow: visible;
  white-space: nowrap;
  word-break: normal;
  position: relative;
  z-index: 1;
}

/* ── ROW 2: nav controls — 5 equal columns ── */
.head-bottom-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

/* ── UNIFIED BUTTON BASE ── */
/* All nav buttons: same blue, same size */
.mini-action-btn,
.integrated-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;         /* pill shape */
  padding: 8px 14px;
  min-height: 48px;
  height: auto;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  text-align: center;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  box-shadow: 0 4px 14px rgba(29,78,216,.28);
  color: #ffffff !important;
  transition: transform .15s, filter .15s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
.mini-action-btn:active,
.integrated-nav:active { transform: scale(.96); }
.mini-action-btn:hover,
.integrated-nav:hover { filter: brightness(1.08); }

/* Önceki/Sonraki Hafta — ikon solda/sağda, etiket ortada */
#prevWeek, #nextWeek {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 10px 16px;
}
#prevWeek .nav-icon,
#nextWeek .nav-icon {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  opacity: .90;
}
#prevWeek .nav-label,
#nextWeek .nav-label {
  flex: 1;
  text-align: center;
  line-height: 1.25;
  font-size: 13px;
}

/* Geri / Ana sayfa — ikon üstte, yazı altında */
#goBackBtn, #goHomeBtn {
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
}
.nav-icon {
  font-size: 18px;
  line-height: 1;
  opacity: .92;
}
.nav-label-single {
  font-size: 12px;
  line-height: 1;
}

:root[data-theme="dark"] .mini-action-btn,
:root[data-theme="dark"] .integrated-nav {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  box-shadow: 0 4px 14px rgba(0,0,0,.30);
}

/* Geri & Ana sayfa — lacivert */
#goBackBtn, #goHomeBtn {
  background: linear-gradient(135deg, #0f2a5c, #1e3a8a) !important;
  box-shadow: 0 4px 14px rgba(15,42,92,.36) !important;
}
:root[data-theme="dark"] #goBackBtn,
:root[data-theme="dark"] #goHomeBtn {
  background: linear-gradient(135deg, #0a1e40, #162d5e) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.40) !important;
}

/* Center column: Hafta select trigger */
.center-select-holder {
  display: flex;
  align-items: center;
}
.head-select-trigger-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c2410c, #ea580c, #f97316);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(234,88,12,.36);
  width: 100%;
  cursor: pointer;
  transition: filter .15s;
}
.head-select-trigger-main:hover { filter: brightness(1.08); }
.head-select-trigger-main span { color: rgba(255,255,255,.90); }
.select-wrap-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.select-wrap-overlay::after { display: none; }
.select-wrap-overlay select {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  color: #000;
}
:root[data-theme="dark"] .head-select-trigger-main {
  background: linear-gradient(135deg, #7c2d12, #c2410c, #ea580c);
  box-shadow: 0 4px 14px rgba(0,0,0,.30);
}

/* ── THEME TOGGLE — kept dark/separate ── */
.mini-theme-btn {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.22) !important;
  border-radius: 999px;
  padding: 0 16px;
  height: 58px;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff !important;
  flex-shrink: 0;
  transition: transform .15s, filter .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mini-theme-btn:active { transform: scale(.96); }
:root[data-theme="dark"] .mini-theme-btn {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

/* ── INFO GRID ── */
.result-scroll {
  padding: 16px clamp(14px,2vw,22px) 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}
.info-grid {
  display: grid;
  grid-template-columns: minmax(120px,.7fr) minmax(180px,1.4fr) minmax(140px,1fr);
  gap: 10px;
}
.info-box {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px 14px 16px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.info-box::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--primary), var(--cyan));
  border-radius: 4px 0 0 4px;
}
.info-box:nth-child(2)::before { background: linear-gradient(180deg, #7c3aed, #db2777); }
.info-box:nth-child(3)::before { background: linear-gradient(180deg, #f59e0b, #f97316); }
.info-box small {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
  text-align: center;
}
.info-box b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.08;
  color: var(--text);
  word-break: normal;
  text-align: center;
}


/* Tarih kutusu — lacivert dolgulu */
.info-box.date-fill-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #163b8f 0%, #1e40af 48%, #2563eb 100%);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 8px 20px rgba(29,78,216,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
.info-box.date-fill-box::before {
  background: linear-gradient(180deg, #0f2c74, #2563eb);
}
.info-box.date-fill-box small,
.info-box.date-fill-box b {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,14,36,.30);
}
:root[data-theme="dark"] .info-box.date-fill-box {
  background: linear-gradient(135deg, #0b1f52 0%, #14367f 48%, #1d4ed8 100%);
  border-color: rgba(96,165,250,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}

20%{ opacity: .18; }
  42%{ opacity: .96; }
  100%{ transform: translateX(370%) skewX(-22deg); opacity: 0; }
}


/* ── OUTPUT CARDS ── */
.output-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  position: relative;
}
.output-card::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 6px;
  background: linear-gradient(180deg, var(--primary-lt), var(--cyan));
}

/* Card title bars */
.output-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  font-weight: 800;
  font-size: 15px;
  min-height: 56px;
  text-align: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
:root[data-theme="dark"] .output-title { border-bottom-color: rgba(255,255,255,.06); }

.output-title span {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; text-align: center; width: 100%;
}

/* Important — Öğrenme Çıktısı */
.output-card.important {
  border-color: rgba(29,78,216,.30);
  box-shadow: 0 6px 24px rgba(29,78,216,.12);
}
.output-card.important::before { background: linear-gradient(180deg, #1d4ed8, #06b6d4); width: 7px; }
.output-card.important .output-title {
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,20,.22);
}
:root[data-theme="dark"] .output-card.important .output-title {
  background: linear-gradient(135deg, #1e40af, #0369a1);
  color: #f0f9ff;
}

/* Process */
.output-card.process-focus::before { background: linear-gradient(180deg, #15803d, #d97706); width: 7px; }
.output-card.process-focus .output-title {
  background: linear-gradient(135deg, #15803d, #a3e635);
  color: #052e16;
  text-shadow: 0 1px 1px rgba(255,255,255,.30);
}
:root[data-theme="dark"] .output-card.process-focus .output-title {
  background: linear-gradient(135deg, #14532d, #365314);
  color: #ecfdf5;
}

/* Assessment */
.assessment-card::before { background: linear-gradient(180deg, #0891b2, #06b6d4); width: 7px; }
.assessment-card .output-title {
  background: linear-gradient(135deg, #0891b2, #38bdf8);
  color: #f0f9ff;
  text-shadow: 0 1px 2px rgba(0,30,60,.20);
}
:root[data-theme="dark"] .assessment-card .output-title {
  background: linear-gradient(135deg, #0c4a6e, #075985);
  color: #e0f2fe;
}

/* Special days */
.special-card::before { background: linear-gradient(180deg, #7c3aed, #a855f7); width: 7px; }
.special-card .output-title {
  background: linear-gradient(135deg, #6d28d9, #a78bfa);
  color: #f5f3ff;
  text-shadow: 0 1px 2px rgba(20,0,60,.22);
}
:root[data-theme="dark"] .special-card .output-title {
  background: linear-gradient(135deg, #3b0764, #4c1d95);
  color: #ede9fe;
}

/* Values */
.values-card::before { background: linear-gradient(180deg, #15803d, #4ade80); width: 7px; }
.values-card .output-title {
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #f0fdf4;
  text-shadow: 0 1px 2px rgba(0,30,10,.18);
}
:root[data-theme="dark"] .values-card .output-title {
  background: linear-gradient(135deg, #052e16, #14532d);
  color: #dcfce7;
}

/* Relations */
.relation-card::before { background: linear-gradient(180deg, #db2777, #f43f5e); width: 7px; }
.relation-card .output-title {
  background: linear-gradient(135deg, #be185d, #f43f5e);
  color: #fff1f2;
  text-shadow: 0 1px 2px rgba(60,0,20,.22);
}
:root[data-theme="dark"] .relation-card .output-title {
  background: linear-gradient(135deg, #500724, #881337);
  color: #ffe4e6;
}

/* Output body */
.output-body {
  padding: 14px 16px;
  white-space: pre-wrap;
  font-size: 15px;
  line-height: 1.60;
  font-weight: 700;
  color: var(--text);
  word-break: normal;
}
.output-card.important .output-body {
  font-size: 16px;
  font-weight: 800;
  background: rgba(29,78,216,.03);
}
:root[data-theme="dark"] .output-card.important .output-body {
  background: rgba(96,165,250,.04);
}
.empty {
  color: var(--muted);
  font-style: italic;
  font-weight: 700;
}

/* ── TOAST ── */
.toast {
  position: fixed;
  left: 50%; bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%) translateY(12px);
  background: #0f172a;
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 100;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
:root[data-theme="dark"] .toast { background: #1e293b; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── HIDDEN/LEGACY (not needed) ── */
.topbar { display: none !important; }
.result-foot { display: none !important; }
.copy-mini { display: none !important; }
.breadcrumb { display: none !important; }
.fit-single-line { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 860px) {
  .app-shell { padding: 12px 12px calc(12px + var(--safe-bottom)); gap: 12px; }
  .hero-card { padding: 16px; border-radius: var(--r-lg); gap: 16px; }
  .choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .choice-card { min-height: 114px; padding: 14px; border-radius: var(--r-md); }
  .choice-card strong { font-size: 16px; }
  .info-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .info-box:nth-child(3) { grid-column: 1 / -1; }
  .result-head-integrated { padding: 12px 12px 12px; gap: 10px; }

  /* Row 1: pill + oval title + theme btn stack gracefully */
  .head-hero-strip { gap: 8px; min-height: auto; }
  .week-title-box { padding: 9px 18px; }
  #weekTitle { font-size: clamp(13px, 2.6vw, 14px) !important; }
  .mini-theme-btn { height: 40px; font-size: 13px; padding: 0 12px; }
  .pill { font-size: 12px; padding: 6px 11px; }

  /* Row 2: 2×2 grid + hafta seç full width on top */
  .head-bottom-controls {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .center-select-holder { grid-column: 1 / -1; order: -1; }
  .head-select-trigger-main { height: 44px; font-size: 14px; }
  .mini-action-btn, .integrated-nav { height: 44px; font-size: 13px; }

  .output-title { font-size: 13px; min-height: 50px; padding: 11px 12px; }
  .output-body { font-size: 14px; padding: 12px; }
  .output-card.important .output-body { font-size: 15px; }
  .result-scroll { padding: 12px; gap: 10px; }
}

/* Phone */
@media (max-width: 480px) {
  .app-shell { padding: 10px 10px calc(10px + var(--safe-bottom)); gap: 10px; }
  .hero-card { padding: 14px; gap: 14px; }
  .app-header { gap: 10px; padding-bottom: 14px; }
  .app-logo { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
  .app-header-text h1 { font-size: 16px; }
  .choice-grid { gap: 9px; }
  .choice-card { min-height: 100px; padding: 12px; }
  .choice-icon { width: 38px; height: 38px; font-size: 20px; }
  .choice-card strong { font-size: 14px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-box:nth-child(3) { grid-column: auto; }

  /* Phone: title box slightly smaller */
  .week-title-box { padding: 8px 14px; }
  #weekTitle { font-size: clamp(12px, 3.8vw, 13px) !important; }
  .mini-theme-btn { height: 38px; font-size: 12px; padding: 0 10px; }
  .pill { font-size: 11px; padding: 5px 9px; }

  .head-bottom-controls { gap: 7px; }
  .mini-action-btn, .integrated-nav { height: 42px; font-size: 12px; }
  .head-select-trigger-main { height: 42px; font-size: 13px; }

  .output-title { font-size: 12px; min-height: 46px; }
  .output-body { font-size: 13px; line-height: 1.55; }
}

/* Ultra-small */
@media (max-width: 360px) {
  .app-shell { padding: 8px 8px calc(8px + var(--safe-bottom)); }
  .head-bottom-controls { gap: 6px; }
  .integrated-nav, .mini-action-btn { font-size: 11px; padding: 8px 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Dark mode card backgrounds */
:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .result-panel-integrated,
:root[data-theme="dark"] .output-card,
:root[data-theme="dark"] .info-box {
  background: var(--bg-card);
  border-color: var(--line);
}
:root[data-theme="dark"] .choice-card { background: var(--bg-card); border-color: var(--line); }
:root[data-theme="dark"] .choice-card:hover { border-color: var(--primary-lt); }
:root[data-theme="dark"] .head-select-trigger-main {
  background: linear-gradient(135deg, #7c2d12, #c2410c, #ea580c);
}
:root[data-theme="dark"] .info-box b { color: var(--text); }


/* SVG icon sizing inside buttons */
.nav-icon svg {
  display: block;
  flex-shrink: 0;
}
#prevWeek .nav-icon,
#nextWeek .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
#goBackBtn .nav-icon,
#goHomeBtn .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

#weekTitle.fit-single-line{overflow:visible;text-overflow:clip;white-space:nowrap}


/* v31 week title hard-fix */
.week-title-box > #weekTitle,
.head-hero-strip .week-title-box > #weekTitle {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
@media (max-width: 860px) {
  .week-title-box > #weekTitle,
  .head-hero-strip .week-title-box > #weekTitle {
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  .week-title-box > #weekTitle,
  .head-hero-strip .week-title-box > #weekTitle {
    font-size: 12px !important;
  }
}


/* v32 title final override: remove tiny fallback */
.week-title-box > #weekTitle,
.head-hero-strip .week-title-box > #weekTitle,
h2#weekTitle.fit-single-line {
  margin: 0 !important;
  font-size: clamp(18px, 1.55vw, 20px) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
@media (max-width: 860px) {
  .week-title-box > #weekTitle,
  .head-hero-strip .week-title-box > #weekTitle,
  h2#weekTitle.fit-single-line {
    font-size: clamp(15px, 3vw, 18px) !important;
  }
}
@media (max-width: 480px) {
  .week-title-box > #weekTitle,
  .head-hero-strip .week-title-box > #weekTitle,
  h2#weekTitle.fit-single-line {
    font-size: clamp(13px, 3.8vw, 16px) !important;
  }
}


/* v34 FINAL: green title slightly reduced and safely contained */
.week-title-box {
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 28px !important;
  overflow: hidden !important;
}
.week-title-box > h2#weekTitle,
.head-hero-strip .week-title-box > h2#weekTitle,
h2#weekTitle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: normal !important;
  text-shadow: 0 1px 3px rgba(0,0,40,.28) !important;
}
@media (max-width: 860px) {
  .week-title-box { height: 52px !important; min-height: 52px !important; padding: 0 18px !important; }
  .week-title-box > h2#weekTitle,
  .head-hero-strip .week-title-box > h2#weekTitle,
  h2#weekTitle { font-size: 17px !important; line-height: 1.08 !important; }
}
@media (max-width: 480px) {
  .week-title-box { height: 46px !important; min-height: 46px !important; padding: 0 12px !important; }
  .week-title-box > h2#weekTitle,
  .head-hero-strip .week-title-box > h2#weekTitle,
  h2#weekTitle { font-size: 14px !important; line-height: 1.06 !important; }
}


/* ============================================================
   v35 — GRADE & LESSON SCREENS THEME ALIGNMENT
   Output-screen visual language applied to selection screens
   ============================================================ */
#gradeScreen,
#lessonScreen{
  width:100%;
  align-items:center;
}
#gradeScreen .hero-card,
#lessonScreen .hero-card{
  width:100%;
  max-width:960px;
  margin-inline:auto;
  padding:0;
  gap:0;
  overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  background:var(--bg-card);
}
#gradeScreen .app-header,
#lessonScreen .app-header{
  justify-content:center;
  gap:16px;
  padding:18px 24px 16px;
  background:linear-gradient(135deg, rgba(29,78,216,.13) 0%, rgba(8,145,178,.09) 50%, rgba(245,158,11,.07) 100%);
  border-bottom:1px solid var(--line);
}
:root[data-theme="dark"] #gradeScreen .app-header,
:root[data-theme="dark"] #lessonScreen .app-header{
  background:linear-gradient(135deg, rgba(96,165,250,.12) 0%, rgba(34,211,238,.08) 50%, rgba(251,191,36,.06) 100%);
}
#gradeScreen .app-logo,
#lessonScreen .app-logo{
  width:58px;
  height:58px;
  border-radius:20px;
  background:linear-gradient(135deg,#1d4ed8 0%, #0891b2 100%);
  box-shadow:0 10px 24px rgba(29,78,216,.22);
  font-size:28px;
}
#gradeScreen .app-header-text,
#lessonScreen .app-header-text{
  text-align:left;
}
#gradeScreen .app-header-text h1,
#lessonScreen .app-header-text h1{
  font-size:clamp(24px,3vw,34px);
  line-height:1.05;
}
#gradeScreen .app-header-text p,
#lessonScreen .app-header-text p{
  font-size:14px;
  font-weight:800;
  color:var(--muted);
  margin-top:4px;
}
#gradeScreen .screen-title,
#lessonScreen .screen-title{
  padding:22px 24px 10px;
  text-align:center;
}
#gradeScreen .eyebrow,
#lessonScreen .eyebrow{
  background:rgba(29,78,216,.10);
  color:var(--primary);
  padding:7px 14px;
  font-size:13px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
#gradeScreen .screen-title h2,
#lessonScreen .screen-title h2{
  margin:12px 0 8px;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.08;
}
#gradeScreen .screen-title p,
#lessonScreen .screen-title p{
  font-size:16px;
  font-weight:800;
}
#gradeScreen .choice-grid,
#lessonScreen .choice-grid{
  padding:18px 24px 26px;
  gap:16px;
}
#lessonScreen .choice-grid.lessons{
  max-width:none;
}
#gradeScreen .choice-card,
#lessonScreen .choice-card{
  min-height:150px;
  padding:18px 16px 16px;
  border-radius:26px;
  border:1px solid rgba(28,72,143,.14);
  box-shadow:0 10px 28px rgba(15,35,67,.10), inset 0 1px 0 rgba(255,255,255,.85);
  background:linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(243,248,255,.95) 100%);
}
#gradeScreen .choice-card::after,
#lessonScreen .choice-card::after{
  inset:auto -10px -26px auto;
  width:110px;
  height:110px;
  background:radial-gradient(circle, rgba(29,78,216,.14), transparent 72%);
}
#gradeScreen .choice-card:hover,
#lessonScreen .choice-card:hover{
  transform:translateY(-3px);
  border-color:rgba(29,78,216,.32);
}
#gradeScreen .choice-icon,
#lessonScreen .choice-icon{
  width:50px;
  height:50px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(29,78,216,.16), rgba(8,145,178,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
#gradeScreen .choice-card strong,
#lessonScreen .choice-card strong{
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.14;
}
#gradeScreen .choice-card span,
#lessonScreen .choice-card span{
  font-size:14px;
  font-weight:800;
}
/* Primary active card */
#gradeScreen .choice-card:not(.disabled):first-child,
#lessonScreen .choice-card:not(.disabled):first-child{
  background:linear-gradient(135deg,#2457da 0%, #1e40af 40%, #0891b2 100%);
  border-color:rgba(36,87,218,.55);
  box-shadow:0 14px 34px rgba(29,78,216,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
#gradeScreen .choice-card:not(.disabled):first-child .choice-icon,
#lessonScreen .choice-card:not(.disabled):first-child .choice-icon{
  background:rgba(255,255,255,.18);
  color:#fff;
}
#gradeScreen .choice-card:not(.disabled):first-child strong,
#gradeScreen .choice-card:not(.disabled):first-child span,
#lessonScreen .choice-card:not(.disabled):first-child strong,
#lessonScreen .choice-card:not(.disabled):first-child span{
  color:#fff;
}
#gradeScreen .choice-card:not(.disabled):first-child::after,
#lessonScreen .choice-card:not(.disabled):first-child::after{
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 72%);
}
/* Disabled cards */
#gradeScreen .choice-card.disabled,
#lessonScreen .choice-card.disabled{
  opacity:1;
  background:linear-gradient(180deg, rgba(246,249,253,.95), rgba(236,242,248,.92));
  border-color:rgba(152,174,199,.28);
}
#gradeScreen .choice-card.disabled strong,
#lessonScreen .choice-card.disabled strong{color:#73859b}
#gradeScreen .choice-card.disabled span,
#lessonScreen .choice-card.disabled span{color:#9aa8b9}
#gradeScreen .choice-card.disabled .choice-icon,
#lessonScreen .choice-card.disabled .choice-icon{background:rgba(180,196,214,.22);color:#8ca1b7}
/* Alternate lesson colors for future lessons */
#lessonScreen .choice-card:nth-child(2):not(.disabled){
  background:linear-gradient(135deg,#14b8a6 0%, #0f766e 100%);
  border-color:rgba(20,184,166,.45);
}
#lessonScreen .choice-card:nth-child(2):not(.disabled) .choice-icon{background:rgba(255,255,255,.18);color:#fff}
#lessonScreen .choice-card:nth-child(2):not(.disabled) strong,
#lessonScreen .choice-card:nth-child(2):not(.disabled) span{color:#fff}
#lessonScreen .choice-card:nth-child(3):not(.disabled){
  background:linear-gradient(135deg,#f97316 0%, #ea580c 100%);
  border-color:rgba(249,115,22,.45);
}
#lessonScreen .choice-card:nth-child(3):not(.disabled) .choice-icon{background:rgba(255,255,255,.18);color:#fff}
#lessonScreen .choice-card:nth-child(3):not(.disabled) strong,
#lessonScreen .choice-card:nth-child(3):not(.disabled) span{color:#fff}
#lessonScreen .choice-card:nth-child(4):not(.disabled){
  background:linear-gradient(135deg,#7c3aed 0%, #5b21b6 100%);
  border-color:rgba(124,58,237,.45);
}
#lessonScreen .choice-card:nth-child(4):not(.disabled) .choice-icon{background:rgba(255,255,255,.18);color:#fff}
#lessonScreen .choice-card:nth-child(4):not(.disabled) strong,
#lessonScreen .choice-card:nth-child(4):not(.disabled) span{color:#fff}
#lessonScreen #backToGrades{
  margin:0 0 24px;
  min-height:54px;
  padding:0 22px;
  border-radius:20px;
  background:linear-gradient(135deg,#1d4ed8 0%, #2563eb 100%);
  color:#fff;
  border:none;
  box-shadow:0 12px 26px rgba(29,78,216,.22);
}
:root[data-theme="dark"] #gradeScreen .choice-card,
:root[data-theme="dark"] #lessonScreen .choice-card{
  background:linear-gradient(180deg, rgba(13,30,53,.98) 0%, rgba(10,24,42,.95) 100%);
  border-color:rgba(96,165,250,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
:root[data-theme="dark"] #gradeScreen .choice-card:not(.disabled):first-child,
:root[data-theme="dark"] #lessonScreen .choice-card:not(.disabled):first-child{background:linear-gradient(135deg,#2563eb 0%, #1d4ed8 40%, #0f766e 100%)}
:root[data-theme="dark"] #gradeScreen .choice-card.disabled,
:root[data-theme="dark"] #lessonScreen .choice-card.disabled{
  background:linear-gradient(180deg, rgba(17,32,54,.96), rgba(12,24,40,.94));
}
@media (max-width: 860px){
  #gradeScreen .hero-card,
  #lessonScreen .hero-card{border-radius:24px}
  #gradeScreen .app-header,
  #lessonScreen .app-header{padding:16px 14px 14px;gap:12px}
  #gradeScreen .app-logo,
  #lessonScreen .app-logo{width:48px;height:48px;border-radius:16px;font-size:24px}
  #gradeScreen .app-header-text h1,
  #lessonScreen .app-header-text h1{font-size:22px}
  #gradeScreen .app-header-text p,
  #lessonScreen .app-header-text p{font-size:12px}
  #gradeScreen .screen-title,
  #lessonScreen .screen-title{padding:18px 14px 6px}
  #gradeScreen .screen-title h2,
  #lessonScreen .screen-title h2{font-size:24px}
  #gradeScreen .screen-title p,
  #lessonScreen .screen-title p{font-size:14px}
  #gradeScreen .choice-grid,
  #lessonScreen .choice-grid{padding:14px 14px 18px;grid-template-columns:1fr 1fr;gap:12px}
  #lessonScreen .choice-grid.lessons{grid-template-columns:1fr}
  #gradeScreen .choice-card,
  #lessonScreen .choice-card{min-height:132px;padding:16px 14px 14px;border-radius:22px}
  #gradeScreen .choice-card strong,
  #lessonScreen .choice-card strong{font-size:20px}
}
@media (max-width: 560px){
  #gradeScreen .choice-grid,
  #lessonScreen .choice-grid{grid-template-columns:1fr}
  #gradeScreen .app-header,
  #lessonScreen .app-header{justify-content:flex-start}
  #gradeScreen .app-header-text,
  #lessonScreen .app-header-text{text-align:left}
}


/* v37 lesson screen redesign */
#gradeScreen .app-header-text p,
#lessonScreen .app-header-text p{display:none}
#lessonScreen .hero-card{max-width:1040px}
#lessonScreen .screen-title{padding:18px 24px 8px}
#lessonScreen .screen-title h2{margin:12px 0 2px;font-size:clamp(30px,3vw,40px);line-height:1.06}
#lessonScreen .screen-title p{display:none}
#lessonScreen .choice-grid.lessons{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px 24px 12px}
#lessonScreen .lesson-card{min-height:140px;align-items:flex-start;justify-content:flex-start;text-align:left;padding:18px 16px 16px;border-radius:24px}
#lessonScreen .lesson-card .choice-icon{width:52px;height:52px;border-radius:16px;font-size:24px;margin-bottom:8px}
#lessonScreen .lesson-card strong{font-size:21px;line-height:1.15}
#lessonScreen .lesson-card span{font-size:14px;line-height:1.25;margin-top:4px}
#lessonScreen .lesson-card.ready{background:linear-gradient(135deg,#2457da 0%, #1e40af 40%, #0891b2 100%) !important;border-color:rgba(36,87,218,.55) !important;box-shadow:0 14px 34px rgba(29,78,216,.26), inset 0 1px 0 rgba(255,255,255,.16) !important}
#lessonScreen .lesson-card.ready .choice-icon{background:rgba(255,255,255,.18);color:#fff}
#lessonScreen .lesson-card.ready strong,
#lessonScreen .lesson-card.ready span{color:#fff}
#lessonScreen .lesson-card.disabled{opacity:1;background:linear-gradient(180deg,#ffffff 0%, #f3f7fd 100%) !important;border-color:rgba(180,196,214,.34) !important;box-shadow:0 8px 24px rgba(15,35,67,.07), inset 0 1px 0 rgba(255,255,255,.9) !important}
#lessonScreen .lesson-card.disabled strong{color:#59708d}
#lessonScreen .lesson-card.disabled span{color:#8da0b4}
#lessonScreen .lesson-card.disabled .choice-icon{background:linear-gradient(135deg,rgba(178,196,214,.25),rgba(212,224,238,.4));color:#7d90a8}
#lessonScreen #backToGrades{margin:4px auto 24px;display:inline-flex}
#lessonScreen .choice-grid.lessons + div{text-align:center;margin-top:0 !important}
:root[data-theme="dark"] #lessonScreen .lesson-card.disabled{background:linear-gradient(180deg, rgba(16,31,52,.96), rgba(11,24,42,.94)) !important;border-color:rgba(96,165,250,.16) !important}
:root[data-theme="dark"] #lessonScreen .lesson-card.disabled strong{color:#d8e3f3}
:root[data-theme="dark"] #lessonScreen .lesson-card.disabled span{color:#9fb3c9}
:root[data-theme="dark"] #lessonScreen .lesson-card.disabled .choice-icon{background:linear-gradient(135deg,rgba(58,77,107,.42),rgba(86,110,145,.24));color:#d0def0}
@media (max-width: 980px){
  #lessonScreen .choice-grid.lessons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 860px){
  #lessonScreen .screen-title{padding:16px 14px 4px}
  #lessonScreen .screen-title h2{font-size:26px}
  #lessonScreen .choice-grid.lessons{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 14px 10px;gap:12px}
  #lessonScreen .lesson-card{min-height:126px;padding:16px 14px 14px;border-radius:22px}
  #lessonScreen .lesson-card strong{font-size:18px}
  #lessonScreen .lesson-card span{font-size:13px}
}
@media (max-width: 560px){
  #lessonScreen .choice-grid.lessons{grid-template-columns:1fr}
  #lessonScreen .lesson-card{min-height:112px}
}


/* v38 lesson cards compact + centered */
#lessonScreen .choice-grid.lessons{
  gap: 12px;
  padding: 16px 22px 10px;
}
#lessonScreen .lesson-card{
  min-height: 116px;
  padding: 14px 12px 12px;
  border-radius: 22px;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#lessonScreen .lesson-card .choice-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 22px;
  margin: 0 auto 8px;
}
#lessonScreen .lesson-card strong{
  width: 100%;
  text-align: center;
  font-size: 18px;
  line-height: 1.14;
}
#lessonScreen .lesson-card span{
  width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 4px;
}
#lessonScreen .lesson-card.ready strong,
#lessonScreen .lesson-card.ready span,
#lessonScreen .lesson-card.disabled strong,
#lessonScreen .lesson-card.disabled span{
  text-align: center;
}
@media (max-width: 980px){
  #lessonScreen .choice-grid.lessons{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 860px){
  #lessonScreen .choice-grid.lessons{
    padding: 14px 14px 8px;
    gap: 10px;
  }
  #lessonScreen .lesson-card{
    min-height: 104px;
    padding: 12px 10px 10px;
    border-radius: 20px;
  }
  #lessonScreen .lesson-card .choice-icon{
    width: 42px;
    height: 42px;
    font-size: 20px;
    margin-bottom: 7px;
  }
  #lessonScreen .lesson-card strong{
    font-size: 16px;
  }
  #lessonScreen .lesson-card span{
    font-size: 12px;
  }
}
@media (max-width: 560px){
  #lessonScreen .choice-grid.lessons{
    grid-template-columns: 1fr;
  }
  #lessonScreen .lesson-card{
    min-height: 98px;
  }
}


/* v39 lesson cards text cleanup + tighter heights */
#lessonScreen .lesson-card{
  min-height: 94px !important;
  padding: 12px 10px !important;
  border-radius: 20px !important;
}
#lessonScreen .lesson-card .choice-icon{
  margin: 0 auto 6px !important;
}
#lessonScreen .lesson-card strong{
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
}
#lessonScreen .lesson-card span{
  display: none !important;
}
#lessonScreen .choice-grid.lessons{
  gap: 10px !important;
  padding: 14px 20px 8px !important;
}
#lessonScreen #backToGrades{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 220px;
  padding: 0 20px !important;
}
@media (max-width: 860px){
  #lessonScreen .lesson-card{
    min-height: 88px !important;
    padding: 11px 10px !important;
  }
  #lessonScreen .lesson-card strong{
    font-size: 15px !important;
  }
  #lessonScreen .choice-grid.lessons{
    padding: 12px 14px 6px !important;
    gap: 9px !important;
  }
}
@media (max-width: 560px){
  #lessonScreen .lesson-card{
    min-height: 84px !important;
  }
  #lessonScreen #backToGrades{
    width: calc(100% - 28px);
    max-width: 320px;
  }
}


/* v40 grade screen aligned with lesson screen */
#gradeScreen .choice-grid{
  max-width: 940px;
  margin: 0 auto;
  gap: 10px !important;
  padding: 14px 20px 16px !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
#gradeScreen .choice-card{
  min-height: 94px !important;
  padding: 12px 10px !important;
  border-radius: 20px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#gradeScreen .choice-card .choice-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 22px;
  margin: 0 auto 8px !important;
}
#gradeScreen .choice-card strong{
  width: 100%;
  margin: 0 !important;
  text-align: center !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
}
#gradeScreen .choice-card span{
  display: none !important;
}
#gradeScreen .choice-card.disabled strong,
#gradeScreen .choice-card:not(.disabled):first-child strong{
  text-align: center !important;
}
@media (max-width: 980px){
  #gradeScreen .choice-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 860px){
  #gradeScreen .choice-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    padding: 12px 14px 14px !important;
    gap: 9px !important;
  }
  #gradeScreen .choice-card{
    min-height: 88px !important;
    padding: 11px 10px !important;
  }
  #gradeScreen .choice-card .choice-icon{
    width: 42px;
    height: 42px;
    font-size: 20px;
    margin-bottom: 7px !important;
  }
  #gradeScreen .choice-card strong{font-size: 15px !important;}
}
@media (max-width: 560px){
  #gradeScreen .choice-grid{grid-template-columns: 1fr;}
  #gradeScreen .choice-card{min-height: 84px !important;}
}


/* v41 centered logo header */
#gradeScreen .app-header,
#lessonScreen .app-header{
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 12px !important;
  padding: 18px 24px 16px !important;
}
#gradeScreen .app-logo,
#lessonScreen .app-logo{
  width: 96px !important;
  height: 96px !important;
  padding: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gradeScreen .app-logo img,
#lessonScreen .app-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
#gradeScreen .app-header-text,
#lessonScreen .app-header-text{
  width:100%;
  text-align:center !important;
}
#gradeScreen .app-header-text h1,
#lessonScreen .app-header-text h1{
  margin:0;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height:1.08 !important;
  text-align:center !important;
}
@media (max-width: 860px){
  #gradeScreen .app-header,
  #lessonScreen .app-header{padding:16px 14px 14px !important;gap:10px !important}
  #gradeScreen .app-logo,
  #lessonScreen .app-logo{width:78px !important;height:78px !important;border-radius:20px !important}
  #gradeScreen .app-header-text h1,
  #lessonScreen .app-header-text h1{font-size: clamp(22px, 6.2vw, 32px) !important;line-height:1.08 !important}
}


/* v42 header title slightly reduced */
#gradeScreen .app-header-text h1,
#lessonScreen .app-header-text h1{
  font-size: clamp(24px, 2.5vw, 36px) !important;
  line-height: 1.08 !important;
}
@media (max-width: 860px){
  #gradeScreen .app-header-text h1,
  #lessonScreen .app-header-text h1{
    font-size: clamp(20px, 5.2vw, 28px) !important;
  }
}

/* v44 site theme compatibility safety */
html[data-bs-theme="dark"],
html[data-theme="dark"],
:root[data-theme="dark"]{
  color-scheme: dark;
}
body.dark-mode .app-shell,
body.theme-dark .app-shell,
html[data-bs-theme="dark"] .app-shell,
html[data-theme="dark"] .app-shell{
  color-scheme: dark;
}

  

/* v47: app theme button hidden, site theme remains synced */
#themeToggle,
.mini-theme-btn{
  display:none !important;
}
.head-hero-strip{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  grid-template-columns:none !important;
}
.head-hero-strip .pill{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
}
.week-title-box{
  width:100% !important;
  max-width:calc(100% - 190px) !important;
  margin-inline:auto !important;
}
@media (max-width:860px){
  .head-hero-strip{
    display:flex !important;
    min-height:58px !important;
    padding-top:44px !important;
  }
  .head-hero-strip .pill{
    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
  .week-title-box{
    max-width:100% !important;
  }
}



/* v48 compact first two screens no-scroll fit */
#gradeScreen .hero-card,
#lessonScreen .hero-card{
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 18px 18px !important;
  gap: 10px !important;
}
#gradeScreen .app-header,
#lessonScreen .app-header{
  gap: 8px !important;
  padding: 4px 0 10px !important;
}
#gradeScreen .app-logo,
#lessonScreen .app-logo{
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
}
#gradeScreen .app-header-text h1,
#lessonScreen .app-header-text h1{
  font-size: clamp(24px, 2.4vw, 34px) !important;
  line-height: 1.08 !important;
}
#gradeScreen .screen-title,
#lessonScreen .screen-title{
  padding: 0 !important;
}
#gradeScreen .eyebrow,
#lessonScreen .eyebrow{
  padding: 4px 10px !important;
  font-size: 11px !important;
}
#gradeScreen .screen-title h2,
#lessonScreen .screen-title h2{
  margin: 8px 0 2px !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.08 !important;
}
#gradeScreen .screen-title p,
#lessonScreen .screen-title p{
  display: none !important;
}
#gradeScreen .choice-grid,
#lessonScreen .choice-grid.lessons{
  padding: 6px 0 0 !important;
  gap: 8px !important;
}
#gradeScreen .choice-grid{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
#lessonScreen .choice-grid.lessons{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}
#gradeScreen .choice-card,
#lessonScreen .lesson-card{
  min-height: 74px !important;
  padding: 10px 8px !important;
  border-radius: 18px !important;
}
#gradeScreen .choice-card strong{
  font-size: 15px !important;
  line-height: 1.1 !important;
}
#lessonScreen .lesson-card strong{
  font-size: 14px !important;
  line-height: 1.08 !important;
}
#lessonScreen #backToGrades{
  margin: 8px auto 0 !important;
  min-height: 48px;
  padding: 12px 22px !important;
}
@media (max-width: 980px){
  #gradeScreen .choice-grid,
  #lessonScreen .choice-grid.lessons{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 860px){
  .app-shell{padding:10px 10px calc(10px + var(--safe-bottom)) !important;gap:10px !important}
  #gradeScreen .hero-card,
  #lessonScreen .hero-card{
    padding: 12px 12px 14px !important;
    gap: 8px !important;
    border-radius: 22px !important;
  }
  #gradeScreen .app-header,
  #lessonScreen .app-header{
    gap: 7px !important;
    padding-bottom: 8px !important;
  }
  #gradeScreen .app-logo,
  #lessonScreen .app-logo{width: 46px !important;height: 46px !important;border-radius: 14px !important}
  #gradeScreen .app-header-text h1,
  #lessonScreen .app-header-text h1{font-size: clamp(18px, 5vw, 26px) !important}
  #gradeScreen .screen-title h2,
  #lessonScreen .screen-title h2{font-size: 18px !important;margin:6px 0 0 !important}
  #gradeScreen .choice-grid,
  #lessonScreen .choice-grid.lessons{gap:8px !important;padding-top:4px !important}
  #gradeScreen .choice-card,
  #lessonScreen .lesson-card{min-height: 68px !important;padding: 8px 6px !important;border-radius: 16px !important}
  #gradeScreen .choice-card strong{font-size: 14px !important}
  #lessonScreen .lesson-card strong{font-size: 13px !important}
  #lessonScreen #backToGrades{margin-top: 8px !important;min-height: 44px}
}
@media (max-width: 560px){
  #gradeScreen .choice-grid,
  #lessonScreen .choice-grid.lessons{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}



/* v49 phone layout: first two screens stacked vertically and no-scroll fit */
@media (max-width: 640px){
  html, body {
    overflow-x: hidden;
  }
  .app-shell{
    padding: 8px 8px calc(8px + var(--safe-bottom)) !important;
    gap: 8px !important;
    min-height: 100dvh;
  }
  #gradeScreen .hero-card,
  #lessonScreen .hero-card{
    padding: 10px 10px 12px !important;
    gap: 6px !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(15,35,67,.08) !important;
  }
  #gradeScreen .app-header,
  #lessonScreen .app-header{
    gap: 6px !important;
    padding: 0 0 8px !important;
  }
  #gradeScreen .app-logo,
  #lessonScreen .app-logo{
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }
  #gradeScreen .app-header-text h1,
  #lessonScreen .app-header-text h1{
    font-size: 18px !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }
  #gradeScreen .screen-title,
  #lessonScreen .screen-title{
    padding: 0 !important;
  }
  #gradeScreen .eyebrow,
  #lessonScreen .eyebrow{
    padding: 4px 9px !important;
    font-size: 11px !important;
  }
  #gradeScreen .screen-title h2,
  #lessonScreen .screen-title h2{
    margin: 6px 0 0 !important;
    font-size: 17px !important;
    line-height: 1.06 !important;
  }
  #gradeScreen .choice-grid,
  #lessonScreen .choice-grid.lessons{
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 4px 0 0 !important;
  }
  #gradeScreen .choice-card,
  #lessonScreen .lesson-card{
    min-height: 54px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #gradeScreen .choice-card strong,
  #lessonScreen .lesson-card strong{
    font-size: 13px !important;
    line-height: 1.08 !important;
    text-align: center !important;
    margin: 0 !important;
  }
  #gradeScreen .choice-card .choice-icon,
  #lessonScreen .lesson-card .choice-icon,
  #gradeScreen .choice-card span,
  #lessonScreen .lesson-card span{
    display: none !important;
  }
  #lessonScreen #backToGrades{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 8px auto 0 !important;
    padding: 0 16px !important;
    width: min(100%, 440px) !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    text-align: center !important;
  }
}



/* v53 final override: Sınıf seçimine dön kesin yeşil */
#lessonScreen button#backToGrades.soft-btn,
#lessonScreen #backToGrades {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 50%, #22c55e 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(34, 197, 94, .38) !important;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
:root[data-theme="dark"] #lessonScreen button#backToGrades.soft-btn,
:root[data-theme="dark"] #lessonScreen #backToGrades {
  background: linear-gradient(135deg, #14532d 0%, #166534 52%, #15803d 100%) !important;
  color: #f8fffb !important;
  border-color: rgba(74, 222, 128, .28) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
}





/* v55 mobile workbench layout: phone view aligned to provided mockup, desktop untouched */
@media (max-width: 640px){
  #workbenchScreen .workbench,
  #workbenchScreen .result-panel-integrated{
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  #workbenchScreen .result-head-integrated{
    padding: 12px 10px 10px !important;
    gap: 10px !important;
  }
  #workbenchScreen .head-hero-strip{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: auto !important;
    padding-top: 0 !important;
  }
  #workbenchScreen .head-hero-strip .pill{
    display: none !important;
  }
  #workbenchScreen .week-title-box{
    width: 100% !important;
    max-width: 100% !important;
    min-height: 90px !important;
    height: auto !important;
    padding: 12px 16px !important;
    border-radius: 22px !important;
    margin: 0 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #workbenchScreen .week-title-box > h2#weekTitle,
  #workbenchScreen .head-hero-strip .week-title-box > h2#weekTitle,
  #workbenchScreen h2#weekTitle{
    font-size: clamp(13px, 4.0vw, 16px) !important;
    line-height: 1.18 !important;
    white-space: pre-line !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    word-break: keep-all !important;
    text-align: center !important;
  }
  #workbenchScreen .head-bottom-controls{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    grid-template-areas:
      "select select"
      "prev next"
      "back home" !important;
    gap: 8px !important;
  }
  #workbenchScreen .center-select-holder{
    grid-area: select !important;
    grid-column: 1 / -1 !important;
    order: 1 !important;
  }
  #workbenchScreen #prevWeek{ grid-area: prev !important; order: 2 !important; }
  #workbenchScreen #nextWeek{ grid-area: next !important; order: 3 !important; }
  #workbenchScreen #goBackBtn{ grid-area: back !important; order: 4 !important; }
  #workbenchScreen #goHomeBtn{ grid-area: home !important; order: 5 !important; }
  #workbenchScreen .head-select-trigger-main{
    height: 58px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
  }
  #workbenchScreen .integrated-nav,
  #workbenchScreen .mini-action-btn{
    min-height: 54px !important;
    height: 54px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  #workbenchScreen #prevWeek,
  #workbenchScreen #nextWeek{
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  #workbenchScreen #prevWeek .nav-label,
  #workbenchScreen #nextWeek .nav-label{
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
  #workbenchScreen #goBackBtn,
  #workbenchScreen #goHomeBtn{
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  #workbenchScreen .nav-label-single{
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
  #workbenchScreen .result-scroll{
    padding: 10px !important;
    gap: 10px !important;
  }
  #workbenchScreen .info-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #workbenchScreen .info-box,
  #workbenchScreen .info-box:nth-child(3){
    grid-column: auto !important;
    min-height: 88px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }
  #workbenchScreen .info-box small{
    font-size: 13px !important;
    text-align: center !important;
  }
  #workbenchScreen .info-box b{
    font-size: 17px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: center !important;
  }
  #workbenchScreen .output-card{
    border-radius: 18px !important;
  }
  #workbenchScreen .output-title{
    min-height: 52px !important;
    font-size: 12px !important;
    padding: 12px 14px !important;
  }
  #workbenchScreen .output-title span{
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  #workbenchScreen .output-body{
    font-size: 13px !important;
    line-height: 1.55 !important;
    padding: 12px 14px !important;
  }
}

/* v54 hard inline-support + final forced green back button */
#lessonScreen button#backToGrades,
#lessonScreen #backToGrades,
button#backToGrades.soft-btn{
  background: linear-gradient(135deg,#16a34a 0%,#22c55e 55%,#4ade80 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(21,128,61,.24) !important;
  box-shadow:0 10px 24px rgba(22,163,74,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
:root[data-theme="dark"] #lessonScreen button#backToGrades,
:root[data-theme="dark"] #lessonScreen #backToGrades,
:root[data-theme="dark"] button#backToGrades.soft-btn{
  background: linear-gradient(135deg,#166534 0%,#15803d 55%,#16a34a 100%) !important;
  color:#f8fffb !important;
  border:1px solid rgba(74,222,128,.20) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06) !important;
}


@media (max-width: 640px){
  /* Mobil başlık optimizasyonu */
  #gradeScreen .app-header-text h1,
  #lessonScreen .app-header-text h1{
    font-size: clamp(20px, 5.8vw, 28px) !important;
    line-height: 1.08 !important;
  }
  #gradeScreen .screen-title h2,
  #lessonScreen .screen-title h2{
    font-size: 20px !important;
    line-height: 1.08 !important;
    margin: 6px 0 0 !important;
  }
  #gradeScreen .eyebrow,
  #lessonScreen .eyebrow{
    font-size: 11px !important;
  }
  #gradeScreen .choice-card strong{
    font-size: 16px !important;
    line-height: 1.1 !important;
  }
  #lessonScreen .lesson-card strong{
    font-size: 15px !important;
    line-height: 1.12 !important;
  }
  #workbenchScreen .week-title-box > h2#weekTitle,
  #workbenchScreen .head-hero-strip .week-title-box > h2#weekTitle,
  #workbenchScreen h2#weekTitle{
    font-size: clamp(15px, 4.6vw, 18px) !important;
    line-height: 1.15 !important;
  }
  #workbenchScreen .info-box small{
    font-size: 13px !important;
    line-height: 1.05 !important;
  }
  #workbenchScreen .info-box b{
    font-size: 14px !important;
    line-height: 1.18 !important;
  }
  #workbenchScreen .output-title{
    font-size: 14px !important;
    min-height: 50px !important;
  }
  #workbenchScreen .output-title span{
    font-size: 14px !important;
    line-height: 1.15 !important;
  }
}


@media (max-width: 640px){
  #workbenchScreen{
    touch-action: pan-y;
  }
  #workbenchScreen .result-panel-integrated,
  #workbenchScreen .result-scroll{
    touch-action: pan-y;
  }
}


/* v61 mobile swipe transition feedback */
@media (max-width: 640px){
  #workbenchScreen .result-panel-integrated{
    touch-action: pan-y;
    will-change: transform, opacity;
  }
  #workbenchScreen .result-panel-integrated.week-animate-next{
    animation: weekSlideInFromRight .28s cubic-bezier(.22,.95,.34,1) both;
  }
  #workbenchScreen .result-panel-integrated.week-animate-prev{
    animation: weekSlideInFromLeft .28s cubic-bezier(.22,.95,.34,1) both;
  }
  #workbenchScreen .result-panel-integrated.week-animate-next .week-title-box,
  #workbenchScreen .result-panel-integrated.week-animate-prev .week-title-box{
    animation: weekTitlePulse .28s ease both;
  }
}
@keyframes weekSlideInFromRight{
  0%{ transform: translateX(44px); opacity: .45; filter: saturate(.94); }
  62%{ transform: translateX(-3px); opacity: 1; filter: saturate(1.05); }
  100%{ transform: translateX(0); opacity: 1; filter: none; }
}
@keyframes weekSlideInFromLeft{
  0%{ transform: translateX(-44px); opacity: .45; filter: saturate(.94); }
  62%{ transform: translateX(3px); opacity: 1; filter: saturate(1.05); }
  100%{ transform: translateX(0); opacity: 1; filter: none; }
}
@keyframes weekTitlePulse{
  0%{ transform: scale(.985); }
  60%{ transform: scale(1.012); }
  100%{ transform: scale(1); }
}


/* v62 mobile deck swipe: card follows finger, next/previous preview stays underneath */
@media (max-width: 640px){
  #workbenchScreen .workbench{
    position: relative !important;
    overflow: visible !important;
  }
  #workbenchScreen .result-panel-integrated{
    position: relative !important;
    z-index: 2 !important;
    touch-action: pan-y !important;
    will-change: transform, opacity;
    transform-origin: center center;
  }
  #workbenchScreen .result-panel-integrated.is-dragging{
    transition: none !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .22) !important;
  }
  #workbenchScreen .week-swipe-underlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: scale(.985);
    transition: opacity .12s ease, transform .12s ease;
    border-radius: 20px;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 32%),
      linear-gradient(135deg, rgba(29,78,216,.18), rgba(8,145,178,.16), rgba(22,163,74,.13));
  }
  #workbenchScreen .week-swipe-underlay.show{
    opacity: 1;
    transform: scale(1);
  }
  #workbenchScreen .week-swipe-underlay-card{
    min-height: 148px;
    margin: 12px 10px 0;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, #15803d 0%, #16a34a 50%, #22c55e 100%);
    box-shadow: 0 10px 28px rgba(21,128,61,.22), inset 0 1px 0 rgba(255,255,255,.18);
    color: #fff;
  }
  #workbenchScreen .week-swipe-underlay.prev .week-swipe-underlay-card{
    background: linear-gradient(135deg, #0f2a5c 0%, #1e3a8a 50%, #2563eb 100%);
    box-shadow: 0 10px 28px rgba(29,78,216,.22), inset 0 1px 0 rgba(255,255,255,.18);
  }
  #workbenchScreen .week-swipe-underlay small{
    display: block;
    font-size: 12px;
    font-weight: 900;
    opacity: .86;
    margin-bottom: 8px;
  }
  #workbenchScreen .week-swipe-underlay strong{
    display: block;
    font-size: clamp(15px, 4.4vw, 18px);
    line-height: 1.18;
    white-space: pre-line;
    font-weight: 900;
  }
  #workbenchScreen .swipe-edge-hint{
    position: fixed;
    left: 50%;
    bottom: calc(18px + var(--safe-bottom));
    transform: translateX(-50%);
    z-index: 80;
    pointer-events: none;
    background: rgba(15,23,42,.88);
    color: #fff;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
  }
  #workbenchScreen .swipe-edge-hint.show{
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
}



/* v67 mobile week-select orange + shine only on date box */
@keyframes weekBladeShine{
  0%{ transform: translateX(-145%) skewX(-22deg); opacity: 0; }
  18%{ opacity: .18; }
  42%{ opacity: .98; }
  100%{ transform: translateX(370%) skewX(-22deg); opacity: 0; }
}

@media (max-width: 640px){
  /* remove animated shine from all other week controls */
  #workbenchScreen .week-title-box::before,
  #workbenchScreen .head-select-trigger-main::before,
  #workbenchScreen .head-select-trigger-main::after{
    content: none !important;
    display: none !important;
    animation: none !important;
  }

  /* Hafta seç kutusu kesin turuncu */
  #workbenchScreen .head-select-trigger-main,
  #workbenchScreen .head-select-trigger-main:hover,
  #workbenchScreen .head-select-trigger-main:focus,
  #workbenchScreen .head-select-trigger-main:active{
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 52%, #f97316 100%) !important;
    box-shadow: 0 8px 18px rgba(234,88,12,.30), inset 0 1px 0 rgba(255,255,255,.22) !important;
    border: 1px solid rgba(251,146,60,.36) !important;
    color: #ffffff !important;
    filter: none !important;
  }
  #workbenchScreen .head-select-trigger-main span{
    color: #ffffff !important;
  }
  :root[data-theme="dark"] #workbenchScreen .head-select-trigger-main,
  :root[data-theme="dark"] #workbenchScreen .head-select-trigger-main:hover,
  :root[data-theme="dark"] #workbenchScreen .head-select-trigger-main:focus,
  :root[data-theme="dark"] #workbenchScreen .head-select-trigger-main:active{
    background: linear-gradient(135deg, #9a3412 0%, #c2410c 52%, #ea580c 100%) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05) !important;
    border-color: rgba(249,115,22,.26) !important;
  }

  /* Tarih kutusu lacivert */
  #workbenchScreen .info-box.date-fill-box{
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #163b8f 0%, #1e40af 48%, #2563eb 100%) !important;
    border-color: rgba(37,99,235,.28) !important;
    box-shadow: 0 8px 20px rgba(29,78,216,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  #workbenchScreen .info-box.date-fill-box::before{
    background: linear-gradient(180deg, #0f2c74, #2563eb) !important;
  }
  #workbenchScreen .info-box.date-fill-box small,
  #workbenchScreen .info-box.date-fill-box b{
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,14,36,.30) !important;
    position: relative;
    z-index: 2;
  }
  :root[data-theme="dark"] #workbenchScreen .info-box.date-fill-box{
    background: linear-gradient(135deg, #0b1f52 0%, #14367f 48%, #1d4ed8 100%) !important;
    border-color: rgba(96,165,250,.22) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  /* only date box gets the moving blade shine */
  #workbenchScreen .info-box.date-fill-box .date-blade-shine{
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: -42%;
    width: 34%;
    border-radius: 999px;
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.14) 26%,
      rgba(255,255,255,.88) 50%,
      rgba(255,255,255,.16) 74%,
      rgba(255,255,255,0) 100%);
    transform: translateX(-145%) skewX(-22deg);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    filter: blur(.2px);
  }
  #workbenchScreen .result-panel-integrated.week-animate-next .info-box.date-fill-box .date-blade-shine,
  #workbenchScreen .result-panel-integrated.week-animate-prev .info-box.date-fill-box .date-blade-shine{
    animation: weekBladeShine .72s cubic-bezier(.22,.95,.34,1) both !important;
  }
}


/* v69 mobile left stray colored line hard-kill */
@media (max-width: 640px){
  #workbenchScreen .result-scroll{
    position: relative !important;
    overflow: hidden !important;
  }
  #workbenchScreen .result-scroll::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    background: var(--bg-card) !important;
    z-index: 20;
    pointer-events: none;
  }
  #workbenchScreen .result-scroll > *{
    position: relative;
    z-index: 21;
  }
}


/* v70 mobile clean output cards - remove hanging colored side lines */
@media (max-width: 640px){
  #workbenchScreen .output-card::before,
  #workbenchScreen .output-card.important::before,
  #workbenchScreen .output-card.process-focus::before,
  #workbenchScreen .assessment-card::before,
  #workbenchScreen .special-card::before,
  #workbenchScreen .values-card::before,
  #workbenchScreen .relation-card::before{
    display:none !important;
    content:none !important;
    width:0 !important;
    background:none !important;
  }
  #workbenchScreen .output-card{
    overflow:hidden !important;
  }
}


/* v71 mobile centering fixes: date title + prev/next labels centered independent of icons */
@media (max-width: 640px){
  #workbenchScreen .info-box.date-fill-box{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
  }
  #workbenchScreen .info-box.date-fill-box small,
  #workbenchScreen .info-box.date-fill-box b{
    width:100% !important;
    display:block !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #workbenchScreen #prevWeek,
  #workbenchScreen #nextWeek{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding-left:40px !important;
    padding-right:40px !important;
  }
  #workbenchScreen #prevWeek .nav-label,
  #workbenchScreen #nextWeek .nav-label{
    flex:0 1 auto !important;
    width:100% !important;
    text-align:center !important;
    margin:0 auto !important;
  }
  #workbenchScreen #prevWeek .nav-icon,
  #workbenchScreen #nextWeek .nav-icon{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    pointer-events:none !important;
  }
  #workbenchScreen #prevWeek .nav-icon{
    left:12px !important;
  }
  #workbenchScreen #nextWeek .nav-icon{
    right:12px !important;
  }
}


/* v72 mobile highlight learning output card in orange with heartbeat effect */
@keyframes mobileLearningHeartbeat {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(249,115,22,.18); }
  12% { transform: scale(1.022); box-shadow: 0 12px 28px rgba(249,115,22,.28); }
  24% { transform: scale(0.996); box-shadow: 0 8px 22px rgba(249,115,22,.18); }
  38% { transform: scale(1.034); box-shadow: 0 14px 32px rgba(249,115,22,.34); }
  52% { transform: scale(1); box-shadow: 0 8px 22px rgba(249,115,22,.18); }
}
@media (max-width: 640px){
  #workbenchScreen .output-card.important{
    border-color: rgba(249,115,22,.45) !important;
    box-shadow: 0 8px 22px rgba(249,115,22,.18) !important;
    transform-origin: center center !important;
    animation: mobileLearningHeartbeat 2.1s ease-in-out infinite !important;
    will-change: transform, box-shadow;
  }
  #workbenchScreen .output-card.important .output-title{
    background: linear-gradient(135deg, #f97316, #fb923c) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.20) !important;
    border-bottom-color: rgba(255,255,255,.14) !important;
  }
  #workbenchScreen .output-card.important .output-body{
    border-top-color: rgba(249,115,22,.18) !important;
  }
}


/* v73 mobile class/lesson screen logo +10% */
@media (max-width: 640px){
  #gradeScreen .app-logo,
  #lessonScreen .app-logo{
    width: 86px !important;
    height: 86px !important;
  }
}

/* v74 başlangıç bilgi modalı */
.info-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 24, 49, .46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.info-modal-backdrop.show {
  display: flex;
}
.info-modal {
  width: min(92vw, 520px);
  border-radius: 26px;
  border: 1px solid rgba(147,197,253,.42);
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.98));
  box-shadow: 0 24px 70px rgba(15,35,67,.26);
  overflow: hidden;
  color: #10243f;
  animation: infoModalIn .22s cubic-bezier(.22,.95,.34,1) both;
}
.info-modal-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, rgba(29,78,216,.12), rgba(14,165,233,.10), rgba(249,115,22,.08));
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.info-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  color: #fff;
  font-size: 22px;
  box-shadow: 0 10px 24px rgba(29,78,216,.22);
  flex: 0 0 auto;
}
.info-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.info-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #10243f;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.info-modal-body {
  padding: 18px 20px 20px;
}
.info-modal-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 750;
  color: #203954;
}
.info-modal-actions {
  display: flex;
  justify-content: center;
  padding: 0 20px 20px;
}
.info-modal-ok {
  border: 0;
  border-radius: 999px;
  padding: 13px 28px;
  min-width: 170px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 12px 26px rgba(22,163,74,.24);
  cursor: pointer;
}
.info-modal-ok:active,
.info-modal-close:active {
  transform: scale(.97);
}
@keyframes infoModalIn {
  from { transform: translateY(10px) scale(.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
:root[data-theme="dark"] .info-modal {
  background: linear-gradient(135deg, rgba(15,23,42,.98), rgba(15,35,67,.98));
  border-color: rgba(96,165,250,.30);
  color: #f8fbff;
}
:root[data-theme="dark"] .info-modal-head {
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(8,145,178,.14), rgba(249,115,22,.10));
  border-bottom-color: rgba(255,255,255,.08);
}
:root[data-theme="dark"] .info-modal-close {
  background: rgba(15,23,42,.82);
  border-color: rgba(255,255,255,.12);
  color: #f8fbff;
}
:root[data-theme="dark"] .info-modal-body p {
  color: #e5eefb;
}
@media (max-width: 640px) {
  .info-modal-backdrop { padding: 14px; align-items: center; }
  .info-modal { border-radius: 22px; }
  .info-modal-head { padding: 16px 18px 13px; }
  .info-modal-title { font-size: 18px; }
  .info-modal-body { padding: 16px 18px 18px; }
  .info-modal-body p { font-size: 14px; line-height: 1.58; }
  .info-modal-ok { width: 100%; min-width: 0; }
}


/* Grade screen info box */
.grade-info-box{
  position:relative;
  width:100%;
  margin-top:18px;
  display:block;
  padding:20px 18px 18px;
  border-radius:26px;
  overflow:hidden;
  text-align:center;
  border:1px solid rgba(76,110,245,.16);
  background:linear-gradient(180deg,
    rgba(255,255,255,.98) 0%,
    rgba(246,248,255,.98) 55%,
    rgba(236,243,255,.98) 100%);
  box-shadow:
    0 18px 34px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.grade-info-box::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  height:6px;
  background:linear-gradient(90deg,#2563eb 0%, #60a5fa 50%, #22c55e 100%);
}
.grade-info-box::after{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  right:-42px;
  bottom:-52px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(96,165,250,.20) 0%, rgba(96,165,250,0) 72%);
  pointer-events:none;
}
.grade-info-icon{
  position:relative;
  z-index:1;
  margin:2px auto 12px;
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:24px;
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 55%, #e0f2fe 100%);
  box-shadow:
    0 8px 20px rgba(37,99,235,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.grade-info-content{
  position:relative;
  z-index:1;
  max-width:680px;
  margin:0 auto;
}
.grade-info-title{
  margin:0 0 8px;
  text-align:center;
  font-size:22px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--ink);
}
.grade-info-content p{
  margin:0;
  text-align:center;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.62;
  font-weight:800;
}
:root[data-theme="dark"] .grade-info-box{
  border-color:rgba(96,165,250,.20);
  background:linear-gradient(180deg,
    rgba(16,27,49,.95) 0%,
    rgba(18,34,62,.94) 55%,
    rgba(16,40,62,.95) 100%);
  box-shadow:
    0 18px 36px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04);
}
:root[data-theme="dark"] .grade-info-icon{
  background:linear-gradient(135deg,rgba(37,99,235,.32) 0%,rgba(14,165,233,.24) 100%);
  box-shadow:
    0 10px 22px rgba(2,12,27,.36),
    inset 0 1px 0 rgba(255,255,255,.08);
}
:root[data-theme="dark"] .grade-info-title{
  color:#f8fbff;
}
:root[data-theme="dark"] .grade-info-content p{
  color:#cfdaec;
}
@media (max-width: 768px){
  .grade-info-box{
    margin-top:14px;
    padding:16px 14px 15px;
    border-radius:22px;
  }
  .grade-info-box::before{
    height:5px;
  }
  .grade-info-box::after{
    width:110px;
    height:110px;
    right:-34px;
    bottom:-42px;
  }
  .grade-info-icon{
    width:46px;
    height:46px;
    border-radius:16px;
    font-size:21px;
    margin:2px auto 10px;
  }
  .grade-info-title{
    font-size:19px;
    margin-bottom:6px;
  }
  .grade-info-content p{
    font-size:14px;
    line-height:1.56;
  }
}


/* v80 desktop cleanup: remove lesson-hours pill and clear stray left desktop line */
#workbenchScreen #weekPill{
  display:none !important;
}
@media (min-width: 641px){
  #workbenchScreen .head-hero-strip{
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
  }
  #workbenchScreen .result-panel-integrated::before,
  #workbenchScreen .result-head-integrated::before,
  #workbenchScreen .result-scroll::before{
    content:none !important;
    display:none !important;
  }
}


/* ============================================================
   3 ve 4. sınıf TYMM gelecek yıl kartları
   - Sınıf seçeneği görünür kalır.
   - Tıklanamaz/pasiftir.
   - Mavi dolgulu görünür ve altında gelecek yıl notu taşır.
   ============================================================ */
#gradeScreen .choice-card.future-grade-card,
#gradeScreen .choice-card.future-grade-card:disabled{
  opacity:1 !important;
  cursor:not-allowed !important;
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 46%,#0891b2 100%) !important;
  border-color:rgba(59,130,246,.68) !important;
  color:#ffffff !important;
  box-shadow:0 14px 34px rgba(29,78,216,.28), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
#gradeScreen .choice-card.future-grade-card:hover{
  transform:none !important;
  box-shadow:0 14px 34px rgba(29,78,216,.28), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
#gradeScreen .choice-card.future-grade-card .choice-icon{
  background:rgba(255,255,255,.18) !important;
  color:#ffffff !important;
}
#gradeScreen .choice-card.future-grade-card strong{
  color:#ffffff !important;
}
#gradeScreen .choice-card.future-grade-card .future-grade-note{
  display:block;
  margin-top:2px;
  color:#e0f2fe !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  line-height:1.22 !important;
  letter-spacing:.01em;
}
:root[data-theme="dark"] #gradeScreen .choice-card.future-grade-card,
:root[data-theme="dark"] #gradeScreen .choice-card.future-grade-card:disabled{
  background:linear-gradient(135deg,#0f3b9c 0%,#1d4ed8 50%,#0e7490 100%) !important;
  border-color:rgba(96,165,250,.48) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
:root[data-theme="dark"] #gradeScreen .choice-card.future-grade-card .future-grade-note{
  color:#dbeafe !important;
}


/* ============================================================
   3 ve 4. sınıf sınıf seçim açıklaması
   Sonradan gelen kompakt sınıf kartı kuralları span'ı gizlediği için
   gelecek yıl notu burada tekrar görünür ve okunur hale getirilir.
   ============================================================ */
#gradeScreen .choice-card.future-grade-card,
#gradeScreen .choice-card.future-grade-card:disabled{
  min-height: 94px !important;
  padding: 10px 10px 9px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  text-align:center !important;
}
#gradeScreen .choice-card.future-grade-card .choice-icon{
  display:none !important;
}
#gradeScreen .choice-card.future-grade-card strong{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  color:#ffffff !important;
  font-size:16px !important;
  line-height:1.05 !important;
}
#gradeScreen .choice-card.future-grade-card .future-grade-note{
  display:block !important;
  width:100% !important;
  max-width:160px;
  margin:2px auto 0 !important;
  color:#eaf6ff !important;
  font-size:10.5px !important;
  font-weight:900 !important;
  line-height:1.12 !important;
  letter-spacing:.005em !important;
  text-align:center !important;
  white-space:normal !important;
}
.future-grade-notice{
  width:calc(100% - 48px);
  max-width:940px;
  margin: 0 auto 18px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(37,99,235,.18);
  background:linear-gradient(135deg, rgba(239,246,255,.98) 0%, rgba(224,242,254,.96) 55%, rgba(240,253,250,.94) 100%);
  box-shadow:0 10px 24px rgba(15,35,67,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.future-grade-notice-icon{
  width:42px;
  height:42px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2563eb,#0891b2);
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.20);
}
.future-grade-notice-content{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.future-grade-notice-content strong{
  color:#10213d;
  font-size:15px;
  line-height:1.22;
  font-weight:900;
}
.future-grade-notice-content span{
  color:#52677f;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}
.future-grade-notice-content b{
  color:#1d4ed8;
  font-weight:900;
}
:root[data-theme="dark"] .future-grade-notice{
  background:linear-gradient(135deg, rgba(15,30,52,.96) 0%, rgba(14,43,68,.92) 55%, rgba(10,50,61,.90) 100%);
  border-color:rgba(96,165,250,.20);
  box-shadow:0 14px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="dark"] .future-grade-notice-content strong{color:#f8fbff}
:root[data-theme="dark"] .future-grade-notice-content span{color:#c7d6e8}
:root[data-theme="dark"] .future-grade-notice-content b{color:#93c5fd}

@media (max-width: 980px){
  #gradeScreen .choice-card.future-grade-card{min-height:88px !important}
  #gradeScreen .choice-card.future-grade-card .future-grade-note{max-width:190px}
}
@media (max-width: 640px){
  #gradeScreen .choice-card.future-grade-card{
    min-height:82px !important;
    padding:9px 8px !important;
  }
  #gradeScreen .choice-card.future-grade-card strong{font-size:14px !important}
  #gradeScreen .choice-card.future-grade-card .future-grade-note{
    font-size:9.8px !important;
    line-height:1.1 !important;
  }
  .future-grade-notice{
    width:calc(100% - 28px);
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    margin-bottom:14px;
    padding:13px 14px;
  }
  .future-grade-notice-content strong{font-size:14px}
  .future-grade-notice-content span{font-size:12px}
}


/* ============================================================
   Sınıf seçim ekranı özel renkleri
   - 2. sınıf kartı mavi dolgulu.
   - 3 ve 4. sınıf TYMM bekleyen kartları kırmızı dolgulu.
   ============================================================ */
#gradeScreen #gradeGrid .choice-card[data-grade="2"],
#gradeScreen #gradeGrid .choice-card[data-grade="2"]:not(:disabled){
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 48%,#0891b2 100%) !important;
  color:#ffffff !important;
  border-color:rgba(59,130,246,.68) !important;
  box-shadow:0 14px 34px rgba(29,78,216,.24), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
#gradeScreen #gradeGrid .choice-card[data-grade="2"] strong,
#gradeScreen #gradeGrid .choice-card[data-grade="2"] span{
  color:#ffffff !important;
}
#gradeScreen #gradeGrid .choice-card[data-grade="2"] .choice-icon{
  background:rgba(255,255,255,.18) !important;
  color:#ffffff !important;
}

#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="3"],
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="4"],
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="3"]:disabled,
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="4"]:disabled{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 48%,#f97316 100%) !important;
  color:#ffffff !important;
  border-color:rgba(248,113,113,.78) !important;
  box-shadow:0 14px 34px rgba(220,38,38,.25), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="3"] strong,
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="4"] strong,
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="3"] .future-grade-note,
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="4"] .future-grade-note{
  color:#ffffff !important;
}
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="3"] .future-grade-note,
#gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="4"] .future-grade-note{
  text-shadow:0 1px 1px rgba(80,0,0,.18);
}
:root[data-theme="dark"] #gradeScreen #gradeGrid .choice-card[data-grade="2"]{
  background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 50%,#0e7490 100%) !important;
}
:root[data-theme="dark"] #gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="3"],
:root[data-theme="dark"] #gradeScreen #gradeGrid .choice-card.future-grade-card[data-grade="4"]{
  background:linear-gradient(135deg,#b91c1c 0%,#dc2626 50%,#c2410c 100%) !important;
}


/* ============================================================
   Çalışma ekranı konu / ders saati düzenlemesi
   - Üst bilgi kutusunda konu yerine ders saati gösterilir.
   - Konu, Öğrenme çıktısı kartının üstünde geniş başlıklı kart olur.
   - Sol/sağ kenarda oluşan istenmeyen kırmızı dikey çizgiler kaldırılır.
   ============================================================ */
#workbenchScreen .info-grid{
  grid-template-columns:minmax(120px,.75fr) minmax(180px,1.4fr) minmax(120px,.72fr) !important;
}
#workbenchScreen .hours-fill-box{
  background:linear-gradient(135deg,#c2410c 0%,#ea580c 52%,#f97316 100%) !important;
  border-color:rgba(249,115,22,.30) !important;
  box-shadow:0 8px 20px rgba(234,88,12,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#workbenchScreen .hours-fill-box::before{
  background:linear-gradient(180deg,#9a3412,#f97316) !important;
}
#workbenchScreen .hours-fill-box small,
#workbenchScreen .hours-fill-box b{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(60,18,0,.28);
}
#workbenchScreen .topic-card{
  border-color:rgba(234,88,12,.28) !important;
  box-shadow:0 6px 24px rgba(234,88,12,.10) !important;
}
#workbenchScreen .topic-card::before{
  width:7px !important;
  background:linear-gradient(180deg,#f97316,#facc15) !important;
}
#workbenchScreen .topic-card .output-title{
  background:linear-gradient(135deg,#f97316,#facc15) !important;
  color:#2b1600 !important;
  text-shadow:0 1px 1px rgba(255,255,255,.26) !important;
}
#workbenchScreen .topic-card .output-body{
  font-size:15px !important;
  line-height:1.55 !important;
  font-weight:800 !important;
  color:var(--text) !important;
}

/* Ekran kenarında görünen istenmeyen kırmızı çizgi temizliği */
html::before,
html::after,
body::before,
body::after,
.app-shell::before,
.app-shell::after,
.main::before,
.main::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
}
html,
body,
.app-shell,
.main{
  border-left:0 !important;
  border-right:0 !important;
  outline:0 !important;
}

:root[data-theme="dark"] #workbenchScreen .hours-fill-box{
  background:linear-gradient(135deg,#7c2d12 0%,#c2410c 52%,#ea580c 100%) !important;
  border-color:rgba(251,146,60,.24) !important;
}
:root[data-theme="dark"] #workbenchScreen .topic-card .output-title{
  background:linear-gradient(135deg,#9a3412,#ca8a04) !important;
  color:#fff7ed !important;
  text-shadow:0 1px 2px rgba(0,0,0,.22) !important;
}
@media (max-width: 768px){
  #workbenchScreen .info-grid{
    grid-template-columns:1fr !important;
  }
}


/* ============================================================
   Mobil ders saati kutusu yükseklik düzeltmesi
   Masaüstü görünüm korunur. Mobilde sadece Ders Saati kartı
   daha kompakt tutulur; Tarih, Tema ve diğer kartlara dokunulmaz.
   ============================================================ */
@media (max-width: 768px){
  #workbenchScreen .info-grid .info-box.hours-fill-box{
    min-height: 104px !important;
    padding: 12px 14px 11px !important;
    border-radius: 22px !important;
    justify-content: center !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box small{
    font-size: 14px !important;
    line-height: 1.05 !important;
    margin-bottom: 5px !important;
    letter-spacing: .075em !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box b{
    font-size: 22px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 430px){
  #workbenchScreen .info-grid .info-box.hours-fill-box{
    min-height: 96px !important;
    padding: 10px 13px 9px !important;
    border-radius: 20px !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box small{
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box b{
    font-size: 21px !important;
  }
}


/* ============================================================
   Kesin sol kenar kırmızı/pembe çizgi temizliği v80
   - CSS sürümü index.html içinde v80'e yükseltildi.
   - Workbench dış kenarına sızan pseudo/şeritler kapatıldı.
   - Geniş ekranda yalnızca boş dış sol alanı maskeleyen güvenli örtü eklendi.
   ============================================================ */

/* Kenara sızma ihtimali olan workbench pseudo şeritleri */
#workbenchScreen .workbench::before,
#workbenchScreen .workbench::after,
#workbenchScreen .result-panel-integrated::before,
#workbenchScreen .result-panel-integrated::after,
#workbenchScreen .result-scroll::before{
  content:none !important;
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Kırmızı/pembe dış kenar artefaktının en olası kaynağı olan kart sol şeritlerini işlevsizleştirir.
   Başlık renkleri ve kart içerikleri korunur. */
#workbenchScreen .relation-card::before{
  content:none !important;
  display:none !important;
  width:0 !important;
  background:transparent !important;
}

/* Geniş ekranlarda app dışında kalan sol boş alanda görünen kırmızı/pembe şeridi maskele.
   Mobilde kapalıdır; içeriği örtmez. */
#ildLeftEdgeCleaner{
  display:none;
}
@media (min-width: 720px){
  #ildLeftEdgeCleaner{
    position:fixed;
    left:0;
    top:0;
    width:42px;
    height:100dvh;
    display:block;
    pointer-events:none;
    z-index:2147483646;
    background:
      radial-gradient(ellipse 80% 40% at 20% 0%, rgba(29,78,216,.10), transparent),
      radial-gradient(ellipse 60% 50% at 90% 10%, rgba(8,145,178,.08), transparent),
      var(--bg-page);
  }
}
:root[data-theme="dark"] #ildLeftEdgeCleaner{
  background:var(--bg-page) !important;
}


/* ============================================================
   Serbest Etkinlikler özel sayfa şablonu
   - TYMM kart yapısı korunur.
   - Serbest etkinlik haftalarında etkinlik satırları mini kartlar halinde gösterilir.
   ============================================================ */
.serbest-layout-active #workbenchScreen .topic-card .output-title{
  background:linear-gradient(135deg,#f97316,#facc15) !important;
  color:#321700 !important;
}
.serbest-activity-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.serbest-activity-card{
  border:1px solid rgba(59,130,246,.18);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,246,255,.92));
  padding:14px 15px;
  box-shadow:0 8px 20px rgba(15,35,67,.07);
  overflow:hidden;
}
.serbest-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  color:#1d4ed8;
  font-weight:950;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.serbest-activity-head small{
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-size:11px;
  font-weight:950;
  text-transform:none;
}
.serbest-activity-card h4{
  margin:0 0 6px;
  color:#10213d;
  font-size:17px;
  line-height:1.24;
  font-weight:950;
}
.serbest-activity-card em{
  display:block;
  margin:-2px 0 8px;
  color:#64748b;
  font-style:normal;
  font-weight:900;
  font-size:12px;
}
.serbest-activity-card p{
  margin:0;
  color:#14243d;
  font-size:14px;
  line-height:1.55;
  font-weight:800;
  white-space:pre-line;
}
.serbest-objective .serbest-activity-card{
  border-color:rgba(34,197,94,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(240,253,244,.92));
}
.serbest-objective .serbest-activity-head{color:#15803d}
.serbest-objective .serbest-activity-head small{background:#dcfce7;color:#166534}
:root[data-theme="dark"] .serbest-activity-card{
  background:linear-gradient(135deg,rgba(15,30,52,.96),rgba(17,39,70,.90));
  border-color:rgba(96,165,250,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
:root[data-theme="dark"] .serbest-activity-card h4{color:#f8fbff}
:root[data-theme="dark"] .serbest-activity-card p{color:#dbe7f7}
:root[data-theme="dark"] .serbest-activity-card em{color:#a9b9cf}
@media (max-width: 860px){
  .serbest-activity-list{grid-template-columns:1fr;gap:12px}
  .serbest-activity-card{padding:13px 14px;border-radius:16px}
  .serbest-activity-card h4{font-size:16px}
  .serbest-activity-card p{font-size:13.5px;line-height:1.5}
}


/* ============================================================
   Serbest Etkinlikler: kalp atışı efektini kapat
   - Sadece layoutType="serbest-etkinlik" açıkken çalışır.
   - TYMM derslerindeki mobil Öğrenme çıktısı kalp atışı efekti korunur.
   ============================================================ */
@media (max-width: 640px){
  body.serbest-layout-active #workbenchScreen .output-card.important{
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}


/* ============================================================
   Serbest Etkinlikler Masal Eki
   - Masal metni kart içinde açılır/kapanır.
   - Masaüstü ve mobilde okunabilir satır aralığı ve kutu yapısı.
   ============================================================ */
.serbest-activity-card.has-story{
  border-color: rgba(124,58,237,.22) !important;
  box-shadow: 0 10px 26px rgba(76,29,149,.08) !important;
}
.serbest-story-box{
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(124,58,237,.22);
  background: linear-gradient(135deg, rgba(245,243,255,.96), rgba(239,246,255,.94));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.serbest-story-box summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  color: #34136f;
  font-weight: 900;
  user-select: none;
}
.serbest-story-box summary::-webkit-details-marker{
  display: none;
}
.serbest-story-box summary span{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}
.serbest-story-box summary strong{
  min-width: 0;
  max-width: 54%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #4c1d95;
  text-align: right;
}
.serbest-story-box summary::after{
  content: "Aç";
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: #ffffff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(15,35,67,.08);
}
.serbest-story-box[open] summary::after{
  content: "Kapat";
}
.serbest-story-content{
  max-height: 520px;
  overflow: auto;
  padding: 16px 18px 18px;
  background: rgba(255,255,255,.82);
  border-top: 1px solid rgba(124,58,237,.15);
  color: #10213d;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
  white-space: pre-line;
}
.serbest-story-content::-webkit-scrollbar{
  width: 9px;
}
.serbest-story-content::-webkit-scrollbar-thumb{
  background: rgba(124,58,237,.32);
  border-radius: 999px;
}
:root[data-theme="dark"] .serbest-story-box{
  background: linear-gradient(135deg, rgba(49,46,129,.55), rgba(15,23,42,.75));
  border-color: rgba(167,139,250,.22);
}
:root[data-theme="dark"] .serbest-story-box summary{
  color: #ede9fe;
}
:root[data-theme="dark"] .serbest-story-box summary strong{
  color: #c4b5fd;
}
:root[data-theme="dark"] .serbest-story-content{
  background: rgba(15,23,42,.78);
  color: #f8fbff;
  border-top-color: rgba(167,139,250,.18);
}
@media (max-width: 640px){
  .serbest-story-box{
    margin-top: 10px;
    border-radius: 16px;
  }
  .serbest-story-box summary{
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 12px 13px;
  }
  .serbest-story-box summary strong{
    max-width: 100%;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
  }
  .serbest-story-box summary::after{
    position: absolute;
    right: 14px;
    top: 12px;
  }
  .serbest-story-content{
    max-height: 440px;
    padding: 14px 14px 16px;
    font-size: 15px;
    line-height: 1.72;
    font-weight: 700;
  }
}


/* ============================================================
   Serbest Etkinlikler masaüstü kart sıkılaştırma v81
   Sorun kaynağı: .output-body üzerinde white-space: pre-wrap olduğu için
   HTML şablonundaki satır/boşluk karakterleri kart içinde büyük boşluk gibi görünüyordu.
   Bu düzeltme yalnızca serbest etkinlik mini kartlarını etkiler.
   ============================================================ */
body.serbest-layout-active #workbenchScreen .serbest-activity-list{
  white-space: normal !important;
  align-items: start !important;
  grid-auto-rows: auto !important;
  gap: 12px !important;
}

body.serbest-layout-active #workbenchScreen .serbest-activity-card{
  align-self: start !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
}

body.serbest-layout-active #workbenchScreen .serbest-activity-card h4,
body.serbest-layout-active #workbenchScreen .serbest-activity-card em,
body.serbest-layout-active #workbenchScreen .serbest-activity-card p{
  white-space: normal !important;
}

body.serbest-layout-active #workbenchScreen .serbest-activity-card p{
  margin-top: 7px !important;
  line-height: 1.48 !important;
}

body.serbest-layout-active #workbenchScreen .serbest-activity-head{
  margin-bottom: 7px !important;
}

body.serbest-layout-active #workbenchScreen .output-body .serbest-activity-list{
  margin: 0 !important;
}

/* Masal metninde paragraf yapısı korunur. */
body.serbest-layout-active #workbenchScreen .serbest-story-content{
  white-space: pre-line !important;
}

@media (min-width: 861px){
  body.serbest-layout-active #workbenchScreen .serbest-activity-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.serbest-layout-active #workbenchScreen .serbest-activity-card h4{
    font-size: 16px !important;
    line-height: 1.22 !important;
  }
  body.serbest-layout-active #workbenchScreen .serbest-activity-card p{
    font-size: 13.5px !important;
  }
}

@media (max-width: 860px){
  body.serbest-layout-active #workbenchScreen .serbest-activity-list{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* ============================================================
   Serbest Etkinlikler akıllı masaüstü kolon düzeni v82
   - Farklı yükseklikteki etkinlik kartları satır boşluğu oluşturmasın.
   - Masaüstünde 1-3-5 sol kolonda, 2-4-6 sağ kolonda akar.
   - Mobilde sıralama 1-2-3-4 olarak tek kolon korunur.
   ============================================================ */
body.serbest-layout-active #workbenchScreen .serbest-activity-list--mobile{
  display: none !important;
}
body.serbest-layout-active #workbenchScreen .serbest-activity-list--desktop{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  white-space: normal !important;
}
body.serbest-layout-active #workbenchScreen .serbest-activity-column{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}
body.serbest-layout-active #workbenchScreen .serbest-activity-column .serbest-activity-card{
  margin: 0 !important;
  width: 100% !important;
}

@media (max-width: 860px){
  body.serbest-layout-active #workbenchScreen .serbest-activity-list--desktop{
    display: none !important;
  }
  body.serbest-layout-active #workbenchScreen .serbest-activity-list--mobile{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* ============================================================
   Nunito font kilidi v83
   - Tüm cihazlarda uygulama arayüzü Nunito ailesini öncelikli kullanır.
   - WordPress/site teması Nunito'yu yerel olarak yüklüyorsa doğrudan onu kullanır.
   - Font dosyası paketlenmeden CSS düzeyinde güvenli font kilidi uygulanır.
   ============================================================ */
:root{
  --ild-app-font: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html,
body,
.app-shell,
.app-shell *,
.screen,
.screen *,
button,
select,
input,
textarea{
  font-family: var(--ild-app-font) !important;
}
.week-title-box,
.week-title-box *,
.info-box,
.info-box *,
.output-card,
.output-card *,
.choice-card,
.choice-card *,
.serbest-activity-card,
.serbest-activity-card *,
.serbest-story-box,
.serbest-story-box *{
  font-family: var(--ild-app-font) !important;
}


/* ============================================================
   v84 mobil sıkılaştırma ve aç düğmesi yerleşimi
   - Sadece istenen dört noktaya müdahale eder.
   - 3/4. sınıf bekleme kartları daha kısa olur.
   - Ders saati kutusu mobilde daha ince olur.
   - Etkinlikler başlığı üzerindeki gereksiz Aç düğmesi gizlenir.
   - Masal Metnini Göster alanında Aç/Kapat düğmesi görünür hale gelir.
   ============================================================ */

/* 3. ve 4. sınıf kutuları: diğer sınıf kartlarına dokunmadan kompakt hale getirildi. */
#gradeScreen #gradeGrid .choice-card.future-grade-card,
#gradeScreen #gradeGrid .choice-card.future-grade-card:disabled{
  min-height: 64px !important;
  padding: 7px 10px !important;
  border-radius: 17px !important;
  gap: 3px !important;
}
#gradeScreen #gradeGrid .choice-card.future-grade-card strong{
  font-size: 15px !important;
  line-height: 1.03 !important;
}
#gradeScreen #gradeGrid .choice-card.future-grade-card .future-grade-note{
  max-width: 100% !important;
  margin-top: 1px !important;
  font-size: 10.2px !important;
  line-height: 1.08 !important;
}
@media (max-width: 640px){
  #gradeScreen #gradeGrid .choice-card.future-grade-card,
  #gradeScreen #gradeGrid .choice-card.future-grade-card:disabled{
    min-height: 58px !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
  }
  #gradeScreen #gradeGrid .choice-card.future-grade-card strong{
    font-size: 15px !important;
  }
  #gradeScreen #gradeGrid .choice-card.future-grade-card .future-grade-note{
    font-size: 10px !important;
    line-height: 1.06 !important;
  }
}
@media (max-width: 430px){
  #gradeScreen #gradeGrid .choice-card.future-grade-card,
  #gradeScreen #gradeGrid .choice-card.future-grade-card:disabled{
    min-height: 56px !important;
    padding: 6px 9px !important;
  }
}

/* Ders Saati kutusu: mobil görünümde belirgin biçimde inceltildi. */
@media (max-width: 768px){
  #workbenchScreen .info-grid .info-box.hours-fill-box{
    min-height: 66px !important;
    height: auto !important;
    padding: 8px 12px 7px !important;
    border-radius: 18px !important;
    justify-content: center !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box small{
    font-size: 11px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    letter-spacing: .07em !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box b{
    font-size: 17px !important;
    line-height: 1 !important;
  }
}
@media (max-width: 430px){
  #workbenchScreen .info-grid .info-box.hours-fill-box{
    min-height: 60px !important;
    padding: 7px 11px 6px !important;
    border-radius: 17px !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box small{
    font-size: 10.5px !important;
    margin-bottom: 3px !important;
  }
  #workbenchScreen .info-grid .info-box.hours-fill-box b{
    font-size: 16px !important;
  }
}

/* Etkinlikler ana başlığı üzerinde görünürse gereksiz Aç düğmesini kaldır. */
body.serbest-layout-active #workbenchScreen .output-card.process-focus > .output-title::after,
body.serbest-layout-active #workbenchScreen .output-card.process-focus > .output-title::before{
  content: none !important;
  display: none !important;
}
body.serbest-layout-active #workbenchScreen .output-card.process-focus > .output-title > button,
body.serbest-layout-active #workbenchScreen .output-card.process-focus > .output-title > .open-btn,
body.serbest-layout-active #workbenchScreen .output-card.process-focus > .output-title > .toggle-btn,
body.serbest-layout-active #workbenchScreen .output-card.process-focus > .output-title > .accordion-toggle{
  display: none !important;
}

/* Masal açılır alanı: başlığın tıklanabilir olduğu net görünsün. */
body.serbest-layout-active #workbenchScreen .serbest-story-box{
  position: relative !important;
}
body.serbest-layout-active #workbenchScreen .serbest-story-box summary{
  position: relative !important;
  min-height: 56px !important;
  padding: 12px 78px 12px 15px !important;
  align-items: center !important;
}
body.serbest-layout-active #workbenchScreen .serbest-story-box summary::after{
  content: "Aç" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: 0 5px 14px rgba(15,35,67,.12) !important;
  border: 1px solid rgba(37,99,235,.12) !important;
}
body.serbest-layout-active #workbenchScreen .serbest-story-box[open] summary::after{
  content: "Kapat" !important;
  min-width: 62px !important;
  color: #7c3aed !important;
  border-color: rgba(124,58,237,.16) !important;
}
:root[data-theme="dark"] body.serbest-layout-active #workbenchScreen .serbest-story-box summary::after,
:root[data-theme="dark"] body.serbest-layout-active #workbenchScreen .serbest-story-box[open] summary::after{
  background: rgba(15,23,42,.92) !important;
  color: #dbeafe !important;
  border-color: rgba(147,197,253,.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.24) !important;
}
@media (max-width: 640px){
  body.serbest-layout-active #workbenchScreen .serbest-story-box summary{
    min-height: 62px !important;
    padding: 11px 78px 11px 13px !important;
    gap: 5px !important;
  }
  body.serbest-layout-active #workbenchScreen .serbest-story-box summary::after{
    right: 12px !important;
    top: 16px !important;
    transform: none !important;
    height: 32px !important;
    min-width: 48px !important;
  }
  body.serbest-layout-active #workbenchScreen .serbest-story-box[open] summary::after{
    min-width: 60px !important;
  }
}