@font-face {
  font-family: "Poppins";
  src: url("/brand/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/brand/fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/brand/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/brand/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("/brand/fonts/Quicksand-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("/brand/fonts/Quicksand-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #213354;
  --ink-2: #42506c;
  --muted: #737d94;
  --soft: #a7adbd;
  --line: rgba(33, 51, 84, .12);
  --wash: #f7f5fb;
  --surface: #fff;
  --violet: #640adc;
  --violet-2: #4b08aa;
  --violet-soft: #f0e7fc;
  --mint: #06f59a;
  --mint-dark: #00a56b;
  --sky: #e8f5fb;
  --orange: #f4d896;
  --red: #e44d63;
  --red-soft: #fff0f3;
  --yellow: #e7ae35;
  --navy: #213390;
  --navy-dark: #213354;
  --teal: #33b5b2;
  --shadow-sm: 0 6px 22px rgba(33, 51, 84, .07);
  --shadow-lg: 0 28px 80px rgba(33, 51, 84, .18);
  --radius: 22px;
  --sidebar: 272px;
  font-family: "Poppins", ui-sans-serif, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f9f8ff;
  --ink-2: #d5d5e5;
  --muted: #a7a8bd;
  --soft: #74758d;
  --line: rgba(255, 255, 255, .1);
  --wash: #15142a;
  --surface: #201e38;
  --violet-soft: #342258;
  --sky: #183748;
  --red-soft: #42232e;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .38);
}

body {
  font-family: "Poppins", ui-sans-serif, sans-serif;
  background: var(--wash);
}
h1, h2, h3, h4, .stat-value strong, .brand {
  font-family: "Quicksand", "Poppins", sans-serif;
}

.brand-logo { display: block; width: 100%; height: auto; }
.brand-logo-green { width: 190px; }
.brand-logo-violet { width: 170px; }
.brand-logo-white { width: 176px; }
.brand-mark { display: none; }

/* Authentication */
#particle-field {
  background: #640adc;
}
#particle-field::after {
  background:
    radial-gradient(circle at 12% 18%, rgba(6, 245, 154, .17), transparent 24%),
    linear-gradient(125deg, rgba(33, 51, 144, .12), rgba(100, 10, 220, .3));
}
.auth-shell { grid-template-columns: minmax(480px, 1.14fr) minmax(440px, .86fr); }
.auth-story {
  padding: clamp(34px, 5vw, 72px);
  background: transparent;
}
.auth-story::before {
  width: 410px;
  height: 410px;
  right: -115px;
  bottom: -145px;
  border: 0;
  border-radius: 50% 0 0 0;
  background: var(--mint);
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.auth-story::after {
  content: "";
  position: absolute;
  top: 17%;
  right: 8%;
  width: 112px;
  height: 112px;
  background: #fff;
  clip-path: polygon(50% 0, 59% 35%, 85% 15%, 65% 41%, 100% 50%, 65% 59%, 85% 85%, 59% 65%, 50% 100%, 41% 65%, 15% 85%, 35% 59%, 0 50%, 35% 41%, 15% 15%, 41% 35%);
  opacity: .12;
  transform: rotate(12deg);
}
.story-copy { max-width: 720px; margin: 10vh 0 7vh; }
.story-copy h1 {
  max-width: 720px;
  margin: 22px 0 24px;
  font-size: clamp(54px, 6vw, 92px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.055em;
}
.story-copy h1 em { color: var(--mint); }
.story-copy > p { max-width: 620px; color: rgba(255, 255, 255, .75); font-size: 17px; }
.eyebrow { color: rgba(255, 255, 255, .76); letter-spacing: .12em; }
.eyebrow i { width: 30px; background: var(--mint); }
.story-proof { z-index: 2; }
.avatar-stack span { border-color: #640adc; }
.auth-panel {
  --ink: #213354;
  --ink-2: #42506c;
  --muted: #737d94;
  --soft: #a7adbd;
  --line: rgba(33, 51, 84, .14);
  --surface: #fff;
  padding: 46px;
  border-left: 1px solid rgba(33, 51, 84, .08);
  background: #faf9fd;
  backdrop-filter: none;
}
.auth-card { width: min(500px, 100%); }
.auth-form h2 { margin: 10px 0 10px; color: var(--navy-dark); font-size: clamp(34px, 4vw, 46px); font-weight: 700; }
.form-kicker, .section-kicker { color: var(--violet); font-weight: 700; }
.form-lead { margin-bottom: 34px; color: var(--muted); }
.field { color: var(--navy-dark); font-weight: 600; }
.input-wrap input {
  height: 54px;
  border: 1.5px solid rgba(33, 51, 84, .13);
  border-radius: 15px;
  color: var(--navy-dark);
  background: #fff;
  box-shadow: 0 5px 16px rgba(33, 51, 84, .035);
}
.input-wrap input:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(100, 10, 220, .11); }
.input-wrap > svg { top: 16px; color: var(--teal); }
.auth-form .button-primary {
  color: var(--navy-dark);
  background: var(--mint);
  box-shadow: 0 12px 25px rgba(6, 245, 154, .22);
}
.auth-form .button-primary:hover { background: #00dc88; box-shadow: 0 14px 28px rgba(6, 245, 154, .3); }
.security-note { border-color: rgba(51, 181, 178, .22); color: #637087; background: rgba(51, 181, 178, .07); }
.security-note svg { color: var(--teal); }

/* Navigation */
.sidebar {
  padding: 28px 18px 18px;
  border: 0;
  color: #fff;
  background: var(--navy-dark);
  box-shadow: 12px 0 35px rgba(33, 51, 84, .08);
}
.sidebar-head { min-height: 44px; padding: 0 12px; }
.main-nav { gap: 7px; margin-top: 48px; }
.nav-caption { color: rgba(255, 255, 255, .36); }
.nav-item { min-height: 48px; color: rgba(255, 255, 255, .64); border-radius: 14px; font-size: 13px; }
.nav-item::before { display: none; }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-item.active { color: var(--navy-dark); background: var(--mint); box-shadow: 0 10px 24px rgba(6, 245, 154, .15); }
.nav-item.active svg { stroke-width: 2.2; }
.nav-item b { color: var(--mint); background: rgba(6, 245, 154, .12); }
.nav-item.active b { color: #fff; background: var(--violet); }

/* Meetings */
.meeting-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 310px; margin-bottom: 34px; padding: clamp(30px, 5vw, 58px); overflow: hidden; border-radius: 28px; color: #fff; background: linear-gradient(125deg, #090b17 0%, #18204c 58%, #42247d 100%); box-shadow: 0 26px 55px rgba(9, 11, 23, .18); }
.meeting-hero::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: radial-gradient(circle at center, #fff 1px, transparent 1.5px); background-size: 18px 18px; mask-image: linear-gradient(90deg, transparent, #000); }
.meeting-hero > div { position: relative; z-index: 1; }
.meeting-hero .section-kicker { color: var(--mint); }
.meeting-hero h2 { max-width: 680px; margin: 10px 0 12px; font-family: var(--display); font-size: clamp(34px, 5vw, 58px); line-height: .98; letter-spacing: -.045em; }
.meeting-hero p { max-width: 650px; margin: 0 0 26px; color: rgba(255, 255, 255, .68); font-size: 15px; line-height: 1.7; }
.meeting-hero-art { display: grid; place-items: center; }
.meeting-hero-art span { position: absolute; width: 240px; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .2); border-radius: 44% 56% 61% 39%; transform: rotate(15deg); animation: meeting-orbit 14s linear infinite; }
.meeting-hero-art img { width: 175px; filter: drop-shadow(0 18px 36px rgba(6, 245, 154, .18)); }
@keyframes meeting-orbit { to { transform: rotate(375deg); } }
.meeting-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.meeting-section-head h3 { margin: 4px 0 0; font-size: 23px; }
.meeting-section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.meeting-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.meeting-card { position: relative; overflow: hidden; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease; animation: meeting-card-in .48s both; }
.meeting-card:nth-child(2) { animation-delay: .06s; } .meeting-card:nth-child(3) { animation-delay: .12s; }
.meeting-card:hover { transform: translateY(-6px) scale(1.008); border-color: rgba(100, 10, 220, .32); box-shadow: 0 24px 55px rgba(21, 18, 51, .16); }
@keyframes meeting-card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.meeting-card::after { content: ""; position: absolute; top: -65px; right: -60px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(6, 245, 154, .12), transparent 68%); }
.meeting-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.meeting-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: var(--violet); background: var(--violet-soft); }
.meeting-icon svg { width: 22px; height: 22px; }
.meeting-live { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: var(--muted); background: var(--wash); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.meeting-live i { width: 7px; height: 7px; border-radius: 50%; background: #a4a7b7; }
.meeting-live.is-live { color: #006944; background: rgba(6, 245, 154, .14); }
.meeting-live.is-live i { background: #00a56b; box-shadow: 0 0 0 4px rgba(6, 245, 154, .12); }
.meeting-live.is-live i { animation: live-pulse 1.8s ease-out infinite; }
.meeting-live.is-scheduled { color: #5131a5; background: rgba(100, 10, 220, .1); }
.meeting-live.is-scheduled i { background: var(--violet); }
.meeting-live.is-ended { color: var(--muted); }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 8px rgba(6, 245, 154, 0); } }
.meeting-card h4 { margin: 0 0 7px; font-size: 17px; }
.meeting-code { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.meeting-schedule { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--ink); font-size: 11px; font-weight: 650; }
.meeting-schedule svg { width: 15px; height: 15px; color: var(--violet); }
.meeting-meta { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.meeting-meta span { padding: 6px 9px; border-radius: 9px; color: var(--muted); background: var(--wash); font-size: 10px; font-weight: 750; }
.meeting-card-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; }
.meeting-card-actions .button { min-height: 42px; }
.meeting-ended { opacity: .72; }
.meeting-ended .meeting-icon { color: var(--muted); background: var(--wash); }
.meeting-options { display: grid; gap: 10px; margin: 6px 0 18px; }
.meeting-filter { min-width: 270px; }
.schedule-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 18px; }
.schedule-choice label { position: relative; cursor: pointer; }
.schedule-choice input { position: absolute; opacity: 0; }
.schedule-choice label > span { display: grid; min-height: 108px; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--wash); transition: .2s; }
.schedule-choice svg { grid-row: 1 / 3; align-self: center; width: 22px; height: 22px; color: var(--muted); }
.schedule-choice strong { align-self: end; font-size: 12px; }
.schedule-choice small { align-self: start; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.schedule-choice input:checked + span { border-color: rgba(100, 10, 220, .5); background: var(--violet-soft); box-shadow: 0 0 0 3px rgba(100, 10, 220, .07); transform: translateY(-2px); }
.schedule-choice input:checked + span svg { color: var(--violet); }
.schedule-fields { margin: -4px 0 18px; padding: 17px; border: 1px solid rgba(100, 10, 220, .13); border-radius: 17px; background: linear-gradient(145deg, rgba(100,10,220,.045), rgba(51,181,178,.04)); animation: schedule-open .24s ease-out; }
@keyframes schedule-open { from { opacity: 0; transform: translateY(-7px); } }
.timezone-note { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.timezone-note svg { width: 14px; height: 14px; color: var(--teal); }
.timezone-note strong { color: var(--ink); }
.unlimited-note { display: flex; align-items: center; gap: 10px; margin: 3px 0 0; padding: 11px 13px; border-radius: 12px; color: var(--muted); background: rgba(6, 245, 154, .07); font-size: 9px; line-height: 1.5; }
.unlimited-note svg { width: 17px; height: 17px; flex: none; color: #00a56b; }
.unlimited-note strong { display: block; color: var(--ink); font-size: 10px; }

@media (max-width: 1050px) { .meeting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .meeting-hero { grid-template-columns: 1fr; min-height: auto; }
  .meeting-hero-art { display: none; }
  .meeting-grid { grid-template-columns: 1fr; }
  .meeting-section-head { align-items: start; flex-direction: column; }
  .meeting-filter { width: 100%; min-width: 0; }
  .schedule-choice { grid-template-columns: 1fr; }
}
.sidebar-insight {
  position: relative;
  padding: 20px;
  border: 0;
  color: #fff;
  background: var(--violet);
  overflow: hidden;
}
.sidebar-insight::after {
  content: "";
  position: absolute;
  right: -33px;
  bottom: -35px;
  width: 92px;
  height: 92px;
  border: 14px solid var(--mint);
  border-radius: 50%;
  opacity: .8;
}
.insight-orb { position: relative; z-index: 1; color: var(--navy-dark); background: var(--mint); box-shadow: none; }
.sidebar-insight strong, .sidebar-insight p, .sidebar-insight .mini-progress { position: relative; z-index: 1; }
.sidebar-insight p { color: rgba(255, 255, 255, .7); }
.mini-progress { background: rgba(255, 255, 255, .17); }.mini-progress i { background: var(--mint); }
.profile-button { color: #fff; }
.sidebar .profile-menu { margin-top: auto; }
.profile-button:hover { background: rgba(255, 255, 255, .07); }
.profile-copy small, .profile-button > svg { color: rgba(255, 255, 255, .5); }
.profile-popover { border: 0; background: #fff; }
.profile-popover button { color: var(--navy-dark); }
.profile-popover button:hover { background: var(--violet-soft); }
.avatar { border-radius: 50%; background: var(--violet); }
.sidebar-close { color: #fff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); }

/* Workspace shell */
.app-shell { background: var(--wash); }
.app-shell::before {
  background:
    radial-gradient(circle at 97% 4%, rgba(51,181,178,.12), transparent 16%),
    radial-gradient(circle at 30% 100%, rgba(100,10,220,.06), transparent 20%);
}
.topbar {
  height: 92px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 91%, transparent);
}
.topbar-left p { color: var(--teal); font-weight: 700; }
.topbar-left h1 { color: var(--ink); font-size: 24px; font-weight: 700; }
.global-search { height: 44px; border-color: var(--line); border-radius: 14px; background: var(--wash); }
.global-search:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(100,10,220,.09); }
.icon-button { border-color: var(--line); border-radius: 13px; background: var(--surface); }
.icon-button:hover { color: var(--violet); border-color: rgba(100,10,220,.3); }
.sidebar .sidebar-close { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.sidebar .sidebar-close:hover { color: var(--mint); border-color: rgba(6,245,154,.35); background: rgba(6,245,154,.08); }
.button { border-radius: 13px; }
.button-primary { color: #fff; background: var(--violet); box-shadow: 0 9px 22px rgba(100, 10, 220, .2); }
.button-primary:hover { background: var(--violet-2); box-shadow: 0 12px 28px rgba(100, 10, 220, .26); }
.button-secondary { color: var(--violet); border-color: rgba(100,10,220,.17); background: var(--violet-soft); }
.workspace-content { padding-top: 34px; }

/* Branded overview */
.hero-card {
  min-height: 222px;
  padding: 40px 44px;
  border-radius: 28px;
  background: var(--violet);
  box-shadow: 0 20px 48px rgba(100, 10, 220, .2);
}
.hero-card::before {
  background:
    linear-gradient(90deg, transparent 60%, rgba(33,51,144,.16)),
    radial-gradient(circle at 70% 0%, rgba(6,245,154,.18), transparent 28%);
}
.hero-content h2 { margin: 16px 0 8px; font-size: clamp(34px, 4vw, 50px); font-weight: 700; letter-spacing: -.04em; }
.hero-content p { color: rgba(255,255,255,.75); font-size: 14px; }
.hero-visual { flex-basis: 320px; height: 180px; }
.hero-brand-mark { position: absolute; z-index: 3; top: 26px; right: 40px; display: grid; place-items: center; width: 126px; height: 126px; }
.hero-brand-mark img { width: 100%; filter: drop-shadow(0 16px 20px rgba(33,51,84,.18)); }
.brand-shape { position: absolute; display: block; }
.brand-shape-star { top: 0; left: 45px; width: 52px; height: 52px; background: #fff; clip-path: polygon(50% 0, 59% 35%, 85% 15%, 65% 41%, 100% 50%, 65% 59%, 85% 85%, 59% 65%, 50% 100%, 41% 65%, 15% 85%, 35% 59%, 0 50%, 35% 41%, 15% 15%, 41% 35%); opacity: .92; }
.brand-shape-dots { right: 0; bottom: 4px; width: 66px; height: 38px; background-image: radial-gradient(circle, rgba(255,255,255,.6) 2px, transparent 2.5px); background-size: 13px 13px; }
.brand-shape-wave { left: 40px; bottom: 16px; width: 75px; height: 18px; border-top: 6px solid var(--teal); border-radius: 50%; transform: rotate(-7deg); }
.stats-grid { gap: 18px; margin: 22px 0; }
.stat-card {
  min-height: 128px;
  padding: 22px;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.stat-card::after { right: -32px; bottom: -34px; width: 90px; height: 90px; opacity: .9; }
.stat-icon { width: 34px; height: 34px; border-radius: 11px; }
.stat-value strong { color: var(--ink); font-size: 32px; font-weight: 700; }
.panel { padding: 26px; border: 0; border-radius: 22px; box-shadow: var(--shadow-sm); }
.panel-head h3 { font-size: 20px; font-weight: 700; }
.section-kicker { color: var(--teal); }
.text-button { color: var(--violet); font-weight: 600; }
.upcoming-item { min-height: 66px; }
.priority-bar { width: 5px; height: 30px; }
.upcoming-copy strong { color: var(--ink); font-size: 12px; }
.mini-avatar { border-radius: 50%; }
.progress-ring { width: 162px; height: 162px; background: conic-gradient(var(--violet) calc(var(--pct) * 1%), var(--violet-soft) 0); }
.progress-ring::after { content: ""; position: absolute; top: 3px; right: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--mint); }
.project-mini { border: 0; border-radius: 16px; background: var(--wash); }
.project-mini:hover { border-color: transparent; box-shadow: 0 10px 24px rgba(100,10,220,.1); }
.project-mini > span { color: var(--teal); }
.line-progress { background: rgba(100,10,220,.1); }.line-progress i { background: var(--mint-dark); }

/* Tasks */
.segmented { padding: 5px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.segmented button { min-height: 35px; border-radius: 10px; }
.segmented button.active { color: #fff; background: var(--violet); }
.filter-row select { min-height: 44px; border-color: var(--line); border-radius: 13px; }
.kanban { gap: 18px; }
.kanban-column { min-height: 300px; padding: 14px; border: 0; border-radius: 20px; background: rgba(100, 10, 220, .045); }
.kanban-column:nth-child(2) { background: rgba(51,181,178,.075); }
.kanban-column:nth-child(3) { background: rgba(6,245,154,.08); }
.kanban-head { min-height: 43px; }
.kanban-head h3 { color: var(--ink); font-size: 12px; }
.kanban-head b { border-radius: 50%; color: var(--violet); }
.task-card { padding: 17px; border: 0; border-radius: 17px; box-shadow: var(--shadow-sm); }
.task-card:hover { border-color: transparent; box-shadow: 0 14px 30px rgba(33,51,84,.11); }
.task-card h4 { color: var(--ink); font-size: 13px; }
.priority-pill { border-radius: 20px; }
.status-select { border: 0; border-radius: 10px; background: var(--wash); }
.tiny-button { border-color: var(--line); border-radius: 10px; }
.kanban-empty { min-height: 180px; border-color: rgba(100,10,220,.14); }

/* Projects and people */
.project-grid, .team-grid { gap: 18px; }
.project-card {
  padding: 22px;
  border: 0;
  border-radius: 21px;
  box-shadow: var(--shadow-sm);
}
.project-card::before { height: 5px; }
.project-card:hover { box-shadow: 0 18px 40px rgba(33,51,84,.12); }
.folder-badge { width: 44px; height: 44px; border-radius: 14px; }
.project-card h3 { color: var(--ink); font-size: 17px; }
.role-pill { border-radius: 20px; }
.member-card { padding: 21px; border: 0; border-radius: 20px; box-shadow: var(--shadow-sm); }
.member-head .avatar { width: 48px; height: 48px; border-radius: 50%; }
.member-copy strong { color: var(--ink); font-size: 13px; }

/* Forms and overlays */
.modal-scrim { background: rgba(33, 51, 84, .55); backdrop-filter: blur(7px); }
.modal { width: min(920px, calc(100vw - 48px)); padding: 28px; border: 0; border-radius: 24px; box-shadow: var(--shadow-lg); }
.modal-small { width: min(760px, calc(100vw - 48px)); }
#meeting-modal .modal { width: min(1020px, calc(100vw - 48px)); }
#meeting-modal .meeting-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#meeting-modal .meeting-options .toggle-field { height: 100%; min-height: 82px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); }
#user-form, #password-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
#user-form > .toggle-field, #user-form > .form-error, #user-form > .modal-actions,
#password-form > .form-error, #password-form > .modal-actions { grid-column: 1 / -1; }
.default-password-note, .password-gate-intro { grid-column:1/-1; }
.default-password-note { display:flex; align-items:center; gap:13px; margin-bottom:13px; padding:14px 16px; border:1px solid rgba(51,181,178,.2); border-radius:14px; color:var(--muted); background:rgba(51,181,178,.07); }
.default-password-note>svg { width:20px; height:20px; flex:none; color:var(--teal); }
.default-password-note>span { display:grid; grid-template-columns:auto auto; align-items:center; justify-content:start; gap:4px 10px; }
.default-password-note strong { color:var(--ink); font-size:10px; }
.default-password-note code { padding:4px 8px; border-radius:7px; color:var(--ink); background:var(--surface); font:700 11px ui-monospace,Consolas,monospace; }
.default-password-note small { grid-column:1/-1; font-size:9px; line-height:1.5; }
.password-gate-intro { margin:-5px 0 18px; padding:13px 15px; border-left:3px solid var(--mint); border-radius:4px 12px 12px 4px; color:var(--ink-2); background:rgba(6,245,154,.07); font-size:10px; line-height:1.55; }
.password-confirm-field { grid-column:1/-1; }
#password-modal[data-required="true"] .modal-scrim { cursor:not-allowed; }
.modal-head h2 { color: var(--ink); font-size: 24px; font-weight: 700; }
.modal .field input, .modal .field select, .modal .field textarea { border: 1.5px solid var(--line); border-radius: 13px; background: var(--wash); }
.modal .field input:focus, .modal .field select:focus, .modal .field textarea:focus { border-color: var(--violet); background: var(--surface); box-shadow: 0 0 0 4px rgba(100,10,220,.09); }

@media (max-width: 720px) {
  .modal-layer { align-items: center; padding: 12px; }
  .modal, .modal-small, #meeting-modal .modal { width: min(100%, 560px); max-height: calc(100vh - 24px); border-radius: 20px; }
  #meeting-modal .meeting-options, #user-form, #password-form { grid-template-columns: 1fr; }
  #user-form > .toggle-field, #user-form > .form-error, #user-form > .modal-actions,
  #password-form > .form-error, #password-form > .modal-actions { grid-column: auto; }
}
.status-picker span { border-radius: 12px; }
.status-picker input:checked + span { color: var(--violet); border-color: rgba(100,10,220,.32); background: var(--violet-soft); }
.toast { border: 0; border-radius: 14px; background: var(--navy-dark); }

:root[data-theme="dark"] .sidebar { background: #121227; }
:root[data-theme="dark"] .topbar { background: rgba(21,20,42,.9); }
:root[data-theme="dark"] .kanban-column { background: rgba(100,10,220,.11); }
:root[data-theme="dark"] .kanban-column:nth-child(2) { background: rgba(51,181,178,.1); }
:root[data-theme="dark"] .kanban-column:nth-child(3) { background: rgba(6,245,154,.08); }
:root[data-theme="dark"] .project-mini, :root[data-theme="dark"] .status-select { background: rgba(255,255,255,.05); }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .mobile-brand { margin-bottom: 54px; }
  .sidebar { box-shadow: 16px 0 50px rgba(33,51,84,.28); }
}

@media (max-width: 650px) {
  .auth-panel { padding: 26px 22px; }
  .auth-form h2 { font-size: 34px; }
  .hero-card { min-height: 210px; padding: 30px 26px; }
  .hero-content { max-width: 82%; }
  .hero-content h2 { font-size: 31px; }
  .hero-visual { right: -35px; opacity: .75; }
  .hero-brand-mark { top: 40px; right: 10px; width: 92px; height: 92px; }
  .brand-shape-star { left: 15px; width: 38px; height: 38px; }
  .brand-shape-wave, .brand-shape-dots { display: none; }
  .stats-grid { gap: 11px; }
  .stat-card { min-height: 115px; padding: 16px; }
  .stat-value strong { font-size: 27px; }
  .panel { padding: 20px; }
  .modal { border-radius: 24px 24px 0 0; }
}

/* Responsive density: keep the interface spacious without looking browser-zoomed. */
:root { --sidebar: clamp(228px, 17vw, 252px); }

.brand-logo-green { width: clamp(145px, 11vw, 172px); }
.brand-logo-violet { width: clamp(138px, 10vw, 158px); }
.brand-logo-white { width: clamp(140px, 10vw, 162px); }
.auth-story { padding: clamp(26px, 3.5vw, 52px); }
.story-copy { max-width: 640px; margin: clamp(44px, 7vh, 76px) 0 clamp(34px, 5vh, 58px); }
.story-copy h1 { max-width: 640px; margin: 18px 0 20px; font-size: clamp(42px, 4.7vw, 70px); }
.story-copy > p { max-width: 570px; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.55; }
.auth-panel { padding: clamp(26px, 3vw, 40px); }
.auth-card { width: min(460px, 100%); }
.auth-form h2 { font-size: clamp(29px, 3vw, 38px); }
.form-lead { margin-bottom: 26px; }
.input-wrap input { height: 50px; }
.input-wrap > svg { top: 14px; }

.sidebar { padding: 22px 14px 16px; }
.sidebar-head { min-height: 40px; padding: 0 9px; }
.main-nav { gap: 5px; margin-top: 34px; }
.nav-item { min-height: 43px; padding-inline: 11px; border-radius: 12px; font-size: 12px; }
.sidebar-insight { padding: 16px; }
.topbar { height: 76px; padding-inline: clamp(20px, 3vw, 42px); }
.topbar-left h1 { font-size: clamp(19px, 1.7vw, 22px); }
.global-search { height: 40px; }
.workspace-content { max-width: 1600px; padding: 24px clamp(20px, 3vw, 42px) 48px; }

.hero-card { min-height: 184px; padding: 28px 34px; border-radius: 24px; }
.hero-content h2 { margin: 12px 0 7px; font-size: clamp(28px, 3.2vw, 40px); }
.hero-content p { font-size: 13px; }
.hero-visual { flex-basis: 260px; height: 150px; }
.hero-brand-mark { top: 22px; right: 32px; width: 104px; height: 104px; }
.stats-grid { gap: 14px; margin: 18px 0; }
.stat-card { min-height: 108px; padding: 18px; border-radius: 17px; }
.stat-value strong { font-size: 27px; }
.panel { padding: 21px; border-radius: 19px; }
.panel-head { margin-bottom: 16px; }
.panel-head h3 { font-size: 17px; }
.progress-ring { width: 140px; height: 140px; }

.meeting-hero { grid-template-columns: minmax(0, 1fr) 230px; min-height: 246px; margin-bottom: 26px; padding: clamp(28px, 3.4vw, 42px); border-radius: 24px; }
.meeting-hero h2 { max-width: 620px; font-size: clamp(30px, 3.6vw, 44px); }
.meeting-hero p { margin-bottom: 20px; font-size: 13px; line-height: 1.6; }
.meeting-hero-art span { width: 188px; }
.meeting-hero-art img { width: 138px; }
.meeting-section-head h3 { font-size: 20px; }
.meeting-section-head p { font-size: 12px; }
.meeting-grid { gap: 14px; }
.meeting-card { padding: 19px; border-radius: 18px; }
.meeting-card-head { margin-bottom: 17px; }
.meeting-icon { width: 40px; height: 40px; border-radius: 12px; }
.meeting-icon svg { width: 19px; height: 19px; }
.meeting-card h4 { font-size: 15px; }

.project-grid, .team-grid, .kanban { gap: 14px; }
.project-card, .member-card { padding: 18px; }
.task-card { padding: 14px; }
.view-toolbar { margin-bottom: 18px; }

.modal { width: min(860px, calc(100vw - 48px)); padding: 22px; border-radius: 20px; }
.modal-small { width: min(700px, calc(100vw - 48px)); }
#meeting-modal .modal { width: min(940px, calc(100vw - 48px)); }
.modal-head { margin-bottom: 20px; }
.modal-head h2 { font-size: 21px; }
.modal .field { margin-bottom: 13px; }
.modal-actions { margin-top: 19px; padding-top: 16px; }
#meeting-modal .meeting-options .toggle-field { min-height: 72px; padding: 12px; }
.schedule-choice label > span { min-height: 92px; padding: 13px; }
.schedule-fields { padding: 14px; }

@media (min-width: 1500px) {
  .meeting-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  :root { --sidebar: 228px; }
  .hero-visual { flex-basis: 220px; }
  .meeting-hero { grid-template-columns: minmax(0, 1fr) 190px; }
  .meeting-hero-art span { width: 160px; }
  .meeting-hero-art img { width: 118px; }
}

@media (max-width: 900px) {
  .workspace-content { padding-inline: clamp(16px, 3vw, 28px); }
  .mobile-brand { margin-bottom: 38px; }
  .meeting-hero { grid-template-columns: minmax(0, 1fr) 180px; }
}

@media (max-width: 720px) {
  .meeting-hero { grid-template-columns: 1fr; padding: 25px; }
  .meeting-hero h2 { font-size: clamp(28px, 8vw, 36px); }
  .modal, .modal-small, #meeting-modal .modal { width: min(100%, 540px); padding: 19px; }
}

@media (max-width: 650px) {
  .auth-panel { padding: 22px 18px; }
  .mobile-brand { margin: 6px 0 34px; }
  .auth-form h2 { font-size: 28px; }
  .topbar { height: 68px; }
  .workspace-content { padding: 14px 12px 40px; }
  .hero-card { min-height: 166px; padding: 23px 20px; }
  .hero-content h2 { font-size: 26px; }
  .hero-brand-mark { width: 78px; height: 78px; }
  .stats-grid { gap: 8px; }
  .stat-card { min-height: 96px; padding: 13px; }
  .stat-value strong { font-size: 23px; }
  .panel { padding: 16px; }
  .meeting-card { padding: 17px; }
  .modal { border-radius: 18px; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .auth-story { padding-block: 24px; }
  .story-copy { margin-block: 30px; }
  .story-copy h1 { font-size: clamp(38px, 4.3vw, 60px); }
  .auth-panel { padding-block: 24px; }
  .form-lead { margin-bottom: 20px; }
  .security-note { margin-top: 16px; }
  .topbar { height: 68px; }
  .workspace-content { padding-top: 18px; }
}

/* WE Drive */
.drive-hero, .ticket-hero { display:flex; min-height:190px; align-items:center; justify-content:space-between; gap:28px; margin-bottom:20px; padding:30px 34px; overflow:hidden; border-radius:24px; color:#fff; background:linear-gradient(125deg,#11152b,#263976 62%,#55308e); box-shadow:0 20px 48px rgba(33,51,84,.16); }
.drive-hero h2, .ticket-hero h2 { max-width:680px; margin:8px 0 7px; font-size:clamp(28px,3.2vw,40px); line-height:1.04; }
.drive-hero p, .ticket-hero p { max-width:680px; margin:0; color:rgba(255,255,255,.7); font-size:13px; line-height:1.6; }
.storage-card { display:flex; min-width:260px; align-items:center; gap:15px; padding:14px 17px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(9,11,23,.26); backdrop-filter:blur(12px); }
.storage-card>div:last-child { display:grid; gap:4px; }
.storage-card span { color:rgba(255,255,255,.55); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.storage-card strong { color:#fff; font-size:12px; }
.storage-ring { --used:0; position:relative; display:grid; width:58px; height:58px; flex:none; place-items:center; border-radius:50%; background:conic-gradient(var(--mint) calc(var(--used) * 1%),rgba(255,255,255,.12) 0); }
.storage-ring::before { content:""; position:absolute; inset:6px; border-radius:50%; background:#20284d; }
.storage-ring strong { position:relative; z-index:1; font-size:11px; }
.drive-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.drive-actions, .preview-head-actions { display:flex; align-items:center; gap:8px; }
.drive-breadcrumbs { display:flex; min-width:0; gap:6px; overflow-x:auto; }
.drive-breadcrumbs button { min-height:38px; padding:0 11px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface); font-size:10px; cursor:pointer; white-space:nowrap; }
.drive-breadcrumbs button:last-child { color:var(--violet); border-color:rgba(100,10,220,.2); background:var(--violet-soft); font-weight:700; }
.drive-scope-note { display:flex; align-items:center; gap:9px; margin-bottom:15px; padding:10px 13px; border-radius:11px; color:var(--muted); background:rgba(51,181,178,.07); font-size:9px; }
.drive-scope-note svg { width:16px; height:16px; flex:none; color:var(--teal); }
.drive-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.drive-item { position:relative; min-width:0; padding:17px; border:1px solid var(--line); border-radius:17px; background:var(--surface); box-shadow:var(--shadow-sm); transition:.18s; }
.drive-item,.ticket-card { animation:tool-card-in .32s both; }
.drive-item:nth-child(2),.ticket-card:nth-child(2) { animation-delay:.035s; }
.drive-item:nth-child(3),.ticket-card:nth-child(3) { animation-delay:.07s; }
.drive-item:nth-child(4),.ticket-card:nth-child(4) { animation-delay:.105s; }
@keyframes tool-card-in { from { opacity:0; transform:translateY(8px) scale(.985); } }
.drive-item:hover { transform:translateY(-3px); border-color:rgba(100,10,220,.27); box-shadow:0 15px 32px rgba(33,51,84,.11); }
.drive-item-main { width:100%; padding:0; border:0; color:inherit; background:transparent; text-align:left; cursor:pointer; }
.drive-item-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.drive-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:var(--violet); background:var(--violet-soft); }
.drive-icon svg { width:20px; height:20px; }
.drive-item.folder .drive-icon { color:#007a52; background:#e2faf1; }
.drive-owner { display:grid; width:27px; height:27px; place-items:center; border-radius:50%; color:#fff; font-size:8px; font-weight:700; }
.drive-item h3 { overflow:hidden; margin:18px 0 5px; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.drive-item-meta { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:8px; }
.drive-item-meta i { width:3px; height:3px; border-radius:50%; background:var(--soft); }
.drive-item-actions { display:flex; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.drive-item-actions button { display:inline-flex; height:31px; flex:1; align-items:center; justify-content:center; gap:5px; padding:0 8px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--wash); font-size:8px; font-weight:700; cursor:pointer; }
.drive-item-actions button:hover { color:var(--violet); border-color:rgba(100,10,220,.25); }
.drive-empty { grid-column:1/-1; display:grid; min-height:220px; place-items:center; align-content:center; gap:9px; padding:30px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); background:var(--surface); text-align:center; }
.drive-empty span { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; color:var(--violet); background:var(--violet-soft); }
.drive-empty svg { width:22px; }
.drive-empty strong { color:var(--ink); font-size:13px; }
.drive-empty p { max-width:360px; margin:0; font-size:10px; }
.upload-drop { display:grid; min-height:170px; place-items:center; align-content:center; gap:8px; margin-bottom:16px; padding:22px; border:1.5px dashed rgba(100,10,220,.27); border-radius:17px; color:var(--muted); background:linear-gradient(145deg,rgba(100,10,220,.045),rgba(51,181,178,.04)); text-align:center; cursor:pointer; }
.upload-drop input { position:absolute; width:1px; height:1px; opacity:0; }
.upload-drop>span { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; color:#fff; background:var(--violet); box-shadow:0 10px 24px rgba(100,10,220,.2); }
.upload-drop svg { width:22px; height:22px; }
.upload-drop strong { max-width:100%; overflow:hidden; color:var(--ink); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.upload-drop small { font-size:9px; }
.upload-progress { position:relative; height:35px; overflow:hidden; margin:10px 0; border-radius:9px; color:var(--ink); background:var(--wash); font-size:9px; }
.upload-progress i { display:block; width:38%; height:100%; background:linear-gradient(90deg,var(--mint),var(--teal)); animation:upload-move 1.2s ease-in-out infinite alternate; }
.upload-progress span { position:absolute; inset:0; display:grid; place-items:center; font-weight:700; }
@keyframes upload-move { to { transform:translateX(165%); } }
.drive-preview-modal { width:min(1120px,calc(100vw - 40px)); height:min(780px,calc(100vh - 40px)); max-height:none; display:grid; grid-template-rows:auto 1fr; overflow:hidden; }
.drive-preview-modal .modal-head { align-items:center; margin:0; padding-bottom:17px; }
.drive-preview-content { min-height:0; overflow:auto; padding:18px; border-radius:15px; background:color-mix(in srgb,var(--wash) 86%,var(--surface)); }
.drive-preview-content img { display:block; max-width:100%; max-height:100%; margin:auto; border-radius:12px; box-shadow:0 10px 30px rgba(33,51,84,.12); }
.drive-preview-content iframe { width:100%; height:100%; min-height:520px; border:0; border-radius:12px; background:#fff; }
.drive-preview-content pre,.drive-document-preview { max-width:900px; min-height:100%; margin:0 auto; padding:26px; border-radius:12px; color:#27324b; background:#fff; box-shadow:var(--shadow-sm); font:12px/1.65 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.drive-document-preview { font-family:"Poppins",sans-serif; }
.drive-sheet-tabs { display:flex; gap:6px; margin-bottom:9px; overflow-x:auto; }
.drive-sheet-tabs button { min-height:34px; padding:0 11px; border:0; border-radius:8px; color:var(--muted); background:var(--surface); font-size:9px; cursor:pointer; white-space:nowrap; }
.drive-sheet-tabs button.active { color:#fff; background:var(--violet); }
.drive-sheet-scroll { overflow:auto; border-radius:11px; background:#fff; }
.drive-sheet-scroll table { border-collapse:collapse; min-width:100%; font-size:10px; }
.drive-sheet-scroll td { min-width:100px; max-width:250px; padding:8px 10px; border:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drive-sheet-scroll tr:first-child td { background:var(--violet-soft); font-weight:700; }

/* Tickets */
.ticket-hero { min-height:168px; background:linear-gradient(125deg,#11152b,#332068 68%,#640adc); }
.ticket-hero h2 span { color:var(--mint); }
.ticket-hero>.button { flex:none; color:var(--navy-dark); background:var(--mint); box-shadow:0 12px 28px rgba(6,245,154,.2); }
.tickets-layout { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:14px; min-height:560px; }
.ticket-list-panel,.ticket-thread-panel { overflow:hidden; border:1px solid var(--line); border-radius:19px; background:var(--surface); box-shadow:var(--shadow-sm); }
.ticket-list-head { display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.ticket-list-head h3 { margin:3px 0 0; font-size:16px; }
.ticket-list-head select { min-height:36px; padding:0 28px 0 9px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--wash); font-size:9px; }
.ticket-list { max-height:620px; overflow-y:auto; padding:8px; }
.ticket-card { display:grid; width:100%; gap:8px; padding:13px; border:0; border-radius:12px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.ticket-card:hover,.ticket-card.active { background:var(--violet-soft); }
.ticket-card-head { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.ticket-card h4 { min-width:0; overflow:hidden; margin:0; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.ticket-card p { display:-webkit-box; margin:0; overflow:hidden; color:var(--muted); font-size:9px; line-height:1.45; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ticket-card-foot { display:flex; align-items:center; justify-content:space-between; color:var(--soft); font-size:8px; }
.ticket-status { padding:4px 7px; border-radius:7px; color:#8b6100; background:#fff4d6; font-size:7px; font-weight:800; text-transform:uppercase; }
.ticket-status.answered { color:#006f4b; background:#e2faf1; }
.ticket-status.closed { color:var(--muted); background:var(--wash); }
.ticket-thread-panel { display:grid; grid-template-rows:auto 1fr auto; }
.ticket-thread-empty { grid-row:1/-1; display:grid; place-items:center; align-content:center; gap:8px; padding:30px; color:var(--muted); text-align:center; }
.ticket-thread-empty>span { display:grid; width:54px; height:54px; place-items:center; border-radius:17px; color:var(--violet); background:var(--violet-soft); }
.ticket-thread-empty svg { width:24px; }
.ticket-thread-empty h3 { margin:4px 0 0; color:var(--ink); }
.ticket-thread-empty p { max-width:330px; margin:0; font-size:10px; }
.ticket-thread-head { display:flex; min-height:82px; align-items:center; justify-content:space-between; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); }
.ticket-thread-head h3 { margin:4px 0 3px; font-size:17px; }
.ticket-thread-head p { margin:0; color:var(--muted); font-size:9px; }
.ticket-head-actions { display:flex; align-items:center; gap:7px; }
.ticket-messages { overflow-y:auto; padding:18px; background:color-mix(in srgb,var(--wash) 65%,var(--surface)); }
.ticket-message { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; max-width:84%; margin-bottom:14px; }
.ticket-message.mine { margin-left:auto; grid-template-columns:minmax(0,1fr) 32px; }
.ticket-message.mine .ticket-message-avatar { order:2; }
.ticket-message-avatar { display:grid; width:32px; height:32px; place-items:center; border-radius:10px; color:#fff; font-size:8px; font-weight:700; }
.ticket-message-bubble { padding:11px 13px; border:1px solid var(--line); border-radius:5px 14px 14px; background:var(--surface); }
.ticket-message.mine .ticket-message-bubble { color:#fff; border:0; border-radius:14px 5px 14px 14px; background:var(--violet); }
.ticket-message-bubble header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; }
.ticket-message-bubble strong { font-size:9px; }
.ticket-message-bubble time { color:var(--soft); font-size:7px; }
.ticket-message.mine time { color:rgba(255,255,255,.55); }
.ticket-message-bubble p { margin:0; font-size:10px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.ticket-reply-form { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.ticket-reply-form textarea { min-height:44px; max-height:110px; flex:1; padding:11px 12px; border:1px solid var(--line); outline:0; border-radius:11px; color:var(--ink); background:var(--wash); font:10px/1.4 inherit; resize:vertical; }
.ticket-reply-form textarea:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(100,10,220,.08); }
.ticket-reply-form button { width:44px; flex:none; padding:0; }

@media(max-width:1200px){.drive-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.tickets-layout{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);}}
@media(max-width:900px){.drive-hero{align-items:flex-start;flex-direction:column}.storage-card{width:100%;min-width:0}.drive-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.tickets-layout{grid-template-columns:1fr;}.ticket-list-panel{min-height:280px}.ticket-list{max-height:330px}.ticket-thread-panel{min-height:520px}}
@media(max-width:650px){.drive-hero,.ticket-hero{min-height:auto;align-items:stretch;flex-direction:column;padding:23px 20px}.drive-hero h2,.ticket-hero h2{font-size:28px}.ticket-hero>.button{align-self:flex-start}.drive-toolbar{align-items:stretch;flex-direction:column}.drive-actions{display:grid;grid-template-columns:1fr 1fr}.drive-actions .button{padding-inline:9px}.drive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.drive-item{padding:13px}.drive-item h3{margin-top:13px}.drive-item-actions{flex-direction:column}.drive-scope-note{align-items:flex-start}.drive-preview-modal{width:calc(100vw - 16px);height:calc(100vh - 16px);padding:14px}.preview-head-actions .button{width:39px;padding:0;font-size:0}.preview-head-actions .button svg{width:17px}.drive-preview-content{padding:8px}.drive-preview-content iframe{min-height:100%}.tickets-layout{gap:10px}.ticket-thread-panel{min-height:540px}.ticket-thread-head{align-items:flex-start;flex-direction:column}.ticket-message{max-width:94%}.ticket-reply-form{padding:9px}.modal.drive-preview-modal{border-radius:16px}}
@media(max-width:430px){.drive-grid{grid-template-columns:1fr}.drive-actions{grid-template-columns:1fr}.storage-card{padding:11px 13px}.ticket-list-head{align-items:flex-start;flex-direction:column}.ticket-list-head select{width:100%}.ticket-thread-panel{min-height:500px}.ticket-message{max-width:100%}}
@media(prefers-reduced-motion:reduce){.drive-item,.ticket-card{animation:none}}

/* Legibilidad de acciones y estados sobre superficies oscuras. */
:root[data-theme="dark"] {
  --accent-readable: #c9a7ff;
  --positive-readable: #64edbd;
}
:root[data-theme="dark"] .button-secondary,
:root[data-theme="dark"] .text-button,
:root[data-theme="dark"] .kanban-head b,
:root[data-theme="dark"] .meeting-icon,
:root[data-theme="dark"] .meeting-schedule svg,
:root[data-theme="dark"] .schedule-choice input:checked + span svg,
:root[data-theme="dark"] .status-picker input:checked + span,
:root[data-theme="dark"] .role-pill:not(.member),
:root[data-theme="dark"] .drive-breadcrumbs button:last-child,
:root[data-theme="dark"] .drive-icon,
:root[data-theme="dark"] .drive-item-actions button:hover,
:root[data-theme="dark"] .drive-empty span,
:root[data-theme="dark"] .ticket-thread-empty > span,
:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .tiny-button:hover {
  color: var(--accent-readable);
}
:root[data-theme="dark"] .meeting-live.is-scheduled {
  color: var(--accent-readable);
  background: rgba(154, 96, 255, .16);
}
:root[data-theme="dark"] .meeting-live.is-live,
:root[data-theme="dark"] .role-pill.member {
  color: var(--positive-readable);
}
:root[data-theme="dark"] .modal {
  border: 1px solid rgba(201, 167, 255, .13);
  background: #24213e;
}

/* Perfil, A2F y administración de reuniones */
.avatar { overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.login-two-factor { text-align:center; animation:enter .3s ease both; }
.login-two-factor h3 { margin:16px 0 7px; color:var(--navy-dark); font-size:23px; }
.login-two-factor>p { margin:0 0 22px; color:#6b7184; font-size:13px; line-height:1.6; }
.login-two-factor .field { text-align:left; }
.login-two-factor .text-button { margin:12px auto 0; }
.security-orb,.success-orb { display:grid; width:58px; height:58px; margin:0 auto; place-items:center; border-radius:18px; color:var(--violet); background:var(--violet-soft); }
.security-orb svg,.success-orb svg { width:26px; height:26px; }
.success-orb { color:#008d5b; background:rgba(6,245,154,.16); }
.profile-modal { width:min(980px,calc(100vw - 48px)); }
.profile-settings-grid { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(360px,1.28fr); gap:20px; }
.profile-photo-panel { display:flex; min-height:340px; padding:28px; align-items:center; flex-direction:column; justify-content:center; text-align:center; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,var(--wash),var(--surface)); }
.profile-photo-preview { width:112px; height:112px; border:5px solid var(--surface); box-shadow:0 16px 38px rgba(33,51,84,.17); font-size:28px; }
.profile-photo-panel h3 { margin:21px 0 5px; font-size:18px; }
.profile-photo-panel p { margin:0; color:var(--muted); font-size:11px; }
.profile-photo-actions { display:flex; align-items:center; gap:14px; margin-top:24px; }
.profile-main-panel { display:grid; gap:16px; }
#profile-form { padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.color-picker { display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; }
.color-choice { position:relative; width:35px; height:35px; border:3px solid var(--surface); border-radius:50%; background:var(--choice); box-shadow:0 0 0 1px var(--line); cursor:pointer; transition:.18s; }
.color-choice.active { transform:scale(1.12); box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--choice); }
.security-card { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:22px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#213354,#2f2861); overflow:hidden; }
.security-card-icon { display:grid; width:46px; height:46px; place-items:center; border-radius:14px; color:var(--mint); background:rgba(255,255,255,.09); }
.security-card-icon svg { width:22px; }
.security-card h3 { margin:5px 0; font-size:15px; }.security-card p { margin:0; color:rgba(255,255,255,.66); font-size:10px; line-height:1.45; }.security-card .section-kicker { color:var(--mint); }.security-card .button { border-color:rgba(255,255,255,.2); color:#fff; background:rgba(255,255,255,.08); }
.two-factor-modal { width:min(790px,calc(100vw - 48px)); }
.two-factor-setup-grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:28px; align-items:center; }
.qr-frame { display:grid; padding:13px; place-items:center; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-sm); }.qr-frame img { width:100%; display:block; }
.two-factor-steps h3 { margin:4px 0; font-size:15px; }.two-factor-steps p { margin:0 0 15px; color:var(--muted); font-size:11px; line-height:1.55; }.step-number { color:var(--violet); font-size:9px; font-weight:850; letter-spacing:.14em; }.two-factor-steps code { display:block; padding:10px 12px; border-radius:10px; color:var(--ink); background:var(--wash); font-size:11px; letter-spacing:.08em; overflow-wrap:anywhere; }
#two-factor-enable-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:end; margin-top:22px; }#two-factor-enable-form .field { margin:0; }#two-factor-enable-form .form-error,#two-factor-enable-form .modal-actions { grid-column:1/-1; }
#two-factor-recovery { text-align:center; }#two-factor-recovery h3 { margin:16px 0 7px; font-size:22px; }#two-factor-recovery>p { max-width:520px; margin:0 auto 20px; color:var(--muted); font-size:12px; line-height:1.6; }
.recovery-codes { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:20px 0; }.recovery-codes code { padding:11px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--wash); font-weight:750; letter-spacing:.08em; }
.security-warning { padding:14px 16px; border-radius:13px; color:var(--ink-2); background:var(--wash); font-size:11px; line-height:1.5; }
.meeting-danger-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; padding:16px; border:1px solid rgba(225,72,92,.17); border-radius:14px; background:rgba(225,72,92,.05); }
.meeting-card-actions { grid-template-columns:1fr repeat(4,auto); }

@media(max-width:760px){
  .profile-modal,.two-factor-modal{width:min(100%,560px)}
  .profile-settings-grid,.two-factor-setup-grid{grid-template-columns:1fr}
  .profile-photo-panel{min-height:auto;padding:22px}.profile-photo-preview{width:90px;height:90px}
  .security-card{grid-template-columns:auto 1fr}.security-card .button{grid-column:1/-1}
  #two-factor-enable-form{grid-template-columns:1fr}.recovery-codes{grid-template-columns:1fr}
  .meeting-danger-actions{align-items:stretch;flex-direction:column}
}

:root[data-theme="dark"] .login-two-factor h3 { color:#f4f1ff; }
:root[data-theme="dark"] .security-orb { color:var(--accent-readable); background:rgba(154,96,255,.16); }
:root[data-theme="dark"] .profile-photo-panel { background:linear-gradient(145deg,#211e39,#292546); }
:root[data-theme="dark"] .modal .field > span,
:root[data-theme="dark"] .modal .field > label,
:root[data-theme="dark"] .profile-main-panel .field > span { color:#dcd6ee; }