/* =========================================================
   CodShot Theme Tokens + Bootstrap Overrides
   ========================================================= */
:root {
    /* -----------------------------------------------------
       Global
    ----------------------------------------------------- */
    --bs-border-radius-sm: 0.7rem;
    --bs-border-radius: 0.8rem;
    --bs-border-radius-lg: 1rem;

    --bs-muted-color: #6c757d;

    --cs-set-item-color-red: #ea5582;
    --cs-set-item-color-green: #36dc8e;
    --cs-set-item-color-blue: #0d6efd;
    --cs-set-item-color-yellow: #ffc107;
    --cs-set-item-color-purple: #9f72f2;
    --cs-set-item-color-cyan: #0dcaf0;
    --cs-set-item-color-gray: #a4afb8;

    --cs-item-color-red: #dc354530;
    --cs-item-color-green: #19875430;
    --cs-item-color-blue: #0d6dfd30;
    --cs-item-color-yellow: #ffc10730;
    --cs-item-color-purple: #6f42c130;
    --cs-item-color-cyan: #0dcaf030;
    --cs-item-color-gray: #6c757d30;

    --cs-bg-soft-grey: #7e7e7e10;
    --cs-bg-soft-grey-25: #7e7e7e25;

    --cs-hero-bg-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --cs-hero-bg-dark: linear-gradient(135deg, #1f2328 0%, #111418 100%);

    --cs-gradient-primary: linear-gradient(135deg, #9845e3 0%, #e24d70 54%, #ff9b2f 100%);
    --cs-gradient-primary-hover: linear-gradient(135deg, #8a35d8 0%, #d93d63 54%, #f78a1d 100%);
    --cs-gradient-progress: linear-gradient(90deg, #9845e3 0%, #e24d70 54%, #ff9b2f 100%);

    --cs-primary-glow: rgba(226, 77, 112, 0.32);
    --cs-primary-glow-strong: rgba(226, 77, 112, 0.46);
    --cs-primary-soft-bg: rgba(152, 69, 227, 0.14);
    --cs-primary-soft-color: #d889e8;

    --cs-gradient-red: linear-gradient(135deg, #ff92c7 0%, #fd0d81 100%);
    --cs-gradient-green: linear-gradient(135deg, #b3ffd4 0%, #36cc77 100%);
    --cs-gradient-blue: linear-gradient(135deg, #99c2ff 0%, #0d6efd 100%);
    --cs-gradient-yellow: linear-gradient(135deg, #ffe990 0%, #fdcd0d 100%);
    --cs-gradient-purple: linear-gradient(135deg, #cd98ff 0%, #a855f7 100%);
    --cs-gradient-cyan: linear-gradient(135deg, #99ffff 0%, #10cbcb 100%);
    --cs-gradient-grey: linear-gradient(135deg, #c4c4c444 0%, #7474740d 100%);

}

/* =========================================================
   1) LIGHT THEME TOKENS
   ========================================================= */
:root,
[data-bs-theme="light"] {
    /* -----------------------------------------------------
       Brand
    ----------------------------------------------------- */
    --cs-primary: #0d99fd;
    --cs-primary-rgb: 13, 110, 253;
    --cs-primary-hover: #0b5ed7;
    --cs-primary-active: #0a58ca;

    --cs-secondary: #6c757d;
    --cs-success: #198754;
    --cs-info: #0dcaf0;
    --cs-warning: #ffc107;
    --cs-danger: #dc3545;

    /* -----------------------------------------------------
       Surfaces / backgrounds
    ----------------------------------------------------- */
    --cs-bg: #f8f9fa;
    --cs-bg-rgb: 248, 249, 250;

    --cs-surface: #ffffff;
    --cs-surface-2: #f1f3f5;
    --cs-surface-3: #e9ecef;

    /* -----------------------------------------------------
       Typography
    ----------------------------------------------------- */
    --cs-text: #212529;
    --cs-text-muted: #6c757d;
    --cs-heading: #111827;
    --cs-btn-color: #ffffff;

    /* -----------------------------------------------------
       Borders / lines
    ----------------------------------------------------- */
    --cs-border: #dee2e6;
    --cs-border-strong: #ced4da;

    /* -----------------------------------------------------
       Links
    ----------------------------------------------------- */
    --cs-link: #0d6efd;
    --cs-link-hover: #0a58ca;

    /* -----------------------------------------------------
       Shadows
    ----------------------------------------------------- */
    --cs-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
    --cs-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);

    /* -----------------------------------------------------
       Bootstrap variable overrides
    ----------------------------------------------------- */
    --bs-primary: var(--cs-primary);
    --bs-primary-rgb: var(--cs-primary-rgb);
    --bs-secondary: var(--cs-secondary);
    --bs-success: var(--cs-success);
    --bs-info: var(--cs-info);
    --bs-warning: var(--cs-warning);
    --bs-danger: var(--cs-danger);

    --bs-body-bg: var(--cs-bg);
    --bs-body-bg-rgb: var(--cs-bg-rgb);
    --bs-body-color: var(--cs-text);

    --bs-heading-color: var(--cs-heading);

    --bs-border-color: var(--cs-border);
    --bs-secondary-color: var(--cs-text-muted);
    --bs-secondary-bg: var(--cs-surface-2);
    --bs-tertiary-bg: var(--cs-surface-3);

    --bs-card-bg: var(--cs-surface);
    --bs-card-border-color: var(--cs-border);

    --bs-link-color: var(--cs-link);
    --bs-link-hover-color: var(--cs-link-hover);

    --bs-emphasis-color: var(--cs-heading);

    --cs-bg-inverted: #212529;
    --cs-color-inverted: #f8f9fa;

    --bs-bw-color: #000000;
    --cs-tooltip-bg: #000;
    --cs-tooltip-color: #CCC;

    --scrollbar-track: #f1f3f5;
    --scrollbar-thumb: #d4dadf;
    --scrollbar-thumb-hover: #cbd0d5;

}


/* =========================================================
   2) DARK THEME TOKENS
   ========================================================= */
[data-bs-theme="dark"] {
    /* -----------------------------------------------------
       Brand
    ----------------------------------------------------- */
    --cs-primary: #6ea8fe;
    --cs-primary-rgb: 110, 168, 254;
    --cs-primary-hover: #8bb9fe;
    --cs-primary-active: #9ec5fe;

    --cs-secondary: #adb5bd;
    --cs-success: #75b798;
    --cs-info: #6edff6;
    --cs-warning: #ffda6a;
    --cs-danger: #ea868f;

    /* -----------------------------------------------------
       Surfaces / backgrounds
    ----------------------------------------------------- */
    --cs-bg: #08080a;
    --cs-bg-rgb: 8, 8, 10;

    --cs-surface: #0f1113;
    --cs-surface-2: #1c1f24;
    --cs-surface-3: #23272f;

    /* -----------------------------------------------------
       Typography
    ----------------------------------------------------- */
    --cs-text: #e9ecef;
    --cs-text-muted: #adb5bd;
    --cs-heading: #ffffff;
    --cs-btn-color: #212529;

    /* -----------------------------------------------------
       Borders / lines
    ----------------------------------------------------- */
    --cs-border: #2b3035;
    --cs-border-strong: #3a4148;

    /* -----------------------------------------------------
       Links
    ----------------------------------------------------- */
    --cs-link: #6ea8fe;
    --cs-link-hover: #9ec5fe;

    /* -----------------------------------------------------
       Shadows
    ----------------------------------------------------- */
    --cs-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
    --cs-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);

    /* -----------------------------------------------------
       Bootstrap variable overrides
    ----------------------------------------------------- */
    --bs-primary: var(--cs-primary);
    --bs-primary-rgb: var(--cs-primary-rgb);
    --bs-secondary: var(--cs-secondary);
    --bs-success: var(--cs-success);
    --bs-info: var(--cs-info);
    --bs-warning: var(--cs-warning);
    --bs-danger: var(--cs-danger);

    --bs-body-bg: var(--cs-bg);
    --bs-body-bg-rgb: var(--cs-bg-rgb);
    --bs-body-color: var(--cs-text);

    --bs-heading-color: var(--cs-heading);

    --bs-border-color: var(--cs-border);
    --bs-secondary-color: var(--cs-text-muted);
    --bs-secondary-bg: var(--cs-surface-2);
    --bs-tertiary-bg: var(--cs-surface-3);

    --bs-card-bg: var(--cs-surface);
    --bs-card-border-color: var(--cs-border);

    --bs-link-color: var(--cs-link);
    --bs-link-hover-color: var(--cs-link-hover);

    --bs-emphasis-color: var(--cs-heading);

    --cs-bg-inverted: #e9ecef;
    --cs-color-inverted: #212529;

    --bs-bw-color: #FFFFFF;
    
    --cs-tooltip-bg: #272727;
    --cs-tooltip-color: #BBB;

    --cs-gradient-grey: linear-gradient(135deg, #c4c4c4b8 0%, #747474a6 100%);

    --scrollbar-track: #212529;
    --scrollbar-thumb: #3c4247;
    --scrollbar-thumb-hover: #5e646a;
}


/* =========================================================
   3) GLOBAL ELEMENT TUNING
   ========================================================= */
html,
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

body {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

a {
    transition: color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--bs-heading-color);
}

p {
    color: var(--bs-secondary-color) !important;
}

.body-bg {
    background-color: var(--bs-body-bg) !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item,
.offcanvas,
.popover,
.tooltip-inner {
    border-color: var(--bs-border-color);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.accordion-item {
    background-color: var(--cs-surface);
}

.navbar,
.table,
.form-control,
.form-select,
.input-group-text {
    border-color: var(--bs-border-color);
}

.form-control,
.form-select,
.input-group-text {
    background-color: var(--cs-surface);
    color: var(--bs-body-color);
}

.form-control::placeholder {
    color: var(--cs-text-muted);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.18);
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;

    background: var(--cs-gradient-primary);
    border: 0;
    color: #ffffff;
    box-shadow: 0 0.35rem 1.15rem var(--cs-primary-glow);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--cs-gradient-primary-hover);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0.55rem 1.65rem var(--cs-primary-glow-strong);
    filter: saturate(1.05);
}

.progress-bar {
    background: var(--cs-gradient-progress);
}

.cs-soft-primary {
    background: var(--cs-primary-soft-bg);
    color: var(--cs-primary-soft-color);
}

.btn-outline-primary {
    --bs-btn-color: var(--cs-primary);
    --bs-btn-border-color: var(--cs-primary);
    --bs-btn-hover-bg: var(--cs-primary);
    --bs-btn-hover-border-color: var(--cs-primary);
    --bs-btn-active-bg: var(--cs-primary-active);
    --bs-btn-active-border-color: var(--cs-primary-active);
}

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

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

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
}

hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

.badge {
    --bs-badge-color: none;
}

/* =========================================================
   ITEM COLORS
   ========================================================= */

.item-color-red {
    color: var(--cs-set-item-color-red) !important;
}

.item-color-green {
    color: var(--cs-set-item-color-green) !important;
}

.item-color-blue {
    color: var(--cs-set-item-color-blue) !important;
}

.item-color-yellow {
    color: var(--cs-set-item-color-yellow) !important;
}

.item-color-purple {
    color: var(--cs-set-item-color-purple) !important;
}

.item-color-cyan {
    color: var(--cs-set-item-color-cyan) !important;
}

.item-color- {
    color: var(--cs-set-item-color-gray) !important;
}

/**************************************************************/

.item-bg-color-red {
    background: var(--cs-item-color-red) !important;
}

.item-bg-color-green {
    background: var(--cs-item-color-green) !important;
}

.item-bg-color-blue {
    background: var(--cs-item-color-blue) !important;
}

.item-bg-color-yellow {
    background: var(--cs-item-color-yellow) !important;
}

.item-bg-color-purple {
    background: var(--cs-item-color-purple) !important;
}

.item-bg-color-cyan {
    background: var(--cs-item-color-cyan) !important;
}

.item-bg-color-default {
    background: var(--cs-bg-soft-grey) !important;
}

.item-bg-color- {
    background: var(--cs-bg-soft-grey) !important;
}

/*******************/

.item-bg-color-100-red {
    background: var(--cs-set-item-color-red) !important;
}

.item-bg-color-100-green {
    background: var(--cs-set-item-color-green) !important;
}

.item-bg-color-100-blue {
    background: var(--cs-set-item-color-blue) !important;
}

.item-bg-color-100-yellow {
    background: var(--cs-set-item-color-yellow) !important;
}

.item-bg-color-100-purple {
    background: var(--cs-set-item-color-purple) !important;
}

.item-bg-color-100-cyan {
    background: var(--cs-set-item-color-cyan) !important;
}

.item-bg-color-100-default {
    background: var(--cs-bg-soft-grey) !important;
}

/*****************************/

.item-bg-gradient-red {
  background: var(--cs-gradient-red);
}
.item-bg-gradient-green {
  background: var(--cs-gradient-green);
}
.item-bg-gradient-blue {
  background: var(--cs-gradient-blue);
}
.item-bg-gradient-yellow {
  background: var(--cs-gradient-yellow);
}
.item-bg-gradient-purple {
  background: var(--cs-gradient-purple);
}
.item-bg-gradient-cyan {
  background: var(--cs-gradient-cyan);
}
.item-bg-gradient- {
  background: var(--cs-gradient-grey);
}


/* =========================================================
   4) SMALL UTILITY CLASSES
   ========================================================= */
.cs-bg-soft-grey {
    background-color: var(--cs-bg-soft-grey) !important;
}

.cs-bg-soft-grey-25 {
    background-color: var(--cs-bg-soft-grey-25) !important;
}

.cs-surface {
    background-color: var(--cs-surface) !important;
}

.cs-surface-2 {
    background-color: var(--cs-surface-2) !important;
}

.cs-surface-3 {
    background-color: var(--cs-surface-3) !important;
}

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

.cs-muted-color {
    color: var(--bs-muted-color) !important;
}

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

.cs-shadow-sm {
    box-shadow: var(--cs-shadow-sm) !important;
}

.cs-shadow {
    box-shadow: var(--cs-shadow) !important;
}

.text-sm {
    font-size: 0.875em !important;
}

.bg-inverted {
    background-color: var(--cs-bg-inverted) !important;
}

.tooltip {
  --bs-tooltip-bg: var(--cs-tooltip-bg);
  --bs-tooltip-color: var(--cs-tooltip-color);
}

/********************COLORS-END*********************/

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
    flex: 1;
    display: flex;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 800;
}

.color-primary {
  color: var(--cs-brand-primary) !important;
}

.cs-hero {
  background: var(--cs-hero-bg-light);
  border-radius: 1.5rem;
}

[data-bs-theme="dark"] .cs-hero {
  background: var(--cs-hero-bg-dark);
}

.cs-feature-card {
  height: 100%;
  border-radius: 1rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cs-feature-card:hover {
  transform: translateY(-3px);
}

.cs-theme-btn {
  min-width: 44px;
}

/******************************************/

.custom-tooltip {
  --bs-tooltip-bg: var(--bd-violet-bg);
  --bs-tooltip-color: var(--bs-white);
}

.text-md {
    font-size: 1rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.min-w-280 {
    min-width: 280px;
}

.min-w-300 {
    min-width: 300px;
}

.min-w-10percent {
    min-width: 10%;
}

.min-w-15percent {
    min-width: 15%;
}

.max-w-280 {
    max-width: 280px;
}

.lg-w-300 {
    width: 100%;
}

@media (min-width: 992px) {
  .lg-w-300 {
    width: 300px;
  }
}

.lg-w-400 {
    width: 100%;
}

@media (min-width: 992px) {
  .lg-w-400 {
    width: 400px;
  }
}

.items-panel-close-icon {
    position: absolute;
    top: -0.4rem;
    right: -0.3rem;
    font-size: 1rem;
    cursor: pointer;
    color: var(--bs-body-secondary-color);
    opacity: 0.7;
    transition: opacity 0.15s ease;
}



/******************************************/

.avatar {
    --x-avatar-size: 2.75rem;
    --x-avatar-border-radius: 0.75rem;
    --x-avatar-font-size: 1rem;
    --x-avatar-font-weight: 600;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-weight: var(--x-avatar-font-weight);
    height: var(--x-avatar-size);
    width: var(--x-avatar-size);
    overflow: clip;
    font-size: var(--x-avatar-font-size);
    border-radius: var(--x-avatar-border-radius);
}

img, video {
    max-width: 100%;
    height: auto;
}

img, svg {
    vertical-align: middle;
}

/*******************SCROLLBAR*****************/

/* Chrome, Edge, újabb Safari */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track);
}

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

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/********************************************/

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

.dropdown-toggle { outline: 0; }

.btn-toggle {
  width: 100%;
  padding: .25rem .5rem;
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
  background-color: var(--bs-tertiary-bg);
}

.btn-toggle::after {
  margin-left: auto;
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

[data-bs-theme="dark"] .btn-toggle::after {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(var(--bs-emphasis-color-rgb), .85);
}
.btn-toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.btn-toggle-nav a {
  font-size: 0.9rem;
  padding: .1875rem .5rem;
  margin-top: .125rem;
}

.admin-nav a {
  margin-left: 2rem;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus, .btn-toggle-nav a.active {
  background-color: var(--bs-tertiary-bg);
}

/*.nav-pills .nav-link.active, .nav-pills .show>.nav-link
 {
    background-color: var(--cs-bg-soft-grey);
}*/

/***********************************************/

/* Navbar avatar */

[data-bs-theme="dark"] .avatar-img{
    border: 2px solid rgba(255,255,255,0.08);
}

.avatar-wrapper{
    position: relative;
    width: 36px;
    height: 36px;
}

.avatar-img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform .15s ease, box-shadow .15s ease;
}

.avatar-wrapper:hover .avatar-img{
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* online status dot */

.avatar-status{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    /*border: 2px solid white;*/
    border-radius: 50%;
}

/***********************************************/

.icon-sm {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-md {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cursor-pointer {
    cursor: pointer;
}

.dropdown-menu.show {
    display: block;
    padding: 8px;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
    border-radius: 8px;
}

.ws-block-icon-block {
    position: absolute;
    top: -1.2rem;
    left: 1rem;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.ws-block-icon-block i {
    font-size: 1.25rem;
}

.ws-block-icon-number {
    position: absolute;
    top: -10px;
    left: 20px;
    background-color: var(--cs-bg-inverted);
    color: var(--cs-color-inverted) !important;
    border-radius: 1rem;
    padding: 0.05rem 0.18rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bs-body-secondary-color);
}

/***********************************************/

.cs-account-sidebar {
  position: relative;
  width:220px;
}

.cs-account-sidebar-inner {
  position: relative;
}

.cs-account-nav-link {
  color: var(--bs-muted-color);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.cs-account-nav-link:hover,
.cs-account-nav-link:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  text-decoration: none;
  transform: translateX(2px);
}

.cs-account-nav-link.active {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-bw-color);
  transform: translateX(2px);
}

@media (min-width: 992px) {
  .cs-account-sidebar-inner {
    position: sticky;
    top: 4.5rem;
  }
}

/***********************************************/

/***********************************************/
/* Admin sidebar desktop toggle */
/***********************************************/

.cs-admin-sidebar-shell {
  width: 220px;
  min-width: 220px;
  flex: 0 0 220px;
  overflow: hidden;
  transition:
    width 0.25s ease,
    min-width 0.25s ease,
    flex-basis 0.25s ease,
    opacity 0.2s ease,
    transform 0.25s ease;
}

#sidebarToggleIcon {
  display: inline-block;
  transition: transform 0.25s ease;
}

.admin-layout {
  transition: gap 0.25s ease;
}

@media (min-width: 1200px) {
  html.sidebar-hidden .cs-admin-sidebar-shell {
    width: 0;
    min-width: 0;
    flex-basis: 0;
    opacity: 0;
    transform: translateX(-16px);
    pointer-events: none;
  }

  html.sidebar-hidden .admin-layout {
    gap: 0 !important;
  }

  html.sidebar-hidden #sidebarToggleIcon {
    transform: rotate(180deg);
  }
}

/***********************************************/
/* Admin clients */
/***********************************************/

.cs-client-avatar-wrapper {
  width: 44px;
  height: 44px;
}

.cs-client-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .cs-client-avatar {
  border-color: rgba(255, 255, 255, 0.08);
}

.avatar-status.is-online {
  background: #22c55e;
  box-shadow: 0 0 0 3px var(--bs-body-bg);
}

.avatar-status.is-offline {
  background: #94a3b8;
  box-shadow: 0 0 0 3px var(--bs-body-bg);
}

/***********************************************/
/* Toast / snackbar */
/***********************************************/

.cs-toast-stack {
  position: fixed;
  top: 1rem; /* ← ez volt a fő gond */
  right: 1rem;
  z-index: 5000; /* ← navbar fölé */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(420px, calc(100vw - 2rem));
}

.cs-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  border: 1px solid transparent;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);

  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.cs-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cs-toast--success {
  border-color: rgba(25, 135, 84, 1);
  background: rgba(25, 135, 84, 1);
}

.cs-toast--danger {
  border-color: rgba(220, 53, 69, 1);
  background: rgba(220, 53, 69, 1);
}

.cs-toast__icon {
  flex: 0 0 auto;
  font-size: 1.125rem;
  line-height: 1;
  margin-top: 0.1rem;
}

.cs-toast__body {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.cs-toast__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  padding: 0;
  line-height: 1;
}

.cs-toast__close:hover {
  opacity: 1;
}

@media (max-width: 575.98px) {
  .cs-toast-stack {
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

/***********************************************/
/* Clients table loading + swap animation */
/***********************************************/

/* clients table loading */

.cs-table-loading {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.cs-table-loading.is-visible {
  opacity: 1;
}

.cs-table-loading__spinner {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  font-size: .85rem;
}

[data-bs-theme="dark"] .cs-table-loading__spinner {
  background: rgba(33,37,41,.9);
  border-color: rgba(255,255,255,.08);
}

/***********************************************/
/* Account devices */
/***********************************************/

.cs-device-card {
  padding: 1.25rem;
  border-radius: 1rem;
  background: var(--bs-body-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .cs-device-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.cs-device-card--current {
  border-color: rgba(var(--bs-primary-rgb), 0.25);
  background: rgba(var(--bs-primary-rgb), 0.04);
}

[data-bs-theme="dark"] .cs-device-card--current {
  background: rgba(var(--bs-primary-rgb), 0.10);
  border-color: rgba(var(--bs-primary-rgb), 0.30);
}

.cs-device-session-row + .cs-device-session-row {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .cs-device-session-row + .cs-device-session-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/***********************************************/
/* Admin session cleanup diagnostics */
/***********************************************/

.cs-admin-diagnostic-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  background: var(--bs-body-tertiary-bg);
}

[data-bs-theme="dark"] .cs-admin-diagnostic-card {
  border-color: rgba(255, 255, 255, 0.08);
}

/***********************************************/
/* Workspace dashboard */
/***********************************************/

.cs-workspace-stat-card,
.cs-workspace-list-card {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}

.cs-workspace-item {
  /*padding: 0.875rem 1rem;*/
  border-radius: 1rem;
  background: var(--bs-tertiary-bg);
  /*border: 1px solid rgba(0, 0, 0, 0.04);*/
}

[data-bs-theme="dark"] .cs-workspace-item {
  border-color: rgba(255, 255, 255, 0.06);
}

.cs-workspace-stat-card .display-6 {
  line-height: 1;
}

.cs-workspace-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  min-height: 220px;
  resize: vertical;
}

.cs-workspace-item-link {
  z-index: 1;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.cs-workspace-item-link:hover,
.cs-workspace-item-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.cs-workspace-item-link:has(.dropdown-menu.show) {
  z-index: 1200;
}

.cs-workspace-item-link .dropdown-menu,
.cs-workspace-item-link .dropdown-menu.show {
  z-index: 1210;
}

.cs-workspace-item-link:hover,
.cs-workspace-item-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.cs-workspace-item-soft {
  min-height: 96px;
}

.cs-snippet-code-shell {
  /*background: #0d1117;*/
  overflow: auto;
}

.cs-snippet-code-pre {
  margin: 0;
  padding: 0.2rem 1.25rem 1rem 1.25rem;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre;
}

[data-bs-theme="dark"] .cs-workspace-item-link:hover,
[data-bs-theme="dark"] .cs-workspace-item-link:focus {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.28);
}

/***********************************************/
/* Workspace view switcher */
/***********************************************/

.cs-workspace-view-button {
  opacity: 0.72;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.cs-workspace-view-button.is-active {
  opacity: 1 !important;
  color: var(--bs-primary) !important;
  transform: scale(1.08);
}

/***********************************************/
/* Workspace list mode */
/***********************************************/

[data-workspace-view-list].is-workspace-list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
}

[data-workspace-view-list="snippets"].is-workspace-list-view .cs-workspace-view-variant--grid {
  display: none !important;
}

[data-workspace-view-list="snippets"].is-workspace-list-view .cs-workspace-view-variant--list {
  display: block !important;
}

[data-workspace-view-list="snippets"]:not(.is-workspace-list-view) .cs-workspace-view-variant--grid {
  display: block !important;
}

[data-workspace-view-list="snippets"]:not(.is-workspace-list-view) .cs-workspace-view-variant--list {
  display: none !important;
}

.cs-workspace-item--snippet-list {
  border-radius: 1rem;
  width: 100%;
  min-height: 40px;
}

.cs-workspace-item-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 40px;
}

.cs-workspace-item-list-main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto;
  gap: 0.75rem;
  align-items: center;
  color: inherit;
}

.cs-workspace-item-list-col {
  min-width: 0;
}

.cs-workspace-item-list-col--title {
  min-width: 0;
}

.cs-workspace-item-list-col--language,
.cs-workspace-item-list-col--tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cs-workspace-item-list-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

@media (max-width: 991.98px) {
  .cs-workspace-item-list-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .cs-workspace-item-list-col--language,
  .cs-workspace-item-list-col--tags {
    justify-content: flex-start;
  }

  .cs-workspace-item-list-row {
    align-items: flex-start;
  }
}

.cs-workspace-list-item {
  width: 100%;
  min-width: 0;
  overflow: visible;
  position: relative;
}

.cs-workspace-item-list-row {
  min-width: 0;
  overflow: visible;
}

.cs-workspace-item-list-main {
  min-width: 0;
}

.cs-workspace-item-list-col--title {
  min-width: 0;
  overflow: hidden;
}

.cs-workspace-item-list-col--title .text-truncate {
  display: block;
  max-width: 100%;
}

.cs-workspace-item-list-actions {
  position: relative;
  z-index: 3;
}

.cs-workspace-item-list-actions .dropdown-menu {
  z-index: 1085;
}

@media (max-width: 1200px) {
  .cs-workspace-item-list-col--tags {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .cs-workspace-item-list-col--language {
    display: none !important;
  }
}

/****************NEW***************************/

.cs-workspace-item--snippet-list,
.cs-workspace-item--collection-list,
.cs-workspace-item--project-list,
.cs-workspace-item--snippet-list *,
.cs-workspace-item--collection-list *,
.cs-workspace-item--project-list * {
    min-width: 0;
}

.cs-workspace-item--collection-list {
  border-radius: 1rem;
  width: 100%;
  min-height: 40px;
}

.cs-workspace-item--project-list {
  border-radius: 1rem;
  width: 100%;
  min-height: 40px;
}

.cs-workspace-list-card {
    width: 100%;
    min-width: 0;
}

.cs-workspace-list-main {
    min-width: 0;
    overflow: hidden;
}

.cs-workspace-list-title-wrap {
    min-width: 0;
    overflow: hidden;
}

.cs-workspace-list-title,
.cs-workspace-list-subtitle,
.cs-workspace-list-tags span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-workspace-list-tags {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.cs-workspace-card-type {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.cs-workspace-card-type .badge {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/***********************************************/
/* Workspace code preview / Prism */
/***********************************************/

:root {
  --cs-code-bg: #f8fafc;
  --cs-code-surface: #ffffff;
  --cs-code-border: rgba(15, 23, 42, 0.08);
  --cs-code-toolbar-bg: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.96) 100%);
  --cs-code-fg: #0f172a;
  --cs-code-muted: #64748b;
  --cs-code-gutter-bg: rgba(15, 23, 42, 0.035);
  --cs-code-gutter-border: rgba(15, 23, 42, 0.08);
  --cs-code-selection: rgba(59, 130, 246, 0.18);
  --cs-code-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] {
  --cs-code-bg: #0b1220;
  --cs-code-surface: #14161b;
  --cs-code-border: rgba(148, 163, 184, 0.16);
  --cs-code-toolbar-bg: linear-gradient(180deg, rgba(15,23,42,0.92) 0%, rgba(11,18,32,0.96) 100%);
  --cs-code-fg: #e2e8f0;
  --cs-code-muted: #94a3b8;
  --cs-code-gutter-bg: rgba(255, 255, 255, 0.03);
  --cs-code-gutter-border: rgba(148, 163, 184, 0.16);
  --cs-code-selection: rgba(96, 165, 250, 0.22);
  --cs-code-shadow: 0 22px 44px rgba(2, 6, 23, 0.42);
}

.cs-workspace-stat-card,
.cs-workspace-list-card {
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}

.cs-workspace-item {
  border-radius: 1rem;
  background: var(--cs-bg-soft-grey);
}

.cs-workspace-list-item {
  background: var(--cs-bg-soft-grey);
}

[data-bs-theme="dark"] .cs-workspace-item {
  border-color: rgba(255, 255, 255, 0.06);
}

.cs-workspace-stat-card .display-6 {
  line-height: 1;
}

.cs-workspace-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  min-height: 220px;
  resize: vertical;
}

.cs-workspace-item-link {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.cs-workspace-item-link:hover,
.cs-workspace-item-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.cs-workspace-item-soft {
  min-height: 96px;
}

.cs-snippet-code-card {
  overflow: hidden;
}

.cs-snippet-code-toolbar {
  /*background: var(--cs-code-toolbar-bg);
  border: 1px solid var(--cs-code-border);*/
}

.cs-snippet-copy-btn {
  min-width: 132px;
}

.cs-snippet-code-shell {
  background: var(--cs-surface);
  border-top: 0;
  /*border-left: 1px solid var(--cs-code-border);
  border-right: 1px solid var(--cs-code-border);
  border-bottom: 1px solid var(--cs-code-border);*/
  /*box-shadow: var(--cs-code-shadow);*/
  overflow: auto;
}

.cs-snippet-code-shell pre[class*="language-"],
.cs-snippet-code-shell code[class*="language-"] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.93rem;
  line-height: 1.7;
  text-shadow: none;
}

.cs-snippet-code-shell pre[class*="language-"] {
  margin: 0;
  padding: 0.2rem 1.25rem 1.35rem 1.25rem;
  background: transparent;
  color: var(--cs-code-fg);
  white-space: pre;
  overflow: visible;
}

.cs-snippet-code-shell code[class*="language-"] {
  color: var(--cs-code-fg);
  background: transparent;
}

.cs-snippet-code-shell pre[class*="language-"]::selection,
.cs-snippet-code-shell code[class*="language-"]::selection,
.cs-snippet-code-shell pre[class*="language-"] *::selection,
.cs-snippet-code-shell code[class*="language-"] *::selection {
  background: var(--cs-code-selection);
}

.cs-snippet-code-shell .line-numbers.line-numbers {
  padding-left: 4.25rem;
}

.cs-snippet-code-shell .line-numbers .line-numbers-rows {
  width: 3rem;
  border-right: 1px solid var(--cs-code-gutter-border);
  /*background: var(--cs-code-gutter-bg);*/
}

.cs-snippet-code-shell .line-numbers-rows > span:before {
  color: var(--cs-code-muted);
  padding-right: 0.75rem;
}

.cs-workspace-items-view--grid .cs-workspace-item,
.cs-workspace-items-view--grid .cs-workspace-list-item {
  width: 100%;
}

@media (min-width: 1200px) {
  .cs-workspace-items-view--grid .cs-workspace-item,
  .cs-workspace-items-view--grid .cs-workspace-list-item {
    width: calc(50% - 0.5rem);
  }
}

/* Light token colors */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #64748b;
}

.token.punctuation {
  color: #475569;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #dc2626;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #059669;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #0f766e;
  background: transparent;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #7c3aed;
}

.token.function,
.token.class-name {
  color: #2563eb;
}

.token.regex,
.token.important,
.token.variable {
  color: #d97706;
}

.token.important,
.token.bold {
  font-weight: 700;
}

.token.italic {
  font-style: italic;
}

/* Dark token colors */
[data-bs-theme="dark"] .token.comment,
[data-bs-theme="dark"] .token.prolog,
[data-bs-theme="dark"] .token.doctype,
[data-bs-theme="dark"] .token.cdata {
  color: #7c8aa5;
}

[data-bs-theme="dark"] .token.punctuation {
  color: #cbd5e1;
}

[data-bs-theme="dark"] .token.property,
[data-bs-theme="dark"] .token.tag,
[data-bs-theme="dark"] .token.boolean,
[data-bs-theme="dark"] .token.number,
[data-bs-theme="dark"] .token.constant,
[data-bs-theme="dark"] .token.symbol,
[data-bs-theme="dark"] .token.deleted {
  color: #f87171;
}

[data-bs-theme="dark"] .token.selector,
[data-bs-theme="dark"] .token.attr-name,
[data-bs-theme="dark"] .token.string,
[data-bs-theme="dark"] .token.char,
[data-bs-theme="dark"] .token.builtin,
[data-bs-theme="dark"] .token.inserted {
  color: #34d399;
}

[data-bs-theme="dark"] .token.operator,
[data-bs-theme="dark"] .token.entity,
[data-bs-theme="dark"] .token.url,
[data-bs-theme="dark"] .language-css .token.string,
[data-bs-theme="dark"] .style .token.string {
  color: #22d3ee;
}

[data-bs-theme="dark"] .token.atrule,
[data-bs-theme="dark"] .token.attr-value,
[data-bs-theme="dark"] .token.keyword {
  color: #c084fc;
}

[data-bs-theme="dark"] .token.function,
[data-bs-theme="dark"] .token.class-name {
  color: #60a5fa;
}

[data-bs-theme="dark"] .token.regex,
[data-bs-theme="dark"] .token.important,
[data-bs-theme="dark"] .token.variable {
  color: #fbbf24;
}

[data-bs-theme="dark"] .cs-workspace-item-link:hover,
[data-bs-theme="dark"] .cs-workspace-item-link:focus {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.28);
}

/*******************************************************/
/* Workspace responsive breadcrumb */
/*******************************************************/

.cs-workspace-page-header-main {
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 992px) {
    .cs-workspace-page-header-main {
        flex: 1 1 0;
    }
}

.cs-breadcrumb-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.cs-breadcrumb-wrap .breadcrumb {
    margin-bottom: 0;
    row-gap: .35rem;

    /* A breadcrumb mindig egy sorban maradjon. */
    flex-wrap: nowrap !important;

    min-width: 0;
    max-width: 100%;
}

.cs-breadcrumb-wrap .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    color: var(--bs-secondary-color);
}

/* A home és a hárompontos menü soha ne zsugorodjon össze. */
.cs-breadcrumb-wrap .cs-breadcrumb-home-item,
.cs-breadcrumb-wrap .cs-breadcrumb-overflow-item {
    flex: 0 0 auto;
}

/*
 * A szöveges elemek szükség esetén zsugorodhatnak.
 * A parent valamivel hamarabb rövidül, mint az aktuális elem.
 */
.cs-breadcrumb-wrap .breadcrumb-item:not(.cs-breadcrumb-home-item):not(.cs-breadcrumb-overflow-item) {
    flex: 0 2 auto;
}

.cs-breadcrumb-wrap .breadcrumb-item.active {
    flex-shrink: 1;
    color: var(--bs-body-color);
    font-weight: 500;
}

.cs-breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    opacity: .7;
}

.cs-breadcrumb-wrap .breadcrumb-item a {
    color: var(--bs-link-color);
}

/* Az anchor/span maga is zsugorodhasson. */
.cs-breadcrumb-wrap .breadcrumb-item > a,
.cs-breadcrumb-wrap .breadcrumb-item > span {
    min-width: 0;
    max-width: 100%;
}

/* Hosszú név: egy sor + … */
.cs-breadcrumb-wrap .cs-breadcrumb-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-breadcrumb-home-link {
    min-width: 1.25rem;
    justify-content: center;
}

.cs-breadcrumb-home-link i {
    font-size: 1rem;
    line-height: 1;
}

/* A hárompontos gomb maradjon stabil méretű. */
.cs-breadcrumb-overflow-toggle {
    min-width: 1.25rem;
    line-height: 1;
}

/*
 * Nagyon hosszú elrejtett ancestor név se tolja ki
 * a dropdownot a képernyőről.
 */
.cs-breadcrumb-overflow-item .dropdown-menu {
    max-width: min(28rem, calc(100vw - 2rem));
}

.cs-breadcrumb-overflow-item .dropdown-item,
.cs-breadcrumb-overflow-item .dropdown-item-text {
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
 * Tablet + mobil:
 * a közvetlen parent kisebb helyet kap,
 * az aktuális elem nagyobbat.
 */
@media (max-width: 991.98px) {

    .cs-breadcrumb-wrap .breadcrumb-item:not(.active):not(.cs-breadcrumb-home-item):not(.cs-breadcrumb-overflow-item) {
        flex: 1 1 0;
    }

    .cs-breadcrumb-wrap .breadcrumb-item.active {
        flex: 2 1 0;
    }

}

.cs-workspace-manage-main {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    max-width: 100%;
}

/********************************************************/

.cs-workspace-drag-handle {
    cursor: grab;
    line-height: 1;
}

.cs-workspace-drag-handle:active {
    cursor: grabbing;
}

.cs-workspace-draggable {
    touch-action: none;
}

.cs-workspace-drop-target {
    transition: box-shadow .18s ease, transform .18s ease, outline-color .18s ease;
    outline: 1px solid transparent;
}

.cs-workspace-drop-target.is-drop-active {
    outline-color: rgba(var(--bs-primary-rgb), 0.40);
}

.cs-workspace-drop-target.is-drop-hover {
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.90);
    transform: translateY(-1px);
}

.cs-workspace-item-stats {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: .78rem;
    line-height: 1.3;
}

html[data-bs-theme="dark"] .cs-workspace-drop-target.is-drop-hover {
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.28);
}

.cs-workspace-item.is-dragging {
    opacity: 0.88;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

.cs-workspace-drop-target.is-drop-hover {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.70);
    outline-offset: 2px;
}

/*******************************************************/
/* Workspace external file drop overlay                */
/*******************************************************/

.cs-workspace-external-drop-overlay {
    position: fixed;
    z-index: 3500;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(1rem, 4vw, 3rem);

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.82
        );

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition:
        opacity 140ms ease,
        visibility 140ms ease;
}


.cs-workspace-external-drop-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


.cs-workspace-external-drop-card {
    width: min(520px, 100%);

    padding: clamp(
        1.75rem,
        5vw,
        3rem
    );

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    border:
        2px dashed
        rgba(
            var(--bs-primary-rgb),
            0.78
        );

    border-radius: 1.5rem;

    background:
        rgba(
            var(--bs-primary-rgb),
            0.10
        );

    box-shadow:
        0 0 0 1px
        rgba(
            var(--bs-primary-rgb),
            0.08
        ),
        0 1.25rem 3.5rem
        rgba(0, 0, 0, 0.18);

    transform: translateY(8px) scale(0.985);

    transition:
        transform 160ms ease;
}


.cs-workspace-external-drop-overlay.is-visible
.cs-workspace-external-drop-card {
    transform:
        translateY(0)
        scale(1);
}


.cs-workspace-external-drop-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: 999px;

    background:
        rgba(
            var(--bs-primary-rgb),
            0.16
        );

    color: var(--bs-primary);

    font-size: 2.25rem;
    line-height: 1;
}


.cs-workspace-external-drop-title {
    margin-bottom: 0.4rem;

    color: var(--bs-emphasis-color);

    font-size: clamp(
        1.25rem,
        2vw,
        1.65rem
    );

    font-weight: 800;
}


.cs-workspace-external-drop-text {
    color: var(--bs-secondary-color);
}


.cs-workspace-external-drop-destination {
    margin-top: 1rem;

    padding: 0.45rem 0.8rem;

    border-radius: 999px;

    background:
        rgba(
            var(--bs-primary-rgb),
            0.12
        );

    color: var(--bs-body-color);

    font-size: 0.875rem;
}


.cs-workspace-external-drop-hint {
    margin-top: 0.8rem;

    color: var(--bs-secondary-color);

    font-size: 0.78rem;
}


@media (
    prefers-reduced-motion: reduce
) {
    .cs-workspace-external-drop-overlay,
    .cs-workspace-external-drop-card {
        transition: none;
    }
}

/*******************************************************/
/* Workspace external file drop denied state           */
/*******************************************************/

.cs-workspace-external-drop-card--denied {
    border-color:
        rgba(
            var(--cs-brand-danger-rgb),
            0.88
        );

    background:
        rgba(
            var(--cs-brand-danger-rgb),
            0.12
        );

    box-shadow:
        0 0 0 1px
        rgba(
            var(--cs-brand-danger-rgb),
            0.12
        ),
        0 0 2.5rem
        rgba(
            var(--cs-brand-danger-rgb),
            0.12
        ),
        0 1.25rem 3.5rem
        rgba(0, 0, 0, 0.22);
}


.cs-workspace-external-drop-icon--denied {
    background:
        rgba(
            var(--cs-brand-danger-rgb),
            0.16
        );

    color:
        var(--cs-brand-danger);

    box-shadow:
        0 0 1.6rem
        rgba(
            var(--cs-brand-danger-rgb),
            0.18
        );
}


.cs-workspace-external-drop-title--denied {
    color:
        var(--cs-brand-danger);
}


.cs-workspace-external-drop-text--denied {
    max-width: 34rem;

    color:
        var(--bs-emphasis-color);

    font-weight: 600;
    line-height: 1.55;
}

/*******************************************************/
/* Workspace code import modal                         */
/*******************************************************/

[data-workspace-code-import] .modal-content {
    border:
        1px solid
        rgba(
            var(--cs-brand-primary-rgb),
            0.72
        ) !important;

    box-shadow:
        0 0 0 1px
        rgba(
            var(--cs-brand-primary-rgb),
            0.10
        ),
        0 0 2rem
        rgba(
            var(--cs-brand-primary-rgb),
            0.12
        ),
        0 1.5rem 4rem
        rgba(0, 0, 0, 0.32) !important;
}

/***********************************************************/

/***********************************************/
/* Workspace multi-panel layout */
/***********************************************/

.cs-workspace-layout {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
}

.cs-workspace-panel {
    min-width: 0;
    flex: 1 1 0;
    min-height: 100%;
    transition:
        width 0.2s ease,
        min-width 0.2s ease,
        flex-basis 0.2s ease,
        opacity 0.16s ease;
}

.cs-workspace-panel-card {
    position: relative;
    height: 100%;
    min-height: 100%;
}

.cs-workspace-panel-inner {
    height: 100%;
    min-width: 0;
}

.cs-workspace-panel-rail-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.cs-workspace-panel-rail-count {
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.9;
}

.cs-workspace-panel.is-collapsed {
    width: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;
}

.cs-workspace-panel.is-collapsed .cs-workspace-panel-inner {
    display: none;
}

.cs-workspace-panel.is-collapsed .cs-workspace-panel-rail {
    display: flex;
}

/*.cs-workspace-panel.is-collapsed .items-panel-close-icon {
    top: 0.5rem;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
}*/

.cs-workspace-resizer {
    position: relative;
    width: 12px;
    min-width: 12px;
    flex: 0 0 12px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}

.cs-workspace-resizer::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(220, 53, 69, 0.35);
    transition: background-color 0.08s linear;
}

.cs-workspace-resizer:hover::before,
.cs-workspace-resizer.is-active::before {
    background: rgba(220, 53, 69, 0.95);
}

.items-panel-close-icon {
    z-index: 5;
    background: transparent;
    border: 0;
    padding: 0;
}

.cs-workspace-panel.is-collapsed + .cs-workspace-resizer,
.cs-workspace-resizer + .cs-workspace-panel.is-collapsed {
    opacity: 0.55;
}

@media (max-width: 991.98px) {
    .cs-workspace-layout {
        display: block;
    }

    .cs-workspace-panel {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        margin-bottom: 1rem;
    }

    .cs-workspace-panel.is-collapsed {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
    }

    .cs-workspace-panel.is-collapsed .cs-workspace-panel-inner {
        display: block;
    }

    .cs-workspace-panel.is-collapsed .cs-workspace-panel-rail {
        display: none;
    }

    .cs-workspace-resizer {
        display: none;
    }

    .items-panel-close-icon {
        display: none;
    }
}

/***********************************************/
/* Workspace multi-panel layout */
/***********************************************/

.cs-workspace-layout {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
}

.cs-workspace-panel {
    min-width: 0;
    flex: 1 1 0;
    min-height: 100%;
    transition:
        width 0.25s ease,
        min-width 0.25s ease,
        flex-basis 0.25s ease,
        opacity 0.2s ease;
}

.cs-workspace-panel-card {
    position: relative;
    height: 100%;
    min-height: 100%;
}

.cs-workspace-panel-inner {
    height: 100%;
    min-width: 0;
}

.cs-workspace-panel-rail {
    display: none;
    height: 100%;
    min-height: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.75rem;
}

.cs-workspace-panel-rail-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.cs-workspace-panel-rail-count {
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.9;
}

.cs-workspace-panel.is-collapsed {
    width: 80px !important;
    min-width: 80px !important;
    flex: 0 0 80px !important;
}

.cs-workspace-panel.is-collapsed .cs-workspace-panel-inner {
    display: none;
}

.cs-workspace-panel.is-collapsed .cs-workspace-panel-rail {
    display: flex;
}

/*.cs-workspace-panel.is-collapsed .items-panel-close-icon {
    top: 0.5rem;
    right: 50%;
    transform: translateX(50%) rotate(180deg);
}*/

.cs-workspace-resizer {
    position: relative;
    width: 12px;
    min-width: 12px;
    flex: 0 0 12px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
}

.cs-workspace-resizer::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(129, 129, 129, 0.15);
    transition: background-color 0.15s ease;
}

.cs-workspace-resizer:hover::before,
.cs-workspace-resizer.is-active::before {
    background: var(--bs-link-color);
}

.items-panel-close-icon {
    z-index: 5;
    background: transparent;
    border: 0;
    padding: 0;
}

.cs-workspace-panel.is-collapsed + .cs-workspace-resizer,
.cs-workspace-resizer + .cs-workspace-panel.is-collapsed {
    opacity: 0.55;
}

@media (max-width: 991.98px) {
    .cs-workspace-layout {
        display: block;
    }

    .cs-workspace-panel {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        margin-bottom: 1rem;
    }

    .cs-workspace-panel.is-collapsed {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
    }

    .cs-workspace-panel.is-collapsed .cs-workspace-panel-inner {
        display: block;
    }

    .cs-workspace-panel.is-collapsed .cs-workspace-panel-rail {
        display: none;
    }

    .cs-workspace-resizer {
        display: none;
    }

    .items-panel-close-icon {
        display: none;
    }
}

.cs-workspace-layout.is-pending {
    opacity: 0;
    pointer-events: none;
}

.cs-workspace-layout.is-resizing,
.cs-workspace-layout.is-resizing * {
    cursor: col-resize !important;
}

html.workspace-resizing .cs-workspace-panel,
html.workspace-resizing .cs-workspace-panel-card,
html.workspace-resizing .cs-workspace-panel-inner,
html.workspace-resizing .cs-workspace-resizer,
html.workspace-resizing .cs-workspace-item,
html.workspace-resizing .cs-workspace-item-link {
    transition: none !important;
}

.cs-workspace-panel.is-resizing {
    transition: none !important;
}

.cs-workspace-draggable,
.cs-workspace-drag-handle {
    touch-action: none;
}

.cs-workspace-draggable.is-drop-committing {
    opacity: 0.72;
    pointer-events: none;
}

.cs-workspace-item.is-dragging,
.cs-workspace-item-link.is-dragging,
.cs-workspace-draggable.is-dragging {
    transition: none !important;
    box-shadow: none !important;
}

html.workspace-dragging .cs-workspace-drag-handle,
html.workspace-dragging .cs-workspace-draggable {
    cursor: grabbing !important;
}

/****************************************************/

.cs-workspace-draggable {
    cursor: grab;
}

.cs-workspace-draggable.is-dragging {
    cursor: grabbing;
}

/*.cs-workspace-draggable a,
.cs-workspace-draggable button,
.cs-workspace-draggable input,
.cs-workspace-draggable textarea,
.cs-workspace-draggable select {
    cursor: auto;
}*/

.cs-workspace-draggable a{
    cursor:move !important;
}

/******************************************************/

html.workspace-dragging .cs-workspace-item,
html.workspace-dragging .cs-workspace-item-link,
html.workspace-dragging .cs-workspace-drop-target,
html.workspace-dragging .cs-workspace-drop-target.is-drop-hover,
html.workspace-dragging .cs-workspace-drop-target.is-drop-active {
    transition: none !important;
}

html.workspace-dragging .cs-workspace-item-link:hover,
html.workspace-dragging .cs-workspace-item-link:focus {
    transform: none !important;
    box-shadow: none !important;
}

.cs-workspace-item.is-dragging {
    transition: none !important;
}

/********************************************************/

[data-workspace-dnd-root].is-workspace-refreshing [data-workspace-panel] {
    pointer-events: none;
    transition: none !important;
}

[data-workspace-dnd-root].is-workspace-refreshing .cs-workspace-panel-card {
    opacity: 0.72;
}


[data-workspace-dnd-root].is-workspace-refreshing .cs-workspace-draggable.is-dragging {
    opacity: 1 !important;
}

html.workspace-panels-preload #workspaceLayout {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.workspace-panels-preload #workspaceLayout,
html.workspace-panels-preload #workspaceLayout .cs-workspace-panel,
html.workspace-panels-preload #workspaceLayout .cs-workspace-resizer {
    transition: none !important;
}

/*****************************************************/

/***********************************************/
/* Workspace live filter */
/***********************************************/

.cs-workspace-filter-input-wrap {
  position: relative;
}

.cs-workspace-filter-input {
  padding-right: 2.25rem;
}

.cs-workspace-filter-clear {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  padding: 0.2rem;
  line-height: 1;
  box-shadow: none !important;
}

.cs-workspace-filter-clear:hover,
.cs-workspace-filter-clear:focus {
  color: var(--bs-emphasis-color);
}

.cs-workspace-item {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    max-height 0.18s ease,
    margin 0.18s ease;
}

.cs-workspace-item.is-filter-hidden {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.cs-workspace-no-results {
  animation: csWorkspaceNoResultsIn 0.18s ease;
}

@keyframes csWorkspaceNoResultsIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-workspace-filter-list] .cs-workspace-item.is-filter-hidden {
  display: none !important;
}

/***********************************************/
/* Global Workspace Search results enter */
/***********************************************/

[data-workspace-global-search-list].is-entering {
    animation: csWorkspaceGlobalSearchEnter 160ms ease-out;
}

@keyframes csWorkspaceGlobalSearchEnter {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-workspace-global-search-list].is-entering {
        animation: none;
    }
}

