:root{
  --bg:#030603;
  --bg-2:#071007;
  --panel:#0b150d;
  --panel-2:#0a120c;
  --panel-3:#0e1d12;
  --border:#2a5c35;
  --text:#e6ffec;
  --muted:#c2f2cc;
  --soft:#8fd8a0;
  --accent:#7dff9e;
  --accent-2:#35d56e;
  --danger:#ff7d7d;
  --shadow:0 0 0 1px rgba(125,255,158,0.22), 0 16px 40px rgba(0,0,0,0.45);
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,
body.matrix{
  font-family:"Share Tech Mono","IBM Plex Mono","Menlo","Consolas","Liberation Mono",monospace;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(125,255,158,0.16), transparent 60%),
    radial-gradient(900px 620px at 88% 12%, rgba(53,213,110,0.14), transparent 60%),
    repeating-linear-gradient(180deg, rgba(5,10,6,0.48), rgba(5,10,6,0.48) 2px, rgba(3,6,3,0.62) 3px, rgba(3,6,3,0.62) 4px),
    var(--bg);
  color:var(--text);
  margin:0;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color-scheme:dark;
}

.app-shell{
  max-width:1220px;
  margin:0 auto;
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  width:100%;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  background:linear-gradient(135deg, rgba(8,14,9,0.92), rgba(8,14,9,0.72));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
}
.brand-title{font-size:21px;letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.brand-sub{font-size:12px;color:var(--muted)}

.main-nav{
  display:flex;
  gap:10px;
  margin:16px 0;
}

.nav-link{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  background:var(--panel);
}
.nav-link:hover{box-shadow:0 0 0 1px rgba(125,255,158,0.36)}

.content{
  min-height:320px;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:12px;
  width:100%;
}

.card{
  background:linear-gradient(180deg, rgba(10,19,11,0.96), rgba(7,13,8,0.96));
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
  width:100%;
}
.mailbox-card{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.mail-controls{flex:0 0 auto}
.mailbox-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mailbox-header h2{margin:0}
.mailbox-select select{min-width:260px}

h1,h2,h3,h4,strong,b,label,p,li,span,div{color:inherit}
h2{color:var(--accent);margin-top:0}

a{color:var(--accent);text-decoration:none}
a:hover{color:#b4ffc7}

table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid rgba(125,255,158,0.2);padding:10px;text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:700}

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

input,select,textarea{
  padding:10px 12px;
  width:100%;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
}

input::placeholder,
textarea::placeholder{color:var(--soft)}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset;
  transition:background-color 5000s ease-in-out 0s;
}

select,
option{
  background:var(--panel-2);
  color:var(--text);
}

label{display:block;color:var(--muted);margin-bottom:6px}

input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus{
  outline:1px solid rgba(125,255,158,0.7);
  outline-offset:1px;
}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.search-row{
  margin-top:12px;
  position:relative;
}
.search-row input[type="text"]{
  width:100%;
  min-width:0;
  transition:padding-right 0.2s ease;
}
.search-row .search-btn{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  white-space:nowrap;
  transform:translateX(110%);
  opacity:0;
  pointer-events:none;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.search-row.has-text input[type="text"]{
  padding-right:calc(var(--search-btn-w, 0px) + 12px);
}
.search-row.has-text .search-btn{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}

.btn,
button.btn{
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  background:var(--panel);
  cursor:pointer;
}

.btn:hover,
button.btn:hover{box-shadow:0 0 0 1px rgba(125,255,158,0.38)}

.btn.danger,
button.btn.danger{border-color:rgba(255,125,125,0.58);color:#ffe0e0;background:rgba(60,10,10,0.35)}

.btn.primary,
button.btn.primary{
  background:linear-gradient(135deg, rgba(53,213,110,0.28), rgba(125,255,158,0.28));
  border-color:rgba(125,255,158,0.7);
  color:#effff3;
}

.btn.ghost{background:transparent}

.notif-btn{
  margin-right:8px;
  color:#151515;
  border-color:transparent;
}

.notif-off{
  background:#cf3d3d;
  color:#fff;
}

.notif-warn{
  background:#d7c547;
  color:#1c1c1c;
}

.notif-on{
  background:#49b95c;
  color:#0d1a10;
}

.muted{color:var(--muted)}

.flash{
  background:rgba(125,255,158,0.12);
  border:1px solid rgba(125,255,158,0.45);
  border-radius:12px;
  padding:10px 12px;
  margin:12px 0;
  color:var(--text);
}

code{
  background:var(--panel-3);
  padding:2px 5px;
  border-radius:6px;
  color:#cffff2;
}

hr{border:none;border-top:1px solid rgba(125,255,158,0.24);margin:14px 0}
pre{white-space:pre-wrap}

details,
summary{color:var(--text)}
summary{cursor:pointer}

.mail-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  margin-top:12px;
  flex:1;
  min-height:0;
  align-items:stretch;
}

.folders{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:var(--panel);
  height:100%;
}
.new-email-btn{
  width:100%;
  margin-bottom:10px;
  text-align:center;
}
.compose-panel{
  border:1px solid rgba(125,255,158,0.22);
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
  background:linear-gradient(180deg, rgba(9,16,10,0.96), rgba(7,13,8,0.96));
}
.compose-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.compose-title{font-size:16px;font-weight:700;color:var(--accent)}

.folder-title{font-weight:700;margin-bottom:8px;color:var(--accent)}

.folder-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-radius:8px;
  text-decoration:none;
  color:var(--text);
}

.folder-item:hover{background:rgba(125,255,158,0.12)}
.folder-item.active{background:rgba(125,255,158,0.24);color:#f1fff5}
.folder-item.active .muted{color:#d5ffe0}

.messages{
  min-width:0;
  min-height:0;
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
}
.message-table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  display:table !important;
}
.message-table thead{display:table-header-group !important}
.message-table tbody{display:table-row-group !important}
.message-table tr{display:table-row !important}
.message-table th,
.message-table td{display:table-cell !important}
.message-table th,
.message-table td{
  border-bottom:1px solid rgba(125,255,158,0.2);
  padding:10px;
  text-align:left;
  vertical-align:top;
}
.message-table th{
  color:var(--muted);
  font-weight:700;
}
.message-table col.from-col{width:1%;max-width:45%}
.message-table col.subject-col{width:auto}
.message-row{cursor:pointer}
.subject-cell{overflow-wrap:anywhere}
.message-row:hover td{background:rgba(125,255,158,0.08)}
.message-row.selected td{background:rgba(125,255,158,0.14)}
.unread{font-weight:700;color:#f3fff5}
.message-row:focus{outline:1px solid rgba(125,255,158,0.7);outline-offset:-1px}
.from-cell{display:flex;flex-direction:column;height:100%;gap:2px}
.from-cell > div{display:block}
.from-date{margin-top:1.2em}
.from-name{
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.from-email{
  font-size:12px;
  line-height:1.2;
  min-height:1.2em;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.html-preview{
  width:100%;
  min-height:400px;
  border:1px solid var(--border);
  border-radius:8px;
  margin-top:8px;
  background:#081008;
}

.thumb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:10px;
  margin:10px 0 14px;
}

.thumb-btn{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.thumb-btn:hover{box-shadow:0 0 0 1px rgba(125,255,158,0.38)}

.thumb-img{
  width:100%;
  height:90px;
  object-fit:cover;
  border-radius:7px;
  display:block;
  background:var(--panel-2);
}

.thumb-caption{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.image-modal[hidden]{display:none}

.image-modal{
  position:fixed;
  inset:0;
  z-index:1000;
}

.image-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.72);
}

.image-modal-panel{
  position:relative;
  z-index:1;
  width:min(94vw, 1100px);
  max-height:92vh;
  margin:4vh auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}

.image-modal-title{
  color:var(--muted);
  margin-bottom:10px;
  padding-right:90px;
}

.image-modal-close{
  position:absolute;
  top:12px;
  right:12px;
}

.image-modal-img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:#081008;
  border-radius:8px;
}

.html-modal[hidden]{display:none}

.html-modal{
  position:fixed;
  inset:0;
  z-index:1000;
}

.html-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.72);
}

.html-modal-panel{
  position:relative;
  z-index:1;
  width:min(94vw, 1200px);
  height:90vh;
  margin:4vh auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}

.html-modal-title{
  color:var(--muted);
  margin-bottom:10px;
  padding-right:90px;
}

.html-modal-close{
  position:absolute;
  top:12px;
  right:12px;
}

.html-modal-frame{
  width:100%;
  height:calc(100% - 36px);
  border:1px solid var(--border);
  border-radius:8px;
  background:#081008;
}

.message-detail{
  border:1px solid rgba(125,255,158,0.22);
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
  background:linear-gradient(180deg, rgba(9,16,10,0.96), rgba(7,13,8,0.96));
}
.detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.detail-subject{font-size:18px;font-weight:700;margin-bottom:6px}
.detail-meta{font-size:inherit;margin-top:2px}
.detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0;
}
.inline-form{display:inline-block}
.detail-body{margin-top:6px}
.detail-text{white-space:pre-wrap;margin:0;font-family:inherit;font-size:inherit}
.detail-html{display:none;width:100%;min-height:420px;border:1px solid var(--border);border-radius:8px;background:#081008}
.detail-attachments{margin-top:12px}
.toggle{display:flex;align-items:center;gap:8px;cursor:pointer}
.toggle input{display:none}
.toggle-track{
  width:42px;
  height:22px;
  border-radius:12px;
  background:rgba(125,255,158,0.2);
  border:1px solid rgba(125,255,158,0.5);
  position:relative;
}
.toggle-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#7dff9e;
  transition:transform 0.2s ease;
}
.toggle input:checked + .toggle-track::after{transform:translateX(18px)}
.toggle-label{font-size:12px;color:var(--muted)}

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

