From e8fb7a14005a171ca5e991cbbdabc4f20000c40c Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Mon, 30 Mar 2026 11:27:33 +0000
Subject: [PATCH] 2

---
 assets/css/custom.css | 229 +++++++++++++++++++++---------------------
 index.php             |   2 +-
 2 files changed, 117 insertions(+), 114 deletions(-)

diff --git a/assets/css/custom.css b/assets/css/custom.css
index 024b070..385942d 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,26 +1,26 @@
 :root {
-    --bg: #f6f8fa;
+    --bg: #f8f9fb;
     --surface: #ffffff;
-    --surface-muted: #f6f8fa;
-    --surface-soft: #fafff8;
-    --border: #d0d7de;
-    --border-strong: #8c959f;
+    --surface-muted: #fbfcfd;
+    --surface-soft: #ffffff;
+    --border: #d8dee4;
+    --border-strong: #b8c0c8;
     --text: #1f2328;
-    --text-muted: #57606a;
-    --text-soft: #6e7781;
-    --accent: #2da44e;
-    --accent-dark: #1f883d;
+    --text-muted: #5f6b76;
+    --text-soft: #7a8591;
+    --accent: #1f883d;
+    --accent-dark: #176f32;
     --accent-contrast: #ffffff;
     --accent-blue: #0969da;
-    --accent-blue-soft: #ddf4ff;
-    --nav-bg: #0d1117;
-    --nav-text: #f0f6fc;
+    --accent-blue-soft: #f5f9ff;
+    --nav-bg: #ffffff;
+    --nav-text: #1f2328;
     --success: #1a7f37;
     --danger: #cf222e;
-    --shadow: 0 1px 0 rgba(27, 31, 36, 0.04), 0 8px 24px rgba(140, 149, 159, 0.18);
-    --radius-sm: 10px;
-    --radius-md: 14px;
-    --radius-lg: 18px;
+    --shadow: 0 1px 2px rgba(31, 35, 40, 0.03);
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 12px;
 }
 
 html {
@@ -28,36 +28,35 @@ html {
 }
 
 body {
-    background:
-        radial-gradient(circle at top left, rgba(45, 164, 78, 0.08), transparent 26%),
-        radial-gradient(circle at top right, rgba(9, 105, 218, 0.08), transparent 22%),
-        var(--bg);
+    background: var(--bg);
     color: var(--text);
     font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     text-rendering: optimizeLegibility;
+    font-size: 0.96rem;
 }
 
 .app-header {
-    background: rgba(13, 17, 23, 0.92);
-    backdrop-filter: blur(12px);
-    border-bottom-color: rgba(240, 246, 252, 0.08) !important;
+    background: #ffffff;
+    backdrop-filter: none;
+    border-bottom-color: var(--border) !important;
 }
 
 .navbar {
-    min-height: 72px;
+    min-height: 56px;
 }
 
 .brand-mark {
-    width: 36px;
-    height: 36px;
-    border-radius: 11px;
+    width: 30px;
+    height: 30px;
+    border-radius: 8px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-blue) 100%);
-    color: var(--accent-contrast);
-    font-size: 1rem;
-    box-shadow: 0 10px 22px rgba(9, 105, 218, 0.22);
+    background: #ffffff;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    border: 1px solid var(--border);
+    box-shadow: none;
 }
 
 .brand-title {
@@ -69,17 +68,15 @@ body {
 }
 
 .brand-subtitle {
-    color: rgba(240, 246, 252, 0.72);
-    font-size: 0.76rem;
-    line-height: 1.2;
+    display: none !important;
 }
 
 .panel {
-    background: rgba(255, 255, 255, 0.94);
+    background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow);
-    padding: 1.25rem;
+    padding: 1rem;
 }
 
 .panel-hero {
@@ -87,12 +84,12 @@ body {
 }
 
 .eyebrow {
-    color: var(--text-muted);
+    color: var(--text-soft);
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    font-size: 0.71rem;
+    font-size: 0.68rem;
     font-weight: 700;
-    margin-bottom: 0.85rem;
+    margin-bottom: 0.5rem;
 }
 
 .hero-title,
@@ -118,10 +115,10 @@ body {
 .status-badge {
     display: inline-flex;
     align-items: center;
-    gap: 0.4rem;
-    padding: 0.42rem 0.7rem;
+    gap: 0.35rem;
+    padding: 0.34rem 0.62rem;
     border-radius: 999px;
-    font-size: 0.78rem;
+    font-size: 0.75rem;
     font-weight: 600;
     border: 1px solid var(--border);
     background: var(--surface-muted);
@@ -145,20 +142,24 @@ body {
     position: absolute;
     inset: 0 auto auto 0;
     width: 100%;
-    height: 4px;
-    background: linear-gradient(90deg, var(--accent), var(--accent-blue));
+    height: 1px;
+    background: var(--border-strong);
+}
+
+.stat-card-total::before {
+    background: #8c959f;
 }
 
 .stat-card-active::before {
-    background: linear-gradient(90deg, var(--accent-blue), #54aeff);
+    background: var(--accent-blue);
 }
 
 .stat-card-done::before {
-    background: linear-gradient(90deg, var(--accent), #7ee787);
+    background: var(--accent);
 }
 
 .stat-card-urgent::before {
-    background: linear-gradient(90deg, #fb8500, #f2cc60);
+    background: #fb8500;
 }
 
 .stat-label,
@@ -185,15 +186,16 @@ body {
 }
 
 .stat-note {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
+    color: var(--text-soft);
 }
 
 .panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 1rem;
-    margin-bottom: 1rem;
+    gap: 0.75rem;
+    margin-bottom: 0.85rem;
 }
 
 .panel-header-stack {
@@ -201,8 +203,8 @@ body {
 }
 
 .panel-title {
-    font-size: 1.15rem;
-    font-weight: 700;
+    font-size: 1.05rem;
+    font-weight: 650;
 }
 
 .form-control,
@@ -217,43 +219,44 @@ body {
 .form-select,
 .input-group-text {
     border-color: var(--border);
-    min-height: 46px;
+    min-height: 42px;
     background: #fff;
 }
 
 .form-control:focus,
 .form-select:focus {
     border-color: var(--accent-blue);
-    box-shadow: 0 0 0 0.2rem rgba(9, 105, 218, 0.14);
+    box-shadow: 0 0 0 0.14rem rgba(9, 105, 218, 0.1);
 }
 
 .btn {
     font-weight: 600;
     box-shadow: none !important;
+    border-width: 1px;
 }
 
 .btn-dark {
-    background: linear-gradient(180deg, #3fb950 0%, var(--accent) 100%);
-    border-color: var(--accent-dark);
+    background: var(--accent);
+    border-color: var(--accent);
     color: var(--accent-contrast);
 }
 
 .btn-dark:hover,
 .btn-dark:focus {
-    background: linear-gradient(180deg, #2ea043 0%, var(--accent-dark) 100%);
-    border-color: #1a7f37;
+    background: var(--accent-dark);
+    border-color: var(--accent-dark);
     color: var(--accent-contrast);
 }
 
 .btn-light {
-    background: #f6f8fa;
+    background: #fff;
     border-color: var(--border);
     color: var(--text);
 }
 
 .btn-light:hover,
 .btn-light:focus {
-    background: #eef2f6;
+    background: #ffffff;
     border-color: var(--border-strong);
     color: var(--text);
 }
@@ -265,20 +268,21 @@ body {
 
 .btn-filter {
     border: 1px solid var(--border);
-    background: var(--surface-muted);
+    background: #fff;
     color: var(--text);
     padding-inline: 0.9rem;
 }
 
 .btn-filter:hover {
-    border-color: var(--accent-blue);
-    color: var(--accent-blue);
+    border-color: var(--border-strong);
+    color: var(--text);
+    background: #ffffff;
 }
 
 .btn-check:checked + .btn-filter {
-    background: var(--accent-blue-soft);
+    background: #ffffff;
     color: var(--accent-blue);
-    border-color: #b6e3ff;
+    border-color: #b7c7da;
 }
 
 .sort-select {
@@ -295,10 +299,10 @@ body {
     position: relative;
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
-    padding: 1rem;
+    padding: 0.9rem;
     background: #fff;
     cursor: pointer;
-    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
+    transition: border-color 0.16s ease, background-color 0.16s ease;
 }
 
 .task-item:focus-visible {
@@ -308,46 +312,45 @@ body {
 }
 
 .task-item:hover {
-    border-color: var(--accent-blue);
-    box-shadow: 0 12px 24px rgba(9, 105, 218, 0.08);
-    background: #fbfdff;
-    transform: translateY(-1px);
+    border-color: var(--border-strong);
+    box-shadow: none;
+    background: #fff;
 }
 
 .task-item-active {
-    border-color: var(--accent-blue);
-    box-shadow: inset 3px 0 0 var(--accent-blue), 0 0 0 1px rgba(9, 105, 218, 0.08);
-    background: #f9fcff;
+    border-color: #b6c8db;
+    box-shadow: inset 2px 0 0 var(--accent-blue);
+    background: #ffffff;
 }
 
 .task-item-done {
-    background: #f6fff8;
+    background: #ffffff;
 }
 
 .check-button {
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
     border: 1px solid var(--border);
     background: #fff;
     color: var(--text-muted);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.05rem;
+    font-size: 1rem;
 }
 
 .check-button:hover {
     border-color: var(--accent);
     color: var(--accent);
-    background: #f6fff8;
+    background: #fff;
 }
 
 .task-title-link {
-    font-weight: 700;
+    font-weight: 600;
     color: var(--text);
     text-decoration: none;
-    font-size: 0.97rem;
+    font-size: 0.96rem;
 }
 
 .task-title-link:hover {
@@ -357,7 +360,7 @@ body {
 .task-snippet,
 .detail-description {
     color: var(--text-muted);
-    line-height: 1.55;
+    line-height: 1.5;
 }
 
 .task-item-done .task-title-link,
@@ -378,38 +381,38 @@ body {
 }
 
 .priority-high {
-    background: #fef2f2;
-    color: #991b1b;
-    border-color: #fecaca;
+    background: #ffffff;
+    color: #b42318;
+    border-color: #f0c7c7;
 }
 
 .priority-medium {
-    background: #fff8c5;
+    background: #ffffff;
     color: #9a6700;
-    border-color: #eedb85;
+    border-color: #ead9a2;
 }
 
 .priority-low {
-    background: #dafbe1;
+    background: #ffffff;
     color: #1a7f37;
-    border-color: #aceebb;
+    border-color: #c9e7cf;
 }
 
 .status-active {
-    background: var(--accent-blue-soft);
+    background: #ffffff;
     color: var(--accent-blue);
-    border-color: #b6e3ff;
+    border-color: #c7d7ea;
 }
 
 .status-done {
-    background: #dafbe1;
+    background: #ffffff;
     color: var(--success);
-    border-color: #aceebb;
+    border-color: #c9e7cf;
 }
 
 .icon-button {
-    width: 36px;
-    height: 36px;
+    width: 34px;
+    height: 34px;
     padding: 0;
     display: inline-flex;
     align-items: center;
@@ -426,46 +429,46 @@ body {
 }
 
 .detail-title {
-    font-size: 1.35rem;
-    margin-bottom: 0.7rem;
+    font-size: 1.2rem;
+    margin-bottom: 0.55rem;
 }
 
 .detail-block {
-    padding: 0.9rem 1rem;
+    padding: 0.8rem 0.9rem;
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
-    background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
+    background: #ffffff;
 }
 
 .detail-value {
-    margin-top: 0.3rem;
-    font-weight: 600;
+    margin-top: 0.25rem;
+    font-weight: 500;
 }
 
 .empty-state {
-    border: 1px dashed var(--border-strong);
+    border: 1px solid var(--border);
     border-radius: var(--radius-md);
-    background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
-    padding: 1.25rem;
+    background: #ffffff;
+    padding: 1rem;
 }
 
 .empty-icon {
-    width: 54px;
-    height: 54px;
+    width: 42px;
+    height: 42px;
     margin-inline: auto;
-    border-radius: 50%;
+    border-radius: 10px;
     background: #fff;
     border: 1px solid var(--border);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.35rem;
+    font-size: 1rem;
     color: var(--text-muted);
 }
 
 .toast {
-    border-radius: 12px;
-    box-shadow: 0 18px 36px rgba(13, 17, 23, 0.16);
+    border-radius: 10px;
+    box-shadow: 0 6px 14px rgba(31, 35, 40, 0.08);
 }
 
 .stretched-link-reset {
@@ -480,7 +483,7 @@ body {
 }
 
 ::-webkit-scrollbar {
-    width: 10px;
+    width: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -503,7 +506,7 @@ body {
 @media (max-width: 767.98px) {
     .panel,
     .panel-hero {
-        padding: 1rem;
+        padding: 0.9rem;
     }
 
     .hero-title {
diff --git a/index.php b/index.php
index 71a275d..ffd7f7c 100644
--- a/index.php
+++ b/index.php
@@ -362,7 +362,7 @@ $assetVersion = (string) @filemtime(__DIR__ . '/assets/css/custom.css');
     <meta property="og:image" content="<?= h($projectImageUrl) ?>" />
     <meta property="twitter:image" content="<?= h($projectImageUrl) ?>" />
 <?php endif; ?>
-    <meta name="theme-color" content="#0d1117" />
+    <meta name="theme-color" content="#ffffff" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">