/* STYLEGUIDE */
:root {
    --black: #050505;
    --grey-700: #313E4D;
    --grey-600: #646B79;
    --grey-500: #898F9F;
    --grey-400: #CED2DB;
    --grey-300: #DCDEE8;
    --grey-200: #E7E9F1;
    --grey-100: #F0F0F7;
    --grey-50: #FAFAFC;
    --white: #FFFFFF;
    --brand-500: #0A2647;
    --brand-400: #1F477F;
    --brand-300:  #2D5EA4;
    --brand-250: #8DAAD1;
    --brand-200: #7AADEB;
    --brand-100: #C7E2FF;
    --brand-50: #EEF6FF;
    --green: rgba(36,138,61, 1);
    --green-light: rgba(36,138,61, 0.1);
    --red: rgba(255, 59, 48, 1);
    --yellow: rgba(255, 159, 10, 1);
    --yellow-light: rgba(255, 159, 10, .1);
    --blue: rgba(0, 122, 255, 1);
    --blue-light: rgba(0, 122, 255, .1);
    --green-300: #338F52;
    --green-light: #F1FDF4;
    --yellow-300: #EFB615;
    --yellow-light: #FFFBEC;
    --red-300: #E13B5C;
    --red-light: #FEF3F2;

    --border-radius: 8px;
    --border-radius-lg: 16px;
    --border-radius-circle: 100px;

    --left-nav-col-width: 70px;
}

/* DARK MODE
   All dark-mode overrides live here so the variables do the heavy lifting.
   --white is intentionally NOT remapped — it doubles as text color on dark nav/buttons. */
body.dark-mode {
    /* Neutral dark grey scale — charcoal, no blue tint */
    --black:    #E8E8F0;
    --grey-700: #C8C8D4;
    --grey-600: #98989C; /* was #96A5BE */
    --grey-500: #68686E;
    --grey-400: #3C3C44;
    --grey-300: #2C2C34;
    --grey-200: #1E1E26;
    --grey-100: #141418;
    --grey-50:  #0C0C10;
    /* Brand tints — keep a hint of brand without going full navy */
    --brand-50:  #10101C;
    --brand-100: #1A1A2E;
    /* Status fill colours — reduce brightness */
    --green-light: rgba(36, 138, 61, 0.15);
    --yellow-light: rgba(255, 159, 10, 0.15);
    --red-light: rgba(225, 59, 92, 0.15);
    --blue-light: rgba(0, 122, 255, 0.15);
}

/* Surfaces that use var(--white) as a background can't be handled by variable
   remapping alone, so we list them explicitly here. */
body.dark-mode .btn-secondary,
body.dark-mode .tabs--style-1 .nav-tabs>li>a:hover:not(.active) {
    background-color: var(--grey-200) !important;
    border-color: var(--grey-300) !important;
    color: var(--brand-200) !important;
}
body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus {
    background-color: var(--grey-300) !important;
    border-color: var(--grey-400) !important;
    color: var(--brand-200) !important;
}
body.dark-mode .btn-tertiary {
    color: var(--brand-200) !important;
}
body.dark-mode .btn-tertiary:hover,
body.dark-mode .btn-tertiary:focus,
body.dark-mode .btn-tertiary.active {
    background-color: var(--grey-200) !important;
    border-color: var(--grey-200) !important;
    color: var(--brand-200) !important;
}
body.dark-mode #dashboard-list-tabs a {
    border-bottom-color: var(--grey-100) !important;
}
body.dark-mode #dashboard-list-tabs a.active,
body.dark-mode #dashboard-list-tabs a:hover {
    color: var(--brand-200) !important;
    border-bottom-color: var(--brand-200) !important;
}

/* Bootstrap utilities with hardcoded colours — override to our variables so the
   dark mode remap picks them up automatically. */
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-left,
body.dark-mode .border-right {
    border-color: var(--grey-300) !important;
}
body.dark-mode .nav-tabs {
    border-bottom-color: var(--grey-300) !important;
}
body.dark-mode .nav-tabs .nav-link:focus,
body.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--grey-300) var(--grey-300) transparent !important;
}
body.dark-mode .nav-tabs .nav-link.disabled {
    color: var(--grey-500) !important;
}
body.dark-mode .nav-tabs .nav-item.show .nav-link,
body.dark-mode .nav-tabs .nav-link.active {
    color: var(--grey-700) !important;
    background-color: var(--grey-100) !important;
    border-color: var(--grey-300) var(--grey-300) var(--grey-100) !important;
}
/* .tabs wrapper uses brand-400/300 for active colour — both too dark in dark mode */
body.dark-mode .tabs .nav-tabs .nav-item.show .nav-link,
body.dark-mode .tabs .nav-tabs .nav-link:hover {
    color: var(--grey-600) !important;
    border-color: var(--brand-200) !important;
}
body.dark-mode .tabs .nav-tabs .nav-link.active {
    color: var(--brand-200) !important;
    border-color: var(--brand-200) !important;
}
body.dark-mode .badge-light,
body.dark-mode a.badge-light {
    background-color: var(--grey-200) !important;
    color: var(--grey-700) !important;
}
body.dark-mode .badge-light:hover,
body.dark-mode a.badge-light:hover {
    background-color: var(--grey-300) !important;
}

