:root{
      --blue:#23479b;
      --blue-deep:#142c68;
      --teal:#69c7bd;
      --green:#1f9d61;
      --yellow:#f3c94a;
      --red:#d44f4f;
      --paper:#fbfcff;
      --ink:#1f2328;
      --muted:#687385;
      --line:#dfe5eb;
      --white:#fff;
      --shadow:0 16px 34px rgba(31,35,40,.1);
      --radius:8px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family:Inter, "Segoe UI", Arial, sans-serif;
      color:var(--ink);
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.97)),
        url("/assets/standard-slide-lines.webp") center top / min(920px, 120vw) auto no-repeat,
        var(--paper);
    }
    button,input,textarea{font:inherit}
    .page{
      width:min(1120px, calc(100% - 32px));
      margin:0 auto;
      padding:32px 0 56px;
    }
    header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      margin-bottom:28px;
    }
    h1{
      margin:0;
      color:var(--blue);
      font-size:clamp(2.8rem, 7vw, 5.4rem);
      line-height:.9;
      letter-spacing:0;
    }
    .subtitle{
      margin:16px 0 0;
      color:#3d4755;
      font-size:1.1rem;
    }
    .home-link{
      border:1px solid var(--line);
      border-radius:999px;
      background:white;
      color:var(--blue-deep);
      min-height:40px;
      padding:0 14px;
      display:inline-flex;
      align-items:center;
      text-decoration:none;
      font-weight:900;
    }
    .panel,.task-card,.stat-card{
      background:rgba(255,255,255,.96);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .panel{padding:22px}
    label{
      display:block;
      margin-bottom:8px;
      color:var(--muted);
      font-size:.78rem;
      font-weight:900;
      text-transform:uppercase;
    }
    input,textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:0 14px;
      font-weight:900;
      outline:none;
      background:white;
    }
    input{min-height:50px}
    textarea{
      min-height:76px;
      padding:12px 14px;
      resize:vertical;
      font-weight:700;
      line-height:1.35;
    }
    input:focus,textarea:focus{
      border-color:var(--teal);
      box-shadow:0 0 0 4px rgba(105,199,189,.2);
    }
    button{
      min-height:50px;
      border:0;
      border-radius:var(--radius);
      background:var(--blue);
      color:white;
      padding:0 18px;
      cursor:pointer;
      font-weight:900;
    }
    .secondary{background:#edf2f7;color:var(--blue-deep)}
    .success{background:#e8f8ee;color:#146c38}
    .login-row{
      display:flex;
      gap:10px;
      align-items:flex-end;
      max-width:560px;
    }
    .login-row .field{flex:1}
    .error{
      min-height:22px;
      margin:12px 0 0;
      color:#a33d3d;
      font-weight:800;
    }
    .dashboard{display:grid;gap:18px}
    .toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .toolbar h2{margin:0;color:var(--blue-deep);font-size:1.55rem}
    .meta{color:var(--muted);font-weight:800}
    .cards{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .stat-card{padding:16px}
    .stat-card b{
      display:block;
      color:var(--blue);
      font-size:2rem;
      line-height:1;
      margin-bottom:7px;
    }
    .stat-card span{color:var(--muted);font-weight:900}
    .task-section{display:grid;gap:12px}
    .task-section h3{
      margin:10px 0 0;
      color:var(--blue-deep);
      font-size:1.35rem;
    }
    .task-card{
      padding:16px;
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:14px;
      align-items:start;
    }
    .check{
      width:42px;
      height:42px;
      border:2px solid var(--line);
      background:white;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:transparent;
      font-size:1.35rem;
      padding:0;
    }
    .task-card.done{
      border-color:#bceac9;
      background:#f7fff9;
    }
    .task-card.done .check{
      background:var(--green);
      border-color:var(--green);
      color:white;
    }
    .task-title{
      margin:0 0 6px;
      color:var(--blue-deep);
      font-size:1.1rem;
      font-weight:1000;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      border-radius:999px;
      padding:0 10px;
      font-weight:900;
      font-size:.8rem;
      background:#edf8f7;
      color:#17756f;
      margin:0 6px 8px 0;
    }
    .task-actions{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:end;
      margin-top:12px;
    }
    .empty{
      border:1px dashed var(--line);
      border-radius:var(--radius);
      padding:22px;
      background:white;
      color:var(--muted);
      font-weight:900;
    }
    .hidden{display:none}
    @media (max-width:760px){
      header,.login-row,.toolbar,.task-actions{flex-direction:column;display:flex;align-items:stretch}
      .cards{grid-template-columns:1fr 1fr}
      .task-card{grid-template-columns:1fr}
      button,.home-link{justify-content:center;width:100%}
    }