/* Admin v5 native tokens: header64 / side224 / padding24,28 / gap20. */
:root{--pen-bg:#f5f8fd;--pen-sidebar:#ecf4ff;--pen-text:#192b45;--pen-muted:#56677d;--pen-line:#dde6f1;--pen-control:#8397b3;--pen-blue:#2f6fed;--pen-soft:#dcebff}
html{overflow-anchor:none}
.pen-admin{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.5;color:var(--pen-text);background:var(--pen-bg)}
.pen-admin .admin-header{height:64px;left:0;right:0;top:0;position:fixed;z-index:20;gap:24px;padding:0 24px;margin:0;width:100%;border-bottom:1px solid var(--pen-line);background:white;box-shadow:none}
.pen-brand{width:180px;flex:none;display:flex;align-items:center;gap:10px;height:44px;color:var(--pen-text)}.pen-brand strong{font-size:21px;font-weight:600}.pen-brand .pen-icon{width:23px;height:23px;color:var(--pen-blue)}.pen-workspace{font-size:14px;color:var(--pen-muted)}
.pen-icon{width:18px;height:18px;flex:none;display:block}.pen-admin .pen-bell{padding:0;background:none;color:var(--pen-muted);border:0;height:20px;min-height:0;width:20px}.pen-admin .pen-bell .pen-icon{width:20px;height:20px}.pen-admin .pen-user{padding:0;border:0;font-size:13px;min-height:0;color:var(--pen-text)}
.pen-admin .admin-sidebar{top:64px;left:0;width:224px;height:calc(100vh - 64px);padding:22px 16px;background:var(--pen-sidebar);gap:7px;border:0;display:flex;flex-direction:column;overflow:auto}
.pen-space-label{font-size:12px;font-weight:600;color:var(--pen-muted);line-height:18px;margin-bottom:0}
.pen-admin .admin-sidebar button{height:40px;min-height:40px;flex-shrink:0;padding:0 12px;font-size:14px;line-height:21px;display:flex;gap:10px;justify-content:flex-start;border-radius:8px;color:var(--pen-muted);background:transparent;margin:0;border:0;font-weight:400}
.pen-admin .admin-sidebar button.active{background:var(--pen-soft);color:#214f9e;font-weight:600}.pen-admin .admin-sidebar button.pen-sub{height:30px;min-height:30px;border-radius:6px;font-size:13px;padding:0 24px;gap:12px}
.pen-admin .admin-content{margin-left:224px;margin-top:64px;padding:24px 28px;min-height:calc(100vh - 64px);background:var(--pen-bg);width:calc(100% - 224px)}
.pen-admin .page-heading{margin:0 0 20px;min-height:63px;align-items:center;gap:12px}.pen-admin .page-heading h1{font-size:26px;font-weight:600;line-height:39px;margin:0 0 4px;color:var(--pen-text)}.pen-admin .page-heading p{font-size:13px;line-height:19.5px;color:var(--pen-muted);margin:0}
.pen-admin .card{padding:20px;border-radius:12px;border:1px solid var(--pen-line);background:#fff;box-shadow:none;margin:0 0 16px}.pen-admin .card h2{font-size:18px;line-height:27px;font-weight:600;margin:0 0 16px}.pen-admin .w-card h2{font-size:18px}
.pen-admin .w-split{grid-template-columns:minmax(0,1fr) 460px;gap:20px;margin-top:0}.pen-admin .w-grid{gap:16px 20px}.pen-admin .w-field label{font-size:14px;line-height:21px;color:var(--pen-muted);margin:0 0 7px}
.pen-admin .w-field input,.pen-admin .w-field select{height:40px;min-height:40px;font-size:14px;line-height:21px;padding:0 12px;border:1px solid var(--pen-control);border-radius:8px;color:var(--pen-text)}
.pen-admin .w-field textarea{border-color:var(--pen-control);border-radius:8px;padding:12px;font-size:14px;line-height:21px;min-height:112px}
.pen-admin button{font-size:14px;font-weight:500;border-radius:8px;padding:0 16px;min-height:40px;line-height:21px}.pen-admin .primary{background:var(--pen-blue);border:0;color:white}.pen-admin .secondary{background:white;border:1px solid var(--pen-line);color:#214f9e}.pen-admin .link{min-height:0;padding:4px 6px;background:none;border:0}.pen-admin .muted{color:var(--pen-muted);font-size:13px;line-height:19.5px}
.pen-admin .w-preview{top:88px;padding:0;border:0;border-radius:0;background:none;max-height:calc(100vh - 110px);overflow:auto}.pen-admin .w-preview-head{display:none}.pen-admin .w-tabs{height:37px;gap:22px;padding:0;border-bottom:1px solid var(--pen-line);margin:0 0 12px;justify-content:flex-start}.pen-admin .w-tabs button{flex:none;min-height:37px;font-size:14px;padding:0;border-radius:0;color:var(--pen-muted);background:none}.pen-admin .w-tabs button.active{border-bottom:2px solid var(--pen-blue);color:#214f9e;font-weight:600;background:none}
.pen-preview-card{background:white;border:1px solid var(--pen-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}.pen-preview-card>header{display:flex;justify-content:space-between;align-items:center;gap:10px}.pen-preview-card h2{font-size:18px;margin:0;line-height:27px}.pen-preview-card>p{margin:0;font-size:13px;color:var(--pen-muted)}
.pen-admin .w-preview.pen-preview-expanded,.w-preview.pen-preview-expanded{position:fixed;right:22px;top:20px;width:520px;z-index:40;max-height:calc(100vh - 40px);background:#f5f8fd;border:1px solid #dde6f1;padding:16px;box-shadow:0 12px 80px #192b4540}

.pen-admin .w-preview #file-preview{padding:0}.pen-admin .w-preview #file-preview .w-paper{width:100%;min-height:100%}
.pen-admin input[type=checkbox]{accent-color:var(--pen-blue);width:18px;height:18px;flex-shrink:0}.pen-admin .checkline{font-size:14px;line-height:21px;gap:8px;color:var(--pen-text);margin:8px 0;min-height:32px}
.pen-admin .notice{border-radius:8px;background:#eaf2ff;color:#315f96;padding:12px 14px;font-size:14px;line-height:21px}.pen-admin .notice.warning{background:#fff5de;color:#8c621e}
.pen-admin .w-template-bar{padding:16px;display:grid;gap:10px}.w-template-bar .row strong{font-size:15px}.w-template-bar p{font-size:13px;margin:0;color:var(--pen-muted)}
.pen-admin .w-steps{padding:16px;min-height:58px;gap:12px;margin-bottom:16px;border-radius:12px;font-size:14px;justify-content:space-between}.pen-admin .w-steps span{display:flex;gap:10px;align-items:center}.pen-step-number{width:26px;height:26px;display:grid;place-items:center;border-radius:5px;background:#eaf2ff;color:#315f96;font-size:12px;font-weight:500}
.pen-keyvalues{display:grid;gap:16px}.pen-keyvalues>div{display:flex;gap:16px;align-items:flex-start;line-height:21px;font-size:14px}.pen-keyvalues dt{min-width:150px;flex:none;color:var(--pen-muted);font-size:13px}.pen-keyvalues dd{margin:0;color:var(--pen-text)}
.pen-source-table{margin:16px 0;border-top:1px solid var(--pen-line)}.pen-source-head,.pen-source-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;align-items:center;gap:16px;margin:0;padding:12px;font-size:14px;border-bottom:1px solid var(--pen-line);min-height:60px}.pen-source-head{min-height:44px;background:#f1f6fd;color:var(--pen-muted);font-size:13px}.pen-source-row>span:first-child{display:flex;align-items:center;gap:8px}.pen-source-row .badge{width:max-content}
/* D01 from the v16 H5 design: 390px canvas, 28px status, 56px nav, 20px horizontal padding. */
.h5-shell.pen-h5{max-width:390px;min-height:100vh;font-family:"Noto Sans SC","PingFang SC",sans-serif;background:#fafaf9;color:#213e34;box-shadow:none;display:flex;flex-direction:column}
.pen-h5 .pen-statusbar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:12px;line-height:18px;background:#fafaf9;flex-shrink:0}
.pen-h5 .h5-head{height:56px;min-height:56px;position:static;display:flex;justify-content:space-between;padding:0 12px;gap:8px;border:0;background:#fafaf9;box-shadow:none;flex-shrink:0}.pen-h5 .h5-head strong{font-size:18px;font-weight:600}.pen-h5 .h5-head button{width:44px;height:44px;padding:0;min-height:0;background:none;color:#2b5d12;border:0;font-size:12px}.pen-h5 .h5-head button:first-child{font-size:28px}
.pen-h5 .h5-body{padding:16px 20px 0;flex:1;min-width:0}.pen-digital-manual{display:flex;flex-direction:column;gap:12px}.pen-digital-manual>section{margin:0;background:white;border-radius:16px}.pen-product-version{display:flex;align-items:center;gap:12px;padding:12px;min-height:144px}.pen-product-version>img{width:100px;height:120px;object-fit:contain;border-radius:14px;background:#f3f3f1;flex-shrink:0}.pen-product-version>div{display:flex;flex-direction:column;gap:3px;min-width:0}.pen-product-version p{font-size:14px;line-height:21px;margin:0;color:#53675b}.pen-product-version h1{font-size:22px;line-height:33px;font-weight:600;margin:0;color:#213e34}.pen-product-version small{font-size:14px;line-height:21px;color:#53675b}
.pen-manual-directory,.pen-manual-summary{padding:16px;display:flex;flex-direction:column;gap:8px}.pen-digital-manual h2{font-size:18px;line-height:27px;font-weight:600;color:#213e34;margin:0}.pen-manual-directory button{height:44px;min-height:44px;font-size:16px;line-height:24px;border:1px solid #d7e3d8;background:white;color:#2b5d12;border-radius:12px;padding:0 12px;font-weight:500}.pen-manual-summary p{font-size:16px;line-height:24px;margin:0;color:#213e34}.pen-digital-manual .pen-manual-fineprint{margin:0;font-size:14px;line-height:21px;color:#53675b}.pen-manual-tools button{height:44px;border-radius:12px;font-size:16px;border:1px solid #d7e3d8;background:white;color:#2b5d12}
.pen-h5-actions{padding:12px 20px 20px;display:flex;gap:12px;background:#fafaf9;position:sticky;bottom:0;z-index:2}.pen-h5-actions button{flex:1;height:50px;min-height:50px;padding:0 16px;font-size:16px;font-weight:500;border-radius:12px}.pen-h5-actions .secondary{background:white;border:1px solid #d7e3d8;color:#2b5d12}.pen-h5-actions .primary{background:#58cc02;color:#142c10;border:0}.pen-h5 .manual-utilities{display:none}.pen-h5 #pen-manual-chapters{padding:16px}.pen-h5 #pen-manual-chapters[hidden]{display:none}.pen-h5 .manual-document{margin-top:12px}.pen-h5 .manual-section{scroll-margin-top:16px}.pen-h5 .manual-section p{font-size:16px;line-height:24px}
.w-preview-body .pen-h5{max-width:390px;margin:0}.w-preview-body .pen-h5 .h5-head{position:static;height:56px}.pen-h5-actions .primary:hover{background:#58c400}
.pen-admin .w-onboarding{padding:0;max-width:none}.pen-admin .w-onboarding .page-heading{margin-bottom:20px}
.pen-onboarding.w-onboarding{padding:0 28px 40px;margin:0 auto;max-width:1440px;background:var(--pen-bg)}.pen-onboarding .w-public-head{height:64px;display:flex;align-items:center;padding:0 24px;gap:24px;margin:0 -28px 24px;background:white;border-bottom:1px solid var(--pen-line)}.pen-onboarding .w-public-head>span{font-size:14px;color:var(--pen-muted)}.pen-onboarding .w-public-head>small{font-size:13px;color:var(--pen-text)}.pen-onboarding .w-split{grid-template-columns:minmax(0,1fr) 400px}.pen-onboarding .w-preview{top:24px}.pen-onboarding .w-upload{position:relative;min-height:116px;gap:12px;border:1px solid var(--pen-control);border-radius:8px;color:var(--pen-text);padding:22px}.pen-onboarding .w-upload strong{font-size:14px;font-weight:500}.pen-onboarding .w-upload>svg{color:var(--pen-blue);width:24px;height:24px}.pen-onboarding .w-upload>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.pen-onboarding .w-upload>span{font-size:13px;color:var(--pen-muted)}.pen-onboarding .w-license-frame{height:520px;min-height:360px}.pen-onboarding .w-steps{margin-bottom:16px}.pen-onboarding .w-steps span{font-size:13px}.pen-onboarding .pen-preview-card h2{font-size:18px}.pen-onboarding .w-field{margin:0}.pen-onboarding form>fieldset>.w-card{padding:18px}.pen-onboarding .w-empty-preview{background:#f8faff;min-height:520px}
.pen-admin .table-wrap{border:1px solid var(--pen-line);border-radius:10px;background:white}.pen-admin table th{height:44px;background:#f1f6fd;font-size:13px;color:var(--pen-muted);font-weight:500;padding:4px 12px}.pen-admin table td{height:56px;font-size:14px;padding:4px 12px;border-bottom:1px solid var(--pen-line)}.pen-admin .table-caption{font-size:13px;color:var(--pen-muted)}
@media(max-width:1200px){.pen-admin .w-split{grid-template-columns:minmax(0,1fr) 360px}.pen-admin .w-grid{grid-template-columns:1fr 1fr}.pen-admin .pen-workspace{font-size:13px}.pen-admin .w-field label{font-size:13px}}
@media(max-width:950px){.pen-admin .admin-sidebar{width:184px}.pen-admin .admin-content{margin-left:184px;width:calc(100% - 184px);padding:24px 20px}.pen-admin .w-split{grid-template-columns:minmax(0,1fr) 300px}.pen-admin .w-grid{grid-template-columns:1fr}}
@media(max-width:760px){.pen-admin .admin-sidebar{width:62px;padding:18px 10px}.pen-admin .admin-sidebar .pen-space-label,.pen-admin .admin-sidebar button span,.pen-admin .admin-sidebar .pen-sub{display:none}.pen-admin .admin-sidebar button{padding:0;justify-content:center}.pen-admin .admin-content{margin-left:62px;width:calc(100% - 62px);padding:20px 14px}.pen-admin .w-split{grid-template-columns:1fr}.pen-admin .pen-workspace{display:none}.pen-admin .pen-brand{width:auto}.pen-admin .admin-header{gap:16px;padding:0 18px}.pen-admin .w-preview{max-height:none}.pen-admin .page-heading h1{font-size:22px}.pen-admin .w-grid{grid-template-columns:1fr}}