/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --bg-main: #080D1B;
  --bg-sidebar: #101A30;
  --bg-card: #15213A;
  --bg-card-subtle: rgba(21, 33, 58, 0.7);
  --bg-input: #0c1427;
  --border-color: rgba(57, 123, 255, 0.18);
  --border-focus: #00D9FF;
  
  --accent-cyan: #00D9FF;
  --accent-blue: #397BFF;
  --accent-purple: #8B5CF6;
  --color-success: #10B981;
  --color-danger: #EF4444;
  --color-warning: #F59E0B;
  
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  --shadow-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.25);
  --shadow-glow-blue: 0 0 20px rgba(57, 123, 255, 0.25);
  --glass-backdrop: blur(12px);
  --transition-speed: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.5;
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(0, 217, 255, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  overflow-x: hidden;
}

/* Typography Headings */
h1, h2, h3, h4, h5 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

code, .mono-font, .badge-count, .char-count {
  font-family: 'JetBrains Mono', monospace;
}

/* App Container Layout */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 280px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  backdrop-filter: var(--glass-backdrop);
  transition: transform var(--transition-speed);
}

.brand-section {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-glow {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-glow-cyan);
}

.brand-logo-glow svg {
  width: 24px;
  height: 24px;
  color: #040915;
}

.brand-info h1 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.brand-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-cyan);
  letter-spacing: 0.05em;
  font-family: 'JetBrains Mono', monospace;
}

/* Navigation List */
.sidebar-nav {
  padding: 20px 14px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  padding: 10px 10px 4px 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-speed);
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  text-align: left;
}

.nav-item svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  transition: transform var(--transition-speed);
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(57, 123, 255, 0.08);
  border-color: rgba(57, 123, 255, 0.2);
}

.nav-item.active {
  color: var(--text-primary);
  background: linear-gradient(90deg, rgba(0, 217, 255, 0.15) 0%, rgba(57, 123, 255, 0.08) 100%);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.12);
}

.nav-item.active svg {
  color: var(--accent-cyan);
  transform: scale(1.05);
}

/* Sidebar Footer & System Status */
.sidebar-footer {
  padding: 18px 16px;
  border-top: 1px solid var(--border-color);
  background: rgba(8, 13, 27, 0.5);
}

.system-status-box {
  background: rgba(12, 20, 39, 0.8);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.status-row:last-child {
  margin-bottom: 0;
}

.status-row-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.indicator-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.indicator-dot.online {
  background-color: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
}

.indicator-dot.simulated {
  background-color: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
}

.indicator-dot.error {
  background-color: var(--color-danger);
  box-shadow: 0 0 8px var(--color-danger);
}

.indicator-text {
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main Workspace */
.main-content {
  margin-left: 280px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Top Navigation Bar */
.top-navbar {
  height: 72px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(16, 26, 48, 0.7);
  backdrop-filter: var(--glass-backdrop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px;
}

.module-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.module-header p {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.badge-system {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: rgba(0, 217, 255, 0.08);
  border: 1px solid rgba(0, 217, 255, 0.25);
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-cyan);
}

/* Modules Container */
.workspace-body {
  padding: 18px 22px;
  flex: 1;
  max-width: 1760px;
  width: 100%;
  margin: 0 auto;
}

.app-module.hidden {
  display: none !important;
}

/* Two-column Grid for Module 1 & 3 */
.command-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 28px;
  align-items: start;
}

/* Cards & Glassmorphism */
.ai-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-backdrop);
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.ai-card:hover {
  border-color: rgba(0, 217, 255, 0.3);
}

.input-panel {
  padding: 24px;
  position: sticky;
  top: 96px;
}

.panel-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.panel-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.panel-title svg {
  color: var(--accent-cyan);
  width: 20px;
  height: 20px;
}

/* Form Controls */
.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  transition: all var(--transition-speed);
  outline: none;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.25);
  background: #0d172e;
}

.form-textarea {
  min-height: 105px;
  resize: vertical;
  line-height: 1.5;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Toggle Switches */
.toggle-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(12, 20, 39, 0.6);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.toggle-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #1e293b;
  transition: var(--transition-speed);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-secondary);
  transition: var(--transition-speed);
  border-radius: 50%;
}

input:checked + .slider {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
}

/* Futuristic Buttons */
.btn-primary-glow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);
  color: #040915;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-speed);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.35);
}

.btn-primary-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(0, 217, 255, 0.55);
}

.btn-primary-glow:active {
  transform: translateY(0);
}

.btn-primary-glow:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(57, 123, 255, 0.12);
  border: 1px solid rgba(57, 123, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-action:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: var(--accent-cyan);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
}

.btn-action.copied {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: var(--color-success) !important;
  color: #34d399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
}

.btn-text-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: color var(--transition-speed);
}

.btn-text-action:hover {
  color: var(--accent-cyan);
}

/* Empty State & Skeletons */
.empty-state {
  padding: 60px 24px;
  text-align: center;
  background: rgba(21, 33, 58, 0.4);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}

.empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--text-muted);
}

.empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.empty-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 400px;
  margin: 0 auto;
}

/* Loading skeleton animation */
.loading-box {
  padding: 30px;
  text-align: center;
}

.cyber-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(0, 217, 255, 0.15);
  border-top-color: var(--accent-cyan);
  border-right-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.25);
}

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

.loading-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-cyan);
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.05em;
}

.loading-subtext {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Results Section Header */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.results-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.results-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.status-live {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.status-simulated {
  background: rgba(0, 217, 255, 0.12);
  border: 1px solid rgba(0, 217, 255, 0.35);
  color: var(--accent-cyan);
}

/* Feature 1 — Caption Cards */
.caption-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.caption-card {
  padding: 20px;
  background: linear-gradient(180deg, rgba(21, 33, 58, 0.9) 0%, rgba(16, 26, 48, 0.9) 100%);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-cyan);
  font-family: 'Space Grotesk', sans-serif;
}

.tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-cyan);
  box-shadow: 0 0 6px var(--accent-cyan);
}

