@font-face { font-family:"SX Display"; src:url("fonts/noto-serif-tc-700.woff2") format("woff2"); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:"SX Text"; src:url("fonts/noto-sans-tc-400.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"SX Text"; src:url("fonts/noto-sans-tc-500.woff2") format("woff2"); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:"SX Text"; src:url("fonts/noto-sans-tc-700.woff2") format("woff2"); font-style:normal; font-weight:700; font-display:swap; }

:root {
  color-scheme:light;
  font:400 16px/var(--ys-leading) var(--font-text);
  color:var(--text);
  background:var(--ground);
  font-synthesis:none;
  text-rendering:optimizeLegibility
}

* {
  box-sizing:border-box;
  border-radius:var(--radius-square)
}
html {
  scroll-padding-bottom:var(--space-8)
}
body {
  margin:0;
  min-width:320px;
  font-family:var(--font-text);
  font-size:var(--ys-text-body);
  line-height:var(--ys-leading);
  background:var(--ground);
  overflow-x:clip
}
button,input,a {
  font:inherit
}
button,a {
  color:inherit
}
button {
  cursor:pointer
}
a {
  text-decoration:none;
  color:var(--text)
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid var(--line-strong);
  outline-offset:3px
}
.top-stripe {
  height:0;
  background:none
}
.brand span:before {
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:var(--space-2);
  vertical-align:1px;
  border-radius:var(--radius-round);
  background:var(--mod-shengxin)
}
.topbar {
  min-height:66px;
  max-width:960px;
  margin:auto;
  padding:var(--space-2) var(--space-4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  border-bottom:1px solid var(--line)
}
.brand {
  min-height:44px;
  color:var(--text);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-1) var(--space-3);
  font-weight:700
}
.brand span {
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700
}
.brand small {
  font-size:13px;
  font-weight:400;
  color:var(--text-muted)
}
.identity {
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--text);
  min-height:40px;
  padding:var(--space-1) var(--space-3);
  font-size:13px;
  white-space:nowrap
}
main {
  width:min(936px,calc(100% - 32px));
  margin:0 auto
}
.demo-note {
  margin:var(--space-2) 0;
  color:var(--text-muted);
  text-align:right;
  font-size:12px
}
.dock {
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-1);
  padding:var(--space-1) 0 var(--space-2)
}
.dock-tools {
  min-height:44px;
  height:auto;
  gap:var(--space-2);
  display:flex;
  align-items:center
}
#dock-hint {
  margin:0;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.4
}
.filter-chip {
  min-height:44px;
  padding:var(--space-1) var(--space-3);
  border:1px solid var(--line-strong);
  color:var(--text-muted);
  background:var(--surface);
  font-size:13px
}
.filter-chip[aria-pressed=true] {
  border-color:var(--line-strong);
  color:var(--text)
}
.module-tile {
  position:relative;
  min-width:0;
  min-height:91px;
  padding:var(--space-1) 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:var(--space-1);
  border:0;
  border-top:2px solid var(--module-color,var(--mod-pending));
  background:transparent;
  color:var(--text-muted);
  font-weight:400
}
.module-tile:hover {
  background:var(--surface)
}
.module-tile[aria-pressed=true] {
  background:var(--surface);
  outline:1px solid var(--line)
}
.module-tile[data-module=haorenhaoshi],.module-tile[data-module=youdi] {
  --module-icon-color:var(--mod-pending)
}
.module-tile[data-module=shengxin] {
  --module-color:var(--mod-shengxin)
}
.icon-box {
  position:relative;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text)
}
.module-tile.is-off .icon-box {
  color:var(--text-muted)
}
.module-tile svg {
  width:23px;
  height:23px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.module-tile.is-off .lock-glyph {
  width:14px;
  height:14px;
  position:absolute;
  right:-2px;
  bottom:-1px;
  padding:var(--space-1);
  background:var(--surface)
}
.module-name {
  display:block;
  width:100%;
  font-size:12px;
  line-height:1.25;
  color:var(--text);
  font-weight:700;
  white-space:nowrap;
  text-align:center
}
.module-tile.is-off .module-name {
  color:var(--text-muted);
  font-weight:400
}
.module-status {
  color:var(--text-muted);
  font-size:12px;
  line-height:1.2;
  white-space:nowrap
}
.status-tag {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-round);
  color:var(--text-muted);
  font-size:13px;
  line-height:1.3;
  font-weight:500
}
.status-glyph {
  width:12px;
  height:12px;
  border:1px solid currentColor;
  border-radius:var(--radius-round);
  display:inline-block;
  flex:none
}
.status-tag[data-state=available] .status-glyph {
  background:var(--brass);
  border-color:var(--brass)
}
.status-tag[data-state=pilot] .status-glyph {
  background:linear-gradient(90deg,var(--text-muted) 75%,transparent 75%)
}
.status-tag[data-state=beta] .status-glyph {
  background:linear-gradient(90deg,var(--text-muted) 50%,transparent 50%)
}
.status-tag[data-state=development] .status-glyph {
  background:linear-gradient(90deg,var(--text-muted) 25%,transparent 25%)
}
.status-tag[data-state=planned] .status-glyph {
  background:transparent
}
.count-badge {
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  padding:0 var(--space-1);
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line-strong);
  font-size:11px;
  font-weight:700
}
.help {
  padding:var(--space-2) 0 var(--space-3);
  border-top:1px solid var(--line)
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:var(--font-display);
  font-weight:700
}
h1 {
  margin:0;
  font-size:24px;
  line-height:1.35
}
h1 span {
  display:inline
}
.help-lead,.help-conclusion {
  margin:var(--space-1) 0;
  color:var(--text-muted);
  font-size:14px
}
.help ol {
  margin:var(--space-1) 0 0;
  padding-inline-start:var(--space-5);
  font-size:13px
}
.help li {
  padding-block:var(--space-1)
}
.picture-help {
  color:var(--text);
  font-size:13px
}
.picture-help summary {
  min-height:44px;
  display:flex;
  align-items:center;
  cursor:pointer
}
.picture-help svg {
  display:block;
  width:min(360px,100%);
  height:auto;
  margin:0 0 var(--space-2)
}
.view-tabs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--line)
}
.view-tabs button {
  min-width:0;
  min-height:46px;
  padding:var(--space-1) var(--space-1);
  color:var(--text-muted);
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  font-size:14px;
  font-weight:500
}
.view-tabs button[aria-pressed=true] {
  color:var(--text);
  border-bottom-color:var(--line-strong)
}
.view-tabs span {
  font-weight:400
}
.work-area {
  padding-top:var(--space-2)
}
#work-list {
  display:flex;
  flex-direction:column;
  gap:var(--space-2)
}
.work-item {
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:0 var(--space-2);
  padding:var(--space-2) var(--space-2);
  background:var(--surface);
  border:1px solid var(--line);
  min-width:0
}
.work-item[data-module] {
  border-top:2px solid var(--mod-pending)
}
.work-item[data-module=youshu] {
  border-top-color:var(--mod-youshu)
}
.work-item[data-module=haorenhaoshi] {
  border-top-color:var(--mod-pending)
}
.work-item[data-module=yougongshi] {
  border-top-color:var(--mod-yougongshi)
}
.work-item[data-module=haoshangliang] {
  border-top-color:var(--mod-haoshangliang)
}
.work-item[data-module=youdi] {
  border-top-color:var(--mod-pending)
}
.work-item:has(.select-box) {
  grid-template-columns:44px minmax(0,1fr)
}
.work-item:not(:has(.select-box)) {
  grid-template-columns:minmax(0,1fr)
}
.work-item:not(:has(.select-box))>div,.work-item:not(:has(.select-box))>p {
  grid-column:1
}
.select-box {
  grid-column:1;
  grid-row:1 / span 4;
  width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  align-self:start
}
.select-box input,.select-all input,.switch-option input {
  appearance:none;
  position:relative;
  display:block;
  flex:none;
  width:44px;
  min-width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer
}
.select-box input:before,.select-all input:before,.switch-option input:before {
  content:"";
  position:absolute;
  inset:12px;
  border:2px solid var(--line-strong);
  background:var(--surface)
}
.select-box input:checked:before,.select-all input:checked:before,.switch-option input:checked:before {
  border-color:var(--text);
  background:var(--text)
}
.select-box input:checked:after,.select-all input:checked:after,.switch-option input:checked:after {
  content:"";
  position:absolute;
  left:20px;
  top:15px;
  width:5px;
  height:10px;
  border:solid var(--surface);
  border-width:0 2px 2px 0;
  transform:rotate(45deg)
}
.select-box input:indeterminate:after,.select-all input:indeterminate:after,.switch-option input:indeterminate:after {
  content:"";
  position:absolute;
  left:17px;
  top:21px;
  width:10px;
  border-top:2px solid var(--text)
}
.item-meta {
  grid-column:2;
  grid-row:1;
  min-height:24px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-1) var(--space-2);
  min-width:0;
  font:13px/1.7 var(--font-mono);
  color:var(--text-muted)
}
.item-meta time {
  white-space:nowrap
}
.agent-tag,.suggestion {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  min-height:22px;
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--line);
  color:var(--text-muted);
  font-size:12px;
  line-height:1.25;
  overflow-wrap:anywhere
}
.amount {
  margin-left:auto;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  white-space:nowrap
}
.item-title-row {
  grid-column:2;
  grid-row:2;
  min-width:0;
  display:flex;
  align-items:start;
  gap:var(--space-1)
}
.item-title-row h3 {
  margin:0;
  font-size:16px;
  line-height:1.4;
  overflow-wrap:anywhere
}
.status-chip {
  grid-column:2;
  grid-row:3;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0 var(--space-2);
  min-height:34px;
  min-width:0
}
.suggestion {
  flex-shrink:0;
  text-wrap:balance
}
.detail-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:var(--space-1) 0 var(--space-1) var(--space-2);
  border:0;
  background:transparent;
  color:var(--text);
  font-size:13px;
  white-space:nowrap
}
.basis {
  grid-column:2;
  color:var(--text-muted);
  font-size:12px;
  margin:var(--space-1) 0 0;
  overflow-wrap:anywhere
}
.footprint,.decline-reason {
  grid-column:2;
  color:var(--text-muted);
  font-size:12px;
  margin:var(--space-1) 0 0;
  overflow-wrap:anywhere
}
.empty-state {
  padding:var(--space-4) var(--space-1);
  color:var(--text-muted)
}
.empty-state h2 {
  margin:0 0 var(--space-1);
  color:var(--text);
  font-size:18px
}
.empty-state p {
  margin:0
}
#module-page-link {
  display:flex;
  align-items:center;
  width:fit-content;
  min-height:44px;
  margin:var(--space-1) 0;
  gap:var(--space-2);
  color:var(--text-muted)
}
.batch-region {
  position:relative
}
body:has(#batch-bar:not([hidden])) {
  padding-bottom:var(--space-8)
}
.batch-bar {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  z-index:2;
  min-height:66px;
  width:min(936px,calc(100% - 16px));
  margin:0 auto;
  padding:var(--space-1) var(--space-2);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:44px;
  align-items:center;
  gap:0 var(--space-2);
  background:var(--surface);
  border-top:1px solid var(--line)
}
.batch-bar[hidden] {
  display:none
}
.select-all {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  min-height:44px;
  flex:none;
  font-size:13px
}
#selection-count {
  margin:0;
  min-width:0;
  color:var(--text-muted);
  font-size:14px
}
.primary {
  min-height:44px;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--brass);
  color:var(--on-brass);
  background:var(--brass);
  font-weight:700;
  font-size:14px;
  white-space:nowrap
}
.primary:hover:not(:disabled) {
  background:var(--brass-soft)
}
.primary:disabled {
  color:var(--text-muted);
  background:var(--surface);
  border-color:var(--line);
  opacity:1;
  cursor:not-allowed
}
[hidden] {
  display:none!important
}
footer {
  max-width:960px;
  margin:var(--space-3) auto 0;
  padding:var(--space-1) var(--space-4) var(--space-4);
  border-top:1px solid var(--line);
  color:var(--text-muted);
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-1) var(--space-4)
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1) var(--space-2)
}
.footer-links a,.footer-links button {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:var(--space-1);
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:13px
}
/* Keep application announcements in the active modal without moving its content. */
#plan-status {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
#toast {
  position:fixed;
  top:var(--space-8);
  right:var(--space-4);
  z-index:5;
  pointer-events:none;
  max-width:min(420px,calc(100% - 32px));
  padding:var(--space-2) var(--space-4);
  background:var(--text);
  color:var(--surface);
  font-size:13px
}
#toast[hidden] {
  display:none
}
dialog {
  width:min(500px,calc(100% - 28px));
  max-height:min(88dvh,760px);
  overflow:auto;
  padding:var(--space-5) var(--space-5) var(--space-5);
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:none
}
dialog:focus-within {
  box-shadow:var(--lift)
}
dialog::backdrop {
  background:var(--ys-backdrop)
}
dialog[open] {
  animation:sheet-in var(--duration-step) var(--ease-out)
}
@keyframes sheet-in {
  from {
  opacity:0;
  transform:translateY(10px)
}
to {
  opacity:1;
  transform:translateY(0)
}

}
.close {
  position:absolute;
  top:9px;
  right:10px;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:var(--text-muted);
  font-size:26px
}
.close:focus-visible {
  outline-offset:-2px
}
dialog h2 {
  margin:var(--space-2) 0;
  font-size:23px
}
dialog h3 {
  margin:var(--space-4) 0 var(--space-1);
  font-size:16px
}
dialog p {
  margin:var(--space-2) 0
}
.plan-copy {
  color:var(--text-muted)
}
.plan-list {
  padding-left:var(--space-5)
}
.plan-list li {
  margin:var(--space-1) 0
}
.plans {
  margin-top:var(--space-4);
  padding-top:var(--space-2);
  border-top:1px solid var(--line)
}
.prices {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2)
}
.prices p {
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  margin:0;
  font-size:13px
}
.prices strong {
  font-size:14px
}
.plan-actions,.detail-actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-4)
}
.light-button,.plain-button {
  min-height:44px;
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--line-strong);
  color:var(--text);
  background:var(--surface)
}
.detail-actions .primary {
  flex:1;
  white-space:normal
}
.plan-actions .primary {
  flex:1
}
.plan-actions {
  position:sticky;
  bottom:0;
  padding-block:var(--space-2);
  background:var(--surface)
}
.confirmation {
  padding-block:var(--space-5) var(--space-1)
}
.confirmation p {
  margin-top:var(--space-3)
}
.switch-list {
  display:grid;
  gap:var(--space-1);
  margin-top:var(--space-3)
}
.switch-option {
  min-height:48px;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  border-bottom:1px solid var(--line)
}

