*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0; min-height:100vh;
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
a{color:inherit;}
.container{max-width:900px; margin:0 auto; padding:0 24px;}

.topbar{border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:20;}
.topbar-inner{
  max-width:900px; margin:0 auto; padding:0 24px; height:64px;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar-right{display:flex; align-items:center; gap:16px;}
.logo{font-weight:700; font-size:1.1rem; display:flex; align-items:center; gap:8px;}
.logo-mark{color:var(--accent);}
.user-box{display:flex; align-items:center; gap:14px; font-size:.88rem; color:var(--text-dim);}
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; color:var(--text-dim);
  transition:background .15s, color .15s;
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}

.role-badge{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.05em;
  padding:2px 9px; border-radius:999px; color:#fff; vertical-align:middle;
}
.role-badge-admin{background:linear-gradient(135deg, #ec4899, #f472b6); box-shadow:0 0 10px rgba(236,72,153,.6);}
.role-badge-owner{background:linear-gradient(135deg, #d4af37, #f5d576); box-shadow:0 0 10px rgba(212,175,55,.6); color:#3a2c00;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:9px; font-size:.9rem; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:all .15s;
}
.btn-primary{background:var(--accent); color:#05261d;}
.btn-primary:hover{filter:brightness(1.12);}
.btn-ghost{background:none; color:var(--text-dim); border:none;}
.btn-ghost:hover{color:var(--text);}
.btn-outline{border-color:var(--border); background:none; color:var(--text);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%;}

/* auth */
.auth-view{
  display:flex; justify-content:center; align-items:center;
  min-height:calc(100vh - 64px); padding:40px 24px;
}
.auth-shell{
  width:100%; max-width:980px; display:grid; grid-template-columns:1.1fr 1fr;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
}
.auth-brand{
  position:relative; padding:48px 40px;
  background:
    radial-gradient(circle at 15% 15%, rgba(51,214,166,.16), transparent 45%),
    linear-gradient(160deg, var(--bg-alt), var(--bg) 70%);
  border-right:1px solid var(--border);
  display:flex; align-items:center;
}
.auth-brand-inner{position:relative; z-index:1;}
.auth-brand-mark{display:block; margin-bottom:22px;}
.auth-brand-title{font-size:1.5rem; margin:0 0 10px; letter-spacing:-.01em;}
.auth-brand-tagline{color:var(--text-dim); font-size:1.02rem; line-height:1.6; margin:0 0 32px; max-width:320px;}
.auth-brand-features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.auth-brand-features li{
  display:flex; align-items:center; gap:11px; font-size:.88rem; color:var(--text-dim);
}
.auth-brand-features svg{
  flex:none; color:var(--accent); background:rgba(51,214,166,.12);
  border-radius:50%; padding:3px; width:22px; height:22px;
}

.auth-panel{display:flex; align-items:center; padding:48px 40px;}
.auth-card{width:100%;}

.auth-tabs{display:flex; gap:8px; margin-bottom:24px; background:var(--bg); border-radius:9px; padding:4px;}
.auth-tab{
  flex:1; padding:9px; border:none; background:none; color:var(--text-dim);
  border-radius:7px; cursor:pointer; font-weight:600; font-size:.88rem;
  transition:background .15s, color .15s;
}
.auth-tab.active{background:var(--surface-2); color:var(--text);}
.auth-form{display:flex; flex-direction:column; gap:16px;}
.auth-form label{font-size:.84rem; color:var(--text-dim); display:flex; flex-direction:column; gap:6px; font-weight:600;}
.auth-form .hint{font-size:.74rem; color:var(--text-faint); font-weight:400;}
.auth-form input{
  background:var(--bg); border:1px solid var(--border); border-radius:9px;
  padding:11px 13px; color:var(--text); font-size:.92rem; font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.auth-form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(51,214,166,.15);}
.auth-form .btn-primary{padding:12px 18px; font-size:.94rem;}
.form-error{font-size:.82rem; color:var(--danger); min-height:1em; margin:0;}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:480px){ .field-row{grid-template-columns:1fr;} }

/* Sub-choice within Create account — visually lighter than the main
   Log in/Create account tabs so it doesn't read as a second nav level. */
.account-type-tabs{display:flex; gap:6px; margin-bottom:2px;}
.account-type-tab{
  flex:1; padding:7px; border:1px solid var(--border); background:none; color:var(--text-faint);
  border-radius:999px; cursor:pointer; font-weight:600; font-size:.78rem;
  transition:border-color .15s, color .15s;
}
.account-type-tab.active{border-color:var(--accent); color:var(--accent);}

#authStepCredentials h2, #authStepVerify h2{font-size:1.25rem; margin:0 0 6px;}
#authStepVerify > p.hint{font-size:.86rem; margin:0 0 22px;}

.verify-sent-banner{
  display:flex; align-items:center; gap:9px; font-size:.84rem;
  background:rgba(51,214,166,.1); border:1px solid rgba(51,214,166,.3);
  color:var(--accent); border-radius:9px; padding:10px 14px; margin-bottom:18px;
}
.verify-sent-banner svg{flex:none;}
.verify-sent-banner strong{color:var(--text); font-weight:700;}

#authStepVerify .auth-form input[name=code]{
  text-align:center; font-size:1.5rem; letter-spacing:.35em; font-weight:700; padding:13px;
}

@media (max-width:820px){
  .auth-shell{grid-template-columns:1fr; max-width:440px;}
  .auth-brand{display:none;}
}

/* dashboard */
.dashboard-view{padding:48px 24px 80px;}
.dashboard-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.dashboard-head h1{font-size:1.6rem; margin:0;}
.status-link-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.84rem; color:var(--text-dim); margin-bottom:28px;
}
.status-link-row a{color:var(--accent-2); word-break:break-all;}

.add-monitor-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; margin-bottom:24px;
}
.add-monitor-card form{display:flex; flex-direction:column; gap:14px;}
.add-monitor-card label{font-size:.84rem; color:var(--text-dim); display:flex; flex-direction:column; gap:6px;}
.add-monitor-card input[type=text], .add-monitor-card input[type=url],
.add-monitor-card input[type=number], .add-monitor-card select{
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; color:var(--text); font-family:inherit; font-size:.9rem;
}
.inline-row{flex-direction:row !important; gap:20px !important; flex-wrap:wrap;}
.inline-row label{flex:1; min-width:180px;}
.inline-row .hint{font-size:.74rem; color:var(--text-faint); font-weight:400;}
.checkbox-row{flex-direction:row !important; flex-wrap:wrap; gap:10px 20px !important; align-items:center;}
.checkbox-row label{flex-direction:row; align-items:center; gap:8px; font-size:.86rem;}
.form-actions{display:flex; gap:10px;}

