:root{
  --bg:#fbf1ec;
  --card:#fdf8f5;
  --ink:#2f2a3a;
  --muted:#6f6878;
  --line:#efe6e2;
  --purple:#9a7fe0;
  --purple-d:#7b62c9;
  --purple-bg:#efe8fb;
  --pink:#ec7d8f;
  --pink-bg:#fde9ea;
  --green:#4fb265;
  --green-bg:#e9f5e8;
  --yellow:#e5a63c;
  --yellow-bg:#fdf3e0;
  --side:#ece3f8;
  --accent:#b9a2ec;
  --accent-d:#7b5fd0;
  --accent-line:#9479e0;
  --accent-soft:#efe8fb;
  --shadow:0 6px 18px rgba(170,130,120,.13),0 1px 3px rgba(170,130,120,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:Nunito,"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* sprite crops from the reference artwork (1200×800) */
.sp{background:url(assets/sprite.webp) no-repeat;background-size:1200px 800px;flex:none}

.app{display:flex;gap:30px;max-width:1200px;margin:0 auto;padding:8px 40px 14px 8px;min-height:100vh}

/* ---------- sidebar ---------- */
.sidebar{
  width:206px;flex:none;background:var(--side);border-radius:26px;
  padding:4px 14px 16px;display:flex;flex-direction:column;align-items:center;
  box-shadow:var(--shadow);
}
.avatar{width:168px;height:186px;background-position:-28px -12px;margin-top:6px}
.profile-name{font-size:22px;font-weight:700;margin-top:6px}
.heart{font-size:15px}
.profile-role{font-size:12.5px;color:#4a4458;margin-top:2px}
.nav{width:100%;margin-top:24px;display:flex;flex-direction:column;gap:7px}
.nav a{
  display:flex;align-items:center;gap:10px;height:38px;padding:0 6px;
  border-radius:14px;font-size:15px;color:#3b3550;transition:background .15s;
}
.nav a:hover{background:rgba(255,255,255,.45)}
.nav a.active{background:var(--accent);color:#fff;box-shadow:0 4px 10px rgba(140,110,210,.35)}
.ni{width:28px;height:28px;border-radius:6px}
.ni-home{background-position:-32px -274px}
.ni-tasks{background-position:-32px -322px}
.ni-projects{background-position:-32px -367px}
.ni-calendar{background-position:-32px -412px}
.ni-analytics{background-position:-32px -457px}
.ni-messages{background-position:-32px -502px}
.ni-team{background-position:-32px -547px}
.ni-settings{background-position:-32px -592px}
.nav a.active .ni{background-color:transparent}
.tip{
  margin-top:auto;width:100%;display:flex;align-items:center;gap:6px;
  background:#f4effb;border-radius:20px;padding:12px 6px 12px 2px;box-shadow:var(--shadow);
}
.plant{width:70px;height:95px;background-position:-29px -651px}
.tip p{margin:0;font-size:11.5px;line-height:1.55;text-align:center;color:#3b3550}

/* ---------- main ---------- */
.main{flex:1;min-width:0;padding-top:18px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-left:12px}
h1{margin:0;font-size:29px;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:-.2px}
.cloud{width:40px;height:34px;background-position:-535px -35px}
.sub{margin:6px 0 0;font-size:15px;color:#3f3a4a}
.top-right{display:flex;align-items:center;gap:22px}
.search{
  display:flex;align-items:center;gap:8px;width:216px;height:42px;padding:0 14px;
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);color:#8a8494;
}
.search input{border:0;outline:0;background:transparent;width:100%;font-size:14px}
.bell{
  position:relative;width:46px;height:46px;border:0;border-radius:14px;background:var(--card);
  box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;
}
.badge{
  position:absolute;top:-8px;right:-6px;width:20px;height:20px;border-radius:50%;
  background:#f07a86;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
}
.me{width:60px;height:62px;background-position:-1111px -24px;border-radius:50%}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.stat{white-space:nowrap;
  display:flex;align-items:center;gap:10px;height:116px;padding:0 12px;
  border-radius:20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.7);
}
.st{width:76px;height:88px;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.st-tasks{background-position:-255px -119px}
.st-progress{background-position:-485px -122px}
.st-done{background-position:-720px -122px}
.st-focus{background-position:-944px -122px}
.st-l{font-size:13.5px;color:#3b3550}
.st-v{font-size:29px;font-weight:700;margin:2px 0 4px}
.st-n{font-size:11.5px}
.s-purple{background:var(--purple-bg)} .s-purple .st-n{color:var(--purple-d)}
.s-pink{background:var(--pink-bg)} .s-pink .st-n{color:var(--pink)}
.s-green{background:var(--green-bg)} .s-green .st-n{color:var(--green)}
.s-yellow{background:var(--yellow-bg)} .s-yellow .st-n{color:var(--yellow)}

/* grid */
#view>.mod{margin-top:14px}
.grid{display:flex;gap:24px;margin-top:18px}
.left-col{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-content:start}
.left-col>.w-full{grid-column:1/-1}
.side-col{width:305px;flex:none;display:flex;flex-direction:column;gap:20px}
.grid.no-main .side-col{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.mod{min-width:0}
.mod.flash>*{animation:flash 1.2s ease}
@keyframes flash{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 4px var(--accent),var(--shadow)}}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.8)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
h2{margin:0;font-size:16px;font-weight:700}

/* chart */
.chart-card{padding:16px 20px 14px;height:274px;display:flex;flex-direction:column}
.pill-select{
  appearance:none;-webkit-appearance:none;border:0;background:#fff;border-radius:10px;
  padding:5px 26px 5px 10px;font-size:12.5px;box-shadow:0 2px 6px rgba(170,130,120,.18);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-color:#fff;
}
.chart{flex:1;position:relative;margin-top:6px}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.chart .tick{font-size:11.5px;fill:#4a4458}
.chart .dot{cursor:pointer;transition:r .15s}
.chart .dot:hover{r:7}
.bubble{
  position:absolute;transform:translate(-50%,-100%);background:#e3d8fa;color:#5b4a8f;
  font-size:12px;padding:5px 10px;border-radius:10px;white-space:nowrap;pointer-events:none;
  box-shadow:0 2px 6px rgba(140,110,210,.2);
}

/* calendar */
.cal-card{padding:14px 18px 12px}
.cal-h{display:flex;justify-content:space-between;align-items:center;font-size:14.5px;font-weight:600}
.cal-h button{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;padding:0 4px;color:#3b3550}
.cal{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;margin-top:8px;text-align:center}
.cal .dow{font-size:10.5px;color:#3b3550;padding-bottom:4px}
.cal .d{font-size:12px;height:20px;line-height:20px;justify-self:center;width:32px;border-radius:12px;cursor:pointer}
.cal .d:hover{background:#efe8fb}
.cal .o{color:#a9a3b0}
.cal .we{color:#e0566a}
.cal .o.we{color:#eeb0b8}
.cal .sel{background:var(--accent-line);color:#fff;font-weight:700;height:26px;line-height:26px;width:32px;border-radius:50%;margin:-3px 0}
.cal .sel:hover{background:var(--accent-line)}

/* lists */
.list-card{padding:14px 18px 8px;min-height:236px}
.chip{font-size:12px;padding:4px 10px;border-radius:9px;background:var(--accent-soft);color:var(--accent-d)}
.chip-green{background:#e3f3e2;color:#3d8a4e}
ul{list-style:none;margin:0;padding:0}
.projects{margin-top:8px}
.projects li{display:grid;grid-template-columns:36px 1fr 44px;column-gap:6px;align-items:center;height:48px}
.folder{width:36px;height:28px;grid-row:span 2}
.f1{background-position:-256px -591px}
.f2{background-position:-256px -639px}
.f3{background-position:-256px -687px}
.f4{background-position:-256px -735px}
.p-name{font-size:13px;align-self:end}
.p-pct{font-size:12px;text-align:right;grid-row:span 2;align-self:end;padding-bottom:2px}
.bar{height:6px;border-radius:4px;background:#efe9ea;overflow:hidden;align-self:start;margin-top:5px}
.bar i{display:block;height:100%;border-radius:4px;transition:width .4s}
.tasks{margin-top:6px}
.tasks li{display:flex;align-items:center;gap:10px;height:39px;border-bottom:1px solid var(--line);font-size:13px}
.tasks li:last-child{border-bottom:0}
.cb{
  width:19px;height:19px;border-radius:5px;border:1.5px solid #d8d0d0;background:#fff;flex:none;
  display:grid;place-items:center;cursor:pointer;padding:0;
}
.cb.on{background:#54b86a;border-color:#54b86a}
.cb.on::after{content:"";width:9px;height:5px;border:2.4px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.t-name{flex:1}
.tag{font-size:11px;padding:2px 7px;border-radius:7px}
.tag.High{background:#fde7ea;color:#e0566a}
.tag.Medium{background:#fdf1dd;color:#d69a35}
.tag.Low{background:#e6f0fd;color:#4f86d6}

/* reminders */
.rem-card{background:var(--pink-bg);padding:14px 18px 10px}
.plus{
  width:28px;height:28px;border:0;border-radius:8px;background:#f58fa0;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;box-shadow:0 3px 8px rgba(240,120,140,.35)
}
.rems{margin-top:8px}
.rems li{display:flex;gap:12px;align-items:center;min-height:40px}
.ri{width:30px;height:30px}
.ri-clock{background-position:-875px -505px}
.ri-video{background-position:-875px -547px}
.ri-bell{background-position:-875px -585px}
.r-t{font-size:12.5px}
.r-s{font-size:11.5px;color:#6f6878;margin-top:1px}

/* cheer */
.cheer{background:#ece4fb;position:relative;height:142px;padding:14px 18px;overflow:hidden}
.cheer h3{position:relative;z-index:1;margin:0;font-size:18.5px;line-height:1.2;color:var(--accent-d);font-weight:800;width:185px}
.cheer p{position:relative;z-index:1;margin:8px 0 0;font-size:11.5px;line-height:1.45;color:#4a4458;width:140px}
.bunny{position:absolute;right:4px;bottom:0;width:150px;height:135px;background-position:-1005px -655px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .app{padding:8px 16px 14px 8px;gap:20px}
  .grid{flex-direction:column}
  .side-col{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
}
@media (max-width:820px){
  .app{flex-direction:column;padding:12px 16px}
  .sidebar{width:100%}
  .nav{display:grid;grid-template-columns:repeat(2,1fr)}
  .tip{margin-top:16px}
  .top{flex-direction:column;padding-left:0}
  .top-right{width:100%}
  .search{flex:1;width:auto}
  .left-col{grid-template-columns:1fr}
  h1{font-size:24px}
}
@media (max-width:520px){
  .list-card{height:auto}
}