:root{
  --bg:#fafafa;
  --panel:#ffffff;
  --fg:#0a0a0a;
  --fg-2:#171717;
  --muted:#666666;
  --muted-2:#8f8f8f;
  --border:#ebebeb;
  --border-2:#e0e0e0;
  --hover:#f5f5f5;
  --accent:#0a0a0a;
  --accent-fg:#ffffff;
  --blue:#0070f3;
  --green:#0a7d33;
  --green-bg:#edf7ed;
  --red:#d11a2a;
  --red-bg:#fdeded;
  --radius:8px;
  --radius-lg:12px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px -8px rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--fg);
  min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;letter-spacing:-.011em;
}

/* icons */
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:60px;border-bottom:1px solid var(--border);background:var(--panel)}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.02em}
.brand-mark{width:20px;height:20px;fill:var(--fg)}
.topbar-right{display:flex;align-items:center;gap:10px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--muted)}
.status .ring{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(10,125,51,.12)}
.iconbtn{display:grid;place-items:center;cursor:pointer;background:var(--panel);border:1px solid var(--border-2);
  color:var(--fg-2);width:34px;height:34px;border-radius:7px;transition:.15s}
.iconbtn:hover{background:var(--hover);border-color:var(--muted-2)}

/* stage + cards */
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}
.card{width:100%;max-width:520px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow);
  animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card-head h1,.card.auth h1,#success h1{font-size:21px;font-weight:600;letter-spacing:-.02em}
.muted{color:var(--muted);font-size:14px;line-height:1.55;margin-top:7px}
.mono{font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:.92em}

/* blocks */
.block{margin-top:26px;animation:fade .28s both;position:relative}
/* keep the open domain dropdown above the details block below it */
.block[data-block=pick],.block[data-block=new]{z-index:20}
.block[data-block=details]{z-index:1}
.block-label{display:block;font-size:13px;font-weight:550;color:var(--fg-2);margin-bottom:10px}

/* source choice */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;background:var(--panel);
  border:1px solid var(--border-2);border-radius:var(--radius);padding:14px;transition:.15s;color:var(--fg)}
.choice:hover{border-color:var(--muted-2);background:var(--hover)}
.choice.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.choice-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:7px;
  background:var(--hover);border:1px solid var(--border);color:var(--fg-2)}
.choice.sel .choice-ico:not(.brandtile){background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
/* real brand logos keep their own colors on a clean white tile */
.brandtile{background:#fff!important;border-color:var(--border-2)!important}
.brand-logo{width:21px;height:21px}
.choice-body{display:flex;flex-direction:column;gap:2px}
.choice-title{font-weight:600;font-size:14px}
.choice-sub{font-size:12px;color:var(--muted)}

/* segmented */
.seg{display:inline-flex;gap:2px;background:var(--hover);border:1px solid var(--border-2);padding:3px;border-radius:8px}
.seg-btn{cursor:pointer;border:none;background:transparent;color:var(--muted);font-weight:550;font-size:13px;
  padding:8px 16px;border-radius:6px;transition:.12s;font-family:inherit}
.seg-btn:hover{color:var(--fg)}
.seg-btn.sel{background:var(--panel);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* inputs */
.field{display:block}
.field-cap{display:block;font-size:13px;font-weight:500;color:var(--fg-2);margin-bottom:7px}
input,select{width:100%;background:var(--panel);border:1px solid var(--border-2);border-radius:var(--radius);
  color:var(--fg);font-size:14px;padding:10px 12px;font-family:inherit;transition:.15s;outline:none;letter-spacing:-.01em}
input::placeholder{color:var(--muted-2)}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* combobox */
.combo{position:relative}
.combo-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none}
.combo input{padding-left:36px}
.combo-list{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:230px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--border-2);border-radius:var(--radius);padding:5px;z-index:5;
  display:none;box-shadow:var(--shadow)}
.combo-list.open{display:block;animation:fade .14s both}
.combo-item{display:flex;align-items:center;padding:9px 11px;border-radius:6px;cursor:pointer;font-size:13.5px;
  font-weight:500;transition:.1s}
.combo-item:hover,.combo-item.hi{background:var(--hover)}
.combo-item .tld{margin-left:auto;font-size:12px;color:var(--muted-2)}
.combo-empty{padding:14px;color:var(--muted);font-size:13px;text-align:center}
.chosen{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:550;color:var(--green);
  background:var(--green-bg);border:1px solid #cfe8cf;padding:9px 12px;border-radius:var(--radius)}
.chosen .ico-sm{stroke:var(--green)}

/* availability */
.avail{margin-top:12px;border:1px solid var(--border-2);border-radius:var(--radius);padding:14px 16px;
  display:flex;align-items:center;gap:13px;animation:fade .2s both}
.avail.ok{background:var(--green-bg);border-color:#cfe8cf}
.avail.no{background:var(--red-bg);border-color:#f3cccc}
.avail .a-ico{display:grid;place-items:center;flex:none}
.avail.ok .a-ico{color:var(--green)} .avail.no .a-ico{color:var(--red)}
.avail .a-main{font-weight:600;font-size:14px}
.avail .a-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.avail .a-price{margin-left:auto;text-align:right}
.avail .a-price b{font-size:18px;font-weight:650;color:var(--fg)}
.avail .a-price span{display:block;font-size:11.5px;color:var(--muted)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-2);
  border-top-color:var(--fg);animation:spin .6s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid transparent;
  font-family:inherit;font-weight:550;font-size:14px;padding:10px 16px;border-radius:var(--radius);transition:.15s;
  letter-spacing:-.01em}
.btn-block{width:100%}
.btn-sm{padding:8px 13px;font-size:13px}
.btn-primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn-primary:hover:not(:disabled){background:#262626}
.btn-primary:disabled{background:var(--hover);color:var(--muted-2);border-color:var(--border-2);cursor:not-allowed}
.btn-secondary{background:var(--panel);color:var(--fg);border-color:var(--border-2)}
.btn-secondary:hover{background:var(--hover);border-color:var(--muted-2)}
.fineprint{text-align:center;color:var(--muted);font-size:12.5px;margin-top:12px}

/* progress */
.prog-list{list-style:none;margin-top:6px}
.prog-list li{display:flex;align-items:center;gap:13px;padding:13px 2px;font-size:14px;font-weight:500;
  color:var(--muted-2);border-bottom:1px solid var(--border)}
.prog-list li:last-child{border-bottom:none}
.prog-list li .p-ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--border-2);background:var(--panel)}
.prog-list li .p-ico .ico-sm{width:13px;height:13px}
.prog-list li.run{color:var(--fg)}
.prog-list li.done{color:var(--fg)}
.prog-list li.done .p-ico{background:var(--accent);border-color:var(--accent)}
.prog-list li.done .p-ico .ico-sm{stroke:var(--accent-fg)}

/* success */
#success{text-align:center}
.success-mark{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--green-bg);border:1px solid #cfe8cf;margin-bottom:6px;animation:fade .4s both}
.success-mark svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.success-domain{font-weight:550;color:var(--fg-2)}
.link-grid{display:grid;gap:8px;margin:22px 0 6px;text-align:left}
.link-grid a{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg);
  border:1px solid var(--border-2);border-radius:var(--radius);padding:12px 14px;font-weight:500;font-size:13.5px;transition:.15s}
.link-grid a:hover{background:var(--hover);border-color:var(--muted-2)}
.link-grid a .l-ico{color:var(--muted)}
.link-grid a .l-arrow{margin-left:auto;color:var(--muted-2)}

/* auth */
.card.auth{max-width:400px;text-align:center}
.auth-mark{width:30px;height:30px;fill:var(--fg);margin-bottom:4px}
.card.auth form{margin-top:24px;text-align:left}
.form-err{margin-top:13px;background:var(--red-bg);border:1px solid #f3cccc;color:var(--red);
  font-size:13px;font-weight:500;padding:9px 12px;border-radius:var(--radius)}

/* user management */
.overlay{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.32);backdrop-filter:blur(2px);
  display:flex;align-items:flex-start;justify-content:center;padding:64px 20px;animation:fade .18s both}
.panel{width:100%;max-width:540px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.panel-head h2{font-size:18px;font-weight:600;letter-spacing:-.02em}
.panel-sub{font-size:13px;color:var(--muted);margin-top:3px}
.adduser{display:grid;grid-template-columns:1.3fr 1.3fr .8fr auto;gap:8px}
.adduser input,.adduser select{font-size:13px;padding:9px 11px}
.form-err{font-size:12.5px}
.users-list{margin-top:18px;display:flex;flex-direction:column;gap:7px}
.urow{display:flex;align-items:center;gap:10px;border:1px solid var(--border-2);border-radius:var(--radius);padding:11px 13px}
.urow .u-email{font-weight:550;font-size:13.5px}
.u-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;border:1px solid var(--border-2)}
.u-badge.admin{background:#f0f0ff;border-color:#dcdcff;color:#4b4bd6}
.u-badge.user{background:var(--hover);color:var(--muted)}
.urow .u-off{font-size:11px;font-weight:600;color:var(--red);background:var(--red-bg);border:1px solid #f3cccc;padding:2px 8px;border-radius:5px}
.urow .u-actions{margin-left:auto;display:flex;gap:6px}
.u-act{display:grid;place-items:center;cursor:pointer;background:var(--panel);border:1px solid var(--border-2);
  color:var(--muted);border-radius:6px;width:30px;height:30px;transition:.13s}
.u-act:hover{color:var(--fg);background:var(--hover);border-color:var(--muted-2)}
.u-act.danger:hover{color:var(--red);background:var(--red-bg);border-color:#f3cccc}
.u-act .ico-sm{width:15px;height:15px}

.foot{text-align:center;color:var(--muted-2);font-size:12px;padding:18px;border-top:1px solid var(--border)}
.hidden{display:none!important}

@media(max-width:560px){
  .card{padding:24px}
  .choice-grid,.field-row{grid-template-columns:1fr}
  .adduser{grid-template-columns:1fr 1fr}
}