:root{
  --body-ink:#dbeafe;
  --body-text:#162033;
  --body-muted:#667085;
  --body-panel:#fff;
  --body-bg:#eef3f8;
  --body-night:#07111f;
  --body-night-2:#0b2035;
  --body-cyan:#38d7ff;
  --body-blue:#1967d2;
  --body-border:#d8e0ea;
  --body-danger:#b42318;
  --body-success:#067647
}

*{
  box-sizing:border-box
}

body{
  margin:0;
  color:var(--body-text);
  background:var(--body-bg);
  font:15px/1.45 Inter,Arial,sans-serif
}

a{
  color:inherit;
  text-decoration:none
}

button,input,select,textarea{
  font:inherit
}

button,.button,.button-secondary,.button-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:.65rem 1rem;
  border:0;
  border-radius:8px;
  font-weight:700;
  cursor:pointer
}

button:disabled{
  cursor:not-allowed;
  opacity:.48
}

.button,button{
  color:#04111c;
  background:var(--body-cyan)
}

.button:hover,button:hover{
  filter:brightness(.92)
}

.button-secondary{
  color:var(--body-text);
  background:#fff;
  border:1px solid var(--body-border)
}

.button-danger{
  color:#fff;
  background:var(--body-danger)
}

.eyebrow,.sidebar-label{
  margin:0 0 .35rem;
  color:#4e6f8d;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase
}

.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:var(--body-ink);
  background:radial-gradient(circle at 18% 25%,#103d5d 0,transparent 30%),linear-gradient(135deg,#040b14,#071a2b 58%,#08243a)
}

.signal-grid{
  position:fixed;
  inset:0;
  opacity:.16;
  background-image:linear-gradient(rgba(56,215,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(56,215,255,.3) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,transparent,#000,transparent)
}

.login-shell{
  position:relative;
  display:grid;
  width:min(930px,calc(100% - 32px));
  grid-template-columns:1.15fr .85fr;
  border:1px solid rgba(56,215,255,.22);
  border-radius:22px;
  background:rgba(5,16,29,.88);
  box-shadow:0 28px 80px rgba(0,0,0,.5);
  overflow:hidden;
  backdrop-filter:blur(18px)
}

.login-intro{
  padding:64px
}

.login-intro h1{
  margin:.5rem 0;
  font-size:clamp(2.5rem,6vw,4.8rem);
  letter-spacing:-.06em
}

.login-intro>p:last-of-type{
  max-width:390px;
  color:#9eb8ce;
  font-size:1.1rem
}

.uplink-orbit{
  position:relative;
  display:grid;
  width:92px;
  height:92px;
  border:1px solid rgba(56,215,255,.35);
  border-radius:50%;
  place-items:center
}

.uplink-orbit:before,.uplink-orbit:after{
  content:"";
  position:absolute;
  border:1px solid rgba(56,215,255,.16);
  border-radius:50%
}

.uplink-orbit:before{
  inset:-14px
}

.uplink-orbit:after{
  inset:16px
}

.uplink-core,.brand-mark{
  display:grid;
  width:42px;
  height:42px;
  border-radius:50%;
  color:#02111b;
  background:var(--body-cyan);
  place-items:center;
  font-size:1.2rem;
  font-weight:900
}

.orbit-dot{
  position:absolute;
  top:-5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 16px var(--body-cyan)
}

.signal-status{
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  margin-top:2rem;
  padding:.5rem .8rem;
  border:1px solid rgba(56,215,255,.2);
  border-radius:20px;
  color:#9ddff0;
  font-size:.82rem
}

.signal-status span,.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#32d583;
  box-shadow:0 0 8px #32d583
}

.login-card{
  padding:56px 44px;
  color:var(--body-text);
  background:#fff
}

.login-card h2{
  margin:.2rem 0 1.4rem;
  font-size:2rem
}

.stacked-form{
  display:grid;
  gap:.7rem
}

.stacked-form input,.account-form input,.account-form select,.compose-form input,.compose-form select,.search-form input{
  width:100%;
  min-height:44px;
  padding:.7rem .8rem;
  border:1px solid var(--body-border);
  border-radius:8px;
  background:#fff
}

.stacked-form input:focus,.account-form input:focus,.compose-form input:focus,.search-form input:focus{
  outline:3px solid rgba(56,215,255,.22);
  border-color:#1597bc
}

.alert{
  margin:1rem;
  padding:.8rem 1rem;
  border-radius:8px
}

.alert-error{
  color:#7a271a;
  background:#fef3f2;
  border-left:4px solid var(--body-danger)
}

.alert-success{
  color:#055f3c;
  background:#ecfdf3;
  border-left:4px solid var(--body-success)
}

.topbar{
  display:flex;
  min-height:68px;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
  padding:.7rem 1.2rem;
  color:var(--body-ink);
  background:linear-gradient(90deg,var(--body-night),var(--body-night-2));
  border-bottom:1px solid rgba(56,215,255,.18)
}

.brand,.account-menu,.toolbar{
  display:flex;
  align-items:center;
  gap:.75rem
}

.brand span:last-child{
  display:grid
}

.brand small{
  color:#8aa9c2;
  font-size:.72rem
}

.account-menu form{
  margin:0
}

.toolbar{
  margin-left:auto
}

.mail-layout{
  display:grid;
  min-height:calc(100vh - 68px);
  grid-template-columns:270px minmax(0,1fr)
}

.sidebar{
  padding:1.3rem .8rem;
  color:#b9cce0;
  background:#0a1726
}

.sidebar-label{
  padding:0 .75rem;
  color:#6f91aa
}

.folder{
  display:flex;
  gap:.6rem;
  align-items:center;
  margin:.22rem 0;
  padding:.68rem .75rem;
  border-radius:8px
}

.folder:hover,.folder.active{
  color:#fff;
  background:#12324c
}

.folder-add{
  margin-top:1rem;
  color:var(--body-cyan)
}

.account-channel{
  margin:.65rem 0;
  padding:.35rem 0;
  border-top:1px solid rgba(185,204,224,.12)
}

.account-channel-name{
  display:flex;
  gap:.6rem;
  align-items:center;
  padding:.55rem .75rem;
  color:#fff;
  font-weight:800
}

.account-folders{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.1rem .25rem;
  padding-left:1rem
}

.account-folders .folder{
  margin:0;
  padding:.45rem .6rem;
  font-size:.85rem
}

.message-area{
  margin:1rem;
  border:1px solid var(--body-border);
  border-radius:14px;
  background:#fff;
  overflow:hidden
}

.message-heading{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.3rem;
  border-bottom:1px solid var(--body-border)
}

.message-heading h1{
  margin:0;
  font-size:1.35rem
}

.search-form{
  display:flex;
  gap:.5rem;
  width:min(520px,50%)
}

.message-list{
  display:grid
}

.message-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  border-bottom:1px solid #edf0f4
}

