| :root { |
| --bg: #f8fafc; |
| --text: #0f172a; |
| --muted: #64748b; |
| --line: rgba(15, 23, 42, .08); |
| --glass: rgba(255,255,255,.72); |
| --shadow: 0 24px 70px rgba(15, 23, 42, .10); |
| --radius: 24px; |
| } |
| * { box-sizing: border-box; } |
| html { min-height: 100%; background: var(--bg); } |
| body { |
| margin: 0; |
| min-height: 100vh; |
| color: var(--text); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; |
| background: |
| radial-gradient(circle at 8% 0%, rgba(59,130,246,.20), transparent 28rem), |
| radial-gradient(circle at 90% 12%, rgba(16,185,129,.18), transparent 30rem), |
| linear-gradient(180deg, #ffffff 0%, #f8fafc 60%); |
| } |
| button, textarea, input { font: inherit; } |
| button { border: 0; cursor: pointer; } |
| .shell { width: min(1500px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 48px; } |
| .hero { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 18px; |
| align-items: end; |
| margin-bottom: 18px; |
| } |
| .eyebrow { |
| display: inline-flex; |
| margin: 0 0 10px; |
| padding: 7px 12px; |
| border-radius: 999px; |
| background: rgba(15,23,42,.08); |
| color: #334155; |
| font-weight: 800; |
| font-size: 12px; |
| letter-spacing: .08em; |
| text-transform: uppercase; |
| } |
| h1 { margin: 0; font-size: clamp(30px, 5vw, 64px); letter-spacing: -.05em; line-height: .94; } |
| h1 span { color: #2563eb; } |
| .sub { max-width: 820px; color: var(--muted); font-size: 16px; line-height: 1.7; margin: 14px 0 0; } |
| .statusBoard { |
| min-width: 320px; |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 10px; |
| background: rgba(255,255,255,.72); |
| border: 1px solid var(--line); |
| border-radius: 22px; |
| padding: 10px; |
| box-shadow: var(--shadow); |
| backdrop-filter: blur(14px); |
| } |
| .statusBoard div { background: rgba(248,250,252,.9); border-radius: 16px; padding: 12px; } |
| .statusBoard b { display: block; font-size: 15px; white-space: nowrap; } |
| .statusBoard small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; } |
| .toolbar { |
| display: flex; |
| gap: 10px; |
| align-items: center; |
| flex-wrap: wrap; |
| margin: 18px 0; |
| } |
| .toolbar button, .toggle { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| height: 42px; |
| border: 1px solid var(--line); |
| background: var(--glass); |
| color: #1e293b; |
| border-radius: 999px; |
| padding: 0 16px; |
| font-weight: 800; |
| box-shadow: 0 8px 30px rgba(15,23,42,.06); |
| } |
| .toolbar button:hover { background: #fff; transform: translateY(-1px); } |
| .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } |
| .card { |
| position: relative; |
| min-height: 316px; |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| box-shadow: 0 16px 50px rgba(15, 23, 42, .08); |
| } |
| .card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.22)); pointer-events: none; } |
| .cardInner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 16px; } |
| .cardTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } |
| .name { margin: 0; font-size: 16px; letter-spacing: -.02em; } |
| .badge { display: inline-flex; align-items: center; min-height: 25px; border-radius: 999px; padding: 4px 9px; background: rgba(255,255,255,.58); color: #475569; font-size: 11px; font-weight: 900; text-transform: uppercase; } |
| .badge.loading { color: #9a3412; background: rgba(254,215,170,.8); } |
| .badge.error { color: #991b1b; background: rgba(254,202,202,.9); } |
| .badge.done { color: #166534; background: rgba(187,247,208,.8); } |
| textarea { |
| position: relative; |
| z-index: 1; |
| flex: 1; |
| width: 100%; |
| min-height: 210px; |
| resize: vertical; |
| border: 1px solid rgba(255,255,255,.44); |
| border-radius: 18px; |
| padding: 14px; |
| color: #0f172a; |
| background: rgba(255,255,255,.42); |
| outline: none; |
| line-height: 1.62; |
| font-size: 16px; |
| } |
| textarea:focus { background: rgba(255,255,255,.88); border-color: rgba(37,99,235,.24); box-shadow: 0 0 0 4px rgba(37,99,235,.08); } |
| .cardFoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; } |
| .small { color: #475569; font-size: 12px; font-weight: 800; } |
| .actions { display: flex; gap: 8px; } |
| .copy { |
| border-radius: 12px; |
| background: rgba(255,255,255,.64); |
| color: #1e293b; |
| padding: 7px 10px; |
| font-size: 12px; |
| font-weight: 900; |
| } |
| .copy:hover { background: #fff; } |
| .toast { |
| position: fixed; |
| left: 50%; |
| bottom: 22px; |
| transform: translate(-50%, 18px); |
| opacity: 0; |
| pointer-events: none; |
| background: #0f172a; |
| color: #fff; |
| border-radius: 999px; |
| padding: 11px 18px; |
| font-weight: 800; |
| font-size: 13px; |
| box-shadow: var(--shadow); |
| transition: .18s ease; |
| z-index: 20; |
| } |
| .toast.show { opacity: 1; transform: translate(-50%, 0); } |
| @media (max-width: 1140px) { |
| .hero { grid-template-columns: 1fr; } |
| .statusBoard { min-width: 0; width: 100%; } |
| .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| } |
| @media (max-width: 720px) { |
| .shell { width: min(100% - 18px, 1500px); padding-top: 18px; } |
| .grid { grid-template-columns: 1fr; } |
| .statusBoard { grid-template-columns: 1fr; } |
| .toolbar { align-items: stretch; } |
| .toolbar button, .toggle { flex: 1; justify-content: center; } |
| } |
|
|
