/* =========================================================
   Buttons (расширения), sidebar и layout-примитивы, навигация,
   оверлеи, аккаунт, утилиты, форсированные состояния
   ========================================================= */

/* ---------- Buttons: extra variants ---------- */
.g-btn--success {
    --g-btn-bg: var(--color-success-bg);
    --g-btn-color: var(--color-success-text);
    --g-btn-hover-bg: var(--color-accent);
    --g-btn-hover-color: var(--color-on-accent);
}

.g-btn--link {
    --g-btn-bg: transparent;
    --g-btn-hover-bg: transparent;
    --g-btn-px: 0;
    height: auto;
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 4px;
}

.g-btn--link:hover { text-decoration-color: currentColor; }

.g-btn.is-selected,
.g-btn[aria-pressed="true"] {
    --g-btn-bg: var(--color-primary);
    --g-btn-color: var(--color-on-primary);
    --g-btn-hover-bg: var(--color-primary-hover);
}

/* Форсированные состояния для витрины и тестов */
.g-btn.is-hover { background: var(--g-btn-hover-bg); color: var(--g-btn-hover-color); border-color: var(--g-btn-hover-border); }
.g-btn.is-focus { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; }
.g-btn.is-pressed { transform: scale(.97); background: var(--g-btn-hover-bg); filter: brightness(.94); }
.g-input.is-hover, .g-select.is-hover, .g-affix.is-hover { border-color: var(--color-border-strong); }
.g-input.is-focus, .g-select.is-focus, .g-affix.is-focus { border-color: var(--color-text-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.g-input.is-warning { border-color: var(--color-warning); }
.g-list-item.is-hover { background: var(--color-surface-sunken); }
.g-list-item.is-selected { background: var(--color-state-selected); box-shadow: inset 0 0 0 1.5px var(--color-accent-strong); }
.g-list-item.is-disabled { opacity: .45; pointer-events: none; }

/* Button group */
.g-btn-group {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-pill);
}

.g-btn-group > .g-btn { --g-btn-bg: transparent; --g-btn-hover-bg: var(--color-state-active); }
.g-btn-group > .g-btn.is-selected { --g-btn-bg: var(--color-surface); --g-btn-color: var(--color-text-primary); --g-btn-hover-bg: var(--color-surface); box-shadow: var(--shadow-xs); }

.g-btn-group--attached {
    gap: 1px;
    padding: 0;
    background: var(--color-border);
}

.g-btn-group--attached > .g-btn { --g-btn-bg: var(--color-surface-sunken); --g-btn-hover-bg: var(--color-gray-200); border-radius: 0; }
.g-btn-group--attached > .g-btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.g-btn-group--attached > .g-btn:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }

/* Split button */
.g-split-btn { display: inline-flex; gap: 1px; }
.g-split-btn > .g-btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); padding-right: var(--spacing-3); }
.g-split-btn > .dropdown > .g-btn,
.g-split-btn > .g-btn:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; width: 36px; padding: 0; }

/* Floating action button */
.g-fab {
    position: fixed;
    right: var(--spacing-6);
    bottom: var(--spacing-6);
    z-index: var(--z-fab);
    width: 56px;
    height: 56px;
    font-size: var(--icon-size-xl);
    box-shadow: var(--shadow-md);
}

.g-fab--static { position: static; }
.g-fab--extended { width: auto; padding: 0 var(--spacing-6); font-size: var(--font-size-md); }

/* ---------- Sidebar ---------- */
.g-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    width: var(--sidebar-width);
    padding: var(--spacing-4) var(--spacing-3);
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    transition: width var(--duration-slow) var(--ease-emphasized);
    overflow: hidden;
}

.g-sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-1);
}

.g-sidebar__group { display: flex; flex-direction: column; gap: 2px; }

.g-sidebar__group-title {
    padding: 0 var(--spacing-3) var(--spacing-2);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.g-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    height: var(--control-height-md);
    padding: 0 var(--spacing-3);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.g-sidebar__link > .bi:first-child { flex-shrink: 0; width: 20px; font-size: var(--icon-size-md); text-align: center; }
.g-sidebar__label { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.g-sidebar__link:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

.g-sidebar__link.is-active {
    color: var(--color-on-primary);
    background: var(--color-primary);
}

.g-sidebar__chevron { font-size: 12px; transition: transform var(--transition-base); }
.g-sidebar__link[aria-expanded="true"] .g-sidebar__chevron { transform: rotate(180deg); }
.g-sidebar__link[aria-expanded="true"] { color: var(--color-text-primary); }

.g-sidebar__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 var(--spacing-1) 22px;
    padding-left: var(--spacing-3);
    border-left: 1px solid var(--color-divider);
}

.g-sidebar__sublink {
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-radius: var(--radius-pill);
}

.g-sidebar__sublink:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }
.g-sidebar__sublink.is-active { color: var(--color-text-primary); font-weight: var(--font-weight-medium); background: var(--color-surface-sunken); }

