/* ============================================================
   Aithe! (So What!?) — Web Reader UI kit styles
   Editorial tech-magazine, modelled on the page architecture of a
   modern tech-review front page: masthead + sticky topic bar, a Big Story
   lead with a secondary headline list, sectioned collections, "The Feed",
   a signature 45° corner-cut motif, hairline rules, grotesque headlines +
   serif reading + mono captions. Black + signal-red on warm paper.
   ============================================================ */

.ila-app { min-height: 100vh; background: var(--bg); color: var(--text); }
.ila-app * { box-sizing: border-box; }

/* ---------- Reading-progress bar ---------- */
.kit-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--brand); z-index: 80; transition: width 90ms linear; }

/* ---------- Masthead ---------- */
.kit-mast { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); }
.kit-mast__bar { max-width: var(--container-max, 1280px); margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 16px 32px; }
.kit-mast__brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.kit-mast__tag { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); line-height: 1.25; max-width: 86px; white-space: pre-line; }
.kit-mast__util { display: flex; align-items: center; gap: 24px; margin-left: 14px; }
.kit-utilbtn { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text); padding: 6px 0; box-shadow: inset 0 0 0 transparent; transition: color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); white-space: nowrap; }
.kit-utilbtn:hover { color: var(--text-secondary); }
.kit-utilbtn--on { box-shadow: inset 0 -3px 0 var(--accent-press); }
.kit-utilbtn svg { color: var(--accent-press); }
.kit-mast__spacer { flex: 1; }
.kit-mast__search { }
.kit-mast__lang { display: inline-flex; align-items: center; border: 1px solid var(--rule); }
.kit-langbtn { border: 0; background: transparent; cursor: pointer; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--text-muted); padding: 6px 10px; transition: all var(--dur-base) var(--ease-out); }
.kit-langbtn--on { background: var(--rule); color: var(--surface); }
.kit-signin { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; background: transparent; color: var(--text); border: 1.5px solid var(--rule); padding: 11px 18px; cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.kit-signin:hover { background: var(--rule); color: var(--surface); }
.kit-subscribe { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); border: 1.5px solid var(--accent); padding: 11px 18px; cursor: pointer; transition: background var(--dur-base) var(--ease-out); display: inline-flex; align-items: center; }
.kit-subscribe:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* topic bar */
.kit-topics { border-top: 1px solid var(--border); background: var(--surface); }
.kit-topics__row { max-width: var(--container-max, 1280px); margin: 0 auto; display: flex; align-items: stretch; gap: 24px; padding: 0 32px; overflow-x: auto; scrollbar-width: none; }
.kit-topics__row::-webkit-scrollbar { display: none; }
.kit-topic { border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--text-secondary); padding: 11px 0; border-bottom: 3px solid transparent; white-space: nowrap; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.kit-topic:hover { color: var(--text); }
.kit-topic--on { color: var(--text); border-bottom-color: var(--accent-press); }

/* ---------- Page container ---------- */
.kit-page, .kit-main { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 30px 32px 100px; min-width: 0; }
.kit-page--read { max-width: 1280px; }

/* ---------- Square bullets + "New" tag ---------- */
.kit-endmark { width: 13px; height: 13px; background: var(--signal); flex: none; display: inline-block; }
.kit-newtag { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.02em; background: var(--ink-900); color: #fff; padding: 4px 9px; box-shadow: 0 0 0 3px var(--lilac-400); display: inline-block; }

/* ---------- Section heads ---------- */
.kit-section { margin-top: 56px; }
.kit-section--block { background: var(--ink-50); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 max(32px, calc(50vw - 640px)) 44px; border-top: 6px solid var(--accent); }
.kit-section__head { display: flex; align-items: center; gap: 14px; padding: 34px 0 22px; margin-bottom: 0; }
.kit-section--plain .kit-section__head { padding: 0 0 16px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.kit-section__tag { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.02em; background: var(--accent); color: var(--on-accent); padding: 5px 11px; display: inline-block; }
.kit-section__title { font-family: var(--font-display); font-weight: 900; font-size: 38px; letter-spacing: -0.035em; line-height: 0.98; }
.kit-section__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.kit-section__more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.kit-arrowbtn { width: 48px; height: 48px; border: 0; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.kit-arrowbtn:hover { background: var(--accent-hover); }
.kit-arrowbtn--ghost { background: var(--mint-300); }
.kit-feedhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.kit-sectiontitle { font-family: var(--font-display); font-weight: 900; font-size: 38px; letter-spacing: -0.035em; line-height: 0.98; }
.kit-kicker { font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: 9px; color: var(--text-secondary); }
.kit-catdot { width: 11px; height: 11px; flex: none; }

/* ---------- Cover placeholders (replace with real photography) ---------- */
.kit-cover { position: relative; overflow: hidden; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.kit-cover[data-tint]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, var(--tint-a), transparent 62%); opacity: 0.55; }
.kit-cover__glyph { opacity: 0.4; position: relative; z-index: 1; }
.kit-cover img { transition: transform var(--dur-slower) var(--ease-out); }
.kit-cover__scrim { position: absolute; inset: auto 0 0 0; height: 64%; background: linear-gradient(to top, rgba(10,9,7,0.82), transparent); z-index: 2; }
.kit-cover__overlay { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; color: #fff; }

/* ---------- Per-section featured tile ---------- */
.kit-catfeat { margin-top: 58px; }
.kit-catfeat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--rule); }
.kit-catfeat__name { font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: -0.035em; line-height: 1; display: inline-flex; align-items: center; gap: 13px; }
.kit-catfeat .kit-section__more { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-700); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kit-catfeat .kit-section__more:hover { gap: 9px; }
.kit-catfeat .kit-feature { margin-top: 14px; }
.kit-catfeat .kit-feature__block { background: var(--teal-900); }

/* live indicator */
.kit-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.kit-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: ila-pulse 1.6s var(--ease-in-out) infinite; }

