/* ============================================================
   Legler Studio Panel — Design system
   ============================================================ */
:root {
  --bg:           #09090b;
  --bg-1:         #0d0d10;
  --bg-elev:      #131316;
  --bg-elev-2:    #1a1a1e;
  --bg-elev-3:    #232328;

  --border:       #27272a;
  --border-strong:#34343a;
  --border-soft:  #1f1f22;

  --text:         #f4f4f5;
  --text-dim:     #a1a1aa;
  --text-faint:   #71717a;

  --accent:       #818cf8;
  --accent-2:     #a78bfa;
  --accent-bg:    #ffffff;
  --accent-fg:    #09090b;

  --pending:      #eab308;
  --resolved:     #22c55e;
  --declined:     #ef4444;
  --internal:     #a78bfa;
  --danger:       #ef4444;

  --radius:       10px;
  --radius-sm:    8px;
  --radius-lg:    14px;

  --ring:         0 0 0 3px rgba(129, 140, 248, 0.18);
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:       0 4px 12px -2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255,255,255,0.02) inset;
  --shadow-lg:    0 20px 40px -12px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255,255,255,0.03) inset;

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:       120ms var(--ease);
  --t:            180ms var(--ease);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.005em;
}

body {
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(129,140,248,0.06), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(167,139,250,0.04), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

a { color: var(--text); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: #fff; }

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

::selection { background: rgba(129,140,248,0.3); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #4a4a52; }

/* ============================================================
   Buttons
   ============================================================ */
button {
  cursor: pointer;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.55rem 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}
button:hover:not(:disabled) {
  background: var(--bg-elev-3);
  border-color: #45454d;
}
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: var(--ring); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.primary {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 1px 8px rgba(0,0,0,0.4);
}
button.primary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 4px 16px rgba(0,0,0,0.5);
}
button.primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 1px 4px rgba(0,0,0,0.35);
}
button.primary:focus-visible { box-shadow: var(--ring), 0 4px 16px rgba(0,0,0,0.5); }

button.danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(239,68,68,0.3);
}
button.danger:hover:not(:disabled) {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.5);
}
button.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}
button.ghost:hover:not(:disabled) {
  background: var(--bg-elev);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ============================================================
   Form controls
   ============================================================ */
input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
textarea {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  width: 100%;
  outline: none;
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  font-feature-settings: inherit;
}
input:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: var(--bg);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

select {
  background-color: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 2.2rem 0.6rem 0.8rem;
  width: 100%;
  outline: none;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
select:hover { border-color: var(--border-strong); }
select option { background: var(--bg-elev); color: var(--text); }

.field { margin-bottom: 1rem; }
.row { display: flex; gap: 0.75rem; }
.row > * { flex: 1; }

/* Login / auth screens — styled in login.css (scoped to .login-shell) */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 400px; position: relative; }
.login-remember {
  display: flex; align-items: center; gap: 0.7rem; cursor: pointer; user-select: none;
  font-size: 0.85rem; line-height: 1.4;
}
.login-remember span { flex: 1; font-weight: 500; }
.login-remember input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative;
  width: 2.05rem; height: 1.15rem; min-width: 2.05rem; margin: 0;
  border-radius: 999px; cursor: pointer;
}
.login-remember input[type="checkbox"]::after {
  content: ''; position: absolute; top: 50%; left: 0.15rem;
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 180ms var(--ease), background var(--t-fast);
}
.login-remember input[type="checkbox"]:checked::after {
  transform: translate(0.9rem, -50%);
}
.login-links { margin: 0.75rem 0 0; text-align: center; font-size: 0.85rem; }
.login-success { margin-top: 0.75rem; font-size: 0.88rem; line-height: 1.45; }
.login-card h1 { font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.3rem; }
.login-card p.sub { margin-bottom: 1.75rem; font-size: 0.9rem; }

/* ============================================================
   App shell
   ============================================================ */
.app-shell { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; }

header.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(13, 13, 16, 0.7);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.brand::before {
  content: '';
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #fff, #d4d4d8);
  box-shadow: 0 0 12px rgba(255,255,255,0.15), inset 0 1px 0 rgba(255,255,255,0.4);
}

main {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 0;
}
@media (max-width: 800px) {
  main { grid-template-columns: 1fr; }
  aside.sidebar { display: none; }
}

