:root {
  color-scheme: light;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20223d;
  background: #f5f6ff;
  font-synthesis: none;
  --ink: #20223d;
  --purple: #6c5ce7;
  --blue: #3f7cff;
  --pink: #ff6685;
  --lime: #c9f36a;
  --line: #e5e6f3;
  --muted: #777b98;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #171a35; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #ece9ff 0, transparent 32rem), #f5f6ff; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(108, 92, 231, .24); 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; }
.mini-label { margin: 0; color: #8b8da7; font-size: .75rem; font-weight: 900; letter-spacing: .12em; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.side-panel { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 42px; padding: 30px 20px; overflow: hidden; color: #f9f9ff; background: #171a35; }
.side-panel::before, .side-panel::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.side-panel::before { width: 160px; height: 160px; left: -85px; top: 42%; background: rgba(108, 92, 231, .26); }
.side-panel::after { width: 130px; height: 130px; right: -72px; bottom: 5%; background: rgba(63, 124, 255, .18); }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 0 9px; font-size: 1.08rem; font-weight: 850; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #171a35; background: var(--lime); box-shadow: 0 8px 25px rgba(201,243,106,.18); font-weight: 950; }
.desktop-nav { position: relative; z-index: 1; display: grid; gap: 7px; }
.nav-item { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 49px; padding: 0 14px; border: 0; border-radius: 14px; color: #9fa4c7; background: transparent; text-align: left; font-size: .92rem; font-weight: 750; }
.nav-item span { display: flex; align-items: center; gap: 11px; }
.nav-item i { width: 22px; color: #7c83af; font-style: normal; text-align: center; }
.nav-item b { min-width: 27px; padding: 4px 8px; border-radius: 20px; color: #b9bee1; background: #272b4c; font-size: .75rem; text-align: center; }
.nav-item:hover { color: white; background: #202441; }
.nav-item.active { color: white; background: linear-gradient(110deg, #6756df, #4f63d9); box-shadow: 0 10px 26px rgba(52, 44, 132, .35); }
.nav-item.active i, .nav-item.active b { color: white; }
.nav-item.active b { background: rgba(255,255,255,.16); }
.side-note { position: relative; z-index: 1; margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding: 19px; border: 1px solid #343959; border-radius: 18px; background: rgba(37, 41, 72, .78); }
.side-note .mini-label { color: #b9b1ff; }
.side-note strong { margin-top: 3px; font-size: 1.45rem; letter-spacing: -.04em; }
.side-note span:last-child { color: #9da3c5; font-size: .8rem; }
main { width: min(1190px, 100%); margin: 0 auto; padding: 42px clamp(24px, 4.5vw, 68px) 80px; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.date-label { margin: 0 0 8px; color: #777b98; font-size: .78rem; font-weight: 850; letter-spacing: .11em; }
h1 { margin: 0; color: #1d1f39; font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.05; letter-spacing: -.055em; }
h1 span { color: var(--purple); }
.add-button { display: inline-flex; align-items: center; gap: 9px; min-height: 49px; padding: 0 19px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg, #7464ed, #5276ed); box-shadow: 0 12px 28px rgba(80, 75, 196, .25); font-weight: 850; }
.add-button:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(80, 75, 196, .3); }
.add-button span { font-size: 1.35rem; font-weight: 400; }
.company-dashboard { margin-top: 36px; }
.dashboard-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 15px; }
.dashboard-title h2, .section-heading h2, .priority-radar h2 { margin: 3px 0 0; font-size: 1.2rem; letter-spacing: -.03em; }
.dashboard-title > span { color: #8589a4; font-size: .84rem; font-weight: 700; }
.company-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.company-stat { min-width: 0; min-height: 116px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 19px; color: var(--ink); background: rgba(255,255,255,.9); box-shadow: 0 9px 28px rgba(35, 36, 70, .05); text-align: left; transition: transform .18s, box-shadow .18s; }
button.company-stat:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(35, 36, 70, .09); }
.company-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; font-size: .78rem; font-weight: 950; }
.company-stat.timur .company-icon { color: #17608d; background: #dff4ff; }
.company-stat.trade .company-icon { color: #5a3bb8; background: #eee7ff; }
.company-stat.others .company-icon { color: #42636e; background: #e5f2ef; font-size: 1.1rem; }
.company-stat.journey .company-icon { color: #806000; background: #fff2b6; font-size: 1.1rem; }
.company-stat > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.company-stat small { overflow: hidden; color: #7a7e99; font-size: .75rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.company-stat strong { font-size: 1.7rem; line-height: 1; letter-spacing: -.045em; }
.company-stat i { color: #aaadc0; font-size: 1.1rem; font-style: normal; }
.company-stat.journey { color: white; border-color: transparent; background: linear-gradient(135deg, #ff728c, #ff9868); box-shadow: 0 12px 28px rgba(255, 112, 126, .18); }
.company-stat.journey small { color: #fff0ed; }
.company-stat.journey strong { font-size: 1.32rem; }
.priority-radar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; margin: 22px 0; padding: 17px 19px; border: 1px solid #ffd9de; border-radius: 18px; background: linear-gradient(105deg, #fff5f6, #fffafb); }
.radar-copy { display: flex; align-items: center; gap: 11px; padding-right: 22px; border-right: 1px solid #f3dfe2; }
.radar-copy > span { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 14px; background: #ffe3e7; font-size: 1.15rem; }
.radar-copy .mini-label { color: #d04e65; }
.radar-list { min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.radar-list::-webkit-scrollbar { display: none; }
.radar-task { flex: 0 0 auto; max-width: 240px; padding: 10px 13px; overflow: hidden; border: 0; border-radius: 12px; color: #66303b; background: white; box-shadow: 0 5px 16px rgba(111,55,66,.06); font-size: .8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.radar-clear { color: #777b98; font-size: .84rem; font-weight: 700; }
.toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; margin: 26px 0 35px; }
.search-field { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.86); }
.search-field:focus-within { border-color: #afa7f4; box-shadow: 0 0 0 3px #e9e6ff; }
.search-field svg { width: 18px; height: 18px; fill: none; stroke: #9699b0; stroke-width: 2; stroke-linecap: round; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .9rem; }
.search-field input::placeholder { color: #a0a3b8; }
.select-wrap select, .sort-wrap select { min-height: 46px; padding: 0 35px 0 13px; border: 1px solid var(--line); border-radius: 14px; color: #545874; background: rgba(255,255,255,.86); font-size: .84rem; font-weight: 750; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 16px; }
.sort-wrap { display: flex; align-items: center; gap: 7px; color: #8589a4; font-size: .78rem; font-weight: 750; }
.sort-wrap select { min-height: 38px; padding-left: 10px; }
.company-groups { display: grid; gap: 24px; }
.task-company-group { display: grid; gap: 9px; }
.group-heading { display: flex; align-items: center; gap: 9px; color: #747894; font-size: .81rem; font-weight: 850; }
.group-heading .dot { width: 9px; height: 9px; border-radius: 50%; }
.group-heading .dot.timur-lube { background: #35aee2; }
.group-heading .dot.trade-evermore { background: #8e70e7; }
.group-heading .dot.other { background: #62a893; }
.group-heading b { min-width: 25px; padding: 3px 7px; border-radius: 12px; color: #7d8098; background: #e9eaf3; font-size: .7rem; text-align: center; }
.task-list { display: grid; gap: 9px; }
.empty-group { padding: 18px; border: 1px dashed #d8dae8; border-radius: 15px; color: #9194aa; background: rgba(255,255,255,.45); font-size: .82rem; font-weight: 700; text-align: center; }
.task-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 15px; min-height: 88px; padding: 15px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.94); box-shadow: 0 7px 22px rgba(35,36,70,.035); transition: transform .16s, box-shadow .16s, border-color .16s; }
.task-card:hover { transform: translateY(-2px); border-color: #d7d5ed; box-shadow: 0 12px 28px rgba(35,36,70,.07); }
.task-card.priority-high::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #ff6685; }
.task-card.done { opacity: .68; }
.task-card.done h3 { text-decoration: line-through; }
.check { position: relative; width: 25px; height: 25px; padding: 0; border: 2px solid #ced0df; border-radius: 9px; background: white; }
.check:hover { border-color: var(--purple); transform: scale(1.08); }
.check.checked { border-color: var(--purple); background: var(--purple); }
.check.checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: .82rem; font-weight: 950; }
.task-title-button { display: block; min-width: 0; padding: 0; overflow: hidden; border: 0; color: inherit; background: transparent; text-align: left; }
.task-title-row { display: flex; align-items: center; gap: 9px; }
.task-title-row h3 { margin: 0; overflow: hidden; font-size: .98rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.priority-pill { flex: 0 0 auto; padding: 4px 8px; border-radius: 20px; font-size: .68rem; font-weight: 900; text-transform: capitalize; }
.priority-pill.high { color: #bd2f4c; background: #ffe7eb; }
.priority-pill.medium { color: #8b6500; background: #fff2c7; }
.priority-pill.low { color: #277a68; background: #dcf4ee; }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin-top: 8px; color: #8589a2; font-size: .76rem; }
.category-chip { padding: 3px 7px; border-radius: 6px; background: #f0f1f7; font-weight: 700; }
.task-days { min-width: 76px; display: grid; justify-items: end; gap: 2px; color: #5d617c; font-variant-numeric: tabular-nums; }
.task-days strong { font-size: .88rem; }
.task-days small { color: #9a9db2; font-size: .68rem; }
.more-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; color: #717590; background: #f3f4f9; font-size: 1rem; letter-spacing: .1em; }
.empty-state { padding: 54px 24px; border: 1px dashed #cfd1e3; border-radius: 19px; text-align: center; background: rgba(255,255,255,.52); }
.empty-state > span { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 13px; border-radius: 15px; color: #624ed5; background: #ebe7ff; font-size: 1.15rem; font-weight: 950; }
.empty-state h3 { margin: 0 0 6px; font-size: 1.05rem; }
.empty-state p { margin: 0 0 18px; color: #7c809c; font-size: .86rem; }
.empty-state button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 11px; color: white; background: var(--purple); font-size: .82rem; font-weight: 850; }
.mobile-nav { display: none; }

dialog { color: var(--ink); }
.task-dialog { width: min(590px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 22px; background: white; box-shadow: 0 32px 110px rgba(23,26,53,.28); }
dialog::backdrop { background: rgba(23,26,53,.58); backdrop-filter: blur(5px); }
#taskForm { padding: 26px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.form-kicker { display: block; margin-bottom: 5px; color: var(--purple); font-size: .7rem; font-weight: 950; letter-spacing: .13em; }
.dialog-head h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.035em; }
.icon-button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; color: #6f738e; background: #f1f2f8; font-size: 1.35rem; }
.field { display: grid; gap: 8px; }
.field > span { color: #50546e; font-size: .82rem; font-weight: 800; }
.field > span small { color: #9a9db2; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid #dcddeb; border-radius: 12px; outline: 0; color: var(--ink); background: #fafaff; font-size: .9rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #a49af1; box-shadow: 0 0 0 3px #ece9ff; }
.field textarea { min-height: 84px; resize: vertical; }
.full { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin: 18px 0; }
.dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 25px; padding-top: 18px; border-top: 1px solid #e9eaf2; }
.dialog-actions > div { display: flex; gap: 9px; }
.primary-button, .secondary-button, .delete-button { min-height: 42px; padding: 0 16px; border-radius: 11px; font-size: .84rem; font-weight: 850; }
.primary-button { border: 0; color: white; background: linear-gradient(135deg, #7464ed, #5276ed); }
.secondary-button { border: 1px solid #dadbe8; color: #555974; background: white; }
.delete-button { border: 0; color: #bd2f4c; background: #fff0f3; }
.delete-button[hidden] { display: none; }
.celebration-dialog { width: min(450px, calc(100vw - 32px)); padding: 38px 32px 30px; overflow: hidden; border: 0; border-radius: 26px; background: linear-gradient(170deg, #ffffff 55%, #f3f0ff); box-shadow: 0 32px 110px rgba(23,26,53,.3); text-align: center; }
.celebration-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 17px; border-radius: 22px; color: #25310d; background: var(--lime); box-shadow: 0 13px 28px rgba(155, 193, 67, .24); font-size: 1.7rem; font-weight: 950; transform: rotate(-4deg); }
.celebration-dialog h2 { margin: 3px 0 7px; font-size: 1.8rem; letter-spacing: -.05em; }
.completed-task-name { margin: 0 auto 20px; max-width: 330px; color: #737793; font-size: .9rem; line-height: 1.5; }
.completion-time { display: grid; gap: 3px; padding: 16px; border: 1px solid #e1ddff; border-radius: 16px; background: #f6f4ff; }
.completion-time small { color: #8588a0; font-size: .78rem; font-weight: 700; }
.completion-time strong { color: #5545c2; font-size: 1.55rem; letter-spacing: -.04em; }
.pep-label { display: block; margin-top: 18px; color: #8d7fe3; font-size: .67rem; font-weight: 950; letter-spacing: .12em; }
.encouragement { margin: 7px auto 22px; color: #4f536d; font-size: .94rem; font-weight: 750; line-height: 1.55; }
.celebration-done { width: 100%; min-height: 48px; border: 0; border-radius: 13px; color: white; background: linear-gradient(135deg, #7464ed, #5276ed); box-shadow: 0 10px 24px rgba(92, 82, 210, .2); font-weight: 900; }
.confetti i { position: absolute; width: 9px; height: 18px; border-radius: 3px; transform: rotate(18deg); }
.confetti i:nth-child(1) { left: 10%; top: 14%; background: #ff6685; transform: rotate(-25deg); }
.confetti i:nth-child(2) { right: 11%; top: 18%; background: #6c5ce7; transform: rotate(28deg); }
.confetti i:nth-child(3) { left: 18%; top: 34%; background: #ffc44d; transform: rotate(55deg); }
.confetti i:nth-child(4) { right: 18%; top: 39%; background: #4bc9af; transform: rotate(-48deg); }
.confetti i:nth-child(5) { left: 7%; top: 58%; background: #58a5ff; transform: rotate(72deg); }
.confetti i:nth-child(6) { right: 7%; top: 61%; background: #ff9f68; transform: rotate(-74deg); }
.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 12px; color: white; background: #20233f; box-shadow: 0 12px 35px rgba(23,26,53,.28); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; font-size: .84rem; font-weight: 750; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) {
  .company-stats { grid-template-columns: 1fr 1fr; }
  .company-stat { min-height: 102px; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .side-panel { position: static; height: auto; padding: 16px 20px; flex-direction: row; align-items: center; justify-content: space-between; }
  .side-panel::before, .side-panel::after, .desktop-nav, .side-note { display: none; }
  main { padding: 28px 20px 108px; }
  .mobile-nav { position: fixed; z-index: 6; inset: auto 12px 12px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(23, 26, 53, .96); box-shadow: 0 15px 42px rgba(23,26,53,.3); backdrop-filter: blur(12px); }
  .mobile-nav button { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; border: 0; border-radius: 11px; color: #9da3c5; background: transparent; font-size: .66rem; font-weight: 800; }
  .mobile-nav button > span { font-size: 1rem; }
  .mobile-nav button.active { color: white; background: #4e49aa; }
  .mobile-nav .mobile-add { color: var(--lime); }
  .toast { bottom: 94px; }
}
@media (max-width: 640px) {
  .topbar { align-items: center; }
  .add-button { width: 48px; padding: 0; justify-content: center; }
  .add-button b { display: none; }
  h1 { font-size: 2rem; }
  .company-dashboard { margin-top: 28px; }
  .company-stats { gap: 9px; }
  .company-stat { min-height: 96px; padding: 13px; grid-template-columns: auto minmax(0,1fr); gap: 9px; }
  .company-stat i { display: none; }
  .company-icon { width: 36px; height: 36px; border-radius: 12px; font-size: .7rem; }
  .company-stat small { font-size: .68rem; }
  .company-stat strong { font-size: 1.38rem; }
  .company-stat.journey strong { font-size: 1.02rem; }
  .priority-radar { grid-template-columns: 1fr; gap: 12px; padding: 15px; }
  .radar-copy { padding: 0 0 12px; border: 0; border-bottom: 1px solid #f3dfe2; }
  .toolbar { grid-template-columns: 1fr 1fr; margin: 21px 0 30px; }
  .search-field { grid-column: 1 / -1; }
  .select-wrap select { width: 100%; min-width: 0; padding-left: 10px; font-size: .76rem; }
  .task-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .task-days { grid-column: 2; grid-row: 2; justify-items: start; display: flex; align-items: baseline; gap: 5px; }
  .more-button { grid-column: 3; grid-row: 1 / span 2; }
  .task-title-row { flex-wrap: wrap; gap: 5px 8px; }
  .task-title-row h3 { white-space: normal; }
  .form-grid { grid-template-columns: 1fr; }
  #taskForm { padding: 22px; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .dialog-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .delete-button { align-self: flex-start; }
  .celebration-dialog { padding: 34px 22px 24px; }
}
/* App refresh: crisp violet, generous surfaces, and practical interactions. */
[hidden] { display: none !important; }
body { background: #f6f7fb; }
.side-panel { background: #19192c; padding-top: 34px; gap: 24px; }
.brand { font-size: 1.2rem; }
.brand-mark { background: #b9f177; border-radius: 12px; }
.workspace-label { margin: 24px 14px 0; font-size: .75rem; letter-spacing: .12em; color: #9090aa; font-weight: 700; }
.side-panel::before,.side-panel::after { display:none; }
.nav-item { min-height: 54px; border-radius: 12px; }
.nav-item.active { background: #7461e8; box-shadow:none; }
main { max-width: 1440px; padding-top: 38px; }
.topbar { align-items:center; }
h1 { font-size:clamp(2rem,3.4vw,3.1rem); letter-spacing:-.055em; line-height:1.13; font-weight:800; }
.header-caption { font-size:1rem; color:#787a91; margin:14px 0 0; line-height:1.5; }
.date-label { font-size:.75rem; margin-bottom:14px; }
.add-button { background:#7160df; box-shadow:0 6px 16px #7160df24; border-radius:12px; }
.momentum { margin-top:28px; display:flex; gap:20px; align-items:center; padding:18px 22px; background:#eeebff; border:1px solid #e5e0fb; border-radius:16px; }
.momentum > div:first-child { display:grid; gap:5px; flex:1; }
.momentum strong { font-size:.875rem; font-weight:650; }
.momentum .mini-label { color:#7969bf; font-size:.75rem; }
.progress-track { width:140px; height:7px; background:#dcd5f7; border-radius:20px; overflow:hidden; }
#progressFill { display:block; height:100%; border-radius:20px; background:#7761de; transition:width .5s ease; }
#progressValue { color:#6550bc; font-size:.875rem; }
.company-dashboard { margin-top:28px; }
.company-stat { border-radius:16px; min-height:120px; box-shadow:0 3px 9px #20223d03; border-color:#e8e8f0; padding:20px 16px; }
.company-stat small { font-size:.875rem; white-space:normal; line-height:1.3; }
.company-stat strong { margin-top:5px; font-size:1.8rem; }
.company-stat.journey { color:#343348; background:#fff; border-color:#e8e8f0; box-shadow:none; }
.company-stat.journey small { color:#7a7e99; }
.company-stat.journey strong { font-size:1.35rem; }
.priority-radar { background:#fff7f5; border-color:#f3e3de; border-radius:16px; }
.radar-copy > span { background:#ffede6; }
.radar-task { font-size:.875rem; font-weight:650; min-height:44px; }
.toolbar { margin:25px 0 18px; }
.search-field,.select-wrap select { background:white; border-radius:11px; }
.select-wrap select,.sort-wrap select { font-size:.875rem; }
.search-field input { font-size:1rem; }
.quick-add { display:flex; align-items:center; gap:12px; margin:0 0 28px; padding:10px 12px; border:1px solid #dfdbea; border-radius:13px; background:white; box-shadow:0 4px 18px #29234705; }
.quick-add:focus-within { border-color:#9585e5; box-shadow:0 0 0 3px #eae6fd; }
.quick-add > span { color:#9486d4; font-size:1.5rem; }
.quick-add input { min-width:0; flex:1; font-size:1rem; border:0; outline:none; background:transparent; }
.quick-add select { max-width:160px; padding:10px 4px; border:0; color:#77778d; background:white; font-size:.875rem; }
.quick-add button { border:0; background:#f0ecff; color:#6a54c8; border-radius:9px; padding:12px 16px; font-size:.875rem; font-weight:750; }
.view-controls { display:flex; align-items:center; gap:12px; }
.view-toggle { display:flex; gap:3px; padding:4px; background:#eaeaf2; border-radius:10px; }
.view-toggle button { min-height:34px; border:0; padding:5px 12px; color:#838299; background:transparent; border-radius:7px; font-size:.875rem; }
.view-toggle button[aria-pressed=true] { color:#5848a3; background:white; box-shadow:0 2px 4px #24213b0b; }
.group-heading { font-size:.875rem; padding:4px 2px; color:#585c75; }
.group-heading b { font-size:.75rem; }
.group-add { margin-left:auto; width:32px; height:32px; background:transparent; color:#9590af; border:0; border-radius:8px; font-size:1.25rem; }
.group-add:hover { background:#eae5fa; color:#6750ba; }
.task-card { grid-template-columns:auto minmax(0,1fr) auto auto auto; border-radius:13px; padding:18px 16px; box-shadow:0 3px 8px #20223d02; }
.task-title-row h3 { font-size:1rem; font-weight:650; }
.task-meta { font-size:.8125rem; }
.priority-pill { font-size:.75rem; font-weight:650; }
.inline-priority { width:86px; min-height:38px; border:1px solid #e7e4ef; border-radius:9px; padding:5px; background:#faf9fd; color:#6c6682; text-transform:capitalize; font-size:.875rem; }
.task-days { min-width:85px; }
.task-days small { font-size:.75rem; }
.more-button { min-height:40px; width:40px; background:transparent; }
.check { min-width:28px; min-height:28px; border-radius:9px; }
.board-layout { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.board-layout .task-company-group { padding:12px; background:#eeeff6; border:1px solid #e5e6ef; border-radius:16px; }
.board-layout .task-card { grid-template-columns:auto minmax(0,1fr) auto; gap:10px; padding:14px 12px; }
.board-layout .task-title-button { grid-column:2 / 4; }
.board-layout .task-title-row { flex-wrap:wrap; }
.board-layout .task-title-row h3 { white-space:normal; }
.board-layout .task-days { grid-column:1 / 3; grid-row:2; justify-items:start; }
.board-layout .inline-priority { grid-column:1 / 3; grid-row:3; }
.board-layout .more-button { grid-column:3; grid-row:3; }
.field > span { font-size:.875rem; }
.field input,.field textarea,.field select { font-size:1rem; }
.task-dialog { border-radius:20px; }
.toast { display:flex; align-items:center; gap:18px; pointer-events:auto; visibility:hidden; }
.toast.show { visibility:visible; }
.toast button { border:0; padding:8px 12px; border-radius:7px; color:#d4caff; background:#ffffff18; font-weight:800; }
.celebration-dialog[open] { animation:pop-in .25s ease-out; }
.celebration-dialog[open] .confetti i { animation:float-in .8s ease-out both; }
@keyframes pop-in { from {opacity:0; transform:translateY(12px) scale(.97);} to {opacity:1; transform:none;} }
@keyframes float-in { from {opacity:0; translate:0 -30px;} to {opacity:1; translate:0 0;} }
@media(max-width:1150px) { .board-layout { grid-template-columns:1fr; } }
@media(max-width:820px) {
  .workspace-label { display:none; }
  .side-panel { padding:18px 20px; }
  .momentum { gap:12px; padding:16px; }
  .progress-track { width:70px; }
  .board-layout { grid-template-columns:1fr; }
  .mobile-nav { bottom:max(10px,env(safe-area-inset-bottom)); }
  .mobile-nav button { font-size:.75rem; min-height:48px; }
}
@media(max-width:640px) {
  main { padding:26px 16px 114px; }
  h1 { font-size:2.1rem; }
  .header-caption { max-width:240px; font-size:.875rem; }
  .topbar { align-items:flex-start; }
  .add-button { flex:0 0 46px; }
  .momentum { flex-wrap:wrap; }
  .momentum > div:first-child { flex-basis:100%; }
  .progress-track { flex:1; }
  .company-stat small { font-size:.875rem; }
  .company-stat { padding:14px 12px; min-height:110px; }
  .company-stat strong { font-size:1.7rem; }
  .company-stat.journey strong { font-size:1.15rem; }
  .quick-add { flex-wrap:wrap; gap:8px; }
  .quick-add input { flex-basis:80%; font-size:1rem; }
  .quick-add select { margin-left:24px; flex:1; max-width:none; }
  .quick-add button { min-height:44px; }
  .section-heading { align-items:flex-start; gap:16px; flex-direction:column; }
  .view-controls { width:100%; justify-content:space-between; }
  .task-card { grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:14px; }
  .task-title-button { grid-column:2 / 4; }
  .task-days { grid-column:2; grid-row:2; flex-wrap:wrap; }
  .inline-priority { grid-column:2; grid-row:3; min-height:44px; }
  .more-button { grid-column:3; grid-row:3; }
  .task-title-row h3 { white-space:normal; }
  .task-title-row .priority-pill { display:none; }
  .sort-wrap select { padding-right:10px; }
  .toolbar .select-wrap select { font-size:.875rem; }
}
.overdue-panel { margin:22px 0; padding:20px; background:#fff; border:1px solid #f0d7dc; border-radius:16px; }
.overdue-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.overdue-heading .mini-label { color:#b9566a; }
.overdue-heading h2 { margin:6px 0 0; font-size:1.2rem; }
#overdueCount { margin-left:6px; padding:3px 9px; border-radius:20px; background:#ffe8ed; color:#b53752; font-size:.875rem; }
.overdue-hint,#overdueEmpty { color:#858099; font-size:.875rem; }
.overdue-list { display:grid; gap:8px; margin-top:14px; }
.overdue-task { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px; text-align:left; border:1px solid #f5e3e7; border-radius:12px; background:#fff8f9; color:#692e3c; }
.overdue-task:hover { background:#ffeef2; }
.overdue-task > span { display:grid; gap:5px; min-width:0; }
.overdue-task strong { font-size:1rem; overflow-wrap:anywhere; }
.overdue-task small { font-size:.8125rem; color:#967882; }
.overdue-task b { flex-shrink:0; font-size:.875rem; font-weight:600; }
.due-field { margin-bottom:18px; }
.due-field > small { color:#83809b; font-size:.8125rem; line-height:1.5; }
.due-badge { font-size:.8125rem; color:#74648f; margin-top:4px; line-height:1.5; }
.due-badge.late { color:#b22c4b; }
.task-days { max-width:180px; text-align:right; }
@media(max-width:640px) {
  .overdue-heading { align-items:flex-start; flex-direction:column; }
  .overdue-task { align-items:flex-start; flex-direction:column; gap:8px; }
  .task-days { max-width:none; text-align:left; }
  .due-badge { flex-basis:100%; }
}
.company-stat.quote-card { grid-template-columns: minmax(0,1fr); gap:8px; background:#f0ecff; border-color:#e5dffb; }
.quote-card .company-icon { display:none; }
.company-stat.quote-card strong.daily-quote,.side-note strong.daily-quote { font-size:.9375rem; line-height:1.5; letter-spacing:0; font-weight:650; white-space:normal; overflow-wrap:break-word; }
.quote-card small { color:#7768aa; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation:none !important; } }