/* Shared by the Vireo-style pages (shell, Effects, Explore, Community, Library, Account, Admin, legal).
   Measurements follow Vireo (docs/ui-inventory.md, components/site + marketing by Albert Shiney, used with
   permission); colors are Sorrel's: black ground, bone type, sorrel orange only for the main action and active
   states. */
:root {
  --cr-panel: #0c0c0c;
  --cr-surface: #161616;
  --cr-raised: #1f1f1f;
  --cr-hover: #262626;
  --cr-hair: rgba(236, 232, 225, .05);
  --cr-line: rgba(236, 232, 225, .1);
  --cr-muted: #96938d;
  --cr-ease: cubic-bezier(.4, 0, .2, 1);
  --sh-h: 64px;
}
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sh-display, .pg-display { font-weight: 800; font-stretch: 88%; letter-spacing: -0.04em; line-height: .95; text-transform: uppercase; margin: 0; }

/* ---------- header ---------- */
.sh { position: sticky; top: 0; z-index: 30; background: rgba(0, 0, 0, .85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--cr-hair); }
.sh-bar { height: var(--sh-h); display: flex; align-items: center; gap: 20px; padding: 0 16px; }
.sh-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); text-decoration: none; flex-shrink: 0; }
.sh-brand span { font-stretch: 70%; font-weight: 800; font-size: 22px; text-transform: uppercase; line-height: 1; }
.sh-brand em { font-style: normal; font-weight: 500; color: var(--ash); }
.sh-nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sh-nav::-webkit-scrollbar { display: none; }
.sh-link { flex-shrink: 0; padding: 6px 10px; border-radius: 8px; color: #a8a5a0; text-decoration: none; font-size: 15px; font-weight: 500; transition: color .2s var(--cr-ease), background .2s var(--cr-ease); }
.sh-link:hover { color: var(--bone); background: rgba(236, 232, 225, .05); }
.sh-link.on { color: var(--sorrel); }
.sh-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sh-ghost, .sh-key { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sh-ghost { color: var(--bone); background: rgba(236, 232, 225, .07); }
.sh-ghost:hover { background: rgba(236, 232, 225, .12); }
.sh-key, .pg-key { background: var(--sorrel); color: var(--sorrel-ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .43); transition: background-color .2s var(--cr-ease), transform 80ms; }
.sh-key:hover, .pg-key:hover { background: color-mix(in oklab, var(--sorrel) 85%, white); }
.sh-key:active, .pg-key:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .43); }
.sh-credits { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; background: rgba(236, 232, 225, .05); box-shadow: inset 0 1.5px 3px rgba(255, 255, 255, .05); color: var(--bone); text-decoration: none; font-size: 14px; font-weight: 600; }
.sh-credits svg { color: var(--sorrel); }
.sh-credits:hover { background: rgba(236, 232, 225, .09); }
.sh-avatar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cr-line); background: var(--cr-surface); color: var(--bone); font-weight: 700; cursor: pointer; }
.sh-burger { display: none; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 10px; background: rgba(236, 232, 225, .06); color: var(--bone); cursor: pointer; flex-shrink: 0; }
.sh-menu, .sh-drawer { position: absolute; right: 12px; top: calc(var(--sh-h) - 4px); z-index: 40; min-width: 230px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; border: 1px solid var(--cr-line); background: #111; box-shadow: 0 20px 50px #000; }
.sh-menu a, .sh-menu button, .sh-drawer a { padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--bone); text-decoration: none; text-align: left; font-size: 14px; cursor: pointer; }
.sh-menu a:hover, .sh-menu button:hover, .sh-drawer a:hover { background: rgba(236, 232, 225, .05); }
.sh-drawer a.on { color: var(--sorrel); }
.sh-menu-who { display: flex; flex-direction: column; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--cr-hair); }
.sh-menu-who b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sh-menu-who small { font-size: 12px; color: var(--cr-muted); }

