/* Generated by scripts/site/build_assets.js from assets/src/css/tools.css. Do not edit; edit the source. */
/* Free tools hub — builds on base, v3, pages, info */
.adm-root .thero { padding: 70px 0 30px; position: relative; overflow: hidden; }
.adm-root .thero::before { content: ''; position: absolute; left: -12%; top: -30%; width: 760px; height: 620px; background: radial-gradient(closest-side, var(--glowB), transparent); pointer-events: none; }
.adm-root .thg { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; position: relative; }
.adm-root .thero h1 { font-size: 60px; margin: 14px 0 18px; }
.adm-root .hcheck { margin-top: 30px; max-width: 560px; }
.adm-root .hcheck label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 10px; }
.adm-root .hcheck > div { display: flex; gap: 8px; padding: 6px; border-radius: 18px; background: var(--bg2); border: 1.5px solid var(--line2); }
.adm-root .hcheck > div:focus-within { border-color: var(--hl); }
.adm-root .hcheck input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 16px 'Inter Tight'; padding: 0 14px; } .adm-root .hcheck input:focus { outline: none; }
.adm-root .hcheck .btn { height: 50px; }
.adm-root .hcheck small { display: block; margin-top: 10px; color: var(--mut); font-size: 13px; } .adm-root .hcheck small a { color: var(--hl); text-decoration: underline; }
.adm-root .gauge2 { padding: 26px; border-radius: 28px; background: var(--glass); border: 1px solid var(--line2); box-shadow: var(--shadow); color: var(--ink); }
.adm-root .gauge2 svg { width: 100%; max-width: 320px; display: block; margin: 0 auto 6px; }
.adm-root .gauge2 .arc { stroke-dasharray: 283; stroke-dashoffset: 283; animation: adm-garc 1.6s .3s var(--ease) forwards; }
@keyframes adm-garc { to { stroke-dashoffset: 52; } }
.adm-root .gauge2 .needle { transform-origin: 120px 130px; transform: rotate(-90deg); animation: adm-gnd 1.6s .3s var(--spring) forwards; }
@keyframes adm-gnd { to { transform: rotate(56deg); } }
.adm-root .gauge2 > b { display: block; font: 700 15px Sora; margin: 10px 0 10px; }
.adm-root .gauge2 ul { list-style: none; display: grid; gap: 8px; }
.adm-root .gauge2 li { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.adm-root .gauge2 li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.adm-root .gauge2 .ok::before { background: #22C55E; } .adm-root .gauge2 .wn::before { background: var(--gold); } .adm-root .gauge2 .bd::before { background: #E5484D; }

.adm-root .tfil { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.adm-root .tfil button { font: 600 14px 'Inter Tight'; color: var(--ink); background: var(--card); border: 1.5px solid var(--line2); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.adm-root .tfil button:hover { border-color: var(--hl); } .adm-root .tfil button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.adm-root .tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.adm-root .tcard { --card2: var(--bg2); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform .35s var(--ease), border-color .3s; }
.adm-root .tcard[hidden] { display: none; } .adm-root .tcard:hover { transform: translateY(-5px); border-color: var(--hl); }
.adm-root .tcard.big { grid-column: span 2; flex-direction: row; } .adm-root .tcard.big .tvis { width: 46%; height: auto; min-height: 240px; } .adm-root .tcard.big .tbody { justify-content: center; }
.adm-root .tvis { height: 170px; display: grid; place-items: center; background: var(--bg2); border-bottom: 1px solid var(--line); color: var(--ink); position: relative; overflow: hidden; }
.adm-root .tcard.big .tvis { border-bottom: 0; border-right: 1px solid var(--line); }
.adm-root .tvis > svg { width: 60%; max-height: 130px; }
.adm-root .tbody { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.adm-root .tgrp { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.adm-root .tbody b { font: 700 19px Sora; letter-spacing: -.02em; } .adm-root .tbody p { color: var(--mut); font-size: 14.5px; line-height: 1.55; flex: 1; }
.adm-root .ttags { display: flex; gap: 6px; flex-wrap: wrap; } .adm-root .ttags span { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line2); }
.adm-root .tst { white-space: nowrap; align-self: flex-start; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; }
.adm-root .tst.is-live { background: rgba(34,197,94,.14); color: #22C55E; } .adm-root .tst.is-soon { background: var(--bg3); color: var(--mut); }
html[data-adm-theme="light"] .adm-root .tst.is-live { color: #15803D; }

/* tool previews */
.adm-root .tv-arc { stroke-dasharray: 145; stroke-dashoffset: 145; animation: adm-tva 1.4s .4s var(--ease) forwards; } @keyframes adm-tva { to { stroke-dashoffset: 26; } }
.adm-root .tv-poster { width: 110px; height: 140px; border-radius: 10px; padding: 12px; color: #fff; background: linear-gradient(160deg, #0630F0, #101214); position: relative; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.25); transform: rotate(-4deg); }
.adm-root .tv-poster span { font: 800 17px/1 Sora; position: relative; z-index: 1; } .adm-root .tv-poster i { position: absolute; right: -24px; bottom: -24px; width: 90px; height: 90px; border-radius: 50%; background: var(--gold); animation: adm-tvp 3s ease-in-out infinite; }
.adm-root .tv-poster em { position: absolute; left: 12px; bottom: 12px; font: 800 10px Sora; font-style: normal; background: #fff; color: #101214; padding: 4px 7px; border-radius: 6px; z-index: 1; }
@keyframes adm-tvp { 50% { transform: scale(1.12); } }
.adm-root .tv-qr { width: 110px !important; height: 110px; padding: 8px; background: var(--card2); border-radius: 12px; box-shadow: 0 0 0 1px var(--line2); }
.adm-root .tv-qr rect[style] { animation: adm-qrp 2.4s ease-in-out infinite; } @keyframes adm-qrp { 50% { opacity: .35; } }
.adm-root .tv-card { width: 160px; height: 96px; perspective: 600px; position: relative; }
.adm-root .tv-card > div { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; animation: adm-flip 6s ease-in-out infinite; }
.adm-root .tv-card .f { background: #F6F4EF; padding: 12px; display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; align-content: start; box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.adm-root .tv-card .f i { grid-row: span 3; width: 30px; height: 30px; border-radius: 50%; background: #6B4226; } .adm-root .tv-card .f b { height: 8px; border-radius: 4px; background: #101214; width: 80%; } .adm-root .tv-card .f small { height: 5px; border-radius: 3px; background: #A0A4AB; width: 60%; }
.adm-root .tv-card .b { background: #101214; transform: rotateY(180deg); display: grid; place-items: center; animation-name: adm-flipb; } .adm-root .tv-card .b span { width: 34px; height: 34px; border-radius: 8px; background: var(--gold); }
@keyframes adm-flip { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes adm-flipb { 0%, 40% { transform: rotateY(180deg); } 50%, 90% { transform: rotateY(360deg); } 100% { transform: rotateY(540deg); } }
.adm-root .tv-inv { width: 120px; height: 140px; border-radius: 10px; background: #fff; padding: 12px; display: grid; gap: 7px; align-content: start; box-shadow: 0 14px 30px rgba(0,0,0,.2); color: #101214; }
.adm-root .tv-inv b { font: 800 10px Sora; letter-spacing: .1em; color: #0630F0; } .adm-root .tv-inv i { height: 6px; border-radius: 3px; background: #E3E6EC; } .adm-root .tv-inv i:nth-of-type(2) { width: 80%; } .adm-root .tv-inv i:nth-of-type(3) { width: 60%; }
.adm-root .tv-inv div { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid #101214; padding-top: 8px; } .adm-root .tv-inv div span { width: 30px; height: 6px; border-radius: 3px; background: #A0A4AB; } .adm-root .tv-inv div em { width: 36px; height: 12px; border-radius: 4px; background: var(--gold); animation: adm-tvp 2.4s ease-in-out infinite; }
.adm-root .tv-price { width: 70%; } .adm-root .tv-price .bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; }
.adm-root .tv-price .c { background: var(--brown-l); flex: 6; } .adm-root .tv-price .m { background: #22C55E; flex: 4; animation: adm-mar 3s ease-in-out infinite; } @keyframes adm-mar { 50% { flex: 2; background: var(--gold); } }
.adm-root .tv-price .k { display: flex; justify-content: space-between; font-size: 11px; color: var(--mut); margin-top: 6px; } .adm-root .tv-price .k b { font-weight: 600; }
.adm-root .tv-price .sl { margin-top: 14px; height: 4px; border-radius: 4px; background: var(--line2); position: relative; } .adm-root .tv-price .sl i { position: absolute; top: -6px; left: 60%; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); animation: adm-sld 3s ease-in-out infinite; } @keyframes adm-sld { 50% { left: 80%; } }
.adm-root .tv-lan { transform-origin: 60px 20px; animation: adm-tvsway 3s ease-in-out infinite; } @keyframes adm-tvsway { 50% { transform: rotate(6deg); } }
.adm-root .tv-star { animation: adm-tw 2s ease-in-out infinite; }
.adm-root .tv-chk { list-style: none; display: grid; gap: 9px; width: 60%; }
.adm-root .tv-chk li { display: flex; gap: 10px; align-items: center; } .adm-root .tv-chk li::before { content: ''; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--line2); flex: none; animation: adm-chk 4s infinite; }
.adm-root .tv-chk li::after { content: ''; height: 7px; border-radius: 4px; background: var(--line2); flex: 1; }
.adm-root .tv-chk li:nth-child(2)::before { animation-delay: .5s; } .adm-root .tv-chk li:nth-child(3)::before { animation-delay: 1s; } .adm-root .tv-chk li:nth-child(4)::before { animation-delay: 1.5s; }
@keyframes adm-chk { 0%, 15% { background: transparent; border-color: var(--line2); } 25%, 100% { background: #22C55E; border-color: #22C55E; } }
.adm-root .tv-ai { display: grid; gap: 8px; width: 78%; font-size: 12px; }
.adm-root .tv-ai span { padding: 8px 11px; border-radius: 12px; max-width: 90%; } .adm-root .tv-ai .q { justify-self: end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.adm-root .tv-ai .a { background: var(--card); border: 1px solid var(--line2); border-bottom-left-radius: 4px; } .adm-root .tv-ai .a b { color: var(--gold); animation: adm-tvp 2s ease-in-out infinite; display: inline-block; }
html[data-adm-theme="light"] .adm-root .tv-ai .a b { color: var(--blue1); }
.adm-root .tv-code { font: 500 12px/1.7 ui-monospace, monospace; padding: 12px 16px; border-radius: 12px; background: #101214; color: #F6F4EF; display: grid; }
.adm-root .tv-code em { font-style: normal; color: var(--gold); } .adm-root .tv-code span:nth-child(3)::after { content: '|'; animation: adm-tvblink 1s steps(1) infinite; } @keyframes adm-tvblink { 50% { opacity: 0; } }

.adm-root .whyfree { display: grid; grid-template-columns: .95fr 1.05fr; gap: 50px; align-items: center; }
.adm-root .whyfree h2 { font-size: 42px; line-height: 1.08; margin-bottom: 14px; } .adm-root .whyfree h2 .hl { color: var(--gold); } html[data-adm-theme="light"] .adm-root .whyfree h2 .hl { color: var(--blue1); }
.adm-root .wf3 { display: grid; gap: 12px; }
.adm-root .wf3 > div { padding: 20px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); }
.adm-root .wf3 > div:nth-child(2) { border-left-color: var(--blue2); } .adm-root .wf3 > div:nth-child(3) { border-left-color: var(--brown-l); }
.adm-root .wf3 b { font: 700 16.5px Sora; } .adm-root .wf3 p { color: var(--mut); font-size: 14.5px; line-height: 1.55; margin-top: 4px; }

.adm-root .cta.cta-tools { background: linear-gradient(135deg, #101214 40%, #1B2A6B); }
html[data-adm-theme="light"] .adm-root .cta.cta-tools { background: linear-gradient(135deg, var(--blue1), #101214); }
.adm-root .cta.cta-tools::before, .adm-root .cta.cta-tools::after { display: none; }
.adm-root .tbits { position: absolute; inset: 0; pointer-events: none; }
.adm-root .tb { position: absolute; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--gold); animation: adm-float 7s ease-in-out infinite; } .adm-root .tb svg { width: 24px; height: 24px; }
.adm-root .tb1 { left: 9%; top: 22%; } .adm-root .tb2 { right: 10%; top: 18%; animation-delay: -2s; } .adm-root .tb3 { right: 18%; bottom: 16%; animation-delay: -4s; }

@media (max-width: 1000px) {
  .adm-root .thg, .adm-root .whyfree { grid-template-columns: 1fr; gap: 30px; } .adm-root .thero h1 { font-size: 40px; } .adm-root .whyfree h2 { font-size: 32px; }
  .adm-root .tgrid { grid-template-columns: 1fr 1fr; } .adm-root .tcard.big { grid-column: span 2; }
  .adm-root .tb { display: none; }
}
@media (max-width: 600px) {
  .adm-root .tgrid { grid-template-columns: 1fr; } .adm-root .tcard.big { grid-column: auto; flex-direction: column; } .adm-root .tcard.big .tvis { width: auto; min-height: 170px; border-right: 0; border-bottom: 1px solid var(--line); }
  .adm-root .hcheck > div { flex-direction: column; padding: 0; background: none; border: 0; } .adm-root .hcheck input { flex: none; height: 54px; border-radius: 14px; background: var(--bg2); border: 1.5px solid var(--line2); } .adm-root .hcheck .btn { width: 100%; }
  .adm-root .tfil { flex-wrap: nowrap; overflow-x: auto; margin-left: -18px; margin-right: -18px; padding: 0 18px 6px; scrollbar-width: none; } .adm-root .tfil button { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .adm-root .gauge2 .arc { stroke-dashoffset: 52; } .adm-root .gauge2 .needle { transform: rotate(56deg); } .adm-root .tv-arc { stroke-dashoffset: 26; } }
.adm-root .tsug { border-radius: 24px; border: 1.5px dashed var(--line2); padding: 28px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; transition: border-color .3s; }
.adm-root .tsug:hover { border-color: var(--hl); } .adm-root .tsug[hidden] { display: none; }
.adm-root .tsug i { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--bg3); color: var(--hl); font: 700 26px Sora; font-style: normal; }
.adm-root .tsug b { font: 700 19px Sora; } .adm-root .tsug p { color: var(--mut); font-size: 14.5px; line-height: 1.55; } .adm-root .tsug span { font-weight: 700; color: var(--hl); font-size: 14px; }
.adm-root .tsug { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 20px; padding: 22px 26px; } .adm-root .tsug p { flex: 1; min-width: 220px; }