/* 左侧菜单压缩：一屏显示完
   侧边栏的间距原本散在 style.css / v3.css / premium.css 三层里，单改任何一层都会被后面覆盖，
   所以这里统一收口成一层，并且放在 <link> 的最后一位，保证生效。

   目标：常见笔记本高度（768px 起）也能把全部入口显示完，不用滚动。
   代价说明：只压垂直间距与字号，不动配色、不动分组语义。 */

.sidebar{padding:14px 10px 10px;overflow-y:auto}
.sidebar .brand{margin:0 4px 10px;font-size:17px;gap:8px}
.sidebar .brand small{margin-top:2px;letter-spacing:.14em}
.sidebar .section-label{margin:12px 10px 4px;font-size:10px;letter-spacing:.08em}
.sidebar nav{display:flex;flex-direction:column;gap:0}
.sidebar .nav-item{padding:7px 9px;margin:1px 0;font-size:12.5px;gap:9px;border-radius:6px;min-height:0;line-height:1.35}
.sidebar .nav-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-bottom{margin-top:auto;padding:10px 8px 0;font-size:11.5px}
.sidebar-bottom small{margin-top:4px;line-height:1.5}
.sidebar-bottom .text-button{min-height:22px;font-size:11.5px}

/* 桌面端侧边栏是 sticky 全高，内容真的超长时允许它自己滚，而不是把底部账号区顶出屏幕 */
@media(min-height:0){.sidebar{max-height:100vh}}

/* ══ 创作页素材槽：三个按钮排成一行，收紧上下留白 ══
   原因：style.css 里 .slot-actions 是 flex-direction:column，所以「+ 上传图片 / 平台素材库 /
   我的素材」必然占两行，第三个还独占一行，下面再空一截。这里改成三列一行并与槽位左右对齐。 */
