/* Suria Tools 最终视觉与交互收口层 */
:root{--content-max:1540px;--bottom-nav-h:68px}
body{overflow-x:hidden}
main{background:
 radial-gradient(circle at 92% 3%,rgba(255,111,145,.07),transparent 26rem),
 var(--bg)}
.topbar{min-height:74px}
.hero,.content{width:min(calc(100% - 56px),var(--content-max));margin-left:auto;margin-right:auto}
.hero{margin-top:26px;margin-bottom:8px;padding:34px 38px;overflow:hidden;position:relative}
.hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-120px;background:rgba(255,255,255,.28);pointer-events:none}
.hero>*,.tool-page>*{position:relative;z-index:1}
.content{padding-left:0;padding-right:0}
.section-head{padding-top:4px}
.section-head h2{letter-spacing:-.02em}
.section-head p{line-height:1.5}

.category-toolbar{position:sticky;top:74px;z-index:22;display:flex;gap:8px;overflow-x:auto;padding:12px 0 11px;margin:0 0 6px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);scrollbar-width:none}
.category-toolbar::-webkit-scrollbar{display:none}
.category-chip{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:9px 13px;border-radius:999px;cursor:pointer;transition:.18s;white-space:nowrap}
.category-chip:hover,.category-chip.active{border-color:rgba(255,111,145,.55);background:var(--accent-soft);color:var(--accent)}
.category-chip small{margin-left:5px;opacity:.75}

.tool-grid{grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:13px}
.tool-grid.compact{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.tool-card{min-height:154px;display:flex;flex-direction:column;padding:17px;overflow:hidden}
.tool-card .tool-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--accent-soft);color:var(--accent);font-size:21px;font-weight:800}
.tool-card h3{margin:13px 0 7px;line-height:1.35}
.tool-card p{margin-top:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tool-category-badge{position:absolute;right:13px;bottom:12px;font-size:10px;color:var(--muted);opacity:.7;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-card:has(.tool-category-badge) p{padding-right:48px}
.star{z-index:2;width:32px;height:32px;border-radius:10px}
.star:hover{background:var(--soft)}

.category{padding-top:4px}
.category-title{padding:0 2px}
.category-title h3{font-size:18px}
.category-title span{padding:3px 8px;border-radius:999px;background:var(--soft)}

.workspace-grid{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.workspace-card{transition:.18s;min-height:132px}
.workspace-card:hover{border-color:rgba(255,111,145,.42);box-shadow:var(--shadow);transform:translateY(-1px)}
.workspace-flow{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
.workspace-flow::-webkit-scrollbar{display:none}
.flow-tool{flex:0 0 auto;white-space:nowrap}

.tool-page{max-width:1280px;margin:0 auto 44px;padding:28px}
.tool-header{position:sticky;top:74px;z-index:12;background:var(--panel);margin:-28px -28px 22px;padding:24px 28px 20px;border-radius:24px 24px 0 0}
.tool-header-actions .ghost{border:1px solid var(--line);background:var(--soft);white-space:nowrap}
.panel{background:color-mix(in srgb,var(--soft) 82%,var(--panel))}
.output:empty:before{content:"处理结果会显示在这里";color:var(--muted);opacity:.65}
.actions button{min-height:42px}
input,textarea,select{transition:border-color .15s,box-shadow .15s}

.personal-section-empty{display:none!important}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(9,10,14,.35);backdrop-filter:blur(2px);z-index:45;opacity:0;pointer-events:none;transition:.2s}
.sidebar-backdrop.show{opacity:1;pointer-events:auto}
.scroll-top{position:fixed;right:22px;bottom:24px;z-index:70;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:var(--shadow);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}
.scroll-top.show{opacity:1;transform:none;pointer-events:auto}
.mobile-bottom-nav{display:none}

button:focus-visible,.tool-card:focus-visible{outline:3px solid rgba(255,111,145,.35);outline-offset:2px}
@media(min-width:1500px){.tool-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.tool-grid.compact{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:1100px) and (min-width:841px){.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:840px){
 body{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))}
 .topbar{min-height:62px;top:0}
 .hero,.content{width:auto;margin-left:14px;margin-right:14px}
 .hero{padding:24px;margin-top:14px}
 .hero p{font-size:14px}
 .category-toolbar{top:62px;margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
 .workspace-grid{grid-template-columns:1fr}
 .workspace-flow{flex-direction:row;align-items:center}
 .flow-arrow{display:block}
 .tool-grid,.tool-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tool-card{min-height:126px;padding:14px}
 .tool-card .tool-icon{width:38px;height:38px;font-size:18px}
 .tool-card h3{font-size:15px;margin:11px 0 0;padding-right:18px}
 .tool-card p,.tool-category-badge{display:none}
 .tool-page{padding:16px;margin-bottom:20px}
 .tool-header{top:62px;margin:-16px -16px 18px;padding:17px 16px 15px}
 .tool-header h2{font-size:25px}
 .tool-header-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .tool-header-actions .ghost{text-align:center}
 .scroll-top{right:14px;bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 12px)}
 .mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:80;height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));padding:7px 7px env(safe-area-inset-bottom);background:color-mix(in srgb,var(--panel) 94%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(18px)}
 .mobile-bottom-nav button{border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;border-radius:11px}
 .mobile-bottom-nav button span{font-size:19px;line-height:1}
 .mobile-bottom-nav button:active{background:var(--soft);color:var(--accent)}
}
@media(max-width:390px){.tool-card h3{font-size:14px}.stats{gap:6px}.stats span{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}