/*
 * 模块价值：最右上角圆形账号入口与统一设置面板，避免偏好占据工作区顶栏。
 * 输入：真实账号/VIP徽标、面板容量摘要、hidden、等待状态与尺寸radio；输出：桌面/窄屏、长账号与深浅主题布局。
 * 依赖：tokens.css 与既有控件；无业务、认证或存储副作用。面板固定定位，独立滚动。
 * 限制：不恢复单双列或旧侧边停靠；原型外壳保持其原设置入口。
 */
.account-trigger { flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--control-line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1rem; font-weight: 650; line-height: 1; }
.account-trigger.is-authenticated { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.account-trigger:hover { background: var(--soft); color: var(--accent); }
.account-trigger:disabled { opacity: .65; cursor: wait; }
.account-storage-summary { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding:12px; border:1px solid var(--control-line); border-radius:10px; background:var(--soft); color:var(--ink); font-size:.82rem; }
.account-storage-summary > span:first-child { white-space:nowrap; }
.account-storage-capacity { display:grid; min-width:0; gap:6px; padding-left:12px; border-left:1px solid var(--control-line); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.account-storage-capacity progress { appearance:none; display:block; width:100%; height:3px; border:0; border-radius:2px; background:var(--control-line); accent-color:var(--accent); }
.account-storage-capacity progress[hidden] { display:none; }
.account-storage-capacity progress::-webkit-progress-bar { background:var(--control-line); border-radius:2px; }
.account-storage-capacity progress::-webkit-progress-value { background:var(--accent); border-radius:2px; }
.account-storage-capacity progress::-moz-progress-bar { background:var(--accent); border-radius:2px; }
.account-storage-detail p { margin:0; font-size:.78rem; line-height:1.6; }
.account-storage-detail p[hidden] { display:none; }
#account-storage-notice { color:var(--warning); }
.account-panel { position: fixed; z-index: 45; width: min(344px,calc(100vw - 32px)); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 14px 16px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--surface); color: var(--ink); }
.account-panel[hidden] { display: none; }
.account-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.account-panel-header h2 { font-size: 1rem; margin: 0; }
.account-panel-header button { min-height: 32px; padding: 4px 8px; }
.account-identity { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.account-panel-initial { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--soft); color: var(--accent); font-weight: 650; }
.account-identity-copy { min-width: 0; flex: 1; }
.account-identity-copy > strong { display: block; font-size: .94rem; overflow-wrap: anywhere; line-height: 1.5; }
.account-identity-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--muted); margin-top: 4px; }
.account-settings-section { display: grid; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.account-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .87rem; }
.account-setting-row .preference-switch { flex: none; }
.account-range-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .87rem; }
.account-range-label output { color: var(--accent); font-variant-numeric: tabular-nums; }
.account-panel input[type=range] { width: 100%; min-height: 32px; padding: 0; accent-color: var(--accent); cursor: ew-resize; }
.account-setting-help { margin: -4px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
/* 五档属于设置面板，标签均为44px真实目标；随可用宽度换行，英文和窄窗不挤压原生选择。 */
.account-canvas-node-size { min-width: 0; margin: 10px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); }
.account-canvas-node-size legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; font-size: .87rem; }
.account-canvas-node-size-options { clear: both; display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; }
.account-canvas-node-size-options label { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 4px 6px; color: var(--ink); font-size: .82rem; cursor: pointer; }
.account-canvas-node-size-options input[type=radio] { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.account-canvas-node-size-options label:has(input:checked) { color: var(--accent); font-weight: 650; }
.account-canvas-node-size-options label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#account-canvas-node-size-status { margin-top: 8px; color: var(--warning); }
#account-canvas-node-size-status[hidden] { display: none; }
.account-setting-actions { display: grid; gap: 8px; }
.account-setting-actions > button { width: 100%; min-height: 36px; text-align: left; padding: 8px 10px; }
.account-setting-actions > .primary { text-align: center; }
.account-panel details > summary { min-height: 36px; display: list-item; padding: 8px 0; cursor: pointer; font-size: .87rem; }
.account-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.account-legend li { display: flex; gap: 8px; align-items: flex-start; }
.account-legend .ui-icon { flex: none; color: var(--accent); margin-top: 2px; }
.account-legend li > span { min-width: 0; }
.account-legend strong { display: block; font-size: .82rem; font-weight: 600; }
.account-legend li > span > span { display: block; color: var(--muted); font-size: .78rem; line-height: 1.6; margin-top: 4px; }
.account-settings-message { color: var(--warning); background: var(--warning-soft); padding: 12px; font-size: .82rem; line-height: 1.65; margin-top: 16px; }
/* 保存与容量同时出现时，右列须容纳完整控件；等宽的零下限侧列会把英文保存压成竖排。
   普通顶栏允许左侧品牌列让出余量；窄窗沿用下方重排，全屏另用等宽侧列保持导航居中。 */
.app-header:has(.account-trigger) { grid-template-columns: minmax(0,1fr) auto minmax(max-content,1fr); }
.app-header:has(.account-trigger) .header-options { gap: 12px; flex-wrap: nowrap; }
.header-options > #product-save { flex: none; white-space: nowrap; }
/* 全屏三页导航以视口为中心；左右等宽空列不因右侧账号/文件控件挤偏。
   辅助入口仍在右上角；窄窗另起一行，避免绝对定位与导航互相覆盖。 */
.canvas-fullscreen .app-header:has(.account-trigger) { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); padding-inline: 20px; }
.canvas-fullscreen .app-header:has(.account-trigger) .core-nav { grid-column: 2; grid-row: 1; justify-self: center; }
.canvas-fullscreen .app-header:has(.account-trigger) .header-options { display: flex; position: absolute; top: 5px; right: 16px; }
.canvas-fullscreen .header-options:has(.account-trigger) > #product-save { display: none; }
@media (max-width:720px), (pointer:coarse) {
 .account-panel { padding: 16px; }
 .account-panel-header button,.account-setting-actions > button,.account-panel details > summary { min-height: 44px; }
 .account-panel input[type=range] { min-height: 44px; }
 .app-header:has(.account-trigger) .header-options { gap: 8px; }
}
/* 手机空间不足时偏好独立成行，仍直接可见；账号与品牌在第一行，保持最右上角入口。 */
@media (max-width:720px) {
 .app-header:has(.account-trigger) { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; }
 .app-header:has(.account-trigger) .header-options { display: contents; }
 .app-header:has(.account-trigger) .brand { min-width: 0; grid-column: 1; grid-row: 1; }
 .app-header .account-trigger { grid-column: 2; grid-row: 1; margin: 0; }
 .app-header:has(.account-trigger) .ui-preferences { grid-column: 1 / -1; grid-row: 2; justify-self: end; justify-content: flex-end; }
 .app-header:has(.account-trigger) #product-save { grid-column: 1; grid-row: 2; justify-self: start; }
 .app-header:has(.account-trigger) .core-nav { grid-column: 1 / -1; grid-row: 3; }
 .canvas-fullscreen .app-header:has(.account-trigger) { padding: 6px 16px 0; }
 .canvas-fullscreen .app-header:has(.account-trigger) .header-options { display: contents; }
 .canvas-fullscreen .app-header:has(.account-trigger) .ui-preferences { grid-column: 1; grid-row: 1; }
 .canvas-fullscreen .app-header:has(.account-trigger) .core-nav { grid-row: 2; }
}
/* 空间不足时导航独占最上方一行，操作组在下方自然换行，320px 仍保留全部入口。 */
@media (max-width:1000px) {
 .canvas-fullscreen .app-header:has(.account-trigger) { grid-template-columns: minmax(0,1fr); }
 .canvas-fullscreen .app-header:has(.account-trigger) .core-nav { grid-column: 1; grid-row: 1; width: max-content; max-width: 100%; justify-content: center; }
 /* 保存按钮隐藏时 files.css 用 ID 条件调整普通页行号；全屏仍须让导航保持第一行。 */
 .canvas-fullscreen .app-header:has(#product-save[hidden]) .core-nav { grid-row: 1; }
 .canvas-fullscreen .app-header:has(.account-trigger) .header-options { display: flex; position: static; grid-column: 1; grid-row: 2; justify-self: end; max-width: 100%; flex-wrap: wrap; }
}

/* VIP只作已核验资格标记；不扩头像点击区、不覆盖首字，文字和可访问名称同时表达。 */
.account-trigger { position: relative; }
.account-vip-badge { position:absolute; right:-4px; bottom:-3px; display:inline-flex; align-items:center; justify-content:center; padding:2px 4px; border:1px solid var(--surface); border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:9px; font-weight:750; line-height:1.2; letter-spacing:.02em; pointer-events:none; }
.account-vip-badge[hidden] { display:none; }
.account-membership { display:inline-flex; margin-top:6px; color:var(--muted); font-size:.76rem; line-height:1.5; }
.account-membership.is-vip { padding:1px 7px; border:1px solid var(--accent); border-radius:999px; color:var(--accent); font-weight:650; }
.account-membership[hidden] { display:none; }

/* 快捷键与帮助只按需展开；行式控件减少留白，身份和会员读取规则保持不变。 */
.account-shortcut-list { display:grid; gap:2px; margin:8px 0; }
.account-shortcut-list label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; font-size:.82rem; }
.account-shortcut-list input { width:126px; min-width:0; min-height:30px; padding:4px 8px; text-align:center; border:1px solid var(--control-line); border-radius:6px; background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; }
.account-shortcut-list input:focus { outline:2px solid var(--accent); outline-offset:2px; }
.account-help .account-setting-actions { grid-template-columns:repeat(2,minmax(0,1fr)); margin:6px 0; }
.account-help .account-setting-actions > * { min-width:0; white-space:normal; }
.account-settings-section[hidden] { display:none; }
.account-panel .account-setting-help:empty { display:none; }
@media(pointer:coarse) { .account-shortcut-list input,.account-shortcut-list label { min-height:44px; } }