/* 光感引擎 2026 production workspace
   Approved direction: direct-to-workbench, image-first, restrained commercial UI. */

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

#appShell.app-shell-2026 {
  --ws-blue: #1267f5;
  --ws-blue-soft: #edf4ff;
  --ws-ink: #15171c;
  --ws-muted: #747b86;
  --ws-faint: #9aa0a9;
  --ws-line: #e2e5e9;
  --ws-soft: #f6f7f9;
  --ws-success: #20a66a;
  --ws-control-height: 42px;
  --ws-control-radius: 7px;
  --ws-control-gap: 8px;
  --ws-type-body: 14px;
  --ws-type-control: 13px;
  --ws-type-support: 12px;
  --ws-type-meta: 11px;
  --ws-leading-body: 1.55;
  --ws-leading-support: 1.55;
  --ws-sidebar-width: 210px;
  --ws-page-max: 2200px;
  --ws-service-page-max: 1720px;
  --ws-page-gutter: clamp(24px, 2.2vw, 48px);
  display: grid;
  grid-template-columns: var(--ws-sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  min-height: 100vh;
  background: #fff;
  color: var(--ws-ink);
}

#appShell * { scrollbar-color: #ccd1d8 transparent; }
#appShell .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#appShell .legacy-plaza-home { display: none !important; }
#appShell .button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: var(--ws-control-gap); padding-inline: 17px; border: 1px solid transparent; border-radius: var(--ws-control-radius); box-shadow: none; font-size: 14px; font-weight: 650; line-height: 1; transform: none; }
#appShell .button:hover { transform: none; }
#appShell .button-primary { background: var(--ws-blue); box-shadow: none; color: #fff; }
#appShell .button-outline { border-color: var(--ws-line); background: #fff; color: #343942; }
#appShell .panel-card { border: 1px solid var(--ws-line); border-radius: 8px; background: #fff; box-shadow: none; }

/* Shell */
#appShell .app-sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: var(--ws-sidebar-width);
  height: 100vh;
  padding: 20px 12px 16px;
  border-right: 1px solid var(--ws-line);
  background: #fff;
  color: var(--ws-ink);
}
#appShell .app-brand { gap: 10px; min-height: 48px; padding: 0 10px 18px; }
#appShell .app-brand img { width: 38px; height: 38px; border-radius: 9px; }
#appShell .app-brand span { gap: 1px; }
#appShell .app-brand strong { color: var(--ws-ink); font-size: 17px; letter-spacing: -.03em; }
#appShell .app-brand small { color: #9aa0a9; font-size: 9px; letter-spacing: .04em; }
#appShell .app-nav { display: grid; gap: 4px; margin-top: 18px; }
#appShell .app-nav-divider { height: 1px; margin: 11px 8px; background: var(--ws-line); }
#appShell .app-nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #4f5661;
  text-align: left;
  transition: background .16s ease, color .16s ease;
}
#appShell .app-nav-item:hover { background: #f5f7fa; color: #1e2229; }
#appShell .app-nav-item.is-active { border: 0; background: var(--ws-blue-soft); color: var(--ws-blue); }
#appShell .app-nav-item .app-nav-icon { display: block; width: 19px; height: 19px; flex: 0 0 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; color: #69717c; }
#appShell .app-nav-item.is-active .app-nav-icon { color: var(--ws-blue); }
#appShell .app-nav-item b { display: block; align-self: center; margin: 0; font-size: 14px; font-weight: 570; line-height: 20px; }
#appShell .sidebar-foot { gap: 12px; margin-top: auto; }
#appShell .service-pill { padding: 12px; border: 1px solid var(--ws-line); border-radius: 7px; background: #fafbfc; }
#appShell .service-pill small { color: #8a919b; font-size: 9px; letter-spacing: .05em; }
#appShell .service-pill strong { color: #30353c; font-size: 11px; }
#appShell .sidebar-mini-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#appShell .sidebar-mini-actions button { display: grid; width: 100%; height: 40px; place-items: center; border: 1px solid var(--ws-line); border-radius: 6px; background: #fff; color: #717883; }
#appShell .sidebar-mini-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

