:root {
  color-scheme: light;
  --ink: #18302b;
  --muted: #6a7772;
  --line: #dbe4de;
  --canvas: #f7faf7;
  --surface: #ffffff;
  --green: #0f6d54;
  --green-dark: #07513e;
  --coral: #dc684e;
  --gold: #e6ad29;
  --soft-green: #e7f4ed;
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-size: 16px;
  line-height: 1.45;
}

a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }

.auth-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr);
}

.auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px clamp(28px, 6vw, 86px);
  color: #f5fffa;
  background: var(--ink);
}

.brand { font-size: 1.65rem; font-weight: 780; letter-spacing: 0; text-decoration: none; }
.brand-mark { color: #78dbad; }
.auth-aside h1 { max-width: 470px; margin: 0; font-size: clamp(2.4rem, 4vw, 4.5rem); line-height: 1.02; letter-spacing: 0; }
.auth-aside p { max-width: 380px; margin: 14px 0 0; color: #bfd2c9; font-size: 1.05rem; }
.aside-note { color: #9fb6ab; font-size: .87rem; }

.auth-main { display: grid; place-items: center; padding: 36px 24px; }
.auth-card { width: min(100%, 430px); }
.eyebrow { margin: 0 0 10px; color: var(--green); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-card h2 { margin: 0; font-size: 2rem; letter-spacing: 0; }
.auth-card > p { margin: 8px 0 28px; color: var(--muted); }

.form-stack { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; font-weight: 650; }
.field input { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; background: var(--surface); outline: none; }
.field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 109, 84, .13); }
.field-hint { margin: -8px 0 0; color: var(--muted); font-size: .84rem; }
.form-message { margin: 0; padding: 11px 12px; border-radius: 6px; background: #fff0eb; color: #9b321d; font-size: .92rem; }
.form-message[data-kind="success"] { background: var(--soft-green); color: var(--green-dark); }
.primary-button { min-height: 48px; border: 0; border-radius: 6px; color: #fff; background: var(--green); font-weight: 750; }
.primary-button:hover { background: var(--green-dark); }
.form-footer { margin: 22px 0 0; color: var(--muted); text-align: center; }
.text-link { color: var(--green); font-weight: 750; }

.app-shell { min-height: 100vh; opacity: 0; transition: opacity .16s ease; }
.is-ready .app-shell { opacity: 1; }
.app-rail { position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 232px; padding: 27px 16px 18px; border-right: 1px solid #264138; color: #ecf8f1; background: var(--ink); }
.app-rail .brand { padding: 0 10px; }
.workspace-name { margin: 38px 10px 12px; color: #a6c0b4; font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.app-nav { display: grid; gap: 3px; }
.app-nav a { padding: 10px; border-radius: 6px; color: #c3d8ce; text-decoration: none; }
.app-nav a:hover, .app-nav a[aria-current="page"] { color: #fff; background: #294d40; }
.rail-bottom { margin-top: auto; }
.account-link { display: grid; gap: 2px; padding: 10px; border-top: 1px solid #315445; color: #fff; font-size: .9rem; }
.account-link span { overflow: hidden; color: #b7cfc3; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }

.app-content { min-height: 100vh; margin-left: 232px; padding: 34px clamp(24px, 5vw, 76px); }
.page-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.page-top h1 { margin: 0; font-size: clamp(2rem, 3.2vw, 3.1rem); letter-spacing: 0; line-height: 1.08; }
.page-top p { max-width: 640px; margin: 10px 0 0; color: var(--muted); }
.ghost-button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: transparent; font-weight: 700; }
.ghost-button:hover { border-color: var(--green); color: var(--green); }

.status-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 3px solid var(--green); background: var(--surface); box-shadow: 0 1px 2px rgba(20, 45, 36, .06); }
.status-item { min-height: 114px; padding: 21px 24px; border-right: 1px solid var(--line); }
.status-item:last-child { border: 0; }
.status-item small { display: block; margin-bottom: 6px; color: var(--muted); font-size: .77rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.status-item strong { font-size: 1.25rem; }
.status-item .ready { color: var(--green); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 42px 0 15px; }
.section-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: 0; }
.section-head span { color: var(--muted); font-size: .9rem; }
.empty-panel { display: grid; gap: 10px; min-height: 210px; place-content: center start; padding: 30px; border: 1px dashed #afc9bb; border-radius: var(--radius); background: #fbfdfb; }
.empty-panel h2 { margin: 0; font-size: 1.25rem; }
.empty-panel p { max-width: 480px; margin: 0; color: var(--muted); }
.empty-symbol { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #b9d6c6; border-radius: 6px; color: var(--green); font-size: 1.35rem; }
.account-panel { max-width: 660px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.account-panel h2 { margin: 0 0 8px; font-size: 1.15rem; }
.account-panel p { margin: 0; color: var(--muted); }
.account-email { display: inline-block; margin-top: 16px; color: var(--ink); font-weight: 750; }
.project-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.project-toolbar p { margin: 0; color: var(--muted); }
.project-toolbar strong { color: var(--ink); }
.compact-button { min-height: 40px; padding: 8px 14px; }
.project-create { display: grid; gap: 16px; max-width: 620px; margin: 0 0 22px; padding: 22px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--surface); }
.project-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.project-list { display: grid; border-top: 1px solid var(--line); }
.project-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 8px; border-bottom: 1px solid var(--line); }
.project-row h2 { margin: 0; font-size: 1.05rem; }
.project-row p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Planny's Command Center carries ShippY's dense, clear planning surface into the web app. */
.command-page { background: #f5f5f7; color: #1d1d1f; }
.command-shell { display: grid; min-height: 100vh; grid-template-columns: 278px minmax(0, 1fr); opacity: 0; }
.is-ready .command-shell { opacity: 1; }
.command-sidebar { display: flex; flex-direction: column; min-height: 100vh; padding: 34px 16px 18px; border-right: 1px solid #d2d2d7; background: #e8e9ee; }
.command-brand { display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; align-items: center; padding: 4px 14px 34px; color: #182d47; font-size: 1.9rem; font-weight: 500; text-decoration: none; }
.command-brand small { grid-column: 2; margin-top: -7px; color: #6e6e73; font-size: 1rem; font-weight: 400; }
.brand-spark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #a9b4c2; border-radius: 50%; color: #f4f7fa; background: #203c68; font-size: 1.45rem; }
.command-nav { display: grid; gap: 4px; }
.command-nav a { padding: 16px 12px; border-left: 4px solid transparent; color: #304258; font-size: 1.08rem; text-decoration: none; }
.command-nav a:hover { background: #dce4ef; }
.command-nav a[aria-current="page"] { border-left-color: #0a84ff; color: #1d1d1f; background: #dce6f3; font-weight: 750; }
.nav-glyph { display: inline-block; width: 30px; color: #ef8d19; text-align: center; }
.nav-glyph.mind { color: #248a3d; }.nav-glyph.timeline { color: #0877e8; }.nav-glyph.list { color: #d9a400; }
.warning-panel { margin-top: auto; padding: 16px 12px; border: 1px solid #c7cbd2; background: #fafafa; }
.warning-panel h2 { margin: 0 0 10px; font-size: .96rem; }.warning-panel p { margin: 0 0 12px; color: #5f6771; font-size: .84rem; }
.warning-action { display: block; padding: 8px; color: #fff; background: #175544; font-size: .84rem; font-weight: 750; text-align: center; text-decoration: none; }
.command-content { padding: 34px clamp(28px, 4vw, 62px) 46px; overflow: hidden; }
.command-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.command-header h1 { margin: 0; color: #182d47; font-size: clamp(2rem, 3vw, 2.55rem); font-weight: 450; letter-spacing: 0; }
.command-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.icon-button, .tool-button, .workspace-chip, .save-state { min-height: 46px; border: 0; color: #22334a; background: #e7e8ed; font-weight: 700; }
.icon-button { width: 42px; font-size: 1rem; }.workspace-chip { display: grid; place-items: center; padding: 0 17px; font-size: .9rem; }.tool-button { display: grid; place-items: center; padding: 0 17px; text-decoration: none; font-size: .9rem; }.help-button { color: #fff; background: #175544; }.tips-button { color: #fff; background: #203c68; }.save-state { min-width: 108px; padding: 0 17px; color: #7a7e87; background: #fff; font-weight: 500; }
.command-actions { display: flex; gap: 10px; margin-bottom: 18px; }.command-actions a { display: grid; min-height: 50px; place-items: center; padding: 0 24px; color: #27384e; background: #e8e9ee; text-decoration: none; }.command-actions .command-primary { color: #fff; background: #0877e8; }
.command-quote { display: grid; gap: 10px; padding: 22px 24px; margin-bottom: 28px; background: #fff; }.command-quote > span { color: #7a8490; }.command-quote blockquote { margin: 0; color: #263b55; font-size: 1.35rem; }.command-quote div { display: flex; justify-content: space-between; gap: 16px; color: #6e7680; font-size: .84rem; }.command-quote small { margin-left: auto; }
.command-health, .recent-work { padding: 24px 26px 20px; border: 1px solid #d2d2d7; background: #fff; }.health-heading, .recent-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.health-heading h2, .recent-heading h2 { margin: 0; font-size: 1.55rem; }.health-heading p, .recent-heading p { margin: 5px 0 0; color: #6e7680; font-size: .9rem; }.small-action, .recent-heading button { padding: 11px 18px; border: 0; color: #1d1d1f; background: #e7e8ed; font-weight: 750; text-decoration: none; }
.health-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 16px; margin: 20px 0; }.health-card { min-height: 180px; padding: 17px 14px; border: 1px solid #d6dae0; }.health-card h3 { margin: 0 0 18px; font-size: .95rem; }.health-card strong { display: block; min-height: 52px; font-size: 1.25rem; line-height: 1.15; }.health-card p { margin: 12px 0 0; color: #767f8a; font-size: .8rem; }.execution h3 { color: #248a3d; }.focus h3 { color: #0877e8; }.risk h3 { color: #d46d00; }.efficiency h3 { color: #54bfea; }.next h3 { color: #e27954; }.meter { height: 12px; overflow: hidden; border-radius: 12px; background: #eaf0f6; }.meter i { display: block; height: 100%; background: #175544; }.meter.warm i { background: #ff8a6d; }
.command-quick-add { display: grid; grid-template-columns: auto minmax(130px, 1fr) 48px auto auto; align-items: center; gap: 10px; color: #5b6674; font-size: .88rem; }.command-quick-add input { min-height: 36px; border: 1px solid #3e4753; background: #fff; }.command-quick-add span { display: grid; min-height: 36px; place-items: center; border: 1px solid #3e4753; color: #1d1d1f; }.command-quick-add button { min-height: 36px; border: 0; padding: 0 18px; color: #7b8088; background: #e7e8ed; font-weight: 750; }.check-label { color: #27384e; font-weight: 700; }
.command-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 28px 0; }.suite-feature { padding: 26px; background: #fff; }.feature-strip { position: relative; height: 64px; overflow: hidden; margin: -4px 0 20px; background: #111a29; }.feature-strip::before { content: ""; position: absolute; inset: 23px 24px; border-top: 2px solid #2e4059; border-bottom: 2px solid #2e4059; background: repeating-linear-gradient(90deg, transparent 0 70px, #26384f 71px 72px); }.feature-strip span, .feature-strip i { position: absolute; display: block; height: 30px; }.feature-strip span { top: 7px; left: 42px; width: 32%; background: #248a3d; }.timeline-feature .feature-strip span { background: #0877e8; }.feature-strip i { top: 39px; left: 26%; width: 43%; background: #34435a; }.feature-strip b { position: absolute; top: 31px; left: 28%; width: 13px; height: 13px; border-radius: 50%; background: #e6edf7; }.suite-feature h2 { margin: 0; font-size: 1.7rem; }.suite-feature h3 { margin: 8px 0 18px; color: #248a3d; font-size: .97rem; }.timeline-feature h3 { color: #0877e8; }.suite-feature p { min-height: 50px; margin: 0 0 20px; color: #6e7680; }.suite-feature a { display: inline-block; padding: 13px 18px; color: #1d1d1f; background: #e7e8ed; font-weight: 750; text-decoration: none; }
.recent-work { margin-top: 12px; }.recent-heading button { cursor: default; }.recent-body { display: grid; grid-template-columns: 290px 1fr; gap: 28px; margin-top: 28px; }.output-stat { display: grid; gap: 8px; align-content: start; }.output-stat span { color: #d46d00; font-weight: 750; }.output-stat strong { font-size: 2.2rem; }.output-stat p { margin: 0; color: #6e7680; }.work-calendar { display: grid; grid-template-columns: repeat(7, minmax(50px, 1fr)); gap: 7px; }.work-calendar span { padding-bottom: 3px; color: #6e7680; font-size: .82rem; text-align: center; }.work-calendar i { min-height: 52px; border: 1px solid #cbd3dd; background: #edf3fa; }

.command-quick-add .quick-hours { width: 58px; min-height: 36px; padding: 0 6px; border: 1px solid #3e4753; background: #fff; text-align: center; }
.command-quick-add .form-message { grid-column: 2 / -1; margin: 0; }

.todo-page { background: #f5f5f7; color: #1d1d1f; }
.todo-shell { display: grid; min-height: 100vh; grid-template-columns: 278px minmax(0, 1fr); opacity: 0; }
.is-ready .todo-shell { opacity: 1; }
.todo-content { padding: 34px clamp(28px, 4vw, 62px) 46px; }
.todo-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.back-link { color: #175544; font-size: .88rem; font-weight: 750; text-decoration: none; }
.todo-header h1 { margin: 7px 0 0; color: #182d47; font-size: clamp(2rem, 3vw, 2.55rem); font-weight: 450; letter-spacing: 0; }
.todo-header p { max-width: 680px; margin: 8px 0 0; color: #6e7680; }
.task-composer { padding: 22px 26px; border: 1px solid #d2d2d7; border-top: 3px solid #0877e8; background: #fff; }
.task-composer h2 { margin: -5px 0 0; font-size: 1.35rem; }
.task-form { display: grid; grid-template-columns: minmax(210px, 1.7fr) minmax(155px, 1fr) minmax(128px, .8fr) 84px max-content auto; align-items: end; gap: 12px; margin-top: 18px; }
.task-form .field { gap: 5px; color: #4e5b6b; font-size: .8rem; }
.task-form input, .task-form select { min-height: 40px; padding: 8px 10px; border: 1px solid #9ca8b7; border-radius: 0; color: #1d1d1f; background: #fff; }
.task-form input:focus, .task-form select:focus { border-color: #0877e8; outline: 2px solid rgba(8, 119, 232, .18); outline-offset: 0; }
.task-checkbox { display: flex; min-height: 40px; align-items: center; gap: 7px; white-space: nowrap; color: #27384e; font-size: .9rem; font-weight: 700; }
.task-checkbox input { width: 16px; height: 16px; }
.task-submit { min-height: 40px; padding: 0 17px; border-radius: 0; background: #0877e8; }
.task-submit:hover { background: #0567c8; }
.task-message { grid-column: 1 / -1; }
.todo-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 22px; border: 1px solid #d2d2d7; background: #fff; }
.todo-summary div { min-height: 88px; padding: 17px 20px; border-right: 1px solid #d6dae0; }.todo-summary div:last-child { border-right: 0; }
.todo-summary span { display: block; color: #6e7680; font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }.todo-summary strong { display: block; margin-top: 6px; color: #182d47; font-size: 1.35rem; }
.task-list-section { margin-top: 28px; padding: 24px 26px; border: 1px solid #d2d2d7; background: #fff; }
.task-list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }.task-list-heading h2 { margin: 0; font-size: 1.45rem; }.task-list-heading p { margin: 5px 0 0; color: #6e7680; }.task-list-heading a { padding: 9px 12px; color: #175544; background: #edf5f1; font-weight: 750; text-decoration: none; }
.task-list { display: grid; border-top: 1px solid #d6dae0; }.task-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; align-items: start; padding: 16px 6px; border-bottom: 1px solid #d6dae0; }.task-row input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: #175544; }.task-row h3 { margin: 0; color: #1d1d1f; font-size: 1.03rem; }.task-row p { margin: 5px 0 0; color: #6e7680; font-size: .87rem; }.task-row p.is-overdue { color: #c44b38; font-weight: 700; }.task-row.is-complete h3 { color: #7a7e87; text-decoration: line-through; }.task-row.is-complete p { color: #9297a0; }
.task-empty { display: grid; gap: 10px; min-height: 205px; place-content: center start; padding: 28px 4px; }.task-empty h2 { margin: 0; font-size: 1.2rem; }.task-empty p { margin: 0; color: #6e7680; }

@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { min-height: 245px; padding: 26px 28px; }
  .auth-aside h1 { font-size: 2.5rem; }
  .aside-note { display: none; }
  .app-rail { position: static; width: auto; min-height: auto; padding: 18px; }
  .workspace-name, .rail-bottom { display: none; }
  .app-nav { display: flex; gap: 3px; margin-top: 16px; overflow-x: auto; }
  .app-nav a { flex: 0 0 auto; }
  .app-content { margin-left: 0; padding: 28px 20px; }
  .page-top { display: grid; margin-bottom: 28px; }
  .status-strip { grid-template-columns: 1fr; }
  .status-item { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .project-row { display: grid; gap: 3px; }
  .command-shell { grid-template-columns: 1fr; }.command-sidebar { min-height: auto; padding: 18px; }.command-brand { padding: 0 8px 16px; }.command-brand small, .warning-panel { display: none; }.command-nav { display: flex; overflow-x: auto; }.command-nav a { flex: 0 0 auto; padding: 9px 10px; border-left: 0; border-bottom: 3px solid transparent; font-size: .9rem; }.command-nav a[aria-current="page"] { border-bottom-color: #0a84ff; }.command-content { padding: 24px 16px 36px; }.command-header { display: grid; gap: 18px; }.command-tools { justify-content: flex-start; }.workspace-chip, .help-button, .tips-button, .save-state { display: none; }.health-grid { grid-template-columns: 1fr; }.health-card { min-height: auto; }.command-quick-add { grid-template-columns: 1fr; }.command-feature-grid, .recent-body { grid-template-columns: 1fr; }.work-calendar { grid-template-columns: repeat(4, minmax(40px, 1fr)); }
}

@media (max-width: 1160px) {
  .task-form { grid-template-columns: minmax(230px, 1fr) minmax(160px, .7fr) minmax(130px, .6fr); }
  .task-checkbox, .task-submit { align-self: start; }.task-checkbox { margin-top: 4px; }
}

@media (max-width: 760px) {
  .todo-shell { grid-template-columns: 1fr; }.todo-content { padding: 24px 16px 36px; }.todo-header { display: grid; }.task-composer, .task-list-section { padding: 20px 16px; }.task-form { grid-template-columns: 1fr; }.task-checkbox { min-height: auto; }.todo-summary { grid-template-columns: 1fr 1fr; }.todo-summary div { min-height: 74px; border-bottom: 1px solid #d6dae0; }.todo-summary div:nth-child(2n) { border-right: 0; }.todo-summary div:nth-last-child(-n + 2) { border-bottom: 0; }.task-list-heading { display: grid; }.task-list-heading a { justify-self: start; }
}

/* ShippY Suite web replica: shared light desktop chrome. */
.suite-page { min-width: 980px; background: #f5f5f7; color: #13202d; }
.suite-fallback { display: grid; min-height: 100vh; place-content: center; gap: 12px; padding: 32px; color: #1b3150; background: #f5f5f7; }.suite-fallback h1, .suite-fallback p { margin: 0; }.suite-fallback p { color: #8f3d31; }.suite-fallback a { color: #175544; font-weight: 750; }
.suite-shell { display: grid; grid-template-columns: 278px minmax(0, 1fr); min-height: 100vh; opacity: 0; transition: opacity .15s ease; }
.is-ready .suite-shell { opacity: 1; }
.suite-page [data-suite-root]:empty { display: grid; min-height: 100vh; place-items: center; color: #6c7b8b; background: #f4f6f8; font: 700 .9rem/1.4 system-ui, sans-serif; }.suite-page [data-suite-root]:empty::before { content: "Loading workspace..."; padding: 12px 16px; border: 1px solid #d3dce5; background: #fff; }
.suite-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 24px 14px 16px; border-right: 1px solid #d6d9e0; background: #e9eaf0; }
.suite-brand { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 16px 12px 28px; color: #173150; font-size: 1.9rem; font-weight: 500; text-decoration: none; }
.suite-brand small { display: block; margin-top: -7px; color: #6d7886; font-size: 1rem; font-weight: 400; }
.suite-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #4c6280; border-radius: 50%; color: #fff; background: #203c68; font-size: 1.1rem; }
.suite-nav { display: grid; gap: 3px; }
.suite-nav a { display: flex; align-items: center; min-height: 54px; padding: 0 12px; border-left: 4px solid transparent; color: #2b4058; font-size: 1.07rem; text-decoration: none; }
.suite-nav a span { width: 30px; color: #e1a517; text-align: center; }.suite-nav a:nth-of-type(2) span { color: #269252; }.suite-nav a:nth-of-type(3) span { color: #0877e8; }.suite-nav a:nth-of-type(4) span { color: #d6aa00; }
.suite-nav a:hover { background: #dde5f1; }.suite-nav a[aria-current="page"] { border-left-color: #0877e8; color: #15253a; background: #dbe6f4; font-weight: 750; }.nav-gap { display: block; height: 10px; }
.suite-warning { margin-top: auto; padding: 13px 12px; border: 1px solid #c8ced8; background: #fafafa; }.suite-warning .section-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }.suite-warning h2 { margin: 0; font-size: .95rem; }.suite-warning .section-line span { color: #c44b38; font-weight: 800; }.suite-warning p { min-height: 34px; margin: 8px 0 12px; color: #637080; font-size: .82rem; }.suite-warning button { width: 100%; min-height: 32px; border: 0; color: #fff; background: #175544; font-weight: 750; }
.suite-account { display: grid; gap: 3px; margin-top: 14px; padding: 12px 10px 0; border-top: 1px solid #c8ced8; color: #697685; font-size: .75rem; }.suite-account b { overflow: hidden; color: #203c68; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.suite-account button { justify-self: start; margin-top: 4px; padding: 0; border: 0; color: #175544; background: transparent; font-size: .78rem; font-weight: 750; }
.suite-main { min-width: 0; padding: 32px clamp(30px, 4vw, 62px) 48px; }.suite-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }.suite-header h1 { margin: 0; color: #173150; font-size: 2.5rem; font-weight: 450; letter-spacing: 0; line-height: 1.05; }.suite-toolbar { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }.suite-toolbar > * { display: grid; min-height: 46px; place-items: center; padding: 0 16px; border: 0; border-radius: 0; color: #20344d; background: #e7e8ed; font-size: .88rem; font-weight: 750; text-decoration: none; }.suite-toolbar button:not(:disabled):hover, .suite-toolbar a:hover { filter: brightness(.96); }.suite-toolbar .icon-control { width: 42px; padding: 0; }.suite-toolbar .workspace-control { background: #eef0f4; }.suite-toolbar button[data-modal="help"] { color: #fff; background: #175544; }.suite-toolbar button[data-modal="tips"] { color: #fff; background: #203c68; }.suite-toolbar .save-control { min-width: 104px; color: #77818e; background: #fff; font-weight: 500; }.suite-data-error { padding: 12px; border-left: 3px solid #c44b38; color: #923a2c; background: #fff0ed; }
.command-tabs { display: flex; gap: 10px; margin-bottom: 18px; }.command-tabs a { display: grid; min-height: 50px; place-items: center; padding: 0 25px; color: #293d55; background: #e7e8ed; text-decoration: none; }.command-tabs .primary-tab { color: #fff; background: #0877e8; }
.quote-panel { display: grid; gap: 12px; padding: 22px 24px; margin-bottom: 28px; background: #fff; }.quote-panel > span { color: #718093; }.quote-panel blockquote { margin: 0; color: #243b58; font-size: 1.33rem; }.quote-panel div { display: flex; justify-content: space-between; color: #697787; font-size: .84rem; }.quote-panel small { margin-left: auto; }
.dashboard-panel, .recent-panel, .workspace-panel, .timeline-workspace, .list-workspace, .milestone-panel, .settings-panel, .workshop-board, .metrics-chart { border: 1px solid #d0d4dc; background: #fff; }.dashboard-panel, .recent-panel, .workspace-panel, .timeline-workspace, .list-workspace, .milestone-panel, .settings-panel, .workshop-board, .metrics-chart { padding: 24px 26px; }
.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.panel-title h2 { margin: 0; color: #162d49; font-size: 1.5rem; }.panel-title p { margin: 5px 0 0; color: #6d7886; font-size: .9rem; }.panel-title a, .panel-title button, .workspace-actions button, .workspace-actions a { min-height: 38px; padding: 0 14px; border: 0; border-radius: 0; color: #1f3045; background: #e7e8ed; font-weight: 750; text-decoration: none; }.panel-title button:disabled, .workspace-actions button:disabled { color: #6f7783; background: #eef0f3; }
.health-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 15px; margin: 20px 0; }.health { min-height: 184px; padding: 16px 14px; border: 1px solid #d5dae1; }.health h3 { margin: 0 0 18px; font-size: .94rem; }.health strong { display: block; min-height: 52px; color: #111d2d; font-size: 1.22rem; line-height: 1.15; }.health i { display: block; height: 12px; margin: 10px 0; border-radius: 10px; background: #e9eef4; }.health p { margin: 0; color: #727e8c; font-size: .8rem; }.execution h3 { color: #248a3d; }.focus h3 { color: #0877e8; }.risk h3 { color: #d06e00; }.efficiency h3 { color: #50b7e0; }.next h3 { color: #dc7653; }
.health-details ul { display:grid; gap:8px; padding-left:18px; }.health-details li span { display:block; color:#647488; font-size:.84rem; }.health-details > div { display:flex; flex-wrap:wrap; gap:7px; }.health-details button { min-height:32px; padding:0 9px; border:1px solid #bdc8d4; background:#f4f6f8; color:#294765; font-weight:700; }
.quick-capture { display: flex; align-items: center; gap: 10px; color: #596778; font-size: .9rem; }.quick-capture button { min-height: 36px; padding: 0 14px; border: 1px solid #364557; color: #1d2d40; background: #fff; font-weight: 700; }.read-only-chip { padding: 6px 9px; color: #536879; background: #edf2f6; font-size: .75rem; font-weight: 750; }
.quick-capture input { min-height: 36px; padding: 0 9px; border: 1px solid #3c4b5d; border-radius: 0; color: #536372; background: #fff; }.quick-capture input:first-of-type { flex: 1; }.quick-capture .quick-hours { width: 50px; text-align: center; }.quick-capture label { display: flex; align-items: center; gap: 5px; color: #243950; font-weight: 750; }.quick-capture button:disabled { color: #7b8490; background: #e7e9ed; }
.upcoming-panel { padding: 24px 26px 20px; margin-top: 24px; border: 1px solid #d0d4dc; background: #fff; }.upcoming-board { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 150px; margin-top: 18px; border: 1px solid #cbd4df; background: #edf3fa; }.upcoming-board article { display: grid; align-content: start; gap: 3px; padding: 12px; border-right: 1px solid #cbd4df; }.upcoming-board article:last-child { border-right: 0; }.upcoming-board b { color: #1f4267; }.upcoming-board span { color: #6b7987; font-size: .83rem; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 28px 0; }.feature-grid article { padding: 26px; background: #fff; }.feature-grid h2 { margin: 0; color: #142b48; font-size: 1.7rem; }.feature-grid h3 { margin: 8px 0 18px; color: #248a3d; font-size: .98rem; }.feature-grid article:nth-child(2) h3 { color: #0877e8; }.feature-grid p { min-height: 46px; margin: 0 0 20px; color: #697787; }.feature-grid a { display: inline-grid; min-height: 42px; place-items: center; padding: 0 16px; color: #1d2b3f; background: #e7e8ed; font-weight: 750; text-decoration: none; }
.feature-strip { position: relative; height: 64px; overflow: hidden; margin-bottom: 20px; background: #111b2a; }.feature-strip::before { content: ""; position: absolute; inset: 25px 24px; border-top: 2px solid #30445f; border-bottom: 2px solid #30445f; background: repeating-linear-gradient(90deg, transparent 0 70px, #30445f 71px 72px); }.feature-strip::after { content: ""; position: absolute; top: 8px; left: 10%; width: 35%; height: 29px; background: #248a3d; box-shadow: 120px 34px 0 #34435a; }.feature-strip.blue::after { background: #0877e8; }
.recent-panel { margin-top: 12px; }.recent-grid { display: grid; grid-template-columns: 250px 1fr; gap: 28px; margin-top: 24px; }.recent-grid > div:first-child { display: grid; align-content: start; gap: 8px; }.recent-grid b { color: #d06e00; }.recent-grid strong { font-size: 2.1rem; }.recent-grid p { margin: 0; color: #6d7886; }.mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }.mini-calendar span { color: #687585; font-size: .8rem; text-align: center; }.mini-calendar i { min-height: 49px; border: 1px solid #cad3de; background: #edf3fa; }
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: -8px 0 24px; color: #667587; }.page-intro > a { color: #175544; font-size: .9rem; font-weight: 750; text-decoration: none; }.page-intro p { max-width: 640px; margin: 0; }.workspace-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }.workspace-actions a { display: grid; place-items: center; }
.todo-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; border: 1px solid #d0d4dc; background: #fff; }.todo-summary div { min-height: 90px; padding: 18px 22px; border-right: 1px solid #d7dce3; }.todo-summary div:last-child { border-right: 0; }.todo-summary span { display: block; color: #6c7784; font-size: .78rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }.todo-summary strong { display: block; margin-top: 6px; color: #1a3150; font-size: 1.4rem; }
.suite-card-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 15px 7px; border-top: 1px solid #d8dce2; cursor: pointer; }.suite-card-row:hover { background: #f5f8fb; }.card-check { display: grid; width: 18px; height: 18px; place-items: center; margin-top: 3px; border: 1px solid #506277; color: #fff; background: #175544; font-size: .7rem; }.suite-card-row:not(.is-complete) .card-check { background: #fff; }.suite-card-row h3 { margin: 0; color: #1b2d42; font-size: 1rem; }.suite-card-row p { margin: 4px 0 0; color: #6c7784; font-size: .86rem; }.suite-card-row.is-complete h3 { color: #77818c; text-decoration: line-through; }.card-state { color: #53667c; font-size: .78rem; font-weight: 750; }.suite-empty { display: grid; gap: 7px; min-height: 180px; place-content: center start; padding: 20px 5px; }.suite-empty b { color: #1b2d42; font-size: 1.15rem; }.suite-empty p { max-width: 480px; margin: 0; color: #6c7784; }
.todo-window { border: 1px solid #c9d0da; background: #fff; }.todo-window-header, .schedule-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid #d4d9e0; }.todo-window-header span { color: #6d7987; font-size: .8rem; font-weight: 750; }.todo-window-header h2 { margin: 4px 0 0; color: #173150; font-size: 1.65rem; }.todo-window-actions, .schedule-header > div:last-child { display: flex; gap: 8px; }.todo-window-actions button, .schedule-header button { min-height: 34px; padding: 0 12px; border: 0; color: #657282; background: #e9ebef; font-weight: 750; }.todo-window-actions button:last-child { color: #fff; background: #203c68; }.todo-health { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 22px 0; border: 1px solid #d5dae1; }.todo-health > div { display: grid; gap: 5px; min-height: 104px; padding: 16px; border-right: 1px solid #d5dae1; }.todo-health > div:last-child { border-right: 0; }.todo-health b { color: #435a73; font-size: .8rem; text-transform: uppercase; }.todo-health strong { color: #152b47; font-size: 1.24rem; }.todo-health small { color: #74808c; }.todo-add-row { display: grid; grid-template-columns: auto minmax(180px, 1fr) 54px auto auto; gap: 9px; align-items: center; padding: 22px; color: #526172; font-size: .88rem; }.todo-add-row input { min-height: 35px; padding: 0 8px; border: 1px solid #394a5d; border-radius: 0; color: #687686; background: #fff; }.todo-add-row input:nth-of-type(2) { text-align: center; }.todo-add-row label { display: flex; align-items: center; gap: 5px; color: #203750; font-weight: 750; }.todo-add-row button { min-height: 35px; padding: 0 14px; border: 0; color: #7a8490; background: #e7e9ed; font-weight: 750; }.todo-list-heading { padding: 0 22px; }.todo-list-heading > div { display: grid; grid-template-columns: minmax(200px, 1fr) 100px 120px 100px; align-items: center; min-height: 44px; border-top: 1px solid #d6dbe2; border-bottom: 1px solid #d6dbe2; color: #647284; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.todo-list-heading h3 { margin: 0; color: #304862; font-size: .8rem; }.todo-zero { display: grid; gap: 7px; min-height: 180px; place-content: center start; padding: 0 22px; }.todo-zero b { color: #263d58; font-size: 1.1rem; }.todo-zero p { margin: 0; color: #6e7a88; }.todo-bottom-strip, .timeline-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }.todo-bottom-strip { grid-template-columns: repeat(2, 1fr); }.todo-bottom-strip article, .timeline-summary article { display: grid; gap: 7px; min-height: 120px; padding: 18px; border: 1px solid #ced5de; background: #fff; }.todo-bottom-strip b, .timeline-summary b { color: #4b6078; font-size: .82rem; text-transform: uppercase; }.todo-bottom-strip strong, .timeline-summary strong { color: #1b3150; font-size: 1.6rem; }.todo-bottom-strip span, .timeline-summary p { margin: 0; color: #6d7987; font-size: .87rem; }
.map-frame { border: 1px solid #bfc9d5; background: #fff; }.map-window-toolbar { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #cbd3dd; background: #edf0f4; }.map-window-toolbar > div { display: flex; gap: 7px; align-items: center; }.map-window-toolbar button { min-height: 32px; padding: 0 11px; border: 0; color: #5e6f80; background: #fff; font-weight: 750; }.map-window-toolbar button:last-child { color: #fff; background: #248a3d; }.map-window-toolbar span { padding-left: 8px; color: #3b526b; font-size: .84rem; font-weight: 750; }.map-workspace { border: 0; background: #edf3fa; }.map-toolbar { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid #bec9d6; color: #506277; background: #fff; font-size: .85rem; font-weight: 700; }.map-canvas { position: relative; min-height: 570px; overflow: hidden; background-image: linear-gradient(#d9e3ef 1px, transparent 1px), linear-gradient(90deg, #d9e3ef 1px, transparent 1px); background-size: 30px 30px; }.map-hint { position: absolute; top: 28px; right: 28px; color: #7b8896; font-size: .83rem; }.map-node { position: absolute; display: grid; gap: 6px; width: 190px; min-height: 82px; padding: 14px; border: 1px solid #7591ad; background: #fff; box-shadow: 0 2px 0 rgba(45, 68, 92, .14); cursor: default; }.map-node::before { content: ""; position: absolute; z-index: 0; width: 110px; height: 1px; background: #7990a8; }.map-node b, .map-node small { position: relative; z-index: 1; }.map-node b { color: #1d3754; font-size: .95rem; }.map-node small { color: #6c7784; }.map-node.is-root { border-color: #368e50; background: #f7fffa; }.node-0 { top: 25%; left: 9%; }.node-1 { top: 25%; left: 43%; }.node-1::before { right: 100%; top: 40px; }.node-2 { top: 57%; left: 23%; }.node-2::before { top: -52px; left: 76px; height: 52px; }.node-3 { top: 58%; left: 62%; }.node-3::before { top: -52px; left: 76px; height: 52px; }.node-4 { top: 36%; right: 8%; }.node-4::before { right: 100%; top: 38px; }.node-5 { bottom: 8%; right: 18%; }.node-5::before { top: -54px; left: 74px; height: 54px; }.map-empty { display: grid; height: 570px; place-items: center; color: #657486; }.map-status { display: flex; gap: 22px; padding: 10px 14px; border-top: 1px solid #cbd3dd; color: #657486; background: #f6f7f9; font-size: .8rem; }
.timeline-workspace { padding: 0; overflow: auto; }.timeline-workspace > header { display: flex; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid #d1d7df; }.timeline-workspace h2 { margin: 0; color: #1b3150; }.timeline-workspace p { margin: 4px 0 0; color: #6e7987; }.timeline-workspace > header > button { min-height: 31px; align-self: start; padding: 0 10px; border: 0; color: #fff; background: #203c68; font-size: .82rem; font-weight: 750; }.timeline-grid { display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(4, minmax(130px, 1fr)); min-width: 860px; }.timeline-labels, .day-column { display: grid; grid-auto-rows: 52px; border-right: 1px solid #cdd5df; }.timeline-labels b, .day-column > b { display: grid; align-items: center; padding: 0 14px; border-bottom: 1px solid #cdd5df; color: #314962; background: #eaf1f8; font-size: .85rem; }.timeline-labels span { display: grid; align-items: center; padding: 0 14px; border-bottom: 1px solid #dce2e9; color: #20334b; cursor: pointer; }.day-column i { display: block; height: 22px; margin: 15px 9px; border-radius: 0; background: #dce5f0; }.day-column i.is-due { background: #f15a78; }
.schedule-panel { border: 1px solid #cbd2db; background: #fff; }.schedule-header h2 { margin: 0; color: #1b3150; font-size: 1.65rem; }.schedule-header p { margin: 5px 0 0; color: #6e7987; }.schedule-header button.is-selected { color: #fff; background: #203c68; }.schedule-key { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; padding: 11px 22px; border-bottom: 1px solid #d8dde3; color: #788493; font-size: .78rem; }.schedule-key span:nth-child(1) { color: #d64961; }.schedule-key span:nth-child(2) { color: #d77716; }.schedule-key span:nth-child(3) { color: #b28700; }.schedule-key span:nth-child(4) { color: #8b54bb; }.schedule-board { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 310px; margin: 20px; border: 1px solid #cbd4df; background: #edf3fa; }.schedule-board section { border-right: 1px solid #cbd4df; }.schedule-board section:last-child { border-right: 0; }.schedule-board header { display: grid; gap: 3px; min-height: 86px; padding: 13px; border-bottom: 1px solid #cbd4df; background: #e6eef7; }.schedule-board header b { color: #1b5cbd; font-size: 1.05rem; }.schedule-board section:first-child header b { color: #d07000; }.schedule-board section:nth-child(2) header b { color: #258a3f; }.schedule-board header span { color: #5f7081; font-size: .82rem; }.schedule-board header small { color: #6b7785; font-weight: 750; }.schedule-empty { display: grid; min-height: 204px; place-items: center; color: #7e8b99; font-size: .86rem; }
.list-workspace { padding: 0; overflow: hidden; }.list-workspace > header, .list-workspace > article { display: grid; grid-template-columns: minmax(300px, 1.7fr) 100px 130px 110px; gap: 16px; align-items: center; padding: 0 20px; }.list-workspace > header { min-height: 42px; color: #647182; background: #e9eef4; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.list-workspace > article { min-height: 57px; border-top: 1px solid #dce1e7; cursor: pointer; }.list-workspace > article:hover { background: #f5f8fb; }.list-workspace b { color: #1d324d; }.list-workspace span { color: #657283; font-size: .9rem; }.status-completed { color: #208348 !important; font-weight: 750; }.status-open { color: #0877e8 !important; font-weight: 750; }
.list-window { border: 1px solid #c9d1dc; background: #fff; }.list-window-header, .workshop-head, .milestone-top, .metrics-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }.list-window-header { padding: 20px 22px; border-bottom: 1px solid #d5dbe3; }.list-window h2, .workshop-head h2, .milestone-top h2, .metrics-head h2 { margin: 0; color: #18314e; font-size: 1.65rem; }.list-window p, .workshop-head p, .milestone-top p, .metrics-head p { margin: 5px 0 0; color: #6b7887; }.list-window-header > div:last-child, .workshop-head > div:last-child, .milestone-top > div:last-child, .metrics-head > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.list-window button, .workshop-head button, .milestone-top button, .metrics-head button { min-height: 34px; padding: 0 11px; border: 0; color: #647182; background: #e8eaee; font-size: .8rem; font-weight: 750; }.list-window-header button:last-child, .milestone-top button, .metrics-head button:last-child { color: #fff; background: #203c68; }.list-help { display: flex; gap: 14px; padding: 12px 22px; border-bottom: 1px solid #dae0e7; color: #697687; font-size: .83rem; }.list-help b { color: #29435f; white-space: nowrap; }.list-help mark { padding: 1px 4px; color: #466178; background: #eaf0f7; font-family: Consolas, monospace; }.list-editor { display: grid; grid-template-columns: minmax(0, 1fr) 180px; min-height: 395px; }.list-editor ol { margin: 0; padding: 22px 26px 22px 51px; border-right: 1px solid #d6dce4; color: #233c58; line-height: 2.1; font-family: Consolas, "Courier New", monospace; font-size: .9rem; }.list-editor li { padding: 0 8px; }.list-editor li::marker { color: #95a0ad; }.list-editor .level-1 { margin-left: 22px; }.list-editor .level-2 { margin-left: 44px; }.line-box { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 1px solid #7890a8; vertical-align: -1px; }.list-editor mark { padding: 1px 3px; color: #7a4ba0; background: #f1e8fa; }.list-editor aside { display: grid; align-content: start; gap: 9px; padding: 20px 14px; background: #f5f7f9; }.list-editor aside b { margin-bottom: 5px; color: #465d75; font-size: .8rem; text-transform: uppercase; }.list-editor aside button { min-height: 34px; border: 1px solid #d0d7e0; color: #738092; background: #fff; font-size: .8rem; font-weight: 750; }.list-status { display: flex; gap: 22px; padding: 10px 20px; border-top: 1px solid #d5dbe3; color: #6a7787; background: #f6f7f9; font-size: .8rem; }
.workshop-grid, .metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.workshop-grid article, .metrics-grid article { min-height: 166px; padding: 21px; border: 1px solid #ced5df; background: #fff; }.workshop-grid h2 { margin: 0; color: #1e3551; font-size: 1.05rem; }.workshop-grid strong, .metrics-grid strong { display: block; margin: 18px 0 8px; color: #1b3150; font-size: 2rem; }.workshop-grid p, .metrics-grid p { margin: 0; color: #6b7887; }.workshop-board { margin-top: 24px; }.workshop-board h2, .metrics-chart h2 { margin: 0; color: #1e3551; font-size: 1.25rem; }.pressure-bars, .metrics-chart > div { display: flex; height: 180px; align-items: end; gap: 12px; margin-top: 22px; padding: 0 18px; border-bottom: 2px solid #c2cbd6; background: repeating-linear-gradient(0deg, transparent 0 45px, #edf1f5 46px 47px); }.pressure-bars i { width: 12%; max-width: 68px; background: #f39252; }.metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.metrics-grid article span { color: #6c7886; font-size: .8rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }.metrics-chart { margin-top: 24px; }.metrics-chart > div i { width: 7%; max-width: 54px; background: #0877e8; }
.workshop-head, .milestone-top, .metrics-head { margin: -4px 0 20px; }.workshop-verdict { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #cdd4de; background: #fff; }.workshop-verdict > div { min-height: 132px; padding: 18px; border-right: 1px solid #d7dce3; }.workshop-verdict > div:last-child { border-right: 0; }.workshop-verdict span, .milestone-overview b { color: #667687; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.workshop-verdict strong { display: block; margin: 8px 0; color: #1d3654; font-size: 1.45rem; }.workshop-verdict p { margin: 0; color: #707d8b; font-size: .84rem; }.workshop-board { padding: 0; overflow: hidden; }.workshop-board header { display: flex; justify-content: space-between; gap: 16px; padding: 18px 21px; border-bottom: 1px solid #d2d9e1; }.workshop-board header p { margin: 5px 0 0; color: #6d7887; }.workshop-board header span { color: #627489; font-size: .84rem; font-weight: 750; }.pressure-layout { display: grid; grid-template-columns: 160px 1fr; min-height: 250px; }.pressure-labels { display: grid; grid-template-rows: repeat(3, 1fr); border-right: 1px solid #d5dbe3; color: #50677f; font-size: .83rem; font-weight: 750; }.pressure-labels span { display: grid; align-items: center; padding: 0 14px; border-bottom: 1px solid #e0e5ea; }.pressure-labels span:last-child { border-bottom: 0; }.pressure-chart { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 7px; padding: 18px; background: repeating-linear-gradient(0deg, transparent 0 82px, #edf1f5 83px 84px); }.pressure-chart i { min-height: 12px; background: #d9e6f2; }.pressure-chart i:nth-child(3n) { height: 42%; background: #2d8d45; }.pressure-chart i:nth-child(5n) { height: 25%; background: #f3a655; }.repair-panel { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; margin-top: 24px; padding: 22px; border: 1px solid #cdd4de; background: #fff; }.repair-panel h2 { margin: 0; color: #203954; font-size: 1.2rem; }.repair-panel p { margin: 6px 0 0; color: #6d7987; }.repair-empty { display: grid; place-items: center; min-height: 72px; color: #6e7b89; background: #f4f7fa; font-size: .88rem; }
.milestone-panel { padding: 0; }.milestone-head, .milestone-panel article { display: grid; grid-template-columns: 1fr 180px 90px; align-items: center; min-height: 56px; padding: 0 20px; gap: 16px; }.milestone-head { color: #687686; background: #eef1f5; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.milestone-panel article { border-top: 1px solid #d8dde4; }.milestone-panel b { color: #21364f; }.milestone-panel span { color: #637182; }.milestone-panel i { width: 14px; height: 14px; border: 1px solid #c7536a; background: #f59bb0; }
.milestone-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }.milestone-overview article { display: grid; gap: 7px; min-height: 132px; padding: 19px; border: 1px solid #ced5df; background: #fff; }.milestone-overview strong { color: #203b59; font-size: 2rem; }.milestone-overview span { color: #6d7987; font-size: .86rem; }.milestone-empty { display: grid; gap: 7px; min-height: 165px; place-content: center start; padding: 20px; }.milestone-empty b { color: #233b57; font-size: 1.15rem; }.milestone-empty p { margin: 0; color: #6e7a88; }.milestone-calendar, .metric-calendar { margin-top: 24px; border: 1px solid #ccd4de; background: #fff; }.milestone-calendar header, .metric-calendar > header { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 20px; border-bottom: 1px solid #d7dce3; }.milestone-calendar h2, .metric-calendar h2 { margin: 0; color: #1d3654; font-size: 1.25rem; }.milestone-calendar header > div, .metric-month { display: flex; align-items: center; gap: 8px; }.milestone-calendar button, .metric-month button, .calendar-toggles button { min-height: 30px; padding: 0 10px; border: 0; color: #697687; background: #e9ebef; font-size: .78rem; font-weight: 750; }.milestone-calendar header b { color: #304b68; font-size: .86rem; }.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); }.calendar-week { padding: 10px 14px 0; color: #677687; font-size: .74rem; font-weight: 800; text-align: center; text-transform: uppercase; }.calendar-days { gap: 7px; padding: 10px 14px 16px; }.calendar-days i { display: grid; min-height: 54px; align-content: start; padding: 7px; border: 1px solid #d8dee6; color: #4d6178; background: #f7f9fb; font-style: normal; font-size: .82rem; }
.settings-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; max-width: 840px; }.settings-panel h2 { grid-column: 1 / -1; margin: 0; color: #1c3451; font-size: 1.15rem; }.settings-panel label { display: grid; gap: 6px; color: #637182; font-size: .85rem; font-weight: 750; }.settings-panel input, .settings-panel select { min-height: 40px; padding: 0 10px; border: 1px solid #bdc8d4; border-radius: 0; color: #667381; background: #f4f6f8; }.settings-panel button { justify-self: start; min-height: 40px; padding: 0 15px; border: 0; color: #7a8490; background: #e6e9ed; font-weight: 750; }
.metrics-head { margin-bottom: 20px; }.metrics-grid { margin-bottom: 24px; }.metric-calendar > header { align-items: flex-start; }.metric-calendar > header p { margin: 5px 0 0; color: #6d7987; }.calendar-toggles { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }.calendar-toggles b { margin-right: 3px; color: #6d7987; font-size: .76rem; text-transform: uppercase; }.calendar-toggles button.is-selected { color: #fff; background: #203c68; }.metric-month { justify-content: center; padding: 15px; border-bottom: 1px solid #dce1e7; }.metric-month h3 { min-width: 140px; margin: 0; color: #29435f; font-size: 1rem; text-align: center; }.metrics-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }.metrics-insights article { min-height: 145px; padding: 19px; border: 1px solid #ced5df; background: #fff; }.metrics-insights h2 { margin: 0; color: #253d5a; font-size: 1rem; }.metrics-insights b { display: block; margin: 17px 0 7px; color: #1d8a47; font-size: 1.45rem; }.metrics-insights p { margin: 0; color: #6e7a88; font-size: .87rem; }
.suite-modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(22, 35, 52, .48); }.suite-modal-backdrop[hidden] { display: none; }.suite-modal { position: relative; width: min(100%, 520px); padding: 28px; border: 1px solid #8e9baa; background: #fff; box-shadow: 0 18px 50px rgba(14, 27, 43, .3); }.suite-modal h2 { margin: 0 0 12px; color: #19314e; font-size: 1.45rem; }.suite-modal [data-modal-body] { color: #627080; line-height: 1.55; }.modal-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; color: #405368; background: transparent; font-size: 1.55rem; }.modal-actions { display: flex; justify-content: flex-end; margin-top: 24px; }.modal-actions button { min-height: 38px; padding: 0 14px; border: 0; color: #fff; background: #203c68; font-weight: 750; }
.dialog-form { display: grid; gap: 13px; }.dialog-form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.dialog-form label { display: grid; gap: 5px; color: #526376; font-size: .82rem; font-weight: 750; }.dialog-form input, .dialog-form textarea { min-height: 38px; padding: 8px; border: 1px solid #bec8d3; border-radius: 0; color: #667585; background: #f4f6f8; font: inherit; }.dialog-form textarea { min-height: 78px; resize: none; }.dialog-form .dialog-check { display: flex; align-items: center; gap: 7px; }.dialog-tabs { display: flex; gap: 16px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #d6dce4; color: #687688; font-size: .85rem; }.dialog-tabs b { color: #0877e8; }.dialog-tip-list, .dialog-warning { display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; }.dialog-tip-list b, .dialog-warning b { color: #1e3551; }.dialog-calendar > b { display: block; margin-bottom: 9px; color: #1e3551; }.dialog-calendar > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }.dialog-calendar span { color: #687687; font-size: .76rem; text-align: center; }.dialog-calendar i { display: grid; height: 31px; place-items: center; color: #253a55; font-style: normal; }.dialog-calendar i.selected { color: #fff; background: #0877e8; }

.auth-web { display: grid; min-height: 100vh; grid-template-columns: 300px minmax(0, 1fr); background: #f5f5f7; }.auth-web .auth-aside { padding: 34px 28px; color: #203650; background: #e9eaf0; }.auth-web .auth-aside h1 { color: #1a3150; font-size: 2.45rem; }.auth-web .auth-aside p { color: #627182; }.auth-web .brand { color: #1b3150; }.auth-web .brand-mark { color: #0877e8; }.auth-web .aside-note { color: #6d7987; }.auth-web .auth-main { justify-content: start; padding: 10vh clamp(34px, 10vw, 180px); }.auth-web .auth-card { width: min(100%, 440px); }.auth-web .auth-card h2 { color: #1a3150; }.auth-web .primary-button { border-radius: 0; background: #203c68; }.auth-web .primary-button:hover { background: #173150; }.auth-web .ghost-button { border-radius: 0; }.auth-web .field input { border-radius: 0; }.auth-web .eyebrow { color: #0877e8; }

@media (max-width: 1050px) { .suite-page { min-width: 0; }.suite-shell { grid-template-columns: 226px minmax(0, 1fr); }.suite-sidebar { padding-left: 10px; padding-right: 10px; }.suite-brand { padding-left: 8px; }.health-grid { grid-template-columns: repeat(3, 1fr); }.suite-toolbar { max-width: 520px; }.workspace-control { display: none !important; } }
@media (max-width: 760px) { .suite-shell { grid-template-columns: 1fr; }.suite-sidebar { position: static; height: auto; padding: 14px; }.suite-brand { padding: 4px 6px 12px; }.suite-nav { display: flex; overflow-x: auto; }.suite-nav a { flex: 0 0 auto; min-height: 40px; padding: 0 9px; border-left: 0; border-bottom: 3px solid transparent; font-size: .85rem; }.suite-nav a[aria-current="page"] { border-bottom-color: #0877e8; }.suite-nav a span, .nav-gap, .suite-warning, .suite-account { display: none; }.suite-main { padding: 24px 16px 36px; }.suite-header { display: grid; }.suite-header h1 { font-size: 2rem; }.suite-toolbar { justify-content: flex-start; }.suite-toolbar > * { min-height: 38px; padding: 0 11px; }.suite-toolbar .icon-control, .suite-toolbar .save-control { display: none; }.health-grid, .feature-grid, .recent-grid, .workshop-grid, .metrics-grid { grid-template-columns: 1fr; }.command-tabs { overflow-x: auto; }.command-tabs a { flex: 0 0 auto; min-height: 43px; padding: 0 16px; }.todo-summary { grid-template-columns: 1fr; }.todo-summary div { min-height: 70px; border-right: 0; border-bottom: 1px solid #d7dce3; }.todo-summary div:last-child { border-bottom: 0; }.panel-title, .page-intro { display: grid; }.workspace-actions { justify-content: flex-start; }.map-canvas { min-height: 600px; }.map-node { width: 150px; }.node-0 { left: 4%; }.node-1 { left: 42%; }.node-2 { left: 8%; }.node-3 { left: 48%; }.node-4 { right: 2%; }.node-5 { right: 8%; }.settings-panel { grid-template-columns: 1fr; }.list-workspace { overflow-x: auto; }.list-workspace > header, .list-workspace > article { min-width: 690px; }.milestone-head, .milestone-panel article { grid-template-columns: 1fr 110px 50px; }.auth-web { grid-template-columns: 1fr; }.auth-web .auth-aside { min-height: 230px; }.auth-web .auth-main { padding: 42px 24px; } }

/* Functional workspace layer: shared cards, scheduling, recovery, and import tools. */
.functional-suite button, .functional-suite input, .functional-suite select, .functional-suite textarea { font: inherit; }
.functional-suite button { cursor: pointer; }.functional-suite button:focus-visible, .functional-suite input:focus-visible, .functional-suite textarea:focus-visible, .functional-suite select:focus-visible { outline: 3px solid rgba(8, 119, 232, .34); outline-offset: 2px; }
.functional-notice { margin-bottom: 18px; }.functional-section { border: 1px solid #cdd5df; background: #fff; }.functional-section > header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 19px 22px; border-bottom: 1px solid #d8dee5; }.functional-section > header h2 { margin: 0; color: #1b3150; font-size: 1.45rem; }.functional-section > header p { margin: 5px 0 0; color: #6b7988; }.functional-section > header > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }.functional-section > header button, .functional-section > header a, .functional-quick-add button, .todo-agenda-toolbar button { min-height: 35px; padding: 0 12px; border: 0; color: #fff; background: #203c68; font-size: .84rem; font-weight: 750; text-decoration: none; }.functional-section > header button + button { color: #334b65; background: #e9ecf0; }
.functional-card { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 14px 20px; border-bottom: 1px solid #e0e4e9; }.functional-card:hover { background: #f7f9fb; }.functional-card.is-complete { background: #f5f7f8; }.card-state-toggle { width: 19px; height: 19px; margin-top: 3px; border: 1px solid #65788b; color: #fff; background: #fff; line-height: 1; }.is-complete .card-state-toggle { border-color: #238849; background: #238849; }.card-title-link { padding: 0; border: 0; color: #1d344f; background: transparent; font-size: 1rem; font-weight: 750; text-align: left; }.is-complete .card-title-link { color: #77838e; text-decoration: line-through; }.functional-card p { margin: 5px 0 0; color: #718090; font-size: .83rem; }.note-progress { display: block; width: min(230px, 100%); height: 5px; margin-top: 8px; background: #e5ebf1; }.note-progress span { display: block; height: 100%; background: #2c8f4a; }.card-row-actions, .card-row-utilities { display: flex; gap: 6px; align-items: center; }.card-row-actions { flex-wrap: wrap; justify-content: flex-end; }.card-row-actions button, .card-row-actions a, .card-row-actions span, .card-row-utilities button, .card-row-utilities a, .card-row-utilities span { display: grid; min-height: 30px; min-width: 30px; place-items: center; padding: 0 9px; border: 1px solid #d2d9e1; color: #52667c; background: #fff; font-size: .76rem; font-weight: 750; text-decoration: none; }.card-row-actions button:first-child { color: #fff; border-color: #238849; background: #238849; }.card-row-actions span, .card-row-utilities span { color: #8a6a39; }.upcoming-day .card-row-actions { margin-top: 5px; justify-content: flex-start; }.upcoming-day .card-row-actions button { padding: 0 7px; font-size: .7rem; }
.functional-quick-add { display: grid; grid-template-columns: minmax(220px, 1fr) 75px auto auto; gap: 9px; align-items: center; padding: 20px 0 0; }.functional-quick-add label:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; color: #526172; font-size: .86rem; }.functional-quick-add input[type="text"], .functional-quick-add input:not([type]) { min-width: 0; }.functional-quick-add input { min-height: 36px; padding: 0 9px; border: 1px solid #415367; border-radius: 0; }.functional-quick-add label:not(:first-child) { display: flex; align-items: center; gap: 5px; color: #29405b; font-size: .86rem; font-weight: 750; }.functional-quick-add button { color: #fff; background: #238849; }
.upcoming-functional { margin-top: 20px; overflow: hidden; }.upcoming-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #d5dde6; gap: 1px; }.upcoming-grid-7 { grid-template-columns: repeat(7, minmax(180px, 1fr)); overflow-x: auto; }.upcoming-day { min-height: 280px; background: #eef4fb; }.upcoming-day > header { display: grid; gap: 3px; min-height: 98px; padding: 12px; border-bottom: 1px solid #cbd6e1; background: #e3edf8; }.upcoming-day > header b { color: #245fb4; }.upcoming-day > header span { color: #2d435c; font-size: .83rem; font-weight: 750; }.upcoming-day > header small { color: #526f8f; font-weight: 700; }.upcoming-day > header em { color: #6b7988; font-size: .74rem; font-style: normal; }.upcoming-day > header i { color: #238849; font-size: .74rem; font-style: normal; font-weight: 750; }.upcoming-day.is-overloaded > header { border-bottom-color: #dc5563; box-shadow: inset 0 -3px 0 #dc5563; }.upcoming-day.is-overloaded > header em { color: #bc3b46; font-weight: 750; }.upcoming-day-open, .upcoming-day-done { padding: 9px; }.forecast-card { display: grid; gap: 5px; margin-bottom: 8px; padding: 9px; border-left: 4px solid var(--forecast-color, #4a7ee9); background: #fff; box-shadow: 0 1px 1px rgba(38,57,80,.15); }.forecast-card.is-stretch { position: relative; }.forecast-card.is-stretch::after { position: absolute; right: 7px; bottom: 7px; color: var(--forecast-color, #4a7ee9); content: "↦"; font-size: .9rem; font-weight: 900; }.forecast-card.is-continuation { border-left-style: dashed; background: #fbfdff; }.forecast-card.is-complete { border-left-color: #8c99a7; background: #f1f4f6; opacity: .86; }.forecast-card-heading { display: flex; min-width: 0; align-items: flex-start; gap: 5px; justify-content: space-between; }.forecast-card-heading button { min-width: 0; padding: 0; border: 0; color: #263e59; background: transparent; font-size: .84rem; font-weight: 750; text-align: left; }.forecast-icons { display: flex; gap: 5px; color: #8a6a39; font-size: .8rem; }.forecast-icons a { color: #3971aa; text-decoration: none; }.forecast-card small, .upcoming-day p { color: #6c7a88; font-size: .76rem; }.forecast-card .note-progress { width: 100%; margin-top: 1px; }.forecast-card .card-row-actions { margin-top: 2px; justify-content: flex-start; }.forecast-card .card-row-actions button { padding: 0 7px; font-size: .7rem; }.forecast-continue { color: #587491; font-size: .74rem; font-weight: 750; }.upcoming-day-done { border-top: 1px dashed #becad5; background: rgba(223,230,237,.56); }.upcoming-day-done > b { display: block; margin: 0 0 7px; color: #687789; font-size: .73rem; letter-spacing: .04em; text-transform: uppercase; }.upcoming-day p { padding: 4px; }
.todo-functional { max-width: 1080px; }.todo-agenda-toolbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 20px; border-bottom: 1px solid #dce2e8; color: #687789; font-size: .83rem; }.todo-agenda-toolbar button + button { color: #334b65; background: #e9ecf0; }.todo-agenda-toolbar span { margin-left: auto; }.functional-list { min-height: 240px; }
.map-functional { overflow: hidden; }.map-functional > header > div:last-child { display: flex; gap: 8px; }.functional-map { position: relative; min-height: 660px; overflow: auto; background-color: #edf3fa; background-image: linear-gradient(#d7e1ec 1px, transparent 1px), linear-gradient(90deg, #d7e1ec 1px, transparent 1px); background-size: 30px 30px; }.functional-map-node { position: absolute; display: grid; gap: 7px; width: 205px; min-height: 82px; padding: 13px; border: 2px solid #7591ad; background: #fff; box-shadow: 0 2px 0 rgba(33, 56, 81, .18); }.functional-map-node.is-complete { opacity: .7; }.functional-map-node button { padding: 0; border: 0; color: #1d3754; background: transparent; font-weight: 750; text-align: left; }.functional-map-node small { color: #6e7a88; font-size: .77rem; }
.map-viewport { position: relative; min-height: 690px; overflow: hidden; background: #edf3fa; cursor: grab; touch-action: none; }.map-viewport:active { cursor: grabbing; }.map-viewport .functional-map { width: 2400px; height: 1800px; min-height: 0; overflow: visible; transform-origin: top left; will-change: transform; }.map-links { position: absolute; inset: 0; width: 2400px; height: 1800px; overflow: visible; pointer-events: none; }.map-links path { fill: none; stroke: #8db5e3; stroke-width: 2.5; stroke-linecap: round; }.functional-map-node { z-index: 2; cursor: move; user-select: none; }.functional-map-node.is-selected { box-shadow: 0 0 0 4px rgba(35, 120, 206, .28), 0 4px 12px rgba(33, 56, 81, .25); }.functional-map-node button { cursor: pointer; user-select: text; }
.map-links .map-hierarchy { stroke: #a6c7eb; stroke-width: 3; }.map-links .map-dependency { stroke: #365f93; stroke-dasharray: 8 5; stroke-width: 2.5; }.map-links marker path { fill: #365f93; stroke: none; }
.functional-map-node { display: block; width: 250px; min-height: 0; padding: 0; border-width: 2px; box-shadow: 0 2px 0 rgba(33, 56, 81, .2); background: #fff; }.functional-map-node > header { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; min-height: 37px; padding: 7px 8px; border-bottom: 1px solid #d9e2eb; background: #f9fbfd; }.functional-map-node .map-complete { width: 17px; height: 17px; padding: 0; border: 1px solid #6c83a0; color: #fff; background: #fff; font-size: .72rem; line-height: 1; text-align: center; }.functional-map-node.is-complete .map-complete { border-color: #20834c; background: #20834c; }.functional-map-node .map-title { overflow: hidden; color: #213d5d; font-size: .87rem; text-overflow: ellipsis; white-space: nowrap; }.functional-map-node > header a, .functional-map-node > header span { color: #315e91; font-size: .88rem; font-weight: 800; text-decoration: none; }.functional-map-node > p { overflow: hidden; margin: 0; padding: 6px 9px 0; color: #617386; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }.functional-map-node > p + p { padding-top: 3px; }.functional-map-node footer { min-height: 27px; margin-top: 7px; padding: 6px 9px; border-top: 1px solid #e0e6ed; background: #fbfcfd; }.functional-map-node footer small { display: block; overflow: hidden; color: #68798b; text-overflow: ellipsis; white-space: nowrap; }.map-progress { display: block; height: 4px; margin: 7px 9px 0; overflow: hidden; background: #e5ebf1; }.map-progress span { display: block; height: 100%; background: #2c8a51; }
.gantt-functional { overflow: hidden; }.gantt-scroll { overflow: auto; background: #f5f7f9; }.gantt-grid { display: grid; grid-template-columns: 280px repeat(14, minmax(64px, 1fr)); min-width: 1180px; }.gantt-corner, .gantt-date { display: grid; align-content: center; min-height: 64px; padding: 9px 11px; border-right: 1px solid #cbd5df; border-bottom: 1px solid #cbd5df; color: #35516d; background: #e7eef6; }.gantt-corner b, .gantt-date b { color: #1f456f; font-size: .83rem; }.gantt-corner span, .gantt-date small { margin-top: 3px; color: #708093; font-size: .72rem; }.gantt-date.is-today { background: #dceafa; box-shadow: inset 0 -3px 0 #2878ce; }.gantt-label { display: grid; align-content: center; min-height: 54px; padding: 7px 12px; border-right: 1px solid #d2dae3; border-bottom: 1px solid #dce2e8; background: #fff; }.gantt-label button { padding: 0; border: 0; color: #223c59; background: transparent; font-size: .85rem; font-weight: 750; text-align: left; }.gantt-label small { margin-top: 4px; color: #718091; font-size: .74rem; }.gantt-track { position: relative; display: grid; grid-column: 2 / -1; grid-template-columns: repeat(14, minmax(64px, 1fr)); min-height: 54px; border-bottom: 1px solid #dce2e8; background: #fff; }.gantt-track > i { min-width: 0; border-right: 1px solid #edf1f5; }.gantt-track > i:nth-child(7n), .gantt-track > i:nth-child(7n - 1) { background: #f7fafc; }.gantt-bar { z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-self: center; min-height: 29px; margin: 0 4px; padding: 0 8px; border-left: 4px solid color-mix(in srgb, var(--row-color) 72%, #162a42); color: #fff; background: var(--row-color); box-shadow: 0 1px 2px rgba(30, 50, 73, .28); }.gantt-bar button { min-width: 0; overflow: hidden; padding: 0; border: 0; color: #fff; background: transparent; font-size: .76rem; font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.gantt-bar small { align-self: center; color: rgba(255,255,255,.9); font-size: .7rem; }.gantt-empty { grid-column: 1 / -1; min-height: 240px; display: grid; place-items: center; color: #708092; background: #fff; }
.timeline-functional { overflow: hidden; }.timeline-days { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); min-height: 350px; overflow-x: auto; background: #edf3fa; }.timeline-day { min-width: 130px; border-right: 1px solid #cad4df; }.timeline-day:last-child { border-right: 0; }.timeline-day > header { display: grid; gap: 4px; min-height: 75px; padding: 11px; border-bottom: 1px solid #cad4df; background: #e6eef7; }.timeline-day > header b { color: #245fb4; }.timeline-day > header small { color: #697888; font-size: .76rem; }.timeline-day article, .timeline-unscheduled article { display: grid; gap: 4px; margin: 9px; padding: 9px; border-left: 4px solid var(--row-color, #4a7ee9); background: #fff; box-shadow: 0 1px 1px rgba(38, 57, 80, .15); }.timeline-day article button, .timeline-unscheduled article button { padding: 0; border: 0; color: #263e59; background: transparent; font-size: .84rem; font-weight: 750; text-align: left; }.timeline-day article small, .timeline-unscheduled article small { color: #6c7a88; }.timeline-drop { padding: 26px 10px; color: #8a97a5; font-size: .8rem; text-align: center; }.timeline-unscheduled { padding: 18px 21px; border-top: 1px solid #d4dce4; background: #f9fafb; }.timeline-unscheduled h3 { margin: 0 0 9px; color: #465d75; font-size: .86rem; text-transform: uppercase; }.timeline-unscheduled > p { color: #74818f; font-size: .85rem; }
.list-functional textarea { display: block; width: 100%; min-height: 500px; padding: 20px 24px; border: 0; color: #243c57; background: #fff; font: .92rem/1.9 Consolas, "Courier New", monospace; resize: vertical; }.list-functional footer { display: flex; justify-content: space-between; gap: 18px; padding: 11px 20px; border-top: 1px solid #d5dde5; color: #6d7a88; background: #f5f7f9; font-size: .78rem; }
.workshop-functional { max-width: 1200px; }.functional-schedule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #dce2e8; }.functional-schedule-list article { display: grid; gap: 5px; min-height: 94px; padding: 15px; background: #fff; }.functional-schedule-list article.is-late { border-left: 4px solid #dc5563; }.functional-schedule-list b { color: #273f5b; }.functional-schedule-list span { color: #66778a; font-size: .84rem; }.functional-schedule-list small { color: #2b8847; }.functional-schedule-list .is-late small { color: #c54251; }.functional-schedule-list > p { padding: 24px; color: #6e7c8b; background: #fff; }
.functional-milestones article { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 17px 20px; border-bottom: 1px solid #dce2e8; }.functional-milestones i { width: 13px; height: 13px; border: 1px solid #cf596b; background: #f49eb2; }.functional-milestones b { color: #223c58; }.functional-milestones p { margin: 4px 0 0; color: #6f7c8a; font-size: .84rem; }.functional-milestones span { color: #52667a; font-size: .85rem; }
.settings-functional { max-width: 1160px; }.settings-functional > form { display: flex; align-items: end; gap: 12px; padding: 20px; border-bottom: 1px solid #d9e0e7; }.settings-functional form label { display: grid; gap: 6px; color: #53667a; font-size: .84rem; font-weight: 750; }.settings-functional form input { min-height: 38px; width: 130px; padding: 0 8px; border: 1px solid #bdc8d4; }.settings-functional form button, .data-actions button, .file-button { min-height: 38px; padding: 0 12px; border: 0; color: #fff; background: #203c68; font-weight: 750; }.data-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px; }.data-actions section { min-height: 170px; padding: 16px; border: 1px solid #d1d9e2; background: #f9fafb; }.data-actions h3, .migration-status h3 { margin: 0; color: #29435f; font-size: 1rem; }.data-actions p, .migration-status p { color: #687788; font-size: .86rem; line-height: 1.45; }.data-actions button, .file-button { display: inline-grid; place-items: center; margin: 5px 6px 0 0; text-decoration: none; font-size: .82rem; }.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }.migration-status { margin: 0 20px 20px; padding: 15px; border-left: 4px solid #4181d6; background: #eef4fc; }.migration-status p { margin-bottom: 0; }
.functional-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(16, 31, 48, .52); }.functional-modal[hidden] { display: none; }.functional-dialog { width: min(940px, 100%); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid #8090a0; background: #fff; box-shadow: 0 24px 70px rgba(13, 28, 44, .32); }.functional-dialog > header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid #d2dae2; }.functional-dialog h2 { margin: 0; color: #1c3654; }.functional-dialog > header button { width: 32px; height: 32px; border: 0; color: #43576d; background: transparent; font-size: 1.4rem; }.functional-dialog form { padding: 20px 22px; }.dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }.dialog-grid label, .dialog-notes { display: grid; gap: 6px; color: #53667a; font-size: .82rem; font-weight: 750; }.dialog-grid input, .dialog-grid select, .dialog-notes textarea { min-height: 38px; padding: 8px; border: 1px solid #bcc8d4; border-radius: 0; color: #263e59; background: #fff; }.dialog-notes { margin-top: 16px; }.dialog-notes textarea { min-height: 170px; font-family: Consolas, "Courier New", monospace; line-height: 1.5; resize: vertical; }.note-tools { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 16px; padding: 9px; border: 1px solid #d9e0e7; background: #f5f7f9; }.note-tools button { min-height: 30px; padding: 0 9px; border: 1px solid #d1d9e1; color: #425971; background: #fff; font-size: .78rem; font-weight: 750; }.note-tools span { margin-left: auto; color: #72808e; font-size: .78rem; }.recurrence-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid #dce2e8; }.recurrence-fields label:first-child, .recurrence-fields label:nth-child(2) { display: flex; align-items: center; gap: 7px; padding-top: 20px; }.functional-dialog footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 9px; margin-top: 20px; }.functional-dialog footer button { min-height: 38px; padding: 0 14px; border: 0; color: #384f68; background: #e8ebef; font-weight: 750; }.functional-dialog footer button:first-child { color: #a93e4d; background: #fff0f1; }.functional-dialog footer .primary { color: #fff; background: #203c68; }
@media (max-width: 760px) { .functional-quick-add { grid-template-columns: 1fr; }.functional-quick-add label:first-child { grid-template-columns: 1fr; }.todo-agenda-toolbar { flex-wrap: wrap; }.todo-agenda-toolbar span { margin-left: 0; }.functional-card { grid-template-columns: 24px minmax(0, 1fr); }.card-row-actions { grid-column: 2; }.timeline-days { grid-template-columns: repeat(7, 160px); }.functional-schedule-list, .data-actions, .metrics-insights, .milestone-overview { grid-template-columns: 1fr; }.dialog-grid { grid-template-columns: 1fr; }.functional-dialog footer { grid-template-columns: 1fr 1fr; }.functional-dialog footer span { display: none; }.list-functional footer { display: grid; }.settings-functional > form { display: grid; align-items: stretch; }.settings-functional > form.settings-grid { grid-template-columns: 1fr; }.browser-bar { grid-template-columns: 1fr; }.activity-list li { display: grid; } }

.map-selection-box { position: absolute; z-index: 4; border: 1px solid #2f78c5; background: rgba(71, 139, 211, .15); pointer-events: none; }
.functional-map-node footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; }.map-card-handles { display: inline-flex; gap: 4px; }.functional-map-node .map-grab-handle { width: 21px; height: 21px; padding: 0; border: 1px solid #8fa3b8; color: #294f78; background: #f5f8fb; cursor: crosshair; font-size: .88rem; line-height: 1; text-align: center; }.functional-map-node .map-grab-handle:hover, .functional-map-node .map-grab-handle:focus-visible { color: #fff; background: #286fae; border-color: #286fae; outline: 2px solid #9fc6e9; outline-offset: 1px; }.functional-map-node .map-sequence-handle { color: #6a4b93; }.functional-map-node.is-link-target { box-shadow: 0 0 0 4px rgba(61, 144, 92, .35), 0 4px 12px rgba(33, 56, 81, .25); }.map-links .map-link-preview { stroke-width: 3; opacity: .8; }
.map-functional { border-color: #c9d6e3; box-shadow: 0 10px 30px rgba(38, 72, 103, .08); }.map-functional > header { min-height: 76px; background: #fff; }.map-functional > header p { color: #667d91; }.map-tools { align-items: center; }.map-tool { width: 34px; min-height: 34px; padding: 0 !important; border: 1px solid #d2dce6 !important; color: #315571 !important; background: #f5f7fa !important; font-size: 1.12rem; line-height: 1; }.map-tool:hover, .map-tool:focus-visible { border-color: #527ea2 !important; color: #fff !important; background: #315f88 !important; outline: 2px solid #b8d4e8; outline-offset: 2px; }.map-tool-add { color: #fff !important; background: #27835b !important; border-color: #27835b !important; font-size: 1.35rem; }.map-relationship-key { display: none; }.functional-map-node { overflow: visible; transition: transform .14s ease, box-shadow .14s ease; }.functional-map-node:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(33, 56, 81, .18); }.functional-map-node footer { min-height: 31px; background: #f8fafc; }.map-card-handles { gap: 6px; }.functional-map-node .map-grab-handle { width: 25px; height: 25px; border-radius: 50%; border-width: 2px; font-size: .7rem; font-weight: 900; }.functional-map-node .map-parent-handle { border-color: #299261; color: #fff; background: #299261; box-shadow: 0 2px 0 #167043; }.functional-map-node .map-sequence-handle { border-color: #7956b6; color: #fff; background: #7956b6; box-shadow: 0 2px 0 #553685; letter-spacing: -1px; }.functional-map-node .map-parent-handle:hover, .functional-map-node .map-parent-handle:focus-visible { background: #1c7448; border-color: #1c7448; outline-color: #a7dec0; }.functional-map-node .map-sequence-handle:hover, .functional-map-node .map-sequence-handle:focus-visible { background: #5b3d91; border-color: #5b3d91; outline-color: #d4c4f0; }.functional-map-node.is-link-target.is-parent-target { box-shadow: 0 0 0 5px rgba(41, 146, 97, .45), 0 8px 18px rgba(33, 56, 81, .22); }.functional-map-node.is-link-target.is-sequence-target { box-shadow: 0 0 0 5px rgba(121, 86, 182, .43), 0 8px 18px rgba(33, 56, 81, .22); }.map-links .map-link-preview.map-hierarchy { stroke: #299261; }.map-links .map-link-preview.map-dependency { stroke: #7956b6; }
.gantt-label > div { display: flex; gap: 5px; margin-top: 6px; }.gantt-label > div button { min-height: 22px; padding: 0 6px; border: 1px solid #c8d2de; color: #37526d; background: #f4f6f8; font-size: .68rem; }.gantt-label > div button:first-child { color: #fff; background: #235d50; border-color: #235d50; }.gantt-bar.is-late { filter: saturate(.88); box-shadow: inset 0 -3px 0 #d94f5d, 0 1px 2px rgba(30, 50, 73, .28); }

.settings-functional > form.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 18px; padding: 20px; }
.settings-grid > section { display: grid; gap: 11px; min-height: 300px; padding: 15px; border: 1px solid #d1d9e2; background: #f9fafb; }.settings-grid h3 { margin: 0; color: #29435f; font-size: 1rem; }.settings-grid fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 9px; border: 1px solid #d1d9e2; }.settings-grid legend { padding: 0 5px; color: #53667a; font-size: .8rem; font-weight: 750; }.settings-grid fieldset label, .checkbox-line { display: flex !important; align-items: center; gap: 5px; }.settings-grid > footer { grid-column: 1 / -1; display: flex; gap: 9px; }.settings-grid > footer button { min-height: 38px; padding: 0 12px; border: 0; color: #fff; background: #203c68; font-weight: 750; }.settings-grid > footer button + button { color: #334b65; background: #e8ebef; }.settings-help { color: #687788; font-size: .83rem; line-height: 1.45; }
.browser-functional { max-width: 1040px; }.browser-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 20px; border-bottom: 1px solid #d9e0e7; }.browser-bar label { display: grid; gap: 6px; color: #53667a; font-size: .84rem; font-weight: 750; }.browser-bar input { min-height: 39px; padding: 0 9px; border: 1px solid #bdc8d4; }.browser-bar button, .browser-actions button, .bookmark-list button { min-height: 38px; padding: 0 12px; border: 0; color: #fff; background: #203c68; font-weight: 750; }.browser-actions { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 20px 0; }.browser-actions button + button { color: #334b65; background: #e8ebef; }.browser-functional > .settings-help { margin: 14px 20px; }.bookmark-list { margin: 20px; border: 1px solid #d5dde5; }.bookmark-list h3 { margin: 0; padding: 12px 14px; border-bottom: 1px solid #d5dde5; color: #29435f; font-size: .92rem; }.bookmark-list p { padding: 0 14px; color: #687788; }.bookmark-list article { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid #e1e6eb; }.bookmark-list article a { overflow: hidden; color: #1f4d86; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.bookmark-list button { min-height: 30px; color: #983d48; background: #fff0f1; font-size: .76rem; }
.functional-info-body { padding: 20px 22px; color: #405469; }.functional-info-body p:first-child { margin-top: 0; }.functional-info-body form { display: grid; gap: 13px; }.functional-info-body form label { display: grid; gap: 6px; color: #53667a; font-size: .84rem; font-weight: 750; }.functional-info-body form select { min-height: 38px; padding: 0 8px; border: 1px solid #bcc8d4; }.activity-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid #d7dfe7; }.activity-list li { display: flex; justify-content: space-between; gap: 14px; padding: 10px; border-bottom: 1px solid #e2e7ed; }.activity-list li:last-child { border: 0; }.activity-list span { color: #718090; font-size: .8rem; }
.schedule-fields { margin-top: 16px; padding: 12px; border: 1px solid #d9e0e7; background: #f5f7f9; }.schedule-fields label { display: flex; align-items: center; gap: 7px; }.schedule-fields label:has(input[type="number"]), .schedule-fields .dependencies { display: grid; align-items: stretch; }.schedule-fields .dependencies { grid-column: 1 / -1; }.schedule-fields select[multiple] { min-height: 94px; }
.card-detail-fields { margin-top: 12px; padding: 12px; border: 1px solid #d9e0e7; background: #fbfcfd; }.inline-input-actions { display: flex; min-height: 38px; gap: 6px; align-items: center; }.inline-input-actions output { min-width: 0; overflow: hidden; color: #51667c; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }.inline-input-actions button { min-height: 32px; padding: 0 8px; border: 1px solid #bdc8d4; color: #294765; background: #fff; font-size: .76rem; font-weight: 750; white-space: nowrap; }.inline-input-actions button:disabled { opacity: .48; cursor: not-allowed; }.weekday-picker { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px 10px; margin: 0; padding: 8px; border: 1px solid #d3dce5; }.weekday-picker legend { padding: 0 4px; color: #53667a; font-size: .78rem; font-weight: 750; }.recurrence-fields .weekday-picker label { display: flex; align-items: center; gap: 4px; padding: 0; font-size: .76rem; }.functional-dialog footer { grid-template-columns: auto 1fr auto auto auto; }
.settings-advanced { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border-top: 1px solid #d9e0e7; background: #fbfcfd; }.settings-advanced h3 { grid-column: 1 / -1; margin: 0; color: #29435f; font-size: .96rem; }.settings-advanced label { display: grid; gap: 6px; color: #53667a; font-size: .82rem; font-weight: 750; }.settings-advanced input, .settings-advanced select { min-height: 36px; padding: 0 8px; border: 1px solid #bdc8d4; color: #263e59; background: #fff; }.settings-advanced .checkbox-line { display: flex; align-items: center; gap: 7px; }.settings-advanced .checkbox-line input { min-height: auto; }
[data-theme="dark"] { color-scheme: dark; } [data-theme="dark"] body { color: #dce6f2; background: #16202d; } [data-theme="dark"] .functional-section, [data-theme="dark"] .functional-card, [data-theme="dark"] .gantt-label, [data-theme="dark"] .gantt-track, [data-theme="dark"] .functional-dialog { color: #dce6f2; background: #1d2a39; border-color: #41546a; } [data-theme="dark"] .functional-section > header, [data-theme="dark"] .functional-card, [data-theme="dark"] .gantt-label, [data-theme="dark"] .gantt-track, [data-theme="dark"] .settings-grid > section, [data-theme="dark"] .bookmark-list { border-color: #41546a; } [data-theme="dark"] .functional-section > header h2, [data-theme="dark"] .card-title-link, [data-theme="dark"] .gantt-label button, [data-theme="dark"] .functional-dialog h2 { color: #f0f6ff; } [data-theme="dark"] .settings-grid > section, [data-theme="dark"] .data-actions section, [data-theme="dark"] .bookmark-list, [data-theme="dark"] .timeline-unscheduled { background: #202e3f; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color: #eef5ff !important; background: #172332 !important; border-color: #54697f !important; }

/* Desktop MarccY: a compact health character anchored beside the daily quote. */
.quote-panel { position: relative; padding-right: 244px; }
.health-companion { --robot-accent: #1b9a72; --robot-eye: #b8ffe8; position: absolute; z-index: 2; top: -56px; right: 2px; width: 220px; height: 164px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.health-companion:hover .health-robot, .health-companion:focus-visible .health-robot { transform: translateY(-2px); filter: drop-shadow(0 6px 7px rgba(20, 35, 55, .18)); }
.health-companion:focus-visible { outline: 2px solid #4f8fd2; outline-offset: 3px; }
.health-robot { position: relative; display: block; width: 220px; height: 160px; margin: 0; transition: transform .16s ease, filter .16s ease; }
.robot-head { position: absolute; top: 10px; left: 86px; width: 48px; height: 48px; box-sizing: border-box; border: 2px solid #263142; border-radius: 50%; background: #111722; }
.robot-antenna { position: absolute; z-index: 1; top: 58px; left: 108px; width: 3px; height: 12px; background: #263142; }.robot-antenna i { position: absolute; top: -56px; left: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--robot-accent); }
.robot-body { position: absolute; top: 46px; left: 48px; width: 124px; height: 86px; box-sizing: border-box; border: 2px solid #334155; border-radius: 3px; background: #141b26; }
.robot-side { position: absolute; top: 22px; width: 8px; height: 36px; box-sizing: border-box; border: 1px solid #334155; background: #263142; }.robot-side-left { left: -8px; }.robot-side-right { right: -8px; }
.robot-screen { position: absolute; top: 10px; left: 10px; width: 100px; height: 52px; box-sizing: border-box; border: 2px solid var(--robot-accent); background: #0b1220; }
.robot-eye { position: absolute; top: 15px; width: 21px; height: 21px; box-sizing: border-box; border: 2px solid var(--robot-accent); border-radius: 50%; background: var(--robot-eye); }.robot-eye-left { left: 16px; }.robot-eye-right { right: 16px; }.robot-eye::after { content: ""; position: absolute; top: 5px; left: 5px; width: 7px; height: 7px; border-radius: 50%; background: #071015; }
.robot-mouth { position: absolute; left: 29px; bottom: 5px; width: 38px; height: 14px; border-bottom: 3px solid var(--robot-accent); border-radius: 0 0 50% 50%; }
.robot-base { position: absolute; top: 124px; left: 72px; width: 76px; height: 16px; box-sizing: border-box; overflow: hidden; border: 1px solid #263142; border-radius: 8px; background: #111722; }.robot-base i { display: block; height: 100%; background: var(--robot-accent); }
.robot-score, .robot-goal { position: absolute; left: 0; width: 100%; margin: 0 !important; text-align: center; }.robot-score { top: 145px; color: #17243a; font-size: .76rem; line-height: 1; }.robot-goal { top: 156px; color: #657284; font-size: .62rem; font-weight: 750; }
.health-steady { --robot-accent: #2878d5; --robot-eye: #d8e8ff; }.health-watchlist { --robot-accent: #d9941f; --robot-eye: #ffe8b8; }.health-redline { --robot-accent: #ff647c; --robot-eye: #ffd6de; }
.health-watchlist .robot-mouth { border-radius: 0; }.health-redline .robot-mouth { bottom: 5px; border-top: 3px solid var(--robot-accent); border-bottom: 0; border-radius: 50% 50% 0 0; }.health-redline .robot-eye { transform: rotate(-8deg); }.health-redline .robot-eye-right { transform: rotate(8deg); }
@media (max-width: 760px) { .quote-panel { padding-right: 24px; padding-bottom: 144px; }.health-companion { top: auto; right: 50%; bottom: -32px; transform: translateX(50%); }.health-companion:hover .health-robot, .health-companion:focus-visible .health-robot { transform: translateY(-2px); } }

.settings-functional > header { align-items: center; }.settings-grid > section { align-content: start; }.settings-grid > footer { align-items: center; justify-content: flex-end; margin-top: 2px; padding-top: 16px; border-top: 1px solid #d9e0e7; }.settings-grid > footer output { flex: 1; color: #5c6d80; font-size: .8rem; }.settings-grid > footer button[data-action="reset-settings"] { color: #8f3d48; background: #fff0f1; }.settings-grid input[type="number"], .settings-grid input[type="date"], .settings-grid input[type="time"], .settings-grid select { width: 100%; box-sizing: border-box; }.settings-grid .checkbox-line { min-height: 26px; color: #3f546a; font-size: .8rem; }.settings-grid .settings-help { margin: 3px 0 0; padding-top: 10px; border-top: 1px solid #e0e6ec; }.data-actions > section { display: flex; flex-direction: column; align-items: flex-start; }.data-actions > section p { flex: 1; }
@media (max-width: 760px) { .settings-grid > footer { display: grid; grid-template-columns: 1fr 1fr; }.settings-grid > footer output { grid-column: 1 / -1; }.settings-grid > footer button { width: 100%; } }