:root{--ink:#202b33;--muted:#667781;--line:#e4e8eb;--green:#087e69;--paper:#fff;--soft:#f5f7f8}*{box-sizing:border-box}body{margin:0;background:#f7f9fa;color:var(--ink);font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px clamp(18px,4vw,58px);background:#fff;border-bottom:1px solid var(--line)}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--green);font-weight:800}.top h1{font-size:clamp(24px,3vw,34px);margin:5px 0}.top p,.section-head p{margin:0;color:var(--muted)}.top-actions{display:flex;flex-wrap:wrap;gap:8px}.layout{max-width:1450px;margin:26px auto;padding:0 22px;display:grid;grid-template-columns:minmax(340px,1.05fr) minmax(380px,.95fr);gap:24px;align-items:start}.preview-col,.editor{min-width:0}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.section-head h2{margin:0 0 3px;font-size:20px}.section-head p{font-size:13px}.live{font-size:12px;color:#37765d;white-space:nowrap}.live i{display:inline-block;width:7px;height:7px;background:#38a169;border-radius:50%;margin-right:5px}.phone-wrap{min-height:630px;background:#e8edf0;border:1px solid #d9e0e4;border-radius:18px;padding:22px;display:flex;justify-content:center;align-items:center;overflow:hidden}.phone{width:375px;max-width:100%;height:620px;background:#efe9df;border:7px solid #1c272d;border-radius:34px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 14px 38px #24323c26;flex-shrink:0}.statusbar{height:29px;flex-shrink:0;background:#075e54;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:12px;font-weight:650}.status-icons{display:flex;gap:5px;align-items:center;font-size:10px}.signal{letter-spacing:-2px;font-size:13px}.battery{width:19px;height:10px;border:1px solid #fff;border-radius:2px;padding:1px;display:inline-flex}.battery:after{content:"";height:4px;width:2px;background:#fff;position:absolute;margin-left:17px}.battery i{display:block;background:#fff;width:85%;height:100%}.chat-header{height:59px;flex-shrink:0;background:#075e54;color:white;display:flex;align-items:center;padding:0 9px;gap:9px}.back{font-size:29px;line-height:1}.avatar{width:36px;height:36px;border-radius:50%;background:#d6e8e5;color:#286b65;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:750;overflow:hidden;flex-shrink:0}.avatar img,.person-avatar img{width:100%;height:100%;object-fit:cover}.contact{display:flex;flex-direction:column;flex:1;min-width:0}.contact strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact small{font-size:11px;opacity:.85}.head-icon{font-size:20px}.phoneicon{font-size:18px}.dots{font-size:23px}.chat-area{flex:1;overflow:hidden;padding:12px 9px 20px;display:flex;flex-direction:column;gap:7px;position:relative;background-color:#efe9df;background-image:radial-gradient(#d8cec0 0.65px,transparent .65px);background-size:13px 13px}.day-pill{align-self:center;background:#fff8df;color:#56656c;font-size:10px;padding:4px 10px;border-radius:7px;box-shadow:0 1px 2px #0001;margin-bottom:3px}.bubble{position:relative;max-width:83%;min-width:64px;padding:7px 8px 5px;border-radius:8px;font-size:15px;line-height:1.35;box-shadow:0 1px 1px #0001;overflow-wrap:anywhere;white-space:pre-wrap}.bubble.received{align-self:flex-start;background:var(--received,#fff);border-top-left-radius:2px}.bubble.sent{align-self:flex-end;background:var(--sent,#d9fdd3);border-top-right-radius:2px}.bubble .sender{font-size:11px;color:#8a5ab1;font-weight:700;margin-bottom:3px}.bubble .time{float:right;font-size:9px;color:#667781;margin:5px 0 -2px 10px;white-space:nowrap}.checks{color:#53a8df;font-size:11px;letter-spacing:-2px;margin-left:3px}.message-image{display:block;width:190px;max-width:100%;max-height:190px;object-fit:cover;border-radius:5px;margin:0 0 4px}.audio-line,.call-line{display:flex;align-items:center;gap:9px;min-width:180px;padding:5px 0}.audio-play{background:#b3d7cd;border-radius:50%;width:29px;height:29px;display:grid;place-items:center}.audio-wave{color:#4e8c7d;letter-spacing:1px;font-size:14px}.call-line .call-symbol{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#d8eee5;font-size:18px}.call-line small{display:block;color:#687c75}.composer{height:48px;background:#f5f1eb;display:flex;align-items:center;gap:8px;padding:0 9px;flex-shrink:0}.plus{font-size:25px;color:#58666b}.input-pill{flex:1;border-radius:24px;border:1px solid #ddd;background:#fff;height:33px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#879196;font-size:13px}.compose-icon{font-size:18px;color:#5b6b6e}.homebar{height:13px;flex-shrink:0;background:#f5f1eb;display:flex;justify-content:center;align-items:center}.homebar:after{content:"";width:100px;height:4px;border-radius:5px;background:#111}.fiction-tag{position:absolute;bottom:64px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.1em;color:#233d372e;pointer-events:none}.preview-tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:16px}.btn{border:0;border-radius:9px;padding:11px 15px;font:inherit;font-size:13px;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}.btn.primary{background:#087e69;color:#fff;box-shadow:0 4px 10px #087e6926}.btn.secondary{background:#fff;color:#26343c;border:1px solid #d9e0e4}.btn:hover,.small-btn:hover{filter:brightness(.97)}.notice{font-size:12px;color:#687781;background:#fff;border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:13px}.editor{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:0 5px 20px #20304008}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin:0 -2px 16px;padding-bottom:8px;overflow-x:auto}.tab{border:0;background:transparent;padding:9px 12px;border-radius:8px;font-weight:700;color:#667781;white-space:nowrap;cursor:pointer}.tab.active{background:#e8f4f1;color:#087e69}.tab-panel{display:none}.tab-panel.active{display:block}.card{border:1px solid var(--line);border-radius:11px;padding:15px;margin-bottom:13px;background:#fff}.card h3{font-size:15px;margin:0 0 13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label,.upload-label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#45545c;margin-bottom:10px}.form-grid input:not([type=color]):not([type=range]),.form-grid select,.people-editor input,.message-card input,.message-card textarea,.message-card select,textarea{width:100%;border:1px solid #d9e0e4;border-radius:7px;padding:10px;background:#fff;color:#202b33;font:inherit;font-size:13px;min-width:0}.form-grid input[type=color]{width:100%;height:38px;border:1px solid #d9e0e4;background:white;border-radius:7px;padding:3px}.form-grid input[type=range]{width:100%;accent-color:#087e69}.upload-label input{font-weight:400;font-size:12px}.small-btn{background:#f5f7f8;border:1px solid #dce3e6;border-radius:7px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer;color:#34434a}.small-btn.danger{color:#a33737;background:#fff8f8}.card-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.card-title-row h3{margin:0}.people-editor{display:grid;gap:8px;margin-top:13px}.person-card{display:grid;grid-template-columns:1fr 1fr auto;gap:7px;align-items:end;padding:10px;background:#f8fafb;border:1px solid #e7ecef;border-radius:8px}.person-card label{font-size:11px;color:#5d6c73;display:flex;flex-direction:column;gap:5px}.person-card input{min-width:0;padding:8px!important}.message-card{border:1px solid #e1e7ea;border-radius:9px;padding:11px;margin-top:9px;background:#fbfcfc}.message-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}.message-card-head strong{font-size:12px}.message-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.message-grid .wide{grid-column:1/-1}.message-card label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#5b6a72;font-weight:700}.message-card textarea{resize:vertical;min-height:58px}.message-card input[type=file]{font-size:11px;padding:6px}.hint{font-size:12px;color:#738189;margin:9px 0 12px}.hint code{background:#f0f4f5;padding:2px 4px;border-radius:4px}.add-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.full{width:100%;margin-top:8px}.range-value{font-weight:500;color:#087e69}.dark-phone .statusbar,.dark-phone .chat-header{background:#202c33}.dark-phone .chat-area{background-color:#0b141a;background-image:radial-gradient(#18252d .65px,transparent .65px)}.dark-phone .composer,.dark-phone .homebar{background:#202c33}.dark-phone .input-pill{background:#2a3942;border-color:#34444d;color:#aebac1}.dark-phone .plus,.dark-phone .compose-icon{color:#b8c5cc}.dark-phone .day-pill{background:#18252d;color:#d5e0e5}.dark-phone .bubble.received{color:#e9edef;background:#202c33}.dark-phone .bubble.sent{color:#e9edef;background:#005c4b}.dark-phone .bubble .time{color:#aebac1}.dark-phone .fiction-tag{color:#fff2}.iphone-phone{border-radius:42px;border-width:8px}.iphone-phone .statusbar{background:#f8f8f8;color:#161616;height:34px;padding:0 22px}.iphone-phone .chat-header{background:#f8f8f8;color:#161616}.iphone-phone .contact small{color:#6b777c}.iphone-phone .composer,.iphone-phone .homebar{background:#f8f8f8}.iphone-phone .homebar:after{background:#161616}.iphone-phone .back{color:#1676cf}.iphone-phone .head-icon{color:#1676cf}.iphone-phone .fiction-tag{bottom:65px}footer{text-align:center;color:#7a878d;font-size:12px;padding:18px 20px 30px}@media(max-width:900px){.top{align-items:flex-start;flex-direction:column}.layout{grid-template-columns:1fr;max-width:720px}.preview-col{order:0}.editor{order:1}.phone-wrap{min-height:650px}}@media(max-width:480px){.layout{padding:0 10px;margin:16px auto}.editor{padding:12px}.phone-wrap{padding:12px;min-height:580px}.phone{height:570px;width:100%;max-width:375px}.form-grid{grid-template-columns:1fr 1fr;gap:8px}.top{padding:20px 16px}.person-card{grid-template-columns:1fr 1fr}.person-card .remove-person{grid-column:1/-1}.preview-tools .btn{flex:1}.section-head{align-items:flex-start}}