/* ViewGrow web: same look as the Android app (green top, white bottom, Poppins). */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: block; src: local('Poppins Regular'), local('Poppins-Regular'), url(fonts/poppins-regular.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: block; src: local('Poppins Medium'), local('Poppins-Medium'), url(fonts/poppins-medium.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: block; src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(fonts/poppins-semibold.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: block; src: local('Poppins Bold'), local('Poppins-Bold'), url(fonts/poppins-bold.woff) format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-display: block; src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'), url(fonts/poppins-extrabold.woff) format('woff'); }

:root {
  --green: #1FAA59; --green-dark: #158245; --tint: #E1F5EB; --bg: #F5FAF6; --border: #DCEEE1;
  --field: #F6FBF1; --text: #555555; --text2: #7A8580; --muted: #8A928C; --dark: #111B21;
  --red: #D9534F; --red-dark: #B3413D; --amber: #E8A93B; --amber-bg: #FCF3E3; --amber-text: #8A5A00;
  --track: #E4E8E6; --locked-bg: #F0F2F5; --locked-text: #A8B0AC;
  --surface: #FFFFFF; --red-bg: #FBEAE9; --notice-title: #158245; color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); }
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--surface); box-shadow: 0 0 0 1px var(--border); position: relative; }
.app.wide { max-width: 760px; }

/* header: green gradient, white text */
.hero { background: linear-gradient(180deg, var(--green), var(--green-dark)); color: #fff; text-align: center; padding: 44px 24px 56px; border-radius: 0 0 40px 40px; position: relative; z-index: 1; }
.hero .lead { font-size: 16px; opacity: .92; margin: 0; }
.hero h1 { margin: 2px 0 0; font-size: 36px; line-height: 1.15; font-weight: 800; }
.hero p.sub { margin: 10px auto 0; max-width: 320px; font-size: 13px; opacity: .9; }
.hero.compact { padding: 26px 20px 46px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero.compact h1 { font-size: 22px; }
.hero.compact .lead { font-size: 12px; }
.hero .ghost { background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px; font: 600 12px 'Poppins', sans-serif; cursor: pointer; }

.body { background: var(--surface); border-radius: 24px 24px 0 0; margin-top: -24px; position: relative; padding: 52px 20px 40px; }
.app.hasnav .body { padding-bottom: 110px; }

/* segmented tabs */
.seg { display: flex; background: var(--track); border-radius: 14px; padding: 4px; gap: 4px; margin-bottom: 18px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 11px; padding: 10px 6px; font: 600 13px 'Poppins', sans-serif; color: var(--text2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--green-dark); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

h2 { font-size: 18px; font-weight: 600; color: var(--dark); margin: 0 0 6px; }
h3 { font-size: 16px; font-weight: 600; color: var(--dark); margin: 0 0 6px; }
p { margin: 0 0 10px; }
.small { font-size: 12px; color: var(--muted); }
.muted { color: var(--text2); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.card.tint { background: var(--bg); }
.notice { border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--green); color: var(--text); }
.notice.warn { border-left-color: var(--amber); }
.notice.bad { border-left-color: var(--red); }
.notice b { display: inline; font-weight: 600; color: var(--notice-title); }
.notice.warn b { color: var(--amber-text); }
.notice.bad b { color: var(--red-dark); }

label.lbl { display: block; font-size: 13px; font-weight: 600; color: var(--dark); margin: 0 0 6px; }
.field { width: 100%; background: var(--field); border: 1px solid var(--border); border-radius: 12px; padding: 14px; font: 500 15px 'Poppins', sans-serif; color: var(--dark); outline: none; margin-bottom: 14px; appearance: none; }
.field:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,170,89,.15); }
textarea.field { min-height: 110px; resize: vertical; font-weight: 400; font-size: 13px; }
.field.pin { letter-spacing: 10px; text-align: center; font-size: 22px; font-weight: 700; }
.err { color: var(--red-dark); font-size: 13px; margin: -6px 0 12px; min-height: 0; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin: 0 0 6px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green); flex: none; }

.btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px 18px; background: var(--green); color: #fff; font: 800 14px 'Poppins', sans-serif; text-align: center; text-decoration: none; cursor: pointer; margin: 0 0 10px; }
.btn:active { background: var(--green-dark); }
.btn[disabled] { background: var(--locked-bg); color: var(--locked-text); cursor: default; }
.btn.sec { background: var(--tint); color: var(--green-dark); }
.btn.line { background: var(--surface); color: var(--green-dark); border: 1.5px solid var(--green); }
.btn.red { background: var(--red); }
.btn.red.sec { background: var(--red-bg); color: var(--red-dark); }
.btn.sm { display: inline-block; width: auto; padding: 8px 14px; border-radius: 10px; font-size: 12px; margin: 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > .btn { flex: 1; min-width: 120px; }

.steps { list-style: none; padding: 0; margin: 0 0 6px; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 7px 0 7px 36px; font-size: 13px; min-height: 38px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--green-dark); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }

.pinbox { text-align: center; background: var(--tint); border: 1px solid var(--border); border-radius: 16px; padding: 18px 12px; margin-bottom: 14px; }
.pinbox .code { font-size: 40px; font-weight: 800; letter-spacing: 12px; color: var(--green-dark); padding-left: 12px; line-height: 1.2; }

.chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--tint); color: var(--green-dark); margin-right: 4px; }
.chip.warn { background: var(--amber-bg); color: var(--amber-text); }
.chip.bad { background: var(--red-bg); color: var(--red-dark); }
.chip.gray { background: var(--locked-bg); color: var(--text2); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chips button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 13px; font: 600 12px 'Poppins', sans-serif; color: var(--text2); cursor: pointer; }
.chips button.on { background: var(--green); border-color: var(--green); color: #fff; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.stat b { display: block; font-size: 24px; font-weight: 700; color: var(--dark); line-height: 1.2; }
.stat span { font-size: 12px; color: var(--text2); }

.list .item { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list .acts { flex-basis: 100%; display: flex; gap: 8px; margin-top: 2px; }
.list .acts .btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 11px 12px; border-radius: 12px; font-size: 13px; }
.list .item:last-child { border-bottom: 0; }
.list .info { flex: 1; min-width: 0; cursor: pointer; }
.list .nm { font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .ph { font-size: 12px; color: var(--text2); white-space: nowrap; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--tint); color: var(--green-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.empty { text-align: center; color: var(--muted); padding: 22px 0; font-size: 13px; }

.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; width: calc(100% - 28px); max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 6px 24px rgba(17,27,33,.14); display: flex; padding: 6px; z-index: 20; }
.nav button { flex: 1; border: 0; background: transparent; border-radius: 16px; padding: 9px 4px; font: 600 11px 'Poppins', sans-serif; color: var(--text2); cursor: pointer; }
.nav button.on { background: var(--tint); color: var(--green-dark); }
.nav svg { display: block; margin: 0 auto 2px; width: 20px; height: 20px; }

.sheet-bg { position: fixed; inset: 0; background: rgba(17,27,33,.5); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--surface); width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; border-radius: 24px 24px 0 0; padding: 20px 20px 28px; }
.sheet .grab { width: 40px; height: 4px; background: var(--track); border-radius: 4px; margin: -8px auto 14px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.kv span:first-child { color: var(--text2); }
.kv span:last-child { color: var(--dark); font-weight: 500; text-align: right; word-break: break-all; }
.sub-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 16px 0 6px; }

#toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--dark); color: var(--bg); padding: 11px 18px; border-radius: 14px; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; z-index: 99; max-width: 88vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: var(--red-dark); }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes sp { to { transform: rotate(360deg); } }
.hide { display: none !important; }

/* admin layout pieces */
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips button { white-space: nowrap; flex: none; }
.sumrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 6px; }
.sumrow b { font-size: 20px; font-weight: 700; color: var(--dark); }
.sumrow .small { text-align: right; }
.field.search { margin-bottom: 12px; }
.foot { margin-top: 18px; text-align: center; }
#userSeg { margin-bottom: 14px; }
.list .item.day { cursor: pointer; }
.list .count { font-size: 16px; color: var(--dark); }
.chev { color: var(--muted); font-size: 20px; }
.list .count { min-width: 44px; text-align: right; }
.list .item.day .info { min-width: 0; }
.hero .ghost.lock { background: var(--red); }
.hero .ghost.lock.on { background: #fff; color: var(--red-dark); }

/* green header with tools inside (Users) */
.hero.compact { display: block; padding-bottom: 46px; }
.hero .hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.htools { margin-top: 16px; }
.hero .seg { background: rgba(255,255,255,.22); border-radius: 18px; padding: 4px; margin: 0 0 12px; }
.hero .seg button { color: #fff; border-radius: 14px; padding: 11px 6px; }
.hero .seg button.on { background: #fff; color: var(--green-dark); box-shadow: none; }
/* login / sign-up toggle sits inside the green header, aligned with the form fields */
.hero:has(> #tabs) { padding: 44px 20px 30px; }
#tabs { margin: 26px 0 0; }
.hsearch { position: relative; }
.hsearch svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.hsearch input { width: 100%; height: 48px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--surface); padding: 0 14px 0 46px; font: 500 14px 'Poppins', sans-serif; color: var(--dark); outline: none; appearance: none; }
.hsearch input::placeholder { color: var(--muted); font-weight: 400; }

/* compact user rows: one line of name, one of number, action on the right */
.list .item { flex-wrap: nowrap; gap: 10px; padding: 9px 0; }
.list .avatar { width: 34px; height: 34px; font-size: 13px; cursor: pointer; }
.list .btn.sm { padding: 7px 12px; font-size: 12px; flex: none; white-space: nowrap; }
.list .ph { overflow: hidden; text-overflow: ellipsis; }
.tag { flex: none; font-size: 11px; font-weight: 600; color: var(--green-dark); background: var(--tint); padding: 2px 9px; border-radius: 999px; }
.st { font-weight: 600; }
.st.bad { color: var(--red-dark); }
.st.warn { color: var(--amber-text); }

/* status tags, profile icon, filter drop-down */
.tag.bad { background: var(--red-bg); color: var(--red-dark); }
.tag.warn { background: var(--amber-bg); color: var(--amber-text); }
.tag.gray { background: var(--locked-bg); color: var(--text2); }
.list .avatar svg { width: 20px; height: 20px; }
.list .item[data-open] { cursor: pointer; }
.fbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 600 12px 'Poppins', sans-serif; color: var(--text2); cursor: pointer; }
.fbtn svg { width: 14px; height: 14px; }
.fbtn.on { background: var(--tint); border-color: var(--green); color: var(--green-dark); }
.opt { display: flex; justify-content: space-between; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--dark); cursor: pointer; }
.opt:last-child { border-bottom: 0; }
.opt.on { color: var(--green-dark); }

/* full-screen loader: white page, rolling ring, until the data is ready */
.loader { position: fixed; inset: 0; background: var(--surface); z-index: 60; display: flex; align-items: center; justify-content: center; }
.loader .ring { width: 46px; height: 46px; border: 4px solid var(--tint); border-top-color: var(--green); border-radius: 50%; animation: sp .8s linear infinite; }

/* dashboard + forgot link */
.topbar { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.topbar .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.topbar .who b { color: var(--dark); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .who span { font-size: 12px; color: var(--text2); }
.forgot { text-align: center; font-size: 13px; color: var(--text2); margin: 4px 0 0; }
.forgot a { color: var(--green-dark); font-weight: 600; text-decoration: none; }

/* how it works strip */
.how { display: flex; gap: 8px; margin-bottom: 18px; }
.how div { flex: 1; text-align: center; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px 6px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--dark); }
.how i { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0 auto 6px; border-radius: 50%; background: var(--tint); color: var(--green-dark); font: 700 12px 'Poppins', sans-serif; font-style: normal; }

.avail{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:14px}
.avail span{font-weight:600;color:var(--dark);font-size:14px}
.avail b{font-size:32px;font-weight:800;color:var(--green-dark);line-height:1}

.iconbtn{width:42px;height:42px;border:0;border-radius:12px;background:var(--surface);color:var(--green-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border)}

/* dashboard: Total / Available cards and the import button */
.statgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:12px;align-items:stretch}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 10px;text-align:center;min-width:0;display:flex;flex-direction:column;justify-content:center}
.stat span{display:block;font-weight:600;color:var(--dark);font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{display:block;font-size:30px;font-weight:800;color:var(--green-dark);line-height:1.15;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.ic{display:block;text-align:center}
.btn.ic svg{display:inline-block;vertical-align:middle;margin:-3px 10px 0 0;flex:none}
.btn.ic .spin{margin-right:0}

/* dashboard: Recent days */
.hist{border:1px solid var(--border);border-radius:16px;padding:6px 16px 4px;margin:14px 0 0;background:var(--surface)}
.hist .hh{padding:10px 0 4px;font-size:14px;font-weight:600;color:var(--dark)}
.hrow{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--dark)}
.hrow:last-child{border-bottom:0}
.hrow b{font-weight:800;color:var(--green-dark);font-size:15px}
.hist .hh{display:flex;align-items:center;justify-content:space-between}
.hist .hh a{font-size:12px;font-weight:600;color:var(--green-dark);text-decoration:none;cursor:pointer}
.hscreen{position:fixed;inset:0;background:var(--surface);z-index:50;max-width:480px;margin:0 auto;display:flex;flex-direction:column}
.hscreen .hbar{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--border)}
.hscreen .hbar b{font-size:18px;font-weight:600;color:var(--dark)}
.hscreen .hsum{flex:none;margin:0;padding:16px 20px 16px;font-size:12px;color:var(--muted);text-align:center;border-bottom:1px solid var(--border)}
.hscreen .hlist{padding:12px 20px 24px;overflow:auto;flex:1;min-height:0}