aside.sidebar {
  border-right: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(19,19,22,0.6) 0%, rgba(13,13,16,0.6) 100%);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 57px);
  position: sticky;
  top: 57px;
  height: calc(100vh - 57px);
}
.sidebar-nav { flex: 1; padding: 1rem 0.7rem; overflow-y: auto; }
.sidebar-section {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  font-weight: 600;
}
.sidebar-section:first-child { margin-top: 0; }
.sidebar a {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.sidebar a:hover {
  background: var(--bg-elev);
  color: var(--text);
}
.sidebar a.active {
  background: var(--bg-elev-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sidebar a.active::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 0 3px 3px 0;
}

.sidebar-footer {
  border-top: 1px solid var(--border-soft);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-elev);
}
.user-chip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.2rem 0.4rem;
}
.user-chip .name {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip .meta {
  font-size: 0.7rem;
  color: var(--text-faint);
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.user-chip .meta .role {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.user-chip .meta .role.admin { color: #3b82f6; }
.user-chip .meta .role.manager { color: #818cf8; }
.user-chip .meta .role.support,
.user-chip .meta .role.moderator,
.user-chip .meta .role.mod { color: var(--text-dim); }
.user-chip .meta .dot { color: var(--border-strong); }

.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  padding: 0;
  flex-shrink: 0;
}
.icon-btn:hover:not(:disabled) {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.4);
  color: var(--danger);
}
.icon-btn svg { width: 15px; height: 15px; }

section.content {
  padding: 1.75rem 2rem;
  max-width: 1100px;
  width: 100%;
  animation: fadeIn 240ms var(--ease);
}
@media (max-width: 800px) { section.content { padding: 1.25rem 1rem; } }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

h2.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.empty-state {
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.92rem;
}

/* ============================================================
   Cards (project list, request list)
   ============================================================ */
.card-list { display: grid; gap: 0.75rem; }
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
  position: relative;
}
.card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.card:active { transform: translateY(0); }
.card--has-unread {
  border: 1px solid rgba(234, 179, 8, 0.5);
  background: rgba(234, 179, 8, 0.06);
  box-shadow: none;
}
.card--has-unread:hover {
  border: 1px solid rgba(234, 179, 8, 0.65);
  background: rgba(234, 179, 8, 0.09);
  box-shadow: var(--shadow);
}
.card-title {
  font-weight: 600;
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
  letter-spacing: -0.01em;
}
.card-title-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.req-unread-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem 0.15rem 0.35rem;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.45);
  font-weight: 700;
  font-size: 0.68rem;
  line-height: 1;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: req-unread-pulse 2.2s ease-in-out infinite;
}
.req-unread-icon {
  flex-shrink: 0;
  opacity: 0.95;
}
.req-unread-badge-text { white-space: nowrap; }
.req-unread-meta {
  color: #fde047;
  font-weight: 600;
  font-size: 0.78rem;
}
.req-unread-meta::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--pending);
  margin-right: 0.35rem;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.35);
  animation: req-unread-pulse 2.2s ease-in-out infinite;
}
.req-unread-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.1);
  color: var(--text);
}
.req-unread-callout .req-unread-icon {
  margin-top: 0.15rem;
  color: #fde047;
  flex-shrink: 0;
}
.req-unread-callout-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.req-unread-callout-text strong {
  font-size: 0.92rem;
  color: #fde047;
}
.req-unread-callout-text span {
  color: var(--text-dim);
}
@keyframes req-unread-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
.card-meta {
  color: var(--text-dim);
  font-size: 0.82rem;
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}
.card-meta > * { display: inline-flex; align-items: center; gap: 0.3rem; }
.card-desc { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.5rem; line-height: 1.55; }

/* ============================================================
   Pills (status, role, badges)
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.pill.pending  { background: rgba(234,179,8,0.12);   color: var(--pending);  border-color: rgba(234,179,8,0.25); }
.pill.resolved { background: rgba(34,197,94,0.12);   color: var(--resolved); border-color: rgba(34,197,94,0.25); }
.pill.declined { background: rgba(239,68,68,0.12);   color: var(--declined); border-color: rgba(239,68,68,0.25); }
.pill.internal { background: rgba(167,139,250,0.12); color: var(--internal); border-color: rgba(167,139,250,0.25); }
.pill.client,
.pill.user     { background: rgba(255,255,255,0.05); color: var(--text-dim); border-color: rgba(255,255,255,0.08); }
.pill.admin {
  background: rgba(30, 58, 138, 0.35);
  color: #60a5fa;
  border-color: rgba(37, 99, 235, 0.45);
}
.pill.manager {
  background: rgba(67, 56, 202, 0.22);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.4);
}
.pill.mod,
.pill.moderator,
.pill.support {
  background: rgba(161, 161, 170, 0.1);
  color: var(--text-dim);
  border-color: rgba(161, 161, 170, 0.22);
}

/* Status switcher (admin) */
.status-switch {
  display: inline-flex;
  gap: 0;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.status-switch button {
  padding: 0.35rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: none;
  color: var(--text-faint);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.status-switch button:hover:not(:disabled):not(.active) { color: var(--text); background: rgba(255,255,255,0.04); }
.status-switch button:disabled { cursor: not-allowed; opacity: 0.6; }
.status-switch button .sdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity var(--t-fast), box-shadow var(--t-fast);
}
.status-switch button.active .sdot { opacity: 1; box-shadow: 0 0 8px currentColor; }

.status-switch button.pending  { color: var(--pending); }
.status-switch button.resolved { color: var(--resolved); }
.status-switch button.declined { color: var(--declined); }

.status-switch button.active.pending  { background: rgba(234,179,8,0.15);  box-shadow: inset 0 0 0 1px rgba(234,179,8,0.4); }
.status-switch button.active.resolved { background: rgba(34,197,94,0.15);  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.4); }
.status-switch button.active.declined { background: rgba(239,68,68,0.15);  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.4); }

.status-switch button.saving { animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* ============================================================
   Filter bar
   ============================================================ */
.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: end;
  position: relative;
}
.filter-bar .filter-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.filter-bar .filter-field label {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0;
}
.filter-bar .filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  align-items: center;
}
.filter-bar .filter-summary {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.status-boxes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
.status-boxes button {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.52rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.status-boxes button:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text);
}
.status-boxes button.active[data-status="pending"] {
  border-color: rgba(234,179,8,0.55);
  color: var(--pending);
  background: rgba(234,179,8,0.1);
}
.status-boxes button.active[data-status=""] {
  border-color: rgba(255,255,255,0.28);
  color: var(--text);
  background: rgba(255,255,255,0.08);
}
.status-boxes button.active[data-status="resolved"] {
  border-color: rgba(34,197,94,0.55);
  color: var(--resolved);
  background: rgba(34,197,94,0.1);
}
.status-boxes button.active[data-status="declined"] {
  border-color: rgba(239,68,68,0.55);
  color: var(--declined);
  background: rgba(239,68,68,0.1);
}

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1rem;
  animation: fadeIn 180ms var(--ease);
}
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 220ms var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)  scale(1);    }
}
.modal h3 {
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}

