/* MyaadSathi 360 Pro — dashboard styles. Tokens and the theme-proof reset live in tokens.css.
 * Every rule is scoped to #msp-app so theme selectors (e.g. `.entry-content h2`, `button:hover`) cannot override it.
 * Layout size comes from [data-size] (the app's own width) and [data-vp] (the viewport), both set by app.js. */

#msp-app{font-family:var(--msp-font);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-align:left;max-width:1520px;margin:24px auto;position:relative;display:block;float:none;clear:both}
#msp-app .msp-ico{display:inline-grid;width:20px;height:20px;flex:none}
#msp-app .msp-ico svg{width:100%;height:100%;fill:none;stroke:currentColor}
#msp-app .msp-ico-sm{width:14px;height:14px}

/* ---------- boot / gate ---------- */
#msp-app .msp-boot{min-height:420px;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--muted);background:var(--bg);border-radius:26px;border:1px solid var(--line)}
#msp-app .msp-boot-mark{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:28px;font-weight:800;background:var(--lime);color:var(--lime-ink);box-shadow:0 12px 30px -10px rgba(31,111,74,.5);animation:msp-pulse 1.6s ease-in-out infinite}
#msp-app .msp-boot-bar{width:160px;height:4px;border-radius:9px;background:linear-gradient(90deg,transparent,var(--brand),transparent);background-size:200% 100%;animation:msp-slide 1.2s linear infinite}
#msp-app .msp-noscript{padding:18px;border-radius:14px;background:var(--amber-soft)}
#msp-app.msp-gate{padding:20px 0}
#msp-app .msp-gate-card{max-width:560px;margin:auto;padding:38px;border-radius:28px;background:radial-gradient(120% 120% at 100% 0,rgba(214,242,154,.35),transparent 50%),linear-gradient(140deg,var(--side),var(--brand-2));color:#fff;box-shadow:var(--shadow-lg);display:grid;gap:14px}
#msp-app .msp-gate-card h2{font-size:30px;font-weight:800;letter-spacing:-.02em}
#msp-app .msp-gate-card p{color:rgba(255,255,255,.82)}
#msp-app .msp-gate-card ul{display:grid;gap:6px;color:rgba(255,255,255,.9)}
#msp-app .msp-gate-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
#msp-app .msp-gate-card .msp-btn:not(.msp-btn-primary){background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
#msp-app .msp-gate-card .msp-btn-primary{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}

/* ---------- shell ---------- */
#msp-app .msp-shell{display:grid;grid-template-columns:268px minmax(0,1fr);background:var(--bg);border:1px solid var(--line);border-radius:28px;overflow:clip;min-height:780px;box-shadow:var(--shadow)}
#msp-app .msp-side{background:radial-gradient(140% 60% at 0 0,rgba(214,242,154,.10),transparent 60%),linear-gradient(185deg,var(--side),var(--side-2));color:var(--side-ink);padding:22px 16px 18px;display:flex;flex-direction:column;gap:16px;min-width:0}
#msp-app .msp-brand{display:flex;align-items:center;gap:11px;padding:2px 6px}
#msp-app .msp-brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--lime);color:var(--lime-ink);font-weight:900;font-size:20px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
#msp-app .msp-brand-text{display:grid;min-width:0;line-height:1.15}
#msp-app .msp-brand-text strong{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff}
#msp-app .msp-brand-text strong em{font-style:normal;color:var(--lime)}
#msp-app .msp-brand-text small{font-size:10.5px;color:var(--side-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msp-app .msp-pro-badge{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.12em;padding:3px 7px;border-radius:7px;background:rgba(214,242,154,.16);color:var(--lime);border:1px solid rgba(214,242,154,.3)}
#msp-app .msp-side-search{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);color:var(--side-muted);font-size:13px;transition:background .15s}
#msp-app .msp-side-search:hover{background:rgba(255,255,255,.12);color:#fff}
#msp-app .msp-side-search span:not(.msp-ico){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
#msp-app .msp-side-search kbd{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);color:var(--side-muted)}
#msp-app .msp-nav{display:flex;flex-direction:column;gap:2px;flex:1}
#msp-app .msp-navsec{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--side-muted);opacity:.75;padding:12px 12px 6px}
#msp-app .msp-nav .msp-navbtn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;color:var(--side-muted);font-weight:600;font-size:14.5px;position:relative;transition:background .15s,color .15s}
#msp-app .msp-nav .msp-navbtn:hover{background:rgba(255,255,255,.06);color:#fff}
#msp-app .msp-nav .msp-navbtn.is-active{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 3px 0 0 var(--lime)}
#msp-app .msp-nav .msp-navbtn.is-active .msp-ico{color:var(--lime)}
#msp-app .msp-navlabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msp-app .msp-badge{min-width:22px;height:20px;padding:0 6px;border-radius:99px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.14);color:#fff}
#msp-app .msp-badge.is-alert{background:#ff6b35;color:#fff}
#msp-app .msp-side-foot{display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
#msp-app .msp-side-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;color:var(--side-ink);font-weight:600;font-size:14px;background:rgba(214,242,154,.08);border:1px solid rgba(214,242,154,.14)}
#msp-app .msp-side-link:hover{background:rgba(214,242,154,.16)}
#msp-app .msp-side-link span:not(.msp-ico){flex:1}
#msp-app .msp-me{display:flex;align-items:center;gap:10px;padding:4px 6px}
#msp-app .msp-me img,#msp-app .msp-me-ph{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-weight:800}
#msp-app .msp-me div{display:grid;min-width:0;line-height:1.25}
#msp-app .msp-me strong{font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msp-app .msp-me a{font-size:12px;color:var(--side-muted)}
#msp-app .msp-me a:hover{color:var(--lime)}

