.article-module-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.article-module-card { display:flex;flex-direction:column;align-items:flex-start;min-height:260px;padding:26px;border:1px solid #e0e5ef;border-radius:10px;background:#fff;color:#17294c;text-align:left;cursor:pointer;transition:transform .16s,border-color .16s; }
.article-module-card:hover { transform:translateY(-3px);border-color:#434af9; }
.article-module-icon { display:grid;place-items:center;width:60px;height:60px;margin-bottom:22px;border-radius:14px;background:#eef0ff;color:#434af9;font-size:25px;font-weight:700; }
.article-module-card:nth-child(1) .article-module-icon { color:#218864;background:#eaf7f0; }
.article-module-card:nth-child(2) .article-module-icon { color:#dc6048;background:#fff0ec; }
.article-module-card:nth-child(3) .article-module-icon { color:#d24771;background:#fff0f5; }
.article-module-card h2 { margin:0 0 12px;font-size:21px; }.article-module-card p { margin:0 0 18px;color:#7b879e;font-size:13px;line-height:1.8; }.article-module-card small { margin-top:auto;color:#434af9; }
.article-tabs { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid #e1e5ed; }
.article-tabs button,.article-segment button { padding:9px 15px;border:1px solid transparent;border-radius:7px;background:transparent;color:#7b879e;font-size:13px;cursor:pointer; }
.article-tabs button.active,.article-segment button.active { color:#434af9;background:#eef0ff;border-color:#dce0ff; }
.article-workbench { display:grid;grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);align-items:start;gap:22px; }
.article-output-column { display:grid;gap:20px;min-width:0; }.article-studio-page .panel { padding:22px;border:1px solid #e1e5ed;border-radius:10px;min-width:0; }
.article-studio-page h2 { margin:0 0 12px;font-size:18px; }.article-studio-page .panel-heading h2 { margin:0; }
.article-studio-page label { display:grid;gap:8px;margin:0 0 15px;color:#52617b;font-size:13px; }.article-studio-page fieldset { min-width:0;margin:0;padding:0;border:0; }
.article-studio-page input:not([type=checkbox]),.article-studio-page select,.article-studio-page textarea { box-sizing:border-box;width:100%;min-width:0;min-height:42px;padding:10px 12px;border:1px solid #e1e5ed;border-radius:7px;color:#263754;background:#fff;font:inherit;font-size:13px;line-height:1.6; }
.article-studio-page textarea { resize:vertical; }.article-studio-page input:disabled,.article-studio-page textarea:disabled { background:#f6f7fa;color:#8290a5; }
.article-studio-page .article-checkbox { display:flex;align-items:center;gap:8px;line-height:1.6; }.article-checkbox input { accent-color:#434af9; }
.article-form-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.article-cost,.article-hint { color:#8590a5;font-size:12px;line-height:1.8;margin:12px 0; }
.article-topic-mode { display:flex;gap:6px;padding:4px;margin-bottom:18px;border:1px solid #e1e5ed;border-radius:8px;background:#f7f8fc; }.article-topic-mode button { flex:1;min-height:38px;border:0;border-radius:5px;background:transparent;color:#71809b;cursor:pointer;font-size:13px; }.article-topic-mode button.active { background:#fff;color:#434af9;box-shadow:0 1px 4px #17294c0a; }
.article-hotspot-panel { padding:15px;margin-bottom:18px;border:1px solid #dce1f8;border-radius:8px;background:#fafbff; }.article-hotspot-heading { display:flex;align-items:center;justify-content:space-between;gap:10px; }.article-hotspot-heading h3 { margin:0;font-size:16px;color:#263754; }.article-hotspot-heading p { margin:7px 0 0;font-size:12px;color:#7c89a3; }.article-hotspot-heading button { flex-shrink:0;color:#434af9; }.article-hotspot-empty { padding:20px 8px;text-align:center;font-size:12px;color:#8490a7;line-height:1.8; }.article-collection-meta { margin:14px 0;color:#6d7895;font-size:11px;line-height:1.8; }.article-topic-source { max-height:260px;overflow-y:auto;padding:12px 0;border-top:1px solid #e6e9f1; }.article-topic-source>strong { display:flex;justify-content:space-between;color:#3d4c68;font-size:13px; }.article-topic-source small { color:#8c97ab;font-size:11px;font-weight:400; }.article-topic-item { display:flex;align-items:flex-start;gap:8px;width:100%;padding:9px 8px;margin-top:7px;border:1px solid transparent;border-radius:5px;background:#fff;text-align:left;font-size:12px;line-height:1.7;color:#66748d;cursor:pointer; }.article-topic-item span { flex-shrink:0;color:#8c96b3; }.article-topic-item.is-selected { color:#434af9;border-color:#cdd1ff;background:#eef0ff; }.article-topic-item.is-selected span { color:#434af9; }
.article-studio-page .primary-button { min-height:42px; }.article-secondary-actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:12px; }.article-studio-page .ghost-button { min-height:38px; }
.article-alert { padding:12px 16px;border:1px solid #dce2ff;border-radius:8px;color:#53658e;background:#f3f5ff;font-size:13px;line-height:1.7;overflow-wrap:anywhere; }.article-alert.is-error { color:#a9434d;border-color:#f2d4d9;background:#fff5f6; }
.article-alert p { margin:0 0 10px; }.article-status { white-space:nowrap;color:#747e9c;font-size:12px; }
.article-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px; }.article-step { display:flex;align-items:center;gap:9px;min-height:68px;padding:10px;border:1px solid #e1e5ed;border-radius:8px;color:#63718b;background:#fafbfe;text-align:left;cursor:pointer; }.article-step>span { display:grid;place-items:center;flex-shrink:0;width:25px;height:25px;border-radius:50%;background:#eef0f5;font-size:12px; }.article-step strong,.article-step small { display:block; }.article-step strong { font-size:12px; }.article-step small { margin-top:5px;font-size:11px;color:#9099ac; }.article-step.is-current { border-color:#b8bdff;background:#f3f4ff; }.article-step.is-done>span { color:#18835d;background:#e9f7f0; }
.article-selected-topic { display:grid;gap:7px;padding:14px;margin-bottom:0;border-radius:8px;background:#f7f8fb;color:#58677f;font-size:13px;line-height:1.7; }.article-selected-topic small { color:#8a94a6; }
.article-segment { display:flex; }.article-segment button { padding:7px 10px;font-size:12px; }.article-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:210px;color:#8b97ad;text-align:center;font-size:13px;line-height:1.8; }.article-empty>span { font-size:38px;color:#a8afff; }.article-empty strong { margin-top:10px;color:#6f7c95; }.article-empty p { margin:8px 0; }
.article-preview { padding:10px 8px;overflow-wrap:anywhere; }.article-title-options { display:flex;gap:7px;flex-wrap:wrap;margin:0 0 15px; }.article-title-options button { padding:7px 9px;border:1px solid #e1e5ed;border-radius:6px;background:#f9faff;color:#606f8a;text-align:left;font-size:12px;cursor:pointer; }
.article-outline { margin:12px 0 18px;color:#65738e;font-size:13px; }.article-outline summary { cursor:pointer;margin-bottom:12px; }
.article-layout-grid { display:grid;grid-template-columns:minmax(250px,.55fr) minmax(0,1.45fr);gap:22px;align-items:start; }.article-export-actions { display:grid;gap:10px; }.article-export-panel>p { color:#7f8a9f;font-size:13px;line-height:1.8; }
.article-image-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:22px; }.article-image-card { display:grid;align-content:start;gap:12px;min-width:0;padding:14px;border:1px solid #e1e5ed;border-radius:9px; }.article-image-card>strong { font-size:14px;color:#334760; }.article-image-card label { margin:0; }
.article-image-preview,.article-cover { position:relative;overflow:hidden;border-radius:8px;background:#f4f5f8; }.article-image-preview img,.article-cover img { display:block;width:100%;height:auto;max-height:360px;object-fit:contain; }.article-image-preview.is-rednote,.article-cover.is-rednote { aspect-ratio:3/4;max-width:400px;margin:auto; }.article-image-preview.is-rednote img,.article-cover.is-rednote img { height:100%;max-height:none;object-fit:cover; }.article-image-preview>strong,.article-cover>strong { position:absolute;inset:auto 0 0;padding:50px 20px 24px;color:#fff;font-size:24px;line-height:1.5;background:linear-gradient(transparent,#101a35db); }.article-image-placeholder { display:grid;place-items:center;min-height:150px;border-radius:7px;background:#f4f5f8;color:#97a0b3; }
.article-cover { margin:0 8px 24px; }.article-history-row { display:flex;justify-content:space-between;gap:20px;width:100%;padding:18px 8px;border:0;border-bottom:1px solid #edf0f5;background:#fff;color:#62728d;text-align:left;cursor:pointer; }.article-history-row strong { display:block;color:#334760;font-size:14px; }.article-history-row small { display:block;margin-top:7px;color:#9099ac;font-size:12px; }.article-history-row>span:last-child { flex-shrink:0;font-size:12px; }
.article-settings { max-width:940px; }.article-settings h2:not(:first-child) { margin-top:24px; }.article-settings>.primary-button { margin-top:18px; }
.article-studio-page button:focus-visible,.article-studio-page input:focus-visible,.article-studio-page textarea:focus-visible,.article-studio-page select:focus-visible,.article-module-card:focus-visible { outline:2px solid #434af9;outline-offset:3px; }
@media(min-width:1081px){.module-entry-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.module-entry-card h2{font-size:24px}.module-entry-card .feature-card-copy{width:72%}.module-entry-card p{max-width:180px}.module-entry-art{width:32%;height:130px;opacity:.75}}
@media(min-width:721px) and (max-width:1080px){.module-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.article-workbench{grid-template-columns:1fr}.article-layout-grid{grid-template-columns:1fr}.article-module-grid{gap:12px}.article-module-card{padding:20px}}
@media(max-width:768px){.mobile-bottom-nav{grid-template-columns:repeat(7,minmax(0,1fr))}.article-module-grid{grid-template-columns:1fr}.article-module-card{min-height:190px}.article-module-icon{margin-bottom:14px}.article-studio-page .panel{padding:16px}.article-tabs{gap:4px}.article-tabs button{padding:8px 10px;font-size:12px}.article-form-row{grid-template-columns:1fr;gap:0}.article-studio-page input:not([type=checkbox]),.article-studio-page textarea,.article-studio-page select{font-size:16px}.article-steps{gap:6px}.article-step{padding:9px 6px;gap:5px}.article-step>span{width:21px;height:21px}.article-history-row{gap:12px}.article-history-row strong{font-size:13px}.article-image-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.article-module-card{transition:none}}