*{box-sizing:border-box}
html,body{margin:0;background:#eceeef}
body{font:13.5px/1.42 "Segoe UI",Arial,sans-serif;color:#1d2328;min-width:1180px}
button,input,select,textarea{font:inherit;color:inherit}
input[type=text],input[type=url],select,textarea{width:100%;border:1px solid #9aa3aa;background:#fff;padding:5px 8px;border-radius:0}
textarea{font:12.5px/1.45 Consolas,monospace;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #14375e;outline-offset:1px}

.top{background:#1d2328;color:#e7eaec;min-height:46px;display:flex;align-items:center;flex-wrap:wrap;padding:6px 18px;gap:10px}
.top .brand{font-size:16px;color:#fff;margin-right:14px}
.top select{width:auto;min-width:240px;padding:4px 8px;color:#1d2328;background:#fff}
.top label{margin:0;font-size:inherit}
.top label.tb{font-weight:400;color:#e7eaec}
.top-label{color:#c5ccd1;font-weight:400}
.tb{border:1px solid #6d777f;color:#e7eaec;background:transparent;padding:4px 11px;cursor:pointer}
.tb:hover{border-color:#c5ccd1}
.sp{margin-left:auto}
.banner{background:#fff7e2;border-bottom:1px solid #b07a00;padding:7px 18px}

.main{display:flex;align-items:stretch;min-height:calc(100vh - 46px)}
.col{background:#fff;border-right:1px solid #c9ced2;padding:14px 16px}
.col-client{width:370px;flex:none}
.col-notices{width:290px;flex:none}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#4a545c;margin:18px 0 7px}
h3:first-child{margin-top:0}
label{display:block;font-size:12px;font-weight:600;color:#38424a;margin:9px 0 3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.hint{font-size:11.5px;color:#5f6970;font-weight:400}
.sw{display:flex;gap:6px;align-items:center}
.sw input[type=color]{width:34px;height:28px;padding:0 2px;border:1px solid #9aa3aa;background:#fff}
.swatch{width:24px;height:24px;border:1px solid #6a747c;cursor:pointer;padding:0}
.rad{display:flex;gap:14px;margin-top:6px}
.rad label,.chk{font-weight:400;font-size:12.5px;margin:0;display:flex;gap:5px;align-items:center}

.th{display:block;width:100%;text-align:left;background:#fff;border:1px solid #c9ced2;padding:8px 10px;margin-bottom:6px;cursor:pointer}
.th:hover{border-color:#6a747c}
.th.on{border:2px solid #14375e;padding:7px 9px}
.th b{display:block}.th small{color:#5f6970}
.n{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:6px 8px;border:0;border-bottom:1px solid #eef0f1;background:#fff;cursor:pointer}
.n:hover{background:#f5f7f9}
.n.on{background:#e4ebf3;box-shadow:inset 3px 0 #14375e}
.n code{font:12px Consolas,monospace;display:block}
.n small{color:#5f6970;font-size:11.5px}
.st{font-size:11.5px;white-space:nowrap}
.st-copied{color:#2b6b39}.st-changed{color:#a34400;font-weight:600}.st-new{color:#6a747c}
details{margin-top:14px;border-top:1px solid #e1e4e6;padding-top:10px}
summary{cursor:pointer;font-weight:600}
.error{color:#b3261e;font-size:12.5px}

.right{flex:1;padding:14px 18px;min-width:0}
.bar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.bar.small{margin-bottom:6px}
.notice-title{font-size:15px}
.btn{border:1px solid #9aa3aa;background:#fff;padding:4px 11px;cursor:pointer}
.btn:hover{border-color:#4a545c}
.btn.pri{background:#14375e;border-color:#14375e;color:#fff;font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:flex;border:1px solid #9aa3aa}
.seg button{border:0;background:#fff;padding:3px 11px;cursor:pointer}
.seg button.on{background:#4a545c;color:#fff}
.frame{border:1px solid #9aa3aa;background:#e9ecee;display:flex;justify-content:center}
.frame iframe{width:100%;height:520px;border:0;display:block;background:#fff}
.frame.phone iframe{width:375px}

#checks .box{margin-top:10px;padding:8px 11px;font-size:12.5px;border:1px solid}
#checks .bad{background:#fbeceb;border-color:#b3261e}
#checks .warn{background:#fff7e2;border-color:#b07a00}
#checks .good{background:#edf6ef;border-color:#2b6b39}
#checks ul{margin:4px 0 0;padding-left:18px}

.out{background:#fff;border:1px solid #9aa3aa;margin-top:12px}
.tabs{display:flex;align-items:center;border-bottom:1px solid #c9ced2;background:#f5f6f7;padding-right:8px;gap:6px}
.tabs button[data-out]{border:0;border-right:1px solid #e1e4e6;background:transparent;padding:7px 14px;cursor:pointer}
.tabs button[data-out].on{background:#fff;font-weight:600;margin-bottom:-1px}
.code{font:12px/1.5 Consolas,monospace;color:#2e3a42;background:#f7f8f9;margin:10px 12px;padding:9px 11px;border:1px solid #e1e4e6;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.steps-box{margin:10px 14px;font-size:13px}
.steps-box ol{margin:4px 0;padding-left:20px}
.steps-box li{margin:3px 0}
.steps-box .warn{background:#fff7e2;border:1px solid #b07a00;padding:7px 10px;margin:8px 0}
.copy-status{margin:0 12px 10px;font-size:12.5px;color:#2b6b39;min-height:1em}
.backup{margin-top:12px}
.backup textarea{min-height:80px}

.sec{background:#fff;border:1px solid #c9ced2;margin-bottom:7px}
.sh{display:flex;align-items:center;gap:8px;padding:6px 9px;background:#f7f8f9;font-weight:600}
.sh .req{margin-left:auto;color:#5f6970;font-weight:400;font-size:12px}
.sh .mv{margin-left:auto;display:flex;gap:4px}
.sh .mv button{font-size:12px;padding:1px 8px}
.sb{padding:8px 10px}
.sec.off .sb{display:none}
.sec.off .sh{color:#7d878e}
.rows{display:grid;grid-template-columns:120px 1fr;gap:4px}
.fields label{font-weight:400;display:flex;gap:6px;align-items:center;margin:3px 0}
#reset{margin-top:6px}