/******************************************************/

/***********************************************/
/* Snippet manage inline editor */
/***********************************************/

.cs-inline-display-visibility {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px dashed transparent;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
}

.cs-inline-display-visibility:hover,
.cs-inline-display-visibility:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.18);
}

.cs-versions-tab-status {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  transition: color 0.18s ease, opacity 0.18s ease;
}

.cs-versions-tab-status.is-saving {
  color: var(--bs-primary-text-emphasis);
}

.cs-versions-tab-status.is-saved {
  color: var(--bs-success-text-emphasis);
}

.cs-versions-tab-status.is-error {
  color: var(--bs-danger-text-emphasis);
}

/***********************************************************/

.cs-snippet-manage-layout {
  gap: 1.5rem;
}

.cs-inline-card {
  border: 0;
  border-radius: 1.25rem;
  background: var(--bs-body-bg);
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.04);
}

.cs-inline-card .card-body {
  padding: 1.25rem;
}

.cs-inline-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  margin-bottom: 0.5rem;
}

.cs-inline-display {
  position: relative;
  border: 1px dashed transparent;
  border-radius: 0.9rem;
  padding: 0.7rem 0.85rem;
  cursor: text;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

.cs-inline-display:hover,
.cs-inline-display:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.28);
  background: var(--bs-tertiary-bg);
  outline: none;
}

