/* /collection/ public showcase. Layout follows titogvault.com; theme = Spare Room site vars. 2026-10-17 */
.cv-page { background: var(--bg, #0b0306); color: var(--ink, #f3e9e9); overflow-x: hidden; }
.cv-page .cv-main .wrap { max-width: 96rem; }
.cv-main { padding-bottom: 3rem; min-height: 70vh; }
.cv-main *, .cv-modal * { box-sizing: border-box; }
:where(.cv-main, .cv-modal) button { font-family: inherit; line-height: 1.2; cursor: pointer; }

/* hero */
.cv-hero { text-align: center; padding-top: 1.6rem; padding-bottom: .4rem; }
.cv-kicker { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--mute, #b9a3a5); }
.cv-title { margin: 0; font-size: clamp(1.9rem, 8vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; }
.cv-title span { color: var(--red2, #e0242c); text-shadow: 0 0 18px rgba(224, 36, 44, .45); }
.cv-status { display: inline-flex; align-items: center; gap: .5rem; margin: .8rem 0 0; padding: .32rem .8rem; border: 1px solid var(--line, #7a0f15); border-radius: 999px; background: var(--raised, #2a070b); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.cv-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--red2); box-shadow: 0 0 8px var(--red2); animation: cvPulse 2s infinite; }
@keyframes cvPulse { 50% { opacity: .35; } }

/* section tabs (Tito: COLLECTION / STATS nav) */
.cv-tabs { display: flex; gap: .5rem; justify-content: center; margin-top: 1.1rem; margin-bottom: 1rem; }
.cv-tab { flex: 1 1 0; max-width: 12rem; padding: .62rem .5rem; border: 2px solid var(--line); border-radius: var(--radius, 10px); background: var(--card, #160609); color: var(--mute); font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.cv-tab.is-on { background: var(--red, #c8141e); border-color: var(--red2); color: #fff; box-shadow: 0 0 16px rgba(200, 20, 30, .35); }

/* ALL / BOX SETS toggle bar */
.cv-toggle { display: flex; border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: .75rem; }
.cv-tbtn { flex: 1 1 0; padding: .6rem .4rem; border: 0; background: var(--card); color: var(--mute); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.cv-tbtn + .cv-tbtn { border-left: 2px solid var(--line); }
.cv-tbtn.is-on { background: var(--raised); color: var(--ink); box-shadow: inset 0 -3px 0 var(--red2); }

/* filter panel */
.cv-filters { border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: 1rem; }
.cv-ftoggle { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .72rem .9rem; border: 0; background: none; color: var(--ink); font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; text-align: left; }
.cv-ftoggle > span:first-child { flex: 1; }
.cv-fbadge { min-width: 1.35rem; padding: .08rem .38rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .68rem; letter-spacing: 0; text-align: center; }
.cv-caret { transition: transform .2s; color: var(--mute); }
.cv-ftoggle[aria-expanded="true"] .cv-caret { transform: rotate(180deg); }
.cv-fbody { display: none; padding: 0 .75rem .8rem; }
.cv-filters.is-open .cv-fbody { display: block; }
.cv-frow { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cv-frow[hidden] { display: none; }
.cv-search { grid-column: 1 / -1; }
.cv-field { position: relative; display: block; min-width: 0; }
.cv-field input, .cv-field select, .cv-msbtn {
  width: 100%; min-width: 0; height: 2.6rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: 600 .8rem/1 var(--font-sans, Montserrat, system-ui, sans-serif); text-overflow: ellipsis;
}
.cv-field input { font-size: 16px; } /* no iOS zoom */
.cv-field select { appearance: none; -webkit-appearance: none; padding-right: 1.7rem; white-space: nowrap; overflow: hidden;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.cv-field select.is-set, .cv-msbtn.is-set { border-color: var(--red2); box-shadow: 0 0 0 1px var(--red2) inset; }
.cv-field input:focus, .cv-field select:focus, .cv-msbtn:focus-visible { outline: 2px solid var(--red2); outline-offset: 1px; }
.cv-msbtn { text-align: left; white-space: nowrap; overflow: hidden; padding-right: 1.7rem; position: relative; }
.cv-msbtn::after { content: "\25BE"; position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--mute); }
.cv-mspanel { position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); width: min(20rem, calc(100vw - 2rem)); max-height: min(22rem, 60vh); display: flex; flex-direction: column;
  border: 2px solid var(--red); border-radius: var(--radius); background: var(--bg2, #1a0508); box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.cv-mspanel[hidden] { display: none; }
.cv-mshead { display: flex; align-items: center; gap: .4rem; padding: .5rem; border-bottom: 1px solid var(--line); }
.cv-msmode { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-right: auto; }
.cv-msmode button { border: 0; background: none; color: var(--mute); padding: .3rem .6rem; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cv-msmode button.is-on { background: var(--red); color: #fff; }
.cv-mslink { border: 0; background: none; color: var(--mute); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .4rem; }
.cv-msdone { color: var(--red2); }
.cv-mslist { overflow-y: auto; padding: .3rem; overscroll-behavior: contain; }
.cv-mslist label { display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: 6px; font-size: .82rem; font-weight: 600; }
.cv-mslist label:hover { background: var(--raised); }
.cv-mslist input { accent-color: var(--red); width: 1rem; height: 1rem; }
.cv-mslist small { margin-left: auto; color: var(--faint, #8f7779); font-size: .7rem; }
.cv-more { display: block; width: 100%; margin: .55rem 0; padding: .5rem; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--mute); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.cv-more[aria-expanded="true"] { color: var(--ink); border-style: solid; }
.cv-frow-more { margin-bottom: .55rem; }
.cv-fbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.cv-clear { border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); padding: .45rem .7rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cv-count { margin: 0; color: var(--mute); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* poster grid ("tapes") */
.cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .7rem; }
.cv-card { display: flex; flex-direction: column; min-width: 0; border: 0; padding: 0; background: none; color: inherit; text-align: left; text-decoration: none; }
.cv-pwrap { position: relative; aspect-ratio: 2 / 3; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, var(--raised), var(--bg)); transition: transform .15s, border-color .15s, box-shadow .15s; }
.cv-card:hover .cv-pwrap, .cv-card:focus-visible .cv-pwrap { border-color: var(--red2); box-shadow: 0 0 18px rgba(224, 36, 44, .35); transform: translateY(-2px); }
.cv-card:focus-visible { outline: none; }
.cv-pwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-noposter { position: absolute; inset: 0; display: grid; place-items: center; padding: .6rem; text-align: center; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.cv-fmt { position: absolute; top: .35rem; right: .35rem; padding: .16rem .38rem; border-radius: 4px; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #333; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.cv-fmt.f-4k { background: #111; color: #f5c518; border: 1px solid #f5c518; }
.cv-fmt.f-bd { background: #0a5bd3; }
.cv-fmt.f-dvd { background: var(--red); }
.cv-fmt.f-hd { background: #6b2fa3; }
.cv-fmt.f-oth { background: #4a3a3b; }
.cv-eds { position: absolute; top: .35rem; left: .35rem; padding: .16rem .38rem; border-radius: 4px; background: rgba(11, 3, 6, .85); border: 1px solid var(--red2); color: var(--ink); font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cv-pfoot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 1.4rem .35rem .3rem; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font-size: .7rem; font-weight: 800; pointer-events: none; }
.cv-seen { color: #fff; background: var(--red); border-radius: 50%; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; font-size: .66rem; }
.cv-stars { color: #f5c518; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
.cv-gem { color: var(--red2); }
.cv-label { padding: .45rem .1rem 0; min-width: 0; }
.cv-ctitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: .82rem; font-weight: 700; line-height: 1.22; }
.cv-ctitle small { color: var(--faint); font-weight: 600; }
.cv-cmeta { margin: .2rem 0 0; color: var(--mute); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-settag { display: inline-block; max-width: 100%; margin-top: .3rem; padding: .14rem .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--raised); color: var(--ink); font-size: .6rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.cv-settag:hover { border-color: var(--red2); }
.cv-sentinel { height: 1px; }
.cv-empty { text-align: center; color: var(--mute); padding: 2.5rem 1rem; font-weight: 700; }
.cv-skel .cv-pwrap { animation: cvPulse 1.4s infinite; }

/* box sets view */
.cv-sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.cv-sethead { margin: 0 0 .2rem; color: var(--mute); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; grid-column: 1 / -1; }
.cv-set { border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.cv-set.is-open { border-color: var(--red); grid-column: 1 / -1; }
.cv-setbtn { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .65rem; border: 0; background: none; color: inherit; text-align: left; }
.cv-setthumbs { position: relative; flex: none; width: 3.6rem; height: 5.1rem; }
.cv-setthumbs img, .cv-setthumbs span { position: absolute; width: 3.2rem; height: 4.8rem; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); background: var(--raised); }
.cv-setthumbs > :nth-child(2) { left: .4rem; top: .3rem; z-index: -0; }
.cv-setthumbs > :first-child { z-index: 1; }
.cv-setinfo { flex: 1; min-width: 0; }
.cv-setlbl { display: inline-block; padding: .1rem .35rem; border-radius: 3px; background: var(--red); color: #fff; font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cv-setname { margin: .3rem 0 .15rem; font-size: .9rem; font-weight: 800; line-height: 1.2; }
.cv-setmeta { margin: 0; color: var(--mute); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cv-setcaret { color: var(--mute); transition: transform .2s; }
.cv-set.is-open .cv-setcaret { transform: rotate(180deg); }
.cv-setgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem .55rem; padding: 0 .65rem .8rem; }
.cv-setgrid[hidden] { display: none; }
.cv-setgrid .cv-ctitle { font-size: .72rem; }

/* stats */
.cv-h2 { margin: .2rem 0 .9rem; text-align: center; font-size: .9rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.cv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cv-tile { padding: .85rem .7rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); text-align: center; min-width: 0; }
.cv-tile b { display: block; font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1.1; overflow-wrap: anywhere; }
.cv-tile span { display: block; margin-top: .3rem; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.cv-tile small { display: block; margin-top: .2rem; font-size: .66rem; color: var(--faint); font-weight: 600; }
.cv-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.cv-panel { padding: .9rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; }
.cv-panel h3 { margin: 0 0 .7rem; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.cv-donutwrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cv-donut { flex: none; width: 8.5rem; height: 8.5rem; border-radius: 50%; position: relative; }
.cv-donut::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--card); }
.cv-legend { flex: 1; min-width: 9rem; margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.cv-legend button { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; color: var(--ink); padding: .15rem 0; font-size: .78rem; font-weight: 600; text-align: left; }
.cv-legend i { width: .7rem; height: .7rem; border-radius: 2px; flex: none; }
.cv-legend em { margin-left: auto; font-style: normal; color: var(--mute); font-weight: 700; }
.cv-bars { display: grid; gap: .38rem; }
.cv-bar { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; color: var(--ink); padding: .1rem 0; font-size: .74rem; font-weight: 600; text-align: left; }
.cv-bar > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-bar i { display: block; height: .62rem; border-radius: 3px; background: linear-gradient(90deg, var(--red), var(--red2)); min-width: 2px; }
.cv-bar em { font-style: normal; color: var(--mute); font-weight: 700; font-size: .7rem; }
button.cv-bar:hover > span:first-child, .cv-legend button:hover { color: var(--red2); }
.cv-mini { display: flex; gap: .7rem; align-items: center; width: 100%; border: 0; background: none; color: var(--ink); padding: .3rem 0; text-align: left; }
.cv-mini img, .cv-mini span.ph { width: 2.4rem; height: 3.6rem; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex: none; background: var(--raised); }
.cv-mini b { display: block; font-size: .8rem; }
.cv-mini small { color: var(--mute); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* detail modal */
.cv-modal { width: min(46rem, 100vw); max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); inset: 0; }
.cv-modal::backdrop { background: rgba(5, 1, 2, .82); backdrop-filter: blur(3px); }
.cv-mbox { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--bg2); border: 0; }
.cv-mclose { position: sticky; top: .6rem; float: right; margin: .6rem .6rem 0 0; z-index: 3; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--line); background: rgba(11, 3, 6, .9); color: var(--ink); font-size: 1rem; font-weight: 800; }
.cv-mclose:hover { border-color: var(--red2); }
.cv-mbody { padding: 0 0 2rem; }
.cv-mhero { position: relative; padding: 1rem 1rem 0; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.cv-mhero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 11rem; background: var(--bd, none) center/cover; opacity: .28; mask-image: linear-gradient(#000, transparent); -webkit-mask-image: linear-gradient(#000, transparent); }
.cv-mposter { position: relative; width: 100%; aspect-ratio: 2/3; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--raised); }
.cv-mposter img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-mhead { position: relative; min-width: 0; padding-top: 2.4rem; }
.cv-mtitle { margin: 0; font-size: 1.3rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.cv-mtitle small { color: var(--mute); font-weight: 600; font-size: .9em; }
.cv-mtag { margin: .35rem 0 0; color: var(--mute); font-style: italic; font-size: .82rem; }
.cv-mfacts { margin: .5rem 0 0; color: var(--mute); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cv-mrate { margin: .45rem 0 0; font-size: .85rem; font-weight: 700; }
.cv-mactions { display: flex; flex-wrap: wrap; gap: .45rem; padding: .9rem 1rem 0; }
.cv-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .75rem; border: 2px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.cv-btn.is-red { background: var(--red); border-color: var(--red2); color: #fff; }
.cv-btn:hover { border-color: var(--red2); }
.cv-acc { margin: .8rem 1rem 0; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); }
.cv-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: .7rem .85rem; cursor: pointer; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.cv-acc > summary::-webkit-details-marker { display: none; }
.cv-acc > summary::after { content: "\25BE"; color: var(--mute); transition: transform .2s; }
.cv-acc[open] > summary::after { transform: rotate(180deg); }
.cv-accb { padding: 0 .85rem .85rem; font-size: .86rem; line-height: 1.55; }
.cv-accb p { margin: 0 0 .5rem; }
.cv-dl { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: .35rem .7rem; margin: 0; font-size: .82rem; }
.cv-dl dt { color: var(--mute); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding-top: .15rem; }
.cv-dl dd { margin: 0; overflow-wrap: anywhere; }
.cv-link { border: 0; padding: 0; background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; font: inherit; cursor: pointer; }
.cv-link:hover { color: var(--red2); }
.cv-cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .8rem; margin: 0; padding: 0; list-style: none; font-size: .82rem; }
.cv-cast small { display: block; color: var(--faint); font-size: .72rem; }
.cv-copies { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.cv-copies li { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: .8rem; }
.cv-copies b { font-weight: 800; }
.cv-copies .cv-fmt { position: static; display: inline-block; margin-right: .4rem; vertical-align: 1px; }
.cv-copies small { display: block; margin-top: .25rem; color: var(--mute); font-size: .72rem; }
.cv-views { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.cv-views li { padding: .55rem .7rem; border-left: 3px solid var(--red); background: var(--bg); border-radius: 0 8px 8px 0; font-size: .82rem; }
.cv-views .cv-vh { display: flex; justify-content: space-between; gap: .5rem; color: var(--mute); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cv-views .cv-vt { margin: .35rem 0 0; white-space: pre-line; }
.cv-trailer { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000 center/cover; border: 2px solid var(--line); }
.cv-trailer button { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .35); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cv-trailer button span { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: .4rem; border-radius: 50%; background: var(--red); font-size: 1.2rem; }
.cv-trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cv-toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; padding: .55rem .9rem; border-radius: 8px; background: var(--red); color: #fff; font-size: .78rem; font-weight: 800; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.cv-mload { padding: 4rem 1rem; text-align: center; color: var(--mute); font-weight: 700; }
body.cv-lock { overflow: hidden; }

/* ≥ 600px: tablet */
@media (min-width: 600px) {
  .cv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv-frow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv-setgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-modal { height: auto; max-height: calc(100dvh - 3rem); margin: auto; border-radius: 14px; }
  .cv-mbox { max-height: calc(100dvh - 3rem); border: 2px solid var(--red); border-radius: 14px; }
  .cv-mhero { grid-template-columns: 11rem minmax(0, 1fr); padding: 1.3rem 1.3rem 0; gap: 1.3rem; }
  .cv-mhead { padding-top: 1.2rem; }
  .cv-mtitle { font-size: 1.7rem; }
  .cv-mactions { padding: 1rem 1.3rem 0; }
  .cv-acc { margin: .8rem 1.3rem 0; }
  .cv-cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ≥ 960px: desktop. Tito-style inline filter row (always open), wide grid with more columns */
@media (min-width: 960px) {
  .cv-hero { padding-top: 2.2rem; }
  .cv-toggle { display: inline-flex; margin-bottom: .9rem; }
  .cv-tbtn { flex: none; padding: .6rem 1.6rem; }
  .cv-ftoggle { display: none; }
  .cv-fbody { display: block; padding: .8rem; }
  .cv-frow-main { grid-template-columns: minmax(14rem, 2.2fr) repeat(6, minmax(0, 1fr)); }
  .cv-search { grid-column: auto; }
  .cv-frow-more { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cv-more { display: inline-block; width: auto; padding: .45rem .9rem; margin: .6rem .5rem .6rem 0; }
  .cv-fbar { display: inline-flex; vertical-align: middle; gap: 1rem; }
  .cv-frow-more { margin-bottom: 0; }
  .cv-grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1.3rem 1rem; }
  .cv-ctitle { font-size: .86rem; }
  .cv-sets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .cv-setgrid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
  .cv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-panel.is-wide { grid-column: 1 / -1; }
  .cv-mspanel { width: 20rem; }
}
@media (min-width: 1400px) { .cv-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cv-dot, .cv-skel .cv-pwrap { animation: none; } .cv-pwrap { transition: none; } }
.cv-clink { display: block; color: inherit; text-decoration: none; }
.cv-clink:focus-visible .cv-pwrap { border-color: var(--red2); box-shadow: 0 0 0 2px var(--red2); }
.cv-clink:focus-visible { outline: none; }

/* 10/17 1 PM: watched ticker in the hero, History view, 3 top tabs, box sets inside the filter panel */
.cv-tickerslot { display: contents; } /* ticker is a full-width strip under the header, styled only by site-chrome.css like the front page */
.cv-tab { max-width: 11rem; }
#cvCollection.is-hist [data-for="c"], #cvCollection:not(.is-hist) [data-for="h"] { display: none !important; }
.cv-hist { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.cv-hist[hidden] { display: none; }
.cv-hmonth { grid-column: 1 / -1; margin: .9rem 0 .1rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.cv-hmonth:first-child { margin-top: 0; }
.cv-hrow { display: flex; gap: .75rem; align-items: flex-start; min-width: 0; padding: .55rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--card); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cv-hrow:hover, .cv-hrow:focus-visible { border-color: var(--red2); box-shadow: 0 0 14px rgba(224, 36, 44, .3); outline: none; }
.cv-hposter { position: relative; flex: none; width: 3.6rem; aspect-ratio: 2 / 3; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: linear-gradient(160deg, var(--raised), var(--bg)); }
.cv-hposter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-hposter .cv-noposter { font-size: .5rem; padding: .2rem; }
.cv-hbody { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.cv-htitle { font-size: .9rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cv-htitle small { color: var(--faint); font-weight: 600; }
.cv-hmeta { display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center; color: var(--mute); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cv-hmeta .cv-stars { font-size: .8rem; letter-spacing: .02em; }
.cv-rw { color: var(--red2); }
/* 20261022c: History per-viewing icon row under the poster. --cv-vicon-size = icon size (about one rating star). */
.cv-hist { --cv-vicon-size: 1.23rem; } /* 20261024f: icon row 1/3 bigger (was .92rem). Icons are drawn at 128px masters, so they stay sharp if this grows again. */
.cv-hleft { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: .32rem; width: 3.6rem; }
.cv-hleft .cv-hposter { width: 100%; }
.cv-vicons { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; align-items: center; gap: .2rem .22rem; line-height: 1; }
.cv-vicons { justify-content: center; } /* 20261024g: icon row centered under poster, wrapped lines too */
.cv-vi { display: block; width: var(--cv-vicon-size); height: var(--cv-vicon-size); object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
/* 20261024a: format icons (VHS logo etc.): one star tall, auto width */
.cv-vi.cv-vi-fmt { width: auto; max-width: min(calc(var(--cv-vicon-size) * 3), 100%); }
.cv-vicons .cv-rw { display: block; width: var(--cv-vicon-size); font-size: var(--cv-vicon-size); font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 1px 2px #000; }
.cv-onshelf { color: var(--ink); }
.cv-hrev { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: .15rem; padding-left: .55rem; border-left: 2px solid var(--red); color: var(--ink); font-size: .8rem; line-height: 1.45; white-space: pre-line; }
.cv-hrow.cv-skel .cv-hposter { animation: cvPulse 1.4s infinite; }
@media (min-width: 700px) { .cv-hist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .cv-hposter { width: 4.2rem; } .cv-hleft { width: 4.2rem; } }
@media (min-width: 960px) {
  .cv-frow-main { grid-template-columns: minmax(13rem, 2fr) repeat(7, minmax(0, 1fr)); }
  #cvCollection.is-hist .cv-fbar { display: flex; margin-top: .6rem; }
}
@media (min-width: 1280px) { .cv-hist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 10/17 4 PM: review accordions, filter-bar gap, Baconator overlay */
@media (max-width: 959px) { .cv-fbar { margin-top: .5rem; } } /* same gap as the filter grid */
.cv-views li { padding: 0; }
.cv-views .cv-vh { align-items: center; width: 100%; padding: .55rem .7rem; border: 0; background: none; color: var(--mute); font: inherit; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.cv-views .cv-vh > span:first-child { margin-right: auto; }
.cv-views .cv-vbtn { cursor: pointer; }
.cv-views .cv-vbtn:hover { color: var(--ink); }
.cv-arr { display: inline-block; width: .8rem; flex: none; text-align: center; color: var(--red2); transition: transform .15s; }
[aria-expanded="true"] > .cv-arr { transform: rotate(90deg); }
.cv-vbody { padding: 0 .7rem .6rem; }
.cv-vbody .cv-vt:first-child { margin-top: 0; }
.cv-castbtn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; }
.cv-castbtn:hover { color: var(--red2); }
.cv-bacon { width: min(56rem, calc(100vw - 1rem)); max-width: calc(100vw - 1rem); height: min(46rem, calc(100dvh - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 2px solid var(--red); border-radius: 14px; background: var(--bg); color: var(--ink); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); }
.cv-bacon::backdrop { background: rgba(5, 1, 2, .8); backdrop-filter: blur(2px); }
.cv-bwin { display: flex; flex-direction: column; height: 100%; }
.cv-bbar { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem .9rem; border-bottom: 1px solid var(--line); background: var(--bg2); }
.cv-btitle { flex: 1; min-width: 0; margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-bacon .cv-bclose { position: static; float: none; margin: 0; flex: none; }
.cv-bframe { flex: 1; width: 100%; border: 0; background: var(--bg); }

/* 10/17 4:28 PM: Collection rows in the History row style */
.cv-crow { cursor: pointer; }
.cv-ctl { color: inherit; text-decoration: none; }
.cv-ctl:focus-visible { outline: 2px solid var(--red2); outline-offset: 2px; border-radius: 3px; }
.cv-crow .cv-hmeta { gap: .3rem .5rem; }
.cv-crow .cv-fmt, .cv-crow .cv-eds { position: static; box-shadow: none; }
.cv-crow .cv-seen { width: 1.1rem; height: 1.1rem; font-size: .6rem; }
.cv-crow .cv-gem { letter-spacing: .08em; }
.cv-crow .cv-cgen { color: var(--faint); }
.cv-crow .cv-settag { margin-top: .1rem; max-width: 100%; }
.cv-setgrid { grid-template-columns: minmax(0, 1fr) !important; gap: .5rem; }
@media (min-width: 700px) { .cv-set.is-open .cv-setgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (min-width: 1280px) { .cv-set.is-open .cv-setgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* 10/17 4:39 PM: full-screen poster viewer (tap any poster; ✕, tap, or Esc closes) */
[data-zoom] { cursor: zoom-in; }
.cv-viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom)); border: 0; background: transparent; overflow: hidden; box-sizing: border-box; cursor: zoom-out; }
.cv-viewer[open] { display: flex; align-items: center; justify-content: center; }
.cv-viewer::backdrop { background: rgba(5, 1, 2, .94); }
.cv-viewer img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 12px 50px rgba(0, 0, 0, .7); }
.cv-viewer .cv-vclose { position: absolute; top: max(.6rem, env(safe-area-inset-top)); right: .6rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--red); background: rgba(11, 3, 6, .85); color: var(--ink); font: 700 1.1rem/1 Montserrat, system-ui, sans-serif; cursor: pointer; z-index: 1; }
.cv-viewer .cv-vclose:hover { background: var(--red); }

/* 2026-10-21a: Movies | Filters | TV quick row (narrow Filters button between two type toggles) */
.cv-qrow { display: flex; align-items: stretch; gap: .45rem; padding: .45rem; }
.cv-qrow .cv-ftoggle { width: auto; flex: 0 1 11rem; justify-content: center; margin: 0 auto; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: var(--radius); }
.cv-qrow .cv-ftoggle > span:first-child { flex: none; }
.cv-qbtn { flex: 1 1 0; min-width: 0; padding: .55rem .6rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--mute); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.cv-qbtn.is-on { background: var(--red, #c8141e); border-color: var(--red2); color: #fff; }
@media (min-width: 960px) {
  .cv-qrow { justify-content: flex-start; padding: .7rem .8rem 0; }
  .cv-qbtn { flex: none; padding: .5rem 1.4rem; }
}
/* 10/21b: cast names link to IMDb (else TMDB) in a new tab; plain text when neither */
.cv-castname { color: var(--ink); font-weight: 600; }
.cv-castlink { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red, #c8141e); text-underline-offset: 2px; }
.cv-castlink:hover, .cv-castlink:focus-visible { color: var(--red2, #fff); }
/* Crisp half star (2026-10-21c): left half = the same solid ★ glyph as the full stars (clipped),
   right half = a clean thin outline of that glyph. No background-clip, no shadow, so no dark smudge.
   Same glyph, so same size and baseline as the full stars. */
.half-star {
  position: relative;
  display: inline-block;
  color: inherit;
  background: none !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.06em currentColor;
  -webkit-text-stroke: 0.06em color-mix(in srgb, currentColor 70%, transparent);
  text-shadow: none !important;
  filter: none;
}
/* empty star (20261021d): same glyph, same thin outline as the half star's right half, no fill, no shadow */
.empty-star {
  display: inline;
  color: inherit;
  background: none !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.06em currentColor;
  -webkit-text-stroke: 0.06em color-mix(in srgb, currentColor 70%, transparent);
  text-shadow: none !important;
}
.half-star::before {
  content: '\2605';
  content: '\2605' / '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow: none;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
}
/* TV box sets: one collapsed row, tap to expand the seasons */
.cv-tvgrp { display: contents; }
.cv-tvhead { cursor: pointer; position: relative; }
.cv-tvhead .cv-setcaret { margin-left: auto; align-self: center; color: var(--mute); transition: transform .2s; }
.cv-tvgrp.is-open .cv-tvhead { border-color: var(--red); }
.cv-tvgrp.is-open .cv-tvhead .cv-setcaret { transform: rotate(180deg); }
.cv-tvhead .cv-setlbl { margin-right: .35rem; vertical-align: middle; }
.cv-tvmembers { display: contents; }
.cv-tvmembers[hidden] { display: none; }
.cv-tvmembers > .cv-hrow { margin-left: .9rem; border-style: dashed; }

/* 2026-10-21e: always-visible search bar (History + Collection) + tighter top area (more films above the fold) */
.cv-hero { padding-top: .75rem; padding-bottom: 0; }
.cv-title { line-height: 1; }
.cv-status { margin-top: .45rem; padding: .24rem .75rem; }
.cv-tabs { margin-top: .6rem; margin-bottom: .5rem; gap: .45rem; }
.cv-tab { padding: .45rem .5rem; min-height: 2.6rem; }
.cv-sbar { position: relative; margin-bottom: .5rem; }
.cv-sbar .cv-search { display: block; }
.cv-sbar .cv-field input { height: 2.6rem; padding-right: 2.7rem; }
.cv-sbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.cv-sclear { position: absolute; top: 50%; right: .2rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mute); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.cv-sclear:hover, .cv-sclear:focus-visible { color: var(--ink); background: var(--raised); outline: none; }
.cv-sclear[hidden] { display: none; }
.cv-filters { margin-bottom: .6rem; }
.cv-qrow { padding: .3rem; gap: .35rem; }
.cv-qrow .cv-ftoggle { padding: .4rem .8rem; min-height: 2.55rem; }
.cv-qbtn { padding: .4rem .6rem; min-height: 2.55rem; }
@media (min-width: 960px) {
  .cv-qrow { padding: .5rem .6rem 0; }
  .cv-qbtn { padding: .4rem 1.4rem; }
}
/* ICON KEY popup (20261024h / DS 1.22.17): tap any icon in the History icon row */
.cv-vicons [data-ik] { cursor: help; }
.cv-ikey { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom)); background: rgba(5, 1, 2, .82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-sizing: border-box; }
.cv-ikey *, .cv-ikey *::before, .cv-ikey *::after { box-sizing: border-box; }
.cv-ikey-card { --cv-vicon-size: 1.5rem; width: min(24rem, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; border: 2px solid var(--line, #7a0f15); border-radius: var(--radius, 10px); background: var(--card, #160609); color: var(--ink, #f3e9e9); box-shadow: 0 12px 50px rgba(0, 0, 0, .7), 0 0 18px rgba(200, 20, 30, .25); }
.cv-ikey-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .6rem .5rem .9rem; background: var(--card, #160609); border-bottom: 1px solid var(--line, #7a0f15); }
.cv-ikey-head h2 { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink, #f3e9e9); }
.cv-ikey-x { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--line, #7a0f15); background: rgba(11, 3, 6, .9); color: var(--ink, #f3e9e9); font-family: inherit; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer; }
.cv-ikey-x:hover, .cv-ikey-x:focus-visible { border-color: var(--red2, #e0242c); outline: none; }
.cv-ikey-list { list-style: none; margin: 0; padding: .35rem .5rem .6rem; }
.cv-ikey-row { display: flex; align-items: center; gap: .7rem; padding: .32rem .45rem; border: 1px solid transparent; border-radius: 8px; }
.cv-ikey-row.is-on { border-color: var(--red2, #e0242c); background: var(--raised, #2a070b); box-shadow: 0 0 10px rgba(224, 36, 44, .3); }
.cv-ikey-ic { flex: none; width: 3.4rem; display: flex; justify-content: center; align-items: center; }
.cv-ikey-ic .cv-vi { display: block; width: var(--cv-vicon-size); height: var(--cv-vicon-size); object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.cv-ikey-ic .cv-vi.cv-vi-fmt { width: auto; max-width: 3.4rem; }
.cv-ikey-ic .cv-rw { color: var(--red2, #e0242c); font-size: 1.4rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px #000; }
.cv-ikey-tx { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cv-ikey-tx b { font-size: .86rem; font-weight: 700; color: var(--ink, #f3e9e9); }
.cv-ikey-tx small { font-size: .72rem; line-height: 1.25; color: var(--mute, #b9a3a5); }
/* 20261028: search options button (opens the SQP panel) */
.cv-sbar .cv-field input { padding-right: 5.3rem; }
.cv-sclear { right: 2.85rem; }
.cv-sopt { position: absolute; top: 50%; right: .2rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer; }
.cv-sopt:hover, .cv-sopt:focus-visible { color: var(--ink); background: var(--raised); outline: none; }
/* SQP 20261028: search options panel (JMDB + Vault). Dark, mobile-first bottom sheet; centered card on wide screens. */
.sqp-back { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; }
.sqp { width: 100%; max-height: 88vh; overflow: auto; box-sizing: border-box; background: var(--surface, var(--card, #17171b)); color: var(--fg, var(--ink, #eee)); border: 1px solid var(--line, #333); border-radius: 14px 14px 0 0; padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.sqp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.sqp-head h2 { margin: 0; font-size: 1.1rem; }
.sqp-x { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; }
.sqp-x:hover, .sqp-x:focus-visible { background: var(--raised, #26262c); outline: none; }
.sqp-q { width: 100%; box-sizing: border-box; min-height: 2.9rem; padding: .6rem .8rem; font-size: 16px; border-radius: 10px; border: 1px solid var(--line, #333); background: var(--bg, #0d0d10); color: inherit; }
.sqp-q:focus { outline: 2px solid var(--red, #e33); outline-offset: 1px; }
.sqp-fs { border: 0; margin: .8rem 0 0; padding: 0; min-width: 0; }
.sqp-fs legend { padding: 0; margin-bottom: .35rem; font-weight: 700; font-size: .9rem; }
.sqp-fs legend small { font-weight: 400; color: var(--muted, var(--mute, #999)); }
.sqp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.sqp-ck { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 .7rem; border: 1px solid var(--line, #333); border-radius: 10px; background: var(--raised, #202026); cursor: pointer; font-size: .95rem; }
.sqp-ck input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--red, #e33); flex: none; }
.sqp-ck:has(input:checked) { border-color: var(--red, #e33); }
.sqp-prev { margin: .8rem 0 0; font-size: .85rem; color: var(--muted, var(--mute, #999)); overflow-wrap: anywhere; }
.sqp-prev code { color: var(--fg, var(--ink, #eee)); }
.sqp-note { margin: .25rem 0 0; font-size: .8rem; color: var(--muted, var(--mute, #999)); }
.sqp-note[hidden] { display: none; }
.sqp-act { display: flex; gap: .5rem; margin-top: .9rem; }
.sqp-act button { flex: 1; min-height: 2.9rem; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; border: 1px solid var(--line, #333); background: var(--raised, #26262c); color: inherit; }
.sqp-act .sqp-go { background: var(--red, #e33); border-color: var(--red, #e33); color: #fff; }
@media (min-width: 700px) { .sqp-back { align-items: center; } .sqp { max-width: 520px; border-radius: 14px; } .sqp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 20261028: icon key edit (admin) */
.cv-ikey-head h2 { flex: 1; }
.cv-ikey-ed { flex: none; min-height: 2.4rem; padding: 0 .9rem; border-radius: 999px; border: 2px solid var(--line, #7a0f15); background: rgba(11, 3, 6, .9); color: var(--ink, #f3e9e9); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.cv-ikey-ed:hover, .cv-ikey-ed:focus-visible { border-color: var(--red2, #e0242c); outline: none; }
.cv-ikey-ed[hidden], .cv-ikey-foot[hidden] { display: none; }
.cv-ikey-tx { flex: 1; }
.cv-ikey-in { width: 100%; min-height: 2.5rem; padding: .35rem .55rem; border-radius: 8px; border: 1px solid var(--line, #7a0f15); background: rgba(0, 0, 0, .45); color: var(--ink, #f3e9e9); font: inherit; font-size: 16px; }
.cv-ikey-in:focus { outline: 2px solid var(--red2, #e0242c); outline-offset: 0; }
.cv-ikey-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); background: var(--card, #160407); border-top: 1px solid var(--line, #7a0f15); }
.cv-ikey-msg { flex: 1; min-width: 0; font-size: .75rem; color: var(--mute, #b9a3a5); }
.cv-ikey-foot button { min-height: 2.6rem; padding: 0 1rem; border-radius: 10px; border: 2px solid var(--line, #7a0f15); background: rgba(11, 3, 6, .9); color: var(--ink, #f3e9e9); font: inherit; font-weight: 700; cursor: pointer; }
.cv-ikey-foot .cv-ikey-save { background: var(--red2, #e0242c); border-color: var(--red2, #e0242c); color: #fff; }
.cv-ikey-foot button:disabled { opacity: .6; cursor: default; }