:root { font-family: Inter, "Microsoft YaHei", sans-serif; color: #17212b; background: #eef1f3; }
* { box-sizing: border-box; }
body { margin: 0; }
[v-cloak] { display: none; }
.topbar { height: 64px; padding: 0 max(24px, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #d8dde2; }
.topbar div { display: flex; align-items: baseline; gap: 14px; }.topbar strong { font-size: 20px; color: #087f5b; }.topbar span { color: #68737d; }.topbar a { color: #087f5b; text-decoration: none; }
.workspace { max-width: 1240px; margin: 32px auto; display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(420px, 1.1fr); background: #fff; border: 1px solid #d8dde2; min-height: calc(100vh - 128px); }
.formPane,.resultPane { padding: 32px; }.formPane { border-right: 1px solid #d8dde2; }.formPane h1 { margin: 0 0 28px; font-size: 26px; }.formPane label { display: block; margin: 18px 0 8px; font-weight: 600; font-size: 14px; }
input,textarea,button { font: inherit; } input,textarea { width: 100%; border: 1px solid #b9c1c8; padding: 11px 12px; border-radius: 4px; background: #fff; } input:focus,textarea:focus { outline: 2px solid #9ad7c5; border-color: #087f5b; } textarea { min-height: 280px; resize: vertical; font-family: Consolas, monospace; font-size: 13px; }
button { border: 1px solid #aeb7bf; background: #fff; padding: 9px 14px; border-radius: 4px; cursor: pointer; } button:hover { background: #f4f6f7; }.primary { background: #087f5b; color: white; border-color: #087f5b; }.primary:hover { background: #066c4d; }.formPane .primary { width: 100%; margin-top: 22px; padding: 12px; }.primary:disabled { opacity: .55; cursor: not-allowed; }
.resultHead { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.resultHead h2 { margin: 0; font-size: 18px; }.resultHead div { display: flex; gap: 8px; }.resultPane pre,.generated pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #17212b; color: #dce6e3; padding: 20px; min-height: 360px; border-radius: 4px; line-height: 1.55; }.empty { min-height: 430px; display: grid; place-items: center; color: #8a949d; }.error { color: #c92a2a; }.notice { color: #087f5b; }
.admin { max-width: 1240px; margin: 32px auto; }.adminTools { display: grid; grid-template-columns: 1fr 100px auto auto; gap: 10px; background: #fff; padding: 20px; border: 1px solid #d8dde2; }.generated { margin-top: 20px; background: #fff; padding: 20px; border: 1px solid #d8dde2; }.generated pre { min-height: auto; }.tableWrap { margin-top: 20px; overflow-x: auto; background: #fff; border: 1px solid #d8dde2; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th,td { padding: 13px 15px; border-bottom: 1px solid #e1e5e8; text-align: left; white-space: nowrap; } th { background: #f5f7f8; }.status { font-weight: 600; }.status.unused { color: #087f5b; }.status.used { color: #868e96; }
@media (max-width: 760px) { .topbar { padding: 0 16px; }.workspace { margin: 16px; display: block; }.formPane { border-right: 0; border-bottom: 1px solid #d8dde2; }.formPane,.resultPane { padding: 22px; }.admin { margin: 16px; }.adminTools { grid-template-columns: 1fr 90px; }.adminTools button { width: 100%; }.empty { min-height: 240px; } }