:root[data-style="style1"] {
  --wolfshelf-colors-background: #D6E8F8;
  --wolfshelf-colors-surface: #FFFFFF;
  --wolfshelf-colors-surface-alt: #E4E1ED;
  --wolfshelf-colors-sticker-fill: #FFFFFF;
  --wolfshelf-colors-sticker-outline: #FFFFFF;
  --wolfshelf-colors-text-primary: #3F3A8A;
  --wolfshelf-colors-text-secondary: #575EB1;
  --wolfshelf-colors-text-muted: #9C9BB8;
  --wolfshelf-colors-text-inverse: #FFFFFF;
  --wolfshelf-colors-accent-primary: #937CC7;
  --wolfshelf-colors-accent-secondary: #76A8C6;
  --wolfshelf-colors-accent-tertiary: #FFB7DE;
  --wolfshelf-colors-focus-ring: #937CC7;
  --wolfshelf-colors-border: #C3C1D4;
  --wolfshelf-colors-divider: #E4E1ED;
  --wolfshelf-colors-overlay: rgba(63, 58, 138, 0.45);
  --wolfshelf-colors-error: #FF7AB0;
  --wolfshelf-colors-error-surface: #FFDCEC;
  --wolfshelf-colors-warning: #F5C84B;
  --wolfshelf-colors-warning-surface: #FCF1D2;
  --wolfshelf-colors-success: #98CBAC;
  --wolfshelf-colors-success-surface: #E1F2E8;
  --wolfshelf-colors-info: #71CCC9;
  --wolfshelf-colors-info-surface: #D9F4F3;

  --wolfshelf-typography-title-size: 28px;
  --wolfshelf-typography-title-family: "Yusei Magic", "M PLUS Rounded 1c", system-ui, sans-serif;
  --wolfshelf-typography-title-weight: 400;
  --wolfshelf-typography-title-line-height: 1.25;
  --wolfshelf-typography-body-size: 15px;
  --wolfshelf-typography-body-family: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, sans-serif;
  --wolfshelf-typography-body-weight: 500;
  --wolfshelf-typography-body-line-height: 1.55;
  --wolfshelf-typography-caption-size: 12px;
  --wolfshelf-typography-caption-family: "M PLUS Rounded 1c", -apple-system, sans-serif;
  --wolfshelf-typography-caption-weight: 400;
  --wolfshelf-typography-caption-line-height: 1.4;

  --wolfshelf-sticker-outline-width: 3px;
  --wolfshelf-sticker-outline-color: #FFFFFF;

  --wolfshelf-spacing-xs: 4px;
  --wolfshelf-spacing-sm: 8px;
  --wolfshelf-spacing-md: 16px;
  --wolfshelf-spacing-lg: 24px;
  --wolfshelf-spacing-xl: 40px;

  --wolfshelf-radii-sm: 8px;
  --wolfshelf-radii-md: 16px;
  --wolfshelf-radii-lg: 20px;
  --wolfshelf-radii-card: 24px;
  --wolfshelf-radii-dialog: 32px;
  --wolfshelf-radii-pill: 9999px;

  --wolfshelf-shadows-sm: 0 1px 2px rgba(63, 58, 138, 0.15);
  --wolfshelf-shadows-md: 0 4px 12px rgba(63, 58, 138, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --wolfshelf-shadows-lg: 0 12px 32px rgba(63, 58, 138, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --wolfshelf-shadows-sticker: 0 2px 6px rgba(63, 58, 138, 0.25), 0 0 0 3px #FFFFFF;

  --wolfshelf-motion-ui: 120ms;
  --wolfshelf-motion-dialog: 200ms;
  --wolfshelf-motion-sticker: 0ms;
  --wolfshelf-motion-chrome: 2400ms;

  --wolfshelf-gradients-background: linear-gradient(180deg, #D6E8F8 0%, #FBE6F2 55%, #D9F2E4 100%);
  --wolfshelf-gradients-chrome: linear-gradient(180deg, #FFFFFF 0%, #DDDAF0 45%, #B7B1E0 100%);
  --wolfshelf-gradients-button: linear-gradient(180deg, #FFFFFF 0%, #E4E1ED 100%);
  --wolfshelf-gradients-button-active: linear-gradient(180deg, #B7B1E0 0%, #937CC7 100%);
  --wolfshelf-gradients-scanline: none;

  --wolfshelf-sprites-heart-sm: url("/assets/style1/sprites/heart_sm.png");
  --wolfshelf-sprites-heart-md: url("/assets/style1/sprites/heart_md.png");
  --wolfshelf-sprites-star-sm: url("/assets/style1/sprites/star_sm.png");
  --wolfshelf-sprites-star-md: url("/assets/style1/sprites/star_md.png");
  --wolfshelf-sprites-sparkle: url("/assets/style1/sprites/sparkle.png");
  --wolfshelf-sprites-bow: url("/assets/style1/sprites/bow.png");
  --wolfshelf-sprites-cloud: url("/assets/style1/sprites/cloud.png");
  --wolfshelf-sprites-corner-tl: url("/assets/style1/sprites/corner_tl.png");
  --wolfshelf-sprites-corner-tr: url("/assets/style1/sprites/corner_tr.png");
  --wolfshelf-sprites-corner-bl: url("/assets/style1/sprites/corner_bl.png");
  --wolfshelf-sprites-corner-br: url("/assets/style1/sprites/corner_br.png");
  --wolfshelf-sprites-cursor: url("/assets/style1/sprites/cursor.png");
  --wolfshelf-sprites-icon-computer: url("/assets/style1/sprites/icon_computer.png");
  --wolfshelf-sprites-icon-folder: url("/assets/style1/sprites/icon_folder.png");
  --wolfshelf-sprites-icon-window: url("/assets/style1/sprites/icon_window.png");
  --wolfshelf-sprites-divider-dot: url("/assets/style1/sprites/divider_dot.png");

  --wolfshelf-chrome-title-bar-pattern: linear-gradient(180deg, #FFFFFF 0%, #DDDAF0 45%, #B7B1E0 100%);
  --wolfshelf-chrome-scanline-overlay: none;
  --wolfshelf-chrome-focus-glow: 0 0 0 3px rgba(147, 124, 199, 0.45), 0 0 12px rgba(255, 183, 222, 0.55);
}


:root[data-style="style2"] {
  --wolfshelf-colors-background: #161b22;
  --wolfshelf-colors-surface: #21262d;
  --wolfshelf-colors-surface-alt: #30363d;
  --wolfshelf-colors-sticker-fill: #21262d;
  --wolfshelf-colors-sticker-outline: #c9d1d9;
  --wolfshelf-colors-text-primary: #f0f6fc;
  --wolfshelf-colors-text-secondary: #c9d1d9;
  --wolfshelf-colors-text-muted: #6e7681;
  --wolfshelf-colors-text-inverse: #0d1117;
  --wolfshelf-colors-accent-primary: #58a6ff;
  --wolfshelf-colors-accent-secondary: #2563d6;
  --wolfshelf-colors-accent-tertiary: #1f6feb;
  --wolfshelf-colors-focus-ring: #58a6ff;
  --wolfshelf-colors-border: #c9d1d9;
  --wolfshelf-colors-divider: #30363d;
  --wolfshelf-colors-overlay: rgba(13, 17, 23, 0.6);
  --wolfshelf-colors-error: #f85149;
  --wolfshelf-colors-error-surface: #21262d;
  --wolfshelf-colors-warning: #f5a623;
  --wolfshelf-colors-warning-surface: #21262d;
  --wolfshelf-colors-success: #3fb950;
  --wolfshelf-colors-success-surface: #21262d;
  --wolfshelf-colors-info: #58a6ff;
  --wolfshelf-colors-info-surface: #21262d;

  --wolfshelf-typography-title-size: 1.5rem;
  --wolfshelf-typography-title-family: "Helvetica Neue", "Inter", sans-serif;
  --wolfshelf-typography-title-weight: 600;
  --wolfshelf-typography-title-line-height: 1.2;
  --wolfshelf-typography-body-size: 1rem;
  --wolfshelf-typography-body-family: "Helvetica Neue", "Inter", sans-serif;
  --wolfshelf-typography-body-weight: 400;
  --wolfshelf-typography-body-line-height: 1.55;
  --wolfshelf-typography-caption-size: 0.75rem;
  --wolfshelf-typography-caption-family: "Helvetica Neue", "Inter", sans-serif;
  --wolfshelf-typography-caption-weight: 400;
  --wolfshelf-typography-caption-line-height: 1.55;

  --wolfshelf-sticker-outline-width: 1px;
  --wolfshelf-sticker-outline-color: #c9d1d9;

  --wolfshelf-spacing-xs: 0.25rem;
  --wolfshelf-spacing-sm: 0.5rem;
  --wolfshelf-spacing-md: 1rem;
  --wolfshelf-spacing-lg: 1.5rem;
  --wolfshelf-spacing-xl: 3rem;

  --wolfshelf-radii-sm: 2px;
  --wolfshelf-radii-md: 4px;
  --wolfshelf-radii-lg: 8px;
  --wolfshelf-radii-card: 8px;
  --wolfshelf-radii-dialog: 8px;
  --wolfshelf-radii-pill: 4px;

  --wolfshelf-shadows-sm: 0 1px 2px rgba(0,0,0,0.4);
  --wolfshelf-shadows-md: 0 4px 8px rgba(0,0,0,0.5);
  --wolfshelf-shadows-lg: 0 12px 24px rgba(0,0,0,0.6);
  --wolfshelf-shadows-sticker: 0 1px 0 rgba(255,255,255,0.06);

  --wolfshelf-motion-ui: 120ms;
  --wolfshelf-motion-dialog: 200ms;
  --wolfshelf-motion-sticker: 0ms;
  --wolfshelf-motion-chrome: 2400ms;

  --wolfshelf-gradients-background: linear-gradient(180deg, #161b22 0%, #21262d 100%);
  --wolfshelf-gradients-chrome: linear-gradient(180deg, #1f6feb 0%, #2563d6 100%);
  --wolfshelf-gradients-button: #58a6ff;
  --wolfshelf-gradients-button-active: #1f6feb;
  --wolfshelf-gradients-scanline: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 50%, transparent 100%);

  --wolfshelf-sprites-heart-sm: url("/assets/style2/sprites/heart_sm.png");
  --wolfshelf-sprites-heart-md: url("/assets/style2/sprites/heart_md.png");
  --wolfshelf-sprites-star-sm: url("/assets/style2/sprites/star_sm.png");
  --wolfshelf-sprites-star-md: url("/assets/style2/sprites/star_md.png");
  --wolfshelf-sprites-sparkle: url("/assets/style2/sprites/sparkle.png");
  --wolfshelf-sprites-bow: url("/assets/style2/sprites/bow.png");
  --wolfshelf-sprites-cloud: url("/assets/style2/sprites/cloud.png");
  --wolfshelf-sprites-corner-tl: url("/assets/style2/sprites/corner_tl.png");
  --wolfshelf-sprites-corner-tr: url("/assets/style2/sprites/corner_tr.png");
  --wolfshelf-sprites-corner-bl: url("/assets/style2/sprites/corner_bl.png");
  --wolfshelf-sprites-corner-br: url("/assets/style2/sprites/corner_br.png");
  --wolfshelf-sprites-cursor: url("/assets/style2/sprites/cursor.png");
  --wolfshelf-sprites-icon-computer: url("/assets/style2/sprites/icon_computer.png");
  --wolfshelf-sprites-icon-folder: url("/assets/style2/sprites/icon_folder.png");
  --wolfshelf-sprites-icon-window: url("/assets/style2/sprites/icon_window.png");
  --wolfshelf-sprites-divider-dot: url("/assets/style2/sprites/divider_dot.png");

  --wolfshelf-chrome-title-bar-pattern: linear-gradient(180deg, #1f6feb 0%, #2563d6 100%);
  --wolfshelf-chrome-scanline-overlay: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(255,255,255,0.04) 3px);
  --wolfshelf-chrome-focus-glow: 0 0 0 2px rgba(88, 166, 255, 0.5);
}


@keyframes ws-slide-in-top {
  from { transform: translate3d(0, calc(0px - var(--ws-slide-distance, 64px)), 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes ws-slide-out-top {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(0px - var(--ws-slide-distance, 64px)), 0); }
}
@keyframes ws-slide-in-right {
  from { transform: translate3d(var(--ws-slide-distance, 64px), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes ws-slide-out-right {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--ws-slide-distance, 64px), 0, 0); }
}
@keyframes ws-slide-in-bottom {
  from { transform: translate3d(0, var(--ws-slide-distance, 64px), 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes ws-slide-out-bottom {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, var(--ws-slide-distance, 64px), 0); }
}
@keyframes ws-slide-in-left {
  from { transform: translate3d(calc(0px - var(--ws-slide-distance, 64px)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes ws-slide-out-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(0px - var(--ws-slide-distance, 64px)), 0, 0); }
}

@keyframes ws-auth-gate__card-bounce {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes ws-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20%      { transform: translate3d(-4px, 0, 0); }
  40%      { transform: translate3d(4px, 0, 0); }
  60%      { transform: translate3d(-3px, 0, 0); }
  80%      { transform: translate3d(3px, 0, 0); }
}

@keyframes ws-sparkle-pulse {
  0%, 100% { opacity: 0.65; transform: translate3d(0, 0, 0); }
  50%      { opacity: 1.0;  transform: translate3d(0, -2px, 0); }
}
@keyframes ws-cloud-drift {
  from { transform: translate3d(-20px, 0, 0); }
  to   { transform: translate3d(20px, 0, 0); }
}


.ws-sticker-slide {
  animation-duration: var(--ws-slide-duration, 320ms);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.ws-sticker-slide[style*="--ws-slide-from: top"]    { animation-name: ws-slide-in-top; }
.ws-sticker-slide[style*="--ws-slide-from: right"]  { animation-name: ws-slide-in-right; }
.ws-sticker-slide[style*="--ws-slide-from: bottom"] { animation-name: ws-slide-in-bottom; }
.ws-sticker-slide[style*="--ws-slide-from: left"]   { animation-name: ws-slide-in-left; }

.ws-sticker-slide[data-exit="true"][style*="--ws-slide-to: top"]    { animation-name: ws-slide-out-top; }
.ws-sticker-slide[data-exit="true"][style*="--ws-slide-to: right"]  { animation-name: ws-slide-out-right; }
.ws-sticker-slide[data-exit="true"][style*="--ws-slide-to: bottom"] { animation-name: ws-slide-out-bottom; }
.ws-sticker-slide[data-exit="true"][style*="--ws-slide-to: left"]   { animation-name: ws-slide-out-left; }


.ws-orchestrate { position: relative; }

.ws-orchestrate[data-phase="form-swap"] {
  animation: ws-auth-gate__card-bounce var(--wolfshelf-motion-dialog) ease-in-out;
}


.ws-shake-host { display: inline-block; width: 100%; }
.ws-shake-host.ws-shake--active { animation: ws-shake var(--wolfshelf-motion-ui) ease-in-out; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ws-chrome__sparkle--decor,
  .ws-chrome__cloud--drift {
    animation-play-state: paused !important;
  }
  .ws-sticker-slide {
    --ws-slide-distance: 24px !important;
  }
}


*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  padding: var(--wolfshelf-spacing-xl) var(--wolfshelf-spacing-md) var(--wolfshelf-spacing-lg);
  background: var(--wolfshelf-colors-background);
  color: var(--wolfshelf-colors-text-primary);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-body-size);
  font-weight: var(--wolfshelf-typography-body-weight);
  line-height: var(--wolfshelf-typography-body-line-height);
  min-height: 100%;
}

main {
  max-width: 56rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-bottom: 64px;
}

h1, h2, h3 {
  font-family: var(--wolfshelf-typography-title-family);
  font-weight: var(--wolfshelf-typography-title-weight);
  line-height: var(--wolfshelf-typography-title-line-height);
  margin: 0 0 var(--wolfshelf-spacing-md);
  color: var(--wolfshelf-colors-text-primary);
}
h1 { font-size: calc(var(--wolfshelf-typography-title-size) * 1.5); }
h2 { font-size: var(--wolfshelf-typography-title-size); }
h3 { font-size: calc(var(--wolfshelf-typography-title-size) * 0.85); }
small {
  font-size: var(--wolfshelf-typography-caption-size);
  color: var(--wolfshelf-colors-text-secondary);
}
a {
  color: var(--wolfshelf-colors-accent-primary);
  text-decoration: none;
  transition: color var(--wolfshelf-motion-ui);
}
a:hover { color: var(--wolfshelf-colors-accent-secondary); text-decoration: underline; }
p { margin: 0 0 var(--wolfshelf-spacing-sm); }


.ws-card {
  position: relative;
  margin: 0 0 var(--wolfshelf-spacing-lg);
  padding: 0;
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-text-primary);
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-md);
}
.ws-card__title {
  position: relative;
  margin: 0;
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-lg);
  font-family: var(--wolfshelf-typography-title-family);
  font-size: var(--wolfshelf-typography-title-size);
  font-weight: var(--wolfshelf-typography-title-weight);
  color: var(--wolfshelf-colors-text-inverse);
  background: var(--wolfshelf-gradients-chrome);
  border-top-left-radius: var(--wolfshelf-radii-card);
  border-top-right-radius: var(--wolfshelf-radii-card);
  letter-spacing: 0.02em;
}
.ws-card__body {
  padding: var(--wolfshelf-spacing-lg);
}
.ws-card__body > h1:first-child,
.ws-card__body > h2:first-child {
  margin-top: 0;
}

.ws-sticker {
  background: var(--wolfshelf-colors-sticker-fill);
  color: var(--wolfshelf-colors-text-primary);
  border: var(--wolfshelf-sticker-outline-width) solid var(--wolfshelf-sticker-outline-color);
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-sticker);
  padding: var(--wolfshelf-spacing-md);
  margin: var(--wolfshelf-spacing-sm);
}


.ws-btn, button[type="submit"], button[type="button"] {
  display: inline-block;
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-lg);
  background: var(--wolfshelf-gradients-button);
  color: var(--wolfshelf-colors-text-primary);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-pill);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-body-size);
  font-weight: var(--wolfshelf-typography-body-weight);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
  text-align: center;
  transition: background-image var(--wolfshelf-motion-ui), background-color var(--wolfshelf-motion-ui), border-color var(--wolfshelf-motion-ui), color var(--wolfshelf-motion-ui), box-shadow var(--wolfshelf-motion-ui);
}
.ws-btn:hover, button[type="submit"]:hover, button[type="button"]:hover {
  background: var(--wolfshelf-gradients-button-active);
  color: var(--wolfshelf-colors-text-inverse);
  border-color: var(--wolfshelf-colors-accent-primary);
  text-decoration: none;
}
.ws-btn:focus-visible, button[type="submit"]:focus-visible, button[type="button"]:focus-visible {
  outline: none;
  box-shadow: var(--wolfshelf-chrome-focus-glow);
}
.ws-btn:active, button[type="submit"]:active, button[type="button"]:active {
  transform: translate3d(0, 1px, 0);
  box-shadow: var(--wolfshelf-shadows-sm);
}
.ws-btn:disabled, .ws-btn[aria-disabled="true"],
button[type="submit"]:disabled, button[type="button"]:disabled,
button[disabled] {
  background: var(--wolfshelf-colors-surface-alt);
  background-image: none;
  color: var(--wolfshelf-colors-text-muted);
  border-color: var(--wolfshelf-colors-divider);
  box-shadow: none;
  cursor: not-allowed;
}
.ws-btn[data-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.ws-btn[data-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wolfshelf-colors-accent-primary);
  border-right-color: transparent;
  border-radius: 50%;
  animation: ws-cloud-drift 600ms linear infinite;
}
.ws-btn--cta {
  display: inline-block;
  padding: var(--wolfshelf-spacing-md) var(--wolfshelf-spacing-xl);
  font-size: var(--wolfshelf-typography-title-size);
  margin: 0 0 var(--wolfshelf-spacing-md);
}
.ws-btn--ghost {
  background: transparent;
  color: var(--wolfshelf-colors-accent-primary);
  border: 2px solid var(--wolfshelf-colors-accent-primary);
}
.ws-btn--secondary {
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-accent-primary);
  border: 2px solid var(--wolfshelf-colors-accent-primary);
}


.ws-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wolfshelf-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-sm);
}
.ws-list > li {
  position: relative;
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md) var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-xl);
  background: var(--wolfshelf-colors-surface);
  border-radius: var(--wolfshelf-radii-md);
  box-shadow: var(--wolfshelf-shadows-sm);
  background-repeat: no-repeat;
  background-position: var(--wolfshelf-spacing-sm) center;
  background-size: 22px 22px;
  transition: transform var(--wolfshelf-motion-dialog), background-color var(--wolfshelf-motion-ui);
}
.ws-list[data-large="true"] > li {
  transition: none;
}

