.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 30px 20px 20px; background: #24213d; color: #fff; display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; gap: 12px; align-items: center; padding: 0 10px 34px; font-family: Manrope, sans-serif; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg,#746aef,#a29bf6); display: grid; place-items: center; box-shadow: 0 8px 22px #100d2780; }
.brand strong,.brand small { display: block; line-height: 1.05; }.brand strong { font-size: 18px; }.brand small { font-size: 14px; color: #aaa6c5; margin-top: 4px; letter-spacing: .02em; }
.nav-label { margin: 0 12px 10px; color: #8f8ba8; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.nav-item,.data-button { width: 100%; border: 0; background: transparent; color: #bbb8d0; border-radius: 12px; min-height: 48px; display: flex; gap: 13px; align-items: center; padding: 0 13px; font-weight: 600; text-align: left; transition: .18s ease; }
.nav-item:hover,.data-button:hover { background: #ffffff10; color: #fff; }.nav-item.active { background: #6b61e4; color: #fff; box-shadow: 0 8px 24px #13102975; }
.nav-count { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 20px; background: #ffffff1e; font-size: 12px; }
.sidebar-card { margin-top: auto; padding: 18px; border-radius: 16px; background: linear-gradient(145deg,#302d50,#2a2748); border: 1px solid #ffffff0e; }
.mini-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; margin-bottom: 12px; background: #6b61e4; }.sidebar-card strong { font-size: 14px; }.sidebar-card p { color: #aaa7bf; font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.data-button { margin-top: 16px; font-size: 13px; }.version { text-align: center; color: #77738f; font-size: 10px; margin: 13px 0 0; }
.main-content { min-width: 0; padding: 46px clamp(34px,4vw,76px) 68px; max-width: 1780px; width: 100%; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; gap: 34px; align-items: flex-end; margin-bottom: 34px; }.topbar h1 { margin: 5px 0 6px; font-family: Manrope,sans-serif; font-size: clamp(27px,2.1vw,38px); line-height: 1.16; letter-spacing: -.035em; }.subtitle { margin: 0; color: var(--muted); font-size: 15px; }.eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 800; margin: 0; }
.primary-button,.secondary-button,.danger-button { border: 0; border-radius: 11px; min-height: 43px; padding: 0 18px; display: inline-flex; gap: 9px; justify-content: center; align-items: center; font-weight: 700; font-size: 13px; }
.primary-button { background: var(--primary); color: #fff; box-shadow: 0 8px 18px #6257d92c; }.primary-button:hover { background: var(--primary-dark); }.secondary-button { background: #fff; border: 1px solid var(--line); }.secondary-button:hover { background: #f7f6fb; }.danger-button { color: #fff; background: var(--danger); }.top-action { min-height: 48px; padding: 0 20px; flex-shrink: 0; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: -12px 0 22px; padding: 12px 16px; background: #e9f8f3; color: #08735e; border: 1px solid #caeee3; border-radius: 12px; font-size: 13px; }.notice.error { background: #fff0f0; color: #a7353d; border-color: #f1c7ca; }.notice button { background: none; border: 0; display: grid; place-items: center; padding: 3px; }
.stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 22px; }.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; gap: 17px; align-items: center; min-width: 0; box-shadow: 0 7px 28px #28234d08; }.stat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; flex: 0 0 auto; }.stat-card.purple .stat-icon { color:#6257d9;background:#efedff}.stat-card.orange .stat-icon {color:#c45a28;background:#fff0e8}.stat-card.green .stat-icon {color:#0b8f74;background:#e6f7f2}.stat-card.blue .stat-icon {color:#3973c7;background:#e9f1fd}.stat-card p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }.stat-card strong { display: block; font-family: Manrope,sans-serif; font-size: 27px; line-height: 1.1; margin: 2px 0; }.stat-card small { color: #9996a7; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); gap: 22px; }.panel { background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 24px; box-shadow: 0 7px 28px #28234d08; }.panel-heading,.section-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }.panel h2,.section-heading h2 { font-family: Manrope,sans-serif; font-size: 19px; letter-spacing: -.02em; margin: 4px 0 0; }.text-button { display: inline-flex; align-items: center; gap: 3px; border: 0; color: var(--primary); background: transparent; padding: 5px 0; font-size: 12px; font-weight: 700; }
.goal-overview { display: grid; gap: 6px; }.overview-row { width: 100%; display: flex; align-items: center; gap: 13px; border: 0; background: transparent; border-radius: 11px; padding: 12px 9px; text-align: left; }.overview-row:hover { background: #f8f8fc; }.goal-color { width: 9px; height: 42px; border-radius: 20px; flex-shrink: 0; }.overview-copy { flex: 1; min-width: 0; }.overview-copy strong,.overview-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.overview-copy strong { font-size: 13px; }.overview-copy small { color: var(--muted); font-size: 11px; margin: 3px 0 8px; }.bar { height: 5px; display: block; border-radius: 8px; background: #eeedf3; overflow: hidden; }.bar span { display:block;height:100%;border-radius:inherit; }.percent { font-size: 12px; font-weight: 700; color: var(--muted); width: 32px; text-align: right; }
.upcoming-list { display: grid; }.upcoming-item { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #efeff4; }.upcoming-item:first-child { border-top: 0; padding-top: 4px; }.check-button { border: 1px solid #cbc9d6; background: #fff; border-radius: 8px; width: 25px; height: 25px; display: grid; place-items: center; color: transparent; }.check-button:hover { border-color: var(--primary); }.check-button.checked { color: #fff; background: var(--green); border-color: var(--green); }.upcoming-copy { min-width:0; border:0;background:none;text-align:left;padding:0; }.upcoming-copy strong,.upcoming-copy span { display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.upcoming-copy strong { font-size:12px; }.upcoming-copy span { color:var(--muted);font-size:10px;margin-top:4px; }.priority-dot { display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#aaa}.priority-dot.high{background:#d65058}.priority-dot.medium{background:#db8a35}.priority-dot.low{background:#4a9b7c}.upcoming-item time { color:var(--muted);font-size:10px; }
.focus-banner { margin-top: 22px; padding: 22px 24px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; border-radius: 17px; color: #fff; background: linear-gradient(105deg,#3a355e,#514a88); box-shadow: 0 12px 32px #24213d20; }.focus-icon { width: 48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#ffffff16; }.focus-banner .eyebrow { color:#c5c0ff; }.focus-banner h2 { font-family:Manrope,sans-serif;font-size:17px;margin:4px 0; }.focus-banner p:last-child { color:#bbb7d1;font-size:12px;margin:0; }.focus-banner .secondary-button { background:#fff;color:#34304f;border:0; }
.toolbar { display:flex;align-items:center;gap:13px;margin-bottom:24px; }.search-field { position:relative;flex:1;max-width:460px; }.search-field .icon { position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9794a6; }.search-field input,.field input,.field select,.field textarea,.toolbar select { width:100%;border:1px solid #dedde7;background:#fff;border-radius:11px;min-height:44px;padding:0 13px;color:var(--ink); }.search-field input { padding-left:43px; }.result-count { color:var(--muted);font-size:12px; }.task-toolbar { padding:14px;background:#fff;border:1px solid var(--line);border-radius:15px; }.task-toolbar label { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap; }.task-toolbar select { min-height:38px; }.section-heading p { color:var(--muted);font-size:12px;margin:4px 0 0; }
.goal-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }.goal-card { min-width:0;background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:0 7px 28px #28234d08;display:flex;flex-direction:column; }.goal-card-top { display:flex;justify-content:space-between;align-items:center; }.category,.priority-pill,.status-pill { display:inline-flex;align-items:center;border-radius:20px;padding:5px 9px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800; }.card-actions { display:flex;gap:4px; }.card-actions button { border:0;background:transparent;color:#8b899a;width:32px;height:32px;display:grid;place-items:center;border-radius:8px; }.card-actions button:hover { background:#f1f0f7;color:var(--ink); }.goal-card h3 { font-family:Manrope,sans-serif;font-size:17px;line-height:1.35;margin:18px 0 8px;overflow-wrap:anywhere; }.goal-card>p { color:var(--muted);font-size:12px;line-height:1.55;margin:0;min-height:57px; }.goal-card-progress { display:flex;align-items:center;gap:14px;margin:20px 0; }.progress-ring { position:relative;width:60px;height:60px;flex:none; }.progress-ring svg { width:60px;transform:rotate(-90deg); }.progress-ring circle { fill:none;stroke-width:6; }.ring-track { stroke:#edecf3; }.ring-value { transition:stroke-dashoffset .3s;stroke-linecap:round; }.progress-ring>strong { position:absolute;inset:0;display:grid;place-items:center;font-size:11px; }.goal-card-progress>div strong,.goal-card-progress>div span { display:block; }.goal-card-progress>div strong { font-size:13px; }.goal-card-progress>div span { color:var(--muted);font-size:11px;margin-top:2px; }.goal-card-footer { border-top:1px solid #efeff4;padding-top:15px;margin-top:auto;display:flex;justify-content:space-between;gap:8px;align-items:center; }.goal-card-footer span,.goal-card-footer button { display:flex;align-items:center;gap:5px;font-size:10px; }.goal-card-footer span { color:var(--muted); }.goal-card-footer button { color:var(--primary);font-weight:700;border:0;background:none;padding:5px 0; }
.task-list { display:grid;gap:11px; }.task-row { display:grid;grid-template-columns:auto minmax(250px,1fr) minmax(180px,.35fr) auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;box-shadow:0 5px 20px #28234d06; }.task-row.complete h3 { text-decoration:line-through;color:#777486; }.task-main>div { display:flex;gap:6px; }.priority-pill.high{color:#b93842;background:#fff0f1}.priority-pill.medium{color:#ae641f;background:#fff5e8}.priority-pill.low{color:#14745d;background:#eaf8f4}.status-pill.todo{color:#6d697d;background:#f0eff5}.status-pill.in-progress{color:#4c43b8;background:#efedff}.status-pill.done{color:#08735e;background:#e7f7f2}.task-main h3 { font-family:Manrope,sans-serif;font-size:14px;margin:8px 0 3px;overflow-wrap:anywhere; }.task-main p { color:var(--muted);font-size:11px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.task-meta strong,.task-meta span { display:flex;align-items:center;gap:5px; }.task-meta strong { font-size:11px;margin-bottom:5px; }.task-meta span { color:var(--muted);font-size:10px;margin-top:3px; }
.empty-state { min-height:360px;border:1px dashed #d7d5e2;border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;background:#fafafe; }.empty-state>span { width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#eeecff;color:var(--primary); }.empty-state h2 { font-family:Manrope,sans-serif;font-size:19px;margin:17px 0 5px; }.empty-state p { max-width:370px;color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 17px; }
.modal-backdrop { position:fixed;inset:0;background:#171429a8;backdrop-filter:blur(4px);display:grid;place-items:center;padding:24px;z-index:50; }.modal { width:min(620px,100%);max-height:calc(100vh - 48px);overflow:auto;background:#fff;border-radius:20px;padding:27px;box-shadow:0 28px 80px #0d0a1c70; }.modal-heading { display:flex;justify-content:space-between;gap:20px;margin-bottom:22px; }.modal-heading h2 { font-family:Manrope,sans-serif;font-size:22px;margin:4px 0; }.modal-heading p:last-child { color:var(--muted);font-size:12px;margin:0; }.close-button { border:0;background:#f1f0f6;border-radius:10px;width:38px;height:38px;display:grid;place-items:center;flex:none; }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px; }.form-grid.three { grid-template-columns:1.15fr .85fr 1fr; }.field { display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;color:#555267;margin-bottom:15px; }.field input,.field select { height:44px; }.field textarea { padding:11px 13px;resize:vertical; }.field input::placeholder,.field textarea::placeholder { color:#aaa7b5; }.field [aria-invalid="true"] { border-color:#cf565e;background:#fffafa; }.field-error,.import-error { color:#b63d46;font-size:10px;font-weight:600; }.color-field { border:0;padding:0;margin:0 0 17px; }.color-field legend { color:#555267;font-size:11px;font-weight:700;margin-bottom:8px; }.color-field label { display:inline-block;width:27px;height:27px;border-radius:50%;margin-right:9px;border:3px solid #fff;box-shadow:0 0 0 1px #d7d5df;cursor:pointer; }.color-field label:has(input:checked) { box-shadow:0 0 0 3px #c6c1f6; }.color-field input { opacity:0;width:1px;height:1px; }.modal-actions { display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #efeff4;padding-top:18px;margin-top:4px; }.confirm-copy { color:var(--muted);font-size:13px;line-height:1.55;background:#faf9fc;border-radius:12px;padding:17px; }.data-options { display:grid;gap:9px; }.data-options>button { border:1px solid var(--line);background:#fff;border-radius:13px;display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;text-align:left;padding:14px; }.data-options>button:hover { background:#faf9fe;border-color:#cdc9ed; }.option-icon { width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--primary);background:#efedff; }.data-options strong,.data-options small { display:block; }.data-options strong { font-size:12px; }.data-options small { color:var(--muted);font-size:10px;margin-top:4px; }.import-error { background:#fff0f1;border-radius:10px;padding:10px 12px; }

@media (min-width:1800px) { .stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.goal-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1220px) { .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-grid { grid-template-columns:1fr; }.goal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.task-row { grid-template-columns:auto minmax(0,1fr) auto; }.task-meta { grid-column:2;display:flex;gap:15px;align-items:center; }.task-meta strong { margin:0; } }
@media (max-width:800px) { .app-shell { display:block; }.sidebar { position:relative;height:auto;padding:16px;display:block; }.brand { padding:0 4px 16px; }.sidebar nav { display:flex;gap:6px;overflow-x:auto; }.nav-label,.sidebar-card,.data-button,.version { display:none; }.nav-item { width:auto;min-width:max-content; }.nav-count { display:none; }.main-content { padding:26px 18px 45px; }.topbar { align-items:flex-start; }.topbar h1 { font-size:25px; }.top-action { padding:0;width:46px;font-size:0; }.stat-grid,.goal-grid { grid-template-columns:1fr; }.focus-banner { grid-template-columns:auto 1fr; }.focus-banner .secondary-button { grid-column:1/-1; }.task-toolbar { align-items:stretch;flex-direction:column; }.search-field { max-width:none; }.task-row { grid-template-columns:auto minmax(0,1fr) auto; }.task-meta { grid-column:2;flex-wrap:wrap; }.form-grid,.form-grid.three { grid-template-columns:1fr;gap:0; } }
@media (max-width:500px) { .topbar { display:grid;grid-template-columns:1fr auto; }.subtitle { grid-column:1/-1; }.panel { padding:18px; }.stat-card { padding:17px; }.focus-icon { display:none; }.focus-banner { grid-template-columns:1fr; }.task-row { padding:14px; }.task-row>.card-actions { grid-column:2;justify-content:flex-end; }.goal-card-footer { align-items:flex-start;flex-direction:column; }.modal { padding:21px; }.modal-actions>* { flex:1; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }
