/* ============ STN之家 · 网页版样式 ============ */
:root{
  --primary:#5b5bf0; --primary-2:#7c6cf7; --primary-soft:#eceafe;
  --accent:#8b5cf6;
  --bg:#f4f4fb; --surface:#ffffff; --surface-2:#f7f7fd;
  --text:#1d1d2b; --text-2:#7a7a90; --border:#e8e8f4;
  --shadow:0 10px 30px rgba(91,91,240,.10);
  --shadow-lg:0 20px 50px rgba(91,91,240,.16);
  --radius:18px; --radius-sm:12px;
}
html[data-theme="dark"]{
  --primary:#8a8aff; --primary-2:#a78bfa; --primary-soft:#26264a;
  --bg:#12121d; --surface:#1c1c2b; --surface-2:#22223a;
  --text:#eceaf6; --text-2:#9a9ab4; --border:#2c2c45;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  --shadow-lg:0 20px 50px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;
  transition:background .4s,color .4s;
}
a{color:inherit;text-decoration:none}
.icon{width:1.25em;height:1.25em;vertical-align:-.28em}

/* 背景光斑 */
.bg-orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:-1;animation:float 14s ease-in-out infinite}
.orb-1{width:420px;height:420px;background:#c7c4ff;top:-120px;right:-100px}
.orb-2{width:340px;height:340px;background:#d9c6ff;bottom:-80px;left:-120px;animation-delay:-5s}
.orb-3{width:260px;height:260px;background:#c4e4ff;top:40%;left:60%;animation-delay:-9s}
html[data-theme="dark"] .bg-orb{opacity:.22}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(28px) scale(1.06)}}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 75%,transparent);border-bottom:1px solid var(--border)}
.topbar-inner{max-width:1080px;margin:0 auto;padding:0 20px;height:62px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px}
.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:grid;place-items:center;font-size:17px;box-shadow:0 6px 14px rgba(91,91,240,.35);transition:transform .35s}
.logo-3d{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(91,91,240,.35));transition:transform .35s}
.logo:hover .logo-3d{transform:rotate(-10deg) scale(1.12)}
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.08)}
.logo-badge{font-size:11px;font-weight:600;color:var(--primary);background:var(--primary-soft);border-radius:99px;padding:2px 8px}
.nav-links{display:flex;gap:4px;margin-left:8px;flex:1}
.nav-links a{padding:7px 13px;border-radius:99px;font-size:14px;color:var(--text-2);transition:.25s}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 4px 12px rgba(91,91,240,.35)}
.topbar-right{display:flex;align-items:center;gap:10px}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:.25s}
.icon-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.icon-moon{display:none}
html[data-theme="dark"] .icon-sun{display:none}
html[data-theme="dark"] .icon-moon{display:block}
.points-chip{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--primary);background:var(--primary-soft);border:none;border-radius:99px;padding:7px 14px;cursor:pointer;transition:.25s}
.points-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.points-chip .icon{color:#f5a623}

/* 主容器 */
.app{max-width:1080px;margin:0 auto;padding:34px 20px 60px;min-height:70vh}
.reveal{animation:reveal .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.stagger>*{animation:reveal .55s cubic-bezier(.2,.7,.3,1) both}
.stagger>*:nth-child(1){animation-delay:.03s}.stagger>*:nth-child(2){animation-delay:.09s}
.stagger>*:nth-child(3){animation-delay:.15s}.stagger>*:nth-child(4){animation-delay:.21s}
.stagger>*:nth-child(5){animation-delay:.27s}.stagger>*:nth-child(6){animation-delay:.33s}
.stagger>*:nth-child(7){animation-delay:.39s}.stagger>*:nth-child(8){animation-delay:.45s}

/* 首页 Hero */
/* 首页 Hero（左文右球） */
.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:center;text-align:left;padding:26px 0 40px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero-copy .hero-stats{margin-top:6px;justify-content:flex-start}
.hero h1{font-size:clamp(30px,5vw,46px);font-weight:900;letter-spacing:-.5px;line-height:1.2}
.hero h1 .grad{background:linear-gradient(120deg,var(--primary),var(--accent),#4ea9f5);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradFlow 6s linear infinite}
@keyframes gradFlow{to{background-position:200% 0}}
.hero p{color:var(--text-2);margin-top:14px;font-size:16px}
.hero-stats{display:flex;justify-content:center;gap:30px;margin-top:26px;flex-wrap:wrap}
.stat b{font-size:22px;color:var(--primary)}
.stat span{display:block;font-size:12px;color:var(--text-2);margin-top:2px}

/* 分区标题 */
.section-head{display:flex;align-items:center;gap:10px;margin:10px 0 18px}
.section-head::before{content:"";width:5px;height:20px;border-radius:3px;background:linear-gradient(var(--primary),var(--accent));animation:grow .6s both}
@keyframes grow{from{transform:scaleY(0)}}
.section-head h2{font-size:21px;font-weight:800}
.section-head span{font-size:13px;color:var(--text-2)}

/* 工具卡片 */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.tool-card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(124,108,247,.10),transparent 45%);opacity:0;transition:opacity .3s}
.tool-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.tool-card:hover::after{opacity:1}
.tool-card .t-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;margin-bottom:14px;font-size:24px;transition:transform .35s}
.tool-card:hover .t-icon{transform:scale(1.12) rotate(-6deg)}
.t-icon.i1{background:linear-gradient(135deg,#6a7bff,#8b5cf6)}
.t-icon.i2{background:linear-gradient(135deg,#8b5cf6,#c26af0)}
.t-icon.i3{background:linear-gradient(135deg,#38bdf8,#6a7bff)}
.t-icon.i4{background:linear-gradient(135deg,#f59e0b,#f97316)}
.t-icon.i5{background:linear-gradient(135deg,#10b981,#38bdf8)}
.t-icon.i6{background:linear-gradient(135deg,#f43f5e,#f59e0b)}
/* 3D 插画图标 */
.t-icon-3d{width:64px;height:64px;object-fit:contain;display:block;margin-bottom:14px;
  filter:drop-shadow(0 10px 18px rgba(91,91,240,.16));
  transition:transform .4s cubic-bezier(.2,.8,.3,1.3);transform-origin:center bottom}
.tool-card:hover .t-icon-3d{transform:translateY(-4px) scale(1.1) rotate(-4deg)}

/* 内页返回按钮 */
.back-btn{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;
  color:var(--text-2);background:var(--surface);border:1.5px solid var(--border);
  border-radius:99px;padding:8px 16px;margin-bottom:18px;transition:.25s;cursor:pointer}
.back-btn .icon{width:1em;height:1em;vertical-align:-.1em}
.back-btn:hover{color:var(--primary);border-color:var(--primary);transform:translateX(-4px);box-shadow:var(--shadow)}

/* 光标跟随光晕（大面积渐变，双色调） */
.cursor-glow{position:fixed;left:0;top:0;width:780px;height:780px;border-radius:50%;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .5s;will-change:transform;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--primary) 32%,transparent) 0%,
    color-mix(in srgb,var(--accent) 16%,transparent) 40%,
    transparent 68%);
  filter:blur(24px)}
html[data-theme="dark"] .cursor-glow{
  background:radial-gradient(circle,
    color-mix(in srgb,var(--primary) 40%,transparent) 0%,
    color-mix(in srgb,#4ea9f5 16%,transparent) 44%,
    transparent 70%)}
body.glow-on .cursor-glow{opacity:1}
@media (hover:none){.cursor-glow{display:none}}

/* Hero 3D 粒子球 */
.hero-visual{position:relative;height:min(58vw,520px);max-width:640px;margin:0 auto}
#heroSphere{width:100%;height:100%;display:block}

/* 3D 小图标（各页面通用） */
.dz-3d{width:58px;height:58px;object-fit:contain;display:block;margin:0 auto 10px;
  filter:drop-shadow(0 8px 16px rgba(91,91,240,.18));animation:bob 2.6s ease-in-out infinite}
.tab-3d{width:20px;height:20px;object-fit:contain;vertical-align:-4px;margin-right:6px}
.mini-3d{width:26px;height:26px;object-fit:contain;vertical-align:-7px;margin-right:6px}
.modal-3d{width:84px;height:84px;object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 10px 20px rgba(91,91,240,.22));animation:bob 2.4s ease-in-out infinite}
.tool-card h3{font-size:16.5px;font-weight:800;margin-bottom:6px}
.tool-card p{font-size:13px;color:var(--text-2);line-height:1.55}
.tool-card .tag{position:absolute;top:16px;right:16px;font-size:11px;color:var(--primary);background:var(--primary-soft);padding:3px 9px;border-radius:99px;font-weight:600}

/* 通用工具页 */
.tool-page{max-width:760px;margin:0 auto}
.page-title{font-size:28px;font-weight:900}
.page-sub{color:var(--text-2);margin:8px 0 24px;font-size:14.5px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.card-title{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:800;margin-bottom:14px}
.card-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.mode-list{display:flex;flex-direction:column;gap:12px}
.mode-item{display:flex;align-items:center;gap:16px;background:var(--surface-2);border:1.5px solid transparent;border-radius:var(--radius-sm);padding:15px 18px;cursor:pointer;transition:.25s}
.mode-item:hover{transform:translateX(5px);border-color:var(--primary-soft)}
.mode-item.active{border-color:var(--primary);background:var(--primary-soft)}
.mode-mini{display:grid;gap:3px;flex-shrink:0}
.mode-mini i{background:linear-gradient(135deg,#a5a5f5,#7c6cf7);border-radius:3px;display:block}
.mode-info{flex:1}
.mode-info b{font-size:15.5px}
.mode-info span{display:block;font-size:12.5px;color:var(--text-2);margin-top:3px}
.mode-arrow{color:var(--text-2);transition:.25s}
.mode-item.active .mode-arrow{color:var(--primary);transform:translateX(4px)}
.tip-card{background:var(--primary-soft);border-radius:var(--radius-sm);padding:18px 20px;font-size:13.5px;line-height:2;color:var(--text)}
.tip-card b{color:var(--primary)}

/* 表单控件 */
textarea,.input{width:100%;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:14.5px;color:var(--text);font-family:inherit;resize:vertical;transition:.25s}
textarea:focus,.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:99px;padding:12px 26px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:.25s}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 8px 20px rgba(91,91,240,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(91,91,240,.45)}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-block{width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.seg{display:flex;background:var(--surface-2);border-radius:99px;padding:5px;gap:4px;margin-bottom:18px}
.seg button{flex:1;border:none;background:transparent;border-radius:99px;padding:11px;font-size:14.5px;font-weight:700;color:var(--text-2);cursor:pointer;font-family:inherit;transition:.3s;display:flex;align-items:center;justify-content:center;gap:6px}
.seg button.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 6px 16px rgba(91,91,240,.4)}
.field-label{font-size:13.5px;font-weight:700;margin:14px 0 8px;display:block}
.field-label:first-child{margin-top:0}
input[type=range]{width:100%;accent-color:var(--primary)}
.switch-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:14px}
.switch{position:relative;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--border);border-radius:99px;cursor:pointer;transition:.3s}
.switch .slider::before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.3s;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.switch input:checked+.slider{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.switch input:checked+.slider::before{transform:translateX(20px)}

/* 上传区 */
.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:44px 20px;text-align:center;cursor:pointer;transition:.3s;background:var(--surface-2)}
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--primary-soft);transform:scale(1.01)}
.dropzone .dz-icon{font-size:40px;margin-bottom:10px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.dropzone p{font-size:14.5px;font-weight:700}
.dropzone span{font-size:12.5px;color:var(--text-2);display:block;margin-top:5px}

/* 画布裁剪区 */
.crop-wrap{position:relative;user-select:none;overflow:hidden;border-radius:var(--radius-sm);background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/20px 20px;touch-action:none}
html[data-theme="dark"] .crop-wrap{background:repeating-conic-gradient(#2a2a40 0 25%,#22223a 0 50%) 0 0/20px 20px}
.crop-wrap img{display:block;width:100%;pointer-events:none}
.crop-box{position:absolute;border:2px solid var(--primary);box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move;border-radius:4px}
.crop-handle{position:absolute;width:16px;height:16px;background:#fff;border:2.5px solid var(--primary);border-radius:50%;z-index:2}
.h-tl{top:-9px;left:-9px;cursor:nwse-resize}.h-br{bottom:-9px;right:-9px;cursor:nwse-resize}

/* 预览网格 */
.preview-grid{display:grid;gap:8px;margin-top:6px}
.preview-grid .cell{position:relative;border-radius:8px;overflow:hidden;animation:pop .4s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
.preview-grid .cell img{width:100%;display:block}
.preview-grid .cell .num{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 7px;border-radius:99px}
.preview-grid.g3{grid-template-columns:repeat(3,1fr)}
.preview-grid.g6{grid-template-columns:repeat(3,1fr)}
.preview-grid.g9{grid-template-columns:repeat(3,1fr)}

/* 二维码 */
.qr-stage{display:grid;place-items:center;padding:26px;background:var(--surface-2);border-radius:var(--radius-sm);position:relative;min-height:280px}
.qr-frame{position:relative;padding:18px;background:#fff;border-radius:10px;animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both}
.qr-frame::before,.qr-frame::after,.qr-frame .c3,.qr-frame .c4{content:"";position:absolute;width:26px;height:26px;border:3.5px solid var(--primary)}
.qr-frame::before{top:-4px;left:-4px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}
.qr-frame::after{top:-4px;right:-4px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}
.qr-frame .c3{bottom:-4px;left:-4px;border-right:none;border-top:none;border-radius:0 0 0 8px}
.qr-frame .c4{bottom:-4px;right:-4px;border-left:none;border-top:none;border-radius:0 0 8px 0}
.qr-hint{margin-top:14px;text-align:center;font-size:13px;color:var(--text-2)}
.color-row{display:flex;gap:10px;align-items:center}
.color-row input[type=color]{width:44px;height:36px;border:none;border-radius:9px;cursor:pointer;background:none}
.result-box{background:var(--surface-2);border-radius:var(--radius-sm);padding:14px 16px;font-size:14px;word-break:break-all;line-height:1.7;margin-top:14px}

/* 更多工具页 */
.about-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:6px}
.mini-card{background:var(--surface-2);border-radius:var(--radius-sm);padding:16px;font-size:13.5px;line-height:1.7}
.mini-card b{display:block;font-size:14.5px;margin-bottom:4px}

/* 页脚 */
.footer{text-align:center;padding:30px 20px 40px;color:var(--text-2);font-size:13.5px;border-top:1px solid var(--border)}
.footer-sub{margin-top:6px;font-size:12px}
.footer a{color:var(--primary)}

/* 弹窗 & Toast */
.modal-mask{position:fixed;inset:0;background:rgba(20,20,40,.5);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:100;opacity:0;pointer-events:none;transition:.3s}
.modal-mask.show{opacity:1;pointer-events:auto}
.modal{background:var(--surface);border-radius:22px;padding:30px 26px;width:min(92vw,360px);text-align:center;transform:scale(.8) translateY(20px);transition:.35s cubic-bezier(.2,.9,.3,1.3);box-shadow:var(--shadow-lg)}
.modal-mask.show .modal{transform:none}
.modal-icon{font-size:46px;animation:bob 2s ease-in-out infinite}
.modal h3{margin:10px 0 6px;font-size:19px}
.modal p{font-size:13.5px;color:var(--text-2);margin-bottom:16px}
.checkin-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:20px}
.checkin-week .day{background:var(--surface-2);border-radius:9px;padding:8px 0;font-size:11px;color:var(--text-2)}
.checkin-week .day.done{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:700}
.toast{position:fixed;left:50%;bottom:36px;transform:translate(-50%,80px);background:var(--text);color:var(--bg);padding:11px 22px;border-radius:99px;font-size:14px;z-index:120;opacity:0;transition:.35s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;box-shadow:var(--shadow-lg);max-width:86vw}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:720px){
  .nav-links{display:none}
  .app{padding:22px 16px 50px}
  .hero{grid-template-columns:1fr;text-align:center;padding:14px 0 28px}
  .hero-copy{align-items:center}
  .hero-copy .hero-stats{justify-content:center}
  .hero-visual{height:min(64vw,340px);margin-top:6px}
  .tool-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .tool-card{padding:16px}
  .tool-card .t-icon{width:44px;height:44px;font-size:20px}
  .card{padding:16px}
}