/* FairSplit PWA — mobile-first styles. One screen, centered on wide displays. */
:root{
  --green:#0D3B2E; --green2:#1A5C45; --teal:#00C896; --teal-d:#009E78;
  --gold:#FFB300; --bg:#f6f8f7; --card:#ffffff; --ink:#16201c;
  --muted:#6b7b74; --line:#e6ece9; --danger:#d9534f; --radius:14px;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-tap-highlight-color:transparent;
}
#app{max-width:480px;margin:0 auto;min-height:100%;background:var(--bg);
  display:flex;flex-direction:column;}
.screen{flex:1;display:flex;flex-direction:column;padding:18px 16px 90px;}
.center{align-items:center;justify-content:center}
a{color:var(--teal-d);text-decoration:none}

/* Header */
.appbar{display:flex;align-items:center;gap:12px;padding:16px;
  background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;}
.appbar h1{font-size:18px;margin:0;font-weight:800;flex:1}
.appbar .sub{font-size:11px;opacity:.7;margin-top:2px}
.avatar{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}

/* Cards & lists */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:12px}
.tap{cursor:pointer;transition:transform .05s} .tap:active{transform:scale(.99)}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muted{color:var(--muted)} .sm{font-size:12px} .xs{font-size:11px}
.b{font-weight:700} .center-text{text-align:center}
.emoji-badge{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:24px;background:rgba(0,200,150,.12)}

/* Buttons & inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:12px;padding:13px 16px;font-size:15px;font-weight:700;
  background:var(--teal);color:#fff;cursor:pointer;width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.gold{background:var(--gold)}
.btn.sm{width:auto;padding:9px 14px;font-size:13px}
.input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:15px;background:#fff;margin-top:6px}
.label{font-size:12px;font-weight:700;color:var(--muted);margin-top:14px;display:block}
.field-err{color:var(--danger);font-size:12px;margin-top:6px;min-height:14px}

/* Brand block (login) */
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.brand .logo{width:84px;height:84px;border-radius:24px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--teal),var(--teal-d));
  color:#fff;font-size:40px}
.brand h2{margin:8px 0 0;font-size:26px;font-weight:800}
.tabs{display:flex;background:#eef2f0;border-radius:12px;padding:4px;margin:14px 0}
.tabs button{flex:1;border:none;background:transparent;padding:10px;border-radius:9px;
  font-weight:700;color:var(--muted);cursor:pointer}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* FAB */
.fab{position:fixed;left:50%;transform:translateX(calc(240px - 100% - 8px));bottom:22px;
  width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;border:none;
  font-size:28px;box-shadow:0 6px 16px rgba(0,158,120,.4);cursor:pointer;z-index:20}
@media(max-width:480px){.fab{left:auto;right:18px;transform:none}}

/* Pills / chips */
.pill{display:inline-block;padding:3px 9px;border-radius:8px;font-size:10px;font-weight:800;letter-spacing:.4px}
.pill.locked{background:#fde8e8;color:#b13}
.pill.free{background:#eef2f0;color:var(--muted)}

/* Modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;
  justify-content:center;z-index:30}
.sheet{background:#fff;width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:20px;
  max-height:88vh;overflow:auto}
.sheet h3{margin:0 0 4px}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;padding:40px 24px;color:var(--muted)}
.empty .circle{width:96px;height:96px;border-radius:50%;background:rgba(0,200,150,.12);
  display:flex;align-items:center;justify-content:center;font-size:42px}

/* Spinner */
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--teal);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#222;color:#fff;
  padding:10px 16px;border-radius:10px;font-size:14px;z-index:50;max-width:90%;text-align:center}