/* --brand-500 is near-black in light mode (used as text), so it needs a specific
   colour swap in dark mode rather than remapping the variable (which would break nav backgrounds). */
body.dark-mode .c-brand-500 { color: #8DAAD1 !important; }

/* badge-elite/pro text colors invert to near-black or low-contrast in dark mode */
body.dark-mode .badge-elite,
body.dark-mode a.badge-elite { color: var(--white) !important; }
body.dark-mode .badge-pro,
body.dark-mode a.badge-pro { color: var(--brand-200) !important; }

/* bg-base-1-light uses --brand-50 which in dark mode inverts to near-black —
   override to a slightly elevated surface so it reads as a tinted highlight, not a hole. */
body.dark-mode .bg-base-1-light,
body.dark-mode .bg-primary-light {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Nav-aside: distinct dark sidebar */
body.dark-mode .navbar-aside.navbar-aside-slack-style {
    background-color: #18181E !important;
}
body.dark-mode .navbar-aside-left-column {
    background-color: #0E0E12 !important;
}

/* Nav-aside link colours stay light since background doesn't invert with variables. */
body.dark-mode .navbar-aside-right-column .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.65) !important;
}
body.dark-mode .navbar-aside-right-column .navbar-nav .nav-link:hover,
body.dark-mode .navbar-aside-right-column .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .navbar-aside-right-column .navbar-nav .nav-link.active {
    color: var(--white) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-right-color: var(--white) !important;
}
body.dark-mode .navbar-aside-right-column #add-new-pages .nav-link,
body.dark-mode .navbar-aside-right-column #add-new-pages .nav-link:hover {
    color: var(--brand-300) !important;
}
body.dark-mode #page-editor-settings {
    background: #1E1E26 !important;
    box-shadow: 0 1px 6px rgb(0 0 0 / 40%);
}
body.dark-mode #page-title-bar {
    background-color: #1E1E26 !important;
    border-color: var(--grey-300) !important;
}
body.dark-mode .card-dashboard,
body.dark-mode .card:not([class*="bg-"]) {
    background: #1E1E26 !important;
    border-color: var(--grey-300) !important;
}
body.dark-mode .card-header {
    background-color: var(--grey-50) !important;
    border-color: var(--grey-300) !important;
}
body.dark-mode .output-row {
    background: #1E1E26 !important;
    border-color: var(--grey-300) !important;
}
body.dark-mode .output-row-main:hover    { background: var(--grey-200) !important; }
body.dark-mode .output-row--locked       { background: var(--grey-50)  !important; }
body.dark-mode .output-expanded-inner {
    background: var(--grey-100);
    border-top-color: var(--grey-200);
}
body.dark-mode .dropdown-menu {
    background-color: #1E1E26 !important;
    border-color: var(--grey-300) !important;
}
body.dark-mode .list-group-item {
    background-color: #1E1E26 !important;
    border-color: var(--grey-300) !important;
    color: var(--grey-700) !important;
}
body.dark-mode .modal-content {
    background-color: #1E1E26 !important;
    border-color: var(--grey-300) !important;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer         { border-color: var(--grey-300) !important; }
body.dark-mode hr                    { border-color: var(--grey-300) !important; }
body.dark-mode .table                { color: var(--grey-700) !important; }
body.dark-mode .table td,
body.dark-mode .table th             { border-color: var(--grey-300) !important; }
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .03) !important;
}

/* Toggle switch — off-state track and thumb have hardcoded light colours */
body.dark-mode input.toggle-switch {
    background-color: var(--grey-400) !important;
}
body.dark-mode input.toggle-switch:checked {
    background-color: var(--brand-400) !important;
}
body.dark-mode input.toggle-switch:after {
    background-color: var(--grey-600) !important;
    border-color: var(--grey-400) !important;
}
body.dark-mode input.toggle-switch:checked:after {
    background-color: var(--white) !important;
    border-color: transparent !important;
}
body.dark-mode input.toggle-switch:disabled {
    background-color: var(--grey-300) !important;
}

