:root{--color-dark-green:#537b35;--color-skin:#f7e8d5;--color-text:#2c3e50;--color-shadow:rgba(83,123,53,0.4);--color-border:#3c5a27}body{font-family:Arial,sans-serif;background-color:var(--color-dark-green);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px;box-sizing:border-box}.mail-container{background-color:var(--color-skin);width:100%;max-width:800px;padding:30px;border:5px solid var(--color-dark-green);box-shadow:10px 10px 0 0 var(--color-shadow);box-sizing:border-box}.mail-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed var(--color-border);padding-bottom:15px;margin-bottom:20px}.read-header{justify-content:flex-start;gap:20px}.action-btn{border:none;padding:10px 15px;font-size:16px;cursor:pointer;text-transform:uppercase;font-weight:bold;letter-spacing:1px;border-radius:0}.drawing-btn{background-color:var(--color-dark-green);color:var(--color-skin);border:2px solid var(--color-border);box-shadow:3px 3px 0 0 var(--color-border);transition:all 0.1s ease-in-out}.drawing-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--color-border);background-color:#6a9544}.drawing-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--color-border)}.btn-icon{stroke:currentColor;fill:none;width:18px;height:18px;margin-right:8px;vertical-align:middle}.header-controls{margin-left:auto;display:flex;gap:10px}.mail-preview{min-height:60vh;overflow-y:auto;background-color:#ffffff;padding:30px;border:3px solid var(--color-border)}.content-header{border-bottom:1px dashed var(--color-shadow);margin-bottom:20px;padding-bottom:15px}.content-subject{font-size:28px;color:var(--color-dark-green);margin-bottom:15px;font-weight:bold;word-break:break-word}.content-meta{font-size:14px;color:var(--color-text);line-height:2.0}.content-body p{font-size:16px;line-height:1.8;color:var(--color-text);margin-bottom:1.5em;white-space:pre-wrap}.content-attachments{margin-top:30px;padding-top:15px;border-top:1px solid var(--color-shadow)}.attachment-label{font-weight:bold;color:var(--color-dark-green);display:block;margin-bottom:8px}.attachment-link{color:var(--color-border);text-decoration:underline;font-size:14px;transition:color 0.1s}.attachment-link:hover{color:var(--color-dark-green)}.mail-footer{text-align:right;margin-top:20px;border-top:1px solid var(--color-border);padding-top:10px}.footer-text{font-size:12px;color:var(--color-text);font-style:italic;opacity:0.7}:root{--color-dark-green:#537b35;--color-skin:#f7e8d5;--color-text:#2c3e50;--color-shadow:rgba(83,123,53,0.4);--color-border:#3c5a27}body{font-family:Arial,sans-serif;background-color:var(--color-dark-green);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:20px;box-sizing:border-box}.mail-container{background-color:var(--color-skin);width:100%;max-width:800px;padding:30px;border:5px solid var(--color-dark-green);box-shadow:10px 10px 0 0 var(--color-shadow);box-sizing:border-box}.mail-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed var(--color-border);padding-bottom:15px;margin-bottom:20px}.read-header{justify-content:flex-start;gap:20px}.action-btn{border:none;padding:10px 15px;font-size:16px;cursor:pointer;text-transform:uppercase;font-weight:bold;letter-spacing:1px;border-radius:0}.drawing-btn{background-color:var(--color-dark-green);color:var(--color-skin);border:2px solid var(--color-border);box-shadow:3px 3px 0 0 var(--color-border);transition:all 0.1s ease-in-out}.drawing-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 0 var(--color-border);background-color:#6a9544}.drawing-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--color-border)}.btn-icon{stroke:currentColor;fill:none;width:18px;height:18px;margin-right:8px;vertical-align:middle}.header-controls{margin-left:auto;display:flex;gap:10px}.mail-preview{min-height:60vh;overflow-y:auto;background-color:#ffffff;padding:30px;border:3px solid var(--color-border)}.content-header{border-bottom:1px dashed var(--color-shadow);margin-bottom:20px;padding-bottom:15px}.content-subject{font-size:28px;color:var(--color-dark-green);margin-bottom:15px;font-weight:bold;word-break:break-word}.content-meta{font-size:14px;color:var(--color-text);line-height:2.0}.content-body p{font-size:16px;line-height:1.8;color:var(--color-text);margin-bottom:1.5em;white-space:pre-wrap}.content-attachments{margin-top:30px;padding-top:15px;border-top:1px solid var(--color-shadow)}.attachment-label{font-weight:bold;color:var(--color-dark-green);display:block;margin-bottom:8px}.attachment-link{color:var(--color-border);text-decoration:underline;font-size:14px;transition:color 0.1s}.attachment-link:hover{color:var(--color-dark-green)}.mail-footer{text-align:right;margin-top:20px;border-top:1px solid var(--color-border);padding-top:10px}.footer-text{font-size:12px;color:var(--color-text);font-style:italic;opacity:0.7}body::-webkit-scrollbar,html::-webkit-scrollbar{width:12px;height:12px}body::-webkit-scrollbar-track,html::-webkit-scrollbar-track{background:var(--color-skin);border-radius:6px;border:1px solid var(--color-shadow)}body::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb{background-color:var(--color-dark-green);border-radius:6px;border:3px solid var(--color-border)}body::-webkit-scrollbar-thumb:hover,html::-webkit-scrollbar-thumb:hover{background-color:#6a9544}.textarea-field::-webkit-scrollbar-thumb,.mail-list::-webkit-scrollbar-thumb,.mail-preview::-webkit-scrollbar-thumb{background-color:var(--color-dark-green);border:2px solid var(--color-border)}@media (max-width:768px){.mail-container{padding:20px;border-width:3px;box-shadow:5px 5px 0 0 var(--color-shadow)}.read-header{flex-direction:column;align-items:flex-start;gap:10px}.header-controls{margin-left:0;width:100%;justify-content:flex-end}.content-subject{font-size:24px}.mail-preview{padding:20px}}