.cw-note { margin-bottom: 20px; padding: 13px 16px; border: 1px solid #d9e5fe; background: #f0f5ff; color: #405478; border-radius: 12px; }
.cw-config-note { display: flex; align-items: center; gap: 10px; margin: -8px 0 20px; padding: 11px 14px; border: 1px solid #f0d6ac; background: #fff8ed; color: #8a5e22; border-radius: 10px; font-size: 13px; }
.cw-config-note strong { color: #694515; white-space: nowrap; }
.cw-config-note.cw-config-ready { border-color: #c8e6d4; background: #f0faf4; color: #24704b; }
.cw-config-note.cw-config-ready strong { color: #175b3a; }
.cw-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.cw-summary-grid .panel { padding: 18px 20px; }
.cw-summary-grid strong { display: block; font-size: 28px; margin-bottom: 5px; }
.cw-summary-grid span { color: var(--muted); }
.cw-list-toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cw-list-toolbar .field { margin: 0; min-width: 190px; }
.cw-list-toolbar .field:nth-child(2) { flex: 1; }
.cw-list-toolbar > button { margin-bottom: 0; }
.cw-status { display: inline-flex; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700; background: #eef1f5; color: #526178; white-space: nowrap; }
.cw-IN_REVIEW { background: #fff3e8; color: #9b5c23; }
.cw-APPROVED { background: #e5f8ed; color: #138355; }
.cw-editor-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: start; gap: 22px; }
.cw-form-panel { padding: 22px; }
.cw-editor-head { display: flex; align-items: center; gap: 12px; color: var(--muted); margin-bottom: 20px; }
.cw-common { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cw-metadata { margin: 8px 0 14px; border: 1px solid #e5eaee; border-radius: 8px; padding: 8px 12px; }
.cw-metadata summary { cursor: pointer; font-size: 12px; color: #67747e; }
.cw-metadata[open] summary { margin-bottom: 12px; }
.cw-metadata .field { margin-bottom: 8px; }
.cw-metadata-fields .cw-ai-picker { margin: 0; }
.cw-tabs { display: flex; gap: 8px; padding-bottom: 15px; border-bottom: 1px solid var(--line); margin: 10px 0 18px; }
.cw-tabs button { border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #526178; padding: 10px 15px; font-weight: 700; }
.cw-tabs button.active { background: var(--soft-primary); color: var(--primary); border-color: #a9b5ff; }
.cw-body { min-height: 270px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; line-height: 1.65; }
.cw-asset-heading, .cw-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 12px; }
.cw-selected { display: flex; flex-wrap: wrap; gap: 9px; padding: 8px 0 16px; }
.cw-image-chip { position: relative; width: 74px; height: 74px; }
.cw-image-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.cw-image-chip button { position: absolute; top: -7px; right: -7px; border: 0; border-radius: 50%; background: #1e293b; color: #fff; width: 22px; height: 22px; }
.cw-image-chip { width: 110px; height: 150px; cursor: grab; }
.cw-image-chip img { height: 110px; border-radius: 6px; }
.cw-image-label { position: absolute; top: 5px; left: 5px; padding: 2px 6px; border-radius: 4px; color: #fff; background: #26323a; font-size: 11px; }
.cw-image-tools { display: flex; justify-content: space-between; margin-top: 5px; }
.cw-image-tools button { position: static; border-radius: 4px; background: #f1f3f5; color: #344650; width: 25px; height: 26px; }
.cw-image-tools button:disabled { opacity: .35; cursor: default; }
.cw-ai-result { min-height: 340px; white-space: pre-wrap; line-height: 1.8; }
.cw-ai-modal { width: min(1000px, 100%); border-radius: 8px; }
.cw-ai-result-banner { display: grid; gap: 6px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #b8d8c6; border-left: 4px solid #26715b; background: #f2fbf5; color: #24543d; }
.cw-ai-result-banner > strong { font-size: 14px; }
.cw-ai-result-banner > span { font-size: 12px; color: #4e6d5b; }
.cw-ai-result-same { border-color: #ead3a3; border-left-color: #b67a18; background: #fffaf0; color: #704b14; }
.cw-ai-result-same > span { color: #806638; }
.cw-ai-stats { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
.cw-ai-stats span { padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; }
.cw-ai-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cw-ai-compare > section { min-width: 0; }
.cw-ai-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cw-ai-compare h3 { margin: 0; font-size: 15px; }
.cw-ai-panel-heading span { color: #74818a; font-size: 11px; }
.cw-ai-original { max-height: 52vh; overflow: auto; padding: 18px; background: #f6f8f9; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.cw-ai-compare .cw-canvas { width: 100%; max-height: 52vh; border: 2px solid #b8d8c6; border-radius: 4px; box-shadow: 0 8px 20px rgba(38,113,91,.12); }
.cw-ai-source { margin-top: 18px; font-size: 13px; }
.cw-ai-source summary { cursor: pointer; padding: 8px 0; }
.cw-ai-state { min-height: 20px; color: #24704b; font-size: 13px; margin-bottom: 8px; }
@media (max-width: 640px) { .cw-ai-compare { grid-template-columns: minmax(0, 1fr); gap: 16px; } .cw-ai-original, .cw-ai-compare .cw-canvas { max-height: 35vh; } }
.cw-workflow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }
.cw-preview-panel { position: sticky; top: 94px; min-width: 0; }
#cw-preview { padding: 22px 16px; border: 1px solid #e3e7eb; border-radius: 12px; background: radial-gradient(ellipse at top, #f7f8fa, #e9ecf0); }
.cw-preview-heading { margin: 0 0 12px; }
.cw-phone { width: min(100%, 390px); max-height: 700px; overflow-y: auto; margin: 0 auto; background: #fff; border: 1px solid #dce3ee; border-radius: 23px; box-shadow: 0 18px 45px rgba(36,49,76,.1); }
.cw-phone-top { text-align: center; padding: 17px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cw-article, .cw-xhs article { padding: 24px 20px 38px; overflow-wrap: anywhere; }
.cw-article h1 { font-size: 23px; line-height: 1.45; }
.cw-article h2 { font-size: 19px; color: var(--primary); }
.cw-article h3, .cw-article h4 { font-size: 16px; }
.cw-article p { line-height: 1.8; margin: 13px 0; }
.cw-byline, .cw-summary { color: var(--muted); font-size: 12px; line-height: 1.6; }
.cw-summary { background: #f7f9ff; padding: 12px; border-radius: 9px; }
.cw-blank { height: 8px; }
.cw-bullet { padding-left: 10px; }
.cw-article blockquote { border-left: 3px solid var(--primary); padding-left: 12px; color: #60708b; }
.cw-images img { display: block; max-width: 100%; margin: 12px auto; border-radius: 8px; }
.cw-cover { display: flex; overflow-x: auto; min-height: 250px; align-items: center; background: #eef1f5; color: #8090a5; }
.cw-cover img { flex: 0 0 100%; width: 100%; max-height: 360px; object-fit: cover; }
.cw-cover > div { text-align: center; width: 100%; }
.cw-xhs h2 { font-size: 19px; }
.cw-note-body { white-space: pre-wrap; line-height: 1.75; overflow-wrap: anywhere; }
.cw-tags { color: #526faa; line-height: 1.8; }
.cw-hint { color: var(--muted); font-size: 12px; line-height: 1.6; }
.cw-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; padding: 14px; max-height: 60vh; overflow-y: auto; }
.cw-library-grid article, .cw-library-grid button { display: grid; text-align: left; border: 1px solid var(--line); padding: 8px; border-radius: 10px; background: white; min-width: 0; }
.cw-library-grid button.picked { border-color: var(--primary); background: var(--soft-primary); }
.cw-library-grid img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; }
.cw-library-grid b, .cw-library-grid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.cw-library-grid small { color: var(--muted); margin-top: 3px; }
.cw-failure { padding: 22px; }
.cw-failure p { color: var(--muted); }
.cw-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.cw-platform-card { display: flex; align-items: center; gap: 12px; padding: 15px 17px; min-width: 0; }
.cw-platform-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; color: #fff; font-weight: 800; }
.cw-wechat-icon { background: #2aae67; }
.cw-xhs-icon { background: #ef4d69; }
.cw-platform-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.cw-platform-copy strong { font-size: 14px; }
.cw-platform-copy span, .cw-platform-copy small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-platform-copy small { font-size: 11px; }
.cw-published { color: #138355; font-size: 12px; font-weight: 700; }
.cw-workflow { display: grid; gap: 8px; }
.cw-publish-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cw-xhs-pending { color: var(--muted); font-size: 12px; }
.cw-connect-note, .cw-connection-state { padding: 12px; margin-bottom: 14px; border-radius: 9px; background: #f7f9ff; color: #526178; line-height: 1.6; }
.cw-connection-state { display: grid; gap: 4px; }
.cw-connection-state strong { color: #138355; }
@media (max-width: 700px) { .cw-platform-grid { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .cw-editor-grid { grid-template-columns: 1fr; } .cw-preview-panel { position: static; } }
@media (max-width: 640px) { .cw-summary-grid { grid-template-columns: repeat(2, 1fr); } .cw-common { grid-template-columns: 1fr; gap: 0; } .cw-list-toolbar .field { width: 100%; } }
.cw-home-head { margin-bottom: 24px; }
.cw-eyebrow { display: block; margin-bottom: 5px; color: #72838c; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.cw-management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
.cw-management-card { min-width: 0; padding: 18px; border: 1px solid #dce5e8; border-radius: 12px; background: #fff; box-shadow: 0 7px 18px rgba(42,61,70,.05); }
.cw-management-connect { background: linear-gradient(145deg, #fff 0%, #f7fbfc 100%); }
.cw-management-create { background: linear-gradient(145deg, #fff 0%, #faf9ff 100%); }
.cw-management-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.cw-management-head .cw-eyebrow { margin-bottom: 4px; }
.cw-management-head h2 { margin: 0; color: #263b45; font-size: 19px; }
.cw-management-head small { color: #829098; font-size: 11px; white-space: nowrap; }
.cw-management-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cw-entry-card { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: 104px; padding: 15px 14px; border: 1px solid #dce5e8; border-radius: 10px; background: #fff; color: #263b45; text-align: left; box-shadow: 0 4px 11px rgba(42,61,70,.04); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cw-entry-card:hover:not(:disabled) { border-color: #88a5b4; box-shadow: 0 10px 24px rgba(42,61,70,.1); transform: translateY(-2px); }
.cw-entry-card:focus-visible { outline: 3px solid #397599; outline-offset: 2px; }
.cw-entry-card:disabled { cursor: default; opacity: .82; }
.cw-entry-wechat { background: linear-gradient(145deg, #fff 0%, #f4fbf7 100%); }
.cw-entry-xhs { background: linear-gradient(145deg, #fff 0%, #fff5f6 100%); }
.cw-entry-weibo { background: linear-gradient(145deg, #fff 0%, #fff8f1 100%); }
.cw-entry-website { background: linear-gradient(145deg, #fff 0%, #f5f7fb 100%); }
.cw-entry-ai { background: linear-gradient(145deg, #fff 0%, #f7f6ff 100%); }
.cw-entry-layout { background: linear-gradient(145deg, #fff 0%, #f3f8fb 100%); }
.cw-entry-model { background: linear-gradient(145deg, #fff 0%, #f7f7f7 100%); }
.cw-entry-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; color: #fff; font-size: 14px; font-weight: 800; }
.cw-entry-wechat .cw-entry-icon { background: #2aae67; }
.cw-entry-xhs .cw-entry-icon { background: #ef4d69; }
.cw-entry-weibo .cw-entry-icon { background: #ef8a35; }
.cw-entry-website .cw-entry-icon { background: #5c7387; }
.cw-entry-ai .cw-entry-icon { background: #6558b8; }
.cw-entry-layout .cw-entry-icon { background: #397599; }
.cw-entry-model .cw-entry-icon { background: #59656c; }
.cw-entry-copy { display: grid; gap: 5px; min-width: 0; padding-top: 1px; }
.cw-entry-copy strong { font-size: 13px; }
.cw-entry-copy small { color: #536a74; font-size: 12px; }
.cw-entry-copy em { color: #7a8b92; font-size: 11px; font-style: normal; line-height: 1.45; }
.cw-entry-arrow { position: absolute; right: 12px; bottom: 10px; color: #397599; font-size: 16px; }
.cw-entry-badge { position: absolute; right: 13px; top: 13px; padding: 4px 7px; border-radius: 5px; background: #f9e8eb; color: #b33b52; font-size: 10px; font-weight: 700; }
.cw-recent-section { padding-top: 2px; }
.cw-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cw-section-heading > div { min-width: 0; }
.cw-section-heading h2 { margin: 0; color: #263b45; font-size: 18px; }
.cw-section-heading > span { color: #839098; font-size: 11px; white-space: nowrap; }
.cw-recent-title { margin-bottom: 14px; }
.cw-recent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cw-recent-card { min-width: 0; min-height: 258px; padding: 15px; border: 1px solid #e0e7e9; border-radius: 10px; background: #fff; color: #344a55; box-shadow: 0 5px 14px rgba(42,61,70,.04); }
.cw-recent-card-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid #edf1f2; }
.cw-recent-card-head span { color: #8a979c; font-size: 10px; }
.cw-recent-card-head h3 { margin: 3px 0 0; color: #263b45; font-size: 15px; }
.cw-recent-card-head small { color: #87959b; font-size: 10px; white-space: nowrap; }
.cw-recent-list { display: grid; gap: 0; }
.cw-recent-item { display: grid; gap: 5px; min-width: 0; padding: 11px 0; border: 0; border-bottom: 1px solid #f0f3f4; background: transparent; color: #344a55; text-align: left; cursor: pointer; }
.cw-recent-item:last-child { border-bottom: 0; }
.cw-recent-item:hover .cw-recent-item-title { color: #397599; }
.cw-recent-item:focus-visible { outline: 2px solid #397599; outline-offset: 2px; }
.cw-recent-item-title { overflow: hidden; font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.cw-recent-item-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; overflow: hidden; color: #849198; font-size: 10px; }
.cw-recent-item-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-recent-empty { grid-column: 1 / -1; padding: 15px; border: 1px dashed #d8e1e4; border-radius: 8px; color: #94a0a5; font-size: 12px; }
.cw-unavailable { display: grid; gap: 8px; padding: 8px 0; color: #526178; line-height: 1.65; }
.cw-unavailable strong { color: #2f4652; font-size: 15px; }
.cw-unavailable p, .cw-unavailable small { margin: 0; }
.cw-unavailable small { color: #829098; }
.cw-space-placeholder { display: grid; justify-items: center; gap: 9px; padding: 76px 24px; text-align: center; }
.cw-space-placeholder h2 { margin: 4px 0 0; color: #2f4652; font-size: 20px; }
.cw-space-placeholder p { margin: 0 0 12px; color: #7a8990; font-size: 13px; }
.cw-space-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: #6558b8; color: #fff; font-size: 27px; }
.cw-writing-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin: 0 0 14px; }
.cw-writing-toolbar .field { width: min(100%, 420px); margin: 0; }
.cw-writing-toolbar .cw-writing-type-field { width: min(100%, 220px); }
.cw-writing-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 16px; border-radius: 8px; background: #f0f4fa; }
.cw-writing-bulkbar[hidden] { display: none; }
.cw-writing-bulkbar span { font-size: 13px; color: #59666d; }
.cw-writing-selection { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; color: #738188; }
.cw-writing-delete-list { max-height: 260px; overflow-y: auto; overflow-wrap: anywhere; }
.cw-writing-count { padding: 10px 0; color: #78858b; font-size: 12px; }
.cw-writing-list-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.cw-source-usage { margin: 16px 0; padding: 14px; border: 1px solid #dbe3ec; border-radius: 12px; overflow-wrap: anywhere; }
.cw-source-usage summary { cursor: pointer; font-weight: 600; }
.cw-source-usage-row { margin: 14px 0; padding-bottom: 12px; border-bottom: 1px solid #dbe3ec; }
.cw-source-usage h3 { font-size: 14px; margin: 12px 0; }
.cw-source-usage-row h3 span { display: inline-block; font-size: 12px; font-weight: normal; color: #60746a; }
.cw-source-evidence { font-size: 13px; }
.cw-source-evidence blockquote { margin: 8px 0 12px; padding-left: 12px; border-left: 2px solid #b9cec1; white-space: pre-wrap; }
.cw-writing-list { padding: 0; overflow: hidden; }
.cw-writing-table-wrap { width: 100%; overflow-x: auto; }
.cw-writing-list table { width: 100%; min-width: 0; border-collapse: collapse; }
.cw-writing-head h1 { letter-spacing: 0; }
.cw-workspace-tabs { display: flex; gap: 8px; margin: 0 0 20px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.cw-workspace-tabs button { padding: 10px 22px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 700; color: #526178; }
.cw-workspace-tabs button[aria-selected="true"] { background: var(--soft-primary); color: var(--primary); border-color: #a9b5ff; }
.cw-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; margin-bottom: 20px; }
.cw-image-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; min-width: 0; }
.cw-image-card-preview { display: flex; align-items: center; justify-content: center; height: 210px; background: #f1f4f8; color: #68758a; }
.cw-image-card-preview img { width: 100%; height: 100%; object-fit: contain; }
.cw-image-card-body { display: flex; flex-direction: column; align-items: start; gap: 8px; padding: 16px; overflow-wrap: anywhere; }
.cw-image-card-body small { color: #68758a; }
.cw-image-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-image-card-actions a { text-decoration: none; }
.cw-image-select-all { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #59666d; }
.cw-image-article-picker { display: flex; flex-direction: column; gap: 12px; }
.cw-image-article-picker > .btn { text-align: left; white-space: normal; }
.cw-image-task-details { overflow-wrap: anywhere; }
.cw-image-task-details img { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; }
.cw-image-prompt-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-writing-head > div:first-child { flex-shrink: 0; }
.cw-writing-head h1 { white-space: nowrap; }
.cw-writing-head .head-actions { flex-wrap: wrap; }
.cw-writing-head .head-actions .btn { min-height: 40px; }
.cw-writing-list th, .cw-writing-list td { padding: 14px 16px; border-bottom: 1px solid #edf0f1; text-align: left; vertical-align: middle; }
.cw-writing-list th { background: #f8fafb; color: #738188; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cw-writing-list tr:last-child td { border-bottom: 0; }
.cw-writing-list td:first-child { min-width: 260px; }
.cw-writing-list td:first-child strong, .cw-writing-list td:first-child small { display: block; }
.cw-writing-list td:first-child strong { color: #2d414a; font-size: 13px; line-height: 1.5; }
.cw-writing-list td:first-child small { margin-top: 3px; color: #879399; font-size: 11px; }
.cw-writing-list td .btn { white-space: nowrap; }
.cw-generation-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: #eef1f3; color: #59666d; font-size: 11px; white-space: nowrap; }
.cw-generation-running { background: #eef4f6; color: #456a78; }
.cw-generation-running::before { width: 7px; height: 7px; border-radius: 50%; background: #4f8493; content: ''; animation: cw-pulse 1.4s ease-in-out infinite; }
.cw-generation-failed { background: #fff0ed; color: #a34b3e; }
.cw-generation-complete { background: #eaf6ef; color: #26704c; }
.cw-generation-error { color: #a34b3e !important; }
.cw-writing-empty { display: grid; justify-items: center; gap: 9px; padding: 58px 20px; text-align: center; }
.cw-writing-empty .cw-space-icon { width: 46px; height: 46px; border-radius: 12px; font-size: 21px; }
.cw-writing-empty strong { color: #344a55; font-size: 14px; }
.cw-writing-empty p { max-width: 360px; margin: 0; color: #7d898f; font-size: 12px; line-height: 1.6; }
.cw-type-filter-list { display: grid; gap: 7px; }
.cw-type-filter-list button { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; border: 1px solid #e1e7e9; border-radius: 6px; background: #fff; color: #344a55; text-align: left; cursor: pointer; }
.cw-type-filter-list button[aria-pressed="true"] { border-color: #7395a2; background: #f1f7f8; color: #28586a; }
.cw-type-filter-list small { color: #849198; }
.cw-generation-modal { width: min(780px, 100%); max-height: min(92vh, 900px); overflow: auto; border-radius: 8px; }
.cw-generation-modal .modal-body { padding-top: 2px; }
.cw-generation-modal .field { margin-bottom: 15px; }
.cw-generation-textarea { min-height: 94px; resize: vertical; line-height: 1.65; }
.cw-generation-short { min-height: 72px; }
.cw-generation-label { display: block; margin-bottom: 3px; color: #344a55; font-size: 13px; font-weight: 700; }
.cw-generation-hint { margin: 0 0 9px; color: #839097; font-size: 11px; }
.cw-generation-images { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 36px; margin-bottom: 8px; }
.cw-generation-image { position: relative; width: 58px; height: 58px; padding: 0; overflow: hidden; border: 1px solid #dfe5e7; border-radius: 5px; background: #f4f6f7; cursor: pointer; }
.cw-generation-image img { width: 100%; height: 100%; object-fit: cover; }
.cw-generation-image span { position: absolute; top: 2px; right: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #263238d9; color: white; font-size: 14px; line-height: 1; }
.cw-generation-image-count { color: #879399; font-size: 11px; }
.cw-generation-upload-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-generation-config { margin: 0 24px 18px; padding: 10px 12px; border-left: 3px solid #6a929f; background: #f3f7f8; color: #5b7078; font-size: 11px; line-height: 1.6; }
.cw-generation-material-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cw-generation-material-bar > span { color: #74838a; font-size: 11px; }
.cw-generation-material-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cw-generation-material-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 7px 4px 9px; border: 1px solid #d8e2e5; border-radius: 5px; background: #f4f8f8; color: #435d67; font-size: 11px; }
.cw-generation-material-chip button { border: 0; background: transparent; color: #70838b; cursor: pointer; font-size: 16px; line-height: 1; }
.cw-material-picker-list { display: grid; gap: 4px; max-height: min(50vh, 480px); overflow: auto; margin: 12px 0; }
.cw-material-picker-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px 8px; border-bottom: 1px solid #e8edef; cursor: pointer; }
.cw-material-picker-row > span { display: grid; gap: 4px; min-width: 0; }
.cw-material-picker-row strong { color: #30454f; font-size: 12px; }
.cw-material-picker-row small, .cw-material-picker-row span span { color: #7a888e; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.cw-material-picker-row span span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cw-material-list { padding: 0; overflow: hidden; }
.cw-material-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid #e8edef; }
.cw-material-row:last-child { border-bottom: 0; }
.cw-material-main { display: grid; gap: 5px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.cw-material-main strong { color: #2f444d; font-size: 13px; overflow-wrap: anywhere; }
.cw-material-main small { color: #839097; font-size: 11px; overflow-wrap: anywhere; }
.cw-material-main > span { display: -webkit-box; overflow: hidden; color: #697980; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cw-material-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.cw-material-detail-meta { margin-bottom: 12px; color: #7b898f; font-size: 12px; overflow-wrap: anywhere; }
.cw-material-detail-body { max-height: 60vh; overflow: auto; margin: 0; padding: 14px; border-radius: 5px; background: #f5f7f8; color: #405158; font: inherit; font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-material-detail-modal { width: min(760px, 100%); }
.cw-material-paste-body { min-height: 220px; resize: vertical; line-height: 1.7; }
.cw-material-select { display: grid; place-items: center; }
@keyframes cw-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cw-generation-running::before { animation: none; } }
@media (max-width: 1100px) { .cw-management-grid, .cw-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cw-management-grid, .cw-recent-grid { grid-template-columns: minmax(0, 1fr); } .cw-management-items { gap: 8px; } .cw-management-head { align-items: start; flex-direction: column; gap: 4px; } .cw-entry-card { min-height: 96px; } }
@media (max-width: 700px) {
  .cw-writing-head .head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cw-writing-head .head-actions .btn { min-width: 0; padding: 9px 8px; }
  .cw-writing-table-wrap { overflow: visible; }
  .cw-writing-list table, .cw-writing-list tbody { display: block; }
  .cw-writing-list thead { display: none; }
  .cw-writing-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 12px; border-bottom: 1px solid #edf0f1; }
  .cw-writing-list tr:last-child { border-bottom: 0; }
  .cw-writing-list td { display: block; min-width: 0 !important; padding: 4px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .cw-writing-list td:first-child { grid-column: 1 / -1; }
  .cw-writing-list td:nth-child(2), .cw-writing-list td:nth-child(3) { color: #849198; font-size: 11px; grid-column: 1 / -1; }
  .cw-writing-list td:nth-child(4) { justify-self: start; grid-column: 1; grid-row: 4; }
  .cw-writing-list td:last-child { justify-self: end; grid-column: 2; grid-row: 4; align-self: center; }
}
@media (max-width: 640px) {
  .cw-material-row { grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 12px; }
  .cw-material-actions { grid-column: 2; justify-content: flex-start; }
  .cw-material-actions .btn { padding-left: 4px; }
  .cw-material-detail-body { max-height: 52vh; }
}
@media (max-width: 640px) { .cw-writing-toolbar { align-items: stretch; flex-direction: column; gap: 4px; } .cw-writing-toolbar .field { width: 100%; } .cw-writing-count { padding: 0; } .cw-generation-config { margin-right: 16px; margin-left: 16px; } }
.cw-editor-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0 0; }
.cw-editor-tabs > button:not(.btn) { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); padding: 10px 13px; font-weight: 700; }
.cw-editor-tabs > button.active { color: var(--primary); border-bottom-color: var(--primary); }
.cw-editor-tabs .btn { margin: 0 0 6px auto; }
.cw-source { min-height: 300px; margin-top: 12px; line-height: 1.8; }
.cw-markdown-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border: 1px solid var(--line); border-bottom: 0; padding: 6px; margin-top: 12px; background: #f8fafb; }
.cw-markdown-toolbar button { min-width: 34px; height: 32px; border: 0; border-radius: 4px; background: transparent; color: #42515b; font-size: 13px; font-weight: 700; }
.cw-markdown-toolbar button:hover { background: #e9eff2; }
.cw-toolbar-select { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; height: 32px; padding: 0 5px 0 8px; border-right: 1px solid #dbe3e7; color: #52636d; font-size: 12px; white-space: nowrap; }
.cw-toolbar-select select { width: 100px; height: 27px; padding: 2px 4px; border: 1px solid #d5dfe3; border-radius: 4px; background: #fff; color: #344650; font-size: 12px; }
.cw-markdown-toolbar #cw-history { margin-left: auto; width: auto; padding: 0 9px; font-weight: 500; }
.cw-markdown-toolbar + .cw-body { border-top-left-radius: 0; border-top-right-radius: 0; }
.cw-preview-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.cw-device-tabs { display: inline-flex; padding: 3px; background: #edf1f2; border-radius: 6px; }
.cw-device-tabs button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: 4px; font-size: 12px; }
.cw-device-tabs button.active { background: #fff; color: #21343e; box-shadow: 0 1px 3px #182b351f; }
.cw-image-toggle { display: inline-flex; align-items: center; gap: 6px; color: #42515b; font-size: 12px; white-space: nowrap; }
.cw-image-toggle input { accent-color: var(--primary); }
.cw-canvas { max-height: min(72vh, 820px); overflow: hidden; margin: 0 auto; background: #fff; border: 1px solid #dce3e7; border-radius: 12px; box-shadow: 0 12px 32px #26384312; transition: width .2s ease; }
.cw-canvas.cw-device-mobile { width: min(100%, 390px); }
.cw-canvas.cw-device-desktop { width: 100%; border-radius: 6px; }
.cw-reading-scroll { max-height: min(72vh, 820px); overflow: auto; scrollbar-width: thin; }
.cw-canvas-top { padding: 9px 14px; background: #f6f8f9; border-bottom: 1px solid #e6ebee; color: #78858c; font-size: 11px; text-align: center; }
.cw-device-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 29px; padding: 7px 16px 0; color: #17232a; background: #fff; font-size: 10px; font-weight: 700; }
.cw-island { position: absolute; left: 50%; top: 6px; width: 76px; height: 19px; transform: translateX(-50%); border-radius: 12px; background: #080b0d; }
.cw-status-symbols { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; letter-spacing: -1px; }
.cw-battery { display: inline-block; width: 16px; height: 8px; border: 1px solid currentColor; border-radius: 3px; position: relative; letter-spacing: 0; }
.cw-battery::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 3px; background: currentColor; }
.cw-battery::before { content: ''; position: absolute; inset: 1px 3px 1px 1px; border-radius: 1px; background: currentColor; }
.cw-device-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; color: #6e7a82; background: #fff; border-bottom: 1px solid #eff2f3; font-size: 12px; }
.cw-device-nav span:nth-child(2) { color: #23333a; font-weight: 700; }
.cw-home-indicator { width: 76px; height: 4px; margin: 7px auto 6px; border-radius: 4px; background: #101719; }
.cw-canvas.cw-phone-frame { display: flex; flex-direction: column; width: min(100%, 350px); height: min(72vh, 740px); border: 3px solid #3e4347; border-radius: 38px; box-shadow: 0 18px 38px #26384330, 0 0 0 1px #c9cdd1; }
.cw-phone-frame > :not(.cw-reading-scroll) { flex-shrink: 0; }
.cw-phone-frame .cw-reading-scroll { flex: 1; min-height: 0; max-height: none; scrollbar-width: thin; }
.cw-phone-frame .cw-device-status { height: 36px; padding: 8px 20px 0; }
.cw-phone-frame .cw-island { top: 7px; height: 23px; width: 86px; }
.cw-phone-frame .cw-article { font-size: 14px; padding: 20px 18px 30px; }
.cw-phone-frame .cw-article h1 { font-size: 21px; }
.cw-phone-frame .cw-reader-footer { border-bottom-left-radius: 27px; border-bottom-right-radius: 27px; }
.cw-phone-frame .cw-canvas-top { display: none; }
.cw-reader-footer { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 9px; border-top: 1px solid #e5eaeb; background: rgba(255,255,255,.98); color: #718087; font-size: 9px; white-space: nowrap; }
.cw-reader-footer > span { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.cw-reader-footer svg { width: 13px; height: 13px; }
.cw-reader-account { display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin-right: auto; color: #2e424a; font-size: 10px; font-weight: 700; }
.cw-reader-account > span:last-child { max-width: 58px; overflow: hidden; text-overflow: ellipsis; }
.cw-reader-avatar { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #6c92a9, #344d5b); font-size: 10px; }
.cw-canvas .cw-article { max-width: 720px; margin: 0 auto; padding: 25px clamp(18px, 5%, 50px) 44px; color: #35424a; font-size: 16px; line-height: 1.9; }
.cw-canvas .cw-article h1 { margin: 0 0 12px; color: #25323a; font-size: 23px; line-height: 1.5; }
.cw-canvas .cw-article h2, .cw-canvas .cw-article h3, .cw-canvas .cw-article h4, .cw-canvas .cw-article h5, .cw-canvas .cw-article h6 { line-height: 1.55; margin: 1.7em 0 .65em; }
.cw-canvas .cw-article h2 { font-size: 20px; }
.cw-canvas .cw-article h3 { font-size: 18px; }
.cw-canvas .cw-article h4 { font-size: 17px; }
.cw-canvas .cw-article h5 { font-size: 16px; }
.cw-canvas .cw-article h6 { color: #65747b; font-size: 15px; }
.cw-canvas .cw-article p { margin: 1em 0; }
.cw-canvas .cw-article ul, .cw-canvas .cw-article ol { padding-left: 1.5em; line-height: 1.85; }
.cw-canvas .cw-article li { padding-left: .2em; margin: .3em 0; }
.cw-canvas .cw-article ul ul, .cw-canvas .cw-article ol ol, .cw-canvas .cw-article ul ol, .cw-canvas .cw-article ol ul { margin-top: .3em; margin-bottom: .3em; }
.cw-canvas .cw-article .cw-task-item { list-style: none; margin-left: -1.5em; }
.cw-canvas .cw-article .cw-task-item input { margin-right: .45em; accent-color: var(--cw-accent); }
.cw-canvas .cw-article hr { border: 0; border-top: 1px solid #dce3e7; margin: 1.7em 0; }
.cw-canvas .cw-article a { color: #33799a; }
.cw-canvas .cw-article blockquote { margin: 1.3em 0; padding: .15em 0 .15em 1em; border-left: 3px solid var(--cw-accent); color: #617078; }
.cw-canvas .cw-article blockquote blockquote { margin: .6em 0; border-left-color: #a6b9bf; }
.cw-canvas .cw-article code { padding: .12em .35em; border-radius: 3px; background: #eef2f3; color: #394b54; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.cw-canvas .cw-article pre { overflow-x: auto; margin: 1.35em 0; padding: 14px 16px; border-radius: 6px; background: #202b31; color: #edf3f4; line-height: 1.6; white-space: pre-wrap; }
.cw-canvas .cw-article pre code { padding: 0; background: transparent; color: inherit; font-size: 13px; }
.cw-canvas .cw-article .cw-code-label { display: block; margin-bottom: 8px; color: #a7d6ce; font-size: 11px; font-family: inherit; }
.cw-mermaid-diagram { overflow: auto; margin: 1.35em 0; padding: 12px; border: 1px solid #dce7e7; border-radius: 8px; background: #fbfdfd; text-align: center; }
.cw-mermaid-diagram svg { max-width: 100%; height: auto; }
.cw-mermaid-diagram img { display: block; width: 100%; }
.cw-mermaid-error { border: 1px solid #e7c9c9; }
.cw-canvas .cw-article table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; margin: 1.4em 0; border-collapse: collapse; font-size: .92em; }
.cw-canvas .cw-article th, .cw-canvas .cw-article td { padding: 8px 9px; border: 1px solid #dce3e7; text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.cw-canvas .cw-article th { background: #f3f7f8; color: #344650; font-weight: 700; }
.cw-canvas .cw-article img { max-width: 100%; height: auto; }
.cw-style-clean { --cw-accent: #397599; }
.cw-style-story { --cw-accent: #28776f; }
.cw-style-story .cw-article h2 { border-left: 3px solid var(--cw-accent); padding-left: 10px; }
.cw-style-warm { --cw-accent: #b05b43; }
.cw-style-warm .cw-article h2 { display: inline-block; border-bottom: 2px solid #efd2c4; padding-bottom: 4px; }
.cw-canvas .cw-article h2, .cw-canvas .cw-article h3 { color: var(--cw-accent); }
.cw-canvas .cw-byline { margin-bottom: 18px; }
.cw-canvas .cw-summary { padding: 11px 13px; border-left: 3px solid var(--cw-accent); background: #f5f7f7; border-radius: 0; }
.cw-canvas .cw-images img { display: block; width: auto; max-width: 100%; max-height: 520px; object-fit: contain; margin: 18px auto; }
.cw-xhs .cw-cover { max-height: 440px; }
.cw-history-list { display: grid; gap: 8px; max-height: 55vh; overflow: auto; }
.cw-history-list button { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 12px; text-align: left; }
.cw-ai-picker { display: flex; align-items: end; gap: 12px; margin: 8px 0 12px; }
.cw-ai-picker { flex-wrap: wrap; }
.cw-ai-picker .field { width: min(100%, 420px); margin: 0; }
.cw-ai-provider-list { display: grid; gap: 8px; }
.cw-ai-provider-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.cw-ai-provider-row > div:first-child { display: grid; gap: 4px; min-width: 0; }
.cw-ai-provider-row small { color: var(--muted); overflow-wrap: anywhere; }
.cw-ai-provider-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: end; }
.cw-ai-default, .cw-ai-disabled { margin-left: 7px; color: #26715b; font-size: 12px; }
.cw-ai-disabled { color: var(--muted); }
.cw-ai-check { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
@media (max-width: 640px) { .cw-ai-picker { align-items: stretch; } .cw-ai-picker .field { width: 100%; } .cw-ai-provider-row { align-items: start; flex-direction: column; } .cw-ai-provider-actions { justify-content: start; } }
.cw-history-list button:hover { border-color: var(--primary); }
.cw-template-recruitment .cw-article ul { list-style: none; padding: 14px 18px; border-top: 2px solid #397599; background: #f3f7fa; }
.cw-template-recap .cw-article { counter-reset: chapter; }
.cw-template-recap .cw-article h3::before { counter-increment: chapter; content: counter(chapter, decimal-leading-zero) " / "; font-weight: 500; color: #65747b; }
.cw-template-showcase .cw-article { text-align: center; }
.cw-template-showcase .cw-article p { text-align: left; }
.cw-xhs article { padding: 18px 20px 28px; line-height: 1.8; }
.cw-xhs .cw-note-body h1, .cw-xhs .cw-note-body h2, .cw-xhs .cw-note-body h3, .cw-xhs .cw-note-body h4, .cw-xhs .cw-note-body h5, .cw-xhs .cw-note-body h6 { margin: 1.2em 0 .5em; color: var(--cw-accent); }
.cw-xhs .cw-note-body p { margin: .8em 0; }
.cw-xhs .cw-note-body ul, .cw-xhs .cw-note-body ol { padding-left: 1.4em; }
.cw-xhs .cw-note-body pre { overflow-x: auto; padding: 12px; border-radius: 5px; background: #202b31; color: #edf3f4; white-space: pre-wrap; }
.cw-xhs .cw-note-body table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.cw-xhs .cw-note-body th, .cw-xhs .cw-note-body td { padding: 6px; border: 1px solid #dce3e7; white-space: normal; overflow-wrap: anywhere; }
.cw-canvas .cw-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; margin: 20px 0; }
.cw-canvas .cw-photo-grid img { width: 100%; height: auto; margin: 0; }
.cw-canvas .cw-lead-photo img { width: 100%; height: auto; }
.cw-style-story .cw-article blockquote { padding: 16px; border-top: 1px solid #b6d4ce; border-bottom: 1px solid #b6d4ce; border-left: 0; }
.cw-style-warm .cw-article p { line-height: 2.1; margin: 1.4em 0; }
.cw-history-list strong { color: #344650; font-size: 12px; }
.cw-history-list span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cw-material-main > .cw-material-tags { display: flex; flex-wrap: wrap; gap: 5px; color: #60737d; font-size: 11px; }
.cw-material-fieldset { display: grid; gap: 10px; margin: 0; padding: 12px; border: 1px solid #dfe7ea; border-radius: 6px; }
.cw-material-fieldset legend { padding: 0 5px; color: #506771; font-size: 12px; font-weight: 650; }
.cw-material-tag-options { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.cw-material-tag-options label { display: inline-flex; align-items: center; gap: 5px; color: #52656e; font-size: 12px; }
.cw-catalog-manager { display: grid; gap: 20px; }
.cw-catalog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cw-catalog-head h3 { margin: 0; font-size: 15px; }
#cw-material-category, #cw-material-status, #cw-material-tag { min-width: 150px; }
.cw-material-tag-options label { max-width: 100%; overflow-wrap: anywhere; }
.cw-material-tag-options input { flex-shrink: 0; }
.cw-material-editor-modal { display: flex; flex-direction: column; overflow: hidden; }
.cw-material-editor-modal .modal-head, .cw-material-editor-modal .modal-foot { flex-shrink: 0; }
.cw-material-editor-modal .modal-body { min-height: 0; overflow-y: auto; }
.cw-catalog-list { display: grid; gap: 7px; }
.cw-catalog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 10px; border: 1px solid #e0e7e9; border-radius: 5px; background: #fff; }
.cw-catalog-row > span { min-width: 0; overflow-wrap: anywhere; color: #344b55; font-size: 13px; }
.cw-catalog-row small { margin-left: 6px; color: var(--muted); font-size: 11px; }
.cw-catalog-row .cw-catalog-actions { display: flex; flex: 0 0 auto; gap: 5px; }
@media (max-width: 640px) { .cw-catalog-head { align-items: stretch; flex-direction: column; } .cw-catalog-row { align-items: start; flex-direction: column; } .cw-catalog-row .cw-catalog-actions { width: 100%; justify-content: flex-end; } }
@media (max-width: 640px) { .cw-preview-toolbar { gap: 7px; } .cw-canvas.cw-device-desktop { width: 100%; } .cw-source { min-height: 230px; } }
.cw-canvas.cw-device-desktop { display: flex; flex-direction: column; }
.cw-device-desktop .cw-reading-scroll { min-height: 0; }
.cw-ai-compare .cw-canvas.cw-phone-frame { height: 52vh; }
@media (max-width: 640px) { #cw-preview { padding: 16px 8px; } .cw-form-panel { padding: 16px; } .cw-reader-footer { gap: 7px; } }

/* Theme rules are scoped to article content; phone chrome stays unchanged. */
.cw-canvas .cw-themed-article { padding: 22px 10px 30px; }
.cw-themed-article > h1, .cw-themed-article > .cw-byline, .cw-themed-article > .cw-summary { margin-left: 8px; margin-right: 8px; }
.cw-themed-article [data-cw-theme] { min-width: 0; }
.cw-template-recap .cw-themed-article h3::before { content: none; }
.cw-theme-trigger { display: inline-flex; align-items: center; gap: 9px; flex: 1; min-width: 170px; max-width: 280px; padding: 7px 10px; border: 1px solid #ccd8df; border-radius: 8px; background: #fff; color: #344b59; text-align: left; cursor: pointer; }
.cw-theme-trigger:hover, .cw-theme-trigger[aria-expanded="true"] { border-color: #397599; background: #f7fafc; }
.cw-theme-trigger:focus-visible { outline: 2px solid #397599; outline-offset: 2px; }
.cw-theme-trigger:disabled { opacity: .55; cursor: not-allowed; }
.cw-theme-trigger-icon { color: #397599; font-size: 22px; }
.cw-theme-trigger-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cw-theme-trigger-copy > span { color: #70838d; font-size: 10px; }
.cw-theme-trigger-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.cw-theme-hint { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.cw-style-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #dce3e8; padding-bottom: 12px; margin-bottom: 24px; }
.cw-style-tabs button { max-width: 100%; overflow-wrap: anywhere; padding: 8px 14px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #5d6774; cursor: pointer; font: inherit; font-size: 13px; }
.cw-style-tabs button[aria-selected="true"] { background: #fff; border-color: #cbd6d1; color: #176747; font-weight: 600; }
.cw-style-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.6fr); gap: 28px; }
.cw-style-references, .cw-style-guides { min-width: 0; }
.cw-style-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; min-height: 38px; }
.cw-style-section-head h2 { overflow-wrap: anywhere; font-size: 17px; margin: 0; }
.cw-style-section-head small { color: #7c8691; font-size: 12px; font-weight: 400; margin-left: 5px; }
.cw-type-settings { padding: 20px; margin-bottom: 24px; }
.cw-type-settings > p { color: #697584; font-size: 12px; line-height: 1.7; margin: 0 0 14px; }
.cw-type-settings details { font-size: 12px; color: #697584; margin-top: 14px; }
.cw-type-settings pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.7; }
.cw-type-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.cw-type-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cw-type-settings-grid textarea { width: 100%; min-height: 120px; line-height: 1.7; resize: vertical; }
.cw-reference-row { display: flex; gap: 6px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e0e5e9; }
.cw-reference-row label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.cw-reference-row label > span { display: grid; gap: 5px; min-width: 0; }
.cw-reference-row strong { font-size: 13px; overflow-wrap: anywhere; }
.cw-reference-row time, .cw-style-meta { color: #7c8691; font-size: 11px; }
.cw-reference-row button { flex-shrink: 0; padding: 5px 7px; }
.cw-style-meta { margin-bottom: 16px; line-height: 1.8; }
.cw-guide-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cw-guide-comparison > div, .cw-guide-comparison > label { min-width: 0; margin: 0; }
.cw-guide-comparison h3, .cw-guide-comparison .field > span { font-size: 13px; margin: 0 0 9px; font-weight: 600; min-height: 22px; }
.cw-guide-comparison small { display: block; color: #7c8691; font-size: 10px; font-weight: 400; margin-top: 3px; }
.cw-guide-comparison pre { min-height: 330px; max-height: 480px; overflow: auto; padding: 14px; border-left: 2px solid #d0ded7; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.8; color: #53605a; background: #f1f5f3; }
.cw-guide-comparison textarea { width: 100%; min-height: 330px; resize: vertical; line-height: 1.8; font-size: 13px; }
.cw-guide-active-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.cw-guide-active-head h3 { flex: 1; }
.cw-guide-active-head button { flex-shrink: 0; }
.cw-guide-comparison pre.cw-guide-expanded { max-height: none; overflow: visible; }
.cw-reference-body { min-height: 280px; line-height: 1.8; resize: vertical; }
.cw-style-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding-top: 16px; }
.cw-style-actions > span { margin-right: auto; color: #a25a15; font-size: 12px; }
@media (max-width: 1150px) { .cw-guide-comparison { grid-template-columns: minmax(0, 1fr); } .cw-guide-comparison pre { min-height: 90px; max-height: 200px; } }
@media (max-width: 780px) { .cw-style-layout, .cw-type-settings-grid { grid-template-columns: minmax(0, 1fr); } .cw-type-settings .cw-style-section-head { flex-direction: column; align-items: stretch; } .cw-type-actions { justify-content: flex-start; } .cw-style-guides { border-top: 1px solid #dce3e8; padding-top: 24px; } .cw-style-tabs { gap: 2px; } .cw-style-tabs button { max-width: 100%; overflow-wrap: anywhere; padding: 8px 9px; font-size: 12px; } }
.cw-theme-modal { display: flex; flex-direction: column; width: min(100%, 1160px); max-width: 1160px; height: min(860px, calc(100vh - 40px)); max-height: calc(100vh - 40px); overflow: hidden; }
.cw-theme-modal .modal-head, .cw-theme-modal .modal-foot { flex-shrink: 0; }
.cw-theme-modal .modal-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding-bottom: 0; }
.cw-theme-filters { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-shrink: 0; margin-bottom: 14px; }
.cw-theme-filters strong { font-size: 14px; color: #344b59; }
.cw-theme-intro { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.cw-theme-search-label { display: grid; gap: 4px; flex: 0 1 260px; min-width: 160px; font-size: 11px; color: var(--muted); }
.cw-theme-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; flex-shrink: 0; padding-bottom: 12px; }
.cw-theme-categories > span { margin-right: 3px; font-size: 12px; color: var(--muted); }
.cw-theme-categories button { padding: 6px 13px; border: 1px solid #dde5e9; border-radius: 20px; background: #fff; color: #546975; font-size: 12px; cursor: pointer; }
.cw-theme-categories button[aria-pressed="true"] { background: #2c4554; color: #fff; border-color: #2c4554; }
.cw-theme-count { flex-shrink: 0; margin: 0; padding: 0 0 12px; color: var(--muted); font-size: 11px; }
.cw-theme-results { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 20px; scrollbar-width: thin; }
.cw-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; }
.cw-theme-card { display: block; width: 100%; padding: 0; overflow: hidden; min-width: 0; text-align: left; border: 1px solid #dfe6e9; border-radius: 9px; background: #fff; cursor: pointer; color: #31454f; transition: border-color .15s, box-shadow .15s; }
.cw-theme-card:hover { border-color: #7f9daf; box-shadow: 0 4px 14px #26384312; }
.cw-theme-card[aria-pressed="true"] { outline: 2px solid #397599; outline-offset: 1px; border-color: #397599; }
.cw-theme-card:focus-visible { outline: 3px solid #397599; outline-offset: 2px; }
.cw-theme-card-head { display: block; min-height: 70px; padding: 12px 14px; border-bottom: 1px solid #e9edef; }
.cw-theme-card-name { display: block; margin-bottom: 7px; font-weight: 650; font-size: 14px; overflow-wrap: anywhere; }
.cw-theme-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: #6c8089; font-size: 10px; }
.cw-theme-card-tags > span { padding: 2px 6px; background: #f1f5f6; border-radius: 4px; }
.cw-theme-card-tags > b { margin-left: auto; color: #397599; font-weight: 600; }
.cw-theme-thumb { display: block; height: 330px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; background: #fff; }
.cw-theme-sample { display: block; width: 100%; }
.cw-theme-sample > section { min-height: 330px; }
.cw-theme-card-action { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-top: 1px solid #e9edef; color: #6c8089; font-size: 11px; }
.cw-theme-card[aria-pressed="true"] .cw-theme-card-action { background: #f3f8fa; color: #397599; }
.cw-theme-selection { margin-right: auto; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cw-theme-modal .modal-foot { flex-wrap: wrap; }
@media (max-width: 960px) { .cw-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cw-theme-modal .modal-head { padding: 16px 16px 12px; }
  .cw-theme-modal .modal-body { padding-left: 12px; padding-right: 12px; }
  .cw-theme-modal .modal-foot { padding: 10px 16px; }
  .cw-theme-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cw-theme-filters { align-items: stretch; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .cw-theme-search-label { flex-basis: auto; min-width: 0; }
  .cw-theme-categories { gap: 5px; }
  .cw-theme-categories button { padding: 5px 10px; }
  .cw-theme-thumb { height: 310px; }
}

.cw-learning-library { padding:24px; margin-top:24px; }
.cw-learning-modal { width:min(1100px,96vw); }
.cw-learning-columns,.cw-learning-evidence { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cw-learning-columns section { min-width:0; border:1px solid #ddd; padding:12px; }
.cw-learning-columns pre,.cw-learning-modal pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; }
.cw-learning-candidate { border:1px solid #ddd; border-radius:12px; margin:16px 0; padding:16px; overflow-wrap:anywhere; }
.cw-learning-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.cw-learning-evidence blockquote { margin:6px 0; padding:8px; background:#f5f7f9; overflow-wrap:anywhere; }
@media(max-width:640px) { .cw-learning-columns,.cw-learning-evidence { grid-template-columns:1fr; } .cw-learning-library { padding:12px; } }

.cw-learning-multi-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid #e9edf2; overflow-wrap:anywhere; }
.cw-learning-result details { margin:8px 0; }
.cw-learning-candidate > p { white-space:pre-line; }