/* ============================================================
 * pixel.css —— 像素画工作台（玩家页）
 * 画廊/弹窗 = 站点风格（复用 style.css 的 CSS 变量）
 * 编辑器  = 全屏深色（独立变量前缀 --px-）
 * ============================================================ */

:root {
  --px-bg: #17191d;
  --px-panel: #1f232a;
  --px-panel2: #262b33;
  --px-border: #333a45;
  --px-text: #d7dce4;
  --px-dim: #8b93a1;
  --px-accent: #4f9cf9;
  --px-danger: #e8443a;
  --px-ok: #3fbf6f;
}

.hidden { display: none !important; }
.hint { color: var(--text-dim); font-size: .78rem; }

/* ---------------- 移动端触控优化 ----------------
   touch-action:manipulation 禁用浏览器双击页面缩放（修复"点适配后突然放大、底部栏消失"）；
   overscroll 防滚动穿透/下拉刷新；画布 stack 保持 none（绘制优先） */
html, body { overscroll-behavior: none; }
#view-gallery .btn, #view-gallery .chk, #view-gallery input,
.modal .btn, .modal .chk, .modal input,
#view-editor .btn, #view-editor .chk, #view-editor label,
#view-editor .tpl-item, #view-editor .frame-thumb,
#view-editor input[type="range"], #view-editor .ly-eye, #view-editor .pal-cell {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ed-canvas-wrap { overscroll-behavior: contain; }
.tool-list, .ed-frames-list, .sel-ops, .tpl-list { overscroll-behavior: contain; }

/* ---------------- 通用控件（画廊 / 弹窗，站点风格） ---------------- */

.btn {
  padding: 9px 20px; border-radius: 18px; border: none;
  font-size: .84rem; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), #e88a4a);
  color: #fff; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.plain { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
.btn.sm { padding: 6px 14px; font-size: .78rem; border-radius: 14px; }

.chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: .82rem; }
.chk input { accent-color: var(--primary); }

