:root {
  --bg-body: #080c14;
  --bg-card: #0d1520;
  --bg-card-alt: #111b2b;
  --bg-input: #0a1018;
  --border: #162033;
  --border-hover: #1e3355;
  --accent: #00d4ff;
  --accent-dim: rgba(0,212,255,0.12);
  --accent-mid: rgba(0,212,255,0.25);
  --accent-hover: #33ddff;
  --text: #d4dae5;
  --text-sub: #8a95a8;
  --text-dim: #556178;
  --red: #ff4d6a;
  --red-dim: rgba(255,77,106,0.12);
  --red-mid: rgba(255,77,106,0.3);
  --amber: #ffb020;
  --amber-dim: rgba(255,176,32,0.12);
  --amber-mid: rgba(255,176,32,0.3);
  --blue: #4d9fff;
  --blue-dim: rgba(77,159,255,0.12);
  --mono: 'Cascadia Code','Fira Code','JetBrains Mono','Consolas',monospace;
  --sans: 'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 50px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg-body);color:var(--text);min-height:100vh;line-height:1.6;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg-body);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* ---- SPLASH SCREEN ---- */
#splashScreen{position:fixed;inset:0;background:var(--bg-body);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity 0.7s cubic-bezier(0.8, 0, 0.2, 1), visibility 0.7s;}
.splash-logo{display:flex;align-items:center;gap:12px;font-size:2.5rem;color:var(--text);transition:transform 0.7s cubic-bezier(0.8, 0, 0.2, 1), opacity 0.7s;}
.splash-logo b{font-weight:800;color:var(--accent);}
.splash-logo span{font-weight:300;}
.splash-logo svg{width:48px;height:48px;color:var(--accent);}
#splashScreen.hide{opacity:0;visibility:hidden;pointer-events:none;}
#splashScreen.hide .splash-logo{transform:translateY(-40vh) scale(0.4);opacity:0;}

/* ---- NAV ---- */
.nav{display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);padding:0 2rem;height:64px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.2);}
.nav-logo{font-size:1.2rem;display:flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;color:var(--text);}
.nav-logo svg{color:var(--accent);width:28px;height:28px;}
.nav-logo b{color:var(--accent);font-weight:700;}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none;}
.nav-links a{display:flex;align-items:center;gap:6px;color:var(--text-sub);text-decoration:none;font-weight:600;font-size:.85rem;cursor:pointer;transition:.2s;}
.nav-links a svg{width:16px;height:16px;}
.nav-links a:hover,.nav-links a.on{color:var(--accent);}
.menu-btn{display:none;background:0 0;border:none;color:var(--text);cursor:pointer;}

@media(max-width:768px){
  .splash-logo{font-size:1.7rem;gap:8px;}
  .splash-logo svg{width:36px;height:36px;}
  .nav{justify-content:center;}
  .menu-btn{display:block;position:absolute;right:20px;}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--bg-card);border-bottom:1px solid var(--border);padding:.5rem;gap:0;}
  .nav-links.open{display:flex;}
  .nav-links a{height:auto;padding:.9rem 1.2rem;border-bottom:1px solid rgba(255,255,255,0.02);}
}

/* ---- LAYOUT ---- */
.wrap{max-width:1140px;margin:0 auto;padding:1.5rem;position:relative;z-index:1;}
.page{display:none;animation:fadeUp .25s ease;}
.page.on{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ---- BADGE ---- */
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--accent-dim);border:1px solid var(--accent-mid);color:var(--accent);padding:5px 14px;border-radius:var(--radius-pill);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1.2rem;}
.badge svg{width:16px;height:16px;}

/* ---- INFO ---- */
.info{background:var(--bg-card-alt);border-left:3px solid var(--accent);padding:12px 18px;margin-bottom:1.5rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-sub);font-size:.88rem;line-height:1.7;}
.info code{background:var(--accent-dim);color:var(--accent);padding:1px 7px;border-radius:4px;font-family:var(--mono);font-size:.78rem;}

