/* ============ Homoglyph checker (homoglyph-checker/index.php) ============ */
.hg-tabs{ display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--cc-border); margin:20px 0 20px; }
.hg-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  padding:10px 16px; font-weight:600; font-size:.95rem; color:var(--cc-text-muted);
  border-bottom:3px solid transparent; margin-bottom:-1px; border-radius:var(--cc-radius-sm) var(--cc-radius-sm) 0 0;
}
.hg-tab:hover{ color:var(--cc-primary); }
.hg-tab[aria-selected="true"]{ color:var(--cc-primary); border-bottom-color:var(--cc-primary); }
.hg-tab:focus-visible, .hg-btn:focus-visible, .hg-chip:focus-visible, .hg-glyph-copy:focus-visible, .hg-glyph a:focus-visible{ outline:2px solid var(--cc-primary); outline-offset:2px; }
.hg-panel[hidden]{ display:none; }

.hg-label{ display:block; font-weight:600; margin-bottom:6px; color:var(--cc-text); }
.hg-field{
  width:100%; box-sizing:border-box; padding:12px 14px; font-size:1.05rem; line-height:1.5;
  font-family:system-ui,"Segoe UI","Noto Sans","Noto Sans Symbols 2",sans-serif;
  color:var(--cc-text); background:var(--cc-surface);
  border:1px solid var(--cc-border); border-radius:var(--cc-radius-md); resize:vertical;
}
.hg-field:focus{ outline:none; border-color:var(--cc-primary); box-shadow:0 0 0 3px rgba(79,70,229,.15); }
textarea.hg-field{ min-height:110px; }

.hg-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.hg-hint{ color:var(--cc-text-muted); font-size:.85rem; margin-right:4px; }
.hg-chip{
  appearance:none; cursor:pointer; background:var(--cc-surface-2); color:var(--cc-text);
  border:1px solid var(--cc-border); border-radius:999px; padding:4px 12px; font-size:.85rem;
}
.hg-chip:hover{ border-color:var(--cc-primary); color:var(--cc-primary); }
.hg-btn{
  appearance:none; cursor:pointer; border:1px solid var(--cc-primary); background:var(--cc-primary); color:#fff;
  padding:7px 16px; border-radius:var(--cc-radius-sm); font-weight:600; font-size:.9rem;
}
.hg-btn:hover{ background:var(--cc-primary-dark); border-color:var(--cc-primary-dark); }
.hg-btn--ghost{ background:var(--cc-surface); color:var(--cc-primary); }
.hg-btn--ghost:hover{ background:var(--cc-surface-2); color:var(--cc-primary-dark); }
.hg-check{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; color:var(--cc-text); cursor:pointer; }

.hg-out{ margin-top:22px; }
.hg-empty{ padding:22px; text-align:center; color:var(--cc-text-muted); border:1px dashed var(--cc-border); border-radius:var(--cc-radius-md); }

