:root{
  --vault-deep:#0E211D;
  --ink-teal:#16302B;
  --parchment:#F6EFE2;
  --brass:#C68A3D;
  --clay:#B5503A;
  --sage:#6E8C74;
  --ink:#241C16;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  background:var(--vault-deep);
  font-family:sans-serif;
  display:flex;
  justify-content:center;
  padding:40px 16px;
}
#app{
  width:100%;
  max-width:420px;
  background:var(--parchment);
  border-radius:26px;
  padding:28px 24px;
  color:var(--ink);
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

h1{font-size:22px;margin:0 0 4px;}
.subtitle{font-size:13px;color:#666;margin-bottom:20px;}

.logo-mark{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(160deg, var(--brass), #a9702c);
  display:flex;align-items:center;justify-content:center;
  color:var(--parchment);font-size:22px;font-weight:600;
  margin-bottom:14px;
}

form{display:flex;flex-direction:column;gap:12px;}
input, select{
  padding:10px 12px;border-radius:10px;border:1px solid #ddd;font-size:14px;
}
.phone-row{display:flex;gap:8px;}
.phone-row select{flex:0 0 90px;}
.phone-row input{flex:1;}

button{
  padding:12px;border-radius:10px;border:none;
  background:var(--ink-teal);color:var(--parchment);
  font-size:14px;font-weight:600;cursor:pointer;
}
.link-btn{
  background:none;border:none;color:var(--ink-teal);
  font-size:12.5px;margin-top:14px;cursor:pointer;padding:0;
}
.error{color:var(--clay);font-size:12.5px;margin:0;}

.section-label{
  font-size:11.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(36,28,22,0.45);margin:20px 0 10px;
}

.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.p-card{
  background:#fff;border-radius:20px;padding:14px;
  box-shadow:0 6px 18px rgba(36,28,22,0.08);border:1px solid rgba(36,28,22,0.05);
}
.p-name{font-weight:700;font-size:14px;margin:0 0 6px;text-transform:capitalize;}
.p-status{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.status-connected{color:var(--sage);} .status-connected .dot{background:var(--sage);}
.status-needs_attention{color:var(--clay);} .status-needs_attention .dot{background:var(--clay);}
.status-not_connected{color:rgba(36,28,22,0.4);} .status-not_connected .dot{background:rgba(36,28,22,0.25);}

.note{font-size:12px;color:#999;margin-top:20px;}