:root{--bg:#f4f7f5;--surface:#fff;--soft:#edf7f2;--text:#17342a;--muted:#6d7c76;--primary:#176b50;--primary2:#23906c;--line:#dce7e1;--danger:#b93838;--shadow:0 18px 45px rgba(23,52,42,.10);--radius:24px}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:linear-gradient(180deg,#f8fbf9,#eef4f1);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.plain{border:0;background:none}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,5vw,70px);background:rgba(248,251,249,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-align:left;color:var(--text)}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--primary);color:#fff;font-size:22px;font-weight:900}.brand strong,.brand small{display:block}.brand small{color:var(--muted)}.top-actions{display:flex;align-items:center;gap:10px}.account-label{font-size:13px;color:var(--muted)}main{width:min(1180px,calc(100% - 28px));margin:auto;padding:34px 0 120px}.screen{animation:fade .22s ease}@keyframes fade{from{opacity:0;transform:translateY(5px)}}h1{font-size:clamp(34px,5vw,60px);line-height:1.03;margin:7px 0 12px}h2{margin:4px 0 16px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:900;color:var(--primary)}.muted,.hint{color:var(--muted)}.hint.error{color:var(--danger);font-weight:700}.welcome-shell{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;min-height:580px;padding:clamp(32px,6vw,70px);border-radius:34px;background:linear-gradient(135deg,#123a2f,#176b50);color:#fff;box-shadow:var(--shadow)}.welcome-copy p{font-size:18px;line-height:1.7;color:rgba(255,255,255,.8);max-width:720px}.welcome-copy .eyebrow{color:#dff36f}.welcome-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.legal-links{display:flex;gap:8px;margin-top:20px;align-items:center}.legal-links .text-button{color:#d8ebe3}.welcome-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px}.visual-ring{grid-column:1/-1;display:grid;place-items:center;align-content:center;aspect-ratio:2;border-radius:30px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}.visual-ring strong{font-size:70px}.visual-card{padding:22px;border-radius:22px;background:#fff;color:var(--text)}.visual-card strong{font-size:25px}.primary,.secondary,.ghost,.text-button{border:0;border-radius:14px;font-weight:800}.primary{padding:13px 18px;background:var(--primary);color:#fff}.welcome-shell .primary{background:#dff36f;color:#17342a}.primary:hover{filter:brightness(.94)}.secondary,.ghost{padding:12px 16px;background:#fff;color:var(--primary);border:1px solid var(--line)}.text-button{padding:7px 2px;background:none;color:var(--primary)}.auth-panel{width:min(560px,100%);margin:24px auto 0}.auth-form,.panel,.goal-overview{padding:28px;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}.auth-form{display:grid;gap:17px}.auth-form h2{margin:0}.check-row{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start}.check-row input{width:auto;margin-top:4px}.onboarding-head,.page-head,.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.onboarding-progress{height:12px;background:#e0e8e4;border-radius:99px;overflow:hidden;margin:22px 0 8px}.onboarding-progress div{height:100%;width:25%;background:linear-gradient(90deg,var(--primary),#63be97);transition:.25s}.step-label{color:var(--muted);font-weight:800}.onboarding-nav{display:flex;justify-content:space-between;margin-top:20px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.full{grid-column:1/-1}label{display:grid;gap:8px;font-size:14px;font-weight:800}input,select,textarea{width:100%;padding:13px 14px;border-radius:13px;border:1px solid var(--line);background:#fbfdfc;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(23,107,80,.1)}.invalid{border-color:var(--danger)!important}.persona-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.persona-card{padding:10px;border:2px solid transparent;border-radius:20px;background:#fff;text-align:left;box-shadow:0 8px 25px rgba(23,52,42,.07)}.persona-card.selected{border-color:var(--primary);background:var(--soft)}.persona-card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:15px;display:block}.persona-card strong,.persona-card small{display:block;padding:0 4px}.persona-card strong{font-size:18px;margin-top:10px}.persona-card small{color:var(--muted);line-height:1.4;margin-top:4px}.permission-list{display:grid;gap:14px}.permission-card{display:grid;grid-template-columns:auto 1fr;align-items:start;padding:18px;border:1px solid var(--line);border-radius:18px;background:#f9fbfa}.permission-card input{width:auto;margin-top:5px}.permission-card strong,.permission-card small{display:block}.permission-card small{color:var(--muted);margin-top:4px}.tutorial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tutorial-grid>div{padding:20px;border-radius:18px;background:var(--soft)}.tutorial-grid span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900}.tutorial-grid strong{display:block;margin-top:15px}.tutorial-grid p{color:var(--muted);line-height:1.5}.persona-badge{padding:13px 17px;border-radius:16px;background:var(--soft);color:var(--primary);font-weight:900}.goal-overview{margin:22px 0}.goal-overview>div:first-child{display:flex;justify-content:space-between}.goal-overview strong{font-size:30px}.progress-track{height:12px;background:#e1e9e5;border-radius:99px;overflow:hidden;margin-top:14px}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--primary),#60bb94);transition:.3s}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0}.stat{padding:20px;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(23,52,42,.07)}.stat span,.stat small{display:block;color:var(--muted)}.stat strong{display:block;font-size:27px;margin:8px 0}.dashboard-grid,.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{margin-top:22px}.goal-cards{display:grid;gap:14px}.goal-item{display:grid;gap:7px}.goal-row{display:flex;justify-content:space-between;font-size:14px}.mini-progress{height:9px;border-radius:99px;background:#e4ebe7;overflow:hidden}.mini-progress div{height:100%;background:var(--primary)}.bar-chart{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:end;min-height:230px;padding-top:25px}.bar-chart.large{min-height:340px}.chart-item{display:grid;grid-template-rows:1fr auto auto;height:100%;gap:7px;text-align:center}.chart-bar-wrap{display:flex;align-items:flex-end;height:100%;background:#f1f5f3;border-radius:13px;padding:4px}.chart-bar{width:100%;min-height:5px;border-radius:10px;background:linear-gradient(180deg,#62bd95,var(--primary))}.chart-item small{color:var(--muted)}.chart-item strong{font-size:12px}.view-tabs{display:flex;gap:8px;margin:20px 0}.view-tabs button{padding:10px 17px;border:1px solid var(--line);background:#fff;border-radius:12px;font-weight:800;color:var(--muted)}.view-tabs button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.stack{display:grid;gap:17px}.calculation-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}.calculation-preview>div{padding:16px;border-radius:15px;background:var(--soft)}.calculation-preview span,.calculation-preview strong{display:block}.calculation-preview span{color:var(--muted);font-size:13px}.button-row{display:flex;gap:10px}.data-list{display:grid;gap:12px}.data-item{padding:16px;border:1px solid var(--line);border-radius:17px;background:#f9fbfa}.data-item-head{display:flex;justify-content:space-between;gap:12px}.data-item-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;color:var(--muted);font-size:13px}.item-actions{display:flex;gap:8px;margin-top:13px}.item-actions button{padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:800}.item-actions .delete{color:var(--danger)}.narrow{width:min(620px,100%);margin-inline:auto}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}.profile-cell{padding:16px;border-radius:16px;background:#f7faf8;border:1px solid var(--line)}.profile-cell span,.profile-cell strong{display:block}.profile-cell span{color:var(--muted);font-size:12px;margin-bottom:5px}.bottom-nav{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;display:grid;grid-template-columns:repeat(5,1fr);width:min(650px,calc(100% - 22px));padding:8px;border-radius:22px;background:rgba(255,255,255,.95);backdrop-filter:blur(18px);box-shadow:0 15px 45px rgba(23,52,42,.18);border:1px solid var(--line)}.bottom-nav button{display:grid;place-items:center;gap:3px;padding:9px 5px;border:0;border-radius:13px;background:none;color:var(--muted)}.bottom-nav button.active{background:var(--soft);color:var(--primary)}.bottom-nav span{font-size:11px;font-weight:800}.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(10,28,22,.55)}.modal-card{position:relative;width:min(650px,100%);max-height:80vh;overflow:auto;padding:30px;border-radius:24px;background:#fff}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:30px}.modal-card p{line-height:1.7;color:var(--muted)}.toast{position:fixed;right:22px;bottom:105px;z-index:70;opacity:0;transform:translateY(15px);padding:13px 17px;border-radius:13px;background:#17342a;color:#fff;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}
@media(max-width:1000px){.persona-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.tutorial-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){main{width:min(100% - 18px,1180px);padding-top:18px}.welcome-shell,.dashboard-grid,.two-col{grid-template-columns:1fr}.welcome-shell{min-height:auto;padding:30px}.welcome-visual{display:none}.onboarding-head,.page-head,.panel-head{align-items:flex-start;flex-direction:column}.form-grid,.form-grid.compact{grid-template-columns:1fr}.full{grid-column:auto}.persona-grid{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:repeat(2,1fr)}.account-label{display:none}.bar-chart{gap:6px}.topbar{padding:12px}.top-actions .ghost:last-child{display:none}}
@media(max-width:460px){.persona-grid,.stats-grid,.tutorial-grid,.profile-grid{grid-template-columns:1fr}.bottom-nav span{display:none}.panel,.auth-form,.goal-overview{padding:20px}}


.level-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
}

