:root {
    --green: #0a5f9c;      /* brand blue (logo text), darkened for contrast */
    --green-2: #0070b4;    /* logo blue */
    --green-soft: #e6f1f9;
    --gold: #e68a00;       /* logo orange */
    --gold-soft: #fdf2e1;
    --leaf: #34a03a;       /* logo green */
    --bg: #f5f8fb;
    --card: #ffffff;
    --ink: #1d2420;
    --muted: #5f6b65;
    --line: #e2ddd2;
    --bad: #b3412f;
    --bad-soft: #fbecea;
    --radius: 14px;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Cairo", Tahoma, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
  }
  .wrap { max-width: 680px; margin: 0 auto; padding: 0 16px 48px; }

  header.top {
    background: #fff;
    color: var(--ink);
    padding: 18px 16px 16px;
    text-align: center;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--gold), var(--leaf), var(--green-2)) 1;
  }
  header.top .logo { display: block; height: 64px; width: auto; max-width: 240px; margin: 0 auto 6px; }
  header.top .brand { display: none; }
  .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
  html, body { overflow-x: hidden; }
  .center { text-align: center; }
  .muted { color: var(--muted); font-size: 14px; }
  header.top h1 { margin: 4px 0 0; font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--green); }
  header.top .year { display: inline-block; margin-top: 6px; font-size: 12px; padding: 1px 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; }
  .note.shared { background: var(--gold-soft); }
  .comment .cl { color: #8a5300 !important; }
  footer img { height: 28px; width: auto; opacity: .85; display: block; margin: 0 auto 6px; }

  .progress { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 12px 0 10px; }
  .progress .meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
  .progress .bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
  .progress .bar span { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 99px; transition: width .3s ease; }

  .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; margin-top: 16px; }
  .card h2 { margin: 0 0 4px; font-size: 19px; color: var(--green); }
  .card p.lead { margin: 0; color: var(--muted); font-size: 14.5px; }

  .note { display: flex; gap: 10px; align-items: flex-start; background: var(--green-soft); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 14px; }
  .note b { color: var(--green); }
  .note svg { flex: 0 0 auto; margin-top: 3px; }

  label.field { display: block; font-weight: 600; margin: 18px 0 6px; }
  input[type=text], select, textarea {
    width: 100%; font: inherit; color: var(--ink); background: #fff;
    border: 1.5px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none;
  }
  input[type=text]:focus, select:focus, textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(0,112,180,.15); }
  textarea { min-height: 88px; resize: vertical; }

  .q { padding: 18px 0; border-top: 1px solid var(--line); }
  .q:first-of-type { border-top: 0; }
  .q .qt { font-weight: 600; margin-bottom: 10px; }
  .q .qt .num { color: var(--gold); margin-left: 6px; }
  .q.missing .qt { color: var(--bad); }
  .q.missing .opts label span { border-color: #e3b3aa; }
  .opts input.pos:checked + span { background: var(--leaf); border-color: var(--leaf); }

  .opts { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
  .opts.four { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 520px) { .opts.four { grid-template-columns: repeat(2, 1fr); } }
  .opts label { position: relative; cursor: pointer; }
  .opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .opts label span {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 46px; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 10px;
    background: #fff; font-size: 15px; transition: background .15s, border-color .15s, color .15s;
  }
  .opts input:focus-visible + span { box-shadow: 0 0 0 3px rgba(230,138,0,.35); }
  .opts input:checked + span { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
  .opts input.neg:checked + span { background: var(--bad); border-color: var(--bad); }

  .comment { display: none; margin-top: 12px; background: var(--gold-soft); border-radius: 10px; padding: 12px; }
  .comment.show { display: block; }
  .comment .cl { font-size: 14px; font-weight: 600; color: #7a5a22; margin-bottom: 6px; }
  .comment textarea { background: #fff; }
  .comment .opt { font-weight: 400; color: var(--muted); }

  .actions { display: flex; gap: 10px; margin-top: 20px; }
  button {
    font: inherit; font-weight: 700; border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer;
    background: var(--green); color: #fff; flex: 1; min-height: 50px;
  }
  button.ghost { background: transparent; color: var(--green); border: 1.5px solid var(--green); flex: 0 0 auto; }
  button[disabled] { opacity: .6; cursor: progress; }

  .msg { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; }
  .msg.show { display: block; }
  .msg.err { background: var(--bad-soft); color: var(--bad); }

  .screen { display: none; }
  .screen.active { display: block; }

  .done { text-align: center; padding: 36px 18px; }
  .done .icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; margin: 0 auto 12px; }
  .done h2 { color: var(--green); }

  footer { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 28px; }