/* ============================================================
   YÖKDİL Sağlık — Kelime ve Soru Bankası
   Sağlık/tıp alanının özgün akademik kelime havuzu
   (Coxhead AWL temelli, tıbbi alana filtrelenmiş)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#eaf1f8; --bg-2:#dde9f5; --ink:#0d1b2a; --ink-soft:#42566b;
  --card:#ffffff; --card-line:rgba(15,42,80,.12);
  --accent:#0ea5e9; --accent-2:#0b3a67; --accent-deep:#082247;
  --med-noun:#0ea5e9; --med-verb:#16a34a; --med-adj:#f59e0b;
  --med-adv:#a855f7; --med-phr:#ec4899; --med-med:#dc2626;
  --shadow:0 4px 12px rgba(11,58,103,.10), 0 1px 2px rgba(11,58,103,.06);
  --shadow-hover:0 10px 24px rgba(11,58,103,.16), 0 2px 4px rgba(11,58,103,.08);
}
html[data-theme="dark"]{
  --bg:#070d16; --bg-2:#0c1726; --ink:#eaf2fb; --ink-soft:#9fb3c8;
  --card:#10233b; --card-line:rgba(148,180,220,.18);
}
html,body{height:100%}
body{
  font-family:'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
  -webkit-font-smoothing:antialiased;
  /* TEK EKRAN: sayfa scroll olmaz; sadece kelime alanı içeride kayar */
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
}
.ys-topbar{flex:0 0 auto}
.ys-hero{flex:0 0 auto}
.ys-controls{flex:0 0 auto}
/* ============= HERO (kompakt + görkemli) ============= */
.ys-hero{
  position:relative; text-align:center; max-width:1280px; margin:0 auto; width:100%;
  padding:clamp(8px,1.6vh,18px) clamp(14px,4vw,48px) clamp(8px,1.4vh,16px);
  background:
    radial-gradient(120% 150% at 50% -40%, rgba(14,165,233,.16), transparent 62%),
    radial-gradient(90% 120% at 50% 0%, rgba(20,184,166,.10), transparent 60%);
  border-bottom:1px solid var(--card-line);
}
.ys-eyebrow{
  display:inline-block; padding:5px 15px; border-radius:99px;
  background:linear-gradient(135deg,#0ea5e9,#0b3a67); color:#fff;
  font-size:clamp(10px,1.1vw,12.5px); font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  box-shadow:0 6px 14px rgba(11,58,103,.25), inset 0 1px 0 rgba(255,255,255,.3);
}
/* Baslik satiri: TEK font-size clamp tum satiri (baslik + iki asa) yonetir.
   Baslik 1em, asalar 1.3em => her cihazda DAIMA ayni oranda olcek, dagilmaz. */
.ys-title-row{
  display:flex; align-items:center; justify-content:center;   /* blok-seviye => her zaman tam ortalı, eyebrow ile aynı satıra binmez */
  gap:clamp(.5em,1.4vw,.9em); width:100%; margin:clamp(6px,1vh,12px) auto;
  font-size:clamp(22px,5.2vw,48px);
}
.ys-title{
  margin:0; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1em; font-weight:900; line-height:1.05;
  letter-spacing:clamp(.04em,.6vw,.16em);   /* harfleri saga-sola yayar */
  white-space:nowrap;                         /* satira sigar, dagilmaz */
  background:linear-gradient(115deg,#0ea5e9 0%,#14b8a6 45%,#0b3a67 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 6px rgba(11,58,103,.18));
}
html[data-theme="dark"] .ys-title{
  background:linear-gradient(115deg,#38bdf8 0%,#2dd4bf 45%,#93c5fd 100%);
  -webkit-background-clip:text; background-clip:text;
}
.ys-tip{
  flex:0 0 auto; display:block;
  width:1.3em; height:1.3em; aspect-ratio:1; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(11,58,103,.28));
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
.ys-tip--right{transform:scaleX(-1)}
html[data-theme="dark"] .ys-tip{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.ys-hero-meta{
  margin:0; font-size:clamp(11px,1.3vw,14px); font-weight:700; color:var(--ink-soft);
  letter-spacing:.01em;
}
.ys-hero-meta b{color:var(--accent-2); font-weight:900}
html[data-theme="dark"] .ys-hero-meta b{color:#7dd3fc}
.ys-hero-meta i{color:var(--accent); font-style:normal; margin:0 4px; font-weight:900}

/* ============= CONTROLS (sabit, scroll etmez) ============= */
.ys-controls{
  margin:0 auto; max-width:1280px; width:100%; padding:10px clamp(16px,4vw,48px);
  display:flex; flex-direction:column; gap:8px;
}
.ys-search{
  display:flex; align-items:center; gap:10px; position:relative;
  background:var(--card); border:1px solid var(--card-line); border-radius:16px;
  padding:8px 14px; box-shadow:var(--shadow);
}
.ys-search input{
  flex:1; border:0; background:transparent; outline:none;
  font:600 16px/1.4 'Inter',sans-serif; color:var(--ink); padding:10px 4px;
}
.ys-search input::placeholder{color:var(--ink-soft); font-weight:500}
.ys-search svg{flex-shrink:0; color:var(--accent)}
.ys-count{font-size:13px; color:var(--ink-soft); font-weight:700; padding:0 6px; white-space:nowrap}

/* ===== Otomatik tamamlama (öneri listesi) ===== */
.ys-suggest{
  list-style:none; margin:0; padding:6px;
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:120;
  background:var(--card); border:1px solid var(--card-line); border-radius:14px;
  box-shadow:var(--shadow-hover);
  max-height:min(56vh,420px); overflow-y:auto; scrollbar-width:thin;
  display:none;
}
.ys-suggest[data-open="1"]{display:block}
.ys-suggest-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px; cursor:pointer;
  transition:background .12s ease;
}
.ys-suggest-item:hover,
.ys-suggest-item[data-active="1"]{background:rgba(14,165,233,.10)}
.ys-suggest-item .sg-w{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:15px; color:var(--accent-deep); flex:0 0 auto;
}
html[data-theme="dark"] .ys-suggest-item .sg-w{color:#dbeeff}
.ys-suggest-item .sg-w mark{background:rgba(245,158,11,.32); color:inherit; padding:0 1px; border-radius:3px}
.ys-suggest-item .sg-tr{
  font-size:13px; color:var(--ink-soft); font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
}
.ys-suggest-item .sg-pos{
  flex:0 0 auto; font-size:9px; font-weight:800; padding:2px 7px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.05em; color:#fff;
}
.ys-suggest-item[data-pos="n"] .sg-pos{background:var(--med-noun)}
.ys-suggest-item[data-pos="v"] .sg-pos{background:var(--med-verb)}
.ys-suggest-item[data-pos="adj"] .sg-pos{background:var(--med-adj)}
.ys-suggest-item[data-pos="adv"] .sg-pos{background:var(--med-adv)}
.ys-suggest-item[data-pos="phr"] .sg-pos{background:var(--med-phr)}
.ys-suggest-item[data-pos="med"] .sg-pos{background:var(--med-med)}
.ys-suggest-item[data-pos="conj"] .sg-pos{background:var(--accent-2)}
.ys-suggest-empty{padding:14px 12px; color:var(--ink-soft); font-style:italic; font-size:13.5px; text-align:center}

.ys-filters{
  display:flex; flex-wrap:wrap; gap:6px; padding:2px;
}
.ys-chip{
  appearance:none; border:1px solid var(--card-line); background:var(--card);
  padding:7px 12px; border-radius:99px; font:700 12px/1 'Inter',sans-serif;
  color:var(--ink-soft); cursor:pointer; transition:all .15s ease; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.ys-chip:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.ys-chip[data-active="1"]{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  border-color:transparent; box-shadow:0 6px 14px rgba(11,58,103,.22);
}
.ys-chip-dot{width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* ============= VOCAB SÖZLÜK (A-Z) — app-shell ============= */
/* grid-wrap viewport'un kalanini kaplar; icindeki dict-main scroll olur */
.ys-grid-wrap{
  flex:1 1 auto; min-height:0; width:100%;
  max-width:none; margin:0 auto; padding:10px clamp(8px,1.2vw,16px) 14px;
  display:flex;
}
.ys-dict{display:flex; gap:clamp(10px,1.5vw,22px); align-items:stretch; flex:1 1 auto; min-height:0; width:100%}
.ys-dict-main{
  flex:1 1 auto; min-width:0; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:2px 8px 8px 2px; scrollbar-width:thin;
  scroll-behavior:smooth;
}

/* --- Yan alfabe rayı (sabit yükseklik, kendi içinde gerekirse kayar) --- */
.ys-az{
  flex:0 0 auto; width:clamp(50px,4vw,66px);
  display:flex; flex-direction:column; gap:4px;
  min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:7px 7px; border-radius:18px;
  background:linear-gradient(180deg,#fff8f0,#fff1f1);
  border:1px solid #f3e2d8; box-shadow:0 8px 22px -12px rgba(180,90,40,.4);
  scrollbar-width:thin;
}
html[data-theme="dark"] .ys-az{
  background:linear-gradient(180deg,#241813,#23121a);
  border-color:#3a261d; box-shadow:0 8px 22px -12px rgba(0,0,0,.6);
}
/* Sıcak renkli, estetik harf butonları (--h her harfe app.js'ten verilir) */
.ys-az-btn{
  position:relative; appearance:none; cursor:pointer;
  border:1px solid hsl(var(--h,28) 72% 85%);
  background:hsl(var(--h,28) 94% 96%);
  color:hsl(var(--h,28) 62% 40%);
  font:900 14px/1 'Plus Jakarta Sans',sans-serif;
  border-radius:11px; padding:8px 0; text-align:center;
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.ys-az-btn:hover{
  background:hsl(var(--h,28) 92% 91%); color:hsl(var(--h,28) 70% 34%);
  transform:translateY(-1px);
  box-shadow:0 5px 12px hsl(var(--h,28) 78% 60% / .45);
}
.ys-az-btn[data-active="1"]{
  background:linear-gradient(140deg, hsl(var(--h,28) 95% 60%), hsl(calc(var(--h,28) - 14) 90% 48%));
  color:#fff; border-color:transparent;
  box-shadow:0 7px 18px hsl(var(--h,28) 85% 50% / .55);
  transform:translateY(-1px);
}
.ys-az-btn[disabled]{opacity:.3; cursor:default; pointer-events:none; filter:grayscale(.45)}
.ys-az-btn .n{
  display:block; font:800 9px/1 'Inter',sans-serif; margin-top:3px; opacity:.7; letter-spacing:.02em;
}
html[data-theme="dark"] .ys-az-btn{
  background:hsl(var(--h,28) 42% 17%); color:hsl(var(--h,28) 82% 72%);
  border-color:hsl(var(--h,28) 38% 27%);
}
html[data-theme="dark"] .ys-az-btn:hover{ background:hsl(var(--h,28) 46% 23%); color:hsl(var(--h,28) 88% 82%) }

/* --- Seçili harf başlığı (scroll alanında yapışık durur) --- */
.ys-letter-head{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:14px; margin:0 0 14px;
  padding:8px 2px 12px; border-bottom:2px solid var(--card-line);
  background:linear-gradient(180deg,var(--bg) 70%, rgba(234,241,248,0));
}
html[data-theme="dark"] .ys-letter-head{background:linear-gradient(180deg,var(--bg-2) 70%, rgba(12,23,38,0))}
.ys-letter-big{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:900;
  font-size:clamp(34px,5vw,52px); line-height:1; color:transparent;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text;
  min-width:.8em;
}
.ys-letter-info{display:flex; flex-direction:column; gap:2px}
.ys-letter-info .t{font:800 15px/1.2 'Plus Jakarta Sans',sans-serif; color:var(--accent-deep)}
html[data-theme="dark"] .ys-letter-info .t{color:#dbeeff}
.ys-letter-info .s{font-size:12.5px; color:var(--ink-soft); font-weight:600}

.ys-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(260px,23vw,360px), 1fr));
  gap:clamp(12px,1.6vw,20px);
}
.ys-card{
  background:var(--card); border:1px solid var(--card-line); border-radius:14px;
  padding:14px 14px 12px; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position:relative; overflow:hidden;
}
.ys-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(14,165,233,.45)}
.ys-card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:6px}
.ys-card-en{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(17px,1.6vw,20px);
  font-weight:800; color:var(--accent-deep); line-height:1.2; flex:1;
}
html[data-theme="dark"] .ys-card-en{color:#dbeeff}
.ys-card-pos{
  font-size:10px; font-weight:800; padding:3px 8px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.05em; color:#fff; flex-shrink:0;
}
.ys-card[data-pos="n"] .ys-card-pos{background:var(--med-noun)}
.ys-card[data-pos="v"] .ys-card-pos{background:var(--med-verb)}
.ys-card[data-pos="adj"] .ys-card-pos{background:var(--med-adj)}
.ys-card[data-pos="adv"] .ys-card-pos{background:var(--med-adv)}
.ys-card[data-pos="phr"] .ys-card-pos{background:var(--med-phr)}
.ys-card[data-pos="med"] .ys-card-pos{background:var(--med-med)}
.ys-card-tr{
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; margin-bottom:8px;
}
.ys-card-ex{
  font-size:13px; line-height:1.45; color:var(--ink-soft);
  border-top:1px solid var(--card-line); padding-top:8px; margin-top:6px;
}
.ys-card-ex b{color:var(--accent); font-weight:800}
.ys-card-ex i{font-style:normal; color:var(--ink); font-weight:600}
.ys-card-syn{
  margin-top:6px; font-size:11.5px; color:var(--ink-soft);
}
.ys-card-syn b{color:var(--accent-2); font-weight:800; letter-spacing:.04em}

/* ============= SECTION HEADER ============= */
.ys-sec{max-width:1280px; margin:0 auto 30px; padding:0 clamp(16px,4vw,48px)}
.ys-sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin:30px 0 16px; padding-bottom:10px; border-bottom:2px solid var(--card-line);
}
.ys-sec-title{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(22px,3vw,32px);
  font-weight:900; color:var(--accent-deep); margin:0; letter-spacing:-.015em;
}
html[data-theme="dark"] .ys-sec-title{color:#dbeeff}
.ys-sec-sub{font-size:13px; color:var(--ink-soft); font-weight:600}

/* ============= QUESTIONS ============= */
.ys-qtype{
  background:var(--card); border:1px solid var(--card-line); border-radius:16px;
  margin-bottom:14px; box-shadow:var(--shadow); overflow:clip;
}
.ys-qtype[open]{overflow:visible}
.ys-qtype summary{
  list-style:none; cursor:pointer; padding:16px 20px;
  display:flex; align-items:center; gap:12px;
  font:800 16px/1.3 'Plus Jakarta Sans',sans-serif; color:var(--accent-deep);
  background:linear-gradient(180deg,rgba(14,165,233,.05),transparent);
  user-select:none;
}
html[data-theme="dark"] .ys-qtype summary{color:#dbeeff}
.ys-qtype summary::-webkit-details-marker{display:none}
.ys-qtype summary::before{
  content:"+"; display:grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  font-size:18px; font-weight:900; transition:transform .2s ease;
}
.ys-qtype[open] summary::before{content:"−"; transform:rotate(180deg)}
.ys-qtype-meta{
  margin-left:auto; font-size:12px; color:var(--ink-soft); font-weight:700;
  background:rgba(14,165,233,.1); padding:4px 10px; border-radius:99px;
}
.ys-cloze-passage{
  position:sticky; top:0; z-index:5;
  padding:16px 20px; border-bottom:2px solid var(--accent);
  background:var(--card);
  font-size:14.5px; line-height:1.7; color:var(--ink); font-weight:500;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.ys-cloze-passage p{margin:0}
.ys-cloze-passage b{background:rgba(245,158,11,.22); padding:1px 6px; border-radius:4px; font-weight:800}
html[data-theme="dark"] .ys-cloze-passage{background:var(--card); box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ys-q{
  padding:14px 20px; border-top:1px solid var(--card-line);
}
.ys-q-num{
  display:inline-block; font:900 12px/1 'Plus Jakarta Sans',sans-serif;
  color:#fff; background:var(--accent-2); padding:4px 9px; border-radius:6px;
  margin-bottom:8px; letter-spacing:.04em;
}
.ys-q-text{
  font-size:14.5px; line-height:1.55; color:var(--ink); margin:0 0 10px; font-weight:500;
}
.ys-q-text b{background:rgba(245,158,11,.18); padding:1px 5px; border-radius:4px; font-weight:700}
.ys-q-opts{display:grid; gap:6px; margin:0 0 10px}
.ys-q-opt{
  padding:7px 12px; background:rgba(14,165,233,.05); border:1px solid var(--card-line);
  border-radius:8px; font-size:13.5px; line-height:1.4; color:var(--ink); cursor:pointer;
  transition:background .15s ease;
}
.ys-q-opt:hover{background:rgba(14,165,233,.12)}
.ys-q-opt.correct{background:rgba(22,163,74,.15); border-color:rgba(22,163,74,.5); color:#0f5a32; font-weight:700}
.ys-q-opt .lt{display:inline-block; width:22px; font-weight:900; color:var(--accent-2)}
.ys-q-ans{
  font-size:12.5px; color:var(--ink-soft); padding:8px 12px; background:rgba(22,163,74,.08);
  border-left:3px solid #16a34a; border-radius:6px;
}
.ys-q-ans b{color:#16a34a}

.ys-empty{
  grid-column:1/-1; text-align:center; padding:40px 20px;
  color:var(--ink-soft); font-style:italic;
}

/* ============= SOURCES NOTE ============= */
.ys-sources{
  max-width:1280px; margin:30px auto; padding:18px clamp(16px,4vw,48px);
  font-size:12px; color:var(--ink-soft); line-height:1.6;
  border-top:1px solid var(--card-line);
}
.ys-sources b{color:var(--accent-2)}

/* ============= RESPONSIVE ============= */
/* Dar ekranda yan ray -> ust tarafta yatay kaydirilabilir bar olur */
@media (max-width:760px){
  .ys-dict{flex-direction:column; gap:8px; min-height:0}
  .ys-az{
    flex:0 0 auto; width:100%;
    flex-direction:row; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden; gap:4px;
    padding:6px 8px;
    scroll-snap-type:x proximity;
  }
  .ys-az-btn{flex:0 0 auto; min-width:34px; padding:7px 2px; scroll-snap-align:center}
  .ys-az-btn .n{display:none}
  .ys-dict-main{padding-right:2px}
}
@media (max-width:680px){
  .ys-grid{grid-template-columns:1fr 1fr; gap:8px}
  .ys-card{padding:10px 10px 8px}
  .ys-card-en{font-size:15px}
  .ys-card-tr{font-size:13px}
  .ys-card-ex{font-size:11.5px}
  .ys-card-syn{font-size:10.5px}
  .ys-stat{min-width:90px; padding:8px 12px}
}
@media (max-width:420px){
  .ys-grid{grid-template-columns:1fr}
  /* Dar ekranda arama kutusu: input ile sonuç sayacı yan yana taşmasın */
  .ys-search{padding:6px 10px; gap:6px}
  .ys-search input{min-width:0; padding:9px 2px; font-size:15px}
  .ys-count{font-size:11px; padding:0 2px; flex:0 0 auto}
}

/* ====== Gömülü Toolbar (tek başına çalışır) ====== */
:root{ --toolbar-height:60px; }
.ys-topbar{
  position:sticky; top:0; z-index:50;
  height:var(--toolbar-height);
  display:flex; align-items:center;
  gap:12px; padding:0 16px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--card-line);
  box-shadow:var(--shadow);
}
[data-theme="dark"] .ys-topbar{ background:rgba(8,34,71,.72); }
.ys-topbar-back{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%; border:1px solid var(--card-line);
  background:var(--card); color:var(--ink);
  text-decoration:none; cursor:pointer; transition:.15s;
}
.ys-topbar-back:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.ys-topbar-back svg{ width:20px; height:20px; }
.ys-topbar-brand{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--accent-2);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:18px;
  letter-spacing:-.02em; margin-right:auto;
}
.ys-topbar-brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); }
.ys-topbar-theme{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto;
  border-radius:50%; border:1px solid var(--card-line);
  background:var(--card); color:var(--ink); cursor:pointer; transition:.15s;
}
.ys-topbar-theme:hover{ background:var(--accent-2); color:#fff; border-color:var(--accent-2); }
.ys-topbar-theme svg{ width:18px; height:18px; }
.ys-topbar-theme .icon-moon{ display:none; }
[data-theme="dark"] .ys-topbar-theme .icon-sun{ display:none; }
[data-theme="dark"] .ys-topbar-theme .icon-moon{ display:inline; }

/* ============= TIKLANABİLİR KART ============= */
.ys-card{cursor:pointer}
.ys-card::after{
  content:""; position:absolute; right:12px; bottom:10px;
  width:18px; height:18px; opacity:.35; transition:opacity .15s ease;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
}
.ys-card:hover::after{opacity:.9}
.ys-card-hint{
  margin-top:8px; font-size:11px; font-weight:700; color:var(--accent);
  letter-spacing:.03em; text-transform:uppercase; opacity:.8;
}

/* ============= POP-UP / MODAL ============= */
.ys-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(8,34,71,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.ys-modal[data-open="1"]{opacity:1; visibility:visible}
.ys-modal-card{
  position:relative; width:min(560px,100%); max-height:86vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--card-line); border-radius:22px;
  box-shadow:0 24px 60px rgba(8,34,71,.32), 0 4px 12px rgba(8,34,71,.18);
  padding:26px 26px 24px; transform:translateY(16px) scale(.98); transition:transform .22s ease;
}
.ys-modal[data-open="1"] .ys-modal-card{transform:translateY(0) scale(1)}
.ys-modal-close{
  position:absolute; top:14px; right:14px; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid var(--card-line); background:var(--bg); color:var(--ink-soft);
  transition:.15s;
}
.ys-modal-close:hover{background:var(--med-med); color:#fff; border-color:transparent}
.ys-modal-close svg{width:18px; height:18px}
.ys-modal-pos{
  display:inline-block; font-size:11px; font-weight:800; padding:4px 11px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.05em; color:#fff; margin-bottom:10px;
}
.ys-modal[data-pos="n"] .ys-modal-pos{background:var(--med-noun)}
.ys-modal[data-pos="v"] .ys-modal-pos{background:var(--med-verb)}
.ys-modal[data-pos="adj"] .ys-modal-pos{background:var(--med-adj)}
.ys-modal[data-pos="adv"] .ys-modal-pos{background:var(--med-adv)}
.ys-modal[data-pos="phr"] .ys-modal-pos{background:var(--med-phr)}
.ys-modal[data-pos="med"] .ys-modal-pos{background:var(--med-med)}
.ys-modal[data-pos="conj"] .ys-modal-pos{background:var(--accent-2)}
.ys-modal-word{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(28px,5vw,38px);
  font-weight:900; color:var(--accent-deep); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 4px; padding-right:40px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
html[data-theme="dark"] .ys-modal-word{color:#dbeeff}
.ys-modal-say{
  width:40px; height:40px; flex:0 0 auto; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; border:1px solid var(--card-line);
  background:var(--bg); color:var(--accent); transition:.15s;
}
.ys-modal-say:hover{background:var(--accent); color:#fff; border-color:transparent}
.ys-modal-say svg{width:20px; height:20px}
.ys-modal-tr{
  font-size:clamp(16px,2vw,19px); font-weight:700; color:var(--ink); line-height:1.45; margin:8px 0 18px;
}
.ys-modal-block{
  border-radius:14px; padding:14px 16px; margin-bottom:12px;
  border:1px solid var(--card-line); background:var(--bg);
}
.ys-modal-block-h{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-2); margin:0 0 7px; display:flex; align-items:center; gap:7px;
}
.ys-modal-say-ex{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 11px 5px 9px; border-radius:99px; transition:.15s;
}
.ys-modal-say-ex:hover{filter:brightness(1.08); transform:translateY(-1px)}
.ys-modal-say-ex:active{transform:translateY(0)}
.ys-modal-say-ex svg{width:15px; height:15px}
.ys-modal-say-ex.is-speaking{background:var(--accent-2); border-color:var(--accent-2)}
.ys-modal-block-h::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.ys-modal-en{font-size:15.5px; line-height:1.55; color:var(--ink); margin:0; font-weight:500}
.ys-modal-extr{font-size:14px; line-height:1.5; color:var(--ink-soft); margin:6px 0 0; font-style:italic}
.ys-modal-syn{font-size:14.5px; line-height:1.5; color:var(--ink); margin:0; font-weight:600}
.ys-modal-meaning{font-size:15px; line-height:1.6; color:var(--ink); margin:0}
body.ys-no-scroll{overflow:hidden}