.tls-util-app,.tls-util-app *{box-sizing:border-box}
.tls-util-app{--p:#2563eb;--pd:#1d4ed8;--ps:#eff6ff;--d:#101828;--t:#475467;--m:#667085;--b:#e4e7ec;width:100%;min-height:75vh;padding:76px 22px 96px;background:radial-gradient(circle at 50% 0%,rgba(37,99,235,.08),transparent 30%),#f8fafc;color:var(--d);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:auto;text-rendering:auto}
.tls-util-shell{width:min(100%,1180px);margin:auto}
.tls-util-header{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px}
.tls-util-kicker{display:block;margin-bottom:10px;color:var(--p);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tls-util-header h1{margin:0;color:var(--d);font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:-.045em;line-height:1.08}
.tls-util-header p{max-width:780px;margin:14px 0 0;color:var(--t);font-size:15px;line-height:1.65}
.tls-util-trust{display:flex;flex:0 0 auto;align-items:center;gap:8px;padding:10px 13px;border:1px solid #d1fadf;border-radius:999px;background:#ecfdf3;color:#027a48;font-size:11px;font-weight:600}
.tls-util-trust svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tls-util-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.72fr);gap:20px;align-items:start}
.tls-util-card{padding:24px;border:1px solid var(--b);border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(16,24,40,.05)}
.tls-util-sticky{position:sticky;top:92px}
.tls-util-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.tls-util-card-head>div>span{display:block;margin-bottom:5px;color:var(--p);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.tls-util-card-head h2{margin:0;color:#101828;font-size:20px;font-weight:600}
.tls-util-field{display:grid;gap:7px;min-width:0}
.tls-util-field>span{color:#344054;font-size:11px;font-weight:600}
.tls-util-field input,.tls-util-field select,.tls-util-field textarea{width:100%;border:1px solid #d0d5dd!important;border-radius:9px!important;outline:0!important;background:#fff!important;color:#101828!important;font-family:inherit;font-size:13px!important;font-weight:400!important;box-shadow:none!important}
.tls-util-field input,.tls-util-field select{height:45px;padding:0 12px!important}
.tls-util-field textarea{min-height:320px;padding:13px!important;line-height:1.65;resize:vertical}
.tls-util-field input:focus,.tls-util-field select:focus,.tls-util-field textarea:focus{border-color:#84adff!important;box-shadow:0 0 0 3px rgba(37,99,235,.1)!important}
.tls-util-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tls-util-full{grid-column:1/-1}
.tls-util-checks{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.tls-util-check{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #e4e7ec;border-radius:9px;background:#f8fafc;color:#475467;font-size:11px;font-weight:500}
.tls-util-check input{width:15px;height:15px;margin:0}
.tls-util-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;margin-top:18px}
.tls-util-button,.tls-util-primary,.tls-util-danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 14px!important;border-radius:9px!important;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer}
.tls-util-button{border:1px solid #d0d5dd!important;background:#fff!important;color:#344054!important}
.tls-util-primary{border:1px solid var(--p)!important;background:var(--p)!important;color:#fff!important}
.tls-util-primary:hover,.tls-util-primary:focus{border-color:var(--pd)!important;background:var(--pd)!important;color:#fff!important}
.tls-util-danger{border:1px solid #fecdca!important;background:#fff5f4!important;color:#b42318!important}
.tls-util-button svg,.tls-util-primary svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tls-util-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tls-util-stat{padding:15px;border:1px solid #e4e7ec;border-radius:11px;background:#f8fafc}
.tls-util-stat.is-primary{grid-column:1/-1;border-color:#dbeafe;background:#eff6ff}
.tls-util-stat span,.tls-util-stat strong{display:block}
.tls-util-stat span{color:#667085;font-size:10px;font-weight:500}
.tls-util-stat strong{margin-top:5px;color:#101828;font-size:18px;font-weight:700;word-break:break-word}
.tls-util-stat.is-primary strong{color:#1d4ed8;font-size:23px}
.tls-util-output{min-height:260px;margin-top:0;padding:15px;border:1px solid #e4e7ec;border-radius:11px;background:#f8fafc;color:#344054;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.tls-util-note{margin-top:14px;padding:12px 13px;border-left:3px solid var(--p);background:#f8fafc;color:#475467;font-size:10.5px;line-height:1.6}
.tls-util-case-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.tls-util-case-buttons button{min-height:37px;padding:0 11px!important;border:1px solid #d0d5dd!important;border-radius:8px!important;background:#fff!important;color:#344054!important;font-size:10.5px;font-weight:600;cursor:pointer}
.tls-util-password{padding:17px;border:1px solid #dbeafe;border-radius:12px;background:#eff6ff;color:#1d4ed8;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:17px;font-weight:700;line-height:1.5;word-break:break-all}
.tls-strength{height:8px;margin-top:13px;border-radius:999px;background:#eaecf0;overflow:hidden}
.tls-strength span{display:block;width:0;height:100%;background:#12b76a;transition:width .2s}
.tls-strength-label{margin-top:7px;color:#667085;font-size:10px;font-weight:600}
.tls-qr-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.tls-qr-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:390px;padding:22px;border:1px solid #e4e7ec;border-radius:15px;background:#fff}
.tls-qr-preview [data-qr-output]{display:flex;align-items:center;justify-content:center;max-width:100%;overflow:auto}
.tls-qr-preview canvas,.tls-qr-preview img{max-width:100%;height:auto}
.tls-qr-placeholder{color:#98a2b3;font-size:12px;text-align:center}
.tls-util-convert-row{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:10px;align-items:end}
.tls-util-swap{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0!important;border:1px solid #d0d5dd!important;border-radius:9px!important;background:#fff!important;color:#344054!important;cursor:pointer}
.tls-util-result-large{padding:22px;border:1px solid #dbeafe;border-radius:13px;background:#eff6ff;text-align:center}
.tls-util-result-large span,.tls-util-result-large strong{display:block}
.tls-util-result-large span{color:#667085;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.tls-util-result-large strong{margin-top:8px;color:#1d4ed8;font-size:clamp(22px,4vw,34px);font-weight:700;word-break:break-word}
.tls-util-toast{position:fixed;z-index:99999;right:22px;bottom:22px;display:none;max-width:360px;padding:12px 15px;border:1px solid #dbeafe;border-radius:10px;background:#fff;color:#344054;font-size:12px;font-weight:600;box-shadow:0 18px 45px rgba(16,24,40,.16)}
.tls-util-toast.is-visible{display:block}
@media(max-width:900px){.tls-util-grid,.tls-qr-layout{grid-template-columns:1fr}.tls-util-sticky{position:static}.tls-qr-preview{min-height:320px}}
@media(max-width:700px){.tls-util-app{padding:58px 15px 72px}.tls-util-header{display:block}.tls-util-header h1{font-size:38px}.tls-util-header p{font-size:14px}.tls-util-trust{display:inline-flex;margin-top:16px}.tls-util-card{padding:18px}.tls-util-form-grid{grid-template-columns:1fr}.tls-util-full{grid-column:auto}.tls-util-field textarea{min-height:260px}.tls-util-actions{display:grid;grid-template-columns:1fr 1fr}.tls-util-primary{grid-column:1/-1}.tls-util-stats{grid-template-columns:1fr}.tls-util-stat.is-primary{grid-column:auto}.tls-util-convert-row{grid-template-columns:1fr}.tls-util-swap{justify-self:center;transform:rotate(90deg)}.tls-util-toast{right:14px;bottom:14px;left:14px;max-width:none}}