#appShell .app-main { min-width: 0; min-height: 100vh; padding: 0; background: #fff; }
#appShell .app-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 64px;
  padding: 0 28px;
  border-bottom: 1px solid var(--ws-line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
}
#appShell .global-search-wrap { position: relative; width: min(370px, 38vw); }
#appShell.app-shell-2026 .plaza-search { display: flex; width: 100%; height: 42px; align-items: center; gap: 10px; margin: 0; padding: 0 14px; border: 1px solid #d9dde3; border-radius: 7px; background: #fff; }
#appShell .plaza-search > svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: #6d7580; stroke-width: 1.8; }
#appShell .plaza-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #242830; font-size: 13px; }
#appShell .plaza-search input::placeholder { color: #a0a6ae; }
#appShell .plaza-search kbd { padding: 3px 6px; border: 1px solid var(--ws-line); border-radius: 4px; background: #fafafa; color: #a2a7ae; font-family: inherit; font-size: 9px; }
#appShell .global-search-results { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; padding: 6px; border: 1px solid var(--ws-line); border-radius: 8px; background: #fff; box-shadow: 0 18px 48px rgba(25,31,42,.14); }
#appShell .global-search-heading { padding: 8px 10px 6px; color: #9097a0; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
#appShell .global-search-result { display: grid; width: 100%; min-height: 52px; grid-template-columns: minmax(0,1fr) 18px; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; }
#appShell .global-search-result:hover,
#appShell .global-search-result:focus-visible { background: var(--ws-soft); }
#appShell .global-search-result > span { display: grid; min-width: 0; gap: 4px; }
#appShell .global-search-result strong { color: var(--ws-ink); font-size: 12px; }
#appShell .global-search-result small { overflow: hidden; color: #8b929b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#appShell .global-search-result > svg { width: 16px; height: 16px; fill: none; stroke: #9aa1aa; stroke-width: 1.7; }
#appShell .global-search-empty { display: grid; min-height: 96px; place-content: center; gap: 5px; color: #8d949d; text-align: center; }
#appShell .global-search-empty strong { color: #646b75; font-size: 12px; }
#appShell .global-search-empty span { font-size: 10px; }
#appShell .topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#appShell .active-task-chip,
#appShell .notification-button,
#appShell .credit-chip,
#appShell .profile-chip { height: var(--ws-control-height); border: 1px solid var(--ws-line); border-radius: var(--ws-control-radius); background: #fff; color: #353a42; line-height: 1; }
#appShell .active-task-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--ws-control-gap); padding: 0 12px; font-size: 12px; }
#appShell .active-task-chip svg { width: 16px; height: 16px; fill: none; stroke: var(--ws-blue); stroke-width: 1.8; }
#appShell .active-task-chip b { font-size: 13px; }
#appShell .notification-button { display: grid; width: var(--ws-control-height); place-items: center; }
#appShell .credit-chip { display: grid; grid-template-columns: auto auto; grid-template-rows: 13px 15px; gap: 0 8px; padding: 5px 11px; }
#appShell .credit-chip span { color: #858c96; font-size: 9px; }
#appShell .credit-chip strong { align-self: start; font-size: 15px; line-height: 16px; }
#appShell .credit-chip i { grid-column: 2; grid-row: 1 / 3; align-self: center; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--ws-blue); font-size: 10px; }
#appShell .profile-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 5px; }
#appShell .profile-chip > span { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px; background: url('/web/logo.svg') center / cover no-repeat; color: transparent; }
#appShell .profile-chip b { font-size: 11px; font-weight: 600; }
#appShell .profile-chip > svg { width: 14px; height: 14px; fill: none; stroke: #8c929b; stroke-width: 1.8; }
#appShell .app-view { width: 100%; max-width: none; margin: 0; padding: 30px var(--ws-page-gutter) 64px; }
#appShell.app-shell-2026 #routeWorkspace { max-width: var(--ws-page-max); margin-inline: auto; }
#appShell.app-shell-2026 #routeWorks,
#appShell.app-shell-2026 #routeTasks { max-width: none; margin-inline: 0; }
#appShell.app-shell-2026 #routeCredits,
#appShell.app-shell-2026 #routeAccount,
#appShell.app-shell-2026 #routeSupport { max-width: var(--ws-service-page-max); margin-inline: auto; }
#appShell.app-shell-2026 #routeTool,
#appShell.app-shell-2026 #routeResult { max-width: none; margin-inline: 0; }
#appShell .view-enter { animation: ws-view-in .2s ease both; }
@keyframes ws-view-in { from { opacity: .45; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Conditional onboarding */
#appShell .phone-activation-banner,
#appShell .first-use-guide { border: 1px solid #d7e5ff; border-radius: 8px; background: #f5f9ff; box-shadow: none; }
#appShell .phone-activation-banner { width: calc(100% - var(--ws-page-gutter) - var(--ws-page-gutter)); max-width: var(--ws-page-max); margin: 16px auto 0; }
#appShell #routeWorkspace .first-use-guide { margin: 0 0 22px; }
#appShell .first-use-guide { grid-template-columns: 300px 1fr; padding: 18px 20px; }
#appShell .first-use-copy h2 { font-size: 20px; }
#appShell .first-use-guide li { min-height: 58px; border-radius: 6px; background: #fff; }

/* Workspace home */
#appShell .workspace-dashboard { width: 100%; max-width: none; margin: 0 auto; }
#appShell .workspace-dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
#appShell .workspace-dashboard-kicker { display: block; margin-bottom: 8px; color: var(--ws-blue); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
#appShell .workspace-dashboard-head h2 { margin: 0; font-size: clamp(27px, 2.3vw, 34px); line-height: 1.18; letter-spacing: -.045em; }
#appShell .workspace-dashboard-head p { margin: 9px 0 0; color: var(--ws-muted); font-size: 14px; }
#appShell .workspace-dashboard-grid { display: grid; grid-template-columns: minmax(680px, 1fr) clamp(360px, 25vw, 470px); gap: 18px; }
#appShell .workspace-start-panel,
#appShell .workspace-continue-card,
#appShell .workspace-recent-panel { border: 1px solid var(--ws-line); border-radius: 10px; background: #fff; }
#appShell .workspace-workflow-panel { overflow: hidden; padding: 24px; }
#appShell .workspace-workflow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
#appShell .workspace-workflow-head > div > span { display: block; margin-bottom: 7px; color: var(--ws-blue); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
#appShell .workspace-workflow-head h3 { margin: 0; color: #171a20; font-size: 22px; line-height: 1.25; letter-spacing: -.025em; }
#appShell .workspace-workflow-head p { margin: 7px 0 0; color: var(--ws-muted); font-size: 13px; line-height: 1.55; }
#appShell .workspace-workflow-total { flex: none; padding-top: 4px; color: #858c96; font-size: 12px; white-space: nowrap; }
#appShell .workspace-workflow-total b { color: #272c34; font-size: 15px; }
#appShell .workspace-workflow-filters { display: flex; overflow-x: auto; gap: 7px; margin-top: 20px; padding-bottom: 2px; scrollbar-width: none; }
#appShell .workspace-workflow-filters::-webkit-scrollbar { display: none; }
#appShell .workspace-workflow-filters button { flex: none; min-height: 36px; padding: 0 13px; border: 1px solid var(--ws-line); border-radius: 6px; background: #fff; color: #666e79; font-size: 12px; font-weight: 600; }
#appShell .workspace-workflow-filters button:hover { border-color: #b8c8e4; color: #304e7e; }
#appShell .workspace-workflow-filters button.is-active { border-color: #20252d; background: #20252d; color: #fff; }
#appShell .workspace-workflow-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
#appShell .workspace-workflow-loading { grid-column: 1 / -1; display: grid; min-height: 366px; place-items: center; color: var(--ws-muted); font-size: 13px; }
#appShell .workspace-workflow-card { display: grid; overflow: hidden; grid-template-columns: minmax(116px,35%) minmax(0,1fr); min-height: 176px; padding: 0; border: 1px solid #e1e4e9; border-radius: 9px; background: #fff; color: #1d2128; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
#appShell .workspace-workflow-card:hover { border-color: #aebed8; box-shadow: 0 10px 25px rgba(35,49,74,.09); transform: translateY(-2px); }
#appShell .workspace-workflow-card:focus-visible { outline: 3px solid rgba(30,108,245,.22); outline-offset: 2px; }
#appShell .workspace-workflow-media { position: relative; overflow: hidden; min-width: 0; background: #eef0f3; }
#appShell .workspace-workflow-media::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(12,15,20,.03),rgba(12,15,20,.28)); content: ''; }
#appShell .workspace-workflow-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
#appShell .workspace-workflow-card:hover .workspace-workflow-media img { transform: scale(1.025); }
#appShell .workspace-workflow-media i,
#appShell .workspace-workflow-media em { position: absolute; z-index: 1; top: 10px; padding: 4px 7px; border-radius: 4px; font-size: 10px; font-style: normal; line-height: 1; }
#appShell .workspace-workflow-media i { left: 10px; background: rgba(25,28,34,.78); color: #fff; }
#appShell .workspace-workflow-media em { right: 10px; background: #edf4ff; color: var(--ws-blue); font-weight: 700; }
#appShell .workspace-workflow-copy { display: flex; min-width: 0; flex-direction: column; padding: 17px 17px 15px; }
#appShell .workspace-workflow-copy > small { color: #7c8490; font-size: 11px; }
#appShell .workspace-workflow-copy > strong { margin-top: 5px; font-size: 17px; line-height: 1.25; }
#appShell .workspace-workflow-description { display: -webkit-box; overflow: hidden; margin-top: 8px; color: #747c87; font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#appShell .workspace-workflow-meta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 10px; margin-top: auto; padding-top: 12px; }
#appShell .workspace-workflow-meta b { color: #303640; font-size: 11px; }
#appShell .workspace-workflow-meta > i { color: #969ca5; font-size: 10px; font-style: normal; }
#appShell .workspace-workflow-meta > em { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 9px; border-top: 1px solid #edf0f3; color: var(--ws-blue); font-size: 12px; font-style: normal; font-weight: 700; }
#appShell .workspace-workflow-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#appShell .workspace-dashboard-side { display: grid; gap: 16px; }
#appShell .workspace-continue-card,
#appShell .workspace-recent-panel { padding: 21px; }
#appShell .workspace-continue-card > header,
#appShell .workspace-recent-panel > header,
#appShell .workspace-presets > header { display: flex; align-items: center; justify-content: space-between; }
#appShell .workspace-continue-card h3,
#appShell .workspace-recent-panel h3,
#appShell .workspace-presets h3 { margin: 0; font-size: 17px; }
#appShell .workspace-continue-card header button,
#appShell .workspace-recent-panel header button,
#appShell .workspace-presets header button { min-height: 36px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: var(--ws-muted); font-size: 11px; }
#appShell .workspace-last-task { display: grid; grid-template-columns: 145px 1fr; gap: 16px; width: 100%; margin-top: 16px; padding: 0; border: 0; background: transparent; text-align: left; }
#appShell .workspace-last-task > img { width: 145px; height: 128px; border-radius: 6px; object-fit: cover; }
#appShell .workspace-last-task > span { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding-top: 3px; }
#appShell .workspace-last-task strong { font-size: 14px; }
#appShell .workspace-last-task em { margin-top: 9px; color: var(--ws-success); font-size: 10px; font-style: normal; }
#appShell .workspace-last-task em i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ws-success); }
#appShell .workspace-last-task small { margin-top: 8px; color: #9aa0a9; font-size: 10px; }
#appShell .workspace-last-task b { margin-top: auto; padding: 10px 20px; border: 1px solid var(--ws-blue); border-radius: 6px; color: var(--ws-blue); font-size: 12px; }
#appShell .workspace-recent-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 15px; }
#appShell .recent-work-card { position: relative; overflow: hidden; min-height: 110px; aspect-ratio: auto; padding: 0; border: 0; border-radius: 6px; background: #eff1f3; }
#appShell .recent-work-card { min-width: 0; }
#appShell .recent-work-card img { display: block; width: 100%; height: 110px; object-fit: cover; color: transparent; font-size: 0; }
#appShell .recent-work-overlay { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 2px; padding: 28px 9px 8px; background: linear-gradient(transparent, rgba(15,17,20,.82)); color: #fff; text-align: left; }
#appShell .recent-work-overlay small,
#appShell .recent-work-overlay em { display: none; }
#appShell .recent-work-overlay strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#appShell .recent-deliveries-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 110px; padding: 18px; border: 1px dashed var(--ws-line); color: #8b929b; }
#appShell .recent-deliveries-empty > svg { width: 38px; height: 38px; padding: 8px; border: 1px solid var(--ws-line); border-radius: 7px; fill: none; stroke: var(--ws-blue); stroke-width: 1.6; }
#appShell .recent-deliveries-empty div { display: grid; gap: 4px; }
#appShell .recent-deliveries-empty strong { font-size: 11px; }
#appShell .recent-deliveries-empty span { font-size: 9px; }
#appShell .workspace-presets { margin-top: 16px; padding: 21px 22px 22px; }
#appShell .workspace-presets header div { display: flex; align-items: baseline; gap: 12px; }
#appShell .workspace-presets header p { margin: 0; color: #9399a2; font-size: 11px; }
#appShell .workspace-presets > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 15px; }
#appShell .workspace-presets > div > button { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 11px; min-height: 72px; padding: 12px 15px; border: 1px solid var(--ws-line); border-radius: 7px; background: #fff; text-align: left; }
#appShell .workspace-presets > div > button:hover { border-color: #b7cdf8; background: #fbfdff; }
#appShell .workspace-presets svg { width: 24px; height: 24px; fill: none; stroke: #65707d; stroke-width: 1.55; }
#appShell .workspace-presets span { display: grid; gap: 4px; }
#appShell .workspace-presets strong { font-size: 13px; }
#appShell .workspace-presets small { color: #8d949e; font-size: 11px; }

/* Creation workbench */
#appShell #routeTool { position: relative; padding: 0; }
#appShell .tool-page-head { padding: 0 26px; border: 0; border-bottom: 1px solid var(--ws-line); border-radius: 0; background: #fff; }
#appShell .tool-back { position: absolute; top: 42px; left: 20px; z-index: 2; min-height: 40px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #6f7680; font-size: 12px; transform: translateY(-50%); }
#appShell .tool-back > svg,
#appShell .back-button > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#appShell .tool-page-identity { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 84px; padding-left: 142px; }
#appShell .tool-page-mark { display: none; }
#appShell .tool-page-identity > div > span,
#appShell .tool-page-identity > div > p { display: none; }
#appShell .tool-page-identity h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
#appShell .tool-page-identity > aside { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; }
#appShell .tool-page-identity > aside span { color: #8d949d; font-size: 10px; }
#appShell .tool-page-identity > aside strong { font-size: 13px; }
#appShell .tool-page-identity > aside small { color: #979da6; font-size: 10px; }
#appShell .studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(390px, 22vw, 480px); gap: 0; min-height: calc(100vh - 183px); min-height: calc(100dvh - 183px); }
#appShell .studio-visual-column { min-width: 0; }
#appShell .studio-canvas-card { overflow: hidden; min-height: calc(100vh - 218px); border: 0; border-right: 1px solid var(--ws-line); border-radius: 0; background: #f3f4f6; box-shadow: none; }
#appShell .studio-card-bar { height: 60px; padding: 0 22px; border-bottom: 1px solid var(--ws-line); background: #fff; }
#appShell .studio-card-bar > div:first-child strong { font-size: 14px; }
#appShell .studio-card-bar > div:first-child span { color: #9298a1; font-size: 11px; }
#appShell .source-mode-toggle { margin: 0; padding: 3px; border-radius: 6px; }
#appShell .source-mode-toggle button { min-height: 38px; padding-inline: 13px; border-radius: 4px; font-size: 12px; }
#appShell .source-mode-toggle button.is-active { background: #fff; color: var(--ws-blue); box-shadow: none; }
#appShell .studio-upload-zone { display: grid; min-height: calc(100vh - 330px); margin: 0; border: 0; border-radius: 0; background: #f1f2f4; }
#appShell .studio-upload-zone .upload-idle { min-height: calc(100vh - 330px); }
#appShell .studio-upload-zone .upload-mark { width: 58px; height: 58px; border: 1px solid #d5dbe4; border-radius: 50%; background: #fff; box-shadow: none; color: var(--ws-blue); }
#appShell .studio-upload-zone .upload-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#appShell .studio-upload-zone .upload-idle strong { font-size: 17px; }
#appShell .studio-upload-zone .upload-idle span { font-size: 12px; }
#appShell .studio-upload-zone .upload-preview { height: calc(100vh - 330px); background: #f1f2f4; }
#appShell .studio-upload-zone .upload-preview > img { padding: 36px; object-fit: contain; }
#appShell .preview-overlay { right: 16px; bottom: 14px; left: 16px; border-radius: 6px; }
#appShell .canvas-assurance { display: grid; grid-template-columns: repeat(3,1fr); min-height: 72px; border-top: 1px solid var(--ws-line); background: #fff; }
#appShell .canvas-assurance > span { display: flex; align-items: center; padding: 0 20px; border: 0; color: #737a84; font-size: 10px; }
#appShell .canvas-assurance > span + span { border-left: 1px solid var(--ws-line); }
#appShell .canvas-assurance i { color: var(--ws-blue); }
#appShell .studio-status-grid { border-right: 1px solid var(--ws-line); background: #fff; }
#appShell .studio-status-grid .provider-card,
#appShell .studio-status-grid .guide-card { display: none; }
#appShell .studio-status-grid .active-job { margin: 0; padding: 18px 22px; border: 0; border-top: 1px solid var(--ws-line); border-radius: 0; }
#appShell .studio-control-card { position: sticky; top: 64px; display: grid; overflow: hidden; height: calc(100vh - 183px); height: calc(100dvh - 183px); max-height: calc(100vh - 183px); max-height: calc(100dvh - 183px); grid-template-rows: auto minmax(0,1fr) auto; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
#appShell .control-card-head { position: relative; top: auto; margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--ws-line); background: #fff; }
#appShell .studio-control-scroll { min-height: 0; overflow-y: auto; padding: 0 24px 20px; scrollbar-gutter: stable; overscroll-behavior: contain; }
#appShell .control-card-head > div > span { display: none; }
#appShell .control-card-head h3 { margin: 0; font-size: 18px; }
#appShell .control-card-head em { color: var(--ws-success); font-size: 10px; }
#appShell .control-section { padding: 22px 0; border-bottom: 1px solid var(--ws-line); }
#appShell .control-label { grid-template-columns: 1fr; gap: 0; }
#appShell .control-label > span { display: none; }
#appShell .control-label strong { font-size: 14px; }
#appShell .control-label small { margin-top: 5px; color: #9298a1; font-size: 11px; }
#appShell .gemstone-choice-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 14px; }
#appShell .gemstone-choice { min-height: 58px; padding: 11px 12px; border-radius: 6px; }
#appShell .gemstone-choice strong { font-size: 12px; }
#appShell .gemstone-choice small { font-size: 10px; }
#appShell #refinePresets.segmented { gap: 8px; margin-top: 14px; }
#appShell #refinePresets.segmented button { display: grid; min-width: 0; min-height: 62px; align-content: center; gap: 4px; padding: 9px 7px; border: 1px solid var(--ws-line); border-radius: 7px; background: #fff; color: #30353d; font-size: 13px; }
#appShell #refinePresets.segmented button + button { border-left: 1px solid var(--ws-line); }
#appShell #refinePresets.segmented button:first-child,
#appShell #refinePresets.segmented button:last-child,
#appShell #refinePresets.segmented button.is-active { border-radius: 7px; }
#appShell #refinePresets.segmented button.is-active { border-color: var(--ws-blue); background: var(--ws-blue-soft); color: var(--ws-blue); box-shadow: 0 0 0 1px var(--ws-blue); }
#appShell #refinePresets.segmented button span { display: block; margin: 0; color: #8a919b; font-size: 11px; line-height: 1.25; }
#appShell #refinePresets.segmented button.is-active span { color: #4f78bd; }
#appShell .delivery-disclosure { margin-top: 14px; border-radius: 6px; }
#appShell .studio-submit-bar { position: relative; bottom: auto; z-index: 2; gap: 14px; min-height: 92px; margin: 0; padding: 14px 18px; border-top: 1px solid var(--ws-line); border-radius: 0; background: #fff; color: var(--ws-ink); box-shadow: 0 -8px 22px rgba(24,31,42,.045); }
#appShell .studio-submit-bar span,
#appShell .studio-submit-bar small { color: #8b929c; }
#appShell .studio-submit-bar strong { color: var(--ws-ink); }
#appShell .studio-submit-bar button { min-width: 152px; min-height: 48px; }

/* Works */
#appShell .commercial-view-heading { align-items: flex-end; padding: 8px 0 22px; }
#appShell .commercial-view-heading > div > span { display: none; }
#appShell .commercial-view-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
#appShell .commercial-view-heading p { margin-top: 8px; font-size: 12px; }
#appShell .works-insights { display: none; }
#appShell .works-controls { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 18px; padding: 12px 0; border-top: 1px solid var(--ws-line); border-bottom: 1px solid var(--ws-line); }
#appShell .works-controls label { gap: 5px; color: #747b85; font-size: 9px; }
#appShell .works-controls input,
#appShell .works-controls select { height: 42px; border-radius: 6px; background: #fff; }
#appShell .works-search-field { margin-right: auto; }
#appShell .works-select-button { min-height: 38px; border-radius: 6px; }
#appShell .works-count { font-size: 10px; }
#appShell .works-selection-bar { top: 75px; border-radius: 7px; box-shadow: none; }
#appShell .works-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px 14px; }
#appShell .work-card { overflow: visible; border-radius: 7px; box-shadow: none; }
#appShell .work-image { overflow: hidden; aspect-ratio: 4/3; border-radius: 6px 6px 0 0; background: #eef0f2; }
#appShell .work-image img { object-fit: cover; color: transparent; font-size: 0; }
#appShell :where(.work-image, .task-card-image, .recent-work-card) img.is-broken-thumbnail { opacity: 0; }
#appShell .work-status { top: 9px; right: 9px; padding: 5px 7px; border-radius: 4px; font-size: 9px; }
#appShell .work-select { top: 9px; left: 9px; }
#appShell .work-body { padding: 12px; }
#appShell .work-body h3 { margin: 7px 0; font-size: 14px; }
#appShell .work-body p { font-size: 11px; }
#appShell .work-foot { margin-top: 10px; padding-top: 10px; }
#appShell .work-foot button { color: var(--ws-blue); }
#appShell .batch-work-card { border-radius: 7px; box-shadow: none; }

/* Task kanban */
#appShell .task-board-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 0 22px; }
#appShell .task-board-head h2 { margin: 0; font-size: 28px; letter-spacing: -.04em; }
#appShell .task-board-head p { margin: 8px 0 0; color: var(--ws-muted); font-size: 12px; }
#appShell .task-board-head > div:last-child { display: flex; align-items: center; gap: 14px; }
#appShell .task-board-head > div:last-child span { color: #6f7680; font-size: 10px; }
#appShell .task-board-filters { display: flex; align-items: center; justify-content: space-between; min-height: 54px; border-top: 1px solid var(--ws-line); border-bottom: 1px solid var(--ws-line); }
#appShell .task-board-filters > div { display: flex; align-self: stretch; gap: 26px; }
#appShell .task-board-filters > div button { position: relative; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: #6f7680; font-size: 12px; }
#appShell .task-board-filters > div button.is-active { color: var(--ws-blue); font-weight: 650; }
#appShell .task-board-filters > div button.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--ws-blue); content: ''; }
#appShell .task-board-filters label { display: flex; width: 260px; height: 42px; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--ws-line); border-radius: 6px; }
#appShell .task-board-filters label > svg { width: 16px; height: 16px; fill: none; stroke: #858c96; stroke-width: 1.8; }
#appShell .task-board-filters input { min-width: 0; flex: 1; border: 0; outline: 0; font-size: 12px; }
#appShell .task-kanban { display: grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap: 10px; margin-top: 16px; }
#appShell .task-kanban-column { min-width: 0; min-height: 590px; padding: 10px; border: 1px solid var(--ws-line); border-radius: 7px; background: #fafbfc; }
#appShell .task-kanban-column > header { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 4px 10px; }
#appShell .task-kanban-column > header h3 { margin: 0; font-size: 13px; }
#appShell .task-kanban-column > header span { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #eceff3; color: #727983; font-size: 9px; }
#appShell .task-kanban-column > div { display: grid; align-content: start; gap: 9px; }
#appShell .task-board-card { overflow: hidden; border: 1px solid var(--ws-line); border-radius: 6px; background: #fff; }
#appShell .task-card-main { display: grid; grid-template-columns: 98px 1fr; gap: 12px; width: 100%; padding: 11px; border: 0; background: #fff; text-align: left; }
#appShell .task-card-image { display: grid; overflow: hidden; width: 98px; height: 98px; place-items: center; border-radius: 5px; background: #eef0f2; color: #969ca4; }
#appShell .task-card-image img { width: 100%; height: 100%; object-fit: cover; color: transparent; font-size: 0; }
#appShell .task-card-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
#appShell .task-card-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
#appShell .task-card-copy small { color: #6f7680; font-size: 10px; }
#appShell .task-card-copy em { color: #9aa0a8; font-size: 9px; font-style: normal; }
#appShell .task-card-progress { padding: 0 10px 11px; }
#appShell .task-card-progress > span { display: flex; justify-content: space-between; color: var(--ws-blue); font-size: 9px; }
#appShell .task-card-progress > i { display: block; overflow: hidden; height: 4px; margin-top: 8px; border-radius: 2px; background: #e5eaf2; }
#appShell .task-card-progress > i > b { display: block; height: 100%; background: var(--ws-blue); }
#appShell .task-card-progress .progress-0 { width: 0; }
#appShell .task-card-progress .progress-10 { width: 10%; }
#appShell .task-card-progress .progress-20 { width: 20%; }
#appShell .task-card-progress .progress-30 { width: 30%; }
#appShell .task-card-progress .progress-40 { width: 40%; }
#appShell .task-card-progress .progress-50 { width: 50%; }
#appShell .task-card-progress .progress-60 { width: 60%; }
#appShell .task-card-progress .progress-70 { width: 70%; }
#appShell .task-card-progress .progress-80 { width: 80%; }
#appShell .task-card-progress .progress-90 { width: 90%; }
#appShell .task-card-progress .progress-100 { width: 100%; }
#appShell .task-card-actions,
#appShell .task-card-problem { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-top: 1px solid var(--ws-line); }
#appShell .task-card-actions button,
#appShell .task-card-actions a,
#appShell .task-card-problem button { padding: 0; border: 0; background: transparent; color: var(--ws-blue); font-size: 10px; }
#appShell .task-card-problem span { color: #d14f5d; font-size: 9px; line-height: 1.45; }
#appShell .task-column-empty { margin: 16px 4px; color: #a0a6ae; font-size: 10px; }
#appShell .task-kanban > .empty-state,
#appShell .works-grid > .empty-state { display: grid; min-height: 330px; place-content: center; gap: 7px; border: 1px dashed #dfe4eb; border-radius: 8px; background: #fbfcfd; text-align: center; }
#appShell .task-kanban > .empty-state { grid-column: 1 / -1; }
#appShell .works-grid > .empty-state { grid-column: 1 / -1; }
#appShell .task-kanban:has(> .empty-state),
#appShell .works-grid:has(> .empty-state) { display: block; width: min(100%, 760px); margin: 42px auto 0; }
#appShell .task-kanban:has(> .empty-state) > .empty-state,
#appShell .works-grid:has(> .empty-state) > .empty-state { min-height: 260px; }
#appShell .task-kanban > .empty-state strong,
#appShell .works-grid > .empty-state strong { color: #686f79; font-size: 14px; }
#appShell .task-kanban > .empty-state span,
#appShell .task-kanban > .empty-state p,
#appShell .works-grid > .empty-state span,
#appShell .works-grid > .empty-state p { margin: 0; color: #9aa1ab; font-size: 11px; }
#appShell .empty-state-action { min-height: 42px; margin: 10px auto 0; padding: 0 16px; border: 1px solid var(--ws-blue); border-radius: 6px; background: #fff; color: var(--ws-blue); font-size: 12px; font-weight: 650; }
#appShell .empty-state-icon { width: 40px; height: 40px; margin: 0 auto 5px; padding: 9px; border: 1px solid var(--ws-line); border-radius: 7px; fill: none; stroke: var(--ws-blue); stroke-width: 1.6; }

/* Result */
#appShell #routeResult { padding-top: 0; }
#appShell .result-toolbar { min-height: 76px; padding: 0; border-bottom: 1px solid var(--ws-line); }
#appShell .result-layout { grid-template-columns: minmax(0,1fr) 350px; gap: 0; margin: 0 -36px -64px; }
#appShell .result-viewer,
#appShell .result-meta { border: 0; border-radius: 0; box-shadow: none; }
#appShell .result-viewer { top: 64px; border-right: 1px solid var(--ws-line); }
#appShell .result-tabs { justify-content: flex-end; min-height: 54px; padding: 9px 18px; border-bottom: 1px solid var(--ws-line); }
#appShell .result-tabs button { border: 1px solid var(--ws-line); border-radius: 5px; background: #fff; }
#appShell .result-tabs button.is-active { border-color: var(--ws-blue); background: #fff; color: var(--ws-blue); }
#appShell .result-canvas { min-height: calc(100vh - 195px); background: #f2f3f5; }
#appShell .result-canvas img { max-height: calc(100vh - 230px); padding: 26px; }
#appShell .result-meta { padding: 22px; }
#appShell .result-meta > span { color: #5c6570; }
#appShell .result-meta h2 { font-size: 18px; }
#appShell .result-info,
#appShell .qa-box,
#appShell .result-disclosure-panel { border-radius: 6px; }
#appShell .result-actions { display: grid; gap: 8px; }
#appShell .result-actions .button-dark { order: -1; background: var(--ws-blue); color: #fff; }

/* Credits */
#appShell #routeCredits { max-width: 1460px; margin: auto; }
#appShell .credits-hero { display: grid; grid-template-columns: 1fr 430px; min-height: 148px; padding: 24px 28px; background: #fff; color: var(--ws-ink); }
#appShell .credits-hero > div > span { display: none; }
#appShell .credits-hero h2 { margin: 0; color: var(--ws-ink); font-size: 26px; }
#appShell .credits-hero p { max-width: 640px; margin: 9px 0 0; color: var(--ws-muted); font-size: 12px; }
#appShell .credits-trust { margin-top: 17px; }
#appShell .credits-trust span { border-color: var(--ws-line); background: var(--ws-soft); color: #5f6670; }
#appShell .credits-hero aside { align-content: center; padding-left: 28px; border-left: 1px solid var(--ws-line); border-radius: 0; background: var(--ws-soft); color: var(--ws-ink); }
#appShell .credits-hero aside small { color: #8d949d; }
#appShell .credits-hero aside strong { font-size: 40px; }
#appShell .credits-hero aside button { color: var(--ws-blue); }
#appShell .starter-offer { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-top: 14px; padding: 10px 18px; }
#appShell .starter-offer-copy { display: flex; align-items: baseline; gap: 12px; }
#appShell .starter-offer-copy span { color: var(--ws-blue); }
#appShell .starter-offer-copy h3 { margin: 0; font-size: 13px; }
#appShell .starter-offer-copy p { display: none; }
#appShell .starter-offer-rules { display: flex; align-items: center; gap: 12px; }
#appShell .starter-offer-rules strong,
#appShell .starter-offer-rules span { display: none; }
#appShell .plans-panel,
#appShell .credit-orders { margin-top: 14px; padding: 22px; }
#appShell .panel-card-head h3 { font-size: 18px; }
#appShell .plan-group-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
#appShell .plan-card { min-height: 245px; padding: 20px; border-radius: 7px; box-shadow: none; }
#appShell .plan-card > strong { font-size: 26px; }
#appShell .plan-card button { border-radius: 6px; background: #fff; color: var(--ws-blue); }
#appShell .plan-card:nth-child(2) { border-color: var(--ws-blue); }
#appShell .redeem-form { border-radius: 7px; }
#appShell .credit-order-row { border-radius: 0; }

/* Account and service */
#appShell #routeAccount { max-width: 1460px; margin: auto; }
#appShell .account-overview { display: grid; grid-template-columns: 1.25fr .72fr .9fr; padding: 22px; }
#appShell .account-primary,
#appShell .account-credit,
#appShell .account-sync { min-height: 135px; padding: 8px 22px; border-radius: 0; background: #fff; color: var(--ws-ink); }
#appShell .account-credit,
#appShell .account-sync { border-left: 1px solid var(--ws-line); }
#appShell .large-avatar { background: url('/web/logo.svg') center/cover no-repeat; color: transparent; }
#appShell .account-credit strong { font-size: 32px; }
#appShell .account-credit button { background: var(--ws-blue); color: #fff; }
#appShell .commercial-account-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
#appShell .commercial-account-layout > section { margin: 0; padding: 22px; }
#appShell .referral-center { grid-column: 1 / -1; }
#appShell .referral-code-panel,
#appShell .referral-metrics,
#appShell .referral-actions-grid > form { border-radius: 7px; box-shadow: none; }
#appShell .referral-metrics { grid-template-columns: repeat(4, 1fr); }
#appShell .referral-funnel { overflow-x: auto; }
#appShell .account-service-card { grid-column: 1 / -1; }

/* Support */
#appShell .support-principles article,
#appShell .support-form,
#appShell .ticket-panel,
#appShell .service-contact { border-radius: 8px; box-shadow: none; }

/* Interaction sizing and keyboard clarity */
#appShell :where(.quiet-button, .profile-edit-button, .session-heading button, .session-row button, .account-legal-links button) { min-height: 40px; padding: 0 11px; }
#appShell .phone-activation-actions button { min-height: 40px; }
#appShell #phoneActivationDismiss { width: 40px; min-width: 40px; padding: 0; }
#appShell :where(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 2px; }

/* Unified control system: one baseline, one border language, clear exceptions. */
#appShell :where(
  .workspace-dashboard-head > button,
  .workspace-continue-card header button,
  .workspace-recent-panel header button,
  .workspace-presets header button,
  .tool-back,
  .back-button,
  .works-select-button,
  .empty-state-action,
  .quiet-button,
  .profile-edit-button,
  .session-heading button,
  .session-row button,
  .account-legal-links button,
  #accountBindPhoneButton,
  #refreshOrders,
  #refreshTickets,
  #refreshReferralCenter
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ws-control-gap);
  border-radius: var(--ws-control-radius);
  line-height: 1;
  vertical-align: middle;
}
#appShell :where(
  .workspace-dashboard-head > button,
  .tool-back,
  .back-button,
  .active-task-chip,
  .profile-chip,
  .workspace-continue-card header button,
  .workspace-recent-panel header button,
  .workspace-presets header button
) > svg {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}
#appShell .workspace-dashboard-head > button svg { margin-left: 0; }
#appShell .workspace-continue-card header button,
#appShell .workspace-recent-panel header button,
#appShell .workspace-presets header button { min-height: 36px; padding-inline: 9px; }
#appShell .workspace-last-task b { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; padding: 0 16px; line-height: 1; }

