/* Legacy overlays retain the board's existing actions, with reachable dismissal. */
.workspace-legacy-modal { padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left)); }
.workspace-legacy-modal > div { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.workspace-modal-dismiss { position: sticky; top: -24px; z-index: var(--layer-stack-5); display: flex; justify-content: flex-end; margin: -12px -12px 0; padding: var(--space-3); background: var(--ws-bg); border-bottom: 1px solid var(--ws-line); }
.workspace-modal-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--ws-line); border-radius: 10px; background: var(--ws-soft); color: var(--ws-ink); font-size: 26px; line-height: 1; }
.workspace-modal-close:hover { background: var(--state-active-bg); color: var(--state-active-fg); }
/* Membership modal: one scroll container, everything in normal flow (no pinned footer to cover content). */
html body #tierModal > .pricing-modal-shell { position: relative; width: min(1040px, calc(100vw - 32px)) !important; max-width: none !important; max-height: min(880px, calc(100dvh - 32px)); padding: var(--space-6); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#tierModal > div { background: var(--ws-bg); color: var(--ws-ink); }
#tierModal .pricing-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
#tierModal .pricing-modal-head h3 { margin: 0; }
#tierModal .pricing-modal-head p { margin: var(--space-1) 0 0; }
#tierModal .pricing-modal-close { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ws-muted); cursor: pointer; }
#tierModal .pricing-modal-close:hover { background: var(--state-active-bg); color: var(--ws-ink); }
html body #tierModal .pricing-modal-close { min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--ws-muted) !important; box-shadow: none !important; }
html body #tierModal .pricing-modal-close:hover { background: var(--state-active-bg) !important; color: var(--ws-ink) !important; }
#tierModal .pricing-modal-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
#tierModal .pricing-cycle { position: static; width: fit-content; margin: 0; box-shadow: none; }
#tierModal .tier-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--space-4) !important; align-items: stretch; }
/* Subgrid shares the six card rows (head, price, ¥, positioning, action, benefits) so every action button starts at the same height. */
#tierModal .tier-plan-grid > .pricing-plan { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; min-height: 0; padding: var(--space-5); border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-bg); color: var(--ws-ink); }
#tierModal .tier-plan-grid > .pricing-plan > .pricing-action { align-self: start; margin-top: 0; }
#tierModal .pricing-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 34px; }
#tierModal .pricing-plan-title h2 { margin: 0; font-size: 20px; }
#tierModal .pricing-amount { margin: var(--space-5) 0 var(--space-1); color: var(--ws-ink); font-size: 32px; font-weight: 780; line-height: 1.15; letter-spacing: -.035em; }
#tierModal .pricing-rmb { color: var(--ws-muted); font-size: 12px; }
#tierModal .pricing-positioning { margin: var(--space-4) 0 var(--space-4); color: var(--ws-muted); font-size: 13px; }
#tierModal .pricing-action { display: flex; align-items: center; justify-content: center; min-height: 42px; width: 100%; border-radius: 8px; font-size: 13px; font-weight: 750; cursor: pointer; }
html body #tierModal .pricing-plan .pricing-action.primary { border: 1px solid var(--btn-primary-border) !important; background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; font-weight: 700 !important; }
html body #tierModal .pricing-plan .pricing-action.primary:hover { opacity: .88; }
html body #tierModal .pricing-recommended { align-self: flex-start; padding: var(--space-1) var(--space-2); border: 1px solid var(--n-600); border-radius: 999px; color: var(--ws-ink); font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
#tierModal .pricing-action.secondary { border: 1px solid var(--ws-line); background: var(--ws-bg); color: var(--ws-ink); }
#tierModal .pricing-action:disabled { cursor: default; opacity: .6; }
#tierModal .pricing-modal-footer { display: grid; justify-items: center; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--ws-line); }
#tierModal .tier-code-row { display: flex; gap: var(--space-2); width: 100%; }
#tierModal .tier-code-row input { flex: 1 1 auto; }
html body #tierModal .tier-code-submit { flex: 0 0 auto; min-height: 36px; padding: 0 var(--space-4) !important; border: 1px solid var(--ws-line) !important; border-radius: 8px !important; background: var(--ws-bg) !important; color: var(--ws-ink) !important; font: 700 12px/1.4 var(--font-ui) !important; white-space: nowrap; cursor: pointer; }
html body #tierModal .tier-code-submit:hover { background: var(--state-active-bg) !important; }
html body #tierModal :is(.pricing-text-link, .pricing-continue-free, .entitlements-link) { display: block; width: auto; max-width: 100%; min-height: 32px; margin: 0; padding: var(--space-1) var(--space-2) !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; font: 600 12px/1.5 var(--font-ui) !important; white-space: normal !important; text-align: center; cursor: pointer; }
html body #tierModal #tierAccountLogin { margin: 0; }
html body #tierModal #tierAccountLogin .pricing-text-link { display: inline-block; }
html body #tierModal .pricing-text-link { color: var(--ws-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
html body #tierModal .pricing-continue-free { color: var(--ws-muted) !important; font-size: 13px !important; }
html body #tierModal .entitlements-link { margin: var(--space-1) auto 0; color: var(--ws-ink) !important; font-size: 13px !important; text-decoration: underline; text-underline-offset: 3px; }
html body #tierModal :is(.pricing-text-link, .pricing-continue-free, .entitlements-link):hover { background: var(--state-active-bg) !important; color: var(--ws-ink) !important; }
#tierModal .pricing-plan.is-recommended { border-color: var(--n-600); box-shadow: inset 0 0 0 1px var(--n-600); }
#tierModal .pricing-benefits { gap: var(--space-3); margin-top: var(--space-5); }
#tierModal .pricing-benefit-group { gap: var(--space-2); }
#tierModal .pricing-benefit-group ul { gap: var(--space-2); }
@media (min-width: 761px) {
  #tierModal .pricing-benefits { grid-template-columns: 1fr !important; gap: var(--space-3); font-size: 11px; }
  #tierModal .pricing-benefit-group { min-width: 0; }
  #tierModal .pricing-benefit-group ul { gap: var(--space-1); }
}
#tierModal .tier-price-suffix { display: block; margin-top: var(--space-1); }
#tierModal [id^="tierBill"] { min-height: 44px; }
#tierModal input { min-width: 0; }
#tierModal .pricing-benefits { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; color: var(--ws-muted); font-size: 12px; }
#tierModal .pricing-benefit-group { display: grid; gap: var(--space-2); }
#tierModal .pricing-benefit-group-title { margin: 0; color: var(--ws-muted); font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
#tierModal .pricing-benefit-group ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
#tierModal .pricing-benefits { grid-template-columns: 1fr !important; }
#tierModal .pricing-benefit-group li { display: flex; gap: var(--space-2); align-items: flex-start; }
#tierModal .pricing-benefit-copy { display: flex; flex: 1 1 auto; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
#tierModal .pricing-benefit-label { display: block; flex: 0 0 auto; min-width: max-content; color: var(--ws-muted); white-space: nowrap; }
#tierModal .pricing-benefit-value { display: block; flex: 1 1 auto; min-width: 0; max-width: none; color: var(--ws-ink); overflow-wrap: anywhere; word-break: keep-all; text-align: right; }
#tierModal .pricing-benefit-copy strong { font-weight: 760 !important; }
#tierModal .pricing-allowance { padding-bottom: var(--space-1); border-bottom: 1px solid var(--ws-line); }
/* When a card is too narrow for "name … value" on one line, put the name on its own line and the whole value left-aligned below. */
#tierModal .pricing-benefits { container: plan-benefits / inline-size; align-content: start; }
#tierModal .pricing-benefit-group, #tierModal .pricing-benefit-group ul { align-content: start; }
@container plan-benefits (max-width: 360px) {
  #tierModal .pricing-benefit-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  #tierModal .pricing-benefit-value { text-align: left; overflow-wrap: normal; word-break: normal; }
}
#exportCardPro > div > div:first-child { flex-wrap: wrap; gap: var(--space-2); }
#exportCardPro [data-pricing-copy="tier_pro_price"] { display: block; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  #tierModal > div { padding: var(--space-4); }
  html body #tierModal > .pricing-modal-shell { width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px); padding: var(--space-4); }
  #tierModal .tier-code-row { flex-direction: column; }
  html body #tierModal .tier-code-submit { width: 100%; min-height: 44px; }
  #tierModal .tier-plan-grid { grid-template-columns: 1fr !important; }
  #tierModal .pricing-benefit-copy { display: grid; grid-template-columns: 1fr; gap: var(--space-1); }
  #tierModal .pricing-benefit-value { text-align: left; }
  #tierModal .workspace-modal-dismiss { top: -16px; margin: -8px -8px 0; padding: var(--space-2); }
  #tierModal .btn-creem-onetime { text-align: left; min-height: 44px; }
  #tierModal .btn-creem-onetime .entitlements-creem-summary { overflow-wrap: anywhere; }
  #tierModal .grid.grid-cols-2:has(.btn-creem-onetime) { grid-template-columns: 1fr; }
}
body:not(.theme-light) #tierModal .grid.grid-cols-3 > div { background: var(--ws-soft); border-color: var(--ws-line); }
body:not(.theme-light) #tierModal [class*="text-slate-"] { color: var(--ws-muted); }
body:not(.theme-light) #tierModal .font-bold[class*="text-slate-"] { color: var(--ws-ink); }
body:not(.theme-light) #tierModal input { background: var(--ws-soft); color: var(--ws-ink); border-color: var(--ws-line); }
html body:not(.theme-light) #tierModal .pricing-plan { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
html body:not(.theme-light) #tierModal .pricing-plan .pricing-benefit-label,
html body:not(.theme-light) #tierModal .pricing-plan .pricing-benefit-group-title { color: var(--muted) !important; }
html body:not(.theme-light) #tierModal .pricing-plan .pricing-benefit-value,
html body:not(.theme-light) #tierModal .pricing-plan .pricing-amount,
html body:not(.theme-light) #tierModal .pricing-plan .pricing-plan-title h2 { color: var(--ink) !important; }