/* ============================================================
   Request detail
   ============================================================ */
.request-detail { display: grid; gap: 1rem; }
.request-header {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.request-header h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.6rem; letter-spacing: -0.015em; }
.request-header .meta {
  color: var(--text-dim);
  font-size: 0.82rem;
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}
.request-header .desc {
  margin-top: 1.1rem;
  white-space: pre-wrap;
  color: var(--text);
  line-height: 1.6;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-soft);
}

.request-admin-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.attachments-grid { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-dim);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.attachment:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.attachment img {
  max-width: 220px;
  max-height: 150px;
  border-radius: var(--radius-sm);
  display: block;
  border: 1px solid var(--border);
}

/* ============================================================
   Comments / thread
   ============================================================ */
.thread { display: flex; flex-direction: column; gap: 0.75rem; }

.comment {
  display: block;
  animation: fadeIn 240ms var(--ease);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  user-select: none;
  border: 1px solid transparent;
}
.avatar.client,
.avatar.user {
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border-color: var(--border);
}
.avatar.mod,
.avatar.moderator,
.avatar.support {
  background: rgba(113, 113, 122, 0.22);
  color: #d4d4d8;
  border-color: rgba(161, 161, 170, 0.35);
}
.avatar.manager {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  color: #fff;
}
.avatar.admin {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #eff6ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.comment-bubble {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  position: relative;
  min-width: 0;
}
.comment.admin .comment-bubble {
  background: var(--bg-elev);
  border-color: rgba(239, 68, 68, 0.45);
}
.comment.client .comment-bubble,
.comment.user .comment-bubble {
  border-color: #3f3f46;
}
.comment.internal .comment-bubble {
  border-color: rgba(167,139,250,0.35);
  background: rgba(167,139,250,0.04);
}

.comment-head {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.82rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  margin: -0.8rem -1rem 0.75rem;
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius) var(--radius) 0 0;
}
.comment.admin .comment-head {
  border-bottom-color: rgba(255,255,255,0.08);
}
.comment.internal .comment-head {
  border-bottom-color: rgba(167,139,250,0.18);
}
.comment-head .author { font-weight: 600; color: var(--text); letter-spacing: -0.005em; }
.comment.admin .comment-head .author { color: #fff; }
.comment-head .when { color: var(--text-faint); margin-left: auto; font-size: 0.72rem; }
.comment-head .comment-edited { color: var(--text-faint); font-size: 0.7rem; font-style: italic; }
.comment-head .comment-edit-btn,
.comment-head .comment-delete-btn {
  font-size: 0.72rem;
  padding: 0.12rem 0.4rem;
  margin-left: 0.15rem;
}
.comment-head .comment-delete-btn { color: var(--danger); }
.comment-head .comment-delete-btn:hover { color: #fff; background: rgba(239, 68, 68, 0.15); }
.comment-delete-preview {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.comment-delete-preview-label {
  font-size: 0.75rem;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}
.comment-delete-preview-body {
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.comment-body { white-space: pre-wrap; word-wrap: break-word; color: var(--text); line-height: 1.55; }
.comment.client .comment-body,
.comment.user .comment-body { color: #d4d4d8; }

/* Composer */
.composer {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: border-color var(--t-fast);
}
.composer:focus-within { border-color: var(--border-strong); }
.composer-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.composer-actions .spacer { flex: 1; }

.file-input-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-dim);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  font-weight: 500;
}
.file-input-label:hover { color: var(--text); border-color: #45454d; background: var(--bg-elev-3); }
.file-input-label input { display: none; }

.file-list { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-faint); }
.file-list span {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.checkbox-row { display: flex; align-items: center; gap: 0.4rem; color: var(--text-dim); font-size: 0.85rem; }
.checkbox-row input { width: auto; }

/* Internal note toggle */
.internal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  transition: all var(--t-fast);
  font-weight: 500;
}
.internal-toggle:hover { color: var(--text); border-color: #45454d; }
.internal-toggle input { display: none; }
.internal-toggle .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background var(--t-fast), box-shadow var(--t-fast);
  flex-shrink: 0;
}
.internal-toggle .label-text { font-weight: 500; }
.internal-toggle .lock { display: inline-flex; width: 11px; height: 11px; opacity: 0.6; }
.internal-toggle:has(input:checked) {
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.4);
  color: var(--internal);
}
.internal-toggle:has(input:checked) .dot {
  background: var(--internal);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.18);
}
.internal-toggle:has(input:checked) .lock { opacity: 1; }

/* ============================================================
   Misc
   ============================================================ */
.toast {
  position: fixed; top: 1rem; right: 1rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  z-index: 200;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
  animation: toastIn 240ms var(--ease);
}
.toast.error { border-color: var(--danger); color: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.error-text { color: var(--danger); font-size: 0.82rem; margin-top: 0.5rem; }

.crumbs { color: var(--text-faint); font-size: 0.82rem; margin-bottom: 0.6rem; }
.crumbs a { color: var(--text-dim); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--text); }

/* Tables */
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.tbl th, .tbl td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.88rem;
}
.tbl th {
  color: var(--text-faint);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  background: var(--bg-1);
}
.tbl tr { transition: background var(--t-fast); }
.tbl tbody tr:hover { background: var(--bg-elev-2); }
.tbl tr:last-child td { border-bottom: none; }
.tbl td.actions { text-align: right; }
.tbl button { padding: 0.32rem 0.65rem; font-size: 0.78rem; }
.users-table-wrap { width: 100%; }
.role-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.edit-mobile { display: none; }

