:root{font-family:Inter,'Segoe UI',Arial,sans-serif;color:#30372f;background:#f8f9f6;font-synthesis:none;--green:#536c50;--line:#e5e8df;--muted:#92978b}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b6cba6;outline-offset:3px}[hidden]{display:none!important}.sidebar{width:252px;position:fixed;inset:0 auto 0 0;background:#f1f3ec;border-right:1px solid #e0e4d9;padding:37px 22px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;text-decoration:none;font-size:36px;font-weight:700;letter-spacing:-2px;margin:0 13px 35px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;width:36px;height:36px;margin-right:11px;border-radius:10px;background:var(--green);font-family:Georgia,serif;font-style:italic;color:white;font-size:33px;line-height:1;letter-spacing:0}.brand-icon>span{position:absolute;font-size:15px;top:0;right:2px;color:#d4dfbc}.brand-dot{color:#7a9164}.workspace{padding:14px 9px;border-top:1px solid #dde2d5;border-bottom:1px solid #dde2d5;display:flex;gap:10px;align-items:center;font-size:11px;font-weight:600}.workspace-avatar{background:#e0e5d7;border:1px solid #d0d8c5;border-radius:8px;padding:9px 11px;color:var(--green);font-size:14px}.workspace small{display:block;font-size:10px;color:#93988b;margin-top:5px;font-weight:400}.workspace-arrow{margin-left:auto}.nav-label{font-size:9px;letter-spacing:1.6px;color:#969e8a;margin:30px 13px 13px}.nav-item{border:0;background:none;width:100%;padding:13px 12px;text-align:left;border-radius:7px;font-size:11px;color:#7c8474;display:flex;gap:10px;align-items:center;margin:3px 0}.nav-item>span:first-child{font-size:17px}.nav-item.active{color:#405a3b;background:#e2e8d9;font-weight:600}.nav-new{font-size:7px;margin-left:auto;letter-spacing:.6px;background:#f6f8f0;padding:3px 5px;border-radius:3px}#saved-count{margin-left:auto;font-size:10px}.sidebar-note{margin-top:auto;padding:23px 14px 33px;color:#6a795c}.note-star{display:block;font-size:32px;margin-bottom:12px}.sidebar-note strong{font-size:12px;font-weight:500}.sidebar-note p{font-size:11px;line-height:1.9;color:#8c9581}.note-line{display:block;width:25px;border-bottom:1px solid #b5c29f;margin-top:17px}.sidebar-bottom{border-top:1px solid #dde2d5;padding:19px 9px 0;display:flex;align-items:center;gap:7px;font-size:10px;color:#87917e}.status-dot{width:6px;height:6px;border-radius:50%;background:#b7a37b;flex-shrink:0}.status-dot.connected{background:#64815a}#reconnect{margin-left:auto;border:0;background:none;color:#6b7d5e;font-size:17px}.main-shell{margin-left:252px}.topbar{height:75px;border-bottom:1px solid var(--line);padding:0 43px;display:flex;align-items:center;justify-content:space-between;background:#fcfcfa;font-size:10px;color:#9a9e92}.topbar strong{font-weight:500;color:#59634f}.topbar>div>span{padding:0 15px;color:#c1c6b8}.topbar-tag{font-size:10px}.topbar-tag>span{display:inline-block;height:5px;width:5px;border-radius:50%;background:#98a780;margin-right:7px}main{max-width:1530px;padding:39px 43px 0;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:33px}.eyebrow{font-size:8px;font-weight:600;color:#8c9a7a;letter-spacing:2.3px;margin-bottom:13px}h1{font-family:Georgia,'Times New Roman',serif;font-size:35px;letter-spacing:-1.3px;font-weight:400;margin:0 0 11px;line-height:1.2}h1>span{color:#81956b}.page-heading p{color:#929889;font-size:11px;margin:0;line-height:1.7}.button{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 17px;border-radius:6px;white-space:nowrap;font-size:11px;font-weight:500;transition:background .15s,transform .15s;min-height:39px}.button:active{transform:translateY(1px)}.button.primary{background:var(--green);color:#fff;box-shadow:0 2px 3px #344c2a08}.button.primary:hover{background:#405a3d}.button.secondary{border-color:#dfe4d7;background:#fff;color:#64715b}.button.secondary:hover{background:#f0f3e9}.button>span{font-size:16px;font-weight:400}.builder-grid{display:grid;grid-template-columns:minmax(355px,1fr) minmax(360px,1.07fr);gap:30px;align-items:start}.editor-card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 14px #31402903;overflow:hidden}.card-header{padding:23px 23px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}.card-header>div{display:flex;gap:10px;align-items:center}h2{font-size:13px;font-weight:600;margin:0}.step-number{font-size:9px;background:#edf1e6;color:#7b8d68;padding:5px 6px;border-radius:4px}.small-muted{font-size:8px;color:#a1a795}.tabs{display:flex;padding:0 23px;border-bottom:1px solid var(--line);gap:28px}.tabs button{border:0;background:none;font-size:10px;color:#999e93;padding:0 0 14px;position:relative}.tabs button.selected{color:#4d6647;font-weight:600}.tabs button.selected:after{content:'';position:absolute;bottom:-1px;height:2px;left:0;right:0;background:var(--green)}.tab-panel{padding:25px 24px 19px;min-height:462px}.section-label{color:#a0a68f;font-size:8px;letter-spacing:1.6px;margin-bottom:17px}label{display:block;font-size:10px;font-weight:500;color:#69725f;margin-bottom:16px}input:not([type=color]),select,textarea{display:block;width:100%;margin-top:8px;padding:11px 12px;border:1px solid #e4e7de;background:#fdfefb;border-radius:5px;font-size:11px;color:#535c4b;outline:none;min-width:0}input:focus,select:focus,textarea:focus{border-color:#9dad8d;box-shadow:0 0 0 3px #a9bd8f15}input::placeholder,textarea::placeholder{color:#b3b8aa}.required{color:#9ba98a}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-divider{border-top:1px solid #eef0e9;margin:7px 0 21px}.field-tip{background:#f4f6ef;padding:11px 12px;border-radius:5px;font-size:9px;line-height:1.7;color:#929e83;display:flex;gap:9px;align-items:center}.field-tip>span{font-size:16px}.editor-footer{background:#fcfdf9;border-top:1px solid var(--line);padding:19px 24px}.editor-footer label{margin-bottom:15px}.editor-footer .button{padding:11px 15px;font-size:10px}.save-note{font-size:9px;color:#a4ac98;margin-left:10px}.preview-column{padding-top:5px}.preview-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.preview-title h2{font-size:12px}.preview-title>span{font-size:7px;letter-spacing:1.3px;color:#8f9d7d}.preview-title i{display:inline-block;height:5px;width:5px;background:#8da173;border-radius:50%;margin-right:5px}.preview-stage{background:white;border:1px solid #e2e6dc;border-radius:9px;overflow:hidden;box-shadow:0 8px 22px #34452805}.preview-toolbar{height:40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eaede5;background:#fcfdfb;padding:0 17px;font-size:9px;color:#9da793}.window-dots{display:flex;gap:4px}.window-dots i{height:5px;width:5px;border-radius:50%;background:#dfe4d8}.window-dots i:first-child{background:#d7ddce}.email-meta{padding:9px 23px 0;color:#91998a;font-size:9px}.email-meta>div{padding:11px 0;border-bottom:1px solid #eff1eb;display:flex;gap:15px}.email-meta span{color:#b2b8a9;width:34px}.email-body{padding:11px 23px 27px;font-family:Arial,sans-serif;font-size:11px;line-height:1.9;color:#8b9185}.email-body>p{margin:13px 0 15px}#signature-preview{margin-top:23px;overflow-wrap:anywhere;overflow-x:auto;padding:2px 0 8px}#signature-preview>table{zoom:.9}.preview-bottom{border-top:1px solid #eff1e9;display:flex;align-items:center;gap:9px;padding:12px 20px;background:#fcfdfa;font-size:8px;color:#b0b7a5}.preview-bottom>span:last-child{margin-left:auto;font-size:14px}.paperclip{font-size:18px}.export-actions{display:flex;gap:10px;margin-top:20px}.export-actions>.primary{flex:1}.export-actions>.secondary{flex:.75}.export-note{text-align:center;font-size:9px;color:#a1a994;margin:12px 0 27px}.help-card{padding:21px 20px;background:#eff3e8;border:1px solid #e4eadb;border-radius:7px;display:flex;gap:13px}.help-icon{background:#e4ebd8;border-radius:7px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#819168}.help-card strong{font-size:11px;font-weight:500;color:#637654}.help-card p{font-size:9px;color:#96a087;line-height:1.8;margin:7px 0 10px}.text-button{border:0;background:none;padding:0;color:#728762;font-size:9px;display:flex;align-items:center;gap:12px}.compatibility{text-align:center;margin-top:29px}.compatibility>span{font-size:7px;letter-spacing:1.6px;color:#aab19f}.compatibility>div{display:flex;gap:25px;justify-content:center;margin-top:14px;font-size:11px;color:#a0a991}.page-footer{border-top:1px solid var(--line);margin-top:35px;padding:21px 0;display:flex;justify-content:space-between;font-size:8px;color:#a7ae9b}.footer-spark{padding-left:14px;color:#8f9e7b;font-size:13px}.template-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 25px}.template-option{border:1px solid var(--line);border-radius:7px;padding:12px 7px;background:#fafbf7;text-align:left;color:#6d795e}.template-option.chosen{border-color:#8ea37b;background:#f1f5eb;box-shadow:0 0 0 1px #8ea37b}.template-option strong,.template-option small{display:block;font-size:10px;margin-top:10px}.template-option small{font-size:8px;font-weight:400;margin-top:5px;color:#9ca68e}.template-sketch{display:flex;align-items:center;gap:7px;height:50px;background:#fff;padding:8px;border-radius:3px}.template-sketch i{width:24px;height:25px;background:#b3c0a2}.template-sketch b{width:40px;height:24px;border-top:4px solid #a4b194;border-bottom:2px solid #d3dacb}.minimal-sketch i{display:none}.bold-sketch{flex-direction:column;align-items:flex-start;gap:4px}.bold-sketch i{width:13px;height:13px}.bold-sketch b{height:10px}.color-field{border:1px solid var(--line);border-radius:5px;margin-top:8px;display:flex;align-items:center;gap:10px;padding:6px 10px}input[type=color]{border:0;padding:0;width:28px;height:28px;background:none;cursor:pointer}.color-field>span{font-size:11px;font-weight:400}.color-field .color-description{font-size:8px;color:#a0aa94;margin-left:auto}.input-help{display:block;font-size:9px;line-height:1.8;font-weight:400;color:#a1aa94;margin-top:7px}.saved-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.saved-card,.empty-state,.guide-card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:25px}.saved-card h2{margin-bottom:8px}.saved-card p{font-size:11px;color:#99a28c}.saved-card-preview{padding:20px 0;min-height:150px;overflow:auto;border-top:1px solid var(--line);margin-top:18px}.saved-card-preview>table{zoom:.8}.saved-card-actions{display:flex;gap:8px;margin-top:15px}.danger{color:#a3483e;background:#fcf1ef;border:1px solid #ecd2ce}.empty-state{grid-column:1/-1;padding:65px 25px;text-align:center;color:#8c997d;font-size:12px;line-height:2}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.guide-card h2{margin:20px 0}.guide-card ol{padding-left:17px;margin:0;color:#8a967c;font-size:12px;line-height:2}.guide-card li{padding:0 0 10px 4px}.guide-footnote{color:#98a38b;font-size:11px;line-height:1.8;margin-top:24px}#toast{position:fixed;bottom:25px;left:calc(50% + 100px);transform:translateX(-50%);background:#354b32;color:white;border:1px solid #72876a;padding:14px 22px;border-radius:8px;box-shadow:0 7px 35px #33452b20;font-size:12px;line-height:1.6;max-width:calc(100vw - 40px);z-index:10}#toast.error{background:#8a4d40;border-color:#ad7769}dialog{border:1px solid var(--line);border-radius:12px;padding:28px;color:#56654c;max-width:420px;width:calc(100% - 40px)}dialog::backdrop{background:#25351e55;backdrop-filter:blur(3px)}dialog h2{font-size:18px}dialog p{font-size:12px;color:#89967b;line-height:1.8}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}@media(min-width:1500px){main{padding-top:48px}.tab-panel{min-height:490px}.email-body{padding-top:20px;padding-bottom:40px}#signature-preview{margin-top:32px}}@media(max-width:1200px){.sidebar{width:215px;padding-left:14px;padding-right:14px}.main-shell{margin-left:215px}main{padding:30px 26px 0}.topbar{padding:0 26px}.builder-grid{gap:20px;grid-template-columns:minmax(315px,1fr) minmax(315px,1fr)}h1{font-size:29px}.small-muted{display:none}.tabs{gap:24px}.save-note{display:block;margin:10px 0 0}.card-header{padding-left:20px}.guide-grid{grid-template-columns:1fr}.topbar-tag{display:none}}@media(max-width:950px){.sidebar{width:190px}.main-shell{margin-left:190px}.workspace{font-size:9px;gap:6px;padding-left:0}.workspace small{font-size:8px}.nav-item{font-size:10px;padding:12px 8px;gap:7px}.nav-new{display:none}.builder-grid{grid-template-columns:1fr}.preview-column{padding-top:10px}.page-heading{align-items:flex-start}.page-heading>.button{font-size:0;padding:7px 10px}.page-heading>.button>span{font-size:20px}.saved-list{grid-template-columns:1fr}#toast{left:calc(50% + 80px)}.tab-panel{min-height:0}}@media(max-width:620px){.sidebar{position:static;width:100%;padding:16px;border-right:0;border-bottom:1px solid var(--line);display:block}.brand{font-size:29px;margin:0 0 15px 3px}.brand-icon{height:30px;width:30px;font-size:28px}.workspace,.nav-label,.sidebar-note,.sidebar-bottom{display:none}.sidebar nav{display:flex;gap:5px}.nav-item{margin:0;justify-content:center;font-size:9px;gap:5px;padding:9px 5px;white-space:nowrap}.nav-item>span:first-child{font-size:14px}#saved-count{margin-left:0;font-size:8px}.main-shell{margin-left:0}.topbar{height:47px;padding:0 20px;font-size:9px}main{padding:25px 17px 0}.eyebrow{font-size:7px;letter-spacing:1.6px}h1{font-size:27px}.page-heading{gap:10px;margin-bottom:25px}.page-heading p{font-size:10px}.card-header{padding:19px}.tabs{padding:0 19px;gap:26px}.tab-panel{padding:22px 19px}.editor-footer{padding:18px 19px}.save-note{display:inline;margin-left:9px;font-size:8px}.field-row{gap:10px}.preview-title{margin-bottom:13px}.email-meta,.email-body{padding-left:18px;padding-right:18px}.export-actions>.button{font-size:10px;padding:11px 10px}.page-footer{font-size:7px;gap:15px;line-height:1.8}#toast{left:50%;width:max-content;font-size:11px}.compatibility>div{gap:23px}.saved-card{padding:20px}.template-options{gap:7px}.template-option small{font-size:7px}.color-field .color-description{display:none}}
