agent-office-cli 0.0.1 → 0.1.0

package/src/web/public/login.css

@@ -1,833 +0,0 @@
-/* === AgentOffice Auth — Warm Atelier === */
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display&display=swap');
-
-/* --- Reset --- */
-*, *::before, *::after { box-sizing: border-box; }
-
-/* --- Auth design tokens --- */
-:root {
-  --auth-bg: #f4ebe0;
-  --auth-surface: #fffbf5;
-  --auth-border: #d6c9b6;
-  --auth-border-strong: #2f2b26;
-  --auth-text: #2f2b26;
-  --auth-text-muted: #8a7e6e;
-  --auth-accent: #b95c33;
-  --auth-accent-hover: #a34e28;
-  --auth-accent-glow: rgba(185, 92, 51, 0.15);
-  --auth-error-bg: #fef0ee;
-  --auth-error-border: #e8a89e;
-  --auth-error-text: #8b3a2e;
-  --auth-success-bg: #effbf0;
-  --auth-success-border: #a3d9a5;
-  --auth-radius: 14px;
-  --auth-radius-sm: 10px;
-  --auth-font-body: 'DM Sans', system-ui, sans-serif;
-  --auth-font-display: 'DM Serif Display', Georgia, serif;
-  --auth-shadow: 0 1px 3px rgba(47,43,38,0.06), 0 8px 24px rgba(47,43,38,0.08);
-  --auth-shadow-lg: 0 2px 8px rgba(47,43,38,0.08), 0 16px 48px rgba(47,43,38,0.12);
-
-  /* Dashboard light tokens */
-  --dash-bg: #f4ebe0;
-  --dash-surface: #fffbf5;
-  --dash-surface-hover: #f8f2e8;
-  --dash-border: #d6c9b6;
-  --dash-text: #2f2b26;
-  --dash-text-muted: #8a7e6e;
-  --dash-accent: #b95c33;
-}
-
-/* --- Base auth shell --- */
-.auth-page {
-  margin: 0;
-  min-height: 100vh;
-  font-family: var(--auth-font-body);
-  color: var(--auth-text);
-  background: var(--auth-bg);
-  background-image:
-    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(185,92,51,0.06) 0%, transparent 60%),
-    radial-gradient(ellipse 80% 100% at 90% 100%, rgba(185,92,51,0.04) 0%, transparent 50%);
-  -webkit-font-smoothing: antialiased;
-}
-
-.auth-shell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  padding: 24px 16px;
-}
-
-/* --- Card --- */
-.auth-card {
-  width: 100%;
-  max-width: 440px;
-  background: var(--auth-surface);
-  border: 1px solid var(--auth-border);
-  border-radius: 20px;
-  box-shadow: var(--auth-shadow);
-  padding: 40px 36px 36px;
-  animation: authCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-@keyframes authCardIn {
-  from { opacity: 0; transform: translateY(12px) scale(0.98); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* --- Brand --- */
-.auth-brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 28px;
-}
-
-.auth-brand-mark {
-  width: 28px;
-  height: 28px;
-  background: var(--auth-accent);
-  border-radius: 8px;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-}
-
-.auth-brand-mark svg {
-  width: 16px;
-  height: 16px;
-  fill: #fff;
-}
-
-.auth-brand-name {
-  font-family: var(--auth-font-display);
-  font-size: 18px;
-  color: var(--auth-text);
-  letter-spacing: -0.01em;
-}
-
-/* --- Headings --- */
-.auth-title {
-  font-family: var(--auth-font-display);
-  font-size: 28px;
-  font-weight: 400;
-  margin: 0 0 6px;
-  letter-spacing: -0.02em;
-  line-height: 1.2;
-}
-
-.auth-subtitle {
-  color: var(--auth-text-muted);
-  font-size: 14px;
-  line-height: 1.6;
-  margin: 0 0 28px;
-}
-
-/* --- Form --- */
-.auth-form {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-}
-
-.auth-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.auth-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--auth-text);
-  letter-spacing: 0.01em;
-}
-
-.auth-input {
-  width: 100%;
-  padding: 11px 14px;
-  border: 1.5px solid var(--auth-border);
-  border-radius: var(--auth-radius-sm);
-  background: #fff;
-  font-size: 15px;
-  font-family: var(--auth-font-body);
-  color: var(--auth-text);
-  transition: border-color 0.2s, box-shadow 0.2s;
-  outline: none;
-}
-
-.auth-input::placeholder {
-  color: var(--auth-text-muted);
-  opacity: 0.6;
-}
-
-.auth-input:focus {
-  border-color: var(--auth-accent);
-  box-shadow: 0 0 0 3px var(--auth-accent-glow);
-}
-
-/* --- Buttons --- */
-.auth-btn {
-  padding: 12px 20px;
-  border: none;
-  border-radius: var(--auth-radius-sm);
-  font-family: var(--auth-font-body);
-  font-size: 15px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  outline: none;
-  position: relative;
-}
-
-.auth-btn:focus-visible {
-  box-shadow: 0 0 0 3px var(--auth-accent-glow);
-}
-
-.auth-btn-primary {
-  background: var(--auth-accent);
-  color: #fff;
-}
-
-.auth-btn-primary:hover:not(:disabled) {
-  background: var(--auth-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(185,92,51,0.25);
-}
-
-.auth-btn-primary:active:not(:disabled) {
-  transform: translateY(0);
-  box-shadow: none;
-}
-
-.auth-btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.auth-btn-ghost {
-  background: #fff;
-  color: var(--auth-text);
-  border: 1.5px solid var(--auth-border);
-}
-
-.auth-btn-ghost:hover:not(:disabled) {
-  border-color: var(--auth-border-strong);
-  background: #fefcf8;
-}
-
-.auth-btn-sm {
-  padding: 8px 14px;
-  font-size: 13px;
-  border-radius: 8px;
-}
-
-/* --- Email row with send code --- */
-.auth-email-row {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-}
-
-.auth-email-row .auth-input {
-  flex: 1;
-  min-width: 0;
-}
-
-.auth-send-btn {
-  padding: 11px 16px;
-  border: 1.5px solid var(--auth-border);
-  border-radius: var(--auth-radius-sm);
-  background: #fff;
-  color: var(--auth-text);
-  font-family: var(--auth-font-body);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: all 0.2s;
-}
-
-.auth-send-btn:hover:not(:disabled) {
-  border-color: var(--auth-accent);
-  color: var(--auth-accent);
-}
-
-.auth-send-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.auth-send-btn.sent {
-  border-color: var(--auth-success-border);
-  color: #3d7a3f;
-  background: var(--auth-success-bg);
-}
-
-/* --- Code input row --- */
-.auth-code-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  max-height: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
-              opacity 0.3s ease,
-              margin 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  margin-top: 0;
-}
-
-.auth-code-row.visible {
-  max-height: 80px;
-  opacity: 1;
-  margin-top: 0;
-}
-
-.auth-code-input {
-  flex: 1;
-  padding: 11px 14px;
-  border: 1.5px solid var(--auth-border);
-  border-radius: var(--auth-radius-sm);
-  background: #fff;
-  font-size: 22px;
-  font-weight: 700;
-  font-family: 'DM Sans', monospace;
-  letter-spacing: 6px;
-  text-align: center;
-  color: var(--auth-text);
-  transition: border-color 0.2s, box-shadow 0.2s;
-  outline: none;
-  min-width: 0;
-}
-
-.auth-code-input::placeholder {
-  font-size: 14px;
-  letter-spacing: 1px;
-  font-weight: 400;
-  color: var(--auth-text-muted);
-  opacity: 0.5;
-}
-
-.auth-code-input:focus {
-  border-color: var(--auth-accent);
-  box-shadow: 0 0 0 3px var(--auth-accent-glow);
-}
-
-.auth-resend-btn {
-  background: none;
-  border: none;
-  padding: 4px 0;
-  font-family: var(--auth-font-body);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--auth-accent);
-  cursor: pointer;
-  white-space: nowrap;
-  min-width: 56px;
-  text-align: right;
-  transition: color 0.2s;
-}
-
-.auth-resend-btn:disabled {
-  color: var(--auth-text-muted);
-  cursor: default;
-}
-
-.auth-resend-btn:hover:not(:disabled) {
-  color: var(--auth-accent-hover);
-}
-
-/* --- Turnstile --- */
-.auth-turnstile {
-  display: flex;
-  justify-content: center;
-}
-
-.auth-turnstile:empty {
-  display: none;
-}
-
-/* --- Error box --- */
-.auth-error {
-  margin-top: 4px;
-  padding: 10px 14px;
-  background: var(--auth-error-bg);
-  border: 1px solid var(--auth-error-border);
-  border-radius: var(--auth-radius-sm);
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--auth-error-text);
-  animation: authShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-}
-
-@keyframes authShake {
-  10%, 90% { transform: translateX(-1px); }
-  20%, 80% { transform: translateX(2px); }
-  30%, 50%, 70% { transform: translateX(-3px); }
-  40%, 60% { transform: translateX(3px); }
-}
-
-/* --- Toggle link --- */
-.auth-toggle {
-  margin-top: 24px;
-  padding-top: 20px;
-  border-top: 1px solid var(--auth-border);
-  text-align: center;
-  font-size: 14px;
-  color: var(--auth-text-muted);
-}
-
-.auth-toggle a {
-  color: var(--auth-accent);
-  cursor: pointer;
-  font-weight: 600;
-  text-decoration: none;
-  transition: color 0.15s;
-}
-
-.auth-toggle a:hover {
-  color: var(--auth-accent-hover);
-  text-decoration: underline;
-}
-
-/* --- Mode sections --- */
-.auth-mode { display: none; }
-.auth-mode.active {
-  display: block;
-  animation: authFadeIn 0.3s ease both;
-}
-
-@keyframes authFadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-/* --- Divider --- */
-.auth-divider {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin: 4px 0;
-  color: var(--auth-text-muted);
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.auth-divider::before,
-.auth-divider::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: var(--auth-border);
-}
-
-/* ========================================
-   Dashboard (light theme)
-   ======================================== */
-.dash-page {
-  margin: 0;
-  min-height: 100vh;
-  font-family: var(--auth-font-body);
-  color: var(--dash-text);
-  background: var(--dash-bg);
-  background-image:
-    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(185,92,51,0.06) 0%, transparent 60%),
-    radial-gradient(ellipse 80% 100% at 90% 100%, rgba(185,92,51,0.04) 0%, transparent 50%);
-  -webkit-font-smoothing: antialiased;
-}
-
-.dash-shell {
-  display: flex;
-  justify-content: center;
-  padding: 40px 16px 60px;
-  min-height: 100vh;
-}
-
-.dash-card {
-  width: 100%;
-  max-width: 560px;
-  animation: authCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-/* --- Dashboard header --- */
-.dash-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.dash-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.dash-brand {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dash-brand-mark {
-  width: 24px;
-  height: 24px;
-  background: var(--dash-accent);
-  border-radius: 6px;
-  display: grid;
-  place-items: center;
-}
-
-.dash-brand-mark svg {
-  width: 14px;
-  height: 14px;
-  fill: #fff;
-}
-
-.dash-brand-name {
-  font-family: var(--auth-font-display);
-  font-size: 15px;
-  color: var(--dash-text-muted);
-}
-
-.dash-logout {
-  background: none;
-  border: 1px solid var(--dash-border);
-  border-radius: 8px;
-  color: var(--dash-text-muted);
-  cursor: pointer;
-  font-family: var(--auth-font-body);
-  font-size: 13px;
-  padding: 6px 14px;
-  transition: all 0.2s;
-}
-
-.dash-nav-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 33px;
-  padding: 6px 14px;
-  border: 1px solid var(--dash-border);
-  border-radius: 8px;
-  color: var(--dash-text-muted);
-  text-decoration: none;
-  font-family: var(--auth-font-body);
-  font-size: 13px;
-  transition: all 0.2s;
-}
-
-.dash-nav-link:hover {
-  border-color: var(--dash-text-muted);
-  color: var(--dash-text);
-}
-
-.dash-logout:hover {
-  border-color: var(--dash-text-muted);
-  color: var(--dash-text);
-}
-
-/* --- Dashboard title --- */
-.dash-title {
-  font-family: var(--auth-font-display);
-  font-size: 32px;
-  font-weight: 400;
-  margin: 20px 0 4px;
-  letter-spacing: -0.02em;
-}
-
-.dash-user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 32px;
-  font-size: 14px;
-  color: var(--dash-text-muted);
-}
-
-.dash-user strong {
-  color: var(--dash-text);
-  font-weight: 600;
-}
-
-/* --- Dashboard sections --- */
-.dash-section {
-  background: var(--dash-surface);
-  border: 1px solid var(--dash-border);
-  border-radius: 16px;
-  padding: 24px;
-  margin-bottom: 16px;
-  box-shadow: var(--auth-shadow);
-}
-
-.dash-section-title {
-  font-family: var(--auth-font-display);
-  font-size: 18px;
-  font-weight: 400;
-  margin: 0 0 16px;
-  letter-spacing: -0.01em;
-}
-
-/* --- Key list --- */
-.dash-key-item {
-  display: flex;
-  align-items: center;
-  padding: 10px 14px;
-  background: var(--dash-bg);
-  border: 1px solid var(--dash-border);
-  border-radius: var(--auth-radius-sm);
-  margin-bottom: 8px;
-  gap: 10px;
-  transition: border-color 0.15s;
-}
-
-.dash-key-item:hover {
-  border-color: var(--auth-border-strong);
-}
-
-.dash-key-prefix {
-  font-family: 'DM Sans', monospace;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--dash-text);
-  letter-spacing: 0.02em;
-}
-
-.dash-key-label {
-  font-size: 13px;
-  color: var(--dash-text-muted);
-}
-
-.dash-key-date {
-  font-size: 12px;
-  color: var(--dash-text-muted);
-  opacity: 0.6;
-  margin-left: auto;
-}
-
-.dash-key-delete {
-  background: none;
-  border: 1px solid #e8a89e;
-  color: #8b3a2e;
-  border-radius: 6px;
-  padding: 4px 10px;
-  cursor: pointer;
-  font-family: var(--auth-font-body);
-  font-size: 12px;
-  font-weight: 500;
-  transition: all 0.15s;
-  flex-shrink: 0;
-}
-
-.dash-key-delete:hover {
-  background: #8b3a2e;
-  color: #fff;
-}
-
-.dash-empty {
-  text-align: center;
-  padding: 20px;
-  color: var(--dash-text-muted);
-  font-size: 14px;
-}
-
-.dash-create-btn {
-  width: 100%;
-  padding: 10px;
-  margin-top: 8px;
-  border: 1px dashed var(--dash-border);
-  background: none;
-  color: var(--dash-text-muted);
-  border-radius: var(--auth-radius-sm);
-  cursor: pointer;
-  font-family: var(--auth-font-body);
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.dash-create-btn:hover {
-  border-color: var(--dash-accent);
-  color: var(--dash-accent);
-  background: rgba(185,92,51,0.06);
-}
-
-/* --- New key banner --- */
-.dash-new-key {
-  background: var(--auth-success-bg);
-  border: 1px solid var(--auth-success-border);
-  border-radius: var(--auth-radius-sm);
-  padding: 14px 16px;
-  margin-bottom: 12px;
-  animation: authFadeIn 0.3s ease both;
-}
-
-.dash-new-key p {
-  margin: 0 0 8px;
-  font-size: 13px;
-  color: #3d7a3f;
-  font-weight: 500;
-}
-
-.dash-new-key-value {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dash-new-key-value code {
-  flex: 1;
-  font-size: 12px;
-  word-break: break-all;
-  background: #f0f7f0;
-  padding: 8px 10px;
-  border-radius: 6px;
-  color: var(--dash-text);
-  font-family: 'DM Sans', monospace;
-}
-
-.dash-copy-btn {
-  background: #3d7a3f;
-  border: none;
-  color: #fff;
-  border-radius: 6px;
-  padding: 6px 12px;
-  cursor: pointer;
-  font-family: var(--auth-font-body);
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-  transition: background 0.15s;
-}
-
-.dash-copy-btn:hover {
-  background: #2d6a2f;
-}
-
-/* --- Command box --- */
-.dash-command {
-  background: var(--dash-bg);
-  border: 1px solid var(--dash-border);
-  border-radius: var(--auth-radius-sm);
-  padding: 14px 16px;
-  position: relative;
-}
-
-.dash-command code {
-  display: block;
-  font-size: 13px;
-  word-break: break-all;
-  white-space: pre-wrap;
-  color: var(--dash-text);
-  font-family: 'DM Sans', monospace;
-  padding-right: 56px;
-  line-height: 1.5;
-}
-
-.dash-command .dash-copy-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: var(--dash-surface);
-  border: 1px solid var(--dash-border);
-}
-
-.dash-command .dash-copy-btn:hover {
-  background: var(--dash-surface-hover);
-}
-
-.dash-helper {
-  font-size: 13px;
-  color: var(--dash-text-muted);
-  margin: 10px 0 0;
-  line-height: 1.5;
-}
-
-/* --- Office link --- */
-.dash-office-link {
-  display: block;
-  text-align: center;
-  padding: 12px;
-  background: var(--dash-accent);
-  color: #fff;
-  border-radius: var(--auth-radius-sm);
-  text-decoration: none;
-  font-weight: 600;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.dash-office-link:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(185,92,51,0.25);
-}
-
-.dash-office-link.offline {
-  background: var(--dash-surface);
-  border: 1px solid var(--dash-border);
-  color: var(--dash-text-muted);
-  pointer-events: none;
-  transform: none;
-  box-shadow: none;
-}
-
-/* ========================================
-   Responsive
-   ======================================== */
-@media (max-width: 520px) {
-  .auth-card {
-    padding: 28px 20px 24px;
-    border-radius: 16px;
-  }
-
-  .auth-title {
-    font-size: 24px;
-  }
-
-  .auth-email-row {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .auth-send-btn {
-    width: 100%;
-    text-align: center;
-  }
-
-  .auth-code-input {
-    font-size: 18px;
-    letter-spacing: 4px;
-  }
-
-  .dash-shell {
-    padding: 20px 12px 40px;
-  }
-
-  .dash-section {
-    padding: 18px 16px;
-    border-radius: 14px;
-  }
-
-  .dash-title {
-    font-size: 26px;
-  }
-
-  .dash-key-item {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .dash-key-date {
-    margin-left: 0;
-    width: 100%;
-    order: 10;
-  }
-
-  .dash-key-delete {
-    margin-left: auto;
-  }
-}