/* ============================================================
   Mobile — bottom nav + drawer
   ============================================================ */

/* Hide sidebar on mobile, show bottom nav instead */
@media (max-width: 800px) {
  main { grid-template-columns: 1fr; }
  aside.sidebar { display: none; }

  section.content {
    padding: 1rem;
    padding-bottom: calc(1rem + 60px + env(safe-area-inset-bottom));
  }

  h2.page-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }

  .row { flex-direction: column; gap: 0; }

  /* Filter bar stacks on mobile */
  .filter-bar {
    grid-template-columns: 1fr;
    padding: 0.85rem;
  }
  .filter-bar .filter-actions {
    justify-content: space-between;
    padding-top: 0.25rem;
  }

  /* Cards full bleed */
  .card { border-radius: var(--radius-sm); }

  /* Request header stacks status switch */
  .request-header .meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .status-switch { width: 100%; justify-content: stretch; }
  .status-switch button { flex: 1; justify-content: center; }

  /* Comment thread: tighten on mobile */
  .avatar { width: 24px; height: 24px; font-size: 0.68rem; }
  .comment-bubble { padding: 0.65rem 0.8rem; }
  .comment-head { padding: 0.45rem 0.8rem; margin: -0.65rem -0.8rem 0.65rem; }

  /* Composer actions wrap */
  .composer-actions { gap: 0.4rem; }
  .composer-actions .spacer { display: none; }
  .composer-actions button[type=submit] { margin-left: auto; }

  /* Tables become stacked cards on mobile */
  .tbl, .tbl thead, .tbl tbody, .tbl th, .tbl td, .tbl tr {
    display: block;
  }
  .tbl thead { display: none; }
  .tbl tr {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.6rem;
    padding: 0.2rem 0;
    overflow: hidden;
  }
  .tbl tbody tr:hover { background: var(--bg-elev-2); }
  .tbl td {
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
  }
  .tbl td:last-child { border-bottom: none; }
  .tbl td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-faint);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .tbl td.actions { justify-content: flex-end; }
  .tbl td.actions::before { display: none; }

  /* Users tab: compact 2-line user rows, no horizontal scroll */
  .users-table-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .users-tbl,
  .users-tbl thead,
  .users-tbl tbody,
  .users-tbl th,
  .users-tbl td,
  .users-tbl tr {
    display: block;
  }
  .users-tbl { border: none; background: none; }
  .users-tbl thead { display: none; }
  .users-tbl tr {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
  }
  .users-tbl tr:last-child { margin-bottom: 0; }
  .users-tbl tbody tr:hover { background: var(--bg-elev-2); }
  /* hide all individual cells by default */
  .users-tbl td { display: none; border: none; padding: 0; }
  .users-tbl td::before { display: none; content: none; }

  /* first row: name + role pill + action button */
  .users-tbl td[data-label="Name"],
  .users-tbl td[data-label="Role"],
  .users-tbl td.actions {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
  }
  .users-tbl td[data-label="Name"] {
    font-weight: 600;
    font-size: 0.92rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
  }
  .users-tbl td[data-label="Role"] { margin-left: 0.5rem; }
  .users-tbl td.actions {
    margin-left: auto;
    padding-left: 0.5rem;
    justify-content: flex-end;
  }
  .edit-inline { display: none; }
  .edit-mobile { display: inline-flex; }
  /* wrap the top row */
  .users-tbl tr::after {
    content: '';
    display: block;
    clear: both;
  }

  /* second line: email · UID · joined */
  .users-tbl td[data-label="Email"],
  .users-tbl td[data-label="UID"],
  .users-tbl td[data-label="Joined"] {
    display: inline;
    font-size: 0.75rem;
    color: var(--text-faint);
    padding: 0;
    white-space: nowrap;
  }
  .users-tbl td[data-label="Email"] { display: block; margin-top: 0.3rem; overflow: hidden; text-overflow: ellipsis; }
  .users-tbl td[data-label="UID"]::before    { content: ' · '; color: var(--border-strong); }
  .users-tbl td[data-label="Joined"]::before { content: ' · '; color: var(--border-strong); }

  /* Modal fills screen on mobile */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    max-width: 100%;
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
    animation: modalUp 260ms var(--ease);
  }
  @keyframes modalUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Toast */
  .toast { left: 1rem; right: 1rem; max-width: 100%; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Crumbs stay on one line with truncation */
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Mobile bottom nav bar */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(13,13,16,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid var(--border);
  z-index: 20;
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 800px) { .mobile-nav { display: flex; } }

.mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex: 1;
  padding: 0.5rem;
  color: var(--text-faint);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 8px;
  transition: color var(--t-fast);
  text-decoration: none;
}
.mobile-nav a:hover { color: var(--text-dim); }
.mobile-nav a.active { color: var(--text); }
.mobile-nav a svg { width: 22px; height: 22px; stroke-width: 1.8; }
.mobile-nav a .nav-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t-fast);
  margin-top: -4px;
}
.mobile-nav a.active .nav-dot { opacity: 1; }