.caption-body {
  background: rgba(12, 20, 39, 0.6);
  border: 1px solid rgba(57, 123, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}

.caption-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e2e8f0;
  white-space: pre-wrap;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.char-count {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Feature 2 — AI 50 Comment Generator Styles */
.comments-layout-full {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comments-input-card {
  padding: 24px;
}

.comments-header-wrap {
  flex-wrap: wrap;
  gap: 14px;
}

.badge-count-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-count {
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: rgba(0, 217, 255, 0.15);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-groups {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.action-bar-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-copy-all {
  width: auto;
  padding: 9px 18px;
  font-size: 0.85rem;
}

.comments-groups-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.group-card {
  padding: 20px;
  background: linear-gradient(180deg, rgba(21, 33, 58, 0.95) 0%, rgba(14, 22, 42, 0.95) 100%);
  border: 1px solid rgba(57, 123, 255, 0.25);
}

.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(57, 123, 255, 0.15);
}

.group-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-badge-num {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(0, 217, 255, 0.15);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
}

.group-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.group-count-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

/* STRICT RULE 5.5: Display all 10 comments directly without dropdown or accordion */
.group-comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(12, 20, 39, 0.7);
  border: 1px solid rgba(57, 123, 255, 0.12);
  border-radius: var(--radius-md);
  transition: all var(--transition-speed);
}

.comment-item:hover {
  border-color: rgba(0, 217, 255, 0.35);
  background: rgba(16, 26, 48, 0.8);
}

.comment-index {
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  width: 24px;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
  min-width: 0;
}

.comment-text {
  font-size: 0.88rem;
  color: #e2e8f0;
  line-height: 1.45;
}

.btn-copy-single {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 5px;
  cursor: pointer;
  transition: all var(--transition-speed);
  flex-shrink: 0;
}

.comment-item:hover .btn-copy-single {
  color: var(--text-secondary);
}

.btn-copy-single:hover {
  color: var(--accent-cyan);
  background: rgba(0, 217, 255, 0.1);
  border-color: rgba(0, 217, 255, 0.3);
}

/* Feature 3 — AI Counter-Narrative Styles */
.verification-badge-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.status-verified {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10B981;
  color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.status-debunked {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #EF4444;
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
}

.status-mixed {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid #F59E0B;
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.status-unverified {
  background: rgba(57, 123, 255, 0.15);
  border: 1px solid #397BFF;
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(57, 123, 255, 0.25);
}

.narrative-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.overview-card {
  padding: 20px;
}

.section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-cyan);
  margin-bottom: 6px;
}

.section-text {
  font-size: 0.92rem;
  color: #e2e8f0;
  line-height: 1.5;
}

.claim-box {
  display: flex;
  gap: 10px;
  background: rgba(12, 20, 39, 0.7);
  border-left: 3px solid var(--accent-cyan);
  padding: 12px 16px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.quote-mark {
  font-size: 1.8rem;
  color: var(--accent-cyan);
  line-height: 1;
}

.claim-text {
  font-size: 0.92rem;
  font-style: italic;
  color: #f1f5f9;
}

.clarifications-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.clarif-card {
  padding: 18px;
}

.clarif-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #cbd5e1;
  background: rgba(12, 20, 39, 0.6);
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(57, 123, 255, 0.12);
}

.responses-card, .sources-card {
  padding: 20px;
}

.responses-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.response-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(12, 20, 39, 0.7);
  border: 1px solid rgba(57, 123, 255, 0.15);
  border-radius: var(--radius-md);
}

.response-number {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-cyan);
  font-family: 'JetBrains Mono', monospace;
}

.response-text {
  flex: 1;
  font-size: 0.88rem;
  color: #e2e8f0;
}

.sources-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(12, 20, 39, 0.5);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Feature 4 — History View Styles */
.history-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.history-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.history-filter-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history-item-card {
  padding: 18px 22px;
}

.history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.history-type-tag {
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.history-type-tag.caption {
  background: rgba(0, 217, 255, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 217, 255, 0.3);
}

.history-type-tag.comments {
  background: rgba(139, 92, 246, 0.15);
  color: #c084fc;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.history-type-tag.counter_narrative {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.history-meta-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

.btn-delete-history {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition-speed);
}

.btn-delete-history:hover {
  color: var(--color-danger);
}

.history-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.history-summary {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 12px;
}

.history-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(57, 123, 255, 0.12);
}

.empty-history-box {
  padding: 48px;
  text-align: center;
  color: var(--text-muted);
  background: rgba(21, 33, 58, 0.4);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}

/* Utility icons and helpers */
.icon-svg {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.icon-svg-sm {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
}

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }

/* Responsive adjustments */
@media (max-width: 1024px) {
  .command-grid {
    grid-template-columns: 1fr;
  }
  .input-panel {
    position: static;
  }
  .clarifications-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .mobile-menu-btn {
    display: block;
  }
  .workspace-body {
    padding: 18px;
  }
  .top-navbar {
    padding: 0 18px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}


/* Image Dropzone & Vision Controls */
.image-upload-group {
  margin-bottom: 20px;
}

.form-label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.mb-0 { margin-bottom: 0 !important; }

.badge-subtle {
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-cyan);
  background: rgba(0, 217, 255, 0.1);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 217, 255, 0.2);
}

.image-dropzone {
  border: 2px dashed rgba(57, 123, 255, 0.35);
  border-radius: var(--radius-md);
  background: rgba(12, 20, 39, 0.6);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-speed);
  position: relative;
}

.image-dropzone:hover, .image-dropzone.dragover {
  border-color: var(--accent-cyan);
  background: rgba(0, 217, 255, 0.05);
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.15);
}

.hidden-file-input {
  display: none;
}

.dropzone-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  color: var(--accent-cyan);
  opacity: 0.85;
}

.dropzone-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dropzone-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: block;
}

.dropzone-preview-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.dropzone-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

.preview-meta {
  flex: 1;
  min-width: 0;
}

.preview-filename {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-scan-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(0, 217, 255, 0.15);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-sm);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-scan-action:hover {
  background: rgba(0, 217, 255, 0.3);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

.btn-remove-action {
  padding: 5px 9px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-sm);
  color: #f87171;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-remove-action:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ffffff;
}

.image-scan-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 217, 255, 0.08);
  border: 1px solid rgba(0, 217, 255, 0.25);
  font-size: 0.75rem;
  color: var(--accent-cyan);
  font-family: 'JetBrains Mono', monospace;
}

.scanner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.hidden {
  display: none !important;
}

/* Image Visual Card in Results */
.vision-detected-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(12, 20, 39, 0.8);
  border: 1px solid rgba(0, 217, 255, 0.3);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

.vision-detected-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-cyan);
}

.vision-detected-info h5 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 2px;
}

.vision-detected-info p {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Interactive OCR Chips */
.ocr-chips-wrap {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(12, 20, 39, 0.7);
  border: 1px solid rgba(0, 217, 255, 0.25);
  border-radius: var(--radius-md);
}

.ocr-chips-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-cyan);
  margin-bottom: 6px;
}

.ocr-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ocr-chip-btn {
  background: rgba(0, 217, 255, 0.12);
  border: 1px solid rgba(0, 217, 255, 0.35);
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-speed);
  font-family: 'Space Grotesk', sans-serif;
}

.ocr-chip-btn:hover {
  background: var(--accent-cyan);
  color: #040915;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
  transform: translateY(-1px);
}

