:root{color-scheme:dark;--bg: #0f172a;--surface: #1e293b;--border: #334155;--text: #f8fafc;--muted: #94a3b8;--accent: #38bdf8;--accent-hover: #7dd3fc;--danger: #f87171;--success: #4ade80;--radius: 12px;--touch: 48px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{max-width:480px;margin:0 auto;padding:1rem 1rem 2rem;display:flex;flex-direction:column;gap:1rem;min-height:100dvh}header h1{margin:0;font-size:1.5rem;font-weight:700}header p{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}.status-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.85rem}.badge{display:inline-flex;align-items:center;padding:.25rem .6rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted)}.badge.online{color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,var(--border))}.badge.offline{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}.badge.pending{color:var(--accent)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.btn{min-height:var(--touch);padding:.75rem 1rem;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;touch-action:manipulation;transition:background .15s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#0f172a}.btn-primary:not(:disabled):hover,.btn-primary:not(:disabled):focus-visible{background:var(--accent-hover)}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:not(:disabled):hover,.btn-secondary:not(:disabled):focus-visible{border-color:var(--accent)}.btn-send{width:100%;font-size:1.1rem}.preview-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:none;flex-direction:column;gap:.75rem}.preview-card.visible{display:flex}.preview-card img{width:100%;max-height:50dvh;object-fit:contain;border-radius:8px;background:#000}.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}.field input,.field textarea{width:100%;padding:.65rem .75rem;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:1rem}.field textarea{resize:vertical;min-height:4rem}.message{padding:.75rem 1rem;border-radius:var(--radius);font-size:.95rem;display:none}.message.visible{display:block}.message.error{background:color-mix(in srgb,var(--danger) 15%,var(--surface));border:1px solid var(--danger);color:#fecaca}.message.success{background:color-mix(in srgb,var(--success) 15%,var(--surface));border:1px solid var(--success);color:#bbf7d0}.message.info{background:var(--surface);border:1px solid var(--border);color:var(--muted)}.settings{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}.settings summary{cursor:pointer;font-weight:600;min-height:var(--touch);display:flex;align-items:center}.settings[open] summary{margin-bottom:.75rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}