:root.song-studio-compact {
  --six-ui-sidebar-background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'%20opacity='0.10'/%3E%3C/svg%3E"), radial-gradient(26rem 24rem at 26% 112%, rgb(223 97 129 / .26), transparent 70%), linear-gradient(178deg, #262029 0%, #1b1622 46%, #121016 100%) #121016;
  --six-ui-sidebar-background-size: 160px 160px, auto, auto;
}
/* Existing compact Studio already shares the reference palette/geometry.
   This adapter aligns the remaining native Frappe components with the
   SixQuiz/Dashboard contract. Presentation only: no markup, handler or
   feature changes; full ERP, print/public pages and virtualized report rows
   stay native. Selectors were measured on the deployed v16 desk bundles. */
:root.song-studio-compact {
  --song-control-font: 14px;
  /* Reference tokens the Studio overlay does not define. */
  --six-ui-brand-tint: #fef7f9;
  --six-ui-segment: #f1ece4;
  --six-ui-segment-active: 0 0 0 1px rgb(64 44 28 / .06), 0 1px 2px rgb(64 44 28 / .10);
  --six-ui-switch-off: rgb(102 97 94 / .7);
  --six-ui-glass: rgb(255 255 255 / .62);
  --six-ui-glass-border: rgb(255 255 255 / .72);
  /* Frappe's own dropdown-item padding token (it is applied with !important). */
  --dropdown-padding: 10px 12px;
}
:root.song-studio-compact[data-theme="dark"] {
  --six-ui-brand-tint: #2e1d26;
  --six-ui-segment: #211c26;
  --six-ui-segment-active: 0 0 0 1px rgb(255 255 255 / .06), 0 1px 2px rgb(0 0 0 / .32);
  --six-ui-switch-off: rgb(201 191 202 / .45);
  --six-ui-glass: rgb(38 32 41 / .85);
  --six-ui-glass-border: rgb(255 255 255 / .10);
}
.song-studio-compact .body-sidebar {
  background: var(--six-ui-sidebar-background);
  background-size: var(--six-ui-sidebar-background-size);
}

/* Typography. Frappe's text mixins add .02em tracking to most component
   roots; the reference sets none. :root keeps this above Frappe's grid/widget
   rules; later eyebrow (.1em) and title (negative) tracking match or exceed it. */
:root.song-studio-compact :is(.btn, .frappe-control, .form-control, .like-disabled-input, .list-row, .list-row-head,
  .list-paging-area, .indicator-pill, .timeline-item, .layout-side-section, .grid-row, .grid-body, .grid-static-col,
  .grid-row .data-row, .grid-footer, .awesomplete, .dropdown-menu, .frappe-menu, .modal-content, .desk-alert,
  .widget-title, .section-head, .title-text-form, .help-box, .label-area, .form-sidebar li, .form-tabs .nav-item,
  .avatar-frame, .avatar-name-email, .keyboard-shortcut, .comment-title, .frappe-timestamp, .datepicker,
  .dt-cell__content, .notifications-list) { letter-spacing: 0; }
.song-studio-compact :is(.control-label, .song-filter-label) { font-size: 13px; }

/* Glass panel. Every action shares the 40px reference button height, so
   primary, view, filter and icon actions line up inside the 64px panel. */
.song-studio-compact .page-head .page-actions .btn:not(.btn-reset) {
  min-height: 40px; height: 40px; padding-block: 0; font-size: 14px; border-radius: 8px;
}
.song-studio-compact .page-head .page-actions .btn.icon-btn { width: 40px; min-width: 40px; padding-inline: 0; justify-content: center; }
/* Breadcrumb title: ancestors muted, the current page in the reference
   14px/600 panel title (forms rendered it 16px/500 in near-black). */
.song-studio-compact .page-head .navbar-breadcrumbs li:not(:last-child) a { color: var(--song-muted); font-weight: 500; }
.song-studio-compact .page-head .navbar-breadcrumbs li:last-child a { color: var(--song-text); font-weight: 600; }
.song-studio-compact .page-head .navbar-breadcrumbs .title-text-form { font-size: 14px; line-height: 20px; letter-spacing: -.016em; }
/* Workspace and script-report crumbs have no .title-text-form and fell back to
   native 16px/.02em; every page type now shares the 14px panel title. */
.song-studio-compact .page-head .navbar-breadcrumbs li a:not(:has(svg)) { font-size: 14px; line-height: 20px; letter-spacing: -.016em; }
/* An indicator with no label renders only its dot after the page title. */
.song-studio-compact .page-head .indicator-pill:empty { display: none; }
/* Search/notification rows: Frappe pads their icon/suffix wrappers (58/50px
   rows); match the 44px navigation rows and their 16px icon column. */
.song-studio-compact .body-sidebar .standard-items-sections .item-anchor :is(.sidebar-item-icon, .sidebar-item-suffix) { padding-block: 0; }
.song-studio-compact .body-sidebar .standard-items-sections .item-anchor .sidebar-item-icon { padding: 0; width: 16px; min-width: 16px; flex: 0 0 16px; }
.song-studio-compact .body-sidebar .keyboard-shortcut { font-size: 12px; color: var(--song-ink-muted); opacity: .8; }

/* Collapsed desktop sidebar (native, persisted per user): Studio's 16px
   sidebar padding left Frappe's 50px rail 18px wide, clipping icons and the
   logo. Use the reference 64px dark rail; labels stay native tooltips. */
