:root {
  --app-header-height: 64px;
}

.app-shell {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 4000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(9, 13, 24, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-brand {
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
}

.app-title {
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
  color: #e6edff;
}

.app-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-main {
  padding: 32px 0 80px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-header h1,
.panel-header h2,
.panel-header h3 {
  margin: 0;
}

.panel-body {
  padding: 24px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(91, 140, 255, 0.15);
  color: #c9d9ff;
  border: 1px solid rgba(91, 140, 255, 0.4);
}

.badge--admin {
  background: rgba(70, 209, 200, 0.15);
  border-color: rgba(70, 209, 200, 0.4);
  color: #b8f3ee;
}

.badge--user {
  background: rgba(91, 140, 255, 0.15);
  border-color: rgba(91, 140, 255, 0.4);
  color: #c9d9ff;
}

.form-grid,
.auth-form {
  display: grid;
  gap: 16px;
}

.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 12, 22, 0.6);
  color: var(--text);
  font-size: 0.95rem;
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-error {
  display: block;
  margin-top: 6px;
  color: #fca5a5;
  font-size: 0.85rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: linear-gradient(135deg, #5b8cff, #46d1c8);
  color: #0b1220;
  box-shadow: 0 12px 24px rgba(59, 89, 180, 0.35);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.btn--soft {
  background: rgba(91, 140, 255, 0.12);
  border-color: rgba(91, 140, 255, 0.3);
  color: #c9d9ff;
}

.btn--danger {
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}

.btn--primary:hover,
.btn--ghost:hover,
.btn--soft:hover,
.btn--danger:hover {
  transform: translateY(-2px);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.project-row {
  display: grid;
  grid-template-columns: 1.2fr 2.4fr 1.4fr 1.2fr 16px;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 18, 32, 0.8);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.project-row--admin {
  grid-template-columns: 1.1fr 2.1fr 1.2fr 1.2fr auto 16px;
}

.project-row__actions {
  display: flex;
  justify-content: flex-start;
}

.project-row:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 140, 255, 0.4);
  box-shadow: 0 18px 36px rgba(8, 13, 26, 0.35);
}

.project-row.is-locked {
  opacity: 0.75;
}

.project-row__snippet {
  color: var(--muted);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row__chevron {
  font-size: 1.2rem;
  color: var(--muted);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}

.status--requested {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.4);
  color: #cbd5f5;
}

.status--approved {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.4);
  color: #bfdbfe;
}

.status--in_progress {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fde68a;
}

.status--completed {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.4);
  color: #bbf7d0;
}

.status--requested .status-dot {
  background: #94a3b8;
}

.status--approved .status-dot {
  background: #60a5fa;
}

.status--in_progress .status-dot {
  background: #f59e0b;
}

.status--completed .status-dot {
  background: #22c55e;
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 6000;
}

.modal.is-open {
  display: flex;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 20, 0.72);
}

.modal__content {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: min(560px, 100%);
  padding: 24px;
  box-shadow: var(--shadow);
}

.modal__close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}

#toastHost {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 7000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toast--success {
  border-color: rgba(34, 197, 94, 0.4);
}

.toast--error {
  border-color: rgba(248, 113, 113, 0.5);
}

.toast--info {
  border-color: rgba(59, 130, 246, 0.4);
}

