/* WEB7TOOLS 3D layer: hero rig, tilt cards, tool UI, tool pages. Loaded only on pages flagged _w7_3d. */
body .w7s{--sh:rgba(8,12,40,.55)}
body .w7s [hidden]{display:none!important}
body .w7s a:not(.btn):not(.t-b){text-underline-offset:3px}

/* reveal: visible by default, hidden only when the script marks the page */
html.w7js body .w7s .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.w7js body .w7s .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.w7js body .w7s .rv{opacity:1;transform:none;transition:none}}

/* ---------- 3D hero ---------- */
body .w7s .h3d{position:relative;overflow:hidden;isolation:isolate;padding:56px 0 72px;min-height:min(88vh,740px);display:flex;align-items:center;background:radial-gradient(900px 520px at 80% 8%,rgba(65,105,225,.30),transparent 62%),radial-gradient(760px 460px at 4% 96%,rgba(139,92,246,.20),transparent 62%),#0b1220}
body .w7s .h3d:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-6%;height:44%;z-index:-1;background:linear-gradient(rgba(143,168,255,.22) 1px,transparent 1px) 0 0/100% 46px,linear-gradient(90deg,rgba(143,168,255,.16) 1px,transparent 1px) 0 0/64px 100%;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 0,transparent 92%);mask-image:linear-gradient(to top,#000 0,transparent 92%)}
body .w7s .h3d>.w{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;width:100%}
body .w7s .h3d h1{font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.06;color:#fff;margin:0 0 18px;max-width:17ch}
body .w7s .h3d h1 .g{background:linear-gradient(90deg,#7c9bff,#b79cff);-webkit-background-clip:text;background-clip:text;color:transparent}
body .w7s .h3d p{font-size:1.1rem;color:#b9c3d8;max-width:46ch}
body .w7s .stagew{width:100%}
body .w7s .stage{width:480px;height:440px;margin-left:auto;perspective:1100px;perspective-origin:50% 40%;position:relative}
body .w7s .rig{position:absolute;left:0;top:0;width:480px;height:440px;transform-style:preserve-3d;transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-22deg));transition:transform .18s ease-out}
body .w7s .slab{position:absolute;left:-14px;top:-14px;width:508px;height:468px;border-radius:38px;background:linear-gradient(145deg,rgba(33,48,96,.65),rgba(20,29,48,.35));border:1px solid rgba(143,168,255,.22);transform:translateZ(-70px);box-shadow:0 60px 80px -30px var(--sh)}
body .w7s .tile{--x:0px;--y:0px;--z:0px;position:absolute;left:0;top:0;width:124px;height:124px;border-radius:26px;transform:translate3d(var(--x),var(--y),var(--z));transform-style:preserve-3d;animation:w7bob 6.5s ease-in-out infinite;animation-delay:var(--d,0s)}
body .w7s .tile:before{content:"";position:absolute;inset:0;border-radius:26px;background:#0b1126;transform:translateZ(-18px);box-shadow:0 40px 40px -16px var(--sh)}
body .w7s .tile a{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:26px;text-decoration:none;color:#e6ebf5;background:linear-gradient(150deg,#22305f 0%,#141d30 72%);border:1px solid rgba(143,168,255,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 46px -22px var(--sh);transition:border-color .2s}
body .w7s .tile a:hover,body .w7s .tile a:focus-visible{border-color:#8B5CF6}
body .w7s .tile:hover{animation-play-state:paused}
body .w7s .tile .gl{font-size:2rem;font-weight:800;line-height:1;background:linear-gradient(135deg,#7c9bff,#b79cff);-webkit-background-clip:text;background-clip:text;color:transparent}
body .w7s .tile .lb{font-size:.74rem;font-weight:700;color:#c9d3e8}
@keyframes w7bob{0%,100%{transform:translate3d(var(--x),var(--y),var(--z))}50%{transform:translate3d(var(--x),calc(var(--y) - 14px),var(--z))}}
@media (prefers-reduced-motion:reduce){body .w7s .tile{animation:none}body .w7s .rig{transition:none}}
@media (max-width:960px){
  body .w7s .h3d{min-height:0;padding:44px 0 56px}
  body .w7s .h3d>.w{grid-template-columns:1fr;gap:18px}
  body .w7s .stagew{height:352px}
  body .w7s .stage{margin:0 auto;transform:scale(.8);transform-origin:top center;display:block;position:relative;left:0}
}
@media (max-width:520px){
  body .w7s .stagew{height:268px}
  body .w7s .stage{transform:scale(.56)}
}

/* ---------- tilt cards ---------- */
body .w7s .tilt{position:relative;transform-style:preserve-3d;transition:transform .14s ease-out,box-shadow .3s;will-change:transform}
body .w7s .tilt:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.10),transparent 55%)}
body .w7s .tilt:hover:after{opacity:1}
body .w7s .tilt:hover{box-shadow:0 36px 60px -28px var(--sh)}

/* ---------- homepage sections ---------- */
body .w7s .sec-h{margin-bottom:28px}
body .w7s .sec-h p{margin-bottom:0}
body .w7s .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
body .w7s .tabs [role=tab]{font:inherit;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:99px;padding:9px 18px;cursor:pointer}
body .w7s .tabs [role=tab][aria-selected=true]{background:linear-gradient(135deg,var(--blue),var(--purple));border-color:transparent;color:#fff}
body .w7s .livebox{max-width:860px}
body .w7s .bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
body .w7s .cat{grid-column:span 2;border-radius:20px;padding:26px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column}
body .w7s .cat.c3{grid-column:span 3}
body .w7s .cat.ta{background:linear-gradient(160deg,#18264a,#141d30)}
body .w7s .cat.tc{background:linear-gradient(200deg,#1c2350,#141d30 72%)}
body .w7s .cat .cg{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;margin-bottom:14px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 14px 24px -12px var(--sh)}
body .w7s .cat h3{margin:0 0 4px;font-size:1.2rem}
body .w7s .cat p{font-size:.92rem;margin:0 0 12px}
body .w7s .cat ul{list-style:none;margin:0;padding:0}
body .w7s .cat li a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;font-weight:700;color:var(--text)}
body .w7s .cat li a span{color:var(--mut);font-weight:400;font-size:.85rem;text-align:right}
body .w7s .cat li a:hover{color:#b79cff}
body .w7s .nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body .w7s .nums div{padding:34px 22px;border-left:1px solid var(--line)}
body .w7s .nums div:first-child{border-left:0;padding-left:0}
body .w7s .nums b{display:block;font-size:clamp(3rem,8vw,5.5rem);line-height:1;font-weight:800;background:linear-gradient(135deg,#ffffff,#9fb3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
body .w7s .nums span{display:block;margin-top:10px;color:var(--mut);max-width:24ch}
body .w7s .more-link{display:inline-block;margin-top:18px;font-weight:700;color:#b79cff}
@media (max-width:900px){
  body .w7s .bento{grid-template-columns:1fr}
  body .w7s .cat,body .w7s .cat.c3{grid-column:auto}
  body .w7s .nums{grid-template-columns:1fr}
  body .w7s .nums div{border-left:0;border-top:1px solid var(--line);padding:24px 0}
  body .w7s .nums div:first-child{border-top:0}
}

/* ---------- tool pages ---------- */
body .w7s .tp-hero{background:radial-gradient(900px 380px at 85% 0%,rgba(65,105,225,.26),transparent 62%),#0b1220;padding:44px 0 36px}
body .w7s .tp-hero h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:0 0 12px}
body .w7s .tp-hero p{font-size:1.08rem;margin:0}
body .w7s .crumb{font-size:.88rem;margin:0 0 14px;color:var(--mut)}
body .w7s .crumb a{color:var(--mut)}
body .w7s .tp-tool{padding:34px 0 10px}
body .w7s .tp-body{max-width:760px}
body .w7s .tp-body h2{font-size:1.5rem;margin:1.8em 0 .5em}
body .w7s .tp-body p,body .w7s .tp-body li{color:var(--text);line-height:1.8;font-size:1.04rem;max-width:none}
body .w7s .tp-body ol,body .w7s .tp-body ul{padding-left:1.3em;margin:0 0 1.2em}
body .w7s .tp-body li{margin:0 0 .5em}
body .w7s .tp-body a{color:#9fb3ff}
body .w7s .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px}
body .w7s .rel a{display:block;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
body .w7s .rel a b{display:block;margin-bottom:4px}
body .w7s .rel a span{color:var(--mut);font-size:.88rem}
body .w7s .rel a:hover{border-color:var(--purple)}

/* ---------- tool UI ---------- */
body .w7s .w7t{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 30px 60px -34px var(--sh)}
body .w7s .w7t label{margin:0 0 14px}
body .w7s .w7t label small{font-weight:500;color:var(--mut);margin-left:6px}
body .w7s .w7t textarea{min-height:120px;resize:vertical;line-height:1.5}
body .w7s .w7t input[type=range]{padding:0;height:34px;accent-color:#8B5CF6}
body .w7s .w7t input[type=color]{padding:3px;height:44px;cursor:pointer}
body .w7s .w7t input[type=checkbox]{width:18px;height:18px;padding:0;accent-color:#8B5CF6;flex:none}
body .w7s .w7t .ck{display:flex;align-items:center;gap:10px;font-weight:600;align-self:end;min-height:44px}
body .w7s .w7t .t-checks{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 14px}
body .w7s .w7t .t-checks .ck{min-height:34px;margin:0}
body .w7s .w7t .mt{margin-top:18px}
body .w7s .w7t .t-row{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
body .w7s .w7t .t-h{font-size:1.05rem;margin:22px 0 10px}
body .w7s .w7t .t-btns{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
body .w7s .w7t .t-b{display:inline-block;font:inherit;font-weight:700;font-size:.92rem;text-decoration:none;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--text)!important;border-radius:99px;padding:9px 18px;line-height:1.3}
body .w7s .w7t .t-b:hover{border-color:var(--purple)}
body .w7s .w7t .t-b.on{border-color:var(--purple);background:#1c2350}
body .w7s .w7t .t-b.p{border:0;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff!important}
body .w7s .w7t .t-b.p:hover{opacity:.92}
body .w7s .w7t .t-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0 0}
body .w7s .w7t .t-stats:empty{display:none}
body .w7s .w7t .t-stat{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
body .w7s .w7t .t-stat b{display:block;font-size:1.45rem;line-height:1.15;color:#fff;word-break:break-word}
body .w7s .w7t .t-stat span{display:block;font-size:.8rem;color:var(--mut);margin-top:3px}
body .w7s .w7t .t-out{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;word-break:break-word;font:13.5px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);min-height:56px;margin:0}
body .w7s .w7t .t-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.02em}
body .w7s .w7t .t-note{color:var(--mut);font-size:.88rem;margin:12px 0 0;max-width:none}
body .w7s .w7t .t-err{color:#ff8a80;font-size:.9rem;margin:6px 0 0;min-height:1em;max-width:none}
body .w7s .w7t .t-ok{color:#7ee2b0;font-size:.9rem;margin:12px 0 0;max-width:none}
body .w7s .w7t .t-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--bg);border:1px solid var(--line);margin-top:18px}
body .w7s .w7t .t-bar i{display:block;height:100%}
body .w7s .w7t .t-bar .bp{background:var(--blue)}
body .w7s .w7t .t-bar .bi{background:#b79cff}
body .w7s .w7t .t-scroll{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:12px}
body .w7s .w7t .t-tbl{width:100%;border-collapse:collapse;font-size:.9rem}
body .w7s .w7t .t-tbl th,body .w7s .w7t .t-tbl td{padding:9px 14px;text-align:right;border-bottom:1px solid var(--line)}
body .w7s .w7t .t-tbl th:first-child,body .w7s .w7t .t-tbl td:first-child{text-align:left}
body .w7s .w7t .t-tbl th{position:sticky;top:0;background:#101828;color:var(--text)}
body .w7s .w7t .t-pc{padding:0 0 6px;border-bottom:1px solid var(--line);margin-bottom:6px}
body .w7s .w7t .t-pc:last-child{border-bottom:0;margin-bottom:0}
body .w7s .w7t .t-serp{background:#fff;border-radius:12px;padding:14px 18px;max-width:640px}
body .w7s .w7t .t-serp b{display:block;color:#1a0dab;font-size:1.15rem;font-weight:500;line-height:1.3}
body .w7s .w7t .t-serp span{display:block;color:#188038;font-size:.85rem;margin:2px 0;word-break:break-all}
body .w7s .w7t .t-serp p{color:#4d5156;font-size:.9rem;margin:0;line-height:1.5;max-width:none}
body .w7s .w7t .t-drop{border:2px dashed #3a4a73;border-radius:16px;padding:30px 18px;text-align:center;cursor:pointer;margin-bottom:18px;background:var(--bg);color:var(--text)}
body .w7s .w7t .t-drop.on,body .w7s .w7t .t-drop:hover,body .w7s .w7t .t-drop:focus-visible{border-color:var(--purple)}
body .w7s .w7t .t-drop b{display:inline;color:#b79cff}
body .w7s .w7t .t-drop small{display:block;margin-top:6px;color:var(--mut)}
body .w7s .w7t .t-item{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--line);border-radius:14px;margin-top:10px;background:var(--bg);flex-wrap:wrap}
body .w7s .w7t .t-item img{width:64px;height:64px;object-fit:cover;border-radius:10px;background:#1c2333}
body .w7s .w7t .t-item .m{flex:1;min-width:180px}
body .w7s .w7t .t-item .m b{display:block;word-break:break-all}
body .w7s .w7t .t-item .m span{color:var(--mut);font-size:.85rem}
body .w7s .w7t .t-qr{display:flex;justify-content:center;padding:18px;background:#fff;border-radius:16px;margin:8px 0 14px}
body .w7s .w7t .t-qr canvas{max-width:100%;height:auto;image-rendering:pixelated}
body .w7s .w7t .t-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;margin-top:6px}
body .w7s .w7t .t-col{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;min-height:120px}
body .w7s .w7t .t-col h4{margin:0 0 10px;font-size:.95rem;color:#fff}
body .w7s .w7t .t-col h4 small{color:var(--mut);font-weight:500}
body .w7s .w7t .t-lead{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;display:grid;gap:3px;font-size:.88rem}
body .w7s .w7t .t-lead b{color:#fff;word-break:break-word}
body .w7s .w7t .t-lead span{color:var(--mut);word-break:break-word}
body .w7s .w7t .t-lead em{color:#b9c3d8;font-style:normal;font-size:.82rem}
body .w7s .w7t .t-lb{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
body .w7s .w7t .t-lb .t-b{padding:5px 11px;font-size:.8rem}