:root{
  /* FLO brand — cash flow green/teal */
  --or:#0FB57A;          /* primary accent (FLO green) */
  --orl:#13D08C;         /* lighter accent for hover */
  --or-deep:#0A8E5F;     /* deep accent for press */
  --obg:#EAFBF3;         /* tint bg */
  --odim:#D4F5E5;        /* dim tint */

  --wh:#fff;
  --bg:#F4F7F5;          /* page bg, faint green-grey */
  --bd:#E6ECEA;          /* hairline border */
  --bd2:#D2DAD7;         /* stronger border */

  --t1:#0E1F1A;          /* near-black with green undertone */
  --t2:#4B5C57;          /* secondary text */
  --t3:#8A9A95;          /* tertiary text */

  --gr:#0FB57A;--grb:#E5FBF1;
  --rd:#E5484D;--rdb:#FDECEC;
  --bl:#3B82F6;--blb:#EBF3FF;
  --yw:#F5A524;--ywb:#FFF6E4;

  /* brand gradient (used sparingly) */
  --grad:linear-gradient(135deg,#0FB57A 0%,#13D08C 50%,#23E6A1 100%);

  --mono:'DM Mono',monospace;
  --bb:'Bebas Neue',sans-serif;
  --dm:'DM Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--dm);background:var(--bg);color:var(--t1);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select{font-family:var(--dm)}
button{cursor:pointer}
.hidden{display:none!important}

/* ---------- Login ---------- */
.login{position:fixed;inset:0;background:radial-gradient(1200px 600px at 80% -10%,#D4F5E5 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#EAFBF3 0%,transparent 55%),linear-gradient(135deg,#ffffff 0%,#F4FBF7 100%);display:flex;align-items:center;justify-content:center;z-index:50}
.login-box{width:380px;max-width:92vw}

/* FLO logo: bold + tight tracking + flow-mark */
.login-logo{
  font-family:var(--bb);
  font-size:78px;
  letter-spacing:6px;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-align:center;line-height:1;
  position:relative;display:inline-block;width:100%;
  font-weight:400;
}
.login-logo::after{
  /* subtle "flow" underline mark */
  content:"";display:block;width:54px;height:4px;border-radius:999px;
  background:var(--grad);
  margin:14px auto 0;
  opacity:.85;
}
.login-tagline{
  text-align:center;
  font-family:var(--dm);
  font-size:15px;
  font-weight:700;
  font-style:italic;
  color:var(--t2);
  margin:18px 0 6px;
  letter-spacing:.3px;
}
.login-tagline::before,
.login-tagline::after{
  content:"";display:inline-block;
  width:18px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--or));
  vertical-align:middle;margin:0 10px 4px;
}
.login-tagline::after{
  background:linear-gradient(90deg,var(--or),transparent);
}
.login-sub{text-align:center;color:var(--t3);font-size:11px;letter-spacing:4px;text-transform:uppercase;margin:8px 0 26px;font-weight:800}

/* ---------- Cards ---------- */
.card{background:var(--wh);border:1px solid var(--bd);border-radius:18px;padding:18px;box-shadow:0 1px 2px rgba(14,31,26,.03)}
.login-card{padding:26px;border-radius:22px;box-shadow:0 24px 60px rgba(15,181,122,.10),0 2px 8px rgba(14,31,26,.04);border:1px solid #E0EFE8}
.grid{display:grid;gap:12px}

/* ---------- Inputs ---------- */
.input{
  border:1.5px solid var(--bd);background:#fff;border-radius:12px;
  padding:12px 14px;outline:none;width:100%;font-size:14px;font-weight:600;
  color:var(--t1);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{color:var(--t3);font-weight:500}
.input:focus{border-color:var(--or);box-shadow:0 0 0 4px rgba(15,181,122,.12)}

/* ---------- Buttons ---------- */
.btn{
  border:0;border-radius:12px;padding:11px 16px;font-size:13px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  letter-spacing:.2px;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--grad);color:#fff;
  box-shadow:0 6px 14px rgba(15,181,122,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{filter:brightness(1.04)}
.btn-secondary{background:var(--wh);color:var(--t2);border:1.5px solid var(--bd)}
.btn-secondary:hover{border-color:var(--or);color:var(--or);background:#F6FCF9}
.btn-danger{background:var(--rdb);color:var(--rd)}
.btn-danger:hover{background:#FBDADA}
.btn-dark{background:#0E1F1A;color:#fff}
.btn-dark:hover{background:#142B25}

/* ---------- Topbar ---------- */
.topbar{
  height:60px;background:#fff;border-bottom:1px solid var(--bd);
  display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0;
  box-shadow:0 1px 0 rgba(14,31,26,.02);
}

/* FLO logo in topbar */
.logo{
  font-family:var(--bb);
  font-size:30px;letter-spacing:3px;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:400;line-height:1;
  position:relative;
  padding-right:10px;
}
.logo::after{
  content:"";position:absolute;right:0;bottom:5px;
  width:6px;height:6px;border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 0 3px rgba(15,181,122,.15);
}

.sep{width:1px;height:28px;background:var(--bd)}
.title{font-size:15px;font-weight:900;flex:1;color:var(--t1);letter-spacing:.2px}

.user-pill{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;background:var(--bg);
  border:1px solid var(--bd);border-radius:999px;
  font-size:13px;font-weight:800;color:var(--t2);
}
.avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--bb);font-size:15px;letter-spacing:1px;
  box-shadow:0 4px 10px rgba(15,181,122,.30);
}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.b-new{background:var(--odim);color:var(--or-deep)}
.b-held{background:var(--ywb);color:var(--yw)}
.b-bumped{background:var(--grb);color:var(--gr)}
.b-paid{background:var(--grb);color:var(--gr)}

.money{font-family:var(--mono);font-weight:900;color:var(--or-deep)}

/* ---------- Empty state ---------- */
.empty{
  min-height:120px;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--t3);
  border:1.5px dashed var(--bd2);border-radius:16px;
  background:var(--wh);font-weight:800;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);
  background:#0E1F1A;color:#fff;border-radius:999px;padding:12px 22px;
  font-size:13px;font-weight:900;z-index:1000;transition:.22s;
  box-shadow:0 14px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  letter-spacing:.2px;
}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ---------- Page + Headings ---------- */
.page{padding:22px;overflow:auto;height:calc(100vh - 60px)}
.h1{font-family:var(--bb);font-size:38px;letter-spacing:2px;line-height:1;color:var(--t1)}
.sub{font-size:13px;color:var(--t3);font-weight:700;margin-top:4px}

/* ---------- Tables ---------- */
.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--bd);background:white;box-shadow:0 1px 2px rgba(14,31,26,.03)}
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--t3);background:#FAFCFB;padding:13px;font-weight:900;
  border-bottom:1px solid var(--bd);
}
td{padding:13px;border-top:1px solid var(--bd);font-size:13px;vertical-align:middle;color:var(--t1)}
tr:hover td{background:#FAFCFB}

@media(max-width:850px){
  body{overflow:auto}
  .page{height:auto}
  .topbar{position:sticky;top:0;z-index:20}
  .user-pill{display:none}
}

/* ---------- Scrollbars (FLO green) ---------- */
html, body, .page, .table-wrap, .modal-box, .receipt-paper{
  scrollbar-width:auto;
  scrollbar-color: var(--or) #E5EAE7;
}
.page, .table-wrap, .modal-box{
  scrollbar-gutter: stable both-edges;
}
*::-webkit-scrollbar{
  width:14px;
  height:14px;
}
*::-webkit-scrollbar-track{
  background:#E5EAE7;
  border-radius:999px;
  border:3px solid #F4F7F5;
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--or),var(--orl));
  border-radius:999px;
  border:3px solid #F4F7F5;
  min-height:48px;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--or-deep),var(--or));
}
*::-webkit-scrollbar-corner{
  background:#F4F7F5;
}