html { font-family:"Plus Jakarta Sans",sans-serif; }
:root { --mp-bg:#faf8ff; --mp-card:#fff; --mp-soft:#f2f3ff; --mp-line:#d8d5e5; --mp-text:#131b2e; --mp-muted:#555467; --mp-primary:#3525cd; --mp-action:#4f46e5; --mp-teal:#006a61; --mp-danger:#ba1a1a; }
html.dark { color-scheme:dark; --mp-bg:#0b0f19; --mp-card:#111827; --mp-soft:#1e293b; --mp-line:#334155; --mp-text:#f8fafc; --mp-muted:#bbc7d9; --mp-primary:#c3c0ff; --mp-teal:#86f2e4; --mp-danger:#fca5a5; }
body[data-page], .account-page { background:var(--mp-bg); color:var(--mp-text); font-family:"Plus Jakarta Sans",sans-serif; }
body a { text-decoration:none; }
[hidden] { display:none !important; }
body :focus-visible { outline:2px solid var(--mp-primary,#4f46e5); outline-offset:3px; }
body[data-page] .text-on-surface, body[data-page] .text-on-background { color:var(--mp-text); }
body[data-page] .text-on-surface-variant, body[data-page] .text-outline { color:var(--mp-muted); }
body[data-page] .bg-surface-container-lowest { background:var(--mp-card); }
body[data-page] .bg-surface-container-low, body[data-page] .bg-surface-container, body[data-page] .bg-surface-container-high { background:var(--mp-soft); }
body[data-page] .border-outline-variant { border-color:var(--mp-line); }
body[data-page] .text-primary { color:var(--mp-primary) !important; }
body[data-page] .text-secondary { color:var(--mp-teal) !important; }
.workspace-body { min-width:0; }
.workspace-main { width:100%; max-width:1600px; margin:0 auto; padding:24px 32px 36px; }
.workspace-main > * + * { margin-top:24px; }
.mobile-menu { display:none; }
.nav-item-stitch { color:var(--mp-muted); }
.nav-item-stitch:hover, .nav-item-stitch[aria-current="page"] { background:var(--mp-soft); color:var(--mp-primary); }
.avatar, .brand-mark { display:grid; place-items:center; width:100%; height:100%; background:var(--mp-action); color:white; font-weight:800; }
.mp-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 16px; }
.mp-heading h2, .account-card h1 { font-size:clamp(1.55rem,2.6vw,2rem); line-height:1.24; font-weight:750; letter-spacing:-.025em; margin:0; }
.mp-heading p, .card-heading p { margin:4px 0 0; font-size:.875rem; color:var(--mp-muted); }
.eyebrow, .mp-heading .eyebrow { margin:0 0 5px; font-size:.68rem; font-weight:800; letter-spacing:.12em; color:var(--mp-primary); }
.mp-card { background:var(--mp-card); border:1px solid var(--mp-line); border-radius:12px; padding:20px; box-shadow:0 1px 2px #0f172a0a; min-width:0; }
.mp-card.flush { padding:0; overflow:hidden; }
.mp-card h3, .editor h2 { font-size:1.17rem; line-height:1.35; font-weight:700; letter-spacing:-.015em; margin:0; }
.mp-card a, .account-card a, .editor a { color:var(--mp-primary); }
.mp-card a:hover, .account-card a:hover { text-decoration:underline; }
.card-heading { display:flex; gap:12px; justify-content:space-between; align-items:center; padding-bottom:13px; border-bottom:1px solid var(--mp-line); }
.card-heading > a, .card-heading > span { font-size:.75rem; font-weight:700; }
.mp-actions, .filters, .bulk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mp-button, .icon-button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border:1px solid var(--mp-line); border-radius:8px; background:var(--mp-card); color:var(--mp-text); font-size:.82rem; font-weight:650; cursor:pointer; }
.mp-button:hover, .icon-button:hover { background:var(--mp-soft); color:var(--mp-text); }
.mp-button.primary { border-color:transparent; background:var(--mp-action); color:#fff; box-shadow:0 1px 2px #4f46e540; }
.mp-button.primary:hover { background:#4338ca; }
.mp-button.danger { color:var(--mp-danger); }
.mp-button:disabled { opacity:.6; cursor:wait; }
.mp-button .material-symbols-outlined { font-size:18px; }
.stage, .pill { display:inline-flex; width:fit-content; background:var(--mp-soft); color:var(--mp-primary); padding:3px 8px; font-size:.68rem; font-weight:750; border-radius:999px; white-space:nowrap; }
.pill[data-tone="completed"] { color:#006a61; background:#d4faee; }
.pill[data-tone="urgent"], .pill[data-tone="cancelled"] { color:#93000a; background:#ffdad6; }
.pill[data-tone="high"], .pill[data-tone="in_progress"] { color:#854800; background:#fff0c2; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; }
.dashboard-stack, .module-content { display:grid; gap:16px; align-content:start; }
.chart-area { position:relative; min-height:235px; height:235px; margin-top:15px; display:grid; place-items:center; }
.chart-area p, .muted, .empty { color:var(--mp-muted); }
.panel-list { display:grid; gap:8px; margin-top:12px; }
.panel-row { display:flex; gap:12px; justify-content:space-between; align-items:center; border:1px solid var(--mp-line); background:var(--mp-soft); border-radius:8px; padding:10px 12px; min-width:0; }
.panel-row > div { min-width:0; }
.panel-row strong, .module-content p, .editor p { overflow-wrap:anywhere; }
.panel-row small { display:block; color:var(--mp-muted); }
.mp-progress { width:100%; accent-color:var(--mp-action); }
.workspace-controls .filters { margin-top:16px; }
.segments { display:flex; border:1px solid var(--mp-line); border-radius:10px; background:var(--mp-soft); padding:4px; gap:4px; }
.segments button { padding:5px 9px; font-size:.75rem; border-radius:6px; }
.segments button[aria-pressed="true"] { background:var(--mp-card); color:var(--mp-primary); box-shadow:0 1px 2px #0f172a16; font-weight:700; }
.bulk-bar { background:var(--mp-soft); padding:10px; border-radius:8px; }
.filters input, .filters select, .mp-card select, .mp-form input:not([type="checkbox"]), .mp-form select, .mp-form textarea, #auth-form input:not([type="hidden"]) { color:var(--mp-text); background-color:var(--mp-card); border:1px solid var(--mp-line); border-radius:8px; padding:7px 10px; min-height:38px; font:inherit; font-size:.85rem; max-width:100%; }
.filters select, .mp-form select, .mp-card select { padding-right:26px; }
.mp-form, #auth-form { display:grid; gap:14px; }
.mp-form label, #auth-form label { display:grid; gap:5px; color:var(--mp-text); font-size:.82rem; font-weight:650; }
.mp-form .check-label { display:flex; align-items:center; gap:8px; }
.mp-form textarea { resize:vertical; min-height:82px; }
.mp-form input[type="checkbox"] { accent-color:var(--mp-action); }
.mp-form .ts-wrapper, .mp-form .ts-control { width:100%; }
.ts-dropdown, .ts-control, .ts-control input { background:var(--mp-card) !important; color:var(--mp-text) !important; border-color:var(--mp-line) !important; }
.ts-dropdown .active { background:var(--mp-soft); color:var(--mp-text); }
.editor { position:fixed; inset:0 0 0 auto; margin:0; width:min(440px,100vw); max-width:100vw; max-height:100dvh; height:100dvh; padding:0; border:0; border-left:1px solid var(--mp-line); background:var(--mp-card); color:var(--mp-text); box-shadow:-12px 0 30px #0f172a20; }
.editor::backdrop { background:#0f172a55; }
.editor-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--mp-line); position:sticky; top:0; background:var(--mp-card); z-index:2; }
#editor-content { padding:20px; }
.editor hr { margin:20px 0; }
.editor-list { display:grid; gap:8px; padding:0; list-style:none; }
.editor-list label { display:flex; gap:7px; align-items:center; }
.editor-list li { display:flex; gap:10px; align-items:center; justify-content:space-between; }
#workspace-message, #editor-message, #auth-message { color:var(--mp-primary); font-size:.85rem; }
[data-error="true"] { color:var(--mp-danger) !important; }
.account-page { min-height:100dvh; display:grid; justify-items:center; align-content:start; padding:40px 16px; background:radial-gradient(ellipse at 50% 0%,var(--mp-soft),var(--mp-bg) 58%); }
.auth-brand { display:inline-flex; align-items:center; gap:10px; margin:20px 0; color:var(--mp-text); font-weight:800; }
.brand-mark { width:36px; height:36px; border-radius:8px; }
.account-card { width:min(100%,460px); padding:26px; }
.account-card > p { margin:10px 0; }
.account-card .eyebrow { margin-top:0; }
#auth-form { margin-top:18px; }
.auth-links { display:flex; gap:8px 16px; flex-wrap:wrap; font-size:.8rem; }
.kanban { display:grid; grid-template-columns:repeat(4,minmax(170px,1fr)); overflow:auto; gap:12px; padding:12px; }
.kanban section { background:var(--mp-soft); padding:10px; border-radius:8px; }
.kanban h3 { margin-bottom:8px; }
.kanban .mp-button { width:100%; margin:4px 0; text-align:left; justify-content:start; overflow-wrap:anywhere; }
#task-table .tabulator, .tabulator { background:var(--mp-card); border:none; color:var(--mp-text); font-size:.83rem; }
.tabulator .tabulator-header, .tabulator .tabulator-header .tabulator-col, .tabulator .tabulator-footer { background:var(--mp-soft); color:var(--mp-muted); border-color:var(--mp-line); }
.tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding:12px 8px; }
.tabulator .tabulator-row, .tabulator .tabulator-row.tabulator-row-even { background:var(--mp-card); color:var(--mp-text); border-color:var(--mp-line); }
.tabulator .tabulator-row:hover, .tabulator .tabulator-row.tabulator-selected { background:var(--mp-soft); }
.tabulator .tabulator-row .tabulator-cell { padding:7px 8px; border-color:var(--mp-line); }
.tabulator .tabulator-row button.task-title { color:var(--mp-primary); font-weight:700; text-align:left; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.task-fallback { overflow:auto; }
.task-fallback table { width:100%; }
.task-fallback td, .task-fallback th { padding:8px; border-bottom:1px solid var(--mp-line); }
.calendar-card { --fc-border-color:var(--mp-line); --fc-page-bg-color:var(--mp-card); --fc-neutral-bg-color:var(--mp-soft); --fc-today-bg-color:#4f46e510; --fc-button-bg-color:var(--mp-action); --fc-button-border-color:var(--mp-action); --fc-button-hover-bg-color:#4338ca; --fc-button-active-bg-color:#3525cd; }
.fc .fc-toolbar { flex-wrap:wrap; gap:12px; }
.fc .fc-toolbar-title { font-size:1.12rem; }
.fc .fc-button { font-size:.76rem; }
.fc .fc-timegrid-slot { height:26px; }
.fc .fc-event { cursor:pointer; font-size:.74rem; border-left-width:3px; border-radius:6px; }
.fc .fc-timegrid-event, .fc .fc-daygrid-event { color:var(--mp-text); }
.calendar-fallback { display:grid; gap:8px; }
@media(max-width:1199px) { .workspace-main { padding-inline:24px; } .global-search { width:240px; } }
@media(max-width:1023px) { #sidebar { display:none; overflow:auto; } #sidebar.menu-open { display:flex; z-index:40; top:64px; height:calc(100dvh - 64px); box-shadow:0 10px 28px #0f172a26; } .workspace-body { margin-left:0; } .mobile-menu { display:grid; place-items:center; padding:8px; margin-left:-8px; } }
@media(max-width:767px) { .workspace-main { padding:16px; } .workspace-main > * + * { margin-top:16px; } .dashboard-grid { grid-template-columns:1fr; gap:16px; } .global-search { display:none; } .workspace-body > header { padding-inline:16px; } .workspace-body > header [data-create]:first-of-type { display:none; } .mp-card { padding:15px; } .card-heading { flex-wrap:wrap; } .calendar-card { padding:10px; } }
@media(max-width:380px) { .workspace-body > header .gap-3 { gap:4px; } }