:root{
  --bg:#0a0a0a;
  --bg2:#141414;
  --panel:#1b1b1b;
  --panel2:#222222;
  --text:#f1f1f1;
  --muted:#9a9a9a;
  --accent:#e6e6e6;
  --accent2:#b8b8b8;
  --accent3:#7a7a7a;
  --line:rgba(255,255,255,.08);
  --shadow:0 28px 70px rgba(0,0,0,.7);
  --nav-width:190px;
  --nav-gap:24px;
  --nav-offset:107px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(255,255,255,.03), transparent 55%),
    radial-gradient(800px 520px at 50% 120%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

.auth-gate{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  backdrop-filter:blur(8px);
}
.auth-gate.active{display:flex;}
.auth-card{
  width:min(360px, 92vw);
  padding:18px;
  border-radius:14px;
  background:rgba(18,18,18,.9);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  display:grid;
  gap:10px;
}
.auth-title{font-size:18px; font-weight:800;}
.auth-sub{font-size:12px; color:var(--muted);}
.auth-field{display:grid; gap:6px; font-size:12px;}
.auth-error{color:#ef4444; font-size:12px; min-height:16px;}

.side-nav{
  position:fixed;
  top:14px;
  left:14px;
  width:var(--nav-width);
  padding:12px;
  background:rgba(10,10,10,.7);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  backdrop-filter:blur(12px);
  z-index:35;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.side-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
}
.nav-item{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
  font-weight:700;
  transition:.15s ease;
}
.nav-item:hover{border-color:rgba(255,255,255,.3);}
.nav-item.active{
  background:linear-gradient(135deg, rgba(214,214,214,.25), rgba(120,120,120,.2));
  border-color:rgba(214,214,214,.55);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.nav-item.logout{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
}

.page{
  margin-left:calc(var(--nav-width) + var(--nav-gap));
}
.bg-glow{
  position:fixed; inset:-20%;
  background:conic-gradient(from 90deg, rgba(255,255,255,.04), rgba(255,255,255,.02), rgba(255,255,255,.03));
  filter:blur(140px);
  z-index:-1;
  opacity:.5;
}
.wrap{max-width:1160px; margin:0 auto; padding:0 20px;}

.top-actions{
  position:fixed;
  left:calc(50% + var(--nav-offset));
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  padding:10px 14px;
  background:rgba(10,12,18,.78);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  backdrop-filter:blur(12px);
  z-index:30;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.checker-mode .top-actions{display:none;}
.checker-mode .settings-dock{display:none;}
.tools-mode .top-actions{display:none;}
.tools-mode .settings-dock{display:none;}
.top-actions .btn{
  min-width:120px;
  justify-content:center;
  border-radius:999px;
  padding:10px 16px;
}

.hero{padding:48px 0 28px;}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch;}
.hero-copy h1{
  font-size:clamp(30px, 4vw, 54px);
  line-height:1.05;
  margin:10px 0 12px;
  text-shadow:0 2px 12px rgba(255,255,255,.08);
}
.logo-mark{
  padding:10px 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Black Ops One", "Impact", system-ui, sans-serif;
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#f2f2f2;
  background:
    radial-gradient(120px 80px at 30% 20%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(120px 80px at 70% 80%, rgba(255,255,255,.1), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 0 18px rgba(255,255,255,.06);
}
.sub{color:var(--muted); max-width:60ch;}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.hero-actions{
  background:rgba(8,10,16,.55);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  width:fit-content;
  backdrop-filter:blur(10px);
}
.hero-actions .btn{min-width:130px; justify-content:center;}

.hero-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:12px;
  backdrop-filter:blur(14px);
}
.settings-card{position:relative;}
.settings-card > *{position:relative; z-index:1;}
.settings-dock{
  position:fixed;
  top:14px;
  left:calc(50% + var(--nav-offset));
  transform:translateX(-50%);
  width:min(360px, 92vw);
  z-index:28;
}
.settings-dock.collapsed .settings-grid{display:none;}
.settings-dock.collapsed .settings-head{margin-bottom:0;}
.settings-dock .compact{padding:8px 10px; font-size:12px;}
.settings-card:before{
  content:"";
  position:absolute;
  top:10px; bottom:10px; left:10px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--accent), var(--accent2), var(--accent3));
  opacity:.6;
}
.settings-card:after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  background:radial-gradient(220px 120px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
             radial-gradient(260px 140px at 80% 20%, rgba(255,255,255,.08), transparent 60%),
             radial-gradient(220px 120px at 50% 100%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
  opacity:.6;
  z-index:0;
}
.settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-left:14px;
}
.settings-head{
  background:rgba(11,14,20,.55);
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px 10px;
  backdrop-filter:blur(12px);
}
.settings-title{font-weight:800; font-size:15px; letter-spacing:.01em;}
.settings-sub{color:var(--muted); font-size:10px; margin-top:2px;}
.settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
  padding-left:10px;
}
.field{display:flex; flex-direction:column; gap:4px; font-size:12px;}
.field span{font-weight:600; letter-spacing:.02em; color:#e6ebff; display:inline-flex; align-items:center; gap:6px;}
.field small{color:var(--muted); font-size:10px;}
.field.full{grid-column:1 / -1;}

.chip-group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}
.chip:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.25);}
.chip.active{
  background:linear-gradient(135deg, rgba(214,214,214,.25), rgba(120,120,120,.2));
  border-color:rgba(214,214,214,.55);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.hidden-select{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
}

input, select{
  padding:7px 9px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Arial;
}
input:focus, select:focus{
  outline:0;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.btn{
  padding:11px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.icon-btn{
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.icon-btn:hover{
  border-color:rgba(255,255,255,.35);
  box-shadow:0 12px 26px rgba(0,0,0,.4);
}
.icon-btn .icon{
  font-size:16px;
  line-height:1;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.3);}
.btn.primary{
  background:linear-gradient(135deg, rgba(214,214,214,.35), rgba(120,120,120,.25));
  border-color:rgba(214,214,214,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.btn.ghost{
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.1);
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .settings-grid{grid-template-columns:1fr;}
  .settings-head{flex-direction:column; align-items:flex-start;}
  .top-actions{
    position:static;
    margin:10px 20px 0;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .settings-dock{
    position:static;
    width:100%;
    margin-top:12px;
  }
  .main-split{grid-template-columns:1fr;}
  .previewwrap{height:420px;}
  .side-nav{
    position:static;
    width:auto;
    margin:10px 20px 0;
    flex-direction:row;
    align-items:center;
  }
  .page{
    margin-left:0;
  }
}

.main-split{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.main-split > section{
  margin:18px 0 60px;
  min-width:0;
}
.live-panel{
  width:100%;
  display:flex;
  flex-direction:column;
}
.output{}
.output-head{display:flex; align-items:center; justify-content:space-between;}
.status{font-size:12px; color:var(--muted);}
.codewrap{
  background:#0b0f18;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  height:min(72vh, 720px);
}
.code-actions{display:flex; justify-content:flex-end; color:var(--muted); font-size:12px; margin-bottom:8px;}
.code{
  white-space:pre;
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  color:#dfe7ff;
  flex:1;
  overflow:auto;
}

.checker-form{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.checker-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.checker-filters{
  display:flex;
  gap:6px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.filter-chip{font-size:11px;}
.checker-bulk{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.checker-select-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--text);
}
.checker-form input{
  flex:1;
}
.checker-list{
  display:grid;
  gap:8px;
}
.checker-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-size:12px;
  position:relative;
  overflow:hidden;
}
.checker-item input[type="checkbox"]{
  margin-right:4px;
}
.checker-item:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:rgba(255,255,255,.18);
}
.checker-item[data-status="waiting"]:before{background:#ef4444;}
.checker-item[data-status="index"]:before{background:#facc15;}
.checker-item[data-status="queue"]:before{background:#22c55e;}

.checker-link{
  color:var(--text);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
.checker-actions{
  display:flex;
  gap:6px;
}
.checker-meta{
  color:var(--muted);
  font-size:10px;
  margin-left:10px;
  white-space:nowrap;
}
.checker-btn{
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:var(--text);
  border-radius:8px;
  padding:6px 8px;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
}
.checker-btn.waiting{border-color:#ef4444; color:#ef4444;}
.checker-btn.index{border-color:#facc15; color:#facc15;}
.checker-btn.queue{border-color:#22c55e; color:#22c55e;}

.previewwrap{
  background:#0b0f18;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow);
  height:min(72vh, 720px);
  display:flex;
  flex-direction:column;
}
.live-preview{
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
  background:#0a0a0a;
  overflow:auto;
}

/* Scrollbar styling */
.code::-webkit-scrollbar,
.live-preview::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.code::-webkit-scrollbar-thumb,
.live-preview::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:10px;
  border:2px solid rgba(0,0,0,.25);
}
.code::-webkit-scrollbar-track,
.live-preview::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:10px;
}

.preview-backdrop{
  position:fixed; inset:0; background:rgba(5,5,5,.72);
  opacity:0; pointer-events:none; transition:.2s ease;
  z-index:40;
}

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
}
.tool-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  min-height:130px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  color:var(--text);
  transition:.15s ease;
  overflow:hidden;
  padding-bottom:48px;
}
.tool-card:hover{
  border-color:rgba(255,255,255,.35);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}
.tool-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.tool-name{font-weight:800; font-size:14px;}
.tool-url{font-size:11px; color:var(--muted);}
.tool-desc{margin-top:6px; color:var(--muted); font-size:12px;}
.tool-hover{
  position:absolute;
  left:12px;
  bottom:12px;
  display:flex;
  justify-content:flex-start;
  opacity:0;
  transform:translateY(6px);
  transition:.15s ease;
}
.tool-card:hover .tool-hover{opacity:1; transform:translateY(0);}
.tool-open{
  background:linear-gradient(135deg, rgba(214,214,214,.35), rgba(120,120,120,.25));
  border:1px solid rgba(214,214,214,.55);
  color:var(--text);
  padding:6px 12px;
  border-radius:12px;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.preview-panel{
  position:fixed; left:50%; top:50%; transform:translate(-50%, -50%) scale(.98);
  width:min(1200px, 92vw); height:min(720px, 88vh);
  background:linear-gradient(180deg, rgba(18,18,18,.52), rgba(12,12,12,.42));
  border:1px solid rgba(255,255,255,.10); border-radius:18px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:.2s ease;
  z-index:50; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  backdrop-filter:blur(22px);
}
.preview-panel.active, .preview-backdrop.active{opacity:1; pointer-events:auto;}
.preview-panel.active{transform:translate(-50%, -50%) scale(1);} 
.preview-head{display:flex; align-items:center; justify-content:space-between;}
.preview-head{
  background:rgba(12,12,12,.7);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  backdrop-filter:blur(10px);
}
.preview-head h3{margin:0; font-size:18px;}
.preview-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px; overflow:auto; padding-bottom:6px;
}
.preview-card{
  background:#121212; border:1px solid rgba(255,255,255,.10); border-radius:14px;
  padding:10px; display:flex; flex-direction:column; gap:8px;
  cursor:pointer; transition:.15s ease;
}
.preview-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 22px rgba(255,255,255,.12);
}
.preview-card.selected{outline:2px solid rgba(214,214,214,.6);} 
.preview-title{display:none;}
.preview-viewport{
  position:relative;
  width:100%;
  height:200px;
  border-radius:10px;
  overflow:hidden;
  background:#0a0a0a;
}
.preview-frame{
  position:absolute;
  inset:0;
  border:0;
  width:220%;
  height:440px;
  transform:scale(.45);
  transform-origin:top left;
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .preview-viewport{height:220px;}
  .output{max-width:100%;}
}

.preview-meta{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px;}
.preview-label{font-size:11px; color:var(--muted);}
.preview-zoom{font-size:11px; padding:6px 10px; border-radius:10px;}

.full-preview{
  position:fixed; left:50%; top:50%; transform:translate(-50%, -50%) scale(.98);
  width:min(1400px, 94vw); height:min(900px, 92vh);
  background:linear-gradient(180deg, rgba(18,22,34,.98), rgba(12,16,26,.95));
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:.2s ease;
  z-index:60; padding:12px; display:flex; flex-direction:column; gap:10px;
}
.full-preview.active{opacity:1; pointer-events:auto; transform:translate(-50%, -50%) scale(1);} 
.full-head{display:flex; align-items:center; justify-content:space-between;}
.full-title{font-weight:700;}
.full-frame{width:100%; height:100%; border:0; border-radius:12px; background:#0a0e18;}
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  background:rgba(12,12,12,.9);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  opacity:0;
  transform:translateY(6px);
  transition:.2s ease;
  z-index:60;
  backdrop-filter:blur(10px);
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}

/* Custom layout tweaks */
.auth-page .page{margin-left:0;}
.auth-hero{
  min-height:80vh;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:center;
  padding:60px 24px;
  max-width:1100px;
  margin:0 auto;
}
.auth-copy h1{font-size:clamp(28px, 4vw, 48px); margin:10px 0;}
.auth-copy p{color:var(--muted); max-width:50ch;}
.auth-kicker{letter-spacing:.2em; text-transform:uppercase; font-size:11px; color:var(--muted);}
.auth-inline{width:min(380px, 92vw); justify-self:center;}
.auth-form{display:grid; gap:10px;}
@media (max-width: 960px){
  .auth-hero{grid-template-columns:1fr; text-align:center;}
  .auth-inline{justify-self:center;}
}

.compact-panel{
  max-width:1160px;
  margin:18px auto;
}
.row-form{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.row-form label{display:grid; gap:6px; min-width:220px;}
.row-form input,.row-form select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
}
.row-form select{min-width:200px;}
.center-box{
  max-width:980px;
}
.domain-check{
  align-items:center;
}
.check-result{
  font-size:12px;
  color:var(--muted);
  padding:8px 10px;
  border:1px dashed var(--line);
  border-radius:10px;
}
.muted{color:var(--muted);}
.mini-table{display:grid; gap:6px; color:var(--muted);}
.mini-table strong{color:var(--text); margin-right:8px;}
.chip-row{display:flex; gap:8px; margin:8px 0 14px; flex-wrap:wrap;}
.stats-list{display:flex; gap:20px; margin:6px 0 12px; color:var(--muted);}
.stats-list strong{color:var(--text); margin-left:6px;}
.seo-control .panel-head{align-items:flex-start;}
.checker-select{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:6px;}
.data-table{
  display:grid;
  gap:8px;
}
.data-head,.data-row{
  display:grid;
  grid-template-columns:2fr 2fr 1fr 1fr;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.03);
}
.data-table.three .data-head,
.data-table.three .data-row{
  grid-template-columns:2fr 2fr 1fr;
}
.data-head{font-size:12px; color:var(--muted);}
.data-row span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.data-row select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:8px;
  padding:6px 8px;
  margin-right:6px;
}
.cf-save.compact{
  padding:6px 10px;
  font-size:11px;
  border-radius:999px;
}
.domain-check .btn{
  align-self:flex-end;
}
.domain-check .check-result{
  align-self:flex-end;
}
.row-form{
  align-items:flex-end;
}
.domain-check .check-result{
  min-width:180px;
}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px;
}
.settings-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  display:grid;
  gap:10px;
}
.settings-card label{display:grid; gap:6px;}
.settings-card input,
.settings-card select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
}

.code-editor{
  width:100%;
  min-height:420px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  color:#dbe4ff;
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  padding:14px;
  border-radius:12px;
  resize:vertical;
}

.domain-cell{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}

.ns-popover{
  position:absolute;
  top:30px;
  left:0;
  z-index:20;
  min-width:220px;
  max-width:340px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(16,18,24,.96);
  box-shadow:var(--shadow);
}

.ns-popover div{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}