.slot{padding:12px 13px}
.slot>strong{display:block;margin:0 0 7px;font-size:13px}
.slot-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
.slot-actions button{width:100%;font-size:12px;padding:8px 6px;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .thumbs:not(:empty){margin-top:8px}
.slot select{margin-top:6px;font-size:12.5px}
.slot .helper{margin:7px 0 0;line-height:1.5}
.slots{gap:10px}

/* ══ 详情页的侧边栏二级菜单 ══
   四个子项常驻，点进「智能详情页」（AI 工作流）后仍有出口，不会困在里面。 */
.nav-group{display:flex;flex-direction:column;gap:0}
.nav-sub{display:flex;flex-direction:column;gap:0;margin:0 0 4px 14px;
  border-left:1px solid var(--border);padding-left:8px}
.nav-sub-item{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  padding:6px 9px;border-radius:6px;color:var(--muted);font-size:12px;line-height:1.35;margin:1px 0}
.nav-sub-item:hover{background:var(--soft);color:var(--ink)}
.nav-sub-item.active{background:var(--soft);color:var(--ink);font-weight:600}
@media(max-width:900px){.nav-sub{margin-left:8px}}

/* ══ 「智能详情页」顶部那张卡片：与详情页里那排页签同一风格 ══
   详情页里是「面包屑 + .de-tabs（带下边线）」长在一张白卡片里；这里复刻同一结构， */
/* 所以从页签样式到间距都完全一致，切过去不会像换了个页面。 */
.de-head-inline{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 18px 0;margin:0 0 14px}
.de-head-inline .de-crumb{font-size:11.5px;color:var(--muted);letter-spacing:.02em;margin-bottom:10px}
.de-head-inline .de-tabs{border-bottom:1px solid var(--border)}
.de-head-inline .de-tab{margin-bottom:-1px}

/* ══ 选图弹窗：所有网格保持对齐 ══
   之前选中态用 border 画，会把卡片撑大、相邻卡片跟着错位；这里改用 box-shadow 环 + 序号徽标，
   不占布局空间。卡片固定宽高 + object-fit，网格行高一致，长文件名两行截断。 */
.material-dialog .material-grid,.material-dialog .picker-grid{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));align-items:start}
.material-choice{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);cursor:pointer;overflow:hidden;width:100%;box-sizing:border-box}
.material-choice img,.material-choice .choice-thumb{width:100%;height:112px;object-fit:cover;border-radius:7px;display:block;background:var(--soft)}
.material-choice small,.material-choice .choice-name{font-size:11.5px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
/* 选中态：用阴影画环，不再撑开盒子；序号徽标固定左上角 */
.material-choice.is-picked{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.material-choice .picker-tick{position:absolute;top:6px;left:6px;z-index:2;min-width:20px;height:20px;padding:0 5px;
  border-radius:11px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;line-height:20px;text-align:center;
  box-shadow:0 1px 4px #0003}
.material-choice.is-picked .picker-tick{display:block}
.material-choice:disabled{opacity:.45;cursor:not-allowed}
/* 底部计数条：位置固定，不因文案长短跳动 */
.picker-picked{margin:0;font-size:12px;color:var(--muted);min-height:18px;line-height:1.5}
.picker-picked.on{color:var(--ink)}
.picker-picked.tip-warn{color:#a8452f}
.picker-confirm{min-width:132px;white-space:nowrap}

/* ══ 平台素材库选图：与「我的素材」对齐的网格与徽标 ══ */
.library-wall{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));align-items:start}
.library-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);cursor:pointer;overflow:hidden;width:100%;box-sizing:border-box}
.library-card img{width:100%;height:112px;object-fit:cover;border-radius:7px;display:block;background:var(--soft)}
.library-cap{display:flex;flex-direction:column;gap:2px;min-height:32px}
.library-cap strong{font-size:11.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.library-cap small{font-size:10.5px;color:var(--muted)}
.library-card.is-picked{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.library-check{display:none;position:absolute;top:6px;left:6px;z-index:2;min-width:20px;height:20px;padding:0 5px;
  border-radius:11px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;line-height:20px;text-align:center;
  box-shadow:0 1px 4px #0003}
.library-card.is-picked .library-check{display:block}
.picker-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border);flex-wrap:wrap}
.picker-foot .picker-picked{margin:0 auto 0 0;flex:1 1 200px}

/* ══ 确认条吸底 ══
   选图弹窗的网格很长（47 张要滚好几屏），确认条被顶到最底部 → 用户选了图却看不到「确认」，
   观感就是"点了没反应"。这里让确认条始终贴在弹窗底部。 */
.picker-foot{position:sticky;bottom:-1px;z-index:4;background:var(--surface);
  margin-top:14px;padding:12px 0 6px;border-top:1px solid var(--border);
  box-shadow:0 -10px 18px -14px #0004}
.picker-foot .picker-picked{flex:1 1 200px;margin:0 auto 0 0}
/* 「我的素材」弹窗的底部条是容器的最后一个子元素，同样吸底 */
.material-dialog>:last-child{position:sticky;bottom:-1px;z-index:4;background:var(--surface);
  padding:12px 0 6px;border-top:1px solid var(--border);box-shadow:0 -10px 18px -14px #0004}
/* 吸底条上的按钮不被压缩 */
.picker-foot button,.material-dialog>:last-child button{flex:none}

/* ══ 四个素材槽：按钮行横向对齐 ══
   各槽位内容高度不同（上装多一个"上装类型"下拉、模特有性别/年龄段），按钮行自然错位。
   把槽位变成纵向 flex，按钮组 margin-top:auto —— 同一行里的两个槽位等高，按钮就落在同一水平线。 */
.slots{align-items:stretch}
.slot{display:flex;flex-direction:column}
.slot .thumbs{flex:none}
.slot>select,.slot .helper{flex:none}
.slot-actions{margin-top:auto;padding-top:9px}

/* ══ 暂时去掉 logo（等新图）══
   只隐藏图片位，文字品牌（彩虹大师 / RAINBOW STUDIO）保留。
   采用 CSS 而非改 JS：零风险、随时可逆 —— 新 logo 就位后删掉这一段即可。 */
.approved-wordmark,.login-brand img{display:none !important}
.login-brand:empty,.login-brand{display:none !important}
.brand-icon,.job-emblem img{display:none !important}

/* ══ 素材槽的图片输入框：水平居中 ══
   只让「空占位」那一个居中；一旦放了图就回到左对齐 —— 否则多图超出宽度时左侧会被裁掉、无法滚动到。 */
.slot .thumbs{justify-content:center}
.slot .thumbs:not(:has(.thumb-empty:only-child)){justify-content:flex-start}
.slot .thumbs .thumb-empty{margin:0}

/* ══ 四个槽位的元素顺序统一 ══
   上装/下装比其他槽位多一个「类型」下拉，它排在图片框之前，于是四个图片框不在同一条线上。
   这里用 flex order 把顺序统一成：标题 → 图片框 → 按钮 → 类型下拉 → 提示。
   只改顺序，不动 DOM 与逻辑。 */
.slot>strong{order:1}
.slot>.thumbs{order:2}
.slot>.slot-actions{order:3}
.slot>label{order:4}
.slot>select{order:5}
.slot>.helper,.slot>small.helper{order:6}

/* ══ 让四个槽位逐行对齐 ══
   思路：把每个槽位内部各块的高度固定下来，并去掉 margin-top:auto（不再把按钮压到底部），
   这样内容从上往下流，四块的行位置就一致了：
     标题行(固定) → 图片框行(固定) → 按钮行(固定) → 类型下拉(有的槽没有，留空行) → 提示行(固定两行)
   于是四个「从我的素材选」输入框、四排按钮都落在同一水平线上。 */
.slot{align-content:start}
.slot>strong{min-height:22px;line-height:22px}
.slot .thumbs{min-height:158px;align-items:flex-start}
.slot .thumb-empty{height:150px}
.slot-actions{margin-top:0;min-height:36px}
.slot>label{min-height:18px}
.slot>select{height:38px}
.slot>.helper,.slot>small.helper{min-height:34px}

/* 固定工作台导航：借用参考站的分区与底部账号坞，不复制深色全屏皮肤。 */
.shell{grid-template-columns:196px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100dvh;max-height:100dvh;min-height:0;padding:12px 10px 10px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border)}
.sidebar .brand{flex:none;min-height:46px;margin:0 4px 7px;gap:9px;color:var(--ink);font-size:16px;letter-spacing:-.02em}
.sidebar .brand small{font-size:7.5px;letter-spacing:.16em;color:var(--muted)}
.sidebar .rb-brand-mark{display:grid!important;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--soft);color:var(--accent)}
.rb-brand-mark svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.rb-brand-mark svg circle{fill:currentColor;stroke:none}
.sidebar-main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding:1px 2px 7px}
.sidebar .section-label{margin:9px 10px 4px;font-size:9px;line-height:1.35;letter-spacing:.13em;color:var(--muted);font-weight:650}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar .nav-item{display:flex;align-items:center;gap:10px;width:100%;height:35px;min-height:35px;margin:0;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:11.5px;font-weight:540;line-height:1.2;box-shadow:none;text-align:left;white-space:nowrap;transition:background .18s,color .18s,transform .18s}
.sidebar .nav-item:hover{background:var(--soft);color:var(--ink);transform:none}
.sidebar .nav-item.active{background:var(--soft);color:var(--ink);font-weight:680;box-shadow:inset 3px 0 var(--accent)}
.sidebar .nav-item.active .nav-icon{color:var(--accent)}
.sidebar .nav-item:active{transform:scale(.98)}
.sidebar .nav-icon,.side-user-menu .nav-icon{display:block;flex:none;width:17px;height:17px}
.sidebar .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-bottom{flex:none;position:relative;left:auto;right:auto;width:100%;margin:0;padding:9px 2px 0;border-top:1px solid var(--border);background:var(--surface)}
.side-user-trigger{display:flex;align-items:center;gap:9px;width:100%;min-height:48px;padding:5px 7px;border:0;border-radius:11px;background:transparent;color:var(--ink);text-align:left}
.side-user-trigger:hover,.side-user-trigger[aria-expanded=true]{background:var(--soft);transform:none}
.side-avatar{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:linear-gradient(140deg,var(--rb-1-l),var(--rb-2-l),var(--rb-3-l),var(--rb-4-l));color:var(--accent);font-size:14px;font-weight:750}
.side-identity{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.side-user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:11.5px;line-height:1.3;font-weight:680;color:var(--ink)}
.side-identity small{font-size:9px;line-height:1.2;color:var(--muted)}
.side-user-caret{color:var(--muted);font-size:15px;line-height:1;transition:transform .18s}
.side-user-trigger[aria-expanded=true] .side-user-caret{transform:rotate(180deg)}
.side-user-menu{position:absolute;z-index:40;left:0;right:0;bottom:calc(100% + 8px);padding:6px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:0 16px 36px #392c1d24}
.side-user-menu[hidden]{display:none}
.side-menu-item{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:7px 9px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:11.5px;text-align:left}
.side-menu-item:hover{background:var(--soft);transform:none}
.side-menu-logout{margin-top:4px;border-top:1px solid var(--border);border-radius:0;color:#a34f3c}
.topbar .top-account>button{display:none}
@media(max-width:1050px){.shell{grid-template-columns:174px minmax(0,1fr)}}
@media(max-width:850px){
 .shell{display:grid;grid-template-columns:76px minmax(0,1fr)}
 .sidebar{height:100dvh;max-height:100dvh;position:sticky;top:0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:10px 5px}
 .sidebar .brand{justify-content:center;margin:0 0 5px;min-height:40px}
 .sidebar .brand>span:not(.brand-icon){display:none}
 .sidebar .section-label{text-align:center;margin:6px 0 2px;font-size:7px}
 .sidebar-main{width:100%}
 .sidebar nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:1px}
 .sidebar .nav-item{height:43px;min-height:43px;flex-direction:column;justify-content:center;gap:2px;padding:3px 1px;font-size:9px}
 .sidebar .nav-icon{width:17px;height:17px}
 .sidebar .nav-label{max-width:100%;font-size:9px}
 .sidebar-bottom{display:block;width:100%;padding:6px 0 0}
 .side-user-trigger{justify-content:center;min-height:42px;padding:4px}
 .side-identity,.side-user-caret{display:none}
 .side-user-menu{left:66px;right:auto;bottom:0;width:178px}
}
@media(max-width:620px){
 .shell{display:block}
 .sidebar{position:sticky;top:0;z-index:25;width:100%;height:auto;max-height:none;min-height:0;padding:7px 9px;display:flex;flex-direction:row;align-items:center;gap:8px;overflow:visible;border-right:0;border-bottom:1px solid var(--border)}
 .sidebar .brand{margin:0;min-height:36px}
 .sidebar-main{display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;padding:0;scrollbar-width:none}
 .sidebar-main .section-label{display:none}
 .sidebar nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:3px}
 .sidebar .nav-item{width:56px;min-width:56px;height:43px;min-height:43px}
 .sidebar-bottom{width:auto;padding:0;border:0}
 .side-user-menu{position:fixed;left:auto;right:8px;top:58px;bottom:auto;width:184px}
}

