:root{--pink:#f49cba;--gold:#c79538;--ink:#4d3040;--muted:#9a7181;--line:#f1d3dd}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 8% 0,#ffdce9 0,transparent 34%),radial-gradient(circle at 95% 10%,#fff0c9 0,transparent 28%),linear-gradient(145deg,#fffafd,#fff5f8 55%,#fffaf0);color:var(--ink);font-family:Arial,sans-serif}button,input,select{font:inherit}.hidden{display:none!important}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,5vw);border-bottom:1px solid #f4dce4;background:#fffdfdda;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900}.brand em{font-style:normal;color:var(--gold)}.brand-mark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#ffb4cc,#e9769e);box-shadow:0 5px 0 #c7587f,0 10px 20px #d9668c38}.status{display:flex;align-items:center;gap:8px;color:#97717f;font-size:14px}.status i{width:9px;height:9px;border-radius:50%;background:#e1ad43;box-shadow:0 0 0 4px #f9e7b9}
.workspace{width:min(1180px,calc(100% - 40px));margin:auto;padding:62px 0 30px}.intro{text-align:center;margin-bottom:34px}.eyebrow{color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.18em}.intro h1{font-size:clamp(38px,5vw,70px);line-height:1.02;letter-spacing:-.055em;margin:13px 0 16px}.intro h1 em{font-style:normal;background:linear-gradient(90deg,#dd7098,#c79638);background-clip:text;color:transparent}.intro>p{color:var(--muted)}
.create-card{width:min(580px,100%);margin:auto;padding:50px 28px;text-align:center;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,#fff,#fff4f8);box-shadow:0 28px 70px #b75a7c20}.orb{width:76px;height:76px;border-radius:25px;margin:0 auto 22px;display:grid;place-items:center;font-size:32px;color:#9b6321;background:linear-gradient(145deg,#fff3bd,#ebc65c);border:1px solid #d8ac42;box-shadow:0 7px 0 #bd8732}.create-card h2{font-size:25px;margin:0 0 8px}.create-card p{color:var(--muted)}.email-builder{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin:28px 0 18px}.email-builder input,.email-builder select{height:50px;border:1px solid #edc9d5;border-radius:13px;background:#fff;color:#5e3d4b;padding:0 14px;outline:none;box-shadow:0 3px 0 #efd4dc}.email-builder input:focus,.email-builder select:focus{border-color:#e783a5;box-shadow:0 0 0 4px #f7abc330}
.primary,.copy,.icon-btn{border:0;cursor:pointer;transition:.12s}.primary{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(#ffb5cd,#ed7fa5);color:#fff;font-weight:900;padding:14px;border:1px solid #dd7297;border-radius:14px;box-shadow:0 6px 0 #bf557b,0 11px 24px #d4678c38}.primary:hover,.copy:hover{transform:translateY(-2px)}.primary:active{transform:translateY(5px);box-shadow:0 1px 0 #bf557b}.primary:disabled{opacity:.55}.error{margin-top:18px;padding:12px;border-radius:11px;color:#b43f61;background:#fff0f3;border:1px solid #ffc7d3}
.address-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;border:1px solid #edcad5;border-radius:22px;background:linear-gradient(105deg,#fff,#fff0f5);margin-bottom:18px;box-shadow:0 8px 25px #ae567517}.address-card>div:first-child{display:grid;gap:6px;min-width:0}.address-card span,.reader-head span{font-size:11px;letter-spacing:.14em;color:#b77b24;font-weight:900}.address-card strong{font-size:clamp(18px,2.5vw,28px);overflow-wrap:anywhere}.address-card small{color:var(--muted)}.address-actions{display:flex;gap:10px}.copy{display:flex;gap:8px;background:linear-gradient(#ffeeb4,#edc858);color:#704914;padding:12px 17px;border:1px solid #d9ae42;border-radius:12px;font-weight:900;box-shadow:0 5px 0 #bb8530}.copy:active{transform:translateY(4px);box-shadow:0 1px 0 #bb8530}.icon-btn{width:43px;height:43px;border:1px solid #ebcbd6;border-radius:12px;background:linear-gradient(#fff,#fff0f5);color:#b66d87;box-shadow:0 4px 0 #e0b6c4}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #e0b6c4}
.mail-grid{display:grid;grid-template-columns:minmax(300px,400px) 1fr;min-height:440px;border:1px solid #efccd7;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 28px 70px #b5577920}.mail-list{border-right:1px solid #f0d7df;background:#fff8fb}.section-head{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #efd8e0}.section-head>div{display:flex;align-items:baseline;gap:9px}.section-head h2{font-size:18px}.section-head span{font-size:12px;color:var(--muted)}.empty{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#d3a7b7;padding:30px}.empty-icon{font-size:34px;margin-bottom:14px}.empty p{color:#745462;font-weight:800;margin:0 0 7px}.empty span{font-size:14px}.reader>.empty{min-height:438px}.message-row{width:100%;display:flex;text-align:left;gap:13px;padding:17px 18px;border:0;border-bottom:1px solid #f1dce3;background:transparent;color:#60414e;cursor:pointer}.message-row:hover,.message-row.active{background:#ffeef4}.sender-icon{flex:0 0 40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#ffd8e5,#f7a9c2);color:#984a69;font-weight:900}.message-copy{display:grid;gap:3px;min-width:0}.message-copy b,.message-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-copy b{font-size:13px;color:#aa7889}.message-copy small{font-size:11px;color:#b4939e}.reader-head{padding:27px 30px;border-bottom:1px solid #f0d8e0}.reader-head b{display:block;color:#a27886;margin:5px 0 20px;font-size:14px}.reader-head h2{margin:0 0 7px}.reader-head small{color:#b2919d}.body-text{padding:30px;white-space:pre-wrap;line-height:1.7;overflow-wrap:anywhere}footer{text-align:center;color:#af8997;font-size:12px;margin-top:22px}
@media(max-width:720px){.topbar{height:64px;padding:0 18px}.status{font-size:0}.workspace{width:calc(100% - 24px);padding-top:40px}.intro h1{font-size:40px}.intro br{display:none}.email-builder{grid-template-columns:1fr}.address-card{align-items:flex-start;flex-direction:column;padding:20px}.address-actions{width:100%}.copy{flex:1;justify-content:center}.mail-grid{grid-template-columns:1fr}.mail-list{border-right:0}.reader{border-top:1px solid #f0d8e0}.reader>.empty{min-height:250px}.create-card{padding:40px 20px}}