mark{ background:#ffeb3b; color:inherit; padding:0 2px; border-radius:3px; }
:root{--bg:#f5f7fb;--panel:#fff;--panel2:#f1f3f7;--text:#111827;--muted:#6b7280;--border:#e5e7eb;--accent:#2563eb;--danger:#b00020;--shadow:0 10px 30px rgba(0,0,0,.06);--radius:14px}
html[data-theme="dark"]{--bg:#0b1220;--panel:#0f172a;--panel2:#0b1020;--text:#e5e7eb;--muted:#94a3b8;--border:rgba(255,255,255,.10);--accent:#60a5fa;--danger:#ff6b7a;--shadow:0 12px 34px rgba(0,0,0,.35)}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.topbar{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;white-space:nowrap}
.brand .dot{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.searchwrap{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
.search{width:min(720px,100%);display:flex;align-items:center;background:var(--panel2);border:1px solid var(--border);border-radius:14px;padding:10px 12px}
.search input{width:100%;border:0;outline:none;background:transparent;color:var(--text);font-size:18px;padding:6px 10px}
.actions{display:flex;align-items:center;gap:10px}
.iconbtn{border:1px solid var(--border);background:var(--panel2);color:var(--text);width:42px;height:42px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.iconbtn:hover{background:var(--panel)}
.page{max-width:1100px;margin:0 auto;padding:22px 16px 70px}
.charbar{margin:10px auto 0;width:min(720px,100%);display:flex;gap:8px;flex-wrap:wrap}
.chbtn{
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 10px 16px;   /* bigger */
  border-radius: 14px;
  font-size: 17px;      /* bigger letters */
  cursor: pointer;
  min-width: 52px;      /* more “button” feel */
}
.chbtn:hover{border-color:var(--accent)}
.card{width:min(860px,100%);margin:18px auto 0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.title{font-size:46px;font-weight:900;margin:0 0 12px}
.meta{color:var(--muted);font-size:14px;margin-bottom:10px}
.result{background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.20);border-radius:12px;padding:14px;font-size:18px;line-height:1.45;white-space:normal}
html[data-theme="dark"] .result{background:rgba(96,165,250,.10);border:1px solid rgba(96,165,250,.22)}
.error{color:var(--danger);border-color:rgba(255,0,64,.25)!important;background:rgba(255,0,64,.06)!important}
.row{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:6px 0;border-bottom:1px dashed var(--border)}
.row:last-child{border-bottom:0}
.lbl{color:var(--muted);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.val{font-size:18px}
.langline{
  width: min(860px, 100%);
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 18px;
  white-space: pre-line;
}
.mode{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 14px;
  margin-right: 8px;
  outline: none;
}
.modebar{
  width: min(860px, 100%);
  margin: 14px auto 0;
  display: flex;
  justify-content: center;
}
.brand{ font-size: 22px; font-weight: 800; }
.flag{ width: 66px; height: 40px; border-radius: 6px; object-fit: cover; }

.dictbar{
  width: min(720px, 100%);
  margin: 0 auto 10px;
  display: flex;
  justify-content: flex-start;
}

.search-area{
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.searchstack{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px;
  display: flex;
  justify-content: center;
}

#searchForm{
  width: min(820px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mode{
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 18px;
}

.searchline{
  display: flex;
  gap: 12px;
}

.searchline input{
  flex: 1;
  border-radius: 16px;
  padding: 16px 16px;
  font-size: 22px;
  border: 1px solid var(--border);
  background: var(--panel2);
  outline: none;
}

.searchbtn{
  width: 74px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel2);
  cursor: pointer;
}
.page{ padding-top: 2px; }
.charbar{ 
  justify-content: flex-start;   /* вместо center */
  margin-left: 125px;    
  margin-top: 2px;
}
.charbar{
  width: min(820px, 100%);     /* как у формы поиска */
  margin: 10px auto 0;         /* тот же auto-центр контейнера */
  display: grid;
  grid-template-columns: repeat(auto-fit, 56px);
  gap: 12px;
  justify-content: start;      /* левое выравнивание внутри контейнера */
}
.linkbtn{
  display:inline-block;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
}
.linkbtn:hover{ border-color: var(--accent); }

@media (max-width:560px){
  .topbar-inner{grid-template-columns:1fr auto;grid-template-areas:"brand actions" "search search"}
  .brand{grid-area:brand}
  .actions{grid-area:actions;justify-self:end}
  .searchwrap{grid-area:search}
  .title{font-size:38px}
  .row{grid-template-columns:90px 1fr}
}