.message-row-unified{
  grid-template-columns:minmax(0,1fr)
}

.message-row:hover{
  background:#f3f8fc
}

.message-row.unread{
  font-weight:700;
  background:#f7fbff
}

.message-selector{
  width:17px;
  height:17px;
  margin:auto;
  accent-color:var(--body-blue)
}

.message-link{
  display:grid;
  grid-template-columns:18px minmax(150px,1.15fr) minmax(220px,2fr) 120px 75px 180px;
  gap:.8rem;
  align-items:center;
  min-width:0;
  padding:.8rem 1rem .8rem .25rem
}

.message-row-unified .message-link{
  padding-left:1rem
}

.bulk-toolbar{
  display:flex;
  gap:1rem;
  align-items:center;
  min-height:58px;
  padding:.65rem 1rem;
  color:var(--body-muted);
  background:#f8fafc;
  border-bottom:1px solid var(--body-border)
}

.select-all-control{
  display:flex;
  gap:.5rem;
  align-items:center;
  color:var(--body-text);
  font-weight:700
}

.select-all-control input{
  width:17px;
  height:17px;
  accent-color:var(--body-blue)
}

.bulk-actions{
  display:flex;
  gap:.5rem;
  margin-left:auto
}

.read-indicator{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#a9b3bf
}

.unread .read-indicator{
  background:var(--body-cyan);
  box-shadow:0 0 8px #39d7ff
}

.message-from,.message-subject{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.message-account,.message-size,.message-row time{
  color:var(--body-muted);
  font-size:.82rem
}

.empty-state{
  max-width:560px;
  margin:10vh auto;
  padding:2rem;
  text-align:center
}

.empty-icon{
  display:grid;
  width:62px;
  height:62px;
  margin:auto;
  border-radius:50%;
  color:#047ba0;
  background:#dff8ff;
  place-items:center;
  font-size:1.8rem
}

.settings-layout{
  display:grid;
  min-height:calc(100vh - 68px);
  grid-template-columns:270px minmax(0,1fr)
}

.settings-nav{
  padding:1.5rem;
  background:#f8fafc;
  border-right:1px solid var(--body-border)
}

.settings-nav>a{
  display:grid;
  margin:.4rem 0;
  padding:.75rem;
  border-radius:8px
}

.settings-nav>a:hover{
  background:#eaf3fa
}

.settings-nav small{
  color:var(--body-muted)
}

.settings-panel{
  padding:2rem;
  overflow:auto
}

.settings-panel h1,.compose-shell h1{
  margin:.2rem 0 1.5rem
}

.account-form{
  display:grid;
  gap:1rem
}

.account-form fieldset{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  padding:1rem;
  border:1px solid var(--body-border);
  border-radius:12px
}

.account-form legend{
  padding:0 .5rem;
  font-weight:800
}

.account-form label,.compose-form label{
  display:grid;
  gap:.35rem;
  font-weight:700
}

.account-form label small{
  color:var(--body-muted);
  font-weight:400
}

.account-form .checkbox{
  display:flex;
  align-items:center
}

.account-form .checkbox input{
  width:auto
}

.form-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap
}

