/* public/ui-f4.css — UI Fasa 4 (Staf & HR): Urus Staff, Performance Staff, Sistem Kehadiran,
   Sistem Gaji, Jadual Bekerja, Integriti Staff, Profil Saya + modal milik halaman-halaman ini.
   Awalan kelas: f4-. Hanya token tema (--tb/--tf/--ts melalui .x-t-*, --panel, --garis-kad ...).
   Bergantung pada ui.css (x-*, mk-*). Animasi: transform/opacity sahaja, dalam prefers-reduced-motion. */

/* ---------- susun atur halaman ---------- */
.f4-pg{max-width:1100px;margin-inline:auto;width:100%}
.f4-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.f4-stack>*{min-width:0}
.f4-pg .x-panel>.panel-isi{padding:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.f4-pg .x-panel .input-group{margin-bottom:0}
.f4-pg .x-panel .borang-grid{gap:12px 14px}
.f4-pg .x-panel .input-group label{font-size:12.5px;font-weight:700;color:var(--teks2)}
.f4-pg .x-panel input:not([type=checkbox]):not([type=radio]):not([type=file]),.f4-pg .x-panel select,.f4-pg .x-panel textarea{min-height:46px;font-size:15px;max-width:100%}
.f4-pg .x-panel textarea{min-height:84px}
.f4-pg .x-panel .ralat-field:empty{display:none}
.f4-pg .btn-kecil{min-height:44px;padding:0 14px;border-radius:12px;font-weight:700}
.f4-pg .x-ph small{font-weight:700}
.f4-pg .x-ph h3 small{font-size:12.5px;color:var(--teks3);margin-left:4px}
.f4-pg .x-ph-aksi{margin-left:auto}
.f4-pg .kad-list{gap:10px}
.f4-pg .x-panel .skeleton{border-radius:14px}
/* kad senarai: butang aksi 44px */
.f4-pg .kad-r-aksi .btn{min-height:44px}
.f4-pg .aksi-btn{width:40px;height:40px;border-radius:11px;font-size:13px}
.f4-pg .aksi{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- tab bubble / pil ---------- */
.x-lekit.f4-tabs{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.f4-tabs::-webkit-scrollbar{display:none}
.f4-tabs .btn{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border:1.5px solid var(--garis-kad);background:var(--panel);color:var(--teks);box-shadow:none}
.f4-tabs .btn.btn-primary{background:var(--primary);color:var(--on-primary);border-color:transparent}
.f4-tabs .btn:active{scale:.96}
.f4-tabs .btn:focus-visible{outline:2px solid var(--ts,var(--primary));outline-offset:2px}
.f4-tabs:has(> :nth-child(2):last-child) .btn{flex:1 1 0}
@media(prefers-reduced-motion:no-preference){.f4-tabs .btn{transition:background .18s ease-out,color .18s ease-out,scale .12s ease-out}}

/* ---------- bar alat / julat tarikh ---------- */
.f4-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.f4-bar input[type=month]{flex:1 1 190px;width:auto;min-width:0;font-size:14px}
.f4-bar .x-btn{flex:1 1 auto}
.f4-julat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:end;min-width:0}
.f4-julat .x-btn{grid-column:1/-1}
.f4-julat3 .x-medan:nth-child(3){grid-column:1/-1}
.f4-pintas{padding-bottom:2px}
@media(min-width:700px){
  .f4-julat{grid-template-columns:repeat(2,minmax(150px,220px)) auto}
  .f4-julat .x-btn{grid-column:auto}
  .f4-julat3{grid-template-columns:repeat(3,minmax(150px,220px)) auto}
  .f4-julat3 .x-medan:nth-child(3){grid-column:auto}
}
.f4-tapis{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.f4-tapis>select,.f4-tapis>input{flex:1 1 150px;min-width:0;min-height:44px}
.f4-tapis>.x-btn{flex:0 0 auto}
.f4-tapis-aktif{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--tona-oren-bg);color:var(--tona-oren-fg);font-size:12px;font-weight:700;line-height:1.35;flex:0 1 auto}
.f4-bar-segar{display:flex;justify-content:flex-end}
.f4-simpan{display:flex;justify-content:flex-end}
.f4-simpan .x-btn{min-width:180px}
@media(max-width:480px){.f4-simpan .x-btn{width:100%}}

/* ---------- kad staff ---------- */
.f4-staf{display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;padding-left:16px}
.f4-staf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ts)}
.f4-staf.f4-tak-aktif{opacity:.72}
.f4-staf-atas{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center}
.f4-av{width:42px;height:42px;border-radius:50%;background:var(--tb);color:var(--tf);display:grid;place-items:center;font-size:15px;font-weight:800;flex:none;overflow:hidden}
.f4-staf-id{min-width:0}
.f4-staf-id b{display:block;font-size:14.5px;font-weight:800;overflow-wrap:anywhere;line-height:1.25}
.f4-staf-id small{display:block;font-size:12px;color:var(--teks3);font-weight:600;overflow-wrap:anywhere}
.f4-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.f4-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--tb);color:var(--tf);white-space:nowrap}
.f4-chip.neutral{background:var(--bdg-neutral-bg);color:var(--bdg-neutral-fg)}
.f4-meta{font-size:12px;color:var(--teks3);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.f4-prof{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:44px;padding:8px 12px;border-radius:12px;border:1px solid var(--line-halus);background:var(--bg3);color:var(--teks);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-align:left}
.f4-prof:active{scale:.98}
.f4-prof.tiada{cursor:default}
.f4-prof .f4-trek{height:8px;border-radius:999px;background:var(--panel);overflow:hidden}
.f4-prof .f4-trek i{display:block;height:100%;width:100%;border-radius:999px;background:var(--ts);transform-origin:left center;transform:scaleX(var(--p,0))}
.f4-prof b{font-variant-numeric:tabular-nums;color:var(--tf)}
.f4-prof.h{--ts:var(--hijau)}.f4-prof.o{--ts:var(--oren)}.f4-prof.m{--ts:var(--merah)}
@media(prefers-reduced-motion:no-preference){.f4-prof .f4-trek i{animation:xBarMasuk .5s ease-out both}}
.f4-aksi-baris{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid var(--line-halus)}
.f4-aksi-baris .btn{flex:1 1 auto;min-height:44px;justify-content:center}
.f4-aksi-baris .btn.f4-bahaya{color:var(--txt-merah)}
.f4-stafg{display:flex;flex-direction:column;gap:10px}

/* ---------- kad performance ---------- */
.f4-perf{position:relative;overflow:hidden;padding-left:16px;cursor:pointer;display:flex;flex-direction:column;gap:10px}
.f4-perf::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ts)}
.f4-perf-atas{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center}
.f4-perf-pct{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tf);background:var(--tb);padding:2px 10px;border-radius:999px}
.f4-trek-l{height:8px;border-radius:999px;background:var(--bg3);overflow:hidden}
.f4-trek-l i{display:block;height:100%;width:100%;border-radius:999px;background:var(--ts);transform-origin:left center;transform:scaleX(var(--p,0))}
@media(prefers-reduced-motion:no-preference){.f4-trek-l i{animation:xBarMasuk .5s ease-out both}}
.f4-metrik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.f4-m{background:var(--bg3);border-radius:11px;padding:8px 6px;text-align:center;min-width:0}
.f4-m small{display:block;font-size:10.5px;color:var(--teks3);font-weight:700;line-height:1.2}
.f4-m b{display:block;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f4-perf-kaki{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}

/* ---------- jam kerja ---------- */
.f4-jam{display:flex;flex-direction:column;gap:8px}
.f4-jam-r{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--panel2)}
.f4-jam-r .f4-av{width:34px;height:34px;font-size:12.5px}
.f4-jam-r span{min-width:0;overflow-wrap:anywhere;font-size:13.5px;font-weight:700}
.f4-jam-r span small{display:block;font-size:11.5px;color:var(--teks3);font-weight:600}
.f4-jam-r b{font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}