/* ══ 列表页统一表格风格（对齐对家）══
   对家的列表页统一是：统计块 → 筛选条 → 表格（**吸顶表头**、紧凑行、悬停高亮、数字右对齐、分页）。
   这里用一层 CSS 把全站列表页的表格拉齐，不动任何 JS —— 已用 .rb-matrix 的新页面不受影响（同款观感）。 */
#uploads table,#works table,#library table,#results table,.library-table,.upload-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
#uploads thead th,#works thead th,#library thead th,#results thead th{
  position:sticky;top:0;z-index:2;background:var(--soft);color:var(--muted);
  font-size:11.5px;font-weight:600;text-align:left;white-space:nowrap;
  padding:9px 11px;border-bottom:1px solid var(--border)}
#uploads tbody td,#works tbody td,#library tbody td,#results tbody td{
  padding:9px 11px;border-bottom:1px solid var(--border);vertical-align:middle}
#uploads tbody tr:hover td,#works tbody tr:hover td,#library tbody tr:hover td,#results tbody tr:hover td{
  background:var(--soft)}
/* 数字列右对齐并等宽（对家的金额/数量列都是右对齐，扫读更快） */
#uploads td:has(> :is(.num,.amount)),#works td:has(> .num),
#uploads td.num,#works td.num,#library td.num,.rb-matrix td.num{text-align:right;font-variant-numeric:tabular-nums}
/* 单元格内的小按钮紧凑化，避免撑高行 */
#uploads td button,#works td button,#library td button{padding:5px 10px;font-size:11.5px;min-height:0}
/* 表头与筛选条之间留一口气，和卡片内边距一致 */
#uploads table,.table-wrap{margin-top:2px}

