#avatarControlCol .pick-portrait-label{margin-bottom:4px;}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;}
:root{
	--bg:#0f1115;--bg-alt:#161b21;--panel:#1e252d;--panel-alt:#262f38;--border:#313c47;--border-soft:#2a333c;
	--accent:#5562ff;--accent-hover:#7081ff;--accent-rgb:85,98,255;--danger:#ff4d5b;--warn:#ffb347;--success:#16c172;
	--text:#d7e2ef;--text-dim:#8e9aa7;--text-fade:#6b7682;--code:#9ae4c9;
	--radius-xs:4px;--radius-sm:6px;--radius:10px;--radius-lg:16px;
	--shadow:0 4px 12px -2px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5);
	--glow:0 0 0 1px rgba(var(--accent-rgb),.35),0 0 0 4px rgba(var(--accent-rgb),.15);
	--focus-ring:0 0 0 2px #0f1115,0 0 0 4px var(--accent);
	--transition:.18s cubic-bezier(.4,0,.2,1);
	--grid-line:#222c34;
	--accent-green:#0d8d48;
}
body{margin:0;display:flex;flex-direction:column;height:100vh;color:var(--text);background:radial-gradient(circle at 30% 20%,#17202a,#0f1115 60%);}
header{padding:14px 20px;background:linear-gradient(135deg,#1b232b,#12161c);border-bottom:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;}
h1{font-size:22px;margin:0 0 4px;font-weight:600;letter-spacing:.5px;background:linear-gradient(90deg,#fff,#b8c6ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;line-height:1.2;}
.toolbar label, .toolbar .control-chip{background:var(--panel-alt);padding:6px 10px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:6px;border:1px solid var(--border-soft);position:relative;transition:var(--transition);}
.toolbar label:hover{background:#303a44;}
.toolbar input[type=file]{max-width:160px;font-size:12px;}
.toolbar input[type=range]{accent-color:var(--accent);}
.toolbar input[type=number]{background:var(--panel-alt);border:1px solid var(--border-soft);color:var(--text);padding:4px 6px;border-radius:var(--radius-xs);transition:var(--transition);}
.toolbar input[type=number]:focus{outline:none;box-shadow:var(--glow);}
.toolbar button{background:var(--accent);border:1px solid rgba(var(--accent-rgb),.6);color:#fff;padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;letter-spacing:.3px;position:relative;transition:var(--transition);box-shadow:0 2px 4px -1px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;}
.toolbar button:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 14px -4px rgba(var(--accent-rgb),.45);}
.toolbar button:active:not(:disabled){transform:translateY(0);filter:brightness(.95);}
.toolbar button:focus-visible{outline:none;box-shadow:var(--focus-ring);}
.toolbar button:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.4);box-shadow:none;}
main{flex:1;display:flex;min-height:0;}
#canvasWrapper{position:relative;flex:1;overflow:auto;background:linear-gradient(#10171d,#0c1115);border-right:1px solid var(--border);--ring:rgba(var(--accent-rgb),.12);} 
#canvasWrapper::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0 0 2px rgba(0,0,0,.4);} 
#canvasWrapper canvas{position:absolute;inset:0;image-rendering:pixelated;}
#boxCanvas{pointer-events:none;}
#sidebar{width:340px;padding:16px 18px;background:linear-gradient(160deg,#1b232b,#151b21);color:var(--text);display:flex;flex-direction:column;gap:16px;overflow:auto;border-left:1px solid #0002;box-shadow:-4px 0 12px -4px rgba(0,0,0,.5) inset;}
#sidebar h2{margin:0 0 4px;font-size:15px;letter-spacing:.5px;font-weight:600;color:#fff;}
#boxForm{font-size:13px;display:flex;flex-direction:column;gap:10px;}
#boxForm label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);}
#boxForm input[type=text],#boxForm input[type=number]{width:100%;padding:6px 8px;background:var(--panel-alt);border:1px solid var(--border-soft);color:var(--text);border-radius:var(--radius-xs);font-size:13px;transition:var(--transition);}
#boxForm input[type=text]:focus,#boxForm input[type=number]:focus{outline:none;box-shadow:var(--glow);background:#303a44;}
#boxForm fieldset{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;background:linear-gradient(145deg,#232c35,#1a2229);}
#boxForm legend{padding:0 6px;font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--text-dim);}
textarea#output{width:100%;resize:vertical;background:#11181f;color:var(--code);border:1px solid var(--border);padding:8px 10px;border-radius:var(--radius-sm);font-family:ui-monospace,monospace;font-size:12px;line-height:1.5;min-height:160px;box-shadow:inset 0 0 0 1px #000;transition:var(--transition);}
textarea#output:focus{outline:none;box-shadow:var(--glow);}
footer{padding:6px 14px;font-size:11px;background:#12171c;color:var(--text-dim);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.handle{position:absolute;width:11px;height:11px;background:linear-gradient(#fff,#d1d5da);border:1px solid #000;border-radius:3px;box-shadow:0 0 0 1px #0006 inset,0 2px 4px -1px #0009;}
.handle:hover{background:linear-gradient(#fff,#f0f3f8);}
.boxOverlay{position:absolute;border:2px dashed rgba(255,200,0,.9);background:rgba(255,200,0,.1);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:flex-start;justify-content:flex-start;padding:2px;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-shadow:0 1px 2px #000;}
.boxOverlay.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,0 0 0 4px rgba(var(--accent-rgb),.25);background:rgba(var(--accent-rgb),.18);}
.grid-bg{background-size:var(--g) var(--g);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);} 
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.input-small{width:70px;padding:5px 6px;background:var(--panel-alt);border:1px solid var(--border-soft);color:var(--text);border-radius:var(--radius-xs);font-size:12px;transition:var(--transition);}
.input-small:focus{outline:none;box-shadow:var(--glow);}

/* 按钮通用扩展 */
button{font-family:inherit;}
button.danger{background:var(--danger);border-color:#ff6a76;}
button.danger:hover{background:#ff6a76;}
button.secondary{background:var(--panel-alt);color:var(--text);border:1px solid var(--border-soft);} 
button.secondary:hover{background:#303a44;}

/* 滑块自定义 */
input[type=range]{height:4px;background:linear-gradient(90deg,var(--accent) 0,var(--accent-hover) 100%);border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;}
input[type=range]::-webkit-slider-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#fff,#d5dbff);border:1px solid #5562ff;box-shadow:0 2px 4px -1px rgba(0,0,0,.6),0 0 0 2px #192040;cursor:pointer;-webkit-appearance:none;transition:var(--transition);}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.07);}
input[type=range]::-webkit-slider-thumb:active{transform:scale(.95);}

/* 文件输入简化: 可包裹在 label 中 */
input[type=file]{font-size:11px;color:var(--text-dim);}
input[type=file]::file-selector-button{background:var(--panel-alt);color:var(--text);border:1px solid var(--border-soft);padding:4px 10px;margin-right:8px;border-radius:var(--radius-xs);cursor:pointer;transition:var(--transition);}
input[type=file]::file-selector-button:hover{background:#303a44;}

/* 模板1 生成器样式 */
#generatorRoot{display:flex;gap:28px;padding:24px 30px;}
#previewArea{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,#141b21,#0f1418);padding:12px;box-shadow:var(--shadow);}
#previewArea canvas{position:absolute;left:12px;top:12px;}
#avatarInputs{display:flex;flex-direction:column;gap:18px;width:340px;}
#avatarInputs fieldset{border:1px solid var(--border);padding:14px 16px;border-radius:var(--radius);background:linear-gradient(160deg,#202a32,#1a2229);box-shadow:inset 0 0 0 1px #000;position:relative;}
#avatarInputs fieldset:hover{border-color:var(--accent);}
#avatarInputs legend{font-size:12px;font-weight:600;letter-spacing:.6px;padding:0 6px;color:var(--text-dim);}
.slotRow{display:flex;align-items:center;gap:10px;font-size:12px;padding:6px 8px;border:1px dashed var(--border-soft);border-radius:var(--radius-xs);background:#1a2026;transition:var(--transition);}
.slotRow:hover{border-color:var(--accent);background:#202830;}
.slotRow span{font-weight:600;color:var(--text-dim);width:46px;text-align:center;}
.slotRow input[type=file]{flex:1;}
.thumb{width:54px;height:54px;object-fit:cover;border:1px solid var(--border);border-radius:var(--radius-xs);background:#111;box-shadow:0 0 0 1px #000 inset;}
#bgSelectWrap{display:flex;gap:12px;}
#bgSelectWrap label{cursor:pointer;padding:6px 10px;border:1px solid var(--border-soft);border-radius:var(--radius-xs);background:var(--panel-alt);font-size:12px;transition:var(--transition);}
#bgSelectWrap label:hover{background:#303a44;}
#bgSelectWrap input:checked + span{color:var(--accent);font-weight:600;}
#exportImageBtn{background:var(--success);border-color:#19d784;}
#exportImageBtn:hover{background:#19d784;}
.hint{font-size:11px;color:var(--text-dim);margin:4px 0 0;}
.hidden-link{display:none;}

/* 轻量动画 */
[data-animate]{animation:fadeIn .4s var(--transition);}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

/* 自适应 */
@media (max-width:1200px){#sidebar{width:300px;}#avatarInputs{width:300px;}#generatorRoot{flex-direction:column;}}
@media (max-width:780px){.toolbar{gap:6px;}header{padding:12px 14px;}#sidebar{position:relative;box-shadow:none;border-left:none;border-top:1px solid var(--border);} }

/* ===================================== */
/* 重写：按钮与预览框现代化视觉覆盖      */
/* ===================================== */
:root{
	--btn-bg:linear-gradient(180deg,#394558,#2b3341);
	--btn-bg-hover:linear-gradient(180deg,#44546a,#303a49);
	--btn-bg-active:linear-gradient(180deg,#2e3846,#222831);
	--btn-border:#4e5d6f;
	--btn-shadow:0 2px 4px -1px rgba(0,0,0,.55),0 6px 14px -6px rgba(0,0,0,.6);
	--btn-glow:0 0 0 1px rgba(var(--accent-rgb),.5),0 0 0 6px rgba(var(--accent-rgb),.18);
	--btn-radius:9px;
	--preview-grad:radial-gradient(circle at 65% 35%,rgba(var(--accent-rgb),.12),transparent 60%);
}

/* 通用按钮基类 */
button, .toolbar button{
	background:var(--btn-bg)!important;
	border:1px solid var(--btn-border)!important;
	box-shadow:var(--btn-shadow),0 0 0 1px rgba(255,255,255,.04) inset!important;
	border-radius:var(--btn-radius)!important;
	padding:10px 18px!important;
	font-size:13px!important;
	font-weight:600!important;
	letter-spacing:.4px!important;
	line-height:1.1!important;
	position:relative!important;
	overflow:hidden!important;
	isolation:isolate!important;
		-webkit-backdrop-filter:saturate(160%) blur(4px)!important;
		backdrop-filter:saturate(160%) blur(4px)!important;
	transition:background .25s,transform .25s,box-shadow .25s,border-color .25s; 
}
button::after, .toolbar button::after{
	content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:.4s;mix-blend-mode:overlay;background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.15) 35%,rgba(255,255,255,0) 70%);
}
button:hover:not(:disabled)::after{opacity:1;}
button:hover:not(:disabled){background:var(--btn-bg-hover)!important;transform:translateY(-3px);box-shadow:0 8px 22px -10px rgba(var(--accent-rgb),.45),var(--btn-shadow);}
button:active:not(:disabled){background:var(--btn-bg-active)!important;transform:translateY(0);box-shadow:0 2px 6px -2px rgba(0,0,0,.7);}
button:focus-visible{outline:none!important;box-shadow:var(--btn-glow)!important;}
button:disabled{opacity:.38!important;filter:grayscale(.5);box-shadow:none!important;cursor:not-allowed!important;}

/* 语义变体 */
button.primary{--btn-bg:linear-gradient(180deg,var(--accent),#4453ff);--btn-bg-hover:linear-gradient(180deg,#6b79ff,#4f60ff);--btn-bg-active:linear-gradient(180deg,#3643d2,#2b36ad);--btn-border:#6573ff;}
button.success{--btn-bg:linear-gradient(180deg,#16c172,#109553);--btn-bg-hover:linear-gradient(180deg,#1ad481,#14aa63);--btn-bg-active:linear-gradient(180deg,#0e7c4a,#0b6a3f);--btn-border:#1ad481;}
button.danger{--btn-bg:linear-gradient(180deg,#ff4d5b,#d93340);--btn-bg-hover:linear-gradient(180deg,#ff5f6c,#e13f4c);--btn-bg-active:linear-gradient(180deg,#bf2c38,#a0232e);--btn-border:#ff6a76;}
button.outline{background:transparent!important;border:1px solid var(--btn-border)!important;box-shadow:none!important;}
button.outline:hover{background:rgba(var(--accent-rgb),.12)!important;}
button.ghost{background:transparent!important;border-color:transparent!important;box-shadow:none!important;}
button.ghost:hover{background:rgba(255,255,255,.05)!important;}

/* 工具栏按钮紧凑排列 */
.toolbar button{padding:8px 14px!important;font-weight:500!important;}

/* 按钮组 */
.btn-group{display:inline-flex;gap:10px;}
.btn-group button{flex:1;}

/* 预览框重新设计 */
#previewArea{
	position:relative;
	border:1px solid var(--border) !important;
	border-radius:20px !important;
	padding:26px 28px 30px !important;
	background:
		var(--preview-grad),
		linear-gradient(145deg,#12181e,#0c1115 55%,#0a0e12);
	box-shadow:0 10px 28px -12px rgba(0,0,0,.85),0 4px 12px -4px rgba(0,0,0,.7),0 0 0 1px #000 inset; 
	overflow:visible;
		-webkit-backdrop-filter:blur(6px) saturate(140%);
		backdrop-filter:blur(6px) saturate(140%);
	min-width:calc(991px + 56px);
}
#previewArea::before,#previewArea::after{
	content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;}
#previewArea::before{background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,0) 30%,rgba(255,255,255,.07) 70%,rgba(255,255,255,0));mix-blend-mode:overlay;opacity:.55;}
#previewArea::after{box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 0 6px rgba(255,255,255,.02) inset,0 30px 60px -25px rgba(0,0,0,.7);}
#previewArea canvas{position:relative !important;left:0 !important;top:0 !important;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.75));}
.canvas-stage{position:relative;width:991px;height:231px;display:block;margin:auto;}
.preview-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:20px;box-sizing:border-box;}
.avatar-slot-hotspot{ /* ensure above canvas */ z-index:5; }

/* 细节：slot 行 hover 更柔和 */
.slotRow{background:#181e24;border:1px solid #252f39;}
.slotRow:hover{background:#1e2630;border-color:var(--accent);}
.slotRow span{color:#b0bcc8;}

/* 微交互：canvas 聚焦态（未来可做可编辑）*/
#previewArea:focus-within{box-shadow:0 0 0 1px var(--accent) inset,0 0 0 4px rgba(var(--accent-rgb),.35);}

/* 更清晰的导出按钮特化 */
#exportImageBtn{--btn-bg:linear-gradient(180deg,#16c172,#119a57);--btn-bg-hover:linear-gradient(180deg,#18d27e,#13b468);--btn-bg-active:linear-gradient(180deg,#0f7a48,#0d6139);--btn-border:#19d784;}

/* 响应式预览区域缩放 */
@media (max-width:1300px){#previewArea{transform:scale(.9);transform-origin:top left;} }
@media (max-width:1150px){#previewArea{transform:scale(.82);} }
@media (max-width:1024px){#previewArea{transform:scale(.75);} }
@media (max-width:900px){#previewArea{transform:scale(.68);} }
@media (max-width:820px){#previewArea{transform:scale(.62);} }

/* ============= 新布局（生成器两栏） ============= */
.generator-body{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:40px 28px;background:radial-gradient(circle at 50% 20%,#1b2733,#0f1419 60%);}
.page-wrapper{width:100%;max-width:1380px;display:flex;flex-direction:column;gap:34px;position:relative;}
.page-title{margin:0;font-size:116px;letter-spacing:2.2px;font-weight:800;line-height:0.95;text-align:center;background:linear-gradient(120deg,#8fb6ff 0%,#3d6adf 35%,#18408e 60%,#0d2346 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 12px 34px rgba(0,20,40,.55));position:relative;z-index:0;/* 渐变遮罩实现下部透明 */-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.95) 55%,rgba(0,0,0,.35) 75%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.95) 55%,rgba(0,0,0,.35) 75%,rgba(0,0,0,0) 100%);pointer-events:none;}
.page-title .title-link{pointer-events:auto;display:inline-block;text-decoration:none;position:relative;/* 继承文本但单独再做渐变裁剪 */
	background:linear-gradient(120deg,#8fb6ff 0%,#3d6adf 35%,#18408e 60%,#0d2346 85%);
	-webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;}
.page-title .title-link::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:32px;}
.page-title .title-link:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.55);border-radius:12px;}
/* 让内容上移覆盖标题底部 1/4 (约 29px) */
.two-col{margin-top:-29px;position:relative;z-index:2;}
#previewArea .preview-inner{position:relative;}
@keyframes pulseBorder{0%{border-color:#6ea8ff;}50%{border-color:#2d6adf;}100%{border-color:#6ea8ff;}}

/* 角色槽位热点区域 */

/* 参数面板输入 */
.param-label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--text-dim);margin-bottom:10px;}
.param-label input{background:var(--panel-alt);border:1px solid var(--border-soft);padding:10px 12px;border-radius:10px;font-size:14px;color:var(--text);transition:.2s;font-weight:500;}
.param-label input:focus{outline:none;box-shadow:0 0 0 2px #0f1419,0 0 0 4px var(--accent);background:#2d3741;}

.match-status{font-size:12px;min-height:18px;color:#79c8ff;font-weight:500;letter-spacing:.4px;}
.match-status.error{color:#ff6675;}
.match-status.success{color:#53e3a6;}

.two-col{display:flex;gap:42px;align-items:stretch;justify-content:center;}
.control-col{display:flex;flex-direction:column;gap:18px;width:380px;flex-shrink:0;}
.control-col fieldset{width:100%;}
.actions{display:flex;flex-direction:column;gap:12px;}
.full-width{width:100%;}
.preview-col{flex:1;display:flex;align-items:stretch;}
.preview-col .preview-inner{flex:1;display:flex;align-items:center;justify-content:center;padding:34px;min-height:100%;}
.preview-col #finalCanvas{max-width:100%;height:auto;object-fit:contain;}
/* 让预览整体高度跟随左列自然高度（flex stretch 默认完成） */
.two-col{align-items:stretch;}

/* ========== 等高修复 ========== */
/* 由于右侧 #previewArea 被一层 .preview-col 包裹，原本 align-items:stretch 只拉伸到 .preview-col，内部 #previewArea 仍按内容高度。
	这里让 .preview-col 成为 flex 容器并让 #previewArea 占满父容器，从而与左侧功能区保持同高。*/
.preview-col{display:flex;align-items:stretch;}
.preview-col > #previewArea{flex:1;display:flex;flex-direction:column;height:100%;}
#previewArea .preview-inner{flex:1;display:flex;align-items:center;justify-content:center;}

/* 窄屏：改为单列，预览放到下方 */
@media (max-width:1180px){
	.two-col{flex-direction:column;gap:30px;}
	.control-col{width:100%;}
	#previewArea{min-width:0;transform:none!important;}
	#previewArea canvas{width:100%;height:auto;}
}

/* 无障碍与控件微样式 */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.input-small{width:60px;padding:2px 4px;background:#2f3440;border:1px solid #414a55;color:#eee;border-radius:4px;}
/* ================== 首页扩展 ================== */
.home-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:38px;padding:10px 6px 60px;}
.home-card{--c-border:var(--border);position:relative;display:flex;flex-direction:column;gap:10px;padding:30px 26px 34px;background:linear-gradient(150deg,#1b232b,#141a20 55%,#10161b);border:1px solid var(--c-border);border-radius:22px;text-decoration:none;color:var(--text);box-shadow:0 4px 14px -6px rgba(0,0,0,.65),0 0 0 1px #000 inset;transition:var(--transition);overflow:hidden;min-height:240px;}
.home-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 35%,rgba(var(--accent-rgb),.18),transparent 70%);opacity:.7;mix-blend-mode:overlay;pointer-events:none;}
.home-card .icon-wrapper{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#2d3844,#1c242c);box-shadow:0 4px 10px -4px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04) inset;color:#85a8ff;}
.home-card h2{margin:10px 0 4px;font-size:20px;letter-spacing:.8px;font-weight:700;background:linear-gradient(90deg,#fff,#b5c7ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.home-card p{margin:0;font-size:13px;line-height:1.55;color:var(--text-dim);}
.home-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 14px 38px -14px rgba(var(--accent-rgb),.55),0 6px 18px -6px rgba(0,0,0,.75),0 0 0 1px rgba(var(--accent-rgb),.4);} 
.home-card:active{transform:translateY(-2px);} 
.home-card.disabled{cursor:not-allowed;opacity:.55;filter:grayscale(.3);} 
.home-card.disabled:hover{transform:none;border-color:var(--c-border);box-shadow:0 4px 14px -6px rgba(0,0,0,.65),0 0 0 1px #000 inset;}
@media (max-width:820px){ .home-actions{gap:26px;padding-bottom:40px;} .home-card{padding:26px 22px;min-height:200px;} .page-title{font-size:84px;} }
/* ============== 头像生成器 ============== */
.small-title{font-size:140px;}
.avatar-two-col{align-items:stretch;}
.avatar-controls fieldset{border:1px solid var(--border);padding:14px 16px;border-radius:16px;background:linear-gradient(150deg,#202830,#1a2229);box-shadow:inset 0 0 0 1px #000;display:flex;flex-direction:column;gap:10px;}
.avatar-controls legend{font-size:12px;font-weight:600;letter-spacing:.6px;color:var(--text-dim);padding:0 6px;}
.upload-wrap input[type=file]{width:100%;}
.transform-sliders{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:12px;width:100%;}
.transform-sliders label{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--panel-alt);padding:10px 14px;border:1px solid var(--border-soft);border-radius:14px;width:220px;}
.transform-sliders #resetViewBtn{color:#fff;width:220px;}
.rarity-group{display:flex;gap:10px;}
.rarity-btn{flex:1;padding:10px 0;font-weight:700;font-size:16px;letter-spacing:1px;border:1px solid var(--border-soft);background:linear-gradient(160deg,#2a323b,#1d252c);color:#bbb;border-radius:12px;cursor:pointer;position:relative;transition:var(--transition);}
.rarity-btn:hover{background:#323c46;}
.rarity-btn.active{box-shadow:0 0 0 2px #0f1419,0 0 0 4px var(--accent);}
.rarity-ssr{color:#ffc94d;}
.rarity-sr{color:#b893ff;}
.rarity-r{color:#64b7ff;}
.icon-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:12px;align-items:center;justify-items:center;}
.icon-select-grid#attrSelect{grid-template-columns:repeat(5,72px);justify-content:center;}
.icon-select-grid.narrow{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));}
.icon-pick{background:#1b2229;border:1px solid var(--border-soft);padding:6px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);position:relative;width:60px;height:60px;}
.icon-pick img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));}
.icon-pick:hover{background:#25303a;}
.icon-pick.active{border-color:var(--accent);box-shadow:0 0 0 2px #0f1419,0 0 0 4px var(--accent);}
.avatar-preview-inner{position:relative;width:100%;display:flex;align-items:center;justify-content:center;}
#avatarCanvas{image-rendering:pixelated;border-radius:26px;box-shadow:0 8px 30px -10px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.05) inset;background:#0c1115;cursor:grab;}
#avatarCanvas:active{cursor:grabbing;}
@media (max-width:1180px){.small-title{font-size:58px;}}

/* ===== 头像生成器四列配置区 ===== */
.avatar-config-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;align-items:start;margin-top:-32px;}
.avatar-config-grid fieldset{border:1px solid var(--border);padding:14px 16px;border-radius:16px;background:linear-gradient(150deg,#202830,#1a2229);box-shadow:inset 0 0 0 1px #000;display:flex;flex-direction:column;gap:10px;min-height:140px;}
.avatar-config-grid .col-portrait fieldset,.avatar-config-grid .col-quick fieldset{min-height:100%;}
.col-weapon-stage #weaponSelect{grid-template-columns:repeat(3,1fr);}
.col-weapon-stage #weaponSelect .icon-pick{width:72px;height:72px;}
.col-rarity-attr #attrSelect .icon-pick{width:72px;height:72px;}
.avatar-preview-wrapper{margin:48px auto 0;display:flex;flex-direction:column;align-items:center;gap:20px;}
.avatar-preview-wrapper{position:relative;max-width:880px;padding:46px 140px 54px;border:1px solid var(--border);border-radius:54px;background:linear-gradient(145deg,#1a242c,#12181d);box-shadow:0 18px 52px -18px rgba(0,0,0,.85),0 0 0 1px #000 inset;}
.avatar-preview-wrapper::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 55% 35%,rgba(var(--accent-rgb),.14),transparent 65%);} 
.avatar-preview-wrapper #avatarCanvas{transform:scale(1.15);} 
.avatar-preview-wrapper #avatarCanvas{width:156px;height:156px;}
.export-actions{display:flex;flex-direction:column;align-items:center;gap:14px;}
.export-actions .param-label{width:220px;margin:0;}
.export-actions button{width:220px;}
@media (max-width:1200px){.avatar-config-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){.avatar-config-grid{grid-template-columns:1fr;} .avatar-preview-wrapper{margin-top:36px;} }

/* ===== 新：头像生成器三列布局 ===== */
.avatar-config-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:stretch;margin-top:-20px;}
.avatar-config-3col .cfg-col{display:flex;flex-direction:column;}
.avatar-config-3col .stack-block, .avatar-config-3col .preview-stack{display:flex;flex-direction:column;gap:18px;flex:1;}
.avatar-config-3col fieldset{border:1px solid var(--border);padding:16px 18px;border-radius:18px;background:linear-gradient(150deg,#212a33,#192127);box-shadow:inset 0 0 0 1px #000;display:flex;flex-direction:column;gap:12px;flex:1;}
.avatar-config-3col fieldset legend{font-size:12px;font-weight:600;letter-spacing:.6px;color:var(--text-dim);padding:0 6px;}
.avatar-config-3col .avatar-preview-shell{display:flex;align-items:center;justify-content:center;padding:26px;border:1px solid var(--border);border-radius:32px;background:linear-gradient(145deg,#1b242c,#11181e);box-shadow:0 10px 32px -14px rgba(0,0,0,.8),0 0 0 1px #000 inset;flex:1;}
.avatar-config-3col .avatar-preview-shell canvas{transform:scale(1.1);}
.avatar-config-3col .export-actions{margin-top:10px;}
.avatar-config-3col .avatar-preview-shell.with-actions{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;}
.avatar-config-3col .export-actions.inline-center{display:flex;flex-direction:column;align-items:center;gap:14px;}
.avatar-config-3col .export-actions.inline-center .export-name-field{margin:0;width:240px;}
.avatar-config-3col .export-actions.inline-center input{width:100%;}
.avatar-config-3col .export-actions.inline-center button{width:240px;}
.save-status{font-size:12px;min-height:18px;color:#69d9ff;letter-spacing:.4px;font-weight:500;text-shadow:0 1px 2px #000;}
.save-status.success{color:#43e6a2;}
.save-status.error{color:#ff6d7a;}
#saveToLibBtn{color:#fff !important;}
@media (max-width:1280px){.avatar-config-3col{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:880px){.avatar-config-3col{grid-template-columns:1fr;}}

/* ===== 头像库页面 ===== */
.avatar-lib-body .library-shell{border:1px solid var(--border);border-radius:34px;padding:46px 54px 60px;background:linear-gradient(150deg,#1c252d,#141b21);box-shadow:0 16px 44px -18px rgba(0,0,0,.85),0 0 0 1px #000 inset;display:flex;flex-direction:column;gap:34px;position:relative;}
.avatar-lib-body .lib-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:34px;justify-content:center;}
.avatar-lib-body .lib-toolbar .param-label{margin:0;width:240px;}
.avatar-lib-body .upload-inline-group{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;justify-content:center;}
.avatar-lib-body #libUploadBtn, .avatar-lib-body #libRefreshBtn, .avatar-lib-body #libDeleteBtn{height:40px;}
.avatar-lib-body .icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:26px;align-items:start;}
.avatar-lib-body .icons-scroll{height:340px;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:6px;}
.avatar-lib-body .icons-scroll::-webkit-scrollbar{width:10px;}
.avatar-lib-body .icons-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:8px;}
.avatar-lib-body .icons-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3a4654,#2b333c);border:1px solid #54616f;border-radius:8px;}
.avatar-lib-body .icons-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#465466,#303a44);} 
.avatar-lib-body .icon-item{background:linear-gradient(145deg,#202a33,#182127);border:1px solid var(--border);border-radius:24px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px;position:relative;box-shadow:0 6px 20px -10px rgba(0,0,0,.7),0 0 0 1px #000 inset;transition:var(--transition);}
.avatar-lib-body .icon-item:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(var(--accent-rgb),.55),0 6px 16px -6px rgba(0,0,0,.75),0 0 0 1px rgba(var(--accent-rgb),.4);}
.avatar-lib-body .thumb-wrap{width:100%;aspect-ratio:1/1;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent;border:none;} 
.avatar-lib-body .thumb-wrap img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));}
.avatar-lib-body .meta{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;}
.avatar-lib-body .meta .fname{font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--text-dim);word-break:break-all;max-width:100%;line-height:1.3;}
.avatar-lib-body .meta .actions{display:block;width:100%;}
.avatar-lib-body .meta .actions button.small{padding:10px 12px!important;font-size:12px!important;letter-spacing:.4px!important;height:auto;width:100%;}
.avatar-lib-body .save-status{text-align:center;}
@media (max-width:1180px){.avatar-lib-body .library-shell{padding:40px 40px 54px;}}
@media (max-width:880px){.avatar-lib-body .lib-toolbar{flex-direction:column;align-items:center;} .avatar-lib-body .upload-inline-group{justify-content:center;} .avatar-lib-body .library-shell{padding:36px 28px 48px;} .avatar-lib-body .icons-grid{gap:22px;}}

/* 库：多选态 */
.avatar-lib-body .icon-item.selectable{cursor:pointer;}
.avatar-lib-body .icon-item.selected{border-color:var(--accent);box-shadow:0 0 0 2px #0f1419,0 0 0 4px var(--accent);}
.avatar-lib-body .icon-item .select-badge{position:absolute;top:8px;left:8px;width:22px;height:22px;border:2px solid var(--border-soft);border-radius:7px;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:12px;color:#9fb4c8;font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:.2s;}
.avatar-lib-body .icon-item.selected .select-badge{background:var(--accent);border-color:#91a2ff;color:#fff;}
.avatar-lib-body .icon-item .meta .dim{font-size:11px;color:var(--text-fade);}

/* 进度条 */
.upload-progress{width:240px;height:10px;background:#0d1419;border:1px solid var(--border);border-radius:6px;overflow:hidden;position:relative;box-shadow:0 2px 4px -1px #000 inset,0 0 0 1px #000;} 
.upload-progress .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#4e66ff,#86a3ff);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;transition:width .25s;} 

/* 自定义鉴权模态 */
.auth-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:200;} 
.auth-modal[hidden]{display:none!important;} 
.auth-dialog{width:340px;max-width:90vw;padding:28px 30px 32px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(150deg,#1d252d,#141a21);box-shadow:0 18px 48px -16px rgba(0,0,0,.85),0 0 0 1px #000 inset;display:flex;flex-direction:column;gap:18px;animation:fadeIn .35s;} 
.auth-dialog h2{margin:0;font-size:18px;font-weight:700;letter-spacing:.8px;background:linear-gradient(90deg,#fff,#b8c6ff);-webkit-background-clip:text;background-clip:text;color:transparent;} 
.auth-dialog h2.auth-title{text-align:center;font-size:20px;letter-spacing:1.2px;} 
.auth-dialog input{background:#1e2630;border:1px solid var(--border-soft);border-radius:14px;padding:14px 16px;font-size:15px;color:var(--text);font-weight:600;letter-spacing:1px;text-align:center;width:100%;} 
.auth-dialog input:focus{outline:none;box-shadow:0 0 0 2px #0f1419,0 0 0 4px var(--accent);} 
.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;margin-top:4px;} 
.auth-msg{min-height:18px;font-size:12px;font-weight:500;letter-spacing:.4px;color:#ff6d7a;} 
.auth-msg.ok{color:#43e6a2;} 
.avatar-lib-body .upload-inline-group .param-label input[type=file]{height:56px;display:flex;align-items:center;} 
.avatar-lib-body .upload-inline-group .param-label input[type=text]{height:56px;} 
.avatar-lib-body .upload-inline-group .param-label input{box-sizing:border-box;} 
/* 库页面按钮文字统一白色 */
.avatar-lib-body button{color:#fff !important;}
/* 头像库页面顶部布局固定，避免内容增多挤压或垂直居中导致标题位置变化 */
.avatar-lib-body.generator-body{align-items:flex-start;justify-content:flex-start;padding-top:48px;padding-bottom:60px;}
.avatar-lib-body .page-wrapper{margin:0 auto;}
.avatar-lib-body .page-title{position:relative;z-index:5;}