/* نشان و درجه‌ی کارآگاه (ویجت، اعلان‌ها و پرونده‌ی پرسنلی) — به متغیرهای docs.css وابسته است */

.rk{
  display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:8px; align-items:center;
  background:rgba(127,127,127,.1); border:1px solid rgba(127,127,127,.22); border-radius:10px;
  padding:3px 6px 4px 12px; cursor:pointer; color:inherit; text-align:right; font:inherit; line-height:1.25;
}
.rk:hover{background:rgba(127,127,127,.18)}
.rk-ic{grid-row:1 / span 2; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.rk-ic .bz-art{display:block}
.rk-tx{display:flex; align-items:baseline; gap:6px; white-space:nowrap}
.rk-tx b{font-size:.84rem; font-weight:900}
.rk-tx b small{font-weight:700; color:#d4a52a}
.rk-stars{display:inline-flex; gap:1px; font-size:.72rem; letter-spacing:0}
.rk-stars i{font-style:normal; color:rgba(127,127,127,.45)}
.rk-stars i.on{color:#e3b23c; text-shadow:0 0 6px rgba(227,178,60,.45)}
.rk-stars.big{font-size:1.25rem; gap:3px}
.rk-bar{display:block; height:4px; border-radius:3px; background:rgba(127,127,127,.3); overflow:hidden; min-width:92px; margin-top:3px}
.rk-bar i{display:block; height:100%; background:linear-gradient(90deg,#b8733a,#e3b23c); border-radius:3px; transition:width .6s cubic-bezier(.3,.8,.3,1); margin-inline-start:auto}
.rk-bar.big{height:8px; min-width:0}

.rk-float{
  position:fixed; z-index:120; translate:-50% 0; pointer-events:none; font-weight:900; font-size:.85rem; color:#e3b23c;
  text-shadow:0 1px 2px rgba(0,0,0,.8); animation:rkFloat 1.4s ease-out forwards; white-space:nowrap
}
@keyframes rkFloat{0%{opacity:0; transform:translateY(6px)} 15%{opacity:1} 100%{opacity:0; transform:translateY(34px)}}

.rk-toast{
  position:fixed; top:64px; right:14px; z-index:115; display:flex; gap:10px; align-items:center; max-width:min(360px, calc(100vw - 28px));
  background:#1a1c1b; color:#f4efe2; border:1px solid rgba(227,178,60,.45); border-radius:12px; padding:10px 14px; font-size:.9rem;
  box-shadow:0 16px 40px -12px #000; opacity:0; transform:translateX(20px); transition:opacity .25s, transform .25s
}
.rk-toast.on{opacity:1; transform:none}
.rk-toast b{color:#e3b23c; margin-inline-end:4px}
.rk-medal svg{display:block}
.rk-lock{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#8a2b1f; color:#fff; font-weight:900}

/* حکم ترفیع */
.rk-promo{position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:18px; background:rgba(8,10,9,.82); opacity:0; transition:opacity .25s}
.rk-promo.on{opacity:1}
.rk-promo-box{
  position:relative; width:min(420px,100%); text-align:center; background:var(--paper, #f2e8d2); color:var(--paper-ink, #26211a);
  border-radius:4px; padding:28px 26px 24px; box-shadow:0 30px 70px -20px #000; transform:scale(.9); transition:transform .35s cubic-bezier(.2,1.4,.4,1)
}
.rk-promo.on .rk-promo-box{transform:none}
.rk-promo-k{margin:0; font-size:.8rem; letter-spacing:.02em; color:var(--paper-muted, #6d6353)}
.rk-promo-badge{margin:10px auto 4px; display:flex; justify-content:center; filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.rk-promo.on .rk-promo-badge{animation:rkBadge .8s cubic-bezier(.2,1.5,.4,1) both .1s}
@keyframes rkBadge{from{transform:scale(.3) rotate(-25deg); opacity:0} to{transform:none; opacity:1}}
.rk-promo-box h2{margin:.2em 0 0; font-size:1.6rem; font-weight:900}
.rk-promo-t{margin:.3em 0 .8em}
.rk-promo-stamp{position:absolute; top:22px; left:18px; font-size:1.05rem}
.rk-promo.on .rk-promo-stamp{animation:rkStamp .45s cubic-bezier(.2,1.4,.4,1) both .55s}
@keyframes rkStamp{from{transform:scale(2.2) rotate(-8deg); opacity:0} to{transform:rotate(-8deg); opacity:.85}}
.rk-promo-next{font-size:.88rem; color:var(--paper-muted, #6d6353); margin:0 0 16px}

/* پرونده‌ی پرسنلی */
.rk-panel-ov{position:fixed; inset:0; z-index:110; background:rgba(8,10,9,.78); overflow-y:auto; padding:18px; opacity:0; transition:opacity .2s}
.rk-panel-ov.on{opacity:1}
.rk-panel{
  position:relative; max-width:820px; margin:10px auto 30px; background:var(--paper, #f2e8d2); color:var(--paper-ink, #26211a);
  border-radius:3px; padding:24px 28px 26px; box-shadow:0 30px 60px -20px #000; line-height:1.7
}
.rk-x{position:absolute; top:10px; left:12px; background:none; border:0; font-size:1.8rem; line-height:1; cursor:pointer; color:var(--paper-muted, #6d6353)}
.rk-panel-k{margin:0 0 12px; font-size:.8rem; color:var(--paper-muted, #6d6353); border-bottom:2px solid var(--paper-ink, #26211a); padding-bottom:8px}
.rk-head{display:flex; gap:18px; align-items:center}
.rk-big{flex:0 0 auto; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}
.rk-head h2{margin:0; font-size:1.5rem; font-weight:900; line-height:1.3}
.rk-head h2 small{font-size:.9rem; color:#a07a14}
.rk-meta{margin:.2em 0 0; font-size:.88rem; color:var(--paper-muted, #6d6353)}
.rk-next{margin:16px 0 6px}
.rk-next .rk-bar{background:rgba(38,33,26,.14)}
.rk-next p{margin:.35em 0 0; font-weight:700; font-size:.92rem}
.rk-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:12px}
@media (max-width:640px){ .rk-cols{grid-template-columns:1fr} .rk-panel{padding:22px 16px} .rk-head h2{font-size:1.25rem} }
.rk-cols h3{font-size:1rem; margin:14px 0 8px}
.rk-cols h3 small{font-weight:400; color:var(--paper-muted, #6d6353); font-size:.8rem}
.rk-ladder, .rk-ach, .rk-log{list-style:none; margin:0; padding:0}
.rk-ladder li{display:flex; gap:10px; align-items:center; padding:6px 8px; border-radius:6px; position:relative}
.rk-ladder li + li::before{content:""; position:absolute; right:20px; top:-7px; height:8px; border-right:2px dotted rgba(38,33,26,.25)}
.rk-ladder .lb{flex:0 0 30px; display:grid; place-items:center}
.rk-ladder .lb .bz-art{max-width:30px; object-fit:contain}
.rk-ladder b{display:block; font-size:.92rem}
.rk-ladder small{display:block; font-size:.76rem; color:var(--paper-muted, #6d6353)}
.rk-ladder li.done b{color:var(--ok, #2f6b4f)}
.rk-ladder li.cur{background:rgba(212,165,42,.18); outline:1.5px solid rgba(160,122,20,.5)}
.rk-ladder li.locked{opacity:.55}
.rk-ladder li.locked .lb .bz-art{filter:grayscale(1)}
.rk-ladder .lock{width:24px; height:24px; border-radius:50%; background:rgba(38,33,26,.2); font-weight:900; color:var(--paper-muted, #6d6353)}
.rk-ach{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px}
.rk-ach li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:8px 6px; border-radius:6px; background:rgba(38,33,26,.06)}
.rk-ach li svg{filter:grayscale(1); opacity:.35}
.rk-ach li b{font-size:.8rem; line-height:1.4}
.rk-ach li small{font-size:.68rem; line-height:1.45; color:var(--paper-muted, #6d6353)}
.rk-ach li.got{background:rgba(212,165,42,.16)}
.rk-ach li.got svg{filter:none; opacity:1}
.rk-log li{display:flex; justify-content:space-between; gap:10px; font-size:.86rem; padding:3px 0; border-bottom:1px dashed rgba(38,33,26,.16)}
.rk-log li b{color:#a07a14}
.rk-log li.empty{color:var(--paper-muted, #6d6353); border:0}
.rk-how{font-size:.84rem; color:var(--paper-muted, #6d6353); margin:0}

/* نشان روی میز */
.bz-art{display:block; width:auto; max-width:none; user-select:none; -webkit-user-drag:none}
.rk-desk{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:0;
  cursor:pointer; color:#f3e3c8; font:inherit; line-height:1.3
}
/* جلد چرمی: نشان در بیضی بالا، پلاک درجه روی جیب پایین */
.rk-wallet{position:relative; display:block; transform:rotate(-4deg); transition:transform .2s; filter:drop-shadow(0 3px 2px rgba(0,0,0,.5)) drop-shadow(0 14px 14px rgba(0,0,0,.45))}
.rk-wallet-img{display:block; height:184px; width:auto}
.rk-desk-badge{position:absolute; left:50%; top:25.5%; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.rk-desk:not(.trainee) .rk-plate{position:absolute; left:50%; top:76%; transform:translate(-50%,-50%) rotate(-4deg); min-width:0; width:80px; padding:3px 5px 4px}
.rk-desk:not(.trainee) .rk-plate b{font-size:.62rem; white-space:normal; text-align:center; line-height:1.35}
.rk-desk:hover .rk-wallet{transform:rotate(-1.5deg) translateY(-4px)}
/* کارت کارآموزی با بند */
.rk-card{display:block; transform:rotate(-7deg); transition:transform .2s; filter:drop-shadow(0 3px 2px rgba(0,0,0,.45)) drop-shadow(0 12px 12px rgba(0,0,0,.4))}
.rk-desk.trainee:hover .rk-card{transform:rotate(-4deg) translateY(-4px)}
.rk-plate{
  display:flex; flex-direction:column; align-items:center; gap:1px; min-width:112px; padding:3px 10px 5px; border-radius:4px;
  background:linear-gradient(#c9a46a, #a9834a); color:#2a1e0e; box-shadow:0 2px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35)
}
.rk-plate b{font-size:.76rem; font-weight:900; white-space:nowrap}
.rk-plate b small{color:#6e2016}
.rk-plate .rk-stars{font-size:.7rem}
.rk-plate .rk-stars i{color:rgba(42,30,14,.3)}
.rk-plate .rk-stars i.on{color:#7a1f14; text-shadow:none}
.rk-plate .rk-bar{min-width:0; width:100%; height:3px; margin-top:2px; background:rgba(42,30,14,.2)}
.rk-plate .rk-bar i{background:#7a1f14}

@media (max-width:760px){
  .rk{padding:3px 5px; grid-template-columns:auto; column-gap:0}
  .rk .rk-tx, .rk .rk-bar{display:none}
  .rk-ic{grid-row:auto}
}
@media (prefers-reduced-motion: reduce){
  .rk-float, .rk-promo-badge, .rk-promo-stamp{animation:none !important}
}