:root{
      --bg:#f9fafc; --card:#ffffff; --muted:#f1f3f6; --text:#1a1a1a; --text-dim:#555; --accent:#3366cc; --accent-2:#5cb3a6;
      --good:#2f855a; --warn:#b7791f; --bad:#c53030;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans"; background:var(--bg); color:var(--text)}
    a{color:var(--accent)}
    .app{display:grid; grid-template-columns: 320px 1fr; gap:16px; padding:16px; max-width:1400px; margin:0 auto}
    .sidebar{position:sticky; top:16px; height:calc(100vh - 32px); overflow:auto; background:var(--card); border:1px solid #ddd; border-radius:12px; padding:14px}
    .main{min-height:100%;}
    .topbar{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px}
    .title{font-weight:800; letter-spacing:.2px; font-size:20px}
    .search{flex:1}
    input[type="search"]{width:100%; padding:10px 12px; border-radius:8px; border:1px solid #ccc; background:#fff; color:var(--text)}
    .phase{background:var(--card); border:1px solid #ddd; border-radius:12px; margin-bottom:16px; overflow:hidden}
    .phase > summary{cursor:pointer; list-style:none; padding:16px; font-weight:700; font-size:18px; display:flex; align-items:center; gap:10px; background:var(--muted);}
    .phase[open] > summary{border-bottom:1px solid #ddd}
    .phase .content{padding:14px 16px 18px}
    .pill{display:inline-flex; align-items:center; gap:8px; background:var(--muted); color:var(--text-dim); padding:6px 10px; border-radius:999px; font-size:12px; margin-right:8px}
    .progress{height:8px; background:#eee; border-radius:999px; overflow:hidden; margin:6px 0}
    .progress > i{display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); width:0%}
    .task{display:flex; flex-direction:column; gap:6px; padding:10px 8px; border-radius:8px; border:1px solid #ddd; background:#fafafa; margin:8px 0}
    .task.checked{opacity:.65; text-decoration:line-through}
    .task label{cursor:pointer}
    .task .meta{font-size:12px; color:var(--text-dim)}
    .task .note{width:100%; min-height:56px; margin-top:6px; padding:8px; border-radius:6px; background:#fff; border:1px solid #ccc; color:var(--text)}
    .group{margin-top:8px}
    .group h4{margin:18px 0 8px; font-size:14px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.12em}
    .links a{display:block; padding:4px 0; font-size:14px; text-decoration:none}
    .tag{font-size:11px; padding:2px 6px; border-radius:6px; background:#eee; color:#333; margin-left:6px}
    .flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    .btn{padding:8px 10px; border-radius:8px; background:#f1f3f6; color:var(--text); border:1px solid #ccc; cursor:pointer}
    .btn:hover{background:#e2e8f0}
    .kbd{border:1px solid #ccc; border-bottom-width:2px; padding:2px 6px; border-radius:4px; background:#fff; color:#333; font-size:12px}
    .footer{opacity:.7; font-size:12px; margin-top:12px}
    .phase-header{display:flex; align-items:center; justify-content:space-between; gap:12px}
    .checkbox{min-width:20px; min-height:20px}
    .small{font-size:12px; color:var(--text-dim)}