#appShell .source-mode-toggle button,
#appShell .task-board-filters > div button,
#appShell .result-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#appShell .source-mode-toggle button { border-radius: 4px; }
#appShell .segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  line-height: 1;
}
#appShell .segmented button:first-child,
#appShell .segmented button:first-child.is-active { border-radius: var(--ws-control-radius) 0 0 var(--ws-control-radius); }
#appShell .segmented button:not(:first-child):not(:last-child),
#appShell .segmented button:not(:first-child):not(:last-child).is-active { border-radius: 0; }
#appShell .segmented button:last-child,
#appShell .segmented button:last-child.is-active { border-radius: 0 var(--ws-control-radius) var(--ws-control-radius) 0; }

#appShell .works-controls input,
#appShell .works-controls select,
#appShell .task-board-filters label,
#appShell .delivery-controls input,
#appShell .delivery-controls select,
#appShell .redeem-form input,
#appShell .support-form input,
#appShell .support-form select,
#appShell .referral-form input,
#appShell .referral-form select {
  height: var(--ws-control-height);
  border: 1px solid var(--ws-line);
  border-radius: var(--ws-control-radius);
  background: #fff;
}
#appShell .works-select-button { min-height: var(--ws-control-height); padding: 0 13px; border: 1px solid var(--ws-line); background: #fff; }
#appShell .task-board-filters label { padding-inline: 12px; }
#appShell .result-tabs button { min-height: 36px; padding: 0 12px; border-radius: 6px; }
#appShell .quiet-button,
#appShell .profile-edit-button { border: 0; background: transparent; color: #676e78; }
#appShell .quiet-button:hover,
#appShell .profile-edit-button:hover,
#appShell .workspace-continue-card header button:hover,
#appShell .workspace-recent-panel header button:hover,
#appShell .workspace-presets header button:hover { background: var(--ws-soft); color: var(--ws-blue); }
#appShell .session-heading button,
#appShell .session-row button,
#appShell .account-legal-links button { border: 1px solid var(--ws-line); border-radius: var(--ws-control-radius); background: #fff; }
#appShell .credits-hero aside button,
#appShell .plan-card button,
#appShell #accountBindPhoneButton { border-radius: var(--ws-control-radius); line-height: 1; }