/* ---------- Featured news tile (white card on dark block + 4-up row) ---------- */
.kit-feature { position: relative; margin-top: 60px; }
.kit-feature__block { position: absolute; top: -16px; left: -1.6%; right: -1.6%; height: 330px; background: var(--teal-900); z-index: 0; }
.kit-feature__card { position: relative; z-index: 1; background: var(--surface); display: grid; grid-template-columns: 1fr 1.12fr; gap: 44px; padding: 40px 44px; align-items: center; cursor: pointer; }
.kit-feature__topic { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 11px; }
.kit-feature__title { font-family: var(--font-display); font-weight: 900; font-size: 37px; line-height: 1.02; letter-spacing: -0.038em; margin: 16px 0 0; color: var(--text); text-wrap: balance; transition: color var(--dur-base) var(--ease-out); }
.kit-feature__card:hover .kit-feature__title { color: var(--teal-500); }
.kit-feature__dek { font-family: var(--font-sans); font-size: 17px; line-height: 1.5; color: var(--text-secondary); margin: 18px 0 0; max-width: 32em; }
.kit-feature__media { aspect-ratio: 16 / 11; background: var(--surface-3); overflow: hidden; position: relative; }
.kit-feature__card:hover .kit-feature__media img { transform: scale(1.04); }
.kit-feature__row { position: relative; z-index: 1; background: var(--ink-50); display: grid; grid-template-columns: repeat(4, 1fr); }
.kit-feature__cell { padding: 26px 26px 32px; border-left: 1px solid var(--border); cursor: pointer; }
.kit-feature__cell:first-child { border-left: 0; }
.kit-feature__cell .kit-feature__topic { font-size: 13px; gap: 9px; }
.kit-feature__cell-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.14; letter-spacing: -0.022em; margin: 14px 0 0; color: var(--text); text-wrap: pretty; transition: color var(--dur-base) var(--ease-out); }
.kit-feature__cell:hover .kit-feature__cell-title { color: var(--teal-500); }
@media (max-width: 900px) {
  .kit-feature__card { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .kit-feature__title { font-size: 28px; }
  .kit-feature__row { grid-template-columns: 1fr 1fr; }
  .kit-feature__cell:nth-child(3) { border-left: 0; }
  .kit-feature__block { height: 220px; }
}

/* ---------- Featured hero (teal block) ---------- */
.kit-herowrap { background: var(--teal-700); }
.kit-hero { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 40px 32px 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start; }
.kit-hero__big { background: var(--surface); border-top: 5px solid var(--lilac-400); padding: 26px 28px 30px; cursor: pointer; align-self: start; }
.kit-hero__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.kit-hero__topic { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 9px; }
.kit-hero__title { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 0.98; letter-spacing: -0.04em; margin: 0; color: var(--text); text-wrap: balance; }
.kit-hero__big:hover .kit-hero__title { color: var(--teal-500); }
.kit-hero__media { aspect-ratio: 16/9; background: var(--surface-3); overflow: hidden; margin-top: 24px; position: relative; }
.kit-hero__big:hover .kit-hero__media img { transform: scale(1.04); }
.kit-hero__side { border: 1.5px solid var(--lilac-400); display: flex; flex-direction: column; }
.kit-side { padding: 20px 22px 16px; cursor: pointer; }
.kit-side__media { aspect-ratio: 16/9; background: rgba(255,255,255,0.08); overflow: hidden; position: relative; margin-bottom: 16px; }
.kit-side:hover .kit-side__media img { transform: scale(1.04); }
.kit-side__topic { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: rgba(255,255,255,0.78); display: inline-flex; align-items: center; gap: 8px; }
.kit-side__title { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.06; letter-spacing: -0.03em; margin: 11px 0 0; color: var(--lilac-400); transition: color var(--dur-base) var(--ease-out); }
.kit-side:hover .kit-side__title { color: #fff; }
.kit-dots { display: flex; gap: 8px; padding: 4px 22px 18px; margin-top: auto; }
.kit-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.28); border: 0; padding: 0; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.kit-dot--on { background: var(--lilac-400); }

/* ---------- Emotion (mood) filter ---------- */
.kit-emofilter { margin: 28px 0 0; padding: 18px 0; border-bottom: 1px solid var(--border); }
.kit-emofilter__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 11px; }
.kit-emofilter__label svg { color: var(--brand); }
.kit-emofilter__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.kit-emochip { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 6px 13px 6px 7px; border-radius: var(--radius-pill); background: var(--surface); border: 1.5px solid var(--border-strong); cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--text-secondary); transition: all var(--dur-base) var(--ease-out); white-space: nowrap; }
.kit-emochip:hover { border-color: var(--rule); color: var(--text); }
.kit-emochip--on { border-color: var(--rule); background: var(--rule); color: var(--surface); }
.kit-emochip:not(.kit-emochip--rasa) { padding: 8px 16px; line-height: 1; }
.kit-emochip .ila-rasa { overflow: hidden; background: var(--surface-2); }

