.ft{--ft-ink:#1b1b1b;--ft-steel:#60646c;--ft-ash:#7c7c7c;--ft-line:#e0e1e6;--ft-soft:#f4f5f6;--ft-screen:#141414;--ft-mint:#00f2e6;--ft-sky:#00b9f1;--ft-moss:#8dc63f;--ft-amber:#f5b54a;--ft-red:#ff6b6b;--ft-ok:#0f8a6a;--ft-fail:#c2410c;--ft-ease:cubic-bezier(.22,1,.36,1);background:#eaeaea;color:var(--ft-ink);padding:40px 24px 96px}
.ft *{box-sizing:border-box}
.ft [hidden]{display:none!important}
.ft-shell{max-width:1120px;margin:auto}
.ft-i{width:18px;height:18px;flex:none}
.ft h1,.ft h2{margin:0}
.ft button{font:inherit}
.ft :focus-visible{outline:2px solid var(--ft-ink);outline-offset:3px}

/* Hero */
.ft-hero{display:flex;align-items:flex-start;gap:24px;margin:36px 0 32px}
.ft-hero>.tool-icon{width:72px;height:72px;border-radius:20px}
.ft-hero>.tool-icon svg{width:38px;height:38px}
.ft h1{font-size:clamp(40px,4.4vw,60px);line-height:1.04;font-weight:500;letter-spacing:-.045em}
.ft-hero p{font-size:18px;line-height:1.55;color:var(--ft-steel);max-width:640px;margin:14px 0 0}
.ft-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.ft-facts li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:40px;background:#fff;border:1px solid var(--ft-line);font-size:13px;font-weight:500}
.ft-facts .ft-i{width:15px;height:15px;color:var(--ft-ok)}
.ft-hero-hub{flex-direction:column;align-items:center;text-align:center;margin:40px auto 48px;max-width:820px;gap:0}
.ft-hero-hub h1{font-size:clamp(44px,6vw,76px);margin-top:20px}
.ft-hero-hub p{margin:18px auto 0}
.ft-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 10px;border-radius:40px;background:#fff;border:1px solid var(--ft-line);font-size:13px;font-weight:500}
.ft-kicker .ft-i{width:15px;height:15px;color:var(--ft-ok)}
.ft-hub-ip{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:28px;padding:10px 18px 10px 14px;border-radius:40px;background:var(--ft-screen);color:#fff;font-size:14px;max-width:100%}
.ft-hub-ip .ft-live{color:#b7b9bd}
.ft-hub-ip strong{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere}
.ft-hub-place{color:#b7b9bd;font-size:13px}
.ft-hub-place:empty{display:none}
.ft-hub-ip[data-state=error]{display:none}

/* Live dot, skeletons, flags */
.ft-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.02em}
.ft-live i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ft-mint)}
.ft-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ft-mint);animation:ft-ping 2s var(--ft-ease) infinite}
.ft-skeleton{display:inline-block;width:9em;max-width:100%;height:.8em;border-radius:6px;background:linear-gradient(90deg,rgba(127,127,127,.18),rgba(127,127,127,.32),rgba(127,127,127,.18));background-size:200% 100%;animation:ft-shimmer 1.4s linear infinite;vertical-align:middle}
.ft-flag{display:inline-block;width:22px;height:16px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.ft-flag img{display:block;width:100%;height:100%;object-fit:cover}

/* Hub bento */
.ft-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ft-tile{display:flex;flex-direction:column;min-width:0;border:1px solid var(--ft-line);border-radius:24px;background:#fff;overflow:hidden;color:inherit;text-decoration:none;transition:transform .35s var(--ft-ease),box-shadow .35s var(--ft-ease)}
.ft-tile:hover{transform:translateY(-4px);box-shadow:rgba(0,0,0,.08) 0 12px 32px}
.ft-tile-proxy-checker{grid-column:span 2;order:-1}
.ft-tile-scene{position:relative;display:grid;place-items:center;height:200px;background:var(--ft-screen);color:#fff;overflow:hidden;isolation:isolate}
.ft-tile-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 100% 100%,var(--ft-glow,rgba(0,242,230,.22)),transparent 60%)}
.ft-tile-ip-lookup .ft-tile-scene{--ft-glow:rgba(0,185,241,.26)}
.ft-tile-webrtc-leak-test .ft-tile-scene{--ft-glow:rgba(141,198,63,.24)}
.ft-tile-proxy-formatter .ft-tile-scene{--ft-glow:rgba(0,185,241,.2)}
.ft-tile-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.ft-tile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ft-tile-head .tool-icon{width:44px;height:44px;border-radius:12px}
.ft-tile-head .tool-icon svg{width:24px;height:24px}
.ft-tile-head em{font-style:normal;font-size:12px;font-weight:500;padding:4px 10px;border-radius:40px;background:var(--ft-soft);color:var(--ft-steel)}
.ft-tile h2{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.ft-tile p{font-size:15px;line-height:1.55;color:var(--ft-steel);margin:8px 0 22px}
.ft-tile-action{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:14px;font-weight:500}
.ft-tile-action svg{width:16px;height:16px;transition:transform .25s var(--ft-ease)}
.ft-tile:hover .ft-tile-action svg{transform:translateX(4px)}

/* Scene: my IP */
.ft-scene-globe{position:absolute;right:-50px;top:-40px;width:220px;height:220px}
.ft-scene-globe span,.ft-screen-art span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,242,230,.28)}
.ft-scene-globe span:nth-child(2),.ft-screen-art span:nth-child(2){inset:18%;border-color:rgba(0,242,230,.2)}
.ft-scene-globe span:nth-child(3),.ft-screen-art span:nth-child(3){inset:36%;border-color:rgba(0,242,230,.14)}
.is-playing .ft-scene-globe span,.is-playing .ft-screen-art span{animation:ft-breathe 4s ease-in-out infinite}
.ft-scene-globe span:nth-child(2),.ft-screen-art span:nth-child(2){animation-delay:-1.3s}
.ft-scene-globe span:nth-child(3),.ft-screen-art span:nth-child(3){animation-delay:-2.6s}
.ft-scene-label{position:absolute;left:24px;top:24px;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#b7b9bd}
.ft-scene-label i{width:8px;height:8px;border-radius:50%;background:var(--ft-mint);box-shadow:0 0 0 4px rgba(0,242,230,.14)}
.ft-scene-ip{position:absolute;left:24px;bottom:28px;right:24px;font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.1}

/* Scene: lookup */
.ft-scene-dossier{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:calc(100% - 48px)}
.ft-scene-dossier>span{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.ft-scene-dossier small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8b8d93}
.ft-scene-dossier b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-scene-dossier img{width:18px;height:13px;border-radius:2px;object-fit:cover}
.is-playing .ft-scene-dossier>span{animation:ft-rise 5s var(--ft-ease) infinite}
.ft-scene-dossier>span:nth-child(2){animation-delay:.15s!important}.ft-scene-dossier>span:nth-child(3){animation-delay:.3s!important}.ft-scene-dossier>span:nth-child(4){animation-delay:.45s!important}
.ft-scene-pin{position:absolute;right:18px;top:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ft-sky);color:var(--ft-screen)}
.ft-scene-pin .ft-i{width:18px;height:18px}