.g-sidebar__footer { margin-top: auto; padding-top: var(--spacing-3); border-top: 1px solid var(--color-divider); }

.g-sidebar.is-collapsed { width: var(--sidebar-width-collapsed); }
.g-sidebar.is-collapsed .g-sidebar__label,
.g-sidebar.is-collapsed .g-sidebar__chevron,
.g-sidebar.is-collapsed .g-sidebar__group-title,
.g-sidebar.is-collapsed .g-sidebar__sub,
.g-sidebar.is-collapsed .g-sidebar__brand-text,
.g-sidebar.is-collapsed .g-sidebar__link .g-counter { display: none; }
.g-sidebar.is-collapsed .g-sidebar__link { justify-content: center; padding: 0; }
.g-sidebar.is-collapsed .g-sidebar__top { flex-direction: column; }
.g-sidebar.is-collapsed .g-account { justify-content: center; padding: 4px; }
.g-sidebar.is-collapsed .g-account__text,
.g-sidebar.is-collapsed .g-account > .bi { display: none; }

/* Drawer (offcanvas) */
.offcanvas.g-drawer {
    --bs-offcanvas-width: 300px;
    --bs-offcanvas-bg: var(--color-surface);
    --bs-offcanvas-color: var(--color-text-primary);
    --bs-offcanvas-border-width: 0;
    --bs-offcanvas-zindex: var(--z-drawer);
}

.offcanvas.g-drawer .g-sidebar { width: 100%; height: 100%; border-radius: 0; }

.offcanvas.g-drawer--floating {
    top: var(--spacing-3);
    bottom: var(--spacing-3);
    height: auto;
    border-radius: var(--radius-xl);
}

.offcanvas-start.g-drawer--floating { left: var(--spacing-3); }
.offcanvas-end.g-drawer--floating { right: var(--spacing-3); }

.g-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-5) var(--spacing-2);
}

.g-drawer__body { flex: 1; overflow-y: auto; padding: var(--spacing-3) var(--spacing-5); }
.g-drawer__footer { display: flex; gap: var(--spacing-2); padding: var(--spacing-4) var(--spacing-5); border-top: 1px solid var(--color-divider); }
.g-drawer__footer .g-btn { flex: 1; }

.offcanvas-backdrop { --bs-backdrop-bg: var(--color-black); --bs-backdrop-opacity: .32; }

/* ---------- Layout primitives ---------- */
.g-topbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    min-height: 60px;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-surface);
    border-radius: var(--radius-pill);
}

.g-topbar--sticky { position: sticky; top: 0; z-index: var(--z-sticky); box-shadow: var(--shadow-sm); }

.g-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.g-page-header__title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-regular); }
.g-page-header__desc { margin-top: var(--spacing-2); max-width: 560px; font-size: var(--font-size-md); color: var(--color-text-secondary); }
.g-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }

.g-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
}

.g-layout { display: grid; gap: var(--layout-gutter); }
.g-layout--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-layout--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-layout--split { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.g-layout--split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

.g-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-5) var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-divider);
}

.g-footer__links { display: flex; gap: var(--spacing-5); }
.g-footer__links a:hover { color: var(--color-text-primary); }

.g-scroll {
    max-height: var(--g-scroll-height, 200px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-300) transparent;
}

.g-scroll--x { max-height: none; overflow-y: hidden; white-space: nowrap; }

.g-divider {
    height: 1px;
    margin: var(--spacing-4) 0;
    background: var(--color-divider);
    border: 0;
    opacity: 1;
}

.g-divider--dashed { height: 0; background: none; border-top: 1px dashed var(--color-border-strong); }

.g-divider--vertical {
    display: inline-block;
    width: 1px;
    height: 24px;
    margin: 0 var(--spacing-2);
    vertical-align: middle;
}

.g-divider--label {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    height: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background: none;
}

.g-divider--label::before,
.g-divider--label::after { content: ""; flex: 1; height: 1px; background: var(--color-divider); }

.g-spacer { flex: 1 1 auto; }