.toast button {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

.app-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.app-summary .card {
  text-align: left;
}

.summary-value {
  font-size: 2rem;
  font-weight: 700;
}

.summary-label {
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-layout {
  display: grid;
  place-items: center;
  padding: 60px 24px;
}

.auth-panel {
  width: min(460px, 100%);
}

.auth-meta {
  color: var(--muted);
  font-size: 0.95rem;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  color: var(--muted);
}

.chat-box {
  background: rgba(8, 12, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  max-height: 320px;
  overflow-y: auto;
}

.chat-message {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 80%;
  font-size: 0.95rem;
}

.chat-message.self {
  background: rgba(91, 140, 255, 0.2);
  color: #e8eefc;
  margin-left: auto;
}

.chat-message.other {
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5f5;
}

.chat-meta {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

.pref-compact .panel-header {
  padding: 16px 18px;
}

.pref-compact .panel-body {
  padding: 18px;
}

.pref-compact .project-row {
  padding: 14px 16px;
}

.pref-reduce-motion *,
.pref-reduce-motion *::before,
.pref-reduce-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

.pref-theme-light {
  background: #f5f7fb;
  color: #0b1220;
}

.pref-theme-light .app-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #e2e8f0;
}

.pref-theme-light .app-title,
.pref-theme-light .app-brand {
  color: #0b1220;
}

.pref-theme-light .panel {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.pref-theme-light .project-row {
  background: #ffffff;
  border-color: #e2e8f0;
}

.pref-theme-light .btn--ghost {
  color: #1e293b;
  border-color: #cbd5f5;
}

.pref-theme-light .form-field input,
.pref-theme-light .form-field textarea,
.pref-theme-light .form-field select {
  background: #ffffff;
  color: #1e293b;
  border-color: #d7deec;
}

.pref-theme-light .chat-box {
  background: #f8fafc;
  border-color: #e2e8f0;
}

@media (max-width: 960px) {
  .app-header {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .app-title {
    justify-self: start;
  }

  .app-header-actions {
    justify-self: start;
  }

  .project-row,
  .project-row--admin {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app-header {
    padding: 14px 16px;
  }

  .panel-header,
  .panel-body {
    padding: 16px;
  }
}

/* PASTE AT END OF FILE: QA hardening + notifications */

/* Notifications UI */
.app-header .notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text); transition: transform .15s ease, border-color .2s ease, background .2s ease; }
.notif-bell:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
.notif-bell:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.notif-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary); color: #0b0f14; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.notif-badge.is-hidden { display: none; }

.notif-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, 90vw); max-height: 360px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 5000; }
.notif-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.notif-panel-header h4 { margin: 0; font-size: 14px; letter-spacing: .2px; }
.notif-panel-header .btn { padding: 6px 10px; font-size: 12px; }
.notif-list { list-style: none; margin: 0; padding: 8px; max-height: 300px; overflow: auto; }
.notif-item { display: grid; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid transparent; color: var(--text); text-decoration: none; }
.notif-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.notif-item.unread { background: rgba(124, 171, 255, 0.08); border-color: rgba(124, 171, 255, 0.18); }
.notif-item .title { font-weight: 600; font-size: 13px; }
.notif-item .body { color: var(--muted); font-size: 12px; }
.notif-item .meta { color: var(--muted); font-size: 11px; }
.notif-empty { padding: 16px; color: var(--muted); font-size: 13px; text-align: center; }

/* Skeleton loaders */
.skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,0.05); border-radius: 10px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-row { height: 64px; margin: 10px 0; }

/* Focus polish */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Reduce motion preference */
.pref-reduce-motion * { transition: none !important; animation: none !important; }

/* PASTE AT END OF FILE: currency dropdown */

.money-row { display: flex; gap: 10px; align-items: center; }
.money-row select { min-width: 90px; }
.money-row select,
.money-row input {
  height: 42px;
  border-radius: 10px;
}
@media (max-width: 640px) {
  .money-row { flex-direction: column; align-items: stretch; }
  .money-row select,
  .money-row input { width: 100%; }
}

/* PASTE AT END OF css/app-v2.css */

:root {
  --ink: #0b1220;
  --ink-muted: rgba(11, 18, 32, 0.68);
  --surface-light: rgba(255, 255, 255, 0.92);
  --border-light: rgba(11, 18, 32, 0.14);
}

.panel,
.modal,
#notifPanel,
.notif-panel,
.card:not(.card--dark),
.stats-card,
.summary-card {
  color: var(--ink);
}

.panel,
.modal,
#notifPanel,
.notif-panel {
  background: var(--surface-light);
}

.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel h5,
.panel h6,
.panel p,
.panel small,
.panel label,
.panel li,
.panel td,
.panel th,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal h5,
.modal h6,
.modal p,
.modal small,
.modal label,
.modal li,
.modal td,
.modal th,
.card:not(.card--dark) h1,
.card:not(.card--dark) h2,
.card:not(.card--dark) h3,
.card:not(.card--dark) h4,
.card:not(.card--dark) h5,
.card:not(.card--dark) h6,
.card:not(.card--dark) p,
.card:not(.card--dark) small,
.card:not(.card--dark) label,
.card:not(.card--dark) li,
.card:not(.card--dark) td,
.card:not(.card--dark) th,
#notifPanel h1,
#notifPanel h2,
#notifPanel h3,
#notifPanel h4,
#notifPanel h5,
#notifPanel h6,
#notifPanel p,
#notifPanel small,
#notifPanel label,
#notifPanel li,
#notifPanel td,
#notifPanel th,
.notif-panel h1,
.notif-panel h2,
.notif-panel h3,
.notif-panel h4,
.notif-panel h5,
.notif-panel h6,
.notif-panel p,
.notif-panel small,
.notif-panel label,
.notif-panel li,
.notif-panel td,
.notif-panel th {
  color: var(--ink);
}

