:root {
  color-scheme: light;
  --green:#08752c;
  --green-dark:#00551f;
  --blue:#146daf;
  --red:#c62828;
  --ink:#081426;
  --muted:#647267;
  --line:#d7e5da;
  --soft:#eef8f0;
  --white:#fff;
  --shadow:0 14px 34px rgba(10,58,31,.13);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:linear-gradient(145deg,#e5f4e8,#f7fbff 58%,#dfeafa); color:var(--ink); }
body { min-height:100dvh; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.screen { min-height:100dvh; padding:24px 16px calc(32px + env(safe-area-inset-bottom)); }
.centered { display:grid; place-items:center; }
.panel,.card { background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); }
.panel { width:min(620px,100%); padding:24px; }
.hero-logo { display:block; width:108px; height:108px; margin:0 auto 8px; border-radius:25%; }
.auth-logo { display:block; width:76px; height:76px; margin:0 auto; border-radius:25%; }
h1,h2,h3 { line-height:1.18; }
h1 { color:var(--green-dark); }
.setup-panel>h1,.auth-panel>h1 { text-align:center; margin:.35rem 0; }
.muted { color:var(--muted); }
.small { font-size:.86rem; }
.install-hint { background:#fff7da; border-left:5px solid #e5a400; padding:14px; border-radius:12px; margin:20px 0; }
label { display:block; color:var(--green); font-weight:650; margin:14px 0; }
input,textarea,select {
  width:100%; margin-top:6px; border:2px solid #cddbd0; border-radius:15px;
  padding:13px 14px; background:#fff; color:var(--ink); outline:none;
}
input:focus,textarea:focus,select:focus { border-color:var(--blue); }
textarea { resize:vertical; }
button { border:0; border-radius:15px; padding:12px 16px; font-weight:750; }
.primary { color:#fff; background:linear-gradient(90deg,var(--green),var(--blue)); }
.secondary { color:var(--blue); background:#fff; border:2px solid var(--blue); }
.danger { color:#fff; background:var(--red); }
.full { width:100%; }
.link-button { background:transparent; color:var(--blue); padding:4px; }
details { margin:20px 0; }
summary { color:var(--blue); font-weight:750; }
.tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:18px 0; }
.tab { background:#edf3ef; color:var(--muted); }
.tab.active { background:var(--green); color:#fff; }
.app { min-height:100dvh; padding-bottom:calc(82px + env(safe-area-inset-bottom)); }
.app-header {
  position:sticky; top:0; z-index:4; display:flex; align-items:center; gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px; color:#fff;
  background:linear-gradient(100deg,var(--green-dark),var(--green)); box-shadow:0 3px 16px #0002;
}
.app-header img { width:52px; height:52px; border-radius:15px; }
.app-header h1 { margin:0; color:#fff; font-size:1.35rem; }
.app-header p { margin:2px 0 0; opacity:.85; font-size:.82rem; }
.icon-button { margin-left:auto; background:#ffffff24; color:#fff; width:44px; height:44px; font-size:1.5rem; }
.content { width:min(850px,100%); margin:auto; padding:16px; }
.card { padding:18px; margin:0 0 14px; }
.card h2,.card h3 { margin-top:0; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stack { display:grid; gap:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.item { border:1px solid var(--line); border-radius:17px; padding:14px; background:#fbfefb; }
.item.unread { border-color:var(--red); background:#fff1f1; }
.item-title { font-weight:800; font-size:1.06rem; }
.meta { color:var(--muted); font-size:.86rem; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.actions button { padding:9px 12px; }
.badge { display:inline-block; padding:3px 9px; border-radius:999px; background:#e5f4e8; color:var(--green); font-size:.8rem; font-weight:800; }
.badge.red { background:#ffe4e4; color:var(--red); }
.empty { text-align:center; color:var(--muted); padding:28px 10px; }
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:5; display:grid; grid-template-columns:repeat(6,1fr);
  padding:7px 4px calc(7px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line);
}
.bottom-nav button { display:grid; gap:2px; justify-items:center; padding:5px 2px; border-radius:13px; background:transparent; color:#66717a; font-size:.65rem; }
.bottom-nav button span { font-size:1.35rem; line-height:1; }
.bottom-nav button.active { background:#e7f5e9; color:var(--green); }
#toast {
  position:fixed; left:50%; bottom:calc(94px + env(safe-area-inset-bottom)); z-index:20;
  width:min(520px,calc(100% - 28px)); transform:translate(-50%,20px); padding:13px 16px;
  border-radius:14px; background:#172119; color:#fff; opacity:0; pointer-events:none; transition:.2s;
}
#toast.show { opacity:1; transform:translate(-50%,0); }
#toast.error { background:#8d1717; }
dialog { width:min(720px,calc(100% - 20px)); max-height:90dvh; border:0; border-radius:24px; padding:0; box-shadow:0 30px 80px #0007; }
dialog::backdrop { background:#001b0da8; }
.modal-shell { position:relative; padding:22px; overflow:auto; max-height:90dvh; }
.modal-close { position:sticky; float:right; top:0; z-index:2; width:42px; height:42px; padding:0; background:#edf2ee; font-size:1.6rem; }
.chat-list { display:grid; gap:10px; max-height:48dvh; overflow:auto; padding:6px 0; }
.bubble { max-width:88%; padding:10px 12px; border-radius:16px 16px 16px 4px; background:#edf3ef; }
.bubble.mine { margin-left:auto; border-radius:16px 16px 4px 16px; background:#dff2e3; }
.bubble p { margin:4px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.composer { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; margin-top:12px; }
.composer textarea { margin:0; min-height:48px; }
.composer .voice { grid-column:1/-1; background:#edf3ef; color:var(--green); }
.protected-image { width:100%; max-height:260px; object-fit:cover; border-radius:13px; background:#edf2ee; }
.avatar { width:54px; height:54px; border-radius:50%; object-fit:cover; background:#e7f5e9; display:grid; place-items:center; font-weight:900; color:var(--green); }
.person { display:flex; align-items:center; gap:12px; }
.warning { color:#9a5400; background:#fff5dc; padding:12px; border-radius:12px; }
@media (max-width:430px) {
  .panel { padding:20px 16px; }
  .content { padding:12px; }
  .bottom-nav button { font-size:.58rem; }
  .bottom-nav button span { font-size:1.18rem; }
}