/* ---------- kehadiran: kad clock in/out ---------- */
.f4-pg .kh-kad{position:relative;overflow:hidden;padding:18px 16px;background:var(--panel2);border-radius:var(--r2)}
.f4-pg .kh-kad::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--ts,var(--garis-kad))}
.f4-pg .kh-kad.belum{--ts:var(--merah)}
.f4-pg .kh-kad.masuk{--ts:var(--hijau)}
.f4-pg .kh-kad:not(.belum):not(.masuk){--ts:var(--cyan)}
.f4-pg .kh-status{margin-bottom:16px}
.f4-pg .kh-bulat{width:56px;height:56px;font-size:22px}
.f4-pg .kh-tajuk{font-size:18px;font-weight:800}
.f4-pg .kh-masa{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.f4-pg .kh-masa-item{padding:10px 6px;border-radius:12px;min-width:0}
.f4-pg .kh-masa-item b{font-size:clamp(14px,4.4vw,19px);white-space:nowrap}
.f4-pg .kh-kad .btn-penuh{min-height:54px;font-size:15px;border-radius:14px}
.f4-pg .kh-amaran,.f4-pg .kh-nota-cawangan{border-radius:12px;line-height:1.5}
@media(prefers-reduced-motion:reduce){.kh-bulat.masuk{animation:none}}
.f4-pg .kh-ringkas{padding:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.f4-pg .kh-ringkas div{min-width:0;padding:10px 6px;border-radius:12px;background:var(--bg3);border:0}
.f4-pg .kh-ringkas b{font-size:clamp(14px,4.6vw,18px);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tf,var(--txt-cyan))}
.f4-pg .kh-ringkas label{font-size:10.5px}

/* ---------- kebenaran role (matrix) ---------- */
#page-urusStaff .f4-kbr{display:block;overflow-x:auto;border:var(--tebal-garis) solid var(--garis-kad);border-radius:14px;-webkit-overflow-scrolling:touch}
#page-urusStaff .f4-kbr .jadual{min-width:560px;font-size:12.5px}
.f4-kbr th:first-child,.f4-kbr td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);min-width:150px;max-width:210px;white-space:normal}
.f4-kbr tr[style] td:first-child{background:var(--bg2)}
.f4-kbr input[type=checkbox]{width:22px;height:22px;accent-color:var(--primary);cursor:pointer}
.f4-kbr td,.f4-kbr th{padding:10px 8px}
.f4-pkb{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media(min-width:700px){.f4-pkb{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f4-pkb-i{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:14px;border:var(--tebal-garis) solid var(--garis-kad);background:var(--panel2);cursor:pointer;min-width:0}
.f4-pkb-i input{width:22px;height:22px;flex:none;accent-color:var(--primary)}
.f4-pkb-i .f4-av{width:36px;height:36px;font-size:13px}
.f4-pkb-i span.t{min-width:0;font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.f4-pkb-i span.t small{display:block;font-size:11.5px;color:var(--teks3);font-weight:600}
.f4-pkb-i:has(input:checked){border-color:var(--ts);background:var(--tb)}

/* ---------- payslip ---------- */
.f4-gaji-hero{text-align:center;padding:20px 14px;border-radius:var(--r2);background:linear-gradient(135deg,var(--tona-hijau-bg),color-mix(in srgb,var(--tona-hijau-bg) 55%,var(--tona-cyan-bg)));color:var(--tona-hijau-fg);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.f4-gaji-l{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;opacity:.85}
.f4-gaji-n{font-size:clamp(28px,9vw,40px);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.f4-gaji-s{font-size:12px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.f4-h4{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin:0 0 4px;color:var(--teks)}
.f4-h4-hijau i{color:var(--hijau)}.f4-h4-merah i{color:var(--merah)}
.f4-baris{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-halus);font-size:13.5px}
.f4-baris b{font-variant-numeric:tabular-nums;white-space:nowrap}
.f4-nota-kecil{font-size:12px;color:var(--teks2);padding:10px 12px;background:var(--tona-cyan-bg);color:var(--tona-cyan-fg);border-radius:12px;line-height:1.5}
.f4-lipat{border:var(--tebal-garis) solid var(--garis-kad);border-radius:14px;background:var(--panel2);overflow:hidden;min-width:0}
.f4-lipat>summary{list-style:none;min-height:48px;display:flex;align-items:center;gap:9px;padding:0 14px;cursor:pointer;font-weight:700;font-size:13.5px;color:var(--teks)}
.f4-lipat>summary::-webkit-details-marker{display:none}
.f4-lipat>summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:11px;color:var(--teks3)}
.f4-lipat[open]>summary::after{content:"\f077"}
.f4-lipat>:not(summary){margin:0 14px 14px}
.f4-lipat .input-group{margin-bottom:12px}
.f4-jana{min-height:52px;font-size:15px}
#pslSenaraiBody .wang,.f4-pg .wang{font-variant-numeric:tabular-nums}

/* ---------- profil ---------- */
.f4-profil{display:flex;flex-direction:column;gap:14px;min-width:0}
.f4-pf-hero{border-radius:var(--r2);padding:16px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(135deg,var(--tona-pink-bg),color-mix(in srgb,var(--tona-pink-bg) 50%,var(--tona-ungu-bg)));color:var(--tona-pink-fg);min-width:0}
.f4-pf-id{display:flex;align-items:center;gap:14px;min-width:0}
.f4-pf-hero .profil-avatar{width:76px;height:76px;font-size:30px;cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--tona-pink-fg) 35%,transparent)}
.f4-av-wrap{position:relative;flex:none;width:76px;height:76px}
.f4-av-wrap .f4-kamera{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--panel);color:var(--teks);display:grid;place-items:center;font-size:12px;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.f4-pf-nama{font-size:20px;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.f4-pf-role{font-size:13px;font-weight:700;opacity:.9}
.f4-pf-sub{font-size:12px;opacity:.8;margin-top:2px}
.f4-pf-kelengkapan{display:flex;flex-direction:column;gap:6px}
.f4-pf-kelengkapan .l{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700}
.f4-pf-kelengkapan .t{height:10px;border-radius:999px;background:color-mix(in srgb,var(--tona-pink-fg) 18%,transparent);overflow:hidden}
.f4-pf-kelengkapan .t i{display:block;height:100%;width:100%;border-radius:999px;background:var(--ts);transform-origin:left center;transform:scaleX(var(--p,0))}
.f4-pf-kelengkapan.h{--ts:var(--hijau)}.f4-pf-kelengkapan.o{--ts:var(--oren)}.f4-pf-kelengkapan.m{--ts:var(--merah)}
@media(prefers-reduced-motion:no-preference){.f4-pf-kelengkapan .t i{animation:xBarMasuk .6s ease-out both}}
.f4-pf-hint{font-size:11.5px;opacity:.85;line-height:1.45}
.f4-pf-baris{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.f4-pf-baris .t{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0}
.f4-pf-baris .t small{display:block;font-size:11.5px;color:var(--teks3);font-weight:600}
.f4-pf-tema{display:flex;gap:8px;flex-wrap:wrap}
.f4-pf-tema .btn{min-height:44px;border-radius:999px;padding:0 16px}
.f4-profil .detail-seksyen{margin:0}
.f4-profil details.detail-seksyen,.f4-profil .f4-sek{border:var(--tebal-garis) solid var(--garis-kad);border-radius:var(--r2);background:var(--panel);box-shadow:var(--bayang-kad);overflow:hidden;min-width:0}
.f4-profil details.detail-seksyen>summary{list-style:none;min-height:56px;display:flex;align-items:center;gap:11px;padding:8px 14px;cursor:pointer}
.f4-profil details.detail-seksyen>summary::-webkit-details-marker{display:none}
.f4-profil details.detail-seksyen>summary h4{margin:0;padding:0;border:0;font-size:14.5px;text-transform:none;letter-spacing:0;color:var(--teks);font-weight:800;display:inline-block}
.f4-profil details.detail-seksyen>summary .x-ikon{width:32px;height:32px;font-size:14px;border-radius:10px}
.f4-profil details.detail-seksyen>summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;margin-left:auto;font-size:11px;color:var(--teks3)}
.f4-profil details.detail-seksyen[open]>summary::after{content:"\f077"}
.f4-profil details.detail-seksyen>:not(summary){margin:0 14px 14px}
.f4-profil .input-group{margin-bottom:0}
.f4-profil .borang-grid{gap:12px 14px}
.f4-profil input:not([type=checkbox]):not([type=file]),.f4-profil select,.f4-profil textarea{min-height:46px;font-size:15px}
.f4-profil .izin-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.f4-profil .izin-item{min-height:40px;border-radius:12px}
.f4-profil .izin-ya{color:var(--txt-hijau)}.f4-profil .izin-tidak{color:var(--teks3)}
.f4-profil-simpan{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;justify-content:flex-end}
.f4-profil-simpan .x-btn{box-shadow:var(--bayang-apung,0 6px 20px rgba(0,0,0,.25));min-width:200px}
@media(max-width:480px){.f4-profil-simpan .x-btn{width:100%}}
.f4-profil .gaya-grid{margin-top:2px}

/* ---------- modal milik halaman f4 ---------- */
.f4-modal .modal-isi .input-group{margin-bottom:0}
.f4-modal .modal-isi .input-group label{font-size:12.5px;font-weight:700;color:var(--teks2)}
.f4-modal .modal-isi input:not([type=checkbox]):not([type=radio]):not([type=file]),.f4-modal .modal-isi select,.f4-modal .modal-isi textarea{min-height:46px;font-size:15px;width:100%;min-width:0}
.f4-modal .modal-isi textarea{min-height:84px}
.f4-modal .modal-isi input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--primary)}
.f4-modal .modal-isi label:has(>input[type=checkbox]){min-height:44px;align-items:center;gap:10px;line-height:1.45}
.f4-modal .modal-isi .borang-grid{gap:12px 14px}
.f4-modal .modal-isi .ralat-field:empty{display:none}
.f4-modal .detail-seksyen{margin:0;border:var(--tebal-garis) solid var(--garis-kad);border-radius:14px;overflow:hidden;background:var(--panel);padding:0 12px 6px;min-width:0}
.f4-modal .modal-isi .detail-seksyen>h4{margin:0 -12px 10px;padding:9px 12px;background:var(--tb);color:var(--tf);border-bottom:1px solid color-mix(in srgb,var(--ts) 30%,transparent);font-size:13px;font-weight:800;text-transform:none;letter-spacing:0}
.f4-modal .detail-seksyen>h4 .btn{min-height:40px}
.f4-modal .detail-seksyen .borang-grid{margin-bottom:6px}
.f4-modal .baris-detail{padding:10px 0;min-width:0;gap:12px}
.f4-modal .baris-detail b{text-align:right;overflow-wrap:anywhere;min-width:0}
.f4-modal .modal-isi>.baris-detail{background:var(--bg3);border:0;border-radius:12px;padding:10px 12px}
.f4-modal .modal-isi h4{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:8px;margin:6px 0 4px;color:var(--teks)}
.f4-modal .modal-isi h4 i{color:var(--ts)}
.f4-modal .modal-isi hr{margin:4px 0!important}
.f4-modal .modal-isi .jadual-bekas{border:var(--tebal-garis) solid var(--garis-kad);border-radius:14px}
.f4-modal .modal-kaki .btn{min-width:0}
.f4-modal .modal-kaki.mk-kaki-lekat{flex-wrap:wrap}
.f4-modal .modal-kaki.mk-kaki-lekat .btn-merah{flex:0 0 auto}
.f4-modal .modal-isi>.x-nota{margin:0}
.f4-modal .kad-r{background:var(--panel2);border-radius:14px}
.f4-modal .skeleton{border-radius:14px}

/* ---------- 390px: tiada limpahan mendatar ---------- */
@media(max-width:480px){
  .f4-pg .x-kepala-aksi .x-b-utama,.f4-pg .x-kepala-aksi .x-b-lut{flex:1 1 auto;justify-content:center}
  .f4-metrik{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f4-pg .x-stats .x-stat-label{font-size:11.5px}
}
.f4-pg,.f4-pg .x-panel{overflow-wrap:anywhere}
.f4-pg .x-stat-label{overflow-wrap:break-word}

/* ikon jenis shift (Jadual Bekerja) */
.f4-shift-ik{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--tb);color:var(--tf);font-size:12px;vertical-align:middle;margin-right:4px}
.f4-pg td.ruj{white-space:nowrap}