@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

:root {
  --font-sans: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lux-ink: #141125;
  --lux-ink-2: #282342;
  --lux-muted: #7a7891;
  --lux-bg: #eef1f8;
  --lux-bg-2: #f8f7fb;
  --lux-card: rgba(255, 255, 255, 0.88);
  --lux-card-solid: #ffffff;
  --lux-line: rgba(33, 28, 57, 0.1);
  --lux-line-strong: rgba(33, 28, 57, 0.18);
  --lux-purple: #7657f5;
  --lux-purple-dark: #4f3cc4;
  --lux-green: #72d56b;
  --lux-shadow: 0 24px 70px rgba(31, 28, 58, 0.14);
  --lux-shadow-soft: 0 14px 34px rgba(31, 28, 58, 0.1);
  --lux-inner: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --radius-panel: 24px;
  --radius-control: 14px;
  --text: var(--lux-ink);
  --text-strong: #0f0c20;
  --text-soft: var(--lux-muted);
  --hairline: var(--lux-line);
  --hairline-strong: var(--lux-line-strong);
  --surface: var(--lux-card);
  --surface-solid: var(--lux-card-solid);
  --shadow-panel: var(--lux-shadow);
  --shadow-card: var(--lux-shadow-soft);
}

body:has(#j1Tab.active) {
  --accent: #2c8ed6;
  --accent-dark: #11659f;
  --accent-soft: #e7f4ff;
  --accent-surface: rgba(44, 142, 214, 0.12);
  --workspace-tint: #eaf5ff;
}

body:has(#j2Tab.active) {
  --accent: #8e332c;
  --accent-dark: #611e18;
  --accent-soft: #fdecea;
  --accent-surface: rgba(142, 51, 44, 0.12);
  --workspace-tint: #fbefec;
}

html {
  background: #dfe4ee;
  font-size: 16px;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--lux-ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(118, 87, 245, 0.16), transparent 28rem),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32rem),
    linear-gradient(135deg, #eef2fb 0%, var(--workspace-tint) 45%, #f8f7fb 100%);
  font-weight: 600;
}

button,
input,
select,
textarea {
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
}

button {
  min-height: 42px;
  border-color: var(--lux-line);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,247,253,0.96));
  color: var(--lux-ink-2);
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: var(--lux-inner), 0 8px 18px rgba(31, 28, 58, 0.05);
}

button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--lux-purple) 40%, var(--lux-line));
  box-shadow: var(--lux-inner), 0 14px 28px rgba(31, 28, 58, 0.12);
}

.primary {
  border: 0;
  background: linear-gradient(135deg, var(--lux-purple), color-mix(in srgb, var(--accent) 72%, var(--lux-purple-dark)));
  color: #fff;
  box-shadow: 0 18px 30px rgba(118, 87, 245, 0.26);
}

.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #866bff, var(--lux-purple-dark));
}

.app-shell {
  grid-template-columns: 238px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  gap: 20px;
  padding: 28px 20px;
  border-right: 0;
  background:
    radial-gradient(circle at 30% 10%, rgba(118, 87, 245, 0.38), transparent 13rem),
    linear-gradient(180deg, #19142d 0%, #100d20 55%, #0b0917 100%);
  color: #f8f7ff;
  box-shadow: 16px 0 46px rgba(16, 13, 32, 0.22);
}

.sidebar .eyebrow {
  color: rgba(248, 247, 255, 0.62);
}

.sidebar h1 {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1.1;
}

.eyebrow {
  color: color-mix(in srgb, var(--accent) 42%, var(--lux-muted));
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.privacy-toggle {
  min-height: 46px;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.privacy-toggle:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.13);
}

.job-switch {
  gap: 12px;
}

.job-switch button {
  min-height: 112px;
  border-color: rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.job-switch button.active {
  border-color: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,0.28));
  background: rgba(255,255,255,0.96);
  color: var(--accent-dark);
  box-shadow: 0 20px 40px rgba(0,0,0,0.22), 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.brand-mark {
  height: 56px;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 20px rgba(0,0,0,0.16);
}

.nav-stack {
  gap: 8px;
  padding-top: 6px;
}

.nav-item {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-size: 0.94rem;
  font-weight: 800;
}

.nav-item:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: #fff;
  box-shadow: none;
}

