:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8eef0;
  background: #10171d;
  font-synthesis: none;
  --bg: #10171d;
  --surface: #192026;
  --surface-light: #222c33;
  --teal: #0a7879;
  --teal-bright: #0fa07b;
  --muted: #8d9ba1;
  --border: rgba(255, 255, 255, .08);
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: 20px; background: radial-gradient(circle at 50% 0, #19353a 0, var(--bg) 42%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.auth-screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 0, #19353a 0, #10171d 55%); }
.auth-card { width: min(100%, 470px); padding: 32px; border: 1px solid var(--border); border-radius: 20px; background: #151e24; box-shadow: 0 28px 80px #0009; }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 34px; letter-spacing: .18em; }
.auth-brand .brand-mark { flex: 0 0 auto; }
.auth-heading h1 { margin: 8px 0 8px; font-size: 1.55rem; font-weight: 500; }
.auth-heading > p:last-child { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.auth-tabs { display: flex; gap: 6px; margin: 25px 0 18px; padding: 4px; border-radius: 9px; background: #10171d; }
.auth-tab { flex: 1; padding: 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .8rem; }
.auth-tab.active { color: #dff9f1; background: #0fa07b24; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 7px; color: #aebcc0; font-size: .72rem; }
.auth-form input { padding: 12px; border: 1px solid var(--border); border-radius: 9px; outline: 0; color: #e8eef0; background: #10171d; font-size: .82rem; }
.auth-form input:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 3px #0fa07b1c; }
.auth-form input.field-error { border-color: #ef8585; box-shadow: 0 0 0 3px rgba(239, 133, 133, 0.12); }
.form-feedback { min-height: 16px; margin: 0; color: #ef8585; font-size: .72rem; }
.form-feedback.error { color: #ef8585; }
.primary-action { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 4px; padding: 12px 14px; border: 0; border-radius: 9px; color: #06221d; background: var(--teal-bright); font-weight: 600; font-size: .8rem; }
.primary-action:hover { background: #25c394; }
.primary-action:disabled { cursor: wait; opacity: .65; }
.form-feedback { min-height: 16px; margin: 0; color: #ef8585; font-size: .72rem; }
.onboarding-progress { margin-bottom: 25px; color: var(--muted); font-size: .65rem; letter-spacing: .1em; }
.onboarding-progress > div { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: #26343a; }
.onboarding-progress i { display: block; width: 33%; height: 100%; border-radius: 3px; background: var(--teal-bright); transition: width .25s ease; }
.onboarding .auth-heading { margin-bottom: 22px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 22px; }
.choice-grid button { min-height: 55px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; color: #b8c6c9; background: #10171d; text-align: left; font-size: .78rem; }
.choice-grid button:hover, .choice-grid button.selected { border-color: var(--teal-bright); color: #dcfff4; background: #0fa07b1c; }
.single-choice { grid-template-columns: 1fr; }
.app { width: min(1500px, 100%); min-height: calc(100vh - 40px); margin: auto; display: grid; grid-template-columns: 245px minmax(420px, 1fr) 285px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 28px 80px #0008; }

.sidebar, .info-panel { background: #151d23; }
.sidebar { display: flex; flex-direction: column; padding: 26px 17px 18px; border-right: 1px solid var(--border); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 31px; }
.brand-mark, .profile-avatar, .avatar { display: grid; place-items: center; border-radius: 12px; }
.brand-mark { width: 38px; height: 38px; color: #081817; background: linear-gradient(135deg, #27c79b, #087c83); font-size: 21px; }
.sidebar-brand strong { display: block; letter-spacing: .18em; font-size: 1rem; }
.sidebar-brand span, .profile small { display: block; color: var(--muted); font-size: .7rem; }
.sidebar-brand i, .panel-heading > i, .system-status .operational i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 9px var(--teal-bright); }
.main-nav { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; text-align: left; }
.nav-item:hover, .nav-item.active { color: #dff9f1; background: #0fa07b20; }
.nav-item.active { box-shadow: inset 3px 0 var(--teal-bright); }
.nav-item b { margin-left: auto; color: var(--teal-bright); font-size: .75rem; }
.recent-title { margin: 32px 10px 12px; color: #5f7078; font-size: .63rem; font-weight: 700; letter-spacing: .12em; }
.recent-list { display: grid; gap: 4px; }
.recent-item { display: flex; gap: 10px; width: 100%; padding: 11px 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; text-align: left; font-size: .8rem; }
.recent-item.active, .recent-item:hover { color: #dbe4e6; background: #ffffff08; }
.recent-item > span:first-child { color: var(--teal-bright); }
.recent-item small { display: block; margin-top: 3px; color: #5d6c73; font-size: .68rem; }
.profile { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--border); }
.profile-avatar { width: 32px; height: 32px; color: #c8fff1; background: #0a7879; }
.profile strong { display: block; font-size: .78rem; }
.profile button { margin-left: auto; border: 0; color: var(--muted); background: transparent; }

.main-panel { min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.chat-header { display: flex; justify-content: space-between; gap: 20px; padding: 27px 34px 23px; border-bottom: 1px solid var(--border); }
.eyebrow, .panel-heading { color: #718189; font-size: .64rem; font-weight: 700; letter-spacing: .14em; }
.chat-header h1 { margin: 8px 0 3px; font-size: 1.55rem; font-weight: 500; }
.chat-header h1 span { color: var(--teal-bright); }
.header-subtitle { margin: 0; color: var(--muted); font-size: .82rem; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.clear-chat, .tasks-toggle { border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: transparent; font-size: .74rem; }
.clear-chat { padding: 8px; border-color: transparent; }
.tasks-toggle { padding: 8px 10px; }
.tasks-toggle span { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 4px; border-radius: 50%; color: #09201d; background: var(--teal-bright); font-size: .68rem; }
.clock { color: #c8d2d4; font-size: .78rem; }

.chat { flex: 1; min-height: 280px; overflow-y: auto; padding: 32px 34px 12px; }
.message { display: flex; gap: 11px; margin-bottom: 20px; }
.message.user { justify-content: flex-end; }
.avatar { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 2px; color: #09201d; background: var(--teal-bright); }
.bubble { max-width: min(76%, 620px); padding: 13px 16px; border: 1px solid var(--border); border-radius: 5px 15px 15px 15px; color: #d7e0e2; background: var(--surface-light); line-height: 1.55; white-space: pre-line; font-size: .88rem; }
.user .bubble { border-color: #145668; border-radius: 15px 5px 15px 15px; color: #dff5f5; background: #123442; }
time { display: block; margin-top: 7px; color: #6d7c82; font-size: .65rem; }
.user time { color: #6fa6ad; }
.typing { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .8rem; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-bright); animation: pulse 1s infinite alternate; }
.typing span:nth-child(2) { animation-delay: .2s; }.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { opacity: .25; transform: translateY(-3px); } }

.suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 34px 15px; }
.suggestions button { padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: #ffffff04; font-size: .72rem; }
.suggestions button:hover, .quick-actions button:hover { color: #dff9f1; border-color: #0fa07b66; background: #0fa07b14; }
.composer { display: flex; align-items: center; gap: 8px; margin: 0 25px; padding: 7px 8px 7px 12px; border: 1px solid #ffffff14; border-radius: 12px; background: var(--surface); }
.composer input { flex: 1; min-width: 0; border: 0; outline: 0; color: #e8eef0; background: transparent; font-size: .85rem; }
.composer input::placeholder { color: #66767d; }
.attach, .mic { border: 0; color: var(--muted); background: transparent; font-size: 1.2rem; }
.send { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #06221d; background: var(--teal-bright); }
.send:hover { background: #24c294; }.disclaimer { margin: 10px 0 13px; color: #53636a; text-align: center; font-size: .62rem; }

.tasks-panel { display: none; padding: 18px 34px; border-bottom: 1px solid var(--border); background: #172127; }
.tasks-panel.open { display: block; }.tasks-heading { display: flex; justify-content: space-between; align-items: flex-start; }.tasks-heading h2 { margin: 0; font-size: .95rem; }.tasks-heading p { margin: 4px 0 12px; color: var(--muted); font-size: .75rem; }.close-tasks { border: 0; color: var(--muted); background: transparent; font-size: 1.3rem; }.task-form { display: flex; gap: 7px; }.task-form input, .task-form select { min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 8px; outline: 0; color: #dfe8e9; background: #10171d; font-size: .78rem; }.task-form input { flex: 1; }.task-form button { padding: 0 12px; border: 0; border-radius: 8px; color: #06221d; background: var(--teal-bright); font-size: .76rem; }.task-list { display: grid; gap: 6px; margin-top: 12px; }.task-item { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }.task-item.done .task-title { color: #64747a; text-decoration: line-through; }.task-title { flex: 1; font-size: .76rem; }.task-priority-label { color: var(--teal-bright); font-size: .65rem; }.task-item.high .task-priority-label { color: #eb7b7b; }.delete-task { border: 0; color: var(--muted); background: transparent; }.empty-tasks { color: var(--muted); font-size: .75rem; }

.info-panel { display: flex; flex-direction: column; gap: 14px; padding: 25px 17px; border-left: 1px solid var(--border); }
.info-card { padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: #19242a; }
.panel-heading { display: flex; justify-content: space-between; margin-bottom: 16px; }.panel-heading > i { margin: 0; }
.operational { display: flex; align-items: center; gap: 12px; }.progress-ring { width: 68px; height: 68px; display: grid; place-content: center; border: 5px solid var(--teal); border-right-color: var(--teal-bright); border-radius: 50%; text-align: center; }.progress-ring b { font-size: 1.05rem; }.progress-ring small { margin-top: -4px; color: var(--teal-bright); font-size: .6rem; }.operational strong { display: block; font-size: .83rem; font-weight: 500; }.operational span { display: block; margin-top: 7px; color: var(--teal-bright); font-size: .64rem; letter-spacing: .08em; }.system-status p { margin: 15px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.feature-list { display: grid; gap: 13px; padding: 0; margin: 0; list-style: none; color: #c2ced1; font-size: .74rem; }.feature-list b { display: inline-grid; width: 20px; color: var(--teal-bright); }
.quick-actions { display: grid; gap: 7px; }.quick-actions button { display: flex; align-items: center; gap: 9px; padding: 10px 8px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; text-align: left; }.quick-actions b { width: 24px; color: var(--teal-bright); text-align: center; }.quick-actions span { flex: 1; font-size: .74rem; }.quick-actions small { display: block; margin-top: 3px; color: #64747a; font-size: .62rem; }.quick-actions button > :last-child { color: #687980; }

.theme-toggle, .export-button { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: transparent; font-size: .74rem; }
.profile-avatar { cursor: pointer; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: #061015b8; }
.modal-card { width: min(100%, 430px); padding: 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 28px 80px #0009; }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.modal-heading h2 { margin: 6px 0 0; font-size: 1.2rem; font-weight: 500; }
.modal-close { border: 0; color: var(--muted); background: transparent; font-size: 1.4rem; }
.profile-form { display: grid; gap: 13px; }
.profile-form label { display: grid; gap: 7px; color: #aebcc0; font-size: .72rem; }
.profile-form input { padding: 11px; border: 1px solid var(--border); border-radius: 9px; outline: 0; color: #e8eef0; background: #10171d; font-size: .82rem; }
.profile-form input:focus { border-color: var(--teal-bright); box-shadow: 0 0 0 3px #0fa07b1c; }
.secondary-action { width: 100%; margin-top: 12px; padding: 10px; border: 1px solid #ef858555; border-radius: 9px; color: #ef8585; background: transparent; font-size: .75rem; }

:root[data-theme="light"] { --bg: #edf3f3; --surface: #ffffff; --surface-light: #f3f7f7; --muted: #5f7078; --border: rgba(13, 48, 54, .14); color: #163238; }
:root[data-theme="light"] body { background: radial-gradient(circle at 50% 0, #d5eeee 0, #edf3f3 48%); }
:root[data-theme="light"] .auth-screen { background: radial-gradient(circle at 50% 0, #d5eeee 0, #edf3f3 55%); }
:root[data-theme="light"] .auth-card, :root[data-theme="light"] .sidebar, :root[data-theme="light"] .info-panel { background: #ffffff; }
:root[data-theme="light"] .main-panel { background: var(--bg); }
:root[data-theme="light"] .auth-form input, :root[data-theme="light"] .profile-form input, :root[data-theme="light"] .task-form input, :root[data-theme="light"] .task-form select, :root[data-theme="light"] .choice-grid button { color: #163238; background: #f6fbfb; }
:root[data-theme="light"] .info-card { background: #f8fcfc; }
:root[data-theme="light"] .bubble { color: #29464b; background: #e5eeee; }
:root[data-theme="light"] .user .bubble { color: #dff5f5; background: #175366; }

@media (max-width: 1050px) { .app { grid-template-columns: 210px minmax(380px, 1fr); }.info-panel { display: none; } }
@media (max-width: 700px) { body { padding: 0; }.app { min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; }.sidebar { display: none; }.chat-header { padding: 22px 18px; }.header-actions { gap: 5px; }.clock { display: none; }.chat { padding: 22px 16px 10px; }.bubble { max-width: 86%; }.suggestions { padding: 10px 16px 14px; }.composer { margin: 0 12px; }.tasks-panel { padding: 16px; }.task-form { flex-wrap: wrap; }.task-form input { flex-basis: 100%; }.task-form select, .task-form button { flex: 1; min-height: 38px; } }