/* Readability system: customer-facing copy never relies on miniature UI text. */
#appShell .app-brand small,
#appShell .service-pill small,
#appShell .global-search-heading,
#appShell .credit-chip span { font-size: var(--ws-type-meta); line-height: 1.35; }
#appShell .service-pill strong,
#appShell .profile-chip b { font-size: var(--ws-type-support); }
#appShell .plaza-search kbd,
#appShell .credit-chip i { font-size: 10px; }
#appShell .global-search-result strong { font-size: var(--ws-type-control); }
#appShell .global-search-result small,
#appShell .global-search-empty span { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }

#appShell .workspace-start-main figcaption,
#appShell .workspace-tool-switcher i,
#appShell .workspace-tool-switcher small,
#appShell .workspace-continue-card header button,
#appShell .workspace-recent-panel header button,
#appShell .workspace-presets header button,
#appShell .workspace-last-task em,
#appShell .workspace-last-task small,
#appShell .recent-work-overlay strong,
#appShell .recent-deliveries-empty strong,
#appShell .recent-deliveries-empty span,
#appShell .workspace-presets header p,
#appShell .workspace-presets small { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .workspace-start-main figcaption { line-height: 1; }

#appShell .tool-page-identity > aside span,
#appShell .tool-page-identity > aside small,
#appShell .studio-card-bar > div:first-child span,
#appShell .canvas-assurance > span,
#appShell .control-card-head em,
#appShell .control-label small,
#appShell .gemstone-choice small,
#appShell .material-assurance,
#appShell .preset-assurance,
#appShell .white-shadow-field-head small,
#appShell .delivery-disclosure summary small,
#appShell .delivery-disclosure summary b,
#appShell .delivery-controls label > span,
#appShell .cutout-delivery span,
#appShell .studio-submit-bar span,
#appShell .studio-submit-bar small { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .tool-page-identity > aside strong,
#appShell .source-mode-toggle button,
#appShell .gemstone-choice strong,
#appShell .segmented button,
#appShell .delivery-controls :where(input, select),
#appShell .delivery-disclosure summary strong { font-size: var(--ws-type-control); }
#appShell .source-mode-toggle button small { font-size: var(--ws-type-meta); }
#appShell .studio-card-bar { min-height: 64px; height: auto; }
#appShell .canvas-assurance > span { min-height: 76px; }
#appShell .gemstone-choice { min-height: 64px; }