@media (max-width: 720px){
  html,body{width:100%;max-width:100%}
  body,body.matrix{overflow:auto;overflow-x:hidden}
  body,body.matrix{
    background:
      radial-gradient(650px 520px at 10% -10%, rgba(125,255,158,0.16), transparent 60%),
      radial-gradient(520px 520px at 90% 10%, rgba(53,213,110,0.14), transparent 60%),
      repeating-linear-gradient(180deg, rgba(5,10,6,0.48), rgba(5,10,6,0.48) 2px, rgba(3,6,3,0.62) 3px, rgba(3,6,3,0.62) 4px),
      var(--bg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    min-height:100svh;
  }
  .app-shell{max-width:100vw;width:100vw;padding:16px 12px}
  .card{width:100%}
  .mailbox-header{flex-direction:column;align-items:flex-start}
  .mailbox-select select{min-width:0;width:100%}
  .mail-layout{grid-template-columns:1fr}
  .main-nav{flex-wrap:wrap}
  .folders{height:auto}
  .mailbox-card,
  .mail-layout,
  .messages{flex:0 0 auto}
  .messages{overflow:visible}
  .message-table{display:block!important}
  .message-table{width:100%;border-collapse:separate;border-spacing:0 10px}
  .message-table thead{display:none!important}
  .message-table colgroup{display:none!important}
  .message-table tbody,
  .message-table tr,
  .message-table th,
  .message-table td{display:block!important;width:100%}
  .message-row{
    border:1px solid rgba(125,255,158,0.2);
    border-radius:12px;
    margin:0;
    padding:12px;
  }
  .message-table td{border:none;padding:0}
  .from-cell{margin-bottom:8px}
  .subject-cell{margin-top:6px}
  .message-table tbody{display:block}
}