/* Scene: checker */
.ft-scene-checks{display:flex;flex-direction:column;gap:7px;width:calc(100% - 48px);max-width:560px}
.ft-scene-checks>span{display:grid;grid-template-columns:10px minmax(0,1fr) auto 84px;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);font-size:12px}
.ft-scene-checks i{width:8px;height:8px;border-radius:50%;background:var(--ft-mint)}
.ft-scene-checks .is-fail i{background:var(--ft-red)}
.ft-scene-checks code{font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#e8e8e8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-scene-checks em{font-style:normal;font-size:10px;padding:2px 7px;border-radius:40px;border:1px solid rgba(255,255,255,.14);color:#b7b9bd}
.ft-scene-checks b{font-weight:500;text-align:right;color:var(--ft-mint);font-variant-numeric:tabular-nums}
.ft-scene-checks .is-fail b{color:var(--ft-red)}
.is-playing .ft-scene-checks>span{animation:ft-check 4.8s var(--ft-ease) infinite}
.ft-scene-checks>span:nth-child(2){animation-delay:.6s!important}.ft-scene-checks>span:nth-child(3){animation-delay:1.2s!important}.ft-scene-checks>span:nth-child(4){animation-delay:1.8s!important}
.ft-scene-scan{position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,transparent,rgba(0,242,230,.1),transparent);transform:translateY(-60px);pointer-events:none}
.is-playing .ft-scene-scan{animation:ft-scan 4.8s linear infinite}

