:root {
  --navy-950: #06111f;
  --navy-900: #081827;
  --navy-850: #0b2035;
  --navy-800: #102a46;
  --blue-600: #2477d4;
  --blue-500: #3f91eb;
  --cyan-400: #69d3db;
  --silver-50: #f7f9fc;
  --silver-100: #eef2f7;
  --silver-200: #dfe6ef;
  --silver-300: #c5cfdb;
  --silver-500: #77869a;
  --ink-900: #142033;
  --ink-700: #34445a;
  --ink-500: #68768a;
  --white: #ffffff;
  --green: #2fa877;
  --amber: #d68a26;
  --red: #df5a67;
  --violet: #7a6ce0;
  --rose: #d6598b;
  --shadow-sm: 0 1px 2px rgba(7, 20, 37, 0.05);
  --shadow-md: 0 14px 35px rgba(7, 20, 37, 0.1);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --sidebar: 248px;
  --rail: 292px;
  --topbar: 74px;
}

[data-theme="dark"] {
  --silver-50: #101b29;
  --silver-100: #0c1724;
  --silver-200: #26384c;
  --silver-300: #34485d;
  --silver-500: #91a0b3;
  --ink-900: #eff4fa;
  --ink-700: #c2cedc;
  --ink-500: #94a4b7;
  --white: #122234;
  --shadow-md: 0 14px 35px rgba(0, 0, 0, 0.25);
}

#cmagnos-root {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 76% -10%, rgba(63, 145, 235, 0.12), transparent 30%),
    var(--silver-100);
  color: var(--ink-900);
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: var(--ink-500);
}

.boot-mark,
.brand-mark {
  display: grid;
  place-items: center;
  color: #eef7ff;
  background: linear-gradient(145deg, #3f91eb, #0f456f);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 10px 24px rgba(36, 119, 212, 0.24);
}

.boot-mark {
  width: 62px;
  height: 62px;
  border-radius: 19px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--rail);
  grid-template-rows: var(--topbar) minmax(0, 1fr);
}

.sidebar {
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  background:
    linear-gradient(180deg, rgba(63, 145, 235, 0.08), transparent 22%),
    var(--navy-950);
  color: #dce7f3;
  z-index: 30;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 7px 22px;
}

.brand-mark {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.brand-copy strong {
  display: block;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.brand-copy span {
  display: block;
  margin-top: 2px;
  color: #7f96ad;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.capture-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 13px;
  color: #f5fbff;
  background: linear-gradient(135deg, var(--blue-600), #1c628f);
  box-shadow: 0 8px 18px rgba(36, 119, 212, 0.2);
  cursor: pointer;
  font-weight: 700;
}

.capture-button:hover {
  filter: brightness(1.08);
}

.sidebar-label {
  margin: 25px 10px 9px;
  color: #647c95;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 4px;
}

.nav-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  color: #9fb0c1;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 620;
}

.nav-item:hover {
  color: #eaf3fb;
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(63, 145, 235, 0.22), rgba(63, 145, 235, 0.06));
  box-shadow: inset 3px 0 0 var(--blue-500);
}

.nav-icon {
  width: 22px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}

.nav-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #cde7ff;
  background: rgba(63, 145, 235, 0.16);
  font-size: 10px;
  text-align: center;
}

.sidebar-spacer {
  flex: 1;
}

.space-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.space-chip {
  min-height: 31px;
  border: 0;
  border-radius: 9px;
  color: #7f96ad;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
}

.space-chip.active {
  color: #eaf6ff;
  background: rgba(63, 145, 235, 0.2);
}

.profile-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 12px 8px 2px;
}

.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #e7f4ff;
  background: linear-gradient(145deg, #274a6c, #122d47);
  font-size: 11px;
  font-weight: 800;
}

.profile-mini strong,
.profile-mini span {
  display: block;
  max-width: 135px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-mini strong {
  color: #dfeaf5;
  font-size: 11px;
}

.profile-mini span {
  margin-top: 2px;
  color: #6f879f;
  font-size: 9px;
}

.topbar {
  grid-column: 2 / -1;
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid var(--silver-200);
  background: color-mix(in srgb, var(--silver-50) 90%, transparent);
  backdrop-filter: blur(18px);
}

.icon-button.mobile-menu {
  display: none;
}

.topbar-title {
  min-width: 175px;
}

.topbar-title strong {
  display: block;
  color: var(--ink-900);
  font-size: 15px;
}

.topbar-title span {
  display: block;
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 10px;
}

.global-search {
  position: relative;
  flex: 1;
  max-width: 590px;
  margin: 0 auto;
}

.global-search input {
  width: 100%;
  height: 40px;
  padding: 0 82px 0 39px;
  border: 1px solid var(--silver-200);
  border-radius: 13px;
  outline: 0;
  color: var(--ink-900);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
}

.global-search input:focus {
  border-color: rgba(63, 145, 235, 0.6);
  box-shadow: 0 0 0 3px rgba(63, 145, 235, 0.1);
}

.search-glyph {
  position: absolute;
  left: 14px;
  top: 10px;
  color: var(--silver-500);
}

.search-shortcut {
  position: absolute;
  right: 9px;
  top: 8px;
  padding: 4px 8px;
  border: 1px solid var(--silver-200);
  border-radius: 7px;
  color: var(--ink-500);
  background: var(--silver-50);
  font-size: 9px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button,
.ghost-button,
.primary-button,
.small-button {
  border: 0;
  cursor: pointer;
}

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--silver-200);
  border-radius: 12px;
  color: var(--ink-700);
  background: var(--white);
}

.icon-button:hover {
  color: var(--blue-600);
  border-color: rgba(63, 145, 235, 0.35);
}

.main-content {
  grid-column: 2;
  min-width: 0;
  padding: 26px 26px 90px;
}

.right-rail {
  grid-column: 3;
  min-width: 0;
  padding: 22px 18px 70px 0;
}

.content-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--blue-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.content-header h1 {
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(25px, 3vw, 35px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.content-header p:last-child {
  margin: 8px 0 0;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.6;
}

.header-actions {
  display: flex;
  gap: 9px;
}

.primary-button,
.ghost-button {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 760;
}

.primary-button {
  color: #f8fbff;
  background: linear-gradient(135deg, var(--blue-600), #1b628e);
  box-shadow: 0 8px 18px rgba(36, 119, 212, 0.18);
}

.ghost-button {
  color: var(--ink-700);
  border: 1px solid var(--silver-200);
  background: var(--white);
}

.primary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 17px;
}

.metric-card,
.panel,
.rail-card {
  border: 1px solid var(--silver-200);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.metric-card {
  min-height: 118px;
  padding: 17px;
  border-radius: var(--radius-md);
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 700;
}

.metric-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(63, 145, 235, 0.1);
  color: var(--blue-600);
  font-size: 14px;
}

.metric-value {
  margin-top: 13px;
  color: var(--ink-900);
  font-size: 26px;
  font-weight: 780;
  letter-spacing: -0.04em;
}

.metric-sub {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 9px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.75fr);
  gap: 17px;
}

.panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.panel-head {
  min-height: 61px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 0 19px;
  border-bottom: 1px solid var(--silver-200);
}

.panel-head h2,
.rail-heading {
  margin: 0;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 760;
}

.panel-head p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9px;
}

.small-button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  font-size: 9px;
  font-weight: 750;
}

.resume-card {
  padding: 23px;
  background:
    linear-gradient(115deg, rgba(63, 145, 235, 0.11), transparent 42%),
    var(--white);
}

.resume-breadcrumb {
  color: var(--blue-600);
  font-size: 9px;
  font-weight: 750;
}

.resume-title {
  margin: 10px 0 7px;
  color: var(--ink-900);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.25;
}

.resume-excerpt {
  max-width: 660px;
  margin: 0;
  color: var(--ink-500);
  font-size: 11px;
  line-height: 1.8;
}

.resume-progress {
  height: 5px;
  margin: 21px 0 10px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--silver-200);
}

.resume-progress span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

.resume-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-500);
  font-size: 9px;
}

.task-list,
.meeting-list,
.page-list,
.search-results {
  display: grid;
}

.task-row,
.meeting-row,
.page-row,
.search-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--silver-200);
}

.task-row:last-child,
.meeting-row:last-child,
.page-row:last-child,
.search-row:last-child {
  border-bottom: 0;
}

.task-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1.5px solid var(--silver-300);
  border-radius: 6px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}

.task-check.checked {
  border-color: var(--green);
  background: var(--green);
}

.task-copy,
.meeting-copy,
.page-copy,
.search-copy {
  min-width: 0;
  flex: 1;
}

