:root{--ink:#193c35;--muted:#64716b;--accent:#c25636;--paper:#f6f5f0;--line:#dfe4dd;--soft:#edf1e9;--shadow:0 10px 34px #17352d08;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}button,input,select,textarea{font:inherit}button,.button{cursor:pointer;border-radius:10px;background:var(--ink);border:1px solid var(--ink);color:white;font-weight:700;padding:12px 18px;text-decoration:none;transition:background .18s,box-shadow .18s,transform .18s}button:hover,.button:hover{background:#286052;color:white;box-shadow:0 4px 14px #17352d14}button:disabled{cursor:not-allowed;opacity:.48;box-shadow:none}button.secondary,.button.secondary{background:white;color:var(--ink);border:1px solid #ced9d0}button.secondary:hover,.button.secondary:hover{background:#eef3ed}a{color:#205c4d;text-underline-offset:4px}button.link,button.text-button{background:none;border:0;color:var(--ink);padding:6px 0;box-shadow:none;font-weight:600}button.text-button:hover,button.link:hover{color:var(--accent);background:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #cc734c;outline-offset:3px}label{color:var(--ink);font-weight:600;margin:14px 0 6px;display:block}label span{font-size:11px;font-weight:400;color:var(--muted);float:right}input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea{width:100%;background:#fcfcf9;border:1px solid #cfd8d1;color:var(--ink);border-radius:8px;padding:11px 12px;min-width:0}textarea{resize:vertical;min-height:102px}input[type=range]{width:100%;accent-color:var(--ink)}input[type=checkbox]{accent-color:var(--ink)}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1{font-size:38px;line-height:1.15;letter-spacing:-1.4px;margin-bottom:10px}h2{font-size:23px;line-height:1.2;letter-spacing:-.65px;margin-bottom:0}h3{font-size:17px;line-height:1.35;letter-spacing:-.2px}p{margin-bottom:14px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:750;color:#73847a;margin:0 0 9px;line-height:1.5}.muted,.hint{color:var(--muted)}.hint{font-size:12px;line-height:1.6;margin:12px 0}.topbar{max-width:none;width:100%;height:auto;min-height:85px;border-bottom:1px solid var(--line);padding:18px max(24px,calc((100% - 1240px)/2));background:#fffefa;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:28px;font-weight:750;letter-spacing:-1.1px}.brand-period{color:var(--accent)}.brand img{width:32px;height:32px;border-radius:9px}.topbar nav{display:flex;align-items:center;gap:28px}.topbar nav a{text-decoration:none;font-size:13px;font-weight:600;padding:8px 0;color:#617367;border-bottom:2px solid transparent}.topbar nav a[aria-current]{color:var(--ink);border-color:var(--ink)}.topbar nav form{margin:0 0 0 14px}.topbar nav button{font-size:12px;color:#64716b}.back-home{font-size:12px;text-decoration:none;color:var(--muted)}main{max-width:1240px;margin:0 auto;padding:32px 0 55px}.app-footer{max-width:1240px;padding:23px 0 30px;margin:auto;display:flex;justify-content:space-between;border-top:1px solid var(--line);gap:15px;font-size:11px;color:var(--muted)}.app-footer a{text-decoration:none;font-weight:700;font-size:17px}.skip-link{position:absolute;top:-100px;left:16px;z-index:99;padding:12px;background:white}.skip-link:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.studio-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:9px 0 32px}.studio-heading p:not(.eyebrow){font-size:14px;color:var(--muted);margin:0}.connection-chip{display:flex;align-items:center;gap:10px;flex-shrink:0;background:#edf1e9;padding:10px 16px;border-radius:12px;font-size:12px}.connection-chip strong{font-weight:700}.connection-chip small{display:block;font-size:10px;color:#66766d}.connection-dot{width:8px;height:8px;background:#839083;border-radius:50%;flex-shrink:0}.connection-chip.recent .connection-dot{background:#347957;box-shadow:0 0 0 4px #d7e8d5}.connection-chip.stale{background:#f4e7d6}.connection-chip.stale .connection-dot{background:#ab7130}.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 358px;gap:26px;align-items:start}.panel,.card{border:1px solid var(--line);background:#fffefa;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin-bottom:24px;min-width:0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.section-title .eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:7px}.quiet-pill{font-size:10px;color:#6b796d;white-space:nowrap;background:#f0f1ea;padding:5px 9px;border-radius:20px;border:1px solid #e6e7de}.search-box{position:relative;margin:0}.search-box svg{position:absolute;width:17px;top:14px;left:14px;stroke:#65776b;stroke-width:1.6}.search-box input[type=search]{background:#f6f7f2;border-color:#e3e8df;padding:11px 16px 11px 40px;font-size:12px}.category-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0 21px}.category-tabs button{padding:7px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#68776c;font-size:11px;font-weight:600;box-shadow:none}.category-tabs button.active{background:#e8efe4;border-color:#dbe4d6;color:#204837}.category-tabs button:hover{background:#f0f3eb;color:var(--ink)}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.template-card{position:relative;display:flex;flex-direction:column;background:#fffefa;border:1px solid #dce2d8;border-radius:12px;color:var(--ink);padding:0;overflow:hidden;text-align:left;box-shadow:none}.template-card:hover{background:#fffefa;color:var(--ink);border-color:#9bb0a1;box-shadow:0 5px 16px #17352d0d;transform:translateY(-2px)}.template-card.selected{border:2px solid var(--ink)}.template-card.selected .sample-art{margin:-1px -1px 0}.selected-indicator{display:none;position:absolute;right:9px;top:9px;border-radius:50%;background:var(--ink);color:white;width:20px;height:20px;align-items:center;justify-content:center;font-size:11px}.template-card.selected .selected-indicator{display:flex}.sample-art{height:158px;display:flex;align-items:center;justify-content:center;width:100%;background:#edece5;padding:10px}.template-card:nth-child(3n+2) .sample-art{background:#e7eee7}.template-card:nth-child(3n+3) .sample-art{background:#f3e9df}.sample-art canvas{background:white;height:134px;width:auto;max-width:100%;border:1px solid #e1e0d8;box-shadow:0 2px 3px #17251c0d;border-radius:2px}.template-meta{padding:11px 12px;font-size:11px;font-weight:650;line-height:1.4;min-height:38px;width:100%}.template-card.selected .template-meta{padding:10px 11px}.library-caption{font-size:10px;color:#758176;display:flex;justify-content:space-between;margin:17px 0 0;gap:10px}.empty-results{padding:35px 8px;text-align:center;color:var(--muted)}.source-tabs{display:flex;gap:4px;background:#f1f3ed;border-radius:9px;padding:4px;margin-bottom:21px}.source-tabs button{flex:1;background:none;border:0;color:#6a796d;font-size:12px;padding:9px;box-shadow:none}.source-tabs button.active{background:#fffefa;color:var(--ink);box-shadow:0 2px 5px #233f2810}.editor label{font-size:12px}.editor .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:0}.editor-bottom{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-top:10px}.orientation-label{min-width:215px}.small-note{font-size:11px;color:var(--muted);max-width:180px;text-align:right;padding-bottom:12px}.editor details{border-top:1px solid #e6e8e0;margin-top:17px;padding-top:14px}.editor summary,.current-panel summary{font-size:11px;color:#6c786c;font-weight:600;cursor:pointer}.advanced-composer label{margin-top:14px}.file-box{border:1px dashed #aebdaf;border-radius:12px;min-height:226px;background:#f5f7f0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px;gap:8px;cursor:pointer}.file-box span{float:none;font-size:11px}.file-box .upload-symbol{font-size:32px;color:var(--ink)}.file-box input{max-width:100%;font-size:12px}.preview-panel{padding:24px}.preview-panel h2{font-size:21px}.draft-stage{position:relative;background:#eef0e9;border-radius:12px;padding:23px 20px 18px;margin:4px 0 15px;display:flex;justify-content:center;min-height:320px;align-items:center}.mini-device{border-radius:11px;background:#e3e1d9;border:1px solid #c6c6ba;padding:13px 12px 6px;box-shadow:4px 10px 14px #33382c17;max-width:100%;display:flex;flex-direction:column;align-items:center}.mini-device canvas{display:block;width:158px;height:auto;max-width:100%;background:white;border:1px solid #c7c7ba;border-radius:3px}.mini-device.landscape canvas{width:258px}.mini-device.landscape{padding:10px 8px 5px}.device-label{font-size:8px;font-weight:700;color:#767a6f;letter-spacing:-.2px;margin-top:5px}.draft-stage #preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#eff1ea;border-radius:12px;font-size:12px}.draft-label{display:block;font-size:12px}.preview-panel #compose-message{font-size:11px;min-height:36px;margin:6px 0 14px}.send-button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 17px;font-size:13px}.send-button span{font-size:20px;line-height:1}.download-preview{font-size:11px!important;display:block;margin:10px auto 0}.send-footnote{font-size:10px;color:#7b8275;text-align:center;margin:7px 0 0}.current-panel{padding:24px}.current-panel h2{font-size:17px}.badge{font-size:9px;font-weight:600;border-radius:20px;padding:5px 8px;background:#f2eee3;color:#725c39;white-space:normal;text-align:center}.badge.done{background:#e3efdf;color:#285035}.current-summary{display:flex;gap:14px;align-items:center;margin-bottom:18px}.current-summary canvas{width:47px;max-height:78px;height:auto;background:white;border:1px solid var(--line)}.current-summary h3{font-size:13px;margin:0 0 4px;overflow-wrap:anywhere}.current-summary p,.current-summary span{font-size:10px;margin:0;color:var(--muted)}.status-grid{display:grid;grid-template-columns:1fr auto;gap:9px 12px;font-size:11px;margin:0 0 20px;padding:0}.status-grid dt{color:var(--muted)}.status-grid dd{margin:0;text-align:right;color:var(--ink);font-weight:500;overflow-wrap:anywhere}.current-panel .secondary{font-size:11px;width:100%;padding:10px 12px}.current-panel .hint{font-size:10px}.current-panel .text-button{font-size:11px;display:block;margin:9px 0}.current-panel label{font-size:11px}.current-panel #interval-form{margin:12px 0}.current-panel #interval-form .secondary{margin-top:8px}.current-panel #status-message{font-size:11px}.refresh-status{font-size:9px;color:#768175;margin:15px 0 0}.error-text{color:#aa3a27!important}.notice{border-radius:9px;font-size:13px}.notice.success{background:#edf5e7;color:#285239;border:1px solid #c8debe}.notice.error{background:#fff0e8;color:#8f351e;border:1px solid #eccab8}.login-page main{padding:0;max-width:none}.login-page .topbar{border-bottom:0}.login-layout{display:grid;grid-template-columns:1fr 1fr;max-width:1240px;margin:15px auto 65px;border-radius:24px;overflow:hidden;border:1px solid var(--line);min-height:640px;background:#fffefa}.login-story{background:var(--ink);color:#f7f4e8;padding:57px;position:relative}.login-story .eyebrow{color:#aabcab}.login-story h1{font-size:54px;line-height:1.08;letter-spacing:-2px;margin:22px 0 25px}.login-story>p:not(.eyebrow){color:#bfd0bf;font-size:14px;line-height:1.9}.login-note{margin-top:36px;transform:rotate(-3deg);background:#f8f4e6;border-radius:7px;padding:22px 25px;color:var(--ink);max-width:360px;box-shadow:8px 13px 0 #102d281f;display:flex;flex-direction:column;gap:4px}.login-note strong{font-size:22px;letter-spacing:-.7px}.login-note .note-label{color:#927b5d;font-size:8px;letter-spacing:2px}.login-note span{font-size:12px}.story-foot{display:block;margin-top:43px;font-size:10px;color:#aabcab}.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:55px}.login-form{width:100%;max-width:345px}.login-form h2{font-size:36px;margin:10px 0 14px;letter-spacing:-1.2px}.login-form>p.muted{font-size:14px}.login-form form{margin-top:29px}.login-form form button{margin-top:18px;width:100%;display:flex;justify-content:space-between}.login-form label{font-size:12px}.login-hint{font-size:11px;color:#778176;margin-top:20px;line-height:1.8}.login-meta{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;font-size:9px;color:#7d877b;display:flex;justify-content:space-between;gap:10px}.utility-page main{max-width:1120px}.utility-page .card,.utility-page .panel{padding:27px}.utility-page .heading{margin-bottom:25px}.utility-page .grid{gap:35px}.utility-page .device-overview .status-grid{max-width:600px;font-size:13px}.technical-settings summary{font-weight:700;font-size:16px;cursor:pointer}.technical-settings[open] summary{margin-bottom:24px}.technical-settings h2{font-size:19px;margin-bottom:14px}.technical-settings h3{margin-top:20px}.technical-settings p{font-size:13px}.technical-settings label{font-size:12px}.technical-settings code{font-size:11px;word-break:break-all}.utility-page pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:400px;overflow:auto;font-size:11px}.utility-page .events{font-size:12px}.studio-right{min-width:0}.studio-left{min-width:0}
@media(min-width:1200px){.preview-panel{position:relative}}
@media(max-width:1300px){main,.app-footer,.login-layout{margin-left:24px;margin-right:24px}.login-layout{max-width:none}.topbar{padding-left:24px;padding-right:24px}}
@media(max-width:1000px){.studio-layout{grid-template-columns:minmax(0,1fr) 315px;gap:18px}.panel{padding:20px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-heading h1{font-size:32px}.login-story{padding:40px}.login-story h1{font-size:46px}.login-form-wrap{padding:35px}.connection-chip{max-width:230px}}
@media(max-width:760px){.studio-layout{grid-template-columns:1fr;gap:0}.studio-right{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.draft-stage{min-height:280px;padding:20px 12px}.mini-device canvas{width:135px}.studio-heading{align-items:start;flex-direction:column;margin-bottom:23px}.connection-chip{max-width:none;padding:8px 12px}.connection-chip small{display:inline;margin-left:8px}.studio-heading h1{font-size:32px}.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.login-layout{grid-template-columns:1fr;min-height:0}.login-story{display:none}.login-form-wrap{padding:52px 28px}.login-form{max-width:390px}.topbar nav{gap:18px}.topbar nav form{margin-left:0}.utility-page .grid{grid-template-columns:1fr}.app-footer span:nth-child(2){display:none}}
@media(max-width:520px){main,.app-footer{margin-left:15px;margin-right:15px;padding-top:24px}.topbar{padding:15px;gap:12px;min-height:76px;flex-wrap:wrap}.brand{font-size:24px}.brand img{width:28px;height:28px}.topbar nav{width:100%;justify-content:space-between;border-top:1px solid #e7e9e0;padding-top:8px;gap:12px}.topbar nav a{font-size:12px}.topbar nav button{font-size:11px}.studio-heading h1{font-size:29px;letter-spacing:-1px}.studio-heading p:not(.eyebrow){font-size:12px}.section-title h2{font-size:21px}.panel,.card{padding:19px;border-radius:14px;margin-bottom:18px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.sample-art{height:145px}.sample-art canvas{height:121px}.category-tabs{gap:4px;margin-top:13px}.category-tabs button{font-size:10px;padding:6px 8px}.quiet-pill{font-size:9px}.library-caption{font-size:9px}.editor .form-row{grid-template-columns:1fr;gap:0}.editor-bottom{display:block}.small-note{display:block;text-align:left;max-width:none;padding:0 0 4px}.studio-right{display:block}.draft-stage{min-height:330px}.mini-device canvas{width:158px}.current-summary canvas{width:52px}.status-grid{font-size:11px}.studio-heading{gap:14px}.send-button{padding:15px 17px}.login-layout{margin:6px 15px 38px;border-radius:17px}.login-form-wrap{padding:38px 24px}.login-form h2{font-size:30px}.app-footer{font-size:9px}.utility-page .panel,.utility-page .card{padding:20px}.technical-settings .button-row{flex-direction:column;align-items:stretch}.technical-settings .button{white-space:normal}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Final readability and small-screen navigation pass. */
.studio-page .search-box input[type=search]{padding-left:40px;margin-top:0}.eyebrow,.section-title .eyebrow{font-size:10px;color:#616f61}.category-tabs button{font-size:12px}.template-meta{font-size:12px}.library-caption{font-size:11px}.draft-stage{min-height:374px}.mini-device canvas{width:184px}.preview-panel #compose-message,.preview-panel .hint{font-size:12px}.current-panel .hint,.refresh-status{font-size:11px;color:#626e60}.small-note,.send-footnote{font-size:11px;color:#677363}.quiet-pill{color:#586752}.mobile-preview-link{display:none}#preview-panel{scroll-margin-top:20px}
@media(max-width:1000px){.category-tabs button{font-size:11px}.library-caption{font-size:10px}}
@media(max-width:760px){.mobile-preview-link{display:flex;position:fixed;left:18px;right:18px;bottom:14px;z-index:10;background:#193c35;color:#fffefa;border-radius:11px;padding:13px 17px;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;text-decoration:none;box-shadow:0 5px 24px #17352d25}.studio-page .app-footer{padding-bottom:83px}.draft-stage{min-height:360px}.mini-device canvas{width:175px}}

.login-story .eyebrow{color:#b9cbbb!important}

/* Combined Premium 3.2 / QR Contact integration. */
.topbar nav{flex-wrap:wrap}.topbar nav form{flex-shrink:0}.dq-save-draft:disabled{opacity:.5;cursor:not-allowed}#voorbeelden{scroll-margin-top:100px}
@media(max-width:900px){.topbar{gap:16px;flex-wrap:wrap}.topbar nav{gap:14px}.topbar nav a{font-size:13px}}