:root{
--bg:#fafaf7;
--ink:#1a1a1a;
--muted:#6b6b6b;
--line:#e7e5df;
--green:#1f9d55;
--red:#c83b3b;
--blue:#2a5db0;
--gold:#b88a2c;
--soft:#f3f1ea;
--radius:16px;
--shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px rgba(0,0,0,.06);
--max:920px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font:16px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;
background:var(--bg);
color:var(--ink);
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.86}
.container{
max-width:var(--max);
margin:0 auto;
padding:24px 18px 80px;
}
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:14px 18px;
border-bottom:1px solid var(--line);
background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);
position:sticky;
top:0;
z-index:20;
}
.brand{
font-weight:800;
letter-spacing:.3px;
}
.topbar nav a{
color:var(--muted);
font-size:14px;
margin-left:12px;
}
.today-card{
position:relative;
overflow:hidden;
border-radius:26px;
padding:36px 32px 30px;
background:linear-gradient(135deg,#fdfdfa 0%,#f6f4ec 52%,#eef2fa 100%);
box-shadow:var(--shadow);
border:1px solid rgba(255,255,255,.72);
}
.today-bg{
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 82% 14%,rgba(95,194,138,.2),transparent 46%),
radial-gradient(circle at 12% 86%,rgba(42,93,176,.14),transparent 50%);
}
.today-content{position:relative}
.today-meta{
display:flex;
justify-content:space-between;
align-items:center;
color:var(--muted);
font-size:13px;
margin-bottom:16px;
}
.today-streak{
background:#fff4d9;
color:#9a711d;
border:1px solid #ead08b;
border-radius:99px;
padding:4px 12px;
font-weight:700;
}
.today-promise{
margin:0 0 20px;
font-size:28px;
line-height:1.28;
letter-spacing:-.4px;
}
.today-task{
background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.9);
border-radius:16px;
padding:18px 20px;
margin-bottom:20px;
}
.today-task-tag{
font-size:11px;
color:var(--muted);
letter-spacing:.8px;
font-weight:800;
margin-bottom:6px;
}
.today-task-title{
font-size:20px;
font-weight:800;
margin-bottom:4px;
}
.today-task-desc{
color:#444;
font-size:14px;
}
.today-checklist{
margin:0 0 22px;
}
.today-step{
display:flex;
align-items:center;
gap:12px;
padding:11px 14px;
border-radius:12px;
background:rgba(255,255,255,.58);
margin-bottom:8px;
}
.today-step-tick{
width:20px;
height:20px;
border-radius:50%;
border:2px solid var(--line);
background:#fff;
flex-shrink:0;
}
.today-step-text{
flex:1;
font-weight:650;
}
.today-step-time{
color:var(--muted);
font-size:12px;
background:#fff;
border-radius:99px;
padding:2px 8px;
}
.today-cta{
display:block;
width:100%;
text-align:center;
padding:16px 22px;
border-radius:15px;
background:#c8e6c9;
color:#2e7d32;
font-weight:800;
box-shadow:0 8px 22px rgba(0,0,0,.18);
transition:.18s ease;
}
.today-cta:hover{
transform:translateY(-2px);
opacity:1;
}