#appShell .commercial-view-heading p,
#appShell .task-board-head p,
#appShell .works-controls label,
#appShell .works-count,
#appShell .works-controls :where(input, select),
#appShell .works-select-button { font-size: var(--ws-type-control); line-height: 1.35; }
#appShell .work-status,
#appShell .batch-work-state,
#appShell .batch-work-head span,
#appShell .batch-work-thumb > b,
#appShell .batch-work-thumb > em { font-size: var(--ws-type-meta); line-height: 1; }
#appShell .work-select span,
#appShell .batch-work-thumb > label span { gap: 6px; padding: 7px 9px; font-size: var(--ws-type-support); line-height: 1; }
#appShell .work-body h3 { font-size: var(--ws-type-control); line-height: 1.4; }
#appShell .work-body p,
#appShell .work-body > span,
#appShell .work-foot > span,
#appShell .work-foot button,
#appShell .batch-work-head p { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }

#appShell .task-board-head > div:last-child span { font-size: var(--ws-type-support); }
#appShell .task-kanban-column > header h3,
#appShell .task-card-copy strong { font-size: var(--ws-type-control); line-height: 1.4; }
#appShell .task-kanban-column > header span,
#appShell .task-card-copy em,
#appShell .task-card-progress > span { font-size: var(--ws-type-meta); line-height: 1.35; }
#appShell .task-card-copy small,
#appShell .task-card-actions button,
#appShell .task-card-actions a,
#appShell .task-card-problem button,
#appShell .task-column-empty,
#appShell .task-kanban > .empty-state span,
#appShell .task-kanban > .empty-state p,
#appShell .works-grid > .empty-state span,
#appShell .works-grid > .empty-state p { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .task-card-problem span { font-size: var(--ws-type-meta); line-height: 1.55; }
#appShell .task-card-main { grid-template-columns: 104px minmax(0, 1fr); gap: 13px; padding: 12px; }
#appShell .task-card-image { width: 104px; height: 104px; }
#appShell .task-card-copy { gap: 6px; }
#appShell .task-card-progress { padding: 1px 12px 12px; }
#appShell .task-card-actions,
#appShell .task-card-problem { min-height: 42px; padding: 9px 12px; }

