:root { --pink:#EB4869; --ink:#111; --grey:#F5F5F5; --line:#e1e1e1; --muted:#5c5c5c; --black:#000; }
* { box-sizing: border-box; }
body { margin:0; font-family:'Montserrat',Arial,sans-serif; color:var(--ink); background:var(--grey); font-size:14px; line-height:1.5; }
h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; margin:0; line-height:1.15; }
h1 { font-size:34px; } h2 { font-size:22px; margin-bottom:14px; }
a { color:var(--ink); }
button, input, select, textarea { font-family:inherit; font-size:14px; }

.bar { background:var(--black); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 24px; min-height:60px; }
.bar .left, .bar .right { display:flex; align-items:center; gap:14px; }
.logo { height:38px; display:block; }
.bubble { background:var(--pink); color:#fff; font-weight:700; font-size:19px; padding:5px 20px; border-radius:999px; text-decoration:none; }
.iconbtn { position:relative; width:44px; height:44px; border-radius:50%; border:1px solid #3a3a3a; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pillbtn { height:44px; border-radius:999px; border:1px solid #3a3a3a; background:transparent; color:#fff; display:flex; align-items:center; gap:8px; padding:0 16px; font-weight:600; cursor:pointer; }
.badge { position:absolute; top:2px; right:2px; background:var(--pink); color:#000; font-size:11px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }

.tabs { background:#fff; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:4px; padding:0 24px; }
.tabs a { display:block; padding:16px 14px 12px; font-weight:600; text-decoration:none; border-bottom:4px solid transparent; cursor:pointer; }
.tabs a.on { font-weight:700; border-bottom-color:var(--pink); }

main { padding:26px 24px 20px; max-width:1500px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.note { color:var(--muted); font-size:13px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 24px; min-width:0; }
.row { display:flex; flex-wrap:wrap; gap:16px; }
.row > .grow2 { flex:2 1 560px; min-width:0; } .row > .grow1 { flex:1 1 320px; min-width:0; }
.grid5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; }
.stat .l { font-size:13px; font-weight:600; color:var(--muted); }
.stat .v { font-family:'Playfair Display',Georgia,serif; font-size:44px; font-weight:700; color:var(--pink); line-height:1.1; margin:4px 0; }
.stat .s { font-size:12px; color:var(--muted); }

.btn { height:46px; padding:0 22px; border-radius:8px; border:2px solid #000; background:#fff; color:#111; font-weight:700; cursor:pointer; }
.btn.pink { background:var(--pink); color:#000; }
.btn.black { background:#000; color:#fff; }
.btn.small { height:38px; padding:0 14px; font-size:13px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.pair { display:flex; gap:10px; } .pair .btn { flex:1 1 0; }
input[type=search], input[type=text], input[type=email], input[type=number], select, textarea { border:1px solid #cfcfcf; border-radius:8px; padding:0 14px; height:44px; background:var(--grey); color:#111; width:100%; }
textarea { height:96px; padding:10px 14px; resize:vertical; }
label.f { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.formgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }

.chip { display:inline-block; padding:2px 12px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.chip.active { background:#fff; color:#111; border:2px solid #111; }
.chip.warm { background:#dcdcdc; color:#111; border:2px solid #dcdcdc; }
.chip.paused { background:#000; color:#fff; border:2px solid #000; }

.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:620px; }
th { background:#000; color:#fff; text-align:left; padding:10px 12px; font-weight:600; font-size:13px; }
td { padding:11px 12px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
.bars { display:flex; align-items:flex-end; gap:20px; height:190px; border-bottom:1px solid var(--line); padding:0 8px; }
.bars .col { flex:1 1 0; display:flex; align-items:flex-end; justify-content:center; gap:4px; height:100%; }
.bars .b { width:24px; border-radius:4px 4px 0 0; }
.bars.labels { height:auto; border:none; padding-top:6px; } .bars.labels div { flex:1 1 0; text-align:center; font-size:12px; font-weight:600; color:var(--muted); }
.meter { height:9px; background:#ececec; border-radius:5px; overflow:hidden; margin:7px 0 3px; } .meter > div { height:9px; background:var(--pink); border-radius:5px; }
.list { display:flex; flex-direction:column; gap:10px; }
.item { background:var(--grey); border-radius:8px; padding:10px 14px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.reply { border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.big { font-family:'Playfair Display',Georgia,serif; font-size:52px; font-weight:700; color:var(--pink); line-height:1; }
.stephead { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.stephead h2 { margin:0; }
.step { display:flex; gap:16px; border:1px solid var(--line); border-radius:10px; padding:14px 16px; align-items:flex-start; margin-bottom:10px; }
.step .big { font-size:40px; flex:0 0 34px; text-align:center; }
.copyline { display:flex; gap:8px; align-items:center; margin:6px 0; } .copyline code { flex:1 1 0; min-width:0; background:#000; color:#fff; padding:10px 12px; border-radius:8px; overflow-x:auto; white-space:nowrap; font-size:12px; }
.green { display:inline-block; padding:2px 12px; border-radius:999px; background:#1b7a3a; color:#fff; font-weight:700; font-size:12px; }
.waiting { display:inline-block; padding:2px 12px; border-radius:999px; background:#dcdcdc; font-weight:700; font-size:12px; }
.empty { color:var(--muted); padding:18px 0; text-align:center; }
footer { text-align:center; color:var(--muted); font-size:12px; padding:14px 0 26px; }

.login { min-height:100vh; background:#000; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px; }
.login .logo { height:54px; } .login h1 { color:#fff; font-size:40px; } .login p { color:#d0d0d0; max-width:420px; margin:0; }
.login .btn { background:var(--pink); border-color:var(--pink); color:#000; text-decoration:none; display:inline-flex; align-items:center; }
.login footer { color:#9a9a9a; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.modal .box { background:#fff; border-radius:14px; padding:22px 24px; width:520px; max-width:100%; max-height:92vh; overflow:auto; }

/* Phone: stats and the high level view only */
.phone-only { display:none; } .tabbar { display:none; }
@media (max-width: 720px) {
  .desktop-only { display:none !important; }
  .phone-only { display:block; }
  .bar { padding:8px 14px; } .logo { height:32px; } .bubble { font-size:17px; padding:4px 16px; }
  main { padding:14px 14px 90px; gap:12px; }
  h1 { font-size:28px; }
  .grid5 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat { padding:10px 14px; } .stat .v { font-size:38px; }
  .tabbar { display:flex; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--line); justify-content:space-around; padding:6px 8px calc(8px + env(safe-area-inset-bottom)); z-index:20; }
  .tabbar a { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:70px; min-height:48px; font-size:11px; font-weight:600; text-decoration:none; border-radius:10px; padding:2px 8px; cursor:pointer; }
  .tabbar a.on { background:var(--pink); color:#000; }
  footer { padding-bottom:90px; }
  .formgrid { grid-template-columns:1fr; }
}