.ws-list > li.ws-list__item--inserting {
  animation: ws-slide-in-top var(--ws-slide-duration, 320ms) ease-out;
}
.ws-list > li.ws-list__item--exiting {
  animation: ws-slide-out-right var(--ws-slide-duration, 260ms) ease-in forwards;
}

.ws-list__delete {
  background: transparent;
  border: none;
  color: var(--wolfshelf-colors-text-muted);
  cursor: pointer;
  padding: 0 var(--wolfshelf-spacing-xs);
  font-size: 18px;
  line-height: 1;
  margin-left: var(--wolfshelf-spacing-sm);
  transition: color var(--wolfshelf-motion-ui);
}
.ws-list__delete:hover { color: var(--wolfshelf-colors-error); }
.ws-list__delete:focus-visible {
  outline: none;
  box-shadow: var(--wolfshelf-chrome-focus-glow);
  border-radius: var(--wolfshelf-radii-sm);
}

.ws-tile-grid {
  display: grid;
  gap: var(--wolfshelf-spacing-md);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin: 0 0 var(--wolfshelf-spacing-md);
  list-style: none;
  padding: 0;
}
.ws-tile-grid > .ws-tile {
  background: var(--wolfshelf-colors-surface);
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-sm);
  padding: var(--wolfshelf-spacing-md);
  transition: transform var(--wolfshelf-motion-dialog);
}