#appShell .result-toolbar > div,
#appShell .result-meta > span,
#appShell .result-info span,
#appShell .result-compare-layer span,
#appShell .result-compare > small,
#appShell .result-review-head span,
#appShell .variant-editor-head span { font-size: var(--ws-type-meta); line-height: 1.35; }
#appShell .result-tabs button,
#appShell .result-meta > p,
#appShell .result-info strong,
#appShell .result-review-head strong,
#appShell .result-review-item strong,
#appShell .result-review-item small,
#appShell .result-review-note,
#appShell .result-review-actions .button,
#appShell .result-danger-action,
#appShell .result-delete-action,
#appShell .result-title-row button,
#appShell .result-disclosure-panel > summary small,
#appShell .result-disclosure-panel > summary b { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .result-disclosure-panel > summary strong { font-size: var(--ws-type-control); }

#appShell .credits-hero p,
#appShell .credits-trust span,
#appShell .credits-hero aside small,
#appShell .starter-offer-copy span,
#appShell .starter-offer-rules,
#appShell .panel-card-head span,
#appShell .panel-card-head > small,
#appShell .plan-card span,
#appShell .plan-card small,
#appShell .plan-capacity span,
#appShell .plan-note,
#appShell .redeem-form span,
#appShell .billing-note,
#appShell .credit-order-row,
#appShell .empty-state { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .starter-offer-copy h3,
#appShell .plan-card button,
#appShell .redeem-form :where(input, button) { font-size: var(--ws-type-control); }
#appShell .plan-group-head span,
#appShell .plan-group-head > small,
#appShell .plan-eligibility,
#appShell .plan-capacity-note { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }

#appShell .account-primary span,
#appShell .account-credit > span,
#appShell .account-sync > span,
#appShell .account-service-card span,
#appShell .panel-card-head > div > span,
#appShell .service-contact span,
#appShell .panel-card-head > small,
#appShell .sync-security-grid span,
#appShell .security-support-note,
#appShell .session-heading span,
#appShell .session-row span,
#appShell .account-legal-links,
#appShell .referral-center p,
#appShell .ledger-row span { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .sync-security-grid strong,
#appShell .session-heading strong,
#appShell .session-row strong,
#appShell .ledger-row,
#appShell .profile-edit-button,
#appShell .quiet-button { font-size: var(--ws-type-control); line-height: 1.45; }
#appShell .panel-card-head > small { display: block; }
#appShell .panel-card-actions small,
#appShell .referral-code-panel span,
#appShell .referral-code-panel small,
#appShell .referral-metrics span,
#appShell .referral-form p,
#appShell .referral-form label,
#appShell .referral-form > small,
#appShell .referral-list-row span,
#appShell .referral-list-row small,
#appShell .referral-empty,
#appShell .referral-funnel span { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .referral-form :where(input, select, textarea, button),
#appShell .referral-list-row b,
#appShell .referral-list-row > strong { font-size: var(--ws-type-control); }

#appShell .support-principles strong,
#appShell .ticket-head strong { font-size: var(--ws-type-control); }
#appShell .support-principles p,
#appShell .support-form label,
#appShell .support-form-note,
#appShell .ticket-head span,
#appShell .ticket-list,
#appShell .service-contact p { font-size: var(--ws-type-support); line-height: var(--ws-leading-support); }
#appShell .support-form :where(input, select, textarea) { font-size: var(--ws-type-control); line-height: 1.5; }

@media (min-width: 1600px) {
  #appShell #routeWorkspace .first-use-guide { grid-template-columns: 340px minmax(0,1fr); align-items: stretch; }
  #appShell #routeWorkspace .first-use-guide ol { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  #appShell #routeWorkspace .first-use-guide li { grid-template-columns: 38px minmax(0,1fr); min-height: 92px; align-content: center; }
  #appShell #routeWorkspace .first-use-guide li > b { grid-column: 2; justify-self: start; }
  #appShell .workspace-start-main { min-height: 430px; }
  #appShell .task-kanban { grid-template-columns: repeat(4,minmax(300px,1fr)); justify-content: stretch; gap: 16px; }
  #appShell .commercial-view-heading h2,
  #appShell .task-board-head h2 { font-size: 30px; }
}

@media (min-width: 1800px) {
  #appShell.app-shell-2026 { --ws-sidebar-width: 224px; }
  #appShell .app-topbar { padding-inline: 36px; }
  #appShell .global-search-wrap { width: clamp(460px, 28vw, 620px); }
}

@media (max-width: 1500px) and (min-width: 761px) {
  #appShell .task-card-main { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; }
  #appShell .task-card-image { width: 88px; height: 88px; }
}

@media (max-width: 1220px) {
  #appShell.app-shell-2026 { grid-template-columns: 184px minmax(0,1fr); }
  #appShell .app-sidebar { width: 184px; }
  #appShell .workspace-dashboard-grid { grid-template-columns: minmax(520px,1.35fr) minmax(310px,.8fr); }
  #appShell .workspace-workflow-panel { padding: 20px; }
  #appShell .workspace-workflow-card { grid-template-columns: 112px minmax(0,1fr); }
  #appShell .workspace-workflow-copy { padding: 15px 14px 13px; }
  #appShell .workspace-start-main { grid-template-columns: 44% 56%; }
  #appShell .workspace-last-task { grid-template-columns: 105px 1fr; }
  #appShell .workspace-last-task > img { width: 105px; }
  #appShell .works-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #appShell .task-kanban { overflow-x: auto; grid-template-columns: repeat(4, 280px); padding-bottom: 8px; }
  #appShell .plan-group-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 1120px) {
  #appShell.app-shell-2026 { grid-template-columns: 78px minmax(0,1fr); }
  #appShell .app-sidebar { width: 78px; padding-inline: 9px; }
  #appShell .app-brand { justify-content: center; padding-inline: 0; }
  #appShell .app-brand span,
  #appShell .app-nav-item b,
  #appShell .service-pill span,
  #appShell .sidebar-mini-actions { display: none; }
  #appShell .app-nav-item { justify-content: center; padding: 0; }
  #appShell .service-pill { justify-content: center; }
  #appShell .workspace-dashboard-grid { grid-template-columns: 1fr; }
  #appShell .workspace-dashboard-side { grid-template-columns: 1fr 1fr; }
  #appShell .workspace-workflow-panel { padding: 24px; }
  #appShell .workspace-workflow-card { grid-template-columns: minmax(130px,34%) minmax(0,1fr); }
  #appShell .studio-grid { display: block; min-height: 0; }
  #appShell .studio-visual-column { display: grid; position: static; }
  #appShell .studio-canvas-card { min-height: 0; border-right: 0; }
  #appShell .studio-upload-zone,
  #appShell .studio-upload-zone .upload-idle { min-height: 500px; }
  #appShell .studio-upload-zone .upload-preview { height: 500px; }
  #appShell .studio-status-grid { border-right: 0; }
  #appShell .studio-control-card { position: static; display: block; overflow: visible; height: auto; max-height: none; padding: 26px; border-top: 1px solid var(--ws-line); }
  #appShell .studio-control-scroll { overflow: visible; padding: 0; }
  #appShell .studio-control-card .control-card-head { margin: -26px -26px 0; padding: 22px 26px 18px; }
  #appShell .tool-back { left: 26px; }
}