/* name already taken: suggestions below the Register button */
.sbox{margin:18px 0 0;padding:16px 14px;width:100%;box-sizing:border-box;text-align:center;border:1px solid var(--border);border-radius:14px;background:#F5FAF6}
.sbox .smsg{font-size:14px;font-weight:600;color:#B3413D;margin-bottom:4px}
.sbox .shint{font-size:12px;color:var(--muted);margin-bottom:12px}
.sbox .srow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sbox .sugg-btn{flex:1 1 0;min-width:0;max-width:110px;padding:10px 6px;border:1.5px solid #1FAA59;border-radius:12px;background:var(--surface);color:#158245;font:700 13px Poppins,sans-serif;cursor:pointer}

/* Today: Log reshares tile (same design as the stat blocks) */
.log-tile { margin-bottom: 14px; }
.log-head { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.log-head b { font-size: 16px; font-weight: 700; color: var(--dark); }
.plus { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--green); color: #fff; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.log-sheet-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--track); font-size: 18px; color: var(--text); cursor: pointer; }
.log-sheet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.log-sheet-top h2 { margin: 0; }
.log-sheet-top .log-day { flex: 0 0 auto; width: 128px; margin: 0 10px 0 auto; background: var(--field); border: 1px solid var(--border); border-radius: 10px; padding: 5px 8px; font: 600 12px 'Poppins', sans-serif; color: var(--dark); outline: none; }

/* Sign-up open: switch on the right */
.swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;font-size:16px;cursor:pointer}
.sw{position:relative;width:52px;height:30px;flex:none}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;border-radius:15px;background:#cfd8d3;transition:background .2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.sw input:checked + i{background:var(--green)}
.sw input:checked + i::after{transform:translateX(22px)}
.sw input:focus-visible + i{outline:2px solid var(--green);outline-offset:2px}

/* Verified days and Downloads rows: text left, green View right */

/* Verified days: one green container per month */
.mbtn{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:14px;background:var(--green);color:#fff;padding:14px 16px;margin:6px 0;font:700 15px 'Poppins',sans-serif;cursor:pointer;text-align:left}
.mbtn span{font:600 13px 'Poppins',sans-serif;opacity:.9}
.mbtn:active{background:var(--green-dark)}

/* full-screen list pages: scrollable body, full-width actions pinned at bottom */
.hscreen .hlist{flex:1;overflow:auto;padding:12px 16px}
.hscreen .hfoot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border)}
.hscreen .hfoot .btn{width:100%;margin:0 0 8px}
.hscreen .hfoot .btn:last-child{margin-bottom:0}

/* dashboard: countdown box in the place of the old PIN box */
.timerbox{background:var(--tint);border:1px solid var(--border);border-radius:16px;padding:18px 16px;margin-bottom:14px;text-align:center}
.timerbox .tcount{font-size:40px;font-weight:800;letter-spacing:2px;color:var(--green-dark);font-variant-numeric:tabular-nums;line-height:1.2;margin:6px 0}

/* password fields: eye button */
.pwwrap{position:relative;margin-bottom:14px}
.pwwrap .field{padding-right:52px;margin-bottom:0}
.eyebtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:8px;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.log-tile{cursor:pointer}

/* loading state */
.loadbox{text-align:center;padding:18px 0 8px}
.loadbox .spin{display:block;margin:0 auto 10px;width:28px;height:28px;border-color:rgba(0,0,0,.12);border-top-color:#1f9e59}

/* sheet title: name left, Change limit right */
.titlerow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.titlerow h2{margin:0;min-width:0;overflow-wrap:anywhere}
.titlerow .btn{width:auto;margin:0;padding:8px 12px;font-size:13px;border-radius:10px;white-space:nowrap;flex:none}

/* title row actions: chat icon + Change limit */
.tactions{display:flex;align-items:center;gap:8px;flex:none}
.chatbtn{width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--green-dark);display:inline-flex;align-items:center;justify-content:center;flex:none;text-decoration:none}

/* dashboard: 3 quick steps card (secondary to the timer and stats) */
.qsteps{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;margin:0 0 16px}
.qs-h{font-size:14px;font-weight:600;color:var(--text2);margin:2px 4px 10px;text-align:center}
.qs-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.qs-row:last-child{margin-bottom:0}
.qs-ic{order:1;flex:none;width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--green-dark);display:flex;align-items:center;justify-content:center}
.qs-ic svg{width:18px;height:18px}
.qs-t{flex:1;min-width:0;font-size:13px;line-height:1.4;color:var(--text);font-weight:500}
.qs-n{order:-1;flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--tint);color:var(--green-dark);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}