@media(min-width:700px) {
  .topbar {
  padding-inline:var(--space-4)
}
.brand {
  gap:var(--space-3)
}
.module-tile {
  min-height:105px
}
.icon-box {
  width:52px;
  height:52px
}
.module-name {
  font-size:14px
}
.module-status {
  font-size:12px
}
.item-meta {
  grid-column:2;
  grid-row:1
}
.item-title-row {
  grid-column:2;
  grid-row:2
}
.status-chip {
  grid-column:2;
  grid-row:3
}

}

@media(min-width:900px) {
  .brand {
  flex-direction:row
}
#plan-dialog {
  margin-inline:auto 7vw
}
#detail-dialog {
  inset:0 0 0 auto;
  width:min(460px,94vw);
  height:100dvh;
  max-height:none;
  margin:0;
  border-radius:0;
  box-shadow:none
}
#detail-dialog:focus-within {
  box-shadow:var(--lift)
}

}

@media(min-width:960px) {
  #work-list {
  gap:0;
  border:1px solid var(--line);
  overflow:hidden
}
.work-item {
  grid-template-columns:44px 60px max-content minmax(150px,1fr) max-content max-content 72px;
  align-items:center;
  gap:var(--space-1) var(--space-2);
  padding:var(--space-1) var(--space-2);
  border:0;
  border-bottom:1px solid var(--line);
  border-top:2px solid var(--mod-pending)
}
.work-item:last-child {
  border-bottom:0
}
.work-item:not(:has(.select-box)) {
  grid-template-columns:60px max-content minmax(150px,1fr) max-content 72px
}
.work-item:not(:has(.select-box)) .item-meta {
  grid-column:1
}
.work-item:not(:has(.select-box)) .item-title-row h3 {
  grid-column:3
}
.work-item:not(:has(.select-box)) .status-chip {
  grid-column:4
}
.work-item:not(:has(.select-box)) .basis {
  grid-column:3/-1
}
.item-meta,.item-title-row,.status-chip {
  display:contents
}
.select-box {
  grid-column:1;
  grid-row:1
}
.item-meta time {
  grid-column:2;
  grid-row:1;
  white-space:nowrap
}
.agent-tag {
  grid-column:3;
  grid-row:1
}
.item-title-row h3 {
  grid-column:4;
  grid-row:1
}
.suggestion,.footprint,.decline-reason {
  grid-column:5;
  grid-row:1
}
.amount {
  grid-column:6;
  grid-row:1;
  margin:0
}
.detail-link {
  grid-column:7;
  grid-row:1
}
.basis {
  grid-column:4/-1;
  grid-row:2;
  margin:0 0 var(--space-1)
}

}

