:root{
    --ink:#1f3a5f; --ink-2:#2d4f7c; --text:#1d2733; --muted:#5d6b7a; --line:#d5dce5;
    --bg:#eef1f5; --paper:#ffffff; --gold:#f0c95a;
    --t-head:#fff2c6; --t-p1:#dde8f6; --t-p2:#dcefd3; --t-p3:#fbe3d3; --t-sum:#fde9b8;
    --ok:#2e7d4f; --warn:#b45309; --bad:#b42318;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:'Sarabun',Tahoma,'Leelawadee UI',sans-serif;font-size:15px;line-height:1.55;color:var(--text);background:var(--bg)}
  button,input,select,textarea{font:inherit;color:inherit}
  :focus-visible{outline:2px solid var(--ink-2);outline-offset:2px}
  .hidden{display:none!important}

  .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--ink);color:#fff}
  .brand{display:flex;align-items:center;gap:12px}
  .seal{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--gold)}
  .brand .t1{font-weight:700;font-size:17px;line-height:1.2}
  .brand .t2{font-size:13px;opacity:.75}
  .topbar nav{display:flex;gap:8px}

  .btn{border:1px solid transparent;border-radius:6px;padding:7px 14px;cursor:pointer;background:#fff;font-weight:600;white-space:nowrap}
  .btn.primary{background:var(--gold);color:#1f2a37}
  .btn.primary:hover{background:#f5d67c}
  .btn.ink{background:var(--ink);color:#fff}
  .btn.ink:hover{background:var(--ink-2)}
  .btn.line{background:transparent;border-color:var(--line)}
  .btn.line:hover{background:#f6f8fb}
  .topbar .btn.line{color:#fff;border-color:rgba(255,255,255,.35)}
  .topbar .btn.line:hover{background:rgba(255,255,255,.1)}
  .btn.small{padding:4px 10px;font-size:14px}
  .btn.danger{color:var(--bad)}
  .btn:disabled{opacity:.5;cursor:default}
  .link{border:0;background:none;padding:0;color:var(--ink-2);cursor:pointer;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px}

  .banner{background:#fff7e0;border-bottom:1px solid #eed9a0;padding:8px 20px;font-size:14px;color:#7a5a00}
  main{max-width:1240px;margin:0 auto;padding:20px 16px 110px}

  .sheet{background:var(--paper);border:1px solid var(--line);border-radius:4px;margin-bottom:16px}
  .band{padding:9px 16px;font-weight:700;border-bottom:1px solid var(--line)}
  .band.head{background:var(--t-head)} .band.p1{background:var(--t-p1)} .band.p2{background:var(--t-p2)} .band.p3{background:var(--t-p3)}
  .pad{padding:14px 16px}

  .form-title{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;padding:16px;background:var(--t-head);border-bottom:1px solid var(--line)}
  .form-title h1{margin:0;font-size:22px;line-height:1.3;color:var(--ink)}
  .form-title h1 small{display:block;font-size:14px;font-weight:500;color:var(--muted)}
  .docid{font-size:13px;color:var(--muted);text-align:right}

  .tabs{display:inline-flex;border:1px solid var(--ink);border-radius:6px;overflow:hidden;margin-bottom:8px}
  .tabs button{border:0;background:#fff;padding:6px 16px;cursor:pointer;font-weight:600;color:var(--ink)}
  .tabs button.on{background:var(--ink);color:#fff}

  .grid{display:grid;gap:12px}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:860px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:540px){.g4,.g3,.g2{grid-template-columns:1fr}.form-title{grid-template-columns:1fr}.docid{text-align:left}}

  label.f{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted)}
  label.f input,label.f select,label.f textarea,.gh input,.inp{border:1px solid var(--line);border-radius:5px;padding:7px 9px;background:#fff;font-size:15px;color:var(--text)}
  textarea{resize:vertical}

  .group{border-top:1px solid var(--line)}
  .group:first-of-type{border-top:0}
  .gh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;background:#f7f9fc}
  .gh .gtitle{flex:1 1 420px;font-weight:600}
  .gh .gname{flex:1 1 420px;font-weight:600;color:var(--ink)}
  .gh .gw{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
  .gh .gw input{width:64px;text-align:center}
  .chip{font-size:13px;padding:2px 9px;border-radius:999px;background:#e8edf3;color:var(--muted);font-weight:600}
  .chip.ok{background:#e3f2e8;color:var(--ok)}
  .chip.warn{background:#fdf0dc;color:var(--warn)}

  .tbl-wrap{overflow-x:auto}
  table.items{width:100%;border-collapse:collapse;min-width:1160px}
  table.items th{font-size:13px;font-weight:600;color:var(--muted);background:#fbfcfd;border-bottom:1px solid var(--line);padding:6px 4px;text-align:center;line-height:1.3}
  table.items td{border-bottom:1px solid #edf0f4;padding:5px 4px;vertical-align:top}
  table.items input,table.items select,table.items textarea{width:100%;border:1px solid transparent;border-radius:4px;padding:5px 6px;background:transparent}
  table.items input:hover,table.items textarea:hover,table.items select:hover{border-color:var(--line)}
  table.items input:focus,table.items textarea:focus,table.items select:focus{border-color:var(--ink-2);background:#fff}
  table.items td.ro{padding:8px 6px}
  table.items td.c{text-align:center;padding-top:9px}
  .c-no{width:30px;text-align:center;color:var(--muted);padding-top:10px!important}
  .c-text{min-width:300px}
  .c-num{width:66px} .c-m{width:150px} .c-crit{width:84px} .c-res{width:86px} .c-lv{width:112px} .c-sc{width:72px} .c-x{width:34px}
  input.num,input.crit{text-align:center}
  input.res{background:#fffbea!important;border-color:#efdc93!important}
  td.k{text-align:center;padding-top:9px;color:#8a96a3;font-size:14px}
  td.k.hit{background:var(--ink);color:#fff;font-weight:700;border-radius:4px}
  .score{text-align:center;font-weight:700;color:var(--ink);padding-top:10px!important}
  .icon-btn{border:0;background:transparent;cursor:pointer;color:#9aa6b2;font-size:16px;padding:6px}
  .icon-btn:hover{color:var(--bad)}
  .meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:3px;padding:0 6px}
  .code{font-size:12px;font-weight:600;color:var(--ink-2);background:#e8eef6;border-radius:3px;padding:0 6px}
  .tag{display:inline-block;font-size:12px;color:var(--warn);font-weight:600}
  table.items tfoot td{background:var(--t-head);font-weight:700;border-bottom:0;padding:7px 4px;text-align:center}
  table.items tfoot td.lbl{text-align:right;padding-right:10px}
  .gfoot{padding:8px 16px 12px;display:flex;gap:8px;flex-wrap:wrap}
  .help{padding:8px 16px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);background:#fcfcfd}

  .totalline{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:10px 16px;background:#f7f9fc;border-top:1px solid var(--line);font-weight:600}
  .totalline.grand{background:var(--t-sum)}

  .legend{display:grid;gap:6px}
  .legend div{display:flex;gap:10px;align-items:baseline}
  .legend b{width:26px;height:26px;border-radius:4px;display:inline-grid;place-items:center;background:#e8edf3;color:var(--ink)}
  .legend .on b{background:var(--ink);color:#fff}
  .result{display:flex;align-items:center;gap:18px}
  .result .big{font-size:40px;font-weight:700;color:var(--ink);line-height:1}
  .result .grade{font-size:40px;font-weight:700;width:64px;height:64px;min-width:64px;max-height:64px;aspect-ratio:1;line-height:1;border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none}
  .result .grade.pending{border-style:dashed;color:#b7c1cc;border-color:#b7c1cc}
  .muted{color:var(--muted);font-size:14px}

  .signbox{border:1px dashed var(--line);border-radius:6px;padding:12px}
  .signbox h4{margin:0 0 8px;font-size:15px;color:var(--ink)}

  .dock{position:fixed;left:0;right:0;bottom:0;z-index:15;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(31,58,95,.07)}
  .dock-in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .meter{flex:1 1 280px;display:flex;align-items:center;gap:12px;min-width:0}
  .meter .bar{flex:1;height:10px;border-radius:5px;background:#e8edf3;overflow:hidden;position:relative}
  .meter .bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);transition:width .25s}
  .meter .txt{font-size:14px;white-space:nowrap}
  .dock .acts{display:flex;gap:8px;flex-wrap:wrap}

  .listhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
  .listhead h2{margin:0;font-size:19px;color:var(--ink)}
  .filters{display:flex;gap:8px;flex-wrap:wrap}
  .filters input,.filters select{border:1px solid var(--line);border-radius:5px;padding:6px 9px;background:#fff}
  .filters input{width:240px}
  .counts{display:flex;gap:22px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);flex-wrap:wrap}
  .counts b{font-size:20px;color:var(--ink);margin-right:4px}
  table.list{width:100%;border-collapse:collapse;min-width:820px}
  table.list th{text-align:left;font-size:13px;color:var(--muted);font-weight:600;padding:8px 12px;border-bottom:1px solid var(--line)}
  table.list td{padding:10px 12px;border-bottom:1px solid #edf0f4;vertical-align:top}
  table.list tr:hover td{background:#f8fafc}
  .nm{font-weight:600;color:var(--ink);cursor:pointer}
  .sub{font-size:13px;color:var(--muted)}
  .badge{font-size:13px;padding:2px 9px;border-radius:999px;font-weight:600;background:#eceff3;color:#55606d}
  .badge.agreed{background:#dde8f6;color:var(--ink)}
  .badge.done{background:#e3f2e8;color:var(--ok)}
  .empty{padding:48px 16px;text-align:center;color:var(--muted)}
  .empty p{margin:0 0 14px}

  /* หน้าต่างซ้อน */
  .modal-bg{position:fixed;inset:0;z-index:100;background:rgba(20,32,50,.45);display:grid;place-items:center;padding:16px}
  .modal{background:#fff;border-radius:8px;width:min(820px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.25)}
  .modal-h{display:flex;align-items:start;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--t-head);border-radius:8px 8px 0 0}
  .modal-h h3{margin:0;font-size:18px;color:var(--ink);line-height:1.35}
  .modal-h .sub{margin-top:2px}
  .modal-b{padding:14px 18px;overflow:auto}
  .modal-f{padding:10px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
  .close{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:2px 6px}
  dl.info{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;margin:0}
  dl.info dt{color:var(--muted);font-size:14px}
  dl.info dd{margin:0}
  @media (max-width:540px){dl.info{grid-template-columns:1fr}}
  .lvl{display:grid;grid-template-columns:118px 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .lvl > div,.lvl .row > div{padding:8px 10px;border-top:1px solid #edf0f4;font-size:14px}
  .lvl > .h{background:#f7f9fc;font-weight:600;color:var(--muted);border-top:0}
  .lvl .ln{font-weight:700;color:var(--ink)}
  .lvl .row{display:contents}
  .lvl .row.pick > div{cursor:pointer}
  .lvl .row.pick:hover > div{background:#f3f7fc}
  .lvl .row.sel > div{background:#e6eef9}
  .lvl .row.exp .ln::after{content:'ระดับที่คาดหวัง';display:block;font-size:12px;font-weight:600;color:var(--warn)}
  @media (max-width:640px){.lvl{grid-template-columns:1fr}.lvl .h:not(:first-child){display:none}}
  .pick-list{display:grid;gap:6px}
  .pick-list label{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;cursor:pointer}
  .pick-list label:hover{background:#f7f9fc}
  .pick-list label.dis{opacity:.5;cursor:default}
  .pick-list .nm2{font-weight:600}
  .found{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:#f7f9fc;margin-top:8px}
  .or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:16px 0}
  .or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

  #toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:6px;font-size:14px;z-index:130;opacity:0;pointer-events:none;transition:opacity .2s}
  #toast.show{opacity:1}
  #toast.err{background:var(--bad)}
  #loading{position:fixed;inset:0;background:rgba(238,241,245,.6);z-index:120;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;font-weight:600;color:var(--ink)}
  #loading::before{content:"";width:38px;height:38px;border-radius:50%;border:4px solid rgba(124,92,250,.25);border-top-color:#7C5CFA;animation:spin .8s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  body.dark #loading{background:rgba(8,12,24,.28);color:#fff}
  #loading{font-size:15px}
  #loading::after{content:"";position:absolute;width:220px;height:130px;border-radius:18px;background:rgba(15,23,41,.92);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);z-index:-1}
  body:not(.dark) #loading::after{background:rgba(255,255,255,.95)}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  .who{display:flex;flex-direction:column;align-items:flex-end;font-size:13px;line-height:1.3;color:#c9d4e2;margin-right:6px}
  .who b{color:#fff;font-weight:600}
  .who .test{color:var(--gold);font-weight:600}
  .lockbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 16px;border:1px solid #eed9a0;background:#fff7e0;border-radius:4px;margin-bottom:16px;font-size:14px;color:#7a5a00}
  .ack{font-size:13px;color:var(--ok);font-weight:600}
  .blocker{max-width:560px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px;text-align:center}
  .ro input:disabled,.ro select:disabled,.ro textarea:disabled{background:transparent;color:var(--text);opacity:1;border-color:transparent}
  .wm{display:flex;align-items:center;gap:8px;padding-right:14px;margin-right:2px;border-right:1px solid rgba(255,255,255,.25)}
  .wm svg{flex:none}
  .wm-t{font-family:var(--logo-font,'Montserrat'),'Sarabun',sans-serif;font-weight:800;font-size:21px;letter-spacing:.16em;color:#fff;line-height:1}
  .p-brand{font-family:var(--logo-font,'Montserrat'),sans-serif;font-weight:800;letter-spacing:.12em}
  @media (max-width:640px){.brand .t2{display:none}.wm-t{font-size:17px}}
  .login{max-width:400px;margin:48px auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:28px 28px 20px;display:grid;gap:12px}
  .login h2{margin:0;color:var(--ink);font-size:20px}
  .login-brand{display:flex;align-items:center;gap:10px;padding:14px 16px;margin:-28px -28px 6px;background:var(--ink);border-radius:8px 8px 0 0}
  .login-brand .wm{border-right:0;padding-right:0}
  .lgerr{color:var(--bad);font-size:14px;min-height:20px}
  .who .lk{border:0;background:none;color:#fff;font-size:12px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
  .dtabs{display:flex;gap:6px;flex-wrap:wrap}
  .dtabs button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 14px;font-weight:600;cursor:pointer;color:var(--ink)}
  .dtabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .dhead{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
  .dhead h2{margin:0;font-size:21px;color:var(--ink)}
  .kcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
  @media (max-width:900px){.kcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .kc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:grid;gap:6px;align-content:start}
  .kc .lb{font-size:14px;color:var(--muted)}
  .kc .v{font-size:32px;font-weight:700;color:var(--ink);line-height:1.1}
  .kc .v small{font-size:14px;font-weight:500;color:var(--muted);margin-left:6px}
  .bar{height:8px;border-radius:4px;background:#e3e8ee;overflow:hidden}
  .bar i{display:block;height:100%;background:var(--ink)}
  .stack{display:flex;height:14px;border-radius:4px;overflow:hidden;background:#e3e8ee}
  .stack i{display:block;height:100%}
  .gleg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted)}
  .gleg b{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px}
  .dgrid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
  .dgrid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:980px){.dgrid,.dgrid2{grid-template-columns:1fr}}
  .dcard{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .dcard h3{margin:0;font-size:17px;color:var(--ink)}
  .dcard .hd{padding:14px 18px;border-bottom:1px solid var(--line);display:grid;gap:2px}
  .drow{padding:12px 18px;border-bottom:1px solid #edf0f4}
  .utbl{width:100%;border-collapse:collapse;min-width:640px}
  .utbl th{font-size:13px;color:var(--muted);font-weight:600;text-align:left;padding:9px 12px;background:#f7f9fc;border-bottom:1px solid var(--line)}
  .utbl td{padding:11px 12px;border-bottom:1px solid #edf0f4;vertical-align:middle}
  .flag{display:inline-block;font-size:12px;font-weight:600;padding:1px 8px;border-radius:999px;background:#fdf0dc;color:var(--warn);margin:1px 2px 1px 0}
  .flag.ok{background:#e3f2e8;color:var(--ok)}
  .range{position:relative;height:10px;border-radius:5px;background:#eef1f5}
  .range i{position:absolute;top:0;height:10px;border-radius:5px;background:#9fb3cc}
  .range b{position:absolute;top:-3px;width:3px;height:16px;background:var(--ink);border-radius:2px}
  .heat{width:100%;border-collapse:separate;border-spacing:4px}
  .heat th{font-size:12px;color:var(--muted);font-weight:600;padding:4px;text-align:center;vertical-align:bottom}
  .heat th:first-child{text-align:left}
  .heat td{text-align:center;padding:10px 4px;border-radius:4px;font-weight:700;font-size:14px}
  .heat td:first-child{text-align:left;font-weight:600;background:none}
  .note{padding:12px 18px;font-size:13px;color:var(--muted)}
  .gpill{display:inline-block;min-width:26px;text-align:center;padding:1px 8px;border-radius:999px;font-weight:700;font-size:13px}
  .ev{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin-top:4px;padding:0 6px}
  .evf{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:#eef3f1;border:1px solid #d3e0db;border-radius:4px;padding:1px 4px 1px 6px;max-width:260px}
  .evf button{border:0;background:none;cursor:pointer;padding:0 2px;font-size:12px;color:var(--ink-2)}
  .evf .nm3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .evmiss{font-size:12px;font-weight:600;color:var(--warn);background:#fdf0dc;border-radius:4px;padding:1px 6px}
  .evbox{border:1px solid var(--line);border-radius:6px;padding:12px 16px;margin:12px 16px;background:#fcfcfd}
  .evbox .miss{display:inline-block;font-size:13px;margin:3px 6px 0 0;padding:1px 8px;border-radius:999px;background:#fdf0dc;color:var(--warn);cursor:pointer;border:0}
  #printArea{display:none}
  @media print{
    @page{size:A4 portrait;margin:9mm}
    body{background:#fff;font-size:10pt}
    .topbar,.banner,main,.dock,#toast,#loading,#modal{display:none!important}
    #printArea{display:block}
    .p-t{width:100%;border-collapse:collapse;margin-bottom:-1px;table-layout:fixed}
    .p-t td,.p-t th{border:1px solid #444;padding:2px 3px;font-size:8.5pt;line-height:1.3;vertical-align:middle;font-weight:400;word-wrap:break-word}
    .p-t .b{font-weight:700} .p-t .c{text-align:center} .p-t .r{text-align:right}
    .p-y{background:var(--t-head)!important} .p-bl{background:var(--t-p1)!important} .p-gr{background:var(--t-p2)!important}
    .p-pe{background:var(--t-p3)!important} .p-o{background:var(--t-sum)!important} .p-sub{background:#f2f2f2!important}
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .p-t tr{page-break-inside:avoid}
    .rp{font-family:'Sarabun',Tahoma,sans-serif;font-size:10.5pt;color:#1d2733}
    .rp .head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--gold);padding-bottom:6pt;margin-bottom:10pt}
    .rp .brand{font-family:var(--logo-font,'Montserrat'),sans-serif;font-weight:800;letter-spacing:.14em;color:var(--ink);font-size:14pt}
    .rp h1{font-size:17pt;color:var(--ink);margin:2pt 0}
    .rp h2{font-size:12.5pt;color:var(--ink);border-bottom:1.5pt solid var(--ink);padding-bottom:2pt;margin:14pt 0 6pt;page-break-after:avoid}
    .rp h3{font-size:11pt;margin:8pt 0 4pt;color:var(--ink)}
    .rp table{width:100%;border-collapse:collapse;margin:3pt 0 8pt}
    .rp th,.rp td{border:.6pt solid #b9c3cf;padding:2.5pt 5pt;font-size:9pt;text-align:left;vertical-align:top}
    .rp th{background:#eef2f6!important;font-weight:700}
    .rp .n{text-align:right;white-space:nowrap}
    .rp .c{text-align:center}
    .rp .boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:6pt;margin:6pt 0}
    .rp .box{border:.6pt solid #b9c3cf;border-radius:4pt;padding:6pt 8pt}
    .rp .box span{font-size:8.5pt;color:#5d6b7a}
    .rp .box b{display:block;font-size:17pt;color:var(--ink);line-height:1.2}
    .rp .bar{height:7pt;background:#e3e8ee!important;border-radius:2pt;overflow:hidden}
    .rp .bar i{display:block;height:100%}
    .rp ul{margin:4pt 0 4pt 14pt;padding:0} .rp li{margin:2pt 0}
    .rp .muted{color:#5d6b7a;font-size:8.5pt}
    .rp .pb{page-break-before:always}
    .rp tr,.rp .box,.rp li{page-break-inside:avoid}
    .rp .sign{display:grid;grid-template-columns:1fr 1fr;gap:20pt;margin-top:18pt}
    .rp .sign div{border-top:.6pt dotted #555;padding-top:4pt;text-align:center;font-size:9pt}
  }

  /* ===================== ธีมสีสัน: สเปกตรัมเกรด ===================== */
  :root{
    --gA:#12B76A; --gB:#2E90FA; --gC:#F5B614; --gD:#F97316; --gE:#E5484D;
    --bg:#F3F5FA; --line:#dfe4ee; --head:'Prompt','Sarabun',Tahoma,sans-serif;
    --spectrum:linear-gradient(90deg,var(--gA) 0 20%,var(--gB) 20% 40%,var(--gC) 40% 60%,var(--gD) 60% 80%,var(--gE) 80% 100%);
  }
  body{background:var(--bg)}
  .topbar{background:linear-gradient(115deg,var(--ink) 0%,var(--ink-2) 100%);box-shadow:0 6px 18px -10px rgba(15,23,42,.6)}
  .topbar{padding-bottom:14px}
  .topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--spectrum)}
  .flag{white-space:nowrap}
  .range i{background:color-mix(in srgb,var(--gB) 45%,#fff)}
  .range b{background:var(--ink)}
  .brand .t1,.dhead h2,.listhead h2,.dcard h3,.kc .v,.form-title h1,.login h2,.modal h3{font-family:var(--head);letter-spacing:0}
  .btn{border-radius:10px}
  .btn.primary{background:var(--gold);color:#1a1f2b;box-shadow:0 6px 14px -8px var(--gold)}
  .btn.primary:hover{filter:brightness(1.06);background:var(--gold)}
  .btn.ink{box-shadow:0 6px 14px -9px var(--ink)}
  .sheet,.dcard,.kc,.card{border-radius:14px;border-color:#e3e8f1;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -18px rgba(16,24,40,.35)}
  .kc{position:relative;overflow:hidden;padding-top:20px}
  .kc::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--gB)}
  .kcards .kc:nth-child(1)::before{background:var(--gA)} .kcards .kc:nth-child(2)::before{background:var(--gB)}
  .kcards .kc:nth-child(3)::before{background:var(--gC)} .kcards .kc:nth-child(4)::before{background:var(--gD)}
  .kc .v{font-weight:700}
  .bar{border-radius:99px;background:#e8edf5}
  .bar i{border-radius:99px;background:linear-gradient(90deg,var(--ink),var(--gB))}
  .stack{border-radius:99px;height:12px}
  .utbl th{background:#f5f7fb}
  .utbl tbody tr:hover td{background:#fafbfe}
  .gpill{border-radius:8px;min-width:30px;padding:2px 9px}
  .badge{border-radius:99px;white-space:nowrap}
  .dtabs button{border-radius:10px}
  .dtabs button.on{background:var(--ink);box-shadow:0 6px 14px -9px var(--ink)}
  .legend b{border-radius:8px}
  .legend div[data-g="A"] b{background:var(--gA);color:#fff} .legend div[data-g="B"] b{background:var(--gB);color:#fff}
  .legend div[data-g="C"] b{background:var(--gC);color:#1a1f2b} .legend div[data-g="D"] b{background:var(--gD);color:#fff} .legend div[data-g="E"] b{background:var(--gE);color:#fff}
  .result .grade{border-width:4px}
  .result .grade.gA{border-color:var(--gA);color:var(--gA)} .result .grade.gB{border-color:var(--gB);color:var(--gB)}
  .result .grade.gC{border-color:var(--gC);color:#b7860b} .result .grade.gD{border-color:var(--gD);color:var(--gD)} .result .grade.gE{border-color:var(--gE);color:var(--gE)}

  /* ---------- หน้าเข้าสู่ระบบ ---------- */
  main:has(#viewLogin:not(.hidden)){max-width:none;padding:0}
  .lg-wrap{display:grid;grid-template-columns:1.15fr .85fr;min-height:calc(100vh - 64px);max-width:none}
  .lg-hero{position:relative;overflow:hidden;color:#fff;padding:56px 56px 40px;display:flex;flex-direction:column;gap:22px;
    background:radial-gradient(1200px 500px at 110% 120%,color-mix(in srgb,var(--gold) 35%,transparent),transparent 60%),linear-gradient(150deg,var(--ink) 0%,var(--ink-2) 100%)}
  .lg-hero .wm{border:0;padding:0}
  .lg-hero h1{font-family:var(--head);font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.18;margin:8px 0 0;max-width:15em}
  .lg-hero p{margin:0;font-size:17px;opacity:.86;max-width:32em}
  .lg-meter{display:flex;align-items:flex-end;gap:14px;height:170px;margin-top:6px;padding:0 4px;border-bottom:1px solid rgba(255,255,255,.25)}
  .lg-meter div{flex:1;max-width:72px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
  .lg-meter i{display:block;width:100%;border-radius:12px 12px 4px 4px;height:var(--h);transform-origin:bottom;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
  .lg-meter span{font-family:var(--head);font-weight:700;font-size:18px}
  .lg-meter div:nth-child(1) i{background:var(--gA);animation-delay:.05s} .lg-meter div:nth-child(2) i{background:var(--gB);animation-delay:.15s}
  .lg-meter div:nth-child(3) i{background:var(--gC);animation-delay:.25s} .lg-meter div:nth-child(4) i{background:var(--gD);animation-delay:.35s}
  .lg-meter div:nth-child(5) i{background:var(--gE);animation-delay:.45s}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .lg-feat{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:4px 0 0;padding:0;list-style:none;font-size:15px}
  .lg-feat li{display:flex;gap:10px;align-items:flex-start;opacity:.92}
  .lg-feat li::before{content:"";flex:none;width:10px;height:10px;margin-top:7px;border-radius:3px;background:var(--c)}
  .lg-side{display:flex;align-items:center;justify-content:center;padding:36px 20px;background:var(--bg)}
  .lg-side .login{margin:0;width:100%;max-width:420px;border-radius:18px;border:1px solid #e3e8f1;box-shadow:0 30px 60px -30px rgba(16,24,40,.35);padding:30px}
  .lg-side .login-brand{display:none}
  .login h2{font-size:24px}
  .demo-card{border-radius:14px;padding:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,#fff),#fff);border:1px solid color-mix(in srgb,var(--gold) 55%,#fff);display:grid;gap:10px}
  .demo-card .row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
  .demo-card code{font-family:var(--head);font-size:17px;font-weight:600;color:var(--ink)}
  .demo-card .k{font-size:13px;color:var(--muted)}
  @media (max-width:900px){.lg-wrap{grid-template-columns:1fr}.lg-side{order:-1;padding:22px 14px}.lg-hero{padding:32px 22px}.lg-meter{height:110px}.lg-feat{grid-template-columns:1fr}}
  @media (prefers-reduced-motion:reduce){.lg-meter i{animation:none}}
  @page{size:A4;margin:10mm}
  @media print{
    .fit1{page-break-inside:avoid;break-inside:avoid}
    .fit1.compact .p-t th,.fit1.compact .p-t td{font-size:7.6pt!important;padding:1.5px 3px!important;line-height:1.22!important}
    .fit1.compact .p-t{margin-bottom:3pt!important}
    .fit1.compact2 .p-t th,.fit1.compact2 .p-t td{font-size:7pt!important;padding:1px 2.5px!important;line-height:1.15!important}
    .fit1.compact .rp th,.fit1.compact .rp td{font-size:8pt!important;padding:2px 4px!important}
    .fit1.compact .rp h2{margin:8pt 0 4pt!important}
    .fit1 + .fit1{page-break-before:always;break-before:page}
    .fit1 .pb{page-break-before:auto!important;break-before:auto!important}
    .side,.ai-fab,.ai-panel,.app-credit,.mnav,.lg-credit{display:none!important}
    body.with-side{padding-left:0!important}
    body{background:#fff!important;color:#1d2733!important}
  }
  .lg-credit{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.22);font-size:14px;opacity:.9}
  .lg-credit a,.app-credit a{color:inherit;font-weight:700}
  .app-credit{text-align:center;font-size:13px;color:var(--muted);padding:18px 16px 96px;border-top:1px solid var(--line);background:#fff}
  body:has(#viewLogin:not(.hidden)) .app-credit{display:none}

  /* ===================== โหมดมือถือ ===================== */
  .mnav{display:none}
  @media (max-width:760px){
    body{font-size:15px}
    main{padding:12px 10px 96px}
    .topbar{padding:10px 14px 14px}
    .brand .t2,#topnav{display:none!important}
    .brand .t1{font-size:14px}
    .wm-t{font-size:17px}
    .banner{font-size:12.5px;padding:6px 12px}
    .mnav:not(.hidden){display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;
      border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px rgba(16,24,40,.35);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
    .mnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:600;color:var(--muted);padding:4px 2px;cursor:pointer;border-radius:10px}
    .mnav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .mnav button.on{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,#fff)}
    body:has(#dock:not(.hidden)) .mnav{display:none}
    .app-credit{padding-bottom:96px}

    /* หน้ารายการ: การ์ดรายคน */
    .listhead{flex-direction:column;align-items:stretch;gap:10px}
    .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .filters input{grid-column:1/-1}
    table.list{min-width:0}
    table.list thead{display:none}
    table.list,table.list tbody{display:block}
    table.list tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:14px;margin:0 0 10px;border:1px solid #e3e8f1;border-radius:14px;background:#fff}
    table.list td{border:0!important;padding:0!important;background:none!important}
    .filters input,.filters select{width:100%;min-height:42px}
    table.list td:nth-child(1){grid-column:1;grid-row:1;font-size:16px}
    table.list td:nth-child(4){grid-column:2;grid-row:1;text-align:right}
    table.list td:nth-child(2),table.list td:nth-child(5){grid-column:1/-1}
    table.list td:nth-child(3),table.list td:nth-child(6){display:none}
    table.list td:nth-child(7){grid-column:1/-1;white-space:normal!important;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
    table.list td:nth-child(7) .btn{flex:1 1 30%;padding:9px 6px}

    /* แบบฟอร์ม: ตารางกลายเป็นการ์ด */
    .form-title{grid-template-columns:1fr}
    .docid{text-align:left}
    .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr!important}
    .group .tbl-wrap{overflow:visible}
    table.items{min-width:0!important}
    table.items thead{display:none}
    table.items,table.items tbody,table.items tfoot{display:block}
    table.items tbody tr{display:grid;grid-template-columns:repeat(10,1fr);gap:8px 6px;padding:12px;margin:10px;border:1px solid #e3e8f1;border-radius:14px;background:#fff;box-shadow:0 6px 16px -14px rgba(16,24,40,.4)}
    table.items td{border:0!important;padding:0!important;min-width:0}
    table.items td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
    table.items td:nth-child(1){display:none}
    table.items td:nth-child(2){grid-column:1/-1;font-size:15.5px;font-weight:600}
    table.items input,table.items select,table.items textarea{border:1px solid var(--line)!important;background:#fff;min-height:40px;font-size:16px;border-radius:10px}
    table.items.ap td:nth-child(3),table.items.ap td:nth-child(4){grid-column:span 3;text-align:left!important;padding-top:0!important;font-size:16px}
    table.items.ap td:nth-child(5){grid-column:span 4}
    table.items.ap td:nth-child(5) input{border:2px solid var(--gold)!important;font-weight:700;text-align:center}
    table.items.ap td:nth-child(6),table.items.ap td:nth-child(7){grid-column:span 5;text-align:left!important;font-size:16px}
    table.items.ap td:nth-child(n+8):nth-child(-n+12){grid-column:span 2;text-align:center;font-size:12px;border-radius:8px!important;padding:4px 2px!important;background:#f5f7fb}
    table.items.ap td:nth-child(13),table.items.ap td:nth-child(14){grid-column:span 5;text-align:left!important;font-size:16px}
    table.items.ap td:nth-child(14){font-weight:700;color:var(--ink)}
    table.items.ag td:nth-child(3),table.items.ag td:nth-child(4){grid-column:span 3}
    table.items.ag td:nth-child(5){grid-column:span 4}
    table.items.ag td:nth-child(n+6):nth-child(-n+10){grid-column:span 2}
    table.items.ag td:nth-child(11){grid-column:1/-1;text-align:right}
    table.items tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin:4px 10px 12px;padding:10px 12px;border-radius:12px;background:var(--t-sum)}
    table.items tfoot td{background:none!important;padding:0!important}
    table.items tfoot td:empty{display:none}
    .ev{padding:0}
    .gh{flex-wrap:wrap;gap:6px}
    .legend{grid-template-columns:1fr}
    .result{flex-wrap:wrap}

    /* แถบล่างของแบบฟอร์ม */
    .dock-in{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));gap:6px}
    .dock .meter{width:100%}
    .dock .acts{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
    .dock .acts .btn{flex:none;padding:9px 12px}
    .dock .acts #btnSave{order:-1}

    /* แดชบอร์ด เงินเดือน หน้าต่าง */
    .dhead{flex-direction:column;align-items:stretch}
    .kcards{grid-template-columns:1fr 1fr!important;gap:10px}
    .kc{padding:14px}
    .kc .v{font-size:24px!important}
    .modal-bg{align-items:flex-end;padding:0}
    .modal{width:100%!important;max-width:none!important;max-height:92vh;border-radius:18px 18px 0 0}
  }

  /* ===================== v3: โครงหน้าจอ แถบเมนูซ้าย ===================== */
  .side{display:none}
  @media (min-width:980px){
    body.with-side .app-credit{display:none}
    body.with-side{padding-left:288px}
    body.with-side .side:not(.hidden){display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:288px;z-index:40;overflow-y:auto;
      background:#0E1526;color:#DCE3F0;border-right:1px solid #1E2A44}
    body.with-side #topnav .btn{display:none}
    body.with-side .topbar .brand .wm{display:none}
    body.with-side .dock{left:288px}
    body.with-side main{max-width:1320px}
  }
  .side-brand{padding:18px 18px 12px;border-bottom:1px solid #1E2A44}
  .side-brand .wm{border:0;padding:0}
  .side-brand .org{font-size:13px;color:#93A1BC;margin-top:6px;line-height:1.35}
  .ws-box{margin:12px;border:1px solid #22304D;border-radius:16px;padding:6px;display:grid;gap:4px;background:#111B30}
  .ws{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid transparent;background:none;color:#DCE3F0;border-radius:12px;padding:8px 12px;cursor:pointer}
  .ws svg,.side-nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .ws b{display:block;font-size:14.5px;font-family:var(--head)}
  .ws span{display:block;font-size:12.5px;color:#93A1BC}
  .ws:hover{background:#16223C}
  .ws.on{background:linear-gradient(135deg,#1A2A4D,#18233D);border-color:#3B5BA8;box-shadow:inset 0 0 0 1px rgba(99,140,255,.15)}
  .side-nav{display:grid;gap:2px;padding:4px 12px 12px}
  .sn-h{font-size:12px;font-weight:600;color:#7D8BA6;padding:14px 10px 4px}
  .side-nav button{display:flex;gap:12px;align-items:center;border:0;background:none;color:#DCE3F0;font-size:14.5px;padding:10px 12px;border-radius:10px;cursor:pointer;text-align:left}
  .side-nav button:hover{background:#16223C}
  .side-nav button.on{background:linear-gradient(90deg,rgba(124,92,250,.28),rgba(59,130,246,.12));color:#fff;font-weight:600}
  .ai-dot{width:9px;height:9px;border-radius:50%;background:#F04438;margin-left:auto;box-shadow:0 0 0 3px rgba(240,68,56,.2)}
  .ai-dot.ok{background:#12B76A;box-shadow:0 0 0 3px rgba(18,183,106,.2)}
  .side-credit{margin-top:auto;padding:14px 18px 18px;border-top:1px solid #1E2A44;font-size:12.5px;line-height:1.6;color:#93A1BC}
  .side-credit a{color:#C7D2FE;font-weight:700}

  /* ===================== ผู้ช่วย AI ===================== */
  .ai-fab{position:fixed;right:22px;bottom:22px;z-index:80;border:0;border-radius:99px;padding:13px 20px;font-family:var(--head);font-size:16px;font-weight:600;color:#fff;cursor:pointer;
    background:linear-gradient(135deg,#7C5CFA,#3B82F6);box-shadow:0 14px 30px -12px rgba(91,92,250,.8)}
  body:has(#dock:not(.hidden)) .ai-fab{bottom:92px}
  .ai-panel{position:fixed;right:22px;bottom:22px;z-index:90;width:min(440px,calc(100vw - 24px));height:min(640px,calc(100vh - 40px));display:flex;flex-direction:column;
    background:#0F1729;color:#E7ECF5;border:1px solid #26324D;border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);overflow:hidden}
  .ai-panel.hidden{display:none}
  .ai-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(135deg,#2A2160,#16285A);font-family:var(--head)}
  .ai-h .close{color:#fff}
  .ai-log{flex:1;overflow-y:auto;padding:14px;display:grid;gap:10px;align-content:start}
  .ai-msg{padding:10px 13px;border-radius:14px;line-height:1.6;font-size:14.5px;white-space:pre-wrap;max-width:92%}
  .ai-msg.u{justify-self:end;background:#3B4FA8;color:#fff;border-bottom-right-radius:4px}
  .ai-msg.a{justify-self:start;background:#18223A;border:1px solid #26324D;border-bottom-left-radius:4px}
  .ai-msg.a.wait{opacity:.7}
  .ai-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 8px}
  .ai-chips button{border:1px solid #33416A;background:#141E36;color:#C7D2FE;border-radius:99px;padding:5px 11px;font-size:13px;cursor:pointer}
  .ai-in{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid #26324D}
  .ai-in textarea{flex:1;resize:none;border:1px solid #33416A;background:#0B1222;color:#E7ECF5;border-radius:12px;padding:8px 10px;font:inherit}
  .ai-btn{border:0;border-radius:10px;padding:8px 14px;font-weight:600;color:#fff;cursor:pointer;background:linear-gradient(135deg,#7C5CFA,#3B82F6)}
  .ai-btn:disabled{opacity:.6}
  .aiset{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
  .aiset .card2{border-radius:18px;padding:22px;border:1px solid var(--line);background:#fff}
  .aiset ol{list-style:none;margin:10px 0 0;padding:0;display:grid}
  .aiset li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .aiset li:last-child{border-bottom:0}
  .aiset .n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-weight:700;background:var(--ink);color:#fff}
  .aiset h3{margin:0 0 4px;font-family:var(--head)}
  .pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 12px;font-size:13px;font-weight:700}
  .pill.bad{background:#FEE4E2;color:#B42318} .pill.ok{background:#D1FADF;color:#05603A}
  @media (max-width:900px){.aiset{grid-template-columns:1fr}}
  @media (max-width:760px){
    .ai-fab{bottom:calc(78px + env(safe-area-inset-bottom,0px));right:12px;padding:11px 15px;font-size:14.5px}
    body:has(#dock:not(.hidden)) .ai-fab{bottom:calc(118px + env(safe-area-inset-bottom,0px))}
    .ai-panel{right:0;left:0;bottom:0;width:100%;height:88vh;border-radius:20px 20px 0 0}
  }

  /* ===================== แถวรายการแบบการ์ด (ทุกขนาดจอ) แก้หัวตารางล้นจอ ===================== */
  table.items thead{display:none}
  table.items{min-width:0!important;display:block}
  table.items tbody,table.items tfoot{display:block}
  table.items td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:3px;white-space:nowrap}
  table.items td:nth-child(1){display:none}
  @media (min-width:761px){
    .group .tbl-wrap{overflow:visible}
    table.items tbody tr{display:grid;align-items:start;gap:8px 10px;padding:12px 14px;margin:8px 12px;border:1px solid #e3e8f1;border-radius:14px;background:#fff}
    table.items.ap tbody tr{grid-template-columns:.8fr .8fr 1.1fr 1fr 1.5fr repeat(5,minmax(0,.85fr)) .9fr .9fr}
    table.items.ag tbody tr{grid-template-columns:.7fr .9fr 1.6fr repeat(5,minmax(0,1fr)) 36px}
    table.items td:nth-child(2){grid-column:1/-1;font-size:15.5px;font-weight:600;padding-bottom:2px!important}
    table.items td[data-label]::before{overflow:hidden;text-overflow:ellipsis}
    table.items td{border:0!important;padding:0!important;min-width:0}
    table.items.ap td:nth-child(n+8):nth-child(-n+12){text-align:center;font-size:12.5px;background:#f5f7fb;border-radius:8px;padding:4px 2px!important}
    table.items.ap td:nth-child(14){font-weight:700}
    table.items input,table.items select,table.items textarea{border:1px solid var(--line)}
    table.items tfoot tr{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;margin:4px 12px 12px;padding:10px 14px;border-radius:12px;background:var(--t-sum)}
    table.items tfoot td{padding:0!important;background:none!important}
    table.items tfoot td:empty{display:none}
  }

  /* แถวรายการปรับตามความกว้างของกรอบจริง (รองรับการขยายจอทุกระดับ) */
  .group{container-type:inline-size}
  @media (min-width:761px){
  @container (max-width:1020px){
    table.items.ap tbody tr{grid-template-columns:repeat(10,minmax(0,1fr))!important}
    table.items.ap td:nth-child(3),table.items.ap td:nth-child(4){grid-column:span 2}
    table.items.ap td:nth-child(5){grid-column:span 2}
    table.items.ap td:nth-child(6){grid-column:span 2}
    table.items.ap td:nth-child(7){grid-column:span 2}
    table.items.ap td:nth-child(n+8):nth-child(-n+12){grid-column:span 2}
    table.items.ap td:nth-child(13),table.items.ap td:nth-child(14){grid-column:span 5}
    table.items.ag tbody tr{grid-template-columns:repeat(10,minmax(0,1fr))!important}
    table.items.ag td:nth-child(3),table.items.ag td:nth-child(4){grid-column:span 3}
    table.items.ag td:nth-child(5){grid-column:span 4}
    table.items.ag td:nth-child(n+6):nth-child(-n+10){grid-column:span 2}
    table.items.ag td:nth-child(11){grid-column:1/-1;text-align:right}
  }  }

  main,.sheet,.group{min-width:0;max-width:100%}
  table.items select,table.items input{min-width:0;max-width:100%}
  @media (min-width:761px) and (max-width:979px){#topnav{flex-wrap:wrap;justify-content:flex-end;gap:6px}#topnav .btn{padding:6px 10px;font-size:13px}.topbar{flex-wrap:wrap}}

  /* ===================== ธีมเข้ม (ค่าเริ่มต้น) ===================== */
  body.dark{--bg:#0B1120;--line:#26324D;--text:#E7ECF5;--muted:#93A1BC;--t-sum:#16223A;--t-head:#16223A;
    --ink:color-mix(in srgb,var(--brand,#3B5BA8) 35%,#C7D2FE);--ink-2:color-mix(in srgb,var(--brand,#3B5BA8) 55%,#93A8F5);
    background:#0B1120;color:#E7ECF5;color-scheme:dark}
  body.dark .topbar{background:#0F1729;border-bottom:1px solid #1E2A44;box-shadow:none}
  body.dark .topbar .t1,body.dark .who b{color:#fff}
  body.dark .banner{background:#1A1F2E;color:#F5D58A;border-color:#2B3247}
  body.dark .sheet,body.dark .dcard,body.dark .kc,body.dark .card,body.dark .listwrap,body.dark .login,body.dark .modal,body.dark .aiset .card2{background:#111A2E!important;border-color:#22304D!important;color:#E7ECF5;box-shadow:0 1px 0 rgba(255,255,255,.02),0 20px 40px -30px rgba(0,0,0,.8)}
  body.dark .listhead,body.dark .counts,body.dark .dcard .hd,body.dark .modal-h,body.dark .modal-f{border-color:#22304D;background:transparent}
  body.dark input,body.dark select,body.dark textarea,body.dark .inp{background:#0B1222!important;color:#E7ECF5!important;border-color:#2C3A5C!important}
  body.dark input::placeholder,body.dark textarea::placeholder{color:#6B7A99}
  body.dark .utbl th,body.dark table.list th{background:#16223A!important;color:#AAB6CF;border-color:#22304D}
  body.dark .utbl td,body.dark table.list td{border-color:#1E2A44}
  body.dark .utbl tbody tr:hover td,body.dark table.list tbody tr:hover td{background:#131E35}
  body.dark table.items tbody tr{background:#0F1830!important;border-color:#22304D!important}
  body.dark table.items.ap td:nth-child(n+8):nth-child(-n+12){background:#16223A}
  body.dark .btn.line{background:transparent;color:#DCE3F0;border-color:#33416A}
  body.dark .btn.line:hover{background:#16223C}
  body.dark .btn.ink{background:linear-gradient(135deg,#7C5CFA,#3B82F6);color:#fff;border-color:transparent}
  body.dark .dtabs button{background:#111A2E;color:#DCE3F0;border-color:#2C3A5C}
  body.dark .dtabs button.on{background:linear-gradient(135deg,#7C5CFA,#3B82F6);border-color:transparent}
  body.dark .badge{background:#1E2A44;color:#C7D2FE} body.dark .badge.agreed{background:#1A2E52;color:#93C5FD} body.dark .badge.done{background:#0F3B2A;color:#6EE7B7}
  body.dark .flag{background:#3A2A12;color:#FBBF77} body.dark .flag.ok{background:#0F3B2A;color:#6EE7B7}
  body.dark .chip{background:#1E2A44;color:#C7D2FE} body.dark .chip.ok{background:#0F3B2A;color:#6EE7B7} body.dark .chip.warn{background:#3A2A12;color:#FBBF77}
  body.dark .evmiss{background:#3A2A12;color:#FBBF77} body.dark .evf{background:#16223A;border-color:#2C3A5C}
  body.dark .evbox{background:#0F1830;border-color:#22304D} body.dark .evbox .miss{background:#3A2A12;color:#FBBF77}
  body.dark .band{color:#E7ECF5;border-color:#22304D}
  body.dark .band.p1{background:linear-gradient(90deg,#1B2C55,#111A2E)} body.dark .band.p2{background:linear-gradient(90deg,#3A2550,#111A2E)} body.dark .band.p3{background:linear-gradient(90deg,#4A2A1E,#111A2E)}
  body.dark .gh{background:transparent;border-color:#22304D}
  body.dark .form-title{background:linear-gradient(120deg,#1A2347,#111A2E)!important;border-color:#22304D}
  body.dark .totalline{background:#16223A;color:#E7ECF5;border-color:#22304D}
  body.dark .totalline.grand{background:linear-gradient(90deg,#2A2160,#16285A)}
  body.dark .dock{background:#0F1729;border-color:#22304D}
  body.dark .bar{background:#1E2A44}
  body.dark .note,body.dark .muted,body.dark .sub{color:#93A1BC}
  body.dark .demo-card{background:linear-gradient(135deg,#2A2160,#16285A);border-color:#3B4FA8}
  body.dark .demo-card .row{background:#0B1222;border-color:#2C3A5C}
  body.dark .demo-card code{color:#C7D2FE}
  body.dark .lg-side{background:#0B1120}
  body.dark .lg-hero{background:radial-gradient(1200px 500px at 110% 120%,color-mix(in srgb,var(--gold) 30%,transparent),transparent 60%),
    radial-gradient(700px 400px at -10% -10%,rgba(124,92,250,.28),transparent 60%),linear-gradient(150deg,color-mix(in srgb,var(--brand,#1f3a5f) 85%,#0B1120) 0%,#0E1526 100%)}
  body.dark select option{background:#0F1729;color:#E7ECF5}
  body.dark{--bad:#F97066;--warn:#FDB022;--ok:#32D583}
  body.dark .tna-box{background:linear-gradient(135deg,#1A1F3D,#131C33)!important;border-color:#2C3A5C!important;color:#E7ECF5}
  body.dark .tna-box div[style*="color:var(--ink)"]{color:#C7D2FE!important}
  body.dark .lockbar{background:#2A2312;border-color:#5A4718;color:#F5D58A}
  body.dark .lockbar .btn.line{color:#F5D58A;border-color:#7A6222}
  .gpill[style*="--gC"],.legend div[data-g="C"] b{color:#1a1f2b!important}
  body.dark .kc .v[style*="var(--warn)"],body.dark .kc .v[style*="var(--bad)"]{filter:none}
  body.dark .heat td:not(:first-child){filter:brightness(.9) saturate(1.3);color:#0B1120}
  body.dark .heat td:first-child{color:#E7ECF5}
  body.dark .found{background:#16223A;border-color:#2C3A5C}
  body.dark .legend div b{color:#fff}
  body.dark .app-credit{background:#0B1120;border-color:#1E2A44}
  body.dark .heat td:first-child{color:#E7ECF5}
  body.dark .heat td{color:#1a1f2b}
  body.dark .range{background:#1E2A44}
  body.dark .evbox b,body.dark .dhead h2,body.dark .listhead h2,body.dark .dcard h3,body.dark h2,body.dark h3{color:#F1F4FA}
  body.dark .kc .v{color:#fff}
  body.dark .result .grade.pending{border-color:#33416A;color:#6B7A99}
  body.dark .toast{background:#E7ECF5;color:#0B1120}
  body.dark .ws-banner{background:#1A1F2E!important}

  /* ใช้ตอนวัดความสูงก่อนพิมพ์ ให้ตรงกับรูปแบบตอนพิมพ์จริง */
  #printArea.measure .p-t{width:100%;border-collapse:collapse;margin-bottom:-1px;table-layout:fixed}
  #printArea.measure .p-t td,#printArea.measure .p-t th{border:1px solid #444;padding:2px 3px;font-size:8.5pt;line-height:1.3;vertical-align:middle;font-weight:400;word-wrap:break-word}
  #printArea.measure .p-t .b{font-weight:700}
  #printArea.measure .p-t .c{text-align:center}
  #printArea.measure .p-t .r{text-align:right}
  #printArea.measure .p-y{background:var(--t-head)!important}
  #printArea.measure .p-bl{background:var(--t-p1)!important}
  #printArea.measure .p-gr{background:var(--t-p2)!important}
  #printArea.measure .p-pe{background:var(--t-p3)!important}
  #printArea.measure .p-o{background:var(--t-sum)!important}
  #printArea.measure .p-sub{background:#f2f2f2!important}
  #printArea.measure .p-t tr{page-break-inside:avoid}
  #printArea.measure .rp{font-family:'Sarabun',Tahoma,sans-serif;font-size:10.5pt;color:#1d2733}
  #printArea.measure .rp .head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--gold);padding-bottom:6pt;margin-bottom:10pt}
  #printArea.measure .rp .brand{font-family:var(--logo-font,'Montserrat'),sans-serif;font-weight:800;letter-spacing:.14em;color:var(--ink);font-size:14pt}
  #printArea.measure .rp h1{font-size:17pt;color:var(--ink);margin:2pt 0}
  #printArea.measure .rp h2{font-size:12.5pt;color:var(--ink);border-bottom:1.5pt solid var(--ink);padding-bottom:2pt;margin:14pt 0 6pt;page-break-after:avoid}
  #printArea.measure .rp h3{font-size:11pt;margin:8pt 0 4pt;color:var(--ink)}
  #printArea.measure .rp table{width:100%;border-collapse:collapse;margin:3pt 0 8pt}
  #printArea.measure .rp th,#printArea.measure .rp td{border:.6pt solid #b9c3cf;padding:2.5pt 5pt;font-size:9pt;text-align:left;vertical-align:top}
  #printArea.measure .rp th{background:#eef2f6!important;font-weight:700}
  #printArea.measure .rp .n{text-align:right;white-space:nowrap}
  #printArea.measure .rp .c{text-align:center}
  #printArea.measure .rp .boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:6pt;margin:6pt 0}
  #printArea.measure .rp .box{border:.6pt solid #b9c3cf;border-radius:4pt;padding:6pt 8pt}
  #printArea.measure .rp .box span{font-size:8.5pt;color:#5d6b7a}
  #printArea.measure .rp .box b{display:block;font-size:17pt;color:var(--ink);line-height:1.2}
  #printArea.measure .rp .bar{height:7pt;background:#e3e8ee!important;border-radius:2pt;overflow:hidden}
  #printArea.measure .rp .bar i{display:block;height:100%}
  #printArea.measure .rp ul{margin:4pt 0 4pt 14pt;padding:0}
  #printArea.measure .rp li{margin:2pt 0}
  #printArea.measure .rp .muted{color:#5d6b7a;font-size:8.5pt}
  #printArea.measure .rp .pb{page-break-before:always}
  #printArea.measure .rp tr,#printArea.measure .rp .box,#printArea.measure .rp li{page-break-inside:avoid}
  #printArea.measure .rp .sign{display:grid;grid-template-columns:1fr 1fr;gap:20pt;margin-top:18pt}
  #printArea.measure .rp .sign div{border-top:.6pt dotted #555;padding-top:4pt;text-align:center;font-size:9pt}
  #printArea.measure .fit1.compact .p-t th,#printArea.measure .fit1.compact .p-t td{font-size:7.6pt!important;padding:1.5px 3px!important;line-height:1.22!important}
  #printArea.measure .fit1.compact .p-t{margin-bottom:3pt!important}
  #printArea.measure .fit1.compact2 .p-t th,#printArea.measure .fit1.compact2 .p-t td{font-size:7pt!important;padding:1px 2.5px!important;line-height:1.15!important}
  #printArea.measure .fit1.compact .rp th,#printArea.measure .fit1.compact .rp td{font-size:8pt!important;padding:2px 4px!important}
  #printArea.measure .fit1.compact .rp h2{margin:8pt 0 4pt!important}

  /* ===================== ถ่ายทอด KPI ===================== */
  .cs-steps{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
  .cs-steps button{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--paper,#fff);border-radius:14px;padding:10px 14px;cursor:pointer;font:inherit;color:inherit}
  .cs-steps button b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-family:var(--head)}
  .cs-steps button.on{border-color:transparent;background:linear-gradient(135deg,#7C5CFA,#3B82F6);color:#fff}
  .cs-steps button.on b{background:rgba(255,255,255,.25);color:#fff}
  .cs-card{border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;background:var(--paper,#fff)}
  .cs-card .cs-h{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 16px;border-left:6px solid var(--c,var(--gB))}
  .cs-card .cs-h h3{margin:0;font-family:var(--head);font-size:17px}
  .cs-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(90px,1fr) minmax(80px,.8fr) minmax(0,1.6fr) 36px;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line)}
  .cs-row .nm{font-weight:600}
  .cs-row .sub{font-size:12.5px}
  .cs-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 16px;border-top:1px dashed var(--line)}
  .cs-add select{max-width:420px}
  .cs-link{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;border-radius:99px;padding:2px 10px;background:#e8f1ff;color:#1d4ed8}
  .cs-link.warn{background:#fdf0dc;color:#b45309}
  .cs-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .cs-pills button{border:1px solid var(--line);background:var(--paper,#fff);color:inherit;border-radius:99px;padding:6px 14px;cursor:pointer;font:inherit;font-size:14px}
  .cs-pills button.on{background:var(--ink);color:#fff;border-color:transparent}
  .cs-sum{display:flex;gap:8px;flex-wrap:wrap}
  .tree{display:grid;grid-template-columns:minmax(0,1.3fr) 24px minmax(0,1.2fr) 24px minmax(0,1.5fr);gap:8px 0;align-items:stretch}
  .tree .arrow{display:grid;place-items:center;color:var(--muted);font-size:18px}
  .tree .node{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper,#fff);border-left:5px solid var(--c,var(--gB))}
  .tree .chips{display:flex;gap:6px;flex-wrap:wrap;align-content:flex-start;border:1px dashed var(--line);border-radius:12px;padding:8px}
  .tree .chips span{font-size:12.5px;border-radius:99px;padding:2px 9px;background:#eef2f6}
  .tree .hd{font-size:12px;font-weight:700;color:var(--muted);padding:0 2px 4px}
  body.dark .cs-card,body.dark .cs-steps button,body.dark .cs-pills button,body.dark .tree .node{background:#111A2E;border-color:#22304D}
  body.dark .cs-steps button.on{background:linear-gradient(135deg,#7C5CFA,#3B82F6)}
  body.dark .cs-pills button.on{background:linear-gradient(135deg,#7C5CFA,#3B82F6)}
  body.dark .cs-link{background:#16285A;color:#9EC1FF} body.dark .cs-link.warn{background:#3A2A12;color:#FBBF77}
  body.dark .tree .chips span{background:#1E2A44;color:#C7D2FE}
  body.dark .cs-row,body.dark .cs-add,body.dark .tree .chips{border-color:#22304D}
  @media (max-width:760px){.cs-row{grid-template-columns:1fr 1fr;}.cs-row .nmcell{grid-column:1/-1}.tree{grid-template-columns:1fr}.tree .arrow{transform:rotate(90deg);height:18px}}
  .ai-pick{display:grid;gap:8px;max-height:60vh;overflow:auto}
  .ai-pick label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
  .ai-pick label input{margin-top:4px}

  /* ===================== คลังความรู้ ===================== */
  .kb-tools{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
  .kb-search{width:100%;max-width:760px;margin-bottom:12px}
  .kb-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .kb-chips button{border:1px solid var(--line);background:var(--paper,#fff);color:inherit;border-radius:99px;padding:7px 16px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
  .kb-chips button.on{background:linear-gradient(135deg,#7C5CFA,#3B82F6);color:#fff;border-color:transparent}
  .kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  .kb-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper,#fff);cursor:pointer;display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;padding:0}
  .kb-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
  .kb-card .thumb{padding:10px;background:#eef2f7}
  .kb-card .meta{padding:12px 14px 14px;display:grid;gap:6px}
  .kb-card h3{margin:0;font-family:var(--head);font-size:16px;line-height:1.35}
  .kb-tag{display:inline-block;font-size:12px;border-radius:99px;padding:2px 9px;background:#ede9fe;color:#5b21b6;margin-right:4px}
  .kb-tag.st{background:#e0f2fe;color:#075985}
  .kb-read{max-width:880px}
  .kb-read h1{font-family:var(--head);font-size:30px;line-height:1.3;margin:6px 0 8px}
  .kb-read h2{font-family:var(--head);font-size:19px;margin:22px 0 6px}
  .kb-read p{font-size:16.5px;line-height:1.85;margin:0}
  .kb-keys{border-radius:14px;padding:14px 18px;margin-top:20px;background:linear-gradient(135deg,rgba(124,92,250,.14),rgba(59,130,246,.08));border:1px solid rgba(124,92,250,.35)}
  .kb-keys li{margin:4px 0;line-height:1.7}
  body.dark .kb-card,body.dark .kb-chips button{background:#111A2E;border-color:#22304D}
  body.dark .kb-card .thumb{background:#0B1222}
  body.dark .kb-tag{background:#2A2160;color:#C4B5FD} body.dark .kb-tag.st{background:#0F2E4A;color:#93C5FD}
  /* อินโฟกราฟิก (พื้นสว่างเสมอ อ่านง่ายทั้งบนจอและตอนพิมพ์) */
  .ig{background:#fff;color:#1d2733;border-radius:12px;padding:14px;font-family:var(--head);font-size:14px;position:relative}
  .ig.sm{font-size:10px;padding:8px;height:170px;overflow:hidden}
  .ig.lg{font-size:16px;padding:22px}
  .ig .cap{text-align:center;font-weight:700;color:#334155;margin-bottom:8px}
  .ig .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .ig .bx{flex:1 1 0;min-width:0;border-radius:10px;padding:8px;text-align:center;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 10%,#fff)}
  .ig .bx b{display:block;font-size:2.1em;color:var(--c);line-height:1.1}
  .ig .bx span{display:block}
  .ig .pyr{display:grid;gap:4px;justify-items:center}
  .ig .pyr div{color:#fff;font-weight:700;text-align:center;padding:.55em .4em;border-radius:6px}
  .ig .quad{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .ig .quad div{border-radius:10px;padding:.7em;color:#fff}
  .ig .quad b{display:block;font-size:1.15em}
  .ig .cmp{width:100%;border-collapse:separate;border-spacing:4px}
  .ig .cmp td{background:#f1f5f9;border-radius:6px;padding:.45em .6em;text-align:center}
  .ig .cmp tr:first-child td{color:#fff;font-weight:700}
  .ig .lad{display:flex;align-items:flex-end;gap:6px;height:10em}
  .ig .lad div{flex:1;border-radius:8px 8px 3px 3px;color:#fff;font-weight:700;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:.4em .2em;text-align:center;line-height:1.2}
  .ig .lad div b{font-size:1.5em}
  .ig .sc{display:flex;gap:4px}
  .ig .sc div{flex:1;text-align:center;border-radius:8px;padding:.5em .2em;color:#fff;font-weight:700}
  .ig .sc div b{display:block;font-size:1.6em}
  .ig .gr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .ig .gr div{border-radius:10px;padding:.55em;border-left:5px solid var(--c);background:#f8fafc}
  .ig .gr b{display:block;color:var(--c)}
  .ig .st{display:flex;gap:6px;flex-wrap:wrap}
  .ig .st div{flex:1 1 0;min-width:5.5em;border-radius:10px;padding:.55em;color:#fff;font-weight:600;line-height:1.3}
  .ig .st div b{display:block;font-size:1.4em}
  .ig .tl{display:flex;position:relative;padding-top:1.4em}
  .ig .tl::before{content:"";position:absolute;left:4%;right:4%;top:.55em;height:4px;border-radius:4px;background:linear-gradient(90deg,#12B76A,#2E90FA,#F5B614,#F97316,#E5484D)}
  .ig .tl div{flex:1;text-align:center;position:relative;padding:0 .2em;line-height:1.3}
  .ig .tl div::before{content:"";position:absolute;left:50%;top:-1.25em;width:1em;height:1em;margin-left:-.5em;border-radius:50%;background:#fff;border:4px solid var(--c)}
  .ig .br{display:grid;gap:.6em}
  .ig .br div{display:grid;grid-template-columns:minmax(0,1fr) 3.5em;gap:.5em;align-items:center}
  .ig .br i{display:block;height:1.4em;border-radius:6px;background:var(--c);margin-top:3px}
  .ig .br b{font-size:1.4em;color:var(--c);text-align:right}
  .ig .mx{width:100%;border-collapse:separate;border-spacing:4px}
  .ig .mx td,.ig .mx th{border-radius:6px;padding:.45em;text-align:center}
  .ig .mx th{background:#e2e8f0;font-weight:700}
  .ig .cy{position:relative;width:100%;aspect-ratio:16/8}
  .ig .cy .ring{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;border:4px dashed #cbd5e1}
  .ig .cy .nd{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:700;border-radius:99px;padding:.45em .9em;white-space:nowrap}
  .ig .cy .ctr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:700;color:#334155;text-align:center}

  /* ===================== ตั้งค่ารอบประเมิน ===================== */
  .su-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 18px}
  .su-types button{border:2px solid var(--line);background:var(--paper,#fff);color:inherit;border-radius:16px;padding:16px;text-align:left;cursor:pointer;font:inherit}
  .su-types button b{display:block;font-family:var(--head);font-size:18px;margin-bottom:4px}
  .su-types button.on{border-color:#7C5CFA;box-shadow:0 0 0 3px rgba(124,92,250,.25)}
  .su-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .su-tbl{width:100%;border-collapse:collapse}
  .su-tbl td,.su-tbl th{padding:6px;border-bottom:1px solid var(--line);text-align:left}
  .su-tbl input{width:100%}
  body.dark .su-types button{background:#111A2E;border-color:#22304D}
  body.dark .su-types button.on{border-color:#7C5CFA}
  @media (max-width:900px){.su-types{grid-template-columns:1fr 1fr}.su-grid{grid-template-columns:1fr}}

  /* ===================== แบรนด์ PERFORMA ===================== */
  .pf-ico{width:44px;height:44px;flex:none;display:block}
  .pf{display:flex;align-items:center;gap:12px}
  .pf b{display:block;font-family:var(--head);font-weight:700;letter-spacing:.14em;font-size:21px;line-height:1.1}
  .pf small{display:block;font-size:12.5px;opacity:.78;letter-spacing:.03em;margin-top:2px}
  .pf.lg .pf-ico{width:64px;height:64px}
  .pf.lg b{font-size:36px}
  .pf.lg small{font-size:15px}
  .pf-top .pf-ico{width:38px;height:38px}
  .side-brand .pf b{color:#fff}
  .side-brand .org{margin-top:10px}
  .pf-card{display:grid;justify-items:center;text-align:center;gap:4px;margin-bottom:14px}
  .pf-card .pf-ico{width:58px;height:58px;margin-bottom:4px}
  .pf-card b{font-family:var(--head);font-weight:700;letter-spacing:.14em;font-size:24px}
  .pf-card .muted{font-size:13.5px}
  .lg-side .login h2{text-align:left}
  @media (min-width:980px){body.with-side .pf-top{display:none}}

  /* ===================== ศูนย์รายงาน ===================== */
  .rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:18px}
  .rc-card{border:1px solid var(--line);background:var(--paper,#fff);color:inherit;border-radius:16px;padding:16px;text-align:left;cursor:pointer;font:inherit;display:grid;gap:6px}
  .rc-card .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--head);font-weight:700;font-size:18px}
  .rc-card b{font-family:var(--head);font-size:17px}
  .rc-card.on{border-color:#7C5CFA;box-shadow:0 0 0 3px rgba(124,92,250,.28)}
  .rc-work{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
  .rc-view{border:1px solid var(--line);border-radius:16px;background:#e9edf3;padding:16px;overflow:auto;max-height:78vh}
  #rcPaper{background:#fff;color:#1d2733;width:794px;padding:40px 46px;margin:0 auto;box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
  .rc-side{display:grid;gap:10px;position:sticky;top:90px}
  .rc-side .btn,.rc-side .ai-btn{width:100%;padding:11px;text-align:center}
  .rc-side textarea{width:100%;min-height:150px}
  body.dark .rc-card{background:#111A2E;border-color:#22304D}
  body.dark .rc-view{background:#0B1222;border-color:#22304D}
  @media (max-width:1100px){.rc-work{grid-template-columns:1fr}.rc-side{position:static}}
  #rcPaper,body.dark #rcPaper{--ink:var(--brand,#1f3a5f);--ink-2:var(--brand,#1f3a5f);--text:#1d2733;--muted:#5d6b7a;--line:#d5dce5;color:#1d2733;color-scheme:light}
  body.dark #rcPaper h1,body.dark #rcPaper h2,body.dark #rcPaper h3{color:var(--brand,#1f3a5f)!important}
  body.dark #rcPaper .muted{color:#5d6b7a}
  #rcPaper .p-t{width:100%;border-collapse:collapse;margin-bottom:-1px;table-layout:fixed}
  #rcPaper .p-t td,#rcPaper .p-t th{border:1px solid #444;padding:2px 3px;font-size:8.5pt;line-height:1.3;vertical-align:middle;font-weight:400;word-wrap:break-word}
  #rcPaper .p-t .b{font-weight:700}
  #rcPaper .p-t .c{text-align:center}
  #rcPaper .p-t .r{text-align:right}
  #rcPaper .p-y{background:var(--t-head)!important}
  #rcPaper .p-bl{background:var(--t-p1)!important}
  #rcPaper .p-gr{background:var(--t-p2)!important}
  #rcPaper .p-pe{background:var(--t-p3)!important}
  #rcPaper .p-o{background:var(--t-sum)!important}
  #rcPaper .p-sub{background:#f2f2f2!important}
  #rcPaper .p-t tr{page-break-inside:avoid}
  #rcPaper .rp{font-family:'Sarabun',Tahoma,sans-serif;font-size:10.5pt;color:#1d2733}
  #rcPaper .rp .head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--gold);padding-bottom:6pt;margin-bottom:10pt}
  #rcPaper .rp .brand{font-family:var(--logo-font,'Montserrat'),sans-serif;font-weight:800;letter-spacing:.14em;color:var(--ink);font-size:14pt}
  #rcPaper .rp h1{font-size:17pt;color:var(--ink);margin:2pt 0}
  #rcPaper .rp h2{font-size:12.5pt;color:var(--ink);border-bottom:1.5pt solid var(--ink);padding-bottom:2pt;margin:14pt 0 6pt;page-break-after:avoid}
  #rcPaper .rp h3{font-size:11pt;margin:8pt 0 4pt;color:var(--ink)}
  #rcPaper .rp table{width:100%;border-collapse:collapse;margin:3pt 0 8pt}
  #rcPaper .rp th,#rcPaper .rp td{border:.6pt solid #b9c3cf;padding:2.5pt 5pt;font-size:9pt;text-align:left;vertical-align:top}
  #rcPaper .rp th{background:#eef2f6!important;font-weight:700}
  #rcPaper .rp .n{text-align:right;white-space:nowrap}
  #rcPaper .rp .c{text-align:center}
  #rcPaper .rp .boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:6pt;margin:6pt 0}
  #rcPaper .rp .box{border:.6pt solid #b9c3cf;border-radius:4pt;padding:6pt 8pt}
  #rcPaper .rp .box span{font-size:8.5pt;color:#5d6b7a}
  #rcPaper .rp .box b{display:block;font-size:17pt;color:var(--ink);line-height:1.2}
  #rcPaper .rp .bar{height:7pt;background:#e3e8ee!important;border-radius:2pt;overflow:hidden}
  #rcPaper .rp .bar i{display:block;height:100%}
  #rcPaper .rp ul{margin:4pt 0 4pt 14pt;padding:0}
  #rcPaper .rp li{margin:2pt 0}
  #rcPaper .rp .muted{color:#5d6b7a;font-size:8.5pt}
  #rcPaper .rp .pb{page-break-before:always}
  #rcPaper .rp tr,#rcPaper .rp .box,#rcPaper .rp li{page-break-inside:avoid}
  #rcPaper .rp .sign{display:grid;grid-template-columns:1fr 1fr;gap:20pt;margin-top:18pt}
  #rcPaper .rp .sign div{border-top:.6pt dotted #555;padding-top:4pt;text-align:center;font-size:9pt}

  body.no-credit .side-credit,body.no-credit .lg-credit,body.no-credit .app-credit{display:none!important}

  /* =====================================================================
     PERFORMA PREMIUM · ฉบับองค์กรจริง (ชั้นตกแต่งล่าสุด ทับทุกส่วนด้านบน)
     ===================================================================== */
  :root{--pm-gold:#E2B65C;--pm-gold-2:#F6DC9A;--pm-gold-ink:#1C1405;--pm-r:18px;--pm-ease:cubic-bezier(.2,.8,.2,1);
    --pm-surface:#FFFFFF;--pm-surface-2:#F7F8FC;--pm-border:#E4E7F0;--pm-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 40px -26px rgba(15,23,42,.28)}
  body{font-family:'Sarabun','IBM Plex Sans Thai',Tahoma,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    background:radial-gradient(1100px 600px at 100% -10%,rgba(226,182,92,.10),transparent 60%),radial-gradient(900px 600px at -10% 0%,rgba(99,102,241,.08),transparent 55%),var(--bg);background-attachment:fixed}
  body.dark{--bg:#060A14;--line:#1C2740;--text:#E9EEF8;--muted:#8D9AB6;--pm-surface:rgba(16,23,42,.78);--pm-surface-2:rgba(22,31,54,.7);--pm-border:rgba(148,163,184,.13);
    --pm-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 24px 50px -30px rgba(0,0,0,.9);
    background:radial-gradient(1200px 700px at 105% -15%,rgba(226,182,92,.13),transparent 60%),radial-gradient(1000px 700px at -15% 10%,rgba(99,102,241,.16),transparent 55%),radial-gradient(900px 600px at 50% 120%,rgba(34,195,230,.07),transparent 60%),#060A14;background-attachment:fixed}
  h1,h2,h3,.dhead h2,.listhead h2,.dcard h3,.tl-hero h2,.kc .v,.pa-v{font-family:'Prompt','Sarabun',sans-serif;letter-spacing:-.01em}
  .kc .v,.pa-v,.nb-c,.result .big{font-variant-numeric:tabular-nums}

  /* ---------- พื้นผิวการ์ด: ขอบไล่เฉดแบบกระจก ---------- */
  .sheet,.dcard,.kc,.card,.listwrap,.pa-c,.rc-card,.kb-card,.tl-hero,.login,.modal{border-radius:var(--pm-r)!important;box-shadow:var(--pm-shadow)!important}
  body.dark .sheet,body.dark .dcard,body.dark .kc,body.dark .card,body.dark .listwrap,body.dark .pa-c,body.dark .rc-card,body.dark .kb-card,body.dark .modal,body.dark .aiset .card2{
    background:linear-gradient(var(--pm-surface),var(--pm-surface)) padding-box,linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 38%,rgba(226,182,92,.20)) border-box!important;
    border:1px solid transparent!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  body:not(.dark) .sheet,body:not(.dark) .dcard,body:not(.dark) .kc,body:not(.dark) .card,body:not(.dark) .listwrap,body:not(.dark) .pa-c,body:not(.dark) .rc-card,body:not(.dark) .kb-card{
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(150deg,#ECEEF5,#F4F5FA 40%,rgba(226,182,92,.45)) border-box!important;border:1px solid transparent!important}
  .kc{transition:transform .35s var(--pm-ease),box-shadow .35s var(--pm-ease)}
  .kc:hover,.pa-c:hover,.rc-card:hover{transform:translateY(-3px)}
  .kc::before{height:3px!important;box-shadow:0 0 18px 1px currentColor;opacity:.95}
  .kcards .kc:nth-child(1)::before{color:var(--gA)} .kcards .kc:nth-child(2)::before{color:var(--gB)} .kcards .kc:nth-child(3)::before{color:var(--gC)} .kcards .kc:nth-child(4)::before{color:var(--gD)}
  .kc .lb{text-transform:none;letter-spacing:.01em;font-weight:600}
  .kc .v{font-size:36px!important;font-weight:700}
  body.dark .kc .v{background:linear-gradient(180deg,#FFFFFF,#C9D3EA);-webkit-background-clip:text;background-clip:text;color:transparent}
  body.dark .kc .v[style*="color"]{-webkit-text-fill-color:currentColor;background:none}

  /* ---------- ปุ่ม: ทองแชมเปญ ---------- */
  .btn{border-radius:12px!important;font-weight:600;letter-spacing:.005em;transition:transform .2s var(--pm-ease),box-shadow .25s var(--pm-ease),filter .2s}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn.ink,.btn.primary,body.dark .btn.ink{background:linear-gradient(135deg,var(--pm-gold-2) 0%,var(--pm-gold) 55%,#C8963E 100%)!important;color:var(--pm-gold-ink)!important;border-color:transparent!important;
    box-shadow:0 10px 24px -12px rgba(226,182,92,.75),inset 0 1px 0 rgba(255,255,255,.45)!important}
  .btn.ink:hover,.btn.primary:hover{filter:brightness(1.05) saturate(1.05);box-shadow:0 14px 30px -12px rgba(226,182,92,.85),inset 0 1px 0 rgba(255,255,255,.5)!important}
  body.dark .btn.line{background:rgba(255,255,255,.03);border-color:rgba(148,163,184,.22);color:#E2E8F5}
  body.dark .btn.line:hover{background:rgba(226,182,92,.08);border-color:rgba(226,182,92,.45);color:#F6DC9A}
  body:not(.dark) .btn.line{background:#fff;border-color:#DDE1EC}
  body:not(.dark) .btn.line:hover{border-color:var(--pm-gold);background:#FFFBF0}
  .ai-btn{border-radius:12px!important}

  /* ---------- แท็บ ชิป ---------- */
  .dtabs button,.tl-tabs button,.kb-chips button{border-radius:999px!important;transition:all .25s var(--pm-ease)}
  .dtabs button.on,.tl-tabs button.on,.kb-chips button.on,body.dark .dtabs button.on{background:linear-gradient(135deg,var(--pm-gold-2),var(--pm-gold))!important;color:var(--pm-gold-ink)!important;border-color:transparent!important;box-shadow:0 10px 22px -12px rgba(226,182,92,.8)!important}
  .tl-tabs button.on svg{stroke:var(--pm-gold-ink)}
  body.dark .tl-tabs button:not(.on),body.dark .dtabs button:not(.on){background:rgba(255,255,255,.03)!important;border-color:rgba(148,163,184,.18)!important}
  .tl-kick,.lg-kick{color:var(--pm-gold)!important;letter-spacing:.12em;font-weight:700;font-size:12.5px;text-transform:uppercase}

  /* ---------- ช่องกรอก ---------- */
  body.dark input,body.dark select,body.dark textarea,body.dark .inp{background:rgba(6,10,20,.55)!important;border-color:rgba(148,163,184,.2)!important;border-radius:12px!important}
  .inp,label.f input,label.f select,label.f textarea{border-radius:12px!important;transition:border-color .2s,box-shadow .2s}
  input:focus,select:focus,textarea:focus,.inp:focus{outline:none!important;border-color:var(--pm-gold)!important;box-shadow:0 0 0 4px rgba(226,182,92,.18)!important}

  /* ---------- ตาราง ---------- */
  .utbl th,table.list th{font-size:12.5px!important;letter-spacing:.04em;text-transform:none;font-weight:700}
  body.dark .utbl th,body.dark table.list th{background:rgba(255,255,255,.025)!important;color:#9AA8C4!important;border-color:rgba(148,163,184,.12)!important}
  body.dark .utbl td,body.dark table.list td{border-color:rgba(148,163,184,.08)!important}
  body.dark .utbl tbody tr:hover td,body.dark table.list tbody tr:hover td{background:rgba(226,182,92,.05)!important}
  .gpill{border-radius:9px!important;box-shadow:0 4px 12px -6px currentColor}

  /* ---------- แถบหัว ---------- */
  .topbar{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  body.dark .topbar{background:rgba(6,10,20,.72)!important;border-bottom:1px solid rgba(148,163,184,.10)!important}
  .topbar::after{height:2px!important;opacity:.85}
  body:not(.dark) .topbar{background:rgba(255,255,255,.82)!important;color:#0F172A;border-bottom:1px solid #E7E9F2}
  body:not(.dark) .topbar .t1{color:#0F172A} body:not(.dark) .topbar .t2{color:#5B6478;opacity:1}
  .topbar .t1{font-family:'Prompt',sans-serif;font-weight:600;letter-spacing:-.005em}
  #topnav,.who{display:none!important}
  .hamb{display:none;flex:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.04);color:inherit;cursor:pointer;align-items:center;justify-content:center;margin-right:4px}
  .hamb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .topbar .brand{gap:12px}

  /* ---------- เมนูซ้าย (ทุกหน้าจอ) ---------- */
  .side-nav button{position:relative;transition:background .2s,color .2s}
  .side-nav button.on{background:linear-gradient(90deg,rgba(226,182,92,.20),rgba(226,182,92,.04))!important;color:#FBE7B5!important}
  .side-nav button.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--pm-gold-2),var(--pm-gold));box-shadow:0 0 14px rgba(226,182,92,.8)}
  .side-nav button.on svg{stroke:var(--pm-gold-2)}
  .side-nav button:hover{background:rgba(255,255,255,.05)!important}
  .sn-h{font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:#6F7D9B!important;padding-top:18px!important}
  .side-me{display:flex;gap:12px;align-items:center;margin:8px 14px 0;padding:12px;border-radius:16px;background:linear-gradient(135deg,rgba(226,182,92,.12),rgba(99,102,241,.08));border:1px solid rgba(226,182,92,.22)}
  .side-me:empty{display:none}
  .sm-av{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Prompt',sans-serif;font-weight:700;font-size:18px;color:var(--pm-gold-ink);background:linear-gradient(135deg,var(--pm-gold-2),var(--pm-gold))}
  .sm-tx{min-width:0}.sm-tx b{display:block;color:#fff;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sm-tx span{display:block;font-size:12px;color:#AEB9D0;line-height:1.4}
  .side-brand{border-bottom:1px solid rgba(148,163,184,.10)!important}
  .side-credit{border-top:1px solid rgba(148,163,184,.10)!important}
  @media (min-width:980px){
    body.with-side .side:not(.hidden){background:linear-gradient(180deg,rgba(10,15,30,.96),rgba(8,12,24,.98)),radial-gradient(600px 400px at 0 0,rgba(226,182,92,.10),transparent 60%)!important;
      border-right:1px solid rgba(148,163,184,.10)!important;box-shadow:20px 0 60px -40px rgba(0,0,0,.8)}
  }
  @media (max-width:979px){
    .hamb{display:inline-flex}
    body.with-side .side:not(.hidden){display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:120;overflow-y:auto;
      background:linear-gradient(180deg,#0B1122,#070B16);color:#DCE3F0;border-right:1px solid rgba(148,163,184,.12);transform:translateX(-104%);transition:transform .35s var(--pm-ease);box-shadow:30px 0 80px -30px rgba(0,0,0,.9)}
    body.with-side.side-open .side:not(.hidden){transform:none}
    .side-scrim{position:fixed;inset:0;z-index:110;background:rgba(3,6,14,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
    body.side-open .side-scrim{opacity:1;pointer-events:auto}
    .mnav,.mnav:not(.hidden){display:none!important}
    body.with-side{padding-left:0}
    main{padding-bottom:40px!important}
  }
  @media (min-width:980px){.side-scrim{display:none}}

  /* ---------- หัวหน้า / ส่วนหัวแบบฟอร์ม ---------- */
  .dhead h2{font-size:28px!important}
  body.dark .form-title{background:linear-gradient(120deg,rgba(226,182,92,.10),rgba(99,102,241,.10) 60%,transparent)!important}
  body.dark .band.p1{background:linear-gradient(90deg,rgba(46,144,250,.18),transparent)!important}
  body.dark .band.p2{background:linear-gradient(90deg,rgba(124,92,250,.20),transparent)!important}
  body.dark .band.p3,body.dark .band.head{background:linear-gradient(90deg,rgba(226,182,92,.16),transparent)!important}
  body.dark .totalline.grand{background:linear-gradient(90deg,rgba(226,182,92,.22),rgba(99,102,241,.14))!important}
  .tl-hero{background:radial-gradient(600px 220px at 100% 0,rgba(226,182,92,.18),transparent 60%),linear-gradient(135deg,rgba(99,102,241,.14),rgba(34,195,230,.06))!important;border-color:rgba(148,163,184,.14)!important}
  body.dark .dock{background:rgba(6,10,20,.82)!important;backdrop-filter:blur(16px);border-color:rgba(148,163,184,.12)!important}
  .modal-bg{backdrop-filter:blur(6px);background:rgba(3,6,14,.55)!important}
  .ai-fab{background:linear-gradient(135deg,#8B6CFF,#4F7CFF 60%,#22C3E6)!important;box-shadow:0 18px 36px -14px rgba(79,124,255,.85),inset 0 1px 0 rgba(255,255,255,.35)!important}
  #toast{border-radius:14px!important;box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
  body.dark .badge.done,body.dark .chip.ok,body.dark .flag.ok{background:rgba(18,183,106,.14)!important;color:#6EE7B7!important}
  body.dark .badge.agreed{background:rgba(46,144,250,.16)!important;color:#93C5FD!important}
  body.dark .chip.warn,body.dark .flag{background:rgba(253,176,34,.12)!important;color:#FCD38A!important}

  /* ---------- ตั้งค่า: ส่วนประกอบการประเมิน ---------- */
  .su-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
  .su-part{position:relative;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--line);cursor:pointer;transition:all .25s var(--pm-ease);user-select:none}
  .su-part input{position:absolute;opacity:0;pointer-events:none}
  .su-part b{display:block;font-family:'Prompt',sans-serif;font-weight:600;font-size:15px}
  .su-part small{display:block;color:var(--muted);font-size:12.5px}
  .su-tick{flex:none;width:24px;height:24px;border-radius:8px;border:1.5px solid rgba(148,163,184,.45);display:grid;place-items:center;transition:all .2s}
  .su-part.on{border-color:rgba(226,182,92,.7);background:linear-gradient(135deg,rgba(226,182,92,.14),rgba(226,182,92,.03));box-shadow:0 12px 26px -18px rgba(226,182,92,.9)}
  .su-part.on .su-tick{background:linear-gradient(135deg,var(--pm-gold-2),var(--pm-gold));border-color:transparent}
  .su-part.on .su-tick::after{content:"";width:10px;height:6px;border:2.5px solid var(--pm-gold-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
  .su-part:not(.on){opacity:.72}

  /* ---------- หน้าเข้าสู่ระบบ ---------- */
  .lg-wrap{min-height:calc(100vh - 66px)!important}
  body.dark .lg-hero,.lg-hero{background:radial-gradient(900px 500px at 110% 110%,rgba(226,182,92,.22),transparent 60%),radial-gradient(800px 500px at -10% -10%,rgba(124,92,250,.30),transparent 60%),linear-gradient(155deg,#0C1430 0%,#070B18 100%)!important;color:#fff}
  .lg-hero h1{font-size:clamp(34px,4vw,56px)!important;line-height:1.12!important;font-weight:700;letter-spacing:-.02em}
  .lg-gold{background:linear-gradient(90deg,var(--pm-gold-2),var(--pm-gold) 60%,#F0C27A);-webkit-background-clip:text;background-clip:text;color:transparent}
  .lg-meter{display:none!important}
  .lg-stage{position:relative;height:250px;margin:8px 0 6px;max-width:620px}
  .lg-card{position:absolute;border-radius:18px;padding:14px 16px;background:linear-gradient(rgba(16,23,42,.72),rgba(16,23,42,.72)) padding-box,linear-gradient(150deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 45%,rgba(226,182,92,.4)) border-box;border:1px solid transparent;backdrop-filter:blur(12px);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);animation:lgFloat 7s ease-in-out infinite}
  .lg-ch{font-size:12px;letter-spacing:.06em;color:#AEB9D0;font-weight:600;margin-bottom:8px}
  .lg-cs{font-size:12px;color:#AEB9D0;margin-top:8px}
  .lg-card.c1{left:0;top:10px;width:250px}
  .lg-card.c2{left:270px;top:0;width:180px;animation-delay:-2.3s}
  .lg-card.c3{left:200px;top:150px;width:260px;animation-delay:-4.6s}
  .lg-ring{position:relative;width:96px;height:96px;margin:2px 0 6px}
  .lg-ring svg{width:96px;height:96px;transform:rotate(-90deg)}
  .lg-ring circle{fill:none;stroke-width:10}
  .lg-ring .trk{stroke:rgba(255,255,255,.08)} .lg-ring .val{stroke:url(#none);stroke:var(--pm-gold);stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:49;animation:lgRing 1.6s var(--pm-ease) both;filter:drop-shadow(0 0 6px rgba(226,182,92,.6))}
  .lg-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:'Prompt',sans-serif;font-size:24px}
  .lg-dist{display:flex;gap:4px;height:8px}
  .lg-dist i{display:block;width:var(--w);background:var(--c);border-radius:4px;transform-origin:left;animation:lgGrow 1.2s var(--pm-ease) both}
  .lg-nine{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .lg-nine i{aspect-ratio:1.4;border-radius:7px;background:rgba(255,255,255,.07)}
  .lg-nine i.hi{background:linear-gradient(135deg,#12B76A,#0E9F5C);box-shadow:0 0 16px rgba(18,183,106,.5)}
  .lg-nine i.hi2{background:rgba(18,183,106,.45)} .lg-nine i.mid{background:rgba(46,144,250,.45)} .lg-nine i.lo{background:rgba(229,72,77,.5)}
  .lg-tl{display:grid;gap:6px}
  .lg-tl span{font-size:13px;color:#E2E8F5}
  .lg-tl b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;margin-right:8px;font-size:11px;background:rgba(226,182,92,.18);color:var(--pm-gold-2)}
  @keyframes lgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes lgRing{from{stroke-dashoffset:314}}
  @keyframes lgGrow{from{transform:scaleX(0)}}
  @media (prefers-reduced-motion:reduce){.lg-card,.lg-ring .val,.lg-dist i{animation:none}}
  body.dark .lg-side{background:radial-gradient(600px 400px at 50% 0,rgba(226,182,92,.08),transparent 60%),#060A14!important}
  .lg-side .login{border-radius:24px!important;padding:34px!important}
  body.dark .lg-side .login{background:linear-gradient(rgba(14,20,38,.85),rgba(14,20,38,.85)) padding-box,linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.03) 45%,rgba(226,182,92,.35)) border-box!important;border:1px solid transparent!important}
  .lg-note{display:flex;gap:8px;align-items:flex-start;font-size:13px!important;line-height:1.6}
  .lg-note svg{flex:none;width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--pm-gold);stroke-width:2}
  .lg-feat li::before{box-shadow:0 0 10px var(--c)}
  @media (max-width:900px){.lg-stage{height:auto;display:grid;gap:10px}.lg-card{position:static;width:auto!important;animation:none}.lg-card.c3{display:none}.lg-hero h1{font-size:34px!important}}

  /* ---------- โหมดสว่าง: รายละเอียด ---------- */
  body:not(.dark) .side-me{background:linear-gradient(135deg,rgba(226,182,92,.16),rgba(99,102,241,.08))}
  body:not(.dark) .tl-hero h2,body:not(.dark) .dhead h2{color:#0F172A}
  body:not(.dark) .kc .v{color:#0F172A}
  @media print{body{background:#fff!important}.sheet,.dcard,.kc,.pa-c{box-shadow:none!important;background:#fff!important;border:1px solid #ccc!important;backdrop-filter:none!important}}

  /* ---------- ปรับละเอียด ---------- */
  .sn-h,.tl-kick,.lg-kick,.lg-ch,.utbl th,table.list th{letter-spacing:.01em!important}
  .tl-kick,.lg-kick{font-size:13.5px}
  .lg-stage{height:290px}
  .lg-card.c2{left:272px;top:0}
  .lg-card.c3{left:300px;top:178px;width:250px}
  body.dark .help{background:rgba(255,255,255,.025)!important;color:var(--muted);border-color:rgba(148,163,184,.10)!important}
  .tabs{border-radius:12px!important;border-color:rgba(226,182,92,.45)!important;overflow:hidden}
  .tabs button{font-weight:600}
  .tabs button.on{background:linear-gradient(135deg,var(--pm-gold-2),var(--pm-gold))!important;color:var(--pm-gold-ink)!important}
  body.dark .tabs button:not(.on){background:rgba(255,255,255,.03)!important;color:#C9D3EA!important}
  body.dark .form-title h1{color:#F4F6FB!important}
  @media (max-width:760px){.topbar .t1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}.topbar .brand>div{min-width:0}}

  @media (max-width:760px){
    body.dark table.list tr{background:linear-gradient(rgba(16,23,42,.85),rgba(16,23,42,.85)) padding-box,linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 40%,rgba(226,182,92,.2)) border-box!important;border:1px solid transparent!important;border-radius:18px!important}
    body.dark table.list .nm{color:#F4F6FB}
  }
  body:not(.with-side) .hamb{display:none!important}
  .su-warn{margin-top:10px;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.6;color:#FCD38A;background:rgba(253,176,34,.10);border:1px solid rgba(253,176,34,.35)}
  body:not(.dark) .su-warn{color:#8a5a00;background:#FFF7E0}
  .icon-btn:disabled{opacity:.3;cursor:not-allowed}
  .su-w td,.su-w th{vertical-align:middle}

  /* ===================== v4.5: เมนูซ้ายแบบขั้นตอนการประเมิน ===================== */
  .side-nav{gap:3px!important;padding:2px 12px 14px!important}
  .side-nav .sn-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;text-transform:none!important;letter-spacing:0!important;
    font-family:'Prompt',sans-serif;font-size:13px!important;font-weight:600;color:#E2B65C!important;padding:20px 8px 8px!important;
    border-top:1px solid rgba(148,163,184,.10);margin-top:6px}
  .side-nav .sn-h:first-child{border-top:0;margin-top:0;padding-top:14px!important}
  .side-nav .sn-h em{font-style:normal;font-family:inherit;font-size:11.5px;font-weight:500;color:#7D8BA6}
  .sn-ic{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;--c:#94A3B8;
    background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent)}
  .side-nav .sn-ic svg{width:19px!important;height:19px!important;stroke:currentColor!important;stroke-width:1.9!important}
  .sn-ic.c0{--c:#94A3B8}.sn-ic.c1{--c:#60A5FA}.sn-ic.c2{--c:#E2B65C}.sn-ic.c3{--c:#2DD4BF}.sn-ic.c4{--c:#A78BFA}.sn-ic.c5{--c:#F472B6}.sn-ic.c6{--c:#4ADE80}.sn-ic.c7{--c:#FBBF24}
  /* ขั้นตอน: เลขลำดับ + เส้นเชื่อม */
  .sn-flow{counter-reset:snstep;position:relative;display:grid;gap:2px}
  .side-nav .sn-step{counter-increment:snstep;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 38px!important;border-radius:12px;min-height:54px}
  .side-nav .sn-step::after{content:counter(snstep);position:absolute;left:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font:700 12px/1 'Prompt',sans-serif;color:#C9D3E6;background:#0E1526;border:1.5px solid #3A4A6B;z-index:1}
  .sn-flow::before{content:"";position:absolute;left:16.5px;top:30px;bottom:30px;width:2px;border-radius:2px;background:linear-gradient(180deg,#3A4A6B,rgba(58,74,107,.35))}
  .sn-tx{display:grid;gap:2px;min-width:0}
  .sn-tx b{font-family:'Prompt',sans-serif;font-size:14.5px;font-weight:600;color:#F1F5FB;line-height:1.25}
  .sn-tx small{font-size:11.8px;color:#8E9BB5;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-nav .sn-step.on::after{background:linear-gradient(135deg,var(--pm-gold-2),var(--pm-gold));border-color:transparent;color:#1B1405;box-shadow:0 0 0 4px rgba(226,182,92,.18)}
  .side-nav .sn-step.on .sn-tx b{color:#FBE7B5}
  .side-nav .sn-step.on::before,.side-nav .sn-item.on::before,.side-nav .sn-sub.on::before{display:none}
  .side-nav .sn-step.on .sn-ic,.side-nav .sn-item.on .sn-ic{box-shadow:inset 0 0 0 1.5px var(--c),0 6px 16px -8px var(--c)}
  .side-nav .sn-step.on svg,.side-nav .sn-item.on svg{stroke:currentColor!important}
  /* ปุ่มย่อย สร้างข้อตกลงใหม่ */
  .side-nav .sn-sub{display:flex;align-items:center;gap:8px;margin:0 6px 4px 84px;padding:6px 12px!important;border-radius:99px!important;width:max-content;
    font-size:13px!important;font-weight:600;color:#E2B65C!important;background:rgba(226,182,92,.10)!important;border:1px dashed rgba(226,182,92,.45)!important}
  .side-nav .sn-sub svg{width:15px!important;height:15px!important;stroke-width:2.4!important}
  .side-nav .sn-sub:hover{background:rgba(226,182,92,.20)!important}
  .side-nav .sn-sub.on{background:linear-gradient(135deg,var(--pm-gold-2),var(--pm-gold))!important;color:#1B1405!important;border-style:solid!important}
  /* รายการทั่วไป */
  .side-nav .sn-item{display:flex;align-items:center;gap:12px;padding:6px 10px!important;border-radius:12px;font-size:14.5px;font-weight:500;color:#E3E9F4}
  .sn-lb{min-width:0;flex:1}
  /* แถบบัญชีผู้ใช้ */
  .sn-acct{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(148,163,184,.10)}
  .side-nav .sn-acct button{flex-direction:column;justify-content:center;gap:5px;padding:9px 2px!important;border-radius:12px;font-size:11px!important;color:#AEB9D0!important;
    background:rgba(255,255,255,.03)!important;border:1px solid rgba(148,163,184,.12)!important;text-align:center;line-height:1.2}
  .side-nav .sn-acct button:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
  .side-nav .sn-acct svg{width:18px!important;height:18px!important}
  .side-nav .sn-acct #sOut:hover{color:#FCA5A5!important;border-color:rgba(248,113,113,.4)!important}
  .side-nav .sn-acct button.hidden{display:none}

  /* ===================== v4.5: หน้าเข้าสู่ระบบ (เรียบ เป็นมืออาชีพ) ===================== */
  .lg-stage,.lg-feat{display:none!important}
  body.dark .lg-hero,.lg-hero{background:radial-gradient(720px 420px at 100% 100%,rgba(226,182,92,.10),transparent 65%),linear-gradient(160deg,#0B1222 0%,#0A1020 55%,#080D1A 100%)!important;
    padding:64px 64px 44px!important;gap:26px!important;justify-content:center;border-right:1px solid rgba(148,163,184,.10)}
  .lg-hero::before,.lg-hero::after{display:none!important}
  .lg-hero h1{font-size:clamp(34px,3.6vw,52px)!important}
  .lg-hero p{font-size:16.5px!important;line-height:1.75;color:#B8C3D9;opacity:1!important;max-width:34em}
  .lg-cycle{margin-top:6px;max-width:640px}
  .lg-cyh{font-size:13px;font-weight:600;color:#8E9BB5;margin-bottom:14px}
  .lg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);position:relative}
  .lg-steps::before{content:"";position:absolute;left:calc(100%/12);right:calc(100%/12);top:15px;height:1px;background:rgba(226,182,92,.35)}
  .lg-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:13px;font-weight:500;color:#D5DCEA;text-align:center;white-space:nowrap}
  .lg-steps li span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 'Prompt',sans-serif;color:#E2B65C;
    background:#0B1222;border:1px solid rgba(226,182,92,.55)}
  .lg-trust{display:grid;grid-template-columns:repeat(3,1fr);max-width:640px;margin-top:10px;border-top:1px solid rgba(148,163,184,.14);padding-top:22px}
  .lg-trust>div{display:flex;gap:11px;align-items:flex-start;padding-right:14px}
  .lg-trust>div+div{padding-left:16px;border-left:1px solid rgba(148,163,184,.14)}
  .lg-trust svg{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:#E2B65C;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .lg-trust span{font-size:12.5px;line-height:1.5;color:#8E9BB5}
  .lg-trust b{display:block;font-size:14px;font-weight:600;color:#EEF2F8;margin-bottom:2px}
  @media (min-width:901px){.lg-side .pf-card svg,.lg-side .pf-card>b{display:none!important}.lg-side .pf-card{padding:0 0 16px!important;margin-bottom:6px!important;justify-items:start!important;text-align:left!important;border-bottom:1px solid rgba(148,163,184,.14)}
    .lg-side .pf-card>div:not(.muted){font-family:'Prompt',sans-serif;font-weight:600;font-size:15px;color:#E2B65C}}
  @media (max-width:900px){
    body .lg-hero,body.dark .lg-hero{padding:30px 20px!important}
    .lg-steps{grid-template-columns:repeat(3,1fr);row-gap:16px}.lg-steps::before{display:none}
    .lg-trust{grid-template-columns:1fr;gap:14px}.lg-trust>div+div{padding-left:0;border-left:0}
  }

  /* v4.5: การ์ด 6 ขั้นบนหน้าเข้าสู่ระบบ (ไอคอนชุดเดียวกับเมนูซ้าย) */
  .sn-ic.c8{--c:#FB923C}
  .lg-steps{display:none!important}
  .lg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:none}
  .lg-step{position:relative;display:flex;gap:12px;align-items:center;padding:14px 14px;border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(148,163,184,.14);
    box-shadow:0 10px 30px -18px rgba(0,0,0,.8);transition:transform .25s var(--pm-ease,ease),border-color .25s,background .25s}
  .lg-step:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sc,#E2B65C) 45%,transparent);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
  .lg-step .sn-ic{width:44px;height:44px;border-radius:13px}
  .lg-step .sn-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .lg-st{display:grid;gap:1px;min-width:0}
  .lg-st em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;color:#E2B65C}
  .lg-st b{font-family:'Prompt',sans-serif;font-size:15px;font-weight:600;color:#F1F5FB;line-height:1.3}
  .lg-st small{font-size:12px;color:#8E9BB5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lg-step:has(.c1){--sc:#60A5FA}.lg-step:has(.c2){--sc:#E2B65C}.lg-step:has(.c3){--sc:#2DD4BF}.lg-step:has(.c8){--sc:#FB923C}.lg-step:has(.c4){--sc:#A78BFA}.lg-step:has(.c6){--sc:#4ADE80}
  .lg-cycle{max-width:680px!important}.lg-trust{max-width:680px!important}
  .lg-cyh{display:flex;align-items:center;gap:10px}
  .lg-cyh::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(226,182,92,.4),transparent)}
  @media (max-width:1180px) and (min-width:901px){.lg-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:900px){.lg-grid{grid-template-columns:1fr 1fr;gap:10px}.lg-step{padding:12px}.lg-step .sn-ic{width:38px;height:38px}.lg-st small{white-space:normal}}

  /* v4.6: สถิติการมาปฏิบัติงาน */
  .att-box{grid-column:1/-1;border:1px solid var(--line,rgba(148,163,184,.18));border-radius:14px;padding:12px 14px 14px;background:rgba(148,163,184,.04)}
  .att-h{font-weight:600;font-size:14px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
  .att-h span{font-weight:400;font-size:12px;color:var(--muted)}
  .att-g{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .att-in{position:relative;display:block}
  .att-in input{width:100%;padding-right:52px!important;text-align:right}
  .att-in em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13px;color:var(--muted);pointer-events:none}
  @media (max-width:700px){.att-g{grid-template-columns:1fr 1fr}}

  /* ===================== v4.6: เมนูซ้าย ขั้นเตรียมการ · กลุ่ม ===================== */
  .sn-ic.c9{--c:#F87171}
  .side-nav .sn-prep{display:flex;align-items:center;gap:12px;margin:2px 0 8px;padding:10px 10px!important;border-radius:14px;
    border:1px dashed rgba(96,165,250,.45)!important;background:rgba(96,165,250,.06)!important}
  .side-nav .sn-prep:hover{background:rgba(96,165,250,.12)!important}
  .side-nav .sn-prep.on{border-style:solid!important;background:linear-gradient(90deg,rgba(96,165,250,.20),rgba(96,165,250,.05))!important}
  .side-nav .sn-prep.on::before{display:none}
  .sn-tag{font-style:normal;font-size:11px;font-weight:700;color:#60A5FA;letter-spacing:.02em}
  .sn-grp{display:grid;gap:3px}
  .sn-grp.hidden{display:none!important}
  /* ===================== v4.6: รายการตามสังกัด ===================== */
  .lh-t{display:grid;gap:2px}
  .lh-kick{font-size:12.5px;font-weight:700;color:var(--pm-gold,#C99A3B);letter-spacing:.02em}
  .lbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)}
  .lbar .counts{padding:0!important;border:0!important;margin:0!important;flex-wrap:wrap}
  .c-note{font-size:13px!important;color:var(--muted);display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
  .lview{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;background:rgba(148,163,184,.06)}
  .seg button{border:0;background:none;color:inherit;font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer;opacity:.75}
  .seg button.on{background:linear-gradient(135deg,var(--pm-gold-2,#F3D58A),var(--pm-gold,#E2B65C));color:#1B1405;opacity:1}
  table.lgroup tr.lg1,table.lgroup tr.lg2{cursor:pointer}
  table.lgroup tr.lg1 td{background:rgba(148,163,184,.08);border-top:1px solid var(--line);padding:12px 16px!important}
  table.lgroup tr.lg2 td{background:rgba(148,163,184,.035);padding:10px 16px 10px 38px!important}
  table.lgroup tr.lg1:hover td,table.lgroup tr.lg2:hover td{background:rgba(226,182,92,.10)}
  .lgh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .lg1 .lgh b{font-family:'Prompt',sans-serif;font-size:16px}
  .lg2 .lgh{font-weight:600;font-size:14.5px}
  .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;opacity:.7;margin-right:2px}
  tr.open>td .chev{transform:rotate(45deg)}
  .lgc{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(226,182,92,.16);color:var(--pm-gold,#C99A3B)}
  .lgs{display:inline-flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-left:4px}
  .gs{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;margin-right:12px}
  .gs i{width:8px;height:8px;border-radius:50%;display:inline-block}
  .st-draft{background:#94A3B8}.st-wait{background:#60A5FA}.st-done{background:#22C55E}
  .gs-avg{font-weight:700;color:inherit}
  .lgp{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
  .gp{display:inline-block;width:120px;height:7px;border-radius:99px;background:rgba(148,163,184,.18);overflow:hidden}
  .gp i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#22C55E,#4ADE80)}
  .gpn{font-size:12.5px;min-width:38px;text-align:right}
  table.lgroup tr.lrow td:first-child{padding-left:56px!important}
  .acts-c{white-space:nowrap;text-align:right}
  .warn-t{color:#F59E0B!important}
  .ov-wrap{padding:6px 18px 18px}
  .ov-tbl{width:100%;border-collapse:collapse}
  .ov-tbl th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
  .ov-tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
  .ov-tbl .c{text-align:center}
  .ov-tbl tr{cursor:pointer}
  .ov-tbl tr:hover td{background:rgba(226,182,92,.08)}
  .ov-tbl tr.ov1 td{background:rgba(148,163,184,.07)}
  .ov-tbl tr.ov1 b{font-family:'Prompt',sans-serif;font-size:15.5px}
  .ov-tbl tr.ov2 td:first-child{padding-left:30px}
  .ov-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pm-gold,#E2B65C);margin-right:10px;vertical-align:middle}
  .ov-tbl .pg{white-space:nowrap}
  .ov-hint{margin:10px 2px 0;font-size:13px}
  @media (max-width:760px){
    .lgp{margin-left:0;width:100%}.gp{flex:1}
    table.lgroup tr.lrow td:first-child{padding-left:16px!important}
    table.lgroup tr.lg2 td{padding-left:22px!important}
    .ov-tbl th:nth-child(3),.ov-tbl td:nth-child(3){display:none}
  }

  @media (max-width:760px){
    table.list.lgroup td:nth-child(6){display:block!important;grid-column:1/-1;text-align:left;margin-top:6px}
    table.list.lgroup tr.lg1,table.list.lgroup tr.lg2{display:block;padding:0;border:0;margin:0 0 8px;background:none}
    table.list.lgroup tr.lg1 td{display:block;padding:12px 14px!important;background:rgba(148,163,184,.12)!important;border-radius:12px}
    table.list.lgroup tr.lg2 td{display:block;padding:10px 14px 10px 22px!important;background:rgba(148,163,184,.06)!important;border-radius:12px}
  }

  .mv-flow{border:1px solid rgba(226,182,92,.35);background:rgba(226,182,92,.07);border-radius:12px;padding:10px 14px;font-size:13.5px}
  .mv-flow b{display:block;margin-bottom:4px;color:var(--pm-gold,#C99A3B)}
  .mv-flow ol{margin:0;padding-left:20px;line-height:1.7}
  .mv-flow li.hidden{display:none}

  /* v4.6: TNA */
  .tna-acts{display:inline-flex;gap:8px;flex-wrap:wrap}
  .tna-tbl .c,.hm-tbl .c{text-align:center}
  .tna-tbl tr.tna-r{cursor:pointer}
  .tna-tbl tr.tna-r:hover td{background:rgba(226,182,92,.08)}
  .tna-tbl .chev{display:inline-block;margin-right:8px;vertical-align:middle}
  .tna-tbl tr.open .chev{transform:rotate(45deg)}
  .tna-n{display:flex;align-items:center;gap:8px;min-width:170px}
  .tna-b{flex:1;height:8px;border-radius:99px;background:rgba(148,163,184,.18);overflow:hidden;max-width:120px}
  .tna-b i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2DD4BF,#60A5FA)}
  .pri{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 12px;border-radius:99px}
  .pri-h{background:rgba(248,113,113,.18);color:#F87171}.pri-m{background:rgba(251,191,36,.18);color:#D9A21B}.pri-l{background:rgba(148,163,184,.18);color:var(--muted)}
  .tna-sub td{background:rgba(148,163,184,.05)}
  .tna-pp{display:flex;flex-wrap:wrap;gap:6px}
  .tna-p{font-size:13px;border:1px solid var(--line);border-radius:10px;padding:5px 10px;background:rgba(255,255,255,.02)}
  .tna-g{font-weight:700;color:#F87171;margin-left:4px}
  .hm-tbl{border-collapse:separate;border-spacing:3px;width:100%;font-size:13px}
  .hm-tbl th{font-size:12px;font-weight:600;color:var(--muted);padding:4px 6px;text-align:center;white-space:nowrap}
  .hm-tbl th:first-child,.hm-tbl td:first-child{text-align:left;white-space:nowrap;padding-right:10px}
  .hm-tbl td.hm{text-align:center;font-weight:700;border-radius:7px;min-width:42px;height:32px;background:rgba(45,212,191,calc(var(--a) * .85 + .04));color:#fff}
  .tl-idpflow{margin-bottom:14px}

  .side-nav .sn-grp>.sn-h:first-child{border-top:1px solid rgba(148,163,184,.10);margin-top:6px;padding-top:20px!important}

  /* ===================== v4.7: เอกสารข้อตกลง / แบบประเมิน (พิมพ์และส่งออก) ===================== */
  .pd-host{position:fixed;left:-12000px;top:0;width:794px;background:#fff;z-index:-1}
  .pdoc{--pn:#13233F;--pg:#C9973A;--pl:#E4E8EF;--pt:#1F2A3C;--pm:#5B6678;width:794px;box-sizing:border-box;padding:30px 34px 22px;background:#fff;color:var(--pt);
    font-family:'IBM Plex Sans Thai','Prompt',Tahoma,sans-serif;font-size:12.5px;line-height:1.45}
  .pdoc *{box-sizing:border-box}
  .pd-h{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px;border-bottom:3px solid var(--pn)}
  .pd-org{display:flex;gap:14px;align-items:center}
  .pd-logo{width:58px;height:58px;object-fit:contain}
  .pd-mono{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font:700 24px/1 'Prompt',sans-serif;color:var(--a);background:var(--b);border:3px solid var(--a);box-sizing:border-box}
  .pd-cn{font:700 18px/1.25 'Prompt',sans-serif;color:var(--pn)}
  .pd-sys{font-size:12.5px;color:var(--pm);margin-top:2px}
  .pd-meta{text-align:right;font-size:12px;color:var(--pm);line-height:1.6}
  .pd-meta b{font-size:16px;color:var(--pn)}
  .pd-id{font-family:monospace;font-size:11px}
  .pd-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 10px;padding:9px 14px;border-radius:8px;background:linear-gradient(90deg,#F6EEDC,#FBF8F1);border-left:5px solid var(--pg)}
  .pd-title.ap{background:linear-gradient(90deg,#E6EEF9,#F5F8FC);border-left-color:#2563A8}
  .pd-title b{font:700 17px/1.2 'Prompt',sans-serif;color:var(--pn)}
  .pd-title span{color:var(--pm);font-size:12.5px}
  .pd-title em{margin-left:auto;font-style:normal;font-size:12px;color:var(--pm)}
  .pd-info{width:100%;border-collapse:collapse;margin-bottom:12px}
  .pd-info th,.pd-info td{border:1px solid var(--pl);padding:6px 9px;text-align:left;vertical-align:top}
  .pd-info th{width:15%;background:#F5F7FA;font-weight:600;color:var(--pm);white-space:nowrap}
  .pd-info td{width:35%;font-weight:600}
  .pd-sec{margin-top:12px}
  .pd-keep{break-inside:avoid;page-break-inside:avoid}
  .pd-band{font:600 13.5px/1.3 'Prompt',sans-serif;color:#fff;padding:7px 12px;border-radius:7px 7px 0 0;background:var(--pn)}
  .pd-band.p1{background:#1D4E89}.pd-band.p2{background:#2F6B4F}.pd-band.p3{background:#8A6A2A}.pd-band.sg{background:#4A5568}
  .pd-t{width:100%;border-collapse:collapse;table-layout:fixed;margin-bottom:8px}
  .pd-t th,.pd-t td{border:1px solid #CDD3DD;padding:5px 6px;vertical-align:middle;word-wrap:break-word}
  .pd-t thead th{background:#EEF2F7;font-weight:600;font-size:11.5px;text-align:center;color:#33415A}
  .pd-t thead th.l{text-align:left}
  .pd-t tr.pd-gh th{background:#F9F3E6;color:var(--pn);font-size:12.5px;text-align:left}
  .pd-t tr.pd-gh th+th{text-align:right;font-weight:500;color:var(--pm)}
  .pd-t tbody tr{break-inside:avoid;page-break-inside:avoid}
  .pd-t td.c{text-align:center}.pd-t td.r{text-align:right}.pd-t td.b{font-weight:700}.pd-t td.sm{font-size:11px}
  .pd-t tr.pd-sum td{background:#F8FAFC;font-weight:700}
  .pd-code{font-size:10.5px;color:var(--pm)}
  .pd-tag{font-size:10px;padding:0 5px;border-radius:4px;background:#FDF0DC;color:#9A6A12}
  .pd-crit{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
  .pd-crit span{font-size:10px;padding:1px 6px;border-radius:4px;background:#F1F4F8;color:#4B5568}
  .pd-crit span.hit{background:var(--pn);color:#fff;font-weight:700}
  .pd-ev{font-size:10px;color:var(--pm);margin-top:3px}
  .pd-lv{font-weight:700;font-size:14px;color:var(--pn);background:#FBF6EA}
  .pd-total{display:flex;justify-content:flex-end;gap:14px;align-items:center;margin-top:6px;padding:8px 12px;border:1px solid var(--pl);border-radius:8px;background:#F8FAFC;font-weight:600}
  .pd-total b{font-size:15px}.pd-total b.ok{color:#15803D}.pd-total b.bad{color:#B45309}
  .pd-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid var(--pl);border-top:0;padding:10px;border-radius:0 0 8px 8px}
  .pd-legend{display:grid;gap:4px}
  .pd-legend div{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:4px 8px;border-radius:6px;background:#F7F9FC;font-size:11.5px}
  .pd-legend b{font:700 14px/1 'Prompt',sans-serif;color:var(--pn);text-align:center}
  .pd-legend em{font-style:normal;color:var(--pm)}
  .pd-legend div.on{background:var(--pn);color:#fff}.pd-legend div.on b,.pd-legend div.on em{color:#fff}
  .pd-note{border:1px solid var(--pl);border-radius:8px;min-height:84px;display:flex;flex-direction:column}
  .pd-nh{font-weight:600;font-size:12px;padding:6px 10px;background:#F5F7FA;border-bottom:1px solid var(--pl);border-radius:8px 8px 0 0}
  .pd-nb{padding:8px 10px;white-space:pre-wrap;flex:1}
  .pd-res{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:10px;border:1px solid var(--pl);border-top:0;padding:10px}
  .pd-res+.pd-2{border-radius:0 0 8px 8px}
  .pd-box{border:1px solid var(--pl);border-radius:10px;padding:10px;text-align:center;display:flex;flex-direction:column;justify-content:center}
  .pd-box span{font-size:11.5px;color:var(--pm)}
  .pd-box b{font:700 24px/1.2 'Prompt',sans-serif;color:var(--pn);margin:3px 0}
  .pd-box em{font-style:normal;font-size:10.5px;color:var(--pm)}
  .pd-box.gr{background:linear-gradient(180deg,#FBF4E3,#fff);border-color:#E9D3A3}
  .pd-box.gr b{font-size:30px;color:#8A6A2A}
  .pd-signs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:1px solid var(--pl);border-top:0;padding:16px 12px 14px;border-radius:0 0 8px 8px}
  .pd-sign{text-align:center;font-size:12px;color:var(--pm)}
  .pd-role{font-weight:700;color:var(--pt);margin-bottom:46px}
  .pd-line{border-bottom:1px dotted #6B7486;margin:0 10px 6px}
  .pd-nm{color:var(--pt);font-weight:600}
  .pd-ps,.pd-dt{margin-top:3px}
  .pd-foot{display:flex;justify-content:space-between;margin-top:14px;padding-top:8px;border-top:1px solid var(--pl);font-size:10px;color:#8A93A3}
  .ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ex-b{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(148,163,184,.06);color:inherit;cursor:pointer;font:inherit}
  .ex-b b{font-size:15px}.ex-b span{font-size:12.5px;color:var(--muted);line-height:1.45}
  .ex-b:hover{border-color:var(--pm-gold,#E2B65C);background:rgba(226,182,92,.10)}
  .ex-b.line{border-color:rgba(6,199,85,.45)}.ex-b.line:hover{background:rgba(6,199,85,.10)}
  @media (max-width:600px){.ex-grid{grid-template-columns:1fr}}
  @media print{
    body.print-doc #printArea .pdoc{width:auto;padding:0;font-size:9.6pt}
    body.print-doc #printArea .pd-t th,body.print-doc #printArea .pd-t td{padding:3px 5px}
    body.print-doc #printArea .pd-band,body.print-doc #printArea .pd-t thead th,body.print-doc #printArea .pd-title,body.print-doc #printArea .pd-crit span.hit,body.print-doc #printArea .pd-mono,body.print-doc #printArea .pd-legend div{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  }

  /* ===================== v4.7: หน้ากรอกแบบกระดาษ (ใกล้เคียงเอกสารที่พิมพ์) ===================== */
  #viewEdit.paper{--pt:#1F2A3C;--pm:#5B6678;--pl:#D8DEE8;--pn:#13233F;background:#fff;color:var(--pt);border-radius:18px;padding:26px 30px 30px;max-width:1180px;margin:0 auto 20px;
    box-shadow:0 30px 70px -36px rgba(0,0,0,.7);border:1px solid #E6EAF0}
  #viewEdit.paper .sheet{background:transparent!important;border:0!important;box-shadow:none!important;margin:0 0 16px!important;padding:0!important;border-radius:0!important;color:var(--pt)!important}
  #viewEdit.paper .sheet::before,#viewEdit.paper .sheet::after{display:none!important}
  #viewEdit.paper .pe-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px;border-bottom:3px solid var(--pn)}
  #viewEdit.paper .pd-cn{font:700 19px/1.25 'Prompt',sans-serif;color:var(--pn)}
  #viewEdit.paper .pd-sys{font-size:13px;color:var(--pm)}
  #viewEdit.paper .docid{color:var(--pm)!important;text-align:right;font-size:13px;line-height:1.6}
  #viewEdit.paper .docid b{color:var(--pt)}
  #viewEdit.paper .pe-title{margin:14px 0 4px}
  #viewEdit.paper .pd-title b{font-size:20px}
  #viewEdit.paper .band{color:#fff!important;font:600 15px/1.3 'Prompt',sans-serif!important;padding:9px 14px!important;border-radius:8px 8px 0 0!important;background:#13233F!important;border:0!important;letter-spacing:0!important}
  #viewEdit.paper .band.head{background:#4A5568!important}
  #viewEdit.paper .band.p1{background:#1D4E89!important}#viewEdit.paper .band.p2{background:#2F6B4F!important}#viewEdit.paper .band.p3{background:#8A6A2A!important}
  #viewEdit.paper .pad{border:1px solid var(--pl);border-top:0;border-radius:0 0 8px 8px;padding:14px!important;background:#fff!important}
  #viewEdit.paper .sheet>.pad:first-child,#viewEdit.paper .pe-title+.pad{border-top:1px solid var(--pl);border-radius:8px;margin-top:10px}
  #viewEdit.paper .muted,#viewEdit.paper .help,#viewEdit.paper label.f{color:var(--pm)!important}
  #viewEdit.paper label.f input,#viewEdit.paper label.f select,#viewEdit.paper label.f textarea,#viewEdit.paper .items input,#viewEdit.paper .items select,#viewEdit.paper .items textarea,#viewEdit.paper .gh input{
    background:#F7F9FC!important;border:1px solid #D3DAE5!important;color:var(--pt)!important;border-radius:7px!important;box-shadow:none!important}
  #viewEdit.paper label.f input:focus,#viewEdit.paper .items input:focus,#viewEdit.paper .items textarea:focus,#viewEdit.paper .items select:focus,#viewEdit.paper label.f textarea:focus{border-color:#C9973A!important;background:#fff!important;outline:2px solid rgba(201,151,58,.25)}
  #viewEdit.paper input:disabled,#viewEdit.paper select:disabled,#viewEdit.paper textarea:disabled{background:#fff!important;border-color:transparent!important;color:var(--pt)!important;opacity:1!important;-webkit-text-fill-color:var(--pt)}
  #viewEdit.paper .group{border:1px solid var(--pl);border-top:0;padding:0!important;margin:0!important;background:#fff!important;border-radius:0!important}
  #viewEdit.paper .group+.group{border-top:1px solid var(--pl)}
  #viewEdit.paper .gh{background:#F9F3E6!important;color:var(--pn)!important;padding:9px 14px!important;border-bottom:1px solid var(--pl);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  #viewEdit.paper .gname,#viewEdit.paper .gtitle{font-weight:700;color:var(--pn)!important}
  #viewEdit.paper .gw,#viewEdit.paper .gw2{color:var(--pm)!important;font-size:13px}
  #viewEdit.paper table.items{border-collapse:collapse!important;width:100%;background:#fff!important}
  #viewEdit.paper table.items th{background:#EEF2F7!important;color:#33415A!important;font-weight:600;font-size:12.5px;border:1px solid #D3DAE5!important;padding:7px 6px!important}
  #viewEdit.paper table.items td{border:1px solid #DDE3EC!important;color:var(--pt)!important;background:#fff!important;padding:7px 7px!important;vertical-align:top}
  #viewEdit.paper table.items tbody tr:hover td{background:#FCFAF4!important}
  #viewEdit.paper table.items tfoot td{background:#F8FAFC!important;font-weight:700}
  #viewEdit.paper .th-sub{font-weight:400;font-size:11.5px;color:var(--pm)}
  #viewEdit.paper .c-no{text-align:center;color:var(--pm)!important}
  #viewEdit.paper .it-t{font-weight:600;line-height:1.45}
  #viewEdit.paper .cstrip{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0 2px}
  #viewEdit.paper .cstrip .k{font-size:11.5px;padding:2px 8px 2px 3px;border-radius:6px;background:#F1F4F8;color:#4B5568;display:inline-flex;gap:5px;align-items:center;border:1px solid #E3E8EF}
  #viewEdit.paper .cstrip .k i{font-style:normal;font-weight:700;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;background:#fff;color:var(--pn);font-size:11px}
  #viewEdit.paper .cstrip .k.hit{background:var(--pn);color:#fff;border-color:var(--pn)}
  #viewEdit.paper .cstrip .k.hit i{background:#E2B65C;color:#1B1405}
  #viewEdit.paper .c-res input{text-align:center;font-weight:700;font-size:15px;border:2px solid #E2B65C!important;background:#FFFBF0!important}
  #viewEdit.paper .pv{font-size:11.5px;color:var(--pm);text-align:center;margin-top:4px}
  #viewEdit.paper .c-sc.score{text-align:center;font:700 17px/1.3 'Prompt',sans-serif;color:var(--pn)!important;background:#FBF6EA!important;vertical-align:middle}
  #viewEdit.paper .c-num{vertical-align:middle;text-align:center}
  #viewEdit.paper .c-lv select{width:100%}
  #viewEdit.paper .totalline{border:1px solid var(--pl);border-top:0;background:#F8FAFC!important;color:var(--pt)!important;padding:10px 14px!important;border-radius:0}
  #viewEdit.paper .totalline.grand{border-radius:0 0 8px 8px;background:#13233F!important;color:#fff!important}
  #viewEdit.paper .gfoot{padding:10px 14px!important;border-top:1px solid var(--pl);background:#FCFDFE!important}
  #viewEdit.paper .signbox{border:1px solid var(--pl)!important;background:#FCFDFE!important;border-radius:10px;color:var(--pt)!important}
  #viewEdit.paper .signbox h4{color:var(--pn)!important}
  #viewEdit.paper .legend>div{background:#F7F9FC!important;color:var(--pt)!important;border:1px solid #E3E8EF}
  #viewEdit.paper .legend>div.on{background:var(--pn)!important;color:#fff!important}
  #viewEdit.paper .result .big{color:var(--pn)!important}
  #viewEdit.paper .evbox{background:#FCFDFE!important;border:1px solid var(--pl)!important;color:var(--pt)!important;margin:0!important;border-top:0!important;border-radius:0!important}
  #viewEdit.paper .lockbar{border-radius:10px;margin-bottom:14px}
  #viewEdit.paper .att-box{background:#F9FAFC!important;border-color:var(--pl)!important}
  #viewEdit.paper .att-in em{color:var(--pm)}
  #viewEdit.paper .flag{color:#9A6A12}
  #viewEdit.paper .ev{margin-top:6px}
  #viewEdit.paper .chip{font-size:12px}
  body.mode-agree #dScore,body.mode-agree #dBar{display:none!important}
  @media (max-width:760px){
    #viewEdit.paper{padding:14px 12px;border-radius:12px}
    #viewEdit.paper .pe-head{flex-direction:column;align-items:flex-start}
    #viewEdit.paper .docid{text-align:left}
    #viewEdit.paper table.items.ap2 thead{display:none}
    #viewEdit.paper table.items.ap2 tbody tr{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;border-bottom:1px solid var(--pl)}
    #viewEdit.paper table.items.ap2 td{border:0!important;padding:0!important}
    #viewEdit.paper table.items.ap2 td:nth-child(1){display:none}
    #viewEdit.paper table.items.ap2 td:nth-child(2){grid-column:1/-1}
    #viewEdit.paper table.items.ap2 td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--pm);margin-bottom:2px}
    #viewEdit.paper table.items.ap2 td:nth-child(5),#viewEdit.paper table.items.ap2 td:nth-child(6){grid-column:span 2}
  }

  @media (min-width:761px){
    #viewEdit.paper table.items{display:table!important;table-layout:fixed}
    #viewEdit.paper table.items thead{display:table-header-group!important}
    #viewEdit.paper table.items tbody{display:table-row-group!important}
    #viewEdit.paper table.items tfoot{display:table-footer-group!important}
    #viewEdit.paper table.items tr{display:table-row!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important}
    #viewEdit.paper table.items td,#viewEdit.paper table.items th{display:table-cell!important;grid-column:auto!important}
    #viewEdit.paper table.items td[data-label]::before{display:none!important}
    #viewEdit.paper table.items.ag td{vertical-align:middle}
    #viewEdit.paper table.items.ag td.c-text{vertical-align:top}
    #viewEdit.paper table.items.ag textarea{width:100%;min-height:52px;font-weight:600;resize:vertical}
    #viewEdit.paper table.items.ag input.num,#viewEdit.paper table.items.ag input.crit{width:100%;text-align:center;padding:6px 3px!important}
    #viewEdit.paper table.items.ag select{width:100%;font-size:12.5px;padding:6px 4px!important}
    #viewEdit.paper table.items .icon-btn{color:#9AA3B2!important;background:none!important;border:0!important}
    #viewEdit.paper table.items .icon-btn:hover{color:#DC2626!important}
  }
  /* ===== v4.7 ปรับเงินเดือน: รูปแบบวงเงิน + ตารางรายหน่วยงาน ===== */
  .sb-mode{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
  .sb-mb{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 18px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--text);font:inherit;cursor:pointer}
  .sb-mb b{font-family:'Prompt',sans-serif;font-size:15.5px}
  .sb-mb span{font-size:13px;color:var(--muted);line-height:1.5}
  .sb-mb.on{border-color:var(--gold,#E2B65C);box-shadow:0 0 0 3px rgba(226,182,92,.22);background:linear-gradient(180deg,rgba(226,182,92,.10),transparent)}
  .sb-mb:disabled{cursor:default;opacity:.85}
  .sb-card{margin-bottom:6px}
  .sb-t1{min-width:1180px}
  .sb-t1 td,.sb-t1 th{white-space:nowrap}
  .sb-t1 td:first-child{min-width:170px;white-space:normal}
  .sb-t1 .link{font-size:12.5px}
  .sb-t1 td,.sb-t1 th{vertical-align:middle}
  .sb-in{width:72px!important;padding:5px 6px!important;text-align:center}
  .sb-bar{height:7px;border-radius:99px;background:rgba(148,163,184,.25);overflow:hidden;margin-bottom:3px}
  .sb-bar i{display:block;height:100%;border-radius:99px}
  .sb-t{font-size:12.5px;color:var(--muted)} .sb-t.bad{color:var(--bad);font-weight:600}
  .sb-sum td{font-weight:700;border-top:2px solid var(--line);background:rgba(148,163,184,.08)}
  .sal-t tr.lg1 td{padding:11px 14px!important}
  .sal-t .gs{font-size:12.5px;color:var(--muted)}
  body.dark .sb-mb{background:#111A2E;border-color:#22304D}
  @media (max-width:760px){.sb-mode{grid-template-columns:1fr}}
  /* ===== v4.7 ศูนย์ผู้ดูแลระบบ ===== */
  .sn-h.sn-adm span{color:#F59E0B}
  #viewSys{max-width:1280px;margin:0 auto;padding-bottom:40px}
  .sys-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
  .sys-roles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 14px}
  .sys-role{display:flex;flex-direction:column;gap:2px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--text);font:inherit;cursor:pointer}
  .sys-role b{font-family:'Prompt',sans-serif;font-size:24px;line-height:1.1}
  .sys-role span{font-weight:700;font-size:14px}
  .sys-role em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.45}
  .sys-role.on{border-color:var(--gold,#E2B65C);box-shadow:0 0 0 3px rgba(226,182,92,.22)}
  .sys-tbl td{vertical-align:middle}
  .sys-acts{display:flex;flex-wrap:wrap;gap:6px}
  .sys-rb{display:inline-block;white-space:nowrap;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:700;background:rgba(148,163,184,.18)}
  .sys-rb.r-admin{background:#FDE68A;color:#78350F} .sys-rb.r-ceo{background:#DDD6FE;color:#3B0764}
  .badge.sys-off{background:rgba(220,38,38,.14);color:#B91C1C} .badge.sys-lock{background:rgba(245,158,11,.18);color:#92400E}
  .sys-phs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .sys-ph{padding:18px 20px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper)}
  .sys-ph>div{display:flex;align-items:center;gap:10px}
  .sys-ph b{font-family:'Prompt',sans-serif;font-size:17px}
  .sys-ph p{margin:8px 0 12px;font-size:13.5px;line-height:1.6}
  .sys-dot{width:10px;height:10px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.18)}
  .sys-ph.closed .sys-dot{background:#DC2626;box-shadow:0 0 0 4px rgba(220,38,38,.18)}
  .sys-ph.open{border-color:rgba(22,163,74,.45)} .sys-ph.closed{border-color:rgba(220,38,38,.45)}
  .sys-warn{color:#B45309;font-weight:700}
  tr.sys-ok td{opacity:.6}
  .sys-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
  .sys-kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
  .sys-kv span{color:var(--muted)} .sys-kv b{text-align:right;overflow-wrap:anywhere}
  .sys-log td{font-size:13px}
  body.dark .sys-role,body.dark .sys-ph{background:#111A2E;border-color:#22304D}
  @media (max-width:1000px){.sys-roles{grid-template-columns:repeat(2,minmax(0,1fr))}.sys-3,.sys-phs{grid-template-columns:1fr}}
  /* ===== v4.7 เกณฑ์ที่หัวหน้าปรับเองได้ ===== */
  .crit-hint{font-weight:400;font-size:11.5px;opacity:.75;margin-top:2px}
  #viewEdit table.items.ag input.crit{border:1px dashed rgba(148,163,184,.7)!important;border-radius:6px;background:rgba(255,253,245,.9)!important;color:#1F2937!important;font-size:12.5px;cursor:text}
  #viewEdit table.items.ag input.crit:hover{border-color:#B7791F!important}
  #viewEdit table.items.ag input.crit:focus{border:1.5px solid #B7791F!important;background:#fff!important;outline:0}
  #viewEdit table.items.ag input.crit.own{background:#FEF3C7!important;border:1.5px solid #D97706!important;font-weight:700}
  .pd-t td.own{font-weight:700;background:#FFFBEB}
  .tag.tag-own{background:#FEF3C7;color:#92400E;border:1px solid #F59E0B}
  #viewEdit.paper .c-crit{width:92px}
  /* ===== v4.7 พิมพ์: หัวตารางซ้ำทุกหน้า ไม่ตัดกลางแถว ===== */
  @media print{
    #printArea thead{display:table-header-group}
    #printArea tfoot{display:table-footer-group}
    #printArea tr,#printArea img,#printArea .pd-keep,#printArea .pk{break-inside:avoid;page-break-inside:avoid}
    #printArea .pd-band,#printArea h2,#printArea h3{break-after:avoid;page-break-after:avoid}
  }
  /* ===== v4.7 แดชบอร์ดกราฟ ===== */
  .ch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
  .ch-card{margin:0!important;display:flex;flex-direction:column}
  .ch-card.wide{grid-column:1/-1}
  .ch-body{padding:10px 16px 4px}
  .ch-svg{width:100%;height:auto;display:block}
  .ch-card.wide .ch-svg{max-width:860px;margin:0 auto}
  .ch-how{margin:auto 16px 14px;padding:9px 12px;border-radius:10px;background:rgba(46,144,250,.08);font-size:13px;line-height:1.6;color:var(--muted)}
  .ch-how b{color:var(--text);margin-right:4px}
  body.dash-cap #viewDash{background:#fff;padding:16px;width:1280px}
  @media (max-width:900px){.ch-grid{grid-template-columns:1fr}}
  @media print{
    body.print-dash #printArea{display:block!important}
    body.print-dash #printArea .dash-print{color:#1F2A3C}
    body.print-dash #printArea .ch-grid{grid-template-columns:1fr 1fr}
    body.print-dash #printArea .pk,body.print-dash #printArea .dcard,body.print-dash #printArea .kc{break-inside:avoid;page-break-inside:avoid}
  }

body{font-family:'TH Sarabun New','Sarabun',Tahoma,sans-serif;font-size:14pt;color:#1d2733} ${RC_WORD_CSS} .pb{page-break-before:always}
  /* ===== v4 พัฒนาคนและคนเก่ง ===== */
  #viewTalent{max-width:1240px;margin:0 auto;padding:4px 0 40px}
  .tl-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:22px 24px;border-radius:18px;margin-bottom:14px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--gB) 16%,transparent),color-mix(in srgb,#7C5CFA 14%,transparent));border:1px solid var(--line)}
  .tl-hero h2{font-family:var(--head);font-size:28px;margin:2px 0 4px;color:var(--text)}
  .tl-kick{font-size:13px;font-weight:700;letter-spacing:.06em;color:#7C5CFA;text-transform:uppercase}
  .tl-year{display:flex;align-items:center;gap:8px;font-weight:600}
  .tl-year select{min-width:100px}
  .tl-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:thin}
  .tl-tabs button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
  .tl-tabs button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tl-tabs button.on{background:linear-gradient(135deg,#7C5CFA,#3B82F6);color:#fff;border-color:transparent;box-shadow:0 8px 18px -10px #5b5cf0}
  .tl-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
  .tl-oc{display:flex;gap:6px;margin-left:auto}
  .tl-tbl tr.lg1 td,.tl-tbl tr.lg2 td{padding:11px 14px!important}
  .tl-filter select{max-width:240px}.tl-filter input{flex:1;min-width:200px}
  .tl-tbl td,.tl-tbl th{vertical-align:middle}
  .tl-who{display:flex;align-items:center;gap:10px;min-width:180px}
  .tl-who b{display:block;line-height:1.3}.tl-who .muted{font-size:13px}
  .tl-av{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#7C5CFA,#3B82F6)}
  .tl-hint{font-size:13px;color:var(--muted);margin:6px 0}
  .tl-sbi{border:1px dashed var(--line);border-radius:12px;padding:12px;margin-top:10px}
  .tl-sbi-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;margin-bottom:8px;flex-wrap:wrap}
  .tl-sbi-v{display:grid;gap:4px;margin-top:6px;font-size:14px}
  .tl-sbi-v b{display:inline-block;min-width:26px;color:#7C5CFA}
  .tl-tl{position:relative;padding-left:22px}
  .tl-tl:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
  .tl-tli{position:relative;margin-bottom:14px}
  .tl-dot{position:absolute;left:-20px;top:6px;width:12px;height:12px;border-radius:50%;background:#7C5CFA;box-shadow:0 0 0 3px color-mix(in srgb,#7C5CFA 25%,transparent)}
  .tl-tlc{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
  .tl-tlc p{margin:6px 0}
  .tl-tlh{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
  .tl-tla{margin-left:auto;display:flex;gap:10px}
  .tl-2{margin-bottom:14px}
  #viewTalent .dcard{padding:16px 18px;margin-bottom:14px}
  .pa-v.sm{font-size:19px;line-height:1.35}
  .tl-h3{font-family:var(--head);font-size:18px;margin:0 0 8px}
  .tl-cardh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .tl-drow{display:grid;grid-template-columns:minmax(150px,1.1fr) 3fr 80px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
  .tl-drow.org{font-size:16px;border-bottom:2px solid var(--line)}
  .tl-dn{display:flex;flex-direction:column}.tl-dn .muted{font-size:13px}
  .tl-dl{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:700;margin-top:4px}
  .tl-dt{text-align:right;font-weight:700;color:var(--ok)}.tl-dt.warn{color:var(--warn)}
  .tl-calrow td{background:color-mix(in srgb,#7C5CFA 9%,transparent)}
  .tl-gsel{min-width:96px}
  .tl-bar{margin:10px 0}
  .tl-bn{display:flex;justify-content:space-between;gap:8px;font-size:14px;margin-bottom:4px}
  .tl-bt{height:10px;border-radius:99px;background:color-mix(in srgb,var(--muted) 18%,transparent);overflow:hidden}
  .tl-bt i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7C5CFA,#3B82F6)}
  .tl-bt.bad i{background:linear-gradient(90deg,var(--gD),var(--gE))}
  .tl-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:8px 0}
  .tl-steps div{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:12px;font-size:14px}
  .tl-steps b{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#7C5CFA;color:#fff}
  .tl-chip{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;margin:2px 4px 2px 0;background:color-mix(in srgb,var(--gD) 16%,transparent);color:var(--gD)}
  .tl-gapbox{border-radius:12px;padding:10px 12px;margin-bottom:10px;background:color-mix(in srgb,var(--gD) 10%,transparent);border:1px solid color-mix(in srgb,var(--gD) 35%,transparent)}
  .tl-gapbox>b:first-child{display:block;margin-bottom:6px}
  .tl-gapbox.ok{background:color-mix(in srgb,var(--gA) 10%,transparent);border-color:color-mix(in srgb,var(--gA) 35%,transparent)}
  .tl-idp input,.tl-idp select,.tl-idp textarea{width:100%}
    .modal.tl-wide{max-width:min(1100px,96vw)!important;width:96vw}
  .tl-pre{white-space:pre-wrap;line-height:1.7;max-height:60vh;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:12px}
  .tl-psel{min-width:84px}
  .tl-box{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;color:#fff;white-space:nowrap}
  .nine{display:grid;grid-template-columns:34px 1fr;gap:8px;margin-top:6px}
  .nine-y{display:grid;grid-template-rows:repeat(3,1fr);gap:8px;font-size:12px;font-weight:700;color:var(--muted)}
  .nine-y span{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;text-align:center}
  .nine-g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .nine-x{display:grid;grid-template-columns:repeat(3,1fr);font-size:12px;font-weight:700;color:var(--muted);text-align:center}
  .nb{border-radius:14px;padding:10px 12px;min-height:130px;border:1px solid transparent;display:flex;flex-direction:column;gap:4px}
  .nb-h{display:flex;justify-content:space-between;align-items:center;gap:6px}
  .nb-c{font-family:var(--head);font-size:22px;font-weight:700}
  .nb-a{font-size:12px;opacity:.85}
  .nb-p{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
  .nb-p span{font-size:12px;padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.55);color:#1d2733}
  .nb-p span.more{background:transparent;font-weight:700;color:inherit}
  .nb-star{background:color-mix(in srgb,var(--gA) 22%,transparent);border-color:color-mix(in srgb,var(--gA) 50%,transparent)}
  .nb-rise,.nb-high{background:color-mix(in srgb,var(--gA) 12%,transparent);border-color:color-mix(in srgb,var(--gA) 30%,transparent)}
  .nb-gem,.nb-core,.nb-expert{background:color-mix(in srgb,var(--gB) 13%,transparent);border-color:color-mix(in srgb,var(--gB) 32%,transparent)}
  .nb-watch,.nb-steady{background:color-mix(in srgb,var(--gC) 15%,transparent);border-color:color-mix(in srgb,var(--gC) 38%,transparent)}
  .nb-decide{background:color-mix(in srgb,var(--gE) 14%,transparent);border-color:color-mix(in srgb,var(--gE) 40%,transparent)}
  .tl-box.nb-star,.tl-box.nb-rise,.tl-box.nb-high{background:var(--gA)}
  .tl-box.nb-gem,.tl-box.nb-core,.tl-box.nb-expert{background:var(--gB)}
  .tl-box.nb-watch,.tl-box.nb-steady{background:#C38A00}
  .tl-box.nb-decide{background:var(--gE)}
  .pa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-bottom:14px}
  .pa-c{position:relative;padding:14px 14px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--gB)}
  .pa-c.good{border-top-color:var(--gA)}.pa-c.warn{border-top-color:var(--gD)}
  .pa-n{position:absolute;right:12px;top:10px;font-family:var(--head);font-weight:700;font-size:13px;color:var(--muted)}
  .pa-q{font-size:13px;color:var(--muted);padding-right:22px;min-height:36px}
  .pa-v{font-family:var(--head);font-size:28px;font-weight:700;margin:4px 0;color:var(--text)}
  .pa-s{font-size:13px;color:var(--muted)}
  .pa-sc{width:100%;height:auto;display:block}
  .pa-sc text{font-size:11px;fill:var(--muted)}.pa-sc .ax{font-size:12px;font-weight:700}
  .pa-sc .gl{stroke:var(--line);stroke-width:1}
  .link.danger{color:var(--bad)}
  body.dark .tl-tabs button:not(.on),body.dark .pa-c{background:#111A2E;border-color:#22304D}
  body.dark .pa-c.good{border-top-color:var(--gA)}body.dark .pa-c.warn{border-top-color:var(--gD)}body.dark .pa-c:not(.good):not(.warn){border-top-color:var(--gB)}
  body.dark .tl-kick,body.dark .tl-sbi-v b{color:#A78BFA}
  body.dark .nb-p span{background:rgba(255,255,255,.12);color:#E7ECF5}
  @media (max-width:760px){.tl-drow{grid-template-columns:1fr}.tl-dt{text-align:left}.tl-hero{padding:16px}.tl-hero h2{font-size:22px}.nb{min-height:84px;padding:8px}.nb-a,.nb-p{display:none}.nb-h{flex-direction:column;align-items:flex-start}.nb-h b{font-size:13px}}
  @media print{.tl-print .nb-p span{background:#fff}.tl-print .pa-c{break-inside:avoid}}

  #viewAdmin{max-width:1280px;margin:0 auto;padding:4px 0 40px}
  .ad-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:22px 24px;border-radius:18px;margin-bottom:14px;border:1px solid var(--line);
    background:radial-gradient(600px 220px at 100% 0,rgba(226,182,92,.18),transparent 60%),linear-gradient(135deg,rgba(99,102,241,.14),rgba(34,195,230,.06))}
  .ad-hero h2{font-family:var(--head);font-size:28px;margin:2px 0 4px}
  .ad-kick{font-size:13.5px;font-weight:700;color:var(--pm-gold,#E2B65C)}
  .ad-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px}
  .ad-tabs button{white-space:nowrap;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text);font:inherit;font-weight:600;cursor:pointer}
  .ad-tabs button.on{background:linear-gradient(135deg,#F6DC9A,#E2B65C);color:#1C1405;border-color:transparent}
  body.dark .ad-tabs button:not(.on){background:rgba(255,255,255,.03);border-color:rgba(148,163,184,.18)}
  .ad-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
  .ad-bar input[type=search]{flex:1;min-width:220px}
  .ad-count{font-size:13px;color:var(--muted)}
  .ad-tbl tr.ad-row{cursor:pointer}
  .ad-tbl td{vertical-align:middle}
  .ad-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .ad-form .wide{grid-column:1/-1}
  .ad-form textarea{min-height:64px}
  .ad-req{color:var(--bad)}
  .ad-hint{font-size:12.5px;color:var(--muted)}
  .ad-lv{border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:8px}
  .ad-lv b{font-family:var(--head)}
  .modal.ad-wide{max-width:min(1060px,96vw)!important;width:96vw}
  .ad-grid input{width:100%;min-width:70px;text-align:center}
  .ad-sec{margin:14px 0 6px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
  .ad-sec h4{margin:0;font-family:var(--head);font-size:16px}
  .ad-set td{vertical-align:middle}
  .ad-set select{min-width:240px;max-width:100%}
  .ad-set input{width:100%}
  .ad-pw{font-family:'Prompt',monospace;font-size:17px;letter-spacing:.06em;font-weight:700}
  .ad-issue{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:13.5px;line-height:1.7}
  .ad-issue.bad{border-color:rgba(240,68,56,.5)}
  .ad-drop{display:block!important;width:100%;box-sizing:border-box;border:2px dashed var(--line);border-radius:16px;padding:22px;text-align:center;cursor:pointer}
  .ad-drop b{font-family:var(--head);font-size:17px}
  .ad-drop:hover{border-color:var(--pm-gold,#E2B65C)}
  @media (max-width:760px){.ad-form{grid-template-columns:1fr}}
  #licLock{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;
    background:radial-gradient(900px 500px at 80% 0,rgba(226,182,92,.16),transparent 60%),linear-gradient(160deg,#0B1226,#141C3A 60%,#0B1226)}
  #licLock .lic-card{width:100%;max-width:560px;border-radius:22px;padding:28px 26px;color:#E8ECF6;background:rgba(255,255,255,.05);border:1px solid rgba(226,182,92,.35);box-shadow:0 30px 80px rgba(0,0,0,.45)}
  #licLock h2{font-family:var(--head);margin:6px 0 8px;font-size:24px;color:#fff}
  #licLock .lic-kick{font-size:13px;font-weight:700;color:#E2B65C;letter-spacing:.02em}
  #licLock p{line-height:1.7;color:#C9D1E4;margin:6px 0}
  #licLock .inp{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}
  #licLock label.f{color:#C9D1E4;display:grid;gap:6px;margin-top:12px;font-weight:600;font-size:14px}
  .lic-id{display:flex;gap:8px;align-items:center;margin:8px 0 4px}
  .lic-id code{flex:1;min-width:0;overflow-wrap:anywhere;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.3);border:1px dashed rgba(226,182,92,.5);font-size:13px;color:#F6DC9A}
  .lic-msg{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(240,68,56,.14);border:1px solid rgba(240,68,56,.4);color:#FECACA;font-size:14px}
  .lic-ok{display:inline-block;padding:3px 12px;border-radius:999px;font-weight:700;font-size:13px}
  .lic-ok.y{background:rgba(18,183,106,.15);color:#12B76A}.lic-ok.n{background:rgba(240,68,56,.15);color:#F04438}
  .lic-foot{margin-top:18px;font-size:12.5px;color:#8D97B5;text-align:center}

/* PERFORMA Online · ส่วนเพิ่มสำหรับหน้าเข้าสู่ระบบ องค์กร และโหมดตัวอย่าง */
.pf-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.pf-tabs button{border:0;background:none;border-radius:9px;padding:8px 6px;font-weight:600;color:var(--muted);cursor:pointer;font-size:14px}
.pf-tabs button.on{background:var(--paper,#fff);color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.18)}
body.dark .pf-tabs button.on{background:#1A2540;color:#fff}
.pf-big{width:100%;padding:12px!important;font-size:16px;margin-top:4px}
.pf-wide{width:100%;padding:10px!important}
.pf-small{font-size:13px;line-height:1.6;margin:0}
.pf-small a{color:inherit;font-weight:600}
.pf-note{font-size:13.5px;line-height:1.6;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.pf-note.info{background:color-mix(in srgb,var(--gB) 12%,transparent);border-color:color-mix(in srgb,var(--gB) 40%,transparent)}
.pf-note a{color:inherit;font-weight:700}
.pf-row{display:flex;flex-wrap:wrap;gap:8px}
.pf-row .btn{flex:1 1 auto}
.pf-dot{width:10px;height:10px;border-radius:50%;background:var(--gA);margin-top:7px}
.pf-dot.off{background:var(--gE)}
.pf-av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;background:linear-gradient(135deg,#7C5CFA,#3B82F6)}
.pick-list label:has(.pf-av){grid-template-columns:34px 1fr;align-items:center}
.pf-steps{margin:0;padding-left:20px;line-height:1.9}
/* แถบสถานะองค์กร */
.banner.pf-demo{background:linear-gradient(90deg,#2A2160,#16285A);color:#E7ECF5;border-color:#3B4FA8;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.banner.pf-bad{background:#FEE4E2;color:#912018;border-color:#FDA29B}
body.dark .banner.pf-bad{background:#3A1414;color:#FDA29B;border-color:#7A271A}
.pf-chip{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;border-radius:99px;padding:3px 11px;font-size:13px;cursor:pointer;font-weight:600}
.pf-chip.on{background:var(--gold);color:#1a1f2b;border-color:var(--gold)}
.pf-chip.out{margin-left:auto;background:transparent}
/* องค์กรในเมนูซ้าย */
.pf-side{margin:0 12px 4px;padding:10px 12px;border-radius:14px;border:1px solid #22304D;background:#111B30}
.pf-so span{display:block;font-size:12px;color:#7D8BA6}
.pf-so b{display:block;font-size:14px;color:#fff;line-height:1.4}
.pf-so small{display:block;font-size:12px;color:#93A1BC;margin-top:2px}
.pf-sl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pf-sl button{border:1px solid #33416A;background:#141E36;color:#C7D2FE;border-radius:99px;padding:3px 10px;font-size:12.5px;cursor:pointer}
.pf-sl button:hover{background:#1C2A4A}