/* dashboard: main button band (white pill on a green band, per design reference) */
.ctaband{background:linear-gradient(135deg,var(--green),var(--green-dark));border-radius:40px 40px 0 0;margin:12px -20px -40px;padding:22px 20px 30px;box-shadow:0 -6px 24px rgba(17,27,33,.12)}
.cta{display:block;background:var(--surface);color:var(--green-dark);border-radius:999px;padding:18px 20px;font:800 17px 'Poppins',sans-serif;text-align:center;text-decoration:none;margin:0;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.cta:active{background:#EEF7F1}
.ctaband .cta + .cta{margin-top:8px}

/* dashboard after log in: no brand header, content starts at the top */
.app.dash .hero { display: none; }
.app.dash .body { margin-top: 0; padding-top: 20px; border-radius: 0; }
.app.dash .body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: 0; }
.app.dash .body > section { display: flex; flex-direction: column; flex: 1; }
.app.dash .ctaband { margin: auto -20px 0; }

/* dashboard: keep the green curved header behind the cards, without the brand text */
.app.dash .hero { display: block; height: 110px; padding: 0; }
.app.dash .hero > * { display: none; }
.app.dash .body { margin-top: -82px; padding-top: 0; background: transparent; position: relative; z-index: 2; border-radius: 0; }
.app.dash .topbar { margin-bottom: 44px; }
.app.dash .body { min-height: calc(100vh - 50px); min-height: calc(100dvh - 50px); }

/* dashboard: the results area fills the screen so the button band can sit at the bottom */
.app.dash #vDash { display: flex; flex-direction: column; flex: 1; }
.app.dash #result { display: flex; flex-direction: column; flex: 1; }

/* dashboard: exact screen height, so nothing scrolls past the button band */
.app.dash { min-height: 100vh; min-height: 100dvh; }

/* Dark mode: follows the phone's system setting. Colours above are replaced here. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #17221D; --red-bg: #3A201F; --notice-title: #4FD08A; --tint: #1F3A2C; --bg: #0F1613; --border: #2A3C34;
    --field: #1A2620; --text: #C9D3CD; --text2: #A3B0A9; --muted: #8C9892; --dark: #EEF3F0;
    --red-dark: #F28B87; --notice-title: #4FD08A; --amber-bg: #3A2E16; --amber-text: #F2C46B; --track: #2C3731;
    --locked-bg: #1E2722; --locked-text: #62706A; color-scheme: dark;
  }
}

/* Dashboard theme toggle. data-theme on <html> overrides the system setting. */
.theme-toggle { width: 38px; height: 38px; flex: none; padding: 0; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--green-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] {
  --surface: #FFFFFF; --red-bg: #FBEAE9; --notice-title: #158245; --tint: #E1F5EB; --bg: #F5FAF6; --border: #DCEEE1;
  --field: #F6FBF1; --text: #555555; --text2: #7A8580; --muted: #8A928C; --dark: #111B21;
  --red-dark: #B3413D; --notice-title: #158245; --amber-bg: #FCF3E3; --amber-text: #8A5A00; --track: #E4E8E6;
  --locked-bg: #F0F2F5; --locked-text: #A8B0AC; color-scheme: light;
}
:root[data-theme="dark"] {
  --surface: #17221D; --red-bg: #3A201F; --notice-title: #4FD08A; --tint: #1F3A2C; --bg: #0F1613; --border: #2A3C34;
  --field: #1A2620; --text: #C9D3CD; --text2: #A3B0A9; --muted: #8C9892; --dark: #EEF3F0;
  --red-dark: #F28B87; --notice-title: #4FD08A; --amber-bg: #3A2E16; --amber-text: #F2C46B; --track: #2C3731;
  --locked-bg: #1E2722; --locked-text: #62706A; color-scheme: dark;
}

/* Dashboard avatar: white disc with the same thin border as the cards, so the app icon stands out in light mode. */
.topbar .avatar { background: var(--surface); border: 1px solid var(--border); box-sizing: border-box; }
.topbar .avatar img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }

/* ---- Dark mode (admin only sets data-theme; public pages never do) ---- */
:root[data-theme="dark"] {
  --green-dark: #3CCB7A; --tint: #173326; --bg: #0E1512; --border: #2A3A33;
  --field: #1E2A25; --text: #C9D3CE; --text2: #9AA8A2; --muted: #7D8B85; --dark: #EEF4F1;
  --red-bg: #3A1F1E; --red-dark: #F08A86; --amber-bg: #3A2E18; --amber-text: #F2C46D;
  --track: #2A3A33; --locked-bg: #1E2622; --locked-text: #6B7772; --surface: #17201C;
  --notice-title: #3CCB7A; color-scheme: dark;
}
:root[data-theme="dark"] .sw i { background: #3a4a43; }
:root[data-theme="dark"] .hero .seg button.on { color: var(--green-dark); }
:root[data-theme="dark"] .hero { background: linear-gradient(180deg, #1B6B40, #0F3F28); color: #EAF7EF; }
:root[data-theme="dark"] .hero .lead, :root[data-theme="dark"] .hero p { color: #B9DCC8; }

/* header controls */
.hbtns { display: flex; align-items: center; gap: 8px; flex: none; }
.iconbtn-h { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.iconbtn-h svg { width: 19px; height: 19px; }
.iconbtn-h:active { transform: scale(.94); }
.iconbtn-h .i-sun { display: none; }
:root[data-theme="dark"] .iconbtn-h .i-moon { display: none; }
:root[data-theme="dark"] .iconbtn-h .i-sun { display: block; }
.hero h1, .hero .lead { color: #fff; }
:root[data-theme="dark"] .hero h1 { color: #fff; }

/* install card (member dashboard, see pwa.js) */
.ipcard { margin: 0 0 14px; }
.ipcard .ip-top { display: flex; gap: 12px; align-items: center; }
.ipcard .ip-top img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.ipcard .ip-top > div { flex: 1; min-width: 0; }
.ipcard .ip-top > div > b { display: block; font-size: 15px; color: var(--dark); margin-bottom: 2px; }
.ipcard .ip-top span b { display: inline; font-weight: 600; color: var(--text); }
.ipcard .ip-top span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.ipcard .ip-acts { display: flex; gap: 8px; margin-top: 14px; }
.ipcard .ip-acts .btn { flex: 1; padding: 12px; font-size: 14px; }

.hrow > span:first-child { white-space: nowrap; }

.ipcard { position: relative; }
.ipcard .ip-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; width: 32px; height: 32px; cursor: pointer; padding: 0; }
.ipcard .ip-top { padding-right: 20px; }

.card-tip { position: relative; }
.card-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; width: 32px; height: 32px; cursor: pointer; padding: 0; }
.card-tip h3 { padding-right: 24px; }

.notice.card-tip { padding-right: 40px; }/* Reshares day picker */