.task-copy strong,
.meeting-copy strong,
.page-copy strong,
.search-copy strong {
  display: block;
  overflow: hidden;
  color: var(--ink-900);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-copy span,
.meeting-copy span,
.page-copy span,
.search-copy span {
  display: block;
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 8px;
}

.task-row.done strong {
  color: var(--ink-500);
  text-decoration: line-through;
}

.priority-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.priority-alta {
  background: var(--red);
}

.priority-media {
  background: var(--amber);
}

.priority-baixa {
  background: var(--green);
}

.rail-card {
  margin-bottom: 14px;
  padding: 17px;
  border-radius: var(--radius-md);
}

.rail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.rail-card-head button {
  border: 0;
  color: var(--blue-600);
  background: transparent;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.day-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--silver-200);
}

.day-number {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--navy-800);
  font-size: 18px;
  font-weight: 780;
}

.day-copy strong {
  display: block;
  font-size: 11px;
}

.day-copy span {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 9px;
}

.agenda-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 0 9px 11px;
}

.agenda-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--blue-500);
}

.agenda-item.profissional::before {
  background: var(--green);
}

.agenda-item.estudo::before {
  background: var(--rose);
}

.agenda-item.prazo::before {
  background: var(--red);
}

.agenda-time {
  color: var(--ink-500);
  font-size: 8px;
}

.agenda-copy strong {
  display: block;
  color: var(--ink-900);
  font-size: 9px;
}

.agenda-copy span {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 8px;
}

.focus-card {
  color: #edf7ff;
  border-color: #143857;
  background:
    radial-gradient(circle at 100% 0, rgba(105, 211, 219, 0.16), transparent 40%),
    linear-gradient(145deg, var(--navy-850), var(--navy-950));
}

.focus-card .rail-heading {
  color: #f1f8ff;
}

.focus-card p {
  margin: 8px 0 16px;
  color: #91a8bc;
  font-size: 9px;
  line-height: 1.6;
}

.focus-time {
  margin: 4px 0 15px;
  font-size: 29px;
  font-weight: 760;
  letter-spacing: 0.04em;
}

.focus-card button {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #dff5ff;
  background: rgba(63, 145, 235, 0.18);
  cursor: pointer;
  font-size: 9px;
  font-weight: 750;
}

.workspace-layout {
  min-height: calc(100vh - 170px);
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.page-browser {
  min-width: 0;
  border-right: 1px solid var(--silver-200);
  background: var(--silver-50);
}

.browser-head {
  padding: 16px;
  border-bottom: 1px solid var(--silver-200);
}

.browser-head input,
.form-control,
.quick-add input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  outline: 0;
  color: var(--ink-900);
  background: var(--white);
  font-size: 10px;
}

.browser-head input:focus,
.form-control:focus,
.quick-add input:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(63, 145, 235, 0.1);
}

.page-row {
  cursor: pointer;
  align-items: flex-start;
}

.page-row:hover,
.page-row.active {
  background: rgba(63, 145, 235, 0.07);
}

.page-row.active {
  box-shadow: inset 3px 0 0 var(--blue-500);
}

.page-symbol {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.1);
  font-size: 11px;
}

.editor-pane {
  min-width: 0;
  background: var(--white);
}

.editor-top {
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-bottom: 1px solid var(--silver-200);
  overflow-x: auto;
}

.tool-button {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 720;
}

.tool-button:hover {
  border-color: var(--silver-200);
  background: var(--silver-50);
}

.tool-divider {
  width: 1px;
  height: 19px;
  flex: 0 0 auto;
  background: var(--silver-200);
}

.save-status {
  margin-left: auto;
  min-width: 85px;
  color: var(--ink-500);
  font-size: 8px;
  text-align: right;
  white-space: nowrap;
}

.editor-document {
  max-width: 790px;
  margin: 0 auto;
  padding: 48px 55px 80px;
}

.page-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
}

.meta-pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  font-size: 8px;
  font-weight: 720;
}

.page-title-input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink-900);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 4vw, 41px);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.editor-info {
  display: flex;
  gap: 15px;
  margin: 11px 0 31px;
  color: var(--ink-500);
  font-size: 8px;
}

.rich-editor {
  min-height: 380px;
  outline: 0;
  color: var(--ink-700);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.9;
}

.rich-editor h2 {
  margin: 31px 0 12px;
  color: var(--ink-900);
  font-size: 21px;
  line-height: 1.3;
}

.rich-editor h3 {
  margin: 25px 0 9px;
  color: var(--ink-900);
  font-size: 17px;
}

.rich-editor blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--blue-500);
  border-radius: 0 11px 11px 0;
  color: var(--ink-700);
  background: rgba(63, 145, 235, 0.075);
}

.rich-editor mark {
  padding: 1px 3px;
  border-radius: 3px;
  background: #fff0a8;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: 50px;
  color: var(--ink-500);
  text-align: center;
}

.empty-state strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-900);
  font-size: 15px;
}

.study-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 17px;
}

.progress-list {
  padding: 7px 18px 16px;
}

.progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45px;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--silver-200);
}

.progress-row:last-child {
  border-bottom: 0;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 9px;
}

.progress-label span:last-child {
  color: var(--ink-500);
}

.progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--silver-200);
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

.progress-score {
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}

.review-card {
  margin: 16px;
  padding: 20px;
  border: 1px solid rgba(122, 108, 224, 0.18);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(122, 108, 224, 0.1), transparent);
}

.review-card small {
  color: var(--violet);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.review-card h3 {
  margin: 10px 0 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

.review-card p {
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.7;
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 17px;
}

.calendar {
  padding: 16px;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays span {
  padding: 8px;
  color: var(--ink-500);
  font-size: 8px;
  font-weight: 750;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  min-height: 78px;
  padding: 9px;
  border-top: 1px solid var(--silver-200);
  border-left: 1px solid var(--silver-200);
  color: var(--ink-700);
  font-size: 9px;
}

.calendar-day:nth-child(7n) {
  border-right: 1px solid var(--silver-200);
}

.calendar-day.muted {
  color: var(--silver-300);
}

.calendar-day.today > span:first-child {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-600);
}

.calendar-event {
  display: block;
  margin-top: 5px;
  padding: 4px 5px;
  overflow: hidden;
  border-left: 2px solid var(--green);
  border-radius: 4px;
  color: var(--ink-700);
  background: rgba(47, 168, 119, 0.09);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-add {
  display: flex;
  gap: 8px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--silver-200);
}

.quick-add button {
  flex: 0 0 auto;
}

.section-tabs {
  display: flex;
  gap: 7px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.tab-chip {
  min-height: 31px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--silver-200);
  border-radius: 9px;
  color: var(--ink-500);
  background: var(--white);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.tab-chip.active {
  color: var(--blue-600);
  border-color: rgba(63, 145, 235, 0.35);
  background: rgba(63, 145, 235, 0.08);
}

.meeting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.meeting-card {
  padding: 18px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.meeting-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.meeting-date {
  width: 45px;
  height: 47px;
  display: grid;
  place-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  text-align: center;
}

.meeting-date strong {
  display: block;
  font-size: 16px;
}

.meeting-date span {
  display: block;
  margin-top: 1px;
  font-size: 7px;
  text-transform: uppercase;
}

.meeting-card h3 {
  margin: 0;
  color: var(--ink-900);
  font-size: 12px;
}

.meeting-card p {
  margin: 5px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.6;
}

.meeting-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.meeting-section {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--silver-200);
}

.meeting-section strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-500);
  font-size: 8px;
  text-transform: uppercase;
}

.meeting-section p {
  margin: 0;
  color: var(--ink-700);
}

.search-panel {
  max-width: 850px;
  margin: 0 auto;
}

.search-hero {
  padding: 30px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.search-hero input {
  width: 100%;
  height: 52px;
  padding: 0 17px;
  border: 1px solid var(--silver-200);
  border-radius: 13px;
  outline: 0;
  color: var(--ink-900);
  background: var(--silver-50);
  font-size: 14px;
}

.search-hero input:focus {
  border-color: var(--blue-500);
}

.search-results {
  margin-top: 15px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}

.search-row {
  cursor: pointer;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-card {
  padding: 20px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-md);
  background: var(--white);
}

.settings-card h3 {
  margin: 0 0 6px;
  font-size: 12px;
}

.settings-card p {
  margin: 0 0 17px;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.6;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 11px 0;
  border-top: 1px solid var(--silver-200);
  color: var(--ink-700);
  font-size: 9px;
}

.switch {
  width: 38px;
  height: 22px;
  position: relative;
  border: 0;
  border-radius: 99px;
  background: var(--silver-300);
  cursor: pointer;
}

.switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.switch.on {
  background: var(--blue-600);
}

.switch.on::after {
  transform: translateX(16px);
}

.modal-backdrop,
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 16, 29, 0.7);
  backdrop-filter: blur(10px);
}

