/* v2.4.1 layout fix */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
#mainHeader { width:100%; max-width:100%; }
button { touch-action: manipulation; }
.screenTopbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px auto 12px;max-width:1280px}
.backHome{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:12px;padding:10px 14px;font-weight:800;box-shadow:0 4px 12px rgba(23,50,77,.06)}
.screenTopbarTitle{font-size:12px;color:var(--muted);font-weight:700}
.morningCard{border-top:4px solid #F6C344;background:linear-gradient(180deg,#fffef5 0%,#fff 22%)}
.priorityCard{border-top:4px solid #FFD166;background:linear-gradient(180deg,#fffaf1 0%,#fff 24%)}
.focusCard{border-top:4px solid #EB6F92;background:linear-gradient(180deg,#fff7fb 0%,#fff 24%)}
.routineCard{border-top:4px solid #49B3B0;background:linear-gradient(180deg,#f6fffe 0%,#fff 24%)}
.performanceTrainingCard{border-top:4px solid #F29E4C;background:linear-gradient(180deg,#fff9f4 0%,#fff 24%)}
.shutdownCard{border-top:4px solid #9B7DD4;background:linear-gradient(180deg,#faf8ff 0%,#fff 24%)}
.performanceCard{border-top:4px solid #5BB974;background:linear-gradient(180deg,#f6fff8 0%,#fff 24%)}

@media (max-width:699px){
  body{padding-bottom:88px}
  header{padding:10px 12px 12px}
  .brandrow{align-items:flex-start}
  .brand{font-size:15px;line-height:1.12;max-width:44vw}
  .brand small{font-size:8.8px;opacity:.84;margin-top:3px}
  .dateNav{align-self:flex-start}
  .dateInput{width:128px;font-size:12px;padding:8px 10px}
  .iconBtn{width:34px;height:34px;border-radius:11px}
  .hero{grid-template-columns:58px 1fr;gap:10px;margin-top:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:10px}
  .ring{width:56px;height:56px}.ring:after{inset:7px}.ringInner strong{font-size:18px}.ringInner span{font-size:8px}
  .heroText h1{font-size:14px;margin:0 0 4px}.heroText p{font-size:10px;line-height:1.28;margin:0}.miniStats{margin-top:8px;gap:5px}.chip{font-size:9px;padding:4px 7px}
  main{width:100%;max-width:100%;padding:10px}.card{padding:13px;margin-bottom:10px;border-radius:16px}.primary,.secondary,.danger{min-height:44px}.checkBtn{min-width:40px;min-height:40px}.screenTopbar{display:none}
}

@media (min-width:700px){
  body{padding:0;background:linear-gradient(180deg,#EFF4F8 0%,#F4F7FA 220px)}
  header{position:sticky;top:0;z-index:30;padding:12px 18px 14px;box-shadow:0 5px 18px rgba(23,50,77,.16)}
  header > *{max-width:1320px;margin:0 auto}
  .brandrow{gap:14px;min-height:40px}.brand{font-size:22px;white-space:nowrap}.brand small{display:block;font-size:11px;opacity:.82;margin-top:4px}
  .dateNav{gap:8px}.dateInput{width:168px;height:42px;padding:8px 12px;font-size:13px;border-radius:14px}.iconBtn{width:42px;height:42px;border-radius:14px}
  .hero{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;margin-top:12px;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:14px 16px}
  .ring{width:80px;height:80px}.ring:after{inset:9px}.ringInner strong{font-size:24px}.ringInner span{font-size:9px}
  .heroText{min-width:0;display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr);column-gap:14px;row-gap:6px;align-items:center}.heroText h1{margin:0;font-size:20px;line-height:1.15}.heroText p{margin:0;font-size:12px;line-height:1.45}.miniStats{grid-column:1 / -1;margin-top:2px;gap:8px}.chip{font-size:10px;padding:5px 10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14)}

  nav{position:sticky !important; inset:auto !important; top:12px !important; bottom:auto !important; left:auto !important; right:auto !important; z-index:29; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; width:min(1320px,calc(100% - 28px)) !important; height:auto !important; margin:14px auto 0 !important; padding:8px !important; background:rgba(255,255,255,.92) !important; border:1px solid var(--line) !important; border-radius:18px !important; box-shadow:0 8px 22px rgba(23,50,77,.08) !important; backdrop-filter:blur(12px) !important}
  nav button{min-height:60px !important; border-radius:14px !important; padding:10px 12px !important; font-size:12px !important; line-height:1.15 !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:8px !important; color:var(--muted) !important; background:transparent !important; width:100% !important}
  nav button span{display:inline-block !important;font-size:18px !important;margin:0 !important;line-height:1}
  nav button.active{color:var(--navy) !important;background:linear-gradient(180deg,#EEF6FF,#E7F0FB) !important;box-shadow:inset 0 0 0 1px #D5E4F5 !important}

  main{width:min(1320px,calc(100% - 28px));max-width:none;margin:14px auto 0;padding:0 0 26px}
  .screen:not(#today).active{width:100%;max-width:none;margin:0}.screenTopbar{margin-top:0}
  #today.active{display:block}
  .todayDesktop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
  .todayCol{display:flex;flex-direction:column;gap:14px;min-width:0}
  #today.active>.card,.todayCol>.card{margin:0;min-width:0;border-radius:18px;padding:14px;box-shadow:0 6px 18px rgba(23,50,77,.06)}
  #today.active>.saveBar{margin-top:14px}.cardHead{margin-bottom:10px}.cardTitle{font-size:17px}.cardSub{font-size:11px;line-height:1.42}.badge{font-size:10px;padding:5px 8px}
  .morningCard .metrics3{gap:8px}.morningCard .metricBox{padding:10px;border-radius:14px}.morningCard .metricBox .k{font-size:10px}.morningCard .metricBox .v{font-size:17px}.morningCard .field{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;align-items:center;margin:8px 0}.morningCard .field .label{margin:0;font-size:10.5px}.morningCard input[type="number"]{padding:10px 10px}.morningCard .seg{gap:6px}.morningCard .seg button{padding:8px 2px;border-radius:10px;font-size:12px}
  .priorityCard textarea{min-height:108px}.priorityCard .row{margin-top:10px !important}.priorityCard .secondary,.priorityCard .primary{min-height:46px;padding:10px 12px}
  .focusCard #focusList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.focusCard .checkItem,.routineCard .checkItem{grid-template-columns:34px minmax(0,1fr);gap:8px;margin:0;padding:10px;border-radius:14px}.focusCard .checkBtn,.routineCard .checkBtn{width:34px;height:34px;border-radius:10px;font-size:16px}.focusCard .checkTitle,.routineCard .checkTitle{font-size:11.5px;line-height:1.22}.focusCard .checkTitle .badge{display:block;width:fit-content;margin-top:5px}.focusCard .checkMeta,.routineCard .checkMeta{font-size:9.2px;line-height:1.33}.focusCard .inlineInput{margin-top:6px !important;padding:8px !important;font-size:10px !important}
  .routineCard #routineList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .performanceTrainingCard .field{margin:8px 0}.performanceTrainingCard textarea{min-height:74px}.performanceTrainingCard select,.performanceTrainingCard input{padding:10px 10px;font-size:11px}.performanceTrainingCard .primary,.performanceTrainingCard .secondary{min-height:42px;padding:8px 10px;font-size:11px}
  .performanceCard .scoreGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.performanceCard .scoreCat{padding:10px;border-radius:12px}.performanceCard .scoreCat .top{font-size:10px}.performanceCard .evaluation{margin-top:9px !important;padding:12px;font-size:10.5px;line-height:1.45;border-radius:14px}.performanceCard .evaluation strong{font-size:12px}.performanceCard .adviceList{padding-left:16px;margin-top:5px}.performanceCard .adviceList li{margin:4px 0}
  .shutdownCard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;row-gap:8px}.shutdownCard .cardHead{grid-column:1/-1;margin-bottom:2px}.shutdownCard .field{margin:0}.shutdownCard textarea{min-height:72px;padding:9px 10px;font-size:10px}.shutdownCard .seg button{padding:8px 2px}
  .saveBar{position:sticky;bottom:12px;z-index:25;justify-content:flex-end;background:rgba(244,247,250,.92);backdrop-filter:blur(10px);padding:10px;border-radius:18px;border:1px solid var(--line);box-shadow:0 12px 24px rgba(23,50,77,.08);gap:10px}.saveBar .primary{flex:0 0 240px}.saveBar .secondary{flex:0 0 200px}
  .historyToolbar{grid-template-columns:minmax(0,1fr) 220px}.historyItem{grid-template-columns:72px minmax(0,1fr) 72px}.dateBox{width:64px;height:64px}.scoreBubble{width:56px;height:56px}.kpiGrid,.scoreGrid,.ioButtons{grid-template-columns:repeat(4,minmax(0,1fr))}.settingRow{border-radius:16px;padding:14px}
  .toast{left:50%;transform:translateX(-50%);bottom:24px}.modal{padding:18px;align-items:center}.sheet{max-height:90vh;border-radius:20px}input[type="text"],input[type="number"],textarea,select{border-radius:12px}
}


/* ===== v2.4.2 soft dashboard color system ===== */
:root{
  --bg:#F1F5F8;
  --card:#FFFFFF;
  --soft:#EEF4F8;
  --line:#DCE6EE;
  --shadow:0 10px 26px rgba(23,50,77,.08);
}
html{background:var(--bg)}
body{background:linear-gradient(180deg,#EDF3F7 0%,#F4F7FA 240px)}
.card{box-shadow:0 10px 22px rgba(23,50,77,.06),0 2px 8px rgba(23,50,77,.03);border-color:#DDE8EF}
.cardTitle{letter-spacing:-.01em}
.badge{background:#EDF4FB;color:#305C85}
.badge.green{background:#E7F6EC;color:#2F7753}.badge.orange{background:#FFF3E1;color:#A46C18}.badge.red{background:#FFE9EC;color:#A53D49}.badge.purple{background:#F0EAFB;color:#6C4EA5}
input[type="text"],input[type="number"],textarea,select{background:#FAFCFE;border-color:#D9E4EC}
input:focus,textarea:focus,select:focus{border-color:#84B5DF;box-shadow:0 0 0 3px rgba(47,117,181,.12)}
.metricBox{background:linear-gradient(180deg,#F6FAFD,#EDF4F8)}
.seg button{background:#FAFCFE}
.seg button.active{background:linear-gradient(180deg,#214A72,#17324D)}
.checkItem{background:#FBFDFE;border-color:#DDE7EE}
.checkBtn{background:linear-gradient(180deg,#F7FAFC,#EEF4F8)}
.scoreCat{background:linear-gradient(180deg,#F9FBFD,#F3F7FA)}
.evaluation{background:linear-gradient(180deg,#EEF6FC,#F7FBFE)}
.secondary{background:#F8FBFE}
.saveBar{background:linear-gradient(180deg,rgba(241,245,248,.1),rgba(241,245,248,.95) 28%)}
.historyItem{border-bottom-color:#E7EDF3}
.dateBox{background:linear-gradient(180deg,#EEF5FB,#E6EEF5)}
.scoreBubble{background:linear-gradient(180deg,#E8F3FC,#DAEAF7)}
.screenTopbar .backHome{background:#F8FBFE}
nav button{transition:background .18s ease,color .18s ease,transform .18s ease, box-shadow .18s ease}
nav button:hover{background:#F5F9FD}
nav button.active{box-shadow:inset 0 0 0 1px #D6E4F5,0 6px 14px rgba(47,117,181,.08)}
.morningCard{background:linear-gradient(180deg,#FFF9E8 0%,#FFFDF7 18%,#FFF 42%);border-top-color:#F3C54D}
.priorityCard{background:linear-gradient(180deg,#FFF5E8 0%,#FFF9F0 18%,#FFF 42%);border-top-color:#FFC857}
.focusCard{background:linear-gradient(180deg,#FFF1F6 0%,#FFF8FB 18%,#FFF 42%);border-top-color:#EA6D92}
.routineCard{background:linear-gradient(180deg,#ECFBFA 0%,#F5FEFD 18%,#FFF 42%);border-top-color:#46B7B4}
.performanceTrainingCard{background:linear-gradient(180deg,#FFF4EA 0%,#FFF9F5 18%,#FFF 42%);border-top-color:#F19B4B}
.shutdownCard{background:linear-gradient(180deg,#F5F1FF 0%,#FAF8FF 18%,#FFF 42%);border-top-color:#9A7ED7}
.performanceCard{background:linear-gradient(180deg,#ECFAF0 0%,#F6FEF8 18%,#FFF 42%);border-top-color:#59B972}
.morningCard .metricBox:nth-child(1){background:linear-gradient(180deg,#FFF8EA,#FDF3D6)}
.morningCard .metricBox:nth-child(2){background:linear-gradient(180deg,#F4F8FF,#EAF1FB)}
.morningCard .metricBox:nth-child(3){background:linear-gradient(180deg,#FFF2F7,#FBEAF2)}
.focusCard .checkItem{background:linear-gradient(180deg,#FFF9FB,#FFF)}
.routineCard .checkItem{background:linear-gradient(180deg,#F8FFFE,#FFF)}
.performanceTrainingCard select,.performanceTrainingCard input,.performanceTrainingCard textarea{background:#FFFDFB}
.shutdownCard textarea{background:#FCFBFF}
.performanceCard .scoreCat:nth-child(1){background:linear-gradient(180deg,#EFF6FD,#F8FBFE)}
.performanceCard .scoreCat:nth-child(2){background:linear-gradient(180deg,#F0FAF5,#FAFEFC)}
.performanceCard .scoreCat:nth-child(3){background:linear-gradient(180deg,#FFF7EE,#FFFCF7)}
.performanceCard .scoreCat:nth-child(4){background:linear-gradient(180deg,#F6F0FF,#FCFAFF)}
@media (min-width:700px){
  body{background:linear-gradient(180deg,#EDF3F7 0%,#F4F7FA 280px)}
  nav{background:rgba(250,252,254,.92) !important;border-color:#D8E4EE !important;box-shadow:0 12px 28px rgba(23,50,77,.08) !important}
  .todayCol{gap:16px}
  #today.active>.card,.todayCol>.card{box-shadow:0 12px 28px rgba(23,50,77,.06),0 2px 10px rgba(23,50,77,.03)}
  .performanceCard .evaluation{background:linear-gradient(180deg,#EEF7FC,#F7FBFE)}
}

@media (min-width:1400px){ .todayDesktop{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr) minmax(0,.98fr)} }


/* v2.5 smooth fold + executive soft theme */

:root{
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-bottom: max(6px, env(safe-area-inset-bottom));
}
html,body{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#ECF2F6 0%, #F6F8FB 35%, #F2F5F8 100%)!important;}
header{padding-top:calc(var(--safe-top) + 6px)!important}
.brand{display:flex;flex-direction:column;min-width:0}
.brandTitle{display:block;font-weight:900;letter-spacing:.2px}
.brand small{white-space:normal}
body.compact-header header{padding-bottom:10px!important}
body.compact-header header .hero{display:none!important}
body.compact-header header .brandrow{align-items:center!important}
body.layout-shifting #today{opacity:.985}

/* neutral executive card tints */
.morningCard{border-top:4px solid #D8B77A!important;background:linear-gradient(180deg,#FFFCF6 0%,#FFFFFF 28%)!important}
.priorityCard{border-top:4px solid #CDBD8A!important;background:linear-gradient(180deg,#FFFDF7 0%,#FFFFFF 28%)!important}
.focusCard{border-top:4px solid #9AA7B2!important;background:linear-gradient(180deg,#FBFCFD 0%,#FFFFFF 26%)!important}
.routineCard{border-top:4px solid #8BA6A0!important;background:linear-gradient(180deg,#F8FBFA 0%,#FFFFFF 26%)!important}
.performanceTrainingCard{border-top:4px solid #C5A27B!important;background:linear-gradient(180deg,#FFFBF7 0%,#FFFFFF 26%)!important}
.shutdownCard{border-top:4px solid #A796B8!important;background:linear-gradient(180deg,#FCFBFE 0%,#FFFFFF 26%)!important}
.performanceCard{border-top:4px solid #7FA1BA!important;background:linear-gradient(180deg,#F7FBFE 0%,#FFFFFF 26%)!important}
.morningCard .metricBox{background:#F8F4EA!important}
.priorityCard textarea,.priorityCard .secondary{background:#FFFEFA!important}
.focusCard .checkItem{background:#F8FAFC!important;border-color:#E4E8ED!important}
.routineCard .checkItem{background:#F7FAF9!important;border-color:#E1EAE8!important}
.performanceTrainingCard input,.performanceTrainingCard select,.performanceTrainingCard textarea{background:#FFFDFC!important}
.shutdownCard textarea,.shutdownCard input{background:#FDFDFF!important}
.performanceCard .scoreCat{background:#F7FAFD!important}
.seg button.active{background:#294A6D!important;border-color:#294A6D!important}
.primary{background:linear-gradient(180deg,#326FA8,#295F93)!important}
.secondary{background:#FFFFFF!important}

/* phone */
@media (max-width:699px){
  header{padding-top:calc(var(--safe-top) + 6px)!important;padding-left:12px!important;padding-right:12px!important}
  .brandTitle{font-size:18px;line-height:1.02;max-width:45vw}
  .brand small{font-size:9px!important;line-height:1.25;opacity:.9}
  .dateNav{gap:5px!important}
  .hero{margin-top:10px!important}
  .heroText h1{font-size:15px!important}
  .heroText p{font-size:10px!important}
  nav{padding-bottom:calc(7px + var(--safe-bottom))!important}
  .saveBar{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:8px;position:sticky!important;bottom:76px!important;padding-top:10px!important;background:linear-gradient(180deg,transparent,rgba(242,245,248,.93) 24%,rgba(242,245,248,.98) 100%)!important;backdrop-filter:blur(10px)}
  .saveBar .secondary,.saveBar .primary{min-height:48px!important;border-radius:15px!important;font-size:12px!important;padding:10px 12px!important}
  nav button.active{background:linear-gradient(180deg,#EEF5FB,#E4EEF8)!important;border-radius:14px}
}

/* tablet / inner screen */
@media (min-width:700px){
  header{padding-top:calc(var(--safe-top) + 2px)!important;padding-left:20px!important;padding-right:20px!important}
  .brandTitle{font-size:22px;white-space:nowrap}
  .brand small{font-size:11px!important;opacity:.85}
  .hero{margin-top:12px!important}
  nav{top:10px!important;margin:10px auto 0!important;padding:8px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  nav button{min-height:54px!important;font-size:12px!important;gap:7px!important}
  nav button span{font-size:17px!important}
  nav button.active{background:linear-gradient(180deg,#EFF5FB,#E5EEF8)!important;box-shadow:inset 0 0 0 1px #D7E2EE!important}
  main{margin-top:12px!important;padding-bottom:26px!important}
  #today.active{display:block!important}
  .todayDesktop{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:14px!important;align-items:start!important}
  .todayCol{display:flex!important;flex-direction:column!important;gap:14px!important;min-width:0!important}
  .todayCol > .card{margin:0!important}
  .todayCol .focusCard #focusList{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .todayCol .routineCard #routineList{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .screen.active:not(#today){display:block}
  .screenTopbar{display:none!important}
  .saveBar{display:flex!important;position:sticky!important;bottom:12px!important;z-index:16!important;padding:12px!important;background:rgba(242,245,248,.92)!important;border:1px solid #DCE5EE!important;border-radius:18px!important;backdrop-filter:blur(12px)!important;box-shadow:0 8px 20px rgba(23,50,77,.08)!important}
  .saveBar .secondary{min-width:220px!important}
  .historyToolbar{grid-template-columns:minmax(0,1fr) 190px!important}
  #history.active .card,#insights.active .card,#settings.active .card{border-radius:18px!important}
}

@media (min-width:1100px){
  .todayDesktop{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important}
}


/* v2.5.1 polish */

:root{
  --nav-icon:#5B6F82;
  --nav-active:#1B4F82;
}
.brandTitle{letter-spacing:-.02em}
.brand small{opacity:.86}
.navIcon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:currentColor;flex:0 0 auto}
.navIcon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav button{font-weight:700}
nav button.active .navIcon{color:var(--nav-active)}
nav button .navIcon{color:var(--nav-icon)}
@media (max-width:699px){
  .brandTitle{font-size:17px!important;line-height:1.02;letter-spacing:-.03em}
  .brand small{font-size:9px!important}
  nav{gap:3px!important;padding:7px 6px calc(7px + var(--safe-bottom))!important}
  nav button{padding:8px 4px!important;min-height:58px!important;font-size:11px!important;border-radius:13px!important}
  nav button span.navIcon{margin-bottom:2px}
}
@media (min-width:700px){
  .hero{padding:11px 14px!important;grid-template-columns:78px minmax(0,1fr)!important;gap:12px!important;margin-top:10px!important;border-radius:18px!important}
  .heroText{grid-template-columns:minmax(180px,360px) minmax(0,1fr)!important;column-gap:16px!important}
  .heroText h1{font-size:18px!important;line-height:1.12!important}
  .heroText p{font-size:11px!important;line-height:1.38!important}
  .miniStats{margin-top:0!important;gap:7px!important}
  .chip{font-size:10px!important;padding:4px 9px!important}
  nav{top:8px!important;margin:8px auto 0!important;padding:6px!important;border-radius:16px!important;box-shadow:0 6px 16px rgba(23,50,77,.07)!important}
  nav button{min-height:50px!important;padding:8px 10px!important;font-size:11px!important;gap:8px!important;border-radius:12px!important}
  nav button span.navIcon{width:20px;height:20px}
  nav button span.navIcon svg{width:18px;height:18px}
  main{margin-top:10px!important}
}


/* v2.5.2 hero and lively nav polish */

/* hero score readability */
#scoreRing{box-shadow:0 10px 22px rgba(15,36,61,.16), inset 0 0 0 1px rgba(255,255,255,.08)}
#heroLabel{letter-spacing:-.02em}
@media (min-width:700px){
  .hero{
    grid-template-columns:132px minmax(0,1fr)!important;
    gap:16px!important;
    padding:12px 16px!important;
    min-height:124px!important;
  }
  .ring{width:104px!important;height:104px!important}
  .ring:after{inset:11px!important}
  .ringInner strong{font-size:26px!important}
  .ringInner span{font-size:11px!important}
  .heroText{
    display:grid!important;
    grid-template-columns:minmax(280px,420px) minmax(0,1fr)!important;
    column-gap:22px!important;
    row-gap:8px!important;
    align-items:center!important;
  }
  .heroText h1{font-size:22px!important;line-height:1.1!important;margin:0!important}
  .heroText p{font-size:14px!important;line-height:1.38!important;margin:0!important}
  .miniStats{grid-column:1 / -1!important;margin-top:2px!important;gap:8px!important}
}
@media (min-width:700px) and (max-width:980px){
  .hero{
    grid-template-columns:120px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .ring{width:94px!important;height:94px!important}
  .heroText{grid-template-columns:1fr!important;row-gap:6px!important}
  .heroText h1{font-size:20px!important}
  .heroText p{font-size:13px!important}
}

/* lively premium nav icons */
.navIcon{border-radius:12px;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease}
nav button .navIcon{
  width:30px!important;height:30px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 4px 10px rgba(33,55,82,.08);
}
nav button[data-screen="today"] .navIcon{background:linear-gradient(180deg,#FFF1DF,#FFE4BF)!important;color:#C97A17!important}
nav button[data-screen="history"] .navIcon{background:linear-gradient(180deg,#FFF9D8,#FFEFAA)!important;color:#B78A00!important}
nav button[data-screen="insights"] .navIcon{background:linear-gradient(180deg,#FEE7EA,#FFD2D9)!important;color:#D25572!important}
nav button[data-screen="settings"] .navIcon{background:linear-gradient(180deg,#E6F8F4,#CDF0E8)!important;color:#1E9E7E!important}
nav button.active .navIcon{transform:translateY(-1px) scale(1.04);box-shadow:0 7px 16px rgba(33,55,82,.12), inset 0 0 0 1px rgba(255,255,255,.72)}
nav button.active[data-screen="today"]{background:linear-gradient(180deg,#FFF9F1,#FFF2DF)!important;box-shadow:inset 0 0 0 1px #F2D7A7,0 6px 14px rgba(201,122,23,.10)!important;color:#83551B!important}
nav button.active[data-screen="history"]{background:linear-gradient(180deg,#FFFCEB,#FFF7CE)!important;box-shadow:inset 0 0 0 1px #EAD98E,0 6px 14px rgba(183,138,0,.10)!important;color:#7A6300!important}
nav button.active[data-screen="insights"]{background:linear-gradient(180deg,#FFF2F4,#FFE3E8)!important;box-shadow:inset 0 0 0 1px #F0BDC9,0 6px 14px rgba(210,85,114,.10)!important;color:#9F3654!important}
nav button.active[data-screen="settings"]{background:linear-gradient(180deg,#EFFBF7,#DDF7EF)!important;box-shadow:inset 0 0 0 1px #BDE7D9,0 6px 14px rgba(30,158,126,.10)!important;color:#176F59!important}
@media (min-width:700px){
  nav{padding:7px!important}
  nav button{min-height:52px!important;font-size:12px!important;gap:9px!important}
  nav button .navIcon{width:32px!important;height:32px!important}
  nav button .navIcon svg{width:18px!important;height:18px!important}
}
@media (max-width:699px){
  nav button .navIcon{width:26px!important;height:26px!important}
  nav button .navIcon svg{width:16px!important;height:16px!important}
}



/* =========================================================
   Web v1.0 — browser/PWA adaptive layer
   ========================================================= */
html,body{min-height:100%;background:#F2F5F8}
body{overscroll-behavior-y:none}
body.web-browser header{padding-top:14px!important}
body.web-browser .brand small{opacity:.78}
.webInstallHint{display:none}
@media (min-width:700px){
  body.web-browser header{padding-top:12px!important}
  body.web-browser main{max-width:1320px}
}
@media (min-width:1366px){
  body.web-browser .todayDesktop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  body.web-browser main, body.web-browser nav, body.web-browser header > *{max-width:1380px!important}
  body.web-browser .hero{grid-template-columns:138px minmax(0,1fr)!important}
}
@media (min-width:1600px){
  body.web-browser main, body.web-browser nav, body.web-browser header > *{max-width:1500px!important}
}
@media (display-mode:standalone){
  body{padding-top:env(safe-area-inset-top)}
}