:root{
  --bg:#0c1117;
  --surface:#141b24;
  --surface-2:#1a222d;
  --border: rgba(255,255,255,0.09);
  --text:#eef2f6;
  --text-dim: rgba(238,242,246,0.66);
  --text-faint: rgba(238,242,246,0.42);
  --accent:#4f8cff;
  --accent-2:#7db0ff;
  --danger:#ff6b6b;
  --success:#3ecf6e;
  --manager:#f2b84b;
  --radius:14px;
  --font:'Sora', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Personal light theme, applied via data-theme on <html> once a user's
   saved preference loads. Accent colors stay user-customizable regardless
   of light/dark and are set inline by JS, not overridden here. */
:root[data-theme="light"]{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#f0f2f6;
  --border: rgba(10,20,35,0.10);
  --text:#12181f;
  --text-dim: rgba(18,24,31,0.66);
  --text-faint: rgba(18,24,31,0.42);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent-2); }

/* ---------- Centered auth shell (gate + login) ---------- */
.auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:40px 32px;
  text-align:center;
}
.auth-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:0.06em;
  margin:0;
}
.auth-subtitle{
  margin:6px 0 32px;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.03em;
  color:var(--text-faint);
}
.auth-heading{
  font-size:16px;
  font-weight:600;
  margin:0 0 20px;
  color:var(--text-dim);
}

.field{
  text-align:left;
  margin-bottom:16px;
}
.field label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--text-faint);
  margin-bottom:6px;
  letter-spacing:0.02em;
}
.field input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  outline:none;
  transition:border-color .15s ease;
}
.field input:focus{ border-color:var(--accent); }

