/* ============ Works wall (/works) ============ */
.wk-page { position: relative; padding: 56px 0 96px; overflow: hidden; min-height: 80vh; }
.wk-aurora { position: absolute; inset: -120px 0 auto; height: 560px; pointer-events: none; z-index: 0; filter: blur(70px); opacity: .5; }
.wk-aurora i { position: absolute; width: 440px; height: 320px; border-radius: 50%; animation: wk-drift 18s ease-in-out infinite alternate; }
.wk-aurora i:nth-child(1) { left: 6%; top: 40px; background: radial-gradient(closest-side, rgba(88,166,255,.55), transparent); }
.wk-aurora i:nth-child(2) { left: 38%; top: 0; background: radial-gradient(closest-side, rgba(163,113,247,.5), transparent); animation-delay: -6s; }
.wk-aurora i:nth-child(3) { right: 6%; top: 60px; background: radial-gradient(closest-side, rgba(247,120,186,.45), transparent); animation-delay: -11s; }
@keyframes wk-drift { to { transform: translate(60px, 40px) scale(1.15); } }

.wk-head { position: relative; z-index: 1; text-align: center; max-width: 920px; margin-bottom: 40px; }
.wk-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(63,185,80,.35); background: rgba(63,185,80,.08); border-radius: 999px; font-size: 12px; color: #7ee787; letter-spacing: .02em; }
.wk-live i { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 0 0 rgba(63,185,80,.6); animation: wk-pulse 1.8s infinite; }
.wk-sep { opacity: .5; }
#wkTotal { color: var(--fg-2, #c9d1d9); }
@keyframes wk-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,185,80,.55); } 70% { box-shadow: 0 0 0 8px rgba(63,185,80,0); } 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); } }
.wk-head h1 .nb { white-space: nowrap; }
.wk-head h1 { margin: 18px 0 12px; font-size: clamp(26px, 4.2vw, 46px); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.wk-tag { position: relative; display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .1em; padding: .04em .38em .1em; font: inherit; color: inherit; cursor: pointer; border: 1px solid rgba(163,113,247,.45); border-radius: 14px; background: linear-gradient(135deg, rgba(88,166,255,.12), rgba(247,120,186,.12)); transition: transform .25s, border-color .25s; }
.wk-tag span { background: linear-gradient(90deg, #79c0ff, #a371f7 45%, #f778ba 80%, #79c0ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wk-shine 5s linear infinite; }
.wk-tag small { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; opacity: 0; transition: opacity .2s; letter-spacing: 0; }
.wk-tag:hover, .wk-tag:focus-visible { transform: translateY(-2px); border-color: rgba(247,120,186,.7); }
.wk-tag:hover small, .wk-tag:focus-visible small, .wk-tag.is-copied small { opacity: 1; }
.wk-tag.is-copied { border-color: #3fb950; }
@keyframes wk-shine { to { background-position: -200% 0; } }
.wk-actions-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.wk-sub { margin: 18px auto 8px; font-size: clamp(15px, 1.8vw, 19px); color: var(--fg-2, #c9d1d9); }

/* wall */
.wk-wall { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; align-items: start; }
.wk-wall > .is-land { grid-column: span 2; }
/* JS grid: 2px rows + per-card row spans give a dense masonry where landscape works span two columns. */
.wk-wall.is-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: 2px; grid-auto-flow: row dense; column-gap: var(--gap, 14px); row-gap: 0; }
.wk-wall.is-grid > .wk-card { align-self: start; }
.wk-card { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); color: var(--fg); text-decoration: none; transition: border-color .3s, box-shadow .3s, opacity .6s, translate .6s; }
.is-grid .wk-card { opacity: 0; translate: 0 18px; transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms; }
.is-grid .wk-card.is-in { opacity: 1; translate: 0 0; }
.wk-card.is-in:hover { transition-delay: 0ms; }
.wk-card:hover, .wk-card:focus-visible { border-color: rgba(163,113,247,.6); box-shadow: 0 18px 50px -18px rgba(163,113,247,.45), 0 0 0 1px rgba(163,113,247,.2); }
.wk-media { position: relative; display: block; aspect-ratio: 9 / 16; background: linear-gradient(160deg, #161b22, #0d1117); }
.r-16x9 .wk-media { aspect-ratio: 16 / 9; } .r-1x1 .wk-media { aspect-ratio: 1; } .r-3x4 .wk-media { aspect-ratio: 3 / 4; } .r-4x3 .wk-media { aspect-ratio: 4 / 3; }
.wk-media img, .wk-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-blank { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(88,166,255,.25), transparent 60%), radial-gradient(circle at 70% 80%, rgba(247,120,186,.2), transparent 60%); }
.wk-glint { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.wk-card.is-glint .wk-glint { animation: wk-glint 1.1s ease; }
@keyframes wk-glint { to { transform: translateX(120%); } }
.wk-plat { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 999px; font-size: 11px; line-height: 1.4; background: rgba(1,4,9,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(240,246,252,.14); }
.wk-plat.p-douyin { box-shadow: inset 2px 0 0 #25f4ee, inset -2px 0 0 #fe2c55; }
.wk-plat.p-xiaohongshu { border-color: rgba(255,36,66,.6); } .wk-plat.p-bilibili { border-color: rgba(251,114,153,.6); } .wk-plat.p-kuaishou { border-color: rgba(255,80,0,.6); }
.wk-meta { position: absolute; inset: auto 0 0; padding: 36px 12px 11px; background: linear-gradient(transparent, rgba(1,4,9,.88)); display: flex; flex-direction: column; gap: 3px; }
.wk-meta b { font-size: 13px; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-by { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg-2, #c9d1d9); }
.wk-go { color: #d2a8ff; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; white-space: nowrap; margin-left: auto; }
.wk-card:hover .wk-go, .wk-card:focus-visible .wk-go { opacity: 1; transform: none; }
@media (hover: none) { .wk-go { opacity: .9; transform: none; } }

.r-16x9 .wk-meta, .r-4x3 .wk-meta { padding-top: 20px; }
.r-16x9 .wk-meta b, .r-4x3 .wk-meta b { -webkit-line-clamp: 1; }

/* landing */
.wk-card.is-landing { animation: wk-land .9s cubic-bezier(.2,.9,.25,1.2); }
@keyframes wk-land { 0% { opacity: 0; transform: translateY(-36px) scale(.86); filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; } }
.wk-card.is-fresh { border-color: rgba(63,185,80,.75); box-shadow: 0 0 0 1px rgba(63,185,80,.35), 0 16px 44px -18px rgba(63,185,80,.6); }
.wk-card.is-fresh::after { content: 'NEW'; position: absolute; top: 10px; right: 10px; padding: 2px 7px; border-radius: 6px; font: 600 10px/1.5 var(--mono, ui-monospace, monospace); letter-spacing: .08em; color: #010409; background: #3fb950; animation: wk-pop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes wk-pop { from { transform: scale(0); } }

/* empty */
.wk-ghost { display: block; border-radius: 14px; aspect-ratio: 9 / 16; border: 1px dashed var(--border); background: linear-gradient(110deg, var(--bg-1) 30%, var(--bg-2) 50%, var(--bg-1) 70%); background-size: 300% 100%; animation: wk-shimmer 2.4s linear infinite; }
.wk-ghost.r-3x4 { aspect-ratio: 3 / 4; } .wk-ghost.r-1x1 { aspect-ratio: 1; } .wk-ghost.r-16x9 { aspect-ratio: 16 / 9; }
.wk-ghost:nth-child(2n) { animation-delay: -.6s; } .wk-ghost:nth-child(3n) { animation-delay: -1.2s; }
@keyframes wk-shimmer { to { background-position: -300% 0; } }
.wk-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); margin: 8px 0 0; }

/* toast */
.wk-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 14px; background: rgba(13,17,23,.92); border: 1px solid rgba(63,185,80,.45); box-shadow: 0 18px 50px -12px rgba(0,0,0,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translate(-50%, 24px); opacity: 0; transition: transform .4s cubic-bezier(.2,.9,.3,1.2), opacity .3s; max-width: calc(100vw - 32px); }
.wk-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.wk-toast-pic { width: 34px; height: 46px; border-radius: 7px; overflow: hidden; background: var(--bg-2); flex-shrink: 0; }
.wk-toast-pic.is-land { width: 64px; height: 36px; }
.wk-toast-pic img { width: 100%; height: 100%; object-fit: cover; }
.wk-toast b { display: block; font-size: 13px; color: #7ee787; }
.wk-toast small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .wk-page { padding-top: 36px; }
  .wk-wall { gap: 10px; }
  .wk-card, .wk-ghost { border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-aurora i, .wk-tag span, .wk-live i, .wk-ghost { animation: none; }
  .is-grid .wk-card { opacity: 1; translate: none; }
}

/* ============ Home strip ============ */
.home-works { display: flex; align-items: center; gap: 18px; height: 64px; margin: 24px 0 0; padding: 0 8px 0 18px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(90deg, rgba(88,166,255,.07), rgba(163,113,247,.06) 45%, rgba(247,120,186,.05)), var(--bg-1); color: var(--fg); text-decoration: none; overflow: hidden; position: relative; transition: border-color .25s, box-shadow .25s; }
.home-works:hover { border-color: rgba(163,113,247,.55); box-shadow: 0 10px 34px -16px rgba(163,113,247,.5); }
.hw-copy { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; flex-shrink: 0; font-size: 15px; color: var(--fg-2, #c9d1d9); }
.hw-copy b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; background: linear-gradient(90deg, #79c0ff, #a371f7, #f778ba); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.hw-live { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; align-self: center; animation: wk-pulse 1.8s infinite; flex-shrink: 0; }
.hw-track { flex: 1; min-width: 0; height: 48px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hw-flow { display: flex; gap: 8px; width: max-content; height: 100%; animation: hw-flow 40s linear infinite; }
.home-works:hover .hw-flow { animation-play-state: paused; }
.hw-flow img { height: 48px; width: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 7px; border: 1px solid rgba(240,246,252,.1); background: var(--bg-2); flex-shrink: 0; }
.hw-flow img.is-land { aspect-ratio: 16 / 9; }
.hw-flow img:nth-child(odd) { animation: hw-bob 3.2s ease-in-out infinite; }
.hw-flow img:nth-child(3n) { animation: hw-bob 3.2s ease-in-out -1.4s infinite; }
@keyframes hw-flow { to { transform: translateX(-50%); } }
@keyframes hw-bob { 50% { transform: translateY(-3px); } }
.hw-go { flex-shrink: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 9px; font-size: 13px; color: var(--fg); background: rgba(240,246,252,.06); border: 1px solid var(--border); white-space: nowrap; }
.home-works:hover .hw-go { border-color: rgba(163,113,247,.6); }
.hw-go .arr { transition: transform .25s; } .home-works:hover .hw-go .arr { transform: translateX(3px); }
@media (max-width: 720px) {
  .home-works { height: 56px; gap: 12px; padding: 0 6px 0 12px; }
  .hw-copy { font-size: 13px; gap: 5px; } .hw-copy b { font-size: 18px; }
  .hw-copy .hw-long { display: none; }
  .hw-go { padding: 0 10px; } .hw-go .hw-go-t { display: none; }
  .hw-flow img { height: 40px; } .hw-track { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .hw-flow, .hw-flow img { animation: none; } }

/* ============ Submit ============ */
.wk-submit { max-width: 720px; padding: 40px var(--gutter, 16px) 80px; }
.wk-back { font-size: 14px; }
.wk-submit h1 { font-size: clamp(26px, 4vw, 36px); margin: 14px 0 8px; }
.wk-submit-sub { color: var(--fg-2, #c9d1d9); margin: 0 0 24px; }
.wk-sform { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-1); }
.wk-sform .field { display: grid; gap: 8px; margin: 0; border: 0; padding: 0; min-width: 0; }
.wk-sform .field > span, .wk-sform legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.wk-sform em { color: var(--pink); font-style: normal; }
.wk-sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wk-ratios { display: flex; gap: 12px; flex-wrap: wrap; }
.wk-ratio { position: relative; display: grid; grid-template-rows: 64px auto auto; justify-items: center; align-items: center; gap: 2px; width: 104px; padding: 12px 8px 10px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--bg-2); transition: border-color .2s, background .2s; }
.wk-ratio input { position: absolute; opacity: 0; pointer-events: none; }
.wk-ratio-box { display: block; border: 2px solid var(--muted); border-radius: 5px; transition: border-color .2s, background .2s; }
.wk-ratio-box.r-9x16 { width: 32px; height: 56px; } .wk-ratio-box.r-16x9 { width: 72px; height: 40px; } .wk-ratio-box.r-1x1 { width: 48px; height: 48px; }
.wk-ratio b { font-size: 14px; } .wk-ratio small { font-size: 11px; color: var(--muted); }
.wk-ratio:has(input:checked) { border-color: var(--purple); background: rgba(163,113,247,.1); }
.wk-ratio:has(input:checked) .wk-ratio-box { border-color: var(--purple); background: linear-gradient(135deg, rgba(88,166,255,.35), rgba(247,120,186,.35)); }
.wk-ratio:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.wk-hint { margin: 0; font-size: 13px; color: var(--muted); }
.wk-sform button { justify-self: start; }
.wk-mine { margin-top: 32px; }
.wk-mine h2 { font-size: 18px; }
.wk-mine-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.wk-mine-row small { color: var(--muted); }
.wk-mine-st { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.s-pending .wk-mine-st { color: #e3b341; border-color: rgba(227,179,65,.5); }
.s-published .wk-mine-st { color: #7ee787; border-color: rgba(63,185,80,.5); }
.s-rejected .wk-mine-st { color: #ff7b72; border-color: rgba(248,81,73,.5); }
@media (max-width: 560px) { .wk-sgrid { grid-template-columns: 1fr; } .wk-sform { padding: 18px; } .wk-ratio { width: calc((100% - 24px) / 3); } }

/* ============ Admin ============ */
.wk-admin { padding: 40px var(--gutter, 16px) 80px; }
.wk-admin-head { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.wk-admin h1 { font-size: 24px; margin: 0; }
.wk-admin h2 { font-size: 18px; margin: 28px 0 12px; }
.wk-review { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(227,179,65,.4); border-radius: 12px; background: var(--bg-1); margin-bottom: 14px; }
.wk-review-info { display: grid; gap: 4px; font-size: 14px; }
.wk-review-info small { color: var(--muted); word-break: break-all; }
.wk-reject { display: flex; gap: 8px; } .wk-reject .input { flex: 1; }
.wk-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); }
.wk-form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.wk-form .wide { grid-column: 1 / -1; }
.wk-form button { justify-self: start; align-self: end; }
.wk-form select.is-auto { border-color: #3fb950; }
.wk-direct { margin: 20px 0; } .wk-direct summary { cursor: pointer; color: var(--blue); margin-bottom: 10px; }
.wk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wk-table td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.wk-table tr.s-hidden, .wk-table tr.s-rejected { opacity: .55; }
.wk-adm-th { display: grid; place-items: center; width: 48px; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; background: var(--bg-2); font-size: 10px; color: var(--muted); }
.wk-adm-th.is-land { width: 86px; aspect-ratio: 16 / 9; }
.wk-adm-th img, .wk-adm-th video { width: 100%; height: 100%; object-fit: cover; }
.wk-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.wk-actions details { flex-basis: 100%; } .wk-actions details[open] summary { margin-bottom: 8px; }
.wk-sform textarea.input { min-height: 104px; height: auto; resize: vertical; line-height: 1.6; padding-top: 10px; }
.wk-sform-label { font-size: 14px; font-weight: 600; }
.wk-rows { display: grid; gap: 10px; }
.wk-row { display: flex; gap: 8px; align-items: center; }
.wk-row .input { flex: 1; min-width: 0; height: 48px; font-size: 15px; }
.wk-row .wk-paste { height: 48px; padding: 0 16px; flex-shrink: 0; }
.wk-row.is-new { animation: wk-row-in .3s cubic-bezier(.2,.8,.2,1); }
@keyframes wk-row-in { from { opacity: 0; transform: translateY(-6px); } }
.wk-del { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.wk-del:hover, .wk-del:focus-visible { color: var(--fg); border-color: var(--border); }
.wk-add { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border-radius: 10px; border: 1px dashed var(--border); background: none; color: var(--fg-2, #c9d1d9); font: inherit; font-size: 14px; cursor: pointer; }
.wk-add span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(163,113,247,.15); color: #d2a8ff; font-size: 18px; }
.wk-add:hover { border-color: rgba(163,113,247,.6); color: var(--fg); }
.wk-hint.is-warn { color: #e3b341; }
@media (max-width: 560px) { .wk-row .wk-paste { padding: 0 12px; } }
/* hover preview clip (10–20 s) over the 3 s loop cover */
.wk-clip { opacity: 0; transition: opacity .35s; }
.wk-card.is-previewing .wk-clip { opacity: 1; }
.wk-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(240,246,252,.12); opacity: 0; transition: opacity .25s; z-index: 2; }
.wk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #79c0ff, #a371f7, #f778ba); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.wk-card.is-previewing .wk-bar { opacity: 1; }
.wk-card.is-loading .wk-bar { opacity: 1; }
.wk-card.is-loading .wk-bar i { width: 30%; transform: none; animation: wk-load 1s ease-in-out infinite; }
@keyframes wk-load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.wk-card.is-previewing .wk-meta { opacity: .25; transition: opacity .3s; }
.wk-card[data-clip]:not(.is-previewing) .wk-plat::after { content: ' ▶'; font-size: 9px; opacity: .7; }
/* featured: larger tile, badge and a soft gradient frame */
.wk-feat { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; background: linear-gradient(90deg, #a371f7, #f778ba); box-shadow: 0 4px 14px -4px rgba(247,120,186,.6); z-index: 2; }
.wk-card.is-featured { border-color: rgba(163,113,247,.55); box-shadow: 0 0 0 1px rgba(163,113,247,.25), 0 22px 60px -26px rgba(163,113,247,.6); }
.wk-card.is-featured .wk-meta b { font-size: 16px; }
.wk-card.is-featured.is-fresh::after { top: 40px; }
/* entry: "updating" while the newest works land, then settled and still */
.wk-live { transition: opacity .5s ease; }
/* Once the newest works have landed, the chip fades away: no status text or count stays on the page. */
.wk-page.is-settled .wk-live { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.wk-page.is-settled .wk-aurora i { animation-play-state: paused; }

/* Staff star (admins / moderators only): top-right of every card, one click toggles 精选. */
.wk-star { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #e6edf3; background: rgba(1,4,9,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(240,246,252,.18); transition: background .2s, color .2s, border-color .2s, transform .15s; }
.wk-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.wk-star:hover { color: #ffd166; border-color: rgba(255,209,102,.6); }
.wk-star:active { transform: scale(.92); }
.wk-star.is-on { color: #1c1300; background: #ffd166; border-color: #ffd166; }
.wk-star.is-on svg { fill: currentColor; }
.wk-star.is-err { border-color: #f85149; color: #f85149; }
.wk-star:disabled { opacity: .6; cursor: progress; }
.wk-page[data-staff="1"] .wk-feat { right: 48px; }