/* ============================================================
   棱镜 PRISM · module-specific styles
   home / tool pages / knowledge / kanban / studio
   ============================================================ */

/* ------------------------------------------------------------ home hero */
.hero {
  position: relative;
  padding: clamp(var(--sp-6), 5vw, var(--sp-8)) 0 var(--sp-7);
}

.hero__ghost {
  position: absolute;
  top: -6%;
  right: -2%;
  z-index: 0;
  font: 700 clamp(9rem, 24vw, 20rem) / 0.8 var(--font-serif);
  color: var(--text-1);
  opacity: 0.032;
  letter-spacing: -0.08em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hero__inner { position: relative; z-index: 1; max-width: 60ch; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-4);
  padding: 5px 13px 5px 8px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(14px);
  font: var(--t-label) / 1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-2);
}
.hero__eyebrow i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2.4s var(--ease) infinite;
}

.hero h1 { margin-bottom: var(--sp-4); }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--a-cyan), var(--a-teal) 40%, var(--a-violet) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .hero h1 em {
  background: linear-gradient(100deg, #0d9aa8, #3b7fd4 45%, #7c5cd6 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__lede {
  max-width: 52ch;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.78;
  color: var(--text-2);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.hero__pulse {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-edge);
}
.hero__pulse .stat__v { font-size: 1.7rem; }

/* marquee */
.marquee {
  margin: var(--sp-6) 0;
  padding: 11px 0;
  border-top: 1px solid var(--glass-edge);
  border-bottom: 1px solid var(--glass-edge);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: slide 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--t-label) / 1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
  white-space: nowrap;
}
.marquee__item::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

/* ------------------------------------------------------------ module cards */
.mgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: var(--sp-4);
}

.mcard {
  --mc: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(155%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(155%);
  box-shadow: var(--sh-md), inset 0 1px 0 var(--glass-edge-hi);
  overflow: hidden;
  transition: transform var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease),
    box-shadow var(--d-mid) var(--ease);
}
.mcard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-mid) var(--ease);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--mc) 17%, transparent), transparent 68%);
}
.mcard:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--mc) 34%, transparent);
  box-shadow: var(--sh-lg), inset 0 1px 0 var(--glass-edge-hi);
}
.mcard:hover::before { opacity: 1; }
.mcard > * { position: relative; z-index: 1; }

.mcard__top { display: flex; align-items: flex-start; gap: var(--sp-3); }
.mcard__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, color-mix(in oklab, var(--mc) 26%, transparent), transparent 80%);
  border: 1px solid color-mix(in oklab, var(--mc) 30%, transparent);
  color: var(--mc);
  transition: transform var(--d-mid) var(--ease-spring), box-shadow var(--d-mid) var(--ease);
}
.mcard:hover .mcard__icon {
  transform: scale(1.06) rotate(-5deg);
  box-shadow: 0 0 26px -6px var(--mc);
}
.mcard__icon svg { width: 21px; height: 21px; }
.mcard__count {
  margin-left: auto;
  font: var(--t-label) / 1 var(--font-mono);
  color: var(--mc);
  opacity: 0.8;
}
.mcard h3 { font: var(--t-h3) / 1.4 var(--font-serif); }
.mcard p { font: var(--t-sm) / 1.7 var(--font-sans); color: var(--text-2); }
.mcard__tools { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: var(--sp-2); }
.mcard__tools span {
  padding: 2px 8px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  font: 500 0.6875rem/1.7 var(--font-sans);
  color: var(--text-3);
  transition: all var(--d-fast) var(--ease);
}
.mcard:hover .mcard__tools span { border-color: color-mix(in oklab, var(--mc) 22%, transparent); color: var(--text-2); }
.mcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font: 500 var(--t-sm) / 1 var(--font-sans);
  color: var(--mc);
}
.mcard__go svg { width: 15px; height: 15px; transition: transform var(--d-mid) var(--ease-spring); }
.mcard:hover .mcard__go svg { transform: translateX(5px); }

/* per-module accent */
.mcard[data-accent="cyan"]   { --mc: var(--a-cyan); }
.mcard[data-accent="coral"]  { --mc: var(--a-coral); }
.mcard[data-accent="amber"]  { --mc: var(--a-amber); }
.mcard[data-accent="jade"]   { --mc: var(--a-jade); }
.mcard[data-accent="violet"] { --mc: var(--a-violet); }
.mcard[data-accent="mint"]   { --mc: var(--a-mint); }