/* Scene: radar */
.ft-scene-radar,.ft-radar{position:relative;width:150px;height:150px;flex:none}
.ft-scene-radar>span,.ft-radar>span:not(.ft-radar-core){position:absolute;inset:0;border-radius:50%;border:1px solid rgba(141,198,63,.3)}
.ft-scene-radar>span:nth-child(2),.ft-radar>span:nth-child(2){inset:22%}
.ft-scene-radar>span:nth-child(3),.ft-radar>span:nth-child(3){inset:44%}
.ft-scene-sweep,.ft-radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(141,198,63,.42),rgba(141,198,63,0) 28%,transparent);-webkit-mask:radial-gradient(circle,#000 70%,transparent 71%);mask:radial-gradient(circle,#000 70%,transparent 71%)}
.is-playing .ft-scene-sweep,.ft-radar-card[data-state=running] .ft-radar-sweep,.ft-radar-card.is-playing[data-state=idle] .ft-radar-sweep{animation:ft-spin 3.2s linear infinite}
.ft-radar-card[data-state=running] .ft-radar-sweep{animation-duration:1.2s}
.ft-scene-radar b,.ft-radar b{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--ft-moss);box-shadow:0 0 0 4px rgba(141,198,63,.16)}
.ft-dot-a{top:22%;left:64%}.ft-dot-b{top:62%;left:20%;background:var(--ft-mint)!important;box-shadow:0 0 0 4px rgba(0,242,230,.16)!important}.ft-dot-c{top:74%;left:70%}
.is-playing .ft-scene-radar b,.ft-radar-card[data-state=running] .ft-radar b{animation:ft-blip 3.2s ease-in-out infinite}
.ft-dot-b{animation-delay:1.1s!important}.ft-dot-c{animation-delay:2.1s!important}

/* Scene: formatter */
.ft-scene-format{display:flex;flex-direction:column;align-items:center;gap:12px;width:calc(100% - 40px)}
.ft-scene-format code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-scene-format .ft-to{color:var(--ft-mint);border-color:rgba(0,242,230,.3)}
.ft-scene-swap{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ft-sky);color:var(--ft-screen);transform:rotate(90deg)}
.ft-scene-swap .ft-i{width:16px;height:16px}
.is-playing .ft-scene-swap{animation:ft-swap 3s var(--ft-ease) infinite}
.is-playing .ft-scene-format .ft-to{animation:ft-type 3s var(--ft-ease) infinite}

