:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:#dbeafe;
  --primary-tint:#eff6ff;
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --ink:#07133d;
  --text:#111827;
  --muted:#64748b;
  --soft:#94a3b8;
  --line:rgba(148,163,184,.16);
  --green:#059669;
  --teal:#0f9f8f;
  --amber:#d97706;
  --purple:#7c3aed;
  --font-body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Manrope","Inter",system-ui,sans-serif;
  --shadow-card:0 12px 30px rgba(15,23,42,.052),0 2px 8px rgba(15,23,42,.02);
  --shadow-soft:0 8px 22px rgba(15,23,42,.04);
  --shadow-blue:0 16px 34px rgba(37,99,235,.16);
}
*{box-sizing:border-box}
html{min-height:100%;background:#eef3fb}
body{min-height:100vh;margin:0;color:var(--text);font-family:var(--font-body);background:radial-gradient(circle at 8% 8%,rgba(151,137,236,.13),transparent 31%),radial-gradient(circle at 92% 86%,rgba(125,211,252,.11),transparent 30%),linear-gradient(135deg,#f4f2ff 0%,#fbfdff 48%,#eef7ff 100%)}
a,button,input,textarea{font:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{border:0;cursor:pointer;background:none}
input,textarea{border:0;background:transparent;outline:none;color:var(--ink)}
.preview-stage{display:grid;place-items:center;min-height:100vh;padding:9px 0}
.app-shell{position:relative;isolation:isolate;width:min(390px,calc(100vw - 18px));height:min(826px,calc(100vh - 18px));min-height:760px;overflow:hidden;padding:24px 20px 18px;border:1px solid rgba(255,255,255,.94);border-radius:38px;background:rgba(255,255,255,.91);box-shadow:0 30px 88px rgba(31,54,110,.12),inset 0 0 0 1px rgba(255,255,255,.72)}
.ambient-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 54% 2%,rgba(255,255,255,.98),transparent 30%),radial-gradient(circle at 0% 62%,rgba(96,165,250,.045),transparent 35%),radial-gradient(circle at 100% 82%,rgba(45,212,191,.052),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.95),rgba(252,254,255,.98))}
.content-scroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:0 0 96px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.content-scroll::-webkit-scrollbar{display:none}
.top-bar{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:11px;padding-top:2px}
.icon-button{display:grid;place-items:center;width:46px;height:46px;border-radius:19px;color:var(--primary);background:rgba(255,255,255,.94);border:1px solid rgba(37,99,235,.1);box-shadow:var(--shadow-soft)}
.icon-button.subtle{color:#64748b}
.icon-button svg,.intro-icon svg,.field-shell svg,.select-shell svg,.row-icon svg,.mode-chip svg,.search-card svg,.quick-icon svg,.group-icon svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.top-copy{min-width:0}
.top-copy span{display:block;color:#7d8799;font-size:11px;line-height:1;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.top-copy strong{display:block;margin-top:4px;color:var(--ink);font-family:var(--font-display);font-size:25px;line-height:1.02;font-weight:650;letter-spacing:-.042em}
.intro-card{display:flex;gap:14px;margin-top:20px;padding:16px;border-radius:24px;border:1px solid rgba(37,99,235,.12);background:#fff;box-shadow:var(--shadow-card)}
.intro-icon{display:grid;place-items:center;flex:0 0 auto;width:52px;height:52px;border-radius:18px;color:var(--primary);background:#edf5ff}
.intro-card h1{margin:0;color:var(--ink);font-family:var(--font-display);font-size:24px;line-height:1.08;font-weight:650;letter-spacing:-.04em}
.intro-card p{margin:8px 0 0;color:#64748b;font-size:13.5px;line-height:1.45}
.form-card,.message-card{margin-top:14px;padding:16px;border-radius:24px;border:1px solid rgba(148,163,184,.14);background:#fff;box-shadow:var(--shadow-card)}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.section-heading h2{margin:0;color:var(--ink);font-family:var(--font-display);font-size:18px;line-height:1.1;font-weight:650;letter-spacing:-.03em}
.section-heading span,.section-heading button,.section-heading a{color:var(--primary);font-size:12.5px;font-weight:650}
.field-block{display:grid;gap:8px;margin-top:13px}
.field-block:first-of-type{margin-top:0}
.field-block>span{color:#66758f;font-size:12.5px;font-weight:650;letter-spacing:-.01em}
.field-shell,.select-shell{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:1px solid rgba(148,163,184,.17);border-radius:18px;background:#f8fafc}
.field-shell svg{color:var(--primary)}
.field-shell input{width:100%;font-size:15px;font-weight:600}
.select-shell{justify-content:space-between}
.select-shell strong{font-size:15px;font-weight:600;color:#0f172a}
.select-shell svg{color:#94a3b8}
.site-list,.people-list{display:grid;gap:10px}
.select-row,.person-row,.group-row{position:relative;display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 12px;border-radius:20px;border:1px solid rgba(148,163,184,.12);background:#fdfefe}
.select-row.checked,.person-row.checked{border-color:rgba(37,99,235,.15);background:#f7fbff}
.select-row input,.person-row input{position:absolute;opacity:0;pointer-events:none}
.row-icon,.group-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:15px}
.row-icon.blue{color:#2563eb;background:#edf5ff}
.row-icon.teal,.group-icon{color:#0f9f8f;background:#e9fbf7}
.row-copy{display:grid;gap:4px;min-width:0;flex:1}
.row-copy strong{color:#0f172a;font-size:14.5px;line-height:1.1;font-weight:650;letter-spacing:-.02em}
.row-copy small{color:#748098;font-size:12.5px;line-height:1.2}
.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;color:#fff;font-weight:700;font-size:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.avatar.sarah,.avatar.kevin{background:linear-gradient(180deg,#60a5fa,#2563eb)}
.avatar.alex,.avatar.priya{background:linear-gradient(180deg,#5eead4,#0f9f8f)}
.avatar.mia{background:linear-gradient(180deg,#c084fc,#7c3aed)}
.chip-grid,.selected-row{display:flex;flex-wrap:wrap;gap:8px}
.member-chip,.recipient-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;color:#1e40af;background:#eff6ff;border:1px solid rgba(37,99,235,.12);font-size:12.5px;font-weight:650}
.member-chip.muted{color:#64748b;background:#f1f5f9;border-color:rgba(148,163,184,.14)}
textarea{display:block;width:100%;min-height:96px;resize:none;padding:14px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:#f8fafc;color:#334155;font-size:14px;line-height:1.45}
.action-bar{position:absolute;left:20px;right:20px;bottom:16px;padding:10px;border-radius:26px;border:1px solid rgba(148,163,184,.1);background:rgba(255,255,255,.88);box-shadow:0 -10px 30px rgba(15,23,42,.052),inset 0 1px 0 rgba(255,255,255,.92);backdrop-filter:blur(18px)}
.primary-button,.secondary-button{display:flex;align-items:center;justify-content:center;width:100%;height:52px;border-radius:18px;font-size:15px;font-weight:700}
.primary-button{color:#fff;background:linear-gradient(180deg,#3b82f6,#2563eb);box-shadow:var(--shadow-blue)}
.secondary-button{color:#2563eb;background:#eff6ff}
@media(max-width:380px){.preview-stage{padding:0}.app-shell{width:100vw;height:100vh;min-height:760px;border-radius:0;padding:24px 18px 18px}.action-bar{left:16px;right:16px}}