:root{
    --navy:#060d18; --navy-2:#122a4d; --navy-3:#1a3a68;
    --gold:#c4a35a; --gold-light:#e0c57a;
    --page:#eef2f7; --surface:#fffffe; --ink:#15181d; --ink-2:#4b5361; --muted:#848d9c;
    --line:#d9e0ea; --ok:#1a8a44; --ok-bg:#e7f6ec; --warn:#9a6b00; --warn-bg:#fff4d6; --plan:#3a4a63; --plan-bg:#eef1f5;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    background:
      radial-gradient(900px 420px at 8% -10%, #d7e4f5 0%, transparent 55%),
      radial-gradient(700px 380px at 100% 0%, #e8eef6 0%, transparent 50%),
      var(--page);
    color:var(--ink); line-height:1.5; min-height:100vh;
  }
  .mono{font-family:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace}
  header{background:var(--navy);color:#fff}
  header .wrap{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .brand{color:#fff;text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.02em}
  .brand span{color:var(--gold-light)}
  .back{margin-left:auto;color:#c9d4e2;text-decoration:none;font-size:13.5px}
  .back:hover{color:#fff}
  main{max-width:1100px;margin:0 auto;padding:28px 20px 72px}
  h1{font-size:clamp(1.6rem, 3vw, 2.1rem);color:var(--navy);letter-spacing:-.03em;margin-bottom:8px}
  .lead{color:var(--ink-2);max-width:62ch;font-size:1.02rem;margin-bottom:18px}
  .kpis{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:120px}
  .kpi .v{font-size:1.45rem;font-weight:750;color:var(--navy);font-variant-numeric:tabular-nums}
  .kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
  .filters button{
    border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
    border-radius:999px;padding:7px 13px;font:600 12.5px/1 "DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;
  }
  .filters button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
  .tile{
    text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:14px 15px 13px;cursor:pointer;position:relative;overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease; font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  .tile:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(6,13,24,.08)}
  .tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,var(--plan))}
  .tile.done{--ac:var(--ok)}
  .tile.partial{--ac:var(--warn)}
  .tile.planned{--ac:var(--plan)}
  .tile .st{
    display:inline-block;font-size:10.5px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
    border-radius:999px;padding:3px 8px;margin-bottom:8px;
  }
  .tile.done .st{background:var(--ok-bg);color:var(--ok)}
  .tile.partial .st{background:var(--warn-bg);color:var(--warn)}
  .tile.planned .st{background:var(--plan-bg);color:var(--plan)}
  .tile h2{font-size:15px;color:var(--navy);letter-spacing:-.015em;margin-bottom:6px;line-height:1.25}
  .tile p{font-size:12.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tile .meta{margin-top:10px;font-size:11.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
  dialog{
    border:none;border-radius:14px;padding:0;max-width:560px;width:94vw;
    box-shadow:0 30px 80px rgba(6,13,24,.28);
  }
  dialog::backdrop{background:rgba(6,13,24,.45)}
  .dlg{padding:22px 22px 18px;font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .dlg h3{color:var(--navy);font-size:1.2rem;margin:8px 0 10px;letter-spacing:-.02em}
  .dlg p{color:var(--ink-2);font-size:14px;margin-bottom:12px}
  .dlg .row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .chip{font-size:11.5px;font-weight:700;background:var(--plan-bg);color:var(--navy-3);border-radius:999px;padding:4px 9px}
  .dlg button{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer}
  .note{margin-top:22px;font-size:13px;color:var(--muted);max-width:70ch}
  .note a{color:var(--navy-3)}
  .nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .nav a{color:#c9d4e2;text-decoration:none;font-size:13.5px;padding:8px 10px;font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .nav a:hover{color:#fff}
  .nav .cta{background:var(--gold);color:var(--navy)!important;font-weight:750;border-radius:8px;padding:9px 14px}
  .jump{
    display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;
    font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  .jump a{
    display:inline-flex;align-items:center;gap:6px;text-decoration:none;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;
    padding:12px 14px;color:var(--navy);font-weight:700;font-size:13.5px;
  }
  .jump a:hover{border-color:var(--navy-3);box-shadow:0 8px 20px rgba(6,13,24,.08)}
  .jump a span{font-weight:500;color:var(--ink-2);font-size:12.5px}

  /* ---- calm pass ---- */
  body{line-height:1.6}
  .card,.tier,article,.also-card{border-color:rgba(6,13,24,.08)!important}