/* Tool switcher */
.ft-switch{display:flex;gap:6px;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--ft-line);overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.ft-switch::-webkit-scrollbar{display:none}
.ft-switch a{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:11px;font-size:14px;font-weight:500;color:var(--ft-steel);white-space:nowrap;transition:background .16s,color .16s}
.ft-switch a:first-child{padding-left:12px}
.ft-switch a:hover{background:var(--ft-soft);color:var(--ft-ink)}
.ft-switch a[aria-current=page]{background:var(--ft-ink);color:#fff}
.ft-switch .tool-icon{width:28px;height:28px;border-radius:8px}
.ft-switch .tool-icon svg{width:17px;height:17px}

/* Cards, forms, buttons */
.ft-work{display:flex;flex-direction:column;gap:16px;min-width:0}
.ft-card{background:#fff;border:1px solid var(--ft-line);border-radius:20px;padding:24px;min-width:0}
.ft-card-head h2,.ft-card h2{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.ft-card-head p{font-size:14px;line-height:1.6;color:var(--ft-steel);margin:6px 0 0;max-width:720px}
.ft label{display:block;margin:0;font-size:14px;font-weight:500}
.ft label>span{font-size:13px;font-weight:400;color:var(--ft-steel);margin-left:8px}
.ft textarea,.ft input[type=text]{display:block;width:100%;font:inherit;font-size:14px;color:var(--ft-ink);background:#fff;border:1px solid #c9ccd1;border-radius:12px;padding:14px 16px;transition:border-color .16s,box-shadow .16s}
.ft textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.75;resize:vertical;min-height:150px}
.ft textarea:focus,.ft input[type=text]:focus{outline:0;border-color:var(--ft-ink);box-shadow:0 0 0 4px rgba(27,27,27,.08)}
.ft textarea::placeholder,.ft input::placeholder{color:var(--ft-ash);opacity:1}
.ft textarea:disabled{background:var(--ft-soft);color:var(--ft-steel)}
.ft-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 20px;border:1px solid var(--ft-ink);border-radius:6px;background:var(--ft-ink);color:#fff;font-size:14px;font-weight:500;line-height:1.3;white-space:nowrap;cursor:pointer;box-shadow:rgba(0,0,0,.15) 0 4px 20px 0;transition:opacity .16s,transform .16s}
.ft-button:hover{opacity:.86}
.ft-button:active{transform:scale(.98)}
.ft-button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ft-button .ft-i{width:16px;height:16px}
.ft-btn-arrow svg{width:16px;height:16px;display:block;transition:transform .25s var(--ft-ease)}
.ft-button:hover .ft-btn-arrow svg{transform:translateX(3px)}
.ft-secondary{background:#fff;color:var(--ft-ink);border-color:var(--ft-line);box-shadow:none}
.ft-secondary:hover{opacity:1;background:var(--ft-soft)}
.ft-small{min-height:38px;padding:8px 14px;font-size:13px}
.ft-button-light{background:#fff;color:var(--ft-screen);border-color:#fff}
.ft-icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e8e8e8;cursor:pointer;transition:background .16s,color .16s,transform .16s}
.ft-icon-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.ft-icon-btn:active{transform:scale(.94)}
.ft-icon-btn:disabled{opacity:.4;cursor:not-allowed}
.ft-icon-btn[data-done=true]{color:var(--ft-mint);border-color:rgba(0,242,230,.4)}
.ft-icon-btn-light{border-color:var(--ft-line);background:#fff;color:var(--ft-ink)}
.ft-icon-btn-light:hover{background:var(--ft-soft);color:var(--ft-ink)}
.ft-help{font-size:13px;line-height:1.65;color:var(--ft-steel);margin:0}
.ft-help-icon{display:flex;gap:10px;align-items:flex-start}
.ft-help-icon .ft-i{width:16px;height:16px;margin-top:2px;color:var(--ft-ash)}
.ft-card .ft-help-icon{margin-top:18px;padding-top:16px;border-top:1px solid var(--ft-line)}
.ft-counter{font-size:12px;font-weight:500;padding:4px 10px;border-radius:40px;background:var(--ft-soft);color:var(--ft-steel);font-variant-numeric:tabular-nums;white-space:nowrap}
.ft-counter[data-over=true]{background:#fdecec;color:#b42318}

/* Segmented control */
.ft-seg{border:0;margin:0;padding:0;min-width:0}
.ft-seg legend{font-size:12px;font-weight:500;color:var(--ft-steel);margin-bottom:8px;padding:0}
.ft-seg-track{display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:10px;background:var(--ft-soft);border:1px solid var(--ft-line);max-width:100%}
.ft-seg label{position:relative;margin:0;cursor:pointer}
.ft-seg input{position:absolute;opacity:0;width:1px;height:1px}
.ft-seg label>span{display:block;margin:0;padding:7px 12px;border-radius:7px;font-size:13px;font-weight:500;color:var(--ft-steel);white-space:nowrap;transition:background .16s,color .16s,box-shadow .16s}
.ft-seg label:hover>span{color:var(--ft-ink)}
.ft-seg input:checked+span{background:#fff;color:var(--ft-ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--ft-line)}
.ft-seg input:focus-visible+span{outline:2px solid var(--ft-ink);outline-offset:1px}
.ft-seg input:disabled+span{opacity:.5;cursor:not-allowed}
.ft-seg-small label>span{padding:6px 11px;font-size:12px}

/* Status */
.ft-status{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ft-steel);padding:2px 4px;min-height:24px;overflow-wrap:anywhere}
.ft-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#b8bbc1}
.ft-status[data-state=busy]::before{background:var(--ft-sky);animation:ft-pulse 1s ease-in-out infinite}
.ft-status[data-state=ok]::before{background:var(--ft-ok)}
.ft-status[data-error=true]{color:#b42318;font-weight:500}
.ft-status[data-error=true]::before{background:#d92d20}

/* Dark product screen */
.ft-screen{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:var(--ft-screen);color:#fff;padding:26px 28px 28px;box-shadow:rgba(0,0,0,.15) 0 4px 20px 0}
.ft-screen::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 100% 0%,rgba(0,242,230,.2),transparent 60%),radial-gradient(60% 80% at 0% 100%,rgba(0,185,241,.12),transparent 60%)}
.ft-screen-art{position:absolute;right:-90px;top:50%;width:340px;height:340px;margin-top:-170px;z-index:-1;pointer-events:none}
.ft-screen-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ft-screen-top .ft-live{color:#b7b9bd}
.ft-screen-actions{display:flex;gap:8px}
.ft-ip{display:block;margin:26px 0 14px;font-size:clamp(34px,5.6vw,64px);line-height:1.05;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;min-height:1.05em}
.ft-ip .ft-skeleton{width:7.5em;height:.7em;border-radius:10px}
.ft-ip.is-in{animation:ft-in .5s var(--ft-ease)}
.ft-ip-place{display:flex;align-items:center;gap:10px;font-size:16px;color:#d9dadc;min-height:24px}
.ft-ip-result{display:flex;flex-direction:column;gap:16px}

/* Details */
.ft-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.ft-details>div{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--ft-line);min-width:0}
.ft-detail-icon{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ft-soft);color:var(--ft-steel)}
.ft-detail-icon .ft-i{width:18px;height:18px}
.ft-details dt{font-size:12px;color:var(--ft-steel)}
.ft-details dd{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:500;overflow-wrap:anywhere;min-width:0}
.ft-details dd small{font-size:12px;font-weight:400;color:var(--ft-steel)}
.ft-details dd[data-unknown=true]{color:var(--ft-ash);font-weight:400}
.ft-details .ft-flag{box-shadow:0 0 0 1px var(--ft-line)}

/* IP versions */
.ft-versions{display:flex;flex-direction:column;gap:18px}
.ft-version-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft-version{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;border-radius:16px;background:var(--ft-soft);border:1px solid var(--ft-line);min-width:0}
.ft-version-tag{flex:none;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;background:#fff;border:1px solid var(--ft-line)}
.ft-version output{flex:1;min-width:0;font-size:14px;color:var(--ft-steel);overflow-wrap:anywhere}
.ft-version[data-state=ok] output{color:var(--ft-ink);font-weight:500;font-variant-numeric:tabular-nums}
.ft-version[data-state=ok] .ft-version-tag{background:#e3f6ef;border-color:#bfe5d7;color:var(--ft-ok)}
.ft-version[data-state=error] output{font-size:13px}
.ft-version .ft-button{min-height:38px;padding:8px 14px;font-size:13px}

/* Lookup search */
.ft-search{display:flex;flex-direction:column;gap:12px}
.ft-searchbar{position:relative;display:flex;gap:10px}
.ft-searchbar>.ft-i{position:absolute;left:18px;top:50%;margin-top:-10px;width:20px;height:20px;color:var(--ft-ash);pointer-events:none}
.ft-searchbar input[type=text]{flex:1;min-width:0;height:56px;padding-left:50px;font-size:17px;border-radius:12px}
.ft-searchbar .ft-button{min-height:56px;padding:0 24px}
.ft-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ft-steel)}
.ft-chips>span{margin-right:2px}
.ft-chips button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:40px;border:1px solid var(--ft-line);background:#fff;color:var(--ft-ink);font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;transition:background .16s,border-color .16s}
.ft-chips button:hover{background:var(--ft-soft);border-color:#c9ccd1}
.ft-chips #ft-use-mine{font-family:inherit;font-weight:500}
.ft-chips .ft-i{width:14px;height:14px;color:var(--ft-ok)}

/* Proxy checker */
.ft-editor-head,.ft-pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;min-height:38px}
.ft-editor-foot{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:18px}
.ft-run{display:flex;gap:10px}
.ft-results{display:flex;flex-direction:column;gap:16px}
.ft-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ft-stats>div{padding:14px 16px;border-radius:14px;background:var(--ft-soft);min-width:0}
.ft-stats span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ft-steel)}
.ft-stats i{width:8px;height:8px;border-radius:50%;background:var(--ft-ok)}
.ft-stats .is-fail i{background:#d92d20}
.ft-stats strong{display:block;margin-top:4px;font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ft-progress{height:4px;border-radius:4px;background:var(--ft-soft);overflow:hidden}
.ft-progress i{display:block;height:100%;width:100%;border-radius:4px;background:var(--ft-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ft-ease)}
.ft-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ft-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}
.ft-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--ft-line);border-radius:14px;overflow:hidden}
.ft-row{display:grid;grid-template-columns:28px minmax(0,1.5fr) minmax(0,1.3fr) 150px;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--ft-line);animation:ft-in .4s var(--ft-ease)}
.ft-row:first-child{border-top:0}
.ft-row-status{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ft-soft);color:var(--ft-steel)}
.ft-row-status .ft-i{width:15px;height:15px}
.ft-row[data-status=ok] .ft-row-status{background:#e3f6ef;color:var(--ft-ok)}
.ft-row[data-status=error] .ft-row-status{background:#fdecec;color:#d92d20}
.ft-row[data-status=pending] .ft-row-status::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid #c9ccd1;border-top-color:var(--ft-ink);animation:ft-spin .8s linear infinite}
.ft-row-main{min-width:0}
.ft-row-main strong{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-row-main span{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12px;color:var(--ft-steel)}
.ft-row-main em{font-style:normal;font-size:11px;font-weight:500;padding:1px 7px;border-radius:40px;border:1px solid var(--ft-line);color:var(--ft-steel);text-transform:uppercase}
.ft-row-exit{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px}
.ft-row-exit>span{min-width:0}
.ft-row-exit b{display:block;font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ft-row-exit small{display:block;font-size:12px;color:var(--ft-steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-row-exit .ft-flag{box-shadow:0 0 0 1px var(--ft-line)}
.ft-row[data-status=error] .ft-row-exit{color:#b42318;font-weight:500}
.ft-row-latency{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.ft-row-latency i{display:block;width:100%;height:4px;border-radius:4px;background:var(--ft-soft);overflow:hidden}
.ft-row-latency i::after{content:"";display:block;height:100%;width:var(--w,0%);border-radius:4px;background:var(--ft-bar,var(--ft-ok))}
.ft-row-latency[data-speed=mid]{--ft-bar:#d4a017}
.ft-row-latency[data-speed=slow]{--ft-bar:#d92d20}
.ft-rows[data-filter=ok] .ft-row:not([data-status=ok]),.ft-rows[data-filter=error] .ft-row:not([data-status=error]){display:none}
.ft-rows-empty{padding:28px 16px;text-align:center;font-size:14px;color:var(--ft-steel)}

/* WebRTC */
.ft-radar-card{display:flex;align-items:center;gap:40px;padding:36px 40px}
.ft-radar-card::before{background:radial-gradient(70% 100% at 0% 50%,rgba(141,198,63,.2),transparent 60%),radial-gradient(60% 80% at 100% 0%,rgba(0,242,230,.12),transparent 60%)}
.ft-radar{width:200px;height:200px}
.ft-radar b{opacity:0}
.ft-radar-card[data-state=running] .ft-radar b,.ft-radar-card[data-state=done] .ft-radar b{opacity:1}
.ft-radar-core{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#1f2618;border:1px solid rgba(141,198,63,.5);color:var(--ft-moss)}
.ft-radar-core .ft-i{width:26px;height:26px}
.ft-radar-card[data-state=warn] .ft-radar-core{background:#2a2216;border-color:rgba(245,181,74,.55);color:var(--ft-amber)}
.ft-radar-copy h2{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.ft-radar-copy p{font-size:15px;line-height:1.6;color:#b7b9bd;margin:10px 0 22px;max-width:520px}
.ft-webrtc-result{display:flex;flex-direction:column;gap:16px}
.ft-verdict{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;border-radius:20px;border:1px solid var(--ft-line);background:#fff}
.ft-verdict-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:#e3f6ef;color:var(--ft-ok)}
.ft-verdict-icon .ft-i{width:22px;height:22px}
.ft-verdict[data-tone=warn] .ft-verdict-icon{background:#fdf3e1;color:#b45309}
.ft-verdict[data-tone=neutral] .ft-verdict-icon{background:var(--ft-soft);color:var(--ft-steel)}
.ft-verdict h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
.ft-verdict p{font-size:14px;line-height:1.6;color:var(--ft-steel);margin:6px 0 0}
.ft-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft-compare>div{padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--ft-line);min-width:0}
.ft-compare h3{font-size:12px;font-weight:500;color:var(--ft-steel);margin:0 0 10px}
.ft-compare .ft-compare-ip{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ft-candidates{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ft-candidates li{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 12px;border-radius:40px;background:var(--ft-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;max-width:100%;overflow-wrap:anywhere}
.ft-candidates em{font-family:Inter,sans-serif;font-style:normal;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:40px;background:#fff;color:var(--ft-steel)}
.ft-candidates li[data-kind=match] em{background:#e3f6ef;color:var(--ft-ok)}
.ft-candidates li[data-kind=diff] em{background:#fdf3e1;color:#b45309}
.ft-candidates-empty{font-size:14px;color:var(--ft-steel);margin:0}

/* Formatter */
.ft-format-controls{display:flex;flex-wrap:wrap;gap:16px 28px;margin-bottom:20px}
.ft-panes{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:stretch;gap:8px}
.ft-pane{display:flex;flex-direction:column;min-width:0}
.ft-pane textarea{flex:1;min-height:240px}
.ft-pane-out textarea{background:var(--ft-screen);color:#e8e8e8;border-color:var(--ft-screen)}
.ft-pane-out textarea::placeholder{color:#7c7f86}
.ft-pane-out textarea:focus{border-color:var(--ft-screen);box-shadow:0 0 0 4px rgba(0,242,230,.18)}
.ft-pane-arrow{display:grid;place-items:center;align-self:center;width:40px;height:40px;margin-top:48px;border-radius:50%;background:#fff;border:1px solid var(--ft-line);color:var(--ft-steel)}
.ft-pane-arrow svg{width:18px;height:18px}
.ft-pane-actions{display:flex;gap:8px}
.ft-pane-actions .ft-icon-btn{width:38px;height:38px}
.ft-errors{list-style:none;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#fdecec;color:#912018;font-size:13px;line-height:1.6;display:flex;flex-direction:column;gap:2px}
.ft-errors b{font-weight:600}

/* Footnotes and more tools */
.ft-footnote{font-size:13px;line-height:1.65;color:var(--ft-steel);margin:18px 4px 0}
.ft-footnote a{color:var(--ft-ink);text-underline-offset:3px}
.ft-more{margin-top:72px}
.ft-more h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.ft-more-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ft-more-grid a{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--ft-line);color:inherit;text-decoration:none;transition:border-color .16s,transform .25s var(--ft-ease)}
.ft-more-grid a:hover{border-color:#b8bbc1;transform:translateY(-2px)}
.ft-more-grid .tool-icon{width:40px;height:40px;border-radius:11px}
.ft-more-grid .tool-icon svg{width:22px;height:22px}
.ft-more-grid a>span:not(.tool-icon){flex:1;min-width:0}
.ft-more-grid strong{display:block;font-size:14px;font-weight:500}
.ft-more-grid a>span:not(.tool-icon)>span{display:block;font-size:12px;line-height:1.45;color:var(--ft-steel);margin-top:2px}
.ft-more-grid .ui-arrow{width:16px;height:16px;color:var(--ft-ash);flex:none}

@keyframes ft-ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
@keyframes ft-shimmer{to{background-position:-200% 0}}
@keyframes ft-breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.05);opacity:1}}
@keyframes ft-rise{0%,8%{opacity:0;transform:translateY(8px)}18%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@keyframes ft-check{0%,6%{opacity:.25}14%,90%{opacity:1}100%{opacity:.25}}
@keyframes ft-scan{to{transform:translateY(200px)}}
@keyframes ft-spin{to{transform:rotate(360deg)}}
@keyframes ft-blip{0%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
@keyframes ft-swap{0%,20%{transform:rotate(90deg)}45%,100%{transform:rotate(270deg)}}
@keyframes ft-type{0%,30%{opacity:.35;transform:translateY(-4px)}50%,100%{opacity:1;transform:none}}
@keyframes ft-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ft-pulse{50%{opacity:.35}}

@media(max-width:980px){
    .ft-bento{grid-template-columns:1fr 1fr}
    .ft-tile-proxy-checker{grid-column:span 2}
    .ft-details{grid-template-columns:1fr 1fr}
    .ft-more-grid{grid-template-columns:1fr 1fr}
    .ft-row{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);row-gap:10px}
    .ft-row-latency{grid-column:2/-1;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:12px}
    .ft-row-latency i{max-width:200px}
}
@media(max-width:760px){
    .ft{padding:20px 16px 64px}
    .ft-hero{flex-direction:column;gap:16px;margin:24px 0}
    .ft-hero>.tool-icon{width:56px;height:56px;border-radius:16px}
    .ft-hero>.tool-icon svg{width:30px;height:30px}
    .ft h1,.ft-hero-hub h1{font-size:36px;letter-spacing:-.04em}
    .ft-hero p{font-size:16px}
    .ft-hero-hub{margin:24px auto 32px}
    .ft-facts li{font-size:12px}
    .ft-bento{grid-template-columns:1fr;gap:12px}
    .ft-tile-proxy-checker{grid-column:auto}
    .ft-tile-scene{height:180px}
    .ft-scene-checks>span{grid-template-columns:10px minmax(0,1fr) 70px}
    .ft-scene-checks em{display:none}
    .ft-switch{width:auto;margin:0 -16px;border-radius:0;border-inline:0}
    .ft-card{padding:18px;border-radius:18px}
    .ft-screen{padding:20px;border-radius:20px}
    .ft-ip{margin:20px 0 10px}
    .ft-details{grid-template-columns:1fr}
    .ft-version-grid{grid-template-columns:1fr}
    .ft-version{flex-wrap:wrap}
    .ft-version output{flex-basis:calc(100% - 70px)}
    .ft-version .ft-button{width:100%}
    .ft-searchbar{flex-direction:column}
    .ft-searchbar>.ft-i{top:28px}
    .ft-searchbar .ft-button{width:100%}
    .ft-editor-foot{flex-direction:column;align-items:stretch}
    .ft-run{flex-direction:column-reverse}
    .ft-run .ft-button{width:100%}
    .ft-stats{grid-template-columns:1fr 1fr}
    .ft-stats strong{font-size:22px}
    .ft-toolbar{flex-direction:column;align-items:stretch}
    .ft-toolbar-actions .ft-button{flex:1}
    .ft-row{grid-template-columns:28px minmax(0,1fr);padding:12px}
    .ft-row-exit,.ft-row-latency{grid-column:2}
    .ft-radar-card{flex-direction:column;text-align:center;gap:24px;padding:28px 20px}
    .ft-radar{width:160px;height:160px}
    .ft-radar-copy p{margin-inline:auto}
    .ft-radar-copy .ft-button{width:100%}
    .ft-compare{grid-template-columns:1fr}
    .ft-panes{grid-template-columns:1fr}
    .ft-pane-arrow{margin:0 auto;transform:rotate(90deg)}
    .ft-pane textarea{min-height:170px}
    .ft-more{margin-top:48px}
    .ft-more-grid{grid-template-columns:1fr}
    .ft label>span{display:block;margin:4px 0 0}
}
@media(prefers-reduced-motion:reduce){
    .ft *,.ft *::before,.ft *::after{animation:none!important;transition:none!important}
}
.ft-row-latency{white-space:nowrap}
@media(max-width:980px){.ft-row-latency{flex-direction:row}.ft-row-latency i{flex:1}}