@media(max-width:699px) {
  main {
  width:calc(100% - 24px)
}
.topbar {
  min-height:62px;
  padding-inline:var(--space-3)
}
.brand {
  flex-direction:column;
  gap:0;
  line-height:1.25
}
.brand span {
  font-size:16px
}
.brand small {
  font-size:12px
}
.identity {
  min-height:38px;
  padding:var(--space-1) var(--space-2);
  font-size:12px
}
.demo-note {
  margin-block:var(--space-1)
}
.dock {
  padding-top:0;
  gap:var(--space-1)
}
.module-tile {
  min-height:84px;
  gap:var(--space-1)
}
.icon-box {
  width:44px;
  height:44px
}
.module-name {
  font-size:12px;
  letter-spacing:0
}
.module-status {
  font-size:12px
}
h1 {
  font-size:22px
}
h1 span:first-child {
  display:block;
  white-space:nowrap
}
h1 span:nth-child(2) {
  white-space:nowrap
}
.help.is-filtered h1 span {
  display:inline;
  white-space:normal
}
.help-lead,.help-conclusion {
  font-size:13px;
  line-height:1.5
}
.help ol {
  padding-inline-start:var(--space-4);
  font-size:12px;
  line-height:1.45
}
.picture-help summary {
  min-height:44px
}
.work-item {
  padding:var(--space-1) var(--space-2);
  grid-template-columns:44px minmax(0,1fr)
}
.work-item:not(:has(.select-box)) {
  grid-template-columns:minmax(0,1fr)
}
.work-item:not(:has(.select-box))>div,.work-item:not(:has(.select-box))>p {
  grid-column:1
}
.item-meta {
  gap:var(--space-1) var(--space-1);
  font-size:12px
}
.agent-tag,.suggestion {
  font-size:12px;
  padding-inline:var(--space-1)
}
.item-title-row h3 {
  font-size:14px
}
.status-chip {
  min-height:34px
}
.batch-bar {
  width:calc(100% - 16px);
  gap:0 var(--space-1);
  padding-inline:var(--space-2)
}
.primary {
  padding-inline:var(--space-2);
  font-size:13px
}
footer {
  margin-top:var(--space-2);
  padding-inline:var(--space-3)
}
.footer-links {
  gap:0 var(--space-1)
}
dialog {
  position:fixed;
  inset:auto 0 0;
  width:100%;
  max-width:none;
  max-height:88dvh;
  margin:0;
  padding:var(--space-6) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom));
  border-radius:0;
  border-bottom:0
}
#detail-dialog {
  height:auto
}
dialog#settings-dialog {
  max-height:75dvh
}

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  scroll-behavior:auto!important;
  transition:none!important
}

}

