:root{--bg:#EEF3FF;--card:#fff;--ink:#101828;--muted:#667085;--primary:#3B82F6;--primary-contrast:#fff;--border:#E5E7EB;--shadow:0 10px 25px -12px rgba(16,24,40,.15);--radius:14px;--radius-sm:10px;--space:clamp(16px,2.5vw,24px)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;line-height:1.55}#email-subject-tester .container{max-width:1100px;margin:0 auto;padding:calc(var(--space) * 1.5) var(--space)}.header{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:calc(var(--space) * 1.1)}.title{font-size:clamp(26px, 2.8vw, 36px);font-weight:800;letter-spacing:.2px;margin-bottom:6px}.subtitle{text-align:center;color:var(--muted);max-width:760px;margin:0 auto}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width:1024px){.grid{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}.card-header{padding:16px 16px 0 16px}.card-title{font-size:1.1rem;font-weight:800;color:#0b1220;display:flex;align-items:center;justify-content:space-between}.card-content{padding:16px}.input-group{margin-bottom:16px}.label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;color:#374151}.textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:.98rem;transition:box-shadow .15s ease,border-color .15s ease;resize:vertical}.textarea:focus{outline:2px solid #DBEAFE;border-color:#93C5FD}.char-info{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--muted)}.copy-btn{background:#fff;border:1px solid var(--border);color:#4b5563;cursor:pointer;padding:8px 10px;border-radius:10px;font-weight:700;transition:filter .2s ease,transform .06s ease}.copy-btn:hover{filter:brightness(1.03)}.copy-btn:active{transform:translateY(1px)}.badge{display:inline-flex;align-items:center;padding:6px 10px;font-size:12px;font-weight:800;border-radius:9999px;letter-spacing:.3px;background:#E8F0FF;color:#1D4ED8}.badge.success{background:#DCFCE7;color:#065F46}.badge.warning{background:#FEF3C7;color:#92400E}.badge.danger{background:#FEE2E2;color:#991B1B}.progress-container{margin-bottom:12px}.progress-bar{width:100%;height:12px;background:#EDF2F7;border-radius:8px;overflow:hidden;border:1px solid var(--border)}.progress-fill{height:100%;transition:width .35s ease;border-radius:8px}.progress-fill.success{background:linear-gradient(90deg,#10b981,#059669)}.progress-fill.warning{background:linear-gradient(90deg,#f59e0b,#d97706)}.progress-fill.danger{background:linear-gradient(90deg,#ef4444,#dc2626)}.device-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.device-check{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#1f2937}.status-icon{width:16px;height:16px;border-radius:6px}.status-icon.success{background:#10b981;position:relative}.status-icon.success::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);color:#fff;font-size:10px;font-weight:800}.status-icon.warning{background:#f59e0b;position:relative}.status-icon.warning::after{content:'!';position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);color:#fff;font-size:10px;font-weight:800}.preview-section{margin-bottom:12px}.preview-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.95rem;font-weight:700}.preview-badge{font-size:12px;padding:2px 8px;background:#E0E7FF;color:#3730A3;border-radius:9999px}.preview-badge.truncated{background:#F3F4F6;color:#374151}.preview-box{padding:12px;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:10px;word-break:break-word}.variants-list{display:flex;flex-direction:column;gap:12px}.variant-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--border);border-radius:12px;background:#fff}.variant-content{flex:1}.variant-text{font-size:.98rem;font-weight:700;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variant-stats{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--muted)}.variant-fit{display:flex;align-items:center;gap:4px}.warning-icon{color:#f59e0b}.risk-level{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:.95rem}.risk-terms-title{font-size:.95rem;font-weight:700;margin-bottom:6px}.risk-terms{display:flex;flex-wrap:wrap;gap:8px}.risk-term{padding:4px 8px;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:8px;font-size:.85rem}.lightbulb-icon{color:var(--primary)}.suggestions-list{list-style:none}.suggestion-item{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;font-size:.98rem}.suggestion-item:last-child{margin-bottom:0}.suggestion-bullet{width:8px;height:8px;background:var(--primary);border-radius:50%;margin-top:6px;flex-shrink:0}.placeholder-card{grid-column:1 / -1;background:linear-gradient(180deg,#F8FAFF 0%,#FFFFFF 45%)}.placeholder-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;text-align:center}.placeholder-icon{font-size:40px;margin-bottom:12px}.placeholder-content h2{font-size:1.25rem;font-weight:800;margin-bottom:6px;color:#111827}.placeholder-content p{color:var(--muted)}.toast{position:fixed;top:20px;right:20px;background:#10b981;color:#fff;padding:12px 14px;border-radius:10px;box-shadow:var(--shadow);z-index:1000}.tools-section{margin-top:24px}.how-wrap{max-width:1100px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.how-wrap h2{font-size:20px;font-weight:800;margin-bottom:8px}.how-wrap h3{font-size:16px;font-weight:800;margin-top:14px;margin-bottom:6px;color:#111}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px}.tool-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:12px;text-decoration:none;color:inherit;transition:transform .08s ease,box-shadow .18s ease,border-color .18s ease}.tool-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:#E0E5EC}.tool-emoji{font-size:22px}.tool-card h4{font-size:14px;font-weight:800}.tool-card p{font-size:13px;color:#667085}.tool-cta{margin-top:auto;font-weight:800;color:#1D4ED8}@media (max-width:768px){.device-checks{grid-template-columns:1fr}.card-content{padding:12px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:540px){.tool-grid{grid-template-columns:1fr}}