.nav-item.active {
  border: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(244,242,255,0.96));
  color: var(--accent-dark);
  box-shadow: 0 14px 30px rgba(0,0,0,0.2);
}

.guardrail {
  display: none !important;
}

.workspace {
  min-height: 100vh;
}

.topbar {
  min-height: 132px;
  padding: 34px 42px 30px;
  border-bottom: 1px solid rgba(33, 28, 57, 0.08);
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(20px);
}

.topbar h2 {
  color: var(--lux-ink);
  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.status {
  border: 0;
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  color: var(--accent-dark);
  box-shadow: 0 12px 28px rgba(31, 28, 58, 0.08);
  font-size: 0.86rem;
  font-weight: 800;
}

.ai-status {
  color: rgba(40, 35, 66, 0.66);
  font-size: 0.8rem;
  font-weight: 700;
}

.logout-button {
  min-height: 34px;
  border-radius: 12px;
  background: #fff;
  font-size: 0.78rem;
}

.view {
  padding: 30px 42px 42px;
}

.panel {
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: var(--radius-panel);
  background: var(--lux-card);
  box-shadow: var(--lux-shadow);
  backdrop-filter: blur(22px);
}

.panel-head {
  margin-bottom: 20px;
}

.panel-head h3 {
  color: var(--lux-ink);
  font-size: 1.08rem;
  font-weight: 900;
}

.panel-subtitle,
.small,
.empty {
  color: var(--lux-muted);
  font-size: 0.84rem;
}

label {
  color: rgba(40, 35, 66, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
}

input,
select,
textarea {
  min-height: 44px;
  border: 1px solid rgba(33, 28, 57, 0.11);
  background: rgba(255,255,255,0.84);
  color: var(--lux-ink);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

textarea {
  line-height: 1.55;
}

input::placeholder,
textarea::placeholder {
  color: rgba(40, 35, 66, 0.48);
}

.command-grid {
  grid-template-columns: minmax(330px, 0.78fr) minmax(500px, 1.12fr) minmax(340px, 0.78fr);
  gap: 24px;
  align-items: start;
}

#taskForm {
  position: sticky;
  top: 24px;
}

#taskForm,
#taskList,
#recurringForm,
.ai-brief-card,
.ai-daily-brief,
.today-focus-card {
  border-radius: 28px;
}

.task-card,
.draft-card,
.recurring-card,
.meeting-card,
.conflict-card,
.availability-card,
.import-note {
  border: 1px solid rgba(33, 28, 57, 0.09);
  border-radius: 18px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 8px 22px rgba(31, 28, 58, 0.06);
}

.task-card:hover,
.task-card:focus-within,
.task-card.is-selected {
  border-color: color-mix(in srgb, var(--lux-purple) 36%, rgba(33, 28, 57, 0.1));
  background: linear-gradient(180deg, #fff, #f8f6ff);
  box-shadow: inset 5px 0 0 var(--lux-purple), 0 18px 38px rgba(31, 28, 58, 0.13);
}

#taskList .task-card > strong {
  color: var(--lux-ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.35;
}

.task-meta-chip,
.badge {
  border: 0;
  background: rgba(118, 87, 245, 0.08);
  color: #4e4775;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: none;
}

.badge.warn,
#conflictCount,
.conflict-summary-card,
.task-meta-chip.due-overdue,
.task-meta-chip.priority-high,
.task-meta-chip.priority-urgent {
  background: #fff0ec;
  color: #9d2b1e;
}

.task-actions button,
.meeting-actions button,
.conflict-actions button {
  min-height: 36px;
  padding-inline: 14px;
  font-size: 0.86rem;
}

.ai-daily-brief,
.ai-brief-card,
.today-focus-card,
#aiDailyBrief,
#todayFocus {
  line-height: 1.65;
  font-size: 0.98rem;
}

.calendar-layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
}

.calendar-board-panel {
  overflow: hidden;
}

.week-calendar,
.month-calendar {
  min-height: 760px;
  border: 1px solid rgba(33, 28, 57, 0.08);
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.week-time-axis,
.week-day {
  grid-template-rows: 56px minmax(704px, 1fr);
}

.week-day-body {
  min-height: 704px;
}

.week-day-head,
.month-head span {
  background: rgba(248,248,252,0.92);
  color: rgba(40, 35, 66, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
}

.week-day-head span {
  margin-top: 3px;
  color: rgba(40, 35, 66, 0.55);
  font-size: 0.72rem;
}

.week-hour-line {
  background: rgba(33, 28, 57, 0.17);
}

.week-time-label {
  right: 11px;
  color: rgba(40, 35, 66, 0.7);
  font-size: 0.82rem;
  font-weight: 900;
}

.week-event,
.month-event {
  border-radius: 11px;
  box-shadow: 0 10px 20px rgba(31, 28, 58, 0.11);
}

.week-event {
  min-height: 28px;
  padding: 5px 24px 5px 9px;
}

.week-event strong {
  font-size: 0.76rem;
  line-height: 1.18;
  font-weight: 900;
}

.week-event span {
  font-size: 0.72rem;
  line-height: 1.18;
  font-weight: 900;
}

.week-event.compact strong {
  display: inline;
}

.week-event.compact span {
  font-size: 0.7rem;
}

.week-event.j1,
.month-event.j1 {
  border-color: rgba(44, 142, 214, 0.32);
  background: linear-gradient(180deg, #eef8ff, #e2f1fc);
  color: #064c78;
}

.week-event.j2,
.month-event.j2 {
  border-color: rgba(142, 51, 44, 0.32);
  background: linear-gradient(180deg, #fff3f1, #fce7e4);
  color: #671e18;
}

.week-event-delete {
  width: 20px;
  height: 20px;
  min-height: 20px;
  border-radius: 8px;
  background: rgba(255,255,255,0.78);
  font-size: 0.9rem;
}

.calendar-toolbar,
.calendar-nav {
  gap: 9px;
}

.calendar-segment {
  padding: 4px;
  border: 0;
  border-radius: 15px;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 18px rgba(31,28,58,0.05);
}

.calendar-segment button,
.calendar-nav button {
  min-height: 34px;
  border-radius: 12px;
  font-size: 0.82rem;
}

.calendar-segment button.active {
  background: linear-gradient(135deg, #fff, #f1edff);
  color: var(--lux-purple-dark);
  box-shadow: 0 9px 18px rgba(118, 87, 245, 0.14);
}

.calendar-nav input {
  min-height: 36px;
  font-size: 0.84rem;
}

.calendar-range {
  color: rgba(40, 35, 66, 0.72);
  font-size: 0.84rem;
  font-weight: 900;
}

.calendar-import-panel,
.calendar-conflicts-panel,
.calendar-availability-panel,
.meeting-editor {
  box-shadow: 0 18px 46px rgba(31, 28, 58, 0.12);
}

.calendar-paste-zone,
.empty {
  border-color: rgba(33, 28, 57, 0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.58);
}

.conflict-card {
  border-color: rgba(200, 68, 49, 0.24);
  background: linear-gradient(180deg, #fff6f2, rgba(255,255,255,0.9));
  color: #8f2a1d;
}

.conflict-card.monitorable,
.conflict-card[data-severity="monitorable"] {
  border-color: rgba(196, 137, 40, 0.28);
  background: linear-gradient(180deg, #fff9eb, rgba(255,255,255,0.92));
  color: #744900;
}

.availability-card,
.availability-now-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,255,248,0.82));
}

.availability-chip,
.availability-time-chip {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 900;
}

.calendar-text-import,
.calendar-paste-zone {
  border-color: rgba(33, 28, 57, 0.12);
}

.memory-grid {
  gap: 20px;
}

.section-label {
  border-color: rgba(33, 28, 57, 0.1);
}

@media (min-width: 1280px) {
  .view {
    padding-right: 48px;
  }

  .calendar-board-panel .week-calendar {
    min-height: 780px;
  }
}

@media (max-width: 1100px) {
  .command-grid,
  .calendar-layout,
  .calendar-layout:has(.meeting-editor.collapsed) {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }

  .calendar-board-panel,
  .meeting-editor,
  .calendar-import-panel,
  .calendar-list-panel,
  .calendar-conflicts-panel,
  .calendar-availability-panel {
    grid-area: auto;
  }

  #taskForm {
    position: static;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 18px;
  }

  .topbar,
  .view {
    padding-left: 18px;
    padding-right: 18px;
  }

  .topbar {
    min-height: auto;
  }

  .panel {
    border-radius: 20px;
    padding: 17px;
  }

  .week-calendar {
    min-height: 650px;
  }
}