.panel .muted,
.panel .subtle,
.panel .help,
.modal .muted,
.modal .subtle,
.modal .help,
.card:not(.card--dark) .muted,
.card:not(.card--dark) .subtle,
.card:not(.card--dark) .help,
#notifPanel .muted,
#notifPanel .subtle,
#notifPanel .help,
.notif-panel .muted,
.notif-panel .subtle,
.notif-panel .help,
.panel .auth-meta,
.modal .auth-meta,
.card:not(.card--dark) .auth-meta,
#notifPanel .auth-meta,
.notif-panel .auth-meta {
  color: var(--ink-muted);
}

.panel a,
.modal a,
.card:not(.card--dark) a,
#notifPanel a,
.notif-panel a {
  color: var(--ink);
}

.panel input,
.panel textarea,
.panel select,
.modal input,
.modal textarea,
.modal select,
.card:not(.card--dark) input,
.card:not(.card--dark) textarea,
.card:not(.card--dark) select,
#notifPanel input,
#notifPanel textarea,
#notifPanel select,
.notif-panel input,
.notif-panel textarea,
.notif-panel select {
  background: rgba(255, 255, 255, 0.98);
  color: var(--ink);
  border: 1px solid var(--border-light);
  caret-color: var(--ink);
}

.panel input::placeholder,
.panel textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder,
.card:not(.card--dark) input::placeholder,
.card:not(.card--dark) textarea::placeholder,
#notifPanel input::placeholder,
#notifPanel textarea::placeholder,
.notif-panel input::placeholder,
.notif-panel textarea::placeholder {
  color: rgba(11, 18, 32, 0.45);
}

.panel select option,
.modal select option,
.card:not(.card--dark) select option,
#notifPanel select option,
.notif-panel select option {
  background: #ffffff;
  color: var(--ink);
}

.panel .btn--ghost,
.modal .btn--ghost,
.card:not(.card--dark) .btn--ghost,
#notifPanel .btn--ghost,
.notif-panel .btn--ghost,
.panel .btn--soft,
.modal .btn--soft,
.card:not(.card--dark) .btn--soft,
#notifPanel .btn--soft,
.notif-panel .btn--soft {
  color: var(--ink);
  border-color: var(--border-light);
}

.panel :focus-visible,
.modal :focus-visible,
.card:not(.card--dark) :focus-visible,
#notifPanel :focus-visible,
.notif-panel :focus-visible {
  outline: 2px solid rgba(27, 99, 255, 0.5);
  outline-offset: 2px;
}

/* PASTE AT END OF css/app-v2.css: Readability + Contrast */
html { font-size: 16px; }
.app-shell { line-height: 1.6; }

.panel,
.modal,
.toast,
.notif-panel,
#notifPanel {
  color: var(--ink, #0b1220);
}

.panel-body,
.modal__content,
.toast,
.notif-panel,
#notifPanel {
  font-size: 1rem;
}

.panel .muted,
.modal .muted,
.toast .muted,
.notif-panel .muted,
#notifPanel .muted,
.panel .subtle,
.modal .subtle,
.toast .subtle,
.notif-panel .subtle,
#notifPanel .subtle {
  color: var(--ink-muted, rgba(11, 18, 32, 0.68));
}

.panel input,
.panel textarea,
.panel select,
.modal input,
.modal textarea,
.modal select,
.toast input,
.toast textarea,
.toast select,
.notif-panel input,
.notif-panel textarea,
.notif-panel select,
#notifPanel input,
#notifPanel textarea,
#notifPanel select {
  background: #ffffff;
  color: var(--ink, #0b1220);
  border: 1px solid rgba(11, 18, 32, 0.14);
  caret-color: var(--ink, #0b1220);
}

.panel select option,
.modal select option,
.toast select option,
.notif-panel select option,
#notifPanel select option {
  background: #ffffff;
  color: var(--ink, #0b1220);
}

.notif-panel .btn,
#notifPanel .btn,
.toast button {
  color: var(--ink, #0b1220);
}

.app-shell :focus-visible {
  outline: 2px solid rgba(27, 99, 255, 0.6);
  outline-offset: 2px;
}

/* v2 final: internal branding + support inbox */
.brand-mark {
  height: 1em;
  width: auto;
  margin-right: 0.5rem;
  vertical-align: -0.12em;
}

.app-brand {
  display: inline-flex;
  align-items: baseline;
}

.app-header-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
}

.app-header-nav a {
  color: var(--muted);
  font-size: 0.86rem;
}

.app-header-nav a:hover {
  color: var(--text);
}

.support-inbox-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
}