.cs-inline-display.is-empty {
  color: var(--bs-secondary-color);
  font-style: italic;
}

.cs-inline-display-title {
  font-size: clamp(1.5rem, 1.6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  padding-left: 0;
  padding-right: 0;
}

.cs-inline-hint {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}

.cs-inline-editor-wrap {
  display: none;
}

.cs-inline-editor-wrap.is-active {
  display: block;
}

.cs-inline-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.cs-inline-loading {
  opacity: 0.65;
  pointer-events: none;
}

.cs-inline-status {
  min-height: 1.25rem;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}

.cs-snippet-editor-shell {
  border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--bs-body-bg);
}

.cs-snippet-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.cs-snippet-editor-toolbar-left,
.cs-snippet-editor-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cs-snippet-editor-status {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.cs-snippet-editor-status.is-dirty {
  color: var(--bs-warning-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor-status.is-saving {
  color: var(--bs-primary-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor-status.is-saved {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor {
  min-height: 420px;
  overflow: auto;
}

.cs-snippet-editor .cm-editor {
  min-height: 420px;
  height: 100%;
  font-size: 0.95rem;
}

.cs-snippet-editor .cm-scroller {
  min-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.cs-snippet-editor .cm-focused {
  outline: none;
}

.cs-snippet-meta-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.cs-col-12 {
  grid-column: span 12;
}

.cs-col-4 {
  grid-column: span 4;
}

.cs-col-8 {
  grid-column: span 8;
}

@media (max-width: 991.98px) {
  .cs-col-4,
  .cs-col-8 {
    grid-column: span 12;
  }
}

/******************************************************/

/***********************************************/
/* Snippet manage – clean layout inline editor */
/***********************************************/

.cs-inline-field-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.cs-inline-display-title {
  display: inline-block;
  max-width: 100%;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  padding: 0.1rem 0.35rem;
  margin-left: -0.35rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  border-radius: 0.75rem;
  border: 1px dashed transparent;
  background: transparent;
}

.cs-inline-display-title:hover,
.cs-inline-display-title:focus {
  background: var(--bs-tertiary-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.18);
}

.cs-inline-display-description,
.cs-inline-display-notes {
  padding: 0.75rem 0.9rem;
  border-radius: 1rem;
}

.cs-inline-display-language {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.7rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px dashed transparent;
  background: transparent;
}

.cs-inline-display-language:hover,
.cs-inline-display-language:focus {
  background: var(--bs-tertiary-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.18);
}

.cs-inline-field-compact {
  position: relative;
}

.cs-inline-field-compact .cs-inline-editor-wrap {
  min-width: 220px;
  margin-top: 0.35rem;
}

.cs-inline-field .cs-inline-editor-wrap .form-control {
  box-shadow: none;
}

.cs-inline-field .cs-inline-editor-wrap .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
}

.cs-snippet-editor-status {
  min-height: 1.25rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
}

.cs-snippet-editor-status.is-dirty {
  color: var(--bs-warning-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor-status.is-saving {
  color: var(--bs-primary-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor-status.is-saved {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
}

/* megtartjuk a te jelenlegi code shell hátteredet */
.cs-snippet-code-shell .cs-snippet-editor {
  min-height: 420px;
  background: transparent;
}

.cs-snippet-code-shell .cm-editor {
  min-height: 420px;
  background: transparent;
  color: var(--cs-code-fg);
}

.cs-snippet-code-shell .cm-scroller {
  min-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.93rem;
  line-height: 1.7;
}

.cs-snippet-code-shell .cm-gutters {
  background: transparent !important;
  border-right: 1px solid var(--cs-code-gutter-border);
  color: var(--cs-code-muted);
}

.cs-snippet-code-shell .cm-activeLine,
.cs-snippet-code-shell .cm-activeLineGutter {
  background: rgba(255, 255, 255, 0.03);
}

.cs-snippet-code-shell .cm-focused {
  outline: none;
}

.cs-snippet-code-shell .cm-line {
  padding-left: 0.25rem;
  padding-right: 1rem;
}

.cs-snippet-code-shell .cm-selectionBackground,
.cs-snippet-code-shell .cm-content ::selection {
  background: var(--cs-code-selection) !important;
}

/************************************************************/

/***********************************************/
/* Workspace modal color choice feedback */
/***********************************************/

.cs-color-choice-group {
  gap: 0.5rem;
}

.cs-color-choice {
  border-radius: 999px;
}

.cs-color-choice-swatch {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid transparent;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.cs-color-choice:hover .cs-color-choice-swatch {
  transform: scale(1.08);
}

.cs-color-choice.is-selected .cs-color-choice-swatch {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  background: var(--bs-tertiary-bg);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
}

.cs-color-choice-reset {
  border-radius: 0.75rem;
}

.cs-color-choice-reset-text {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  border-radius: 0.75rem;
  border: 1px dashed transparent;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.cs-color-choice.is-selected .cs-color-choice-reset-text {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  background: var(--bs-tertiary-bg);
}

/***********************************************/
/* Workspace modal code editor */
/***********************************************/

.cs-modal-code-editor-shell {
  border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--bs-body-bg);
}

.cs-modal-code-editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.cs-modal-code-editor-shell .cm-editor {
  min-height: 320px;
  font-size: 0.95rem;
}

.cs-modal-code-editor-shell .cm-scroller {
  min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.cs-modal-code-editor-shell .cm-focused {
  outline: none;
}

/*******************************************************/

/***********************************************/
/* Workspace modal snippet editor matches snippet-manage */
/***********************************************/

.cs-modal-code-editor-host {
  min-height: 320px;
}

.cs-modal-code-editor-host .cm-editor {
  min-height: 320px;
  background: transparent;
  color: var(--cs-code-fg);
}

.cs-modal-code-editor-host .cm-scroller {
  min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.93rem;
  line-height: 1.7;
}

.cs-modal-code-editor-shell .cm-gutters {
  background: transparent !important;
  border-right: 1px solid var(--cs-code-gutter-border);
  color: var(--cs-code-muted);
}

.cs-modal-code-editor-shell .cm-activeLine,
.cs-modal-code-editor-shell .cm-activeLineGutter {
  background: rgba(255, 255, 255, 0.03);
}

.cs-modal-code-editor-shell .cm-focused {
  outline: none;
}

.cs-modal-code-editor-shell .cm-line {
  padding-left: 0.25rem;
  padding-right: 1rem;
}

.cs-modal-code-editor-shell .cm-selectionBackground,
.cs-modal-code-editor-shell .cm-content ::selection {
  background: var(--cs-code-selection) !important;
}

.cs-modal-code-editor-shell textarea.cs-workspace-code-input {
  display: none;
}

/**************************************************/

/***********************************************/
/* Snippet manage – auto save UX */
/***********************************************/

.cs-inline-status {
  min-height: 1.25rem;
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
  transition: color 0.18s ease, opacity 0.18s ease;
}

.cs-inline-status.is-dirty {
  color: var(--bs-warning-text-emphasis);
  font-weight: 600;
}

.cs-inline-status.is-saving {
  color: var(--bs-primary-text-emphasis);
  font-weight: 600;
}

.cs-inline-status.is-saved {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
}

.cs-inline-status.is-error {
  color: var(--bs-danger-text-emphasis);
  font-weight: 600;
}

.cs-inline-field[data-show-actions="0"] .cs-inline-actions {
  display: none;
}

.cs-inline-field .cs-inline-editor-wrap {
  margin-top: 0.4rem;
}

.cs-inline-field.is-editing .cs-inline-display {
  opacity: 0.72;
}

.cs-inline-display-description,
.cs-inline-display-notes {
  transition: background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  border: 1px dashed transparent;
}

.cs-inline-display-description:hover,
.cs-inline-display-description:focus,
.cs-inline-display-notes:hover,
.cs-inline-display-notes:focus {
  background: var(--bs-tertiary-bg);
  border-color: rgba(var(--bs-primary-rgb), 0.18);
}

.cs-inline-display.is-empty {
  opacity: 0.82;
}

.cs-inline-field .form-control {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.cs-inline-field.cs-inline-loading .form-control,
.cs-tag-editor.cs-inline-loading .cs-tag-input {
  background-color: var(--bs-tertiary-bg);
}

.cs-snippet-editor-status {
  min-height: 1.25rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  transition: color 0.18s ease, opacity 0.18s ease;
}

.cs-snippet-editor-status.is-dirty {
  color: var(--bs-warning-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor-status.is-saving {
  color: var(--bs-primary-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor-status.is-saved {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
}

.cs-snippet-editor-status.is-error {
  color: var(--bs-danger-text-emphasis);
  font-weight: 600;
}

#snippetCodeSaveBtn[disabled],
#snippetCodeCancelBtn[disabled] {
  opacity: 0.7;
}

.cs-snippet-code-toolbar .btn.btn-sm.btn-link {
  box-shadow: none !important;
}

.cs-tag-editor [data-tag-status] {
  min-height: 1.25rem;
}

.cs-tag-editor [data-tag-status].is-saving {
  color: var(--bs-primary-text-emphasis);
  font-weight: 600;
}

.cs-tag-editor [data-tag-status].is-saved {
  color: var(--bs-success-text-emphasis);
  font-weight: 600;
}

.cs-tag-editor [data-tag-status].is-error {
  color: var(--bs-danger-text-emphasis);
  font-weight: 600;
}

/***********************************************/
/* Snippet tags */
/***********************************************/

.cs-tag-editor {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 2.25rem;
}

.cs-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--bs-tertiary-bg);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  font-size: 0.875rem;
  line-height: 1;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.cs-tag-chip:hover,
.cs-tag-chip:focus {
  transform: translateY(-1px);
  border-color: var(--bs-primary);
}

.cs-tag-chip-remove {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.cs-tag-input {
  min-height: 46px;
}

.cs-tag-feedback {
  min-height: 1.25rem;
}

.cs-tag-editor .form-control:disabled {
  opacity: 0.7;
}

/********************************************************/

/***********************************************/
/* Social / friends */
/***********************************************/

.cs-social-search-icon {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  pointer-events: none;
}

.cs-social-card {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.cs-social-card:hover {
  transform: translateY(-2px);
}

.cs-social-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 1rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-weight: 700;
  font-size: 1rem;
}

.cs-social-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-social-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/**************************************************************/

.cs-social-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-social-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-social-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--bs-emphasis-color);
  background: var(--bs-tertiary-bg);
}

.cs-collab-limit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

#projectCollaboratorsApp .card {
  box-shadow: none;
}

/***********************************************/
/* Light live collaboration badge */
/***********************************************/

.cs-live-collab-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.cs-live-collab-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  animation: csLivePulse 1.8s infinite;
}

@keyframes csLivePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/***********************************************/
/* Collaborator avatar stack */
/***********************************************/

.cs-collab-avatar-stack {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
}

.cs-collab-avatar-stack-item {
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin-left: -4px;
  border-radius: 50%;
}

.cs-collab-avatar-stack-item:first-child {
  margin-left: 0;
}

.cs-collab-avatar-stack-img,
.cs-collab-avatar-stack-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.cs-collab-avatar-stack-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.cs-collab-avatar-stack-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px var(--bs-body-bg);
}

[data-bs-theme="dark"] .cs-collab-avatar-stack-img {
  border: 1px solid rgba(255,255,255,0.08);
}

/*************************************************/

.cs-version-item {
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.cs-version-item:hover, .cs-version-item:focus {
    transform: translateY(-1px);
    border-color: var(--bs-primary);
}

/************************************************/

.nav-pills .nav-link {
  color: var(--bs-muted-color) !important;
}

.nav-pills .nav-link.active {
    color: var(--bs-bw-color) !important;
    background-color: var(--bs-tertiary-bg);
}

/***********************************************/

.cs-ai-spin {
  display: inline-block;
  animation: cs-ai-spin 0.9s linear infinite;
  transform-origin: center center;
}

@keyframes cs-ai-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.btn.is-ai-loading {
  opacity: 0.95;
}

/*******************************************************/
/*********************SAAS-COLORS***********************/
/*******************************************************/

/* =========================================================
   CodShot SaaS buttons / badges / icon colors
   ========================================================= */

:root {
    --cs-brand-start: #9845e3;
    --cs-brand-start-rgb: 152, 69, 227;

    --cs-brand-mid: #e24d70;
    --cs-brand-mid-rgb: 226, 77, 112;

    --cs-brand-end: #ff9b2f;
    --cs-brand-end-rgb: 255, 155, 47;

    --cs-brand-primary: #c85ce0;
    --cs-brand-primary-rgb: 200, 92, 224;

    --cs-brand-border: rgba(var(--cs-brand-primary-rgb), 0.55);
    --cs-brand-border-soft: rgba(var(--cs-brand-primary-rgb), 0.28);

    --cs-brand-soft-bg: rgba(var(--cs-brand-start-rgb), 0.14);
    --cs-brand-soft-bg-hover: rgba(var(--cs-brand-start-rgb), 0.22);

    --cs-brand-danger: #f87171;
    --cs-brand-danger-rgb: 248, 113, 113;
    --cs-brand-danger-soft-bg: rgba(248, 113, 113, 0.1);
    --cs-brand-danger-border: rgba(248, 113, 113, 0.65);
}

/* Ne maradjon Bootstrap-kék a primary/text-primary vonalon */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --cs-primary: var(--cs-brand-primary);
    --cs-primary-rgb: var(--cs-brand-primary-rgb);
    --cs-primary-hover: #d889e8;
    --cs-primary-active: #ad3fd3;

    --bs-primary: var(--cs-primary);
    --bs-primary-rgb: var(--cs-primary-rgb);

    --cs-link: var(--cs-primary);
    --cs-link-hover: #d889e8;
    --bs-link-color: var(--cs-link);
    --bs-link-hover-color: var(--cs-link-hover);
}

/* Outline primary: modern ghost button */
.btn-outline-primary {
    --bs-btn-color: var(--cs-brand-primary);
    --bs-btn-border-color: var(--cs-brand-border);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;

    background: rgba(var(--cs-brand-start-rgb), 0.04);
    border-color: var(--cs-brand-border);
    color: var(--cs-brand-primary);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: linear-gradient(
        135deg,
        rgba(var(--cs-brand-start-rgb), 0.22),
        rgba(var(--cs-brand-end-rgb), 0.16)
    );
    border-color: rgba(var(--cs-brand-primary-rgb), 0.85);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0.4rem 1.3rem rgba(var(--cs-brand-mid-rgb), 0.22);
}

/* Outline secondary: ne legyen szürke Bootstrap-érzet */
.btn-outline-secondary {
    --bs-btn-color: var(--cs-text-muted);
    --bs-btn-border-color: var(--cs-border-strong);
    --bs-btn-hover-color: var(--bs-heading-color);
    --bs-btn-hover-bg: rgba(255,255,255,0.045);
    --bs-btn-hover-border-color: rgba(var(--cs-brand-primary-rgb), 0.45);

    background: rgba(255,255,255,0.015);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 1.1rem rgba(0,0,0,0.18);
}

/* Danger outline: Remove friend gomb */
.btn-outline-danger {
    --bs-btn-color: var(--cs-brand-danger);
    --bs-btn-border-color: var(--cs-brand-danger-border);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(var(--cs-brand-danger-rgb), 0.16);
    --bs-btn-hover-border-color: rgba(var(--cs-brand-danger-rgb), 0.85);

    background: var(--cs-brand-danger-soft-bg);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 1.1rem rgba(var(--cs-brand-danger-rgb), 0.18);
}

/* Badge rendszer */
.badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.text-bg-primary,
.badge.text-bg-primary,
.badge.cs-bg-soft-grey.text-primary {
    background: linear-gradient(
        135deg,
        rgba(var(--cs-brand-start-rgb), 0.28),
        rgba(var(--cs-brand-mid-rgb), 0.22) 55%,
        rgba(var(--cs-brand-end-rgb), 0.18)
    ) !important;

    color: var(--bs-bw-color) !important;
    border: 1px solid rgba(var(--cs-brand-primary-rgb), 0.22);
}

.text-bg-light,
.badge.text-bg-light {
    background: rgba(255,255,255,0.055) !important;
    color: var(--cs-text-muted) !important;
    border: 1px solid rgba(255,255,255,0.06);
}

.text-bg-success,
.badge.text-bg-success {
    background: rgba(34,197,94,0.13) !important;
    color: #86efac !important;
    border: 1px solid rgba(34,197,94,0.22);
}

/* Primary ikonok, ahol text-primary vagy cs-bg-soft-grey text-primary van */
.text-primary,
.link-primary {
    color: var(--cs-brand-primary) !important;
}

.cs-bg-soft-grey {
    background: rgba(255,255,255,0.045) !important;
}

.cs-soft-primary,
.cs-icon-primary {
    background: var(--cs-brand-soft-bg);
    color: var(--cs-brand-primary);
}

/* Bootstrap ikonok finomítása CTA/gomb belsejében */
.btn i,
.nav-link i,
.card i.text-primary,
.text-primary i {
    transition: color 0.18s ease, opacity 0.18s ease;
}

/******************************************/

.scale-120 {
  transition: .3s all;
}

.scale-120:hover {
  scale: 120%;
}

/*******************ACCOUNT-PAGES-LAYOUT********************/

.cs-account-page-inner {
    width: 100%;
    margin-inline: auto;
}

.cs-account-page-inner-narrow {
    max-width: 1320px;
}

.cs-account-page-inner-wide {
    max-width: none;
}

/*************************************************/

/* =========================================================
   Hero fake code editor
   ========================================================= */

.cs-hero-code-card {

}

.cs-hero-code-glow {

}

.cs-hero-code-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
}

.cs-hero-code-dots {
    display: inline-flex;
    gap: 0.4rem;
}

.cs-hero-code-dots span {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.cs-hero-code-dots span:nth-child(1) {
    background: var(--cs-brand-end);
}

.cs-hero-code-dots span:nth-child(2) {
    background: var(--cs-brand-start);
}

.cs-hero-code-dots span:nth-child(3) {
    background: #22c55e;
}

.cs-hero-code-title {
    color: var(--cs-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.cs-hero-code-body {
    position: relative;
    z-index: 1;
    padding: 1.5rem 1.35rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: clamp(1.12rem, 1.35vw, 1.58rem);
    line-height: 1.9;
}

.cs-code-line {
    min-height: 1.9em;
    white-space: nowrap;
}

.cs-code-line-active {
    display: inline-flex;
    align-items: center;
    border-radius: 0.8rem;
    padding: 0.05rem 0.5rem;
    margin-left: -0.5rem;
    background: linear-gradient(
        135deg,
        rgba(var(--cs-brand-start-rgb), 0.12),
        rgba(var(--cs-brand-end-rgb), 0.08)
    );
}

.cs-code-muted {
    color: #8b949e;
}

.cs-code-var {
    color: var(--cs-primary-soft-color);
}

.cs-code-key {
    color: #93c5fd;
}

.cs-code-string,
.cs-code-dynamic {
    color: var(--cs-brand-end);
}

.cs-code-caret {
    display: inline-block;
    width: 0.5rem;
    height: 1.1em;
    margin-left: 0.08rem;
    border-right: 2px solid var(--cs-primary-soft-color);
    animation: csCaretBlink 0.85s steps(2, start) infinite;
}

@keyframes csCaretBlink {
    0%, 45% {
        opacity: 1;
    }

    46%, 100% {
        opacity: 0;
    }
}

@media (max-width: 991.98px) {
    .cs-hero-code-body {
        overflow-x: auto;
    }
}

.cs-hero-code-wrapper {
    perspective: 900px;
    perspective-origin: center center;
}

.cs-hero-code-card {
    transform-origin: center center;
    transform-style: preserve-3d;
    animation: csHeroCodeFloat 6s ease-in-out infinite;
}

@keyframes csHeroCodeFloat {
    0% {
        transform: rotateY(-24deg) rotateX(7deg) translateY(0);
    }

    50% {
        transform: rotateY(-24deg) rotateX(7deg) translateY(-15px);
    }

    100% {
        transform: rotateY(-24deg) rotateX(7deg) translateY(0);
    }
}

.cs-code-line-active {
  background: linear-gradient(
    135deg,
    rgba(var(--cs-brand-start-rgb), 0.18),
    rgba(var(--cs-brand-end-rgb), 0.12)
  );
  box-shadow:
    0 0 20px rgba(var(--cs-brand-mid-rgb), 0.15);
}

.cs-code-caret {
  border-right: 2px solid var(--cs-primary-soft-color);
  box-shadow:
    0 0 6px rgba(var(--cs-brand-primary-rgb), 0.60);
}

.cs-gradient-text {
    background: var(--cs-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cs-bg-gradient-primary {
    background: var(--cs-gradient-primary);
}

.cs-dashboard-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--cs-brand-primary);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.cs-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--cs-brand-primary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.cs-dashboard-card-link:hover,
.cs-dashboard-card-link:focus {
    color: var(--cs-link-hover);
    transform: translateX(2px);
    text-decoration: none;
}

.cs-dashboard-card-link::after {
    content: "→";
    margin-left: 0.35rem;
    opacity: 0;
    transform: translateX(-0.2rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cs-card-link::after {
    content: "→";
    margin-left: 0.35rem;
    opacity: 0;
    transform: translateX(-0.2rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cs-dashboard-card-link:hover::after,
.cs-dashboard-card-link:focus::after {
    opacity: 1;
    transform: translateX(0);
}

.cs-card-link:hover::after,
.cs-card-link:focus::after {
    opacity: 1;
    transform: translateX(0);
}

/*******************/

/* =========================================================
   Dashboard premium SaaS feel
   ========================================================= */

.cs-dashboard-panel,
.cs-dashboard-stat-card {
    position: relative;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.cs-dashboard-panel::before,
.cs-dashboard-stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(
          circle at 88% 12%,
          rgba(var(--cs-brand-primary-rgb), 0.10),
          transparent 34%
      ),
      linear-gradient(
          135deg,
          rgba(var(--cs-brand-start-rgb), 0.055),
          rgba(var(--cs-brand-end-rgb), 0.035)
      );
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cs-dashboard-panel:hover,
.cs-dashboard-stat-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1rem 2.5rem rgba(0,0,0,0.10),
        0 0 0 1px rgba(var(--cs-brand-primary-rgb), 0.10);
}

[data-bs-theme="dark"] .cs-dashboard-panel:hover,
[data-bs-theme="dark"] .cs-dashboard-stat-card:hover {
    box-shadow:
        0 1.1rem 2.8rem rgba(0,0,0,0.32),
        0 0 0 1px rgba(var(--cs-brand-primary-rgb), 0.14);
}

.cs-dashboard-panel:hover::before,
.cs-dashboard-stat-card:hover::before {
    opacity: 1;
}

.cs-dashboard-panel > .card-body,
.cs-dashboard-stat-card > .card-body {
    position: relative;
    z-index: 1;
}

/* Icon glow */

.cs-dashboard-stat-card .icon-md {
    position: relative;
    box-shadow:
        0 0.7rem 1.5rem rgba(var(--cs-brand-start-rgb), 0.24),
        inset 0 1px 0 rgba(255,255,255,0.22);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.cs-dashboard-stat-card:hover .icon-md {
    transform: scale(1.06) rotate(-3deg);
    filter: saturate(1.12);
    box-shadow:
      0 0.85rem 2rem rgba(var(--cs-brand-start-rgb), 0.36),
      0 0 1.3rem rgba(var(--cs-brand-end-rgb), 0.18),
      inset 0 1px 0 rgba(255,255,255,0.28);
}

/* Dashboard card links */

.cs-dashboard-card-link {
    color: var(--cs-primary-soft-color);
}

.cs-dashboard-card-link:hover,
.cs-dashboard-card-link:focus {
    color: var(--cs-link-hover);
}

/* Recent snippets */

.cs-dashboard-recent-item {
    border-radius: 1rem;
    border: 1px solid transparent !important;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.cs-dashboard-recent-item + .cs-dashboard-recent-item {
    margin-top: 0.35rem;
}

.cs-dashboard-recent-item:hover,
.cs-dashboard-recent-item:focus {
    transform: translateX(4px);
    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.08),
            rgba(var(--cs-brand-mid-rgb), 0.055) 55%,
            rgba(var(--cs-brand-end-rgb), 0.045)
        ) !important;

    border-color: rgba(var(--cs-brand-primary-rgb), 0.16) !important;
    box-shadow: 0 0.6rem 1.6rem rgba(0,0,0,0.08);
    text-decoration: none;
}

[data-bs-theme="dark"] .cs-dashboard-recent-item:hover,
[data-bs-theme="dark"] .cs-dashboard-recent-item:focus {
    box-shadow: 0 0.75rem 1.8rem rgba(0,0,0,0.24);
}

.cs-dashboard-recent-item .icon-sm {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.cs-dashboard-recent-item:hover .icon-sm {
    transform: scale(1.08);
    box-shadow: 0 0.45rem 1rem rgba(var(--cs-brand-mid-rgb), 0.22);
}

/* =========================================================
   Workspace SaaS item cards
   ========================================================= */

.cs-workspace-item {
    width: 100%;
    min-width: 210px;
    max-width: 420px;
    border-radius: 1.15rem;
    overflow: visible;
}

.cs-workspace-view-variant--grid .cs-workspace-item {
    width: 100%;
}

.cs-workspace-card {
    display: flex;
    min-height: 112px;
    align-self: stretch;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.cs-workspace-card-rail {
    width: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    height: auto !important;
    justify-content: center;
    padding-top: 1rem;
    border-radius: 1rem 0 0 1rem;
    /*background: var(--cs-gradient-primary);*/
}

.cs-workspace-card-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 0.45rem 1.3rem rgba(0, 0, 0, 0.32);
}

.cs-workspace-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.95rem 1rem;
}

.cs-workspace-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.cs-workspace-card-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.cs-workspace-card-title {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow-wrap: anywhere;

    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 0.35rem;
}

.cs-workspace-card-desc {
    font-size: 0.78rem;
    line-height: 1.35;
}

.cs-workspace-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.cs-workspace-card-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    opacity: 0.72;
    transition: opacity 0.18s ease;
}

.cs-workspace-card:hover .cs-workspace-card-actions {
    opacity: 1;
}

.cs-workspace-card a {
    color: inherit;
}

.cs-workspace-card .dropdown-menu {
    z-index: 1085;
}

/******************************************************/

.cs-workspace-view-variant--list {
    width: 100%;
}

.cs-workspace-list-card {
    width: 100%;
    min-height: 55px;
    max-height: 55px;
    height: 55px;
    display: flex;
    align-items: stretch;
    border-radius: 1rem;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.cs-workspace-list-rail {
    width: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem 0 0 1rem;
}

.cs-workspace-list-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(8, 10, 15, 0.82);
}

.cs-workspace-list-main {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(120px, 220px) 82px;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.85rem;
    color: inherit;
}

.cs-workspace-list-title-wrap {
    min-width: 0;
}

.cs-workspace-list-title {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.2;
}

.cs-workspace-list-subtitle {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

.cs-workspace-list-tags {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.72rem;
    white-space: nowrap;
}

.cs-workspace-list-lang {
    display: flex;
    justify-content: flex-end;
}

.cs-workspace-list-lang .badge {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.cs-workspace-list-actions {
    width: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding-right: 0.85rem;
}

@media (max-width: 991.98px) {
    .cs-workspace-list-main {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cs-workspace-list-tags {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .cs-workspace-list-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .cs-workspace-list-lang {
        display: none;
    }
}

/* =========================================================
   Workspace list view overflow fix
   ========================================================= */

.cs-workspace-layout {
    max-width: 100%;
    overflow-x: visible;
}

.cs-workspace-panel,
.cs-workspace-panel-card,
.cs-workspace-panel-inner,
[data-workspace-view-list] {
    min-width: 0;
    max-width: 100%;
}

[data-workspace-view-list].is-workspace-list-view {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

[data-workspace-view-list].is-workspace-list-view > .cs-workspace-view-variant {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cs-workspace-item--snippet-list,
.cs-workspace-item--collection-list,
.cs-workspace-item--project-list,
.cs-workspace-item--snippet-list .cs-workspace-list-card,
.cs-workspace-item--collection-list .cs-workspace-list-card,
.cs-workspace-item--project-list .cs-workspace-list-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cs-workspace-item--collection-list .cs-workspace-list-main,
.cs-workspace-item--project-list .cs-workspace-list-main {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.cs-workspace-item--collection-list .cs-workspace-list-tags,
.cs-workspace-item--project-list .cs-workspace-list-tags {
    justify-content: flex-start;
}

/* =========================================================
   AI quota badge
   ========================================================= */

.cs-ai-quota-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cs-ai-quota-badge {
    position: absolute;
    top: -0.45rem;
    right: -0.55rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--cs-gradient-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
    box-shadow: 0 0.25rem 0.75rem var(--cs-primary-glow);
    pointer-events: none;
}

.cs-ai-quota-badge:empty {
    display: none;
}

/******************QUICK-VIEW********************/

.cs-quick-view-dialog {
    max-width: min(1200px, calc(100vw - 3rem));
}

.cs-quick-view-modal {
    background: var(--cs-bg);
}

.cs-quick-view-modal .modal-body {
    min-height: 0;
}

.cs-quick-view-editor {
    max-height: calc(100vh - 220px);
    overflow: auto;
}

.cs-quick-view-editor pre {
    min-height: 520px;
}

@media (max-width: 1200px) {
    .cs-quick-view-dialog {
        max-width: none;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .cs-quick-view-dialog .modal-content {
        height: 100%;
        border-radius: 0 !important;
    }

    .cs-quick-view-editor {
        max-height: calc(100vh - 150px);
    }

    .cs-quick-view-editor pre {
        min-height: calc(100vh - 170px);
    }
}

.cs-quick-view-copy-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 38px;
    height: 38px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0.9;
}

.cs-quick-view-copy-btn:hover {
    opacity: 1;
}

/**************************NEW-SNIPPET-PANEL****************************/

.cs-snippet-create-mode-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cs-snippet-create-mode {
  position: relative;
  border: 1px solid var(--bs-border-color);
  background: var(--cs-surface);
  color: var(--bs-body-color);
  border-radius: 1rem;
  padding: 1rem 0.75rem;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cs-snippet-create-mode i {
  font-size: 1.55rem;
  color: var(--cs-primary);
}

.cs-snippet-create-mode span:not(.cs-ai-quota-badge) {
  font-weight: 600;
  font-size: 0.9rem;
}

.cs-snippet-create-mode:hover,
.cs-snippet-create-mode.is-active {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  background: var(--cs-primary-soft-bg);
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1.4rem rgba(var(--bs-primary-rgb), 0.12);
}

.cs-snippet-create-mode .cs-ai-quota-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
}

@media (max-width: 767.98px) {
  .cs-snippet-create-mode-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   Workspace modern loading overlay
   ========================================================= */

.cs-workspace-layout {
  position: relative;
}

.cs-workspace-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5rem;
  background:
    radial-gradient(
      circle at top,
      rgba(var(--cs-brand-start-rgb), 0.12),
      transparent 34%
    ),
    rgba(var(--bs-body-bg-rgb), 0.78);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
  visibility: hidden;
  border-radius: 1.5rem;
}

.cs-workspace-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.cs-workspace-loading-card {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.16);
  border-radius: 1.25rem;
  background: rgba(var(--bs-body-bg-rgb), 0.86);
  box-shadow:
    0 1.25rem 3rem rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.cs-workspace-loading-orb {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: var(--cs-gradient-primary);
  box-shadow: 0 0.75rem 1.8rem var(--cs-primary-glow);
  animation: csWorkspaceLoaderPulse 1.35s ease-in-out infinite;
}

.cs-workspace-loading-orb i {
  font-size: 1.25rem;
  animation: csWorkspaceLoaderSpin 1.1s linear infinite;
}

.cs-workspace-layout.is-pending [data-workspace-view-list] {
  opacity: 0.35;
  filter: blur(1px);
  transition: opacity 0.22s ease, filter 0.22s ease;
}

.cs-workspace-layout.is-ready [data-workspace-view-list] {
  opacity: 1;
  filter: none;
}

@keyframes csWorkspaceLoaderSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes csWorkspaceLoaderPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0.75rem 1.8rem var(--cs-primary-glow);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 1rem 2.4rem var(--cs-primary-glow-strong);
  }
}

/* =========================================================
   Public navbar polish
   ========================================================= */

.cs-public-navbar-desktop {
    min-height: 4.25rem;
}

.cs-public-navbar-menu {
    padding: 0.25rem;
    border-radius: 999px;
    background: rgba(var(--bs-body-bg-rgb), 0.35);
}

.cs-public-nav-link {
    position: relative;
    padding: 0.45rem 0.8rem !important;
    border-radius: 999px;
    color: var(--cs-text-muted);
    font-weight: 500;
    line-height: 1;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.mobile-cs-public-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.45rem 0.8rem 0.62rem !important;
    border-radius: 999px;
    color: var(--cs-text-muted);
    font-weight: 500;
    line-height: 1;
}

.cs-public-nav-link:hover,
.cs-public-nav-link:focus {
    color: var(--bs-emphasis-color);
    background: var(--cs-bg-soft-grey);
}

.cs-public-nav-link.active {
    color: var(--bs-emphasis-color);
    background: var(--cs-bg-soft-grey-25);
}

.mobile-cs-public-nav-link.active {
    color: var(--bs-emphasis-color);
    background: var(--cs-bg-soft-grey-25);
}

.cs-public-nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.2rem;

    width: 1.15rem;
    height: 0.42rem;

    border-radius: 999px;
    background: var(--cs-gradient-primary);

    transform: translateX(-50%);
}

.mobile-cs-public-nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.18rem;

    width: 1.15rem;
    height: 0.22rem;

    border-radius: 999px;
    background: var(--cs-gradient-primary);

    transform: translateX(-50%);
    pointer-events: none;
}

.nav-link-mobile {
    display: inline-flex;
    width: fit-content;
}

.cs-public-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-left: 1rem;
    margin-left: 0.25rem;
    border-left: 1px solid var(--bs-border-color);
}

.cs-public-nav-action,
.cs-public-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.7rem;
    border: 0;
    border-radius: 999px;
    color: var(--cs-text-muted);
    background: transparent;
    text-decoration: none;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.cs-public-nav-icon {
    width: 2.25rem;
    padding: 0;
    font-size: 1.05rem;
}

.cs-public-nav-action:hover,
.cs-public-nav-action:focus,
.cs-public-nav-icon:hover,
.cs-public-nav-icon:focus {
    color: var(--bs-emphasis-color);
    background: var(--cs-bg-soft-grey);
}

.cs-public-workspace-btn {
    padding-inline: 0.85rem;
}

/* =========================================================
   Pricing page toggle
   ========================================================= */

.cs-pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--cs-bg-soft-grey);
    border: 1px solid var(--bs-border-color);
}

.cs-pricing-toggle__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.18s ease;
}

.cs-pricing-toggle__item:hover {
    background: var(--cs-bg-soft-grey-25);
}

.cs-pricing-toggle__item.is-active {
    background: var(--cs-gradient-primary);
    color: #fff;
    box-shadow: 0 0.35rem 1rem var(--cs-primary-glow);
}

.cs-pricing-toggle__badge {
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.14);
    color: var(--bs-success);
}

.cs-pricing-toggle__item.is-active .cs-pricing-toggle__badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.cs-pricing-old-price {
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: line-through;
    opacity: 0.8;
}

.cs-pricing-save-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.14);
    color: var(--bs-success);
    font-size: 0.78rem;
    font-weight: 700;
}

.cs-pricing-billed-yearly {
    color: var(--bs-secondary-color);
    font-size: 0.92rem;
    font-weight: 500;
}

/* =========================================================
   Hero responsive overflow fix
   ========================================================= */

.cs-hero-code-wrapper {
    max-width: 100%;
    overflow: hidden;
}

.cs-hero-code-card {
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .cs-hero-code-wrapper {
        margin-top: 2.5rem;
        overflow: hidden;
    }

    .cs-hero-code-card {
        max-width: 100%;
        transform: none !important;
        animation: none;
    }

    .cs-hero-code-body {
        max-width: 100%;
        overflow-x: auto;
        padding: 1.1rem 1rem;
        font-size: clamp(0.85rem, 3.3vw, 1rem);
        line-height: 1.75;
    }
}

@media (max-width: 575.98px) {
    section.py-5 {
        overflow-x: hidden;
    }

    .cs-hero-code-wrapper {
        margin-top: 2.25rem;
    }

    .cs-hero-code-body {
        font-size: 0.82rem;
        padding: 0.95rem 0.85rem;
    }

    .cs-code-line {
        min-height: 1.75em;
    }

    .cs-code-line-active {
        max-width: 100%;
    }
}

/* =========================================================
   Friends / Social page - PRO SaaS polish
   ========================================================= */

.cs-social-hero {
  overflow: hidden;
}

.cs-social-hero__stats {
  width: min(100%, 440px);
}

.cs-social-search-panel,
.cs-social-section-card,
.cs-social-card {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.cs-social-search-panel:hover,
.cs-social-section-card:hover,
.cs-social-card:hover {
  transform: translateY(-1px);
}

.cs-social-card {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(var(--cs-brand-mid-rgb), 0.08),
      transparent 34%
    ),
    var(--cs-surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
}

.cs-social-card:hover {
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] .cs-social-card {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}

.cs-social-card--compact .card-body {
  min-height: 100%;
}

.cs-social-search-input {
  min-height: 56px;
  font-weight: 600;
}

.cs-social-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  min-width: 52px;
  flex: 0 0 52px;
  border-radius: 1.1rem;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      135deg,
      rgba(var(--cs-brand-start-rgb), 0.16),
      rgba(var(--cs-brand-end-rgb), 0.10)
    ),
    var(--bs-tertiary-bg);
  color: var(--bs-emphasis-color);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), 0.08);
}

.cs-social-avatar--sm {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-basis: 44px;
  border-radius: 0.95rem;
}

.cs-social-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-social-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.cs-social-empty {
  border: 1px dashed rgba(var(--bs-primary-rgb), 0.22);
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--cs-brand-start-rgb), 0.08),
      transparent 36%
    ),
    var(--cs-bg-soft-grey);
}

.cs-social-empty__icon {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cs-primary-soft-bg);
  color: var(--cs-primary-soft-color);
  font-size: 1.15rem;
}

@media (max-width: 575.98px) {
  .cs-social-hero__stats .h4 {
    font-size: 1.15rem;
  }

  .cs-social-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    flex-basis: 46px;
  }
}

/***************************************************/

/* =========================================================
   Hero final layout fix v3
   ========================================================= */

.cs-hero-title {
    position: relative;
    max-width: 780px;
    font-size: clamp(2.45rem, 5vw, 4.55rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}
.cs-hero-code-robot-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    min-height: clamp(130px, 16vw, 230px);
    margin-bottom: clamp(-1.5rem, -2vw, -0.5rem);
    pointer-events: none;
}

.cs-hero-code-robot {
    width: clamp(175px, 18vw, 285px);
    height: clamp(135px, 14vw, 220px);
    display: block;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
    animation: none !important;
    filter:
        drop-shadow(
            0 1rem 1.8rem
            rgba(var(--cs-brand-start-rgb), 0.28)
        );
}

.cs-hero-ai-robot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: scale(1.18);
    transform-origin: center center;
}

.cs-hero-code-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.cs-hero-code-card {
    width: 100%;
    max-width: 100%;
}

.cs-hero-code-body {
    width: 100%;
}

@media (max-width: 991.98px) {
    section.py-5 {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }

    section.py-5 > .container.py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .cs-hero-title {
        max-width: 100%;
        font-size: clamp(3rem, 8.4vw, 4.9rem);
    }

    .cs-hero-code-robot-wrap {
        min-height: 150px;
        margin-top: 1.25rem;
        margin-bottom: -1.25rem;
        justify-content: flex-end;
    }

    .cs-hero-code-robot {
        width: clamp(170px, 36vw, 260px);
        height: clamp(130px, 28vw, 200px);
    }

    .cs-hero-code-card {
        transform: none !important;
        animation: none !important;
    }

    .cs-hero-code-body {
        font-size: clamp(1rem, 2.7vw, 1.2rem);
        line-height: 1.75;
        padding: 1.2rem 1rem;
        overflow-x: auto;
    }
}

@media (max-width: 575.98px) {
    section.py-5 {
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }

    section.py-5 > .container.py-5 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .cs-hero-title {
        font-size: clamp(2.75rem, 10.6vw, 3.55rem);
        line-height: 1.08;
    }

    .cs-hero-code-robot-wrap {
        min-height: 115px;
        margin-top: 1rem;
        margin-bottom: -0.85rem;
        justify-content: flex-end;
    }

    .cs-hero-code-robot {
        width: clamp(145px, 48vw, 200px);
        height: clamp(110px, 36vw, 150px);
    }

    .lead {
        font-size: 1rem;
        line-height: 1.55;
    }

    .cs-hero-code-body {
        font-size: clamp(0.88rem, 3.5vw, 1rem);
        line-height: 1.65;
        padding: 1rem 0.85rem;
    }
}

/************************************************************/

.mw-680 {
    max-width: 680px !important;
}

.mw-780 {
    max-width: 780px !important;
}

/* =========================================================
   Workspace item color palette dropdown fix
   ========================================================= */

.cs-workspace-color-palette {
  min-width: 10.75rem !important;
  width: max-content;
  max-width: calc(100vw - 2rem);
  border-radius: 1rem;
}

.cs-workspace-color-palette-grid {
  display: grid;
  grid-template-columns: repeat(3, 2rem);
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
}

.cs-workspace-color-palette-grid form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
}

.cs-workspace-color-palette .item-color-option {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.12rem;
  line-height: 1;
}

.cs-workspace-color-palette .item-color-option:hover,
.cs-workspace-color-palette .item-color-option:focus,
.cs-workspace-color-palette .item-color-option.is-active {
  background: var(--bs-tertiary-bg) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12);
}

.cs-workspace-color-palette-reset {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
}

.cs-workspace-color-palette-reset .item-color-option {
  width: auto;
  height: auto;
  padding: 0.15rem 0.4rem !important;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* =========================================================
   Supported languages section
   ========================================================= */

.cs-supported-languages-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(var(--cs-brand-start-rgb), 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(var(--cs-brand-end-rgb), 0.08),
            transparent 32%
        ),
        var(--cs-surface);
}

.cs-supported-languages-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.05),
            rgba(var(--cs-brand-end-rgb), 0.035)
        );
}

