/* Scoped tool styles only */
#po-tool-word-counter [hidden]{display:none !important;}

#po-tool-word-counter .po-wc{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--elev) 94%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display:grid;
  gap:16px;
  position: relative;
}

/* Backdrop fallback when <dialog> showModal isn't available */
#po-tool-word-counter .po-wc[data-po-wc-modal-open="1"]::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.6);
  z-index: 9998;
}

#po-tool-word-counter .po-wc__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

#po-tool-word-counter .po-wc__title{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width: min(520px, 100%);
}

#po-tool-word-counter .po-wc__h{
  margin:0;
  font-size: 1.22rem;
  line-height:1.2;
}

#po-tool-word-counter .po-wc__sub{
  margin:4px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

#po-tool-word-counter .po-wc__head-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:flex-end;
  gap:10px;
}

#po-tool-word-counter .po-wc__preset{
  min-width: 260px;
}

#po-tool-word-counter .po-wc__banner-wrap{
  display:grid;
  gap:10px;
}

#po-tool-word-counter .po-wc__privacy-hint{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size: 0.92rem;
  padding: 10px 12px;
  border: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--bg) 90%, transparent);
}

#po-tool-word-counter .po-wc__layout{
  display:grid;
  gap:16px;
}

@media (min-width: 920px){
  #po-tool-word-counter .po-wc__layout{
    grid-template-columns: 1.15fr 0.85fr;
    align-items:start;
  }
}

#po-tool-word-counter textarea[data-po-wc="textarea"]{
  min-height: 260px;
}

#po-tool-word-counter .po-wc__actions,
#po-tool-word-counter .po-wc__quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#po-tool-word-counter .po-wc__quick{
  align-items:center;
}

#po-tool-word-counter .po-wc__file-btn{
  cursor:pointer;
}

#po-tool-word-counter .po-wc__busy{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
}

#po-tool-word-counter .po-wc__analyze{
  white-space:nowrap;
}

#po-tool-word-counter .po-wc__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#po-tool-word-counter .po-wc__stats{
  display:grid;
  gap:12px;
}

#po-tool-word-counter .po-wc__limit-card{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  display:grid;
  gap:10px;
}

#po-tool-word-counter .po-wc__limit-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

#po-tool-word-counter .po-wc__limit-label{
  font-weight: 800;
  font-size: 0.98rem;
}

#po-tool-word-counter .po-wc__limit-meta{
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

#po-tool-word-counter .po-wc__dot{
  margin:0 6px;
}

#po-tool-word-counter .po-wc__limit-remaining{
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  text-align:right;
  min-width: 120px;
}

#po-tool-word-counter .po-wc__limit-msg{
  color: var(--muted);
  font-size: 0.92rem;
}

#po-tool-word-counter .po-wc__progress{
  height: 12px;
}

#po-tool-word-counter .po-wc__grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

#po-tool-word-counter .po-wc__stat{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  display:grid;
  gap:6px;
  min-height: 86px;
}

#po-tool-word-counter .po-wc__stat-label{
  color: var(--muted);
  font-size: 0.9rem;
}

#po-tool-word-counter .po-wc__stat-value{
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

#po-tool-word-counter .po-wc__keywords{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  display:grid;
  gap:10px;
}

#po-tool-word-counter .po-wc__kw-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

#po-tool-word-counter .po-wc__kw-title{
  font-weight: 900;
}

#po-tool-word-counter .po-wc__kw-sub{
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

#po-tool-word-counter .po-wc__kw-list{
  margin:0;
  padding:0 0 0 18px;
  display:grid;
  gap:6px;
  color: var(--fg);
}

#po-tool-word-counter .po-wc__kw-empty{
  color: var(--muted);
}

#po-tool-word-counter .po-wc__toasts{
  display:grid;
  gap:10px;
}

#po-tool-word-counter .po-wc__toast{
  padding: 12px 14px;
}

