/* 桌面工作区保持高信息密度;移动断点复用现有应用布局。 */
html { background: #f5f6f7; }
body.web-workspace { --bg: #f5f6f7; --paper: #fff; --ink: #25282c; --muted: #676d73; --line: #dce0e4; --orange: #d65029; padding-bottom: 0; min-height: 100dvh; }
body.web-workspace { --quick-split-nav-height: 68px; }
.web-workspace:not(.web-ready) main, .web-workspace:not(.web-ready) .nav { visibility: hidden; }
.web-workspace header { background: #fff; gap: 12px; }
.web-module-tag-bar { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 14px; }
.web-module-tag-bar[hidden] { display: none; }
.web-module-tag-bar.web-combine-tag-bar { margin: 8px 0 10px; }
.web-module-tag-row { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; height: 36px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.web-module-tag-row::-webkit-scrollbar { display: none; }
.web-module-tag-row .web-module-tag { flex: 0 0 auto; max-width: 180px; }
.web-workspace .web-module-tag { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 34px; margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 20px; white-space: nowrap; box-shadow: none; }
.web-module-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.web-module-tag-count { flex: none; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.web-workspace .web-module-tag[aria-pressed="true"] { border-color: var(--orange); background: #faeee9; color: #9e381c; }
.web-module-tag:focus-visible, .web-module-tags-more:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.web-workspace .web-module-tags-more { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 6px; }
.web-module-tags-dialog { width: min(500px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.web-module-tags-dialog::backdrop { background: #0008; }
.web-module-tags-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.web-module-tags-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.web-module-tags-heading button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; }
.web-module-tags-dialog input[type="search"] { width: 100%; margin: 0 0 16px; min-height: 44px; }
.web-module-tag-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.web-module-tags-dialog p { font-size: 14px; color: var(--muted); }
.web-module-tags-dialog [hidden] { display: none; }
.web-workspace .web-sign-in { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-decoration: none; }
.web-workspace .web-sign-in:hover { background: #eef0f2; }
.web-workspace .web-sign-in:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.web-avatar-dialog { width: min(420px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.web-avatar-dialog::backdrop { background: #0008; }
.web-avatar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.web-avatar-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.web-avatar-dialog .avatar-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; }
.web-avatar-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.web-avatar-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 8px; font-size: 14px; white-space: normal; }
.web-avatar-actions button img { flex: 0 0 18px; }
.web-avatar-actions .save { margin: 0; border-radius: 8px; }
.web-avatar-dialog canvas { display: block; width: min(256px,100%); aspect-ratio: 1; margin: 20px auto 0; border-radius: 4px; background: #eef0f2; touch-action: none; cursor: grab; }
.web-avatar-dialog canvas:active { cursor: grabbing; }
.web-avatar-dialog :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.web-avatar-dialog label { display: block; margin: 16px 0 8px; font-size: 13px; }
.web-avatar-dialog input[type="range"] { width: 100%; padding: 0; margin: 0; accent-color: var(--orange); }
.web-avatar-dialog video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin: 20px 0 12px; border-radius: 4px; background: #17191c; }
.web-avatar-dialog #avatarCapture { width: 100%; }
.web-avatar-dialog #avatarStatus { min-height: 24px; margin: 16px 0; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.web-avatar-dialog #avatarStatus.error { color: #b42332; }
.web-avatar-dialog [hidden] { display: none !important; }
.web-workspace .card { border-radius: 8px; box-shadow: none; }
.web-workspace :is(#mineList,#modulesList) .card-actions .icon-btn > :is(svg,img) { display: block; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; object-fit: contain; }
.web-workspace #editOverlay, .web-workspace #quickSplitOverlay,
.web-workspace #runSampleOverlay,
.web-workspace #reportOverlay, .web-workspace #privacyOverlay { background: var(--bg); backdrop-filter: none; }
.web-workspace .nav button span { display: block; font-size: 12px; margin-top: 4px; }
.web-workspace #subscribeBtn, .web-workspace #restoreBtn,
.web-workspace #scanStepsBtn, .web-workspace #phoneEventsToggle,
.web-workspace .photo-row, .web-workspace #heard, .web-workspace .greet-tip,
.web-workspace .vol-row { display: none !important; }
.web-workspace .web-sync-button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 38px; }
#webSyncStatus { max-width: 240px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.web-workspace .nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
/* 保存栏独立固定,内容保留底部空间,不遮挡最后一行。 */
.web-workspace #page-create { padding-bottom: 160px; }
.web-workspace .create-save-bar { position: fixed; bottom: 68px; left: 50%; transform: translateX(-50%); width: min(720px,100%); padding: 12px 15px; background: var(--bg); border-top: 1px solid var(--line); z-index: 8; }
.web-workspace .create-save-bar .save { margin: 0; }
@media (min-width: 1000px) {
  body.web-workspace { --quick-split-nav-height: 0px; }
  .web-workspace header { position: fixed; inset: 0 0 auto; height: 66px; padding: 12px 28px; }
  .web-workspace main { max-width: 1380px; margin: 66px auto 0; padding: 30px 32px 40px 244px; }
  .web-workspace .nav { inset: 66px auto 0 0; width: 210px; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 24px 12px; border: 0; border-right: 1px solid var(--line); background: #fff; }
  .web-workspace .nav button { display: flex; align-items: center; gap: 12px; padding: 12px 16px; height: 46px; text-align: left; border-radius: 6px; }
  .web-workspace .nav button span { font-size: 14px; margin: 0; }
  .web-workspace .nav button svg { margin: 0; flex: 0 0 20px; }
  .web-workspace .nav button.active { background: #f9ede8; }
  .web-workspace .page { padding-bottom: 30px; }
  .web-workspace .create-save-bar { bottom: 0; width: min(1380px,100%); padding: 12px 32px 12px 244px; }
  .web-workspace .edit-sheet { max-width: 1040px; padding: 24px 32px; }
  .web-workspace #editOverlay { transition: none; transform: none; }
  .web-workspace #wheelViewport { overflow-y: auto; touch-action: auto; user-select: text; }
  .web-workspace #wheelList { transform: none; transition: none; }
  .web-workspace #wheelList .wheel-row { opacity: 1; color: var(--ink); transition: none; border-bottom: 1px solid var(--line); }
  .web-workspace #wheelList .wheel-row.sel { background: #fff6f2; }
  .web-workspace #wheelBand, .web-workspace .wheel-fade { display: none; }
  .web-workspace.module-selection-active #wheelList .wheel-row { opacity: .45; }
  .web-workspace.module-selection-active #wheelList .wheel-row.module-selected { opacity: 1; }
  .web-workspace .edit-tip { display: none; }
  .web-workspace #reportOverlay .edit-sheet, .web-workspace #privacyOverlay .edit-sheet { max-width: 980px; }
  .web-workspace #mineList, .web-workspace #modulesList { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .web-workspace #mineList>.mine-card-list { display: contents; }
  .web-workspace #mineList>.list-header, .web-workspace .mine-section-body { grid-column: 1/-1; }
  .web-workspace .mine-section-body:not([hidden]) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .web-workspace .mine-section-body>.empty-state { grid-column: 1/-1; }
  .web-workspace .fab { bottom: 28px; right: 32px; }
  .web-workspace .drawer { width: 320px; }
  body.web-workspace.combine-open #page-mine #mineList { display: block; }
  body.web-workspace.combine-open #page-mine #mineList .card { zoom: 1; margin-bottom: 12px; box-shadow: none; filter: none; }
  body.web-workspace.combine-open #page-mine .card::after { content: none; }
  .web-workspace .wheel-handle-top { top: -4px; width: 56px; height: 12px; cursor: pointer; background: #b8aa96; }
  .web-workspace .wheel-handle-top:hover, .web-workspace .wheel-handle-top:focus-visible { background: var(--orange); outline: 2px solid #e85d3444; outline-offset: 2px; }
  .web-workspace .wheel-row.desktop-attached { background: #fff0e9; box-shadow: inset 4px 0 0 var(--orange); }
  .web-workspace .wheel-handle-top.desktop-attached { background: var(--orange); height: 14px; }
  .web-workspace #dragHint { display: block; min-height: 22px; margin: 6px 0 0; }
  .web-workspace .combine-item { cursor: pointer; outline: none; }
  .web-workspace .combine-item:hover, .web-workspace .combine-item:focus-visible { border-color: var(--orange); }
  .web-workspace .combine-item.desktop-attached { border-color: var(--orange); background: #fff0e9; box-shadow: 0 0 0 2px #e85d3430; }
  .web-workspace #combineGestureHint { color: var(--orange); line-height: 1.5; }
}
@media (max-width: 999px) { .web-workspace { padding-bottom: 76px; } #webSyncStatus { display: none; } .web-workspace .nav { height: 68px; } }
@media (max-width: 440px) { .web-workspace header { padding: 10px 12px; gap: 8px; } .web-workspace header strong { font-size: 17px; } .web-sync-button span { display: none; } .web-workspace .account-btn { max-width: 160px; } }

/* 付费界面只在网站使用原生对话框。 */
.web-billing-dialog { width: min(600px, calc(100vw - 40px)); max-height: 85vh; overflow: auto; border: 1px solid #ddd; border-radius: 8px; padding: 24px; color: #24342a; background: #fff; }
.web-billing-entry { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px; }
.web-billing-entry[hidden] { display:none; }
.web-billing-dialog::backdrop { background: #0006; }
.web-billing-dialog section { padding: 16px 0; border-top: 1px solid #e2e7e2; }
.web-billing-dialog button { margin: 8px 8px 0 0; }