:root { --ink:#18221e; --muted:#6c7770; --line:#dce2dc; --paper:#fbfcf8; --green:#245c47; --mint:#d8efdf; --lime:#bdde6f; --shadow:0 20px 55px rgba(28,46,37,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 12% 3%, #e8f2df 0, transparent 28%), linear-gradient(180deg,#f8faf5,#f3f6f0); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100vh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; padding:0 6vw 64px; }
header { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(36,92,71,.12); }
.brand { display:flex; align-items:center; gap:12px; font-family:ui-rounded,"Arial Rounded MT Bold",Inter,sans-serif; font-size:21px; }
.brand-mark { width:52px; height:52px; border-radius:16px; background:var(--green); position:relative; box-shadow:0 12px 25px rgba(36,92,71,.22); }
.brand-mark.small { width:37px; height:37px; border-radius:11px; box-shadow:none; }
.brand-mark span { position:absolute; width:23px; height:9px; border:3px solid #dff5bc; border-radius:10px; transform:rotate(-35deg); top:17px; left:9px; }
.brand-mark span+span { left:20px; top:26px; }
.brand-mark.small span { width:16px; height:7px; border-width:2px; left:7px; top:11px; }
.brand-mark.small span+span { left:14px; top:18px; }
.room-pill { background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--muted); font-size:13px; box-shadow:0 4px 14px rgba(28,46,37,.04); }
.room-pill b { color:var(--ink); letter-spacing:.07em; margin-left:5px; }
.online-dot,.row-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#62b46d; margin-right:7px; box-shadow:0 0 0 4px #e6f4e5; }
.device-menu { border:0; background:transparent; display:flex; align-items:center; gap:10px; text-align:left; color:var(--ink); }
.device-menu span:nth-child(2) { font-weight:600; display:flex; flex-direction:column; }
.device-menu small { color:var(--muted); font-weight:400; font-size:10px; }
.avatar { width:36px; height:36px; border-radius:50%; background:#d9e6d7; display:grid; place-items:center; font-weight:700; }
.hero-copy { text-align:center; max-width:720px; margin:64px auto 38px; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; color:#4f7868; }
.hero-copy h1,.onboarding-card h1 { font:800 clamp(36px,5vw,61px)/1.05 ui-rounded,"Arial Rounded MT Bold",Inter,sans-serif; letter-spacing:-.045em; margin:10px 0 14px; }
.hero-copy>p:last-child,.lead { color:var(--muted); font-size:17px; }
.workspace { max-width:1140px; margin:auto; display:grid; grid-template-columns:minmax(0,1.42fr) minmax(300px,.8fr); gap:22px; align-items:start; }
.drop-card,.receiver-card,.share-card { background:rgba(255,255,255,.88); border:1px solid #e0e5df; border-radius:22px; box-shadow:var(--shadow); }
.drop-card { padding:30px; }
label { display:block; font-weight:650; font-size:14px; margin-bottom:9px; }
.url-field { height:58px; display:flex; align-items:center; border:1.5px solid #cfd8d0; border-radius:13px; background:#fff; padding:0 8px 0 17px; transition:.2s; }
.url-field:focus-within { border-color:var(--green); box-shadow:0 0 0 4px rgba(36,92,71,.08); }
.url-field>span { font-size:20px; color:#5d796a; }
.url-field input { flex:1; border:0; outline:0; padding:0 12px; min-width:0; color:var(--ink); }
.url-field button,.text-button,.share-card button { border:0; color:var(--green); background:#eef4ec; border-radius:9px; padding:9px 12px; font-size:12px; font-weight:700; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin:29px 0 13px; }
h2,h3 { font-family:ui-rounded,"Arial Rounded MT Bold",Inter,sans-serif; }
.section-heading h2 { margin:0; font-size:17px; }.section-heading p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.text-button { background:transparent; padding:6px; }
.device-list { border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.device-row { margin:0; min-height:62px; display:flex; align-items:center; gap:12px; padding:10px 14px; background:#fff; border-bottom:1px solid #e5e9e4; position:relative; cursor:pointer; }
.device-row:last-child { border-bottom:0; }.device-row.current { background:#f4f7f1; cursor:default; }.device-row>span:nth-last-of-type(2) { flex:1; display:flex; flex-direction:column; }
.device-row b { font-size:14px; }.device-row small { color:var(--muted); font-size:11px; margin-top:2px; }.device-row em { color:#3e7d56; font-size:11px; font-style:normal; font-weight:700; }
.device-row input { position:absolute; opacity:0; }.custom-check { width:20px; height:20px; border:1.5px solid #b9c3ba; border-radius:6px; display:grid!important; place-items:center; color:transparent; font-size:12px; }
.device-row input:checked+.custom-check { color:#fff; background:var(--green); border-color:var(--green); }.device-icon { width:35px; height:35px; border-radius:9px; background:#edf1eb; display:grid!important; place-items:center; color:#587063; }
.row-dot { margin:0 2px 0 0; width:7px; height:7px; box-shadow:none; }
.row-dot.background { background:#d19b4a; }
.primary { border:0; color:#fff; background:var(--green); border-radius:12px; padding:15px 20px; font-weight:700; box-shadow:0 10px 24px rgba(36,92,71,.18); }
.primary:disabled { opacity:.45; cursor:not-allowed; }.primary.send { width:100%; margin-top:20px; display:flex; justify-content:center; gap:10px; }
aside { display:grid; gap:16px; }.receiver-card { padding:25px; }.receiver-card.active { border-color:#a6c9aa; background:#f7fcf5; }.receiver-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#e7f0e2; color:var(--green); font-size:23px; margin-bottom:18px; }
.receiver-card h2 { margin:0 0 8px; font-size:18px; }.receiver-card p,.share-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }.secondary { width:100%; margin-top:22px; padding:12px; border:1px solid #b9c8bc; border-radius:11px; background:#fff; color:var(--green); font-weight:700; }
.share-card { padding:20px; display:grid; grid-template-columns:auto 1fr; gap:7px 13px; }.share-card>span { grid-row:1/3; width:36px; height:36px; border-radius:10px; background:#f0f3eb; display:grid; place-items:center; }.share-card h3 { margin:0 0 4px; font-size:14px; }.share-card button { grid-column:2; justify-self:start; margin-top:7px; }
.hint { color:#79827d; font-size:11px; line-height:1.55; padding:0 8px; }.toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); background:#173f31; color:#fff; padding:13px 20px; border-radius:12px; box-shadow:var(--shadow); font-size:13px; }
.onboarding-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }.onboarding-card { width:min(100%,480px); background:rgba(255,255,255,.9); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:28px; padding:44px; text-align:center; }.onboarding-card .brand-mark { margin:0 auto 26px; }.onboarding-card h1 { font-size:39px; }.onboarding-card form { text-align:left; margin-top:30px; }.onboarding-card input { width:100%; border:1.5px solid #cad4cb; border-radius:12px; padding:15px; outline:0; }.onboarding-card input:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(36,92,71,.08); }.full { width:100%; margin-top:13px; }.privacy-note { color:#758078; font-size:11px; margin:20px 0 0!important; }.privacy-note span { color:#66a66b; font-size:8px; margin-right:5px; }
@media (max-width:820px) { .app-shell{padding:0 18px 40px}.room-pill{display:none}.hero-copy{margin:42px auto 28px}.workspace{grid-template-columns:1fr}.drop-card{padding:20px}header{height:72px}.device-menu span:nth-child(2){display:none} }
@media (max-width:480px) { .hero-copy h1{font-size:37px}.hero-copy>p:last-child{font-size:15px}.section-heading{align-items:center}.text-button{max-width:100px}.onboarding-card{padding:30px 22px}.url-field button{display:none} }
.empty-state { padding:24px 18px; display:flex; flex-direction:column; gap:4px; text-align:center; background:#fff; color:var(--muted); }
.empty-state b { color:var(--ink); font-size:13px; }.empty-state span { font-size:11px; }
.online-dot.offline { background:#c68b61; box-shadow:0 0 0 4px #f4e9df; }
.incoming { position:fixed; z-index:20; right:24px; bottom:24px; width:min(420px,calc(100vw - 32px)); display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:16px; border-radius:15px; color:#fff; background:#173f31; box-shadow:0 20px 55px rgba(18,39,30,.25); }
.incoming div { min-width:0; display:flex; flex-direction:column; }.incoming b { font-size:13px; }.incoming span { opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; margin-top:3px; }.incoming a { color:#173f31; background:#dff5bc; border-radius:9px; padding:9px 12px; text-decoration:none; font-weight:700; font-size:12px; }.incoming button { border:0; background:transparent; color:#fff; font-size:20px; padding:5px; }.toast.error { background:#783b35; }
@media (max-width:480px) { .incoming { right:16px; bottom:16px; grid-template-columns:1fr auto; }.incoming button { display:none; } }
.install-card { display:grid; grid-template-columns:auto 1fr; gap:7px 13px; align-items:center; padding:18px 20px; border:1px solid #c9dbc5; border-radius:18px; background:#edf6e8; }
.install-card .install-icon { grid-row:1/3; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--green); color:#fff; font-size:24px; }
.install-card h3 { margin:0 0 4px; font-size:14px; }.install-card p { margin:0; color:#617067; font-size:12px; line-height:1.45; }.install-card button { grid-column:2; justify-self:start; border:0; border-radius:9px; padding:8px 12px; background:var(--green); color:#fff; font-size:12px; font-weight:700; }
@media (display-mode: standalone) { header { padding-top:2px; } .app-shell { min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } }