/* ================================================================
   Silver Workbench visual system
   Page-level art direction for Create / Assets / Changelog / Settings.
   The liquid + neon button canvases remain above this layer.
   ================================================================ */

:root {
  --wb-ink: #03070d;
  --wb-panel: rgba(8, 16, 27, .78);
  --wb-panel-strong: rgba(7, 14, 24, .94);
  --wb-line: rgba(150, 220, 243, .18);
  --wb-line-bright: rgba(117, 233, 255, .46);
  --wb-silver: #d9eef7;
  --wb-muted: #7692a6;
  --wb-cyan: #65e6ff;
  --wb-violet: #a78bff;
  --wb-pink: #ff64c2;
  --wb-green: #b7ff9a;
  --wb-shadow: 0 28px 90px rgba(0, 0, 0, .42);
}

/* Shared stage atmosphere. The canvas module adds a second, animated layer. */
.page:has(.create-layout),
.page:has(.archive-page),
.page:has(.changelog-page) {
  position: relative;
  isolation: isolate;
  overflow: auto;
  background:
    radial-gradient(circle at 16% 12%, rgba(77, 215, 255, .085), transparent 26%),
    radial-gradient(circle at 84% 72%, rgba(157, 91, 255, .075), transparent 24%),
    linear-gradient(135deg, rgba(5, 12, 21, .98), rgba(2, 7, 13, .98));
}

.page:has(.create-layout)::before,
.page:has(.archive-page)::before,
.page:has(.changelog-page)::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .48;
  background:
    linear-gradient(90deg, rgba(162, 227, 246, .028) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, rgba(162, 227, 246, .022) 1px, transparent 1px) 0 0 / 72px 72px,
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(111, 207, 232, .014) 5px 6px);
  mask-image: linear-gradient(180deg, #000, transparent 88%);
}

.page:has(.create-layout)::after,
.page:has(.archive-page)::after,
.page:has(.changelog-page)::after {
  position: fixed;
  z-index: -1;
  top: 14%;
  right: 7%;
  width: min(38vw, 560px);
  height: min(38vw, 560px);
  content: "";
  pointer-events: none;
  opacity: .14;
  border: 1px solid rgba(116, 235, 255, .38);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(116, 235, 255, .018), 0 0 0 96px rgba(116, 235, 255, .012);
  transform: rotate(-18deg) skewX(-6deg);
}

/* Canvas host sits under content and remains invisible to pointer/focus logic. */
.wb-canvas-host { position: relative; isolation: isolate; }
.wb-canvas-host > .wb-canvas {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .84;
  mix-blend-mode: screen;
}
.wb-canvas-host > :not(.wb-canvas):not(.uc-close) { position: relative; z-index: 1; }