/* Visual Studio Modal & Canvas */
.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 9, 21, 0.85);
  backdrop-filter: blur(14px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-card {
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 217, 255, 0.25);
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-badge {
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(0, 217, 255, 0.2);
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.btn-close-modal {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  transition: color var(--transition-speed);
  line-height: 1;
}

.btn-close-modal:hover {
  color: var(--color-danger);
}

.modal-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
  align-items: start;
}

.studio-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #040814;
  border-radius: var(--radius-md);
  border: 1px solid rgba(57, 123, 255, 0.25);
  padding: 16px;
  min-height: 440px;
}

#studio-canvas {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
}

.studio-controls {
  display: flex;
  flex-direction: column;
}

.control-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.theme-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-theme-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(12, 20, 39, 0.7);
  border: 1px solid rgba(57, 123, 255, 0.2);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-theme-swatch::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--swatch-color);
  box-shadow: 0 0 8px var(--swatch-color);
}

.btn-theme-swatch.active, .btn-theme-swatch:hover {
  border-color: var(--swatch-color);
  color: var(--text-primary);
  background: rgba(57, 123, 255, 0.15);
}

.format-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-format-opt {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(12, 20, 39, 0.7);
  border: 1px solid rgba(57, 123, 255, 0.2);
  color: var(--text-secondary);
  font-size: 0.74rem;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-format-opt.active, .btn-format-opt:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(0, 217, 255, 0.12);
}

.btn-generate-visual-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-speed);
}

.btn-generate-visual-card:hover {
  background: var(--accent-cyan);
  color: #040915;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.4);
}

.w-full { width: 100% !important; }
.justify-center { justify-content: center !important; }

@media (max-width: 860px) {
  .modal-body {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   CYBERNARRATIVE V2.2 — FUTURISTIC COMMAND CENTER 2-COLUMN LAYOUT
   ========================================================================== */

/* Top Navbar Composite AI Badge */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-ai-composite {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 7px 5px 14px;
  border-radius: 9999px;
  background: rgba(12, 22, 44, 0.92);
  border: 1px solid rgba(57, 123, 255, 0.45);
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.14);
  cursor: pointer;
  transition: all 0.2s ease;
}

.badge-ai-composite:hover {
  border-color: #00D9FF;
  box-shadow: 0 0 22px rgba(0, 217, 255, 0.35);
}

.ai-composite-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #F8FAFC;
  letter-spacing: 0.03em;
}

.ai-composite-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00D9FF;
}

.ai-composite-logo svg {
  width: 16px;
  height: 16px;
}

.ai-composite-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.65);
  color: #34d399;
}

.ai-composite-status.error {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.65);
  color: #f87171;
}

/* Sidebar Footer Command Center Card */
.command-footer-card {
  background: linear-gradient(180deg, rgba(16, 30, 58, 0.92) 0%, rgba(9, 17, 34, 0.96) 100%);
  border: 1px solid rgba(0, 217, 255, 0.38);
  border-radius: 12px;
  padding: 13px 14px;
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.12), inset 0 0 18px rgba(0, 217, 255, 0.05);
}

.command-footer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(57, 123, 255, 0.2);
}

.command-footer-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 217, 255, 0.15);
  border: 1px solid rgba(0, 217, 255, 0.45);
  color: #00D9FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.command-footer-icon svg {
  width: 18px;
  height: 18px;
}

.command-footer-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #F8FAFC;
  line-height: 1.2;
}

.command-footer-sub {
  font-size: 0.65rem;
  color: #94A3B8;
  margin-top: 2px;
}

.command-footer-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.73rem;
}

.cmd-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
}

.cmd-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #F8FAFC;
  font-weight: 600;
}

.command-footer-version {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(57, 123, 255, 0.16);
  text-align: center;
  font-size: 0.68rem;
  color: #94A3B8;
}

/* Unconfigured Warning Banner */
.unconfigured-ai-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  margin-bottom: 16px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: var(--radius-md);
  color: #F8FAFC;
}

.unconfigured-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.unconfigured-icon {
  font-size: 1.3rem;
}

.unconfigured-banner-left strong {
  display: block;
  font-size: 0.88rem;
  color: #fbbf24;
}

.unconfigured-banner-left p {
  font-size: 0.78rem;
  color: #94A3B8;
  margin-top: 2px;
}

/* ==========================================================================
   MASTER 2-COLUMN COMMAND CENTER GRID
   ========================================================================== */
.dashboard-master-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.95fr) minmax(350px, 1fr);
  gap: 18px;
  align-items: start;
}

.dashboard-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dashboard-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.panel-highlight-pulse {
  animation: cyberPanelPulse 1.6s ease;
}

@keyframes cyberPanelPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 217, 255, 0)); }
  40% { filter: drop-shadow(0 0 20px rgba(0, 217, 255, 0.65)); }
}

/* 3.2 Hero Banner Card (55% Left Text Area | 45% Right Animated Robot Area + 48px Safe Clearance) */
.hero-command-card {
  position: relative;
  min-height: 235px;
  padding: 24px 28px;
  border-radius: 14px;
  background: #091326;
  border: 1px solid rgba(0, 217, 255, 0.42);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 28px rgba(0, 217, 255, 0.08);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-visual-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-robot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  filter: saturate(1.12) contrast(1.05);
  transition: opacity 0.25s ease;
}

.hero-hologram-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: saturate(1.14) contrast(1.06);
  will-change: contents;
}

.hero-visual-bg.hologram-live .hero-static-fallback {
  opacity: 0;
}

.hero-visual-bg.reduced-motion .hero-hologram-canvas {
  display: none;
}

.hero-visual-gradient-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, #091326 0%, rgba(9, 19, 38, 0.86) 6%, rgba(9, 19, 38, 0.18) 15%, rgba(9, 19, 38, 0) 24%),
    linear-gradient(180deg, rgba(9, 19, 38, 0.18) 0%, rgba(9, 19, 38, 0) 24%, rgba(9, 19, 38, 0.36) 100%);
}

.hero-content-left {
  position: relative;
  z-index: 3;
  flex: 0 0 46%;
  max-width: 46%;
  padding-right: 16px;
}

.hero-kicker-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  border-radius: 9999px;
  background: rgba(0, 217, 255, 0.14);
  border: 1px solid rgba(0, 217, 255, 0.55);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.22);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7dd3fc;
  margin-bottom: 10px;
}

.kicker-icon {
  width: 14px;
  height: 14px;
  color: #00D9FF;
}

.hero-main-title {
  font-size: 2.45rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.03em;
  color: #5ce1ff;
  text-shadow: 0 0 22px rgba(0, 217, 255, 0.55), 0 2px 10px rgba(0, 0, 0, 0.8);
  line-height: 1.08;
}

.hero-sub-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #F8FAFC;
  margin-top: 4px;
  margin-bottom: 8px;
}

.hero-description {
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.5;
  max-width: 490px;
}

.hero-concept-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.concept-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 9999px;
  background: rgba(11, 25, 48, 0.88);
  border: 1px solid rgba(0, 217, 255, 0.45);
  box-shadow: inset 0 0 10px rgba(0, 217, 255, 0.14);
  color: #F8FAFC;
  font-size: 0.76rem;
  font-weight: 600;
}

