:root {
  --bg: #0f0f14;
  --bg-card: #1a1a24;
  --bg-input: #252536;
  --border: #2e2e42;
  --text: #e4e4ec;
  --text-dim: #8888a0;
  --text-muted: #5c5c72;
  --primary: #7c5cfc;
  --primary-glow: rgba(124,92,252,0.25);
  --primary-hover: #6a4ae8;
  --danger: #f87171;
  --success: #4ade80;
  --radius: 12px;
  --radius-sm: 8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.container{max-width:640px;margin:0 auto;padding:16px 16px 40px}

/* Header */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0 24px;border-bottom:1px solid var(--border);margin-bottom:24px;
}
.logo-area{display:flex;align-items:center;gap:10px}
.logo-icon{font-size:28px}
.logo-text{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-0.5px}
.header-right{display:flex;gap:6px}
.lang-btn{
  padding:5px 12px;border:1px solid var(--border);border-radius:16px;
  font-size:12px;font-weight:600;cursor:pointer;
  background:var(--bg-card);color:var(--text-dim);transition:all .15s;
}
.lang-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.lang-btn:hover:not(.active){border-color:var(--primary);color:var(--primary)}

/* Main Section */
.main-section{
  background:var(--bg-card);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;border:1px solid var(--border);
}
.email-display{
  display:flex;gap:8px;margin-bottom:14px;
}
.email-input{
  flex:1;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:15px;font-family:monospace;background:var(--bg-input);color:var(--success);
  outline:none;letter-spacing:0.5px;
}
.email-input:focus{border-color:var(--primary)}
.icon-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-input);color:var(--text-dim);cursor:pointer;transition:all .15s;
}
.icon-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  flex:1;min-width:80px;padding:10px 16px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;
  text-align:center;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);box-shadow:0 0 16px var(--primary-glow)}
.btn-secondary{background:var(--bg-input);color:var(--text-dim);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--border);color:var(--text)}
.countdown-row{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  font-size:13px;
}
.countdown-label{color:var(--text-dim)}
.countdown-time{font-weight:700;color:var(--primary);font-family:monospace;font-size:15px}
.countdown-time.warn{color:var(--danger)}

/* Inbox */
.inbox-section{margin-bottom:20px}
.inbox-title{
  font-size:15px;font-weight:600;color:var(--text-dim);
  margin-bottom:12px;text-transform:uppercase;letter-spacing:1px;
}
.mail-item{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all .15s;
}
.mail-item:hover{border-color:var(--primary);background:#1e1e2c}
.mail-item .mail-sender{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.mail-item .mail-subject{font-size:13px;color:var(--primary);margin-bottom:4px}
.mail-item .mail-preview{font-size:12px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-item .mail-time{font-size:11px;color:var(--text-muted);margin-top:6px}
.mail-item.expanded .mail-preview{white-space:normal;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.empty-state{
  text-align:center;padding:48px 20px;color:var(--text-muted);font-size:14px;
}

/* Footer */
.footer{text-align:center;padding:24px 0}
.footer-links{text-align:center;margin:8px 0}
.footer-link{color:var(--primary);text-decoration:none;font-size:12px}
.footer-link:hover{text-decoration:underline}
.footer-sep{color:var(--text-muted);font-size:11px}
.footer-legal{text-align:center;font-size:11px;color:var(--text-muted);margin-top:4px}
.footer-legal a{color:var(--text-dim)}
.footer-legal a:hover{color:var(--primary)}
.footer-text{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.footer-copy{font-size:11px;color:var(--text-muted)}

/* Toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--primary);color:#fff;padding:10px 24px;border-radius:20px;
  font-size:13px;font-weight:600;opacity:0;transition:opacity .3s;z-index:100;
  pointer-events:none;
}
.toast.show{opacity:1}

/* Mobile */
@media(max-width:480px){
  .logo-text{font-size:17px}
  .main-section{padding:18px 14px}
  .email-input{font-size:13px;padding:10px 12px}
  .btn{font-size:12px;padding:9px 12px}
  .countdown-time{font-size:14px}
}