/* PlaneHost free tools — calm, uses the site tokens from styles.css (navy + muted accents, no glow) */
.tl-hero-in{max-width:820px}
.tl-hero .lead{color:#d0d8f5}
.tl-hero h1 em{color:#fff;font-style:normal;background:linear-gradient(transparent 62%,rgba(235,132,35,.45) 62%)}
.tl-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;background:#fff;border-radius:16px;padding:8px;box-shadow:0 10px 30px rgba(10,18,60,.25)}
.tl-field{flex:1 1 260px;display:flex;align-items:center;gap:10px;padding-inline:12px;min-width:0}
.tl-field svg{width:20px;height:20px;color:var(--muted);flex:none}
.tl-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.05rem;padding-block:12px;color:var(--ink)}
.tl-form select{border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--bg-alt);color:var(--ink);min-height:48px;max-width:100%}
.tl-form .btn{min-height:48px;padding-inline:26px}
.tl-form .btn[disabled]{opacity:.6;cursor:progress}
.tl-seg{display:flex;background:var(--bg-alt);border-radius:10px;padding:4px;gap:4px}
.tl-seg label{cursor:pointer}
.tl-seg input{position:absolute;opacity:0;pointer-events:none}
.tl-seg span{display:block;padding:9px 14px;border-radius:8px;font-size:.92rem;color:var(--muted);font-weight:600}
.tl-seg input:checked+span{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(20,26,46,.12)}
.tl-seg input:focus-visible+span{outline:2px solid var(--navy)}
.tl-note{margin-top:12px;font-size:.85rem;color:#aab5e3}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* hub cards */
.tl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tl-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid #dde2f0;border-radius:var(--radius);padding:24px;transition:border-color .2s,transform .2s}
.tl-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.tl-card h3{margin-top:6px}
.tl-card p{color:var(--muted);font-size:.93rem;flex:1}
.tl-card-ic{width:44px;height:44px;border-radius:12px;background:var(--navy-soft);color:var(--navy);display:grid;place-items:center}
.tl-card-ic svg{width:22px;height:22px}
.tl-go{color:var(--navy);font-weight:600;font-size:.92rem}
.tl-card-adv{background:var(--navy-soft);border-color:#cfd7f0}
.tl-card-adv .tl-card-ic{background:#fff}

/* result shell */
.tl-result-wrap{padding-block:36px 8px;background:var(--bg-alt);scroll-margin-top:80px}
.tl-result{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3.5vw,36px);box-shadow:var(--shadow)}
.tl-loading{display:flex;gap:16px;align-items:center}
.tl-loading p{color:var(--muted);font-size:.93rem}
.tl-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--navy-soft);border-top-color:var(--navy);animation:tlspin 1s linear infinite;flex:none}
@keyframes tlspin{to{transform:rotate(360deg)}}
.tl-prog{height:4px;background:var(--navy-soft);border-radius:4px;overflow:hidden;margin-top:10px;width:min(320px,60vw)}
.tl-prog i{display:block;height:100%;width:30%;background:var(--navy);border-radius:4px;animation:tlprog 1.6s ease-in-out infinite}
@keyframes tlprog{0%{margin-inline-start:-30%}100%{margin-inline-start:100%}}
@media (prefers-reduced-motion:reduce){.tl-spin,.tl-prog i{animation-duration:4s}}

