:root { --bg:#f3f4f6; --card:#fff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --primary:#1d4ed8;
  --green:#15803d; --green-bg:#dcfce7; --red:#b91c1c; --red-bg:#fee2e2; --amber-bg:#fef3c7; color-scheme:light; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1120; --card:#131c2e; --ink:#e5e7eb; --muted:#94a3b8;
  --line:#23304a; --primary:#3b82f6; --green:#4ade80; --green-bg:#0f2e1d; --red:#f87171; --red-bg:#3b1414;
  --amber-bg:#3a2a10; color-scheme:dark; } }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); }
body { font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
[hidden] { display:none !important; }
h1 { font-size:1.6rem; margin:.2em 0; } h2 { font-size:1.15rem; margin:0 0 .6em; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.card { background:var(--card); border-radius:16px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.06); margin-bottom:16px; }
.narrow { width:100%; max-width:420px; text-align:left; }
.logo { width:56px; height:56px; border-radius:14px; background:#0f172a; color:#38bdf8; font:700 30px/56px sans-serif; text-align:center; }
label { display:block; font-weight:600; margin:12px 0 0; }
input,textarea { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px; width:100%; margin-top:6px; }
fieldset { border:0; padding:0; margin:14px 0 0; } legend { font-weight:600; }
.modpick label { display:flex; gap:10px; align-items:flex-start; font-weight:400; margin:8px 0; }
.modpick input { width:auto; margin-top:3px; }
.btn { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:10px 16px; cursor:pointer; }
.btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn.big { width:100%; padding:14px; margin-top:16px; font-weight:600; }
.seg { display:flex; gap:4px; background:var(--bg); border-radius:12px; padding:4px; margin:16px 0 4px; }
.seg button { flex:1; border:0; background:transparent; font:inherit; font-size:.9rem; padding:9px 4px; border-radius:9px; color:var(--muted); }
.seg button.on { background:var(--card); color:var(--ink); font-weight:600; }
.msg { min-height:1.2em; margin:12px 0 0; } .msg.err { color:var(--red); } .msg.ok { color:var(--green); }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.wrap { max-width:900px; margin:0 auto; padding:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:16px; }
.mod { background:var(--card); border-radius:14px; padding:16px; border:1px solid var(--line); }
.mod.off { opacity:.6; } .tag { display:inline-block; font-size:.78rem; padding:2px 8px; border-radius:99px; margin-top:8px; }
.tag.on { background:var(--green-bg); color:var(--green); } .tag.off { background:var(--amber-bg); }
.chat { max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.bubble { background:var(--bg); border-radius:12px; padding:8px 12px; } .bubble b { font-size:.85rem; }
.bubble img { display:block; max-width:min(100%,420px); max-height:420px; border-radius:10px; margin-top:8px; }
.bubble audio { display:block; width:min(100%,420px); margin-top:8px; }
.chat-compose textarea { margin:0 0 8px; }
.chat-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chat-actions label { margin:0; font-weight:400; }
.chat-attachment { display:grid; gap:8px; justify-items:start; padding:10px; margin-top:8px; border:1px solid var(--line); border-radius:12px; }
.chat-attachment img { max-width:min(100%,320px); max-height:240px; border-radius:10px; }
.chat-attachment audio { width:min(100%,420px); }
#chatSend { margin-top:8px; }
.row { display:flex; gap:8px; } .row input { margin:0; }
ul.plain { list-style:none; padding:0; margin:0 0 8px; } ul.plain li { padding:6px 0; border-bottom:1px solid var(--line); }
.company .head { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.status { font-size:.8rem; padding:3px 10px; border-radius:99px; background:var(--amber-bg); }
.status.active { background:var(--green-bg); color:var(--green); } .status.suspended,.status.rejected { background:var(--red-bg); color:var(--red); }
.toggles { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.toggle { border-radius:99px; padding:8px 14px; border:1px solid var(--line); background:var(--card); font:inherit; font-size:.9rem; color:var(--ink); }
.toggle.on { background:var(--green-bg); color:var(--green); border-color:transparent; font-weight:600; }
.toggle.wanted { outline:2px dashed var(--primary); outline-offset:1px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.tabs { display:flex; gap:4px; overflow-x:auto; padding:8px 12px; background:var(--card); border-bottom:1px solid var(--line); }
.tabs button { border:0; background:transparent; font:inherit; padding:8px 14px; border-radius:10px; color:var(--muted); white-space:nowrap; display:flex; gap:6px; align-items:center; }
.tabs button.on { background:var(--bg); color:var(--ink); font-weight:600; }
.tabs button i { font-style:normal; }
.error { color:var(--red); min-height:1.2em; }
.badge { background:var(--red); color:#fff; border-radius:99px; font-size:.7rem; padding:0 6px; }
#toasts { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); display:grid; gap:8px; z-index:50; width:min(92vw,420px); }
.toast { background:#111827; color:#fff; padding:12px 16px; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.toast.err { background:var(--red); }
select { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; width:100%; }
.dl { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.dl ol { padding-left:20px; margin:10px 0; } .dl li { margin:4px 0; }
.dl.other { opacity:.75; }
a.btn { display:inline-block; text-align:center; text-decoration:none; }
.center-text { text-align:center; margin-top:18px; } .teamlink { color:var(--muted); }
.setup { border:2px solid var(--primary); }
.setup li { display:flex; justify-content:space-between; }
.ios-steps { counter-reset:s; list-style:none; padding:0; }
.ios-steps li { counter-increment:s; display:flex; gap:12px; align-items:center; margin:12px 0; }
.ios-steps li::before { content:counter(s); flex:none; width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.share-ico { display:inline-block; width:22px; height:22px; vertical-align:-5px; }
.hint-arrow { position:fixed; left:50%; bottom:calc(8px + env(safe-area-inset-bottom)); transform:translateX(-50%); font-size:40px; animation:bob 1s infinite alternate; z-index:60; }
@keyframes bob { from { transform:translate(-50%,0); } to { transform:translate(-50%,-10px); } }