.module-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 var(--space-4)
}
#business-description {
  overflow-wrap:anywhere
}
#plan-body:has(.plan-actions) #business-description {
  padding-bottom:calc(var(--space-7) + env(safe-area-inset-bottom))
}
.edition-switch {
  display:flex;
  gap:var(--space-2);
  margin-block:var(--space-4)
}
.edition-switch button {
  flex:1
}
.edition-switch [aria-pressed=true] {
  background:var(--surface);
  border-width:2px;
  font-weight:700
}
.description-protection {
  margin-top:var(--space-4);
  border-block:1px solid var(--line)
}
.description-protection summary {
  min-height:44px;
  padding-block:var(--space-2);
  cursor:pointer;
  font-weight:700
}
.protection-count {
  display:inline-block;
  padding-inline:var(--space-2);
  border:1px solid var(--line);
  color:var(--text-muted)
}
.role-columns {
  display:flex;
  gap:var(--space-4)
}
#business-description dt {
  margin-top:var(--space-3);
  font-weight:700
}
#business-description dd {
  margin:0
}
.description-table {
  width:100%;
  border-collapse:collapse
}
.description-table thead {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.description-table tr {
  display:block;
  padding-block:var(--space-3);
  border-bottom:1px solid var(--line)
}
.description-table td {
  display:block;
  padding-block:var(--space-1)
}
.description-table td:before {
  content:attr(data-label);
  display:block;
  color:var(--text-muted);
  font-weight:700
}

#note-entry {
  margin:0 0 var(--space-3)
}
#note-form {
  padding:var(--space-4);
  border:1px solid var(--line);
  background:var(--surface);
  margin-bottom:var(--space-3)
}
#note-form h2 {
  font-size:18px;
  margin:0 0 var(--space-3)
}
#note-form label,.detail-actions label {
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
  width:100%;
  margin-bottom:var(--space-3);
  font-size:14px
}
textarea,select,input[type=date],input[type=text] {
  box-sizing:border-box;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:44px;
  padding:var(--space-2);
  border:1px solid var(--line-strong);
  font:inherit;
  color:var(--text);
  background:var(--ground)
}
textarea {
  resize:vertical
}
textarea:focus-visible,select:focus-visible {
  outline:3px solid var(--line-strong);
  outline-offset:2px
}
.collection-switch {
  display:flex;
  gap:var(--space-2);
  padding:0 0 var(--space-4)
}
.collection-switch [aria-pressed=true] {
  background:var(--surface);
  border-width:2px
}
.note-summary {
  grid-column:2;
  margin:var(--space-1) 0;
  font-size:12px;
  color:var(--text-muted);
  overflow-wrap:anywhere
}
.colleague-group {
  padding:var(--space-3);
  border:1px solid var(--line);
  margin-bottom:var(--space-2)
}
.colleague-group h3 {
  margin:0;
  font-size:16px
}
.person-counts {
  margin:var(--space-1) 0 var(--space-3);
  color:var(--text-muted);
  font-size:13px
}
.colleague-group .work-item {
  margin-top:var(--space-2)
}
.timeline {
  margin:var(--space-3) 0 0;
  padding:0;
  list-style:none;
  font:400 13px/1.7 var(--font-mono)
}
.timeline li {
  display:grid;
  grid-template-columns:minmax(150px,auto) minmax(64px,max-content) minmax(0,1fr);
  gap:var(--space-2);
  padding:var(--space-2) 0;
  border-top:1px solid var(--line);
  overflow-wrap:anywhere
}
.timeline time {
  color:var(--text-muted);
  white-space:normal
}
.timeline strong {
  font-weight:500
}
.timeline p {
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:inherit
}
.timeline small {
  grid-column:3;
  color:var(--text-muted);
  overflow-wrap:anywhere
}
.role-marker {
  display:inline-grid;
  place-items:center;
  width:1.2em;
  height:1.2em;
  color:var(--text-muted);
  font-family:var(--font-text);
  font-size:13px
}
.timeline .role-marker[data-actor=agent] {
  border:1px solid var(--line-strong);
  font-size:0;
  width:9px;
  height:9px
}
.timeline .role-marker[data-actor=person] {
  font-size:0;
  width:9px;
  height:9px;
  border-radius:var(--radius-round);
  background:var(--text-muted)
}
.record-card {
  display:block!important;
  position:relative;
  width:100%;
  padding:var(--space-4);
  background:var(--surface);
  border:1px solid var(--line);
  border-top:2px solid var(--module-color,var(--mod-pending));
  min-width:0
}
.record-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-2);
  margin-bottom:var(--space-2)
}
.record-head h3 {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  margin:0;
  font-size:22px;
  line-height:1.4;
  overflow-wrap:anywhere
}
.record-head .demo-tag {
  margin-left:auto
}
.record-head h3 {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  margin:0;
  font-size:22px;
  line-height:1.4;
  overflow-wrap:anywhere
}
.record-meta,.record-status {
  color:var(--text-muted);
  font:400 13px/1.7 var(--font-mono)
}
.record-state {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-round);
  font:500 13px/1.3 var(--font-text);
  color:var(--text-muted)
}
.record-card .timeline li {
  grid-template-columns:minmax(105px,auto) minmax(55px,max-content) minmax(0,1fr)
}
.demo-tag {
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--line);
  color:var(--text-muted);
  font:500 13px/1.3 var(--font-text);
  white-space:nowrap
}
.tracking-list {
  display:flex;
  flex-direction:column;
  gap:var(--space-3)
}
#line-dialog {
  padding-top:var(--space-7)
}
#line-count,#line-feedback {
  font-size:13px
}
.line-actions {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  padding:var(--space-3) 0 calc(var(--space-1) + env(safe-area-inset-bottom))
}
.line-actions button {
  white-space:normal
}