/* ---------- Story grid + cards ---------- */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px 26px; }
.kit-acard { display: flex; flex-direction: column; cursor: pointer; background: transparent; border: 0; padding: 0; }
.ila-card.kit-acard.ila-card--interactive { background: transparent; border: 0; }
.ila-card.kit-acard.ila-card--interactive:hover { transform: none; box-shadow: none; }
.kit-acard .kit-cover { aspect-ratio: 3 / 2; height: auto; margin-bottom: 14px; }
.kit-acard:hover .kit-cover img { transform: scale(1.05); }
.kit-acard__title { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.14; letter-spacing: -0.02em; margin: 0; text-wrap: pretty; transition: color var(--dur-base) var(--ease-out); }
.kit-acard:hover .kit-acard__title { color: var(--brand); }
.kit-acard__dek { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 7px 0 0; }
.kit-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--text-muted); margin-top: 12px; flex-wrap: wrap; }
.kit-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.kit-listrow { display: grid; grid-template-columns: 1fr 132px; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--border); cursor: pointer; align-items: start; }
.kit-listrow .kit-cover { height: 92px; }
.kit-listrow__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.16; letter-spacing: -0.02em; margin: 7px 0 0; transition: color var(--dur-base) var(--ease-out); }
.kit-listrow:hover .kit-listrow__title { color: var(--brand); }

/* ---------- Horizontal collection rail ---------- */
.kit-rail2 { display: flex; gap: 22px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.kit-rail2 > * { scroll-snap-align: start; }

/* ---------- Quick Stories promo banner ---------- */
.kit-promo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; background: var(--teal-700); color: #fff; padding: 30px 34px; margin-top: 8px; position: relative; overflow: hidden; border-top: 6px solid var(--mint-400); }
.kit-promo__label { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mint-400); display: inline-flex; align-items: center; gap: 8px; }
.kit-promo__title { font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: -0.035em; line-height: 1.0; margin: 12px 0 8px; color: #fff; text-wrap: balance; }
.kit-promo__sub { font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.5; max-width: 46em; }

/* ---------- The Feed ---------- */
.kit-feed { margin-top: 26px; }
.kit-feedbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.kit-feedbar__lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.kit-feeditem { display: grid; grid-template-columns: 40px 1fr 168px; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--border); cursor: pointer; align-items: start; }
.kit-feeditem__num { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding-top: 4px; }
.kit-feeditem__topic { font-family: var(--font-mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.kit-feeditem__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.12; letter-spacing: -0.025em; margin: 8px 0 0; text-wrap: pretty; transition: color var(--dur-base) var(--ease-out); }
.kit-feeditem:hover .kit-feeditem__title { color: var(--brand); }
.kit-feeditem__dek { font-family: var(--font-serif); font-size: 15px; line-height: 1.45; color: var(--text-secondary); margin: 8px 0 0; }
.kit-feeditem__media { aspect-ratio: 16 / 11; background: var(--surface-3); overflow: hidden; position: relative; }
.kit-feeditem:hover .kit-feeditem__media img { transform: scale(1.05); }
.kit-loadmore { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 38px 0 6px; }
.kit-archive { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); text-align: center; line-height: 1.7; }

