:root{--brand:#16a085;--brand2:#0f8b73;--blue:#1769df;--ink:#162126;--muted:#708080;--line:#e4ecec;--bg:#f5f8f8;--soft:#eef8f6;--red:#d94841}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;color:var(--ink);background:var(--bg)}a{text-decoration:none;color:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;cursor:pointer}.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.soft{background:var(--soft);color:var(--brand2)}.btn.danger{background:#fff0ef;color:var(--red);border-color:#ffd8d5}.cb-shell{display:flex;min-height:100vh}.cb-side{width:230px;background:#0f2525;padding:24px 18px;color:#cce0e0;display:flex;flex-direction:column;gap:8px}.cb-brand{font-size:19px;font-weight:800;color:#fff;margin-bottom:20px}.cb-brand small{display:block;font-size:12px;color:#91b2b2;margin-top:6px}.cb-side a{padding:12px 13px;border-radius:10px}.cb-side a.active,.cb-side a:hover{background:#fff;color:#163333}.cb-main{flex:1;padding:30px;min-width:0}.cb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:26px}.cb-head h1{margin:0 0 8px}.cb-head p{margin:0;color:var(--muted);line-height:1.7}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.template-card,.table-card,.empty{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 8px 24px rgba(20,60,60,.05)}.template-card h3{margin:10px 0 8px}.template-card p{color:var(--muted);font-size:14px;line-height:1.65;min-height:46px}.template-tag{font-size:12px;padding:5px 8px;background:#e7f7f3;color:var(--brand2);border-radius:999px}.template-tag.gray{background:#eef1f1;color:#677}.section-line{display:flex;align-items:center;justify-content:space-between;margin:28px 0 12px}.section-line h2{margin:0}table{width:100%;border-collapse:collapse}th,td{padding:13px 12px;text-align:left;border-bottom:1px solid #edf1f1;font-size:14px;vertical-align:top}th{color:#617272;background:#fafcfc}td small{display:block;color:#8a9999;margin-top:5px}.ops{white-space:nowrap}.ops a{color:var(--brand2);font-weight:700;margin-right:12px}.status{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:12px}.status.published{background:#eaf8f0;color:#168a55}.status.draft{background:#fff4df;color:#a56500}.status.disabled{background:#eee;color:#666}.flash{max-width:1100px;margin:12px auto;padding:11px 14px;border-radius:10px;background:#eaf8f0;color:#167f51}.flash.error{background:#fff0ef;color:#a93630}.editor-top{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:9}.editor-top>div:nth-child(2){display:flex;flex-direction:column}.editor-top span{font-size:12px;color:var(--muted)}.editor-actions{display:flex;gap:8px}.editor-grid{display:grid;grid-template-columns:250px minmax(520px,1fr) 300px;gap:16px;padding:16px;min-height:calc(100vh - 68px)}.field-palette,.form-settings{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;height:fit-content;position:sticky;top:84px}.field-palette h3,.form-settings h3{margin-top:0}.field-palette p{font-size:13px;color:var(--muted);line-height:1.6}.palette-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette-item{border:1px solid var(--line);background:#fff;padding:10px;border-radius:9px;text-align:left;cursor:pointer;font-weight:700}.palette-item:hover{border-color:var(--brand);color:var(--brand2)}.privacy-tip,.privacy-card{margin-top:18px;padding:12px;background:#fff8e8;border:1px solid #f6dfad;border-radius:10px;font-size:12px;line-height:1.65}.privacy-tip b,.privacy-tip span{display:block}.form-settings label,.canvas-meta label{display:block;font-size:13px;font-weight:700;margin:0 0 14px}.form-settings input,.form-settings textarea,.form-settings select,.canvas-meta input,.canvas-meta textarea{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;background:#fff}.form-canvas{min-width:0}.canvas-meta{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}.phone-preview{width:min(760px,100%);margin:auto;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 14px 36px rgba(20,60,60,.08)}.phone-banner{padding:26px;background:linear-gradient(135deg,#edf5ff,#f8fbff);border-bottom:1px solid #dfe9f7}.phone-banner small{color:var(--blue);font-weight:800}.phone-banner h2{margin:8px 0}.phone-banner p{margin:0;color:#61707f}.field-list{padding:18px}.field-row{border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:10px;background:#fff;cursor:pointer}.field-row.active{border-color:var(--brand);box-shadow:0 0 0 2px #dff6ef}.field-row .rowtop{display:flex;justify-content:space-between;gap:10px}.field-row small{color:#879494}.field-row .rowops{display:flex;gap:6px;margin-top:9px}.rowops button{border:0;border-radius:7px;padding:5px 8px;cursor:pointer}.submit-demo{margin:0 18px 12px;width:calc(100% - 36px);padding:13px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:800}.tech{text-align:center;color:#9aa7a7;font-size:11px;padding-bottom:16px}.field-props{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}.field-props .prop-title{font-size:13px;font-weight:800;margin-bottom:8px}.publish-box{margin-top:16px;padding:12px;border-radius:10px;background:#f7faf9;font-size:12px}.publish-box div{margin-bottom:8px}.publish-box code{display:block;word-break:break-all;margin-top:4px}.public-bg{min-height:100vh;background:linear-gradient(180deg,#eef5ff 0,#f7f9fc 260px,#f7f9fc 100%);padding:40px 16px}.public-wrap{max-width:780px;margin:auto}.public-hero{padding:28px 30px;background:linear-gradient(135deg,#0f5fc7,#1d7be8);color:#fff;border-radius:18px 18px 0 0;position:relative;overflow:hidden}.public-hero:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(255,255,255,.15);border-radius:50%;right:-100px;top:-140px}.public-hero span{font-size:13px;opacity:.9}.public-hero h1{margin:10px 0 8px;font-size:30px}.public-hero p{margin:0;opacity:.92;line-height:1.7}.public-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:12px}.public-card{background:#fff;border-radius:0 0 18px 18px;padding:26px 30px;box-shadow:0 18px 46px rgba(37,70,110,.1)}.public-field{display:block;margin-bottom:22px}.public-field>span{display:block;font-size:15px;font-weight:800;margin-bottom:8px}.public-field em{color:#e54848;font-style:normal;margin-left:3px}.public-field input[type=text],.public-field input[type=tel],.public-field input[type=number],.public-field input[type=date],.public-field textarea,.public-field select{width:100%;padding:12px;border:1px solid #dbe3ec;border-radius:10px;font:inherit;outline:none}.public-field input:focus,.public-field textarea:focus,.public-field select:focus{border-color:#2d7ee5;box-shadow:0 0 0 3px #e9f2ff}.choice-list{display:flex;gap:10px;flex-wrap:wrap}.choice-list label{padding:10px 12px;border:1px solid #dbe3ec;border-radius:9px;font-size:14px}.notice{background:#f5f8fb;border:1px solid #e0e7ef;border-radius:12px;padding:16px;margin-top:10px}.notice h3{margin:0 0 8px;font-size:15px}.notice p{font-size:13px;color:#667587;line-height:1.75;margin:0 0 12px}.ack{font-size:13px;font-weight:700}.public-submit{width:100%;margin-top:18px;padding:14px;border:0;border-radius:10px;background:#1769df;color:#fff;font-size:16px;font-weight:800;cursor:pointer}.public-tech{text-align:center;color:#96a1ad;font-size:11px;margin-top:16px}.error-box{padding:12px;background:#fff0ef;color:#a93630;border-radius:9px;margin-bottom:16px;line-height:1.7}.success-page{min-height:100vh;display:grid;place-items:center;background:#f4f7fb;padding:20px}.success-card{width:min(520px,100%);background:#fff;border:1px solid #e1e8ef;border-radius:18px;padding:38px;text-align:center;box-shadow:0 18px 50px rgba(30,60,90,.08)}.check{width:62px;height:62px;margin:auto;border-radius:50%;display:grid;place-items:center;background:#e9f8f0;color:#18945d;font-size:32px}.success-card h1{margin:18px 0 8px}.success-card p{color:#697787}.success-card small{display:block;color:#9aa5b0;margin:12px 0 20px}.simple-page{padding:28px;min-width:1100px}.back{font-size:13px;color:var(--brand2)}.searchbar{display:flex;gap:8px;margin:16px 0}.searchbar input{width:360px;padding:10px;border:1px solid var(--line);border-radius:9px}.table-card.wide{overflow:auto}.status-form{display:grid;gap:5px}.status-form select,.status-form button{font-size:11px;padding:5px}.status-form button{background:#eef8f6;border:0;color:#0f7f69;border-radius:6px;cursor:pointer}@media(max-width:900px){.template-grid{grid-template-columns:1fr 1fr}.editor-grid{grid-template-columns:1fr}.field-palette,.form-settings{position:static}.cb-side{display:none}.public-hero h1{font-size:25px}}@media(max-width:600px){.template-grid{grid-template-columns:1fr}.public-bg{padding:0}.public-wrap{max-width:none}.public-hero,.public-card{border-radius:0}.public-card{padding:22px 18px}.public-hero{padding:25px 18px}.choice-list{display:grid}.simple-page{min-width:0;padding:12px}}

/* VHOW FORMS R2 audit/UX refinement */
.editor-title{display:flex;flex-direction:column;align-items:center}.back-link{font-weight:700;color:var(--brand2)}
.editor-actions{align-items:center}.editor-grid{grid-template-columns:240px minmax(560px,1fr) 320px;gap:14px}
.canvas-modebar{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:12px}.canvas-modebar>div{display:flex;gap:6px}.canvas-modebar span{font-size:12px;color:var(--muted)}
.mode-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 14px;cursor:pointer;font-weight:800;color:#566}.mode-btn.active{border-color:var(--brand);background:#eef9f6;color:var(--brand2)}
.edit-canvas-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.edit-canvas-head{display:flex;justify-content:space-between;align-items:center;padding:3px 4px 12px}.edit-canvas-head span{font-size:12px;color:var(--muted)}.edit-submit-demo{text-align:center;margin:4px 0 0;padding:12px;border-radius:9px;background:#eef4ff;color:#1769df;font-size:12px;font-weight:800}.empty-fields{padding:38px 18px;text-align:center;color:#9aa7a7;border:1px dashed #dce5e5;border-radius:10px}
.form-settings{background:transparent;border:0;padding:0}.settings-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}.settings-card h3{margin:0 0 14px}.settings-card label{display:block;font-size:13px;font-weight:700;margin-bottom:14px}.settings-card input,.settings-card textarea,.settings-card select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;background:#fff}.req-note{font-size:11px;color:#b86b00;font-weight:600;margin-left:4px}.checkline{display:flex!important;gap:8px;align-items:center}.checkline input{width:auto!important;margin:0!important}
.publish-card-head{display:flex;justify-content:space-between;align-items:center}.form-qr-preview{display:block;width:152px;height:152px;object-fit:contain;margin:10px auto 12px;border:1px solid var(--line);padding:8px;border-radius:12px;background:#fff}.public-url-box{background:#f7faf9;border-radius:9px;padding:10px}.public-url-box small{display:block;color:var(--muted);margin-bottom:5px}.public-url-box code{display:block;word-break:break-all;font-size:11px}.publish-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.publish-actions .btn:last-child{grid-column:1/-1}.publish-help{font-size:12px;color:var(--muted);line-height:1.65;margin:10px 0}.btn.danger.subtle{width:100%;background:#fff5f4;border-color:#f3d6d3;color:#b4433c}
.publish-success-banner{max-width:1100px;margin:12px auto;padding:14px 16px;border:1px solid #cdebdc;border-radius:12px;background:#f1fbf6;display:flex;align-items:center;justify-content:space-between;gap:18px}.publish-success-banner b{display:block;color:#167f51}.publish-success-banner span{display:block;color:#5f746b;font-size:12px;margin-top:4px}.publish-success-actions{display:flex;gap:8px}
.live-preview-pane{padding:6px 0 30px}.preview-phone-shell{width:430px;max-width:100%;margin:auto;background:#111827;border-radius:30px;padding:10px;box-shadow:0 18px 48px rgba(15,23,42,.2)}.preview-phone-top{height:34px;color:#dbe4ef;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:11px}.preview-phone-top>span:first-child{width:62px;height:6px;border-radius:999px;background:#374151}.preview-phone-shell iframe{display:block;width:100%;height:720px;border:0;border-radius:20px;background:#fff}
.preview-only-bar{text-align:center;background:#eef6ff;color:#1769df;padding:8px 10px;font-size:12px;font-weight:800;border-radius:12px 12px 0 0}.role-meta{gap:10px 18px}.role-meta b{font-weight:700}.publisher-contact{margin-top:10px;font-size:12px;opacity:.92}.public-footer-links{border-top:1px solid #edf1f6;margin-top:22px;padding-top:16px;color:#8795a5;font-size:11px;text-align:center;line-height:1.7}.public-footer-links div{display:flex;gap:12px;justify-content:center;margin-top:5px}.public-footer-links a{color:#54708f}.preview-form-card input:disabled,.preview-form-card textarea:disabled,.preview-form-card select:disabled{background:#fff;color:#333;opacity:1}.preview-form-card .public-submit:disabled{opacity:.85}.success-role{display:grid;gap:5px;margin-top:18px;color:#94a0ad;font-size:11px}
.head-actions{display:flex;gap:8px}
@media(max-width:1100px){.editor-grid{grid-template-columns:220px minmax(500px,1fr) 300px}.publish-success-banner{margin:12px 16px}}
@media(max-width:900px){.editor-grid{grid-template-columns:1fr}.field-palette,.form-settings{position:static}.editor-actions{flex-wrap:wrap}.canvas-modebar span{display:none}.preview-phone-shell{width:min(430px,100%)}}


/* VHOW FORMS R2.2 - one-screen workspace / lifecycle / privacy */
@media(min-width:1100px){
body.vhow-editor-page{overflow:hidden;height:100vh}
body.vhow-editor-page #formEditor{overflow:hidden}
.r22-editor-grid{grid-template-columns:210px minmax(560px,700px) 300px!important;max-width:1240px;margin:0 auto;padding:0 10px 8px;gap:12px!important;min-height:0;overflow:hidden;align-items:stretch}
.r22-scrollcol{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:16px}
.r22-scrollcol::-webkit-scrollbar{width:7px}.r22-scrollcol::-webkit-scrollbar-thumb{background:#d5dfdf;border-radius:10px}
.form-canvas.r22-scrollcol{padding-right:4px}.form-settings.r22-scrollcol{padding-left:2px;padding-right:3px}
.r22-publish-first{position:sticky;top:0;z-index:4;box-shadow:0 8px 20px rgba(21,56,56,.06)}
}
.compact-meta{padding:12px;margin-bottom:10px}.compact-meta label{font-size:12px;font-weight:800}.compact-meta input,.compact-meta textarea{margin-top:5px;padding:8px 10px}
.field-list{padding:8px!important}.field-row{padding:9px 10px!important;margin-bottom:7px!important}.field-row .rowops{margin-top:5px!important}.rowops button{padding:3px 7px!important}.edit-canvas-card{padding:10px!important}.edit-canvas-head{padding-bottom:8px!important}
.form-qr-preview{width:112px!important;height:112px!important;margin:6px auto 8px!important;padding:5px!important}.qr-click{display:block;width:max-content;margin:auto}.publish-actions{gap:6px!important;margin-top:7px!important}.publish-actions .btn{padding:8px 9px;font-size:12px}.public-url-box{padding:8px!important}.publish-help{margin:7px 0!important;line-height:1.45!important}.settings-card{padding:13px!important;margin-bottom:10px!important}.settings-card h3{margin-bottom:9px!important}.settings-card label{margin-bottom:10px!important}.settings-card input,.settings-card textarea,.settings-card select{padding:8px!important;margin-top:4px!important}.field-help{display:block;font-size:10.5px;color:var(--muted);line-height:1.5;margin-top:5px;font-weight:500}
.advanced-settings>summary,.more-actions>summary,.privacy-tip.compact>summary{cursor:pointer;font-weight:800;list-style:none}.advanced-settings>summary::-webkit-details-marker,.more-actions>summary::-webkit-details-marker,.privacy-tip.compact>summary::-webkit-details-marker{display:none}.advanced-settings>summary:after,.more-actions>summary:after,.privacy-tip.compact>summary:after{content:' ▾';color:var(--muted)}.advanced-settings[open]>summary:after,.more-actions[open]>summary:after,.privacy-tip.compact[open]>summary:after{content:' ▴'}.advanced-body{margin-top:12px}.more-actions{margin-top:7px;border-top:1px solid var(--line);padding-top:7px;font-size:12px;color:var(--muted)}.more-action-body{display:grid;gap:6px;margin-top:7px}.more-action-body .btn{width:100%;padding:7px 9px}.privacy-tip.compact{padding:10px!important}.privacy-tip.compact span{display:block;margin-top:8px;font-size:11px;line-height:1.6}
.preview-phone-shell iframe{height:calc(100vh - 210px)!important;min-height:520px;max-height:720px}.live-preview-pane{padding-bottom:8px!important}
.publisher-contact-details{margin-top:12px;width:max-content;max-width:100%;font-size:12px}.publisher-contact-details summary{cursor:pointer;padding:7px 10px;border:1px solid rgba(255,255,255,.35);border-radius:8px;font-weight:700;list-style:none}.publisher-contact-details summary::-webkit-details-marker{display:none}.publisher-contact-details div{padding:8px 2px 0;opacity:.92;word-break:break-all}
.ops{position:relative}.ops-more{display:inline-block;position:relative}.ops-more summary{cursor:pointer;color:var(--brand2);font-weight:700;list-style:none}.ops-more summary::-webkit-details-marker{display:none}.ops-menu{position:absolute;right:0;top:22px;z-index:20;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px;box-shadow:0 10px 28px rgba(15,37,37,.16);display:grid;gap:3px}.ops-menu a,.ops-menu button{display:block;width:100%;text-align:left;border:0;background:#fff;color:#314545;padding:8px;border-radius:7px;font:inherit;cursor:pointer}.ops-menu a:hover,.ops-menu button:hover{background:var(--soft)}.ops-menu form{margin:0}.link-btn{border:0;background:transparent;color:var(--brand2);font-weight:800;cursor:pointer;padding:0}.create-focus{border:1px solid #bfe8dc;border-radius:18px;padding:16px;background:linear-gradient(180deg,#f6fffb,#fff);box-shadow:0 8px 24px rgba(22,160,133,.08)}.section-sub{font-size:12px;color:var(--muted);margin:4px 0 0}

/* R2.4 privacy rule hints */
.privacy-rule-summary{margin-top:10px}.privacy-rule-summary b{display:block;margin-bottom:5px}.sensitive-rule-warning{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#fff4e5;color:#9a4f00;font-weight:700;line-height:1.55}.sensitive-rule-warning[hidden]{display:none!important}