@charset "UTF-8";
/* Reset & Base Styles */
* {
  box-sizing: border-box;
  overscroll-behavior: none;
  transition: all 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 1.6em;
}

h2 {
  font-size: 1.4em;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.9em;
}

h6 {
  font-size: 0.8em;
}

body {
  --primary-accent: 0, 120, 289;
  --primary-accent-darker: 0, 100, 250;
  --secondary-accent: 139, 198, 61;
  --foreground-color: 62, 72, 92;
  --background-color: 255, 255, 255;
  --border-color: 220, 230, 240;
  --status-color-warning: 243, 155, 13;
  --status-color-danger: 173, 16, 53;
  --status-color-success: 0, 130, 90;
  --status-color-info: 30, 80, 170;
  --rounded-corners: 0;
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 0 0 2px #fff;
  --box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 0 0 2px #fff;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 1em;
  line-height: 1.2em;
  font-weight: 400;
  --decoration-font: "DM Serif Text", serif;
  --technical-font: "Anonymous Pro", "Roboto Mono", monospace;
  background-color: rgb(var(--background-color));
  color: rgb(var(--foreground-color));
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* Main content container adjustments */
body > .container {
  display: flex;
  flex-direction: row;
  height: calc(100% - 64px);
  width: 100%;
  position: relative;
  /* Main content in the middle */
  /* Detail pane on the right */
}
body > .container main {
  flex: 1;
  overflow-y: scroll;
}
body > .container aside.detail-pane {
  margin: 0;
  padding: 0;
  width: 0; /* Default width when closed */
  flex-shrink: 0; /* Prevent shrinking */
  overflow-y: auto;
  border-left: 1px solid rgb(var(--border-color));
}
body > .container aside.detail-pane.opened {
  width: 640px; /* Width when opened */
}
body > .container aside.detail-pane .detail-pane-info {
  margin: 0 32px;
  padding: 2px 0;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  font-family: var(--technical-font);
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
}
body > .container aside.detail-pane .detail-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  height: 60px;
}
body > .container aside.detail-pane .detail-header .detail-header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  /* Approval Icon Styles */
}
body > .container aside.detail-pane .detail-header .detail-header-actions svg.approval-icon.filled path,
body > .container aside.detail-pane .detail-header .detail-header-actions svg.rate-icon.filled path {
  fill: gold;
  stroke: none;
}
body > .container aside.detail-pane .detail-header .detail-header-ux {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
body > .container aside.detail-pane .detail-header-tools {
  position: relative;
  height: 0;
  width: 0;
  margin: -16px 0 0 32px;
  padding: 0;
}
body > .container aside.detail-pane .detail-container {
  margin: 0;
  width: 100%;
}
body > .container aside.detail-pane .detail-container .detail-response {
  margin: 0;
}
body > .container aside.detail-pane .detail-container .detail-response .loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  padding-top: 32px;
  color: rgba(var(--foreground-color), 0.6);
}
body > .container .sub-link {
  margin: 0 24px;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
body > .container .sub-link .current-page {
  margin: 0;
  padding: 0 0 3px;
  font-size: 0.8em;
  color: rgb(var(--foreground-color));
  font-family: var(--technical-font);
  cursor: default;
}
body > .container .sub-link .current-page span {
  padding: 2px 0;
  margin: 0;
  display: inline-block;
  border-bottom: 1px dotted rgba(var(--foreground-color), 0.6);
}
body > .container .sub-link ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 0 8px;
  margin: 0;
}
body > .container .sub-link ul li {
  font-size: 0.8em;
  padding: 0;
}
body > .container .sub-link ul li a {
  display: inline-block;
  padding: 2px 0;
  margin: 0;
  color: rgba(var(--foreground-color), 0.8);
  text-decoration: none;
  font-family: var(--technical-font);
}
body > .container .sub-link ul li a:hover {
  color: rgb(var(--primary-accent));
}
body > .container .sub-link ul li a.active {
  color: rgb(var(--primary-accent));
  border-bottom: 1px dotted rgba(var(--primary-accent), 0.6);
}

/* = = = = = = = = GLOW EFFECTS = = = = = = = = */
/* Glow Effects for Status Changes */
.glow-success {
  transition: all 0.1s ease-out !important;
  box-shadow: 0 0 2px rgba(var(--status-color-success), 0.2), 0 0 4px rgba(var(--status-color-success), 0.2), 0 0 8px rgba(var(--status-color-success), 0.1), 0 0 16px rgba(var(--status-color-success), 0.1), 0 0 32px rgba(var(--status-color-success), 0.2);
}

.glow-rating {
  transition: all 0.1s ease-out !important;
  box-shadow: 0 0 2px rgba(255, 215, 0, 0.2), 0 0 4px rgba(255, 215, 0, 0.2), 0 0 8px rgba(255, 215, 0, 0.2), 0 0 16px rgba(255, 215, 0, 0.2), 0 0 32px rgba(255, 215, 0, 0.2);
}

.glow-collection {
  transition: all 0.1s ease-out !important;
  box-shadow: 0 0 2px rgba(var(--primary-accent), 0.2), 0 0 4px rgba(var(--primary-accent), 0.2), 0 0 8px rgba(var(--primary-accent), 0.1), 0 0 16px rgba(var(--primary-accent), 0.1), 0 0 32px rgba(var(--primary-accent), 0.2);
}

.glow-error {
  transition: all 0.1s ease-out !important;
  box-shadow: 0 0 2px rgba(var(--status-color-danger), 0.2), 0 0 4px rgba(var(--status-color-danger), 0.2), 0 0 8px rgba(var(--status-color-danger), 0.1), 0 0 16px rgba(var(--status-color-danger), 0.1), 0 0 32px rgba(var(--status-color-danger), 0.2);
}