.btn{
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#08111f;
  font-family:var(--font);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, opacity .15s ease;
}
.btn:hover{ background:var(--accent-2); }
.btn:disabled{ opacity:0.6; cursor:default; }
.btn-secondary{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.btn-secondary:hover{ background:var(--surface-2); }
.btn-danger{ background:var(--danger); color:#2a0a0a; }
.btn-danger:hover{ background:#ff8686; }

.form-error{
  min-height:18px;
  margin:-4px 0 16px;
  font-size:13px;
  color:var(--danger);
  text-align:left;
}
.form-note{
  margin-top:20px;
  font-size:12px;
  color:var(--text-faint);
}

/* ---------- App shell (dashboard/admin) ---------- */
.app-header{
  position:sticky; top:0; z-index:10;
  background:rgba(12,17,23,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.app-header-inner{
  max-width:760px; margin:0 auto;
  padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px 16px;
}
.app-brand{ display:flex; flex-direction:column; line-height:1.2; }
.app-brand strong{ font-size:15px; font-weight:800; letter-spacing:0.05em; }
.app-brand span{ font-size:11px; color:var(--text-faint); }

.app-user{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; row-gap:8px; }
.role-badge{
  font-size:11px; font-weight:700; letter-spacing:0.03em;
  padding:3px 9px; border-radius:999px;
  border:1px solid var(--border);
  color:var(--text-dim);
  white-space:nowrap;
}
.role-badge.manager{ color:var(--manager); border-color:rgba(242,184,75,0.4); }
.app-user-name{ font-size:13px; font-weight:600; white-space:nowrap; }
.link-btn{
  background:none; border:none; color:var(--text-faint);
  font-family:var(--font); font-size:13px; cursor:pointer; padding:0;
  white-space:nowrap;
}
.link-btn:hover{ color:var(--text); }

@media (max-width: 520px){
  .app-header-inner{ flex-direction:column; align-items:flex-start; }
  .app-user{ width:100%; justify-content:space-between; }
}

/* ---------- Avatars ----------
   Each avatar carries its owner's own accent color via an inline
   --owner-accent custom property (set in avatarHtml()), falling back to
   the viewer's --accent only when no profile/color is available. This is
   deliberate: a person's chosen color should show the same way to everyone
   looking at it, not change based on who's viewing. */
.avatar-ring{
  display:inline-flex; flex-shrink:0; align-items:center; justify-content:center;
  padding:3px; border-radius:50%;
  background:var(--owner-accent, var(--accent));
}
.avatar-ring-solid{ background:var(--owner-accent, var(--accent)); }
.avatar-ring-gradient{ background:linear-gradient(135deg, var(--owner-accent, var(--accent)), var(--accent-2)); }
.avatar-ring-glow{ background:var(--owner-accent, var(--accent)); box-shadow:0 0 10px var(--owner-accent, var(--accent)); }
.avatar-ring-dashed{ background:none; border:2px dashed var(--owner-accent, var(--accent)); }
.avatar-ring-rainbow{ background:conic-gradient(#ff5d6c,#f2b84b,#3ecf6e,#4f8cff,#a26bff,#ff5d6c); }
.avatar{
  width:100%; height:100%; border-radius:50%;
  background:var(--surface-2); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; font-weight:700; font-family:var(--font);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-inline{ display:inline-flex; vertical-align:middle; margin-right:6px; }

.border-options{ display:flex; gap:16px; flex-wrap:wrap; }
.border-option{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer; font-family:var(--font); padding:4px;
}
.border-option-swatch{ width:44px; height:44px; }
.border-option .label{ font-size:11px; color:var(--text-faint); }
.border-option.active .label{ color:var(--accent); font-weight:700; }
.border-option.active .border-option-swatch{ outline:2px solid var(--accent); outline-offset:3px; border-radius:50%; }

.accent-swatches{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.accent-swatch{
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  border:2px solid transparent;
}
.accent-swatch.active{ border-color:var(--text); }

.app-main{
  max-width:760px; margin:0 auto;
  padding:28px 24px 80px;
}

.section-title{
  font-size:13px; font-weight:700; letter-spacing:0.06em;
  color:var(--text-faint); text-transform:uppercase;
  margin:0 0 14px;
}

.composer{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  margin-bottom:32px;
}
.composer textarea{
  width:100%; min-height:76px; resize:vertical;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  outline:none;
  margin-bottom:12px;
}
.composer textarea:focus{ border-color:var(--accent); }
.composer-row{ display:flex; justify-content:flex-end; gap:10px; }
.composer-row .btn{ width:auto; padding:10px 20px; }

.message-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.message-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
}
.message-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; margin-bottom:8px;
}
.message-meta{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px 10px; font-size:12px; color:var(--text-faint);
}
.message-author{ font-weight:700; color:var(--text-dim); white-space:nowrap; }
.message-text{
  font-size:15px; line-height:1.55; white-space:pre-wrap; margin:0;
}
.message-delete{
  flex-shrink:0;
  background:none; border:none; color:var(--text-faint);
  cursor:pointer; font-size:12px; white-space:nowrap;
}
.message-delete:hover{ color:var(--danger); }
.expiry-tag{ color:var(--text-faint); white-space:nowrap; }

/* ---------- Expiry controls ---------- */
.expiry-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.expiry-label{ font-size:13px; color:var(--text-faint); }
.toggle-group{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.toggle-btn{
  background:var(--surface-2); border:none; color:var(--text-dim);
  font-family:var(--font); font-size:13px; font-weight:600;
  padding:8px 14px; cursor:pointer;
}
.toggle-btn + .toggle-btn{ border-left:1px solid var(--border); }
.toggle-btn.active{ background:var(--accent); color:#08111f; }
.expiry-datetime{
  padding:8px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--font); font-size:13px;
}

/* ---------- Question of the Day ---------- */
.qotd-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:32px;
}
.qotd-question{ font-size:17px; font-weight:700; margin:0 0 16px; }
.qotd-answer-row{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.qotd-answer-row input{
  flex:1; min-width:160px; padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--font); font-size:14px;
}
.qotd-answer-row .btn{ width:auto; }
.qotd-poll-options{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.poll-option{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--font); font-size:14px;
  cursor:pointer; text-align:left;
}
.poll-option:hover{ border-color:var(--accent); }
.poll-option.selected{ border-color:var(--accent); background:rgba(79,140,255,0.12); }
.poll-count{ font-weight:700; color:var(--text-faint); }
.qotd-responses{
  border-top:1px solid var(--border); padding-top:12px;
  display:flex; flex-direction:column; gap:8px;
}
.qotd-response-row{ display:flex; gap:6px 10px; font-size:13px; color:var(--text-dim); flex-wrap:wrap; }
.qotd-response-row .message-author{ min-width:120px; }
.qotd-option-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.qotd-option-row input{
  flex:1; min-width:140px; padding:10px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--font); font-size:14px;
}

.answer-type-cards{ display:flex; gap:10px; flex-wrap:wrap; }
.answer-type-card{
  flex:1 1 160px;
  display:flex; flex-direction:column; gap:4px;
  text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); font-family:var(--font);
}
.answer-type-card:hover{ border-color:var(--accent); }
.answer-type-card.active{ border-color:var(--accent); background:rgba(79,140,255,0.12); }
.answer-type-card strong{ font-size:14px; color:var(--text); }
.answer-type-card span{ font-size:12px; color:var(--text-faint); }

.empty-state{
  text-align:center; padding:48px 24px;
  color:var(--text-faint); font-size:14px;
}

.table-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:var(--radius);
}
.admin-table{
  width:100%; min-width:480px; border-collapse:collapse;
  background:var(--surface);
}
.admin-table th, .admin-table td{
  text-align:left; padding:12px 16px; font-size:13px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.admin-table th{ color:var(--text-faint); font-weight:600; }
.admin-table tr:last-child td{ border-bottom:none; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--surface-2); border:1px solid var(--border);
  padding:10px 18px; border-radius:10px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.toast.show{ opacity:1; }

/* ---------- Tonight's Mailbox ---------- */
.mailbox-row{ display:flex; gap:10px; flex-wrap:wrap; }
.mailbox-row input{
  flex:1; min-width:200px; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-family:var(--font); font-size:14px;
}
.mailbox-card{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:32px;
}
.mailbox-label{
  font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--text-faint);
}
.mailbox-value{ font-size:16px; font-weight:600; color:var(--text); }

/* ---------- Task List ---------- */
.task-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.task-row{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px;
}
.task-row.highlighted{ border-color:var(--success); background:rgba(62,207,110,0.08); }
.task-row-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.task-name{ font-size:14px; font-weight:700; color:var(--text); }
.task-remove{ font-size:12px; }
.task-remove:hover{ color:var(--danger); }
.task-assignees{ display:flex; flex-wrap:wrap; gap:6px; }
.assignee-bubble{
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
}
.assignee-bubble.everyone{ color:var(--manager); border-color:rgba(242,184,75,0.4); }
.assignee-bubble.empty{ color:var(--text-faint); font-weight:400; }
.task-assign-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
}
.assign-chip{
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-faint);
  cursor:pointer; font-family:var(--font);
}
.assign-chip:hover{ border-color:var(--accent); }
.assign-chip.active{ background:var(--accent); border-color:var(--accent); color:#08111f; }