.cs-supported-languages-section > .card-body {
    position: relative;
    z-index: 1;
}

.cs-supported-language-card {
    padding: 1rem;
    border-radius: 1.25rem;
    background: var(--cs-bg-soft-grey);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.10);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.cs-supported-language-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--bs-primary-rgb), 0.22);
    box-shadow: 0 0.85rem 2rem rgba(0,0,0,0.08);
}

[data-bs-theme="dark"] .cs-supported-language-card:hover {
    box-shadow: 0 1rem 2.4rem rgba(0,0,0,0.28);
}

.cs-supported-language-icon {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    background: var(--cs-primary-soft-bg);
    color: var(--cs-primary-soft-color);
}

.cs-supported-language-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.cs-language-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0.35rem 0.62rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-emphasis-color);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.cs-language-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    background: var(--cs-primary-soft-bg);
}

/* =========================================================
   New snippet language helper
   ========================================================= */

.cs-language-help-toggle {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cs-brand-primary);
    text-decoration: none;
}

.cs-language-help-toggle:hover,
.cs-language-help-toggle:focus {
    color: var(--cs-link-hover);
    text-decoration: none;
}

.cs-language-help-box {
    padding: 0.85rem;
    border-radius: 1rem;
    background: var(--cs-bg-soft-grey);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
}