@media(max-width:600px) {
  .timeline li,.record-card .timeline li {
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-1)
}
.timeline small {
  grid-column:1
}
.record-card {
  padding:var(--space-3)
}
.record-head h3 {
  font-size:19px
}

}


body:has(dialog[open]) #batch-submit {
  border-color:var(--line-strong);
  background:var(--surface);
  color:var(--text)
}


/* Dense workbench cards retain the brand hierarchy at every width. */
.work-item  {
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:0 var(--space-2);
  padding:var(--space-4);
  border:1px solid var(--line);
  border-top:2px solid var(--module-color)
}

.item-meta,.item-title-row,.status-chip  {
  display:flex;
  grid-column:2;
  grid-row:auto;
  flex-wrap:wrap
}

.item-title-row {
  margin-block:var(--space-2)
}

.basis,.footprint,.decline-reason,.note-summary,.work-item>.timeline {
  grid-column:2;
  grid-row:auto
}

.work-item:not(:has(.select-box)) {
  grid-template-columns:minmax(0,1fr)
}

.work-item:not(:has(.select-box)) .item-meta,.work-item:not(:has(.select-box)) .item-title-row,.work-item:not(:has(.select-box)) .status-chip,.work-item:not(:has(.select-box)) .basis,.work-item:not(:has(.select-box))>.timeline {
  grid-column:1;
  display:flex
}