/* Slide-over drawer for user info on mobile */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 30;
  animation: fadeIn 180ms var(--ease);
}
.drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 31;
  animation: modalUp 240ms var(--ease);
  box-shadow: var(--shadow-lg);
}
.drawer-handle {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 0 auto 1.25rem;
}
.drawer-user {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.drawer-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, #d4d4d8 100%);
  color: #18181b;
  flex-shrink: 0;
}
.drawer-meta { flex: 1; min-width: 0; }
.drawer-meta .dname { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-meta .dinfo { font-size: 0.75rem; color: var(--text-dim); display: flex; gap: 0.4rem; margin-top: 0.1rem; }
.drawer-meta .drole {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.drawer-meta .drole.admin { color: #60a5fa; }
.drawer-meta .drole.manager { color: #a5b4fc; }
.drawer-meta .drole.support,
.drawer-meta .drole.moderator,
.drawer-meta .drole.mod { color: var(--text-dim); }
.drawer-meta .drole.client { color: var(--text-dim); }

.drawer-section {
  margin: 0.85rem 0 0.35rem;
  padding: 0 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.drawer-section:first-of-type {
  margin-top: 0.5rem;
}
.drawer-link {
  display: block;
  text-align: center;
  margin: 0 0 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
}
.drawer-link:hover { border-color: #45454d; background: var(--bg-elev-3); color: #fff; }
.drawer-link.active {
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--bg-elev-3);
  color: #fff;
}

.staff-2fa-banner {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}

.twofa-qr {
  display: block;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0.35rem;
}

.recovery-codes-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.35rem 0.75rem;
}

.recovery-codes-list code {
  font-size: 0.82rem;
}

.security-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  max-width: 520px;
}

.drawer-logout {
  width: auto;
  margin: 0 auto;
  padding: 0.45rem 1.25rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--danger);
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.06);
  font-weight: 600;
  font-size: 0.875rem;
}
.drawer-logout:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.5); }

/* Searchable user picker */
.user-picker { position: relative; }
.user-picker .picker-list {
  margin-top: 0.5rem;
  max-height: 138px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.user-picker .picker-item {
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast);
}
.user-picker .picker-item:last-child { border-bottom: none; }
.user-picker .picker-item:hover { background: var(--bg-elev-2); }
.user-picker .picker-item.selected { background: var(--bg-elev-2); }
.user-picker .picker-item .pname { font-weight: 600; font-size: 0.9rem; letter-spacing: -0.005em; }
.user-picker .picker-item .pemail { font-size: 0.78rem; color: var(--text-dim); }
.user-picker .picker-empty {
  padding: 1.2rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.user-picker .picker-selected {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.user-picker .picker-selected strong { color: var(--text); font-weight: 600; }
.user-picker .picker-selected button {
  padding: 0.28rem 0.6rem;
  font-size: 0.75rem;
  background: transparent;
  border-color: var(--border);
}

.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Backup action cards ── */
.backup-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
  align-items: stretch;
}
.backup-action-grid--single {
  grid-template-columns: minmax(0, 22rem);
  margin-bottom: 0;
}
.backup-action-grid--manager {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 52rem;
}
@media (max-width: 720px) {
  .backup-action-grid--manager {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .backup-action-grid {
    grid-template-columns: 1fr;
  }
}

.backup-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  height: 100%;
}
.backup-card--create { border-top: 2px solid var(--accent); }
.backup-card--restore { border-top: 2px solid rgba(239,68,68,0.45); }

.backup-card__icon {
  width: 2rem; height: 2rem;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.65rem;
  flex-shrink: 0;
}
.backup-card--create .backup-card__icon { background: rgba(129,140,248,0.1); color: var(--accent); }
.backup-card--restore .backup-card__icon { background: rgba(239,68,68,0.1); color: var(--danger); }
.backup-card__icon svg { width: 1rem; height: 1rem; }

.backup-card h3 { font-size: 0.88rem; font-weight: 600; margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.backup-card__desc { font-size: 0.78rem; color: var(--text-dim); margin: 0 0 0.9rem; line-height: 1.5; flex: 1; }

.backup-card__body { margin-bottom: 0.65rem; }
.backup-card__body label { display: block; font-size: 0.73rem; color: var(--text-dim); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
.backup-card__body-label {
  display: block;
  font-size: 0.73rem;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.backup-card__body select { width: 100%; font-size: 0.8rem; }

/* Custom file trigger (native input overlaid for full click area) */
.backup-file-picker {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.backup-file-picker__trigger-wrap {
  position: relative;
  border-radius: var(--radius-sm);
  min-height: 2.75rem;
}
.backup-file-input-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 1rem;
}
.backup-file-input-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: linear-gradient(165deg, rgba(129, 140, 248, 0.08) 0%, var(--bg-elev-2) 45%, var(--bg-elev-3) 100%);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  pointer-events: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), border-style var(--t-fast), color var(--t-fast);
}
.backup-file-input-face svg {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.95;
}
.backup-file-picker__trigger-wrap:hover .backup-file-input-face {
  border-color: rgba(129, 140, 248, 0.55);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.12);
}
.backup-file-picker__trigger-wrap:focus-within .backup-file-input-face {
  border-color: var(--accent);
  border-style: solid;
  box-shadow: var(--ring);
}
.backup-file-picker__name {
  font-size: 0.74rem;
  color: var(--text-faint);
  line-height: 1.35;
  word-break: break-all;
  min-height: 1.1em;
}

.backup-card__footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.4rem; }
.backup-card__footer button { width: 100%; }
.backup-card__status { font-size: 0.76rem; color: var(--text-dim); min-height: 1em; }

