html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,"Microsoft YaHei",sans-serif;color:#222;background:#f4f5f6}.viewer-header{height:54px;background:#fff;border-bottom:1px solid #ddd;display:flex;align-items:center;padding:0 18px;gap:26px}.viewer-header strong{font-size:18px}.viewer-header span{font-size:12px;color:#666}.viewer-shell{display:grid;grid-template-columns:205px minmax(260px,1fr) 330px;height:calc(100vh - 55px)}.viewer-sidebar,.viewer-properties{background:white;overflow:auto;padding:13px;border-right:1px solid #ddd}.viewer-properties{border-right:0;border-left:1px solid #ddd}.viewer-sidebar input{width:100%;box-sizing:border-box;padding:9px;border:1px solid #ccc;border-radius:4px}.viewer-tabs{display:flex;margin:12px 0;gap:4px}.viewer-tabs button{font-size:11px;padding:7px 5px;border:1px solid #ddd;border-radius:4px;background:white;cursor:pointer}.viewer-tabs .selected{background:#1677ff;color:white;border-color:#1677ff}#template-list details{margin-bottom:5px}#template-list summary{padding:7px 0;cursor:pointer;font-weight:bold;font-size:13px}#template-list button{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;padding:7px 8px;font-size:12px;border-radius:4px}#template-list button:hover{background:#f0f6ff}#template-list button.active{background:#e6f4ff;color:#1677ff}#template-list button small{float:right;color:#999;font-size:10px}#template-list button[data-available="false"]{color:#777}.viewer-main{display:flex;flex-direction:column;min-width:0;min-height:0}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;background:#fff;border-bottom:1px solid #ddd;gap:10px}.viewer-toolbar small{display:block;font-size:10px;color:#999}.viewer-toolbar label{white-space:nowrap;font-size:12px}.viewer-toolbar select{padding:4px}#preview-scroll{flex:1;overflow:auto;padding:20px;min-height:0}#preview-size{position:relative;margin:0 auto}#original-app{width:1300px;background:#fff;transform-origin:top left;font-family:androidFont,Arial,sans-serif;overflow:hidden}#original-app>div{width:1300px}#viewer-status{padding:8px 14px;background:#fff;border-top:1px solid #ddd;font-size:11px;color:#555}.viewer-properties>p{font-size:11px;color:#888}.viewer-properties label{display:block;margin:14px 0;font-size:12px}.viewer-properties .manual-fields input,.viewer-properties .manual-fields textarea,.viewer-properties .manual-fields select{display:block;width:100%;box-sizing:border-box;border:1px solid #ccc;padding:6px;margin-top:5px;border-radius:3px;font:12px Arial,"Microsoft YaHei",sans-serif}.viewer-properties textarea{min-height:65px}.viewer-properties img{max-width:100%;max-height:65px;object-fit:contain}.viewer-properties details{font-size:12px;margin:8px 0}.viewer-properties .field-note{font-size:10px;color:#888}#unavailable{max-width:470px;margin:70px auto;background:#fff;border:1px solid #ddd;padding:24px;font-size:14px;line-height:1.9}#unavailable h2{font-size:19px}#original-app [contenteditable]{outline:none}@media(max-width:850px){.viewer-shell{grid-template-columns:180px minmax(230px,1fr) 190px}.viewer-header{gap:10px}.viewer-header span{font-size:10px}}