body.create-page .container main {
  position: relative;
}
body.create-page .container main .header {
  flex-shrink: 0;
  margin: 0;
  padding: 0 24px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgb(var(--border-color));
}
body.create-page .container main .header .header-title {
  flex-shrink: 1;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: flex-start;
  padding-right: 24px;
  margin-right: 24px;
}
body.create-page .container main .header .header-title h1 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
}
body.create-page .container main .header .header-actions {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
body.create-page .container main .header .header-actions p {
  font-size: 0.6em;
  color: rgba(var(--foreground-color), 0.6);
  width: 300px;
  line-height: 1.1em;
  text-align: right;
  margin-right: 8px;
}
body.create-page .container main .header .header-on-error {
  color: rgb(var(--status-color-warning));
  padding: 10px;
  border-radius: var(--rounded-corners);
  margin-bottom: 20px;
  width: 240px;
}
body.create-page .container main .input-container {
  margin: 32px 24px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
}
body.create-page .container main .input-container form {
  display: flex;
  flex-direction: column;
}
body.create-page .container main .input-container form .form-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 24px;
  flex: 1;
  border-bottom: 1px solid rgba(var(--border-color), 0.6);
}
body.create-page .container main .input-container form .form-item.no-space-between {
  justify-content: flex-start;
}
body.create-page .container main .input-container form .form-item label {
  display: inline-block;
  margin: 12px 10px 0 0;
  width: 120px;
  flex-shrink: 0;
  font-size: 0.9em;
  font-weight: 600;
}
body.create-page .container main .input-container form .form-item .form-input-container {
  display: flex;
  flex-grow: 1;
}
body.create-page .container main .input-container form .form-item .form-input-container.column-layout {
  flex-direction: column;
  flex-grow: unset;
  align-items: flex-start;
}
body.create-page .container main .input-container form .form-item .form-input-container input[type=text], body.create-page .container main .input-container form .form-item .form-input-container input[type=number], body.create-page .container main .input-container form .form-item .form-input-container textarea {
  padding: 12px 8px;
  border: 1px solid rgba(var(--primary-accent), 0.6);
  border-radius: var(--rounded-corners);
  width: 360px;
  font-size: 0.9em;
  font-family: var(--technical-font);
}
body.create-page .container main .input-container form .form-item .form-input-container textarea {
  resize: vertical;
  min-height: 80px;
}
body.create-page .container main .input-container form .form-item .form-input-container input.disabled {
  border: 1px solid rgba(var(--border-color), 0.6);
}
body.create-page .container main .input-container form .form-item .form-input-container .error-message {
  color: rgb(var(--status-color-warning));
  font-size: 0.85em;
  margin-top: 4px;
  display: none;
}
body.create-page .container main .input-container form .form-item .form-input-container.error input {
  border-color: rgb(var(--status-color-warning));
}
body.create-page .container main .input-container form .form-item .form-input-container.error .error-message {
  display: block;
}
body.create-page .container main .input-container form .form-item .form-input-container .over-limit-message {
  width: 360px;
  padding: 20px 24px;
  font-size: 0.8em;
  background: linear-gradient(90deg, rgb(var(--status-color-warning)) 0%, rgb(var(--status-color-danger)) 100%);
  color: rgba(var(--background-color), 0.8);
  border: none;
  border-radius: var(--rounded-corners);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: var(--box-shadow);
  cursor: not-allowed;
}
body.create-page .container main .input-container form .form-item .htmx-indicator {
  display: none;
}
body.create-page .container main .input-container form .form-item .htmx-request.htmx-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.create-page .container main .input-container form .form-item .form-item-description {
  margin: 0 0 0 16px;
  padding: 0;
  flex-grow: 1;
}
body.create-page .container main .input-container form .form-item .form-item-description .description {
  display: inline-block;
  width: 360px;
  font-size: 0.7em;
  line-height: 1.1em;
  font-weight: 400;
  color: rgba(var(--foreground-color), 0.6);
  margin-top: 14px;
}
body.create-page .container main .input-container form .form-item .form-action .prompt-magic-button {
  background: linear-gradient(135deg, rgba(var(--primary-accent), 0.8), rgba(var(--secondary-accent), 0.8));
  border: none;
  border-radius: var(--rounded-corners);
  height: 100%;
  width: 40px;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow);
}
body.create-page .container main .input-container form .form-item .form-action .prompt-magic-button:hover {
  box-shadow: var(--box-shadow-hover);
}
body.create-page .container main .input-container form .form-item .form-action .prompt-magic-button:hover svg {
  transform: rotate(-90deg);
}
body.create-page .container main .input-container form .form-item .form-action .prompt-magic-button.disabled {
  background: rgba(var(--primary-accent), 0.4);
  box-shadow: none;
  cursor: not-allowed;
}
body.create-page .container main .input-container form .form-item .form-action .prompt-magic-button.disabled svg {
  opacity: 0.5;
}
body.create-page .container main .output-container {
  margin: 8px 24px 60px 24px;
  background-color: rgba(var(--secondary-accent), 0.1);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.18);
  border: 1px solid rgb(var(--border-color));
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.create-page .container main .output-container .ai-error {
  padding: 32px;
  color: rgb(var(--status-color-danger));
  background-color: rgba(var(--status-color-danger), 0.1);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.18);
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.outline-saving label {
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.outline-saving input[type=text] {
  width: 100%;
  padding: 12px 8px;
  border: 1px solid rgba(var(--primary-accent), 0.6);
  border-radius: var(--rounded-corners);
  font-size: 0.9em;
  font-family: var(--technical-font);
}
.outline-saving button[type=submit] {
  margin: 18px 0;
  background-color: rgb(var(--secondary-accent));
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: rgb(var(--background-color));
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border-radius: var(--rounded-corners);
  padding: 18px;
  border: none;
}
.outline-saving button[type=submit] svg {
  margin-right: 8px;
}
.outline-saving button[type=submit]:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.outline-saving button[type=submit]:hover svg {
  transform: translateY(2px);
}
.outline-saving .saving-in-progress {
  display: inline-block;
  margin: 24px auto;
  font-size: 1.2em;
  font-style: italic;
  color: rgba(var(--foreground-color), 0.4);
  font-family: var(--technical-font);
}

.outline-preview {
  background: white;
  margin: 24px 0;
  width: 800px;
  padding: 12px;
  font-size: 0.8em;
  height: 320px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
}

.mcq-subject-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.mcq-subject-item input {
  flex: 1;
}

.add-subject-button {
  padding: 0.5em 1em;
  background: rgba(var(--status-color-info), 0.8);
  color: white;
  border: none;
  border-radius: var(--rounded-corners);
  cursor: pointer;
}
.add-subject-button:hover {
  background: rgb(var(--status-color-info));
}

.remove-subject-button {
  padding: 0;
  background: rgba(var(--status-color-warning), 0.8);
  color: white;
  border: none;
  border-radius: var(--rounded-corners);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remove-subject-button:hover {
  background: rgb(var(--status-color-warning));
}

/* Styles for the vignettes page */
body.list-page .container {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  /* When main is collapsed, make detail pane fill available space */
}
body.list-page .container main {
  position: relative;
  transition: all 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
body.list-page .container main.collapsed {
  flex: 0 0 6px; /* Same width as sidebar, don't grow or shrink */
  overflow: hidden;
  /* Hide all elements inside main when collapsed except the toggle button */
}
body.list-page .container main.collapsed .list-container {
  opacity: 0;
  visibility: hidden;
}
body.list-page .container main .list-container {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 24px); /* 24px for padding */
}
body.list-page .container main .list-container .header {
  flex-shrink: 0;
  margin: 0;
  padding: 0 24px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgb(var(--border-color));
}
body.list-page .container main .list-container .header .header-title {
  flex-shrink: 1;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: flex-start;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px dashed rgb(var(--border-color));
}
body.list-page .container main .list-container .header .header-title h1 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
}
body.list-page .container main .list-container .header .header-actions {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
body.list-page .container main .list-container .header .header-actions .header-buttons {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
}
body.list-page .container main .list-container .header .header-actions .header-tools {
  position: relative;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}
body.list-page .container main .list-container .header .header-on-error {
  color: rgb(var(--status-color-warning));
  padding: 10px;
  border-radius: var(--rounded-corners);
  margin-bottom: 20px;
  width: 240px;
}
body.list-page .container main .list-container .list {
  display: flex;
  flex-direction: column;
  margin: 32px 24px;
}
body.list-page .container main .list-container .list .card {
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  margin-bottom: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
body.list-page .container main .list-container .list .card:hover {
  background-color: rgb(var(--primary-accent), 0.08);
}
body.list-page .container main .list-container .list .card.selected {
  background-color: rgba(var(--primary-accent), 0.1);
  border: 1px dashed rgba(var(--primary-accent), 0.8);
}
body.list-page .container main .list-container .list .card .card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  gap: 16px;
  padding: 6px;
  width: 100%;
  font-size: 0.8em;
  background-color: rgb(var(--border-color), 0.6);
  border-top-right-radius: var(--rounded-corners);
  border-top-left-radius: var(--rounded-corners);
}
body.list-page .container main .list-container .list .card .card-header .number {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
body.list-page .container main .list-container .list .card .card-header .number .index {
  font-weight: 500;
  margin-right: 8px;
}
body.list-page .container main .list-container .list .card .card-header .number .id {
  margin-left: 8px;
  display: inline-block;
  width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
body.list-page .container main .list-container .list .card .card-header .info {
  width: 100%;
  border-left: 1px solid rgb(var(--border-color));
  padding-left: 8px;
  margin-left: 8px;
  color: rgba(var(--foreground-color), 0.6);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
body.list-page .container main .list-container .list .card .card-header .info span {
  margin-right: 2px;
}
body.list-page .container main .list-container .list .card .card-header .info span.prompt,
body.list-page .container main .list-container .list .card .card-header .info span.title {
  margin-right: 8px;
}
body.list-page .container main .list-container .list .card .card-header .status {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
}
body.list-page .container main .list-container .list .card .card-body {
  padding: 6px;
  font-size: 0.8em;
}
body.list-page .container main .list-container .list .card .card-body strong {
  color: rgb(var(--status-color-info));
  cursor: pointer;
}
body.list-page .container main.collapsed + aside.detail-pane.opened {
  flex: 1; /* Grow to fill available space */
}

.tool-container {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.tool-container.opened {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}
.tool-container.rate-popup {
  margin-left: 104px;
}
.tool-container.export-popup {
  margin-left: 171px;
}

/* Styles for the dashboard page */
body.dashboard-page .container {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
body.dashboard-page .container main {
  position: relative;
  flex: 1;
}
body.dashboard-page .container main .header {
  flex-shrink: 0;
  margin: 24px 0 0 0;
  padding: 0 24px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgb(var(--border-color));
}
body.dashboard-page .container main .header .header-title {
  flex-shrink: 1;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: flex-start;
  padding-right: 24px;
  margin-right: 24px;
}
body.dashboard-page .container main .header .header-title h1 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
}
body.dashboard-page .container main .content {
  margin: 0;
  padding: 32px 24px;
}
body.dashboard-page .container main .content h2 {
  font-weight: 800;
  font-size: 1.2em;
  margin: 0;
  color: rgba(var(--foreground-color), 0.8);
}
body.dashboard-page .container main .content p.dashboard-subtitle {
  font-size: 0.8em;
  margin-bottom: 8px 0;
  color: rgba(var(--foreground-color), 0.8);
}
body.dashboard-page .container main .content .dashboard-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px dashed rgb(var(--border-color));
  padding: 18px 0 24px 0;
}

/* Styles for the settings page */
body.settings-page .container {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
}
body.settings-page .container main {
  position: relative;
  flex: 1;
}
body.settings-page .container main .content {
  margin: 0;
  padding: 0 24px;
}
body.settings-page .container main .content h1 {
  font-family: var(--decoration-font);
  margin: 18px 0 24px 0;
}
body.settings-page .container main .content h2 {
  font-size: 1.2em;
  color: rgb(var(--primary-accent));
  margin: 1em 0 0;
}
body.settings-page .container main .content p {
  font-size: 0.7em;
  font-style: italic;
  color: rgba(var(--foreground-color), 0.8);
  margin: 0.2em 0;
}
body.settings-page .container main .content .settings-container {
  margin: 16px 0 64px 0;
}
body.settings-page .container main .content .settings-container .settings-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--technical-font);
  font-size: 1.2em;
  color: rgba(var(--foreground-color), 0.6);
}
body.settings-page .container main .content .settings-container .setting-item {
  border-bottom: 1px dashed rgb(var(--border-color));
  display: flex;
  flex-direction: row;
  padding: 8px 0;
  align-items: center;
  justify-content: space-between;
}
body.settings-page .container main .content .settings-container .setting-item .item-container {
  display: flex;
  flex-direction: row;
  width: 640px;
  justify-content: space-between;
  align-items: center;
}
body.settings-page .container main .content .settings-container .setting-item .item-container .item-input {
  flex-shrink: 0;
  display: flex;
}
body.settings-page .container main .content .settings-container .setting-item .item-container .item-description .description {
  display: inline-block;
  font-size: 0.7em;
  line-height: 1.1em;
  font-weight: 400;
  color: rgba(var(--foreground-color), 0.6);
  margin-left: 32px;
}

input[type=checkbox] {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  width: 140px;
  height: 42px;
  padding: 8px 16px;
  border-radius: var(--rounded-corners);
  border: 1px solid rgb(var(--border-color));
  cursor: pointer;
}
.custom-checkbox .checkbox-text {
  flex-grow: 1;
  font-size: 0.8em;
  font-weight: 600;
}
.custom-checkbox .checkbox-ball-container {
  width: 60px;
  height: 24px;
  position: relative;
  border-radius: 12px;
  background-color: rgba(var(--border-color), 0.6);
  border: 2px solid #afafaf;
}
.custom-checkbox .checkbox-ball-container.checked {
  background-color: rgb(var(--primary-accent));
}
.custom-checkbox .checkbox-ball-container .checkbox-ball {
  position: absolute;
  top: 1px;
  left: 1px;
  background-color: black;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.custom-checkbox .checkbox-ball-container.checked .checkbox-ball {
  transform: translateX(36px);
}
.custom-checkbox:hover {
  background-color: rgba(var(--primary-accent), 0.1);
}
.custom-checkbox.disabled {
  background-color: rgba(200, 200, 200, 0.2);
  cursor: not-allowed;
  pointer-events: none;
}
.custom-checkbox.disabled .checkbox-text {
  color: rgba(var(--foreground-color), 0.4);
}
.custom-checkbox.disabled .checkbox-ball-container {
  background-color: rgba(var(--border-color), 0.4);
  border: 2px solid rgba(var(--border-color), 0.6);
}
.custom-checkbox.disabled .checkbox-ball-container .checkbox-ball {
  background-color: rgba(var(--foreground-color), 0.3);
}
.custom-checkbox.updating {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}
.custom-checkbox.updating .checkbox-ball-container .checkbox-ball {
  animation: pulse 1s infinite;
}

.settings-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2px 0;
  font-size: 0.7em;
  font-weight: 500;
  text-align: center;
}
.settings-message.success {
  background-color: rgba(var(--status-color-success), 0.1);
  color: rgb(var(--status-color-success));
}
.settings-message.error {
  background-color: rgba(var(--status-color-danger), 0.1);
  color: rgb(var(--status-color-danger));
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.status-indicator {
  padding: 4px 16px;
  border-radius: 16px;
  text-transform: uppercase;
  display: inline-block;
  width: 80px;
  text-align: center;
}
.status-indicator span {
  font-family: var(--technical-font);
  font-size: 0.7em;
  font-weight: 600;
}
.status-indicator.healthy, .status-indicator.operational {
  background-color: rgb(var(--status-color-success));
  color: rgb(var(--background-color));
}
.status-indicator.degraded {
  background-color: rgb(var(--status-color-warning));
  color: rgb(var(--background-color));
}
.status-indicator.down {
  background-color: rgb(var(--status-color-danger));
  color: rgb(var(--background-color));
}
.status-indicator.unknown {
  background-color: rgba(var(--border-color), 0.5);
  color: rgba(var(--background-color), 0.5);
}

.status-description {
  font-family: var(--technical-font);
  font-size: 0.7em;
  color: rgba(var(--foreground-color), 0.6);
  margin-left: 8px;
  display: inline-block;
  min-width: 400px;
}
.status-description span {
  display: block;
  line-height: 1.2em;
}

.status-actions {
  border-left: 1px solid rgb(var(--border-color));
  padding-left: 8px;
  margin-left: 8px;
}

body.upload-document-page .container main {
  position: relative;
}
body.upload-document-page .container main .header {
  flex-shrink: 0;
  margin: 0;
  padding: 0 24px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgb(var(--border-color));
}
body.upload-document-page .container main .header .header-title {
  flex-shrink: 1;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: flex-start;
  padding-right: 24px;
  margin-right: 24px;
}
body.upload-document-page .container main .header .header-title h1 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
}
body.upload-document-page .container main .header .header-actions {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
body.upload-document-page .container main .header .header-actions p {
  font-size: 0.6em;
  color: rgba(var(--foreground-color), 0.6);
  width: 300px;
  line-height: 1.1em;
  text-align: right;
  margin-right: 8px;
}
body.upload-document-page .container main .content {
  margin: 32px 24px 48px 24px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
}
body.upload-document-page .container main .content .info {
  margin: 24px;
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
}
body.upload-document-page .container main .content .info ul {
  padding-left: 24px;
  margin: 0;
}
body.upload-document-page .container main .content .info ul li {
  margin: 0;
}
body.upload-document-page .container main .content form {
  border-radius: var(--rounded-corners);
  display: flex;
  flex-direction: column;
}
body.upload-document-page .container main .content form .drop-zone {
  border: 2px dashed rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  padding: 24px 16px;
  margin: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: rgba(var(--foreground-color), 0.05);
  margin-bottom: 24px;
  color: rgb(var(--foreground-color));
}
body.upload-document-page .container main .content form .drop-zone:hover {
  border-color: rgba(var(--primary-accent), 0.8);
  background-color: rgba(var(--primary-accent), 0.1);
}
body.upload-document-page .container main .content form .drop-zone.drag-over {
  border-color: rgb(var(--primary-accent));
  background-color: rgba(var(--primary-accent), 0.15);
  border-style: solid;
}
body.upload-document-page .container main .content form .drop-zone .drop-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
body.upload-document-page .container main .content form .drop-zone .drop-zone-content svg {
  color: rgb(var(--foreground-color));
  width: 48px;
  height: 48px;
}
body.upload-document-page .container main .content form .drop-zone .drop-zone-content p {
  font-size: 0.9em;
  color: rgba(var(--foreground-color), 0.7);
  margin: 0;
}
body.upload-document-page .container main .content form .drop-zone .drop-zone-content .file-limit {
  font-size: 0.75em;
  color: rgba(var(--foreground-color), 0.5);
  font-family: var(--technical-font);
}
body.upload-document-page .container main .content form .file-info {
  border: 1px solid rgba(var(--primary-accent), 0.4);
  border-radius: var(--rounded-corners);
  padding: 16px;
  margin-bottom: 24px;
  background-color: rgba(var(--primary-accent), 0.05);
}
body.upload-document-page .container main .content form .file-info .file-info-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.upload-document-page .container main .content form .file-info .file-info-content svg {
  color: rgb(var(--primary-accent));
  flex-shrink: 0;
}
body.upload-document-page .container main .content form .file-info .file-info-content .file-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.upload-document-page .container main .content form .file-info .file-info-content .file-details .file-name {
  font-weight: 600;
  font-size: 0.9em;
  color: rgb(var(--foreground-color));
  font-family: var(--technical-font);
}
body.upload-document-page .container main .content form .file-info .file-info-content .file-details .file-size {
  font-size: 0.75em;
  color: rgba(var(--foreground-color), 0.6);
  font-family: var(--technical-font);
}
body.upload-document-page .container main .content form .file-info .file-info-content .file-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: rgb(var(--status-color-danger));
  transition: all 0.2s;
  border-radius: var(--rounded-corners);
}
body.upload-document-page .container main .content form .file-info .file-info-content .file-remove:hover {
  background-color: rgba(var(--status-color-danger), 0.1);
  transform: scale(1.1);
}
body.upload-document-page .container main .content form .file-info .file-info-content .file-remove svg {
  width: 20px;
  height: 20px;
}
body.upload-document-page .container main .content form .form-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 24px;
  flex: 1;
  border-bottom: 1px solid rgba(var(--border-color), 0.6);
}
body.upload-document-page .container main .content form .form-item.no-space-between {
  justify-content: flex-start;
}
body.upload-document-page .container main .content form .form-item label {
  display: inline-block;
  margin: 12px 10px 0 0;
  width: 120px;
  flex-shrink: 0;
  font-size: 0.9em;
  font-weight: 600;
}
body.upload-document-page .container main .content form .form-item .form-input-container {
  display: flex;
  flex-grow: 1;
}
body.upload-document-page .container main .content form .form-item .form-input-container.column-layout {
  flex-direction: column;
  flex-grow: unset;
  align-items: flex-start;
}
body.upload-document-page .container main .content form .form-item .form-input-container input[type=text],
body.upload-document-page .container main .content form .form-item .form-input-container textarea,
body.upload-document-page .container main .content form .form-item .form-input-container select {
  padding: 12px 8px;
  border: 1px solid rgba(var(--primary-accent), 0.6);
  border-radius: var(--rounded-corners);
  width: 360px;
  font-size: 0.9em;
  font-family: var(--technical-font);
  transition: border-color 0.2s;
}
body.upload-document-page .container main .content form .form-item .form-input-container input[type=text]:focus,
body.upload-document-page .container main .content form .form-item .form-input-container textarea:focus,
body.upload-document-page .container main .content form .form-item .form-input-container select:focus {
  outline: none;
  border-color: rgb(var(--primary-accent));
}
body.upload-document-page .container main .content form .form-item .form-input-container input[type=text]::placeholder,
body.upload-document-page .container main .content form .form-item .form-input-container textarea::placeholder,
body.upload-document-page .container main .content form .form-item .form-input-container select::placeholder {
  color: rgba(var(--foreground-color), 0.4);
}
body.upload-document-page .container main .content form .form-item .form-input-container textarea {
  resize: vertical;
  min-height: 80px;
}
body.upload-document-page .container main .content form .form-item .form-input-container select {
  cursor: pointer;
}
body.upload-document-page .container main .content form .upload-btn {
  width: 360px;
  padding: 18px;
  background-color: rgb(var(--secondary-accent));
  color: rgb(var(--background-color));
  border: none;
  border-radius: var(--rounded-corners);
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.2s;
  box-shadow: var(--box-shadow);
}
body.upload-document-page .container main .content form .upload-btn:hover:not(:disabled) {
  box-shadow: var(--box-shadow-hover);
}
body.upload-document-page .container main .content form .upload-btn:disabled {
  background-color: rgba(var(--foreground-color), 0.3);
  color: rgba(var(--background-color), 0.6);
  cursor: not-allowed;
  box-shadow: none;
}
body.upload-document-page .container main .content .upload-indicator {
  margin: 24px;
  padding: 20px;
  background-color: rgba(var(--primary-accent), 0.1);
  border-radius: var(--rounded-corners);
  border: 1px solid rgba(var(--primary-accent), 0.3);
}
body.upload-document-page .container main .content .upload-indicator .progress-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.upload-document-page .container main .content .upload-indicator .progress-container .progress-bar {
  width: 100%;
  height: 8px;
  background-color: rgba(var(--border-color), 0.3);
  border-radius: var(--rounded-corners);
  overflow: hidden;
}
body.upload-document-page .container main .content .upload-indicator .progress-container .progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(var(--primary-accent)), rgb(var(--secondary-accent)));
  animation: progress-animation 2s ease-in-out infinite;
}
body.upload-document-page .container main .content .upload-indicator .progress-container .progress-text {
  font-size: 0.85em;
  color: rgba(var(--foreground-color), 0.7);
  text-align: center;
  font-family: var(--technical-font);
  font-style: italic;
}
body.upload-document-page .container main .content .upload-result {
  margin: 24px;
  padding: 20px;
  border-radius: var(--rounded-corners);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
body.upload-document-page .container main .content .upload-result svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
body.upload-document-page .container main .content .upload-result.success {
  background-color: rgba(var(--status-color-success), 0.15);
  border: 1px solid rgba(var(--status-color-success), 0.4);
}
body.upload-document-page .container main .content .upload-result.success svg {
  stroke: rgb(var(--status-color-success));
}
body.upload-document-page .container main .content .upload-result.success strong {
  color: rgb(var(--status-color-success));
  display: block;
  margin-bottom: 8px;
}
body.upload-document-page .container main .content .upload-result.success p {
  margin: 0;
  font-size: 0.85em;
  color: rgba(var(--foreground-color), 0.8);
  line-height: 1.5em;
}
body.upload-document-page .container main .content .upload-result.success p span {
  display: inline-block;
  margin-right: 16px;
}
body.upload-document-page .container main .content .upload-result.success p strong {
  display: inline;
  color: rgb(var(--foreground-color));
  font-family: var(--technical-font);
}
body.upload-document-page .container main .content .upload-result.success p small {
  display: block;
  margin-top: 12px;
  color: rgba(var(--foreground-color), 0.6);
  font-style: italic;
}
body.upload-document-page .container main .content .upload-result.error {
  background-color: rgba(var(--status-color-danger), 0.15);
  border: 1px solid rgba(var(--status-color-danger), 0.4);
}
body.upload-document-page .container main .content .upload-result.error svg {
  stroke: rgb(var(--status-color-danger));
}
body.upload-document-page .container main .content .upload-result.error strong {
  color: rgb(var(--status-color-danger));
  display: block;
  margin-bottom: 8px;
}
body.upload-document-page .container main .content .upload-result.error p {
  margin: 0;
  font-size: 0.85em;
  color: rgba(var(--foreground-color), 0.8);
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
[x-cloak] {
  display: none !important;
}

/* Styles for the collections page */
body.collections-page .container {
  /* When main is collapsed, make detail pane fill available space */
}
body.collections-page .container main {
  position: relative;
}
body.collections-page .container main.collapsed {
  flex: 0 0 6px; /* Same width as sidebar, don't grow or shrink */
  overflow: hidden;
  /* Hide all elements inside main when collapsed except the toggle button */
}
body.collections-page .container main.collapsed .list-container {
  opacity: 0;
  visibility: hidden;
}
body.collections-page .container main .header {
  flex-shrink: 0;
  margin: 0;
  padding: 0 24px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgb(var(--border-color));
}
body.collections-page .container main .header .header-title {
  flex-shrink: 1;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: flex-start;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px dashed rgb(var(--border-color));
}
body.collections-page .container main .header .header-title.mcq-header-title {
  border-right: none !important;
}
body.collections-page .container main .header .header-title h1 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
}
body.collections-page .container main .header .header-actions {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
body.collections-page .container main .header .header-actions .header-buttons {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
body.collections-page .container main .header .header-actions .header-buttons .header-buttons-text {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
  margin-right: 8px;
}
body.collections-page .container main .header .header-actions .header-buttons .collection-name,
body.collections-page .container main .header .header-actions .header-buttons .collection-desc {
  height: 32px;
  padding: 0 8px;
  background-color: rgb(var(--background-color));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  font-family: var(--technical-font);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7em;
  color: rgb(var(--foreground-color));
  outline: none;
}
body.collections-page .container main .header .header-actions .header-buttons .collection-name:focus,
body.collections-page .container main .header .header-actions .header-buttons .collection-desc:focus {
  border-color: rgb(var(--secondary-accent));
}
body.collections-page .container main .header .header-actions .header-buttons .collection-name {
  width: 120px;
}
body.collections-page .container main .header .header-actions .header-buttons .collection-desc {
  width: 240px;
}
body.collections-page .container main .header .header-on-error {
  color: rgb(var(--status-color-danger));
  min-width: 120px;
  display: flex;
  justify-content: end;
  font-family: var(--technical-font);
  font-size: 0.6em;
}
body.collections-page .container main .content {
  display: flex;
  flex-direction: column;
  margin: 32px 24px;
}
body.collections-page .container main.collapsed + aside.detail-pane.opened {
  flex: 1; /* Grow to fill available space */
}

.previewsheet-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.previewsheet-page header.sheet-header {
  border-left: 4px solid rgb(var(--primary-accent));
  height: 80px !important;
  padding: 12px !important;
}
.previewsheet-page header.sheet-header .sheet-title {
  font-size: 1.4em;
  font-weight: 600;
}
.previewsheet-page header.sheet-header .sheet-info {
  color: rgba(var(--foreground-color), 0.8);
  font-size: 0.8em;
}
.previewsheet-page header.sheet-header .sheet-actions .download-btn {
  background: rgb(var(--primary-accent));
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: var(--rounded-corners);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8em;
  transition: background-color 0.2s;
}
.previewsheet-page header.sheet-header .sheet-actions .download-btn:hover {
  background: rgb(var(--secondary-accent));
  color: white;
  text-decoration: none;
}
.previewsheet-page main.pdf-viewer-container {
  height: calc(100vh - 80px);
  width: 100vw;
}
.previewsheet-page main.pdf-viewer-container .pdf-embed {
  width: 100%;
  height: 100%;
  border: none;
}
.previewsheet-page main.pdf-viewer-container .pdf-fallback {
  padding: 42px;
  text-align: center;
  color: rgba(var(--foreground-color), 0.8);
}
.previewsheet-page main.pdf-viewer-container .pdf-fallback a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
  font-weight: 500;
}
.previewsheet-page main.pdf-viewer-container .pdf-fallback a:hover {
  text-decoration: underline;
}
.previewsheet-page main.error-message {
  color: rgb(var(--status-color-warning));
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

/* Styles for the assistant page */
body.assistant-page .container {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
}
body.assistant-page .container main {
  position: relative;
  transition: all 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
body.assistant-page .container main .faqs-container {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 24px); /* 24px for padding */
}
body.assistant-page .container main .faqs-container .header {
  flex-shrink: 0;
  margin: 0;
  padding: 0 24px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgb(var(--border-color));
}
body.assistant-page .container main .faqs-container .header .header-title {
  flex-shrink: 1;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: flex-start;
  padding-right: 24px;
  margin-right: 24px;
  border-right: 1px dashed rgb(var(--border-color));
}
body.assistant-page .container main .faqs-container .header .header-title h1 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
}
body.assistant-page .container main .faqs-container .header .header-actions {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
body.assistant-page .container main .faqs-container .header .header-actions .header-buttons {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
}
body.assistant-page .container main .faqs-container .header .header-actions .header-tools {
  position: relative;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}
body.assistant-page .container main .faqs-container .faqs {
  display: flex;
  flex-direction: column;
  margin: 32px 24px;
}
body.assistant-page .container main .faqs-container .faqs .faq-section {
  margin-bottom: 16px;
}
body.assistant-page .container main .faqs-container .faqs .faq-section h3 {
  font-size: 1em;
  font-weight: 800;
  margin: 0 16px 24px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgb(var(--border-color));
  color: rgba(var(--foreground-color), 0.4);
}
body.assistant-page .container main .faqs-container .faqs .faq-section .faq-item {
  margin-bottom: 16px;
  padding-right: 24px;
}
body.assistant-page .container main .faqs-container .faqs .faq-section .faq-item .question-text {
  font-size: 1.2em;
  font-weight: 300;
  display: block;
  color: rgba(var(--foreground-color), 0.8);
  margin: 24px 0 12px 0;
  cursor: pointer;
  user-select: none;
}
body.assistant-page .container main .faqs-container .faqs .faq-section .faq-item .question-text:hover {
  text-decoration: underline;
}
body.assistant-page .container main .faqs-container .faqs .faq-section .faq-item .answer-text {
  display: block;
  font-size: 0.9em;
  line-height: 1.4;
  transition: all 0s ease !important;
  height: 0;
  visibility: hidden;
}
body.assistant-page .container main .faqs-container .faqs .faq-section .faq-item .answer-text a {
  color: rgb(var(--primary-accent));
  text-decoration: underline;
}
body.assistant-page .container main .faqs-container .faqs .faq-section .faq-item .answer-text a:hover {
  text-decoration: none;
}
body.assistant-page .container main .faqs-container .faqs .faq-section .faq-item .answer-text.show {
  height: auto;
  visibility: visible;
}
body.assistant-page .container main .faqs-container .faqs .faq-section ul.quick-tips-list {
  list-style: none;
  padding: 0;
}
body.assistant-page .container main .faqs-container .faqs .faq-section ul.quick-tips-list li {
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
  line-height: 1.2em;
  font-size: 1.2em;
  font-weight: 300;
}
body.assistant-page .container main .faqs-container .faqs .faq-section ul.quick-tips-list li:before {
  content: "•";
  position: absolute;
  left: 0;
}

.error-message {
  color: rgb(var(--status-color-warning));
  padding: 1em;
}

/* List Journal Outlines Page Styles */
.journal-list-page main .list-container .header h1 {
  font-family: var(--decoration-font);
}
.journal-list-page main .list-container .outlines-container {
  margin: 24px;
}
.journal-list-page main .list-container .outlines-container .outlines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.journal-list-page main .list-container .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 2rem 0;
}
.journal-list-page main .list-container .pagination button {
  padding: 0.5rem 1rem;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  background: rgba(var(--background-color), 0.5);
  color: rgb(var(--foreground-color));
  cursor: pointer;
  transition: all 0.2s;
}
.journal-list-page main .list-container .pagination button:hover:not(:disabled) {
  background: rgb(var(--primary-accent));
  color: white;
  border-color: rgb(var(--primary-accent));
}
.journal-list-page main .list-container .pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.journal-list-page main .list-container .pagination .page-info {
  font-size: 0.9rem;
  color: rgba(var(--foreground-color), 0.7);
}
.journal-list-page main .list-container .empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: rgba(var(--foreground-color), 0.7);
}
.journal-list-page main .list-container .empty-state svg {
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
  fill: rgba(var(--foreground-color), 0.7);
  opacity: 0.5;
}
.journal-list-page main .list-container .empty-state h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: rgb(var(--foreground-color));
}
.journal-list-page main .list-container .empty-state p {
  margin-bottom: 1.5rem;
}
.journal-list-page main .list-container .empty-state a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: rgb(var(--primary-accent));
  color: white;
  border-radius: var(--rounded-corners);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}
