/* ==========================================================================
   URURC-A — interface layer (v5)
   A light, high-contrast product surface: ink text, hairline rules, one
   controlled accent, real assets. Presentation only; no markup contract,
   form binding or endpoint is defined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */

:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --brand: #f2a400;
  --brand-rgb: 242, 164, 0;
  --brand-strong: #8a5a00;
  --brand-soft: rgba(var(--brand-rgb), 0.12);
  --on-brand: #1a1204;
  --ring: rgba(var(--brand-rgb), 0.32);

  --ink: #0b0d10;
  --ink-2: #1d232c;
  --on-ink: #ffffff;
  --text: #0b0d10;
  --text-soft: #333a45;
  --body-text: #434a55;
  --muted: #5f6773;
  --faint: #767e8a;

  --line: #e6e8ec;
  --line-2: #d5dae1;
  --grid: rgba(11, 13, 16, 0.035);

  --canvas: #f7f8f9;
  --surface: #ffffff;
  --surface-2: #fbfbfc;
  --surface-3: #f1f3f5;
  --field: #ffffff;
  --header: #ffffff;
  --sidebar: #fbfbfc;
  --hover: rgba(11, 13, 16, 0.045);
  --link: var(--brand-strong);

  --success: #0f7d55;
  --danger: #c0362c;
  --info: #1f6fb2;
  --warning: #a86a00;

  --r-xs: 4px;
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --sh-1: 0 1px 2px rgba(11, 13, 16, 0.06);
  --sh-2: 0 1px 2px rgba(11, 13, 16, 0.05), 0 10px 24px -18px rgba(11, 13, 16, 0.35);
  --sh-3: 0 1px 2px rgba(11, 13, 16, 0.05), 0 28px 60px -38px rgba(11, 13, 16, 0.45);

  --nav-h: 60px;
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

@supports (color: color-mix(in srgb, #000, #fff)) {
  :root {
    /* Keeps link-sized accent text readable whatever accent is chosen. */
    --brand-strong: color-mix(in srgb, var(--brand) 42%, #0b0d10);
  }
}

body.dark-mode,
html[data-mode="dark"] {
  --ink: #f2f4f7;
  --ink-2: #e2e7ec;
  --on-ink: #0b0d10;
  --text: #eef1f4;
  --text-soft: #d3d9e0;
  --body-text: #adb6c1;
  --muted: #98a2ae;
  --faint: #808a96;

  --line: #232a33;
  --line-2: #333c47;
  --grid: rgba(255, 255, 255, 0.05);

  --canvas: #0b0d10;
  --surface: #111419;
  --surface-2: #151a20;
  --surface-3: #1b2129;
  --field: #0f1318;
  --header: #0f1216;
  --sidebar: #0d1014;
  --hover: rgba(255, 255, 255, 0.06);
  --link: var(--brand-strong);
  --brand-strong: #ffc65c;
  --brand-strong: color-mix(in srgb, var(--brand) 58%, #ffffff);
  --ring: rgba(var(--brand-rgb), 0.4);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -20px rgba(0, 0, 0, 0.8);
  --sh-3: 0 1px 2px rgba(0, 0, 0, 0.4), 0 32px 64px -40px rgba(0, 0, 0, 0.9);
}

/* An explicit light choice must win over a dark account preference. */
html[data-mode="light"] body {
  --ink: #0b0d10;
  --ink-2: #1d232c;
  --on-ink: #ffffff;
  --text: #0b0d10;
  --text-soft: #333a45;
  --body-text: #434a55;
  --muted: #5f6773;
  --faint: #767e8a;

  --line: #e6e8ec;
  --line-2: #d5dae1;
  --grid: rgba(11, 13, 16, 0.035);

  --canvas: #f7f8f9;
  --surface: #ffffff;
  --surface-2: #fbfbfc;
  --surface-3: #f1f3f5;
  --field: #ffffff;
  --header: #ffffff;
  --sidebar: #fbfbfc;
  --hover: rgba(11, 13, 16, 0.045);
  --brand-strong: #8a5a00;
  --brand-strong: color-mix(in srgb, var(--brand) 42%, #0b0d10);
  --ring: rgba(var(--brand-rgb), 0.32);

  --sh-1: 0 1px 2px rgba(11, 13, 16, 0.06);
  --sh-2: 0 1px 2px rgba(11, 13, 16, 0.05), 0 10px 24px -18px rgba(11, 13, 16, 0.35);
  --sh-3: 0 1px 2px rgba(11, 13, 16, 0.05), 0 28px 60px -38px rgba(11, 13, 16, 0.45);

  /* Needed because the account may still carry a dark preference in the body
     class while the browser's own choice says light. */
  --glass-surface: color-mix(in srgb, var(--surface) 54%, transparent);
  --glass-raised: color-mix(in srgb, var(--surface) 74%, transparent);
  --glass-line: color-mix(in srgb, var(--line) 64%, transparent);
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

a:hover,
a:focus {
  color: var(--ink);
  text-decoration: none;
}

b, strong {
  font-weight: 600;
}

small {
  font-size: 0.82em;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

pre {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-soft);
  padding: 1rem;
}

hr {
  border-top: 1px solid var(--line);
}

::selection {
  background: rgba(var(--brand-rgb), 0.3);
  color: var(--ink);
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 3px solid var(--canvas);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
}

/* Focus is always visible, and always the same shape. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2. Application chrome
   -------------------------------------------------------------------------- */

.main-header.navbar {
  background: var(--header);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  min-height: var(--nav-h);
  padding: 0;
}

.layout-top-nav .main-header.navbar {
  padding: 0;
}

.main-header .container {
  align-items: center;
  max-width: 1280px;
  min-height: var(--nav-h);
  padding: 0 1.25rem;
  width: 100%;
}

.main-header .navbar-brand {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 0.9rem;
  margin-right: 1.5rem;
  padding: 0;
}

.main-header .navbar-brand .brand-logo {
  height: 32px;
  width: auto;
}

.main-header .navbar-brand .brand-wordmark {
  height: 24px;
  max-width: 190px;
  width: auto;
}

/* Optical centring: the wordmark sits a touch closer to the mark than it
   looks balanced, so nudge it right. Desktop / tablet only — the phone
   header is already tight and must stay untouched. */
@media (min-width: 768px) {
  .main-header .navbar-brand .brand-wordmark {
    margin-left: 0.8rem;
  }
}

.main-header .navbar-nav {
  align-items: center;
  gap: 0.1rem;
}

.main-header .nav-link {
  align-items: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.7rem;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  white-space: nowrap;
}

.main-header .nav-link:hover,
.main-header .nav-link:focus {
  background: var(--hover);
  color: var(--ink);
}

.main-header .nav-item.active > .nav-link,
.main-header .nav-link.active {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

.main-header .nav-link > .fas,
.main-header .nav-link > .far,
.main-header .nav-link > .fab {
  color: var(--faint);
  font-size: 0.8rem;
}

.main-header .nav-link:hover > .fas {
  color: var(--ink);
}

.main-header .navbar-custom-menu {
  margin-left: auto;
}

.main-header .navbar-badge {
  background: var(--danger);
  border: 0;
  border-radius: 9px;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  top: 4px;
}

body.dark-mode .main-header.navbar {
  background: var(--header);
  border-bottom-color: var(--line);
}

/* Sidebar */

.main-sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  box-shadow: none !important;
}

.main-sidebar .brand-link {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
}

.main-sidebar .brand-link .brand-logo {
  height: 32px;
  width: auto;
}

.main-sidebar .brand-link .brand-wordmark {
  height: 23px;
  max-width: 185px;
  width: auto;
}

/* Same optical nudge for the sidebar brand, pinned desktop sidebar only. */
@media (min-width: 992px) {
  .main-sidebar .brand-link .brand-wordmark {
    margin-left: 0.8rem;
  }
}

.nav-sidebar {
  padding: 0.6rem 0.55rem 1.5rem;
}

.nav-sidebar .nav-item {
  margin: 1px 0;
}

.nav-sidebar .nav-link {
  align-items: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  display: flex;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.48rem 0.65rem;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.nav-sidebar .nav-link:hover {
  background: var(--hover);
  color: var(--ink);
}

.nav-sidebar .nav-link.active {
  background: var(--surface);
  box-shadow: inset 2px 0 0 var(--brand), var(--sh-1);
  color: var(--ink);
  font-weight: 600;
}

.nav-sidebar .nav-link.active .nav-icon {
  color: var(--brand-strong);
}

.nav-sidebar .nav-icon {
  color: var(--faint);
  font-size: 0.78rem;
  margin-right: 0.55rem;
  text-align: center;
  width: 1.1rem;
}

.nav-sidebar .nav-link > p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-sidebar .nav-header {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 1rem 0.7rem 0.35rem;
  text-transform: uppercase;
}

.nav-sidebar .nav-treeview {
  background: transparent;
  padding: 2px 0 2px 0.55rem;
}

.nav-sidebar .nav-treeview .nav-link {
  font-size: 0.82rem;
  padding-left: 1.4rem;
}

.user-panel {
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1rem;
}

.user-panel .info a {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
}

.user-panel .info a:hover {
  color: var(--link);
}

/* Content shell */

.content-wrapper {
  background: var(--canvas);
  color: var(--text);
}

.content-header {
  padding: 1.6rem 0 0.35rem;
}

.content-header h1 {
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.breadcrumb {
  background: transparent;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
}

.breadcrumb-item a {
  color: var(--muted);
}

.breadcrumb-item.active {
  color: var(--text-soft);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--faint);
}

/* Top-nav (skin library) page body */

.skinlib-page .wrapper {
  background: var(--canvas);
}

.skinlib-page .content-wrapper {
  padding: 1.75rem 0 2.5rem;
}

/* --------------------------------------------------------------------------
   3. Surfaces
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  color: var(--text);
  margin-bottom: 1.25rem;
}

.card-header {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid var(--line);
  display: flex;
  font-size: 0.92rem;
  font-weight: 600;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.15rem;
}

.card-header:first-child {
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.card-title {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.card-body {
  color: var(--text);
  padding: 1.15rem;
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 0.75rem 1.15rem;
}

.card-footer:last-child {
  border-radius: 0 0 var(--r-md) var(--r-md);
}

.card-primary.card-outline {
  border-top: 2px solid var(--brand);
}

.card-warning.card-outline {
  border-top: 2px solid var(--warning);
}

.card-tabs .card-header {
  padding-bottom: 0;
}

.card-img-top {
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.small-box {
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.small-box .inner h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.small-box .icon {
  opacity: 0.16;
}

.small-box .icon > i {
  font-size: 62px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  display: inline-flex;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.45rem;
  height: 38px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 0.95rem;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
    color 0.16s var(--ease), box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-sm {
  border-radius: var(--r-xs);
  font-size: 0.8rem;
  height: 30px;
  padding: 0 0.7rem;
}

.btn-lg {
  font-size: 0.95rem;
  height: 46px;
  padding: 0 1.2rem;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--sh-1);
  color: var(--on-ink);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--on-ink);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28);
  color: var(--on-ink);
}

.btn-default,
.btn-light {
  background: var(--surface);
  border-color: var(--line-2);
  box-shadow: var(--sh-1);
  color: var(--ink);
}

.btn-default:hover,
.btn-light:hover,
.btn-default:focus,
.btn-light:focus {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-secondary {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--text-soft);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--hover);
  color: var(--ink);
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.btn-success:hover,
.btn-success:focus {
  background: #0c6a48;
  border-color: #0c6a48;
  color: #fff;
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
  background: #a52c24;
  border-color: #a52c24;
  color: #fff;
}

.btn-warning {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.btn-warning:hover,
.btn-warning:focus {
  background: #e09a00;
  border-color: #e09a00;
  color: var(--on-brand);
}

.btn-info {
  background: var(--info);
  border-color: var(--info);
  color: #fff;
}

.btn-info:hover,
.btn-info:focus {
  background: #1a5f99;
  border-color: #1a5f99;
  color: #fff;
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--line-2);
  color: var(--text-soft);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--hover);
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-outline-success {
  border-color: var(--success);
  color: var(--success);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background: var(--success);
  color: #fff;
}

.btn-outline-info {
  border-color: var(--line-2);
  color: var(--text-soft);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background: var(--hover);
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-outline-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background: var(--danger);
  color: #fff;
}

.btn-link {
  color: var(--link);
  font-weight: 500;
  height: auto;
  padding: 0;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-flat {
  box-shadow: none;
}

.btn-group-toggle > .btn {
  border-radius: 0;
}

.btn-group-toggle > .btn:first-child {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.btn-group-toggle > .btn:last-child {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.btn-color {
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 0 2px var(--surface);
  height: 22px;
  width: 22px;
}

.btn-color.bg-white {
  border-color: #c9ced6;
}

.btn-color.bg-black {
  border-color: #000;
}

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */

.form-control {
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9rem;
  height: 42px;
  line-height: 1.45;
  padding: 0.5rem 0.75rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.form-control:focus {
  background: var(--field);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
  color: var(--ink);
  outline: none;
}

.form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--surface-3);
  color: var(--muted);
  opacity: 1;
}

select.form-control {
  height: 42px;
  padding-right: 2rem;
}

select.form-control-sm {
  height: 32px;
}

textarea.form-control {
  height: auto;
  min-height: 96px;
  padding: 0.6rem 0.75rem;
}

.form-control-sm {
  border-radius: var(--r-xs);
  font-size: 0.82rem;
  height: 32px;
  padding: 0.25rem 0.55rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group > label {
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.custom-control-label {
  color: var(--text-soft);
  font-size: 0.875rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ink);
  border-color: var(--ink);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--ring);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--line-2);
}

.custom-select {
  background-color: var(--field);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  height: 42px;
}

.custom-file-label {
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--muted);
  height: 42px;
  line-height: 40px;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

.input-group-text {
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 0.85rem;
}

.input-group > .form-control {
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.input-group-append > .btn,
.input-group-append > .input-group-text {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.invalid-feedback,
.help-block {
  color: var(--danger);
  font-size: 0.8rem;
}

.is-invalid,
.form-control.is-invalid {
  border-color: var(--danger);
}

.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 54, 44, 0.22);
}

.valid-feedback {
  color: var(--success);
  font-size: 0.8rem;
}

.form-text,
.text-muted {
  color: var(--muted) !important;
}

/* --------------------------------------------------------------------------
   6. Tables
   -------------------------------------------------------------------------- */

.table {
  border-color: var(--line);
  color: var(--text-soft);
  margin-bottom: 0;
}

.table thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-top: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.8rem;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.table td {
  border-top: 1px solid var(--line);
  padding: 0.72rem 0.8rem;
  vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--surface-2);
}

.table-hover tbody tr:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.table-responsive {
  border-radius: var(--r-md);
}

.table .btn {
  height: 30px;
}

.table-sm td,
.table-sm th {
  padding: 0.5rem 0.6rem;
}

/* --------------------------------------------------------------------------
   7. Badges, chips, avatars
   -------------------------------------------------------------------------- */

.badge {
  border-radius: var(--r-xs);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.28em 0.5em;
  vertical-align: 1px;
}

.badge-pill {
  border-radius: 10px;
}

.badge.bg-white,
.badge.bg-light {
  border: 1px solid var(--line-2);
  color: var(--ink);
}

.badge.bg-warning {
  color: var(--on-brand);
}

.badge.bg-dark,
.badge.bg-black {
  color: #fff;
}

.bs-avatar {
  border-radius: 50%;
  height: 26px;
  object-fit: cover;
  width: 26px;
}

.user-panel .image img,
.user-panel .image .bs-avatar {
  height: 34px;
  width: 34px;
}

.user-menu .bs-avatar {
  margin-right: 0.45rem;
}

img.avatar,
.avatar {
  border-radius: 50%;
  object-fit: cover;
}

.texture-name {
  color: var(--ink);
  font-weight: 600;
}

.text-danger {
  color: var(--danger) !important;
}

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-info {
  color: var(--info) !important;
}

.text-primary {
  color: var(--link) !important;
}

.text-body {
  color: var(--body-text) !important;
}

.bg-primary {
  background-color: var(--ink) !important;
  color: var(--on-ink) !important;
}

.border-primary {
  border-color: var(--ink) !important;
}

/* --------------------------------------------------------------------------
   8. Menus, modals, notices, tabs
   -------------------------------------------------------------------------- */

.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  color: var(--text);
  font-size: 0.875rem;
  margin-top: 0.4rem;
  padding: 0.35rem;
}

.dropdown-menu-lg {
  max-width: 300px;
  min-width: 220px;
}

.dropdown-item {
  border-radius: var(--r-xs);
  color: var(--text-soft);
  font-size: 0.86rem;
  padding: 0.45rem 0.6rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-3);
  color: var(--ink);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--hover);
  color: var(--ink);
}

.dropdown-item-danger,
.dropdown-item.text-danger {
  color: var(--danger) !important;
}

.dropdown-item-danger:hover {
  background: rgba(192, 54, 44, 0.08);
  color: var(--danger) !important;
}

.dropdown-divider {
  border-top: 1px solid var(--line);
  margin: 0.35rem 0;
}

.dropdown-header {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.6rem;
  text-transform: uppercase;
}

.dropdown-toggle::after {
  border-top-color: var(--faint);
  vertical-align: 0.15em;
}

.modal-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  color: var(--text);
}

.modal-header {
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
}

.modal-title {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  border-top: 1px solid var(--line);
  padding: 0.85rem 1.25rem;
}

.modal-backdrop.show {
  opacity: 0.42;
}

.close {
  color: var(--muted);
  opacity: 1;
  text-shadow: none;
}

.close:hover {
  color: var(--ink);
}

.alert {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--faint);
  border-radius: var(--r-sm);
  color: var(--body-text);
  font-size: 0.86rem;
  padding: 0.8rem 1rem;
}

.alert > a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.alert-success {
  border-left-color: var(--success);
}

.alert-danger {
  border-left-color: var(--danger);
}

.alert-warning {
  border-left-color: var(--warning);
}

.alert-info {
  border-left-color: var(--info);
}

.alert-dismissible .close {
  color: var(--muted);
  padding: 0.8rem 1rem;
}

.nav-tabs {
  border-bottom: 1px solid var(--line);
}

.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: -1px;
  padding: 0.55rem 0.85rem;
}

.nav-tabs .nav-link:hover {
  border-bottom-color: var(--line-2);
  color: var(--ink);
}

.nav-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}

.nav-pills .nav-link {
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.875rem;
}

.nav-pills .nav-link.active {
  background: var(--ink);
  color: var(--on-ink);
}

.list-group-item {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-soft);
}

.list-group-item.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.toast {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  color: var(--text);
}

.toast-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.pagination {
  gap: 0.2rem;
}

.page-link {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--text-soft);
  font-size: 0.82rem;
  margin: 0;
  min-width: 32px;
  padding: 0.35rem 0.55rem;
  text-align: center;
}

.page-link:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--ink);
}

.page-item.active .page-link {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

.page-item.disabled .page-link {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

.main-footer,
#copyright {
  background: var(--canvas);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  padding: 1.1rem 0;
}

.main-footer .container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 1280px;
  padding: 0 1.25rem;
}

#copyright .container {
  max-width: 1280px;
  padding: 0 1.25rem;
}

#copyright-text {
  color: var(--muted);
}

#copyright a,
.main-footer a {
  color: var(--body-text);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}

#copyright a:hover,
.main-footer a:hover {
  color: var(--ink);
  text-decoration-color: var(--brand);
}

/* --------------------------------------------------------------------------
   10. Landing page
   -------------------------------------------------------------------------- */

.home-page {
  background: var(--canvas);
  color: var(--text);
}

.home-page .hp-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

.home-main {
  flex: 1 0 auto;
  padding-top: var(--nav-h);
}

.home-page .container {
  max-width: 1200px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  width: 100%;
}

/* Nav */

.home-page .navbar {
  background: var(--header);
  border-bottom: 1px solid var(--line);
  padding: 0;
  transition: box-shadow 0.2s var(--ease);
}

.home-page .navbar .container {
  max-width: 1200px;
  min-height: var(--nav-h);
}

.home-page .navbar-brand {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
}

.home-page .navbar-brand .brand-logo {
  height: 30px;
  width: auto;
}

.home-page .navbar-brand .brand-wordmark {
  height: 20px;
  max-width: 160px;
  width: auto;
}

.home-page .navbar-nav {
  align-items: center;
  gap: 0.15rem;
}

.home-page .navbar .nav-link {
  align-items: center;
  border-radius: var(--r-sm);
  color: var(--muted) !important;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  height: 36px;
  padding: 0 0.7rem;
  white-space: nowrap;
}

.home-page .navbar .nav-link:hover {
  background: var(--hover);
  color: var(--ink) !important;
}

.home-page .navbar .nav-cta {
  background: var(--ink);
  color: var(--on-ink) !important;
  font-weight: 600;
  margin-left: 0.35rem;
  padding: 0 0.9rem;
}

.home-page .navbar .nav-cta:hover {
  background: var(--ink-2);
  color: var(--on-ink) !important;
}

.home-page .navbar .nav-cta i {
  color: var(--on-ink);
}

/* Hero */

.hero {
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 6.5vw, 5.25rem) 0 clamp(2.75rem, 5vw, 4rem);
  position: relative;
}

.hero::before {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 0%, #000 22%, transparent 78%);
  mask-image: radial-gradient(ellipse 82% 72% at 50% 0%, #000 22%, transparent 78%);
  pointer-events: none;
  position: absolute;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 4rem);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
}

.eyebrow {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  gap: 0.6rem;
  letter-spacing: 0.16em;
  margin: 0 0 1.15rem;
  text-transform: uppercase;
}

.eyebrow::before {
  background: var(--brand);
  border-radius: 1px;
  content: "";
  height: 2px;
  width: 20px;
}

.hero-title {
  color: var(--ink);
  font-size: clamp(2.55rem, 4.6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.08;
  margin: 0 0 1.1rem;
}

.hero-desc {
  color: var(--body-text);
  font-size: 1rem;
  line-height: 1.85;
  margin: 0 0 1.9rem;
  max-width: 33rem;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.btn-cta,
.btn-ghost {
  align-items: center;
  border-radius: var(--r);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 0.5rem;
  height: 46px;
  justify-content: center;
  padding: 0 1.3rem;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}

.btn-cta {
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--sh-1);
  color: var(--on-ink);
}

.btn-cta i {
  font-size: 0.72rem;
  transition: transform 0.16s var(--ease);
}

.btn-cta:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--sh-2);
  color: var(--on-ink);
  transform: translateY(-1px);
}

.btn-cta:hover i {
  transform: translateX(2px);
}

.btn-ghost {
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-1);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--ink);
  transform: translateY(-1px);
}

.hero-stats {
  border-top: 1px solid var(--line);
  display: flex;
  margin-top: 2.6rem;
  max-width: 30rem;
  padding-top: 1.35rem;
}

.stat {
  border-left: 1px solid var(--line);
  padding: 0 1.7rem;
}

.stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.stat b {
  color: var(--ink);
  display: block;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.stat span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* Product visual */

.hero-visual {
  margin: 0;
  min-width: 0;
}

.visual-frame {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 8px;
  position: relative;
}

.visual-shot {
  border-radius: var(--r-lg);
  display: block;
  height: auto;
  width: 100%;
}

.visual-chip {
  align-items: center;
  background: rgba(8, 10, 13, 0.82);
  border-radius: var(--r-xs);
  color: #fff;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  gap: 0.4rem;
  letter-spacing: 0.12em;
  padding: 0.32rem 0.5rem;
  position: absolute;
  right: 20px;
  top: 20px;
}

.visual-chip::before {
  background: var(--brand);
  border-radius: 50%;
  content: "";
  height: 5px;
  width: 5px;
}

.visual-card {
  align-items: center;
  background: #fff;
  border-radius: var(--r-md);
  bottom: 20px;
  box-shadow: 0 12px 30px -14px rgba(8, 10, 13, 0.5), 0 0 0 1px rgba(8, 10, 13, 0.06);
  display: flex;
  gap: 0.65rem;
  left: 20px;
  padding: 0.55rem 0.8rem 0.55rem 0.55rem;
  position: absolute;
}

.visual-thumb {
  align-items: center;
  background: #f1f3f5;
  border-radius: var(--r-sm);
  display: flex;
  height: 50px;
  justify-content: center;
  width: 50px;
}

.visual-thumb img {
  height: 100%;
  object-fit: contain;
  padding: 2px;
  width: 100%;
}

.visual-info b {
  color: #0b0d10;
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.visual-info span {
  color: #5f6773;
  display: block;
  font-size: 0.68rem;
  margin-top: 1px;
}

.visual-meta {
  color: var(--muted);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: 0.1em;
  margin-top: 0.85rem;
  text-transform: uppercase;
}

/* Capability strip */

.home-specs {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spec {
  border-left: 1px solid var(--line);
  padding: 1.6rem 1.9rem 1.7rem;
}

.spec:first-child {
  border-left: 0;
  padding-left: 0;
}

.spec-index {
  color: var(--brand-strong);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.55rem;
}

.spec h3 {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.spec p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.75;
  margin: 0;
}

/* Archive */

.home-archive {
  background: var(--surface);
  padding: clamp(2.25rem, 4.5vw, 3.25rem) 0 clamp(2.75rem, 5vw, 3.75rem);
}

.archive-head {
  align-items: flex-end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.archive-head h2 {
  align-items: baseline;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.12rem;
  font-weight: 600;
  gap: 0.65rem;
  letter-spacing: -0.015em;
  margin: 0;
}

.archive-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.archive-all {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  flex: none;
  font-size: 0.82rem;
  font-weight: 600;
  gap: 0.35rem;
}

.archive-all i {
  font-size: 0.62rem;
  transition: transform 0.16s var(--ease);
}

.archive-all:hover {
  color: var(--link);
}

.archive-all:hover i {
  transform: translateX(2px);
}

.archive-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.archive-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: block;
  overflow: hidden;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
    transform 0.16s var(--ease);
}

.archive-media {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  display: flex;
  justify-content: center;
  padding: 12%;
}

.archive-media img {
  filter: drop-shadow(0 8px 12px rgba(11, 13, 16, 0.14));
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.18s var(--ease);
}

.archive-body {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.45rem;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
}

.archive-name {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-type {
  color: var(--muted);
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
}

.archive-item:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.archive-item:hover .archive-media img {
  transform: translateY(-2px);
}

.archive-item:hover .archive-name {
  color: var(--link);
}

/* Legacy intro blocks (only rendered when hide_intro is off) */

#intro {
  background: var(--canvas);
  border-top: 1px solid var(--line);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

#intro .intro-head {
  margin-bottom: 2rem;
}

#intro h2 {
  color: var(--ink);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  height: 100%;
  padding: 1.35rem;
}

.feature-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.feature-index {
  color: var(--brand-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.feature-head i {
  color: var(--faint);
  font-size: 0.95rem;
}

.feature-card h3 {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.feature-card p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.75;
  margin: 0;
}

#footer-wrap {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--body-text);
  font-size: 0.88rem;
  padding: 2.25rem 0;
}

#footer-wrap .main-button {
  align-items: center;
  background: var(--ink);
  border-radius: var(--r);
  color: var(--on-ink);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 600;
  height: 42px;
  padding: 0 1rem;
}

#footer-wrap .main-button:hover {
  background: var(--ink-2);
  color: var(--on-ink);
}

/* --------------------------------------------------------------------------
   11. Auth pages
   -------------------------------------------------------------------------- */

.auth-page {
  background: var(--canvas);
  color: var(--text);
  display: block;
  height: auto;
  min-height: 100vh;
}

.auth-page .auth-shell {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem 1.25rem;
  position: relative;
}

.auth-page .auth-shell::before {
  background:
    radial-gradient(760px 380px at 50% -8%, rgba(var(--brand-rgb), 0.12), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 80%);
  pointer-events: none;
  position: absolute;
}

.auth-page .auth-head {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.auth-brand {
  align-items: center;
  display: inline-flex;
  gap: 1.1rem;
  left: -14px;
  position: relative;
}

.auth-brand .brand-logo {
  height: 64px;
  width: auto;
}

.auth-brand .brand-wordmark {
  height: 46px;
  max-width: 340px;
  width: auto;
}

@media (max-width: 479.98px) {
  .auth-brand {
    gap: 0.8rem;
    left: -8px;
  }

  .auth-brand .brand-logo {
    height: 48px;
  }

  .auth-brand .brand-wordmark {
    height: 34px;
    max-width: 220px;
  }
}

.auth-page .auth-main {
  display: block;
  max-width: 430px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.auth-page .login-box {
  margin: 0 auto;
  max-width: none;
  width: 100%;
}

.auth-page .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 2px 0 0 var(--brand), 0 1px 2px rgba(11, 13, 16, 0.05),
    0 24px 48px -32px rgba(11, 13, 16, 0.4);
  margin: 0;
  overflow: hidden;
}

/* AdminLTE paints the body opaque white with square corners, which covered
   the rounded card edge and killed the glass effect. Let the card surface
   show through instead. */
.auth-page .card-body {
  background: transparent;
  padding: 1.9rem;
}

.auth-page .login-card-body,
.auth-page .register-card-body {
  background: transparent;
  padding: 1.9rem;
}

.auth-page .login-box-msg {
  border: 0;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 1.4rem;
  padding: 0;
  text-align: left;
}

.auth-page .form-group {
  margin-bottom: 0.9rem;
}

.auth-page .form-control {
  height: 44px;
}

.auth-page .btn-block {
  font-size: 0.9rem;
  height: 44px;
  margin-top: 0.35rem;
}

.auth-page .mt-3 {
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  margin-top: 1.4rem !important;
  padding-top: 1rem;
  text-align: center;
}

.auth-page .mt-3 a {
  color: var(--link);
  font-weight: 600;
}

.auth-foot {
  color: var(--muted);
  font-size: 0.75rem;
  margin: 1.1rem 0 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. Theme Studio (admin)
   -------------------------------------------------------------------------- */

.studio {
  color: var(--text);
}

.studio-hero {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  padding: 1.3rem 1.4rem;
}

.studio-kicker {
  color: var(--brand-strong);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.studio-heading {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}

.studio-lead {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0;
  max-width: 46rem;
}

.studio-hero-side {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0.5rem;
}

.studio-hero-hint {
  color: var(--faint);
  font-size: 0.72rem;
}

.studio-pill {
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 600;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
}

.studio-pill.is-on {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-strong);
}

.studio-pill.is-quiet {
  color: var(--muted);
}

.studio-card {
  border-radius: var(--r-md);
}

.studio-block {
  margin-bottom: 1.4rem;
}

.studio-block-head {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.studio-block-head h3 {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}

.studio-presets {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.studio-preset {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-1);
  cursor: pointer;
  display: grid;
  gap: 0.6rem 0.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  overflow: hidden;
  padding: 0.6rem;
  position: relative;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease-out);
}

.studio-preset:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.studio-preset.is-active {
  border-color: var(--preset);
  box-shadow: inset 0 0 0 1px var(--preset), var(--sh-2);
}

.studio-radio {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.studio-preset-visual {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 46%),
    var(--preset-bg);
  border: 1px solid rgba(11, 13, 16, 0.07);
  border-radius: 11px;
  display: block;
  grid-column: 1 / -1;
  height: 104px;
  overflow: hidden;
  position: relative;
}

.studio-preset-bar {
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(11, 13, 16, 0.06);
  height: 22px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.studio-preset-rail {
  background: rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(11, 13, 16, 0.05);
  bottom: 0;
  left: 0;
  position: absolute;
  top: 22px;
  width: 24%;
}

.studio-preset-tile {
  background: #ffffff;
  border: 1px solid rgba(11, 13, 16, 0.05);
  border-radius: 6px;
  box-shadow: 0 6px 14px -10px rgba(11, 13, 16, 0.45);
  height: 32px;
  left: 32%;
  position: absolute;
  top: 34px;
  width: 27%;
}

.studio-preset-tile.is-second {
  height: 44px;
  left: calc(32% + 31%);
  top: 40px;
  width: 31%;
}

.studio-preset-cta {
  background: var(--preset);
  border-radius: 999px;
  bottom: 12px;
  height: 12px;
  left: 32%;
  opacity: 0.92;
  position: absolute;
  width: 46px;
}

.studio-preset-copy {
  display: block;
  grid-column: 1;
  min-width: 0;
}

.studio-preset-name {
  color: var(--ink);
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.studio-preset-desc {
  color: var(--muted);
  display: block;
  font-size: 0.68rem;
  line-height: 1.45;
  margin-top: 2px;
}

.studio-preset-dots {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(11, 13, 16, 0.06);
  border-radius: 999px;
  display: flex;
  gap: 3px;
  padding: 3px 5px;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
}

.studio-preset-dots i {
  border-radius: 50%;
  display: block;
  height: 5px;
  width: 5px;
}

.studio-preset-check {
  align-items: center;
  align-self: center;
  background: var(--preset);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-size: 0.54rem;
  grid-column: 2;
  height: 19px;
  justify-content: center;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease-out);
  width: 19px;
}

.studio-preset.is-active .studio-preset-check {
  opacity: 1;
  transform: none;
}

.studio-accent-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.studio-accent {
  margin-bottom: 0.75rem;
}

.studio-accent-swatch {
  border: 1px solid var(--line-2);
  border-radius: 50%;
  cursor: pointer;
  height: 26px;
  padding: 0;
  width: 26px;
}

.studio-accent-swatch.is-active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink);
}

.studio-accent-picker {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.studio-color-field {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.studio-hex {
  font-family: var(--font-mono);
  max-width: 9rem;
}

.studio-color-value {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.studio-sample-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.studio-sample {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.85rem;
}

.studio-dark-sample {
  background: #0b0d10;
  border-radius: var(--r);
  color: #f2f4f7;
  padding: 0.85rem;
}

.studio-dark-label {
  color: rgba(242, 244, 247, 0.6);
  display: block;
  font-size: 0.68rem;
  margin-bottom: 0.35rem;
}

.studio-dark-links {
  display: flex;
  gap: 0.5rem;
}

.studio-dark-links a {
  color: var(--brand);
  font-size: 0.72rem;
}

.studio-dark-chip {
  background: rgba(242, 244, 247, 0.1);
  border-radius: var(--r-xs);
  display: inline-block;
  font-size: 0.66rem;
  padding: 0.15rem 0.4rem;
}

.studio-dark-chip.is-alt {
  background: var(--brand);
  color: #1a1204;
}

.studio-tokens {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.9;
}

.studio-notice {
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  margin-bottom: 0.9rem;
  padding: 0.55rem 0.75rem;
}

.studio-notice.is-error {
  background: rgba(192, 54, 44, 0.08);
  color: var(--danger);
}

.studio-notice.is-success {
  background: rgba(15, 125, 85, 0.08);
  color: var(--success);
}

.studio-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.studio-actions-hint {
  color: var(--faint);
  font-size: 0.72rem;
}

.studio-reset {
  color: var(--muted);
  font-size: 0.76rem;
}

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */

html.ui-motion .ui-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

html.ui-motion .ui-reveal.ui-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.ui-motion .ui-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn-cta,
  .btn-ghost,
  .archive-item,
  .archive-media img,
  .archive-all i {
    transition: none;
  }

  .btn-cta:hover i {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .hero-grid {
    gap: 2.25rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }

  .stat {
    padding: 0 1.25rem;
  }
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-top: 2.5rem;
  }

  .hero-visual {
    max-width: 560px;
  }

  .hero-stats {
    max-width: none;
  }

  .specs-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 1.15rem 0;
  }

  .spec:first-child {
    border-top: 0;
    padding-top: 1.4rem;
  }

  .spec:last-child {
    padding-bottom: 1.5rem;
  }

  .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .content-header {
    padding-top: 1.15rem;
  }

  .content-header h1 {
    font-size: 1.15rem;
  }

  .main-header .container {
    padding: 0 0.9rem;
  }

  .home-page .container {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  .hero-title {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  .hero-desc {
    font-size: 0.94rem;
  }

  .hero-actions .btn-cta,
  .hero-actions .btn-ghost {
    flex: 1 1 auto;
  }

  .visual-chip {
    right: 14px;
    top: 14px;
  }

  .visual-card {
    bottom: 14px;
    left: 14px;
    padding: 0.45rem 0.65rem 0.45rem 0.45rem;
  }

  .visual-thumb {
    height: 42px;
    width: 42px;
  }

  .archive-head {
    align-items: center;
  }

  .archive-note {
    display: none;
  }

  .card-body {
    padding: 0.95rem;
  }

  .card-header {
    min-height: 48px;
    padding: 0.7rem 0.95rem;
  }

  .table td,
  .table th {
    padding: 0.55rem 0.6rem;
  }

  .auth-page .card-body,
  .auth-page .login-card-body {
    padding: 1.5rem 1.25rem;
  }

  .auth-page .login-box-msg {
    font-size: 1.2rem;
  }

  .studio-hero {
    flex-direction: column;
  }

  .studio-hero-side {
    align-items: flex-start;
  }

  .studio-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-sample-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .hero-stats {
    justify-content: space-between;
    margin-top: 2rem;
  }

  .stat {
    border-left: 0;
    padding: 0;
  }

  .stat b {
    font-size: 1.45rem;
  }

  .stat span {
    font-size: 0.72rem;
  }

  .archive-grid {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-meta {
    display: none;
  }

  .home-page .navbar-brand .brand-wordmark {
    height: 18px;
  }

  .home-page .navbar-brand .brand-logo {
    height: 27px;
  }

  .main-footer,
  #copyright {
    font-size: 0.74rem;
  }
}

/* --------------------------------------------------------------------------
   15. Interface themes (accent + light/dark)
   The saved look is applied as attributes on <html> before first paint.
   -------------------------------------------------------------------------- */

html[data-accent="amber"] {
  --brand: #ffae00;
  --brand-rgb: 255, 174, 0;
  --on-brand: #1a1204;
}

html[data-accent="ice"] {
  --brand: #2f6df6;
  --brand-rgb: 47, 109, 246;
  --on-brand: #ffffff;
}

html[data-accent="jade"] {
  --brand: #0f8a63;
  --brand-rgb: 15, 138, 99;
  --on-brand: #ffffff;
}

html[data-accent="ember"] {
  --brand: #c2452a;
  --brand-rgb: 194, 69, 42;
  --on-brand: #ffffff;
}

html[data-accent="graphite"] {
  --brand: #3a3f45;
  --brand-rgb: 58, 63, 69;
  --on-brand: #ffffff;
}

/* --------------------------------------------------------------------------
   16. Landing v6 — an image stage with technical readouts
   -------------------------------------------------------------------------- */

.home-page {
  --hero-fg: #f4f6f9;
  --hero-body: rgba(244, 246, 249, 0.78);
  --hero-muted: rgba(244, 246, 249, 0.64);
  --hero-line: rgba(255, 255, 255, 0.16);
  --hero-ring: var(--brand);
}

.home-page .hero {
  background: #0a0c10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hero-fg);
  display: flex;
  min-height: clamp(620px, calc(100vh - var(--nav-h)), 900px);
  overflow: hidden;
  position: relative;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

/* The old grid backdrop is replaced by an explicit layer. */
.home-page .hero::before {
  display: none;
}

.home-page .hero-atmos {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.home-page .hero-backdrop {
  background-position: center 42%;
  background-size: cover;
  inset: 0;
  position: absolute;
  transform: scale(1.03);
  animation: heroDrift 26s ease-in-out infinite alternate;
}

.home-page .hero-backdrop::after {
  background:
    linear-gradient(
      90deg,
      rgba(6, 8, 11, 0.96) 0%,
      rgba(6, 8, 11, 0.9) 30%,
      rgba(6, 8, 11, 0.56) 58%,
      rgba(6, 8, 11, 0.46) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 8, 11, 0.55) 0%,
      rgba(6, 8, 11, 0) 26%,
      rgba(6, 8, 11, 0) 54%,
      rgba(6, 8, 11, 0.88) 100%
    );
  content: "";
  inset: 0;
  position: absolute;
}

.home-page .hero-grid-lines {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  inset: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 78% 72% at 34% 44%,
    #000 18%,
    transparent 74%
  );
  mask-image: radial-gradient(
    ellipse 78% 72% at 34% 44%,
    #000 18%,
    transparent 74%
  );
  position: absolute;
}

.home-page .hero-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.06;
  position: absolute;
}

.home-page .hero > .container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(1.1rem, 2.6vw, 1.9rem);
  padding-bottom: clamp(1.2rem, 2.6vw, 2rem);
  padding-top: clamp(1.3rem, 2.8vw, 2.1rem);
  position: relative;
  z-index: 2;
}

/* Top readout */

.home-page .hero-top {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.home-page .eyebrow {
  align-items: center;
  color: var(--hero-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  gap: 0.55rem;
  letter-spacing: 0.18em;
  margin: 0;
  text-transform: uppercase;
}

.home-page .eyebrow::before {
  display: none;
}

.home-page .eyebrow-dot {
  background: var(--brand);
  display: inline-block;
  height: 5px;
  width: 5px;
}

.home-page .eyebrow-sep {
  color: var(--hero-line);
  letter-spacing: 0;
}

.home-page .eyebrow-year {
  opacity: 0.72;
}

.home-page .hero-status {
  align-items: center;
  color: var(--hero-muted);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  gap: 0.45rem;
  letter-spacing: 0.16em;
  margin: 0;
  white-space: nowrap;
}

.home-page .status-dot {
  animation: statusPulse 2.8s ease-in-out infinite;
  background: #25c07d;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(37, 192, 125, 0.16);
  display: inline-block;
  height: 6px;
  width: 6px;
}

.home-page .status-sep {
  background: var(--hero-line);
  display: inline-block;
  height: 1px;
  margin: 0 0.15rem;
  width: 14px;
}

/* Stage */

.home-page .hero-stage {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(1.2rem, 3.6vw, 2.8rem) 0;
  position: relative;
  z-index: 1;
}

.home-page .hero-copy {
  max-width: 42rem;
  min-width: 0;
}

.home-page .hero-title {
  color: var(--hero-fg);
  font-size: clamp(2.9rem, 6.2vw, 5.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 1.2rem;
}

.home-page .hero-title .line {
  display: block;
  margin-bottom: -0.08em;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.home-page .hero-title .line > span {
  animation: lineRise 0.9s var(--ease) both;
  display: block;
}

.home-page .hero-title .line:nth-child(2) > span {
  animation-delay: 0.09s;
}

.home-page .hero-desc {
  color: var(--hero-body);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.9;
  margin: 0 0 2rem;
  max-width: 31rem;
}

.home-page .hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.home-page .btn-cta,
.home-page .btn-ghost {
  align-items: center;
  border-radius: var(--r);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 600;
  gap: 0.65rem;
  height: 50px;
  justify-content: center;
  overflow: hidden;
  padding: 0 1.4rem;
  position: relative;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.home-page .btn-cta {
  background: var(--brand);
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  color: var(--on-brand);
}

.home-page .btn-cta::after {
  background: rgba(0, 0, 0, 0.32);
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
  width: 100%;
}

.home-page .btn-cta:hover {
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.8),
    0 0 0 4px rgba(var(--brand-rgb), 0.16);
  color: var(--on-brand);
  transform: translateY(-1px);
}

.home-page .btn-cta:hover::after {
  transform: scaleX(1);
}

.home-page .btn-cta:active {
  transform: translateY(0) scale(0.985);
}

.home-page .btn-cta i {
  font-size: 0.72rem;
  transition: transform 0.25s var(--ease);
}

.home-page .btn-cta:hover i {
  transform: translateX(3px);
}

.home-page .btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hero-line);
  color: var(--hero-fg);
}

.home-page .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--hero-fg);
  transform: translateY(-1px);
}

.home-page .btn-ghost:active {
  transform: translateY(0) scale(0.985);
}

.home-page .btn-cta:focus-visible,
.home-page .btn-ghost:focus-visible {
  outline: 2px solid var(--hero-ring);
  outline-offset: 3px;
}

/* Framed capture */

.home-page .hero-visual {
  animation: visualIn 0.85s 0.12s var(--ease) both;
  display: none;
  margin: 0;
  min-width: 0;
}

.home-page .visual-frame {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 10px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease);
  will-change: transform;
}

.home-page .visual-shot {
  aspect-ratio: 16 / 11;
  border-radius: var(--r-md);
  display: block;
  object-fit: cover;
  width: 100%;
}

.home-page .frame-bracket {
  border: 1px solid var(--line-2);
  height: 14px;
  position: absolute;
  width: 14px;
}

.home-page .frame-bracket--tl {
  border-bottom: 0;
  border-right: 0;
  left: -5px;
  top: -5px;
}

.home-page .frame-bracket--br {
  border-left: 0;
  border-top: 0;
  bottom: -5px;
  right: -5px;
}

.home-page .frame-readout {
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  line-height: 1.2;
  padding: 0 0.4rem;
  position: absolute;
}

.home-page .frame-readout--tl {
  left: 14px;
  top: -8px;
}

.home-page .frame-readout--br {
  bottom: -8px;
  right: 14px;
}

.home-page .frame-scan {
  animation: scanSweep 7s var(--ease) infinite;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--brand-rgb), 0.6),
    transparent
  );
  height: 1px;
  left: 10px;
  opacity: 0;
  position: absolute;
  right: 10px;
  top: 10px;
}

.home-page .visual-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  gap: 0.65rem;
  letter-spacing: 0.16em;
  margin-top: 0.85rem;
}

.home-page .meta-line {
  background: var(--line-2);
  flex: 1 1 auto;
  height: 1px;
}

/* Foot readout */

.home-page .hero-foot {
  align-items: flex-end;
  border-top: 1px solid var(--hero-line);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding-right: 5.5rem;
  padding-top: 1.05rem;
}

.home-page .hero-stats {
  display: flex;
}

.home-page .stat {
  border-left: 1px solid var(--hero-line);
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 7.5rem;
  padding: 0 1.8rem;
}

.home-page .stat:first-child {
  border-left: 0;
  padding-left: 0;
}

