:root {
    --text: #555; --text-dark: #333; --muted: #777;
    --line: #e4e9f0; --field: #eee; --field-line: #ccc;
    --teal: #18ba9b; --red: #e74c3c; --node: rgba(217, 83, 79, .8);
    --navy: #1f3c88; --crumb: #f9f9f9; --active: #ddd;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: #fff; color: var(--text-dark);
    font: 13px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif; }
  a { color: inherit; text-decoration: none; }

  /* layout: menu + page, page fills the rest of the width */
  .shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
  .menu { padding: 18px 15px 40px 22px; border-right: 1px solid var(--line);
    position: sticky; top: 0; height: 100vh; overflow-y: auto; color: var(--text); }
  .page { padding: 20px 28px 60px; min-width: 0; }

  /* menu */
  .brand { font-size: 38px; font-weight: 400; color: var(--text); line-height: 1; margin: 6px 0 8px; }
  .yearform { margin: 0; }
  .year { width: 100%; height: 30px; font-size: 12px; border: 1px solid var(--field-line); background: #fff; color: var(--text-dark); }
  .icons { display: flex; justify-content: space-between; margin: 22px 4px 14px; }
  .icons a { width: 26px; height: 26px; color: var(--text); }
  .icons svg { width: 24px; height: 24px; fill: currentColor; }
  .m-sec { font-weight: 700; padding: 8px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
  .m-sec::after { content: "▲"; font-size: 9px; }
  .m-sub { font-weight: 700; text-decoration: underline; padding: 8px 0 4px 15px; }
  .m-item { display: flex; align-items: flex-start; gap: 6px; padding: 8px 6px 8px 15px; }
  .m-item::before { content: ""; flex: 0 0 13px; height: 13px; margin-top: 4px; border-radius: 50%;
    background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M4 2.5 6.5 5 4 7.5' stroke='white' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center/9px no-repeat; }
  .m-item.on { background: var(--active); }
  .m-item.off { color: #aaa; }

  /* page head */
  .crumb { background: var(--crumb); padding: 12px 14px; display: flex; gap: 14px; align-items: center; }
  .crumb svg { width: 16px; height: 16px; fill: var(--text-dark); }
  .crumb b { font-weight: 700; }
  .titlebar { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px dotted var(--line); margin-top: 16px; }
  .titlebar h1 { font-size: 18px; font-weight: 400; color: var(--text); margin: 0; padding-bottom: 5px; border-bottom: 2px solid var(--teal); }
  .titlebar .tab-r { font-size: 15px; font-weight: 700; color: var(--navy); padding-bottom: 5px; border-bottom: 2px solid var(--navy); }

  /* versions */
  .showall { display: flex; gap: 6px; align-items: center; color: var(--muted); font-weight: 700; font-size: 11px; margin: 10px 0 4px; }
  .versions { display: flex; align-items: flex-end; border-bottom: 2px solid var(--teal); }
  .versions a { padding: 5px 15px; display: flex; gap: 5px; align-items: center; }
  .versions a.on { background: var(--teal); color: #fff; }
  .versions svg { width: 10px; height: 10px; fill: currentColor; }
  .versions .create { margin-left: auto; padding: 5px 10px; color: var(--text-dark); }

  .eff { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; font-size: 11px; }
  .eff label { font-weight: 700; color: var(--muted); width: 90px; text-align: center; }
  .eff input { width: 200px; height: 30px; border: 1px solid var(--field-line); background: var(--field); text-align: center; font-size: 12px; }

  h2 { font-size: 18px; font-weight: 400; color: var(--text); margin: 26px 0 8px; display: flex; gap: 8px; align-items: center; }
  .plus { color: var(--teal); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }

  /* table + chart side by side */
  .split { display: grid; grid-template-columns: minmax(420px, 520px) 1fr; gap: 30px; align-items: start; }
  table.grid { border-collapse: collapse; width: 100%; }
  .grid th { font-size: 12px; font-weight: 700; color: var(--text-dark); padding: 5px; border: 1px solid var(--line); text-align: center; }
  .grid td { border: 1px solid var(--line); padding: 4px; }
  .grid td.act { text-align: center; white-space: nowrap; width: 70px; }
  .grid select { width: 100%; height: 30px; font-size: 12px; border: 1px solid var(--field-line); background: var(--field); color: var(--text-dark); }
  .move, .del { display: inline-block; width: 16px; height: 16px; vertical-align: middle; margin: 0 3px; cursor: pointer; }
  .move svg { fill: var(--text-dark); } .del svg { fill: var(--red); }

  .tree { display: flex; flex-direction: column; align-items: center; padding-top: 14px; overflow-x: auto; }
  .tree ul { list-style: none; margin: 0; padding: 18px 0 0; display: flex; justify-content: center; position: relative; }
  .tree li { position: relative; padding: 18px 3px 0; display: flex; flex-direction: column; align-items: center; }
  .tree > ul { padding-top: 0; }
  .tree > ul > li { padding-top: 0; }
  .tree li::before, .tree li::after { content: ""; position: absolute; top: 0; height: 18px; border-top: 1px solid var(--node); }
  .tree li::before { right: 50%; width: 50%; } .tree li::after { left: 50%; width: 50%; border-left: 1px solid var(--node); }
  .tree li:first-child::before, .tree li:last-child::after { border-top: 0; }
  .tree li:only-child::before { display: none; } .tree li:only-child::after { border-top: 0; }
  .tree > ul > li::before, .tree > ul > li::after { display: none; }
  .tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 18px; border-left: 1px solid var(--node); }
  .node { background: var(--node); color: #fff; font-weight: 700; border-radius: 4px; padding: 5px 8px; min-width: 170px; max-width: 200px; text-align: center; font-size: 12px; }
  .tree ul.many > li > .node { min-width: 104px; max-width: 150px; }
  .node svg { width: 10px; height: 10px; fill: #fff; float: left; margin-top: 4px; }

  /* leadership */
  .lead { max-width: 760px; }
  .lead td.grp { font-weight: 700; background: #fafafa; }
  .lead td.asp { padding-left: 18px; }

  /* sign off */
  .signoff { max-width: 520px; margin-top: 10px; }
  .signoff td:first-child { width: 150px; font-weight: 700; }
  .signoff label { display: flex; gap: 8px; align-items: center; }
  .save { margin: 26px 0 0; background: var(--teal); color: #fff; border: 0; padding: 8px 34px; font-size: 14px; cursor: pointer; }

  /* ── shared controls (measured from the reference screens) ── */
  select, input[type=text], textarea { font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--text-dark); }
  .grid select, .fld { height: 30px; border: 1px solid var(--field-line); background: var(--field); border-radius: 0; padding: 0 6px; }
  .fld-white { height: 30px; border: 1px solid var(--field-line); background: #fff; border-radius: 0; padding: 0 8px; width: 100%; }
  textarea.fld-white { height: 80px; padding: 6px 8px; resize: vertical; }
  input[type=checkbox], input[type=radio] { width: 14px; height: 14px; accent-color: var(--teal); margin: 0; }
  .btn { background: var(--teal); color: #fff; border: 0; border-radius: 0; padding: 4px 14px; font-size: 14px; cursor: pointer; }
  .btn:hover { background: #149e84; }
  .btn-big { padding: 8px 34px; }
  .linkbtn { color: #337ab7; font-size: 13px; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: none; border: 0; padding: 0; }
  .linkbtn svg { width: 14px; height: 14px; fill: currentColor; }
  .linkbtn:hover { text-decoration: underline; }
  .chip { font-size: 12px; padding: 1px 6px; border: 1px solid var(--field-line); border-radius: 4px; background: #fff; cursor: pointer; }
  .chip.on { background: #ffe773; border-color: #adadad; }
  .pct { background: #cff6cf; text-align: center; padding: 3px 0; font-size: 13px; line-height: 1.3; }
  .secbar td { background: #33518b; color: #fff; letter-spacing: 1px; padding: 5px 8px; font-weight: 700; cursor: pointer; }
  .secbar .badge { background: #ecf0f1; color: #777; border-radius: 20px; font-size: 12px; padding: 1px 6px; margin-left: 6px; font-weight: 700; letter-spacing: 0; }
  .secbar .caret { float: right; }
  table.list { border-collapse: collapse; width: 100%; }
  .list th { font-size: 12px; font-weight: 700; padding: 5px; border: 1px solid #ddd; text-align: center; vertical-align: middle; }
  .list td { font-size: 12px; padding: 5px; border: 1px solid #ddd; vertical-align: middle; }
  .list td.c { text-align: center; }
  .tlink { color: var(--teal); cursor: pointer; }
  .tlink:hover { text-decoration: underline; }
  /* pop-up */
  .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; align-items: flex-start; justify-content: center; padding-top: 70px; z-index: 50; }
  .modal-bg.open { display: flex; }
  .modal { width: 600px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.3); }
  .modal-h { padding: 15px; border-bottom: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; }
  .modal-h h3 { margin: 0; font-size: 18px; font-weight: 400; color: var(--text); }
  .modal-h button { background: none; border: 0; font-size: 22px; color: #999; cursor: pointer; line-height: 1; }
  .modal-b { padding: 15px; display: grid; gap: 12px; }
  .modal-b label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
  .modal-b .note { font-size: 11px; color: var(--muted); }
  .modal-f { padding: 0 15px 15px; text-align: center; }
  .pill-tip { position: absolute; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 8px rgba(0,0,0,.15); padding: 10px 12px; font-size: 12px; z-index: 40; display: none; min-width: 220px; }

  /* ── app shell additions (not in the mockup) ── */
  .icons form { margin: 0; }
  .icons button { width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
  .icons button svg { width: 24px; height: 24px; fill: currentColor; }
  .hint { color: var(--muted); font-size: 12px; }
  .flash { padding: 8px 14px; margin-top: 12px; font-size: 12px; }
  .flash.ok { background: #cff6cf; }
  .flash.bad { background: #fde8e6; color: #a94442; }

  /* sign-in, forms, users */
  .login { max-width: 340px; margin: 12vh auto 0; padding: 0 16px; }
  .stack { display: grid; gap: 12px; max-width: 360px; margin-top: 12px; }
  .stack label, .inline-form label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
  .stack label .fld-white { margin-top: 4px; }
  .inline-form { display: inline-flex; gap: 10px; align-items: flex-end; margin: 0 6px 0 0; }
  .inline-form .fld-white { margin-top: 4px; width: 220px; }
  td .inline-form { align-items: center; }
  table.kv { max-width: 520px; margin-top: 10px; }
  .kv td:first-child { width: 170px; font-weight: 700; }
  .list tr.off td { color: #999; }
  .list td.act { white-space: nowrap; }
  code#temp-password { font-size: 15px; letter-spacing: .5px; user-select: all; }

  /* firm profile, keyword library */
  .tasks { margin: 8px 0 0 18px; padding: 0; line-height: 1.8; }
  .list code { font-size: 12px; }

  /* staff listing */
  .titlebar .tools { display: flex; gap: 18px; padding-bottom: 6px; }
  .filters { display: flex; gap: 8px; margin: 12px 0 10px; }
  .filters a.chip { text-decoration: none; color: var(--text-dark); }
  .pill { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 8px; border-radius: 10px; white-space: nowrap; }
  .pill.red { background: #fde8e6; color: #a94442; }
  .pill.amber { background: #fff3c4; color: #8a6d3b; }
  .pill.grey { background: #ecf0f1; color: #777; }
  .grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 18px; margin-top: 12px; max-width: 1100px; }
  .grid-form label { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
  .grid-form label .fld-white, .grid-form label .fld { margin-top: 4px; width: 100%; }
  .grid-form .form-actions { grid-column: 1 / -1; display: flex; gap: 18px; align-items: center; }
  table.wide { max-width: 900px; }

  /* document versions and sign-off */
  a.showall { text-decoration: none; width: fit-content; cursor: pointer; }
  .tick { display: inline-block; width: 15px; height: 15px; box-sizing: border-box; padding: 0; border: 1px solid #adadad; background: #fff; border-radius: 0; position: relative; vertical-align: middle; cursor: pointer; }
  .tick.on { background: var(--teal); border-color: var(--teal); }
  .tick.on::after { content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .tick.off { background: var(--field); cursor: default; }
  .versions .vstate { font-size: 10px; font-weight: 400; opacity: .85; }
  .versions .vnone { padding: 5px 15px; color: var(--muted); }
  .versions .vform { margin-left: auto; display: flex; gap: 8px; align-items: center; padding-bottom: 3px; }
  .versions .vform label { font-size: 11px; font-weight: 700; color: var(--muted); }
  .versions .vform .fld-white { width: 110px; text-align: center; }
  .versions button.create { background: var(--teal); color: #fff; border: 0; padding: 7px 14px; font-size: 12px; cursor: pointer; }
  .eff .lbl { font-weight: 700; color: var(--muted); }
  .so-form { display: flex; gap: 8px; align-items: center; margin: 0; }
  .so-form button.tick { margin: 0; }
  .so-form .tick { flex: 0 0 15px; }

  /* years */
  .banner { padding: 8px 14px; margin-top: 12px; font-size: 12px; font-weight: 700; }
  .banner.catchup { background: #ffe773; color: var(--text-dark); }
  .banner.closed { background: var(--field); color: var(--text-dark); }
  .blockers { margin: 6px 0 0 18px; padding: 0; }
  .roll-form { flex-wrap: wrap; gap: 14px; margin: 8px 0; }
  .roll-form .check { display: flex; gap: 6px; align-items: center; font-weight: 400; color: var(--text-dark); font-size: 12px; }
  .roll-form button[disabled] { background: #bbb; cursor: not-allowed; }

  /* organisation structure */
  button.plus { background: none; border: 0; padding: 0 4px; font-family: inherit; cursor: pointer; }
  .rowbtn { display: inline-block; width: 22px; height: 22px; padding: 3px; margin: 0 1px; border: 0; background: none; vertical-align: middle; cursor: pointer; }
  .rowbtn svg { width: 14px; height: 14px; fill: var(--text-dark); display: block; }
  .rowbtn.del svg { fill: var(--red); }
  .rowbtn[disabled] { cursor: default; opacity: .25; }
  .rowbtn:not([disabled]):hover { background: var(--field); }
  .grid td.act { width: 90px; }
  .lead th.rolecol { width: 260px; }

  /* questionnaire */
  .qn { margin-top: 10px; }
  .qn th.idx, .qn td.idx { width: 60px; text-align: center; font-weight: 700; }
  .qn th.ans, .qn td.ans { width: 300px; }
  .qn th.sug, .qn td.sug { width: 430px; }
  .qn td.sug { font-size: 12px; color: var(--muted); }
  .qn tr.grouphead td { background: #33518b; color: #fff; font-weight: 700; font-size: 13px; padding: 5px 8px; }
  .qn td.qtext { padding: 6px 8px; }
  .chip.amber { background: #ffe773; border-color: #e6c84a; color: var(--text-dark); cursor: default; white-space: nowrap; }
  .stop { margin-top: 4px; padding: 4px 8px; background: #fde8e6; color: #a94442; font-weight: 700; font-size: 12px; }
  .banner.confirm { background: #fff3c4; color: #8a6d3b; }
  textarea.remark { width: 100%; max-width: 900px; height: 90px; }

  /* manual: policies list, library, policy page */
  .listhead { display: flex; justify-content: space-between; align-items: flex-end; margin: 12px 0 10px; }
  .listhead .lbl { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
  .listhead a.chip { text-decoration: none; color: var(--text-dark); }
  .pcts { display: grid; grid-template-columns: repeat(3, 110px); gap: 6px; }
  .list .w70 { width: 70px; } .list .w110 { width: 110px; } .list .w120 { width: 120px; }
  .secbar a.secl { color: #fff; text-decoration: none; display: block; }
  .secbar.plain td { cursor: default; }
  .modal .x { background: none; border: 0; font-size: 22px; color: #999; line-height: 1; text-decoration: none; }
  .modal form { margin: 0; }
  .papertools { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
  .papertools .inline-form { margin: 0; }
  .linkbtn.danger { color: #a94442; }
  .manual { max-width: 980px; line-height: 1.55; margin: 12px 0; }
  .manual h2 { display: block; font-size: 15px; font-weight: 700; margin: 18px 0 6px; color: var(--text-dark); }
  .manual h3 { font-size: 13px; font-weight: 700; margin: 12px 0 4px; color: var(--text-dark); }
  .manual p { margin: 6px 0; }
  .manual ul, .manual ol { margin: 6px 0 6px 20px; padding: 0; }
  .refs { margin: 6px 0 12px 20px; padding: 0; }
  textarea.mdtext { width: 100%; max-width: 980px; height: 520px; padding: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.5; resize: vertical; }

  /* appendix forms */
  .appx-head { max-width: 640px; }
  .adesc { max-width: 980px; line-height: 1.55; margin: 6px 0 12px; }
  .aform { max-width: 1180px; }
  .aform .fh { font-size: 14px; font-weight: 700; color: #fff; background: #33518b; margin: 16px 0 0; padding: 5px 8px; letter-spacing: .5px; }
  .aform .fp { margin: 8px 0; max-width: 980px; line-height: 1.55; }
  .aform .fq { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 6px 18px; align-items: start; padding: 7px 8px; border-bottom: 1px solid var(--line); }
  .aform .fq.wide { grid-template-columns: minmax(0, 1fr); }
  .aform .fq.bad { background: #fdf3f2; }
  .aform .fl label { font-weight: 400; }
  .aform .fl .hint { margin-top: 2px; }
  .aform .req { color: var(--red); font-weight: 700; }
  .aform .fa select, .aform .fa input[type=text], .aform .fa textarea { width: 100%; }
  .aform textarea.fld-white { height: 90px; }
  .aform .opts { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
  .aform .opts.col { flex-direction: column; align-items: flex-start; gap: 5px; }
  .aform .opt { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 12px; font-weight: 400; color: var(--text-dark); }
  .aform .opt .tick, .aform .decl .tick { cursor: default; flex: 0 0 15px; }
  .aform .decl { display: inline-flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--text-dark); }
  .aform .decl input { margin-top: 3px; flex: 0 0 14px; }
  .aform .ansbox { min-height: 30px; border: 1px solid var(--field-line); background: var(--field); padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .aform .ansbox.tall { min-height: 70px; }
  .aform .err { grid-column: 1 / -1; color: #a94442; font-size: 12px; font-weight: 700; }
  .aform .stop { margin-top: 4px; }
  .aform table.atable { width: 100%; }
  .aform .atable td { padding: 3px; vertical-align: top; }
  .aform.ro .atable td { min-height: 30px; padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .rcpt { margin: 6px 0; }
  .rcpt .opt { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; margin-right: 18px; }
  .sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .list .w130 { width: 130px; }

  /* FRAP */
  .frap .w50 { width: 50px; } .frap .w60 { width: 60px; } .frap .w80 { width: 80px; } .frap .w100 { width: 100px; }
  .list tr.obj td { background: #ffe773; font-weight: 700; }
  .list tr.obj .ref, .frap-head .ref { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 6px; }
  .neq { display: inline-block; font-weight: 700; color: #8a6d3b; background: #fff3c4; border-radius: 3px; padding: 0 4px; cursor: help; }
  .lvl-High { color: #a94442; font-weight: 700; } .lvl-Moderate { color: #8a6d3b; font-weight: 700; } .lvl-Low { color: #3c763d; }
  table.frap-head { max-width: 1100px; width: 100%; }
  .frap-head td:first-child { width: 170px; }
  table.frap-form { max-width: 1100px; width: 100%; }
  .frap-form td:first-child { width: 170px; font-weight: 700; vertical-align: top; padding-top: 8px; }
  .frap-form td { padding: 4px 0; }
  .frap-form select.fld-white { width: 220px; }
  .frap-form input.fld-white { width: 220px; }
  .frap-form textarea.fld-white { width: 100%; height: 70px; }
  .frap-form textarea.fld-white.tall { height: 130px; }
  .reads { margin-top: 6px; padding: 6px 8px; background: #f7f7f7; border: 1px solid var(--line); }
  .pickbox { max-height: 230px; overflow-y: auto; border: 1px solid var(--field-line); background: #fff; padding: 6px 8px; columns: 2; column-gap: 24px; }
  .pick { break-inside: avoid; padding: 1px 0; font-weight: 400; }
  .pick label { font-weight: 400; display: inline; }
  .matrix th, .matrix td { text-align: center; width: 25%; }
  .list .ind { display: inline-block; width: 18px; }
  tr.off td { color: #999; }

  /* clients */
  .chip.static { cursor: default; background: #fff; }
  .pill.wrap { white-space: normal; display: block; margin: 2px 0; padding: 1px 8px; border-radius: 4px; }
  .pctbox { display: inline-block; min-width: 50px; padding: 2px 6px; background: #cff6cf; text-align: center; }
  .grid-form label.checkrow { display: flex; gap: 8px; align-items: center; align-self: end; font-weight: 400; color: var(--text-dark); font-size: 12px; }
  .flash.warn { background: #fff3c4; color: #8a6d3b; }
  .flash.note { background: #ecf0f1; color: #555; }
  .flaglist .flash { margin-top: 6px; }
  .list td.r { text-align: right; }
  .list tr.subtotal td { background: #f4f6f8; font-weight: 700; }
  .inline-form.addrow { margin: 12px 0 18px; flex-wrap: wrap; }
  .inline-form.addrow .fld { margin-top: 4px; }
  .grid-form .ro { display: block; margin-top: 4px; font-weight: 400; color: var(--text-dark); font-size: 12px; line-height: 30px; }

  /* template circulation, my forms */
  .pct.inl { display: inline-block; min-width: 44px; padding: 1px 6px; }
  .circ .w150 { width: 150px; } .circ .w100 { width: 100px; } .circ .w90 { width: 90px; } .circ .w60 { width: 60px; }
  .list .w90 { width: 90px; } .list .w100 { width: 100px; } .list .w150 { width: 150px; }
  .list tr.cur td { background: #fffbe0; }
  .secbar.plain td { cursor: default; }
  table.kv.wide { max-width: 760px; }
  .grid-form .wide-field { grid-column: 1 / -1; }
  .grid-form .wide-field .lbl { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
  .icons a.withbadge { position: relative; display: inline-block; }
  .icons .count { position: absolute; top: -6px; right: -8px; min-width: 16px; padding: 0 4px; border-radius: 10px; background: rgba(217,83,79,.9); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }
  .form-actions { display: flex; gap: 18px; align-items: center; margin: 14px 0; }

  /* registers */
  .list .w200 { width: 200px; } .list .w260 { width: 260px; }
  .regpick { max-width: 1180px; margin: 10px 0; }
  .regpick select { max-width: 520px; }
  .respbox { max-width: 980px; min-height: 70px; border: 1px solid var(--field-line); background: var(--field); padding: 6px 8px; white-space: pre-wrap; overflow-wrap: anywhere; }

  /* sign selected, dashboard */
  .list .w30 { width: 30px; }
  .bulkform { margin: 0; }
  .bulkbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; }
  .bulkbar .hint { margin-right: 8px; }
  .pct.refused { background: #fde8e6; color: #a94442; }

  /* dashboard */
  .dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 12px; align-items: start; }
  .dash.withtodo { grid-template-columns: minmax(0, 1fr) 420px; }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
  .card, .todo { border: 1px solid var(--line); background: #fff; }
  .card-h { margin: 0; display: flex; gap: 10px; align-items: center; background: #33518b; color: #fff; font-size: 14px; font-weight: 700; padding: 6px 10px; }
  .card-h a { color: #fff; }
  .card-h .cl { display: inline-block; min-width: 22px; text-align: center; background: #fff; color: #33518b; border-radius: 3px; }
  .card-b { padding: 12px; display: grid; gap: 8px; }
  .card .big { font-size: 22px; color: var(--text-dark); }
  .card .big.muted { color: #aaa; font-size: 16px; }
  .crow { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 12px; }
  progress.prog { width: 100%; height: 14px; accent-color: var(--teal); }
  .todo-row { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
  .todo-row:last-child { border-bottom: 0; }
  .doclist .w60 { width: 60px; }

  /* training listing, CPE */
  .pill.green { background: #cff6cf; color: #2d6a2d; }
  a.pilllink { text-decoration: none; }
  .pct.partial { background: #fff3c4; color: #8a6d3b; }
  .topics { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .topics .checkrow { align-self: auto; }
  .gaps { margin: 6px 0 0 18px; padding: 0; }
  .list .w70 { width: 70px; } .list .w110 { width: 110px; }
  .list .fld-white.hrs { width: 80px; margin-top: 0; }
  table.cpe { max-width: 900px; }

  /* monitoring, evaluation, archive */
  .finding { border: 1px solid var(--line); background: #fff; margin: 12px 0; padding: 8px 12px 12px; max-width: 1180px; }
  .finding legend { font-weight: 700; padding: 0 6px; display: flex; gap: 8px; align-items: center; }
  .finding textarea.fld-white { width: 100%; height: 64px; }
  .finding .respbox { min-height: 0; margin-top: 4px; font-weight: 400; }
  .concl { display: grid; gap: 6px; margin: 8px 0; max-width: 980px; }
  .concl label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--text-dark); font-size: 12px; }
  table.fnd { max-width: 1180px; }
  .archive-actions { display: flex; gap: 14px; align-items: center; margin: 12px 0; }

  /* year check */
  .chk-h { font-size: 14px; margin: 18px 0 6px; }
  table.chk .chk-area { vertical-align: top; font-weight: 700; background: #f6f6f6; }
  textarea.chk-plain { width: 100%; max-width: 1180px; height: 200px; padding: 6px 8px; margin-bottom: 8px; }

  /* AI help */
  .ai-panel { border: 1px solid var(--line); background: #fafafa; margin: 14px 0; padding: 6px 12px 10px; max-width: 1180px; }
  .ai-panel h3 { margin: 6px 0; font-size: 13px; }
  .ai-panel h4 { margin: 10px 0 4px; font-size: 12px; }
  .ai-panel textarea.ai-instruction { width: 100%; height: 48px; margin: 4px 0 6px; }
  .ai-off { font-weight: 700; color: #8a6d3b; margin: 4px 0; }
  .ai-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0; }
  .ai-text { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); padding: 6px 8px; max-height: 360px; overflow: auto; font-weight: 400; }
  .ai-text.ai-new { background: #f1fbf8; border-color: #18ba9b; }
  .ai-actions { display: flex; gap: 14px; align-items: center; margin: 8px 0 4px; }
  .meter { max-width: 640px; margin: 10px 0 14px; }
  progress.meter-bar { width: 100%; height: 14px; accent-color: #18ba9b; -webkit-appearance: none; appearance: none; border: 1px solid var(--field-line); background: #eee; }
  progress.meter-bar::-webkit-progress-bar { background: #eee; }
  progress.meter-bar::-webkit-progress-value { background: #18ba9b; }
  progress.meter-bar::-moz-progress-bar { background: #18ba9b; }
  progress.meter-bar.hot::-webkit-progress-value { background: #d9534f; }
  progress.meter-bar.hot::-moz-progress-bar { background: #d9534f; }
  table.kv-prices { max-width: 480px; }

  /* Bring in the previous system: counts and file lists */
  table.kv.counts { max-width: 760px; }
  .kv.counts td:first-child { width: auto; font-weight: 400; }
  .kv.counts td.n { width: 90px; text-align: right; font-weight: 700; }
  table.kv.files td:first-child { width: 360px; font-weight: 400; word-break: break-all; }