.original-controls{font-size:12px}.original-controls>div{margin:8px 0}.original-controls label{margin:0;font-size:12px}.original-list-editor{margin:16px 0;border-top:1px solid #ddd;padding-top:12px}.original-list-editor button{padding:5px 9px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer}.original-list-editor .add-record{background:#1677ff;color:white;border-color:#1677ff}.list-draft{margin:10px 0}.record-count{font-size:11px;color:#888}.original-controls img{max-height:none}

#export-original{white-space:nowrap;font-size:11px;padding:5px 9px;border:1px solid #1677ff;background:#1677ff;color:white;border-radius:4px;cursor:pointer}.viewer-toolbar{flex-wrap:wrap}

.phone-controls{font-size:12px;margin-bottom:16px;border-bottom:1px solid #ddd;padding-bottom:10px}.phone-controls label{display:block;margin:8px 0}.phone-controls select,.phone-controls input:not([type=checkbox]){display:block;width:100%;box-sizing:border-box;padding:5px;border:1px solid #ccc}.captured-page{position:relative}

.viewer-shell{grid-template-columns:280px minmax(280px,1fr) 320px 160px;grid-template-areas:'phone preview fields templates';min-width:1040px}
.viewer-phone{grid-area:phone;overflow:auto;padding:8px;background:#fafafa;border-right:1px solid #ddd}
.viewer-main{grid-area:preview}.viewer-properties{grid-area:fields}.viewer-sidebar{grid-area:templates;border-left:1px solid #ddd;border-right:0;padding:8px}
.viewer-phone[hidden]{display:block}.viewer-phone[hidden]:after{content:'此页面使用模板自带的状态栏设置';font-size:12px;color:#888}
.captured-phone-controls{width:100%;font-size:12px}.captured-phone-controls .listMainContext{height:auto!important;max-height:none!important;overflow:visible!important}
.phone-top-switch{padding:4px 3px 10px;border-bottom:1px solid #ddd;margin-bottom:8px;display:flex;flex-wrap:wrap;gap:6px 12px}.phone-top-switch label{display:flex;align-items:center;gap:4px}.phone-top-switch input[type=color]{width:32px;height:23px;padding:0;border:1px solid #ddd}
.viewer-properties .original-controls>div{margin:6px 0}.viewer-sidebar .viewer-tabs{gap:3px}.viewer-sidebar #template-list button{border:1px solid #ddd;margin:4px 0;background:white;padding:6px}.viewer-sidebar #template-list button.active{background:#1677ff;color:#fff;border-color:#1677ff}
@media(max-width:1250px){.viewer-shell{grid-template-columns:250px minmax(260px,1fr) 280px 145px}.viewer-header{gap:12px}.viewer-header span{font-size:11px}}

/* 星辰制作工作台的界面整理 */
.viewer-header{height:58px;padding:0 20px;gap:18px;box-shadow:0 1px 4px rgba(0,0,0,.06);position:relative;z-index:5}
.viewer-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.viewer-brand strong{font-size:19px;letter-spacing:.5px;color:#172033}
.viewer-contact{font-size:12px!important;color:#1677ff!important;background:#eef5ff;padding:5px 9px;border-radius:12px;white-space:nowrap}
.viewer-header #counts{font-size:12px;color:#687386;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-shell{grid-template-columns:280px minmax(380px,1fr) 330px 230px;grid-template-areas:'phone preview fields templates';gap:0;background:#eef1f5}
.viewer-phone{padding:12px;background:#f8fafc;border-right:1px solid #dfe4ec}
.viewer-sidebar{padding:12px 10px;background:#fff;border-left:1px solid #dfe4ec;box-shadow:-2px 0 8px rgba(20,40,70,.03)}
.viewer-sidebar>input{position:sticky;top:0;z-index:3;background:#fff;padding:10px;border-color:#cfd7e3;box-shadow:0 2px 5px rgba(20,40,70,.04)}
.viewer-tabs{position:sticky;top:42px;z-index:2;background:#fff;padding:9px 0 7px;margin:0 0 4px;border-bottom:1px solid #edf0f5}
.viewer-tabs button{flex:1;min-width:0;padding:8px 5px;white-space:nowrap}
#template-list details{margin:0 0 7px;border:1px solid #e4e9f1;border-radius:6px;background:#fff;overflow:hidden}
#template-list summary{padding:9px 10px;background:#f7f9fc;color:#334155;font-size:12px;list-style-position:inside}
#template-list details[open] summary{background:#eef5ff;color:#145dcc;border-bottom:1px solid #dbe8ff}
.viewer-sidebar #template-list button{margin:0;border:0;border-bottom:1px solid #f0f2f6;border-radius:0;padding:8px 10px;line-height:1.25}
.viewer-sidebar #template-list button:last-child{border-bottom:0}
.viewer-sidebar #template-list button.active{font-weight:600}
.viewer-main{background:#eef1f5}
.viewer-toolbar{min-height:48px;padding:9px 14px;box-sizing:border-box;box-shadow:0 1px 3px rgba(20,40,70,.05)}
.viewer-toolbar>button{white-space:nowrap;font-size:11px;padding:6px 10px;border:1px solid #c9d3e2;background:#fff;border-radius:5px;color:#334155;cursor:pointer}
.viewer-toolbar>button:hover{border-color:#1677ff;color:#1677ff;background:#f5f9ff}
#export-original{background:#1677ff;color:#fff;border-color:#1677ff}
#export-original:hover{background:#0958d9;color:#fff}
#copy-original{background:#f0f7ff;border-color:#8cb8ff;color:#145dcc}
.viewer-properties{padding:16px;background:#fff}
.viewer-properties>strong{font-size:15px;color:#1f2937}
.viewer-properties>p{margin:5px 0 14px}
#viewer-status{min-height:18px;display:flex;align-items:center}
@media(max-width:1250px){.viewer-shell{grid-template-columns:250px minmax(300px,1fr) 290px 190px}.viewer-header{padding:0 12px}.viewer-brand strong{font-size:17px}.viewer-header #counts{font-size:11px}}