/* Input group prepend/append */
body.dark-mode .input-group-text {
    background-color: var(--grey-200) !important;
    border-color: var(--grey-300) !important;
    color: var(--grey-600) !important;
}

/* Hardcoded hex colours in dashboard_styles.css */
body.dark-mode .form-control-xxl {
    background-color: var(--grey-100) !important;
    color: var(--black) !important;
}
body.dark-mode .form-group .help-block  { color: var(--grey-500) !important; }
body.dark-mode .tagify                  { background: var(--grey-100); }
body.dark-mode .timeline::before        { background: var(--grey-400); }
body.dark-mode .navbar-nav .dropdown-menu .dropdown-item:hover,
body.dark-mode .nav .dropdown-menu .dropdown-item:hover,
body.dark-mode .navbar-nav .dropdown-menu .dropdown-item.active,
body.dark-mode .navbar-nav .dropdown-menu .dropdown-item:active,
body.dark-mode .nav .dropdown-menu .dropdown-item.active,
body.dark-mode .nav .dropdown-menu .dropdown-item:active {
    background: var(--grey-200) !important;
}
body.dark-mode .alert-success  { color: #6bcf8f; background-color: #0d3320; }
body.dark-mode .alert-primary  { color: #6ab0ff; background-color: #0a1f3d; }
body.dark-mode .alert-secondary {
    color: #b0b0b3;
    fill: #b0b0b3 !important;
    background-color: var(--grey-100);
}
body.dark-mode .status-pill--failed {
    background: #3d0f0f;
    color: #f87171;
    border-color: #7f2a2a;
}
body.dark-mode .autopilot-pill-row--locked,
body.dark-mode .dashboard-episode-card-opt__checklist-state--locked,
body.dark-mode .dashboard-episode-card-opt__checklist-pill--locked {
    background: rgba(255, 159, 10, 0.12);
    color: #fbbf24;
    border-color: rgba(255, 159, 10, 0.3);
}
body.dark-mode .dashboard-activity-filter-chip {
    background: var(--grey-100);
    border-color: var(--grey-300);
    color: var(--grey-600);
}
body.dark-mode .dashboard-activity-filter-chip:hover {
    background: var(--grey-200);
    border-color: var(--grey-400);
    color: var(--grey-700);
}
body.dark-mode .dashboard-episode-card-opt__checklist-item {
    background: var(--grey-100);
    border-color: var(--grey-300);
}

/* COLORS */
.c-brand-500 { color: var(--brand-500) !important; }
.c-base-1, .text-primary, .c-primary, .btn-base-5, .btn-link, .heading:hover>a, .link--style-2, .link--style-2:hover, .result-highlight {
    color: var(--brand-300) !important;
}
.c-primary-light { color: var(--brand-200) !important; }
.c-primary-xlight { color: var(--brand-100) !important; }
.c-gray { color: var(--grey-600) !important; }
.c-gray-light { color: var(--grey-500) !important; }
.c-green { color: var(--green) !important; }
.c-white.c-white { color: var(--white) !important; }

.text-700 { color: var(--grey-700) !important; }
.text-muted { color: var(--grey-600) !important; }
.text-muted-light { color: var(--grey-400) !important; }
.text-inherit { color: inherit !important; }

/* BACKGROUNDS */
.bg-base-1,
.btn-back-to-top,
.bg-primary,
.navbar-branded {
    background-color: var(--brand-300) !important;
}
.bg-base-1-light,
.bg-primary-light {
    background-color: var(--brand-50) !important;
}
.bg-base-1-dark,
.bg-primary-dark {
    background-color: var(--brand-500) !important;
}
.bg-primary-100 {
    background-color: var(--brand-100) !important;
}
.bg-primary-200 {
    background-color: var(--brand-200) !important;
}
.bg-white-50 {
    background-color: rgba(255,255,255,.3) !important;
}
.bg-green { background-color: var(--green) !important; }
.bg-light  { background-color: var(--grey-50) !important; }
.bg-muted  { background-color: var(--grey-50) !important; }
.bg-red-light { background-color: var(--red-light) !important; }
.bg-yellow-light { background-color: var(--yellow-light) !important; }
.bg-blue-light { background-color: var(--blue-light) !important; }
.bg-green-light { background-color: var(--green-light) !important; }
/* NAVIGATION */
.navbar-inverse .navbar-nav .nav-link {
    color: var(--white) !important;
}

/* TYPOGRAPHY */
.heading, .display, .section-title .section-title-inner, h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif !important;
}
body, p {
    font-family: "Inter", sans-serif !important;
    color: var(--grey-700) !important;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6 {
    font-weight: 600 !important;
}
h1, .heading-1 {
    font-size: 32px !important;
    line-height: 42px !important;
}
h2, .heading-2 {
    font-size: 24px !important;
    line-height: 34px !important;
}
h3, .heading-3 {
    font-size: 20px !important;
    line-height: 28px !important;
}
h4, .heading-4 {
    font-size: 18px !important;
    line-height: 26px !important;
}
h5, .heading-5 {
    font-size: 16px !important;
    line-height: 24px !important;
}
h6, .heading-6 {
    font-size: 14px !important;
    line-height: 22px !important;
}

/* LABELS */
label, .label-lg, .label-md, .label-sm {
    line-height: 1 !important;
    font-weight: 500 !important;
    color: var(--black) !important;
}

/* LINKS */
a, a:hover, .link, .link:hover, .link--style-1:hover, .meta-category a, .meta-category a:hover {
    color: var(--brand-300) !important;
}
a.c-white:hover,
a.c-primary-xlight:hover,
a.c-primary-light:hover {
    color: var(--white) !important;
}

/* BUTTONS */
.btn {
    font-weight: 500 !important;
    border-width: 2px !important;
    padding: 8px 20px !important;
    border-radius: var(--border-radius-circle) !important;
}
.btn-lg, .btn-styled.btn-lg {
    padding: 12px 24px !important;
    font-size: 20px !important;
    border-radius: var(--border-radius) !important;
}
.btn-sm, .btn-styled.btn-sm {
    padding: 4px 12px !important;
}
.btn-xs, .btn-styled.btn-xs {
    padding: 2px 6px !important;
}
.btn-icon { padding: 4px 6px !important; }
.btn-round { border-radius: var(--border-radius) !important; }
.btn-primary, .btn-base-1,
.tabs--style-1 .nav-tabs>li>a.active {
    background-color: var(--brand-300) !important;
    border-color: var(--brand-300) !important;
    color: var(--white) !important;
}
.btn-secondary,
.tabs--style-1 .nav-tabs>li>a:hover:not(.active) {
    background-color: var(--brand-50) !important;
    border-color: var(--brand-50) !important;
    color: var(--brand-400) !important;
}
.btn-base-1:hover,
.btn-primary:hover,
.btn-secondary:hover {
    background-color: var(--brand-400) !important;
    border-color: var(--brand-400) !important;
    color: var(--white) !important;
}
.btn-tertiary {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--brand-300) !important;
}
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary.active {
    background-color: var(--brand-100) !important;
    border-color: var(--brand-100) !important;
    color: var(--brand-400) !important;
}
.btn:hover,
.btn-base-1:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover {
    opacity: 1 !important; /* Remove this when public pages are fixed */
}
.btn:focus,
.btn-base-1:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-tertiary:focus {
    border-color: var(--brand-200) !important;
    opacity: 1 !important;
}
.btn.disabled, .btn:disabled {
    opacity: .5 !important;
}
.btn-success, .btn-success:hover {
    background-color: var(--green-300) !important;
    border-color: var(--green-300) !important;
    color: var(--white) !important;
}
.btn-danger, .btn-danger:hover {
    background-color: var(--red-300) !important;
    border-color: var(--red-300) !important;
    color: var(--white) !important;
}
.btn-tertiary-danger, .btn-tertiary-danger:hover {
    color: var(--red-300) !important;
}

.btn-color-gradient {background-image: linear-gradient(to right, #FF512F 0%, #DD2476  51%, #FF512F  100%) !important; color: white !important;}
.btn-color-gradient {
   transition: 0.5s;
   background-size: 200% auto;
 }

 .btn-color-gradient:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff !important;
   text-decoration: none;
 }


/* BORDERS */
.border { border-color: var(--grey-100) !important; }
.border-primary { border-color: var(--brand-300) !important; }
.border-primary-light { border-color: var(--brand-200) !important; }
.border-lg { border-width: 3px !important; }

/* BORDER RADIUS */
.rounded { border-radius: var(--border-radius) !important; }
.rounded-xl { border-radius: var(--border-radius-lg) !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded-xxl { border-radius: 50px !important;}
.rounded-xl-top { border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important; }
.rounded-xl-bottom { border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg) !important; }

/* BADGES */
.badge {
    padding: 9px 14px !important;
    border-radius: var(--border-radius) !important;
    line-height: 1 !important;
}
.badge-pro, a.badge-pro {
    color: var(--brand-300) !important;
    background-color: var(--brand-100) !important;
    font-weight: 600;
}
.badge-elite, a.badge-elite {
    color: var(--brand-50) !important;
    background-color: var(--brand-400) !important;
    font-weight: 600 !important;
}
.badge-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
}
.badge-xs {
    padding: 4px 6px !important;
    font-size: 10px !important;
}

/* BADGE COLORS */
.alert.alert-success,
.badge.badge-success {
    color: var(--green) !important;
    background-color: var(--green-light) !important;
}
.alert.alert-danger,
.badge.badge-danger {
    color: var(--red) !important;
    background-color: var(--red-light) !important;
}
.alert.alert-warning,
.badge.badge-warning {
    color: var(--yellow) !important;
    background-color: var(--yellow-light) !important;
}
.info,
.alert.alert-info,
.badge.badge-info {
    color: var(--blue) !important;
    background-color: var(--blue-light) !important;
}

/* SPACING AND SIZES */
.container-xl {
    max-width: 1600px;
    padding-left: 24px;
    padding-right: 24px;
}
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }


/* Organize Later */
p,
p.text-lg, p.text-md, p.text-sm,
.text-lg, .text-md, .text-sm {
    line-height: 1.5 !important;
}

/* Base styles for all marquees */
.website-marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.website-marquee-content {
    display: flex;
    gap: 20px;
}

.website-marquee-content img {
    width: 200px;
    height: auto;
}

/* Container for horizontal scrolling (default) */
.website-marquee-container {
    width: 100%;
}

/* Horizontal scrolling styles (default) */
.scroll-horizontal .website-marquee-content,
.website-marquee-content {
    flex-direction: row;
}

/* Vertical scrolling styles */
.scroll-vertical {
    display: flex;
    justify-content: space-between;
}

.scroll-vertical .website-marquee {
    width: calc(50% - 10px); /* Two columns with a small gap */
    white-space: normal;
}

.scroll-vertical .website-marquee.mt-4 {
    margin-top: 0 !important;
}

.scroll-vertical .website-marquee-content {
    flex-direction: column;
    white-space: normal;
}

.scroll-vertical .website-marquee-content img {
    width: 100%;
}

/* DESIGN PREVIEW */

/* Template Preview iFrame */
.design-preview {
    position: relative;
    height: 200px;
    background-color: white;
  }

  .design-preview .disable-iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 20px;
    font-weight: bold;
  }

  .design-preview .disable-iframe.loading {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .design-preview .disable-iframe.loading i.fa-circle-notch {
    position: absolute;
    z-index: 1;
  }

  .design-preview .disable-iframe.loading:after {
    content: "Reloading Preview";
    position: absolute;
    margin-top: 80px;
    z-index: -2;
    background: white;
    padding: 10px 20px;
    border-radius: 20px;
  }

  .design-preview iframe {
    z-index: 5;
    display: block;
    border: none;
    width: 200%;
    height: 800px;
    -ms-zoom: 0.5;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
  }

  .design-preview:hover iframe {
    pointer-events: none;
  }

  /* Template Preview iFrame */
  .design-preview.design-preview-wide {
    height: 250px;
  }

  .design-preview.design-preview-wide iframe {
    width: 400%;
    height: 1000px;
    -ms-zoom: 0.25;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
  }

  /* Template Preview iFrame */
  .design-preview.design-preview-full {
    height: 500px;
  }

  .design-preview.design-preview-full iframe {
    width: 400%;
    height: 2000px;
    -ms-zoom: 0.25;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
  }

  .design-preview.design-preview-huge {
    height: 1000px;
  }

  .design-preview.design-preview-huge iframe {
    width: 200%;
    height: 2000px;
    -ms-zoom: 0.5;
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
  }

  #design-preview-button-container {
    background-color: var(--grey-300);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #design-preview-url-bar {
    background-color: var(--grey-300);
  }

  #design-preview-url-bar .url {
    background-color: var(--white);
    border-radius: var(--border-radius-circle);
  }
  body.dark-mode #design-preview-url-bar .url {
    background-color: var(--grey-200);
  }

  .design-preview.chrome-wrap {
    border: 5px solid var(--grey-300);
    border-top: none;
    overflow: hidden;
  }