.modal-card,
.login-card {
  width: min(100%, 430px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 25px 70px rgba(3, 13, 25, 0.3);
}

.modal-head,
.login-head {
  padding: 22px 23px 18px;
  border-bottom: 1px solid var(--silver-200);
}

.modal-head h2,
.login-head h1 {
  margin: 0;
  color: var(--ink-900);
  font-size: 18px;
}

.modal-head p,
.login-head p {
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.6;
}

.modal-body,
.login-body {
  display: grid;
  gap: 13px;
  padding: 20px 23px 23px;
}

.form-label {
  display: grid;
  gap: 6px;
  color: var(--ink-700);
  font-size: 9px;
  font-weight: 700;
}

.form-control {
  min-height: 42px;
}

textarea.form-control {
  min-height: 90px;
  padding-top: 10px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.login-error,
.notice {
  padding: 10px 12px;
  border-radius: 9px;
  color: #a42f3b;
  background: rgba(223, 90, 103, 0.1);
  font-size: 9px;
  line-height: 1.5;
}

.toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: grid;
  gap: 8px;
}

.toast {
  min-width: 230px;
  max-width: 350px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  color: #eaf5ff;
  background: var(--navy-850);
  box-shadow: var(--shadow-md);
  font-size: 10px;
}

.mobile-bottom {
  display: none;
}

@media (max-width: 1180px) {
  :root {
    --rail: 250px;
    --sidebar: 224px;
  }

  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .study-grid {
    grid-template-columns: 1fr;
  }

  .calendar-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
  }

  .right-rail {
    display: none;
  }

  .topbar {
    grid-column: 2;
  }

  .main-content {
    grid-column: 2;
  }

  .meeting-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --topbar: 64px;
  }

  .app-shell {
    display: block;
    padding-top: var(--topbar);
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(82vw, 294px);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.3);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .topbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    min-height: var(--topbar);
    padding: 0 13px;
  }

  .icon-button.mobile-menu {
    display: grid;
  }

  .topbar-title {
    min-width: 0;
  }

  .topbar-title span,
  .search-shortcut,
  .top-actions .icon-button:first-child {
    display: none;
  }

  .global-search {
    margin: 0;
  }

  .global-search input {
    padding-right: 12px;
  }

  .main-content {
    padding: 18px 13px 92px;
  }

  .content-header {
    align-items: flex-start;
  }

  .content-header p:last-child {
    display: none;
  }

  .header-actions .ghost-button {
    display: none;
  }

  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .metric-card {
    min-height: 105px;
    padding: 14px;
  }

  .dashboard-grid {
    gap: 12px;
  }

  .workspace-layout {
    display: block;
    min-height: 0;
  }

  .page-browser {
    border-right: 0;
    border-bottom: 1px solid var(--silver-200);
  }

  .page-list {
    max-height: 210px;
    overflow-y: auto;
  }

  .editor-document {
    padding: 32px 22px 65px;
  }

  .rich-editor {
    min-height: 300px;
  }

  .calendar {
    padding: 8px;
    overflow-x: auto;
  }

  .calendar-weekdays,
  .calendar-grid {
    min-width: 610px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .mobile-bottom {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(7, 24, 39, 0.94);
    box-shadow: 0 15px 45px rgba(3, 13, 25, 0.25);
    backdrop-filter: blur(16px);
  }

  .mobile-nav-item {
    min-height: 47px;
    display: grid;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 11px;
    color: #7690a9;
    background: transparent;
    font-size: 8px;
  }

  .mobile-nav-item span:first-child {
    font-size: 15px;
  }

  .mobile-nav-item.active {
    color: #e7f5ff;
    background: rgba(63, 145, 235, 0.18);
  }
}

@media (max-width: 430px) {
  .overview-grid {
    grid-template-columns: 1fr 1fr;
  }

  .metric-value {
    font-size: 22px;
  }

  .resume-card {
    padding: 19px;
  }

  .editor-top {
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* CMagnos 2.0 — workspace modular */

:root {
  --paper-beige: #f5efdf;
  --paper-black: #151b23;
  --mint: #2fa877;
  --toolbar-height: 112px;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible {
  outline: 3px solid rgba(63, 145, 235, 0.28);
  outline-offset: 2px;
}

.app-shell.is-wide {
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.app-shell.is-wide .topbar,
.app-shell.is-wide .main-content {
  grid-column: 2;
}

.app-shell.is-wide .main-content {
  padding-right: 22px;
}

.nav-scroll {
  min-height: 0;
  flex: 1;
  margin: 4px -5px 6px 0;
  padding-right: 5px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 150, 173, 0.35) transparent;
}

.nav-scroll .sidebar-label {
  margin-top: 17px;
}

.nav-scroll .nav-item {
  min-height: 38px;
}

.profile-settings {
  width: 31px;
  height: 31px;
  margin-left: auto;
  border: 0;
  border-radius: 9px;
  color: #8fa7be;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.profile-settings:hover {
  color: #fff;
  background: rgba(63, 145, 235, 0.16);
}

.header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.metric-button {
  position: relative;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.metric-button:hover {
  transform: translateY(-3px);
  border-color: rgba(63, 145, 235, 0.35);
  box-shadow: 0 16px 36px rgba(7, 20, 37, 0.12);
}

.metric-arrow {
  position: absolute;
  right: 17px;
  bottom: 13px;
  color: var(--blue-600);
  font-size: 8px;
  font-weight: 800;
  opacity: 0;
  transform: translateX(-4px);
  transition: 0.18s ease;
}

.metric-button:hover .metric-arrow,
.metric-button:focus-visible .metric-arrow {
  opacity: 1;
  transform: translateX(0);
}

.dashboard-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 17px;
}

.mini-module-card {
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--silver-200);
  border-radius: var(--radius-md);
  color: var(--ink-900);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.mini-module-card > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.1);
  font-size: 20px;
}

.mini-module-card.finance > span {
  color: var(--green);
  background: rgba(47, 168, 119, 0.11);
}

.mini-module-card.legal > span {
  color: #8f70dc;
  background: rgba(143, 112, 220, 0.11);
}

.mini-module-card strong,
.mini-module-card small {
  display: block;
}

.mini-module-card strong {
  font-size: 12px;
}

.mini-module-card small {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 9px;
}

.mini-module-card b {
  color: var(--blue-600);
}

.mini-module-card:hover {
  border-color: rgba(63, 145, 235, 0.35);
}

.binder-layout {
  position: relative;
  height: calc(100vh - 172px);
  min-height: 640px;
  display: grid;
  grid-template-columns: 242px minmax(520px, 1fr) 260px;
  border: 1px solid var(--silver-200);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.binder-layout.has-split {
  grid-template-columns: 222px minmax(500px, 1.08fr) minmax(330px, 0.92fr);
}

.binder-tree,
.digital-summary,
.split-viewer {
  min-width: 0;
  min-height: 0;
  background: var(--silver-50);
}

.binder-tree {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--silver-200);
}

.binder-tree-head {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid var(--silver-200);
  background: color-mix(in srgb, var(--white) 80%, transparent);
}

.tree-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.tree-title > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(63, 145, 235, 0.1);
  font-size: 14px;
}

.tree-title strong,
.tree-title small {
  display: block;
}

.tree-title strong {
  font-size: 10px;
}

.tree-title small {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 8px;
}

.compact-search,
.module-search,
.search-page-box {
  position: relative;
  display: block;
}

.compact-search > span,
.module-search > span,
.search-page-box > span {
  position: absolute;
  left: 11px;
  top: 50%;
  z-index: 1;
  color: var(--ink-500);
  transform: translateY(-50%);
}

.compact-search input,
.module-search input,
.search-page-box input,
.filter-row select,
.split-select select,
.module-toolbar select,
.law-browser-head select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  outline: 0;
  color: var(--ink-900);
  background: var(--white);
  font-size: 9px;
}

.compact-search input,
.module-search input,
.search-page-box input {
  padding: 0 11px 0 31px;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.filter-row select,
.module-toolbar select,
.law-browser-head select {
  padding: 0 8px;
}

.space-filters,
.scope-switch,
.filter-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

.space-filters button,
.scope-switch button,
.filter-tabs button {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid var(--silver-200);
  border-radius: 8px;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
}

.space-filters button.active,
.scope-switch button.active,
.filter-tabs button.active {
  color: var(--blue-600);
  border-color: rgba(63, 145, 235, 0.28);
  background: rgba(63, 145, 235, 0.09);
}

.binder-groups {
  min-height: 0;
  padding: 8px;
  overflow: auto;
}

.notebook-group {
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: 11px;
}

.notebook-group[open] {
  border-color: var(--silver-200);
  background: var(--white);
}

.notebook-group summary {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}

.notebook-group summary::-webkit-details-marker {
  display: none;
}

.notebook-group summary:hover {
  background: rgba(63, 145, 235, 0.06);
}

.notebook-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(63, 145, 235, 0.09);
  font-size: 12px;
}

.notebook-group summary strong,
.notebook-group summary small {
  display: block;
}