.work-item:not(:has(.select-box)) .item-title-row h3 {
  grid-column:auto
}

.item-meta time,.agent-tag,.item-title-row h3,.suggestion,.footprint,.decline-reason,.amount,.detail-link {
  grid-column:auto;
  grid-row:auto
}

.select-box {
  grid-row:1 / span 5
}
.status-chip {
  justify-content:flex-start;
  gap:var(--space-2)
}

.decision-actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2)
}

.decision-line {
  font:13px/1.7 var(--font-mono);
  margin:0
}

#work-list {
  gap:var(--space-3);
  border:0;
  overflow:visible
}


.module-tile[data-module=haorenhaoshi],.module-tile[data-module=youdi] {
  border-top-color:var(--line-strong)
}

.record-card[data-module=haorenhaoshi],.record-card[data-module=youdi] {
  border-top-color:var(--line-strong)
}

.subscription-status {
  font-size:12px;
  color:var(--text-muted)
}

.status-tag {
  padding-inline:var(--space-1);
  font-size:12px
}

.timeline li,.record-card .timeline li {
  grid-template-columns:16px minmax(90px,auto) minmax(55px,auto) minmax(0,1fr)
}

.timeline li>.role-marker {
  grid-column:1
}
.timeline li>time {
  grid-column:2
}
.timeline li>strong {
  grid-column:3
}
.timeline li>p {
  grid-column:4
}
.timeline li>small {
  grid-column:2/-1
}