.tl-top{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.tl-top-txt{flex:1 1 300px;min-width:0}
.tl-top h2{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.tl-url{color:var(--muted);font-size:.9rem;word-break:break-all;margin-block:4px 10px;text-align:start}
.tl-muted{color:var(--muted);font-size:.88rem;margin-top:8px}
.tl-box{background:var(--bg-alt);border-radius:12px;padding:12px 14px;max-width:none}
.tl-link{color:var(--navy);font-weight:600}
.tl-na{color:var(--muted);font-style:normal}

.tl-ring{position:relative;width:132px;height:132px;flex:none;display:grid;place-items:center;text-align:center}
.tl-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
[dir=rtl] .tl-ring svg{transform:rotate(-90deg) scaleY(-1)}
.tl-ring circle{fill:none;stroke-width:10}
.tl-ring .bg{stroke:#eef1f6}
.tl-ring .fg{stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.tl-ring b{font-size:2.1rem;color:var(--ink);line-height:1;position:relative;margin-top:-6px}
.tl-ring small{position:absolute;bottom:34px;font-size:.75rem;color:var(--muted)}
.tl-ring.good .fg{stroke:#2f8a5b}.tl-ring.mid .fg{stroke:#c98a1b}.tl-ring.bad .fg{stroke:#c0453a}

.tl-b{display:inline-flex;align-items:center;font-size:.78rem;font-weight:600;border-radius:999px;padding:3px 10px;margin-inline-end:6px;white-space:nowrap}
.tl-b.pass{background:#e8f4ed;color:#226b45}.tl-b.warn{background:#fbf1de;color:#8a5a0c}.tl-b.fail{background:#fbe8e6;color:#9c2f25}.tl-b.info{background:var(--navy-soft);color:var(--navy)}
.tl-counts{display:flex;flex-wrap:wrap;gap:6px}

.tl-serp{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:22px;max-width:680px}
.tl-serp small{display:block;color:var(--muted);font-size:.75rem;margin-bottom:6px}
.tl-serp cite{display:block;font-style:normal;color:#4d5156;font-size:.82rem;text-align:start}
.tl-serp b{display:block;color:#1a0dab;font-weight:500;font-size:1.12rem;margin-block:2px}
.tl-serp p{color:#4d5156;font-size:.88rem;max-width:none}

.tl-checks{list-style:none;display:grid;gap:2px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tl-checks li{display:flex;gap:12px;padding:12px 16px;background:#fff}
.tl-checks li+li{border-top:1px solid var(--line)}
.tl-checks b{font-weight:600;color:var(--ink);font-size:.95rem}
.tl-checks p{color:var(--muted);font-size:.88rem;margin-top:2px;max-width:none}
.tl-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:8px}
.tl-checks .pass .tl-dot{background:#2f8a5b}.tl-checks .warn .tl-dot{background:#d29a2c}.tl-checks .fail .tl-dot{background:#c0453a}.tl-checks .info .tl-dot{background:var(--blue)}
.tl-checks .fail{background:#fffafa}

.tl-more{margin-top:18px}
.tl-more summary{cursor:pointer;color:var(--navy);font-weight:600;padding-block:8px}
.tl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin-top:8px}
.tl-kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.92rem;min-width:0}
.tl-kv span{color:var(--muted);flex:none}
.tl-kv b{font-weight:500;color:var(--ink);text-align:end;word-break:break-word;min-width:0}
.tl-h3{font-size:1.05rem;margin-block:26px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.tl-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tl-metric{border:1px solid var(--line);border-radius:14px;padding:14px;border-top:4px solid var(--line)}
.tl-metric span{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.tl-metric b{display:block;font-size:1.45rem;color:var(--ink);text-align:start;margin-block:2px}
.tl-metric small{color:var(--muted);font-size:.8rem}
.tl-metric.good{border-top-color:#2f8a5b}.tl-metric.mid{border-top-color:#d29a2c}.tl-metric.bad{border-top-color:#c0453a}

.tl-status{display:flex;gap:20px;align-items:center;border-radius:16px;padding:18px 20px;margin-bottom:18px;border:1px solid}
.tl-status h2{font-size:1.3rem}
.tl-status p{color:var(--text);max-width:none}
.tl-status.good{background:#f1f8f4;border-color:#cfe6d9}.tl-status.mid{background:#fdf7ea;border-color:#f0dfb7}.tl-status.bad{background:#fdf2f1;border-color:#f1d0cc}
.tl-days{text-align:center;min-width:86px}
.tl-days b{display:block;font-size:2.1rem;line-height:1;color:var(--ink)}
.tl-days small{color:var(--muted);font-size:.8rem}

.tl-chips{display:flex;flex-wrap:wrap;gap:8px}
.tl-chips span{background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.85rem}
.tl-chain{list-style:none;display:grid;gap:8px;counter-reset:c}
.tl-chain li{border-inline-start:3px solid var(--navy-soft);padding-inline-start:12px}
.tl-chain small{display:block;color:var(--muted);font-size:.82rem}

.tl-top-dns{align-items:flex-start}
.tl-mail{display:flex;flex-direction:column;gap:8px;background:var(--bg-alt);border-radius:14px;padding:14px 16px}
.tl-mail b{font-size:.9rem}
.tl-notes{list-style:none;display:grid;gap:8px;margin-block:4px 18px}
.tl-notes li{background:#fdf7ea;border-radius:10px;padding:10px 14px;font-size:.92rem;color:#5e4510}
.tl-dns{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tl-rr{border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.tl-rr.empty{background:var(--bg-alt)}
.tl-rr-h{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.tl-rr-h b{color:var(--navy);font-size:1rem}
.tl-rr-h small{color:var(--muted);font-size:.82rem}
.tl-rr table{width:100%;border-collapse:collapse;font-size:.88rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tl-rr td{padding:6px 0;border-top:1px solid var(--line);word-break:break-all;vertical-align:top}
.tl-rr tr:first-child td{border-top:0}
.tl-rr td.ttl{color:var(--muted);white-space:nowrap;padding-inline-start:12px;text-align:end;font-size:.78rem;word-break:normal}

.tl-alert{border-radius:14px;padding:18px 20px;border:1px solid}
.tl-alert b{color:var(--ink)}
.tl-alert p{margin-block:6px 12px;color:var(--text);max-width:none}
.tl-alert.bad{background:#fdf2f1;border-color:#f1d0cc}.tl-alert.mid{background:#fdf7ea;border-color:#f0dfb7}.tl-alert.good{background:#f1f8f4;border-color:#cfe6d9}

.tl-foot{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.tl-foot p{color:var(--muted);font-size:.9rem}
.tl-foot-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* explain + limits */
.tl-read{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:start}
.tl-read>*{min-width:0}
.tl-readlist{list-style:none;display:grid;gap:14px;margin-top:12px}
.tl-readlist li{display:flex;gap:10px}
.tl-readlist .tick{width:20px;height:20px;color:var(--navy);flex:none;margin-top:3px}
.tl-readlist b{color:var(--ink)}
.tl-limits{background:#fff;border:1px solid #dde2f0;border-radius:var(--radius);padding:22px}
.tl-limits p{color:var(--muted);font-size:.9rem;margin-block:6px 18px}
.tl-limits ul{list-style:none;display:grid;gap:4px;margin-top:8px}
.tl-limits a{display:flex;gap:10px;align-items:center;padding:7px 0;color:var(--ink);font-size:.93rem}
.tl-limits a:hover{color:var(--navy)}
.tl-limits svg{width:18px;height:18px;color:var(--navy)}

/* advisor */
.tl-adv{max-width:760px;margin-inline:auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(22px,4vw,40px);box-shadow:var(--shadow)}
.tl-adv-progress{height:4px;background:var(--navy-soft);border-radius:4px;overflow:hidden;margin-bottom:24px}
.tl-adv-progress i{display:block;height:100%;width:0;background:var(--navy);transition:width .3s}
.tl-adv-step{color:var(--muted);font-size:.85rem;font-weight:600}
.tl-adv h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-block:6px 18px}
.tl-opts{display:grid;gap:10px}
.tl-opt{text-align:start;border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px 16px;cursor:pointer;font-weight:500;color:var(--ink);transition:border-color .15s,background .15s}
.tl-opt:hover,.tl-opt.on{border-color:var(--navy);background:var(--navy-soft)}
.tl-opt:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.tl-back{background:none;border:0;color:var(--navy);font-weight:600;cursor:pointer;margin-top:18px;padding:6px 0}
.tl-adv-why{color:var(--text);margin-bottom:12px}
.tl-adv-grid{margin-bottom:18px}
.tl-adv-note{max-width:760px;margin:16px auto 0;text-align:center;color:var(--muted);font-size:.86rem}
.tl-adv-sec{background:var(--bg-alt)}

@media (max-width:900px){
  .tl-cards{grid-template-columns:1fr 1fr}
  .tl-read{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tl-cards,.tl-grid,.tl-dns{grid-template-columns:1fr}
  .tl-form{display:grid;grid-template-columns:minmax(0,1fr)}
  .tl-field input{width:100%}
  .tl-field{flex-basis:auto}
  .tl-form .btn,.tl-form select{width:auto;max-width:none;min-width:0}
  .tl-foot-btns .btn{flex:1 1 auto}
  .tl-seg{justify-content:stretch}.tl-seg label{flex:1;text-align:center}
  .tl-top{justify-content:center;text-align:center}
  .tl-top .tl-counts{justify-content:center}
  .tl-status{flex-direction:column;text-align:center}
  .tl-kv{flex-direction:column;gap:2px}.tl-kv b{text-align:start}
}