.notebook-group summary strong {
  overflow: hidden;
  color: var(--ink-900);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-group summary small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-500);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notebook-group summary b {
  min-width: 20px;
  padding: 3px 5px;
  border-radius: 999px;
  color: var(--ink-500);
  background: var(--silver-100);
  font-size: 7px;
  text-align: center;
}

.notebook-actions {
  display: flex;
  gap: 3px;
  padding: 0 7px 6px 43px;
}

.notebook-actions button {
  border: 0;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
}

.notebook-actions button:hover {
  color: var(--blue-600);
}

.notebook-group .page-row {
  width: 100%;
  min-height: 48px;
  display: flex;
  gap: 8px;
  padding: 8px 9px;
  border: 0;
  border-radius: 9px;
  color: var(--ink-900);
  background: transparent;
  text-align: left;
}

.notebook-group .page-row.active {
  background: rgba(63, 145, 235, 0.09);
  box-shadow: inset 3px 0 var(--blue-500);
}

.page-copy {
  min-width: 0;
}

.page-copy strong,
.page-copy span,
.page-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-copy strong {
  font-size: 8.5px;
  line-height: 1.35;
}

.page-copy span {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 7px;
}

.page-copy small {
  margin-top: 2px;
  color: var(--silver-500);
  font-size: 6.5px;
}

.binder-editor {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--silver-100);
}

.editor-commandbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--silver-200);
  background: var(--white);
}

.editor-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-500);
  font-size: 8px;
}

.editor-context strong,
.editor-context small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-context strong {
  color: var(--ink-900);
  font-size: 9px;
}

.scope-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(63, 145, 235, 0.11);
}

.scope-dot.institucional {
  background: #8b72dd;
  box-shadow: 0 0 0 3px rgba(139, 114, 221, 0.11);
}

.editor-primary-actions {
  display: flex;
  gap: 5px;
}

.soft-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--silver-200);
  border-radius: 8px;
  color: var(--ink-700);
  background: var(--white);
  cursor: pointer;
  font-size: 7.5px;
  font-weight: 700;
}

.soft-button span {
  min-width: 16px;
  padding: 2px 4px;
  border-radius: 999px;
  background: var(--silver-100);
  font-size: 6px;
  text-align: center;
}

.primary-button.compact {
  min-height: 30px;
  padding-inline: 10px;
  border-radius: 8px;
  font-size: 8px;
}

.editor-toolbar {
  position: relative;
  z-index: 6;
  min-height: 62px;
  display: flex;
  align-content: center;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--silver-200);
  overflow-x: auto;
  background: color-mix(in srgb, var(--white) 94%, transparent);
  scrollbar-width: thin;
}

.tool-group {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  background: var(--silver-50);
}

.tool-group .tool-button {
  height: 31px;
  min-width: 28px;
  color: var(--ink-700);
}

.tool-button.labeled {
  display: inline-flex;
  grid-auto-flow: column;
  align-items: center;
  gap: 5px;
  padding-inline: 7px;
  white-space: nowrap;
}

.tool-button.labeled span {
  font-size: 7px;
}

.tool-button.active {
  color: #fff;
  border-color: var(--blue-600);
  background: var(--blue-600);
}

.tool-button kbd {
  padding: 1px 3px;
  border-radius: 4px;
  color: inherit;
  background: rgba(127, 150, 173, 0.13);
  font-family: inherit;
  font-size: 5px;
}

.tool-select {
  min-width: 78px;
  display: grid;
  gap: 1px;
  padding: 0 5px;
}

.tool-select.short {
  min-width: 54px;
}

.tool-select > span {
  color: var(--ink-500);
  font-size: 5.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tool-select select {
  min-width: 0;
  height: 20px;
  padding: 0 13px 0 0;
  border: 0;
  outline: 0;
  color: var(--ink-900);
  background: transparent;
  font-size: 7px;
  font-weight: 700;
}

.writer-tools {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border: 1px solid rgba(122, 108, 224, 0.24);
  border-radius: 10px;
  background: rgba(122, 108, 224, 0.07);
}

.writer-tools > span {
  margin-right: 3px;
  color: var(--violet);
  font-size: 7px;
  font-weight: 800;
}

.writer-tools button {
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  color: var(--ink-700);
  background: var(--white);
  cursor: pointer;
  font-size: 6px;
  white-space: nowrap;
}

.editor-scroll {
  min-height: 0;
  flex: 1;
  padding: 24px clamp(16px, 4vw, 45px) 50px;
  overflow: auto;
  background:
    linear-gradient(rgba(63, 145, 235, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 145, 235, 0.022) 1px, transparent 1px),
    var(--silver-100);
  background-size: 22px 22px;
}

.paper {
  width: min(100%, 870px);
  min-height: 900px;
  margin: 0 auto;
  padding: 42px clamp(38px, 7vw, 78px) 52px;
  color: #172334;
  background: #fff;
  box-shadow:
    0 1px 1px rgba(7, 20, 37, 0.04),
    0 18px 48px rgba(7, 20, 37, 0.11);
}

.paper-beige {
  background: var(--paper-beige);
}

.paper-black {
  color: #e7edf4;
  background: var(--paper-black);
}

.paper-black .page-title-input,
.paper-black .rich-editor {
  color: #eef4fb;
}

.paper-black .page-classification label,
.paper-black .editor-info,
.paper-black .paper-footer {
  color: #94a4b7;
}

.page-classification {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(127, 150, 173, 0.17);
  border-radius: 11px;
  background: rgba(127, 150, 173, 0.055);
}

.page-classification label {
  display: grid;
  gap: 3px;
  color: #65758a;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-classification input,
.page-classification select {
  width: 100%;
  height: 25px;
  padding: 0 6px;
  border: 1px solid rgba(127, 150, 173, 0.18);
  border-radius: 6px;
  outline: 0;
  color: inherit;
  background: rgba(255, 255, 255, 0.45);
  font-size: 7px;
  text-transform: none;
}

.paper-black .page-classification input,
.paper-black .page-classification select {
  color: #e7edf4;
  background: rgba(255, 255, 255, 0.04);
}

.page-meta {
  flex-wrap: wrap;
}

.tag.removable,
.tag-add {
  min-height: 23px;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 7px;
}

.tag.removable {
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.08);
}

.tag-add {
  padding: 0 7px;
  color: var(--ink-500);
  border: 1px dashed rgba(127, 150, 173, 0.35);
  background: transparent;
}

.paper .page-title-input {
  min-height: 105px;
  overflow: hidden;
  font-family: "Times New Roman", Georgia, serif;
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.12;
  resize: none;
}

.paper .rich-editor {
  min-height: 560px;
  padding-left: 22px;
  outline: 0;
  color: inherit;
  font-family: Arial, Calibri, sans-serif;
  font-size: 12pt;
  line-height: 1.55;
}

.rich-editor p {
  margin: 0 0 1em;
  text-align: justify;
}

.rich-editor h1,
.rich-editor .title-chapter {
  margin: 1.35em 0 0.7em;
  font-size: 24pt;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.rich-editor h2,
.rich-editor .title-subchapter {
  margin: 1.3em 0 0.65em;
  font-size: 22pt;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.rich-editor h3,
.rich-editor .title-section {
  margin: 1.25em 0 0.6em;
  font-size: 20pt;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.rich-editor h4,
.rich-editor .title-subsection {
  margin: 1.2em 0 0.6em;
  font-size: 18pt;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.rich-editor h5,
.rich-editor .title-item {
  margin: 1.15em 0 0.55em;
  font-size: 16pt;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.rich-editor h6,
.rich-editor .title-subitem {
  margin: 1.1em 0 0.5em;
  font-size: 14pt;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}

.rich-editor blockquote {
  margin: 18px 0;
  padding: 13px 17px;
  border-left: 4px solid var(--blue-500);
  border-radius: 0 9px 9px 0;
  background: rgba(63, 145, 235, 0.07);
}

.rich-editor table,
.legal-text table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
}

.rich-editor th,
.rich-editor td,
.legal-text th,
.legal-text td {
  padding: 8px 10px;
  border: 1px solid rgba(127, 150, 173, 0.35);
  text-align: left;
}

.rich-editor th,
.legal-text th {
  background: rgba(63, 145, 235, 0.08);
}

.check-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 7px 0;
}

.check-line input {
  margin-top: 4px;
}

.annotated-block {
  position: relative;
  min-height: 28px;
}

.annotated-block > p {
  margin: 0 0 1em;
}

.margin-badge,
.margin-comment {
  position: absolute;
  left: -42px;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
  cursor: help;
  font-size: 14px;
  user-select: none;
}

.margin-comment {
  left: -22px;
  width: 20px;
  font-size: 11px;
}

.suggestion {
  position: relative;
  border-radius: 2px;
}

.suggestion::after {
  content: attr(data-suggestion-label);
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 2;
  display: none;
  padding: 3px 5px;
  border-radius: 5px;
  color: #fff;
  background: #1a2a3d;
  font-size: 7px;
  white-space: nowrap;
}

.suggestion:hover::after {
  display: block;
}

.suggestion-incluir {
  color: #18875d;
}

.suggestion-excluir {
  color: #d43c4c;
  text-decoration: line-through;
}

.suggestion-corrigir {
  color: #d43c4c;
  text-decoration: underline;
}

.suggestion-movimentar {
  color: #277bda;
  text-decoration: underline;
}

.suggestion-incrementar {
  color: #db781c;
  text-decoration: underline;
}

.suggestion-averiguar {
  color: #d43c4c;
}

.suggestion-conceituar {
  color: #277bda;
}

.doc-header,
.doc-footer {
  margin: 14px 0;
  padding: 7px 0;
  border-block: 1px solid rgba(127, 150, 173, 0.22);
  color: #68768a;
  font-size: 9pt;
}

.paper-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 35px;
  padding-top: 12px;
  border-top: 1px solid rgba(127, 150, 173, 0.2);
  color: #7a8798;
  font-size: 7px;
}

.toolbar-flyouts {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 111px;
  z-index: 22;
  pointer-events: none;
}

.tool-flyout {
  width: min(390px, calc(100vw - 35px));
  max-height: min(560px, calc(100vh - 210px));
  display: none;
  padding: 12px;
  border: 1px solid var(--silver-200);
  border-radius: 14px;
  overflow: auto;
  background: var(--white);
  box-shadow: 0 22px 65px rgba(7, 20, 37, 0.22);
  pointer-events: auto;
}

.tool-flyout.open {
  display: block;
}

.tool-flyout.wide,
.emoji-flyout {
  width: min(650px, calc(100vw - 35px));
}

.flyout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--silver-200);
}

.flyout-head strong,
.flyout-head small {
  display: block;
}

.flyout-head strong {
  font-size: 10px;
}

.flyout-head small {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 7px;
}

.flyout-head > button {
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 7px;
  color: var(--ink-500);
  background: var(--silver-100);
  cursor: pointer;
}

.color-grid,
.badge-grid,
.emoji-grid,
.template-grid {
  display: grid;
  gap: 6px;
}

.color-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.color-grid button,
.badge-grid button,
.template-grid button {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 8px 5px;
  border: 1px solid var(--silver-200);
  border-radius: 9px;
  color: var(--ink-700);
  background: var(--silver-50);
  cursor: pointer;
}

.color-grid button span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 150, 173, 0.18);
  border-radius: 999px;
}