/* ---------- Article reader ---------- */
.kit-reader { max-width: 760px; margin: 0 auto; }
.kit-reader__back { margin-bottom: 22px; }
.kit-reader__title { font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 1.0; letter-spacing: -0.04em; margin: 14px 0 0; text-wrap: balance; }
.kit-reader__dek { font-family: var(--font-sans); font-size: 22px; line-height: 1.35; color: var(--text-secondary); margin: 18px 0 0; font-weight: 500; }
.kit-reader__byline { display: flex; align-items: center; gap: 12px; margin: 26px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.kit-reader__byline .who { font-weight: 700; font-size: 14px; }
.kit-reader__byline .sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.kit-reader__cover { aspect-ratio: 16 / 9; height: auto; margin: 0 0 30px; }
.kit-reader__body p { font-family: var(--font-serif); font-size: 19px; line-height: var(--lh-read); color: var(--text); margin: 0 0 22px; }
.kit-reader__body > p:first-of-type::first-letter { font-weight: inherit; font-size: inherit; float: none; color: inherit; }
.kit-reader__body > p:last-of-type::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: baseline; background: var(--signal); }
.kit-reader.te .kit-reader__body p, .kit-reader.te .kit-reader__title, .kit-reader.te .kit-reader__dek { font-family: var(--font-read); }
.kit-reader.te .kit-reader__dek { font-style: normal; }
.kit-reader.te .kit-reader__body > p:first-of-type::first-letter { font-family: var(--font-read); }

/* "So What!?" AI summary box — the signature teal panel */
.kit-tldr { background: var(--teal-700); color: #fff; padding: 26px 28px; margin: 6px 0 32px; position: relative; border-top: 5px solid var(--mint-400); }
.kit-tldr__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--mint-400); margin-bottom: 16px; }
.kit-tldr ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.kit-tldr li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.92); }
.kit-tldr li::before { content: ""; width: 9px; height: 9px; margin-top: 7px; background: var(--mint-400); flex: none; }
.kit-readbar { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; }

/* ---------- Rasa mood card ---------- */
.kit-mood { display: flex; align-items: center; gap: 18px; margin: 24px 0 4px; padding: 14px 18px 14px 14px; background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--brand); }
.kit-mood__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.kit-mood__name { font-family: var(--font-display); font-weight: 900; font-size: 23px; letter-spacing: -0.02em; margin-top: 4px; }
.kit-mood__name span { color: var(--text-secondary); font-weight: 700; font-size: 16px; }
.kit-mood__hint { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

/* ---------- Admin / Compose ---------- */
.kit-admin { display: grid; grid-template-columns: 1fr 320px; gap: 36px; max-width: 1000px; margin: 0 auto; align-items: start; }
.kit-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.kit-field > span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.kit-field input, .kit-field textarea, .kit-field select { font-family: var(--font-sans); font-size: 15px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 14px; outline: none; resize: vertical; transition: border-color var(--dur-base) var(--ease-out); }
.kit-field input:focus, .kit-field textarea:focus, .kit-field select:focus { border-color: var(--brand); }
.kit-field input::placeholder, .kit-field textarea::placeholder { color: var(--text-muted); }
.kit-rasapick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.kit-rasaopt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: var(--radius-sm); border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.kit-rasaopt:hover { border-color: var(--rule); }
.kit-rasaopt--on { border-color: var(--brand); background: var(--brand-subtle); }
.kit-rasaopt span { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.kit-admin__preview { position: sticky; top: 140px; }
.kit-hint { display: block; font-size: 12px; color: var(--brand); margin-top: 7px; line-height: 1.4; }
.kit-filebox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kit-filebox input[type="file"] { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; flex: 1; min-width: 0; }
.kit-filebox input[type="file"]::file-selector-button { font-family: var(--font-sans); font-weight: 700; font-size: 12px; color: var(--on-brand); background: var(--brand); border: 0; border-radius: var(--radius-pill); padding: 6px 14px; margin-right: 12px; cursor: pointer; }
.kit-filebox__chip { position: relative; width: 64px; height: 48px; border-radius: var(--radius-xs); overflow: hidden; flex: none; border: 1px solid var(--border); }
.kit-filebox__chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-filebox__chip button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
@media (max-width: 900px) { .kit-admin { grid-template-columns: 1fr; } .kit-admin__preview { display: none; } .kit-rasapick { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Ask / AI panel ---------- */
.kit-ask { background: var(--surface); border: 1px solid var(--border-strong); padding: 20px; }
.kit-ask--inline { margin: 32px 0; }
.kit-ask__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.kit-ask__title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.kit-ask__sub { font-size: 12.5px; color: var(--text-muted); }
.kit-aibadge { width: 34px; height: 34px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.kit-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-strong); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; transition: all var(--dur-base) var(--ease-out); }
.kit-chip:hover { border-color: var(--brand); color: var(--brand); }
.kit-chips { display: flex; flex-direction: column; gap: 8px; }
.kit-bubble { padding: 13px 16px; border-radius: var(--radius-md); font-size: 14.5px; line-height: 1.55; max-width: 88%; }
.kit-bubble--user { background: var(--rule); color: var(--surface); align-self: flex-end; border-bottom-right-radius: 4px; }
.kit-bubble--ai { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); border-bottom-left-radius: 4px; }
.kit-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.kit-askbar { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 5px 6px 5px 16px; }
.kit-askbar:focus-within { border-color: var(--brand); }
.kit-askbar input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--font-sans); font-size: 14.5px; color: var(--text); }
.kit-askbar input::placeholder { color: var(--text-muted); }
.kit-sendbtn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }

/* ---------- Quick Stories / Reel player (vertical overlays) ---------- */
.kit-stories { position: fixed; inset: 0; z-index: 60; background: var(--overlay); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; }
.kit-story { position: relative; width: min(420px, 92vw); height: min(760px, 88vh); border-radius: var(--radius-xl); overflow: hidden; background: var(--ink-950); color: #fff; box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.kit-story__bg { position: absolute; inset: 0; }
.kit-story__progress { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 5; display: flex; gap: 5px; }
.kit-story__track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.kit-story__fill { height: 100%; background: #fff; border-radius: 2px; }
.kit-story__top { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 30px 18px 0; }
.kit-story__content { position: relative; z-index: 5; margin-top: auto; padding: 24px; }
.kit-story__kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.92; }
.kit-story__title { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 1.04; letter-spacing: -0.03em; margin: 10px 0; text-wrap: balance; }
.kit-story__line { font-family: var(--font-serif); font-size: 17px; line-height: 1.5; opacity: 0.94; }
.kit-story__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,7,0.94) 8%, rgba(10,9,7,0.2) 55%, rgba(10,9,7,0.5)); }
.kit-story__ask { position: relative; z-index: 5; margin: 16px 24px 22px; }
.kit-story__close { position: absolute; top: 26px; right: 18px; z-index: 10; }
.kit-story__topic { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-pill); padding: 5px 6px 5px 11px; color: #fff; }
.kit-story__topic select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; outline: none; cursor: pointer; padding-right: 4px; max-width: 130px; }
.kit-story__topic option { color: #111; }
.kit-story__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.32); background: rgba(0,0,0,0.34); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background var(--dur-base) var(--ease-out); }
.kit-story__nav:hover { background: rgba(0,0,0,0.55); }
.kit-story__nav--prev { left: 10px; }
.kit-story__nav--next { right: 10px; }
.kit-reelplay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.kit-reelplay__btn { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.5); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: opacity var(--dur-base) var(--ease-out); }
.kit-reelrail { position: absolute; right: 14px; bottom: 150px; z-index: 6; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.kit-reelrail button { display: flex; flex-direction: column; align-items: center; gap: 3px; background: transparent; border: 0; color: #fff; cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }
.kit-reelrail__ico { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background var(--dur-base) var(--ease-out); }
.kit-reelrail button:hover .kit-reelrail__ico { background: rgba(255,255,255,0.3); }
.kit-reelrail__ico--on { background: var(--brand); border-color: var(--brand); }
.kit-reel__handle { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.95; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Reel Corner grid ---------- */
.kit-reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px; }
.kit-reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; cursor: pointer; color: #fff; border: 1px solid var(--border); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); flex: none; }
.kit-rail2 .kit-reel { width: 210px; }
.kit-reel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.kit-reel__bg { position: absolute; inset: 0; }
.kit-reel__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,7,0.9) 4%, rgba(10,9,7,0.05) 48%, rgba(10,9,7,0.42)); }
.kit-reel__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); z-index: 3; transition: transform var(--dur-base) var(--ease-out); }
.kit-reel:hover .kit-reel__play { transform: translate(-50%, -50%) scale(1.08); }
.kit-reel__top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.kit-reel__dur { font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: rgba(10,9,7,0.55); padding: 3px 7px; border-radius: var(--radius-xs); backdrop-filter: blur(3px); }
.kit-reel__body { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 3; }
.kit-reel__kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.kit-reel__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: pretty; }
.kit-reel__meta { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; opacity: 0.9; margin-top: 9px; }

