/* Email Cleaner by SWC - Glow aesthetic without saying the word */
:root{
  --bg: #0b0f19;
  --card: rgba(255,255,255,0.06);
  --text: #e7ebff;
  --muted: #a9b1d6;
  --accent1: #ff6ec7;
  --accent2: #00e5ff;
  --ring: 0 0 40px rgba(255,110,199,0.35), 0 0 80px rgba(0,229,255,0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1000px 600px at 20% -10%, rgba(255,110,199,0.25), transparent 60%),
              radial-gradient(1000px 600px at 80% 110%, rgba(0,229,255,0.2), transparent 60%),
              linear-gradient(180deg, #0b0f19 0%, #0a0d16 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Apple Color Emoji, Segoe UI Emoji;
  line-height:1.5;
}

.app{max-width:1100px;margin:40px auto;padding:0 20px}

.hero{text-align:center;padding:10px 0 20px}
.hero h1{
  margin:0 0 8px 0;
  font-size:36px;
  letter-spacing:0.5px;
  text-shadow: 0 0 20px rgba(255,110,199,0.6), 0 0 30px rgba(0,229,255,0.35);
}
.tagline{color:var(--muted);margin:0}

.card{
  margin-top:20px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  box-shadow: var(--ring);
  backdrop-filter: blur(8px);
}

.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}

@media (max-width: 820px){
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
}

.pane{display:flex;flex-direction:column}
.pane-title{margin-bottom:8px;font-weight:600;opacity:0.9}
textarea{
  min-height:220px;
  border-radius:12px;
  padding:12px;
  resize:vertical;
  background:rgba(8,12,24,0.7);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text);
  outline:none;
  box-shadow: inset 0 0 18px rgba(0,229,255,0.15);
}
.hint{margin-top:6px;color:var(--muted);font-size:12px}
.stats{margin-top:8px;color:var(--muted);font-size:13px}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.2);
  background:linear-gradient(90deg, rgba(255,110,199,0.5), rgba(0,229,255,0.35));
  color:white;
  cursor:pointer;
  transition:transform .05s ease;
  box-shadow: 0 0 14px rgba(255,110,199,0.35), 0 0 20px rgba(0,229,255,0.25);
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{font-weight:700}
.btn.subtle{background:rgba(255,255,255,0.06)}

.footer{opacity:0.7;text-align:center;margin:28px 0 40px 0;font-size:13px}