.color-grid button small,
.badge-grid button small,
.template-grid button small {
  max-width: 100%;
  overflow: hidden;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-section + .badge-section {
  margin-top: 13px;
}

.badge-section h4 {
  margin: 0 0 7px;
  color: var(--ink-500);
  font-size: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.badge-grid button span {
  min-height: 25px;
  font-size: 15px;
}

.emoji-flyout details {
  border-bottom: 1px solid var(--silver-200);
}

.emoji-flyout summary {
  padding: 8px 2px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}

.emoji-grid {
  grid-template-columns: repeat(12, 1fr);
  padding: 5px 0 10px;
}

.emoji-grid button {
  aspect-ratio: 1;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

.emoji-grid button:hover {
  background: var(--silver-100);
}

.template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-grid button span {
  font-size: 19px;
}

.template-grid button strong {
  font-size: 8px;
}

.link-page-list,
.export-list {
  display: grid;
  gap: 5px;
}

.link-page-list button,
.export-list button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--silver-200);
  border-radius: 9px;
  color: var(--ink-700);
  background: var(--silver-50);
  cursor: pointer;
  text-align: left;
}

.link-page-list strong,
.link-page-list small {
  display: block;
}

.link-page-list strong {
  font-size: 8px;
}

.link-page-list small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 7px;
}

.digital-summary,
.split-viewer {
  border-left: 1px solid var(--silver-200);
  overflow: auto;
}

.summary-head,
.split-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--silver-200);
  background: color-mix(in srgb, var(--silver-50) 93%, transparent);
  backdrop-filter: blur(10px);
}

.summary-head strong,
.summary-head small,
.split-head strong,
.split-head small {
  display: block;
}

.summary-head strong,
.split-head strong {
  font-size: 9px;
}

.summary-head small,
.split-head small {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 7px;
}

.summary-head button,
.split-head button {
  width: 27px;
  height: 27px;
  border: 1px solid var(--silver-200);
  border-radius: 8px;
  color: var(--ink-700);
  background: var(--white);
  cursor: pointer;
}

.summary-tabs,
.split-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--silver-200);
  overflow-x: auto;
}

.summary-tabs button,
.split-tabs button {
  min-height: 27px;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
  font-weight: 750;
}

.summary-tabs button.active,
.split-tabs button.active {
  color: var(--blue-600);
  border-color: rgba(63, 145, 235, 0.25);
  background: rgba(63, 145, 235, 0.08);
}

.summary-section {
  padding: 13px;
  border-bottom: 1px solid var(--silver-200);
}

.summary-section h4 {
  margin: 0 0 9px;
  color: var(--ink-500);
  font-size: 7px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.summary-section > p {
  color: var(--ink-500);
  font-size: 8px;
  line-height: 1.55;
}

.toc-list {
  display: grid;
  gap: 3px;
}

.toc-list button {
  min-height: 26px;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-list button:hover {
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.07);
}

.toc-list .level-2 {
  padding-left: 15px;
}

.toc-list .level-3 {
  padding-left: 23px;
}

.toc-list .level-4,
.toc-list .level-5,
.toc-list .level-6 {
  padding-left: 31px;
}

.classification-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.classification-list div {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 7px;
}

.classification-list dt,
.classification-list dd {
  margin: 0;
  font-size: 7px;
}

.classification-list dt {
  color: var(--ink-500);
}

.classification-list dd {
  color: var(--ink-900);
  font-weight: 700;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  cursor: pointer;
}

.comment-card {
  position: relative;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) 18px;
  gap: 7px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--silver-200);
  border-radius: 9px;
  background: var(--white);
}

.comment-card strong,
.comment-card small {
  display: block;
}

.comment-card strong {
  font-size: 7px;
}

.comment-card p {
  margin: 4px 0;
  color: var(--ink-700);
  font-size: 7px;
  line-height: 1.45;
}

.comment-card small {
  color: var(--ink-500);
  font-size: 6px;
}

.comment-card > button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 5px;
  color: var(--ink-500);
  background: var(--silver-100);
  cursor: pointer;
}

.version-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.version-row:hover {
  background: rgba(63, 145, 235, 0.07);
}

.version-row strong,
.version-row small {
  display: block;
}

.version-row strong {
  font-size: 7px;
}

.version-row small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 6px;
}

.split-select {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  color: var(--ink-500);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.split-select select {
  padding: 0 8px;
}

.split-content {
  min-height: calc(100% - 135px);
  padding: 10px;
}

.pdf-viewer {
  width: 100%;
  min-height: 720px;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  background: var(--white);
}

.split-text,
.split-law {
  min-height: 620px;
  padding: 22px;
  border: 1px solid var(--silver-200);
  border-radius: 11px;
  color: #172334;
  background: #fff;
  font-size: 10px;
  line-height: 1.6;
}

.split-law header {
  padding-bottom: 15px;
  border-bottom: 1px solid #e3e8ef;
}

.split-law header span {
  color: #2477d4;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.split-law h2 {
  margin: 7px 0;
  font-family: "Times New Roman", serif;
  font-size: 20px;
}

.split-law .legal-text {
  margin-top: 18px;
}

.official-source-card,
.split-file-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  border: 1px solid var(--silver-200);
  border-radius: 12px;
  color: var(--ink-900);
  background:
    radial-gradient(circle at 90% 10%, rgba(63, 145, 235, 0.15), transparent 36%),
    var(--white);
}

.official-source-card > span {
  color: var(--blue-600);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.official-source-card h3,
.split-file-card h3 {
  margin: 10px 0 6px;
  font-size: 19px;
  line-height: 1.2;
}

.official-source-card p,
.split-file-card p {
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}

.official-source-card .primary-button,
.split-file-card .primary-button {
  margin-top: 16px;
  text-decoration: none;
}

.official-source-card > small {
  margin-top: 12px;
  color: var(--ink-500);
  font-size: 7px;
  line-height: 1.45;
}

.module-toolbar {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  padding: 8px;
  border: 1px solid var(--silver-200);
  border-radius: 14px;
  background: var(--white);
}

.module-search input {
  height: 38px;
}

.module-toolbar select {
  height: 38px;
  padding: 0 10px;
}

.result-count {
  padding-right: 8px;
  color: var(--ink-500);
  font-size: 8px;
  font-weight: 700;
}

.law-link-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 13px;
}

