.ct-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr) 21rem; gap: 1.25rem; align-items: start; padding-bottom: 6rem; }
.ct-page { min-width: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.ct-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.ct-side__title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; color: var(--sh-text-primary); }
.ct-side__title .sh-icon { width: 15px; height: 15px; align-self: center; color: var(--sh-text-tertiary); }
.ct-appview .sh-segmented { margin-bottom: 0.75rem; }

.ct-muted { color: var(--sh-text-tertiary); }
.ct-sm { font-size: 0.8125rem; }
.ct-xs { font-size: 0.71875rem; }
.ct-grow { flex: 1; }
.ct-nowrap { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
.ct-strike { text-decoration: line-through; }
.ct-bad { color: var(--sh-red-text); }
.ct-h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--sh-text-primary); }
.ct-head { display: flex; align-items: center; gap: 0.875rem; }
.ct-card-head { display: flex; align-items: baseline; gap: 0.625rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--sh-border); }
.ct-toolbar { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ct-toolbar > * { min-width: 15rem; }
.ct-history__details { white-space: pre-wrap; font-size: 0.78125rem; color: var(--sh-text-secondary); }

.ct-glyph { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; font-weight: 600; font-size: 0.8125rem; }
.ct-glyph .pricing-icon__glyph { width: 16px; height: 16px; }
.ct-glyph--category { background: var(--sh-accent-subtle); color: var(--sh-accent-text); }
.ct-glyph--type { width: 24px; height: 24px; border-radius: 6px; font-size: 0.75rem; background: var(--sh-bg-sunken); color: var(--sh-text-secondary); border: 1px solid var(--sh-border); }
.ct-glyph--root { background: var(--sh-bg-sunken); color: var(--sh-text-secondary); border: 1px solid var(--sh-border); }
.ct-glyph--root .sh-icon { width: 15px; height: 15px; }
.ct-glyph--lg { width: 44px; height: 44px; border-radius: 11px; font-size: 1.125rem; }
.ct-glyph--lg .pricing-icon__glyph { width: 22px; height: 22px; }

.ct-list { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ct-list__rows { display: flex; flex-direction: column; gap: 1px; }
.ct-list__row { display: flex; align-items: center; gap: 2px; border-radius: var(--sh-radius-md); }
.ct-list__row--type { padding-left: 1rem; }
.ct-list__row.is-active { background: var(--sh-bg-surface); box-shadow: inset 3px 0 0 var(--sh-accent), 0 0 0 1px var(--sh-border); }
.ct-list__row.is-hidden .ct-list__name { color: var(--sh-text-tertiary); }
.ct-list__caret { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border: 0; border-radius: 6px; background: transparent; color: var(--sh-text-tertiary); cursor: pointer; }
.ct-list__caret:hover { background: var(--sh-hover); color: var(--sh-text-primary); }
.ct-list__caret .sh-icon { width: 14px; height: 14px; }
.ct-list__caret--none { cursor: default; }
.ct-list__btn { display: flex; align-items: center; gap: 0.5625rem; flex: 1; min-width: 0; padding: 0.4375rem 0.5rem; border-radius: var(--sh-radius-md); color: var(--sh-text-primary); text-decoration: none; }
.ct-list__btn:hover { background: var(--sh-hover); }
.ct-list__btn:focus-visible, .ct-list__caret:focus-visible { outline: 2px solid var(--sh-focus-ring); outline-offset: -2px; }
.ct-list__main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ct-list__name { overflow: hidden; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ct-list__meta { overflow: hidden; font-size: 0.6875rem; color: var(--sh-text-tertiary); white-space: nowrap; text-overflow: ellipsis; }
.ct-list__end { display: inline-flex; align-items: center; gap: 0.3rem; }
.ct-list__empty { padding: 0.5rem; margin: 0; font-size: 0.8125rem; }
.ct-vis--comingsoon { color: var(--sh-amber-text); font-weight: 600; }
.ct-vis--hidden { color: var(--sh-text-tertiary); font-weight: 600; }

.ct-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ct-dot--draft { background: var(--sh-accent); }
.ct-dot--warning { background: var(--sh-amber-text); }
.ct-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 0.6875rem; white-space: nowrap; background: var(--sh-bg-sunken); color: var(--sh-text-tertiary); }
.ct-tag--own { background: var(--sh-accent-subtle); color: var(--sh-accent-text); }
.ct-badge { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; margin-right: 0.375rem; border-radius: 6px; font-size: 0.6875rem; font-weight: 700; vertical-align: middle; background: var(--sh-accent-subtle); color: var(--sh-accent-text); }

.ct-guide { display: flex; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: var(--sh-radius-lg); border: 1px solid var(--sh-amber-border); background: var(--sh-amber-bg); color: var(--sh-text-primary); font-size: 0.8125rem; }
.ct-guide--danger { border-color: var(--sh-red-border); background: var(--sh-red-bg); }
.ct-guide > .sh-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--sh-amber-text); }
.ct-guide > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.ct-guide__item { display: flex; align-items: center; gap: 0.375rem; padding: 3px 0; border: 0; background: transparent; font: inherit; font-size: 0.8125rem; color: var(--sh-text-secondary); text-align: left; cursor: pointer; }
.ct-guide__item:hover { color: var(--sh-text-primary); text-decoration: underline; }
.ct-guide__item .sh-icon { width: 13px; height: 13px; }
.ct-guide__block { padding: 0 6px; border-radius: 4px; font-size: 0.65625rem; font-weight: 600; background: var(--sh-red-chip, var(--sh-red-bg)); color: var(--sh-red-text); }