/* ---------- footer (Vireo's link grid, dark) ---------- */
.sh-foot { margin-top: 96px; border-top: 1px solid var(--cr-hair); background: #070707; }
.sh-foot-top { max-width: 1440px; margin: 0 auto; padding: 56px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.sh-foot-brand { display: flex; flex-direction: column; gap: 20px; }
.sh-foot-brand .sh-display { font-size: 40px; color: var(--bone); max-width: 8ch; }
.sh-foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sh-foot-col { display: flex; flex-direction: column; gap: 12px; }
.sh-foot-col b { font-size: 14px; font-weight: 500; color: var(--cr-muted); }
.sh-foot-col a { color: var(--bone); text-decoration: none; font-size: 15px; font-weight: 500; }
.sh-foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sh-foot-legal { max-width: 1440px; margin: 0 auto; padding: 20px 48px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--cr-hair); font-size: 14px; color: var(--cr-muted); }
.sh-foot-legal span:last-child { display: flex; gap: 18px; }
.sh-foot-legal a { color: var(--bone); text-decoration: none; }

/* ---------- page building blocks ---------- */
.pg { min-height: calc(100dvh - var(--sh-h)); }
.pg-wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.pg-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #000 60%, #050505); }
.pg-glow::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -220px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(224, 120, 74, .16), transparent); pointer-events: none; }
.pg-glow::after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(236, 232, 225, .06) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 85%); pointer-events: none; }
.pg-hero-in { max-width: 1440px; margin: 0 auto; padding: 80px 16px 56px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pg-hero h1 { font-size: 96px; color: var(--bone); }
.pg-hero h1 .accent { color: var(--sorrel); }
.pg-hero p { max-width: 560px; margin: 0; font-size: 16px; color: var(--cr-muted); }
.pg-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(236, 232, 225, .07); color: var(--bone); font-size: 13px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .02em; }
.pg-pill svg { color: var(--sorrel); }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.pg-btn.lg { height: 48px; padding: 0 22px; border-radius: 12px; font-size: 16px; }
.pg-btn.soft { background: rgba(236, 232, 225, .06); color: var(--bone); }
.pg-btn.soft:hover { background: rgba(236, 232, 225, .11); }
.pg-btn.line { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px var(--cr-line); }
.pg-btn.line:hover { background: rgba(236, 232, 225, .05); }
.pg-btn.white { background: var(--bone); color: #000; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.pg-btn.danger { background: #2a120e; color: var(--error); }
.pg-btn:disabled { opacity: .5; cursor: not-allowed; }
.pg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pg-chip { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(236, 232, 225, .06); background: rgba(236, 232, 225, .01); color: var(--bone); font-size: 14px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: background .2s var(--cr-ease); }
.pg-chip:hover { background: rgba(236, 232, 225, .12); }
.pg-chip i { font-style: normal; font-size: 12px; color: rgba(236, 232, 225, .4); }
.pg-chip[aria-pressed="true"] { border-color: rgba(224, 120, 74, .4); background: rgba(224, 120, 74, .1); color: var(--sorrel); }
.pg-chip[aria-pressed="true"] i { color: rgba(224, 120, 74, .7); }
.pg-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--cr-surface); }
.pg-seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--cr-muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.pg-seg button[aria-selected="true"], .pg-seg button[aria-pressed="true"] { background: var(--cr-hover); color: var(--bone); }
.pg-section { max-width: 1440px; margin: 0 auto; padding: 0 16px; }
.pg-section + .pg-section { margin-top: 72px; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.pg-head h2 { font-size: 28px; color: var(--sorrel); }
.pg-head p { margin: 6px 0 0; font-size: 14px; color: var(--cr-muted); }
.pg-empty { max-width: 560px; margin: 24px auto; padding: 48px 24px; border-radius: 24px; border: 1px solid var(--cr-hair); background: radial-gradient(60% 50% at 50% 0%, rgba(224, 120, 74, .08), transparent), #0b0b0b; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pg-empty-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cr-raised); color: var(--bone); margin-bottom: 4px; }
.pg-empty b { font-size: 18px; font-weight: 600; }
.pg-empty p { margin: 0 0 8px; font-size: 14px; color: var(--cr-muted); max-width: 44ch; }

/* masonry of media tiles */
.pg-masonry { columns: 5 220px; column-gap: 8px; }
.pg-tile { position: relative; display: block; break-inside: avoid; margin-bottom: 8px; overflow: hidden; border-radius: 12px; background: var(--cr-surface); color: var(--bone); text-decoration: none; }
.pg-tile img, .pg-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-tile video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.pg-tile.playing video { opacity: 1; }
.pg-tile-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 45%); transition: background .2s var(--cr-ease); }
.pg-tile-title { position: absolute; left: 12px; right: 12px; bottom: 12px; font-size: 20px; color: var(--bone); transition: opacity .2s; }
.pg-tile-hover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity .2s var(--cr-ease); background: rgba(0, 0, 0, .5); text-align: center; padding: 16px; }
.pg-tile-hover .pg-display { font-size: 28px; color: var(--bone); }
.pg-tile-hover span:last-child { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(224, 120, 74, .15); color: var(--sorrel); font-size: 13px; font-weight: 600; }
.pg-tile:hover .pg-tile-hover, .pg-tile:focus-visible .pg-tile-hover { opacity: 1; }
.pg-tile:hover .pg-tile-title, .pg-tile:focus-visible .pg-tile-title { opacity: 0; }
.pg-tile-chip { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; }