/* ---------- iPod Cover Flow carousel ---------- */
.kit-coverflow { position: relative; perspective: 1400px; height: 400px; overflow: hidden; background: linear-gradient(180deg, #061E1A 0%, #0A2E29 55%, var(--teal-700) 100%); border-radius: var(--radius-md); margin-bottom: 0; }
.kit-coverflow--full { height: 520px; border-radius: 0; margin: 0 -32px; }
.kit-coverflow__stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.kit-cfitem { position: absolute; top: 50%; left: 50%; width: 240px; height: 280px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.55); backface-visibility: hidden; cursor: pointer; }
.kit-cfitem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-cfitem__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); }
.kit-cfitem--center { box-shadow: 0 16px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1); }
.kit-cfitem__reflect { position: absolute; top: 100%; left: 0; right: 0; height: 100%; overflow: hidden; pointer-events: none; transform: scaleY(-1); opacity: 0.2; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 60%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 60%); }
.kit-cfitem__reflect img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-cfitem__reflect-ph { width: 100%; height: 100%; }
.kit-coverflow__cap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #fff; z-index: 20; pointer-events: none; }
.kit-coverflow__essay { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-400); }
.kit-coverflow__title { font-family: var(--font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.03em; margin: 6px 0 4px; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.kit-coverflow__credit { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); }
.kit-coverflow__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); transition: background var(--dur-base) var(--ease-out); }
.kit-coverflow__nav:hover { background: rgba(0,0,0,0.6); }
.kit-coverflow__nav--prev { left: 16px; }
.kit-coverflow__nav--next { right: 16px; }
.kit-coverflow__dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 20; }
.kit-coverflow__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); border: 0; padding: 0; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.kit-coverflow__dot--on { background: #fff; }

/* ---------- Gallery (masonry fallback kept for reference) ---------- */
.kit-gallery { columns: 3 280px; column-gap: 20px; }
.kit-galitem { break-inside: avoid; margin-bottom: 20px; position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--border); background: var(--surface-3); }
.kit-galitem__img { display: block; width: 100%; height: auto; }
.kit-galitem__ph { position: relative; }
.kit-galitem__phbox { width: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); }
.kit-galitem__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,7,0.86) 2%, rgba(10,9,7,0) 46%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.kit-galitem:hover .kit-galitem__scrim { opacity: 1; }
.kit-galitem__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; transform: translateY(8px); opacity: 0; transition: all var(--dur-base) var(--ease-out); }
.kit-galitem:hover .kit-galitem__cap { transform: translateY(0); opacity: 1; }
.kit-galitem__essay { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint-400); }
.kit-galitem__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.12; letter-spacing: -0.02em; margin: 6px 0 0; }
.kit-galitem__zoom { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(10,9,7,0.5); border: 1px solid rgba(255,255,255,0.3); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.kit-galitem:hover .kit-galitem__zoom { opacity: 1; }
.kit-galitem__credit { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #fff; background: rgba(10,9,7,0.5); padding: 3px 7px; border-radius: var(--radius-xs); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.kit-galitem:hover .kit-galitem__credit { opacity: 1; }
.kit-rail2 .kit-galitem { width: 260px; flex: none; margin-bottom: 0; }

/* Lightbox */
.kit-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(8,7,6,0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.kit-lightbox__frame { max-width: min(900px, 92vw); display: flex; flex-direction: column; align-items: center; }
.kit-lightbox__img { max-width: 100%; max-height: 64vh; display: block; box-shadow: var(--shadow-xl); }
.kit-lightbox__ph { width: min(720px, 88vw); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); }
.kit-lightbox__cap { max-width: min(720px, 88vw); text-align: center; margin-top: 22px; color: #fff; }
.kit-lightbox__essay { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint-400); }
.kit-lightbox__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -0.03em; margin: 8px 0 6px; }
.kit-lightbox__text { font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.kit-lightbox__credit { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 12px; }
.kit-lightbox__close { position: absolute; top: 22px; right: 22px; color: #fff; }
.kit-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.kit-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.kit-lightbox__nav--prev { left: 22px; }
.kit-lightbox__nav--next { right: 22px; }

/* ---------- Onboarding ---------- */
.kit-onb { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg); }
.kit-onb__card { width: min(560px, 100%); text-align: center; }
.kit-onb__title { font-family: var(--font-display); font-weight: 900; font-size: 46px; line-height: 1.0; letter-spacing: -0.04em; margin: 28px 0 12px; text-wrap: balance; }
.kit-onb__sub { color: var(--text-secondary); font-size: 17px; line-height: 1.5; margin-bottom: 34px; }
.kit-langpick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
.kit-langcard { padding: 22px; border-radius: var(--radius-md); border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; text-align: left; transition: all var(--dur-base) var(--ease-out); }
.kit-langcard:hover { border-color: var(--rule); }
.kit-langcard--on { border-color: var(--brand); background: var(--brand-subtle); }
.kit-langcard__big { font-family: var(--font-display); font-weight: 900; font-size: 27px; letter-spacing: -0.02em; }
.kit-langcard__small { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.kit-interest { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; }

/* ---------- Search ---------- */
.kit-searchhero { max-width: 720px; margin: 10px auto 0; }
.kit-searchbig { font-size: 18px; height: 58px; border-radius: var(--radius-sm); }
.kit-trend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kit-empty { text-align: center; color: var(--text-muted); padding: 60px 0; }
.kit-savedhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }

/* ---------- Motion: scroll-reveal ---------- */
.kit-reveal { opacity: 0; transform: translateY(16px); }
.kit-reveal.kit-in { opacity: 1; transform: translateY(0); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .kit-reveal, .kit-reveal.kit-in { opacity: 1; transform: none; transition: none; } }

/* ---------- Footer app badges + hashtag reels ---------- */
.kit-footer__apps { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.kit-storebtn { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid rgba(255,255,255,0.35); color: #fff; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.kit-storebtn:hover { border-color: var(--mint-400); background: rgba(255,255,255,0.06); }
.kit-storebtn span { display: flex; flex-direction: column; font-family: var(--font-sans); font-weight: 800; font-size: 15px; line-height: 1.1; }
.kit-storebtn small { font-family: var(--font-mono); font-weight: 400; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

.kit-hbar { border: 1px solid var(--border-strong); border-top: 4px solid var(--brand); padding: 16px 18px; margin-bottom: 24px; }
.kit-hbar__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kit-hbar__lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.kit-hbar__lbl svg { color: var(--brand); }
.kit-hbar__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.kit-hpill { font-family: var(--font-mono); font-weight: 700; font-size: 12px; padding: 6px 12px; border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.kit-hpill:hover { border-color: var(--rule); color: var(--text); }
.kit-hpill--on { background: var(--rule); border-color: var(--rule); color: var(--surface); }
.kit-hbar__add { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.kit-hbar__hash { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--text-muted); }
.kit-hbar__add input { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); padding: 9px 12px; outline: none; }
.kit-hbar__add input:focus { border-color: var(--brand); }

.kit-livereels { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.kit-livereels__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kit-livereels__tag { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--brand); }
.kit-ytwrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink-1000); overflow: hidden; }
.kit-ytwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kit-livereels__side { display: flex; flex-direction: column; gap: 14px; }
.kit-platcard { border: 1px solid var(--border-strong); padding: 16px; }
.kit-platcard__h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.kit-platcard__h svg { color: var(--brand); }
.kit-platcard p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 10px 0 14px; }
@media (max-width: 860px) { .kit-livereels { grid-template-columns: 1fr; } }

/* ---------- Gallery folders + cover-flow download ---------- */
.kit-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 26px; }
.kit-folder { cursor: pointer; }
.kit-folder__stack { position: relative; aspect-ratio: 4 / 3; box-shadow: 9px 9px 0 var(--surface-3), 18px 18px 0 var(--surface-2); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.kit-folder:hover .kit-folder__stack { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--surface-3), 24px 24px 0 var(--border-strong); }
.kit-folder__img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
.kit-folder__badge { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--font-mono); font-weight: 700; font-size: 12px; background: var(--teal-700); color: #fff; padding: 4px 9px; }
.kit-folder__meta { margin-top: 26px; }
.kit-folder__essay { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; line-height: 1.1; }
.kit-folder:hover .kit-folder__essay { color: var(--teal-700); }
.kit-folder__open { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 7px; }
.kit-coverflow__dl { display: inline-flex; align-items: center; margin-top: 14px; font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--mint-400); color: var(--ink-900); padding: 9px 16px; cursor: pointer; text-decoration: none; }
.kit-coverflow__dl:hover { background: var(--mint-300); text-decoration: none; }