.form-row { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.form-row label { font-size: .8rem; color: var(--text-dim); }
.form-row input[type="text"] {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 11px; font-size: .86rem; width: 100%;
}
.form-row input[type="text"]:focus { outline: none; border-color: var(--primary); }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.btn-row.right { justify-content: flex-end; }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------- 弹窗 ---------------- */

.modal { position: fixed; inset: 0; background: rgba(43, 34, 26, .5); display: flex; align-items: center; justify-content: center; z-index: 1100; }
.modal-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; width: 420px; max-width: calc(100vw - 40px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-box h3 { margin-bottom: 6px; }

/* ---------------- 视图一：画廊（站点风格） ---------------- */

/* 站点公共样式不含 .page（各页自行定义），此处按站点惯例定义：
   居中限宽 + 为 fixed 导航栏留出顶部空间 */
#view-gallery.page { max-width: 1180px; margin: 0 auto; padding: 96px 20px 60px; }

.px-page { max-width: 1180px; }
.gallery-header h1 { color: var(--text); font-size: 1.6rem; margin-bottom: 6px; }
.gallery-header .sub { color: var(--text-dim); font-size: .88rem; margin: 0 0 4px; }
.gallery-header .hint { margin: 2px 0 0; }

.gallery-body { display: flex; gap: 24px; margin-top: 22px; align-items: flex-start; }
.gallery-main { flex: 1; min-width: 0; }
.gallery-aside { width: 320px; flex: none; }
.sec-title { font-size: .95rem; color: var(--text-dim); margin-bottom: 12px; }

.collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.col-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color .15s, transform .2s; box-shadow: var(--shadow); }
.col-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.col-thumb { background: repeating-conic-gradient(#e9e2d3 0% 25%, #dcd3bf 0% 50%); background-size: 22px 22px; border-bottom: 1px solid var(--border); height: 130px; display: flex; align-items: center; justify-content: center; }
.col-thumb img { image-rendering: pixelated; height: 110px; max-width: 90%; }
.col-body { padding: 14px 16px 16px; }
.col-body h3 { font-size: 1rem; color: var(--text); margin: 0; }
.col-desc { color: var(--text-dim); font-size: .78rem; margin: 6px 0 10px; min-height: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font-size: .74rem; color: var(--text-dim); }
.chip b { color: var(--text); font-weight: 600; margin-right: 6px; }
.empty-panel { background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-dim); text-align: center; padding: 36px 20px; font-size: .84rem; }

.proj-list { display: flex; flex-direction: column; gap: 8px; }
.proj-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proj-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.proj-info b { font-size: .88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-ops { display: flex; gap: 6px; flex: none; }
.proj-ops .del { background: none; border: 1px solid var(--danger); color: var(--danger); }

/* ---------------- 视图二：编辑器（全屏深色） ---------------- */

/* 高于站点导航栏的 z-index:1000，编辑器为独立全屏（自带返回顶栏） */
#view-editor { position: fixed; inset: 0; z-index: 1001; background: var(--px-bg); color: var(--px-text); display: flex; flex-direction: column; overflow: hidden; font-size: 14px; }

#view-editor .ed-topbar { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--px-panel); border-bottom: 1px solid var(--px-border); }
.tb-project { font-size: 15px; font-weight: 600; }
.tb-sep { color: var(--px-dim); }
.tb-template { color: var(--px-accent); font-size: 13px; }
.tb-save { color: var(--px-dim); font-size: 12px; margin-left: 8px; }
.tb-save.error { color: var(--px-danger); }
.tb-flex { flex: 1; }

.ed-layout { flex: 1; display: flex; min-height: 0; }
.ed-sidebar { width: 196px; flex: none; background: var(--px-panel); border-right: 1px solid var(--px-border); display: flex; flex-direction: column; }
.ed-sidebar-title { font-size: 12px; color: var(--px-dim); padding: 10px 12px 6px; }
.tpl-list { flex: 1; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 6px; }
.ed-sidebar-foot { padding: 8px 12px; border-top: 1px solid var(--px-border); }

.tpl-item { position: relative; display: flex; align-items: center; gap: 10px; background: var(--px-panel2); border: 1px solid var(--px-border); border-radius: 8px; padding: 6px; cursor: pointer; text-align: left; color: var(--px-text); }
.tpl-item:hover { border-color: var(--px-accent); }
.tpl-item.active { border-color: var(--px-accent); box-shadow: 0 0 0 1px var(--px-accent) inset; }
.tpl-item canvas { width: 48px; height: 48px; image-rendering: pixelated; border-radius: 5px; flex: none; }
.tpl-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpl-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-size { font-size: 11px; color: var(--px-dim); }
.tpl-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--px-ok); box-shadow: 0 0 4px rgba(63,191,111,.8); }

.ed-mount { flex: 1; min-width: 0; min-height: 0; position: relative; }
.ed-mount .ed-root { position: absolute; inset: 0; }

/* ---------------- 编辑器内部（pixel-core.js 生成） ---------------- */

.ed-root { display: flex; min-width: 0; user-select: none; -webkit-user-select: none; background: var(--px-bg); }
.ed-center { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.ed-canvas-wrap { flex: 1; min-height: 0; overflow: auto; position: relative; background: #14161a; }
.ed-canvas-inner { display: flex; min-width: 100%; min-height: 100%; padding: 64px; }
.canvas-stack { position: relative; flex: none; margin: auto;
  background-image: linear-gradient(45deg, #262a31 25%, transparent 25%, transparent 75%, #262a31 75%), linear-gradient(45deg, #262a31 25%, transparent 25%, transparent 75%, #262a31 75%);
  background-color: #1e2127; background-size: 16px 16px; background-position: 0 0, 8px 8px;
  box-shadow: 0 0 0 1px var(--px-border), 0 8px 30px rgba(0,0,0,.4);
}
.ed-c { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.ed-overlay { cursor: crosshair; }

.zoom-bar { position: sticky; bottom: 10px; float: right; margin-right: 10px; display: flex; align-items: center; gap: 6px; background: rgba(31,35,42,.92); border: 1px solid var(--px-border); border-radius: 8px; padding: 5px 8px; z-index: 20; }
.zoom-val { font-size: 12px; min-width: 34px; text-align: center; color: var(--px-dim); }

.ed-frames { flex: none; height: 86px; background: var(--px-panel); border-top: 1px solid var(--px-border); display: flex; align-items: stretch; gap: 10px; padding: 8px 12px; }
.ed-frames-list { display: flex; gap: 8px; overflow-x: auto; }
.frame-thumb { position: relative; flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--px-panel2); border: 1px solid var(--px-border); border-radius: 8px; cursor: pointer; padding: 4px; color: var(--px-text); }
.frame-thumb.active { border-color: var(--px-accent); box-shadow: 0 0 0 1px var(--px-accent) inset; }
.frame-thumb canvas { image-rendering: pixelated; border-radius: 4px; background: var(--px-bg); }
.frame-num { font-size: 11px; color: var(--px-dim); }
.frame-thumb.active .frame-num { color: var(--px-accent); }
.ed-frames-ops { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.vsep { width: 1px; height: 18px; background: var(--px-border); margin: 0 4px; }

.ed-side { width: 258px; flex: none; background: var(--px-panel); border-left: 1px solid var(--px-border); overflow-y: auto; display: flex; flex-direction: column; }
.ed-panel { padding: 12px 14px; border-bottom: 1px solid var(--px-border); }
.ed-panel.grow { flex: 1; }
.ed-panel-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ed-panel-sub { font-size: 12px; color: var(--px-dim); margin: 10px 0 6px; }

/* 桌面端：其余面板容器（手机端变为抽屉） */
.ed-side-rest { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.side-toggle, .pan-toggle, .side-collapser { display: none; }

/* 编辑器内的按钮 / 控件（深色变体） */
#view-editor .btn { background: var(--px-panel2); color: var(--px-text); border: 1px solid var(--px-border); border-radius: 6px; padding: 7px 14px; font-size: 13px; }
#view-editor .btn:hover:not(:disabled) { border-color: var(--px-accent); color: #fff; }
#view-editor .btn.dark.primary { background: linear-gradient(135deg, var(--primary), #e88a4a); border: none; color: #fff; }
#view-editor .btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 5px; }
#view-editor .btn.xs { padding: 3px 8px; font-size: 12px; border-radius: 4px; }
#view-editor .btn.danger { color: #ff9a92; }
#view-editor .btn.danger:hover:not(:disabled) { border-color: var(--px-danger); color: #ffd9d5; background: rgba(232,68,58,.12); }
#view-editor .hint { color: var(--px-dim); font-size: 12px; }
#view-editor .chk { font-size: 13px; color: var(--px-text); }
#view-editor .chk input { accent-color: var(--px-accent); }
#view-editor .form-row { margin: 10px 0; }
#view-editor .form-row label { color: var(--px-dim); font-size: 13px; }
#view-editor input[type="range"] { width: 100%; accent-color: var(--px-accent); }

/* 工具竖列：图标 + 名称 + 快捷键 */
.tool-list { display: flex; flex-direction: column; gap: 4px; }
.tool-btn { display: flex !important; align-items: center; gap: 8px; width: 100%; padding: 6px 10px !important; text-align: left; }
.tool-btn .t-ico { display: inline-flex; width: 18px; height: 18px; flex: none; }
.tool-btn .t-ico svg { width: 100%; height: 100%; display: block; }
.tool-btn .t-name { flex: 1; font-size: 12.5px; }
.tool-btn .t-key { font-size: 10px; color: var(--px-dim); border: 1px solid var(--px-border); border-radius: 4px; padding: 0 4px; line-height: 15px; flex: none; }
.tool-btn.active .t-key { color: #fff; border-color: rgba(255,255,255,.5); }
.import-btn { width: 100%; }
.tool-btn.active { background: var(--px-accent) !important; border-color: var(--px-accent) !important; color: #fff !important; }

.sym-row { display: flex; gap: 6px; }
.sym-row .btn.active { background: var(--px-accent) !important; border-color: var(--px-accent) !important; color: #fff !important; }

.cur-color { display: flex; align-items: center; gap: 8px; }
.cur-swatch { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--px-border); cursor: pointer; flex: none; }
.hex-input { width: 90px; background: var(--px-bg); border: 1px solid var(--px-border); border-radius: 6px; color: var(--px-text); padding: 6px 8px; font-family: Consolas, monospace; font-size: 13px; }
.palette-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.pal-cell { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; cursor: pointer; padding: 0; }
.pal-cell:hover { border-color: #fff; transform: scale(1.08); }

.layer-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.layer-row { display: flex; align-items: center; gap: 6px; background: var(--px-panel2); border: 1px solid var(--px-border); border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.layer-row.active { border-color: var(--px-accent); }
.layer-row.hidden-layer { opacity: .45; }
.ly-eye { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0 2px; color: var(--px-text); }
.ly-name { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ly-op { font-size: 11px; color: var(--px-dim); }

.bg-row { display: flex; align-items: center; gap: 8px; }
.bg-row input[type="range"] { flex: 1; }
.bg-op-val { font-size: 12px; color: var(--px-dim); min-width: 34px; text-align: right; }

/* 模板预览图层导入按钮组 */
.px-preview-panel { display: flex; flex-direction: column; gap: 4px; }
.px-preview-btn { text-align: left; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ed-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(8px); background: rgba(31,35,42,.95); border: 1px solid var(--px-border); color: var(--px-text); border-radius: 999px; padding: 7px 16px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 60; white-space: nowrap; }
.ed-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.ed-playmask { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.ed-playbox { background: var(--px-panel); border: 1px solid var(--px-border); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ed-play-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 600; }
.play-canvas { image-rendering: pixelated; background: var(--px-bg); border: 1px solid var(--px-border); border-radius: 6px; align-self: center; }

/* 图片导入弹窗 */
.ed-importmask { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; }
.ed-importbox { background: var(--px-panel); border: 1px solid var(--px-border); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; width: 400px; max-width: calc(100% - 40px); }
.imp-info { font-size: 12.5px; color: var(--px-accent); }
.imp-custom { background: var(--px-bg); border: 1px solid var(--px-border); border-radius: 5px; color: var(--px-text); padding: 4px 6px; font-size: 12px; width: 56px; }

/* 效果预览弹窗（覆盖编辑器，深色） */
.fx-mask { position: fixed; inset: 0; z-index: 1100; background: rgba(10, 12, 15, .82); display: flex; align-items: center; justify-content: center; }
.fx-box { background: var(--px-panel); border: 1px solid var(--px-border); border-radius: 12px; padding: 16px 18px; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; gap: 12px; }
.fx-head { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--px-text); }
.fx-head .hint { flex: 1; font-weight: 400; }
.fx-bg-chk { color: var(--px-text); font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.fx-bg-chk input { accent-color: var(--px-accent); }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; overflow-y: auto; padding: 2px; }
.fx-card { background: var(--px-panel2); border: 1px solid var(--px-border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 150px; }
.fx-name { font-size: 13px; font-weight: 600; color: var(--px-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-info { font-size: 11px; color: var(--px-dim); }
.fx-card canvas { image-rendering: pixelated; background: repeating-conic-gradient(#262a31 0% 25%, #1e2127 0% 50%); background-size: 12px 12px; border: 1px solid var(--px-border); border-radius: 4px; }
.fx-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--px-dim); font-size: 12px; }

/* 编辑器滚动条 */
#view-editor ::-webkit-scrollbar { width: 10px; height: 10px; }
#view-editor ::-webkit-scrollbar-track { background: transparent; }
#view-editor ::-webkit-scrollbar-thumb { background: #333a45; border-radius: 5px; border: 2px solid var(--px-bg); }
#view-editor ::-webkit-scrollbar-thumb:hover { background: #455060; }

@media (max-width: 900px) {
  .gallery-body { flex-direction: column; }
  .gallery-aside { width: 100%; }
  .ed-side { width: 220px; }
}

/* ==================== 手机端（≤768px）：模板顶部横条 + 工具底部常驻 + 面板抽屉 ==================== */
@media (max-width: 768px) {
  /* 顶栏紧凑 */
  #view-editor .ed-topbar { height: 44px; padding: 0 8px; gap: 6px; }
  .tb-project { font-size: 13px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-template { font-size: 11px; }
  .tb-save { font-size: 10px; margin-left: 4px; }
  .tb-sep { display: none; }
  #view-editor .btn { padding: 6px 10px; font-size: 12px; }

  /* 整体纵向：模板条置顶 */
  .ed-layout { flex-direction: column; }
  .ed-sidebar { width: 100%; flex: none; border-right: none; border-bottom: 1px solid var(--px-border); }
  .ed-sidebar-title { display: none; }
  .ed-sidebar-foot { display: none; }
  .tpl-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; gap: 6px; }
  .tpl-item { flex: none; flex-direction: column; padding: 4px; gap: 4px; width: 62px; }
  .tpl-item canvas { width: 40px; height: 40px; }
  .tpl-info { align-items: center; }
  .tpl-name { font-size: 11px; max-width: 54px; }
  .tpl-size { font-size: 10px; }
  .tpl-dot { top: 3px; right: 3px; width: 6px; height: 6px; }

  /* 画布与帧条 */
  .ed-root { flex-direction: column; }
  .ed-canvas-inner { padding: 16px; }
  .ed-frames { height: 64px; padding: 6px 8px; gap: 6px; overflow-x: auto; }
  .ed-frames-ops { flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: 0; }
  .zoom-bar { padding: 3px 6px; gap: 4px; }

  /* 底部：工具面板常驻（横向工具条 + 紧凑控件），其余面板收进抽屉 */
  .ed-side { width: 100%; flex: none; max-height: 62vh; border-left: none; border-top: 1px solid var(--px-border); overflow: hidden; }
  .side-collapser { display: flex; width: 100%; height: 26px; align-items: center; justify-content: center; flex: none; background: var(--px-panel2); border: none; border-bottom: 1px solid var(--px-border); color: var(--px-dim); font-size: 11px; cursor: pointer; padding: 0; }
  .side-collapser:active { background: var(--px-panel); }
  .ed-side.collapsed .panel-tools, .ed-side.collapsed .ed-side-rest { display: none; }
  .panel-tools { flex: none; }
  .tool-list { flex-direction: row; overflow-x: auto; gap: 4px; }
  .tool-btn { flex: none; width: auto; padding: 5px 8px !important; gap: 4px; }
  .tool-btn .t-name { font-size: 11px; flex: none; }
  .tool-btn .t-key { display: none; }
  .tool-btn .t-ico { width: 16px; height: 16px; }
  .panel-tools .hint { display: none; }
  .panel-tools .ed-panel-title { display: none; }
  .panel-tools .form-row { margin: 4px 0; }
  .panel-tools .btn-row { margin: 4px 0; }
  .panel-tools .form-row.inline { margin: 4px 0; }
  .sel-ops { flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .sel-ops .btn { padding: 3px 6px; font-size: 11px; flex: none; }
  .panel-tools .form-row label { font-size: 11px; }
  .brush-range { height: 24px; }
  .panel-tools .ed-panel-title { margin-bottom: 5px; font-size: 12px; }

  .ed-side-rest { display: none; }
  .ed-side-rest.open { display: flex; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }
  .side-toggle { display: inline-flex; }
  .pan-toggle { display: inline-flex; }
  .pan-toggle.active { background: var(--px-accent) !important; border-color: var(--px-accent) !important; color: #fff !important; }

  /* 抽屉内面板稍紧凑 */
  .ed-side-rest .ed-panel { padding: 10px 12px; }
}

@media (max-width: 360px) {
  .tb-save { display: none; }
}

/* ---------------- 作品展示入口横幅 / 我的作品 / 上传弹窗（站点风格） ---------------- */

/* 入口横幅：跳转独立的作品展示页（works.html） */
.works-entry { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 22px; text-decoration: none; box-shadow: var(--shadow); transition: border-color .15s, transform .2s; }
.works-entry:hover { border-color: var(--primary); transform: translateY(-2px); }
.we-icon { font-size: 1.9rem; flex: none; }
.we-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.we-text b { color: var(--text); font-size: .95rem; }
.we-text span { color: var(--text-dim); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.we-arrow { color: var(--primary); font-size: 1.2rem; font-weight: 700; flex: none; }

/* 我的作品（侧栏） */
.mywork-list { display: flex; flex-direction: column; gap: 8px; }
.mywork-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mywork-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mywork-info b { font-size: .84rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mywork-meta { font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mywork-ops { display: flex; align-items: center; gap: 6px; flex: none; }
.mywork-st { font-size: .7rem; border-radius: 9px; padding: 2px 8px; white-space: nowrap; }
.st-pending { background: rgba(232, 164, 58, .15); color: #c98a1e; }
.st-approved { background: rgba(63, 191, 111, .13); color: #2e9e5b; }
.st-rejected { background: rgba(232, 68, 58, .12); color: var(--danger); }

/* 上传弹窗：模板勾选列表 + 介绍输入 */
.form-row textarea {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 11px; font-size: .86rem; width: 100%;
  resize: vertical; min-height: 66px; font-family: inherit;
}
.form-row textarea:focus { outline: none; border-color: var(--primary); }
.up-tpl-list { display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.up-tpl-item { font-size: .78rem; color: var(--text); line-height: 1.5; }