@media (min-width: 768px) {
  .song-studio-compact .body-sidebar-container:not(.expanded) .body-sidebar { width: 64px; padding: 0 8px 12px; }
  .song-studio-compact .body-sidebar-container:not(.expanded) :is(.sidebar-header, .standard-items-sections, .body-sidebar-top, .body-sidebar-bottom, .standard-sidebar-item, .sidebar-items) { width: 100%; }
  .song-studio-compact .body-sidebar-container:not(.expanded) .body-sidebar .sidebar-header { justify-content: center; padding-inline: 0; }
  .song-studio-compact .body-sidebar-container:not(.expanded) .body-sidebar .sidebar-header::after { left: -8px; right: -8px; }
  .song-studio-compact .body-sidebar-container:not(.expanded) .body-sidebar .sidebar-header :is(.header-title, .header-subtitle, .drop-icon) { display: none; }
  .song-studio-compact .body-sidebar-container:not(.expanded) .body-sidebar .item-anchor { justify-content: center; gap: 0; padding-inline: 0; }
  .song-studio-compact .body-sidebar-container:not(.expanded) .body-sidebar .item-anchor :is(.sidebar-item-label, .sidebar-item-suffix, .sidebar-item-control) { display: none; }
  .song-studio-compact .body-sidebar-container:not(.expanded) .body-sidebar .sidebar-user-button { justify-content: center; padding: 8px 0; }
  :root.song-studio-compact body:has(.body-sidebar-container:not(.expanded))::before { left: 64px; }
}

/* Tables: reference header eyebrow and 13px muted cells; the record title
   keeps the 14px semibold item role. Row geometry stays Studio's. */
.song-studio-compact .list-row-head :is(.list-row-col, .level-item, .list-row-col > span):not(.list-count) {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--song-muted);
}
.song-studio-compact .list-row-head .list-count { font-size: 13px; text-transform: none; letter-spacing: 0; }
.song-studio-compact .list-row-container .list-row .list-row-col:not(.list-subject) { font-size: 13px; color: var(--song-muted); }
.song-studio-compact .list-row-container .list-row .list-row-col:not(.list-subject) a.filterable { color: inherit; }
.song-studio-compact .list-row-container .list-row .list-subject a { font-size: 14px; font-weight: 600; color: var(--song-text); }
.song-studio-compact .list-row-container .list-row-activity { font-size: 12px; color: var(--song-muted); }
:root.song-studio-compact :is(.grid-heading-row .static-area, .grid-heading-row .row-index) {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--song-muted);
}
/* Frappe bolds required child-table columns (.bold is !important); the
   header asterisk already marks them, so cells keep the regular table weight. */
.song-studio-compact .grid-body .grid-row .grid-static-col.bold { font-weight: 400 !important; }
/* Report/DataTable header only; its virtualized body rows stay untouched.
   Sentence case: JS-fixed column widths would truncate uppercase .1em labels. */
.song-studio-compact .datatable .dt-row-header .dt-cell--header .dt-cell__content {
  font-size: 12px; font-weight: 600; color: var(--song-muted);
}
/* Page-length buttons are a native radio-like group: reference segmented control. */
.song-studio-compact .list-paging-area .btn-group {
  gap: 2px; padding: 4px; border-radius: 8px; background: var(--six-ui-segment);
}
.song-studio-compact .list-paging-area .btn-group .btn-paging {
  min-height: 32px; height: 32px; padding: 0 12px; border: 0; border-radius: 6px;
  background: transparent; box-shadow: none; color: var(--song-muted); font-size: 13px; font-weight: 600; opacity: 1;
}
.song-studio-compact .list-paging-area .btn-group .btn-paging:hover:not(.btn-info) { background: transparent; color: var(--song-text); }
.song-studio-compact .list-paging-area .btn-group .btn-paging.btn-info {
  background: var(--song-surface); color: var(--song-text); box-shadow: var(--six-ui-segment-active);
}
.song-studio-compact .list-paging-area .btn-more { min-height: 40px; }

/* Comment box (Quill): the reference 40px field before it expands on focus. */
.song-studio-compact .comment-input-container .ql-editor { min-height: 40px; padding: 9px 12px; font-size: 14px; line-height: 20px; }

/* Phone list filters: Studio's 40px buttons no longer fit Frappe's 32px-era
   mobile row, which wrapped the filter group under its toggle. The ID filter
   takes the remaining width; the native toggle/filter/sort controls stay. */
