/* =====================================================================
   SORA Project v98 — compact admin, clean recommendations and detailed
   avatar-frame cosmetics. Visual-only refinement over v97.
   ===================================================================== */
:root {
  --v98-accent: var(--sora-accent, #2998f6);
  --v98-accent-2: var(--sora-accent-2, #28c4f4);
  --v98-ease: cubic-bezier(.25, 1, .5, 1);
  --v98-admin-sidebar: 184px;
}

/* ---------------------------------------------------------------------
   Recommendations: one clean heading, no eyebrow, no paragraph, no icon.
   The text and carousel share exactly the same left edge.
   --------------------------------------------------------------------- */
.release-page .recommendations-section {
  width: min(980px, calc(100vw - 32px)) !important;
  margin: 22px auto 18px !important;
  padding: 18px 20px 16px !important;
  border-radius: 24px !important;
}
.release-page .recommendations-section > .recommendations-heading,
.release-page .recommendations-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 2px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(122, 177, 220, .10) !important;
}
.release-page .recommendations-heading h2 {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5f9ff !important;
  font-size: clamp(19px, 1.45vw, 23px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  text-align: left !important;
  white-space: normal !important;
}
.release-page .recommendations-carousel {
  margin-top: 12px !important;
}
.release-page .recommendations-row {
  justify-content: flex-start !important;
  gap: 11px !important;
  padding: 2px 2px 8px !important;
}
.release-page .recommend-card {
  flex: 0 0 124px !important;
  width: 124px !important;
  min-width: 124px !important;
  padding: 7px !important;
  border-radius: 16px !important;
}
.release-page .recommend-card strong {
  margin-top: 7px !important;
  font-size: 11.5px !important;
  line-height: 1.28 !important;
}
.release-page .recommend-card small {
  margin-top: 3px !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

/* ---------------------------------------------------------------------
   Compact admin redesign. The workspace stays left-aligned and readable,
   but no longer stretches every control across a huge desktop canvas.
   --------------------------------------------------------------------- */
.admin-sidebar {
  width: var(--v98-admin-sidebar) !important;
  padding: 9px 8px 13px !important;
  gap: 8px !important;
  border-right-color: rgba(83, 164, 222, .13) !important;
}
.admin-brand.admin-brand-text-only {
  min-height: 54px !important;
  padding: 9px 11px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(29, 111, 184, .18), rgba(10, 35, 63, .45)) !important;
  border-color: rgba(72, 173, 241, .22) !important;
  box-shadow: none !important;
}
.admin-brand-text-only .admin-brand-copy {
  gap: 2px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.admin-brand-text-only .admin-brand-copy strong {
  font-size: 13.5px !important;
  line-height: 1.06 !important;
  letter-spacing: -.02em !important;
}
.admin-brand-text-only .admin-brand-copy small {
  font-size: 8.5px !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
}
.admin-nav {
  gap: 2px !important;
}
.admin-nav a {
  min-height: 36px !important;
  padding: 4px 7px !important;
  gap: 7px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.admin-nav a i {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
}
.admin-nav a:hover {
  transform: translate3d(2px, 0, 0) !important;
}
.admin-content {
  width: calc(100% - var(--v98-admin-sidebar)) !important;
}
.admin-topbar {
  min-height: 58px !important;
  padding: 8px 18px !important;
}
.admin-topbar-title {
  gap: 1px !important;
}
.admin-topbar-title small {
  font-size: 7.5px !important;
}
.admin-topbar-title strong {
  font-size: 14px !important;
}
.admin-topbar-actions {
  gap: 6px !important;
}
.admin-topbar .btn,
.admin-topbar .user-chip {
  min-height: 36px !important;
  border-radius: 11px !important;
}
.admin-main {
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 !important;
  padding: 17px 20px 24px !important;
}
.admin-main > h1 {
  margin: 0 0 5px !important;
  font-size: clamp(23px, 2vw, 29px) !important;
  line-height: 1.05 !important;
}
.admin-main > .muted {
  margin: 0 0 14px !important;
  font-size: 12px !important;
}
.admin-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.admin-dashboard-heading h1 {
  margin: 2px 0 3px !important;
  font-size: clamp(24px, 2vw, 30px) !important;
  line-height: 1 !important;
}
.admin-dashboard-heading p {
  margin: 0 !important;
  font-size: 12px !important;
}
.admin-dashboard-eyebrow {
  display: block;
  color: #59bcff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.admin-dashboard-create {
  min-height: 38px !important;
  padding-inline: 14px !important;
  flex: 0 0 auto;
}
.stats-grid.admin-dashboard-stats,
.admin-page-dashboard .stats-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  gap: 9px !important;
  margin: 0 0 12px !important;
}
.admin-page-dashboard .stat-card {
  min-height: 72px !important;
  padding: 11px 13px !important;
  gap: 10px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(53, 168, 243, .09), transparent 43%),
    linear-gradient(145deg, rgba(17, 31, 49, .98), rgba(10, 20, 34, .98)) !important;
  box-shadow: none !important;
}
.admin-page-dashboard .stat-card > i {
  width: 37px !important;
  height: 37px !important;
  min-width: 37px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  background: linear-gradient(145deg, rgba(44, 157, 235, .22), rgba(31, 104, 170, .11)) !important;
}
.admin-page-dashboard .stat-num {
  font-size: 23px !important;
  line-height: .95 !important;
}
.admin-page-dashboard .stat-label {
  margin-top: 3px !important;
  font-size: 9.5px !important;
}
.admin-panel {
  padding: 14px !important;
  border-radius: 17px !important;
  box-shadow: none !important;
}
.admin-page-dashboard .admin-panel {
  margin-top: 0 !important;
}
.admin-dashboard-panel-head {
  margin-bottom: 9px !important;
  align-items: flex-end !important;
}
.admin-dashboard-panel-head h2 {
  margin: 2px 0 0 !important;
  font-size: 17px !important;
}
.admin-dashboard-panel-head .btn {
  min-height: 34px !important;
  padding: 7px 10px !important;
}
.admin-table {
  font-size: 11.5px !important;
}
.admin-table thead th {
  padding: 7px 9px !important;
  font-size: 8px !important;
}
.admin-table tbody tr {
  height: 39px !important;
}
.admin-table tbody td {
  padding: 7px 9px !important;
  line-height: 1.25 !important;
}
.admin-page-dashboard .admin-table tbody tr {
  background: rgba(255,255,255,.022) !important;
}
.admin-page-dashboard .admin-table tbody tr:hover {
  background: rgba(41,152,246,.065) !important;
}
.admin-release-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 8px;
  border: 1px solid rgba(83, 184, 246, .18);
  border-radius: 999px;
  color: #a9dcff;
  background: rgba(38, 135, 204, .09);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.admin-release-status-completed,
.admin-release-status-zaversheno {
  color: #8bf2c0;
  border-color: rgba(56, 211, 153, .22);
  background: rgba(35, 168, 119, .10);
}
.admin-row-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 5px 8px;
  border: 1px solid rgba(86, 174, 235, .14);
  border-radius: 8px;
  color: #a8d9fb;
  text-decoration: none;
  font-size: 9.5px;
  font-weight: 800;
  transition: transform .2s var(--v98-ease), background-color .2s ease, border-color .2s ease;
}
.admin-row-action:hover {
  transform: translate3d(0, -1px, 0);
  color: #fff;
  border-color: rgba(86, 174, 235, .32);
  background: rgba(41, 152, 246, .11);
}

/* ---------------------------------------------------------------------
   Existing avatar frames: richer layered rings, clearer frame picker and
   extra frame-specific detail. No new database values are required.
   --------------------------------------------------------------------- */
.avatar-frame {
  --frame-ring-2: color-mix(in srgb, var(--frame-ring) 58%, white 42%);
  border: 2px solid rgba(5, 12, 22, .92) !important;
  outline: 1px solid color-mix(in srgb, var(--frame-ring) 62%, transparent) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 0 0 4px color-mix(in srgb, var(--frame-ring) 78%, transparent),
    0 8px 18px rgba(0,0,0,.32),
    0 0 22px var(--frame-glow) !important;
  transition: transform .24s var(--v98-ease), opacity .24s ease !important;
}
.avatar-frame::before {
  min-width: max(30px, var(--frame-decor-width, 36px)) !important;
  border-radius: 10px 10px 13px 13px !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.42),
    0 5px 11px rgba(0,0,0,.34) !important;
}
.avatar-frame::after {
  width: 20px !important;
  height: 20px !important;
  right: -7px !important;
  bottom: -6px !important;
  border: 2px solid rgba(5, 12, 22, .90) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--frame-ring) 28%, #0c1727), #08111d) !important;
  color: var(--frame-ring-2) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.34), 0 0 10px var(--frame-glow) !important;
}
.avatar-frame-choice {
  position: relative !important;
  min-height: 114px !important;
  padding: 10px 7px 8px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(59, 170, 242, .07), transparent 48%),
    rgba(7, 14, 24, .52) !important;
  transition: transform .22s var(--v98-ease), border-color .22s ease, background-color .22s ease !important;
}
.avatar-frame-choice:hover:not(.is-locked) {
  transform: translate3d(0, -3px, 0) !important;
  border-color: rgba(74, 184, 246, .35) !important;
}
.avatar-frame-choice:has(input:checked) {
  border-color: rgba(80, 189, 255, .68) !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(49, 174, 246, .18), transparent 52%),
    rgba(10, 29, 48, .84) !important;
  box-shadow: inset 0 0 0 1px rgba(83, 196, 255, .18), 0 10px 24px rgba(10, 104, 174, .14) !important;
}
.avatar-frame-preview {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  margin-top: 5px !important;
}
.avatar-frame-choice small {
  margin-top: 9px !important;
  color: #c1d1e3 !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
}
.avatar-frame-choice em {
  margin-top: 4px !important;
  font-size: 8px !important;
}
.avatar-frame-sakura { --frame-ring-2: #ffd5e9; }
.avatar-frame-slime { --frame-ring-2: #c8ffda; }
.avatar-frame-strawhat { --frame-ring-2: #fff0a5; }
.avatar-frame-neon { --frame-ring-2: #d6fbff; }
.avatar-frame-ocean { --frame-ring-2: #d9f5ff; }
.avatar-frame-violet { --frame-ring-2: #eadfff; }
.avatar-frame-flame { --frame-ring-2: #ffe1c4; }
.avatar-frame-gold { --frame-ring-2: #fff8c7; }
.avatar-frame-ice { --frame-ring-2: #f1fbff; }
.avatar-frame-manga { --frame-ring-2: #ffffff; }
.avatar-frame-cyber { --frame-ring-2: #c7fbff; }
.avatar-frame-emerald { --frame-ring-2: #d5ffed; }
.avatar-frame-storm { --frame-ring-2: #e0e7ff; }
.avatar-frame-cosmos { --frame-ring-2: #d8c9ff; }
.avatar-frame-rose { --frame-ring-2: #ffe0e6; }
.avatar-frame-ruby { --frame-ring-2: #ffd7d7; }
.avatar-frame-aqua { --frame-ring-2: #d8fffa; }
.avatar-frame-kage { --frame-ring-2: #fff2b8; }
.avatar-frame-legend { --frame-ring-2: #ffe1a8; }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .avatar-frame-choice:hover .avatar-frame-preview {
    transform: translate3d(0, -2px, 0) scale(1.035) !important;
  }
}

/* Light theme parity. */
:root[data-theme="light"] .release-page .recommendations-heading h2 { color: #14243a !important; }
:root[data-theme="light"] .admin-page-dashboard .stat-card,
:root[data-theme="light"] .admin-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,249,255,.96)) !important;
}
:root[data-theme="light"] .admin-release-status {
  color: #17699e;
  background: rgba(37, 147, 218, .09);
}
:root[data-theme="light"] .avatar-frame-choice {
  background: rgba(244, 249, 255, .88) !important;
}
:root[data-theme="light"] .avatar-frame-choice small { color: #42546b !important; }

@media (max-width: 1180px) {
  :root { --v98-admin-sidebar: 176px; }
  .admin-main { max-width: 1180px !important; padding-inline: 16px !important; }
  .admin-nav a { font-size: 10.5px !important; }
  .release-page .recommend-card { flex-basis: 118px !important; width: 118px !important; min-width: 118px !important; }
}

@media (max-width: 980px) {
  .admin-sidebar { width: min(224px, 84vw) !important; }
  .admin-content { width: 100% !important; }
  .admin-main { max-width: none !important; padding: 15px 14px 22px !important; }
  .stats-grid.admin-dashboard-stats,
  .admin-page-dashboard .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .avatar-frame-picker { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .release-page .recommendations-section {
    width: calc(100vw - 22px) !important;
    padding: 15px 13px 13px !important;
    border-radius: 20px !important;
  }
  .release-page .recommendations-heading { padding-bottom: 10px !important; }
  .release-page .recommend-card { flex-basis: 112px !important; width: 112px !important; min-width: 112px !important; }
  .admin-dashboard-heading { align-items: flex-start; }
  .admin-dashboard-create span { display: none; }
  .admin-topbar { padding-inline: 12px !important; }
  .avatar-frame-picker { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  .admin-dashboard-heading { display: grid; grid-template-columns: 1fr auto; }
  .stats-grid.admin-dashboard-stats,
  .admin-page-dashboard .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .admin-page-dashboard .stat-card { min-height: 66px !important; padding: 9px 10px !important; }
  .admin-page-dashboard .stat-card > i { width: 33px !important; height: 33px !important; min-width: 33px !important; }
  .admin-page-dashboard .stat-num { font-size: 20px !important; }
  .admin-panel { padding: 11px !important; border-radius: 15px !important; }
  .admin-table { min-width: 650px !important; }
  .avatar-frame-picker { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .avatar-frame-choice { min-height: 108px !important; }
  .avatar-frame-preview { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }
}

@media (max-width: 390px) {
  .avatar-frame-picker { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-frame,
  .avatar-frame-choice,
  .admin-row-action { transition: none !important; }
}