.ct-block { padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.ct-block__title { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; font-size: 0.875rem; font-weight: 600; color: var(--sh-text-primary); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ct-chips--sm .ct-chip { padding: 4px 9px; font-size: 0.78125rem; }
.ct-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 7px 11px; border-radius: var(--sh-radius-md); border: 1px solid var(--sh-border); background: var(--sh-bg-surface); color: var(--sh-text-secondary); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.ct-chip b { color: var(--sh-text-primary); font-weight: 600; }
.ct-chip:hover { border-color: var(--sh-border-strong); }
.ct-chip.is-open { border-color: var(--sh-accent); box-shadow: 0 0 0 1px var(--sh-accent); }
.ct-chip.is-own { border-color: var(--sh-accent-border, var(--sh-accent)); }
.ct-chip--quiet { border-style: dashed; color: var(--sh-text-tertiary); }
.ct-chip .sh-icon { width: 13px; height: 13px; color: var(--sh-text-tertiary); }
.ct-icon-btn { display: inline-grid; place-items: center; padding: 3px; border: 0; border-radius: 5px; background: transparent; color: var(--sh-text-tertiary); cursor: pointer; vertical-align: middle; }
.ct-icon-btn:hover:not(:disabled) { background: var(--sh-hover); color: var(--sh-text-primary); }
.ct-icon-btn:disabled { cursor: default; opacity: 0.5; }
.ct-icon-btn .sh-icon { width: 13px; height: 13px; }

.ct-editor { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 0.75rem; border-top: 1px solid var(--sh-border); }
.ct-editor__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; }
.ct-radio { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.84375rem; color: var(--sh-text-primary); }
.ct-radio label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.ct-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ct-sentence { display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin: 0; font-size: 0.875rem; line-height: 2; color: var(--sh-text-primary); }
.ct-sentence.is-draft .ct-num { border-color: var(--sh-accent); box-shadow: 0 0 0 1px var(--sh-accent); }
.ct-num { width: 4.25rem; height: 30px; padding: 4px 8px; font-family: var(--sh-font-mono); text-align: right; }
.ct-insopts { display: flex; flex-direction: column; gap: 0.375rem; }
.ct-insopt { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5625rem 0.6875rem; border-radius: var(--sh-radius-md); border: 1px solid var(--sh-border); font-size: 0.84375rem; color: var(--sh-text-primary); cursor: pointer; }
.ct-insopt > span { display: flex; flex-direction: column; gap: 3px; }
.ct-insopt.is-on { border-color: var(--sh-accent); background: var(--sh-accent-subtle); }
.ct-insopt input { margin-top: 3px; }
.ct-insopt__text { font-style: italic; }

.ct-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; border: 0; background: transparent; font: inherit; font-size: 0.78125rem; color: var(--sh-accent-text); text-decoration: none; cursor: pointer; }
.ct-link .sh-icon { width: 13px; height: 13px; }
.ct-link:hover { text-decoration: underline; }