.ws-form {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-md);
  max-width: 30rem;
}
.ws-form > label {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-sm);
  font-size: var(--wolfshelf-typography-caption-size);
  color: var(--wolfshelf-colors-text-secondary);
}
.ws-form input[type="text"],
.ws-form input[type="email"],
.ws-form input[type="password"],
.ws-form input[type="number"],
.ws-form input[type="date"],
.ws-form input[type="file"],
.ws-form select,
.ws-form textarea {
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-text-primary);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-md);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-body-size);
  transition: border-color var(--wolfshelf-motion-ui), box-shadow var(--wolfshelf-motion-ui);
}
.ws-form input:focus-visible,
.ws-form select:focus-visible,
.ws-form textarea:focus-visible {
  outline: none;
  border-color: var(--wolfshelf-colors-accent-primary);
  box-shadow: var(--wolfshelf-chrome-focus-glow);
}
.ws-form input[aria-invalid="true"],
.ws-form select[aria-invalid="true"],
.ws-form textarea[aria-invalid="true"] {
  border-color: var(--wolfshelf-colors-error);
}
.ws-form ::placeholder { color: var(--wolfshelf-colors-text-muted); }
.ws-form button[type="submit"] { align-self: flex-start; margin-top: var(--wolfshelf-spacing-lg); }
.ws-form + p { margin-top: var(--wolfshelf-spacing-lg); }

.ws-field__error {
  font-size: var(--wolfshelf-typography-caption-size);
  color: var(--wolfshelf-colors-error);
  padding: var(--wolfshelf-spacing-xs) 0;
  margin: 0;
}


.ws-banner {
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  border-radius: var(--wolfshelf-radii-md);
  margin: 0 0 var(--wolfshelf-spacing-md);
  font-weight: var(--wolfshelf-typography-body-weight);
}
.ws-banner--error {
  background: var(--wolfshelf-colors-error-surface);
  color: var(--wolfshelf-colors-error);
  border: 2px solid var(--wolfshelf-colors-error);
}
.ws-banner--ok {
  background: var(--wolfshelf-colors-success-surface);
  color: var(--wolfshelf-colors-success);
  border: 2px solid var(--wolfshelf-colors-success);
}
.ws-error {
  color: var(--wolfshelf-colors-error);
  font-weight: var(--wolfshelf-typography-body-weight);
}


.ws-toast-host {
  position: fixed;
  right: var(--wolfshelf-spacing-md);
  bottom: var(--wolfshelf-spacing-md);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--wolfshelf-spacing-sm);
  z-index: 100;
  pointer-events: none;
}
.ws-toast {
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-text-primary);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-md);
  box-shadow: var(--wolfshelf-shadows-md);
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  pointer-events: auto;
  min-width: 200px;
  transition: transform var(--wolfshelf-motion-dialog);
}
.ws-toast--success {
  border-color: var(--wolfshelf-colors-success);
  background: var(--wolfshelf-colors-success-surface);
  color: var(--wolfshelf-colors-success);
}
.ws-toast--error {
  border-color: var(--wolfshelf-colors-error);
  background: var(--wolfshelf-colors-error-surface);
  color: var(--wolfshelf-colors-error);
}


nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolfshelf-spacing-sm);
  align-items: center;
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface);
  border-radius: var(--wolfshelf-radii-md);
  margin-bottom: var(--wolfshelf-spacing-md);
}
nav a {
  color: var(--wolfshelf-colors-accent-primary);
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-sm);
  border-radius: var(--wolfshelf-radii-sm);
  font-weight: var(--wolfshelf-typography-body-weight);
  transition: background-color var(--wolfshelf-motion-ui), color var(--wolfshelf-motion-ui);
}
nav a:hover {
  background: var(--wolfshelf-colors-surface-alt);
  text-decoration: none;
}
nav form { display: inline; }
nav button[type="submit"] {
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-md);
  font-size: var(--wolfshelf-typography-caption-size);
}


.ws-style-switcher {
  position: fixed;
  top: var(--wolfshelf-spacing-sm);
  right: var(--wolfshelf-spacing-sm);
  display: flex;
  gap: var(--wolfshelf-spacing-sm);
  z-index: 10;
}
.ws-style-switcher button {
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface-alt);
  color: var(--wolfshelf-colors-text-primary);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-caption-size);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-md);
  cursor: pointer;
  font-weight: var(--wolfshelf-typography-body-weight);
}


.ws-tabs {
  display: flex;
  gap: var(--wolfshelf-spacing-sm);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wolfshelf-spacing-lg);
}
.ws-tab {
  display: inline-block;
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-lg);
  background: var(--wolfshelf-gradients-button);
  color: var(--wolfshelf-colors-text-primary);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-pill);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-body-size);
  font-weight: var(--wolfshelf-typography-body-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-image var(--wolfshelf-motion-ui), background-color var(--wolfshelf-motion-ui), border-color var(--wolfshelf-motion-ui), color var(--wolfshelf-motion-ui), box-shadow var(--wolfshelf-motion-ui);
}
.ws-tab:hover {
  background: var(--wolfshelf-gradients-button-active);
  color: var(--wolfshelf-colors-text-inverse);
  border-color: var(--wolfshelf-colors-accent-primary);
  text-decoration: none;
}
.ws-tab:focus-visible {
  outline: none;
  box-shadow: var(--wolfshelf-chrome-focus-glow);
}
.ws-tab[aria-selected="true"] {
  background: var(--wolfshelf-gradients-button-active);
  color: var(--wolfshelf-colors-text-inverse);
  border-color: var(--wolfshelf-colors-accent-primary);
  cursor: default;
}
.ws-tab[aria-selected="true"]:hover { text-decoration: none; }


.ws-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--wolfshelf-colors-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.ws-cover {
  display: block;
  max-width: 100%;
  max-height: 25vh;
  width: auto;
  margin: 0 auto var(--wolfshelf-spacing-md);
  object-fit: contain;
  border-radius: var(--wolfshelf-radii-md);
}
.ws-cover--placeholder {
  background: var(--wolfshelf-colors-surface-alt);
  color: var(--wolfshelf-colors-text-muted);
  text-align: center;
  padding: var(--wolfshelf-spacing-lg);
}

.ws-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  margin: 0 0 var(--wolfshelf-spacing-md);
}
.ws-fields dt {
  font-weight: var(--wolfshelf-typography-body-weight);
  color: var(--wolfshelf-colors-text-secondary);
}
.ws-fields dd { margin: 0; }


.ws-empty-state {
  text-align: center;
  padding: var(--wolfshelf-spacing-xl) var(--wolfshelf-spacing-md);
  color: var(--wolfshelf-colors-text-secondary);
}
.ws-empty-state__sprite {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--wolfshelf-spacing-md);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.ws-empty-state__sprite--folder { background-image: var(--wolfshelf-sprites-icon-folder); }
.ws-empty-state__sprite--window { background-image: var(--wolfshelf-sprites-icon-window); }
.ws-empty-state__sprite--computer { background-image: var(--wolfshelf-sprites-icon-computer); }
.ws-empty-state__title {
  font-family: var(--wolfshelf-typography-title-family);
  font-size: var(--wolfshelf-typography-title-size);
  margin: 0 0 var(--wolfshelf-spacing-sm);
}


:root[data-style="style1"] body {
  background: var(--wolfshelf-gradients-background);
  background-attachment: fixed;
}

:root[data-style="style1"] h1,
:root[data-style="style1"] h2 {
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7);
}

