:root { color-scheme: light; --paper:#f7f8fb; --ink:#20293a; --muted:#8790a0; --line:#e8eaf0; --accent:#4a70e2; font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:14px; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.workspace { min-height:100vh; display:grid; grid-template-columns:246px minmax(0,1fr); }
.sidebar { background:#fff; min-height:100vh; border-right:1px solid var(--line); padding:26px 18px; position:relative; }
.brand { display:flex; align-items:center; gap:11px; margin:0 0 50px 2px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#303b55; font-size:19px; font-weight:750; }
.brand strong,.sidebar-bottom strong { display:block; font-size:15px; }.brand div>span,.sidebar-bottom div>span { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.eyebrow { color:#9ca4b1; font-size:10px; letter-spacing:1.05px; font-weight:650; margin:0 0 12px 8px; }.clients-label { margin-top:38px; }
.side-item { width:100%; height:40px; border:0; border-radius:8px; background:transparent; color:#566075; display:flex; align-items:center; gap:9px; padding:0 10px; text-align:left; }.side-item>span:last-child:not(.client-bullet) { margin-left:auto; color:#929aab; }.side-item.selected { background:#eef2ff; color:#365ed1; font-weight:560; }
.client-bullet,.status-dot { flex:none; width:9px; height:9px; border-radius:50%; background:#6381e5; }
.sidebar-bottom { position:absolute; bottom:22px; left:20px; right:20px; display:flex; align-items:center; gap:10px; padding-top:18px; border-top:1px solid var(--line); }.avatar,.mini-avatar { display:grid; place-items:center; color:#3858b5; background:#e9edfb; border-radius:50%; font-weight:650; }.avatar { width:35px; height:35px; }.mini-avatar { width:24px; height:24px; font-size:11px; }
.main-area { min-width:0; }.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); padding:0 39px; font-weight:550; }.private-pill { color:#6d788a; background:#f4f5f8; padding:7px 10px; font-size:11px; border-radius:7px; font-weight:450; }
.content { padding:42px 37px; }.headline { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:35px; }.kicker { color:#7e8899; letter-spacing:1.1px; font-size:10px; font-weight:620; }h1 { margin:10px 0 7px; font-size:31px; letter-spacing:-1.1px; } .headline p { margin:0; color:#737d8e; font-size:13px; }.primary-button { border:0; border-radius:9px; color:white; background:var(--accent); padding:12px 15px; font-weight:560; white-space:nowrap; }.primary-button:hover { background:#3d61cc; }
.toolbar { display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:22px; }.toolbar>div { display:flex; flex-wrap:wrap; gap:8px; }.filter-button { color:#6b7485; background:transparent; border:0; padding:8px 10px; border-radius:7px; }.filter-button.active { background:#e9eefc; color:#395ecb; font-weight:560; }
.board { display:grid; grid-template-columns:repeat(5,minmax(218px,1fr)); gap:16px; overflow-x:auto; align-items:start; padding-bottom:24px; }.column { min-width:0; }.column-heading { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 3px; }.column-heading strong { font-size:12px; font-weight:620; }.count { color:#929aab; font-size:11px; margin-left:1px; }.card-stack { display:grid; gap:11px; }.task-card { min-height:137px; padding:14px; border:1px solid #e7e9ee; border-radius:10px; background:#fff; box-shadow:0 2px 5px #19223206; }.tag { display:inline-block; background:#eef1ff; border-radius:5px; padding:4px 7px; color:#5069bb; font-size:10px; }.task-card h2 { font-size:13px; line-height:1.45; margin:11px 0 14px; font-weight:580; }.card-footer { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:#788191; }.add-inline { width:100%; text-align:left; padding:12px 7px; color:#81899a; border:0; background:transparent; font-size:12px; }.add-inline:hover { color:var(--accent); }
@media(max-width:820px) { .workspace { grid-template-columns:1fr; }.sidebar { display:none; }.topbar { height:59px; padding:0 19px; }.content { padding:34px 19px; }.headline { align-items:flex-start; flex-direction:column; margin-bottom:25px; }h1 { font-size:27px; }.board { grid-template-columns:repeat(5,minmax(244px,1fr)); }.toolbar { overflow-x:auto; }.toolbar>div { flex-wrap:nowrap; }.filter-button { white-space:nowrap; } }

/* Task interactions, filters and editor */
.side-icon { width:16px; color:#8892a2; text-align:center; font-size:14px; }.overdue-counter { color:#cf5a52!important; font-weight:600; }.client-parent { display:flex; gap:9px; align-items:center; padding:9px 10px; color:#4b566a; font-weight:540; }.brand-list { display:grid; padding-left:11px; }.brand-item { height:34px; display:flex; align-items:center; gap:8px; padding:0 10px; border:0; color:#717b8c; background:transparent; border-radius:7px; text-align:left; font-size:12px; }.brand-item:hover,.brand-item.selected-brand { color:#365ed1; background:#eef2ff; }.brand-tree-mark { color:#b4bac5; font-size:12px; }
.breadcrumbs { display:flex; align-items:center; gap:10px; color:#7a8494; font-size:13px; }.breadcrumbs strong { color:#364154; font-weight:570; }.breadcrumb-divider { color:#bdc2cc; }.private-pill { display:flex; align-items:center; gap:6px; }.privacy-dot { width:7px; height:7px; background:#56a687; border-radius:50%; }.summary-overdue { color:#c65751; }.primary-button kbd { margin-left:8px; color:#dce3ff; border:1px solid #ffffff42; border-radius:4px; padding:1px 4px; font-size:10px; }.search-field { min-width:210px; height:34px; display:flex; align-items:center; gap:8px; padding:0 9px; color:#7f8999; border:1px solid #e7e9ef; border-radius:7px; background:#fff; }.search-field>span { font-size:19px; }.search-field input { min-width:0; flex:1; outline:none; border:0; background:transparent; color:#30394a; font-size:12px; }.search-field kbd,.keyboard-hint kbd { padding:1px 5px; border:1px solid #e3e6ed; border-radius:4px; color:#8d96a5; font-size:10px; }.column { min-height:240px; transition:background .15s,border-color .15s; border:1px solid transparent; border-radius:10px; padding:0 3px; }.column.drop-target { background:#edf1ff; border-color:#ccd6fb; }.task-card { cursor:grab; transition:box-shadow .15s,border-color .15s,transform .15s,opacity .15s; }.task-card:hover,.task-card:focus-visible { border-color:#c5d0f7; box-shadow:0 4px 12px #273b7112; outline:none; transform:translateY(-1px); }.task-card.dragging { opacity:.43; }.card-labels { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }.tag-mint { background:#e9f5ee; color:#448166; }.tag-rose { background:#faedf1; color:#a4536b; }.priority-badge { color:#bd594d; font-size:10px; font-weight:570; }.task-card h2 { margin-bottom:8px; }.campaign-label { margin:0 0 13px; color:#9099a7; font-size:10px; line-height:1.45; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.deadline-overdue { color:#cf554d; font-weight:620; }.deadline-today { color:#ad7929; font-weight:590; }.keyboard-hint { margin-top:5px; color:#8c95a4; font-size:11px; }.empty-state { min-height:80px; display:grid; place-content:center; gap:6px; text-align:center; }.empty-state strong { font-size:15px; }.empty-state span { color:#838d9c; font-size:12px; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:#20283b70; backdrop-filter:blur(2px); }.task-modal { width:min(580px,100%); max-height:min(88vh,760px); overflow:auto; padding:27px; background:#fff; border:1px solid #e9ebf0; border-radius:15px; box-shadow:0 24px 70px #11192e2e; }.modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:23px; }.modal-kicker { color:#7c8799; font-size:10px; font-weight:620; letter-spacing:1px; }.modal-header h2 { margin:7px 0 0; font-size:21px; letter-spacing:-.4px; }.close-button { width:31px; height:31px; color:#758092; background:#f4f5f8; border:0; border-radius:7px; font-size:20px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px 13px; margin:15px 0; }.form-field { display:grid; gap:6px; color:#525c6e; font-size:11px; font-weight:570; }.form-field input,.form-field select,.form-field textarea { width:100%; min-height:37px; padding:8px 10px; border:1px solid #e4e7ee; border-radius:7px; outline:none; color:#2e3849; background:#fff; font-size:12px; font-weight:420; }.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:#6e8bea; box-shadow:0 0 0 3px #5c7be818; }.form-field textarea { resize:vertical; min-height:73px; }.full-width+.full-width { margin-top:15px; }.modal-actions { display:flex; align-items:center; gap:10px; margin-top:22px; }.action-spacer { flex:1; }.cancel-button,.delete-button { min-height:36px; padding:0 10px; background:transparent; border:0; border-radius:7px; }.cancel-button { color:#606b7c; }.delete-button { color:#c9534d; }.cancel-button:hover { background:#f3f4f7; }.delete-button:hover { background:#fff0ee; }
@media(max-width:820px) { .search-field { min-width:166px; }.keyboard-hint { display:none; }.primary-button kbd { display:none; }.task-modal { padding:20px; }.form-grid { grid-template-columns:1fr; gap:12px; }.toolbar { align-items:center; }.sidebar-bottom { position:static; }.private-pill { font-size:10px; } }

/* A private, server-authenticated entry screen. */
[hidden] { display:none !important; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 15% 15%,#edf1ff 0,transparent 36%),radial-gradient(circle at 85% 85%,#eef6f1 0,transparent 37%),var(--paper); }
.login-card { width:min(410px,100%); padding:36px; background:#fff; border:1px solid #e8eaf0; border-radius:17px; box-shadow:0 22px 70px #26334b12; }
.login-brand { display:flex; align-items:center; gap:11px; margin-bottom:35px; }.login-brand strong { font-size:16px; }.login-kicker { margin:0 0 9px; color:#7c8798; font-size:10px; font-weight:600; letter-spacing:1.1px; }.login-card h1 { margin:0 0 8px; font-size:28px; }.login-description { margin:0 0 26px; color:#748092; font-size:13px; line-height:1.55; }.login-form { display:grid; gap:14px; }.login-submit { min-height:41px; margin-top:4px; }.login-note { margin:21px 0 0; color:#9099a6; font-size:11px; line-height:1.55; }.login-error { margin:0; color:#c04f49; font-size:12px; line-height:1.5; }.clients-tree { display:grid; gap:7px; }.client-parent { width:100%; border:0; background:transparent; border-radius:7px; text-align:left; }.client-parent.selected-client { background:#eef2ff; color:#365ed1; }.logout-button { margin-left:auto; width:29px; height:29px; color:#818b9c; background:transparent; border:0; border-radius:7px; font-size:16px; }.logout-button:hover { background:#f0f2f6; color:#365ed1; }.toast { position:fixed; right:22px; bottom:22px; z-index:20; max-width:380px; padding:11px 15px; border:1px solid #e4e8f0; border-radius:9px; color:#263145; background:#fff; box-shadow:0 8px 28px #202b4618; font-size:12px; }.toast.error { border-color:#f0d2cf; color:#b34a43; }.task-card.is-busy { opacity:.65; pointer-events:none; }.primary-button:disabled { opacity:.65; cursor:wait; }
@media(max-width:820px) { .login-card { padding:28px; }.toast { left:16px; right:16px; bottom:16px; max-width:none; } }