/* Approved raised cards. Change these heights and depth colors in one place. */
:root {
  --public-thumb-height:190px;
  --public-thumb-title-height:36px;
  --lab-art-height:190px;
  --card-face:linear-gradient(145deg,#ffffff,#f8faff);
  --card-border:#d0ddf1;
  --card-depth-edge:#c8d5eb;
  --card-depth-near:rgba(33,63,112,.22);
  --card-depth-far:rgba(37,75,129,.23);
  --card-rim:rgba(255,255,255,.94);
  --thumb-shadow:rgba(36,71,120,.21);
}
html[data-theme="dark"] {
  --card-face:linear-gradient(145deg,#18263b,#142238);
  --card-border:#3c5270;
  --card-depth-edge:#0a1425;
  --card-depth-near:rgba(0,0,0,.53);
  --card-depth-far:rgba(0,0,0,.53);
  --card-rim:rgba(83,112,150,.4);
  --thumb-shadow:rgba(0,0,0,.4);
}

/* Keep the existing four / two / one-column layout and CMS page margins. */
body:not(.editor-page):not(.cms-body) :is(.template-card,.learning-card,.tool-directory-card,.pricing-cards .price) {
  min-width:0;
  border:1px solid var(--card-border);
  border-radius:18px;
  background:var(--card-face);
  color:var(--ink);
  box-shadow:inset 0 1px 0 var(--card-rim),
    0 6px 0 -1px var(--card-depth-edge),
    0 11px 12px -4px var(--card-depth-near),
    0 24px 32px -13px var(--card-depth-far);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
body:not(.editor-page):not(.cms-body) :is(.template-card,.learning-card,.tool-directory-card):focus-within {
  transform:translateY(-5px);
  box-shadow:inset 0 1px 0 var(--card-rim),0 8px 0 -1px var(--card-depth-edge),
    0 19px 18px -5px var(--card-depth-near),0 32px 42px -11px var(--card-depth-far);
}

/* Contain shows the whole chart; older cover rules cropped radial previews. */
body:not(.editor-page) .template-card .thumb {height:var(--public-thumb-height)}
body:not(.editor-page) .template-card .tool-thumb-v22 {
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  height:calc(var(--public-thumb-height) + var(--public-thumb-title-height) + 2px)!important;
  padding:0!important;
}
body:not(.editor-page) .tool-thumb-v22 img,
body:not(.editor-page) .tool-directory-grid .tool-directory-thumb img {
  display:block;
  width:100%!important;
  object-fit:contain!important;
  object-position:center;
  padding:12px;
  filter:drop-shadow(0 7px 5px var(--thumb-shadow));
  transform:translateY(-2px);
}
body:not(.editor-page) .tool-thumb-v22 img {height:var(--public-thumb-height)!important;flex:0 0 auto}
body:not(.editor-page) .tool-thumb-v22 b {
  width:100%;height:var(--public-thumb-title-height);flex:0 0 auto;color:var(--ink);
  font-size:13px;
  line-height:1.35;
  padding:0 12px;
  background:rgba(255,255,255,.5);
  border-top:1px solid rgba(100,128,168,.12);
}
body:not(.editor-page) .tool-directory-grid .tool-directory-thumb {
  height:var(--public-thumb-height)!important;
  border:1px solid rgba(100,128,168,.15);
  background:linear-gradient(150deg,#f6faff,#dee9fd)!important;
  box-shadow:inset 0 1px 0 var(--card-rim),inset 0 -1px 0 rgba(100,128,168,.1);
}
body:not(.editor-page) .tool-directory-grid .tool-directory-thumb img {height:100%!important}
body:not(.editor-page) .tool-directory-copy h3 {white-space:normal;overflow:visible;color:var(--ink)}
body:not(.editor-page) .tool-directory-copy p {
  display:block;-webkit-line-clamp:unset;overflow:visible;color:var(--muted)!important;
}
body:not(.editor-page) .learning-card .lab-art {
  height:var(--lab-art-height);
  padding:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,0)),var(--lab-color);
  box-shadow:inset 0 1px 0 var(--card-rim),inset 0 -1px 0 rgba(100,128,168,.12);
}
body:not(.editor-page) .lab-art-symbol img {
  width:70px;height:70px;filter:drop-shadow(0 7px 5px var(--thumb-shadow));
  transform:translateY(-2px);
}
body:not(.editor-page) .learning-card-copy {padding:20px}
body:not(.editor-page) .learning-card h3 {color:var(--ink)}
body:not(.editor-page) .learning-card p {color:var(--muted)}
body:not(.editor-page) .lab-info {font-size:12px;color:var(--muted)}

/* Small availability badges replace the oversized premium placeholder. */
body:not(.editor-page) .pricing-cards-compact {
  width:100%!important;max-width:1240px;gap:24px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body:not(.editor-page) .pricing-cards .price {
  display:flex;flex-direction:column;align-items:stretch;position:relative;
  min-height:0!important;padding:26px!important;
}
body:not(.editor-page) .pricing-cards .price::before {
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:linear-gradient(90deg,#1677ff,#7c3aed);
}
body:not(.editor-page) .pricing-cards .price h3 {align-self:stretch;font-size:25px;line-height:1.25;margin:16px 0 8px!important}
body:not(.editor-page) .pricing-cards .price strong {align-self:stretch;margin:0 0 10px!important;line-height:1.25;color:var(--ink)}
body:not(.editor-page) .pricing-cards .plan-ribbon {
  position:static;transform:none;align-self:flex-start;font-size:11px;line-height:1.4;padding:5px 10px;
}
body:not(.editor-page) .pricing-cards .coming-soon-badge {background:#eee8ff;color:#6940c1}
body:not(.editor-page) .pricing-cards .plan-intro {margin:0 0 10px;line-height:1.6;color:var(--muted);font-size:14px}
body:not(.editor-page) .pricing-cards .price ul {
  display:grid;gap:12px;margin:16px 0 24px!important;padding-left:20px;
  line-height:1.55!important;font-size:14px;color:var(--muted);
}
body:not(.editor-page) .pricing-cards .price>.btn {margin-top:auto;min-height:44px}
body:not(.editor-page) .pricing-cards .soon-label {
  margin-top:auto;padding:12px 14px;border:1px solid var(--line);
  background:var(--bg);color:var(--muted);font-size:13px;line-height:1.5;
}
html[data-theme="dark"] .pricing-cards .coming-soon-badge {background:#342855;color:#d8c6ff}
html[data-theme="dark"] .tool-thumb-v22 b {background:rgba(15,27,45,.85)}
html[data-theme="dark"] .tool-directory-grid .tool-directory-thumb {background:linear-gradient(150deg,#243b5d,#1b3050)!important}
html[data-theme="dark"] .payment-note {background:var(--surface);border-color:var(--line);color:var(--muted)}

/* Sidebar stays within the viewport; only navigation can scroll on short screens. */
.cms-body .cms-layout {grid-template-columns:250px minmax(0,1fr);align-items:start}
.cms-body .sticky-cms-sidebar {
  position:sticky;top:0;align-self:start;height:100vh;height:100dvh;
  min-height:0;padding:18px 16px 14px;gap:12px;overflow:hidden;
}
.cms-body .cms-sidebar-top {display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
.cms-body .cms-sidebar .cms-brand {flex:0 0 auto;gap:7px;margin:0 0 16px;font-size:18px;line-height:1.2}
.cms-body .cms-brand img {width:31px;height:31px;flex-shrink:0}
.cms-body .cms-brand span {display:inline;white-space:nowrap}
.cms-body .cms-brand b {display:inline;white-space:nowrap}
.cms-body .cms-nav {
  flex:1 1 auto;min-height:0;gap:2px;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#33537c transparent;
}
.cms-body .cms-sidebar a {
  flex:0 0 auto;min-height:32px;padding:7px 10px;font-size:14px;line-height:1.3;
}
.cms-body .cms-nav a {gap:8px}
.cms-body .cms-nav a span {min-width:0;white-space:nowrap}
.cms-body .cms-nav-group {flex:0 0 auto;padding:8px 10px 3px;font-size:10px;line-height:1.2;letter-spacing:.09em}
.cms-body .cms-nav-group:first-child {padding-top:0}
.cms-body .cms-sidebar-bottom {flex:0 0 auto;margin-top:0;padding-top:10px;gap:6px}
.cms-body .cms-profile {
  grid-template-columns:36px minmax(0,1fr) 24px;gap:8px;
  margin:0;padding:10px 0 0;border-top:0;
}
.cms-body .cms-profile .avatar {width:36px;height:36px;font-size:13px}
.cms-body .cms-profile .profile-copy {gap:2px}
.cms-body .cms-profile .profile-copy small {font-size:10px;line-height:1.3}
.cms-body .cms-profile .plan-badge {font-size:9px;white-space:nowrap}
.cms-body .cms-sidebar a.profile-logout {padding:4px;min-height:28px;font-size:18px}

@media(hover:hover) and (pointer:fine) {
  body:not(.editor-page):not(.cms-body) :is(.template-card,.learning-card,.tool-directory-card):hover {
    transform:perspective(900px) translateY(-6px) rotateX(1.5deg);
    box-shadow:inset 0 1px 0 var(--card-rim),0 8px 0 -1px var(--card-depth-edge),
      0 19px 18px -5px var(--card-depth-near),0 32px 42px -11px var(--card-depth-far);
  }
}
@media(max-width:900px) {
  .cms-body .cms-layout {grid-template-columns:minmax(0,1fr)}
  .cms-body .sticky-cms-sidebar {display:none}
}
@media(max-width:800px) {
  body:not(.editor-page) .pricing-cards-compact {grid-template-columns:minmax(0,1fr)!important;max-width:480px}
}
@media(prefers-reduced-motion:reduce) {
  body:not(.editor-page):not(.cms-body) :is(.template-card,.learning-card,.tool-directory-card,.pricing-cards .price) {
    transform:none!important;transition:none;
  }
}