:root[data-style="style1"] .ws-card {
  background-color: var(--wolfshelf-colors-sticker-fill);
  background-image:
    var(--wolfshelf-sprites-corner-tl),
    var(--wolfshelf-sprites-corner-tr),
    var(--wolfshelf-sprites-corner-bl),
    var(--wolfshelf-sprites-corner-br);
  background-position:
    left var(--wolfshelf-spacing-sm) top var(--wolfshelf-spacing-sm),
    right var(--wolfshelf-spacing-sm) top var(--wolfshelf-spacing-sm),
    left var(--wolfshelf-spacing-sm) bottom var(--wolfshelf-spacing-sm),
    right var(--wolfshelf-spacing-sm) bottom var(--wolfshelf-spacing-sm);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: var(--wolfshelf-sticker-outline-width) solid var(--wolfshelf-sticker-outline-color);
  border-radius: var(--wolfshelf-radii-lg);
  box-shadow: var(--wolfshelf-shadows-sticker);
}
:root[data-style="style1"] .ws-card__title {
  background: var(--wolfshelf-gradients-chrome);
  color: var(--wolfshelf-colors-text-primary);
  margin: var(--wolfshelf-spacing-xl) var(--wolfshelf-spacing-xl) 0;
  border-radius: var(--wolfshelf-radii-md);
  padding-right: calc(var(--wolfshelf-spacing-lg) + 40px);
}
:root[data-style="style1"] .ws-card__title::after {
  content: "";
  position: absolute;
  right: var(--wolfshelf-spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: var(--wolfshelf-sprites-bow) no-repeat center / contain;
}
:root[data-style="style1"] .ws-card__body {
  padding: var(--wolfshelf-spacing-lg) var(--wolfshelf-spacing-xl) var(--wolfshelf-spacing-xl);
}

:root[data-style="style1"] .ws-list > li {
  background-color: var(--wolfshelf-colors-surface);
  background-image: var(--wolfshelf-sprites-heart-sm);
  border: 2px solid var(--wolfshelf-colors-accent-tertiary);
}

:root[data-style="style1"] nav {
  background: rgba(255, 255, 255, 0.7);
  border: 2px dashed var(--wolfshelf-colors-accent-tertiary);
}

:root[data-style="style1"] .ws-style-switcher button {
  background: var(--wolfshelf-gradients-button);
  border-color: var(--wolfshelf-colors-surface);
  box-shadow: var(--wolfshelf-shadows-sticker);
}

:root[data-style="style1"] .ws-chrome__sparkle--decor {
  position: absolute;
  top: var(--wolfshelf-spacing-sm);
  right: var(--wolfshelf-spacing-sm);
  width: 32px;
  height: 32px;
  background: var(--wolfshelf-sprites-sparkle) no-repeat center / contain;
  animation: ws-sparkle-pulse var(--wolfshelf-motion-chrome) ease-in-out infinite;
  pointer-events: none;
}
:root[data-style="style1"] .ws-chrome__cloud--drift {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: var(--wolfshelf-sprites-cloud) repeat-x center / 128px;
  animation: ws-cloud-drift calc(var(--wolfshelf-motion-chrome) * 4) linear infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}


:root[data-style="style2"] body {
  background:
    radial-gradient(circle at top right, rgba(88, 166, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at bottom left, rgba(248, 81, 73, 0.06) 0%, transparent 50%),
    var(--wolfshelf-colors-background);
  background-attachment: fixed;
  image-rendering: pixelated;
}

:root[data-style="style2"] img,
:root[data-style="style2"] .ws-list > li {
  image-rendering: pixelated;
}

:root[data-style="style2"] .ws-card {
  background: var(--wolfshelf-colors-surface);
  border: var(--wolfshelf-sticker-outline-width) solid var(--wolfshelf-sticker-outline-color);
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-md);
}
:root[data-style="style2"] .ws-card__title {
  background: var(--wolfshelf-gradients-chrome);
  color: var(--wolfshelf-colors-text-primary);
  border-bottom: 1px solid var(--wolfshelf-colors-divider);
  border-top-left-radius: var(--wolfshelf-radii-card);
  border-top-right-radius: var(--wolfshelf-radii-card);
  font-family: var(--wolfshelf-typography-title-family);
  font-size: var(--wolfshelf-typography-body-size);
  font-weight: var(--wolfshelf-typography-title-weight);
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  padding-left: calc(var(--wolfshelf-spacing-md) + 28px);
}
:root[data-style="style2"] .ws-card__title::before {
  content: "";
  position: absolute;
  left: var(--wolfshelf-spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--wolfshelf-sprites-icon-window) no-repeat center / 16px;
  image-rendering: pixelated;
}
:root[data-style="style2"] .ws-card__body {
  padding: var(--wolfshelf-spacing-lg);
}

:root[data-style="style2"] .ws-list > li {
  background-color: var(--wolfshelf-colors-background);
  background-image: var(--wolfshelf-sprites-heart-sm);
  background-size: 16px 16px;
  background-position: var(--wolfshelf-spacing-sm) center;
  border: 1px solid var(--wolfshelf-colors-divider);
  padding-left: calc(var(--wolfshelf-spacing-sm) + 16px + var(--wolfshelf-spacing-sm));
}

:root[data-style="style2"] nav {
  background: var(--wolfshelf-colors-surface);
  border: 1px solid var(--wolfshelf-colors-divider);
}

:root[data-style="style2"] .ws-style-switcher button {
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-text-primary);
  border-color: var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-sm);
}

:root[data-style="style2"] .ws-chrome__sparkle--decor,
:root[data-style="style2"] .ws-chrome__cloud--drift {
  display: none;
}


.ws-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.ws-shelf-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolfshelf-spacing-md);
  align-items: center;
  margin: var(--wolfshelf-spacing-md) 0 var(--wolfshelf-spacing-lg);
}
.ws-shelf-search-form {
  display: inline-flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
}
.ws-shelf-search-label { display: inline-flex; align-items: center; }
.ws-shelf-search {
  min-width: 18ch;
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-text-primary);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-pill);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-body-size);
}
.ws-shelf-search:focus-visible {
  outline: none;
  box-shadow: var(--wolfshelf-chrome-focus-glow);
  border-color: var(--wolfshelf-colors-accent-primary);
}
.ws-shelf-tabs {
  display: inline-flex;
  gap: var(--wolfshelf-spacing-sm);
  flex-wrap: wrap;
}
.ws-shelf-tab[aria-pressed="true"] {
  background: var(--wolfshelf-gradients-button-active);
  color: var(--wolfshelf-colors-text-inverse);
  border-color: var(--wolfshelf-colors-accent-primary);
}
.ws-shelf-sort, .ws-shelf-filters {
  font-family: var(--wolfshelf-typography-body-family);
}
.ws-shelf-sort summary, .ws-shelf-filters summary {
  cursor: pointer;
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-pill);
  list-style: none;
}
.ws-shelf-sort summary::-webkit-details-marker,
.ws-shelf-filters summary::-webkit-details-marker { display: none; }
.ws-shelf-sort-options {
  list-style: none;
  padding: var(--wolfshelf-spacing-sm);
  margin: var(--wolfshelf-spacing-xs) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-xs);
  background: var(--wolfshelf-colors-surface);
  border: 2px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-md);
}
.ws-shelf-sort-option {
  display: block;
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-sm);
  color: var(--wolfshelf-colors-text-primary);
  text-decoration: none;
  border-radius: var(--wolfshelf-radii-sm);
}
.ws-shelf-sort-option[aria-current="true"] {
  background: var(--wolfshelf-colors-surface-alt);
  font-weight: 700;
}
.ws-shelf-filters-body {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-md);
  padding: var(--wolfshelf-spacing-md);
  margin-top: var(--wolfshelf-spacing-xs);
  background: var(--wolfshelf-colors-surface);
  border: 2px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-md);
}
.ws-shelf-filters-axis {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-xs);
}
.ws-shelf-filters-axis legend {
  font-weight: 700;
  margin-bottom: var(--wolfshelf-spacing-xs);
}
.ws-shelf-filters__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--wolfshelf-colors-accent-primary);
  color: #fff;
  border-radius: var(--wolfshelf-radii-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.ws-filter-builder {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-md);
}
.ws-filter-builder__grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--wolfshelf-spacing-md);
  align-items: start;
}
.ws-filter-builder__panes {
  min-height: 200px;
  padding: var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface-alt);
  border: 1.5px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-md);
}
.ws-filter-builder__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
}

.ws-filter-axes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--wolfshelf-colors-surface-alt);
  border: 1.5px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-md);
}
.ws-filter-axes__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wolfshelf-spacing-sm);
  padding: 8px 12px;
  background: transparent;
  color: var(--wolfshelf-colors-text-primary);
  border: 1.5px solid transparent;
  border-radius: var(--wolfshelf-radii-sm);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-body-size);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--wolfshelf-motion-ui), border-color var(--wolfshelf-motion-ui);
}
.ws-filter-axes__item:hover {
  background: var(--wolfshelf-colors-surface);
}
.ws-filter-axes__item[aria-selected="true"] {
  background: var(--wolfshelf-colors-surface);
  border-color: var(--wolfshelf-colors-accent-primary);
  color: var(--wolfshelf-colors-accent-primary);
}
.ws-filter-axes__item:focus-visible {
  outline: none;
  box-shadow: var(--wolfshelf-chrome-focus-glow);
}
.ws-filter-axes__label { flex: 1 1 auto; }
.ws-filter-axes__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--wolfshelf-colors-accent-primary);
  color: #fff;
  border-radius: var(--wolfshelf-radii-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
}

.ws-filter-pane {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-sm);
}
.ws-filter-pane[hidden] { display: none; }
.ws-filter-pane .ws-shelf-filters-axis {
  gap: 6px;
}
.ws-filter-pane .ws-shelf-filters-axis legend {
  font-size: var(--wolfshelf-typography-caption-size);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wolfshelf-colors-text-secondary);
  margin-bottom: 8px;
}
.ws-filter-pane label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--wolfshelf-radii-sm);
  cursor: pointer;
}
.ws-filter-pane label:hover {
  background: var(--wolfshelf-colors-surface);
}
.ws-filter-pane fieldset.ws-shelf-filters-axis {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

@media (max-width: 720px) {
  .ws-filter-builder__grid {
    grid-template-columns: 1fr;
  }
  .ws-filter-axes {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .ws-filter-axes__item { flex: 0 0 auto; }
}
.ws-shelf-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolfshelf-spacing-xs);
}
.ws-shelf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-xs);
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface-alt);
  color: var(--wolfshelf-colors-text-primary);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-pill);
  font-size: var(--wolfshelf-typography-caption-size);
  text-decoration: none;
}
.ws-shelf-chip__close { font-weight: 700; }
.ws-shelf-chip--reset {
  background: transparent;
  border-style: dashed;
}


.ws-shelf-view {
  margin-top: var(--wolfshelf-spacing-md);
}