#msp-app .msp-main{min-width:0;display:flex;flex-direction:column}
#msp-app .msp-top{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:var(--msp-top);z-index:20}
@supports (backdrop-filter:blur(8px)){#msp-app .msp-top{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px)}}
#msp-app .msp-top-l{display:grid;min-width:0;flex:1;line-height:1.2}
#msp-app .msp-top-title{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
#msp-app .msp-datechip{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msp-app .msp-top-r{display:flex;align-items:center;gap:6px}
#msp-app .msp-lang-txt{font-weight:800;font-size:13px}
#msp-app .msp-demo-bar{margin:14px 28px 0;padding:8px 14px;border-radius:12px;background:var(--amber-soft);color:var(--amber);font-size:13px;font-weight:600}
#msp-app .msp-view{padding:24px 28px 44px;display:flex;flex-direction:column;gap:20px;outline:none;min-width:0}
#msp-app .msp-iconbtn.msp-only-mobile{display:none}

/* ---------- buttons & inputs ---------- */
#msp-app .msp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 15px;border-radius:12px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-weight:650;font-size:14px;line-height:1;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
#msp-app .msp-btn:hover{background:var(--surface-3);color:var(--ink)}
#msp-app .msp-btn:active{transform:translateY(1px)}
#msp-app .msp-btn:disabled{opacity:.5;cursor:not-allowed}
#msp-app .msp-btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 18px -10px var(--brand)}
#msp-app .msp-btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
#msp-app .msp-btn-ghost{background:transparent;border-color:transparent}
#msp-app .msp-btn.is-danger{color:var(--red)}
#msp-app .msp-btn-sm{height:32px;padding:0 11px;font-size:13px;border-radius:10px}
#msp-app .msp-block{width:100%}
#msp-app .msp-iconbtn{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;color:var(--ink-2);flex:none;transition:background .15s,color .15s}
#msp-app .msp-iconbtn:hover{background:var(--surface-3);color:var(--ink)}
#msp-app .msp-link{color:var(--brand-text);font-weight:650;font-size:13.5px;white-space:nowrap}
#msp-app .msp-link:hover{text-decoration:underline}
#msp-app .msp-input,#msp-app .msp-select{width:100%;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14.5px;outline:none;box-shadow:none;transition:border-color .15s,box-shadow .15s}
#msp-app textarea.msp-input{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}
#msp-app .msp-select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer}
#msp-app .msp-input:focus,#msp-app .msp-select:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
#msp-app .msp-input::placeholder{color:var(--muted);opacity:.8}
#msp-app .msp-seg{display:inline-flex;flex-wrap:wrap;background:var(--surface-3);border-radius:13px;padding:3px;gap:2px}
#msp-app .msp-seg button{padding:7px 13px;border-radius:10px;font-size:13.5px;font-weight:650;color:var(--muted);transition:background .15s,color .15s}
#msp-app .msp-seg button:hover{color:var(--ink)}
#msp-app .msp-seg button.is-on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
#msp-app .msp-label{font-size:12.5px;font-weight:700;color:var(--muted)}
#msp-app .msp-muted{color:var(--muted);font-size:13.5px}
#msp-app .msp-note{font-size:12.5px;color:var(--muted);padding:8px 12px;border-radius:10px;background:var(--surface-2);border:1px dashed var(--line-2)}
#msp-app .msp-hint{font-size:12px;color:var(--muted)}
#msp-app .msp-err{color:var(--red);font-weight:600;font-size:13.5px;padding:10px 12px;border-radius:12px;background:var(--red-soft)}

/* ---------- cards / layout ---------- */
#msp-app .msp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column;gap:14px}
#msp-app .msp-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
#msp-app .msp-card-h h2{font-size:16.5px;font-weight:750;letter-spacing:-.01em}
#msp-app .msp-split{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:start}
#msp-app .msp-split.is-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#msp-app .msp-col-side{display:flex;flex-direction:column;gap:20px;min-width:0}
#msp-app .msp-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-text)}

/* ---------- today hero ---------- */
#msp-app .msp-hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;padding:30px;border-radius:26px;color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 120% at 100% 0,rgba(214,242,154,.32),transparent 55%),radial-gradient(70% 90% at 0 100%,rgba(255,255,255,.07),transparent 60%),linear-gradient(135deg,var(--side) 0%,var(--brand-2) 100%)}
#msp-app .msp-hero::after{content:"";position:absolute;right:-80px;bottom:-120px;width:320px;height:320px;border-radius:50%;border:44px solid rgba(255,255,255,.04);z-index:-1}
#msp-app .msp-hero .msp-eyebrow{color:var(--lime)}
#msp-app .msp-hero h2{font-size:32px;font-weight:850;letter-spacing:-.025em;margin:6px 0 6px;line-height:1.15}
#msp-app .msp-hero-sum{color:rgba(255,255,255,.82);font-size:15px;max-width:60ch}
#msp-app .msp-hero-copy{min-width:0;display:flex;flex-direction:column}
#msp-app .msp-hero-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#msp-app .msp-qa{margin-top:20px;display:grid;gap:10px}
#msp-app .msp-qa-box{display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border-radius:18px;padding:7px 7px 7px 14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
#msp-app .msp-qa-ico{color:var(--brand-text)}
#msp-app .msp-qa-input{flex:1;min-width:0;border:0;background:transparent;height:42px;font-size:15.5px;outline:none;color:var(--ink);box-shadow:none;padding:0}
#msp-app .msp-qa-input:focus{box-shadow:none;outline:none}
#msp-app .msp-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
#msp-app .msp-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;animation:msp-pop .2s ease-out}
#msp-app .msp-chip.is-muted{opacity:.7;font-weight:500}
#msp-app .msp-qa-hint{font-size:12.5px;color:rgba(255,255,255,.65)}
#msp-app .msp-score{position:relative;display:grid;justify-items:center;gap:4px}
#msp-app .msp-ring{width:136px;height:136px}
#msp-app .msp-ring-bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:9}
#msp-app .msp-ring-fg{fill:none;stroke:var(--lime);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
#msp-app .msp-score-v{position:absolute;top:0;left:0;right:0;height:136px;display:grid;place-content:center;text-align:center;line-height:1.1}
#msp-app .msp-score-v strong{font-size:34px;font-weight:850}
#msp-app .msp-score-v small{font-size:11.5px;color:rgba(255,255,255,.75)}
#msp-app .msp-score-l{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
#msp-app .msp-streak{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);width:100%}
#msp-app .msp-streak div{display:grid;line-height:1.25;min-width:0}
#msp-app .msp-streak strong{font-size:13.5px}
#msp-app .msp-streak small{font-size:11.5px;color:rgba(255,255,255,.7)}
#msp-app .msp-flame{font-size:22px;filter:grayscale(1);opacity:.6}
#msp-app .msp-streak.is-on .msp-flame{filter:none;opacity:1;animation:msp-flicker 1.8s ease-in-out infinite}

/* ---------- KPIs ---------- */
#msp-app .msp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#msp-app .msp-kpis.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
#msp-app[data-size="xl"] .msp-kpis.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
#msp-app[data-size="m"] .msp-kpis.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
#msp-app .msp-kpi{display:flex;flex-direction:column;gap:6px;padding:15px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:left;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;min-width:0}
#msp-app button.msp-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2)}
#msp-app .msp-kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--k,var(--brand))}
#msp-app .msp-kpi-l{font-size:12.5px;font-weight:650;color:var(--muted)}
#msp-app .msp-kpi strong{font-size:22px;line-height:1.2;font-weight:850;letter-spacing:-.02em;color:var(--k,var(--ink));font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#msp-app .msp-kpi.is-red{--k:var(--red)}#msp-app .msp-kpi.is-amber{--k:var(--amber)}#msp-app .msp-kpi.is-teal{--k:var(--teal)}#msp-app .msp-kpi.is-green{--k:var(--green)}
#msp-app .msp-kpi.is-in{--k:var(--in)}#msp-app .msp-kpi.is-out{--k:var(--out)}
#msp-app .msp-kpis.is-money .msp-kpi strong{font-size:21px}

/* ---------- rows ---------- */
#msp-app .msp-agenda{display:flex;flex-direction:column;gap:16px}
#msp-app .msp-group h3{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:2px 4px 8px}
#msp-app .msp-group h3 em{font-style:normal;padding:1px 8px;border-radius:99px;background:var(--surface-3);color:var(--ink-2);letter-spacing:0}
#msp-app .msp-group.is-overdue h3{color:var(--red)}
#msp-app .msp-group.is-overdue h3 em{background:var(--red-soft);color:var(--red)}
#msp-app .msp-group.is-today h3{color:var(--amber)}
#msp-app .msp-rows{display:flex;flex-direction:column;gap:6px}
#msp-app .msp-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:15px;background:var(--surface-2);border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;min-width:0;position:relative}
#msp-app .msp-row:hover{background:var(--surface);border-color:var(--line-2);box-shadow:var(--shadow)}
#msp-app .msp-row.is-overdue{box-shadow:inset 3px 0 0 var(--red)}
#msp-app .msp-row.is-overdue:hover{box-shadow:inset 3px 0 0 var(--red),var(--shadow)}
#msp-app .msp-row.is-done .msp-row-title{text-decoration:line-through;color:var(--muted)}
#msp-app .msp-row.is-selected{background:var(--brand-soft);border-color:var(--brand)}
#msp-app .msp-sel{width:17px;height:17px;accent-color:var(--brand);flex:none;margin:0}
#msp-app .msp-check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;flex:none;color:transparent;background:var(--surface);transition:border-color .15s,background .2s,color .15s,transform .2s}
#msp-app .msp-check .msp-ico{width:15px;height:15px}
#msp-app .msp-check:hover{border-color:var(--brand);color:var(--brand)}
#msp-app .msp-check.is-done{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.08)}
#msp-app .msp-emoji{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none;background:var(--surface-3)}
#msp-app .msp-emoji.g-money{background:rgba(232,147,12,.14)}#msp-app .msp-emoji.g-business{background:rgba(47,111,228,.13)}
#msp-app .msp-emoji.g-personal{background:rgba(225,29,90,.11)}#msp-app .msp-emoji.g-life{background:rgba(13,148,136,.13)}
#msp-app .msp-emoji.is-lg{width:54px;height:54px;font-size:27px;border-radius:17px}
#msp-app .msp-row-main{flex:1;min-width:0;display:grid;gap:2px}
#msp-app .msp-row-title{font-size:14.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
#msp-app .msp-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;color:var(--muted);min-width:0}
#msp-app .msp-meta-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
#msp-app .msp-meta-i{display:inline-flex;color:var(--muted)}
#msp-app .msp-due{font-weight:650;white-space:nowrap}
#msp-app .msp-due.is-overdue{color:var(--red)}#msp-app .msp-due.is-urgent{color:var(--amber)}#msp-app .msp-due.is-soon{color:var(--teal)}#msp-app .msp-due.is-done{color:var(--green)}
#msp-app .msp-row-right{display:flex;align-items:center;gap:8px;flex:none}
#msp-app .msp-amt{font-weight:750;font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
#msp-app .msp-amt.is-in{color:var(--in)}#msp-app .msp-amt.is-out{color:var(--out)}
#msp-app .msp-flag{display:inline-grid}#msp-app .msp-flag.is-critical{color:var(--red)}#msp-app .msp-flag.is-high{color:var(--amber)}
#msp-app .msp-pill{display:inline-flex;align-items:center;font-size:11.5px;font-weight:650;padding:2px 9px;border-radius:99px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
#msp-app .msp-pill.is-ws-business{background:rgba(47,111,228,.12);color:var(--g-business)}
#msp-app .msp-pill.is-ws-family{background:rgba(124,58,237,.12);color:var(--ws-family)}
#msp-app .msp-pill.is-ws-personal{background:rgba(225,29,90,.1);color:var(--g-personal)}
#msp-app .msp-pill.is-pr-critical{background:var(--red-soft);color:var(--red)}#msp-app .msp-pill.is-pr-high{background:var(--amber-soft);color:var(--amber)}
#msp-app[data-theme="dark"] .msp-pill.is-ws-business{color:#8fb3ff}#msp-app[data-theme="dark"] .msp-pill.is-ws-family{color:#c3a6ff}#msp-app[data-theme="dark"] .msp-pill.is-ws-personal{color:#ff8fb2}
#msp-app .msp-snz{opacity:0;width:34px;height:34px}
#msp-app .msp-row:hover .msp-snz,#msp-app .msp-row:focus-within .msp-snz{opacity:1}
@media (hover:none){#msp-app .msp-snz{opacity:1}}
#msp-app[data-density="compact"] .msp-row{padding:6px 10px;border-radius:12px}
#msp-app[data-density="compact"] .msp-emoji{width:30px;height:30px;font-size:15px;border-radius:9px}
#msp-app[data-density="compact"] .msp-check{width:22px;height:22px}
#msp-app[data-density="compact"] .msp-view{gap:14px}

/* side cards on today */
#msp-app .msp-celebs{display:grid;gap:8px}
#msp-app .msp-celeb{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:linear-gradient(120deg,rgba(225,29,90,.07),rgba(232,147,12,.07));border:1px solid var(--line);text-align:left;width:100%}
#msp-app .msp-celeb:hover{border-color:var(--line-2)}
#msp-app .msp-celeb-e{font-size:24px}
#msp-app .msp-celeb-t{flex:1;min-width:0;display:grid;line-height:1.3}
#msp-app .msp-celeb-t strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msp-app .msp-celeb-t small{font-size:12px;color:var(--muted)}
#msp-app .msp-celeb-d{font-size:12px;font-weight:800;color:var(--g-personal);white-space:nowrap}
#msp-app .msp-pulse{display:grid;gap:12px}
#msp-app .msp-pbar-h{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:6px}
#msp-app .msp-pbar-h span{color:var(--muted);font-weight:600}
#msp-app .msp-pbar-track{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
#msp-app .msp-pbar-track i{display:block;height:100%;border-radius:inherit;background:var(--brand);transition:width .6s cubic-bezier(.2,.8,.2,1)}
#msp-app .msp-pbar.is-in i{background:linear-gradient(90deg,var(--in),#5fd59d)}#msp-app .msp-pbar.is-out i{background:linear-gradient(90deg,var(--out),#f59e6b)}
#msp-app .msp-pbar.is-ws-personal i{background:var(--g-personal)}#msp-app .msp-pbar.is-ws-family i{background:var(--ws-family)}#msp-app .msp-pbar.is-ws-business i{background:var(--g-business)}
#msp-app .msp-rows.is-mini .msp-row{background:transparent;padding:6px 4px}
#msp-app .msp-tip{display:flex;gap:12px;padding:16px;border-radius:18px;background:var(--brand-soft);color:var(--ink-2);border:1px solid var(--line)}
#msp-app .msp-tip .msp-ico{color:var(--brand-text)}
#msp-app .msp-tip strong{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text)}
#msp-app .msp-tip p{font-size:13.5px;margin-top:2px}

/* ---------- list ---------- */
#msp-app .msp-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#msp-app .msp-toolbar .msp-select{width:auto;min-width:140px;flex:0 1 auto}
#msp-app .msp-searchwrap{position:relative;flex:1 1 240px;min-width:200px}
#msp-app .msp-searchwrap>.msp-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
#msp-app .msp-searchwrap .msp-input{padding-left:38px}
#msp-app .msp-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:16px;background:var(--brand-soft);border:1px solid var(--brand);position:sticky;top:calc(var(--msp-top) + 80px);z-index:15;animation:msp-pop .2s ease-out}
#msp-app .msp-bulk strong{margin-right:6px;color:var(--brand-text)}
#msp-app .msp-count{font-size:12.5px;color:var(--muted);margin:-8px 4px -6px}
#msp-app .msp-listbody{display:flex;flex-direction:column;gap:18px}

/* ---------- board ---------- */
#msp-app .msp-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,1fr);gap:14px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity}
#msp-app .msp-col{background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:12px;min-height:440px;display:flex;flex-direction:column;gap:10px;scroll-snap-align:start;border-top:4px solid var(--c,var(--line-2));transition:background .15s,outline-color .15s;outline:2px dashed transparent;outline-offset:-4px}
#msp-app .msp-col header{display:flex;align-items:center;justify-content:space-between;padding:2px 4px}
#msp-app .msp-col header strong{font-size:14px}
#msp-app .msp-col header em{font-style:normal;font-size:12px;font-weight:800;padding:2px 9px;border-radius:99px;background:var(--surface-3)}
#msp-app .msp-col-hint{font-size:11.5px;color:var(--muted);padding:0 4px;margin-top:-6px}
#msp-app .msp-col-body{display:flex;flex-direction:column;gap:8px;flex:1}
#msp-app .msp-col-empty{color:var(--muted);text-align:center;padding:30px 0}
#msp-app .msp-col.is-over{background:var(--brand-soft);outline-color:var(--brand)}
#msp-app .msp-col.is-overdue,#msp-app .msp-col.is-critical{--c:var(--red)}#msp-app .msp-col.is-today,#msp-app .msp-col.is-high{--c:var(--amber)}
#msp-app .msp-col.is-week{--c:var(--teal)}#msp-app .msp-col.is-later,#msp-app .msp-col.is-business{--c:var(--g-business)}#msp-app .msp-col.is-done{--c:var(--green)}
#msp-app .msp-col.is-normal{--c:var(--muted)}#msp-app .msp-col.is-personal{--c:var(--g-personal)}#msp-app .msp-col.is-family{--c:var(--ws-family)}
#msp-app .msp-bcard{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:11px 12px;display:grid;gap:8px;cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .15s,box-shadow .15s,opacity .15s}
#msp-app .msp-bcard:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
#msp-app .msp-bcard.is-dragging{opacity:.45;transform:rotate(2deg)}
#msp-app .msp-bcard.p-critical{box-shadow:inset 3px 0 0 var(--red)}#msp-app .msp-bcard.p-high{box-shadow:inset 3px 0 0 var(--amber)}
#msp-app .msp-bcard.is-done strong{text-decoration:line-through;color:var(--muted)}
#msp-app .msp-bcard-top{display:flex;align-items:flex-start;gap:10px}
#msp-app .msp-bcard-top strong{flex:1;font-size:14px;line-height:1.35;font-weight:650;min-width:0;overflow-wrap:anywhere}
#msp-app .msp-bcard .msp-emoji{width:30px;height:30px;font-size:15px;border-radius:9px}
#msp-app .msp-card-more{width:28px;height:28px;margin:-4px -6px 0 0}

/* ---------- calendar ---------- */
#msp-app .msp-calbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#msp-app .msp-caltitle{display:grid;line-height:1.2;min-width:180px;text-align:center}
#msp-app .msp-caltitle strong{font-size:20px;font-weight:800;letter-spacing:-.02em}
#msp-app .msp-caltitle small{font-size:12.5px;color:var(--muted)}
#msp-app .msp-calhint{margin-left:auto;font-size:12px;color:var(--muted)}
#msp-app .msp-calwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
#msp-app .msp-calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
#msp-app .msp-calwd{background:var(--surface-2);text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:9px 4px}
#msp-app .msp-calwd.is-sat{color:var(--red)}
#msp-app .msp-calcell{background:var(--surface);min-height:112px;padding:7px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0;transition:background .15s;outline-offset:-2px}
#msp-app .msp-calcell:hover{background:var(--surface-2)}
#msp-app .msp-calcell.is-out{background:var(--surface-2);opacity:.55}
#msp-app .msp-calcell.is-picked{box-shadow:inset 0 0 0 2px var(--brand)}
#msp-app .msp-calcell.is-over{background:var(--brand-soft)}
#msp-app .msp-calnum{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
#msp-app .msp-calnum strong{font-size:13.5px;font-weight:750;width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
#msp-app .msp-calnum small{font-size:11px;color:var(--muted)}
#msp-app .msp-calcell.is-sat .msp-calnum strong{color:var(--red)}
#msp-app .msp-calcell.is-today .msp-calnum strong{background:var(--brand);color:#fff}
#msp-app .msp-calchips{display:grid;gap:3px;min-width:0}
#msp-app .msp-calchip{display:block;font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--surface-3);cursor:pointer}
#msp-app .msp-calchip.g-money{background:rgba(232,147,12,.16)}#msp-app .msp-calchip.g-business{background:rgba(47,111,228,.14)}
#msp-app .msp-calchip.g-personal{background:rgba(225,29,90,.12)}#msp-app .msp-calchip.g-life{background:rgba(13,148,136,.14)}
#msp-app .msp-calchip.is-over{box-shadow:inset 2px 0 0 var(--red)}
#msp-app .msp-calchip.is-done{text-decoration:line-through;opacity:.55}
#msp-app .msp-calchip[draggable="true"]{cursor:grab}
#msp-app .msp-calmore{font-size:11px;color:var(--muted);font-weight:600;padding-left:4px}
#msp-app .msp-calside{position:sticky;top:calc(var(--msp-top) + 90px)}

/* ---------- money ---------- */
#msp-app .msp-mlist{display:grid;gap:10px}
#msp-app .msp-mrow{display:grid;gap:8px;padding:12px;border-radius:15px;background:var(--surface-2);border:1px solid transparent;cursor:pointer;transition:border-color .15s,background .15s}
#msp-app .msp-mrow:hover{border-color:var(--line-2);background:var(--surface)}
#msp-app .msp-mrow-top{display:flex;align-items:center;gap:12px;min-width:0}
#msp-app .msp-mrow-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
#msp-app .msp-progress{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
#msp-app .msp-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--in))}
#msp-app .msp-ledger{display:grid}
#msp-app .msp-ledger-row{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
#msp-app .msp-ledger-row:last-child{border-bottom:0}
#msp-app .msp-ledger-d{color:var(--muted);font-size:12.5px}
#msp-app .msp-ledger-t{display:grid;min-width:0}
#msp-app .msp-ledger-t strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msp-app .msp-ledger-t small{color:var(--muted);font-size:12px}
#msp-app .msp-ledger-row b{font-variant-numeric:tabular-nums}
#msp-app .msp-ledger-row b.is-in{color:var(--in)}#msp-app .msp-ledger-row b.is-out{color:var(--out)}

/* ---------- charts ---------- */
#msp-app .msp-chartwrap{display:grid;gap:10px;min-width:0}
#msp-app .msp-chartwrap.is-scroll{overflow-x:auto}
#msp-app .msp-chart{width:100%;height:auto}
#msp-app .msp-grid{stroke:var(--line);stroke-dasharray:3 5}
#msp-app .msp-axis{fill:var(--muted);font-size:11px;font-family:var(--msp-font)}
#msp-app .msp-axis.is-strong{fill:var(--ink-2);font-weight:700}
#msp-app .msp-bar-in{fill:var(--in)}#msp-app .msp-bar-out{fill:var(--out)}
#msp-app .msp-bar-load{fill:var(--brand);fill-opacity:.55}#msp-app .msp-bar-now{fill:var(--brand)}
#msp-app .msp-chart rect{transition:fill-opacity .15s}
#msp-app .msp-chart rect:hover{fill-opacity:.85}
#msp-app .msp-legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted)}
#msp-app .msp-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
#msp-app .msp-legend .is-in::before{background:var(--in)}#msp-app .msp-legend .is-out::before{background:var(--out)}
#msp-app .msp-heat{max-width:100%;height:auto}
#msp-app .msp-heat rect.msp-heat-0{fill:var(--surface-3)}
#msp-app .msp-heat rect.msp-heat-1{fill:var(--brand);fill-opacity:.25}#msp-app .msp-heat rect.msp-heat-2{fill:var(--brand);fill-opacity:.45}
#msp-app .msp-heat rect.msp-heat-3{fill:var(--brand);fill-opacity:.7}#msp-app .msp-heat rect.msp-heat-4{fill:var(--brand)}
#msp-app .msp-heat-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:11.5px;color:var(--muted)}
#msp-app .msp-heat-legend i{width:12px;height:12px;border-radius:3px;background:var(--brand)}
#msp-app .msp-heat-legend i.msp-heat-0{background:var(--surface-3)}#msp-app .msp-heat-legend i.msp-heat-1{opacity:.25}#msp-app .msp-heat-legend i.msp-heat-2{opacity:.45}#msp-app .msp-heat-legend i.msp-heat-3{opacity:.7}
#msp-app .msp-donutwrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
#msp-app .msp-donut{width:170px;height:170px;flex:none}
#msp-app .msp-donut circle{fill:none;stroke-width:20}
#msp-app .msp-donut .msp-ring-bg{stroke:var(--surface-3)}
#msp-app .msp-donut-n{fill:var(--ink);font-size:28px;font-weight:850;font-family:var(--msp-font)}
#msp-app .msp-seg-money{stroke:var(--g-money);background:var(--g-money)}#msp-app .msp-seg-business{stroke:var(--g-business);background:var(--g-business)}
#msp-app .msp-seg-personal{stroke:var(--g-personal);background:var(--g-personal)}#msp-app .msp-seg-life{stroke:var(--g-life);background:var(--g-life)}
#msp-app .msp-dlegend{display:grid;gap:8px;flex:1;min-width:160px}
#msp-app .msp-dlegend li{display:flex;align-items:center;gap:10px;font-size:13.5px}
#msp-app .msp-dlegend i{width:12px;height:12px;border-radius:4px}
#msp-app .msp-dlegend span{flex:1;color:var(--ink-2)}
#msp-app .msp-wsbars{display:grid;gap:14px}

/* ---------- settings ---------- */
#msp-app .msp-prefs{display:grid;gap:14px}
#msp-app .msp-pref{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px}
#msp-app .msp-pref .msp-select{max-width:260px}
#msp-app .msp-pref>div{display:grid;gap:4px;justify-items:start}
#msp-app .msp-swatches{display:flex;gap:10px}
#msp-app .msp-swatch{width:30px;height:30px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);transition:transform .15s}
#msp-app .msp-swatch:hover{transform:scale(1.1)}
#msp-app .msp-swatch.is-on{box-shadow:0 0 0 2px var(--ink)}
#msp-app .msp-swatch.is-forest{background:#1f6f4a}#msp-app .msp-swatch.is-ocean{background:#0d6aa6}#msp-app .msp-swatch.is-sunset{background:#d4470f}
#msp-app .msp-swatch.is-royal{background:#5a3bc2}#msp-app .msp-swatch.is-rose{background:#c0245b}
#msp-app .msp-switch{display:inline-flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
#msp-app .msp-switch input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;background:var(--line-2);position:relative;transition:background .2s;cursor:pointer;margin:0;border:0}
#msp-app .msp-switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
#msp-app .msp-switch input:checked{background:var(--brand)}
#msp-app .msp-switch input:checked::after{transform:translateX(18px)}
#msp-app .msp-switch input:disabled{opacity:.5}
#msp-app .msp-copyrow{display:flex;gap:8px}
#msp-app .msp-copyrow .msp-input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
#msp-app .msp-row-actions{display:flex;gap:8px;flex-wrap:wrap}
#msp-app .msp-keys{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center}
#msp-app .msp-keys dd{color:var(--ink-2);font-size:14px}

/* ---------- empty / skeleton ---------- */
#msp-app .msp-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:40px 16px}
#msp-app .msp-empty-art{width:96px;height:96px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;position:relative;margin-bottom:6px}
#msp-app .msp-empty-art span{width:48px;height:48px;border-radius:16px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:900;transform:rotate(-6deg);box-shadow:0 12px 24px -10px var(--brand)}
#msp-app .msp-empty-art i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--lime);animation:msp-float 3s ease-in-out infinite}
#msp-app .msp-empty-art i:nth-of-type(1){top:6px;right:10px}#msp-app .msp-empty-art i:nth-of-type(2){bottom:10px;left:4px;width:7px;height:7px;animation-delay:.6s;background:var(--g-money)}#msp-app .msp-empty-art i:nth-of-type(3){top:30px;left:-6px;width:6px;height:6px;animation-delay:1.2s;background:var(--g-personal)}
#msp-app .msp-empty h3{font-size:17px;font-weight:750}
#msp-app .msp-empty p{color:var(--muted);max-width:42ch}
#msp-app .msp-skeleton{display:grid;gap:14px}
#msp-app .msp-skeleton i{display:block;height:84px;border-radius:20px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:msp-slide 1.3s linear infinite}
#msp-app .msp-skeleton i:first-child{height:200px}

/* ---------- dialogs ---------- */
#msp-app .msp-dialog{border:0;padding:0;background:var(--surface);color:var(--ink);border-radius:24px;box-shadow:var(--shadow-lg);width:calc(100vw - 24px);max-width:560px;max-height:calc(100dvh - 24px);overflow:hidden;font-family:var(--msp-font)}
#msp-app .msp-dialog[open]{animation:msp-rise .22s cubic-bezier(.2,.8,.2,1)}
#msp-app .msp-dialog::backdrop{background:rgba(6,18,12,.5);backdrop-filter:blur(3px)}
#msp-app .msp-dlg-inner{max-height:inherit;overflow:auto}
#msp-app .msp-mini{max-width:430px}
#msp-app .msp-mini .msp-dlg-inner{padding:22px;display:grid;gap:14px}
#msp-app .msp-mini h3{font-size:17px;font-weight:750}
#msp-app .msp-dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
#msp-app .msp-field{display:grid;gap:6px;min-width:0}
#msp-app .msp-field>span{font-size:13px;font-weight:650;color:var(--ink-2)}
#msp-app .msp-menu{position:fixed;z-index:100001;width:220px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:15px;padding:6px;box-shadow:var(--shadow-lg);display:grid;animation:msp-pop .14s ease-out}
#msp-app .msp-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;font-size:14px;text-align:left;color:var(--ink)}
#msp-app .msp-menu button:hover,#msp-app .msp-menu button:focus-visible{background:var(--surface-3);outline:none}
#msp-app .msp-menu button.is-danger{color:var(--red)}
#msp-app .msp-menu .msp-ico{width:17px;height:17px;color:var(--muted)}
#msp-app .msp-menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}

/* drawer */
#msp-app .msp-drawer{margin:0 0 0 auto;width:min(540px,100vw);max-width:none;height:100dvh;max-height:100dvh;border-radius:26px 0 0 26px}
#msp-app .msp-drawer[open]{animation:msp-drawer .28s cubic-bezier(.2,.8,.2,1)}
#msp-app .msp-drawer .msp-dlg-inner{height:100%;display:flex;flex-direction:column}
#msp-app .msp-dhead{display:flex;align-items:flex-start;gap:14px;padding:24px 22px 20px;background:linear-gradient(180deg,var(--surface-2),var(--surface));border-bottom:1px solid var(--line)}
#msp-app .msp-dhead.is-overdue{background:linear-gradient(180deg,var(--red-soft),var(--surface))}
#msp-app .msp-dhead-t{flex:1;min-width:0;display:grid;gap:4px}
#msp-app .msp-dhead-t small{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}
#msp-app .msp-dhead-t h2{font-size:21px;font-weight:800;letter-spacing:-.015em;overflow-wrap:anywhere}
#msp-app .msp-dbody{padding:18px 22px 30px;display:grid;gap:18px;overflow:auto;flex:1;align-content:start}
#msp-app .msp-dactions{display:flex;flex-wrap:wrap;gap:8px}
#msp-app .msp-dmoney{padding:16px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line);display:grid;gap:10px}
#msp-app .msp-dmoney-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
#msp-app .msp-dmoney-top div{display:grid}
#msp-app .msp-dmoney-top small{font-size:12px;color:var(--muted);font-weight:600}
#msp-app .msp-dmoney-top strong{font-size:26px;font-weight:850;letter-spacing:-.02em}
#msp-app .msp-dmoney-top strong.is-in{color:var(--in)}#msp-app .msp-dmoney-top strong.is-out{color:var(--out)}
#msp-app .msp-dmoney-r{text-align:right}
#msp-app .msp-facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 14px;font-size:14px}
#msp-app .msp-facts dt{color:var(--muted);font-size:13px;font-weight:600}
#msp-app .msp-facts dd{overflow-wrap:anywhere}
#msp-app .msp-dnotes h4,#msp-app .msp-dpay h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
#msp-app .msp-dnotes p{white-space:pre-wrap;font-size:14px;padding:12px 14px;border-radius:14px;background:var(--surface-2)}

/* editor */
#msp-app .msp-editor-dlg{max-width:780px}
#msp-app .msp-editor-dlg .msp-dlg-inner{overflow:hidden;display:flex;max-height:calc(100dvh - 24px)}
#msp-app .msp-editor{display:flex;flex-direction:column;width:100%;max-height:inherit}
#msp-app .msp-ed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 14px;border-bottom:1px solid var(--line)}
#msp-app .msp-ed-head h2{font-size:21px;font-weight:800;margin-top:2px}
#msp-app .msp-ed-body{padding:18px 24px;overflow:auto;display:grid;gap:20px}
#msp-app .msp-ed-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--line);background:var(--surface-2)}
#msp-app .msp-editor fieldset{display:grid;gap:12px;min-width:0}
#msp-app .msp-editor legend{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-text);margin-bottom:10px}
#msp-app .msp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
#msp-app .msp-grid2 .is-wide{grid-column:1/-1}
#msp-app .msp-smartbox{display:grid;gap:8px;padding:14px;border-radius:18px;background:var(--brand-soft);border:1px dashed var(--brand)}
#msp-app .msp-smartbox .msp-label{color:var(--brand-text)}
#msp-app .msp-smartbox .msp-chip,#msp-app .msp-editor .msp-chip{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
#msp-app .msp-checkchips{display:flex;flex-wrap:wrap;gap:8px}
#msp-app .msp-checkchip{position:relative;cursor:pointer}
#msp-app .msp-checkchip input{position:absolute;opacity:0;pointer-events:none}
#msp-app .msp-checkchip span{display:inline-block;padding:7px 12px;border-radius:99px;border:1px solid var(--line-2);font-size:13px;font-weight:600;background:var(--surface);transition:background .15s,color .15s,border-color .15s}
#msp-app .msp-checkchip input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
#msp-app .msp-checkchip input:focus-visible+span{outline:2px solid var(--brand-text);outline-offset:2px}
#msp-app .msp-checkline{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;cursor:pointer}
#msp-app .msp-checkline input{margin-top:3px;accent-color:var(--brand)}
#msp-app .msp-ed-more summary{cursor:pointer;font-weight:700;color:var(--brand-text);padding:4px 0 10px;list-style-position:inside}

/* palette + sheet */
#msp-app .msp-palette{max-width:640px;margin-top:11vh;margin-bottom:auto}
#msp-app .msp-pal-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--muted)}
#msp-app .msp-pal-input{flex:1;border:0;outline:none;background:transparent;font-size:17px;height:38px;color:var(--ink);box-shadow:none;padding:0}
#msp-app .msp-pal-list{max-height:min(60vh,460px);overflow:auto;padding:8px}
#msp-app .msp-pal-sec{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px}
#msp-app .msp-pal-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:12px;font-size:14.5px;text-align:left;color:var(--ink)}
#msp-app .msp-pal-item.is-active{background:var(--brand-soft)}
#msp-app .msp-pal-item .msp-ico{color:var(--muted)}
#msp-app .msp-pal-item .msp-emoji{width:28px;height:28px;font-size:14px;border-radius:8px}
#msp-app .msp-pal-l{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msp-app .msp-pal-item small{color:var(--muted);font-size:12px;white-space:nowrap}
#msp-app .msp-sheet{max-width:520px}
@media (max-width:640px){#msp-app .msp-sheet{margin:auto 0 0;width:100vw;max-width:none;border-radius:26px 26px 0 0}}
#msp-app .msp-sheet[open]{animation:msp-sheet .26s cubic-bezier(.2,.8,.2,1)}
#msp-app .msp-sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
#msp-app .msp-sheet-btn{display:grid;justify-items:center;gap:6px;padding:14px 6px;border-radius:16px;background:var(--surface-2);font-size:12.5px;font-weight:650;text-align:center;color:var(--ink)}
#msp-app .msp-sheet-btn.is-active{background:var(--brand-soft);color:var(--brand-text)}

/* toasts, fab, bottom nav, confetti */
#msp-app .msp-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100000;display:grid;gap:8px;width:min(480px,calc(100vw - 24px));pointer-events:none}
#msp-app .msp-toast{display:flex;align-items:center;gap:10px;padding:11px 10px 11px 16px;border-radius:16px;background:#13221b;color:#f1f7f2;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);font-size:14px;pointer-events:auto;animation:msp-rise .25s cubic-bezier(.2,.8,.2,1);border-left:4px solid var(--lime)}
#msp-app .msp-toast>span{flex:1}
#msp-app .msp-toast.is-error{background:#5b1708;border-left-color:#ff8a5c}
#msp-app .msp-toast.is-out{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
#msp-app .msp-toast-btn{font-weight:800;color:var(--lime);padding:6px 10px;border-radius:9px}
#msp-app .msp-toast-btn:hover{background:rgba(255,255,255,.08)}
#msp-app .msp-toast-x{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:rgba(255,255,255,.6)}
#msp-app .msp-toast-x .msp-ico{width:15px;height:15px}
#msp-app .msp-fab{display:none}
#msp-app .msp-bottom{display:none}
.msp-confetti{position:fixed;z-index:100002;width:8px;height:12px;border-radius:2px;pointer-events:none}

/* ---------- classic panels embedded in Pro (vault, assigned, notifications, phone) ---------- */
#msp-app .msp-legacy{display:grid;gap:16px}
#msp-app .msp-legacy :where(form){display:grid;gap:10px}
#msp-app .msp-legacy :where(label){display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
#msp-app .msp-legacy :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){width:100%;min-height:42px;padding:8px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14.5px}
#msp-app .msp-legacy :where(input[type=checkbox]){accent-color:var(--brand);width:17px;height:17px}
#msp-app .msp-legacy :where(h3){font-size:16px;font-weight:750;margin-bottom:6px}
#msp-app .msp-legacy :where(p){color:var(--muted);font-size:13.5px}
#msp-app .msp-legacy .msl-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
#msp-app .msp-legacy :is(.msl-card,.msl21-box,.msl-vault-box,.msl-record,.msl-empty){background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:10px;min-width:0}
#msp-app .msp-legacy .msl-card .msl-card{border:0;padding:0}
#msp-app .msp-legacy :is(.msl-btn,.msl-smallbtn,button[type=submit]){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border-radius:11px;background:var(--brand);color:#fff;border:1px solid var(--brand);font-weight:650;font-size:13.5px;cursor:pointer;width:fit-content;text-decoration:none}
#msp-app .msp-legacy :is(.msl-btn-light,.msl-smallbtn){background:var(--surface);color:var(--ink);border-color:var(--line-2)}
#msp-app .msp-legacy :is(.msl-btn,.msl-smallbtn):hover{filter:brightness(.97)}
#msp-app .msp-legacy .msl-delete{color:var(--red)!important}
#msp-app .msp-legacy .msl-chip{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:700;width:fit-content}
#msp-app .msp-legacy .msl-chip-green{background:var(--green-soft);color:var(--green)}#msp-app .msp-legacy .msl-chip-yellow{background:var(--amber-soft);color:var(--amber)}
#msp-app .msp-legacy .msl-records{display:grid;gap:12px}
#msp-app .msp-legacy .msl-record-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
#msp-app .msp-legacy .msl-record-top h3{margin:4px 0}
#msp-app .msp-legacy .msl-category{font-size:12px;font-weight:700;color:var(--brand-text)}
#msp-app .msp-legacy .msl-meta{font-size:13px;color:var(--muted)}
#msp-app .msp-legacy .msl-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--surface-3);white-space:nowrap}
#msp-app .msp-legacy .msl-status-overdue{background:var(--red-soft);color:var(--red)}#msp-app .msp-legacy .msl-status-urgent{background:var(--amber-soft);color:var(--amber)}#msp-app .msp-legacy .msl-status-done{background:var(--green-soft);color:var(--green)}
#msp-app .msp-legacy :is(.msl-record-note,.msl-bs-pill){font-size:13.5px;color:var(--ink-2);background:var(--surface-2);padding:8px 12px;border-radius:12px}
#msp-app .msp-legacy .msl-empty{justify-items:center;text-align:center;padding:30px}
#msp-app .msp-legacy .msl-empty span{font-size:34px}
#msp-app .msp-legacy .msl-vault-form{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
#msp-app .msp-legacy .msl-vault-list{display:grid;gap:10px}
#msp-app .msp-legacy .msl-vault-file{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);flex-wrap:wrap}
#msp-app .msp-legacy .msl-vault-file form{display:block}
#msp-app .msp-legacy .msl-vault-file-icon{font-size:26px}
#msp-app .msp-legacy .msl-vault-file-name{flex:1;min-width:160px;display:grid}
#msp-app .msp-legacy .msl-vault-file-name small{color:var(--muted);font-size:12px}
#msp-app .msp-legacy .msl-vault-warning{font-size:12.5px;padding:10px 12px;border-radius:12px;background:var(--amber-soft);color:var(--amber)}
#msp-app .msp-legacy .msl21-check{display:flex;align-items:center;gap:10px;font-weight:600}
#msp-app .msp-legacy .msl21-muted{color:var(--muted);font-size:13px}
#msp-app .msp-legacy .msl21-log{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
#msp-app .msp-legacy .msl21-log div{display:grid}
#msp-app .msp-legacy .msl21-log small{color:var(--muted);font-size:12px}
#msp-app .msp-legacy .msl21-thread summary{cursor:pointer;width:fit-content}
#msp-app .msp-legacy .msl21-thread-body{display:grid;gap:10px;padding-top:10px}
#msp-app .msp-legacy .msl21-note{padding:10px 12px;border-radius:12px;background:var(--surface-2)}
#msp-app .msp-legacy .msl21-note p{color:var(--ink-2)}

/* ---------- full screen ---------- */
#msp-app.in-card{margin:0 auto}
#msp-app.in-card .msp-shell{box-shadow:none}
#msp-app.is-full{position:fixed;inset:var(--wp-admin--admin-bar--height,0px) 0 0 0;margin:0;max-width:none;z-index:99990;overflow:auto;background:var(--bg)}
#msp-app.is-full .msp-shell{border-radius:0;border:0;min-height:100%;box-shadow:none}
#msp-app.is-full .msp-top{top:0}

/* ---------- responsive (data-size from the app's own width) ---------- */
#msp-app[data-size="m"] .msp-shell{grid-template-columns:78px minmax(0,1fr)}
#msp-app[data-size="m"] .msp-side{padding:18px 10px;align-items:center}
#msp-app[data-size="m"] :is(.msp-brand-text,.msp-pro-badge,.msp-navlabel,.msp-navsec,.msp-side-search span,.msp-side-search kbd,.msp-side-link span,.msp-side-link .msp-ico-sm,.msp-me div){display:none}
#msp-app[data-size="m"] .msp-nav .msp-navbtn{justify-content:center;padding:12px}
#msp-app[data-size="m"] .msp-badge{position:absolute;top:2px;right:2px;min-width:18px;height:17px;font-size:10px;padding:0 4px}
#msp-app[data-size="m"] :is(.msp-side-search,.msp-side-link){justify-content:center;width:48px;padding:10px}
#msp-app[data-size="m"] .msp-nav{align-items:center}
#msp-app[data-size="m"] .msp-hero{grid-template-columns:minmax(0,1fr) 200px}
#msp-app[data-size="m"] .msp-calwrap{grid-template-columns:1fr}
#msp-app[data-size="m"] .msp-calside{position:static}

#msp-app[data-size="s"]{margin:12px auto}
#msp-app[data-size="s"] .msp-shell{grid-template-columns:1fr;border-radius:20px;min-height:0}
#msp-app[data-size="s"] .msp-side{display:none}
#msp-app[data-size="s"] .msp-iconbtn.msp-only-mobile{display:inline-grid}
#msp-app[data-size="s"] .msp-hide-mobile,#msp-app[data-size="s"] .msp-new span:not(.msp-ico){display:none}
#msp-app[data-size="s"] .msp-new{width:40px;padding:0}
#msp-app[data-size="s"] .msp-top{padding:12px 14px;gap:8px}
#msp-app[data-size="s"] .msp-top-title{font-size:19px}
#msp-app[data-size="s"] .msp-view{padding:16px 14px 28px;gap:16px}
#msp-app[data-size="s"][data-vp="s"] .msp-view{padding-bottom:110px}
#msp-app[data-size="s"] .msp-demo-bar{margin:12px 14px 0}
#msp-app[data-size="s"] .msp-hero{grid-template-columns:1fr;padding:22px 18px;border-radius:22px}
#msp-app[data-size="s"] .msp-hero h2{font-size:25px}
#msp-app[data-size="s"] .msp-hero-side{flex-direction:row;justify-content:flex-start}
#msp-app[data-size="s"] .msp-ring{width:96px;height:96px}
#msp-app[data-size="s"] .msp-score-v{height:96px}
#msp-app[data-size="s"] .msp-score-v strong{font-size:24px}
#msp-app[data-size="s"] .msp-score-l{display:none}
#msp-app[data-size="s"] .msp-qa-box{flex-wrap:wrap;padding:8px}
#msp-app[data-size="s"] .msp-qa-input{flex-basis:calc(100% - 40px)}
#msp-app[data-size="s"] .msp-qa-box .msp-btn{flex:1}
#msp-app[data-size="s"] .msp-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#msp-app[data-size="s"] .msp-kpi strong{font-size:20px}
#msp-app[data-size="s"] :is(.msp-split,.msp-split.is-even,.msp-calwrap){grid-template-columns:1fr}
#msp-app[data-size="s"] .msp-card{padding:16px;border-radius:18px}
#msp-app[data-size="s"] .msp-row{gap:10px;padding:10px}
#msp-app[data-size="s"] .msp-row .msp-emoji{display:none}
#msp-app[data-size="s"] .msp-toolbar .msp-select{flex:1 1 140px}
#msp-app[data-size="s"] .msp-calhint{display:none}
#msp-app[data-size="s"] .msp-calcell{min-height:62px;padding:4px}
#msp-app[data-size="s"] .msp-calnum strong{width:22px;height:22px;font-size:12px}
#msp-app[data-size="s"] .msp-calnum small{display:none}
#msp-app[data-size="s"] .msp-calchips{display:flex;flex-wrap:wrap;gap:3px}
#msp-app[data-size="s"] .msp-calchip{font-size:0;width:8px;height:8px;padding:0;border-radius:50%}
#msp-app[data-size="s"] .msp-calchip.g-money{background:var(--g-money)}#msp-app[data-size="s"] .msp-calchip.g-business{background:var(--g-business)}
#msp-app[data-size="s"] .msp-calchip.g-personal{background:var(--g-personal)}#msp-app[data-size="s"] .msp-calchip.g-life{background:var(--g-life)}
#msp-app[data-size="s"] .msp-calmore{font-size:10px;padding:0}
#msp-app[data-size="s"] .msp-calside{position:static}
#msp-app[data-size="s"] .msp-pref{grid-template-columns:1fr;gap:6px}
#msp-app[data-size="s"] .msp-ledger-row{grid-template-columns:1fr auto}
#msp-app[data-size="s"] .msp-ledger-d{grid-column:1/-1}
#msp-app[data-size="s"][data-vp="s"]:not(.is-offscreen) .msp-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:99995;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
#msp-app[data-size="s"] .msp-bottom .msp-navbtn{display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:12px;color:var(--muted);font-size:11px;font-weight:650;position:relative}
#msp-app[data-size="s"] .msp-bottom .msp-navbtn.is-active{color:var(--brand-text);background:var(--brand-soft)}
#msp-app[data-size="s"] .msp-bottom .msp-navlabel{max-width:100%}
#msp-app[data-size="s"] .msp-bottom .msp-badge{position:absolute;top:0;right:12%;min-width:17px;height:16px;font-size:10px;padding:0 4px;background:#ff6b35}
#msp-app[data-size="s"][data-vp="s"]:not(.is-offscreen) .msp-fab{display:grid;place-items:center;position:fixed;right:18px;bottom:calc(84px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:19px;background:var(--brand);color:#fff;z-index:99996;box-shadow:0 14px 30px -10px var(--brand)}
#msp-app[data-size="s"] .msp-fab .msp-ico{width:26px;height:26px}
#msp-app[data-size="s"][data-vp="s"] .msp-toasts{bottom:calc(150px + env(safe-area-inset-bottom))}
@media (max-width:640px){
  #msp-app .msp-grid2{grid-template-columns:1fr}
  #msp-app .msp-dialog{width:100vw;max-width:none;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:94dvh}
  #msp-app .msp-dialog[open]{animation:msp-sheet .26s cubic-bezier(.2,.8,.2,1)}
  #msp-app .msp-drawer{height:94dvh;border-radius:24px 24px 0 0}
  #msp-app .msp-palette{margin-top:auto}
  #msp-app .msp-facts{grid-template-columns:1fr;gap:2px 0}
  #msp-app .msp-facts dd{margin-bottom:8px}
  #msp-app .msp-ed-head,#msp-app .msp-ed-body,#msp-app .msp-ed-foot{padding-left:16px;padding-right:16px}
}

@keyframes msp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes msp-slide{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes msp-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes msp-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes msp-drawer{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes msp-sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes msp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes msp-flicker{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){#msp-app *,#msp-app *::before,#msp-app *::after{animation:none!important;transition:none!important}}
@media print{#msp-app .msp-side,#msp-app .msp-top-r,#msp-app .msp-bottom,#msp-app .msp-fab,#msp-app .msp-qa{display:none!important}#msp-app .msp-shell{display:block;box-shadow:none}}
#msp-app[data-size="s"][data-vp="s"] .msp-top .msp-new{display:none}