.home-page .stat-k {
  color: var(--hero-muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

.home-page .stat b {
  color: var(--hero-fg);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.home-page .stat-l {
  color: var(--hero-muted);
  font-size: 0.72rem;
}

.home-page .hero-tag {
  color: var(--hero-muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  margin: 0;
  white-space: nowrap;
}

/* Entrance */

.home-page .hero-top,
.home-page .hero-desc,
.home-page .hero-actions,
.home-page .hero-foot {
  animation: fadeUp 0.7s var(--ease) both;
}

.home-page .hero-top {
  animation-delay: 0.02s;
}

.home-page .hero-desc {
  animation-delay: 0.16s;
}

.home-page .hero-actions {
  animation-delay: 0.24s;
}

.home-page .hero-foot {
  animation-delay: 0.3s;
}

/* Layout transition */

.home-page .hero-stage,
.home-page .hero-top,
.home-page .hero-foot {
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.home-page .hero.is-switching .hero-stage,
.home-page .hero.is-switching .hero-top,
.home-page .hero.is-switching .hero-foot {
  opacity: 0.25;
  transform: translateY(5px);
}

/* --------------------------------------------------------------------------
   17. Layout templates
   -------------------------------------------------------------------------- */

html[data-layout="stage"] .home-page,
html[data-layout="split"] .home-page {
  --hero-fg: var(--ink);
  --hero-body: var(--body-text);
  --hero-muted: var(--muted);
  --hero-line: var(--line);
  --hero-ring: var(--brand-strong);
}

html[data-layout="stage"] .home-page .hero,
html[data-layout="split"] .home-page .hero {
  background: var(--canvas);
  border-bottom-color: var(--line);
}

html[data-layout="stage"] .home-page .hero-backdrop,
html[data-layout="split"] .home-page .hero-backdrop {
  display: none;
}

html[data-layout="stage"] .home-page .hero-grid-lines,
html[data-layout="split"] .home-page .hero-grid-lines {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(
    ellipse 70% 80% at 24% 12%,
    #000 8%,
    transparent 72%
  );
  mask-image: radial-gradient(
    ellipse 70% 80% at 24% 12%,
    #000 8%,
    transparent 72%
  );
}

html[data-layout="stage"] .home-page .hero-noise,
html[data-layout="split"] .home-page .hero-noise {
  mix-blend-mode: multiply;
  opacity: 0.035;
}

html[data-layout="stage"] .home-page .hero-stage,
html[data-layout="split"] .home-page .hero-stage {
  display: grid;
  gap: clamp(2rem, 4.5vw, 4.5rem);
}

html[data-layout="stage"] .home-page .hero-stage {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

html[data-layout="split"] .home-page .hero-stage {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

html[data-layout="stage"] .home-page .hero-visual,
html[data-layout="split"] .home-page .hero-visual {
  display: block;
}

html[data-layout="split"] .home-page .hero-visual {
  order: -1;
}

html[data-layout="stage"] .home-page .hero-title,
html[data-layout="split"] .home-page .hero-title {
  font-size: clamp(2.55rem, 4.6vw, 3.85rem);
}

html[data-layout="stage"] .home-page .hero-desc,
html[data-layout="split"] .home-page .hero-desc {
  font-size: 0.98rem;
  margin-bottom: 1.8rem;
  max-width: 28rem;
}

html[data-layout="stage"] .home-page .btn-cta,
html[data-layout="split"] .home-page .btn-cta {
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.12);
  color: var(--on-ink);
}

html[data-layout="stage"] .home-page .btn-cta:hover,
html[data-layout="split"] .home-page .btn-cta:hover {
  background: var(--ink-2);
  color: var(--on-ink);
}

html[data-layout="stage"] .home-page .btn-cta::after,
html[data-layout="split"] .home-page .btn-cta::after {
  background: var(--brand);
}

html[data-layout="stage"] .home-page .btn-ghost,
html[data-layout="split"] .home-page .btn-ghost {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
}

html[data-layout="stage"] .home-page .btn-ghost:hover,
html[data-layout="split"] .home-page .btn-ghost:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--ink);
}

html[data-layout="stage"] .home-page .frame-scan,
html[data-layout="split"] .home-page .frame-scan {
  opacity: 0;
}

/* Poster template follows the mode too (default/light): the screenshot stays
   as a washed texture instead of a dark hero under a light navbar. Dark mode
   keeps the cinematic base rules. */
html:not([data-mode="dark"]):not([data-layout="stage"]):not([data-layout="split"]) .home-page {
  --hero-fg: var(--ink);
  --hero-body: var(--body-text);
  --hero-muted: var(--muted);
  --hero-line: var(--line);
  --hero-ring: var(--brand-strong);
}

html:not([data-mode="dark"]):not([data-layout="stage"]):not([data-layout="split"]) .home-page .hero {
  background: #f4f6f8;
  border-bottom-color: var(--line);
}

html:not([data-mode="dark"]):not([data-layout="stage"]):not([data-layout="split"]) .home-page .hero-backdrop {
  filter: saturate(0.9) contrast(0.94) brightness(1.32);
  opacity: 0.55;
  transition: opacity 0.4s var(--ease), filter 0.4s var(--ease);
}

html:not([data-mode="dark"]):not([data-layout="stage"]):not([data-layout="split"]) .home-page .hero-backdrop::after {
  background:
    linear-gradient(
      90deg,
      rgba(244, 246, 248, 0.97) 0%,
      rgba(244, 246, 248, 0.92) 32%,
      rgba(244, 246, 248, 0.58) 62%,
      rgba(244, 246, 248, 0.5) 100%
    ),
    linear-gradient(
      180deg,
      rgba(244, 246, 248, 0.72) 0%,
      rgba(244, 246, 248, 0) 28%,
      rgba(244, 246, 248, 0) 58%,
      rgba(244, 246, 248, 0.9) 100%
    );
}

html:not([data-mode="dark"]):not([data-layout="stage"]):not([data-layout="split"]) .home-page .hero-grid-lines {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
}

html:not([data-mode="dark"]):not([data-layout="stage"]):not([data-layout="split"]) .home-page .hero-noise {
  mix-blend-mode: multiply;
  opacity: 0.035;
}

html:not([data-mode="dark"]):not([data-layout="stage"]):not([data-layout="split"]) .home-page .btn-cta {
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.12), 0 10px 22px -16px rgba(11, 13, 16, 0.5);
}

/* --------------------------------------------------------------------------
   18. Appearance dock
   -------------------------------------------------------------------------- */

.ui-dock {
  bottom: clamp(12px, 2vw, 22px);
  font-size: 13px;
  position: fixed;
  right: clamp(12px, 2vw, 22px);
  z-index: 1050;
}

.dock-trigger {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  gap: 0.5rem;
  height: 42px;
  padding: 0 0.85rem;
  transition: background-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.dock-trigger:hover {
  background: var(--surface);
  box-shadow: var(--sh-3);
  transform: translateY(-1px);
}

.dock-trigger:active {
  transform: scale(0.97);
}

.dock-trigger:focus-visible,
.dock-close:focus-visible,
.dock-layout:focus-visible,
.dock-accent:focus-visible,
.dock-mode:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
}

.dock-icon {
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  display: inline-block;
  height: 16px;
  overflow: hidden;
  position: relative;
  width: 16px;
}

.dock-icon::before {
  background: var(--brand);
  content: "";
  inset: 0 50% 0 0;
  position: absolute;
}

.dock-panel {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  bottom: calc(100% + 10px);
  box-shadow: 0 24px 60px -28px rgba(11, 13, 16, 0.5),
    0 1px 2px rgba(11, 13, 16, 0.1);
  max-height: min(72vh, 540px);
  opacity: 0;
  overflow-y: auto;
  padding: 0.95rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  transform: translateY(8px) scale(0.985);
  transform-origin: bottom right;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  width: min(320px, calc(100vw - 24px));
}

.dock-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.dock-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.dock-title {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

.dock-close {
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  height: 26px;
  line-height: 1;
  width: 26px;
}

.dock-close:hover {
  background: var(--hover);
  color: var(--ink);
}

.dock-group {
  border-top: 1px solid var(--line);
  padding: 0.8rem 0 0.85rem;
}

.dock-group:first-of-type {
  border-top: 0;
  padding-top: 0.1rem;
}

.dock-legend {
  color: var(--muted);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.dock-layouts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dock-layout {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--body-text);
  cursor: pointer;
  padding: 6px;
  transition: background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.dock-layout:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
}

.dock-layout:active {
  transform: scale(0.97);
}

.dock-layout[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.mini {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: block;
  height: 34px;
  overflow: hidden;
  position: relative;
}

.mini i {
  display: block;
  position: absolute;
}

.mini--poster {
  background: #0d1015;
  border-color: #0d1015;
}

.mini--poster i:first-child {
  background: rgba(255, 255, 255, 0.22);
  height: 2px;
  left: 6px;
  top: 8px;
  width: 34%;
}

.mini--poster i:last-child {
  background: rgba(255, 255, 255, 0.14);
  height: 2px;
  left: 6px;
  top: 14px;
  width: 22%;
}

.mini--poster::after {
  background: var(--brand);
  border-radius: 1px;
  bottom: 6px;
  content: "";
  height: 3px;
  left: 6px;
  position: absolute;
  width: 12px;
}

.mini--stage {
  background: var(--surface);
}

.mini--stage i:first-child {
  background: var(--line-2);
  bottom: 4px;
  right: 4px;
  top: 4px;
  width: 46%;
}

.mini--stage i:last-child {
  background: var(--line-2);
  box-shadow: 0 5px 0 var(--line), 0 10px 0 var(--line);
  height: 2px;
  left: 4px;
  top: 9px;
  width: 30%;
}

.mini--split {
  background: var(--surface);
}

.mini--split i:first-child {
  background: var(--line-2);
  bottom: 4px;
  left: 4px;
  top: 4px;
  width: 43%;
}

.mini--split i:last-child {
  border: 1px solid var(--line);
  bottom: 7px;
  right: 5px;
  top: 9px;
  width: 37%;
}

.dock-name {
  color: var(--muted);
  display: block;
  font-size: 0.66rem;
  margin-top: 4px;
  text-align: center;
}

.dock-layout[aria-pressed="true"] .dock-name {
  color: var(--ink);
}

.dock-accents {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dock-accent {
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 0.6rem;
  gap: 4px;
  padding: 4px 0;
  transition: background-color 0.18s var(--ease),
    border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.dock-accent:hover {
  background: var(--hover);
}

.dock-accent[aria-pressed="true"] {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--ink);
}

.accent-dot {
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
  display: block;
  height: 18px;
  width: 18px;
}

.dock-accent[aria-pressed="true"] .accent-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2),
    inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.dock-modes {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
}

.dock-mode {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-family: var(--font);
  font-size: 0.72rem;
  gap: 0.35rem;
  height: 28px;
  justify-content: center;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.dock-mode[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: var(--ink);
}

.dock-note {
  color: var(--faint);
  font-size: 0.6rem;
  margin: 0.7rem 0 0;
  text-align: center;
}

/* Theme crossfade: applied for a few hundred milliseconds only. */
html.is-theming,
html.is-theming *,
html.is-theming *::before,
html.is-theming *::after {
  transition: background-color 0.38s var(--ease),
    border-color 0.38s var(--ease), color 0.38s var(--ease) !important;
}

/* --------------------------------------------------------------------------
   19. Landing keyframes
   -------------------------------------------------------------------------- */

@keyframes heroDrift {
  from {
    transform: scale(1.03) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.07) translate3d(-1.2%, -1%, 0);
  }
}

@keyframes lineRise {
  from {
    opacity: 0.001;
    transform: translateY(108%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes visualIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes statusPulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(37, 192, 125, 0.16);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 5px rgba(37, 192, 125, 0.08);
  }
}

@keyframes scanSweep {
  0% {
    opacity: 0;
    top: 10px;
  }
  12% {
    opacity: 0.55;
  }
  88% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    top: calc(100% - 12px);
  }
}

/* --------------------------------------------------------------------------
   20. Landing responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  html[data-layout="stage"] .home-page .hero-stage,
  html[data-layout="split"] .home-page .hero-stage {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-layout="split"] .home-page .hero-visual {
    order: 0;
  }

  html[data-layout="stage"] .home-page .hero-visual {
    max-width: 620px;
  }

  html[data-layout="stage"] .home-page .hero-copy,
  html[data-layout="split"] .home-page .hero-copy {
    max-width: none;
  }

  .home-page .hero {
    min-height: 0;
  }

  .home-page .hero > .container {
    gap: 1.4rem;
  }

  .home-page .hero-stage {
    padding: 1.5rem 0;
  }

  .home-page .hero-title {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
  }

  .home-page .hero-desc {
    margin-bottom: 1.6rem;
  }

  .home-page .hero-tag {
    display: none;
  }

  .home-page .hero-foot {
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .home-page .hero > .container {
    padding-bottom: 4.25rem;
  }

  .home-page .hero-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }

  .home-page .hero-status {
    font-size: 0.56rem;
  }

  .home-page .hero-title {
    font-size: clamp(2.15rem, 10.5vw, 2.9rem);
  }

  .home-page .hero-desc {
    font-size: 0.92rem;
    line-height: 1.85;
  }

  .home-page .hero-br {
    display: none;
  }

  .home-page .hero-actions .btn-cta,
  .home-page .hero-actions .btn-ghost {
    flex: 1 1 100%;
  }

  .home-page .hero-stats {
    gap: 0.5rem;
    justify-content: space-between;
    width: 100%;
  }

  .home-page .stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0 0 0.85rem;
  }

  .home-page .stat:first-child {
    padding-left: 0;
  }

  .home-page .stat b {
    font-size: 1.5rem;
  }

  .home-page .stat-k,
  .home-page .stat-l {
    font-size: 0.56rem;
  }

  .dock-trigger {
    height: 40px;
  }

  .dock-panel {
    width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-backdrop,
  .home-page .status-dot,
  .home-page .frame-scan,
  .home-page .hero-top,
  .home-page .hero-desc,
  .home-page .hero-actions,
  .home-page .hero-foot,
  .home-page .hero-visual,
  .home-page .hero-title .line > span {
    animation: none !important;
  }

  .home-page .hero-stage,
  .home-page .hero-top,
  .home-page .hero-foot {
    transition: none;
  }

  html.is-theming,
  html.is-theming *,
  html.is-theming *::before,
  html.is-theming *::after {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   21. Panel finish — paper grain, depth and motion across every page
   -------------------------------------------------------------------------- */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 130ms;
  --dur-2: 240ms;
  --dur-3: 460ms;

  --elev-1: 0 1px 2px rgba(11, 13, 16, 0.05);
  --elev-2: 0 2px 6px rgba(11, 13, 16, 0.05), 0 24px 48px -34px rgba(11, 13, 16, 0.55);
  --elev-3: 0 6px 18px rgba(11, 13, 16, 0.08), 0 48px 92px -48px rgba(11, 13, 16, 0.6);
}

body.dark-mode,
html[data-mode="dark"] {
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --elev-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 28px 56px -36px rgba(0, 0, 0, 0.9);
  --elev-3: 0 8px 22px rgba(0, 0, 0, 0.5), 0 56px 104px -52px rgba(0, 0, 0, 0.95);
}

/* Fine grain over the whole surface: paper, not plastic.
   Plain alpha, no blend mode: a blended layer that covers the whole viewport
   turns the document into one blend group, and re-compositing that group on a
   palette change was what painted a white frame before the dark colours. At
   3% the difference between Multiply and Normal is not visible. */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  content: "";
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  position: fixed;
  z-index: 2147483000;
}

/* A mode switch is one paint, not a fade: with transitions live, every link,
   button and panel interpolates between the two palettes and the translucent
   panes keep showing the half-lit page underneath for those frames. The class
   is added by avant.js for the duration of the swap only. */
html.theme-swapping,
html.theme-swapping *,
html.theme-swapping *::before,
html.theme-swapping *::after {
  transition: none !important;
}

/* A low accent glow keeps large empty areas from reading as flat grey. */
.content-wrapper {
  background-image:
    radial-gradient(900px 460px at 96% -12%, rgba(var(--brand-rgb), 0.075), transparent 60%),
    radial-gradient(760px 420px at -8% 108%, rgba(var(--brand-rgb), 0.05), transparent 62%);
  background-repeat: no-repeat;
  transition: opacity 0.2s var(--ease);
}

/* Glass header, elevation on scroll. */
.main-header.navbar {
  background: var(--header);
  transition: box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

@supports (color: color-mix(in srgb, #000, #fff)) {
  .main-header.navbar {
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    background: color-mix(in srgb, var(--header) 82%, transparent);
    border-bottom-color: color-mix(in srgb, var(--line) 68%, transparent);
  }
}

.main-header.navbar.is-scrolled {
  box-shadow: 0 14px 38px -30px rgba(11, 13, 16, 0.6);
}

body.dark-mode .main-header.navbar.is-scrolled,
html[data-mode="dark"] .main-header.navbar.is-scrolled {
  box-shadow: 0 14px 38px -24px rgba(0, 0, 0, 0.85);
}

/* Sliding accent underline on every top-level nav link. */
.main-header .nav-link {
  position: relative;
}

.main-header .nav-link::after {
  background: var(--brand);
  border-radius: 2px;
  bottom: 5px;
  content: "";
  height: 2px;
  left: 0.7rem;
  position: absolute;
  right: 0.7rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}

.main-header .nav-link:hover::after,
.main-header .nav-link.active::after,
.main-header .nav-item.active > .nav-link::after {
  transform: scaleX(1);
}

/* Sidebar: tinted rail and an accent pill for the active item. */
.main-sidebar {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 4%, var(--sidebar)),
    var(--sidebar) 42%
  );
}

.nav-sidebar .nav-link {
  position: relative;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
    transform var(--dur-2) var(--ease-out);
}

.nav-sidebar .nav-link:hover {
  transform: translateX(2px);
}

.nav-sidebar .nav-link.active {
  background: linear-gradient(
    90deg,
    rgba(var(--brand-rgb), 0.15),
    rgba(var(--brand-rgb), 0.02)
  );
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.16);
  transform: none;
}

.nav-sidebar .nav-link.active::before {
  background: var(--brand);
  border-radius: 3px;
  content: "";
  height: 18px;
  left: -0.55rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
}

/* Cards: 16px, hairline, layered shadow, lift on hover, soft entrance. */
.card {
  animation: cardIn var(--dur-3) var(--ease-out) backwards;
  border-color: color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 16px;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.card:hover {
  border-color: var(--line-2);
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}

.card-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-2) 90%, transparent),
    transparent
  );
  border-bottom-color: color-mix(in srgb, var(--line) 78%, transparent);
}

.card-header:first-child {
  border-radius: 16px 16px 0 0;
}

.card-footer:last-child {
  border-radius: 0 0 16px 16px;
}

@keyframes cardIn {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Page title with an accent hairline. */
.content-header {
  padding: 1.75rem 0 0.7rem;
}

.content-header h1 {
  animation: titleIn var(--dur-3) var(--ease-out) backwards;
  font-size: 1.55rem;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.content-header h1::after {
  background: linear-gradient(90deg, var(--brand), rgba(var(--brand-rgb), 0));
  border-radius: 2px;
  content: "";
  display: block;
  height: 2px;
  margin-top: 0.5rem;
  width: 40px;
}

@keyframes titleIn {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Buttons: slight gradient, real press feedback. */
.btn {
  border-radius: 10px;
  font-weight: 600;
  transition: transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.btn:active {
  transform: translateY(1px) scale(0.995);
}

.btn-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px -16px rgba(var(--brand-rgb), 0.9);
}

.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 16px 28px -16px rgba(var(--brand-rgb), 0.95);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.995);
}

/* Tables: micro-caps header, accent row hover. */
.table thead th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody tr {
  transition: background-color var(--dur-1) var(--ease);
}

.table tbody tr:hover {
  background-color: rgba(var(--brand-rgb), 0.045);
}

/* Fields: quieter borders, accent focus ring. */
.form-control,
.custom-select,
.custom-file-label {
  border-radius: 10px;
  transition: border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.form-control:focus,
.custom-select:focus {
  border-color: rgba(var(--brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14);
}

/* Overlays: scale in instead of snapping. */
.modal-content {
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--elev-3);
}

.modal.fade .modal-dialog {
  transform: translateY(14px) scale(0.985);
  transition: transform var(--dur-2) var(--ease-out);
}

.modal.show .modal-dialog {
  transform: none;
}

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--elev-2);
  padding: 0.35rem;
}

.dropdown-menu.show {
  animation: menuIn var(--dur-2) var(--ease-out);
}

.dropdown-item {
  border-radius: 8px;
}

@keyframes menuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Thin scrollbars, brand selection, visible keyboard focus. */
* {
  scrollbar-color: color-mix(in srgb, var(--line-2) 85%, transparent) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--line-2) 85%, transparent);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
  background-clip: padding-box;
}

::selection {
  background: rgba(var(--brand-rgb), 0.22);
  color: var(--ink);
}

a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid rgba(var(--brand-rgb), 0.6);
  outline-offset: 2px;
}

/* Top loading hairline + dimmed exit, so navigations feel continuous. */
.nav-progress {
  background: linear-gradient(90deg, var(--brand), rgba(var(--brand-rgb), 0.35));
  box-shadow: 0 0 14px rgba(var(--brand-rgb), 0.7);
  height: 2px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out), opacity 0.3s linear;
  width: 100%;
  z-index: 2147483001;
}

.nav-progress.is-on {
  opacity: 1;
}

.nav-progress.is-done {
  opacity: 0;
  transform: scaleX(1);
}

body.is-leaving .wrapper,
body.is-leaving .auth-shell,
body.is-leaving .hp-wrapper {
  opacity: 0.5;
}

body .wrapper,
body .auth-shell,
body .hp-wrapper {
  transition: opacity 0.22s var(--ease);
}

/* --------------------------------------------------------------------------
   22. User-centre templates
   -------------------------------------------------------------------------- */

body.user-center .content-wrapper .container-fluid {
  max-width: 1320px;
}

body.user-center .content-wrapper.is-restyling {
  opacity: 0.4;
}

body.user-center .content {
  padding-bottom: 2.5rem;
}

/* "flat" — no card chrome, hairline sections, editorial scale. */
html[data-uc="flat"] body.user-center .content .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--line);
  box-shadow: none;
  margin-bottom: 1.75rem;
}

html[data-uc="flat"] body.user-center .content .card:hover {
  border-top-color: var(--line-2);
  box-shadow: none;
  transform: none;
}

html[data-uc="flat"] body.user-center .content .card-header,
html[data-uc="flat"] body.user-center .content .card-footer {
  background: transparent;
  border-color: var(--line);
  padding-left: 0;
  padding-right: 0;
}

html[data-uc="flat"] body.user-center .content .card-body {
  padding-left: 0;
  padding-right: 0;
}

html[data-uc="flat"] body.user-center .content-header h1 {
  font-size: 2.05rem;
  letter-spacing: -0.045em;
}

html[data-uc="flat"] body.user-center .content-header h1::after {
  width: 72px;
}

/* "dense" — smaller rhythm, more rows per screen. */
html[data-uc="dense"] body.user-center {
  font-size: 0.875rem;
}

html[data-uc="dense"] body.user-center .content-header {
  padding: 1rem 0 0.35rem;
}

html[data-uc="dense"] body.user-center .content-header h1 {
  font-size: 1.3rem;
}

html[data-uc="dense"] body.user-center .card {
  border-radius: 12px;
  margin-bottom: 0.85rem;
}

html[data-uc="dense"] body.user-center .card:hover {
  transform: none;
}

html[data-uc="dense"] body.user-center .card-header {
  min-height: 42px;
  padding: 0.5rem 0.85rem;
}

html[data-uc="dense"] body.user-center .card-body {
  padding: 0.85rem;
}

html[data-uc="dense"] body.user-center .table td,
html[data-uc="dense"] body.user-center .table th {
  font-size: 0.82rem;
  padding: 0.42rem 0.55rem;
}

/* Preview tiles for the dock. */
.mini--cards i:first-child {
  background: var(--brand);
  border-radius: 2px;
  height: 8px;
  left: 4px;
  right: 4px;
  top: 4px;
}

.mini--cards i:last-child {
  background: var(--line-2);
  border-radius: 2px;
  height: 14px;
  left: 4px;
  right: 4px;
  top: 16px;
}

.mini--flat i:first-child {
  background: var(--line-2);
  border-radius: 1px;
  height: 2px;
  left: 4px;
  right: 12px;
  top: 9px;
}

.mini--flat i:last-child {
  background: var(--line-2);
  border-radius: 1px;
  height: 2px;
  left: 4px;
  right: 4px;
  top: 17px;
}

.mini--dense i:first-child {
  background: var(--line-2);
  border-radius: 1px;
  box-shadow: 0 5px 0 var(--line-2), 0 10px 0 var(--line-2),
    0 15px 0 var(--line-2), 0 20px 0 var(--line-2);
  height: 1px;
  left: 4px;
  right: 4px;
  top: 7px;
}

.mini--dense i:last-child {
  display: none;
}

/* --------------------------------------------------------------------------
   23. Landing v7 — a rotating skin cube over the capture, no grid
   -------------------------------------------------------------------------- */

body.home-page {
  background: #05070c;
  color: #eef2f8;
}

.hp-wrapper {
  background-color: #05070c;
  background-position: center 42%;
  background-size: cover;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.hp-wrapper::before {
  background:
    linear-gradient(
      92deg,
      rgba(5, 7, 12, 0.82) 0%,
      rgba(5, 7, 12, 0.58) 34%,
      rgba(5, 7, 12, 0.2) 64%,
      rgba(5, 7, 12, 0.38) 100%
    ),
    radial-gradient(
      78% 70% at 72% 36%,
      rgba(5, 7, 12, 0) 0%,
      rgba(5, 7, 12, 0.4) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 7, 12, 0.55) 0%,
      rgba(5, 7, 12, 0.04) 24%,
      rgba(5, 7, 12, 0.08) 68%,
      rgba(5, 7, 12, 0.78) 100%
    );
  content: "";
  inset: 0;
  position: absolute;
  z-index: 0;
}

.hp-veil {
  background: radial-gradient(
    60% 50% at 70% 36%,
    rgba(var(--brand-rgb), 0.16),
    transparent 70%
  );
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

#fixed-bg {
  background-position: center;
  background-size: cover;
  inset: 0;
  position: fixed;
  z-index: -1;
}

/* Home navigation sits on the image and solidifies on scroll. */
.home-page .navbar {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  min-height: var(--nav-h);
  padding: 0;
  transition: background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
  z-index: 30;
}

.home-page .navbar .container {
  align-items: center;
  display: flex;
  max-width: 1280px;
  min-height: var(--nav-h);
  padding: 0 1.25rem;
  width: 100%;
}

.home-page .navbar.is-scrolled {
  background: rgba(6, 8, 12, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px -34px rgba(0, 0, 0, 0.9);
}

.home-page .navbar-brand {
  align-items: center;
  display: inline-flex;
  gap: 0.95rem;
  margin-right: 1.5rem;
  padding: 0;
}

.home-page .navbar-brand .brand-logo {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
  height: 40px;
  width: auto;
}

.home-page .navbar-brand .brand-wordmark {
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
  height: 32px;
  max-width: 225px;
  position: relative;
  width: auto;
}

/* Same optical nudge for the home wordmark; desktop / tablet only so the
   phone header keeps its original spacing. */
@media (min-width: 768px) {
  .home-page .navbar-brand .brand-wordmark {
    margin-left: 0.6rem;
    top: 4px;
  }
}

.home-page .navbar .navbar-custom-menu {
  margin-left: auto;
}

.home-page .navbar .nav-link {
  align-items: center;
  border-radius: 8px;
  color: rgba(238, 242, 250, 0.74);
  display: inline-flex;
  font-size: 0.87rem;
  font-weight: 500;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.75rem;
  position: relative;
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.home-page .navbar .nav-link:hover,
.home-page .navbar .nav-link:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.home-page .navbar .nav-link::after {
  background: var(--brand);
  border-radius: 2px;
  bottom: 4px;
  content: "";
  height: 2px;
  left: 0.75rem;
  position: absolute;
  right: 0.75rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}

.home-page .navbar .nav-link:hover::after {
  transform: scaleX(1);
}

.home-page .navbar .navbar-nav {
  align-items: center;
}

/* Hero */
.home-page .home-hero {
  align-items: center;
  display: flex;
  min-height: clamp(640px, 92vh, 960px);
  min-height: clamp(640px, 92svh, 960px);
  padding: calc(var(--nav-h) + 2rem) 0 4.5rem;
  position: relative;
  z-index: 2;
}

.home-page .home-hero > .container {
  max-width: 1240px;
  width: 100%;
}

.hx-inner {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.hx-copy {
  min-width: 0;
}

.hx-kicker {
  align-items: center;
  color: rgba(226, 233, 245, 0.55);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  gap: 0.6rem;
  letter-spacing: 0.2em;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}

.hx-dot {
  animation: kickerPulse 2.6s ease-in-out infinite;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14);
  height: 6px;
  width: 6px;
}

.hx-kicker-sep {
  color: rgba(255, 255, 255, 0.22);
}

.home-page .splash-head {
  color: #f8fafc;
  font-size: clamp(2.8rem, 5.4vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.02;
  margin: 0 0 1.15rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.42);
  text-wrap: balance;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-page .splash-head {
    background-image: linear-gradient(178deg, #ffffff 14%, #d5deec 86%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #f8fafc;
    -webkit-text-fill-color: transparent;
  }
}

.home-page .splash-subhead {
  color: rgba(238, 244, 253, 0.8);
  font-size: clamp(0.96rem, 1.1vw, 1.06rem);
  line-height: 1.72;
  margin: 0 0 2rem;
  max-width: 35rem;
  text-wrap: pretty;
}

.hx-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2.4rem;
}

.home-page .main-button {
  align-items: center;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 82%, #ffffff),
    var(--brand)
  );
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 20px 40px -22px rgba(var(--brand-rgb), 0.9);
  color: var(--on-brand);
  display: inline-flex;
  font-weight: 700;
  gap: 0.55rem;
  padding: 0.92rem 1.55rem;
  transition: transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease);
}

.home-page .main-button:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 26px 46px -22px rgba(var(--brand-rgb), 0.95);
  color: var(--on-brand);
  transform: translateY(-2px);
}

.home-page .main-button:active {
  transform: translateY(0) scale(0.995);
}

.home-page .main-button i {
  font-size: 0.8rem;
  transition: transform var(--dur-2) var(--ease-out);
}

.home-page .main-button:hover i {
  transform: translateX(3px);
}

.home-page .ghost-button {
  align-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #eef2f8;
  display: inline-flex;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.9rem 1.4rem;
  transition: background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.home-page .ghost-button:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-2px);
}

.hx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hx-tags li {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(226, 233, 245, 0.5);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  padding: 0.38rem 0.7rem;
}

/* Cube */
.hx-visual {
  align-self: center;
  height: clamp(300px, 32vw, 400px);
  justify-self: center;
  max-width: 440px;
  position: relative;
  width: 100%;
}

.orb {
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.55;
  position: absolute;
}

.orb-a {
  animation: orbFloat 12s ease-in-out infinite;
  background: rgba(var(--brand-rgb), 0.5);
  height: 250px;
  left: 8%;
  top: 14%;
  width: 250px;
}

.orb-b {
  animation: orbFloat 15s ease-in-out infinite reverse;
  background: rgba(96, 138, 255, 0.32);
  bottom: 6%;
  height: 220px;
  right: 0;
  width: 220px;
}

.cube-stage {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  perspective: 1100px;
  position: relative;
}

.cube-stage::before {
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(var(--brand-rgb), 0.16) 0%,
    rgba(96, 138, 255, 0.08) 46%,
    transparent 68%
  );
  border-radius: 50%;
  content: "";
  filter: blur(12px);
  pointer-events: none;
  position: absolute;
  width: min(82%, 330px);
}

.cube-stage::after {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  position: absolute;
  transform: rotateX(72deg) scale(1.28);
  width: min(64%, 250px);
}

.cube {
  --cube: 152px;
  --cube-h: 76px;
  animation: cubeSpin 26s linear infinite;
  height: var(--cube);
  position: relative;
  transform-style: preserve-3d;
  width: var(--cube);
}

.cube-face {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background:
    radial-gradient(
      70% 55% at 24% 16%,
      rgba(255, 255, 255, 0.22),
      transparent 62%
    ),
    linear-gradient(
      150deg,
      rgba(var(--brand-rgb), 0.34),
      rgba(var(--brand-rgb), 0.06) 60%,
      rgba(96, 138, 255, 0.14)
    );
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 64px rgba(var(--brand-rgb), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  inset: 0;
  position: absolute;
}

.face-front {
  transform: translateZ(var(--cube-h));
}
.face-back {
  transform: rotateY(180deg) translateZ(var(--cube-h));
}
.face-right {
  transform: rotateY(90deg) translateZ(var(--cube-h));
}
.face-left {
  transform: rotateY(-90deg) translateZ(var(--cube-h));
}
.face-top {
  transform: rotateX(90deg) translateZ(var(--cube-h));
}
.face-bottom {
  transform: rotateX(-90deg) translateZ(var(--cube-h));
}

.hx-chip {
  align-items: center;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: chipFloat 7s ease-in-out infinite;
  background: rgba(10, 13, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(238, 242, 255, 0.88);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  position: absolute;
  white-space: nowrap;
}

.hx-chip i {
  color: var(--brand);
  font-size: 0.76rem;
}

.chip-1 {
  left: 2%;
  top: 8%;
}

.chip-2 {
  animation-delay: -2.4s;
  right: 0;
  top: 44%;
}

.chip-3 {
  animation-delay: -4.8s;
  bottom: 8%;
  left: 6%;
}

/* Fixed copyright strip over the image. */
.home-page #copyright.without-intro {
  background: linear-gradient(180deg, transparent, rgba(4, 6, 10, 0.92));
  border: 0;
  bottom: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  left: 0;
  padding: 1.1rem 0;
  position: fixed;
  right: 0;
  z-index: 3;
}

.home-page #copyright.without-intro .container {
  max-width: 1280px;
  padding: 0 1.25rem;
  text-align: center;
}

