#character-counter-tool {
  --cct-bg:#fbfaf7;--cct-card:#fff;--cct-text:#22252a;--cct-sub:#666d78;
  --cct-border:#dde1e7;--cct-accent:#3f6f66;--cct-accent-soft:#eef5f3;
  --cct-danger:#9a4d4d;--cct-shadow:0 8px 28px rgba(0,0,0,.06);
  box-sizing:border-box;max-width:900px;margin:0 auto;padding:28px;border-radius:20px;
  background:var(--cct-bg);color:var(--cct-text);line-height:1.7
}
#character-counter-tool[data-theme="dark"] {
  --cct-bg:#1f2227;--cct-card:#292d33;--cct-text:#f3f4f6;--cct-sub:#b8bec8;
  --cct-border:#414750;--cct-accent:#8fc1b7;--cct-accent-soft:#293b37;
  --cct-danger:#e39a9a;--cct-shadow:0 8px 28px rgba(0,0,0,.22)
}
#character-counter-tool,#character-counter-tool *{box-sizing:border-box}
#character-counter-tool [hidden]{display:none!important}
#character-counter-tool button,#character-counter-tool textarea{font:inherit}
#character-counter-tool .cct-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
#character-counter-tool .cct-brand,#character-counter-tool .cct-lead,#character-counter-tool .cct-note,#character-counter-tool .cct-local,#character-counter-tool .cct-feedback{margin:0}
#character-counter-tool .cct-brand{color:var(--cct-sub);font-size:13px;font-weight:700}
#character-counter-tool .cct-brand span{font-weight:400}
#character-counter-tool .cct-title{
  margin:4px 0 6px;
  padding:0;
  color:var(--cct-text);
  font-size:clamp(24px,3.2vw,30px);
  font-weight:600;
  line-height:1.4;
}
#character-counter-tool .cct-lead{color:var(--cct-sub)}
#character-counter-tool .cct-theme,#character-counter-tool .cct-tab,#character-counter-tool .cct-actions button{border:1px solid var(--cct-border);border-radius:10px;background:var(--cct-card);color:var(--cct-text);cursor:pointer;transition:.2s ease}
#character-counter-tool .cct-theme{flex:0 0 auto;padding:8px 12px}
#character-counter-tool button:hover{opacity:.84}
#character-counter-tool button:focus-visible,#character-counter-tool textarea:focus-visible,#character-counter-tool summary:focus-visible{outline:3px solid rgba(63,111,102,.28);outline-offset:2px}
#character-counter-tool .cct-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;padding:5px;border:1px solid var(--cct-border);border-radius:13px;background:var(--cct-card)}
#character-counter-tool .cct-tab{padding:11px 14px;border:0;background:transparent;font-weight:700}
#character-counter-tool .cct-tab.is-active{background:var(--cct-accent);color:#fff}
#character-counter-tool .cct-input-wrap label{display:block;margin-bottom:8px;font-weight:700}
#character-counter-tool textarea{display:block;width:100%;min-height:280px;resize:vertical;padding:16px;border:1px solid var(--cct-border);border-radius:14px;background:var(--cct-card);color:var(--cct-text);line-height:1.75;box-shadow:var(--cct-shadow)}
#character-counter-tool textarea::placeholder{color:var(--cct-sub);opacity:.75}
#character-counter-tool .cct-panel{margin-top:18px}
#character-counter-tool .cct-results{display:grid;gap:14px}
#character-counter-tool .cct-results-ja{grid-template-columns:repeat(3,1fr)}
#character-counter-tool .cct-results-en{grid-template-columns:repeat(2,1fr)}
#character-counter-tool .cct-result-card{padding:18px;border:1px solid var(--cct-border);border-radius:14px;background:var(--cct-card);box-shadow:var(--cct-shadow)}
#character-counter-tool .cct-word-card{border-color:var(--cct-accent)}
#character-counter-tool .cct-result-label{display:block;margin-bottom:6px;color:var(--cct-sub);font-size:13px;font-weight:700}
#character-counter-tool .cct-result-card strong{display:flex;align-items:baseline;gap:5px;color:var(--cct-text);font-size:clamp(28px,5vw,40px);line-height:1.2}
#character-counter-tool .cct-result-card small{font-size:14px;font-weight:600;color:var(--cct-sub)}
#character-counter-tool .cct-result-sub{display:block;margin-top:7px;color:var(--cct-sub);font-size:12px}
#character-counter-tool .cct-note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--cct-accent-soft);color:var(--cct-sub);font-size:13px}
#character-counter-tool .cct-actions{display:flex;gap:10px;margin-top:18px}
#character-counter-tool .cct-actions button{padding:10px 16px;font-weight:700}
#character-counter-tool .cct-copy{border-color:var(--cct-accent)!important;background:var(--cct-accent)!important;color:#fff!important}
#character-counter-tool .cct-clear{color:var(--cct-danger)!important}
#character-counter-tool .cct-feedback{min-height:1.7em;margin-top:8px;color:var(--cct-sub);font-size:13px}
#character-counter-tool .cct-help{margin-top:18px;border-top:1px solid var(--cct-border);padding-top:16px}
#character-counter-tool .cct-help summary{cursor:pointer;font-weight:700}
#character-counter-tool .cct-help div{padding-top:8px;color:var(--cct-sub);font-size:14px}
#character-counter-tool .cct-help p{margin:8px 0}
#character-counter-tool .cct-local{margin-top:18px;text-align:center;color:var(--cct-sub);font-size:12px}
@media(max-width:700px){
  #character-counter-tool{padding:20px 14px;border-radius:14px}
  #character-counter-tool .cct-header{flex-direction:column;gap:12px}
  #character-counter-tool .cct-theme{align-self:flex-end}
  #character-counter-tool .cct-results-ja,#character-counter-tool .cct-results-en{grid-template-columns:1fr}
  #character-counter-tool textarea{min-height:240px}
  #character-counter-tool .cct-actions{flex-direction:column}
  #character-counter-tool .cct-actions button{width:100%}
}