.hierarchy-panel {
  height: fit-content;
  border: 1px solid var(--silver-200);
  border-radius: 17px;
  overflow: hidden;
  background: var(--white);
}

.hierarchy-panel ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px;
  list-style: none;
}

.hierarchy-panel li button {
  width: 100%;
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
  font-size: 7.5px;
  line-height: 1.35;
  text-align: left;
}

.hierarchy-panel li button:hover {
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.07);
}

.hierarchy-panel li span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  font-size: 7px;
  font-weight: 800;
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 11px;
}

.law-link-card {
  position: relative;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--silver-200);
  border-radius: 15px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.source-badge {
  position: absolute;
  top: 11px;
  right: 11px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  font-size: 6px;
  font-weight: 800;
}

.link-card-head {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 9px;
  padding-right: 54px;
}

.link-card-head > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--silver-100);
  font-size: 16px;
}

.link-card-head small,
.link-card-head h3 {
  display: block;
}

.link-card-head small {
  color: var(--blue-600);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.link-card-head h3 {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.35;
}

.law-link-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 14px 0 10px;
}

.law-link-card dl div {
  padding: 7px;
  border-radius: 8px;
  background: var(--silver-50);
}

.law-link-card dt,
.law-link-card dd {
  margin: 0;
  font-size: 7px;
}

.law-link-card dt {
  color: var(--ink-500);
}

.law-link-card dd {
  margin-top: 2px;
  color: var(--ink-900);
  font-weight: 700;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.08);
  font-size: 6.5px;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid var(--silver-200);
}

.card-actions a,
.card-actions button {
  border: 0;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
  font-weight: 700;
  text-decoration: none;
}

.card-actions a:first-child {
  margin-right: auto;
  color: var(--blue-600);
}

.danger-text {
  color: var(--red) !important;
}

.legal-dashboard-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.legal-stat {
  min-height: 63px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--silver-200);
  border-radius: 13px;
  background: var(--white);
}

.legal-stat > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
}

.legal-stat strong,
.legal-stat small {
  display: block;
}

.legal-stat strong {
  font-size: 16px;
}

.legal-stat small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 7px;
}

.legal-workspace {
  height: calc(100vh - 248px);
  min-height: 640px;
  display: grid;
  grid-template-columns: 235px minmax(520px, 1fr) 250px;
  border: 1px solid var(--silver-200);
  border-radius: 19px;
  overflow: hidden;
  background: var(--white);
}

.law-browser {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--silver-200);
  background: var(--silver-50);
}

.law-browser-head {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-bottom: 1px solid var(--silver-200);
}

.law-list {
  min-height: 0;
  padding: 7px;
  overflow: auto;
}

.law-row {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px;
  border: 0;
  border-radius: 10px;
  color: var(--ink-700);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.law-row:hover,
.law-row.active {
  color: var(--ink-900);
  background: rgba(63, 145, 235, 0.08);
}

.law-row.active {
  box-shadow: inset 3px 0 var(--blue-500);
}

.law-row > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.1);
  font-weight: 800;
}

.law-row strong,
.law-row small,
.law-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.law-row strong {
  font-size: 8px;
  white-space: nowrap;
}

.law-row small {
  margin-top: 3px;
  font-size: 7px;
  line-height: 1.35;
}

.law-row em {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 6px;
  font-style: normal;
}

.law-document-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--silver-100);
}

.law-commandbar {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--silver-200);
  overflow-x: auto;
  background: var(--white);
}

.law-commandbar > div {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.law-commandbar > div:first-child {
  display: grid;
}

.law-commandbar span {
  color: var(--ink-500);
  font-size: 6px;
}

.law-commandbar strong {
  font-size: 8px;
}

.law-commandbar button {
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid var(--silver-200);
  border-radius: 7px;
  color: var(--ink-700);
  background: var(--silver-50);
  cursor: pointer;
  font-size: 6.5px;
}

.law-paper {
  position: relative;
  min-height: 0;
  flex: 1;
  padding: 34px clamp(30px, 5vw, 66px) 60px;
  overflow: auto;
  color: #172334;
  background: #fff;
}

.law-title-meta {
  margin-bottom: 28px;
  text-align: center;
}

.law-title-meta > span {
  color: #2477d4;
  font-family: Arial, sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.law-title-meta h1,
.law-title-meta h2 {
  margin: 7px auto;
  font-family: "Courier New", monospace;
}

.law-title-meta h1 {
  max-width: 780px;
  font-size: 20pt;
  line-height: 1.2;
}

.law-title-meta h2 {
  color: #526277;
  font-size: 11pt;
}

.law-title-meta > p {
  max-width: 680px;
  margin: 17px 0 0 auto;
  font-family: "Courier New", monospace;
  font-size: 11pt;
  line-height: 1.45;
  text-align: right;
}

.law-title-meta .chip-row {
  justify-content: center;
  margin-top: 14px;
}

.legal-text {
  outline: 0;
  font-family: "Courier New", monospace;
  font-size: 12pt;
  line-height: 1.65;
}

.legal-text p {
  margin: 0 0 1em;
  text-align: justify;
}

.legal-device {
  position: relative;
}

.legal-device.article {
  margin-top: 1.35em;
}

.legal-device.paragraph {
  padding-left: 22px;
}

.legal-device.item {
  padding-left: 44px;
}

.legal-device.letter {
  padding-left: 66px;
}

.legal-device.subitem {
  padding-left: 88px;
}

.law-margin-badge {
  position: absolute;
  left: -30px;
  top: 0;
  cursor: help;
  font-size: 13px;
}

.law-paper footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 38px;
  padding-top: 12px;
  border-top: 1px solid #dfe6ef;
  color: #77869a;
  font-family: Arial, sans-serif;
  font-size: 7px;
}

.revoked-watermark {
  position: fixed;
  left: 50%;
  top: 52%;
  z-index: 3;
  color: rgba(210, 35, 52, 0.13);
  font-family: Arial, sans-serif;
  font-size: clamp(54px, 8vw, 110px);
  font-weight: 900;
  letter-spacing: 0.08em;
  pointer-events: none;
  transform: translate(-25%, -50%) rotate(-28deg);
}

.law-annotations {
  min-width: 0;
  border-left: 1px solid var(--silver-200);
  overflow: auto;
  background: var(--silver-50);
}

.annotation-legend {
  display: grid;
  gap: 6px;
  padding: 11px;
  border-bottom: 1px solid var(--silver-200);
}

.annotation-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: 7px;
}

.annotation-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.annotation-legend .yellow {
  background: #f1d047;
}

.annotation-legend .blue {
  background: #3f91eb;
}

.annotation-legend .green {
  background: #2fa877;
}

.annotation-list {
  padding: 6px 10px 10px;
}

.annotation-list > p {
  padding: 10px;
  color: var(--ink-500);
  font-size: 8px;
  line-height: 1.55;
}

.law-actions-stack {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-top: 1px solid var(--silver-200);
}

.law-actions-stack button {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--silver-200);
  border-radius: 8px;
  color: var(--ink-700);
  background: var(--white);
  cursor: pointer;
  font-size: 7px;
  text-align: left;
}

.law-highlight-flyout {
  position: absolute;
  left: 15px;
  top: 53px;
  z-index: 15;
}

.scope-switch {
  width: fit-content;
  margin-bottom: 13px;
  padding: 4px;
  border: 1px solid var(--silver-200);
  border-radius: 11px;
  background: var(--white);
}

.scope-switch button {
  border-color: transparent;
}

.finance-metrics,
.habit-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 13px;
}

.finance-metric {
  min-height: 104px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--silver-200);
  border-radius: 15px;
  background: var(--white);
}

.finance-metric span,
.finance-metric strong,
.finance-metric small {
  display: block;
}

.finance-metric span {
  color: var(--ink-500);
  font-size: 8px;
  font-weight: 700;
}

.finance-metric strong {
  margin-top: 10px;
  font-size: clamp(18px, 2.3vw, 25px);
  letter-spacing: -0.04em;
}

.finance-metric small {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 7px;
}

.finance-metric > b {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  font-size: 15px;
}

.finance-metric.income > b {
  color: var(--green);
  background: rgba(47, 168, 119, 0.1);
}

.finance-metric.expense > b,
.finance-metric.debt > b {
  color: var(--red);
  background: rgba(223, 90, 103, 0.1);
}

.finance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 12px;
  margin-bottom: 12px;
}

.bar-chart {
  display: grid;
  gap: 14px;
  padding: 6px 18px 20px;
}

.bar-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 8px;
}

.bar-row strong {
  font-size: 8px;
}

.bar-track {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--silver-100);
}

.bar-track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
}

.due-list {
  display: grid;
  padding: 0 15px 17px;
}

.due-list > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--silver-200);
}

