:root{
  --paper:      #EEF3EF;
  --surface:    #FFFFFF;
  --ink:        #17241F;
  --ink-soft:   #55665F;
  --ink-faint:  #8A9A93;
  --primary:    #0B6E4F;
  --primary-2:  #0E8A63;
  --accent:     #E8A33D;
  --danger:     #C1443C;
  --wire:       #D7E2DB;
  --wire-2:     #C3D2CA;
  --radius:     14px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Manrope', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 480px at 8% -10%, #E4EEE7 0%, transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
::selection{ background:var(--primary); color:#fff; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

.wrap{ max-width:960px; margin:0 auto; padding:0 20px; }

/* ---------- Header ---------- */
.site-header{ padding:28px 0 8px; }
.site-header__row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; }
.brand__mark{
  font-family:var(--mono); font-weight:700; font-size:22px;
  letter-spacing:-0.02em; color:var(--ink);
}
.brand__mark span{ color:var(--primary); }
.brand__tag{ font-size:13px; color:var(--ink-faint); font-weight:500; }
.header-note{
  font-size:13px; color:var(--ink-faint);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}

/* ---------- Tool nav ---------- */
.tool-nav{
  display:flex;
  gap:6px;
  margin-top:18px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.tool-nav::-webkit-scrollbar{ display:none; }
.tool-nav__item{
  flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px 8px 0 0;
  border:1px solid transparent;
  border-bottom:2px solid transparent;
  transition:color .12s ease, border-color .12s ease;
}
.tool-nav__item:hover{ color:var(--primary); }
.tool-nav__item.is-active{
  color:var(--primary);
  border-bottom-color:var(--primary);
}

/* ---------- Hero panel ---------- */
.panel{
  margin-top:18px;
  background:var(--surface);
  border:1px solid var(--wire);
  border-radius:var(--radius);
  box-shadow: 0 1px 0 rgba(23,36,31,0.02), 0 12px 30px -20px rgba(23,36,31,0.25);
  overflow:hidden;
}
.panel__label{
  display:flex; align-items:center; gap:8px;
  padding:10px 18px;
  background:linear-gradient(180deg, #F6FAF7, #EFF5F1);
  border-bottom:1px solid var(--wire);
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-faint);
}
.panel__label .dot{ width:7px; height:7px; border-radius:50%; background:var(--wire-2); }
.panel__body{ padding:26px 22px 22px; }

.hero-title{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(20px, 3.4vw, 28px);
  letter-spacing:-0.01em; margin:0 0 6px;
}
.hero-sub{ margin:0 0 22px; color:var(--ink-soft); font-size:15px; max-width:56ch; }

/* ---------- Input row (bütün alətlərdə ortaq) ---------- */
.lookup-row{ display:flex; gap:10px; flex-wrap:wrap; }
.input-shell{
  flex:1 1 320px;
  display:flex; align-items:center; gap:10px;
  background:var(--paper);
  border:1px solid var(--wire-2);
  border-radius:10px;
  padding:0 4px 0 16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-shell:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(11,110,79,0.12);
}
.input-shell__prompt{ font-family:var(--mono); color:var(--primary); font-weight:600; font-size:15px; }
.input-shell input{
  flex:1; border:0; background:transparent; padding:14px 4px;
  font-family:var(--mono); font-size:15px; color:var(--ink); min-width:0;
}
.input-shell input::placeholder{ color:var(--ink-faint); }

.btn-check{
  display:flex; align-items:center; gap:8px;
  background:var(--primary); color:#fff; border:0; border-radius:10px;
  padding:0 20px; font-family:var(--sans); font-weight:700; font-size:15px;
  cursor:pointer; transition:background .15s ease, transform .05s ease;
}
.btn-check:hover{ background:var(--primary-2); }
.btn-check:active{ transform:translateY(1px); }
.btn-check:disabled{ opacity:.6; cursor:progress; }

.type-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.type-chip{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:0.02em;
  padding:7px 14px; border-radius:8px; border:1px solid var(--wire-2);
  background:var(--surface); color:var(--ink-soft); cursor:pointer; transition:all .12s ease;
}
.type-chip:hover{ border-color:var(--primary); color:var(--primary); }
.type-chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.field-label{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--ink-faint); margin:16px 0 6px; display:block;
}

.error-msg{ display:none; margin-top:14px; color:var(--danger); font-size:14px; font-weight:600; }
.error-msg.show{ display:flex; align-items:center; gap:8px; }

.hint-msg{ margin-top:12px; font-size:12.5px; color:var(--ink-faint); }

/* ---------- Summary strip ---------- */
.summary{
  display:none; margin-top:22px; align-items:center; gap:14px;
  padding:16px 20px; border-radius:12px; border:1px solid var(--wire);
  background:var(--surface); flex-wrap:wrap;
}
.summary.show{ display:flex; }
.summary__badge{
  display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  padding:6px 12px; border-radius:999px;
}
.summary__badge.ok{ background:#E4F3EC; color:var(--primary); }
.summary__badge.pending{ background:#FBF0DD; color:#9C6A16; }
.summary__badge.warn{ background:#F7E6E4; color:var(--danger); }
.summary__meta{ font-size:13px; color:var(--ink-faint); font-family:var(--mono); }
.summary__domain{ font-family:var(--mono); font-weight:700; color:var(--ink); margin-right:auto; }

/* ---------- Resolver / result grid ---------- */
.grid{ margin-top:16px; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.led-card{
  position:relative; background:var(--surface); border:1px solid var(--wire);
  border-radius:12px; padding:16px 16px 14px;
  opacity:0; transform:translateY(6px); animation:rise .35s ease forwards;
}
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
.led-card__top{ display:flex; align-items:center; gap:10px; }
.led-card__icon{
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink-soft); font-size:15px; flex-shrink:0;
}
.led-card__name{ font-weight:700; font-size:14px; line-height:1.2; }
.led-card__loc{ font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; }
.led-dot{ width:9px; height:9px; border-radius:50%; margin-left:auto; flex-shrink:0; background:var(--wire-2); }
.led-dot.checking{
  background:var(--accent); box-shadow:0 0 0 0 rgba(232,163,61,0.5);
  animation:pulse 1.1s ease-in-out infinite;
}
.led-dot.ok{ background:var(--primary); box-shadow:0 0 8px rgba(11,110,79,0.35); }
.led-dot.empty{ background:var(--ink-faint); }
.led-dot.error{ background:var(--danger); box-shadow:0 0 8px rgba(193,68,60,0.3); }
.led-dot.mismatch{ background:var(--accent); box-shadow:0 0 8px rgba(232,163,61,0.35); }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(232,163,61,0.45); }
  50%{ box-shadow:0 0 0 5px rgba(232,163,61,0); }
}
.led-card__records{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--wire);
  font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
  display:flex; flex-direction:column; gap:4px; word-break:break-all;
}
.led-card__records .muted{ color:var(--ink-faint); font-style:italic; }
.led-card__latency{ margin-top:10px; font-size:11px; color:var(--ink-faint); font-family:var(--mono); }

/* ---------- Empty state ---------- */
.empty-state{ margin-top:30px; padding:40px 20px; text-align:center; color:var(--ink-faint); }
.empty-state i{ font-size:26px; color:var(--wire-2); margin-bottom:10px; display:block; }
.empty-state p{ margin:0; font-size:14px; max-width:40ch; margin-inline:auto; }

/* ---------- Check-list rows (SPF/DMARC, Blacklist və s.) ---------- */
.check-list{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.check-row{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; border:1px solid var(--wire); border-radius:10px; background:var(--surface);
  opacity:0; transform:translateY(6px); animation:rise .3s ease forwards;
}
.check-row__icon{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; font-size:14px; color:#fff;
}
.check-row__icon.ok{ background:var(--primary); }
.check-row__icon.warn{ background:var(--accent); }
.check-row__icon.bad{ background:var(--danger); }
.check-row__icon.neutral{ background:var(--wire-2); color:var(--ink-soft); }
.check-row__body{ flex:1; min-width:0; }
.check-row__title{ font-weight:700; font-size:14px; margin-bottom:3px; }
.check-row__detail{ font-size:13px; color:var(--ink-soft); }
.check-row__raw{
  margin-top:8px; font-family:var(--mono); font-size:12px; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--wire); border-radius:8px;
  padding:8px 10px; word-break:break-all; white-space:pre-wrap;
}

/* ---------- Key/value table (WHOIS) ---------- */
.kv-table{ margin-top:18px; border:1px solid var(--wire); border-radius:12px; overflow:hidden; }
.kv-row{ display:flex; border-top:1px solid var(--wire); }
.kv-row:first-child{ border-top:0; }
.kv-row__key{
  flex:0 0 160px; padding:12px 14px; font-family:var(--mono); font-size:12px;
  color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em;
  background:var(--paper);
}
.kv-row__val{ flex:1; padding:12px 14px; font-size:13.5px; color:var(--ink); word-break:break-word; }
.kv-row__val ul{ margin:0; padding-left:18px; }

/* ---------- SSL timeline ---------- */
.ssl-gauge{
  margin-top:18px; padding:18px; border:1px solid var(--wire); border-radius:12px; background:var(--surface);
}
.ssl-gauge__bar{ height:8px; border-radius:999px; background:var(--wire); overflow:hidden; }
.ssl-gauge__fill{ height:100%; border-radius:999px; background:var(--primary); transition:width .4s ease; }
.ssl-gauge__fill.warn{ background:var(--accent); }
.ssl-gauge__fill.bad{ background:var(--danger); }
.ssl-gauge__meta{ display:flex; justify-content:space-between; margin-top:8px; font-size:12.5px; color:var(--ink-faint); font-family:var(--mono); }

/* ---------- Zone generator ---------- */
.zone-builder{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.zone-row{ display:grid; grid-template-columns:110px 1fr 1fr 70px 32px; gap:8px; }
.zone-row select, .zone-row input{
  font-family:var(--mono); font-size:13px; padding:9px 10px;
  border:1px solid var(--wire-2); border-radius:8px; background:var(--paper); color:var(--ink); min-width:0;
}
.zone-row__remove{
  border:1px solid var(--wire-2); background:var(--surface); border-radius:8px; color:var(--danger);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.btn-ghost{
  align-self:flex-start; background:transparent; border:1px dashed var(--wire-2);
  color:var(--ink-soft); border-radius:8px; padding:8px 14px; font-family:var(--sans);
  font-weight:600; font-size:13px; cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
.zone-output{
  margin-top:6px; font-family:var(--mono); font-size:12.5px; line-height:1.6;
  background:var(--ink); color:#DCE9E3; border-radius:10px; padding:16px;
  white-space:pre; overflow-x:auto;
}

/* ---------- Footer ---------- */
.site-footer{
  margin:48px 0 30px; padding-top:18px; border-top:1px solid var(--wire);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; font-size:12.5px; color:var(--ink-faint);
}
.site-footer__providers{ display:flex; gap:10px; flex-wrap:wrap; }
.site-footer__providers i{ margin-right:4px; }
.site-footer__links{ display:flex; gap:12px; flex-wrap:wrap; }
.site-footer__links a{ color:var(--ink-faint); text-decoration:none; }
.site-footer__links a:hover{ color:var(--primary); text-decoration:underline; }

@media (max-width:700px){
  .wrap{ padding:0 14px; }
  .site-header{ padding:20px 0 4px; }
  .site-header__row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .header-note{ font-size:12px; }
  .panel{ margin-top:18px; border-radius:12px; }
  .panel__body{ padding:18px 16px 16px; }
  .hero-sub{ font-size:14px; margin-bottom:18px; }

  .lookup-row{ flex-direction:column; }
  .input-shell{ flex-basis:auto; width:100%; padding:0 4px 0 14px; }
  .input-shell input{ padding:13px 4px; font-size:16px; } /* 16px = iOS auto-zoom qarşısını alır */
  .btn-check{ width:100%; justify-content:center; padding:14px; }

  .type-row{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin:14px -16px 0; padding:0 16px 4px; scrollbar-width:none;
  }
  .type-row::-webkit-scrollbar{ display:none; }
  .type-chip{ flex:0 0 auto; }

  .summary{ padding:14px; gap:8px; }
  .summary__domain{ width:100%; margin-right:0; order:-1; font-size:13px; }

  .grid{ grid-template-columns:1fr; gap:10px; }
  .led-card{ padding:14px 14px 12px; }

  .kv-row{ flex-direction:column; }
  .kv-row__key{ flex:none; }

  .zone-row{ grid-template-columns:1fr 1fr; }
  .zone-row__remove{ grid-column:span 2; }
}

@media (max-width:380px){
  .brand__mark{ font-size:19px; }
}

@media (prefers-reduced-motion: reduce){
  .led-card, .check-row{ animation:none; opacity:1; transform:none; }
  .led-dot.checking{ animation:none; }
}