/* All rules are isolated to the text-service surface; theme comes from the host. */
.textscope { --ts-surface: var(--surface, rgba(128,128,128,.035)); --ts-soft: var(--surface2, rgba(128,128,128,.065)); color: var(--text, #302a22); font: 13px/1.6 Inter,"Segoe UI","Microsoft YaHei UI",system-ui,sans-serif; min-width: 0; }
.textscope *, .textscope *::before, .textscope *::after { box-sizing: border-box; }
.textscope [hidden] { display: none !important; }
.textscope h1, .textscope h2, .textscope h3, .textscope p { margin: 0; }
.textscope h1 { font-size: 20px; line-height: 1.4; }
.textscope h2 { font-size: 15px; line-height: 1.5; }
.textscope h3 { font-size: 13px; }
.textscope a { color: var(--teal, #0f766d); text-decoration: none; }
.textscope a:hover { text-decoration: underline; }
.textscope .ts-heading { display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.textscope .ts-heading p { margin-top: 5px; }
.textscope .ts-muted, .textscope small { color: var(--muted, #827568); font-size: 12px; line-height: 1.7; }
.textscope small { display: block; }
.textscope .ts-card { min-width: 0; padding: 18px; margin-bottom: 16px; background: var(--ts-surface); border: 1px solid var(--line, #e4d8c7); border-radius: var(--radius, 9px); }
.textscope .ts-card > .ts-heading { margin-bottom: 14px; }
.textscope .ts-stack { display: grid; gap: 14px; }
.textscope .ts-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-items: start; }
.textscope .ts-grid.ts-wide { grid-template-columns: repeat(3, minmax(0,1fr)); }
.textscope .ts-full { grid-column: 1 / -1; }
.textscope label { display: grid; gap: 6px; margin: 0; color: var(--text, #302a22); font-size: 12px; }
.textscope input, .textscope textarea, .textscope button { font: inherit; font-size: 13px; }
.textscope input, .textscope textarea { width: 100%; min-width: 0; border: 1px solid var(--line, #e4d8c7); border-radius: 8px; padding: 9px 11px; background: var(--ts-soft); color: inherit; outline: none; }
.textscope textarea { min-height: 80px; resize: vertical; }
.textscope input[readonly] { color: var(--muted, #827568); }
.textscope input[type="checkbox"], .textscope input[type="radio"] { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--teal, #0f766d); flex-shrink: 0; }
.textscope .ts-check { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.textscope button, .textscope .ts-link { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--line, #e4d8c7); border-radius: 8px; color: var(--text, #302a22); background: var(--ts-soft); font-weight: 500; cursor: pointer; text-decoration: none; }
.textscope button:hover, .textscope .ts-link:hover { border-color: var(--amber, #c9892b); text-decoration: none; }
.textscope button.ts-primary { background: var(--amber, #c9892b); color: #211708; border-color: var(--amber, #c9892b); font-weight: 700; }
.textscope button.ts-danger { color: var(--danger, #b13c30); }
.textscope button:disabled { opacity: .5; cursor: not-allowed; }
.textscope input:focus-visible, .textscope textarea:focus-visible, .textscope button:focus-visible, .textscope a:focus-visible, .textscope summary:focus-visible { outline: 2px solid var(--teal, #0f766d); outline-offset: 3px; }
.textscope .ts-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.textscope .ts-form-actions { margin-top: 16px; }
.textscope fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.textscope legend { padding: 0; margin-bottom: 6px; font-size: 12px; color: var(--muted, #827568); }
.textscope .ts-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.textscope .ts-choice { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line, #e4d8c7); border-radius: 8px; overflow-wrap: anywhere; }
.textscope .ts-choice:has(input:checked) { border-color: var(--teal, #0f766d); background: var(--ts-soft); }
.textscope .ts-notice { padding: 10px 13px; margin-bottom: 16px; border: 1px solid var(--line, #e4d8c7); border-left: 3px solid var(--teal, #0f766d); border-radius: 8px; background: var(--ts-soft); overflow-wrap: anywhere; white-space: pre-wrap; }
.textscope .ts-notice.ts-error { border-left-color: var(--danger, #b13c30); color: var(--danger, #b13c30); }
.textscope .ts-badge { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid var(--line, #e4d8c7); border-radius: 6px; font-size: 11px; color: var(--teal, #0f766d); white-space: nowrap; }
.textscope .ts-badge.ts-off { color: var(--muted, #827568); }
.textscope .ts-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.textscope table { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 12px; }
.textscope th, .textscope td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line, #e4d8c7); vertical-align: top; }
.textscope th { background: var(--ts-soft); color: var(--muted, #827568); font-weight: 600; white-space: nowrap; }
.textscope td { max-width: 310px; overflow-wrap: anywhere; }
.textscope td:first-child { min-width: 112px; }
.textscope td strong { display: block; font-weight: 600; }
.textscope td button { min-height: 30px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.textscope .ts-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
.textscope .ts-empty { padding: 22px 12px; text-align: center; color: var(--muted, #827568); }
.textscope .ts-editor { border-top: 1px solid var(--line, #e4d8c7); padding-top: 18px; margin-top: 18px; }
.textscope .ts-editor h3 { margin-bottom: 14px; }
.textscope .ts-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; margin-bottom: 16px; }
.textscope .ts-metric { min-width: 0; border: 1px solid var(--line, #e4d8c7); border-radius: 8px; padding: 14px; background: var(--ts-surface); }
.textscope .ts-metric strong { display: block; margin-top: 5px; font-size: 21px; line-height: 1.5; color: var(--amber2, #a76618); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.textscope .ts-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.textscope .ts-filters label { flex: 1 1 145px; }
.textscope .ts-filters label.ts-days { flex: 0 1 120px; }
.textscope .ts-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.textscope .ts-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 16px; padding: 10px 0; }
.textscope .ts-detail-grid span { overflow-wrap: anywhere; }
.textscope details summary { color: var(--teal, #0f766d); cursor: pointer; white-space: nowrap; }
.textscope .ts-cost { margin-top: 16px; padding: 12px; border: 1px solid var(--line, #e4d8c7); border-radius: 8px; }
.textscope .ts-cost > summary { white-space: normal; }
.textscope .ts-cost > p { margin: 10px 0; }
.textscope code, .textscope .ts-mono { font-family: ui-monospace,Consolas,monospace; overflow-wrap: anywhere; }
@media (max-width: 850px) { .textscope .ts-grid.ts-wide { grid-template-columns: repeat(2,minmax(0,1fr)); } .textscope .ts-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .textscope .ts-grid, .textscope .ts-grid.ts-wide { grid-template-columns: 1fr; } .textscope .ts-card { padding: 14px; } .textscope .ts-heading { align-items: flex-start; } .textscope .ts-pager { justify-content: flex-start; } }