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

*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#1a1e2e transparent}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:#1a1e2e;border-radius:4px}

:root{
  --bg:#080b14;--bg2:#0c1020;--bg3:#111628;--bg4:#161c35;
  --cyan:#00f0ff;--green:#00ff88;--magenta:#ff00aa;--amber:#ffaa00;--red:#ff3355;
  --text:#c8d0e0;--text2:#6b7590;--text3:#3a4060;
  --border:#141a2e;--border2:#1e2540;
}

body{
  background:#080b14;color:#c8d0e0;
  font-family:'JetBrains Mono','Space Grotesk','Segoe UI',sans-serif;
  min-height:100vh;overflow-x:hidden;
  background-image:
    linear-gradient(rgba(0,240,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,240,255,0.03) 1px,transparent 1px);
  background-size:60px 60px;
}

body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.05) 2px,rgba(0,0,0,0.05) 4px);
}

.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;height:52px;
  background:rgba(8,11,20,0.95);backdrop-filter:blur(16px);
  border-bottom:1px solid #141a2e;
}
.navbar .inner{max-width:1280px;margin:0 auto;padding:0 20px;width:100%;display:flex;align-items:center;justify-content:space-between;height:100%}
.navbar .logo-text{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:#00f0ff;text-shadow:0 0 10px rgba(0,240,255,0.4)}
.navbar .links a{font-family:'JetBrains Mono',monospace;font-size:12px;text-decoration:none;color:#6b7590;padding:6px 12px;transition:all 0.2s}
.navbar .links a:hover{color:#00f0ff;background:rgba(0,240,255,0.05)}

.main{padding-top:80px;min-height:100vh}

.panel{background:#0c1020;border:1px solid #141a2e;border-radius:8px;position:relative;overflow:hidden}
.panel-header{padding:14px 20px;border-bottom:1px solid #141a2e;background:#111628}
.panel-header h2{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:#6b7590;text-transform:uppercase;letter-spacing:1px}

.input{
  width:100%;padding:12px 14px;border-radius:6px;
  background:#080b14;border:1px solid #1e2540;
  color:#fff;font-family:'JetBrains Mono',monospace;font-size:14px;
  outline:none;transition:all 0.2s;
}
.input:focus{border-color:#00f0ff;box-shadow:0 0 15px rgba(0,240,255,0.2)}

/* CYBERPUNK BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:4px;font-family:'JetBrains Mono',monospace;
  font-weight:700;font-size:14px;border:none;cursor:pointer;
  transition:all 0.2s;text-decoration:none;text-transform:uppercase;letter-spacing:1px;
}

.btn-cyan{
  background:#00f0ff!important;color:#080b14!important;
  box-shadow:0 0 20px rgba(0,240,255,0.4);
}
.btn-cyan:hover{background:#fff!important;box-shadow:0 0 30px rgba(0,240,255,0.6);transform:translateY(-2px)}

.btn-green{
  background:#00ff88!important;color:#080b14!important;
  box-shadow:0 0 20px rgba(0,255,136,0.4);
}
.btn-green:hover{background:#fff!important;box-shadow:0 0 30px rgba(0,255,136,0.6);transform:translateY(-2px)}

.btn-ghost{background:#111628;color:#c8d0e0;border:1px solid #1e2540}
.btn-ghost:hover{background:#161c35;border-color:#6b7590}

.container{max-width:1280px;margin:0 auto;padding:0 20px}
.flex{display:flex}.gap-2{gap:8px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.feature-card{
  text-align:center;padding:32px 24px;border:1px solid #141a2e;border-radius:8px;
  background:#0c1020;transition:all 0.3s;
}
.feature-card:hover{border-color:#00f0ff;transform:translateY(-5px);box-shadow:0 0 25px rgba(0,240,255,0.15)}
.feature-card h3{font-family:'JetBrains Mono',monospace;font-size:14px;color:#fff;margin-bottom:8px;text-transform:uppercase}
.feature-card p{font-size:12px;color:#6b7590;line-height:1.5}

@media(max-width:768px){ .grid-2{grid-template-columns:1fr} .btn{width:100%} }

.email-item{
  width:100%;display:flex;align-items:center;gap:12px;
  background:transparent;border:none;border-bottom:1px solid #141a2e;
  padding:16px;cursor:pointer;transition:all 0.2s;color:#fff;text-align:left;
}
.email-item:hover{background:rgba(0,240,255,0.05)}
.email-item.active{background:rgba(0,240,255,0.08);border-left:3px solid #00f0ff}

.email-avatar{width:40px;height:40px;background:#111628;border:1px solid #1e2540;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#00f0ff;font-weight:700}

.email-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);z-index:200;display:none}
.email-overlay.open{display:block}
.email-panel{position:fixed;right:0;top:0;bottom:0;width:100%;max-width:960px;background:#080b14;border-left:1px solid #00f0ff;display:flex;flex-direction:column;animation:slideIn 0.3s ease-out}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.ep-header{padding:24px;border-bottom:1px solid #1e2540;background:#0c1020}
.ep-body{flex:1;overflow-y:auto;background:#fff;color:#1a1a1a}

.anim-pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.text-cyan{color:#00f0ff}.text-green{color:#00ff88}.text-magenta{color:#ff00aa}