.ct-comm { padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.ct-comm__head { display: flex; flex-direction: column; gap: 3px; color: var(--sh-text-primary); }
.ct-comm__head b { font-size: 0.875rem; }
.ct-ctable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.ct-ctable thead th { padding: 0 0.5rem 0.375rem; font-size: 0.75rem; font-weight: 600; text-align: left; vertical-align: bottom; color: var(--sh-text-secondary); }
.ct-ctable thead small { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--sh-text-tertiary); }
.ct-crow > th, .ct-crow > td { padding: 0.375rem 0.5rem; text-align: left; vertical-align: middle; border-top: 1px solid var(--sh-border); }
.ct-crow > th { font-weight: 500; color: var(--sh-text-primary); white-space: nowrap; }
.ct-crow--d0 > th, .ct-crow--d0 > td { background: var(--sh-accent-subtle); }
.ct-crow--toggle > th { padding: 2px 0.5rem; border-top: 0; }
.ct-crow--toggle .ct-link { padding-left: calc(var(--depth) * 1.125rem); color: var(--sh-text-tertiary); }
.ct-crow.is-picked > th { box-shadow: inset 3px 0 0 var(--sh-accent); }
.ct-crow__name { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0 0 calc(var(--depth) * 1.125rem); border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
span.ct-crow__name { cursor: default; }
button.ct-crow__name:hover { text-decoration: underline; }
.ct-crow__tools { width: 1%; }
.ct-crow-more td { padding: 0.25rem 0.5rem 0.625rem 2.125rem; }
.ct-inh { display: inline-flex; align-items: center; gap: 0.375rem; padding: 5px 9px; border-radius: 7px; border: 1px dashed var(--sh-border); background: transparent; font: inherit; font-size: 0.78125rem; color: var(--sh-text-tertiary); white-space: nowrap; cursor: pointer; }
.ct-inh b { font-weight: 500; color: var(--sh-text-secondary); }
.ct-inh span { font-size: 0.71875rem; }
.ct-inh .sh-icon { width: 12px; height: 12px; opacity: 0; }
.ct-inh:hover:not(:disabled) { border-color: var(--sh-accent); color: var(--sh-text-primary); }
.ct-inh:hover:not(:disabled) .sh-icon { opacity: 1; }
.ct-inh:disabled { cursor: default; }
.ct-rule { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--sh-text-secondary); }
.ct-rule .ct-num { width: 3.625rem; }
.ct-rule.is-draft .ct-num { border-color: var(--sh-accent); box-shadow: 0 0 0 1px var(--sh-accent); }
.ct-rule__extra { font-size: 0.71875rem; color: var(--sh-text-tertiary); }
.ct-rule__x { display: inline-grid; place-items: center; padding: 3px; border: 0; border-radius: 5px; background: transparent; color: var(--sh-text-tertiary); cursor: pointer; }
.ct-rule__x .sh-icon { width: 12px; height: 12px; }
.ct-rule__x:hover { background: var(--sh-hover); color: var(--sh-red-text); }

.ct-viewas { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 0.875rem; font-size: 0.75rem; color: var(--sh-text-tertiary); }
.ct-legend .sh-icon { width: 12px; height: 12px; vertical-align: -2px; }

.ct-type { padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; scroll-margin-top: 1rem; }
.ct-type.is-focused { border-color: var(--sh-accent); }
.ct-type.is-hidden { opacity: 0.6; }
.ct-type__head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.ct-type__name { font-size: 0.9375rem; color: var(--sh-text-primary); }
.ct-grid { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 0.8125rem; }
.ct-grid thead th { padding: 0 4px 2px; font-size: 0.71875rem; font-weight: 500; text-align: left; color: var(--sh-text-tertiary); white-space: nowrap; }
.ct-grid td { padding: 0 4px; min-width: 7.5rem; }
.ct-grid tr.is-off th, .ct-grid tr.is-off td { opacity: 0.45; }
.ct-size { width: 1%; padding-right: 0.5rem; font-weight: 500; text-align: left; white-space: nowrap; color: var(--sh-text-primary); }
.ct-size__name { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.2; }
.ct-size__band { font-size: 0.6875rem; font-weight: 400; color: var(--sh-text-tertiary); }