.footprint,.agent-tag,.identity {
  font-family:var(--font-mono)
}

.brand small {
  font-family:var(--font-latin)
}

#tracking-area {
  padding-block:var(--space-4)
}

#tracking-area h2 {
  margin-bottom:var(--space-2)
}

@media(max-width:699px) {
  .timeline li,.record-card .timeline li {
  grid-template-columns:16px minmax(0,1fr)
}
.timeline li>time,.timeline li>strong,.timeline li>p,.timeline li>small {
  grid-column:2
}
.timeline li>.role-marker {
  grid-row:1 / span 3
}
.work-item {
  padding:var(--space-3)
}
main {
  width:calc(100% - 32px)
}

}


@media(max-width:360px) {
  .status-tag {
  font-size:11px;
  padding-inline:var(--space-1);
  gap:0
}

}


/* The conclusion leads each workbench card; supporting trace follows it. */
.work-item .item-title-row{grid-row:1}.work-item .item-meta{grid-row:2}.work-item .status-chip{grid-row:3}
textarea[readonly]{resize:none;border-style:dashed;background:var(--surface);cursor:default}

.brand small{font-family:var(--font-text)}.latin-word{font:600 15px/1.3 var(--font-latin);font-style:normal}

.work-item .item-title-row h3::before,.basis::before{content:'□ ';font-family:var(--font-text);font-weight:400;color:var(--text-muted)}
.timeline li{scroll-margin-block:var(--space-2)}

.brand>span{white-space:pre}