.concept-pill svg {
  width: 13px;
  height: 13px;
  color: #00D9FF;
}

/* 3.3 4 Glowing Stat Cards */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(19, 34, 62, 0.94) 0%, rgba(10, 19, 38, 0.97) 100%);
  border: 1px solid rgba(0, 217, 255, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 -18px 24px -12px rgba(0, 217, 255, 0.22);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00D9FF, transparent);
  box-shadow: 0 0 12px #00D9FF;
}

.stat-card.stat-purple {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 -18px 24px -12px rgba(168, 85, 247, 0.25);
}

.stat-card.stat-purple::after {
  background: linear-gradient(90deg, transparent, #a855f7, transparent);
  box-shadow: 0 0 12px #a855f7;
}

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

.stat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon-wrap svg {
  width: 24px;
  height: 24px;
}

.stat-icon-wrap.cyan {
  background: rgba(0, 217, 255, 0.14);
  color: #00D9FF;
  border: 1px solid rgba(0, 217, 255, 0.45);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.22);
}

.stat-icon-wrap.blue {
  background: rgba(0, 217, 255, 0.14);
  color: #00D9FF;
  border: 1px solid rgba(0, 217, 255, 0.45);
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.22);
}

.stat-icon-wrap.purple {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.48);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
}

.stat-meta {
  flex: 1;
  min-width: 0;
}

.stat-label {
  display: block;
  font-size: 0.78rem;
  color: #e2e8f0;
  font-weight: 600;
}

.stat-val-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: 3px;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #F8FAFC;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.1;
}

.stat-trend-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #34d399;
  white-space: nowrap;
}

/* 3.4 AI Workspace Container Box */
.ai-workspace-container {
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 28, 52, 0.92) 0%, rgba(10, 18, 36, 0.95) 100%);
  border: 1px solid rgba(57, 123, 255, 0.35);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.workspace-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.workspace-box-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #F8FAFC;
}

.workspace-box-title svg {
  width: 20px;
  height: 20px;
  color: #00D9FF;
}

.workspace-box-sub {
  font-size: 0.78rem;
  color: #cbd5e1;
}

.workspace-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.workspace-nav-card {
  position: relative;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(165deg, rgba(20, 36, 68, 0.95) 0%, rgba(10, 19, 38, 0.98) 100%);
  border: 1px solid rgba(0, 217, 255, 0.48);
  box-shadow: inset 0 -16px 24px -12px rgba(0, 217, 255, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.2s ease;
}

.workspace-nav-card.ws-theme-purple {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: inset 0 -16px 24px -12px rgba(168, 85, 247, 0.28);
}

.workspace-nav-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 217, 255, 0.22), inset 0 -16px 24px -12px rgba(0, 217, 255, 0.35);
}

.workspace-nav-card.ws-theme-purple:hover {
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.25), inset 0 -16px 24px -12px rgba(168, 85, 247, 0.4);
}

.ws-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ws-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ws-card-icon svg {
  width: 22px;
  height: 22px;
}

.ws-card-icon.cyan {
  background: rgba(0, 217, 255, 0.15);
  color: #00D9FF;
  border: 1px solid rgba(0, 217, 255, 0.45);
}

.ws-card-icon.purple {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.5);
}

.ws-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #F8FAFC;
  margin-bottom: 4px;
}

.ws-card-desc {
  font-size: 0.76rem;
  color: #cbd5e1;
  line-height: 1.42;
}

.ws-card-pill-btn {
  width: 100%;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #F8FAFC;
  background: rgba(0, 217, 255, 0.16);
  border: 1px solid rgba(0, 217, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ws-card-pill-btn.purple {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

.workspace-nav-card:hover .ws-card-pill-btn.cyan {
  background: rgba(0, 217, 255, 0.3);
}

.workspace-nav-card:hover .ws-card-pill-btn.purple {
  background: rgba(168, 85, 247, 0.35);
}

/* 3.5 Status Sistem & 3.6 Aktivitas Terbaru */
.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 16px;
}

.health-panel,
.recent-panel {
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 28, 52, 0.92) 0%, rgba(10, 18, 36, 0.96) 100%);
  border: 1px solid rgba(0, 217, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
}

.health-panel .panel-title-wrap,
.recent-panel .panel-title-wrap {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(57, 123, 255, 0.2);
}

.recent-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recent-view-all-link {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.recent-view-all-link:hover {
  color: #00D9FF;
}

.health-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.health-metric-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(8, 15, 30, 0.7);
  border: 1px solid rgba(57, 123, 255, 0.2);
  border-radius: 10px;
}

.health-left-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #F8FAFC;
}

.health-status-pill {
  padding: 3px 12px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #34d399;
}

.health-status-pill.error {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.55);
  color: #f87171;
}

.dashboard-recent-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.recent-activity-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(8, 15, 30, 0.65);
  border: 1px solid rgba(57, 123, 255, 0.16);
  border-radius: 8px;
  font-size: 0.76rem;
}

.recent-feature-col {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: #F8FAFC;
  white-space: nowrap;
}

.recent-feature-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.recent-feature-icon svg {
  width: 13px;
  height: 13px;
}

.recent-feature-icon.cyan {
  background: rgba(0, 217, 255, 0.16);
  color: #00D9FF;
}

.recent-feature-icon.purple {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
}

.recent-feature-icon.emerald {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.recent-topic-col {
  color: #e2e8f0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-time-col {
  color: #94A3B8;
  font-size: 0.72rem;
  white-space: nowrap;
}

.dashboard-empty-recent {
  padding: 20px 12px;
  text-align: center;
  color: #94A3B8;
  font-size: 0.8rem;
}

/* ==========================================================================
   RIGHT COLUMN: AI API MANAGEMENT & STATUS SELURUH PROVIDER
   ========================================================================== */
.api-mgmt-card,
.all-providers-status-card {
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 28, 54, 0.95) 0%, rgba(9, 17, 34, 0.98) 100%);
  border: 1px solid rgba(0, 217, 255, 0.4);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.api-mgmt-header {
  margin-bottom: 14px;
}

.api-mgmt-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.api-gear-icon {
  width: 22px;
  height: 22px;
  color: #00D9FF;
}

.api-mgmt-title-row h3 {
  font-size: 1.12rem;
  font-weight: 800;
  color: #F8FAFC;
}

.api-mgmt-subtitle {
  font-size: 0.75rem;
  color: #cbd5e1;
  margin-top: 4px;
  line-height: 1.4;
}

