
:root {
  --tlama-deep-black: #0d0d0d;
  --tlama-data-cyan: #00f2ff;
  --tlama-alert-orange: #ff4d00;
  --tlama-success-green: #00ff88;
  --tlama-pure-white: #ffffff;
  --tlama-muted: rgba(255, 255, 255, 0.4);
  --tlama-border: rgba(0, 242, 255, 0.2);
  --tlama-glow: 0 0 15px rgba(0, 242, 255, 0.4);
}

body {
  background-color: var(--tlama-deep-black) !important;
  color: var(--tlama-pure-white) !important;
  font-family: 'Inter', 'Roboto', 'monospace', sans-serif !important;
  letter-spacing: 0.02em;
}

/* Header & Typography */
h1 {
  font-family: 'monospace' !important;
  font-weight: bold !important;
  letter-spacing: 2px !important;
  color: var(--tlama-pure-white) !important;
  text-transform: uppercase;
}

h1::before {
  content: "";
  color: var(--tlama-data-cyan);
}

.subtitle {
  font-family: 'monospace' !important;
  color: var(--tlama-muted) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Tabs */
.tab {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--tlama-border) !important;
  border-radius: 4px !important;
  color: var(--tlama-muted) !important;
  font-family: 'monospace' !important;
  font-weight: 600;
  transition: all 0.3s ease !important;
  text-transform: uppercase;
  padding: 10px 20px !important;
}

.tab:hover {
  background: rgba(0, 242, 255, 0.08) !important;
  border-color: var(--tlama-data-cyan) !important;
  color: var(--tlama-data-cyan) !important;
  box-shadow: var(--tlama-glow);
}

.tab.active {
  background: rgba(0, 242, 255, 0.15) !important;
  border-color: var(--tlama-data-cyan) !important;
  color: var(--tlama-data-cyan) !important;
  box-shadow: var(--tlama-glow);
}

/* Digest Cards */
.digest-card, .mark-card, .source-card, .pack-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--tlama-border) !important;
  border-left: 3px solid var(--tlama-data-cyan) !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  padding: 20px !important;
}

.digest-card:hover, .mark-card:hover, .source-card:hover, .pack-card:hover {
  background: rgba(0, 242, 255, 0.05) !important;
  border-color: var(--tlama-data-cyan) !important;
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.15);
  transform: translateY(-2px);
}

.digest-card .title, .mark-card .mark-author, .source-name, .pack-name {
  color: var(--tlama-data-cyan) !important;
  font-family: 'monospace' !important;
  font-weight: bold !important;
  letter-spacing: 0.5px;
}

.digest-card .excerpt, .pack-desc {
  color: var(--tlama-muted) !important;
  font-size: 0.85rem !important;
}

.time-badge, .mark-status, .pack-source-tag, .source-meta span {
  background: rgba(0, 242, 255, 0.1) !important;
  border: 1px solid rgba(0, 242, 255, 0.3) !important;
  color: var(--tlama-data-cyan) !important;
  border-radius: 2px !important;
  font-family: 'monospace' !important;
  font-size: 0.7rem !important;
}

/* Status Colors */
.mark-status.done {
  color: var(--tlama-success-green) !important;
  border-color: var(--tlama-success-green) !important;
  background: rgba(0, 255, 136, 0.1) !important;
}

.mark-status.pending {
  color: var(--tlama-alert-orange) !important;
  border-color: var(--tlama-alert-orange) !important;
  background: rgba(255, 77, 0, 0.1) !important;
}

/* Buttons */
.auth-btn, .back-btn, .theme-toggle, button:not(.tab) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--tlama-border) !important;
  border-radius: 4px !important;
  color: var(--tlama-pure-white) !important;
  font-family: 'monospace' !important;
  font-weight: 600;
  transition: all 0.2s ease !important;
}

.auth-btn:hover, .back-btn:hover, .theme-toggle:hover, button:not(.tab):hover {
  background: rgba(0, 242, 255, 0.1) !important;
  border-color: var(--tlama-data-cyan) !important;
  color: var(--tlama-data-cyan) !important;
}

.pack-install-btn, .source-form button.primary {
  background: var(--tlama-data-cyan) !important;
  color: var(--tlama-deep-black) !important;
  border: none !important;
}

.pack-install-btn:hover, .source-form button.primary:hover {
  background: #00cce6 !important;
  box-shadow: 0 0 15px var(--tlama-data-cyan);
}

/* Inputs */
input, select, textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  color: var(--tlama-pure-white) !important;
  font-family: 'monospace', sans-serif !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--tlama-data-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.2);
}

/* Viewer */
.digest-viewer {
  background: rgba(13, 13, 13, 0.95) !important;
  border: 1px solid var(--tlama-data-cyan) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 30px rgba(0, 242, 255, 0.1);
  padding: 30px !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--tlama-deep-black);
}
::-webkit-scrollbar-thumb {
  background: var(--tlama-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--tlama-data-cyan);
}

/* Animations */
@keyframes glow {
  0% { box-shadow: 0 0 5px var(--tlama-data-cyan); }
  50% { box-shadow: 0 0 20px var(--tlama-data-cyan); }
  100% { box-shadow: 0 0 5px var(--tlama-data-cyan); }
}

.active-pulse {
  animation: glow 2s infinite ease-in-out;
}