/* ── Backup stats row ── */
.backup-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
@media (max-width: 900px) {
  .backup-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .backup-stat-row { grid-template-columns: 1fr; }
}
.backup-stat {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.backup-stat__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
}
.backup-stat__value {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.backup-stat__value--time { font-size: 0.92rem; }
.backup-stat__sub {
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.35;
}

/* ── Source pill ── */
.backup-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.2;
}
.backup-pill--auto {
  background: rgba(34, 197, 94, 0.12);
  color: var(--resolved);
  border-color: rgba(34, 197, 94, 0.28);
}
.backup-pill--manual {
  background: rgba(129, 140, 248, 0.12);
  color: var(--accent);
  border-color: rgba(129, 140, 248, 0.28);
}

/* ── Recent backups table ── */
.backup-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.backup-list-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.backup-table .backup-table-file {
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  color: var(--text-dim);
  word-break: break-all;
}
.backup-table-num,
.backup-table th.backup-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.backup-table-actions,
.backup-table th.backup-table-actions-head {
  text-align: right;
  white-space: nowrap;
}
.backup-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.backup-table-actions .ghost {
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
}
.backup-table-actions .backup-del-btn {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.35);
}
.backup-table-actions .backup-del-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.6);
}
.backup-table-empty {
  color: var(--text-dim);
  padding: 1rem;
  text-align: center;
  font-size: 0.86rem;
}
@media (max-width: 760px) {
  .backup-table-actions { justify-content: flex-start; }
}

/* ── Inspect modal ── */
.modal.backup-inspect-modal {
  max-width: 640px;
}
.backup-inspect-filename {
  margin: -0.25rem 0 0.9rem;
  font-size: 0.78rem;
}
.backup-inspect-filename code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  color: var(--text-dim);
  word-break: break-all;
}
.backup-inspect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 640px) {
  .backup-inspect-grid { grid-template-columns: 1fr; }
}
.backup-inspect-block {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
}
.backup-inspect-block h4 {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin: 0 0 0.55rem;
}
.backup-inspect-include {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  margin: 0 0 0.7rem;
  padding: 0;
}
.backup-inspect-include li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-dim);
}
.backup-inspect-include li.is-ok { color: var(--text); }
.backup-inspect-dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}
.backup-inspect-include li.is-ok .backup-inspect-dot { background: var(--resolved); }
.backup-inspect-include li.is-missing .backup-inspect-dot { background: var(--declined); }
.backup-inspect-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  border-top: 1px dashed var(--border);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}
.backup-inspect-meta strong {
  color: var(--text);
  margin-right: 0.35rem;
  font-weight: 600;
}
.backup-inspect-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.backup-inspect-table td {
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim);
}
.backup-inspect-table tr:last-child td { border-bottom: 0; }
.backup-inspect-table td:first-child { color: var(--text); }

.backup-restore-target {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  word-break: break-all;
  margin-bottom: 0.75rem;
  color: var(--text);
}

/* ============================================================
   Client detail page
   ============================================================ */
.clickable-row { cursor: pointer; }
.users-tbl tbody tr:not(.clickable-row) { cursor: default; }
.users-tbl tbody tr:not(.clickable-row):hover { background: transparent; }

.user-name-cell { display: flex; flex-direction: column; gap: 0.15rem; }
.user-name-cell strong { font-weight: 600; color: var(--text); }
.user-company { font-size: 0.78rem; color: var(--text-faint); }

.user-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 0.9rem;
}
.user-detail-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-elev-3), var(--bg-elev-2));
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.user-detail-meta { flex: 1; min-width: 0; }
.user-detail-name {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.1rem;
}
.user-detail-sub {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin-bottom: 0.55rem;
}
.user-detail-chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}
.meta-chip {
  font-size: 0.74rem;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

.tabbar {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.1rem;
  overflow-x: auto;
}
.tabbar .tab {
  padding: 0.65rem 0.95rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.tabbar .tab:hover { color: var(--text); }
.tabbar .tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.user-tab-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.user-tab-card + .user-tab-card {
  margin-top: 1.25rem;
}
.account-view-only-note {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 0 0 1.1rem;
}
.readonly-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}
.field-readonly .readonly-value {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 0.55rem 0;
  word-break: break-word;
}
.field-readonly label {
  color: var(--text-faint);
}
@media (max-width: 720px) {
  .readonly-grid { grid-template-columns: 1fr; }
}
.card-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.user-profile-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.form-actions-split { justify-content: space-between; align-items: center; }

.panel-stats,
.invoice-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.1rem;
  margin-bottom: 0.9rem;
}
.stat-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}
.stat-label {
  font-size: 0.72rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}
