:root{--green: #8CD645;--green-light: #E8F8D8;--green-dark: #5BA82E;--green-grad: linear-gradient(135deg, #8CD645 0%, #6BB832 100%);--red: #FF3B30;--red-light: #FFE5E3;--orange: #FF9500;--orange-light: #FFF4E0;--blue: #007AFF;--blue-light: #E8F0FF;--yellow: #FFCC00;--bg: #F2F2F7;--white: #FFFFFF;--text: #1C1C1E;--text-secondary: #8E8E93;--text-tertiary: #C7C7CC;--border: #EFEFF4;--card: #FFFFFF;--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.03);--shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);--shadow-green: 0 4px 16px rgba(140,214,69,.35);--font: -apple-system, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh;background:var(--bg);position:relative;overflow-x:hidden;padding-top:env(safe-area-inset-top)}.app-container{width:100%;min-height:100vh;background:var(--bg);position:relative;padding-top:env(safe-area-inset-top);padding-bottom:calc(84px + env(safe-area-inset-bottom))}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:max(10px,env(safe-area-inset-top)) 28px 4px;background:transparent;position:sticky;top:0;z-index:100}.status-bar .time{font-size:15px;font-weight:600;letter-spacing:-.2px}.status-bar .icons{display:flex;align-items:center;gap:6px}.dynamic-island{position:absolute;top:max(10px,env(safe-area-inset-top));left:50%;transform:translate(-50%);width:126px;height:37px;background:#000;border-radius:20px;box-shadow:0 0 0 .5px #ffffff14,0 2px 6px #00000026}.page{animation:pageIn .35s cubic-bezier(.22,.61,.36,1)}@keyframes pageIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card{background:var(--white);border-radius:18px;padding:16px;box-shadow:var(--shadow-sm);border:.5px solid rgba(0,0,0,.03);transition:box-shadow .3s,transform .3s}.card-group{background:var(--white);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);border:.5px solid rgba(0,0,0,.03)}.section-header{font-size:20px;font-weight:700;color:var(--text);padding:0 4px 10px;letter-spacing:-.3px}.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;letter-spacing:.1px}.badge-green{background:var(--green-light);color:var(--green-dark)}.badge-red{background:var(--red-light);color:var(--red)}.badge-orange{background:var(--orange-light);color:var(--orange)}.btn-primary{width:100%;padding:16px;background:var(--green-grad);color:var(--white);border:none;border-radius:16px;font-size:17px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:var(--shadow-green);transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s,opacity .2s}.btn-primary:hover{box-shadow:0 6px 24px #8cd64573}.btn-primary:active{transform:scale(.97);box-shadow:var(--shadow-md)}.btn-text{padding:8px 16px;background:rgba(120,120,128,.08);color:var(--text);border:none;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.btn-text:active{background:rgba(120,120,128,.15)}.btn-apple{display:inline-flex;align-items:center;gap:0;padding:6px 10px;background:rgba(120,120,128,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;border-radius:16px;font-size:15px;font-weight:400;color:var(--text);cursor:pointer;text-decoration:none;line-height:1;transition:transform .2s cubic-bezier(.22,.61,.36,1),background .2s,opacity .2s;-webkit-tap-highlight-color:transparent}.btn-apple:active{transform:scale(.95);background:rgba(120,120,128,.2)}.btn-apple svg{margin-right:-2px}.btn-apple-add{padding:7px;background:rgba(120,120,128,.12);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s cubic-bezier(.22,.61,.36,1),background .2s}.btn-apple-add:active{transform:scale(.9);background:rgba(120,120,128,.2)}.btn-apple-add.green{background:var(--green-grad);box-shadow:0 2px 10px #8cd64559}.btn-apple-add.green:active{box-shadow:0 1px 4px #8cd64533}.input-field{width:100%;padding:14px 16px;border:none;background:transparent;font-size:16px;color:var(--text);outline:none;transition:background .2s}.input-field:focus{background:rgba(120,120,128,.04)}.input-field::placeholder{color:var(--text-tertiary)}.input-divider{height:.5px;background:var(--border);margin:0 16px}.score-ring{position:relative;display:flex;align-items:center;justify-content:center}.score-ring svg{transform:rotate(-90deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.06))}.score-ring .score-value{position:absolute;font-size:24px;font-weight:700;letter-spacing:-.5px}.list-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--white);transition:background .2s}.list-item:active{background:rgba(120,120,128,.06)}.list-divider{height:.5px;background:var(--border);margin-left:60px}.bottom-nav{position:fixed;bottom:0;width:100%;background:rgba(255,255,255,.82);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-top:.5px solid rgba(0,0,0,.06);display:flex;justify-content:space-around;padding:6px 0 calc(20px + env(safe-area-inset-bottom));z-index:200}.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--text-tertiary);text-decoration:none;padding:6px 12px;border-radius:16px;transition:color .25s,transform .25s cubic-bezier(.22,.61,.36,1)}.nav-item:active{transform:scale(.92)}.nav-item.active{color:var(--text);font-weight:600}.nav-item.active .nav-icon-bg{background:var(--green);box-shadow:0 2px 8px #8cd64566}.nav-icon-bg{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s,box-shadow .3s,transform .3s}.page-content{padding:0 16px}.page-title{font-size:34px;font-weight:800;letter-spacing:-.8px;line-height:1.1}.page-subtitle{font-size:15px;color:var(--text-secondary);letter-spacing:.1px}.metric-value{font-size:28px;font-weight:700;letter-spacing:-.5px}.metric-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;font-weight:500}
