/* V32: visual depth on approved V30, no layout or gallery logic changes */
:root { --jr32-orange:#ff9619; }
.jr-v18-skill-board,
.jr-v18-tool-panel {
  position:relative;
  isolation:isolate;
  background-image:linear-gradient(135deg,rgba(255,255,255,.022),transparent 53%);
  box-shadow:0 15px 38px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
}
.jr-v18-skill-board::before,
.jr-v18-tool-panel::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,150,25,.045),transparent 42%,rgba(255,255,255,.012));
  pointer-events:none;
  opacity:.55;
  transition:opacity .3s ease;
}
.jr-v18-skill-board:hover::before,
.jr-v18-tool-panel:hover::before {opacity:.9}
.jr-v18-skill {
  border-radius:13px;
  transition:background-color .22s ease;
}
.jr-v18-skill:hover {background-color:rgba(255,255,255,.028)}
.jr-v18-skill > span:last-child {position:relative;transform:none!important;filter:none!important;}
.jr-v18-skill .jr-v18-icon {
  position:relative;
  transform:none;
  transition:box-shadow .24s ease, background-color .24s ease, border-color .24s ease, transform .24s ease;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .jr-v18-skill:hover .jr-v18-icon {
    transform:translateY(-2px) scale(1.045);
    box-shadow:0 0 0 1px currentColor,0 0 19px -5px currentColor;
  }
  .jr-v18-tool-panel .jr-v18-tool:hover img {
    transform:scale(1.075);
  }
}
.jr-v18-tool-panel .jr-v18-tool {
  box-sizing:border-box;
  border-color:rgba(255,255,255,.15);
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.jr-v18-tool-panel .jr-v18-tool img {
  object-fit:contain;
  flex-shrink:0;
  transition:transform .25s cubic-bezier(.22,1,.36,1),filter .25s ease;
}
.jr-v18-tool-panel[aria-label="AI Tools"] .jr-v18-tool-list {align-items:stretch;gap:12px;}
.jr-v18-tool-panel[aria-label="AI Tools"] .jr-v18-tool {
  display:inline-flex;align-items:center;gap:11px;
  min-height:58px;padding:11px 14px;
  border:1px solid #505050;
  border-radius:11px;
  background:#292929;
  color:#f4f4f4;
  font-size:clamp(12px,1.1vw,15px);
  font-weight:600;line-height:1.3;
}
.jr-v18-tool-panel[aria-label="AI Tools"] .jr-v18-tool img {
  display:block;width:34px;height:34px;
  background:#171717;
  border:1px solid #3e3e3e;
  padding:5px;border-radius:8px;
}
@media (hover:hover) and (pointer:fine) {
 .jr-v18-tool-panel .jr-v18-tool:hover {
   border-color:rgba(255,150,25,.68);
   background:#303030;
   box-shadow:0 7px 22px rgba(255,150,25,.075);
 }
}
@media(max-width:650px) {
 .jr-v18-tool-panel[aria-label="AI Tools"] .jr-v18-tool {min-height:50px;padding:9px 10px;gap:9px;font-size:12px}
 .jr-v18-tool-panel[aria-label="AI Tools"] .jr-v18-tool img {width:28px;height:28px;padding:4px}
}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce) {
 .jr-v18-skill .jr-v18-icon,.jr-v18-tool-panel .jr-v18-tool img {transform:none!important;}
}
@media(prefers-reduced-motion:reduce) {
 .jr-v18-skill,.jr-v18-icon,.jr-v18-tool-panel .jr-v18-tool,
 .jr-v18-tool-panel img,.jr-v18-skill-board::before,.jr-v18-tool-panel::before {transition:none!important;}
}