.tools-page{padding:6rem 2rem 4rem;max-width:1100px;margin:0 auto}
.page-header{text-align:center;margin-bottom:2.5rem}
.page-header h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800}
.page-header p{color:var(--text-dim);max-width:560px;margin:.75rem auto 0;font-size:1.05rem;line-height:1.6}

.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}

.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;position:relative;transition:all .4s cubic-bezier(.22,1,.36,1);cursor:pointer;overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;min-height:150px;box-shadow:0 0 40px rgba(184,200,216,.03)}
.tool-card::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 40%,rgba(184,200,216,.07) 0%,transparent 65%);pointer-events:none;z-index:0;transition:all .5s cubic-bezier(.22,1,.36,1)}
.tool-card:hover{transform:translateY(-3px);border-color:rgba(184,200,216,.18);box-shadow:0 12px 40px rgba(0,0,0,.25),0 0 60px rgba(184,200,216,.06)}
.tool-card:hover::after{background:radial-gradient(ellipse at 50% 40%,rgba(184,200,216,.14) 0%,transparent 60%)}
.tool-card.coming{opacity:.45;cursor:default;pointer-events:none}
.tool-card.coming:hover{transform:none;box-shadow:none;border-color:var(--border)}
.tool-card.coming .tool-compact-icon{filter:grayscale(1)}

.tool-compact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;text-align:center;width:100%;height:100%}
.tool-compact-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.tool-compact-name{font-size:.8rem;font-weight:700;line-height:1.25;color:var(--text)}

.tool-expand{display:none}

.coming-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.62rem;color:var(--text-muted);padding:.2rem .5rem;border-radius:6px;background:rgba(255,255,255,0.03);border:1px solid var(--border);margin-top:.15rem}

