.app-header {
  position: fixed
}
.app-container {
  position: relative;
  display: flex;
  height: calc(100vh - 110px)
}
.agent-room-container {
  position: relative;
  top: 110px;
  height: calc(100vh - 110px);
  left: -100%;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff
}
.agent-room-history-panel {
  position: absolute;
  left: -33.33%;
  width: 33.33%;
  background-color: #f0f0f0;
  transition: left .3s ease-in-out;
  z-index: 10;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto
}
.agent-room-history-panel.visible {
  left: 0
}
.agent-room-main {
  font-family: Sen,sans-serif;
  color: var(--text-color);
  background-color: #f8f9fa;
  display: flex;
  flex: 1;
  overflow: hidden;
  padding-top: 20px
}
.page-content {
  padding: 20px;
  top: 80px;
  position: relative;
  overflow-y: scroll;
  width: 100%
}
.agent-room-interaction-panel {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: hidden;
  transition: width .3s;
  width: 100%;
  position: relative
}
.agent-room-chat-interface {
  height: calc(100vh - 250px);
  overflow: hidden
}
.agent-room-chat-interface.compact {
  height: calc(100vh - 200px)
}
#agent-room-chat-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: calc(89vh - 266px)
}
#agent-room-chat-messages.compact {
  height: calc(89vh - 216px)
}
.agent-room-container.visible {
  left: 0
}
.agent-room-container.compact {
  position: relative;
  left: 0;
  width: 33.333%
}
.agent-room-workspace-panel {
  width: 0;
  padding: 0;
  overflow-y: hidden;
  transition: width .3s
}
.agent-room-workspace-panel.expanded {
  width: 33.333%;
  padding: 1rem
}
.agent-room-interaction-panel.workspace-expanded {
  width: 66.666%
}
.chat-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center
}
.workspace-hover-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  z-index: 5
}
.mode-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
  z-index: 1001
}
.close-panel,
.mode-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: transform .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.agent-room-toggle-workspace {
  float: right
}
.chat-toggle:hover,
.close-panel:hover,
.mode-toggle:hover {
  transform: scale(1.1)
}
.chat-toggle.hidden {
  display: none
}
.agent-room-manifest-icon {
  cursor: pointer;
  color: var(--primary-color)
}
.agent-room-placeholder {
  color: #718096;
  font-style: italic
}
.agent-room-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,.4)
}
.agent-room-modal-content {
  background-color: var(--background-color);
  margin: 5% auto;
  padding: 30px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  border-radius: 8px;
  max-height: 80vh;
  overflow-y: auto
}
.agent-room-modal-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--primary-color)
}
.agent-room-modal-actions {
  margin-top: 20px;
  text-align: right
}
.agent-room-modal-actions button {
  margin-left: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--background-color)
}
.agent-room-modal-actions button:hover {
  background-color: var(--secondary-color)
}
.agent-room-tree-view {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  max-height: 70vh;
  overflow-y: auto
}
.agent-room-tree-view-list {
  list-style-type: none;
  padding-left: 20px
}
.agent-room-tree-view-item {
  cursor: pointer;
  display: block;
  padding: 2px 0
}
.agent-room-tree-view-item.expandable {
  position: relative
}
.agent-room-expand-icon {
  display: inline-block;
  width: 20px;
  text-align: center;
  transition: transform .2s
}
.agent-room-inner-main {
  padding-top: 0!important
}
.agent-room-chat-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  z-index: 1000;
  transition: transform .2s
}
.agent-room-chat-button:hover {
  transform: scale(1.1)
}
.agent-room-panel-close {
  position: absolute;
  top: 0;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform .2s
}
.agent-room-tree-view-item.expanded > .agent-room-expand-icon {
  transform: rotate(90deg)
}
.agent-room-tree-view-item.expandable > ul {
  display: none
}
.agent-room-tree-view-item.expanded > ul {
  display: block
}
.agent-room-audio-controls {
  display: flex;
  align-items: center;
  margin-left: .5rem
}
.agent-room-audio-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin-right: .5rem
}
.agent-room-record-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: .5rem
}
.agent-room-record-light-off {
  background-color: #ccc
}
.agent-room-record-light-on {
  background-color: #f44336
}
.ar-artifact-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: background-color .2s;
  position: relative
}
.ar-artifact-registration-status {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee
}
.ar-artifact-registration-status .ar-register-artifact-btn {
  margin-top: 0
}
.ar-artifact-registration-status .ar-registration-status {
  margin-bottom: 0
}
.ar-artifact-item:hover {
  background-color: #f5f5f5
}
.ar-artifact-icon {
  width: 40px;
  height: 40px;
  margin-right: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center
}
.ar-form-manifest-icon {
  background-image: url('/images/form-icon.svg')
}
.ar-artifact-info {
  flex-grow: 1
}
.ar-artifact-title {
  font-weight: 700;
  margin-bottom: 5px
}
.ar-artifact-type {
  font-size: .8em;
  color: #666
}
.ar-artifact-timestamp {
  font-size: .8em;
  color: #999
}
.ar-preview-btn {
  padding: 5px 10px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ar-preview-btn:hover {
  background-color: #45a049
}
.ar-preview-header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee
}
.ar-back-btn {
  margin-right: 15px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ar-back-btn:hover {
  background-color: #e0e0e0
}
.ar-form-preview-container {
  padding: 20px
}
.ar-artifact-container {
  position: relative;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f9fa;
  cursor: pointer;
  transition: background-color .2s;
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px;
  overflow-y: scroll
}
.ar-artifact-container.ar-status-failed {
  background-color: #ffebee;
  border-color: #ef9a9a
}
.ar-artifact-container.ar-status-processed {
  background-color: #e8f5e9;
  border-color: #a5d6a7
}
.ar-artifact-container.ar-action-complete {
  border-left: 4px solid #4caf50
}
.ar-artifact-container.ar-action-failed {
  border-left: 4px solid #f44336
}
.ar-artifact-container:hover {
  background: #f0f0f0
}
.agent-room-chat-message {
  margin: 8px;
  line-height: 1.5;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
}
.back-to-artifacts {
  padding: 5px 10px;
  margin-right: 10px;
  background: 0 0;
  border: none;
  cursor: pointer;
  color: #007bff
}
.back-to-artifacts:hover {
  color: #0056b3;
  text-decoration: underline
}
.ar-artifact-list {
  padding: 15px
}
.ar-artifact-entry {
  position: relative;
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .2s
}
.ar-artifact-entry:hover {
  background-color: #f5f5f5
}
.ar-artifact-entry-title {
  font-weight: 700;
  margin-bottom: 4px
}
.ar-artifact-entry-registration {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee
}
.artifact-registration {
  position: relative;
  z-index: 1
}
.artifact-registration button {
  pointer-events: auto
}
.ar-artifact-entry-type {
  font-size: .9em;
  color: #666
}
.history-content {
  margin-top: 20px
}
.history-entry {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  cursor: pointer
}
.history-entry:hover {
  background-color: #e0e0e0
}
.history-entry.current-chat {
  background-color: #d0e0ff;
  font-weight: 700
}
.history-entry.current-chat:hover {
  background-color: #c0d0ff
}
.chat-date {
  font-size: .8em;
  color: #666;
  margin-top: 5px
}
.agent-room-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem
}
.agent-room-select {
  margin-left: 1rem;
  padding: .5rem;
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: var(--background-color);
  min-width: 300px;
  width: auto
}
.agent-room-chat-message {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  max-width: 80%
}
.agent-room-user-message {
  background-color: var(--primary-color);
  color: var(--background-color);
  align-self: flex-end
}
.agent-room-agent-message {
  background-color: #f8f9fa;
  color: var(--text-color);
  align-self: flex-start
}
.agent-room-user-input-area {
  display: flex;
  padding: 1rem;
  background-color: #f0f4f8;
  border-top: 1px solid #d1d5db
}
.agent-room-user-input {
  flex-grow: 1;
  resize: none;
  padding: .5rem;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem
}
.agent-room-submit-btn {
  width: auto;
  margin-left: .5rem;
  padding: .5rem 1rem;
  background-color: var(--primary-color);
  color: var(--background-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .3s
}
.agent-room-submit-btn:hover {
  background-color: var(--secondary-color)
}
.ar-artifacts-header {
  padding: 15px;
  border-bottom: 1px solid #eee
}
.ar-artifact-registration {
  padding: 10px;
  margin-top: 10px;
  border-top: 1px solid #eee
}
.ar-register-artifact-btn {
  background-color: #4caf50;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px
}
.ar-register-artifact-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed
}
.ar-registration-status {
  margin-bottom: 8px;
  color: #666
}
.ar-artifact-registration.registered .ar-registration-status {
  color: #4caf50
}
.ar-artifact-status {
  padding: 8px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: .9em
}
.ar-artifact-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  margin: -8px -8px 8px;
  border-radius: 4px 4px 0 0
}
.ar-artifact-content {
  padding: 8px;
  background: #fff;
  border-radius: 0 0 4px 4px;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: .9em;
  line-height: 1.4
}
.ar-artifact-content.hidden {
  display: none
}
.ar-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.ar-preview-registration {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #eee
}
.artifact-action-btn {
  background: #2196f3;
  margin: 8px 16px 8px 0
}
.artifact-action-btn:hover {
  background: #1976d2
}
.artifact-action-btn:active {
  background: #1565c0
}
.ar-artifact-container.success {
  background-color: #e8f5e9
}
.ar-artifact-container.error {
  background-color: #ffebee
}
.ar-artifact-error-message {
  color: #d32f2f;
  padding: 8px;
  margin-top: 8px;
  font-size: .9em;
  border-top: 1px solid rgba(0,0,0,.1)
}
.agent-menu {
  min-width: 300px;
  width: max-content;
  max-width: 500px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000
}
.agent-menu.expanded {
  display: block
}
.agent-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px;
  cursor: pointer
}
.agent-select-container {
  position: relative
}
.agent-select-button {
  width: 100%;
  padding: 8px;
  text-align: left;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer
}
.section-header {
  padding: 8px;
  font-weight: 700;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc
}
.agent-item:hover {
  background: #f0f0f0
}
.agent-item.selected {
  background: #e0e0e0
}
.agent-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}
.edit-agent-btn {
  background: 0 0;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .2s,background-color .2s
}
.agent-item:hover .edit-agent-btn {
  opacity: 1
}
.edit-agent-btn:hover {
  background-color: rgba(0,0,0,.1);
  color: #333
}
.agent-item.create-agent {
  color: #2196f3;
  font-weight: 700;
  border-top: 1px solid #eee;
  margin-top: 8px
}
.agent-item.create-agent:hover {
  background: #e3f2fd
}
.agent-room-new-chat-btn {
  background-color: var(--primary-color);
  color: var(--background-color);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s,transform .1s
}
.agent-room-new-chat-btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-1px)
}
.agent-room-new-chat-btn:active {
  transform: translateY(0)
}
.route-change-modal-overlay {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.4)
}
.route-change-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 400px;
  border-radius: 8px
}
.route-change-modal-body {
  text-align: center;
  margin: 20px 0
}
.route-change-modal-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px
}
.model-browser-content {
  width: 600px;
  height: auto;
  min-height: 400px
}
.model-browser-search {
  padding: 15px;
  border-bottom: 1px solid #eee
}
#modelSearchInput {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px
}
#modelSearchInput:focus {
  outline: 0;
  border-color: #2196f3;
  box-shadow: 0 0 0 2px rgba(33,150,243,.1)
}
.model-tiles-container {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 15px;
  margin: 20px;
  max-height: 400px;
  overflow-y: auto
}
.model-tile {
  padding: 15px;
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 8px;
  transition: .2s
}
.model-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  background: #f8f9fa
}
.model-tile.selected {
  background: #e3f2fd;
  border: 2px solid #2196f3
}
.model-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.model-name {
  font-weight: 500;
  font-size: 1.1em
}
.model-provider {
  color: #666;
  font-size: .9em
}
.model-tile-details {
  font-size: .9em;
  color: #666;
  line-height: 1.4
}
.model-pricing {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee;
  font-family: monospace
}
.modal-content {
  height: 720px
}
.create-agent-layers {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc(100% - 40px);
  margin: 0 auto
}
.creation-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  width: calc(100% - 40px);
  margin: 0 auto
}
.button-group {
  display: flex;
  gap: 20px
}
.name-section {
  flex: 1;
  max-width: 300px;
  position: relative
}
.name-input {
  width: 100%
}
.name-input input {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
  transition: border-color .2s,box-shadow .2s
}
.name-input input:hover {
  border-color: #b3b3b3
}
.name-input input:focus {
  outline: 0;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,.1)
}
#duplicateSelection {
  position: absolute;
  width: 100%;
  bottom: 100%;
  margin-bottom: 10px
}
.main-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  height: 300px
}
.creation-btn {
  flex: 1;
  padding: 15px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: .2s
}
.creation-btn:hover {
  background: #f0f0f0
}
.creation-btn.selected {
  background: #007bff;
  color: #fff;
  border-color: #0056b3
}
.prompts-actions-container {
  display: flex;
  align-items: flex-start;
  width: 100%
}
.prompts-container {
  display: flex;
  gap: 20px;
  flex: 1
}
.prompt-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px
}
.prompt-select-container {
  position: relative
}
.prompt-select-btn {
  width: 100%;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer
}
.prompt-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000
}
.prompt-menu.expanded {
  display: block
}
.prompt-item {
  padding: 8px;
  cursor: pointer
}
.prompt-item:hover {
  background: #f0f0f0
}
.selected-prompt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 8px
}
.remove-prompt {
  border: none;
  background: 0 0;
  color: #dc3545;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px
}
.remove-prompt:hover {
  color: #bd2130
}
.prompt-preview,
.subprompt-preview {
  min-height: 150px;
  max-height: 300px;
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-y: auto
}
.prompt-tile {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 8px
}
#createAgentModal .prompt-tile[title] {
  position: relative;
  transition-delay: 0s!important
}
.prompt-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-bottom: 1px solid #ddd
}
.expand-prompt {
  border: none;
  background: 0 0;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px
}
.prompt-tile-content {
  padding: 10px;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto
}
.prompt-tile-content.collapsed {
  display: none
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-left: 20px;
  align-self: flex-end
}
.primary-btn,
.secondary-btn {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500
}
.primary-btn {
  background: #007bff;
  color: #fff;
  border: none
}
.primary-btn:hover {
  background: #0056b3
}
.secondary-btn {
  background: #f8f9fa;
  border: 1px solid #ddd
}
.secondary-btn:hover {
  background: #e9ecef
}
.creation-step {
  margin-bottom: 20px
}
.creation-option {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer
}
.creation-option:hover {
  background: #e9ecef
}
.prompt-preview {
  margin-top: 10px;
  padding: 10px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  min-height: 100px
}
.subprompt-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 10px 0
}
.modal-navigation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between
}
#addSubPrompt {
  margin-top: 10px;
  padding: 5px 10px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