.home-page #copyright.without-intro #copyright-text {
  display: inline;
  float: none !important;
}

.home-page #copyright.without-intro a {
  color: rgba(255, 255, 255, 0.78);
}

.home-page #copyright.without-intro a:hover {
  color: #ffffff;
}

.home-page #intro {
  background: #f7f8fa;
  color: #0b0d10;
  padding: 6rem 0 5.5rem;
  position: relative;
}

.home-page #intro h1 {
  color: #0b0d10;
  font-size: 2rem;
  letter-spacing: -0.03em;
}

.home-page .feature-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--elev-1);
  padding: 2rem 1.6rem;
  transition: transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.home-page .feature-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-3px);
}

.home-page .feature-icon {
  color: var(--brand-strong);
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.home-page #footer-wrap {
  background: #ffffff;
  border-top: 1px solid var(--line);
  color: #333a45;
  padding: 3.5rem 0;
}

@keyframes cubeSpin {
  from {
    transform: rotateX(-16deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-16deg) rotateY(360deg);
  }
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -22px, 0) scale(1.06);
  }
}

@keyframes chipFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@keyframes kickerPulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(var(--brand-rgb), 0);
    opacity: 0.7;
  }
}

@media (max-width: 980px) {
  .hx-inner {
    gap: 2.25rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-visual {
    height: 300px;
    max-width: 380px;
    order: 0;
  }

  .cube {
    --cube: 128px;
    --cube-h: 64px;
  }

  .home-page .home-hero {
    padding-bottom: 5.5rem;
  }
}

@media (max-width: 640px) {
  .home-page .home-hero {
    min-height: auto;
    padding: calc(var(--nav-h) + 2.5rem) 0 4.5rem;
  }

  .home-page .splash-head {
    font-size: clamp(2.3rem, 11vw, 3rem);
  }

  .hx-visual {
    height: 250px;
    max-width: 300px;
  }

  .cube {
    --cube: 108px;
    --cube-h: 54px;
  }

  .hx-actions .main-button,
  .hx-actions .ghost-button {
    justify-content: center;
    width: 100%;
  }

  .hx-chip {
    font-size: 0.64rem;
    padding: 0.4rem 0.6rem;
  }

  .chip-1 {
    left: 0;
    top: 6%;
  }

  .chip-2 {
    right: 0;
    top: 42%;
  }

  .chip-3 {
    display: none;
  }

  .home-page #copyright.without-intro {
    background: #05070c;
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .content-header h1,
  .dropdown-menu.show,
  .hx-dot,
  .hx-chip,
  .orb-a,
  .orb-b,
  .cube {
    animation: none !important;
  }

  .main-header .nav-link::after,
  .nav-sidebar .nav-link,
  .btn {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   24. Apple-style polish layer
   Uniform radii, layered shadows, control highlights, focus rings and the
   accent colour made visible across navigation, buttons and surfaces.
   -------------------------------------------------------------------------- */

:root {
  --r-card: 18px;
  --r-control: 10px;
  --sh-card: 0 1px 2px rgba(11, 13, 16, 0.04),
    0 16px 36px -30px rgba(11, 13, 16, 0.42);
  --sh-float: 0 2px 8px rgba(11, 13, 16, 0.06),
    0 28px 64px -34px rgba(11, 13, 16, 0.5);
}

/* A saved preset also shifts the paper, not only the accent. Dark mode keeps
   its body-scoped surfaces, which win over these html-scoped tints. */
html[data-avant-theme="aurora"] {
  --canvas: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --header: #fbfcfe;
  --sidebar: #f5f7fb;
  --line: #e3e7ee;
  --line-2: #d2d9e3;
}

html[data-avant-theme="graphite"] {
  --canvas: #f4f4f2;
  --surface: #fdfdfc;
  --surface-2: #f8f8f6;
  --header: #fbfbfa;
  --sidebar: #f6f6f4;
  --line: #e7e7e4;
  --line-2: #d8d8d4;
}

html[data-avant-theme="ember"] {
  --canvas: #f8f3eb;
  --surface: #fffdf9;
  --surface-2: #fbf6ef;
  --header: #fdf9f3;
  --sidebar: #f9f5ee;
  --line: #ece3d7;
  --line-2: #dfd2c2;
}

html[data-avant-theme="jade"] {
  --canvas: #f1f5f1;
  --surface: #fcfefc;
  --surface-2: #f6faf7;
  --header: #f8fbf8;
  --sidebar: #f3f7f3;
  --line: #e2e9e2;
  --line-2: #d1ddd3;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(var(--brand-rgb), 0.24);
}

* {
  scrollbar-color: var(--line-2) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--line-2);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

/* Ambient accent wash: every page picks up the saved preset. */
.content-wrapper {
  background-color: var(--canvas);
  background-image: radial-gradient(
      900px 340px at 88% -6%,
      color-mix(in srgb, var(--brand) 10%, transparent),
      transparent 70%
    ),
    radial-gradient(
      640px 260px at 0% 0%,
      color-mix(in srgb, var(--brand) 5%, transparent),
      transparent 65%
    );
  background-repeat: no-repeat;
}

.main-header.navbar {
  border-bottom: 1px solid var(--line);
}

.main-header.navbar::after {
  background: linear-gradient(
    90deg,
    var(--brand),
    rgba(var(--brand-rgb), 0) 62%
  );
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  opacity: 0.7;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* Sidebar: accent active state and label behaviour.
   AdminLTE zeroes the label width in the mini rail and relies on visible
   overflow once the rail widens on hover; an explicit width keeps the text
   inside the widened rail without leaking into the collapsed one. */
.main-sidebar {
  background: color-mix(in srgb, var(--brand) 3%, var(--sidebar));
}

.nav-sidebar .nav-link {
  border-radius: 10px;
  color: var(--text-soft);
  padding: 0.52rem 0.7rem;
}

.nav-sidebar .nav-link > p {
  color: inherit !important;
  display: block;
  font-size: 0.84rem;
  min-width: 0;
  opacity: 1 !important;
}

.sidebar-collapse .nav-sidebar .nav-link > p {
  overflow: hidden !important;
  visibility: hidden !important;
}

.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p,
.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link > p {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  visibility: visible !important;
  white-space: nowrap !important;
  width: auto !important;
}

.nav-sidebar .nav-link:hover {
  background: color-mix(in srgb, var(--brand) 7%, var(--hover));
  color: var(--ink);
}

.nav-sidebar .nav-link.active {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  box-shadow: inset 3px 0 0 var(--brand), 0 1px 2px rgba(11, 13, 16, 0.05);
  color: var(--brand-strong);
}

.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link.active > p {
  color: var(--brand-strong);
}

.nav-sidebar .nav-header {
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
}

/* Cards */
.card {
  animation: none !important;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transition: border-color 0.22s var(--ease-out),
    box-shadow 0.22s var(--ease-out);
}

.card:hover {
  border-color: var(--line-2);
  box-shadow: 0 2px 4px rgba(11, 13, 16, 0.05),
    0 22px 46px -32px rgba(11, 13, 16, 0.46);
  transform: none;
}

.card-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 4%, var(--surface-2)),
    transparent
  );
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  min-height: 54px;
  padding: 0.85rem 1.25rem;
}

.card-header:first-child {
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}

.card-body {
  padding: 1.25rem;
}

.card-footer {
  padding: 0.8rem 1.25rem;
}

.card-footer:last-child {
  border-radius: 0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px);
}

/* Buttons: inset top light, accent primary, real press feedback. */
.btn {
  border-radius: var(--r-control);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.btn:focus-visible {
  box-shadow: 0 0 0 4px var(--ring),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-primary {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 78%, #ffffff),
    var(--brand)
  );
  border-color: color-mix(in srgb, var(--brand) 84%, #000000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 10px 22px -14px rgba(var(--brand-rgb), 0.85);
  color: var(--on-brand);
}

.btn-primary:hover,
.btn-primary:focus {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 68%, #ffffff),
    color-mix(in srgb, var(--brand) 88%, #000000)
  );
  border-color: color-mix(in srgb, var(--brand) 76%, #000000);
  color: var(--on-brand);
}

.btn-primary:active {
  transform: translateY(1px) scale(0.995);
}

.btn-outline-primary {
  background: transparent;
  border-color: color-mix(in srgb, var(--brand) 48%, var(--line-2));
  color: var(--brand-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: var(--brand);
  color: var(--brand-strong);
}

.btn-link {
  color: var(--brand-strong);
}

/* Inputs */
.form-control,
.custom-select,
.custom-file-label,
.input-group-text {
  border-radius: var(--r-control);
}

.form-control,
.custom-select {
  background-color: var(--field);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 1px rgba(11, 13, 16, 0.04);
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  transition: border-color 0.16s var(--ease),
    box-shadow 0.16s var(--ease), background-color 0.16s var(--ease);
}

.form-control:hover,
.custom-select:hover {
  border-color: color-mix(in srgb, var(--line-2) 55%, var(--brand));
}

.form-control:focus,
.custom-select:focus {
  background-color: var(--field);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring),
    inset 0 1px 1px rgba(11, 13, 16, 0.04);
}

.form-control::placeholder {
  color: var(--faint);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* Tables */
.table {
  color: var(--body-text);
}

.table thead th {
  background: color-mix(in srgb, var(--brand) 5%, var(--surface-2));
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.62rem 0.75rem;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.table td,
.table th {
  border-top: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  padding: 0.62rem 0.75rem;
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

/* Modals, dropdowns and floating surfaces */
.modal-content {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 2px 8px rgba(11, 13, 16, 0.08),
    0 48px 120px -52px rgba(11, 13, 16, 0.62);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 4%, var(--surface-2)),
    var(--surface)
  );
  border-bottom: 1px solid var(--line);
  padding: 1rem 1.25rem;
}

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  border-top: 1px solid var(--line);
  padding: 0.85rem 1.25rem;
}

.modal-backdrop.show {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #0b0d10;
  opacity: 0.42;
}

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh-float);
  padding: 0.35rem;
}

.dropdown-item {
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: color-mix(in srgb, var(--brand) 8%, var(--hover));
  color: var(--ink);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--brand);
  color: var(--on-brand);
}

.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.28em 0.6em;
}

.page-link {
  border-color: var(--line);
  border-radius: 8px;
  color: var(--brand-strong);
  margin: 0 2px;
}

.page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.nav-tabs {
  border-bottom: 1px solid var(--line);
}

.nav-tabs .nav-link {
  border: 0;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
}

.nav-tabs .nav-link.active {
  background: transparent;
  border-bottom: 2px solid var(--brand);
  color: var(--ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   25. Theme Studio v2 — readable colour controls and richer preset cards
   -------------------------------------------------------------------------- */

.studio {
  margin: 0 auto;
  max-width: 1120px;
}

.studio-hero {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 11%, var(--surface)) 0%,
    var(--surface) 58%
  );
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 20px;
  box-shadow: var(--sh-card);
  overflow: hidden;
  padding: 1.6rem 1.7rem;
  position: relative;
}

.studio-hero::after {
  background: radial-gradient(
    circle,
    rgba(var(--brand-rgb), 0.24),
    transparent 68%
  );
  border-radius: 50%;
  content: "";
  height: 300px;
  pointer-events: none;
  position: absolute;
  right: -80px;
  top: -140px;
  width: 300px;
}

.studio-hero-copy {
  max-width: 40rem;
  position: relative;
  z-index: 1;
}

.studio-kicker {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  border-radius: 999px;
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  margin: 0 0 0.6rem;
  padding: 0.28rem 0.65rem;
}

.studio-heading {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0 0 0.45rem;
}

.studio-lead {
  font-size: 0.86rem;
  line-height: 1.75;
  margin: 0;
  max-width: 38rem;
}

.studio-hero-side {
  align-items: flex-end;
  gap: 0.45rem;
  position: relative;
  z-index: 1;
}

.studio-pill {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.66rem;
  padding: 0.28rem 0.62rem;
}

.studio-pill.is-accent {
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  color: var(--brand-strong);
}

.studio-pill.is-accent i {
  color: var(--brand);
  font-size: 0.48rem;
}

.studio-pill code {
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0;
}

.studio-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  margin-bottom: 1rem;
  padding: 1.2rem 1.3rem;
}

.studio-block-head {
  align-items: flex-start;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  margin-bottom: 0.95rem;
  padding-bottom: 0.72rem;
}

.studio-block-head h3 {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.studio-block-head p {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.6;
  max-width: 32rem;
}

.studio-presets {
  gap: 0.72rem;
}

.studio-preset {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  padding: 0.5rem;
}

.studio-preset:hover {
  border-color: var(--line-2);
  box-shadow: 0 12px 26px -22px rgba(11, 13, 16, 0.55);
}

.studio-preset.is-active {
  background: var(--surface);
  border-color: var(--preset);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--preset) 22%, transparent),
    0 16px 32px -26px rgba(11, 13, 16, 0.55);
}

.studio-preset-visual {
  background: radial-gradient(
      80% 70% at 78% 16%,
      color-mix(in srgb, var(--preset) 26%, transparent),
      transparent 64%
    ),
    linear-gradient(160deg, #ffffff, var(--preset-bg));
  border-radius: 10px;
  height: 112px;
}

.studio-preset-bar {
  background: color-mix(in srgb, var(--preset-bg) 72%, #ffffff);
  height: 20px;
}

.studio-preset-bar::after {
  background: rgba(11, 13, 16, 0.16);
  border-radius: 50%;
  box-shadow: 8px 0 0 rgba(11, 13, 16, 0.12),
    16px 0 0 rgba(11, 13, 16, 0.09);
  content: "";
  height: 4px;
  left: 9px;
  position: absolute;
  top: 8px;
  width: 4px;
}

.studio-preset-rail {
  background: color-mix(
    in srgb,
    var(--preset) 10%,
    rgba(255, 255, 255, 0.52)
  );
  top: 20px;
}

.studio-preset-tile {
  border-radius: 7px;
  height: 30px;
  top: 34px;
}

.studio-preset-tile.is-second {
  height: 42px;
  top: 40px;
}

.studio-preset-tile::after {
  background: rgba(11, 13, 16, 0.12);
  border-radius: 2px;
  box-shadow: 0 7px 0 rgba(11, 13, 16, 0.07);
  content: "";
  height: 3px;
  left: 8px;
  position: absolute;
  right: 28%;
  top: 9px;
}

.studio-preset-cta {
  border-radius: 4px;
  height: 11px;
  width: 42%;
}

.studio-preset-copy {
  padding: 0.1rem 0.15rem 0.15rem;
}

.studio-preset-name {
  font-size: 0.82rem;
}

.studio-preset-desc {
  font-size: 0.68rem;
}

.studio-preset-dots {
  background: color-mix(in srgb, #ffffff 82%, transparent);
  right: 10px;
  top: 8px;
}

.studio-preset-check {
  background: var(--preset);
  color: #ffffff;
  font-size: 0.54rem;
  height: 20px;
  width: 20px;
}

.studio-accent {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
}

.studio-accent-swatches {
  border-right: 1px solid var(--line);
  gap: 0.35rem;
  padding-right: 0.75rem;
}

.studio-accent-swatch {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 50%;
  height: 32px;
  padding: 3px;
  width: 32px;
}

.studio-accent-swatch span {
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 3px rgba(11, 13, 16, 0.14);
  display: block;
  height: 100%;
  width: 100%;
}

.studio-accent-swatch.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

.studio-accent-picker {
  flex: 1;
  gap: 0.55rem;
}

.studio-color-field {
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: var(--r-control);
  cursor: pointer;
  gap: 0.55rem;
  height: 40px;
  padding: 4px 10px 4px 4px;
}

#studio-color {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 30px;
  padding: 0;
  width: 34px;
}

#studio-color::-webkit-color-swatch {
  border: 0;
  border-radius: 7px;
}

#studio-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.studio-color-value {
  color: var(--text);
  font-size: 0.74rem;
}

.studio-hex {
  font-family: var(--font-mono);
  height: 40px;
  max-width: 10rem;
}

.studio-restore {
  border: 1px solid var(--line-2);
  height: 40px;
}

.studio-token-head {
  color: var(--faint);
  display: flex;
  font-size: 0.66rem;
  justify-content: space-between;
  letter-spacing: 0.03em;
  margin: 1rem 0 0.45rem;
}

.studio-token-head code {
  background: transparent;
  color: var(--brand-strong);
  font-family: var(--font-mono);
  padding: 0;
}

.studio-tokens {
  display: grid;
  font-family: var(--font);
  font-size: 0.72rem;
  gap: 0.5rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  line-height: 1.2;
}

.studio-token {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 0.55rem;
}

.studio-token i {
  background: var(--dot);
  border: 1px solid rgba(11, 13, 16, 0.08);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  flex: none;
  height: 26px;
  width: 26px;
}

.studio-token-copy {
  display: block;
  min-width: 0;
}

.studio-token b {
  color: var(--muted);
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.studio-token code {
  background: transparent;
  color: var(--ink);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-sample-grid {
  gap: 1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.studio-sample .card {
  margin-bottom: 0;
}

.studio-badge {
  background: var(--brand);
  border-radius: 999px;
  color: var(--on-brand);
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
}

.studio-badge.is-soft {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.studio-dark-sample {
  background: radial-gradient(
      120% 100% at 90% 0%,
      rgba(var(--brand-rgb), 0.22),
      transparent 55%
    ),
    #0b0d10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 220px;
  padding: 1rem 1.05rem;
}

.studio-dark-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
}

.studio-dark-desc {
  color: rgba(242, 244, 247, 0.58);
  font-size: 0.72rem;
  line-height: 1.6;
  margin: 0;
}

.studio-dark-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.7rem;
}

.studio-dark-btn {
  background: var(--brand);
  border-radius: 8px;
  color: var(--on-brand);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
}

.studio-dark-btn.is-ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f2f4f7;
}

.studio-dark-chip.is-alt {
  color: var(--on-brand);
}

.studio-actions {
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 0;
  padding: 0.65rem 0.8rem;
}

.studio-save {
  min-height: 42px;
  padding: 0 1.2rem;
}

@media (max-width: 1100px) {
  .studio-tokens {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .studio-hero {
    flex-direction: column;
  }

  .studio-hero-side {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .studio-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-sample-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .studio-heading {
    font-size: 1.42rem;
  }

  .studio-block {
    padding: 1rem;
  }

  .studio-presets {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-accent {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-accent-swatches {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    padding: 0 0 0.6rem;
  }

  .studio-accent-picker {
    width: 100%;
  }

  .studio-color-field {
    flex: 1;
  }

  .studio-hex {
    flex: 1;
    max-width: none;
  }

  .studio-tokens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   26. Landing v8 — centred mark, one rotating cube, glass search, pill nav
   -------------------------------------------------------------------------- */

/* The home navigation carries no rule line; on scroll the whole bar gathers
   into a floating frosted pill, so the mark and the links slide inwards. */
.home-page .navbar,
.home-page .navbar.is-scrolled {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 0;
}

.home-page .navbar .container {
  border: 1px solid transparent;
  border-radius: 999px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1240px;
  min-height: var(--nav-h);
  padding: 0 1.25rem;
  transition: max-width 0.45s var(--ease-out), min-height 0.45s var(--ease-out),
    padding 0.45s var(--ease-out), background-color 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.home-page .navbar.is-scrolled .container {
  background: rgba(10, 14, 22, 0.52);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 64px -38px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: 880px;
  min-height: 52px;
  padding: 0 0.7rem;
}

.home-page .navbar .brand-logo,
.home-page .navbar .brand-wordmark {
  transition: height 0.45s var(--ease-out);
}

.home-page .navbar.is-scrolled .brand-logo {
  height: 28px;
}

.home-page .navbar.is-scrolled .brand-wordmark {
  height: 24px;
}

/* Hero: one vertical column, mark → cube → editable copy. The stack starts
   in the upper third of the screen, and the generous tail gives the page the
   scroll runway the pill transition needs. */
.home-page .home-hero {
  align-items: flex-start;
  display: flex;
  min-height: 104vh;
  min-height: 104svh;
  padding: calc(var(--nav-h) + clamp(1.5rem, 7vh, 5.5rem)) 0
    clamp(4rem, 10vh, 8rem);
  position: relative;
  z-index: 2;
}

.home-page .home-hero > .container {
  max-width: 1240px;
  width: 100%;
}

.hx-stack {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 3.6vh, 3rem);
  text-align: center;
}

.hero-wordmark {
  display: block;
  line-height: 0;
}

.hero-wordmark img {
  display: block;
  filter: drop-shadow(0 28px 72px rgba(0, 0, 0, 0.62));
  height: auto;
  margin: 0 auto;
  width: clamp(260px, 42vw, 540px);
}

.home-page .hx-visual {
  align-self: center;
  height: clamp(260px, 36vh, 360px);
  justify-self: center;
  max-width: none;
  width: min(100%, 680px);
}

.home-page .cube {
  --cube: 216px;
  --cube-h: 108px;
}

/* Frosted search field sitting on the cube itself, with the account entry
   buttoned onto its right shoulder. */
.hero-tools {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 640px);
  z-index: 3;
}

.hero-search {
  align-items: center;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 26px 60px -30px rgba(0, 0, 0, 0.95);
  display: flex;
  flex: 1 1 auto;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.42rem 0.42rem 0.42rem 1.35rem;
  position: relative;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  width: auto;
}

.hero-search:focus-within {
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 4px rgba(var(--brand-rgb), 0.16), 0 26px 60px -30px rgba(0, 0, 0, 0.95);
}

.hero-search-icon {
  color: rgba(255, 255, 255, 0.66);
  flex: 0 0 auto;
  font-size: 0.95rem;
}

.hero-search-input {
  background: transparent;
  border: 0;
  color: #ffffff;
  flex: 1 1 auto;
  font-size: 1.02rem;
  min-width: 0;
  outline: none;
  padding: 0.78rem 0;
}

.hero-search-input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.hero-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.hero-search-go {
  align-items: center;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--brand) 84%, #ffffff),
    var(--brand)
  );
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 14px 28px -14px rgba(var(--brand-rgb), 0.95);
  color: var(--on-brand);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.95rem;
  height: 50px;
  justify-content: center;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  width: 50px;
}

.hero-search-go:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 18px 32px -14px rgba(var(--brand-rgb), 1);
  transform: translateX(2px);
}

.hero-search-go:active {
  transform: translateX(2px) scale(0.97);
}

.hero-search-go:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

/* Circular frosted account entry: login for guests, user centre once signed in. */
.hero-account {
  align-items: center;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 26px 60px -30px rgba(0, 0, 0, 0.95);
  color: rgba(238, 244, 253, 0.88);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.05rem;
  height: 56px;
  justify-content: center;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease), color 0.3s var(--ease),
    transform 0.3s var(--ease-out);
  width: 56px;
}

.hero-account:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(var(--brand-rgb), 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 20px 40px -22px rgba(0, 0, 0, 0.95);
  color: #ffffff;
  transform: translateY(-2px);
}

.hero-account:active {
  transform: translateY(-2px) scale(0.96);
}

.hero-account:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

/* Editable copy under the cube: a quiet footnote framed by hairlines. */
.hero-note {
  align-items: center;
  display: flex;
  gap: clamp(0.7rem, 1.6vw, 1.25rem);
  justify-content: center;
  margin-top: clamp(-0.4rem, 0.4vh, 0.6rem);
  max-width: 44rem;
  padding: 0 0.25rem;
  width: 100%;
}

.hero-note::before,
.hero-note::after {
  content: "";
  flex: 1 1 1.5rem;
  height: 1px;
  max-width: 5.5rem;
  min-width: 1rem;
}

.hero-note::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26));
}

.hero-note::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), transparent);
}

.home-page .hero-note .splash-subhead {
  color: rgba(238, 244, 253, 0.58);
  font-size: clamp(0.78rem, 0.85vw, 0.86rem);
  letter-spacing: 0.045em;
  line-height: 1.8;
  margin: 0;
  max-width: none;
  text-align: center;
  text-wrap: pretty;
}

/* The copyright sits under the hero, which gives the page its scroll runway
   for the pill transition. */
.home-page #copyright.without-intro {
  background: #05070c;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  position: static;
}

/* Mojang / Microsoft disclaimer, home page only. */
.home-page .home-disclaimer {
  border-top: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  line-height: 1.95;
  margin: 1.1rem 0 0;
  opacity: 0.55;
  padding-top: 0.9rem;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .home-page .cube {
    --cube: 178px;
    --cube-h: 89px;
  }

  .home-page .hx-visual {
    height: 290px;
    width: 100%;
  }

  .hero-note {
    gap: 0.9rem;
    max-width: 30rem;
  }
}

@media (max-width: 640px) {
  .home-page .home-hero {
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 1.5rem);
  }

  .home-page .hx-stack {
    gap: 1.65rem;
  }

  .hero-wordmark img {
    width: clamp(220px, 68vw, 340px);
  }

  .home-page .cube {
    --cube: 150px;
    --cube-h: 75px;
  }

  .home-page .hx-visual {
    height: 260px;
  }

  .hero-tools {
    gap: 0.55rem;
    width: calc(100vw - 2.4rem);
  }

  .hero-search {
    padding: 0.34rem 0.34rem 0.34rem 0.95rem;
  }

  .hero-search-input {
    font-size: 0.9rem;
    padding: 0.65rem 0;
  }

  .hero-search-go {
    height: 42px;
    width: 42px;
  }

  .hero-account {
    font-size: 0.92rem;
    height: 46px;
    width: 46px;
  }

  .hero-note {
    gap: 0.6rem;
    max-width: none;
  }

  .hero-note::before,
  .hero-note::after {
    min-width: 0.6rem;
  }

  .home-page .navbar-brand {
    gap: 0.7rem;
  }

  .home-page .navbar-brand .brand-logo {
    height: 34px;
  }

  .home-page .navbar-brand .brand-wordmark {
    height: 28px;
  }

  .home-page .navbar.is-scrolled .container {
    max-width: calc(100% - 1.4rem);
  }
}

/* --------------------------------------------------------------------------
   27. Apple glass — user centre, closet, library and auth
   Frosted panes over the ambient accent wash: one translucent sheet for the
   header and rail, quiet hairlines, capsule tabs instead of a coloured band.
   -------------------------------------------------------------------------- */

:root {
  --glass-surface: color-mix(in srgb, var(--surface) 54%, transparent);
  --glass-raised: color-mix(in srgb, var(--surface) 74%, transparent);
  --glass-line: color-mix(in srgb, var(--line) 64%, transparent);
  --glass-hi: rgba(255, 255, 255, 0.62);
  --glass-sheen: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.05) 36%,
    rgba(255, 255, 255, 0) 64%
  );
  --glass-blur: 22px;
  --glass-saturate: 170%;
  --glass-shadow: 0 1px 1px rgba(11, 13, 16, 0.04),
    0 28px 62px -46px rgba(11, 13, 16, 0.58);
  --glass-shadow-hover: 0 2px 4px rgba(11, 13, 16, 0.05),
    0 34px 76px -42px rgba(11, 13, 16, 0.5);
}