/* ---------------------------- Create ---------------------------- */
.create-layout {
  position: relative;
  min-height: 100%;
  gap: clamp(14px, 1.6vw, 24px);
  padding: clamp(16px, 2vw, 28px);
  background: transparent;
}
.create-layout::before {
  position: absolute;
  top: 0;
  right: clamp(16px, 2vw, 28px);
  left: clamp(16px, 2vw, 28px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--wb-cyan), rgba(255, 100, 194, .78), transparent);
  opacity: .72;
  box-shadow: 0 0 18px rgba(101, 230, 255, .38);
}
.create-layout .side-panel,
.create-layout .canvas {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(135, 210, 234, .23);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(10, 22, 35, .9), rgba(4, 10, 18, .84));
  box-shadow: var(--wb-shadow), inset 0 1px 0 rgba(255, 255, 255, .045), inset 0 0 0 1px rgba(101, 230, 255, .025);
}
.create-layout .side-panel::before,
.create-layout .canvas::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--wb-pink), transparent 36%, var(--wb-cyan) 72%, transparent);
  opacity: .9;
  pointer-events: none;
}
.create-layout .side-panel::after,
.create-layout .canvas::after {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 12px;
  width: 46px;
  height: 3px;
  content: "";
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--wb-cyan));
  box-shadow: 0 0 12px rgba(101, 230, 255, .38);
  opacity: .7;
  pointer-events: none;
}
.create-layout .side-panel { min-height: 0; }
.create-layout .side-panel .panel-scroll { padding: clamp(18px, 2vw, 28px); }
.create-layout .panel-head {
  position: relative;
  margin-bottom: 16px;
  padding: 2px 0 16px;
  border-bottom: 1px solid rgba(117, 233, 255, .16);
}
.create-layout .panel-head::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 28%;
  height: 1px;
  content: "";
  background: var(--wb-cyan);
  box-shadow: 0 0 10px var(--wb-cyan);
}
.create-layout .panel-head h2 { letter-spacing: .02em; text-shadow: 0 0 18px rgba(101, 230, 255, .18); }
.create-layout .mode-row { gap: 10px; }
.create-layout .mode-card,
.create-layout .model-card,
.create-layout .prompt-card,
.create-layout .output-card,
.create-layout .ref-box,
.create-layout .frame-slot {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(141, 209, 232, .22);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(15, 31, 46, .76), rgba(5, 13, 22, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.create-layout .mode-card::before,
.create-layout .model-card::before,
.create-layout .prompt-card::before,
.create-layout .output-card::before,
.create-layout .ref-box::before,
.create-layout .frame-slot::before {
  position: absolute;
  top: 0;
  left: 12%;
  width: 26%;
  height: 1px;
  content: "";
  background: var(--wb-cyan);
  box-shadow: 0 0 12px var(--wb-cyan);
  opacity: .72;
}
.create-layout .mode-card:hover,
.create-layout .model-card:hover,
.create-layout .prompt-card:focus-within,
.create-layout .output-card:hover,
.create-layout .ref-box:hover,
.create-layout .frame-slot:hover {
  border-color: rgba(101, 230, 255, .62);
  background: linear-gradient(145deg, rgba(19, 49, 65, .84), rgba(7, 17, 29, .86));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3), 0 0 28px rgba(101, 230, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(-2px);
}
.create-layout .mode-card.active {
  border-color: rgba(101, 230, 255, .84);
  background: linear-gradient(135deg, rgba(26, 82, 98, .85), rgba(21, 37, 68, .86));
  box-shadow: 0 0 0 1px rgba(101, 230, 255, .1), 0 0 28px rgba(101, 230, 255, .14), inset 0 0 28px rgba(101, 230, 255, .06);
}
.create-layout .model-card { min-height: 72px; }
.create-layout .prompt-card { min-height: 246px; }
.create-layout .prompt-card textarea {
  min-height: 136px;
  color: #e8f8ff;
  caret-color: var(--wb-cyan);
  background:
    linear-gradient(90deg, rgba(101, 230, 255, .045) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(0deg, rgba(101, 230, 255, .03) 1px, transparent 1px) 0 0 / 22px 22px,
    rgba(2, 9, 16, .54);
  border: 1px solid rgba(117, 233, 255, .17);
  box-shadow: inset 0 0 28px rgba(101, 230, 255, .025);
}
.create-layout .prompt-card:focus-within textarea { border-color: rgba(101, 230, 255, .48); }
.create-layout .prompt-card:focus-within::after {
  position: absolute;
  right: 14px;
  bottom: 48px;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--wb-cyan);
  box-shadow: 0 0 0 4px rgba(101, 230, 255, .08), 0 0 14px var(--wb-cyan);
  animation: wb-pulse 1.8s ease-in-out infinite;
}
.create-layout .panel-foot {
  position: relative;
  z-index: 2;
  padding: 16px clamp(18px, 2vw, 28px) 20px;
  border-top: 1px solid rgba(117, 233, 255, .14);
  background: linear-gradient(180deg, rgba(4, 12, 20, .58), rgba(3, 8, 14, .92));
}
.create-layout .gen-btn { filter: saturate(1.18) brightness(1.06); }
.create-layout .canvas-toolbar {
  position: relative;
  z-index: 2;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(117, 233, 255, .18);
  background: linear-gradient(180deg, rgba(7, 18, 29, .88), rgba(4, 11, 18, .72));
}
.create-layout .canvas-toolbar::before {
  content: "OUTPUT ARRAY / SIGNAL MAP";
  margin-right: 8px;
  color: rgba(176, 226, 239, .66);
  font: 10px/1 "Courier New", monospace;
  letter-spacing: .14em;
}
.create-layout .canvas-body {
  position: relative;
  z-index: 1;
  min-height: 520px;
  padding: clamp(16px, 2vw, 28px);
  background: radial-gradient(circle at 66% 10%, rgba(101, 230, 255, .08), transparent 24%);
}
.create-layout .canvas-body::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: repeating-linear-gradient(90deg, transparent 0 86px, rgba(129, 210, 234, .022) 86px 87px);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

/* ---------------------------- Assets ---------------------------- */
.assets-page { padding-top: clamp(22px, 3vw, 42px); }
.assets-page .archive-title-row {
  position: relative;
  align-items: flex-end;
  min-height: 90px;
  padding: 0 0 22px;
  border-bottom: 0;
}
.assets-page .archive-title-row::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--wb-cyan), rgba(101, 230, 255, .1) 45%, var(--wb-pink));
  box-shadow: 0 0 18px rgba(101, 230, 255, .2);
}
.assets-page .archive-eyebrow { color: var(--wb-cyan); letter-spacing: .2em; }
.assets-page .archive-title-row h1 { font-size: clamp(26px, 3vw, 38px); letter-spacing: .015em; }
.assets-page .archive-heading-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--wb-silver);
  border-color: rgba(190, 238, 250, .56);
  background: linear-gradient(145deg, rgba(184, 232, 244, .18), rgba(91, 128, 164, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 22px rgba(101, 230, 255, .12);
}
.assets-page #stat-chip-assets,
.assets-page #stat-chip-shared {
  align-self: center;
  min-height: 34px;
  padding: 0 13px;
  border-color: rgba(145, 215, 237, .3);
  border-radius: 999px;
  background: rgba(101, 230, 255, .055);
  color: #c5eaf6;
  font: 11px/1 "Courier New", monospace;
  letter-spacing: .04em;
}
.assets-page #stat-chip-shared { border-color: rgba(184, 255, 154, .3); color: var(--wb-green); background: rgba(184, 255, 154, .045); }
.assets-page .archive-toolbar {
  position: relative;
  border: 1px solid rgba(132, 208, 233, .25);
  border-left: 0;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(8, 20, 33, .82), rgba(4, 11, 19, .66));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.assets-page .archive-toolbar::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -1px;
  width: 2px;
  content: "";
  border-radius: 2px;
  background: linear-gradient(180deg, var(--wb-pink), var(--wb-cyan));
  box-shadow: 0 0 16px rgba(101, 230, 255, .35);
}
.assets-page .archive-toolbar .chip,
.assets-page .archive-toolbar .seg,
.assets-page .archive-search {
  border-radius: 10px;
}
.assets-page .archive-search { min-height: 42px; background: rgba(2, 9, 16, .58); }
.assets-page .trash-hint {
  border: 1px solid rgba(255, 177, 77, .28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 177, 77, .08), rgba(12, 20, 31, .74));
}
.assets-page .archive-masonry { position: relative; z-index: 1; }
.assets-page .work-card {
  border-radius: 16px;
  border-color: rgba(140, 205, 227, .23);
  background: linear-gradient(150deg, rgba(11, 24, 37, .94), rgba(5, 12, 20, .96));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s ease, border-color .34s ease;
}
.assets-page .work-card::before { width: 42px; height: 3px; border-radius: 0 0 4px 0; background: linear-gradient(90deg, var(--wb-cyan), rgba(101, 230, 255, .02)); }
.assets-page .work-card:hover { transform: translateY(-6px) rotateX(1deg); border-color: rgba(101, 230, 255, .64); box-shadow: 0 24px 54px rgba(0, 0, 0, .42), 0 0 30px rgba(101, 230, 255, .12); }
.assets-page .work-card .media::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(218, 249, 255, .18) 48%, transparent 72%);
  transform: translateX(-120%);
  transition: opacity .2s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.assets-page .work-card:hover .media::after { opacity: 1; transform: translateX(120%); }