/* ------------------------------------------------------------ tool page */
.tooldesc {
  max-width: 62ch;
  font: var(--t-sm) / 1.7 var(--font-sans);
  color: var(--text-2);
}

.presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 7px;
}
.preset {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
  background: var(--glass);
  text-align: left;
  transition: all var(--d-fast) var(--ease);
}
.preset:hover { border-color: var(--accent-line); background: var(--glass-2); transform: translateY(-2px); }
.preset.is-on { border-color: var(--accent); background: var(--accent-soft); }
.preset b { font: 500 var(--t-xs) / 1.4 var(--font-sans); }
.preset small { font: 0.625rem/1.4 var(--font-mono); color: var(--text-3); }

/* image compare slider */
/* The two frames must occupy the exact same box, otherwise the split shows two
   different crops stacked. The base image defines the aspect ratio; both are
   absolutely positioned into that box and letterboxed identically. */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cmp-ratio, 4 / 3);
  background: var(--ink-850);
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-edge);
  user-select: none;
  touch-action: none;
}
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.compare__clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* clip path is driven by --pos, so the revealed image is pixel-aligned with
     the base image rather than re-laid-out inside a narrower box */
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  cursor: ew-resize;
  touch-action: none;
}
.compare__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--sh-md);
}
.compare__tag {
  position: absolute;
  top: 8px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--ink-900) 76%, transparent);
  backdrop-filter: blur(8px);
  font: var(--t-label) / 1.4 var(--font-mono);
  color: var(--text-2);
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------ knowledge */
.kb-layout { display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 860px) { .kb-layout { grid-template-columns: 1fr; } }

.kb-side { padding: var(--sp-3); position: sticky; top: calc(var(--sp-5) + 46px); }
.kb-side__grp { margin-bottom: var(--sp-4); }
.kb-side__title {
  padding: 6px 9px;
  font: var(--t-label) / 1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-4);
}
.kb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  font: var(--t-sm) / 1.4 var(--font-sans);
  color: var(--text-2);
  text-align: left;
  transition: all var(--d-fast) var(--ease);
}
.kb-nav > svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }
.kb-nav:hover { background: var(--glass-2); color: var(--text-1); }
.kb-nav.is-on { background: var(--accent-soft); color: var(--text-1); font-weight: 500; }
.kb-nav__n { margin-left: auto; font: var(--t-xs) / 1 var(--font-mono); color: var(--text-4); }

.notegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--sp-3); }
.notecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--sp-4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  background: var(--glass);
  transition: all var(--d-mid) var(--ease);
  animation: file-in var(--d-mid) var(--ease-out) both;
}
.notecard:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--sh-md); }
.notecard__title { font: 600 0.9375rem/1.45 var(--font-sans); }
.notecard__excerpt {
  font: var(--t-xs) / 1.65 var(--font-sans);
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notecard__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.notecard__pin { position: absolute; top: 11px; right: 11px; color: var(--a-amber); opacity: 0.85; }
.notecard__pin svg { width: 13px; height: 13px; }
.notecard__acts { display: flex; gap: 2px; margin-left: auto; opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.notecard:hover .notecard__acts { opacity: 1; }

.searchbar { position: relative; }

/* A search box + secondary filters + an action button belong on one line.
   Stacking them pushed real content below the fold on every list page. */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.toolbar__grow { flex: 1 1 190px; min-width: 0; }
.toolbar__mid { display: flex; align-items: center; gap: var(--sp-2); flex: 0 1 auto; min-width: 0; }
.toolbar__mid > .select { min-width: 128px; }
/* a two-character label like 排序 must not break into two lines next to a
   min-width select */
.toolbar__mid > .label,
.toolbar > .label { white-space: nowrap; }
/* a count like "共 12 条" must not break between the number and its unit, and
   the toolbar itself should wrap as whole items rather than mid-phrase */
.nowrap { white-space: nowrap; }
.toolbar__mid > .select { flex: 0 1 auto; }
.toolbar > .btn { flex: none; margin-left: auto; }
@media (max-width: 640px) { .toolbar > .btn { margin-left: 0; } }
.searchbar .input { padding-left: 36px; }
.searchbar svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--text-4);
  pointer-events: none;
}

/* ------------------------------------------------------------ kanban */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(238px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kanban { grid-template-columns: 1fr; } }