/* These three derive from --surface / --line, so they must be re-declared
   here: a custom property is substituted where it is written, which means the
   :root copies above were frozen with the light palette and kept painting
   white panes and pale hairlines in dark mode. */
body.dark-mode,
html[data-mode="dark"] {
  --glass-surface: color-mix(in srgb, var(--surface) 58%, transparent);
  --glass-raised: color-mix(in srgb, var(--surface) 76%, transparent);
  --glass-line: color-mix(in srgb, var(--line) 74%, transparent);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --glass-sheen: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.02) 38%,
    rgba(255, 255, 255, 0) 66%
  );
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.4),
    0 30px 70px -44px rgba(0, 0, 0, 0.9);
  --glass-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45),
    0 36px 82px -40px rgba(0, 0, 0, 0.95);
}

/* A soft two-temperature wash gives the glass something to refract. */
:is(body.user-center, .skinlib-page) .content-wrapper {
  background-image:
    radial-gradient(1100px 620px at 88% -12%, rgba(var(--brand-rgb), 0.17), transparent 64%),
    radial-gradient(820px 520px at 0% 8%, rgba(96, 138, 255, 0.11), transparent 66%),
    radial-gradient(900px 560px at 56% 112%, rgba(var(--brand-rgb), 0.1), transparent 70%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 26%, transparent),
      transparent 46%
    );
  background-repeat: no-repeat;
}

/* Header and rail read as one continuous pane of glass. */
body.user-center .main-header.navbar,
.skinlib-page .main-header.navbar {
  background: var(--header);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

body.user-center .main-header.navbar.is-scrolled,
.skinlib-page .main-header.navbar.is-scrolled {
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 18px 46px -34px rgba(11, 13, 16, 0.55);
}

body.user-center .main-header.navbar::after,
.skinlib-page .main-header.navbar::after {
  opacity: 0.28;
}

/* The rail is a tinted pane rather than a blurred one: it sits over a flat
   canvas, so a backdrop filter would stack a large composited surface on every
   palette change and show nothing. A faint top light and a warm edge on the
   right give it depth instead. */
body.user-center .main-sidebar {
  background-color: color-mix(in srgb, var(--sidebar) 82%, transparent);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--glass-hi) 38%, transparent),
      transparent 108px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--brand) 5%, transparent),
      transparent 72%
    );
  border-right: 1px solid var(--glass-line);
  box-shadow: inset -1px 0 0 var(--glass-hi);
}

body.user-center .main-sidebar .brand-link {
  background: transparent;
}

/* The rail's skin is a saved setting (`sidebar-light-warning`), not something
   the client-side toggle can change: AdminLTE keys its label colours off that
   class, so in night mode the labels kept the daylight #343a40 until the next
   page load re-rendered the aside. These scoped rules outrank the skin rules
   and follow the palette instead. */
body.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link {
  color: var(--text-soft);
}

body.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link:focus,
body.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link:active,
body.dark-mode .main-sidebar .nav-sidebar > .nav-item:hover > .nav-link {
  color: var(--ink);
}

body.dark-mode .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: var(--text-soft);
}

body.dark-mode .main-sidebar .nav-sidebar .nav-header {
  color: var(--muted);
}

/* The active capsule keeps AdminLTE's solid accent fill, so it also keeps the
   dark ink that goes with it; declared last so it wins over the hover rule
   above (same specificity). */
body.dark-mode .main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  color: #1f2d3d;
}

/* The mirror image, and the reason a page could look wrong all the way back in
   day mode: the rail class is rendered from the account flag, so a page opened
   in night mode ships `sidebar-dark-warning`, and `[class*=sidebar-dark-]`
   keeps painting #c2c7d0 links and #d0d4db headings (and a rgba(255,255,255,.1)
   hover) on a rail that is light again. Those rules outrank the theme's own
   `.nav-sidebar .nav-link`, so the text stayed washed out until the next
   navigation re-rendered the aside. Follow the palette instead of the skin. */
html[data-mode="light"] body .main-sidebar .nav-sidebar > .nav-item > .nav-link,
html[data-mode="light"] body .main-sidebar .nav-treeview > .nav-item > .nav-link {
  color: var(--text-soft);
}

html[data-mode="light"] body .main-sidebar .nav-sidebar > .nav-item:hover > .nav-link,
html[data-mode="light"] body .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
html[data-mode="light"] body .main-sidebar .nav-sidebar > .nav-item > .nav-link:focus,
html[data-mode="light"] body .main-sidebar .nav-sidebar > .nav-item > .nav-link:active,
html[data-mode="light"] body .main-sidebar .nav-treeview > .nav-item > .nav-link:hover,
html[data-mode="light"] body .main-sidebar .nav-treeview > .nav-item > .nav-link:focus {
  background-color: color-mix(in srgb, var(--brand) 7%, var(--hover));
  color: var(--ink);
}

html[data-mode="light"] body .main-sidebar .nav-sidebar .nav-header {
  color: var(--muted);
}

html[data-mode="light"] body .main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  color: #1f2d3d;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.user-center .main-header.navbar,
  .skinlib-page .main-header.navbar {
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    background: color-mix(in srgb, var(--header) 62%, transparent);
  }

  body.user-center .main-header.navbar.is-scrolled,
  .skinlib-page .main-header.navbar.is-scrolled {
    background: color-mix(in srgb, var(--header) 78%, transparent);
  }
}

/* Panels: one calm sheet, a hair of highlight on the top edge and a diagonal
   sheen so the surface reads as glass rather than as a flat fill. */
:is(body.user-center, .skinlib-page, .auth-page) .card {
  background-color: var(--glass-surface);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

:is(body.user-center, .skinlib-page, .auth-page) .card:hover {
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-hover);
  transform: none;
}

:is(body.user-center, .skinlib-page) .card-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-line);
}

:is(body.user-center, .skinlib-page) .card-footer {
  background: transparent;
  border-top: 1px solid var(--glass-line);
}

.auth-page .card {
  box-shadow: inset 0 2px 0 0 var(--brand), inset 0 1px 0 var(--glass-hi),
    var(--glass-shadow);
}

/* The panes are now translucent enough for the ambient wash to show through,
   so they also blur it — the frost is what makes the sheet read as glass. The
   launcher and the redeem widget set their own, heavier filters below. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(body.user-center, .skinlib-page, .auth-page) .card {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
}

/* The gallery can hold two dozen thumbnails. Their porcelain stage already
   covers the pane, so a per-card backdrop filter would only cost a fresh
   blurred layer under every one of them while scrolling. They keep the tint
   and the sheen, and skip the frost. */
.skinlib-page .content a.d-block > .card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Launcher panel — clear glass in the spirit of the hero search field: the pane
   stays almost untinted and 12.png shows through as a soft frosted photograph,
   thinning towards the right where the Umi mascot sits. The mascot is the drag
   handle that hands the server over to a launcher; the plugin's button row
   retires, its hidden button staying in the DOM as the single source of the API
   URL. */
body.user-center .card:has(#ygg-dnd-button) {
  background: color-mix(in srgb, var(--surface) 12%, transparent);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.user-center .card:has(#ygg-dnd-button) {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

/* The photograph: barely frosted, so the picture itself still reads. */
body.user-center .card:has(#ygg-dnd-button)::before {
  background: url('/app/12.png') center 42% / cover no-repeat;
  content: '';
  filter: blur(9px) saturate(124%) brightness(1.04);
  inset: -8%;
  opacity: 0.92;
  position: absolute;
  z-index: 0;
}

/* Veil that thins towards the mascot: copy stays crisp on the left, the photo
   breathes on the right. */
body.user-center .card:has(#ygg-dnd-button)::after {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--surface) 90%, transparent) 0%,
    color-mix(in srgb, var(--surface) 70%, transparent) 44%,
    color-mix(in srgb, var(--surface) 22%, transparent) 82%,
    color-mix(in srgb, var(--surface) 6%, transparent) 100%
  );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

body.user-center .card:has(#ygg-dnd-button) > .card-header,
body.user-center .card:has(#ygg-dnd-button) > .card-body {
  position: relative;
  z-index: 2;
}

/* Drag button and guide link retire; the mascot takes over both jobs. */
body.user-center .card:has(#ygg-dnd-button) > .card-footer {
  display: none;
}

/* Umi: bottom-right mascot and the drop source for the launcher. */
body.user-center .card:has(#ygg-dnd-button) .umi-slot {
  align-items: flex-end;
  bottom: 0;
  cursor: grab;
  display: flex;
  justify-content: flex-end;
  pointer-events: auto;
  position: absolute;
  right: 0.9rem;
  top: 0;
  -webkit-user-select: none;
  user-select: none;
  width: clamp(112px, 24%, 184px);
  z-index: 3;
}

body.user-center .card:has(#ygg-dnd-button) .umi-slot:active {
  cursor: grabbing;
}

/* Umi: bottom-right mascot and the drop source for the launcher. Painted as a
   background picture rather than an img element, so the context menu has no
   “save image as” and dragging it out of the browser cannot drop an image file. */
body.user-center .card:has(#ygg-dnd-button) .umi {
  -webkit-touch-callout: none;
  background: url('/app/urcmi.gif') center bottom / contain no-repeat;
  display: block;
  filter: drop-shadow(0 14px 24px rgba(11, 13, 16, 0.16));
  aspect-ratio: 1 / 1;
  max-height: 100%;
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
  width: 100%;
}

body.user-center .card:has(#ygg-dnd-button) .umi-slot:hover .umi {
  filter: drop-shadow(0 18px 28px rgba(11, 13, 16, 0.24));
  transform: translateY(-3px);
}

body.user-center .card:has(#ygg-dnd-button) .umi-slot:active .umi {
  transform: scale(0.98);
}

/* Confirmation pill, visible only for a moment after a copy. */
body.user-center .card:has(#ygg-dnd-button) .umi-slot::after {
  background: var(--glass-raised);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  bottom: 0.55rem;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  color: var(--ink);
  content: attr(data-hint);
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0;
  padding: 0.22rem 0.65rem;
  /* 提示条只是装饰：压住图片会截走右击，导致没有「图片另存为」。 */
  pointer-events: none;
  position: absolute;
  transform: translateY(5px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}

body.user-center .card:has(#ygg-dnd-button) .umi-slot.is-copied::after {
  opacity: 1;
  transform: none;
}

/* Desktop keeps the copy clear of the mascot; the phone stacks it below. */
@media (min-width: 768px) {
  body.user-center .card:has(#ygg-dnd-button) > .card-body {
    padding-right: calc(clamp(112px, 24%, 184px) + 1.6rem);
  }
}

@media (max-width: 767.98px) {
  /* Stacked: the mascot sits under the copy, so the veil turns vertical. */
  body.user-center .card:has(#ygg-dnd-button)::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 88%, transparent) 0%,
      color-mix(in srgb, var(--surface) 72%, transparent) 45%,
      color-mix(in srgb, var(--surface) 30%, transparent) 84%,
      color-mix(in srgb, var(--surface) 10%, transparent) 100%
    );
  }

  body.user-center .card:has(#ygg-dnd-button) .umi-slot {
    inset: auto;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
    width: 116px;
  }

  body.user-center .card:has(#ygg-dnd-button) .umi {
    max-height: 116px;
  }
}

/* Copy: measured line length, and the endpoint becomes a frosted capsule. */
body.user-center .card:has(#ygg-dnd-button) .card-body p {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: 0.6rem;
  max-width: 62ch;
}

body.user-center .card:has(#ygg-dnd-button) .card-body p:last-child {
  margin-bottom: 0;
}

/* The endpoint itself is the copy control: a frosted capsule that lifts a
   “copied” pill above its left edge. */
body.user-center .card:has(#ygg-dnd-button) .card-body code {
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  background: color-mix(in srgb, var(--glass-raised) 72%, transparent);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 8px 20px -14px rgba(4, 7, 12, 0.5);
  color: var(--brand-strong);
  display: inline-block;
  font-size: 0.82em;
  letter-spacing: 0.01em;
  margin: 0.15rem 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.14rem 0.6rem;
  position: relative;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
  vertical-align: baseline;
}

body.user-center .card:has(#ygg-dnd-button) .card-body code.umi-endpoint {
  cursor: pointer;
}

body.user-center .card:has(#ygg-dnd-button) .card-body code.umi-endpoint:hover {
  background: color-mix(in srgb, var(--glass-raised) 92%, transparent);
  border-color: rgba(255, 255, 255, 0.32);
}

body.user-center .card:has(#ygg-dnd-button) .card-body code.umi-endpoint:active {
  transform: scale(0.97);
}

body.user-center .card:has(#ygg-dnd-button) .card-body code.umi-endpoint:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

body.user-center .card:has(#ygg-dnd-button) .card-body code.umi-endpoint::after {
  background: var(--glass-raised);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  bottom: calc(100% + 0.45rem);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  color: var(--ink);
  content: attr(data-hint);
  font-size: 0.72rem;
  font-weight: 600;
  left: 0;
  opacity: 0;
  padding: 0.22rem 0.65rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(5px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
  z-index: 4;
}

body.user-center .card:has(#ygg-dnd-button) .card-body code.umi-endpoint.is-copied::after {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-transparency: reduce) {
  body.user-center .card:has(#ygg-dnd-button) {
    background: var(--surface);
  }

  body.user-center .card:has(#ygg-dnd-button)::before,
  body.user-center .card:has(#ygg-dnd-button)::after {
    display: none;
  }
}

/* Redeem panel — the companion of the launcher card: 13.png itself, kept sharp
   and almost unobstructed, under a thin sheet of smoked glass. The veil only
   deepens where the copy lives, so the picture keeps its depth on the right;
   the input is a dark pane so white type stays crisp over any highlight. */
body.user-center .card.rc-widget {
  background: rgba(9, 13, 19, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 24px 60px -40px rgba(4, 7, 12, 0.65);
  color: #f4f7fb;
  isolation: isolate;
  min-height: 240px;
  overflow: visible;
  position: relative;
}

/* The photograph and its veil moved into a clipping plate of their own, so the
   card itself can stay overflow: visible and let Umi lean over the bottom edge
   the way a sleeper hangs off a window sill. */
body.user-center .card.rc-widget > .rc-widget__backdrop {
  border-radius: inherit;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.user-center .card.rc-widget {
    -webkit-backdrop-filter: blur(4px) saturate(120%);
    backdrop-filter: blur(4px) saturate(120%);
  }
}

/* Three pixels of blur only hide compression noise: the scene still reads as
   a photograph rather than as a texture. */
body.user-center .card.rc-widget > .rc-widget__backdrop::before {
  background: url('/app/13.png') center 44% / cover no-repeat;
  content: '';
  filter: blur(3px) saturate(112%) brightness(1.04);
  inset: -3%;
  opacity: 0.9;
  position: absolute;
  z-index: 0;
}

/* Veil: dense on the left under the title and the form, nearly open on the
   right where the picture is allowed to win. */
body.user-center .card.rc-widget > .rc-widget__backdrop::after {
  background:
    /* The hint now lives in the bottom-right corner, over the brightest part of
       the photograph: shade the bottom band a little so small type stays legible
       without closing the picture. */
    linear-gradient(
      0deg,
      rgba(6, 10, 16, 0.55) 0%,
      rgba(6, 10, 16, 0.24) 18%,
      rgba(6, 10, 16, 0) 40%
    ),
    radial-gradient(
      130% 130% at 100% 0%,
      rgba(var(--brand-rgb), 0.14),
      transparent 62%
    ),
    linear-gradient(
      100deg,
      rgba(6, 10, 16, 0.68) 0%,
      rgba(6, 10, 16, 0.42) 54%,
      rgba(6, 10, 16, 0.12) 100%
    );
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

body.user-center .card.rc-widget > .card-header,
body.user-center .card.rc-widget > .card-body {
  position: relative;
  z-index: 2;
}

/* AdminLTE's clearfix pseudo-elements become flex items once the header and body
   turn into flex containers; the header one strands the records pill mid-row and
   the body one trails the hint. Nothing here floats, so drop both. */
body.user-center .card.rc-widget > .card-header::after,
body.user-center .card.rc-widget > .card-body::after {
  content: none;
  display: none;
}

body.user-center .card.rc-widget > .card-header {
  align-items: center;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
  min-height: 62px;
  padding: 1.05rem 1.1rem 0.95rem;
}

body.user-center .card.rc-widget .card-title {
  align-items: center;
  color: #fff;
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 1.02rem;
  font-weight: 700;
  gap: 0.4rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 1px 8px rgba(4, 7, 12, 0.55);
}

body.user-center .card.rc-widget .rc-widget__title-text {
  white-space: nowrap;
}

/* The same lockup as the redemption page hero, scaled down to a card title. */
body.user-center .card.rc-widget .rc-widget__logo {
  display: block;
  filter: drop-shadow(0 1px 6px rgba(4, 7, 12, 0.45));
  height: 1.2em;
  max-width: 8em;
  object-fit: contain;
  width: auto;
}

body.user-center .card.rc-widget .rc-widget__records {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  gap: 0.35rem;
  line-height: 1.6;
  margin-left: auto;
  padding: 0.22rem 0.7rem;
  text-decoration: none;
  text-shadow: 0 1px 6px rgba(4, 7, 12, 0.5);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

body.user-center .card.rc-widget .rc-widget__records:hover {
  background: #fff;
  border-color: #fff;
  color: #14181e;
  text-decoration: none;
}

body.user-center .card.rc-widget > .card-body {
  color: rgba(244, 247, 251, 0.8);
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  padding: 1.15rem 1.1rem 1.2rem;
}

body.user-center .card.rc-widget .rc-widget__form {
  margin: 0;
}

body.user-center .card.rc-widget .rc-widget__field {
  align-items: center;
  background: rgba(8, 12, 18, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}

body.user-center .card.rc-widget .rc-widget__field:focus-within {
  background: rgba(8, 12, 18, 0.6);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 3px rgba(var(--brand-rgb), 0.3);
}

body.user-center .card.rc-widget .rc-widget__lead {
  color: rgba(255, 255, 255, 0.52);
  flex: 0 0 auto;
  font-size: 0.86rem;
}

body.user-center .card.rc-widget .rc-widget__input {
  background: transparent;
  border: 0;
  color: #fff;
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.12em;
  min-width: 0;
  outline: none;
  padding: 0.68rem 0;
  text-transform: uppercase;
}

body.user-center .card.rc-widget .rc-widget__input::placeholder {
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.08em;
}

body.user-center .card.rc-widget .rc-widget__submit {
  background: #fff;
  border: 0;
  border-radius: 11px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9);
  color: #14181e;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.15rem;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s var(--ease);
  white-space: nowrap;
}

body.user-center .card.rc-widget .rc-widget__submit:hover {
  background: var(--brand);
  color: #1a1204;
}

body.user-center .card.rc-widget .rc-widget__submit:active {
  transform: scale(0.98);
}

/* Pinned to the bottom-right corner: the auto top margin absorbs whatever the
   card's extra height leaves, and the text aligns with the field's right edge. */
body.user-center .card.rc-widget .rc-widget__hint {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  line-height: 1.6;
  margin: auto 0 0 0;
  padding-top: 0.75rem;
  pointer-events: none;
  text-align: right;
  text-shadow: 0 1px 6px rgba(4, 7, 12, 0.5);
}

/* The mascot, drawn as a background picture instead of an img element: there is
   no “save image as” entry for it, and dragging it out of the browser cannot
   drop an image file. It leans over the card's bottom edge a few pixels, like
   someone asleep on the window sill. A negative z-index keeps it under the form
   and any note; the hint above it ignores pointer events so the whole figure
   stays draggable. */
body.user-center .card.rc-widget .rc-widget__umi {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  background: url('/app/umi.gif') center bottom / contain no-repeat;
  bottom: -14px;
  cursor: grab;
  filter: drop-shadow(0 10px 20px rgba(6, 10, 16, 0.35));
  aspect-ratio: 400 / 280;
  height: auto;
  left: 0.95rem;
  position: absolute;
  transition: transform 0.18s var(--ease);
  width: min(156px, 27%);
  z-index: -1;
}

body.user-center .card.rc-widget .rc-widget__umi:active {
  cursor: grabbing;
  transform: scale(0.96);
}

/* 点击 Umi 复制地址后的确认条，与上方启动器卡片同一种胶囊；只挂在卡片上，
   不在卡片里多出常驻文案，也不占位。 */
body.user-center .card.rc-widget::after {
  background: var(--glass-raised);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  bottom: 0.95rem;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  color: var(--ink);
  content: attr(data-copied-hint);
  font-size: 0.72rem;
  font-weight: 600;
  left: 0.95rem;
  opacity: 0;
  padding: 0.22rem 0.65rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(5px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
  z-index: 3;
}

body.user-center .card.rc-widget.is-copied::after {
  opacity: 1;
  transform: none;
}

body.user-center .card.rc-widget .rc-widget__note {
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: 11px;
  display: flex;
  font-size: 0.8rem;
  gap: 0.5rem;
  line-height: 1.6;
  margin-bottom: 0.7rem;
  padding: 0.5rem 0.7rem;
}

body.user-center .card.rc-widget .rc-widget__note i {
  margin-top: 0.22em;
}

body.user-center .card.rc-widget .rc-widget__note--ok {
  background: rgba(64, 190, 110, 0.16);
  border-color: rgba(64, 190, 110, 0.32);
  color: #d3f8de;
}

body.user-center .card.rc-widget .rc-widget__note--err {
  background: rgba(220, 84, 62, 0.18);
  border-color: rgba(220, 84, 62, 0.36);
  color: #ffdad3;
}

body.user-center .card.rc-widget .rc-widget__link {
  color: #ffd98a;
  display: inline-block;
  font-weight: 600;
  margin-top: 0.25rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.user-center .card.rc-widget .rc-widget__link:hover {
  color: #fff;
}

@media (max-width: 575.98px) {
  body.user-center .card.rc-widget > .card-header {
    min-height: 56px;
    padding: 0.85rem 0.85rem 0.75rem;
  }

  body.user-center .card.rc-widget .card-title {
    font-size: 0.98rem;
  }

  body.user-center .card.rc-widget .rc-widget__logo {
    height: 1.15em;
  }

  body.user-center .card.rc-widget .rc-widget__records {
    font-size: 0.72rem;
  }

  body.user-center .card.rc-widget .rc-widget__umi {
    bottom: -10px;
    left: 0.75rem;
  }

  body.user-center .card.rc-widget::after {
    bottom: 0.8rem;
    left: 0.75rem;
  }

  /* Keep the single-line hint clear of the mascot on narrow cards. */
  body.user-center .card.rc-widget .rc-widget__hint {
    padding-left: 7.5rem;
  }

  body.user-center .card.rc-widget > .card-body {
    padding: 0.95rem 0.85rem 1rem;
  }

  body.user-center .card.rc-widget .rc-widget__field {
    align-items: stretch;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem;
  }

  body.user-center .card.rc-widget .rc-widget__lead {
    display: none;
  }

  body.user-center .card.rc-widget .rc-widget__input {
    padding: 0.5rem 0.55rem;
  }

  body.user-center .card.rc-widget .rc-widget__submit {
    width: 100%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.user-center .card.rc-widget {
    background: #0b0f15;
  }

  body.user-center .card.rc-widget .rc-widget__field {
    background: #121a24;
  }

  body.user-center .card.rc-widget > .rc-widget__backdrop::before,
  body.user-center .card.rc-widget > .rc-widget__backdrop::after {
    display: none;
  }
}

/* Tabs: a segmented control floating in the card header, never a blue band. */
:is(body.user-center, .skinlib-page) .card.card-tabs>.card-header,
:is(body.user-center, .skinlib-page) .card.card-primary>.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--glass-line);
  padding: 0.6rem 0.8rem !important;
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header>.d-flex {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header .nav-tabs {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 0;
  border-radius: 12px;
  gap: 0.15rem;
  margin: 0;
  padding: 0.2rem;
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header .nav-tabs .nav-item {
  margin: 0;
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header .nav-tabs .nav-link {
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px;
  color: var(--muted) !important;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  padding: 0.54rem 1rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header .nav-tabs .nav-link:hover,
:is(body.user-center, .skinlib-page) .card-tabs .card-header .nav-tabs .nav-link:focus {
  background: color-mix(in srgb, var(--surface) 46%, transparent) !important;
  color: var(--ink) !important;
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header .nav-tabs .nav-link.active {
  background: var(--glass-raised) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 6px rgba(11, 13, 16, 0.08);
  color: var(--ink) !important;
}

/* The "type to search" field becomes a frosted capsule beside the tabs. */
:is(body.user-center, .skinlib-page) .card-tabs .card-header input[type="search"].form-control {
  background: color-mix(in srgb, var(--field) 66%, transparent) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  color: var(--ink);
  font-size: 0.86rem;
  height: 38px;
  min-width: min(260px, 46vw);
  padding: 0.35rem 1rem;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header input[type="search"].form-control::placeholder {
  color: var(--faint);
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header input[type="search"].form-control:focus {
  background: var(--glass-raised) !important;
  border-color: rgba(var(--brand-rgb), 0.5) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px var(--ring);
  outline: none;
}

:is(body.user-center, .skinlib-page) .card-tabs .card-header>.d-flex>div:last-child {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

/* Form fields share the same hairline and focus ring. */
:is(body.user-center, .skinlib-page) .form-control,
:is(body.user-center, .skinlib-page) .custom-select {
  background-color: color-mix(in srgb, var(--field) 72%, transparent);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  color: var(--ink);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

:is(body.user-center, .skinlib-page) .form-control:focus,
:is(body.user-center, .skinlib-page) .custom-select:focus {
  background-color: var(--field);
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px var(--ring);
}

:is(body.user-center, .skinlib-page) .input-group-text {
  background: color-mix(in srgb, var(--field) 72%, transparent);
  border-color: var(--glass-line);
  color: var(--muted);
}

/* Frosted avatar menu. The selector chains outrank AdminLTE's opaque shell —
   `.navbar-custom-menu > .navbar-nav > li > .dropdown-menu` (0,3,1) and
   `.navbar-nav > .user-menu > .dropdown-menu` (0,3,0) — so the rounded glass
   pane and its hairline edge survive on every page that shows the menu. */
:is(.home-page, .user-center, .skinlib-page) .navbar .navbar-nav > li > .dropdown-menu,
:is(body.user-center, .skinlib-page) .navbar-nav > .user-menu > .dropdown-menu {
  background: var(--glass-raised);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-hover);
  margin-top: 0.5rem;
  overflow: hidden;
  padding: 0.4rem;
}

:is(.home-page, .user-center, .skinlib-page) .navbar .navbar-nav > li > .dropdown-menu .dropdown-item,
:is(body.user-center, .skinlib-page) .navbar-nav > .user-menu > .dropdown-menu .dropdown-item {
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}

:is(.home-page, .user-center, .skinlib-page) .navbar .navbar-nav > li > .dropdown-menu .dropdown-item:hover,
:is(.home-page, .user-center, .skinlib-page) .navbar .navbar-nav > li > .dropdown-menu .dropdown-item:focus,
:is(body.user-center, .skinlib-page) .navbar-nav > .user-menu > .dropdown-menu .dropdown-item:hover,
:is(body.user-center, .skinlib-page) .navbar-nav > .user-menu > .dropdown-menu .dropdown-item:focus {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--ink);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.home-page, .user-center, .skinlib-page) .navbar .navbar-nav > li > .dropdown-menu,
  :is(body.user-center, .skinlib-page) .navbar-nav > .user-menu > .dropdown-menu {
    -webkit-backdrop-filter: blur(26px) saturate(185%);
    backdrop-filter: blur(26px) saturate(185%);
    background: color-mix(in srgb, var(--surface) 66%, transparent);
  }
}

/* The home stage is a dark cinematic hero, so the same pane is smoked there:
   the light surface would read as a white card floating over the photograph. */
.home-page .navbar .navbar-nav > li > .dropdown-menu {
  background: color-mix(in srgb, #0b0d10 74%, transparent);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px -34px rgba(0, 0, 0, 0.9);
}

.home-page .navbar .navbar-nav > li > .dropdown-menu .dropdown-item {
  color: rgba(238, 242, 248, 0.78);
}

.home-page .navbar .navbar-nav > li > .dropdown-menu .dropdown-item:hover,
.home-page .navbar .navbar-nav > li > .dropdown-menu .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.home-page .navbar .navbar-nav > li > .dropdown-menu .dropdown-divider {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Tables sit on the glass without extra chrome. */
:is(body.user-center, .skinlib-page) .table {
  color: var(--text);
  margin-bottom: 0;
}

:is(body.user-center, .skinlib-page) .table thead th {
  border-bottom: 1px solid var(--glass-line);
  border-top: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.8rem 0.9rem;
  text-transform: uppercase;
}

:is(body.user-center, .skinlib-page) .table td {
  border-top: 1px solid color-mix(in srgb, var(--line) 52%, transparent);
  padding: 0.8rem 0.9rem;
  vertical-align: middle;
}

:is(body.user-center, .skinlib-page) .table-hover tbody tr {
  transition: background-color 0.18s var(--ease);
}

:is(body.user-center, .skinlib-page) .table-hover tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  color: var(--ink);
}

/* Sidebar: quiet capsules, no hard accent bar. */
body.user-center .nav-sidebar .nav-link {
  border-radius: 11px;
}

body.user-center .nav-sidebar .nav-link.active {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.18);
  color: var(--brand-strong);
}

body.user-center .nav-sidebar .nav-link.active::before {
  display: none;
}

/* Large, calm page titles. */
:is(body.user-center, .skinlib-page) .content-header {
  padding: 1.5rem 0 0.55rem;
}

:is(body.user-center, .skinlib-page) .content-header h1 {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.03em;
}

:is(body.user-center, .skinlib-page) .content-header h1::after {
  display: none;
}

/* Dashboard figures and dialogs join the same material. */
body.user-center .info-box {
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  overflow: hidden;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.user-center .info-box:not([class*="bg-"]) {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    background: var(--glass-surface);
  }
}

:is(body.user-center, .skinlib-page) .modal-content {
  background: var(--surface);
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 40px 90px -50px rgba(0, 0, 0, 0.6);
  color: var(--text);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(body.user-center, .skinlib-page) .modal-content {
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
  }
}

:is(body.user-center, .skinlib-page) .modal-header,
:is(body.user-center, .skinlib-page) .modal-footer {
  border-color: var(--glass-line);
}

:is(body.user-center, .skinlib-page) .page-link {
  border-radius: 10px;
}

/* Respect the system preference for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  body.user-center .main-header.navbar,
  .skinlib-page .main-header.navbar,
  body.user-center .main-sidebar,
  :is(body.user-center, .skinlib-page, .auth-page) .card,
  :is(body.user-center, .skinlib-page) .modal-content,
  :is(.home-page, .user-center, .skinlib-page) .navbar .navbar-nav > li > .dropdown-menu,
  :is(body.user-center, .skinlib-page) .navbar-nav > .user-menu > .dropdown-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }

  .home-page .navbar .navbar-nav > li > .dropdown-menu {
    background: #0d1015;
  }
}

/* --------------------------------------------------------------------------
   28. Skin library — gallery vitrines and the texture detail stage
   The gallery cards become lit display cases: a porcelain stage inside a
   hairline frame with a quiet lift on hover. On the detail page AdminLTE's
   solid colour bands give way to tinted glass, so the model, the facts and
   the description read as one calm object instead of three blocks.
   -------------------------------------------------------------------------- */

.skinlib-page {
  --skin-stage-top: #ffffff;
  --skin-stage-mid: #f3f7fc;
  --skin-stage-bottom: #e3ecf7;
  --skin-chip-ink: #6b5200;
  --skin-card-shadow: 0 22px 48px -34px rgba(15, 22, 34, 0.5);
  --skin-card-shadow-hover: 0 32px 64px -34px rgba(15, 22, 34, 0.46);
}

body.dark-mode.skinlib-page,
html[data-mode="dark"] .skinlib-page {
  --skin-stage-top: #252b34;
  --skin-stage-mid: #1a1f26;
  --skin-stage-bottom: #111519;
  --skin-chip-ink: var(--brand-2);
  --skin-card-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.75);
  --skin-card-shadow-hover: 0 32px 64px -28px rgba(0, 0, 0, 0.82);
}

/* This page's body class is rendered from the account flag, while the palette
   follows `html[data-mode]` (the browser's stored choice, painted before the
   first frame). When the two disagree the palette is already light but these
   dark-scoped declarations still hold: AdminLTE's
   `.dark-mode .content-wrapper { background-color: #454d55 }` outranks the
   theme's `.content-wrapper`, so the sheet stayed slate while the cards, header
   and text had gone white — and the card stage kept its night gradient. Let an
   explicit light choice win here as well. */
html[data-mode="light"] body .content-wrapper {
  background-color: var(--canvas);
}

/* Pages that paint their own full-viewport backdrop (the redeem-code screen
   puts a fixed night gradient behind a negative-z-index layer) must keep the
   shell transparent. Without this the light guard above wins over the page's
   own `background: transparent` — it is more specific — and an opaque white
   canvas lands between the backdrop and the frosted panels, so every pane
   samples white instead of the picture. */
html[data-mode="light"] body.rc-page-bg .wrapper,
html[data-mode="light"] body.rc-page-bg .content-wrapper,
html[data-mode="light"] body.rc-page-bg .content,
html[data-mode="light"] body.rc-page-bg .main-footer {
  background-color: transparent;
}

html[data-mode="light"] body.skinlib-page {
  --skin-stage-top: #ffffff;
  --skin-stage-mid: #f3f7fc;
  --skin-stage-bottom: #e3ecf7;
  --skin-chip-ink: #6b5200;
  --skin-card-shadow: 0 22px 48px -34px rgba(15, 22, 34, 0.5);
  --skin-card-shadow-hover: 0 32px 64px -34px rgba(15, 22, 34, 0.46);
}

/* Page heading: the gallery name on the left, a quiet audience chip right. */
.skinlib-page .content-header {
  padding: 1.4rem 0 0.7rem;
}

.skinlib-page .content-header h1 {
  font-size: clamp(1.5rem, 1.18rem + 1vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.035em;
}

.skinlib-page .content-header .container-fluid > span {
  align-items: center;
  align-self: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.8rem;
  gap: 0.35rem;
  letter-spacing: 0.01em;
}

.skinlib-page .content-header .container-fluid > span .fas {
  color: var(--faint);
  font-size: 0.78rem;
}

/* ---- Gallery cards ------------------------------------------------------ */

.skinlib-page .content a.d-block > .card {
  background: var(--glass-surface);
  background-image: linear-gradient(180deg, var(--glass-hi), transparent 46%);
  border: 1px solid color-mix(in srgb, var(--line) 52%, transparent);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--skin-card-shadow);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.skinlib-page .content a.d-block > .card:hover {
  border-color: rgba(var(--brand-rgb), 0.38);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--skin-card-shadow-hover),
    0 0 0 1px rgba(var(--brand-rgb), 0.08);
  transform: translateY(-6px);
}

.skinlib-page .content a.d-block:focus-visible > .card {
  outline: 2px solid rgba(var(--brand-rgb), 0.5);
  outline-offset: 3px;
}

.skinlib-page .content a.d-block > .card > .card-body {
  padding: 0.5rem 0.5rem 0;
}

/* The porcelain stage: a soft spotlight that lifts the model off the card. */
.skinlib-page .content a.d-block > .card > .card-body > a {
  background:
    radial-gradient(
      120% 88% at 50% 6%,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      165deg,
      var(--skin-stage-top),
      var(--skin-stage-mid) 56%,
      var(--skin-stage-bottom)
    );
  border: 1px solid color-mix(in srgb, var(--line) 38%, transparent);
  border-radius: 15px;
  display: block;
  overflow: hidden;
  position: relative;
}

.skinlib-page .content a.d-block > .card > .card-body img.card-img-top {
  border-radius: 14px;
  display: block;
  height: auto;
  transition: transform 0.55s var(--ease);
  width: 100%;
}

.skinlib-page .content a.d-block > .card:hover img.card-img-top {
  transform: scale(1.035);
}

.skinlib-page .content a.d-block > .card > .card-footer {
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  padding: 0.72rem 0.85rem 0.85rem;
}

.skinlib-page .content a.d-block > .card .card-footer > .d-flex.align-items-center {
  gap: 0.4rem;
  margin-bottom: 0.55rem !important;
}

.skinlib-page .content a.d-block > .card .card-footer .align-items-center > .text-truncate {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.skinlib-page .content a.d-block > .card .card-footer .badge {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 1px 1px rgba(15, 22, 34, 0.04);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.55rem;
}

.skinlib-page .content a.d-block > .card .badge.bg-teal {
  background: rgba(20, 150, 170, 0.12) !important;
  color: #0d7484 !important;
}

.skinlib-page .content a.d-block > .card .badge.bg-indigo {
  background: rgba(99, 72, 240, 0.1) !important;
  color: #4f3ac8 !important;
}

body.dark-mode.skinlib-page .content a.d-block > .card .badge.bg-teal,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card .badge.bg-teal {
  background: rgba(45, 200, 215, 0.16) !important;
  color: #86e3ee !important;
}

body.dark-mode.skinlib-page .content a.d-block > .card .badge.bg-indigo,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card .badge.bg-indigo {
  background: rgba(130, 110, 255, 0.18) !important;
  color: #c3b6ff !important;
}

.skinlib-page .content a.d-block > .card .card-footer .text-gray,
.skinlib-page .content a.d-block > .card .card-footer .text-red {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s var(--ease);
}

.skinlib-page .content a.d-block > .card .card-footer .text-red {
  color: #e5484d !important;
}

.skinlib-page .content a.d-block > .card .card-footer .text-gray {
  color: var(--faint) !important;
}

.skinlib-page .content a.d-block > .card .card-footer .text-red:hover {
  transform: scale(1.06);
}

.skinlib-page .content a.d-block > .card .card-footer .text-red .fas {
  filter: drop-shadow(0 2px 5px rgba(229, 72, 77, 0.35));
}

/* ---- Toolbar: capsule search and a segmented sorter -------------------- */

.skinlib-page section.content > .card {
  background: var(--glass-surface);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--skin-card-shadow);
}

.skinlib-page section.content > .card > .card-body {
  padding: 0.8rem 0.9rem;
}

.skinlib-page section.content > .card .form-group {
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem !important;
}

.skinlib-page section.content > .card .input-group {
  background: color-mix(in srgb, var(--field) 62%, transparent);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 1px 2px rgba(15, 22, 34, 0.04);
  flex-wrap: nowrap;
  min-width: 250px;
  padding: 3px;
}

.skinlib-page section.content > .card .input-group > .form-control {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink);
  font-size: 0.84rem;
  height: 34px;
  padding: 0 0.55rem;
}

.skinlib-page section.content > .card .input-group > .form-control::placeholder {
  color: var(--faint);
}

.skinlib-page section.content > .card .input-group > .form-control:focus {
  outline: none;
}

.skinlib-page section.content > .card .input-group .input-group-prepend,
.skinlib-page section.content > .card .input-group .input-group-append {
  align-items: center;
  display: flex;
  margin: 0;
}

.skinlib-page section.content > .card .input-group .btn {
  border: 0 !important;
  box-shadow: none !important;
  height: 34px;
}

.skinlib-page section.content > .card .input-group .input-group-prepend .btn {
  background: transparent !important;
  border-radius: 999px !important;
  color: var(--muted) !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 0.5rem 0 0.85rem;
}

.skinlib-page section.content > .card .input-group .input-group-prepend .btn:hover {
  color: var(--ink) !important;
}

.skinlib-page section.content > .card .input-group .input-group-append .btn {
  align-items: center;
  background: var(--brand) !important;
  border-radius: 999px !important;
  color: var(--on-brand) !important;
  display: inline-flex;
  justify-content: center;
  padding: 0;
  transition: box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
  width: 34px;
}

.skinlib-page section.content > .card .input-group .input-group-append .btn:hover {
  box-shadow: 0 6px 14px -8px rgba(var(--brand-rgb), 0.9) !important;
  filter: brightness(1.03);
}

.skinlib-page section.content > .card .input-group .input-group-append .btn .fas {
  color: var(--on-brand);
  font-size: 0.78rem;
}

.skinlib-page section.content > .card .btn-group {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  gap: 2px;
  padding: 3px;
}

.skinlib-page section.content > .card .btn-group > .btn.bg-olive {
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.34rem 0.8rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.skinlib-page section.content > .card .btn-group > .btn.bg-olive:hover {
  background: color-mix(in srgb, var(--surface) 52%, transparent) !important;
  color: var(--ink) !important;
}

.skinlib-page section.content > .card .btn-group > .btn.bg-olive.active {
  background: var(--glass-raised) !important;
  box-shadow: 0 1px 2px rgba(15, 22, 34, 0.1),
    inset 0 1px 0 var(--glass-hi) !important;
  color: var(--ink) !important;
}

@media (max-width: 575.98px) {
  .skinlib-page section.content > .card .form-group {
    flex-wrap: wrap;
  }

  .skinlib-page section.content > .card .input-group {
    min-width: 0;
    width: 100%;
  }

  .skinlib-page .content a.d-block > .card {
    border-radius: 17px;
  }
}

/* ---- Detail page: one material for the model and the facts -------------- */

.skinlib-page #previewer > .card,
.skinlib-page #side > .card,
.skinlib-page #texture-description .card {
  border-radius: 21px;
  overflow: hidden;
}

.skinlib-page #previewer > .card > .card-header,
.skinlib-page #side > .card > .card-header,
.skinlib-page #texture-description .card > .card-header {
  border-bottom: 1px solid var(--glass-line);
  min-height: 54px;
  padding: 0.8rem 1.15rem;
}

.skinlib-page #previewer .card-title,
.skinlib-page #side .card-title,
.skinlib-page #texture-description .card-title {
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.015em;
}

/* Preview card */
.skinlib-page #previewer > .card {
  background: var(--glass-surface);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--skin-card-shadow);
}

.skinlib-page #previewer > .card > .card-header {
  background: transparent;
}

.skinlib-page #previewer .card-title .badge {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.5rem;
  text-transform: uppercase;
}

.skinlib-page #previewer .card-title .badge.bg-olive {
  background: rgba(var(--brand-rgb), 0.14) !important;
  color: var(--skin-chip-ink) !important;
}

.skinlib-page #previewer .card-header > .d-flex > div:last-child {
  align-items: center;
  display: flex;
  gap: 0.15rem;
}

.skinlib-page #previewer .card-header .fas {
  align-items: center;
  border-radius: 50%;
  color: var(--faint);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  width: 28px;
}

.skinlib-page #previewer .card-header .fas:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}

.skinlib-page #previewer > .card > .card-body {
  background:
    radial-gradient(
      92% 72% at 50% 4%,
      rgba(255, 255, 255, 0.92),
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      180deg,
      var(--skin-stage-top),
      var(--skin-stage-mid) 52%,
      var(--skin-stage-bottom)
    );
  border-bottom: 1px solid color-mix(in srgb, var(--line) 40%, transparent);
  min-height: 460px;
  position: relative;
}

.skinlib-page #previewer canvas {
  display: block;
}

.skinlib-page #previewer > .card > .card-footer {
  background: transparent;
  border-top: 1px solid var(--glass-line);
  padding: 0.85rem 1.15rem 1rem;
}

.skinlib-page #previewer .card-footer .mt-2.mb-3.d-flex {
  align-items: center;
  gap: 0.1rem;
  margin-bottom: 0.9rem !important;
}

.skinlib-page #previewer .btn-color {
  border: 0;
  box-shadow: inset 0 0 0 2px var(--surface),
    0 0 0 1px rgba(15, 22, 34, 0.14),
    0 4px 10px -6px rgba(15, 22, 34, 0.55) !important;
  height: 20px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  width: 20px;
}

.skinlib-page #previewer .btn-color:hover {
  transform: scale(1.12);
}