/* ---------- Navigation extras ---------- */
.g-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.g-back .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-surface-sunken);
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.g-back:hover { color: var(--color-text-primary); }
.g-back:hover .bi { transform: translateX(-2px); }

.g-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
}

.g-prevnext__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-4);
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
}

.g-prevnext__link:hover { background: var(--color-surface-sunken); }
.g-prevnext__link--next { text-align: right; }
.g-prevnext__dir { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.g-prevnext__title { font-weight: var(--font-weight-medium); }

.g-anchor-nav {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--color-divider);
}

.g-anchor-nav a {
    display: block;
    margin-left: -1px;
    padding: 6px var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-left: 2px solid transparent;
}

.g-anchor-nav a:hover { color: var(--color-text-primary); }
.g-anchor-nav a.is-active { color: var(--color-text-primary); font-weight: var(--font-weight-medium); border-left-color: var(--color-primary); }

.g-wizard { display: flex; flex-direction: column; gap: var(--spacing-6); }
.g-wizard__pane { display: none; animation: g-pop var(--duration-base) var(--ease-emphasized); }
.g-wizard__pane.is-active { display: block; }
.g-wizard__actions { display: flex; justify-content: space-between; gap: var(--spacing-2); }

/* Context menu */
.g-context-menu {
    position: fixed;
    z-index: var(--z-popover);
    display: none;
}

.g-context-menu.show { display: block; }

.g-context-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface-muted);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    user-select: none;
}

.dropdown-item kbd,
.dropdown-item .g-kbd { margin-left: auto; }

/* ---------- Popover (Bootstrap) ---------- */
.popover {
    --bs-popover-bg: var(--color-surface);
    --bs-popover-border-width: 0;
    --bs-popover-border-radius: var(--radius-lg);
    --bs-popover-inner-border-radius: var(--radius-lg);
    --bs-popover-box-shadow: var(--shadow-md);
    --bs-popover-header-bg: transparent;
    --bs-popover-header-color: var(--color-text-primary);
    --bs-popover-header-padding-x: var(--spacing-4);
    --bs-popover-header-padding-y: var(--spacing-3);
    --bs-popover-body-color: var(--color-text-secondary);
    --bs-popover-body-padding-x: var(--spacing-4);
    --bs-popover-body-padding-y: var(--spacing-3);
    --bs-popover-font-size: var(--font-size-sm);
    --bs-popover-zindex: var(--z-popover);
    font-family: var(--font-family-base);
    box-shadow: var(--bs-popover-box-shadow);
}

.popover-header { font-weight: var(--font-weight-semibold); border-bottom: 1px solid var(--color-divider); }

/* ---------- Modals: fullscreen / lightbox / alert ---------- */
.modal-fullscreen .modal-content { border-radius: 0; }
.modal-fullscreen .modal-header { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--spacing-4); }

.modal-content {
    color: var(--color-text-primary);
}

.g-lightbox .modal-content {
    background: transparent;
    box-shadow: none;
}

.g-lightbox__img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    background: var(--color-surface-dark);
    border-radius: var(--radius-xl);
}

.g-lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-1);
    color: #fff;
}

.g-lightbox__bar .g-btn { --g-btn-bg: rgba(255, 255, 255, .12); --g-btn-color: #fff; --g-btn-hover-bg: rgba(255, 255, 255, .24); }

.g-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-2);
}

.g-gallery button { padding: 0; border: 0; background: none; border-radius: var(--radius-md); overflow: hidden; cursor: zoom-in; }
.g-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition-slow); }
.g-gallery button:hover img { transform: scale(1.05); }

.g-backdrop-demo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    overflow: hidden;
    background: var(--color-background);
    border-radius: var(--radius-lg);
}

.g-backdrop-demo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-backdrop);
    backdrop-filter: blur(1px);
}

.g-backdrop-demo > * { position: relative; }

/* ---------- Command palette ---------- */
.g-cmdk .modal-dialog { --bs-modal-width: 560px; margin-top: 12vh; }
.g-cmdk .modal-content { overflow: hidden; }

.g-cmdk__search {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-divider);
}

.g-cmdk__search .bi { font-size: var(--icon-size-lg); color: var(--color-text-secondary); }

.g-cmdk__input {
    flex: 1;
    font: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: transparent;
    border: 0;
    outline: none;
}

.g-cmdk__list {
    max-height: 360px;
    margin: 0;
    padding: var(--spacing-2);
    overflow-y: auto;
    list-style: none;
}

.g-cmdk__group {
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-1);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.g-cmdk__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-md);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.g-cmdk__item .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-surface-sunken);
    border-radius: 50%;
}