.cs-language-help-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.cs-language-help-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-emphasis-color);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* =========================================================
   Snippet manage CodeMirror long line overflow fix
   ========================================================= */

.cs-snippet-code-shell,
.cs-snippet-code-shell .cs-snippet-editor,
.cs-snippet-code-shell .cm-editor,
.cs-snippet-code-shell .cm-scroller,
.cs-snippet-code-shell .cm-content {
    max-width: 100%;
    min-width: 0;
}

.cs-snippet-code-shell {
    overflow-x: hidden;
}

.cs-snippet-code-shell .cm-scroller {
    overflow-x: hidden;
}

.cs-snippet-code-shell .cm-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cs-snippet-code-shell .cm-line {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================
   AI Help Chat Widget
   ========================================================= */

.cs-ai-help-widget {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 4900;
    font-size: 0.95rem;
}

.cs-ai-help-button {
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--cs-gradient-primary);
    box-shadow: 0 1rem 2.4rem var(--cs-primary-glow-strong);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.cs-ai-help-button:hover,
.cs-ai-help-button:focus {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 1.2rem 3rem var(--cs-primary-glow-strong);
    filter: saturate(1.06);
}

.cs-ai-help-button i {
    font-size: 1.55rem;
}

.cs-ai-help-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: min(390px, calc(100vw - 2rem));
    max-height: min(640px, calc(100dvh - 2.5rem));

    display: flex;
    flex-direction: column;
    overflow: hidden;

    border: 1px solid rgba(var(--bs-primary-rgb), 0.14);
    border-radius: 1.35rem;
    background: var(--cs-surface);
    box-shadow:
        0 1.25rem 3rem rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;

    transform-origin: right bottom;
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.3s ease,
        visibility 0s linear 0.4s;
}