.level-badge {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: white;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(23,107,80,.22);
}

.level-info strong,
.level-info span,
.level-info small {
  display: block;
}

.level-info span,
.level-info small {
  color: var(--muted);
}

.level-info .mini-progress {
  margin: 10px 0 7px;
}

.challenge-preview {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}

.challenge-preview strong,
.challenge-preview span,
.challenge-preview small {
  display: block;
}

.challenge-preview span,
.challenge-preview small {
  color: var(--muted);
}

.community-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
  margin: 20px 0;
}

.community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.community-tabs button {
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
  color: var(--muted);
  font-weight: 800;
}

.community-tabs button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}

.challenge-card {
  padding: 22px;
  border-radius: 22px;
  background: white;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.challenge-card.joined {
  border-color: #8fcdb3;
  background: linear-gradient(180deg,#fbfffd,#edf7f2);
}

.challenge-card .challenge-icon {
  font-size: 34px;
  margin-bottom: 12px;
}

.challenge-card h3 {
  margin: 0 0 8px;
}

.challenge-card p {
  color: var(--muted);
  line-height: 1.55;
}

.challenge-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 13px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}

.badge-card {
  text-align: center;
  padding: 22px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(23,52,42,.07);
}

.badge-card.locked {
  opacity: .46;
  filter: grayscale(1);
}

.badge-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--soft);
  font-size: 34px;
}