@media (max-width: 760px) {
  #appShell.app-shell-2026 { display: block; min-height: 100vh; padding: 0; }
  #appShell .app-sidebar { position: fixed; z-index: 60; inset: auto 0 0; display: block; width: 100%; height: 66px; padding: 6px 8px; border-top: 1px solid var(--ws-line); border-right: 0; background: rgba(255,255,255,.98); backdrop-filter: blur(14px); }
  #appShell .app-brand,
  #appShell .app-nav-divider,
  #appShell .sidebar-foot { display: none !important; }
  #appShell .app-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin: 0; }
  #appShell .app-nav-item { display: grid; grid-template-columns: 1fr; grid-template-rows: 24px 16px; align-content: center; justify-items: center; gap: 2px; min-height: 52px; padding: 3px; border-radius: 6px; }
  #appShell .app-nav-item[data-route="tasks"],
  #appShell .app-nav-item[data-route="credits"] { display: none !important; }
  #appShell .app-nav-item[data-route="account"] { display: grid !important; }
  #appShell .app-nav-item .app-nav-icon { display: block; width: 19px; height: 19px; }
  #appShell .app-nav-item b { display: block; font-size: 11px; line-height: 15px; }
  #appShell .app-main { padding-bottom: 72px; }
  #appShell .app-topbar { height: 62px; padding: 0 14px; }
  #appShell .app-topbar::before { width: 118px; padding-left: 34px; background: url('/web/logo.svg') left center / 28px 28px no-repeat; content: '光感引擎'; color: #191c22; font-size: 15px; font-weight: 700; white-space: nowrap; }
  #appShell .global-search-wrap,
  #appShell .active-task-chip,
  #appShell .notification-button,
  #appShell .profile-chip { display: none; }
  #appShell .credit-chip { min-width: 44px; height: 38px; margin-left: auto; padding: 0; place-items: center; border: 1px solid var(--ws-line); border-radius: var(--ws-control-radius); box-shadow: none; }
  #appShell .credit-chip span,
  #appShell .credit-chip i { display: none; }
  #appShell .credit-chip strong { font-size: 15px; }
  #appShell .app-view { padding: 22px 15px 34px; }
  #appShell .phone-activation-banner { width: auto; max-width: none; margin: 10px 15px 0; }
  #appShell .phone-activation-actions button,
  #appShell #phoneActivationDismiss { min-height: 44px; }
  #appShell #phoneActivationDismiss { width: 44px; min-width: 44px; }
  #appShell #routeWorkspace .first-use-guide { grid-template-columns: 1fr; }
  #appShell .workspace-dashboard-head { align-items: flex-start; }
  #appShell .workspace-dashboard-head h2 { font-size: 25px; }
  #appShell .workspace-dashboard-head p { font-size: 12px; }
  #appShell .workspace-dashboard-kicker { margin-bottom: 6px; font-size: 10px; }
  #appShell .workspace-dashboard-head > button { display: none; }
  #appShell .workspace-continue-card header button,
  #appShell .workspace-recent-panel header button,
  #appShell .workspace-presets header button { min-height: 44px; }
  #appShell .workspace-start-main { grid-template-columns: 1fr 1fr; min-height: 260px; }
  #appShell .workspace-upload-entry { padding: 18px 10px; }
  #appShell .workspace-upload-entry strong { font-size: 14px; }
  #appShell .workspace-upload-entry small { font-size: 11px; line-height: 1.55; }
  #appShell .workspace-upload-entry em { min-width: 112px; margin-top: 15px; }
  #appShell .workspace-tool-switcher { grid-template-columns: repeat(2,1fr); }
  #appShell .workspace-tool-switcher button:nth-child(3),
  #appShell .workspace-tool-switcher button:nth-child(4) { border-top: 1px solid var(--ws-line); }
  #appShell .workspace-tool-switcher button:nth-child(3) { border-left: 0; }
  #appShell .workspace-dashboard-side { grid-template-columns: 1fr; }
  #appShell .workspace-workflow-panel { padding: 17px; }
  #appShell .workspace-workflow-head { display: grid; gap: 8px; }
  #appShell .workspace-workflow-head h3 { font-size: 19px; }
  #appShell .workspace-workflow-head p { font-size: 12px; }
  #appShell .workspace-workflow-total { padding: 0; }
  #appShell .workspace-workflow-filters { margin: 15px -2px 0; }
  #appShell .workspace-workflow-filters button { min-height: 40px; }
  #appShell .workspace-workflow-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  #appShell .workspace-workflow-card { grid-template-columns: 118px minmax(0,1fr); min-height: 164px; }
  #appShell .workspace-workflow-copy { padding: 14px 13px 12px; }
  #appShell .workspace-workflow-copy > strong { font-size: 16px; }
  #appShell .workspace-workflow-description { font-size: 11px; }
  #appShell .workspace-last-task { grid-template-columns: 92px 1fr; }
  #appShell .workspace-last-task > img { width: 92px; height: 104px; }
  #appShell .workspace-presets > div { grid-template-columns: 1fr; }
  #appShell .workspace-presets header p { display: none; }
  #appShell #routeTool { padding: 0; }
  #appShell .tool-page-head { padding: 0 14px; }
  #appShell .tool-back { position: static; display: inline-flex; min-height: 44px; margin-top: 12px; transform: none; }
  #appShell .source-mode-toggle button { min-height: 44px; }
  #appShell .tool-page-identity { min-height: 66px; padding-left: 0; }
  #appShell .tool-page-identity > aside { display: none; }
  #appShell .studio-grid { display: block; min-height: 0; }
  #appShell .studio-canvas-card { min-height: 0; border-right: 0; }
  #appShell .studio-upload-zone,
  #appShell .studio-upload-zone .upload-idle { min-height: 420px; }
  #appShell .studio-upload-zone .upload-preview { height: 420px; }
  #appShell .canvas-assurance { display: none; }
  #appShell .studio-control-card { position: static; display: block; overflow: visible; height: auto; max-height: none; padding: 20px 15px 90px; border-top: 1px solid var(--ws-line); }
  #appShell .studio-control-card .control-card-head { margin: -20px -15px 0; padding: 15px; }
  #appShell .studio-control-scroll { overflow: visible; padding: 0; }
  #appShell .studio-submit-bar { position: fixed; z-index: 50; right: 0; bottom: 66px; left: 0; margin: 0; padding: 10px 14px; box-shadow: 0 -6px 20px rgba(20,25,35,.08); }
  #appShell #routeTool .studio-submit-bar > div > span { font-size: var(--ws-type-support); }
  #appShell .studio-submit-bar small { display: none; }
  #appShell .commercial-view-heading h2,
  #appShell .task-board-head h2 { font-size: 24px; }
  #appShell #routeWorks .commercial-view-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; }
  #appShell #routeWorks .commercial-view-heading > button { align-self: start; }
  #appShell .works-controls { display: grid; grid-template-columns: 1fr 1fr; }
  #appShell .works-controls input,
  #appShell .works-controls select,
  #appShell .works-select-button { height: 44px; min-height: 44px; }
  #appShell .works-search-field { grid-column: 1 / -1; margin: 0; }
  #appShell .works-select-button,
  #appShell #worksCount { display: none; }
  #appShell .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 8px; }
  #appShell .work-body { padding: 10px; }
  #appShell #routeWorks .work-status { font-size: var(--ws-type-meta); }
  #appShell .work-body > span,
  #appShell .work-foot > span { display: none; }
  #appShell .task-board-head { align-items: flex-start; }
  #appShell .task-board-head > div:last-child span { display: none; }
  #appShell .task-board-filters { display: grid; gap: 10px; padding: 10px 0; }
  #appShell .task-board-filters > div { gap: 18px; overflow-x: auto; min-height: 38px; }
  #appShell .task-board-filters > div button { min-width: 44px; min-height: 44px; flex: 0 0 auto; }
  #appShell .task-board-filters label { width: 100%; height: 44px; }
  #appShell .task-kanban { grid-template-columns: 1fr; overflow: visible; }
  #appShell .task-kanban-column { min-height: 0; }
  #appShell .result-layout { display: block; margin: 0 -15px -34px; }
  #appShell .result-viewer { position: static; border-right: 0; }
  #appShell .result-canvas { min-height: 430px; }
  #appShell .result-canvas img { max-height: 430px; padding: 12px; }
  #appShell .result-meta { padding-bottom: 96px; }
  #appShell .credits-hero { grid-template-columns: 1fr; padding: 20px; }
  #appShell .credits-hero h2 { font-size: 22px; }
  #appShell .credits-hero aside { margin-top: 18px; padding: 18px 0 0; border-top: 1px solid var(--ws-line); border-left: 0; }
  #appShell .credits-hero aside button,
  #appShell .starter-offer-rules a { display: flex; min-height: 44px; align-items: center; }
  #appShell .starter-offer { align-items: flex-start; flex-direction: column; gap: 8px; }
  #appShell .starter-offer-copy { display: grid; }
  #appShell .plan-group-grid { grid-template-columns: 1fr; }
  #appShell .account-overview { grid-template-columns: 1fr; }
  #appShell .account-primary,
  #appShell .account-credit,
  #appShell .account-sync { padding: 17px 0; }
  #appShell .account-credit,
  #appShell .account-sync { border-top: 1px solid var(--ws-line); border-left: 0; }
  #appShell .commercial-account-layout { grid-template-columns: 1fr; }
  #appShell .referral-center,
  #appShell .account-service-card { grid-column: auto; }
  #appShell .referral-metrics { grid-template-columns: 1fr 1fr; }
  #appShell .empty-state-action,
  #appShell .profile-edit-button,
  #appShell .session-heading button,
  #appShell .session-row button,
  #appShell .account-legal-links button,
  #appShell #accountUid,
  #appShell #accountBindPhoneButton,
  #appShell .quiet-button { min-height: 44px; }
  #appShell #accountUid { padding-inline: 8px; }
}