.kcol {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  background: var(--glass);
  min-height: 180px;
  transition: all var(--d-fast) var(--ease);
}
.kcol.is-over { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.kcol__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--glass-edge);
}
.kcol__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.kcol__name { font: 500 var(--t-sm) / 1 var(--font-sans); }
.kcol__n { margin-left: auto; font: var(--t-xs) / 1 var(--font-mono); color: var(--text-4); }
.kcol__body { display: flex; flex-direction: column; gap: 7px; padding: 9px; min-height: 72px; }
/* the work board always renders exactly 6 stat cards; the shared `.stats`
   rule is content-driven, so pin the tracks here to avoid wrapping "逾期"
   onto a lonely second row */
.stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .stats--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a column with no cards gets a drop target, otherwise a fresh board reads
   as broken rather than empty */
.kcol__empty {
  display: grid; place-items: center; flex: 1; min-height: 56px;
  border: 1px dashed var(--glass-edge); border-radius: var(--r-sm);
  font: var(--t-xs)/1.5 var(--font-sans); color: var(--text-4);
}
.kcol.is-over .kcol__empty { border-color: var(--accent-line); color: var(--text-3); }

.kcard {
  padding: 10px 12px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
  background: var(--glass-2);
  cursor: grab;
  transition: all var(--d-fast) var(--ease);
  animation: file-in var(--d-fast) var(--ease-out) both;
}
.kcard:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--sh-md); }
.kcard.is-drag { opacity: 0.4; cursor: grabbing; }
.kcard__t { font: 500 var(--t-sm) / 1.5 var(--font-sans); }
.kcard__meta { display: flex; align-items: center; gap: 5px; margin-top: 6px; flex-wrap: wrap; }

.prio { width: 3px; height: 12px; border-radius: 2px; flex: none; }
.prio--urgent { background: var(--a-coral); }
.prio--high   { background: var(--a-amber); }
.prio--normal { background: var(--a-cyan); }
.prio--low    { background: var(--text-4); }

/* timer */
.timer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-edge);
  background: var(--glass);
}
.timer__dial {
  display: grid;
  place-items: center;
  width: 118px; height: 118px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--glass-3) 0);
  transition: background 0.9s linear;
}
.timer__dial::after {
  content: "";
  position: absolute;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--ink-800);
}
.timer__time {
  position: relative;
  z-index: 1;
  font: 600 1.55rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.timer__ring { position: relative; display: grid; place-items: center; }

/* ------------------------------------------------------------ studio */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-3); }
.gitem {
  position: relative;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--glass);
  transition: all var(--d-mid) var(--ease);
  animation: file-in var(--d-mid) var(--ease-out) both;
}
.gitem:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--sh-lg); }
.gitem img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ink-800); }
.gitem__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-top: 1px solid var(--glass-edge);
}
.gitem__t { font: 500 var(--t-xs) / 1.4 var(--font-sans); min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gitem__acts {
  position: absolute;
  top: 7px; right: 7px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.gitem:hover .gitem__acts { opacity: 1; }
.gitem__acts .iconbtn {
  background: color-mix(in oklab, var(--ink-900) 74%, transparent);
  backdrop-filter: blur(8px);
  color: var(--text-2);
}
.gitem__acts .iconbtn:hover { color: var(--text-1); background: var(--accent-soft); }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.swatch {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-edge);
  position: relative;
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-spring);
}
.swatch:hover { transform: scale(1.06) rotate(-2deg); }
.swatch span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 5px;
  background: color-mix(in oklab, var(--ink-900) 72%, transparent);
  font: 0.5625rem/1.5 var(--font-mono);
  text-align: center;
  color: var(--text-2);
}

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.ccard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  background: var(--glass);
  transition: all var(--d-mid) var(--ease);
  animation: file-in var(--d-mid) var(--ease-out) both;
}
.ccard:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--sh-md); }
.ccard__body {
  font: var(--t-sm) / 1.72 var(--font-sans);
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 210px;
  overflow: hidden;
  position: relative;
}
.ccard__body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 44px;
  background: linear-gradient(transparent, var(--ink-800));
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.ccard:hover .ccard__body::after { opacity: 0.9; }
.ccard__foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 7px; flex-wrap: wrap; }
.price { font: 600 var(--t-sm) / 1 var(--font-mono); color: var(--a-amber); }

/* ------------------------------------------------------------ misc pages */
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); align-items: start; }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); }
.section { margin-top: var(--sp-6); }
.section__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.section__head h2 { flex: 1; }

.chartbox {
  padding: var(--sp-4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  background: var(--glass);
}
.chartbox svg { width: 100%; height: auto; overflow: visible; }

.foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-edge);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font: var(--t-xs) / 1.6 var(--font-sans);
  color: var(--text-4);
}
.foot a:hover { color: var(--accent); }