:root{--bg:#061236;--bg2:#0b1b49;--card:#1a2648;--line:#2f3c69;--txt:#dfe7ff;--muted:#93a0c6;--purple:#4f46e5;--purple2:#5b4bff}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--txt);background:linear-gradient(180deg,var(--bg),#071641 55%,#071742)}

.tm-top{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:linear-gradient(180deg,#08163f,#091a49);border-bottom:1px solid #15285a;position:sticky;top:0;z-index:10}
.tm-brand{display:flex;align-items:center;gap:12px;font-weight:800}
.tm-brand span:last-child{font-size:46px;line-height:1}
.logo{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:#27337a;color:#8ca0ff;font-size:20px}
.tm-actions{display:flex;gap:10px}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid #2f3f75;background:#122252;color:#a8b3dd;font-size:18px;cursor:pointer}
.icon-btn.lg{width:52px}

.tm-page{max-width:1080px;margin:20px auto;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm-page.single{grid-template-columns:1fr;max-width:760px}
.tm-card{background:linear-gradient(130deg,#1b284b,#1d2a53 45%,#22295c);border:1px solid #303d69;border-radius:22px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.tm-card h1{font-size:22px;line-height:1.2;margin:8px 0 8px}
.tm-card h2{font-size:18px;margin:6px 0 8px}
.tm-card p{font-size:14px;color:#aeb8d7;line-height:1.5}

.hero{padding:22px 16px}
.hero-icon{width:74px;height:74px;margin:6px auto 14px;display:grid;place-items:center;border:1px solid #36406f;background:#2a3774;border-radius:18px;font-size:32px;color:#8ea0ff}
.access .hero-icon{width:60px;height:60px;font-size:26px}
.center-btn{display:block;text-decoration:none;text-align:center}

.btn-purple,.btn-dark{margin-top:12px;display:block;width:100%;padding:12px;border-radius:12px;border:1px solid #39467c;font-size:16px;font-weight:700;cursor:pointer}
.btn-purple{background:linear-gradient(90deg,var(--purple),var(--purple2));color:white}
.btn-dark{background:#1a2a4c;color:#dce5ff}
.btn-dark.small{font-size:13px;padding:9px 10px;width:auto;flex:1}

label{display:block;color:#adb8d9;font-size:15px;margin:11px 0 7px}
.pill{font-size:12px;background:#4a4bb2;border:1px solid #6668e5;color:#b9c2ff;padding:5px 11px;border-radius:999px;float:right}
.sort-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{font-size:13px;color:#90a0cb}

select,input{width:100%;background:#18274c;border:1px solid #344474;color:#dfebff;border-radius:14px;padding:12px 13px;font-size:16px;outline:none}
#domainSearch{margin-top:10px}
.user-row{display:flex;gap:8px}
.check-row{margin-top:12px;display:flex;gap:10px;align-items:center;color:#c6d2f9;font-size:15px}
.check-row input{width:18px;height:18px}

.mailbox-box{margin-top:12px;padding:11px;border-radius:12px;border:1px dashed #4d5c93;background:#101e42;font-family:monospace;font-size:12px;white-space:pre-wrap;word-break:break-all}
.btn-row{display:flex;gap:8px;margin-top:10px}
.inbox-list{list-style:none;padding:0;margin:0;border:1px solid #344474;border-radius:14px;max-height:400px;overflow:auto}
.inbox-list li{padding:11px;border-bottom:1px solid #2f3f6d;cursor:pointer;font-size:13px;position:relative}
.mail-del{position:absolute;right:10px;top:10px;border:1px solid #3f4f7c;background:#18274a;color:#fda4af;border-radius:8px;padding:4px 7px;font-size:12px}
.inbox-list li:last-child{border-bottom:0}
.meta{color:#9ba7ca;font-size:13px;margin-bottom:8px}
.mail-detail{margin-top:10px;padding:12px;border-radius:12px;border:1px solid #334271;background:#111f43;color:#deebff;min-height:170px;white-space:pre-wrap;font-size:13px}

.drawer{position:fixed;top:74px;right:-290px;width:280px;height:calc(100vh - 74px);background:#0b1941;border-left:1px solid #25376d;padding:12px;display:flex;flex-direction:column;gap:8px;transition:.2s;z-index:11}
.drawer.open{right:0}
.nav-item{display:block;padding:11px 12px;border-radius:10px;color:#cfdbff;text-decoration:none;font-size:14px;background:#10214d}
.nav-item.active{background:#2a2d72;border:1px solid #6567e2}

.modal{position:fixed;inset:0;background:rgba(3,8,22,.62);display:grid;place-items:center;padding:16px;z-index:30}
.modal.hidden{display:none}
.modal-card{width:min(680px,96vw);background:linear-gradient(130deg,#1b284b,#1d2a53 45%,#22295c);border:1px solid #303d69;border-radius:20px;padding:14px}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.modal-head h3{margin:0;font-size:20px}
.tabs{display:flex;gap:8px;margin:12px 0}.tab{flex:1;padding:10px;border-radius:10px;border:1px solid #344474;background:#132247;color:#cfd8f7}.tab.active{background:linear-gradient(90deg,var(--purple),var(--purple2));color:#fff}
.modal-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px}.danger{color:#ff7b95;border-color:#6f2b3d}

@media(max-width:920px){
  .tm-page{grid-template-columns:1fr;padding:0 14px;margin:18px auto}
  .tm-brand span:last-child{font-size:18px}
  .logo{width:38px;height:38px;font-size:17px}
  .tm-top{height:68px;padding:0 14px}
  .tm-card{padding:16px;border-radius:20px}
  .tm-card h1{font-size:30px;text-align:center}
  .tm-card h2{font-size:24px}
  .tm-card p{font-size:15px}
  .btn-purple,.btn-dark{font-size:17px;padding:13px}
  label{font-size:15px}
  .drawer{top:68px;height:calc(100vh - 68px)}
}