/* ---- CARD ---- */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;margin-bottom:1.4rem;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:10px;}
.card-title{font-size:1rem;font-weight:600;}

/* ---- PILL TOGGLE ---- */
.pills{display:flex;gap:6px;}
.pill{padding:5px 15px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:600;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-sub);transition:.2s;}
.pill.on{background:var(--accent);color:#000;border-color:var(--accent);}
.pill:hover:not(.on){border-color:var(--accent);color:var(--accent);}

/* ---- TEXTAREA ---- */
.tarea{width:100%;min-height:160px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;color:var(--text);font-family:var(--mono);font-size:.82rem;resize:vertical;transition:.2s;line-height:1.7;}
.tarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.tarea::placeholder{color:var(--text-dim);}

/* ---- CONTROLS ---- */
.ctrls{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:1.2rem;gap:12px;}
.ctrls-left{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.acct-count{display:flex;align-items:center;gap:5px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 11px;font-size:.82rem;color:var(--text-sub);}
.acct-count svg{width:15px;height:15px;}

/* ---- TOGGLE ---- */
.auto-wrap{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-sub);}
.tog{position:relative;width:38px;height:20px;}
.tog input{display:none;}
.tog-track{position:absolute;inset:0;background:var(--border);border-radius:20px;cursor:pointer;transition:.2s;}
.tog-track::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:var(--text-sub);border-radius:50%;transition:.2s;}
.tog input:checked+.tog-track{background:var(--accent);}
.tog input:checked+.tog-track::before{transform:translateX(18px);background:#000;}
.sel{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px;color:var(--text);font-size:.82rem;outline:none;}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 22px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;cursor:pointer;transition:.2s;border:none;}
.btn svg{width:17px;height:17px;}
.btn-go{background:var(--accent);color:#000;}
.btn-go:hover{background:var(--accent-hover);box-shadow:0 0 18px var(--accent-dim);}
.btn-go:disabled{opacity:.4;cursor:not-allowed;}
.btn-out{background:var(--bg-input);color:var(--text);border:1px solid var(--border);}
.btn-out:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:4px 11px;font-size:.78rem;}

/* ---- STATUS ---- */
.status{display:none;align-items:center;gap:7px;padding:10px 14px;border-radius:var(--radius-sm);font-size:.84rem;margin-bottom:1rem;animation:fadeUp .2s ease;}
.status.show{display:flex;}
.status svg{width:15px;height:15px;flex-shrink:0;}
.status.s-info{background:var(--blue-dim);border:1px solid rgba(77,159,255,.2);color:var(--blue);}
.status.s-ok{background:var(--accent-dim);border:1px solid var(--accent-mid);color:var(--accent);}
.status.s-err{background:var(--red-dim);border:1px solid var(--red-mid);color:var(--red);}
.status.s-warn{background:var(--amber-dim);border:1px solid var(--amber-mid);color:var(--amber);}

/* ---- INLINE SVG ICONS ---- */
.ic-inline{display:inline-block;vertical-align:middle;width:15px;height:15px;margin:0 2px -2px;}
.tag-ico{display:inline-block;vertical-align:middle;width:14px;height:14px;margin-right:2px;}

/* ---- SPINNER ---- */
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--accent-dim);border-top:2px solid var(--accent);border-radius:50%;animation:rot .7s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}

/* ---- PROGRESS ---- */
.prog{display:none;margin-top:1rem;}
.prog.show{display:block;}
.prog-bar{background:var(--bg-input);border-radius:4px;height:5px;overflow:hidden;margin-bottom:6px;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:4px;transition:width .3s;width:0%;}
.prog-txt{font-size:.78rem;color:var(--text-dim);}