.due-date {
  width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 3px;
  border-radius: 9px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.08);
  font-size: 7px;
  font-weight: 800;
  text-align: center;
}

.due-list strong,
.due-list small {
  display: block;
}

.due-list strong {
  font-size: 8px;
}

.due-list small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 7px;
}

.due-list b {
  font-size: 8px;
}

.finance-table-panel {
  overflow: hidden;
}

.data-table-wrap {
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--silver-200);
  text-align: left;
  white-space: nowrap;
}

.data-table th {
  color: var(--ink-500);
  background: var(--silver-50);
  font-size: 7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table td strong,
.data-table td small {
  display: block;
}

.data-table td small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 6.5px;
}

.kind-pill,
.status-pill,
.scope-pill {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  font-size: 6.5px;
  font-weight: 750;
}

.kind-pill.receita,
.status-pill.pago,
.status-pill.recebido {
  color: #1f855f;
  background: rgba(47, 168, 119, 0.11);
}

.kind-pill.despesa,
.kind-pill.divida,
.status-pill.atrasado {
  color: #c53f50;
  background: rgba(223, 90, 103, 0.1);
}

.status-pill.pendente {
  color: #b7751d;
  background: rgba(214, 138, 38, 0.11);
}

.money-cell {
  font-weight: 800;
}

.row-menu {
  margin-right: 5px;
  border: 0;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
}

.habit-metric {
  min-height: 87px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--silver-200);
  border-radius: 15px;
  background: var(--white);
}

.habit-metric > span {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.09);
  font-size: 17px;
}

.habit-metric small,
.habit-metric strong,
.habit-metric em {
  display: block;
  font-style: normal;
}

.habit-metric small {
  color: var(--ink-500);
  font-size: 7px;
}

.habit-metric strong {
  margin-top: 4px;
  font-size: 18px;
}

.habit-metric em {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 6.5px;
}

.habit-week-head {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(380px, 0.95fr);
  align-items: end;
  gap: 15px;
  margin: 19px 0 9px;
}

.habit-week-head h2 {
  margin: 0;
  font-size: 15px;
}

.habit-week-head p {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: 8px;
}

.week-legend {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.week-legend span {
  display: grid;
  gap: 3px;
  place-items: center;
  color: var(--ink-500);
  font-size: 6px;
  text-transform: uppercase;
}

.week-legend b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink-700);
  background: var(--white);
  font-size: 7px;
}

.week-legend .today b {
  color: #fff;
  background: var(--blue-600);
}

.habit-list {
  display: grid;
  gap: 8px;
}

.habit-card {
  position: relative;
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(380px, 0.95fr) 70px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 13px 12px 18px;
  border: 1px solid var(--silver-200);
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}

.habit-color {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.habit-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.habit-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.08);
  font-size: 16px;
}

.habit-title-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.habit-title-line h3 {
  margin: 0;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-pill {
  color: var(--violet);
  background: rgba(122, 108, 224, 0.09);
}

.habit-main p,
.habit-main small {
  margin: 0;
  color: var(--ink-500);
  font-size: 7px;
}

.habit-main p {
  margin-top: 4px;
}

.habit-main small {
  display: block;
  margin-top: 3px;
}

.habit-check-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.habit-check-grid button {
  aspect-ratio: 1;
  min-width: 29px;
  border: 1px solid var(--silver-200);
  border-radius: 9px;
  color: var(--ink-500);
  background: var(--silver-50);
  cursor: pointer;
  font-size: 7px;
  font-weight: 800;
}

.habit-check-grid button.done {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 5px 12px rgba(47, 168, 119, 0.2);
}

.habit-score {
  text-align: center;
}

.habit-score strong,
.habit-score span {
  display: block;
}

.habit-score strong {
  font-size: 13px;
}

.habit-score span {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 6px;
}

.habit-card-actions {
  display: grid;
  gap: 3px;
}

.habit-card-actions button {
  border: 0;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
}

.subject-list,
.quick-links {
  display: grid;
  gap: 5px;
  padding: 0 14px 16px;
}

.subject-list button,
.quick-links button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  color: var(--ink-700);
  background: var(--silver-50);
  cursor: pointer;
  font-size: 8px;
  text-align: left;
}

.quick-links button {
  grid-template-columns: 25px minmax(0, 1fr);
}

.rail-events > div {
  align-items: flex-start;
}

.rail-events strong,
.rail-events small {
  display: block;
}

.rail-events small {
  margin-top: 3px;
  color: var(--ink-500);
}

.subject-list strong,
.subject-list small {
  display: block;
}

.subject-list strong {
  font-size: 8px;
}

.subject-list small {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 7px;
}

.focus-large {
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 280px;
  padding: 28px;
  color: #eaf4fd;
  background:
    radial-gradient(circle at 70% 0, rgba(63, 145, 235, 0.28), transparent 40%),
    var(--navy-900);
  text-align: center;
}

.focus-large > span {
  color: #8aa0b5;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.focus-large p {
  color: #8fa4b8;
  font-size: 8px;
}

.agenda-panel {
  overflow: hidden;
}

.agenda-list {
  display: grid;
}

.agenda-list article {
  display: grid;
  grid-template-columns: 42px 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-top: 1px solid var(--silver-200);
}

.agenda-date {
  width: 38px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 5px;
  border-radius: 10px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.08);
}

.agenda-date strong,
.agenda-date span {
  display: block;
  text-align: center;
}

.agenda-date strong {
  font-size: 13px;
}

.agenda-date span {
  font-size: 6px;
  text-transform: uppercase;
}

.agenda-time {
  font-size: 8px;
  font-weight: 800;
}

.agenda-time span {
  display: block;
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 6.5px;
  font-weight: 400;
}

.agenda-list article > div:nth-child(3) strong {
  font-size: 9px;
}

.agenda-list article > div:nth-child(3) p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 7px;
}

.row-actions {
  display: flex;
  gap: 5px;
}

.row-actions button {
  border: 0;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
}

.quick-calendar {
  padding-bottom: 18px;
  text-align: center;
}

.today-ring {
  width: 105px;
  height: 105px;
  display: grid;
  place-content: center;
  margin: 12px auto 17px;
  border: 10px solid rgba(63, 145, 235, 0.1);
  border-top-color: var(--blue-500);
  border-radius: 999px;
}

.today-ring strong,
.today-ring span {
  display: block;
}

.today-ring strong {
  font-size: 24px;
}

.today-ring span {
  color: var(--ink-500);
  font-size: 7px;
}

.task-module {
  overflow: hidden;
}

.meeting-body .card-actions {
  margin-top: 12px;
}

.upload-dropzone {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 13px;
  padding: 20px;
  border: 1px dashed rgba(63, 145, 235, 0.4);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 0, rgba(63, 145, 235, 0.08), transparent 55%),
    var(--white);
}

.upload-dropzone > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.1);
  font-size: 20px;
}

.upload-dropzone strong,
.upload-dropzone p {
  display: block;
}

.upload-dropzone strong {
  font-size: 10px;
}

.upload-dropzone p {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: 7px;
}

.upload-dropzone button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--silver-200);
  border-radius: 9px;
  color: var(--ink-700);
  background: var(--white);
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
}

.file-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 17px 0 9px;
}

.file-toolbar strong {
  font-size: 12px;
}

.file-toolbar span {
  color: var(--ink-500);
  font-size: 7px;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.file-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--silver-200);
  border-radius: 14px;
  background: var(--white);
}

.file-icon {
  width: 44px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 8px 8px 12px 12px;
  color: #d64755;
  background: rgba(223, 90, 103, 0.1);
  font-size: 8px;
  font-weight: 900;
}

.file-card h3 {
  margin: 3px 0 0;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-card p {
  margin: 4px 0 8px;
  color: var(--ink-500);
  font-size: 7px;
}

.file-card-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--silver-200);
}

.file-card-actions button,
.file-card-actions a {
  border: 0;
  color: var(--ink-500);
  background: transparent;
  cursor: pointer;
  font-size: 7px;
  font-weight: 700;
  text-decoration: none;
}

.file-card-actions button:first-child {
  color: var(--blue-600);
}

.search-page-box {
  max-width: 800px;
  margin: 0 auto 24px;
}

.search-page-box input {
  height: 54px;
  padding-left: 42px;
  border-radius: 16px;
  font-size: 12px;
  box-shadow: var(--shadow-md);
}

.search-page-box > span {
  left: 16px;
  font-size: 18px;
}

.search-groups {
  max-width: 900px;
  display: grid;
  gap: 22px;
  margin: 0 auto;
}

.search-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.search-group-title h2 {
  margin: 0;
  font-size: 13px;
}

.search-group-title span {
  min-width: 25px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--ink-500);
  background: var(--white);
  font-size: 7px;
  text-align: center;
}