/* ---------- Admin gate modal ---------- */
.kit-gate { position: relative; width: min(420px, 92vw); margin-top: 12vh; background: var(--surface); border-top: 6px solid var(--mint-400); padding: 34px 34px 32px; box-shadow: var(--shadow-xl); }
.kit-gate__mark { margin-bottom: 18px; }
.kit-gate__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -0.03em; margin: 0 0 8px; }
.kit-gate__sub { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 18px; }
.kit-gate__input { width: 100%; font-family: var(--font-sans); font-size: 16px; color: var(--text); background: var(--surface-2); border: 1.5px solid var(--border-strong); padding: 12px 14px; outline: none; }
.kit-gate__input:focus { border-color: var(--teal-700); }
.kit-gate__input--err { border-color: var(--live); }
.kit-gate__err { color: var(--live); font-size: 13px; margin-top: 8px; }

/* ---------- Editorial Studio ---------- */
.kit-studio__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 3px solid var(--rule); margin-bottom: 22px; flex-wrap: wrap; }
.kit-studio__tabs { display: inline-flex; border: 1.5px solid var(--rule); }
.kit-stab { font-family: var(--font-sans); font-weight: 800; font-size: 13px; padding: 10px 18px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.kit-stab + .kit-stab { border-left: 1.5px solid var(--rule); }
.kit-stab--on { background: var(--rule); color: var(--surface); }
.kit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.kit-stat { border: 1px solid var(--border-strong); border-top: 4px solid var(--teal-700); padding: 18px 20px; }
.kit-stat__n { font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: -0.03em; line-height: 1; }
.kit-stat__l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
.kit-studiobar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.kit-studiobar .ila-input { border-radius: 0; }
.kit-studiosel { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); padding: 11px 14px; outline: none; cursor: pointer; }
.kit-table { border-top: 2px solid var(--rule); }
.kit-table__head { display: grid; grid-template-columns: 1fr 140px 110px 150px; gap: 12px; padding: 12px 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.kit-trow { display: grid; grid-template-columns: 1fr 140px 110px 150px; gap: 12px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--border); }
.kit-trow__h { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.kit-trow__sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kit-trow__sect { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--text-secondary); }
.kit-status { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; }
.kit-status--published { background: var(--mint-300); color: var(--teal-700); }
.kit-status--draft { background: var(--surface-3); color: var(--text-muted); }
.kit-tag { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; }
.kit-tag--feat { color: var(--orange-500); }
.kit-trow__acts { display: flex; gap: 6px; justify-content: flex-end; }
.kit-iact { width: 34px; height: 34px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
.kit-iact:hover { border-color: var(--rule); color: var(--text); }
.kit-iact--on { background: var(--teal-700); border-color: var(--teal-700); color: var(--mint-400); }
.kit-iact--del:hover { border-color: var(--live); color: var(--live); }
.kit-fieldrow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kit-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); }
.kit-toggle input { width: 18px; height: 18px; accent-color: var(--teal-700); cursor: pointer; }
@media (max-width: 720px) {
  .kit-stats { grid-template-columns: 1fr 1fr; }
  .kit-table__head { display: none; }
  .kit-trow { grid-template-columns: 1fr; gap: 8px; }
  .kit-trow__acts { justify-content: flex-start; }
  .kit-fieldrow2 { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.kit-footer { background: var(--ink-1000); color: #fff; margin-top: 70px; }
.kit-footer__inner { max-width: var(--container-max, 1280px); margin: 0 auto; padding: 64px 32px 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.kit-footer__word { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 0.9; letter-spacing: -0.04em; color: #fff; }
.kit-footer__word b { color: var(--mint-400); }
.kit-footer__copy { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 28px; letter-spacing: 0.04em; }
.kit-footer__social { display: flex; gap: 12px; margin-top: 18px; }
.kit-footer__social a { width: 34px; height: 34px; background: rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.kit-footer__social a:hover { background: var(--mint-400); color: var(--ink-1000); }
.kit-footcol h4 { font-family: var(--font-sans); font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 16px; }
.kit-footcol a { display: block; font-family: var(--font-sans); font-weight: 500; font-size: 16px; color: #fff; padding: 7px 0; cursor: pointer; transition: color var(--dur-base) var(--ease-out); }
.kit-footcol a:hover { color: var(--mint-400); }
@media (max-width: 720px) { .kit-footer__inner { grid-template-columns: 1fr 1fr; } .kit-footer__word { grid-column: 1 / -1; font-size: 34px; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .kit-hero { grid-template-columns: 1fr; }
  .kit-featured { grid-template-columns: 1fr; }
  .kit-bigstory { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 26px; margin-bottom: 8px; }
  .kit-seclist { padding-left: 0; padding-top: 18px; }
  .kit-section--block { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 720px) {
  .kit-page, .kit-main { padding: 22px 18px 80px; }
  .kit-mast__bar { padding: 12px 18px 10px; gap: 10px; flex-wrap: wrap; }
  .kit-mast__util { display: none; }
  .kit-mast__search { display: none; }
  .kit-hero { padding: 24px 18px 30px; }
  .kit-hero__title { font-size: 30px; }
  .kit-topics__row { padding: 0 18px; }
  .kit-section__title, .kit-sectiontitle { font-size: 28px; }
  .kit-reader__title { font-size: 32px; }
  .kit-feeditem { grid-template-columns: 1fr; }
  .kit-feeditem__num, .kit-feeditem__media { display: none; }
  .kit-gallery { columns: 2 150px; }
  .kit-promo { grid-template-columns: 1fr; }
}

/* ---------- Studio · Live sources (per-topic Google News) ---------- */
.kit-livebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg); margin-bottom: 16px; }
.kit-livebar__info { display: flex; flex-direction: column; gap: 6px; }
.kit-livebar__meta { font-size: 12.5px; color: var(--text-secondary); }
.kit-livebar__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.kit-livegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kit-livecard { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 16px 16px 14px; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.kit-livecard--on { border-color: color-mix(in oklab, var(--live) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--live) 18%, transparent) inset; }
.kit-livecard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kit-livecard__name { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--text); }
.kit-livecard__status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; min-height: 22px; }
.kit-livecard__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--live); }
.kit-livecard__studio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.kit-livecard__status .kit-iact { width: 28px; height: 28px; }
.kit-srcswitch { position: relative; width: 44px; height: 26px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-3); cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); flex: none; padding: 0; }
.kit-srcswitch--on { background: var(--live); border-color: var(--live); }
.kit-srcswitch__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--ease-spring) var(--dur-base); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.kit-srcswitch--on .kit-srcswitch__knob { transform: translateX(18px); }

.kit-fetching { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin: 6px 0 18px; }