@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;color:#d4d4d4;font-family:'JetBrains Mono',monospace;line-height:1.5;min-height:100vh}

/* HEADER */
.header{background:#111;border-bottom:1px solid #222;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
.logo{font-size:18px;font-weight:700;letter-spacing:3px;color:#fff;font-family:'Space Mono',monospace;text-decoration:none}
.user-info{display:flex;align-items:center;gap:15px;font-size:12px;color:#888}
.username{color:#4a7a9a;font-weight:600}
.nav-buttons{display:flex;gap:10px}
.btn-header{background:#222;border:1px solid #333;color:#fff;padding:8px 16px;font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;text-decoration:none;transition:all .2s;display:inline-block}
.btn-header:hover{background:#2a2a2a;border-color:#444}
.btn-header.active{background:#1a2a3a;border-color:#4a7a9a;color:#4a9adc}
.btn-danger{border-color:#5a2a2a!important;color:#9a4a4a!important}
.btn-danger:hover{background:#1a0a0a!important;border-color:#7a3a3a!important;color:#ca6a6a!important}

/* LAYOUT */
.wrap{max-width:960px;margin:0 auto;padding:20px}
.wrap-wide{max-width:1200px;margin:0 auto;padding:20px}
h1{font-size:18px;color:#fff;margin-bottom:5px;font-weight:normal;letter-spacing:2px}
h2{font-size:14px;color:#fff;margin-bottom:15px;font-weight:normal;letter-spacing:2px;text-transform:uppercase}
.subtitle{font-size:12px;color:#666;margin-bottom:25px;font-family:'Space Mono',monospace;letter-spacing:1px}
.page-title{margin-bottom:25px}

/* BOXES */
.box{background:#111;border:1px solid #222;padding:20px;margin-bottom:15px}
.box-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:12px;border-bottom:1px solid #1a1a1a}

/* FORMS */
label{display:block;font-size:11px;color:#888;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{width:100%;background:#000;border:1px solid #333;color:#fff;padding:12px;font-family:'JetBrains Mono',monospace;font-size:13px;margin-bottom:15px;transition:border-color .2s;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:#4a7a9a;background:#050505}
select{cursor:pointer}
select option{background:#111}
textarea{resize:vertical;min-height:120px}
.input-group{position:relative;margin-bottom:15px}
.input-group input{margin-bottom:0}
.input-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#555;font-size:12px;pointer-events:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}
.hint{font-size:10px;color:#555;margin-top:-10px;margin-bottom:15px;letter-spacing:.5px}

/* BUTTONS */
.btn{display:inline-block;background:#222;border:1px solid #333;color:#fff;padding:10px 20px;font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;text-transform:uppercase;letter-spacing:2px;transition:all .2s;text-decoration:none;font-weight:700}
.btn:hover{background:#2a2a2a;border-color:#444;letter-spacing:3px}
.btn-primary{background:#1a2a1a;border-color:#2a4a2a;color:#4a9a4a}
.btn-primary:hover{background:#1e321e;border-color:#3a5a3a;color:#5aaa5a}
.btn-full{width:100%;text-align:center;padding:14px}
.btn-sm{padding:6px 12px;font-size:10px;letter-spacing:1px}
.btn-sm:hover{letter-spacing:1.5px}
button.btn{width:auto}
button.btn-full{width:100%}

/* STATUS */
.status-box{background:#000;border:1px solid #333;padding:12px;font-size:12px;margin-bottom:15px}
.status-box.valid{border-color:#2a5a2a;color:#4a9a4a}
.status-box.invalid{border-color:#5a2a2a;color:#9a4a4a}
.status-box.info{border-color:#2a4a5a;color:#4a7a9a}
.alert{padding:12px 15px;border:1px solid;font-size:12px;margin-bottom:15px;letter-spacing:.5px}
.alert-success{background:#0a150a;border-color:#2a5a2a;color:#4a9a4a}
.alert-error{background:#150a0a;border-color:#5a2a2a;color:#9a4a4a}
.alert-info{background:#0a1015;border-color:#2a4a5a;color:#4a7a9a}

/* STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}
.stat{background:#111;border:1px solid #222;padding:15px;text-align:center}
.stat-num{font-size:28px;font-weight:700;margin-bottom:5px;font-family:'Space Mono',monospace}
.stat-label{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px}
.stat.green .stat-num{color:#4a9a4a}
.stat.blue .stat-num{color:#4a7a9a}
.stat.red .stat-num{color:#9a4a4a}
.stat.yellow .stat-num{color:#9a8a4a}

/* TABLE */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{background:#000;color:#666;text-transform:uppercase;letter-spacing:1px;font-size:10px;padding:10px 12px;text-align:left;border-bottom:1px solid #222;font-weight:normal}
td{padding:10px 12px;border-bottom:1px solid #1a1a1a;color:#ccc;vertical-align:middle}
tr:hover td{background:#0d0d0d}
.badge{display:inline-block;padding:3px 8px;font-size:10px;text-transform:uppercase;letter-spacing:1px;border:1px solid}
.badge-green{background:#0a150a;border-color:#2a5a2a;color:#4a9a4a}
.badge-red{background:#150a0a;border-color:#5a2a2a;color:#9a4a4a}
.badge-blue{background:#0a1015;border-color:#2a4a5a;color:#4a7a9a}
.badge-gray{background:#111;border-color:#333;color:#666}

/* INBOX */
.mail-item{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid #1a1a1a;cursor:pointer;transition:background .15s;text-decoration:none;color:inherit}
.mail-item:hover{background:#111}
.mail-item.unread{background:#0d1217}
.mail-item.unread .mail-from,.mail-item.unread .mail-subject{color:#fff;font-weight:600}
.mail-dot{width:6px;height:6px;background:#4a7a9a;border-radius:50%;margin-right:12px;flex-shrink:0}
.mail-item:not(.unread) .mail-dot{background:transparent}
.mail-from{font-size:12px;color:#aaa;width:200px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-subject{flex:1;font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 15px}
.mail-preview{font-size:11px;color:#555;flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none}
.mail-date{font-size:10px;color:#555;flex-shrink:0;width:120px;text-align:right}
.mail-actions-bar{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #1a1a1a;margin-bottom:5px}
.mail-count{font-size:11px;color:#555;margin-left:auto}

/* COMPOSE */
.compose-wrap{max-width:750px;margin:0 auto}
.to-tags{display:flex;flex-wrap:wrap;gap:6px;background:#000;border:1px solid #333;padding:8px;margin-bottom:15px;min-height:44px;cursor:text}
.to-tags:focus-within{border-color:#4a7a9a}
.tag{background:#1a2a3a;border:1px solid #2a3a4a;color:#4a9adc;padding:3px 8px;font-size:11px;display:flex;align-items:center;gap:5px}
.tag-remove{cursor:pointer;color:#666;font-size:14px;line-height:1}
.tag-remove:hover{color:#9a4a4a}
.to-input{background:transparent;border:none;color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;outline:none;flex:1;min-width:150px}

/* MAIL VIEW */
.mail-view{background:#111;border:1px solid #222;padding:25px}
.mail-view-header{border-bottom:1px solid #1a1a1a;margin-bottom:20px;padding-bottom:20px}
.mail-view-subject{font-size:16px;color:#fff;margin-bottom:12px;font-weight:normal;letter-spacing:1px}
.mail-meta{font-size:11px;color:#666;display:flex;flex-direction:column;gap:5px}
.mail-meta span{color:#888}
.mail-meta b{color:#aaa}
.mail-body{font-size:13px;line-height:1.7;color:#ccc;white-space:pre-wrap;word-break:break-word}
.mail-attachments{margin-top:20px;padding-top:15px;border-top:1px solid #1a1a1a}

/* SIDEBAR LAYOUT */
.layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.sidebar{background:#111;border:1px solid #222}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:12px 15px;color:#888;text-decoration:none;font-size:11px;text-transform:uppercase;letter-spacing:1px;border-left:2px solid transparent;transition:all .2s}
.sidebar-link:hover{color:#ccc;background:#0d0d0d}
.sidebar-link.active{color:#fff;background:#0d1217;border-left-color:#4a7a9a}
.sidebar-count{margin-left:auto;background:#1a2a3a;color:#4a7a9a;padding:2px 7px;font-size:10px;border:1px solid #2a3a4a}
.sidebar-section{padding:10px 15px;font-size:10px;color:#444;text-transform:uppercase;letter-spacing:1.5px;border-top:1px solid #1a1a1a}

/* LOGIN */
.login-wrap{max-width:420px;margin:80px auto;padding:20px}
.login-logo{text-align:center;margin-bottom:40px}
.login-logo .logo{font-size:28px;letter-spacing:5px;display:block;margin-bottom:8px}
.login-logo .tagline{font-size:11px;color:#444;letter-spacing:3px;text-transform:uppercase}
.login-box{background:#111;border:1px solid #222;padding:30px}
.login-footer{text-align:center;margin-top:15px;font-size:11px;color:#555}
.login-footer a{color:#4a7a9a;text-decoration:none}

/* TOAST */
.toast-area{position:fixed;top:75px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:#1a1a1a;border:1px solid #333;padding:14px 18px;min-width:280px;font-size:12px;animation:slideIn .3s ease-out;box-shadow:0 4px 12px rgba(0,0,0,.5);position:relative;overflow:hidden;font-family:'JetBrains Mono',monospace;letter-spacing:.5px}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.toast.success::before{background:#4a9a4a}
.toast.error::before{background:#9a4a4a}
.toast.info::before{background:#4a7a9a}
.toast-content{display:flex;align-items:center;gap:10px}
.toast-icon{font-size:16px;flex-shrink:0}
@keyframes slideIn{from{transform:translateX(350px);opacity:0}to{transform:translateX(0);opacity:1}}

/* PAGINATION */
.pagination{display:flex;gap:5px;margin-top:15px;justify-content:center}
.page-btn{background:#111;border:1px solid #222;color:#888;padding:6px 12px;font-size:11px;font-family:'Space Mono',monospace;cursor:pointer;text-decoration:none;transition:all .2s}
.page-btn:hover,.page-btn.active{background:#1a2a3a;border-color:#4a7a9a;color:#4a9adc}

/* DIVIDER */
.divider{border:none;border-top:1px solid #1a1a1a;margin:20px 0}

/* EMPTY STATE */
.empty{text-align:center;padding:60px 20px;color:#444}
.empty-icon{font-size:48px;margin-bottom:15px;opacity:.3}
.empty-text{font-size:13px;letter-spacing:1px}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#111;border:1px solid #333;padding:25px;max-width:480px;width:100%;position:relative}
.modal-title{font-size:14px;color:#fff;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #1a1a1a}
.modal-close{position:absolute;top:15px;right:15px;background:none;border:none;color:#555;cursor:pointer;font-size:18px;padding:0;width:auto;line-height:1}
.modal-close:hover{color:#fff}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:#222}
::-webkit-scrollbar-thumb:hover{background:#333}

/* RESPONSIVE */
@media(max-width:768px){
  .header{flex-direction:column;gap:12px;position:relative}
  .row,.row-3,.stats{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .mail-from{width:120px}
  .mail-preview{display:none}
  .toast-area{left:15px;right:15px;top:15px}
  .toast{min-width:auto}
}