.hg-status{
  display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:var(--cc-radius-md);
  border:1px solid var(--cc-border); background:var(--cc-surface-2); margin-bottom:18px;
}
.hg-status strong{ display:block; }
.hg-status--ok{ background:#ecfdf5; border-color:#a7f3d0; }
.hg-status--info{ background:#eff6ff; border-color:#bfdbfe; }
.hg-status--warn{ background:#fffbeb; border-color:#fde68a; }
.hg-status--bad{ background:#fef2f2; border-color:#fecaca; }

.hg-h{ font-size:1.05rem; font-weight:700; margin:24px 0 10px; }
.hg-text{
  white-space:pre-wrap; overflow-wrap:anywhere; padding:14px 16px; font-size:1.25rem; line-height:1.9;
  border:1px solid var(--cc-border); border-radius:var(--cc-radius-md); background:var(--cc-surface);
  font-family:system-ui,"Segoe UI","Noto Sans","Noto Sans Symbols 2",sans-serif;
}
.hg-ch{ border-radius:4px; padding:1px 1px; cursor:help; }
.hg-sev-high{ background:rgba(239,68,68,.22); /*box-shadow:inset 0 -2px 0 #ef4444;*/ }
.hg-sev-medium{ background:rgba(245,158,11,.25); /*box-shadow:inset 0 -2px 0 #f59e0b;*/ }
.hg-sev-low{ background:rgba(59,130,246,.16); /*box-shadow:inset 0 -2px 0 #3b82f6;*/ }
.hg-wordbox{
  border:1.5px dashed #ef4444; border-radius:7px; padding:1px 4px; margin:0 1px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hg-inv{
  display:inline-block; font-size:.7rem; line-height:1.3; padding:0 5px; margin:0 1px; vertical-align:middle;
  border-radius:4px; background:#ef4444; color:#fff; font-family:ui-monospace,Menlo,Consolas,monospace; cursor:help;
}
.hg-inv--soft{ background:#f59e0b; }

.hg-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:.82rem; color:var(--cc-text-muted); }
.hg-legend span{ display:inline-flex; align-items:center; gap:6px; }
.hg-swatch{ width:14px; height:14px; border-radius:4px; display:inline-block; }

.hg-tablewrap{ overflow-x:auto; border:1px solid var(--cc-border); border-radius:var(--cc-radius-md); }
.hg-table{ width:100%; border-collapse:collapse; min-width:560px; }
.hg-table th{
  text-align:left; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  color:var(--cc-text-muted); background:var(--cc-border); padding:10px 12px;
}
.hg-table td{ padding:10px 12px; border-top:1px solid var(--cc-border); vertical-align:middle; }
.hg-table tbody tr:nth-child(even){ background:rgba(0,0,0,.03); }
.hg-big{ font-size:1.6rem; line-height:1; }
.hg-muted{ color:var(--cc-text-muted); font-size:.82rem; }
.hg-table code, .hg-code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem; }
.hg-badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.hg-badge--high{ background:#fee2e2; color:#991b1b; }
.hg-badge--medium{ background:#fef3c7; color:#92400e; }
.hg-badge--low{ background:#dbeafe; color:#1e40af; }

.hg-words{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.hg-word{ border:1px solid var(--cc-border); border-radius:var(--cc-radius-md); padding:12px 14px; background:var(--cc-surface); }
.hg-word .hg-big{ display:block; margin-bottom:6px; overflow-wrap:anywhere; }

.hg-clean{ position:relative; }
.hg-clean .hg-field{ min-height:70px; }

.hg-cmp{ display:grid; gap:14px; grid-template-columns:1fr 1fr; }
@media (max-width:700px){ .hg-cmp{ grid-template-columns:1fr; } }

.hg-group{ border:1px solid var(--cc-border); border-radius:var(--cc-radius-md); padding:14px 16px; margin-bottom:14px; background:var(--cc-surface); }
.hg-group h3{ font-size:1rem; margin:0 0 10px; }
.hg-glyphs{ display:flex; flex-wrap:wrap; gap:8px; }
.hg-glyph{
  text-align:center; min-width:70px; padding:6px 8px;
  border:1px solid var(--cc-border); border-radius:var(--cc-radius-sm); background:var(--cc-surface-2); color:var(--cc-text);
}
.hg-glyph:hover{ border-color:var(--cc-primary); background:#fff; box-shadow:var(--cc-shadow-hover); }
.hg-glyph-copy{ appearance:none; display:block; width:100%; background:none; border:none; cursor:pointer; padding:4px 0; color:inherit; }
.hg-glyph-copy .hg-big{ display:block; font-family:system-ui,"Segoe UI","Noto Sans","Noto Sans Symbols 2",sans-serif; }
.hg-glyph small{ display:block; font-size:.66rem; color:var(--cc-text-muted); margin-top:2px; font-family:ui-monospace,Menlo,Consolas,monospace; }
.hg-glyph small a{ color:var(--cc-primary); text-decoration:none; }
.hg-glyph small a:hover{ text-decoration:underline; }
.hg-glyph--hit{ border-color:var(--cc-primary); box-shadow:0 0 0 2px rgba(79,70,229,.2); }
.hg-sub{ font-size:.8rem; font-weight:600; color:var(--cc-text-muted); margin:12px 0 8px; }

.hg-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--cc-text); color:#fff;
  padding:8px 18px; border-radius:999px; font-size:.9rem; z-index:9999; opacity:0; pointer-events:none; transition:opacity .2s;
}
.hg-toast.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hg-toast{ transition:none; } }

.hg-about{ margin-top:34px; padding-top:6px; border-top:1px solid var(--cc-border); }
.hg-about h2{ font-size:1.55rem; margin:22px 0 8px; }
.hg-about h3{ font-size:1.02rem; margin:26px 0 10px; }
.hg-about p, .hg-about li{ line-height:1.65; }
.hg-steps{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin:14px 0 0; padding:0; list-style:none; counter-reset:hgstep; }
.hg-steps li{
  counter-increment:hgstep; position:relative; padding:14px 16px 14px 52px; border:1px solid var(--cc-border);
  border-radius:var(--cc-radius-md); background:var(--cc-surface-2); margin:0;
}
.hg-steps li::before{
  content:counter(hgstep); position:absolute; left:14px; top:14px; width:26px; height:26px; border-radius:50%;
  background:var(--cc-primary); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center;
}
.hg-steps strong{ display:block; margin-bottom:2px; }

.hg-risk{ display:grid; gap:14px; margin-top:12px; }
.hg-risk-card{
  border:1px solid var(--cc-border); border-left-width:6px; border-radius:var(--cc-radius-md);
  padding:16px 18px; background:var(--cc-surface); box-shadow:var(--cc-shadow);
}
.hg-risk-card--high{ border-left-color:#ef4444; background:linear-gradient(90deg,#fef2f2 0,var(--cc-surface) 55%); }
.hg-risk-card--medium{ border-left-color:#f59e0b; background:linear-gradient(90deg,#fffbeb 0,var(--cc-surface) 55%); }
.hg-risk-card--low{ border-left-color:#3b82f6; background:linear-gradient(90deg,#eff6ff 0,var(--cc-surface) 55%); }
.hg-risk-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:8px; }
.hg-risk-head .hg-badge{ font-size:.88rem; padding:3px 14px; }
.hg-risk-head .hg-risk-tag{ font-size:.85rem; color:var(--cc-text-muted); }
.hg-risk-card p{ margin:0 0 8px; }
.hg-risk-card ul{ margin:0 0 10px; padding-left:20px; }
.hg-risk-card li{ margin-bottom:3px; }
.hg-risk-eg{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 12px; margin-top:4px;
  background:var(--cc-surface); border:1px dashed var(--cc-border); border-radius:var(--cc-radius-sm); font-size:.88rem; color:var(--cc-text-muted);
}
.hg-risk-eg .hg-big{ font-size:1.3rem; color:var(--cc-text); font-family:system-ui,"Segoe UI","Noto Sans","Noto Sans Symbols 2",sans-serif; }
.hg-defs{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.hg-def{ border:1px solid var(--cc-border); border-radius:var(--cc-radius-md); padding:12px 16px; background:var(--cc-surface); }
.hg-def strong{ display:block; margin-bottom:4px; }
.hg-def p{ margin:0; font-size:.92rem; }
.hg-note{ margin-top:16px; padding:12px 16px; border-radius:var(--cc-radius-md); background:var(--cc-surface-2); border:1px solid var(--cc-border); }
.hg-note p{ margin:0; }