.support-thread-list {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 10px;
  max-height: 65vh;
  overflow: auto;
  background: rgba(7, 11, 21, 0.5);
}

.support-thread {
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.support-thread:hover {
  border-color: rgba(91, 140, 255, 0.45);
}

.support-thread.is-active {
  border-color: rgba(70, 209, 200, 0.55);
  background: rgba(70, 209, 200, 0.1);
}

.support-thread__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.support-thread__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #062339;
  background: #5bcff0;
}

.support-thread__email {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.support-thread__last {
  margin-top: 8px;
  font-size: 0.9rem;
}

.support-thread__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.support-thread-view {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 14px;
}

.support-thread-view h2 {
  margin-bottom: 12px;
}

.nav-badge-admin {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(70, 209, 200, 0.15);
  border: 1px solid rgba(70, 209, 200, 0.38);
}

@media (max-width: 1100px) {
  .app-header-nav {
    display: none;
  }
}

@media (max-width: 900px) {
  .support-inbox-layout {
    grid-template-columns: 1fr;
  }
}

.brand-mark{
  height: 1.15em;          /* slightly bigger than the “I” */
  width: auto;
  display: inline-block;
  vertical-align: -0.12em; /* baseline alignment */
  margin-right: 0.5rem;
}

.brand,
.brand__link{
  display: inline-flex;
  align-items: center;
}

/* Internal fix pack: request modal readability, support chat overflow, admin request hover */
#projectModal .modal__content {
  background: #f8fbff;
  color: #0b1220;
  border: 1px solid rgba(11, 18, 32, 0.14);
}

#projectModal .panel-header {
  border-bottom: 1px solid rgba(11, 18, 32, 0.12);
}

#projectModal .panel-header h2,
#projectModal .form-field label {
  color: #0b1220;
}

#projectModal .modal__close {
  color: #1f2e4b;
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

#projectModal .modal__close:hover {
  background: rgba(11, 18, 32, 0.08);
}

#projectModal .form-field input,
#projectModal .form-field textarea,
#projectModal .form-field select {
  background: #ffffff;
  color: #0b1220;
  border: 1px solid rgba(11, 18, 32, 0.18);
  line-height: 1.45;
}

#projectModal .form-field textarea {
  min-height: 128px;
}

#projectModal .form-field input::placeholder,
#projectModal .form-field textarea::placeholder {
  color: rgba(11, 18, 32, 0.5);
}

#projectModal .form-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #334155 50%),
    linear-gradient(135deg, #334155 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#projectModal .money-row select,
#projectModal .money-row input {
  min-height: 44px;
}

#projectFormError {
  min-height: 1.2em;
  margin-top: 12px;
  color: #b91c1c;
}

.support-thread-view {
  min-width: 0;
}

.support-thread-view .chat-box {
  max-height: 440px;
  min-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}

.support-thread-view .chat-message {
  max-width: 100%;
  width: fit-content;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.support-thread-view .chat-message > div {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#adminProjectList .project-row.project-row--admin {
  background: rgba(14, 22, 38, 0.78);
  border: 1px solid rgba(140, 164, 210, 0.22);
  box-shadow: none;
}

#adminProjectList .project-row.project-row--admin:hover {
  background: rgba(17, 27, 46, 0.9);
  border-color: rgba(91, 140, 255, 0.55);
  box-shadow: 0 12px 30px rgba(10, 20, 38, 0.38);
  transform: translateY(-2px);
}

#adminProjectList .project-row.project-row--admin .project-row__snippet {
  color: rgba(226, 235, 255, 0.86);
}

body.pref-theme-light #adminProjectList .project-row.project-row--admin {
  background: #f6f9ff;
  border-color: rgba(11, 18, 32, 0.13);
}

body.pref-theme-light #adminProjectList .project-row.project-row--admin:hover {
  background: #f1f6ff;
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 10px 24px rgba(30, 58, 138, 0.12);
}

body.pref-theme-light #adminProjectList .project-row.project-row--admin .project-row__snippet {
  color: rgba(30, 41, 59, 0.82);
}

@media (max-width: 640px) {
  #projectModal .modal__content {
    padding: 18px;
  }
}