.skinlib-page #previewer .btn-color.bg-white {
  box-shadow: inset 0 0 0 2px #fff,
    0 0 0 1px rgba(15, 22, 34, 0.18),
    0 4px 10px -6px rgba(15, 22, 34, 0.45) !important;
}

.skinlib-page #previewer .card-footer .d-flex.justify-content-between {
  flex-wrap: wrap;
  gap: 0.4rem;
}

.skinlib-page #previewer .card-footer .btn {
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.4rem 0.95rem;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.skinlib-page #previewer .card-footer .btn-outline-success {
  background: rgba(15, 125, 85, 0.09);
  border-color: rgba(15, 125, 85, 0.22);
  color: #0b6b47;
}

.skinlib-page #previewer .card-footer .btn-outline-success:hover {
  background: rgba(15, 125, 85, 0.16);
  border-color: rgba(15, 125, 85, 0.34);
  color: #085c3c;
}

.skinlib-page #previewer .card-footer .btn-outline-primary {
  background: rgba(var(--brand-rgb), 0.1);
  border-color: rgba(var(--brand-rgb), 0.32);
  color: var(--skin-chip-ink);
}

.skinlib-page #previewer .card-footer .btn-outline-primary:hover {
  background: rgba(var(--brand-rgb), 0.18);
  border-color: rgba(var(--brand-rgb), 0.44);
  color: var(--skin-chip-ink);
}

.skinlib-page #previewer .card-footer .btn-outline-info {
  background: color-mix(in srgb, var(--field) 55%, transparent);
  border-color: var(--glass-line);
  color: var(--text-soft);
}

.skinlib-page #previewer .card-footer .btn-outline-info:hover {
  background: color-mix(in srgb, var(--field) 82%, transparent);
  border-color: rgba(var(--brand-rgb), 0.3);
  color: var(--ink);
}

.skinlib-page #previewer .card-footer .text-red {
  color: #e5484d;
}

.skinlib-page #previewer .card-footer .text-gray {
  color: var(--faint);
}

.skinlib-page #previewer .card-footer .text-red .fas {
  filter: drop-shadow(0 2px 5px rgba(229, 72, 77, 0.35));
}

/* Facts card: label / value rows separated by hairlines. */
.skinlib-page #side .card-primary .card-body {
  padding: 1.1rem 1.2rem;
}

.skinlib-page #side .card-primary .card-body > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.skinlib-page #side .card-primary .card-body > .container > .row {
  align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 42%, transparent);
  margin: 0 !important;
  padding: 0.68rem 0;
}

.skinlib-page #side .card-primary .card-body > .container > .row:first-child {
  padding-top: 0.1rem;
}

.skinlib-page #side .card-primary .card-body > .container > .row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.skinlib-page #side .card-primary .container > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.skinlib-page #side .card-primary .container > .row > div:first-child {
  color: var(--muted);
  font-size: 0.79rem;
  letter-spacing: 0.02em;
}

.skinlib-page #side .card-primary .container > .row > div:nth-child(2) {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
}

.skinlib-page #side .card-primary .container > .row .user-select-all {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.skinlib-page #side .card-primary .container > .row a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.skinlib-page #side .card-primary .container > .row a:hover {
  color: var(--brand-strong);
}

.skinlib-page #texture-source {
  border-radius: 21px;
  overflow: hidden;
}

.skinlib-page #side .card-primary .container > .row .col-1 a {
  color: var(--faint);
  opacity: 0.65;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.skinlib-page #side .card-primary .container > .row .col-1 a:hover {
  color: var(--brand-strong);
  opacity: 1;
}

.skinlib-page #side .card-primary .badge {
  border-radius: 6px;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.22rem 0.45rem;
}

.skinlib-page #side .card-primary .badge.bg-primary {
  background: #1d232c !important;
  color: #ffffff !important;
}

body.dark-mode.skinlib-page #side .card-primary .badge.bg-primary,
html[data-mode="dark"] .skinlib-page #side .card-primary .badge.bg-primary {
  background: #eef1f4 !important;
  color: #101318 !important;
}

/* Operations card: warm glass instead of a solid amber band. */
.skinlib-page #side > .card.card-warning {
  background: color-mix(in srgb, var(--surface) 88%, rgba(var(--brand-rgb), 0.05));
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 20px 44px -36px rgba(var(--brand-rgb), 0.85);
}

.skinlib-page #side > .card.card-warning > .card-header {
  background: linear-gradient(
    118deg,
    rgba(var(--brand-rgb), 0.2),
    rgba(var(--brand-rgb), 0.05) 58%,
    transparent
  ) !important;
  border-bottom: 1px solid rgba(var(--brand-rgb), 0.22);
  color: var(--skin-chip-ink) !important;
}

.skinlib-page #side > .card.card-warning .card-title {
  color: var(--skin-chip-ink);
  letter-spacing: 0.02em;
}

.skinlib-page #side > .card.card-warning .card-body {
  padding: 0.95rem 1.2rem 0.4rem;
}

.skinlib-page #side > .card.card-warning .card-body p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.skinlib-page #side > .card.card-warning > .card-footer {
  background: transparent;
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  padding: 0.85rem 1.2rem 1rem;
}

.skinlib-page #side > .card.card-warning .card-footer .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.skinlib-page #side > .card.card-warning .card-footer .btn {
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.4rem 1rem;
}

.skinlib-page #side > .card.card-warning .btn-warning {
  background: rgba(var(--brand-rgb), 0.16) !important;
  border: 1px solid rgba(var(--brand-rgb), 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 6px -4px rgba(120, 90, 0, 0.5);
  color: var(--skin-chip-ink) !important;
}

.skinlib-page #side > .card.card-warning .btn-warning:hover {
  background: rgba(var(--brand-rgb), 0.24) !important;
  border-color: rgba(var(--brand-rgb), 0.5) !important;
  color: var(--skin-chip-ink) !important;
}

.skinlib-page #side > .card.card-warning .btn-danger {
  background: rgba(220, 53, 69, 0.08) !important;
  border: 1px solid rgba(220, 53, 69, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #b02a37 !important;
}

.skinlib-page #side > .card.card-warning .btn-danger:hover {
  background: rgba(220, 53, 69, 0.14) !important;
  border-color: rgba(220, 53, 69, 0.34) !important;
  color: #8f1f2a !important;
}

body.dark-mode.skinlib-page #side > .card.card-warning .btn-danger,
html[data-mode="dark"] .skinlib-page #side > .card.card-warning .btn-danger {
  background: rgba(255, 105, 115, 0.12) !important;
  border-color: rgba(255, 105, 115, 0.3) !important;
  color: #ff9aa2 !important;
}

/* Description card: the heavy slate band becomes warm champagne glass. */
.skinlib-page #texture-description .card {
  background: var(--glass-surface);
}

.skinlib-page #texture-description .card > .card-header {
  background: linear-gradient(
    118deg,
    rgba(var(--brand-rgb), 0.14),
    rgba(var(--brand-rgb), 0.03) 55%,
    transparent
  ) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  color: var(--skin-chip-ink) !important;
}

.skinlib-page #texture-description .card-title {
  color: var(--skin-chip-ink);
}

.skinlib-page #texture-description .card-body {
  padding: 1.05rem 1.2rem 1.15rem;
}

.skinlib-page #texture-description description-content {
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.78;
}

.skinlib-page #texture-description description-content > :first-child {
  margin-top: 0;
}

.skinlib-page #texture-description description-content > :last-child {
  margin-bottom: 0;
}

.skinlib-page #texture-description description-content h1,
.skinlib-page #texture-description description-content h2 {
  border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  padding-bottom: 0.35rem;
}

.skinlib-page #texture-description description-content blockquote {
  border-left: 3px solid rgba(var(--brand-rgb), 0.45);
  color: var(--muted);
  margin: 0.8rem 0;
  padding-left: 0.85rem;
}

.skinlib-page #texture-description .card-body > p {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0;
}

.skinlib-page #texture-description .btn-secondary {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 62%, transparent) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 var(--glass-hi) !important;
  color: var(--skin-chip-ink) !important;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  width: 28px;
}

.skinlib-page #texture-description .btn-secondary:hover {
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  border-color: rgba(var(--brand-rgb), 0.4) !important;
}

/* Source card: plain glass, quiet disclosure row. */
.skinlib-page #texture-source .card-body {
  padding: 1.05rem 1.2rem;
}

.skinlib-page #texture-source details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.15rem 0;
  transition: color 0.2s var(--ease);
}

.skinlib-page #texture-source details summary:hover {
  color: var(--ink);
}

.skinlib-page #texture-source details[open] summary {
  color: var(--ink);
  margin-bottom: 0.85rem;
}

/* Keep the motion budget low for anyone who asked for it. */
@media (prefers-reduced-motion: reduce) {
  .skinlib-page .content a.d-block > .card,
  .skinlib-page .content a.d-block > .card:hover,
  .skinlib-page .content a.d-block > .card > .card-body img.card-img-top,
  .skinlib-page .content a.d-block > .card:hover img.card-img-top,
  .skinlib-page #previewer .btn-color,
  .skinlib-page #previewer .btn-color:hover {
    transform: none;
  }
}

/* ---- Preview background: frosted by default, one tap back to the print ---- */

:is(body.user-center, .skinlib-page) #previewer .preview-footer-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* The action cluster keeps its spread; a lone button stays its own width. */
:is(body.user-center, .skinlib-page) #previewer .preview-footer-row > .d-flex {
  flex: 1 1 auto;
  min-width: 0;
}