/* 4 Compact Provider Selector Cards */
.provider-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.provider-mini-card {
  position: relative;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(10, 19, 38, 0.85);
  border: 1px solid rgba(57, 123, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.provider-mini-card:hover {
  border-color: rgba(0, 217, 255, 0.65);
  transform: translateY(-1px);
}

.provider-mini-card.selected {
  background: linear-gradient(180deg, rgba(0, 217, 255, 0.18) 0%, rgba(15, 29, 56, 0.95) 100%);
  border-color: #00D9FF;
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.28);
}

.provider-mini-check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00D9FF;
  color: #040915;
  font-size: 0.65rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0, 217, 255, 0.6);
}

.provider-mini-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
  color: #F8FAFC;
}

.provider-mini-icon svg {
  width: 24px;
  height: 24px;
}

.provider-mini-icon.openai { color: #F8FAFC; }
.provider-mini-icon.gemini { color: #60a5fa; }
.provider-mini-icon.claude { color: #fb923c; }
.provider-mini-icon.custom { color: #38bdf8; }

.provider-mini-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #F8FAFC;
  line-height: 1.15;
}

.provider-mini-sub {
  font-size: 0.66rem;
  color: #94A3B8;
  margin-top: 2px;
}

/* Inner Configuration Box */
.provider-inner-config-box {
  padding: 14px;
  border-radius: 12px;
  background: rgba(8, 15, 30, 0.78);
  border: 1px solid rgba(0, 217, 255, 0.32);
}

.provider-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(57, 123, 255, 0.2);
}

.provider-config-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}

.config-mini-gear {
  width: 16px;
  height: 16px;
  color: #00D9FF;
}

.provider-config-title-wrap h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: #F8FAFC;
}

.provider-active-pill {
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #34d399;
}

.provider-active-pill.ready {
  background: rgba(0, 217, 255, 0.16);
  border-color: rgba(0, 217, 255, 0.5);
  color: #00D9FF;
}

.provider-active-pill.failed {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.55);
  color: #f87171;
}

.provider-active-pill.unconfigured {
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.35);
  color: #94A3B8;
}

.form-label-sm {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 5px;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.label-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.create-api-hint-text {
  font-size: 0.68rem;
  font-weight: 600;
  color: #00D9FF;
  font-family: 'JetBrains Mono', monospace;
}

.service-select-group {
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.service-select-group .form-select-sm {
  flex: 1;
  min-width: 0;
}

.btn-create-api {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2) 0%, rgba(57, 123, 255, 0.28) 100%);
  border: 1px solid rgba(0, 217, 255, 0.65);
  color: #00D9FF;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.18);
  transition: all 0.2s ease;
}

.btn-create-api svg {
  width: 13px;
  height: 13px;
}

.btn-create-api .ext-icon {
  width: 11px;
  height: 11px;
  opacity: 0.85;
}

.btn-create-api:hover {
  background: linear-gradient(135deg, #00D9FF 0%, #397BFF 100%);
  color: #040915;
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.5);
  transform: translateY(-1px);
}

.mb-2 {
  margin-bottom: 10px;
}

.form-input-sm,
.form-select-sm {
  padding: 8px 11px;
  font-size: 0.8rem;
}

.apikey-input-group {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.btn-eye-toggle {
  width: 38px;
  border-radius: 8px;
  background: rgba(19, 32, 58, 0.9);
  border: 1px solid rgba(57, 123, 255, 0.35);
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-eye-toggle svg {
  width: 16px;
  height: 16px;
}

.btn-eye-toggle:hover,
.btn-eye-toggle.eye-active {
  border-color: #00D9FF;
  color: #00D9FF;
}

.saved-key-hint {
  margin-top: 4px;
  font-size: 0.68rem;
  color: #34d399;
  font-family: 'JetBrains Mono', monospace;
}

/* 3-Item Action Row: Simpan | Test Koneksi | Koneksi Berhasil */
.provider-actions-trio {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
  margin-bottom: 12px;
}

.btn-trio-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00D9FF 0%, #397BFF 100%);
  border: none;
  color: #040915;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-trio-save svg {
  width: 14px;
  height: 14px;
}

.btn-trio-save:hover {
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.45);
}

.btn-trio-test {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 8px;
  background: rgba(16, 30, 58, 0.95);
  border: 1px solid rgba(0, 217, 255, 0.55);
  color: #F8FAFC;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-trio-test svg {
  width: 14px;
  height: 14px;
  color: #00D9FF;
}

.btn-trio-test:hover {
  border-color: #00D9FF;
  background: rgba(0, 217, 255, 0.16);
}

.conn-result-mini-box {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.6);
  min-width: 0;
}

.conn-result-mini-box.failed {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.6);
}

.conn-result-mini-box.idle {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
}

.conn-mini-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid #10B981;
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.conn-result-mini-box.failed .conn-mini-check {
  border-color: #EF4444;
  color: #f87171;
}

.conn-mini-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.conn-mini-text strong {
  font-size: 0.72rem;
  color: #34d399;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conn-result-mini-box.failed .conn-mini-text strong {
  color: #f87171;
}

.conn-result-mini-box.idle .conn-mini-text strong {
  color: #cbd5e1;
}

.conn-mini-text span {
  font-size: 0.63rem;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-feedback-box {
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 8px;
}

.feedback-info {
  background: rgba(0, 217, 255, 0.12);
  border: 1px solid #00D9FF;
  color: #00D9FF;
}

.feedback-success {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid #10B981;
  color: #34d399;
}

.feedback-error {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid #EF4444;
  color: #f87171;
}

/* Activate Provider Box */
.activate-provider-box {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(12, 26, 44, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.45);
}

.activate-provider-box.is-active-box {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10B981;
  box-shadow: inset 0 0 14px rgba(16, 185, 129, 0.12);
}

.activate-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.activate-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #10B981;
  cursor: pointer;
  flex-shrink: 0;
}

.activate-checkbox-label input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.activate-label-text strong {
  display: block;
  font-size: 0.8rem;
  color: #F8FAFC;
}

.activate-label-text p {
  font-size: 0.68rem;
  color: #cbd5e1;
  margin-top: 1px;
}

/* Bottom Right Card: Status Seluruh Provider */
.all-providers-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(57, 123, 255, 0.2);
}

.all-providers-header svg {
  width: 18px;
  height: 18px;
  color: #00D9FF;
}

.all-providers-header h4 {
  font-size: 0.96rem;
  font-weight: 700;
  color: #F8FAFC;
}