#addSubPrompt:hover {
  background: #218838
}
.form-group h3 {
  margin-bottom: 15px;
  color: #333
}
.form-group input[type=text],
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px
}
.ar-tabs-container {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #ddd
}
.ar-tab {
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent
}
.ar-tab:hover {
  background: #f5f5f5
}
.ar-tab.active {
  border-bottom: 2px solid #2196f3;
  color: #2196f3
}
.workspace-tabs {
  display: flex;
  margin-top: 10px;
  border-bottom: 1px solid #ddd
}
.workspace-tab {
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent
}
.workspace-tab:hover {
  background: #f5f5f5
}
.workspace-tab.active {
  border-bottom: 2px solid #2196f3;
  color: #2196f3
}
#auto-rendered-apps {
  display: none;
  position: absolute;
  visibility: hidden
}
.auto-rendered-app {
  display: none
}
.apps-list {
  padding: 20px
}
.app-entry {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: .2s
}
.app-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.1)
}
.app-entry-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px
}
.app-icon {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px
}
.form-icon {
  background-color: #e3f2fd;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%232196F3" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><path fill="%232196F3" d="M7 7h10v2H7zm0 4h10v2H7zm0 4h7v2H7z"/></svg>')
}
.app-title {
  font-size: 16px;
  font-weight: 500;
  color: #333
}
.app-description {
  color: #666;
  font-size: 14px;
  margin-left: 44px
}
.app-resource-title {
  color: #2196f3;
  font-size: 14px;
  margin-top: 8px;
  margin-left: 44px
}
.file-tree-controls {
  padding: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px
}
.collapse-all-btn,
.deselect-all-btn,
.hide-empty-btn,
.show-selected-btn {
  padding: 6px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  margin-right: 8px
}
.collapse-all-btn:hover,
.deselect-all-btn:hover,
.hide-empty-btn:hover,
.show-selected-btn:hover {
  background: #e9e9e9
}
.show-selected-btn.active {
  background: #e3f2fd;
  border-color: #2196f3;
  color: #2196f3
}
.hide-empty-btn {
  padding: 6px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  margin-left: 8px
}
.folder.hidden-empty {
  display: none
}
.directory-tree {
  font-family: monospace;
  padding: 10px
}
.directory-tree ul {
  list-style: none;
  padding-left: 20px;
  margin: 0
}
.directory-tree li {
  padding: 2px 0
}
.directory-tree .folder {
  cursor: pointer;
  color: #333
}
.directory-tree .folder:hover {
  background: #f5f5f5
}
.directory-tree .folder.collapsed > ul {
  display: none
}
.document-view-container {
  position: relative;
  height: 100%;
  padding: 20px
}
.document-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,.8);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 24px;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.dashboard-artifact-actions {
  position: absolute;
  top: 5px;
  right: 20px;
  z-index: 1;
  text-align: right
}
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999
}
.spinner {
  border-top: 5px solid var(--primary-color)
}
.loading-text {
  margin-top: 20px;
  color: var(--primary-color);
  font-size: 18px
}
.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
  margin-top: 1.5em;
  margin-bottom: .5em
}
.markdown-content p {
  margin: 1em 0
}
.markdown-content ol,
.markdown-content ul {
  margin: 1em 0;
  padding-left: 2em
}
.markdown-content code {
  background: #f4f4f4;
  padding: .2em .4em;
  border-radius: 3px
}
.markdown-content pre {
  background: #f4f4f4;
  padding: 1em;
  overflow-x: auto
}
.ar-markdown-preview-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column
}
.markdown-content {
  padding: 20px;
  line-height: 1.6;
  font-family: system-ui,-apple-system,sans-serif;
  flex: 1;
  overflow-y: auto
}
.artifact-action-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .2s,transform .1s;
  min-width: 120px
}
.artifact-action-btn:hover:not(:disabled) {
  background-color: #0056b3;
  transform: translateY(-1px)
}
.artifact-action-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none
}
.agent-select-control {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px
}
.agent-display {
  display: flex;
  align-items: center;
  flex: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color .2s
}
.agent-display:hover {
  background-color: #f0f0f0
}
.agent-name {
  flex: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.closed-menu-edit {
  padding: 6px 10px;
  background: 0 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
  transition: .2s;
  opacity: 1
}
.closed-menu-edit:hover {
  background: rgba(0,0,0,.1);
  color: #333
}
.analytics-tabs {
  display: flex;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 15px
}
.analytics-tab {
  padding: 10px 20px;
  background: 0 0;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 500;
  color: #495057;
  transition: .2s
}
.analytics-tab:hover {
  color: var(--primary-color)
}
.analytics-tab.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color)
}
.tab-section {
  display: none
}
.tab-section.active {
  display: block
}
.analytics-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px
}
.select-group {
  display: flex;
  align-items: center;
  min-width: 250px
}
.analytics-select {
  margin-left: 10px;
  min-width: 200px;
  flex-grow: 1
}
.datasource-override h2 {
  font-size: .9em;
  color: #666
}
.datasource-override select {
  border-color: #aaa;
  background-color: #f9f9f9
}
.save-button {
  margin-left: 10px;
  padding: 6px 12px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color .3s
}
.save-button:hover {
  background-color: var(--secondary-color)
}
.save-button:disabled {
  background-color: #ccc;
  cursor: not-allowed
}
.success-message {
  background-color: #d4edda;
  color: #155724;
  padding: 15px;
  border-radius: 5px;
  margin: 20px auto;
  text-align: center;
  font-size: 16px;
  max-width: 90%;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.datasource-view-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  margin: 20px 0
}
.datasource-header {
  margin-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px
}
.datasource-header h2 {
  margin: 0 0 10px;
  color: var(--primary-color)
}
.datasource-description {
  color: #666;
  margin: 0
}
.source-visualization-container {
  display: flex;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  overflow: hidden
}
.source-lanes-pane {
  flex: 7;
  padding: 15px;
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  max-height: 400px;
  overflow-y: auto
}
.source-controls-pane {
  flex: 3;
  padding: 15px;
  background-color: #fff
}
.source-label {
  flex: 0 0 150px;
  font-weight: 700;
  padding: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  margin-right: 10px
}
.source-columns {
  display: flex;
  overflow-x: auto;
  padding-bottom: 5px
}
.source-column {
  flex: 0 0 120px;
  padding: 8px;
  margin-right: 5px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  transition: .2s
}
.joined-column {
  border-width: 2px;
  border-style: solid
}
.source-lane {
  display: flex;
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 10px;
  cursor: pointer;
  transition: background-color .2s
}
.source-lane:hover {
  background-color: #f1f1f1
}
.selected-lane {
  background-color: #e9f5ff;
  border-left: 3px solid #4fc3f7;
  padding-left: 10px
}
.source-column:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index: 10
}
.data-definition-status,
.join-legend {
  padding: 10px;
  margin-bottom: 15px
}
.data-definition-status h3,
.join-legend h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: var(--primary-color)
}
.data-definition-status p {
  margin: 0;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px
}
.status-present {
  background-color: #d4edda;
  color: #155724
}
.status-missing {
  background-color: #f8d7da;
  color: #721c24
}
.missing-definition-message {
  padding: 20px;
  margin: 20px;
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 4px;
  text-align: center;
  font-size: 16px
}
.missing-definition-message i {
  margin-right: 8px
}
.no-fields-message {
  padding: 10px;
  background-color: #fff3cd;
  color: #856404;
  border-radius: 4px;
  text-align: center;
  font-style: italic
}
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px
}
.color-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 3px;
  margin-right: 10px
}
.selection-instructions {
  padding: 10px;
  margin-bottom: 15px;
  background-color: #f8f9fa;
  border-radius: 4px
}
.selection-instructions h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--primary-color)
}
.selection-instructions p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4
}
.active-join-type {
  font-weight: 700
}
.datasource-data-preview {
  background-color: #f8f9fa;
  border-radius: 4px;
  padding: 15px
}
.datasource-data-preview h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--primary-color)
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}
.data-table th {
  background-color: #e9ecef;
  padding: 10px;
  text-align: left;
  font-weight: 700;
  border: 1px solid #dee2e6
}
.data-table td {
  padding: 8px 10px;
  border: 1px solid #dee2e6
}
.data-table tr:nth-child(2n) {
  background-color: #f2f2f2
}
.row-count-info {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  text-align: right
}
.error-message,
.info-message {
  padding: 10px;
  border-radius: 4px;
  text-align: center
}
.info-message {
  background-color: #e7f3fe;
  color: #06c
}
.error-message {
  margin: 20px auto;
  max-width: 90%;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.ar-debug-container {
  padding: 20px
}
#chatSelect {
  padding: 8px;
  min-width: 300px
}
.chat-details {
  margin-top: 20px;
  background: #f5f5f5;
  padding: 20px;
  border-radius: 4px
}
.chat-timeline {
  font-family: monospace
}
.message-group {
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px
}
.system-prompt {
  color: #666;
  background: #eee;
  padding: 10px;
  margin: 10px 0;
  border-left: 3px solid #999;
  font-size: .9em
}
.prompt-toggle {
  cursor: pointer;
  color: #00f;
  text-decoration: underline
}
.message {
  margin: 10px 0;
  padding: 5px 0
}
.user-message {
  color: #2196f3
}
.agent-message {
  color: #4caf50
}
.timestamp {
  color: #999;
  font-size: .8em
}
.llm-request-btn {
  float: right;
  padding: 2px 8px;
  margin: 2px;
  font-size: .8em;
  cursor: pointer
}
.llm-request-view {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
  white-space: pre-wrap;
  font-family: monospace
}
.login-container,
.register-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1)
}
.login-container h2,
.register-container h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 30px;
  text-align: center
}
.form-group label {
  color: var(--text-color);
  font-size: 1rem
}
.form-group input {
  border: 2px solid var(--primary-color);
  font-size: 1rem;
  transition: border-color .3s,box-shadow .3s
}
.form-group input:focus {
  outline: 0;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(0,194,255,.2)
}
#backToLogin,
#loginForm button,
#registerForm button,
#sendSmsButton,
#switchToAuthenticatorButton,
#switchToSmsButton,
#verifyQrButton,
#verifySmsButton {
  width: 100%;
  background: var(--gradient);
  color: var(--background-color);
  padding: 12px 15px;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .3s,transform .3s
}
#loginForm button:hover,
#registerForm button:hover,
#sendSms:hover,
#sendSmsButton:hover,
#setupMfa:hover,
#skipMfa:hover,
#switchToAuthenticatorButton:hover,
#switchToSmsButton:hover,
#verifyAuthenticator:hover,
#verifyQrButton:hover,
#verifySms:hover,
#verifySmsButton:hover {
  opacity: .9;
  transform: translateY(-2px)
}
#mfaContainer {
  margin-top: 30px
}
#mfaContainer h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 20px
}
#authenticatorAppContainer,
#qrContainer,
#smsContainer,
#verificationContainer {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 25px;
  border: 2px solid var(--primary-color);
  box-shadow: 0 4px 6px rgba(0,0,0,.1)
}
#smsMessage {
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 20px
}
#authenticatorCode,
#qrToken,
#smsCode {
  width: calc(100% - 30px);
  padding: 12px 15px;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  font-size: 1rem;
  margin-bottom: 20px;
  transition: border-color .3s,box-shadow .3s
}
#authenticatorCode:focus,
#qrToken:focus,
#smsCode:focus {
  outline: 0;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(0,194,255,.2)
}
#qrCode {
  display: block;
  margin: 25px auto;
  max-width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1)
}
#sendSms,
#setupMfa,
#skipMfa,
#verifyAuthenticator,
#verifySms {
  width: 100%;
  background: var(--gradient);
  color: var(--background-color);
  padding: 12px 15px;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .3s,transform .3s;
  margin-bottom: 10px
}
#switchToAuthenticatorButton,
#switchToSmsButton {
  width: 100%;
  background: var(--gradient);
  color: var(--background-color);
  padding: 12px 15px;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .3s,transform .3s;
  margin-top: 10px
}
.g-recaptcha {
  margin-bottom: 25px
}
@media (max-width:768px) {
  nav {
    flex-direction: column;
    align-items: flex-start
  }
  nav ul {
    flex-direction: column;
    width: 100%;
    margin-top: 1rem
  }
  nav ul li {
    margin-left: 0;
    margin-bottom: .5rem
  }
  .nav-cta,
  .nav-login {
    width: 100%;
    margin-top: .5rem
  }
  .footer-content {
    flex-direction: column;
    text-align: center
  }
  .footer-links ul {
    flex-direction: column;
    margin-top: 1rem
  }
  .footer-links ul li {
    margin-right: 0;
    margin-bottom: .5rem
  }
  .footer-social {
    margin-top: 1rem
  }
}
@media (max-width:480px) {
  .login-container,
  .register-container {
    padding: 30px 20px
  }
  .login-container h2,
  .register-container h2 {
    font-size: 2rem
  }
  #loginForm button,
  #registerForm button,
  #sendSmsButton,
  #switchToAuthenticatorButton,
  #switchToSmsButton,
  #verifyQrButton,
  #verifySmsButton,
  .form-group input {
    font-size: 1rem
  }
  #mfaContainer h3 {
    font-size: 1.5rem
  }
}
.crm-container {
  font-family: Sen,sans-serif
}
.crm-view:not(.active) {
  display: none
}
#correlation-heatmap,
#parallel-coordinates,
#scatter-plot {
  margin-bottom: 20px;
  background-color: var(--background-color);
  border: 1px solid var(--primary-color);
  border-radius: 5px;
  padding: 10px
}
.dashboard-container {
  background-color: #f0f8ff;
  padding: 20px
}
.grid-stack-item-content {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  overflow-y: hidden!important
}
.app-button {
  background-color: var(--primary-color);
  color: var(--background-color);
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .3s
}
.app-button:hover {
  background-color: var(--secondary-color)
}
.analytics-header {
  background: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  max-width: 1200px;
  margin: 0 auto
}
.analytics-header h2 {
  color: #333
}
.analytics-controls {
  display: flex;
  gap: 20px;
  align-items: center
}
.select-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px
}
.select-group label {
  font-weight: 500;
  color: #333;
  min-width: 100px
}
.analytics-select {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 14px
}
.analytics-select:hover {
  border-color: #bbb
}
.split-view-container {
  display: flex;
  gap: 20px;
  margin: 20px auto;
  max-width: 1200px
}
.scrollable-content {
  overflow-y: auto;
  max-width: 1200px;
  margin: 0 auto
}
.analytics-pipeline-graph {
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.pipeline-render-container {
  width: 100%!important;
  height: 100%!important;
  overflow: hidden
}
#pipeline-graph-svg {
  width: 100%!important;
  height: 100%!important;
  max-width: 100%!important;
  max-height: 100%!important
}
.pipeline-data {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column
}
.view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  max-width: 1200px;
  background: #fff
}
.pipeline-controls {
  display: none;
  justify-content: space-between!important;
  width: 100%!important
}
.dashboard-controls {
  display: none
}
.view-toggle {
  display: flex;
  gap: 10px
}
.view-toggle-btn {
  margin-right: 10px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  height: 35px;
  box-sizing: border-box
}
.view-toggle-btn.active {
  background: #007bff;
  color: #fff;
  border-color: #0056b3
}
.edit-dashboard-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  height: 35px;
  box-sizing: border-box
}
.edit-dashboard-btn:hover {
  background: #f0f0f0
}
#reset-all {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  height: 35px;
  box-sizing: border-box;
  margin-left: auto
}
.dashboard-controls {
  display: flex;
  justify-content: space-between;
  width: 100%
}
#reset-all:hover {
  background: #0056b3
}
.edit-dashboard-btn.active {
  background: #007bff;
  color: #fff;
  border-color: #0056b3
}
.debug-controls-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto
}
.debug-toggle-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #e0e0e0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 35px;
  box-sizing: border-box
}
.debug-toggle-btn.active {
  background: #28a745;
  color: #fff;
  border-color: #1e7e34
}
.activity-log-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #e0e0e0;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 5px;
  height: 35px;
  box-sizing: border-box
}
.activity-log-btn.active {
  background: #28a745;
  color: #fff;
  border-color: #1e7e34
}
.report-issue-btn {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #007bff;
  color: #fff;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 5px;
  height: 35px;
  box-sizing: border-box
}
.report-issue-btn:hover {
  background: #0056b3
}
.debug-controls {
  display: none;
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
  margin: 0 auto;
  max-width: 1200px
}
.debug-controls.visible {
  display: block
}
.debug-control-group {
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between
}
.debug-toggles {
  display: flex;
  gap: 10px;
  margin-left: auto
}
.debug-select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px
}
.debug-slider {
  flex: 1;
  margin: 0 10px
}
#data-limit-value {
  min-width: 50px;
  text-align: right
}
.debug-control-row {
  display: flex;
  gap: 10px;
  margin: 10px 0
}
.debug-log-container {
  gap: 10px;
  margin: 20px auto;
  max-width: 1200px;
  display: none
}
.debug-log-container.visible {
  display: flex
}
.debug-log-column {
  flex: 1;
  min-width: 0;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  transition: .3s;
  overflow: hidden
}
.debug-log-column.collapsed {
  flex: 0 0 40px
}
.debug-column-header {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
  background: #fff;
  border-radius: 4px 4px 0 0
}
.debug-column-header h3 {
  margin: 0;
  flex: 1
}
.debug-column-header button {
  background: 0 0;
  border: none;
  padding: 5px;
  cursor: pointer;
  margin-left: 5px
}
.debug-column-content {
  height: 300px;
  overflow-y: auto;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  width: 100%
}
.debug-log-entry {
  margin-bottom: 8px;
  padding: 5px;
  border-bottom: 1px solid #eee;
  word-break: break-word
}
.debug-log-entry .timestamp {
  color: #666;
  font-size: .9em
}
.debug-log-entry pre {
  margin: 5px 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word
}
.debug-csv-container {
  width: 100%;
  overflow-x: auto;
  margin: 5px 0;
  max-width: 100%
}
.debug-csv-table {
  border-collapse: collapse;
  font-size: 11px;
  font-family: monospace;
  white-space: nowrap;
  table-layout: fixed;
  display: inline-block
}
.debug-csv-table th {
  background: #f3f3f3;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 8px;
  border: 1px solid #ddd;
  text-align: left
}
.debug-csv-table td {
  padding: 3px 8px;
  border: 1px solid #ddd
}
.debug-csv-table tr:nth-child(2n) {
  background: #f9f9f9
}
.debug-csv-table tr:hover {
  background: #f0f0f0
}
.dashboard-controls {
  gap: 10px;
  align-items: center
}
.dashboard-controls[style*="display: flex"] {
  display: flex!important
}
.export-btn {
  padding: 8px 12px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  height: 35px;
  box-sizing: border-box
}
.export-btn:hover {
  background: #218838
}
.data-grid {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px
}
.data-grid td,
.data-grid th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left
}
.data-grid th {
  background-color: #f8f9fa;
  font-weight: 700
}
.data-grid tr:nth-child(2n) {
  background-color: #f8f9fa
}
.data-grid tr:hover {
  background-color: #f2f2f2
}
.grid-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px
}
.grid-pagination select {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px
}
.grid-pagination button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer
}
.grid-pagination button:disabled {
  opacity: .5;
  cursor: not-allowed
}
.grid-pagination span {
  margin: 0 10px
}
.data-grid th {
  position: relative;
  padding-right: 20px
}
.data-grid th.asc .sort-indicator::after {
  content: '↑';
  position: absolute;
  right: 5px
}
.data-grid th.desc .sort-indicator::after {
  content: '↓';
  position: absolute;
  right: 5px
}
.sort-indicator {
  position: absolute;
  right: 5px;
  color: #999
}
.json-tree {
  font-family: monospace;
  margin-top: 10px;
  padding: 10px
}
.tree-node {
  margin-left: 20px
}
.tree-label {
  cursor: pointer;
  color: #333;
  padding: 2px 5px
}
.tree-label.expandable::before {
  content: '▶';
  display: inline-block;
  margin-right: 5px;
  transition: transform .2s
}
.tree-label.expandable.expanded::before {
  transform: rotate(90deg)
}
.tree-content {
  display: none;
  margin-left: 20px
}
.tree-content.expanded {
  display: block
}
.grid-stack-item-content {
  padding: 15px;
  font-family: Sen,sans-serif;
  color: var(--text-color)
}
.grid-stack-item-content .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  position: relative
}
.grid-stack-item-content .chart-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%)
}
.grid-stack-item-content .chart-header .drag-handle {
  cursor: move;
  color: var(--primary-color);
  margin-left: auto
}
.grid-stack-item-content .chart-header .reset {
  margin-left: 10px
}
.nx-dashboard-container {
  padding: 20px;
  background-color: #f0f8ff
}
.loading-wheel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,.8);
  z-index: 9999
}
.spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #06f;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: 1s linear infinite spin
}
@keyframes spin {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}
.loading-wheel p {
  margin-top: 20px;
  font-size: 18px;
  color: #06f
}
.error-message {
  background-color: #ffebee;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 16px
}
.nx-welcome-widget {
  grid-column: 1/-1;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.nx-welcome-widget h2 {
  margin: 0;
  color: var(--primary-color)
}
.nx-welcome-widget p {
  margin: 0
}
.nx-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 20px
}
.nx-widget {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: transform .3s,box-shadow .3s
}
.nx-widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,.15)
}
.nx-widget h2,
.nx-widget h3 {
  color: var(--primary-color);
  margin-bottom: 15px
}
.nx-stats-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 15px
}
.nx-stat-item {
  text-align: center;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px
}
.nx-stat-label {
  display: block;
  font-size: 14px;
  color: var(--text-color)
}
.nx-stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color)
}
.nx-action-list,
.nx-feature-list,
.nx-integration-list,
.nx-recommendation-list {
  list-style-type: none;
  padding-left: 0
}
.nx-feature-item,
.nx-integration-item,
.nx-recommendation-list li {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: background-color .3s
}
.nx-feature-item:hover,
.nx-integration-item:hover,
.nx-recommendation-list li:hover {
  background-color: #e9ecef
}
.nx-integration-item {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.nx-status-active,
.nx-status-warning {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px
}
.nx-status-active {
  background-color: #d4edda;
  color: #155724
}
.nx-status-warning {
  background-color: #fff3cd;
  color: #856404
}
.nx-action-button,
.nx-try-button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .3s
}
.nx-action-button:hover,
.nx-try-button:hover {
  background-color: var(--secondary-color)
}
.nx-feature-item h4 {
  color: var(--secondary-color);
  margin-bottom: 5px
}
.nx-feature-item p {
  font-size: 14px;
  margin-bottom: 10px
}
.nx-quick-actions-widget .nx-action-list {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px
}
.nx-quick-actions-widget .nx-action-button {
  width: 100%
}
.reset {
  position: absolute;
  right: 5px;
  top: 0
}
.ds-data-simulator-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative
}
.ds-mode-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px
}
.ds-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px
}
.ds-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.ds-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196f3;
  transition: .4s
}
.ds-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: .4s
}
input:checked + .ds-slider {
  background-color: #4caf50
}
input:checked + .ds-slider:before {
  transform: translateX(26px)
}
.ds-slider.round {
  border-radius: 34px
}
.ds-slider.round:before {
  border-radius: 50%
}
.ds-pipeline-section {
  flex-grow: 1;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px
}
.ds-pipeline-stages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  margin-top: 20px
}
.ds-pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px
}
.ds-stage-name {
  font-weight: 700
}
.ds-stage-status {
  position: relative;
  width: 40px;
  height: 40px
}
.ds-status-indicator {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e0e0e0
}
.ds-status-indicator.todo {
  background-color: #2196f3
}
.ds-status-indicator.in-progress {
  background-color: orange
}
.ds-status-indicator.complete {
  background-color: #4caf50
}
.ds-status-indicator.failed {
  background-color: #f44336
}
.ds-pipeline-connector {
  flex-grow: 1;
  height: 2px;
  background-color: #ddd;
  margin: 0 10px
}
.ds-stage-status-text {
  font-size: .8em;
  margin-top: 5px;
  text-align: center;
  color: #666
}
.ds-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: 1s linear infinite ds-spin;
  display: none
}
@keyframes ds-spin {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}
.ds-data-simulator-controls {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.ds-control-group {
  margin-bottom: 20px
}
.ds-control-group label {
  display: block;
  margin-bottom: 5px
}
.ds-account-select {
  width: 100%;
  max-width: 300px;
  padding: 8px
}
.ds-selection-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px
}
.ds-forms-section,
.ds-simulation-controls {
  width: calc(50% - 14px);
  min-width: 300px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px
}
.ds-selection-list {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 10px;
  margin-top: 10px
}
.ds-select-controls {
  margin-bottom: 10px
}
.ds-select-controls button {
  margin-right: 10px
}
.ds-search-input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.ds-selection-item {
  display: flex;
  align-items: center;
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee
}
.ds-selection-item input[type=checkbox] {
  margin-right: 10px
}
.ds-user-count-control {
  margin-bottom: 20px
}
.ds-slider-container {
  display: flex;
  gap: 10px;
  align-items: center
}
#ds-userCountSlider {
  flex-grow: 1
}
#ds-userCount {
  width: 80px;
  padding: 8px
}
.ds-group-name-control {
  margin-bottom: 20px
}
.ds-group-name-control input {
  width: 100%;
  padding: 8px
}
#ds-setupExperiment {
  align-self: flex-start
}
#database-section #database-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 200px);
  min-height: 400px
}
#database-section #database-graph {
  width: 75%;
  height: 100%;
  border: 1px solid #ccc;
  min-height: 0;
  position: relative
}
#database-section #database-fields {
  width: 25%;
  height: 100%;
  border: 1px solid #ccc;
  border-left: none;
  padding: 10px;
  overflow-y: auto;
  background: #f9f9f9;
  font-family: monospace;
  font-size: 12px;
  max-height: 100%;
  box-sizing: border-box
}
#database-section .database-controls {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  background-color: #fdfdfd
}
#database-section .database-controls label {
  font-weight: 700;
  margin-right: 5px
}
#database-section .database-controls button,
#database-section .database-controls input,
#database-section .database-controls select {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px
}
#database-section .database-controls button {
  cursor: pointer;
  background-color: #f0f0f0
}
#database-section .database-controls button:hover {
  background-color: #e0e0e0
}
#database-section .collapsible {
  cursor: pointer;
  color: #06c;
  font-weight: 700;
  margin-top: 5px;
  padding: 2px 0
}
#database-section .collapsible::before {
  content: '+ ';
  font-family: monospace;
  display: inline-block;
  width: 1em
}
#database-section .collapsible.active::before {
  content: '- '
}
#database-section .collapsible:hover {
  background-color: #eee
}
#database-section .content {
  display: none;
  margin-left: 20px;
  border-left: 1px dashed #ccc;
  padding-left: 10px
}
#database-section .content.active {
  display: block
}
#database-section #database-fields strong {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px
}
#database-section .error-message,
#database-section .initial-message,
#database-section .loading-message {
  padding: 40px 20px;
  text-align: center;
  color: #666;
  font-size: 14px
}
#database-section .error-message {
  color: #dc3545;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin: 20px;
  padding: 15px
}
#database-section .vis-network {
  outline: 0
}
.programs-flow-save-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 1000
}
.programs-flow-save-modal .programs-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  min-width: 300px
}
.programs-flow-save-modal .programs-form-group {
  margin-bottom: 15px
}
.programs-flow-save-modal label {
  display: block;
  margin-bottom: 5px
}
.programs-flow-save-modal input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.programs-flow-save-modal .programs-button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px
}
.programs-flow-save-modal .programs-error-message {
  color: red;
  margin: 10px 0
}
#programs-save-status {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 700;
  opacity: 1;
  transition: opacity .3s;
  z-index: 1000
}
#programs-save-status.programs-success {
  background: #4caf50;
  color: #fff
}
#programs-save-status.programs-error {
  background: #f44336;
  color: #fff
}
#programs-node-palette {
  padding: 10px;
  background-color: #f0f8ff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: fixed;
  top: 80px;
  z-index: 1000
}
.programs-palette-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px
}
.programs-palette-section h3 {
  margin: 0;
  padding: 5px 0;
  font-size: 14px;
  font-weight: 700;
  color: #06f
}
.programs-palette-section .programs-node-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center
}
.programs-palette-section .programs-node-button,
.programs-palette-section .programs-node-template {
  margin: 0;
  padding: 5px 10px;
  font-size: 12px
}
#programs-workflow-container {
  overflow: hidden;
  background-color: #f8f9fa;
  position: fixed;
  top: 130px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(200,200,200,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(200,200,200,.1) 1px,transparent 1px);
  background-size: 20px 20px
}
#programs-workflow-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
.programs-flow-builder-main {
  padding-top: 130px
}
.programs-node-button,
.programs-node-template {
  padding: 10px 15px;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  cursor: pointer;
  width: auto;
  height: auto;
  font-size: 14px;
  transition: background-color .3s,transform .3s;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.programs-node-button:hover,
.programs-node-template:hover {
  background-color: #06f;
  color: #fff;
  transform: translateY(-2px)
}
.programs-action-filters {
  position: relative;
  left: 29px
}
.programs-node-text {
  font-family: Sen,sans-serif;
  font-size: 14px;
  font-weight: 400
}
.programs-edit-link {
  fill: #0066FF;
  cursor: pointer;
  transition: fill .3s
}
.programs-edit-link:hover {
  fill: #00C2FF
}
path {
  cursor: pointer;
  transition: stroke .3s,stroke-width .3s
}
path.programs-selected {
  stroke: #0066FF;
  stroke-width: 3
}
.programs-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,.4)
}
.programs-form-check {
  display: inline;
  margin-right: 25px;
  cursor: pointer
}
.programs-form-check .programs-form-check-input {
  float: none;
  margin-right: 5px
}
.programs-modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 30px;
  border: 1px solid #e0e0e0;
  width: 60%;
  height: auto;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1)
}
.programs-modal-editor {
  height: 70%;
  margin-bottom: 20px
}
.programs-modal-buttons {
  height: 30%;
  display: flex;
  justify-content: flex-end;
  gap: 15px
}
.programs-modal-buttons button {
  padding: 10px 20px;
  background-color: #06f;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .3s
}
.programs-modal-buttons button:hover {
  background-color: #00c2ff
}
.programs-zoom-widget {
  position: fixed;
  bottom: 30px;
  left: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 10px
}
.programs-zoom-button {
  width: 40px;
  height: 40px;
  background-color: #06f;
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  font-size: 18px;
  transition: background-color .3s,transform .3s
}
.programs-zoom-button:hover {
  background-color: #00c2ff;
  transform: scale(1.1)
}
.programs-zoom-button:not(:last-child) {
  margin-bottom: 15px
}
.unified-container {
  display: flex;
  height: calc(100vh - 80px);
  width: 100vw;
  position: fixed;
  top: 80px;
  left: 0
}
.programs-sidebar {
  width: 300px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .3s;
  z-index: 1000
}
.flow-settings {
  display: none;
  height: 100%
}
.flow-settings.active {
  display: flex;
  flex-direction: column
}
.flow-settings-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0
}
.flow-settings-content {
  padding: 20px;
  flex: 1
}
.flow-settings-actions {
  display: flex;
  flex-direction: column;
  gap: 15px
}
.flow-settings-actions button {
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color .3s
}
.flow-settings-actions .save-btn {
  background: #28a745;
  color: #fff
}
.flow-settings-actions .publish-btn {
  background: #007bff;
  color: #fff
}
.flow-settings-actions .archive-btn {
  background: #dc3545;
  color: #fff
}
.flow-settings-actions .back-btn {
  background: #6c757d;
  color: #fff
}
.flow-toggle {
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 10px
}
.programs-sidebar.collapsed {
  transform: translateX(-270px)
}
.sidebar-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0
}
.sidebar-search {
  padding: 15px;
  border-bottom: 1px solid #e0e0e0
}
.program-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px
}
.archive-toggle {
  margin-top: 10px
}
.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer
}
.checkbox-label {
  margin-left: 8px;
  color: #666;
  font-size: 14px
}
.program-item {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color .3s
}
.program-item:hover {
  background: #f8f9fa
}
.program-item.archived {
  background-color: #f5f5f5;
  opacity: .8
}
.program-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px
}
.flow-name {
  font-weight: 500;
  color: #333
}
.archived-badge {
  font-size: 12px;
  color: #666;
  background: #e0e0e0;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block
}
.flow-actions {
  display: flex;
  gap: 8px
}
.flow-actions button {
  background: 0 0;
  border: none;
  padding: 5px;
  cursor: pointer;
  color: #666;
  transition: color .3s
}
.flow-actions button:hover {
  color: #007bff
}
.flow-actions button:disabled {
  opacity: .5;
  cursor: not-allowed
}
.flow-actions .archive-btn {
  color: #dc3545
}
.flow-actions .archive-btn:hover {
  color: #c82333
}
.flow-builder-content {
  flex: 1;
  position: relative;
  overflow: hidden
}
.fs-programs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.fs-programs-controls {
  display: flex;
  gap: 20px
}
.fs-search-input,
.fs-sort-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px
}
.fs-program-widget {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  transition: .3s
}
.fs-program-widget.archived {
  opacity: .7;
  background-color: #f5f5f5
}
.fs-program-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px
}
.fs-flow-timestamps {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: .8em;
  color: #666;
  margin-right: 10px
}
.fs-timestamp {
  margin-bottom: 2px
}
.fs-program-controls {
  display: flex;
  gap: 10px;
  align-items: center
}
.fs-program-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 15px;
  margin-bottom: 15px
}
.fs-stat {
  text-align: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px
}
.fs-stat-label {
  display: block;
  font-size: .9em;
  color: #666
}
.fs-stat-value {
  display: block;
  font-size: 1.2em;
  font-weight: 700;
  color: #333
}
.fs-program-actions {
  display: flex;
  justify-content: flex-end
}
.fs-dashboard-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  transition: background .3s
}
.fs-dashboard-btn:hover {
  background: #0056b3
}
.fs-edit-btn {
  padding: 8px 16px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  margin-right: 10px;
  transition: background .3s;
  display: inline-block
}
.fs-edit-btn:not(.disabled):hover {
  background: #5a6268;
  color: #fff;
  text-decoration: none
}
.fs-edit-btn.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none
}
.fs-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px
}
.fs-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.fs-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px
}
.fs-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: .4s;
  border-radius: 50%
}
input:checked + .fs-slider {
  background-color: #2196f3
}
input:checked + .fs-slider:before {
  transform: translateX(26px)
}
.fs-switch.disabled {
  opacity: .5;
  cursor: not-allowed
}
.fs-archive-btn {
  background: 0 0;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 5px;
  font-size: 1.1em
}
.fs-archive-btn:hover {
  color: #c82333
}
.fs-create-program-btn {
  padding: 12px 20px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .3s;
  margin: 15px;
  width: calc(100% - 30px);
  justify-content: center;
  font-size: 15px
}
.fs-create-program-btn:hover {
  background: #218838;
  color: #fff;
  text-decoration: none
}
.fs-create-flow-btn i {
  font-size: .9em
}
.fs-archive-toggle-container {
  display: flex;
  align-items: center
}
.fs-archive-toggle {
  display: flex;
  align-items: center;
  cursor: pointer
}
.fs-archive-toggle input[type=checkbox] {
  margin-right: 8px
}
.fs-archive-toggle-label {
  color: #666;
  font-size: .9em
}
.form-builder-container {
  display: flex;
  height: 100vh;
  padding-top: 64px;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif
}
.form-builder-sidebar {
  width: 280px;
  background-color: #f5f5f5;
  padding: 24px;
  overflow-y: auto;
  border-right: 1px solid #e0e0e0;
  box-shadow: 0 0 10px rgba(0,0,0,.05)
}
.form-builder-main {
  flex-grow: 1;
  padding: 30px;
  overflow-y: auto;
  background-color: #fafafa
}
.form-catalog {
  margin-top: 24px
}
.form-catalog select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1)
}
.form-item {
  padding: 14px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
  transition: background-color .2s
}
.form-item:hover {
  background-color: #e8f5e9
}
.form-container {
  margin-top: 24px;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08)
}
.form-container input[type=date],
.form-container input[type=email],
.form-container input[type=number],
.form-container input[type=text],
.form-container select,
.form-container textarea {
  width: 100%;
  padding: 12px;
  margin: 8px 0 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color .3s,box-shadow .3s
}
.form-container input:focus,
.form-container select:focus,
.form-container textarea:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76,175,80,.2);
  outline: 0
}
.form-container label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333
}
.form-container fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px
}
.form-container legend {
  font-weight: 600;
  padding: 0 10px;
  color: #333
}
.form-container .help-text {
  color: #666;
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 16px
}
.form-container .form-field {
  margin-bottom: 20px
}
.form-container .static-text {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px
}
.form-container .static-text p {
  margin: 0 0 10px
}
.form-container .static-text ul {
  margin: 0;
  padding-left: 20px
}
.group-instance {
  border: 1px solid #e0e0e0
}
.add-group-btn {
  margin: 1em 0;
  background-color: #4caf50
}
.add-group-btn:hover {
  background-color: #45a049
}
.remove-group-btn {
  margin: .5em 0;
  background-color: #f44336
}
.remove-group-btn:hover {
  background-color: #d32f2f
}
.form-submission-controls {
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end
}
.form-submission-controls button {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .2s,transform .1s,box-shadow .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.form-submission-controls button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,.15)
}
.form-submission-controls button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.1)
}
.btn-primary {
  background-color: #4caf50;
  color: #fff
}
.btn-primary:hover {
  background-color: #43a047
}
.btn-success {
  background-color: #2196f3;
  color: #fff
}
.btn-success:hover {
  background-color: #1e88e5
}
.btn-danger {
  background-color: #f44336;
  color: #fff
}
.btn-danger:hover {
  background-color: #e53935
}
.form-container input[type=checkbox],
.form-container input[type=radio] {
  margin-right: 8px
}
.form-container input[type=checkbox] + label,
.form-container input[type=radio] + label {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 12px;
  cursor: pointer
}
.form-container input[type=range] {
  width: 100%;
  margin: 8px 0
}
.form-container input[type=range] + span {
  display: inline-block;
  margin-left: 10px;
  font-weight: 500
}
:root {
  --primary-color: #4CAF50;
  --primary-hover: #43a047;
  --secondary-color: #2196F3;
  --secondary-hover: #1e88e5;
  --danger-color: #f44336;
  --danger-hover: #e53935;
  --neutral-color: #757575;
  --neutral-hover: #616161;
  --light-bg: #f5f5f5;
  --border-color: #e0e0e0;
  --text-primary: #333;
  --text-secondary: #666;
  --success-bg: #e8f5e9;
  --success-color: #2e7d32;
  --error-bg: #ffebee;
  --error-color: #c62828;
  --todo-color: #ff9800;
  --todo-bg: #fff8e1;
  --inprogress-color: #2196f3;
  --inprogress-bg: #e3f2fd;
  --completed-color: #4caf50;
  --completed-bg: #e8f5e9
}
.professional-form {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
  color: var(--text-primary);
  max-width: 800px;
  margin: 0 auto
}
.form-header {
  margin-bottom: 30px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 15px
}
.form-title {
  color: var(--text-primary)
}
.form-description {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.5
}
.form-field {
  margin-bottom: 24px
}
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  margin: 8px 0 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color .3s,box-shadow .3s
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(76,175,80,.2);
  outline: 0
}
label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text-primary)
}
fieldset {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px
}
legend {
  font-weight: 600;
  padding: 0 10px;
  color: var(--text-primary)
}
.help-text {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 16px
}
input[type=checkbox],
input[type=radio] {
  margin-right: 8px
}
input[type=checkbox] + label,
input[type=radio] + label {
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 12px;
  cursor: pointer
}
.group-instance {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color)
}
.add-group-btn,
.btn-danger,
.btn-primary,
.btn-success,
.remove-group-btn {
  display: inline-block;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color .2s,transform .1s,box-shadow .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.add-group-btn:hover,
.btn-danger:hover,
.btn-primary:hover,
.btn-success:hover,
.remove-group-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,.15)
}
.add-group-btn:active,
.btn-danger:active,
.btn-primary:active,
.btn-success:active,
.remove-group-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.1)
}
.add-group-btn {
  background-color: var(--primary-color);
  color: #fff
}
.add-group-btn:hover {
  background-color: var(--primary-hover)
}
.remove-group-btn {
  background-color: var(--danger-color);
  color: #fff
}
.remove-group-btn:hover {
  background-color: var(--danger-hover)
}
.form-submission-controls {
  margin-top: 30px;
  padding: 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end
}
.form-submission-controls button {
  margin-left: 12px
}
.form-success-message {
  background-color: var(--success-bg);
  color: var(--success-color)
}
.form-error-message {
  background-color: var(--error-bg);
  color: var(--error-color)
}
.static-text {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px
}
.static-text p {
  margin: 0 0 10px;
  line-height: 1.5
}
.static-text ul {
  margin: 0;
  padding-left: 20px
}
input[type=range] {
  width: 100%;
  margin: 8px 0
}
input[type=range] + span {
  display: inline-block;
  margin-left: 10px;
  font-weight: 500
}
.signature-input {
  font-family: 'Brush Script MT',cursive;
  font-size: 18px
}
.fum-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative
}
.fum-mode-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px
}
.fum-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px
}
.fum-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.fum-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196f3;
  transition: .4s
}
.fum-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: .4s
}
input:checked + .fum-slider {
  background-color: #4caf50
}
input:checked + .fum-slider:before {
  transform: translateX(26px)
}
.fum-slider.fum-round {
  border-radius: 34px
}
.fum-slider.fum-round:before {
  border-radius: 50%
}
.fum-controls {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.fum-control-group {
  margin-bottom: 20px
}
.fum-control-group label {
  display: block;
  margin-bottom: 5px
}
.fum-account-select {
  width: 100%;
  max-width: 300px;
  padding: 8px
}
.fum-selection-container {
  display: flex;
  gap: 20px;
  margin-bottom: 20px
}
.fum-forms-section,
.fum-timeout-controls,
.fum-users-section {
  width: calc(50% - 14px);
  min-width: 300px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px
}
.fum-selection-list {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 10px;
  margin-top: 10px
}
.fum-select-controls {
  margin-bottom: 10px
}
.fum-select-controls button {
  margin-right: 10px
}
.fum-search-input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.fum-selection-item {
  display: flex;
  align-items: center;
  padding: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee
}
.fum-selection-item input[type=checkbox] {
  margin-right: 10px
}
#assignForms {
  align-self: flex-start
}
.fum-timeout-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px
}
.fum-timeout-input {
  width: 80px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.fum-timeout-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.fum-token-results {
  margin-top: 20px;
  border-top: 1px solid #ddd;
  padding-top: 15px
}
.fum-token-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 0;
  background: #f9f9f9;
  font-family: monospace
}
.fum-token-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px
}
.fum-create-users-section {
  width: calc(50% - 14px);
  min-width: 300px;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 4px
}
.fum-create-users-form {
  display: flex;
  flex-direction: column;
  gap: 15px
}
.fum-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px
}
.fum-form-control {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%
}
.fu-form-user-container {
  padding: 30px;
  max-width: 900px;
  margin: 0 auto;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif
}
.fu-overall-progress {
  margin: 30px 0;
  text-align: center
}
.fu-progress-bar {
  width: 100%;
  height: 24px;
  background-color: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1)
}
.fu-progress-fill {
  height: 100%;
  background-color: #4caf50;
  width: 0%;
  transition: width .5s ease-in-out;
  background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size: 40px 40px;
  animation: 2s linear infinite progress-bar-stripes
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0
  }
  to {
    background-position: 0 0
  }
}
.fu-progress-label {
  font-size: 16px;
  color: #555;
  font-weight: 500
}
.fu-form-status-summary {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08)
}
.fu-status-item {
  text-align: center;
  padding: 15px 25px;
  border-radius: 6px;
  transition: transform .2s
}
.fu-status-item:hover {
  transform: translateY(-3px)
}
.fu-status-item .fu-count {
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px
}
.fu-status-item.fu-to-do .fu-count {
  color: #ff9800
}
.fu-status-item.fu-in-progress .fu-count {
  color: #2196f3
}
.fu-status-item.fu-completed .fu-count {
  color: #4caf50
}
.fu-form-list {
  margin-top: 30px
}
.fu-form-item {
  padding: 20px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .2s,box-shadow .2s
}
.fu-form-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1)
}
.fu-form-item.fu-to-do {
  background-color: #fff8e1;
  border-left: 5px solid #ff9800
}
.fu-form-item.fu-in-progress {
  background-color: #e3f2fd;
  border-left: 5px solid #2196f3
}
.fu-form-item.fu-completed {
  background-color: #e8f5e9;
  border-left: 5px solid #4caf50
}
.fu-form-info {
  flex: 1
}
.fu-form-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 6px;
  color: #333
}
.fu-form-date {
  color: #666;
  font-size: 14px
}
.fu-form-actions {
  display: flex;
  align-items: center
}
.fu-form-status {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: .9em;
  font-weight: 500;
  margin-right: 15px;
  text-transform: uppercase;
  letter-spacing: .5px
}
.fu-status-to_do {
  background-color: #ff9800;
  color: #fff
}
.fu-status-in_progress {
  background-color: #2196f3;
  color: #fff
}
.fu-status-completed {
  background-color: #4caf50;
  color: #fff
}
.fu-btn-continue,
.fu-btn-start,
.fu-btn-view {
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color .2s,transform .1s,box-shadow .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.fu-btn-continue:hover,
.fu-btn-start:hover,
.fu-btn-view:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,.15)
}
.fu-btn-continue:active,
.fu-btn-start:active,
.fu-btn-view:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.1)
}
.fu-btn-start {
  background-color: #4caf50
}
.fu-btn-start:hover {
  background-color: #43a047
}
.fu-btn-continue {
  background-color: #2196f3
}
.fu-btn-continue:hover {
  background-color: #1e88e5
}
.fu-btn-view {
  background-color: #757575
}
.fu-btn-view:hover {
  background-color: #616161
}
#backToFormList {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 16px;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color .2s;
  text-decoration: none
}
#backToFormList:hover {
  background-color: #e0e0e0
}
#backToFormList:before {
  content: "←";
  margin-right: 8px
}
.f-form-view-container {
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif
}
.f-form-container {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1)
}
.f-form-container input[type=date],
.f-form-container input[type=email],
.f-form-container input[type=number],
.f-form-container input[type=text],
.f-form-container select,
.f-form-container textarea {
  width: 100%;
  padding: 12px;
  margin: 8px 0 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color .3s,box-shadow .3s
}
.f-form-container input:focus,
.f-form-container select:focus,
.f-form-container textarea:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 2px rgba(76,175,80,.2);
  outline: 0
}
.f-form-container label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333
}
.f-form-container fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px
}
.f-form-container legend {
  font-weight: 600;
  padding: 0 10px;
  color: #333
}
.f-form-container .help-text {
  color: #666;
  font-size: 14px;
  margin-top: -12px;
  margin-bottom: 16px
}
.f-form-container .form-field {
  margin-bottom: 20px
}
.f-form-container .static-text {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px
}
.f-form-container .static-text p {
  margin: 0 0 10px
}
.f-form-container .static-text ul {
  margin: 0;
  padding-left: 20px
}
.form-success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  padding: 15px;
  border-radius: 4px;
  margin-top: 20px;
  text-align: center;
  font-weight: 500
}
.form-error-message {
  background-color: #ffebee;
  color: #c62828;
  padding: 15px;
  border-radius: 4px;
  margin-top: 20px;
  text-align: center;
  font-weight: 500
}
.ja-container {
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  height: calc(100vh - 100px)
}
.ja-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.ja-tabs {
  display: flex;
  gap: 10px
}
.ja-tab-btn {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: .3s
}
.ja-tab-btn.active {
  background: #007bff;
  color: #fff
}
.ja-tab-content {
  display: none;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  height: calc(100vh - 180px);
  overflow-y: auto
}
.ja-tab-content.active {
  display: block
}
.ja-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center
}
.ja-search-input,
.ja-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px
}
.ja-job-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  cursor: pointer;
  transition: .3s;
  border: 1px solid #eee
}
.ja-job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  border-color: #ddd
}
.ja-job-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.ja-job-title {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0
}
.ja-job-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8em;
  text-transform: uppercase
}
.ja-job-type.permanent {
  background: #e3f2fd;
  color: #0d47a1
}
.ja-job-type.contract {
  background: #fff8e1;
  color: #ff8f00
}
.ja-job-details {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap
}
.ja-job-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .9em;
  color: #666
}
.ja-application-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  cursor: pointer;
  transition: .3s;
  border: 1px solid #eee
}
.ja-application-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  border-color: #ddd
}
.ja-application-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.ja-application-title {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0
}
.ja-application-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8em;
  text-transform: uppercase
}
.ja-status-new {
  background: #e3f2fd;
  color: #0d47a1
}
.ja-status-reviewing {
  background: #fff8e1;
  color: #ff8f00
}
.ja-status-interview {
  background: #e8f5e9;
  color: #2e7d32
}
.ja-status-offer {
  background: #f3e5f5;
  color: #7b1fa2
}
.ja-status-rejected {
  background: #ffebee;
  color: #c62828
}
.ja-status-hired {
  background: #e8f5e9;
  color: #2e7d32
}
.ja-application-details {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap
}
.ja-application-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .9em;
  color: #666
}
.ja-detail-view {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  height: calc(100vh - 140px);
  overflow-y: auto
}
.ja-detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px
}
.ja-back-btn {
  display: flex;
  align-items: center;
  gap: 8px
}
.ja-detail-title {
  margin: 0;
  flex-grow: 1
}
.ja-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 15px 0
}
.ja-job-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666
}
.ja-job-description {
  margin: 20px 0
}
.ja-job-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 20px;
  margin: 20px 0
}
.ja-job-details-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px
}
.ja-job-apply {
  margin-top: 30px;
  text-align: center
}
.ja-apply-btn {
  padding: 12px 30px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 1.1em;
  cursor: pointer;
  transition: .3s
}
.ja-apply-btn:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.1)
}
.ja-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5)
}
.ja-modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  position: relative
}
.ja-close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer
}
.ja-submit-btn {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px
}
.ja-warning {
  color: #dc3545;
  font-weight: 700;
  margin-bottom: 15px
}
.ja-primary-btn {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ja-profile-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px
}
.ja-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.ja-edit-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ja-form-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee
}
.ja-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 15px
}
.ja-form-group {
  margin-bottom: 15px
}
.ja-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 700
}
.ja-form-group input,
.ja-form-group select,
.ja-form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.ja-form-group input:disabled,
.ja-form-group select:disabled,
.ja-form-group textarea:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed
}
.ja-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400
}
.ja-checkbox-label input {
  width: auto
}
.ja-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px
}
.ja-cancel-btn,
.ja-save-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ja-save-btn {
  background: #28a745;
  color: #fff
}
.ja-cancel-btn {
  background: #dc3545;
  color: #fff
}
.ja-add-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px
}
.ja-cv-upload {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px
}
.ja-upload-btn,
.ja-view-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ja-upload-btn {
  background: #007bff;
  color: #fff
}
.ja-view-btn {
  background: #6c757d;
  color: #fff
}
.ja-entry {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px
}
.ja-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.ja-entry-title {
  margin: 0
}
.ja-entry-actions {
  display: flex;
  gap: 5px
}
.ja-delete-entry-btn,
.ja-edit-entry-btn {
  background: 0 0;
  border: none;
  cursor: pointer;
  font-size: .9em
}
.ja-edit-entry-btn {
  color: #007bff
}
.ja-delete-entry-btn {
  color: #dc3545
}
.ja-entry-field {
  margin-bottom: 5px
}
.ja-entry-label {
  font-weight: 700;
  margin-right: 5px
}
.ja-description-field {
  margin-top: 10px
}
.ja-skills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px
}
.ja-skill-tag {
  background: #e3f2fd;
  color: #0d47a1;
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px
}
.ja-remove-skill {
  cursor: pointer;
  color: #0d47a1
}
.ja-skills-input {
  display: flex;
  gap: 10px
}
.ja-skills-input input {
  flex-grow: 1
}
.ja-skills-input button {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ja-application-tabs {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px
}
.ja-app-tab-btn {
  padding: 8px 16px;
  background: 0 0;
  border: none;
  cursor: pointer;
  position: relative
}
.ja-app-tab-btn.active {
  color: #007bff;
  font-weight: 700
}
.ja-app-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #007bff
}
.ja-application-tab-content {
  display: none
}
.ja-application-tab-content.active {
  display: block
}
.ja-application-section {
  margin-bottom: 30px
}
.ja-application-info {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px
}
.ja-info-label {
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
  color: #666
}
.ja-cover-letter {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  white-space: pre-wrap
}
.ja-forms-list {
  margin-bottom: 20px
}
.ja-form-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.ja-form-title {
  font-weight: 700
}
.ja-form-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8em;
  margin-right: 10px
}
.ja-status-assigned {
  background: #e3f2fd;
  color: #0d47a1
}
.ja-status-in_progress {
  background: #fff8e1;
  color: #ff8f00
}
.ja-status-completed {
  background: #e8f5e9;
  color: #2e7d32
}
.ja-form-btn {
  padding: 5px 10px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ja-form-view-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.ja-form-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px
}
.ja-back-btn {
  padding: 8px 16px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.loading-spinner {
  text-align: center;
  padding: 20px;
  color: #666
}
:root {
  --ls-primary: #0066ff;
  --ls-secondary: #00c2ff;
  --ls-dark: #1a1a2e;
  --ls-light: #ffffff;
  --ls-gray: #f8f9fa;
  --ls-text: #333333;
  --ls-text-light: #666666;
  --ls-success: #28a745;
  --ls-warning: #ffc107;
  --ls-danger: #dc3545;
  --ls-gradient: linear-gradient(135deg, var(--ls-primary) 0%, var(--ls-secondary) 100%);
  --ls-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --ls-transition: all 0.3s ease;
  --ls-border-radius: 8px;
  --ls-font-primary: 'Sen',sans-serif
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
body {
  font-family: var(--ls-font-primary);
  color: var(--ls-text);
  background-color: var(--ls-light);
  overflow-x: hidden;
  font-family: Sen,sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: var(--text-color);
  background-color: var(--background-color)
}
a {
  text-decoration: none;
  color: var(--ls-primary);
  transition: var(--ls-transition)
}
ul {
  list-style: none
}
img {
  max-width: 100%;
  height: auto
}
.ls-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--ls-dark)
}
h1 {
  font-size: 3.5rem
}
h2 {
  font-size: 2.5rem
}
h3 {
  font-size: 2rem
}
h4 {
  font-size: 1.5rem
}
p {
  margin-bottom: 1.5rem
}
.ls-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--ls-border-radius);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--ls-transition);
  border: none
}
.ls-btn-primary {
  background-color: var(--ls-primary);
  color: var(--ls-light)
}
.ls-btn-primary:hover {
  background-color: #0055d4;
  transform: translateY(-2px);
  box-shadow: var(--ls-shadow)
}
.ls-btn-secondary {
  background-color: transparent;
  color: var(--ls-primary);
  border: 2px solid var(--ls-primary)
}
.ls-btn-secondary:hover {
  background-color: var(--ls-primary);
  color: var(--ls-light);
  transform: translateY(-2px);
  box-shadow: var(--ls-shadow)
}
.ls-hero .ls-btn-primary {
  background-color: var(--ls-light);
  color: var(--ls-primary);
  border: 2px solid var(--ls-light)
}
.ls-hero .ls-btn-primary:hover,
.ls-hero .ls-btn-secondary {
  background-color: transparent;
  color: var(--ls-light);
  border: 2px solid var(--ls-light)
}
.ls-hero .ls-btn-secondary:hover {
  background-color: var(--ls-light);
  color: var(--ls-primary)
}
.ls-btn-large {
  padding: 16px 32px;
  font-size: 1.1rem
}
.ls-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--ls-light);
  box-shadow: var(--ls-shadow);
  z-index: 1000;
  padding: 1rem 0
}
.ls-nav {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.ls-logo {
  height: 40px
}
.ls-nav-links {
  display: flex;
  align-items: center
}
.ls-nav-item {
  margin-left: 1.5rem
}
.ls-nav-link {
  color: var(--ls-text);
  font-weight: 500;
  padding: .5rem
}
.ls-nav-link:hover {
  color: var(--ls-primary)
}
.ls-nav-cta {
  margin-left: 1.5rem
}
.ls-mobile-toggle {
  display: none;
  cursor: pointer
}
.ls-mobile-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--ls-text);
  margin: 5px 0;
  transition: var(--ls-transition)
}
.ls-hero {
  padding: 200px 0 120px;
  background: url('/images/hero-panel.svg') center center/cover no-repeat;
  color: var(--ls-light);
  position: relative;
  overflow: hidden
}
.ls-hero-content {
  max-width: 600px;
  position: relative;
  z-index: 2
}
.ls-hero h1 {
  color: var(--ls-light);
  margin-bottom: 1.5rem
}
.ls-hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: .9
}
.ls-hero-buttons {
  display: flex;
  gap: 1rem
}
.ls-hero-image {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  padding: 4rem 0 2rem
}
.ls-hero-image img {
  max-height: 90%;
  object-fit: contain
}
.ls-features {
  padding: 100px 0;
  background-color: var(--ls-light)
}
.ls-section-header {
  text-align: center;
  margin-bottom: 3rem
}
.ls-section-header h2 {
  margin-bottom: 1rem
}
.ls-section-header p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--ls-text-light)
}
.ls-features-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem
}
.ls-feature-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  padding: 2rem;
  box-shadow: var(--ls-shadow);
  transition: var(--ls-transition)
}
.ls-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,.1)
}
.ls-feature-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1.5rem;
  font-size: 3rem;
  color: var(--ls-primary)
}
.ls-feature-card h3 {
  margin-bottom: 1rem
}
.ls-section {
  padding: 100px 0
}
.ls-section-alt {
  background-color: var(--ls-gray)
}
.ls-section-content {
  display: flex;
  align-items: center;
  gap: 4rem
}
.ls-section-image,
.ls-section-text {
  flex: 1
}
.ls-section-image img {
  border-radius: var(--ls-border-radius);
  box-shadow: var(--ls-shadow)
}
.ls-section-list {
  margin-top: 1.5rem
}
.ls-section-list li {
  margin-bottom: .75rem;
  padding-left: 1.5rem;
  position: relative
}
.ls-section-list li:before {
  content: "✓";
  color: var(--ls-primary);
  position: absolute;
  left: 0
}
.ls-testimonials {
  padding: 100px 0;
  background-color: var(--ls-gray)
}
.ls-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem
}
.ls-testimonial-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  padding: 2rem;
  box-shadow: var(--ls-shadow)
}
.ls-testimonial-text {
  font-style: italic;
  margin-bottom: 1.5rem
}
.ls-testimonial-author {
  display: flex;
  align-items: center
}
.ls-testimonial-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 1rem
}
.ls-testimonial-info h4 {
  margin-bottom: .25rem
}
.ls-testimonial-info p {
  color: var(--ls-text-light);
  margin-bottom: 0
}
.ls-awards-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
  margin-top: 2rem
}
.ls-award-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  padding: 0;
  box-shadow: var(--ls-shadow);
  overflow: hidden;
  transition: transform .3s,box-shadow .3s;
  text-align: center;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column
}
.ls-award-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,.15)
}
.ls-award-icon {
  background: var(--ls-gradient);
  color: var(--ls-light);
  padding: 2.5rem 0;
  font-size: 3.5rem;
  width: 100%
}
.ls-award-content {
  padding: 2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column
}
.ls-award-content h3 {
  margin-bottom: 1rem;
  color: var(--ls-dark);
  font-size: 1.5rem
}
.ls-award-content p {
  margin-bottom: 1.5rem;
  color: var(--ls-text);
  flex-grow: 1
}
.ls-award-link {
  display: inline-block;
  color: var(--ls-primary);
  font-weight: 600;
  transition: .3s;
  padding: .75rem 1.5rem;
  border: 2px solid var(--ls-primary);
  border-radius: var(--ls-border-radius);
  margin-top: auto
}
.ls-award-link:hover {
  background-color: var(--ls-primary);
  color: var(--ls-light)
}
.ls-award-link i {
  margin-left: .5rem
}
@media (max-width:768px) {
  .ls-awards-grid {
    grid-template-columns: 1fr
  }
}
.ls-pricing {
  padding: 100px 0
}
.ls-pricing-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3rem
}
.ls-pricing-toggle span {
  margin: 0 1rem;
  font-weight: 500
}
.ls-toggle-switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 34px;
  overflow: hidden
}
.ls-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0
}
.ls-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: var(--ls-transition);
  border-radius: 34px
}
.ls-toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: var(--ls-transition);
  border-radius: 50%
}
input:checked + .ls-toggle-slider {
  background-color: var(--ls-primary)
}
input:checked + .ls-toggle-slider:before {
  transform: translateX(44px)
}
.ls-price {
  color: var(--ls-primary);
  line-height: 1.2
}
.ls-price span {
  color: var(--ls-text-light);
  font-weight: 400;
  display: inline-block;
  margin-left: 5px;
  font-size: 1rem;
  color: var(--ls-text-light)
}
.ls-annual-price,
.ls-monthly-price {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}
.ls-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem
}
.ls-pricing-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  padding: 2rem;
  box-shadow: var(--ls-shadow);
  text-align: center;
  transition: var(--ls-transition)
}
.ls-pricing-card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.1)
}
.ls-pricing-card.ls-popular {
  border: 2px solid var(--ls-primary);
  position: relative
}
.ls-popular-tag {
  position: absolute;
  top: -15px;
  right: 20px;
  background-color: var(--ls-primary);
  color: var(--ls-light);
  padding: 5px 10px;
  border-radius: var(--ls-border-radius);
  font-size: .8rem;
  font-weight: 600
}
.ls-pricing-header {
  margin-bottom: 2rem
}
.ls-price {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ls-primary);
  margin-bottom: 1rem
}
.ls-pricing-features {
  margin-bottom: 2rem
}
.ls-pricing-features li {
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(0,0,0,.05)
}
.ls-cta {
  padding: 100px 0;
  background: var(--ls-gradient);
  color: var(--ls-light);
  text-align: center
}
.ls-cta h2 {
  color: var(--ls-light);
  margin-bottom: 1.5rem
}
.ls-cta p {
  max-width: 700px;
  margin: 0 auto 2rem;
  opacity: .9
}
.ls-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem
}
.ls-cta .ls-btn-primary {
  background-color: var(--ls-light);
  color: var(--ls-primary);
  border: 2px solid var(--ls-light)
}
.ls-cta .ls-btn-primary:hover,
.ls-cta .ls-btn-secondary {
  background-color: transparent;
  color: var(--ls-light);
  border: 2px solid var(--ls-light)
}
.ls-cta .ls-btn-secondary:hover {
  background-color: var(--ls-light);
  color: var(--ls-primary)
}
.ls-footer {
  background-color: var(--ls-dark);
  color: var(--ls-light);
  padding: 4rem 0 2rem
}
.ls-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem
}
.ls-footer-logo {
  margin-bottom: 1rem
}
.ls-footer-about p {
  opacity: .7
}
.ls-footer-heading {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--ls-light)
}
.ls-footer-links li {
  margin-bottom: .75rem
}
.ls-footer-links a {
  color: rgba(255,255,255,.7);
  transition: var(--ls-transition)
}
.ls-footer-links a:hover {
  color: var(--ls-light)
}
.ls-footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem
}
.ls-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.1);
  color: var(--ls-light);
  transition: var(--ls-transition)
}
.ls-footer-social a:hover {
  background-color: var(--ls-primary);
  transform: translateY(-3px)
}
.ls-footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
  font-size: .9rem;
  opacity: .7
}
.ls-contact-form {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  padding: 2rem;
  box-shadow: var(--ls-shadow)
}
.ls-form-group {
  margin-bottom: 1.5rem
}
.ls-form-label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 500
}
.ls-form-control {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--ls-border-radius);
  font-family: var(--ls-font-primary);
  font-size: 1rem;
  transition: var(--ls-transition)
}
.ls-form-control:focus {
  outline: 0;
  border-color: var(--ls-primary);
  box-shadow: 0 0 0 3px rgba(0,102,255,.1)
}
.ls-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px
}
.ls-form-textarea {
  min-height: 150px;
  resize: vertical
}
.ls-faq {
  padding: 100px 0;
  background-color: var(--ls-gray)
}
.ls-accordion {
  max-width: 800px;
  margin: 0 auto
}
.ls-accordion-item {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  margin-bottom: 1rem;
  overflow: hidden
}
.ls-accordion-header {
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
  font-weight: 600
}
.ls-accordion-header:after {
  content: "+";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  transition: var(--ls-transition)
}
.ls-accordion-item.active .ls-accordion-header:after {
  transform: translateY(-50%) rotate(45deg)
}
.ls-accordion-content {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s,padding .3s
}
.ls-accordion-item.active .ls-accordion-content {
  padding: 0 1.5rem 1.5rem;
  max-height: 1000px
}
.ls-about-values {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-top: 3rem
}
.ls-job-listings {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
  margin-top: 3rem
}
.ls-job-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  padding: 2rem;
  box-shadow: var(--ls-shadow);
  transition: var(--ls-transition)
}
.ls-job-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,.1)
}
.ls-job-card h3 {
  margin-bottom: .5rem;
  color: var(--ls-primary)
}
.ls-job-location {
  color: var(--ls-text-light);
  margin-bottom: 1rem;
  font-size: .9rem
}
.ls-job-location i {
  margin-right: .5rem
}
.ls-job-card p {
  margin-bottom: 1.5rem
}
.ls-job-card .ls-btn {
  display: inline-block
}
@media (max-width:768px) {
  .ls-job-listings {
    grid-template-columns: 1fr
  }
}
.ls-blog-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 3rem;
  margin-top: 3rem
}
.ls-blog-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  overflow: hidden;
  box-shadow: var(--ls-shadow);
  transition: var(--ls-transition)
}
.ls-blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,.1)
}
.ls-blog-image {
  height: 240px;
  overflow: hidden
}
.ls-blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s
}
.ls-blog-card:hover .ls-blog-image img {
  transform: scale(1.05)
}
.ls-blog-content {
  padding: 2rem
}
.ls-blog-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: var(--ls-text-light)
}
.ls-blog-card h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem
}
.ls-blog-card p {
  margin-bottom: 1.5rem
}
.ls-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  gap: 1rem
}
.ls-pagination-numbers {
  display: flex;
  gap: .5rem
}
.ls-pagination-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--ls-light);
  color: var(--ls-text);
  font-weight: 600;
  transition: var(--ls-transition)
}
.ls-pagination-number.active,
.ls-pagination-number:hover {
  background-color: var(--ls-primary);
  color: var(--ls-light)
}
.ls-newsletter-form {
  max-width: 600px;
  margin: 2rem auto 0
}
.ls-newsletter-input {
  display: flex;
  margin-bottom: 1rem
}
.ls-newsletter-input input {
  flex: 1;
  padding: .75rem 1rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: var(--ls-border-radius) 0 0 var(--ls-border-radius);
  font-family: var(--ls-font-primary);
  font-size: 1rem
}
.ls-newsletter-input button {
  border-radius: 0 var(--ls-border-radius) var(--ls-border-radius) 0
}
@media (max-width:768px) {
  .ls-blog-grid {
    grid-template-columns: 1fr
  }
  .ls-newsletter-input {
    flex-direction: column
  }
  .ls-newsletter-input input {
    border-radius: var(--ls-border-radius);
    margin-bottom: 1rem
  }
  .ls-newsletter-input button {
    border-radius: var(--ls-border-radius)
  }
}
.ls-value-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  padding: 2rem;
  box-shadow: var(--ls-shadow);
  text-align: center
}
.ls-value-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  font-size: 3rem;
  color: var(--ls-primary)
}
.ls-team-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-top: 3rem
}
.ls-team-card {
  background-color: var(--ls-light);
  border-radius: var(--ls-border-radius);
  overflow: hidden;
  box-shadow: var(--ls-shadow);
  text-align: center
}
.ls-team-image {
  width: 100%;
  height: 300px;
  object-fit: cover
}
.ls-team-info {
  padding: 1.5rem
}
.ls-team-info h3 {
  margin-bottom: .5rem
}
.ls-team-position {
  color: var(--ls-text-light);
  margin-bottom: 1rem
}
.ls-team-social {
  display: flex;
  justify-content: center;
  gap: 1rem
}
.ls-team-social a {
  color: var(--ls-text-light);
  transition: var(--ls-transition)
}
.ls-team-social a:hover {
  color: var(--ls-primary)
}
@media (max-width:1024px) {
  h1 {
    font-size: 3rem
  }
  h2 {
    font-size: 2.2rem
  }
  .ls-features-grid,
  .ls-pricing-grid {
    grid-template-columns: repeat(2,1fr)
  }
  .ls-footer-grid {
    grid-template-columns: 1fr 1fr
  }
}
@media (max-width:768px) {
  h1 {
    font-size: 2.5rem
  }
  h2 {
    font-size: 2rem
  }
  .ls-mobile-toggle {
    display: block
  }
  .ls-nav-links {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: var(--ls-light);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0;
    box-shadow: var(--ls-shadow);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--ls-transition)
  }
  .ls-nav-links.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible
  }
  .ls-nav-item {
    margin: 0;
    width: 100%
  }
  .ls-nav-link {
    display: block;
    padding: 1rem 2rem
  }
  .ls-nav-cta {
    margin: 1rem 2rem
  }
  .ls-hero {
    padding: 120px 0 80px
  }
  .ls-hero-image {
    display: none
  }
  .ls-hero-content {
    max-width: 100%;
    text-align: center
  }
  .ls-hero-buttons {
    justify-content: center
  }
  .ls-section-content {
    flex-direction: column;
    gap: 2rem
  }
  .ls-section-content.ls-reverse {
    flex-direction: column-reverse
  }
  .ls-about-values,
  .ls-features-grid,
  .ls-pricing-grid,
  .ls-team-grid,
  .ls-testimonials-grid {
    grid-template-columns: 1fr
  }
}
@media (max-width:480px) {
  h1 {
    font-size: 2rem
  }
  h2 {
    font-size: 1.8rem
  }
  .ls-hero-buttons {
    flex-direction: column;
    gap: 1rem
  }
  .ls-footer-grid {
    grid-template-columns: 1fr
  }
}
.pt-patients-container {
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  height: calc(100vh - 100px)
}
.pt-patients-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  grid-column: 1/-1
}
.pt-patients-controls {
  display: flex;
  gap: 20px
}
.pt-search-input,
.pt-sort-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px
}
.pt-create-patient-btn {
  padding: 8px 16px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .3s
}
.pt-create-patient-btn:hover {
  background: #218838
}
.pt-patient-widget {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  transition: .3s;
  cursor: pointer
}
.pt-patient-widget:hover {
  background: #f8f9fa
}
.pt-patient-widget.active {
  background: #e6f7ff;
  border-left: 4px solid #1890ff
}
.pt-patient-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px
}
.pt-patient-info h3 {
  margin: 0;
  color: #333
}
.pt-patient-id {
  color: #666;
  font-size: .9em
}
.pt-patient-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(80px,1fr));
  gap: 10px;
  margin-bottom: 10px
}
.pt-stat {
  text-align: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px
}
.pt-stat-label {
  display: block;
  font-size: .9em;
  color: #666
}
.pt-stat-value {
  display: block;
  font-size: 1.2em;
  font-weight: 700;
  color: #333
}
.pt-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5)
}
.pt-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  position: relative
}
.pt-close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer
}
.pt-form-group {
  margin-bottom: 15px
}
.pt-form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333
}
.pt-form-group input,
.pt-form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.pt-submit-btn {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px
}
.pt-submit-btn:hover {
  background: #218838
}
.pv-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px
}
.pv-nav {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  height: fit-content
}
.pv-nav-header {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  text-align: center
}
.pv-profile-pic {
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0
}
.pv-profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.pv-patient-name {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 5px
}
.pv-patient-nhs {
  color: #666;
  font-size: .9em
}
.pv-nav-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.pv-nav-btn {
  padding: 10px;
  border: none;
  background: 0 0;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: .3s
}
.pv-nav-btn:hover {
  background: #f0f0f0
}
.pv-nav-btn.active {
  background: #007bff;
  color: #fff
}
.pv-layout {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.pv-left-panel,
.pv-notes-panel,
.pv-programs-panel {
  width: 100%;
  max-width: 800px
}
.pv-notes-panel,
.pv-programs-panel {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  display: flex;
  flex-direction: column
}
.pv-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.pv-create-program-btn {
  padding: 8px 16px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px
}
.pv-notes-list,
.pv-programs-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column
}
.pv-notes-input {
  margin-top: auto;
  display: grid;
  gap: 10px
}
.pv-notes-input textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical
}
.pv-save-note-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  justify-self: end
}
.pv-note-item {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px
}
.pv-note-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: .9em;
  color: #666
}
.pv-note-content {
  white-space: pre-wrap
}
.pv-program-item {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px
}
.pv-program-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.pv-program-actions {
  display: flex;
  gap: 10px
}
.pv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px
}
.pv-edit-toggle-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.pv-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.pv-form-group {
  margin-bottom: 20px
}
.pv-form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: 700
}
.pv-form-group input,
.pv-form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff
}
.pv-form-group input:disabled,
.pv-form-group select:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed
}
.pv-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px
}
.pv-cancel-btn,
.pv-save-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.pv-save-btn {
  background: #28a745;
  color: #fff
}
.pv-cancel-btn {
  background: #dc3545;
  color: #fff
}
.pt-patient-actions {
  display: none
}
.pt-patients-sidebar {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  overflow-y: auto;
  max-height: calc(100vh - 150px)
}
.pt-patients-main {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  overflow-y: auto;
  max-height: calc(100vh - 150px)
}
.pt-no-patient-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666
}
.pt-no-patient-selected i {
  font-size: 48px;
  margin-bottom: 20px;
  color: #ddd
}
.pv-risk-summary {
  display: flex;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  justify-content: space-around
}
.pv-risk-level-container,
.pv-risk-score-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px
}
.pv-risk-level-label,
.pv-risk-score-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px
}
.pv-risk-level-value,
.pv-risk-score-value {
  font-size: 24px;
  font-weight: 700;
  color: #333
}
.pv-risk-high {
  color: #d32f2f;
  background-color: rgba(211,47,47,.1);
  padding: 5px 15px;
  border-radius: 4px
}
.pv-risk-urgent {
  color: #f57c00;
  background-color: rgba(245,124,0,.1);
  padding: 5px 15px;
  border-radius: 4px
}
.pv-risk-standard {
  color: #388e3c;
  background-color: rgba(56,142,60,.1);
  padding: 5px 15px;
  border-radius: 4px
}
.pv-files-panel {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.pv-files-actions {
  display: flex;
  gap: 10px
}
.pv-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.pv-files-breadcrumb {
  margin: 15px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px
}
.pv-breadcrumb-home,
.pv-breadcrumb-item {
  cursor: pointer;
  color: #007bff
}
.pv-breadcrumb-home:hover,
.pv-breadcrumb-item:hover {
  text-decoration: underline
}
.pv-files-dropzone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
  transition: .3s
}
.pv-files-dropzone.active {
  border-color: #007bff;
  background-color: rgba(0,123,255,.1)
}
.pv-dropzone-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666
}
.pv-dropzone-message i {
  font-size: 48px;
  margin-bottom: 10px;
  color: #ccc
}
.pv-files-container {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: 15px
}
.pv-file-item,
.pv-folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: .3s
}
.pv-file-item:hover,
.pv-folder-item:hover {
  background-color: #f8f9fa
}
.pv-file-icon,
.pv-folder-icon {
  font-size: 36px;
  margin-bottom: 10px
}
.pv-folder-icon {
  color: #ffc107
}
.pv-file-name,
.pv-folder-name {
  text-align: center;
  word-break: break-word;
  font-size: .9em
}
.pv-file-actions,
.pv-folder-actions {
  display: flex;
  gap: 5px;
  margin-top: 10px
}
.pv-file-action,
.pv-folder-action {
  font-size: .8em;
  padding: 3px 8px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.pv-file-action:hover,
.pv-folder-action:hover {
  background: #e0e0e0
}
.pv-create-folder-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000
}
.pv-modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 300px
}
.pv-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px
}
.pv-modal-close {
  cursor: pointer;
  font-size: 1.2em
}
.pv-modal-form {
  display: flex;
  flex-direction: column;
  gap: 15px
}
.pv-modal-input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.pv-modal-submit {
  padding: 8px 16px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.ar-pipeline-graph-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.ar-pipeline-render-container {
  height: 100%!important
}
.ar-pipeline-manifest-container {
  width: 100%;
  height: 100%;
  overflow: hidden
}
.ar-pipeline-graph-container svg {
  width: 100%!important;
  height: 100%!important;
  max-width: none!important
}
.ar-pipeline-graph-container .artifact-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10
}
.ar-pipeline-graph-container .node rect {
  stroke-width: 2px
}
.ar-pipeline-graph-container .edgeLabel {
  background-color: #fff
}
.ar-pipeline-graph-container .edgePath path {
  stroke-width: 2px
}
.practitioners-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 2rem
}
.practitioners-tabs .tab-link {
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px
}
.practitioners-tabs .tab-link.active {
  border-color: #ddd #ddd #fff;
  color: #06c
}
.dashboard-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem
}
.stat-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 1.5rem;
  width: 30%;
  text-align: center
}
.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 1rem 0;
  color: #06c
}
.stat-link {
  display: inline-block;
  color: #06c;
  text-decoration: none;
  cursor: pointer
}
.dashboard-tabs {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  overflow: hidden
}
.tabs-header {
  display: flex;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd
}
.tabs-header .tab-link {
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #333;
  font-weight: 500
}
.tabs-header .tab-link.active {
  background-color: #fff;
  border-bottom: 3px solid #06c;
  color: #06c
}
.tab-content {
  display: none;
  padding: 1.5rem
}
.tab-content.active {
  display: block
}
.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem
}
.search-filter {
  display: flex;
  gap: .5rem
}
.search-filter input,
.search-filter select {
  padding: .5rem;
  border: 1px solid #ddd;
  border-radius: 4px
}
.form-row {
  display: flex;
  gap: 1rem
}
.form-row .form-group {
  flex: 1
}
.list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 1rem
}
.form-card,
.patient-card,
.task-card {
  background-color: #f9f9f9;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.1)
}
.form-title,
.patient-name,
.task-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: .5rem
}
.form-info,
.patient-info,
.task-info {
  margin-bottom: 1rem;
  color: #666
}
.task-description {
  font-size: .9rem;
  margin-bottom: 1rem
}
.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.task-priority {
  text-transform: uppercase
}
.task-card.overdue {
  border-left: 3px solid #c62828
}
.task-card.completed {
  opacity: .7;
  background-color: #f0f0f0
}
.task-progress {
  margin: 10px 0
}
.task-progress .progress-bar {
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px
}
.task-progress .progress-fill {
  height: 100%;
  background-color: #4caf50;
  border-radius: 4px
}
.task-progress .progress-text {
  font-size: .8rem;
  color: #666;
  text-align: right
}
.form-actions,
.patient-actions,
.task-actions {
  display: flex;
  gap: .5rem
}
.form-actions button,
.patient-actions button,
.task-actions button {
  padding: .4rem .8rem;
  border: none;
  border-radius: 4px;
  background-color: #06c;
  color: #fff;
  cursor: pointer
}
.form-actions button:hover,
.patient-actions button:hover,
.task-actions button:hover {
  background-color: #05a
}
.complete-task-btn {
  background-color: #4caf50!important
}
.complete-task-btn:hover {
  background-color: #388e3c!important
}
.reopen-task-btn {
  background-color: #ff9800!important
}
.reopen-task-btn:hover {
  background-color: #f57c00!important
}
#calendar-container,
#dashboard-calendar-container {
  margin-top: 1rem
}
.calendar-grid {
  display: grid;
  gap: .5rem
}
.calendar-header {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: .5rem;
  text-align: center;
  font-weight: 700;
  background-color: #f5f5f5;
  padding: .5rem
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: .5rem
}
.week-view .calendar-days {
  grid-template-columns: repeat(7,1fr)
}
.week-days .calendar-day {
  min-height: 150px
}
.calendar-day-view {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff
}
.day-header {
  background-color: #f5f5f5;
  padding: 1rem;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid #ddd
}
.day-schedule {
  display: flex;
  flex-direction: column
}
.time-slot {
  display: flex;
  border-bottom: 1px solid #eee;
  min-height: 60px
}
.time-label {
  width: 80px;
  padding: .5rem;
  background-color: #f9f9f9;
  border-right: 1px solid #eee;
  font-weight: 500;
  text-align: right
}
.time-events {
  flex: 1;
  padding: .5rem;
  position: relative
}
.day-event {
  background-color: #e6f2ff;
  border-left: 3px solid #06c;
  padding: .5rem;
  margin-bottom: .5rem;
  border-radius: 4px;
  cursor: pointer
}
.day-event:hover {
  background-color: #d4e6f9
}
.add-time-slot-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #06c;
  color: #fff;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}
.add-time-slot-btn:hover {
  background-color: #05a
}
.calendar-day {
  min-height: 100px;
  border: 1px solid #ddd;
  padding: .5rem;
  position: relative
}
.calendar-day.empty {
  background-color: #f5f5f5
}
.calendar-day-header {
  text-align: center;
  font-weight: 700;
  margin-bottom: .5rem;
  background-color: #f0f0f0;
  padding: .5rem
}
.day-number {
  font-weight: 700;
  margin-bottom: .5rem
}
.calendar-event {
  background-color: #e6f2ff;
  border-left: 3px solid #06c;
  padding: .3rem;
  margin-bottom: .3rem;
  font-size: .9rem;
  cursor: pointer
}
.calendar-event:hover {
  background-color: #d4e6f9
}
.event-time {
  font-size: .8rem;
  font-weight: 700
}
.event-title {
  font-weight: 500
}
.event-patient {
  font-size: .8rem;
  color: #666
}
.add-appointment-btn {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #06c;
  color: #fff;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}
.add-appointment-btn:hover {
  background-color: #05a
}
.calendar-controls {
  display: flex;
  align-items: center;
  gap: 1rem
}
.calendar-controls button {
  padding: .4rem .8rem;
  border: none;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer
}
.calendar-controls button:hover {
  background-color: #e0e0e0
}
#current-month,
#dashboard-current-month {
  font-weight: 700;
  font-size: 1.1rem
}
.empty-state,
.loading {
  grid-column: 1/-1;
  text-align: center;
  padding: 2rem;
  color: #666
}
.error-message {
  grid-column: 1/-1;
  text-align: center;
  padding: 2rem;
  color: #c00
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem
}
.header-actions {
  display: flex;
  gap: 1rem
}
.primary-button {
  padding: .6rem 1.2rem;
  background-color: #06c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.secondary-button {
  padding: .6rem 1.2rem;
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer
}
.text-button {
  padding: .6rem 1.2rem;
  background-color: transparent;
  color: #06c;
  border: none;
  cursor: pointer
}
.search-filter-container {
  margin-bottom: 1.5rem
}
.view-controls {
  display: flex;
  gap: .5rem
}
.view-btn {
  padding: .4rem .8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer
}
.view-btn.active {
  background-color: #06c;
  color: #fff;
  border-color: #06c
}
.calendar-appointment-detail-modal,
.calendar-appointment-edit-modal,
.calendar-appointment-modal,
.manage-patients-modal,
.patient-detail-modal,
.task-creation-modal,
.task-delete-modal,
.task-detail-modal,
.task-edit-modal,
.task-log-time-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  overflow-y: auto;
  padding: 20px 0 50px
}
.calendar-appointment-detail-modal-content,
.calendar-appointment-edit-modal-content,
.calendar-appointment-modal-content,
.manage-patients-modal-content,
.patient-detail-modal-content,
.task-creation-modal-content,
.task-delete-modal-content,
.task-detail-modal-content,
.task-edit-modal-content,
.task-log-time-modal-content {
  background-color: #fff;
  margin: 5vh auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
  max-height: 90vh;
  overflow-y: auto
}
.task-detail-edit-mode .form-control {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px
}
.task-detail-edit-mode textarea.form-control {
  min-height: 100px
}
.task-status-bar .task-detail-edit-mode {
  display: flex;
  gap: 10px
}
.task-status-bar .task-detail-edit-mode select {
  flex: 1
}
.patient-detail-modal-content,
.task-detail-modal-content {
  max-width: 1200px
}
.task-creation-modal-content,
.task-delete-modal-content,
.task-edit-modal-content,
.task-log-time-modal-content {
  max-width: 600px
}
.appointmentDetailModal-close,
.appointmentEditModal-close,
.appointmentModal-close,
.close-modal,
.managePatients-close,
.task-delete-close-modal,
.task-detail-close-modal,
.task-edit-close-modal,
.task-log-time-close-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer
}
.appointmentDetailModal-close:hover,
.appointmentEditModal-close:hover,
.appointmentModal-close:hover,
.close-modal:hover,
.managePatients-close:hover,
.task-delete-close-modal:hover,
.task-detail-close-modal:hover,
.task-edit-close-modal:hover,
.task-log-time-close-modal:hover {
  color: #000
}
.manage-patients-modal-content {
  max-width: 800px
}
.practitioner-selection-container {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px
}
.practitioner-selection-container label {
  font-weight: 700;
  margin-right: 10px
}
.practitioner-selection-container select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  min-width: 200px
}
.patient-assignment-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-left: 3px solid #06c;
  box-shadow: 0 1px 3px rgba(0,0,0,.1)
}
.patient-assignment-info {
  flex: 1
}
.patient-assignment-name {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 1.1em
}
.patient-assignment-details {
  font-size: .9em;
  color: #666;
  line-height: 1.4
}
.current-assignment {
  margin-top: 5px;
  font-style: italic;
  color: #06c
}
.patient-assignment-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px
}
.assignment-dropdown {
  display: flex;
  flex-direction: column;
  gap: 5px
}
.assignment-dropdown label {
  font-weight: 500
}
.patient-assignment-controls select {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 100%
}
.assignment-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px
}
.assign-patient-btn,
.remove-patient-btn {
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500
}
.assign-patient-btn {
  background-color: #06c;
  color: #fff
}
.assign-patient-btn:hover {
  background-color: #05a
}
.remove-patient-btn {
  background-color: #dc3545;
  color: #fff
}
.remove-patient-btn:hover {
  background-color: #c82333
}
.primary-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: .9em
}
.primary-checkbox input {
  margin: 0
}
.rc-container {
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  height: calc(100vh - 100px)
}
.rc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.rc-tabs {
  display: flex;
  gap: 10px
}
.rc-tab-btn {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: .3s
}
.rc-tab-btn.active {
  background: #007bff;
  color: #fff
}
.rc-tab-content {
  display: none;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.rc-tab-content.active {
  display: block
}
.rc-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center
}
.rc-search-input,
.rc-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 200px
}
.rc-create-btn {
  padding: 8px 16px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .3s
}
.rc-create-btn:hover {
  background: #218838
}
.rc-job-ad-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  cursor: pointer;
  transition: .3s
}
.rc-job-ad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.15)
}
.rc-job-ad-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.rc-job-ad-title {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0
}
.rc-job-ad-type {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8em;
  text-transform: uppercase
}
.rc-job-ad-type.permanent {
  background: #e3f2fd;
  color: #0d47a1
}
.rc-job-ad-type.contract {
  background: #fff8e1;
  color: #ff8f00
}
.rc-job-ad-details {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap
}
.rc-job-ad-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .9em;
  color: #666
}
.rc-job-ad-status {
  display: flex;
  align-items: center;
  gap: 5px
}
.rc-status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8em
}
.rc-status-active {
  background: #e8f5e9;
  color: #2e7d32
}
.rc-status-inactive {
  background: #ffebee;
  color: #c62828
}
.rc-job-ad-applications {
  font-size: .9em;
  color: #666
}
.rc-application-card {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  cursor: pointer;
  transition: .3s
}
.rc-application-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.15)
}
.rc-application-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}
.rc-applicant-name {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0
}
.rc-application-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8em;
  text-transform: uppercase
}
.rc-status-new {
  background: #e3f2fd;
  color: #0d47a1
}
.rc-status-reviewing {
  background: #fff8e1;
  color: #ff8f00
}
.rc-status-interview {
  background: #e8f5e9;
  color: #2e7d32
}
.rc-status-offer {
  background: #f3e5f5;
  color: #7b1fa2
}
.rc-status-rejected {
  background: #ffebee;
  color: #c62828
}
.rc-status-hired {
  background: #e8f5e9;
  color: #2e7d32
}
.rc-application-details {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  flex-wrap: wrap
}
.rc-application-detail {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .9em;
  color: #666
}
.rc-application-job {
  font-weight: 700;
  color: #333
}
.rc-detail-view {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.rc-detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px
}
.rc-back-btn {
  padding: 8px 16px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px
}
.rc-detail-title {
  margin: 0;
  flex-grow: 1
}
.rc-form {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 20px
}
.rc-form-group {
  margin-bottom: 15px
}
.rc-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 700
}
.rc-form-group input,
.rc-form-group select,
.rc-form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.rc-form-group textarea {
  resize: vertical
}
.rc-form-actions {
  grid-column: 1/-1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px
}
.rc-delete-btn,
.rc-save-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.rc-save-btn {
  background: #28a745;
  color: #fff
}
.rc-delete-btn {
  background: #dc3545;
  color: #fff
}
.rc-list-container {
  margin-bottom: 10px
}
.rc-list-item {
  display: flex;
  gap: 10px;
  margin-bottom: 5px
}
.rc-remove-item-btn {
  background: 0 0;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 0;
  font-size: 1.2em
}
.rc-add-item-btn {
  background: 0 0;
  border: 1px solid #007bff;
  color: #007bff;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer
}
.rc-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5)
}
.rc-modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  position: relative
}
.rc-close {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer
}
.rc-submit-btn {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px
}
.rc-application-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px
}
.rc-app-tab-btn {
  padding: 8px 16px;
  background: 0 0;
  border: none;
  cursor: pointer;
  position: relative
}
.rc-app-tab-btn.active {
  color: #007bff;
  font-weight: 700
}
.rc-app-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #007bff
}
.rc-application-tab-content {
  display: none
}
.rc-application-tab-content.active {
  display: block
}
.rc-forms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px
}
.rc-assign-form-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.rc-form-item {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.rc-form-title {
  font-weight: 700
}
.rc-form-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: .8em
}
.rc-status-assigned {
  background: #e3f2fd;
  color: #0d47a1
}
.rc-status-in_progress {
  background: #fff8e1;
  color: #ff8f00
}
.rc-status-completed {
  background: #e8f5e9;
  color: #2e7d32
}
.rc-files-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px
}
.rc-files-actions {
  display: flex;
  gap: 10px
}
.rc-btn {
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.rc-files-breadcrumb {
  margin: 15px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px
}
.rc-breadcrumb-home,
.rc-breadcrumb-item {
  cursor: pointer;
  color: #007bff
}
.rc-breadcrumb-home:hover,
.rc-breadcrumb-item:hover {
  text-decoration: underline
}
.rc-files-dropzone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
  transition: .3s
}
.rc-files-dropzone.active {
  border-color: #007bff;
  background-color: rgba(0,123,255,.1)
}
.rc-dropzone-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666
}
.rc-dropzone-message i {
  font-size: 48px;
  margin-bottom: 10px;
  color: #ccc
}
.rc-files-container {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: 15px
}
.rc-file-item,
.rc-folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: .3s
}
.rc-file-item:hover,
.rc-folder-item:hover {
  background-color: #f8f9fa
}
.rc-file-icon,
.rc-folder-icon {
  font-size: 36px;
  margin-bottom: 10px
}
.rc-folder-icon {
  color: #ffc107
}
.rc-file-name,
.rc-folder-name {
  text-align: center;
  word-break: break-word;
  font-size: .9em
}
.rc-file-actions,
.rc-folder-actions {
  display: flex;
  gap: 5px;
  margin-top: 10px
}
.rc-file-action,
.rc-folder-action {
  font-size: .8em;
  padding: 3px 8px;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.rc-file-action:hover,
.rc-folder-action:hover {
  background: #e0e0e0
}
.rv-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px
}
.rv-nav {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  height: fit-content
}
.rv-nav-header {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  text-align: center
}
.rv-profile-pic {
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0
}
.rv-profile-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.rv-user-name {
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 5px
}
.rv-user-email,
.rv-user-role {
  color: #666;
  font-size: .9em
}
.rv-nav-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.rv-nav-btn {
  padding: 10px;
  border: none;
  background: 0 0;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: .3s
}
.rv-nav-btn:hover {
  background: #f0f0f0
}
.rv-nav-btn.active {
  background: #007bff;
  color: #fff
}
.rv-forms-panel,
.rv-new-referral-panel,
.rv-referrals-panel {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.rv-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}
.rv-filter-controls {
  display: flex;
  gap: 10px
}
.rv-filter-select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 150px
}
.rv-referral-item {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
  border-left: 4px solid #ddd
}
.rv-status-referred {
  border-left-color: #ffc107
}
.rv-status-in_progress {
  border-left-color: #17a2b8
}
.rv-status-todo {
  border-left-color: #dc3545
}
.rv-referral-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}
.rv-status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: .8em;
  text-transform: uppercase
}
.rv-referral-details {
  color: #666;
  font-size: .9em
}
.rv-referral-actions {
  margin-top: 15px;
  text-align: right
}
.rv-view-btn {
  padding: 6px 12px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.rv-form-item {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.rv-form-info {
  flex: 1
}
.rv-form-title {
  font-weight: 700;
  margin-bottom: 5px
}
.rv-form-date {
  color: #666;
  font-size: .9em
}
.rv-form-actions {
  display: flex;
  align-items: center;
  gap: 10px
}
.rv-form-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: .8em;
  background: #f0f0f0
}
.rv-btn-start {
  padding: 6px 12px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer
}
.rv-new-referral-form {
  max-width: 600px;
  margin: 0 auto
}
.rv-form-group {
  margin-bottom: 20px
}
.rv-form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: 700
}
.rv-form-group input,
.rv-form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.rv-submit-btn {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px
}
:root {
  --primary-color: #0066FF;
  --secondary-color: #00C2FF;
  --text-color: #333333;
  --background-color: #FFFFFF;
  --gradient: linear-gradient(90deg, var(--primary-color), var(--secondary-color))
}
.task-detail-container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem
}
.back-link {
  display: inline-block;
  margin-bottom: .5rem;
  color: #06c;
  text-decoration: none
}
.back-link:hover {
  text-decoration: underline
}
.header-left {
  display: flex;
  flex-direction: column
}
.task-main-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}
.sidebar-card,
.task-comments-section,
.task-info-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  padding: 1.5rem
}
.task-status-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee
}
.task-priority,
.task-status {
  padding: .3rem .8rem;
  border-radius: 20px;
  font-size: .9rem;
  font-weight: 500
}
.task-status.to-do {
  background-color: #e3f2fd;
  color: #0277bd
}
.task-status.in-progress {
  background-color: #e8f5e9;
  color: #2e7d32
}
.task-status.review {
  background-color: #fff8e1;
  color: #ff8f00
}
.task-status.blocked {
  background-color: #ffebee;
  color: #c62828
}
.task-status.completed {
  background-color: #f5f5f5;
  color: #424242
}
.task-priority.high {
  background-color: #ffebee;
  color: #c62828
}
.task-priority.medium {
  background-color: #fff8e1;
  color: #ff8f00
}
.task-priority.low {
  background-color: #e8f5e9;
  color: #2e7d32
}
.task-attachments-section,
.task-description-section,
.task-progress-section,
.task-time-section {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee
}
.sidebar-card h3,
.task-attachments-section h3,
.task-comments-section h3,
.task-description-section h3,
.task-progress-section h3,
.task-time-section h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333
}
.task-description {
  line-height: 1.5;
  color: #444;
  white-space: pre-line
}
.progress-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem
}
.progress-bar {
  flex: 1;
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  overflow: hidden
}
.progress-fill {
  height: 100%;
  background-color: #4caf50;
  border-radius: 5px;
  transition: width .3s
}
.progress-percentage {
  font-weight: 700;
  color: #333
}
.progress-update {
  display: flex;
  align-items: center;
  gap: 1rem
}
#progress-slider {
  flex: 1
}
.time-tracking-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem
}
.time-item {
  display: flex;
  flex-direction: column;
  align-items: center
}
.time-label {
  font-size: .8rem;
  color: #666
}
.time-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333
}
.log-time-form {
  display: flex;
  gap: .5rem
}
#log-hours {
  width: 80px
}
.attachments-list {
  margin-bottom: 1rem
}
.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem;
  background-color: #f9f9f9;
  border-radius: 4px;
  margin-bottom: .5rem
}
.attachment-info {
  display: flex;
  align-items: center;
  gap: .5rem
}
.attachment-icon {
  color: #06c
}
.attachment-name {
  font-weight: 500
}
.attachment-meta {
  font-size: .8rem;
  color: #666
}
.attachment-actions a {
  color: #06c;
  text-decoration: none;
  margin-left: .5rem
}
.attachment-actions a:hover {
  text-decoration: underline
}
.comments-list {
  margin-bottom: 1.5rem
}
.comment-item {
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 1rem
}
.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem
}
.comment-author {
  font-weight: 500
}
.comment-date {
  font-size: .8rem;
  color: #666
}
.comment-content {
  line-height: 1.5;
  white-space: pre-line
}
.comment-form {
  display: flex;
  flex-direction: column;
  gap: .5rem
}
#comment-input {
  min-height: 100px;
  padding: .5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical
}
#add-comment-btn {
  align-self: flex-end
}
.task-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}
.detail-item {
  display: flex;
  margin-bottom: .8rem
}
.detail-label {
  width: 100px;
  font-weight: 500;
  color: #666
}
.detail-value {
  flex: 1
}
.labels-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}
.label-tag {
  padding: .2rem .5rem;
  background-color: #e3f2fd;
  color: #0277bd;
  border-radius: 4px;
  font-size: .8rem
}
.history-list {
  max-height: 400px;
  overflow-y: auto
}
.history-item {
  padding: .8rem 0;
  border-bottom: 1px solid #eee
}
.history-item:last-child {
  border-bottom: none
}
.history-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: .3rem
}
.history-user {
  font-weight: 500
}
.history-date {
  font-size: .8rem;
  color: #666
}
.history-content {
  font-size: .9rem;
  color: #444
}
.history-field {
  font-weight: 500
}
.history-old-value {
  text-decoration: line-through;
  color: #c62828
}
.history-new-value {
  color: #2e7d32
}
.empty-state {
  padding: 1rem;
  text-align: center;
  color: #666;
  font-style: italic;
  background-color: #f9f9f9;
  border-radius: 4px
}
.small-button {
  padding: .4rem .8rem;
  border: none;
  border-radius: 4px;
  background-color: #06c;
  color: #fff;
  cursor: pointer;
  font-size: .9rem
}
.small-button:hover {
  background-color: #05a
}
.danger-button {
  background-color: #c62828;
  color: #fff
}
.danger-button:hover {
  background-color: #b71c1c
}
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  min-width: 160px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  border-radius: 4px;
  z-index: 1
}
.dropdown-menu a {
  display: block;
  padding: .8rem 1rem;
  text-decoration: none;
  color: #333
}
.dropdown-menu a:hover {
  background-color: #f5f5f5
}
.dropdown-menu a.danger {
  color: #c62828
}
.dropdown:hover .dropdown-menu {
  display: block
}
.modal-content {
  margin: 5% auto;
  box-shadow: 0 4px 8px rgba(0,0,0,.1)
}
.close-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer
}
.close-modal:hover {
  color: #000
}
.form-group {
  margin-bottom: 15px
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px
}
.form-group textarea {
  min-height: 100px;
  resize: vertical
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px
}
.timeline-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  padding: 20px
}
.timeline-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  margin-bottom: 10px
}
.timeline-controls button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer
}
.timeline-date-range {
  display: flex;
  gap: 10px
}
.timeline-workspace {
  display: flex;
  flex: 1;
  gap: 20px;
  min-height: 0
}
.timeline-sidebar {
  width: 250px;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  flex-direction: column
}
.sidebar-controls {
  padding: 10px;
  border-bottom: 1px solid #ddd
}
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px
}
.timeline-main {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  overflow: hidden
}
#timeline-vis {
  width: 100%;
  height: 100%
}
.timeline-statusbar {
  margin-top: 10px;
  padding: 5px 10px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: .9em
}
.vis-timeline {
  border: none
}
.vis-point {
  width: 8px!important;
  height: 8px!important;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  cursor: pointer
}
.vis-point .timeline-chat,
.vis-point .timeline-task {
  display: none
}
.task-tooltip {
  padding: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1)
}
.vis-point:hover {
  transform: scale(1.2)
}
.vis-point:hover::before {
  transform: rotate(45deg) scale(1.2)
}
.vis-item.vis-dot {
  display: none
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0,0,0,.4)
}
.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  border-radius: 10px;
  max-height: 90vh;
  overflow-y: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer
}
.close:focus,
.close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer
}
.modal-body {
  display: flex;
  align-items: center
}
.modal-text {
  flex: 1;
  padding-right: 20px
}
.modal-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align: center;
  color: var(--primary-color)
}
.modal-text p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem
}
.modal-text .cta-button {
  background-color: var(--primary-color);
  color: var(--background-color);
  font-size: 1.1rem;
  padding: 12px 24px;
  display: block;
  margin: 0 auto;
  width: fit-content
}
.modal-text .cta-button:hover {
  background-color: var(--secondary-color)
}
.modal-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center
}
.modal-image img {
  max-width: 100%;
  height: auto
}
@media (max-width:768px) {
  .modal-body {
    flex-direction: column
  }
  .modal-text {
    padding-right: 0;
    padding-bottom: 20px
  }
}
body.modal-open {
  overflow: hidden
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px
}
header {
  background-color: var(--background-color);
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0
}
.logo img {
  height: 40px
}
nav ul {
  list-style-type: none;
  padding: 0;
  display: flex
}
nav ul li {
  margin-left: 20px
}
nav ul li a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 600;
  transition: color .3s;
  padding: 8px 16px;
  display: inline-block
}
.dropdown {
  position: relative;
  display: inline-block
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
  z-index: 1
}
.dropdown-content a {
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block
}
nav ul li a:hover {
  color: var(--primary-color)
}
.nav-cta,
.nav-login {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 5px;
  font-weight: 700;
  transition: background-color .3s,color .3s,outline .3s;
  text-align: center;
  line-height: 1.5
}
.nav-cta {
  background-color: var(--primary-color);
  color: var(--background-color)!important;
  border: 2px solid var(--primary-color)
}
.nav-cta:hover {
  background-color: var(--background-color);
  color: var(--primary-color)!important;
  outline: 0
}
.nav-login {
  background-color: var(--background-color);
  color: var(--primary-color)!important;
  border: 2px solid var(--primary-color)
}
.nav-login:hover {
  background-color: var(--primary-color);
  color: var(--background-color)!important;
  outline: 0
}
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer
}
.menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: var(--text-color);
  margin: 2px 0;
  transition: .4s
}
@media (max-width:768px) {
  nav {
    flex-wrap: wrap
  }
  .logo {
    flex: 1
  }
  .menu-toggle {
    display: flex;
    order: 2
  }
  nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 3;
    margin-top: 1rem;
    background-color: var(--background-color);
    box-shadow: 0 2px 5px rgba(0,0,0,.1)
  }
  nav ul.show {
    display: flex
  }
  nav ul li {
    margin: 0;
    text-align: center
  }
  nav ul li a {
    display: block;
    padding: 15px
  }
  .nav-cta,
  .nav-login {
    margin: 10px 0
  }
}
main {
  padding-bottom: 40px;
  min-height: calc(100vh - 120px - 200px)
}
.single-pane-content .free-offer {
  font-style: italic;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 1.2rem;
  font-weight: 700;
  background-color: rgba(0,102,255,.1);
  padding: 1rem;
  border-radius: 5px
}
.single-pane-content .button-group {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem
}
.single-pane-content .cta-button {
  flex: 1;
  text-align: center
}
.single-pane-content .cta-button-primary {
  background-color: var(--primary-color);
  color: var(--background-color)
}
.single-pane-content .cta-button-primary:hover {
  background-color: var(--secondary-color)
}
.no-code-integration {
  background-color: var(--primary-color);
  color: var(--background-color);
  padding: 4rem 0
}
.no-code-integration .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.no-code-content {
  flex: 1;
  padding-right: 2rem
}
.no-code-image {
  flex: 1
}
.no-code-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px
}
.no-code-integration h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--background-color)
}
.no-code-integration p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.no-code-integration ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem
}
.no-code-integration ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.no-code-integration ul li::before {
  content: "✓";
  color: var(--secondary-color);
  position: absolute;
  left: 0
}
.no-code-integration .cta-button {
  background-color: var(--background-color);
  color: var(--primary-color)
}
.no-code-integration .cta-button:hover {
  background-color: var(--secondary-color);
  color: var(--background-color)
}
.flow-builder {
  padding: 4rem 0;
  background-color: #f8f9fa
}
.nxgenius {
  background-color: var(--primary-color);
  color: var(--background-color);
  padding: 4rem 0
}
.nxgenius .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.nxgenius-content {
  flex: 1;
  padding-right: 2rem
}
.nxgenius-image {
  flex: 1
}
.nxgenius-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px
}
.nxgenius h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--background-color)
}
.nxgenius p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.nxgenius ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem
}
.nxgenius ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.nxgenius ul li::before {
  content: "✓";
  color: var(--secondary-color);
  position: absolute;
  left: 0
}
.nxgenius .cta-button {
  background-color: var(--background-color);
  color: var(--primary-color)
}
.nxgenius .cta-button:hover {
  background-color: var(--secondary-color);
  color: var(--background-color)
}
.flow-builder .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.flow-builder-image {
  flex: 1;
  padding-right: 2rem
}
.flow-builder-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px
}
.flow-builder-content {
  flex: 1
}
.flow-builder-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color)
}
.flow-builder-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.flow-builder-content ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem
}
.flow-builder-content ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.flow-builder-content ul li::before {
  content: "✓";
  color: var(--primary-color);
  position: absolute;
  left: 0
}
.rl-optimization {
  background-color: var(--primary-color);
  color: var(--background-color);
  padding: 4rem 0
}
.rl-optimization .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.rl-content {
  flex: 1;
  padding-right: 2rem
}
.rl-image {
  flex: 1
}
.rl-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px
}
.rl-optimization h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--background-color)
}
.rl-optimization p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.rl-optimization ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem
}
.rl-optimization ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.rl-optimization ul li::before {
  content: "✓";
  color: var(--secondary-color);
  position: absolute;
  left: 0
}
.rl-optimization .cta-button {
  background-color: var(--background-color);
  color: var(--primary-color)
}
.rl-optimization .cta-button:hover {
  background-color: var(--secondary-color);
  color: var(--background-color)
}
.testimonials {
  background-color: var(--background-color);
  padding: 4rem 0
}
.testimonials h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--primary-color)
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem
}
.testimonial-card {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: transform .3s,box-shadow .3s
}
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,.15)
}
.testimonial-card p:first-child {
  font-style: italic;
  margin-bottom: 1rem
}
.testimonial-card h4 {
  font-size: 1.2rem;
  margin-bottom: .5rem;
  color: var(--primary-color)
}
.testimonial-card p:last-child {
  font-size: .9rem;
  color: #666
}
.faq {
  background-color: var(--primary-color);
  color: var(--background-color);
  padding: 4rem 0
}
.faq h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem
}
.faq-list {
  max-width: 800px;
  margin: 0 auto
}
.faq-item {
  background-color: rgba(255,255,255,.1);
  border-radius: 5px;
  margin-bottom: 1rem;
  overflow: hidden
}
.faq-question {
  font-size: 1.2rem;
  padding: 1rem;
  cursor: pointer;
  margin: 0;
  position: relative
}
.faq-question::after {
  content: '+';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  transition: transform .3s
}
.faq-item.active .faq-question::after {
  transform: translateY(-50%) rotate(45deg)
}
.faq-answer {
  padding: 0 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s,padding .3s
}
.faq-item.active .faq-answer {
  padding: 1rem;
  max-height: 1000px
}
@media (max-width:768px) {
  .flow-builder .container,
  .no-code-integration .container,
  .rl-optimization .container,
  .single-pane-view .container {
    flex-direction: column
  }
  .flow-builder-image,
  .no-code-image,
  .rl-image,
  .single-pane-image {
    padding-right: 0;
    margin-bottom: 2rem
  }
  .flow-builder-content,
  .no-code-content,
  .rl-content,
  .single-pane-content {
    padding-right: 0;
    margin-top: 2rem
  }
  .testimonial-grid {
    grid-template-columns: 1fr
  }
}
footer {
  background-color: #333;
  color: var(--background-color);
  padding: 3rem 0
}
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem
}
.footer-logo img {
  height: 40px
}
.footer-links ul {
  list-style-type: none;
  padding: 0;
  display: flex
}
.footer-links ul li {
  margin-right: 20px
}
.footer-links ul li a {
  color: var(--background-color);
  text-decoration: none
}
.footer-social a {
  margin-left: 10px
}
.footer-social img {
  width: 24px;
  height: 24px
}
.contact-content {
  padding-top: 60px
}
.contact-content .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}
.contact-form {
  flex: 0 0 60%;
  padding-right: 40px
}
.contact-info {
  flex: 0 0 35%
}
.contact-form form {
  max-width: 100%
}
.contact-form input,
.contact-form label,
.contact-form textarea {
  display: block;
  margin-bottom: 10px;
  width: 100%
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  font-family: Sen,sans-serif;
  font-size: 16px
}
.contact-form button {
  background: var(--gradient);
  color: var(--background-color);
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  transition: opacity .3s
}
.contact-form button:hover {
  opacity: .9
}
@media (max-width:768px) {
  .contact-content .container {
    flex-direction: column
  }
  .contact-form,
  .contact-info {
    flex: 0 0 100%;
    padding-right: 0
  }
  .contact-info {
    margin-top: 40px
  }
  nav {
    flex-direction: column;
    align-items: flex-start
  }
  nav ul {
    flex-direction: column;
    width: 100%;
    margin-top: 1rem
  }
  nav ul li {
    margin-left: 0;
    margin-bottom: .5rem
  }
  .nav-cta,
  .nav-login {
    width: 100%;
    margin-top: .5rem
  }
  .hero .container {
    flex-direction: column
  }
  .hero-content {
    padding-right: 0;
    text-align: center;
    margin-bottom: 2rem
  }
  .hero h1 {
    font-size: 2.5rem
  }
  .hero p {
    font-size: 1.1rem
  }
  .features {
    flex-direction: column
  }
  .feature {
    margin-bottom: 2rem
  }
  .footer-content {
    flex-direction: column;
    text-align: center
  }
  .footer-links ul {
    flex-direction: column;
    margin-top: 1rem
  }
  .footer-links ul li {
    margin-right: 0;
    margin-bottom: .5rem
  }
  .footer-social {
    margin-top: 1rem
  }
}
@media (max-width:480px) {
  .hero h1 {
    font-size: 2rem
  }
  .hero p {
    font-size: 1rem
  }
}
.about-main .hero {
  background: url('/images/hero-panel.svg') center center/cover no-repeat;
  color: var(--background-color);
  padding: 150px 0
}
.about-main .hero .container {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.about-main .hero-content {
  flex: 1;
  text-align: left;
  padding-right: 2rem
}
.about-main .hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem
}
.about-main .hero p {
  font-size: 1.3rem;
  margin-bottom: 2rem
}
.about-main .hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center
}
.about-main .hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px
}
.about-main .nxaspect-overview {
  padding: 4rem 0
}
.about-main .nxaspect-overview h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem
}
.about-main .nxaspect-overview p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.about-main .nxaspect-overview ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem
}
.about-main .nxaspect-overview ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.about-main .nxaspect-overview ul li::before {
  content: "✓";
  color: var(--primary-color);
  position: absolute;
  left: 0
}
.about-main .nxaspect-overview .cta-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--background-color);
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 700;
  transition: background-color .3s,color .3s
}
.about-main .nxaspect-overview .cta-button:hover {
  background-color: var(--secondary-color);
  color: var(--background-color)
}
.about-main .leadership-team {
  padding: 4rem 0;
  background-color: #f8f9fa
}
.about-main .leadership-team h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--primary-color)
}
.about-main .team-profiles {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
  justify-content: center
}
.about-main .profile {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  transition: transform .3s,box-shadow .3s
}
.about-main .profile:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,.15)
}
.about-main .profile img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 1rem
}
.about-main .profile h3 {
  font-size: 1.5rem;
  margin-bottom: .5rem;
  color: var(--primary-color)
}
.about-main .profile p {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1rem
}
.about-main .linkedin-link img {
  width: 24px;
  height: 24px;
  transition: opacity .3s
}
.about-main .linkedin-link:hover img {
  opacity: .8
}
@media (max-width:768px) {
  .about-main .hero .container {
    flex-direction: column
  }
  .about-main .hero-content {
    padding-right: 0;
    text-align: center;
    margin-bottom: 2rem
  }
  .about-main .hero h1 {
    font-size: 2.5rem
  }
  .about-main .hero p {
    font-size: 1.1rem
  }
  .about-main .team-profiles {
    grid-template-columns: 1fr
  }
}
.product-main .nxaspect-overview {
  padding: 4rem 0
}
.product-main .nxaspect-overview h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem
}
.product-main .nxaspect-overview h3 {
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color)
}
.product-main .nxaspect-overview p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.product-main .nxaspect-overview ol,
.product-main .nxaspect-overview ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem
}
.product-main .nxaspect-overview ol li,
.product-main .nxaspect-overview ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.product-main .nxaspect-overview ol li::before,
.product-main .nxaspect-overview ul li::before {
  content: "✓";
  color: var(--primary-color);
  position: absolute;
  left: 0
}
.product-main .nxaspect-overview[style*="background-color: #0066FF"] ol li::before,
.product-main .nxaspect-overview[style*="background-color: #0066FF"] ul li::before {
  color: #fff
}
.product-main .product-demo-video {
  text-align: center;
  margin-top: 2rem
}
.product-main .product-demo-video h3 {
  font-size: 1.8rem;
  color: var(--primary-color);
  margin-bottom: 1rem
}
.product-main .product-demo-video iframe {
  max-width: 100%;
  box-shadow: 0 4px 6px rgba(0,0,0,.1)
}
.product-main .cta {
  background-color: #f8f9fa;
  padding: 4rem 0;
  text-align: center
}
.product-main .cta h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem
}
.product-main .cta .cta-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 700;
  transition: background-color .3s,color .3s
}
.product-main .cta .cta-button:hover {
  background-color: var(--secondary-color);
  color: #fff
}
.nxaspect-overview {
  background-color: #fff;
  color: #333;
  padding: 4rem 0
}
.nxaspect-overview h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem
}
.nxaspect-overview h3 {
  font-size: 1.8rem;
  margin-top: 2rem;
  margin-bottom: 1rem
}
.nxaspect-overview p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.nxaspect-overview ul {
  list-style-type: none;
  padding-left: 0
}
.nxaspect-overview ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.nxaspect-overview ul li::before {
  content: "✓";
  color: #00c2ff;
  position: absolute;
  left: 0
}
.about-main .nxaspect-overview[style*="background-color: #0066FF"] ul li::before {
  color: #fff
}
.nxaspect-overview .cta-text {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1.5rem
}
.nxaspect-overview .cta-button {
  display: inline-block;
  background-color: #fff;
  color: #06f;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 700;
  transition: background-color .3s,color .3s
}
.nxaspect-overview .cta-button:hover {
  background-color: #00c2ff;
  color: #fff
}
.hero {
  background: url('/images/hero-panel.svg') center center/cover no-repeat;
  color: var(--background-color);
  padding: 150px 0
}
.hero .container {
  display: flex;
  justify-content: space-between;
  align-items: center
}
.hero-content {
  flex: 1;
  text-align: left;
  padding-right: 2rem
}
.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem
}
.hero p {
  font-size: 1.3rem;
  margin-bottom: 2rem
}
.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center
}
.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px
}
.cta-button {
  display: inline-block;
  background-color: var(--background-color);
  color: var(--primary-color);
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 700;
  transition: background-color .3s,color .3s,border .3s;
  border: 2px solid var(--primary-color)
}
.cta-button:hover {
  background-color: var(--primary-color);
  color: var(--background-color)
}
.single-pane-view {
  padding: 4rem 0;
  background-color: #f8f9fa
}
.single-pane-view .container {
  display: flex;
  align-items: center;
  justify-content: space-between
}
.single-pane-image {
  flex: 1;
  padding-right: 2rem
}
.single-pane-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px
}
.single-pane-content {
  flex: 1
}
.single-pane-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary-color)
}
.single-pane-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem
}
.single-pane-content ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem
}
.single-pane-content ul li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .5rem
}
.single-pane-content ul li::before {
  content: "✓";
  color: var(--primary-color);
  position: absolute;
  left: 0
}
@media (max-width:768px) {
  .hero .container {
    flex-direction: column
  }
  .hero-content {
    padding-right: 0;
    text-align: center;
    margin-bottom: 2rem
  }
  .hero h1 {
    font-size: 2.5rem
  }
  .hero p {
    font-size: 1.1rem
  }
  .single-pane-view .container {
    flex-direction: column
  }
  .single-pane-image {
    padding-right: 0;
    margin-bottom: 2rem
  }
}