/* ========================================
   落锦工具页 v2 — 共享样式
   覆盖 visual-redesign.css 的浮夸效果
   ======================================== */

/* ---- 全局覆盖 visual-redesign 的浮夸效果 ---- */
body{background:#09090b!important;color:#f4f4f5!important;font-family:"Inter","SF Pro Display","PingFang SC","Microsoft YaHei UI",sans-serif!important;overflow-x:hidden!important}
body::before{display:none!important}
body::after{display:none!important}

/* ---- 禁用所有卡片/面板的伪元素发光 ---- */
.entry::before,.card::before,.tool-card::before,.feat::before,.panel::before,.main-card::before,.chat-panel::before,.result-area::before,.out-panel::before{display:none!important}
.entry::after,.card::after,.tool-card::after{display:none!important}

/* ---- 背景网格 ---- */
.bg-grid-def{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:60px 60px}

/* ---- 导航栏 ---- */
.tt-nav{position:sticky!important;top:0!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 20px!important;height:48px!important;background:rgba(9,9,11,.88)!important;backdrop-filter:blur(12px) saturate(180%)!important;-webkit-backdrop-filter:blur(12px) saturate(180%)!important;border-bottom:1px solid #1f1f24!important;box-shadow:none!important}
.tt-nav-logo{font-size:15px!important;font-weight:700!important;text-decoration:none!important;text-shadow:none!important}
.tt-nav-logo .lj{color:#3b82f6!important;text-shadow:none!important}
.tt-nav-logo .jt{color:#f4f4f5!important}
.tt-nav-links{display:flex!important;gap:4px!important}
.tt-nav-links a{padding:6px 12px!important;border-radius:7px!important;font-size:13px!important;color:#a1a1aa!important;text-decoration:none!important;transition:color .15s,background .15s!important;text-shadow:none!important;background:none!important;border:none!important;min-height:auto!important}
.tt-nav-links a:hover{color:#f4f4f5!important;background:#1a1a1e!important;text-shadow:none!important;transform:none!important}

/* ---- Hero ---- */
.tt-hero{padding:48px 24px 32px!important;text-align:center!important;position:relative!important;z-index:1!important}
.tt-hero-tag{display:inline-block!important;padding:3px 12px!important;border-radius:999px!important;font-size:12px!important;font-weight:500!important;color:#3b82f6!important;background:rgba(59,130,246,.12)!important;border:1px solid rgba(59,130,246,.18)!important;margin-bottom:12px!important;box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important}
.tt-hero h1{font-size:28px!important;font-weight:700!important;color:#f4f4f5!important;margin-bottom:6px!important;letter-spacing:-.02em!important;text-shadow:none!important}
.tt-hero h1 span,.tt-hero h1 em{background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important;color:inherit!important}
.tt-hero p{font-size:14px!important;color:#a1a1aa!important;max-width:480px!important;margin:0 auto!important}

/* ---- 主布局 ---- */
.tt-main{display:grid!important;grid-template-columns:340px 1fr!important;gap:16px!important;max-width:1100px!important;margin:0 auto!important;padding:0 24px 60px!important;position:relative!important;z-index:1!important}
@media(max-width:768px){.tt-main{grid-template-columns:1fr!important;padding:0 16px 60px!important}}

/* ---- 面板 ---- */
.tt-panel{background:#111114!important;border:1px solid #1f1f24!important;border-radius:10px!important;padding:20px!important;box-shadow:none!important;backdrop-filter:none!important}.tt-panel::before{display:none!important}.tt-panel:hover{border-color:#2e2e36!important;transform:none!important;box-shadow:none!important}
.tt-panel h3{font-size:11px!important;font-weight:600!important;color:#52525b!important;margin-bottom:14px!important;text-transform:uppercase!important;letter-spacing:.08em!important}
.tt-panel label{display:block!important;font-size:12px!important;color:#a1a1aa!important;margin-bottom:5px!important;margin-top:14px!important;font-weight:500!important}
.tt-panel label:first-of-type{margin-top:0!important}

/* ---- 步骤 ---- */
.tt-steps{display:none;justify-content:center;gap:0;padding:0 24px 16px;position:relative;z-index:2}
.tt-step{padding:8px 20px;font-size:12px;color:#52525b;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s;letter-spacing:0}
.tt-step.active{color:#3b82f6;border-bottom-color:#3b82f6;text-shadow:none}
.tt-step.done{color:#a1a1aa}
@media(max-width:768px){.tt-steps{display:flex}.tt-step{padding:8px 14px;font-size:11px}}
.tt-step-group{display:none}.tt-step-group.active{display:block;animation:ttFadeIn2 .2s ease}
@media(min-width:769px){.tt-step-group{display:block}}

/* ---- 输入框 ---- */
.tt-input,.tt-select,.tt-textarea{width:100%;padding:9px 12px;font-size:13px;background:#16161a!important;border:1px solid #1f1f24!important;border-radius:7px!important;color:#f4f4f5;outline:none;transition:border-color .15s,box-shadow .15s;font-family:"JetBrains Mono","SF Mono","Cascadia Code",Consolas,monospace;resize:vertical;box-shadow:inset 0 0 0 0 transparent!important}
.tt-input:focus,.tt-select:focus,.tt-textarea:focus{border-color:#3b82f6!important;box-shadow:0 0 0 3px rgba(59,130,246,.1)!important}
.tt-textarea{min-height:100px;line-height:1.5}
.tt-select{font-family:"Inter","PingFang SC","Microsoft YaHei UI",sans-serif;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%2352525b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;background-color:#16161a!important}
input::placeholder,textarea::placeholder{color:#52525b!important}

/* ---- 拖拽上传 ---- */
.tt-dropzone{border:1.5px dashed #1f1f24!important;border-radius:10px!important;padding:28px 24px!important;text-align:center!important;transition:border-color .15s,background .15s!important;cursor:pointer!important;background:#16161a!important}
.tt-dropzone:hover,.tt-dropzone.dragover{border-color:#3b82f6!important;background:rgba(59,130,246,.04)!important}
.tt-dropzone-icon{font-size:28px!important;margin-bottom:8px!important;opacity:.4!important}
.tt-dropzone-text{font-size:12px!important;color:#a1a1aa!important;line-height:1.6!important}
.tt-dropzone-text strong{color:#3b82f6!important}
.tt-dropzone input[type="file"]{display:none!important}

/* ---- 按钮 ---- */
.tt-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;padding:8px 18px!important;font-size:13px!important;font-weight:500!important;border:none!important;border-radius:7px!important;cursor:pointer!important;transition:background .15s,color .15s,transform .1s!important;font-family:inherit!important;letter-spacing:0!important;box-shadow:none!important;text-shadow:none!important}
.tt-btn:active{transform:scale(.97)!important}
.tt-btn-primary{background:#3b82f6!important;color:#fff!important}
.tt-btn-primary:hover{background:#2563eb!important;transform:translateY(0)!important;box-shadow:none!important}
.tt-btn-secondary{background:#1a1a1e!important;color:#a1a1aa!important;border:1px solid #1f1f24!important}
.tt-btn-secondary:hover{color:#f4f4f5!important;border-color:#2e2e36!important;background:#1a1a1e!important;transform:translateY(0)!important;box-shadow:none!important}
.tt-btn-block{width:100%!important}
.tt-btn-sm{padding:6px 14px!important;font-size:12px!important}

/* ---- 结果区 ---- */
.tt-result{background:#111114!important;border:1px solid #1f1f24!important;border-radius:10px!important;padding:20px!important;min-height:180px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;overflow-y:auto!important;box-shadow:none!important;backdrop-filter:none!important}
.tt-result::before{display:none!important}
.tt-result:hover{border-color:#2e2e36!important;transform:none!important;box-shadow:none!important}
.tt-result-placeholder{color:#52525b!important;font-size:13px!important;text-align:center!important;line-height:1.6!important}
.tt-result img{max-width:100%!important;border-radius:6px!important;margin-bottom:12px!important}
.tt-result pre{width:100%!important;background:#16161a!important;border:1px solid #1f1f24!important;border-radius:7px!important;padding:14px!important;font-family:"JetBrains Mono","SF Mono","Cascadia Code",Consolas,monospace!important;font-size:12px!important;color:#f4f4f5!important;white-space:pre-wrap!important;word-break:break-all!important;max-height:420px!important;overflow-y:auto!important;line-height:1.65!important;tab-size:2!important}
.tt-result a{color:#3b82f6!important;text-decoration:none!important;font-size:13px!important;display:inline-flex!important;align-items:center!important;gap:4px!important;margin-top:4px!important}
.tt-result a:hover{text-decoration:underline!important}

/* ---- 范围滑块 ---- */
.tt-range-row{display:flex;align-items:center;gap:10px}
.tt-range-row input[type="range"]{flex:1;accent-color:#3b82f6;height:4px}
.tt-range-val{font-size:12px;color:#f4f4f5;min-width:24px;text-align:right;font-weight:600}

/* ---- Footer ---- */
.tt-footer{padding:20px 24px!important;text-align:center!important;font-size:12px!important;color:#52525b!important;border-top:1px solid #1f1f24!important;position:relative!important;z-index:1!important;background:none!important}

/* ---- Toast ---- */
.toast{position:fixed!important;bottom:32px!important;left:50%!important;transform:translateX(-50%) translateY(16px)!important;background:#f4f4f5!important;color:#09090b!important;padding:9px 20px!important;border-radius:999px!important;font-size:13px!important;font-weight:500!important;z-index:9999!important;opacity:0!important;transition:opacity .2s,transform .2s!important;pointer-events:none!important;box-shadow:0 4px 24px rgba(0,0,0,.5)!important}
.toast.show{opacity:1!important;transform:translateX(-50%) translateY(0)!important}

/* ---- 动画 ---- */
@keyframes ttFadeIn2{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes ttFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.tt-fade-in{animation:ttFadeIn .25s ease both}

/* ---- 取色器 ---- */
.tt-colorpicker-canvas{cursor:crosshair;border-radius:10px;border:1px solid #1f1f24;max-width:100%}
.tt-color-swatch{width:48px;height:48px;border-radius:8px;border:2px solid #2e2e36;transition:box-shadow .3s}
.tt-color-info{display:flex;gap:8px;align-items:center;margin-top:10px}

/* ---- 裁剪工具 ---- */
.tt-crop-container{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:10px;cursor:crosshair;user-select:none;-webkit-user-select:none}
.tt-crop-overlay{position:absolute;inset:0;pointer-events:none}
.tt-crop-handle{position:absolute;width:10px;height:10px;border:2px solid #fff;background:rgba(59,130,246,.9);border-radius:2px;pointer-events:auto}

/* ---- 自定义滚动条 ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1f1f24;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#2e2e36}