.all-providers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.all-prov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(8, 15, 30, 0.72);
  border: 1px solid rgba(57, 123, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.all-prov-row:hover,
.all-prov-row.row-selected {
  border-color: rgba(0, 217, 255, 0.55);
  background: rgba(14, 27, 52, 0.9);
}

.all-prov-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.all-prov-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.all-prov-icon svg {
  width: 22px;
  height: 22px;
}

.all-prov-icon.openai { color: #F8FAFC; }
.all-prov-icon.gemini { color: #60a5fa; }
.all-prov-icon.claude { color: #fb923c; }
.all-prov-icon.custom { color: #38bdf8; }

.all-prov-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #F8FAFC;
}

.all-prov-model {
  font-size: 0.7rem;
  color: #94A3B8;
}

.all-prov-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.all-prov-pill {
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
}

.all-prov-pill.primary,
.all-prov-pill.ready {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #34d399;
}

.all-prov-pill.saved {
  background: rgba(0, 217, 255, 0.16);
  border: 1px solid rgba(0, 217, 255, 0.45);
  color: #00D9FF;
}

.all-prov-pill.failed {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #f87171;
}

.all-prov-pill.unconfigured {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #94A3B8;
}

.all-prov-dots {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 700;
}

@media (max-width: 1280px) {
  .dashboard-master-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .workspace-cards-grid,
  .dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }
  .hero-content-left {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .hero-visual-bg {
    width: 65%;
    opacity: 0.26;
  }
}

@media (max-width: 640px) {
  .dashboard-stats-grid,
  .provider-mini-grid,
  .provider-actions-trio {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ANIMATED TRAVELING NEON ENERGY BORDER (AI WORKSPACE & AI API MANAGEMENT)
   ========================================================================== */

.neon-energy-panel {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-color: rgba(0, 217, 255, 0.18) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 14px rgba(0, 217, 255, 0.14),
    inset 0 0 18px rgba(0, 217, 255, 0.05);
}

.neon-border-svg {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}

.neon-track-rect,
.neon-glow-rect,
.neon-beam-rect {
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* Garis dasar cyan redup mengelilingi panel */
.neon-track-rect {
  stroke: rgba(0, 217, 255, 0.26);
  stroke-width: 1.5px;
}

/* Halo glow luar Electric Cyan (#00D9FF) 8-16px */
.neon-glow-rect {
  stroke: #00D9FF;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 165 335 165 335;
  stroke-dashoffset: 1000;
  filter:
    drop-shadow(0 0 6px rgba(0, 217, 255, 0.95))
    drop-shadow(0 0 14px rgba(0, 217, 255, 0.72));
  animation: travelingNeonBorder 5s linear infinite;
  will-change: stroke-dashoffset;
}

/* Inti energi cahaya Ice Blue (#8AF5FF) 2-2.5px */
.neon-beam-rect {
  stroke: #8AF5FF;
  stroke-width: 2.3px;
  stroke-linecap: round;
  stroke-dasharray: 120 380 120 380;
  stroke-dashoffset: 978;
  filter:
    drop-shadow(0 0 4px #8AF5FF)
    drop-shadow(0 0 10px #00D9FF);
  animation: travelingNeonCore 5s linear infinite;
  will-change: stroke-dashoffset;
}

/* Perbedaan fase pada AI API Management agar gerakan tidak kaku seragam */
.neon-phase-offset .neon-glow-rect,
.neon-phase-offset .neon-beam-rect {
  animation-delay: -2.35s;
}

/* AI API Management: sedikit lebih terang ketika belum ada provider aktif */
.api-mgmt-card.neon-unconfigured {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.48),
    0 0 20px rgba(0, 217, 255, 0.26),
    inset 0 0 22px rgba(0, 217, 255, 0.08);
}

.api-mgmt-card.neon-unconfigured .neon-glow-rect {
  stroke-width: 3.4px;
  filter:
    drop-shadow(0 0 8px #00D9FF)
    drop-shadow(0 0 16px rgba(0, 217, 255, 0.9));
}

/* AI API Management: intensitas glow lebih halus ketika provider sudah aktif */
.api-mgmt-card.neon-provider-active .neon-glow-rect {
  stroke-width: 2.6px;
  opacity: 0.88;
  filter:
    drop-shadow(0 0 5px rgba(0, 217, 255, 0.82))
    drop-shadow(0 0 11px rgba(0, 217, 255, 0.52));
}

.api-mgmt-card.neon-provider-active .neon-beam-rect {
  stroke-width: 2px;
  opacity: 0.9;
}

@keyframes travelingNeonBorder {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes travelingNeonCore {
  0% {
    stroke-dashoffset: 978;
  }
  100% {
    stroke-dashoffset: -22;
  }
}

/* Aksesibilitas: Hentikan gerakan jika prefers-reduced-motion aktif */
@media (prefers-reduced-motion: reduce) {
  .neon-glow-rect,
  .neon-beam-rect {
    animation: none !important;
    stroke-dashoffset: 250;
  }
}

/* ==========================================================================
   CYBERNARRATIVE V2.3 — SOCIAL MEDIA MANAGEMENT STYLES
   ========================================================================== */

.social-management-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

.social-section-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.social-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.social-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #F8FAFC;
  letter-spacing: 0.02em;
}

.social-section-title svg {
  width: 20px;
  height: 20px;
  color: #00D9FF;
}

.social-section-desc {
  font-size: 0.8rem;
  color: #94A3B8;
  margin-top: 3px;
}

.social-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(12, 22, 44, 0.88);
  border: 1px solid rgba(57, 123, 255, 0.38);
  font-size: 0.74rem;
  font-weight: 700;
  color: #cbd5e1;
}

.social-header-badge.online {
  border-color: rgba(16, 185, 129, 0.6);
  color: #34d399;
}

/* 1. Connected Accounts Grid */
.social-accounts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .social-accounts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .social-accounts-grid {
    grid-template-columns: 1fr;
  }
}

.social-account-card {
  position: relative;
  background: linear-gradient(165deg, rgba(16, 30, 58, 0.92) 0%, rgba(9, 17, 34, 0.96) 100%);
  border: 1px solid rgba(57, 123, 255, 0.28);
  border-radius: 13px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: all 0.25s ease;
}

.social-account-card:hover {
  border-color: rgba(0, 217, 255, 0.55);
  box-shadow: 0 10px 28px rgba(0, 217, 255, 0.16);
  transform: translateY(-2px);
}

.social-account-card.card-connected {
  border-color: rgba(0, 217, 255, 0.48);
  box-shadow: 0 8px 24px rgba(0, 217, 255, 0.12), inset 0 0 20px rgba(0, 217, 255, 0.04);
}

.account-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.account-platform-identity {
  display: flex;
  align-items: center;
  gap: 11px;
}

.account-platform-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(12, 22, 44, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--platform-color, #00D9FF);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
}

.account-platform-icon svg {
  width: 20px;
  height: 20px;
}

.account-platform-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #F8FAFC;
  line-height: 1.2;
}

.account-handle-label {
  display: block;
  font-size: 0.72rem;
  color: #94A3B8;
  margin-top: 2px;
}

.account-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(12, 20, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.account-status-pill.ready {
  background: rgba(0, 217, 255, 0.18);
  border-color: rgba(0, 217, 255, 0.75);
  color: #00D9FF;
  box-shadow: 0 0 10px rgba(0, 217, 255, 0.35);
}

.account-status-pill.online {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.65);
  color: #34d399;
}

.account-status-pill.warning {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.65);
  color: #fbbf24;
}

.account-status-pill.setup {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.65);
  color: #c084fc;
}

.account-status-pill.connecting {
  background: rgba(0, 217, 255, 0.15);
  border-color: rgba(0, 217, 255, 0.65);
  color: #8af5ff;
  animation: cyberPulseConnecting 1.2s infinite ease-in-out;
}

.account-status-pill.error {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.65);
  color: #f87171;
}

.account-status-pill.offline {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #94a3b8;
}

@keyframes cyberPulseConnecting {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.98); }
}

.account-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-perm-pill {
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.71rem;
  font-weight: 600;
}

.account-perm-pill.perm-granted {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
}

.account-perm-pill.perm-warning {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.55);
  color: #fde047;
}