.cs-ai-help-widget.is-open .cs-ai-help-panel {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

.cs-ai-help-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid var(--bs-border-color);
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(var(--cs-brand-start-rgb), 0.18),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.10),
            rgba(var(--cs-brand-end-rgb), 0.055)
        ),
        var(--cs-surface);
}

.cs-ai-help-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 800;
    color: var(--bs-emphasis-color);
}

.cs-ai-help-title-icon {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    color: #fff;
    background: var(--cs-gradient-primary);
    box-shadow: 0 0.55rem 1.2rem var(--cs-primary-glow);
}

.cs-ai-help-subtitle {
    margin-top: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    line-height: 1.35;
}


.cs-ai-help-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.cs-ai-help-clear {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    padding: 0.25rem;
    line-height: 1;
}

.cs-ai-help-clear:hover,
.cs-ai-help-clear:focus {
    color: var(--bs-emphasis-color);
}

.cs-ai-help-close {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    padding: 0.25rem;
    line-height: 1;
}

.cs-ai-help-close:hover,
.cs-ai-help-close:focus {
    color: var(--bs-emphasis-color);
}

.cs-ai-help-messages {
    flex: 1 1 auto;
    min-height: 250px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--cs-bg);
}

.cs-ai-help-message {
    display: flex;
    margin-bottom: 0.75rem;
}

.cs-ai-help-message--user {
    justify-content: flex-end;
}

.cs-ai-help-bubble {
    max-width: 88%;
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.88rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.cs-ai-help-message--ai .cs-ai-help-bubble {
    color: var(--bs-body-color);
    background: var(--cs-surface);
    border: 1px solid var(--bs-border-color);
}

.cs-ai-help-message--user .cs-ai-help-bubble {
    color: #fff;
    background: var(--cs-gradient-primary);
    box-shadow: 0 0.35rem 1rem var(--cs-primary-glow);
}

.cs-ai-help-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.cs-ai-help-suggestion {
    border: 1px solid rgba(var(--bs-primary-rgb), 0.18);
    background: var(--cs-surface);
    color: var(--cs-brand-primary);
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
}

.cs-ai-help-suggestion:hover,
.cs-ai-help-suggestion:focus {
    background: var(--cs-primary-soft-bg);
}

.cs-ai-help-form {
    padding: 0.85rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--cs-surface);
}

.cs-ai-help-input-row {
    display: flex;
    gap: 0.55rem;
}

.cs-ai-help-input {
    min-height: 2.65rem;
    max-height: 8rem;
    resize: none;
    border-radius: 1rem;
    font-size: 0.9rem;
}