.ws-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--wolfshelf-spacing-md);
}
.ws-shelf-card {
  display: flex;
  flex-direction: column;
  background: var(--wolfshelf-colors-sticker-fill);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-sticker);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--wolfshelf-motion-ui), background-color var(--wolfshelf-motion-ui), border-color var(--wolfshelf-motion-ui);
}
.ws-shelf-card:hover {
  text-decoration: none;
  box-shadow: var(--wolfshelf-shadows-lg);
}
.ws-shelf-card:focus-visible {
  outline: none;
  box-shadow: var(--wolfshelf-chrome-focus-glow);
}
.ws-shelf-card__cover-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.ws-shelf-card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 0.71;
  object-fit: cover;
  background: var(--wolfshelf-colors-surface-alt);
}
.ws-shelf-card__type-stamp {
  position: absolute;
  top: var(--wolfshelf-spacing-xs);
  right: var(--wolfshelf-spacing-xs);
  padding: 2px 8px;
  max-width: calc(100% - var(--wolfshelf-spacing-md) * 2);
  background: var(--wolfshelf-colors-sticker-fill);
  color: var(--wolfshelf-colors-text-primary);
  border: 1.5px solid var(--wolfshelf-colors-accent-primary);
  border-radius: var(--wolfshelf-radii-sm);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(-4deg);
  transform-origin: 80% 50%;
  box-shadow: 0 1px 0 0 var(--wolfshelf-colors-accent-primary);
  pointer-events: none;
}
.ws-shelf-card__cover--placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--wolfshelf-spacing-sm);
  color: var(--wolfshelf-colors-text-muted);
}
.ws-shelf-card__placeholder-title {
  font-family: var(--wolfshelf-typography-body-family);
  font-weight: 700;
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-shelf-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-xs);
  padding: var(--wolfshelf-spacing-md);
}
.ws-shelf-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--wolfshelf-typography-body-family);
  font-weight: var(--wolfshelf-typography-body-weight);
  color: var(--wolfshelf-colors-text-primary);
  line-height: 1.25;
}
.ws-shelf-card__progress {
  color: var(--wolfshelf-colors-text-secondary);
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-shelf-card__rating {
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--wolfshelf-colors-accent-tertiary);
  color: var(--wolfshelf-colors-text-primary);
  border-radius: var(--wolfshelf-radii-pill);
  font-weight: 700;
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-shelf-card__vis {
  align-self: flex-start;
  padding: 2px 8px;
  background: var(--wolfshelf-colors-info-surface);
  color: var(--wolfshelf-colors-text-secondary);
  border-radius: var(--wolfshelf-radii-pill);
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-shelf-card__vis--public {
  background: var(--wolfshelf-colors-success-surface);
}

.ws-shelf-card--placeholder {
  min-height: 240px;
  background: var(--wolfshelf-colors-surface-alt);
  border-style: dashed;
}

.ws-shelf-card--in {
  animation: ws-slide-in-bottom var(--ws-slide-duration, 320ms) ease-out both;
  --ws-slide-distance: 24px;
}
.ws-shelf-row--in {
  animation: ws-slide-in-bottom var(--ws-slide-duration, 240ms) ease-out both;
  --ws-slide-distance: 16px;
}
.ws-shelf-pile-card--in {
  animation: ws-slide-in-bottom var(--ws-slide-duration, 320ms) ease-out both;
  --ws-slide-distance: 32px;
}
.ws-shelf-mosaic-tile--in {
  animation: ws-slide-in-bottom var(--ws-slide-duration, 320ms) ease-out both;
  --ws-slide-distance: 24px;
}


.ws-shelf-list {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-xs);
}
.ws-shelf-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: var(--wolfshelf-spacing-md);
  align-items: center;
  padding: var(--wolfshelf-spacing-sm) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface);
  border: 2px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-md);
  text-decoration: none;
  color: inherit;
}
.ws-shelf-row:hover { text-decoration: none; background: var(--wolfshelf-colors-surface-alt); }
.ws-shelf-row__title { font-weight: 700; }
.ws-shelf-row__cover {
  display: block;
  width: 56px;
  height: 80px;
  border-radius: var(--wolfshelf-radii-sm);
  overflow: hidden;
  background: var(--wolfshelf-colors-surface-alt);
  border: 1px solid var(--wolfshelf-colors-divider);
}
.ws-shelf-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ws-shelf-row__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wolfshelf-typography-caption-size);
  color: var(--wolfshelf-colors-text-secondary);
  padding: 4px;
  text-align: center;
  line-height: 1.1;
}
.ws-shelf-row__cover--placeholder > span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.ws-shelf-row__progress, .ws-shelf-row__updated {
  color: var(--wolfshelf-colors-text-secondary);
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  background: var(--wolfshelf-colors-info-surface);
  color: var(--wolfshelf-colors-text-primary);
  border: 1px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-pill);
  font-family: var(--wolfshelf-typography-body-family);
  font-size: var(--wolfshelf-typography-caption-size);
  font-weight: 600;
  font-style: italic;
  line-height: 1.6;
  white-space: nowrap;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-type-chip__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wolfshelf-colors-accent-primary);
  flex: 0 0 auto;
}
.ws-shelf-row__type--unset {
  color: var(--wolfshelf-colors-text-muted);
  font-style: italic;
}
@media (max-width: 720px) {
  .ws-shelf-row {
    grid-template-columns: 48px 1fr;
    gap: var(--wolfshelf-spacing-xs);
  }
  .ws-shelf-row__cover { width: 48px; height: 64px; }
}


.ws-pile {
  position: relative;
  margin: var(--wolfshelf-spacing-md) 0;
  height: 70vh;
  min-height: 480px;
  max-height: 900px;
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-md);
  background: var(--wolfshelf-colors-surface-alt);
  overflow: hidden;
}

.ws-pile__canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.ws-pile__canvas:active { cursor: grabbing; }
.ws-pile__canvas:focus-visible {
  box-shadow: inset 0 0 0 3px var(--wolfshelf-colors-focus-ring);
}

.ws-pile__controls {
  position: absolute;
  top: var(--wolfshelf-spacing-sm);
  right: var(--wolfshelf-spacing-sm);
  display: flex;
  gap: var(--wolfshelf-spacing-xs);
  z-index: 2;
}
.ws-pile__controls button {
  min-width: 40px;
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-sm);
  font-size: var(--wolfshelf-typography-body-size);
  line-height: 1;
}

.ws-pile__zoom-status {
  position: absolute;
  bottom: var(--wolfshelf-spacing-sm);
  right: var(--wolfshelf-spacing-sm);
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-sm);
  border-radius: var(--wolfshelf-radii-pill);
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-text-secondary);
  font-size: var(--wolfshelf-typography-caption-size);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.ws-pile__zoom-status--visible { opacity: 1; }

.ws-pile__a11y-list {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-pile[data-pile-failed] .ws-pile__canvas,
.ws-pile[data-pile-failed] .ws-pile__controls,
.ws-pile[data-pile-failed] .ws-pile__zoom-status { display: none; }
.ws-pile[data-pile-failed] .ws-pile__a11y-list {
  position: static;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  overflow: auto;
  padding: var(--wolfshelf-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-xs);
}

@media (max-width: 720px) {
  .ws-pile { height: 60vh; min-height: 360px; }
  .ws-pile__controls button { min-width: 36px; }
}


.ws-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wolfshelf-spacing-md);
  grid-auto-rows: 120px;
}
.ws-mosaic-tile {
  position: relative;
  background: var(--wolfshelf-colors-surface);
  border: 2px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-md);
  overflow: hidden;
}
.ws-mosaic-tile__header {
  padding: var(--wolfshelf-spacing-sm);
  display: flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-xs);
  font-weight: 700;
}
.ws-mosaic-tile__children {
  position: relative;
  height: calc(100% - 36px);
}
.ws-mosaic-child {
  position: absolute;
  width: 40px;
  aspect-ratio: 0.71;
  background: var(--wolfshelf-colors-sticker-fill);
  border: 1px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-sm);
  box-shadow: var(--wolfshelf-shadows-sm);
  overflow: hidden;
}
.ws-mosaic-child img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.ws-mosaic-tile__more {
  position: absolute;
  right: var(--wolfshelf-spacing-sm);
  top: var(--wolfshelf-spacing-sm);
  padding: 2px 8px;
  background: var(--wolfshelf-colors-surface-alt);
  border-radius: var(--wolfshelf-radii-pill);
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-mosaic-footer {
  margin-top: var(--wolfshelf-spacing-md);
  color: var(--wolfshelf-colors-text-secondary);
  font-size: var(--wolfshelf-typography-caption-size);
}


.ws-shelf-pagination {
  margin-top: var(--wolfshelf-spacing-lg);
}
.ws-shelf-sentinel {
  height: 1px;
  width: 100%;
}
.ws-shelf-eor {
  margin-top: var(--wolfshelf-spacing-lg);
  text-align: center;
  color: var(--wolfshelf-colors-text-secondary);
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-shelf-error {
  margin-top: var(--wolfshelf-spacing-md);
  padding: var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-error-surface);
  border: 2px dashed var(--wolfshelf-colors-error);
  border-radius: var(--wolfshelf-radii-md);
}


.ws-shelf-empty {
  margin: var(--wolfshelf-spacing-lg) auto;
  padding: var(--wolfshelf-spacing-lg);
  text-align: center;
  background: var(--wolfshelf-colors-surface);
  border: 2px dashed var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-card);
  max-width: 480px;
}
.ws-shelf-empty__title {
  font-family: var(--wolfshelf-typography-title-family);
  font-size: var(--wolfshelf-typography-title-size);
  margin: 0 0 var(--wolfshelf-spacing-sm);
}
.ws-shelf-empty__hint {
  color: var(--wolfshelf-colors-text-secondary);
  margin: 0 0 var(--wolfshelf-spacing-md);
}


:root[data-style="style2"] .ws-shelf-card {
  background: var(--wolfshelf-colors-surface-alt);
  border-color: var(--wolfshelf-colors-divider);
}
:root[data-style="style2"] .ws-shelf-card__cover {
  background: var(--wolfshelf-colors-surface);
}
:root[data-style="style2"] .ws-mosaic-child {
  width: 44px;
}


.ws-now {
  padding: var(--wolfshelf-spacing-lg);
  max-width: 960px;
  margin: 0 auto;
}

.ws-now__header {
  margin-bottom: var(--wolfshelf-spacing-md);
}
.ws-now__title {
  font-family: var(--wolfshelf-typography-title-family);
  font-size: var(--wolfshelf-typography-title-size);
  margin: var(--wolfshelf-spacing-sm) 0;
}

.ws-now-tabs {
  display: flex;
  gap: var(--wolfshelf-spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--wolfshelf-spacing-md);
}
.ws-now-tab {
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface);
  border: 2px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-pill);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: var(--wolfshelf-colors-text-primary);
}
.ws-now-tab:hover {
  text-decoration: none;
  border-color: var(--wolfshelf-colors-accent);
}
.ws-now-tab--active {
  background: var(--wolfshelf-colors-accent-surface);
  border-color: var(--wolfshelf-colors-accent);
  font-weight: 700;
}

