/* People & Systems - internal operations UI
   Restrained, professional, fast. */

:root {
  --bg:        #f4f6f9;
  --panel:     #ffffff;
  --panel-2:   #fafbfd;
  --border:    #e2e7ee;
  --border-2:  #cfd7e3;
  --text:      #17202b;
  --text-2:    #4a5768;
  --muted:     #7b8798;
  --accent:    #2563eb;
  --accent-dk: #1d4ed8;
  --accent-bg: #eaf0fe;

  --overdue:   #d3352b;
  --overdue-bg:#fdecea;
  --today:     #c2410c;
  --today-bg:  #fff1e7;
  --soon:      #a16207;
  --soon-bg:   #fdf6e3;
  --progress:  #1d4ed8;
  --progress-bg:#e8effd;
  --waiting:   #6d28d9;
  --waiting-bg:#f2ecfd;
  --done:      #15803d;
  --done-bg:   #e9f6ee;
  --neutral-bg:#eef1f5;

  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 14px rgba(16,24,40,.10);
  --shadow-lg: 0 18px 48px rgba(16,24,40,.20);
  --sidebar: 236px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { margin: 0; font-weight: 640; letter-spacing: -.011em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- boot -- */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 90; }
.boot-inner { text-align: center; color: var(--muted); }
.spinner {
  width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%;
  border: 2.5px solid var(--border-2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- login -- */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(1100px 500px at 50% -10%, #e8eefb 0%, var(--bg) 60%); }
.auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md); padding: 30px 28px; }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.auth-logo .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.auth-card h1 { font-size: 19px; }
.auth-card .sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.auth-card form { margin-top: 20px; display: grid; gap: 14px; }

/* --------------------------------------------------------------- shell -- */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100dvh; }

.sidebar { background: #1b2534; color: #c8d2e0; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh; }
.brand { padding: 18px 18px 14px; display: flex; align-items: center; gap: 10px; }
.brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color:#fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.brand b { color: #fff; font-size: 14.5px; letter-spacing: -.01em; line-height: 1.15; }
.brand small { display: block; color: #8695ab; font-weight: 500; font-size: 11.5px; }
.nav { padding: 6px 10px; display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: #c0cbdb; font-size: 14px; font-weight: 500; }
.nav a:hover { background: #26324492; color: #fff; }
.nav a.active { background: var(--accent); color: #fff; font-weight: 600; }
.nav a .ico { width: 17px; text-align: center; opacity: .95; font-size: 14px; }
.nav a .pill { margin-left: auto; background: #33415588; color: #dbe4f0; font-size: 11.5px;
  padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.nav a.active .pill { background: #ffffff2e; color: #fff; }
.nav a .pill.alert { background: var(--overdue); color: #fff; }
.nav-sep { margin: 10px 16px 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #6d7c92; font-weight: 700; }
.side-foot { margin-top: auto; padding: 12px; border-top: 1px solid #2b3749; }
.side-user { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; }
.side-user .avatar { flex: none; }
.side-user b { color: #fff; font-size: 13px; display: block; }
.side-user span { color: #8695ab; font-size: 11.5px; }
.side-foot button { width: 100%; margin-top: 8px; background: #26324a; border: 1px solid #34425c;
  color: #c8d2e0; border-radius: 8px; padding: 6px; font-size: 12.5px; cursor: pointer; }
.side-foot button:hover { background: #303e57; color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: #fffffff2; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); padding: 10px 22px; display: flex; align-items: center; gap: 12px; }
.searchbox { position: relative; flex: 1; max-width: 460px; }
.searchbox input[type=text] { width: 100%; padding: 8px 12px 8px 38px; border: 1px solid var(--border-2);
  border-radius: 8px; background: var(--panel-2); }
.searchbox input:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); background: #fff; }
.searchbox .mag { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted);
  font-size: 12px; line-height: 1; pointer-events: none; }
.topbar .grow { flex: 1; }
.sync { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sync .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--done); }
.sync.stale .dot { background: var(--soon); }
.sync.err .dot { background: var(--overdue); }

.content { padding: 22px; max-width: 1360px; width: 100%; }
.page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 22px; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ controls -- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--panel); color: var(--text-2);
  font-size: 13.5px; font-weight: 560; cursor: pointer; box-shadow: var(--shadow-sm); white-space: nowrap; }
.btn:hover { background: var(--panel-2); color: var(--text); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dk); color: #fff; }
.btn.danger { color: var(--overdue); border-color: #f0c7c3; background: #fff; }
.btn.danger:hover { background: var(--overdue-bg); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--neutral-bg); }
.btn.sm { padding: 5px 9px; font-size: 12.5px; }
.btn.block { width: 100%; justify-content: center; }

.field { display: grid; gap: 5px; }
.field > label { font-size: 12.5px; font-weight: 620; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time],
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 8px;
  background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-bg); border-color: var(--accent); }
textarea { resize: vertical; min-height: 70px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.err-text { color: var(--overdue); font-size: 13px; background: var(--overdue-bg);
  border: 1px solid #f3ccc8; padding: 8px 10px; border-radius: 8px; }
.ok-text { color: var(--done); font-size: 13px; background: var(--done-bg);
  border: 1px solid #c8e6d3; padding: 8px 10px; border-radius: 8px; }

/* -------------------------------------------------------------- panels -- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.panel-head h2 { font-size: 14.5px; }
.panel-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-body { padding: 14px 16px; }
.panel-body.flush { padding: 0; }
.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }

.stats { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 14px; box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; position: relative; }
.stat:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); }
.stat .k { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.stat .v { font-size: 26px; font-weight: 680; letter-spacing: -.02em; margin-top: 3px; }
.stat.is-overdue .v { color: var(--overdue); }
.stat.is-today .v { color: var(--today); }
.stat.is-progress .v { color: var(--progress); }
.stat.is-waiting .v { color: var(--waiting); }

/* --------------------------------------------------------------- chips -- */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.chip.overdue  { background: var(--overdue-bg);  color: var(--overdue);  border-color:#f3ccc8; }
.chip.today    { background: var(--today-bg);    color: var(--today);    border-color:#f8d6bf; }
.chip.soon     { background: var(--soon-bg);     color: var(--soon);     border-color:#efe0b3; }
.chip.progress { background: var(--progress-bg); color: var(--progress); border-color:#c9dafb; }
.chip.waiting  { background: var(--waiting-bg);  color: var(--waiting);  border-color:#ddd0f8; }
.chip.done     { background: var(--done-bg);     color: var(--done);     border-color:#c5e5d1; }
.chip.neutral  { background: var(--neutral-bg);  color: var(--text-2);   border-color:#dfe4ec; }
.chip.urgent   { background:#fdecea; color:#b02418; border-color:#f3ccc8; }
.chip.high     { background:#fff1e7; color:#b4470f; border-color:#f8d6bf; }
.chip.medium   { background:#eef1f5; color:#50607a; border-color:#dfe4ec; }
.chip.low      { background:#f2f5f9; color:#7b8798; border-color:#e6eaf1; }

.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); flex: none; }
.avatar.sm { width: 21px; height: 21px; font-size: 9.5px; }
.who { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------- table -- */
.tbl-wrap { overflow-x: auto; }
table.tasks { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tasks th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel-2); white-space: nowrap; position: sticky; top: 0; }
table.tasks th.sortable { cursor: pointer; user-select: none; }
table.tasks th.sortable:hover { color: var(--text); }
table.tasks td { padding: 10px 12px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
table.tasks td:last-child { white-space: nowrap; text-align: right; }
table.tasks tbody tr { cursor: pointer; }
table.tasks tbody tr:hover { background: #f8fafd; }
table.tasks tr.done td { color: var(--muted); }
table.tasks tr.done .t-title { text-decoration: line-through; text-decoration-color: #b9c2cf; }
.t-title { font-weight: 580; color: var(--text); }
.t-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.t-flag { display: inline-block; width: 4px; height: 30px; border-radius: 3px; background: transparent; }
.empty { padding: 30px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }
.empty .big { font-size: 22px; display: block; margin-bottom: 6px; opacity: .5; }

/* ----------------------------------------------------------- task list -- */
.tasklist { display: grid; }
.titem { display: flex; gap: 11px; align-items: flex-start; padding: 11px 16px;
  border-bottom: 1px solid #eef1f5; cursor: pointer; }
.titem:last-child { border-bottom: 0; }
.titem:hover { background: #f8fafd; }
.titem .bar { width: 3px; align-self: stretch; border-radius: 3px; background: var(--border-2); flex: none; }
.titem.p-urgent .bar { background: var(--overdue); }
.titem.p-high   .bar { background: var(--today); }
.titem.p-medium .bar { background: var(--border-2); }
.titem.p-low    .bar { background: #e6eaf1; }
.titem .body { flex: 1; min-width: 0; }
.titem .name { font-weight: 570; }
.titem.done .name { text-decoration: line-through; color: var(--muted); }
.titem .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }

/* ------------------------------------------------------------ team row -- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.person { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 13px;
  background: var(--panel); cursor: pointer; box-shadow: var(--shadow-sm); }
.person:hover { border-color: var(--accent); background: var(--accent-bg); }
.person .top { display: flex; align-items: center; gap: 9px; }
.person b { font-size: 14px; }
.person .nums { display: flex; gap: 12px; margin-top: 9px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.person .nums i { font-style: normal; font-weight: 700; }
.person .nums .od i { color: var(--overdue); }
.person .nums .td i { color: var(--today); }
.person .nums .ip i { color: var(--progress); }

/* ---------------------------------------------------------- daily work -- */
.daily-add { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.daily-add input { flex: 1; }
.dlist { display: grid; }
.ditem { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #eef1f5; }
.ditem:last-child { border-bottom: 0; }
.ditem .txt { flex: 1; min-width: 0; }
.ditem.s-completed .txt { text-decoration: line-through; color: var(--muted); }
.ditem.s-carry .txt { color: var(--text-2); }
.ditem .tools { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.ditem:hover .tools, .ditem:focus-within .tools { opacity: 1; }
@media (hover: none) { .ditem .tools { opacity: 1; } }
.tick { width: 19px; height: 19px; border-radius: 5px; border: 1.6px solid var(--border-2);
  background: #fff; cursor: pointer; flex: none; display: grid; place-items: center; color: transparent;
  font-size: 12px; line-height: 1; }
.tick:hover { border-color: var(--done); }
.tick.on { background: var(--done); border-color: var(--done); color: #fff; }

/* ------------------------------------------------------------ calendar -- */
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-toolbar .title { font-size: 17px; font-weight: 650; min-width: 190px; }
.seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden;
  background: var(--panel); box-shadow: var(--shadow-sm); }
.seg button { border: 0; background: transparent; padding: 7px 13px; cursor: pointer;
  font-size: 13px; font-weight: 560; color: var(--text-2); border-right: 1px solid var(--border); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: #fff; }

.cal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); }
.cal-head { display: grid; grid-template-columns: repeat(7,1fr); background: var(--panel-2);
  border-bottom: 1px solid var(--border); }
.cal-head div { padding: 8px 10px; font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.cal-grid { display: grid; grid-template-columns: repeat(7,1fr); }
.cal-cell { min-height: 116px; min-width: 0; overflow: hidden; border-right: 1px solid #eef1f5;
  border-bottom: 1px solid #eef1f5; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.off { background: #fafbfd; }
.cal-cell.is-today { background: #fff8f3; box-shadow: inset 0 0 0 2px #f9c8a5; }
.cal-cell.drop { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-date { font-size: 12px; font-weight: 640; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.cal-cell.off .cal-date { color: #b3bcc9; }
.cal-cell.is-today .cal-date { color: var(--today); }
.cal-cell.is-today .cal-date .badge { background: var(--today); color: #fff; border-radius: 5px; padding: 0 5px; }
.cal-add { margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; opacity: 0; }
.cal-cell:hover .cal-add { opacity: 1; }
.cal-ev { border: 1px solid transparent; border-left-width: 3px; border-radius: 5px; padding: 3px 6px;
  font-size: 11.8px; cursor: pointer; background: var(--neutral-bg); overflow: hidden; }
.cal-ev:hover { filter: brightness(.97); }
.cal-ev .l1 { display: flex; align-items: center; gap: 4px; font-weight: 600; min-width: 0; }
.cal-ev .l1 > span:first-child { flex: none; }
.cal-ev .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev .l2 { color: var(--muted); font-size: 10.8px; margin-top: 1px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.cal-ev.e-overdue  { background: var(--overdue-bg);  border-color:#f3ccc8; border-left-color: var(--overdue); }
.cal-ev.e-today    { background: var(--today-bg);    border-color:#f8d6bf; border-left-color: var(--today); }
.cal-ev.e-soon     { background: var(--soon-bg);     border-color:#efe0b3; border-left-color: var(--soon); }
.cal-ev.e-progress { background: var(--progress-bg); border-color:#c9dafb; border-left-color: var(--progress); }
.cal-ev.e-waiting  { background: var(--waiting-bg);  border-color:#ddd0f8; border-left-color: var(--waiting); }
.cal-ev.e-done     { background: #f4f6f9; border-color:#e6eaf1; border-left-color:#b9c2cf; opacity:.72; }
.cal-ev.e-done .nm { text-decoration: line-through; }
.cal-ev.dragging { opacity: .4; }
.cal-more { font-size: 11px; color: var(--accent); cursor: pointer; padding-left: 4px; font-weight: 600; }

.cal-day-list { display: grid; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; font-style: normal; }

/* --------------------------------------------------------------- modal -- */
.overlay { position: fixed; inset: 0; background: rgba(16,24,40,.42); z-index: 60;
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.modal { background: var(--panel); border-radius: 13px; box-shadow: var(--shadow-lg); width: 100%;
  max-width: 620px; overflow: hidden; animation: pop .13s ease-out; }
.modal.wide { max-width: 780px; }
.modal.narrow { max-width: 440px; }
@keyframes pop { from { transform: translateY(-6px); opacity: .6; } }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 13px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16.5px; }
.modal-head .x { margin-left: auto; border: 0; background: transparent; font-size: 20px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.modal-head .x:hover { background: var(--neutral-bg); color: var(--text); }
.modal-body { padding: 16px 18px; display: grid; gap: 14px; max-height: 72vh; overflow-y: auto; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px;
  align-items: center; background: var(--panel-2); }
.modal-foot .right { margin-left: auto; display: flex; gap: 8px; }

.dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; font-size: 13.5px; }
.dl dt { color: var(--muted); font-weight: 600; font-size: 12.5px; padding-top: 1px; }
.dl dd { margin: 0; }
.detail-block { border-top: 1px solid var(--border); padding-top: 13px; }
.detail-block h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.prewrap { white-space: pre-wrap; }

.timeline { display: grid; gap: 0; }
.tl { display: grid; grid-template-columns: 15px 1fr; gap: 10px; }
.tl .rail { display: flex; flex-direction: column; align-items: center; }
.tl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); margin-top: 5px; flex: none; }
.tl .line { width: 1.5px; flex: 1; background: var(--border); min-height: 10px; }
.tl:last-child .line { background: transparent; }
.tl .txt { padding-bottom: 12px; font-size: 13px; }
.tl .when { color: var(--muted); font-size: 11.5px; }
.tl.a-completed .dot { background: var(--done); }
.tl.a-created   .dot { background: var(--accent); }
.tl.a-deleted   .dot { background: var(--overdue); }

/* --------------------------------------------------------------- misc --- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar select, .toolbar input[type=date] { width: auto; min-width: 130px; padding: 7px 9px; font-size: 13px; }
.tabs { display: flex; gap: 2px; background: var(--neutral-bg); padding: 3px; border-radius: 9px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; padding: 6px 12px; border-radius: 7px; cursor: pointer;
  font-size: 13px; font-weight: 570; color: var(--text-2); }
.tabs button.on { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: grid; gap: 8px; max-width: 340px; }
.toast { background: #1b2534; color: #fff; padding: 10px 13px; border-radius: 9px; font-size: 13.5px;
  box-shadow: var(--shadow-lg); animation: pop .15s; }
.toast.bad { background: var(--overdue); }
.toast.good { background: #14683a; }

.banner { background: var(--soon-bg); border: 1px solid #efe0b3; color: #7a5310; padding: 9px 13px;
  border-radius: 9px; font-size: 13px; display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.banner.bad { background: var(--overdue-bg); border-color: #f3ccc8; color: #96271d; }
.banner .btn { margin-left: auto; }

.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 700; margin: 18px 0 8px; }
.mini-note { font-size: 12.5px; color: var(--muted); }
.mobile-only { display: none; }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 70; width: 250px; height: 100dvh; left: 0; top: 0;
    transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow-lg); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content:''; position: fixed; inset: 0; background: rgba(16,24,40,.4); z-index: 65; }
  .mobile-only { display: inline-flex; }
  .content { padding: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .stat .v { font-size: 22px; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .cal-cell { min-height: 84px; padding: 4px; }
  .cal-ev .l2 { display: none; }
  .topbar { padding: 9px 12px; }
  .topbar .grow, .topbar .sync { display: none; }
  .searchbox { min-width: 0; }
  .page-head .actions .btn:first-child { display: none; }
  .page-head h1 { font-size: 19px; }
  table.tasks .hide-sm { display: none; }
  .overlay { padding: 0; align-items: stretch; }
  .modal { max-width: none; border-radius: 0; min-height: 100dvh; }
  .modal-body { max-height: none; }
  .dl { grid-template-columns: 100px 1fr; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cal-cell { min-height: 62px; }
  .cal-ev .l1 { font-size: 10.5px; }
}
@media print { .sidebar, .topbar, .btn { display: none; } }