.app{background:var(--bg-2);grid-template-columns:240px 1fr;min-height:100vh;display:grid}.app-side{border-inline-end:1px solid var(--line);background:var(--bg);flex-direction:column;gap:6px;height:100vh;padding:18px 14px;display:flex;position:sticky;top:0}.app-side .brand{padding:6px 8px 18px}.app-side nav{gap:2px;display:grid}.app-side nav a{color:var(--fg-2);border-radius:10px;align-items:center;gap:10px;padding:9px 10px;font-size:15px;font-weight:500;text-decoration:none;display:flex}.app-side nav a:hover{background:var(--bg-2);color:var(--fg)}.app-side nav a[aria-current=page]{background:var(--bg-3);color:var(--fg)}.app-side nav svg{width:18px;height:18px;color:var(--muted);flex:none}.app-side nav a[aria-current=page] svg{color:var(--accent-text)}.app-side .foot{color:var(--muted);gap:8px;margin-top:auto;padding:8px;font-size:13px;display:grid}.app-side .foot .who{color:var(--fg-2);align-items:center;gap:10px;font-size:14px;display:flex}.app-side .foot .who b{color:var(--fg);font-size:14px;font-weight:600;display:block}.app-side .foot .who span{font-size:12px;display:block}.app-side .foot button{justify-self:start}.app-main{width:100%;max-width:1240px;padding:clamp(20px,3vw,40px)}.app-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;display:flex}.app-head h1{letter-spacing:-.03em;font-size:clamp(26px,3vw,34px)}.app-head p{color:var(--fg-2);margin-top:4px}.app-head .right{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-frame);padding:22px}.card h2{letter-spacing:-.02em;margin-bottom:6px;font-size:20px}.card .sub{color:var(--fg-2);font-size:15px}.card+.card,.grid+.card,.card+.grid{margin-top:18px}.grid{gap:18px;display:grid}.grid.k4{grid-template-columns:repeat(4,1fr)}.grid.s2{grid-template-columns:2fr 1fr;align-items:start}.stat{padding:18px 20px}.stat .l{color:var(--muted);font-size:13px}.stat .v{font-family:var(--font-display);letter-spacing:-.03em;margin-top:6px;font-size:30px;font-weight:800;line-height:1}.stat .d{color:var(--muted);margin-top:8px;font-size:13px}.stat .d.up{color:var(--profit)}.stat .d.down{color:var(--waste)}.t{border-collapse:collapse;width:100%;font-size:14px}.t th{text-align:start;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;padding:10px;font-size:13px;font-weight:500}.t td{border-bottom:1px solid var(--line);vertical-align:middle;padding:11px 10px}.t tr:last-child td{border-bottom:0}.t .r{text-align:end;font-variant-numeric:tabular-nums}.t .name{color:var(--fg);text-overflow:ellipsis;white-space:nowrap;max-width:320px;font-weight:600;overflow:hidden}.t .sub{color:var(--muted);font-size:12px;font-weight:400;display:block}.t .bad{color:var(--waste);font-weight:600}.t .good{color:var(--profit);font-weight:600}.pill{background:var(--bg-3);color:var(--fg-2);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;display:inline-block}.pill.on{color:var(--profit);background:#e3f6ea}.pill.off{color:var(--waste);background:#fde8eb}.pill.learn,.pill.moon{color:var(--accent-text);background:#fff3d1}.steps{gap:12px;margin:0;padding:0;list-style:none;display:grid}.steps li{border:1px solid var(--line);background:var(--bg);border-radius:16px;grid-template-columns:36px 1fr;gap:14px;padding:18px;display:grid}.steps li.later{opacity:.55}.steps li.now{background:#fffbf0;border-color:#f0b42999}.steps .n{background:var(--bg-3);width:32px;height:32px;color:var(--muted);border-radius:50%;place-items:center;font-weight:700;display:grid}.steps li.done .n{background:var(--profit);color:#fff}.steps li.now .n{background:var(--accent);color:var(--ink)}.steps h3{font-size:17px}.steps p{color:var(--fg-2);margin-top:4px;font-size:15px}.notice{border-radius:12px;margin-bottom:18px;padding:12px 16px;font-size:14px}.notice.ok{color:var(--profit);background:#e3f6ea}.notice.bad{color:var(--waste);background:#fde8eb}.row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;padding:14px 0;display:flex}.row:first-of-type{border-top:0}.row .meta{color:var(--muted);font-size:13px}.switch{background:var(--bg-3);cursor:pointer;width:44px;height:26px;transition:background .16s var(--ease);border:0;border-radius:999px;flex:none;position:relative}.switch:after{content:"";width:20px;height:20px;transition:transform .16s var(--ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0003}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]:after{transform:translate(18px)}.form{gap:16px;max-width:640px;display:grid}.form .two{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form label{color:var(--fg-2);gap:6px;font-size:14px;font-weight:500;display:grid}.form input,.form select{border:1px solid var(--line-2);background:var(--bg);min-height:44px;color:var(--fg);font:inherit;border-radius:10px;padding:0 12px;font-size:15px}.form input:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:#0000}.form .hint{color:var(--muted);font-size:12px;font-weight:400}.modes{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.modes label{border:1px solid var(--line-2);cursor:pointer;border-radius:12px;gap:4px;padding:14px;display:grid}.modes label:has(input:checked){border-color:var(--accent);background:#fffbf0}.modes label b{color:var(--fg);font-size:15px}.modes label span{color:var(--muted);font-size:13px}.modes input{opacity:0;position:absolute}.log{margin:0;padding:0;list-style:none;display:grid}.log li{border-top:1px solid var(--line);grid-template-columns:64px 1fr;gap:12px;padding:12px 0;font-size:14px;display:grid}.log li:first-child{border-top:0}.log .t{color:var(--muted);font-variant-numeric:tabular-nums}.log .w b{font-weight:600}.log .w .why{color:var(--fg-2);margin-top:2px;display:block}.chart{width:100%;height:200px}.empty{text-align:center;color:var(--muted);padding:40px 20px}.empty h3{color:var(--fg);margin-bottom:6px}@media (max-width:900px){.app{grid-template-columns:1fr}.app-side{border-inline-end:0;border-bottom:1px solid var(--line);flex-flow:wrap;align-items:center;height:auto;position:static}.app-side .brand{padding:0 8px}.app-side nav{gap:2px;display:flex}.app-side nav a{padding:8px 10px;font-size:14px}.app-side nav a span{display:none}.app-side .foot{margin-top:0;margin-inline-start:auto}.grid.k4{grid-template-columns:repeat(2,1fr)}.grid.s2,.form .two,.modes{grid-template-columns:1fr}.t{display:block;overflow-x:auto}}