.monitors-list{display:flex; flex-direction:column; gap:14px;}
.monitor-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px;
}
.monitor-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.monitor-card-head h3{margin:0; font-size:1.02rem;}
.monitor-url{font-size:.8rem; color:var(--text-faint);}
.monitor-rows{display:flex; flex-wrap:wrap; gap:10px;}
.badge{font-size:.76rem; font-weight:600; padding:4px 10px; border-radius:999px;}
.badge-up, .badge-valid, .badge-stable, .badge-pass, .badge-clean{background:rgba(51,214,166,.14); color:var(--accent);}
.badge-down, .badge-expired, .badge-error, .badge-fail, .badge-listed{background:rgba(239,95,107,.14); color:var(--danger);}
.badge-warn, .badge-expiring_soon, .badge-changed, .badge-partial{background:rgba(242,184,75,.14); color:var(--warn);}
.badge-unknown, .badge-skipped{background:rgba(154,167,189,.14); color:var(--text-dim);}
.delete-btn{background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:.85rem;}
.delete-btn:hover{color:var(--danger);}
.empty-state{text-align:center; color:var(--text-faint); padding:60px 0;}

.billing-card{
  margin-top:32px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px;
}
.billing-card h2{font-size:1.05rem; margin:0 0 4px; text-transform:capitalize;}
.billing-note{font-size:.85rem; margin:0 0 16px; color:var(--text-dim);}

.team-card{
  margin-top:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px;
}
.team-card h2{font-size:1.05rem; margin:0 0 14px;}
.team-card .inline-row{align-items:flex-end;}
.team-card input[type=email], .team-card input[type=text],
.team-card input[type=url], .team-card input[type=tel]{
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:9px 12px; color:var(--text); font-family:inherit; font-size:.9rem;
}
.team-card input[type=color]{
  width:100%; height:38px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:4px; cursor:pointer;
}
.team-card label{font-size:.84rem; color:var(--text-dim); display:flex; flex-direction:column; gap:6px;}
.team-list{margin-top:18px; display:flex; flex-direction:column; gap:8px;}
.team-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:10px 14px; font-size:.86rem;
}
.team-row .team-row-meta{color:var(--text-faint); font-size:.78rem;}
.billing-actions{display:flex; flex-wrap:wrap; gap:10px;}
.plan-btn-wrap{position:relative; display:inline-flex;}
.plan-btn-wrap .discount-stamp{
  position:absolute; top:-12px; right:-14px; background:var(--danger); color:#fff;
  font-size:.68rem; font-weight:800; padding:2px 9px; border-radius:999px;
  transform:rotate(10deg); box-shadow:0 2px 6px rgba(0,0,0,.25); pointer-events:none; z-index:1;
}

.client-list{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
.client-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:12px 16px;
}
.client-row-name{font-weight:600; font-size:.9rem;}
.client-row-meta{font-size:.78rem; color:var(--text-faint); margin-top:2px;}

.report-output{margin-top:16px;}
.report-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.report-table th, .report-table td{
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--border);
}
.report-table th{color:var(--text-faint); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em;}

/* The desktop app is a Windows install — no point offering it on a phone,
   and it was overflowing/wrapping badly in the topbar at narrow widths.
   Placed last in the file so it reliably wins over earlier .btn rules. */
@media (max-width:640px){
  .desktop-only-link{display:none !important;}
}