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}}

/* kamisa工作台的界面整理 */
.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-tabs{flex-wrap:wrap}.viewer-tabs button{min-width:0}.saved-template-canvas{display:block;background:#fff;box-shadow:0 5px 20px rgba(21,48,76,.14);touch-action:none;cursor:crosshair;transform-origin:top left;max-width:none!important;height:auto}.saved-actions{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 12px}.saved-actions button{border:1px solid #8cb8ff;background:#f0f7ff;color:#145dcc;border-radius:4px;padding:5px 7px;cursor:pointer;font-size:11px}.saved-field{border-top:1px solid #edf0f5;padding:9px 0}.saved-field.active{background:#f5f9ff;margin:0 -8px;padding:9px 8px;border-left:3px solid #1677ff}.saved-field label{display:block;font-size:11px;color:#667085;margin-bottom:4px}.saved-field input,.saved-field select{display:block;width:100%;box-sizing:border-box;border:1px solid #cfd7e3;padding:6px;margin-top:5px;border-radius:4px;font:12px Arial,"Microsoft YaHei",sans-serif}.field-note{font-size:10px;color:#888}.viewer-tabs #mine-tab{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}}

.saved-phone-controls{font-size:12px}.saved-phone-controls strong{display:block;font-size:15px;margin-bottom:4px}.saved-phone-controls label{display:block;margin:10px 0;color:#334155}.saved-phone-controls input:not([type=checkbox]):not([type=range]),.saved-phone-controls select{display:block;width:100%;box-sizing:border-box;padding:6px;border:1px solid #cfd7e3;border-radius:4px;margin-top:4px;background:#fff}.saved-phone-controls input[type=range]{display:block;width:100%;margin-top:7px}.phone-value{color:#1677ff;font-weight:600}.saved-phone-controls details{margin:10px 0;border-top:1px solid #edf0f5;padding-top:7px}.saved-phone-controls summary{cursor:pointer;font-weight:600;color:#334155}.saved-phone-buttons{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.saved-phone-buttons button{border:1px solid #cfd7e3;background:#fff;border-radius:4px;padding:4px 6px;font-size:11px;cursor:pointer}.saved-phone-buttons button:hover{border-color:#1677ff;color:#1677ff}.saved-phone-switches{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0;padding:8px 0;border-top:1px solid #edf0f5;border-bottom:1px solid #edf0f5}.saved-phone-switches label{margin:0;font-size:11px}
#saved-phone-overlay{min-height:0!important;overflow:hidden}

#saved-phone-overlay > div > div[style*='background-color']{background-color:transparent!important}

/* kamisa UI refresh: scoped to the workbench chrome, never the template canvas. */
body{background:#eef2f6;color:#233047;font-family:Inter,"Microsoft YaHei",Arial,sans-serif}
.viewer-header{height:68px;box-sizing:border-box;padding:0 24px;gap:24px;border-bottom:1px solid #dde5ee;box-shadow:none;background:#fff}
.viewer-brand{gap:14px}
.viewer-brand strong{display:flex;align-items:center;gap:10px;font-size:23px;letter-spacing:-.8px;color:#172b3a}
.viewer-brand strong::before{content:'k';display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#123b36;color:#b8e8b8;font:700 25px Georgia,serif;letter-spacing:-2px;padding-right:2px;box-sizing:border-box}
.viewer-contact{padding:6px 11px;border:1px solid #dbe8e3;border-radius:7px;background:#f1f8f4;color:#326653!important;text-decoration:none;font-size:11px!important}
.viewer-contact:hover{background:#e4f1e9}
.viewer-header #counts{margin-left:auto;padding:7px 11px;background:#f6f8fa;border:1px solid #edf0f4;border-radius:7px;color:#7a8798;font-size:11px}
.viewer-shell{height:calc(100dvh - 68px);min-width:0;box-sizing:border-box;padding:14px;gap:12px;grid-template-columns:240px minmax(260px,1fr) 270px 210px;background:#eef2f6}
.viewer-phone,.viewer-properties,.viewer-sidebar{min-width:0;min-height:0;box-sizing:border-box;border:1px solid #e0e6ed;border-radius:12px;background:#fff;box-shadow:0 2px 4px #25364c03;scrollbar-width:thin;scrollbar-color:#ced7e0 transparent}
.viewer-phone{padding:14px 10px}
.viewer-phone::before{content:'手机状态栏';display:block;padding:1px 4px 13px;margin:0 0 11px;border-bottom:1px solid #edf1f5;font-size:13px;font-weight:700;letter-spacing:.4px;color:#27394b}
.viewer-phone[hidden]::after{display:block;line-height:1.8;padding:8px;color:#8a96a6}
.viewer-properties{padding:16px 13px;border:1px solid #e0e6ed}
.viewer-properties>strong{font-size:13px;letter-spacing:.4px;color:#27394b}
.viewer-properties>p{font-size:11px;color:#96a0ae;line-height:1.7;margin:7px 0 16px;padding-bottom:14px;border-bottom:1px solid #edf1f5}
.viewer-sidebar{padding:14px 10px;border:1px solid #e0e6ed;box-shadow:none}
.viewer-sidebar>input{top:0;border:1px solid #dfe6ed;border-radius:8px;background:#f7f9fb;box-shadow:none;font-size:11px;padding:11px 9px;color:#34465a;outline:none}
.viewer-sidebar>input:focus{background:#fff;border-color:#73a493;box-shadow:0 0 0 3px #397a6310}
.viewer-tabs{top:39px;gap:3px;padding:10px 0;margin:0 0 7px;border:0;background:#fff;flex-wrap:nowrap}
.viewer-tabs button{font-size:10px;padding:8px 3px;background:#f5f7fa;border:1px solid transparent;border-radius:6px;color:#7b8899;line-height:1.4}
.viewer-tabs .selected,.viewer-tabs #mine-tab.selected{background:#e7f1eb;border-color:#d8e8de;color:#28644f;font-weight:700}
#template-list details{border:1px solid #e7ecf1;border-radius:8px;margin-bottom:7px}
#template-list summary{font-size:12px;padding:11px 9px;background:#f8fafb;color:#57687a}
#template-list details[open] summary{background:#edf5f0;color:#28644f;border-bottom:1px solid #dfece4}
.viewer-sidebar #template-list button{padding:10px 11px;border-bottom-color:#f0f3f6;font-size:11px;color:#68768a;transition:background .15s}
.viewer-sidebar #template-list button:hover{background:#f3f8f5;color:#28644f}
.viewer-sidebar #template-list button.active{background:#e7f2eb;color:#236249;box-shadow:inset 3px 0 #438c69;font-weight:700;border-color:#e1ece5}
.viewer-main{min-width:0;border:1px solid #dfe6ed;border-radius:12px;overflow:hidden;background:#e7edf2;box-shadow:0 2px 4px #25364c03}
.viewer-toolbar{padding:13px 16px;min-height:67px;gap:8px;background:#fff;border-bottom:1px solid #e1e7ed;box-shadow:none;justify-content:flex-start;flex-wrap:wrap}
.viewer-toolbar>div{flex:1;min-width:90px}
#template-title{font-size:14px;color:#24394a}
.viewer-toolbar small{margin-top:5px;font-size:10px;color:#91a0af}
.viewer-toolbar label{font-size:10px;color:#8793a2;display:flex;gap:5px;align-items:center}
.viewer-toolbar select{padding:5px 3px;border:1px solid #e0e6ed;border-radius:5px;color:#55657a;background:#f8fafb;font-size:10px;max-width:85px}
.viewer-toolbar>button{font-size:10px;padding:7px 8px;border-radius:6px;border-color:#dce5e0;font-weight:600}
#export-original{background:#245f49;border-color:#245f49;color:#fff}
#export-original:hover{background:#184c38;border-color:#184c38;color:#fff}
#copy-original{background:#f0f7f2;border-color:#d8e8de;color:#32664f}
#copy-original:hover{background:#e3f0e7;border-color:#a7c9b4;color:#245f49}
#preview-scroll{padding:25px 20px;background-color:#e9eef3;background-image:radial-gradient(#c8d3df 0.65px,transparent 0.65px);background-size:16px 16px}
#preview-size{filter:drop-shadow(0 6px 14px #23364a14)}
#viewer-status{padding:10px 14px;min-height:34px;box-sizing:border-box;font-size:10px;line-height:1.5;color:#82909f;background:#fff;border-color:#e0e7ee}
.viewer-phone .phone-top-switch{border-bottom-color:#edf1f5;gap:8px;padding-bottom:13px;margin-bottom:10px}
.viewer-phone .phone-top-switch label{font-size:10px!important;color:#718096}
.viewer-phone .phone-top-switch select{border:1px solid #dfe5ed;border-radius:5px;padding:3px;color:#526477;background:#fafbfd}
.viewer-phone .captured-phone-controls .listMobile{padding:4px 2px!important}
.viewer-phone .captured-phone-controls .listMobile button{border-radius:5px;font-size:10px!important;line-height:1.8;padding:3px!important}
.viewer-phone .captured-phone-controls .ant-input,.viewer-phone .captured-phone-controls .ant-input-number,.viewer-phone .captured-phone-controls .ant-picker{border-radius:6px;font-size:11px}
.viewer-phone .captured-phone-controls .ant-checkbox-wrapper{white-space:nowrap;font-size:11px}
.viewer-phone .captured-phone-controls div[style*="display: flex"]:has(> div > .ant-picker){flex-wrap:wrap;gap:8px}
.viewer-phone .captured-phone-controls div[style*="display: flex"]:has(> div > .ant-picker)>div:first-child{flex-shrink:0}
.viewer-properties .original-list-editor{border-top-color:#e7edf2}
.viewer-properties .original-list-editor button{border-radius:6px;font-size:11px;border-color:#dce5e0}
.viewer-properties .original-list-editor .add-record{background:#245f49;border-color:#245f49;color:#fff}
.viewer-properties .saved-actions button{background:#f1f7f3;border-color:#d6e6dc;color:#32664f;border-radius:5px;font-size:10px}
.viewer-properties .saved-field.active{background:#f2f8f4;border-left-color:#438c69}
@media(min-width:1101px) and (max-width:1300px){.viewer-shell{grid-template-columns:240px minmax(250px,1fr) 235px 185px;gap:10px;padding:10px}.viewer-header{padding:0 18px}.viewer-toolbar{padding:12px 10px}.viewer-toolbar>button{padding:7px 6px}}
@media(min-width:741px) and (max-width:1100px){.viewer-shell{grid-template-columns:220px minmax(240px,1fr) 190px;grid-template-areas:'phone preview templates' 'phone fields templates';grid-template-rows:minmax(300px,1fr) minmax(180px,.55fr);padding:10px;gap:10px}.viewer-header{padding:0 16px;gap:14px}.viewer-header #counts{font-size:10px;max-width:45%}.viewer-properties{padding:12px}.viewer-properties>p{margin-bottom:8px;padding-bottom:8px}.viewer-toolbar{padding:10px}.viewer-toolbar>button{padding:6px}.viewer-phone{padding:12px 8px}}
@media(max-width:740px){html,body{height:auto;min-height:100%;overflow:auto}.viewer-header{height:auto;min-height:68px;padding:13px 14px;gap:10px;flex-wrap:wrap}.viewer-brand strong{font-size:21px}.viewer-header #counts{margin:0;padding:0;border:0;background:none;width:100%;font-size:10px}.viewer-shell{height:auto;min-width:0;grid-template-columns:155px minmax(0,1fr);grid-template-areas:'templates preview' 'phone fields';grid-template-rows:minmax(400px,65dvh) minmax(360px,65dvh);padding:8px;gap:8px}.viewer-sidebar{padding:10px 7px}.viewer-tabs{flex-wrap:wrap}.viewer-tabs button{flex-basis:40%}.viewer-toolbar{padding:10px;gap:6px}.viewer-toolbar>div{flex-basis:100%}.viewer-properties,.viewer-phone{padding:12px 8px}#preview-scroll{padding:14px 10px}.viewer-contact{font-size:10px!important}.viewer-brand{gap:9px}}

/* Country library on the left; original phone controls on the right. */
.viewer-shell{grid-template-columns:210px minmax(260px,1fr) 270px 240px;grid-template-areas:'templates preview fields phone';height:calc(100dvh - 102px)}
.viewer-notice{height:34px;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;background:#fff0f0;border-bottom:1px solid #f3cccc;color:#ce2834;font-size:13px;font-weight:600}
.viewer-notice-track{display:flex;width:max-content;flex-shrink:0;animation:kamisa-notice-scroll 22s linear infinite}
.viewer-notice-track>span{flex:0 0 auto;min-width:100vw;padding:0 24px;box-sizing:border-box;white-space:nowrap;text-align:center}
@keyframes kamisa-notice-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.viewer-notice-track{animation:none}.viewer-notice-track>span[aria-hidden]{display:none}}
@media(min-width:1101px) and (max-width:1300px){.viewer-shell{grid-template-columns:185px minmax(250px,1fr) 235px 240px}}
@media(min-width:741px) and (max-width:1100px){.viewer-shell{grid-template-columns:190px minmax(240px,1fr) 220px;grid-template-areas:'templates preview phone' 'templates fields phone'}}
@media(max-width:740px){.viewer-shell{height:auto;grid-template-columns:155px minmax(0,1fr);grid-template-areas:'templates preview' 'fields phone'}.viewer-notice{font-size:12px}}

.viewer-account-nav{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.viewer-account-nav a{padding:6px 9px;border:1px solid #dce5e0;border-radius:6px;background:#f6faf7;color:#32664f;text-decoration:none;font-size:11px;white-space:nowrap}
.viewer-account-nav a:hover{background:#e7f2eb}
@media(max-width:1100px){.viewer-header #counts{max-width:30%}.viewer-account-nav{gap:5px}.viewer-account-nav a{padding:5px 6px;font-size:10px}}
@media(max-width:740px){.viewer-account-nav{order:2}.viewer-header #counts{max-width:none;order:3}}