/* 导航始终留在视口；全站只滚动右侧主内容。 */
@media(min-width:621px){
 .shell{display:block;padding-left:196px;min-height:100dvh}
 .shell>main{display:block;min-width:0;width:100%}
 .sidebar{position:fixed;z-index:30;inset:0 auto 0 0;width:196px;height:100dvh;max-height:100dvh}
}
@media(min-width:621px) and (max-width:1050px){
 .shell{padding-left:174px}
 .sidebar{width:174px}
}
@media(min-width:621px) and (max-width:850px){
 .shell{padding-left:76px}
 .sidebar{width:76px}
}
@media(max-width:620px){
 .shell{display:block;padding-top:60px}
 .sidebar{position:fixed;z-index:30;inset:0 0 auto 0;width:100%;height:60px;max-height:60px}
}

/* ══════════════════════════════════════════════════════════════════════════
   控件标尺收口（2026-10-12）

   为什么加这一段：全项目有 38 处 `min-height:0` + 手写 padding 在绕过基础按钮的
   `min-height:42px`，高度完全由 padding 和字号临时决定 —— 实测同一个页面上出现过
   19/24/31/33/35/38/42/48/58/64/80/101px 共 12 种按钮高度，视觉上就是"大小不一、
   有的被挤扁"。这里把散落的取值收敛到 4 档，用**与原始选择器同特异度**的规则放在
   最后加载的样式表里，靠源码顺序取胜。

   标尺（4pt 网格）：
     --ctl-xs 28px  微型：关闭 / 删除 / 纯图标按钮
     --ctl-sm 32px  小：chip、标签、行内次要操作
     --ctl-md 36px  中：默认小按钮、页签
     --ctl-lg 44px  大：主操作（生成 / 确认 / 提交）
   ────────────────────────────────────────────────────────────────────── */
