/* ============================================================
   易云全能工具站 v3.1 — ai_tools/assets/store.css（P18 AI 工具坊）
   落地页 + 单工具页共用样式；颜色优先取主题 CSS 变量，回退内置值
   ============================================================ */

.at-wrap { --at1: var(--primary, #6d5ef1); --at2: var(--primary-2, #a855f7); --at-bg: var(--bg, #f6f7fb); color: var(--text, #1f2333); }

/* ---------- Hero ---------- */
.at-hero { position: relative; overflow: hidden; padding: 46px 0 26px; background: linear-gradient(135deg, rgba(109,94,241,.12), rgba(168,85,247,.10) 55%, rgba(14,165,233,.10)); }
.at-hero-glow { position: absolute; inset: -40% -20% auto; height: 380px; background: radial-gradient(closest-side, rgba(109,94,241,.25), transparent 70%); filter: blur(40px); pointer-events: none; }
.at-hero .container { position: relative; }
.at-crumb { font-size: 13px; opacity: .65; margin-bottom: 14px; }
.at-crumb a { color: inherit; text-decoration: none; }
.at-crumb span { margin: 0 6px; }
.at-title { font-size: 34px; font-weight: 800; margin: 0 0 10px; letter-spacing: .5px; background: linear-gradient(100deg, var(--at1), var(--at2), var(--at1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.at-sub { margin: 0 0 20px; opacity: .75; font-size: 15px; }
.at-search-box { position: relative; max-width: 560px; margin-bottom: 18px; }
.at-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; opacity: .6; }
.at-search { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 44px; border-radius: 14px; border: 1.5px solid rgba(109,94,241,.28); background: var(--card, #fff); color: inherit; font-size: 15px; outline: none; transition: box-shadow .2s, border-color .2s; }
.at-search:focus { border-color: var(--at1); box-shadow: 0 0 0 4px rgba(109,94,241,.14); }
.at-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.at-chip { border: 1.5px solid rgba(109,94,241,.25); background: var(--card, #fff); color: inherit; border-radius: 999px; padding: 8px 15px; font-size: 13.5px; cursor: pointer; transition: all .18s; }
.at-chip:hover { border-color: var(--at1); transform: translateY(-1px); }
.at-chip.on { background: linear-gradient(120deg, var(--at1), var(--at2)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(109,94,241,.35); }

/* ---------- 分区与网格 ---------- */
.at-section { margin: 30px 0 6px; }
.at-sec-title { font-size: 20px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.at-sec-n { font-size: 12px; font-weight: 600; color: var(--at1); background: rgba(109,94,241,.12); border-radius: 999px; padding: 2px 10px; }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.at-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 14px; border-radius: 16px; background: var(--card, #fff); border: 1.5px solid rgba(109,94,241,.12); text-decoration: none; color: inherit; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.at-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(109,94,241,.06), transparent 45%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.at-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(109,94,241,.16); border-color: rgba(109,94,241,.4); }
.at-card:hover::after { opacity: 1; }
.at-icon { width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border-radius: 13px; background: linear-gradient(135deg, rgba(109,94,241,.14), rgba(168,85,247,.14)); }
.at-icon-image { background: linear-gradient(135deg, rgba(236,72,153,.14), rgba(168,85,247,.14)); }
.at-icon-html { background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(16,185,129,.14)); }
.at-name { font-size: 15.5px; font-weight: 700; }
.at-desc { font-size: 12.5px; opacity: .68; line-height: 1.55; min-height: 38px; }
.at-type { font-size: 11.5px; opacity: .55; }
.at-hot { position: absolute; top: 10px; right: -26px; transform: rotate(38deg); background: linear-gradient(120deg, #f59e0b, #ef4444); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 30px; box-shadow: 0 3px 8px rgba(239,68,68,.35); }
.at-empty { text-align: center; padding: 60px 0; opacity: .6; font-size: 15px; }
.at-foot-note { margin: 34px 0 40px; padding: 14px 18px; border-radius: 12px; background: rgba(109,94,241,.07); font-size: 13.5px; opacity: .9; }
.at-foot-note a { color: var(--at1); text-decoration: none; font-weight: 600; }

/* ---------- 单工具页 ---------- */
.at-tool-head { display: flex; align-items: center; gap: 14px; padding: 24px 0 14px; flex-wrap: wrap; }
.at-back { font-size: 13px; text-decoration: none; color: var(--at1); font-weight: 600; white-space: nowrap; }
.at-tool-icon { width: 54px; height: 54px; display: grid; place-items: center; font-size: 30px; border-radius: 15px; background: linear-gradient(135deg, rgba(109,94,241,.15), rgba(168,85,247,.15)); }
.at-tool-name { font-size: 24px; font-weight: 800; margin: 0; }
.at-tool-desc { margin: 2px 0 0; font-size: 13.5px; opacity: .7; }
.at-layout { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; margin-bottom: 40px; }
@media (max-width: 900px) { .at-layout { grid-template-columns: 1fr; } }
.at-panel { background: var(--card, #fff); border: 1.5px solid rgba(109,94,241,.13); border-radius: 16px; padding: 20px; }
.at-field { margin-bottom: 14px; }
.at-field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; opacity: .85; }
.at-field .input, .at-field select, .at-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1.5px solid rgba(109,94,241,.22); background: var(--bg, #f6f7fb); color: inherit; font-size: 14px; outline: none; font-family: inherit; transition: border-color .18s, box-shadow .18s; }
.at-field .input:focus, .at-field select:focus, .at-field textarea:focus { border-color: var(--at1); box-shadow: 0 0 0 3px rgba(109,94,241,.13); }
.at-field textarea { min-height: 90px; resize: vertical; }
.at-go { width: 100%; border: none; cursor: pointer; padding: 13px; border-radius: 12px; font-size: 15.5px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--at1), var(--at2)); box-shadow: 0 8px 20px rgba(109,94,241,.35); transition: transform .15s, opacity .15s; }
.at-go:hover { transform: translateY(-1px); }
.at-go:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.at-balance { font-size: 12.5px; opacity: .7; margin-top: 10px; text-align: center; }
.at-balance b { color: var(--at1); }
.at-login-tip { text-align: center; padding: 10px 0 2px; }
.at-login-tip a { display: inline-block; margin-top: 6px; padding: 10px 26px; border-radius: 10px; background: linear-gradient(120deg, var(--at1), var(--at2)); color: #fff; text-decoration: none; font-weight: 700; }

/* 对话结果区 */
.at-chat { min-height: 320px; display: flex; flex-direction: column; gap: 12px; }
.at-msg { max-width: 88%; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.75; word-break: break-word; }
.at-msg-user { align-self: flex-end; background: linear-gradient(120deg, var(--at1), var(--at2)); color: #fff; border-bottom-right-radius: 4px; }
.at-msg-ai { align-self: flex-start; background: var(--bg, #f6f7fb); border: 1px solid rgba(109,94,241,.14); border-bottom-left-radius: 4px; }
.at-msg-ai code { background: rgba(109,94,241,.1); border-radius: 5px; padding: 1px 6px; font-size: 13px; }
.at-msg-ai mark { background: rgba(245,158,11,.35); }
.at-viz { margin: 10px 0 4px; border: 1px solid rgba(109,94,241,.2); border-radius: 10px; overflow: hidden; }
.at-viz iframe { display: block; width: 100%; border: 0; background: #fff; }
.at-empty-chat { flex: 1; display: grid; place-items: center; opacity: .5; text-align: center; font-size: 14px; padding: 40px 0; }
.at-typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.at-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--at1); animation: atBlink 1.2s infinite; }
.at-typing i:nth-child(2) { animation-delay: .2s; }
.at-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes atBlink { 0%, 80%, 100% { opacity: .25; transform: scale(.85); } 40% { opacity: 1; transform: scale(1); } }

/* 追问条 */
.at-askbar { display: flex; gap: 10px; margin-top: 14px; }
.at-askbar input { flex: 1; box-sizing: border-box; padding: 11px 14px; border-radius: 12px; border: 1.5px solid rgba(109,94,241,.22); background: var(--bg, #f6f7fb); color: inherit; font-size: 14px; outline: none; }
.at-askbar input:focus { border-color: var(--at1); }
.at-askbar button { border: none; cursor: pointer; border-radius: 12px; padding: 0 18px; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--at1), var(--at2)); white-space: nowrap; }
.at-subactions { margin-top: 10px; display: flex; gap: 8px; }
.at-subactions button { border: 1.5px solid rgba(109,94,241,.3); background: transparent; color: inherit; border-radius: 9px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; opacity: .8; }
.at-subactions button:hover { border-color: var(--at1); opacity: 1; }

/* 绘图类 */
.at-imgbox { margin-top: 4px; }
.at-imgbox img { max-width: 100%; border-radius: 14px; border: 1px solid rgba(109,94,241,.2); box-shadow: 0 10px 26px rgba(109,94,241,.18); }
.at-imggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.at-imggrid img { width: 100%; border-radius: 10px; border: 1px solid rgba(109,94,241,.2); cursor: zoom-in; }

/* mini 组件容器 */
#atMini { margin-bottom: 40px; }

/* ===== P21-B 收藏按钮 / 历史链接 ===== */
.at-fav-btn{border:1.5px solid var(--at-line,#e2e8f0);background:#fff;border-radius:999px;padding:7px 16px;font-size:13px;cursor:pointer;color:var(--at-sub,#64748b);transition:.15s;white-space:nowrap}
.at-fav-btn:hover{border-color:#f59e0b;color:#d97706}
.at-fav-btn.on{background:linear-gradient(120deg,#f59e0b,#f97316);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(245,158,11,.35)}
.at-hist-link{font-size:12.5px;color:var(--at-sub,#64748b);text-decoration:none}
.at-hist-link:hover{color:var(--at-primary,#2563eb)}
@media (max-width:860px){.at-tool-head{flex-wrap:wrap}}

/* ---------- P22-B：商店页内收藏角标 ---------- */
.at-fav{position:absolute;top:8px;left:8px;z-index:2;width:26px;height:26px;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.92);border:1.5px solid rgba(109,94,241,.25);color:#94a3b8;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.08);transition:.15s;user-select:none}
.at-fav:hover{border-color:#f59e0b;color:#f59e0b;transform:scale(1.12)}
.at-fav.on{background:linear-gradient(120deg,#f59e0b,#f97316);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(245,158,11,.4)}

/* ---------- P24-B：工具页评分与评论 ---------- */
.cmt-sec{margin-top:18px}
.cmt-title{font-size:17px;font-weight:700;margin:0 0 14px;color:#0f172a}
.cmt-msg{border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:14px}
.cmt-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.cmt-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.cmt-sum{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px dashed #e2e8f0}
.cmt-avg{font-size:34px;font-weight:800;color:#f59e0b;line-height:1}
.cmt-avg-stars{font-size:16px;color:#f59e0b;letter-spacing:2px}
.cmt-cnt{font-size:12px;color:#94a3b8}
.cmt-form{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.cmt-rate{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cmt-rate-label{font-size:13px;color:#475569;font-weight:600}
.cmt-star{font-size:13px;color:#475569;border:1px solid #e2e8f0;border-radius:999px;padding:4px 12px;cursor:pointer;transition:.15s;user-select:none}
.cmt-star:hover{border-color:#f59e0b;color:#f59e0b}
.cmt-star.on{background:linear-gradient(120deg,#fef3c7,#fde68a);border-color:#f59e0b;color:#b45309;font-weight:700}
.cmt-star input{display:none}
.cmt-text{width:100%;box-sizing:border-box;border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;resize:vertical;background:#fff;color:#0f172a}
.cmt-text:focus{outline:none;border-color:#6d5ef1;box-shadow:0 0 0 3px rgba(109,94,241,.12)}
.cmt-form-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cmt-hint{font-size:12px;color:#94a3b8}
.cmt-login-tip{margin-top:14px;font-size:13px;color:#64748b;background:#f8fafc;border:1px dashed #e2e8f0;border-radius:10px;padding:12px 14px}
.cmt-login-tip a{color:#6d5ef1;font-weight:700}
.cmt-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.cmt-item{border:1px solid #eef2f7;border-radius:12px;padding:12px 14px;background:#fff}
.cmt-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmt-user{font-size:13px;color:#0f172a}
.cmt-item-stars{font-size:12px;color:#f59e0b;letter-spacing:1px}
.cmt-time{font-size:11px;color:#cbd5e1;margin-left:auto}
.cmt-content{margin:8px 0 0;font-size:13.5px;color:#334155;line-height:1.65;word-break:break-word}
.cmt-empty{margin-top:14px;text-align:center;font-size:13px;color:#94a3b8;padding:18px 0}