feat: refine quick wins workflow and calendar layout

app/static/css/style.css

@@ -188,19 +188,32 @@ p {
 .app-footer {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 10px;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
   padding: 18px 0 8px;
   color: var(--muted);
   font-size: 0.88rem;
-  text-align: center;
+  text-align: left;
+}
+
+.app-footer__left,
+.app-footer__right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.app-footer__right {
+  margin-left: auto;
 }
 
 .app-footer a {
   color: inherit;
 }
 
-.app-footer span {
+.app-footer__left span {
   opacity: 0.7;
 }
 
@@ -857,26 +870,28 @@ p {
 }
 
 .calendar-task__title {
-  display: -webkit-box;
-  overflow: hidden;
+  display: block;
+  overflow: visible;
   min-width: 0;
   font-size: 0.96rem;
   line-height: 1.15;
   font-weight: 600;
   color: var(--text);
-  word-break: break-word;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+  word-break: normal;
+  overflow-wrap: break-word;
+  hyphens: manual;
 }
 
 .calendar-task__person {
   display: block;
-  overflow: hidden;
+  overflow: visible;
   min-width: 0;
   font-size: 0.74rem;
   line-height: 1.2;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: break-word;
+  hyphens: manual;
 }
 
 .calendar-task--open {
@@ -1035,8 +1050,7 @@ p {
   gap: 12px;
 }
 
-.quick-win-manage-card,
-.quick-win-card {
+.quick-win-manage-card {
   display: grid;
   gap: 12px;
   padding: 18px;
@@ -1046,8 +1060,18 @@ p {
 }
 
 .quick-win-manage-card {
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
+  align-items: stretch;
+}
+
+.quick-win-manage-form {
+  display: grid;
+  gap: 12px;
+}
+
+.quick-win-manage-card__actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
 .quick-win-grid {
@@ -1055,44 +1079,138 @@ p {
   gap: 12px;
 }
 
-.quick-win-card__actions,
-.quick-win-custom__body {
+.quick-win-dialog-header {
   display: grid;
-  gap: 10px;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
 }
 
-.quick-win-card__actions .button,
-.quick-win-custom__body .button {
-  width: 100%;
+.quick-win-dialog-header__badge {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(52, 211, 153, 0.24));
+  border: 1px solid rgba(132, 152, 190, 0.22);
+  color: var(--primary-strong);
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.16);
+}
+
+.quick-win-dialog-header__badge svg {
+  width: 24px;
+  height: 24px;
 }
 
-.quick-win-card p,
 .quick-win-manage-card p {
   color: var(--muted);
 }
 
-.quick-win-card--custom {
-  cursor: pointer;
-  grid-template-columns: minmax(0, 1fr) auto;
+.quick-win-tag-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.quick-win-tag {
+  position: relative;
+  min-width: 0;
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+.quick-win-tag input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.quick-win-tag span {
+  display: inline-flex;
   align-items: center;
-  list-style: none;
+  justify-content: center;
+  min-height: 0;
+  max-width: 100%;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid rgba(132, 152, 190, 0.22);
+  background: var(--surface-soft);
+  color: var(--text);
+  font-weight: 700;
+  font-size: 0.97rem;
+  text-align: center;
+  line-height: 1.2;
+  white-space: nowrap;
+  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
+  cursor: pointer;
 }
 
-.quick-win-card--custom::-webkit-details-marker {
-  display: none;
+.quick-win-tag input:checked + span {
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(52, 211, 153, 0.16));
+  border-color: rgba(37, 99, 235, 0.34);
+  color: var(--primary-strong);
+  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.16);
+  transform: translateY(-1px);
 }
 
-.quick-win-custom {
+.quick-win-tag--custom span {
+  border-style: dashed;
+}
+
+.quick-win-tag--custom {
+  flex-basis: 100%;
+}
+
+.quick-win-tag--custom span {
+  width: fit-content;
+}
+
+.quick-win-custom-fields {
   display: grid;
-  gap: 10px;
+  gap: 14px;
 }
 
-.quick-win-custom[open] .quick-win-card--custom {
-  border-color: rgba(37, 99, 235, 0.24);
+.quick-win-custom-fields[hidden] {
+  display: none !important;
 }
 
-.quick-win-custom__body {
-  padding: 4px 2px 0;
+.dialog-actions--stack {
+  display: grid;
+  gap: 12px;
+}
+
+@media (max-width: 640px) {
+  .quick-win-dialog-header {
+    grid-template-columns: 1fr;
+  }
+
+  .quick-win-dialog-header__badge {
+    width: 48px;
+    height: 48px;
+  }
+
+  .quick-win-tag-grid {
+    gap: 10px;
+  }
+
+  .quick-win-tag {
+    max-width: 100%;
+  }
+
+  .quick-win-tag span {
+    width: auto;
+    max-width: 100%;
+    white-space: normal;
+    text-align: left;
+    justify-content: flex-start;
+  }
+
+  .quick-win-tag--custom span {
+    width: auto;
+  }
 }
 
 .push-box__state {