.account-perm-pill.perm-pending {
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #cbd5e1;
}

.account-req-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.68rem;
  color: #64748B;
  line-height: 1.35;
}

.account-req-hint svg {
  width: 12px;
  height: 12px;
  color: #94A3B8;
  margin-top: 1px;
  flex-shrink: 0;
}

.account-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(57, 123, 255, 0.16);
}

.btn-connect-social {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2) 0%, rgba(57, 123, 255, 0.25) 100%);
  border: 1px solid rgba(0, 217, 255, 0.65);
  color: #7dd3fc;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-connect-social:hover {
  background: #00D9FF;
  color: #040915;
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.45);
}

.btn-disconnect-social {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-disconnect-social:hover {
  background: rgba(239, 68, 68, 0.24);
  color: #ffffff;
  border-color: #ef4444;
}

.btn-config-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border-radius: 8px;
  background: rgba(12, 22, 44, 0.85);
  border: 1px solid rgba(57, 123, 255, 0.35);
  color: #cbd5e1;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-config-social:hover {
  border-color: #00D9FF;
  color: #00D9FF;
}

/* 2. Post Composer & Live Preview Grid */
.social-composer-wrapper {
  position: relative;
  background: #091326;
  border-radius: 14px;
  border: 1px solid rgba(0, 217, 255, 0.42);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), inset 0 0 28px rgba(0, 217, 255, 0.06);
  padding: 24px;
  overflow: hidden;
}

.social-composer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.95fr);
  gap: 26px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .social-composer-grid {
    grid-template-columns: 1fr;
  }
}

.composer-form-panel {
  display: flex;
  flex-direction: column;
}

.composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(57, 123, 255, 0.2);
  flex-wrap: wrap;
}

.composer-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #00D9FF;
  margin-bottom: 2px;
}

.composer-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #F8FAFC;
}

.btn-import-caption {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.55);
  color: #e9d5ff;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-import-caption svg {
  width: 14px;
  height: 14px;
  color: #c084fc;
}

.btn-import-caption:hover {
  background: rgba(168, 85, 247, 0.32);
  border-color: #c084fc;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}

.platform-targets-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.target-platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 9999px;
  background: rgba(12, 22, 44, 0.88);
  border: 1px solid rgba(57, 123, 255, 0.3);
  font-size: 0.73rem;
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.target-platform-pill input[type="checkbox"] {
  display: none;
}

.target-check-mark {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.target-platform-pill.selected {
  background: rgba(0, 217, 255, 0.14);
  border-color: #00D9FF;
  color: #F8FAFC;
}

.target-platform-pill.selected .target-check-mark {
  background: #00D9FF;
  border-color: #00D9FF;
}

.target-platform-pill.selected .target-check-mark::after {
  content: '✓';
  color: #040915;
  font-size: 10px;
  font-weight: 900;
}

.target-platform-pill.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}

.target-icon svg {
  width: 14px;
  height: 14px;
}

.target-handle {
  font-size: 0.66rem;
  opacity: 0.75;
}

.composer-textarea {
  font-size: 0.88rem;
  line-height: 1.55;
  background: rgba(6, 13, 26, 0.85);
  border-color: rgba(57, 123, 255, 0.4);
}

.composer-textarea:focus {
  border-color: #00D9FF;
  box-shadow: 0 0 16px rgba(0, 217, 255, 0.25);
}

.platform-char-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.char-indicator-pill {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(12, 22, 44, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94A3B8;
}

.char-indicator-pill.over-limit {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.65);
  color: #f87171;
}

.char-indicator-pill.over-limit strong {
  color: #fca5a5;
}

/* Media Dropzone */
.social-media-dropzone {
  position: relative;
  background: rgba(6, 13, 26, 0.75);
  border: 1.5px dashed rgba(57, 123, 255, 0.45);
  border-radius: 11px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.social-media-dropzone:hover,
.social-media-dropzone.dragover {
  border-color: #00D9FF;
  background: rgba(0, 217, 255, 0.05);
}

.dropzone-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 8px;
}

.dropzone-main-text {
  font-size: 0.82rem;
  color: #e2e8f0;
}

.dropzone-sub-text {
  font-size: 0.7rem;
  color: #64748B;
}

.dropzone-preview-box {
  display: flex;
  align-items: center;
  gap: 14px;
}

.media-thumb-container {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 217, 255, 0.4);
}

.dropzone-media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.media-name-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #F8FAFC;
  word-break: break-all;
}

.media-size-label {
  font-size: 0.7rem;
  color: #94A3B8;
}

.btn-remove-media {
  align-self: flex-start;
  font-size: 0.7rem;
  color: #f87171;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.schedule-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 9px;
  background: rgba(12, 22, 44, 0.65);
  border: 1px solid rgba(57, 123, 255, 0.22);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.schedule-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  color: #F8FAFC;
  cursor: pointer;
  user-select: none;
}

.schedule-checkbox-wrap input[type="checkbox"] {
  display: none;
}

.schedule-custom-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(0, 217, 255, 0.5);
  background: rgba(6, 13, 26, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.schedule-checkbox-wrap input[type="checkbox"]:checked + .schedule-custom-checkbox {
  background: #00D9FF;
  border-color: #00D9FF;
}

.schedule-checkbox-wrap input[type="checkbox"]:checked + .schedule-custom-checkbox::after {
  content: '✓';
  color: #040915;
  font-size: 11px;
  font-weight: 900;
}

.schedule-datetime-box {
  display: inline-flex;
  align-items: center;
}

.datetime-input {
  padding: 6px 10px;
  font-size: 0.76rem;
  color-scheme: dark;
}

.composer-action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.composer-btn-draft {
  flex: 1;
}

.composer-btn-schedule {
  flex: 1.4;
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.6);
  color: #e9d5ff;
}

.composer-btn-publish {
  flex: 1.5;
  justify-content: center;
}

.composer-feedback {
  margin-top: 12px;
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.4;
}

.composer-feedback.success {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
}

.composer-feedback.error {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}

