:root {
  --text: #484d55;
  --text-light: #9ca3af;
  --text-grey: #757b8a;
  --headings: #10172a;
  --background-light: #f6f6f9;
  --background-dark: #252627;
  --border: #e1e2eb;
  --border-dark: #c7c8d1;
  --input-border: #dcdce4;
  --primary: #2f75e6;
  --primary-lighter: #c7dcff;
  --primary-darker: #2e6cd2;
  --success: #04cb58;
  --danger: #e23807;
  --tooltip: #fffbf0;
}



*{box-sizing: border-box;}
html,body{min-height:100vh;overflow:hidden}
:root {font-family: 'Inter', sans-serif;font-size:14px;}

body{height:100vh;margin:0;padding:0;background:#fff;color: var(--text);font-synthesis: none;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust: 100%;}

h1{color:var(--headings);margin:2em 0 1em 0;font-weight:600;font-size:2em;line-height:1.2}
h2{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.40em;line-height:1.2;font-weight:bold}
h3{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.15em;line-height:1.2}
h4{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.05em;line-height:1.2}
h1:first-child, h2:first-child, h3:first-child, h4:first-child{margin-top:0em;}

p{margin:0 0 1.5em 0;}
a{color:var(--text);}

hr{border:none;border-bottom:1px solid var(--border);margin:40px 0;}

ul{margin:0 0 1.5em 0;padding:0}
ul li{margin:0 0 .5em 20px;padding:0}

.text--danger{color: var(--danger)}

button{font-family:inherit;font-size:inherit;border:none;}

.block{background:#fff;border-radius:10px;border:1px solid var(--border);padding:15px 25px}

.checklist{margin:0 0 1.5em 0;padding:0;}
.checklist li{margin:0 0 3px 0;padding:0;list-style:none;display:flex;gap:10px;align-items:center}
.checklist li span:first-child{font-size:12px;}

/*******************************************************/
/* Animation
/*******************************************************/

.fade-enter-active, .fade-leave-active {transition:opacity .15s;}
.fade-enter-from, .fade-leave-to {opacity:0;}

.fadezoom-enter-active, .fadezoom-leave-active {transition:all .20s;}
.fadezoom-enter-from, .fadezoom-leave-to {opacity:0;transform: scale(0.95);}

.fadeinup-enter-active,.fadeinup-leave-active {transition:all .15s ease-in-out;}
.fadeinup-enter-to, .fadeinup-leave{ }
.fadeinup-enter-from, .fadeinup-leave-to {opacity:0;transform: translatey(5%)}

.fadeindown-enter-active,.fadeindown-leave-active {transition:all .10s ease-in-out;}
.fadeindown-enter-to, .fadeindown-leave{ }
.fadeindown-enter-from, .fadeindown-leave-to {opacity:0;transform: translatey(-10%)}

.modal-enter-from, .modal-leave-to {opacity: 0;}
.modal-enter-from .modal__container, .modal-enter-leave-to .modal__container{transform: scale(.9);}


.site{display:flex;height:100vh;flex-direction:column}


/*******************************************************/
/* Admin Sidebar
/*******************************************************/

.admin{}

.admin-sidebar{position:fixed;z-index:2;top:0;bottom:0;width:50px;display:flex;flex-direction:column;background:var(--background-dark);color:#fff;transition:.15s all;padding:0 15px;overflow-x:hidden;overflow-y:auto}
.admin--sidebar-active .admin-sidebar{}
.admin:has(.modal--active) .admin-sidebar{z-index:1}
body.tox-fullscreen .admin-sidebar{z-index:1;}
/* A fullscreen TinyMCE field editor renders inside .builder (z-index:2), which sits
   below .adminbar (z-index:3) within the shared .admin__main stacking context. That
   ordering is intentional — it's what lets the adminbar's title dropdown overlay the
   preview — so the editor's own z-index (1200) can't lift it above the bar. Rather
   than invert the stack, start the editor just below the bar; the dropdown still
   opens over it because the whole adminbar subtree outranks the builder subtree. */
.tox.tox-tinymce.tox-fullscreen{top:calc(50px + (100vh - 50px) * 0.025) !important;left:2.5vw !important;right:auto !important;bottom:auto !important;width:95vw !important;height:calc((100vh - 50px) * 0.95) !important;}
/* TinyMCE's fullscreen plugin has no backdrop — it "blocks" the page only by covering
   100% of it. Now that it's inset, add our own scrim so the exposed canvas is dimmed and
   non-interactive. It lives in .builder (z-index:2) at z:1199, just under the editor
   (z:1200), so the editor stays on top while everything else in the canvas is covered.
   The adminbar (z-index:3, above .builder) stays interactive on purpose — Save/undo/etc. */
body.tox-fullscreen .builder::after{content:'';position:fixed;inset:0;background:rgba(15,23,42,0.55);z-index:1199;}

.admin-sidebar::-webkit-scrollbar{width:5px}
.admin-sidebar::-webkit-scrollbar-track{background:transparent}
.admin-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:10px}

.admin-sidebar__main{flex:1;}

.admin-sidebar__logo{margin:14px 0 -21px 0;height:32px;position:relative;}
.admin-sidebar__logo img{position:absolute;}
.admin-sidebar__logo img.logo-shape{width:20px;height:20px;top:0;left:0;}
.admin-sidebar__logo img.logo-text{width:90px;opacity:0;top:0px;left:30px;transition:.2s opacity}
.admin--sidebar-active .admin-sidebar__logo img.logo{opacity:1}
.admin--sidebar-active .admin-sidebar__logo img{opacity:1;}
.admin-sidebar__logo-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;width:100%;height:32px;position:relative;}
.admin-sidebar__logo-chevron{width:16px;height:16px;color:#bcbcbc;opacity:0;position:absolute;right:-6px;top:50%;transform:translateY(-50%);transition:.2s all;}
.admin--sidebar-active .admin-sidebar__logo-chevron{opacity:.5;}
.admin-sidebar__logo-button:hover .admin-sidebar__logo-chevron{opacity:1;color:#fff;}
.sidebar-flyout--logo{anchor-name:--logo-anchor;}
.sidebar-flyout__menu--logo{position-anchor:--logo-anchor;}

.admin-sidebar__section{height:50px;position:relative;pointer-events:none;}
.admin-sidebar__section:after{z-index:1;content:'';border-top:1px solid rgba(255,255,255,0.15);position:absolute;left:0;width:100%;top:50%;}
.admin-sidebar__section span{z-index:2;opacity:0;position:absolute;left:0;top:50%;transform: translateY(-50%);white-space:nowrap;padding:0 10px 0 0;transition:.2s all;color:#bcbcbc;text-transform:uppercase;font-size:11px;}
.admin--sidebar-active .admin-sidebar__section span{opacity:1;background: var(--background-dark)}


.admin-sidebar__nav{}
.admin-sidebar__nav ul{margin:0;padding:0;list-style:none;}
.admin-sidebar__nav ul{}
.admin-sidebar__nav ul li{margin:0;padding:0;list-style:none;line-height:1;display:flex;gap:20px}
.admin-sidebar__nav ul li:not(:last-child){margin:0 0 6px 0;}
.admin-sidebar__nav ul li a{cursor:pointer}
.admin-sidebar__nav ul li a:nth-child(2){display:none;}
.admin-sidebar__nav ul li .button{color:#bcbcbc;font-size:12px;display:flex;flex:1;justify-content:flex-start;}
.admin-sidebar__nav ul li .button[aria-current="page"]{color:#fff;}
.admin-sidebar__nav ul li .button:hover{color:#fff;}
.admin-sidebar__nav ul li .button .button__icon{opacity:.4;color:#fff}
.admin-sidebar__nav ul li .button .button__icon svg{width:18px;height:18px;}
.admin-sidebar__nav ul li .button .button__label{opacity:0;transition:.2s all}
.admin--sidebar-active .admin-sidebar__nav ul li .button .button__label{opacity:1;}
.admin-sidebar__nav ul li.admin-sidebar__nav--active .button__icon{color:#fff;opacity:1}
.admin-sidebar__nav ul li.admin-sidebar__nav--active .button__label{color:#fff;}
.admin-sidebar__nav ul li.admin-sidebar__nav--disabled{pointer-events:none;}
.admin-sidebar__nav ul li.admin-sidebar__nav--disabled .button__icon{opacity:.15}
.admin--sidebar-active .admin-sidebar__nav ul li.admin-sidebar__nav--disabled .button__label{opacity:.15}
.admin-sidebar__nav ul li ul{margin:10px 0 0 20px;}
.admin-sidebar__nav ul li ul li{margin:0 0 10px 0;}

.admin-sidebar__footer{padding:10px 0 10px 0px}
.admin-sidebar__footer .admin-sidebar__nav ul li:not(:last-child){margin:0 0 10px 0;}

/* Sidebar open/hover/pinned state */
.admin--sidebar-hover .admin-sidebar{width:170px;}
.admin--sidebar-pinned .admin-sidebar{width:170px;}
.admin--sidebar-pinned .admin-sidebar__header{opacity:1}
.admin--sidebar-pinned .admin-sidebar__section span{display:block;}
.admin--sidebar-pinned .admin-sidebar__nav ul li .button .button__label{display:block;}
.admin--sidebar-pinned .adminbar{left:170px;}
.admin--sidebar-pinned .admin__main{left:170px;}
.admin--sidebar-pinned .site-preview{left:170px;}

.site-preview{position:fixed;z-index:1;top:50px;right:0;bottom:0;left:50px;}

/*******************************************************/
/* User Menu
/*******************************************************/

.user-menu{position:relative;font-size:12px;anchor-name:--user-anchor;}
.user-menu .button{padding:10px 10px;margin:0 -10px}
.user-menu .button:hover{background:rgba(255,255,255,0.1) !important;padding:10px 10px}
.admin-sidebar__nav .user-menu .button__label{flex-direction:column;align-items:flex-start;line-height:1.3;overflow:hidden;text-align:left;}
.admin--sidebar-active .admin-sidebar__nav .user-menu .button__label{display:flex !important;}
.user-menu__name,.user-menu__email{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch;}
.user-menu__email{color:#9ca3af;font-size:10px;}

/*******************************************************/
/* Sidebar Flyout Menus
/*******************************************************/

.sidebar-flyout{position:relative;}
.sidebar-flyout--settings{anchor-name:--settings-anchor;}
.sidebar-flyout--tools{anchor-name:--tools-anchor;}
.sidebar-flyout--pe{anchor-name:--pe-anchor;}
.sidebar-flyout__chevron{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;width:0;height:22px;color:#bcbcbc;opacity:0;transition:.1s all;flex-shrink:0;overflow:hidden;pointer-events:none;}
.sidebar-flyout__chevron:hover{opacity:1;color:#fff}
.sidebar-flyout:hover .sidebar-flyout__chevron{opacity:1;color:#fff}
.sidebar-flyout__chevron svg{width:16px;height:16px;flex-shrink:0;}
.admin--sidebar-active .sidebar-flyout__chevron{width:22px;opacity:.5;pointer-events:auto;}
.sidebar-flyout__menu{position:fixed;top:anchor(top);left:anchor(right);margin-left:15px;background:#363636;min-width:170px;border-radius:5px;padding:6px 0;box-shadow:0 8px 30px rgba(0,0,0,0.4);z-index:1000;white-space:nowrap;position-try-fallbacks:flip-block;}
.sidebar-flyout__menu--settings{position-anchor:--settings-anchor;}
.sidebar-flyout__menu--tools{position-anchor:--tools-anchor;}
.sidebar-flyout__menu--pe{position-anchor:--pe-anchor;}
.sidebar-flyout__menu--user{position-anchor:--user-anchor;top:auto;bottom:anchor(bottom);}
.sidebar-flyout__menu::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:15px;}
.sidebar-flyout__item{display:flex;align-items:center;gap:10px;padding:6px 12px;color:#d1d5db;text-decoration:none;transition:.1s all;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;font-size:12px;}
.sidebar-flyout__item:hover{background:rgba(255,255,255,0.1);color:#fff}
.sidebar-flyout__item-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:.7;flex-shrink:0;}
.sidebar-flyout__item-icon svg{width:18px;height:18px;}
.sidebar-flyout__item:hover .sidebar-flyout__item-icon{opacity:1}
.sidebar-flyout__item-label{flex:1}
.sidebar-flyout__item-count{opacity:.45;font-weight:normal;margin-left:4px;}
.sidebar-flyout__header{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12px}
.sidebar-flyout__header-avatar{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.sidebar-flyout__header-avatar svg{width:20px;height:20px;opacity:.6}
.sidebar-flyout__header-info{flex:1;overflow:hidden}
.sidebar-flyout__header-name{font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-flyout__header-email{color:#9ca3af;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.sidebar-flyout__divider{height:1px;background:rgba(255,255,255,0.1);margin:8px 0}


/*******************************************************/
/* Presence
/*******************************************************/

.presence-bubble{anchor-name:--presence-anchor;position:relative;}
.presence-bubble .button__icon{position:relative;opacity:.3;transition:.2s all}
.presence-bubble--active .button__icon{opacity:.7 !important;}
.presence-bubble--alert .button__icon{opacity:1 !important;color:#4ade80;animation:presence-pulse 1.5s ease-in-out 3;}
.presence-badge{background:#facc15;color:#000;border-radius:8px;padding:1px 5px;font-size:9px;font-weight:600;position:absolute;top:-4px;right:-6px;line-height:1.2;}
.presence-badge--danger{background:var(--danger);color:#fff;}
.sidebar-flyout__menu--presence{position-anchor:--presence-anchor;top:auto;bottom:anchor(bottom);}
.presence-section-label{padding:4px 12px;font-size:10px;text-transform:uppercase;color:#9ca3af;letter-spacing:0.5px;}
.presence-user{cursor:default !important;}
.presence-user__meta{font-size:10px;color:#9ca3af;margin-top:1px;}
@keyframes presence-pulse{0%,100%{opacity:1}50%{opacity:.4}}


/*******************************************************/
/* AI Chat Popover
/*******************************************************/

/* Disable pointer events on everything during drag/resize */
body.ai-chat-dragging * {
  pointer-events: none !important;
}

body.ai-chat-dragging .ai-chat-popover,
body.ai-chat-dragging .ai-chat-popover * {
  pointer-events: auto !important;
}

/* Popover container */
.ai-chat-popover {
  position: fixed;
  z-index: 1200;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

/* Header */
.ai-chat-popover__header {
  background: #f7f7f8;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  min-height: 48px;
}

.ai-chat-popover__header:active {
  cursor: grabbing;
}

.ai-chat-popover__title {
  font-weight: 600;
  font-size: 14px;
  color: #1f1f1f;
}

.ai-chat-popover__close {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.ai-chat-popover__close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ai-chat-popover__close:disabled {
  opacity: 0.4;
  cursor: default;
}

.ai-chat-popover__close--active {
  background: rgba(0, 0, 0, 0.08);
  color: #1f1f1f;
}

.ai-chat-popover__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Emoji standing in for an icon (model / new chat / history). Sized to the
   20x20 box the sibling SVG icons occupy so the row stays evenly spaced.
   Note these ignore the button's `color` — emoji are rendered by the system
   font in their own colours, so only the hover/active BACKGROUND on
   .ai-chat-popover__close reads as a state change on these three. */
.ai-chat-popover__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
  /* Emoji sit on the text baseline and would otherwise ride high in the box. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* Model picker — shown in the header only while the chat is still empty.
   Anchors its menu to the trigger button rather than spanning the panel like
   the previous-chats dropdown, since the list is short. */
.ai-chat-model {
  position: relative;
  display: flex;
  align-items: center;
}

/* Sits under the menu but over the panel, so a click anywhere else closes it. */
.ai-chat-model__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
}

.ai-chat-model__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  min-width: 200px;
  padding: 4px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  cursor: default;
}

.ai-chat-model__head {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Second section of the model menu (reasoning effort) — a quiet rule so it
   reads as a separate group rather than more model rows. */
.ai-chat-model__head--sub {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #ececec;
}

.ai-chat-model__option {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  color: #1f1f1f;
  text-align: left;
  cursor: pointer;
}

.ai-chat-model__option:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

.ai-chat-model__option--active {
  font-weight: 600;
}

/* Chat already started: every model still shows, but only the one in use is
   picked out — the rest are greyed and unclickable. */
.ai-chat-model__option:disabled {
  color: #9e9e9e;
  cursor: not-allowed;
}

.ai-chat-model__option--locked:not(:disabled) {
  cursor: default;
}

.ai-chat-model__note {
  padding: 6px 8px 4px;
  font-size: 11px;
  color: #6b6b6b;
}

/* Fixed-width so the labels align whether or not a row is ticked. */
.ai-chat-model__tick {
  width: 12px;
  flex: 0 0 12px;
  color: #2563eb;
}

/* Previous-chats dropdown — overlays the top of the content area */
.ai-chat-history {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 60%;
}

.ai-chat-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f0f0f0;
}

.ai-chat-history__close {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #999;
  display: flex;
  border-radius: 4px;
}

.ai-chat-history__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #555;
}

.ai-chat-history__list {
  overflow-y: auto;
  padding: 4px;
}

.ai-chat-history__row {
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.ai-chat-history__row:hover {
  background: #f3f3f4;
}

.ai-chat-history__row--active {
  background: #ecf3ff;
}

.ai-chat-history__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #1f1f1f;
}

.ai-chat-history__item:disabled {
  cursor: default;
  opacity: 0.6;
}

.ai-chat-history__rename,
.ai-chat-history__delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #b0b0b0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.ai-chat-history__delete {
  margin-right: 4px;
}

.ai-chat-history__row:hover .ai-chat-history__rename,
.ai-chat-history__row:hover .ai-chat-history__delete,
.ai-chat-history__row--active .ai-chat-history__rename,
.ai-chat-history__row--active .ai-chat-history__delete {
  opacity: 1;
}

.ai-chat-history__rename:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

.ai-chat-history__delete:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.ai-chat-history__rename:disabled,
.ai-chat-history__delete:disabled {
  cursor: default;
}

.ai-chat-history__delete-spinner {
  display: inline-block;
  font-size: 13px;
  animation: spin 1.2s linear infinite;
}

.ai-chat-history__rename-input {
  flex: 1;
  min-width: 0;
  margin: 4px;
  padding: 6px 8px;
  font-size: 13px;
  color: #1f1f1f;
  border: 1px solid #397ff1;
  border-radius: 6px;
  outline: none;
}

.ai-chat-history__retry {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  cursor: pointer;
  color: #555;
}

.ai-chat-history__retry:hover {
  background: #f3f3f4;
}

.ai-chat-history__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chat-history__time {
  flex-shrink: 0;
  font-size: 11px;
  color: #9b9b9b;
}

.ai-chat-history__empty {
  padding: 16px 12px;
  font-size: 13px;
  color: #9b9b9b;
  text-align: center;
}

/* Maximized state — dragging and resizing are disabled, hide affordances. */
.ai-chat-popover--maximized .ai-chat-popover__header,
.ai-chat-popover--maximized .ai-chat-popover__header:active {
  cursor: default;
}
.ai-chat-popover--maximized .resize-handle {
  display: none;
}

/* Content area */
.ai-chat-popover__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* Messages area */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chat message bubbles */
.chat-message {
  display: flex;
  max-width: 85%;
  animation: fadeIn 0.2s ease;
}

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

.chat-message--user {
  align-self: flex-end;
}

/* Assistant responses are documents, not chat lines — headings, tables and
   lists need the room, so they run the full width of the thread with no bubble
   chrome. The 85% cap and the rounded background stay on the user side, which
   is what actually carries the "who said this" signal. */
.chat-message--ai {
  align-self: stretch;
  max-width: 100%;
}

.chat-message--ai .chat-message__inner {
  flex: 1;
}

/* Error responses carry both --ai and --error, so they'd inherit the full-bleed
   treatment above — a full-width red slab. Put them back in a bubble. Each
   --error rule ties its --ai counterpart on specificity, so both must stay
   AFTER the matching --ai rule to win on source order. */
.chat-message--error {
  align-self: flex-start;
  max-width: 85%;
}

.chat-message__text {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-message--user .chat-message__text {
  background: #0b93f6;
  color: #fff;
  border-bottom-right-radius: 4px;
  border:1px solid #fff;
}

.chat-message--ai .chat-message__text {
  background: transparent;
  color: #1f1f1f;
  border: none;
  border-radius: 0;
  padding: 0;
}

.chat-message--error .chat-message__text {
  background: #ff4444;
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}

.chat-message__text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-word;
}

.chat-message--user .chat-message__text code {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.chat-message__codeblock {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
}

.chat-message__codeblock code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  word-break: normal;
  white-space: pre;
}

.chat-message__text img {
  max-width: 100%;
}

/* ── AI markdown blocks (util.js formatChatMessage) ────────────────────────
   Scoped to .chat-message rather than .chat-message__text: the playbook
   run-result transcript renders the HTML straight into the bubble with no
   inner wrapper. Several rules exist only to beat the global element styles
   at the top of this file (hr margin 40px, ul/ul li margins). */

.chat-message__h {
  font-weight: 600;
  line-height: 1.3;
  margin: 10px 0 4px;
}

.chat-message__h:first-child {
  margin-top: 0;
}

/* Capped hard: the docked chat panel is narrow, and an unclamped h1/h2 dwarfs
   the bubble it sits in. */
.chat-message__h--1 { font-size: 1.25em; }
.chat-message__h--2 { font-size: 1.15em; }
.chat-message__h--3 { font-size: 1.05em; }
.chat-message__h--4,
.chat-message__h--5,
.chat-message__h--6 { font-size: 1em; }

.chat-message .chat-message__hr {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  margin: 10px 0;
}

.chat-message--user .chat-message__hr {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.chat-message__quote {
  margin: 6px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid rgba(0, 0, 0, 0.18);
  opacity: 0.9;
}

.chat-message--user .chat-message__quote {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.chat-message ul.chat-message__list,
.chat-message ol.chat-message__list {
  margin: 6px 0;
  padding-left: 22px;
}

.chat-message .chat-message__list li {
  margin: 0 0 2px 0;
  padding: 0;
}

/* Wide tables scroll inside this wrapper instead of blowing out the panel. */
.chat-message__tablewrap {
  margin: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chat-message__table {
  border-collapse: collapse;
  font-size: 0.92em;
  /* auto + min-width keeps a 2-column Metric/Value table filling the bubble
     while letting anything wider size to its content and scroll. */
  width: auto;
  min-width: 100%;
}

.chat-message__table th,
.chat-message__table td {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}

.chat-message__table th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
  white-space: nowrap;
}

.chat-message--user .chat-message__table th,
.chat-message--user .chat-message__table td {
  border-color: rgba(255, 255, 255, 0.35);
}

.chat-message--user .chat-message__table th {
  background: rgba(255, 255, 255, 0.15);
}

.chat-message__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.chat-message--user .chat-message__inner {
  align-items: flex-end;
}

.chat-message__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.chat-message__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f1f1;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  color: #1f1f1f;
  max-width: 200px;
}

.chat-message__file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message__file--thumb {
  padding: 0;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.chat-message__file--thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chat-message--tool {
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: transparent;
  font-size: 12px;
  color: #888;
  font-style: italic;
}


.chat-message__tool-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

.chat-message__tool-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  font-size: 11px;
  color: #555;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}

.chat-message--tool-subagent {
  margin-left: 22px;
}

.chat-message--tool-subagent .chat-message__tool-icon {
  opacity: 0.4;
}

.chat-message--tool-subagent .chat-message__tool-name {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

.chat-message__tool-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
}

.chat-message--subagent-block {
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.04);
  border-left: 2px solid rgba(99, 102, 241, 0.4);
  border-radius: 3px;
}

.chat-message__subagent-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
}

.chat-message__subagent-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6366f1;
}

.chat-message__subagent-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  color: #888;
  background: rgba(0, 0, 0, 0.05);
  padding: 0 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

.chat-message__subagent-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
}

.chat-message__subagent-tool {
  display: flex;
  align-items: center;
  font-size: 11px;
}

.chat-message__subagent-tool .chat-message__tool-name {
  background: rgba(99, 102, 241, 0.06);
  color: #6366f1;
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  height: 1em;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a8a8a;
  display: inline-block;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.empty-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* File attachments preview */
.ai-chat-attachments {
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #fafafa;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 6px 10px 6px 12px;
  font-size: 13px;
  max-width: 200px;
}

.attachment-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f1f1f;
}

.attachment-chip__remove {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.attachment-chip__remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.attachment-chip__remove svg {
  width: 12px;
  height: 12px;
}

.attachment-chip--thumb {
  position: relative;
  padding: 0;
  width: 112px;
  height: 112px;
  max-width: none;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.attachment-chip__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.attachment-chip__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  color: #1f1f1f;
  font-size: 18px;
}

.attachment-chip__overlay-spinner {
  display: inline-block;
  animation: spin 1.2s linear infinite;
}

.attachment-chip__remove--thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.attachment-chip__remove--thumb:hover {
  background: rgba(0, 0, 0, 0.75);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Divider between the thread and the composer. The 1px rule is always visible;
   the element itself is a taller invisible grab strip so the drag target is
   comfortable without a thick bar. */
.ai-chat-input-drag-handle {
  position: relative;
  flex-shrink: 0;
  height: 11px;
  cursor: row-resize;
  border-top: 1px solid #e0e0e0;
  transition: border-color 0.15s;
}

.ai-chat-input-drag-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: #c8c8c8;
  opacity: 0;
  transition: opacity 0.15s;
}

.ai-chat-input-drag-handle:hover {
  border-top-color: #c8c8c8;
}

.ai-chat-input-drag-handle:hover::after {
  opacity: 1;
}

/* Composer: borderless and edge-to-edge so the panel width is the input width */
.ai-chat-input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  padding: 0;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background 0.2s;
}

.ai-chat-input:disabled {
  background: transparent;
  color: #999;
  cursor: not-allowed;
}

.ai-chat-input-wrapper--disabled {
  background: #f7f7f8;
}

.ai-chat-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 6px 18px 4px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: transparent transparent; /* Firefox - hide by default */
}

/* Show scrollbar on hover/focus for Firefox */
.ai-chat-input:hover,
.ai-chat-input:focus {
  scrollbar-color: #d0d0d0 transparent; /* Firefox */
}

/* Scrollbar styling for webkit browsers */
.ai-chat-input::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-input::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-input::-webkit-scrollbar-thumb {
  background: transparent; /* Hidden by default */
  border-radius: 3px;
}

/* Show scrollbar on hover/focus for webkit */
.ai-chat-input:hover::-webkit-scrollbar-thumb,
.ai-chat-input:focus::-webkit-scrollbar-thumb {
  background: #d0d0d0;
}

.ai-chat-input:hover::-webkit-scrollbar-thumb:hover,
.ai-chat-input:focus::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.ai-chat-input:focus {
  outline: none;
  box-shadow: none;
}

.ai-chat-input::placeholder {
  color: #999;
}

/* Toolbar row below textarea */
.ai-chat-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 12px;
  border: none;
  background: transparent;
}

/* Attach button */
.ai-chat-attach-btn {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.ai-chat-attach-btn:hover:not(:disabled) {
  background: #f7f7f8;
  border-color: #ccc;
}

.ai-chat-attach-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Send button */
.ai-chat-send-btn {
  background: var(--primary);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s;
}

.ai-chat-send-btn:hover:not(:disabled) {
  background: var(--primary-darker);
  transform: scale(1.05);
}

.ai-chat-send-btn:disabled {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
}

/* Left-grouped controls (attach + model picker) inside the input toolbar */
.ai-chat-input-toolbar__left,
.ai-chat-input-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Voice (dictation) button — same shape as attach, mic icon. Pulses red while recording. */
.ai-chat-voice-btn {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}
.ai-chat-voice-btn:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #ccc;
  color: #333;
}
.ai-chat-voice-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-chat-voice-btn--recording {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  animation: ai-chat-voice-pulse 1.4s ease-in-out infinite;
}
.ai-chat-voice-btn--recording:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
@keyframes ai-chat-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.ai-chat-send-btn svg {
  width: 18px;
  height: 18px;
}

/* Resize handles — invisible hit areas around all edges + corners */
.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 20;
}

/* Edges — thin strips, inset to leave room for corner handles */
.resize-handle--n { top: 0;    left: 14px;  right: 14px; height: 6px; cursor: ns-resize; }
.resize-handle--s { bottom: 0; left: 14px;  right: 14px; height: 6px; cursor: ns-resize; }
.resize-handle--w { left: 0;   top: 14px;   bottom: 14px; width: 6px; cursor: ew-resize; }
.resize-handle--e { right: 0;  top: 14px;   bottom: 14px; width: 6px; cursor: ew-resize; }

/* Corners — square hit areas, sit above edges */
.resize-handle--nw,
.resize-handle--ne,
.resize-handle--sw,
.resize-handle--se {
  width: 14px;
  height: 14px;
  z-index: 21;
}

.resize-handle--nw { top: 0;    left: 0;  cursor: nwse-resize; }
.resize-handle--ne { top: 0;    right: 0; cursor: nesw-resize; }
.resize-handle--sw { bottom: 0; left: 0;  cursor: nesw-resize; }
.resize-handle--se { bottom: 0; right: 0; cursor: nwse-resize; }


/*******************************************************/
/* Top Adminbar
/*******************************************************/

/* z-index:3 keeps the bar (and its open title dropdown) above the pagebuilder
   canvas/sidebars, which sit in positioned stacking contexts (.admin__main z-index:1,
   .builder z-index:2). The dropdown is opened by click state, not hover, so a
   permanent stack is needed rather than the old :hover bump. Docked panels portal
   to <body> at a far higher z-index, so they still overlay the bar as intended. */
.adminbar{background:var(--background-dark);color:#fff;display:flex;align-items:center;height:50px;padding:0 15px;position:fixed;top:0;left:50px;right:0;z-index:3;}
.adminbar__start{flex:1;}

.adminbar__main{padding:10px 0px;position:relative;flex:1;max-width:250px;white-space:nowrap;display:flex;align-items:center;gap:10px;}
.adminbar__main-title{cursor:pointer}
.adminbar__main-title-linked:hover{text-decoration:underline}
.adminbar__main .adminbar__main-text{}
.adminbar__main .adminbar__main-text .adminbar__main-status{font-size:11px;opacity:.7;}
.adminbar__main-title{font-weight:bold;font-size:1.2em;}
.adminbar__main-dropdown-title{}

.adminbar__middle{width:100%;text-align:center;width:200px;}

.adminbar__end{flex:1;text-align:right;display:flex;gap:10px;justify-content:flex-end}

.adminbar__dropdown{position:absolute;top:50px;z-index:3;background: var(--background-dark);width:100%;max-width:120px;transition:.1s all;border-radius:5px;padding:2px;box-shadow:0px 0px 10px rgba(0,0,0,0.2);border:1px solid #6f6f6f}
.adminbar__dropdown .button{border:none;}
.adminbar__dropdown .button:not(.active):not(:hover){opacity:.7}
.adminbar__dropdown .button.active{background:#000;}
.adminbar__dropdown .button:hover{opacity:1}
.adminbar__dropdown .button__label{flex:1;text-align:left}

.dropdown{position:relative}
.dropdown__trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:1px solid #6f6f6f;border-radius:5px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;min-width:140px;justify-content:space-between}
.dropdown__trigger:hover{border-color:#999}
.dropdown__icon{transition:transform .15s ease}
.dropdown--open .dropdown__icon{transform:rotate(180deg)}
.dropdown__menu{position:absolute;top:100%;left:0;right:0;padding-top:4px;background:transparent;z-index:10}
.dropdown__menu-inner{background:var(--background-dark);border:1px solid #6f6f6f;border-radius:5px;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.dropdown__item{display:block;width:100%;padding:8px 12px;background:none;border:none;color:#bcbcbc;text-align:left;cursor:pointer;border-radius:3px;font-size:13px}
.dropdown__item:hover{background:rgba(255,255,255,0.1);color:#fff}
.dropdown__item--active{color:#fff;background:rgba(255,255,255,0.15)}

/* Title dropdown (integrated with page title) */
.adminbar__title-dropdown{position:relative;margin:0 0 0 -15px;display:inline-block}
.adminbar__title-dropdown-trigger{display:flex;align-items:center;gap:15px;padding:0 15px 0 20px;background:transparent;border:none;border-left:1px solid #4d4d4e;border-right:1px solid #4d4d4e;color:#fff;cursor:pointer;height:50px;min-width:250px;max-width:350px}
.adminbar__title-dropdown-trigger:hover{background:rgba(255,255,255,0.05)}
.adminbar__title-dropdown-text{display:flex;flex-direction:column;text-align:left;flex:1;overflow:hidden}
.adminbar__title-dropdown-status{font-size:11px;opacity:0.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminbar__title-dropdown-label{font-size:1.2em;font-weight:bold;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminbar__title-dropdown-icon{opacity:0.7;transition:transform .15s ease}
.adminbar__title-dropdown--open .adminbar__title-dropdown-icon{transform:rotate(180deg)}
.adminbar__title-dropdown-menu{position:absolute;top:100%;left:0;padding-top:0;background:transparent;z-index:10;width:250px}
.adminbar__title-dropdown-menu-inner{background:var(--background-dark);border:1px solid #4d4d4e;border-top:none;padding:4px}
.adminbar__title-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;color:#bcbcbc;text-align:left;cursor:pointer;font-size:13px}
.adminbar__title-dropdown-item:hover{background:rgba(255,255,255,0.1);color:#fff}
.adminbar__title-dropdown-item--active{color:#fff;background:rgba(255,255,255,0.15)}
.adminbar__title-dropdown-item svg{width:16px;height:16px;flex-shrink:0}


/*******************************************************/
/* API Working
/*******************************************************/

.api-working{position:fixed;top:-5px;left:0;right:0;z-index:1300;margin:0;transition:.2s all;opacity:0;}
.api-working--active{top:0;opacity:1}
.api-working__line {width: 100%;height:5px;position: relative;overflow: hidden;background-color: rgba(255,255,255,1)}
.api-working__line:before {content: "";position: absolute;left: -50%;height: 5px;width: 40%;background-color: #397ff1;animation: lineAnim 1s linear infinite;}
@keyframes lineAnim {0% {left: -40%;}50% {left: 20%;width: 80%;}100% {left: 100%;width: 100%;}}

/*******************************************************/
/* Content
/*******************************************************/

.admin__main{position:fixed;top:50px;left:50px;right:0;bottom:0;overflow:auto;z-index:1}


.content{padding:30px 30px;}

.content-columns{display:flex;flex:1;gap:30px;margin:0 -30px}
.content-columns__main{flex:1;padding:0px 0 0 30px;width:100%;overflow:auto}
.content-columns__end{width:30%;max-width:300px;padding:0px 30px;min-width:275px;border-left:1px solid var(--border);}

.breadcrumb{font-size:.9em;padding:0px 30px;margin:15px 0 0 0}
.breadcrumb ul{margin:0;padding:0;list-style:none;display:flex;gap:10px}
.breadcrumb ul li{margin:0;padding:0;display:flex;gap:10px}
.breadcrumb ul li a{text-decoration: none;display:inline-flex;align-items:center;gap:5px}
.breadcrumb ul li a svg{width:16px;height:16px;}
.breadcrumb ul li:not(:last-child){font-weight:bold;cursor:pointer}
.breadcrumb ul li:first-child{font-weight:bold;cursor:pointer}
.breadcrumb ul li:not(:first-child):before{opacity:.5;content:'/';display:block;}

.page-title{border-bottom:1px solid var(--border);padding:20px 30px 20px 30px;background:#fff;position:sticky;top:0;display:flex;align-items:center;gap:15px;justify-content:space-between;}
.breadcrumb ~ .page-title{padding-top:10px;}
.page-title__start{}
.page-title__start > *{margin:0;}
.page-title__start h1{font-weight:500;font-size:2em;line-height:1.2}
.page-title__start h1 a{cursor:pointer;}
.page-title__start h1 a:hover{text-decoration:underline;}
.page-title__end{width:33.33%;text-align:right;display:flex;gap:15px;justify-content:flex-end;align-items:center;}

.subheading{display:flex;justify-content:space-between;align-items:center;margin:0 0 20px 0}
.subheading__start{}
.subheading__start h2{margin:0;}
.subheading__end{text-align:right}


.tabs__control{display:flex;gap:25px;margin:0 0 20px 0}
.tabs__control .tab__item{border-bottom:2px solid transparent;display:inline-flex;gap:10px;align-items:center;padding:5px 0px;cursor:pointer;text-decoration: none;color:var(--text);background:none}
.tabs__control .tab__item svg{width:18px;height:18px;opacity:.5;}
.tabs__control .tab__item--active{border-bottom:2px solid var(--primary);color:#000}
.tabs__control .tab__item--active svg{opacity:1;}
.tabs__control.tabs__control--vertical{display:block;margin:0}
.tabs__control.tabs__control--vertical .tab__item{display:block;margin:0 0 10px 0;padding:0 0 3px 0}
.tabs__control.tabs__control--vertical .tab__item--active{border-bottom:2px solid var(--primary);}

.list{border-collapse:collapse;width:100%}
.list__header{display:flex;;gap:15px;align-items:center;background:var(--background-light);padding:0 25px;border-radius:5px;margin:0 0 10px 0;overflow:hidden}
.list__header > .list__column{font-weight:bold;}

.list__column{padding:15px 0}

.list__body{margin:8px 0 0 0;}
.list__body.list__body--sortable{margin:0}

.list__item{position:relative;}
.list__item-selected .list__item-heading{border-color:#000}
.list__item-current .list__item-heading .list__column--title{color: var(--primary)}
.list__body:not(.list__body--sortable) .list__item{margin-bottom:8px}

.list__item-heading{display:flex;align-items:center;position:relative;background:#fff;border:1px solid var(--border);min-height:50px;gap:15px;padding:0 25px;border-radius:5px;text-decoration:none;overflow:hidden}
.list__item-heading--linked:hover{border-color:var(--border-dark);cursor:pointer}
.list__item--open > .list__item-heading{border-radius:5px 5px 0 0;border-color:var(--border-dark)}
.list__item-heading-link:hover{background: var(--background-light)}
.list__item--drag{cursor:move;}

.list__column--date{width:165px;}
.list__column--actions{width:50px;text-align:right;display:flex;justify-content:flex-end;gap:10px}
.list__column--link{color:#000;font-weight:500;text-decoration:none}
.list__column--link:hover{cursor:pointer}
.list__column--title{color:#000;position:relative;flex:1}
.list__column--title svg{width:24px;height:24px;vertical-align:middle;position:relative;top:-1px;margin:0 5px 0 0;opacity:.5}
.list__column--image{width:50px;margin:-10px 0 -10px -15px;font-size:0}
.list__column--image img{width:100%;height:100%;object-fit:fill;border-radius:5px;}
.list__column--gsp-id{width:100px}
.list__column--screenshot{width:150px;}
.list__column--screenshot .screenshot{max-height:150px;overflow:hidden;cursor:pointer;margin:-15px -25px -15px 0;font-size:0}
.list__column--screenshot .screenshot img{width:100%;;border-radius:5px}
.list__column--views{width:52px;display:flex;align-items:center;justify-content:flex-end;text-align:right;white-space:nowrap;text-align:center}
.list__column--views .views-number{font-variant-numeric:tabular-nums;font-weight:500;color:var(--primary)}
.list__column--views .views-number--zero{color:#aaa;font-weight:normal}
.list__column--metric{width:78px;display:flex;align-items:center;justify-content:flex-end;text-align:right;white-space:nowrap;text-align:center}
.list__column--metric .metric-number{font-variant-numeric:tabular-nums;font-weight:500;color:#444}
.list__column--metric .metric-number--clicks{color:var(--primary);font-weight:600}
.list__column--metric .metric-number--zero{color:#bbb;font-weight:normal}
/* Smaller header labels so the long metric names fit the narrower columns */
.list__header > .list__column--views,
.list__header > .list__column--metric{font-size:.82em}

.list__item-content{border:1px solid var(--border-dark);border-top:none;border-radius:0 0 5px 5px;padding:20px 20px}
.layout-preview{display:grid;gap:10px;}
.layout-preview__item{background:var(--background-light);border-radius:4px;padding:10px 10px;text-align:center}

.list__item-children{padding-left:20px}

.dragging{opacity:.4;}
.list__item.dragging .list__item-heading{background:rgba(255,255,255,.7);}


.drop-target{opacity:0;pointer-events:none;border:1px solid var(--primary);transition:.1s all;font-size:0;padding:0 !important;border-radius:100px;height:8px;margin:1px 0;}
.list__body > .drop-target:first-child{margin-top:-8px;}
.list__body.dragging-container-active{zzzpadding-bottom:75px;}
.dragging-container-active .drop-target{pointer-events:auto;}
.list__item.dragging + .drop-target{opacity:0;pointer-events:none}
.list__item.dragging .drop-target{opacity:0;pointer-events:none}

.post-status{display:inline-block;padding:3px 8px;border-radius:5px;border:1px solid transparent;font-weight:normal;font-size:12px;margin:-5px 0 -5px 5px}
.post-status--draft{border-color:orange;}
.post-status--schedule{border-color:blue;}
.post-status--missing{border-color:red;color:red;}
.post-status--unsubscribed{border-color:#8b5cf6;color:#8b5cf6;}


.post-tools{opacity:0;font-weight:normal;font-size:12px;position:absolute;right:10px;top:50%;transform: translateY(-50%);}
.list__item-heading:hover .post-tools{opacity:1;}
.post-tools ul{margin:0;padding:0;list-style:none;display:flex;border:1px solid var(--border);border-radius:5px}
.post-tools ul li{margin:0;display:inline-block;padding:6px 10px;background:var(--background-light);cursor:pointer}
.post-tools ul li a{text-decoration:none;}
.post-tools ul li:first-child{border-radius:5px 0 0 5px}
.post-tools ul li:last-child{border-radius:0 5px 5px 0}
.post-tools ul li:not(:last-child){border-right:1px solid var(--border);}
.post-tools ul li:hover{background:#fff}
.post-tools ul li svg{width:16px;height:16px;}

.toggle-hierarchy{cursor:pointer;background: var(--background-light);position:absolute;top:0;left:0;bottom:0;width:18px;text-align:center;border-right:1px solid var(--border);border-radius:5px 0 0 5px}
.toggle-hierarchy:hover{color:var(--primary);background:#fff}
.toggle-hierarchy svg{width:10px;height:10px;}

.drop-target--hovering{background:var(--primary);opacity:1;}

.drop-target--child{position:absolute;right:0;bottom:0;left:45px;}

.list__actions{margin:25px 0 0 0;}


.notice{background:#fff;padding:15px 25px;margin:0 0 30px 0;border:1px solid var(--primary);border-left:10px solid var(--primary);position:relative}
.notice--error{border:1px solid var(--danger);border-left:10px solid var(--danger);}
.notice--danger{border:1px solid var(--danger);border-left:10px solid var(--danger);}
.notice--success{border:1px solid var(--success);border-left:10px solid var(--success);}
.notice--muted{border:1px solid var(--border);border-left:10px solid var(--border)}
.notice > *:last-child{margin-bottom:0;}
.notice h2{font-size:1.3em;margin:0 0 1em 0;}
.notice p{margin:0 0 1em 0;}
.notice__close{position:absolute !important;top:8px;right:20px;}


.notice.global-error{position:fixed !important;top:10px;left:10px;right:10px;z-index:3;padding:25px 60px 25px 25px}
.notice.global-error .button{position:absolute;top:14px;right:20px;}

.tags{}
.tag{display:inline-block;font-size:12px;line-height:1;background: var(--background-light);padding:4px 10px;margin:0 4px 2px 0;border-radius:100px;;border:1px solid var(--border);cursor:pointer}
.tag--active{border:1px solid var(--primary);background:#fff;color:#000}


/*******************************************************/
/* Buttons
/*******************************************************/

button{font-family:inherit;font-size:inherit;background:none;border:none;margin:0;padding:0}

.buttons{display:flex;gap:15px;margin:15px 0 0 0}

.button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:0 1.25em;line-height:1;white-space:nowrap;zzzvertical-align:middle;font-size:13px;margin:0;border-radius:4px;min-height:2.7em;text-decoration:none;cursor:pointer;position:relative;font-family:inherit;color:var(--text);border:1px solid var(--primary);touch-action:manipulation;transition:.2s all;font-weight:500;background:#fff;}
.button:not(.button--link):hover{color:#fff;background:var(--primary)}

.button--small{font-size:12px}
.button--small .button__icon svg{width:16px;height:16px;}

.button--pixel{border:1px solid var(--border);padding:4px;min-height:auto;border-radius:100px;margin-bottom:-2px;}
.button--pixel .button__icon{margin:0 !important;}
.button--pixel .button__icon svg{width:12px;height:12px;}

.zzzbutton--cycle-breakpoint.breakpoint-icon--base{opacity:0}
.field .button--cycle-breakpoint{opacity:0}
.field--has-value .button--cycle-breakpoint{opacity:1;}

.button__label{}
.button__label{font-weight:500}

.button__icon{vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;outline:none;cursor:pointer;}
.button__icon svg{color:inherit;width:18px;height:18px;}
.button:hover .button__icon{}
.button__icon:only-child{margin:0 -.5em;}

.button:disabled, .button.button--disabled{border-color:var(--border);cursor:default;pointer-events:none;background: var(--background-light);color:var(--text-grey);}
.button.button--primary:disabled, .button--primary.button--disabled{}

.button--full-width{width:100%;}

.button--active{background:#fff;color:#000;}
.button--inactive{border:1px solid var(--border)}
.button--inactive .button__icon{opacity:.5}

.button--cancel{border:1px solid var(--border)}

.button--primary{background:var(--primary);color:#fff;border:1px solid transparent;}
.button--primary:hover{background:var(--primary-darker);color:#fff;border:1px solid transparent}
.button--primary .button__icon img, .button--primary .button__icon{}
.button--primary:hover .button__icon img, .button--primary:hover .button__icon svg{}


.button--link,.button--link:hover{background:none !important;border:none;box-shadow:none;padding:0;min-height:auto}
.button--link > span:only-child{margin:0 !important;}
.button--link:hover .button__icon svg{}
.button--link .button__label{margin-right:0;}
.button--link .button__icon{margin-left:0;}


.button--underline{text-decoration:underline;}

.button--delete:not([disabled]){border-color:var(--danger) !important;color:var(--danger)}
.button--delete:hover{background-color:var(--danger);color:#fff;}
.button--delete.button--link:hover{background-color:none;color:var(--danger)}
.button--delete:hover .button__icon img, .button--primary-outline:hover .button__icon svg{filter:invert(100)}
.button--delete.button--link{color:var(--danger);}

.button--circle{border-radius:100px;width:2.6em;height:2.6em;aspect-ratio:1/1}

.button--new{background-color: var(--success);color:#000;border:none}
.button--new:hover{color: var(--success);}

.button--inverse{border-color:#4d4d4e;;color:#efefef;}
.button--inverse.button--active{background:#000 !important;}
.button--inverse:not(.button--primary){background:var(--background-dark);}
.button--inverse.button--disabled{border-color:#4d4d4e;}

.button-toggle{display:flex;}
.button-toggle .button:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;}
.button-toggle .button:not(:only-child):not(:first-child):not(:last-child){border-radius:0;border-right:none;}
.button-toggle .button:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;;}
.zzzzbutton-toggle .button:not(.button--active) .button__icon{opacity:.5}


.button-toggle-group{display:flex;}
.button-toggle-group .button{border-color:var(--input-border);background-color:var(--background-light);border-right:none;flex:1}
.button-toggle-group .button:hover{color:#fff;}
.button-toggle-group .button--active{background-color:#fff;}
.button-toggle-group .button .button__icon{opacity:.4}
.button-toggle-group .button.button--active .button__icon{opacity:1}
.button-toggle-group .button.button--inherited .button__icon{opacity:1}
.button-toggle-group .button:first-child{border-radius:4px 0 0 4px;}
.button-toggle-group .button:not(:first-child):not(:last-child){border-radius:0;}
.button-toggle-group .button:last-child{border-radius:0 4px 4px 0;border-right:1px solid var(--input-border);}


/*******************************************************/
/* Page Modal
/*******************************************************/

.modal{opacity:0;visibility:hidden;background: rgba(47,64,92,0.3);position:fixed;z-index:1201;top:0;right:0;bottom:0;left:0;display:flex;align-items: center;justify-content: center;padding:20px 20px;transition:.1s all;font-size:14px;color:var(--text)}
.modal--active{opacity:1;visibility:visible}
.modal__container{background:#fff;width:100%;max-height:100%;width:95vw;height:95vh;max-width:1200px;border-radius:4px;display:flex;flex-direction:column;opacity:1;transform:scale(1);box-shadow:0 0 15px rgba(47,64,92,0.1)}
.modal__header{display:flex;gap:25px;align-items:center;padding:18px 30px;border-bottom:1px solid var(--border);background: var(--background-light);border-radius:4px 4px 0 0;font-weight:bold;font-size:1.2em;position:relative;}
.modal__close{position:absolute;right:20px;cursor:pointer;background:#fff;border:1px solid var(--border);border-radius:4px;line-height:0;padding:5px}
.modal__close svg{opacity:.8;width:18px;height:18px}

.modal__body{flex:1;overflow:auto;padding:30px 30px}
.modal__body > *:last-child{margin-bottom:0;}
.modal__body .page-title{padding-top:0;padding-left:0;padding-right:0;margin:0 0 20px 0;position:relative;}
.modal__body .content{overflow-y:visible}
.modal__footer{display:flex;align-items:center;justify-content:space-between;padding:15px 30px;background: var(--background-light);border-top:1px solid var(--border);border-radius:0 0 4px 4px;min-height:66px}
.modal__footer-start{display:flex;flex-direction:row;gap:15px;}
.modal__footer-end{display:flex;flex-direction:row;gap:15px;justify-content: flex-end}

/* Start 20px below the fixed 50px adminbar instead of centering under it */
.modal--media{align-items:flex-start;padding-top:70px}
.modal--media .modal__container{height:calc(100vh - 90px);max-height:none}


/*******************************************************/
/* Form Elements
/*******************************************************/

.fields-grid{display:grid;grid-template-columns: 1fr;gap:20px;margin-bottom:20px;}
.fields-grid--2{grid-template-columns: repeat(2,1fr);}
.fields-grid--3{grid-template-columns: repeat(3,1fr);}
.fields-grid--4{grid-template-columns: repeat(4,1fr);}
.fields-grid--5{grid-template-columns: repeat(5,1fr);}
.fields-grid > .field{margin:0;}

.field{margin-bottom:20px;position:relative;flex:1}
.field:last-child{margin:0;}
.field--no-margin{margin:0;}
.field--half-margin{margin-bottom:.75em;}
.field__label{margin:0 0 5px 0;color:#000;font-weight:500;}
.field__label label{margin-right:4px;}
.field__label button{position:relative;vertical-align:text-bottom;}
.field--horizontal{display:flex;align-items:center}
.field--horizontal .field__label{margin:0 1em 0 0;width:20%;line-height:1.2}
.field--horizontal .field__input{flex:1;}

.field-editing-responsive-warning{margin:0 0 15px 0;font-size:11px;display:flex;align-items:center;gap:5px}
.field-editing-responsive-warning .button{flex:0;}

.field--nested-label{}
.field--nested-label .field__label{margin:0 0 .4em 0;font-size:.9em}


.field__required{color:red;margin:0 0 0 5px}
.field__input{position: relative;}
.field__description{font-size:.9em;margin:10px 0 0 0;}
.field__content{position:relative}
.field__required-message{font-size:.9em;color:red;margin:10px 0 0 0;}

.field__input--textfield, 
.field__input--password, 
.field__input--email,
.field__input--textarea,
.field__input--code,
.field__input--select,
.field__input--multiselect,
.field__input--date,
.field__input--number,
.field__input--telephone{width:100%;font-size:inherit;font-family:inherit;padding:.7em .75em .7em .75em;border:1px solid var(--input-border);border-radius:0;margin:0;color:#000;display:block;background:#fff;border-radius:4px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.01);}

textarea.field__input:focus,
select.field__input:focus,
input.field__input:focus{border-color:var(--primary);outline:3px solid var(--primary-lighter);}

.field__input--color{}
.field__input--textfield{}
.field__input--email{}
.field__input--textarea{}
.field__input--select{-webkit-appearance:none;padding-right:30px;background-color:#fff;background-image:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' fill='%23000' height='20' viewBox='0 0 24 24'><path fill='%23666' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");background-position:99% 63%;background-repeat:no-repeat;}
.field__input--range{width:100%;margin: 0;padding: 0;}
.field__input--date{}
.field__input--textfield:disabled, .field__input--textarea:disabled, .field__input--select:disabled{background-color:#fff;color:#666}
.field__input--large{font-size:1.5em;}

.field__input--code{font-family:monospace;font-size:14px}

.field--type-color{}
.field--type-color .field__content{display:flex;gap:5px;}
.field--type-color .contrast-error-indicator{position:absolute;top:0;right:0;bottom:0;width:40px;padding:5px;z-index:1;font-weight:bold;border:1px solid red;display:flex;align-items:center;justify-content:center}
.field--type-color .nullability-checkbox{display:none;}
/*
.color-picker{position:absolute;top:100%;left:0;background:#fff;width:240px;padding:5px;border-radius:5px;border:1px solid var(--border);z-index:2}
.color-picker .color-picker__canvas{position:relative;font-size:0}
.color-picker .color-picker__canvas canvas{}
.color-picker .color-picker__pointer{opacity:0;border:2px solid rgba(255,255,255,0.8);width:16px;height:16px;border-radius:100px;position:absolute;z-index:2;pointer-events:none}
.color-picker .color-picker__canvas:hover .color-picker__pointer{opacity:1}
.color-picker .color-picker__presets{display:grid;grid-template-columns: repeat(5,1fr);gap:5px;margin:5px 0 0 0}
.color-picker .color-picker__presets .palette{width:100%;}
.palette{border-radius:5px;width:40px;height:35px;border:1px solid var(--border);outline:1px solid #fff}
.palette:hover{border:1px solid #999;outline:1px solid #fff}
.palette--empty{background-image: linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0px;}
.field--type-color .field__content > .palette{height:auto}
*/
.color-picker .color{outline:1px solid #fff;box-shadow:0 0 4px rgba(0,0,0,0.3)}
.color-picker .nullability-checkbox{display:none !important;}

.field--type-color .field__content .field__input--textfield{flex:1}

.field--type-link .field__link-preview{background:#fff;border:1px solid var(--border);padding:10px 35px 10px 15px;margin:0 0 10px 0;border-radius:5px;position:relative;overflow-wrap: break-word;cursor:pointer}
.field--type-link .field__link-preview:hover{border-color:var(--primary)}
.field--type-link .field__link-preview .button{position:absolute;top:7px;right:10px;;}

.field--type-range{}
.field--type-range .field__content{display:flex;position:relative;}
.field--type-range .field__content .field__input--textfield{flex:1}
.field--type-range .field__content .field__input--select{width:60px;}
.field--type-range .field__input--range{opacity:0;border:none;margin:0;padding:0;position:absolute;bottom:-15px;left:0;right:0;outline:none !important}
.field--type-range:hover .field__input--range{opacity:1}

.field--type-box-shadow{}
.field--type-box-shadow .field__content{display:grid;grid-template-columns:1fr 1fr;gap:15px 5px}
.field--type-box-shadow .field__content > div{position:relative;display:flex;flex-wrap:wrap}
.field--type-box-shadow .field__content > div .field__sublabel{display:block;width:100%;font-size:11px;margin-bottom:2px}
.field--type-box-shadow .field__content > div .field__input--textfield{flex:1}
.field--type-box-shadow .field__content > div .field__input--select{width:60px;}
.field--type-box-shadow .field__content > div .field__input--range{opacity:0;border:none;margin:0;padding:0;outline:none;position:absolute;bottom:-15px;left:0;right:0;}
.field--type-box-shadow .field__content > div:hover{z-index:2}
.field--type-box-shadow .field__content > div:hover .field__input--range{opacity:1}

.field--type-icon{}
.field--type-icon .field__content{}

.field--type-media{max-width:400px}
.field--type-media .selected-media-preview{margin:0 0 10px 0;position:relative;border:1px solid var(--border);font-size:0;text-align:center}
.field--type-media .selected-media-preview img{width:100%;height:100%;object-fit:contain;pointer-events:none;}

.focal-point{margin:0;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);pointer-events:none;background:rgba(255,255,255,0.8);border-radius:100px}

.field--type-image-position{display:none}

.field--type-checkbox{}
.field--type-checkbox .field__content{display:flex;align-items:center;gap:5px}
.field--type-checkbox .field__sublabel{}

.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px, 1fr));grid-gap:10px}

.icon-preview{display:block;padding:10px;border-radius:5px;border:1px solid var(--border);text-align:center;background:#fff;position:relative;content-visibility: auto}
.icon-preview:hover{border:1px solid var(--border-dark);}
.icon-preview svg, .icon-preview img{width:48px;height:48px}
.icon-preview .icon-delete{position:absolute;top:2px;right:2px;}

.field--type-separator{border-bottom:1px solid var(--border-dark);}

.field--type-repeater{}

.field--type-tags .svelte-tags-input-layout{min-height:41px;}
.field--type-tags .svelte-tags-input-layout .svelte-tags-input-tag{font-size:15px !important;font-family:inherit !important;border-radius:5px !important;padding:5px 10px !important;background-color: var(--primary) !important}
.field--type-tags .svelte-tags-input-layout .svelte-tags-input{font-size:15px !important;font-family:inherit !important;border-radius:5px !important}

.repeater{display:grid;grid-template-columns: 1fr;gap:5px}
.repeater__item{border-radius:5px;cursor: grab;border:1px solid var(--border-dark)}
.repeater__item-header {padding:15px 15px;position:relative;font-weight:bold;cursor:pointer;display:flex;align-items:center;gap:10px;background:#e7ecf2;border-radius:5px 5px 0 0 }
.repeater__item--condensed .repeater__item-header {padding:5px;gap:5px}
.repeater__item-header-label{flex:1}
.repeater__item-header-actions{display:flex;gap:3px}
.repeater__item-drag{cursor:move;width:20px}
.repeater__item-drag svg{width:18px;height:18px;}
.repeater__item-body{padding:15px 15px;display:flex;flex-direction:column;gap:15px;border-radius:0 0 5px 5px}
.repeater__item .settings{display:none;}
.repeater__item-active .settings{display:block}
.repeater__item .settings__heading{display:none}
.repeater__item .settings__section:last-child{border-bottom:0;}

.repeater__actions{display:flex;gap:10px}
.repeater__actions:not(:only-child){margin:20px 0 0 0;}

.search{display:flex;gap:10px;}
.search .button{display:flex;}

.pagination{display:flex;justify-content:space-between;gap:20px;margin:30px 0 0 0}


.color-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px, 1fr));position:relative;}
.color-palette__item{display:inline-block;aspect-ratio:1/1;border:1px solid var(--border);cursor:pointer;position:relative;transition:.2s all;margin:1px}
.color-palette__item div{opacity:0;}
.color-palette__item:hover div{opacity:1;}
.color-palette__item-actions{display:flex;gap:6px;justify-content:center;position:absolute;top:15px;left:0;right:0;width:100%;}
.color-palette__item-hex{position:absolute;bottom:0;left:0;right:0;background:#000;color:#fff;text-align:center;padding:2px 1px;font-weight:bold;font-size:12px} 


/*******************************************************/
/* Page/Form Builder
/*******************************************************/

.builder{display:none;width:100%;height:100%;z-index:2;position:relative;}
.builder--active{display:flex;}

/* Drop zones shown while dragging a sidebar's title bar to dock left/right */
.builder__dock-zone{position:absolute;top:0;bottom:0;width:50%;z-index:50;pointer-events:none;border:2px dashed transparent;transition:background .12s, border-color .12s;}
.builder__dock-zone--left{left:0;}
.builder__dock-zone--right{right:0;}
.builder__dock-zone--active{background:rgba(47,117,230,0.1);border-color:rgba(47,117,230,0.6);}

.builder__preview{flex:1;background:#fff;text-align:center;position:relative;z-index:1;overflow-y:hidden;overflow-x:auto}
.builder__preview-breakpoint-active{background:#fcfcfd;}

.preview-iframe{width:100%;height:100%;position:relative;}
body.is-dragging .preview-iframe{pointer-events:none}


/* Breakpoints */
.builder__preview-breakpoint-active {padding:15px;}
.builder__preview-breakpoint-active .preview-iframe{border:1px solid var(--border);}

.breakpoint-wrapper{}
.breakpoints--active{}

.breakpoint-wrapper .breakpoints{display:flex;justify-content:center;flex:1;gap:5px}
.breakpoint-wrapper .breakpoints button{background:none;margin:0;padding:5px;font-size:0;cursor:pointer;border-radius:100px}
.breakpoint-wrapper .breakpoints button svg{width:16px;height:16px;color:#fff;opacity:.7}
.breakpoint-wrapper .breakpoints .button--active{background: var(--primary);}
.breakpoint-wrapper .breakpoints .button--active:not(:first-child){background:var(--primary);}
.breakpoint-wrapper .breakpoints .button--active svg{opacity:1;}


.builder-settings{background: var(--background-light);border-left:1px solid var(--border);;display:flex;flex-direction: column;width:300px;flex-shrink:0;position:relative;font-size:12px}

/* Drag handle on the left edge to resize sidebar width (right edge when docked left) */
.builder-settings__resize{position:absolute;top:0;left:-3px;width:7px;height:100%;z-index:6;cursor:ew-resize;touch-action:none;background:transparent;transition:background .15s}
.builder-settings__resize:hover,.builder-settings__resize:active{background:linear-gradient(to right, transparent, rgba(47,117,230,0.35))}
.builder-settings--dock-left .builder-settings__resize{left:auto;right:-3px}
.builder-settings--dock-left .builder-settings__resize:hover,.builder-settings--dock-left .builder-settings__resize:active{background:linear-gradient(to left, transparent, rgba(47,117,230,0.35))}

/* Docked-left sidebar: border on the inner (right) edge instead of the left */
.builder-settings--dock-left{border-left:none;border-right:1px solid var(--border)}

/* Title bar — drag to dock the sidebar left or right */
.builder-settings__dragbar{display:flex;align-items:center;gap:8px;padding:4px 12px;cursor:grab;user-select:none;background:#fff;border-bottom:1px solid var(--border);color:#555;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em;touch-action:none;flex-shrink:0}
.builder-settings__dragbar:active{cursor:grabbing}
.builder-settings__dragbar-grip{width:14px;height:10px;flex-shrink:0;background-image:radial-gradient(currentColor 1px, transparent 1px);background-size:4px 4px;opacity:.45}
.builder-settings__dragbar-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.builder-settings__start{flex:1;overflow-y:auto;padding:0 15px}
.builder-settings--tree .builder-settings__start{padding-top:12px}
.builder-settings__start::-webkit-scrollbar{width:7px;background-color:#F5F5F5;position:relative;right:-7px}
.builder-settings__start::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,0.1);}
.builder-settings__start::-webkit-scrollbar-thumb{border-radius:10px;background:#c2c2c2;}
.builder-settings__start::-webkit-scrollbar-thumb:hover{background:#7d7d7d;}
.builder-settings__end{padding:15px 15px;}

.builder-settings__table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);}
.builder-settings__table th{border-bottom:1px solid var(--border);text-align:left;padding:5px 10px;word-break:break-word;font-weight:600}
.builder-settings__table td{border-bottom:1px solid var(--border);;padding:5px 10px;word-break:break-word}


.dragging-tooltip{position:fixed;z-index:10;background:#fff;border-radius:5px;border:1px solid var(--primary);padding:10px 40px;pointer-events:none;color:#000;box-shadow:0 0 30px rgba(0,0,0,0.2)}

.add-content-columns{display:flex;gap:30px}
.add-content-columns__column{width:175px}
.add-content-columns__content{flex:1}

.add-content-columns__column{}
.add-content-columns__column ul{margin:0 0 15px 0;padding:0 0 15px 0;list-style:none;}
.add-content-columns__column ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid var(--border);list-style:none;font-weight:bold;}
.add-content-columns__column ul li:last-child{border:none}
.add-content-columns__column ul li ul{margin:10px 0 0 0}
.add-content-columns__column ul li ul li{margin:0 0 8px 0;font-weight:normal;border:none;border:none}
.add-content-columns__column ul li ul li:last-child{margin:0;}
.add-content-columns__column .tab__item button{border:none}
.add-content-columns__column .tab__item--active button{font-weight:bold}

.add-content{display:grid;;grid-template-columns:repeat(auto-fill,minmax(250px, 1fr));gap:15px;}
.add-content.add-content--sections{}

.add-content__item{background: var(--background-light);border:1px solid var(--border);border-radius:4px;text-align:center;z-index:100;user-select: none;cursor:pointer;display: flex;flex-direction: column;justify-content: center;}
.add-content__item:hover{border:1px solid #000;}
.add-content__item *{user-select: none;}
.add-content__item-image{user-select: none;text-align:center;font-size:0;background:#fff;border-bottom:1px solid var(--border);border-radius:5px 5px 0 0;max-height:300px;overflow:hidden}
.add-content__item-image img{width:100%;border-radius:5px 5px 0 0;}
.add-content__item-image.add-content__item-image--library{aspect-ratio:16/9;width:100%;height:100%;}
.add-content__item-image.add-content__item-image--library img{width:100%;height:100%;object-fit: cover;object-position: top left;transition:.5s all}
.add-content__item-image.add-content__item-image--library:hover img{object-position: bottom left}
.add-content__item-image svg{width:64px;height:64px;margin:25px 0}
.add-content__item-content{padding:10px 20px;font-size:13px;}
.add-content__item-title{font-weight:bold;display:block;font-size:15px}
.add-content__item-tags{margin:8px 0 0 0}
.add-content__item-tags .add-content__item-tag{border:1px solid var(--border-dark);background:#fff;padding: 1px 8px 2px 8px;display:inline-block;margin:0 3px 3px 0;border-radius:100px;font-size:11px;}

.filter-tag-options{margin:0 0 10px 0}
.filter-tag-options-tag{border:1px solid var(--border-dark);background:#fff;padding: 1px 8px 2px 8px;display:inline-block;margin:0 3px 3px 0;border-radius:100px;font-size:11px;cursor:pointer}
.filter-tag-options-tag:hover, .filter-tag-options-tag--active{background: var(--primary);color:#fff}



/*******************************************************/
/* File Upload List
/*******************************************************/

.file-attachment-container {
  background: var(--primary-light);
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.file-item__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.file-item__details {
  flex: 1;
  min-width: 0;
}

.file-item__label {
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.file-item__meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item__remove {
  padding: 0.25rem 0.5rem;
  background: var(--color-danger);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.file-item__remove:hover {
  background: var(--color-danger-dark);
}

.file-item__remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/*******************************************************/
/* Component Tree
/*******************************************************/

.component-tree{}
.component-tree ul{margin:0;padding:0;list-style:none}
.component-tree ul ul{padding:0}
.component-tree ul li{margin:0;padding:0;font-size:12px;position:relative}
.component-tree ul li{margin-bottom:1px}
.component-tree ul li:last-child{margin-bottom:0}
.component-tree ul li .component-tree__header{--tree-accent:var(--primary);background:transparent;border:none;padding:4px 7px;display:flex;align-items:center;cursor:grab;border-radius:4px;transition:background .1s;scroll-margin:24px 0}
/* Color-code the accent by component type to match the editor overlay: section/hero = purple, group = orange, column = green, everything else = blue */
.component-tree ul li .component-tree__header[data-component-type*="section"],
.component-tree ul li .component-tree__header[data-component-type*="hero"]{--tree-accent:#7433e2}
.component-tree ul li .component-tree__header[data-component-type$="group"]{--tree-accent:#e36000}
.component-tree ul li .component-tree__header[data-component-type="column"]{--tree-accent:#16a34a}
.component-tree ul li .component-tree__header:active{cursor:grabbing}
.component-tree ul li .component-tree__header-editing{background:color-mix(in srgb, var(--tree-accent) 16%, transparent)}
/* Highlight the matching node while its component is hovered in the editor preview */
.component-tree ul li .component-tree__header-hover{background:color-mix(in srgb, var(--tree-accent) 8%, transparent);box-shadow:inset 2px 0 0 var(--tree-accent)}
/* Selected node stays prominent even when also hovered in the preview */
.component-tree ul li .component-tree__header-editing.component-tree__header-hover{background:color-mix(in srgb, var(--tree-accent) 16%, transparent)}
.component-tree ul li .component-tree__header-label{flex:1;min-width:0;cursor:pointer;font-weight:500;color:#333;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.component-tree ul li.component-tree__top-level > .component-tree__header > .component-tree__header-label{font-weight:700}
.component-tree ul li .component-tree__header-buttons{display:flex;gap:2px;align-items:center;opacity:0;transition:opacity 0.15s}
.component-tree ul li .component-tree__header:hover .component-tree__header-buttons{opacity:1}
.component-tree ul li .component-tree__header:hover{background:rgba(0,0,0,0.05)}
.component-tree ul li .component-tree__header-editing:hover{background:color-mix(in srgb, var(--tree-accent) 16%, transparent)}
.component-tree__children{margin-left:9px;padding-left:9px;padding-top:2px;border-left:1px solid rgba(0,0,0,0.04)}
.component-tree__icon{flex-shrink:0;margin-right:6px;color:var(--tree-accent, var(--primary))}
.component-tree__icon svg{width:14px;height:14px;display:block;}
.component-tree__thumbnail{flex-shrink:0;margin-right:8px;width:32px;height:32px;border-radius:3px;overflow:hidden;background:#eee;display:flex;align-items:center;justify-content:center}
.component-tree__thumbnail img{width:100%;height:100%;object-fit:cover;display:block}
.component-tree__drag-handle{flex-shrink:0;margin-right:6px;color:#aaa;display:flex;align-items:center;justify-content:center;cursor:grab}
.component-tree__drag-handle svg{width:16px;height:16px;display:block}
.component-tree ul li .component-tree__header:hover .component-tree__drag-handle{color:#666}
.component-tree__menu-btn{background:none;border:none;padding:4px;cursor:pointer;border-radius:3px;color:#666;display:flex;align-items:center;justify-content:center}
.component-tree__menu-btn:hover{background:rgba(0,0,0,0.08);color:#333}
.component-tree__menu-btn svg{width:16px;height:16px;display:block}
.component-tree__context-menu{position:fixed;z-index:9999999999;background:#363636;border-radius:6px;min-width:140px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,0.4);font-size:12px}
.component-tree__context-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 12px;background:none;border:none;color:#e0e0e0;cursor:pointer;text-align:left;gap:12px}
.component-tree__context-menu button:hover{background:#4a90d9;color:#fff}
.component-tree__context-menu__label{flex:1}
.component-tree__context-menu__icon{color:#888;display:flex;align-items:center}
.component-tree__context-menu__icon svg{width:14px;height:14px}
.component-tree__context-menu button:hover .component-tree__context-menu__icon{color:rgba(255,255,255,0.7)}
.component-tree__context-menu__separator{height:1px;background:rgba(255,255,255,0.12);margin:4px 0}

.component-tree__root-drop-target {list-style: none;margin: 6px 0 0;min-height: 18px;position: relative;}
.component-tree__root-drop-target::after {content: '';position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);height: 0;border-radius: 4px;background: rgba(var(--primary-rgb, 58, 96, 254), 0.85);box-shadow: 0 0 8px rgba(var(--primary-rgb, 58, 96, 254), 0.45);opacity: 0;transition: all 0.12s ease;pointer-events: none;}
.component-tree__root-drop-target--active::after {height: 6px;opacity: 1;}
.component-tree__header {position: relative;}
li.is-dragging > .component-tree__header {opacity: 0.5;}
.component-tree__header--drop-inside {position: relative;}
.component-tree__header--drop-inside::after {content: '';position: absolute;inset: -4px;border-radius: 7px;border: 2px solid rgba(var(--primary-rgb, 58, 96, 254), 0.85);background: rgba(var(--primary-rgb, 58, 96, 254), 0.1);pointer-events: none;}
.component-tree__header--drop-before::before,.component-tree__header--drop-after::after {content: '';position: absolute;left: -4px;right: -4px;height: 6px;border-radius: 4px;background: rgba(var(--primary-rgb, 58, 96, 254), 0.85);box-shadow: 0 0 8px rgba(var(--primary-rgb, 58, 96, 254), 0.45);}
.component-tree__header--drop-before::before {top: -6px;}
.component-tree__header--drop-after::after {bottom: -6px;}
.component-tree__drop-indicator {height: 0;pointer-events: none;}
.component-tree__drop-indicator--before,.component-tree__drop-indicator--after {margin: 0;}
.component-tree__drop-indicator--inside {margin: 6px 0 0;height: 32px;border-radius: 6px;border: 2px dashed rgba(var(--primary-rgb, 58, 96, 254), 0.6);background: rgba(var(--primary-rgb, 58, 96, 254), 0.08);box-shadow: inset 0 0 10px rgba(var(--primary-rgb, 58, 96, 254), 0.15);}

/* Drag and drop styles */
.component-tree ul li.is-dragging{opacity:0.5}
.component-tree__drag-ghost{background:#fff !important;border:1px solid var(--primary, #3a60fe) !important;box-shadow:0 4px 14px rgba(0,0,0,0.18);border-radius:5px;padding:8px 6px;display:flex;align-items:center;opacity:1 !important;pointer-events:none}
.component-tree__drop-indicator{position:fixed;z-index:10000;pointer-events:none;background:var(--primary);height:3px;border-radius:2px;transition:all 0.1s ease;display:none}
.component-tree__drop-indicator.is-child{background:rgba(var(--primary-rgb),0.1);border:2px solid var(--primary);border-radius:5px;height:auto}

.component-tree__visibility-icon{display:flex;align-items:center;flex-shrink:0;color:#999;margin-left:4px}
.component-tree__visibility-icon svg{display:block}

/* Publisher (saved-component) instances in the tree */
.component-tree__publisher-icon{display:flex;align-items:center;flex-shrink:0;color:var(--tree-accent,var(--primary));margin-left:4px}
.component-tree__publisher-icon svg{display:block}
.component-tree__lock-icon{display:flex;align-items:center;flex-shrink:0;color:#b0b0b0;margin-left:4px}
.component-tree__lock-icon svg{display:block}
/* Descendants of a publisher component are read-only on this page */
.component-tree ul li .component-tree__header--locked{cursor:pointer;opacity:.55}
.component-tree ul li .component-tree__header--locked .component-tree__header-label{color:#888;font-weight:400}
.component-tree ul li .component-tree__header--locked:hover{opacity:.8;background:rgba(0,0,0,0.04)}


/*******************************************************/
/* Page Builder Settings
/*******************************************************/

.settings{font-size:12px}
.settings__heading{font-weight:bold;font-size:1.3em;margin:20px 0 20px 0;display:flex;gap:10px;align-items:center}
.settings__heading .settings__heading-text{flex:1}
.settings__heading .settings__heading-tools{display:flex;align-items:center;gap:3px;align-items:center}

.settings__description{margin:-10px 10px 20px 10px;padding:10px 10px;border:1px solid var(--border);border-radius:5px}

.settings__tabs{display:flex;gap:0px;margin:0 0 10px 0;gap:20px;border-bottom:2px solid var(--border);}
.settings__tabs:empty{display:none;}
.settings__tabs .settings__tab{padding:0 0px 10px 0px;cursor:pointer}
.settings__tabs .settings__tab--active{border-bottom:2px solid var(--primary);color:#000;margin:0 0 -2px 0;padding-bottom:9px}

.settings__sections{}
.settings__sections--hidden{display:none}
.settings__section--hidden{display:none}
.settings__section{border-bottom:1px solid var(--border)}
.settings__section--active{padding-bottom:16px}
.settings__section:not(:last-child){}
.settings__section-heading{font-size:14px;font-weight:600;padding:14px 15px 14px 0px;cursor:pointer;background-position:100% 15px;background-size:18px;background-repeat:no-repeat;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='m10 17l5-5l-5-5v10z'/%3E%3C/svg%3E");}
.settings__section--active .settings__section-heading{color:#000;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m7 10l5 5l5-5z'/%3E%3C/svg%3E");}
.settings__sections .settings__section:only-child .settings__section-heading{background-image:none;}
.settings__fields{display:none}
.settings__section--active > .settings__fields{display:block;}

.settings__fields{}
.settings__fields .field:not(:last-child){}
.settings__fields .settings__fields{margin-bottom:20px}

.theme-tree{margin:0 -15px}
.theme-tree ul{margin:0;padding:0;list-style:none;}
.theme-tree ul li{margin:0;padding:0;}
.theme-tree ul li.type-group{font-size:13px;margin:0 0 15px 0}
.theme-tree ul li.type-group .type-header{text-transform:capitalize;font-weight:bold;margin:0 0 5px 0;background: var(--border-dark);padding:5px 10px;color:#000}
.theme-tree ul li ul.type-styles{cursor:pointer;padding:0 5px}
.theme-tree ul li ul.type-styles li > span{display:block;border-radius:100px;padding:2px 10px;border:1px solid transparent;}
.theme-tree ul li ul.type-styles li > span:hover{border:1px solid var(--border-dark);}
.theme-tree ul li ul.type-styles > li:not(:last-child){border-bottom:1px solid var(--border);padding:5px 0 5px 0;}
.theme-tree ul li ul.type-styles ul{margin:4px 0 7px 10px;}
.theme-tree ul li ul.type-styles ul li{font-size:12px;margin:0;border:none;position:relative;}
.theme-tree ul li ul.type-styles ul li:before{content:'∙';position:absolute;top:2px;left:2px;}
.theme-tree ul li ul.type-styles li.selected {font-weight: bold;color:#000}
.theme-tree ul li ul.type-styles li.selected > span{border-color: var(--background-dark);background:#fff}
.theme-tree ul li ul.type-styles li.selected li{font-weight:normal;color:var(--text)}


/*******************************************************/
/* Media
/*******************************************************/

.media-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}

@media only screen and (max-width: 1124px) {
  .media-grid{grid-template-columns:repeat(4,1fr);}
}

.media-item{background:#fff;box-shadow:0px 0px 4px rgba(0,0,0,0.2);border-radius:4px;cursor:pointer;position:relative}
.media-item--active{outline:2px solid var(--primary);}
.media-item--selected{outline:2px solid var(--danger) !important;}
.media-grid--multiselect .media-item{user-select:none;-webkit-user-drag:none}
.media-grid--multiselect .media-item *{-webkit-user-drag:none}
.media-item:hover{outline:1px solid var(--primary);}
.media-item__checkbox{position:absolute;top:6px;right:6px;z-index:1}
.media-item__checkbox input{width:18px;height:18px;cursor:pointer}
.media-item__preview{font-size:0;aspect-ratio:3/2;background-image: linear-gradient(45deg, #EFEFEF 25%, transparent 25%), linear-gradient(-45deg, #EFEFEF 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EFEFEF 75%), linear-gradient(-45deg, transparent 75%, #EFEFEF 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0px;}
.media-item__preview img{width:100%;height:100%;object-fit:contain;border-radius:4px 4px 0 0}
.media-item__summary{padding:10px 10px;display:flex;gap:5px;flex-direction:column}
.media-item__meta-filename{font-weight:bold;overflow-wrap:anywhere;}
.media-item__meta-extension{}
.media-item__meta-missing-alt{color:red;}

.media-detail{display:flex;gap:20px;}
.media-detail__preview{text-align:center;width:60%;position:relative}
.media-detail__preview img{max-width:100%;}
.media-detail__info{flex:1}
.media-detail__stats{padding:20px;display:grid;grid-template-columns:1fr;gap:20px;background: var(--background-light);border-radius:5px;margin:0 0 20px 0}
.media-detail__stats .media-detail__stat{}
.media-detail__stats .media-detail__stat strong{display:block;}

.files-upload-label{display:block;width:100%;height:50vh;border:2px dashed var(--border);position:relative;text-align:center;display:flex;align-items:center;justify-content:center}

.spinner {width: 100%;height:100%;display: flex;align-items: center;justify-content: center;}
.spinner svg{width:100%;height:100%;max-width:100px;max-height:100px}


/*******************************************************/
/* Dynamic Tags
/*******************************************************/

.dynamic-tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px, 1fr));gap:10px;}
.dynamic-tag{border:1px solid var(--border);border-radius:4px;pointer-events:cursor;text-align:center;cursor:pointer;display:flex;flex-direction:column;}
.dynamic-tag:hover{border:1px solid var(--border-dark)}
.dynamic-tag__tag{background: var(--background-light);font-size:12px;padding:5px 10px;border-bottom:1px solid var(--border);border-radius:4px 4px 0 0;overflow:hidden}
.dynamic-tag__preview{font-weight:bold;background: #fff;padding:10px 10px;border-radius:0 0 4px 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.dynamic-tag__preview p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height:1.2}
.dynamic-tag__preview p:empty{display:none;}
.dynamic-tag__preview *{margin:0;}


[data-tooltip]:before,[data-tooltip]:after {position: absolute;left: 50%;transform: translate(-50%);-webkit-font-smoothing: antialiased;margin: 0 auto;opacity: 0;visibility: hidden;z-index: 9;transition: 0.1s ease-in-out 0.1s;pointer-events:none}
[data-tooltip]:before {content: "";height: 0;width: 0;top: calc(100% + 1px);border-style: solid;border-width: 5px;border-color: transparent transparent var(--background-dark) transparent;}
[data-tooltip]:after {content: attr(data-tooltip);white-space: nowrap;background: var(--background-dark);padding: 0.5rem 1rem 0.5rem 1rem;font-size: 12px;box-sizing: border-box;top: calc(100% + 11px);color: #fff;border-radius: 2px;text-shadow: 0px 1px 1px #000;z-index: 9;}
[data-tooltip]:hover:before,[data-tooltip]:hover:after {opacity: 1;visibility: visible;transition: 0.1s ease-in-out 0.1s;transition-delay: .75s}
[data-tooltip][data-tooltip-right]:before,[data-tooltip][data-tooltip-right]:after{left:auto;right:-10px;transform:none}
[data-tooltip][data-tooltip-right]:before{right:3px;}
[data-tooltip][data-tooltip-left]:before,[data-tooltip][data-tooltip-left]:after{left:-10px;transform:none}
[data-tooltip][data-tooltip-left]:before{left:3px;}

[data-tooltip][data-tooltip-top]:before{top:unset;bottom: calc(100% + 1px)}
[data-tooltip][data-tooltip-top]:after{top:unset;bottom: calc(100% + 11px)}


/*******************************************************/
/* Layouts
/*******************************************************/

.layouts{display:grid;gap:20px;}

.datatable{width:100%;border-collapse:collapse;margin-bottom:1.5em;border:1px solid var(--border)}
.datatable th{padding:10px 10px;text-align:left;font-weight:600}
.datatable td{padding:10px 10px;text-align:left}
.datatable tr th, .datatable tr td{border-bottom:1px solid var(--border)}
.datatable td:first-child{opacity:0.7}
.datatable tbody tr:first-child td{border-top:1px solid var(--border)}
.datatable tr:nth-child(odd) td{background: var(--background-light)}
.datatable--actions tr td:last-child{width:50px;font-size:20px}


/*******************************************************/
/* Bulk Edit Table
/*******************************************************/

.bulk-update-table{width:100%;border-collapse:collapse;margin-bottom:1.5em;border-top:1px solid var(--border)}

.bulk-update-table thead{position:sticky;top:0;background:#fff;z-index:2}

.bulk-update-table th{padding:15px 15px;text-align:left;border:1px solid var(--border);height:70px}
.bulk-update-table td{padding:10px 15px;border:1px solid var(--border);vertical-align:top}
.bulk-update-table tbody tr:first-child td{}
.bulk-update-table tr{border-left:1px solid #fff}
.bulk-update-table tr:nth-child(odd) td{background: var(--background-light)}
.bulk-update-table.bulk-update-table--filter-enabled tr td:not(.bulk-update-table--checkbox){pointer-events:none;}
.bulk-update-table.bulk-update-table--filter-enabled tr:not(.selected) td:not(.bulk-update-table--checkbox){opacity:.3;}
.bulk-update-table input{margin:0;padding:0;}

.bulk-update-table--editing-field{}
.bulk-update-table--editing-field{pointer-events:none}
.bulk-update-table--editing-field td{}
.bulk-update-table--editing-field td.editable-cell--current{}


.bulk-update-table--checkbox{width:50px;text-align:center !important}
.bulk-update-table--title{min-width:250px}
.bulk-update-table--title > .bulk-update-table--title-div{position:relative;font-weight:bold}
.bulk-update-table--meta-title{min-width:250px}
.bulk-update-table--meta-description{min-width:300px}
.bulk-update-table--nofollow{width:130px;text-align:center !important;vertical-align:middle !important}
.bulk-update-table--noindex{width:130px;text-align:center !important;vertical-align:middle !important}
.bulk-update-table--status{width:120px;;vertical-align:middle !important}
.bulk-update-table--action{width:60px;text-align:center !important;vertical-align:middle !important}


tr[data-level="0"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:0px;}
tr[data-level="0"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "";position:absolute;left:0px;top:0px}

tr[data-level="1"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:20px;}
tr[data-level="1"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "— ";position:absolute;left:0px;top:0px}

tr[data-level="2"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:40px;}
tr[data-level="2"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "—— ";position:absolute;left:0px;top:0px}

tr[data-level="3"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:60px;}
tr[data-level="3"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "——— ";position:absolute;left:0px;top:0px}


.editable{position:relative;}
.editable--focused{pointer-events:initial}

.editable-actions{pointer-events:none;margin:0 0 5px 0;position:absolute;top:0;right:0}
.editable-actions button{opacity:0}
.editable--focused button{opacity:1;}

.editable--focused .editable-actions{pointer-events:initial}

.textarea{border: none;outline: none;margin:0;padding:0 65px 0 0px;min-width:100%;background:none;font-family:inherit;font-weight:inherit}
.editable:hover:not(.editable--focused) .textarea{outline: 1px dotted var(--primary);outline-offset:3px}
.editable--focused .textarea{outline: 1px solid var(--primary);outline-offset:3px}

.lettercount{background:#fff;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;padding:4px 6px;line-height:1;font-weight:bold;border:1px solid var(--border)}
.lettercount--hidden{opacity:0;}
.lettercount--green{background:#4caf50;color:#fff}
.lettercount--red{background:#f44336;color:#fff}



/*******************************************************/
/* Auth
/*******************************************************/

.auth{max-width:450px;margin:0 auto 50px auto;border-radius:4px;background:#fff;padding:40px 40px 40px 40px;}

.auth .or{display:flex;align-items:center;gap:10px;margin:10px 0}
.auth .or span{border-top:1px solid var(--border);flex:1}

.auth__logo{margin:0 0 20px 0;text-align:center}
.auth__logo:only-child{margin:0;}
.auth__logo img{width:200px;}

.auth__title{margin:0 0 20px 0;text-align:center}
.auth__title h1{font-size:30px;margin:0 0 10px 0}
.auth__title > *:last-child{margin-bottom:0;}

.auth__footer{margin:20px 0 0 0}
.auth__footer > *:last-child{margin-bottom:0;}

.auth-role-admin .username{cursor:pointer;text-decoration:underline;text-decoration-color: var(--border-dark);}
.auth-role-admin .username:hover{}