.message-view{
  max-width:1200px;
  margin:1rem auto;
  border:1px solid var(--body-border);
  border-radius:14px;
  background:#fff;
  overflow:hidden
}

.message-meta{
  padding:1.5rem
}

.message-meta h1{
  margin:.25rem 0 1rem
}

.message-meta dl{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:.35rem;
  margin:0
}

.message-meta dt{
  color:var(--body-muted)
}

.message-meta dd{
  margin:0
}

.message-action-form{
  margin:0
}

.message-frame{
  display:block;
  width:100%;
  min-height:58vh;
  border:0;
  border-top:1px solid var(--body-border);
  background:#fff
}

.attachments{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:1rem
}

.attachment{
  padding:.45rem .7rem;
  border:1px solid var(--body-border);
  border-radius:8px
}

.compose-shell{
  max-width:1100px;
  margin:1rem auto;
  padding:1.5rem;
  border:1px solid var(--body-border);
  border-radius:14px;
  background:#fff
}

.compose-form{
  display:grid;
  gap:.85rem
}

.compose-recipient-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}

.jodit-container{
  border-color:var(--body-border)!important;
  border-radius:8px!important
}

.jodit-workplace{
  min-height:360px!important
}

.certificate-warning{
  margin:1rem 0;
  padding:1.25rem;
  border:1px solid #f79009;
  border-radius:12px;
  background:#fffaeb;
  box-shadow:0 10px 30px rgba(181,71,8,.08)
}

.certificate-warning h2{
  margin:.2rem 0 .5rem;
  color:#93370d
}

.certificate-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin:1rem 0
}

.certificate-comparison>div,.certificate-fingerprint{
  display:grid;
  gap:.35rem;
  margin:1rem 0;
  padding:.8rem;
  border:1px solid #fedf89;
  border-radius:8px;
  background:#fff
}

.certificate-warning code{
  overflow-wrap:anywhere;
  color:#7a2e0e;
  font-size:.78rem
}

.certificate-details{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:.35rem .75rem;
  margin:1rem 0
}

.certificate-details dt{
  color:#854a0e;
  font-weight:700
}

.certificate-details dd{
  margin:0
}

.certificate-trust-form{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap
}

.certificate-trust-form .checkbox{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:700
}

.certificate-trust-form .checkbox input{
  width:auto;
  min-height:auto
}

.certificate-note{
  margin:.8rem 0 0;
  color:#854a0e;
  font-size:.85rem
}

@media(max-width:900px){
  .login-shell{
  grid-template-columns:1fr
}

.login-intro{
  display:none
}

.mail-layout,.settings-layout{
  grid-template-columns:1fr
}

.settings-nav{
  display:none
}

.sidebar{
  max-height:320px;
  overflow:auto
}

.message-link{
  grid-template-columns:16px 1fr 1.5fr 100px
}

.message-account,.message-size{
  display:none
}

.account-form fieldset{
  grid-template-columns:1fr
}

.compose-recipient-row{
  grid-template-columns:1fr
}


}

@media(max-width:620px){
  .topbar{
  flex-wrap:wrap
}

.account-menu>span,.brand small{
  display:none
}

.toolbar{
  order:3;
  width:100%;
  overflow:auto
}

.message-area{
  margin:.4rem
}

.message-heading{
  align-items:stretch;
  flex-direction:column
}

.search-form{
  width:100%
}

.message-link{
  grid-template-columns:12px 1fr
}

.message-subject{
  grid-column:2
}

.message-link time{
  display:none
}

.bulk-toolbar{
  align-items:flex-start;
  flex-direction:column
}

.bulk-actions{
  width:100%;
  margin-left:0;
  overflow:auto
}

.settings-panel,.compose-shell{
  padding:1rem
}

.certificate-comparison{
  grid-template-columns:1fr
}

.certificate-details{
  grid-template-columns:1fr
}


}