feat: initial sketch with AI

src/assets/main.css

@@ -1,35 +1,133 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  min-height: 100vh;
   font-weight: normal;
 }
 
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.7rem 1rem;
+  font-size: 0.95rem;
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    opacity 0.15s;
 }
 
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
 }
 
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
+.btn-primary {
+  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-soft) 100%);
+  color: #ffffff;
+  box-shadow: var(--shadow-sm);
+}
 
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
+.btn-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--c-accent-strong) 0%, var(--c-accent) 100%);
+}
+
+.btn-secondary {
+  background-color: var(--c-bg-mute);
+  color: var(--c-text);
+  border-color: var(--c-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  border-color: var(--c-border-hover);
+  background-color: var(--c-bg-elevated);
+}
+
+.btn-danger {
+  background-color: transparent;
+  color: var(--c-danger);
+  border-color: rgba(248, 113, 113, 0.35);
+}
+
+.btn-danger:hover:not(:disabled) {
+  background-color: var(--c-danger-bg);
+}
+
+.btn-icon {
+  width: auto;
+  padding: 0.5rem;
+}
+
+.card {
+  background-color: var(--c-bg-soft);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.field label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--c-text-soft);
+}
+
+.field input,
+.field textarea {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  background-color: var(--c-bg-mute);
+  color: var(--c-heading);
+  outline: none;
+  font-size: 0.95rem;
+  transition: border-color 0.15s ease-in-out;
+}
+
+.field input::placeholder,
+.field textarea::placeholder {
+  color: var(--c-text-soft);
+}
+
+.field input:focus,
+.field textarea:focus {
+  border-color: var(--c-accent);
+}
+
+.banner {
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+}
+
+.banner-error {
+  background-color: var(--c-danger-bg);
+  border: 1px solid rgba(248, 113, 113, 0.4);
+  color: var(--c-danger);
+}
+
+.page {
+  min-height: 100vh;
+  padding: 1rem 1rem calc(var(--nav-height) + var(--safe-bottom) + 1.5rem);
+  padding-top: calc(1rem + var(--safe-top));
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .page {
+    padding-left: 2rem;
+    padding-right: 2rem;
   }
 }