/* Dialog: ensure it becomes visible even if site CSS messes with <dialog> */
#po-tool-word-counter .po-wc__dialog{ display:none; }
#po-tool-word-counter .po-wc__dialog[open]{ display:block; }

#po-tool-word-counter .po-wc__dialog{
  width: min(980px, calc(100% - 24px));
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 0;
  background: color-mix(in oklab, var(--card) 92%, var(--bg));
  color: var(--fg);
  box-shadow: var(--shadow);
  position: fixed;
  inset: 12px;
  margin: auto;
  max-height: calc(100vh - 24px);
  overflow: auto;
  z-index: 9999;
}

#po-tool-word-counter .po-wc__dialog::backdrop{
  background: rgba(2,6,23,0.6);
}

#po-tool-word-counter .po-wc__dialog-inner{
  display:grid;
  gap:14px;
  padding: 14px;
}

#po-tool-word-counter .po-wc__dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

#po-tool-word-counter .po-wc__dialog-title{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

#po-tool-word-counter .po-wc__dialog-h{
  font-weight: 1000;
  font-size: 1.05rem;
}

#po-tool-word-counter .po-wc__dialog-sub{
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 2px;
}

#po-tool-word-counter .po-wc__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  padding: 8px;
  border-radius: 999px;
}

#po-tool-word-counter .po-wc__tab{
  appearance:none;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor:pointer;
  min-height: 44px;
}

#po-tool-word-counter .po-wc__tab:hover{
  background: color-mix(in oklab, var(--elev) 90%, transparent);
  color: var(--fg);
}

#po-tool-word-counter .po-wc__tab.is-active{
  background: color-mix(in oklab, var(--brand2) 16%, var(--bg));
  border-color: color-mix(in oklab, var(--brand2) 30%, var(--border));
  color: var(--fg);
}

#po-tool-word-counter .po-wc__panes{
  display:grid;
  gap:12px;
}

#po-tool-word-counter .po-wc__pane{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-radius: 16px;
  padding: 14px;
  display:grid;
  gap:12px;
}

#po-tool-word-counter .po-wc__pane-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items:start;
}

#po-tool-word-counter .po-wc__btn-inline{
  justify-self:start;
}

#po-tool-word-counter .po-wc__range{
  display:flex;
  gap:12px;
  align-items:center;
}

#po-tool-word-counter .po-wc__kw-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

#po-tool-word-counter .po-wc__kw-tablewrap{
  display:grid;
  gap:10px;
}

#po-tool-word-counter .po-wc__kw-tablehint{
  color: var(--muted);
  font-size: 0.92rem;
}

#po-tool-word-counter .po-wc__table{
  width:100%;
  border-collapse: collapse;
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  background: color-mix(in oklab, var(--bg) 90%, transparent);
}

#po-tool-word-counter .po-wc__table th,
#po-tool-word-counter .po-wc__table td{
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
  text-align:left;
  font-variant-numeric: tabular-nums;
}

#po-tool-word-counter .po-wc__table th{
  background: color-mix(in oklab, var(--elev) 90%, transparent);
  font-size: 0.9rem;
}

#po-tool-word-counter .po-wc__td-muted{
  color: var(--muted);
}

#po-tool-word-counter .po-wc__clean-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#po-tool-word-counter .po-wc__undo{
  display:grid;
  gap:8px;
  margin-top: 6px;
}

#po-tool-word-counter .po-wc__undo-meta{
  color: var(--muted);
  font-size: 0.92rem;
}

#po-tool-word-counter .po-wc__dialog-foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding-top: 2px;
}

#po-tool-word-counter .po-wc__privacy-list{
  display:grid;
  gap:10px;
}

#po-tool-word-counter .po-wc__privacy-item{
  border: 1px dashed color-mix(in oklab, var(--border) 82%, transparent);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
  display:grid;
  gap:6px;
}

#po-tool-word-counter .po-wc__privacy-k{
  font-weight: 900;
}

#po-tool-word-counter .po-wc__privacy-v{
  color: var(--muted);
}