.pwl-serial-root { min-width:0; }
.pwl-serial-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 24px; }
.pwl-serial-toolbar h2 { font-size:18px; font-weight:600; }
.pwl-serial-toolbar p { color:var(--pwl-color-muted); font-size:14px; }
.pwl-serial-cards { display:flex; flex-wrap:wrap; gap:24px; }
.pwl-serial-card { flex:0 0 calc((100% - 48px)/3); min-width:0; overflow:hidden; border:1px solid var(--pwl-color-border); border-radius:12px; }
.pwl-serial-coverlink { display:block; height:230px; background:var(--pwl-color-surface); }
.pwl-serial-coverlink>img { width:100%; height:100%; object-fit:cover; }
.pwl-serial-placeholder { display:flex; align-items:center; justify-content:center; min-height:180px; background:var(--pwl-color-surface); font-size:13px; color:var(--pwl-color-muted); }
.pwl-serial-cardbody { padding:20px; }
.pwl-serial-meta { font-size:12px; color:var(--pwl-color-muted); line-height:1.7; }
.pwl-serial-cardbody h2 { font-size:19px; font-weight:600; margin:10px 0; overflow-wrap:anywhere; }
.pwl-serial-cardbody p { font-size:13px; color:var(--pwl-color-muted); line-height:1.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:46px; }
.pwl-serial-cardfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; font-size:13px; }
.pwl-serial-cardfoot .pwl-button { font-size:12px; padding:8px 10px; }
.pwl-serial-empty { padding:75px 20px; text-align:center; border:1px dashed var(--pwl-color-border); border-radius:12px; margin-bottom:24px; }
.pwl-serial-empty h2 { font-size:20px; font-weight:500; margin-bottom:14px; }
.pwl-serial-empty p { font-size:14px; color:var(--pwl-color-muted); line-height:1.8; }
.pwl-serial-form { padding:28px; border:1px solid var(--pwl-color-border); border-radius:12px; background:var(--pwl-color-white); }
.pwl-serial-formintro { display:flex; gap:32px; align-items:flex-start; }
.pwl-serial-coveredit { flex:0 0 220px; display:flex; flex-direction:column; gap:12px; }
.pwl-serial-coverimage { width:100%; height:290px; object-fit:cover; border-radius:9px; }
.pwl-serial-coveredit small { font-size:11px; color:var(--pwl-color-muted); }
.pwl-serial-formfields { flex:1; min-width:0; }
.pwl-serial-form .pwl-field { display:flex; flex-direction:column; gap:9px; width:100%; min-width:0; margin:0 0 22px; font-size:14px; }
.pwl-serial-form .pwl-field input,.pwl-serial-form .pwl-field select,.pwl-serial-form .pwl-field textarea { width:100%; min-width:0; padding:12px; font-size:14px; border:1px solid var(--pwl-color-border); border-radius:7px; background:var(--pwl-color-white); color:var(--pwl-color-text); }
.pwl-serial-form .pwl-field textarea { resize:vertical; line-height:1.7; }
.pwl-serial-fieldrow { display:flex; gap:18px; }
.pwl-serial-fieldrow>.pwl-field { flex:1; }
.pwl-serial-formbuttons { display:flex; justify-content:flex-end; padding-top:24px; border-top:1px solid var(--pwl-color-border); }
.pwl-serial-error { color:var(--pwl-color-danger); font-size:13px; margin:15px 0; }
.pwl-serial-error:empty { display:none; }
.pwl-serial-linkbutton { padding:4px; border:0; background:transparent; color:var(--pwl-color-muted); font-size:12px; }
.pwl-serial-hero { display:flex; gap:30px; padding:28px; border:1px solid var(--pwl-color-border); border-radius:12px; margin-bottom:35px; }
.pwl-serial-herocover { flex-shrink:0; width:180px; height:230px; object-fit:cover; border-radius:8px; }
.pwl-serial-heroinfo { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.pwl-serial-heroinfo h2 { font-size:26px; font-weight:600; margin:12px 0; overflow-wrap:anywhere; }
.pwl-serial-heroinfo>p { font-size:14px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 22px; }
.pwl-serial-heroactions { display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; }
.pwl-serial-episodes { border-top:1px solid var(--pwl-color-border); }
.pwl-serial-episode { display:flex; align-items:center; gap:20px; padding:20px 0; border-bottom:1px solid var(--pwl-color-border); }
.pwl-serial-episodethumb { width:110px; height:76px; min-height:76px; flex-shrink:0; object-fit:cover; border-radius:7px; }
.pwl-serial-episodebody { flex:1; min-width:0; }
.pwl-serial-episodebody h3 { margin:7px 0; font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.pwl-serial-episodebody small { font-size:12px; color:var(--pwl-color-muted); }
.pwl-serial-demo { color:var(--pwl-color-muted); font-size:12px; line-height:1.8; margin-top:30px; }
.pwl-serial-dialog { width:min(850px,calc(100% - 32px)); max-width:850px; }
.pwl-serial-dialog .pwl-serial-form { padding:0; border:0; }
.pwl-serial-dialog .pwl-serial-coveredit { flex-basis:180px; }
.pwl-serial-uploadmode { display:flex; gap:6px; padding:4px; width:fit-content; background:var(--pwl-color-surface); border-radius:9px; margin:0 0 22px; }
.pwl-serial-uploadmode button { border:0; border-radius:7px; padding:10px 18px; color:var(--pwl-color-muted); background:transparent; font-size:14px; font-weight:500; }
.pwl-serial-uploadmode button[aria-pressed=true] { color:var(--pwl-color-text); background:var(--pwl-color-white); }
.pwl-serial-attach { padding:24px; margin-bottom:24px; border:1px solid var(--pwl-color-border); border-radius:12px; }
.pwl-serial-attachhead { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.pwl-serial-attachhead h2 { font-size:17px; font-weight:600; }
.pwl-serial-attach>.pwl-field { display:flex; flex-direction:column; gap:9px; }
.pwl-serial-attach select { width:100%; min-height:44px; }
.pwl-serial-thumbfield { display:flex; gap:20px; align-items:center; margin-top:20px; }
.pwl-serial-thumbpreview { width:150px; height:100px; position:relative; display:flex; justify-content:center; align-items:center; flex-shrink:0; border-radius:7px; overflow:hidden; background:var(--pwl-color-surface); }
.pwl-serial-thumbpreview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pwl-serial-thumbpreview span { color:var(--pwl-color-muted); font-size:12px; }
.pwl-serial-thumbfield .pwl-button { font-size:12px; margin:0 5px 8px 0; }
.pwl-serial-publishcontext { padding:16px 20px; border:1px solid var(--pwl-color-border); border-radius:7px; margin-bottom:24px; font-size:14px; }
.pwl-serial-readerhead { text-align:center; margin-bottom:30px; }
.pwl-serial-readerhead p { font-size:14px; color:var(--pwl-color-muted); }
.pwl-serial-readerhead h2 { font-size:24px; font-weight:600; margin-top:12px; overflow-wrap:anywhere; }
.pwl-serial-reader { max-width:800px; margin:30px auto; background:var(--pwl-color-white); }
.pwl-serial-reader img { display:block; width:100%; height:auto; }
.pwl-serial-reader--pages img+img { margin-top:24px; }
.pwl-serial-reader-nav { display:flex; justify-content:center; align-items:center; gap:14px; padding:15px 0; }
.pwl-serial-disabled { font-size:13px; color:var(--pwl-color-muted); padding:10px 16px; }
.pwl-serial-authornote { max-width:800px; margin:30px auto; padding:24px 0; border-top:1px solid var(--pwl-color-border); }
.pwl-serial-authornote h3 { font-size:15px; font-weight:500; }
.pwl-serial-authornote p { font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; margin-top:12px; }
@media(max-width:1200px) { .pwl-serial-card { flex-basis:calc((100% - 24px)/2); } .pwl-serial-formintro { gap:24px; } .pwl-serial-coveredit { flex-basis:180px; } }
@media(max-width:820px) { .pwl-serial-formintro { flex-direction:column; align-items:stretch; } .pwl-serial-coveredit { flex-basis:auto; max-width:220px; } .pwl-serial-herocover { width:130px; height:180px; } }
@media(max-width:600px) { .pwl-serial-card { flex-basis:100%; } .pwl-serial-form,.pwl-serial-attach { padding:18px; } .pwl-serial-hero { flex-direction:column; padding:20px; gap:20px; } .pwl-serial-heroactions { width:100%; } .pwl-serial-heroactions .pwl-button { font-size:12px; } .pwl-serial-fieldrow { flex-direction:column; gap:0; } .pwl-serial-episode { gap:12px; flex-wrap:wrap; } .pwl-serial-episodethumb { width:85px; height:65px; min-height:65px; } .pwl-serial-episode>.pwl-button { font-size:12px; margin-left:auto; } .pwl-serial-episodebody h3 { font-size:14px; } .pwl-serial-thumbfield { flex-direction:column; align-items:flex-start; gap:12px; } .pwl-serial-attachhead .pwl-button { font-size:12px; } .pwl-serial-reader-nav { gap:7px; } .pwl-serial-reader-nav .pwl-button,.pwl-serial-disabled { font-size:12px; padding:9px 12px; } }