:root{--p:#0f766e;--pd:#115e59;--bg:#f3f6f6;--card:#fff;--tx:#14201f;--mu:#5f6f6e;--bd:#d9e2e1;--bad:#b42318;--good:#067647;--warn:#b54708}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;background:var(--p);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.top h1{margin:0;font-size:19px;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon{background:none;border:0;color:#fff;font-size:24px;padding:4px 8px;min-width:44px;min-height:40px}
main{padding:12px 12px calc(84px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto}
.pad{padding:20px}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom);z-index:6}
.tabs a{flex:1;text-align:center;text-decoration:none;color:var(--mu);font-size:11px;padding:7px 0 6px;min-height:56px}
.tabs a i{display:block;font-style:normal;font-size:21px;line-height:26px}
.tabs a.on{color:var(--p);font-weight:600}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px;margin-bottom:12px}
.card h2{margin:0 0 8px;font-size:16px}
.row{display:flex;gap:10px;align-items:center}.row>*{min-width:0}.grow{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{text-align:center}.stat b{display:block;font-size:26px;color:var(--p)}.stat span{font-size:13px;color:var(--mu)}
label{display:block;font-size:13px;color:var(--mu);margin:10px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--tx);min-height:46px}
textarea{min-height:70px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--p);border-color:var(--p)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--p);background:#fff;color:var(--p);font:inherit;font-weight:600;border-radius:12px;padding:12px 16px;min-height:48px;text-decoration:none}
.btn.pri{background:var(--p);color:#fff}.btn.bad{border-color:var(--bad);color:var(--bad)}.btn.full{width:100%}.btn.sm{min-height:38px;padding:6px 12px;font-size:14px}
.btn:disabled{opacity:.5}
.item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px;margin-bottom:8px;text-decoration:none;color:inherit}
.item .t{font-weight:600}.item .s{font-size:13px;color:var(--mu)}
.chev{color:var(--mu);font-size:20px}
.muted{color:var(--mu)}.small{font-size:13px}.hidden{display:none!important}
.msg{border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}
.msg.bad{background:#fef3f2;color:var(--bad)}.msg.good{background:#ecfdf3;color:var(--good)}.msg.warn{background:#fffaeb;color:var(--warn)}.msg.info{background:#eff8ff;color:#175cd3}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:#e6f4f1;color:var(--pd)}
.badge.opt{background:#eef2ff;color:#3538cd}
.chk{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--bd);margin:0;color:var(--tx);font-size:16px}
.chk input{width:22px;height:22px;min-height:0;flex:none}
.fab{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));background:var(--p);color:#fff;border:0;border-radius:99px;padding:14px 20px;font:600 16px system-ui;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:4}
.mark{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--bd)}
.mark .nm{flex:1;min-width:0}.mark .nm div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mark input{width:92px;text-align:center;font-size:19px;font-weight:600}
.mark input.bad{border-color:var(--bad);background:#fef3f2}.mark input.ok{border-color:var(--good)}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#14201f;color:#fff;padding:11px 18px;border-radius:99px;z-index:70;max-width:90%;font-size:14px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.modal>div{background:#fff;border-radius:18px 18px 0 0;padding:18px;width:100%;max-width:520px;max-height:85vh;overflow:auto;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.modal h3{margin:0 0 8px}.modal .row{margin-top:14px}
.lock{position:fixed;inset:0;background:var(--p);z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;padding:24px;text-align:center}
.lock input{max-width:220px;text-align:center;font-size:26px;letter-spacing:8px}
.seg{display:flex;gap:6px;flex-wrap:wrap}.seg button{flex:1;min-width:30%}
.seg .on{background:var(--p);color:#fff}
table.t{width:100%;border-collapse:collapse;font-size:14px}table.t td,table.t th{padding:8px 4px;border-bottom:1px solid var(--bd);text-align:left}

#bell{position:relative}#bn{position:absolute;top:2px;right:2px;background:#f04438;color:#fff;border-radius:99px;font-size:11px;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 4px}
.av{width:42px;height:56px;border-radius:8px;object-fit:cover;background:#e6f4f1;flex:none;display:flex;align-items:center;justify-content:center;color:var(--pd);font-weight:700}
.ph{width:120px;height:160px;border-radius:12px;object-fit:cover;background:#e6f4f1;display:flex;align-items:center;justify-content:center;color:var(--mu);font-size:13px;flex:none}
.strip{background:#fef3f2;color:var(--bad);padding:8px 14px;font-size:14px;text-align:center}.strip.ok{background:#ecfdf3;color:var(--good)}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:15px}.kv div:nth-child(odd){color:var(--mu)}
.n{border-left:4px solid var(--p)}.n.unread{background:#f0fdfa}.n.lock{border-left-color:var(--bad)}.n.unlock{border-left-color:var(--good)}
.lg{font-size:13px;padding:8px 0;border-bottom:1px solid var(--bd)}

.sync-ok{color:#a7f3d0}.sync-run{color:#fde68a;animation:sp 1s linear infinite}.sync-off{color:#d1d5db;opacity:.7}.sync-err{color:#fecaca}.sync-idle{color:#fff}
@keyframes sp{50%{opacity:.4}}


/* ===== Mobile-first enhancements (v5) ===== */
/* Larger tap targets on phones */
.btn { min-height: 52px; font-size: 16px; border-radius: 14px; }
.btn.sm { min-height: 40px; font-size: 14px; }
input, select, textarea { font-size: 16px; min-height: 50px; border-radius: 12px; }
textarea { min-height: 80px; }

/* Sticky bottom action button */
.sticky-btn { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 3; padding: 8px 12px; background: var(--bg); }

/* Pull-to-refresh indicator */
.ptr { text-align: center; padding: 10px; color: var(--mu); font-size: 13px; display: none; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1a1a; --card: #1a2626; --tx: #e0eaea; --mu: #7fa8a8; --bd: #2a3a3a; }
  input, select, textarea { background: #1a2626; color: var(--tx); border-color: var(--bd); }
  .lock { background: #0a5450; }
}

/* Safe area padding for notch phones */
.top { padding-top: max(10px, env(safe-area-inset-top)); }
.tabs { padding-bottom: max(6px, env(safe-area-inset-bottom)); }

/* Swipeable cards (visual hint) */
.swipe-hint::after { content: '← swipe'; font-size: 11px; color: var(--mu); margin-left: 8px; }

/* Timetable grid mobile fix */
.tt-cell { background: #e6f4f1; cursor: pointer; padding: 4px; font-size: 11px; border-radius: 4px; }
.tt-empty { color: var(--mu); font-size: 12px; text-align: center; cursor: pointer; }

/* Security log */
.sec-badge { background: #fef3f2; color: var(--bad); font-size: 11px; padding: 2px 8px; border-radius: 99px; }

/* Fee balance colors */
.bad { color: var(--bad) !important; }
.good { color: var(--good) !important; }

/* Avatar initials better contrast */
.av { font-size: 15px; }

/* Wide screens: content max-width */
@media (min-width: 600px) {
  main { max-width: 640px; }
  .modal > div { border-radius: 18px; margin-bottom: 20px; }
}