:root {
  color-scheme: light;
  --blue: #4c75d8;
  --blue-soft: #e3ebfa;
  --ink: #26313d;
  --muted: #87929e;
  --line: #e4e8ec;
  --side: #f4f6f7;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #eef1f3; color: var(--ink); }
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(76, 117, 216, .45); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell {
  width: min(1180px, calc(100% - 32px));
  min-height: calc(100vh - 32px);
  margin: 16px auto;
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d9dee3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(27, 39, 52, .08);
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 10px;
  border-right: 1px solid var(--line);
  background: var(--side);
}
.brand { height: 58px; padding: 0 8px; display: flex; align-items: center; gap: 9px; font-weight: 700; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.primary-button { border: 0; border-radius: 7px; padding: 10px; color: #fff; background: var(--blue); transition: background .15s; }
.primary-button:hover, .save-button:hover, .mobile-add:hover { background: #3f67c7; }
.sidebar-nav, .project-list { display: grid; gap: 2px; margin-top: 13px; }
.sidebar-nav button, .project-list button {
  min-width: 0; border: 0; border-radius: 7px; padding: 9px;
  display: flex; align-items: center; gap: 8px; text-align: left;
  color: #536170; background: transparent;
}
.sidebar-nav button:hover, .project-list button:hover { background: #eaedef; }
.sidebar-nav button.active, .project-list button.active { color: #27426f; background: var(--blue-soft); }
.sidebar-nav em, .project-list em { margin-left: auto; color: var(--muted); font-size: 11px; font-style: normal; }
.nav-icon { width: 17px; color: #758493; text-align: center; }
.sidebar-heading { margin: 22px 9px 6px; display: flex; justify-content: space-between; color: #919aa4; font-size: 11px; }
.sidebar-heading button { border: 0; color: inherit; background: transparent; }
.project-list { margin-top: 0; }
.project-list i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 2px; background: #aab2bb; }
.project-list .active i { background: var(--blue); }
.project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer { margin: auto -10px 0; padding: 13px 18px; border-top: 1px solid var(--line); color: #929ca7; font-size: 10px; }

.workspace { min-width: 0; background: #fff; }
.remote-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.toolbar { height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.toolbar h1 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 650; }
.toolbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.toolbar-actions button { width: 34px; height: 34px; border: 0; border-radius: 7px; color: #667482; background: transparent; font-size: 21px; }
.toolbar-actions button:hover { background: #f1f3f5; }
.toolbar-actions .project-settings { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.mobile-add, .mobile-project-picker { display: none; }
.search-bar { height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-bottom: 1px solid var(--line); background: #fafbfb; }
.search-bar input { flex: 1; height: 34px; border: 1px solid #d9dfe5; border-radius: 7px; padding: 0 10px; color: var(--ink); background: #fff; }
.search-bar button { border: 0; color: var(--blue); background: transparent; }
.content { padding: 18px 20px 30px; }
.quick-add { width: 100%; height: 42px; border: 1px solid #dce1e6; border-radius: 7px; padding: 0 12px; text-align: left; color: #98a2ad; background: #fafbfb; }
.quick-add:hover { border-color: #bdc9d5; color: #6d7a88; }

.task-group { margin-top: 18px; }
.task-group > header { height: 31px; display: flex; align-items: center; gap: 8px; padding: 0 7px; border-bottom: 1px solid #dfe4e8; color: #65717e; font-size: 12px; font-weight: 650; }
.task-group header b { width: 3px; height: 14px; border-radius: 2px; background: #a8b1ba; }
.task-group.status-now header b { background: var(--blue); }
.task-group header span { margin-left: auto; color: #96a0aa; font-weight: 400; }
.task-row {
  min-height: 49px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(55px, auto) 104px 105px;
  align-items: center;
  gap: 10px;
  padding: 0 7px;
  border-bottom: 1px solid #edf0f2;
}
.task-row:hover { background: #fafbfc; }
.task-row .check { width: 17px; height: 17px; padding: 0; border: 1px solid #b8c1ca; border-radius: 50%; color: #fff; background: transparent; font-size: 11px; line-height: 15px; }
.task-row .check.checked { border-color: #7aa288; background: #7aa288; }
.task-title { min-width: 0; border: 0; padding: 7px 0; display: flex; align-items: center; gap: 6px; text-align: left; color: var(--ink); background: transparent; }
.task-title > span:not(.priority-flag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.task-title i { color: #9aa4ae; font-style: normal; }
.priority-flag { color: #d45e56; }
.task-meta, .task-row time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.task-row time { text-align: right; }
.status-picker select { width: 104px; border: 0; padding: 5px 20px 5px 6px; color: #788490; background: transparent; font-size: 10px; }
.is-completed .task-title > span:not(.priority-flag) { color: #929ca6; text-decoration: line-through; }
.empty-row { width: 100%; height: 36px; border: 0; padding: 0 35px; text-align: left; color: #a0a9b2; background: transparent; font-size: 11px; }
.empty-row:hover { color: var(--blue); }
.empty-state { padding: 54px 0; color: #98a2ad; text-align: center; font-size: 13px; }

.dialog-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(24, 31, 40, .32); backdrop-filter: blur(2px); }
.dialog { width: min(520px, 100%); border: 1px solid #dce1e5; border-radius: 12px; padding: 18px; background: #fff; box-shadow: 0 24px 70px rgba(20, 27, 35, .24); }
.small-dialog { width: min(410px, 100%); }
.dialog > header { display: flex; align-items: center; margin-bottom: 18px; }
.dialog h2 { margin: 0; font-size: 17px; }
.dialog > header button { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 6px; color: #77828d; background: transparent; font-size: 20px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { color: #697582; font-size: 11px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d8dee4; border-radius: 7px; padding: 9px 10px; color: var(--ink); background: #fff; }
.field textarea { resize: vertical; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.priority-check { display: flex; align-items: center; gap: 8px; color: #687481; font-size: 12px; }
.dialog footer { margin-top: 20px; display: flex; align-items: center; gap: 8px; }
.dialog footer span { flex: 1; }
.dialog footer button { border-radius: 7px; padding: 8px 15px; }
.secondary-button { border: 1px solid #d7dde3; color: #65717d; background: #fff; }
.save-button { border: 1px solid var(--blue); color: #fff; background: var(--blue); }
.danger-button { border: 0; color: #c84d47; background: transparent; }
.danger-button:disabled { color: #b7bec5; cursor: not-allowed; }
.danger-confirm-button { border: 1px solid #c84d47; color: #fff; background: #c84d47; }
.project-delete-warning { margin: 2px 0 4px; padding: 10px 11px; border-radius: 7px; color: #9d3935; background: #fff0ef; font-size: 11px; line-height: 1.55; }
.dialog-hint { margin: 2px 0 4px; color: #8b959f; font-size: 11px; }

@media (max-width: 760px) {
  html, body { background: #fff; }
  .app-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .toolbar { height: 60px; padding: 0 14px; }
  .toolbar h1 { display: none; }
  .mobile-project-picker { display: block; min-width: 0; }
  .mobile-project-picker select { max-width: 210px; border: 0; padding: 7px 22px 7px 0; color: var(--ink); background: transparent; font-size: 16px; font-weight: 650; }
  .toolbar-actions button.mobile-add { display: grid; place-items: center; color: #fff; background: var(--blue); font-size: 20px; }
  .search-bar { padding: 8px 14px; }
  .content { padding: 13px 14px 28px; }
  .quick-add { height: 40px; }
  .task-group { margin-top: 14px; }
  .task-group > header { height: 30px; padding: 0 5px; }
  .task-row { min-height: 52px; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; padding: 0 5px; }
  .task-title { align-self: stretch; }
  .task-title > span:not(.priority-flag) { font-size: 12px; }
  .task-meta, .status-picker { display: none; }
  .task-row time { min-width: 62px; font-size: 9px; }
  .empty-row { padding-left: 31px; }
  .dialog-backdrop { align-items: end; padding: 0; }
  .dialog, .small-dialog { width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 14px 14px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
}

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

.remote-fieldset{border:0;padding:0;margin:0;min-width:0}.remote-login{min-height:100vh;display:grid;place-items:center;padding:20px}.remote-login h1{font-size:22px}.remote-login p{color:#687481;font-size:13px}.remote-login .save-button{padding:10px 20px;border-radius:7px}.remote-status{padding:8px 20px;background:#f5f8fb;color:#687481;font-size:12px}.remote-status button{margin-left:10px}.remote-fieldset:disabled{opacity:.6}