.ct-cell { display: flex; align-items: center; gap: 3px; width: 100%; min-height: 34px; padding: 3px 6px; border: 1px solid var(--sh-border); border-radius: 7px; background: var(--sh-bg-surface); font: inherit; color: var(--sh-text-primary); cursor: pointer; }
.ct-cell:hover { border-color: var(--sh-border-strong); }
.ct-cell.is-sel { border-color: var(--sh-accent); box-shadow: 0 0 0 1px var(--sh-accent); }
.ct-cell.is-draft { background: var(--sh-accent-subtle); }
.ct-cell.is-fixed:not(.is-draft) { background: var(--sh-purple-bg); border-color: var(--sh-purple-border); }
.ct-cell.is-empty { justify-content: center; gap: 4px; border-style: dashed; font-size: 0.75rem; color: var(--sh-text-tertiary); }
.ct-cell.is-empty .sh-icon { width: 12px; height: 12px; }
.ct-cell.is-bad { background: var(--sh-red-bg); border-color: var(--sh-red-border); }
.ct-cell--ro { justify-content: flex-start; }
.ct-cell__v { font-family: var(--sh-font-mono); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.ct-cell__in { width: 3rem; min-width: 0; padding: 2px 0; border: 0; background: transparent; font-family: var(--sh-font-mono); font-size: 0.8125rem; font-weight: 500; text-align: right; color: var(--sh-text-primary); -moz-appearance: textfield; appearance: textfield; }
.ct-cell__in::-webkit-outer-spin-button, .ct-cell__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ct-cell__in:focus { outline: 2px solid var(--sh-focus-ring); outline-offset: 1px; border-radius: 3px; }
.ct-cell__dash { font-size: 0.75rem; color: var(--sh-text-tertiary); }
.ct-cell__mode { display: inline-grid; place-items: center; margin-left: auto; padding: 2px; border: 0; border-radius: 5px; background: transparent; color: var(--sh-text-tertiary); cursor: pointer; }
.ct-cell__mode .sh-icon { width: 12px; height: 12px; }
.ct-cell__mode.is-fixed { color: var(--sh-accent-text); }
.ct-cell__mode:hover { color: var(--sh-text-primary); }

.ct-add { display: inline-flex; align-items: center; gap: 0.375rem; align-self: flex-start; padding: 0.5rem 0.75rem; border: 1px dashed var(--sh-border); border-radius: var(--sh-radius-md); background: transparent; font: inherit; font-size: 0.8125rem; color: var(--sh-text-secondary); cursor: pointer; }
.ct-add:hover { border-color: var(--sh-border-strong); color: var(--sh-text-primary); }
.ct-add .sh-icon { width: 13px; height: 13px; }
.ct-add--row { padding: 0.25rem 0.5rem; border-style: none; color: var(--sh-text-tertiary); }

.ct-explain { display: flex; flex-direction: column; gap: 4px; padding: 0.75rem 0.875rem; border-radius: var(--sh-radius-lg); border: 1px solid var(--sh-border); background: var(--sh-bg-surface); font-size: 0.8125rem; color: var(--sh-text-primary); }
.ct-explain__row { display: flex; justify-content: space-between; gap: 0.625rem; font-variant-numeric: tabular-nums; }
.ct-explain__row span { color: var(--sh-text-secondary); }
.ct-explain__row--sub { padding-left: 0.625rem; font-size: 0.75rem; }
.ct-explain p { margin: 0.375rem 0 0; }

.ct-ph-soon { opacity: 0.5; }
.ct-ph-off { opacity: 0.4; }
.ct-ph-note { padding: 10px 12px; border-radius: 10px; background: #fff; font-size: 0.75rem; color: #344054; }
.ct-ph-price { display: flex; align-items: baseline; justify-content: space-between; padding: 0 12px; font-size: 0.75rem; color: #5A6069; }
.ct-ph-price b { font-size: 1rem; color: #16181C; }
.ct-ph-card { padding: 2px 12px; }
.ct-ph-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #E3E6EB; background: transparent; font: inherit; font-size: 0.8125rem; color: inherit; text-align: left; }
.ct-ph-row:last-child { border-bottom: 0; }
.ct-ph-row--total { font-size: 0.9375rem; }
.ct-ph-check { justify-content: flex-start; align-items: flex-start; cursor: pointer; }
.ct-ph-check > span { display: flex; flex-direction: column; gap: 3px; }
.ct-ph-check small { font-size: 0.6875rem; line-height: 1.35; color: #5A6069; }
.ct-ph-link { font-size: 0.8125rem; font-weight: 600; color: #F10F78; }

.ct-draftbar { position: fixed; left: 50%; bottom: 1.25rem; z-index: 50; display: flex; align-items: center; gap: 0.625rem; width: min(52rem, calc(100vw - 2rem)); padding: 0.625rem 0.75rem 0.625rem 1rem; border-radius: 12px; border: 1px solid var(--sh-accent); background: var(--sh-bg-surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); font-size: 0.8125rem; transform: translateX(-50%); }
.ct-draftbar__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ct-draftbar__warn { color: var(--sh-amber-text); }
.ct-draftbar__error { color: var(--sh-red-text); font-weight: 500; }
.ct-changes { list-style: none; margin: 0 0 1rem; padding: 0; }
.ct-changes li { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; padding: 0.5rem 0; border-bottom: 1px solid var(--sh-border); font-size: 0.8125rem; }
.ct-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ct-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

@media (max-width: 1280px) {
    .ct-layout { grid-template-columns: 13rem minmax(0, 1fr); }
    .ct-side { grid-column: 1 / -1; position: static; }
}

@media (max-width: 900px) {
    .ct-layout { grid-template-columns: minmax(0, 1fr); }
    .ct-list { position: static; }
    .ct-copy, .ct-form__row { grid-template-columns: minmax(0, 1fr); }
}