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

:root {
  --purple: #71308f;
  --purple-deep: #351747;
  --purple-dark: #27122f;
  --purple-soft: #f2eaf7;
  --blue: #15c0fa;
  --ink: #271e2c;
  --muted: #756d7b;
  --line: #e9e3eb;
  --soft: #f8f6f9;
  --white: #fff;
  --green: #27916d;
  --red: #cf4e56;
  --amber: #d89136;
  --shadow: 0 18px 55px rgba(52, 26, 67, .10);
  --soft-shadow: 0 8px 28px rgba(52, 26, 67, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: #fbfafc; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, .wordmark { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }

.wordmark { display: flex; align-items: center; gap: 11px; color: inherit; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.wordmark-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50% 50% 44% 56%; background: var(--blue); color: var(--purple-deep); font-family: Georgia, serif; font-weight: 900; font-style: italic; font-size: 23px; transform: rotate(-4deg); }
.eyebrow, .workspace-name { margin: 0 0 8px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.primary, .outline, .ghost { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 10px 17px; border: 0; font-weight: 700; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.primary { background: var(--purple); color: white; box-shadow: 0 9px 20px rgba(113, 48, 143, .20); }
.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(113, 48, 143, .28); }
.primary.soft { background: #efe5f5; color: var(--purple); box-shadow: none; }
.outline { background: white; color: var(--ink); border: 1px solid var(--line); }
.outline:hover { border-color: #cbb9d3; }
.icon-only { width: 43px; padding: 0; font-size: 18px; }
.full { width: 100%; }
.alert { padding: 12px 14px; border: 1px solid #f1bcc1; border-radius: 11px; background: #fff1f2; color: #9f2731; }
.muted { color: var(--muted); }
.brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50% 50% 44% 56%; color: var(--purple-deep); background: var(--blue); font-family: Georgia, serif; font-size: 28px; font-weight: 900; font-style: italic; }
.install-card { width: min(720px, calc(100% - 32px)); margin: 45px auto; padding: 36px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }
.install-card h1 { margin-bottom: 5px; font-size: 33px; letter-spacing: -.04em; }
.install-card > p:not(.eyebrow) { color: var(--muted); }
.install-card .brand-mark + .eyebrow { margin-top: 19px; }
.install-logo-image { display: block; width: 205px; max-width: 72%; height: auto; margin-bottom: 19px; border-radius: 6px; }
.install-logo-image + .eyebrow { margin-top: 0; }
.install-card .stack h2 { margin: 10px 0 -5px; font-size: 14px; }
.login-card { width: min(520px, calc(100% - 32px)); margin: 45px auto; padding: 36px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow); }
.login-card .brand-mark + .eyebrow { margin-top: 19px; }
.login-card h1 { margin: 5px 0 9px; font-size: 32px; letter-spacing: -.04em; }
.login-card > p { color: var(--muted); line-height: 1.6; }

/* Login */
.login-body { min-height: 100vh; background: white; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 50px 9% 32px; color: white; background: radial-gradient(ellipse at 90% 80%, rgba(143,64,172,.4), transparent 60%), linear-gradient(145deg, #240c34, #4b1c64 65%, #6d2b86); }
.login-story::before { content: ''; position: absolute; width: 460px; height: 460px; right: -220px; bottom: -150px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.login-logo-image { position: relative; z-index: 1; width: 225px; height: auto; }
.story-copy { position: relative; z-index: 1; max-width: 620px; margin: auto 0; padding: 80px 0 90px; }
.login-kicker { margin-bottom: 28px; color: #d8b8e9; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.story-copy h1 { margin: 0; font-size: clamp(43px, 4.6vw, 76px); line-height: 1.13; letter-spacing: -.045em; }
.story-copy h1 em { color: #36c5ed; font-style: normal; }
.story-copy > p:not(.login-kicker) { max-width: 380px; margin: 30px 0 0; color: #ddcce6; font-size: 17px; line-height: 1.8; }
.story-chips { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.story-chips span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.04); color: #ecdef2; font-size: 14px; font-weight: 500; }
.story-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 15px; color: #c8add6; font-size: 12px; }
.login-access { display: flex; flex-direction: column; min-width: 0; padding: 46px 8% 30px; background: #fcfbfd; }
.access-top { display: flex; justify-content: flex-end; color: #887890; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.access-box { width: min(100%, 380px); margin: auto; padding: 35px 0; }
.login-symbol { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; border-radius: 19px; background: #763296; box-shadow: 0 10px 24px rgba(118,50,150,.13); }
.login-symbol img { width: 56px; height: auto; }
.access-box > .eyebrow { margin-bottom: 17px; color: #996eab; font-size: 11px; letter-spacing: .14em; }
.access-box h2 { margin: 0; color: #30123f; font-size: 47px; line-height: 1.15; letter-spacing: -.04em; }
.access-lead { margin: 20px 0 26px; color: #8a7a92; font-size: 16px; line-height: 1.8; }
.stack { display: grid; gap: 16px; margin-top: 28px; }
label { display: grid; gap: 7px; color: #4a414f; font-size: 12px; font-weight: 700; }
input, select, textarea { width: 100%; outline: none; border: 1px solid #ded7e1; border-radius: 10px; background: white; color: var(--ink); padding: 12px 13px; transition: border-color .18s, box-shadow .18s; }
input:focus, select:focus, textarea:focus { border-color: #9c6caf; box-shadow: 0 0 0 3px rgba(113,48,143,.09); }
textarea { resize: vertical; }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-field button { position: absolute; right: 7px; top: 7px; height: 31px; border: 0; border-radius: 7px; background: var(--purple-soft); color: var(--purple); font-size: 11px; font-weight: 800; }
.show-password { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.show-password input { width: auto; }
.login-button { width: 100%; justify-content: space-between; padding-inline: 20px; }
.access-note { margin: 0; text-align: center; color: #ab9caf; font-size: 12px; }

/* Shell */
.app { min-height: 100vh; display: grid; grid-template-columns: 255px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; display: flex; flex-direction: column; padding: 24px 16px 20px; color: white; background: linear-gradient(180deg, #351645, #27122f); box-shadow: 5px 0 30px rgba(39,18,47,.08); }
.sidebar-brand { padding: 2px 10px 24px; border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-logo-image { display: block; width: 185px; height: auto; margin: 3px auto 22px; }
.workspace-name { margin: 15px 0 0; color: #aa93b5; font-size: 9px; }
.sidebar nav { display: grid; gap: 6px; padding: 22px 0; }
.sidebar nav button { position: relative; width: 100%; display: flex; align-items: center; gap: 13px; border: 0; border-radius: 10px; padding: 12px 13px; color: #c9bcd0; background: transparent; text-align: left; font-size: 14px; font-weight: 600; }
.sidebar nav button:hover { color: white; background: rgba(255,255,255,.06); }
.sidebar nav button.active { color: white; background: linear-gradient(90deg, rgba(21,192,250,.20), rgba(255,255,255,.07)); box-shadow: inset 3px 0 var(--blue); }
.nav-icon { width: 20px; color: #cda9df; font-size: 19px; text-align: center; }
.sidebar nav button.active .nav-icon { color: var(--blue); }
#navTaskCount { margin-left: auto; min-width: 22px; padding: 3px 6px; border-radius: 999px; color: var(--purple-deep); background: var(--blue); font-style: normal; text-align: center; font-size: 10px; }
.sidebar-motto { margin-top: auto; display: flex; gap: 11px; align-items: center; padding: 14px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); }
.sidebar-motto > span { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--purple-deep); background: var(--blue); font-size: 10px; font-weight: 900; }
.sidebar-motto p { margin: 0; color: #aa9bb1; font-size: 10px; line-height: 1.55; }
.profile { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 9px 8px; border-top: 1px solid rgba(255,255,255,.08); }
.profile b { display: block; font-size: 12px; }
.profile small { display: block; margin-top: 2px; color: #a998b2; font-size: 10px; }
.logout { padding-left: 52px; color: #9888a1; text-decoration: none; font-size: 10px; }
.logout:hover { color: white; }
.avatar { width: 42px; height: 42px; display: inline-grid; place-items: center; flex: none; overflow: hidden; border: 2px solid white; border-radius: 50%; color: white; background: linear-gradient(145deg, #945db0, #5c2775); box-shadow: 0 4px 13px rgba(53,23,69,.18); font-size: 12px; font-weight: 800; }
.avatar.small { width: 30px; height: 30px; margin-left: -5px; font-size: 9px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 15px; padding: 0 30px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(16px); color: var(--muted); font-size: 12px; }
.topbar i { padding: 0 6px; color: #b8afb9; font-style: normal; }
.topbar b { color: var(--ink); }
#menu { display: none; border: 0; background: none; font-size: 20px; }
.private { margin-left: auto; padding: 7px 10px; border-radius: 999px; background: #edf8f3; color: #39765f; font-size: 10px; font-weight: 700; }
.private b { color: #42a77d; }
.content { max-width: 1500px; margin: auto; padding: 34px clamp(24px, 4vw, 54px) 60px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: clamp(29px, 3vw, 40px); line-height: 1.08; letter-spacing: -.045em; }
.page-head p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.back-link { margin-bottom: 8px; padding: 0; border: 0; color: var(--purple); background: transparent; font-size: 11px; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; }
.loading { display: grid; place-items: center; gap: 11px; padding: 80px; color: var(--muted); }
.loading span { width: 25px; height: 25px; border: 2px solid var(--purple-soft); border-top-color: var(--purple); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dashboard */
.dashboard-strip { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--soft-shadow); }
.dashboard-strip button { display: grid; grid-template-columns: 42px auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 18px 20px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; }
.dashboard-strip button:last-child { border-right: 0; }
.metric-icon { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--purple); background: var(--purple-soft); font-size: 17px; font-weight: 800; }
.metric-icon.warm { color: #ac6b20; background: #fff1dd; }
.metric-icon.blue { color: #19779a; background: #e5f7fd; }
.dashboard-strip strong { font-family: 'Manrope'; font-size: 21px; line-height: 1; }
.dashboard-strip small { color: var(--muted); font-size: 13px; }
.searchbar { width: min(100%, 460px); height: 43px; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 3px 13px rgba(45,26,55,.03); }
.searchbar span { color: #998d9e; font-size: 20px; }
.searchbar input { padding: 0; border: 0; box-shadow: none; background: transparent; font-size: 15px; }
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 22px; align-items: start; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 18px; }
.project-card { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--soft-shadow); text-align: left; transition: transform .18s, box-shadow .18s; }
.project-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.project-cover { position: relative; height: 158px; display: flex; align-items: flex-end; justify-content: space-between; overflow: hidden; padding: 21px; color: white; }
.project-cover::before { content: ''; position: absolute; width: 180px; height: 180px; right: -55px; top: -58px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.045); }
.project-cover > * { position: relative; z-index: 1; }
.cover-web { background: linear-gradient(140deg, #432158, #7a3995); }
.cover-commerce { background: linear-gradient(140deg, #264d62, #16a5bd); }
.cover-professional { background: linear-gradient(140deg, #703757, #d5758a); }
.cover-software { background: linear-gradient(140deg, #173c58, #377ec2); }
.cover-academy { background: linear-gradient(140deg, #493071, #8973c5); }
.cover-brand { background: linear-gradient(140deg, #5e381c, #c28a38); }
.cover-symbol { position: absolute; right: 22px; top: 20px; color: rgba(255,255,255,.78); font-size: 37px; }
.project-cover small { display: block; margin-bottom: 5px; color: rgba(255,255,255,.72); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.project-cover strong { display: block; max-width: 210px; font-family: 'Manrope'; font-size: 20px; line-height: 1.05; }
.project-cover > i { position: absolute; right: 17px; bottom: 13px; color: rgba(255,255,255,.42); font-size: 7px; font-style: normal; }
.project-body { padding: 17px 18px 15px; }
.project-title { display: flex; align-items: center; justify-content: space-between; }
.project-title h2 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.project-title > span { color: var(--purple); }
.project-body > p { margin: 4px 0 9px; color: var(--muted); font-size: 13px; }
.status { display: inline-flex; width: fit-content; padding: 5px 9px; border-radius: 999px; color: var(--purple); background: var(--purple-soft); font-size: 12px; font-weight: 800; }
.status.complete { color: var(--green); background: #eaf7f1; }
.status.personal { color: #94611e; background: #fff2dd; }
.progress-copy { display: flex; justify-content: space-between; margin: 14px 0 6px; color: var(--muted); font-size: 13px; }
.progress-copy b { color: var(--ink); }
.progress { height: 4px; overflow: hidden; border-radius: 10px; background: #eee9f0; }
.progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--blue)); }
.card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0ecf1; color: var(--muted); font-size: 12px; }
.avatars { display: flex; align-items: center; padding-left: 5px; }
.avatars small { color: #9b929f; }
.today-panel { position: sticky; top: 85px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--soft-shadow); }
.today-panel > .eyebrow { padding: 19px 20px 0; }
.today-panel > h2 { margin: 3px 20px 0; text-transform: capitalize; font-size: 23px; }
.today-date { margin: 4px 20px 18px; color: var(--muted); font-size: 10px; }
.next-meeting { display: grid; gap: 6px; padding: 19px 20px; color: white; background: linear-gradient(135deg, #4b205e, #71308f); }
.next-meeting.quiet { color: var(--ink); background: var(--purple-soft); }
.next-meeting p { margin: 0; color: #c7a8d4; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.next-meeting.quiet p { color: var(--purple); }
.next-meeting strong { font-family: 'Manrope'; font-size: 14px; }
.next-meeting span { color: #d2c2d8; font-size: 9px; }
.next-meeting.quiet span { color: var(--muted); }
.next-meeting button { margin-top: 8px; padding: 0; border: 0; color: white; background: transparent; text-align: left; font-size: 10px; font-weight: 700; }
.today-tasks { padding: 17px 20px 20px; }
.today-tasks > div { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 11px; }
.today-tasks > div span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--purple); background: var(--purple-soft); font-size: 9px; }
.today-tasks > button:not(.day-link) { width: 100%; display: flex; gap: 8px; padding: 8px 0; border: 0; border-bottom: 1px solid #f2eef3; background: transparent; text-align: left; font-size: 10px; }
.today-tasks i { width: 12px; height: 12px; flex: none; border: 1px solid #cfc4d3; border-radius: 50%; }
.today-tasks p { color: var(--muted); font-size: 10px; }
.day-link { margin-top: 12px; padding: 0; border: 0; color: var(--purple); background: transparent; font-size: 9px; font-weight: 700; }

/* Project and lists */
.project-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 25px; color: var(--muted); font-size: 14px; }
.project-summary .avatars { margin-left: 4px; }
.project-notes { margin: 20px 0; padding: 12px 20px; border-left: 3px solid #ba8dcd; color: #6e5f76; background: #f4eef7; font-size: 15px; line-height: 1.7; white-space: pre-wrap; }
.project-tabs { display: flex; gap: 23px; margin-bottom: 21px; border-bottom: 1px solid var(--line); }
.project-tabs button { margin-bottom: -1px; padding: 15px 4px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: none; font-size: 15px; font-weight: 600; }
.project-tabs button.active { border-color: var(--purple); color: var(--purple); }
.project-view { min-height: 300px; }
.summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; }
.summary-main, .summary-side { display: grid; gap: 15px; align-content: start; }
.summary-card, .detail-card { padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--soft-shadow); }
.summary-progress { display: flex; align-items: center; gap: 22px; }
.summary-progress > strong { color: var(--purple); font-family: 'Manrope'; font-size: 38px; }
.summary-progress > div { flex: 1; color: var(--muted); font-size: 10px; }
.summary-progress .progress { margin-top: 9px; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.section-title h2, .section-title h3 { margin: 0; font-size: 14px; }
.section-title button { border: 0; color: var(--purple); background: transparent; font-size: 10px; font-weight: 700; }
.notes { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.detail-card { display: flex; justify-content: space-between; align-items: center; }
.detail-card > span { color: var(--muted); font-size: 10px; }
.detail-card > strong { font-size: 12px; }
.upcoming-card { display: grid; gap: 5px; padding: 18px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg, #3f1d50, #7d3897); text-align: left; }
.upcoming-card span { color: #cdb7d5; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.upcoming-card small { color: #d7c9dc; }
.toolbar { display: flex; justify-content: space-between; margin-bottom: 13px; }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pills button { padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: white; font-size: 14px; font-weight: 700; }
.filter-pills button.selected { border-color: var(--purple); color: white; background: var(--purple); }
.task-list, .meeting-list { display: grid; gap: 8px; }
.task-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 35px 70px 12px; gap: 12px; align-items: center; width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: white; text-align: left; }
.task-row:hover, .meeting-row:hover { border-color: #cdbdd4; box-shadow: var(--soft-shadow); }
.task-check { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #ccbfd1; border-radius: 5px; color: white; background: white; font-size: 10px; }
.task-row.done .task-check { border-color: var(--green); background: var(--green); }
.task-row.done strong { color: #958c99; text-decoration: line-through; }
.task-row strong, .task-row small { display: block; }
.task-row strong { font-size: 15px; }
.task-row small { margin-top: 5px; color: var(--muted); font-size: 13px; }
.task-row time { color: var(--muted); font-size: 13px; font-style: normal; text-align: right; }
.task-row time.late { color: var(--red); font-weight: 800; }
.meeting-row { width: 100%; display: grid; grid-template-columns: 78px minmax(0, 1fr) 25px; gap: 17px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: white; text-align: left; }
.meeting-time { align-self: stretch; display: grid; place-content: center; border-right: 1px solid var(--line); }
.meeting-time strong { color: var(--purple); font-size: 14px; }
.meeting-time small { color: var(--muted); font-size: 9px; }
.meeting-row h3 { margin: 7px 0 3px; font-size: 13px; }
.meeting-row > div > small { color: var(--muted); font-size: 9px; }
.meeting-row .avatars { margin-top: 9px; }
.meeting-arrow { color: var(--purple); font-size: 18px; }
.meeting-status { display: inline-flex; margin-left: 5px; padding: 5px 8px; border-radius: 999px; color: #6d5875; background: #f1ebf3; font-size: 8px; font-weight: 800; }
.meeting-status.realizada { color: #217457; background: #e5f6ef; }
.meeting-status.cancelada { color: #a04752; background: #fdebed; }
.meeting-row.cancelled { opacity: .68; background: #faf8fa; }
.meeting-row.cancelled h3 { text-decoration: line-through; }
.empty { display: grid; justify-items: center; gap: 7px; padding: 50px 25px; border: 1px dashed #d5cad9; border-radius: 14px; color: var(--muted); background: white; text-align: center; }
.empty.wide { grid-column: 1 / -1; }
.empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--purple); background: var(--purple-soft); font-size: 18px; }
.empty h2 { margin: 5px 0 0; color: var(--ink); font-size: 16px; }
.empty p { margin: 0; font-size: 11px; }

/* Agenda */
.public-agenda { display: flex; justify-content: space-between; align-items: center; gap: 22px; overflow: hidden; margin-bottom: 19px; padding: 18px 20px; border: 1px solid #dfd0e7; border-radius: 14px; background: radial-gradient(circle at 78% 15%, rgba(21,192,250,.12), transparent 25%), linear-gradient(115deg, #fbf7fd, #fff); box-shadow: var(--soft-shadow); }
.public-copy { display: flex; align-items: center; gap: 15px; }
.public-star { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 13px; color: var(--purple); background: var(--purple-soft); font-size: 22px; }
.public-agenda h2 { margin: 0; font-size: 18px; }
.public-agenda p:not(.eyebrow) { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.agenda-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; }
.calendar-card, .day-panel { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--soft-shadow); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; }
.calendar-head h2 { margin: 0; text-transform: capitalize; font-size: 17px; }
.calendar-head button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 21px; }
.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.weekdays span { padding: 8px 0; color: var(--muted); text-align: center; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.calendar-day, .calendar-empty { aspect-ratio: 1.18; min-height: 48px; }
.calendar-day { position: relative; border: 1px solid transparent; border-radius: 9px; color: var(--ink); background: #fbfafc; }
.calendar-day:hover { border-color: #cdbbd5; }
.calendar-day.today { color: var(--purple); background: var(--purple-soft); }
.calendar-day.selected { color: white; background: var(--purple); }
.calendar-day b { font-size: 11px; }
.calendar-day span { position: absolute; right: 5px; bottom: 5px; min-width: 15px; padding: 2px 4px; border-radius: 999px; color: var(--purple); background: white; font-size: 7px; }
.day-panel > h2 { margin: 0 0 17px; font-size: 23px; text-transform: capitalize; }
.day-panel .meeting-row { grid-template-columns: 60px minmax(0, 1fr) 15px; padding: 12px 8px; }
.day-panel .meeting-row .avatars { display: none; }
.day-panel .meeting-time strong { font-size: 11px; }
.day-empty { display: grid; justify-items: center; gap: 7px; padding: 31px 10px; color: var(--muted); text-align: center; }
.day-empty > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--purple); background: var(--purple-soft); }
.day-empty strong { color: var(--ink); font-size: 12px; }
.day-empty p { margin: 0; max-width: 220px; font-size: 9px; line-height: 1.55; }

/* Files and team */
.folders { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; margin-bottom: 19px; }
.folders button { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: white; text-align: left; }
.folders button.selected { border-color: #bfa8ca; color: var(--purple); background: var(--purple-soft); }
.folders button > span { font-size: 20px; }
.folders strong { font-size: 9px; }
.folders b { font-size: 9px; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 13px; }
.file-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--soft-shadow); }
.file-preview { height: 105px; display: grid; place-items: center; overflow: hidden; color: var(--purple); background: linear-gradient(135deg, #f5edf8, #fbfafc); font-size: 30px; }
.file-preview img { width: 100%; height: 100%; object-fit: cover; }
.file-card > div:last-child { display: grid; gap: 4px; padding: 14px; }
.file-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.file-card small { color: var(--muted); font-size: 8px; }
.file-card a { margin-top: 5px; color: var(--purple); font-size: 9px; font-weight: 700; text-decoration: none; }
.team-intro { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; padding: 15px 18px; border-radius: 12px; color: white; background: linear-gradient(110deg, #351645, #64287a); }
.team-intro > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: var(--purple-deep); background: var(--blue); font-size: 10px; font-weight: 900; }
.team-intro strong { font-size: 12px; }
.team-intro p { margin: 3px 0 0; color: #c7b7cf; font-size: 9px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.person-card { padding: 25px 18px 16px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--soft-shadow); text-align: center; }
.person-card:hover { border-color: #c9b5d1; transform: translateY(-2px); }
.person-card .avatar { width: 67px; height: 67px; margin: auto; font-size: 18px; }
.person-card h2 { margin: 12px 0 3px; font-size: 15px; }
.person-card > p { margin: 0; color: var(--muted); font-size: 10px; }
.person-card > div { display: flex; justify-content: space-between; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.file-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 15px; }
.folder-sections { display: grid; gap: 13px; }
.folder-sections > section { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.folder-sections .section-title span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--purple); background: var(--purple-soft); font-size: 8px; }
.mini-files { display: grid; gap: 7px; margin-top: 12px; }
.mini-files a { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px; border-radius: 8px; background: var(--soft); text-decoration: none; }
.mini-files a > span { color: var(--purple); }
.mini-files strong, .mini-files small { display: block; }
.mini-files strong { font-size: 10px; }
.mini-files small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.mini-files i { color: var(--purple); font-style: normal; }

/* Dialogs */
dialog { width: min(94vw, 660px); max-height: 90vh; overflow: auto; padding: 0; border: 0; border-radius: 17px; box-shadow: 0 26px 85px rgba(29,13,36,.28); }
dialog::backdrop { background: rgba(31,17,38,.52); backdrop-filter: blur(4px); }
#modalBody { padding: 29px; }
.close { position: sticky; z-index: 2; top: 14px; float: right; width: 32px; height: 32px; margin: 14px 14px -46px 0; border: 0; border-radius: 50%; color: var(--muted); background: #f2eef3; font-size: 20px; }
.form { display: grid; gap: 15px; clear: both; }
.modal-heading { padding-right: 40px; }
.modal-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }
.modal-heading > span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.check-grid > label { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 9px; font-weight: 600; }
.check-grid input, .toggle-line input { width: auto; }
.toggle-line { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 9px; background: var(--purple-soft); }
.contact-note { display: grid; gap: 4px; padding: 13px; border: 1px solid #ded0e5; border-radius: 10px; color: var(--muted); background: #f8f3fa; font-size: 10px; }
.contact-note strong { color: var(--purple); }
.cancel-options { display: grid; gap: 10px; padding: 14px; border: 1px solid #efcdd2; border-radius: 11px; background: #fff7f8; }
.cancel-options[hidden] { display: none; }
.cancel-options > small { color: #8b7377; font-size: 9px; }
.mail-security-note { margin: 0; padding: 11px 13px; border-radius: 9px; color: #5d5161; background: #f4eff6; font-size: 9px; line-height: 1.5; }
.upload-box { position: relative; min-height: 125px; display: grid; place-items: center; align-content: center; gap: 4px; overflow: hidden; border: 1px dashed #baa6c3; border-radius: 12px; color: var(--purple); background: #fbf8fc; text-align: center; }
.upload-box > span { font-size: 23px; }
.upload-box small { color: var(--muted); font-weight: 400; }
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.share-box { padding: 13px; border-radius: 10px; color: var(--purple); background: var(--purple-soft); word-break: break-all; font-size: 10px; }
#toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; padding: 12px 17px; border-radius: 10px; color: white; background: var(--purple-dark); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: .2s; font-size: 11px; }
#toast.show { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .main-grid { grid-template-columns: 1fr; }
  .today-panel { position: static; }
  .today-panel { display: grid; grid-template-columns: 1fr 1fr; }
  .today-panel > .eyebrow, .today-panel > h2, .today-panel > .today-date { grid-column: 1 / -1; }
  .agenda-grid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: auto; padding: 28px 30px 32px; }
  .login-logo-image { width: 175px; }
  .story-copy { padding: 38px 0 0; }
  .story-copy h1 { font-size: 42px; }
  .story-copy > p:not(.login-kicker) { margin-top: 17px; font-size: 15px; line-height: 1.6; }
  .story-chips { margin-top: 22px; }
  .story-chips span { padding: 8px 11px; font-size: 12px; }
  .story-footer { display: none; }
  .login-access { padding: 24px 30px 26px; }
  .access-box { width: min(100%, 440px); padding: 30px 0; }
  .login-symbol { display: none; }
  .access-box h2 { font-size: 35px; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; width: 255px; transform: translateX(-105%); transition: transform .22s; }
  .app.menu-open .sidebar { transform: none; }
  #menu { display: block; }
  .topbar { padding: 0 18px; }
  .content { padding: 25px 18px 45px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .dashboard-strip { grid-template-columns: 1fr; }
  .dashboard-strip button { border-right: 0; border-bottom: 1px solid var(--line); }
  .dashboard-strip button:last-child { border-bottom: 0; }
  .summary-grid { grid-template-columns: 1fr; }
  .today-panel { display: block; }
  .public-agenda { align-items: flex-start; flex-direction: column; }
  .project-tabs { overflow-x: auto; }
  .project-tabs button { white-space: nowrap; }
  .task-row { grid-template-columns: 22px minmax(0, 1fr) 60px 10px; }
  .task-person { display: none; }
  .calendar-day, .calendar-empty { min-height: 38px; }
  .grid2, .check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .project-grid { grid-template-columns: 1fr; }
  .private { width: 8px; height: 8px; overflow: hidden; padding: 0; font-size: 0; }
  .public-agenda .actions { width: 100%; }
  .public-agenda .actions > * { flex: 1; }
  .calendar-card { padding: 13px; }
  .calendar-day, .calendar-empty { min-height: 34px; }
  .calendar-day span { display: none; }
  .meeting-row { grid-template-columns: 60px minmax(0, 1fr) 15px; gap: 10px; }
}
.meeting-share .success-check{margin:0 auto 10px}.share-summary{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:14px;background:#f7f1f9;color:#52206b}.share-summary span{color:#766c79;font-size:14px}.copy-field{display:flex;gap:8px;margin-top:7px}.copy-field input{min-width:0;flex:1}.copy-field button{white-space:nowrap}.saved-share{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid #e2d5e7;border-radius:12px;background:#faf7fb;color:#52206b;font-size:13px}@media(max-width:620px){.copy-field{flex-direction:column}.copy-field button{width:100%}.saved-share{align-items:stretch;flex-direction:column}}
.danger-button{margin-right:auto;padding:11px 16px;border:1px solid #e5b7bb;border-radius:10px;color:#b52f3b;background:#fff6f7;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.danger-button:hover{border-color:#cf4e56;background:#fff0f1}