.ws-now__pick {
  margin-bottom: var(--wolfshelf-spacing-md);
}
.ws-now__pick[disabled] {
  cursor: not-allowed;
}

.ws-now-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-md);
}

.ws-now-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--wolfshelf-spacing-md);
  padding: var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-sticker-fill);
  border: 2px solid var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-card);
  box-shadow: var(--wolfshelf-shadows-sm);
}
.ws-now-card--in {
  transform: translateY(0);
  transition: transform var(--wolfshelf-motion-medium) var(--wolfshelf-motion-ease-enter);
}
.ws-now-card--out {
  transform: translateY(100%);
  transition: transform var(--wolfshelf-motion-medium) var(--wolfshelf-motion-ease-exit);
}
.ws-now-card--hidden {
  display: none;
}
.ws-now-card--picked {
  border-color: var(--wolfshelf-colors-accent);
  box-shadow: var(--wolfshelf-shadows-md);
}

.ws-now-card__cover {
  width: 96px;
  aspect-ratio: 0.71;
  overflow: hidden;
  border-radius: var(--wolfshelf-radii-md);
  background: var(--wolfshelf-colors-surface-alt);
}
.ws-now-card__cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-now-card__cover-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--wolfshelf-colors-surface-alt),
    var(--wolfshelf-colors-surface-alt) 8px,
    var(--wolfshelf-colors-divider) 8px,
    var(--wolfshelf-colors-divider) 16px
  );
}

.ws-now-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-sm);
  padding-inline-start: var(--wolfshelf-spacing-md);
}

.ws-now-card__title {
  font-family: var(--wolfshelf-typography-title-family);
  font-size: var(--wolfshelf-typography-h3-size, var(--wolfshelf-typography-title-size));
  margin: 0;
}
.ws-now-card__title a {
  color: inherit;
  text-decoration: none;
}
.ws-now-card__title a:hover {
  text-decoration: underline;
}

.ws-now-card__chips {
  display: flex;
  gap: var(--wolfshelf-spacing-xs);
  flex-wrap: wrap;
}

.ws-now-card__stuck {
  display: flex;
  gap: var(--wolfshelf-spacing-xs);
  flex-wrap: wrap;
}
.ws-now-stuck-chip {
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-sm);
  background: var(--wolfshelf-colors-warn-surface, var(--wolfshelf-colors-surface-alt));
  border: 2px solid var(--wolfshelf-colors-warn, var(--wolfshelf-colors-divider));
  border-radius: var(--wolfshelf-radii-pill);
  font-size: var(--wolfshelf-typography-caption-size);
}
.ws-now-stuck-chip--needs-return {
  border-color: var(--wolfshelf-colors-accent);
}
.ws-now-stuck-chip--paused {
  border-style: dashed;
}
.ws-now-stuck-chip--stale {
  border-color: var(--wolfshelf-colors-warn, var(--wolfshelf-colors-divider));
}

.ws-now-card__progress {
  display: flex;
  gap: var(--wolfshelf-spacing-sm);
  flex-wrap: wrap;
  font-size: var(--wolfshelf-typography-body-size);
}
.ws-now-card__progress-num {
  font-weight: 700;
}
.ws-now-card__progress-text {
  color: var(--wolfshelf-colors-text-secondary);
}
.ws-now-card__hint {
  color: var(--wolfshelf-colors-text-secondary);
  font-style: italic;
}

.ws-now-card__updated {
  font-size: var(--wolfshelf-typography-caption-size);
  color: var(--wolfshelf-colors-text-secondary);
}

.ws-now-card__actions {
  display: flex;
  gap: var(--wolfshelf-spacing-sm);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--wolfshelf-spacing-sm);
  border-top: 1px solid var(--wolfshelf-colors-divider);
}
.ws-now-card__retry[hidden] {
  display: none;
}
.ws-now-card__complete-tooltip {
  color: var(--wolfshelf-colors-text-secondary);
  font-size: var(--wolfshelf-typography-caption-size);
}

.ws-now-empty,
.ws-now-error {
  margin: var(--wolfshelf-spacing-lg) auto;
  padding: var(--wolfshelf-spacing-lg);
  text-align: center;
  background: var(--wolfshelf-colors-surface);
  border: 2px dashed var(--wolfshelf-colors-divider);
  border-radius: var(--wolfshelf-radii-card);
  max-width: 560px;
}


:root[data-style="style2"] .ws-now-card {
  background: var(--wolfshelf-colors-surface-alt);
}
:root[data-style="style2"] .ws-now-tab {
  background: var(--wolfshelf-colors-surface-alt);
}
:root[data-style="style2"] .ws-now-tab--active {
  background: var(--wolfshelf-colors-accent-surface);
}


.ws-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
  margin: 0 0 var(--wolfshelf-spacing-md);
  padding: 0;
  font-size: var(--wolfshelf-typography-caption-size);
  font-family: var(--wolfshelf-typography-caption-family);
  line-height: var(--wolfshelf-typography-caption-line-height);
}

.ws-breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-md);
  background: var(--wolfshelf-colors-surface);
  color: var(--wolfshelf-colors-accent-primary);
  border: 1px solid var(--wolfshelf-colors-border);
  border-radius: var(--wolfshelf-radii-pill);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--wolfshelf-motion-ui), color var(--wolfshelf-motion-ui);
}
.ws-breadcrumb__back:hover,
.ws-breadcrumb__back:focus-visible {
  background: var(--wolfshelf-colors-surface-alt);
  color: var(--wolfshelf-colors-accent-secondary);
  text-decoration: none;
}

.ws-breadcrumb__link {
  color: var(--wolfshelf-colors-text-secondary);
  text-decoration: none;
}
.ws-breadcrumb__link:hover,
.ws-breadcrumb__link:focus-visible {
  color: var(--wolfshelf-colors-accent-primary);
  text-decoration: underline;
}

.ws-breadcrumb__sep {
  color: var(--wolfshelf-colors-text-muted);
  user-select: none;
}

.ws-breadcrumb__current {
  color: var(--wolfshelf-colors-text-primary);
  font-weight: 600;
}

/* Stage 9: Artifact relations — breadcrumb, tree, block, dialog. */
:root[data-style="style1"] .ws-relation-breadcrumb,
:root[data-style="style2"] .ws-relation-breadcrumb {
  margin: var(--wolfshelf-spacing-md) 0;
  font-size: var(--wolfshelf-font-size-sm);
}
:root[data-style="style1"] .ws-relation-breadcrumb__list,
:root[data-style="style2"] .ws-relation-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolfshelf-spacing-xs);
  padding: 0;
  margin: 0;
}
:root[data-style="style1"] .ws-relation-breadcrumb__segment + .ws-relation-breadcrumb__segment::before,
:root[data-style="style2"] .ws-relation-breadcrumb__segment + .ws-relation-breadcrumb__segment::before {
  content: "›";
  margin-right: var(--wolfshelf-spacing-xs);
  color: var(--wolfshelf-colors-text-muted);
}
:root[data-style="style1"] .ws-relation-breadcrumb__link,
:root[data-style="style2"] .ws-relation-breadcrumb__link {
  color: var(--wolfshelf-colors-text-secondary);
  text-decoration: none;
}
:root[data-style="style1"] .ws-relation-breadcrumb__link:hover,
:root[data-style="style2"] .ws-relation-breadcrumb__link:hover {
  color: var(--wolfshelf-colors-accent-primary);
  text-decoration: none;
}

/* Mobile ellipsis: hide all but first + last on narrow screens. */
@media (max-width: 600px) {
  :root[data-style="style1"] .ws-relation-breadcrumb__list,
  :root[data-style="style2"] .ws-relation-breadcrumb__list {
    flex-wrap: nowrap;
    overflow: hidden;
  }
  :root[data-style="style1"] .ws-relation-breadcrumb__segment:not(:first-child):not(:last-child),
  :root[data-style="style2"] .ws-relation-breadcrumb__segment:not(:first-child):not(:last-child) {
    display: none;
  }
  :root[data-style="style1"] .ws-relation-breadcrumb__segment:not(:first-child):not(:last-child):first-of-type::after,
  :root[data-style="style2"] .ws-relation-breadcrumb__segment:not(:first-child):not(:last-child):first-of-type::after {
    content: "…";
    display: inline-block;
  }
}

:root[data-style="style1"] .ws-relation-block,
:root[data-style="style2"] .ws-relation-block {
  margin-top: var(--wolfshelf-spacing-lg);
  padding: var(--wolfshelf-spacing-md);
  border-radius: var(--wolfshelf-radii-card);
  background: var(--wolfshelf-colors-surface);
}
:root[data-style="style1"] .ws-relation-block__header,
:root[data-style="style2"] .ws-relation-block__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--wolfshelf-spacing-md);
}
:root[data-style="style1"] .ws-relation-block__title,
:root[data-style="style2"] .ws-relation-block__title {
  font-size: var(--wolfshelf-font-size-lg);
  margin: 0;
}
:root[data-style="style1"] .ws-relation-block__actions,
:root[data-style="style2"] .ws-relation-block__actions {
  display: flex;
  gap: var(--wolfshelf-spacing-sm);
  flex-wrap: wrap;
}
:root[data-style="style1"] .ws-relation-block__empty,
:root[data-style="style2"] .ws-relation-block__empty {
  color: var(--wolfshelf-colors-text-muted);
  padding: var(--wolfshelf-spacing-md) 0;
}

:root[data-style="style1"] .ws-relation-tree__children,
:root[data-style="style2"] .ws-relation-tree__children {
  list-style: none;
  padding-left: var(--wolfshelf-spacing-md);
}
:root[data-style="style1"] .ws-relation-tree-node,
:root[data-style="style2"] .ws-relation-tree-node {
  display: flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
  padding: var(--wolfshelf-spacing-xs) 0;
}
:root[data-style="style1"] .ws-relation-tree-node__link,
:root[data-style="style2"] .ws-relation-tree-node__link {
  display: flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
  text-decoration: none;
  color: var(--wolfshelf-colors-text-primary);
}
:root[data-style="style1"] .ws-relation-tree-node__link:hover,
:root[data-style="style2"] .ws-relation-tree-node__link:hover {
  text-decoration: none;
  color: var(--wolfshelf-colors-accent-primary);
}
:root[data-style="style1"] .ws-relation-tree-node__cover,
:root[data-style="style2"] .ws-relation-tree-node__cover {
  width: 24px;
  height: 24px;
  border-radius: var(--wolfshelf-radii-sm);
}
:root[data-style="style1"] .ws-relation-tree-node__type-chip,
:root[data-style="style2"] .ws-relation-tree-node__type-chip {
  font-size: var(--wolfshelf-font-size-xs);
  color: var(--wolfshelf-colors-text-muted);
}