.song-studio-compact .page-form.flex-column .filter-section { flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.song-studio-compact .page-form.flex-column .filter-section .mobile-id-filter { flex: 1 1 88px; min-width: 0; }
.song-studio-compact .page-form.flex-column .mobile-id-filter .form-group { width: auto; margin: 0; padding: 0; }
.song-studio-compact .page-form.flex-column .filter-section :is(.filter-selector, .sort-selector) > .btn-group { margin: 0; }
.song-studio-compact .page-form.flex-column .filter-section .filter-selector { display: flex; flex: 0 0 auto; gap: 8px; }
.song-studio-compact .page-form.flex-column .filter-section .filter-toggle { width: 40px; height: 40px; padding: 0; }
.song-studio-compact .page-form.flex-column .filter-section .sort-selector { flex: 0 0 auto; }

/* Fields: reference focus (brand border + 3px brand/12 ring) and sunken
   read-only surfaces; validation colours keep priority. */
.song-studio-compact .frappe-control :is(input, select, textarea).form-control:focus:not(:disabled),
.song-studio-compact :is(.page-form, .modal-body, .filter-area) :is(input, select, textarea).form-control:focus:not(:disabled),
.song-studio-compact .table-multiselect.form-control:focus-within {
  border-color: var(--song-brand); box-shadow: var(--song-focus-ring);
}
.song-studio-compact .frappe-control.has-error:not([data-fieldtype="Check"]) :is(input, select, textarea).form-control:focus { border-color: var(--song-danger); }
.song-studio-compact .frappe-control .like-disabled-input,
.song-studio-compact .frappe-control :is(input, textarea, select).form-control:disabled,
.song-studio-compact .frappe-control :is(input, textarea).form-control[readonly] { background: var(--song-sunken); }
/* Section titles use the reference section role. A labelled column break is a
   group title of the same role (an uppercase eyebrow made one form mix two
   heading styles), and its sibling columns reserve the same 36px so the first
   fields of every column stay on one row. */
:root.song-studio-compact .form-section .section-head {
  font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.016em; color: var(--song-text);
}
.song-studio-compact .form-column .column-label {
  display: block; margin: 0 0 12px; font-size: 16px; line-height: 24px; font-weight: 600;
  letter-spacing: -.016em; text-transform: none; color: var(--song-text);
}
.song-studio-compact .form-section .section-body:has(.column-label) > .form-column:not(:has(.column-label))::before {
  content: ""; display: block; height: 36px;
}
@media (max-width: 575px) {
  /* Stacked .col-sm columns: the spacer would only add a gap above the first field. */
  .song-studio-compact .form-section .section-body:has(.column-label) > .form-column:not(:has(.column-label))::before { content: none; }
}
.song-studio-compact .form-tabs-list .form-tabs .nav-item .nav-link.active {
  color: var(--song-brand-deep); box-shadow: inset 0 -2px 0 var(--song-brand);
}
.song-studio-compact .switch-control .switch-visual { background: var(--six-ui-switch-off); }
.song-studio-compact .switch-control .input-area:has(input:checked) ~ .switch-visual { background: var(--song-brand); }
.song-studio-compact .switch-control .switch-thumb { box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.song-studio-compact .switch-control .label-area { font-size: 14px; font-weight: 500; color: var(--song-text); }

/* Menus (Bootstrap dropdowns, v16 frappe-menu): reference account menu —
   16px panel, 6px inset, 40px 14px semibold rows, brand-tint hover. */
.song-studio-compact :is(.dropdown-menu, .frappe-menu.context-menu) {
  padding: 6px; border: 1px solid var(--song-border); border-radius: 16px;
  background: var(--song-surface); color: var(--song-text);
  font-size: 14px; line-height: 20px; box-shadow: var(--song-modal-shadow);
}
.song-studio-compact :is(.dropdown-menu .dropdown-item, .frappe-menu .dropdown-menu-item > a) {
  min-height: 40px; border-radius: 8px; gap: 10px;
  color: var(--song-text); font-size: 14px; line-height: 20px; font-weight: 600;
  transition: background-color 150ms, color 150ms;
}
.song-studio-compact .dropdown-menu .dropdown-item :is(.menu-item-label, .item-label, a) { font-weight: 600; color: inherit; }
.song-studio-compact :is(.dropdown-menu .dropdown-item:is(:hover, :focus-visible, .active), .frappe-menu .dropdown-menu-item:hover > a, .frappe-menu .dropdown-menu-item > a:focus-visible) {
  background: var(--six-ui-brand-tint); color: var(--song-brand-deep);
}
.song-studio-compact .frappe-menu .dropdown-menu-item:hover:has(a) { background: transparent; }
.song-studio-compact :is(.dropdown-menu, .frappe-menu) .dropdown-divider { margin: 6px 4px; border-top-color: var(--song-border); }
.song-studio-compact :is(.dropdown-menu .dropdown-item, .frappe-menu .dropdown-menu-item > a) .icon { color: var(--song-muted); }
.song-studio-compact .dropdown-menu .menu-item-shortcut { font-weight: 500; }

/* Link suggestions: v16 renders div[role=option] rows (not li), so Studio's
   li rules never applied. Reference Select listbox rows. */
.song-studio-compact .awesomplete > ul {
  max-height: min(400px, 60vh); padding: 4px; border: 1px solid var(--song-border); border-radius: 12px;
  background: var(--song-surface); color: var(--song-text); box-shadow: var(--song-popover-shadow);
}
.song-studio-compact .awesomplete > ul > [role="option"] {
  display: flex; flex-direction: column; justify-content: center; min-height: 36px; margin: 0; padding: 8px 12px;
  border-radius: 8px; color: var(--song-text); font-size: 14px; line-height: 20px; cursor: pointer;
}
.song-studio-compact .awesomplete > ul > [role="option"] p { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.song-studio-compact .awesomplete > ul > [role="option"] strong { font-weight: 500; }
.song-studio-compact .awesomplete > ul > [role="option"] .small { font-size: 12px; line-height: 18px; color: var(--song-muted); }
.song-studio-compact .awesomplete > ul > [role="option"] .link-option { color: var(--song-muted); font-size: 13px; font-weight: 500; }
.song-studio-compact .awesomplete > ul > [role="option"]:hover { background: var(--song-subtle); }
.song-studio-compact .awesomplete > ul > [role="option"][aria-selected="true"] { background: var(--six-ui-brand-tint); color: var(--song-brand-deep); }
.song-studio-compact .awesomplete > ul > [role="option"][aria-selected="true"] :is(strong, .link-option) { color: var(--song-brand-deep); }

/* Search palette (Ctrl+K): the icon and borderless input share one row, so
   the row is the reference SearchField; the generic field border on the input
   alone left the icon outside the box. */
.song-studio-compact .navbar-modal-wrapper .awesomebar-input-row {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border: 1px solid var(--song-border); border-radius: 8px; background: var(--song-surface); color: var(--song-muted);
  transition: border-color 150ms, box-shadow 150ms;
}
.song-studio-compact .navbar-modal-wrapper .awesomebar-input-row:focus-within { border-color: var(--song-brand); box-shadow: var(--song-focus-ring); }
.song-studio-compact #navbar-search.form-control,
.song-studio-compact #navbar-search.form-control:focus {
  flex: 1 1 auto; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
}

/* Its keyboard hints ran past the panel edge on phones; let them wrap. */
.song-studio-compact .modal-content .help-navigation { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.song-studio-compact .modal-content .help-navigation .help-item-navigate { white-space: nowrap; }
/* Phone search trigger sits in the action row: same 40px secondary icon button. */
.song-studio-compact .page-head .navbar-modal-search-mobile {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--song-border); border-radius: 8px;
  background: var(--song-surface); color: var(--song-muted); box-shadow: 0 1px 2px rgb(0 0 0 / 4%); cursor: pointer;
}

/* Datepicker: white day numbers sit on the primary (#c44c68), not #df6181. */
.song-studio-compact .datepicker--cell.-selected-, .song-studio-compact .datepicker--cell.-selected-.-current- { background: #c44c68; color: #fff; }
.song-studio-compact .datepicker--cell.-selected-.-focus- { background: #a83a55; color: #fff; }
.song-studio-compact .datepicker--cell.-current-:not(.-selected-) { font-weight: 600; }

/* Dialogs: reference panel — no header rule, 24px inset, 20px/700 title
   (:root outranks Studio's 0-4-0 title rule), white footer with an inset rule. */
:root.song-studio-compact .modal .modal-header .modal-title { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.015em; }
.song-studio-compact .modal .modal-header { padding: 20px 20px 4px 24px; border-bottom: 0; align-items: flex-start; }
.song-studio-compact .modal .modal-header .modal-title { padding-top: 6px; }
.song-studio-compact .modal .modal-body { padding: 16px 24px 20px; }
.song-studio-compact .modal .modal-footer {
  margin: 0 24px; padding: 20px 0 24px; gap: 10px;
  background: transparent; border-top: 1px solid var(--song-border); border-radius: 0;
}
.song-studio-compact .modal .modal-footer > * { margin: 0; }
.song-studio-compact .modal-footer .btn { min-height: 40px; font-size: 14px; border-radius: 8px; }
.song-studio-compact .modal .msgprint { font-size: 14px; line-height: 24px; color: var(--song-text); }

/* Toasts: reference surface toast — white card, tone only on border/icon. */
.song-studio-compact #alert-container { right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.song-studio-compact .desk-alert {
  --toast-bg: var(--song-surface);
  width: 384px; max-width: calc(100vw - 32px); min-height: 0; margin: 0;
  border: 1px solid var(--song-border); border-radius: 8px; box-shadow: var(--song-popover-shadow);
}
.song-studio-compact .desk-alert.green { border-color: rgb(44 122 88 / .2); }
.song-studio-compact .desk-alert.red { border-color: rgb(176 67 63 / .2); }
.song-studio-compact .desk-alert:is(.yellow, .orange) { border-color: rgb(125 92 20 / .2); }
.song-studio-compact .desk-alert .alert-message-container { padding: 13px 40px 13px 14px; }
.song-studio-compact .desk-alert .alert-title-container { align-items: flex-start; }
.song-studio-compact .desk-alert .alert-title-container .icon { width: 16px; height: 16px; margin: 2px 12px 0 0; }
.song-studio-compact .desk-alert.green .alert-title-container .icon { fill: var(--song-success); }
.song-studio-compact .desk-alert.red .alert-title-container .icon { fill: var(--song-danger); }
.song-studio-compact .desk-alert:is(.yellow, .orange) .alert-title-container .icon { fill: var(--song-warning); }
.song-studio-compact .desk-alert.blue .alert-title-container .icon { fill: var(--song-brand); }
.song-studio-compact .desk-alert .alert-message { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--song-text); }
.song-studio-compact .desk-alert .alert-subtitle { padding-left: 28px; font-size: 13px; color: var(--song-muted); }
.song-studio-compact .desk-alert .close { top: 12px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
.song-studio-compact .desk-alert .close:hover { background: var(--song-subtle); }

/* Notification drawer (v16 .notifications-list; Studio's rule targets the
   older .notification-list): surface panel and the brand active-tab marker. */
.song-studio-compact .notifications-list { background: var(--song-surface); border-right: 1px solid var(--song-border); box-shadow: var(--song-popover-shadow); }
.song-studio-compact .notifications-list .notifications-category.active {
  color: var(--song-brand-deep); border-bottom-color: var(--song-brand); box-shadow: inset 0 -1px 0 var(--song-brand);
}

/* Number cards: reference metric label/value roles. */
.song-studio-compact .widget.number-widget-box .widget-head .widget-title { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--song-text); }
.song-studio-compact .widget.number-widget-box .widget-body .widget-content .number { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.035em; color: var(--song-text); }

/* Launcher: the shared warm canvas and glass panel; each studio keeps its own
   accent/icon tile as its identity. */
:root.song-studio-compact.song-studio-launcher,
:root.song-studio-compact.song-studio-launcher[data-theme="dark"] {
  --launcher-canvas: var(--song-canvas); --launcher-surface: var(--song-surface);
  --launcher-text: var(--song-text); --launcher-muted: var(--song-muted); --launcher-border: var(--song-border);
}
:root.song-studio-compact.song-studio-launcher body::before {
  inset: 0;
  background-color: var(--song-canvas);
  background-image: var(--song-grain),
    radial-gradient(ellipse 43% 39% at 12% 16%, rgb(92 189 120 / 17%), rgb(92 189 120 / 3.2%) 66%, transparent 88%),
    radial-gradient(ellipse 49% 44% at 60% 32%, rgb(255 209 104 / 21%), rgb(255 209 104 / 4%) 66%, transparent 88%),
    radial-gradient(ellipse 45% 41% at 78% 82%, rgb(223 97 129 / 18%), rgb(223 97 129 / 3.4%) 66%, transparent 88%),
    linear-gradient(176deg, #fdfbf7 0%, #fbf8f2 46%, #f7f1e6 100%);
  background-size: 160px 160px, auto, auto, auto, auto;
}
:root.song-studio-compact.song-studio-launcher[data-theme="dark"] body::before {
  background-image: var(--song-grain-dark), radial-gradient(ellipse at 78% 82%, rgb(223 97 129 / 8%), transparent 70%);
  background-size: 160px 160px, auto;
}
.song-studio-compact.song-studio-launcher .desktop-navbar {
  border-color: var(--six-ui-glass-border); background: var(--six-ui-glass);
  box-shadow: var(--song-glass-shadow);
  backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08);
}
.song-studio-compact.song-studio-launcher .studio-launcher-brand { font-size: 16px; font-weight: 600; letter-spacing: -.016em; }
.song-studio-compact.song-studio-launcher .desktop-avatar { min-height: 40px; border-color: var(--song-border); }
.song-studio-compact.song-studio-launcher .desktop-avatar:hover { background: var(--six-ui-brand-tint); }
.song-studio-compact.song-studio-launcher .desktop-avatar:focus-visible { outline-color: var(--song-brand); }
.song-studio-compact.song-studio-launcher .desktop-container > .icons-container > .icons > .desktop-icon {
  min-width: 0; border: 0; border-radius: 12px;
  box-shadow: var(--song-card-shadow);
  transition: box-shadow 200ms;
}
.song-studio-compact.song-studio-launcher .desktop-container > .icons-container > .icons > .desktop-icon:hover {
  transform: none; box-shadow: var(--song-card-hover-shadow);
}
.song-studio-compact.song-studio-launcher .studio-launcher-kind {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.song-studio-compact.song-studio-launcher .desktop-icon .icon-container { border-radius: 12px; }
.song-studio-compact.song-studio-launcher .desktop-icon .icon-title {
  font-size: 16px; line-height: 24px; letter-spacing: -.016em;
}
.song-studio-compact.song-studio-launcher .studio-launcher-card-description { line-height: 20px; }
.song-studio-compact.song-studio-launcher .studio-launcher-title {
  font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.03em;
}
@media (min-width: 640px) {
  .song-studio-compact.song-studio-launcher .studio-launcher-title { font-size: 36px; line-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .song-studio-compact.song-studio-launcher .desktop-container > .icons-container > .icons > .desktop-icon { transition: none; }
}

/* Small components. Primary uses brand-dark/deep for white text; Frappe's
   hardcoded black/blue badges, text-primary, selection and blue tokens follow
   the reference palette. Full ERP outside compact Studio stays native. */
:root.song-studio-compact {
  --focus-blue: 0 0 0 2px rgb(223 97 129 / .45);
  --focus-default: 0 0 0 2px rgb(223 97 129 / .45);
  --ink-blue-link: #a83a55;
  --bg-blue: #eceef8; --text-on-blue: #2c3b8b;
  --switch-bg: #94908e;
}
:root.song-studio-compact[data-theme="dark"] { --ink-blue-link: #f0a0b4; }
.song-studio-compact .btn-primary:not(.btn-danger) {
  background: #c44c68; border-color: #c44c68; color: #fff;
  box-shadow: 0 1px 2px rgb(150 40 65 / .30);
}
.song-studio-compact .btn-primary:not(.btn-danger):is(:hover, :active, .active):not(:disabled) {
  background: #a83a55; border-color: #a83a55; color: #fff;
}
.song-studio-compact input:is([type="checkbox"], [type="radio"]) { accent-color: var(--song-brand); }
.song-studio-compact ::selection { background: rgb(223 97 129 / .16); color: inherit; }
.song-studio-compact .text-primary { color: var(--song-brand-deep) !important; }
.song-studio-compact .badge { border-radius: 6px; font-weight: 600; }
.song-studio-compact :is(.badge-primary) { background: var(--song-brand-soft); color: var(--song-brand-deep); }
.song-studio-compact :is(.badge-secondary, .badge-light) { background: var(--song-sunken); color: var(--song-muted); }
.song-studio-compact .badge-info { background: var(--song-info-soft, #eceef8); color: var(--song-info, #2c3b8b); }

@media (max-width: 639px) {
  /* Editable values use 16px on phones like the reference apps (no iOS focus
     zoom); list/grid/label text keeps the compact control token. */
  :root.song-studio-compact :is(.frappe-control, .page-form, .modal-body, .filter-area) :is(input.form-control:not(:where([type="checkbox"], [type="radio"])), select.form-control, textarea.form-control) { font-size: 16px; }
  /* Reference phone gutters for dialogs and toasts. */
  .song-studio-compact .modal-dialog { margin: 12px; }
  .song-studio-compact .modal .modal-header { padding: 16px 12px 4px 20px; }
  .song-studio-compact .modal .modal-body { padding: 12px 20px 16px; }
  .song-studio-compact .modal .modal-footer { margin: 0 20px; padding: 16px 0 20px; }
  .song-studio-compact #alert-container { right: 16px; left: 16px; bottom: 16px; align-items: stretch; }
  .song-studio-compact .desk-alert { width: auto; max-width: none; }
}

/* Level-2/3 alignment (ERPNext RQ-072). Measured on the deployed v16 desk:
   page head 25px left vs 40px right, form sidebar 24px past the head's right
   edge, six left text edges inside one form, dialog fields 24px inside their
   title/footer, Select chevrons 9px high. One horizontal inset (24px, 16px on
   phones) now carries head, tabs, section titles, labels, filters, tables and
   dialogs; native column padding (15px) is kept and compensated, not removed. */
:root.song-studio-compact { --six-ui-inset: 24px; --six-ui-col-gutter: 15px; }
@media (max-width: 639px) { :root.song-studio-compact { --six-ui-inset: 16px; } }

/* Head: native `.col` padding (0 15px) on .page-actions was never reset. */
.song-studio-compact .page-head { padding-inline: calc(var(--six-ui-inset) - 1px); }
.song-studio-compact .page-head .page-actions { padding-inline: 0; }
/* Fixed 40px actions: a label such as "Lọc khác" must not break onto two lines. */
.song-studio-compact .page-head .page-actions .btn { white-space: nowrap; }
/* Empty native slots (form viewers, filter pills, mobile actions) still took a
   6px gap each, shifting wrapped action rows off the shared inset. */
.song-studio-compact .page-head .page-actions > :not(:has(*)) { display: none; }
/* 768px and up: actions wrap to a right-aligned second row when the title
   would otherwise collapse to nothing (1024px lists/calendars lost their title
   and pushed the primary action out of the panel). Phones keep their rules. */
@media (min-width: 768px) {
  .song-studio-compact .page-head { height: auto; }
  /* Native sets nowrap with !important (Studio's phone rule overrides it the same way). */
  .song-studio-compact .page-head .page-head-content { height: auto; flex-wrap: wrap !important; row-gap: 8px; padding-block: 11px; }
  .song-studio-compact .page-head .page-title { flex: 1 1 240px; min-width: min(240px, 100%); }
  /* v16 wraps .page-actions in .standard-items-section, the actual flex item. */
  .song-studio-compact .page-head .page-head-content > .standard-items-section { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; justify-content: flex-end; }
  .song-studio-compact .page-head .page-actions { flex: 0 1 auto; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; max-width: 100%; }
}

/* Gutters have one owner, .layout-main, so the native form sidebar (a flex
   sibling of the padded card wrapper) ends on the head's right edge and starts
   level with the card. Below 992px the sidebar is off-canvas and untouched. */
@media (min-width: 992px) {
  .song-studio-compact .layout-main { box-sizing: border-box; padding-inline: var(--song-page-gutter); gap: var(--song-page-gutter); }
  .song-studio-compact .layout-main-section-wrapper.song-shell { padding-inline: 0; }
  .song-studio-compact .layout-side-section { border-left: 0; padding-top: 5px; min-width: 0; }
  .song-studio-compact body[data-route^="Form"] .layout-side-section { width: var(--form-sidebar-width); flex: 0 0 var(--form-sidebar-width); }
}
@media (max-width: 991px) {
  /* The empty side column left a 1px border sliver beside phone cards. */
  .song-studio-compact .layout-side-section { border-left: 0; min-width: 0; }
}

/* One left text edge inside cards: first tab text, section titles, labels. */
.song-studio-compact .form-tabs-list { padding-inline: calc(var(--six-ui-inset) - 16px); }
.song-studio-compact .layout-main-section :is(.form-section, .form-dashboard-section) { padding-inline: calc(var(--six-ui-inset) - var(--six-ui-col-gutter)); }
.song-studio-compact .layout-main-section .form-section .section-head { padding-inline: var(--six-ui-col-gutter); }
.song-studio-compact .layout-main-section .grid-form-body .form-section { padding-inline: 0; }
/* Dialogs: the Studio 24px section padding stacked on the 24px modal body. */
.song-studio-compact .modal :is(.form-section, .form-dashboard-section) { padding-inline: 0; }
.song-studio-compact .modal .form-section .section-head { padding-inline: 0; }

/* Lists, report views, script reports and calendars share the same inset. */
.song-studio-compact .layout-main-section .page-form,
.song-studio-compact .layout-main-section .page-form:has(.song-report-filter) { padding-inline: var(--six-ui-inset); }
.song-studio-compact .layout-main-section .frappe-list { margin-inline: var(--six-ui-inset); }
.song-studio-compact .layout-main-section .report-wrapper { padding-inline: var(--six-ui-inset); }
.song-studio-compact .layout-main-section .report-footer { padding-inline: var(--six-ui-inset); }
.song-studio-compact .layout-main-section .report-footer > .col-md-12 { padding-inline: 0; }
.song-studio-compact :is(.song-calendar-filters, #fc-calendar-wrapper) { padding: var(--six-ui-inset); }
/* Script-report filters: native `#page-query-report .page-form .form-group`
   (an ID rule) kept a 16px right pad and 10px margins inside Studio's slots. */
.song-studio-compact #page-query-report .page-form .song-report-filter { padding: 0; margin: 0; }

/* Select: native (0,4,0) `top: 3px` outranked Studio's centring (0,3,0). */
.song-studio-compact .frappe-control[data-fieldtype="Select"] .control-input .placeholder,
.song-studio-compact .frappe-control[data-fieldtype="Select"].form-group .placeholder { top: 10px; }
.song-studio-compact .frappe-control[data-fieldtype="Select"] .control-input .select-icon,
.song-studio-compact .frappe-control[data-fieldtype="Select"].form-group .select-icon { top: 12px; }

/* List rows: the sticky activity cell kept a tinted native background, a
   130x39 patch on white rows; it now matches its row (and still covers
   horizontally scrolled columns). */
.song-studio-compact .list-row-container .list-row .level-right { background: var(--song-surface); }
.song-studio-compact .list-row-container:hover .list-row .level-right { background: var(--song-subtle); }

/* Child-row editor: same two-column grid as Studio forms (it used one 50%
   column inside a 1000px dialog). Long text, tables and HTML span both. */
.song-studio-compact .grid-form-body .form-section > .section-body > .form-column:only-child > form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px;
}
.song-studio-compact .grid-form-body .form-section > .section-body > .form-column > form > .input-max-width { max-width: 100%; padding-right: 0; }
.song-studio-compact .grid-form-body .form-section > .section-body > .form-column > form > :is([data-fieldtype="Table"], [data-fieldtype="Small Text"], [data-fieldtype="Text"], [data-fieldtype="Long Text"], [data-fieldtype="Text Editor"], [data-fieldtype="HTML"], [data-fieldtype="Section Break"]) { grid-column: 1 / -1; }
@media (max-width: 639px) {
  .song-studio-compact .grid-form-body .form-section > .section-body > .form-column:only-child > form { grid-template-columns: minmax(0, 1fr); }
}

/* DataTable sticky checkbox/row-number columns are 33px wide; the 12px cell
   padding left 9px, so report views showed "2…", "3…" instead of numbers. */
.song-studio-compact .datatable .dt-cell--sticky .dt-cell__content { padding-inline: 4px; }

/* Exact SixQuiz login-left palette. Login selectors only. */
@media (min-width: 1024px) {
  body:has(:is(#auth-page, #login-email, .mantine-Card-root form #username, .card-body form #email, [data-slot="card"] form input[autocomplete="username"])):not(:has(.navbar, .mantine-AppShell-navbar, [data-slot="sidebar"], #sidebar))::before, #page-login::before {
    background-color: #101014;
    background-image: linear-gradient(95deg, #DF6181 0%, #FFD168 55%, #5CBD78 100%), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'%20opacity='0.10'/%3E%3C/svg%3E"),
    radial-gradient(46rem 40rem at 108% 106%, rgb(223 97 129 / 0.42), transparent 62%),
    radial-gradient(34rem 30rem at -8% -6%, rgb(44 59 139 / 0.32), transparent 62%),
    linear-gradient(158deg, #121016 0%, #1b1119 56%, #2c1621 100%);
    background-size: 100% 6px, 160px 160px, auto, auto, auto;
    background-position: left bottom, left top, left top, left top, left top;
    background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
    border-bottom: 0;
    padding: 48px;
    color: #fff;
    font-size: 48px; line-height: 1.08; letter-spacing: -0.04em;
  }
  @supports (background-image: linear-gradient(95deg in oklch, #DF6181 0%, #FFD168 55%, #5CBD78 100%)) {
    body:has(:is(#auth-page, #login-email, .mantine-Card-root form #username, .card-body form #email, [data-slot="card"] form input[autocomplete="username"])):not(:has(.navbar, .mantine-AppShell-navbar, [data-slot="sidebar"], #sidebar))::before, #page-login::before { background-image: linear-gradient(95deg in oklch, #DF6181 0%, #FFD168 55%, #5CBD78 100%), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'%20opacity='0.10'/%3E%3C/svg%3E"),
    radial-gradient(46rem 40rem at 108% 106%, rgb(223 97 129 / 0.42), transparent 62%),
    radial-gradient(34rem 30rem at -8% -6%, rgb(44 59 139 / 0.32), transparent 62%),
    linear-gradient(158deg, #121016 0%, #1b1119 56%, #2c1621 100%); }
  }
}
@media (min-width: 1280px) {
  body:has(:is(#auth-page, #login-email, .mantine-Card-root form #username, .card-body form #email, [data-slot="card"] form input[autocomplete="username"])):not(:has(.navbar, .mantine-AppShell-navbar, [data-slot="sidebar"], #sidebar))::before, #page-login::before { padding: 64px; font-size: 60px; }
}

/* Login right column only. Native labels, types, names and handlers stay intact. */
:root {
  --six-login-form-width: 360px;
  --six-login-field-height: 40px;
  --six-login-button-height: 48px;
  --six-login-field-radius: 8px;
  --six-login-field-border: #ebe4da;
}

/* The app's own logo/title remain above a borderless 360px form. */
#auth-login-card,
body:has(#login-email) .max-w-md,
.mantine-Card-root:has(form #username),
[data-slot="card"]:has(form input[autocomplete="username"]),
#page-login :is(.for-login, .for-email-login),
main:has(> section.login-hero-bg) > section:last-child > form {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--six-login-form-width) !important;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}
body:not(:has(.navbar)) .card:has(.card-body form #email) {
  width: 100%; max-width: var(--six-login-form-width) !important;
  padding: 0; border: 0; box-shadow: none;
}

/* Label + field share the same measurements, regardless of native component. */
#auth-login-card label,
body:has(#login-email) .max-w-md form label,
.mantine-Card-root:has(form #username) .mantine-InputWrapper-label,
[data-slot="card"]:has(form input[autocomplete="username"]) form label,
body:not(:has(.navbar)) .card:has(.card-body form #email) label[for],
#page-login :is(.for-login, .for-email-login) .form-label,
main:has(> section.login-hero-bg) > section:last-child > form label {
  margin-bottom: 8px !important;
  color: #17151a !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
}
main:has(> section.login-hero-bg) > section:last-child > form label {
  margin-bottom: 0 !important;
}
#auth-login-card input,
body:has(#login-email) .max-w-md form input,
.mantine-Card-root:has(form #username) .mantine-TextInput-input,
.mantine-Card-root:has(form #username) .mantine-PasswordInput-input,
[data-slot="card"]:has(form input[autocomplete="username"]) form input,
body:not(:has(.navbar)) .card:has(.card-body form #email) form input,
#page-login :is(.for-login, .for-email-login) .form-control,
main:has(> section.login-hero-bg) > section:last-child > form input {
  box-sizing: border-box;
  width: 100%;
  height: var(--six-login-field-height) !important;
  min-height: var(--six-login-field-height) !important;
  padding: 0 12px;
  border: 1px solid var(--six-login-field-border) !important;
  border-radius: var(--six-login-field-radius) !important;
  background: #fff !important;
  color: #17151a !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  box-shadow: none;
}
/* Native password wrappers/visibility buttons retain their own hit targets. */
.mantine-Card-root:has(form #username) .mantine-PasswordInput-innerInput {
  height: 38px !important; min-height: 38px !important; padding-inline: 12px;
  border: 0; font-size: 14px; font-weight: 600; color: #17151a !important;
}
#page-login .for-login .password-field .form-control { padding-right: 40px; }
body:not(:has(.navbar)) .card:has(.card-body form #email) label.relative input { padding-right: 44px; }
/* LiteLLM's native password component already owns the field frame. Style that
   frame once; keep the inner input and existing visibility button borderless. */
[data-slot="card"]:has(form input[autocomplete="username"]) [data-slot="input-group"] {
  box-sizing: border-box; height: 40px; min-height: 40px;
  border: 1px solid var(--six-login-field-border); border-radius: 8px;
  background: #fff; box-shadow: none;
}
[data-slot="card"]:has(form input[autocomplete="username"]) [data-slot="input-group"] input {
  min-width: 0; height: 38px !important; min-height: 38px !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; outline: none; box-shadow: none !important;
}
[data-slot="card"]:has(form input[autocomplete="username"]) [data-slot="input-group"]:has(input:focus-visible):not(:has([aria-invalid="true"])) {
  border-color: rgb(223 97 129 / 45%); box-shadow: 0 0 0 3px rgb(223 97 129 / 12%);
}
[data-slot="card"]:has(form input[autocomplete="username"]) [data-slot="input-group"]:has([aria-invalid="true"]) {
  border-color: #b0433f;
}

#auth-login-card input::placeholder,
body:has(#login-email) .max-w-md form input::placeholder,
.mantine-Card-root:has(form #username) input::placeholder,
[data-slot="card"]:has(form input[autocomplete="username"]) form input::placeholder,
body:not(:has(.navbar)) .card:has(.card-body form #email) input::placeholder,
#page-login :is(.for-login, .for-email-login) input::placeholder,
main:has(> section.login-hero-bg) > section:last-child > form input::placeholder {
  color: #8a827f; font-weight: 400;
}
#auth-login-card input:focus-visible:not([aria-invalid="true"]),
body:has(#login-email) .max-w-md form input:focus-visible:not([aria-invalid="true"]),
.mantine-Card-root:has(form #username) .mantine-Input-input:focus-within:not([data-error]),
[data-slot="card"]:has(form input[autocomplete="username"]) form input:focus-visible:not([aria-invalid="true"]),
body:not(:has(.navbar)) .card:has(.card-body form #email) input:focus-visible,
#page-login :is(.for-login, .for-email-login) input:focus:not(.is-invalid),
main:has(> section.login-hero-bg) > section:last-child > form input:focus-visible:not([aria-invalid="true"]) {
  outline: none;
  border-color: rgb(223 97 129 / 45%) !important;
  box-shadow: 0 0 0 3px rgb(223 97 129 / 12%);
}
#auth-login-card input[aria-invalid="true"],
body:has(#login-email) .max-w-md form input[aria-invalid="true"],
.mantine-Card-root:has(form #username) .mantine-Input-input[data-error],
[data-slot="card"]:has(form input[autocomplete="username"]) form input[aria-invalid="true"],
#page-login .for-login input.is-invalid {
  border-color: #b0433f !important;
}

/* Sign in is primary; the existing authentik/provider action is secondary. */
#auth-login-card button[type="submit"],
body:has(#login-email) .max-w-md form button[type="submit"],
.mantine-Card-root:has(form #username) button[type="submit"],
[data-slot="card"]:has(form input[autocomplete="username"]) button[type="submit"],
body:not(:has(.navbar)) .card:has(.card-body form #email) .card-actions > button[type="submit"],
#page-login .for-login .btn-login:not(.btn-login-option),
main:has(> section.login-hero-bg) > section:last-child > form button[type="submit"] {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: var(--six-login-button-height) !important;
  min-height: var(--six-login-button-height) !important;
  padding: 0 24px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  /* White 14px text needs brand-dark (4.58:1); #df6181 is 3.41:1, for marks only. */
  background: #c44c68 !important;
  color: #fff !important;
  font-size: 14px; font-weight: 600; line-height: 20px;
  box-shadow: 0 1px 2px rgb(150 40 65 / 30%);
}
#auth-login-card > .flex.flex-col.space-y-2 > button,
body:has(#login-email) a[href="/api/auth/oidc/start"],
.mantine-Card-root:has(form #username) .mantine-Button-root[data-variant="light"],
[data-slot="card"]:has(form input[autocomplete="username"]) form button[type="button"].w-full,
#other-providers > li > button,
#page-login .for-login .btn-login-option,
main:has(> section.login-hero-bg) > section:last-child > form > .mt-6 > button.w-full {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: var(--six-login-button-height) !important;
  min-height: var(--six-login-button-height) !important;
  padding: 0 24px;
  border: 1px solid var(--six-login-field-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #17151a !important;
  font-size: 14px; font-weight: 600; line-height: 20px;
  box-shadow: 0 1px 2px rgb(64 44 28 / 4%);
}

/* Equal field/action spacing. Errors and recovery/link actions stay in place. */
#auth-login-card form > div:first-child { margin-bottom: 36px; }
#auth-login-card form > .flex.flex-col { margin-top: 0; gap: 20px; }
#auth-login-card form > .flex.flex-col > div { margin-bottom: 0; }
#auth-login-card form > .mt-5 { margin-top: 28px; }
#auth-login-card:not(:has(button[type="submit"])) > .inline-flex { display: none; }
body:has(#login-email) .max-w-md form,
.mantine-Card-root:has(form #username) form > .mantine-Stack-root,
[data-slot="card"]:has(form input[autocomplete="username"]) form [data-slot="field-group"] { gap: 20px !important; }
[data-slot="card"]:has(form input[autocomplete="username"]) form [data-slot="field"] { gap: 8px; }
[data-slot="card"]:has(form input[autocomplete="username"]) form [data-slot="field"] > label { margin-bottom: 0 !important; }
.mantine-Card-root:has(form #username) form > .mantine-Stack-root > .mantine-Stack-root { gap: 20px; }
.mantine-Card-root:has(form #username) button[type="submit"] { margin-top: 8px; }
.mantine-Card-root:has(form #username) .mantine-Divider-root { margin-block: 4px; }
.mantine-Card-root:has(form #username) .mantine-Button-inner { justify-content: center; }
body:not(:has(.navbar)) .card:has(.card-body form #email) .card-body { gap: 36px; }
body:not(:has(.navbar)) .card:has(.card-body form #email) form > input { margin-bottom: 20px; }
body:not(:has(.navbar)) .card:has(.card-body form #email) form > label[for] { display: block; }
body:not(:has(.navbar)) .card:has(.card-body form #email) .card-actions { margin-top: 28px; gap: 24px; }

/* Reveal the existing provider buttons below Sign in; no new OAuth handler. */
body:not(:has(.navbar)) .card:has(form #email) .dropdown:has(#other-providers button) > label { display: none; }
#other-providers:has(button) {
  position: static !important; display: flex !important; flex-direction: column;
  visibility: visible !important; opacity: 1 !important; transform: none !important;
  /* DaisyUI uses the independent scale property and disables pointer events
     on closed dropdowns. These native provider buttons are deliberately inline. */
  scale: 1 !important; pointer-events: auto !important;
  width: 100% !important; min-width: 0; margin: 0; padding: 0; gap: 12px;
  background: transparent !important; border: 0; box-shadow: none !important;
}
#other-providers:has(button) > .menu-title { display: none; }
#other-providers:has(button) > li { padding: 0; }
#page-login .for-login .social-logins { margin-top: 24px; padding-top: 20px; }
#page-login .for-login .login-button-wrapper { padding-inline: 0; }

@media (max-width: 639px) {
  #auth-login-card input,
  body:has(#login-email) .max-w-md form input,
  .mantine-Card-root:has(form #username) input,
  [data-slot="card"]:has(form input[autocomplete="username"]) form input,
  body:not(:has(.navbar)) .card:has(.card-body form #email) form input,
  #page-login .for-login input,
  main:has(> section.login-hero-bg) > section:last-child > form input {
    /* Native ID/utility selectors otherwise beat this shared mobile rule. */
    font-size: 16px !important;
  }
}
@media (forced-colors: active) {
  #auth-login-card input:focus-visible,
  body:has(#login-email) .max-w-md form input:focus-visible,
  .mantine-Card-root:has(form #username) input:focus-visible,
  [data-slot="card"]:has(form input[autocomplete="username"]) input:focus-visible,
  body:not(:has(.navbar)) .card:has(.card-body form #email) input:focus-visible,
  #page-login .for-login input:focus-visible,
  main:has(> section.login-hero-bg) > section:last-child > form input:focus-visible {
    outline: 2px solid Highlight; box-shadow: none;
  }
}