:root {
  --ink: #151324;
  --muted: #777287;
  --soft-muted: #aaa5b5;
  --line: #ebe8f0;
  --surface: #ffffff;
  --surface-soft: #f7f6fa;
  --canvas: #f3f1f6;
  --violet: #6d4aff;
  --violet-dark: #4e2cd7;
  --violet-soft: #f0ecff;
  --orange: #ea7c3c;
  --pink: #e14973;
  --green: #1c9a82;
  --blue: #3578e5;
  --red: #d84d59;
  --shadow-sm: 0 1px 2px rgba(36, 23, 56, 0.04), 0 8px 24px rgba(36, 23, 56, 0.04);
  --shadow-md: 0 20px 50px rgba(38, 25, 57, 0.1);
  --sidebar: 250px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: #dcd3ff; color: #2d176b; }

.workspace-shell { min-height: 100vh; }
.workspace-sidebar {
  position: fixed; inset: 0 0 0 auto; width: var(--sidebar); z-index: 40;
  background: #181624; color: #fff; padding: 26px 18px 18px;
  display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 7px 25px; }
.sidebar-brand > div:nth-child(2) { display: flex; flex-direction: column; gap: 1px; }
.sidebar-brand strong { font-size: 18px; letter-spacing: -.3px; }
.sidebar-brand small { color: #8e899d; font-size: 15px; }
.brand-mark {
  width: 39px; height: 39px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, #7c5cff 0%, #5d36e7 63%, #e37545 65%, #f2a369 100%);
  color: white; box-shadow: 0 8px 22px rgba(109, 74, 255, .28); flex: 0 0 auto;
}
.brand-mark span { font-size: 21px; font-weight: 800; transform: translateY(-1px); }
.brand-mark.mini { width: 32px; height: 32px; border-radius: 10px; }
.brand-mark.mini span { font-size: 17px; }
.brand-mark.large { width: 62px; height: 62px; border-radius: 20px; }
.brand-mark.large span { font-size: 30px; }
.command-label {
  display: flex; gap: 7px; align-items: center; margin: 0 4px 13px; padding: 8px 10px;
  border: 1px solid rgba(124,92,255,.19); background: rgba(109,74,255,.08);
  color: #bcb0ef; border-radius: 10px; font-size: 14px; letter-spacing: .2px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav button {
  border: 0; background: transparent; color: #9e99aa; min-height: 45px; padding: 0 13px;
  display: flex; align-items: center; gap: 12px; border-radius: 12px; text-align: right;
  transition: .18s ease; position: relative;
}
.sidebar-nav button:hover { color: #fff; background: rgba(255,255,255,.045); }
.sidebar-nav button.active { color: #fff; background: linear-gradient(90deg, rgba(109,74,255,.19), rgba(109,74,255,.09)); }
.sidebar-nav button.active::before { content: ""; position: absolute; right: -18px; width: 3px; height: 23px; background: #7c5cff; border-radius: 5px 0 0 5px; }
.sidebar-nav button span:nth-child(2) { flex: 1; font-size: 15px; font-weight: 600; }
.nav-count { color: #8c7bf2; font-size: 16px; }
.nav-count.unread { min-width: 23px; height: 23px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #fff; background: #e45767; font-size: 13px; font-weight: 800; box-shadow: 0 5px 13px rgba(228,87,103,.24); }
.sidebar-focus {
  margin-top: auto; margin-bottom: 13px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035); border-radius: 15px; padding: 14px;
  display: flex; gap: 10px; align-items: center;
}
.focus-orbit { width: 35px; height: 35px; border-radius: 12px; color: #9b83ff; background: rgba(109,74,255,.14); display: grid; place-items: center; }
.sidebar-focus > div:last-child { display: flex; flex-direction: column; min-width: 0; }
.sidebar-focus small { color: #777181; font-size: 14px; }
.sidebar-focus strong { font-size: 15px; margin: 2px 0; white-space: nowrap; }
.sidebar-focus span { color: #9a95a4; font-size: 14px; }
.sidebar-profile {
  display: flex; align-items: center; gap: 9px; border-top: 1px solid rgba(255,255,255,.07); padding: 15px 5px 0; margin-top: auto;
}
.sidebar-profile > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sidebar-profile strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile small { color: #817c8a; font-size: 14px; }
.sidebar-profile > svg { color: #625d6c; }
.sidebar-logout { margin-top: 8px; }
.sidebar-logout button { width: 100%; min-height: 39px; padding: 0 9px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 10px; color: #8f8999; background: transparent; font-size: 14px; text-align: right; }
.sidebar-logout button:hover { color: #fff; background: rgba(255,255,255,.05); }
.mobile-close, .menu-button, .mobile-brand, .mobile-dock, .sidebar-scrim { display: none; }

.workspace-main { margin-right: var(--sidebar); min-height: 100vh; }
.workspace-topbar {
  height: 76px; position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.88);
  backdrop-filter: blur(20px); border-bottom: 1px solid rgba(226,222,232,.82);
  display: flex; align-items: center; justify-content: space-between; padding: 0 34px;
}
.topbar-leading, .topbar-actions { display: flex; align-items: center; gap: 13px; }
.topbar-context { min-width: 150px; display: flex; flex-direction: column; line-height: 1.35; }
.topbar-context small { color: var(--muted); font-size: 15px; }
.topbar-context strong { font-size: 16px; }
.search-box {
  width: clamp(240px, 30vw, 390px); height: 42px; display: flex; align-items: center; gap: 10px;
  color: #aaa5b4; border: 1px solid #e9e6ed; background: #f8f7fa; border-radius: 13px; padding: 0 13px;
}
.search-box input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--ink); font-size: 15px; }
.search-box input::placeholder { color: #aaa5b4; }
.search-box kbd { direction: ltr; border: 1px solid #dedbe4; background: #fff; border-radius: 6px; padding: 2px 6px; font-size: 14px; color: #9a95a4; }
.icon-button { border: 1px solid #e8e4ed; background: #fff; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #777180; }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: #e85e67; border: 2px solid #fff; }
.primary-button, .secondary-button {
  min-height: 42px; border-radius: 12px; padding: 0 17px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; transition: .18s ease;
}
.primary-button { color: #fff; background: linear-gradient(135deg, #7656ff, #5d37db); box-shadow: 0 8px 18px rgba(95,55,221,.2); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(95,55,221,.27); }
.primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.primary-button.compact { min-height: 40px; padding: 0 15px; }
.primary-button.wide { width: 100%; }
.secondary-button { color: #4d4757; background: #fff; border: 1px solid #e5e1e9; box-shadow: none; }
.secondary-button:hover { border-color: #cfc8da; background: #fbfaff; }
.topbar-user { display: flex; align-items: center; gap: 8px; padding-right: 3px; }
.topbar-user > div:last-child { display: flex; flex-direction: column; }
.topbar-user strong { font-size: 15px; }
.topbar-user small { color: var(--green); font-size: 13px; }

.workspace-content { max-width: 1470px; margin: 0 auto; padding: 32px 34px 80px; }
.view-stack { display: flex; flex-direction: column; gap: 25px; }
.eyebrow { font-size: 14px; font-weight: 700; color: #928c9b; letter-spacing: .2px; display: flex; align-items: center; gap: 7px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #25ac85; box-shadow: 0 0 0 4px rgba(37,172,133,.1); }
.welcome-row, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.welcome-row h1, .page-heading h1 { font-size: clamp(25px, 3vw, 36px); margin: 7px 0 7px; letter-spacing: -.9px; line-height: 1.3; }
.welcome-row h1 span { font-size: .8em; }
.welcome-row p, .page-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.checkin-button { border: 1px solid #dfd9e8; background: #fff; color: #5d5668; border-radius: 13px; min-height: 43px; padding: 0 15px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.checkin-button.complete { color: #157a67; border-color: #c7e7df; background: #f1faf8; }

.focus-hero {
  position: relative; overflow: hidden; min-height: 202px; border-radius: 24px; padding: 30px 33px;
  background: linear-gradient(120deg, #2a1e5d 0%, #5b3bd7 56%, #7653ef 100%); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; box-shadow: 0 22px 45px rgba(69,44,154,.2);
}
.focus-copy, .focus-actions { position: relative; z-index: 2; }
.focus-copy { max-width: 690px; }
.focus-kicker { display: inline-flex; gap: 7px; align-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); padding: 6px 10px; border-radius: 999px; color: #e0d8ff; font-size: 14px; }
.focus-copy h2 { font-size: clamp(21px, 2.5vw, 31px); margin: 15px 0 8px; letter-spacing: -.5px; line-height: 1.45; }
.focus-copy > p { color: #d5ccf4; font-size: 15px; margin: 0; line-height: 1.8; }
.focus-meta { margin-top: 20px; display: flex; align-items: center; gap: 17px; color: #d8d0f6; font-size: 14px; flex-wrap: wrap; }
.focus-meta > span { display: flex; align-items: center; gap: 5px; }
.focus-actions { min-width: 150px; display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.focus-done-button { min-height: 43px; border: 0; border-radius: 12px; background: #fff; color: #4f31c4; display: flex; gap: 7px; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.focus-link { border: 0; background: transparent; color: #dfd7fb; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 14px; padding: 5px; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow.one { width: 310px; height: 310px; left: -80px; top: -145px; background: radial-gradient(circle, rgba(255,255,255,.12), transparent 68%); }
.hero-glow.two { width: 260px; height: 260px; right: 40%; bottom: -210px; border: 42px solid rgba(255,255,255,.04); }
.member-pill { display: inline-flex !important; align-items: center; gap: 5px; white-space: nowrap; }
.focus-meta .member-pill .avatar { background: rgba(255,255,255,.16) !important; color: #fff !important; border-color: rgba(255,255,255,.15) !important; }

.summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); background: #fff; border-radius: 18px; box-shadow: var(--shadow-sm); }
.summary-strip > div { min-height: 80px; display: flex; align-items: center; justify-content: center; gap: 10px; border-left: 1px solid var(--line); }
.summary-strip > div:last-child { border-left: 0; }
.summary-strip strong { color: var(--violet); font-size: 24px; }
.summary-strip span { color: var(--muted); font-size: 15px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 17px; padding: 17px; display: flex; align-items: center; gap: 13px; box-shadow: var(--shadow-sm); }
.stat-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.stat-icon.violet { color: var(--violet); background: #f0ecff; }
.stat-icon.green { color: var(--green); background: #eaf8f4; }
.stat-icon.orange { color: var(--orange); background: #fff2e9; }
.stat-icon.blue { color: var(--blue); background: #edf4ff; }
.stat-card > div:last-child { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: end; }
.stat-card span { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.stat-card strong { font-size: 22px; letter-spacing: -.4px; line-height: 1.15; }
.stat-card small { color: var(--soft-muted); font-size: 13px; align-self: center; }

.dashboard-grid { display: grid; grid-template-columns: 1.45fr .75fr; gap: 16px; }
.simple-dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: start; }
.panel { border: 1px solid var(--line); background: var(--surface); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-sm); }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-header h2 { margin: 0 0 3px; font-size: 15px; letter-spacing: -.2px; }
.panel-header p { margin: 0; color: var(--muted); font-size: 14px; }
.panel-header button { border: 0; background: transparent; color: var(--violet); display: flex; gap: 4px; align-items: center; font-size: 14px; }
.compact-task-list { display: flex; flex-direction: column; }
.compact-task { min-height: 60px; display: flex; gap: 10px; align-items: center; border-top: 1px solid #f0edf3; }
.compact-task:first-child { border-top: 0; }
.round-check { width: 23px; height: 23px; flex: 0 0 auto; border-radius: 8px; border: 1px solid #dcd6e5; color: transparent; background: #fff; display: grid; place-items: center; transition: .18s ease; }
.round-check:hover { color: #fff; border-color: var(--green); background: var(--green); }
.compact-task-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.compact-task-copy strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-task-copy span { font-size: 13px; color: #9892a1; display: flex; align-items: center; gap: 5px; }
.compact-task-copy i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.compact-task > svg { color: #b5afbb; }
.smart-panel { color: #fff; background: linear-gradient(155deg, #1d1a29, #29243b); border: 0; position: relative; overflow: hidden; }
.smart-panel::after { content: ""; width: 160px; height: 160px; border-radius: 50%; position: absolute; left: -65px; bottom: -90px; background: #6d4aff; filter: blur(55px); opacity: .26; }
.smart-heading { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.smart-heading > div { display: flex; align-items: center; gap: 6px; color: #b9a9ff; font-size: 14px; }
.ai-tag { font-size: 13px; color: #8b8497; letter-spacing: .6px; }
.smart-panel h3 { font-size: 17px; line-height: 1.55; margin: 18px 0 8px; position: relative; z-index: 1; }
.smart-panel > p { color: #aaa3b7; font-size: 14px; line-height: 1.8; margin: 0; position: relative; z-index: 1; }
.smart-rule { position: relative; z-index: 1; margin-top: 17px; display: flex; align-items: flex-start; gap: 8px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); border-radius: 11px; padding: 10px; color: #c9c1d5; font-size: 13px; line-height: 1.7; }
.smart-rule svg { color: #f4a75f; flex: 0 0 auto; }
.smart-brief { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 17px; padding: 14px; border: 1px solid #e5defe; border-radius: 14px; background: #f8f6ff; }
.smart-brief > svg { color: var(--violet); flex: 0 0 auto; margin-top: 2px; }
.smart-brief strong { display: block; font-size: 16px; margin-bottom: 3px; }
.smart-brief p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0; }
.projects-overview, .team-pulse { min-height: 270px; }
.project-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-mini { display: flex; gap: 10px; align-items: center; border: 1px solid #f0edf3; border-radius: 13px; padding: 11px; }
.project-mini-icon { width: 37px; height: 37px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.project-mini-copy { flex: 1; min-width: 0; }
.project-mini-copy > div:first-child { display: flex; justify-content: space-between; gap: 6px; }
.project-mini-copy strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-mini-copy span { color: #9a94a1; font-size: 13px; white-space: nowrap; }
.project-mini-progress { margin-top: 8px; display: flex; align-items: center; gap: 7px; }
.project-mini-progress > span { height: 4px; background: #eeeaf2; border-radius: 999px; flex: 1; overflow: hidden; }
.project-mini-progress i { display: block; height: 100%; border-radius: inherit; }
.project-mini-progress b { font-size: 13px; color: #88818f; }
.workload-list { display: flex; flex-direction: column; gap: 13px; }
.workload-row { display: grid; grid-template-columns: 31px 75px 1fr; align-items: center; gap: 8px; }
.workload-copy { display: flex; flex-direction: column; min-width: 0; }
.workload-copy strong { font-size: 14px; }
.workload-copy span { color: #a39da9; font-size: 13px; white-space: nowrap; }
.workload-track { height: 5px; background: #f0edf3; border-radius: 999px; overflow: hidden; direction: rtl; }
.workload-track span { display: block; height: 100%; border-radius: inherit; }

.section-title-row { display: flex; justify-content: space-between; align-items: flex-end; }
.section-title-row h2 { margin: 5px 0 0; font-size: 22px; }
.announcement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
.announcement-card { display: flex; gap: 11px; border: 1px solid var(--line); background: #fff; border-radius: 17px; padding: 17px; box-shadow: var(--shadow-sm); }
.announcement-card.focus { border-color: #ddd4ff; background: linear-gradient(135deg, #fff, #faf8ff); }
.announcement-card.warning { border-color: #f2d4d7; background: #fff9f9; }
.announcement-icon { width: 34px; height: 34px; border-radius: 11px; background: #f1edff; color: var(--violet); display: grid; place-items: center; flex: 0 0 auto; }
.announcement-card > div:last-child { min-width: 0; }
.announcement-card span { color: var(--violet); font-size: 13px; font-weight: 800; }
.announcement-card h3 { font-size: 15px; margin: 3px 0 5px; }
.announcement-card p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.announcement-card small { display: block; color: #aaa4b0; font-size: 13px; margin-top: 8px; }

.page-heading { align-items: center; padding: 5px 0 1px; }
.page-heading h1 { font-size: clamp(25px, 3vw, 34px); }
.filter-tabs { align-self: flex-start; background: #eae7ee; border-radius: 12px; padding: 4px; display: flex; gap: 3px; }
.filter-tabs button { min-height: 34px; border-radius: 9px; border: 0; background: transparent; padding: 0 13px; color: #7c7584; font-size: 14px; display: flex; gap: 7px; align-items: center; }
.filter-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(42,27,61,.08); font-weight: 700; }
.filter-tabs span { min-width: 17px; height: 17px; border-radius: 6px; display: grid; place-items: center; background: #e8e4eb; font-size: 13px; }
.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 10px; }
.kanban-column { background: #ebe8ef; border-radius: 16px; padding: 11px; min-height: 400px; }
.kanban-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 12px; }
.kanban-header > div { display: flex; align-items: center; gap: 7px; }
.kanban-header strong { font-size: 14px; }
.kanban-header > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.7); font-size: 13px; color: #7f7887; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9d96a5; }
.status-dot.violet { background: var(--violet); }.status-dot.orange { background: var(--orange); }.status-dot.green { background: var(--green); }
.kanban-list { display: flex; flex-direction: column; gap: 9px; }
.task-card { background: #fff; border: 1px solid #e8e4ec; border-radius: 13px; padding: 13px; box-shadow: 0 5px 14px rgba(40,27,54,.04); }
.task-card.priority-urgent { border-top: 2px solid #e1616b; }
.task-card-top { display: flex; justify-content: space-between; align-items: center; }
.task-card-top button { border: 0; color: #aaa4af; background: transparent; padding: 0; }
.priority-badge { border-radius: 7px; padding: 4px 7px; font-size: 13px; font-weight: 700; }
.priority-badge.red { color: #bd3e49; background: #fff0f1; }.priority-badge.orange { color: #b65d24; background: #fff1e8; }.priority-badge.blue { color: #2d69bc; background: #edf4ff; }.priority-badge.neutral { color: #77707e; background: #f1eff3; }
.task-card h3 { font-size: 14px; margin: 10px 0 5px; line-height: 1.6; }
.task-card > p { color: #89828f; font-size: 13px; line-height: 1.65; margin: 0 0 9px; }
.task-project { color: #8a8491; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.task-project span { width: 6px; height: 6px; border-radius: 50%; }
.task-card-footer { margin-top: 12px; border-top: 1px solid #f1eef3; padding-top: 9px; display: flex; justify-content: space-between; align-items: center; }
.task-card-footer > span { color: #9993a0; display: flex; align-items: center; gap: 4px; font-size: 13px; }
.task-card-footer > span.late { color: var(--red); }
.task-advance { width: 100%; border: 0; border-radius: 8px; background: #f4f1ff; color: #6243d7; min-height: 29px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 9px; font-size: 13px; font-weight: 700; }
.empty-column { min-height: 90px; border: 1px dashed #d7d2db; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 6px; color: #a29ba7; font-size: 13px; }

.projects-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.project-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: #fff; padding: 24px; box-shadow: var(--shadow-sm); }
.project-card::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: var(--project-accent); }
.project-card-top { display: flex; justify-content: space-between; align-items: center; }
.project-code { color: var(--project-accent); background: color-mix(in srgb, var(--project-accent) 10%, white); font-weight: 800; font-size: 14px; border-radius: 9px; padding: 7px 10px; }
.project-card h2 { font-size: 19px; margin: 16px 0 6px; }
.project-card > p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.8; min-height: 36px; }
.project-owner-row { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; }
.project-owner-row > span:last-child { color: #8e8795; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.progress-block { margin-top: 18px; }.progress-block > div:first-child { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 7px; }.progress-block strong { color: var(--project-accent); }
.progress-track { height: 7px; background: #eeebf1; border-radius: 999px; overflow: hidden; }.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--project-accent); }
.project-task-summary { margin-top: 15px; display: flex; gap: 7px; }.project-task-summary span { background: #f7f5f8; color: #77707e; border-radius: 8px; padding: 6px 8px; font-size: 13px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.member-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 21px; padding: 22px; text-align: center; box-shadow: var(--shadow-sm); transition: .2s ease; }
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.member-card-accent { position: absolute; top: 0; right: 0; left: 0; height: 4px; }
.member-card-link { display: block; }
.member-delete-button { position: absolute; top: 13px; left: 13px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #f0d8db; border-radius: 11px; color: #bd4b55; background: #fff7f8; transition: .18s ease; }
.member-delete-button:hover { color: #fff; border-color: var(--red); background: var(--red); }
.member-delete-button:disabled { opacity: .45; cursor: wait; }
.member-card-head { display: inline-block; position: relative; }.online-indicator { position: absolute; left: 2px; bottom: 3px; width: 10px; height: 10px; background: #32ad85; border: 2px solid #fff; border-radius: 50%; }
.member-card h2 { font-size: 16px; margin: 12px 0 3px; }.member-role { color: var(--violet); font-size: 13px; font-weight: 700; min-height: 22px; margin: 0; }.member-responsibility { color: var(--muted); font-size: 13px; line-height: 1.75; min-height: 54px; margin: 8px 0 15px; }
.member-stats { border-top: 1px solid #f0edf2; border-bottom: 1px solid #f0edf2; display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 0; }.member-stats div { display: flex; flex-direction: column; border-left: 1px solid #eeeaf0; }.member-stats div:last-child { border-left: 0; }.member-stats strong { font-size: 15px; }.member-stats span { color: #aaa4af; font-size: 13px; }
.member-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 13px; color: #87808d; font-size: 13px; }.member-card-footer span { display: flex; align-items: center; gap: 4px; }.member-card-footer span:first-child { color: var(--green); }

.checkin-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 17px; align-items: start; }
.checkin-form-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }.checkin-form-head span { color: var(--violet); font-size: 14px; font-weight: 700; }.checkin-form-head h2 { font-size: 18px; margin: 3px 0 0; }.checkin-form-head select { max-width: 155px; }
.checkin-form { display: flex; flex-direction: column; gap: 14px; }.checkin-form label, .modal-form label { display: flex; flex-direction: column; gap: 7px; }.checkin-form label > span, .modal-form label > span { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #5f5868; }.checkin-form label > span svg { color: var(--violet); }
textarea, input, select { border: 1px solid #dfdbe4; background: #fbfafc; color: var(--ink); border-radius: 11px; outline: none; transition: .16s ease; }
textarea:focus, input:focus, select:focus { border-color: #9e88f2; box-shadow: 0 0 0 3px rgba(109,74,255,.08); background: #fff; }
textarea { resize: vertical; min-height: 75px; padding: 11px; font-size: 14px; line-height: 1.7; } input, select { min-height: 42px; padding: 0 11px; font-size: 14px; }
.energy-picker { display: flex; align-items: center; justify-content: space-between; border: 1px solid #e8e4eb; background: #f8f6fa; padding: 10px 12px; border-radius: 12px; }.energy-picker > div:first-child { display: flex; flex-direction: column; }.energy-picker span { font-size: 14px; font-weight: 700; }.energy-picker small { color: var(--muted); font-size: 13px; }.energy-picker > div:last-child { display: flex; gap: 5px; }.energy-picker button { width: 28px; height: 28px; border: 1px solid #ded9e5; border-radius: 8px; background: #fff; color: #89828f; font-size: 14px; }.energy-picker button.active { color: #fff; background: var(--violet); border-color: var(--violet); }
.checkin-feed-list { display: flex; flex-direction: column; gap: 0; }.checkin-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-top: 1px solid #f0edf2; }.checkin-item:first-child { border-top: 0; padding-top: 0; }.checkin-item-copy { flex: 1; min-width: 0; }.checkin-item-copy > div { display: flex; justify-content: space-between; align-items: center; }.checkin-item-copy strong { font-size: 14px; }.checkin-item-copy span { color: #aaa4b0; font-size: 13px; }.checkin-item-copy p { margin: 5px 0 0; color: #77717e; font-size: 13px; line-height: 1.65; }.checkin-item-copy p b { color: #4f4857; }.checkin-item-copy p.blocker { color: #b54f58; }.energy-chip { color: #6d5cbe; background: #f0edff; font-size: 13px; border-radius: 7px; padding: 4px 6px; }

.guide-layout { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }.guide-nav-card { background: #1c1928; color: #fff; border-radius: 20px; overflow: hidden; position: sticky; top: 100px; }.guide-cover { padding: 24px; background: radial-gradient(circle at 20% 0, rgba(109,74,255,.45), transparent 50%); }.guide-cover svg { color: #a995ff; }.guide-cover span { display: block; color: #827b90; font-size: 13px; margin-top: 18px; }.guide-cover h3 { font-size: 20px; margin: 4px 0 5px; }.guide-cover p { color: #a9a2b3; font-size: 13px; margin: 0; }.guide-toc { border-top: 1px solid rgba(255,255,255,.07); padding: 9px; }.guide-toc button { width: 100%; border: 0; background: transparent; color: #9d96a7; display: grid; grid-template-columns: 24px 1fr 15px; align-items: center; text-align: right; padding: 10px; border-radius: 9px; font-size: 13px; }.guide-toc button > span { color: #5e5867; }.guide-toc button.active { color: #fff; background: rgba(109,74,255,.16); }.guide-toc button.active > span { color: #9d88f8; }
.guide-content-list { display: flex; flex-direction: column; gap: 10px; }.guide-article { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }.guide-article > button { width: 100%; border: 0; background: transparent; padding: 19px 21px; display: flex; justify-content: space-between; align-items: center; text-align: right; }.guide-article > button > div { flex: 1; }.guide-article > button span { color: var(--violet); font-size: 13px; font-weight: 800; }.guide-article h2 { margin: 3px 0 4px; font-size: 16px; }.guide-article > button p { color: var(--muted); font-size: 13px; margin: 0; }.guide-article > button svg { color: #aaa4b0; transition: .2s ease; }.guide-article.open > button svg { transform: rotate(180deg); }.guide-body { border-top: 1px solid #f0edf2; padding: 15px 21px 19px; background: #fcfbfd; }.guide-body p { color: #5f5868; font-size: 14px; line-height: 2; margin: 3px 0; }

.chat-room { height: min(680px, calc(100vh - 205px)); min-height: 540px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); }
.chat-room-head { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #fcfbfd; }
.chat-room-head > div:first-child { display: flex; align-items: center; gap: 11px; }
.chat-room-head > div:first-child > div { display: flex; flex-direction: column; }
.chat-room-head strong { font-size: 17px; }
.chat-room-head small { color: var(--muted); font-size: 15px; }
.chat-member-stack { display: flex; flex-direction: row-reverse; padding-left: 8px; }
.chat-member-stack .avatar { margin-left: -8px; border: 2px solid #fff; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; background: linear-gradient(180deg, #f8f7fa 0%, #f5f3f8 100%); }
.chat-empty { margin: auto; display: grid; place-items: center; gap: 7px; color: var(--muted); text-align: center; }
.chat-empty svg { color: var(--violet); }
.chat-empty strong { color: var(--ink); font-size: 18px; }
.chat-empty span { font-size: 16px; }
.message-row { width: 100%; display: flex; align-items: flex-end; gap: 9px; justify-content: flex-start; }
.message-row.theirs { justify-content: flex-end; flex-direction: row-reverse; }
.message-bubble { width: fit-content; max-width: min(680px, 76%); padding: 11px 14px; border: 1px solid #e2dee7; border-radius: 16px 16px 5px 16px; background: #fff; box-shadow: 0 5px 16px rgba(36,23,56,.05); }
.message-row.mine .message-bubble { color: #fff; border-color: transparent; border-radius: 16px 16px 16px 5px; background: linear-gradient(135deg, #7555f3, #5b37d3); }
.message-bubble > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 3px; }
.message-bubble strong { font-size: 15px; }
.message-bubble time { color: #9c95a5; font-size: 15px; white-space: nowrap; }
.message-row.mine .message-bubble time { color: #d9d0ff; }
.message-bubble p { margin: 0; font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-composer { min-height: 88px; display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-top: 1px solid var(--line); background: #fff; }
.chat-composer label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-composer textarea { width: 100%; min-height: 45px; max-height: 110px; resize: none; border: 0; background: #f5f3f7; padding: 11px 14px; font-size: 15px; }
.chat-composer textarea:focus { box-shadow: 0 0 0 3px rgba(109,74,255,.08); }
.chat-composer small { color: var(--soft-muted); font-size: 15px; padding: 3px 3px 0; }
.chat-send { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #7656ff, #5d37db); box-shadow: 0 8px 18px rgba(95,55,221,.2); }
.chat-send:disabled { opacity: .45; cursor: not-allowed; }
.quick-chat-tab { position: fixed; left: 26px; bottom: 24px; z-index: 85; min-width: 230px; min-height: 60px; padding: 8px 12px 8px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; color: #fff; background: linear-gradient(135deg, #282139, #171421); box-shadow: 0 18px 48px rgba(24,18,35,.3); text-align: right; transition: transform .2s ease, box-shadow .2s ease; }
.quick-chat-tab:hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(24,18,35,.36); }
.quick-chat-tab.has-unread { border-color: rgba(126,96,255,.55); box-shadow: 0 18px 48px rgba(83,53,190,.32); }
.quick-chat-tab-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #7a5aff, #5b35d8); }
.quick-chat-tab-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.quick-chat-tab-copy strong { font-size: 15px; }
.quick-chat-tab-copy small { color: #aaa3b5; font-size: 13px; }
.quick-chat-badge { min-width: 25px; height: 25px; padding: 0 6px; display: grid; place-items: center; border: 2px solid #272037; border-radius: 999px; color: #fff; background: #e45767; font-size: 13px; font-weight: 800; animation: chatBadgePulse 1.8s ease-in-out infinite; }
.quick-chat-scrim { position: fixed; inset: 0; z-index: 89; border: 0; background: rgba(20,16,29,.42); backdrop-filter: blur(4px); }
.quick-chat-drawer { position: fixed; inset: 0 auto 0 0; z-index: 90; width: min(460px, 100vw); height: 100dvh; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: #fff; box-shadow: 24px 0 70px rgba(21,15,31,.28); animation: chatDrawerIn .24s ease both; }
.quick-chat-drawer-head { min-height: 76px; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); background: #fff; }
.quick-chat-title { display: flex; align-items: center; gap: 11px; }
.quick-chat-title-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #7958ff, #5934d3); box-shadow: 0 8px 20px rgba(93,55,211,.22); }
.quick-chat-title > div { display: flex; flex-direction: column; }
.quick-chat-title strong { font-size: 18px; }
.quick-chat-title small { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 14px; }
.quick-chat-title small i { width: 7px; height: 7px; border-radius: 50%; background: #2eb899; box-shadow: 0 0 0 4px rgba(46,184,153,.12); }
.quick-chat-close { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #e7e3eb; border-radius: 12px; color: #777180; background: #f8f7fa; }
.quick-chat-notice { min-height: 78px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e9e4f7; background: #f6f3ff; }
.quick-chat-notice > div { display: flex; align-items: flex-start; gap: 9px; min-width: 0; color: var(--violet); }
.quick-chat-notice > div > span { display: flex; flex-direction: column; min-width: 0; }
.quick-chat-notice strong { color: #493294; font-size: 14px; }
.quick-chat-notice small { color: #756e83; font-size: 13px; line-height: 1.55; }
.quick-chat-notice button { flex: 0 0 auto; min-height: 35px; padding: 0 11px; border: 1px solid #d9d0ff; border-radius: 10px; color: #5938c8; background: #fff; font-size: 13px; font-weight: 800; }
.quick-chat-notice.enabled { border-bottom-color: #d9eee8; background: #f0faf7; }
.quick-chat-notice.enabled > div { color: var(--green); }
.quick-chat-notice.enabled strong { color: #24715f; }
.quick-chat-drawer .chat-messages { border: 0; padding: 19px 14px; }
.quick-chat-drawer .message-row { gap: 7px; }
.quick-chat-drawer .message-bubble { max-width: 78%; }
.quick-chat-drawer .chat-composer { min-height: 76px; padding: 11px 13px; box-shadow: 0 -10px 30px rgba(33,24,46,.05); }
.quick-chat-drawer .chat-composer textarea { min-height: 48px; }
.chat-alert-toast { position: fixed; left: 26px; bottom: 96px; z-index: 86; width: min(370px, calc(100vw - 52px)); min-height: 68px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #ded7f4; border-radius: 16px; color: var(--ink); background: #fff; box-shadow: 0 18px 48px rgba(34,24,49,.2); text-align: right; animation: chatToastIn .25s ease both; }
.chat-alert-toast > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-alert-toast strong { font-size: 15px; }
.chat-alert-toast small { display: block; max-width: 260px; overflow: hidden; color: var(--muted); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.chat-alert-toast > svg { color: #aaa3b2; }
.chat-alert-bell { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #7958ff, #5c37d8); animation: chatBellRing .8s ease; }
.dock-chat-icon { position: relative; display: grid; place-items: center; }
.dock-chat-icon b { position: absolute; top: -8px; right: -12px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #e45767; font-size: 10px; line-height: 1; }
@keyframes chatDrawerIn { from { opacity: .75; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes chatToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chatBadgePulse { 50% { transform: scale(1.08); } }
@keyframes chatBellRing { 20%, 60% { transform: rotate(10deg); } 40%, 80% { transform: rotate(-10deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.avatar { border: 1px solid; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }.avatar-tiny { width: 23px; height: 23px; border-radius: 8px; font-size: 13px; }.avatar-small { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }.avatar-normal { width: 42px; height: 42px; border-radius: 13px; font-size: 15px; }.avatar-large { width: 59px; height: 59px; border-radius: 19px; font-size: 18px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(20,17,29,.56); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 18px; }.modal-card { width: min(560px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 30px 90px rgba(16,10,27,.27); }.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 19px; }.modal-head h2 { font-size: 20px; margin: 0 0 4px; }.modal-head p { color: var(--muted); font-size: 14px; margin: 0; }.modal-head button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: #f4f2f6; color: #7b7482; }.modal-form { display: flex; flex-direction: column; gap: 14px; }.modal-form textarea { min-height: 82px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid #eeeaf1; padding-top: 16px; margin-top: 2px; }
.field-help { color: var(--muted); font-size: 13px; line-height: 1.6; }
.toast-message { position: fixed; left: 26px; bottom: 96px; z-index: 120; min-height: 44px; padding: 0 15px; display: flex; align-items: center; gap: 8px; background: #192a25; color: #fff; border-radius: 12px; box-shadow: 0 15px 40px rgba(15,31,25,.24); font-size: 14px; }.toast-message svg { color: #5ed5af; }
.inline-error { display: flex; align-items: center; gap: 8px; border: 1px solid #f0cfd3; color: #a43c45; background: #fff6f7; border-radius: 12px; padding: 10px 13px; font-size: 14px; }.inline-error span { flex: 1; }.inline-error button { border: 0; background: transparent; color: inherit; }
.empty-mini { min-height: 120px; color: #aaa4b0; display: grid; place-items: center; align-content: center; gap: 8px; font-size: 14px; }.empty-mini svg { color: var(--green); }
.loading-screen, .fatal-state { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 14px; background: #f4f2f6; text-align: center; }.loading-screen p, .fatal-state p { color: var(--muted); font-size: 15px; margin: 0; }.fatal-state h1 { font-size: 22px; margin: 2px 0 0; }.fatal-state p { max-width: 420px; }.fatal-icon { width: 50px; height: 50px; border-radius: 15px; background: #fff0f1; color: var(--red); display: grid; place-items: center; }
.spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

body:has(.login-page) { padding-bottom: 0; }
.login-page { position: relative; isolation: isolate; min-height: 100dvh; overflow: hidden; padding: 28px; display: grid; place-items: center; background: radial-gradient(circle at 20% 18%, #302052 0, transparent 34%), radial-gradient(circle at 82% 78%, #263d3c 0, transparent 30%), #15121f; }
.login-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(15px); opacity: .45; }
.login-glow.one { width: 440px; height: 440px; top: -250px; right: -120px; background: #7656ff; }
.login-glow.two { width: 360px; height: 360px; bottom: -240px; left: -80px; background: #1c9a82; }
.login-card { width: min(460px, 100%); padding: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 26px; color: #fff; background: rgba(29,25,41,.86); backdrop-filter: blur(22px); box-shadow: 0 34px 90px rgba(7,5,13,.38); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand > div:last-child { display: flex; flex-direction: column; }
.login-brand strong { font-size: 20px; }
.login-brand small { color: #918b9e; font-size: 14px; }
.login-heading { margin: 30px 0 23px; }
.login-heading > span { display: inline-flex; align-items: center; gap: 6px; color: #b7a9ff; font-size: 14px; font-weight: 700; }
.login-heading h1 { margin: 7px 0 5px; font-size: 31px; }
.login-heading p { margin: 0; color: #a9a3b4; font-size: 15px; line-height: 1.8; }
.login-form { display: flex; flex-direction: column; gap: 15px; }
.login-form > label { display: flex; flex-direction: column; gap: 7px; }
.login-form > label > span { color: #d7d3de; font-size: 14px; font-weight: 700; }
.login-field { min-height: 50px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; color: #8f889a; background: rgba(255,255,255,.055); }
.login-field:focus-within { border-color: #7d62ee; box-shadow: 0 0 0 3px rgba(109,74,255,.13); }
.login-field input { flex: 1; min-width: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 15px; }
.login-field input::placeholder { color: #706a79; }
.login-field button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; color: #918b9b; background: transparent; }
.login-error { padding: 10px 12px; border: 1px solid rgba(241,112,123,.28); border-radius: 11px; color: #ffb3ba; background: rgba(216,77,89,.1); font-size: 14px; }
.login-submit { min-height: 50px; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #7958ff, #5b35d8); box-shadow: 0 12px 28px rgba(91,53,216,.3); font-size: 15px; font-weight: 800; }
.login-submit:disabled { opacity: .65; cursor: wait; }
.login-security { margin-top: 19px; padding-top: 17px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid rgba(255,255,255,.08); color: #888293; font-size: 13px; text-align: center; }
.login-security svg { color: #51bca4; flex: 0 0 auto; }

.member-page { min-height: 100vh; background: #f3f1f6; padding: 24px; }
.member-page-inner { max-width: 1180px; margin: 0 auto; }
.member-page-topbar { height: 54px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.back-link { color: #665f6e; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.back-link:hover { color: var(--violet); }
.member-page-brand { display: flex; align-items: center; gap: 6px; }
.member-page-brand > span { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7958ff, #5b36d9); font-weight: 800; }
.member-page-brand strong { font-size: 15px; }.member-page-brand small { color: #a19aa8; font-size: 13px; border-right: 1px solid #d8d3dc; padding-right: 7px; }
.member-hero { --member-accent: #6d4aff; min-height: 220px; position: relative; overflow: hidden; background: linear-gradient(120deg, #1d1929, #302744); border-radius: 25px; color: #fff; padding: 30px 34px; display: flex; align-items: center; gap: 22px; box-shadow: 0 22px 45px rgba(31,23,43,.18); }
.member-hero::before { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--member-accent); }
.member-hero-glow { position: absolute; width: 350px; height: 350px; right: -130px; top: -210px; border-radius: 50%; background: var(--member-accent); filter: blur(70px); opacity: .34; }
.member-avatar-xl { position: relative; z-index: 1; width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; background: color-mix(in srgb, var(--member-accent) 24%, rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.13); color: #fff; font-size: 27px; font-weight: 800; }
.member-hero-copy { position: relative; z-index: 1; flex: 1; }.member-status { display: inline-flex; align-items: center; gap: 5px; color: #75e0bd; font-size: 13px; }.member-hero-copy h1 { font-size: 31px; margin: 7px 0 4px; }.member-hero-copy > p { color: #b8b0c6; font-size: 15px; margin: 0; }.member-hero-meta { display: flex; gap: 15px; align-items: center; margin-top: 14px; color: #91899e; font-size: 13px; }.member-hero-meta span { display: flex; align-items: center; gap: 5px; }
.member-focus-card { position: relative; z-index: 1; width: 260px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 17px; display: flex; flex-direction: column; }.member-focus-card span { color: #998fa6; font-size: 13px; }.member-focus-card strong { font-size: 15px; line-height: 1.6; margin: 5px 0; }.member-focus-card small { color: #b7afc1; font-size: 13px; }
.member-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 17px 0; }.member-stat-row article { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 15px; display: flex; align-items: center; gap: 11px; box-shadow: var(--shadow-sm); }.member-stat-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }.member-stat-icon.violet { background: #f0ecff; color: var(--violet); }.member-stat-icon.green { background: #eaf8f4; color: var(--green); }.member-stat-icon.orange { background: #fff2e9; color: var(--orange); }.member-stat-icon.blue { background: #edf4ff; color: var(--blue); }.member-stat-row article > div:last-child { display: flex; flex-direction: column; }.member-stat-row strong { font-size: 18px; }.member-stat-row span { color: var(--muted); font-size: 13px; }
.member-page-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 15px; align-items: start; }.member-panel { background: #fff; border: 1px solid var(--line); border-radius: 19px; padding: 21px; box-shadow: var(--shadow-sm); }.member-panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }.member-panel-heading > div { display: flex; align-items: center; gap: 7px; }.member-panel-heading svg { color: var(--violet); }.member-panel-heading h2 { margin: 0; font-size: 16px; }.member-panel-heading > span { color: var(--violet); background: #f0edff; border-radius: 7px; padding: 4px 7px; font-size: 13px; }
.member-role-panel h3 { color: #8c8593; font-size: 13px; margin: 0 0 6px; }.member-role-panel > p { color: #4f4857; font-size: 14px; line-height: 1.9; margin: 0; }.role-note { margin-top: 17px; border: 1px solid #e8e2ff; background: #f8f6ff; border-radius: 12px; padding: 12px; }.role-note span { color: var(--violet); font-size: 13px; font-weight: 800; }.role-note p { color: #625b6a; font-size: 13px; line-height: 1.8; margin: 4px 0 0; }.workload-meter { margin-top: 18px; }.workload-meter > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }.workload-meter strong { color: var(--green); }.workload-meter > div:last-child { height: 6px; background: #eeeaf1; border-radius: 999px; overflow: hidden; }.workload-meter > div:last-child span { display: block; height: 100%; border-radius: inherit; }
.member-task-list { display: flex; flex-direction: column; }.member-task-list article { min-height: 61px; border-top: 1px solid #f0edf2; display: flex; align-items: center; gap: 10px; }.member-task-list article:first-child { border-top: 0; }.member-task-status { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #918a97; background: #f2f0f4; }.member-task-status.in_progress { color: var(--violet); background: #f0edff; }.member-task-status.review { color: var(--orange); background: #fff1e8; }.member-task-list article > div:nth-child(2) { flex: 1; min-width: 0; }.member-task-list h3 { font-size: 14px; margin: 0 0 3px; }.member-task-list p { color: #9c96a2; font-size: 13px; margin: 0; }.member-task-side { display: flex; flex-direction: column; align-items: flex-end; }.member-task-side span { color: #7764d5; font-size: 13px; }.member-task-side small { color: #aaa4b0; font-size: 13px; margin-top: 2px; }
.member-checkin-list { display: flex; flex-direction: column; }.member-checkin-list article { display: flex; gap: 10px; padding: 13px 0; border-top: 1px solid #f0edf2; }.member-checkin-list article:first-child { border-top: 0; padding-top: 0; }.checkin-date-box { width: 36px; height: 40px; border-radius: 10px; background: #f2efff; color: var(--violet); display: grid; place-items: center; align-content: center; flex: 0 0 auto; }.checkin-date-box strong { font-size: 15px; line-height: 1; }.checkin-date-box span { font-size: 13px; }.member-checkin-list article > div:last-child { flex: 1; }.member-checkin-list p { color: #716a78; font-size: 13px; line-height: 1.7; margin: 1px 0; }.member-checkin-list p b { color: #4e4756; }.member-checkin-list p.member-blocker { color: #b64f58; }
.completed-list { display: flex; flex-direction: column; }.completed-list > div { min-height: 42px; border-top: 1px solid #f0edf2; display: flex; align-items: center; gap: 8px; color: var(--green); }.completed-list > div:first-child { border-top: 0; }.completed-list span { color: #514a59; font-size: 13px; flex: 1; }.completed-list small { color: #aaa4b0; font-size: 13px; }.member-empty { min-height: 90px !important; display: grid !important; place-items: center !important; align-content: center !important; gap: 7px !important; color: #aaa4b0 !important; font-size: 13px !important; border: 0 !important; }

@media (max-width: 1180px) {
  :root { --sidebar: 218px; }
  .workspace-sidebar { padding-inline: 14px; }
  .workspace-content { padding-inline: 24px; }
  .workspace-topbar { padding-inline: 24px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .announcement-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .workspace-sidebar { transform: translateX(105%); transition: transform .24s ease; width: 250px; box-shadow: -20px 0 55px rgba(19,13,31,.28); }
  .workspace-sidebar.mobile-visible { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(18,14,27,.45); backdrop-filter: blur(4px); }
  .sidebar-scrim.visible { display: block; }
  .mobile-close { display: grid; place-items: center; margin-right: auto; width: 32px; height: 32px; border: 0; border-radius: 9px; color: #a9a2b1; background: rgba(255,255,255,.06); }
  .workspace-main { margin-right: 0; }
  .menu-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e7e3eb; background: #fff; border-radius: 12px; }
  .mobile-brand { display: flex; align-items: center; gap: 7px; }
  .mobile-brand strong { font-size: 15px; }
  .search-box { display: none; }
  .topbar-user > div:last-child { display: none; }
  .topbar-actions .notification-anchor { display: block; }
  .topbar-actions .notification-bell-button { display: grid; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .simple-dashboard-grid { grid-template-columns: 1fr; }
  .topbar-context { display: none; }
  .projects-overview { order: 2; }.team-pulse { order: 3; }
  .checkin-layout { grid-template-columns: 1fr; }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-nav-card { position: static; }.guide-toc { display: none; }
  .member-page-grid { grid-template-columns: 1fr; }
  .member-stat-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body:has(.login-page) { padding-bottom: 0; }
  .login-page { padding: 14px; }
  .login-card { padding: 24px 19px; border-radius: 22px; }
  .login-heading { margin-top: 24px; }
  .login-heading h1 { font-size: 27px; }
  .workspace-topbar { height: 64px; padding: 0 14px; }
  .workspace-content { padding: 22px 14px 45px; }
  .topbar-actions .primary-button { display: none; }
  .welcome-row, .page-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .welcome-row h1, .page-heading h1 { font-size: 25px; }
  .checkin-button { width: 100%; justify-content: center; }
  .focus-hero { min-height: 330px; padding: 25px 22px; flex-direction: column; align-items: stretch; justify-content: center; gap: 22px; }
  .focus-copy h2 { font-size: 22px; }
  .focus-actions { min-width: 0; }
  .focus-meta { gap: 10px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .summary-strip > div { min-height: 76px; flex-direction: column; gap: 1px; text-align: center; padding: 8px 4px; }
  .summary-strip strong { font-size: 21px; }
  .summary-strip span { font-size: 15px; }
  .stat-card { padding: 13px; gap: 9px; }.stat-icon { width: 35px; height: 35px; }.stat-card strong { font-size: 18px; }.stat-card small { display: none; }
  .panel { padding: 17px; border-radius: 17px; }
  .project-mini-grid { grid-template-columns: 1fr; }
  .announcement-grid, .projects-list, .team-grid { grid-template-columns: 1fr; }
  .announcement-card:last-child { grid-column: auto; }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .kanban-board { grid-template-columns: repeat(4, 250px); margin-left: -14px; margin-right: -14px; padding-inline: 14px; }
  .filter-tabs { max-width: 100%; overflow-x: auto; }.filter-tabs button { white-space: nowrap; }
  .page-heading .primary-button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .checkin-form-head { align-items: flex-start; flex-direction: column; gap: 10px; }.checkin-form-head select { width: 100%; max-width: none; }
  .energy-picker { align-items: flex-start; flex-direction: column; gap: 10px; }.energy-picker > div:last-child { width: 100%; }.energy-picker button { flex: 1; }
  .modal-card { padding: 20px 16px; border-radius: 19px; }
  .modal-actions .primary-button, .modal-actions .secondary-button { flex: 1; }
  .mobile-dock { position: fixed; z-index: 60; right: 10px; left: 10px; bottom: calc(9px + env(safe-area-inset-bottom)); min-height: 68px; border: 1px solid #e0dce5; border-radius: 18px; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); box-shadow: 0 15px 40px rgba(29,20,42,.17); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 5px 7px; }
  .mobile-dock button { position: relative; min-width: 0; min-height: 54px; padding: 4px 2px; border: 0; border-radius: 13px; background: transparent; color: #918b98; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; touch-action: manipulation; }
  .mobile-dock button small { max-width: 100%; overflow: hidden; font-size: 11px; font-weight: 750; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-dock-icon { display: grid; place-items: center; min-height: 21px; font-size: 18px; line-height: 1; }
  .mobile-dock button.active { color: var(--violet); background: #f4f0ff; }
  .mobile-dock button.active::after { content: ""; position: absolute; bottom: 2px; width: 18px; height: 2px; border-radius: 999px; background: var(--violet); }
  .dock-chat-icon b { display: none; }
  .dock-chat-icon b.visible { display: grid; }
  .chat-room { height: calc(100vh - 190px); min-height: 520px; border-radius: 18px; }
  .chat-room-head { padding: 12px 14px; }
  .chat-messages { padding: 17px 12px; }
  .message-bubble { max-width: 82%; }
  .chat-composer { padding: 10px 11px; }
  .chat-composer > .avatar, .chat-composer small { display: none; }
  .quick-chat-tab { left: 14px; bottom: 88px; min-width: 0; width: min(232px, calc(100vw - 28px)); min-height: 56px; border-radius: 16px; }
  .quick-chat-tab-icon { width: 39px; height: 39px; }
  .quick-chat-tab-copy strong { font-size: 14px; }
  .quick-chat-tab-copy small { font-size: 12px; }
  .quick-chat-drawer { width: 100vw; }
  .quick-chat-drawer-head { min-height: 68px; padding: 10px 13px; }
  .quick-chat-title-icon { width: 39px; height: 39px; }
  .quick-chat-title strong { font-size: 17px; }
  .quick-chat-notice { min-height: 92px; align-items: flex-start; padding: 10px 12px; }
  .quick-chat-notice small { max-width: 210px; }
  .quick-chat-notice button { margin-top: 2px; padding-inline: 9px; }
  .quick-chat-drawer .chat-messages { padding: 14px 10px; }
  .quick-chat-drawer .message-bubble { max-width: 82%; }
  .quick-chat-drawer .chat-composer { min-height: 70px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); }
  .chat-alert-toast { left: 14px; bottom: 154px; width: calc(100vw - 28px); }
  .toast-message { left: 14px; right: 14px; bottom: 154px; justify-content: center; }
  .member-page { padding: 14px; }
  .member-page-topbar { margin-bottom: 10px; }.member-page-brand small { display: none; }
  .member-hero { min-height: 390px; padding: 25px 21px; flex-direction: column; align-items: flex-start; justify-content: center; text-align: right; }.member-avatar-xl { width: 72px; height: 72px; border-radius: 22px; }.member-hero-copy h1 { font-size: 25px; }.member-focus-card { width: 100%; }
  .member-stat-row { gap: 8px; }.member-stat-row article { padding: 12px; }.member-stat-icon { width: 33px; height: 33px; }.member-stat-row strong { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}

/* PHP standalone additions */
.php-icon{display:inline-grid;place-items:center;width:20px;height:20px;font-weight:900}.php-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.php-project-card,.php-member-card,.php-guide-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm)}.php-project-head,.php-member-head,.php-guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.php-project-code{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-weight:900}.php-project-card h3,.php-member-card h3,.php-guide-card h3{margin:0;font-size:17px}.php-project-card p,.php-member-card p,.php-guide-card p{color:var(--muted);font-size:14px;line-height:1.75}.php-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.php-chip{display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border-radius:999px;background:#f3f1f6;color:#756e7d;font-size:13px}.php-chip.urgent{background:#fff0f1;color:#b23846}.php-chip.high{background:#fff3e9;color:#a96029}.php-chip.done{background:#eaf8f4;color:#187765}.php-chip.progress{background:#f0ecff;color:#5a3bce}.php-chip.review{background:#fff3e9;color:#a96029}.php-task-table{display:flex;flex-direction:column;gap:9px}.php-task-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px 16px;box-shadow:var(--shadow-sm)}.php-task-main{display:flex;gap:12px;align-items:flex-start}.php-task-main h3{margin:0 0 4px;font-size:15px}.php-task-main p{margin:0;color:var(--muted);font-size:13px}.php-task-side{display:flex;align-items:center;gap:8px}.php-status-select,.php-small-select{border:1px solid #ded9e4;border-radius:10px;background:#fff;padding:7px 9px;color:#5f5868}.php-member-link{display:flex;gap:11px;align-items:center}.php-member-copy{min-width:0}.php-member-copy small{display:block;color:var(--muted);font-size:13px}.php-member-actions{display:flex;gap:8px;margin-top:14px}.danger-button{min-height:38px;border:1px solid #efcdd2;background:#fff7f8;color:#b03d4b;border-radius:10px;padding:0 12px}.php-chat-shell{height:min(690px,calc(100vh - 180px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm)}.php-chat-head{padding:17px 19px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.php-chat-head h2{margin:0;font-size:18px}.php-chat-head small{color:var(--green)}.php-chat-messages{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:11px}.php-message{display:flex;gap:8px;align-items:flex-end}.php-message.mine{flex-direction:row-reverse}.php-message-bubble{max-width:min(72%,620px);padding:10px 13px;border-radius:16px 16px 4px 16px;background:#f2eff7}.php-message.mine .php-message-bubble{background:#6d4aff;color:#fff;border-radius:16px 16px 16px 4px}.php-message-bubble b{display:block;font-size:12px;margin-bottom:2px}.php-message-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.php-message-bubble time{display:block;font-size:11px;opacity:.65;margin-top:4px}.php-chat-form{display:flex;gap:10px;padding:13px;border-top:1px solid var(--line)}.php-chat-form textarea{flex:1;min-height:48px;max-height:120px;resize:none;border:1px solid #e6e1e9;background:#f7f6fa;border-radius:13px;padding:11px 13px}.php-chat-form button{width:50px;border:0;border-radius:13px;background:#6d4aff;color:#fff;font-weight:900}.php-checkin-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;align-items:start}.php-form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow-sm)}.php-form-card h2{margin:0 0 5px}.php-form-card>p{margin:0 0 17px;color:var(--muted)}.php-form{display:flex;flex-direction:column;gap:12px}.php-form label,.modal-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}.php-form input,.php-form textarea,.php-form select,.modal-form input,.modal-form textarea,.modal-form select{width:100%;border:1px solid #ded8e4;border-radius:11px;background:#fff;padding:10px 12px;outline:none}.php-form textarea,.modal-form textarea{min-height:85px;resize:vertical}.php-form input:focus,.php-form textarea:focus,.php-form select:focus,.modal-form input:focus,.modal-form textarea:focus,.modal-form select:focus{border-color:#8a72ee;box-shadow:0 0 0 3px rgba(109,74,255,.09)}.php-checkin-list{display:flex;flex-direction:column;gap:10px}.php-checkin-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.php-checkin-card header{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}.php-checkin-card p{margin:5px 0;color:#5f5968}.php-checkin-card p b{color:#262132}.php-checkin-card .blocker{color:#a64751}.php-empty{min-height:170px;display:grid;place-items:center;text-align:center;color:var(--muted);border:1px dashed #dcd6e3;border-radius:17px;background:rgba(255,255,255,.5)}.php-announcements{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.php-announcement{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.php-announcement.focus{border-color:#ddd4ff;background:#faf8ff}.php-announcement h3{margin:0 0 6px;font-size:15px}.php-announcement p{margin:0;color:var(--muted)}.php-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.php-topline h1{margin:0;font-size:29px}.php-topline p{margin:3px 0 0;color:var(--muted)}.php-actions{display:flex;gap:8px;flex-wrap:wrap}.php-activity{display:flex;flex-direction:column;gap:9px}.php-activity-row{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #f0edf3}.php-activity-row:last-child{border-bottom:0}.php-activity-row time{color:#aaa4b0;font-size:12px;white-space:nowrap}.php-member-detail-link{color:var(--violet);font-weight:700}.php-guide-content{white-space:pre-line;background:#f8f7fa;border-radius:12px;padding:12px;margin-top:10px;color:#514a5b}.php-search-empty{padding:30px;text-align:center;color:var(--muted)}.modal-card .close-x{font-size:19px}.toast-message{gap:7px}.inline-error{margin-bottom:16px}.workspace-sidebar a button{font:inherit}.member-page-back{display:inline-flex;align-items:center;gap:7px;color:var(--violet);font-weight:700;margin-bottom:16px}.member-page-shell{max-width:1120px;margin:0 auto;padding:34px}.member-profile-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#221c38,#332752);border-radius:24px;padding:26px;color:#fff;display:flex;gap:18px;align-items:center}.member-profile-hero h1{margin:0 0 3px}.member-profile-hero p{margin:0;color:#bdb6c7}.member-focus-card{margin-right:auto;min-width:240px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;display:flex;flex-direction:column}.member-focus-card span,.member-focus-card small{color:#bdb4cb;font-size:13px}.member-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.member-stat-row article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;gap:10px;align-items:center}.member-stat-row strong{display:block;font-size:20px}.member-stat-row span{color:var(--muted);font-size:13px}.member-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.member-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:19px}.member-panel h2{margin:0;font-size:17px}.member-panel-heading{display:flex;justify-content:space-between;margin-bottom:13px}.member-task-list,.member-checkin-list,.completed-list{display:flex;flex-direction:column;gap:9px}.member-task-list article,.member-checkin-list article,.completed-list>div{padding:10px;border:1px solid #f0edf3;border-radius:12px}.member-empty{padding:18px;text-align:center;color:var(--muted)}
@media(max-width:1000px){.php-card-grid{grid-template-columns:repeat(2,1fr)}.php-checkin-grid{grid-template-columns:1fr}.member-stat-row{grid-template-columns:repeat(2,1fr)}.member-page-grid{grid-template-columns:1fr}}@media(max-width:680px){.php-card-grid,.php-announcements{grid-template-columns:1fr}.php-task-row{grid-template-columns:1fr}.php-task-side{justify-content:space-between}.php-topline{align-items:flex-start;flex-direction:column}.member-page-shell{padding:18px}.member-profile-hero{align-items:flex-start;flex-direction:column}.member-focus-card{margin-right:0;width:100%;min-width:0}}
.priority-pill{border-radius:7px;padding:4px 7px;font-size:13px;font-weight:700;color:#77707e;background:#f1eff3}.priority-pill.urgent{color:#bd3e49;background:#fff0f1}.priority-pill.high{color:#b65d24;background:#fff1e8}.task-project i{width:6px;height:6px;border-radius:50%;display:inline-block}.focus-outline-button{min-height:43px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-weight:700}.focus-outline-button:hover{background:rgba(255,255,255,.13)}


/* v2: chat bell, home chat preview, announcement controls */
.chat-bell-button { position: relative; overflow: visible; font-size: 17px; }
.chat-bell-icon { position: static !important; width: auto !important; height: auto !important; border: 0 !important; background: transparent !important; line-height: 1; transform-origin: 50% 15%; }
.chat-bell-count { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; display: none; place-items: center; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--red); font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 5px 12px rgba(216,77,89,.24); }
.chat-bell-button.has-unread { color: var(--violet); border-color: #d8d0ff; background: var(--violet-soft); }
.chat-bell-button.has-unread .chat-bell-count { display: grid; }
.chat-bell-button.ringing .chat-bell-icon { animation: chatBellRing .8s ease; }
.home-communication-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 22px; align-items: stretch; }
.home-chat-panel { min-height: 100%; }
.home-chat-panel h2 { display: flex; align-items: center; gap: 8px; }
.home-chat-unread { min-width: 23px; height: 23px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; color: #fff; background: var(--red); font-size: 12px; }
.home-chat-preview { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.home-chat-message { width: 100%; min-height: 59px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #ece8f0; border-radius: 13px; color: var(--ink); background: #faf9fc; text-align: right; transition: .16s ease; }
.home-chat-message:hover { border-color: #d8d0ef; background: #f6f3ff; transform: translateY(-1px); }
.home-chat-message > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-chat-message strong { font-size: 14px; }
.home-chat-message small { overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.home-chat-message time { color: var(--soft-muted); font-size: 12px; white-space: nowrap; }
.announcement-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.announcement-card-head h3 { margin: 0; }
.announcement-delete { flex: 0 0 auto; min-height: 30px; padding: 0 9px; border: 1px solid #f0cdd2; border-radius: 9px; color: #b6404a; background: #fff8f8; font-size: 12px; font-weight: 700; }
.announcement-delete:hover { border-color: #e7aeb5; background: #fff1f2; }
@media (max-width: 980px) { .home-communication-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .chat-bell-button { width: 38px; height: 38px; } .home-chat-message time { display: none; } }

/* v3: quick homepage chat tab */
.home-tabs { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px; border: 1px solid #e7e2eb; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(42,27,61,.05); }
.home-tab { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font: inherit; font-weight: 750; cursor: pointer; }
.home-tab:hover { color: var(--ink); background: #f7f5fa; }
.home-tab.active { color: var(--violet); background: var(--violet-soft); }
.home-tab.chat-tab b { min-width: 21px; height: 21px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; color: #fff; background: var(--red); font-size: 11px; line-height: 1; }
.announcement-delete { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
@media (max-width: 700px) { .home-tabs { width: 100%; } .home-tab { flex: 1; justify-content: center; } }

/* v4: personal notes + unified notification center */
.welcome-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.home-tab-soft-count{min-width:21px;height:21px;padding:0 5px;display:inline-grid;place-items:center;border-radius:999px;color:#6d4aff;background:#ece7ff;font-size:11px;line-height:1}
.home-notes-panel{overflow:hidden}
.home-notes-actions{display:flex;align-items:center;gap:8px}
.home-notes-actions button{border:0;background:transparent;color:var(--violet);font-weight:750}
.home-note-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:14px}
.home-note-card{min-width:0;min-height:142px;padding:14px;border:1px solid #ebe6ef;border-radius:15px;background:#fbfafd;color:var(--ink);text-align:right;display:flex;flex-direction:column;gap:7px;transition:.16s ease}
.home-note-card:hover{transform:translateY(-2px);border-color:#d8cff3;background:#f8f5ff;box-shadow:0 10px 24px rgba(58,37,92,.06)}
.home-note-card.pinned{border-color:#dfd6ff;background:linear-gradient(180deg,#fbf9ff,#f7f3ff)}
.home-note-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.home-note-top i{font-style:normal;font-size:14px}
.home-note-card>strong{font-size:15px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-note-card>small{color:var(--muted);font-size:13px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-note-card>time{margin-top:auto;color:var(--soft-muted);font-size:11px}
.home-note-empty{grid-column:1/-1;min-height:130px}

.notification-anchor{position:relative}
.notification-bell-button{position:relative;overflow:visible;font-size:17px}
.notification-bell-icon{position:static!important;width:auto!important;height:auto!important;border:0!important;background:transparent!important;line-height:1;transform-origin:50% 15%}
.notification-bell-count{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;display:none;place-items:center;border:2px solid #fff;border-radius:999px;color:#fff;background:var(--red);font-size:11px;font-weight:800;line-height:1;box-shadow:0 5px 12px rgba(216,77,89,.24)}
.notification-bell-button.has-unread{color:var(--violet);border-color:#d8d0ff;background:var(--violet-soft)}
.notification-bell-button.has-unread .notification-bell-count{display:grid}
.notification-bell-button.ringing .notification-bell-icon{animation:chatBellRing .8s ease}
.notification-popover{position:absolute;top:50px;left:0;width:min(390px,calc(100vw - 28px));max-height:min(650px,calc(100vh - 96px));overflow:auto;z-index:80;border:1px solid #e4dfea;border-radius:18px;background:#fff;box-shadow:0 24px 65px rgba(31,20,47,.18);padding:0;text-align:right}
.notification-popover[hidden]{display:none!important}
.notification-panel-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
.notification-panel-head>div{display:flex;flex-direction:column}
.notification-panel-head strong{font-size:15px}
.notification-panel-head small{color:var(--muted);font-size:12px}
.notification-panel-head button,.notification-section-title button{border:0;background:transparent;color:var(--violet);font-size:12px;font-weight:800;padding:4px}
.notification-list{display:flex;flex-direction:column;padding:7px}
.notification-item{position:relative;width:100%;display:flex;align-items:flex-start;gap:10px;padding:11px 9px;border:0;border-radius:12px;background:#fff;color:var(--ink);text-align:right;transition:.15s ease}
.notification-item:hover{background:#f7f5fa}
.notification-item.unread{background:#faf8ff}
.notification-icon{width:35px;height:35px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;background:#f0edf4;color:#625c6c;font-weight:900}
.notification-icon.chat{background:#eee9ff;color:#6d4aff}.notification-icon.task{background:#eaf7f3;color:#187e69}.notification-icon.announcement{background:#fff2e9;color:#bd642b}.notification-icon.system{background:#eef4ff;color:#356dc7}
.notification-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.notification-copy strong{font-size:13px;line-height:1.45}
.notification-copy small{color:var(--muted);font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-copy time{color:var(--soft-muted);font-size:11px;margin-top:2px}
.notification-unread-dot{position:absolute;left:8px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px rgba(109,74,255,.1)}
.notification-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px}
.notification-pinned{border-top:1px solid var(--line);padding:10px 12px 13px;background:#fbfafd}
.notification-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:#514b5c;font-size:12px;font-weight:800}
.pinned-note-list{display:flex;flex-direction:column;gap:6px}
.pinned-note-list button{width:100%;border:1px solid #ece7f1;border-radius:10px;background:#fff;padding:8px 9px;text-align:right;display:flex;flex-direction:column;gap:1px;color:var(--ink)}
.pinned-note-list button:hover{border-color:#d8cff2;background:#f9f7ff}
.pinned-note-list strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinned-note-list small,.notification-no-pins{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.note-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.note-stats article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px;box-shadow:var(--shadow-sm);display:flex;align-items:baseline;gap:9px}
.note-stats strong{font-size:25px;color:var(--violet)}
.note-stats span{color:var(--muted);font-size:13px}
.notes-privacy{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid #d9e8e3;border-radius:14px;background:#f5fbf9;color:#315e53}
.notes-privacy>span{font-size:18px}
.notes-privacy>div{display:flex;flex-direction:column;gap:2px}
.notes-privacy strong{font-size:13px}.notes-privacy small{font-size:12px;color:#638078}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.note-card{position:relative;min-width:0;min-height:255px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.17s ease}
.note-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(36,23,56,.075);border-color:#ddd5e5}
.note-card.pinned{border-color:#d9ceff;background:linear-gradient(180deg,#fff,#fbf9ff)}
.note-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.note-category{display:inline-flex;align-items:center;width:max-content;min-height:25px;padding:0 8px;border-radius:999px;background:#f0edf3;color:#696272;font-size:11px;font-weight:800}
.note-category.note-idea{background:#fff2df;color:#9c6017}.note-category.note-meeting{background:#eaf1ff;color:#3565aa}.note-category.note-followup{background:#eaf8f4;color:#1d7965}.note-category.note-important{background:#fff0f1;color:#b6414b}.note-category.note-personal{background:#f3eefe;color:#7249b0}
.note-pin-button{width:31px;height:31px;display:grid;place-items:center;border:1px solid #ece7ef;border-radius:9px;background:#fff;filter:grayscale(1);opacity:.55}
.note-pin-button:hover,.note-pin-button.active{filter:none;opacity:1;border-color:#d8cff3;background:#f8f5ff}
.note-card h3{margin:13px 0 7px;font-size:17px;line-height:1.45}
.note-card>p{margin:0;color:#5f5968;line-height:1.75;font-size:13px;white-space:normal;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.note-no-body{color:var(--soft-muted);font-style:italic}
.note-card-meta{margin-top:auto;padding-top:14px;color:var(--soft-muted);font-size:11px}
.note-card-actions{display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid #f0edf2;flex-wrap:wrap}
.note-card-actions button{border:0;border-radius:8px;background:#f5f3f7;color:#5f5868;min-height:31px;padding:0 9px;font-size:11px;font-weight:750}
.note-card-actions button:hover{background:#ede9f2;color:var(--ink)}
.note-card-actions .danger-link{margin-right:auto;color:#ae414a;background:#fff5f6}
.note-card-actions .danger-link:hover{background:#ffedef}
.notes-empty{grid-column:1/-1;min-height:320px;display:grid;place-items:center;align-content:center;gap:7px;text-align:center;border:1px dashed #d8d1df;border-radius:20px;background:rgba(255,255,255,.55);color:var(--muted)}
.notes-empty>span{font-size:34px;color:#a79bbc}.notes-empty h3{margin:0;color:var(--ink)}.notes-empty p{margin:0 0 8px;max-width:440px}
.note-form textarea[name="body"]{min-height:230px;line-height:1.75}
.note-pin-field{justify-content:flex-end}.note-pin-check{min-height:43px;display:flex;align-items:center;gap:8px;border:1px solid #ded8e4;border-radius:11px;padding:0 11px;font-weight:600;background:#fbfafc}.note-pin-check input{width:17px!important;height:17px!important;box-shadow:none!important}
.note-draft-status{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:10px;background:#f7f6fa;color:#837c8c;font-size:12px}

@media(max-width:1050px){.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-note-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.home-note-card:nth-child(3){display:none}}
@media(max-width:760px){.welcome-actions{width:100%;justify-content:stretch}.welcome-actions>*{flex:1}.note-stats{grid-template-columns:1fr}.notes-grid,.home-note-preview{grid-template-columns:1fr}.home-note-card:nth-child(3){display:flex}.notification-popover{position:fixed;top:68px;left:14px;right:14px;width:auto;max-height:calc(100vh - 86px)}.notification-anchor{position:static}.topbar-actions{gap:7px}.home-tabs{overflow-x:auto}.home-tab{min-width:max-content;flex:0 0 auto!important}}


/* v4.1: Mobile Edition */
button, .primary-button, .secondary-button, a { -webkit-tap-highlight-color: transparent; }
@media (max-width: 900px) {
  body.mobile-menu-open { overflow: hidden; }
  .workspace-sidebar { overflow-y: auto; overscroll-behavior: contain; }
  .menu-button, .notification-bell-button { touch-action: manipulation; }
  .notification-popover { position: fixed; top: 70px; right: 14px; left: 14px; width: auto; max-height: calc(100dvh - 92px); border-radius: 16px; }
  .topbar-actions { gap: 8px; }
}
@media (max-width: 680px) {
  .workspace-topbar { gap: 8px; }
  .topbar-leading, .topbar-actions { gap: 7px; min-width: 0; }
  .topbar-actions .notification-bell-button { width: 40px; height: 40px; }
  .topbar-user { padding-right: 0; }
  .sidebar-nav button, .sidebar-logout button { min-height: 48px; }
  .primary-button, .secondary-button, .danger-button, .announcement-delete, .php-status-select, .php-small-select { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .modal-backdrop { align-items: flex-end; padding: 10px; }
  .modal-card { width: 100%; max-height: calc(100dvh - 20px); overflow-y: auto; border-radius: 20px 20px 14px 14px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .notification-panel-head { padding-top: 13px; }
  .php-chat-shell { height: calc(100dvh - 164px - env(safe-area-inset-bottom)); min-height: 440px; }
  .php-chat-form { position: sticky; bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: #fff; }
  .kanban-board { scroll-snap-type: x proximity; overscroll-behavior-inline: contain; }
  .kanban-column { scroll-snap-align: start; }
}
@media (max-width: 430px) {
  .topbar-user { display: none; }
  #announcement-button { min-width: 42px; width: 42px; padding: 0; font-size: 0; }
  #announcement-button::before { content: "+"; font-size: 22px; font-weight: 800; }
  .workspace-content { padding-inline: 12px; }
  .mobile-dock { right: 7px; left: 7px; padding-inline: 4px; }
  .mobile-dock button small { font-size: 10.5px; }
  .home-tabs { overflow-x: auto; justify-content: flex-start; }
  .home-tab { min-width: max-content; }
}