.cs-ai-help-send {
    width: 2.65rem;
    height: 2.65rem;
    min-width: 2.65rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cs-ai-help-footnote {
    margin-top: 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    line-height: 1.35;
}

.cs-ai-help-open-ticket {
    color: var(--cs-brand-primary);
    font-weight: 700;
    text-decoration: none;
}

.cs-ai-help-open-ticket:hover,
.cs-ai-help-open-ticket:focus {
    color: var(--cs-link-hover);
}

.cs-ai-help-typing {
    display: inline-flex;
    gap: 0.2rem;
    align-items: center;
}

.cs-ai-help-typing span {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: var(--bs-secondary-color);
    animation: csAiHelpTyping 1s ease-in-out infinite;
}

.cs-ai-help-typing span:nth-child(2) {
    animation-delay: 0.12s;
}

.cs-ai-help-typing span:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes csAiHelpTyping {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

@media (max-width: 575.98px) {
    .cs-ai-help-widget {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .cs-ai-help-button {
        margin-left: auto;
        display: flex;
    }

    .cs-ai-help-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: calc(100dvh - 2rem);
        border-radius: 1.25rem;
    }

    .cs-ai-help-messages {
        min-height: 0;
    }
}

/**********************************/

.tooltip.cs-ai-help-tooltip {
    z-index: 6000 !important;
}

/*************************************/

.clients-filter-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        grid-template-rows 220ms ease,
        opacity 180ms ease,
        transform 220ms ease;
}

.clients-filter-collapse.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.clients-filter-collapse-inner {
    overflow: hidden;
}

/*****************************************/

.trans-up-3px {
  display: inline-block;
  transition:
    transform 0.2s ease-in-out,
    color 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

.trans-up-3px:hover {
  transform: translateY(-3px);
}

.trans-up-3px.is-active {
  color: var(--bs-emphasis-color) !important;
  transform: translateY(-3px);
}

/*******************************************************
 * COOKIE NOTICE
 *******************************************************/

.cs-cookie-notice {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5990;
    padding: 0.85rem 0;
    color: var(--bs-body-color);
    background: rgba(var(--bs-body-bg-rgb), 0.97);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(14px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.cs-cookie-notice[hidden] {
    display: none !important;
}

.cs-cookie-notice.is-hiding {
    opacity: 0;
    transform: translateY(100%);
}

.cs-cookie-notice__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.cs-cookie-notice__text {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

.cs-cookie-notice__text a {
    margin-left: 0.25rem;
    color: var(--bs-emphasis-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15rem;
}

.cs-cookie-notice__text a:hover,
.cs-cookie-notice__text a:focus {
    color: var(--cs-brand-primary);
}

.cs-cookie-notice__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0.65rem;
}

.cs-cookie-notice__accept,
.cs-cookie-notice__reject {
    flex: 0 0 auto;
}

body.cs-cookie-notice-visible {
    padding-bottom: 5rem;
}

@media (max-width: 767.98px) {
    .cs-cookie-notice {
        padding: 1rem 0;
    }

    .cs-cookie-notice__inner {
        align-items: stretch;
        flex-direction: column;
        gap: 0.85rem;
    }

    .cs-cookie-notice__actions {
        width: 100%;
    }

    .cs-cookie-notice__accept,
    .cs-cookie-notice__reject {
        flex: 1 1 0;
    }

    body.cs-cookie-notice-visible {
        padding-bottom: 10rem;
    }
}

/* =========================================================
   Hidden home redesign preview page
   ========================================================= */

/*
 * The global main element uses display:flex.
 * The preview page contains several full-width page sections,
 * so it must use normal vertical document flow.
 */
main.cs-home-preview {
    display: block;
    width: 100%;
    min-width: 0;
}

main.cs-home-preview > * {
    width: 100%;
    min-width: 0;
}

/* =========================================================
   Home redesign preview hero foundation
   ========================================================= */

.cs-home-preview .cs-home-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    overflow: clip;
}

.cs-home-preview .cs-home-hero__container {
    position: relative;
    z-index: 2;
    padding-top: clamp(2.5rem, 4vw, 4rem);
    padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.cs-home-preview .cs-home-hero__layout {
    min-height: min(720px, calc(100vh - 4.25rem));
}

.cs-home-preview .cs-home-hero__content,
.cs-home-preview .cs-home-hero__visual {
    min-width: 0;
}

.cs-home-preview .cs-home-hero__visual {
    position: relative;
}

@media (max-width: 991.98px) {
    .cs-home-preview .cs-home-hero__container {
        padding-top: 2.5rem;
        padding-bottom: 3.5rem;
    }

    .cs-home-preview .cs-home-hero__layout {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .cs-home-preview .cs-home-hero__container {
        padding-top: 1.5rem;
        padding-bottom: 2.75rem;
    }
}

/* =========================================================
   Home redesign preview – responsive hero stage
   ========================================================= */

/* ---------------------------------------------------------
   Mobile visual shown before the hero copy
   --------------------------------------------------------- */

.cs-home-preview .cs-home-hero__mobile-art {
    position: relative;
    min-height: clamp(190px, 56vw, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    pointer-events: none;
}

.cs-home-preview .cs-home-hero__mobile-art-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(82vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            circle,
            rgba(var(--cs-brand-mid-rgb), 0.20) 0%,
        rgba(var(--cs-brand-start-rgb), 0.10) 38%,
        rgba(var(--cs-brand-end-rgb), 0.05) 56%,
            transparent 72%
        );
    filter: blur(10px); 
}

.cs-home-preview .cs-home-hero__mobile-art-img {
    position: relative;
    z-index: 2;
    display: block;
    width: clamp(190px, 62vw, 310px);
    height: auto;
    filter:
      drop-shadow(
          0 1rem 1.7rem
          rgba(var(--cs-brand-start-rgb), 0.25)
      )
      drop-shadow(
          0 0.35rem 0.85rem
          rgba(var(--cs-brand-end-rgb), 0.12)
      );
    animation: csHomeHeroMobileFloat 5.5s ease-in-out infinite;
}

.cs-home-preview .cs-home-hero__mobile-earth-rim {
    position: absolute;
    z-index: 1;

    left: 50%;
    bottom: -40px;

    width: 100vw;
    height: auto;

    transform: translateX(-50%);

    pointer-events: none;
}

.cs-home-preview .cs-home-hero__mobile-earth-rim-img {
    display: block;

    width: 100%;
    height: auto;
    max-width: none;

    pointer-events: none;
    user-select: none;
}

@keyframes csHomeHeroMobileFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1deg);
    }

    50% {
        transform: translate3d(0, -9px, 0) rotate(1deg);
    }
}

/* ---------------------------------------------------------
   Desktop robot + snippet composition
   --------------------------------------------------------- */

.cs-home-preview .cs-home-hero__stage {
    position: relative;
    width: 100%;
    min-height: clamp(540px, 43vw, 680px);
}

.cs-home-preview .cs-home-hero__stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 4%;
    right: -4%;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(var(--cs-brand-mid-rgb), 0.14) 0%,
            rgba(var(--cs-brand-start-rgb), 0.07) 42%,
            rgba(var(--cs-brand-end-rgb), 0.04) 58%,
            transparent 74%
        );
    filter: blur(12px);
}

.cs-home-preview .cs-home-hero__stage .cs-hero-code-robot-wrap {
    position: absolute;
    z-index: 3;
    top: -0.5rem;
    right: 1.25rem;
    width: min(52%, 320px);
    min-height: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
}

.cs-home-preview .cs-home-hero__stage .cs-hero-code-robot {
    width: min(100%, 285px);
    height: auto;
    aspect-ratio: 1.3;
}

.cs-home-preview .cs-home-hero__stage .cs-hero-ai-robot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
}

.cs-home-preview .cs-home-hero__stage .cs-hero-code-wrapper {
    position: absolute;
    z-index: 2;
    left: 0;
    right: -2.5rem;
    bottom: 1.5rem;
    width: auto;
    margin: 0;
    overflow: visible;
}

/* ---------------------------------------------------------
   Hero product video glow
   --------------------------------------------------------- */

.cs-home-preview .cs-home-hero__stage .cs-hero-code-wrapper {
    isolation: isolate;
}

.cs-home-preview .cs-home-hero__video-shell {
    position: relative;
    z-index: 2;
}

.cs-home-preview .cs-home-hero__video-preview {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.cs-home-preview .cs-home-hero__video {
    position: absolute;
    z-index: 2;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;
    transition: opacity 180ms ease;
}

.cs-home-preview
.cs-home-hero__video-shell.is-playing
.cs-home-hero__video {
    opacity: 1;
}

.cs-home-preview .cs-home-hero__video-glow {
    position: absolute;
    z-index: 1;
    inset: -8% -7% -10%;
    pointer-events: none;
    border-radius: 2rem;

    background:
      radial-gradient(
          ellipse at 24% 28%,
          rgba(var(--cs-brand-start-rgb), 0.42) 0%,
          rgba(var(--cs-brand-mid-rgb), 0.20) 36%,
          transparent 68%
      ),
      radial-gradient(
          ellipse at 80% 74%,
          rgba(var(--cs-brand-end-rgb), 0.34) 0%,
          rgba(var(--cs-brand-mid-rgb), 0.16) 36%,
          transparent 70%
      );

    filter: blur(30px);
    opacity: 0.48;
    transform: translateZ(0);
}

[data-bs-theme="dark"]
.cs-home-preview
.cs-home-hero__video-glow {
    opacity: 0.68;
}

@media (max-width: 991.98px) {
    .cs-home-preview .cs-home-hero__video-glow {
        inset: -5% -7% -6%;
        filter: blur(24px);
        opacity: 0.42;
    }

    [data-bs-theme="dark"]
    .cs-home-preview
    .cs-home-hero__video-glow {
        opacity: 0.60;
    }
}

/* Gradient border shell - cleaned up for light/dark mode */

.cs-home-preview .cs-home-hero__stage .cs-hero-code-card {
    --cs-hero-code-surface: rgba(255, 255, 255, 0.92);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;

    border: 2px solid transparent;
    border-radius: 1.45rem;

    background:
        linear-gradient(
            var(--cs-hero-code-surface),
            var(--cs-hero-code-surface)
        ) padding-box,
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.95) 0%,
            rgba(var(--cs-brand-primary-rgb), 0.88) 38%,
            rgba(var(--cs-brand-mid-rgb), 0.82) 68%,
            rgba(var(--cs-brand-end-rgb), 0.92) 100%
        ) border-box;

    background-clip: padding-box, border-box;

    box-shadow:
        0 1.5rem 3.75rem rgba(15, 23, 42, 0.14),
        0 0 2rem rgba(var(--cs-brand-start-rgb), 0.10);
}

[data-bs-theme="dark"]
.cs-home-preview
.cs-home-hero__stage
.cs-hero-code-card {
    --cs-hero-code-surface: rgba(15, 17, 21, 0.90);

    box-shadow:
        0 1.5rem 3.75rem rgba(2, 6, 23, 0.34),
        0 0 2.2rem rgba(var(--cs-brand-start-rgb), 0.14);
}

.cs-home-preview .cs-home-hero__stage .cs-hero-code-card::before {
    content: none;
}

.cs-home-preview .cs-home-hero__stage .cs-hero-code-body {
    position: relative;
    z-index: 2;
    border-radius: inherit;
}

.cs-home-preview .cs-home-hero__stage .cs-hero-code-glow {
    position: absolute;
    z-index: 0;
    inset: 18% 10% 12% 10%;
    pointer-events: none;
    opacity: 0.08;
    background:
      radial-gradient(
          circle at 68% 32%,
          rgba(var(--cs-brand-mid-rgb), 0.18),
          transparent 34%
      ),
      radial-gradient(
          circle at 28% 78%,
          rgba(var(--cs-brand-end-rgb), 0.10),
          transparent 30%
      );
    filter: blur(32px);
}

[data-bs-theme="dark"]
.cs-home-preview
.cs-home-hero__stage
.cs-hero-code-glow {
    opacity: 0.22;
}

/* ---------------------------------------------------------
   Mobile feature strip
   --------------------------------------------------------- */

.cs-home-preview .cs-home-hero__mobile-features {
    width: 100%;
    margin-top: 1.75rem;
    padding: 0.9rem 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cs-home-preview .cs-home-hero__mobile-feature {
    position: relative;
    min-width: 0;
    padding: 0 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    text-align: center;
}

.cs-home-preview
.cs-home-hero__mobile-feature
+ .cs-home-hero__mobile-feature::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 1px;
    background: rgba(var(--bs-primary-rgb), 0.14);
}

.cs-home-preview .cs-home-hero__mobile-feature i {
    font-size: 1.35rem;
    line-height: 1;
    background: var(--cs-gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.cs-home-preview .cs-home-hero__mobile-feature span {
    display: block;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: clamp(0.58rem, 2.15vw, 0.72rem);
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Tablet and mobile alignment
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .cs-home-preview .cs-home-hero__layout {
        text-align: center;
    }

    .cs-home-preview .cs-home-hero__content {
        text-align: center;
    }

    .cs-home-preview .cs-home-hero__actions {
        align-items: center !important;
    }

    .cs-home-preview .cs-home-hero__buttons,
    .cs-home-preview .cs-home-hero__proof {
        justify-content: center;
    }

    .cs-home-preview .cs-home-hero__stage {
        min-height: 0;
        margin-top: 2.25rem;
    }

    .cs-home-preview .cs-home-hero__stage::before {
        top: 50%;
        right: 50%;
        width: min(95vw, 520px);
        transform: translate(50%, -50%);
    }

    .cs-home-preview .cs-home-hero__stage .cs-hero-code-wrapper {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 0;
    }

    .cs-home-preview .cs-home-hero__stage .cs-hero-code-card {
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 575.98px) {
    .cs-home-preview .cs-home-hero__buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .cs-home-preview .cs-home-hero__buttons .btn {
        width: 100%;
    }

    .cs-home-preview .cs-home-hero__proof {
        flex-direction: column;
        align-items: center;
        gap: 0.35rem !important;
    }

    .cs-home-preview .cs-home-hero__stage {
        margin-top: 1.75rem;
    }

    .cs-home-preview .cs-home-hero__stage .cs-hero-code-body {
        font-size: clamp(0.76rem, 3vw, 0.9rem);
        padding: 1rem 0.75rem;
    }
}

/* ---------------------------------------------------------
   Preview Earth horizon
   --------------------------------------------------------- */

.cs-home-preview .cs-home-hero {
    padding-bottom: 0;
}

.cs-home-preview .cs-home-hero .cs-home-hero__container {
    position: relative;
    z-index: 2;
}

.cs-home-preview .cs-home-hero .cs-home-hero__earth-rim {
    position: relative;
    z-index: 0;

    width: 100%;
    height: auto;

    margin-top: 0;

    pointer-events: none;
}

.cs-home-preview .cs-home-hero .cs-home-hero__earth-rim-img {
    display: block;

    width: 100%;
    height: auto;
    max-width: none;

    pointer-events: none;
    user-select: none;
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .cs-home-preview .cs-home-hero__mobile-art-img,
    .cs-home-preview .cs-home-hero__stage .cs-hero-code-card {
        animation: none !important;
    }
}

/* Live badge */

main.cs-home-preview .text-bg-primary,
main.cs-home-preview .badge.text-bg-primary,
main.cs-home-preview .badge.cs-bg-soft-grey.text-primary {
    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.26),
            rgba(var(--cs-brand-mid-rgb), 0.22) 55%,
            rgba(var(--cs-brand-end-rgb), 0.18)
        ) !important;

    border-color: rgba(var(--cs-brand-mid-rgb), 0.30);
}


/* Outline CTA */

main.cs-home-preview .btn-outline-primary {
    background: rgba(var(--cs-brand-start-rgb), 0.035);
    border-color: rgba(var(--cs-brand-primary-rgb), 0.58);
color: var(--cs-primary-soft-color);
}

main.cs-home-preview .btn-outline-primary:hover,
main.cs-home-preview .btn-outline-primary:focus {
    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.22),
            rgba(var(--cs-brand-mid-rgb), 0.18) 55%,
            rgba(var(--cs-brand-end-rgb), 0.14)
        );

    border-color: rgba(var(--cs-brand-primary-rgb), 0.85);
    color: #ffffff;

    box-shadow:
        0 0.4rem 1.3rem rgba(var(--cs-brand-mid-rgb), 0.22);
}


/* Desktop ambient hero glow */

main.cs-home-preview .cs-home-hero__stage::before {
    background:
        radial-gradient(
            circle,
            rgba(var(--cs-brand-mid-rgb), 0.14) 0%,
            rgba(var(--cs-brand-start-rgb), 0.075) 42%,
            rgba(var(--cs-brand-end-rgb), 0.055) 60%,
            transparent 74%
        );
}


/* Desktop robot glow */

main.cs-home-preview
.cs-home-hero__stage
.cs-hero-code-robot {
    filter:
        drop-shadow(
            0 1rem 1.8rem
            rgba(var(--cs-brand-start-rgb), 0.22)
        )
        drop-shadow(
            0 0.45rem 1rem
            rgba(var(--cs-brand-end-rgb), 0.10)
        );
}


/* Mobile robot background glow */

main.cs-home-preview .cs-home-hero__mobile-art-glow {
    background:
        radial-gradient(
            circle,
            rgba(var(--cs-brand-mid-rgb), 0.20) 0%,
            rgba(var(--cs-brand-start-rgb), 0.11) 38%,
            rgba(var(--cs-brand-end-rgb), 0.065) 58%,
            transparent 72%
        );
}

main.cs-home-preview .cs-home-hero__mobile-art-img {
    filter:
        drop-shadow(
            0 1rem 1.7rem
            rgba(var(--cs-brand-start-rgb), 0.22)
        )
        drop-shadow(
            0 0.35rem 0.9rem
            rgba(var(--cs-brand-end-rgb), 0.14)
        );
}


/* Product video glow */

main.cs-home-preview .cs-home-hero__video-glow {
    background:
        radial-gradient(
            ellipse at 22% 26%,
            rgba(var(--cs-brand-start-rgb), 0.62) 0%,
            rgba(var(--cs-brand-mid-rgb), 0.53) 38%,
            transparent 69%
        ),
        radial-gradient(
            ellipse at 80% 76%,
            rgba(var(--cs-brand-end-rgb), 0.58) 0%,
            rgba(var(--cs-brand-mid-rgb), 0.40) 38%,
            transparent 70%
        );
}

/* =========================================================
   Workspace import source chooser
   ========================================================= */

.cs-import-source-dialog {
    width: min(760px, calc(100vw - 2rem));
    max-width: 760px;
}

.cs-import-source-content {
    position: relative;
    overflow: hidden;

    border:
        1px solid
        rgba(
            var(--cs-brand-primary-rgb),
            0.22
        );

    border-radius: 1.5rem;

    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(var(--cs-brand-start-rgb), 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(var(--cs-brand-end-rgb), 0.07),
            transparent 30%
        ),
        var(--cs-surface);

    box-shadow:
        0 1.75rem 4.5rem rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset;
}

[data-bs-theme="dark"] .cs-import-source-content {
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.48),
        0 0 2.5rem
        rgba(
            var(--cs-brand-start-rgb),
            0.07
        );
}

.cs-import-source-header {
    position: relative;
    z-index: 1;

    padding:
        1.5rem
        1.5rem
        0;
}

.cs-import-source-brand-icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 1rem;

    color: #fff;

    background:
        var(--cs-gradient-primary);

    box-shadow:
        0 0.7rem 1.8rem
        var(--cs-primary-glow);

    font-size: 1.25rem;
}

.cs-import-source-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;

    margin-bottom: 0.35rem;

    color: var(--bs-secondary-color);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cs-import-source-destination {
    display: inline-flex;
    align-items: center;

    max-width: 18rem;

    padding: 0.25rem 0.55rem;

    border:
        1px solid
        rgba(
            var(--cs-brand-primary-rgb),
            0.18
        );

    border-radius: 999px;

    background:
        var(--cs-primary-soft-bg);

    color:
        var(--cs-primary-soft-color);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-transform: none;
    letter-spacing: normal;
}

.cs-import-source-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;
}

.cs-import-source-card {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 210px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 1.25rem;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 1.35rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.54
        );

    color:
        var(--bs-body-color);

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 0.55rem 1.5rem
        rgba(15, 23, 42, 0.035);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.cs-import-source-card::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(var(--cs-brand-start-rgb), 0.16),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.07),
            rgba(var(--cs-brand-end-rgb), 0.035)
        );

    transition:
        opacity 0.2s ease;
}

.cs-import-source-card:hover,
.cs-import-source-card:focus-visible {
    transform: translateY(-3px);

    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.45
        );

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.75
        );

    box-shadow:
        0 1rem 2.5rem
        rgba(15, 23, 42, 0.10),
        0 0 0 1px
        rgba(
            var(--cs-brand-primary-rgb),
            0.05
        );
}

