
:root{font-family:Arial,Helvetica,sans-serif;color:#252525;background:#fff;font-synthesis:none;--red:#df1010;--navy:#141414}
*{box-sizing:border-box}body{margin:0}
header,main{max-width:1060px;margin:0 auto;padding:0 32px}
.header-inner{padding:28px 0 20px;border-bottom:3px solid var(--red)}
.header-inner img{display:block;width:230px;max-width:100%;height:auto;margin-left:0}
main{padding-top:26px;padding-bottom:40px}
h1{font-size:26px;line-height:1.25;font-weight:600;margin:0 0 10px;color:var(--navy)}
.intro p{font-size:16px;line-height:1.5;margin:0 0 30px;color:#555}
.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:44px;align-items:start}
.form-panel,.preview-panel{min-width:0}
.section-heading{margin-bottom:16px}h2{font-size:17px;line-height:1.4;margin:0;font-weight:600}
label{display:block;font-size:14px;font-weight:600;margin:18px 0 6px}form>label:first-child{margin-top:0}
input{display:block;width:100%;padding:10px;border:1px solid #a7a7a7;border-radius:2px;font:16px Arial;color:#252525;background:#fff}
input::placeholder{color:#757575;font-size:14px}
input:focus{outline:2px solid var(--navy);outline-offset:1px}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.privacy{font-size:12px;line-height:1.5;color:#666;margin:14px 0 0}
.paper{background:#fff;border:1px solid #d2d2d2;padding:22px;overflow-x:auto}
.copy-area{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:16px}
.copy-area button{order:-1}.copy-area p{font-size:13px;line-height:1.5;color:#555;margin:0}
button{border:1px solid #b90909;background:var(--red);color:white;border-radius:2px;padding:11px 17px;font:600 14px Arial;cursor:pointer;line-height:1.4}
button:hover{background:#b90909}button:disabled{opacity:.65;cursor:wait}
#manual{font-size:14px;line-height:1.5}.secondary{background:var(--navy);border-color:var(--navy)}
.help{margin-top:36px;padding-top:24px;border-top:1px solid #c9c9c9}
.help .section-heading{margin-bottom:8px}.help>p{font-size:14px;line-height:1.6;color:#555;max-width:760px;margin:0 0 20px}
.client-guides{max-width:760px;border-top:1px solid #d5d5d5}
.client-guide{border-bottom:1px solid #d5d5d5}
.client-guide summary{cursor:pointer;padding:14px 0;font-size:15px;font-weight:600;color:var(--navy)}
.client-guide ol{padding-left:25px;margin:0 0 18px}
.client-guide li{padding-left:3px;margin:10px 0;font-size:15px;line-height:1.6}
.client-note{font-size:14px;line-height:1.6;color:#555;margin:0 0 20px}
@media(max-width:760px){header,main{padding-left:20px;padding-right:20px}.header-inner{padding-top:18px}.workspace{grid-template-columns:1fr;gap:28px}h1{font-size:24px}.paper{padding:16px}.help{margin-top:28px}.header-inner img{width:210px}}

.dpi-footer{text-align:center;margin-top:40px;padding:20px 0 0;border-top:1px solid #e2e2e2}.dpi-footer a{display:inline-flex;align-items:center;gap:12px;color:#666;font-size:13px;line-height:1.5;text-decoration:none}.dpi-footer a:hover span{text-decoration:underline;text-underline-offset:3px}.dpi-footer img{display:block;width:52px;height:auto}

.login{max-width:360px;margin:15px 0 50px}.login p{line-height:1.5}.login button{margin-top:18px}.login-error{color:#9f2921}.logout{float:right;margin:0 0 15px 20px}.logout button{background:white;color:#555;border-color:#aaa;padding:6px 10px;font-size:13px}