.composer-feedback.info {
  background: rgba(0, 217, 255, 0.14);
  border: 1px solid rgba(0, 217, 255, 0.5);
  color: #7dd3fc;
}

/* 3. Live Interactive Post Preview */
.composer-preview-panel {
  display: flex;
  flex-direction: column;
  background: rgba(6, 13, 26, 0.65);
  border-radius: 12px;
  border: 1px solid rgba(57, 123, 255, 0.25);
  padding: 16px;
}

.preview-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.preview-badge {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #00D9FF;
}

.preview-platform-tabs {
  display: inline-flex;
  gap: 4px;
  background: rgba(12, 22, 44, 0.95);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(57, 123, 255, 0.25);
}

.tab-preview {
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 0.71rem;
  font-weight: 600;
  color: #94A3B8;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
}

.tab-preview.active, .tab-preview:hover {
  background: rgba(0, 217, 255, 0.18);
  color: #00D9FF;
}

/* Mockup Feed Card */
.mockup-feed-card {
  background: #000000;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
}

.mockup-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.mockup-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.mockup-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #00D9FF, #8B5CF6);
  color: #040915;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}

.mockup-platform-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #000;
  background-color: #00D9FF;
}

.mockup-author-info {
  flex: 1;
  min-width: 0;
}

.mockup-name-line {
  display: flex;
  align-items: center;
  gap: 5px;
}

.mockup-name-line strong {
  font-size: 0.82rem;
  color: #F8FAFC;
}

.mockup-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #00D9FF;
  color: #040915;
  font-size: 8px;
  font-weight: 900;
}

.mockup-handle {
  font-size: 0.68rem;
  color: #94A3B8;
}

.mockup-more-dots {
  color: #64748B;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.mockup-caption-box {
  padding: 0 14px 10px 14px;
}

.mockup-caption-box p {
  font-size: 0.82rem;
  color: #e2e8f0;
  line-height: 1.45;
  word-break: break-word;
}

.mockup-media-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #070e1c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mockup-media-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mockup-media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 0.74rem;
}

.mockup-media-placeholder svg {
  width: 38px;
  height: 38px;
}

.mockup-engagement-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}

.mockup-eng-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mockup-eng-btn {
  font-size: 0.72rem;
  color: #94A3B8;
  cursor: pointer;
}

.preview-disclaimer {
  text-align: center;
  margin-top: 10px;
  font-size: 0.68rem;
  color: #64748B;
}

/* 4. Publishing History List */
.history-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.history-filter-pills {
  display: inline-flex;
  gap: 4px;
  background: rgba(12, 22, 44, 0.85);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(57, 123, 255, 0.22);
}

.filter-pill {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #94A3B8;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
}

.filter-pill.active, .filter-pill:hover {
  background: rgba(0, 217, 255, 0.16);
  color: #00D9FF;
}

.social-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-history-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(16, 30, 58, 0.88) 0%, rgba(9, 17, 34, 0.94) 100%);
  border: 1px solid rgba(57, 123, 255, 0.24);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
  flex-wrap: wrap;
}

.social-history-card:hover {
  border-color: rgba(0, 217, 255, 0.45);
}

.history-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1.5;
  min-width: 240px;
}

.history-media-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(6, 13, 26, 0.9);
  border: 1px solid rgba(57, 123, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
}

.history-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-caption-snippet {
  font-size: 0.82rem;
  color: #F8FAFC;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-timestamp {
  display: block;
  font-size: 0.68rem;
  color: #94A3B8;
  margin-top: 3px;
}

.history-card-center {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1.2;
  min-width: 200px;
}

.target-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}

.target-badge-platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: #cbd5e1;
}

.target-badge-platform svg {
  width: 13px;
  height: 13px;
}

.history-status-pill {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
}

.status-published {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #34d399;
}

.status-scheduled {
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.55);
  color: #c084fc;
}

.status-draft {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.status-publishing {
  background: rgba(0, 217, 255, 0.18);
  border: 1px solid rgba(0, 217, 255, 0.55);
  color: #00D9FF;
  animation: pulseStatus 1.4s infinite ease;
}

.status-failed {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.55);
  color: #f87171;
}

.status-reauth {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.55);
  color: #fbbf24;
}

@keyframes pulseStatus {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.link-published-post {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  color: #00D9FF;
  text-decoration: underline;
}

.target-error-tooltip {
  font-size: 0.66rem;
  color: #f87171;
  cursor: help;
}

.history-card-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-overall-status {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.history-actions-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-retry-post {
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-retry-post:hover {
  background: #fbbf24;
  color: #040915;
}

.btn-delete-post {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 0.75rem;
  cursor: pointer;
}

.btn-delete-post:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
}

.empty-history-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 20px;
  border-radius: 11px;
  background: rgba(12, 22, 44, 0.6);
  border: 1px dashed rgba(57, 123, 255, 0.3);
  color: #94A3B8;
  gap: 8px;
}

.empty-icon {
  width: 32px;
  height: 32px;
  color: #00D9FF;
  opacity: 0.75;
}

.empty-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #e2e8f0;
}

.empty-sub {
  font-size: 0.74rem;
  color: #64748B;
  max-width: 420px;
}

/* Modals */
.modal-card-md {
  max-width: 560px;
  width: 95%;
}

.modal-card-sm {
  max-width: 480px;
  width: 95%;
}

.oauth-modal-platform-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(12, 22, 44, 0.85);
  border: 1px solid rgba(0, 217, 255, 0.35);
}

.oauth-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 217, 255, 0.14);
  color: #00D9FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.oauth-banner-icon svg {
  width: 20px;
  height: 20px;
}

.oauth-setup-guide-box {
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(6, 13, 26, 0.8);
  border: 1px solid rgba(57, 123, 255, 0.25);
  margin-top: 12px;
}

.guide-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #00D9FF;
}

.oauth-portal-link {
  font-size: 0.72rem;
  color: #7dd3fc;
  text-decoration: underline;
}

.oauth-feedback-msg {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
}

.oauth-feedback-msg.success {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
}

.oauth-feedback-msg.error {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.oauth-feedback-msg.info {
  background: rgba(0, 217, 255, 0.14);
  border: 1px solid rgba(0, 217, 255, 0.5);
  color: #7dd3fc;
}

.publish-validation-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.validation-item {
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(12, 22, 44, 0.8);
  border: 1px solid rgba(57, 123, 255, 0.25);
}

.validation-item.item-ok {
  border-color: rgba(16, 185, 129, 0.4);
}

.validation-item.item-error {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.08);
}

.val-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.val-icon svg {
  width: 14px;
  height: 14px;
}

.val-badge {
  margin-left: auto;
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
}

.val-badge.badge-ok {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.val-badge.badge-err {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.publish-consent-row {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(6, 13, 26, 0.85);
  border: 1px solid rgba(57, 123, 255, 0.2);
}