.badge-card strong,
.badge-card small {
  display: block;
}

.badge-card small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
}

.community-compose {
  width: min(760px,100%);
  margin-inline: auto;
}

.feed-list {
  display: grid;
  gap: 16px;
  width: min(760px,100%);
  margin: 20px auto 0;
}

.feed-item {
  padding: 20px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(23,52,42,.07);
}

.feed-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.feed-user {
  display: flex;
  gap: 11px;
  align-items: center;
}

.feed-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--soft);
  font-weight: 900;
  color: var(--primary);
}

.feed-item p {
  line-height: 1.6;
}

.feed-actions {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.feed-actions button {
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 800;
}

.feed-actions button.liked {
  color: var(--primary);
}

.leaderboard-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8fbf9;
  border: 1px solid var(--line);
}

.leaderboard-row.current {
  border-color: #8fcdb3;
  background: var(--soft);
}

.rank {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: white;
  font-weight: 900;
}

.bottom-nav {
  grid-template-columns: repeat(6,1fr);
  width: min(760px,calc(100% - 22px));
}

@media(max-width:1000px){
  .community-stats{grid-template-columns:repeat(2,1fr)}
  .challenge-grid{grid-template-columns:repeat(2,1fr)}
  .badge-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:620px){
  .challenge-grid,.badge-grid,.community-stats{grid-template-columns:1fr}
}


.welcome-note{display:block;max-width:650px;color:#d8ebe3;font-weight:700;line-height:1.55}
.persona-login-section{margin-top:32px;padding-bottom:30px}
.persona-login-grid{margin-top:18px}
.persona-login-cta{display:block;margin:12px 4px 4px;padding:9px 10px;border-radius:11px;background:var(--primary);color:#fff;text-align:center;font-size:13px;font-weight:900}
.persona-card.selected .persona-login-cta{background:#dff36f;color:#17342a}
#welcomePersonaGrid .persona-card:hover{transform:translateY(-4px);border-color:#8fcdb3}
#welcomePersonaGrid .persona-card{transition:.2s ease}
#logoutBtn,#accountLabel{display:none!important}


.preset-notice {
  display: grid;
  gap: 5px;
  margin: 20px 0 8px;
  padding: 15px 18px;
  border: 1px solid #b9dccd;
  border-radius: 16px;
  background: #eef8f3;
}
.preset-notice strong { color: var(--primary); }
.preset-notice span { color: var(--muted); line-height: 1.5; }
.preset-hint { color: var(--primary); font-weight: 700; }