/* ---- TABLE ---- */
.tbl-wrap{overflow-x:auto;margin-top:1rem;}
.tbl{width:100%;border-collapse:collapse;font-size:.83rem;}
.tbl th{background:var(--bg-card-alt);color:var(--text-sub);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.5px;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top;}
.tbl tbody tr{cursor:pointer;transition:background 0.2s;}
.tbl tbody tr:hover{background:rgba(0,212,255,.05);}

.mail-c{display:flex;align-items:center;gap:7px;}
.mail-ico{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:rgba(0,120,212,.15);color:#0078d4;flex-shrink:0;}
.mail-e{font-family:var(--mono);font-size:.78rem;word-break:break-all;}
.from-n{font-weight:500;}
.from-e{color:var(--text-dim);font-size:.72rem;font-family:var(--mono);}
.cnt-c{max-width:320px;}
.cnt-s{color:var(--accent);font-weight:500;margin-bottom:1px;}
.cnt-p{color:var(--text-dim);font-size:.78rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.time-c{white-space:nowrap;color:var(--text-sub);font-size:.78rem;}
.stt-c{color:var(--text-dim);font-weight:500;text-align:center;}
.code-c{white-space:nowrap;}
.code-v{background:var(--accent);color:#000;padding:3px 11px;border-radius:4px;font-family:var(--mono);font-weight:700;font-size:.83rem;letter-spacing:1px;}
.copy-b{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-mid);padding:3px 9px;border-radius:4px;font-size:.72rem;font-weight:600;cursor:pointer;transition:.2s;margin-left:5px;}
.copy-b:hover,.copy-b.ok{background:var(--accent);color:#000;}

/* ---- CHECK MAIL PANELS ---- */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.2rem;}
@media(max-width:768px){.panels{grid-template-columns:1fr;}}
.panel{border:1px dashed var(--border);border-radius:var(--radius);padding:1rem;min-height:200px;display:flex;flex-direction:column;}
.panel.p-live{border-color:var(--accent);}
.panel.p-die{border-color:var(--red);}
.panel.p-unk{border-color:var(--amber);}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;}
.panel-label{font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:6px;}
.panel-label .num{font-size:.72rem;padding:1px 7px;border-radius:4px;font-weight:700;}
.p-live .panel-label{color:var(--accent);}
.p-live .num{background:var(--accent);color:#000;}
.p-die .panel-label{color:var(--red);}
.p-die .num{background:var(--red);color:#fff;}
.p-unk .panel-label{color:var(--amber);}
.p-unk .num{background:var(--amber);color:#000;}
.panel-list{flex:1;font-family:var(--mono);font-size:.78rem;color:var(--text-sub);line-height:1.8;word-break:break-all;overflow-y:auto;max-height:300px;}

/* ---- AUTO FORMAT ---- */
.hero-title{text-align:center;padding:1.5rem 0 .8rem;}
.hero-title h2{font-size:1.6rem;display:flex;align-items:center;justify-content:center;gap:10px;}
.hero-title h2 svg{color:var(--amber);width:28px;height:28px;}
.hero-title p{color:var(--text-sub);font-size:.9rem;margin-top:4px;}
.tag-row{display:flex;justify-content:center;gap:8px;margin-bottom:1.5rem;}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 13px;border-radius:var(--radius-pill);font-size:.75rem;font-weight:600;}
.tag-green{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-mid);}
.tag-blue{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(77,159,255,.2);}
.tag-amber{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-mid);}

.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:2rem;text-align:center;cursor:pointer;transition:.2s;margin-bottom:1rem;}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-dim);}
.dropzone svg{width:40px;height:40px;color:var(--amber);margin-bottom:.5rem;}
.dropzone h4{color:var(--text);margin-bottom:4px;}
.dropzone p{color:var(--text-dim);font-size:.82rem;}
.dropzone input{display:none;}

