:root{
  --paper:#faf8f4;
  --card:#ffffff;
  --ink:#1d2433;
  --ink-soft:#5a6478;
  --muted:#8b93a5;
  --line:#e8e3da;
  --line-soft:#f1ece4;
  --gold:#b8860b;
  --gold-soft:#f6efdd;
  --navy:#16305c;
  --accent:#0f766e;
  --red:#b3261e;
  --red-soft:#fdecea;
  --orange:#b45309;
  --orange-soft:#fdf3e3;
  --green:#15803d;
  --green-soft:#eaf6ee;
  --shadow:0 1px 2px rgba(29,36,51,.05), 0 8px 28px rgba(29,36,51,.06);
  --radius:14px;
  --fa:'Vazirmatn', system-ui, sans-serif;
  --en:'Source Serif 4', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--fa); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}

button,input,select,textarea{font-family:inherit}

/* ============ ورود ============ */
#gate{
  position:fixed; inset:0; z-index:100;
  background:radial-gradient(1100px 620px at 50% -10%, #fff 0%, var(--paper) 62%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.gate-box{
  width:100%; max-width:360px; text-align:center;
  background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:38px 30px 28px; box-shadow:var(--shadow);
}
.gate-icon{font-size:44px; line-height:1; margin-bottom:10px}
.gate-title{font-size:23px; margin:0 0 6px; color:var(--navy); font-weight:700}
.gate-sub{margin:0 0 22px; font-size:13.5px; color:var(--muted)}
#gateInput{
  width:100%; text-align:center; letter-spacing:.28em;
  font-size:17px; padding:13px 14px; border-radius:12px;
  border:1px solid var(--line); background:#fdfcfa; outline:none; transition:.18s;
}
#gateInput:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
#gateInput::placeholder{letter-spacing:normal; color:var(--muted)}
.gate-box .wide{margin-top:12px}
.gate-chk{justify-content:center; margin-top:14px; font-size:13px}
.gate-msg{min-height:20px; margin:10px 0 0; font-size:13px; color:var(--red)}
.shake{animation:shake .38s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(4px)}
}

/* ============ هدر ============ */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(250,248,244,.93); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1100px; margin:0 auto; padding:11px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.brand-mark{font-size:25px; line-height:1}
.brand h1{font-size:17px; font-weight:700; margin:0; color:var(--navy)}
.brand-sub{margin:0; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}

.tabs{display:flex; gap:4px; background:#f2ede4; padding:4px; border-radius:12px}
.tab{
  position:relative; border:0; background:transparent; cursor:pointer;
  font-size:14px; color:var(--ink-soft); padding:7px 15px; border-radius:9px;
  transition:.16s; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--card); color:var(--navy); font-weight:600; box-shadow:0 1px 3px rgba(29,36,51,.1)}
.tab-ic{font-size:15px}
.tab-badge{
  background:var(--red); color:#fff; font-size:11px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
}

.tools{display:flex; align-items:center; gap:9px; margin-inline-start:auto; flex-wrap:wrap}

