/* ---------- Garantis brand (brandbook 2026) ----------
   blue #065BC6 · white · lime #D4FF3F (one action accent) · sky #A8E6FF ·
   coral #FD7468 · night #0B1A3A. Montserrat (Bold headings, Regular text). */
@font-face{font-family:'Montserrat';src:url('/fonts/montserrat-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('/fonts/montserrat-semibold.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('/fonts/montserrat-bold.woff2') format('woff2');font-weight:700 900;font-style:normal;font-display:swap;}
:root{
    --blue:#065BC6; --blue-deep:#04418F; --blue-dark:#0B1A3A; --blue-tint:#E9F0FB;
    --lime:#D4FF3F; --sky:#A8E6FF; --sky-tint:#E0F5FF; --coral:#FD7468; --coral-tint:#FFE3DF; --night:#0B1A3A;
    --green:#00B050; --green-tint:#E7F7EF;
    --red:#FF0000; --red-tint:#FFEAEA;
    --teal:#00A896; --teal-tint:#E3F7F5;
    --amber:#FFA500; --amber-tint:#FFF3E0;
    --ink:#0B1A3A; --muted:#4D5B7C; --faint:#8090AE;
    --line:#DCE5F3; --bg:#F2F6FC; --card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  /* everything felt oversized at 100% — 80% default zoom fits more on screen without needing to
     resize any individual element. (Chromium-only CSS property; that's fine here since this prototype
     is viewed in Chrome/Edge.) */
  html{zoom:0.8;}
  body{margin:0;font-family:'Montserrat',Arial,sans-serif;color:var(--ink);background:var(--bg);}
  h1,h2,h3,.brand-font{font-family:'Montserrat',Arial,sans-serif;}
  button{font-family:inherit;}
  /* html has zoom:.8, so 100vh only covers 80% of the window -- 125vh fills it */
  #shell{display:flex;min-height:125vh;}

  /* ---------- Sidebar (brand blue, white logo, lime = the one action accent) ---------- */
  #sidebar{width:272px;flex:0 0 272px;background:var(--blue);color:#fff;
    display:flex;flex-direction:column;padding:22px 16px;}
  .side-logo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:4px 8px 22px;}
  .side-logo img{width:150px;height:auto;display:block;}
  .side-logo span{font-size:11px;font-weight:600;color:var(--sky);letter-spacing:.08em;text-transform:uppercase;}
  .nav-group{border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:10px 8px 6px;margin-bottom:12px;}
  .nav-group:last-child{margin-bottom:0;}
  .nav-group.role-manager,.nav-group.role-hr{background:rgba(4,65,143,.45);border-color:rgba(168,230,255,.35);}
  .nav-group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--sky);
    font-weight:700;margin:2px 6px 8px;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;
    color:rgba(255,255,255,.88);font-size:13px;font-weight:600;margin-bottom:2px;line-height:1.3;}
  .nav-item:hover{background:rgba(255,255,255,.12);color:#fff;}
  .nav-item.active{background:var(--lime);color:var(--night);}
  .nav-item .ic{width:18px;text-align:center;font-size:14px;}
  .nav-item .nav-label{flex:1;}
  /* "action needed" signal next to a menu item */
  .nav-badge{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--coral);
    color:var(--night);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
  .nav-item.active .nav-badge{background:var(--night);color:var(--lime);}
  .nav-pill-badge{flex:0 0 auto;padding:4px 10px;border-radius:14px;background:var(--sky);
    color:var(--night);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
    text-align:center;line-height:1.35;}
  .nav-item.active .nav-pill-badge{background:var(--night);color:var(--sky);}
  .sidebar-footer{margin-top:auto;font-size:10.5px;color:rgba(255,255,255,.6);padding:10px 6px;line-height:1.5;}

  /* ---------- Main ---------- */
  #main{flex:1;min-width:0;display:flex;flex-direction:column;}
  #topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;
    border-bottom:1px solid var(--line);background:#fff;}
  #topbar .cycle{font-size:12.5px;color:var(--muted);font-weight:600;}
  #topbar .cycle b{color:var(--ink);}
  .user-switch{display:flex;align-items:center;gap:10px;}
  .user-switch select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;
    background:#fff;color:var(--ink);font-weight:600;}
  .role-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--blue-tint);
    color:var(--blue);text-transform:uppercase;letter-spacing:.03em;}
  #content{flex:1;padding:28px 32px 60px;max-width:1180px;width:100%;margin:0 auto;}
  /* HR tables have many columns -- use the whole screen width there */
  #content.wide{max-width:none;}
  .table-card{overflow-x:auto;}
  table.emp-table td{vertical-align:top;}
  table.emp-table td:nth-child(1){min-width:170px;}
  table.emp-table td:nth-child(2){min-width:130px;}
  table.emp-table .small-input{min-width:120px;}
  table.emp-table select[data-f=manager]{min-width:165px;}
  .row-actions{display:flex;flex-direction:column;gap:5px;align-items:stretch;}
  .row-actions .btn{padding:5px 9px;font-size:11.5px;white-space:nowrap;}

  /* ---------- Common components ---------- */
  .banner-goal{background:linear-gradient(135deg,var(--blue-tint),#fff);border-radius:16px;padding:18px 22px;
    display:flex;align-items:center;gap:14px;margin-bottom:22px;}
  .banner-goal .ic{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;font-size:17px;}
  .banner-goal p{margin:0;font-size:14px;color:var(--blue-dark);font-weight:600;line-height:1.45;}
  .banner-goal p small{display:block;font-weight:500;color:var(--muted);margin-top:3px;}

  .page-title{font-size:25px;font-weight:700;color:var(--ink);margin:0 0 4px;}
  .page-sub{font-size:13.5px;color:var(--muted);margin:0 0 22px;}

  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
    box-shadow:0 1px 2px rgba(16,24,40,.04);}
  .card + .card{margin-top:16px;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .grid2 > .card + .card{margin-top:0;}
  @media (max-width:860px){.grid2{grid-template-columns:1fr;}}

  .task-row{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;
    border-bottom:1px solid var(--line);}
  .task-row:last-child{border-bottom:none;}
  /* home screen: whole row is clickable through to the section, not just its button — a small
     hover/pointer affordance so that's discoverable */
  .task-row.clickable{cursor:pointer;border-radius:8px;}
  .task-row.clickable:hover{background:#F7F9FD;}
  .task-left{display:flex;align-items:center;gap:12px;}
  .task-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:15px;flex:0 0 auto;}
  .task-icon.pending{background:var(--amber-tint);color:var(--amber);}
  .task-icon.done{background:var(--green-tint);color:var(--green);}
  .task-title{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 2px;}
  .task-sub{font-size:12px;color:var(--muted);margin:0;}
  .btn{border:none;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;}
  .btn-primary{background:var(--blue);color:#fff;}
  .btn-primary:hover{background:var(--blue-deep);}
  .btn-secondary{background:#fff;border:1.5px solid var(--line);color:var(--ink);}
  .btn-secondary:hover{border-color:var(--blue);color:var(--blue);}
  .btn-ghost{background:transparent;border:none;color:var(--blue);font-weight:700;cursor:pointer;font-size:13px;}
  .btn:disabled{opacity:.45;cursor:not-allowed;}
  .badge-done{font-size:11px;font-weight:700;color:#0A7A3E;background:var(--green-tint);
    padding:4px 10px;border-radius:999px;}
  .task-right{display:flex;align-items:center;gap:10px;}
  .badge-action{font-size:10.5px;font-weight:700;color:#8a5a00;background:var(--amber-tint);padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;}

  /* ---------- Forms ---------- */
  .progress-bar-outer{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:22px;}
  .progress-bar-inner{height:100%;background:var(--blue);border-radius:99px;transition:width .2s;}
  .comp-block{border-bottom:1px solid var(--line);padding:20px 0;}
  /* wraps the 2 closing "strengths / growth areas" comments in a frame so it visually reads as a
     separate block from the per-competency scoring above it */
  .general-comments-frame{border:1.5px solid var(--blue);border-radius:12px;padding:2px 20px;margin:18px 0 2px;background:var(--blue-tint);}
  .general-comments-frame .comp-block{border-bottom:1px solid rgba(6,91,198,.18);}
  .general-comments-frame .comp-block:last-child{border-bottom:none;}
  .comp-block:last-of-type{border-bottom:none;}
  .comp-name{font-size:11px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.04em;
    margin:0 0 6px;}
  .comp-q{font-size:15.5px;font-weight:600;color:var(--ink);margin:0 0 12px;}
  .scale-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
  .scale-pill{padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
    cursor:pointer;font-size:13px;color:var(--ink);font-weight:600;}
  .scale-pill:hover{border-color:var(--blue);}
  .scale-pill.active{background:var(--blue);border-color:var(--blue);color:#fff;}
  textarea.comment{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;
    font-family:inherit;resize:vertical;min-height:56px;color:var(--ink);}
  textarea.comment:focus{outline:none;border-color:var(--blue);}
  .comment-label{font-size:11.5px;color:var(--muted);font-weight:600;margin:0 0 6px;}
  .field-hint{font-size:11px;color:var(--faint);font-weight:500;margin:-4px 0 8px;}
  /* per-competency "почему ты поставил(а) такую оценку?" — sits inside each comp-block, right after
     that competency's indicators, visually separated but not as heavy as the border between competencies */
  .comp-comment-block{margin-top:6px;padding-top:14px;border-top:1px dashed var(--line);}
  .comp-rationale{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}

  /* ---------- Modal (confirm-with-checkbox dialog) ---------- */
  #modalRoot:empty{display:none;}
  .modal-backdrop{position:fixed;inset:0;background:rgba(11,26,58,.55);display:flex;align-items:center;
    justify-content:center;z-index:1000;padding:20px;}
  .modal-box{background:#fff;border-radius:16px;padding:26px 28px;max-width:460px;width:100%;
    box-shadow:0 24px 60px rgba(15,31,61,.3);}
  .modal-box h3{margin:0 0 10px;font-size:16px;}
  .modal-box p{margin:0 0 16px;font-size:13.5px;color:var(--muted);line-height:1.5;}
  .modal-check-row{display:flex;gap:10px;align-items:flex-start;background:var(--blue-tint);border-radius:10px;
    padding:12px 14px;margin-bottom:18px;cursor:pointer;}
  .modal-check-row input{margin-top:2px;flex:0 0 auto;}
  .modal-check-row span{font-size:13px;color:var(--blue-dark);font-weight:600;line-height:1.45;}
  .modal-actions{display:flex;gap:10px;justify-content:flex-end;}
  .field-error{border-color:var(--red) !important;}
  .error-banner{background:var(--red-tint);color:#B00000;border-radius:10px;padding:12px 16px;font-size:13px;
    font-weight:600;margin-bottom:16px;}
  .anon-note{background:var(--blue-tint);color:var(--blue-dark);border-radius:10px;padding:12px 16px;
    font-size:12.5px;font-weight:600;margin-bottom:20px;}

  /* ---------- Results ---------- */
  .tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--line);}
  .tab{padding:10px 4px;margin-right:22px;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;
    border-bottom:2.5px solid transparent;}
  .tab.active{color:var(--blue);border-color:var(--blue);}
  .quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media (max-width:860px){.quad-grid{grid-template-columns:1fr;}}
  .quad-cell{border-radius:14px;padding:16px 18px;min-height:150px;}
  .quad-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
  .quad-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
  .quad-title{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
  .quad-desc{font-size:11.5px;color:var(--muted);margin:2px 0 12px;}
  .quad-chip{background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;
    display:flex;flex-direction:column;align-items:stretch;gap:7px;box-shadow:0 1px 2px rgba(16,24,40,.05);}
  .quad-chip:hover{outline:1.5px solid rgba(0,0,0,.08);}
  .quad-chip .cname{font-size:12.5px;font-weight:700;color:var(--ink);}
  .quad-chip .cstats{display:flex;gap:6px;flex-wrap:wrap;}
  .stat-chip{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:#F1F3F8;color:var(--muted);white-space:nowrap;}
  .quad-empty{font-size:11.5px;color:var(--faint);font-style:italic;}

  /* Unscoped (not just inside .detail-card) — bar() and scoreEditorRow() render .stat-row both in the
     interactive "Детально по компетенции" tab AND in the PDF export's competency-by-competency report,
     and it needs the same flex layout + spacing in both places. */
  .stat-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .stat-label{width:100px;flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--muted);}
  /* Compact 5-segment scale — replaces a long gradient bar. The scale is always exactly 5 discrete
     levels (Никогда…Всегда), so a full-width continuous bar wastes space and implies more precision
     than the data has; 5 short blocks read at a glance and keep every row the same, short width. */
  .seg5-track{flex:0 0 auto;display:flex;gap:4px;}
  .seg5{width:24px;height:11px;border-radius:4px;}
  .stat-val{width:78px;flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ink);text-align:left;}
  .detail-jumpnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line);}
  .jump-pill{border:1.5px solid var(--line);background:#fff;color:var(--muted);font-size:12px;font-weight:700;
    padding:7px 13px;border-radius:999px;cursor:pointer;font-family:inherit;}
  .jump-pill:hover{border-color:var(--blue);color:var(--blue);}
  .comment-group{margin-top:6px;}
  .comment-group h4{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--faint);
    font-weight:800;margin:16px 0 8px;}
  .comment-item{font-size:13px;color:var(--ink);background:#F7F9FD;border-radius:10px;padding:10px 12px;
    margin-bottom:6px;line-height:1.5;}
  .locked-note{font-size:12px;color:var(--faint);font-style:italic;background:#F7F9FD;border-radius:10px;
    padding:10px 12px;}
  table.raw{width:100%;border-collapse:collapse;font-size:13px;}
  table.raw th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--faint);font-weight:800;
    padding:8px 10px;border-bottom:1.5px solid var(--line);}
  table.raw td{padding:10px 10px;border-bottom:1px solid var(--line);}
  table.raw tr:last-child td{border-bottom:none;}
  /* Я / Руководитель / Коллеги (или Команда) columns — center-aligned; first column (competency/
     indicator name) stays left-aligned. tr.comp-head's single colspan=4 cell IS :first-child, so it's
     unaffected and stays left-aligned/bold as before. */
  table.raw th:not(:first-child), table.raw td:not(:first-child){text-align:center;}

  /* ---------- HR ---------- */
  table.hr-table{width:100%;border-collapse:collapse;font-size:13px;}
  table.hr-table th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--faint);font-weight:800;
    padding:10px;border-bottom:1.5px solid var(--line);}
  table.hr-table td{padding:11px 10px;border-bottom:1px solid var(--line);}
  .status-ok{color:var(--green);font-weight:700;}
  .status-part{color:var(--amber);font-weight:700;}
  .status-no{color:var(--faint);font-weight:600;}
  .comp-edit-row{display:grid;grid-template-columns:1.3fr 1.6fr 1.6fr 90px 34px;gap:8px;align-items:center;
    padding:10px 0;border-bottom:1px solid var(--line);}
  .comp-edit-row input[type=text]{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:7px 9px;
    font-size:12.5px;font-family:inherit;}
  .comp-edit-row label.chk{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap;}
  .icon-btn{border:none;background:var(--red-tint);color:#B00000;width:28px;height:28px;border-radius:8px;
    cursor:pointer;font-size:13px;}
  .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  .bar-row .lbl{width:230px;flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--ink);}
  .bar-row .track{flex:1;height:16px;background:#F1F3F8;border-radius:6px;display:flex;overflow:hidden;}
  .bar-row .seg-red{background:var(--red);height:100%;}
  .bar-row .seg-amber{background:var(--amber);height:100%;}
  .bar-row .pct{width:120px;flex:0 0 auto;font-size:11px;color:var(--muted);text-align:right;}
  .settings-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
  .settings-row label{font-size:13px;font-weight:600;color:var(--muted);width:230px;flex:0 0 auto;}
  .settings-row input{border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;}

  .demo-strip{background:var(--blue-dark);color:#fff;font-size:11.5px;text-align:center;padding:6px 10px;font-weight:600;}
  .demo-strip b{color:var(--lime);}

  .lvl-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;}
  .indicator-block{margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--line);}
  .indicator-block:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0;}
  .indicator-title{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 8px;}
  .pick-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer;}
  .pick-row:last-child{border-bottom:none;}
  .pick-row input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;}
  table.raw tr.comp-head td{background:#F7F9FD;font-weight:800;padding-top:14px;}
  table.raw td.ind-name{padding-left:24px;color:var(--muted);}

  .notice-banner{background:var(--green-tint);color:#0A6B36;border-radius:10px;padding:12px 16px;font-size:13px;
    font-weight:600;margin-bottom:16px;}
  .small-input{border:1.5px solid var(--line);border-radius:7px;padding:6px 8px;font-size:12px;font-family:inherit;width:100%;}
  select.small-input{background:#fff;}
  .nav-group-label:first-of-type{margin-top:0;}

  /* ---------- Guide ("Как проходит оценка") ---------- */
  .guide-hero{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-deep) 100%);color:#fff;border-radius:16px;
    padding:28px 30px;margin-bottom:20px;}
  .guide-hero h1{color:#fff;margin:0 0 8px;}
  .guide-hero p{color:var(--sky-tint);margin:0;font-size:13.5px;line-height:1.55;max-width:760px;}
  .tldr-box{background:var(--blue-tint);border:1.5px solid var(--blue);border-radius:14px;padding:16px 20px;margin-bottom:22px;}
  .tldr-box h3{margin:0 0 12px;font-size:11.5px;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;font-weight:800;}
  .tldr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;}
  @media (max-width:860px){.tldr-grid{grid-template-columns:1fr;}}
  .tldr-grid div{font-size:13px;color:var(--blue-dark);font-weight:600;line-height:1.5;padding-left:20px;position:relative;}
  .tldr-grid div:before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:800;}
  .guide-section{margin-bottom:16px;}
  .guide-section-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
  .guide-section-head .num{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto;}
  .guide-section-head h2{margin:0;font-size:16px;color:var(--blue-dark);}
  .guide-section-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted);}
  .dos-donts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
  @media (max-width:860px){.dos-donts{grid-template-columns:1fr;}}
  .do-card,.dont-card{border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.6;}
  .do-card{background:var(--green-tint);color:#0A6B36;}
  .dont-card{background:var(--red-tint);color:#B00000;}
  .do-card .lbl,.dont-card .lbl{display:block;font-weight:800;font-size:11px;text-transform:uppercase;
    letter-spacing:.04em;margin-bottom:8px;}
  .do-card ul,.dont-card ul{margin:0;padding-left:18px;}
  .do-card li,.dont-card li{margin-bottom:6px;}
  .do-card li:last-child,.dont-card li:last-child{margin-bottom:0;}
  .guide-list{margin:0;padding:0;list-style:none;}
  .guide-list li{padding:9px 0 9px 24px;position:relative;font-size:13px;line-height:1.6;color:var(--ink);
    border-bottom:1px solid var(--line);}
  .guide-list li:last-child{border-bottom:none;}
  .guide-list li:before{content:'';position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:50%;
    background:var(--blue);}
  .guide-list b{color:var(--blue-dark);}
  .risk-card{background:var(--amber-tint);border-left:3px solid var(--amber);border-radius:8px;
    padding:11px 14px;margin-bottom:8px;font-size:12.5px;color:#8a5a00;line-height:1.55;}
  .risk-card:last-child{margin-bottom:0;}
  .risk-card b{color:#6b4400;}
  .example-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
  @media (max-width:860px){.example-row{grid-template-columns:1fr;}}
  .example-bad{background:var(--red-tint);border-radius:9px;padding:10px 13px;font-size:12.5px;color:#8a2020;line-height:1.5;}
  .example-good{background:var(--green-tint);border-radius:9px;padding:10px 13px;font-size:12.5px;color:#0A6B36;line-height:1.5;}
  .example-bad b,.example-good b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}

  /* ---------- Print / PDF export ---------- */
  /* html2canvas is known to mis-render elements that are pushed off-screen with a large negative
     offset (position:fixed *or* absolute) — depending on the library version it can end up screenshotting
     the wrong region, or a partially-clipped/blank one, especially once the real page has been scrolled.
     That was the actual cause behind "PDF downloads empty" surviving an earlier off-screen-positioning
     fix. The reliable approach used here instead: while exporting, #printArea becomes a real, fully
     on-screen, fully laid-out full-page overlay (an opaque "Формируем PDF…" cover), so html2canvas is
     always capturing genuinely visible, normally-flowing content — no off-screen coordinates, no
     scroll-position math, nothing for it to get wrong. Hidden the rest of the time via display:none.*/
  #printArea{display:none;}
  #printArea.print-active{
    display:block;position:fixed;top:0;left:0;right:0;z-index:99999;
    background:#fff;padding:24px 0 60px;
  }
  #printArea .print-loading{
    width:750px;max-width:calc(100% - 48px);margin:0 auto 18px;text-align:center;
    font-size:13.5px;font-weight:700;color:var(--muted);
  }
  #printArea .print-inner{width:750px;max-width:calc(100% - 48px);margin:0 auto;background:#fff;padding:0 24px;}
  .indicator-block{page-break-inside:avoid;}
  /* fallback path only: if html2pdf failed (or never loaded), downloadResultsPdf() falls back to the
     browser's native print dialog ("Save as PDF" in the destination picker) — this @media print block
     is what makes that fallback show only the report and nothing else of the app shell. */
  .print-brand{display:flex;align-items:center;gap:12px;background:var(--blue);border-radius:10px;padding:12px 16px;margin-bottom:18px;}
  .print-brand img{width:110px;height:auto;display:block;}
  .print-brand span{color:var(--sky);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
  @media print{
    @page{size:A4;margin:12mm;}
    html{zoom:1;}
    #root,#modalRoot,#globalLoading{display:none !important;}
    #printArea{display:block !important;position:static;padding:0;}
    #printArea .print-inner{width:auto;max-width:none;padding:0;}
    #printArea .print-loading{display:none;}
    #printArea *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
    #printArea .card,#printArea .bar-row,#printArea .indicator-block,#printArea .quad-cell{break-inside:avoid;}
    html,body{background:#fff !important;}
    #printArea .grid2{grid-template-columns:1fr 1fr;gap:12px;}
    #printArea .grid2 + .grid2{margin-top:12px !important;}
    #printArea .card{padding:14px 16px;box-shadow:none;}
    #printArea .bar-row .lbl{width:180px;}
    #printArea .bar-row .pct{width:190px;font-size:10px;}
  }