.fmt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:1rem;}
.fmt-stat{text-align:center;padding:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);}
.fmt-stat .val{font-size:1.3rem;font-weight:700;}
.fmt-stat .lbl{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;margin-top:2px;}
.fmt-stat.fs-ok .val{color:var(--accent);}
.fmt-stat.fs-dup .val{color:var(--amber);}
.fmt-stat.fs-err .val{color:var(--red);}

.fmt-output{width:100%;min-height:120px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;color:var(--accent);font-family:var(--mono);font-size:.82rem;resize:vertical;line-height:1.7;}

/* ---- ABOUT ---- */
.about-hero{text-align:center;padding:2.5rem 1rem;}
.about-hero h2{font-size:1.7rem;}
.about-hero h2 span{color:var(--accent);}
.about-hero p{color:var(--text-sub);max-width:560px;margin:.5rem auto 0;}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.5rem;}
.feat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;transition:.2s;}
.feat:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.3);}
.feat-ico{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent);margin-bottom:.8rem;}
.feat h3{font-size:.95rem;margin-bottom:.3rem;}
.feat p{font-size:.83rem;color:var(--text-sub);}

/* ---- FOOTER ---- */
.footer{text-align:center;padding:1.8rem;border-top:1px solid var(--border);margin-top:2.5rem;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1;}
.footer-wm{font-size:.88rem;color:var(--text-sub);}
.wm-link{display:inline-block;background:var(--accent-dim);border:1px solid var(--accent-mid);color:var(--accent);padding:3px 14px;border-radius:var(--radius-pill);font-weight:600;text-decoration:none;transition:.2s;margin-left:3px;}
.wm-link:hover{background:var(--accent);color:#000;box-shadow:0 0 14px var(--accent-dim);}
.footer p{color:var(--text-dim);font-size:.78rem;}

/* ---- ERROR CARD ---- */
.err-card{border-left:3px solid var(--red);background:var(--bg-card);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:.8rem;}
.err-card .err-email{color:var(--red);font-weight:600;font-family:var(--mono);font-size:.85rem;display:flex;align-items:center;gap:6px;}
.err-card .err-msg{color:var(--text-dim);font-size:.82rem;margin-top:4px;}

/* ---- METEOR CANVAS ---- */
#meteorCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;}

/* ---- EMAIL MODAL ---- */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:0.25s ease;backdrop-filter:blur(3px);padding:1rem;}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:700px;max-height:85vh;display:flex;flex-direction:column;transform:translateY(20px);transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);box-shadow:0 10px 40px rgba(0,0,0,0.5);margin:auto;overflow:hidden;}
.modal-overlay.show .modal-box{transform:translateY(0);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.modal-header h3{color:var(--accent);font-size:1.05rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:15px;}
.modal-close{background:var(--bg-input);border:1px solid var(--border);color:var(--text-sub);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:0.2s;flex-shrink:0;}
.modal-close:hover{background:var(--red-dim);color:var(--red);border-color:var(--red-mid);}
.modal-close svg{width:16px;height:16px;}
.modal-meta{padding:10px 20px;background:var(--bg-card-alt);border-bottom:1px solid var(--border);font-size:0.8rem;color:var(--text-sub);display:flex;justify-content:space-between;align-items:center;}
.modal-body{padding:20px;overflow-y:auto;overflow-x:auto;flex:1;min-height:0;background:#ffffff;color:#111111;font-family:system-ui,-apple-system,sans-serif;line-height:1.6;}
.modal-body img{max-width:100%;height:auto;}

@media(max-width:768px){
  .wrap{padding:1rem;}
  .card{padding:1rem;}
  .panels{grid-template-columns:1fr;}
  .fmt-stats{grid-template-columns:1fr;}

  /* Make button full width on mobile */
  .btn-go { width: 100%; justify-content: center; }

  /* Fix table squish */
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  .mail-e { word-break: normal; white-space: nowrap; }
  .from-n, .from-e, .time-c { white-space: nowrap; }
  .cnt-c { min-width: 250px; } 
}
