
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
body{min-height:100vh}
.app-shell{max-width:1180px;margin:0 auto;min-height:100vh;padding:18px 16px calc(var(--nav-h) + 22px)}
.hidden{display:none!important}
.page{display:none}
.page.active{display:block}
h1,h2,h3,p{margin-top:0}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:14px}
.grid{display:grid;gap:14px}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card-title{font-weight:800;font-size:17px}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;background:var(--green-soft);color:var(--green-2)}
.btn{border:0;border-radius:16px;padding:14px 16px;font-weight:800;transition:.15s transform,.15s opacity}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--green);color:white}
.btn-secondary{background:var(--surface-2);color:var(--text)}
.btn-danger{background:var(--red-soft);color:var(--red)}
.btn-warning{background:var(--orange-soft);color:#9a5b13}
.btn-block{width:100%}
.icon-btn{border:0;background:transparent;font-size:24px;padding:6px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.hello{font-size:24px;font-weight:900}
.subhello{font-size:13px;color:var(--muted)}
.bottom-nav{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,620px);height:var(--nav-h);background:rgba(255,255,255,.96);backdrop-filter:blur(15px);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:9px 8px calc(8px + env(safe-area-inset-bottom))}
.nav-btn{border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:700;min-width:70px}
.nav-btn.active{color:var(--green)}
.nav-ico{font-size:21px}
.toast{position:fixed;z-index:100;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);opacity:0;background:#163426;color:white;border-radius:999px;padding:11px 16px;font-weight:800;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;z-index:90;background:rgba(16,38,27,.45);display:flex;align-items:flex-end;justify-content:center;padding:0}
.modal-sheet{width:min(100%,620px);max-height:95vh;overflow:auto;background:var(--bg);border-radius:28px 28px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -16px 60px rgba(0,0,0,.18)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.back-btn{border:0;background:transparent;color:var(--green);font-weight:800;padding:8px 0}
.close-btn{border:0;background:var(--surface-2);border-radius:50%;width:36px;height:36px}
.section-title{font-size:18px;font-weight:900;margin:22px 0 10px}
.metric{padding:14px;border-radius:16px;background:var(--surface-2)}
.metric strong{display:block;font-size:22px}
input[type="number"],input[type="text"],input[type="password"],select{
  width:100%;border:1px solid var(--line);background:white;border-radius:14px;padding:14px 13px;color:var(--text);outline:none
}
input:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
@media (min-width:760px){
  .app-shell{padding:26px 24px 100px}
  .dashboard-layout{grid-template-columns:1.25fr .75fr}
  .desktop-two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v1.3 geometry polish */
.card{min-width:0}
.dashboard-layout>.stack{min-width:0}
.card-title{line-height:1.2}
.metric{min-height:86px;display:flex;flex-direction:column;justify-content:center}
.metric strong{line-height:1.05;margin-top:4px}
.row>*{min-width:0}
button{min-width:0}
@media(max-width:420px){
  .app-shell{padding-left:12px;padding-right:12px}
  .card{padding:16px}
  .hello{font-size:21px}
  .two{grid-template-columns:1fr 1fr}
}

/* ===== v1.4 mobile reset ===== */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0}
.app-shell{width:100%;max-width:620px;margin:0 auto;overflow-x:hidden;padding:14px 12px calc(86px + env(safe-area-inset-bottom))}
#app-screen,main,.page,.dashboard-layout,.stack,.card{width:100%;max-width:100%;min-width:0}
.grid,.two,.kpi-grid,.funnel,.task-grid-priority,.task-grid-secondary,.outcome-grid,.result-grid{min-width:0}
.card{overflow:hidden}
.bottom-nav{
  left:0!important;right:0!important;transform:none!important;
  width:100%!important;max-width:620px!important;margin:0 auto!important;
  box-sizing:border-box!important;
}
.nav-btn{min-width:0!important;flex:1;padding:0 4px}
.modal-sheet{width:100%;max-width:620px}
@media(max-width:480px){
  .app-shell{padding-left:12px;padding-right:12px}
  .card{border-radius:20px;padding:16px}
}

/* v2.8.1 smooth modal/reminder transitions */
.modal{animation:cgModalFadeIn .20s ease both}
.modal-sheet{animation:cgSheetIn .28s cubic-bezier(.22,.72,.22,1) both;transition:opacity .14s ease,transform .14s ease;will-change:transform,opacity}
.modal-sheet.modal-content-swapping{opacity:.25;transform:translateY(7px)}
@keyframes cgModalFadeIn{from{background:rgba(16,38,27,0)}to{background:rgba(16,38,27,.45)}}
@keyframes cgSheetIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.modal,.modal-sheet{animation:none!important}.modal-sheet,.progress-slides-track,.carousel-dot{transition:none!important}}

/* v2.8.2 reminder sheets: rise as one full panel instead of a small header popping into content */
.reminder-modal-sheet{
  min-height:min(58vh,560px);
  animation:cgReminderSheetIn .42s cubic-bezier(.2,.78,.2,1) both;
}
.reminder-loading-placeholder{min-height:34vh}
@keyframes cgReminderSheetIn{
  from{opacity:.82;transform:translate3d(0,100%,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.app-footer{padding:22px 0 10px;display:flex;justify-content:center}
.logout-bottom{border:0;background:transparent;color:var(--muted);font-weight:800;padding:12px 20px}
.logout-bottom:active{opacity:.65}
@media (prefers-reduced-motion:reduce){.reminder-modal-sheet{animation:none!important}}

/* Push settings */
.push-device-box{display:grid;gap:4px;justify-items:center;margin:8px 0 14px}
.push-device-btn{border:0;background:transparent;color:var(--green);font:inherit;font-size:13px;font-weight:800;padding:8px 12px;cursor:pointer}
.push-device-btn:disabled{opacity:.55;cursor:default}
.push-device-note{font-size:11px;color:var(--muted);text-align:center;max-width:320px}
