:root {
  --ink: #292737;
  --muted: #7c7889;
  --cream: #fffaf1;
  --white: #fff;
  --line: #e9e2dc;
  --plum: #5d4d88;
  --plum-dark: #493b6d;
  --orange: #ed875b;
  --yellow: #f1c65c;
  --mint: #bfe2d6;
  --green: #4f8f79;
  --pink: #f7d9dd;
  --lav: #f0eef9;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: var(--cream); }
body.modal-open { overflow: hidden; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { cursor: pointer; }
button { color: inherit; }
.site-header { padding: 22px clamp(18px, 5vw, 70px) 0; }
.header-inner, .main-nav, .main-content { max-width: 1240px; margin-left: auto; margin-right: auto; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.identity { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.identity strong { display: block; font-size: 16px; letter-spacing: 0; }
.identity small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.logo-mark { width: 38px; height: 38px; display: grid; place-items: center; padding-bottom: 8px; text-align: center; border-radius: 10px 10px 15px 15px; -webkit-clip-path: path("M 11 2 Q 7 2 7 6 L 7 17 Q 7 18 8 20 L 13 27 Q 19 36 25 27 L 30 20 Q 31 18 31 17 L 31 6 Q 31 2 27 2 Z"); clip-path: path("M 11 2 Q 7 2 7 6 L 7 17 Q 7 18 8 20 L 13 27 Q 19 36 25 27 L 30 20 Q 31 18 31 17 L 31 6 Q 31 2 27 2 Z"); color: white; background: var(--orange); font-weight: 900; transform: rotate(-8deg); }
.header-user { display: flex; align-items: center; gap: 10px; }
.header-search, .header-link { padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; color: var(--plum); background: var(--white); font-size: 11px; }
.header-user form { margin: 0; }
.header-link { border-color: transparent; background: transparent; }
.avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #705d43; background: #f3d7ad; font-size: 10px; font-weight: 800; }
.avatar-small { width: 31px; height: 31px; }
.avatar-date { color: var(--plum); background: var(--yellow); }
.main-nav { display: flex; align-items: center; gap: 4px; margin-top: 25px; border-bottom: 1px solid var(--line); }
.main-nav > a:not(.nav-action) { position: relative; padding: 12px 14px 14px; color: var(--muted); font-size: 12px; text-decoration: none; }
.main-nav > a:not(.nav-action):hover, .main-nav > a:not(.nav-action).active { color: var(--plum); }
.main-nav > a:not(.nav-action).active::after { content: ""; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); }
.nav-action { flex: 0 0 auto; min-height: 34px; margin: 0 0 4px auto; padding: 8px 12px; font-size: 10px; white-space: nowrap; }
.nav-dot { display: inline-grid; min-width: 16px; height: 16px; place-items: center; margin-left: 6px; padding: 0 4px; border-radius: 99px; color: white; background: var(--orange); font-size: 9px; }
.main-content { padding: 36px 0 70px; }
.search-page-form { display: flex; gap: 8px; max-width: 700px; margin-bottom: 28px; }
.search-page-form input { min-width: 0; flex: 1; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: white; font-size: 13px; }
.search-page-form input:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(93,77,136,.08); }
.search-empty { max-width: 700px; text-align: left; }
.search-empty p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.search-results { max-width: 820px; }
.search-results .section-title { margin-top: 0; }
.search-result { display: block; margin-bottom: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: white; text-decoration: none; }
.search-result:hover { border-color: var(--plum); background: var(--lav); }
.search-result-header { display: flex; justify-content: space-between; gap: 12px; }
.search-result-header strong { color: var(--plum); font-size: 11px; }
.search-result-header span { color: var(--muted); font-size: 10px; }
.search-result p { margin: 8px 0 0; color: #595363; font-size: 12px; line-height: 1.55; }
.date-note, .eyebrow { color: var(--plum); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 10px 15px; border: 0; border-radius: 10px; color: white; background: var(--plum); box-shadow: 0 9px 20px rgba(93, 77, 136, .18); font-size: 11px; text-decoration: none; }
.button:hover { background: var(--plum-dark); }
.button.orange { color: #633a2b; background: var(--yellow); box-shadow: none; }
.button.light { color: var(--plum); background: white; border: 1px solid var(--line); box-shadow: none; }
.button.danger { color: white; background: #9b5147; box-shadow: none; }
.button.danger:hover { background: #7f3f37; }
.flash { margin-bottom: 18px; padding: 12px 15px; border-radius: 10px; font-size: 12px; }
.flash.success { color: #356d5a; background: #e3f4ed; }
.flash.error { color: #8b483b; background: #fbe3df; }
.today-card, .calendar-card, .agenda-card, .task-card, .surface { border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.today-card { padding: 23px; }
.today-card h3, .agenda-card h3, .task-card h3 { margin: 0; font-size: 14px; letter-spacing: 0; }
.muted { color: var(--muted); font-size: 11px; }
.today-card > .muted { display: block; margin-top: 5px; }
.dashboard-widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.weather-card { grid-column: span 2; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.external-widget, .today-card { grid-column: span 1; }
.external-widget { min-width: 0; min-height: 220px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--lav); }
.external-widget-header { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.external-widget h2 { margin: 6px 0 0; font-size: 18px; line-height: 1.1; }
.external-sections { display: grid; gap: 13px; }
.external-section { padding-top: 12px; border-top: 1px solid #ded6ef; }
.external-section-label { color: var(--plum); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.external-loading, .external-empty, .external-error { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.external-error { color: #8b483b; }
.alert-item { display: block; width: 100%; margin-top: 8px; padding: 8px 9px; border: 0; border-radius: 9px; background: rgba(255,255,255,.7); text-align: left; cursor: pointer; }
.alert-item:hover, .alert-item:focus-visible { background: white; box-shadow: 0 0 0 2px #ded6ef; outline: none; }
.alert-item strong, .alert-item small { display: block; }
.alert-item strong { color: var(--ink); font-size: 11px; }
.alert-item small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.alert-modal-meta { margin: -12px 0 20px; color: var(--muted); font-size: 11px; }
.alert-modal-section { margin-top: 16px; }
.alert-modal-section strong { color: var(--plum); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.alert-modal-section p { margin: 7px 0 0; color: #595363; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.aqi-summary { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.aqi-value { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: white; background: var(--green); font-size: 16px; font-weight: 800; }
.aqi-value.moderate { color: #6e5b30; background: var(--yellow); }
.aqi-value.unhealthy { background: #e8795f; }
.aqi-value.very-unhealthy { background: #9b5147; }
.aqi-summary strong, .aqi-summary small { display: block; }
.aqi-summary strong { font-size: 11px; }
.aqi-summary small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.weather-header { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.weather-header h2 { margin: 6px 0 0; font-size: 18px; letter-spacing: 0; }
.weather-status { color: var(--muted); font-size: 10px; }
.forecast-container { display: grid; gap: 1px; }
.forecast-row { display: grid; grid-template-columns: 72px minmax(170px, 1fr) minmax(150px, .7fr); align-items: center; gap: 15px; min-height: 45px; padding: 8px 0; border-top: 1px solid var(--line); }
.forecast-day strong, .forecast-day small { display: block; }
.forecast-day strong { color: var(--ink); font-size: 11px; }
.forecast-day small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.temperature-container { min-width: 0; }
.temperature-track { position: relative; height: 7px; border-radius: 99px; background: linear-gradient(90deg, #b7d7ed, #f6d17e, #ed9b75); }
.temperature-bar { position: absolute; top: -4px; height: 15px; min-width: 18px; border: 2px solid var(--orange); border-radius: 99px; background: #fffaf1; }
.low-temp, .high-temp { position: absolute; top: 17px; color: var(--muted); font-size: 9px; line-height: 1; }
.low-temp { left: -2px; }
.high-temp { right: -2px; }
.forecast-summary { overflow: hidden; color: #6f697a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.weather-loading, .weather-error { padding: 18px 0 7px; color: var(--muted); font-size: 11px; }
.weather-error { color: #8b483b; }
.mini-event { display: flex; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.mini-event:last-child { border-bottom: 0; }
.event-time { width: 55px; color: var(--plum); font-size: 10px; font-weight: 800; }
.mini-event strong, .agenda-row strong { display: block; font-size: 12px; }
.mini-event small, .agenda-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 31px 0 13px; }
.section-title h3 { margin: 0; font-size: 15px; letter-spacing: 0; }
.section-title a { color: var(--plum); font-size: 11px; text-decoration: none; }
.command-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.command-card { min-height: 160px; padding: 20px; border-radius: 19px; text-decoration: none; }
.command-card h4 { margin: 0; font-size: 13px; }
.command-card p { margin: 8px 0 0; color: #6f697a; font-size: 11px; line-height: 1.5; }
.command-card .surface-head { padding: 0 0 12px; border-bottom-color: rgba(93, 77, 136, .18); }
.command-card .feed, .command-card .task-list { padding: 0; }
.command-card .feed-line, .command-card .task-row { border-bottom-color: rgba(93, 77, 136, .18); }
.command-card .feed-line { padding: 12px 0; }
.command-card .task-row { padding: 12px 0; }
.command-card .empty-copy { margin: 12px 0 0; }
.card-chat { background: var(--pink); }
.card-tasks { background: var(--mint); }
.card-note { background: #f9e9bd; }
.card-link { display: inline-block; margin-top: 16px; color: var(--plum); font-size: 11px; font-weight: 800; }
.surface { overflow: hidden; }
.surface-head { display: flex; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.surface-head strong { font-size: 12px; }
.surface-head span { color: var(--muted); font-size: 10px; }
.feed { padding: 4px 20px; }
.feed-line { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.feed-line:last-child { border-bottom: 0; }
.feed-line p { margin: 0; font-size: 11px; line-height: 1.5; }
.feed-line small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.empty-copy { color: var(--muted); font-size: 11px; }
body.chat-page { display: flex; height: 100vh; height: 100dvh; min-height: 0; flex-direction: column; overflow: hidden; }
body.chat-page .site-header { flex: 0 0 auto; }
body.chat-page .main-content { display: flex; width: min(100%, 1240px); min-height: 0; flex: 1 1 auto; flex-direction: column; padding: 18px 0; }
.chat-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-width: 0; min-height: 0; flex: 1 1 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: white; }
.channels { min-height: 0; overflow-y: auto; padding: 19px 12px; border-right: 1px solid var(--line); background: #faf7f1; scrollbar-gutter: stable; }
.channels-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 10px 14px; }
.channels h3 { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.channel-add { display: grid; width: 25px; height: 25px; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--plum); background: white; font-size: 14px; line-height: 1; }
.channel-add:hover { border-color: var(--plum); background: var(--lav); }
.channel-list { display: grid; gap: 3px; }
.channel-help { display: block; margin: 12px 10px 0; color: var(--muted); font-size: 9px; }
.channel-link {  display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 10px; border-radius: 10px; color: #817989; font-size: 12px; text-decoration: none; }
.channel-link:hover, .channel-link.active { color: var(--plum); background: var(--lav); }
.channel-link.dragging { opacity: .45; }
.channel-drag-handle { color: #b8afc8; font-size: 13px; letter-spacing: 0; cursor: grab; }
.channel-link small { margin-left: auto; color: var(--muted); font-size: 9px; }
.channel-unread { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: auto; padding: 0 5px; border-radius: 99px; color: white; background: var(--plum); font-size: 9px; font-weight: 700; }
.channel-unread + small { margin-left: 0; }
.chat-area { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.chat-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 19px 23px; border-bottom: 1px solid var(--line); }
.chat-head strong { font-size: 14px; }
.chat-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.messages { min-height: 0; flex: 1 0 auto; padding: 22px 23px; overflow: visible; }
.load-older-messages, .message-context-link { display: flex; width: fit-content; margin: 0 auto 20px; }
.message { display: flex; gap: 11px; margin-bottom: 24px; }
.message-content { min-width: 0; flex: 1; }
.message-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.message-top-actions { display: flex; align-items: center; gap: 5px; }
.message-hover-actions { position: relative; display: flex; align-items: center; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.message:hover .message-hover-actions, .message:focus-within .message-hover-actions { opacity: 1; pointer-events: auto; }
.message-meta { display: flex; align-items: baseline; gap: 8px; }
.message-meta strong { font-size: 11px; }
.message-meta time { color: var(--muted); font-size: 9px; }
.message-permalink { color: var(--muted); text-decoration: none; }
.message-permalink:hover { color: var(--plum); text-decoration: underline; }
.message p { max-width: 600px; margin: 5px 0 0; color: #595363; font-size: 12px; line-height: 1.55; }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: stretch; justify-content: center; gap: 7px; max-width: 580px; margin-top: 11px; }
.photo-attachment { display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f7f3ed; }
.photo-attachment img { display: block; width: auto; max-width: 100%; height: auto; max-height: 320px; object-fit: contain; }
.message-reaction-row { min-height: 24px; }
.message-reaction-actions { position: relative; display: flex; align-items: center; gap: 2px; }
.message-reaction-actions .emoji-picker { left: 0; right: auto; }
.thread-bubble { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; margin-left: 3px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--plum); background: white; font-size: 10px; text-decoration: none; }
.thread-bubble:hover { border-color: var(--plum); background: var(--lav); }
.thread-bubble svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.thread-bubble-count { color: var(--muted); font-size: 9px; }
.message-menu {  position: relative; flex: 0 0 auto; }
.message-menu-toggle { width: 28px; height: 24px; padding: 0; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 14px; letter-spacing: 1px; line-height: 1; }
.message-menu-toggle:hover, .message-menu-toggle[aria-expanded="true"] { color: var(--plum); background: var(--lav); }
.message-menu-popover { position: absolute; z-index: 4; top: 28px; right: 0; width: 178px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 14px 35px rgba(41,39,55,.16); }
.message-menu-popover[hidden] { display: none; }
.message-menu-popover > button, .message-menu-popover > form > button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; font-size: 11px; }
.message-menu-popover > button:hover, .message-menu-popover > form > button:hover { color: var(--plum); background: var(--lav); }
.message-menu-popover > form { margin: 0; }
.menu-note { display: block; padding: 8px 9px; color: var(--muted); font-size: 10px; }
.more-reactions, .thread-action { height: 24px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--plum); background: white; font-size: 11px; text-decoration: none; }
.more-reactions:hover, .thread-action:hover { border-color: var(--plum); background: var(--lav); }
.emoji-picker { position: absolute; z-index: 5; top: 29px; right: 0; display: grid; grid-template-columns: repeat(8, 1fr); width: 242px; max-height: 190px; overflow: auto; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 14px 35px rgba(41,39,55,.16); }
.emoji-picker[hidden] { display: none; }
.emoji-picker .reaction-choice { width: 27px; height: 27px; }
.menu-label { margin: 8px 8px 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.reaction-picker { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; }
.reaction-form { display: inline-flex; margin: 0; }
.reaction-quick-choice { width: 26px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 99px; background: transparent; font-size: 14px; }
.reaction-quick-choice:hover { border-color: var(--line); background: var(--lav); }
.reaction-choice { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; font-size: 16px; }
.reaction-choice:hover { background: var(--lav); }
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.reaction-pill { min-width: 28px; height: 24px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 99px; background: white; font-size: 14px; }
.reaction-pill:hover, .reaction-pill.selected { border-color: var(--plum); background: var(--lav); }
.reaction-count { margin-left: -7px; padding: 0 5px 0 0; color: var(--muted); font-size: 9px; pointer-events: none; }
.composer { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; padding: 15px 21px; border-top: 1px solid var(--line); }
.composer textarea[name="body"] { min-width: 0; flex: 1; min-height: 40px; max-height: 180px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; outline: 0; resize: none; font-size: 12px; line-height: 1.45; }
.photo-upload { display: inline-flex; align-items: center; justify-content: center; min-width: 58px; margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--plum); background: white; font-size: 10px; white-space: nowrap; }
.photo-upload:hover { border-color: var(--plum); background: var(--lav); }
.photo-upload input[type="file"] { display: none; }
.composer input:focus, label input:focus, label textarea:focus, label select:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(93,77,136,.08); }
.thread-panel { padding: 20px; border-left: 1px solid var(--line); background: #fbf8f3; }
.thread-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.thread-header h3, .thread-panel h3 { margin: 0; font-size: 13px; }
.thread-header a { color: var(--plum); font-size: 10px; text-decoration: none; }
.thread-panel > p, .thread-panel .muted { line-height: 1.6; }
.thread-chat-head { align-items: flex-start; }
.thread-chat-head strong { display: block; margin-top: 8px; }
.thread-back { display: block; color: var(--plum); font-size: 11px; text-decoration: none; }
.thread-back:hover { text-decoration: underline; }
.thread-view { padding: 24px; }
.thread-view-intro { padding-bottom: 16px; }
.thread-view-intro p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.thread-origin { margin-bottom: 20px; padding: 18px; border: 1px solid #ded6ef; border-radius: 15px; background: var(--lav); }
.thread-origin p { color: var(--ink); }
.thread-origin-label { display: inline-block; margin-top: 10px; color: var(--plum); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.thread-replies-heading { padding: 11px 0 7px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.thread-reply-message { padding: 14px 0; border-bottom: 1px solid var(--line); }
.thread-empty { min-height: 120px; }
.empty-state { display: grid; gap: 7px; place-items: center; min-height: 220px; color: var(--muted); text-align: center; font-size: 11px; }
.empty-state strong { color: var(--ink); font-size: 13px; }
.calendar-layout, .tasks-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 17px; }
.task-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 17px; padding: 13px 18px; }
.task-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.task-filters label { min-width: 130px; margin: 0; }
.task-filters select { padding: 8px 9px; }
.task-filter-summary { margin-left: auto; padding-bottom: 9px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.task-menu { position: relative; flex: 0 0 auto; }
.calendar-card { padding: 20px; }
.calendar-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 19px; }
.calendar-navigation, .calendar-controls, .calendar-views { display: flex; align-items: center; }
.calendar-navigation { min-width: 0; gap: 10px; }
.calendar-navigation strong { font-size: 18px; letter-spacing: 0; }
.calendar-controls { gap: 10px; }
.calendar-views a { color: var(--plum); font-size: 10px; text-decoration: none; }
.calendar-views a:hover { text-decoration: underline; }
.calendar-views { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #faf7f1; }
.calendar-views a { padding: 5px 7px; border-radius: 5px; }
.calendar-views a.active { color: var(--ink); background: white; box-shadow: 0 1px 4px rgba(41,39,55,.08); font-weight: 700; }
.calendar-arrow { display: grid; width: 29px; height: 29px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; color: var(--plum); background: white; font-size: 18px; text-decoration: none; }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.weekdays { display: grid; width: 100%; min-height: 22px; grid-auto-flow: column; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 7px; padding: 0 8px 7px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; text-align: center; text-transform: uppercase; }
.calendar-view-month .weekdays, .calendar-view-week .weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekdays > span { display: block; min-width: 0; }
.calendar-view-day .weekdays { grid-template-columns: minmax(0, 1fr); }
.day { min-height: 78px; padding: 8px; overflow: hidden; position: relative; border: 1px solid var(--line); border-radius: 9px; color: #615b6d; font-size: 11px; }
.day-heading { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 6px; }
.day-heading small { color: var(--muted); font-size: 9px; }
.day.muted { color: #c6c0c9; background: #fcfaf7; }
.day.today { border-color: var(--orange); background: #fff3e8; }
.calendar-view-week .day, .calendar-view-day .day { display: flex; height: clamp(480px, calc(100vh - 285px), 900px); min-height: 480px; flex-direction: column; }
.calendar-view-day .days { grid-template-columns: minmax(0, 1fr); }
.all-day-events { position: relative; z-index: 2; display: grid; max-height: 120px; gap: 4px; margin-top: 7px; overflow-y: auto; }
.all-day-events .event-pill { margin-top: 0; }
.day-timeline { position: relative; z-index: 1; min-height: 0; flex: 1; margin-top: 7px; }
.hour-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(4.166% - 1px), rgba(233,226,220,.75) calc(4.166% - 1px), rgba(233,226,220,.75) 4.166%); }
.event-pill { display: block; overflow: hidden; margin-top: 12px; padding: 4px 5px; border-radius: 5px; color: #6b4a37; background: #f8d6bd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.event-pill strong, .event-pill small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-pill small { margin-top: 3px; color: #8c6754; font-size: 8px; }
.timed-event { position: absolute; top: var(--event-top); left: calc(var(--event-left) + 1px); z-index: 1; width: calc(var(--event-width) - 2px); height: var(--event-height); min-height: 26px; margin-top: 0; padding: 4px 6px; white-space: normal; }
.timed-event strong, .timed-event small { white-space: nowrap; }
.calendar-view-week .event-pill, .calendar-view-day .event-pill { margin-top: 8px; padding: 7px; }
.calendar-view-week .timed-event, .calendar-view-day .timed-event { margin-top: 0; padding: 4px 6px; }
.event-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.event-tags span { padding: 3px 6px; border-radius: 99px; color: var(--plum); background: var(--lav); font-size: 9px; }
.event-actions { display: flex; gap: 12px; margin-top: 7px; }
.event-all-day-note { margin: -5px 0 14px; color: var(--plum); font-size: 10px; }
.agenda-card, .task-card { padding: 20px; }
.agenda-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.agenda-row:last-child { border-bottom: 0; }
.text-button { padding: 0; border: 0; color: var(--plum); background: transparent; font-size: 10px; }
.task-list { padding: 4px 20px; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-row form { display: contents; }
.task-row input[type=checkbox] { accent-color: var(--orange); }
.task-main { min-width: 0; flex: 1; }
.task-main strong { display: block; font-size: 12px; font-weight: 500; }
.task-main small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.task-row.done .task-main strong { color: var(--muted); text-decoration: line-through; }
.task-meta { display: grid; justify-items: end; gap: 4px; }
.task-meta small { color: var(--muted); font-size: 10px; }
.priority { padding: 3px 6px; border-radius: 99px; font-size: 9px; font-weight: 600; }
.priority.high { color: #984c3f; background: #f8d7d1; }
.priority.normal { color: #6e5b30; background: #f9e9bd; }
.priority.low { color: #387261; background: #d8eee6; }
.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(41,39,55,.35); }
.modal-card { position: relative; width: min(100%, 440px); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border-radius: 22px; background: white; box-shadow: 0 24px 80px rgba(41,39,55,.2); }
.modal-card.wide { width: min(100%, 700px); }
.modal-card h2 { margin: 8px 0 22px; font-size: 25px; letter-spacing: 0; }
.modal-copy { margin: -8px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.modal-card form + form { margin-top: 10px; }
.modal-close { position: absolute; top: 15px; right: 18px; border: 0; color: var(--muted); background: transparent; font-size: 25px; line-height: 1; }
label { display: grid; gap: 6px; margin: 0 0 14px; color: #5e5968; font-size: 11px; }
label input, label textarea, label select, .modal-card > form > select { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: var(--ink); background: white; font-size: 12px; }
label textarea { resize: vertical; }
.check-label { display: flex; align-items: center; grid-template-columns: auto 1fr; gap: 8px; }
.check-label input { accent-color: var(--plum); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid label:nth-child(5) { grid-column: 1 / -1; }
.member-list { margin-bottom: 18px; }
.member-list > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.member-list + form { display: grid; gap: 10px; }
.edit-photos-section { margin: 20px 0; }
.edit-photos-section > strong { display: block; font-size: 12px; }
.edit-photos-section > p { margin: 5px 0 10px; color: var(--muted); font-size: 10px; }
.edit-photo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.edit-photo-card { position: relative; min-height: 110px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f7f3ed; cursor: grab; }
.edit-photo-card.dragging { opacity: .45; }
.edit-photo-card img { display: block; width: 100%; height: 110px; object-fit: cover; }
.edit-photo-remove { position: absolute; right: 5px; bottom: 5px; padding: 4px 6px; border: 0; border-radius: 6px; color: white; background: rgba(41,39,55,.78); font-size: 9px; }
.edit-photo-remove:hover { background: #8b483b; }
.edit-photos-empty { color: var(--muted); font-size: 11px; }
.member-directory { padding: 4px 20px; }
.directory-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.directory-row:last-child { border-bottom: 0; }
.directory-main { min-width: 0; flex: 1; }
.directory-actions { display: flex; align-items: center; gap: 9px; }
.directory-actions > form { margin: 0; }
.directory-actions details { position: relative; }
.directory-actions summary { color: var(--plum); font-size: 10px; list-style: none; cursor: pointer; }
.directory-actions details form { position: absolute; z-index: 3; top: 24px; right: 0; display: flex; width: 250px; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 12px 30px rgba(41,39,55,.14); }
.directory-actions details input { min-width: 0; flex: 1; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }
.account-layout { max-width: 560px; }
.account-card form { padding: 22px; }
.directory-main strong, .directory-main small { display: block; }
.directory-main strong { font-size: 12px; }
.directory-main small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.role-pill, .member-status { padding: 4px 7px; border-radius: 99px; font-size: 9px; }
.role-pill.admin { color: var(--plum); background: var(--lav); }
.role-pill.user { color: #387261; background: #d8eee6; }
.member-status { color: var(--muted); background: #f4f1ed; }
.member-status.active { color: #387261; background: #e3f4ed; }
.error-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.empty-card { max-width: 500px; padding: 40px; border-radius: 22px; background: white; text-align: center; }
.empty-card h1 { margin: 10px 0 22px; letter-spacing: 0; }
.guest-page { min-height: 100vh; }
.login-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-visual { position: relative; overflow: hidden; padding: 32px clamp(25px, 7vw, 90px); background: var(--lav); }
.login-visual .identity { position: relative; z-index: 1; }
.login-message { position: relative; z-index: 1; max-width: 470px; margin-top: 27vh; }
.login-message h1 { margin: 14px 0 0; font-size: clamp(32px, 5vw, 58px); letter-spacing: 0; line-height: .98; }
.login-message p { max-width: 400px; margin-top: 19px; color: #716b7d; font-size: 13px; line-height: 1.7; }
.login-shapes span { position: absolute; border-radius: 50%; }
.login-shapes span:first-child { width: 330px; height: 330px; right: -100px; top: 8%; background: var(--mint); }
.login-shapes span:last-child { width: 210px; height: 210px; right: 18%; bottom: -80px; background: var(--pink); }
.login-form-wrap { display: grid; place-items: center; padding: 30px; background: var(--cream); }
.login-form { width: min(100%, 350px); }
.login-form h2 { margin: 11px 0 0; font-size: 28px; letter-spacing: 0; }
.form-intro { margin: 10px 0 27px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.login-form .button { width: 100%; margin-top: 8px; }
@media (max-width: 1000px) { .chat-shell { grid-template-columns: 190px minmax(0, 1fr); } .thread-panel { display: none; } }
@media (max-width: 800px) { .main-content { padding: 30px 20px 55px; } .dashboard-widgets { grid-template-columns: 1fr; } .dashboard-widgets > * { grid-column: auto; } .calendar-layout, .tasks-layout { grid-template-columns: 1fr; } .command-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .site-header { padding: 14px 15px 0; } .header-search, .header-link { display: none; } .main-nav { overflow-x: auto; margin-top: 18px; } .main-nav a { flex: 0 0 auto; } .main-content { padding: 27px 15px 50px; } .search-page-form { max-width: none; } .search-result-header { align-items: flex-start; flex-direction: column; gap: 4px; } .command-grid { grid-template-columns: 1fr; } .chat-shell { grid-template-columns: 1fr; } .channels { display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .channels h3 { display: none; } .channel-list { display: flex; gap: 4px; } .channel-help { display: none; } .channel-link { flex: 0 0 auto; width: auto; } .task-toolbar { align-items: stretch; flex-direction: column; gap: 4px; } .task-filters { display: grid; grid-template-columns: 1fr 1fr; } .task-filters label { min-width: 0; } .task-filter-summary { margin-left: 0; padding-bottom: 0; } .task-meta { display: none; } .message-hover-actions { opacity: 1; pointer-events: auto; } .photo-attachment img { max-height: 240px; } .weather-header { align-items: flex-start; flex-direction: column; gap: 5px; } .forecast-row { grid-template-columns: 52px minmax(0, 1fr); gap: 9px; } .forecast-summary { grid-column: 2; margin-top: -2px; } .day { min-height: 58px; padding: 5px; } .event-pill { margin-top: 8px; } .form-grid { grid-template-columns: 1fr; } .form-grid label:nth-child(5) { grid-column: auto; } .login-shell { grid-template-columns: 1fr; } .login-visual { min-height: 355px; padding: 24px 22px; } .login-message { margin-top: 90px; } .login-message h1 { font-size: 37px; } .login-form-wrap { min-height: 510px; padding: 30px 22px; } }
@media (max-width: 620px) { .calendar-bar { align-items: stretch; flex-direction: column; } .calendar-controls { justify-content: flex-end; } }
@media (max-width: 620px) { body.chat-page .main-content { padding: 14px 15px 15px; } body.chat-page .chat-shell { grid-template-rows: auto minmax(0, 1fr); } .channels-head { margin: 0; } .channel-add { width: 34px; height: 34px; } .directory-row { flex-wrap: wrap; } .directory-actions { width: 100%; justify-content: flex-end; } }