/* Anchored export panel: one compact surface on desktop, bottom sheet on phones. */
#exportModal.export-popover { position: fixed; inset: auto; z-index: var(--layer-stack-80); width: 320px; max-width: calc(100vw - 24px); }
#exportModal.export-popover.hidden { display: none; }
#exportModal.export-popover .export-panel { padding: var(--space-4); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-panel); }
#exportModal.export-popover .export-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
#exportModal.export-popover .export-panel-header h2 { margin: 0; font-size: 15px; line-height: 1.3; }
#exportModal.export-popover .export-panel-header p { margin: var(--space-1) 0 0; color: var(--muted); font-size: 12px; }
#exportModal.export-popover .export-panel-close { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
#exportModal.export-popover .export-panel-close:hover { background: var(--surface-soft); color: var(--ink); }
#exportModal.export-popover .export-panel-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
body.theme-light #exportModal #btnCloseExportModal { background: transparent !important; background-color: transparent !important; border-color: transparent !important; color: var(--ink) !important; }
html body #exportModal.export-popover #btnCloseExportModal.export-panel-close { background: transparent !important; background-color: transparent !important; border-color: transparent !important; }
html body.theme-light #exportModal.export-popover #btnCloseExportModal.export-panel-close { color: var(--ink) !important; }
#exportModal.export-popover .export-field { display: grid; gap: var(--space-2); margin-top: var(--space-3); color: var(--muted); font-size: 12px; font-weight: 650; }
#exportModal.export-popover .export-select { position: relative; }
#exportModal.export-popover .export-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: var(--space-2) var(--space-2); border: 1px solid var(--color-border-strong) !important; border-radius: 8px; background: var(--surface) !important; color: var(--ink) !important; font: inherit; text-align: left; cursor: pointer; }
html body #exportModal.export-popover .export-select-trigger { border: 1px solid var(--color-border-strong) !important; background: var(--surface) !important; color: var(--ink) !important; }
html body #exportModal.export-popover #exportFormatButton,
html body #exportModal.export-popover #exportPageRangeButton { border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--ink) !important; }
html body #exportModal.export-popover #exportFormatButton *,
html body #exportModal.export-popover #exportPageRangeButton * { color: var(--ink) !important; stroke: currentColor; }
#exportModal.export-popover .export-select-trigger:focus-visible, #exportModal.export-popover .export-select-menu [role="option"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#exportModal.export-popover .export-select-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
#exportModal.export-popover .export-select-menu { position: absolute; z-index: var(--layer-stack-4); right: 0; left: 0; top: calc(100% + 4px); display: grid; max-height: 220px; overflow-y: auto; padding: var(--space-1); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-panel); }
html body #exportModal.export-popover .export-select-menu { border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--ink) !important; }
#exportModal.export-popover .export-select-menu[hidden] { display: none; }
#exportModal.export-popover .export-select-menu [role="option"] { width: 100%; padding: var(--space-2); border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
html body #exportModal.export-popover .export-select-menu [role="option"] { border: 0 !important; background: transparent !important; color: var(--ink) !important; }
html body #exportModal.export-popover #exportFormatMenu [role="option"],
html body #exportModal.export-popover #exportPageRangeMenu [role="option"] { border: 0 !important; background: transparent !important; color: var(--ink) !important; }
#exportModal.export-popover .export-select-menu [role="option"]:hover, #exportModal.export-popover .export-select-menu [role="option"][aria-selected="true"] { background: var(--surface-soft); }
#exportModal.export-popover .export-size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
#exportModal.export-popover .export-size-option { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 36px; padding: var(--space-1) var(--space-1); border: 1px solid var(--line); border-radius: 8px; background: var(--surface) !important; color: var(--ink) !important; font: 650 11px var(--font-ui); cursor: pointer; }
#exportModal.export-popover .export-size-option.is-on { border-color: var(--btn-primary-bg) !important; background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; box-shadow: none; }
#exportModal.export-popover .export-size-option.is-locked:not(.is-on) { background: var(--surface) !important; color: var(--muted) !important; }
html body #exportModal.export-popover button.export-size-option:not(.is-on) { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
html body #exportModal.export-popover button.export-size-option.is-locked:not(.is-on) { background: var(--surface) !important; color: var(--muted) !important; }
html body #exportModal.export-popover button.export-size-option.is-on { background: var(--surface-soft) !important; color: var(--ink) !important; border-color: var(--line) !important; }
body.theme-light #exportModal #exportResOptions button.export-size-option:not(.is-on) { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
body.theme-light #exportModal #exportResOptions button.export-size-option.is-locked:not(.is-on) { background: var(--surface) !important; color: var(--muted) !important; }
body.theme-light #exportModal #exportResOptions button.export-size-option.is-on { background: var(--surface-soft) !important; color: var(--ink) !important; border-color: var(--line) !important; }
#exportModal.export-popover .export-size-option[data-need="pro"], #exportModal.export-popover .export-size-option[data-need="max"] { position: relative; }
#exportModal.export-popover .size-lock { display: inline-flex; color: currentColor; }
#exportModal.export-popover .size-lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
#exportModal.export-popover .switch-lock { color: var(--muted); font-size: 9px; }
#exportModal.export-popover .export-switch { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); color: var(--ink); font-size: 12px; }
#exportModal.export-popover .export-switch input { accent-color: var(--btn-primary-bg); }
#exportModal.export-popover .export-upgrade-hint { margin: var(--space-2) 0 0; padding: 0; background: transparent; color: var(--muted); font-size: 11px; }
#exportModal.export-popover .export-upgrade-hint button { color: var(--ink); }
#exportModal.export-popover .export-upgrade-hint button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 750; text-decoration: underline; cursor: pointer; }
html body #exportModal.export-popover .export-upgrade-hint button#exportUpgradeLink { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ink) !important; }
#exportModal.export-popover .export-watermark-note { margin: var(--space-2) 0 0; color: var(--muted); font-size: 11px; }
#exportModal.export-popover .export-download { width: 100%; min-height: 40px; margin-top: var(--space-3); border: 1px solid var(--btn-primary-border); border-radius: 8px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font: 750 13px var(--font-ui); cursor: pointer; }
#exportModal.export-popover .export-download:hover { opacity: .88; }
@media (max-width: 640px) {
  #exportModal.export-popover { position: fixed; left: 0 !important; right: 0 !important; bottom: 0; top: auto !important; width: 100%; max-width: none; }
  #exportModal.export-popover .export-panel { border-radius: 16px 16px 0 0; padding: var(--space-4) max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-bottom)); }
}
.entitlements-dialog > button { position: sticky; top: 0; background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: 10px; z-index: var(--layer-stack-2); }
/* Retired activation/cycle controls must stay hidden even when a legacy row
   has a more specific flex/grid display declaration. */
#tierModal [hidden] { display: none !important; }