/* -------------------------- Changelog --------------------------- */
.changelog-page { position: relative; max-width: 1120px; padding-top: clamp(28px, 4vw, 58px); }
.changelog-head { position: relative; max-width: 820px; padding-bottom: 26px; }
.changelog-head::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--wb-pink), var(--wb-cyan) 58%, transparent);
}
.changelog-head h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: .01em; text-shadow: 0 0 24px rgba(101, 230, 255, .12); }
.changelog-sub { max-width: 620px; color: #a4bfce; line-height: 1.8; }
.changelog-legend { gap: 8px; margin-top: 20px; }
.changelog-legend .cl-tag { border-radius: 999px; padding: 5px 10px; font-size: 10px; letter-spacing: .08em; }
.changelog-list {
  position: relative;
  margin-top: 32px;
  padding-left: clamp(22px, 4vw, 64px);
}
.changelog-list::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(7px, 1.5vw, 25px);
  width: 1px;
  content: "";
  background: linear-gradient(180deg, var(--wb-cyan), rgba(101, 230, 255, .16) 65%, transparent);
  box-shadow: 0 0 14px rgba(101, 230, 255, .2);
}
.changelog-item {
  position: relative;
  margin-bottom: 24px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(139, 208, 230, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(12, 25, 39, .86), rgba(5, 12, 20, .84));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.changelog-item::before {
  left: calc(clamp(22px, 4vw, 64px) * -1 + 7px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--wb-cyan);
  border-radius: 50%;
  background: #071420;
  box-shadow: 0 0 0 5px rgba(101, 230, 255, .06), 0 0 18px rgba(101, 230, 255, .46);
}
.changelog-item:hover { transform: translateX(5px); border-color: rgba(101, 230, 255, .58); box-shadow: 0 24px 58px rgba(0, 0, 0, .34), 0 0 26px rgba(101, 230, 255, .1); }
.changelog-item.latest { border-color: rgba(101, 230, 255, .54); background: linear-gradient(145deg, rgba(16, 44, 57, .9), rgba(8, 18, 30, .88)); }
.changelog-item.latest::after {
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--wb-cyan), transparent);
  box-shadow: 0 0 16px rgba(101, 230, 255, .5);
  animation: wb-scan 4.8s linear infinite;
}
.changelog-version { color: var(--wb-silver); text-shadow: 0 0 12px rgba(213, 241, 250, .18); }
.changelog-date { color: #7897a9; font: 11px/1 "Courier New", monospace; letter-spacing: .08em; }
.changelog-title { color: #edfaff; font-size: clamp(19px, 2.5vw, 25px); letter-spacing: .015em; }
.changelog-items { gap: 11px; margin-top: 18px; }
.changelog-items li { align-items: flex-start; color: #b5ccd8; line-height: 1.7; }
.changelog-items .cl-tag { flex: none; margin-top: 2px; border-radius: 999px; padding: 3px 8px; font-size: 9px; letter-spacing: .06em; }

/* ---------------------------- Settings -------------------------- */
.uc-overlay { background: radial-gradient(circle at 50% 10%, rgba(93, 184, 220, .09), transparent 42%), rgba(2, 6, 12, .78); }
.uc-dialog {
  border-color: rgba(164, 224, 241, .34);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(10, 20, 32, .97), rgba(4, 10, 18, .985));
  box-shadow: 0 44px 140px rgba(0, 0, 0, .7), 0 0 0 1px rgba(206, 241, 250, .045), 0 0 64px rgba(101, 230, 255, .13);
}
.uc-dialog::before { height: 3px; background: linear-gradient(90deg, var(--wb-pink), transparent 25%, var(--wb-cyan) 68%, transparent); box-shadow: 0 0 16px rgba(101, 230, 255, .42); }
.uc-side {
  position: relative;
  background: linear-gradient(180deg, rgba(7, 17, 28, .92), rgba(3, 9, 16, .82));
  border-right-color: rgba(151, 216, 236, .2);
}
.uc-side::before {
  position: absolute;
  top: 12%;
  bottom: 12%;
  right: -1px;
  width: 1px;
  content: "";
  background: linear-gradient(180deg, transparent, var(--wb-cyan), transparent);
  box-shadow: 0 0 12px rgba(101, 230, 255, .35);
}
.uc-id { padding-bottom: 20px; border-bottom-color: rgba(151, 216, 236, .2); }
.uc-id .av { box-shadow: 0 0 0 5px rgba(101, 230, 255, .05), 0 0 30px rgba(101, 230, 255, .22); }
.uc-name { letter-spacing: .02em; }
.uc-nav button { border-radius: 11px; }
.uc-nav button.active { border-left-color: var(--wb-cyan); background: linear-gradient(90deg, rgba(101, 230, 255, .16), rgba(101, 230, 255, .025)); box-shadow: inset 0 0 18px rgba(101, 230, 255, .04), 0 0 18px rgba(101, 230, 255, .05); }
.uc-main { position: relative; background: radial-gradient(circle at 84% 7%, rgba(167, 139, 255, .08), transparent 26%); }
.uc-head { border-bottom-color: rgba(151, 216, 236, .2); }
.uc-head h1 { text-shadow: 0 0 22px rgba(101, 230, 255, .14); }
.uc-body .card-block,
.uc-body .advanced-settings-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(142, 211, 233, .24);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(13, 28, 43, .86), rgba(6, 14, 23, .84));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .035);
}
.uc-body .card-block::before {
  position: absolute;
  top: 0;
  left: 12%;
  width: 24%;
  height: 1px;
  content: "";
  background: var(--wb-cyan);
  box-shadow: 0 0 14px var(--wb-cyan);
}
.uc-body .card-block > h3 { border-bottom-color: rgba(151, 216, 236, .16); }
.uc-hero { border-left-color: var(--wb-cyan); background: linear-gradient(120deg, rgba(101, 230, 255, .12), rgba(167, 139, 255, .08) 54%, rgba(255, 100, 194, .08)); }
.uc-hero::after { width: 72px; background: linear-gradient(90deg, transparent, var(--wb-pink)); }
.uc-meter { height: 11px; border-color: rgba(158, 218, 235, .34); background: rgba(2, 9, 16, .76); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .34); }
.uc-meter i { background: linear-gradient(90deg, var(--wb-cyan), var(--wb-violet), var(--wb-pink)); box-shadow: 0 0 16px rgba(101, 230, 255, .42); }
.uc-stat { border-radius: 11px; background: rgba(101, 230, 255, .035); }
.av-picker { gap: 12px; }
.av-opt { min-width: 96px; border-radius: 14px; background: rgba(101, 230, 255, .035); }
.av-opt.on { border-color: var(--wb-cyan); box-shadow: 0 0 22px rgba(101, 230, 255, .16), inset 0 0 22px rgba(101, 230, 255, .04); }
.provider-node { border-radius: 14px; border-color: rgba(142, 211, 233, .22); background: rgba(3, 11, 19, .62); }
.provider-node::after { width: 48px; background: linear-gradient(90deg, transparent, var(--wb-cyan)); }
.provider-field input, .settings-value-input { border-color: rgba(142, 211, 233, .25); border-radius: 12px; background: rgba(2, 9, 16, .7); }
.advanced-settings-card > summary { border-radius: 18px; }