:root[data-style="style1"] .ws-relation-group,
:root[data-style="style2"] .ws-relation-group {
  margin-top: var(--wolfshelf-spacing-md);
}
:root[data-style="style1"] .ws-relation-group__summary,
:root[data-style="style2"] .ws-relation-group__summary {
  font-weight: 600;
  cursor: pointer;
}
:root[data-style="style1"] .ws-relation-group__rows,
:root[data-style="style2"] .ws-relation-group__rows {
  list-style: none;
  padding-left: var(--wolfshelf-spacing-md);
}
:root[data-style="style1"] .ws-relation-row,
:root[data-style="style2"] .ws-relation-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
  padding: var(--wolfshelf-spacing-xs) 0;
}
:root[data-style="style1"] .ws-relation-row__link,
:root[data-style="style2"] .ws-relation-row__link {
  display: flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
  text-decoration: none;
  color: var(--wolfshelf-colors-text-primary);
}
:root[data-style="style1"] .ws-relation-row__link:hover,
:root[data-style="style2"] .ws-relation-row__link:hover {
  text-decoration: none;
  color: var(--wolfshelf-colors-accent-primary);
}
:root[data-style="style1"] .ws-relation-row__cover,
:root[data-style="style2"] .ws-relation-row__cover {
  width: 28px;
  height: 28px;
  border-radius: var(--wolfshelf-radii-sm);
}
:root[data-style="style1"] .ws-relation-visibility-chip,
:root[data-style="style2"] .ws-relation-visibility-chip {
  font-size: var(--wolfshelf-font-size-xs);
  padding: 0 var(--wolfshelf-spacing-xs);
  border-radius: var(--wolfshelf-radii-pill);
  background: var(--wolfshelf-colors-surface-alt);
  color: var(--wolfshelf-colors-text-secondary);
}
:root[data-style="style1"] .ws-relation-row__note,
:root[data-style="style2"] .ws-relation-row__note {
  margin: 0;
  font-size: var(--wolfshelf-font-size-sm);
  color: var(--wolfshelf-colors-text-secondary);
}

:root[data-style="style1"] .ws-relation-dialog,
:root[data-style="style2"] .ws-relation-dialog {
  background: var(--wolfshelf-colors-surface);
  border-radius: var(--wolfshelf-radii-card);
  padding: var(--wolfshelf-spacing-lg);
  max-width: 560px;
}
:root[data-style="style1"] .ws-relation-dialog__chip,
:root[data-style="style2"] .ws-relation-dialog__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-xs);
  margin: var(--wolfshelf-spacing-xs);
  cursor: pointer;
}
:root[data-style="style1"] .ws-relation-dialog__chip:hover,
:root[data-style="style2"] .ws-relation-dialog__chip:hover {
  text-decoration: none;
}
:root[data-style="style1"] .ws-relation-dialog__results,
:root[data-style="style2"] .ws-relation-dialog__results {
  list-style: none;
  padding: 0;
  margin: var(--wolfshelf-spacing-sm) 0;
}
@media (max-width: 600px) {
  :root[data-style="style1"] .ws-relation-dialog,
  :root[data-style="style2"] .ws-relation-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

:root[data-style="style1"] .ws-relation-dialog__form,
:root[data-style="style2"] .ws-relation-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-md);
}
:root[data-style="style1"] .ws-relation-dialog__group,
:root[data-style="style2"] .ws-relation-dialog__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--wolfshelf-spacing-xs);
  margin: var(--wolfshelf-spacing-xs) 0;
}
:root[data-style="style1"] .ws-relation-dialog__group-title,
:root[data-style="style2"] .ws-relation-dialog__group-title {
  margin: 0;
  font-size: var(--wolfshelf-font-size-sm);
  color: var(--wolfshelf-colors-text-secondary);
  flex-basis: 100%;
}
:root[data-style="style1"] .ws-relation-dialog__result,
:root[data-style="style2"] .ws-relation-dialog__result {
  padding: 0;
  margin: var(--wolfshelf-spacing-xs) 0;
}
:root[data-style="style1"] .ws-relation-dialog__result-btn,
:root[data-style="style2"] .ws-relation-dialog__result-btn {
  display: flex;
  align-items: center;
  gap: var(--wolfshelf-spacing-sm);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--wolfshelf-radii-sm);
  padding: var(--wolfshelf-spacing-xs) var(--wolfshelf-spacing-sm);
  cursor: pointer;
  color: var(--wolfshelf-colors-text-primary);
}
:root[data-style="style1"] .ws-relation-dialog__result-btn:hover,
:root[data-style="style2"] .ws-relation-dialog__result-btn:hover {
  background: var(--wolfshelf-colors-surface-alt);
}
:root[data-style="style1"] .ws-relation-dialog__result--selected .ws-relation-dialog__result-btn,
:root[data-style="style2"] .ws-relation-dialog__result--selected .ws-relation-dialog__result-btn {
  border-color: var(--wolfshelf-colors-accent-primary);
  background: var(--wolfshelf-colors-surface-alt);
}
:root[data-style="style1"] .ws-relation-dialog__result--disabled .ws-relation-dialog__result-btn,
:root[data-style="style2"] .ws-relation-dialog__result--disabled .ws-relation-dialog__result-btn {
  cursor: not-allowed;
  color: var(--wolfshelf-colors-text-secondary);
}
:root[data-style="style1"] .ws-relation-dialog__result-cover,
:root[data-style="style2"] .ws-relation-dialog__result-cover {
  width: 28px;
  height: 28px;
  border-radius: var(--wolfshelf-radii-sm);
}
:root[data-style="style1"] .ws-relation-dialog__result-type,
:root[data-style="style2"] .ws-relation-dialog__result-type {
  font-size: var(--wolfshelf-font-size-xs);
  color: var(--wolfshelf-colors-text-secondary);
  margin-left: auto;
}
:root[data-style="style1"] .ws-relation-dialog__actions,
:root[data-style="style2"] .ws-relation-dialog__actions {
  display: flex;
  gap: var(--wolfshelf-spacing-sm);
  justify-content: flex-end;
}
:root[data-style="style1"] .ws-relation-dialog__refusal,
:root[data-style="style2"] .ws-relation-dialog__refusal {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-xs);
  padding: var(--wolfshelf-spacing-sm);
  border-radius: var(--wolfshelf-radii-sm);
  background: var(--wolfshelf-colors-surface-alt);
}

:root[data-style="style1"] .ws-relation-note-popover,
:root[data-style="style2"] .ws-relation-note-popover {
  display: flex;
  flex-direction: column;
  gap: var(--wolfshelf-spacing-xs);
  margin-top: var(--wolfshelf-spacing-xs);
  padding: var(--wolfshelf-spacing-sm);
  border-radius: var(--wolfshelf-radii-sm);
  background: var(--wolfshelf-colors-surface-alt);
}
:root[data-style="style1"] .ws-relation-note-popover__textarea,
:root[data-style="style2"] .ws-relation-note-popover__textarea {
  width: 100%;
  min-height: 4em;
  resize: vertical;
}
:root[data-style="style1"] .ws-relation-note-popover__footer,
:root[data-style="style2"] .ws-relation-note-popover__footer {
  display: flex;
  gap: var(--wolfshelf-spacing-xs);
  align-items: center;
  justify-content: flex-end;
}
:root[data-style="style1"] .ws-relation-note-popover__counter,
:root[data-style="style2"] .ws-relation-note-popover__counter {
  font-size: var(--wolfshelf-font-size-xs);
  color: var(--wolfshelf-colors-text-secondary);
  margin-right: auto;
}

:root[data-style="style1"] .ws-relation-row--out,
:root[data-style="style2"] .ws-relation-row--out {
  animation: ws-slide-out-right 320ms ease-in forwards;
}