/* forms + tables (account, admin) */
.pg-app { max-width: 1200px; margin: 0 auto; padding: 32px 16px 64px; }
.pg-app h1 { font-size: 40px; color: var(--bone); }
.pg-tabs { display: flex; gap: 4px; margin: 20px 0 24px; overflow-x: auto; scrollbar-width: none; }
.pg-tabs a, .pg-tabs button { flex-shrink: 0; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--cr-muted); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.pg-tabs a:hover, .pg-tabs button:hover { color: var(--bone); }
.pg-tabs [aria-current="page"], .pg-tabs [aria-selected="true"] { background: rgba(236, 232, 225, .1); color: var(--bone); }
.pg-card { padding: 20px; border-radius: 20px; border: 1px solid var(--cr-hair); background: var(--cr-panel); }
.pg-card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.pg-card > p { margin: 0 0 16px; font-size: 14px; color: var(--cr-muted); }
.pg-grid { display: grid; gap: 12px; }
.pg-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-stat { padding: 16px; border-radius: 16px; background: var(--cr-surface); }
.pg-stat small { display: block; font-size: 12px; color: var(--cr-muted); }
.pg-stat b { display: block; margin-top: 6px; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pg-stat span { font-size: 12px; color: var(--cr-muted); }
.pg-input, .pg-select, .pg-textarea { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cr-line); background: var(--cr-surface); color: var(--bone); font-size: 14px; outline: none; }
.pg-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.pg-input:focus, .pg-select:focus, .pg-textarea:focus { border-color: rgba(236, 232, 225, .3); }
.pg-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cr-muted); }
.pg-field > span { color: var(--bone); font-weight: 500; }
.pg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--cr-hair); }
.pg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-table th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 500; color: var(--cr-muted); background: var(--cr-panel); white-space: nowrap; }
.pg-table td { padding: 10px 12px; border-top: 1px solid var(--cr-hair); vertical-align: middle; }
.pg-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.pg-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pg-table .clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-table tr:hover td { background: rgba(236, 232, 225, .02); }
.pg-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: rgba(236, 232, 225, .08); font-size: 11px; font-weight: 600; white-space: nowrap; }
.pg-tag.on { background: rgba(224, 120, 74, .15); color: var(--sorrel); }
.pg-tag.bad { background: rgba(255, 138, 122, .12); color: var(--error); }
.pg-tag.ok { background: rgba(120, 200, 140, .12); color: #9fd8ac; }
.pg-switch { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: #3a3a3a; position: relative; cursor: pointer; transition: background .2s; margin: 0; flex-shrink: 0; }
.pg-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bone); transition: transform .2s; }
.pg-switch:checked { background: var(--sorrel); }
.pg-switch:checked::after { transform: translateX(16px); }

.pg-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .7); }
.pg-dialog { width: min(440px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 20px; border-radius: 24px; border: 1px solid var(--cr-line); background: #101010; }
.pg-dialog.wide { width: min(720px, 100%); }
.pg-dialog h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.pg-dialog > p { margin: 0 0 16px; font-size: 14px; color: var(--cr-muted); }
.pg-dialog-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pg-err { margin: 10px 0 0; font-size: 13px; color: var(--error); }
.pg-err:empty { display: none; }

@media (max-width: 1100px) {
  .sh-nav { display: none; }
  .sh-burger { display: grid; }
  .sh-foot-top { grid-template-columns: 1fr; padding: 40px 24px; }
  .sh-foot-legal { padding: 20px 24px; }
}
@media (max-width: 767px) {
  .sh-bar { gap: 8px; padding: 0 12px; }
  .sh-brand span { font-size: 19px; }
  .sh-right .sh-ghost { display: none; }
  .pg-hero-in { padding: 48px 16px 40px; align-items: flex-start; text-align: left; }
  .pg-hero h1 { font-size: 44px; }
  .pg-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .pg-masonry { columns: 2 140px; }
  .pg-tile-hover .pg-display { font-size: 20px; }
  .sh-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-grid.c2, .pg-grid.c3 { grid-template-columns: 1fr; }
  .pg-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-app h1 { font-size: 32px; }
  .pg-head { flex-direction: column; align-items: flex-start; }
}