/*!
 * Generated by scripts/build-ui-runtime-css.php. Do not edit directly.
 * sources: 31
 * sources-sha256: 011ce8ff4f5d3d312307ff7d20cc5388de879a855a84d8d9ad1a26a2a10a0502
 */

/* === source: public/css/ui-base.css === */
/**
 * Base UI rules extracted from head.php.
 */
.content > .container,
.content > .container.py-4,
.content > .container.py-3 {
      max-width: var(--t-layout-max);
      width: 100%;
      padding-left: var(--t-layout-pad-left);
      padding-right: var(--t-layout-pad-right);
      margin-left: auto;
      margin-right: auto;
      transition: max-width .16s ease, padding-left .16s ease, padding-right .16s ease;
    }
@media (min-width: 768px) {
  .content > .container,
.content > .container.py-4,
.content > .container.py-3 {
        max-width: var(--t-layout-max) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
}
@media (max-width: 767.98px) {
  .container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
        width: 100% !important;
        max-width: none !important;
      }
  .content > .container,
.content > .container.py-4,
.content > .container.py-3 {
        max-width: var(--t-layout-max) !important;
        width: 100% !important;
        padding-left: var(--t-layout-pad-left) !important;
        padding-right: var(--t-layout-pad-right) !important;
        margin-left: 0;
        margin-right: 0;
      }
  .modal {
        padding-top: max(.25rem, env(safe-area-inset-top));
        padding-right: max(.25rem, env(safe-area-inset-right));
        padding-bottom: max(.25rem, env(safe-area-inset-bottom));
        padding-left: max(.25rem, env(safe-area-inset-left));
      }
  .modal-dialog {
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
      }
}
html {
      /* Avoid permanent right-side gutter stripe on desktop layouts. */
      scrollbar-gutter: auto;
      background-color: rgb(var(--bs-body-bg-rgb));
    }
body {
      min-height: 100vh;
      position: relative;
      isolation: isolate;
      padding-top: 0;
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      overflow-x: hidden;
      margin: 0;
      width: 100%;
      font-feature-settings: "cv02","cv03","cv04","cv11";
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -3;
      background:
        radial-gradient(640px 360px at 18% 14%, rgba(var(--t-brand-warm-rgb), .08), transparent 66%),
        radial-gradient(720px 420px at 82% 4%, rgba(var(--t-brand-cool-rgb), .07), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0));
      opacity: .85;
    }
::selection {
      background: rgba(var(--t-accent-rgb), .22);
      color: inherit;
    }
html[data-ui-bg-cover="1"][data-ui-has-cover="1"]::before {
      content: "";
      position: fixed;
      inset: -3.5vh -3.5vw;
      z-index: -4;
      pointer-events: none;
      background-image: var(--t-user-cover-bg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      filter: blur(24px) saturate(1.08);
      transform: scale(1.07);
      opacity: .30;
    }
h1,
h2,
h3,
h4,
h5,
h6 {
      letter-spacing: -0.01em;
      font-weight: 650;
    }
html[data-ui-headings="calm"] h1,
html[data-ui-headings="calm"] h2,
html[data-ui-headings="calm"] h3,
html[data-ui-headings="calm"] h4,
html[data-ui-headings="calm"] h5,
html[data-ui-headings="calm"] h6 {
      letter-spacing: -0.01em;
      font-weight: 650;
    }
html[data-ui-headings="expressive"] h1,
html[data-ui-headings="expressive"] h2,
html[data-ui-headings="expressive"] h3,
html[data-ui-headings="expressive"] h4,
html[data-ui-headings="expressive"] h5,
html[data-ui-headings="expressive"] h6 {
      letter-spacing: -0.025em;
      font-weight: 760;
    }
html[data-ui-headings="dense"] h1,
html[data-ui-headings="dense"] h2,
html[data-ui-headings="dense"] h3,
html[data-ui-headings="dense"] h4,
html[data-ui-headings="dense"] h5,
html[data-ui-headings="dense"] h6 {
      letter-spacing: -0.006em;
      font-weight: 700;
    }
code,
pre,
kbd,
samp {
      font-family: var(--t-font-mono);
      font-size: .92em;
    }
*,
*::before,
*::after { box-sizing: border-box; }
img,
video,
canvas,
svg,
iframe { max-width: 100%; height: auto; }
.container,
.container-fluid,
.row,
[class*="col-"],
.card,
.offcanvas,
.modal-content,
.content { min-width: 0; }
pre,
code { white-space: pre-wrap; word-break: break-word; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
a {
      transition: color var(--t-motion-fast) var(--t-ease-standard), opacity var(--t-motion-fast) var(--t-ease-standard);
    }
.btn {
      font-weight: 560;
      letter-spacing: -.006em;
      min-height: 2.65rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      border-radius: calc(var(--t-radius) - 4px);
      border-width: 1px;
      box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
      transition:
        background-color var(--t-motion-fast) var(--t-ease-standard),
        border-color var(--t-motion-fast) var(--t-ease-standard),
        color var(--t-motion-fast) var(--t-ease-standard),
        box-shadow var(--t-motion-base) var(--t-ease-standard),
        transform var(--t-motion-base) var(--t-ease-emphasis);
    }
.btn-sm {
      min-height: 2.15rem;
      gap: .35rem;
    }

html[data-ui-shadow="soft"] {
      --t-card-shadow: 0 8px 18px rgba(0,0,0,.05);
      --t-card-shadow-hover: 0 14px 28px rgba(0,0,0,.09);
    }
html[data-ui-shadow="balanced"] {
      --t-card-shadow: 0 10px 26px rgba(0,0,0,.08);
      --t-card-shadow-hover: 0 18px 38px rgba(0,0,0,.12);
    }
html[data-ui-shadow="lifted"] {
      --t-card-shadow: 0 16px 36px rgba(0,0,0,.14);
      --t-card-shadow-hover: 0 24px 48px rgba(0,0,0,.18);
    }
.btn-primary {
      border-color: rgba(var(--t-accent-rgb), .44);
      background:
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(var(--t-accent-rgb), .94), rgba(var(--t-accent-rgb), .82));
      box-shadow:
        0 14px 28px rgba(var(--t-accent-rgb), .2),
        0 1px 0 rgba(255,255,255,.08) inset;
    }
.btn-primary:hover {
      transform: translateY(-1px);
      box-shadow:
        0 18px 34px rgba(var(--t-accent-rgb), .28),
        0 1px 0 rgba(255,255,255,.08) inset;
    }
.btn-outline-primary,
.btn-outline-secondary {
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        rgba(var(--bs-body-bg-rgb), .42);
    }
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
      transform: translateY(-1px);
    }
.btn-light,
.btn-dark {
      box-shadow: var(--t-card-shadow-soft);
    }
.form-control,
.form-select,
.input-group-text {
      min-height: 2.8rem;
      border-radius: calc(var(--t-radius) - 6px);
      border-color: rgba(var(--bs-border-color-rgb), calc(var(--t-surface-border-alpha) + .06));
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        color-mix(in srgb, rgba(var(--bs-body-bg-rgb), .92) 92%, rgba(var(--t-accent-rgb), .08));
      box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 0 0 1px rgba(255,255,255,.012);
      transition:
        border-color var(--t-motion-fast) var(--t-ease-standard),
        box-shadow var(--t-motion-fast) var(--t-ease-standard),
        background-color var(--t-motion-fast) var(--t-ease-standard);
    }
.form-control::placeholder,
.form-select::placeholder {
      color: rgba(var(--bs-body-color-rgb), .46);
    }
.form-control:focus,
.form-select:focus {
      border-color: rgba(var(--t-accent-rgb), .45);
      background: rgba(var(--bs-body-bg-rgb), .94);
      box-shadow: 0 0 0 .22rem rgba(var(--t-accent-rgb), var(--t-focus-ring-alpha));
    }
.input-group-text {
      color: rgba(var(--bs-body-color-rgb), .78);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        rgba(var(--bs-body-bg-rgb), .54);
    }
html[data-ui-controls="outline"] .form-control,
html[data-ui-controls="outline"] .form-select,
html[data-ui-controls="outline"] .input-group-text {
      background: transparent;
      border-width: 1.5px;
      box-shadow: none;
    }
html[data-ui-controls="outline"] .btn-outline-secondary,
html[data-ui-controls="outline"] .btn-outline-primary {
      border-width: 1.5px;
      background: transparent;
    }
html[data-ui-controls="solid"] .form-control,
html[data-ui-controls="solid"] .form-select,
html[data-ui-controls="solid"] .input-group-text {
      background: rgba(var(--bs-body-bg-rgb), .98);
      border-color: rgba(var(--bs-border-color-rgb), .75);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
html[data-ui-controls="solid"] .btn-outline-secondary {
      background: rgba(var(--bs-body-bg-rgb), .95);
      border-color: rgba(var(--bs-border-color-rgb), .75);
    }
.table thead th {
      font-size: .77rem;
      letter-spacing: .045em;
      text-transform: uppercase;
      color: var(--bs-secondary-color);
      font-weight: 650;
    }
.badge {
      border-radius: 999px;
      box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
    }
.alert {
      border-radius: calc(var(--t-radius) - 4px);
      border-color: rgba(var(--bs-border-color-rgb), calc(var(--t-surface-border-alpha) + .08));
      box-shadow: var(--t-card-shadow-soft);
    }
.list-group-item {
      border-color: rgba(var(--bs-border-color-rgb), .4);
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        rgba(var(--bs-body-bg-rgb), .18);
      transition:
        background-color var(--t-motion-fast) var(--t-ease-standard),
        border-color var(--t-motion-fast) var(--t-ease-standard);
    }
/* iOS/mobile: prevent auto-zoom on form focus (requires >=16px input font-size). */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    html { -webkit-text-size-adjust: 100%; }
    input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select,
.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
          font-size: 16px !important;
        }
  }
}
/* iOS standalone safe-area tweaks */

.toast-container { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
@media (display-mode: standalone) {
  body {
        padding-bottom: max(env(safe-area-inset-bottom), .45rem);
        padding-left: max(env(safe-area-inset-left), .2rem);
        padding-right: max(env(safe-area-inset-right), .2rem);
      }
  .content > .container,
.content > .container.py-4,
.content > .container.py-3 {
        padding-bottom: calc(env(safe-area-inset-bottom) + .8rem);
      }
  .offcanvas,
.modal {
        padding-bottom: env(safe-area-inset-bottom);
      }
}
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
  html[data-ui-glass="1"] .dropdown-menu,
html[data-ui-glass="1"] .offcanvas,
html[data-ui-glass="1"] .modal-content,
html[data-ui-glass="1"] .global-chat-msg-menu {
        backdrop-filter: blur(14px) saturate(1.08) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
      }
  html[data-ui-glass="1"] .card {
        backdrop-filter: blur(6px) saturate(1.02);
        -webkit-backdrop-filter: blur(6px) saturate(1.02);
      }
}
/* Global page preloader (loading / install states) */
.tsoy-preloader {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
      background: rgba(var(--bs-body-bg-rgb), .80);
      color: var(--bs-body-color);
      backdrop-filter: blur(12px) saturate(1.08);
      -webkit-backdrop-filter: blur(12px) saturate(1.08);
      opacity: 1;
      visibility: visible;
      transition: opacity .22s ease, visibility 0s linear .22s;
    }
.tsoy-preloader.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
/* Grace period: a page that is ready quickly never flashes the overlay;
       it only fades in when loading actually takes longer than the delay. */
.tsoy-preloader:not(.is-hidden) {
      animation: tsoyPreloaderReveal .18s ease var(--tsoy-preloader-grace, .35s) both;
    }
@keyframes tsoyPreloaderReveal {
      from { opacity: 0; visibility: hidden; }
      to { opacity: 1; visibility: visible; }
    }
.tsoy-preloader-card {
      width: min(92vw, 360px);
      border: 1px solid rgba(var(--bs-border-color-rgb), .65);
      border-radius: calc(var(--t-radius) + 10px);
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
        rgba(var(--bs-body-bg-rgb), .90);
      box-shadow: 0 20px 48px rgba(0,0,0,.14);
      padding: .95rem 1rem;
      display:flex;
      align-items:center;
      gap: .85rem;
    }
.tsoy-preloader[data-variant="compact"] .tsoy-preloader-card {
      width: min(86vw, 292px);
      padding: .65rem .75rem;
      gap: .6rem;
      border-radius: calc(var(--t-radius) + 6px);
    }
.tsoy-preloader-logo {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border-radius: 14px;
      border: 1px solid rgba(var(--bs-border-color-rgb), .6);
      background: rgba(var(--bs-body-bg-rgb), .55);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
.tsoy-preloader[data-variant="compact"] .tsoy-preloader-logo {
      width: 34px;
      height: 34px;
      flex-basis: 34px;
      border-radius: 11px;
    }
.tsoy-preloader-logo img {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
.tsoy-preloader-spinner {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid rgba(var(--bs-border-color-rgb), .55);
      border-top-color: var(--t-accent);
      animation: tsoyPreloaderSpin .7s linear infinite;
      flex-shrink:0;
    }
.tsoy-preloader[data-variant="compact"] .tsoy-preloader-spinner {
      width: 16px;
      height: 16px;
      border-width: 2px;
    }
.tsoy-preloader-meta {
      min-width: 0;
      display:flex;
      flex-direction:column;
      gap:.12rem;
    }
.tsoy-preloader-title {
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.01em;
    }
.tsoy-preloader[data-variant="compact"] .tsoy-preloader-title {
      font-size: .95rem;
      line-height: 1.1;
    }
.tsoy-preloader-text {
      color: var(--bs-secondary-color);
      font-size: .88rem;
      line-height: 1.2;
    }
.tsoy-preloader[data-variant="compact"] .tsoy-preloader-text {
      font-size: .78rem;
      line-height: 1.1;
    }
.tsoy-preloader[data-text="hide"] .tsoy-preloader-text {
      display:none;
    }
.tsoy-preloader[data-state="pwa-install"] .tsoy-preloader-spinner {
      border-top-color: rgb(220, 53, 69);
      box-shadow: 0 0 0 3px rgba(220,53,69,.08);
    }
.tsoy-preloader[data-state="install-site"] .tsoy-preloader-spinner {
      border-top-color: rgb(var(--bs-warning-rgb));
    }
@keyframes tsoyPreloaderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tsoy-preloader { transition: none; }
  .tsoy-preloader:not(.is-hidden) { animation-duration: 1ms; }
  .tsoy-preloader-spinner { animation: none; }
}
/* ==========================================================================
   MODALS — design-system tokens
   ========================================================================== */
.modal-content {
  border-radius: var(--t-radius-modal, 24px);
  border: 1px solid rgba(var(--bs-border-color-rgb), .42);
  background:
    radial-gradient(560px 240px at 8% 0%, rgba(var(--t-brand-warm-rgb), .08), transparent 68%),
    radial-gradient(560px 240px at 92% 0%, rgba(var(--t-brand-cool-rgb), .07), transparent 72%),
    rgba(var(--bs-body-bg-rgb), .96);
  box-shadow: 0 24px 56px rgba(9, 15, 24, .18), 0 8px 18px rgba(9, 15, 24, .10);
  overflow: hidden;
}
[data-bs-theme="dark"] .modal-content {
  border-color: rgba(255, 255, 255, .10);
  background:
    radial-gradient(560px 240px at 8% 0%, rgba(var(--t-brand-warm-rgb), .07), transparent 68%),
    rgba(var(--bs-body-bg-rgb), .96);
  box-shadow: 0 24px 56px rgba(0, 0, 0, .42), 0 8px 18px rgba(0, 0, 0, .28);
}
html[data-ui-glass="1"] .modal-content {
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.modal-header {
  border-bottom: 1px solid rgba(var(--bs-border-color-rgb), .32);
  padding: 1.1rem 1.4rem;
  background: transparent;
}
.modal-header .modal-title {
  font-weight: 700;
  color: var(--t-fg, var(--bs-body-color));
  font-size: 1.1rem;
  letter-spacing: -.01em;
}
.modal-header .btn-close {
  background-color: rgba(var(--bs-body-color-rgb), .06);
  border-radius: 50%;
  padding: .45rem;
  transition: background-color var(--t-motion-fast, .16s) ease;
  opacity: .72;
}
.modal-header .btn-close:hover {
  background-color: rgba(var(--bs-body-color-rgb), .12);
  opacity: 1;
}
.modal-body {
  padding: 1.4rem;
  color: var(--bs-body-color);
  font-size: 1rem;
  line-height: 1.6;
}
.modal-footer {
  border-top: 1px solid rgba(var(--bs-border-color-rgb), .32);
  padding: 1rem 1.4rem;
  background: rgba(var(--bs-body-bg-rgb), .4);
  display: flex;
  gap: .65rem;
}
/* Modal backdrop */
.modal-backdrop.show {
  opacity: .45;
  backdrop-filter: blur(8px) saturate(1.1);
  background-color: rgb(var(--t-brand-ink-rgb, 9, 15, 24));
}
/* Modal animation */
.modal.fade .modal-dialog {
  transform: scale(.95) translateY(10px);
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}
.modal-footer .btn {
  font-weight: 600;
}
/* ==========================================================================
   TOASTS
   ========================================================================== */
.toast-container {
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  z-index: 9999;
}
.toast {
  background:
    radial-gradient(300px 160px at 8% 0%, rgba(var(--t-brand-warm-rgb), .10), transparent 70%),
    rgba(var(--bs-body-bg-rgb), .88) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(var(--bs-border-color-rgb), .42) !important;
  border-radius: var(--t-radius-toast, 16px) !important;
  box-shadow: 0 10px 28px rgba(9, 15, 24, .12), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden;
  margin-bottom: .75rem;
  transition:
    opacity .28s cubic-bezier(.16, 1, .3, 1),
    transform .28s cubic-bezier(.16, 1, .3, 1);
  transform: translateY(8px);
  opacity: 0;
}
.toast.showing,
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
[data-bs-theme="dark"] .toast {
  background:
    radial-gradient(300px 160px at 8% 0%, rgba(var(--t-brand-warm-rgb), .07), transparent 70%),
    rgba(var(--bs-body-bg-rgb), .92) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.toast-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(var(--bs-border-color-rgb), .28) !important;
  padding: .7rem 1.1rem !important;
  color: var(--t-fg, var(--bs-body-color)) !important;
  font-weight: 700 !important;
}
[data-bs-theme="dark"] .toast-header {
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}
.toast-body {
  padding: .85rem 1.1rem !important;
  color: var(--bs-body-color) !important;
  font-size: .92rem;
  line-height: 1.5;
}
.toast-header .btn-close {
  opacity: .5;
  background-size: .8rem;
  border-radius: 50%;
  padding: .35rem;
}
.toast-header .btn-close:hover {
  opacity: 1;
  background-color: rgba(var(--bs-body-color-rgb), .06);
}
/* ==========================================================================
   NAVBAR (header.navbar) — glass chrome
   ========================================================================== */

/* === source: public/css/ui-shell.css === */
/**
 * Shell/layout styles extracted from head.php.
 */
.app-shell {
      display:flex;
      min-height: 100vh;
      min-height: 100dvh;
      align-items: stretch;
      gap: 0;
      width: 100%;
      max-width: 100vw;
      overflow-x: clip;
    }
.app-shell[data-shell-embed="1"] {
      min-height: 100dvh;
    }
.app-shell[data-shell-embed="1"] .content {
      background: transparent;
    }
.app-shell[data-shell-embed="1"] [data-shell-content] > .chat-canvas-stage {
      padding: .22rem .22rem 0 !important;
    }
.app-shell[data-shell-embed="1"] [data-shell-content] > .container {
      padding-top: .2rem !important;
      padding-left: .2rem !important;
      padding-right: .2rem !important;
    }
@media (max-width: 767.98px) {
  .content { width: 100%; }
}
.content {
      flex:1;
      min-width: 0;
      width: 100%;
      background:
        radial-gradient(860px 360px at 100% 0%, rgba(var(--t-brand-cool-rgb), .12), transparent 68%),
        radial-gradient(880px 360px at 0% 100%, rgba(var(--t-brand-warm-rgb), .1), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,0)),
        transparent;
    }
html[data-ui-accent-boost="0"] .content {
      background: transparent;
    }
@media (min-width: 768px) {
  .app-shell.has-sidebar-compact { --sidebar-w: var(--sidebar-mini-w); }
}

.list-group-item { min-height: 44px; }
.card {
      border-color: rgba(var(--bs-border-color-rgb), var(--t-surface-border-alpha));
      box-shadow: var(--t-card-shadow);
      background:
        radial-gradient(520px 180px at 12% 0%, rgba(var(--t-brand-warm-rgb), var(--t-surface-tint-warm-alpha)), transparent 72%),
        radial-gradient(520px 180px at 88% 0%, rgba(var(--t-brand-cool-rgb), var(--t-surface-tint-cool-alpha)), transparent 74%),
        linear-gradient(180deg, var(--t-surface-highlight), rgba(255,255,255,.008)),
        rgba(var(--bs-body-bg-rgb), var(--t-surface-bg-alpha));
      transition:
        border-color var(--t-motion-fast) var(--t-ease-standard),
        box-shadow var(--t-motion-base) var(--t-ease-standard),
        transform var(--t-motion-base) var(--t-ease-emphasis);
    }
@media (hover: hover) and (pointer: fine) {
  .card:hover {
        border-color: rgba(var(--t-accent-rgb), .26);
        box-shadow: var(--t-card-shadow-hover);
        transform: translateY(-1px);
      }
}
html[data-ui-accent-boost="0"] .card {
      background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        rgba(var(--bs-body-bg-rgb), var(--t-surface-bg-alpha));
    }
.dropdown-menu,
.modal-content,
.offcanvas {
      border-color: rgba(var(--bs-border-color-rgb), var(--t-surface-border-alpha));
      box-shadow: var(--t-card-shadow);
      background:
        radial-gradient(520px 180px at 12% 0%, rgba(var(--t-brand-warm-rgb), calc(var(--t-surface-tint-warm-alpha) * .82)), transparent 74%),
        radial-gradient(520px 180px at 88% 0%, rgba(var(--t-brand-cool-rgb), calc(var(--t-surface-tint-cool-alpha) * .78)), transparent 76%),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
        rgba(var(--bs-body-bg-rgb), calc(var(--t-surface-bg-alpha) + .06));
    }
.page-hero {
      border:1px solid rgba(var(--bs-border-color-rgb), .55);
      border-radius: calc(var(--t-radius) + 8px);
      padding: .9rem 1rem;
      background:
        radial-gradient(560px 240px at 0% 0%, rgba(var(--t-brand-warm-rgb), .16), transparent 64%),
        radial-gradient(620px 240px at 100% 0%, rgba(var(--t-brand-cool-rgb), .12), transparent 66%),
        rgba(var(--bs-body-bg-rgb), .55);
      margin-bottom: var(--t-space-4);
      box-shadow: var(--t-card-shadow-soft);
    }
html[data-ui-accent-boost="0"] .page-hero {
      background: rgba(var(--bs-body-bg-rgb), .58);
      border-color: rgba(var(--bs-border-color-rgb), .48);
    }
.page-hero h1,
.page-hero .h3 {
      margin-bottom: .15rem !important;
    }
.page-subtle {
      color: var(--bs-secondary-color) !important;
      font-size: .95rem;
    }
.shell-toast-area {
      z-index: 1080;
    }
#toastArea.shell-toast-area {
      pointer-events: none;
    }
#toastArea.shell-toast-area .toast {
      pointer-events: auto;
    }
/* A toast with a target opens it on a press. */
#toastArea .toast.is-link { cursor: pointer; }
#toastArea .toast.is-link:hover .toast-body { text-decoration: underline; text-underline-offset: 3px; }
#toastArea .toast.is-link:focus-visible { outline: 2px solid var(--ds-accent, #6366f1); outline-offset: 2px; }
.glass-modal .modal-content.ui-runtime-modal-content {
      border-radius: 1.5rem;
      background:
        radial-gradient(520px 180px at 12% 0%, rgba(var(--t-brand-warm-rgb), .14), transparent 72%),
        radial-gradient(520px 180px at 88% 0%, rgba(var(--t-brand-cool-rgb), .12), transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
        rgba(var(--bs-body-bg-rgb), .96);
      backdrop-filter: blur(20px) saturate(1.08);
      -webkit-backdrop-filter: blur(20px) saturate(1.08);
      overflow: hidden;
      border-color: rgba(var(--bs-border-color-rgb), .34);
    }
.glass-modal .ui-runtime-modal-header {
      padding-bottom: 0;
    }
.glass-modal .ui-runtime-modal-title {
      color: var(--chat-text, var(--bs-body-color));
      text-align: center;
      line-height: 1.2;
      margin-bottom: 0;
    }
.glass-modal .ui-runtime-modal-body {
      color: var(--chat-subtext, var(--bs-secondary-color));
      font-size: .95rem;
      line-height: 1.45;
    }
.glass-modal .ui-runtime-modal-footer {
      border-top: 1px solid rgba(var(--bs-body-color-rgb), .08) !important;
    }
.glass-modal .ui-runtime-modal-action {
      border-radius: 0;
      padding: 1rem 0;
      min-height: 48px;
      box-shadow: none !important;
      text-decoration: none;
      flex: 1 1 50%;
      transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
    }
.glass-modal .ui-runtime-modal-action + .ui-runtime-modal-action {
      border-left: 1px solid rgba(var(--bs-body-color-rgb), .08);
    }
.glass-modal .ui-runtime-modal-action-cancel {
      color: var(--chat-primary, var(--bs-primary));
    }
.glass-modal .ui-runtime-modal-action-confirm {
      color: var(--chat-danger, var(--bs-danger));
      font-weight: 700;
    }

[data-shell-content] > .container,
[data-shell-content] > .chat-canvas-stage {
      padding-top: .75rem;
      padding-left: var(--t-shell-content-pad-x);
      padding-right: var(--t-shell-content-pad-x);
      width: 100%;
      max-width: var(--t-layout-max);
      margin-left: auto;
      margin-right: auto;
    }

@media (max-width: 767.98px) {
  .app-shell {
        --t-layout-pad-left: max(.45rem, env(safe-area-inset-left)) !important;
        --t-layout-pad-right: max(.45rem, env(safe-area-inset-right)) !important;
      }
  [data-shell-content] > .container,
[data-shell-content] > .chat-canvas-stage {
        padding-top: .18rem;
        padding-left: var(--t-layout-pad-left);
        padding-right: var(--t-layout-pad-right);
        width: 100% !important;
        max-width: var(--t-layout-max) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

  [data-shell-app][data-shell-has-topbar="0"] [data-shell-content] > .container,
[data-shell-app][data-shell-has-topbar="0"] [data-shell-content] > .chat-canvas-stage {
        padding-top: max(.35rem, env(safe-area-inset-top));
      }
  .content .home-shell {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
      }
  #toastArea.shell-toast-area {
        left: .5rem !important;
        right: .5rem !important;
        bottom: calc(max(var(--island-space, 0px), env(safe-area-inset-bottom)) + .5rem) !important;
        padding: 0 !important;
      }

  .glass-modal .modal-dialog.modal-sm {
        margin: .75rem;
      }
  .glass-modal .ui-runtime-modal-content {
        border-radius: 1.25rem;
      }
  .glass-modal .ui-runtime-modal-body {
        font-size: .98rem;
      }
  .glass-modal .ui-runtime-modal-action {
        min-height: 52px;
        padding: .95rem 0;
        touch-action: manipulation;
      }
}
.min-w-0 { min-width: 0; }
/* Glass cards (optional) */
html[data-ui-glass="1"] .card,
html[data-ui-glass="1"] .offcanvas,
html[data-ui-glass="1"] .dropdown-menu {
  background-color: rgba(var(--bs-body-bg-rgb), 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(var(--bs-border-color-rgb), calc(var(--t-surface-border-alpha) + .05));
}
html[data-ui-glass="1"][data-ui-surfaces="soft"] .card,
html[data-ui-glass="1"][data-ui-surfaces="soft"] .offcanvas,
html[data-ui-glass="1"][data-ui-surfaces="soft"] .dropdown-menu {
  background-color: rgba(var(--bs-body-bg-rgb), .66);
}
html[data-ui-glass="1"][data-ui-surfaces="strong"] .card,
html[data-ui-glass="1"][data-ui-surfaces="strong"] .offcanvas,
html[data-ui-glass="1"][data-ui-surfaces="strong"] .dropdown-menu {
  background-color: rgba(var(--bs-body-bg-rgb), .82);
}
/* Micro-interactions */
html[data-ui-anim="1"] .card {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
html[data-ui-anim="1"] .card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.11);
  border-color: rgba(var(--t-accent-rgb), 0.35);
}
html[data-ui-anim="1"] .btn,
html[data-ui-anim="1"] .list-group-item,
html[data-ui-anim="1"] .offcanvas {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html[data-ui-anim="1"] .btn:active { transform: translateY(1px); }
/* Page fade-in */
html[data-ui-anim="1"] .container.py-4 { animation: none; }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  html[data-ui-anim="1"] .container.py-4 { animation: tsoyFade .18s ease-out both; }
}
@keyframes tsoyFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
html[data-ui-anim="0"] * { animation: none !important; transition: none !important; }
/* Shared action rows */
.page-actions {
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      min-width:0;
    }
.page-actions .btn {
      border-radius: 999px;
      white-space: nowrap;
      max-width: 100%;
    }
@media (max-width: 767.98px) {
  .page-actions {
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }
  .page-actions .btn {
        width:100%;
        overflow:hidden;
        text-overflow: ellipsis;
      }
}
/* ---- Profiles Modal ---- */
.upm-dialog {max-width:580px;}
.upm-content {
      border-radius: calc(var(--t-radius) + 10px);
      border: 1px solid rgba(var(--bs-border-color-rgb), .55);
      overflow: hidden;
    }
html[data-ui-glass="1"] .upm-content {
      background: rgba(var(--bs-body-bg-rgb), .84);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
.upm-list {
      display:flex; flex-direction:column; gap:.55rem;
    }
.upm-card {
      border:1px solid rgba(var(--bs-border-color-rgb),.38);
      border-radius:calc(var(--t-radius) + 4px);
      background:rgba(var(--bs-body-bg-rgb),.18);
      padding:.65rem;
      transition:border-color .15s;
    }
.upm-card.active {
      border-color:rgba(var(--bs-primary-rgb),.4);
      background:rgba(var(--bs-primary-rgb),.05);
    }
.upm-card-row {
      display:flex; align-items:center; gap:.6rem;
    }
.upm-avatar {
      width:40px; height:40px;
      border-radius:.85rem;
      overflow:hidden;
      border:1px solid rgba(var(--bs-border-color-rgb),.5);
      background:rgba(var(--bs-body-bg-rgb),.5);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0; text-decoration:none;
    }
.upm-avatar img {width:100%;height:100%;object-fit:cover;display:block;}
.upm-meta {min-width:0;flex:1 1 auto;}
.upm-name {font-weight:600;font-size:.9rem;line-height:1.15;}
.upm-sub {font-size:.8rem;color:var(--bs-secondary-color);line-height:1.2;}
.upm-actions {
      display:flex; align-items:center; gap:.35rem; flex-shrink:0;
    }
.upm-rename {
      border-top:1px solid rgba(var(--bs-border-color-rgb),.3);
      margin-top:.55rem; padding-top:.55rem;
    }
.upm-create-form {
      border:1px solid rgba(var(--bs-border-color-rgb),.38);
      border-radius:calc(var(--t-radius) + 4px);
      background:rgba(var(--bs-body-bg-rgb),.18);
      padding:.75rem;
    }
@media (max-width: 767.98px) {
  .content > .container,
.content > .container.py-4,
.content > .container.py-3 {
        max-width: 100%;
      }
  .upm-card-row {flex-wrap:wrap;}
  .upm-actions {width:100%;justify-content:flex-end;}
}

/* Canvas shell route extracted from views/layout.php */
html.shell-canvas-route,
html.shell-canvas-route body {
  height: 100dvh;
  overflow: hidden;
}
.app-shell[data-shell-canvas-route="1"] {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.app-shell[data-shell-canvas-route="1"] .content.content-canvas-mode {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.app-shell[data-shell-canvas-route="1"] .content.content-canvas-mode .chat-canvas-stage {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  width: 100%;
  max-width: var(--t-layout-max);
  margin-inline: auto;
}
@media (min-width: 992px) {
  .app-shell[data-shell-canvas-route="1"] .content.content-canvas-mode .chat-canvas-stage {
    max-width: var(--t-layout-max);
    margin-inline: auto;
    padding: .5rem var(--t-layout-pad-x) .5rem;
  }
}
.app-shell[data-shell-route="board_view"][data-shell-canvas-route="1"] .content.content-canvas-mode .chat-canvas-stage {
  max-width: none;
  margin-inline: 0;
}
@media (min-width: 992px) {
  .app-shell[data-shell-route="board_view"][data-shell-canvas-route="1"] .content.content-canvas-mode .chat-canvas-stage {
    padding: .5rem .75rem .5rem;
  }
}
/* App shell navigator (public/assets/js/shell.js): a thin bar while a page is
   on its way, and a short fade-in of the new page region (only when
   animations are on). */
.shell-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2000;
  height: 2px;
  pointer-events: none;
  background: var(--t-accent, #6f6fff);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}
.shell-progress.is-active {
  opacity: 1;
  transform: scaleX(.7);
  transition: transform 1.6s cubic-bezier(.1, .7, .2, 1), opacity .1s linear;
}
.shell-progress.is-active.is-done {
  transform: scaleX(1);
  opacity: 0;
  transition: transform .15s ease-out, opacity .2s linear .1s;
}
[data-shell-view]:focus {
  outline: none;
}
[data-shell-view].shell-enter {
  animation: shellViewEnter .16s ease-out both;
}
@keyframes shellViewEnter {
  from { opacity: .4; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shell-progress.is-active,
  .shell-progress.is-active.is-done {
    transition: none;
  }
  [data-shell-view].shell-enter {
    animation: none;
  }
}

/* === source: public/css/ui-home.css === */
/* Home workspace: a compact, responsive surface using the shared design tokens. */
.home-page.home-workbench {
  --home-bg: var(--ds-bg, #f4f5f7);
  --home-surface: var(--ds-surface, #fff);
  --home-soft: var(--ds-soft, #eef1f6);
  --home-ink: var(--ds-ink, #182337);
  --home-muted: var(--ds-muted, #637087);
  --home-line: var(--ds-line, #e0e5ed);
  --home-accent: var(--ds-accent, #3459d6);
  --home-accent-soft: var(--ds-accent-soft, #edf1ff);
  --home-pad: var(--ds-panel-pad, 18px);
  --home-gap: var(--ds-gap, 16px);
  position: relative;
  padding: var(--home-gap) 0 calc(var(--home-gap) * 2);
  color: var(--home-ink);
  isolation: isolate;
  min-width: 0;
}

.home-page.home-workbench::before,
.home-page.home-workbench::after,
.home-workbench .home-hero__surface::before,
.home-workbench .home-hero__surface::after { display: none; }

/* Width and side padding come from the page container ([data-shell-content] >
   .container), which applies the "content width" design setting like on every
   other page; a second cap and padding here made home narrower than the rest. */
.home-workbench .home-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.home-workbench .home-stack { display: flex; flex-direction: column; gap: calc(var(--home-gap) * 1.5); }
.home-workbench .home-order-1 { order: 1; }
.home-workbench .home-order-2 { order: 2; }
.home-workbench .home-order-3 { order: 3; }
.home-workbench .home-order-4 { order: 4; }
.home-workbench .home-order-5 { order: 5; }
.home-workbench .home-order-6 { order: 6; }
.home-workbench .home-order-7 { order: 7; }
.home-workbench .home-order-8 { order: 8; }

/* "Для вас": what was handed to this person and is not opened yet (delivery connector). */
.home-workbench .home-foryou__count { display: inline-grid; place-items: center; min-width: 1.6em; padding: 0 .4em; border-radius: 999px; background: var(--home-accent); color: var(--ds-on-accent, #fff); font-size: .7em; vertical-align: middle; }
.home-workbench .home-foryou-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--home-gap); }
.home-workbench .home-foryou-item { margin: 0; }
.home-page.home-workbench .home-foryou-item__button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; padding: var(--home-pad); border: 1px solid var(--home-line); border-left: 3px solid var(--home-accent); border-radius: var(--ds-radius-card, 12px); background: var(--home-surface); color: var(--home-ink); text-align: left; cursor: pointer; transition: border-color .16s ease; }
.home-page.home-workbench .home-foryou-item__button:hover { border-color: var(--home-accent); }
.home-workbench .home-foryou-item__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--home-accent-soft); color: var(--home-accent); font-size: calc(18px * var(--t-font-scale, 1)); }
.home-workbench .home-foryou-item__body { display: grid; gap: 3px; min-width: 0; }
.home-workbench .home-foryou-item__kind { color: var(--home-muted); font-size: calc(11px * var(--t-font-scale, 1)); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.home-workbench .home-foryou-item__title { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home-workbench .home-foryou-item__summary { color: var(--home-muted); font-size: calc(12.5px * var(--t-font-scale, 1)); }
.home-workbench .home-foryou-item__go { color: var(--home-muted); }

/* Showcase: what services show on the home page (boards, calls, links, games). */
.home-workbench .home-showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--home-gap); }
.home-page.home-workbench .home-showcase-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: var(--home-pad); border: 1px solid var(--home-line); border-radius: var(--ds-radius-card, 12px); background: var(--home-surface); color: var(--home-ink); text-decoration: none; transition: border-color .16s ease; }
.home-page.home-workbench .home-showcase-card:hover { border-color: var(--home-accent); }
.home-workbench .home-showcase-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--home-accent-soft); color: var(--home-accent); font-size: calc(18px * var(--t-font-scale, 1)); }
.home-workbench .home-showcase-card__body { display: grid; gap: 3px; min-width: 0; }
.home-workbench .home-showcase-card__kind { color: var(--home-muted); font-size: calc(11px * var(--t-font-scale, 1)); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.home-workbench .home-showcase-card__title { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home-workbench .home-showcase-card__summary { display: -webkit-box; overflow: hidden; color: var(--home-muted); font-size: calc(12.5px * var(--t-font-scale, 1)); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-workbench .home-showcase-card__meta { color: var(--home-muted); font-size: calc(12px * var(--t-font-scale, 1)); }
.home-workbench :is(.home-module, .home-panel, .home-hero, .home-hero__surface) { min-width: 0; }

.home-page.home-workbench .home-module,
.home-page.home-workbench .home-hero {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-page.home-workbench .home-panel {
  padding: var(--home-pad);
  border: 1px solid var(--home-line);
  border-radius: var(--ds-radius-card, 12px);
  background: var(--home-surface);
  box-shadow: var(--ds-shadow, none);
  backdrop-filter: blur(var(--ds-glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur, 0px));
}

.home-page.home-workbench .home-hero__surface {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr);
  gap: 0 calc(var(--home-gap) * 1.5);
  padding: calc(var(--home-pad) * 1.25) calc(var(--home-pad) * 1.25) 0;
  border: 1px solid var(--home-line);
  border-radius: var(--ds-radius-card, 14px);
  background: var(--home-surface);
  box-shadow: var(--ds-shadow, none);
  backdrop-filter: blur(var(--ds-glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--ds-glass-blur, 0px));
  overflow: hidden;
}

.home-workbench .home-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--home-gap);
  padding: 4px 0 var(--home-pad);
  min-width: 0;
}
.home-workbench .home-hero__head { display: block; }
.home-workbench .home-hero__title-wrap { min-width: 0; }
.home-workbench .home-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--home-muted);
  font-size: calc(11px * var(--t-font-scale, 1));
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.home-workbench .home-kicker__mark { width: 7px; height: 7px; border-radius: 2px; background: var(--home-accent); }
.home-page.home-workbench .home-hero__title {
  max-width: 620px;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(calc(30px * var(--t-font-scale, 1)), calc(3.15vw * var(--t-font-scale, 1)), calc(46px * var(--t-font-scale, 1)));
  font-weight: var(--ds-heading-weight, 750);
  letter-spacing: var(--ds-heading-tracking, -.035em);
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
}
.home-workbench .home-hero__subtitle {
  max-width: 48ch;
  margin: 16px 0 0;
  color: var(--home-muted);
  font-size: calc(14px * var(--t-font-scale, 1));
  line-height: 1.75;
}
.home-workbench .home-hero__actions { display: flex; flex-wrap: wrap; gap: calc(var(--home-gap) * .6); }
.home-workbench .home-hero__aside { display: block; min-width: 0; padding-bottom: var(--home-pad); }
.home-workbench .home-launchpad {
  height: 100%;
  min-height: 0;
  padding: var(--home-pad) var(--home-pad) calc(var(--home-pad) * .35);
  border: 0;
  border-radius: var(--ds-radius-card, 10px);
  background: var(--home-soft);
  color: var(--home-ink);
}
.home-workbench .home-launchpad__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--home-gap);
  margin-bottom: 10px;
  color: var(--home-muted);
}
.home-workbench .home-launchpad__eyebrow { font-size: calc(11px * var(--t-font-scale, 1)); letter-spacing: .09em; font-weight: 650; text-transform: uppercase; }
.home-workbench .home-launchpad__link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 14px;
  align-items: center;
  gap: calc(var(--home-gap) * .65);
  padding: calc(var(--ds-control-py, 8px) + 3px) 0;
  border-top: 1px solid var(--home-line);
  color: var(--home-ink);
  text-decoration: none;
}
.home-workbench .home-launchpad__link:hover { color: var(--home-accent); }
.home-workbench .home-launchpad__link:hover > .bi { color: var(--home-accent); }
.home-workbench .home-launchpad__icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--ds-radius-control, 9px); background: var(--home-accent-soft); color: var(--home-accent); font-size: calc(17px * var(--t-font-scale, 1)); }
.home-workbench .home-launchpad__link strong { display: block; color: inherit; font-size: calc(13px * var(--t-font-scale, 1)); font-weight: 600; line-height: 1.35; }
.home-workbench .home-launchpad__link small { display: block; margin-top: 4px; color: var(--home-muted); font-size: calc(11px * var(--t-font-scale, 1)); line-height: 1.4; }
.home-workbench .home-launchpad__link > .bi { color: var(--home-muted); font-size: calc(12px * var(--t-font-scale, 1)); }

.home-workbench .home-kpi-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: var(--home-pad) 0; border-top: 1px solid var(--home-line); }
.home-page.home-workbench .home-kpi {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--home-gap) * .75);
  min-width: 0;
  padding: 2px var(--home-pad);
  border: 0;
  border-left: 1px solid var(--home-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--home-ink);
  text-decoration: none;
  transform: none;
}
.home-page.home-workbench .home-kpi:first-child { border-left: 0; padding-left: 0; }
.home-workbench .home-kpi__icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--ds-radius-control, 8px); color: var(--home-muted); background: var(--home-soft); font-size: calc(14px * var(--t-font-scale, 1)); }
.home-workbench .home-kpi__body { display: grid; gap: 3px; min-width: 0; }
.home-workbench .home-kpi__value { color: var(--home-ink); font-size: calc(23px * var(--t-font-scale, 1)); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.home-workbench .home-kpi__label { color: var(--home-ink); font-size: calc(11px * var(--t-font-scale, 1)); font-weight: 650; }
.home-workbench .home-kpi__hint { color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 1.4; }
.home-workbench .home-kpi:hover .home-kpi__icon { background: var(--home-accent-soft); color: var(--home-accent); }

.home-workbench .home-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: calc(var(--home-gap) * .75); margin-bottom: var(--home-gap); }
.home-page.home-workbench .home-quick-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: calc(var(--home-pad) * .8);
  border: 1px solid var(--home-line);
  border-radius: var(--ds-radius-card, 10px);
  background: var(--home-surface);
  box-shadow: var(--ds-shadow, none);
  color: var(--home-ink);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.home-workbench .home-quick-card__body { display: grid; gap: 5px; min-width: 0; }
.home-workbench .home-quick-card__icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--ds-radius-control, 8px); background: var(--home-accent-soft); color: var(--home-accent); font-size: calc(15px * var(--t-font-scale, 1)); }
.home-workbench .home-quick-card__label { font-size: calc(12px * var(--t-font-scale, 1)); font-weight: 700; line-height: 1.5; }
.home-workbench .home-quick-card__desc { color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 1.6; }
.home-workbench .home-quick-card__badge { margin-left: auto; color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 2; }
.home-workbench .home-workspace__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, 1fr); align-items: start; gap: var(--home-gap); }
.home-workbench .home-side-stack { display: grid; gap: var(--home-gap); min-width: 0; }
.home-workbench .home-module__head,
.home-workbench .home-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--home-gap); margin-bottom: var(--home-gap); }
.home-workbench .home-module__head h2,
.home-workbench .home-panel__head h2 { margin: 0; color: var(--home-ink); font-size: calc(17px * var(--t-font-scale, 1)); font-weight: var(--ds-heading-weight, 700); letter-spacing: var(--ds-heading-tracking, -.03em); line-height: 1.4; }
.home-workbench .home-panel__head h2 { font-size: calc(15px * var(--t-font-scale, 1)); }
.home-workbench .home-module__head p,
.home-workbench .home-panel__head p,
.home-workbench .home-muted { margin: 5px 0 0; color: var(--home-muted); font-size: calc(12px * var(--t-font-scale, 1)); line-height: 1.6; overflow-wrap: anywhere; }
.home-workbench .home-panel h3 { margin: 0 0 12px; color: var(--home-ink); font-size: calc(14px * var(--t-font-scale, 1)); font-weight: var(--ds-heading-weight, 700); letter-spacing: var(--ds-heading-tracking, normal); }
.home-workbench .home-text-link { color: var(--home-accent); font-size: calc(12px * var(--t-font-scale, 1)); font-weight: 650; text-decoration: none; white-space: nowrap; }
.home-workbench .home-text-link .bi { margin-left: 5px; }
.home-workbench .home-text-link:hover { text-decoration: underline; }

.home-workbench .home-files-search { position: relative; margin: 0 0 16px; }
.home-workbench .home-files-search > .bi { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--home-muted); font-size: calc(13px * var(--t-font-scale, 1)); pointer-events: none; }
.home-workbench .home-files-search .form-control { padding-left: 35px; }
.home-page.home-workbench .form-control,
.home-page.home-workbench .form-select { min-height: var(--ds-control-h, 36px); padding-block: var(--ds-control-py, 7px); border-radius: var(--ds-radius-control, 8px); font-size: calc(12px * var(--t-font-scale, 1)); }
.home-page.home-workbench .form-control::placeholder { color: var(--home-muted); }
.home-page.home-workbench .form-control:focus,
.home-page.home-workbench .form-select:focus { border-color: var(--home-accent); outline: 2px solid var(--home-accent-soft); outline-offset: 1px; }
.home-workbench .home-files-list,
.home-workbench .home-list-compact,
.home-workbench .home-feed-list { display: grid; margin: 0; padding: 0; list-style: none; }
.home-page.home-workbench .home-file-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: calc(var(--ds-control-py, 8px) + 3px) 0;
  border: 0;
  border-bottom: 1px solid var(--home-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-workbench .home-file-item:last-child { border-bottom: 0; }
.home-workbench .home-file-item__icon { display: grid; place-items: center; width: 34px; height: 40px; border: 0; border-radius: var(--ds-radius-control, 7px); background: var(--home-soft); color: var(--home-muted); font-size: calc(18px * var(--t-font-scale, 1)); }
.home-workbench .home-file-item__main { min-width: 0; }
.home-workbench .home-file-item__name { display: block; overflow: hidden; color: var(--home-ink); text-decoration: none; font-size: calc(12px * var(--t-font-scale, 1)); font-weight: 650; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.home-workbench .home-file-item__meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 3px; color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 1.5; overflow-wrap: anywhere; }
.home-workbench .home-file-item__name:hover { color: var(--home-accent); }
.home-workbench .home-file-item__name::after { content: ""; position: absolute; inset: 0; }
.home-page.home-workbench .home-file-item { position: relative; }
.home-workbench .home-file-item__get { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--home-muted); font-size: calc(16px * var(--t-font-scale, 1)); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.home-workbench .home-file-item__get:hover { background: var(--home-soft); color: var(--home-ink); }
.home-workbench .home-empty { margin: 0; padding: var(--home-pad); border: 0; border-radius: var(--ds-radius-card, 10px); background: var(--home-soft); color: var(--home-muted); font-size: calc(12px * var(--t-font-scale, 1)); text-align: center; }
.home-workbench .home-empty--files { display: grid; place-items: center; gap: 9px; padding: calc(var(--home-pad) * 1.5) var(--home-pad); }
.home-workbench .home-empty--files > .bi { margin-bottom: 4px; color: var(--home-muted); font-size: calc(32px * var(--t-font-scale, 1)); }
.home-workbench .home-empty--files strong { color: var(--home-ink); font-size: calc(13px * var(--t-font-scale, 1)); font-weight: 650; }
.home-workbench .home-empty--files span { max-width: 32ch; font-size: calc(11px * var(--t-font-scale, 1)); line-height: 1.6; }

.home-workbench .home-upload-form { display: grid; gap: calc(var(--home-gap) * .8); margin-top: calc(var(--home-gap) * .8); }
.home-page.home-workbench .home-dropzone { position: relative; display: grid; justify-items: center; gap: calc(var(--home-gap) * .5); padding: var(--home-pad); border: 1px dashed var(--home-line); border-radius: var(--ds-radius-card, 10px); background: var(--home-soft); text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.home-page.home-workbench .home-dropzone:hover,
.home-page.home-workbench .home-dropzone.dragover { border-color: var(--home-accent); background: var(--home-accent-soft); transform: none; }
.home-workbench .home-dropzone__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--ds-radius-control, 9px); background: var(--home-surface); color: var(--home-accent); font-size: calc(21px * var(--t-font-scale, 1)); }
.home-workbench .home-dropzone__title { max-width: 30ch; color: var(--home-ink); font-size: calc(12px * var(--t-font-scale, 1)); font-weight: 600; line-height: 1.6; }
.home-workbench .home-dropzone__hint { color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 1.5; overflow-wrap: anywhere; }
.home-workbench .home-upload-form__controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.home-workbench .home-upload-form__controls.has-pin { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
.home-workbench .home-upload-form__controls.has-pin .home-upload-submit { grid-column: 1 / -1; }
.home-workbench .home-upload-field label { display: block; margin-bottom: 6px; color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); font-weight: 650; }
.home-workbench .home-upload-submit { min-width: 0; }
.home-workbench .home-list-compact { gap: 0; }
.home-page.home-workbench .home-list-compact li { display: flex; justify-content: space-between; align-items: center; gap: var(--home-gap); padding: calc(var(--ds-control-py, 7px) + 2px) 0; border: 0; border-bottom: 1px solid var(--home-line); border-radius: 0; background: transparent; box-shadow: none; color: var(--home-muted); font-size: calc(12px * var(--t-font-scale, 1)); }
.home-workbench .home-list-compact li:last-child { border: 0; }
.home-workbench .home-list-compact strong { color: var(--home-ink); font-size: calc(13px * var(--t-font-scale, 1)); font-weight: 650; }
.home-workbench .home-activity-brief__latest { padding-top: 12px; border-top: 1px solid var(--home-line); }

.home-workbench .home-services-groups { display: grid; gap: 0; border: 1px solid var(--home-line); border-radius: var(--ds-radius-card, 12px); background: var(--home-surface); box-shadow: var(--ds-shadow, none); }
.home-page.home-workbench .home-service-group { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--home-gap); padding: var(--home-pad); border: 0; border-bottom: 1px solid var(--home-line); border-radius: 0; background: transparent; }
.home-workbench .home-service-group:last-child { border-bottom: 0; }
.home-workbench .home-service-group__head h3 { margin: 2px 0 0; color: var(--home-ink); font-size: calc(13px * var(--t-font-scale, 1)); font-weight: var(--ds-heading-weight, 700); letter-spacing: var(--ds-heading-tracking, normal); line-height: 1.5; }
.home-workbench .home-service-group__head p { max-width: 28ch; margin: 7px 0 0; color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 1.7; }
.home-workbench .home-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--home-gap) * .5) calc(var(--home-gap) * .75); align-items: start; }
.home-page.home-workbench .home-service-item { display: flex; align-items: flex-start; gap: calc(var(--home-gap) * .6); min-width: 0; padding: calc(var(--home-pad) * .5); border: 1px solid transparent; border-radius: var(--ds-radius-control, 9px); background: transparent; color: var(--home-ink); box-shadow: none; text-decoration: none; }
.home-workbench .home-service-item__icon { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--ds-radius-control, 8px); background: var(--home-soft); color: var(--home-accent); font-size: calc(15px * var(--t-font-scale, 1)); }
.home-workbench .home-service-item__body { display: grid; gap: 5px; min-width: 0; }
.home-workbench .home-service-item__title { font-size: calc(11px * var(--t-font-scale, 1)); font-weight: 700; line-height: 1.5; }
.home-workbench .home-service-item__desc { color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 1.6; overflow-wrap: anywhere; }
.home-page.home-workbench .home-service-item:hover,
.home-page.home-workbench .home-quick-card:hover { transform: none; border-color: var(--home-line); background: var(--home-soft); box-shadow: none; }

.home-workbench .home-notify-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--home-gap); }
.home-workbench .home-feed-list { gap: 0; }
.home-page.home-workbench .home-feed-list > li > a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--home-gap); padding: calc(var(--ds-control-py, 8px) + 3px) 0; border: 0; border-bottom: 1px solid var(--home-line); border-radius: 0; background: transparent; color: var(--home-ink); box-shadow: none; text-decoration: none; }
.home-workbench .home-feed-list > li:last-child > a { border-bottom: 0; }
.home-workbench .home-feed-list__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--ds-radius-control, 8px); background: var(--home-soft); color: var(--home-muted); }
.home-workbench .home-feed-list__body { display: grid; gap: 5px; min-width: 0; }
.home-workbench .home-feed-list__title { color: var(--home-ink); font-size: calc(12px * var(--t-font-scale, 1)); font-weight: 650; line-height: 1.55; }
.home-workbench .home-feed-list__summary,
.home-workbench .home-feed-list__meta { color: var(--home-muted); font-size: calc(11px * var(--t-font-scale, 1)); line-height: 1.6; overflow-wrap: anywhere; }
.home-workbench .home-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.home-workbench .home-dashboard-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--home-gap) * .75); }
.home-page.home-workbench .home-dashboard-item { padding: var(--home-pad); border: 1px solid var(--home-line); border-radius: var(--ds-radius-card, 10px); background: var(--home-surface); box-shadow: var(--ds-shadow, none); }
.home-workbench .home-dashboard-item span { display: block; color: var(--home-muted); font-size: calc(11px * var(--t-font-scale, 1)); line-height: 1.5; }
.home-workbench .home-dashboard-item strong { display: block; margin-top: 8px; color: var(--home-ink); font-size: calc(22px * var(--t-font-scale, 1)); font-weight: 700; line-height: 1.2; }

.home-workbench .home-news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--home-gap); }
.home-page.home-workbench .home-news-item { padding: var(--home-pad); border: 1px solid var(--home-line); border-radius: var(--ds-radius-card, 12px); background: var(--home-surface); box-shadow: var(--ds-shadow, none); }
.home-workbench .home-news-item__top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.home-workbench .home-news-item h3 { margin: 0; color: var(--home-ink); font-size: calc(15px * var(--t-font-scale, 1)); font-weight: var(--ds-heading-weight, 700); letter-spacing: var(--ds-heading-tracking, -.02em); line-height: 1.6; overflow-wrap: anywhere; }
.home-workbench .home-news-item h3 a { color: inherit; text-decoration: none; }
.home-workbench .home-news-item h3 a:hover { color: var(--home-accent); }
.home-workbench .home-news-item__meta { margin: 9px 0 0; color: var(--home-muted); font-size: calc(10px * var(--t-font-scale, 1)); line-height: 1.5; }
.home-workbench .home-news-item__body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 12px 0 0; color: var(--home-muted); font-size: calc(12px * var(--t-font-scale, 1)); line-height: 1.7; overflow-wrap: anywhere; }

.home-page.home-workbench .btn { border-radius: var(--ds-radius-control, 8px); box-shadow: none; font-size: calc(12px * var(--t-font-scale, 1)); font-weight: 650; transform: none; transition: background-color .15s ease, border-color .15s ease; }
.home-page.home-workbench .home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--ds-control-h, 36px); padding: var(--ds-control-py, 7px) var(--ds-control-px, 12px); line-height: 1.3; }
.home-page.home-workbench .btn-primary,
.home-page.home-workbench .home-btn--primary { border-color: var(--ds-primary); background: var(--ds-primary); color: var(--ds-on-primary, #fff); box-shadow: none; }
.home-page.home-workbench .btn-primary:hover:not(:disabled),
.home-page.home-workbench .home-btn--primary:hover:not(:disabled) { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary, #fff); }
.home-page.home-workbench .badge { padding: 5px 7px; border: 0 !important; border-radius: min(5px, var(--ds-radius-control, 5px)); background: var(--home-soft) !important; color: var(--home-muted) !important; font-size: calc(9px * var(--t-font-scale, 1)); font-weight: 650; line-height: 1.3; white-space: normal; }
.home-page.home-workbench .badge.text-bg-success { background: var(--home-accent-soft) !important; color: var(--home-accent) !important; }
.home-workbench :is(a, button, input, select):focus-visible { outline: 2px solid var(--home-accent); outline-offset: 3px; }
.home-workbench .home-launchpad__link:focus-visible { outline-offset: 1px; }

/* Content remains visible while the existing reveal observer initializes. */
html.home-js .home-workbench .home-reveal,
.home-workbench .home-reveal { opacity: 1; transform: none; transition: none; }

@media (max-width: 1199.98px) {
  .home-workbench .home-shell { padding-inline: min(16px, var(--t-content-pad-x, 16px)); }
  .home-page.home-workbench .home-hero__surface { gap: 0 var(--home-gap); }
  .home-workbench .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page.home-workbench .home-service-group { grid-template-columns: 150px minmax(0, 1fr); }
  .home-workbench .home-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .home-workbench .home-workspace__grid { grid-template-columns: minmax(0, 1fr); }
  .home-workbench .home-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .home-workbench .home-quick-grid { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
  .home-workbench .home-kpi__hint { max-width: 16ch; }
}

@media (max-width: 767.98px) {
  .home-page.home-workbench { --home-pad: min(16px, var(--ds-panel-pad, 14px)); padding: var(--home-gap) 0 calc(var(--home-gap) * 2); }
  .home-workbench .home-shell { padding-inline: min(10px, var(--t-content-pad-x, 10px)); }
  .home-workbench .home-stack { gap: calc(var(--home-gap) * 1.25); }
  .home-page.home-workbench .home-hero__surface { grid-template-columns: minmax(0, 1fr); padding: var(--home-pad) var(--home-pad) 0; }
  .home-workbench .home-hero__copy { padding: 0 0 var(--home-pad); gap: var(--home-gap); }
  .home-page.home-workbench .home-hero__title { font-size: calc(34px * var(--t-font-scale, 1)); }
  .home-workbench .home-kicker { font-size: calc(10px * var(--t-font-scale, 1)); margin-bottom: var(--home-gap); }
  .home-workbench .home-hero__subtitle { font-size: calc(13px * var(--t-font-scale, 1)); }
  .home-workbench .home-launchpad { padding: calc(var(--home-pad) * .75) calc(var(--home-pad) * .75) 0; }
  .home-workbench .home-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--home-gap); }
  .home-page.home-workbench .home-kpi { padding-inline: var(--home-pad); }
  .home-page.home-workbench .home-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .home-workbench .home-kpi__hint { max-width: none; }
  .home-workbench .home-kpi__value { font-size: calc(21px * var(--t-font-scale, 1)); }
  .home-workbench .home-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(10px, var(--home-gap)); }
  .home-workbench .home-quick-card__desc { font-size: calc(11px * var(--t-font-scale, 1)); }
  .home-workbench .home-side-stack,
  .home-workbench .home-notify-grid,
  .home-workbench .home-news-list { grid-template-columns: minmax(0, 1fr); }
  .home-page.home-workbench .home-service-group { grid-template-columns: minmax(0, 1fr); gap: var(--home-gap); }
  .home-workbench .home-service-group__head p { max-width: none; }
  .home-workbench .home-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-workbench .home-module__head { flex-wrap: wrap; gap: 6px var(--home-gap); margin-bottom: var(--home-gap); }
  .home-workbench .home-module__head p { margin: 0; }
  .home-workbench .home-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .home-workbench .home-shell { padding-inline: min(8px, var(--t-content-pad-x, 8px)); }
  .home-page.home-workbench .home-hero__title { font-size: calc(31px * var(--t-font-scale, 1)); }
  .home-page.home-workbench .home-hero__actions .home-btn { padding-inline: min(12px, var(--ds-control-px, 12px)); }
  .home-page.home-workbench .home-quick-card { padding: min(12px, var(--home-pad)); gap: 8px; }
  .home-workbench .home-quick-card__icon { width: 26px; height: 26px; font-size: calc(13px * var(--t-font-scale, 1)); }
  .home-workbench .home-quick-card__desc { font-size: calc(10px * var(--t-font-scale, 1)); }
  .home-workbench .home-service-grid { grid-template-columns: minmax(0, 1fr); }
  .home-workbench .home-service-item__desc { font-size: calc(11px * var(--t-font-scale, 1)); }
  .home-workbench .home-service-item__title { font-size: calc(12px * var(--t-font-scale, 1)); }
  .home-workbench .home-file-item__name { white-space: normal; overflow-wrap: anywhere; }
  .home-workbench .home-upload-form__controls.has-pin { grid-template-columns: minmax(0, 1fr); }
  .home-workbench .home-kpi__icon { width: 26px; height: 26px; font-size: calc(12px * var(--t-font-scale, 1)); }
  .home-page.home-workbench .home-kpi { gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-workbench *, .home-workbench *::before, .home-workbench *::after { transition: none !important; animation: none !important; }
}

@media (display-mode: standalone) {
  .home-page.home-workbench { padding-bottom: calc(var(--home-gap) * 2 + env(safe-area-inset-bottom)); }
  .home-workbench .home-shell { padding-left: max(min(10px, var(--t-content-pad-x, 10px)), env(safe-area-inset-left)); padding-right: max(min(10px, var(--t-content-pad-x, 10px)), env(safe-area-inset-right)); }
}

/* === source: public/css/ui-news-notify.css === */
/* Notifications (views/notifications.php): content first, shared page scroll. News: ui-news.css. */

.cd-content-surface--notifications {
  min-width: 0;
  max-width: 1120px;
  margin-inline: auto;
}

.cd-content-surface--notifications .notify-panel {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-body-bg);
  box-shadow: none;
  transform: none;
}

/* Notification center (views/notifications.php). */

.notify-hub {
  display: grid;
  gap: 1.25rem;
  --notify-tone-chat: var(--ds-accent);
  --notify-tone-calendar: #0f8a6c;
  --notify-tone-news: #b76a0a;
  --notify-tone-delivery: #8b5cf6;
}

html[data-bs-theme="dark"] .notify-hub {
  --notify-tone-calendar: #3ccfa5;
  --notify-tone-news: #f0a64a;
  --notify-tone-delivery: #b69bff;
}

.notify-hub > *,
.notify-hub__layout > *,
.notify-hub__hero > * {
  min-width: 0;
}

.notify-hub__hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow);
}

.notify-hub__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.notify-hub__back {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-control);
  color: var(--ds-muted);
  background: var(--ds-control-bg);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.notify-hub__back:hover {
  color: var(--ds-accent);
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.notify-hub__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ds-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notify-hub__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

.notify-hub__title-row h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: var(--ds-heading-weight);
  letter-spacing: var(--ds-heading-tracking);
  line-height: 1.15;
}

.notify-hub__total,
.notify-section-heading__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.6rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.notify-hub__total {
  color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.notify-hub__seen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  color: var(--ds-muted);
  font-size: 0.8rem;
}

.notify-hub__mark-seen {
  margin: 0;
}

.notify-hub__mark-seen .btn,
.notify-settings-panel__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--ds-control-h);
  padding: var(--ds-control-py) calc(var(--ds-control-px) * 1.4);
  border: var(--ds-control-border) solid var(--ds-line);
  border-radius: var(--ds-radius-control);
  color: var(--ds-ink);
  background: var(--ds-control-bg);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: normal;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.notify-hub__mark-seen .btn:hover,
.notify-settings-panel__save:hover {
  color: var(--ds-accent);
  border-color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.notify-hub__channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ds-gap);
}

.notify-channel-card {
  --notify-tone: var(--notify-tone-chat);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 64px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  color: var(--ds-ink);
  background: var(--ds-surface);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}

.notify-channel-card--chat { --notify-tone: var(--notify-tone-chat); }
.notify-channel-card--calendar { --notify-tone: var(--notify-tone-calendar); }
.notify-channel-card--news { --notify-tone: var(--notify-tone-news); }
.notify-channel-card--for-you { --notify-tone: var(--notify-tone-delivery); }

.notify-channel-card:hover {
  color: var(--ds-ink);
  border-color: var(--notify-tone);
}

.notify-channel-card__icon,
.notify-feed-item__icon,
.notify-settings-panel__heading > span,
.notify-preference-row__icon,
.notify-empty-state__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--ds-radius-control);
  color: var(--notify-tone, var(--ds-accent));
  background: color-mix(in srgb, var(--notify-tone, var(--ds-accent)) 14%, var(--ds-surface-solid));
  font-size: 1.05rem;
}

.notify-channel-card__copy {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.notify-channel-card__copy > span {
  font-weight: 600;
  font-size: 0.92rem;
}

.notify-channel-card__copy > small {
  color: var(--ds-muted);
  font-size: 0.76rem;
}

.notify-channel-card > strong {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.notify-hub__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  align-items: start;
  gap: 1.25rem;
}

.cd-content-surface--notifications .notify-panel {
  padding: clamp(14px, 2vw, 22px);
}

.notify-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ds-line);
}

.notify-section-heading__eyebrow {
  color: var(--ds-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.notify-section-heading h2,
.notify-settings-panel__heading h2 {
  margin: 0.15rem 0 0;
  font-size: 1.1rem;
  font-weight: var(--ds-heading-weight);
  letter-spacing: var(--ds-heading-tracking);
}

.notify-section-heading__count {
  color: var(--ds-muted);
  background: var(--ds-soft);
}

.cd-content-surface--notifications .notify-feed-list {
  display: grid;
  max-height: none;
  overflow: visible;
}

html[data-bs-theme] .cd-content-surface--notifications .notify-feed-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.85rem;
  padding: 1rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
  overflow-wrap: anywhere;
}

html[data-bs-theme] .cd-content-surface--notifications .notify-feed-item + .notify-feed-item {
  border-top: 1px solid var(--ds-line);
}

.notify-feed-item__icon.notify-kind-chat { --notify-tone: var(--notify-tone-chat); }
.notify-feed-item__icon.notify-kind-calendar { --notify-tone: var(--notify-tone-calendar); }
.notify-feed-item__icon.notify-kind-news { --notify-tone: var(--notify-tone-news); }
.notify-feed-item__icon.notify-kind-delivery { --notify-tone: var(--notify-tone-delivery); }

/* "Для вас" (delivery connector) sits above the feed; opening is a POST form. */
.notify-hub__main { display: grid; gap: 1.25rem; min-width: 0; }
.notify-for-you { scroll-margin-top: 80px; }
button.notify-feed-item__open { border: 0; background: transparent; cursor: pointer; }

.notify-feed-item__main {
  min-width: 0;
}

.notify-feed-item__meta,
.notify-feed-item__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.notify-feed-item__footer {
  margin-top: 0.5rem;
  color: var(--ds-muted);
  font-size: 0.78rem;
}

.notify-feed-item__footer > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.notify-feed-item__footer > span + time::before {
  content: "·";
  margin-right: 0.5rem;
}

.notify-feed-item__type {
  color: var(--ds-muted);
  font-size: 0.75rem;
}

.notify-feed-item__new {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ds-accent);
  font-size: 0.75rem;
  font-weight: 650;
}

.notify-feed-item__new::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.notify-feed-title {
  margin: 0.45rem 0 0.3rem;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
}

.notify-feed-title a {
  color: inherit;
  text-decoration: none;
}

.notify-feed-title a:hover {
  color: var(--ds-accent);
}

.notify-feed-body {
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.notify-feed-body:empty {
  display: none;
}

.notify-feed-item__open {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ds-radius-control);
  color: var(--ds-muted);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}

.notify-feed-item__open:hover {
  color: var(--ds-accent);
  background: var(--ds-accent-soft);
}

.notify-kind-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 0.4rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
}

.notify-empty-state {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 2rem 0.25rem 0.75rem;
  color: var(--ds-muted);
}

.notify-empty-state strong {
  display: block;
  color: var(--ds-ink);
  font-weight: 600;
}

.notify-settings-panel__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ds-line);
}

.notify-settings-panel__heading p {
  margin: 0.1rem 0 0;
  color: var(--ds-muted);
  font-size: 0.8rem;
}

.cd-content-surface--notifications .notify-preference-row.form-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 0;
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ds-line);
}

.notify-preference-row__icon {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

.notify-preference-row__copy {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.notify-preference-row__copy label {
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.notify-preference-row__copy small {
  color: var(--ds-muted);
  font-size: 0.76rem;
}

.cd-content-surface--notifications .notify-preference-row .form-check-input {
  float: none;
  margin: 0;
  width: 2.4em;
  height: 1.3em;
  cursor: pointer;
}

.notify-settings-panel__save {
  width: 100%;
  margin-top: 1rem;
}

.notify-permissions {
  margin-top: 1.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ds-line);
}

.notify-permissions > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.notify-permissions > summary::-webkit-details-marker {
  display: none;
}

.notify-permissions > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.notify-permissions > summary > .bi-chevron-down {
  color: var(--ds-muted);
  transition: transform .2s ease;
}

.notify-permissions[open] > summary > .bi-chevron-down {
  transform: rotate(180deg);
}

.notify-permissions__body {
  display: grid;
  gap: 1rem;
  padding-top: 0.75rem;
}

.notify-permissions__actions {
  display: grid;
  gap: 0.5rem;
}

.notify-permissions__actions .btn {
  min-height: 40px;
  white-space: normal;
}

.notify-permissions__status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.notify-permissions__status-head h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.notify-permissions__status-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.notify-permissions__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  color: var(--ds-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.notify-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ds-line);
  font-size: 0.84rem;
}

.notify-status-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.notify-status-row:last-child {
  border-bottom: 0;
}

button,
summary):focus-visible,
.cd-content-surface--notifications :is(a,
button,
summary,
input):focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 3px;
}

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

@media (max-width: 575.98px) {
  

  

  

  .cd-content-surface--notifications .notify-panel {
    padding: 1rem !important;
  }

  

  

  

  

  .notify-hub__mark-seen,
  .notify-hub__mark-seen .btn {
    width: 100%;
    min-height: 44px;
  }

  .notify-hub__channels {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  html[data-bs-theme] .cd-content-surface--notifications .notify-feed-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notify-feed-item__open {
    display: none;
  }
}

/* === source: public/css/ui-news.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * News (views/news.php + views/news/item.php) and news administration
 * (views/admin_news.php); .nw-*. One reading column: filters, then entries,
 * newest first — an announcement with its text, a release with its points.
 * Colours, radii and shadows come from the canonical --ds-* theme tokens.
 */

.nw {
  --nw-surface: var(--ds-surface, #fff);
  --nw-soft: var(--ds-soft, #f1f3f8);
  --nw-ink: var(--ds-ink, #182337);
  --nw-muted: var(--ds-muted, #637086);
  --nw-line: var(--ds-line, rgba(24, 35, 55, .14));
  --nw-accent: var(--ds-accent, #4f46e5);
  --nw-accent-soft: var(--ds-accent-soft, #eef0ff);
  --nw-on-accent: var(--ds-on-primary, #fff);
  --nw-radius: var(--ds-radius-card, 14px);
  --nw-radius-sm: var(--ds-radius-control, 10px);
  --nw-shadow: var(--ds-shadow, 0 1px 2px rgba(15, 23, 42, .06));
  --nw-release: #b76a0a;
  --nw-bad: #d63a4a;
  display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 0 40px; color: var(--nw-ink);
}
html[data-bs-theme="dark"] .nw { --nw-release: #f0a64a; --nw-bad: #ff6b7a; }
.nw--admin { max-width: 1080px; }
.nw form { margin: 0; }

/* Header */
.nw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nw--admin .nw-head { justify-content: flex-start; }
html[data-bs-theme] .nw .nw-title { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.15; letter-spacing: var(--ds-heading-tracking, -.01em); color: var(--nw-ink); }
.nw-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: var(--nw-muted); text-decoration: none; }
.nw-back:hover { background: var(--nw-soft); color: var(--nw-ink); }
.nw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-inline { display: inline-flex; }
.nw-note { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 10px 14px; border-radius: var(--nw-radius-sm); background: var(--nw-soft); color: var(--nw-muted); font-size: .9rem; }

/* Buttons and links */
.nw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: 0 1rem;
  border: 1px solid var(--nw-line); border-radius: 999px; background: var(--nw-surface); color: var(--nw-ink);
  font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.nw-btn:hover { background: var(--nw-soft); color: var(--nw-ink); }
.nw-btn--primary { background: var(--nw-accent); border-color: var(--nw-accent); color: var(--nw-on-accent); }
.nw-btn--primary:hover { background: color-mix(in srgb, var(--nw-accent) 88%, #000); color: var(--nw-on-accent); }
.nw-btn.is-busy { opacity: .6; pointer-events: none; }
.nw-link { padding: 0; border: 0; background: none; color: var(--nw-muted); font-size: .8rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.nw-link:hover { color: var(--nw-accent); }
.nw-link--danger:hover { color: var(--nw-bad); }
.nw-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--nw-muted); text-decoration: none; cursor: pointer; }
.nw-icon:hover { background: var(--nw-soft); color: var(--nw-ink); }
.nw-icon--danger:hover { color: var(--nw-bad); }
.nw :is(.nw-btn, .nw-link, .nw-icon, .nw-filter, .nw-back):focus-visible { outline: 2px solid var(--nw-accent); outline-offset: 2px; }

/* Filters */
.nw-filters { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--nw-soft); align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.nw-filter { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: 0 .9rem; border-radius: 999px; color: var(--nw-muted); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nw-filter:hover { color: var(--nw-ink); }
.nw-filter.is-active { background: var(--nw-surface); color: var(--nw-ink); box-shadow: var(--nw-shadow); }
.nw-filter__count { color: var(--nw-muted); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Entries */
.nw-list { display: flex; flex-direction: column; gap: 12px; }
.nw-item { position: relative; padding: 18px 20px; border: 1px solid var(--nw-line); border-radius: var(--nw-radius); background: var(--nw-surface); box-shadow: var(--nw-shadow); scroll-margin-top: 80px; }
.nw-item:target { border-color: var(--nw-accent); box-shadow: 0 0 0 3px var(--nw-accent-soft); }
.nw-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; color: var(--nw-muted); font-size: .8rem; }
.nw-item__meta > * + *::before { content: "·"; margin-right: 10px; color: var(--nw-line); }
.nw-item__meta > .nw-pill + *::before { content: none; }
.nw-item__date { font-variant-numeric: tabular-nums; }
.nw-item__author { color: var(--nw-ink); font-weight: 600; }
.nw-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 .55rem; border-radius: 999px; background: var(--nw-accent-soft); color: var(--nw-accent); font-size: .72rem; font-weight: 700; }
.nw-pill--release { background: color-mix(in srgb, var(--nw-release) 14%, var(--nw-surface)); color: var(--nw-release); }
html[data-bs-theme] .nw .nw-item__title { margin: 8px 0 0; font-size: 1.1rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--nw-ink); overflow-wrap: anywhere; }
.nw-text { margin-top: 8px; color: var(--nw-ink); font-size: .95rem; line-height: 1.65; overflow-wrap: anywhere; }
.nw-points { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.nw-points li { position: relative; padding-left: 18px; color: var(--nw-ink); font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }
.nw-points li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--nw-release); opacity: .7; }
.nw-item__tools { display: flex; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--nw-line); }
.nw-more { display: flex; justify-content: center; }
.nw-empty { margin: 0; padding: 40px 16px; color: var(--nw-muted); text-align: center; font-size: .95rem; }

/* Administration */
.nw-admin { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.nw-admin__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nw-card { padding: 18px 20px; border: 1px solid var(--nw-line); border-radius: var(--nw-radius); background: var(--nw-surface); box-shadow: var(--nw-shadow); min-width: 0; }
html[data-bs-theme] .nw .nw-card__title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--nw-ink); }
.nw-card__meta { margin: -6px 0 12px; color: var(--nw-muted); font-size: .85rem; }
.nw-form { display: flex; flex-direction: column; gap: 12px; }
.nw-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.nw-field > span { color: var(--nw-muted); font-size: .8rem; font-weight: 600; }
.nw-form__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nw-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.nw-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.nw-row + .nw-row { border-top: 1px solid var(--nw-line); }
.nw-row.is-current .nw-row__main strong { color: var(--nw-accent); }
.nw-row__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nw-row__main strong { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-row__main span { color: var(--nw-muted); font-size: .75rem; }
.nw-row__tools { display: flex; gap: 2px; flex-shrink: 0; }
.nw-card .nw-empty { padding: 12px 0; text-align: left; }

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

@media (max-width: 575.98px) {
  .nw { padding-top: 8px; gap: 12px; }
  html[data-bs-theme] .nw .nw-title { font-size: 1.4rem; }
  .nw-head .nw-actions { width: 100%; }
  .nw-head .nw-actions > * { flex: 1 1 auto; }
  .nw-head .nw-actions .nw-btn { width: 100%; min-height: 44px; }
  .nw-filters { align-self: stretch; }
  .nw-filter { flex: 1 1 auto; justify-content: center; }
  .nw-item, .nw-card { padding: 16px; }
  .nw-icon { width: 40px; height: 40px; }
}

/* === source: public/css/ui-backgrounds.css === */
/**
 * Page backgrounds (UiDesign ui_bg): light and patterns over one base color,
 * --ds-bg, that the background tone (ui_bg_tone) chooses — «Однотонный» is
 * the base color alone.
 */

html[data-ui-bg],
html[data-ui-bg] body{
  background-color: var(--ds-bg);
}
html[data-ui-bg="mono"],
html[data-ui-bg="mono"] body{
  background-image: none;
}
html[data-ui-bg="aurora"],
html[data-ui-bg="aurora"] body{
  background-image:
    radial-gradient(1320px 860px at -10% -18%, rgba(var(--t-brand-warm-rgb), .3), transparent 58%),
    radial-gradient(1120px 820px at 108% -14%, rgba(var(--t-brand-cool-rgb), .26), transparent 62%),
    radial-gradient(980px 680px at 58% 116%, rgba(var(--t-accent-rgb), .16), transparent 64%),
    linear-gradient(140deg, rgba(var(--t-brand-ink-rgb), .16), transparent 42%);
}
html[data-ui-bg="grid"],
html[data-ui-bg="grid"] body{
  background-image:
    radial-gradient(1180px 780px at -6% 4%, rgba(var(--t-brand-warm-rgb), .22), transparent 58%),
    radial-gradient(920px 660px at 104% 6%, rgba(var(--t-brand-cool-rgb), .2), transparent 62%),
    linear-gradient(0deg, rgba(var(--t-accent-rgb), .05), rgba(var(--t-accent-rgb), .05)),
    repeating-linear-gradient(90deg, rgba(var(--bs-body-color-rgb), 0.04) 0, rgba(var(--bs-body-color-rgb), 0.04) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(0deg, rgba(var(--bs-body-color-rgb), 0.04) 0, rgba(var(--bs-body-color-rgb), 0.04) 1px, transparent 1px, transparent 28px);
}
html[data-ui-bg="plain"],
html[data-ui-bg="plain"] body{
  background-image:
    radial-gradient(760px 480px at 0% 0%, rgba(var(--t-brand-warm-rgb), .12), transparent 64%),
    radial-gradient(720px 480px at 100% 0%, rgba(var(--t-brand-cool-rgb), .11), transparent 66%);
}
html[data-ui-bg="mesh"],
html[data-ui-bg="mesh"] body{
  background-image:
    radial-gradient(1060px 720px at 4% 4%, rgba(var(--t-brand-warm-rgb), .26), transparent 64%),
    radial-gradient(980px 680px at 100% 6%, rgba(var(--t-brand-cool-rgb), .22), transparent 66%),
    radial-gradient(780px 580px at 48% 104%, rgba(var(--t-accent-rgb), .16), transparent 70%),
    radial-gradient(560px 420px at 74% 70%, rgba(var(--t-brand-cool-rgb), .12), transparent 70%),
    linear-gradient(140deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}
html[data-ui-bg="paper"],
html[data-ui-bg="paper"] body{
  background-image:
    linear-gradient(180deg, rgba(var(--t-accent-rgb),0.045), transparent 24%),
    repeating-linear-gradient(0deg, rgba(var(--bs-body-color-rgb),0.022) 0, rgba(var(--bs-body-color-rgb),0.022) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(var(--bs-body-color-rgb),0.014) 0, rgba(var(--bs-body-color-rgb),0.014) 1px, transparent 1px, transparent 18px);
}

/* === source: public/css/ui-presets-core.css === */
/**
 * Core presets used by quick themes (default / clear_opus / noir).
 * Loaded after inline head styles to keep the same cascade priority.
 */
.btn {
  background-image: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .18s ease, transform .18s ease;
}
.btn-primary {
  border-color: rgba(var(--t-accent-rgb), .58) !important;
  background-color: rgba(var(--t-accent-rgb), .96) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(var(--t-accent-rgb), .22);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  border-color: rgba(var(--t-accent-rgb), .76) !important;
  background-color: rgba(var(--t-accent-rgb), 1) !important;
  box-shadow: 0 12px 26px rgba(var(--t-accent-rgb), .28);
  transform: translateY(-1px);
}
html[data-ui-preset="default"] {
  --t-preset-surface-bg: rgba(var(--bs-body-bg-rgb), .94);
  --t-preset-surface-border: rgba(var(--bs-border-color-rgb), .62);
  --t-preset-hero-bg: rgba(var(--bs-body-bg-rgb), .96);
  --t-preset-field-bg: rgba(var(--bs-body-bg-rgb), .98);
  --t-preset-outline-bg: rgba(var(--bs-body-bg-rgb), .72);
  --t-preset-shadow: 0 10px 24px rgba(10,18,32,.08);
  --t-preset-shadow-hover: 0 16px 34px rgba(10,18,32,.12);
}
html[data-ui-preset="clear_opus"] {
  --t-preset-surface-bg: rgba(var(--bs-body-bg-rgb), .975);
  --t-preset-surface-border: rgba(var(--bs-border-color-rgb), .48);
  --t-preset-hero-bg: rgba(var(--bs-body-bg-rgb), .985);
  --t-preset-field-bg: rgba(var(--bs-body-bg-rgb), .995);
  --t-preset-outline-bg: rgba(var(--bs-body-bg-rgb), .7);
  --t-preset-shadow: 0 8px 22px rgba(10,18,32,.07);
  --t-preset-shadow-hover: 0 14px 30px rgba(10,18,32,.11);
}
html[data-ui-preset="noir"] {
  --t-preset-surface-bg: rgba(var(--bs-body-bg-rgb), .9);
  --t-preset-surface-border: rgba(var(--bs-border-color-rgb), .7);
  --t-preset-hero-bg: rgba(var(--bs-body-bg-rgb), .92);
  --t-preset-field-bg: rgba(var(--bs-body-bg-rgb), .95);
  --t-preset-outline-bg: rgba(var(--bs-body-bg-rgb), .82);
  --t-preset-shadow: 0 16px 36px rgba(0,0,0,.28);
  --t-preset-shadow-hover: 0 24px 44px rgba(0,0,0,.36);
}
html[data-ui-preset="default"][data-bs-theme="dark"],
html[data-ui-preset="clear_opus"][data-bs-theme="dark"] {
  --t-preset-surface-bg: rgba(var(--bs-body-bg-rgb), .9);
  --t-preset-surface-border: rgba(var(--bs-border-color-rgb), .64);
  --t-preset-hero-bg: rgba(var(--bs-body-bg-rgb), .92);
  --t-preset-field-bg: rgba(var(--bs-body-bg-rgb), .94);
  --t-preset-outline-bg: rgba(var(--bs-body-bg-rgb), .82);
  --t-preset-shadow: 0 14px 30px rgba(0,0,0,.24);
  --t-preset-shadow-hover: 0 22px 42px rgba(0,0,0,.32);
}
html[data-ui-preset="default"] .card,
html[data-ui-preset="default"] .dropdown-menu,
html[data-ui-preset="default"] .modal-content,
html[data-ui-preset="default"] .offcanvas,
html[data-ui-preset="clear_opus"] .card,
html[data-ui-preset="clear_opus"] .dropdown-menu,
html[data-ui-preset="clear_opus"] .modal-content,
html[data-ui-preset="clear_opus"] .offcanvas,
html[data-ui-preset="noir"] .card,
html[data-ui-preset="noir"] .dropdown-menu,
html[data-ui-preset="noir"] .modal-content,
html[data-ui-preset="noir"] .offcanvas {
  border-color: var(--t-preset-surface-border);
  background: var(--t-preset-surface-bg);
  box-shadow: var(--t-preset-shadow);
}
html[data-ui-preset="default"] .page-hero,
html[data-ui-preset="clear_opus"] .page-hero,
html[data-ui-preset="noir"] .page-hero {
  border-color: var(--t-preset-surface-border);
  background: var(--t-preset-hero-bg);
  box-shadow: var(--t-preset-shadow);
}
html[data-ui-preset="default"] .card:hover,
html[data-ui-preset="clear_opus"] .card:hover,
html[data-ui-preset="noir"] .card:hover {
  box-shadow: var(--t-preset-shadow-hover);
  border-color: rgba(var(--t-accent-rgb), .36);
}
html[data-ui-preset="default"] .form-control,
html[data-ui-preset="default"] .form-select,
html[data-ui-preset="default"] .input-group-text,
html[data-ui-preset="clear_opus"] .form-control,
html[data-ui-preset="clear_opus"] .form-select,
html[data-ui-preset="clear_opus"] .input-group-text,
html[data-ui-preset="noir"] .form-control,
html[data-ui-preset="noir"] .form-select,
html[data-ui-preset="noir"] .input-group-text {
  border-color: var(--t-preset-surface-border);
  background: var(--t-preset-field-bg);
  box-shadow: none;
}
html[data-ui-preset="default"] .form-control:focus,
html[data-ui-preset="default"] .form-select:focus,
html[data-ui-preset="clear_opus"] .form-control:focus,
html[data-ui-preset="clear_opus"] .form-select:focus,
html[data-ui-preset="noir"] .form-control:focus,
html[data-ui-preset="noir"] .form-select:focus {
  border-color: rgba(var(--t-accent-rgb), .56);
  box-shadow: 0 0 0 .2rem rgba(var(--t-accent-rgb), .16);
}
html[data-ui-preset="default"] .btn-outline-secondary,
html[data-ui-preset="clear_opus"] .btn-outline-secondary,
html[data-ui-preset="noir"] .btn-outline-secondary {
  border-color: var(--t-preset-surface-border);
  background: var(--t-preset-outline-bg);
  color: var(--bs-body-color);
}
html[data-ui-preset="default"] .btn-outline-secondary:hover,
html[data-ui-preset="clear_opus"] .btn-outline-secondary:hover,
html[data-ui-preset="noir"] .btn-outline-secondary:hover {
  border-color: rgba(var(--t-accent-rgb), .4);
  background: rgba(var(--t-accent-rgb), .12);
  color: var(--bs-body-color);
}
html[data-ui-preset="default"] .btn-outline-primary,
html[data-ui-preset="clear_opus"] .btn-outline-primary,
html[data-ui-preset="noir"] .btn-outline-primary {
  border-color: rgba(var(--t-accent-rgb), .5);
  color: rgb(var(--t-accent-rgb));
  background: transparent;
}
html[data-ui-preset="default"] .btn-outline-primary:hover,
html[data-ui-preset="clear_opus"] .btn-outline-primary:hover,
html[data-ui-preset="noir"] .btn-outline-primary:hover {
  border-color: rgba(var(--t-accent-rgb), .7);
  background: rgba(var(--t-accent-rgb), .12);
  color: rgb(var(--t-accent-rgb));
}
html[data-ui-preset="default"] .table,
html[data-ui-preset="clear_opus"] .table,
html[data-ui-preset="noir"] .table {
  --bs-table-hover-bg: rgba(var(--t-accent-rgb), .08);
  --bs-table-striped-bg: rgba(var(--bs-body-color-rgb), .03);
  --bs-table-border-color: var(--t-preset-surface-border);
}
html[data-ui-preset="clear_opus"] h1,
html[data-ui-preset="clear_opus"] h2,
html[data-ui-preset="clear_opus"] h3,
html[data-ui-preset="clear_opus"] h4 {
  letter-spacing: -.02em;
  font-weight: 720;
}
html[data-ui-preset="noir"] h1,
html[data-ui-preset="noir"] h2,
html[data-ui-preset="noir"] h3,
html[data-ui-preset="noir"] h4 {
  letter-spacing: -.012em;
  font-weight: 700;
}
html[data-ui-preset="default"] .card,
html[data-ui-preset="default"] .dropdown-menu,
html[data-ui-preset="default"] .modal-content,
html[data-ui-preset="default"] .offcanvas,
html[data-ui-preset="clear_opus"] .card,
html[data-ui-preset="clear_opus"] .dropdown-menu,
html[data-ui-preset="clear_opus"] .modal-content,
html[data-ui-preset="clear_opus"] .offcanvas,
html[data-ui-preset="noir"] .card,
html[data-ui-preset="noir"] .dropdown-menu,
html[data-ui-preset="noir"] .modal-content,
html[data-ui-preset="noir"] .offcanvas {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-ui-preset="clear_opus"] .page-hero::before {
  display: none;
}

/* === source: public/css/ui-overlays.css === */
/**
 * Overlay/ui utility styles extracted from head.php.
 * Includes context menu, modal layering hardening and compact-device perf blur limits.
 */

/* Context menu (Cloud right-click) */
.tsoy-ctx {
  position: fixed;
  z-index: 3500;
  min-width: 220px;
  width: min(300px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  max-height: min(82vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  contain: layout paint;
  border: 1px solid rgba(var(--bs-border-color-rgb), 0.7);
  border-radius: calc(var(--t-radius) + 6px);
  background: rgba(var(--bs-body-bg-rgb), 0.88);
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  transform-origin: top left;
  animation: tsoyCtxIn .14s ease-out;
  padding: .4rem;
  user-select: none;
}
@keyframes tsoyCtxIn{
  from{ opacity: 0; transform: translateY(4px) scale(.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
html[data-ui-glass="1"] .tsoy-ctx{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(var(--bs-body-bg-rgb), 0.74);
}
.tsoy-ctx .ctx-item{
  width: 100%;
  display:flex;
  align-items:center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: calc(var(--t-radius) + 2px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--bs-body-color);
  text-align:left;
  font-size: .92rem;
}
.tsoy-ctx .ctx-item > span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tsoy-ctx .ctx-item:hover{
  background: rgba(var(--bs-body-color-rgb), 0.05);
  border-color: rgba(var(--bs-border-color-rgb), 0.7);
}
.tsoy-ctx .ctx-item.danger:hover{
  background: rgba(220,53,69,.10);
  border-color: rgba(220,53,69,.25);
  color: var(--bs-danger);
}
.tsoy-ctx .ctx-sep{
  height:1px;
  background: rgba(var(--bs-border-color-rgb), 0.7);
  margin: .25rem .2rem;
}

/* Bootstrap modal hardening (fix "modal opens but nothing clickable") */
.modal { z-index: 2000; }
.modal-backdrop { z-index: 1990; }

/* Unified popup readability: never keep overlays too transparent over page text. */
html[data-ui-glass="1"] .modal-content,
html[data-ui-glass="1"] .offcanvas,
html[data-ui-glass="1"] .dropdown-menu{
  background-color: rgba(var(--bs-body-bg-rgb), 0.9);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

/* Perf mode for compact devices */
@media (max-width: 767.98px){
  .modal-content,
  .offcanvas,
  .dropdown-menu{
    background-color: rgba(var(--bs-body-bg-rgb), 0.97);
  }
  html[data-ui-glass="1"] .card,
  html[data-ui-glass="1"] .offcanvas,
  html[data-ui-glass="1"] .dropdown-menu,
  html[data-ui-glass="1"] .modal-content,
  html[data-ui-glass="1"] .global-chat-msg-menu{
    backdrop-filter: blur(12px) saturate(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
  }
}

/* Incoming call card (public/assets/js/app-shell.js, #appIncomingCallModal). */
.app-call-toast {
  position: fixed; z-index: 2600; top: 16px; right: 16px; width: min(380px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  border-radius: 20px; color: #f8fafc;
  background: linear-gradient(135deg, #111827, #1e1b4b);
  box-shadow: 0 20px 50px rgba(2, 6, 23, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .2s ease, transform .2s ease;
}
.app-call-toast[hidden] { display: none; }
.app-call-toast.is-open { opacity: 1; transform: none; }
.app-call-toast__ava {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; font-weight: 700;
  background: rgba(255, 255, 255, .12);
}
.app-call-toast__ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.app-call-toast__ava img[hidden], .app-call-toast__ava span[hidden] { display: none; }
.app-call-toast__ava::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e;
  animation: app-call-ring 1.6s ease-out infinite;
}
@keyframes app-call-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.app-call-toast__meta { flex: 1; min-width: 0; }
.app-call-toast__name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-call-toast__sub { font-size: .8rem; color: rgba(226, 232, 240, .75); }
.app-call-toast__actions { display: flex; gap: 10px; flex: none; }
.app-call-toast__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center;
  color: #fff; font-size: 1.15rem; cursor: pointer; transition: transform .12s ease, filter .15s ease;
}
.app-call-toast__btn:hover { filter: brightness(1.08); }
.app-call-toast__btn:active { transform: scale(.94); }
.app-call-toast__btn:disabled { opacity: .5; cursor: default; }
.app-call-toast__btn.is-decline { background: #ef4444; }
.app-call-toast__btn.is-accept { background: #22c55e; animation: app-call-shake 1.4s ease-in-out infinite; }
@keyframes app-call-shake { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-6deg); } }
@media (max-width: 767.98px) {
  .app-call-toast { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .app-call-toast, .app-call-toast__ava::after, .app-call-toast__btn.is-accept { animation: none; transition: none; }
}

/* === source: public/css/ui-pages.css === */
/* Page styles extracted from the dashboard view (contacts: ui-contacts.css since 5.57.0) */

/* Extracted from views/dashboard.php */
.dashboard-page{
  --db-page-line: var(--t-page-line, rgba(0,0,0,.085));
  --db-page-line-strong: var(--t-page-line-strong, rgba(0,0,0,.13));
  --db-page-soft: var(--t-page-soft, rgba(0,0,0,.04));
  --db-page-surface: var(--t-page-pane-bg, color-mix(in srgb, var(--bs-body-bg) 90%, rgb(var(--t-brand-cool-rgb, var(--t-accent-rgb))) 10%));
  --db-page-shadow: var(--t-page-shadow, 0 10px 28px rgba(9,15,24,.1));
  display: grid;
  gap: 1rem;
}
[data-bs-theme="dark"] .dashboard-page{
  --db-page-line: var(--t-page-line, rgba(255,255,255,.08));
  --db-page-line-strong: var(--t-page-line-strong, rgba(255,255,255,.12));
  --db-page-soft: var(--t-page-soft, rgba(255,255,255,.035));
  --db-page-surface: var(--t-page-pane-bg, color-mix(in srgb, var(--bs-body-bg) 90%, rgb(var(--t-brand-ink-rgb, var(--t-accent-rgb))) 10%));
  --db-page-shadow: var(--t-page-shadow, 0 14px 34px rgba(0,0,0,.28));
}
.dashboard-page .page-hero{
  border: 1px solid var(--db-page-line);
  border-radius: var(--bs-border-radius-lg);
  padding: .95rem 1rem;
  background:
    radial-gradient(820px 240px at 100% 0%, rgba(var(--t-accent-rgb), .08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--db-page-surface);
  box-shadow: var(--db-page-shadow);
}
.dashboard-page .page-actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}
.dashboard-page .page-actions > *{
  white-space: nowrap;
}
.dashboard-page,
.dashboard-page .page-hero,
.dashboard-page .page-actions,
.dashboard-page .card .card-body,
.dashboard-page .db-settings-panel,
.dashboard-page .db-nav-card .card-body,
.dashboard-page .db-nav-card .flex-fill,
.dashboard-page .db-activity-item .flex-fill{
  min-width: 0;
}
.dashboard-page .page-hero,
.dashboard-page .db-settings-panel,
.dashboard-page .db-stat-label,
.dashboard-page .db-stat-sub,
.dashboard-page .db-nav-card .text-secondary.small,
.dashboard-page .db-activity-item .text-secondary,
.dashboard-page .db-activity-item .small{
  overflow-wrap: anywhere;
}
.dashboard-page .page-actions .badge,
.dashboard-page .db-nav-card .badge{
  white-space: normal;
}
.dashboard-page .card{
  border-color: var(--db-page-line);
  background:
    linear-gradient(155deg, rgba(var(--t-brand-warm-rgb, var(--t-accent-rgb)), .12), rgba(var(--t-brand-cool-rgb, var(--t-accent-rgb)), .04) 46%, transparent 82%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--db-page-surface);
  box-shadow: var(--db-page-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-page .card:hover,
.dashboard-page .card:focus-within{
  border-color: var(--db-page-line-strong);
  box-shadow: 0 14px 28px rgba(9,15,24,.12);
  transform: translateY(-1px);
}
[data-bs-theme="dark"] .dashboard-page .card:hover,
[data-bs-theme="dark"] .dashboard-page .card:focus-within{
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.dashboard-page .card .card-body{
  position: relative;
}
.dashboard-page .card .btn:focus-visible,
.dashboard-page .card .form-select:focus-visible,
.dashboard-page .card .form-check-input:focus-visible{
  box-shadow: 0 0 0 .2rem rgba(var(--t-accent-rgb), .18);
}

.admin-logs-table{
  table-layout: fixed;
  min-width: 980px;
}
.admin-logs-table th,
.admin-logs-table td{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.admin-logs-table .admin-logs-col-date{
  width: 160px;
  white-space: nowrap;
}
.admin-logs-table .admin-logs-col-role{
  width: 90px;
}
.admin-logs-table .admin-logs-col-user{
  width: 160px;
}
.admin-logs-table .admin-logs-col-action{
  width: 140px;
}
.admin-logs-table .admin-logs-col-entity{
  width: 140px;
}
.admin-logs-table .admin-logs-col-ip{
  width: 160px;
  white-space: nowrap;
}
.admin-logs-table .admin-logs-col-meta{
  width: clamp(240px, 34vw, 420px);
}
.admin-logs-table .admin-logs-meta-cell{
  white-space: normal;
  line-height: 1.35;
}
.admin-logs-table .text-secondary.small{
  overflow-wrap: anywhere;
}
.au-shell .au-min-120{
  min-width: 120px;
}

.au-shell .au-app-mode-select{
  width: 120px;
  max-width: 100%;
}
.au-shell .au-pass-hint{
  display: inline-flex;
  align-items: center;
  padding: .14rem .4rem;
  border-radius: .35rem;
  border: 1px dashed rgba(var(--bs-border-color-rgb), .5);
  background: rgba(var(--bs-body-bg-rgb), .7);
  filter: blur(4px);
  cursor: pointer;
  transition: filter .2s ease, background-color .2s ease, border-color .2s ease;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.au-shell .au-pass-hint.is-revealed{
  filter: none;
}

.db-drop-table-col{
  width: 42px;
}
.db-confirm-input{
  flex: 1 1 240px;
  width: min(100%, 240px);
}
.db-confirm-input--wide{
  flex-basis: 280px;
  width: min(100%, 280px);
}
.vpn-attachment-thumb{
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex: 0 0 auto;
}
.vpn-subscription-calendar{
  max-height: 520px;
  overflow: auto;
}
.db-compact .card-body { padding: .65rem .85rem; }
.db-compact h2, .db-compact .h5 { font-size: .95rem; }
.db-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.db-compact .db-stat-value { font-size: 1.25rem; }
.db-stat-label { font-size: .75rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; }
.db-stat-sub { font-size: .78rem; color: var(--bs-secondary-color); line-height: 1.35; }
.db-activity-item { padding: .45rem 0; border-bottom: 1px solid var(--db-page-line); font-size: .82rem; }
.db-activity-item:last-child { border-bottom: none; }
.db-activity-item .flex-fill{ min-width: 0; }
.db-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.db-compact .db-icon-circle { width: 32px; height: 32px; font-size: .9rem; }
.db-icon-circle--sm { width: 28px; height: 28px; font-size: .7rem; }
.db-settings-panel {
  padding: 1rem;
  border: 1px solid var(--db-page-line);
  border-radius: var(--bs-border-radius-lg);
  background:
    radial-gradient(700px 220px at 100% 0%, rgba(var(--t-accent-rgb), .07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
    rgba(var(--bs-body-bg-rgb), .52);
  box-shadow: var(--db-page-shadow);
}
.db-nav-card .card-body{
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.db-nav-card .btn{
  align-self: flex-start;
}
.db-nav-card:hover{
  background: transparent;
}
.db-nav-card:hover .card-body{
  transform: translateY(-1px);
}
.db-nav-card .card-body{
  transition: transform .18s ease;
}
.db-nav-card .text-secondary.small{
  line-height: 1.35;
}
.db-nav-card .db-icon-circle{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
  .db-nav-card .badge{
    white-space: nowrap;
  }
.db-role-badge {
  font-size: .65rem;
  line-height: 1.1;
  white-space: nowrap;
}
.db-progress-thin {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
}
.db-progress-thin .progress-bar {
  min-width: 1px;
}
.db-disk-pct-0 { width: 0%; }
.db-disk-pct-1 { width: 1%; }
.db-disk-pct-2 { width: 2%; }
.db-disk-pct-3 { width: 3%; }
.db-disk-pct-4 { width: 4%; }
.db-disk-pct-5 { width: 5%; }
.db-disk-pct-6 { width: 6%; }
.db-disk-pct-7 { width: 7%; }
.db-disk-pct-8 { width: 8%; }
.db-disk-pct-9 { width: 9%; }
.db-disk-pct-10 { width: 10%; }
.db-disk-pct-11 { width: 11%; }
.db-disk-pct-12 { width: 12%; }
.db-disk-pct-13 { width: 13%; }
.db-disk-pct-14 { width: 14%; }
.db-disk-pct-15 { width: 15%; }
.db-disk-pct-16 { width: 16%; }
.db-disk-pct-17 { width: 17%; }
.db-disk-pct-18 { width: 18%; }
.db-disk-pct-19 { width: 19%; }
.db-disk-pct-20 { width: 20%; }
.db-disk-pct-21 { width: 21%; }
.db-disk-pct-22 { width: 22%; }
.db-disk-pct-23 { width: 23%; }
.db-disk-pct-24 { width: 24%; }
.db-disk-pct-25 { width: 25%; }
.db-disk-pct-26 { width: 26%; }
.db-disk-pct-27 { width: 27%; }
.db-disk-pct-28 { width: 28%; }
.db-disk-pct-29 { width: 29%; }
.db-disk-pct-30 { width: 30%; }
.db-disk-pct-31 { width: 31%; }
.db-disk-pct-32 { width: 32%; }
.db-disk-pct-33 { width: 33%; }
.db-disk-pct-34 { width: 34%; }
.db-disk-pct-35 { width: 35%; }
.db-disk-pct-36 { width: 36%; }
.db-disk-pct-37 { width: 37%; }
.db-disk-pct-38 { width: 38%; }
.db-disk-pct-39 { width: 39%; }
.db-disk-pct-40 { width: 40%; }
.db-disk-pct-41 { width: 41%; }
.db-disk-pct-42 { width: 42%; }
.db-disk-pct-43 { width: 43%; }
.db-disk-pct-44 { width: 44%; }
.db-disk-pct-45 { width: 45%; }
.db-disk-pct-46 { width: 46%; }
.db-disk-pct-47 { width: 47%; }
.db-disk-pct-48 { width: 48%; }
.db-disk-pct-49 { width: 49%; }
.db-disk-pct-50 { width: 50%; }
.db-disk-pct-51 { width: 51%; }
.db-disk-pct-52 { width: 52%; }
.db-disk-pct-53 { width: 53%; }
.db-disk-pct-54 { width: 54%; }
.db-disk-pct-55 { width: 55%; }
.db-disk-pct-56 { width: 56%; }
.db-disk-pct-57 { width: 57%; }
.db-disk-pct-58 { width: 58%; }
.db-disk-pct-59 { width: 59%; }
.db-disk-pct-60 { width: 60%; }
.db-disk-pct-61 { width: 61%; }
.db-disk-pct-62 { width: 62%; }
.db-disk-pct-63 { width: 63%; }
.db-disk-pct-64 { width: 64%; }
.db-disk-pct-65 { width: 65%; }
.db-disk-pct-66 { width: 66%; }
.db-disk-pct-67 { width: 67%; }
.db-disk-pct-68 { width: 68%; }
.db-disk-pct-69 { width: 69%; }
.db-disk-pct-70 { width: 70%; }
.db-disk-pct-71 { width: 71%; }
.db-disk-pct-72 { width: 72%; }
.db-disk-pct-73 { width: 73%; }
.db-disk-pct-74 { width: 74%; }
.db-disk-pct-75 { width: 75%; }
.db-disk-pct-76 { width: 76%; }
.db-disk-pct-77 { width: 77%; }
.db-disk-pct-78 { width: 78%; }
.db-disk-pct-79 { width: 79%; }
.db-disk-pct-80 { width: 80%; }
.db-disk-pct-81 { width: 81%; }
.db-disk-pct-82 { width: 82%; }
.db-disk-pct-83 { width: 83%; }
.db-disk-pct-84 { width: 84%; }
.db-disk-pct-85 { width: 85%; }
.db-disk-pct-86 { width: 86%; }
.db-disk-pct-87 { width: 87%; }
.db-disk-pct-88 { width: 88%; }
.db-disk-pct-89 { width: 89%; }
.db-disk-pct-90 { width: 90%; }
.db-disk-pct-91 { width: 91%; }
.db-disk-pct-92 { width: 92%; }
.db-disk-pct-93 { width: 93%; }
.db-disk-pct-94 { width: 94%; }
.db-disk-pct-95 { width: 95%; }
.db-disk-pct-96 { width: 96%; }
.db-disk-pct-97 { width: 97%; }
.db-disk-pct-98 { width: 98%; }
.db-disk-pct-99 { width: 99%; }
  .db-disk-pct-100 { width: 100%; }

@media (max-width: 767.98px){
  .au-shell .au-min-120,
  .au-shell .au-min-100{
    min-width: 0;
  }
  .au-shell .au-app-mode-select{
    width: 100%;
  }
  .au-shell .au-pass-hint{
    width: 100%;
  }

  .db-confirm-input,
  .db-confirm-input--wide{
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }
  .vpn-attachment-thumb{
    width: 48px;
    height: 48px;
  }
  .vpn-subscription-calendar{
    max-height: 44vh;
  }
}

  @media (max-width: 767.98px){
    .dashboard-page{
      gap: .85rem;
      overflow-x: hidden;
    }
    .dashboard-page .page-hero,
    .dashboard-page .db-settings-panel{
      padding: .85rem;
    }
    .dashboard-page .page-actions{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .45rem;
      justify-items: stretch;
      align-items: stretch;
    }
    .dashboard-page .page-actions > .btn,
    .dashboard-page .page-actions > form{
      width: 100%;
      min-width: 0;
      margin: 0;
    }
    .dashboard-page .page-actions > form .btn{
      width: 100%;
    }
    .dashboard-page .page-actions > .badge{
      width: fit-content;
      justify-self: start;
      align-self: center;
    }
    .dashboard-page .page-actions .btn{
      min-height: 44px;
      justify-content: center;
      white-space: normal;
    }
    .dashboard-page .card .card-body,
    .dashboard-page .db-settings-panel{
      padding: .85rem;
    }
    .admin-logs-table{
      min-width: 880px;
    }
    .admin-logs-table .admin-logs-col-meta{
      width: 300px;
    }
    .dashboard-page .db-stats-grid > [class*="col-"]{
      flex: 0 0 100%;
      max-width: 100%;
    }
    .dashboard-page .card:hover,
    .dashboard-page .card:focus-within,
    .dashboard-page .db-nav-card:hover .card-body{
      transform: none;
    }
    .dashboard-page .db-activity-item{
      align-items: flex-start !important;
      gap: .55rem;
      flex-wrap: wrap;
    }
    .dashboard-page .db-activity-item > .text-secondary.small.text-nowrap{
      width: 100%;
      white-space: normal !important;
    }
    .dashboard-page .db-nav-card .card-body{
      gap: .7rem;
    }
    .dashboard-page .text-nowrap{
      white-space: normal !important;
    }
    .dashboard-page .db-stat-value{
      font-size: 1.35rem;
    }
    .dashboard-page .db-icon-circle--sm{
      width: 26px;
      height: 26px;
      font-size: .68rem;
    }
    .dashboard-page .db-role-badge{
      font-size: .62rem;
    }
  }
  @media (max-width: 575.98px){
    .dashboard-page{
      gap: .75rem;
    }
    .dashboard-page .page-hero,
    .dashboard-page .db-settings-panel{
      padding: .75rem;
    }
    .dashboard-page .page-actions{
      grid-template-columns: 1fr;
    }

    .dashboard-page .db-stats-grid > [class*="col-"]{
      flex: 0 0 100%;
      max-width: 100%;
    }
    .dashboard-page .db-stats-grid .card-body{
      padding: .75rem;
    }
    .dashboard-page .db-stat-value{
      font-size: 1.18rem;
    }
    .dashboard-page .db-nav-card .card-body{
      flex-direction: column;
      align-items: stretch;
      gap: .65rem;
    }
    .dashboard-page .db-nav-card .btn{
      width: 100%;
      align-self: stretch;
    }
    .dashboard-page .db-nav-card .text-secondary.small{
      line-height: 1.4;
    }
    .dashboard-page .db-nav-card .h6{
      overflow-wrap: anywhere;
    }
    .admin-logs-table{
      min-width: 820px;
    }
    .admin-logs-table .admin-logs-col-date{
      width: 132px;
    }
    .admin-logs-table .admin-logs-col-user{
      width: 150px;
    }
    .admin-logs-table .admin-logs-col-action,
    .admin-logs-table .admin-logs-col-entity{
      width: 128px;
    }
    .admin-logs-table .admin-logs-col-ip{
      width: 140px;
    }
    .admin-logs-table .admin-logs-col-meta{
      width: 260px;
    }
    .dashboard-page .db-activity-item > .text-secondary.small.text-nowrap{
      font-size: .72rem;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .dashboard-page .card,
    .dashboard-page .db-nav-card .card-body,
    .dashboard-page .card:hover,
    .dashboard-page .card:focus-within,
    .dashboard-page .db-nav-card:hover .card-body,
  }

/* Extracted from views/user_page_view.php */
.upv-gallery-grid{
  --upv-min-col: 220px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--upv-min-col)), 1fr));
  gap: .65rem;
}
.upv-gallery-grid.is-single{ grid-template-columns: 1fr; }
.upv-gallery-card{
  border: 1px solid var(--bs-border-color);
  border-radius: .7rem;
  padding: .4rem;
  background: rgba(var(--bs-body-color-rgb), .02);
}
.upv-gallery-img{
  width: 100%;
  max-height: min(68vh, 560px);
  border-radius: .55rem;
  object-fit: contain;
  display: block;
  background: rgba(var(--bs-body-color-rgb), .04);
}
.upv-video-layout{
  --upv-video-panel-bg: rgba(var(--bs-body-color-rgb), .03);
  --upv-video-item-bg: rgba(var(--bs-body-color-rgb), .04);
  --upv-video-item-border: rgba(var(--bs-body-color-rgb), .16);
  --upv-video-item-active-bg: rgba(var(--bs-primary-rgb), .12);
  --upv-video-item-active-border: rgba(var(--bs-primary-rgb), .48);
  --upv-video-item-muted: rgba(var(--bs-body-color-rgb), .68);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .9rem;
  padding: .6rem;
  background: linear-gradient(160deg, var(--upv-video-panel-bg), transparent);
}
.upv-video-stage{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.upv-video-current{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.upv-video-current-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1 1 auto;
}
.upv-video-current-badge{
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), .15);
  color: rgb(var(--bs-primary-rgb));
  font-size: .8rem;
}
.upv-video-current-title{
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upv-video-current-sub{
  font-size: .75rem;
  color: rgba(var(--bs-body-color-rgb), .66);
}
.upv-video-current-actions{
  flex: 0 0 auto;
  display: inline-flex;
  gap: .35rem;
}
.upv-video-nav-btn{
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(var(--bs-body-color-rgb), .2);
  border-radius: .5rem;
  background: rgba(var(--bs-body-color-rgb), .03);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, opacity .18s ease;
}
.upv-video-nav-btn:hover:not(:disabled){
  border-color: rgba(var(--bs-primary-rgb), .42);
  background: rgba(var(--bs-primary-rgb), .11);
  color: rgb(var(--bs-primary-rgb));
}
.upv-video-nav-btn:disabled{
  opacity: .45;
  cursor: default;
}
.upv-video-host{
  border-radius: .75rem;
  overflow: hidden;
  background: #000;
}
.upv-video-host video{
  width: 100%;
  max-height: min(72vh, 540px);
  display: block;
}
.upv-video-playlist{
  min-width: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: .8rem;
  background: rgba(var(--bs-body-color-rgb), .03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.upv-video-playlist-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .65rem;
  border-bottom: 1px solid rgba(var(--bs-body-color-rgb), .12);
}
.upv-video-playlist-head-main{
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
}
.upv-video-playlist-head strong{
  font-size: .95rem;
}
.upv-video-autonext{
  border: 1px solid rgba(var(--bs-body-color-rgb), .2);
  border-radius: .45rem;
  background: rgba(var(--bs-body-color-rgb), .04);
  color: inherit;
  font-size: .74rem;
  padding: .18rem .4rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.upv-video-autonext i{ font-size: .78rem; }
.upv-video-autonext:hover{
  border-color: rgba(var(--bs-primary-rgb), .42);
  background: rgba(var(--bs-primary-rgb), .11);
}
.upv-video-autonext.is-on{
  border-color: rgba(var(--bs-primary-rgb), .5);
  background: rgba(var(--bs-primary-rgb), .13);
  color: rgb(var(--bs-primary-rgb));
}
.upv-video-playlist-list{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: min(72vh, 540px);
  overflow: auto;
  padding: .5rem;
}
.upv-video-item{
  border: 1px solid var(--upv-video-item-border);
  border-radius: .7rem;
  background: var(--upv-video-item-bg);
  color: inherit;
  text-align: left;
  padding: .5rem .55rem;
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.upv-video-item:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--bs-primary-rgb), .35);
  background: rgba(var(--bs-primary-rgb), .07);
}
.upv-video-item:focus-visible{
  outline: 0;
  border-color: rgba(var(--bs-primary-rgb), .62);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22);
}
.upv-video-item.is-active{
  background: var(--upv-video-item-active-bg);
  border-color: var(--upv-video-item-active-border);
}
.upv-video-item-index{
  font-size: .8rem;
  font-weight: 700;
  color: var(--upv-video-item-muted);
  text-align: center;
}
.upv-video-item.is-active .upv-video-item-index{
  color: rgb(var(--bs-primary-rgb));
}
.upv-video-item-meta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.upv-video-item-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.upv-video-item-sub{
  font-size: .75rem;
  color: var(--upv-video-item-muted);
}
.upv-video-item-resume{
  font-size: .72rem;
  color: rgba(var(--bs-primary-rgb), .78);
}
.upv-video-item.is-seen .upv-video-item-resume{
  color: rgba(var(--bs-success-rgb), .88);
}
.upv-video-item-progress{
  width: 100%;
  height: .2rem;
  border-radius: 999px;
  background: rgba(var(--bs-body-color-rgb), .14);
  overflow: hidden;
  margin-top: .12rem;
}
.upv-video-item-progress-fill{
  display: block;
  width: 0%;
  height: 100%;
  background: rgba(var(--bs-primary-rgb), .78);
  transition: width .22s linear, background-color .2s ease;
}
.upv-video-item.is-seen .upv-video-item-progress-fill{
  background: rgba(var(--bs-success-rgb), .88);
}
.upv-video-item-play{
  color: rgba(var(--bs-body-color-rgb), .7);
}
.upv-video-item.is-active .upv-video-item-play{
  color: rgb(var(--bs-primary-rgb));
}
.upv-video-item.is-playing .upv-video-item-play{
  animation: upv-video-pulse 1.2s ease-in-out infinite;
}
@keyframes upv-video-pulse{
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.12); opacity: 1; }
}
@media (min-width: 992px){
  .upv-video-layout{
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    align-items: start;
  }
}
@media (max-width: 575.98px){
  .upv-gallery-grid{ --upv-min-col: 160px; }
  .upv-gallery-img{ max-height: min(52vh, 360px); }
  .upv-video-layout{
    padding: .5rem;
    gap: .55rem;
  }
  .upv-video-playlist-head{
    padding: .5rem .55rem;
  }
  .upv-video-playlist-list{
    max-height: min(46vh, 300px);
    padding: .45rem;
  }
  .upv-video-item{
    padding: .45rem .5rem;
    gap: .42rem;
  }
  .upv-video-nav-btn{
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* Extracted from views/my_pages.php */
.page-builder-modern .pb-card{ border-radius: var(--bs-border-radius); }
  /* block-card via .t-section in design-system.css */
  .page-builder-modern .pb-block-card{
    padding:.7rem;
  }
  .page-builder-modern .pb-block-toolbar .btn{ border-radius:999px; }
  /* selected-files via .t-upload-zone in design-system.css */
  .page-builder-modern .pb-selected-files{
    display:flex; flex-wrap:wrap; gap:.35rem;
    min-height: 46px;
    padding:.45rem;
  }
  .page-builder-modern .pb-selected-files.empty{
    color: var(--bs-secondary-color);
    align-items:center;
    font-size:.85rem;
  }
  /* file-pill via .t-status-pill in design-system.css */
  .page-builder-modern .pb-file-pill{
    max-width:100%;
  }
  .page-builder-modern .pb-file-pill .txt{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .page-builder-modern .pb-block-type-badge{
    border-radius:999px;
    padding:.22rem .6rem;
    font-size:.75rem;
  }
  /* table-editor-wrap via .t-upload-zone in design-system.css */
  .page-builder-modern .pb-table-editor-wrap{
    padding:.55rem;
  }
  .page-builder-modern .pb-table-editor-grid .form-control{
    min-width: 120px;
    font-size:.85rem;
  }
  .page-builder-modern .pb-table-meta{
    font-size:.8rem;
    color: var(--bs-secondary-color);
  }
  @media (max-width: 767.98px){
    .page-builder-modern .pb-actions-stack{ width:100%; }
    .page-builder-modern .pb-actions-stack .btn{ flex:1 1 calc(50% - .25rem); }
  }

/* Shared helpers for cleaned low-volume pages */
.upv-prewrap{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.shortener-original-url{
  max-width: 250px;
  overflow-wrap: anywhere;
}
.shortener-qr-canvas{
  max-width: 100%;
  height: auto;
  display: block;
}
.shortener-stat-ip{
  max-width: 120px;
  overflow-wrap: anywhere;
}
.shortener-stat-ua{
  max-width: 200px;
  overflow-wrap: anywhere;
}
.pm-progress-track{
  min-height: .75rem;
}
.pm-password-strength-track{
  height: 6px;
}
.pm-progress-fill,
.pm-password-strength-fill{
  width: 0;
}
.admin-chat-message-list{
  max-height: 70vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.admin-chat-message-body{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.admin-policies-col-item{
  min-width: 220px;
}
.ui-avatar-thumb{
  object-fit: cover;
  flex: 0 0 auto;
}
.ui-avatar-thumb--72{
  width: 72px;
  height: 72px;
}
.ui-avatar-thumb--84{
  width: 84px;
  height: 84px;
}
.ui-avatar-fallback{
  font-size: 28px;
}
.pb-block-type-select{
  width: auto;
  max-width: 100%;
}
@media (max-width: 767.98px){
  .admin-policies-col-item{
    min-width: 160px;
  }
  .shortener-original-url{
    max-width: 100%;
  }
}
@media (max-width: 575.98px){
  .pb-block-type-select{
    width: 100%;
  }
  .shortener-stat-ip{
    max-width: 96px;
  }
  .shortener-stat-ua{
    max-width: 160px;
  }
}

/* Breadcrumb trails (page headers, SkyBox, FileHub): calm links, no underline. */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ds-muted, var(--bs-secondary-color));
  --bs-breadcrumb-item-active-color: var(--ds-muted, var(--bs-secondary-color));
}

.breadcrumb-item,
.breadcrumb-item a {
  color: var(--ds-muted, var(--bs-secondary-color));
}

.breadcrumb-item a {
  text-decoration: none;
  transition: color .15s ease;
}

.breadcrumb-item:last-child a {
  color: var(--ds-ink, var(--bs-body-color));
  font-weight: 600;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
  color: var(--ds-accent, var(--bs-link-color));
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Shared page header (views/partials/page_top.php). */
.page-heading {
  margin-bottom: 1rem;
}

.page-heading .breadcrumb {
  font-size: .8rem;
  flex-wrap: wrap;
}

/* The header trail lists ancestors only; none of them is the current page. */
.page-heading .breadcrumb-item:last-child a {
  color: var(--ds-muted, var(--bs-secondary-color));
  font-weight: inherit;
}

.page-heading .breadcrumb-item a:hover,
.page-heading .breadcrumb-item a:focus-visible {
  color: var(--ds-accent, var(--bs-link-color));
}

.page-heading h1 {
  letter-spacing: var(--ds-heading-tracking, -.015em);
  overflow-wrap: anywhere;
}

.page-heading__subtitle {
  margin: .4rem 0 0;
}

/* === source: public/css/ui-profile.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Profile page (views/profile.php, views/profile/*.php; .pp-*) and the
 * profile editor (views/profile_edit.php; .pe-*). Colours, radii and
 * shadows come from the canonical --ds-* theme tokens, so the saved
 * accent, radius, palette and dark theme apply as everywhere else.
 * The post composer has its own sheet: ui-post-composer.css.
 */

/* ───────────── Profile page ───────────── */
.pp, .pe {
  --pp-surface: var(--ds-surface, #fff);
  --pp-soft: var(--ds-soft, #f1f3f8);
  --pp-ink: var(--ds-ink, #182337);
  --pp-muted: var(--ds-muted, #637086);
  --pp-line: var(--ds-line, rgba(24, 35, 55, .14));
  --pp-accent: var(--ds-accent, #4f46e5);
  --pp-accent-soft: var(--ds-accent-soft, #eef0ff);
  /* v5.58.0: neutral fill for avatars, pills and chips: the accent-soft fill
     read red-black with a red accent in the dark theme. */
  --pp-quiet: color-mix(in srgb, var(--pp-ink) 7%, var(--ds-surface-solid, var(--pp-surface)));
  --pp-on-accent: var(--ds-on-primary, #fff);
  --pp-radius: var(--ds-radius-card, 14px);
  --pp-radius-sm: var(--ds-radius-control, 10px);
  --pp-shadow: var(--ds-shadow, 0 1px 2px rgba(15, 23, 42, .06));
  --pp-gap: 16px;
  --pp-pad: 18px;
  --pp-like: #e11d48;
  color: var(--pp-ink);
}
.pp { display: flex; flex-direction: column; gap: var(--pp-gap); padding: var(--pp-gap) 0 calc(var(--pp-gap) * 2); }
.pp :is(h1, h2) { margin: 0; }

.pp-card {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
}

/* Avatars: a photo or the person's emoji */
.pp-ava {
  --s: 44px;
  flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s);
  border-radius: 50%; overflow: hidden; background: var(--pp-quiet);
  font-size: calc(var(--s) * .5); line-height: 1; user-select: none;
}
.pp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-ava.is-square { border-radius: 24%; }
.pp-ava--xs { --s: 30px; }
.pp-ava--sm { --s: 42px; }
.pp-ava--md { --s: 44px; }
.pp-ava--lg { --s: 72px; }
.pp-ava--xl { --s: 120px; }

/* Buttons */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 38px; padding: 0 1rem;
  border: 1px solid var(--pp-line); border-radius: 999px; background: var(--pp-surface); color: var(--pp-ink);
  font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pp-btn:hover { background: var(--pp-soft); color: var(--pp-ink); }
.pp-btn:focus-visible, .pp-act:focus-visible, .pp-tab:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-btn--primary { background: var(--pp-accent); border-color: var(--pp-accent); color: var(--pp-on-accent); }
.pp-btn--primary:hover { background: color-mix(in srgb, var(--pp-accent) 88%, #000); color: var(--pp-on-accent); }
.pp-btn--quiet { background: var(--pp-soft); border-color: transparent; color: var(--pp-muted); cursor: default; }
.pp-btn--quiet:hover { background: var(--pp-soft); color: var(--pp-muted); }
.pp-btn--icon { width: 38px; padding: 0; }
.pp-btn--ghost { border-color: transparent; background: transparent; color: var(--pp-muted); }
.pp-btn:disabled { opacity: .5; cursor: default; }
.pp-btn .bi { font-size: 1rem; }
.pp form { margin: 0; }
.pp-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.pp-menu .dropdown-item .bi { width: 1rem; color: var(--pp-muted); }
.pp-menu .dropdown-item.text-danger .bi { color: inherit; }

/* Head (v5.59.0, a new grid): the card with cover, avatar and actions, the
   person in large type under them, and beside the card a 2×2 block of tiles
   with big numbers; under both the tabs as pills, stuck to the top. Labels
   are small capitals, lines are hairlines, as an editorial page reads. */
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--pp-gap); align-items: stretch; }
.pp-top.is-single { grid-template-columns: minmax(0, 1fr); }
.pp-hero { --pp-ava-s: 132px; position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); }
.pp-cover {
  position: relative; height: clamp(120px, 11vw, 168px);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pp-accent) 55%, #fff) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--pp-accent) 75%, #1e1b4b), color-mix(in srgb, var(--pp-accent) 45%, #db2777));
}
.pp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The owner changes the cover where they see it (v5.58.0). */
.pp-cover__edit {
  position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .8rem;
  border-radius: 999px; background: rgba(15, 23, 42, .45); color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: .85; transition: opacity .15s, background-color .15s;
}
.pp-cover__edit:hover { opacity: 1; background: rgba(15, 23, 42, .6); color: #fff; }
.pp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 28px; }
/* The cover is positioned (its edit button), so the avatar must stay above it. */
.pp-head > .pp-ava { position: relative; z-index: 1; --s: var(--pp-ava-s); margin-top: calc(var(--pp-ava-s) / -2); border: 5px solid var(--pp-surface); box-shadow: 0 10px 28px rgba(15, 23, 42, .18); }
.pp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 16px; }
.pp-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 28px 28px; min-width: 0; }
.pp-eyebrow { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--pp-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pp-eyebrow__item { display: inline-flex; align-items: center; gap: .4rem; }
.pp-eyebrow__item .bi { color: var(--pp-accent); font-size: .9rem; }
.pp-eyebrow__item--admin .bi { color: #f59e0b; }
/* Headings beat the generic html[data-bs-theme] h1/h2 sizes of the shared sheet. */
html[data-bs-theme] .pp .pp-name { margin-top: -2px; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; overflow-wrap: anywhere; }
.pp-verified { margin-left: .3em; color: var(--pp-accent); font-size: .5em; vertical-align: .45em; }
.pp-handle { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; color: var(--pp-accent); font-size: 1rem; font-weight: 600; }
.pp-status {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .2rem .7rem .2rem .55rem;
  border-radius: 999px; background: var(--pp-quiet); color: var(--pp-ink); font-size: .82rem;
}
.pp-status .bi { color: var(--pp-accent); }
.pp-status span { overflow-wrap: anywhere; }
.pp-bio { margin: 4px 0 0; max-width: 60ch; color: var(--pp-ink); font-size: 1.02rem; line-height: 1.55; overflow-wrap: anywhere; }
.pp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 12px; border-top: 1px solid var(--pp-line); align-self: stretch; }
.pp-meta { display: inline-flex; align-items: center; gap: .4rem; color: var(--pp-muted); font-size: .875rem; }
.pp-mutual { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; padding: 0; border: 0; background: none; color: var(--pp-muted); font-size: .875rem; text-align: left; cursor: pointer; }
.pp-mutual:hover { color: var(--pp-ink); }
.pp-mutual__faces { display: inline-flex; flex: none; }
.pp-mutual__faces .pp-ava { --s: 24px; border: 2px solid var(--pp-surface); }
.pp-mutual__faces .pp-ava + .pp-ava { margin-left: -8px; }

/* Tiles: big numbers, small capital labels; a tile with a tab opens it */
.pp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--pp-gap); }
.pp-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; padding: 20px;
  background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow);
  color: var(--pp-ink); text-align: left; font: inherit; transition: border-color .15s, transform .15s;
}
button.pp-tile { cursor: pointer; }
button.pp-tile:hover { border-color: var(--pp-accent); transform: translateY(-1px); }
.pp-tile__label { color: var(--pp-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pp-tile__num { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 300; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.pp-tile__go { position: absolute; right: 18px; top: 18px; color: var(--pp-accent); font-size: .9rem; transition: color .15s, transform .15s; }
button.pp-tile:hover .pp-tile__go { color: var(--pp-accent); transform: translate(2px, -2px); }
/* v5.59.1: the year tile is the colour spot of the head: filled with the
   saved accent, as the bright tile of a bento grid. */
.pp-tile--since { background: linear-gradient(150deg, var(--pp-accent), color-mix(in srgb, var(--pp-accent) 72%, #000)); border-color: transparent; color: var(--pp-on-accent); }
.pp-tile--since .pp-tile__label { color: color-mix(in srgb, var(--pp-on-accent) 78%, transparent); }

/* Tabs: pills in a bar that sticks under the top bar while the page scrolls */
.pp-tabs {
  position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; padding: 6px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--pp-surface) 82%, transparent); border: 1px solid var(--pp-line); border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--pp-shadow);
}
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 40px; padding: 0 1.1rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--pp-muted); font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: color .15s, background-color .15s;
}
.pp-tab:hover { color: var(--pp-ink); background: var(--pp-quiet); }
.pp-tab.is-active { background: var(--pp-accent); color: var(--pp-on-accent); }
@media (min-width: 992px) { .pp .pp-tab--narrow, .pp .pp-pane--narrow { display: none; } }
.pp-tab__count { color: inherit; opacity: .6; font-size: .8rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Layout */
.pp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--pp-gap); align-items: start; }
.pp-main { min-width: 0; }
.pp-pane { display: flex; flex-direction: column; gap: var(--pp-gap); }
.pp-pane[hidden] { display: none; }
.pp-pane__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pp-rail { display: flex; flex-direction: column; gap: var(--pp-gap); position: sticky; top: 128px; }

.pp-empty {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 40px 20px; text-align: center;
  border: 1px dashed var(--pp-line); border-radius: var(--pp-radius); color: var(--pp-muted);
}
.pp-empty .bi { font-size: 1.9rem; opacity: .55; margin-bottom: .25rem; }
.pp-empty strong { color: var(--pp-ink); font-weight: 650; }
.pp-empty span { max-width: 42ch; font-size: .9rem; }

.pp-compose { padding: 14px var(--pp-pad); }

/* Post card */
.pp-post { overflow: hidden; }
.pp-post__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px var(--pp-pad) 0; }
.pp-post__ava { display: inline-flex; text-decoration: none; }
.pp-post__author { color: var(--pp-ink); font-weight: 650; text-decoration: none; }
.pp-post__author:hover { text-decoration: underline; }
.pp-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--pp-muted); font-size: .8rem; }
.pp-post__meta a { color: inherit; text-decoration: none; }
.pp-post__meta a:hover { text-decoration: underline; }
.pp-post__private { display: inline-flex; align-items: center; gap: .25rem; padding: 0 .45rem; border-radius: 999px; background: var(--pp-soft); }
.pp-post__content { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 0; }
.pp-post__text { padding: 0 var(--pp-pad); font-size: .975rem; line-height: 1.55; overflow-wrap: anywhere; }
.pp-post__edit { padding: 12px var(--pp-pad) 0; }

/* Post gallery: one image at its own proportions, several in a swipe strip */
.pp-gallery { position: relative; background: var(--pp-soft); }
.pp-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pp-gallery__track::-webkit-scrollbar { display: none; }
.pp-gallery__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; overflow: hidden; }
.pp-gallery__image { position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; cursor: zoom-in; }
.pp-gallery__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.2); transform: scale(1.2); opacity: .55; }
.pp-gallery__img { position: relative; display: block; width: 100%; height: auto; max-height: min(72vh, 600px); object-fit: contain; }
.pp-gallery.is-multi .pp-gallery__slide { aspect-ratio: 4 / 3; }
.pp-gallery.is-multi .pp-gallery__img { height: 100%; max-height: none; }
.pp-gallery__video { position: relative; width: 100%; aspect-ratio: 16 / 9; height: 100%; background: #0b0f19; display: grid; place-items: center; cursor: pointer; }
.pp-gallery__video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp-gallery__play {
  position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(15, 23, 42, .55); color: #fff; font-size: 2rem; pointer-events: none; backdrop-filter: blur(4px);
}
.pp-gallery__video[data-media-state="playing"] .pp-gallery__play { display: none; }
.pp-gallery__nav {
  position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: color-mix(in srgb, var(--pp-surface) 88%, transparent); color: var(--pp-ink);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .18); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.pp-gallery__nav.is-prev { left: 12px; }
.pp-gallery__nav.is-next { right: 12px; }
.pp-gallery:hover .pp-gallery__nav, .pp-gallery__nav:focus-visible { opacity: 1; }
.pp-gallery.is-first .pp-gallery__nav.is-prev, .pp-gallery.is-last .pp-gallery__nav.is-next { opacity: 0; pointer-events: none; }
@media (hover: none) { .pp-gallery__nav { display: none; } }
.pp-gallery__count { position: absolute; top: 12px; right: 12px; z-index: 2; padding: .15rem .55rem; border-radius: 999px; background: rgba(15, 23, 42, .6); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; }
.pp-gallery__dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.pp-gallery__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0, 0, 0, .4); transition: transform .15s, background-color .15s; }
.pp-gallery__dots span.is-active { background: #fff; transform: scale(1.3); }

/* Files and links under a post */
.pp-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--pp-pad); }
.pp-file {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .45rem .75rem; border-radius: var(--pp-radius-sm);
  background: var(--pp-soft); color: var(--pp-ink); font-size: .85rem; text-decoration: none;
}
.pp-file:hover { background: var(--pp-accent-soft); color: var(--pp-ink); }
.pp-file .bi { color: var(--pp-accent); }
.pp-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-file__size { color: var(--pp-muted); font-size: .75rem; white-space: nowrap; }

/* Like / comments / link */
.pp-post__actions { display: flex; align-items: center; gap: 4px; padding: 10px calc(var(--pp-pad) - 8px); }
.pp-act {
  display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .7rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--pp-muted); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pp-act:hover { background: var(--pp-soft); color: var(--pp-ink); }
.pp-act .bi { font-size: 1.1rem; }
.pp-act.is-liked, .pp-act.is-liked:hover { color: var(--pp-like); }
.pp-act--end { margin-left: auto; }

/* Comments */
.pp-comments { display: flex; flex-direction: column; gap: 10px; padding: 12px var(--pp-pad) 16px; border-top: 1px solid var(--pp-line); background: color-mix(in srgb, var(--pp-soft) 45%, var(--pp-surface)); }
.pp-comments[hidden] { display: none; }
.pp-comments.is-collapsed .pp-comment.is-older { display: none; }
.pp-comments__more { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--pp-accent); font-size: .85rem; font-weight: 600; cursor: pointer; }
.pp-comments__list { display: flex; flex-direction: column; gap: 10px; }
.pp-comment { display: flex; align-items: flex-start; gap: 10px; }
.pp-comment > a { display: inline-flex; }
.pp-comment.is-new .pp-comment__bubble { animation: pp-flash 1.2s ease-out; }
@keyframes pp-flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 40%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
.pp-comment__body { min-width: 0; }
.pp-comment__bubble { display: inline-block; max-width: 100%; padding: .45rem .75rem; border-radius: 4px 16px 16px 16px; background: var(--pp-surface); border: 1px solid var(--pp-line); }
.pp-comment__author { display: block; color: var(--pp-ink); font-size: .8rem; font-weight: 650; text-decoration: none; }
.pp-comment__author:hover { text-decoration: underline; }
.pp-comment__text { font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.pp-comment__meta { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; padding-left: .25rem; color: var(--pp-muted); font-size: .75rem; }
.pp-comment__meta button { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; cursor: pointer; }
.pp-comment__meta button:hover { color: var(--pp-like); }
.pp-comments__form { display: flex; align-items: flex-end; gap: 8px; }
.pp-comments__form textarea {
  flex: 1; min-width: 0; min-height: 38px; max-height: 160px; padding: .5rem .9rem; resize: none; overflow-y: auto;
  border: 1px solid var(--pp-line); border-radius: 19px; background: var(--pp-surface); color: var(--pp-ink); font-size: .9rem; line-height: 1.4;
}
.pp-comments__form textarea:focus { outline: 0; border-color: var(--pp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 18%, transparent); }
.pp-comments__form button {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--pp-accent); color: var(--pp-on-accent); cursor: pointer;
}
.pp-comments__form button:disabled { opacity: .5; }
.pp-comments__guest { margin: 0; color: var(--pp-muted); font-size: .85rem; }

/* Friends and pages */
.pp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pp-person { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 18px 12px 16px; text-align: center; color: var(--pp-ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.pp-person:hover { border-color: color-mix(in srgb, var(--pp-accent) 45%, var(--pp-line)); color: var(--pp-ink); transform: translateY(-1px); }
.pp-person__name { margin-top: .35rem; font-weight: 650; overflow-wrap: anywhere; }
.pp-person__sub { color: var(--pp-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pp-list { overflow: hidden; }
.pp-list__row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--pp-ink); text-decoration: none; }
.pp-list__row + .pp-list__row { border-top: 1px solid var(--pp-line); }
a.pp-list__row:hover { background: var(--pp-soft); color: var(--pp-ink); }
.pp-list__row > .bi:first-child { color: var(--pp-accent); font-size: 1.1rem; }
.pp-list__go { margin-left: auto; color: var(--pp-muted); }

/* Media tab */
.pp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--pp-soft); }
.pp-seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 32px; padding: 0 .85rem; margin: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--pp-muted); font-size: .85rem; font-weight: 600; cursor: pointer;
}
.pp-seg__btn span { color: var(--pp-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.pp-seg__btn.is-active { background: var(--pp-surface); color: var(--pp-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.pp-seg__btn input { position: absolute; opacity: 0; pointer-events: none; }
.pp-seg--block { display: flex; }
.pp-seg--block .pp-seg__btn { flex: 1; }
.pp-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pp-media-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--pp-radius-sm); background: var(--pp-soft); }
.pp-media-tile > a { display: block; width: 100%; height: 100%; }
.pp-media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.pp-media-tile:hover img { transform: scale(1.03); }
.pp-media__remove button {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(15, 23, 42, .62); color: #fff; font-size: .75rem; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.pp-media-tile:hover .pp-media__remove button, .pp-media__remove button:focus-visible { opacity: 1; }
@media (hover: none) { .pp-media__remove button { opacity: 1; } }
.pp-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pp-video { overflow: hidden; }
.pp-video__stage { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: #0b0f19; cursor: pointer; }
.pp-video__stage video { width: 100%; height: 100%; object-fit: contain; }
.pp-video__stage[data-media-state="playing"] .pp-gallery__play { display: none; }
.pp-video__meta { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: .875rem; }
.pp-video__meta > a { flex: 1; min-width: 0; color: var(--pp-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-video__meta .pp-media__remove button, .pp-track .pp-media__remove button { position: static; opacity: 1; background: var(--pp-soft); color: var(--pp-muted); }
.pp-track__body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.pp-track__body > a { color: var(--pp-ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-track__player { width: 100%; max-width: 460px; }

/* Side column */
.pp-rail__card { padding: 16px; }
html[data-bs-theme] .pp .pp-rail__title { display: flex; align-items: center; gap: .4rem; margin: 0 0 14px; color: var(--pp-muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.pp-rail__title > span { color: var(--pp-muted); font-weight: 500; }
.pp-rail__more { margin-left: auto; padding: 0; border: 0; background: none; color: var(--pp-ink); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pp-rail__more:hover { color: var(--pp-accent); }
.pp-facts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp-facts li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.pp-facts .bi { grid-row: span 2; color: var(--pp-accent); }
.pp-facts__label { color: var(--pp-muted); font-size: .75rem; }
.pp-facts__value { overflow-wrap: anywhere; font-size: .9rem; }
.pp-showcase { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; }
.pp-showcase a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--pp-radius-sm); color: var(--pp-ink); text-decoration: none; }
.pp-showcase a:hover { background: var(--pp-soft); }
.pp-showcase__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pp-accent-soft); color: var(--pp-accent); }
.pp-showcase__body { display: flex; flex-direction: column; min-width: 0; }
.pp-showcase__title { font-weight: 650; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-showcase__meta { color: var(--pp-muted); font-size: .75rem; }
.pp-friends { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
.pp-friends a { display: flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--pp-ink); text-decoration: none; }
.pp-friends a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.pp-friends a:hover > span:last-child { color: var(--pp-accent); }

/* How full the owner's profile is (v5.58.0: one line in the head with the
   missing steps as chips, instead of a side card above everything on phones) */
.pp-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pp-fill__label { color: var(--pp-muted); font-size: .85rem; }
.pp-fill__label strong { color: var(--pp-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-fill__bar { flex: 0 0 96px; height: 4px; border-radius: 999px; background: var(--pp-quiet); overflow: hidden; }
.pp-fill__bar span { display: block; width: var(--pp-fill, 0%); height: 100%; border-radius: inherit; background: var(--pp-accent); }
.pp-chip {
  display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .7rem; border: 1px dashed var(--pp-line); border-radius: 999px;
  color: var(--pp-ink); font-size: .8rem; font-weight: 600; text-decoration: none; transition: border-color .15s, background-color .15s;
}
.pp-chip .bi { color: var(--pp-accent); }
.pp-chip:hover { border-style: solid; border-color: var(--pp-accent); background: var(--pp-quiet); color: var(--pp-ink); }

/* Side column: a few photos */
.pp-rail-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border-radius: var(--pp-radius-sm); overflow: hidden; }
.pp-rail-media a { display: block; aspect-ratio: 1; background: var(--pp-soft); }
.pp-rail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery window */
.pp-modal .modal-body { display: flex; flex-direction: column; gap: 14px; }
html[data-bs-theme] .pp-modal .modal-title { font-size: 1.1rem; line-height: 1.3; }
.pp-modal__hint { margin: 0; color: var(--ds-muted, #637086); font-size: .875rem; }
.pp-picker {
  display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 84px; padding: 14px;
  border: 1.5px dashed var(--ds-line, rgba(24, 35, 55, .2)); border-radius: var(--ds-radius-card, 14px);
  background: var(--ds-soft, #f1f3f8); color: var(--ds-ink, #182337); font-weight: 600; cursor: pointer;
}
.pp-picker:hover { border-color: var(--ds-accent, #4f46e5); color: var(--ds-accent, #4f46e5); }
.pp-picker .bi { font-size: 1.4rem; color: var(--ds-accent, #4f46e5); }
.pp-modal .pp-seg { --pp-soft: var(--ds-soft, #f1f3f8); --pp-surface: var(--ds-surface, #fff); --pp-ink: var(--ds-ink, #182337); --pp-muted: var(--ds-muted, #637086); }
.pp-modal .pp-btn { --pp-line: var(--ds-line); --pp-surface: var(--ds-surface); --pp-soft: var(--ds-soft); --pp-ink: var(--ds-ink); --pp-accent: var(--ds-accent); --pp-on-accent: var(--ds-on-primary, #fff); }
.pp-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; font-size: .85rem; font-weight: 600; }
.pp-field em { color: var(--ds-muted, #637086); font-style: normal; font-weight: 400; }

/* Tablets and phones: one column, the side cards first and compact */
@media (max-width: 991.98px) {
  /* v5.58.0: the tabs sit right above their content; the side column's
     facts move to the «О себе» tab, friends and photos have their own tabs. */
  .pp-layout { grid-template-columns: minmax(0, 1fr); }
  .pp-rail { display: none; }
}
@media (max-width: 991.98px) {
  .pp-top { grid-template-columns: minmax(0, 1fr); }
  /* The tiles become one row under the card. */
  .pp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  .pp-tile { gap: 10px; padding: 14px 12px; }
  .pp-tile__num { font-size: 2rem; }
  .pp-tile__go { display: none; }
}
@media (max-width: 640px) {
  .pp { --pp-pad: 14px; --pp-gap: 12px; }
  .pp-hero { --pp-ava-s: 96px; }
  .pp-head { padding: 0 16px; }
  .pp-head > .pp-ava { border-width: 4px; }
  .pp-actions { flex-wrap: nowrap; gap: 6px; padding-top: 12px; }
  .pp-actions .pp-btn { height: 36px; }
  .pp-actions .pp-btn--icon { width: 36px; }
  .pp-actions .pp-btn:not(.pp-btn--icon) { padding: 0 .8rem; }
  .pp-intro { gap: 8px; padding: 12px 16px 18px; }
  html[data-bs-theme] .pp .pp-name { font-size: 2.1rem; }
  .pp-bio { font-size: .95rem; }
  .pp-cover__edit { right: 12px; top: 12px; width: 32px; padding: 0; justify-content: center; }
  .pp-cover__edit span { display: none; }
  .pp-tile { padding: 12px 10px; border-radius: var(--pp-radius-sm); }
  .pp-tile__label { font-size: .58rem; letter-spacing: .04em; }
  .pp-tile__num { font-size: 1.6rem; }
  .pp-tabs { top: 60px; gap: 2px; padding: 4px; }
  .pp-tab { flex: 1 0 auto; height: 36px; padding: 0 .75rem; font-size: .85rem; }
  .pp-tab__count { display: none; }
  .pp-gallery.is-multi .pp-gallery__slide { aspect-ratio: 1; }
  .pp-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .pp-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  /* The link is also in the "…" menu; the row stays one line next to the avatar. */
  .pp-actions > [data-pp-share] { display: none; }
  .pp-actions .pp-btn:not(.pp-btn--icon):not(.pp-btn--primary) span { display: none; }
  .pp-actions .pp-btn:not(.pp-btn--icon):not(.pp-btn--primary) { width: 38px; padding: 0; }
}

/* ───────────── Profile editor ───────────── */
.pe { display: flex; flex-direction: column; gap: var(--pp-gap); padding: var(--pp-gap) 0 calc(var(--pp-gap) * 2); }
.pe :is(h1, h2, h3, p) { margin: 0; }
.pe-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
html[data-bs-theme] .pe .pe-head h1 { font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
.pe-head p { margin-top: .25rem; color: var(--pp-muted); }
.pe-back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .4rem; color: var(--pp-muted); font-size: .85rem; font-weight: 600; text-decoration: none; }
.pe-back:hover { color: var(--pp-accent); }
.pe-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--pp-gap); align-items: start; }
.pe-nav { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); }
.pe-nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: var(--pp-radius-sm); color: var(--pp-muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.pe-nav a:hover { background: var(--pp-soft); color: var(--pp-ink); }
.pe-nav a.is-active { background: var(--pp-accent-soft); color: var(--pp-accent); }
.pe-sections { display: flex; flex-direction: column; gap: var(--pp-gap); min-width: 0; }
.pe-card { scroll-margin-top: 80px; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); box-shadow: var(--pp-shadow); }
html[data-bs-theme] .pe .pe-card h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.pe-card--danger { border-color: color-mix(in srgb, #dc2626 35%, var(--pp-line)); }
.pe-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pe-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; font-size: .85rem; font-weight: 600; color: var(--pp-ink); }
.pe-field > span em { color: var(--pp-muted); font-style: normal; font-weight: 400; }
.pe-field small { color: var(--pp-muted); font-weight: 400; }
.pe-field .form-control, .pe-field .form-select { font-weight: 400; }
html[data-bs-theme] .pe .pe-sub { margin-top: 6px; font-size: .95rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.pe-note { display: flex; align-items: baseline; gap: .4rem; color: var(--pp-muted); font-size: .85rem; }
.pe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-actions[hidden] { display: none; }

/* Photo and cover */
#pe-photo { padding: 0; overflow: hidden; gap: 0; }
.pe-cover { position: relative; height: clamp(120px, 18vw, 190px); background: linear-gradient(135deg, color-mix(in srgb, var(--pp-accent) 75%, #1e1b4b), color-mix(in srgb, var(--pp-accent) 45%, #db2777)); }
.pe-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-cover__pick, .pe-avatar input[type="file"], .pe-cover input[type="file"] { cursor: pointer; }
.pe-cover input[type="file"], .pe-avatar input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.pe-cover__pick {
  position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px;
  background: rgba(15, 23, 42, .58); color: #fff; font-size: .85rem; font-weight: 600; backdrop-filter: blur(6px);
}
.pe-cover__pick:hover { background: rgba(15, 23, 42, .75); }
.pe-photo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; padding: 0 22px 20px; }
.pe-avatar { position: relative; margin-top: -50px; border: 4px solid var(--pp-surface); box-shadow: 0 6px 18px rgba(15, 23, 42, .16); cursor: pointer; }
.pe-avatar__pick {
  position: absolute; right: 4px; bottom: 4px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pp-accent); color: var(--pp-on-accent); font-size: .9rem; border: 2px solid var(--pp-surface); pointer-events: none;
}
.pe-avatar.is-square .pe-avatar__pick { right: -4px; bottom: -4px; }
.pe-avatar [hidden] { display: none !important; }
.pe-photo__text { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.pe-photo__text p { color: var(--pp-muted); font-size: .85rem; }

/* Privacy choices */
.pe-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pe-choice {
  position: relative; display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: 14px; border: 1.5px solid var(--pp-line);
  border-radius: var(--pp-radius-sm); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.pe-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pe-choice > .bi { font-size: 1.25rem; color: var(--pp-muted); }
.pe-choice span { display: flex; flex-direction: column; gap: .2rem; }
.pe-choice strong { font-size: .92rem; }
.pe-choice small { color: var(--pp-muted); font-size: .8rem; }
.pe-choice:has(input:checked) { border-color: var(--pp-accent); background: var(--pp-accent-soft); }
.pe-choice:has(input:checked) > .bi { color: var(--pp-accent); }
.pe-choice:has(input:focus-visible) { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pe-switch, .pe-switches { display: flex; flex-direction: column; gap: 10px; }
.pe-switches .form-check, .pe-switch .form-check { margin: 0; }

.pe-profiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pe-profiles li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; background: var(--pp-soft); font-size: .85rem; }
.pe-profiles li.is-active { background: var(--pp-accent-soft); color: var(--pp-accent); font-weight: 600; }

.pe-danger > summary { list-style: none; width: max-content; color: #b91c1c; border-color: color-mix(in srgb, #dc2626 40%, var(--pp-line)); }
.pe-danger > summary::-webkit-details-marker { display: none; }
.pe-danger[open] > summary { margin-bottom: 14px; }
.pe-btn--danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.pe-btn--danger:hover { background: #b91c1c; color: #fff; }

@media (max-width: 991.98px) {
  .pe-layout { grid-template-columns: minmax(0, 1fr); }
  .pe-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; border-radius: 999px; padding: 4px; }
  .pe-nav::-webkit-scrollbar { display: none; }
  .pe-nav a { flex: none; border-radius: 999px; white-space: nowrap; }
}
@media (max-width: 640px) {
  .pe-card { padding: 16px; }
  .pe-grid, .pe-choices { grid-template-columns: minmax(0, 1fr); }
  .pe-photo { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 0 16px 16px; }
  .pe-cover__pick { top: 12px; right: 12px; bottom: auto; }
  .pe-photo__text .pe-actions { justify-content: center; }
}
.pp-gallery__video.mp .mp-bar { padding-bottom: 22px; }

/* === source: public/css/ui-contacts.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Contacts page (views/contacts.php, views/contacts/*.php; .ct-*), 5.57.0.
 * The viewer's contacts are cards (write, call, menu); everyone else is a
 * row to add. Colours, radii and shadows come from the --ds-* tokens, so the
 * saved accent, radius and theme apply as everywhere else; the accent marks
 * only the main action, never names or every icon.
 */
.ct {
  --ct-surface: var(--ds-surface, #fff);
  /* --ds-soft is near the surface in light themes; the avatar and quiet buttons need a visible fill. */
  --ct-soft: color-mix(in srgb, var(--ds-ink, #182337) 7%, var(--ds-surface-solid, var(--ds-surface, #fff)));
  --ct-ink: var(--ds-ink, #182337);
  --ct-muted: var(--ds-muted, #637086);
  --ct-line: var(--ds-line, rgba(24, 35, 55, .14));
  --ct-accent: var(--ds-accent, #4f46e5);
  --ct-accent-soft: var(--ds-accent-soft, #eef0ff);
  --ct-on-accent: var(--ds-on-primary, #fff);
  --ct-radius: var(--ds-radius-card, 14px);
  --ct-radius-sm: var(--ds-radius-control, 10px);
  --ct-shadow: var(--ds-shadow, 0 1px 2px rgba(15, 23, 42, .06));
  --ct-online: #22c55e;
  --ct-gap: 16px;
  display: flex; flex-direction: column; gap: 28px; padding-bottom: 32px; color: var(--ct-ink);
}
.ct form { margin: 0; }
html[data-bs-theme] .app-shell .ct .ct-head { margin-bottom: 0; }
.ct-head__online, .ct-card__sub.is-online, .ct-row__sub.is-online { color: var(--ct-online); }

/* Search: one field; typing narrows the lists, Enter asks the server. */
.ct-search { position: relative; flex: 0 1 340px; min-width: 220px; }
.ct-search > .bi-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ct-muted); pointer-events: none; }
.ct-search input {
  width: 100%; height: 44px; padding: 0 40px 0 40px; border: 1px solid var(--ct-line); border-radius: 999px;
  background: var(--ct-surface); color: var(--ct-ink); font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.ct-search input::-webkit-search-cancel-button { display: none; }
.ct-search input:focus { outline: 0; border-color: var(--ct-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-accent) 18%, transparent); }
.ct-search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ct-muted); text-decoration: none; }
.ct-search__clear:hover { background: var(--ct-soft); color: var(--ct-ink); }

/* Sections */
.ct-section { display: flex; flex-direction: column; gap: 12px; }
.ct-section[hidden] { display: none; }
html[data-bs-theme] .ct .ct-section__title { display: flex; align-items: baseline; gap: .5rem; margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.ct-section__title > span { color: var(--ct-muted); font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Avatars: a photo or the person's emoji; a green dot when online */
.ct-ava {
  --s: 44px;
  position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s);
  border-radius: 50%; background: var(--ct-soft); font-size: calc(var(--s) * .48); line-height: 1; user-select: none;
}
.ct-ava img, .ct-ava > span { width: 100%; height: 100%; border-radius: 50%; }
.ct-ava img { object-fit: cover; display: block; }
.ct-ava > span { display: grid; place-items: center; }
.ct-ava--md { --s: 44px; }
.ct-ava--lg { --s: 72px; }
.ct-ava.is-online::after {
  content: ""; position: absolute; right: calc(var(--s) * .02); bottom: calc(var(--s) * .02);
  width: calc(var(--s) * .26); height: calc(var(--s) * .26); min-width: 10px; min-height: 10px;
  border-radius: 50%; background: var(--ct-online); border: 2px solid var(--ct-surface);
}

/* Buttons */
.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 36px; padding: 0 .9rem;
  border: 1px solid var(--ct-line); border-radius: 999px; background: var(--ct-surface); color: var(--ct-ink);
  font-size: .85rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ct-btn:hover { background: var(--ct-soft); color: var(--ct-ink); }
.ct-btn:focus-visible, .ct-card__who:focus-visible, .ct-row__who:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; }
.ct-btn .bi { font-size: 1rem; }
.ct-btn--primary { background: var(--ct-soft); border-color: transparent; }
.ct-btn--primary .bi { color: var(--ct-accent); }
.ct-btn--primary:hover { background: color-mix(in srgb, var(--ct-accent) 14%, var(--ct-soft)); }
.ct-btn--icon { width: 36px; padding: 0; }
.ct-btn--ghost { border-color: transparent; background: transparent; color: var(--ct-muted); }
.ct-btn--ghost:hover { color: var(--ct-ink); }
.ct-btn--add { background: var(--ct-accent-soft); border-color: transparent; color: var(--ct-accent); }
.ct-btn--add:hover { background: color-mix(in srgb, var(--ct-accent) 22%, var(--ct-surface)); color: var(--ct-accent); }
.ct-menu .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.ct-menu .dropdown-item .bi { width: 1rem; color: var(--ds-muted, #637086); }
.ct-menu .dropdown-item.text-danger .bi { color: inherit; }

/* My contacts: cards */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 12px; }
.ct-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 16px 16px;
  background: var(--ct-surface); border: 1px solid var(--ct-line); border-radius: var(--ct-radius); box-shadow: var(--ct-shadow);
  transition: border-color .15s, transform .15s;
}
.ct-card:hover { border-color: color-mix(in srgb, var(--ct-accent) 35%, var(--ct-line)); }
.ct-card__who { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; color: inherit; text-align: center; text-decoration: none; border-radius: var(--ct-radius-sm); }
.ct-card__who .ct-ava { margin-bottom: 8px; }
.ct-card__name { max-width: 100%; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-card__who:hover .ct-card__name { text-decoration: underline; text-underline-offset: 3px; }
.ct-card__sub, .ct-row__sub { max-width: 100%; color: var(--ct-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-card__actions { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.ct-card__actions > form:first-child { flex: 1 1 auto; max-width: 160px; }
.ct-card__actions > form:first-child .ct-btn { width: 100%; }

/* Everyone else: rows to add */
.ct-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 8px; }
.ct-row {
  display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; min-width: 0;
  background: var(--ct-surface); border: 1px solid var(--ct-line); border-radius: var(--ct-radius);
}
.ct-row__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: var(--ct-radius-sm); }
.ct-row__text { display: flex; flex-direction: column; min-width: 0; }
.ct-row__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-row__who:hover .ct-row__name { text-decoration: underline; text-underline-offset: 3px; }

.ct-empty {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 40px 20px; text-align: center;
  border: 1px dashed var(--ct-line); border-radius: var(--ct-radius); color: var(--ct-muted);
}
.ct-empty[hidden] { display: none; }
.ct-empty .bi { font-size: 1.8rem; opacity: .55; }
.ct-empty strong { color: var(--ct-ink); font-weight: 650; }

/* Phones: contacts become rows too, the search takes the full width */
@media (max-width: 640px) {
  .ct { gap: 20px; }
  .ct-search { flex: 1 1 100%; min-width: 0; }
  .ct-grid, .ct-people { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ct-card__actions .ct-btn--primary { background: transparent; }
  .ct-card { flex-direction: row; gap: 8px; padding: 8px 8px 8px 12px; }
  .ct-card__who { flex: 1; flex-direction: row; gap: 12px; text-align: left; align-items: center; }
  .ct-card__who .ct-ava { --s: 44px; margin: 0; }
  .ct-card__who { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; }
  .ct-card__who .ct-ava { grid-row: span 2; }
  .ct-card__name, .ct-card__sub { justify-self: start; }
  .ct-card__actions { width: auto; gap: 2px; }
  .ct-card__actions > form:first-child { flex: none; }
  .ct-card__actions > form:first-child .ct-btn { width: 36px; padding: 0; }
  .ct-card__actions > form:first-child .ct-btn span { display: none; }
  .ct-card__actions .ct-btn--icon { border-color: transparent; background: transparent; color: var(--ct-muted); }
  .ct-btn--add span { display: none; }
  .ct-btn--add { width: 36px; padding: 0; }
}
.ct [data-ct-person][hidden] { display: none; }

/* === source: public/css/ui-post-composer.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Post composer (views/partials/post_composer.php + public/assets/js/post-composer.js):
 * the new post on the profile and the editor of every post. Reads the
 * canonical --ds-* theme tokens only.
 */
.pc {
  --pc-accent: var(--ds-accent, #4f46e5);
  --pc-accent-soft: var(--ds-accent-soft, #eef0ff);
  /* v5.58.0: the «Что нового?» field is neutral; accent-soft read red-black with a red accent. */
  --pc-field: color-mix(in srgb, var(--ds-ink, #182337) 6%, var(--ds-surface-solid, var(--ds-surface, #fff)));
  --pc-line: var(--ds-line, rgba(24, 35, 55, .14));
  --pc-radius: var(--ds-radius-card, 14px);
  --pc-surface: var(--ds-surface, #fff);
}
/* Collapsed (new post): avatar + one-line field. Expanded: the text grows,
 * attachments are square tiles, the cover is a wide preview, one toolbar. */
.pc { position: relative; display: flex; flex-direction: column; gap: .6rem; margin: 0; }
.pc-main { display: flex; align-items: flex-start; gap: .65rem; }
.pc-ava { flex: none; }
.pc-ava > * { width: 40px; height: 40px; }
.pc-text {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: inherit;
  font-size: 1rem; line-height: 1.45; padding: .5rem 0; min-height: 2.4rem; overflow-y: hidden;
  scrollbar-width: thin;
}
.pc-text::placeholder { color: var(--bs-secondary-color); }
/* The global form-control/focus styles must not frame the composer fields. */
html .pc .pc-text, html .pc .pc-text:focus, html .pc .pc-links textarea, html .pc .pc-links textarea:focus {
  border: 0 !important; box-shadow: none !important; outline: 0 !important; background-color: transparent !important;
}
html .pc.is-collapsed .pc-text { background-color: var(--pc-field) !important; }
.pc:focus-within:not(.is-collapsed) .pc-main { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--pc-accent) 45%, transparent); }
.pc.is-collapsed { cursor: text; }
.pc.is-collapsed .pc-text {
  padding: .5rem .9rem; border-radius: 999px; background: var(--pc-field);
  height: 2.5rem !important; white-space: nowrap; overflow: hidden;
}
.pc.is-collapsed .pc-body { display: none; }
.pc-body { display: flex; flex-direction: column; gap: .6rem; }
[data-pc-mode="new"] .pc-body { padding-left: calc(40px + .65rem); }

.pc-x {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; border: 0; padding: 0; font-size: .7rem;
  background: rgba(15, 23, 42, .62); color: #fff; cursor: pointer;
}
.pc-x:hover { background: rgba(15, 23, 42, .85); }

.pc-cover { position: relative; aspect-ratio: 16 / 7; border-radius: calc(var(--pc-radius) + .1rem); overflow: hidden; background: var(--pc-accent-soft); }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cover.is-uploading img { opacity: .55; }
.pc-cover__tag { position: absolute; left: 8px; bottom: 8px; display: inline-flex; gap: .3rem; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .72rem; background: rgba(15, 23, 42, .62); color: #fff; }

.pc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .45rem; }
.pc-tile {
  position: relative; aspect-ratio: 1; border-radius: .7rem; overflow: hidden; background: var(--pc-accent-soft);
  display: flex; align-items: flex-end; cursor: grab;
}
.pc-tile.is-existing { cursor: default; }
.pc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-tile__icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: var(--pc-accent); }
.pc-tile__name {
  position: relative; z-index: 1; width: 100%; padding: 14px 6px 4px; font-size: .68rem; line-height: 1.2; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.pc-tile__bar { position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .5); z-index: 1; }
.pc-tile__bar i { display: block; height: 100%; border-radius: 4px; background: var(--pc-accent); transition: width .15s; }
.pc-tile.is-uploading img { opacity: .5; }
.pc-tile.is-error { outline: 2px solid #ef4444; outline-offset: -2px; }
.pc-tile__err { position: absolute; top: 50%; left: 0; right: 0; text-align: center; font-size: .72rem; color: #ef4444; font-weight: 600; z-index: 1; }
.pc-tile__cover {
  position: absolute; top: 6px; left: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; font-size: .72rem; background: rgba(15, 23, 42, .62); color: #fff; opacity: 0; transition: opacity .15s;
}
.pc-tile:hover .pc-tile__cover, .pc-tile:focus-within .pc-tile__cover { opacity: 1; }
@media (hover: none) { .pc-tile__cover { opacity: 1; } }
.pc-tile.is-dragging { opacity: .4; }

.pc-links { display: flex; align-items: flex-start; gap: .5rem; padding: .45rem .7rem; border-radius: .7rem; background: var(--pc-accent-soft); }
.pc-links .bi { margin-top: .2rem; color: var(--pc-accent); }
.pc-links textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: inherit; font-size: .9rem; line-height: 1.4; overflow-y: hidden; }

.pc-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .5rem; border-top: 1px solid var(--pc-line); }
.pc-tools { display: flex; gap: .15rem; }
.pc-tool {
  width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center;
  background: transparent; color: var(--pc-accent); font-size: 1.1rem; cursor: pointer; transition: background .15s;
}
.pc-tool:hover { background: var(--pc-accent-soft); }
.pc-vis {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 0 auto; padding: .3rem .7rem; border-radius: 999px;
  font-size: .8rem; color: var(--bs-secondary-color); background: var(--pc-accent-soft); cursor: pointer; user-select: none;
}
.pc-vis input { position: absolute; opacity: 0; pointer-events: none; }
.pc-vis .pc-vis__members { display: none; }
.pc-vis:has(input:checked) .pc-vis__all { display: none; }
.pc-vis:has(input:checked) .pc-vis__members { display: inline; }
.pc-vis:has(input:focus-visible) { outline: 2px solid var(--pc-accent); }
.pc-actions { display: flex; gap: .4rem; }
.pc-cancel, .pc-submit { border: 0; border-radius: 999px; padding: .4rem 1rem; font-size: .88rem; font-weight: 600; cursor: pointer; }
.pc-cancel { background: transparent; color: var(--bs-secondary-color); }
.pc-cancel:hover { background: var(--pc-accent-soft); color: var(--bs-body-color); }
.pc-submit { background: var(--pc-accent); color: var(--ds-on-accent, #fff); }
.pc-submit:disabled { opacity: .45; cursor: default; }

.pc-drop {
  position: absolute; inset: -6px; z-index: 5; display: none; place-items: center; gap: .4rem; border-radius: var(--pc-radius);
  border: 2px dashed var(--pc-accent); background: color-mix(in srgb, var(--pc-surface) 88%, var(--pc-accent)); color: var(--pc-accent); font-weight: 600;
  pointer-events: none;
}
.pc.is-dragover .pc-drop { display: grid; }

@media (max-width: 575.98px) {
  [data-pc-mode="new"] .pc-body { padding-left: 0; }
  .pc-tiles { grid-template-columns: repeat(3, 1fr); }
  .pc-vis { margin-left: 0; }
  .pc-actions { margin-left: auto; }
  .pc-tool { width: 40px; height: 40px; }
}

/* === source: public/css/ui-settings.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Settings page (views/admin_settings.php + views/settings/*.php; .st-*).
 * One form for every section, the menu on the left (folds on phones), one
 * section on screen at a time, the save bar under it. Colours, radii and
 * shadows come from the canonical --ds-* theme tokens, so the saved accent,
 * radius, palette and dark theme apply as everywhere else. Form controls
 * keep the app-wide Bootstrap classes (form-control, form-select, form-check).
 */

.st {
  --st-surface: var(--ds-surface, #fff);
  --st-solid: var(--ds-surface-solid, var(--ds-surface, #fff));
  --st-soft: var(--ds-soft, #f1f3f8);
  --st-ink: var(--ds-ink, #182337);
  --st-muted: var(--ds-muted, #637086);
  --st-line: var(--ds-line, rgba(24, 35, 55, .14));
  --st-accent: var(--ds-accent, #4f46e5);
  --st-accent-soft: var(--ds-accent-soft, #eef0ff);
  --st-on-accent: var(--ds-on-primary, #fff);
  --st-radius: var(--ds-radius-card, 14px);
  --st-radius-sm: var(--ds-radius-control, 10px);
  --st-shadow: var(--ds-shadow, 0 1px 2px rgba(15, 23, 42, .06));
  --st-float: 0 14px 36px rgba(15, 23, 42, .16);
  --st-ok: #1f8a4c;
  --st-warn: #b7791f;
  --st-bad: #d63a4a;
  display: flex; flex-direction: column; gap: 16px; padding: 16px 0 40px; color: var(--st-ink);
}
.st form { margin: 0; }
.st [hidden] { display: none !important; }

/* Header */
.st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html[data-bs-theme] .st .st-title { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.15; letter-spacing: var(--ds-heading-tracking, -.01em); color: var(--st-ink); }
.st-sub { margin: 4px 0 0; color: var(--st-muted); font-size: .9rem; }
.st-banner { display: flex; align-items: center; gap: .6rem; padding: 10px 14px; border-radius: var(--st-radius-sm); background: color-mix(in srgb, var(--st-warn) 14%, var(--st-surface)); color: var(--st-ink); font-size: .9rem; }
.st-banner .bi { color: var(--st-warn); }

/* Buttons */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: 0 1rem;
  border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-surface); color: var(--st-ink);
  font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.st-btn:hover { background: var(--st-soft); color: var(--st-ink); }
.st-btn:disabled, .st-btn.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
.st-btn--primary { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-on-accent); }
.st-btn--primary:hover { background: color-mix(in srgb, var(--st-accent) 88%, #000); color: var(--st-on-accent); }
.st-btn--danger { color: var(--st-bad); border-color: color-mix(in srgb, var(--st-bad) 40%, var(--st-line)); }
.st-btn--danger:hover { background: color-mix(in srgb, var(--st-bad) 10%, var(--st-surface)); color: var(--st-bad); }
.st-btn--warn { color: var(--st-warn); border-color: color-mix(in srgb, var(--st-warn) 40%, var(--st-line)); }
.st-btn--sm { min-height: 32px; padding: 0 .8rem; font-size: .8rem; }
.st-btn .bi { font-size: 1rem; }
.st-btn:focus-visible, .st-nav__item:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.st-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Layout */
.st-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; align-items: start; }
.st-side { position: sticky; top: 72px; }
/* The card itself scrolls, so its rounded edge stays in view on short screens. */
.st-side__box { max-height: calc(100vh - 88px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 12px; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-radius); box-shadow: var(--st-shadow); }
.st-side__toggle { display: none; }
.st-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Search */
.st-search { position: relative; display: flex; align-items: center; height: 38px; margin-bottom: 10px; border-radius: 999px; background: var(--st-soft); border: 1px solid transparent; }
.st-search:focus-within { background: var(--st-surface); border-color: var(--st-accent); }
.st-search > .bi { position: absolute; left: 12px; color: var(--st-muted); pointer-events: none; }
.st-search input { flex: 1; min-width: 0; height: 100%; padding: 0 56px 0 36px; border: 0; background: transparent; color: var(--st-ink); font-size: .88rem; outline: none; }
.st-search input::-webkit-search-cancel-button { display: none; }
.st-search kbd { position: absolute; right: 8px; padding: 1px 6px; border-radius: 6px; background: var(--st-surface); border: 1px solid var(--st-line); color: var(--st-muted); font-size: .68rem; font-family: inherit; }

/* Menu */
.st-nav__group + .st-nav__group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--st-line); }
.st-nav__title { padding: 4px 10px 6px; color: var(--st-muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.st-nav__item {
  display: flex; align-items: center; gap: .6rem; min-height: 36px; padding: 6px 10px; border-radius: var(--st-radius-sm);
  color: var(--st-ink); font-size: .9rem; text-decoration: none; transition: background-color .12s, color .12s;
}
.st-nav__item .bi { flex: none; width: 1.1rem; color: var(--st-muted); }
.st-nav__item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-nav__item:hover { background: var(--st-soft); color: var(--st-ink); }
.st-nav__item.is-active { background: var(--st-accent-soft); color: var(--st-accent); font-weight: 600; }
.st-nav__item.is-active .bi { color: var(--st-accent); }
.st-nav__item.is-dim { opacity: .35; }
.st-nav__count { flex: none !important; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--st-accent); color: var(--st-on-accent); font-size: .7rem; font-weight: 700; text-align: center; }
.st-nav__count:empty { display: none; }
.st-nav__ext { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--st-line); }
.st-nav__empty { margin: 8px 10px 0; color: var(--st-muted); font-size: .82rem; }

/* Sections */
.st-section {
  padding: 20px 22px 22px; background: var(--st-surface); border: 1px solid var(--st-line); border-radius: var(--st-radius); box-shadow: var(--st-shadow);
  scroll-margin-top: 80px;
}
.st--js .st-section:not(.is-active) { display: none; }
.st-section__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.st-section__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--st-radius-sm); background: var(--st-accent-soft); color: var(--st-accent); font-size: 1.2rem; }
html[data-bs-theme] .st .st-section__title { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--st-ink); }
.st-section__desc { margin: 3px 0 0; color: var(--st-muted); font-size: .88rem; }
.st-section__badge { margin-left: auto; }

.st-group { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--st-line); scroll-margin-top: 80px; }
.st-group:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.st-section__head + .st-group { padding-top: 0; margin-top: 0; border-top: 0; }
html[data-bs-theme] .st .st-group__title { margin: 0 0 4px; font-size: 1rem; font-weight: 650; color: var(--st-ink); }
.st-group__desc { margin: 0 0 14px; color: var(--st-muted); font-size: .85rem; }
.st-group__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.st-group__head .st-group__desc { margin-bottom: 0; }

.st-grid { display: grid; gap: 14px 16px; }
.st-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-span-2 { grid-column: span 2; }
.st-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-field + .st-field, .st-field + .st-switch, .st-switch + .st-field { margin-top: 14px; }
.st-grid > .st-field + .st-field, .st-grid > .st-switch + .st-field, .st-grid > .st-field + .st-switch { margin-top: 0; }
.st-label { margin: 0; color: var(--st-ink); font-size: .86rem; font-weight: 600; }
.st-hint { margin: 0; color: var(--st-muted); font-size: .8rem; line-height: 1.4; }
.st-hint code { font-size: .78rem; }
.st .form-check { margin: 0; }
.st-switch { display: block; min-height: 1.5rem; }
.st-switch + .st-switch { margin-top: 10px; }
.st-switch .form-check-label { font-size: .9rem; }
.st-switch .st-hint { margin-top: 2px; }
.st-radios { display: flex; flex-direction: column; gap: 8px; }
.st-inline { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.st-inline > .st-field { flex: 1 1 220px; }
.st-mono { font-family: var(--bs-font-monospace, ui-monospace, monospace); }
.st-hint--key code { overflow-wrap: anywhere; }
.st-note {
  display: flex; align-items: flex-start; gap: .55rem; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--st-radius-sm);
  background: var(--st-soft); color: var(--st-muted); font-size: .84rem; line-height: 1.45;
}
.st-note > .bi { flex: none; margin-top: 1px; }
.st-note a { color: var(--st-accent); }
.st-note--warn { background: color-mix(in srgb, var(--st-warn) 12%, var(--st-surface)); color: var(--st-ink); }
.st-note--warn > .bi { color: var(--st-warn); }
.st-note--ok > .bi { color: var(--st-ok); }
.st-box { padding: 14px; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); }
.st-box + .st-box { margin-top: 12px; }
.st-pill { display: inline-flex; align-items: center; gap: .35rem; padding: 2px 10px; border-radius: 999px; background: var(--st-soft); color: var(--st-muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.st-pill--ok { background: color-mix(in srgb, var(--st-ok) 14%, var(--st-surface)); color: var(--st-ok); }
.st-pill--warn { background: color-mix(in srgb, var(--st-warn) 14%, var(--st-surface)); color: var(--st-warn); }
.st-pill--accent { background: var(--st-accent-soft); color: var(--st-accent); }

/* Status tiles (diagnostics, WebRTC test, health, push queue) */
.st-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.st-stat { padding: 10px 12px; border-radius: var(--st-radius-sm); background: var(--st-soft); min-width: 0; }
.st-stat__label { color: var(--st-muted); font-size: .75rem; }
.st-stat__value { margin-top: 2px; font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; }
.st-stat__sub { color: var(--st-muted); font-size: .75rem; }
[data-tone="success"] { color: var(--st-ok); }
[data-tone="warning"] { color: var(--st-warn); }
[data-tone="danger"] { color: var(--st-bad); }
[data-tone="muted"] { color: var(--st-muted); }
.st-log { max-height: 280px; margin: 8px 0 0; padding: 10px; overflow: auto; border-radius: var(--st-radius-sm); background: var(--st-soft); color: var(--st-ink); font-size: .75rem; white-space: pre-wrap; }
.st-details > summary { cursor: pointer; color: var(--st-muted); font-size: .85rem; }

/* Search hits and read-only links */
.st .is-hit { border-radius: var(--st-radius-sm); background: var(--st-accent-soft); box-shadow: 0 0 0 6px var(--st-accent-soft); }
.st a[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Save bar */
.st-savebar {
  position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px;
  background: var(--st-solid); border: 1px solid var(--st-line); border-radius: 999px; box-shadow: var(--st-shadow);
  transition: box-shadow .2s, border-color .2s;
}
.st-savebar__state { flex: 1; min-width: 0; color: var(--st-muted); font-size: .86rem; }
.st-savebar.is-dirty { border-color: color-mix(in srgb, var(--st-accent) 45%, var(--st-line)); box-shadow: var(--st-float); }
.st-savebar.is-dirty .st-savebar__state { color: var(--st-ink); font-weight: 600; }
.st-savebar.is-dirty .st-savebar__state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--st-accent); vertical-align: 1px; }
.st-savebar.is-hidden { display: none; }

/* Appearance: languages */
.st-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.st-lang { padding: 10px 12px; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); }
.st-lang.is-current { border-color: var(--st-accent); }
.st-lang__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.st-lang__name { font-weight: 650; }
.st-lang__sub { color: var(--st-muted); font-size: .76rem; }
.st-lang__meter { height: 4px; margin: 8px 0 6px; overflow: hidden; border-radius: 4px; background: var(--st-soft); }
.st-lang__meter span { display: block; width: 0; height: 100%; background: var(--st-accent); }
.st-lang__stats { display: flex; gap: 10px; flex-wrap: wrap; color: var(--st-muted); font-size: .76rem; }
.st-samples { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.st-samples code { padding: 1px 6px; border-radius: 6px; background: var(--st-soft); font-size: .72rem; }

/* Home page blocks */
.st-order { display: flex; flex-direction: column; gap: 6px; }
.st-order__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); background: var(--st-surface); }
.st-order__pos { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--st-soft); color: var(--st-muted); font-size: .78rem; font-weight: 700; }
.st-order__label { flex: 1; min-width: 0; font-weight: 600; }
.st-order__move { display: flex; gap: 4px; }
.st-iconbtn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--st-line); border-radius: 50%; background: var(--st-surface); color: var(--st-muted); cursor: pointer; }
.st-iconbtn:hover:not(:disabled) { background: var(--st-soft); color: var(--st-ink); }
.st-iconbtn:disabled { opacity: .35; cursor: default; }

/* Branding */
.st-brand { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.st-brand__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); min-width: 0; }
.st-brand__item img { flex: none; object-fit: contain; border-radius: 8px; background: var(--st-soft); }
.st-brand__item--logo img { width: auto; height: 40px; max-width: 160px; }
.st-brand__item--favicon img { width: 32px; height: 32px; }
.st-brand__item--pwa img { width: 40px; height: 40px; }
.st-brand__label { color: var(--st-muted); font-size: .76rem; }
.st-brand__path { max-width: 220px; overflow: hidden; color: var(--st-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }

/* Access: role matrix */
.st-matrix { width: 100%; overflow-x: auto; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); }
.st-matrix + .st-matrix { margin-top: 12px; }
.st-matrix table { width: 100%; margin: 0; border-collapse: collapse; font-size: .84rem; }
.st-matrix th, .st-matrix td { padding: 7px 10px; border-bottom: 1px solid var(--st-line); }
.st-matrix tr:last-child td { border-bottom: 0; }
.st-matrix thead th { background: var(--st-soft); color: var(--st-muted); font-size: .74rem; font-weight: 700; text-align: center; white-space: nowrap; }
.st-matrix thead th:first-child { text-align: left; }
.st-matrix td { text-align: center; }
.st-matrix td:first-child { color: var(--st-ink); text-align: left; }
.st-matrix caption { caption-side: top; padding: 8px 10px; color: var(--st-ink); font-weight: 650; }

/* Push delivery trend: bar heights come from data-st-height (settings-diagnostics.js) */
.st-trend { padding: 12px; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); }
.st-trend__legend { display: flex; gap: 12px; margin-bottom: 8px; color: var(--st-muted); font-size: .72rem; }
.st-trend__legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--bar); }
.st-trend__days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.st-trend__day { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.st-trend__track { display: flex; align-items: flex-end; height: 72px; border-radius: 4px; background: var(--st-soft); overflow: hidden; }
.st-trend__bars { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 2%; min-height: 2px; }
.st-trend__bar { width: 100%; min-height: 1px; background: var(--bar); }
.st-trend__label { overflow: hidden; color: var(--st-muted); font-size: .64rem; text-align: center; white-space: nowrap; }
.st-trend .is-payload { --bar: var(--st-ok); }
.st-trend .is-wake { --bar: var(--st-accent); }
.st-trend .is-error { --bar: var(--st-bad); }
.st-trend__bar.is-empty { --bar: var(--st-line); height: 2px; }

/* Push devices table */
.st-table { width: 100%; overflow-x: auto; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); }
.st-table table { width: 100%; margin: 0; border-collapse: collapse; font-size: .8rem; }
.st-table th { padding: 8px 10px; background: var(--st-soft); color: var(--st-muted); font-size: .72rem; font-weight: 700; text-align: left; white-space: nowrap; }
.st-table td { padding: 8px 10px; border-top: 1px solid var(--st-line); vertical-align: top; }
.st-table .st-btns { flex-wrap: nowrap; justify-content: flex-end; }
.st-endpoint { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.st-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 10px 0; padding: 12px; border-radius: var(--st-radius-sm); background: var(--st-soft); }
.st-filters .st-field { flex: 1 1 200px; }

/* ───────────── Phones and tablets ───────────── */
@media (max-width: 991.98px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-side { position: static; }
  .st-side__box { max-height: none; overflow: visible; padding: 0; }
  .st-side__box[open] { padding: 0 10px 10px; }
  .st-side__toggle {
    display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; font-weight: 650;
  }
  .st-side__toggle::-webkit-details-marker { display: none; }
  .st-side__toggle > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-side__toggle > .bi:first-child { color: var(--st-accent); }
  .st-side__toggle > .bi:last-child { color: var(--st-muted); transition: transform .15s; }
  .st-side__box[open] .st-side__toggle { margin: 0 -10px 8px; border-bottom: 1px solid var(--st-line); }
  .st-side__box[open] .st-side__toggle > .bi:last-child { transform: rotate(180deg); }
  .st-search kbd { display: none; }
  .st-search input { padding-right: 12px; }
}
@media (max-width: 767.98px) {
  .st { padding-top: 8px; gap: 12px; }
  html[data-bs-theme] .st .st-title { font-size: 1.4rem; }
  .st-section { padding: 16px 14px 18px; }
  .st-section__icon { width: 36px; height: 36px; font-size: 1.05rem; }
  html[data-bs-theme] .st .st-section__title { font-size: 1.1rem; }
  .st-grid--2, .st-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .st-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-trend__label { font-size: .56rem; }
  .st-span-2 { grid-column: auto; }
  .st-savebar { position: fixed; left: 10px; right: 10px; bottom: calc(max(var(--island-space), env(safe-area-inset-bottom)) + 8px); border-radius: var(--st-radius); padding: 8px 8px 8px 14px; transition: transform .2s, opacity .2s; }
  /* On phones the bar only rises when there is something to save. */
  .st-savebar:not(.is-dirty) { transform: translateY(24px); opacity: 0; pointer-events: none; }
  .st-savebar__state { font-size: .8rem; }
  .st-main { padding-bottom: 72px; }
  .st-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === source: public/css/ui-settings-design.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Settings → Оформление сайта (views/settings/design.php; .sd-*). Theme
 * cards with a small drawing of each theme, button rows instead of selects,
 * picture cards for fonts, windows and backgrounds, a live sample. The page
 * itself follows every change (settings-design.js sets the same <html>
 * attributes and --t-* tokens the site uses), so everything here is drawn
 * on the canonical --ds-* tokens; only the theme drawings carry their own
 * colors (--m-*).
 */

.sd { --sd-pic-r: max(3px, calc(var(--ds-radius-control, 10px) - 4px)); container: sd / inline-size; }

/* ───── Themes ───── */
.sd-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sd-title .st-group__title { margin-bottom: 0; }
.sd-state:not(:empty) { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .7rem; border-radius: 999px; background: var(--ds-soft); color: var(--ds-muted); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.sd-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.sd-theme {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 7px 7px 10px; text-align: left;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card, 14px); background: var(--ds-surface); color: var(--ds-ink); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sd-theme:hover { border-color: color-mix(in srgb, var(--m-accent) 45%, var(--ds-line)); transform: translateY(-1px); }
.sd-theme.is-active { border-color: var(--m-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 22%, transparent); }
.sd-theme:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.sd-theme:disabled { cursor: default; opacity: .7; transform: none; }
.sd-theme__name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 3px 0; font-size: .88rem; font-weight: 650; line-height: 1.2; }
.sd-theme__name .bi { color: var(--m-accent); font-size: .95rem; opacity: 0; transition: opacity .15s; }
.sd-theme.is-active .sd-theme__name .bi { opacity: 1; }
.sd-theme__desc { padding: 0 3px; color: var(--ds-muted); font-size: .74rem; line-height: 1.35; }
.sd-field--theme { margin-top: 16px; }

/* A theme drawn small: top bar, menu with the accent pill, a window with text and a button. */
.sd-mock {
  --w-surface: rgba(255, 255, 255, .9); --w-line: rgba(24, 35, 55, .13); --w-ink: rgba(24, 35, 55, .6);
  position: relative; display: grid; grid-template-columns: 24% 1fr; grid-template-rows: 15% 1fr; gap: 5px;
  aspect-ratio: 16 / 10; padding: 5px; overflow: hidden; border-radius: calc(var(--ds-radius-card, 14px) - 7px); font-family: var(--m-font, inherit);
}
.sd-mock__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 6px; border-radius: 6px; background: var(--w-surface); }
.sd-mock__top i { width: 9px; height: 9px; border-radius: 50%; background: var(--w-line); }
.sd-mock__side { display: flex; flex-direction: column; gap: 4px; padding: 5px 4px; border-radius: var(--m-radius, 8px); background: var(--w-surface); }
.sd-mock__side i { height: 7px; border-radius: 4px; background: var(--w-line); }
.sd-mock__side i.is-on { background: var(--m-accent); }
.sd-mock__main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px; border-radius: var(--m-radius, 8px); background: var(--w-surface); box-shadow: 0 0 0 1px var(--w-line); }
.sd-mock__main b { color: var(--w-ink); font-size: 1.05rem; font-weight: 700; line-height: 1; }
.sd-mock__main i { width: 92%; height: 5px; border-radius: 3px; background: var(--w-line); }
.sd-mock__main i.is-short { width: 60%; }
.sd-mock__main em { margin-top: auto; padding: 2px 9px; border-radius: max(3px, calc(var(--m-radius, 8px) * .7)); background: var(--m-accent); color: var(--m-on, #fff); font-size: .62rem; font-style: normal; font-weight: 700; }
.sd-mock[data-preset="clear_opus"] { --w-surface: #fff; }
.sd-mock[data-preset="noir"] { --w-surface: #e6e8ec; }
.sd-mock[data-palette="contrast"] { --w-line: rgba(16, 24, 38, .24); --w-ink: rgba(16, 24, 38, .85); }
html[data-bs-theme="dark"] .sd-mock { --w-surface: rgba(25, 33, 46, .92); --w-line: rgba(232, 237, 245, .16); --w-ink: rgba(232, 237, 245, .75); }
html[data-bs-theme="dark"] .sd-mock[data-preset="clear_opus"] { --w-surface: #1e2633; }
html[data-bs-theme="dark"] .sd-mock[data-preset="noir"] { --w-surface: #11161f; }
html[data-bs-theme="dark"] .sd-mock:is([data-tone="gray"], [data-tone="deep"]) { --w-surface: #1e1e21; --w-line: rgba(255, 255, 255, .14); }

/* Background drawings (theme cards and the background picker). */
.sd-bg {
  --b-accent: var(--m-accent, var(--ds-accent)); --b-base: #f2f3f6;
  --b-warm: rgba(236, 118, 88, .26); --b-cool: rgba(82, 190, 178, .24); --b-line: rgba(24, 35, 55, .07);
  background: var(--b-base);
}
html[data-bs-theme="dark"] .sd-bg { --b-base: #10151f; --b-warm: rgba(236, 118, 88, .2); --b-cool: rgba(82, 190, 178, .18); --b-line: rgba(232, 237, 245, .07); }
/* A theme card draws its own background tone; the background picker draws the page's. */
.sd-bg[data-tone="tinted"] { --b-base: color-mix(in srgb, #f4f5f7 89%, var(--b-accent)); }
.sd-bg[data-tone="gray"] { --b-base: #f1f1f3; }
.sd-bg[data-tone="deep"] { --b-base: #e6e8ec; }
html[data-bs-theme="dark"] .sd-bg[data-tone="tinted"] { --b-base: color-mix(in srgb, #0d1118 87%, var(--b-accent)); }
html[data-bs-theme="dark"] .sd-bg[data-tone="gray"] { --b-base: #131315; }
html[data-bs-theme="dark"] .sd-bg[data-tone="deep"] { --b-base: #000; }
html[data-bs-theme] .sd-mini.sd-bg { --b-base: var(--ds-bg); }
.sd-bg--mono { background: var(--b-base); }
.sd-bg--plain {
  background:
    radial-gradient(70% 70% at 0 0, color-mix(in srgb, var(--b-warm) 50%, transparent), transparent 64%),
    radial-gradient(70% 70% at 100% 0, color-mix(in srgb, var(--b-cool) 50%, transparent), transparent 66%),
    var(--b-base);
}
.sd-bg--aurora {
  background:
    radial-gradient(90% 80% at 0 0, var(--b-warm), transparent 62%),
    radial-gradient(90% 80% at 100% 0, var(--b-cool), transparent 64%),
    radial-gradient(80% 70% at 55% 115%, color-mix(in srgb, var(--b-accent) 30%, transparent), transparent 66%),
    var(--b-base);
}
.sd-bg--mesh {
  background:
    radial-gradient(70% 60% at 6% 6%, var(--b-warm), transparent 66%),
    radial-gradient(65% 60% at 100% 8%, var(--b-cool), transparent 68%),
    radial-gradient(60% 55% at 50% 105%, color-mix(in srgb, var(--b-accent) 32%, transparent), transparent 70%),
    radial-gradient(40% 40% at 76% 72%, var(--b-cool), transparent 70%),
    var(--b-base);
}
.sd-bg--grid {
  background:
    repeating-linear-gradient(90deg, var(--b-line) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, var(--b-line) 0 1px, transparent 1px 12px),
    radial-gradient(90% 80% at 0 0, var(--b-warm), transparent 60%),
    var(--b-base);
}
.sd-bg--paper {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--b-accent) 9%, transparent), transparent 30%),
    repeating-linear-gradient(0deg, var(--b-line) 0 1px, transparent 1px 8px),
    var(--b-base);
}

/* ───── Columns: the sample beside the settings when there is room ───── */
.sd-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; margin-top: 18px; }
.sd-main { min-width: 0; }
.sd-main > .st-group:first-child { padding-top: 18px; border-top: 1px solid var(--ds-line); }
@container sd (min-width: 860px) {
  .sd-cols { grid-template-columns: minmax(0, 1fr) 270px; }
  .sd-main { grid-column: 1; grid-row: 1; }
  .sd-preview { grid-column: 2; grid-row: 1; position: sticky; top: 76px; align-self: start; }
}

/* ───── Live sample: drawn with the page's own tokens ───── */
.sd-preview { min-width: 0; margin-bottom: 4px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card, 14px); overflow: hidden; background: var(--ds-soft); }
.sd-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 14px; color: var(--ds-muted); font-size: .78rem; font-weight: 650; }
.sd-look { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--ds-surface-solid, var(--ds-surface)); border: 1px solid var(--ds-line); }
.sd-look__btn { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ds-muted); cursor: pointer; }
.sd-look__btn.is-active { background: var(--ds-accent-soft); color: var(--ds-accent); }
.sd-look__btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.sd-pv { display: flex; flex-direction: column; gap: var(--ds-gap, 12px); padding: 14px; background: radial-gradient(90% 70% at 100% 0, rgba(var(--t-accent-rgb), .14), transparent 70%), var(--ds-bg); }
.sd-pv__card {
  display: flex; flex-direction: column; gap: 8px; padding: var(--ds-panel-pad, 14px); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card, 14px);
  background: var(--ds-surface); box-shadow: var(--ds-shadow); backdrop-filter: blur(var(--ds-glass-blur, 0px));
}
.sd-pv__title { color: var(--ds-ink); font-size: 1rem; font-weight: var(--ds-heading-weight, 650); letter-spacing: var(--ds-heading-tracking, -.01em); line-height: 1.25; }
.sd-pv__text { margin: 0; color: var(--ds-muted); font-size: .82rem; line-height: 1.45; }
.sd-pv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sd-pv__row .form-control { flex: 1 1 110px; min-width: 0; pointer-events: none; }
.sd-pv__row .btn { flex: none; pointer-events: none; }
.sd-pv__chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 .6rem; border-radius: 999px; background: var(--ds-soft); color: var(--ds-muted); font-size: .74rem; font-weight: 600; }
.sd-pv__chip.is-on { background: var(--ds-accent-soft); color: var(--ds-accent); }
.sd-pv__link { color: var(--ds-accent); font-size: .78rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sd-pv__chat { display: flex; flex-direction: column; gap: 4px; }
.sd-pv__msg { --pad: 7px 11px; align-self: flex-start; max-width: 85%; padding: var(--pad); border: 1px solid var(--ds-line); border-radius: 14px 14px 14px 5px; background: var(--ds-surface); color: var(--ds-ink); font-size: .8rem; line-height: 1.35; }
.sd-pv__msg.is-out { align-self: flex-end; border-color: transparent; border-radius: 14px 14px 5px 14px; background: var(--ds-primary); color: var(--ds-on-primary); }
html[data-ui-chat-density="compact"] .sd-pv__msg { --pad: 4px 9px; }
html[data-ui-chat-density="roomy"] .sd-pv__msg { --pad: 10px 14px; }

/* ───── Rows of buttons (a radio group) ───── */
.sd-field + .sd-field, .sd-field + .st-switch, .st-switch + .sd-field, .sd-pair + .sd-field, .sd-field + .sd-pair { margin-top: 16px; }
.sd-field .st-label { display: block; margin-bottom: 0; }
.sd-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 3px; max-width: 100%; padding: 3px; border-radius: calc(var(--ds-radius-control, 10px) + 3px); background: var(--ds-soft); }
.sd-seg__opt { position: relative; margin: 0; cursor: pointer; }
.sd-seg__opt input, .sd-card input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sd-seg__opt span {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: 0 .85rem; border-radius: var(--ds-radius-control, 10px);
  color: var(--ds-muted); font-size: .84rem; font-weight: 600; white-space: nowrap; transition: background-color .12s, color .12s, box-shadow .12s;
}
.sd-seg__opt:hover span { color: var(--ds-ink); }
.sd-seg__opt input:checked + span { background: var(--ds-surface-solid, var(--ds-surface)); color: var(--ds-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 0 0 1px var(--ds-line); }
.sd-seg__opt input:focus-visible + span { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.sd-seg__opt input:disabled + span { cursor: default; opacity: .6; }
.sd-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 20px; }
.sd-pair > .sd-field { margin-top: 0; }
@container sd (min-width: 600px) { .sd-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-sub { margin: 10px 0 0 2.6rem; transition: opacity .15s; }
.sd-sub.is-off { opacity: .45; }

/* ───── Picture cards (fonts, windows, backgrounds) ───── */
.sd-cards { display: grid; gap: 8px; }
.sd-cards--fonts { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.sd-cards--wins { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.sd-cards--bgs { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.sd-cards--tones { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.sd-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding: 6px 6px 8px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control, 10px); background: var(--ds-surface); cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.sd-card:hover { border-color: color-mix(in srgb, var(--ds-accent) 40%, var(--ds-line)); }
.sd-card:has(input:checked) { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
.sd-card:has(input:focus-visible) { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.sd-card:has(input:disabled) { cursor: default; opacity: .7; }
.sd-card__name { padding: 0 2px; color: var(--ds-ink); font-size: .82rem; font-weight: 650; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
.sd-card__hint { padding: 0 2px; color: var(--ds-muted); font-size: .72rem; line-height: 1.3; }
.sd-font__sample { font-family: var(--f, inherit); display: grid; place-items: center; height: 46px; border-radius: var(--sd-pic-r); background: var(--ds-soft); color: var(--ds-ink); font-size: 1.55rem; font-weight: 600; line-height: 1; }
.sd-mini { position: relative; display: block; height: 50px; border-radius: var(--sd-pic-r); overflow: hidden; }
.sd-mini i { position: absolute; inset: 9px 12px 0; border-radius: var(--sd-pic-r) var(--sd-pic-r) 0 0; background: var(--w-surface, #fff); box-shadow: 0 0 0 1px var(--w-line, rgba(24, 35, 55, .12)); }
.sd-mini[data-preset] { --w-surface: rgba(255, 255, 255, .9); --w-line: rgba(24, 35, 55, .12); }
.sd-mini[data-preset="clear_opus"] { --w-surface: #fff; }
.sd-mini[data-preset="noir"] { --w-surface: #e6e8ec; }
html[data-bs-theme="dark"] .sd-mini[data-preset] { --w-surface: rgba(25, 33, 46, .92); --w-line: rgba(232, 237, 245, .14); }
html[data-bs-theme="dark"] .sd-mini[data-preset="clear_opus"] { --w-surface: #1e2633; }
html[data-bs-theme="dark"] .sd-mini[data-preset="noir"] { --w-surface: #11161f; }
/* A background tone drawn as day | night, each with a window on it. */
.sd-tone {
  --day: #f2f3f6; --night: #10151f; --day-win: #fff; --night-win: #19212e;
  display: grid; grid-template-columns: 1fr 1fr; height: 50px; overflow: hidden; border-radius: var(--sd-pic-r); box-shadow: inset 0 0 0 1px var(--ds-line);
}
.sd-tone i { position: relative; display: block; background: var(--day); }
.sd-tone i + i { background: var(--night); }
.sd-tone i::after { content: ""; position: absolute; inset: 11px 9px 0; border-radius: var(--sd-pic-r) var(--sd-pic-r) 0 0; background: var(--day-win); box-shadow: 0 0 0 1px rgba(24, 35, 55, .1); }
.sd-tone i + i::after { background: var(--night-win); box-shadow: 0 0 0 1px rgba(232, 237, 245, .1); }
.sd-tone[data-tone="tinted"] { --day: color-mix(in srgb, #f4f5f7 89%, var(--ds-accent)); --night: color-mix(in srgb, #0d1118 87%, var(--ds-accent)); }
.sd-tone[data-tone="gray"] { --day: #f1f1f3; --night: #131315; --night-win: #1e1e21; }
.sd-tone[data-tone="deep"] { --day: #e6e8ec; --night: #000; --night-win: #161618; }

/* ───── Accent ───── */
.sd-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-swatch {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--sw); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .12s, box-shadow .12s;
}
.sd-swatch:hover { transform: scale(1.08); }
.sd-swatch.is-active { box-shadow: 0 0 0 2px var(--ds-surface-solid, #fff), 0 0 0 4px var(--sw); }
.sd-swatch.is-active:not(.sd-swatch--custom)::after { content: "\F633"; font-family: bootstrap-icons; font-size: .95rem; color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .35); }
.sd-swatch:focus-visible, .sd-swatch--custom:focus-within { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
.sd-swatch:disabled { cursor: default; transform: none; }
.sd-swatch--custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #0ea5e9, #8b5cf6, #ec4899, #ef4444); }
.sd-swatch--custom.is-active { background: var(--sw); }
.sd-swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; opacity: 0; cursor: pointer; }
.sd-swatch--custom .bi { font-size: .85rem; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .45); pointer-events: none; }
.sd-hexrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.st .sd-hex { width: 112px; flex: none; font-family: var(--t-font-mono, ui-monospace, monospace); font-size: .85rem; text-transform: lowercase; }
.sd-contrast { display: inline-flex; align-items: center; gap: .5rem; color: var(--ds-muted); font-size: .8rem; }
.sd-contrast__dot { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 7px; background: var(--ds-primary); color: var(--ds-on-primary); font-size: .74rem; font-weight: 700; }

/* ───── Sliders ───── */
.sd-range { display: flex; align-items: center; gap: 12px; max-width: 460px; }
.sd-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ds-accent); }
.sd-range__value { flex: none; min-width: 54px; padding: 3px 8px; border-radius: 999px; background: var(--ds-soft); color: var(--ds-ink); font-size: .8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.sd-corner { flex: none; width: 30px; height: 30px; border-top: 3px solid var(--ds-accent); border-left: 3px solid var(--ds-accent); border-top-left-radius: var(--t-radius, 18px); }

@container sd (max-width: 420px) {
  .sd-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sd-theme__desc { display: none; }
  .sd-seg { display: flex; align-self: stretch; }
  .sd-seg__opt { flex: 1 1 auto; }
  .sd-seg__opt span { justify-content: center; width: 100%; padding: 0 .6rem; }
  .sd-cards--wins { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-cards--bgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-sub { margin-left: 0; }
}
/* On a phone a row of buttons spans the field (also the personal «Тема»). */
@media (max-width: 575.98px) {
  .st-field > .sd-seg { display: flex; align-self: stretch; }
  .st-field > .sd-seg .sd-seg__opt { flex: 1 1 auto; }
  .st-field > .sd-seg .sd-seg__opt span { justify-content: center; width: 100%; padding: 0 .5rem; }
}

/* === source: public/css/ui-cloud.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Cloud pages: SkyBox and FileHub (views/skybox.php, views/filehub.php,
 * views/cloud/*; .cb-*), the file viewer page (views/file_viewer.php; .fv-*),
 * a share link (views/share.php; .sh-*) and the SkyBox picker window
 * (views/partials/file_explorer_picker.php; .fxp-*). Colours, radii and
 * shadows come from the canonical --ds-* theme tokens, so the saved accent,
 * radius, palette and dark theme apply as everywhere else.
 */

.cb, .fv, .sh, .cb-menu, .cb-modal, .cb-frame, .cb-ghost, .fxp-modal {
  --cb-surface: var(--ds-surface, #fff);
  --cb-solid: var(--ds-surface-solid, var(--ds-surface, #fff));
  --cb-soft: var(--ds-soft, #f1f3f8);
  --cb-ink: var(--ds-ink, #182337);
  --cb-muted: var(--ds-muted, #637086);
  --cb-line: var(--ds-line, rgba(24, 35, 55, .14));
  --cb-accent: var(--ds-accent, #4f46e5);
  --cb-accent-soft: var(--ds-accent-soft, #eef0ff);
  --cb-on-accent: var(--ds-on-primary, #fff);
  --cb-radius: var(--ds-radius-card, 14px);
  --cb-radius-sm: var(--ds-radius-control, 10px);
  --cb-shadow: var(--ds-shadow, 0 1px 2px rgba(15, 23, 42, .06));
  --cb-float: 0 18px 48px rgba(15, 23, 42, .22);
  --cb-danger: #d63a4a;
  color: var(--cb-ink);
}

/* ───────────── Buttons ───────────── */
.cb-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 38px; padding: 0 1rem;
  border: 1px solid var(--cb-line); border-radius: 999px; background: var(--cb-surface); color: var(--cb-ink);
  font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cb-btn:hover { background: var(--cb-soft); color: var(--cb-ink); }
.cb-btn .bi { font-size: 1rem; }
.cb-btn--primary { background: var(--cb-accent); border-color: var(--cb-accent); color: var(--cb-on-accent); }
.cb-btn--primary:hover { background: color-mix(in srgb, var(--cb-accent) 88%, #000); color: var(--cb-on-accent); }
.cb-btn--danger { background: var(--cb-danger); border-color: var(--cb-danger); color: #fff; }
.cb-btn--danger:hover { background: color-mix(in srgb, var(--cb-danger) 88%, #000); color: #fff; }
.cb-btn:focus-visible, .cb-btn:focus-within, .cb-icon-btn:focus-visible, .cb-chip:focus-visible, .cb-seg__btn:focus-visible,
.cb-node:focus-visible, .cb-item__main:focus-visible, .cb-item__more:focus-visible, .cb-menu__item:focus-visible, .cb-selbar__btn:focus-visible {
  outline: 2px solid var(--cb-accent); outline-offset: 2px;
}
.cb-icon-btn {
  flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--cb-muted); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s;
}
.cb-icon-btn:hover { background: var(--cb-soft); color: var(--cb-ink); }
.cb-pill { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .8rem; border-radius: 999px; background: var(--cb-soft); color: var(--cb-muted); font-size: .8rem; font-weight: 600; }
.cb form { margin: 0; }
.cb-upload { display: inline-flex; }
.cb-upload__input { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ───────────── Page ───────────── */
.cb { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 32px; }
.cb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
html[data-bs-theme] .cb .cb-title { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.15; letter-spacing: var(--ds-heading-tracking, -.01em); color: var(--cb-ink); }
.cb-sub { margin: 4px 0 0; color: var(--cb-muted); font-size: .875rem; }
.cb-head__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cb-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.cb-main {
  min-width: 0; min-height: 420px; padding: 14px 16px 18px;
  background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: var(--cb-radius); box-shadow: var(--cb-shadow);
}
.cb.is-selecting .cb-main { padding-bottom: 84px; }

/* Sidebar */
.cb-side { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
.cb-side__box { padding: 10px; background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: var(--cb-radius); box-shadow: var(--cb-shadow); }
.cb-side__toggle { display: none; }
.cb-side__section + .cb-side__section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cb-line); }
.cb-side__title { padding: 4px 10px 6px; color: var(--cb-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cb-side__note { margin: 6px 10px 2px; color: var(--cb-muted); font-size: .78rem; line-height: 1.35; }
.cb-node {
  --d: 0;
  display: flex; align-items: center; gap: .55rem; min-height: 36px; padding: 6px 10px 6px calc(10px + var(--d) * 14px);
  border-radius: var(--cb-radius-sm); color: var(--cb-ink); font-size: .9rem; text-decoration: none; transition: background-color .12s, color .12s;
}
.cb-node[data-depth="1"] { --d: 0; }
.cb-node[data-depth="2"] { --d: 1; }
.cb-node[data-depth="3"] { --d: 2; }
.cb-node[data-depth="4"] { --d: 3; }
.cb-node[data-depth="5"] { --d: 4; }
.cb-node[data-depth="6"] { --d: 5; }
.cb-node .bi { flex: none; color: var(--cb-muted); font-size: 1rem; }
.cb-node:hover { background: var(--cb-soft); color: var(--cb-ink); }
.cb-node.is-active { background: var(--cb-accent-soft); color: var(--cb-accent); font-weight: 600; }
.cb-node.is-active .bi { color: var(--cb-accent); }
.cb-node__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-node__code { flex: none; padding: 1px 6px; border-radius: 6px; background: var(--cb-soft); color: var(--cb-muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.cb-node__count { flex: none; color: var(--cb-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.cb-node.is-drop, .cb-item.is-drop { background: var(--cb-accent-soft); box-shadow: inset 0 0 0 2px var(--cb-accent); }

/* Path and tools */
.cb-bar { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.cb-path { flex: 1 1 auto; min-width: 0; }
.cb-path ol { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.cb-path ol::-webkit-scrollbar { display: none; }
.cb-path li { display: flex; align-items: center; flex: none; max-width: 260px; font-size: .95rem; }
.cb-path li + li::before { content: "›"; margin: 0 4px; color: var(--cb-muted); }
.cb-path a, .cb-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-path a { padding: 4px 6px; border-radius: 8px; color: var(--cb-muted); text-decoration: none; }
.cb-path a:hover { background: var(--cb-soft); color: var(--cb-ink); }
.cb-path [aria-current] { padding: 4px 6px; color: var(--cb-ink); font-weight: 650; }
.cb-bar__count { flex: none; color: var(--cb-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

.cb-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.cb-search {
  position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 200px; max-width: 460px; height: 38px; margin: 0;
  background: var(--cb-soft); border: 1px solid transparent; border-radius: 999px; transition: border-color .15s, background-color .15s;
}
.cb-search:focus-within { background: var(--cb-surface); border-color: var(--cb-accent); }
.cb-search > .bi-search { position: absolute; left: 13px; color: var(--cb-muted); pointer-events: none; }
.cb-search input { flex: 1; min-width: 0; height: 100%; padding: 0 36px 0 38px; border: 0; background: transparent; color: var(--cb-ink); font-size: .9rem; outline: none; }
.cb-search input::-webkit-search-cancel-button { display: none; }
.cb-search__reset { position: absolute; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--cb-muted); text-decoration: none; }
.cb-search__reset:hover { background: var(--cb-line); color: var(--cb-ink); }
.cb-chips { display: flex; gap: 6px; order: 3; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cb-tools > .cb-search { order: 1; }
.cb-chips::-webkit-scrollbar { display: none; }
.cb-chip {
  flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--cb-line); border-radius: 999px; background: transparent;
  color: var(--cb-muted); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background-color .12s, color .12s, border-color .12s;
}
.cb-chip:hover { color: var(--cb-ink); background: var(--cb-soft); }
.cb-chip.is-active { background: var(--cb-accent-soft); border-color: transparent; color: var(--cb-accent); }
.cb-tools__end { display: flex; align-items: center; gap: 8px; order: 2; margin-left: auto; }
.cb-sort { position: relative; display: flex; align-items: center; margin: 0; }
.cb-sort .bi { position: absolute; left: 11px; color: var(--cb-muted); pointer-events: none; }
.cb-sort select {
  height: 34px; padding: 0 28px 0 32px; border: 1px solid var(--cb-line); border-radius: 999px; background-color: var(--cb-surface);
  color: var(--cb-ink); font-size: .82rem; font-weight: 600; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 11px) 15px; background-size: 4px 4px; background-repeat: no-repeat;
}
.cb-seg { display: flex; padding: 2px; border: 1px solid var(--cb-line); border-radius: 999px; }
.cb-seg__btn { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: var(--cb-muted); cursor: pointer; }
.cb-seg__btn.is-active { background: var(--cb-accent-soft); color: var(--cb-accent); }

.cb-note { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 14px; padding: 10px 12px; border-radius: var(--cb-radius-sm); background: var(--cb-soft); color: var(--cb-muted); font-size: .86rem; }
.cb-note a { color: var(--cb-accent); }

/* ───────────── Entries: tiles ───────────── */
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.cb-listhead { display: none; }
.cb-item {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--cb-radius-sm);
  border: 1px solid transparent; transition: background-color .12s, border-color .12s, box-shadow .12s;
  -webkit-user-select: none; user-select: none;
}
.cb-item[hidden] { display: none; }
.cb-item:hover { background: var(--cb-soft); }
.cb-item.is-selected { background: var(--cb-accent-soft); border-color: color-mix(in srgb, var(--cb-accent) 45%, transparent); }
.cb-item__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; color: inherit; text-decoration: none; border-radius: inherit; -webkit-touch-callout: none; }
.cb-item__main:hover { color: inherit; }
.cb-thumb {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: calc(var(--cb-radius-sm) - 2px); background: color-mix(in srgb, var(--k, var(--cb-muted)) 12%, var(--cb-surface));
  color: var(--k, var(--cb-muted));
}
.cb-thumb > .bi { font-size: 2.2rem; line-height: 1; }
.cb-thumb img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-thumb--folder { --k: #e0a526; }
.cb-thumb--folder > .bi { font-size: 2.6rem; }
.cb-thumb--image { --k: #2f8f6b; }
.cb-thumb--video { --k: #7c4ddb; }
.cb-thumb--audio { --k: #d27d14; }
.cb-thumb--pdf { --k: #d6453d; }
.cb-thumb--word { --k: #2f6fd6; }
.cb-thumb--sheet { --k: #1f8a4c; }
.cb-thumb--slides { --k: #d9631e; }
.cb-thumb--archive { --k: #8a6a3c; }
.cb-thumb--code { --k: #0f8a8a; }
.cb-thumb--text { --k: #5a6b85; }
.cb-badge {
  position: absolute; z-index: 2; left: 6px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cb-solid); color: #1f8a4c; font-size: .75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.cb-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-item__name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .875rem; font-weight: 600; line-height: 1.3; word-break: break-word; }
.cb-item__meta, .cb-item__owner, .cb-item__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cb-muted); font-size: .76rem; }
.cb-item__place {
  display: flex; align-items: center; gap: .35rem; margin: -4px 8px 8px; overflow: hidden; color: var(--cb-muted); font-size: .76rem;
  text-decoration: none; white-space: nowrap;
}
.cb-item__place span { overflow: hidden; text-overflow: ellipsis; }
.cb-item__place:hover { color: var(--cb-accent); }
.cb-item__size, .cb-item__date { display: none; }
.cb-item__lead { display: none; }
.cb-check {
  position: absolute; z-index: 2; top: 12px; left: 12px; display: grid; width: 24px; height: 24px; margin: 0; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.cb-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cb-check span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  border: 2px solid rgba(24, 35, 55, .35); color: transparent; font-size: .85rem; pointer-events: none; transition: background-color .12s, border-color .12s;
}
.cb-check input:checked + span { background: var(--cb-accent); border-color: var(--cb-accent); color: var(--cb-on-accent); }
.cb-check input:focus-visible + span { outline: 2px solid var(--cb-accent); outline-offset: 2px; }
.cb-item:hover .cb-check, .cb-item.is-selected .cb-check, .cb.is-selecting .cb-check, .cb-check:focus-within { opacity: 1; }
.cb-item--file .cb-check { display: grid; }
.cb-item__more {
  position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #253046; cursor: pointer; opacity: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16); transition: opacity .12s;
}
.cb-item:hover .cb-item__more, .cb-item__more:focus-visible, .cb-item__more[aria-expanded="true"] { opacity: 1; }
.cb-item--folder.is-drop .cb-thumb { background: color-mix(in srgb, var(--cb-accent) 18%, var(--cb-surface)); }
.cb.is-dragging .cb-item.is-selected { opacity: .55; }
.cb-item.is-dragged, .cb-item.is-cut { opacity: .5; }
.cb-node.is-drop-no, .cb-item.is-drop-no, .cb-path a.is-drop-no { box-shadow: inset 0 0 0 2px var(--cb-danger); cursor: no-drop; }
.cb-path a.is-drop { border-radius: 6px; background: var(--cb-accent-soft); box-shadow: 0 0 0 4px var(--cb-accent-soft); color: var(--cb-accent); }

/* "Вырезано" strip: cut here, paste in another folder. */
.cb-clip { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 8px 8px 14px; border: 1px dashed color-mix(in srgb, var(--cb-accent) 55%, var(--cb-line)); border-radius: var(--cb-radius-sm); background: var(--cb-accent-soft); color: var(--cb-ink); font-size: .875rem; }
.cb-clip[hidden] { display: none; }
.cb-clip > .bi { color: var(--cb-accent); }
.cb-clip__text { flex: 1; min-width: 0; }
.cb-clip .cb-btn { min-height: 34px; }

/* "Переместить…": the folder tree. */
.cb-tree { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 420px); margin: 0; padding: 4px; overflow-y: auto; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-sm); }
.cb-tree[hidden] { display: none; }
.cb-tree__item { display: flex; align-items: center; gap: .55rem; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--cb-ink); font-size: .9rem; text-align: left; cursor: pointer; }
.cb-tree__item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-tree__item > .bi { color: var(--cb-muted); }
.cb-tree__item:hover:not(:disabled) { background: var(--cb-soft); }
.cb-tree__item.is-chosen { background: var(--cb-accent); color: var(--cb-on-accent); }
.cb-tree__item.is-chosen > .bi { color: var(--cb-on-accent); }
.cb-tree__item:disabled { opacity: .45; cursor: default; }
.cb-tree__item:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: -2px; }
.cb-tree__note { color: inherit; font-size: .75rem; opacity: .75; }
.cb-tree__item[data-depth="1"] { padding-left: 28px; }
.cb-tree__item[data-depth="2"] { padding-left: 46px; }
.cb-tree__item[data-depth="3"] { padding-left: 64px; }
.cb-tree__item[data-depth="4"] { padding-left: 82px; }
.cb-tree__item[data-depth="5"] { padding-left: 100px; }
.cb-tree__item[data-depth="6"], .cb-tree__item[data-depth="7"], .cb-tree__item[data-depth="8"] { padding-left: 118px; }
@media (hover: none) {
  .cb-item__more { opacity: 1; }
}

/* ───────────── Entries: rows ───────────── */
.cb-grid[data-view="list"] { display: flex; flex-direction: column; gap: 0; }
.cb-grid[data-view="list"] .cb-listhead,
.cb-grid[data-view="list"] .cb-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px 150px 40px; align-items: center; column-gap: 8px; }
.cb-grid[data-view="list"] .cb-listhead { padding: 0 6px 8px; border-bottom: 1px solid var(--cb-line); color: var(--cb-muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cb-grid[data-view="list"] .cb-item { min-height: 52px; padding: 0 6px; border-radius: 0; border: 0; border-bottom: 1px solid var(--cb-line); }
.cb-grid[data-view="list"] .cb-item[hidden] { display: none; }
.cb-grid[data-view="list"] .cb-item:hover { border-radius: var(--cb-radius-sm); }
.cb-grid[data-view="list"] .cb-item.is-selected { border-radius: var(--cb-radius-sm); }
.cb-grid[data-view="list"] .cb-item__lead { display: block; }
.cb-grid[data-view="list"] .cb-check { position: relative; top: auto; left: auto; display: grid; opacity: 1; }
.cb-grid[data-view="list"] .cb-check span { width: 20px; height: 20px; border-radius: 6px; font-size: .75rem; background: var(--cb-surface); }
.cb-grid[data-view="list"] .cb-item__main { flex-direction: row; align-items: center; gap: 12px; padding: 6px 0; }
.cb-grid[data-view="list"] .cb-thumb { flex: none; width: 38px; height: 38px; aspect-ratio: auto; border-radius: 9px; }
.cb-grid[data-view="list"] .cb-thumb > .bi { font-size: 1.15rem; }
.cb-grid[data-view="list"] .cb-badge { left: auto; right: -4px; bottom: -4px; width: 16px; height: 16px; font-size: .55rem; }
.cb-grid[data-view="list"] .cb-item__name { -webkit-line-clamp: 1; font-weight: 600; }
.cb-grid[data-view="list"] .cb-item__meta { display: none; }
.cb-grid[data-view="list"] .cb-item__place { grid-column: 2; grid-row: 2; margin: -6px 0 8px 50px; }
.cb-grid[data-view="list"] .cb-item__size, .cb-grid[data-view="list"] .cb-item__date { display: block; overflow: hidden; color: var(--cb-muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb-grid[data-view="list"] .cb-item__more { position: static; opacity: 1; background: transparent; box-shadow: none; color: var(--cb-muted); }
.cb-grid[data-view="list"] .cb-item__more:hover { background: var(--cb-line); color: var(--cb-ink); }

/* Empty */
.cb-empty {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 64px 20px; text-align: center; color: var(--cb-muted);
}
.cb-empty > .bi { font-size: 2.6rem; color: color-mix(in srgb, var(--cb-accent) 55%, var(--cb-muted)); opacity: .7; margin-bottom: .3rem; }
.cb-empty strong { color: var(--cb-ink); font-size: 1.05rem; font-weight: 650; }
.cb-empty span { max-width: 44ch; font-size: .9rem; }
.cb-empty .cb-btn { margin-top: .6rem; }
.cb-empty--filter { padding: 40px 20px; }

/* ───────────── Floating chrome ───────────── */
.cb-selbar {
  position: fixed; z-index: 1040; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  max-width: calc(100vw - 24px); padding: 6px 8px 6px 6px; border-radius: 999px; background: #1d2433; color: #fff; box-shadow: var(--cb-float);
}
.cb-selbar[hidden] { display: none; }
.cb-selbar__close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.cb-selbar__close:hover { background: rgba(255, 255, 255, .12); }
.cb-selbar__count { flex: none; padding: 0 8px 0 2px; font-size: .88rem; font-weight: 650; white-space: nowrap; }
.cb-selbar__actions { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.cb-selbar__actions::-webkit-scrollbar { display: none; }
.cb-selbar__btn {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: #fff; font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cb-selbar__btn:hover { background: rgba(255, 255, 255, .12); }
.cb-selbar__btn.is-danger { color: #ff8f9a; }

.cb-menu {
  position: fixed; z-index: 1080; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 14px;
  background: var(--cb-solid); border: 1px solid var(--cb-line); box-shadow: var(--cb-float);
}
.cb-menu[hidden] { display: none; }
.cb-menu__item {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--cb-ink); font-size: .88rem; text-align: left; cursor: pointer;
}
.cb-menu__item .bi { width: 1rem; color: var(--cb-muted); }
.cb-menu__item:hover, .cb-menu__item:focus-visible { background: var(--cb-soft); outline: none; }
.cb-menu__item.is-danger, .cb-menu__item.is-danger .bi { color: var(--cb-danger); }
.cb-menu__sep { height: 1px; margin: 5px 6px; background: var(--cb-line); }

.cb-frame { position: fixed; z-index: 1035; border: 1px solid var(--cb-accent); border-radius: 4px; background: color-mix(in srgb, var(--cb-accent) 14%, transparent); pointer-events: none; }
.cb-ghost { position: fixed; top: -100px; left: -100px; padding: 6px 12px; border-radius: 999px; background: var(--cb-accent); color: var(--cb-on-accent); font-size: .82rem; font-weight: 600; white-space: nowrap; }

.cb-drop { position: fixed; z-index: 1070; inset: 0; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--cb-accent) 14%, rgba(15, 23, 42, .45)); pointer-events: none; }
.cb-drop[hidden] { display: none; }
.cb-drop__card {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 34px 48px; border: 2px dashed var(--cb-accent);
  border-radius: 22px; background: var(--cb-solid); color: var(--cb-ink); text-align: center; box-shadow: var(--cb-float);
}
.cb-drop__card .bi { font-size: 2.6rem; color: var(--cb-accent); }
.cb-drop__card strong { font-size: 1.1rem; }
.cb-drop__card span { color: var(--cb-muted); }

.cb-queue {
  position: fixed; z-index: 1045; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 24px)); max-height: min(420px, 60vh);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--cb-solid); border: 1px solid var(--cb-line); box-shadow: var(--cb-float);
}
.cb-queue[hidden] { display: none; }
.cb-queue__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--cb-line); font-size: .92rem; }
.cb-queue__list { margin: 0; padding: 6px 0; list-style: none; overflow-y: auto; }
.cb-qitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 16px; font-size: .84rem; }
.cb-qitem__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-qitem__state { color: var(--cb-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-qitem__bar { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--cb-soft); }
.cb-qitem__bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--cb-accent); transition: width .2s; }
.cb-qitem.is-done .cb-qitem__state { color: #1f8a4c; }
.cb-qitem.is-done .cb-qitem__bar span { background: #1f8a4c; }
.cb-qitem.is-failed .cb-qitem__state { color: var(--cb-danger); white-space: normal; text-align: right; }
.cb-qitem.is-failed .cb-qitem__bar span { background: var(--cb-danger); }
.cb-queue__reload { margin: 0 16px 12px; }

/* Dialogs */
.cb-modal .modal-content { border: 1px solid var(--cb-line); border-radius: 18px; background: var(--cb-solid); color: var(--cb-ink); box-shadow: var(--cb-float); }
.cb-modal .modal-header, .cb-modal .modal-footer { border: 0; }
html[data-bs-theme] .cb-modal .modal-footer { gap: 8px; padding-top: 0; }
html[data-bs-theme] .cb-modal .cb-modal__title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--cb-ink); }
.cb-modal__text { margin: 0 0 12px; color: var(--cb-muted); font-size: .92rem; }
.cb-modal__text[hidden] { display: none; }
.cb-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: .85rem; font-weight: 600; color: var(--cb-muted); }
.cb-field[hidden] { display: none; }
.cb-field input, .cb-field select {
  height: 42px; padding: 0 12px; border: 1px solid var(--cb-line); border-radius: var(--cb-radius-sm); background: var(--cb-surface);
  color: var(--cb-ink); font-size: .95rem; font-weight: 400; outline: none;
}
.cb-field input:focus, .cb-field select:focus { border-color: var(--cb-accent); box-shadow: 0 0 0 3px var(--cb-accent-soft); }

/* ───────────── Phones and tablets ───────────── */
@media (max-width: 991.98px) {
  .cb-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cb-side { position: static; max-height: none; overflow: visible; }
  .cb-side__box { padding: 0; }
  .cb-side__box[open] { padding-bottom: 8px; }
  .cb-side__toggle {
    display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: 0 14px; cursor: pointer; list-style: none; font-weight: 600;
  }
  .cb-side__toggle::-webkit-details-marker { display: none; }
  .cb-side__toggle > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cb-side__toggle .bi { color: var(--cb-accent); }
  .cb-side__chevron { color: var(--cb-muted) !important; transition: transform .15s; }
  .cb-side__box[open] .cb-side__chevron { transform: rotate(180deg); }
  .cb-side__section { padding: 0 8px; }
  .cb-side__box[open] .cb-side__section:first-of-type { padding-top: 6px; border-top: 1px solid var(--cb-line); }
}
@media (max-width: 767.98px) {
  .cb { padding-top: 8px; gap: 12px; }
  html[data-bs-theme] .cb .cb-title { font-size: 1.4rem; }
  .cb-head { align-items: center; }
  .cb-head__actions .cb-btn:not(.cb-btn--primary) span { display: none; }
  .cb-head__actions .cb-btn:not(.cb-btn--primary) { width: 38px; padding: 0; }
  .cb-main { padding: 12px 12px 16px; border-radius: var(--cb-radius); }
  .cb-bar__count { display: none; }
  .cb-search { flex-basis: 100%; max-width: none; }
  .cb-tools { gap: 8px; }
  .cb-tools__end { margin-left: 0; width: 100%; justify-content: space-between; }
  .cb-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
  .cb-item__main { padding: 6px; gap: 6px; }
  .cb-check { top: 10px; left: 10px; }
  .cb-grid[data-view="list"] .cb-listhead { display: none; }
  .cb-grid[data-view="list"] .cb-item { grid-template-columns: 30px minmax(0, 1fr) 40px; }
  .cb-grid[data-view="list"] .cb-item__size, .cb-grid[data-view="list"] .cb-item__date { display: none; }
  .cb-grid[data-view="list"] .cb-item__meta { display: block; }
  .cb-grid[data-view="list"] .cb-item__place { grid-column: 2; }
  .cb-selbar, .cb-queue { bottom: calc(max(var(--island-space), env(safe-area-inset-bottom)) + 8px); }
  .cb-selbar { left: 12px; right: 12px; transform: none; max-width: none; border-radius: 18px; }
  .cb-selbar__btn span { display: none; }
  .cb-selbar__btn { width: 40px; padding: 0; justify-content: center; font-size: 1.05rem; }
  .cb-selbar__actions { margin-left: auto; }
  .cb-queue { right: 12px; }
  .cb.is-selecting .cb-main { padding-bottom: 72px; }
}

/* ───────────── File viewer page ───────────── */
.fv { display: flex; flex-direction: column; gap: 14px; padding: 16px 0 32px; }
.fv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fv-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cb-accent-soft); color: var(--cb-accent); font-size: 1.3rem; }
.fv-title { flex: 1 1 260px; min-width: 0; }
html[data-bs-theme] .fv .fv-title h1 { margin: 0; overflow: hidden; font-size: 1.3rem; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; color: var(--cb-ink); }
.fv-title p { margin: 2px 0 0; color: var(--cb-muted); font-size: .84rem; }
.fv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fv-desc { margin: 0; color: var(--cb-muted); }
.fv-stage {
  display: grid; place-items: center; min-height: 320px; overflow: hidden; border-radius: var(--cb-radius);
  background: var(--cb-soft); border: 1px solid var(--cb-line);
}
.fv-stage--image, .fv-stage--video { background: #0d1117; border-color: transparent; }
.fv-stage img { display: block; max-width: 100%; max-height: calc(100vh - 220px); object-fit: contain; }
.fv-stage video { display: block; width: 100%; max-height: calc(100vh - 220px); background: #000; }
.fv-stage iframe { width: 100%; height: calc(100vh - 220px); min-height: 420px; border: 0; background: #fff; }
.fv-audio { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(520px, 100%); padding: 40px 20px; }
.fv-audio > .bi { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--cb-accent-soft); color: var(--cb-accent); font-size: 2.2rem; }
.fv-audio audio { width: 100%; }
.fv-none { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 48px 20px; text-align: center; color: var(--cb-muted); }
.fv-none > .bi { font-size: 3rem; color: var(--cb-accent); opacity: .75; }
.fv-none strong { color: var(--cb-ink); }
@media (max-width: 767.98px) {
  .fv-actions { width: 100%; }
  .fv-actions .cb-btn { flex: 1; }
  .fv-stage { min-height: 220px; }
  .fv-stage iframe { min-height: 320px; height: 70vh; }
}

/* ───────────── Share link page ───────────── */
.sh { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; padding: 20px 0 32px; }
.sh-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sh-head__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--cb-accent-soft); color: var(--cb-accent); font-size: 1.5rem; }
.sh-head > div { flex: 1 1 200px; min-width: 0; }
html[data-bs-theme] .sh .sh-head h1 { margin: 0; font-size: 1.45rem; font-weight: 700; color: var(--cb-ink); }
.sh-head p { margin: 2px 0 0; color: var(--cb-muted); font-size: .88rem; }
.sh-list { margin: 0; padding: 6px; list-style: none; background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: var(--cb-radius); box-shadow: var(--cb-shadow); }
.sh-file { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: var(--cb-radius-sm); }
.sh-file:hover { background: var(--cb-soft); }
.sh-file + .sh-file { margin-top: 2px; }
.sh-file__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px; color: inherit; text-decoration: none; }
.sh-file__main:hover { color: inherit; }
.sh-file .cb-thumb { flex: none; width: 46px; height: 46px; aspect-ratio: auto; border-radius: 10px; }
.sh-file .cb-thumb > .bi { font-size: 1.3rem; }
.sh-file__text { display: flex; flex-direction: column; min-width: 0; }
.sh-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sh-file__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cb-muted); font-size: .8rem; }

/* ───────────── SkyBox picker window ───────────── */
.fxp-modal .modal-dialog { max-width: 1040px; }
.fxp-modal .modal-content { overflow: hidden; border: 1px solid var(--cb-line); border-radius: 20px; background: var(--cb-solid); color: var(--cb-ink); box-shadow: var(--cb-float); }
html[data-bs-theme] .fxp-modal .modal-header { gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--cb-line); }
html[data-bs-theme] .fxp-modal .fxp-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--cb-ink); }
html[data-bs-theme] .fxp-modal .modal-body { padding: 0; }
.fxp-root { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: min(620px, calc(100vh - 220px)); min-height: 360px; }
.fxp-folders { overflow-y: auto; padding: 10px 8px; border-right: 1px solid var(--cb-line); background: color-mix(in srgb, var(--cb-soft) 55%, transparent); }
.fxp-folder {
  --d: 0;
  display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 34px; padding: 4px 10px 4px calc(10px + var(--d) * 12px);
  border: 0; border-radius: 9px; background: transparent; color: var(--cb-ink); font-size: .86rem; text-align: left; cursor: pointer;
}
.fxp-folder .bi { flex: none; color: var(--cb-muted); }
.fxp-folder span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxp-folder:hover { background: var(--cb-soft); }
.fxp-folder.is-active { background: var(--cb-accent-soft); color: var(--cb-accent); font-weight: 600; }
.fxp-folder.is-active .bi { color: var(--cb-accent); }
.fxp-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fxp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--cb-line); }
.fxp-toolbar .cb-search { max-width: none; flex: 1 1 220px; }
.fxp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fxp-chips::-webkit-scrollbar { display: none; }
.fxp-status { width: 100%; margin: 0; color: var(--cb-muted); font-size: .8rem; }
.fxp-status:empty { display: none; }
.fxp-status.is-error { color: var(--cb-danger); }
.fxp-files { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.fxp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.fxp-file {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border: 2px solid transparent;
  border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background-color .12s, border-color .12s;
}
.fxp-file:hover { background: var(--cb-soft); }
.fxp-file.is-selected { border-color: var(--cb-accent); background: var(--cb-accent-soft); }
.fxp-file .cb-thumb > .bi { font-size: 1.9rem; }
.fxp-file__name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .8rem; font-weight: 600; line-height: 1.3; word-break: break-word; }
.fxp-file__meta { overflow: hidden; color: var(--cb-muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.fxp-file__tick {
  position: absolute; z-index: 1; top: 12px; left: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); border: 2px solid rgba(24, 35, 55, .35); color: transparent; font-size: .8rem;
}
.fxp-file.is-selected .fxp-file__tick { background: var(--cb-accent); border-color: var(--cb-accent); color: var(--cb-on-accent); }
.fxp-file__peek {
  position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #253046; opacity: 0; transition: opacity .12s;
}
.fxp-file:hover .fxp-file__peek, .fxp-file__peek:focus-visible { opacity: 1; }
@media (hover: none) { .fxp-file__peek { opacity: 1; } }
.fxp-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 48px 16px; color: var(--cb-muted); text-align: center; }
.fxp-empty .bi { font-size: 2rem; opacity: .6; }
.fxp-drop { position: absolute; inset: 8px; display: grid; place-items: center; border: 2px dashed var(--cb-accent); border-radius: 14px; background: color-mix(in srgb, var(--cb-accent-soft) 85%, transparent); color: var(--cb-accent); font-weight: 650; pointer-events: none; }
.fxp-drop[hidden] { display: none; }
html[data-bs-theme] .fxp-modal .modal-footer { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--cb-line); }
.fxp-picked { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fxp-picked::-webkit-scrollbar { display: none; }
.fxp-picked__count { flex: none; color: var(--cb-muted); font-size: .85rem; }
.fxp-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; max-width: 200px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--cb-soft); font-size: .78rem; }
.fxp-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxp-pill button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--cb-muted); cursor: pointer; }
.fxp-pill button:hover { background: var(--cb-line); color: var(--cb-ink); }
@media (max-width: 767.98px) {
  .fxp-root { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 140px); }
  .fxp-folders { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--cb-line); scrollbar-width: none; }
  .fxp-folders::-webkit-scrollbar { display: none; }
  .fxp-folder { flex: none; width: auto; max-width: 180px; padding: 4px 12px; border: 1px solid var(--cb-line); border-radius: 999px; --d: 0 !important; }
  .fxp-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .fxp-modal .modal-footer { flex-wrap: wrap; }
  .fxp-picked { flex-basis: 100%; }
}
.cb-btn[hidden] { display: none; }
.cb-btn.is-busy { opacity: .6; pointer-events: none; }

/* === source: public/css/ui-media.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Media: the content viewer (public/assets/js/viewer.js; .mv-*) and the one
 * player for video and audio (public/assets/js/media-player.js; .mp-*).
 * The viewer is a dark full-screen stage in either theme (photos and video
 * read best on dark); controls take the saved accent from --ds-accent.
 */

/* ---------- Viewer ---------- */
html.mv-open, html.mv-open body { overflow: hidden !important; }
.mv {
  --mv-ink: #f5f7fb;
  --mv-muted: rgba(245, 247, 251, .62);
  --mv-glass: rgba(20, 23, 30, .62);
  --mv-line: rgba(255, 255, 255, .12);
  --mv-accent: var(--ds-accent, #6d6af8);
  position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  color: var(--mv-ink); font-size: 14px; -webkit-tap-highlight-color: transparent;
}
.mv[hidden] { display: none; }
.mv-backdrop { position: absolute; inset: 0; background: rgba(6, 8, 12, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: opacity .2s ease; }
.mv.is-entering .mv-backdrop { opacity: 0; }
.mv.is-entering .mv-stage { opacity: 0; transform: scale(.97); }
.mv-stage, .mv-bar, .mv-strip, .mv-nav { position: relative; z-index: 1; }

.mv-bar { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px 8px 20px; padding-top: max(8px, env(safe-area-inset-top)); background: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent); transition: opacity .2s ease; }
.mv-bar__info { flex: 1; min-width: 0; }
.mv-title { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.mv-meta { overflow: hidden; color: var(--mv-muted); font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.mv-bar__tools { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.mv-count { padding: 0 10px; color: var(--mv-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.mv-tool { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--mv-ink); font-size: 18px; text-decoration: none; cursor: pointer; transition: background-color .15s; }
.mv-tool:hover { background: rgba(255, 255, 255, .12); color: var(--mv-ink); }
.mv-tool[hidden] { display: none; }
.mv :is(.mv-tool, .mv-nav, .mv-thumb, .mv-btn):focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }

.mv-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 72px; overflow: hidden; touch-action: none; transition: opacity .2s ease, transform .2s ease; }
.mv-stage.is-dragging { transition: none; }
.mv-zoom { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
.mv-zoom.is-zoomed { cursor: grab; }
.mv-zoom.is-panning { cursor: grabbing; }
.mv-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; will-change: transform; transition: transform .18s ease, opacity .2s ease; }
.mv-img.is-loading { opacity: 0; }
.mv-zoom.is-panning .mv-img, .mv-zoom.is-pinching .mv-img { transition: none; }
.mv-stage > .mp--video { width: 100%; max-width: min(1280px, 100%); max-height: 100%; }
.mv-frame { width: min(1100px, 100%); height: 100%; border: 0; border-radius: 10px; background: #fff; }
.mv-text { width: min(960px, 100%); max-height: 100%; margin: 0; padding: 20px 24px; overflow: auto; border-radius: 12px; background: #0f1218; color: #e7ebf3; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; touch-action: pan-y; }

.mv-card { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(560px, 100%); padding: 32px 24px; border: 1px solid var(--mv-line); border-radius: 20px; background: var(--mv-glass); text-align: center; }
.mv-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 22px; background: color-mix(in srgb, var(--mv-accent) 22%, transparent); color: var(--mv-ink); font-size: 40px; }
.mv-card__name { max-width: 100%; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.mv-card__meta { color: var(--mv-muted); font-size: 13px; }
.mv-card .mp--audio { width: 100%; }
.mv-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mv-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1.1rem; border: 1px solid var(--mv-line); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--mv-ink); font-weight: 600; text-decoration: none; }
.mv-btn:hover { background: rgba(255, 255, 255, .14); color: var(--mv-ink); }
.mv-btn--primary { border-color: var(--mv-accent); background: var(--mv-accent); color: var(--ds-on-accent, #fff); }
.mv-btn--primary:hover { background: color-mix(in srgb, var(--mv-accent) 86%, #000); color: var(--ds-on-accent, #fff); }

.mv-nav { position: absolute; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: -24px; padding: 0; border: 0; border-radius: 999px; background: var(--mv-glass); color: var(--mv-ink); font-size: 22px; cursor: pointer; transition: background-color .15s, opacity .2s; }
.mv-nav:hover { background: rgba(255, 255, 255, .2); }
.mv-nav--prev { left: 14px; }
.mv-nav--next { right: 14px; }
.mv-nav[hidden] { display: none; }

.mv-strip { display: flex; justify-content: center; gap: 6px; min-height: 0; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; transition: opacity .2s ease; }
.mv-strip::-webkit-scrollbar { display: none; }
.mv-strip[hidden] { display: none; }
.mv-thumb { position: relative; flex: 0 0 auto; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--mv-muted); font-size: 20px; opacity: .55; cursor: pointer; transition: opacity .15s, border-color .15s; }
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mv-thumb:hover { opacity: .85; }
.mv-thumb.is-active { border-color: var(--mv-accent); opacity: 1; }
.mv-thumb__kind { position: absolute; right: 3px; bottom: 3px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }

.mv-status { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mv-status[hidden] { display: none; }
.mv-spinner { width: 36px; height: 36px; border: 3px solid rgba(255, 255, 255, .18); border-top-color: var(--mv-ink); border-radius: 50%; animation: mv-spin .8s linear infinite; }
.mv-error { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--mv-muted); pointer-events: auto; }
.mv-error .bi { font-size: 36px; }
@keyframes mv-spin { to { transform: rotate(360deg); } }

.mv.is-idle .mv-bar, .mv.is-idle .mv-strip, .mv.is-idle .mv-nav { opacity: 0; pointer-events: none; }
.mv.is-idle { cursor: none; }

@media (max-width: 767.98px) {
  .mv-bar { min-height: 52px; padding-left: 14px; }
  .mv-stage { padding: 0; }
  .mv-nav { display: none; }
  .mv-zoom-tool { display: none !important; }
  .mv-text { border-radius: 0; padding: 16px; }
  .mv-frame { border-radius: 0; }
  .mv-thumb { width: 46px; height: 46px; }
  .mv-strip { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-backdrop, .mv-stage, .mv-img, .mv-bar, .mv-strip { transition: none; }
}

/* ---------- Player ---------- */
.mp {
  --mp-accent: var(--ds-accent, #6d6af8);
  --mp-ink: #fff;
  --mp-track: rgba(255, 255, 255, .28);
  position: relative; display: block; min-width: 0; color: var(--mp-ink); -webkit-tap-highlight-color: transparent;
}
.mp:focus { outline: none; }
.mp:focus-visible { box-shadow: 0 0 0 2px var(--mp-accent); }
:where(.mp--video) { overflow: hidden; border-radius: 12px; background: #000; }
:where(.mp--video) video { display: block; width: 100%; height: 100%; max-height: inherit; object-fit: contain; background: #000; }
.mp--video:fullscreen { border-radius: 0; }
.mp--video:fullscreen video { max-height: none; }
.mv-stage > .mp--video video { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }

.mp-big { position: absolute; top: 50%; left: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: -34px 0 0 -34px; padding: 0 0 0 4px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 36px; cursor: pointer; backdrop-filter: blur(6px); transition: opacity .2s ease, transform .2s ease; }
.mp-big:hover { background: var(--mp-accent); }
.mp.is-playing .mp-big { opacity: 0; transform: scale(.85); pointer-events: none; }
.mp-spin { position: absolute; top: 50%; left: 50%; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%; animation: mv-spin .8s linear infinite; pointer-events: none; }
.mp:not(.is-waiting) .mp-spin { display: none; }
.mp.is-waiting .mp-big { opacity: 0; }

.mp-bar { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mp--video .mp-bar { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; padding: 28px 10px 8px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); transition: opacity .25s ease; }
.mp--video.is-playing.is-idle .mp-bar { opacity: 0; pointer-events: none; }
.mp--video.is-playing.is-idle { cursor: none; }
.mp-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.mp-btn:hover { background: rgba(255, 255, 255, .14); }
.mp-btn:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 1px; }
.mp-btn[hidden] { display: none; }
.mp-speed { min-width: 44px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-time { flex-shrink: 0; min-width: 38px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; opacity: .9; }
.mp-track { position: relative; flex: 1; min-width: 60px; height: 28px; cursor: pointer; touch-action: none; }
.mp-track::before, .mp-track__buf, .mp-track__fill { content: ""; position: absolute; top: 50%; left: 0; height: 4px; margin-top: -2px; border-radius: 4px; transition: height .12s, margin .12s; }
.mp-track::before { right: 0; background: var(--mp-track); }
.mp-track__buf { width: 0; background: rgba(255, 255, 255, .42); }
.mp-track__fill { width: 0; background: var(--mp-accent); }
.mp-track__knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transform: scale(0); transition: transform .12s; }
.mp-track:hover .mp-track__knob, .mp-track.is-scrubbing .mp-track__knob, .mp-track:focus-visible .mp-track__knob { transform: scale(1); }
.mp-track:hover::before, .mp-track:hover .mp-track__buf, .mp-track:hover .mp-track__fill, .mp-track.is-scrubbing::before, .mp-track.is-scrubbing .mp-track__fill { height: 6px; margin-top: -3px; }
.mp-track:focus-visible { outline: none; }
.mp-track__tip { position: absolute; bottom: 26px; left: 0; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .12s; }
.mp-track:hover .mp-track__tip, .mp-track.is-scrubbing .mp-track__tip { opacity: 1; }
.mp-vol { width: 72px; accent-color: var(--mp-accent); }
@media (hover: none), (pointer: coarse) { .mp-vol { display: none; } }
.mp-error { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 13px; text-align: center; }
.mp.is-error .mp-error { display: flex; }
.mp-error a { color: #fff; font-weight: 600; }

/* Audio: a card that reads on light and dark pages. */
.mp--audio { --mp-ink: var(--ds-ink, #182337); --mp-track: color-mix(in srgb, var(--ds-ink, #182337) 16%, transparent); padding: 6px 8px; border: 1px solid var(--ds-line, rgba(24, 35, 55, .14)); border-radius: 999px; background: var(--ds-surface, #fff); }
.mp--audio .mp-track__buf { background: color-mix(in srgb, var(--ds-ink, #182337) 26%, transparent); }
.mp--audio .mp-btn:hover { background: var(--ds-soft, rgba(0, 0, 0, .06)); }
.mp--audio [data-mp-play] { width: 40px; min-width: 40px; height: 40px; background: var(--mp-accent); color: var(--mp-on-accent, var(--ds-on-accent, #fff)); }
.mp--audio [data-mp-play]:hover { background: color-mix(in srgb, var(--mp-accent) 86%, #000); }
.mp--audio .mp-error { position: static; display: none; padding: 4px 8px; background: none; color: inherit; }
.mp--audio.is-error .mp-error { display: block; }
.mp--audio.is-error .mp-bar { display: none; }
.mv .mp--audio .mp-vol { width: 60px; }
.mv .mp--audio { --mp-ink: #fff; --mp-track: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); }
.mv .mp--audio .mp-btn:hover { background: rgba(255, 255, 255, .14); }

/* Voice messages (data-media-variant="voice", the chats): a round button, a
   waveform that fills as it plays (mask --mp-wave from the player), the time
   and the speed. The chat sets --mp-accent / --mp-track for its bubble. */
.mp--voice { display: block; min-width: 210px; max-width: 320px; padding: 0; border: 0; border-radius: 0; background: none; }
.mp--voice .mp-bar { gap: 8px; }
.mp--voice [data-mp-play] { width: 40px; min-width: 40px; height: 40px; font-size: 22px; }
.mp-wave { height: 28px; min-width: 100px; -webkit-mask: var(--mp-wave) center / 100% 100% no-repeat; mask: var(--mp-wave) center / 100% 100% no-repeat; }
.mp-wave::before, .mp-wave .mp-track__fill,
.mp-wave:hover::before, .mp-wave:hover .mp-track__fill, .mp-wave.is-scrubbing::before, .mp-wave.is-scrubbing .mp-track__fill { top: 0; height: 100%; margin-top: 0; border-radius: 0; }
.mp-wave .mp-track__buf, .mp-wave .mp-track__knob, .mp-wave .mp-track__tip { display: none; }
.mp--voice .mp-time { min-width: 34px; font-size: 12px; text-align: left; opacity: .8; }
.mp--voice .mp-speed { min-width: 34px; height: 24px; padding: 0 7px; font-size: 11px; background: color-mix(in srgb, currentColor 12%, transparent); }
.mp--voice .mp-error { padding: 4px 0; }

/* Stickers of module messages (public/assets/js/sticker.js): the emoji while
   it loads, then the picture, the silent video or the Lottie animation. The
   chats size them (.msgr-msg .tsk, .tdock-msg .tsk). */
.tsk { position: relative; display: grid; place-items: center; width: 140px; height: 140px; max-width: 100%; }
.tsk > img, .tsk > video, .tsk-anim { display: block; width: 100%; height: 100%; object-fit: contain; }
.tsk-emoji { font-size: 3.6rem; line-height: 1; opacity: .9; }
.tsk:not(.is-on):not(.is-off) .tsk-emoji { animation: tsk-wait 1.6s ease-in-out infinite; }
@keyframes tsk-wait { 50% { opacity: .45; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .tsk-emoji { animation: none !important; } }

/* Inline video in posts and pages: [data-media-inline="video"] hosts. Low
   specificity (:where) so a page's own frame (gallery slide, card) wins. */
:where([data-media-inline="video"]) { position: relative; overflow: hidden; border-radius: calc(var(--t-radius, 16px) + 2px); background: #000; outline: none; }
:where([data-media-inline="video"]) video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
:where([data-media-inline="video"]):not(.mp) { cursor: pointer; }
[data-media-inline="video"] .tmiv-play-indicator { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 48px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); pointer-events: none; }
[data-media-inline="video"].mp .tmiv-play-indicator { display: none; }
[data-media-inline="video"] .tmiv-top-actions { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 6px; transition: opacity .2s ease; }
[data-media-inline="video"].is-playing.is-idle .tmiv-top-actions { opacity: 0; pointer-events: none; }
[data-media-inline="video"] .tmiv-overlay-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: rgba(20, 20, 20, .6); color: #fff; }
:where([data-media-inline="video"][data-media-variant="compact"]) { border-radius: 10px; }
:where([data-media-inline="video"][data-media-variant="compact"]) video { aspect-ratio: auto; max-height: 320px; }
.mp--compact .mp-speed, .mp--compact .mp-vol, .mp--compact [data-mp-pip] { display: none; }

@media (max-width: 575.98px) {
  .mp--video .mp-bar { padding: 22px 4px 4px; gap: 0; }
  .mp--video [data-mp-pip], .mp--video .mp-speed { display: none; }
  .mp-time { min-width: 34px; font-size: 11px; }
}

/* ---------- Mini player (app shell): a playing video or sound over the next pages ---------- */
.mp-mini {
  position: fixed; right: 16px; bottom: 16px; z-index: 1065;
  display: flex; flex-direction: column; width: min(340px, calc(100vw - 32px));
  overflow: hidden; border-radius: 16px; background: #0b0f1a; color: #f5f7fb;
  box-shadow: 0 16px 40px rgba(2, 6, 23, .4), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: mp-mini-in .2s ease;
}
@keyframes mp-mini-in { from { opacity: 0; transform: translateY(8px); } }
:root:has(.app-shell.has-chat-rail) .mp-mini { right: calc(var(--tdock-rail, 60px) + 16px); }
.mp-mini__head { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 4px 4px 12px; }
.mp-mini__title { flex: 1; min-width: 0; overflow: hidden; color: inherit; font-size: 13px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.mp-mini__title:hover { text-decoration: underline; }
.mp-mini__close { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 14px; cursor: pointer; }
.mp-mini__close:hover { background: rgba(255, 255, 255, .14); }
.mp-mini--video .mp-mini__body { aspect-ratio: 16 / 9; }
.mp-mini--video .mp-mini__body.mp--video { border-radius: 0; }
.mp-mini--audio .mp-mini__body { padding: 0 6px 6px; }
/* a small player: the essentials only (play, time, track, sound, full screen) */
.mp-mini .mp-vol, .mp-mini .mp-speed, .mp-mini [data-mp-pip] { display: none; }
.mp-mini--video .mp-time[data-mp-dur] { display: none; }
.mp-mini--audio .mp--audio { --mp-ink: #f5f7fb; --mp-track: rgba(255, 255, 255, .24); padding: 4px 6px; border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); }
.mp-mini--audio .mp--audio .mp-track__buf { background: rgba(255, 255, 255, .34); }
.mp-mini--audio .mp--audio .mp-btn:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 767.98px) {
  .mp-mini { right: 12px; left: 12px; width: auto; bottom: calc(max(var(--island-space), env(safe-area-inset-bottom)) + 8px); }
  .mp-mini--video { left: auto; width: min(260px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) { .mp-mini { animation: none; } }

/* === source: public/css/ui-auth.css === */
/** Authentication workspace. Form IDs, validation and password controls remain in auth.js. */
html[data-bs-theme] .auth-page { padding: 18px 0 40px; color: var(--ds-ink); }
.auth-page .auth-shell { width: 100%; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 0; min-height: 360px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); overflow: hidden; background: var(--ds-surface); }
html[data-bs-theme] .auth-page .auth-overview { position: relative; display: flex; flex-direction: column; gap: calc(var(--ds-gap) * 2); padding: calc(var(--ds-panel-pad) * 2); border: 0; border-radius: 0; background: var(--ds-soft); color: var(--ds-ink); box-shadow: none; overflow: hidden; }
.auth-page .auth-overview::after { content: ''; position: absolute; width: 250px; height: 250px; border: 1px solid #415372; border-radius: 50%; right: -100px; bottom: -85px; box-shadow: 0 0 0 35px #253859, 0 0 0 36px #415372, 0 0 0 70px #203251, 0 0 0 71px #415372; pointer-events: none; }
.auth-page .auth-brand { display: flex; align-items: center; gap: var(--ds-gap); position: relative; z-index: 1; }
.auth-page .auth-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--ds-radius-control); background: var(--ds-accent); color: var(--ds-on-accent, #fff); overflow: hidden; }
.auth-page .auth-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.auth-page .auth-brand__title { font-size: .94rem; font-weight: 800; letter-spacing: .08em; }
.auth-page .auth-brand__sub { font-size: .73rem; color: var(--ds-muted); margin-top: 4px; }
.auth-page .auth-hero { position: relative; z-index: 1; max-width: 330px; }
html[data-bs-theme] .auth-page .auth-hero__title { color: var(--ds-ink); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.2; font-weight: var(--ds-heading-weight); margin: 0 0 var(--ds-gap); }
.auth-page .auth-hero__copy { color: var(--ds-muted); font-size: .9rem; line-height: 1.55; max-width: 29ch; }
.auth-page .auth-stage { min-width: 0; background: var(--ds-surface); display: flex; align-items: center; }
html[data-bs-theme] .auth-page .auth-card { width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: calc(var(--ds-panel-pad) * 2); }
.auth-page .auth-card__head { display: flex; flex-direction: column; gap: var(--ds-gap); margin-bottom: 28px; }
html[data-bs-theme] .auth-page .auth-card__title { font-size: 1.3rem; font-weight: 700; margin: 0; }
.auth-page .auth-tabs { display: flex; gap: 6px; background: var(--ds-soft); border-radius: var(--ds-radius-control); padding: 4px; }
.auth-page .auth-tab { display: flex; align-items: center; justify-content: center; flex: 1; min-height: var(--ds-control-h); padding: 7px 10px; border-radius: var(--ds-radius-control); font-size: .78rem; font-weight: 650; color: var(--ds-muted); text-decoration: none; text-align: center; }
.auth-page .auth-tab.is-active { background: var(--ds-surface); color: var(--ds-ink); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.auth-page .auth-fieldset, .auth-page .auth-form { display: grid; gap: var(--ds-gap); }
.auth-page .auth-field { min-width: 0; }
.auth-page .auth-label { display: block; font-size: .8rem; font-weight: 650; margin-bottom: 8px; }
.auth-page .auth-label__muted, .auth-page .auth-field__hint { color: var(--ds-muted); font-size: .75rem; font-weight: 400; }
.auth-page .auth-field__hint { margin-top: 6px; line-height: 1.55; }
.auth-page .auth-input-wrap { position: relative; }
html[data-bs-theme] .auth-page .auth-input { min-height: max(36px, var(--ds-control-h)); padding-left: 40px; font-size: .9rem; border-radius: var(--ds-radius-control); }
.auth-page .auth-input-wrap--action .auth-input { padding-right: 46px; }
.auth-page .auth-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ds-muted); z-index: 2; pointer-events: none; }
.auth-page .auth-icon-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ds-radius-control); color: var(--ds-muted); background: transparent; }
.auth-page .auth-icon-btn:hover { color: var(--ds-ink); background: var(--ds-soft); }
html[data-bs-theme] .auth-page .auth-submit { min-height: max(36px, var(--ds-control-h)); width: 100%; margin-top: 6px; font-size: .9rem; border-radius: var(--ds-radius-control); }
.auth-page .auth-footer-links { display: flex; justify-content: center; gap: 14px; margin-top: 24px; font-size: .8rem; }
.auth-page .auth-text-link { color: var(--ds-accent); text-decoration: none; }
.auth-page .auth-text-link:hover { text-decoration: underline; }
.auth-page .auth-inline-note, .auth-page .auth-state { display: flex; gap: var(--ds-gap); padding: 14px; border: 1px solid var(--ds-line); background: var(--ds-soft); border-radius: var(--ds-radius-control); color: var(--ds-muted); font-size: .8rem; }

.auth-page .auth-state--warning { border-color: #d6a255; }
.auth-page .auth-caps-note { color: #b5781e; font-size: .75rem; margin-top: 4px; }
.auth-page .auth-caps-note:empty { display: none; }
.auth-page .auth-token-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #536784; border-radius: var(--ds-radius-control); color: #dbe5f4; font-size: .75rem; }

.auth-page .auth-sso { display: grid; gap: 18px; margin-bottom: 18px; }
.auth-page .auth-sso .sso-btn { justify-content: center; }
.auth-page .auth-sso__divider { display: flex; align-items: center; gap: 12px; color: var(--ds-muted); font-size: .75rem; }
.auth-page .auth-sso__divider::before, .auth-page .auth-sso__divider::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); }
@media (max-width: 991.98px) { .auth-page .auth-overview { padding: 30px 24px; } html[data-bs-theme] .auth-page .auth-card { padding: 30px 24px; } }
@media (max-width: 767.98px) {
  .auth-page .auth-shell { grid-template-columns: 1fr; min-height: auto; }
  html[data-bs-theme] .auth-page .auth-overview { padding: var(--ds-panel-pad); gap: var(--ds-gap); }
  html[data-bs-theme] .auth-page .auth-hero__title { font-size: 1.5rem; margin-bottom: 6px; }
  .auth-page .auth-hero__copy { max-width: 38ch; margin-bottom: 0; font-size: .85rem; }
  html[data-bs-theme] .auth-page .auth-card { padding: var(--ds-panel-pad); }
  html[data-bs-theme] .auth-page .auth-input { font-size: 16px; }
}
.auth-page .auth-overview::after { border-color: var(--ds-line); box-shadow: 0 0 0 35px var(--ds-accent-soft); opacity: .35; }
.auth-page .auth-token-chip { color: var(--ds-ink); border-color: var(--ds-line); }
.auth-page .auth-brand__mark { color: var(--ds-on-accent); }

/* === source: public/css/ui-friend-register.css === */
/**
 * Friend registration page styles (special invite flow).
 * Extracted from legacy mixed auth stylesheet.
 */
.fr-shell{
  --fr-bg-a: #120816;
  --fr-bg-b: #1f0a35;
  --fr-bg-c: #0a112f;
  --fr-accent-1: #ff4fd8;
  --fr-accent-2: #63ffb8;
  --fr-accent-3: #ffd84d;
  --fr-text: #f7f7ff;
  --fr-muted: rgba(247,247,255,.75);
  --fr-card-bg: rgba(255,255,255,.08);
  --fr-card-border: rgba(255,255,255,.16);
  --fr-input-bg: rgba(255,255,255,.08);
  --fr-input-border: rgba(255,255,255,.18);
  --fr-shadow: 0 30px 90px rgba(0,0,0,.45);
  position: relative;
  color: var(--fr-text);
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(135deg, var(--fr-bg-a), var(--fr-bg-b) 45%, var(--fr-bg-c));
  box-shadow: var(--fr-shadow);
  isolation: isolate;
}
.fr-theme-circus{
  --fr-bg-a: #120816;
  --fr-bg-b: #1f0a35;
  --fr-bg-c: #0a112f;
  --fr-accent-1: #ff4fd8;
  --fr-accent-2: #63ffb8;
  --fr-accent-3: #ffd84d;
  --fr-text: #f7f7ff;
  --fr-muted: rgba(247,247,255,.75);
}
.fr-theme-lab{
  --fr-bg-a: #07110f;
  --fr-bg-b: #0c1f17;
  --fr-bg-c: #06140f;
  --fr-accent-1: #2dff96;
  --fr-accent-2: #b7ff2d;
  --fr-accent-3: #00ffc8;
  --fr-text: #ebfff7;
  --fr-muted: rgba(235,255,247,.72);
}
.fr-theme-void{
  --fr-bg-a: #09070f;
  --fr-bg-b: #150d25;
  --fr-bg-c: #06070c;
  --fr-accent-1: #8bf3ff;
  --fr-accent-2: #ff7fef;
  --fr-accent-3: #9f8cff;
  --fr-text: #f4f6ff;
  --fr-muted: rgba(244,246,255,.72);
}
.fr-shell::before,
.fr-shell::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  opacity:.45;
  z-index:0;
}
.fr-shell::before{
  background:
    conic-gradient(from 20deg, transparent 0deg, rgba(255,255,255,.05) 40deg, transparent 80deg, rgba(255,255,255,.06) 120deg, transparent 180deg, rgba(255,255,255,.04) 260deg, transparent 360deg);
  animation: fr-spin 22s linear infinite;
}
.fr-shell::after{
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--fr-accent-1) 55%, transparent), transparent 50%),
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--fr-accent-2) 55%, transparent), transparent 48%),
    radial-gradient(circle at 45% 85%, color-mix(in srgb, var(--fr-accent-3) 50%, transparent), transparent 52%);
  filter: blur(38px);
  animation: fr-breathe 8s ease-in-out infinite;
}
.fr-grid{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 50% 40%, #000 35%, transparent 85%);
  animation: fr-grid-shift 14s linear infinite;
}
.fr-particles{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.fr-particles span{
  position:absolute;
  width:.35rem;
  height:.35rem;
  border-radius:999px;
  background: color-mix(in srgb, var(--fr-accent-1) 55%, #fff);
  opacity:.65;
  filter: blur(.15px);
  animation: fr-float var(--d, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  top: 110%;
}
.fr-content{
  position:relative;
  z-index:1;
  padding: clamp(1rem, 2vw, 1.5rem);
}
.fr-marquee{
  display:flex;
  gap:1rem;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:.35rem .75rem;
  background: rgba(255,255,255,.04);
  color: var(--fr-muted);
  font-size:.82rem;
  margin-bottom: .9rem;
}
.fr-marquee-track{
  display:flex;
  gap:1rem;
  min-width:max-content;
  animation: fr-marquee 18s linear infinite;
}
.fr-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border-radius:999px;
  padding:.3rem .65rem;
  font-size:.78rem;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  color: var(--fr-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.fr-badge::before{
  content:"";
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background: linear-gradient(135deg, var(--fr-accent-1), var(--fr-accent-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--fr-accent-1) 70%, transparent);
  animation: fr-blink 1.8s ease-in-out infinite;
}
.fr-layout{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
}
.fr-left{
  border-radius: 1rem;
  border: 1px solid var(--fr-card-border);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 1rem;
  position:relative;
  overflow:hidden;
}
.fr-left::after{
  content:"";
  position:absolute;
  inset:auto -20% -35% -10%;
  height: 55%;
  background:
    radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--fr-accent-2) 28%, transparent), transparent 60%),
    radial-gradient(ellipse at 70% 60%, color-mix(in srgb, var(--fr-accent-1) 26%, transparent), transparent 60%);
  filter: blur(14px);
  pointer-events:none;
}
.fr-title{
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.05;
  margin: .65rem 0 .4rem;
  letter-spacing: .02em;
  text-wrap: balance;
}
.fr-title .glitch{
  position:relative;
  display:inline-block;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--fr-accent-1) 40%, transparent),
    0 0 18px color-mix(in srgb, var(--fr-accent-2) 30%, transparent);
  animation: fr-glitch 3.8s steps(2, jump-none) infinite;
}
.fr-sub{
  color: var(--fr-muted);
  margin-bottom: .9rem;
  text-wrap: balance;
}
.fr-role-card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: .95rem;
  padding: .85rem;
  backdrop-filter: blur(10px);
}
.fr-role-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-size:.78rem;
  margin-bottom:.55rem;
  color: var(--fr-text);
}
.fr-role-pill.role-admin{ background: color-mix(in srgb, var(--fr-accent-1) 18%, transparent); }
.fr-role-pill.role-admin_tester{ background: color-mix(in srgb, var(--fr-accent-2) 18%, transparent); }
.fr-role-title{ font-weight: 700; margin-bottom: .25rem; }
.fr-role-text{ color: var(--fr-muted); font-size: .92rem; }
.fr-lines{
  margin-top: .85rem;
  display:grid;
  gap:.45rem;
}
.fr-line{
  border-radius: .8rem;
  border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  padding: .5rem .65rem;
  color: var(--fr-muted);
  font-size: .86rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.fr-line i{ color: color-mix(in srgb, var(--fr-accent-2) 75%, #fff); }
.fr-form-card{
  border-radius: 1rem;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  padding: 1rem;
  backdrop-filter: blur(16px);
  position:relative;
}
.fr-form-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fr-accent-1) 60%, #fff), rgba(255,255,255,.15), color-mix(in srgb, var(--fr-accent-2) 60%, #fff));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.45;
  pointer-events:none;
}
.fr-form-card .form-label{
  color: var(--fr-text);
  font-weight: 600;
  font-size: .9rem;
}
.fr-form-card .form-control{
  background: var(--fr-input-bg);
  border-color: var(--fr-input-border);
  color: var(--fr-text);
  box-shadow:none;
}
.fr-form-card .form-control::placeholder{ color: rgba(255,255,255,.45); }
.fr-form-card .form-control:focus{
  border-color: color-mix(in srgb, var(--fr-accent-1) 65%, #fff);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fr-accent-1) 20%, transparent);
  background: rgba(255,255,255,.10);
}
.fr-form-card .btn-outline-secondary{
  border-color: var(--fr-input-border);
  color: var(--fr-text);
  background: rgba(255,255,255,.08);
}
.fr-form-card .btn-outline-secondary:hover{
  border-color: rgba(255,255,255,.44);
  color: var(--fr-text);
  background: rgba(255,255,255,.16);
}
.fr-help{ color: var(--fr-muted); font-size: .83rem; }
.fr-cat-dock{
  position: relative;
  margin: 0 0 .95rem;
  border-radius: .95rem;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: .65rem;
  overflow: hidden;
}
.fr-cat-dock::after{
  content:"";
  position:absolute;
  inset:auto -10% -40% 25%;
  height: 85%;
  background: radial-gradient(circle, color-mix(in srgb, var(--fr-accent-1) 25%, transparent), transparent 70%);
  filter: blur(18px);
  pointer-events:none;
}
.fr-cat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.45rem;
}
.fr-cat-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.76rem;
  color:var(--fr-text);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.fr-cat-badge::before{
  content:"😼";
  font-size:.85rem;
  transform-origin:center;
  animation: fr-cat-nod 2.6s ease-in-out infinite;
}
.fr-cat-grid{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:.7rem;
  align-items:center;
}
.fr-cat-frame{
  position:relative;
  width:92px;
  height:92px;
  border-radius: 1rem;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 4px color-mix(in srgb, var(--fr-accent-2) 10%, transparent),
    0 12px 24px rgba(0,0,0,.22);
  transform: rotate(-2deg);
  animation: fr-cat-float 5.2s ease-in-out infinite;
}
.fr-cat-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}
.fr-cat-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(135deg, rgba(255,255,255,.04), transparent 55%);
  pointer-events:none;
}
.fr-cat-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.14), transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--fr-accent-1) 22%, transparent), color-mix(in srgb, var(--fr-accent-2) 18%, transparent));
}
.fr-cat-meta{
  min-width:0;
  display:grid;
  gap:.25rem;
}
.fr-cat-name{
  font-weight:700;
  line-height:1.15;
}
.fr-cat-caption{
  color: var(--fr-muted);
  font-size:.82rem;
  line-height:1.25;
}
.fr-submit{
  width:100%;
  border:0;
  border-radius: .9rem;
  padding: .8rem 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color:#100913;
  background:
    linear-gradient(135deg, var(--fr-accent-1), var(--fr-accent-2) 60%, var(--fr-accent-3));
  box-shadow:
    0 8px 20px rgba(0,0,0,.25),
    0 0 24px color-mix(in srgb, var(--fr-accent-1) 32%, transparent);
  transform-origin: center;
  animation: fr-button-wobble 4.2s ease-in-out infinite;
}
.fr-submit:hover{ filter: saturate(1.08) brightness(1.02); }
.fr-submit:disabled{
  opacity:.55;
  filter: grayscale(.2);
  animation:none;
  cursor:not-allowed;
}
.fr-denied{
  border:1px solid rgba(255,120,120,.3);
  background: rgba(255,80,80,.08);
  color: #ffd8d8;
  border-radius: .9rem;
  padding: .75rem .85rem;
  margin-bottom: .85rem;
}
.fr-footer{
  margin-top: .75rem;
  color: var(--fr-muted);
  font-size: .82rem;
  text-align:center;
}
.fr-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.65rem;
}
.fr-link{
  color: var(--fr-text);
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.35);
}
.fr-link:hover{ border-bottom-color: rgba(255,255,255,.8); }
.fr-mini-burst{
  position:absolute;
  width: 13rem;
  aspect-ratio: 1;
  right: -4rem;
  top: -4rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 55%),
    conic-gradient(from 0deg, color-mix(in srgb, var(--fr-accent-1) 50%, transparent), transparent 35%, color-mix(in srgb, var(--fr-accent-2) 55%, transparent), transparent 68%, color-mix(in srgb, var(--fr-accent-3) 48%, transparent));
  filter: blur(3px);
  opacity:.85;
  animation: fr-spin 14s linear infinite reverse;
  pointer-events:none;
}
.fr-role-mark{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fr-muted);
  font-size: .78rem;
}
@media (max-width: 991.98px){
  .fr-layout{ grid-template-columns: 1fr; }
  .fr-left{ order: 2; }
  .fr-form-wrap{ order: 1; }
}
@media (prefers-reduced-motion: reduce){
  .fr-shell::before, .fr-shell::after, .fr-grid, .fr-particles span, .fr-marquee-track, .fr-submit, .fr-badge::before, .fr-mini-burst, .fr-title .glitch{
    animation: none !important;
  }
}
@keyframes fr-spin { to { transform: rotate(360deg); } }
@keyframes fr-breathe {
  0%,100% { transform: scale(1) translate3d(0,0,0); opacity:.42; }
  50% { transform: scale(1.07) translate3d(0,-8px,0); opacity:.58; }
}
@keyframes fr-grid-shift { to { transform: translateY(-24px); } }
@keyframes fr-marquee { to { transform: translateX(-50%); } }
@keyframes fr-blink { 0%,100%{ opacity:.65; } 50%{ opacity:1; box-shadow:0 0 18px color-mix(in srgb, var(--fr-accent-1) 75%, transparent);} }
@keyframes fr-float {
  0% { transform: translate3d(0,0,0) scale(.7); opacity:0; }
  10% { opacity:.6; }
  85% { opacity:.7; }
  100% { transform: translate3d(var(--drift, 0px), -130%, 0) scale(1.25); opacity:0; }
}
@keyframes fr-glitch {
  0%, 90%, 100% { transform: translate(0); filter: none; }
  91% { transform: translate(1px,-1px); }
  92% { transform: translate(-1px,1px); filter: hue-rotate(16deg); }
  93% { transform: translate(1px,0); }
}
@keyframes fr-button-wobble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  8% { transform: translateY(-1px) rotate(.4deg); }
  10% { transform: translateY(-1px) rotate(-.4deg); }
  12% { transform: translateY(0) rotate(0); }
  55% { transform: translateY(0) scale(1); }
  58% { transform: translateY(-1px) scale(1.01); }
  62% { transform: translateY(0) scale(1); }
}
@keyframes fr-cat-float {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-3px); }
}
@keyframes fr-cat-nod {
  0%,100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-7deg) scale(1.03); }
  30% { transform: rotate(4deg); }
  40% { transform: rotate(-2deg); }
}

/* === source: public/css/claude-design-colors-and-type.css === */
/** TAJELO workspace design, September 2026. Theme and compatibility tokens. */
html[data-bs-theme] {
  font-size: calc(16px * var(--t-font-scale, 1));
  --ds-bg: color-mix(in srgb, #f4f5f7 94%, rgb(var(--t-brand-mist-rgb)));
  --ds-surface-solid: rgb(var(--ds-rgb));
  --ds-surface: rgba(var(--ds-rgb), var(--ds-surface-alpha));
  --ds-surface-alpha: 1;
  --ds-soft: color-mix(in srgb, var(--ds-surface-solid) 90%, rgb(var(--t-brand-mist-rgb)));
  --ds-ink: #182337;
  --ds-muted: #637086;
  --ds-line: rgba(var(--ds-ink-rgb), var(--ds-line-alpha));
  --ds-line-alpha: .14;
  --ds-accent: var(--t-accent);
  --ds-accent-hover: var(--t-accent);
  --ds-on-accent: var(--t-on-accent, #fff);
  --ds-primary: var(--t-primary-fill, var(--t-accent));
  --ds-on-primary: var(--t-on-primary, #fff);
  --ds-accent-soft: color-mix(in srgb, var(--ds-surface-solid), var(--ds-accent) var(--ds-accent-tint));
  --ds-accent-tint: 14%;
  --ds-shadow: var(--t-card-shadow);
  --ds-rgb: 255,255,255;
  --ds-ink-rgb: 24,35,55;
  --ds-radius: var(--t-radius);
  --ds-radius-control: max(3px, calc(var(--t-radius) * .65));
  --ds-radius-card: var(--t-radius);
  --ds-radius-modal: var(--t-radius);
  --ds-control-h: 36px;
  --ds-control-py: .375rem;
  --ds-control-px: .65rem;
  --ds-panel-pad: 14px;
  --ds-gap: 12px;
  --ds-glass-blur: 0px;
  --ds-control-bg: var(--ds-surface);
  --ds-control-border: 1px;
  --ds-heading-weight: 650;
  --ds-heading-tracking: -.015em;
  --t-radius-input: var(--ds-radius-control);
  --t-radius-card: var(--ds-radius-card);
  --t-radius-modal: var(--ds-radius-modal);
  --t-fg: var(--ds-ink);
  --t-bg-rgb: 244,245,247;
  --bs-body-font-family: var(--t-font-sans);
  --bs-body-bg: var(--ds-bg);
  --bs-body-bg-rgb: 244,245,247;
  --bs-body-color: var(--ds-ink);
  --bs-body-color-rgb: var(--ds-ink-rgb);
  --bs-secondary-color: var(--ds-muted);
  --bs-secondary-bg: var(--ds-soft);
  --bs-tertiary-bg: var(--ds-soft);
  --bs-emphasis-color: var(--ds-ink);
  --bs-border-color: var(--ds-line);
  --bs-border-color-rgb: 220,226,234;
  --bs-primary: var(--ds-accent);
  --bs-primary-rgb: var(--t-accent-rgb);
  --bs-link-color: var(--ds-accent);
  --bs-link-color-rgb: var(--t-accent-rgb);
  --bs-border-radius: var(--ds-radius);
  --bs-border-radius-sm: var(--ds-radius-control);
  --bs-border-radius-lg: var(--ds-radius-card);
  --cdk-bg: var(--ds-bg);
  --cdk-card: var(--ds-surface);
  --cdk-glass: var(--ds-surface);
  --cdk-sidebar: var(--ds-surface);
  --cdk-input: var(--ds-surface);
  --cdk-panel: var(--ds-soft);
  --cdk-fg: var(--ds-ink);
  --cdk-fg-2: var(--ds-muted);
  --cdk-fg-3: var(--ds-muted);
  --cdk-border: var(--ds-line);
  --cdk-border-soft: var(--ds-line);
  --cdk-shadow: none;
  --cdk-shadow-2: var(--ds-shadow);
  --cdk-hover: var(--ds-soft);
  --cdk-active: var(--ds-accent-soft);
  --cdx-bg: var(--ds-bg);
  --cdx-surface: var(--ds-surface);
  --cdx-surface-strong: var(--ds-surface);
  --cdx-surface-muted: var(--ds-soft);
  --cdx-border: var(--ds-line);
  --cdx-border-strong: var(--ds-line);
  --cdx-text: var(--ds-ink);
  --cdx-muted: var(--ds-muted);
  --cdx-shadow: var(--ds-shadow);
  --cdx-shadow-strong: var(--ds-shadow);
}
html[data-bs-theme="dark"] {
  color-scheme: dark;
  --ds-bg: color-mix(in srgb, #10151f 96%, rgb(var(--t-brand-ink-rgb)));
  --ds-soft: color-mix(in srgb, var(--ds-surface-solid) 93%, rgb(var(--t-brand-mist-rgb)));
  --ds-ink: #e8edf5;
  --ds-muted: #a4b0c3;
  --ds-rgb: 25,33,46;
  --ds-ink-rgb: 232,237,245;
  --t-bg-rgb: 16,21,31;
  --bs-body-bg-rgb: 16,21,31;
  --bs-border-color-rgb: 48,60,78;
}
html[data-ui-palette="warm"] { --ds-ink: #302927; --ds-ink-rgb: 48,41,39; --ds-muted: #75655f; }
html[data-ui-palette="warm"][data-bs-theme="dark"] { --ds-ink: #f0e9e4; --ds-ink-rgb: 240,233,228; --ds-muted: #b6a69f; --ds-rgb: 32,29,30; }
html[data-ui-palette="contrast"] { --ds-ink: #101826; --ds-ink-rgb: 16,24,38; --ds-muted: #455267; }
html[data-ui-palette="contrast"][data-bs-theme="dark"] { --ds-ink: #f6f8fc; --ds-ink-rgb: 246,248,252; --ds-muted: #bcc8da; }
html[data-ui-preset="clear_opus"] { --ds-rgb: 255,255,255; }
html[data-ui-preset="clear_opus"][data-bs-theme="dark"] { --ds-rgb: 30,38,51; }
html[data-ui-preset="noir"] { --ds-rgb: 233,235,239; }
html[data-ui-preset="noir"][data-bs-theme="dark"] { --ds-rgb: 18,23,32; }
/* Background tone (UiDesign ui_bg_tone): the page color under every background.
   Gray and deep drop the blue cast at night: windows turn neutral gray too. */
html[data-ui-bg-tone="tinted"] { --ds-bg: color-mix(in srgb, #f4f5f7 89%, var(--t-accent)); }
html[data-ui-bg-tone="tinted"][data-bs-theme="dark"] { --ds-bg: color-mix(in srgb, #0d1118 87%, var(--t-accent)); }
html[data-ui-bg-tone="gray"] { --ds-bg: #f1f1f3; --t-bg-rgb: 241,241,243; --bs-body-bg-rgb: 241,241,243; --ds-soft: color-mix(in srgb, var(--ds-surface-solid) 93%, #8e8e96); }
html[data-ui-bg-tone="deep"] { --ds-bg: #e6e8ec; --t-bg-rgb: 230,232,236; --bs-body-bg-rgb: 230,232,236; }
html[data-ui-bg-tone="gray"][data-bs-theme="dark"] { --ds-bg: #131315; --t-bg-rgb: 19,19,21; --bs-body-bg-rgb: 19,19,21; --ds-rgb: 30,30,33; --ds-soft: color-mix(in srgb, var(--ds-surface-solid) 92%, #ffffff); --bs-border-color-rgb: 58,58,63; }
html[data-ui-bg-tone="deep"][data-bs-theme="dark"] { --ds-bg: #000000; --t-bg-rgb: 0,0,0; --bs-body-bg-rgb: 0,0,0; --ds-rgb: 22,22,24; --ds-soft: color-mix(in srgb, var(--ds-surface-solid) 91%, #ffffff); --bs-border-color-rgb: 50,50,55; }
html[data-ui-bg-tone="gray"][data-bs-theme="dark"][data-ui-preset="clear_opus"] { --ds-rgb: 40,40,44; }
html[data-ui-bg-tone="gray"][data-bs-theme="dark"][data-ui-preset="noir"] { --ds-rgb: 22,22,24; }
html[data-ui-bg-tone="deep"][data-bs-theme="dark"][data-ui-preset="clear_opus"] { --ds-rgb: 32,32,35; }
html[data-ui-bg-tone="deep"][data-bs-theme="dark"][data-ui-preset="noir"] { --ds-rgb: 12,12,13; }
html[data-ui-glass="1"] { --ds-surface-alpha: .86; --ds-glass-blur: 12px; }
html[data-ui-glass="0"] { --ds-glass-blur: 0px; --ds-surface-alpha: 1; }
html[data-ui-surfaces="soft"] { --ds-line-alpha: .09; }
html[data-ui-surfaces="strong"] { --ds-line-alpha: .27; }
html[data-ui-accent-boost="0"] { --ds-accent-tint: 7%; }
html[data-ui-density="compact"] { --ds-control-h: 32px; --ds-control-py: .25rem; --ds-control-px: .5rem; --ds-panel-pad: 10px; --ds-gap: 8px; }
html[data-ui-density="relaxed"] { --ds-control-h: 40px; --ds-control-py: .5rem; --ds-control-px: .8rem; --ds-panel-pad: 18px; --ds-gap: 16px; }
html[data-ui-headings="expressive"] { --ds-heading-weight: 800; --ds-heading-tracking: -.025em; }
html[data-ui-headings="dense"] { --ds-heading-weight: 700; --ds-heading-tracking: -.006em; }
html[data-ui-controls="outline"] { --ds-control-bg: transparent; --ds-control-border: 1.5px; }
html[data-ui-controls="solid"] { --ds-control-bg: var(--ds-soft); }
@media (max-width: 767.98px) {
  html[data-bs-theme] { --ds-panel-pad: 10px; --ds-gap: 8px; }
  html[data-ui-density="compact"] { --ds-control-h: 34px; --ds-panel-pad: 8px; }
  html[data-ui-density="relaxed"] { --ds-panel-pad: 14px; --ds-gap: 12px; }
}
html[data-ui-font-family="system"] { --t-font-sans: system-ui, "Segoe UI", sans-serif; }
html[data-ui-font-family="classic"] { --t-font-sans: "PT Sans", "Segoe UI", sans-serif; }
html[data-ui-font-family="rounded"] { --t-font-sans: "Rubik", "Segoe UI", sans-serif; }
html[data-ui-font-family="plex"] { --t-font-sans: "IBM Plex Sans", "Segoe UI", sans-serif; }
html[data-ui-font-family="montserrat"] { --t-font-sans: "Montserrat", "Segoe UI", sans-serif; }

/* === source: public/css/claude-designer-overrides.css === */
/** Shared controls and surfaces. Compatibility filename retained by the release manifest. */
html[data-bs-theme] body {
  color: var(--ds-ink);
  background-color: var(--ds-bg);
  font-family: var(--t-font-sans);
  line-height: 1.55;
}
html[data-bs-theme] body::before, html[data-bs-theme] body::after { background: none; box-shadow: none; }
html[data-bs-theme] .content { background: transparent; }
html[data-bs-theme] :is(h1,h2,h3,h4,h5,h6) { color: var(--ds-ink); letter-spacing: var(--ds-heading-tracking); font-weight: var(--ds-heading-weight); text-shadow: none; }
html[data-bs-theme] h1 { font-size: clamp(1.7rem, 2.5vw, 2.6rem); line-height: 1.2; }
/* v5.56.0: a heading's size class wins over its tag (an h2.h5 card title is an h5, not an h2 bigger than the page title). */
html[data-bs-theme] :is(h2:not(.h1,.h3,.h4,.h5,.h6),.h2) { font-size: 1.4rem; line-height: 1.3; }
html[data-bs-theme] :is(h3:not(.h1,.h2,.h4,.h5,.h6),.h3) { font-size: 1.15rem; line-height: 1.35; }
html[data-bs-theme] :is(.text-muted,.text-secondary) { color: var(--ds-muted) !important; }
html[data-bs-theme] :is(.card,.t-panel,.t-stat-card,.page-hero,.list-group-item,.accordion-item) {
  color: var(--ds-ink); background: var(--ds-surface); border-color: var(--ds-line); box-shadow: var(--ds-shadow); backdrop-filter: blur(var(--ds-glass-blur)); transform: none;
}
html[data-bs-theme] :is(.card,.t-panel,.page-hero) { border-radius: var(--ds-radius-card); }
html[data-bs-theme] :is(.card:hover,.t-stat-card:hover) { transform: none; box-shadow: none; }
html[data-bs-theme] :is(.t-stat-card::after,.t-panel::before,.card::before) { background: none; }
html[data-bs-theme] .card-header { background: transparent; border-color: var(--ds-line); padding: var(--ds-panel-pad); }
html[data-bs-theme] .card-body { padding: var(--ds-panel-pad); }
html[data-bs-theme] .page-hero { padding: var(--ds-panel-pad); margin-bottom: var(--ds-gap); }
html[data-bs-theme] .t-surface { --t-page-line: var(--ds-line); --t-page-line-strong: var(--ds-line); --t-page-soft: var(--ds-soft); --t-page-soft-2: var(--ds-soft); --t-page-pane-bg: var(--ds-surface); --t-page-shadow: none; }
html[data-bs-theme] .btn {
  border-radius: var(--ds-radius-control); min-height: var(--ds-control-h); padding: var(--ds-control-py) var(--ds-control-px); font-size: .85rem; font-weight: 600; line-height: 1.3;
  box-shadow: none; text-shadow: none; transform: none; transition: background-color var(--t-motion-fast) ease, border-color var(--t-motion-fast) ease, color var(--t-motion-fast) ease;
}
html[data-bs-theme] .btn::before, html[data-bs-theme] .btn::after { box-shadow: none; }
html[data-bs-theme] .btn:hover { transform: none; box-shadow: none; }
html[data-bs-theme] .btn-primary {
  --bs-btn-color: var(--ds-on-primary); --bs-btn-hover-color: var(--ds-on-primary); --bs-btn-active-color: var(--ds-on-primary);
  --bs-btn-bg: var(--ds-primary); --bs-btn-hover-bg: var(--ds-primary); --bs-btn-active-bg: var(--ds-primary);
  --bs-btn-border-color: var(--ds-primary); --bs-btn-hover-border-color: var(--ds-primary); --bs-btn-active-border-color: var(--ds-primary);
  --bs-btn-disabled-color: var(--ds-muted); --bs-btn-disabled-bg: var(--ds-soft); --bs-btn-disabled-border-color: var(--ds-line);
  background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary);
}
html[data-bs-theme] .btn-primary:hover { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); }
html[data-bs-theme] :is(.btn-outline-secondary,.btn-light) { color: var(--ds-ink); background: var(--ds-surface); border-color: var(--ds-line); }
html[data-bs-theme] :is(.btn-outline-secondary,.btn-light):hover { background: var(--ds-soft); border-color: var(--ds-muted); }
html[data-bs-theme] .btn-outline-primary { color: var(--ds-accent); border-color: var(--ds-accent); background: transparent; }
html[data-bs-theme] .btn-outline-primary:hover { color: var(--ds-accent); background: var(--ds-accent-soft); }
html[data-bs-theme] .btn-sm { min-height: max(28px, calc(var(--ds-control-h) - 4px)); padding: var(--ds-control-py) var(--ds-control-px); font-size: .8rem; }

html[data-bs-theme] :is(.form-control,.form-select,.input-group-text) {
  min-height: var(--ds-control-h); padding-top: var(--ds-control-py); padding-bottom: var(--ds-control-py); border: var(--ds-control-border) solid var(--ds-line); border-radius: var(--ds-radius-control); background-color: var(--ds-control-bg);
  color: var(--ds-ink); box-shadow: none; font-size: .875rem;
}
html[data-bs-theme] :is(.form-control,.form-select):focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
html[data-bs-theme] :is(.form-control,.form-select).is-invalid,
html[data-bs-theme] .was-validated :is(.form-control,.form-select):invalid { border-color: var(--bs-form-invalid-border-color, #dc3545) !important; }
html[data-bs-theme] :is(.form-control,.form-select).is-invalid:focus,
html[data-bs-theme] .was-validated :is(.form-control,.form-select):invalid:focus { box-shadow: 0 0 0 3px rgba(220,53,69,.18) !important; }
html[data-bs-theme] :is(.form-control,.form-select).is-valid,
html[data-bs-theme] .was-validated :is(.form-control,.form-select):valid { border-color: var(--bs-form-valid-border-color, #198754) !important; }
html[data-bs-theme] :is(.form-control,.form-select).is-valid:focus,
html[data-bs-theme] .was-validated :is(.form-control,.form-select):valid:focus { box-shadow: 0 0 0 3px rgba(25,135,84,.18) !important; }
html[data-bs-theme] .form-control::placeholder { color: var(--ds-muted); opacity: .85; }
html[data-bs-theme] .form-control:disabled, html[data-bs-theme] .form-select:disabled { background-color: var(--ds-soft); color: var(--ds-muted); }
html[data-bs-theme] .form-label { font-size: .83rem; font-weight: 650; color: var(--ds-ink); margin-bottom: .4rem; }
html[data-bs-theme] .form-text { color: var(--ds-muted); font-size: .78rem; }
html[data-bs-theme] :is(.form-check-input:checked,.progress-bar) { background-color: var(--ds-accent); border-color: var(--ds-accent); }
html[data-bs-theme] .form-check-input:focus { box-shadow: 0 0 0 3px var(--ds-accent-soft); }
html[data-bs-theme] .table { --bs-table-color: var(--ds-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--ds-line); --bs-table-hover-bg: var(--ds-soft); --bs-table-striped-bg: var(--ds-soft); font-size: .85rem; }
html[data-bs-theme] .table > :not(caption) > * > * { padding: var(--ds-control-py) var(--ds-control-px); vertical-align: middle; }
html[data-bs-theme] .table th { font-size: .74rem; font-weight: 700; color: var(--ds-muted); background: var(--ds-soft); }
html[data-bs-theme] :is(.dropdown-menu,.modal-content,.offcanvas,.toast) { background: var(--ds-surface); color: var(--ds-ink); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); backdrop-filter: blur(var(--ds-glass-blur)); }
html[data-bs-theme] .dropdown-menu { padding: 4px; border-radius: var(--ds-radius-card); }
html[data-bs-theme] .dropdown-item { color: var(--ds-ink); border-radius: var(--ds-radius-control); padding: var(--ds-control-py) var(--ds-control-px); min-height: var(--ds-control-h); font-size: .85rem; }
html[data-bs-theme] .dropdown-item:hover { background: var(--ds-soft); }
html[data-bs-theme] .dropdown-item.active { background: var(--ds-accent-soft); color: var(--ds-accent); }
html[data-bs-theme] .modal { --bs-modal-width: 440px; }
html[data-bs-theme] .modal-content { border-radius: var(--ds-radius-modal); }
html[data-bs-theme] .modal-header, html[data-bs-theme] .modal-footer { border-color: var(--ds-line); padding: var(--ds-panel-pad); gap: 6px; }
html[data-bs-theme] .modal-body { padding: var(--ds-panel-pad); }
html[data-bs-theme] .modal-footer > * { margin: 0; }
html[data-bs-theme] .modal-title { font-size: 1rem; }
html[data-bs-theme] .badge { font-weight: 650; border-radius: 5px; padding: .4em .6em; line-height: 1.3; }
html[data-bs-theme] .text-bg-secondary { background: var(--ds-soft) !important; color: var(--ds-muted) !important; }

html[data-bs-theme] kbd { color: var(--ds-ink); background: var(--ds-soft); border: 1px solid var(--ds-line); border-radius: 4px; }
html[data-bs-theme] .alert { border-radius: 10px; box-shadow: none; }
/* v5.59.0: the accent ring is for things you press. A text field shows focus
   by its own frame (.form-control, .form-select) or by the frame around it
   (a search pill, a composer); a second ring on the field drew a rectangle
   inside the rounded frame. */
html[data-bs-theme] :is(a, button, [tabindex], input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"])):focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
html[data-bs-theme] :is(textarea, select, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"])):focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media (max-width: 767.98px) {
  html[data-bs-theme] :is(.form-control,.form-select) { font-size: 16px; }
  /* iOS Safari zooms the page on focus of any field under 16px and stays zoomed
     (content then looks shifted right / cut off). Keep every text field at 16px. */
  html[data-bs-theme] :is(textarea, select, input:not([type]), input:is([type="text"],[type="search"],[type="email"],[type="password"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="time"],[type="datetime-local"])) { font-size: 16px !important; }
  html[data-bs-theme] .card-body { padding: var(--ds-panel-pad); }
  html[data-bs-theme] .modal :is(.btn,.dropdown-item) { min-height: max(36px, var(--ds-control-h)); }
}
html[data-ui-bg-cover="1"][data-ui-has-cover="1"] body { background: transparent; }
html[data-ui-anim="0"] *, html[data-ui-anim="0"] *::before, html[data-ui-anim="0"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* === source: public/css/claude-designer-app-layout.css === */
/** Application frame: fixed-width navigation, quiet toolbar; the phone's places are in the island (ui-island.css). */
html[data-bs-theme] {
  --sidebar-w: 224px;
  --sidebar-mini-w: 72px;
  --t-shell-topbar-min-height: calc(var(--ds-control-h) + 14px);
  --t-shell-topbar-row-min-height: var(--t-shell-topbar-min-height);
  --t-shell-topbar-btn-min-height: var(--ds-control-h);
  --t-shell-topbar-btn-radius: var(--ds-radius-control);
  --t-shell-brand-logo-size: 30px;
  --t-shell-nav-gap: 18px;
}
html[data-bs-theme] .app-shell { background: transparent; width: 100%; max-width: 100%; }
/* 5.55.0: the page ends above the island (island.js measures it into --island-space). */
html[data-bs-theme] .app-shell [data-shell-content] > .container { padding-top: 28px !important; padding-bottom: max(32px, calc(var(--island-space) + 20px)); }
@media (min-width: 768px) {
  html[data-bs-theme] .app-shell.has-sidebar-compact { --sidebar-w: var(--sidebar-mini-w); }
}
@media (max-width: 767.98px) {
  html[data-bs-theme] .app-shell { --t-layout-pad-left: var(--ds-panel-pad) !important; --t-layout-pad-right: var(--ds-panel-pad) !important; }
  html[data-bs-theme] .app-shell [data-shell-content] > .container { padding-top: var(--ds-panel-pad) !important; }
  html[data-bs-theme] .offcanvas.offcanvas-start { width: min(86vw, 340px); border-radius: 0; }
}

/* === source: public/css/claude-designer-user-surfaces.css === */
/* Tools and calendar share the quiet workspace surfaces of the application. */
.cd-user-surface { color: var(--ds-ink); min-width: 0; margin-bottom: 1.5rem; padding: 0; }
.cd-user-surface::before,
.cd-user-surface::after,
.cd-user-surface .page-hero::after { content: none; }
.cd-user-surface .page-hero {
  padding: .25rem 0 1.35rem; margin-bottom: 1rem;
  border: 0; border-bottom: 1px solid var(--ds-line); border-radius: 0;
  background: transparent; box-shadow: none; backdrop-filter: blur(var(--ds-glass-blur));
}
.cd-user-surface .page-hero :is(h1, .h3) { font-weight: 750; letter-spacing: -.035em; }
.cd-user-surface :is(.page-subtle, .form-text, .text-secondary) { color: var(--ds-muted) !important; }
.cd-user-surface :is(.card, .modal-content) {
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface);
  box-shadow: var(--ds-shadow) !important; backdrop-filter: blur(var(--ds-glass-blur)); transform: none; animation: none;
}
.cd-user-surface :is(.card-header, .card-footer) { background: transparent; border-color: var(--ds-line); padding: var(--ds-panel-pad); }
.cd-user-surface .card-body { padding: var(--ds-panel-pad); }
.cd-user-surface .alert { border-radius: var(--ds-radius-control); box-shadow: none; }
.cd-user-surface .table-responsive { max-width: 100%; overflow-x: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); }
.cd-user-surface .table { --bs-table-bg: transparent; --bs-table-color: var(--ds-ink); --bs-table-hover-bg: var(--ds-soft); --bs-table-striped-bg: var(--ds-bg); margin-bottom: 0; font-size: .86rem; }
.cd-user-surface .table > :not(caption) > * > * { padding: var(--ds-control-py) var(--ds-control-px); border-color: var(--ds-line); vertical-align: middle; }
.cd-user-surface .table thead th { background: var(--ds-soft); color: var(--ds-muted); font-size: .73rem; font-weight: 700; }
.cd-user-surface .list-group-item { background: var(--ds-surface); border-color: var(--ds-line); box-shadow: none; transform: none; }
.cd-user-surface .btn { min-height: var(--ds-control-h); border-radius: var(--ds-radius-control); font-size: .86rem; font-weight: 650; box-shadow: none; transform: none; }
.cd-user-surface .btn-primary { border-color: var(--ds-accent); background: var(--ds-accent); color: var(--ds-on-accent); }
.cd-user-surface .btn-primary:hover { background: var(--ds-accent-hover); }
.cd-user-surface :is(.btn-outline-secondary, .btn-outline-primary) { background: var(--ds-surface); border-color: var(--ds-line); color: var(--ds-ink); }
.cd-user-surface :is(.btn-outline-secondary, .btn-outline-primary):hover { background: var(--ds-soft); border-color: var(--ds-muted); }
.cd-user-surface :is(.form-control, .form-select, .input-group-text) { min-height: var(--ds-control-h); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background-color: var(--ds-control-bg); border-width: var(--ds-control-border); color: var(--ds-ink); box-shadow: none; }
.cd-user-surface :is(.form-control, .form-select):focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
.cd-user-surface .form-label { font-size: .85rem; font-weight: 650; }
.cd-user-surface .badge { border-radius: var(--ds-radius-control) !important; font-weight: 650; }

/* Tool launcher: useful descriptions, one accent, stable hover states. */
.cd-user-surface--tools .cd-tools-section + .cd-tools-section { margin-top: 2rem; }
.cd-user-surface--tools .cd-tools-section__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .25rem; }
.cd-user-surface--tools .cd-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: .5rem; }
.cd-user-surface--tools .cd-tool-tile {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0; min-height: 220px; padding: 1.35rem;
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface);
  color: var(--ds-ink); text-decoration: none; box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}
.cd-user-surface--tools .cd-tool-tile::before,
.cd-user-surface--tools .cd-tool-tile::after { content: none; }
.cd-user-surface--tools a.cd-tool-tile:hover { border-color: var(--ds-accent); background: color-mix(in srgb, var(--ds-surface), var(--ds-accent) 2%); }
.cd-user-surface--tools .cd-tool-tile.is-disabled { color: var(--ds-muted); background: var(--ds-bg); }
.cd-user-surface--tools .cd-tool-tile__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.cd-user-surface--tools .cd-tool-tile__icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; background: var(--ds-accent-soft); color: var(--ds-accent); font-size: 1.25rem; }
.cd-user-surface--tools .cd-tool-tile__badge { padding: .25rem .5rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); color: var(--ds-muted); background: var(--ds-bg); font-size: .68rem; font-weight: 650; }
.cd-user-surface--tools .cd-tool-tile__title { margin: 0; font-size: 1.06rem; font-weight: 750; letter-spacing: -.025em; }
.cd-user-surface--tools .cd-tool-tile__desc { flex: 1; margin: 0; color: var(--ds-muted); font-size: .84rem; line-height: 1.65; }
.cd-user-surface--tools .cd-tool-tile__cta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--ds-line); color: var(--ds-accent); font-size: .8rem; font-weight: 700; }
.cd-user-surface--tools .cd-tool-tile.is-disabled .cd-tool-tile__cta { color: var(--ds-muted); }

/* Selection colors supplement the existing calendar keyboard/JS behavior. */
.cd-user-surface--calendar .cal-toolbar { padding: .85rem 1rem; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: none; }
.cd-user-surface--calendar .cal-dow > div { padding-block: .75rem; color: var(--ds-muted); font-size: .75rem; font-weight: 700; }
.cd-user-surface--calendar :is(.cal-cell, .cal-week-day) { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); box-shadow: none; }
.cd-user-surface--calendar :is(.cal-cell, .cal-week-day):hover { border-color: var(--ds-accent); }
.cd-user-surface--calendar :is(.cal-cell, .cal-week-day).is-selected { border-color: var(--ds-accent); background: var(--ds-accent-soft); box-shadow: none; }
.cd-user-surface--calendar .cal-event { background: var(--ds-accent-soft); border-color: transparent; border-left: 3px solid var(--ds-accent); border-radius: var(--ds-radius-control); color: var(--ds-ink); box-shadow: none; }
.cd-user-surface--calendar .cal-event.is-target { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.cd-user-surface--calendar .cal-dot { background: var(--ds-accent); box-shadow: none; }
.cd-user-surface--calendar .cal-dot.is-empty { background: var(--ds-line); }
@media (max-width: 767.98px) {
  .cd-user-surface .page-hero { padding-bottom: 1rem; }
  .cd-user-surface .card-body { padding: var(--ds-panel-pad); }
  .cd-user-surface--tools .cd-tools-grid { gap: .75rem; }
  .cd-user-surface--tools .cd-tool-tile { padding: 1.1rem; min-height: 190px; }
  .cd-user-surface--calendar .cal-grid { gap: .3rem; }
  .cd-user-surface--calendar .cal-cell { min-height: 76px; padding: .4rem; border-radius: var(--ds-radius-control); }
  .cd-user-surface--calendar .cal-week { gap: .5rem; }
  .cd-user-surface--calendar .cal-week-day { min-height: 135px; }
}
@media (prefers-reduced-motion: reduce) { .cd-user-surface--tools .cd-tool-tile { transition: none; } }

/* === source: public/css/claude-designer-admin-surfaces.css === */
/* Administration surfaces. Structure and action contracts remain in the views. */
.cd-admin-surface {
  --t-admin-font: var(--t-font-sans);
  --t-admin-radius-sm: var(--ds-radius-control);
  --t-admin-radius-md: var(--ds-radius-card);
  --t-admin-radius-lg: var(--ds-radius-card);
  --t-admin-sticky-top: calc(var(--t-shell-top-offset, 64px) + 12px);
  --t-admin-bg: var(--ds-bg);
  --t-admin-fg: var(--ds-ink);
  --t-admin-muted: var(--ds-muted);
  --t-admin-card-bg: var(--ds-surface);
  --t-admin-card-bg-strong: var(--ds-surface);
  --t-admin-border: var(--ds-line);
  --t-admin-border-soft: var(--ds-line);
  --t-admin-input-bg: var(--ds-control-bg);
  --t-admin-table-head-bg: var(--ds-soft);
  --t-admin-toolbar-bg: var(--ds-surface);
  --t-admin-shadow-soft: var(--ds-shadow);
  --t-admin-shadow-hover: var(--ds-shadow);
  --t-admin-accent: var(--ds-accent);
  color: var(--ds-ink);
  font-family: var(--t-admin-font);
  min-width: 0;
}
.cd-admin-surface::before { content: none; }
.cd-admin-surface :is(.card, .cd-admin-panel, .cd-admin-inner-panel, .cd-admin-item-card) {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow) !important;
  backdrop-filter: blur(var(--ds-glass-blur));
  transform: none;
}
.cd-admin-surface :is(.card-header, .card-footer) { padding: var(--ds-panel-pad); border-color: var(--ds-line); background: transparent; }
.cd-admin-surface .card-body { padding: var(--ds-panel-pad); }
.cd-admin-surface :is(h1, .h3) { font-weight: 750; letter-spacing: -.035em; }
.cd-admin-surface :is(h2, h3, .h5) { letter-spacing: -.02em; font-weight: 700; }
.cd-admin-surface :is(.text-secondary, .form-text) { color: var(--ds-muted) !important; }
.cd-admin-surface .form-text { font-size: .8rem; line-height: 1.55; }
.cd-admin-surface :is(.cd-admin-toolbar, .cd-admin-filterbar) {
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface);
  padding: var(--ds-panel-pad); box-shadow: none; backdrop-filter: blur(var(--ds-glass-blur));
}
.cd-admin-surface .cd-admin-filterbar { position: sticky; top: var(--t-admin-sticky-top); z-index: 6; }
.cd-admin-cards-grid > [class*="col-"] > :is(.card, .cd-admin-panel) { height: 100%; }
.cd-admin-surface .t-sticky-bar {
  border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface);
  box-shadow: 0 3px 12px #1823370a; backdrop-filter: blur(var(--ds-glass-blur));
}
.cd-admin-surface :is(.form-control, .form-select, .input-group-text) {
  min-height: var(--ds-control-h); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control);
  background-color: var(--ds-control-bg); border-width: var(--ds-control-border); color: var(--ds-ink); font-size: .875rem;
}
.cd-admin-surface .form-label { font-size: .85rem; font-weight: 650; }
.cd-admin-surface :is(.form-control, .form-select):focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }
.cd-admin-surface .btn { border-radius: var(--ds-radius-control); font-size: .85rem; font-weight: 650; min-height: var(--ds-control-h); box-shadow: none; transform: none; }
.cd-admin-surface .btn-primary { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); }
.cd-admin-surface .btn-primary:hover { background: var(--ds-accent-hover); border-color: transparent; }
.cd-admin-surface :is(.btn-outline-secondary, .btn-outline-primary) { background: var(--ds-surface); border-color: var(--ds-line); color: var(--ds-ink); }
.cd-admin-surface :is(.btn-outline-secondary, .btn-outline-primary):hover { background: var(--ds-soft); border-color: var(--ds-muted); }
.cd-admin-surface .table {
  --bs-table-bg: transparent; --bs-table-color: var(--ds-ink);
  --bs-table-striped-bg: var(--ds-bg); --bs-table-hover-bg: var(--ds-soft);
  margin-bottom: 0; font-size: .84rem; line-height: 1.45;
}
.cd-admin-surface .table > :not(caption) > * > * { padding: var(--ds-control-py) var(--ds-control-px); border-color: var(--ds-line); vertical-align: middle; }
.cd-admin-surface .table thead th { background: var(--ds-soft); color: var(--ds-muted); font-size: .73rem; font-weight: 700; letter-spacing: .025em; }
.cd-admin-surface .cd-admin-table-wrap { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); overflow: auto; max-width: 100%; }
.cd-admin-surface .cd-admin-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.cd-admin-surface .badge { border-radius: var(--ds-radius-control) !important; font-size: .7rem; font-weight: 650; padding: .35em .6em; }
.cd-admin-surface .alert { border-radius: var(--ds-radius-control); box-shadow: none; backdrop-filter: blur(var(--ds-glass-blur)); }
.cd-admin-surface--domains :is(.ag-domain-card, .ag-bridge-card, .ag-create-card),
.cd-admin-surface--users .au-user-card { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); box-shadow: none; }
.cd-admin-surface--users .au-tabs .nav-link { border-radius: var(--ds-radius-control); font-weight: 650; color: var(--ds-muted); }
.cd-admin-surface--users .au-tabs .nav-link.active { background: var(--ds-accent-soft); border-color: transparent; color: var(--ds-accent); }
.cd-admin-surface--call-monitor :is(.acm-stage, .cd-admin-monitor-stage) { background: var(--ds-soft); border-color: var(--ds-line); box-shadow: none; }
.cd-admin-surface--call-monitor #acmState { color: var(--ds-muted); }
.cd-admin-surface--logs .admin-logs-meta-cell { max-width: 26rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cd-admin-surface code { padding: .15rem .35rem; border-radius: 5px; background: var(--ds-soft); color: inherit; }
@media (max-width: 991.98px) {
  .cd-admin-surface .cd-admin-filterbar { position: static; }
  .cd-admin-surface :is(.cd-admin-toolbar, .cd-admin-filterbar) { padding: var(--ds-panel-pad); }
}
@media (max-width: 575.98px) {
  .cd-admin-surface .card-body { padding: var(--ds-panel-pad); }
  .cd-admin-surface .table { font-size: .8rem; }
  .cd-admin-surface .table > :not(caption) > * > * { padding: var(--ds-control-py) var(--ds-control-px); }
  .cd-admin-surface :is(.cd-admin-toolbar, .cd-admin-filterbar) .btn { min-height: var(--ds-control-h); }
}

/* ── TSOY ID setup (index.php?r=admin_sso) ── */
.sso-setup{display:flex;flex-direction:column;gap:1rem}
.sso-hero{position:relative;display:flex;gap:1.25rem;align-items:flex-start;padding:1.4rem 1.5rem;border-radius:var(--ds-radius-card,18px);border:1px solid var(--ds-line,rgba(0,0,0,.08));background:var(--ds-surface,#fff);overflow:hidden;box-shadow:var(--ds-shadow,0 8px 24px rgba(15,23,42,.06))}
.sso-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;background:radial-gradient(120% 140% at 0% 0%,var(--sso-tone,#64748b) 0%,transparent 55%)}
.sso-hero--success{--sso-tone:#16a34a}.sso-hero--warning{--sso-tone:#d97706}.sso-hero--danger{--sso-tone:#dc2626}.sso-hero--secondary{--sso-tone:var(--ds-accent,#6366f1)}
.sso-hero-mark{flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#111827,#374151);color:#fff;font-weight:800;letter-spacing:.04em;font-size:1.25rem;box-shadow:0 10px 24px rgba(17,24,39,.25);position:relative}
.sso-hero-mark::after{content:"";position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--sso-tone,#64748b);border:3px solid var(--ds-surface,#fff)}
.sso-hero-body{flex:1;min-width:0;position:relative}
.sso-hero-state{font-size:1.25rem;font-weight:700;color:var(--ds-ink,inherit);display:flex;gap:.5rem;align-items:center}
.sso-hero-state .bi{color:var(--sso-tone)}
.sso-hero-lead{margin:.25rem 0 .75rem;color:var(--ds-muted,#64748b);max-width:62ch}
.sso-hero-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0}
.sso-hero-facts div{min-width:0}
.sso-hero-facts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-muted,#64748b);font-weight:600}
.sso-hero-facts dd{margin:0;font-size:.9rem;word-break:break-all}
.sso-hero-actions{position:relative;align-self:center}
.sso-btn-ti{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;border-radius:999px;padding:.55rem 1.1rem;border:1px solid var(--ds-line,rgba(0,0,0,.1))}
.sso-btn-ti-mark{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:.5rem;background:#111827;color:#fff;font-size:.72rem;font-weight:800}
.sso-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.sso-step{display:flex;gap:.65rem;align-items:center;padding:.75rem .9rem;border-radius:var(--ds-radius-control,12px);border:1px solid var(--ds-line,rgba(0,0,0,.08));background:var(--ds-surface,#fff)}
.sso-step-num{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--ds-soft,rgba(100,116,139,.12));color:var(--ds-muted,#64748b)}
.sso-step.is-done .sso-step-num{background:#16a34a;color:#fff}
.sso-step-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sso-step-text small{color:var(--ds-muted,#64748b);font-size:.75rem;margin-top:.15rem}
.sso-inline-form{display:flex;gap:.5rem;flex-wrap:wrap}
.sso-inline-form .form-control{flex:1 1 16rem;min-width:0}
.sso-check-summary,.sso-stat-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.sso-check-summary span,.sso-stat-pills span{font-size:.8rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:var(--ds-soft,rgba(100,116,139,.12))}
.sso-setup .is-ok{--sso-c:#16a34a}.sso-setup .is-warn{--sso-c:#d97706}.sso-setup .is-fail{--sso-c:#dc2626}
.sso-check-summary .is-ok,.sso-check-summary .is-warn,.sso-check-summary .is-fail,.sso-stat-pills .is-ok,.sso-stat-pills .is-fail{color:var(--sso-c);background:color-mix(in srgb,var(--sso-c) 12%,transparent)}
.sso-checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--ds-line,rgba(0,0,0,.08))}
.sso-checks li{display:grid;grid-template-columns:1.25rem minmax(9rem,14rem) 1fr;gap:.6rem;align-items:baseline;padding:.55rem 0;border-bottom:1px solid var(--ds-line,rgba(0,0,0,.06))}
.sso-checks li .bi{color:var(--sso-c)}
.sso-check-label{font-weight:600;font-size:.9rem}
.sso-check-detail{font-size:.82rem;color:var(--ds-muted,#64748b);word-break:break-word}
.sso-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--sso-c);margin-right:.35rem;vertical-align:.05rem;box-shadow:0 0 0 3px color-mix(in srgb,var(--sso-c) 20%,transparent)}
.sso-kv{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem}
.sso-kv dt{color:var(--ds-muted,#64748b);font-weight:500}.sso-kv dd{margin:0}
@media (max-width:991.98px){.sso-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.sso-hero{flex-direction:column;padding:1.1rem}.sso-hero-actions{align-self:stretch}.sso-hero-actions .btn{width:100%;justify-content:center}.sso-steps{grid-template-columns:1fr}.sso-checks li{grid-template-columns:1.25rem 1fr}.sso-check-detail{grid-column:2}}

/* === source: public/css/claude-designer-content-surfaces.css === */
/** Content surfaces: readable lists and workspaces, shared by light and dark themes. */
html[data-bs-theme] :is(.notify-page,.dashboard-page,.board-shell,.cd-content-surface) {
  --cd-surface-bg: var(--ds-surface); --cd-surface-muted: var(--ds-soft); --cd-border-color: var(--ds-line); --cd-border-strong: var(--ds-accent); --cd-soft-shadow: var(--ds-shadow); --cd-soft-shadow-hover: var(--ds-shadow); --cd-radius-lg: var(--ds-radius-card); --cd-radius-md: var(--ds-radius-control);
  --t-page-line: var(--ds-line); --t-page-soft: var(--ds-soft); --t-page-pane-bg: var(--ds-surface); --t-page-shadow: var(--ds-shadow); color: var(--ds-ink);
}
html[data-bs-theme] :is(.notify-panel,.notify-summary-card,.notify-page-head,.db-settings-panel,.board-toolbar,.board-create-form,.pb-block-card,.upv-gallery-card,.cd-surface-card,.cd-surface-hero) { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); color: var(--ds-ink); box-shadow: var(--ds-shadow); backdrop-filter: blur(var(--ds-glass-blur)); transform: none; }
html[data-bs-theme] :is(.notify-page-head,.cd-content-surface .page-hero,.cd-surface-hero) { padding: var(--ds-panel-pad); margin-bottom: 20px; }

html[data-bs-theme] :is(.notify-feed-title) { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }

html[data-bs-theme] :is(.notify-search) { border-radius: var(--ds-radius-control); background: var(--ds-surface); border-color: var(--ds-line); box-shadow: none; }

html[data-bs-theme] .board-toolbar { padding: var(--ds-panel-pad); }

html[data-bs-theme] :is(.board-shell,.board-toolbar,.board-node,.board-hub-card) { box-shadow: none; border-color: var(--ds-line); }
html[data-bs-theme] .board-hub-card { border-radius: var(--ds-radius-card); background: var(--ds-surface); }
html[data-bs-theme] .cd-content-surface :is(.pb-selected-files,.upv-video-layout,.link-call-video-tile) { border: 1px solid var(--ds-line); background: var(--ds-soft); border-radius: var(--ds-radius-control); box-shadow: none; }
html[data-bs-theme] .about-page { max-width: 960px; padding: 12px 0 32px; }
html[data-bs-theme] .about-page-head { padding-bottom: 28px; border-bottom: 1px solid var(--ds-line); }
html[data-bs-theme] .about-description { font-size: 1rem; line-height: 1.85; max-width: 68ch; }
html[data-bs-theme] .about-team { padding-top: 28px; margin-top: 32px; border-color: var(--ds-line); }
html[data-bs-theme] .about-member { padding: var(--ds-panel-pad); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
@media (max-width: 767.98px) {
  html[data-bs-theme] :is(.notify-page-head,.cd-content-surface .page-hero) { padding: var(--ds-panel-pad); }

  html[data-bs-theme] :is(.notify-feed-title) { overflow-wrap: anywhere; }
}

.about-page {
  max-width: 980px;
  margin-inline: auto;
  padding-block: 0.5rem;
}

.about-page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.about-page-copy {
  flex: 1 1 260px;
  min-width: 0;
}

.about-page h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.about-subtitle,
.about-byline {
  margin-bottom: 1rem;
  color: var(--bs-secondary-color);
}

.about-page-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.about-page-actions .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.about-byline {
  font-size: 0.8rem;
}

.about-byline span {
  color: var(--bs-body-color);
}

.about-description {
  max-width: 72ch;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.about-team {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

.about-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.about-member {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.about-member-avatar {
  flex-shrink: 0;
}

.about-member-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.about-member-name {
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 650;
}

.cd-content-surface--about .ui-avatar-fallback {
  background: var(--bs-tertiary-bg);
}

/* === source: public/css/claude-designer-redesign.css === */
/** Final compatibility refinements for the workspace design. Domain styles own page layouts. */
html[data-bs-theme] .btn-primary { background-color: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: var(--ds-on-primary) !important; }
html[data-bs-theme] .btn-primary:hover { background-color: var(--ds-primary) !important; border-color: var(--ds-primary) !important; }
/* Disabled controls keep readable labels; their neutral fill communicates state. */
html[data-bs-theme] .btn:is(:disabled,.disabled,[aria-disabled="true"]) {
  --bs-btn-disabled-opacity: 1;
  opacity: 1; color: var(--ds-muted) !important; background-color: var(--ds-soft) !important; background-image: none !important;
  border-color: var(--ds-line) !important; box-shadow: none; cursor: not-allowed;
}
html[data-bs-theme] :is(.card,.page-hero,.t-panel,.t-stat-card) { background-image: none; border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); backdrop-filter: blur(var(--ds-glass-blur)); }
html[data-bs-theme] .app-shell .content > .container { min-width: 0; }
html[data-bs-theme] :is(.toast,.ui-runtime-toast,.ui-runtime-modal-content) { background: var(--ds-surface); color: var(--ds-ink); border-color: var(--ds-line); box-shadow: var(--ds-shadow); border-radius: var(--ds-radius-modal); }
html[data-bs-theme] :is(.ui-runtime-modal-header,.ui-runtime-modal-body,.ui-runtime-modal-action) { background: transparent; color: var(--ds-ink); border-color: var(--ds-line); }
html[data-bs-theme] .t-accent-tile { background: var(--ds-accent-soft); border: 0; box-shadow: none; border-radius: var(--ds-radius-control); }
html[data-bs-theme] :is(.page-subtle,.small-muted) { color: var(--ds-muted); }
html[data-bs-theme][data-ui-headings] :is(h1,h2,h3,h4,h5,h6) { font-weight: var(--ds-heading-weight) !important; letter-spacing: var(--ds-heading-tracking); }
@media (max-width: 767.98px) {
  html[data-bs-theme] .modal { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  html[data-bs-theme] .modal-dialog { width: calc(100% - 12px); margin: 6px auto !important; }
  html[data-bs-theme] .modal-dialog-centered { min-height: calc(100% - 12px); }
  html[data-bs-theme] .modal-dialog-scrollable { height: calc(100% - 12px); }
  html[data-bs-theme] .modal-dialog:not([class*="modal-fullscreen"]) .modal-content { max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; }

}
/* Runtime confirmations are short actions, not large presentation panels. */
html[data-bs-theme] .glass-modal .ui-runtime-modal-header { padding: 12px 12px 0; border: 0; }
html[data-bs-theme] .glass-modal .ui-runtime-modal-title { text-align: left; font-size: 1rem; }
html[data-bs-theme] .glass-modal .ui-runtime-modal-body { padding: 10px 12px 12px; font-size: .875rem; }
html[data-bs-theme] .glass-modal .ui-runtime-modal-footer { padding: 0; gap: 0; }
html[data-bs-theme] .glass-modal .ui-runtime-modal-action { min-height: 38px; padding: 8px 12px; font-size: .85rem; }
html[data-bs-theme] .glass-modal .ui-runtime-modal-action-cancel { color: var(--ds-accent); }
html[data-bs-theme] .glass-modal .ui-runtime-modal-action-confirm { color: var(--bs-danger); }
html[data-bs-theme] .glass-modal .modal-content.ui-runtime-modal-content { background: var(--ds-surface); border-radius: var(--ds-radius-modal); backdrop-filter: blur(var(--ds-glass-blur)); }

/* === source: public/css/ui-shell-nav.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * App shell navigation: sidebar (.sh-side), mobile drawer (#offcanvasNav
 * .sh-drawer) and top bar (.sh-top). Markup: views/partials/shell_sidebar.php,
 * shell_topbar.php; behaviour: public/assets/js/shell-nav.js.
 * Colours, radius, fields, shadows, glass and the accent tint come from the
 * design tokens (--ds-* over --t-*, UiDesign): the shell follows every knob
 * of «Оформление» the page content follows.
 */
:root {
  --sh-w: 248px;
  --sh-mini-w: 68px;
  --sh-top-h: 56px;
  --sh-item-h: 38px;
  --sh-radius: calc(var(--ds-radius-control, 10px) + 2px);
  --sh-bg: var(--ds-surface-solid, var(--bs-body-bg));
  --sh-line: var(--ds-line, rgba(15, 23, 42, .08));
  --sh-ink: var(--ds-ink, var(--bs-body-color));
  --sh-muted: var(--ds-muted, var(--bs-secondary-color));
  --sh-accent: var(--ds-accent, var(--t-accent, #4f46e5));
  --sh-accent-soft: var(--ds-accent-soft, color-mix(in srgb, var(--sh-accent) 12%, transparent));
  --sh-hover: color-mix(in srgb, var(--sh-ink) 6%, transparent);
  /* Panels: glass (alpha + blur) and shadow as the windows of the page. */
  --sh-panel: var(--ds-surface, var(--sh-bg));
  --sh-blur: var(--ds-glass-blur, 0px);
  --sh-shadow: none;
  /* The menu search is a field like the page's: soft, solid or outlined. */
  --sh-field-bg: var(--sh-hover);
  --sh-field-ring: 0px;
}
html[data-ui-controls="solid"] { --sh-field-bg: var(--ds-soft, var(--sh-hover)); --sh-field-ring: 1px; }
html[data-ui-controls="outline"] { --sh-field-bg: transparent; --sh-field-ring: 1.5px; }
html[data-ui-shadow="balanced"] { --sh-shadow: 0 0 18px rgba(15, 23, 42, .05); }
html[data-ui-shadow="lifted"] { --sh-shadow: 0 0 28px rgba(15, 23, 42, .12); }
html[data-bs-theme="dark"][data-ui-shadow="lifted"] { --sh-shadow: 0 0 28px rgba(0, 0, 0, .45); }
html[data-ui-density="compact"] { --sh-item-h: 34px; --sh-top-h: 52px; }
html[data-ui-density="relaxed"] { --sh-item-h: 42px; }

/* ---------- shared bits ---------- */
.sh-ibtn[hidden] { display: none !important; }
.sh-ibtn {
  position: relative; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: var(--sh-radius);
  display: inline-grid; place-items: center; background: transparent; color: var(--sh-muted); font-size: 1.15rem;
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.sh-ibtn:hover, .sh-ibtn[aria-expanded="true"] { background: var(--sh-hover); color: var(--sh-ink); }
.sh-ibtn:focus-visible, .sh-nav__item:focus-visible, .sh-me-btn:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 1px; }
.sh-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; text-decoration: none; }
.sh-btn--primary { background: var(--sh-accent); color: var(--ds-on-accent, #fff); }
.sh-btn--primary:hover { color: #fff; filter: brightness(1.06); }
.sh-ava {
  flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--sh-accent-soft); font-size: 1.05rem; line-height: 1;
}
.sh-ava img { width: 100%; height: 100%; object-fit: cover; }
.sh-ava--sm { width: 30px; height: 30px; font-size: .95rem; }
.sh-ava--xs { width: 24px; height: 24px; font-size: .8rem; }

/* ---------- sidebar ---------- */
.sh-side {
  position: sticky; top: 0; z-index: 1030; flex: 0 0 var(--sh-w); width: var(--sh-w); height: 100vh; height: 100dvh;
  flex-direction: column; gap: 12px; padding: 12px 12px 12px;
  background: var(--sh-panel); border-right: 1px solid var(--sh-line); color: var(--sh-ink);
  -webkit-backdrop-filter: blur(var(--sh-blur)); backdrop-filter: blur(var(--sh-blur)); box-shadow: var(--sh-shadow);
  transition: width .18s ease, flex-basis .18s ease;
}
.sh-side__head { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px 0 6px; }
.sh-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sh-brand__logo, .sh-brand__mark { flex: none; width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.sh-brand__mark { display: grid; place-items: center; color: #fff; background: var(--sh-accent); }
.sh-brand__name { min-width: 0; font-weight: 800; font-size: 1rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sh-search {
  position: relative; display: flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 10px;
  border-radius: var(--sh-radius); background: var(--sh-field-bg); box-shadow: inset 0 0 0 var(--sh-field-ring) var(--sh-line); color: var(--sh-muted); cursor: text;
}
.sh-search:focus-within { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sh-accent); }
.sh-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: transparent !important; color: var(--sh-ink); font-size: .86rem;
}
.sh-search input::-webkit-search-cancel-button { display: none; }
.sh-search kbd.sh-search__kbd { flex: none; font-family: inherit; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--sh-line); background: transparent; color: var(--sh-muted); font: 600 .66rem/1.5 inherit; box-shadow: none; }
.sh-search:focus-within .sh-search__kbd { display: none; }

.sh-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; margin: 0 -4px; padding: 2px 4px; scrollbar-width: thin; }
.sh-nav__section { display: flex; flex-direction: column; gap: 2px; }
.sh-nav__title { padding: 0 10px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); opacity: .8; }
.sh-nav__item {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--sh-item-h); padding: 0 10px;
  border-radius: var(--sh-radius); color: var(--sh-ink); text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.sh-nav__item:hover { background: var(--sh-hover); color: var(--sh-ink); }
.sh-nav__item.active { background: var(--sh-accent-soft); color: var(--sh-accent); font-weight: 650; }
.sh-nav__item.active::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--sh-accent); }
.sh-nav__icon { flex: none; width: 20px; font-size: 1.1rem; text-align: center; color: var(--sh-muted); }
.sh-nav__item.active .sh-nav__icon, .sh-nav__item:hover .sh-nav__icon { color: inherit; }
.sh-nav__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-nav__badge[hidden], .mobile-bottom-nav__badge[hidden] { display: none !important; }
.sh-nav__badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--sh-accent); color: var(--ds-on-accent, #fff); font-size: .7rem; font-weight: 700; }

.sh-side__foot { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--sh-line); }
.sh-me { display: flex; align-items: center; gap: 4px; }
.sh-me__card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--sh-radius); color: inherit; text-decoration: none; }
.sh-me__card:hover { background: var(--sh-hover); color: inherit; }
.sh-me__meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sh-me__name { font-weight: 650; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-me__sub { font-size: .74rem; color: var(--sh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-me__logout:hover { color: #ef4444; }
.sh-theme { display: flex; gap: 2px; padding: 3px; border-radius: calc(var(--sh-radius) + 2px); background: var(--sh-hover); }
.sh-theme form { flex: 1; }
.sh-theme__btn {
  width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--sh-radius);
  background: transparent; color: var(--sh-muted); font-size: .8rem; font-weight: 600; cursor: pointer;
}
.sh-theme__btn:hover { color: var(--sh-ink); }
html[data-bs-theme="light"] [data-theme-choice="light"], html[data-bs-theme="dark"] [data-theme-choice="dark"] {
  background: var(--sh-bg); color: var(--sh-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* compact (desktop): icons only */
.app-shell.has-sidebar-compact .sh-side, .sh-side.is-compact { flex-basis: var(--sh-mini-w); width: var(--sh-mini-w); padding-inline: 10px; }
.sh-side.is-compact .sh-side__head { flex-direction: column; gap: 8px; padding: 0; }
.sh-side.is-compact :is(.sh-brand__name, .sh-search, .sh-nav__title, .sh-nav__label, .sh-me__meta, .sh-me form, .sh-theme__btn span) { display: none; }
.sh-side.is-compact .sh-brand { flex: none; }
.sh-side.is-compact .sh-nav__item { justify-content: center; padding: 0; }
.sh-side.is-compact .sh-nav__badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .6rem; }
.sh-side.is-compact .sh-me__card { justify-content: center; padding: 4px 0; }
.sh-side.is-compact .sh-theme { flex-direction: column; }
.sh-side.is-compact .sh-nav__section + .sh-nav__section { padding-top: 10px; border-top: 1px solid var(--sh-line); }

@media (max-width: 767.98px) { .sh-side:not(.sh-side--drawer) { display: none !important; } }
.app-shell[data-shell-canvas-route="1"] > .sh-side { height: 100dvh; }

/* mobile drawer */
.offcanvas.sh-drawer { --bs-offcanvas-width: min(300px, 86vw); background: var(--sh-bg); border-right: 0; }
.sh-side--drawer { position: static; display: flex; width: 100%; flex: 1; height: 100%; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.sh-side--drawer .sh-nav__item { min-height: 44px; font-size: .98rem; }
.sh-side--drawer .sh-search input { font-size: 16px; }

/* ---------- top bar ---------- */
.sh-top {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 6px;
  min-height: var(--sh-top-h); padding: 0 12px 0 16px;
  background: var(--sh-panel);
  backdrop-filter: saturate(1.4) blur(var(--sh-blur)); -webkit-backdrop-filter: saturate(1.4) blur(var(--sh-blur));
  border-bottom: 1px solid var(--sh-line); color: var(--sh-ink);
}
.content-canvas-mode > .sh-top { flex-shrink: 0; }
.sh-top__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sh-top__page { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-top__portal {
  flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 220px; padding: 2px 9px; border-radius: 999px;
  background: var(--sh-hover); color: var(--sh-muted); font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.sh-top__portal:hover, .sh-top__portal:focus-visible { color: var(--sh-ink); }
.sh-top__actions { display: flex; align-items: center; gap: 4px; }
.sh-bell .badge {
  position: absolute !important; top: 3px !important; right: 2px !important; left: auto !important; transform: none !important;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: #ef4444 !important; color: #fff; font-size: .62rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--sh-bg);
}
.sh-me-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: 4px; padding: 0 8px 0 4px; border: 0; border-radius: 999px;
  background: transparent; color: var(--sh-ink); cursor: pointer;
}
.sh-me-btn:hover, .sh-me-btn[aria-expanded="true"] { background: var(--sh-hover); }
.sh-me-btn__name { max-width: 160px; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-me-btn__chev { font-size: .7rem; color: var(--sh-muted); }

/* menus (appearance + account) */
.dropdown-menu.sh-menu {
  min-width: 248px; padding: 6px; border: 1px solid var(--sh-line); border-radius: calc(var(--sh-radius) + 4px);
  background: var(--sh-bg); box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
}
.sh-menu__label { padding: 8px 10px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.sh-menu .dropdown-item.sh-menu__item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--sh-radius);
  font-size: .9rem; color: var(--sh-ink); background: transparent;
}
.sh-menu .dropdown-item.sh-menu__item:hover { background: var(--sh-hover); }
.sh-menu .dropdown-item.sh-menu__item.active { background: var(--sh-accent-soft); color: var(--sh-accent); }
.sh-menu__item .bi { width: 18px; text-align: center; color: var(--sh-muted); }
.sh-menu__item.active .bi { color: inherit; }
.sh-menu .dropdown-item.sh-menu__item--danger, .sh-menu .dropdown-item.sh-menu__item--danger .bi { color: #ef4444; }
.sh-menu__sep { height: 1px; margin: 6px 4px; background: var(--sh-line); }
.sh-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--sh-line); }
.sh-seg { display: flex; gap: 2px; margin: 0 4px 4px; padding: 3px; border-radius: calc(var(--sh-radius) + 2px); background: var(--sh-hover); }
.sh-seg form { flex: 1; }
.sh-seg__btn {
  flex: 1; width: 100%; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--sh-radius);
  background: transparent; color: var(--sh-muted); font-size: .8rem; font-weight: 600; cursor: pointer;
}
.sh-seg__btn:hover { color: var(--sh-ink); }
.sh-seg__btn.active { background: var(--sh-bg); color: var(--sh-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

/* phones: compact bar, account menu as a sheet under the bar */
@media (max-width: 767.98px) {
  /* Opaque on phones: Safari samples it for its status bar instead of blurring through it. */
  .sh-top { background: var(--sh-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sh-top { min-height: 52px; padding: env(safe-area-inset-top) 6px 0 6px; gap: 2px; }
  .sh-top__page { font-size: .98rem; }
  .sh-top__portal { display: none; }
  .sh-me-btn { padding: 0 4px; margin-left: 0; }
  .sh-me-btn__chev { display: none; }
  .dropdown-menu.sh-menu { position: fixed !important; inset: calc(56px + env(safe-area-inset-top)) 8px auto 8px !important; transform: none !important; min-width: 0; max-height: calc(100dvh - 140px); overflow-y: auto; }
  .sh-menu .dropdown-item.sh-menu__item { min-height: 44px; font-size: .98rem; }
}
@media (prefers-reduced-motion: reduce) { .sh-side, .sh-nav__item, .sh-ibtn { transition: none; } }

/* === source: public/css/ui-chat-wall.css === */
/*
 * Chat wall print (v5.58.0): a hand-drawn pattern of small line doodles
 * behind the messages of the chat page (ui-messenger.css) and the side chat
 * (ui-dock.css). A flat wall read heavy; the accent in it read red-black with
 * a red accent (5.57.0), so the print is neutral — the ink of the theme at a
 * few percent — and works with any accent and background.
 * One tile, two inks: data-URI images cannot read CSS variables.
 */
:root {
  --chat-print: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='none' stroke='%230f172a' stroke-opacity='.1' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(-14.1 261.6) rotate(-5) scale(1.50) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(385.9 261.6) rotate(-5) scale(1.50) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(249.3 332.7) rotate(2) scale(1.19) translate(-12 -12)'><path d='M21 3L3 10.5l7 2.5 2.5 7z'/><path d='M10 13l11-10'/></g><g transform='translate(23.8 76.1) rotate(-20) scale(1.03) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(423.8 76.1) rotate(-20) scale(1.03) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(176.2 337.0) rotate(-16) scale(1.35) translate(-12 -12)'><path d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/></g><g transform='translate(256.1 199.9) rotate(4) scale(1.19) translate(-12 -12)'><path d='M5 19c0-8 5-13 14-14-1 9-6 14-14 14z'/><path d='M5 19l8-8'/></g><g transform='translate(182.9 111.3) rotate(-21) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(283.1 126.1) rotate(-20) scale(1.03) translate(-12 -12)'><path d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.5V16h0.5A2.5 2.5 0 0 1 4 13.5z'/></g><g transform='translate(205.2 11.9) rotate(-19) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(205.2 411.9) rotate(-19) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(26.7 6.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(26.7 406.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(426.7 6.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(426.7 406.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(85.4 -29.2) rotate(16) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(85.4 370.8) rotate(16) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(167.9 226.5) rotate(14) scale(1.50) translate(-12 -12)'><path d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/></g><g transform='translate(124.5 6.1) rotate(20) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(124.5 406.1) rotate(20) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(303.2 47.2) rotate(-7) scale(1.50) translate(-12 -12)'><rect x='3.5' y='7' width='17' height='12' rx='2.5'/><path d='M8.5 7l1.5-2.5h4L15.5 7'/><circle cx='12' cy='13' r='3'/></g><g transform='translate(167.7 153.5) rotate(-18) scale(1.19) translate(-12 -12)'><rect x='3.5' y='6' width='17' height='12' rx='2'/><path d='M4 7l8 6 8-6'/></g><g transform='translate(345.7 -10.1) rotate(-34) scale(1.35) translate(-12 -12)'><path d='M12 3c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/></g><g transform='translate(345.7 389.9) rotate(-34) scale(1.35) translate(-12 -12)'><path d='M12 3c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/></g><g transform='translate(103.3 309.1) rotate(-20) scale(1.50) translate(-12 -12)'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/></g><g transform='translate(332.1 154.5) rotate(-5) scale(1.35) translate(-12 -12)'><path d='M12 21s-6-5.6-6-11a6 6 0 0 1 12 0c0 5.4-6 11-6 11z'/><circle cx='12' cy='10' r='2.2'/></g><g transform='translate(36.0 233.1) rotate(-12) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(436.0 233.1) rotate(-12) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(6.2 147.5) rotate(6) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(406.2 147.5) rotate(6) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(346.6 73.1) rotate(-31) scale(1.19) translate(-12 -12)'><path d='M21 3L3 10.5l7 2.5 2.5 7z'/><path d='M10 13l11-10'/></g><g transform='translate(124.3 91.4) rotate(-26) scale(1.19) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(50.6 191.7) rotate(-33) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(112.8 212.4) rotate(13) scale(1.19) translate(-12 -12)'><path d='M5 19c0-8 5-13 14-14-1 9-6 14-14 14z'/><path d='M5 19l8-8'/></g><g transform='translate(294.8 -39.9) rotate(13) scale(1.35) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(294.8 360.1) rotate(13) scale(1.35) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(345.4 229.1) rotate(-2) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(-17.0 45.2) rotate(25) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(383.0 45.2) rotate(25) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(321.5 301.9) rotate(-12) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(84.0 53.8) rotate(5) scale(1.35) translate(-12 -12)'><path d='M7 12h.01M12 12h.01M17 12h.01'/></g><g transform='translate(-20.0 110.7) rotate(-28) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(380.0 110.7) rotate(-28) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(268.9 286.5) rotate(-28) scale(1.50) translate(-12 -12)'><path d='M9 17V5l10-2v12'/><circle cx='6.5' cy='17' r='2.5'/><circle cx='16.5' cy='15' r='2.5'/></g><g transform='translate(228.2 123.6) rotate(-18) scale(1.35) translate(-12 -12)'><rect x='3.5' y='7' width='17' height='12' rx='2.5'/><path d='M8.5 7l1.5-2.5h4L15.5 7'/><circle cx='12' cy='13' r='3'/></g><g transform='translate(9.9 331.9) rotate(30) scale(1.19) translate(-12 -12)'><rect x='3.5' y='6' width='17' height='12' rx='2'/><path d='M4 7l8 6 8-6'/></g><g transform='translate(409.9 331.9) rotate(30) scale(1.19) translate(-12 -12)'><rect x='3.5' y='6' width='17' height='12' rx='2'/><path d='M4 7l8 6 8-6'/></g><g transform='translate(302.0 213.9) rotate(-20) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(71.6 108.9) rotate(-10) scale(1.03) translate(-12 -12)'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/></g><g transform='translate(-9.1 214.8) rotate(-25) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(390.9 214.8) rotate(-25) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(196.4 276.4) rotate(-8) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(135.9 -39.6) rotate(2) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(135.9 360.4) rotate(2) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(42.0 292.4) rotate(31) scale(1.50) translate(-12 -12)'><path d='M21 3L3 10.5l7 2.5 2.5 7z'/><path d='M10 13l11-10'/></g><g transform='translate(241.9 37.9) rotate(-5) scale(1.19) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(241.9 437.9) rotate(-5) scale(1.19) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(217.7 227.0) rotate(-19) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(143.9 274.8) rotate(19) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(167.3 34.4) rotate(27) scale(1.19) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(167.3 434.4) rotate(27) scale(1.19) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(107.4 144.4) rotate(14) scale(1.19) translate(-12 -12)'><path d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.5V16h0.5A2.5 2.5 0 0 1 4 13.5z'/></g><g transform='translate(214.0 179.7) rotate(-30) scale(1.35) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(56.1 339.3) rotate(-20) scale(1.19) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(355.1 342.5) rotate(-18) scale(1.35) translate(-12 -12)'><path d='M7 12h.01M12 12h.01M17 12h.01'/></g><g transform='translate(65.3 152.9) rotate(25) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(229.9 -29.4) rotate(31) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(229.9 370.6) rotate(31) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(95.3 261.7) rotate(2) scale(1.19) translate(-12 -12)'><rect x='3.5' y='7' width='17' height='12' rx='2.5'/><path d='M8.5 7l1.5-2.5h4L15.5 7'/><circle cx='12' cy='13' r='3'/></g><g transform='translate(211.1 75.7) rotate(-15) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(261.9 83.2) rotate(-10) scale(1.50) translate(-12 -12)'><path d='M12 3c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/></g><g transform='translate(313.0 253.7) rotate(3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(-9.9 -29.2) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(-9.9 370.8) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(390.1 -29.2) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(390.1 370.8) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(-27.4 173.8) rotate(35) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(372.6 173.8) rotate(35) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(172.8 -17.8) rotate(-7) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(172.8 382.2) rotate(-7) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g></g></svg>");
  --chat-print-size: 400px;
  /* A soft light from the top, so the wall is not one flat tone. */
  --chat-glow: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ds-ink, #0f172a) 5%, transparent), transparent 75%);
}
html[data-bs-theme="dark"] {
  --chat-print: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'><g fill='none' stroke='%23ffffff' stroke-opacity='.085' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(-14.1 261.6) rotate(-5) scale(1.50) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(385.9 261.6) rotate(-5) scale(1.50) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(249.3 332.7) rotate(2) scale(1.19) translate(-12 -12)'><path d='M21 3L3 10.5l7 2.5 2.5 7z'/><path d='M10 13l11-10'/></g><g transform='translate(23.8 76.1) rotate(-20) scale(1.03) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(423.8 76.1) rotate(-20) scale(1.03) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(176.2 337.0) rotate(-16) scale(1.35) translate(-12 -12)'><path d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/></g><g transform='translate(256.1 199.9) rotate(4) scale(1.19) translate(-12 -12)'><path d='M5 19c0-8 5-13 14-14-1 9-6 14-14 14z'/><path d='M5 19l8-8'/></g><g transform='translate(182.9 111.3) rotate(-21) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(283.1 126.1) rotate(-20) scale(1.03) translate(-12 -12)'><path d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.5V16h0.5A2.5 2.5 0 0 1 4 13.5z'/></g><g transform='translate(205.2 11.9) rotate(-19) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(205.2 411.9) rotate(-19) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(26.7 6.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(26.7 406.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(426.7 6.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(426.7 406.8) rotate(-18) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(85.4 -29.2) rotate(16) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(85.4 370.8) rotate(16) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(167.9 226.5) rotate(14) scale(1.50) translate(-12 -12)'><path d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/></g><g transform='translate(124.5 6.1) rotate(20) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(124.5 406.1) rotate(20) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(303.2 47.2) rotate(-7) scale(1.50) translate(-12 -12)'><rect x='3.5' y='7' width='17' height='12' rx='2.5'/><path d='M8.5 7l1.5-2.5h4L15.5 7'/><circle cx='12' cy='13' r='3'/></g><g transform='translate(167.7 153.5) rotate(-18) scale(1.19) translate(-12 -12)'><rect x='3.5' y='6' width='17' height='12' rx='2'/><path d='M4 7l8 6 8-6'/></g><g transform='translate(345.7 -10.1) rotate(-34) scale(1.35) translate(-12 -12)'><path d='M12 3c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/></g><g transform='translate(345.7 389.9) rotate(-34) scale(1.35) translate(-12 -12)'><path d='M12 3c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/></g><g transform='translate(103.3 309.1) rotate(-20) scale(1.50) translate(-12 -12)'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/></g><g transform='translate(332.1 154.5) rotate(-5) scale(1.35) translate(-12 -12)'><path d='M12 21s-6-5.6-6-11a6 6 0 0 1 12 0c0 5.4-6 11-6 11z'/><circle cx='12' cy='10' r='2.2'/></g><g transform='translate(36.0 233.1) rotate(-12) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(436.0 233.1) rotate(-12) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(6.2 147.5) rotate(6) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(406.2 147.5) rotate(6) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(346.6 73.1) rotate(-31) scale(1.19) translate(-12 -12)'><path d='M21 3L3 10.5l7 2.5 2.5 7z'/><path d='M10 13l11-10'/></g><g transform='translate(124.3 91.4) rotate(-26) scale(1.19) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(50.6 191.7) rotate(-33) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(112.8 212.4) rotate(13) scale(1.19) translate(-12 -12)'><path d='M5 19c0-8 5-13 14-14-1 9-6 14-14 14z'/><path d='M5 19l8-8'/></g><g transform='translate(294.8 -39.9) rotate(13) scale(1.35) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(294.8 360.1) rotate(13) scale(1.35) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(345.4 229.1) rotate(-2) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(-17.0 45.2) rotate(25) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(383.0 45.2) rotate(25) scale(1.19) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(321.5 301.9) rotate(-12) scale(1.50) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(84.0 53.8) rotate(5) scale(1.35) translate(-12 -12)'><path d='M7 12h.01M12 12h.01M17 12h.01'/></g><g transform='translate(-20.0 110.7) rotate(-28) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(380.0 110.7) rotate(-28) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(268.9 286.5) rotate(-28) scale(1.50) translate(-12 -12)'><path d='M9 17V5l10-2v12'/><circle cx='6.5' cy='17' r='2.5'/><circle cx='16.5' cy='15' r='2.5'/></g><g transform='translate(228.2 123.6) rotate(-18) scale(1.35) translate(-12 -12)'><rect x='3.5' y='7' width='17' height='12' rx='2.5'/><path d='M8.5 7l1.5-2.5h4L15.5 7'/><circle cx='12' cy='13' r='3'/></g><g transform='translate(9.9 331.9) rotate(30) scale(1.19) translate(-12 -12)'><rect x='3.5' y='6' width='17' height='12' rx='2'/><path d='M4 7l8 6 8-6'/></g><g transform='translate(409.9 331.9) rotate(30) scale(1.19) translate(-12 -12)'><rect x='3.5' y='6' width='17' height='12' rx='2'/><path d='M4 7l8 6 8-6'/></g><g transform='translate(302.0 213.9) rotate(-20) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(71.6 108.9) rotate(-10) scale(1.03) translate(-12 -12)'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/></g><g transform='translate(-9.1 214.8) rotate(-25) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(390.9 214.8) rotate(-25) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(196.4 276.4) rotate(-8) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(135.9 -39.6) rotate(2) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(135.9 360.4) rotate(2) scale(1.19) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(42.0 292.4) rotate(31) scale(1.50) translate(-12 -12)'><path d='M21 3L3 10.5l7 2.5 2.5 7z'/><path d='M10 13l11-10'/></g><g transform='translate(241.9 37.9) rotate(-5) scale(1.19) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(241.9 437.9) rotate(-5) scale(1.19) translate(-12 -12)'><path d='M7 18a4 4 0 0 1-.6-8 5.5 5.5 0 0 1 10.7 1.4A3.3 3.3 0 0 1 17 18z'/></g><g transform='translate(217.7 227.0) rotate(-19) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(143.9 274.8) rotate(19) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='3.5'/></g><g transform='translate(167.3 34.4) rotate(27) scale(1.19) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(167.3 434.4) rotate(27) scale(1.19) translate(-12 -12)'><path d='M13 3L5.5 13.5H11L10 21l7.5-10.5H12z'/></g><g transform='translate(107.4 144.4) rotate(14) scale(1.19) translate(-12 -12)'><path d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v7a2.5 2.5 0 0 1-2.5 2.5H10l-4 3.5V16h0.5A2.5 2.5 0 0 1 4 13.5z'/></g><g transform='translate(214.0 179.7) rotate(-30) scale(1.35) translate(-12 -12)'><path d='M5 9h11v5a5 5 0 0 1-5 5h-1a5 5 0 0 1-5-5z'/><path d='M16 10.5h1.5a2.5 2.5 0 0 1 0 5H16'/><path d='M9 3.5c-.8 1 .8 2 0 3M12.5 3.5c-.8 1 .8 2 0 3'/></g><g transform='translate(56.1 339.3) rotate(-20) scale(1.19) translate(-12 -12)'><path d='M19 14.5A7.5 7.5 0 0 1 9.5 5a7.5 7.5 0 1 0 9.5 9.5z'/></g><g transform='translate(355.1 342.5) rotate(-18) scale(1.35) translate(-12 -12)'><path d='M7 12h.01M12 12h.01M17 12h.01'/></g><g transform='translate(65.3 152.9) rotate(25) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(229.9 -29.4) rotate(31) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(229.9 370.6) rotate(31) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(95.3 261.7) rotate(2) scale(1.19) translate(-12 -12)'><rect x='3.5' y='7' width='17' height='12' rx='2.5'/><path d='M8.5 7l1.5-2.5h4L15.5 7'/><circle cx='12' cy='13' r='3'/></g><g transform='translate(211.1 75.7) rotate(-15) scale(1.03) translate(-12 -12)'><path d='M12 8v8M8 12h8'/></g><g transform='translate(261.9 83.2) rotate(-10) scale(1.50) translate(-12 -12)'><path d='M12 3c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z'/></g><g transform='translate(313.0 253.7) rotate(3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(-9.9 -29.2) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(-9.9 370.8) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(390.1 -29.2) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(390.1 370.8) rotate(-3) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='2.5'/></g><g transform='translate(-27.4 173.8) rotate(35) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(372.6 173.8) rotate(35) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='5'/><path d='M4.5 15.5c-2-2.5 2-5.5 7.5-7.2s10.3-1.1 9.5 1.8c-.5 1.7-3 3.5-6.6 4.8'/></g><g transform='translate(172.8 -17.8) rotate(-7) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g><g transform='translate(172.8 382.2) rotate(-7) scale(1.03) translate(-12 -12)'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 14a4 4 0 0 0 7 0'/><path d='M9.5 9.5v.5M14.5 9.5v.5'/></g></g></svg>");
}

/* === source: public/css/ui-dock.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * Side chat (#globalChatDock, public/assets/js/dock.js): slim rail + panel.
 * The rail sits in the shell flow (60px); the panel slides over the page, or
 * joins the flow when pinned. Phones: no rail, the panel is a full-screen sheet.
 */
/* Hidden on the main chat (the navigator toggles it): never drawn there. */
.tdock[hidden] { display: none !important; }
.tdock {
  --tdock-rail: 60px;
  --tdock-panel: 380px;
  /* Own bubbles: the site's button fill and its label color (as the main chat). */
  --tdock-own-a: var(--ds-primary, var(--ds-accent, #6366f1));
  --tdock-own-b: color-mix(in oklab, var(--tdock-own-a) 84%, #000);
  --tdock-on-own: var(--ds-on-primary, #fff);
  --tdock-online: #22c55e;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  flex: 0 0 var(--tdock-rail);
  width: var(--tdock-rail);
  display: flex;
  flex-direction: row-reverse;
  z-index: 1030;
  color: var(--ds-ink, inherit);
}
.app-shell.tdock-pinned .tdock { flex-basis: calc(var(--tdock-rail) + var(--tdock-panel)); width: calc(var(--tdock-rail) + var(--tdock-panel)); }

/* ---- rail ---- */
.tdock-rail {
  flex: 0 0 var(--tdock-rail);
  width: var(--tdock-rail);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  background: var(--ds-surface-solid, var(--ds-surface, #fff));
  border-left: 1px solid var(--ds-line, rgba(0, 0, 0, .08));
  position: relative;
  z-index: 2;
}
.tdock-rail-list { display: flex; flex-direction: column; gap: 8px; align-items: center; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 2px 0; flex: 1 1 auto; min-height: 0; }
.tdock-rail-list::-webkit-scrollbar { display: none; }
.tdock-rail-foot { display: flex; flex-direction: column; gap: 8px; }
.tdock-rail-sep { width: 28px; height: 1px; background: var(--ds-line, rgba(0, 0, 0, .08)); flex: none; }
.tdock-rail-btn, .tdock-rail-item {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ds-muted, #64748b);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-radius .2s ease;
  flex: none;
}
.tdock-rail-btn .bi { font-size: 1.2rem; }
.tdock-rail-btn:hover, .tdock-rail-item:hover { background: var(--ds-soft, rgba(100, 116, 139, .12)); color: var(--ds-ink, inherit); }
.tdock-rail-main { background: var(--ds-accent-soft, rgba(99, 102, 241, .12)); color: var(--ds-accent, #6366f1); }
.tdock.is-open:not(.is-thread) .tdock-rail-main { background: var(--tdock-own-a); color: var(--tdock-on-own); }
.tdock-rail-item .tdock-ava { width: 38px; height: 38px; font-size: 1.1rem; }
.tdock-rail-item.is-active .tdock-ava { box-shadow: 0 0 0 2px var(--ds-surface-solid, var(--ds-surface, #fff)), 0 0 0 4px var(--ds-accent, #6366f1); }
.tdock-rail-item.is-online::after,
.tdock-row.is-online .tdock-ava::after,
.tdock-head-avatar.is-online::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--tdock-online);
  border: 2px solid var(--ds-surface-solid, var(--ds-surface, #fff));
}
.tdock-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 2px solid var(--ds-surface-solid, var(--ds-surface, #fff));
  box-sizing: content-box;
}

/* ---- avatars ---- */
.tdock-ava {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  background: var(--ds-soft, rgba(100, 116, 139, .12));
  font-size: 1.15rem;
  line-height: 1;
}
.tdock-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* A module thread (a mirrored Telegram group, …): its icon in the accent color. */
.tdock-ava--icon { color: var(--ds-accent, #6366f1); font-size: 1.15rem; }

/* ---- panel ---- */
.tdock-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  right: var(--tdock-rail);
  width: var(--tdock-panel);
  max-width: calc(100vw - var(--tdock-rail));
  display: flex;
  flex-direction: column;
  background: var(--ds-surface-solid, var(--ds-surface, #fff));
  border-left: 1px solid var(--ds-line, rgba(0, 0, 0, .08));
  box-shadow: -18px 0 48px rgba(15, 23, 42, .16);
  transform: translateX(24px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2, .9, .3, 1), opacity .18s ease, visibility 0s linear .22s;
  z-index: 1;
}
.tdock.is-open .tdock-panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .22s cubic-bezier(.2, .9, .3, 1), opacity .18s ease; }
.tdock.is-pinned .tdock-panel { position: relative; right: auto; height: 100%; box-shadow: none; flex: 0 0 var(--tdock-panel); }

.tdock-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--ds-line, rgba(0, 0, 0, .08)); min-height: 62px; flex: none; }
.tdock-head-avatar { position: relative; flex: none; }
.tdock-head-avatar .tdock-ava { width: 36px; height: 36px; font-size: 1rem; }
.tdock-head-meta { flex: 1; min-width: 0; }
.tdock-head-title { font-weight: 700; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdock-head-sub { font-size: .74rem; color: var(--ds-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.tdock-head-sub.is-online, .tdock-head-sub.is-typing { color: var(--ds-accent, #6366f1); font-weight: 600; }
.tdock-icon { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--ds-muted, #64748b); display: inline-grid; place-items: center; cursor: pointer; flex: none; text-decoration: none; }
.tdock-icon:hover { background: var(--ds-soft, rgba(100, 116, 139, .12)); color: var(--ds-ink, inherit); }
.tdock-icon[aria-pressed="true"] { color: var(--ds-accent, #6366f1); }
.tdock-icon[hidden] { display: none !important; }

.tdock-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tdock-view[hidden] { display: none !important; }
.tdock-search { display: flex; align-items: center; gap: 8px; margin: 12px 12px 8px; padding: 0 12px; height: 38px; border-radius: 12px; background: var(--ds-soft, rgba(100, 116, 139, .1)); color: var(--ds-muted, #64748b); flex: none; }
.tdock-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ds-ink, inherit); font-size: .9rem; }
.tdock-chips { display: flex; gap: 6px; padding: 0 12px 8px; flex: none; overflow-x: auto; scrollbar-width: none; }
.tdock-chips::-webkit-scrollbar { display: none; }
.tdock-chip { display: inline-flex; align-items: center; gap: 5px; flex: none; border: 1px solid var(--ds-line, rgba(0, 0, 0, .1)); background: transparent; color: var(--ds-muted, #64748b); border-radius: 999px; padding: 4px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; }
.tdock-chip.is-active { background: var(--tdock-own-a); border-color: transparent; color: var(--tdock-on-own); }
.tdock-chip-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--tdock-own-a); color: var(--tdock-on-own); font-size: .62rem; font-weight: 700; }
.tdock-chip.is-active .tdock-chip-count { background: rgba(255, 255, 255, .28); }
/* A chat of a module folder (Telegram): initials on a steady colour, the module's icon as a badge. */
.tdock-ava--letter { background: linear-gradient(135deg, hsl(var(--tdock-ava-h, 210) 70% 62%), hsl(calc(var(--tdock-ava-h, 210) + 25) 65% 50%)); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; overflow: visible; }
/* A module's buttons on a message (a file from Telegram on request). */
.tdock-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tdock-act { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; background: color-mix(in srgb, currentColor 6%, transparent); color: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.tdock-act:hover:not(:disabled) { background: color-mix(in srgb, currentColor 12%, transparent); }
.tdock-act.is-busy, .tdock-act:disabled { opacity: .7; cursor: default; }
.tdock-pv { position: relative; display: grid; place-items: center; width: 220px; max-width: 100%; aspect-ratio: var(--pv-w) / var(--pv-h); max-height: 260px; margin: 2px 0 4px; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, currentColor 10%, transparent); }
.tdock-pv.is-round { width: 170px; aspect-ratio: 1; border-radius: 50%; }
.tdock-pv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(10px) saturate(1.1); transform: scale(1.12); }
.tdock-pv-kind { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: .9rem; }
.tdock-pv .tdock-acts { position: relative; margin: 0; }
.tdock-pv .tdock-act { border-color: transparent; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); }
.tdock-pv .tdock-act:hover:not(:disabled) { background: rgba(0, 0, 0, .7); }
.tdock-pv.is-row { display: flex; align-items: center; gap: 8px; width: auto; min-width: 180px; aspect-ratio: auto; max-height: none; padding: 6px 8px; }
.tdock-pv-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(127, 127, 127, .2); }
.tdock-pv-name { flex: 1; min-width: 0; font-weight: 600; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdock-pv.is-row .tdock-acts { margin: 0; flex: none; }
/* Pinned and muted outside (Telegram): a pin before the title, a muted chat's count in grey. */
.tdock-row-pin, .tdock-row-mute { font-size: .72em; color: var(--ds-muted, #64748b); }
.tdock-row.is-muted .tdock-count { background: color-mix(in srgb, var(--ds-muted, #64748b) 55%, transparent); }
.tdock-ava-badge { position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #2aabee; color: #fff; font-size: .5rem; line-height: 1; border: 2px solid var(--ds-surface-solid, var(--ds-surface, #fff)); }
.tdock-chip[hidden] { display: none; }
.tdock-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 12px; }
.tdock-row { width: 100%; display: flex; gap: 10px; align-items: center; padding: 9px 8px; border: 0; background: transparent; border-radius: 12px; text-align: left; color: inherit; cursor: pointer; }
.tdock-row:hover { background: var(--ds-soft, rgba(100, 116, 139, .1)); }
.tdock-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tdock-row-top, .tdock-row-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tdock-row-title { flex: 1; min-width: 0; font-weight: 650; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdock-row-title .bi { color: var(--ds-muted, #64748b); font-size: .8rem; }
.tdock-row-time { font-size: .7rem; color: var(--ds-muted, #64748b); flex: none; }
.tdock-row-preview { flex: 1; min-width: 0; font-size: .8rem; color: var(--ds-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdock-row.has-unread .tdock-row-preview { color: var(--ds-ink, inherit); font-weight: 500; }
.tdock-count { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--tdock-own-a); color: var(--tdock-on-own); font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; }
.tdock-empty { padding: 28px 16px; text-align: center; color: var(--ds-muted, #64748b); font-size: .85rem; }
.tdock-spinner { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ds-line, rgba(0, 0, 0, .12)); border-top-color: var(--ds-accent, #6366f1); animation: tdock-spin .8s linear infinite; }
@keyframes tdock-spin { to { transform: rotate(360deg); } }

/* ---- thread ---- */
.tdock-view--thread { position: relative; }
.tdock-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 6px;
  /* v5.58.0: the same neutral print as the chat page (ui-chat-wall.css); the
     accent dots it had turned red-black with a red accent. */
  background: var(--chat-print, none) 0 0 / 320px repeat, var(--chat-glow, none), var(--ds-bg, #f6f7fb);
}
.tdock-msgs { display: flex; flex-direction: column; gap: 2px; }
.tdock-day { align-self: center; margin: 10px 0 6px; }
.tdock-day span { font-size: .68rem; font-weight: 600; color: var(--ds-muted, #64748b); background: var(--ds-surface-solid, var(--ds-surface, #fff)); padding: 3px 10px; border-radius: 999px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.tdock-msg { display: flex; }
.tdock-msg.is-own { justify-content: flex-end; }
.tdock-msg.is-end { margin-bottom: 6px; }
.tdock-bubble {
  position: relative;
  max-width: 82%;
  padding: 6px 10px 4px;
  border-radius: 16px;
  background: var(--ds-surface-solid, var(--ds-surface, #fff));
  box-shadow: 0 1px 1.5px rgba(15, 23, 42, .08);
  display: block;
  cursor: default;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.tdock-msg.is-own .tdock-bubble { background: linear-gradient(135deg, var(--tdock-own-a), var(--tdock-own-b)); color: var(--tdock-on-own); }
.tdock-msg.is-own.is-cont .tdock-bubble { border-top-right-radius: 5px; }
.tdock-msg.is-own:not(.is-end) .tdock-bubble { border-bottom-right-radius: 5px; }
.tdock-msg.is-own.is-end .tdock-bubble { border-bottom-right-radius: 4px; }
.tdock-msg:not(.is-own).is-cont .tdock-bubble { border-top-left-radius: 5px; }
.tdock-msg:not(.is-own):not(.is-end) .tdock-bubble { border-bottom-left-radius: 5px; }
.tdock-msg:not(.is-own).is-end .tdock-bubble { border-bottom-left-radius: 4px; }
.tdock-msg.is-menu .tdock-bubble { box-shadow: 0 0 0 2px var(--ds-accent, #6366f1); }
.tdock-author { display: none; font-size: .72rem; font-weight: 700; color: var(--ds-accent, #6366f1); margin-bottom: 1px; }
.tdock-msg.show-author .tdock-author { display: block; }
.tdock-text { font-size: .88rem; line-height: 1.4; white-space: pre-wrap; }
.tdock-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tdock-msg.is-emoji .tdock-bubble { background: transparent !important; box-shadow: none; padding: 0 2px; }
.tdock-msg.is-emoji .tdock-text { font-size: 1.9rem; line-height: 1.15; }
.tdock-msg.is-emoji .tdock-meta { color: var(--ds-muted, #64748b) !important; }
.tdock-meta { display: block; text-align: right; font-size: .64rem; line-height: 1; color: var(--ds-muted, #64748b); margin: 3px 0 1px 10px; white-space: nowrap; }
/* Time at the end of the last text line (as in the main chat): the meta sits
   in the bottom right corner and an invisible copy of it (.tdock-pad, text
   from data-meta) ends the text, so the last line makes room for it or the
   bubble grows one line. */
.tdock-bubble { line-height: 1.4; }
.tdock-pad { display: inline-block; visibility: hidden; margin-left: .55em; font-size: .64rem; line-height: 1; white-space: nowrap; }
.tdock-pad::after { content: attr(data-meta); }
.tdock-pad.has-tick { padding-right: 1.25em; }
/* Attachments stay on their own line above the (now inline) text. */
.tdock-bubble > .tdock-file { display: flex; width: fit-content; max-width: 100%; margin-bottom: 4px; }
.tdock-bubble > .tdock-img, .tdock-bubble > .tdock-audio { display: block; margin-bottom: 4px; }
.tdock-text + .tdock-meta { position: absolute; right: 10px; bottom: 5px; margin: 0; }
.tdock-msg.is-emoji .tdock-text + .tdock-meta { position: static; margin: 3px 0 1px 10px; }
.tdock-reacts:has(+ .tdock-meta) { padding-right: 2.6em; }
.tdock-reacts + .tdock-meta { position: absolute; right: 10px; bottom: 6px; margin: 0; }
.tdock-msg.is-own .tdock-meta { color: color-mix(in srgb, var(--tdock-on-own) 78%, transparent); }
.tdock-img img { display: block; max-width: 100%; max-height: 220px; border-radius: 12px; margin: 2px 0 4px; }
.tdock-bubble, .tdock-bubble img, .tdock-bubble a { -webkit-touch-callout: none; }
.tdock-file { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: inherit; text-decoration: none; padding: 6px 8px; border-radius: 10px; background: rgba(127, 127, 127, .12); margin: 2px 0 4px; }
.tdock-file.is-gone { opacity: .6; font-style: italic; }
/* Voice and audio: the shared player's voice look in the bubble's colours. */
.tdock-audio { margin: 2px 0 4px; }
.tdock-msg .tdock-audio { --mp-accent: var(--ds-accent, #6366f1); --mp-track: color-mix(in srgb, currentColor 24%, transparent); }
.tdock-msg.is-own .tdock-audio { --mp-accent: var(--tdock-on-own); --mp-track: color-mix(in srgb, var(--tdock-on-own) 40%, transparent); }
.tdock-msg.is-own .tdock-audio [data-mp-play] { color: var(--tdock-own-a); }
.tdock-audio.mp--voice { min-width: 190px; }
.tdock-audio .mp-btn[data-mp-play] { width: 34px; min-width: 34px; height: 34px; font-size: 19px; }
.tdock-bubble > .tdock-video { display: block; position: relative; width: 100%; margin: 2px 0 4px; border-radius: 12px; overflow: hidden; background: #000; }
.tdock-video video { display: block; width: 100%; max-height: 240px; aspect-ratio: auto; }
.tdock-video-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; font-size: 2.4rem; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); pointer-events: none; }
.tdock-video.mp .tdock-video-play { display: none; }
/* A sticker: no bubble, the picture or animation alone. */
.tdock-msg.is-sticker .tdock-bubble { position: relative; padding: 0; background: transparent !important; box-shadow: none; color: inherit; }
.tdock-msg.is-sticker .tdock-author { display: none; }
.tdock-msg.is-sticker .tdock-meta { position: absolute; right: 4px; bottom: 4px; margin: 0; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .42); color: #fff !important; }
.tdock-msg .tsk { width: 128px; height: 128px; }
.tdock-msg .tsk-emoji { font-size: 3.2rem; }
.tdock-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tdock-react { border: 1px solid var(--ds-line, rgba(0, 0, 0, .1)); background: var(--ds-soft, rgba(100, 116, 139, .1)); color: inherit; border-radius: 999px; padding: 0 7px; font-size: .78rem; line-height: 1.6; cursor: pointer; }
.tdock-react b { font-weight: 600; font-size: .72rem; }
.tdock-react.is-mine { border-color: var(--ds-accent, #6366f1); background: var(--ds-accent-soft, rgba(99, 102, 241, .14)); }
.tdock-msg.is-own .tdock-react { background: color-mix(in srgb, var(--tdock-on-own) 18%, transparent); border-color: color-mix(in srgb, var(--tdock-on-own) 30%, transparent); }
.tdock-msg.is-own .tdock-react.is-mine { background: color-mix(in srgb, var(--tdock-on-own) 34%, transparent); border-color: var(--tdock-on-own); }
@keyframes tdock-in-own { from { opacity: 0; transform: translate(12px, 8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tdock-in-other { from { opacity: 0; transform: translate(-12px, 8px) scale(.96); } to { opacity: 1; transform: none; } }
.tdock-msg.is-own.is-arriving .tdock-bubble { animation: tdock-in-own .3s cubic-bezier(.2, .9, .3, 1.2) both; }
.tdock-msg:not(.is-own).is-arriving .tdock-bubble { animation: tdock-in-other .3s cubic-bezier(.2, .9, .3, 1.2) both; }

.tdock-typing { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .2s ease, opacity .2s ease; }
.tdock-typing.is-visible { max-height: 50px; opacity: 1; }
.tdock-typing span { display: inline-flex; gap: 4px; padding: 10px 12px; margin: 2px 0 6px; border-radius: 16px 16px 16px 4px; background: var(--ds-surface-solid, var(--ds-surface, #fff)); box-shadow: 0 1px 1.5px rgba(15, 23, 42, .08); }
.tdock-typing i, .tdock-dots i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-accent, #6366f1); opacity: .35; animation: tdock-dot 1.2s infinite ease-in-out; }
.tdock-typing i:nth-child(2), .tdock-dots i:nth-child(2) { animation-delay: .15s; }
.tdock-typing i:nth-child(3), .tdock-dots i:nth-child(3) { animation-delay: .3s; }
.tdock-dots { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 2px; }
.tdock-dots i { width: 4px; height: 4px; }
@keyframes tdock-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }

.tdock-jump { position: absolute; right: 14px; bottom: 70px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ds-line, rgba(0, 0, 0, .1)); background: var(--ds-surface-solid, var(--ds-surface, #fff)); color: var(--ds-ink, inherit); box-shadow: 0 6px 16px rgba(15, 23, 42, .14); cursor: pointer; display: grid; place-items: center; }
.tdock-jump[hidden] { display: none; }
/* Guest nickname: asked once before the first message, then "you write as …". */
.tdock-guest { flex: none; padding: 8px 12px 0; border-top: 1px solid var(--ds-line, rgba(0, 0, 0, .08)); background: var(--ds-surface-solid, var(--ds-surface, #fff)); }
.tdock-guest-label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 650; }
.tdock-guest-row { display: flex; gap: 6px; }
.tdock-guest-row input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--ds-line, rgba(0, 0, 0, .12)); border-radius: 18px; background: var(--ds-bg, #f6f7fb); color: inherit; outline: none; }
.tdock-guest-row input:focus { border-color: var(--ds-accent, #6366f1); }
.tdock-guest-save { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: var(--tdock-own-a); color: var(--tdock-on-own); font-weight: 600; font-size: .85rem; }
.tdock-guest-save:disabled { opacity: .5; }
.tdock-guest-hint { margin-top: 5px; font-size: .72rem; color: var(--ds-muted, #64748b); }
.tdock-guest-as { font-size: .74rem; color: var(--ds-muted, #64748b); }
.tdock-guest-as button { border: 0; padding: 0; background: none; color: var(--ds-accent, #6366f1); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tdock-guest + .tdock-compose { border-top: 0; }
@media (max-width: 767.98px) { .tdock-guest-row input { font-size: 16px; } }
.tdock-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--ds-line, rgba(0, 0, 0, .08)); background: var(--ds-surface-solid, var(--ds-surface, #fff)); flex: none; }
.tdock-compose textarea { flex: 1; min-width: 0; resize: none; border: 1px solid var(--ds-line, rgba(0, 0, 0, .12)); background: var(--ds-bg, #f6f7fb); color: var(--ds-ink, inherit); border-radius: 18px; padding: 8px 14px; font-size: .9rem; line-height: 1.35; max-height: 140px; outline: none; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 25%, transparent) transparent; }
.tdock-compose textarea::-webkit-scrollbar { width: 4px; }
.tdock-compose textarea::-webkit-scrollbar-thumb { border-radius: 4px; background: color-mix(in srgb, currentColor 25%, transparent); }
.tdock-compose textarea::-webkit-scrollbar-button { display: none; }
.tdock-compose textarea:focus { border-color: var(--ds-accent, #6366f1); }
.tdock-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--tdock-own-a); color: var(--tdock-on-own); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
.tdock-send:disabled { opacity: .35; cursor: default; }
.tdock-send:not(:disabled):active { transform: scale(.92); }

/* ---- message menu ---- */
.tdock-menu { position: fixed; z-index: 2000; min-width: 190px; padding: 6px; border-radius: 14px; background: var(--ds-surface-solid, var(--ds-surface-solid, var(--ds-surface, #fff))); border: 1px solid var(--ds-line, rgba(0, 0, 0, .1)); box-shadow: 0 16px 40px rgba(15, 23, 42, .2); }
.tdock-menu[hidden] { display: none; }
.tdock-menu-reacts { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--ds-line, rgba(0, 0, 0, .08)); margin-bottom: 4px; }
.tdock-menu-reacts button { border: 0; background: transparent; font-size: 1.15rem; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; }
.tdock-menu-reacts button:hover { background: var(--ds-soft, rgba(100, 116, 139, .12)); transform: scale(1.12); }
.tdock-menu-item { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; color: var(--ds-ink, inherit); padding: 7px 10px; border-radius: 8px; font-size: .84rem; text-align: left; cursor: pointer; }
.tdock-menu-item:hover { background: var(--ds-soft, rgba(100, 116, 139, .12)); }
.tdock-menu-item--danger { color: #dc2626; }
.tdock-menu-item[hidden] { display: none; }
.tdock-toast { position: absolute; left: 12px; right: 12px; bottom: 70px; padding: 8px 12px; border-radius: 10px; background: #1f2937; color: #fff; font-size: .82rem; text-align: center; }
.tdock-backdrop { display: none; }

/* ---- phones: full-screen sheet ---- */
@media (max-width: 767.98px) {
  .tdock { position: static; width: 0; flex: 0 0 0; height: auto; }
  .tdock-rail { display: none; }
  .tdock-panel { position: fixed; inset: 0; right: 0; width: 100%; max-width: 100%; border-left: 0; transform: translateY(24px); z-index: 1060; padding-bottom: env(safe-area-inset-bottom); padding-top: env(safe-area-inset-top); }
  .tdock.is-pinned .tdock-panel { position: fixed; }
  .tdock-compose textarea { font-size: 16px; }
  .tdock-compose { padding: 6px 8px; }
  /* Keyboard up (dock.js pins the panel to the visible area): no home-indicator gap. */
  .tdock.is-kb .tdock-panel { padding-bottom: 0; }
  .tdock-head { min-height: 52px; padding: 8px 10px 8px 12px; }
  html.tdock-lock, html.tdock-lock body { overflow: hidden; }
  #globalChatDockMobileToggle.has-unread { position: relative; }
  #globalChatDockMobileToggle.has-unread::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
}
@media (prefers-reduced-motion: reduce) {
  .tdock-panel, .tdock.is-open .tdock-panel { transition: none; }
  .tdock-msg.is-arriving .tdock-bubble { animation: none !important; }
  .tdock-typing i, .tdock-dots i { animation: none; opacity: .7; }
}
.tdock-search input, .tdock-search input:focus { border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; min-height: 0 !important; background: transparent !important; border-radius: 0 !important; }
.tdock-search:focus-within { box-shadow: 0 0 0 2px var(--ds-accent, #6366f1); }
.tdock-compose textarea:focus, .tdock-compose textarea:focus-visible { box-shadow: none !important; outline: none !important; }

/* ---- attachments ---- */
.tdock-clip { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--ds-muted, #64748b); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; }
.tdock-clip:hover { background: var(--ds-soft, rgba(100, 116, 139, .12)); color: var(--ds-ink, inherit); }
.tdock-attach { display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 10px; border-radius: 12px 12px 0 0; background: var(--ds-soft, rgba(100, 116, 139, .1)); font-size: .8rem; color: var(--ds-ink, inherit); flex: none; }
.tdock-attach[hidden] { display: none; }
.tdock-attach-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdock-attach button { border: 0; background: transparent; color: var(--ds-muted, #64748b); width: 26px; height: 26px; border-radius: 8px; cursor: pointer; }
.tdock-send.is-busy { opacity: .6; pointer-events: none; }
.tdock-send.is-busy .bi::before { content: "\f116"; display: inline-block; animation: tdock-spin .8s linear infinite; }
@keyframes tdock-spin { to { transform: rotate(360deg); } }

/* ---- sizes follow the "side chat density" setting (data-ui-chat-sidebar-density) ---- */
.tdock-row-title { font-size: var(--t-chat-sidebar-title-size, .88rem); }
.tdock-row-preview { font-size: var(--t-chat-sidebar-text-size, .8rem); }
.tdock-text { font-size: calc(var(--t-chat-sidebar-text-size, .8rem) + .06rem); }
.tdock-row { gap: calc(var(--t-chat-sidebar-gap, .45rem) + .2rem); }
html[data-ui-chat-sidebar-density="compact"] .tdock-row { padding-top: 6px; padding-bottom: 6px; }
html[data-ui-chat-sidebar-density="compact"] .tdock-ava { width: 32px; height: 32px; }
html[data-ui-chat-sidebar-density="compact"] .tdock-compose { padding: 8px 10px; }
html[data-ui-chat-sidebar-density="roomy"] .tdock-row { padding-top: 11px; padding-bottom: 11px; }

/* ---- reply / forward quote ---- */
.tdock-quote { margin: 0 0 4px; padding: 3px 8px; border-left: 3px solid var(--ds-accent, #6366f1); border-radius: 6px; background: rgba(127, 127, 127, .1); font-size: .8rem; white-space: pre-wrap; max-height: 4.6em; overflow: hidden; opacity: .9; }
.tdock-quote b { display: block; font-size: .74rem; color: var(--ds-accent, #6366f1); }
.tdock-msg.is-own .tdock-quote { border-left-color: currentColor; }
.tdock-msg.is-own .tdock-quote b { color: inherit; }

/* Drop to send (files from the computer or SkyBox tiles). */
.tdock-rail-item.is-drop, .tdock-row.is-drop { outline: 2px solid var(--ds-accent, #4f46e5); outline-offset: 2px; background: var(--ds-accent-soft, rgba(79, 70, 229, .12)); }
.tdock-panel.is-drop { box-shadow: inset 0 0 0 2px var(--ds-accent, #4f46e5), var(--tdock-shadow, 0 18px 48px rgba(15, 23, 42, .22)); }
/* Module threads (Telegram): ticks of own messages, "deleted in Telegram". */
.tdock-tick { margin-left: 2px; font-size: .9em; opacity: .8; }
.tdock-tick.is-read { opacity: 1; }
.tdock-tick.is-failed { color: #ef4444; opacity: 1; }
.tdock-msg.is-own .tdock-tick.is-failed { color: #fecaca; }
.tdock-msg.is-faded .tdock-bubble { opacity: .62; }
.tdock-note { margin-top: 3px; font-size: .72rem; font-style: italic; opacity: .85; }
.tdock-note:has(+ .tdock-meta) { padding-right: 5em; }
.tdock-note + .tdock-meta { position: absolute; right: 10px; bottom: 5px; margin: 0; }
@supports (color: oklch(from red l c h)) {
  .tdock { --tdock-own-b: oklch(from var(--tdock-own-a) calc(l - .05) c calc(h + 24)); }
}

/* === source: public/css/ui-chat-calls.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * The call layer of the app shell (views/layout/call.php, driven by
 * public/assets/js/chat-calls.js): the call screen #callSheet — a dark
 * stage with the caller hero (avatar with ring, name, state, timer), remote
 * video filling the stage, self view as a corner picture-in-picture, round
 * controls at the bottom — and #callMini, the bar a minimized call leaves
 * over any page. chat-calls.js toggles: .is-open, .is-live, .is-video-mode,
 * .is-voice-mode on the sheet; .d-none/.active on controls; .is-main and
 * .has-main on video tiles; .call-media-empty on the stage; [hidden] and
 * .is-live on the bar, .is-on on its microphone.
 */
.call-sheet {
  --call-bg: #0b0f1a;
  --call-ink: #f8fafc;
  --call-muted: rgba(226, 232, 240, .72);
  --call-accent: var(--ds-accent, #6366f1);
  --call-ctl: 60px;
  position: fixed; inset: 0; z-index: 2500;
  display: none;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.call-sheet.is-open { display: grid; place-items: center; animation: call-fade .22s ease; }
@keyframes call-fade { from { opacity: 0; } }

.call-sheet .call-card {
  position: relative; overflow: hidden;
  width: min(960px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px));
  display: flex; flex-direction: column;
  border-radius: 28px; background: var(--call-bg); color: var(--call-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  animation: call-pop .26s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes call-pop { from { transform: scale(.96); opacity: 0; } }
.call-sheet .call-backdrop {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 35%, color-mix(in srgb, var(--call-accent) 45%, transparent) 0%, transparent 70%),
    radial-gradient(40% 40% at 85% 90%, rgba(168, 85, 247, .28) 0%, transparent 70%),
    linear-gradient(180deg, #111827 0%, #0b0f1a 100%);
}

/* top bar: minimize, connection quality */
.call-sheet .call-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; }
.call-sheet .call-min {
  width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .1); color: var(--call-ink); font-size: 1.05rem; cursor: pointer;
}
.call-sheet .call-min:hover { background: rgba(255, 255, 255, .2); }
.call-sheet .call-quality-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; background: rgba(255, 255, 255, .1); color: var(--call-ink);
}
.call-sheet .call-quality-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
.call-sheet .call-quality-chip.is-excellent::before, .call-sheet .call-quality-chip.is-good::before { background: #22c55e; }
.call-sheet .call-quality-chip.is-fair::before { background: #f59e0b; }
.call-sheet .call-quality-chip.is-poor::before { background: #ef4444; }
.call-sheet .call-quality-chip.is-reconnecting::before { background: #f59e0b; animation: call-blink 1s infinite; }
.call-sheet .call-quality-meta { font-size: .7rem; color: var(--call-muted); }
@keyframes call-blink { 50% { opacity: .3; } }

/* stage */
.call-sheet .call-media { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; place-items: center; }
.call-sheet .call-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 20px; }
.call-sheet .call-avatar {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center; font-size: 3.4rem;
  background: rgba(255, 255, 255, .08); margin-bottom: 14px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .05);
}
.call-sheet .call-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.call-sheet .call-avatar::before, .call-sheet .call-avatar::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--call-accent) 70%, #fff);
  opacity: 0; pointer-events: none;
}
/* ringing: two expanding rings while the call is not connected yet */
.call-sheet .call-media.call-media-empty .call-avatar::before { animation: call-ring 2s ease-out infinite; }
.call-sheet .call-media.call-media-empty .call-avatar::after { animation: call-ring 2s ease-out 1s infinite; }
.call-sheet.is-video-mode .call-avatar::before, .call-sheet.is-video-mode .call-avatar::after,
.call-sheet.is-live .call-avatar::before, .call-sheet.is-live .call-avatar::after { animation: none; opacity: 0; }
.call-sheet.is-live .call-avatar { box-shadow: 0 0 0 6px rgba(34, 197, 94, .25); }
@keyframes call-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
html[data-bs-theme] .call-sheet .call-peer-title { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--call-ink); }
.call-sheet .call-peer-state { font-size: .95rem; color: var(--call-muted); }
.call-sheet .call-participants { font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--call-muted); min-height: 1.2em; }
.call-sheet .call-checks { position: relative; z-index: 3; min-height: 0; padding: 0 20px; font-size: .74rem; color: #fcd34d; text-align: center; }
.call-sheet .call-checks:empty { display: none; }

/* video */
.call-sheet .call-video-grid { position: absolute; inset: 0; display: grid; gap: 6px; padding: 6px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: 1fr; }
.call-sheet .call-video-grid.has-main { grid-template-columns: 1fr; }
.call-sheet .call-video-grid.has-main .call-video-tile:not(.is-main) { position: absolute; width: 160px; height: 110px; right: 12px; top: 12px; z-index: 2; }
.call-sheet .call-video-tile { position: relative; overflow: hidden; border-radius: 18px; background: #000; min-height: 0; }
.call-sheet .call-video-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-sheet .call-video-label { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #fff; font-size: .72rem; }
.call-sheet .call-local-video {
  position: absolute; z-index: 4; right: 16px; bottom: 16px; width: 168px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 18px; background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); cursor: pointer;
  transform: scaleX(-1);
}
.call-sheet.is-video-mode .call-local-video.is-main { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; z-index: 0; }
.call-sheet.is-video-mode .call-media:not(.call-media-empty) .call-hero {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  flex-direction: row; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.call-sheet.is-video-mode .call-media:not(.call-media-empty) .call-avatar { width: 34px; height: 34px; font-size: 1rem; margin: 0; box-shadow: none; }
html[data-bs-theme] .call-sheet.is-video-mode .call-media:not(.call-media-empty) .call-peer-title { font-size: .9rem; }
.call-sheet.is-video-mode .call-media:not(.call-media-empty) .call-peer-state,
.call-sheet.is-video-mode .call-media:not(.call-media-empty) .call-participants { font-size: .75rem; }
.call-sheet .call-remote-audios { display: none; }

/* controls */
.call-sheet .call-invite-row { position: relative; z-index: 3; display: flex; justify-content: center; padding: 0 20px; }
.call-sheet .chat-call-invite-select { width: min(320px, 100%); margin-bottom: 8px; background-color: rgba(255, 255, 255, .1) !important; color: var(--call-ink) !important; border-color: rgba(255, 255, 255, .18) !important; }
.call-sheet .chat-call-invite-select option { color: #0f172a; }
.call-sheet .call-controls { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-start; gap: 18px; padding: 14px 20px 26px; }
.call-sheet .call-ctl {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 0; background: transparent; color: var(--call-ink); font-size: .74rem; cursor: pointer; padding: 0;
  min-width: var(--call-ctl);
}
.call-sheet .call-ctl .bi {
  width: var(--call-ctl); height: var(--call-ctl); border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem;
  background: rgba(255, 255, 255, .12); transition: background .15s ease, transform .12s ease;
}
.call-sheet .call-ctl:hover .bi { background: rgba(255, 255, 255, .2); }
.call-sheet .call-ctl:active .bi { transform: scale(.94); }
.call-sheet .call-ctl:disabled { opacity: .45; cursor: default; }
.call-sheet .call-ctl span { color: var(--call-muted); white-space: nowrap; }
/* mic: .active = muted; camera: .active = on */
.call-sheet #callMuteBtn.active .bi { background: #f8fafc; color: #0f172a; }
.call-sheet #callVideoBtn:not(.active) .bi { background: rgba(255, 255, 255, .06); color: var(--call-muted); }
.call-sheet .call-ctl--hangup .bi { background: #ef4444; color: #fff; transform: rotate(0deg); }
.call-sheet .call-ctl--hangup:hover .bi { background: #dc2626; }

/* phones: the call takes the whole screen */
@media (max-width: 767.98px) {
  .call-sheet { background: var(--call-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .call-sheet .call-card { width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; padding-top: env(safe-area-inset-top); }
  .call-sheet .call-controls { gap: 12px; padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); }
  .call-sheet { --call-ctl: 58px; }
  .call-sheet .call-avatar { width: 112px; height: 112px; font-size: 2.8rem; }
  .call-sheet .call-local-video { width: 108px; right: 12px; bottom: 12px; border-radius: 14px; }
  .call-sheet .call-video-grid.has-main .call-video-tile:not(.is-main) { width: 110px; height: 80px; }
}

/* the minimized call: a pill under the top bar, over every page */
.call-mini {
  position: fixed; z-index: 1070; left: 50%; transform: translateX(-50%);
  top: calc(var(--sh-top-h, 56px) + 10px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 5px; max-width: calc(100vw - 32px);
  border-radius: 999px; background: #0b0f1a; color: #f8fafc;
  box-shadow: 0 12px 32px rgba(2, 6, 23, .35), 0 0 0 1px rgba(255, 255, 255, .06);
  animation: call-fade .2s ease;
}
.call-mini[hidden] { display: none; }
.call-mini__open {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 0 6px 0 0;
  border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.call-mini__ava {
  position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 1rem; background: rgba(255, 255, 255, .12);
}
.call-mini__ava img { width: 100%; height: 100%; object-fit: cover; }
.call-mini.is-live .call-mini__ava { box-shadow: 0 0 0 2px #22c55e; }
.call-mini__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.call-mini__text b { font-size: .86rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.call-mini__text small { font-size: .72rem; color: rgba(226, 232, 240, .72); font-variant-numeric: tabular-nums; }
.call-mini.is-live .call-mini__text small { color: #86efac; }
.call-mini__btn {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: #f8fafc; font-size: .95rem; cursor: pointer;
}
.call-mini__btn:hover { background: rgba(255, 255, 255, .22); }
.call-mini__btn.is-on { background: #f8fafc; color: #0f172a; }
.call-mini__btn--hangup { background: #ef4444; }
.call-mini__btn--hangup:hover { background: #dc2626; }
@media (max-width: 767.98px) {
  .call-mini { top: calc(52px + 8px + env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  .call-sheet *, .call-sheet *::before, .call-sheet *::after, .call-mini { animation: none !important; }
}

/* === source: public/css/ui-island.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * The island (5.55.0; views/layout/island.php, public/assets/js/island.js):
 * a dark floating pill in either theme. On a phone it holds the places and,
 * while a sound plays on, the player row above them; on a computer it shows
 * only for the player. Pages keep their bottom free with --island-space
 * (island.js measures it).
 */
:root { --island-space: 0px; }
/* Until island.js has measured it: the places of a phone. */
@media (max-width: 767.98px) {
  :root:has(.island__nav:not([hidden])) { --island-space: calc(80px + env(safe-area-inset-bottom)); }
}

.island {
  --island-ink: #f5f6f8;
  --island-muted: rgba(245, 246, 248, .6);
  --island-line: rgba(255, 255, 255, .09);
  --island-hover: rgba(255, 255, 255, .1);
  --island-accent: var(--ds-accent, #e5254c);
  --island-on-accent: var(--ds-on-accent, #fff);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
  display: flex; justify-content: center;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.island__body {
  position: relative; width: min(100%, 440px); overflow: hidden;
  border-radius: 30px; background: rgba(14, 14, 18, .96); color: var(--island-ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
  transition: border-radius .3s ease, box-shadow .3s ease;
}
.island.is-open .island__body { border-radius: 28px; box-shadow: 0 20px 48px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* Nothing to show: no places on this page and no sound. */
.island:not(.has-track):has(.island__nav[hidden]),
.island:not(.has-track):not(:has(.island__nav)),
html.mv-open .island { display: none; }

/* ---------- Places ---------- */
.island__nav { display: flex; gap: 4px; padding: 6px; }
.island__nav[hidden] { display: none; }
.island__item {
  position: relative; flex: 1 1 0; min-width: 0; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 8px; border: 0; border-radius: 24px; background: transparent;
  color: var(--island-muted); font: inherit; text-decoration: none; cursor: pointer;
  transition: flex-grow .3s ease, background-color .2s ease, color .2s ease;
}
.island__item i { font-size: 1.25rem; line-height: 1; }
.island__item:hover { color: var(--island-ink); }
.island__item:focus-visible { outline: 2px solid var(--island-accent); outline-offset: -2px; }
.island__label {
  max-width: 0; overflow: hidden; opacity: 0;
  font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis;
  transition: max-width .3s ease, opacity .2s ease;
}
.island__item.is-active { flex-grow: 2.4; background: var(--island-accent); color: var(--island-on-accent); }
.island__item.is-active .island__label { max-width: 112px; opacity: 1; }
.island__badge {
  position: absolute; top: 4px; left: calc(50% + 4px);
  min-width: 18px; padding: 0 4px; border-radius: 12px; background: #ef4444; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px rgba(14, 14, 18, .9);
}
.island__badge[hidden] { display: none; }
.island__item.is-active .island__badge { left: auto; right: 8px; }
.island__more i { font-size: 1.15rem; }

/* ---------- Player ---------- */
.island__now[hidden] { display: none; }
.island__stash { display: none; }
.island__now { position: relative; animation: island-in .3s ease; }
@keyframes island-in { from { opacity: 0; transform: translateY(8px); } }
.island__now + .island__nav { border-top: 1px solid var(--island-line); }
.island__row { display: flex; align-items: center; gap: 12px; height: 60px; padding: 8px 8px 8px 8px; cursor: pointer; }
.island__row:focus-visible { outline: 2px solid var(--island-accent); outline-offset: -2px; border-radius: 28px; }
.island__art {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 22px;
  background: linear-gradient(135deg, var(--island-accent), color-mix(in srgb, var(--island-accent) 50%, #000));
  color: var(--island-on-accent); font-size: 20px;
}
.island__eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.island__eq i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: island-eq .9s ease-in-out infinite; }
.island__eq i:nth-child(2) { animation-delay: -.3s; }
.island__eq i:nth-child(3) { animation-delay: -.6s; }
.island__eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes island-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.island.is-playing .island__eq { display: inline-flex; }
.island.is-playing .island__art > .bi { display: none; }
.island__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.island__title { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.island__sub { color: var(--island-muted); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.island__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
  background: transparent; color: var(--island-ink); font-size: 20px; cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
.island__btn:hover { background: var(--island-hover); }
.island__btn:active { transform: scale(.92); }
.island__btn:focus-visible { outline: 2px solid var(--island-accent); outline-offset: 0; }
.island__btn:disabled { opacity: .32; cursor: default; }
.island__btn[hidden] { display: none; }
.island__btn--play { font-size: 24px; }
.island__row .island__btn--next:disabled { display: none; }

/* The folded row's edge shows how much of the track has played. */
.island__line { position: absolute; left: 20px; right: 20px; bottom: -1px; z-index: 1; height: 2px; border-radius: 2px; overflow: hidden; transition: opacity .2s ease; }
.island__line > span { display: block; width: 0; height: 100%; background: var(--island-accent); }
.island.is-open .island__line { opacity: 0; }

/* The full remote unfolds under the row. */
.island__deck { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.island.is-open .island__deck { grid-template-rows: 1fr; }
.island__deck-in { min-height: 0; overflow: hidden; }
.island__seek { display: flex; align-items: center; gap: 12px; padding: 4px 20px 8px; }
.island__time { flex: none; min-width: 36px; color: var(--island-muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.island__track { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; }
.island__track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.island__fill { position: absolute; left: 0; top: 10px; height: 4px; width: 0; border-radius: 4px; background: var(--island-accent); }
.island__knob { position: absolute; top: 12px; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); transition: transform .15s ease; }
.island__track.is-scrubbing .island__knob { transform: scale(1.25); }
.island__track:focus-visible { outline: 2px solid var(--island-accent); outline-offset: 4px; border-radius: 4px; }
.island__ctrls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 12px; }
.island__btn--big { width: 56px; height: 56px; border-radius: 28px; background: var(--island-accent); color: var(--island-on-accent); font-size: 28px; }
.island__btn--big:hover { background: color-mix(in srgb, var(--island-accent) 86%, #fff); }
.island.is-open .island__row .island__btn { display: none; }

/* ---------- Computer: the island is only the player ---------- */
@media (min-width: 768px) {
  .island:not(.has-track) { display: none; }
  .island { padding-bottom: 20px; }
  .island__body { width: 400px; }
  /* centred over the page, between the menu and the side chat */
  .app-shell:has(> .sh-side) .island { padding-left: calc(var(--sidebar-w, 0px) + 12px); }
  .app-shell.has-chat-rail .island { padding-right: calc(var(--tdock-rail, 60px) + 12px); }
}

/* Places off (5.55.1, island.js sets .no-nav): a board, an open chat on a phone. */
.island.no-nav .island__nav { display: none; }
.island.no-nav:not(.has-track) { display: none; }

/* Pages that fill the screen (the chat, boards; island.js sets .is-top): the
   player keeps to the top, as the island of a phone, never over a composer;
   a press unfolds the remote. */
.island.is-top { top: 0; bottom: auto; padding: calc(6px + env(safe-area-inset-top)) 12px 0; }
.island.is-top:not(.is-open) .island__row { height: 44px; padding: 4px; gap: 8px; }
.island.is-top:not(.is-open) :is(.island__art, .island__btn) { width: 36px; height: 36px; font-size: 18px; }
.island.is-top:not(.is-open) :is(.island__sub, .island__line, .island__btn--next) { display: none; }
@media (min-width: 768px) {
  .island.is-top { padding-top: 6px; }
  .island.is-top:not(.is-open) .island__body { width: 320px; }
}
@media (max-width: 767.98px) {
  /* a phone's top is the status bar and the page title: only the cover and play */
  .island.is-top:not(.is-open) .island__body { width: 96px; }
  .island.is-top:not(.is-open) .island__row { justify-content: space-between; }
  .island.is-top:not(.is-open) .island__meta { display: none; }
  /* an open chat: under its header (name, calls), over the messages */
  body.chat-mobile-fullscreen .island.is-top { padding-top: calc(env(safe-area-inset-top) + 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .island__now, .island__eq i { animation: none; }
  .island__item, .island__label, .island__deck, .island__body { transition: none; }
}

/* === source: public/css/ui-page-head.css === */
/*
 * Rewrite status: done — see REWRITE_STATUS.md (extend, don't rewrite).
 * The head of a page (5.56.0): the page's own title and a line under it,
 * straight on the page — never a card. Several layers of the old design
 * (design-system .t-page-head, ui-shell .page-hero, the presets, the
 * designer surfaces) each drew the head as a framed panel, so on a phone a
 * page was a card with a card in it, and the page title came out smaller
 * than the section titles under it. One rule here for every head; the size
 * matches the heads already drawn flat (settings, news, SkyBox).
 */
html[data-bs-theme] .app-shell :is(.page-hero, .cd-surface-hero, .notify-hub__hero) {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px;
  margin: 0 0 20px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
}
html[data-bs-theme] .app-shell :is(.page-hero, .cd-surface-hero, .notify-hub__hero)::before,
html[data-bs-theme] .app-shell :is(.page-hero, .cd-surface-hero, .notify-hub__hero)::after { content: none; }
html[data-bs-theme] .app-shell :is(.page-hero, .cd-surface-hero, .notify-hub__hero, .about-page-head, .pe-head) h1 {
  margin: 0 0 4px !important; font-size: 1.7rem; font-weight: 700; line-height: 1.15; letter-spacing: var(--ds-heading-tracking, -.01em);
}
html[data-bs-theme] .app-shell :is(.page-hero, .cd-surface-hero) :is(.page-subtle, .text-secondary) { max-width: 64ch; font-size: .9rem; }
@media (max-width: 767.98px) {
  html[data-bs-theme] .app-shell :is(.page-hero, .cd-surface-hero, .notify-hub__hero, .about-page-head, .pe-head) h1 { font-size: 1.4rem; }
}