.search-result {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  padding: 9px 11px;
  border: 1px solid var(--silver-200);
  border-radius: 11px;
  color: var(--ink-700);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.search-result > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--blue-600);
  background: rgba(63, 145, 235, 0.08);
}

.search-result strong,
.search-result small {
  display: block;
}

.search-result strong {
  font-size: 9px;
}

.search-result small {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 7px;
}

.modal-card {
  width: min(720px, calc(100vw - 24px));
  max-height: min(820px, calc(100dvh - 24px));
  overflow: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid .wide {
  grid-column: 1 / -1;
}

.modal-card form {
  display: grid;
  gap: 13px;
  padding: 17px;
}

.modal-card label {
  display: grid;
  gap: 6px;
  color: var(--ink-700);
  font-size: 8px;
  font-weight: 750;
}

.modal-card input,
.modal-card select,
.modal-card textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--silver-200);
  border-radius: 10px;
  outline: 0;
  color: var(--ink-900);
  background: var(--white);
  font-size: 9px;
}

.modal-card textarea {
  min-height: 88px;
  resize: vertical;
}

.modal-card .large-textarea {
  min-height: 250px;
  font-family: "Courier New", monospace;
}

.check-label {
  display: flex !important;
  grid-column: 1 / -1;
  grid-template-columns: 18px 1fr;
  align-items: flex-start;
  gap: 8px !important;
  padding: 10px;
  border-radius: 9px;
  background: var(--silver-50);
  line-height: 1.45;
}

.check-label input {
  width: 16px;
  min-height: 16px;
  margin: 1px 0 0;
}

.day-selector {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day-selector label {
  display: block;
}

.day-selector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.day-selector span {
  min-height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid var(--silver-200);
  border-radius: 8px;
  color: var(--ink-500);
  background: var(--silver-50);
  cursor: pointer;
  font-size: 7px;
  text-transform: uppercase;
}

.day-selector input:checked + span {
  color: #fff;
  border-color: var(--blue-600);
  background: var(--blue-600);
}

.login-brand .brand-mark.large {
  width: 54px;
  height: 54px;
  border-radius: 17px;
}

@media (max-width: 1450px) {
  :root {
    --sidebar: 220px;
  }

  .binder-layout {
    grid-template-columns: 215px minmax(480px, 1fr) 225px;
  }

  .binder-layout.has-split {
    grid-template-columns: 205px minmax(470px, 1fr) minmax(310px, 0.82fr);
  }

  .legal-workspace {
    grid-template-columns: 215px minmax(470px, 1fr) 225px;
  }

  .page-classification {
    grid-template-columns: repeat(3, 1fr);
  }

  .habit-card {
    grid-template-columns: minmax(230px, 1fr) minmax(330px, 0.9fr) 65px auto;
  }
}

@media (max-width: 1180px) {
  .app-shell.is-wide {
    grid-template-columns: 205px minmax(0, 1fr);
  }

  .app-shell.is-wide .topbar,
  .app-shell.is-wide .main-content {
    grid-column: 2;
  }

  .binder-layout,
  .binder-layout.has-split {
    grid-template-columns: 205px minmax(0, 1fr);
  }

  .digital-summary,
  .split-viewer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 18;
    width: min(370px, 46vw);
    border-left: 1px solid var(--silver-200);
    box-shadow: -18px 0 50px rgba(7, 20, 37, 0.14);
  }

  .legal-workspace {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .law-annotations {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: 240px;
    box-shadow: -12px 0 40px rgba(7, 20, 37, 0.12);
  }

  .legal-workspace {
    position: relative;
  }

  .finance-metrics,
  .habit-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .habit-week-head {
    grid-template-columns: 1fr;
  }

  .habit-card {
    grid-template-columns: minmax(230px, 1fr) minmax(330px, 1fr) 62px;
  }

  .habit-card-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }

  .file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .app-shell.is-wide {
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
  }

  .dashboard-mini-grid {
    grid-template-columns: 1fr;
  }

  .law-link-layout {
    grid-template-columns: 1fr;
  }

  .hierarchy-panel ol {
    grid-template-columns: repeat(2, 1fr);
  }

  .legal-dashboard-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .finance-grid {
    grid-template-columns: 1fr;
  }

  .habit-card {
    grid-template-columns: 1fr;
  }

  .habit-check-grid {
    max-width: 480px;
  }

  .habit-score {
    position: absolute;
    right: 14px;
    top: 16px;
  }
}

@media (max-width: 720px) {
  .app-shell.is-wide {
    display: block;
  }

  .app-shell.is-wide .main-content {
    padding-right: 13px;
  }

  .content-header {
    gap: 10px;
  }

  .content-header h1 {
    font-size: 24px;
  }

  .header-actions {
    max-width: 52%;
  }

  .header-actions button {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 8px;
  }

  .dashboard-mini-grid {
    display: grid;
  }

  .binder-layout,
  .binder-layout.has-split {
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }

  .binder-tree {
    max-height: 285px;
    border-right: 0;
    border-bottom: 1px solid var(--silver-200);
  }

  .binder-groups {
    min-height: 130px;
  }

  .binder-editor {
    min-height: 680px;
  }

  .editor-commandbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-primary-actions {
    width: 100%;
    overflow-x: auto;
  }

  .editor-primary-actions button {
    flex: 0 0 auto;
  }

  .editor-toolbar {
    position: sticky;
    top: var(--topbar);
    min-height: 54px;
  }

  .editor-scroll {
    padding: 12px 0 35px;
  }

  .paper {
    min-height: 650px;
    padding: 27px 25px 42px;
    box-shadow: none;
  }

  .page-classification {
    grid-template-columns: 1fr 1fr;
  }

  .paper .rich-editor {
    min-height: 380px;
    padding-left: 18px;
    font-size: 11pt;
  }

  .rich-editor h1,
  .rich-editor .title-chapter {
    font-size: 20pt;
  }

  .rich-editor h2,
  .rich-editor .title-subchapter {
    font-size: 18pt;
  }

  .rich-editor h3,
  .rich-editor .title-section {
    font-size: 17pt;
  }

  .digital-summary,
  .split-viewer {
    position: fixed;
    left: 10px;
    right: 10px;
    top: calc(var(--topbar) + 8px);
    bottom: 76px;
    width: auto;
    z-index: 50;
    border: 1px solid var(--silver-200);
    border-radius: 16px;
  }

  .toolbar-flyouts {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(var(--topbar) + 60px);
    z-index: 60;
  }

  .tool-flyout,
  .tool-flyout.wide,
  .emoji-flyout {
    width: 100%;
    max-height: calc(100dvh - 155px);
  }

  .badge-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .emoji-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .module-toolbar {
    grid-template-columns: 1fr;
  }

  .link-grid {
    grid-template-columns: 1fr;
  }

  .hierarchy-panel ol {
    grid-template-columns: 1fr;
  }

  .legal-workspace {
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
  }

  .law-browser {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--silver-200);
  }

  .law-list {
    min-height: 130px;
  }

  .law-document-pane {
    min-height: 650px;
  }

  .law-commandbar {
    position: sticky;
    top: var(--topbar);
    z-index: 8;
  }

  .law-paper {
    min-height: 600px;
    padding: 28px 25px 48px;
  }

  .law-annotations {
    position: static;
    width: auto;
    max-height: 380px;
    border-left: 0;
    border-top: 1px solid var(--silver-200);
    box-shadow: none;
  }

  .revoked-watermark {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-28deg);
  }

  .finance-metrics,
  .habit-metrics,
  .legal-dashboard-strip {
    grid-template-columns: 1fr 1fr;
  }

  .finance-metric {
    min-height: 92px;
    padding: 13px;
  }

  .finance-metric strong {
    font-size: 18px;
  }

  .habit-week-head {
    overflow-x: auto;
  }

  .week-legend {
    min-width: 420px;
  }

  .habit-card {
    padding: 14px 13px 14px 18px;
  }

  .habit-check-grid {
    min-width: 0;
  }

  .file-grid {
    grid-template-columns: 1fr;
  }

  .upload-dropzone {
    align-items: flex-start;
    flex-direction: column;
  }

  .file-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .wide {
    grid-column: auto;
  }

  .day-selector {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 430px) {
  .finance-metrics,
  .habit-metrics,
  .legal-dashboard-strip {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 112px;
  }

  .page-classification {
    grid-template-columns: 1fr;
  }

  .paper {
    padding-inline: 20px;
  }

  .badge-grid,
  .template-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .emoji-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .color-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .law-title-meta h1 {
    font-size: 16pt;
  }

  .legal-text {
    font-size: 10.5pt;
  }

  .legal-device.paragraph {
    padding-left: 12px;
  }

  .legal-device.item {
    padding-left: 24px;
  }

  .legal-device.letter {
    padding-left: 36px;
  }

  .legal-device.subitem {
    padding-left: 48px;
  }

  .habit-check-grid button {
    min-width: 0;
  }
}