:is(body.user-center, .skinlib-page) #previewer .preview-footer-row .preview-clarity-toggle {
  background: color-mix(in srgb, var(--glass-surface) 88%, transparent);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 10px 20px -16px rgba(11, 13, 16, 0.55);
  color: var(--text-soft);
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin-left: auto;
  padding: 0.4rem 0.95rem;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

:is(body.user-center, .skinlib-page) #previewer .preview-footer-row .preview-clarity-toggle:hover {
  background: var(--glass-raised);
  border-color: rgba(var(--brand-rgb), 0.35);
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 14px 26px -18px rgba(11, 13, 16, 0.5);
  color: var(--ink);
}

:is(body.user-center, .skinlib-page) #previewer .preview-footer-row .preview-clarity-toggle:focus-visible {
  border-color: rgba(var(--brand-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.18);
  color: var(--ink);
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(body.user-center, .skinlib-page) #previewer .preview-footer-row .preview-clarity-toggle {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   29. Admin console — the same frosted material as the user centre
   The coloured card outlines and the pale header band give way to one quiet
   sheet, so options, users and plugins read like the rest of the site.
   -------------------------------------------------------------------------- */

body.admin-page .content-wrapper {
  background-color: var(--canvas);
  background-image:
    radial-gradient(1100px 620px at 88% -12%, rgba(var(--brand-rgb), 0.16), transparent 64%),
    radial-gradient(820px 520px at 0% 8%, rgba(96, 138, 255, 0.1), transparent 66%),
    radial-gradient(900px 560px at 56% 112%, rgba(var(--brand-rgb), 0.08), transparent 70%);
  background-repeat: no-repeat;
}

/* Header and rail: one continuous pane of glass. */
body.admin-page .main-header.navbar {
  background: var(--header);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

body.admin-page .main-header.navbar.is-scrolled {
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 18px 46px -34px rgba(11, 13, 16, 0.55);
}

body.admin-page .main-header.navbar::after {
  opacity: 0.28;
}

body.admin-page .main-sidebar {
  background: color-mix(in srgb, var(--sidebar) 80%, transparent);
  border-right: 1px solid var(--glass-line);
  box-shadow: inset -1px 0 0 var(--glass-hi);
}

body.admin-page .main-sidebar .brand-link {
  background: transparent;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.admin-page .main-header.navbar {
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    backdrop-filter: blur(28px) saturate(190%);
    background: color-mix(in srgb, var(--header) 62%, transparent);
  }

  body.admin-page .main-header.navbar.is-scrolled {
    background: color-mix(in srgb, var(--header) 78%, transparent);
  }

  body.admin-page .main-sidebar {
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
  }
}

/* Panels: one calm sheet, a hair of highlight on the top edge. */
body.admin-page .card {
  background-color: var(--surface);
  background-image: var(--glass-sheen);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

body.admin-page .card:hover {
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-hover);
  transform: none;
}

body.admin-page .card-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-line);
}

body.admin-page .card-header:first-child {
  border-radius: 17px 17px 0 0;
}

body.admin-page .card-footer {
  background: transparent;
  border-top: 1px solid var(--glass-line);
}

body.admin-page .card-footer:last-child {
  border-radius: 0 0 17px 17px;
}

/* The old colour band on form cards is replaced by the hairline frame. */
body.admin-page .card-primary.card-outline,
body.admin-page .card-warning.card-outline,
body.admin-page .card-success.card-outline,
body.admin-page .card-danger.card-outline,
body.admin-page .card-info.card-outline {
  border-top: 1px solid var(--glass-line);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.admin-page .card {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    background-color: var(--glass-surface);
    background-image: var(--glass-sheen);
  }
}

/* Form controls share the same hairline and focus ring. */
body.admin-page .form-control,
body.admin-page .custom-select {
  background-color: color-mix(in srgb, var(--field) 72%, transparent);
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--glass-hi);
  color: var(--ink);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

body.admin-page .form-control:focus,
body.admin-page .custom-select:focus {
  background-color: var(--field);
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px var(--ring);
}

body.admin-page .input-group-text,
body.admin-page .custom-file-label {
  background: color-mix(in srgb, var(--field) 72%, transparent);
  border-color: var(--glass-line);
  color: var(--muted);
}

body.admin-page .dropdown-menu {
  background: var(--glass-raised);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: var(--glass-shadow-hover);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.admin-page .dropdown-menu {
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
  }
}

/* Tables sit on the glass without extra chrome. */
body.admin-page .table {
  color: var(--text);
  margin-bottom: 0;
}

body.admin-page .table thead th {
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border-bottom: 1px solid var(--glass-line);
  border-top: 0;
}

body.admin-page .table td {
  border-top: 1px solid color-mix(in srgb, var(--line) 52%, transparent);
}

body.admin-page .table-hover tbody tr {
  transition: background-color 0.18s var(--ease);
}

body.admin-page .table-hover tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  color: var(--ink);
}

/* Sidebar: quiet capsules, no hard accent bar. */
body.admin-page .nav-sidebar .nav-link {
  border-radius: 11px;
}

body.admin-page .nav-sidebar .nav-link.active {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.18);
  color: var(--brand-strong);
}

body.admin-page .nav-sidebar .nav-link.active::before {
  display: none;
}

/* Page titles match the user centre. */
body.admin-page .content-header {
  padding: 1.5rem 0 0.55rem;
}

body.admin-page .content-header h1 {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.03em;
}

body.admin-page .content-header h1::after {
  display: none;
}

/* Dashboard figures: tinted glass instead of saturated blocks. */
body.admin-page .small-box {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  color: var(--text) !important;
  overflow: hidden;
}

body.admin-page .small-box .inner h3,
body.admin-page .small-box .inner p {
  color: var(--ink) !important;
}

body.admin-page .small-box .icon {
  color: rgba(var(--brand-rgb), 0.55);
  opacity: 0.3;
}

body.admin-page .small-box .small-box-footer {
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  border-top: 1px solid var(--glass-line);
  color: var(--muted);
}

body.admin-page .small-box .small-box-footer:hover {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--ink);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.admin-page .small-box {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

/* Respect the system preference for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  body.admin-page .main-header.navbar,
  body.admin-page .main-sidebar,
  body.admin-page .card,
  body.admin-page .dropdown-menu,
  body.admin-page .small-box {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface) !important;
  }
}

/* --------------------------------------------------------------------------
   30. Skin library — phone layout
   The card component ships a fixed 245px width, so a phone could only ever
   fit one vitrine per row. Below the md boundary the cards are re-sized to a
   two-up grid and the header collapses onto one compact line. Desktop keeps
   its original composition: every rule here lives inside the media query.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* ---- Header: one compact row, no collision --------------------------- */
  .skinlib-page .main-header.navbar > .container {
    gap: 0.35rem;
    padding: 0 0.8rem;
  }

  .skinlib-page .main-header .navbar-header {
    flex: 0 0 auto;
    min-width: 0;
  }

  .skinlib-page .main-header .navbar-brand {
    gap: 0.45rem;
    margin-right: 0.1rem;
  }

  .skinlib-page .main-header .navbar-brand .brand-logo {
    height: 26px;
  }

  .skinlib-page .main-header .navbar-brand .brand-wordmark {
    height: 17px;
    max-width: 104px;
  }

  /* The centre links become a swipeable strip instead of colliding. */
  .skinlib-page .main-header .navbar-collapse {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .skinlib-page .main-header .navbar-collapse::-webkit-scrollbar {
    display: none;
  }

  .skinlib-page .main-header .navbar-collapse .navbar-nav {
    flex-wrap: nowrap;
  }

  .skinlib-page .main-header .navbar-collapse .nav-item {
    flex: 0 0 auto;
  }

  .skinlib-page .main-header .navbar-nav .nav-link {
    font-size: 0.78rem;
    height: 32px;
    padding: 0 0.45rem;
  }

  .skinlib-page .main-header .navbar-custom-menu {
    flex: 0 0 auto;
  }

  .skinlib-page .main-header .navbar-custom-menu .nav-link {
    height: 34px;
    padding: 0 0.38rem;
  }

  .skinlib-page .main-header .navbar-custom-menu .d-sm-inline {
    display: none !important;
  }

  .skinlib-page .main-header .user-menu .bs-avatar {
    margin-right: 0 !important;
  }

  .skinlib-page .main-header .user-menu [data-mark="nickname"] {
    display: none !important;
  }

  /* ---- Gallery: two vitrines per row ----------------------------------- */
  .skinlib-page .content .card-body > .d-flex.flex-wrap > a.d-block {
    flex: 0 0 calc(50% - 0.6rem);
    width: calc(50% - 0.6rem);
    min-width: 0;
    margin: 0 0.3rem 0.8rem !important;
  }

  .skinlib-page .content .card-body > .d-flex.flex-wrap > a.d-block > .card {
    height: 100%;
    margin-bottom: 0;
    min-width: 0;
    width: 100%;
  }

  .skinlib-page .content a.d-block > .card > .card-footer {
    padding: 0.55rem 0.55rem 0.65rem;
  }

  .skinlib-page .content a.d-block > .card .card-footer > .d-flex.align-items-center {
    gap: 0.3rem;
    margin-bottom: 0.45rem !important;
  }

  .skinlib-page .content a.d-block > .card .card-footer .align-items-center > .text-truncate {
    font-size: 0.82rem;
    min-width: 0;
  }

  .skinlib-page .content a.d-block > .card .card-footer .align-items-center > .fas {
    flex: 0 0 auto;
  }

  .skinlib-page .content a.d-block > .card .card-footer .badge {
    font-size: 0.58rem;
    padding: 0.2rem 0.42rem;
  }

  /* Keep the type + uploader chips inside a half-width card. */
  .skinlib-page .content a.d-block > .card .card-footer .d-flex.justify-content-between {
    gap: 0.3rem;
  }

  .skinlib-page .content a.d-block > .card .card-footer .justify-content-between > .d-flex:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .skinlib-page .content a.d-block > .card .card-footer .justify-content-between > .d-flex:first-child > .badge.bg-teal {
    flex: 0 0 auto;
  }

  .skinlib-page .content a.d-block > .card .card-footer .badge.text-truncate {
    max-width: 100%;
    min-width: 0;
  }

  .skinlib-page .content a.d-block > .card .card-footer .justify-content-between > a {
    flex: 0 0 auto;
  }

  .skinlib-page .content a.d-block > .card .card-footer .text-gray,
  .skinlib-page .content a.d-block > .card .card-footer .text-red {
    font-size: 0.72rem;
  }
}

@media (max-width: 575.98px) {
  .skinlib-page .main-header .navbar-brand .brand-wordmark {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   31. Glass pass — controls that share the pane, and small-screen tuning
   The panes now let the ambient wash through, so the fields that sit on them
   join the same material instead of punching opaque holes in it. Phones get a
   shorter blur and a slightly denser tint: the frost still reads, without
   asking a mobile GPU to rebuild a 22px backdrop on every scroll.
   -------------------------------------------------------------------------- */

:is(body.user-center, .skinlib-page, .auth-page) .form-control,
:is(body.user-center, .skinlib-page, .auth-page) .custom-select,
:is(body.user-center, .skinlib-page, .auth-page) .custom-file-label {
  background-color: color-mix(in srgb, var(--field) 74%, transparent);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

:is(body.user-center, .skinlib-page, .auth-page) .form-control:focus,
:is(body.user-center, .skinlib-page, .auth-page) .custom-select:focus {
  background-color: var(--field);
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px var(--ring);
}

:is(body.user-center, .skinlib-page, .auth-page) .input-group-text {
  background-color: color-mix(in srgb, var(--field) 74%, transparent);
  border-color: var(--glass-line);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(body.user-center, .skinlib-page, .auth-page) .card {
    background-color: color-mix(in srgb, var(--surface) 84%, transparent);
  }
}

@media (max-width: 767.98px) {
  :is(body.user-center, .skinlib-page, .auth-page) .card {
    background-color: color-mix(in srgb, var(--surface) 66%, transparent);
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(body.user-center, .skinlib-page, .auth-page) .card {
      -webkit-backdrop-filter: blur(14px) saturate(150%);
      backdrop-filter: blur(14px) saturate(150%);
    }
  }
}

/* Declared last so a phone in reduced-transparency mode keeps the opaque pane
   even though the media query above comes later than the main preference. */
@media (prefers-reduced-transparency: reduce) {
  :is(body.user-center, .skinlib-page, .auth-page) .card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--surface);
    background-image: none;
  }
}

/* --------------------------------------------------------------------------
   32. Apple glass finish — tinted card headers, dashboard tiles, controls
   AdminLTE still paints a saturated band on every coloured card header
   (#007bff on .card-primary) and ships the dashboard figures as flat blocks
   set in the Minecraft display face. Those are the last opaque surfaces in the
   interface. Both join the frosted material here: the semantic hue survives as
   a 8–12% wash under the same sheet as the rest of the page, text returns to
   ink, and the numerals switch to the product sans with tabular figures.
   Buttons lose the opaque lozenge and become translucent controls with a top
   light, a hairline border and a restrained press state. Everything below is
   presentation only — no template, plugin or panel file is touched.
   -------------------------------------------------------------------------- */

:root {
  --tint-primary: var(--brand-rgb);
  --tint-success: 12, 140, 96;
  --tint-info: 47, 109, 246;
  --tint-warning: 190, 126, 0;
  --tint-danger: 192, 54, 44;

  --control-fill: color-mix(in srgb, var(--surface) 66%, transparent);
  --control-fill-hover: color-mix(in srgb, var(--surface) 88%, transparent);
  --control-sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0) 58%
  );

  --btn-brand-fill: color-mix(in srgb, var(--brand) 86%, transparent);
  --btn-brand-fill-hover: color-mix(in srgb, var(--brand) 94%, transparent);
  --btn-brand-fill-active: color-mix(in srgb, var(--brand) 88%, transparent);

  /* Deliberately deep bases: at 90% over white they still clear 5.8:1 with
     white text, which the raw AdminLTE colours do not. */
  --btn-deep-success: #0b6244;
  --btn-deep-danger: #a3281f;
  --btn-deep-info: #14538c;
}

/* Accents that carry a white label need a deeper sheet than the amber
   default (86% amber over white already reads 9.9:1 with dark ink). These
   blends are opaque, so they also stay legible over any page: ice 5.3:1,
   jade 5.1:1, ember 5.9:1, graphite 11.5:1 against white. */
html[data-accent="ice"],
html[data-accent="jade"],
html[data-accent="ember"],
html[data-accent="graphite"] {
  --btn-brand-fill: color-mix(in srgb, var(--brand) 90%, #0b0d10);
  --btn-brand-fill-hover: color-mix(in srgb, var(--brand) 96%, #0b0d10);
  --btn-brand-fill-active: color-mix(in srgb, var(--brand) 92%, #0b0d10);
}

body.dark-mode,
html[data-mode="dark"] {
  --tint-success: 52, 211, 153;
  --tint-info: 96, 165, 250;
  --tint-warning: 250, 190, 60;
  --tint-danger: 248, 113, 113;

  --control-fill: color-mix(in srgb, var(--surface) 60%, transparent);
  --control-fill-hover: color-mix(in srgb, var(--surface) 82%, transparent);
  --control-sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 58%
  );
}

/* ---- Coloured card headers: a tinted pane, never a colour band ---------- */
/* !important is required only on the fill and the text: AdminLTE declares the
   same rule at (0,3,0) and its .dark-mode variant at (0,4,0), so specificity
   alone cannot settle it after both stylesheets have loaded. */
body :is(.card-primary, .card-success, .card-info, .card-warning, .card-danger):not(.card-outline) > .card-header {
  --tint-rgb: var(--tint-primary);
  --header-fill: color-mix(in srgb, rgb(var(--tint-rgb)) 9%, var(--glass-raised));
  background-color: var(--header-fill) !important;
  background-image: var(--glass-sheen) !important;
  background-repeat: no-repeat;
  border-bottom: 1px solid color-mix(in srgb, rgb(var(--tint-rgb)) 22%, var(--glass-line));
  box-shadow: inset 0 1px 0 var(--glass-hi);
  color: var(--ink) !important;
}

body .card-success:not(.card-outline) > .card-header {
  --tint-rgb: var(--tint-success);
}

body .card-info:not(.card-outline) > .card-header {
  --tint-rgb: var(--tint-info);
}

body .card-warning:not(.card-outline) > .card-header {
  --tint-rgb: var(--tint-warning);
}

body .card-danger:not(.card-outline) > .card-header {
  --tint-rgb: var(--tint-danger);
}

body :is(.card-primary, .card-success, .card-info, .card-warning, .card-danger):not(.card-outline) > .card-header :is(.card-title, .card-tools, a, .btn-tool) {
  color: var(--ink) !important;
}

body :is(.card-primary, .card-success, .card-info, .card-warning, .card-danger):not(.card-outline) > .card-header .card-title {
  font-size: 0.97rem;
  font-weight: 620;
  letter-spacing: -0.012em;
}

/* ---- Dashboard figures: tinted tiles with a glass icon chip ------------- */
body.admin-page .small-box {
  --tile-rgb: var(--brand-rgb);
  --tile-fill: color-mix(in srgb, rgb(var(--tile-rgb)) 8%, var(--glass-surface));
  background-color: var(--tile-fill) !important;
  background-image:
    radial-gradient(130% 130% at 100% 0%, rgba(var(--tile-rgb), 0.2), transparent 62%),
    var(--glass-sheen) !important;
  background-repeat: no-repeat;
  border: 1px solid color-mix(in srgb, rgb(var(--tile-rgb)) 16%, var(--glass-line));
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  color: var(--ink) !important;
  display: flex;
  flex-direction: column;
  min-height: 152px;
  overflow: hidden;
  text-align: left;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out),
    border-color 0.28s var(--ease-out);
}

body.admin-page .small-box:hover {
  border-color: color-mix(in srgb, rgb(var(--tile-rgb)) 30%, var(--glass-line));
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-hover);
  transform: translateY(-2px);
}

/* Hues are a touch deeper than Bootstrap's so the 21px glyph inside the chip
   keeps a 3:1 silhouette against the chip fill. */
body.admin-page .small-box.bg-info {
  --tile-rgb: 37, 99, 210;
}

body.admin-page .small-box.bg-green {
  --tile-rgb: 10, 118, 78;
}

body.admin-page .small-box.bg-purple {
  --tile-rgb: 105, 74, 196;
}

body.admin-page .small-box.bg-yellow {
  --tile-rgb: 150, 98, 0;
}

body.dark-mode.admin-page .small-box.bg-info,
html[data-mode="dark"] body.admin-page .small-box.bg-info {
  --tile-rgb: 96, 165, 250;
}

body.dark-mode.admin-page .small-box.bg-green,
html[data-mode="dark"] body.admin-page .small-box.bg-green {
  --tile-rgb: 52, 211, 153;
}

body.dark-mode.admin-page .small-box.bg-purple,
html[data-mode="dark"] body.admin-page .small-box.bg-purple {
  --tile-rgb: 167, 139, 250;
}

body.dark-mode.admin-page .small-box.bg-yellow,
html[data-mode="dark"] body.admin-page .small-box.bg-yellow {
  --tile-rgb: 251, 191, 36;
}

body.admin-page .small-box > .inner {
  flex: 1 1 auto;
  padding: 1.3rem 5.6rem 1rem 1.35rem;
}

body.admin-page .small-box .inner h3,
body.admin-page .small-box h3.stats {
  color: var(--ink) !important;
  font-family: var(--font);
  font-size: clamp(2.05rem, 1.5rem + 1.25vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0 0 0.35rem;
}

body.admin-page .small-box .inner p {
  color: var(--muted) !important;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin: 0;
}

body.admin-page .small-box .icon {
  align-items: center;
  background: linear-gradient(
    155deg,
    rgba(var(--tile-rgb), 0.26) 0%,
    rgba(var(--tile-rgb), 0.08) 100%
  );
  border: 1px solid rgba(var(--tile-rgb), 0.22);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 10px 20px -14px rgba(var(--tile-rgb), 0.75);
  color: rgb(var(--tile-rgb));
  display: flex;
  height: 54px;
  justify-content: center;
  opacity: 1;
  position: absolute;
  right: 20px;
  top: 20px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  width: 54px;
  z-index: 2;
}

body.admin-page .small-box .icon > i {
  font-size: 21px;
  line-height: 1;
  position: static;
  top: auto;
  transition: none;
}

body.admin-page .small-box:hover .icon {
  box-shadow: inset 0 1px 0 var(--glass-hi),
    0 14px 26px -14px rgba(var(--tile-rgb), 0.8);
  transform: translateY(-1px) scale(1.04);
}

body.admin-page .small-box:hover .icon > i {
  transform: none;
}

body.admin-page .small-box > .small-box-footer {
  align-items: center;
  background-color: color-mix(in srgb, var(--surface) 30%, transparent);
  border-top: 1px solid var(--glass-line);
  /* The hue utility carries `color: #fff !important` on `.bg-info > a`;
     the link has to re-assert ink or it would disappear on the pale tile. */
  color: var(--muted) !important;
  display: flex;
  font-size: 0.76rem;
  font-weight: 600;
  gap: 0.35rem;
  letter-spacing: 0.01em;
  margin-top: auto;
  padding: 0.62rem 1.35rem;
  text-align: left;
  z-index: 1;
}

body.admin-page .small-box > .small-box-footer i {
  font-size: 0.72rem;
  opacity: 0.8;
  transition: transform 0.2s var(--ease-out);
}

body.admin-page .small-box > .small-box-footer:hover,
body.admin-page .small-box > .small-box-footer:focus-visible {
  background-color: color-mix(in srgb, rgb(var(--tile-rgb)) 12%, transparent);
  color: var(--ink) !important;
}

body.admin-page .small-box > .small-box-footer:hover i {
  transform: translateX(2px);
}

/* ---- Controls: one frosted material, variants only change the tint ------ */
.btn {
  background-color: var(--control-fill);
  background-image: var(--control-sheen);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(11, 13, 16, 0.05);
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn:hover,
.btn:focus {
  background-color: var(--control-fill-hover);
  border-color: var(--line-2);
  color: var(--ink);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px) scale(0.995);
}

.btn:focus-visible {
  box-shadow: 0 0 0 4px var(--ring), inset 0 1px 0 var(--glass-hi);
  outline: 0;
}

.btn:disabled,
.btn.disabled {
  box-shadow: inset 0 1px 0 var(--glass-hi);
  opacity: 0.5;
  transform: none;
}

.btn-sm {
  border-radius: 9px;
  font-size: 0.78rem;
  height: 30px;
  padding: 0 0.7rem;
}

.btn-lg {
  border-radius: 14px;
  font-size: 0.95rem;
  height: 46px;
  padding: 0 1.25rem;
}

.btn-default,
.btn-light,
.btn-secondary {
  background-color: var(--control-fill);
  background-image: var(--control-sheen);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(11, 13, 16, 0.05);
  color: var(--text);
}

.btn-default:hover,
.btn-default:focus,
.btn-light:hover,
.btn-light:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--control-fill-hover);
  border-color: var(--line-2);
  color: var(--ink);
}

/* 9.86:1 for the dark label on the 86% amber sheet in light mode, 6.8:1 in
   dark mode — both measured against the rendered fill, not the token. */