.g-cmdk__item.is-active { background: var(--color-surface-muted); }
.g-cmdk__item.is-active .bi { background: var(--color-accent); color: var(--color-on-accent); }
.g-cmdk__item .g-kbd,
.g-cmdk__item .g-shortcut { margin-left: auto; }

.g-cmdk__foot {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-divider);
}

/* ---------- Account ---------- */
.g-account {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: 6px var(--spacing-3) 6px 6px;
    text-align: left;
    color: var(--color-text-primary);
    background: var(--color-surface-muted);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.g-account:hover { background: var(--color-surface-sunken); }
.g-account__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.g-account__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-account__meta { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-account > .bi { color: var(--color-text-secondary); }

.g-org-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-md);
}

.g-org-icon--accent { background: var(--color-accent); color: var(--color-on-accent); }
.g-org-icon--muted { background: var(--color-gray-200); color: var(--color-text-primary); }

.dropdown-item.is-current::after {
    content: "\F633";
    margin-left: auto;
    font-family: "bootstrap-icons";
    color: var(--color-success-text);
}

.g-permission {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
}

.g-permission .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 50%;
}

.g-permission.is-allowed .bi { background: var(--color-success-bg); color: var(--color-success-text); }
.g-permission.is-denied { color: var(--color-text-secondary); }
.g-permission.is-denied .bi { background: var(--color-surface-sunken); color: var(--color-text-secondary); }

/* ---------- Utilities ---------- */
.g-kbd,
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    box-shadow: none;
}

.g-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.g-external::after {
    content: "\F1C5";
    display: inline-block;
    margin-left: 4px;
    font-family: "bootstrap-icons";
    font-size: .75em;
    vertical-align: 1px;
}

.g-link {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

.g-link:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }
.g-link--plain { text-decoration: none; font-weight: var(--font-weight-medium); }
.g-link--accent { text-decoration-color: var(--color-accent-strong); text-decoration-thickness: 2px; }

.g-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    color: var(--color-text-muted);
    background: none;
    border: 0;
    border-radius: var(--radius-xs);
    cursor: grab;
}

.g-drag-handle:hover { color: var(--color-text-primary); background: var(--color-state-hover); }
.g-drag-handle:active { cursor: grabbing; }

.g-resizable {
    min-width: 180px;
    min-height: 100px;
    max-width: 100%;
    padding: var(--spacing-4);
    overflow: auto;
    resize: both;
    background: var(--color-surface-muted);
    border-radius: var(--radius-lg);
}

.g-back-to-top {
    position: fixed;
    right: var(--spacing-6);
    bottom: var(--spacing-6);
    z-index: var(--z-fab);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.g-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.text-success-ds { color: var(--color-success-text) !important; }
.text-danger-ds { color: var(--color-danger) !important; }
.text-overline {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.text-mono { font-family: var(--font-family-mono); font-size: .92em; }
.text-numeric { font-variant-numeric: tabular-nums; letter-spacing: var(--letter-spacing-tight); }

.g-text-icon { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.g-text-icon .bi { color: var(--color-text-secondary); }

/* ---------- Theme switcher ---------- */
.g-theme-switch .g-segmented__item { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Responsive device previews ---------- */
.g-device {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.g-device__frame {
    position: relative;
    overflow: hidden;
    background: var(--color-background);
    border: 6px solid var(--color-surface-dark);
    border-radius: var(--radius-lg);
}

.g-device__frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.g-device__label { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ---------- Dark theme fixes for embedded SVG glyphs ---------- */
:root[data-theme="dark"] .g-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23f2f2f2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .form-check-input:indeterminate[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .g-avatar--mono img { filter: grayscale(1) brightness(.9); }
:root[data-theme="dark"] .g-list-item__icon--dark img,
:root[data-theme="dark"] .g-notif__icon--dark img { filter: invert(1); }

@media (max-width: 991.98px) {
    .g-layout--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-layout--split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .g-layout--2,
    .g-layout--3,
    .g-layout--split-even { grid-template-columns: minmax(0, 1fr); }
    .g-prevnext { grid-template-columns: minmax(0, 1fr); }
    .g-fab { right: var(--spacing-4); bottom: calc(var(--layout-header-height) + var(--spacing-4)); }
    .g-back-to-top { bottom: calc(var(--layout-header-height) + var(--spacing-4)); }
    .modal-dialog.g-modal-sheet-sm { margin: 0; max-width: none; min-height: 100%; align-items: flex-end; }
    .modal-dialog.g-modal-sheet-sm .modal-content { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}