:root {
  --bg: #090a12;
  --panel: #131522;
  --panel-2: #1a1d2d;
  --border: #2a2e46;
  --text: #f0f1f8;
  --muted: #969bb2;
  --accent: #8d82ff;
  --accent-2: #6255db;
  --accent-soft: #b8b2ff;
  --cyan: #65d5e6;
  --danger: #c45a6a;
  --ok: #5aaa7a;
  --radius: 12px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: var(--font); line-height: 1.5; min-height: 100%;
  background-image: radial-gradient(circle at 12% -10%, rgba(91,72,180,.26) 0, transparent 30rem), radial-gradient(circle at 94% 18%, rgba(31,102,145,.19) 0, transparent 34rem);
}

a { color: var(--accent-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border);
  background: rgba(12, 12, 16, 0.76); position: sticky; top: 0;
  backdrop-filter: blur(8px); z-index: 10;
}
.brand { font-weight: 800; letter-spacing: 0.12em; color: var(--text); text-decoration: none; text-transform: uppercase; }
.topbar nav { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.logout-form { display: flex; align-items: center; align-self: stretch; margin: 0; }
.topbar .linkish { display: inline-flex; align-items: center; min-height: 28px; margin: 0; line-height: 1; }
.level-badge { display: inline-grid; place-items: center; min-width: 2rem; height: 1.45rem; padding: 0 .4rem; border: 1px solid rgba(141,130,255,.42); border-radius: 999px; color: var(--accent-soft); background: rgba(141,130,255,.1); font-size: .68rem; font-weight: 700; }

.container { width: min(1200px, 100% - 2rem); margin: 1.5rem auto 3rem; }
.footer { margin-top: 3rem; padding: 2.4rem 1rem 3rem; text-align: center; color: var(--muted); border-top: 1px solid var(--border); background: rgba(10,11,18,.62); }
#footer-contacts { width: min(760px, 100%); margin: 0 auto; font-size: 1.06rem; line-height: 1.85; }
#footer-contacts p { margin: .35rem 0; }
#footer-contacts strong { color: var(--text); font-size: 1.1em; }
#footer-contacts a { color: var(--cyan); font-weight: 650; text-underline-offset: .2em; }
#footer-contacts code { padding: .12rem .34rem; border-radius: 5px; color: var(--accent-soft); background: var(--panel-2); }

.card {
  background: linear-gradient(145deg, rgba(27, 27, 37, .94), rgba(17, 17, 24, .96)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
}
.card.narrow { max-width: 28rem; margin: 2rem auto; }
.stack { display: flex; flex-direction: column; gap: 0.85rem; }

label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
label.check {
  flex-direction: row; align-items: flex-start; gap: 0.6rem;
  font-size: 0.88rem; color: var(--muted);
}

input, select, textarea, button { font: inherit; }
input, select, textarea {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 0.55rem 0.7rem;
}
textarea { resize: vertical; width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 40px; border: 1px solid #363b59; background: rgba(255,255,255,.035); color: #e4e6f2;
  border-radius: 10px; padding: 0.52rem 1rem; cursor: pointer; text-decoration: none; font-weight: 650;
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset; transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.btn:hover { border-color: #646b96; background: rgba(255,255,255,.07); color: #fff; text-decoration: none; transform: translateY(-1px); }
.btn.primary {
  background: linear-gradient(135deg, #8f83ff, #6356dc);
  border-color: #948aff; color: #fff; font-weight: 700; box-shadow: 0 .45rem 1.3rem rgba(83,67,197,.24);
}
.btn.primary:hover { background: linear-gradient(135deg, #9b91ff, #7165e8); border-color: #aaa2ff; box-shadow: 0 .6rem 1.6rem rgba(83,67,197,.34); }
.btn.danger { border-color: var(--danger); color: #ffc9d1; }
.btn-sm { min-height: 32px; padding: 0.3rem 0.65rem; font-size: 0.82rem; }
.btn.linkish, button.linkish {
  background: none; border: none; color: var(--accent);
  cursor: pointer; padding: 0; font: inherit;
}

.muted { color: var(--muted); }
.center { text-align: center; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: 0.8rem; word-break: break-all; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.eyebrow { display: block; color: var(--accent); font-size: .68rem; font-weight: 700; letter-spacing: .16em; margin-bottom: .35rem; }

.flash { border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.flash.ok { background: rgba(90, 170, 122, 0.15); border: 1px solid var(--ok); }
.flash.err { background: rgba(196, 90, 106, 0.15); border: 1px solid var(--danger); }

.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.catalog-head, .profile-hero, .admin-page-head, .section-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.catalog-head { margin: 1.5rem 0 1.1rem; }
.catalog-head h1, .profile-hero h1, .admin-page-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.result-count { color: var(--muted); font-size: .85rem; padding-bottom: .35rem; }

.search-shell { position: relative; z-index: 6; margin-bottom: .85rem; }
.search-primary {
  display: grid; grid-template-columns: minmax(240px, 1fr) auto auto auto; gap: .55rem;
  padding: .6rem; border: 1px solid var(--border); border-radius: 14px;
  background: rgba(17,17,24,.9); box-shadow: 0 1rem 3rem rgba(0,0,0,.18); backdrop-filter: blur(12px);
}
.search-input input { width: 100%; min-height: 44px; background: transparent; border-color: transparent; font-size: .98rem; }
.search-input input:focus { border-color: var(--accent-2); outline: none; }
.search-submit { min-width: 82px; }
.filter-popover { position: relative; }
.filter-popover summary {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-width: 120px; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel-2); cursor: pointer; list-style: none; font-size: .88rem;
}
.filter-popover summary::-webkit-details-marker { display: none; }
.filter-popover summary::after { content: "⌄"; color: var(--accent); }
.filter-popover[open] summary { border-color: var(--accent-2); }
.popover-panel {
  position: absolute; right: 0; top: calc(100% + .55rem); width: min(680px, calc(100vw - 2rem));
  padding: 1rem; background: #15151d; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45); z-index: 20;
}
.popover-title { font-weight: 700; margin-bottom: .8rem; }
.region-group + .region-group { margin-top: 1rem; }
.region-group > span { display: block; color: var(--muted); font-size: .75rem; margin-bottom: .45rem; }
.choice-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.choice-list a { padding: .28rem .56rem; border-radius: 999px; color: var(--text); font-size: .8rem; border: 1px solid transparent; }
.choice-list a:hover, .choice-list a.active { color: #fff; background: var(--accent-2); text-decoration: none; box-shadow: 0 .25rem .8rem rgba(79,64,190,.22); }
.advanced-panel { width: min(920px, calc(100vw - 2rem)); max-height: min(72vh, 700px); overflow: auto; }
.filter-group { border: 0; padding: 0 0 1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
.filter-group:last-of-type { margin-bottom: 0; }
.filter-group legend { padding: 0; margin-bottom: .7rem; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.filter-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; }
.featured-filter { grid-column: 1 / -1; align-items: center; min-height: 40px; padding: .55rem .7rem; border: 1px solid rgba(222,177,86,.3); border-radius: 9px; background: rgba(222,177,86,.06); color: #f1d799; }
.featured-filter input { accent-color: #d8a94c; }
.service-filter-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; }
.range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.range-slider { --range-from: 0%; --range-to: 100%; min-width: 0; padding: .3rem .1rem .15rem; }
.range-slider-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; font-size: .82rem; }
.range-slider-head > span { color: var(--muted); }
.range-slider-head strong { display: flex; align-items: baseline; gap: .28rem; color: var(--text); font-size: .85rem; }
.range-slider-head output { color: var(--accent-soft); min-width: 1.6rem; text-align: center; }
.range-slider-head small { color: var(--muted); font-size: .65rem; font-weight: 500; }
.dual-range { position: relative; height: 20px; }
.dual-range::before, .dual-range .range-fill { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 999px; }
.dual-range::before { background: #292d43; }
.dual-range .range-fill { left: var(--range-from); right: calc(100% - var(--range-to)); background: linear-gradient(90deg, var(--accent-2), var(--cyan)); }
.dual-range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 20px; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none; }
.dual-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.dual-range input[type="range"]::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -6.5px; border: 3px solid #a59dff; border-radius: 50%; background: #11131e; box-shadow: 0 0 0 3px rgba(141,130,255,.13), 0 .2rem .7rem rgba(0,0,0,.45); pointer-events: auto; appearance: none; -webkit-appearance: none; cursor: grab; }
.dual-range input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.dual-range input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #a59dff; border-radius: 50%; background: #11131e; box-shadow: 0 0 0 3px rgba(141,130,255,.13); pointer-events: auto; cursor: grab; }
.range-limits { display: flex; justify-content: space-between; color: #686e88; font-size: .64rem; margin-top: .15rem; }
.filter-actions { display: flex; justify-content: flex-end; gap: .5rem; position: sticky; bottom: -1rem; padding: .8rem 0 0; background: #15151d; }
.active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.active-filters a { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .76rem; }
.active-filters a:hover { color: var(--text); border-color: var(--accent-2); text-decoration: none; }
.active-filters a span { color: var(--accent); }
.active-filters .clear-filters { border-color: transparent; }
.filters { margin-bottom: 1.25rem; }
.grid-filters {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem; margin-bottom: 0.9rem;
}
.row { display: flex; align-items: center; }
.row.gap { gap: 0.5rem; flex-wrap: wrap; }
.inline { display: inline; }

.profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem;
}
.profile-card-shell { position: relative; min-width: 0; }
.profile-card {
  display: flex; height: 100%; flex-direction: column; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  color: inherit; text-decoration: none; transition: border-color 0.15s, transform 0.15s;
}
.profile-card:hover {
  border-color: var(--accent); transform: translateY(-3px); text-decoration: none; box-shadow: 0 1rem 2.5rem rgba(0,0,0,.25);
}
.thumb { position: relative; aspect-ratio: 3/4; background: var(--panel-2); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(5,5,8,.82)); pointer-events: none; }
.card-code, .card-video { position: absolute; z-index: 2; font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.card-code { left: .65rem; bottom: .55rem; color: #fff; }
.card-video { right: .55rem; top: .55rem; padding: .2rem .48rem; border-radius: 999px; color: #fff; background: rgba(98,85,219,.92); box-shadow: 0 .25rem .8rem rgba(33,25,105,.35); }
.card-flags { position: absolute; z-index: 2; right: .55rem; bottom: .55rem; display: flex; align-items: flex-end; gap: .3rem; flex-direction: column; pointer-events: none; }
.card-flags .card-video { position: static; }
.featured-badge { display: inline-flex; align-items: center; min-height: 24px; padding: .2rem .5rem; border: 1px solid rgba(226,181,86,.55); border-radius: 999px; color: #ffe4a4; background: rgba(104,70,18,.88); box-shadow: 0 .25rem .9rem rgba(54,34,4,.35); font-size: .68rem; font-weight: 750; letter-spacing: .04em; white-space: nowrap; }
.featured-badge.is-hidden { display: none; }
.thumb-empty {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--muted); min-height: 12rem;
}
.thumb-empty.big {
  min-height: 20rem; border: 1px dashed var(--border); border-radius: var(--radius);
}
.meta { padding: 0.75rem 0.85rem 1rem; }
.code { font-weight: 700; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.line { font-size: 0.9rem; }
.primary-line { color: var(--text); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.tag {
  font-size: 0.72rem; padding: 0.15rem 0.45rem; border-radius: 999px;
  background: rgba(101, 213, 230, 0.08); color: #83deeb;
  border: 1px solid rgba(101, 213, 230, 0.24);
}
.video-mark { display: inline-block; margin-top: .65rem; font-size: .7rem; color: var(--accent-soft); letter-spacing: .03em; }
.favorite-form { margin: 0; }
.favorite-form.card-heart { position: absolute; z-index: 4; top: .55rem; left: .55rem; }
.favorite-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 44px; min-height: 44px;
  padding: .55rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff;
  background: rgba(8,9,15,.7); box-shadow: 0 .3rem 1rem rgba(0,0,0,.28); backdrop-filter: blur(8px); cursor: pointer;
  transition: color .16s, border-color .16s, background .16s, transform .16s;
}
.favorite-button:hover { color: #ff91ad; border-color: rgba(255,145,173,.75); background: rgba(34,18,29,.88); transform: translateY(-1px); }
.favorite-button svg { width: 1.35rem; height: 1.35rem; overflow: visible; fill: transparent; stroke: currentColor; stroke-width: 1.8; }
.favorite-button.active { color: #ff789d; border-color: rgba(255,120,157,.62); background: rgba(58,21,38,.88); }
.favorite-button.active svg { fill: currentColor; }
.favorite-form.detail .favorite-button { min-width: 132px; padding: .55rem .9rem; font-weight: 700; }
.featured-form { margin: 0; }
.featured-form.card-feature { position: absolute; z-index: 4; top: .55rem; right: .55rem; }
.featured-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 44px; min-height: 44px;
  padding: .55rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #fff;
  background: rgba(8,9,15,.7); box-shadow: 0 .3rem 1rem rgba(0,0,0,.28); backdrop-filter: blur(8px); cursor: pointer;
  transition: color .16s, border-color .16s, background .16s, transform .16s;
}
.featured-button:hover { color: #ffdf8a; border-color: rgba(226,181,86,.75); background: rgba(54,38,14,.9); transform: translateY(-1px); }
.featured-button svg { width: 1.35rem; height: 1.35rem; fill: transparent; stroke: currentColor; stroke-width: 1.7; }
.featured-button.active { color: #ffd36f; border-color: rgba(226,181,86,.72); background: rgba(80,53,12,.92); }
.featured-button.active svg { fill: currentColor; }
.featured-form.detail .featured-button { min-width: 132px; padding: .55rem .9rem; font-weight: 700; }
.favorite-notice {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(19,21,34,.9);
}
.favorite-notice-heart { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 1.5rem; }
.favorite-notice p { margin: .2rem 0 0; color: var(--muted); font-size: .86rem; }

.pager {
  display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem;
}
.empty-state { display: grid; justify-items: center; gap: .55rem; padding: 4rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); }
.empty-state strong { color: var(--text); font-size: 1.05rem; }

.home-search { margin: .2rem 0 1.8rem; }
.home-search .search-shell { margin-bottom: 0; }
.featured-section, .home-showcase { scroll-margin-top: 5.5rem; }
.home-showcase { margin-top: 2.8rem; padding-top: 1.7rem; border-top: 1px solid var(--border); }
.home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.home-section-head h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.home-section-head > a { color: var(--text); }
.home-section-head > a:hover { color: var(--accent-soft); text-decoration: none; }
.carousel-tools { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; color: var(--muted); font-size: .78rem; }
.carousel-arrow { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.035); cursor: pointer; font-size: 1.55rem; line-height: 1; text-decoration: none; }
.carousel-arrow:hover { border-color: var(--accent); color: #fff; background: rgba(141,130,255,.14); text-decoration: none; }
.home-featured-grid, .home-showcase-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.home-showcase-more { display: flex; justify-content: center; margin-top: 1.25rem; }
.featured-empty { display: grid; justify-items: center; gap: .55rem; min-height: 300px; place-content: center; padding: 2rem; border: 1px solid rgba(226,181,86,.25); border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(226,181,86,.08), transparent 58%), rgba(19,21,34,.65); text-align: center; }
.featured-empty > span { color: #e0b75e; font-size: 2.6rem; }
.featured-empty p { margin: 0 0 .55rem; color: var(--muted); }
.compact-empty { padding: 2.5rem 1rem; }

.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 1.4rem; color: var(--muted); font-size: .8rem; }
.breadcrumbs strong { color: var(--text); }
.profile-hero { align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; }
.profile-hero p { margin: .45rem 0 0; color: var(--muted); }
.hero-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }
.verified-badge, .video-badge { padding: .35rem .65rem; border-radius: 999px; font-size: .72rem; border: 1px solid var(--border); }
.verified-badge { color: #8fdbb0; background: rgba(90,170,122,.1); border-color: rgba(90,170,122,.35); }
.video-badge { color: var(--accent-soft); background: rgba(141,130,255,.1); border-color: rgba(141,130,255,.35); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 1.35rem; align-items: start; }
.album-section, .raw-profile-section, .related-section { min-width: 0; }
.section-heading { align-items: center; margin-bottom: .8rem; }
.section-heading h2 { margin: 0; font-size: 1.15rem; }
.section-heading > span, .section-heading > a { color: var(--muted); font-size: .76rem; }
.profile-summary { display: grid; gap: 1rem; position: sticky; top: 5rem; }
.summary-card, .raw-profile-section { padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(19,19,27,.9); }
.summary-line { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.summary-line span { padding: .28rem .5rem; border-radius: 6px; background: var(--panel-2); font-size: .8rem; }
.companion-note { color: var(--muted); font-size: .82rem; margin-bottom: .7rem; }
.service-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.service-chip { padding: .27rem .52rem; border-radius: 999px; font-size: .74rem; border: 1px solid var(--border); }
.service-chip.yes { color: #96dfb6; border-color: rgba(90,170,122,.35); background: rgba(90,170,122,.08); }
.service-chip.no { color: #c6c6d0; background: rgba(154,154,171,.08); }
.service-chip.conditional { color: #b9b3ff; border-color: rgba(141,130,255,.35); background: rgba(141,130,255,.08); }
.admin-edit { width: 100%; margin-top: 1rem; }
.raw-profile-section { margin-top: 1.35rem; }
.raw-profile-section pre { margin: 0; padding: 1rem; border-radius: 9px; background: #0d0d12; color: #d4d4dc; white-space: pre-wrap; overflow-wrap: anywhere; font: .88rem/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; }
.related-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.related-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: .7rem; }
.profile-card-shell.compact .meta { padding: .6rem; }
.profile-card-shell.compact .line { font-size: .76rem; }
.profile-card-shell.compact .tags { display: none; }
.profile-card-shell.compact .favorite-button { min-width: 38px; min-height: 38px; padding: .45rem; }
.profile-card-shell.compact .featured-button { min-width: 38px; min-height: 38px; padding: .45rem; }

.detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; }
@media (max-width: 800px) { .detail { grid-template-columns: 1fr; } }
.media-viewer { min-width: 0; outline: none; }
.media-viewer:focus-visible .media-stage { box-shadow: 0 0 0 2px var(--accent); }
.media-stage { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #050508; }
.media-viewer.album .media-stage { aspect-ratio: 3/4; }
.media-viewer.album.with-thumbs { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .65rem; align-items: stretch; }
.media-viewer.album.with-thumbs .media-stage { grid-column: 2; grid-row: 1; }
.media-viewer.album.with-thumbs .media-thumbs { grid-column: 1; grid-row: 1; min-height: 0; margin-top: 0; padding: 0 .2rem 0 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; contain: size; }
.media-viewer.album.with-thumbs .media-thumbs button { scroll-snap-align: center; }
.media-viewer.verification .media-stage { aspect-ratio: auto; }
.media-slide { display: none; width: 100%; height: 100%; }
.media-slide.active { display: grid; place-items: center; }
.media-slide img, .media-slide video { display: block; width: 100%; height: 100%; object-fit: contain; background: #050508; }
.media-viewer.album .media-slide { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; overflow: hidden; }
.media-viewer.album .media-slide video { width: auto; max-width: 100%; height: auto; min-height: 0; max-height: 100%; object-fit: contain; }
.media-viewer.verification .media-slide { height: auto; }
.media-viewer.verification .media-slide video { width: auto; max-width: 100%; height: auto; max-height: min(75dvh, 720px); margin: 0 auto; }
.image-zoom { width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in; background: #050508; }
.media-arrow { position: absolute; z-index: 2; top: 50%; width: 2.5rem; height: 3.5rem; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.16); color: #fff; background: rgba(5,5,8,.65); font-size: 2rem; cursor: pointer; backdrop-filter: blur(8px); }
.media-arrow:hover { background: rgba(98,85,219,.8); }
.media-arrow.prev { left: .6rem; border-radius: 9px; }
.media-arrow.next { right: .6rem; border-radius: 9px; }
.media-counter { position: absolute; z-index: 2; right: .7rem; bottom: .65rem; padding: .25rem .55rem; border-radius: 999px; color: #fff; background: rgba(5,5,8,.72); font-size: .72rem; }
.media-thumbs { display: flex; gap: .5rem; margin-top: .65rem; padding-bottom: .2rem; overflow-x: auto; scroll-snap-type: x proximity; }
.media-thumbs button { position: relative; flex: 0 0 72px; width: 72px; height: 72px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 8px; color: var(--accent-soft); background: var(--panel-2); cursor: pointer; scroll-snap-align: center; }
.media-thumbs button.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(141,130,255,.18); }
.media-thumbs img, .media-thumbs video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.media-thumbs span { display: grid; height: 100%; place-items: center; font-weight: 700; }
.media-thumbs .media-thumb-play { position: absolute; inset: 50% auto auto 50%; width: 2rem; height: 2rem; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: #fff; background: rgba(5,5,8,.72); box-shadow: 0 .2rem .8rem rgba(0,0,0,.45); font-size: .8rem; line-height: 1; text-indent: .08rem; pointer-events: none; }
.media-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 2rem; border: 0; background: rgba(3,3,6,.96); }
.media-lightbox::backdrop { background: rgba(0,0,0,.88); }
.media-lightbox img { width: 100%; height: 100%; object-fit: contain; }
.media-lightbox button { position: fixed; z-index: 2; top: 1rem; right: 1rem; width: 2.7rem; height: 2.7rem; border: 1px solid var(--border); border-radius: 50%; color: #fff; background: rgba(20,20,29,.85); font-size: 1.5rem; cursor: pointer; }
.video-section { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.video-lock { width: calc(100% - 2rem); min-height: 10rem; display: grid; place-content: center; gap: .35rem; padding: 1rem; border: 1px dashed rgba(141,130,255,.5); border-radius: 10px; color: var(--accent-soft); background: rgba(141,130,255,.06); text-align: center; font-size: .9rem; }
.facts {
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 1rem 0;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.raw {
  margin-top: 1.25rem; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.75rem 1rem;
}
.raw pre, pre.json {
  white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; color: var(--muted);
}

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin: 1rem 0 1.5rem;
}
.stat { text-decoration: none; color: inherit; }
.stat .n { font-size: 1.8rem; font-weight: 700; color: var(--accent); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td {
  text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top;
}
th { background: var(--panel); color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: none; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.contact-row { display: grid; grid-template-columns: 1fr 1fr 2fr 5rem auto auto; gap: .5rem; align-items: center; }
.admin-shell { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 1.4rem; align-items: start; }
.admin-sidebar { position: sticky; top: 5rem; min-height: calc(100vh - 8rem); padding: .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(18,18,25,.88); }
.admin-sidebar-title { padding: .35rem .55rem .8rem; font-weight: 700; }
.admin-sidebar nav { display: grid; gap: .2rem; }
.admin-sidebar nav a, .admin-back { padding: .55rem .65rem; border-radius: 7px; color: var(--muted); font-size: .86rem; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: var(--text); background: var(--panel-2); text-decoration: none; }
.admin-sidebar nav a.active { box-shadow: inset 2px 0 var(--accent); }
.admin-back { display: block; margin-top: 1.2rem; border-top: 1px solid var(--border); border-radius: 0; }
.admin-mobile-nav { display: none; }
.admin-content { min-width: 0; }
.admin-page-head { align-items: center; margin: .4rem 0 1.2rem; }
.admin-page-head p { margin: .35rem 0 0; }
.admin-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) minmax(140px,auto) minmax(120px,auto) auto auto; gap: .5rem; margin-bottom: 1rem; padding: .65rem; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.admin-create-user { margin-bottom: 1.35rem; }
.admin-create-user summary { cursor: pointer; font-weight: 700; }
.admin-create-user[open] summary { margin-bottom: 1.1rem; }
.admin-create-user-form { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto; gap: 1rem; align-items: end; }
.admin-create-user-form label { gap: .45rem; }
.admin-create-user-form input, .admin-create-user-form select, .admin-create-user-form .btn { min-height: 42px; }
.admin-create-user > p { margin: .85rem 0 0; }
.admin-row-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: nowrap; white-space: nowrap; }
.admin-row-actions form { margin: 0; }
.admin-level-form { display: inline-flex; align-items: center; gap: .4rem; }
.admin-level-highlight { animation: admin-level-highlight 3.2s ease-out both; }
@keyframes admin-level-highlight {
  0%, 22% { color: #fff; background: rgba(141,130,255,.48); box-shadow: inset 3px 0 #b8b2ff, inset 0 0 1.4rem rgba(141,130,255,.26); }
  100% { color: var(--text); background: transparent; box-shadow: inset 0 0 transparent; }
}
.admin-row-actions .btn, .admin-row-actions select { min-height: 34px; }
.admin-row-actions .featured-button { min-width: 34px; min-height: 34px; padding: .36rem; }
.admin-row-actions .featured-button svg { width: 1.05rem; height: 1.05rem; }
.admin-featured-label { width: fit-content; margin-top: .3rem; padding: .1rem .4rem; border: 1px solid rgba(226,181,86,.4); border-radius: 999px; color: #f0cf83; font-size: .68rem; }
.admin-password-form { display: inline-flex; align-items: center; gap: .4rem; }
.admin-password-form input { width: 10rem; min-height: 34px; }
.admin-form-list { display: grid; grid-template-columns: minmax(240px, .38fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.admin-form-list > .card { position: sticky; top: 5rem; }
.site-settings-form { width: 100%; max-width: none; }
.site-settings-form textarea { min-height: 15rem; font: .9rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; }
.settings-section-head { margin: 1.6rem 0 .8rem; }
.settings-section-head h2 { margin: 0; }
.settings-section-head p { margin: .25rem 0 0; }
.markdown-help { margin: -.2rem 0 .3rem; color: var(--muted); font-size: .8rem; }
.markdown-help code { color: var(--accent-soft); }
.admin-media-section { margin-top: 1rem; }
.cleanup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.cleanup-preview-count { color: var(--accent-soft); font-size: 3rem; font-weight: 800; line-height: 1; }
.cleanup-run-card { margin-top: 1rem; }
.cleanup-run-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: .9rem 0; }
.cleanup-run-stats div { display: grid; gap: .15rem; padding: .75rem; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); }
.cleanup-run-stats strong { color: var(--accent-soft); font-size: 1.35rem; }
.cleanup-run-stats span { color: var(--muted); font-size: .72rem; }
.cleanup-run-status { padding: .2rem .5rem; border: 1px solid var(--border); border-radius: 999px; font-size: .72rem; }
.cleanup-run-status.completed { color: #96dfb6; border-color: rgba(90,170,122,.4); }
.cleanup-run-status.failed, .cleanup-run-status.partial { color: #ffc9d1; border-color: rgba(196,90,106,.5); }
.media-status { display: inline-flex; padding: .18rem .45rem; border-radius: 999px; font-size: .7rem; border: 1px solid var(--border); }
.media-status.ready { color: #96dfb6; border-color: rgba(90,170,122,.35); background: rgba(90,170,122,.08); }
.media-status.failed { color: #ffc9d1; border-color: rgba(196,90,106,.45); background: rgba(196,90,106,.1); }
.media-status.pending, .media-status.downloading { color: var(--accent-soft); border-color: rgba(141,130,255,.4); background: rgba(141,130,255,.08); }
@media (max-width: 800px) {
  .container { width: min(100% - 1rem, 1100px); margin-top: 1rem; }
  .topbar { padding: .75rem .8rem; }
  .topbar nav { gap: .65rem; font-size: .9rem; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .home-featured-grid, .home-showcase-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .meta { padding: .6rem; }
  .line { font-size: .82rem; }
  .search-primary { grid-template-columns: 1fr 1fr; }
  .search-input { grid-column: 1 / -1; }
  .search-submit { grid-column: 1 / -1; }
  .filter-popover summary { min-width: 0; }
  .region-popover .popover-panel { left: 0; right: auto; }
  .more-popover .popover-panel { right: 0; }
  .filter-group-grid, .service-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .catalog-head, .profile-hero, .admin-page-head { align-items: flex-start; }
  .detail-layout { grid-template-columns: 1fr; }
  .profile-summary { position: static; grid-row: 1; }
  .related-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .related-grid .profile-card-shell { min-width: 150px; scroll-snap-align: start; }
  .media-arrow { width: 2.25rem; height: 3rem; }
  .admin-shell { display: block; }
  .admin-sidebar { display: none; }
  .admin-mobile-nav { display: flex; gap: .35rem; overflow-x: auto; margin: -.2rem 0 1rem; padding-bottom: .4rem; }
  .admin-mobile-nav a { flex: 0 0 auto; padding: .4rem .65rem; border-radius: 999px; color: var(--muted); border: 1px solid var(--border); font-size: .8rem; }
  .admin-mobile-nav a.active { color: #fff; background: var(--accent-2); border-color: #7c70ef; }
  .admin-toolbar { grid-template-columns: 1fr 1fr; }
  .admin-create-user-form { grid-template-columns: 1fr 1fr; }
  .admin-toolbar input { grid-column: 1 / -1; }
  .admin-form-list { grid-template-columns: 1fr; }
  .admin-form-list > .card { position: static; }
  .contact-row { grid-template-columns: 1fr; }
  .cleanup-grid { grid-template-columns: 1fr; }
  .cleanup-run-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .favorite-notice { grid-template-columns: auto minmax(0,1fr); }
  .favorite-notice form { grid-column: 2; }
}
@media (max-width: 520px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filter-group-grid, .service-filter-grid { grid-template-columns: 1fr; }
  .profile-hero { display: block; }
  .home-section-head { align-items: center; }
  .carousel-tools > span { display: none; }
  .hero-badges { margin-top: .8rem; }
  .media-viewer.album.with-thumbs { grid-template-columns: 56px minmax(0, 1fr); gap: .45rem; }
  .media-viewer.album.with-thumbs .media-thumbs button { flex-basis: 56px; width: 56px; height: 56px; }
  .admin-toolbar { grid-template-columns: 1fr; }
  .admin-create-user-form { grid-template-columns: 1fr; }
  .admin-toolbar input { grid-column: auto; }
}

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; }