:root {
  --bg:       #0f172a;
  --surface:  #1e293b;
  --border:   #334155;
  --primary:  #3b82f6;
  --success:  #22c55e;
  --warning:  #f59e0b;
  --danger:   #ef4444;
  --text:     #e2e8f0;
  --muted:    #94a3b8;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}

/* NAVBAR */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:.9rem 2rem;
  background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.logo{font-size:1.15rem;font-weight:700}
.nav-links{display:flex;align-items:center;gap:1.2rem}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.9rem}
.nav-links a:hover{color:var(--text)}
.btn-logout{background:transparent;border:1px solid var(--border);color:var(--muted);
  padding:.35rem .9rem;border-radius:6px;cursor:pointer;font-size:.85rem}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* MAIN */
main{max-width:1000px;margin:2rem auto;padding:0 1.2rem;display:flex;flex-direction:column;gap:1.5rem}

/* CARD */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.5rem}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.card h2{font-size:1.05rem;font-weight:600}

/* BUTTONS */
.btn-primary{background:var(--primary);color:#fff;border:none;
  padding:.5rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500}
.btn-primary:hover{opacity:.88}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--muted);
  padding:.5rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.9rem}
.badge{background:rgba(59,130,246,.2);color:var(--primary);
  font-size:.75rem;padding:.15rem .45rem;border-radius:4px;margin-left:.4rem}

/* SSL ALERTS */
#ssl-alerts .alert{padding:.75rem 1rem;border-radius:8px;margin-bottom:.5rem;
  background:rgba(245,158,11,.12);border:1px solid var(--warning);color:var(--warning);font-size:.9rem}

/* DOMAIN LIST */
.domain-item{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;
  border:1px solid var(--border);border-radius:10px;margin-top:.75rem;flex-wrap:wrap}
.domain-name{flex:1;font-weight:600;min-width:150px}
.domain-meta{font-size:.8rem;color:var(--muted);display:flex;gap:.6rem;align-items:center}
.cert-ok{color:var(--success)} .cert-warn{color:var(--warning)} .cert-err{color:var(--danger)}
.ws-badge{background:var(--bg);border:1px solid var(--border);
  border-radius:4px;padding:.15rem .5rem;font-size:.78rem;color:var(--muted)}
.domain-controls{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.ctrl-label{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.www-label{font-size:.75rem;color:var(--success);background:rgba(34,197,94,.1);
  padding:.1rem .45rem;border-radius:4px}

/* TOGGLE */
.toggle{position:relative;display:inline-block;width:46px;height:25px;cursor:pointer}
.toggle input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--border);border-radius:25px;transition:.25s}
.slider:before{content:'';position:absolute;width:19px;height:19px;
  left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s}
.toggle input:checked+.slider{background:var(--success)}
.toggle input:checked+.slider:before{transform:translateX(21px)}

/* FRAMEWORK GRID */
.fw-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.fw-btn{padding:.45rem 1rem;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;color:var(--text);cursor:pointer;font-size:.88rem;transition:.2s}
.fw-btn:hover{border-color:var(--primary);color:var(--primary)}
.fw-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* RECOMMENDATION */
.recommendation{background:var(--bg);border:1px solid var(--primary);
  border-radius:10px;padding:1rem 1.4rem;margin-top:.5rem}
.rec-server{font-size:1.25rem;font-weight:700;color:var(--primary)}
.rec-reason{color:var(--muted);margin-top:.3rem;font-size:.9rem}
.rec-conf{margin-top:.5rem;font-size:.82rem;color:var(--success)}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;z-index:100}
.modal.hidden{display:none}
.modal-box{background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:2rem;width:400px;display:flex;flex-direction:column;gap:.9rem}
.modal-box h3{font-size:1.1rem;margin-bottom:.2rem}
.modal-box label{font-size:.85rem;color:var(--muted)}
.modal-box input[type=text],.modal-box input[type=number]{
  width:100%;padding:.65rem .9rem;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-size:.95rem}
.radio-group{display:flex;gap:1.5rem}
.radio-group label{color:var(--text);font-size:.92rem;display:flex;align-items:center;gap:.4rem}
.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text);cursor:pointer}
.modal-actions{display:flex;gap:.75rem;margin-top:.5rem}

/* LOGIN */
.login-page{display:flex;align-items:center;justify-content:center}
.login-card{background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:2.5rem;width:360px;text-align:center;margin-top:10vh}
.logo-mark{font-size:2.5rem;margin-bottom:.5rem}
.login-card h1{font-size:1.5rem;font-weight:700;margin-bottom:.3rem}
.sub{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}
.login-card input[type=email]{width:100%;padding:.7rem 1rem;background:var(--bg);
  border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.95rem;margin-bottom:.9rem}
.login-card button{width:100%;padding:.75rem;background:var(--primary);
  color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:500}
.login-card button:hover{opacity:.88}
.message{padding:.75rem;border-radius:8px;margin-top:.9rem;
  background:rgba(34,197,94,.12);border:1px solid var(--success);color:var(--success);font-size:.9rem}

.loading{color:var(--muted);padding:1rem;text-align:center}
.hidden{display:none!important}