/* ===== Floating Modal ===== */
.tool-modal{position:fixed;inset:0;z-index:999;display:flex;visibility:hidden;align-items:flex-start;justify-content:center;padding:5vh 1.5rem 5vh;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:none}
.tool-modal.active{visibility:visible;pointer-events:auto}
.tool-modal.closing{pointer-events:none}
.tool-modal-bg{position:fixed;inset:0;background:rgba(8,10,14,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tool-modal.active .tool-modal-bg{animation:modalFadeIn .35s var(--ease-smooth) forwards}
.tool-modal.closing .tool-modal-bg{animation:modalFadeOut .2s var(--ease-smooth) forwards}
.tool-modal-wrap{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:1.25rem 1.5rem 1.25rem;width:100%;max-width:580px;margin:auto;box-shadow:0 0 60px rgba(184,200,216,.05)}
.tool-modal.active .tool-modal-wrap{animation:modalZoomIn .5s cubic-bezier(.34,1.56,.64,1) forwards}
.tool-modal.closing .tool-modal-wrap{animation:modalZoomOut .25s cubic-bezier(.5,0,.5,1) forwards}
@keyframes modalFadeIn{to{opacity:1}}
@keyframes modalFadeOut{to{opacity:0}}
@keyframes modalZoomIn{
  0%{opacity:0;transform:scale(.82) translateY(16px)}
  65%{opacity:1;transform:scale(1.025) translateY(-3px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes modalZoomOut{
  0%{opacity:1;transform:scale(1) translateY(0)}
  100%{opacity:0;transform:scale(.88) translateY(10px)}
}
.tool-modal-minimize{position:absolute;top:.75rem;right:.85rem;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:.72rem;cursor:pointer;transition:all .3s var(--ease-smooth);z-index:2}
.tool-modal-minimize:hover{background:rgba(255,255,255,.1);color:var(--text);transform:scale(1.1)}
.tool-modal-body .tool-expand{display:block;padding-right:2.2rem}
.tool-modal-body .tool-head{margin-top:0}
.tool-modal-body .tool-desc{margin-bottom:.85rem}

/* ===== Tool Shared Styles ===== */
.tool-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.tool-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.tool-head h3{font-size:1.1rem;font-weight:700}
.tool-desc{font-size:.85rem;color:var(--text-dim);line-height:1.5;margin-bottom:1rem}
.tool-input-row{display:flex;gap:.5rem;flex-wrap:wrap}
.tool-input{flex:1;padding:.7rem .85rem;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--border);color:var(--text);font-size:.85rem;font-family:var(--font-body);outline:none;transition:all .3s var(--ease-smooth);min-width:0}
.tool-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(184,200,216,.1)}
.tool-input::placeholder{color:var(--text-muted)}
.tool-btn{padding:.7rem 1.2rem;border-radius:10px;border:none;background:var(--accent-gradient);color:#000;font-weight:700;font-size:.82rem;cursor:pointer;font-family:var(--font-body);transition:all .35s var(--ease-spring);white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.tool-btn:hover:not(:disabled){transform:scale(1.04);box-shadow:0 4px 16px var(--accent-glow)}
.tool-btn:disabled{opacity:.4;cursor:not-allowed}
.tool-result{margin-top:.75rem;padding:.75rem;border-radius:10px;background:rgba(0,0,0,.15);border:1px solid var(--border);font-size:.82rem;line-height:1.6;display:none}
.tool-result.open{display:block}
.tool-result a{color:var(--accent);word-break:break-all;text-decoration:none}
.tool-result a:hover{text-decoration:underline}
.result-msg{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;line-height:1.5;padding:.5rem 0}
.result-msg i{margin-top:.2rem;flex-shrink:0}
.result-ok{color:#10b981}
.result-err{color:#ef4444}
.result-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.5rem;padding:.5rem 1rem;border-radius:8px;background:var(--accent-gradient);color:#000;font-weight:700;font-size:.82rem;text-decoration:none;transition:all .35s var(--ease-spring)}
.result-link:hover{transform:scale(1.04);box-shadow:0 4px 16px var(--accent-glow)}
.step-indicator{font-size:.75rem;color:var(--text-muted);margin-bottom:.5rem;font-weight:600}
.am-step{display:none}
.am-step.active{display:flex;flex-direction:column;gap:.75rem}
.am-step .captcha-wrap{display:flex;justify-content:center}
.sp-section{margin-top:.75rem}
.sp-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.5rem}
.sp-divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0;color:var(--text-muted);font-size:.75rem;font-weight:600}
.sp-divider::before,.sp-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.sp-search-result .sp-item{display:flex;gap:.65rem;align-items:center;margin-top:.5rem;padding:.5rem .65rem;background:rgba(0,0,0,.15);border-radius:10px;border:1px solid var(--border)}
.sp-search-result .sp-item-cover{width:44px;height:44px;border-radius:6px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,.05)}
.sp-search-result .sp-item-info{flex:1;min-width:0}
.sp-search-result .sp-item-title{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-search-result .sp-item-meta{font-size:.75rem;color:var(--text-dim)}
.sp-search-result .sp-item-play{padding:.35rem .5rem;border-radius:50%;border:none;background:rgba(29,185,84,.1);color:#1DB954;font-size:.7rem;cursor:pointer;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease-smooth)}
.sp-search-result .sp-item-play:hover{background:rgba(29,185,84,.2);transform:scale(1.1)}
.sp-search-result .sp-item-play.playing{background:#1DB954;color:#000}
.sp-nowplaying{margin-top:.5rem;padding:.5rem .65rem;background:rgba(29,185,84,.06);border:1px solid rgba(29,185,84,.15);border-radius:10px}
.sp-np-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;margin-bottom:.4rem}
.sp-np-fill{height:100%;width:0%;background:#1DB954;border-radius:2px;transition:width .3s linear}
.sp-np-info{display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.sp-np-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-dim)}
.sp-np-stop{background:none;border:none;color:#ef4444;cursor:pointer;font-size:.8rem;padding:.2rem}
.oe-preview{margin-top:.5rem;text-align:center}
.oe-preview img{max-height:120px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.cdn-file-input{flex:1;padding:.5rem;border-radius:10px;background:rgba(0,0,0,.25);border:1px solid var(--border);color:var(--text);font-size:.85rem;font-family:var(--font-body);outline:none}

@media(max-width:1024px){
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media(max-width:768px){
  .tools-page{padding:5rem .85rem 3rem}
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.65rem}
  .tool-card{min-height:110px}
  .page-header h1{font-size:clamp(1.4rem,5vw,2rem)}
  .page-header p{font-size:.92rem}
  .tool-modal{padding:3vh .75rem 3vh}
  .tool-modal-wrap{padding:.85rem 1rem .85rem;max-width:100%}
}
@media(max-width:480px){
  .tools-page{padding:4.5rem .65rem 2rem}
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem}
  .tool-card{min-height:90px;border-radius:12px}
  .tool-compact{gap:.35rem;padding:.65rem}
  .tool-compact-icon{width:32px;height:32px;border-radius:8px;font-size:.9rem}
  .tool-compact-name{font-size:.68rem}
  .tool-modal-wrap{padding:.75rem .85rem .75rem;border-radius:16px}
  .tool-modal-body .tool-head h3{font-size:.95rem}
  .tool-desc{font-size:.78rem}
  .tool-input-row{flex-direction:column}
  .tool-input{width:100%;font-size:.82rem;padding:.6rem .75rem}
  .tool-btn{width:100%;justify-content:center;font-size:.8rem;padding:.6rem 1rem}
  .tool-result{font-size:.78rem;padding:.6rem}
  .result-msg{font-size:.8rem}
  .sp-search-result .sp-item{flex-wrap:wrap}
  .sp-search-result .sp-item-cover{width:36px;height:36px}
  .sp-search-result .sp-item-title{font-size:.78rem}
  .sp-np-info{font-size:.72rem;flex-wrap:wrap}
  .am-step.active{gap:.5rem}
  .am-step .captcha-wrap{transform:scale(.85);transform-origin:center}
  .step-indicator{font-size:.7rem}
  .result-link{width:100%;justify-content:center;font-size:.78rem;padding:.45rem .85rem}
  .cdn-file-input{font-size:.8rem}
  .coming-badge{font-size:.55rem;padding:.15rem .4rem}
}