:root{
  --accent:#1a73e8; --accent-d:#1557b0; --red:#d93025; --green:#188038;
  --bg:#f6f8fc; --panel:#fff; --line:#e3e8ef; --ink:#202124; --muted:#5f6368;
  --shadow:0 1px 3px rgba(60,64,67,.15);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:.2em 0}
code{background:#eef1f6;padding:1px 6px;border-radius:5px;font-size:.9em}
hr{border:none;border-top:1px solid var(--line);margin:14px 0}
.muted{color:var(--muted);font-size:.9em}

/* buttons */
.btn{display:inline-block;padding:9px 18px;border-radius:24px;border:1px solid transparent;
  font-weight:600;cursor:pointer;font-size:.95rem;transition:.15s}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-d)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:#eef1f6}
.btn.big{padding:12px 26px;font-size:1.05rem}

/* flash */
#flash-wrap{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:99;width:min(560px,92%)}
.flash{padding:11px 16px;border-radius:10px;margin-bottom:8px;box-shadow:var(--shadow);font-size:.93rem}
.flash.ok{background:#e6f4ea;color:#137333;border:1px solid #b7e1c5}
.flash.error{background:#fce8e6;color:#c5221f;border:1px solid #f3c0bc}

/* ---------- marketing ---------- */
.brand{font-weight:800;font-size:1.35rem;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.brand .logo{background:var(--accent);color:#fff;width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;font-size:1rem}
.brand.center{justify-content:center;display:flex;margin-bottom:10px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 6%;background:#fff;border-bottom:1px solid var(--line)}
.nav nav{display:flex;align-items:center;gap:20px}
.nav nav a{color:var(--muted);font-weight:600}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:70px 6%;
  background:linear-gradient(160deg,#eaf1fe,#f6f8fc)}
.pill{display:inline-block;background:#e8f0fe;color:var(--accent-d);padding:6px 14px;border-radius:20px;font-weight:600;font-size:.85rem}
.hero h1{font-size:3.2rem;line-height:1.05;margin:18px 0}
.grad{background:linear-gradient(90deg,#1a73e8,#9334e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.12rem;color:var(--muted);max-width:520px}
.cta-row{display:flex;gap:14px;margin:26px 0 14px;flex-wrap:wrap}
.demo-note{font-size:.88rem}
.hero-card .mock{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(60,64,67,.25);overflow:hidden}
.mock-top{background:#f1f3f4;padding:10px 14px;display:flex;align-items:center;gap:7px}
.dot{width:11px;height:11px;border-radius:50%}.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.mock-addr{margin-left:auto;color:var(--muted);font-size:.85rem}
.mock-row{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:14px}
.mock-row b{min-width:90px}.mock-row.unread{background:#f2f7ff;font-weight:600}
.mock-compose{margin:16px 18px;background:var(--accent);color:#fff;display:inline-block;padding:8px 18px;border-radius:20px}
.features,.pricing{padding:64px 6%;text-align:center}
.features h2,.pricing h2{font-size:2rem;margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px;max-width:1100px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
.features .card{text-align:left}.features .ic{font-size:1.8rem}.features h3{margin-top:10px}
.features p{color:var(--muted)}
.pricing{background:#fff}
.price{text-align:center;position:relative}
.price.feat{border:2px solid var(--accent);transform:translateY(-6px)}
.price .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:3px 12px;border-radius:12px;font-size:.78rem}
.price .amt{font-size:2.4rem;font-weight:800;margin:10px 0}
.price .amt small{font-size:.9rem;color:var(--muted);font-weight:500}
.price ul{list-style:none;padding:0;text-align:left;margin:16px 0;color:var(--muted)}
.price ul li{padding:6px 0;border-bottom:1px dashed var(--line)}
.foot{display:flex;justify-content:space-between;padding:28px 6%;background:#202124;color:#cfd2d6;font-size:.9rem}

/* ---------- auth ---------- */
body.auth{display:grid;place-items:center;min-height:100vh;background:linear-gradient(160deg,#eaf1fe,#f6f8fc)}
.auth-wrap{width:min(420px,92%);text-align:center;padding:20px}
.auth-wrap.wide{width:min(520px,94%)}
.auth-wrap h1{font-size:1.7rem}
.sub{color:var(--muted);margin-bottom:18px}
.form{text-align:left;display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem}
.form input,.form select,.form textarea,.search input{
  padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:1rem;font-family:inherit;background:#fff}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--accent);border-color:transparent}
.form small{font-weight:400;color:var(--muted)}
.domain-input{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.domain-input span{padding:0 10px;color:var(--muted)}
.domain-input input{border:none;flex:1;border-radius:0}
.domain-input .suffix,.suffix-sel{color:var(--muted);padding-right:10px;background:#f6f8fc;border:none}
.alt{margin-top:16px;color:var(--muted)}
.center{text-align:center}

/* ---------- webmail ---------- */
.topbar{display:flex;align-items:center;gap:18px;padding:8px 18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand.sm{font-size:1.15rem}
.search{flex:1;max-width:640px;display:flex;background:#eef1f6;border-radius:24px;overflow:hidden}
.search input{flex:1;border:none;background:transparent;padding:10px 18px;font-size:.95rem}
.search input:focus{outline:none}
.search button{border:none;background:transparent;cursor:pointer;padding:0 16px;font-size:1rem}
.top-right{display:flex;align-items:center;gap:14px}
.tb-link{color:var(--muted);font-weight:600;font-size:.9rem}
.avatar{width:34px;height:34px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.avatar.lg{width:46px;height:46px;font-size:1rem}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 53px)}
.sidebar{padding:16px 12px;border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.compose-btn{background:#c2e7ff;color:#001d35;font-weight:700;padding:13px 22px;border-radius:16px;display:inline-block;margin-bottom:14px;box-shadow:var(--shadow)}
.compose-btn:hover{background:#a8dbff}
.folders{display:flex;flex-direction:column;gap:2px}
.folder{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;border-radius:0 20px 20px 0;color:var(--ink);font-weight:500}
.folder:hover{background:#eef1f6}
.folder.active{background:#d3e3fd;font-weight:700;color:var(--accent-d)}
.folder .count{background:var(--accent);color:#fff;border-radius:10px;padding:0 7px;font-size:.75rem}
.side-foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--line)}
.who small{color:var(--muted)}
.content{padding:18px 24px;overflow:auto}

/* list */
.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:10px}
.lh-left{display:flex;align-items:center;gap:12px}
.bulk-actions{display:flex;gap:6px;opacity:.45;pointer-events:none;transition:.15s;flex-wrap:wrap}
.bulk-actions.on{opacity:1;pointer-events:auto}
.ba{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:.85rem;color:var(--ink)}
.ba:hover{background:#eef1f6}
.ba.danger{color:var(--red);border-color:#f3c0bc}
.mail-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mrow{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.mrow:hover{box-shadow:inset 0 0 0 99px rgba(0,0,0,.015);z-index:1}
.mrow.unread{background:#f2f7ff}
.mrow.unread .from,.mrow.unread .subj b{font-weight:800}
.star{cursor:pointer;color:#dadce0;font-size:1.1rem;user-select:none}
.star.on{color:#f9ab00}
.mlink{flex:1;display:grid;grid-template-columns:200px 1fr auto;gap:14px;align-items:center;color:var(--ink);min-width:0}
.from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snippet{color:var(--muted);font-weight:400}
.date{color:var(--muted);font-size:.82rem;white-space:nowrap}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.big-ic{font-size:3rem}

/* message view */
.msg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.back{font-weight:600}
.msg-tools{display:flex;gap:6px;flex-wrap:wrap}
.inline-form{display:inline}
.msg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;max-width:900px}
.msg.small{margin-top:12px;background:#fafbfd}
.msg-subject{font-size:1.5rem;margin-bottom:16px}
.msg-from{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.mf-meta{flex:1}.msg-date{white-space:nowrap}
.msg-body{white-space:pre-wrap;line-height:1.55}
.thread{max-width:900px}.thread h3{margin:22px 0 8px;color:var(--muted);font-size:.95rem}

/* compose */
.compose-pane{max-width:780px}
.compose-pane .card{padding:0;overflow:hidden}
.cl{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-weight:600;color:var(--muted);font-size:.9rem}
.cl input{flex:1;border:none;font-size:1rem;font-family:inherit}
.cl input:focus{outline:none}
.compose-pane textarea{width:100%;border:none;padding:16px;font-size:1rem;font-family:inherit;resize:vertical}
.compose-pane textarea:focus{outline:none}
.compose-actions{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}

/* settings */
.settings{max-width:680px;display:flex;flex-direction:column;gap:18px}
.meter{height:10px;background:#eef1f6;border-radius:6px;overflow:hidden}
.meter .bar{height:100%;background:var(--accent)}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.swatch input{display:none}
.swatch:has(input:checked){box-shadow:0 0 0 3px var(--accent)}

/* admin */
.admin{max-width:1000px;display:flex;flex-direction:column;gap:18px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.stat .n{font-size:1.4rem;font-weight:800;display:block}
.stat small{color:var(--muted)}
.row-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row-form input,.row-form select{padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:.95rem}
.domain-input.grow{flex:1;min-width:240px}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.tr.suspended,tr.suspended{opacity:.5}
.acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mini{width:90px;padding:5px 8px;border:1px solid var(--line);border-radius:7px}
.tbl select{padding:5px 8px;border:1px solid var(--line);border-radius:7px}
.domain-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.domain-list li{padding:8px 12px;background:#f6f8fc;border-radius:8px}
.tag{background:#e8f0fe;color:var(--accent-d);padding:2px 10px;border-radius:12px;font-size:.78rem;font-weight:600}
.tag.sm{font-size:.72rem;margin-left:6px}.tag.ok{background:#e6f4ea;color:#137333}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:start}
.plan-opt{border:2px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.plan-opt.sel{border-color:var(--accent);background:#f2f7ff}
.plan-opt .amt{font-size:1.3rem;font-weight:800}
.plan-grid .btn{grid-column:1/-1;justify-self:start}

/* email settings */
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dns{background:#202124;color:#e8eaed;padding:14px;border-radius:10px;overflow:auto;
  font-size:.82rem;line-height:1.5;white-space:pre}
.admin .msg-head h2{margin:0}
input[readonly]{background:#f6f8fc;cursor:pointer}

@media(max-width:820px){
  .two{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}.hero h1{font-size:2.3rem}
  .shell{grid-template-columns:1fr}.sidebar{flex-direction:row;flex-wrap:wrap;align-items:center}
  .folders{flex-direction:row;flex-wrap:wrap}.folder{border-radius:18px}
  .mlink{grid-template-columns:1fr;gap:2px}.from{font-size:.9rem}.date{display:none}
  .side-foot{display:none}
}