.btn-primary,
.btn-warning {
  background-color: var(--btn-brand-fill);
  background-image: var(--control-sheen);
  border-color: color-mix(in srgb, var(--brand) 70%, #000000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 18px -14px rgba(var(--brand-rgb), 0.85);
  color: var(--on-brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-warning:hover,
.btn-warning:focus {
  background-color: var(--btn-brand-fill-hover);
  border-color: color-mix(in srgb, var(--brand) 78%, #000000);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 12px 24px -14px rgba(var(--brand-rgb), 0.9);
  color: var(--on-brand);
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-warning:active {
  background-color: var(--btn-brand-fill-active);
  box-shadow: inset 0 2px 5px rgba(120, 78, 0, 0.25);
  color: var(--on-brand);
  transform: translateY(0) scale(0.99);
}

.btn-primary:focus-visible,
.btn-warning:focus-visible {
  box-shadow: 0 0 0 4px var(--ring), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-success,
.btn-danger,
.btn-info {
  background-image: var(--control-sheen);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(11, 13, 16, 0.08);
  color: #fff;
}

.btn-success {
  background-color: color-mix(in srgb, var(--btn-deep-success) 90%, transparent);
  border-color: color-mix(in srgb, var(--btn-deep-success) 78%, #052c1e);
}

.btn-danger {
  background-color: color-mix(in srgb, var(--btn-deep-danger) 90%, transparent);
  border-color: color-mix(in srgb, var(--btn-deep-danger) 78%, #4a0f0b);
}

.btn-info {
  background-color: color-mix(in srgb, var(--btn-deep-info) 90%, transparent);
  border-color: color-mix(in srgb, var(--btn-deep-info) 78%, #08243d);
}

.btn-success:hover,
.btn-success:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-info:hover,
.btn-info:focus {
  background-image: var(--control-sheen);
  color: #fff;
  transform: translateY(-1px);
}

.btn-success:hover,
.btn-success:focus {
  background-color: color-mix(in srgb, var(--btn-deep-success) 96%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 20px -14px rgba(11, 98, 68, 0.9);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: color-mix(in srgb, var(--btn-deep-danger) 96%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 20px -14px rgba(163, 40, 31, 0.9);
}

.btn-info:hover,
.btn-info:focus {
  background-color: color-mix(in srgb, var(--btn-deep-info) 96%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 20px -14px rgba(20, 83, 140, 0.9);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-danger {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--text-soft);
}

.btn-outline-primary {
  border-color: color-mix(in srgb, var(--brand) 52%, var(--glass-line));
  color: var(--brand-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand);
  color: var(--brand-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--hover);
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-outline-success {
  border-color: color-mix(in srgb, var(--success) 46%, var(--glass-line));
  color: var(--success);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background-color: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: var(--success);
  color: var(--success);
}

.btn-outline-danger {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--glass-line));
  color: var(--danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: var(--danger);
  color: var(--danger);
}

/* Text-only controls keep no material at all. */
.btn-link {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--link);
  font-weight: 500;
  height: auto;
  padding: 0;
}

.btn-link:hover,
.btn-link:focus {
  background-color: transparent;
  border-color: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-flat {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}

.btn-tool {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* The swatch keeps its ring even though the base control supplies a border. */
.btn-color {
  background-image: none;
  box-shadow: inset 0 0 0 2px var(--surface);
}

/* AdminLTE utility classes would otherwise paint these buttons solid:
   .bg-primary (#007bff), .bg-light (#f8f9fa) and .bg-secondary all carry
   !important from the vendor sheet. */
body .btn.bg-primary {
  background-color: var(--btn-brand-fill) !important;
  background-image: var(--control-sheen);
  border-color: color-mix(in srgb, var(--brand) 70%, #000000);
  color: var(--on-brand) !important;
}

body .btn.bg-primary:hover,
body .btn.bg-primary:focus {
  background-color: var(--btn-brand-fill-hover) !important;
  color: var(--on-brand) !important;
}

body .btn.bg-secondary,
body .btn.bg-light {
  background-color: var(--control-fill) !important;
  background-image: var(--control-sheen);
  border-color: var(--glass-line);
  color: var(--text) !important;
}

body .btn.bg-secondary:hover,
body .btn.bg-secondary:focus,
body .btn.bg-light:hover,
body .btn.bg-light:focus {
  background-color: var(--control-fill-hover) !important;
  color: var(--ink) !important;
}

/* ---- Remaining opaque patches inside the glass -------------------------- */
.card-footer.bg-white {
  background-color: transparent !important;
}

/* The delete-account dialog is the one modal painted with a solid red
   utility. It becomes a danger-tinted pane; the .btn-outline-light children
   are re-pointed at the neutral control material by the base rule above, so
   the footer stays legible. */
.modal-content.bg-danger {
  background-color: color-mix(in srgb, rgb(var(--tint-danger)) 12%, var(--glass-raised)) !important;
  border-color: color-mix(in srgb, rgb(var(--tint-danger)) 26%, var(--glass-line));
  color: var(--ink);
}

.modal-content.bg-danger .modal-title,
.modal-content.bg-danger .modal-body,
.modal-content.bg-danger .modal-footer {
  color: var(--ink);
}

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 767.98px) {
  body.admin-page .small-box {
    border-radius: 18px;
    min-height: 132px;
  }

  body.admin-page .small-box > .inner {
    padding: 1.05rem 4.6rem 0.85rem 1.1rem;
  }

  body.admin-page .small-box .icon {
    border-radius: 14px;
    height: 44px;
    right: 14px;
    top: 14px;
    width: 44px;
  }

  body.admin-page .small-box .icon > i {
    font-size: 18px;
  }

  body.admin-page .small-box .inner h3,
  body.admin-page .small-box h3.stats {
    font-size: clamp(1.75rem, 1.2rem + 3vw, 2.1rem);
  }

  body.admin-page .small-box > .small-box-footer {
    padding: 0.55rem 1.1rem;
  }
}

/* ---- Brackets for engines that cannot frost or cannot spare the motion -- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body :is(.card-primary, .card-success, .card-info, .card-warning, .card-danger):not(.card-outline) > .card-header {
    --header-fill: color-mix(in srgb, rgb(var(--tint-rgb)) 9%, var(--surface));
  }

  body.admin-page .small-box {
    --tile-fill: color-mix(in srgb, rgb(var(--tile-rgb)) 9%, var(--surface));
  }
}

@media (prefers-reduced-transparency: reduce) {
  body :is(.card-primary, .card-success, .card-info, .card-warning, .card-danger):not(.card-outline) > .card-header {
    --header-fill: color-mix(in srgb, rgb(var(--tint-rgb)) 8%, var(--surface));
    background-image: none !important;
  }

  body.admin-page .small-box {
    --tile-fill: color-mix(in srgb, rgb(var(--tile-rgb)) 9%, var(--surface));
    background-image: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .btn {
    --control-fill: var(--surface);
    --control-sheen: none;
  }

  .btn-default,
  .btn-light,
  .btn-secondary {
    background-color: var(--surface);
    background-image: none;
  }

  .btn-primary,
  .btn-warning {
    /* Opaque in both directions: 7.3:1 for the dark amber label, 5.1:1 or
       better for the white labels of the cooler accents. */
    background-color: color-mix(in srgb, var(--brand) 90%, #0b0d10);
    background-image: none;
  }

  .btn-success {
    background-color: color-mix(in srgb, var(--btn-deep-success) 94%, var(--surface));
    background-image: none;
  }

  .btn-danger {
    background-color: color-mix(in srgb, var(--btn-deep-danger) 94%, var(--surface));
    background-image: none;
  }

  .btn-info {
    background-color: color-mix(in srgb, var(--btn-deep-info) 94%, var(--surface));
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  body.admin-page .small-box,
  body.admin-page .small-box .icon,
  body.admin-page .small-box > .small-box-footer i {
    transition: none;
  }

  .btn:hover,
  .btn:active,
  body.admin-page .small-box:hover,
  body.admin-page .small-box:hover .icon,
  body.admin-page .small-box > .small-box-footer:hover i {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   33. Closet vitrines — a contained liquid-glass card
   The closet grid is drawn by the client bundle: every texture is a `.card`
   whose `.card-body` still carries a solid `#eff1f0` fill from a runtime
   styled component. That fill is a rectangle inside a rounded card, so its
   square top edge escaped the card's radius and read as a pale corner poking
   out of the glass; in dark mode the same fill turned the whole stage chalk
   white. The fill is replaced with the page's glass tint, its radius is
   aligned to the card, and the card gains a specular top light, a refractive
   hairline rim and a contact shadow under the render. Nothing is clipped with
   `overflow: hidden` — the cog menu must still open — so each layer is
   rounded on its own instead.
   -------------------------------------------------------------------------- */

body.user-center #closet-list .d-flex.flex-wrap > .card {
  --closet-radius: 20px;
  --closet-inner-radius: calc(var(--closet-radius) - 1px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: var(--glass-raised);
  background-image:
    radial-gradient(
      120% 96% at 50% -22%,
      rgba(255, 255, 255, 0.62),
      rgba(255, 255, 255, 0) 64%
    ),
    var(--glass-sheen);
  border: 1px solid color-mix(in srgb, var(--glass-line) 88%, transparent);
  border-radius: var(--closet-radius);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    var(--glass-shadow);
  position: relative;
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}

/* A 1px refractive rim: bright where the light enters at the top left, picking
   up the accent at the opposite corner. Masked to the border only. */
body.user-center #closet-list .d-flex.flex-wrap > .card::before {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.18) 16%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 62%,
    rgba(var(--brand-rgb), 0.3) 100%
  );
  border-radius: inherit;
  content: '';
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* The stage itself: no opaque slab any more, just a cool pool of light behind
   the render and a warm accent reflection at the base. The radius matches the
   card's inner curve so no corner can overshoot it. */
body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body {
  background-color: transparent;
  background-image:
    radial-gradient(
      118% 92% at 50% 0%,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      80% 60% at 50% 104%,
      rgba(var(--brand-rgb), 0.1),
      rgba(var(--brand-rgb), 0) 72%
    );
  border-radius: var(--closet-inner-radius) var(--closet-inner-radius) 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -16px 26px -22px rgba(15, 22, 34, 0.3);
}

body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body picture {
  display: block;
}

body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body img.card-img-top {
  border-radius: 14px;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(15, 22, 34, 0.16));
  height: auto;
  transform-origin: 50% 62%;
  transition:
    transform 0.55s var(--ease-out),
    filter 0.55s var(--ease-out);
  width: 100%;
}

body.user-center #closet-list .d-flex.flex-wrap > .card:hover {
  border-color: rgba(var(--brand-rgb), 0.34);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(var(--brand-rgb), 0.1),
    var(--glass-shadow-hover);
  transform: translateY(-4px);
  /* The lift creates a stacking context; raise the whole card so its cog menu
     still paints over the next row while it is open. */
  z-index: 5;
}

body.user-center #closet-list .d-flex.flex-wrap > .card:hover > .card-body img.card-img-top {
  filter: drop-shadow(0 14px 22px rgba(15, 22, 34, 0.2));
  transform: translateY(-2px) scale(1.025);
}

/* Bootstrap's `.shadow` marks the selected texture and wins with !important,
   so the selection ring has to answer in kind. */
body.user-center #closet-list .d-flex.flex-wrap > .card.shadow {
  border-color: rgba(var(--brand-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 0 2px rgba(var(--brand-rgb), 0.26),
    var(--glass-shadow-hover) !important;
}

body.user-center #closet-list .d-flex.flex-wrap > .card > .card-footer {
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0) 58%
  );
  border-radius: 0 0 var(--closet-inner-radius) var(--closet-inner-radius);
  border-top: 1px solid color-mix(in srgb, var(--glass-line) 76%, transparent);
}

body.user-center #closet-list .d-flex.flex-wrap > .card .card-footer .text-truncate {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* The cog was painted through a `var(--gray)` that never resolves, leaving
   black on hover even in dark mode. Give it the muted ink of the sheet. */
body.user-center #closet-list .d-flex.flex-wrap > .card .card-footer .drop-down > span {
  color: var(--muted);
  display: inline-block;
  transition:
    color 0.2s var(--ease-out),
    transform 0.2s var(--ease-out);
}

body.user-center #closet-list .d-flex.flex-wrap > .card .card-footer .drop-down > span:hover {
  color: var(--ink);
  transform: scale(1.08);
}

/* ---- Night palette: the same sheet, lit from the rim ------------------- */
body.dark-mode.user-center #closet-list .d-flex.flex-wrap > .card,
html[data-mode="dark"] body.user-center #closet-list .d-flex.flex-wrap > .card {
  background-image:
    radial-gradient(
      120% 96% at 50% -22%,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0) 64%
    ),
    var(--glass-sheen);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    var(--glass-shadow);
}

body.dark-mode.user-center #closet-list .d-flex.flex-wrap > .card::before,
html[data-mode="dark"] body.user-center #closet-list .d-flex.flex-wrap > .card::before {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.08) 16%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 62%,
    rgba(var(--brand-rgb), 0.38) 100%
  );
}

body.dark-mode.user-center #closet-list .d-flex.flex-wrap > .card > .card-body,
html[data-mode="dark"] body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body {
  background-image:
    radial-gradient(
      118% 92% at 50% 0%,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      80% 60% at 50% 104%,
      rgba(var(--brand-rgb), 0.14),
      rgba(var(--brand-rgb), 0) 72%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -16px 26px -22px rgba(0, 0, 0, 0.6);
}

body.dark-mode.user-center #closet-list .d-flex.flex-wrap > .card > .card-body img.card-img-top,
html[data-mode="dark"] body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body img.card-img-top {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}

body.dark-mode.user-center #closet-list .d-flex.flex-wrap > .card:hover > .card-body img.card-img-top,
html[data-mode="dark"] body.user-center #closet-list .d-flex.flex-wrap > .card:hover > .card-body img.card-img-top {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.62));
}

body.dark-mode.user-center #closet-list .d-flex.flex-wrap > .card > .card-footer,
html[data-mode="dark"] body.user-center #closet-list .d-flex.flex-wrap > .card > .card-footer {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0) 58%
  );
}

/* ---- Engines without frost, users without transparency or motion -------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.user-center #closet-list .d-flex.flex-wrap > .card {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    background-image: var(--glass-sheen);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.user-center #closet-list .d-flex.flex-wrap > .card {
    background-color: var(--surface);
    background-image: none;
  }

  body.user-center #closet-list .d-flex.flex-wrap > .card::before {
    display: none;
  }

  body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body,
  body.user-center #closet-list .d-flex.flex-wrap > .card > .card-footer {
    background-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.user-center #closet-list .d-flex.flex-wrap > .card,
  body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body img.card-img-top,
  body.user-center #closet-list .d-flex.flex-wrap > .card .card-footer .drop-down > span {
    transition: none;
  }

  body.user-center #closet-list .d-flex.flex-wrap > .card:hover,
  body.user-center #closet-list .d-flex.flex-wrap > .card:hover > .card-body img.card-img-top,
  body.user-center #closet-list .d-flex.flex-wrap > .card .card-footer .drop-down > span:hover {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  body.user-center #closet-list .d-flex.flex-wrap > .card {
    --closet-radius: 18px;
  }

  body.user-center #closet-list .d-flex.flex-wrap > .card .card-footer .text-truncate {
    font-size: 0.84rem;
  }
}

/* --------------------------------------------------------------------------
   34. Skin library — the same vitrine as the closet
   The gallery card is the closet card's sibling: a runtime styled component
   still fills `.card-body` with `#eff1f0` and paints a porcelain stage inside
   it, so the thumbnail sat on a separate white slab instead of on the glass.
   The slab and its frame are removed here, the card receives the same
   specular light, refractive rim and contact shadow as the closet, and the
   two pages finally share one material. Sizing, badges and the like button
   keep their existing rules.
   -------------------------------------------------------------------------- */

.skinlib-page .content a.d-block > .card {
  --skinlib-radius: 20px;
  --skinlib-inner-radius: calc(var(--skinlib-radius) - 1px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: var(--glass-raised);
  background-image:
    radial-gradient(
      120% 96% at 50% -22%,
      rgba(255, 255, 255, 0.62),
      rgba(255, 255, 255, 0) 64%
    ),
    var(--glass-sheen);
  border: 1px solid color-mix(in srgb, var(--glass-line) 88%, transparent);
  border-radius: var(--skinlib-radius);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    var(--glass-shadow);
  position: relative;
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}

.skinlib-page .content a.d-block > .card::before {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.18) 16%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 62%,
    rgba(var(--brand-rgb), 0.3) 100%
  );
  border-radius: inherit;
  content: '';
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

/* The opaque `#eff1f0` slab is replaced by the glass pool. A little more
   padding than before keeps the render inside the rounded sheet the way the
   closet does. */
.skinlib-page .content a.d-block > .card > .card-body {
  background-color: transparent;
  background-image:
    radial-gradient(
      118% 92% at 50% 0%,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      80% 60% at 50% 104%,
      rgba(var(--brand-rgb), 0.1),
      rgba(var(--brand-rgb), 0) 72%
    );
  border-radius: var(--skinlib-inner-radius) var(--skinlib-inner-radius) 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -16px 26px -22px rgba(15, 22, 34, 0.3);
  padding: 0.7rem 0.7rem 0;
}

/* The thumbnail no longer gets its own white stage or frame. The stage keeps
   the 15px radius only as a focus target; the render itself sits on the glass.
   `overflow` is released so the contact shadow can spread naturally. */
.skinlib-page .content a.d-block > .card > .card-body > a {
  background: transparent;
  border: 0;
  border-radius: 15px;
  display: block;
  overflow: visible;
  position: relative;
}

.skinlib-page .content a.d-block > .card > .card-body img.card-img-top {
  border-radius: 14px;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(15, 22, 34, 0.16));
  height: auto;
  transform-origin: 50% 62%;
  transition:
    transform 0.55s var(--ease-out),
    filter 0.55s var(--ease-out);
  width: 100%;
}

.skinlib-page .content a.d-block > .card:hover {
  border-color: rgba(var(--brand-rgb), 0.34);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(var(--brand-rgb), 0.1),
    var(--glass-shadow-hover);
  transform: translateY(-4px);
}

.skinlib-page .content a.d-block > .card:hover img.card-img-top {
  filter: drop-shadow(0 14px 22px rgba(15, 22, 34, 0.2));
  transform: translateY(-2px) scale(1.02);
}

.skinlib-page .content a.d-block > .card > .card-footer {
  background-color: transparent;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0) 58%
  );
  border-radius: 0 0 var(--skinlib-inner-radius) var(--skinlib-inner-radius);
  border-top: 1px solid color-mix(in srgb, var(--glass-line) 76%, transparent);
}

/* ---- Night palette ------------------------------------------------------ */
body.dark-mode.skinlib-page .content a.d-block > .card,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card {
  background-image:
    radial-gradient(
      120% 96% at 50% -22%,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0) 64%
    ),
    var(--glass-sheen);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    var(--glass-shadow);
}

body.dark-mode.skinlib-page .content a.d-block > .card::before,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card::before {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.08) 16%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0) 62%,
    rgba(var(--brand-rgb), 0.38) 100%
  );
}

body.dark-mode.skinlib-page .content a.d-block > .card > .card-body,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card > .card-body {
  background-image:
    radial-gradient(
      118% 92% at 50% 0%,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      80% 60% at 50% 104%,
      rgba(var(--brand-rgb), 0.14),
      rgba(var(--brand-rgb), 0) 72%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -16px 26px -22px rgba(0, 0, 0, 0.6);
}

body.dark-mode.skinlib-page .content a.d-block > .card > .card-body img.card-img-top,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card > .card-body img.card-img-top {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}

body.dark-mode.skinlib-page .content a.d-block > .card:hover img.card-img-top,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card:hover img.card-img-top {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.62));
}

body.dark-mode.skinlib-page .content a.d-block > .card > .card-footer,
html[data-mode="dark"] .skinlib-page .content a.d-block > .card > .card-footer {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0) 58%
  );
}

/* ---- Engines without frost, users without transparency or motion -------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .skinlib-page .content a.d-block > .card {
    background-color: color-mix(in srgb, var(--surface) 88%, transparent);
    background-image: var(--glass-sheen);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .skinlib-page .content a.d-block > .card {
    background-color: var(--surface);
    background-image: none;
  }

  .skinlib-page .content a.d-block > .card::before {
    display: none;
  }

  .skinlib-page .content a.d-block > .card > .card-body,
  .skinlib-page .content a.d-block > .card > .card-footer {
    background-image: none;
  }
}

/* Must follow the hover rules above: the earlier reduced-motion block would
   otherwise lose to the new declarations. */
@media (prefers-reduced-motion: reduce) {
  .skinlib-page .content a.d-block > .card,
  .skinlib-page .content a.d-block > .card > .card-body img.card-img-top {
    transition: none;
  }

  .skinlib-page .content a.d-block > .card:hover,
  .skinlib-page .content a.d-block > .card:hover img.card-img-top {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .skinlib-page .content a.d-block > .card {
    --skinlib-radius: 18px;
  }
}

/* --------------------------------------------------------------------------
   35. Dark chrome, the mall mark and the report pane
   The vendored AdminLTE/Bootstrap layer paints the top bar and its menus with
   literal colours, and the points mall paints a white glyph on `bg-primary`.
   All three are re-bound to palette tokens here; the vendored files stay
   untouched. The report table header is a filled band, so it also needs the
   card's inner radius or its square corners eat the rounded top edge.
   -------------------------------------------------------------------------- */

/* `.navbar-light .navbar-nav .nav-link` (0,3,0) outbids the theme's
   `.main-header .nav-link` (0,2,0), leaving rgba(0,0,0,.5) text on the near
   black header. Re-state the palette one level deeper for dark mode only. */
body.dark-mode .main-header.navbar .navbar-nav > .nav-item > .nav-link,
html[data-mode="dark"] .main-header.navbar .navbar-nav > .nav-item > .nav-link {
  color: var(--muted);
}

body.dark-mode .main-header.navbar .navbar-nav > .nav-item > .nav-link:hover,
body.dark-mode .main-header.navbar .navbar-nav > .nav-item > .nav-link:focus,
body.dark-mode .main-header.navbar .navbar-nav > .nav-item.show > .nav-link,
body.dark-mode .main-header.navbar .navbar-nav > .nav-item > .nav-link.active,
html[data-mode="dark"] .main-header.navbar .navbar-nav > .nav-item > .nav-link:hover,
html[data-mode="dark"] .main-header.navbar .navbar-nav > .nav-item > .nav-link:focus,
html[data-mode="dark"] .main-header.navbar .navbar-nav > .nav-item.show > .nav-link,
html[data-mode="dark"] .main-header.navbar .navbar-nav > .nav-item > .nav-link.active {
  color: var(--ink);
}

/* The user, language and notification menus inherit Bootstrap's white sheet
   and its dark ink. In dark mode that is the wrong material twice over, and
   the theme's hover ink turns white-on-white. Rebuild them as glass. */
body.dark-mode .main-header .dropdown-menu,
html[data-mode="dark"] .main-header .dropdown-menu {
  background-color: var(--glass-raised);
  background-image: var(--glass-sheen);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  color: var(--text);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.dark-mode .main-header .dropdown-menu,
  html[data-mode="dark"] .main-header .dropdown-menu {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

body.dark-mode .main-header .dropdown-menu .dropdown-item,
html[data-mode="dark"] .main-header .dropdown-menu .dropdown-item {
  color: var(--text-soft);
}

body.dark-mode .main-header .dropdown-menu .dropdown-item:hover,
body.dark-mode .main-header .dropdown-menu .dropdown-item:focus,
html[data-mode="dark"] .main-header .dropdown-menu .dropdown-item:hover,
html[data-mode="dark"] .main-header .dropdown-menu .dropdown-item:focus {
  background: var(--hover);
  color: var(--ink);
}

body.dark-mode .main-header .dropdown-menu .dropdown-item.active,
body.dark-mode .main-header .dropdown-menu .dropdown-item:active,
html[data-mode="dark"] .main-header .dropdown-menu .dropdown-item.active,
html[data-mode="dark"] .main-header .dropdown-menu .dropdown-item:active {
  background: var(--brand);
  color: var(--on-brand);
}

body.dark-mode .main-header .dropdown-menu .dropdown-divider,
html[data-mode="dark"] .main-header .dropdown-menu .dropdown-divider {
  border-top-color: var(--glass-line);
}

/* Opaque fallback for users who ask the system to drop translucency. */
@media (prefers-reduced-transparency: reduce) {
  body.dark-mode .main-header .dropdown-menu,
  html[data-mode="dark"] .main-header .dropdown-menu {
    background-color: var(--surface-2);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The mall's round shop mark is `bg-primary text-white`; the theme binds
   bg-primary to --ink, which is near white in dark mode, so the glyph went
   white on white. Give the mark its accent back — only this pairing, so
   ordinary bg-primary buttons keep their ink treatment. */
body.dark-mode .rounded-circle.bg-primary.text-white,
html[data-mode="dark"] .rounded-circle.bg-primary.text-white {
  background-color: var(--brand) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 20px -12px rgba(var(--brand-rgb), 0.75);
  color: var(--on-brand) !important;
}

/* Report pane: round the filled header cells to the card's inner radius
   (18px outer radius minus the 1px hairline) and let the band refract the
   card instead of sitting on it as an opaque sticker. */
:is(body.user-center, .skinlib-page) .card > .card-body.p-0 > .table > thead:first-child > tr:first-child > th:first-child {
  border-top-left-radius: 17px;
}

:is(body.user-center, .skinlib-page) .card > .card-body.p-0 > .table > thead:first-child > tr:first-child > th:last-child {
  border-top-right-radius: 17px;
}

:is(body.user-center, .skinlib-page) .card > .card-body.p-0 > .table > thead > tr > th {
  background-color: color-mix(in srgb, var(--surface-2) 38%, transparent);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--glass-hi) 36%, transparent),
    transparent 80%
  );
  border-bottom-color: var(--glass-line);
}

/* The accent belongs to the frame, not to the words: a faint brand hairline
   on the pane that holds a flush table, while the cells stay neutral. */
@supports selector(:has(*)) {
  :is(body.user-center, .skinlib-page) .card:has(> .card-body.p-0 > .table) {
    border-color: color-mix(in srgb, var(--brand) 20%, var(--glass-line));
  }
}

/* Top-right avatar: a rounded square instead of the shared circle. The
   sidebar and content avatars keep their existing shape. */
.main-header .user-menu .bs-avatar {
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   36. Closet on phones — previewer first, two vitrines per row
   The server grid is [col-md-8: verification + closet][col-md-4: previewer],
   so on a phone the previewer used to fall below the whole texture list.
   Flattening the two columns with `display: contents` lets the row reorder
   the three panes without touching the server-side grid or the client bundle:
   verification note → previewer → closet. The texture grid switches from a
   flex row of fixed 235px cards to a two-column grid so both cards use the
   available width instead of leaving half the screen empty.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  body.user-center .content .row:has(> .col-md-8 > #closet-list) {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }

  body.user-center .content .row:has(> .col-md-8 > #closet-list) > .col-md-8,
  body.user-center .content .row:has(> .col-md-8 > #closet-list) > .col-md-4 {
    display: contents;
  }

  body.user-center .content .row:has(> .col-md-8 > #closet-list) #email-verification {
    order: 1;
  }

  body.user-center .content .row:has(> .col-md-8 > #closet-list) #previewer {
    order: 2;
    margin-bottom: 1rem;
  }

  body.user-center .content .row:has(> .col-md-8 > #closet-list) #closet-list {
    order: 3;
  }

  /* Two cards per row; drop the runtime width and the mr-3/mb-3 utilities. */
  body.user-center #closet-list > .card > .card-body > .d-flex.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  body.user-center #closet-list > .card > .card-body > .d-flex.flex-wrap > .card {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
  }

  body.user-center #closet-list .d-flex.flex-wrap > .card > .card-body {
    padding: 0.5rem;
  }

  body.user-center #closet-list .d-flex.flex-wrap > .card > .card-footer .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  body.user-center #closet-list .d-flex.flex-wrap > .card .card-footer .text-truncate {
    font-size: 0.8rem;
  }

  /* The cog menu on the right-hand card must open inside the viewport. */
  body.user-center #closet-list .d-flex.flex-wrap > .card .drop-down .dropdown-menu {
    left: auto;
    right: 0;
  }

  /* A phone-sized stage; the renderer reads the canvas' client height. */
  body.user-center #previewer .card-body canvas {
    height: clamp(240px, 62vw, 360px);
  }
}

/* --------------------------------------------------------------------------
   Pinned sidebar rail (desktop)

   AdminLTE leaves the rail absolutely positioned with `min-height: 100%`, so
   it grows with the wrapper: on a long page the menu ends and the rail keeps
   painting empty glass down to the footer. Pin it to the viewport instead and
   let only the menu scroll; the brand stays put. Below 992px the off-canvas
   drawer keeps AdminLTE's own behaviour, so none of this applies.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  body.user-center .main-sidebar,
  body.admin-page .main-sidebar {
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
  }

  body.user-center .main-sidebar .brand-link,
  body.admin-page .main-sidebar .brand-link {
    flex: 0 0 auto;
  }

  body.user-center .main-sidebar .sidebar,
  body.admin-page .main-sidebar .sidebar {
    flex: 1 1 auto;
    height: auto;
    margin-top: 0;
    min-height: 0;
    overscroll-behavior: contain;
    overflow-y: auto;
    padding-bottom: 1.5rem;
    scrollbar-color: color-mix(in srgb, var(--brand) 30%, transparent) transparent;
    scrollbar-width: thin;
  }

  body.user-center .main-sidebar .sidebar::-webkit-scrollbar,
  body.admin-page .main-sidebar .sidebar::-webkit-scrollbar {
    width: 6px;
  }

  body.user-center .main-sidebar .sidebar::-webkit-scrollbar-thumb,
  body.admin-page .main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand) 24%, transparent);
    border-radius: 999px;
  }

  body.user-center .main-sidebar .sidebar:hover::-webkit-scrollbar-thumb,
  body.admin-page .main-sidebar .sidebar:hover::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand) 40%, transparent);
  }
}