/* ── Email Tone Checker v1.0 ── */
:root {
  --etc-primary: #4f6af0;
  --etc-radius:  12px;
  --etc-shadow:  0 2px 16px rgba(0,0,0,0.07);
}
.etc-wrap { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; max-width:820px; margin:0 auto; padding:0 16px 56px; color:#1a1a2e; }

/* Hero */
.etc-hero { text-align:center; padding:38px 24px 30px; background:linear-gradient(135deg,#f0f4ff 0%,#fff5fb 100%); border-radius:16px; border:1px solid #e3e8f5; margin-bottom:28px; }
.etc-hero-badge { display:inline-block; background:#e8f8f0; color:#0faa6e; font-size:0.75rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:4px 12px; border-radius:50px; margin-bottom:14px; }
.etc-hero h2 { font-size:1.85rem; font-weight:800; margin:0 0 10px; letter-spacing:-0.5px; }
.etc-hero p  { color:#5a6480; font-size:1rem; margin:0; line-height:1.6; }

/* Input */
.etc-label { display:block; font-size:0.88rem; font-weight:600; color:#444; margin-bottom:8px; }
.etc-textarea { width:100%; box-sizing:border-box; padding:14px 16px; border:2px solid #dde3ec; border-radius:var(--etc-radius); font-size:0.95rem; line-height:1.6; color:#1a1a2e; resize:vertical; outline:none; transition:border-color 0.18s,box-shadow 0.18s; font-family:inherit; }
.etc-textarea:focus { border-color:var(--etc-primary); box-shadow:0 0 0 3px rgba(79,106,240,0.1); }
.etc-input-meta { display:flex; justify-content:space-between; align-items:center; margin-top:10px; flex-wrap:wrap; gap:10px; }
.etc-word-count { font-size:0.8rem; color:#888; }

/* Buttons */
.etc-btn-primary { padding:11px 26px; background:var(--etc-primary); color:#fff; border:none; border-radius:50px; font-size:0.92rem; font-weight:700; cursor:pointer; transition:background 0.15s,transform 0.1s; }
.etc-btn-primary:hover:not(:disabled) { background:#3d58d8; transform:translateY(-1px); }
.etc-btn-primary:disabled { opacity:0.4; cursor:not-allowed; }
.etc-btn-ghost { padding:10px 20px; background:#fff; color:#555; border:2px solid #dde3ec; border-radius:50px; font-size:0.88rem; font-weight:500; cursor:pointer; transition:border-color 0.15s,color 0.15s; }
.etc-btn-ghost:hover { border-color:var(--etc-primary); color:var(--etc-primary); }

/* Results */
.etc-results { margin-top:32px; }
.etc-hidden  { display:none !important; }

/* Score cards */
.etc-scores-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:20px; }
.etc-score-card { padding:14px 16px; border-radius:10px; background:var(--etc-bg,#f8f9ff); border:1.5px solid #e3e8f5; text-align:center; transition:transform 0.12s; }
.etc-score-card--flagged { border-color:var(--etc-color); }
.etc-score-num  { display:block; font-size:2rem; font-weight:800; line-height:1; margin-bottom:4px; }
.etc-score-label { font-size:0.78rem; font-weight:600; color:#888; }

/* Verdict */
.etc-verdict { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-left:4px solid; border-radius:0 10px 10px 0; background:#f8f9ff; margin-bottom:24px; }
.etc-verdict-icon { font-size:1.5rem; flex-shrink:0; }
.etc-verdict strong { font-size:0.97rem; color:#1a1a2e; }
.etc-verdict-stat { font-size:0.85rem; color:#888; }

/* Section heading */
.etc-section-heading { font-size:1rem; font-weight:700; color:#1a1a2e; margin:24px 0 12px; padding-bottom:8px; border-bottom:2px solid #f0f2f8; }

/* Flags */
.etc-flag-section { margin-bottom:20px; }
.etc-flag-heading { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.etc-flag-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; position:relative; top:1px; }
.etc-flag-desc { font-size:0.8rem; color:#888; }
.etc-flag-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:#f8f9ff; border-left:3px solid; border-radius:0 8px 8px 0; margin-bottom:6px; flex-wrap:wrap; }
.etc-flag-word { font-size:0.8rem; font-weight:700; padding:2px 10px; border-radius:50px; white-space:nowrap; flex-shrink:0; }
.etc-flag-msg  { font-size:0.88rem; color:#2d3555; line-height:1.5; }
.etc-no-flags  { color:#0faa6e; font-weight:600; text-align:center; padding:16px; }

/* Rewrites */
.etc-rewrite-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#f8f9ff; border-radius:9px; margin-bottom:8px; flex-wrap:wrap; }
.etc-rewrite-from { font-size:0.88rem; font-weight:600; color:#e05a5a; background:#fdf0f0; padding:3px 10px; border-radius:50px; }
.etc-rewrite-arrow { color:#aab0cc; flex-shrink:0; }
.etc-rewrite-to { font-size:0.88rem; color:#0d5c3a; font-weight:500; }

/* Tips */
.etc-tip { font-size:0.9rem; color:#2d3555; line-height:1.6; padding:10px 14px 10px 18px; border-left:3px solid var(--etc-primary); background:#f4f6ff; border-radius:0 8px 8px 0; margin-bottom:8px; }

/* CTA */
.etc-cta-box { display:flex; align-items:center; gap:18px; background:linear-gradient(135deg,#1a1a2e 0%,#2d3555 100%); border-radius:16px; padding:24px 28px; margin:28px 0 16px; flex-wrap:wrap; }
.etc-cta-icon { font-size:2.2rem; flex-shrink:0; }
.etc-cta-text { flex:1; min-width:200px; }
.etc-cta-text strong { display:block; font-size:1rem; color:#fff; margin-bottom:4px; }
.etc-cta-text p { font-size:0.88rem; color:#b0b8d8; margin:0; line-height:1.5; }
.etc-btn-cta { display:inline-block; padding:12px 24px; background:#fff; color:#1a1a2e; border-radius:50px; font-size:0.9rem; font-weight:700; text-decoration:none; white-space:nowrap; transition:transform 0.12s,box-shadow 0.12s; flex-shrink:0; }
.etc-btn-cta:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.25); text-decoration:none; color:#1a1a2e; }

@media(max-width:600px){
  .etc-hero h2{font-size:1.45rem;}
  .etc-scores-row{grid-template-columns:repeat(2,1fr);}
  .etc-cta-box{flex-direction:column;text-align:center;}
  .etc-input-meta{flex-direction:column;align-items:stretch;}
  .etc-btn-primary{width:100%;text-align:center;}
}