* { box-sizing: border-box; }

html { min-width: 0; }
body {
  margin: 0;
  background: #f5f5f8;
  color: #29263a;
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; }

.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.page-header { margin-bottom: 20px; }
.page-header h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 38px); }
.page-header p { margin: 0; color: #6e6a7b; line-height: 1.5; }

.card {
  background: #fff;
  border: 1px solid #e4e2eb;
  border-radius: 14px;
  box-shadow: 0 5px 20px rgba(52, 45, 88, .05);
  padding: 20px;
}

.stack { display: grid; gap: 18px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .45fr); gap: 18px; }

label { font-weight: 700; color: #4d495b; }

.input,
.search-input,
.select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbc7d9;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  font-size: 16px;
  outline: none;
}

.input:focus,
.search-input:focus,
.select:focus {
  border-color: #7367f0;
  box-shadow: 0 0 0 3px rgba(115,103,240,.12);
}

.dhivehi-input {
  font-family: Dhivehi, Arial, sans-serif;
  direction: rtl;
  text-align: right;
  font-size: 19px;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.checkbox-wrap { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.checkbox-wrap input { width: 18px; height: 18px; accent-color: #7367f0; }

.btn {
  border: 0;
  border-radius: 10px;
  min-height: 42px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}
.btn-primary { background: #7367f0; color: #fff; }
.btn-primary:hover { background: #6255df; }
.btn-secondary { background: #eeecf5; color: #504b61; }
.btn-danger { background: #ffe6e6; color: #b82f30; }
.btn-small { min-height: 34px; padding: 7px 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

#textInput {
  width: 100%;
  min-height: 52vh;
  max-height: none;
  overflow-y: visible;
  border: 1px solid #cbc7d9;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  text-align: right;
  direction: rtl;
  font-family: Dhivehi, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
}
#textInput:focus { border-color: #7367f0; box-shadow: 0 0 0 3px rgba(115,103,240,.12); }

.incorrect { color: rgb(225, 66, 45); }
.correct { color: #159447; }
.checked { color: #2855d9; }
.highlight { background: #ffef86; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; color: #6c6878; font-size: 13px; margin-top: 12px; }
.legend span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.legend .l-correct::before { background: #159447; }
.legend .l-checked::before { background: #2855d9; }
.legend .l-incorrect::before { background: rgb(225,66,45); }

 .suggestion-box {
  position: fixed;
  display: none;
  z-index: 3000;
  min-width: 160px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: min(240px, 45vh);
  overflow-y: auto;
  background: white;
  border: 1px solid #d9d6e2;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  padding: 5px 0;
  margin: 0;
}

.suggestion-box li { list-style: none; padding: 9px 13px; cursor: pointer; font-family: Dhivehi, Arial, sans-serif; direction: rtl; }
.suggestion-box li:hover,
.suggestion-box li.selected { background: #efedff; }

.toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.toolbar .search-wrap { flex: 1 1 320px; }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e4e2eb; border-radius: 11px; }
.word-table { width: 100%; min-width: 600px; border-collapse: collapse; }
.word-table th, .word-table td { padding: 12px 14px; border-bottom: 1px solid #eceaf1; text-align: left; }
.word-table th { background: #f7f6fb; color: #625e70; font-size: 13px; }
.word-table tr:last-child td { border-bottom: 0; }
.word-table .word-cell { font-family: Dhivehi, Arial, sans-serif; direction: rtl; text-align: right; font-size: 18px; }
.actions { display: flex; gap: 7px; flex-wrap: wrap; }

.badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-yes { background: #e3f8eb; color: #14783b; }
.badge-no { background: #f2f0f5; color: #666174; }

.pagination-wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pagination { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.page-btn { min-width: 38px; min-height: 38px; border: 1px solid #ddd9e8; background: #fff; border-radius: 9px; cursor: pointer; color: #514d60; font-weight: 700; }
.page-btn:hover:not(:disabled), .page-btn.active { border-color: #7367f0; background: #7367f0; color: #fff; }
.page-btn:disabled { opacity: .45; cursor: not-allowed; }
.page-info { color: #746f80; font-size: 13px; }

.empty-state { padding: 28px 12px; text-align: center; color: #777282; }
.status-message { min-height: 20px; color: #625e70; font-size: 14px; }
.status-message.error { color: #b82f30; }
.status-message.success { color: #14783b; }

.finder-results { display: grid; gap: 10px; margin-top: 16px; padding: 0; }
.finder-item { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; background: #faf9fc; border: 1px solid #e7e4ed; border-radius: 10px; }
.finder-word { font-family: Dhivehi, Arial, sans-serif; direction: rtl; text-align: right; font-size: 20px; overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-shell { width: min(100% - 20px, 1180px); }
  .app-shell { padding-top: 16px; }
  .card { padding: 14px; border-radius: 11px; }
  .form-row { grid-template-columns: 1fr; }
  .form-row .btn { width: 100%; }
  #textInput { min-height: 58vh; font-size: 18px; padding: 12px; }
  .finder-item { align-items: flex-start; flex-direction: column; }
  .pagination-wrap { align-items: stretch; flex-direction: column; }
  .pagination { justify-content: center; }
  .page-info { text-align: center; }
}

/* Integrated Blog theme bridge */
:root{
  --spell-bg:var(--shared-bg,#f5f5f8);
  --spell-panel:var(--shared-panel,#fff);
  --spell-text:var(--shared-text,#29263a);
  --spell-muted:var(--shared-muted,#6e6a7b);
  --spell-line:var(--shared-line,#e4e2eb);
  --spell-soft:var(--shared-soft,#efedff);
  --spell-accent:var(--shared-accent,#7367f0);
  --spell-accent-hover:var(--shared-accent-hover,#6255df);
}
body{background:var(--spell-bg);color:var(--spell-text)}
.page-header p,.legend,.status-message,.page-info,.empty-state{color:var(--spell-muted)}
.card,.suggestion-box,.input,.search-input,.select,#textInput,.page-btn{background:var(--spell-panel);color:var(--spell-text);border-color:var(--spell-line)}
.card{border-radius:var(--shared-radius,14px);box-shadow:var(--shared-shadow,0 5px 20px rgba(52,45,88,.05))}
.input,.search-input,.select,#textInput,.page-btn,.btn{border-radius:var(--shared-control-radius,10px)}
.input:focus,.search-input:focus,.select:focus,#textInput:focus{border-color:var(--spell-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--spell-accent) 18%,transparent)}
.btn-primary,.page-btn.active,.page-btn:hover:not(:disabled){background:var(--spell-accent);border-color:var(--spell-accent);color:#fff}
.btn-primary:hover{background:var(--spell-accent-hover)}
.suggestion-box li:hover,.suggestion-box li.selected{background:var(--spell-soft)}
html[data-theme="dark"] .suggestion-box{box-shadow:0 10px 30px rgba(0,0,0,.38)}
html[data-theme="dark"] .incorrect{color:#ff8071}
html[data-theme="dark"] .correct{color:#65d58b}
html[data-theme="dark"] .checked{color:#7fa0ff}
html[data-theme="dark"] .highlight{background:#665b25;color:#fff5c2}
html[data-theme="dark"] .btn-secondary{background:#302d39;color:#d2cddd}
html[data-theme="dark"] .btn-danger{background:#4b262a;color:#ffb4b6}
html[data-theme="dark"] .word-table th{background:#292632;color:#b9b4c5}
html[data-theme="dark"] .word-table th,html[data-theme="dark"] .word-table td{border-color:var(--spell-line)}

/* Unified polished controls */
.btn{
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn{border-radius:11px;min-height:42px;padding:10px 16px;font-weight:750}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:scale(.985)}
.btn-primary{background:var(--shared-accent);color:var(--shared-button-text,#fff);box-shadow:0 7px 18px color-mix(in srgb,var(--shared-accent) 20%,transparent)}
.btn-secondary{background:var(--shared-secondary-bg,var(--spell-panel));border:1px solid var(--shared-line);color:var(--shared-secondary-text,var(--spell-text))}
.btn-danger{background:#fff0f1;border:1px solid #fecaca;color:#b42318}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--spell-accent) 24%,transparent);outline-offset:2px}
html[data-theme="dark"] .btn-secondary{background:var(--shared-secondary-bg)!important;color:var(--shared-secondary-text)!important;border-color:var(--shared-line)!important}
html[data-theme="dark"] .btn-danger{background:#351a1e;color:#ffb9ba;border-color:#713840}


/* Authoritative suggestion popup positioning — matched to the proven standalone Spell Checker. */
@media(max-width:600px){.suggestion-box{max-width:calc(100vw - 16px);max-height:220px}}



/* Spell Checker press/repaint stability
   Keep the contenteditable visible while any page button is pressed. */
.spell-page-body .spell-shared-page button,
.spell-page-body .spell-shared-page .btn,
.spell-page-body .spell-shared-page .button{
  transform:none!important;
  translate:none!important;
}
.spell-page-body .spell-shared-page button:hover,
.spell-page-body .spell-shared-page button:active,
.spell-page-body .spell-shared-page .btn:hover,
.spell-page-body .spell-shared-page .btn:active,
.spell-page-body .spell-shared-page .button:hover,
.spell-page-body .spell-shared-page .button:active{
  transform:none!important;
  translate:none!important;
}
.spell-page-body #textInput{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  backface-visibility:visible;
}


/* Stable live spell highlighting. CSS Custom Highlights color text ranges without
   replacing contenteditable children, so typing never resets the caret or scroll. */
#textInput{
  height:auto!important;
  max-height:none!important;
  overflow-y:visible!important;
  overflow-x:visible!important;
  word-break:normal;
  overflow-wrap:anywhere;
}
#textInput::highlight(spell-incorrect),
::highlight(spell-incorrect){color:rgb(225,66,45)}
#textInput::highlight(spell-correct),
::highlight(spell-correct){color:#159447}
#textInput::highlight(spell-checked),
::highlight(spell-checked){color:#2855d9}
html[data-theme="dark"] #textInput::highlight(spell-incorrect),
html[data-theme="dark"] ::highlight(spell-incorrect){color:#ff8071}
html[data-theme="dark"] #textInput::highlight(spell-correct),
html[data-theme="dark"] ::highlight(spell-correct){color:#65d58b}
html[data-theme="dark"] #textInput::highlight(spell-checked),
html[data-theme="dark"] ::highlight(spell-checked){color:#7fa0ff}