.journal-list-page main .list-container .empty-state a:hover {
  background: rgb(var(--primary-accent-darker));
}

/* Show Journal Outline Page Styles */
body.show-journal-page .container main {
  position: relative;
  padding-bottom: 32px;
  margin-bottom: 28px;
}
body.show-journal-page .container main .journal-container {
  margin: 24px;
}
body.show-journal-page .container main .journal-container .header {
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid rgb(var(--border-color));
}
body.show-journal-page .container main .journal-container .header .header-title {
  margin: 0;
  padding: 0;
}
body.show-journal-page .container main .journal-container .header .header-title h1 {
  font-family: var(--decoration-font);
  max-width: 50%;
  margin-bottom: 24px;
  line-height: 1.1em;
  color: rgb(var(--primary-accent-darker));
}
body.show-journal-page .container main .journal-container .header .header-actions {
  display: flex;
  gap: 1rem;
}
body.show-journal-page .container main .journal-container .header .header-actions .action-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  background: rgba(var(--background-color), 0.8);
  color: rgb(var(--foreground-color));
  text-decoration: none;
  font-size: 0.7em;
  cursor: pointer;
}
body.show-journal-page .container main .journal-container .header .header-actions .action-button:hover {
  background: rgb(var(--primary-accent));
  color: rgb(var(--primary-accent));
  border-color: rgb(var(--primary-accent));
}
body.show-journal-page .container main .journal-container .header .header-actions .action-button.secondary {
  background: transparent;
}
body.show-journal-page .container main .journal-container .header .header-actions .action-button svg {
  fill: currentColor;
}
body.show-journal-page .container main .journal-container .outline-metadata {
  background: rgba(var(--background-color), 0.5);
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  padding: 12px;
  margin-bottom: 2rem;
  color: rgba(var(--foreground-color), 0.8);
}
body.show-journal-page .container main .journal-container .outline-metadata .metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
body.show-journal-page .container main .journal-container .outline-metadata .metadata-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
body.show-journal-page .container main .journal-container .outline-metadata .metadata-item svg {
  flex-shrink: 0;
  fill: rgba(var(--foreground-color), 0.6);
}
body.show-journal-page .container main .journal-container .outline-metadata .research-description {
  margin-top: 18px;
}
body.show-journal-page .container main .journal-container .outline-metadata .research-description p {
  font-size: 0.9em;
  line-height: 1.1em;
  margin: 0 0 0.6em 0;
  padding: 0;
}
body.show-journal-page .container main .journal-container .outline-content {
  background-image: linear-gradient(to right, rgba(var(--primary-accent), 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--primary-accent), 0.1) 1px, transparent 1px);
  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  background-size: 20px 20px;
  border: 1px solid rgb(var(--primary-accent), 0.1);
  border-radius: var(--rounded-corners);
  padding: 2rem;
  margin-bottom: 2rem;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown {
  color: rgb(var(--primary-accent-darker));
  font-size: 14px;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown h2:first-child {
  margin-top: 0;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown h2 {
  font-size: 2rem;
  margin-top: 2.6rem;
  font-weight: 800;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown h3 {
  font-size: 1.2rem;
  margin-top: 1.2rem;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown h4 {
  font-size: 1rem;
  margin-top: 1rem;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown h5 {
  font-size: 0.8rem;
  margin-top: 0.8rem;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown h6 {
  font-size: 0.6rem;
  margin-top: 0.6rem;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown p {
  margin-bottom: 1rem;
  line-height: 1.7;
  color: rgba(var(--foreground-color), 0.7);
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown ul, body.show-journal-page .container main .journal-container .outline-content #outline-markdown ol {
  margin-left: 16px;
  padding-left: 0;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown ul li, body.show-journal-page .container main .journal-container .outline-content #outline-markdown ol li {
  margin-bottom: 0.6rem;
  line-height: 1.2em;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown ul {
  list-style-type: disc;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown ol {
  list-style-type: decimal;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown em {
  font-style: italic;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown strong {
  font-weight: 600;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown code {
  background: rgba(var(--border-color), 0.3);
  padding: 0.2rem 0.4rem;
  border-radius: var(--rounded-corners);
  font-family: var(--technical-font);
  font-size: 0.9em;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown pre {
  background: rgba(var(--border-color), 0.3);
  padding: 1rem;
  border-radius: var(--rounded-corners);
  overflow-x: auto;
  margin-bottom: 1rem;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown pre code {
  background: none;
  padding: 0;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown blockquote {
  border-left: 4px solid rgb(var(--primary-accent));
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  font-style: italic;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown hr {
  border: none;
  border-top: 1px solid rgb(var(--border-color));
  margin: 2rem 0;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown a {
  color: rgb(var(--secondary-accent));
  text-decoration: none;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown a:hover {
  text-decoration: underline;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown table th, body.show-journal-page .container main .journal-container .outline-content #outline-markdown table td {
  border: 1px solid rgb(var(--border-color));
  padding: 0.75rem;
  text-align: left;
}
body.show-journal-page .container main .journal-container .outline-content #outline-markdown table th {
  background: rgba(var(--border-color), 0.3);
  font-weight: 600;
}
body.show-journal-page .container main .journal-container .additional-metadata {
  background: rgba(var(--background-color), 0.5);
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  padding: 1.5rem;
}
body.show-journal-page .container main .journal-container .additional-metadata h3 {
  font-size: 1.25rem;
  color: rgb(var(--foreground-color));
  margin-bottom: 1rem;
}
body.show-journal-page .container main .journal-container .additional-metadata .metadata-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.9rem;
}
body.show-journal-page .container main .journal-container .additional-metadata .metadata-details span {
  color: rgba(var(--foreground-color), 0.8);
}
body.show-journal-page .container main .journal-container .additional-metadata .metadata-details span strong {
  color: rgb(var(--foreground-color));
  margin-right: 0.25rem;
}
body.show-journal-page .container main .journal-container .additional-metadata .rag-context-section {
  margin-top: 24px;
}
body.show-journal-page .container main .journal-container .additional-metadata .rag-context-section h4 {
  font-size: 1rem;
  color: rgb(var(--foreground-color));
  margin: 0;
}
body.show-journal-page .container main .journal-container .additional-metadata .rag-context-section .context-used {
  font-style: italic;
  font-size: 0.7em;
  margin: 0 0 8px 0;
  padding: 0;
  line-height: 1.2em;
  color: rgba(var(--foreground-color), 0.8);
  white-space: pre-line;
}
body.show-journal-page .container main .journal-container .additional-metadata .rag-context-section ol {
  margin: 0;
  padding: 0.6em 1em;
}
body.show-journal-page .container main .journal-container .additional-metadata .rag-context-section ol li {
  border-bottom: 1px solid rgb(var(--border-color));
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
}
body.show-journal-page .container main .journal-container .additional-metadata .rag-context-section ol li:last-child {
  border-bottom: none;
}

body.home-page #three {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
body.home-page .container.landing {
  flex-shrink: 0;
  height: 100vh !important;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
body.home-page .container.landing a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
}
body.home-page .container.landing a:hover {
  color: rgb(var(--secondary-accent));
}
body.home-page .container.landing header {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 80px !important;
  border: none !important;
  background: none !important;
}
body.home-page .container.landing main {
  margin: 0;
  padding: 0 32px;
  flex-grow: 1;
  overflow: hidden !important;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 240px);
  justify-content: space-between;
  align-items: center;
}
body.home-page .container.landing main .hero h1 {
  font-family: var(--decoration-font);
  font-size: 2em !important;
  line-height: 1.2em;
  width: 520px;
}
body.home-page .container.landing main .hero p {
  line-height: 1.4em;
  width: 640px;
}
body.home-page .container.landing main .hero .cta-primary {
  margin-top: 32px;
}
body.home-page .container.landing main .hero .cta-primary button.cta {
  background-color: rgb(var(--primary-accent));
  color: rgb(var(--background-color));
  width: 360px;
  height: 80px;
  border-radius: 16px;
  border: none;
  font-size: 1.2em;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.home-page .container.landing main .hero .cta-primary button.cta img {
  margin-right: 12px;
  transition: transform 0.2s ease-in-out;
}
body.home-page .container.landing main .hero .cta-primary button.cta:hover img {
  transform: rotate(90deg);
}
body.home-page .container.landing main .hero .cta-primary button.cta:before {
  content: "";
  background: linear-gradient(60deg, #fffb00, #88c83d, #fffb00, #88c83d, #fffb00, #88c83d, #fffb00, #88c83d, #c7f443);
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  z-index: -1;
  filter: blur(8px);
  background-size: 400%;
  height: calc(100% + 8px);
  animation: glowing 30s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition-delay: 100ms;
  border-radius: var(--rounded-corners);
}
body.home-page .container.landing main .hero .cta-primary button.cta:hover:before {
  opacity: 1;
}
body.home-page .container.landing main .animation {
  margin-right: 32px;
  flex-grow: 1;
  height: 100%;
}
body.home-page .container.landing main .animation #lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
body.home-page .container.landing footer {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 200px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.home-page.beta .beta-announcement {
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: var(--box-shadow);
  padding: 32px;
  border-radius: var(--rounded-corners);
  margin-top: 32px;
}
.home-page.beta .beta-announcement h2 {
  color: rgb(var(--status-color-warning));
  font-size: 1.6em;
  font-family: var(--decoration-font);
  margin-bottom: 18px;
}
.home-page.beta .beta-announcement p {
  margin: 0;
  line-height: 1.2em !important;
  margin-bottom: 16px;
  font-size: 0.8em;
}
.home-page.beta .beta-announcement .beta-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.home-page.beta .beta-announcement .beta-buttons-container .beta-button {
  margin-top: 16px;
}
.home-page.beta .beta-announcement .beta-buttons-container .beta-button a > .inquire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--primary-accent));
  border: 1px solid rgb(var(--foreground-color));
  color: white;
  border-radius: 4px;
  font-size: 0.9em;
  transition: background-color 0.3s ease;
  cursor: pointer;
  height: 41px;
  padding: 0 8px 0 16px;
}
.home-page.beta .beta-announcement .beta-buttons-container .beta-button a > .inquire:hover img {
  transform: translateX(4px);
}
.home-page.beta .footer-bottom {
  margin-top: 64px !important;
}

@media (max-width: 768px) {
  body.home-page.beta .container.landing {
    padding: 0 16px;
  }
  body.home-page.beta .container.landing header {
    padding: 0;
  }
  body.home-page.beta .container.landing main {
    flex-direction: column;
    padding: 0;
  }
  body.home-page.beta .container.landing main .hero {
    width: 100%;
    margin: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  body.home-page.beta .container.landing main .hero h1 {
    font-size: 1.6em !important;
    width: 100%;
  }
  body.home-page.beta .container.landing main .hero p {
    width: 100%;
    margin-bottom: 2px;
  }
  body.home-page.beta .container.landing main .hero .beta-announcement {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 16px;
  }
  body.home-page.beta .container.landing main .hero .beta-announcement .beta-buttons-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  body.home-page.beta .container.landing main .hero .beta-announcement .beta-buttons-container .beta-button {
    width: 100%;
    margin-top: 16px;
  }
  body.home-page.beta .container.landing main .hero .beta-announcement .beta-buttons-container .beta-button a > .inquire {
    width: 100%;
    text-align: center;
  }
  body.home-page.beta .container.landing main .animation {
    display: none;
  }
  body.home-page.beta .container.landing footer {
    padding: 0;
    height: unset;
    margin-bottom: 16px;
  }
}
body.login-page #three {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
body.login-page .container.landing {
  flex-shrink: 0;
  height: 100vh !important;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
body.login-page .container.landing a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
}
body.login-page .container.landing a:hover {
  color: rgb(var(--secondary-accent));
}
body.login-page .container.landing header {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 80px !important;
  border: none !important;
  background: none !important;
}
body.login-page .container.landing main {
  margin: 0;
  padding: 0 32px;
  flex-grow: 1;
  overflow: hidden !important;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 240px);
  justify-content: space-between;
  align-items: center;
}
body.login-page .container.landing main .login-section h1 {
  font-family: var(--decoration-font);
  font-size: 2em !important;
  line-height: 1.2em;
  width: 520px;
  margin-bottom: 24px;
}
body.login-page .container.landing main .login-section p {
  line-height: 1.4em;
  width: 640px;
  margin-bottom: 32px;
}
body.login-page .container.landing main .login-section .login-form {
  width: 320px;
}
body.login-page .container.landing main .login-section .login-form .form-group {
  margin-bottom: 0.8rem;
}
body.login-page .container.landing main .login-section .login-form .form-group input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(var(--primary-accent), 0.2);
  border-radius: var(--rounded-corners);
  font-size: 1rem;
  transition: border-color 0.2s ease-in-out;
  box-sizing: border-box;
}
body.login-page .container.landing main .login-section .login-form .form-group input:focus {
  outline: none;
  border-color: rgb(var(--primary-accent));
  box-shadow: var(--box-shadow);
}
body.login-page .container.landing main .login-section .message {
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  width: 640px;
}
body.login-page .container.landing main .login-section .message.error {
  background-color: rgba(173, 16, 63, 0.1);
  border: 1px solid rgb(var(--status-color-danger));
  color: rgb(var(--status-color-danger));
}
body.login-page .container.landing main .login-section .message.success {
  background-color: rgba(139, 198, 61, 0.1);
  border: 1px solid rgb(var(--secondary-accent));
  color: rgb(var(--secondary-accent));
}
body.login-page .container.landing main .login-section .message p {
  margin: 0;
  width: 100%;
}
body.login-page .container.landing main .login-section .login-button {
  margin-top: 16px;
}
body.login-page .container.landing main .login-section .cta-primary {
  margin-top: 32px;
}
body.login-page .container.landing main .login-section .cta-primary.small {
  margin-top: 24px;
}
body.login-page .container.landing main .login-section .cta-primary button.cta {
  background-color: rgb(var(--primary-accent));
  color: rgb(var(--background-color));
  width: 360px;
  height: 80px;
  border-radius: 16px;
  border: none;
  font-size: 1.2em;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.login-page .container.landing main .login-section .cta-primary button.cta.small {
  width: 100%;
  height: 42px;
  font-size: 1em;
  border-radius: 8px;
}
body.login-page .container.landing main .login-section .cta-primary button.cta:hover img {
  transform: translateX(8px);
}
body.login-page .container.landing main .login-section .cta-primary button.cta:before {
  content: "";
  background: linear-gradient(60deg, #fffb00, #88c83d, #fffb00, #88c83d, #fffb00, #88c83d, #fffb00, #88c83d, #c7f443);
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  z-index: -1;
  filter: blur(8px);
  background-size: 400%;
  height: calc(100% + 8px);
  animation: glowing 30s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition-delay: 100ms;
  border-radius: var(--rounded-corners);
}
body.login-page .container.landing main .login-section .cta-primary button.cta:hover:before {
  opacity: 1;
}
body.login-page .container.landing main .animation {
  margin-right: 32px;
  flex-grow: 1;
  height: 100%;
}
body.login-page .container.landing main .animation #lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
body.login-page .container.landing footer {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 200px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
body.register-page #three {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
body.register-page .container.landing {
  flex-shrink: 0;
  height: 100vh !important;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
body.register-page .container.landing a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
}
body.register-page .container.landing a:hover {
  color: rgb(var(--secondary-accent));
}
body.register-page .container.landing header {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 80px !important;
  border: none !important;
  background: none !important;
}
body.register-page .container.landing main {
  margin: 0;
  padding: 0 32px;
  flex-grow: 1;
  overflow: hidden !important;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 240px);
  justify-content: space-between;
  align-items: center;
}
body.register-page .container.landing main .register-section {
  max-width: 600px;
}
body.register-page .container.landing main .register-section h1 {
  font-family: var(--decoration-font);
  font-size: 2em !important;
  line-height: 1.2em;
  width: 520px;
  margin-bottom: 24px;
}
body.register-page .container.landing main .register-section p {
  line-height: 1.4em;
  width: 100%;
  margin-bottom: 16px;
}
body.register-page .container.landing main .animation {
  margin-right: 32px;
  flex-grow: 1;
  height: 100%;
}
body.register-page .container.landing main .animation #lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
body.register-page .container.landing footer {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 200px;
}

body.about-page {
  overflow-y: auto !important;
}
body.about-page #three {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
body.about-page .container.landing {
  height: unset !important;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
body.about-page .container.landing a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
}
body.about-page .container.landing a:hover {
  color: rgb(var(--secondary-accent));
}
body.about-page .container.landing header {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 80px !important;
  border: none !important;
  background: none !important;
  position: sticky;
  top: 0;
}
body.about-page .container.landing section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.about-page .container.landing section h1 {
  font-family: var(--decoration-font);
  font-size: 3.2em;
  margin: 0 0 32px;
}
body.about-page .container.landing section .article-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  margin-bottom: 32px;
}
body.about-page .container.landing section .article-container article {
  background-color: rgba(var(--background-color), 0.6);
  margin: 16px;
  width: calc(50% - 32px);
  flex-grow: 1;
  padding: 32px;
  border-radius: var(--rounded-corners);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(32px);
  border-left: 2px solid rgba(var(--primary-accent), 0.6);
}
body.about-page .container.landing section .article-container article p {
  margin: 0 auto;
  color: rgba(var(--foreground-color), 0.8);
  line-height: 1.6em;
}
body.about-page .container.landing section .article-container article h2 {
  color: rgb(var(--primary-accent));
  font-size: 1.2em;
  margin: 0 0 8px;
  font-weight: 400;
}
body.about-page .container.landing section .cta-primary {
  margin-top: 16px;
}
body.about-page .container.landing section .cta-primary button.cta {
  background-color: rgb(var(--primary-accent));
  color: rgb(var(--background-color));
  width: 360px;
  height: 80px;
  border-radius: 16px;
  border: none;
  font-size: 1.2em;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.about-page .container.landing section .cta-primary button.cta:hover img {
  transform: translateX(8px);
}
body.about-page .container.landing section .cta-primary button.cta:before {
  content: "";
  background: linear-gradient(60deg, #fffb00, #88c83d, #fffb00, #88c83d, #fffb00, #88c83d, #fffb00, #88c83d, #c7f443);
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  z-index: -1;
  filter: blur(8px);
  background-size: 400%;
  height: calc(100% + 8px);
  animation: glowing 30s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  transition-delay: 100ms;
  border-radius: var(--rounded-corners);
}
body.about-page .container.landing section .cta-primary button.cta:hover:before {
  opacity: 1;
}
body.about-page .container.landing section .animation {
  width: 100%;
  height: 400px;
}
body.about-page .container.landing section .animation #lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

body.error-page #three {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
body.error-page .container.landing {
  flex-shrink: 0;
  height: 100vh !important;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
body.error-page .container.landing a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
}
body.error-page .container.landing a:hover {
  color: rgb(var(--secondary-accent));
}
body.error-page .container.landing header {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 80px !important;
  border: none !important;
  background: none !important;
}
body.error-page .container.landing main {
  margin: 0;
  padding: 0 32px;
  flex-grow: 1;
  overflow: hidden !important;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 240px);
  justify-content: space-between;
  align-items: center;
}
body.error-page .container.landing main .error-section h1 {
  font-size: 2em !important;
  line-height: 1.2em;
  width: 520px;
  margin-bottom: 24px;
}
body.error-page .container.landing main .error-section p {
  width: 640px;
  margin: 0;
}
body.error-page .container.landing main .error-section .error-suggestions {
  margin: 64px 0;
}
body.error-page .container.landing main .error-section .error-suggestions h2 {
  font-size: 1.4em;
  margin: 32px 0 16px 0;
}
body.error-page .container.landing main .error-section .error-suggestions ul {
  padding: 0;
  margin: 14px;
}
body.error-page .container.landing main .error-section .error-suggestions ul li {
  margin-bottom: 8px;
}
body.error-page .container.landing main .error-section button.contact-support {
  display: inline-block;
  padding: 12px 24px;
  background-color: rgb(var(--primary-accent));
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
  margin-bottom: 32px;
}
body.error-page .container.landing main .error-section button.contact-support:hover {
  background-color: rgb(var(--secondary-accent));
}
body.error-page .container.landing main .animation {
  margin: 0;
  flex-grow: 1;
  height: 80%;
}
body.error-page .container.landing main .animation #lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
body.error-page .container.landing footer {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 200px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
body.registration-page {
  height: unset !important;
  overflow: unset !important;
}
body.registration-page .container.landing {
  flex-shrink: 0;
  height: 100vh !important;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
body.registration-page .container.landing a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
}
body.registration-page .container.landing a:hover {
  color: rgb(var(--secondary-accent));
}
body.registration-page .container.landing header {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 80px !important;
  border: none !important;
  background: none !important;
}
body.registration-page .container.landing main {
  margin: 0;
  padding: 0 32px;
  flex-grow: 1;
  overflow: unset !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
body.registration-page .container.landing main .register-section {
  flex-grow: 1;
  height: 100%;
  min-width: 720px;
}
body.registration-page .container.landing main .status-section {
  flex-grow: 1;
  height: 100%;
  max-width: 800px;
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.registration-page .container.landing main .status-section #lottie-canvas {
  width: 300px;
  height: 300px;
  display: block;
  margin: 0 auto;
}
body.registration-page .container.landing main .status-section .sign-up-messages {
  height: 42px;
  margin-bottom: 8px;
}
body.registration-page .container.landing main .status-section .sign-up-messages .sign-up-message {
  padding: 8px 16px;
  font-size: 0.8em;
  border-radius: var(--rounded-corners);
}
body.registration-page .container.landing main .status-section .sign-up-messages .sign-up-message.warning {
  background-color: rgba(var(--status-color-warning), 0.1);
  border: 1px solid rgb(var(--status-color-warning));
}
body.registration-page .container.landing main .status-section .sign-up-messages .sign-up-message.error {
  background-color: rgba(var(--status-color-danger), 0.1);
  border: 1px solid rgb(var(--status-color-danger));
}
body.registration-page .container.landing main .status-section .sign-up-messages .sign-up-message.success {
  background-color: rgba(var(--status-color-success), 0.1);
  border: 1px solid rgb(var(--status-color-success));
}
body.registration-page .container.landing main .status-section .section-content {
  padding-left: 32px;
  margin-top: 64px;
}
body.registration-page .container.landing main .section-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
body.registration-page .container.landing main .section-content h1 {
  font-family: var(--decoration-font);
  font-size: 1.9em !important;
  line-height: 1.2em;
  color: rgb(var(--primary-accent));
}
body.registration-page .container.landing main .section-content h2 {
  font-family: var(--decoration-font);
  font-size: 1.4em !important;
  line-height: 1.1em;
  margin-bottom: 6px;
}
body.registration-page .container.landing main .section-content small {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
}
body.registration-page .container.landing main .section-content .form-container {
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: var(--rounded-corners);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 32px 42px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.registration-page .container.landing main .section-content .form-container .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
body.registration-page .container.landing main .section-content .form-container .form-group label {
  color: rgba(var(--foreground-color), 0.9);
}
body.registration-page .container.landing main .section-content .form-container .form-group input[type=text],
body.registration-page .container.landing main .section-content .form-container .form-group input[type=email],
body.registration-page .container.landing main .section-content .form-container .form-group input[type=password] {
  padding: 12px 16px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  font-size: 0.9em;
  line-height: 1.4;
  margin: 4px 0;
}
body.registration-page .container.landing main .section-content .form-container .form-group input[type=text]:focus,
body.registration-page .container.landing main .section-content .form-container .form-group input[type=email]:focus,
body.registration-page .container.landing main .section-content .form-container .form-group input[type=password]:focus {
  border-color: rgb(var(--primary-accent));
  outline: none;
}
body.registration-page .container.landing main .section-content .form-container .form-group ::placeholder {
  color: rgba(var(--foreground-color), 0.4);
  opacity: 1;
  font-style: italic;
  font-size: 0.9em;
  transition: color 0.2s;
}
body.registration-page .container.landing main .section-content .form-container .form-group input:focus::placeholder {
  color: rgba(var(--primary-accent), 0.6);
}
body.registration-page .container.landing main .section-content .form-container .form-group .submit-signup-button {
  padding: 20px 24px;
  font-size: 1.1em;
  background-color: rgb(var(--primary-accent));
  color: rgb(var(--background-color));
  border: none;
  border-radius: var(--rounded-corners);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
body.registration-page .container.landing main .section-content .form-container .form-group .submit-signup-button:disabled {
  background-color: rgb(var(--border-color));
  cursor: not-allowed;
  box-shadow: none;
}
body.registration-page .container.landing main .section-content .form-container .form-group .submit-signup-button:hover {
  box-shadow: none;
}
body.registration-page .container.landing main .section-content .form-container .form-group .submit-signup-button:hover img {
  transform: rotate(-90deg);
}
body.registration-page .container.landing main .section-content .form-container .form-group .submit-signup-button svg {
  margin-left: 16px;
}
body.registration-page .container.landing main .section-content .alternative {
  margin: 16px 0 32px 0;
}
body.registration-page .container.landing main .section-content .alternative p {
  margin: 0;
}
body.registration-page .container.landing main .section-content .registration-status p {
  margin: 0;
  padding: 4px 0;
  font-size: 0.9em;
  line-height: 1.2em;
  color: rgba(var(--foreground-color), 0.6);
}
body.registration-page .container.landing footer {
  margin: 32px 0 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 64px;
}

.strength-bar {
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  margin: 5px 0;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}
.strength-fill.strength-weak {
  background: #dc3545;
  width: 25%;
}
.strength-fill.strength-fair {
  background: #fd7e14;
  width: 50%;
}
.strength-fill.strength-good {
  background: #ffc107;
  width: 75%;
}
.strength-fill.strength-strong {
  background: #28a745;
  width: 100%;
}

.loading-indicator {
  display: none;
  text-align: center;
  padding: 20px;
  color: #6c757d;
}
.loading-indicator.show {
  display: block;
}
.loading-indicator .spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #e9ecef;
  border-radius: 50%;
  border-top-color: rgb(var(--primary-accent));
  animation: spin 1s ease-in-out infinite;
  margin-right: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
body.email-verification-page #three {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
body.email-verification-page .container.landing {
  flex-shrink: 0;
  height: 100vh !important;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
body.email-verification-page .container.landing a {
  color: rgb(var(--primary-accent));
  text-decoration: none;
}
body.email-verification-page .container.landing a:hover {
  color: rgb(var(--secondary-accent));
}
body.email-verification-page .container.landing header {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 80px !important;
  border: none !important;
  background: none !important;
}
body.email-verification-page .container.landing main {
  margin: 60px 0 0;
  padding: 0 32px;
  flex-grow: 1;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240px);
  align-items: flex-start;
}
body.email-verification-page .container.landing main .email-verification-message {
  margin: 18px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
body.email-verification-page .container.landing main .email-verification-message svg {
  margin: 0 8px;
}
body.email-verification-page .container.landing main .email-verification-message a {
  margin-left: 8px;
}
body.email-verification-page .container.landing main .columns-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
body.email-verification-page .container.landing main .columns-container .left, body.email-verification-page .container.landing main .columns-container .right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
body.email-verification-page .container.landing main .columns-container .left h2, body.email-verification-page .container.landing main .columns-container .right h2 {
  font-size: 1.2em;
  font-weight: 400;
  margin: 16px 0;
  color: rgba(var(--foreground-color), 0.8);
}
body.email-verification-page .container.landing main .columns-container .left ol, body.email-verification-page .container.landing main .columns-container .left ul, body.email-verification-page .container.landing main .columns-container .right ol, body.email-verification-page .container.landing main .columns-container .right ul {
  margin: 0 16px;
  padding: 0;
  font-weight: 400;
  font-size: 0.8em;
}
body.email-verification-page .container.landing main .columns-container .left ol li, body.email-verification-page .container.landing main .columns-container .left ul li, body.email-verification-page .container.landing main .columns-container .right ol li, body.email-verification-page .container.landing main .columns-container .right ul li {
  margin-bottom: 8px;
  line-height: 1.1;
}
body.email-verification-page .container.landing main .columns-container .left p.warning, body.email-verification-page .container.landing main .columns-container .right p.warning {
  width: 420px;
  font-size: 0.9em;
  color: rgba(var(--foreground-color), 0.8);
}
body.email-verification-page .container.landing main .columns-container .left .action-links, body.email-verification-page .container.landing main .columns-container .right .action-links {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}
body.email-verification-page .container.landing main .columns-container .left .action-links a, body.email-verification-page .container.landing main .columns-container .right .action-links a {
  display: block;
  font-size: 0.9em;
}
body.email-verification-page .container.landing main .columns-container .left .animation, body.email-verification-page .container.landing main .columns-container .right .animation {
  margin: 0;
  flex-grow: 1;
  height: 80%;
}
body.email-verification-page .container.landing main .columns-container .left .animation #lottie-canvas, body.email-verification-page .container.landing main .columns-container .right .animation #lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
body.email-verification-page .container.landing main .columns-container .right.verified {
  height: 420px;
}
body.email-verification-page .container.landing main h1 {
  font-size: 2em;
  font-weight: 600;
  margin: 20px 0;
  font-family: var(--decoration-font);
}
body.email-verification-page .container.landing footer {
  margin: 0;
  padding: 0 32px;
  flex-shrink: 0;
  height: 200px;
}

/* Header Styles */
header.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 24px;
  height: 48px !important;
  flex-shrink: 0;
  user-select: none;
  border-bottom: 1px solid rgb(var(--border-color));
  background-color: rgba(var(--primary-accent), 0.4);
}
header.main-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 3px;
}
header.main-header .logo img {
  margin: 0;
  padding: 0;
}
header.main-header .org-info {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0;
  width: 700px;
}
header.main-header .org-info span {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.9);
}
header.main-header .org-info .client-info {
  display: flex;
  align-items: center;
}
header.main-header .org-info .client-info img {
  margin-right: 4px;
}
header.main-header .org-info .client-info .client-name {
  margin-right: 24px;
  margin-top: 1px;
}
header.main-header .org-info .client-info .client-type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid white;
  color: white;
  font-size: 0.7em;
}
header.main-header .usage-info {
  font-size: 0.7em;
  color: rgba(var(--foreground-color), 0.6);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 16px;
  width: 420px;
}
header.main-header .page-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
header.main-header .page-info span {
  font-size: 0.6em;
  color: rgba(var(--foreground-color), 0.6);
  color: rgb(var(--status-color-warning));
}
header.main-header .notifications {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-right: 16px;
}
header.main-header .user-info {
  display: flex;
  align-items: center;
  width: 560px;
  margin: 0;
  justify-content: space-between;
}
header.main-header .user-info span {
  font-size: 0.7em;
  color: rgba(var(--foreground-color), 0.8);
}
header.main-header .user-info .user-detail {
  margin-right: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
header.main-header .user-info .user-detail span {
  font-size: 0.8em;
  font-weight: 400;
}
header.main-header .user-info .user-detail .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgb(var(--border-color));
  background-color: rgb(var(--secondary-accent));
  cursor: pointer;
  overflow: hidden;
  margin-right: 12px;
}
header.main-header .user-info .button-container {
  border-left: 1px solid rgb(var(--border-color));
  padding-left: 8px;
}
header.main-header .user-info .button-container .logout {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  background-color: rgb(var(--status-color-warning));
  padding: 4px 8px;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  border-right: 2px solid rgba(0, 0, 0, 0.4);
}
header.main-header .user-info .button-container .logout svg path {
  fill: white;
}
header.main-header .user-info .button-container .logout a {
  font-family: var(--technical-font);
  color: white;
  margin-left: 2px;
  text-decoration: none;
}
header.main-header .user-info .button-container .logout:hover {
  background-color: rgb(var(--status-color-danger));
}

.important-banner {
  background-color: rgb(var(--status-color-warning));
  color: rgb(var(--background-color));
  text-align: center;
  position: relative;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.important-banner .banner-content {
  margin: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.important-banner .close-banner {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.menubar-nav {
  padding: 0 24px;
  margin: 0;
  z-index: 3;
  background-color: rgba(var(--primary-accent), 0.2);
  height: 36px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(var(--foreground-color), 0.2);
  display: flex;
  align-items: center;
}
.menubar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  font-size: 0.8em;
  font-family: var(--technical-font);
}
.menubar-nav ul li {
  margin: 0;
}
.menubar-nav ul li a {
  text-decoration: none;
  color: rgba(var(--foreground-color), 0.8);
  margin: 0;
  padding: 2px 8px;
  display: inline-block;
  background-color: rgba(var(--primary-accent), 0.1);
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  transition: all 0.05s ease;
}
.menubar-nav ul li a:hover {
  background-color: rgba(var(--primary-accent), 0.2);
}
.menubar-nav ul li a.active, .menubar-nav ul li a:active {
  color: white;
  border-top: 2px solid rgba(0, 0, 0, 0.4);
  border-left: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  background-color: rgb(var(--secondary-accent));
}

.footer-content {
  color: rgba(var(--foreground-color), 0.8);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-content .footer-section {
  min-width: 200px;
  text-align: right;
}
.footer-content .footer-section p {
  font-size: 0.9em;
}
.footer-content .footer-section:first-child {
  text-align: left;
}
.footer-content .footer-section ul {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}
.footer-content .footer-section ul li {
  margin-bottom: 8px;
  font-size: 0.9em;
}
.footer-content.registration {
  margin-top: 8px;
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
}
.footer-content.registration p {
  margin: 0;
}

.footer-bottom {
  margin-top: 24px;
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
}

nav.landing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
nav.landing-header .logo img {
  width: 32px;
  height: auto;
}
nav.landing-header .logo span.logo {
  font-size: 24px;
  font-weight: bold;
  color: rgb(var(--primary-accent-darker));
  font-family: "DM Serif Text", serif;
  margin-left: 8px;
}
nav.landing-header .nav-links .user {
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}
nav.landing-header .nav-links .user span.message {
  margin-right: 16px;
}

.knowledge-pane {
  margin: 0 32px 24px 32px;
}
.knowledge-pane .knowledge-pane-content span.loading {
  display: inline-block;
  margin: 24px;
  font-style: italic;
  color: rgba(var(--foreground-color), 0.6);
}
.knowledge-pane .knowledge-pane-content .document-list-container {
  padding: 0;
  margin-bottom: 32px;
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card {
  margin: 0 0 12px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-header {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: rgba(var(--border-color), 0.6);
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-header h4 {
  font-family: var(--decoration-font);
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-header .privacy-badge {
  margin-left: auto;
  font-size: 0.7em;
  padding: 1px 10px;
  border-radius: 16px;
  color: rgb(var(--background-color));
  font-weight: 600;
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-header .privacy-badge.private {
  background-color: rgba(var(--status-color-warning), 0.8);
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-header .privacy-badge.public {
  background-color: rgba(var(--status-color-info), 0.8);
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 0.8em;
  padding: 4px 16px 4px;
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-row .document-metadata {
  font-weight: 600;
  width: 160px;
  flex-shrink: 0;
  color: rgba(var(--foreground-color), 0.6);
}
.knowledge-pane .knowledge-pane-content .document-list-container .document-card .document-row .document-value {
  flex-grow: 1;
}

.uploaded-documents-pane {
  margin: 0 32px 24px 32px;
}
.uploaded-documents-pane .uploaded-documents-content .spinner-component {
  display: inline-block;
  margin: 24px;
}
.uploaded-documents-pane .uploaded-documents-content .no-documents,
.uploaded-documents-pane .uploaded-documents-content .response-error {
  display: inline-block;
  margin: 24px;
  font-style: italic;
  color: rgba(var(--foreground-color), 0.6);
}
.uploaded-documents-pane .uploaded-documents-content .response-error {
  color: rgba(var(--status-color-danger), 0.8);
}
.uploaded-documents-pane .uploaded-documents-content .documents-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card {
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  overflow: hidden;
  transition: background-color 0.2s ease;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card:hover {
  background-color: rgba(var(--border-color), 0.1);
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-title {
  padding: 12px 16px;
  background-color: rgba(var(--border-color), 0.3);
  border-bottom: 1px solid rgb(var(--border-color));
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-title h4 {
  margin: 0;
  padding: 0;
  font-family: var(--decoration-font);
  font-weight: 600;
  font-size: 1em;
  color: rgba(var(--foreground-color), 0.9);
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-metadata {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid rgba(var(--border-color), 0.5);
  font-size: 0.85em;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-metadata .metadata-item {
  display: flex;
  gap: 8px;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-metadata .metadata-item .metadata-label {
  font-weight: 600;
  color: rgba(var(--foreground-color), 0.7);
  min-width: 90px;
  flex-shrink: 0;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-metadata .metadata-item .metadata-value {
  color: rgba(var(--foreground-color), 0.8);
  flex: 1;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-status {
  padding: 10px 16px;
  display: flex;
  gap: 16px;
  font-size: 0.8em;
  flex-wrap: wrap;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-status .status-item {
  display: flex;
  gap: 6px;
  align-items: center;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-status .status-item .status-label {
  font-weight: 600;
  color: rgba(var(--foreground-color), 0.6);
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-status .status-item .status-value {
  color: rgba(var(--foreground-color), 0.8);
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-status .status-item .status-text {
  font-weight: 600;
  text-transform: uppercase;
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-status .status-item .status-text.status-yes {
  color: rgba(var(--status-color-success), 1);
}
.uploaded-documents-pane .uploaded-documents-content .documents-container .document-card .row-status .status-item .status-text.status-no {
  color: rgba(var(--status-color-danger), 1);
}

.detail-content {
  margin: 16px 32px;
  padding: 0;
}
.detail-content.collection {
  margin: 0 32px 64px 32px;
}
.detail-content .top {
  margin: 0 0 24px 0;
}
.detail-content .top h2 {
  font-family: var(--decoration-font);
  color: rgb(var(--primary-accent));
}
.detail-content .top p {
  margin: 8px 0 0;
  padding: 0;
  font-weight: 200;
  font-size: 0.8em;
}
.detail-content .content {
  margin: 0 0 24px 0;
  color: rgb(var(--foreground-color));
  font-size: 0.9em;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
}
.detail-content .content .content-header {
  background-color: rgba(var(--primary-accent), 0.1);
  padding: 12px 24px;
}
.detail-content .content .content-header p.header {
  font-size: 1em;
  font-weight: 400;
  margin: 24px 0;
  line-height: 1.8em;
}
.detail-content .content .content-body {
  margin: 24px;
}
.detail-content .content .content-body .sheet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  padding: 8px 16px;
  background-color: rgb(var(--primary-accent));
  min-width: 200px;
  color: rgb(var(--background-color));
  text-decoration: none;
  border-radius: var(--rounded-corners);
  font-weight: 600;
  transition: background-color 0.3s;
}
.detail-content .content .content-body .sheet-button svg {
  margin-left: 8px;
}
.detail-content .content .content-body .sheet-button:hover {
  background-color: rgb(var(--secondary-accent));
}
.detail-content .content small {
  font-weight: 800;
}
.detail-content .content p {
  margin: 2px 0 24px 0;
  padding: 0;
  line-height: 1.4em;
}
.detail-content .content p.question {
  border-radius: var(--rounded-corners);
  margin: 2px 0 16px 0;
}
.detail-content .content p.answer {
  margin: 2px 0 0;
  padding: 4px 8px;
  border-radius: var(--rounded-corners);
  border-left: 4px solid rgb(var(--secondary-accent));
}
.detail-content .content p.explanation {
  font-style: italic;
  font-size: 0.9em;
  margin: 0 0 16px 0;
  padding: 10px 0;
  line-height: 1.2em;
  color: rgba(var(--foreground-color), 0.8);
}
.detail-content .content p.detractor {
  margin: 2px 0 0;
  padding: 4px 8px;
  border-radius: var(--rounded-corners);
  border-left: 4px solid rgba(var(--status-color-warning));
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
}
.detail-content .content p.detractor span {
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid rgba(var(--status-color-warning), 0.3);
}
.detail-content .content .role-explanation {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.detail-content .content .role-explanation .roles-container {
  display: flex;
  flex-direction: column;
}
.detail-content .content .role-explanation .roles-container .role-item {
  margin-top: 4px;
}
.detail-content .content .role-explanation .roles-container .role-item p {
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}
.detail-content .actions {
  margin: 0;
  border-top: 1px dashed rgb(var(--border-color));
}
.detail-content .metadata {
  margin: 0 0 24px 0;
  padding: 16px 24px;
  border-radius: var(--rounded-corners);
  border: 1px solid rgb(var(--border-color));
  background-color: rgba(var(--border-color), 0.2);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.detail-content .metadata p {
  font-size: 0.8em;
  margin: 0;
  padding: 0;
  line-height: 1.8em;
}
.detail-content .reference {
  margin: 0 0 24px 0;
  padding: 16px 24px;
  border-radius: var(--rounded-corners);
  border: 1px solid rgb(var(--border-color));
  background-color: rgba(var(--border-color), 0.2);
}
.detail-content .reference h5, .detail-content .reference h6 {
  margin: 16px 0 8px 0;
  font-size: 0.9em;
  font-weight: 600;
  color: rgb(var(--foreground-color));
}
.detail-content .reference h6 {
  font-size: 0.8em;
  margin: 12px 0 6px 0;
}
.detail-content .reference p {
  font-style: italic;
  font-size: 0.7em;
  margin: 8px 0 8px;
  padding: 0;
  line-height: 1.2em;
  color: rgba(var(--foreground-color), 0.8);
  white-space: pre-line;
}
.detail-content .reference ol, .detail-content .reference ul {
  margin: 8px 0;
  padding: 0 0 0 16px;
  list-style-type: decimal;
}
.detail-content .reference ol li, .detail-content .reference ul li {
  margin: 4px 0;
  padding: 0;
  line-height: 1.2em;
  color: rgba(var(--foreground-color), 0.8);
  font-size: 0.8em;
}
.detail-content .reference ul {
  list-style-type: disc;
}
.detail-content .reference .chunks-container {
  margin: 12px 0;
}
.detail-content .reference .chunk-item {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid rgba(var(--border-color), 0.5);
  border-radius: var(--rounded-corners);
  background-color: rgba(var(--background-color), 0.3);
}
.detail-content .reference .chunk-item .chunk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--border-color), 0.3);
}
.detail-content .reference .chunk-item .chunk-header strong {
  font-size: 0.8em;
  color: rgb(var(--primary-accent));
}
.detail-content .reference .chunk-item .chunk-header .similarity {
  font-size: 0.7em;
  color: rgba(var(--foreground-color), 0.7);
  background-color: rgba(var(--secondary-accent), 0.1);
  padding: 2px 6px;
  border-radius: 3px;
}
.detail-content .reference .chunk-item .chunk-metadata {
  margin: 8px 0;
}
.detail-content .reference .chunk-item .chunk-metadata p {
  font-style: normal;
  font-size: 0.7em;
  margin: 2px 0;
  line-height: 1.3em;
  color: rgba(var(--foreground-color), 0.7);
}
.detail-content .reference .chunk-item .chunk-metadata p strong {
  color: rgb(var(--foreground-color));
}
.detail-content .reference .chunk-item .chunk-content {
  margin: 12px 0;
}
.detail-content .reference .chunk-item .chunk-content p {
  font-style: normal;
  font-size: 0.75em;
  margin: 4px 0;
  color: rgb(var(--foreground-color));
}
.detail-content .reference .chunk-item .chunk-content p strong {
  color: rgb(var(--foreground-color));
}
.detail-content .reference .chunk-item .chunk-content blockquote {
  margin: 6px 0;
  padding: 8px 12px;
  border-left: 3px solid rgb(var(--secondary-accent));
  background-color: rgba(var(--secondary-accent), 0.05);
  border-radius: 0 var(--rounded-corners) var(--rounded-corners) 0;
  font-size: 0.7em;
  line-height: 1.4em;
  color: rgba(var(--foreground-color), 0.9);
  font-style: italic;
}
.detail-content .reference .chunk-item .quality-metrics {
  margin-top: 12px;
}
.detail-content .reference .chunk-item .quality-metrics details summary {
  font-size: 0.7em;
  color: rgba(var(--foreground-color), 0.7);
  cursor: pointer;
  padding: 4px 0;
}
.detail-content .reference .chunk-item .quality-metrics details summary:hover {
  color: rgb(var(--primary-accent));
}
.detail-content .reference .chunk-item .quality-metrics details .metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
  padding: 8px;
  background-color: rgba(var(--border-color), 0.1);
  border-radius: var(--rounded-corners);
}
.detail-content .reference .chunk-item .quality-metrics details .metrics-grid span {
  font-size: 0.65em;
  color: rgba(var(--foreground-color), 0.7);
  padding: 2px 4px;
  background-color: rgba(var(--background-color), 0.5);
  border-radius: 3px;
}
.detail-content .loading-indicator {
  margin: 0 0 24px 0;
  padding: 16px;
  text-align: center;
  color: rgba(var(--foreground-color), 0.6);
  font-style: italic;
}
.detail-content .error-message {
  padding: 12px;
  margin: 0 0 24px 0;
  background-color: rgba(var(--status-color-danger), 0.1);
  border-left: 4px solid rgb(var(--status-color-danger));
  border-radius: var(--rounded-corners);
  color: rgb(var(--status-color-danger));
  font-size: 0.9em;
}
.detail-content .json-data {
  margin: 0 0 24px 0;
  padding: 12px;
  background-color: rgba(var(--foreground-color), 0.05);
  border-radius: var(--rounded-corners);
  overflow-x: auto;
}
.detail-content .json-data pre {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-size: 0.8em;
  line-height: 1.4em;
  color: rgba(var(--foreground-color), 0.8);
  white-space: pre-wrap;
}

.result-container-component {
  padding: 24px 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  position: relative;
}
.result-container-component .hero {
  margin: 8px 0 8px;
}
.result-container-component .description {
  text-align: center;
  margin: 16px 0;
}
.result-container-component .description h2 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
  margin: 0;
  font-size: 1.4em;
}
.result-container-component .description p {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
  margin: 8px 0;
  max-width: 600px;
}
.result-container-component .summary {
  width: 800px;
}
.result-container-component .summary .summary-item {
  font-size: 0.8rem;
  margin: 4px 0;
  color: rgba(var(--foreground-color), 0.8);
}
.result-container-component .summary h3 {
  font-family: var(--decoration-font);
  font-size: 1.2rem;
  margin: 16px 0 8px;
  color: rgb(var(--secondary-accent));
}
.result-container-component .summary h3 span {
  color: rgb(var(--foreground-color));
}
.result-container-component .summary .metadata {
  font-size: 0.8em;
}
.result-container-component .view-list-button {
  margin: 18px 0;
  background-color: rgb(var(--secondary-accent));
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: rgb(var(--background-color));
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border-radius: var(--rounded-corners);
  padding: 18px;
}
.result-container-component .view-list-button svg {
  margin-right: 8px;
}
.result-container-component .view-list-button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.result-container-component .view-list-button:hover svg {
  transform: translate(2px, -2px);
}
.result-container-component .animation {
  position: absolute;
  width: 100%;
  top: 0;
  flex-grow: 1;
}
.result-container-component .animation #lottie-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pagination component styles */
.pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px dashed rgb(var(--border-color));
  margin: 24px 0;
  /* Responsive adjustments */
}
.pagination-container .pagination-info {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
}
.pagination-container .pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination-container .pagination-controls .pagination-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--border-color));
  background-color: rgb(var(--background-color));
  font-family: var(--technical-font);
  color: rgb(var(--foreground-color));
  border-radius: var(--rounded-corners);
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 500;
  transition: all 0.2s ease;
  min-height: 36px;
}
.pagination-container .pagination-controls .pagination-btn:hover:not(.disabled):not(.active) {
  background-color: rgba(var(--primary-accent), 0.05);
  border-color: rgba(var(--primary-accent), 0.3);
  color: rgb(var(--primary-accent));
}
.pagination-container .pagination-controls .pagination-btn:active:not(.disabled):not(.active) {
  background-color: rgba(var(--primary-accent), 0.1);
  transform: translateY(1px);
}
.pagination-container .pagination-controls .pagination-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: rgba(var(--border-color), 0.3);
}
.pagination-container .pagination-controls .pagination-btn.active {
  background-color: rgb(var(--primary-accent));
  color: rgb(var(--background-color));
  border-color: rgb(var(--primary-accent));
  cursor: default;
}
.pagination-container .pagination-controls .pagination-btn svg {
  fill: currentColor;
  flex-shrink: 0;
}
.pagination-container .pagination-controls .pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
}
.pagination-container .pagination-controls .pagination-pages .pagination-page {
  min-width: 36px;
  justify-content: center;
  padding: 8px;
  font-size: 0.7em;
}
.pagination-container .pagination-controls .pagination-pages .pagination-page.active {
  font-weight: 600;
}
.pagination-container .pagination-controls .pagination-pages .pagination-ellipsis {
  padding: 8px 4px;
  color: rgba(var(--foreground-color), 0.5);
  font-size: 0.85em;
  user-select: none;
}
.pagination-container .pagination-controls .pagination-prev,
.pagination-container .pagination-controls .pagination-next {
  font-weight: 500;
}
.pagination-container .pagination-controls .pagination-prev span,
.pagination-container .pagination-controls .pagination-next span {
  font-size: 0.85em;
}
@media (max-width: 768px) {
  .pagination-container .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .pagination-container .pagination-controls .pagination-prev,
  .pagination-container .pagination-controls .pagination-next {
    padding: 8px;
    min-width: 36px;
    justify-content: center;
  }
  .pagination-container .pagination-controls .pagination-prev span,
  .pagination-container .pagination-controls .pagination-next span {
    display: none;
  }
  .pagination-container .pagination-controls .pagination-pages {
    margin: 0 4px;
    gap: 2px;
  }
  .pagination-container .pagination-controls .pagination-pages .pagination-page {
    min-width: 32px;
    padding: 6px;
    font-size: 0.8em;
  }
  .pagination-container .pagination-controls .pagination-pages .pagination-ellipsis {
    padding: 6px 2px;
    font-size: 0.8em;
  }
}
@media (max-width: 480px) {
  .pagination-container .pagination-controls .pagination-pages .pagination-page {
    min-width: 28px;
    padding: 4px;
    font-size: 0.75em;
  }
}

/* Loading state for HTMX requests */
.pagination-container .htmx-request .pagination-btn:not(.disabled) {
  opacity: 0.6;
  pointer-events: none;
}

.popup_filter_list_component {
  background-color: rgba(255, 255, 255, 0.3);
  min-height: 64px;
  min-width: 240px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  position: absolute;
  top: 6px;
  left: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.popup_filter_list_component .filter-container {
  width: 100%;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.popup_filter_list_component .filter-container .filter-button {
  width: 120px;
  height: 32px;
  background-color: rgba(var(--status-color-info), 0.8);
  border-radius: var(--rounded-corners);
  border: 1px solid rgb(var(--status-color-info));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: var(--technical-font);
  font-size: 0.7em;
  color: rgb(var(--background-color));
  cursor: pointer;
}
.popup_filter_list_component .filter-container .filter-button svg {
  margin-right: 8px;
  flex-shrink: 0;
}
.popup_filter_list_component .filter-container .filter-button.clear {
  background-color: rgba(var(--status-color-warning), 0.8);
  border: 1px solid rgb(var(--status-color-warning));
  color: rgb(var(--foreground-color));
}

.popup_search_list_component {
  background-color: rgba(255, 255, 255, 0.3);
  min-height: 64px;
  min-width: 240px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  position: absolute;
  top: 6px;
  left: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.popup_search_list_component .search-container {
  width: 100%;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.popup_search_list_component .search-container input[type=text] {
  padding: 8px;
  border: 1px solid rgba(var(--primary-accent), 0.6);
  border-radius: var(--rounded-corners);
  width: 200px;
  font-size: 0.8em;
  outline: none;
  transition: background-color 0.3s ease;
}
.popup_search_list_component .search-container input[type=text]:focus {
  background-color: rgba(var(--background-color), 1);
  border-color: rgb(var(--primary-accent));
}
.popup_search_list_component .search-container .search-enter {
  margin-left: 6px;
  height: 32px;
  background-color: rgba(var(--status-color-info), 0.8);
  border-radius: var(--rounded-corners);
  border: 1px solid rgb(var(--status-color-info));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: var(--technical-font);
  font-size: 0.7em;
  color: rgb(var(--background-color));
  cursor: pointer;
}
.popup_search_list_component .search-container .search-clear {
  margin-left: 6px;
  height: 32px;
  width: 32px;
  background-color: rgba(var(--status-color-warning), 0.8);
  border-radius: var(--rounded-corners);
  border: 1px solid rgb(var(--status-color-warning));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: var(--technical-font);
  font-size: 0.7em;
  color: rgb(var(--background-color));
  cursor: pointer;
  transition: all 0.2s ease;
}
.popup_search_list_component .search-container .search-clear:hover {
  background-color: rgba(var(--status-color-warning), 1);
}

/* Rating Popup Internal Styles */
.popup_rate_vignette {
  background-color: rgba(255, 255, 255, 0.6);
  min-height: 64px;
  min-width: 150px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  position: absolute;
  top: 6px;
  left: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.popup_rate_vignette .stars-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
}
.popup_rate_vignette .stars-container .star {
  cursor: pointer;
  transition: all 0.2s ease;
}
.popup_rate_vignette .stars-container .star svg {
  fill: none;
  stroke: #FFD700;
  stroke-width: 2;
  transition: all 0.2s ease;
}
.popup_rate_vignette .stars-container .star.filled svg, .popup_rate_vignette .stars-container .star.hover svg {
  fill: #FFD700;
  stroke: #FFD700;
}
.popup_rate_vignette .stars-container .star:hover {
  transform: scale(1.1);
}

.popup_addto_collection {
  background-color: rgba(255, 255, 255, 0.6);
  min-height: 64px;
  min-width: 250px;
  width: 390px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  position: absolute;
  top: 6px;
  left: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
}
.popup_addto_collection .collections-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.popup_addto_collection .collections-header .refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--rounded-corners);
  transition: all 0.2s ease;
}
.popup_addto_collection .collections-header .refresh-btn:hover {
  background: rgba(var(--foreground-color), 0.1);
}
.popup_addto_collection .collections-header .refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.popup_addto_collection .collections-header .refresh-btn svg {
  fill: currentColor;
}
.popup_addto_collection .collections-list {
  max-height: 200px;
  overflow-y: auto;
}
.popup_addto_collection .collections-list .collection-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 4px;
  cursor: pointer;
  border-bottom: 1px dashed rgb(var(--border-color));
}
.popup_addto_collection .collections-list .collection-item:hover {
  background: rgba(var(--primary-accent), 0.1);
  border-color: rgba(var(--primary-accent), 0.3);
}
.popup_addto_collection .collections-list .collection-item .collection-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.popup_addto_collection .collections-list .collection-item .collection-status {
  font-size: 12px;
}
.popup_addto_collection .collections-list .collection-item .collection-status .status-added {
  color: rgb(var(--status-color-success));
  font-weight: 500;
}
.popup_addto_collection .collections-list .collection-item .collection-status .status-add {
  color: rgba(var(--foreground-color), 0.6);
}
.popup_addto_collection .collections-list .no-collections {
  text-align: center;
  padding: 20px;
  color: rgba(var(--foreground-color), 0.6);
  font-size: 13px;
}
.popup_addto_collection .loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 13px;
  color: rgba(var(--foreground-color), 0.6);
}
.popup_addto_collection .loading-state .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--foreground-color), 0.2);
  border-top: 2px solid rgb(var(--primary-accent));
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.popup_export {
  background-color: rgba(255, 255, 255, 0.6);
  min-height: 64px;
  min-width: 180px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  position: absolute;
  top: 6px;
  left: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.popup_export .export-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 8px;
  background-color: rgb(var(--background-color));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  cursor: pointer;
  font-family: "Anonymous Pro", monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 0.7em;
}
.popup_export .export-button:hover {
  background-color: rgb(var(--primary-accent-darker));
  color: white;
}
.popup_export .export-button:hover svg path {
  stroke: white;
}
.popup_export .export-button svg {
  margin-right: 4px;
}
.popup_export .export-button svg path {
  stroke: rgba(var(--foreground-color), 0.8);
}

.collections-list-component {
  margin: 0;
}
.collections-list-component .collections-container {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.collections-list-component .collections-container .collection-item {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  font-size: 0.8em;
}
.collections-list-component .collections-container .collection-item .shown-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-main {
  flex-grow: 1;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-main h2 {
  font-family: var(--decoration-font);
  color: rgb(var(--primary-accent));
  margin-bottom: 8px;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-main p.description {
  margin: 0;
  color: rgba(var(--foreground-color), 0.6);
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-main .collection-tags {
  margin: 8px 0 0;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-main .collection-tags .tag {
  background-color: rgba(var(--secondary-accent), 0.6);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.7em;
  margin-right: 8px;
  display: inline-block;
  color: rgb(var(--background-color));
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-main .collection-tags .tag.mcq-count {
  background-color: rgba(var(--primary-accent), 0.2);
  color: rgb(var(--primary-accent));
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta {
  width: 240px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .date {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
  margin-right: 8px;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons {
  margin: 0 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 8px;
  background-color: rgb(var(--background-color));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  cursor: pointer;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .toggle-btn .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  transform: rotate(270deg);
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .toggle-btn .icon-container.expanded {
  transform: rotate(90deg);
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .export-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 8px;
  background-color: rgb(var(--background-color));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  cursor: pointer;
  font-family: "Anonymous Pro", monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 0.7em;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .export-button:hover {
  background-color: rgb(var(--primary-accent-darker));
  color: white;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .export-button:hover svg path {
  stroke: white;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .export-button svg {
  margin-right: 4px;
}
.collections-list-component .collections-container .collection-item .shown-item .shown-item-meta .buttons .export-button svg path {
  stroke: rgba(var(--foreground-color), 0.8);
}
.collections-list-component .collections-container .collection-item .hidden-item {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}
.collections-list-component .collections-container .collection-item .hidden-item.expanded {
  max-height: 1600px; /* Large enough to accommodate content */
  opacity: 1;
  padding: 0;
  border-top: 1px dashed rgb(var(--border-color));
  transition: max-height 0.3s ease-in, opacity 0.2s ease-in;
  overflow-y: auto;
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes {
  margin: 0;
  width: 100%;
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .loader {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--foreground-color), 0.6);
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .vignette-item {
  padding: 8px 16px;
  border-top: 1px dashed rgb(var(--border-color));
  cursor: pointer;
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .vignette-item:hover {
  background-color: rgba(var(--primary-accent), 0.1);
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .vignette-item .vignette-item-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: rgba(var(--foreground-color), 0.8);
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .vignette-item .vignette-item-header span {
  margin-left: 8px;
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .vignette-item .vignette-item-header span:first-child {
  flex-grow: 1;
  margin-left: unset;
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .vignette-item .vignette-item-body {
  margin: 12px 0;
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .vignette-item .vignette-item-body strong {
  color: rgb(var(--primary-accent));
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}
.collections-list-component .collections-container .collection-item .hidden-item .collection-vignettes .empty-state h3 {
  color: rgba(var(--foreground-color), 0.8);
  margin: 0 0 8px 0;
}
.collections-list-component .collections-summary {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
}
.collections-list-component .collections-empty-state h2 {
  font-size: 1.2em;
  color: rgba(var(--status-color-warning), 1);
}
.collections-list-component .collections-empty-state p {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
  font-style: italic;
}

.collection-mcqs {
  width: 100%;
}

.agent-container {
  margin: 32px;
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.6);
}
.agent-container .premade-tasks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 12px 0 0;
}
.agent-container .premade-tasks button {
  background: none;
  border: none;
  border-radius: var(--rounded-corners);
  background-color: rgb(var(--primary-accent), 0.8);
  padding: 8px 12px;
  cursor: pointer;
  color: rgb(var(--background-color));
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  transition: all 0s ease !important;
}
.agent-container .premade-tasks button:hover {
  background-color: rgba(var(--secondary-accent), 0.8);
}
.agent-container .premade-tasks button:hover::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 1px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid rgba(var(--secondary-accent), 0.8);
  z-index: -1;
}
.agent-container .premade-tasks button::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 6px;
  width: 0;
  height: 0;
  border-top: 1px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid rgba(var(--primary-accent), 0.8);
  z-index: -1;
}
.agent-container .input-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  position: relative;
}
.agent-container .input-container input {
  padding: 16px 24px;
  border: 1px solid rgb(var(--border-color));
  background-color: rgba(var(--foreground-color), 0.8);
  border-radius: 24px;
  color: rgb(var(--background-color));
  padding-right: 42px;
}
.agent-container .input-container input::placeholder {
  color: rgba(var(--background-color), 0.4);
}
.agent-container .input-container input:focus {
  outline: none;
}
.agent-container .input-container .send-icon {
  position: absolute;
  right: 8px;
  top: 12px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Journal Outline Card Component Styles */
.outline-card {
  display: block;
  text-decoration: none;
  background: rgba(var(--background-color), 0.8);
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.outline-card:hover {
  border-color: rgb(var(--primary-accent));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.outline-card .card-header {
  margin-bottom: 1rem;
}
.outline-card .card-header .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(var(--foreground-color));
  margin: 0;
  line-height: 1.4;
}
.outline-card .card-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.outline-card .card-metadata .badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(var(--primary-accent), 0.1);
  color: rgb(var(--primary-accent));
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.outline-card .card-description {
  font-size: 0.9rem;
  color: rgba(var(--foreground-color), 0.7);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.outline-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--border-color));
}
.outline-card .card-footer .card-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(var(--foreground-color), 0.7);
}
.outline-card .card-footer .card-info svg {
  fill: rgba(var(--foreground-color), 0.7);
}

.generation-animation-container {
  padding: 8px 24px;
  min-height: 360px;
}
.generation-animation-container .generation-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--primary-accent), 0.1);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.18);
  border: 1px solid rgb(var(--border-color));
  border-radius: 20px;
  position: relative;
}
.generation-animation-container .generation-animation .ornament-1 {
  position: absolute;
  top: 32px;
  left: 32px;
}
.generation-animation-container .generation-animation .ornament-2 {
  position: absolute;
  bottom: 32px;
  right: 32px;
}
.generation-animation-container .generation-animation .hero {
  margin: 32px 0 8px;
}
.generation-animation-container .generation-animation .hero svg {
  animation: rotate 20s linear infinite;
}
.generation-animation-container .generation-animation .description {
  text-align: center;
  margin: 16px 0;
}
.generation-animation-container .generation-animation .description h2 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
  margin: 0;
  font-size: 1.4em;
}
.generation-animation-container .generation-animation .description p {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
  margin: 8px 0;
}
.generation-animation-container .generation-animation .loader-animation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 420px;
  margin: 16px 0 48px 0;
  position: relative;
}
.generation-animation-container .generation-animation .loader-animation .alternating-text {
  color: rgb(var(--background-color));
  font-family: var(--technical-font);
  width: 100%;
  text-align: center;
  position: absolute;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.generation-result.mcq-result {
  padding: 24px 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  position: relative;
}
.generation-result.mcq-result .hero {
  margin: 8px 0 8px;
}
.generation-result.mcq-result .description {
  text-align: center;
  margin: 16px 0;
}
.generation-result.mcq-result .description h2 {
  font-family: var(--decoration-font);
  color: rgb(var(--foreground-color));
  margin: 0;
  font-size: 1.4em;
}
.generation-result.mcq-result .description p {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.8);
  margin: 8px 0;
  max-width: 600px;
}
.generation-result.mcq-result .summary {
  width: 800px;
}
.generation-result.mcq-result .summary .summary-item {
  font-size: 0.8rem;
  margin: 4px 0;
  color: rgba(var(--foreground-color), 0.8);
}
.generation-result.mcq-result .summary .summary-item strong {
  color: rgba(var(--foreground-color), 0.6);
}
.generation-result.mcq-result .summary h3 {
  font-family: var(--decoration-font);
  font-size: 1.2rem;
  margin: 16px 0 8px;
  color: rgb(var(--secondary-accent));
}
.generation-result.mcq-result .summary h3 span {
  color: rgb(var(--foreground-color));
}
.generation-result.mcq-result .summary .more-info {
  text-align: center;
  color: rgba(var(--foreground-color), 0.6);
  font-style: italic;
  margin-top: 8px;
  font-size: 0.8rem;
}
.generation-result.mcq-result .actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin: 18px 0;
}
.generation-result.mcq-result .actions .view-list-button {
  background-color: rgb(var(--secondary-accent));
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: rgb(var(--background-color));
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border-radius: var(--rounded-corners);
  padding: 18px;
}
.generation-result.mcq-result .actions .view-list-button svg {
  margin-right: 8px;
}
.generation-result.mcq-result .actions .view-list-button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.generation-result.mcq-result .actions .view-list-button:hover svg {
  transform: translate(2px, -2px);
}
.generation-result.mcq-result .actions .export-button {
  background-color: rgb(var(--status-color-warning));
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: rgb(var(--background-color));
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: var(--rounded-corners);
  padding: 12px 18px;
  font-size: 0.9rem;
}
.generation-result.mcq-result .actions .export-button svg {
  margin-right: 8px;
  fill: rgb(var(--background-color));
}
.generation-result.mcq-result .actions .export-button:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  background-color: rgba(var(--status-color-warning), 0.9);
}
.generation-result.mcq-result .animation {
  position: absolute;
  width: 100%;
  top: 0;
  flex-grow: 1;
}
.generation-result.mcq-result .animation #lottie-canvas-mcq {
  width: 100%;
  height: 100%;
  display: block;
}

/* MCQ Collection Items Component Styles */
.mcq-collection-items {
  display: flex;
  flex-direction: column;
}
.mcq-collection-items .mcq-item {
  overflow: hidden;
  transition: all 0.3s ease;
}
.mcq-collection-items .mcq-item .mcq-item-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
}
.mcq-collection-items .mcq-item .mcq-item-header .mcq-item-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  font-size: 1.2em;
}
.mcq-collection-items .mcq-item .mcq-item-header .mcq-item-title .mcq-number {
  font-weight: 600;
  color: rgba(var(--foreground-color), 0.8);
}
.mcq-collection-items .mcq-item .mcq-item-header .mcq-item-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.mcq-collection-items .mcq-item .mcq-item-header .mcq-item-meta .mcq-expand-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rounded-corners);
  transition: all 0.3s ease;
}
.mcq-collection-items .mcq-item .mcq-item-header .mcq-item-meta .mcq-expand-btn:hover {
  background: rgba(var(--primary-accent), 0.1);
}
.mcq-collection-items .mcq-item .mcq-item-header .mcq-item-meta .mcq-expand-btn svg {
  width: 20px;
  height: 20px;
  fill: rgb(var(--primary-accent-darker));
  transform: rotate(-90deg);
  transition: transform 0.3s ease;
}
.mcq-collection-items .mcq-item .mcq-item-header .mcq-item-meta .mcq-expand-btn svg.rotated {
  transform: rotate(90deg);
}
.mcq-collection-items .mcq-item:nth-child(odd) .mcq-item-header {
  background: rgba(var(--primary-accent), 0.08);
}
.mcq-collection-items .mcq-item:nth-child(even) .mcq-item-header {
  background: rgba(var(--primary-accent), 0.16);
}
.mcq-collection-items .mcq-item .mcq-item-details {
  background: rgba(var(--background-color), 0.7);
  overflow: hidden;
  padding: 20px;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 8px;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .left, .mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .right {
  flex: 1;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .answer-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 8px;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .answer-box.correct {
  background: rgba(var(--status-color-success), 0.1);
  color: rgb(var(--status-color-success));
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .answer-box.correct svg {
  fill: currentColor;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .answer-box span {
  font-size: 1em;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .detractors-list {
  display: flex;
  flex-direction: column;
  background: rgba(var(--status-color-danger), 0.1);
  color: rgb(var(--status-color-danger));
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .explanation-text {
  padding: 16px 20px;
  background: rgba(var(--status-color-info), 0.05);
  border: 1px solid rgba(var(--status-color-info), 0.1);
  border-radius: var(--rounded-corners);
  font-size: 1em;
  line-height: 1.4em;
  color: rgba(var(--foreground-color), 0.9);
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .metadata-section {
  display: flex;
  flex-direction: column;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .metadata-section .metadata-section-item {
  display: flex;
  flex-direction: row;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .metadata-section .metadata-section-item .metadata-label {
  font-size: 0.9em;
  font-weight: 500;
  color: rgba(var(--foreground-color), 0.7);
  width: 120px;
}
.mcq-collection-items .mcq-item .mcq-item-details .mcq-item-details-columns .metadata-section .metadata-section-item .metadata-value {
  font-size: 0.9em;
  color: rgb(var(--foreground-color));
  word-break: break-all;
}
.mcq-collection-items .empty-state {
  text-align: center;
  padding: 48px 24px;
}
.mcq-collection-items .empty-state.empty-vignettes h2 {
  font-size: 1.3em;
  color: rgba(var(--foreground-color), 0.7);
  margin: 0 0 12px 0;
}
.mcq-collection-items .empty-state.empty-vignettes p {
  font-size: 1em;
  color: rgba(var(--foreground-color), 0.5);
  margin: 0;
  line-height: 1.4em;
}
.mcq-collection-items .error-message {
  padding: 16px 20px;
  background: rgba(var(--status-color-danger), 0.1);
  border: 1px solid rgba(var(--status-color-danger), 0.2);
  border-radius: var(--rounded-corners);
  color: rgb(var(--status-color-danger));
  text-align: center;
  font-size: 0.9em;
}

.creation-info-component {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgb(var(--border-color));
  width: 800px;
  padding: 24px 0;
}
.creation-info-component h3 {
  font-family: var(--decoration-font);
  font-size: 1.2rem;
  margin: 16px 0 8px;
  color: rgb(var(--secondary-accent));
}
.creation-info-component .creation-info {
  display: flex;
  flex-direction: row;
}
.creation-info-component .creation-info .cost-info {
  width: 30%;
  font-size: 0.8rem;
}
.creation-info-component .creation-info .cost-info span {
  font-weight: 500;
}
.creation-info-component .creation-info .cost-info p {
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}
.creation-info-component .creation-info .context-info {
  width: 70%;
  font-size: 0.8rem;
}
.creation-info-component .creation-info .context-info p {
  margin: 2px 0;
  padding: 0;
  font-weight: 500;
}
.creation-info-component .creation-info .context-info .context {
  font-size: 0.9em;
  color: rgba(var(--foreground-color), 0.8);
  white-space: pre-line;
}

.status-pill {
  border-radius: 16px;
  font-size: 0.6em;
  padding: 0 8px;
  border-width: 1px;
  border-style: solid;
}
.status-pill.APPROVED, .status-pill.ACTIVE {
  background-color: rgba(var(--status-color-success), 0.2);
  border-color: rgb(var(--status-color-success));
  color: rgba(var(--status-color-success), 0.8);
}
.status-pill.PENDING, .status-pill.INACTIVE {
  background-color: rgba(var(--status-color-warning), 0.2);
  border-color: rgb(var(--status-color-warning));
  color: rgba(var(--status-color-warning), 0.8);
}
.status-pill.ARCHIVED {
  background-color: rgba(var(--border-color), 0.2);
  border-color: rgb(var(--border-color));
  color: rgba(var(--border-color), 0.8);
}
.status-pill.INFORMATION {
  background-color: rgba(var(--status-color-info), 0.2);
  border-color: rgb(var(--status-color-info));
  color: rgba(var(--status-color-info), 0.8);
}

.generic-button {
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--rounded-corners);
  background-color: rgb(var(--primary-accent));
  border: none;
  color: rgb(var(--background-color));
}
.generic-button:hover {
  background-color: rgb(var(--primary-accent-darker));
}

.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 8px;
  background-color: rgb(var(--background-color));
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  cursor: pointer;
  font-family: "Anonymous Pro", monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 0.7em;
}
.action-button.side-panel {
  background-color: rgba(var(--primary-accent), 0.05);
}
.action-button.selected, .action-button:hover {
  color: rgb(var(--primary-accent));
  border: 1px solid rgb(var(--primary-accent));
  background-color: rgb(var(--primary-accent), 0.1);
}
.action-button.selected svg path, .action-button:hover svg path {
  fill: rgb(var(--primary-accent));
}
.action-button svg {
  margin-right: 4px;
}
.action-button svg path {
  fill: rgba(var(--foreground-color), 0.8);
}
.action-button .action-status {
  font-weight: 800;
  margin-left: 2px;
}

.ux-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: rgba(var(--primary-accent), 0.05);
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--rounded-corners);
  cursor: pointer;
}
.ux-button:hover {
  color: rgb(var(--primary-accent));
  border: 1px solid rgb(var(--primary-accent));
  background-color: rgb(var(--primary-accent), 0.1);
}
.ux-button:hover svg path {
  fill: rgb(var(--primary-accent));
}
.ux-button svg path {
  fill: rgba(var(--foreground-color), 0.8);
}
.ux-button.toggle.collapsed {
  rotate: 180deg;
}
.ux-button.close:hover {
  color: rgba(var(--status-color-warning), 0.8);
  background-color: rgb(var(--status-color-warning), 0.1);
  border: 1px solid rgba(var(--status-color-warning), 0.8);
}
.ux-button.close:hover svg path {
  fill: rgb(var(--status-color-warning));
}

.spinner-component {
  margin: 0;
  padding: 0;
  align-self: center;
  font-size: 0.8em;
}
.spinner-component .spinner-text {
  margin-right: 8px;
}
.spinner-component .spinner-icon {
  animation: rotate 2s linear infinite;
}
.spinner-component .spinner-icon .path {
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.loading-bar-component {
  margin: 0;
  max-width: 600px;
}
.loading-bar-component .loading-bar {
  position: relative;
  width: 400px;
  height: 24px;
  background: linear-gradient(to right, rgba(var(--primary-accent), 0.1), rgba(var(--primary-accent), 0.2) 50%, rgba(var(--primary-accent), 0.1));
  border-radius: var(--rounded-corners);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-bar-component .loading-bar .loading-animation {
  position: absolute;
  width: 150%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(var(--primary-accent), 0.6) 8px, rgba(var(--primary-accent), 0.6) 16px);
  animation: loadingAnimation 1.8s infinite linear;
}

@keyframes loadingAnimation {
  0% {
    transform: translateX(-22.6px);
  }
  100% {
    transform: translateX(0px);
  }
}
button.generate-button-component {
  width: 360px;
  padding: 20px 24px;
  font-size: 1.1em;
  background: linear-gradient(90deg, rgb(var(--primary-accent)) 0%, rgb(83, 0, 89) 100%);
  color: rgb(var(--background-color));
  border: none;
  border-radius: var(--rounded-corners);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: var(--box-shadow);
}
button.generate-button-component:disabled {
  background: linear-gradient(90deg, rgba(var(--border-color), 0.8) 0%, rgb(var(--border-color)) 100%);
  cursor: not-allowed;
  box-shadow: none;
}
button.generate-button-component span {
  margin-left: 8px;
}
button.generate-button-component:not(:disabled):hover {
  background-color: rgb(var(--primary-accent-darker));
}
button.generate-button-component:hover {
  box-shadow: var(--box-shadow-hover);
}
button.generate-button-component:hover img {
  transform: rotate(-90deg);
}

.stat-card {
  border-radius: var(--border-radius);
  width: 200px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.stat-card .stat-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: var(--decoration-font);
}
.stat-card .stat-number {
  font-size: 2em;
  font-weight: bold;
  color: rgb(var(--primary-accent));
  margin: 12px 0 18px 0;
}
.stat-card .stat-additional {
  font-size: 0.8em;
  color: rgba(var(--foreground-color), 0.7);
}

.no_results_component .no-results-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  min-height: 300px;
}
.no_results_component .no-results-animation {
  margin-bottom: 24px;
}
.no_results_component .no-results-animation .animation-placeholder {
  width: 120px;
  height: 120px;
  background: rgba(var(--foreground-color), 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.no_results_component .no-results-animation .animation-placeholder::after {
  content: "🔍";
  font-size: 48px;
  opacity: 0.3;
}
.no_results_component .no-results-content {
  max-width: 400px;
}
.no_results_component .no-results-icon {
  margin-bottom: 20px;
  color: rgba(var(--foreground-color), 0.4);
}
.no_results_component .no-results-icon svg {
  width: 48px;
  height: 48px;
}
.no_results_component .no-results-title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(var(--foreground-color), 0.8);
  margin: 0 0 12px 0;
  line-height: 1.4;
}
.no_results_component .no-results-subtitle {
  font-size: 14px;
  color: rgba(var(--foreground-color), 0.6);
  margin: 0;
  line-height: 1.5;
}
.no_results_component[data-type=search] .no-results-icon svg {
  color: rgba(var(--primary-color), 0.6);
}
.no_results_component[data-type=filter] .no-results-icon svg {
  color: rgba(var(--secondary-color), 0.6);
}
.no_results_component[data-type=empty] .no-results-icon svg {
  color: rgba(var(--accent-color), 0.6);
}
@media (max-width: 768px) {
  .no_results_component .no-results-container {
    padding: 40px 16px;
    min-height: 250px;
  }
  .no_results_component .no-results-title {
    font-size: 16px;
  }
  .no_results_component .no-results-subtitle {
    font-size: 13px;
  }
  .no_results_component .no-results-icon svg {
    width: 40px;
    height: 40px;
  }
}

.dropdown {
  width: 360px;
  height: 42px;
  color: rgb(var(--background-color));
  background-color: rgba(var(--foreground-color), 0.2);
  background: linear-gradient(90deg, rgb(var(--status-color-warning)) 0%, rgb(var(--status-color-danger)) 100%);
  border-radius: var(--rounded-corners);
  border: none;
  box-shadow: var(--box-shadow);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
}
.dropdown.has-selected {
  background: linear-gradient(90deg, rgba(var(--primary-accent), 0.9) 0%, rgba(var(--secondary-accent), 0.8) 100%);
}
.dropdown:hover {
  box-shadow: var(--box-shadow-hover);
}
.dropdown:hover .selected-item svg {
  transform: rotate(0deg);
}
.dropdown .selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s ease;
}
.dropdown .selected-item svg {
  margin-right: 8px;
  transform: rotate(-90deg);
}
.dropdown .selected-item .selected-item-text {
  margin: 8px 16px;
  font-size: 0.8em;
  line-height: 1.1em;
}
.dropdown .dropdown-menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 120%;
  left: 0;
  width: 120%;
  background-color: rgba(var(--foreground-color), 0.9);
  border-radius: var(--rounded-corners);
  box-shadow: var(--box-shadow);
  z-index: 1000;
  max-height: 240px;
  overflow-y: auto;
}
.dropdown .dropdown-menu .dropdown-item {
  margin: 2px;
  padding: 8px 16px;
  cursor: pointer;
  color: rgb(var(--background-color));
  font-size: 0.8em;
  line-height: 1.1em;
}
.dropdown .dropdown-menu .dropdown-item span {
  font-weight: 500;
}
.dropdown .dropdown-menu .dropdown-item p {
  margin: 2px 0 0 0;
  font-size: 0.8em;
  color: rgba(var(--background-color), 0.6);
  line-height: 1em;
}
.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: rgba(var(--primary-accent), 0.4);
}
.dropdown .dropdown-menu .dropdown-item.selected {
  background-color: rgba(var(--primary-accent), 0.8);
}
.dropdown .dropdown-error-message {
  display: none; /* Initially hidden, shown when there's an error */
  position: absolute;
  z-index: 1001;
  background-color: rgba(var(--status-color-warning), 0.8);
  font-size: 0.8em;
  bottom: -42px;
  right: 0;
  padding: 8px 12px;
  color: black;
  border-radius: var(--rounded-corners);
}

.tabular-data-component {
  font-size: 0.9em;
}
.tabular-data-component .tabular-data-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}
.tabular-data-component .tabular-data-table thead tr {
  border-bottom: 2px solid rgb(var(--border-color));
}
.tabular-data-component .tabular-data-table thead th {
  padding: 1.2em;
  text-align: left;
  font-weight: 600;
  font-size: 0.9em;
  font-style: italic;
  letter-spacing: 0.02em;
}
.tabular-data-component .tabular-data-table thead th:first-child {
  width: 40%;
}
.tabular-data-component .tabular-data-table tbody tr {
  border-bottom: 1px solid rgb(var(--border-color));
  transition: background-color 0.2s ease;
}
.tabular-data-component .tabular-data-table tbody tr:hover {
  background-color: rgba(var(--primary-accent), 0.2);
}
.tabular-data-component .tabular-data-table tbody tr:last-child {
  border-bottom: none;
}
.tabular-data-component .tabular-data-table tbody td {
  padding: 0.75rem 1rem;
}
.tabular-data-component .tabular-data-table tbody td.data-key {
  font-weight: 500;
}
.tabular-data-component .tabular-data-table tbody td.data-value {
  font-family: var(--technical-font);
}
.tabular-data-component:empty {
  display: none;
}