[data-bs-theme="dark"]
.cs-import-source-card:hover,
[data-bs-theme="dark"]
.cs-import-source-card:focus-visible {
    box-shadow:
        0 1.1rem 2.8rem
        rgba(0, 0, 0, 0.34),
        0 0 1.8rem
        rgba(
            var(--cs-brand-start-rgb),
            0.08
        );
}

.cs-import-source-card:hover::before,
.cs-import-source-card:focus-visible::before {
    opacity: 1;
}

.cs-import-source-card:focus-visible {
    outline: 0;

    box-shadow:
        0 0 0 0.22rem
        rgba(
            var(--cs-brand-primary-rgb),
            0.16
        ),
        0 1rem 2.5rem
        rgba(15, 23, 42, 0.10);
}

.cs-import-source-card-icon,
.cs-import-source-card-content,
.cs-import-source-card-arrow {
    position: relative;
    z-index: 1;
}

.cs-import-source-card-icon {
    width: 3.25rem;
    height: 3.25rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: 1rem;

    background:
        var(--cs-primary-soft-bg);

    color:
        var(--cs-primary-soft-color);

    font-size: 1.45rem;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            var(--cs-brand-primary-rgb),
            0.10
        );

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.cs-import-source-card--github
.cs-import-source-card-icon {
    color: var(--bs-emphasis-color);

    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.16),
            rgba(var(--cs-brand-end-rgb), 0.08)
        );
}

.cs-import-source-card:hover
.cs-import-source-card-icon {
    transform:
        translateY(-2px)
        scale(1.04);

    box-shadow:
        0 0.7rem 1.6rem
        rgba(
            var(--cs-brand-start-rgb),
            0.16
        );
}

.cs-import-source-card-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    flex: 1 1 auto;
}

.cs-import-source-card-title {
    color:
        var(--bs-emphasis-color);

    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.25;
}

.cs-import-source-card-badge {
    display: inline-flex;
    align-items: center;

    padding: 0.25rem 0.5rem;

    border:
        1px solid
        rgba(
            var(--cs-brand-primary-rgb),
            0.18
        );

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.16),
            rgba(var(--cs-brand-end-rgb), 0.09)
        );

    color:
        var(--cs-primary-soft-color);

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.cs-import-source-card-text {
    display: block;

    margin-top: 0.55rem;

    color:
        var(--bs-secondary-color);

    font-size: 0.86rem;
    line-height: 1.5;
}

.cs-import-source-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    margin-top: auto;
    padding-top: 1rem;

    color:
        var(--bs-secondary-color);

    font-size: 0.75rem;
    font-weight: 650;
}

.cs-import-source-card-meta i {
    color:
        var(--cs-brand-primary);
}

.cs-import-source-card-arrow {
    position: absolute;

    right: 1rem;
    bottom: 1rem;

    width: 2rem;
    height: 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    color:
        var(--cs-brand-primary);

    background:
        rgba(
            var(--cs-brand-start-rgb),
            0.07
        );

    opacity: 0.6;

    transform:
        translateX(-3px);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        background 0.2s ease;
}

.cs-import-source-card:hover
.cs-import-source-card-arrow,
.cs-import-source-card:focus-visible
.cs-import-source-card-arrow {
    opacity: 1;

    transform:
        translateX(0);

    background:
        var(--cs-primary-soft-bg);
}

.cs-import-source-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    margin-top: 1.1rem;

    color:
        var(--bs-secondary-color);

    font-size: 0.76rem;
    line-height: 1.35;
}

.cs-import-source-footnote i {
    color:
        var(--bs-success);
}

@media (max-width: 767.98px) {

    .cs-import-source-dialog {
        width:
            calc(100vw - 1rem);

        margin:
            0.5rem auto;
    }

    .cs-import-source-content {
        border-radius:
            1.25rem;
    }

    .cs-import-source-header {
        padding:
            1.2rem
            1.2rem
            0;
    }

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

    .cs-import-source-card {
        min-height: 170px;
    }

}

@media (max-width: 575.98px) {

    .cs-import-source-brand-icon {
        width: 2.6rem;
        height: 2.6rem;
        min-width: 2.6rem;

        border-radius: 0.9rem;

        font-size: 1.1rem;
    }

    .cs-import-source-card {
        padding: 1.05rem;

        border-radius: 1.15rem;
    }

    .cs-import-source-card-icon {
        width: 2.9rem;
        height: 2.9rem;

        margin-bottom: 0.8rem;

        font-size: 1.3rem;
    }

    .cs-import-source-footnote {
        align-items: flex-start;

        text-align: left;
    }

}

@media (prefers-reduced-motion: reduce) {

    .cs-import-source-card,
    .cs-import-source-card::before,
    .cs-import-source-card-icon,
    .cs-import-source-card-arrow {
        transition: none;
    }

}

/* =========================================================
   Workspace import source - coming soon state
   ========================================================= */

.cs-import-source-card.is-coming-soon {
    opacity: 0.72;
    cursor: not-allowed;
}

.cs-import-source-card.is-coming-soon:hover,
.cs-import-source-card.is-coming-soon:focus-visible {
    transform: translateY(-1px);

    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.22
        );

    box-shadow:
        0 0.7rem 1.8rem
        rgba(15, 23, 42, 0.055);
}

[data-bs-theme="dark"]
.cs-import-source-card.is-coming-soon:hover,
[data-bs-theme="dark"]
.cs-import-source-card.is-coming-soon:focus-visible {
    box-shadow:
        0 0.8rem 2rem
        rgba(0, 0, 0, 0.24);
}

.cs-import-source-card.is-coming-soon::before {
    opacity: 0 !important;
}

.cs-import-source-card.is-coming-soon:hover
.cs-import-source-card-icon,
.cs-import-source-card.is-coming-soon:focus-visible
.cs-import-source-card-icon {
    transform: none;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            var(--cs-brand-primary-rgb),
            0.10
        );
}

.cs-import-source-card.is-coming-soon
.cs-import-source-card-arrow {
    display: none;
}

.cs-import-source-card-badge--soon {
    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.24),
            rgba(var(--cs-brand-mid-rgb), 0.17) 55%,
            rgba(var(--cs-brand-end-rgb), 0.14)
        );

    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.26
        );

    color:
        var(--cs-primary-soft-color);
}

/* =========================================================
   Workspace GitHub Repository Import
   ========================================================= */

.cs-github-import-dialog {
    width: min(980px, calc(100vw - 2rem));
    max-width: 980px;
}

.cs-github-import-content {
    position: relative;
    overflow: hidden;

    min-height: 620px;

    border:
        1px solid
        rgba(
            var(--cs-brand-primary-rgb),
            0.28
        );

    border-radius: 1.55rem;

    background:
        radial-gradient(
            circle at 96% 0%,
            rgba(var(--cs-brand-start-rgb), 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 4% 100%,
            rgba(var(--cs-brand-end-rgb), 0.06),
            transparent 28%
        ),
        var(--cs-surface);

    box-shadow:
        0 2rem 5rem
        rgba(15, 23, 42, 0.18);
}

[data-bs-theme="dark"]
.cs-github-import-content {
    box-shadow:
        0 2.2rem 5.5rem
        rgba(0, 0, 0, 0.52),
        0 0 3rem
        rgba(
            var(--cs-brand-start-rgb),
            0.07
        );
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.cs-github-import-logo {
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 1rem;

    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.22),
            rgba(var(--cs-brand-mid-rgb), 0.13)
        );

    color:
        var(--bs-emphasis-color);

    font-size: 1.55rem;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            var(--cs-brand-primary-rgb),
            0.15
        ),
        0 0.8rem 2rem
        rgba(
            var(--cs-brand-start-rgb),
            0.12
        );
}

.cs-github-import-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;

    margin-bottom: 0.35rem;

    color:
        var(--bs-secondary-color);

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cs-github-import-destination {
    display: inline-flex;
    align-items: center;

    max-width: 19rem;

    padding: 0.24rem 0.55rem;

    border:
        1px solid
        rgba(
            var(--cs-brand-primary-rgb),
            0.18
        );

    border-radius: 999px;

    background:
        var(--cs-primary-soft-bg);

    color:
        var(--cs-primary-soft-color);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    text-transform: none;
    letter-spacing: normal;
}


/* ---------------------------------------------------------
   Progress steps
   --------------------------------------------------------- */

.cs-github-import-steps {
    display: flex;
    align-items: center;

    margin-bottom: 2rem;

    padding: 1rem 1.1rem;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 1rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.44
        );
}

.cs-github-import-step {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    flex: 0 0 auto;

    color:
        var(--bs-secondary-color);

    font-size: 0.78rem;
    font-weight: 700;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.cs-github-import-step-number {
    width: 1.8rem;
    height: 1.8rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 999px;

    background:
        var(--cs-surface);

    color:
        var(--bs-secondary-color);

    font-size: 0.72rem;
    font-weight: 800;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.cs-github-import-step.is-active {
    color:
        var(--bs-emphasis-color);
}

.cs-github-import-step.is-active
.cs-github-import-step-number {
    border-color:
        transparent;

    background:
        var(--cs-gradient-primary);

    color:
        #fff;

    box-shadow:
        0 0.5rem 1.3rem
        var(--cs-primary-glow);
}

.cs-github-import-step.is-complete
.cs-github-import-step-number {
    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.32
        );

    background:
        var(--cs-primary-soft-bg);

    color:
        var(--cs-primary-soft-color);
}

.cs-github-import-step-line {
    height: 1px;

    flex: 1 1 auto;

    margin:
        0 0.85rem;

    background:
        var(--bs-border-color);
}


/* ---------------------------------------------------------
   Panels
   --------------------------------------------------------- */

.cs-github-import-panel {
    animation:
        csGithubImportPanelIn
        180ms ease-out;
}

@keyframes csGithubImportPanelIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cs-github-import-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.8rem;
}


/* ---------------------------------------------------------
   Placeholder / loading
   --------------------------------------------------------- */

.cs-github-import-placeholder {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;

    padding: 1rem;

    border:
        1px dashed
        var(--bs-border-color);

    border-radius: 1rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.35
        );

    color:
        var(--bs-secondary-color);

    font-size: 0.82rem;

    text-align: center;
}


/* ---------------------------------------------------------
   GitHub account list
   --------------------------------------------------------- */

.cs-github-import-account-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 0.75rem;
}

.cs-github-import-account-card {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 0.8rem;

    padding: 0.9rem 1rem;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 1rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.46
        );

    color:
        var(--bs-body-color);

    text-align: left;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.cs-github-import-account-card:hover,
.cs-github-import-account-card:focus-visible {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.40
        );

    outline: 0;

    box-shadow:
        0 0.75rem 2rem
        rgba(15, 23, 42, 0.07);
}

.cs-github-import-account-card.is-selected {
    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.72
        );

    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.12),
            rgba(var(--cs-brand-mid-rgb), 0.055)
        );

    box-shadow:
        0 0 0 1px
        rgba(
            var(--cs-brand-primary-rgb),
            0.08
        );
}

.cs-github-import-account-icon {
    width: 2.6rem;
    height: 2.6rem;
    min-width: 2.6rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 0.85rem;

    background:
        var(--cs-primary-soft-bg);

    color:
        var(--bs-emphasis-color);

    font-size: 1.2rem;
}


/* ---------------------------------------------------------
   Repository cards
   --------------------------------------------------------- */

.cs-github-import-repository-list {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 0.75rem;
}

.cs-github-import-repository-card {
    position: relative;

    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 0.85rem;

    padding: 1rem;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 1rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.42
        );

    color:
        var(--bs-body-color);

    text-align: left;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.cs-github-import-repository-card:hover,
.cs-github-import-repository-card:focus-visible {
    transform:
        translateY(-2px);

    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.42
        );

    outline: 0;

    box-shadow:
        0 0.8rem 2rem
        rgba(15, 23, 42, 0.07);
}

.cs-github-import-repository-card.is-selected {
    border-color:
        rgba(
            var(--cs-brand-primary-rgb),
            0.75
        );

    background:
        linear-gradient(
            135deg,
            rgba(var(--cs-brand-start-rgb), 0.12),
            rgba(var(--cs-brand-end-rgb), 0.045)
        );
}

.cs-github-import-repository-icon {
    width: 2.7rem;
    height: 2.7rem;
    min-width: 2.7rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 0.85rem;

    background:
        rgba(
            var(--cs-brand-start-rgb),
            0.10
        );

    color:
        var(--cs-brand-primary);

    font-size: 1.2rem;
}

.cs-github-import-repository-main {
    min-width: 0;
    flex: 1 1 auto;
}

.cs-github-import-repository-name {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--bs-emphasis-color);

    font-size: 0.88rem;
    font-weight: 750;
}

.cs-github-import-repository-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;

    margin-top: 0.25rem;

    color:
        var(--bs-secondary-color);

    font-size: 0.72rem;
}


/* ---------------------------------------------------------
   File tree toolbar
   --------------------------------------------------------- */

.cs-github-import-tree-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    margin-bottom: 0.85rem;
}

.cs-github-import-tree-search {
    padding-left: 2.25rem;

    border-radius: 0.9rem;
}

.cs-github-import-tree-search-icon {
    position: absolute;

    left: 0.8rem;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 2;

    color:
        var(--bs-secondary-color);

    pointer-events: none;
}

.cs-github-import-selection-count {
    display: inline-flex;
    align-items: center;

    padding: 0.35rem 0.65rem;

    border:
        1px solid
        rgba(
            var(--cs-brand-primary-rgb),
            0.18
        );

    border-radius: 999px;

    background:
        var(--cs-primary-soft-bg);

    color:
        var(--cs-primary-soft-color);

    font-size: 0.72rem;
    font-weight: 800;
}


/* ---------------------------------------------------------
   Repository tree
   --------------------------------------------------------- */

.cs-github-import-tree {
    min-height: 310px;
    max-height: 370px;

    overflow: auto;

    padding: 0.55rem;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 1rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.38
        );
}

.cs-github-import-tree-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;

    min-height: 38px;

    padding:
        0.4rem
        0.55rem;

    border-radius: 0.7rem;

    transition:
        background 0.15s ease;
}

.cs-github-import-tree-row:hover {
    background:
        var(--cs-bg-soft-grey);
}

.cs-github-import-tree-toggle {
    width: 1.4rem;
    min-width: 1.4rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        var(--bs-secondary-color);
}

.cs-github-import-tree-check {
    margin: 0;

    flex: 0 0 auto;
}

.cs-github-import-tree-type {
    width: 1.35rem;
    min-width: 1.35rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color:
        var(--cs-brand-primary);
}

.cs-github-import-tree-type--file {
    color:
        var(--bs-secondary-color);
}

.cs-github-import-tree-name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--bs-body-color);

    font-size: 0.82rem;
}

.cs-github-import-tree-size {
    margin-left: auto;

    color:
        var(--bs-secondary-color);

    font-size: 0.7rem;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   Review
   --------------------------------------------------------- */

.cs-github-import-review-summary {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 0.75rem;

    margin-top: 1rem;
    margin-bottom: 1rem;
}

.cs-github-import-review-stat {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 0.75rem;

    padding: 0.85rem;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 1rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.42
        );
}

.cs-github-import-review-stat-icon {
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 0.8rem;

    background:
        var(--cs-primary-soft-bg);

    color:
        var(--cs-primary-soft-color);

    font-size: 1rem;
}

.cs-github-import-preview-list {
    min-height: 250px;
    max-height: 330px;

    overflow: auto;

    padding: 0.55rem;

    border:
        1px solid
        var(--bs-border-color);

    border-radius: 1rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.38
        );
}

.cs-github-import-preview-item {
    padding: 0.8rem;

    border-radius: 0.8rem;

    background:
        rgba(
            var(--bs-body-bg-rgb),
            0.42
        );
}

.cs-github-import-preview-item
+ .cs-github-import-preview-item {
    margin-top: 0.55rem;
}

.cs-github-import-preview-path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color:
        var(--bs-emphasis-color);

    font-size: 0.8rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.cs-github-import-footer {
    padding-top: 0.9rem;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(
                var(--bs-body-bg-rgb),
                0.28
            )
        );
}


/* ---------------------------------------------------------
   Dark mode detail
   --------------------------------------------------------- */

[data-bs-theme="dark"]
.cs-github-import-account-card:hover,
[data-bs-theme="dark"]
.cs-github-import-repository-card:hover {
    box-shadow:
        0 0.8rem 2rem
        rgba(0, 0, 0, 0.26);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    .cs-github-import-dialog {
        width:
            calc(100vw - 1rem);

        margin:
            0.5rem auto;
    }

    .cs-github-import-content {
        min-height: auto;

        border-radius:
            1.25rem;
    }

    .cs-github-import-repository-list {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .cs-github-import-step-label {
        display: none;
    }

    .cs-github-import-step-line {
        margin:
            0 0.45rem;
    }

    .cs-github-import-review-summary {
        grid-template-columns:
            minmax(0, 1fr);
    }

}


@media (max-width: 575.98px) {

    .cs-github-import-tree-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .cs-github-import-account-list {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .cs-github-import-tree {
        min-height: 280px;
    }

    .cs-github-import-footer
    > .d-flex {
        align-items: stretch !important;
        flex-direction: column;
    }

    .cs-github-import-footer
    .ms-auto {
        width: 100%;

        margin-left: 0 !important;
    }

    .cs-github-import-footer
    .ms-auto
    .btn {
        flex: 1 1 auto;
    }

}


@media (prefers-reduced-motion: reduce) {

    .cs-github-import-panel,
    .cs-github-import-account-card,
    .cs-github-import-repository-card {
        animation: none;
        transition: none;
    }

}