:root {
  --spacing-0: 0;
  --spacing-xs: var(--wolfshelf-spacing-xs);
  --spacing-sm: var(--wolfshelf-spacing-sm);
  --spacing-md: var(--wolfshelf-spacing-md);
  --spacing-lg: var(--wolfshelf-spacing-lg);
  --spacing-xl: var(--wolfshelf-spacing-xl);
  --spacing-2xl: var(--wolfshelf-spacing-2xl, 48px);

  --canvas-edge-stroke: var(--wolfshelf-colors-text-tertiary, #BBBBBB);
  --canvas-edge-stroke-width: 1px;
}

.ws-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: var(--spacing-0);
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ws-canvas-host-section {
  position: relative;
  width: 100%;
  min-height: 400px;
  padding: var(--spacing-md);
}

.ws-canvas-host {
  display: block;
  width: 100%;
  height: 600px;
  background: var(--wolfshelf-colors-surface-secondary, #F5F5F5);
  border-radius: var(--sticker-radius, 8px);
}

.ws-canvas-a11y-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; 
}

.ws-card-inline-edit {
  padding: var(--spacing-md);
}

.ws-picker-v2 {
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

.ws-modal {
  padding: var(--spacing-xl);
  min-width: 320px;
  max-width: 480px;
  border: 1px solid var(--wolfshelf-colors-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--wolfshelf-radii-dialog, 16px);
  background: var(--wolfshelf-colors-surface, #fff);
  color: var(--wolfshelf-colors-text, #1c1c1c);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22), 0 4px 8px rgba(0, 0, 0, 0.12);
  font: inherit;

  &::backdrop {
    background: rgba(15, 15, 30, 0.45);
    backdrop-filter: blur(2px);
  }
}

.ws-modal__body {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: var(--spacing-lg);
  white-space: pre-line;
}

.ws-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.ws-modal__label {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  font-weight: 600;
}

.ws-modal__label-text {
  font-size: 0.95rem;
}

.ws-modal__input {
  font: inherit;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--wolfshelf-colors-border, rgba(0, 0, 0, 0.18));
  border-radius: var(--wolfshelf-radii-md, 8px);
  background: var(--wolfshelf-colors-surface, #fff);

  &:focus {
    outline: 2px solid var(--focus-ring-color, var(--wolfshelf-colors-accent, #1976D2));
    outline-offset: 2px;
    border-color: transparent;
  }
}

.ws-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

.ws-tree-node {
  padding: var(--spacing-sm);
}

.ws-mosaic-fallback {
  padding: var(--spacing-md);
  margin: var(--spacing-0);
}

.ws-tree-fallback {
  padding: var(--spacing-md);
  margin: var(--spacing-0);
}


[data-inline-editable] {
  cursor: text;
  border-radius: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: var(--spacing-0);
  transition: background-color 120ms ease;

  &:hover {
    background-color: var(--wolfshelf-colors-surface-secondary, rgba(0, 0, 0, 0.04));
  }
  &:focus-visible {
    outline: 2px solid var(--focus-ring-color, var(--wolfshelf-colors-accent, #1976D2));
    outline-offset: 2px;
    background-color: var(--wolfshelf-colors-surface-secondary, rgba(0, 0, 0, 0.04));
  }
  &[data-editing="true"] {
    background-color: var(--wolfshelf-colors-surface-tertiary, rgba(0, 0, 0, 0.06));
    padding: var(--spacing-xs);
  }
}

.ws-inline-input {
  font: inherit;
  color: inherit;
  width: 100%;
  min-width: 8ch;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--wolfshelf-colors-border, #BBB);
  border-radius: 4px;
  background: var(--wolfshelf-colors-surface, #FFF);

  &:focus {
    outline: 2px solid var(--focus-ring-color, var(--wolfshelf-colors-accent, #1976D2));
    outline-offset: 2px;
    border-color: transparent;
  }
}
textarea.ws-inline-input {
  min-height: 4em;
  resize: vertical;
}

[data-cover-dropzone] {
  position: relative;
  transition: outline 120ms ease, transform 120ms ease;

  &.ws-cover-dropzone--active {
    outline: 3px dashed var(--wolfshelf-colors-accent, #1976D2);
    outline-offset: 4px;
    transform: scale(1.02);
  }
}

dialog.ws-picker-v2 {
  width: min(96vw, 1400px);
  height: 92vh;
  max-width: 96vw;
  max-height: 92vh;
  padding: var(--spacing-0);
  border: 0;
  border-radius: var(--wolfshelf-radii-dialog, 16px);
  background: var(--wolfshelf-colors-surface, #FFF);
  color: var(--wolfshelf-colors-text-primary, #1A1A1A);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &::backdrop {
    background: rgba(15, 15, 30, 0.55);
    backdrop-filter: blur(3px);
  }

  .ws-picker-v2__head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--wolfshelf-colors-border, rgba(0, 0, 0, 0.1));
    background: var(--wolfshelf-colors-surface, #fff);
  }

  .ws-picker-v2__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
  }

  .ws-picker-v2__title {
    margin: var(--spacing-0);
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .ws-picker-v2__close {
    width: 36px;
    height: 36px;
    padding: var(--spacing-0);
    font-size: 1.1rem;
    border-radius: var(--wolfshelf-radii-pill, 9999px);
  }

  .ws-picker-v2__search {
    display: block;
  }

  .ws-picker-v2__search-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--wolfshelf-colors-border, rgba(0, 0, 0, 0.18));
    border-radius: var(--wolfshelf-radii-md, 8px);
    font: inherit;
    background: var(--wolfshelf-colors-surface, #fff);

    &:focus {
      outline: 2px solid var(--focus-ring-color, var(--wolfshelf-colors-accent, #1976D2));
      outline-offset: 2px;
      border-color: transparent;
    }
  }

  .ws-picker-v2__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--wolfshelf-colors-surface-secondary, rgba(0, 0, 0, 0.02));
  }

  .ws-picker-v2__grid {
    list-style: none;
    margin: var(--spacing-0);
    padding: var(--spacing-0);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
  }

  .ws-picker-v2__tile {
    margin: var(--spacing-0);
    position: relative;
    border-radius: var(--wolfshelf-radii-card, 12px);
    background: var(--wolfshelf-colors-surface, #fff);
    border: 1px solid var(--wolfshelf-colors-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;

    &:hover:not([data-forbidden]) {
      transform: translateY(-2px);
      border-color: var(--wolfshelf-colors-accent, #1976D2);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    &[data-forbidden] {
      opacity: 0.55;
      cursor: not-allowed;
      background: var(--wolfshelf-colors-surface-tertiary, rgba(0, 0, 0, 0.03));
    }

    &:has(input:checked) {
      border-color: var(--wolfshelf-colors-accent, #1976D2);
      box-shadow: 0 0 0 3px var(--wolfshelf-colors-accent, #1976D2);
    }
  }

  .ws-picker-v2__tile-label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    height: 100%;
  }

  .ws-picker-v2__tile-check {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    width: 22px;
    height: 22px;
    z-index: 2;
    cursor: pointer;
  }

  .ws-picker-v2__tile-cover-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--wolfshelf-colors-surface-tertiary, rgba(0, 0, 0, 0.06));
  }

  .ws-picker-v2__tile-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .ws-picker-v2__tile-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--wolfshelf-colors-text-muted, rgba(0, 0, 0, 0.35));
    text-transform: uppercase;
  }

  .ws-picker-v2__tile-flag {
    position: absolute;
    inset: auto var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
    padding: 2px var(--spacing-sm);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.72rem;
    border-radius: var(--wolfshelf-radii-pill, 9999px);
    text-align: center;
  }

  .ws-picker-v2__tile-title {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.92rem;
    line-height: 1.3;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ws-picker-v2__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--wolfshelf-colors-border, rgba(0, 0, 0, 0.1));
    background: var(--wolfshelf-colors-surface, #fff);
  }

  .ws-picker-v2__counter {
    color: var(--wolfshelf-colors-text-muted, rgba(0, 0, 0, 0.55));
    font-size: 0.9rem;
  }

  .ws-picker-v2__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@media (max-width: 600px) {
  dialog.ws-picker-v2 {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;

    .ws-picker-v2__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}


.ws-shelf-card__rel-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--wolfshelf-colors-surface-alt, rgba(0, 0, 0, 0.04));
  border-top: 1px solid var(--wolfshelf-colors-border, rgba(0, 0, 0, 0.08));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.ws-relation-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--spacing-sm);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  letter-spacing: 0.02em;
  pointer-events: none;
  text-decoration: none;
  white-space: nowrap;
}

.ws-relation-chip--parent {
  background: var(--wolfshelf-colors-surface-tertiary, rgba(0, 0, 0, 0.08));
  color: var(--wolfshelf-colors-text, #1c1c1c);
}

.ws-relation-chip--children {
  background: var(--wolfshelf-colors-accent, #1976D2);
  color: var(--wolfshelf-colors-on-accent, #FFF);
}

.ws-shelf-row .ws-relation-chip,
.ws-list-row .ws-relation-chip {
  margin-right: var(--spacing-xs);
}

.ws-shelf-card,
.ws-list-row,
.ws-shelf-row {
  position: relative;
  transition: outline 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.ws-shelf-card[data-drag-target="valid"],
.ws-list-row[data-drag-target="valid"],
.ws-shelf-row[data-drag-target="valid"] {
  outline: 3px solid var(--wolfshelf-colors-success, #2E7D32);
  outline-offset: -3px;
  box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.18);
}
.ws-shelf-card[data-drag-target="cycle"],
.ws-list-row[data-drag-target="cycle"],
.ws-shelf-row[data-drag-target="cycle"] {
  outline: 3px solid var(--wolfshelf-colors-danger, #C62828);
  outline-offset: -3px;
  box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.18);
  cursor: not-allowed;
}
.ws-shelf-card[data-dragging="true"],
.ws-shelf-row[data-dragging="true"] {
  opacity: 0.55;
  transform: scale(0.97);
}


.ws-canvas-host-section {
  overflow: auto;
  max-height: calc(100vh - 200px);
  background: var(--wolfshelf-colors-surface-secondary, #FAFAFA);
  border-radius: var(--sticker-radius, 8px);
  border: 1px solid var(--wolfshelf-colors-border, #DDD);
}

.ws-canvas-host-section + .ws-empty-state,
.ws-canvas-host-section .ws-empty-state {
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--wolfshelf-colors-text-secondary, #666);
}

[data-canvas-overlay="tree"] button:focus-visible {
  outline: 2px solid var(--focus-ring-color, #1976D2);
  outline-offset: 2px;
  opacity: 1 !important;
  background: rgba(25, 118, 210, 0.1) !important;
}


.ws-empty-state {
  padding: var(--spacing-xl);
  margin: var(--spacing-md);
  text-align: center;
  color: var(--wolfshelf-colors-text-secondary, #666);
  border: 2px dashed var(--wolfshelf-colors-border, #DDD);
  border-radius: var(--sticker-radius, 8px);
  background: var(--wolfshelf-colors-surface-secondary, #FAFAFA);
}

.ws-empty-state__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--spacing-0) var(--spacing-0) var(--spacing-sm);
}

.ws-empty-state__hint {
  font-size: 0.875rem;
  margin: var(--spacing-0);
}

.ws-context-menu {
  list-style: none;
  padding: var(--spacing-xs) var(--spacing-0);
  margin: var(--spacing-0);
  min-width: 180px;
  background: var(--wolfshelf-colors-surface, #FFF);
  color: var(--wolfshelf-colors-text-primary, #1A1A1A);
  border: 1px solid var(--wolfshelf-colors-border, #BBB);
  border-radius: var(--sticker-radius, 8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 0.9rem;
}

.ws-context-menu__item {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    background: var(--wolfshelf-colors-surface-secondary, rgba(0, 0, 0, 0.04));
    outline: none;
  }
}

@media (max-width: 375px) {
  .ws-canvas-host-section[data-canvas-host="tree"],
  .ws-canvas-host-section:has([data-canvas-host="tree"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  [data-inline-editable] {
    padding: var(--spacing-sm);
    font-size: 1rem; 
  }

  .ws-inline-input {
    font-size: 1rem;
  }

  .ws-relation-chip {
    font-size: 0.65rem;
    padding: var(--spacing-0) var(--spacing-xs);
  }
}