codeapp-js 0.3.0 → 1.0.0

package/examples/{kanban → apps/kanban}/dist/index.css

@@ -1,605 +1,605 @@
-
-:root {
-  --paper: #f6f0e4;
-  --paper-strong: #fffdf8;
-  --paper-soft: #efe5d4;
-  --board: #ebe0cd;
-  --card: #fffaf0;
-  --ink: #22201d;
-  --muted: #6f685f;
-  --line: rgba(50, 42, 34, 0.12);
-  --line-strong: rgba(50, 42, 34, 0.22);
-  --grid-blue: rgba(89, 118, 173, 0.16);
-  --grid-red: rgba(190, 92, 92, 0.13);
-  --accent: #355fbb;
-  --accent-soft: rgba(53, 95, 187, 0.12);
-  --success: #2d8a63;
-  --warning: #c58b28;
-  --danger: #be5c5c;
-  --shadow-soft: 0 14px 30px rgba(54, 42, 24, 0.08);
-  --shadow-card: 0 10px 18px rgba(54, 42, 24, 0.08);
-  --radius-xl: 30px;
-  --radius-lg: 22px;
-  --radius-md: 16px;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  min-height: 100%;
-}
-
-body {
-  color: var(--ink);
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background:
-    linear-gradient(90deg, transparent 79px, var(--grid-red) 79px, var(--grid-red) 81px, transparent 81px),
-    linear-gradient(var(--grid-blue) 1px, transparent 1px),
-    linear-gradient(90deg, var(--grid-blue) 1px, transparent 1px),
-    linear-gradient(180deg, #fbf8f1 0%, var(--paper) 100%);
-  background-size: 100% 100%, 32px 32px, 32px 32px, 100% 100%;
-  background-attachment: fixed;
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-button {
-  border: 0;
-  cursor: pointer;
-}
-
-#app {
-  max-width: 1600px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.shell {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--line-strong);
-  border-radius: 34px;
-  background:
-    linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(246, 240, 228, 0.92)),
-    repeating-linear-gradient(180deg, transparent 0 28px, rgba(70, 101, 168, 0.06) 28px 29px);
-  box-shadow: 0 22px 50px rgba(76, 58, 33, 0.12);
-}
-
-.shell::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at 12% 14%, rgba(53, 95, 187, 0.08), transparent 18%),
-    radial-gradient(circle at 84% 16%, rgba(190, 92, 92, 0.07), transparent 16%),
-    radial-gradient(circle at 90% 88%, rgba(53, 95, 187, 0.05), transparent 20%);
-}
-
-.hero {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1.2fr 0.9fr;
-  gap: 22px;
-  padding: 28px 28px 24px;
-  border-bottom: 1px solid var(--line);
-}
-
-.hero::after {
-  content: "";
-  position: absolute;
-  left: 28px;
-  right: 28px;
-  bottom: 0;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
-}
-
-.heroTitle,
-.dialogTitle,
-.columnTitle,
-.cardTitle {
-  font-family: Georgia, "Times New Roman", serif;
-}
-
-.heroTitle {
-  margin: 0 0 12px;
-  max-width: 720px;
-  font-size: 3.3rem;
-  line-height: 0.95;
-  letter-spacing: -0.04em;
-}
-
-.heroCopy {
-  margin: 0;
-  max-width: 760px;
-  color: var(--muted);
-  font-size: 1rem;
-  line-height: 1.8;
-}
-
-.heroMeta {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(140px, 1fr));
-  gap: 14px;
-}
-
-.metricCard {
-  position: relative;
-  border: 1px solid var(--line);
-  border-radius: var(--radius-lg);
-  padding: 18px;
-  background:
-    linear-gradient(180deg, rgba(255, 250, 240, 0.94), rgba(250, 244, 233, 0.94)),
-    repeating-linear-gradient(180deg, transparent 0 26px, rgba(70, 101, 168, 0.05) 26px 27px);
-  box-shadow: var(--shadow-soft);
-}
-
-.metricCard::before {
-  content: "";
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  width: 34px;
-  height: 10px;
-  border-radius: 999px;
-  background: rgba(53, 95, 187, 0.08);
-}
-
-.metricLabel {
-  display: block;
-  margin-bottom: 8px;
-  color: var(--muted);
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-}
-
-.metricValue {
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.04em;
-}
-
-.toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 18px;
-  padding: 18px 28px;
-  border-bottom: 1px solid var(--line);
-  background: rgba(255, 251, 244, 0.72);
-}
-
-.toolbarGroup {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.toolbarInput,
-.toolbarSelect,
-.toolbarTextarea {
-  width: 100%;
-  border: 1px solid var(--line-strong);
-  border-radius: 14px;
-  padding: 12px 14px;
-  color: var(--ink);
-  background: rgba(255, 253, 248, 0.98);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  outline: none;
-}
-
-.toolbarInput::placeholder,
-.toolbarTextarea::placeholder {
-  color: #8d8479;
-}
-
-.toolbarInput:focus,
-.toolbarSelect:focus,
-.toolbarTextarea:focus {
-  border-color: rgba(53, 95, 187, 0.48);
-  box-shadow: 0 0 0 4px rgba(53, 95, 187, 0.12);
-}
-
-.primaryButton,
-.secondaryButton,
-.ghostButton {
-  border-radius: 14px;
-  padding: 12px 16px;
-  font-weight: 600;
-  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
-}
-
-.primaryButton {
-  color: #fdfbf6;
-  background: linear-gradient(135deg, #3056aa, #4c76d2);
-  box-shadow: 0 12px 24px rgba(53, 95, 187, 0.18);
-}
-
-.secondaryButton {
-  color: var(--ink);
-  border: 1px solid var(--line-strong);
-  background: rgba(255, 250, 240, 0.88);
-}
-
-.ghostButton {
-  color: var(--muted);
-  border: 1px dashed rgba(50, 42, 34, 0.28);
-  background: rgba(255, 250, 240, 0.68);
-}
-
-.primaryButton:hover,
-.secondaryButton:hover,
-.ghostButton:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 8px 18px rgba(54, 42, 24, 0.1);
-}
-
-.boardWrap {
-  padding: 22px;
-  overflow-x: auto;
-}
-
-.board {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(262px, 1fr));
-  gap: 16px;
-  min-width: 1380px;
-}
-
-.column {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-height: 620px;
-  border: 1px solid var(--line-strong);
-  border-radius: 26px;
-  background:
-    linear-gradient(180deg, rgba(255, 252, 246, 0.92), rgba(247, 240, 229, 0.92)),
-    repeating-linear-gradient(180deg, transparent 0 30px, rgba(70, 101, 168, 0.06) 30px 31px);
-  box-shadow: var(--shadow-soft);
-  overflow: hidden;
-}
-
-.column::before {
-  content: "";
-  position: absolute;
-  top: 14px;
-  right: 16px;
-  width: 42px;
-  height: 12px;
-  border-radius: 999px;
-  background: rgba(53, 95, 187, 0.08);
-}
-
-.columnHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  padding: 16px 16px 14px;
-  border-bottom: 1px solid var(--line);
-}
-
-.columnTitleWrap {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.columnDot {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45);
-}
-
-.columnTitle {
-  margin: 0;
-  font-size: 0.86rem;
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-}
-
-.columnCount {
-  color: var(--muted);
-  font-size: 0.82rem;
-  font-weight: 700;
-}
-
-.columnBody {
-  flex: 1;
-  padding: 14px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
-    repeating-linear-gradient(180deg, transparent 0 30px, rgba(70, 101, 168, 0.045) 30px 31px);
-  transition: background 180ms ease;
-}
-
-.columnBody.dragOver {
-  background:
-    linear-gradient(180deg, rgba(53, 95, 187, 0.09), rgba(53, 95, 187, 0.02)),
-    repeating-linear-gradient(180deg, transparent 0 30px, rgba(70, 101, 168, 0.07) 30px 31px);
-}
-
-.card {
-  position: relative;
-  margin-bottom: 12px;
-  padding: 14px;
-  border: 1px solid rgba(50, 42, 34, 0.14);
-  border-radius: 18px;
-  background:
-    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(252, 246, 236, 0.96)),
-    repeating-linear-gradient(180deg, transparent 0 26px, rgba(70, 101, 168, 0.05) 26px 27px);
-  box-shadow: var(--shadow-card);
-  cursor: grab;
-  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
-}
-
-.card::before {
-  content: "";
-  position: absolute;
-  top: 10px;
-  right: 14px;
-  width: 30px;
-  height: 10px;
-  border-radius: 999px;
-  background: rgba(190, 92, 92, 0.08);
-}
-
-.card:hover {
-  transform: translateY(-2px);
-  border-color: rgba(53, 95, 187, 0.24);
-  box-shadow: 0 14px 26px rgba(54, 42, 24, 0.12);
-}
-
-.card:active {
-  cursor: grabbing;
-}
-
-.card.dragging {
-  opacity: 0.56;
-  transform: rotate(1deg) scale(0.99);
-}
-
-.cardHeader {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: start;
-  margin-bottom: 12px;
-}
-
-.cardTitle {
-  margin: 0;
-  font-size: 1.06rem;
-  line-height: 1.35;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 68px;
-  padding: 7px 10px;
-  border-radius: 999px;
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-}
-
-.badgePriorityHigh {
-  color: #8e3348;
-  background: rgba(190, 92, 92, 0.14);
-}
-
-.badgePriorityMedium {
-  color: #8a611b;
-  background: rgba(197, 139, 40, 0.16);
-}
-
-.badgePriorityLow {
-  color: #296e53;
-  background: rgba(45, 138, 99, 0.12);
-}
-
-.cardDescription {
-  margin: 0 0 14px;
-  color: var(--muted);
-  font-size: 0.92rem;
-  line-height: 1.65;
-}
-
-.progressBar {
-  height: 9px;
-  margin-bottom: 12px;
-  border-radius: 999px;
-  background: rgba(53, 95, 187, 0.08);
-  overflow: hidden;
-}
-
-.progressValue {
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, #355fbb, #7ea4e7);
-}
-
-.cardMetaGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.metaItem {
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 10px;
-  background: rgba(255, 252, 246, 0.86);
-}
-
-.metaLabel {
-  display: block;
-  margin-bottom: 6px;
-  color: var(--muted);
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.09em;
-}
-
-.metaValue {
-  font-size: 0.9rem;
-  font-weight: 600;
-}
-
-.cardFooter {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-  color: var(--muted);
-  font-size: 0.8rem;
-}
-
-.cardFooter .ghostButton {
-  padding: 8px 12px;
-  font-size: 0.78rem;
-}
-
-.emptyState {
-  min-height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 18px;
-  text-align: center;
-  color: var(--muted);
-  border: 1px dashed rgba(50, 42, 34, 0.22);
-  border-radius: 18px;
-  background: rgba(255, 252, 246, 0.68);
-}
-
-.dialogBackdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 20;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background: rgba(40, 32, 20, 0.26);
-}
-
-.dialogBackdrop.open {
-  display: flex;
-}
-
-.dialog {
-  width: min(720px, 100%);
-  overflow: hidden;
-  border: 1px solid var(--line-strong);
-  border-radius: 28px;
-  background:
-    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(246, 240, 228, 0.98)),
-    repeating-linear-gradient(180deg, transparent 0 29px, rgba(70, 101, 168, 0.05) 29px 30px);
-  box-shadow: 0 28px 60px rgba(54, 42, 24, 0.18);
-}
-
-.dialogHeader,
-.dialogFooter {
-  padding: 18px 22px;
-}
-
-.dialogHeader {
-  border-bottom: 1px solid var(--line);
-}
-
-.dialogFooter {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-  border-top: 1px solid var(--line);
-  background: rgba(255, 250, 240, 0.76);
-}
-
-.dialogTitle {
-  margin: 0;
-  font-size: 1.34rem;
-}
-
-.dialogBody {
-  padding: 20px 22px;
-  display: grid;
-  gap: 14px;
-}
-
-.formGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.field {
-  display: grid;
-  gap: 8px;
-}
-
-.fieldWide {
-  grid-column: 1 / -1;
-}
-
-.field label {
-  color: var(--muted);
-  font-size: 0.82rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.helperText,
-.statusText {
-  color: var(--muted);
-  font-size: 0.8rem;
-}
-
-.hidden {
-  display: none !important;
-}
-
-@media (max-width: 1100px) {
-  .hero {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 720px) {
-  #app {
-    padding: 14px;
-  }
-
-  .heroTitle {
-    font-size: 2.5rem;
-  }
-
-  .toolbar,
-  .dialogFooter {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .formGrid {
-    grid-template-columns: 1fr;
-  }
-}
+
+:root {
+  --paper: #f6f0e4;
+  --paper-strong: #fffdf8;
+  --paper-soft: #efe5d4;
+  --board: #ebe0cd;
+  --card: #fffaf0;
+  --ink: #22201d;
+  --muted: #6f685f;
+  --line: rgba(50, 42, 34, 0.12);
+  --line-strong: rgba(50, 42, 34, 0.22);
+  --grid-blue: rgba(89, 118, 173, 0.16);
+  --grid-red: rgba(190, 92, 92, 0.13);
+  --accent: #355fbb;
+  --accent-soft: rgba(53, 95, 187, 0.12);
+  --success: #2d8a63;
+  --warning: #c58b28;
+  --danger: #be5c5c;
+  --shadow-soft: 0 14px 30px rgba(54, 42, 24, 0.08);
+  --shadow-card: 0 10px 18px rgba(54, 42, 24, 0.08);
+  --radius-xl: 30px;
+  --radius-lg: 22px;
+  --radius-md: 16px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  color: var(--ink);
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  background:
+    linear-gradient(90deg, transparent 79px, var(--grid-red) 79px, var(--grid-red) 81px, transparent 81px),
+    linear-gradient(var(--grid-blue) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-blue) 1px, transparent 1px),
+    linear-gradient(180deg, #fbf8f1 0%, var(--paper) 100%);
+  background-size: 100% 100%, 32px 32px, 32px 32px, 100% 100%;
+  background-attachment: fixed;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  cursor: pointer;
+}
+
+#app {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.shell {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--line-strong);
+  border-radius: 34px;
+  background:
+    linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(246, 240, 228, 0.92)),
+    repeating-linear-gradient(180deg, transparent 0 28px, rgba(70, 101, 168, 0.06) 28px 29px);
+  box-shadow: 0 22px 50px rgba(76, 58, 33, 0.12);
+}
+
+.shell::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 12% 14%, rgba(53, 95, 187, 0.08), transparent 18%),
+    radial-gradient(circle at 84% 16%, rgba(190, 92, 92, 0.07), transparent 16%),
+    radial-gradient(circle at 90% 88%, rgba(53, 95, 187, 0.05), transparent 20%);
+}
+
+.hero {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.2fr 0.9fr;
+  gap: 22px;
+  padding: 28px 28px 24px;
+  border-bottom: 1px solid var(--line);
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  left: 28px;
+  right: 28px;
+  bottom: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
+}
+
+.heroTitle,
+.dialogTitle,
+.columnTitle,
+.cardTitle {
+  font-family: Georgia, "Times New Roman", serif;
+}
+
+.heroTitle {
+  margin: 0 0 12px;
+  max-width: 720px;
+  font-size: 3.3rem;
+  line-height: 0.95;
+  letter-spacing: -0.04em;
+}
+
+.heroCopy {
+  margin: 0;
+  max-width: 760px;
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.8;
+}
+
+.heroMeta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(140px, 1fr));
+  gap: 14px;
+}
+
+.metricCard {
+  position: relative;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  padding: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 250, 240, 0.94), rgba(250, 244, 233, 0.94)),
+    repeating-linear-gradient(180deg, transparent 0 26px, rgba(70, 101, 168, 0.05) 26px 27px);
+  box-shadow: var(--shadow-soft);
+}
+
+.metricCard::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  width: 34px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(53, 95, 187, 0.08);
+}
+
+.metricLabel {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--muted);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.metricValue {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 18px;
+  padding: 18px 28px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 251, 244, 0.72);
+}
+
+.toolbarGroup {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.toolbarInput,
+.toolbarSelect,
+.toolbarTextarea {
+  width: 100%;
+  border: 1px solid var(--line-strong);
+  border-radius: 14px;
+  padding: 12px 14px;
+  color: var(--ink);
+  background: rgba(255, 253, 248, 0.98);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  outline: none;
+}
+
+.toolbarInput::placeholder,
+.toolbarTextarea::placeholder {
+  color: #8d8479;
+}
+
+.toolbarInput:focus,
+.toolbarSelect:focus,
+.toolbarTextarea:focus {
+  border-color: rgba(53, 95, 187, 0.48);
+  box-shadow: 0 0 0 4px rgba(53, 95, 187, 0.12);
+}
+
+.primaryButton,
+.secondaryButton,
+.ghostButton {
+  border-radius: 14px;
+  padding: 12px 16px;
+  font-weight: 600;
+  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
+}
+
+.primaryButton {
+  color: #fdfbf6;
+  background: linear-gradient(135deg, #3056aa, #4c76d2);
+  box-shadow: 0 12px 24px rgba(53, 95, 187, 0.18);
+}
+
+.secondaryButton {
+  color: var(--ink);
+  border: 1px solid var(--line-strong);
+  background: rgba(255, 250, 240, 0.88);
+}
+
+.ghostButton {
+  color: var(--muted);
+  border: 1px dashed rgba(50, 42, 34, 0.28);
+  background: rgba(255, 250, 240, 0.68);
+}
+
+.primaryButton:hover,
+.secondaryButton:hover,
+.ghostButton:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px rgba(54, 42, 24, 0.1);
+}
+
+.boardWrap {
+  padding: 22px;
+  overflow-x: auto;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(262px, 1fr));
+  gap: 16px;
+  min-width: 1380px;
+}
+
+.column {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 620px;
+  border: 1px solid var(--line-strong);
+  border-radius: 26px;
+  background:
+    linear-gradient(180deg, rgba(255, 252, 246, 0.92), rgba(247, 240, 229, 0.92)),
+    repeating-linear-gradient(180deg, transparent 0 30px, rgba(70, 101, 168, 0.06) 30px 31px);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.column::before {
+  content: "";
+  position: absolute;
+  top: 14px;
+  right: 16px;
+  width: 42px;
+  height: 12px;
+  border-radius: 999px;
+  background: rgba(53, 95, 187, 0.08);
+}
+
+.columnHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 16px 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.columnTitleWrap {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.columnDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45);
+}
+
+.columnTitle {
+  margin: 0;
+  font-size: 0.86rem;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+}
+
+.columnCount {
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.columnBody {
+  flex: 1;
+  padding: 14px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
+    repeating-linear-gradient(180deg, transparent 0 30px, rgba(70, 101, 168, 0.045) 30px 31px);
+  transition: background 180ms ease;
+}
+
+.columnBody.dragOver {
+  background:
+    linear-gradient(180deg, rgba(53, 95, 187, 0.09), rgba(53, 95, 187, 0.02)),
+    repeating-linear-gradient(180deg, transparent 0 30px, rgba(70, 101, 168, 0.07) 30px 31px);
+}
+
+.card {
+  position: relative;
+  margin-bottom: 12px;
+  padding: 14px;
+  border: 1px solid rgba(50, 42, 34, 0.14);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(252, 246, 236, 0.96)),
+    repeating-linear-gradient(180deg, transparent 0 26px, rgba(70, 101, 168, 0.05) 26px 27px);
+  box-shadow: var(--shadow-card);
+  cursor: grab;
+  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
+}
+
+.card::before {
+  content: "";
+  position: absolute;
+  top: 10px;
+  right: 14px;
+  width: 30px;
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(190, 92, 92, 0.08);
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(53, 95, 187, 0.24);
+  box-shadow: 0 14px 26px rgba(54, 42, 24, 0.12);
+}
+
+.card:active {
+  cursor: grabbing;
+}
+
+.card.dragging {
+  opacity: 0.56;
+  transform: rotate(1deg) scale(0.99);
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: start;
+  margin-bottom: 12px;
+}
+
+.cardTitle {
+  margin: 0;
+  font-size: 1.06rem;
+  line-height: 1.35;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 68px;
+  padding: 7px 10px;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.badgePriorityHigh {
+  color: #8e3348;
+  background: rgba(190, 92, 92, 0.14);
+}
+
+.badgePriorityMedium {
+  color: #8a611b;
+  background: rgba(197, 139, 40, 0.16);
+}
+
+.badgePriorityLow {
+  color: #296e53;
+  background: rgba(45, 138, 99, 0.12);
+}
+
+.cardDescription {
+  margin: 0 0 14px;
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.65;
+}
+
+.progressBar {
+  height: 9px;
+  margin-bottom: 12px;
+  border-radius: 999px;
+  background: rgba(53, 95, 187, 0.08);
+  overflow: hidden;
+}
+
+.progressValue {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #355fbb, #7ea4e7);
+}
+
+.cardMetaGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.metaItem {
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 10px;
+  background: rgba(255, 252, 246, 0.86);
+}
+
+.metaLabel {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+}
+
+.metaValue {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.cardFooter {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.cardFooter .ghostButton {
+  padding: 8px 12px;
+  font-size: 0.78rem;
+}
+
+.emptyState {
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  text-align: center;
+  color: var(--muted);
+  border: 1px dashed rgba(50, 42, 34, 0.22);
+  border-radius: 18px;
+  background: rgba(255, 252, 246, 0.68);
+}
+
+.dialogBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(40, 32, 20, 0.26);
+}
+
+.dialogBackdrop.open {
+  display: flex;
+}
+
+.dialog {
+  width: min(720px, 100%);
+  overflow: hidden;
+  border: 1px solid var(--line-strong);
+  border-radius: 28px;
+  background:
+    linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(246, 240, 228, 0.98)),
+    repeating-linear-gradient(180deg, transparent 0 29px, rgba(70, 101, 168, 0.05) 29px 30px);
+  box-shadow: 0 28px 60px rgba(54, 42, 24, 0.18);
+}
+
+.dialogHeader,
+.dialogFooter {
+  padding: 18px 22px;
+}
+
+.dialogHeader {
+  border-bottom: 1px solid var(--line);
+}
+
+.dialogFooter {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  border-top: 1px solid var(--line);
+  background: rgba(255, 250, 240, 0.76);
+}
+
+.dialogTitle {
+  margin: 0;
+  font-size: 1.34rem;
+}
+
+.dialogBody {
+  padding: 20px 22px;
+  display: grid;
+  gap: 14px;
+}
+
+.formGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.field {
+  display: grid;
+  gap: 8px;
+}
+
+.fieldWide {
+  grid-column: 1 / -1;
+}
+
+.field label {
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.helperText,
+.statusText {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.hidden {
+  display: none !important;
+}
+
+@media (max-width: 1100px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  #app {
+    padding: 14px;
+  }
+
+  .heroTitle {
+    font-size: 2.5rem;
+  }
+
+  .toolbar,
+  .dialogFooter {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .formGrid {
+    grid-template-columns: 1fr;
+  }
+}