.btn{
  font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); padding:8px 14px; border-radius:999px;
  cursor:pointer; transition:.18s; display:inline-flex; align-items:center; gap:8px;
}
.btn:hover:not(:disabled){border-color:#d9d2c6; box-shadow:var(--shadow)}
.btn:disabled{opacity:.42; cursor:default}
.btn-primary{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-primary:hover:not(:disabled){background:#1d3f75; border-color:#1d3f75}
.btn-primary .dot{width:8px;height:8px;border-radius:50%;background:#6ee7b7}
.btn-primary[aria-pressed="true"]{background:var(--gold); border-color:var(--gold)}
.btn-primary[aria-pressed="true"] .dot{background:#fff3c4}
.btn.wide{width:100%; justify-content:center}
.icon-btn{padding:8px 11px}
.mini{
  font-size:12.5px; padding:5px 11px; border-radius:8px;
  border:1px solid var(--line); background:#fdfcfa; cursor:pointer; transition:.15s;
}
.mini:hover{border-color:var(--gold); color:var(--gold)}

.search-wrap{position:relative}
#search{
  font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:999px;
  padding:8px 16px; width:210px; outline:none; transition:.18s;
}
#search:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
#search::placeholder{color:var(--muted)}

/* ============ چیدمان ============ */
#main{max-width:1100px; margin:0 auto; padding:24px 20px 10px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:26px 28px; margin-bottom:20px;
  animation:fade .26s ease;
}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.card-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line-soft);
}
.card-title{font-size:17px; font-weight:600; margin:0; color:var(--navy)}
.card-head .hint, .card-head .stats{margin-inline-start:auto}
.center-card{text-align:center; padding:48px 28px}
.big-icon{font-size:54px; line-height:1; margin-bottom:12px}
.wide-hint{max-width:460px; margin:12px auto 22px}

.hint{font-size:12.5px; color:var(--muted); margin:0}
.empty{padding:24px 6px; color:var(--muted); font-size:14px; text-align:center}
.stats{display:flex; gap:7px; flex-wrap:wrap}
.pill{
  font-size:12px; color:var(--ink-soft); background:var(--gold-soft);
  border:1px solid #ecdfbf; padding:3px 11px; border-radius:999px; white-space:nowrap;
}
.pill-soft{background:#f4f2ee; border-color:var(--line)}
.pill-late{background:var(--red-soft); border-color:#f3c9c4; color:var(--red)}
.pill-live{background:var(--green-soft); border-color:#c6e4d1; color:var(--green)}
.pill-hl{background:#fff6cc; border-color:#eadf9e; color:#7a5c00}

.chk{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); cursor:pointer}
.chk input{accent-color:var(--gold); width:15px; height:15px}

.group-title{
  font-size:13px; font-weight:500; color:var(--gold);
  margin:24px 0 10px; display:flex; align-items:center; gap:10px;
}
.group-title::after{content:""; flex:1; height:1px; background:var(--line-soft)}

/* ============ کتاب‌ها ============ */
.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:14px; flex-wrap:wrap}
.crumb{border:0; background:none; color:var(--gold); cursor:pointer; font-size:13px; padding:0}
.crumb:hover{text-decoration:underline}
.crumb-sep{color:var(--muted)}
.crumb-now{color:var(--ink-soft)}

.shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.book{
  text-align:start; font-family:var(--fa); cursor:pointer;
  background:#fdfcfa; border:1px solid var(--line); border-radius:14px;
  padding:20px 18px; transition:.18s; display:flex; flex-direction:column; gap:3px;
}
.book:hover{border-color:var(--gold); background:#fff; box-shadow:var(--shadow); transform:translateY(-2px)}
.book-soon{opacity:.72}
.book-icon{font-size:30px; line-height:1.2; margin-bottom:6px}
.book-title{font-family:var(--en); font-size:17px; font-weight:600; color:var(--navy); direction:ltr}
.book-fa{font-size:13.5px; color:var(--ink-soft)}
.book-desc{font-size:12.5px; color:var(--muted); margin-top:2px}
.book-stat{
  font-size:11.5px; color:var(--gold); margin-top:10px;
  background:var(--gold-soft); border:1px solid #ecdfbf;
  padding:2px 9px; border-radius:999px; align-self:flex-start;
}

.unitbar{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  overflow-x:auto; scrollbar-width:thin; margin-bottom:18px;
}
.unitbar-in{padding:8px 10px; display:flex; gap:5px}
.ub{
  flex:0 0 auto; font-size:13px; border:1px solid transparent; background:transparent;
  color:var(--ink-soft); padding:4px 11px; border-radius:8px;
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.ub:hover{background:#fbf9f5; border-color:var(--line); color:var(--ink)}
.ub.on{background:var(--gold); border-color:var(--gold); color:#fff; font-weight:500}

.page-head{
  border-bottom:1px solid var(--line-soft); padding-bottom:18px; margin-bottom:20px;
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
}
.badge{
  background:var(--gold); color:#fff; font-family:var(--en);
  font-size:13px; font-weight:600; padding:3px 11px; border-radius:6px; direction:ltr;
}
.page-title{
  font-family:var(--en); font-size:26px; font-weight:700; color:var(--navy);
  margin:0; direction:ltr; line-height:1.25;
}
.page-title-fa{font-family:var(--fa); font-size:15.5px; color:var(--ink-soft); font-weight:500}
.count-chip{
  margin-inline-start:auto; font-size:12.5px; color:var(--ink-soft);
  background:var(--gold-soft); border:1px solid #ecdfbf;
  padding:3px 11px; border-radius:999px; white-space:nowrap;
}

.toc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
.toc-card{
  text-align:start; font-family:var(--fa); background:#fdfcfa;
  border:1px solid var(--line); border-radius:10px; padding:13px 15px;
  cursor:pointer; transition:.18s;
}
.toc-card:hover{border-color:var(--gold); background:#fff; box-shadow:var(--shadow); transform:translateY(-1px)}
.toc-n{font-family:var(--en); font-size:11.5px; color:var(--gold); font-weight:600; letter-spacing:.4px; direction:ltr}
.toc-t{font-family:var(--en); font-size:16px; color:var(--navy); font-weight:600; direction:ltr; line-height:1.3; margin-top:2px}
.toc-f{font-size:13px; color:var(--ink-soft)}
.toc-c{font-size:11.5px; color:var(--muted); margin-top:4px}

/* ردیف واژه */
.words{list-style:none; margin:0; padding:0}
.w{
  direction:ltr; display:grid; grid-template-columns:2.4em auto 1fr auto;
  align-items:baseline; gap:0 12px; padding:6px 10px;
  border-radius:8px; transition:background .15s;
}
.w:nth-child(odd){background:#fcfbf8}
.w:hover{background:var(--gold-soft)}
.w-num{font-family:var(--en); font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; user-select:none}
.w-en{
  font-family:var(--en); font-size:17px; color:var(--ink); cursor:pointer;
  border:0; background:none; padding:0; text-align:left; line-height:1.45; transition:color .15s;
}
.w-en:hover{color:var(--accent)}
.w-en:hover::after{content:"🔊"; font-size:11px; margin-inline-start:6px; opacity:.7}
.w-en.speaking{color:var(--accent); font-weight:600}
.w-dots{border-bottom:1px dotted #ddd6c9; transform:translateY(-5px); min-width:22px}
.w-fa{font-size:14.5px; color:var(--ink-soft); direction:rtl; text-align:right; line-height:1.6; justify-self:end}
.w-src{color:var(--muted); font-size:11.5px}

body.hide-fa .w-fa{
  color:transparent;
  background:repeating-linear-gradient(90deg,#ece6db 0 6px,transparent 6px 11px);
  border-radius:4px; cursor:pointer; user-select:none;
  width:132px; white-space:nowrap; overflow:hidden;
}
body.hide-fa .w-fa:hover{background:repeating-linear-gradient(90deg,#e3d9c3 0 6px,transparent 6px 11px)}
body.hide-fa .w-fa.peek{
  color:var(--ink-soft); background:var(--gold-soft);
  width:auto; white-space:normal; overflow:visible; padding:0 7px;
}

.pager{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 4px 22px}
.pg{
  font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); padding:9px 20px; border-radius:999px;
  cursor:pointer; transition:.18s;
}
.pg:hover:not(:disabled){border-color:var(--gold); color:var(--gold)}
.pg:disabled{opacity:.38; cursor:default}
.pg-label{font-size:13px; color:var(--muted)}

/* ============ برنامه‌ریز ============ */
.planner-top{display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,1.5fr); gap:20px; align-items:start}
.clock-card{text-align:center; padding:28px 22px; margin:0}
.clock-time{
  font-size:40px; font-weight:700; color:var(--navy);
  line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:.5px;
}
.clock-date{font-size:16px; color:var(--ink); margin-top:8px}
.clock-meta{font-size:13px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
.clock-next{margin-top:16px}
.add-card{margin:0}
.form-row{margin-bottom:10px}
.form-row input{
  width:100%; font-size:14.5px; padding:10px 14px; border-radius:10px;
  border:1px solid var(--line); background:#fdfcfa; outline:none; transition:.18s;
}
.form-row input:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:12px}
.fld{display:flex; flex-direction:column; gap:5px}
.fld>span{font-size:12px; color:var(--muted)}
.fld select, .date-btn{
  font-size:13.5px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--line); background:#fdfcfa; color:var(--ink);
  cursor:pointer; outline:none; text-align:start; transition:.18s;
}
.fld select:focus, .date-btn:hover{border-color:var(--gold)}

/* تقویم */
.cal{
  background:#fdfcfa; border:1px solid var(--line); border-radius:12px;
  padding:12px; margin-bottom:12px;
}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-title{font-size:14px; font-weight:600; color:var(--navy)}
.cal-nav{
  border:1px solid var(--line); background:var(--card); cursor:pointer;
  width:28px; height:28px; border-radius:8px; font-size:16px; color:var(--ink-soft); transition:.15s;
}
.cal-nav:hover{border-color:var(--gold); color:var(--gold)}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.cal-dow{margin-bottom:4px}
.cal-dow span{text-align:center; font-size:11px; color:var(--muted); padding:3px 0}
.cal-cell{
  aspect-ratio:1; border:1px solid transparent; background:transparent;
  border-radius:8px; font-size:13px; color:var(--ink); cursor:pointer;
  transition:.14s; font-variant-numeric:tabular-nums;
}
.cal-cell:hover{background:var(--gold-soft); border-color:#ecdfbf}
.cal-empty{cursor:default; background:none}
.cal-empty:hover{background:none; border-color:transparent}
.cal-class{background:#eef4fb; color:var(--navy); font-weight:600}
.cal-today{border-color:var(--gold); color:var(--gold); font-weight:700}
.cal-sel{background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important}
.cal-foot{display:flex; gap:7px; margin-top:10px; flex-wrap:wrap}

/* تکالیف */
.tasks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.task{
  display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:start;
  background:#fdfcfa; border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; transition:.16s;
}
.task:hover{border-color:#ded7ca; box-shadow:var(--shadow)}
.task.is-done{opacity:.56}
.task-check{
  width:24px; height:24px; border-radius:7px; border:1.5px solid var(--line);
  background:var(--card); cursor:pointer; font-size:14px; color:#fff;
  display:flex; align-items:center; justify-content:center; transition:.16s; margin-top:2px;
}
.task-check:hover{border-color:var(--gold)}
.task-check.on{background:var(--green); border-color:var(--green)}
.task-body{min-width:0}
.task-title{font-size:15px; font-weight:500; line-height:1.5; word-break:break-word}
.is-done .task-title{text-decoration:line-through}
.task-note{font-size:13px; color:var(--ink-soft); margin-top:3px; word-break:break-word}
.task-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.tag{
  font-size:11.5px; padding:2px 9px; border-radius:999px;
  background:var(--gold-soft); border:1px solid #ecdfbf; color:var(--ink-soft); white-space:nowrap;
}
.tag-soft{background:#f4f2ee; border-color:var(--line); color:var(--muted)}
.st-late{background:var(--red-soft); border-color:#f3c9c4; color:var(--red); font-weight:600}
.st-today{background:var(--orange-soft); border-color:#f0dcb8; color:var(--orange); font-weight:600}
.st-soon{background:#fff8e6; border-color:#eee0b8; color:#8a6a10}
.st-ok{background:var(--green-soft); border-color:#c6e4d1; color:var(--green)}
.st-done{background:#eef0f3; border-color:var(--line); color:var(--muted)}
.st-none{background:#f4f2ee; border-color:var(--line); color:var(--muted)}
.task-del{
  border:1px solid transparent; background:transparent; color:var(--muted);
  width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:13px; transition:.15s;
}
.task-del:hover{background:var(--red-soft); border-color:#f3c9c4; color:var(--red)}

.day-picker{display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 18px}
.day-chip{
  font-size:13px; padding:7px 15px; border-radius:999px;
  border:1px solid var(--line); background:#fdfcfa; color:var(--ink-soft);
  cursor:pointer; transition:.16s;
}
.day-chip:hover{border-color:var(--gold)}
.day-chip.on{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:500}
.backup{display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line-soft)}

/* ============ اسکنر ============ */
.seg{display:flex; gap:3px; background:#f2ede4; padding:3px; border-radius:10px; margin-inline-start:auto}
.seg-btn{
  border:0; background:transparent; cursor:pointer; font-size:13.5px;
  color:var(--ink-soft); padding:6px 14px; border-radius:8px; transition:.15s;
}
.seg-btn.on{background:var(--card); color:var(--navy); font-weight:600; box-shadow:0 1px 3px rgba(29,36,51,.1)}

.cam-wrap{
  position:relative; background:#111; border-radius:12px; overflow:hidden;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
}
#cam{width:100%; height:100%; object-fit:contain; display:block}
.cam-hint{position:absolute; color:#cbd2de; font-size:14px; text-align:center; padding:20px}
.cam-bar{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:13px}

.drop{
  display:flex; align-items:center; justify-content:center;
  min-height:180px; border:2px dashed var(--line); border-radius:12px;
  background:#fdfcfa; color:var(--muted); font-size:14px; cursor:pointer; transition:.18s;
}
.drop:hover, .drop.over{border-color:var(--gold); background:var(--gold-soft); color:var(--gold)}

.shot-wrap{
  margin-top:16px; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:#f6f4f0; text-align:center;
}
#shot{max-width:100%; height:auto; display:block; margin:0 auto}

.prog{margin-top:13px; display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--ink-soft)}
.prog::before{
  content:""; flex:1; height:6px; background:var(--line-soft);
  border-radius:999px; position:relative; order:-1;
}
.prog{position:relative}
.prog-bar{
  position:absolute; inset-inline-start:0; top:0; height:6px;
  background:var(--gold); border-radius:999px; width:0; transition:width .25s;
}

.hl-list{display:flex; flex-direction:column; gap:6px}
.hl-item{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline;
  background:#fffbea; border:1px solid #f0e4b4; border-radius:9px; padding:8px 13px;
}
.hl-en{
  font-family:var(--en); font-size:16.5px; color:var(--ink);
  border:0; background:none; cursor:pointer; padding:0; direction:ltr; transition:color .15s;
}
.hl-en:hover{color:var(--accent)}
.hl-en:hover::after{content:"🔊"; font-size:11px; margin-inline-start:5px; opacity:.7}
.hl-en.speaking{color:var(--accent); font-weight:600}
.hl-fa{font-size:14px; color:var(--ink-soft); text-align:right}
.hl-fa i{color:var(--muted); font-size:12px; font-style:normal}

.reader-bar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:13px}
.rate{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft)}
.rate input[type=range]{width:110px; accent-color:var(--gold)}
.rate b{font-variant-numeric:tabular-nums; color:var(--gold); min-width:28px}
.voice-sel{
  font-size:12.5px; padding:7px 11px; border-radius:9px;
  border:1px solid var(--line); background:#fdfcfa; color:var(--ink);
  max-width:150px; text-overflow:ellipsis;
}
.reader{
  direction:ltr; font-family:var(--en); font-size:18px; line-height:2;
  background:#fdfcfa; border:1px solid var(--line); border-radius:12px;
  padding:20px 22px; text-align:left; max-height:420px; overflow:auto;
}
.rw{cursor:pointer; border-radius:4px; padding:1px 2px; transition:.12s; position:relative}
.rw:hover{background:var(--gold-soft); color:var(--accent)}
.rw-hl{background:#fff2a8; box-shadow:inset 0 -2px 0 #e9cf4a}
.rw-now{background:var(--navy); color:#fff}
.rw.speaking{color:var(--accent); font-weight:600}
.bubble{
  position:absolute; bottom:calc(100% + 7px); inset-inline-start:50%;
  transform:translateX(50%); direction:rtl; font-family:var(--fa); font-size:12.5px;
  background:var(--navy); color:#fff; padding:5px 11px; border-radius:8px;
  white-space:nowrap; z-index:5; pointer-events:none; box-shadow:var(--shadow);
}
.bubble b{font-family:var(--en); direction:ltr}

.tr-bar{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:13px}
.tr-out:empty{display:none}
.tr-text{
  background:#fdfcfa; border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; font-size:15px; line-height:2; color:var(--ink);
}
.tr-fallback{
  background:var(--orange-soft); border:1px solid #f0dcb8; border-radius:12px;
  padding:16px 20px; font-size:13.5px; color:var(--ink-soft);
}
.tr-fallback p{margin:0 0 8px}
.tr-fallback ul{margin:0 0 8px; padding-inline-start:20px}
.tr-fallback li{margin-bottom:4px}

.raw{
  width:100%; font-family:var(--en); direction:ltr; text-align:left;
  font-size:14.5px; line-height:1.75; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); background:#fdfcfa; outline:none; resize:vertical; transition:.18s;
}
.raw:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft)}
#applyRaw{margin-top:10px}
.key-row{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:12px}
.key-row input{flex:1; min-width:180px; margin:0}

/* ============ بخش تلفظ ============ */
.sp-input{font-size:17px; line-height:1.8; min-height:110px}
.sp-bar{display:flex; gap:9px; flex-wrap:wrap; margin-top:12px}
.sp-samples{
  display:flex; gap:7px; flex-wrap:wrap; align-items:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
}
.chip-en{
  font-family:var(--en); direction:ltr; font-size:13.5px;
  padding:5px 12px; border-radius:999px; border:1px solid var(--line);
  background:#fdfcfa; color:var(--ink-soft); cursor:pointer; transition:.16s;
}
.chip-en:hover{border-color:var(--gold); color:var(--gold); background:#fff}

.word-card{text-align:center; padding:12px 0 4px}
.word-big{
  font-family:var(--en); direction:ltr; font-size:44px; font-weight:700;
  color:var(--navy); border:0; background:none; cursor:pointer;
  line-height:1.2; padding:0; transition:color .15s;
}
.word-big:hover{color:var(--accent)}
.word-big.speaking{color:var(--accent)}
.word-fa{font-size:19px; color:var(--ink); margin-top:10px}
.word-base{font-size:13px; color:var(--muted); margin-top:5px}
.word-base b{font-family:var(--en); direction:ltr; color:var(--gold)}
.word-actions{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:20px}

.hl-unknown{background:#fafafa; border-color:var(--line)}
.hl-unknown .hl-fa{color:var(--muted)}

.sp-hist{display:flex; flex-direction:column; gap:6px}
.hist-item{
  text-align:start; direction:ltr; font-family:var(--en); font-size:14.5px;
  background:#fdfcfa; border:1px solid var(--line); border-radius:9px;
  padding:9px 14px; cursor:pointer; transition:.16s; color:var(--ink);
}
.hist-item:hover{border-color:var(--gold); background:#fff; color:var(--accent)}
.gap-sel{max-width:110px}

/* ============ فوتر ============ */
.foot{
  border-top:1px solid var(--line); padding:18px 20px 30px;
  text-align:center; font-size:12.5px; color:var(--muted);
}
.foot .sep{margin:0 8px; opacity:.5}
.foot b{color:var(--ink-soft); font-weight:600}

/* ============ موبایل ============ */
@media (max-width:900px){
  .planner-top{grid-template-columns:1fr}
}
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .topbar-in{padding:10px 12px; gap:9px}
  .brand h1{font-size:15.5px}
  .tabs{order:3; width:100%; justify-content:space-between; padding:3px; gap:2px}
  .tab{flex:1 1 0; min-width:0; justify-content:center; padding:8px 2px; font-size:12px; gap:3px}
  .tab-ic{display:none}
  .tab-badge{font-size:10px; min-width:16px; height:16px; padding:0 4px}
  .tools{order:2; margin-inline-start:auto; gap:7px; flex-wrap:nowrap; min-width:0}
  #toggleFa{flex:1 1 auto; min-width:0; white-space:nowrap; justify-content:center}
  #toggleFa span:last-child{overflow:hidden; text-overflow:ellipsis}
  #lockBtn{flex:0 0 auto}
  .search-wrap{order:4; flex-basis:100%}
  #search{width:100%}
  .btn{padding:8px 12px; font-size:13.5px}
  #main{padding:16px 12px 6px}
  .card{padding:20px 15px}
  .card-head{gap:10px}
  .card-head .hint, .card-head .stats{margin-inline-start:0; width:100%}
  .seg{margin-inline-start:0}
  .page-title{font-size:21px}
  .count-chip{margin-inline-start:0}
  .w{grid-template-columns:2.2em 1fr; gap:2px 8px; padding:8px 6px}
  .w-dots{display:none}
  .w-fa{grid-column:2; justify-self:start; text-align:right; font-size:13.5px}
  .w-en{font-size:16px}
  body.hide-fa .w-fa{width:120px}
  .clock-time{font-size:34px}
  .hl-item{grid-template-columns:1fr; gap:2px}
  .hl-fa{text-align:right}
  .reader{font-size:16.5px; padding:16px; line-height:1.95}
  .reader-bar{gap:7px}
  .reader-bar .btn{flex:1 1 auto; justify-content:center}
  .rate{flex:1 1 100%; justify-content:space-between}
  .rate input[type=range]{flex:1}
  .voice-sel{flex:1 1 100%; max-width:none}
  .gap-sel{max-width:none}
  .word-big{font-size:34px}
  .word-fa{font-size:17px}
  .sp-input{font-size:16px}
  .sp-bar .btn{flex:1 1 auto; justify-content:center}
  .pager{padding:0 2px 18px}
  .foot .sep{display:none}
  .foot span{display:block; margin-bottom:3px}
}