/* P5B: the Agent owns its marker; Chinese action text uses the reading face. */
.work-item .item-title-row h3::before,.basis::before { content:none }
.agent-tag,.footprint,.decision-line,.identity { font-family:var(--font-text) }
.agent-tag .role-marker { color:var(--text);font:400 13px/1.7 var(--font-text) }
.footprint time,.trace-who,.text-fingerprint { font-family:var(--font-mono) }
.flow-entries { display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block:var(--space-4) }
.flow-entries #note-entry { margin:0 }
.subscription-mark { font-family:var(--font-text) }
.notice-demo { font-family:var(--font-text);color:var(--text-muted);margin-block:var(--space-3) }
.timeline { font:400 13px/1.7 var(--font-text) }
.timeline li,.record-card .timeline li {
  display:grid;grid-template-columns:13px max-content max-content minmax(0,1fr);
  gap:var(--space-2);align-items:baseline;margin-block:var(--space-2);padding:0;
}
.timeline li>.role-marker { grid-column:1;grid-row:1;color:var(--text);font:400 13px/1.7 var(--font-text) }
.timeline li>time { grid-column:2;grid-row:1;font:400 13px/1.7 var(--font-mono);white-space:nowrap;color:var(--text-muted) }
.timeline li>.trace-who { grid-column:3;grid-row:1;font:400 13px/1.7 var(--font-mono);white-space:nowrap;color:var(--text) }
.timeline li>.trace-action { grid-column:4;grid-row:1;font:400 13px/1.7 var(--font-text);min-width:0;overflow-wrap:anywhere;color:var(--text) }
.timeline li>.trace-text,.timeline li>.same-as-draft,.timeline li>.send-metadata {
  grid-column:2/-1;grid-row:auto;font:400 14px/1.85 var(--font-text);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:var(--text);
}
.text-fingerprint { font-size:12px;color:var(--text-muted) }
.timeline li>.send-metadata { color:var(--text-muted);font-size:13px }
@media(max-width:699px) {
  .timeline li,.record-card .timeline li { grid-template-columns:13px max-content minmax(0,1fr) }
  .timeline li>.trace-action { grid-column:2/-1;grid-row:2 }
  .timeline li>.role-marker { grid-row:1 }
  .timeline li>.trace-who { grid-column:3 }
}
/* Exclusive rows are sheets: an S edge, open baseline, and whitespace. */
.brand-tabs {
  display:flex;align-items:flex-end;gap:0;min-width:0;max-width:100%;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;
  isolation:isolate;padding:var(--space-2) 0 var(--space-1);border:0;
}
.brand-tabs[hidden] { display:none }
.brand-tabs::-webkit-scrollbar { display:none }
.brand-tabs::after { content:'';flex:1 0 var(--space-4);height:1px;background:var(--line-strong) }
.brand-tabs button {
  position:relative;display:inline-flex;align-items:center;flex:0 0 auto;
  min-height:var(--space-7);padding:0 var(--space-4) 0 var(--space-6);gap:var(--space-1);
  border:0;border-radius:var(--radius-square);background:transparent;color:var(--text-muted);
  scroll-snap-align:start;white-space:nowrap;transition:color var(--duration-press);
}
.brand-tabs button::after { content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--line-strong);opacity:1 }
.brand-tabs button[aria-pressed=true] { color:var(--text);background:transparent;box-shadow:none;border:0 }
.brand-tabs button[aria-pressed=true]::after { opacity:0 }
.brand-tabs button:hover,.brand-tabs button:active { color:var(--text);background:transparent;border-color:transparent;transform:none }
.brand-tabs button:focus-visible { outline:2px solid var(--text);outline-offset:-4px }
.brand-tabs span { background:transparent;color:inherit }
.tab-edge { position:absolute;left:0;bottom:0;width:32px;height:48px;overflow:visible;pointer-events:none }
.tab-edge-line { fill:none;stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke }
.tab-edge-shadow { fill:none;stroke:var(--shadow-tab);stroke-width:var(--shadow-tab-width);transform:translateX(var(--shadow-tab-offset));filter:blur(var(--shadow-tab-blur));opacity:0 }
.brand-tabs button[aria-pressed=true] .tab-edge-shadow { opacity:1 }
@media(max-width:420px) { .view-tabs.brand-tabs button { min-width:40% } }
.text-fingerprint { font-family:var(--font-text) }
.text-fingerprint code { font-family:var(--font-mono) }
.amount { font-family:var(--font-text) }
/* Keep the native date picker and keyboard input; paint the same display format. */
.date-control { display:block;position:relative }
.date-control input::-webkit-datetime-edit { opacity:0 }
#note-due-display { position:absolute;inset-inline-start:var(--space-3);top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--font-text);color:var(--text) }
.date-control input { color:transparent }

/* P6: keep a card's three actions together, including at phone width. */
.card-actions { display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-2);max-width:100% }
.card-actions .decision-actions { flex-wrap:nowrap }
.card-actions button { flex-shrink:0;white-space:nowrap }
#line-length-hint { font-weight:700;text-decoration:underline;text-underline-offset:3px }
#line-position { font-weight:500;color:var(--text) }

/* P7: writing and sheets have their own primary action. */
body:has(dialog[open]) #batch-bar,
body:has(#note-area:not([hidden])) #batch-bar { display:none; }
.module-legend { color:var(--text-muted); font-size:13px; margin:0; flex-shrink:0; white-space:nowrap; }
.plan-actions .application-demo { flex-basis:100%; margin:0; font-size:13px; }

/* Scripted reading focus must not resemble an input field. */
#help-title:focus { outline:none }