.stat-card--attention {
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.08);
}
.stat-card--attention .stat-label { color: #fde047; }
.stat-card--attention .stat-value { color: #fde047; }

@media (max-width: 700px) {
  .user-detail-header {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1rem;
  }
  .user-profile-form .row { grid-template-columns: 1fr; }
  .panel-stats,
  .invoice-stats { grid-template-columns: 1fr; }
  .form-actions-split { flex-direction: column-reverse; align-items: stretch; }
  .form-actions-split button { width: 100%; }
}

/* ============================================================
   Invoices
   ============================================================ */
.user-tab-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.user-tab-card-head .card-section-title { margin-bottom: 0; }

.stat-sub { color: var(--text-faint); font-size: 0.75rem; margin-top: 0.25rem; }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-link.primary { background: var(--accent-bg); color: var(--accent-fg); border: 1px solid var(--accent-bg); }
.btn-link.primary:hover { background: #f0f0f3; }
.btn-link.ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-link.ghost:hover { color: var(--text); border-color: var(--border-strong); }

.invoices-tbl td.num,
.invoices-tbl th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Invoice create form */
.invoice-form .billing-details {
  margin-top: 0.6rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}
.invoice-form .billing-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.invoice-form .billing-details[open] summary { margin-bottom: 0.85rem; }
.invoice-form .billing-details .field { margin-bottom: 0.75rem; }

.invoice-items { display: grid; gap: 0.5rem; }
.invoice-item-row {
  display: grid;
  grid-template-columns: 1fr 90px 130px 110px 36px;
  gap: 0.5rem;
  align-items: center;
}
.invoice-item-row .ii-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.invoice-item-row .ii-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.invoice-item-row .ii-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 0.86rem;
}
.invoice-item-row .ii-remove {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}

.invoice-totals {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: 0.35rem;
  max-width: 320px;
  margin-left: auto;
}
.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.totals-row span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.totals-grand {
  font-size: 1rem;
  font-weight: 600;
  padding-top: 0.4rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.totals-grand span:last-child { color: var(--text); font-weight: 600; }

/* Invoice detail */
.invoice-detail { display: grid; gap: 0.9rem; }
.invoice-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.invoice-number {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.invoice-sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.25rem; }
.invoice-status-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.text-faint { color: var(--text-faint); }

.invoice-email-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.65rem;
}

.invoice-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.invoice-actions .danger { margin-left: auto; }

.invoice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.bill-to { display: grid; gap: 0.2rem; color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.bill-to .bill-name { color: var(--text); font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }

@media (max-width: 700px) {
  .invoice-item-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "desc desc"
      "qty price"
      "total remove";
    gap: 0.4rem;
  }
  .invoice-item-row .ii-desc { grid-area: desc; }
  .invoice-item-row .ii-qty { grid-area: qty; }
  .invoice-item-row .ii-price { grid-area: price; }
  .invoice-item-row .ii-total { grid-area: total; text-align: left; }
  .invoice-item-row .ii-remove { grid-area: remove; justify-self: end; }
  .invoice-detail-head { flex-direction: column; align-items: flex-start; }
  .invoice-status-block { align-items: flex-start; }
  .invoice-actions .danger { margin-left: 0; }
  .invoice-grid { grid-template-columns: 1fr; }
}

/* Staff activity log (founder-only) */
.staff-log-card + .staff-log-card {
  margin-top: 1.25rem;
}
.staff-log-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}
.staff-presence-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.88rem;
}
.staff-presence-live {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.28);
}
.staff-presence-idle {
  background: var(--bg-elev-2);
  color: var(--text-dim);
}
.staff-presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.staff-presence-live .staff-presence-dot {
  background: var(--resolved);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.staff-presence-idle .staff-presence-dot {
  background: var(--text-faint);
}
.staff-presence-when {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-faint);
}
.staff-log-empty {
  color: var(--text-dim);
  font-size: 0.88rem;
}
.staff-log-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.staff-log-item {
  padding: 0.75rem 0.85rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.staff-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.staff-log-action {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.staff-log-time {
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}
.staff-log-summary {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.staff-log-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.staff-log-link:hover {
  color: #fff;
}
.staff-log-quote {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.75rem;
  border-left: 3px solid var(--border-strong);
  background: var(--bg-1);
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-dim);
}

.changelog-compose + .changelog-feed {
  margin-top: 1.25rem;
}
.changelog-view-only-note {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}
.changelog-empty {
  color: var(--text-dim);
  font-size: 0.9rem;
}
.changelog-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.changelog-item {
  padding: 1rem 1.1rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.changelog-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.changelog-item-meta {
  flex: 1;
  min-width: 0;
}
.changelog-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}
.changelog-item-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
}
.changelog-item-by {
  font-size: 0.78rem;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  line-height: 1.4;
}
.changelog-item-author {
  font-weight: 500;
  color: var(--text-dim);
}
.changelog-item-role,
.changelog-item-time {
  color: var(--text-faint);
  font-size: 0.75rem;
}
.changelog-item-role::before,
.changelog-item-time::before {
  content: '·';
  margin: 0 0.4rem;
  opacity: 0.55;
}
.changelog-item-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  color: var(--text);
  font-size: 0.9rem;
}
.changelog-item-actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.35rem;
  align-items: flex-start;
}
.changelog-item-actions .changelog-delete-btn,
.changelog-item-actions .changelog-edit-btn {
  font-size: 0.75rem;
}
.changelog-delete-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--danger);
}
.changelog-item-editing {
  border-color: var(--border-strong);
}
.changelog-item-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.changelog-item-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.changelog-form textarea {
  min-height: 8rem;
  resize: vertical;
}
.changelog-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.changelog-tag-btn {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.changelog-tag-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.changelog-tag-btn.active {
  color: #fff;
  border-color: transparent;
}
.changelog-tag-btn[data-tag="update"].active {
  background: #3b82f6;
}
.changelog-tag-btn[data-tag="fix"].active {
  background: var(--resolved);
}
.changelog-tag-btn[data-tag="removed"].active {
  background: var(--declined);
}
.changelog-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.changelog-tag-update {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
}
.changelog-tag-fix {
  background: rgba(34, 197, 94, 0.12);
  color: var(--resolved);
  border-color: rgba(34, 197, 94, 0.28);
}
.changelog-tag-removed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--declined);
  border-color: rgba(239, 68, 68, 0.28);
}