:root{
  --ctl-xs:28px;
  --ctl-sm:32px;
  --ctl-md:36px;
  --ctl-lg:44px;
}

/* ── 28px：微型（关闭 / 删除 / 纯图标）────────────────────────────── */
.cf-item-del,.pl-item-del,.de-item-del,.fav-mini,.ms-thumb-del{min-height:var(--ctl-xs)}

/* ── 32px：小（chip / 标签 / 行内次要操作）───────────────────────── */
.pl-chip,.filter-group .chip,.cv-chip,.asset-del{min-height:var(--ctl-sm)}
.acct-ops button,.task-code button,.model-acts button,.fav-acts button,.fav-link{min-height:var(--ctl-sm)}
.cf-ref-btn,.rt-pick-row button,.pl-side-head button,.pl-pick-row>button{min-height:var(--ctl-sm)}
.pl-acts a,.pl-acts button,.de-side-head button,.de-tools button,.de-mini{min-height:var(--ctl-sm)}
.de-layer-btn,.rc-body .actions button,.slot-actions button,.fav-folder-btn{min-height:var(--ctl-sm)}
#uploads td button,#works td button,#library td button{min-height:var(--ctl-sm)}

/* ── 36px：中（默认小按钮 / 页签）────────────────────────────────── */
.rc-tab,.rb-tab,.ms-tab,.dp-gtab,.dp-switch-btn,.dp-del{min-height:var(--ctl-md)}
.cf-item-btn,.pl-item-btn,.de-item-btn,.de-bar>button{min-height:var(--ctl-md)}

/* ── 44px：大（主操作）────────────────────────────────────────────
   基础 button 原本是 42px，不在 4pt 网格上；对齐到 44px。
   它同样是 Apple HIG 的最小触控尺寸，手机端也够。 */
button{min-height:var(--ctl-lg)}
#generate,#analyze,.primary,.submit-bar button{min-height:var(--ctl-lg)}

/* ── 单个修补 ─────────────────────────────────────────────────────── */
/* 「✕」关闭气泡原本只有 20×20，是全站最小的可点击区；提到 28×28（仍低于主按钮，
   因为它是悬浮层的次要动作，但已经达到可稳定点中的下限） */
.hg-bubble-close{width:var(--ctl-xs);height:var(--ctl-xs);min-height:var(--ctl-xs)}
/* 素材空位提示用 9px 字号，低于可读下限；提到 10.5px 并给两侧留白，不再贴边 */
.slot .thumb.thumb-empty{padding:0 6px}
.slot .thumb.thumb-empty small{font-size:10.5px}

/* 侧边栏导航：全站最大的一批按钮（12 个），原为 35px，不在 4pt 网格上。
   选择器用 `.sidebar .nav-item` 与上面第 13 行那条同特异性，靠源码顺序取胜。 */
.sidebar .nav-item{min-height:var(--ctl-md)}