@keyframes wb-pulse { 0%,100% { opacity: .42; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes wb-scan { 0% { transform: translateX(-28%); opacity: 0; } 18%,82% { opacity: .82; } 100% { transform: translateX(28%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .create-layout .mode-card,
  .create-layout .model-card,
  .create-layout .prompt-card,
  .create-layout .output-card,
  .create-layout .ref-box,
  .create-layout .frame-slot,
  .assets-page .work-card,
  .changelog-item { transition: none; }
  .changelog-item.latest::after,
  .create-layout .prompt-card:focus-within::after { animation: none; }
}

@media (max-width: 760px) {
  .create-layout { padding: 12px; gap: 12px; }
  .create-layout .side-panel, .create-layout .canvas { border-radius: 16px; }
  .create-layout .side-panel .panel-scroll { padding: 16px 13px; }
  .create-layout .canvas-toolbar::before { display: none; }
  .create-layout .canvas-body { min-height: 420px; padding: 14px; }
  .assets-page .archive-title-row { min-height: 0; padding-bottom: 18px; }
  .assets-page .archive-title-row h1 { font-size: 26px; }
  .assets-page #stat-chip-assets, .assets-page #stat-chip-shared { align-self: flex-start; }
  .assets-page .archive-toolbar { border-radius: 14px; }
  .assets-page .work-card:hover, .changelog-item:hover { transform: none; }
  .changelog-page { padding-top: 26px; }
  .changelog-list { margin-top: 24px; padding-left: 20px; }
  .changelog-list::before { left: 5px; }
  .changelog-item::before { left: -21px; }
  .uc-dialog { border-radius: 0; }
}

/* ---------------------- Image detail / lightbox ---------------------- */
.lightbox {
  isolation: isolate;
  background:
    radial-gradient(circle at 23% 34%, rgba(101, 230, 255, .09), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(167, 139, 255, .09), transparent 25%),
    rgba(2, 7, 13, .94);
  backdrop-filter: blur(18px) saturate(1.15);
}
.lightbox::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .28;
  background:
    linear-gradient(90deg, rgba(101, 230, 255, .04) 1px, transparent 1px) 0 0 / 76px 76px,
    linear-gradient(0deg, rgba(101, 230, 255, .035) 1px, transparent 1px) 0 0 / 76px 76px;
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}
.lightbox .lb-media {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4vw, 60px);
  background:
    radial-gradient(circle at 52% 42%, rgba(101, 230, 255, .12), transparent 30%),
    linear-gradient(145deg, rgba(8, 20, 31, .82), rgba(2, 8, 15, .88));
}
.lightbox .lb-media::after {
  position: absolute;
  z-index: 0;
  inset: 22px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(142, 211, 233, .12);
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(142, 211, 233, .018) 5px 6px);
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}
.lightbox .lb-media img,
.lightbox .lb-media video {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(187, 236, 248, .32);
  border-radius: 14px;
  box-shadow: 0 36px 110px rgba(0, 0, 0, .64), 0 0 0 7px rgba(101, 230, 255, .025), 0 0 36px rgba(101, 230, 255, .12);
}
.lightbox .lb-media::before {
  z-index: 2;
  top: 20px;
  left: 28px;
  color: rgba(180, 229, 241, .7);
  letter-spacing: .16em;
}
.lightbox .lb-side {
  position: relative;
  width: min(430px, 34vw);
  padding: 28px 24px 30px;
  border-left: 1px solid rgba(143, 211, 234, .24);
  background: linear-gradient(180deg, rgba(10, 24, 37, .96), rgba(4, 11, 19, .98));
  box-shadow: -20px 0 60px rgba(0, 0, 0, .22), inset 1px 0 0 rgba(255, 255, 255, .035);
}
.lightbox .lb-side::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--wb-pink), transparent 32%, var(--wb-cyan));
  box-shadow: 0 0 16px rgba(101, 230, 255, .34);
}
.lightbox .lb-side > div { position: relative; padding-top: 3px; }
.lightbox .lb-side > div + div { padding-top: 17px; border-top: 1px solid rgba(142, 211, 233, .12); }
.lightbox .lb-side h4 { margin-bottom: 9px; color: #94b6c6; font: 10px/1.2 "Courier New", monospace; letter-spacing: .15em; }
.lightbox .prompt-box,
.lightbox .meta-grid .mg,
.lightbox .cmt-main {
  border-color: rgba(142, 211, 233, .2);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(5, 16, 26, .86), rgba(3, 10, 17, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.lightbox .prompt-box { color: #bdd5df; line-height: 1.8; }
.lightbox .meta-grid { gap: 8px; }
.lightbox .meta-grid .mg { padding: 11px 12px; }
.lightbox .meta-grid .mg .k { color: #7092a4; font: 9px/1.2 "Courier New", monospace; letter-spacing: .08em; }
.lightbox .meta-grid .mg .v { margin-top: 5px; color: #e2f5fb; font-size: 12px; }
.lightbox .lb-actions { gap: 8px; }
.lightbox .lb-actions .btn { border-radius: 10px; border-color: rgba(142, 211, 233, .24); background: rgba(101, 230, 255, .035); }
.lightbox .lb-actions .btn:hover { border-color: rgba(101, 230, 255, .68); box-shadow: 0 0 16px rgba(101, 230, 255, .12); transform: translateY(-1px); }
.lightbox .lb-close,
.lightbox .lb-nav,
.lightbox .lb-zoombar {
  border-color: rgba(158, 222, 239, .42);
  background: rgba(4, 15, 25, .88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
}
.lightbox .lb-close { top: 20px; right: 24px; border-radius: 10px; }
.lightbox .lb-nav { border-radius: 12px; }
.lightbox .lb-nav:hover { background: #173f52; box-shadow: 0 0 22px rgba(101, 230, 255, .24); }
.lightbox .lb-zoombar { right: 28px; bottom: 22px; border-radius: 12px; }
.lightbox .lb-duck-bar { border-color: rgba(255, 210, 143, .45); border-radius: 13px; background: rgba(8, 19, 28, .88); }
.lightbox .lb-cmt-sec { padding-top: 17px; border-top: 1px solid rgba(142, 211, 233, .12); }

/* ---------------------- Share link modal ---------------------- */
.modal:has(.share-meta-row) {
  position: relative;
  overflow: hidden;
  width: min(650px, calc(100vw - 32px));
  border: 1px solid rgba(157, 220, 238, .32);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(12, 28, 43, .97), rgba(4, 11, 19, .985));
  box-shadow: 0 34px 110px rgba(0, 0, 0, .64), 0 0 36px rgba(101, 230, 255, .1);
}
.modal:has(.share-meta-row)::after {
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--wb-cyan), var(--wb-pink), transparent);
  box-shadow: 0 0 16px rgba(101, 230, 255, .42);
}
.modal:has(.share-meta-row) h3 { color: #e8f9ff; letter-spacing: .02em; }
.modal:has(.share-meta-row) .dialog-copy { padding: 13px 14px; border: 1px solid rgba(142, 211, 233, .14); border-radius: 13px; background: rgba(101, 230, 255, .035); }
.modal:has(.share-meta-row) .field { margin-top: 17px; }
.modal:has(.share-meta-row) #share-url { min-height: 44px; border-radius: 12px; border-color: rgba(142, 211, 233, .34); background: rgba(2, 9, 16, .78); color: #dff7ff; }
.modal:has(.share-meta-row) #share-copy { min-height: 44px; border-radius: 12px; }
.modal:has(.share-meta-row) .share-meta-row { padding: 10px 12px; border: 1px solid rgba(142, 211, 233, .13); border-radius: 12px; background: rgba(101, 230, 255, .025); }
.modal:has(.share-meta-row) .modal-foot { margin-top: 18px; }

@media (max-width: 760px) {
  .lightbox { display: grid; grid-template-rows: minmax(245px, 43svh) minmax(0, 1fr); overflow-y: auto; }
  .lightbox .lb-media { min-height: 245px; padding: 48px 14px 20px; }
  .lightbox .lb-media::after { inset: 14px; }
  .lightbox .lb-media img, .lightbox .lb-media video { max-height: calc(43svh - 68px); border-radius: 11px; }
  .lightbox .lb-side { width: auto; min-width: 0; padding: 20px 15px 28px; border-top: 1px solid rgba(143, 211, 234, .24); border-left: 0; }
  .lightbox .lb-close { top: 10px; right: 10px; }
  .lightbox .lb-nav.prev { left: 8px; }
  .lightbox .lb-nav.next { right: 8px; }
  .lightbox .lb-zoombar { right: 14px; bottom: 14px; }
}