/* Infrastructure / founder credentials */
.infra-card {
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem;
}
.infra-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.infra-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.infra-card-sub {
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 36rem;
}
.infra-summary-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}
.infra-summary-list strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 0.35rem;
}
.infra-summary-empty {
  color: var(--text-faint);
  font-size: 0.88rem;
}
.modal.infra-modal {
  max-width: 640px;
  max-height: min(90vh, 52rem);
  overflow-y: auto;
}
.infra-modal-lead {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: -0.25rem 0 1rem;
}
.infra-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.65rem;
  background: var(--bg-elev);
  overflow: hidden;
}
.infra-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.infra-section-summary::-webkit-details-marker {
  display: none;
}
.infra-section-summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-top: -0.15rem;
  opacity: 0.55;
  transition: transform var(--t-fast), margin var(--t-fast);
}
.infra-section[open] > .infra-section-summary {
  color: var(--text);
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
}
.infra-section[open] > .infra-section-summary::after {
  transform: rotate(45deg);
  margin-top: 0.1rem;
}
.infra-section-summary:hover {
  color: var(--text);
  background: var(--bg-elev-2);
}
.infra-section-body {
  padding: 0.85rem 0.95rem 0.35rem;
}
.infra-section:not([open]) .infra-section-body {
  display: none;
}
.secret-field {
  position: relative;
  display: flex;
  align-items: stretch;
}
.secret-field input {
  flex: 1;
  padding-right: 2.75rem;
}
.secret-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.secret-toggle:hover,
.secret-toggle.is-visible {
  color: var(--text);
  background: var(--bg-elev-3);
}

/* Project detail tabs */
.project-detail-header {
  margin-bottom: 1rem;
}
.project-detail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.project-detail-desc {
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0.35rem 0 0.75rem;
  max-width: 42rem;
}
.project-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.project-danger-zone {
  border-color: rgba(239, 68, 68, 0.22);
}
/* Access tab — structured credential vault */
.access-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.access-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(129, 140, 248, 0.08) 0%, transparent 55%),
    linear-gradient(225deg, rgba(167, 139, 250, 0.06) 0%, transparent 50%),
    var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.access-hero-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.access-hero-lead {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 32rem;
}
.access-hero-lead strong {
  color: var(--text);
  font-weight: 600;
}
.access-hero-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.access-stat-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.access-stat-pill strong {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.access-secure-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--resolved);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.22);
}
.access-secure-pill svg {
  flex-shrink: 0;
  opacity: 0.9;
}
.access-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.access-mode-switch {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.access-mode-btn {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: calc(var(--radius-sm) - 1px);
  background: transparent;
  color: var(--text-faint);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.access-mode-btn:hover {
  color: var(--text);
}
.access-mode-btn.active {
  color: var(--text);
  background: var(--bg-elev-3);
  box-shadow: var(--shadow-sm);
}
.access-panel {
  animation: accessPanelIn 0.22s var(--ease);
}
@keyframes accessPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 900px) {
  .access-grid { grid-template-columns: 1fr; }
}
.access-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t);
}
.access-card--wide {
  grid-column: 1 / -1;
}
.access-card--filled {
  border-color: rgba(129, 140, 248, 0.22);
}
.access-card--filled .access-card-icon {
  color: var(--accent);
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.2);
}
.access-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elev-2);
}
.access-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
}
.access-card-head-text {
  flex: 1;
  min-width: 0;
}
.access-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}
.access-card-desc {
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.35;
}
.access-card-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  color: var(--text-faint);
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
}
.access-card-badge--on {
  color: var(--resolved);
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
}
.access-card-body {
  padding: 0.85rem 1rem 1rem;
  flex: 1;
}
.access-card-empty-msg {
  font-size: 0.84rem;
  color: var(--text-faint);
  line-height: 1.45;
  font-style: italic;
}
.access-kv-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.access-kv {
  display: grid;
  grid-template-columns: minmax(6.5rem, 38%) 1fr;
  gap: 0.5rem 0.75rem;
  align-items: start;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.access-kv:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.access-kv--wide {
  grid-template-columns: 1fr;
  gap: 0.25rem;
}
.access-kv-label {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  padding-top: 0.15rem;
}
.access-kv-value {
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: break-word;
}
.access-kv-text--mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.84rem;
  color: var(--text);
}
.access-kv-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.access-kv-link:hover {
  color: #c4b5fd;
}
.access-kv-empty {
  color: var(--text-faint);
}
.access-kv-secret-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.access-kv-secret {
  font-family: ui-monospace, monospace;
  font-size: 0.84rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--bg-elev-3);
  border: 1px solid var(--border);
}
.infra-secret-masked {
  letter-spacing: 0.12em;
}
.access-kv-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.access-kv-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-elev-3);
}
.access-notes-block {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
}
/* Edit mode */
.access-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.access-edit-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}
.access-edit-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.access-edit-card-fields {
  padding: 1rem;
}
.access-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.85rem;
}
.access-field-grid .field--full {
  grid-column: 1 / -1;
}
.access-field-grid .field--narrow {
  max-width: 8rem;
}
@media (max-width: 640px) {
  .access-field-grid { grid-template-columns: 1fr; }
  .access-field-grid .field--narrow { max-width: none; }
}
.access-form-footer {
  margin-top: 0.35rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.access-form-hint {
  font-size: 0.8rem;
  color: var(--text-faint);
  line-height: 1.45;
  margin-bottom: 0.85rem;
}
.access-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}
.access-form-footer .error-text {
  margin-top: 0.65rem;
}
.vault-locked-card {
  text-align: center;
  padding: 2rem 1.5rem;
}
.vault-locked-card .card-section-title {
  margin-bottom: 0.5rem;
}
.vault-locked-card .infra-card-sub {
  margin-bottom: 1.25rem;
}
.vault-unlock-modal {
  max-width: 26rem;
}