* { box-sizing: border-box; } body { margin:0; } .wrap { max-width:1100px; margin:auto; padding:24px; } header,.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; } header { justify-content:flex-start; border-bottom:1px solid var(--line); padding-bottom:16px; } header #logout { margin-left:auto; } .logo { width:64px; height:64px; object-fit:contain; } .panel { background:var(--surface-200); padding:24px; margin:24px 0; border:1px solid var(--line); } label { display:grid; gap:6px; margin:12px 0; color:var(--ink); } input,select { font:inherit; color:var(--ink); background:white; border:1px solid var(--line); border-radius:4px; padding:10px; min-height:42px; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; } .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .stat { border:1px solid var(--line); padding:16px; background:var(--surface-200); } .stat strong { display:block; font:24px var(--font-mono); } .filters { display:grid; grid-template-columns:2fr 1fr; gap:16px; } .projects { list-style:none; padding:0; } .project { border:1px solid var(--line); padding:18px; margin:12px 0; background:white; } .project-top { display:flex; justify-content:space-between; gap:12px; } .project-actions { display:flex; gap:8px; } .progress { height:12px; background:var(--surface-300); margin:12px 0; } .progress span { display:block; height:100%; background:var(--accent); } dialog { width:min(520px,calc(100% - 24px)); border:1px solid var(--line); color:var(--ink); background:var(--surface-100); } dialog::backdrop { background:#0008; } [hidden] { display:none!important; } #message { min-height:1.5em; } @media(max-width:650px) { .wrap {padding:16px;} header {align-items:flex-start;} .stats,.filters {grid-template-columns:1fr;} .project-top {display:block;} .bar {align-items:flex-start;} }