:root { color: #152722; background: #edf4f1; font: 16px/1.48 system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; } .topbar, main, footer, .gate { max-width: 1220px; margin: auto; padding: 18px; } .topbar { display: flex; gap: 20px; align-items: start; justify-content: space-between; } h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.2rem); } h2, h3, p { margin-top: 0; } .eyebrow { color: #075e55; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .boundary { max-width: 760px; color: #384a45; } .actions, .admin-toolbar { display: flex; flex-wrap: wrap; gap: 8px; } button { min-height: 44px; border: 1px solid #075e55; border-radius: 7px; background: #08786d; color: #fff; cursor: pointer; font: inherit; font-weight: 720; padding: 8px 12px; } button:disabled { cursor: not-allowed; opacity: .52; } button.secondary { border-color: #9eb7af; background: #f8fbfa; color: #19342d; } button.danger { border-color: #962d2d; background: #9f3737; } .gate { display: flex; gap: 12px; border-block: 1px solid #c6972b; background: #fff7dd; color: #4c3705; } .gate strong { white-space: nowrap; } main { display: grid; gap: 16px; } .panel, .offline-link { border: 1px solid #c3d6cf; border-radius: 11px; background: #fff; padding: 18px; } .section-head { display: flex; gap: 12px; justify-content: space-between; } .badge, .review { align-self: start; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; padding: 5px 8px; white-space: nowrap; } .badge { background: #e1f2ed; color: #075e55; } .review { background: #fff1cc; color: #775300; } .field-grid, .module-grid, .auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } label { display: grid; gap: 5px; font-weight: 680; } input, textarea, select { border: 1px solid #91aca4; border-radius: 6px; font: inherit; min-width: 0; padding: 9px; } textarea { min-height: 105px; resize: vertical; } details { margin-top: 14px; border-top: 1px solid #dde9e5; padding-top: 12px; } summary { cursor: pointer; font-weight: 750; } .module { border: 1px solid #d8e5e0; border-radius: 8px; padding: 10px; } .module h3 { font-size: 1rem; margin-bottom: 6px; } .module p { color: #526560; font-size: .9rem; } .module .finding { display: grid; gap: 4px; margin-top: 7px; font-size: .9rem; } .report { border-top: 1px solid #dce8e4; display: grid; gap: 8px; margin: 10px 0; padding-top: 10px; } .final-text { min-height: 360px; width: 100%; } .status { color: #39514a; } .metrics, .privacy, footer { color: #536762; font-size: .9rem; } .issues { border-left: 4px solid #a12d2d; background: #fff1f1; color: #5a1717; margin-top: 12px; padding: 10px; } .issues ul { margin-bottom: 0; } #previewText { min-height: 380px; font: 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; width: 100%; } .digest, code { overflow-wrap: anywhere; } .confirm { grid-template-columns: auto 1fr; align-items: start; font-weight: 500; margin: 12px 0; } .confirm input { margin-top: 4px; } .receipt { border-left: 4px solid #08786d; background: #e7f5ef; margin-top: 12px; padding: 10px; } .admin-create { display: grid; gap: 9px; max-width: 680px; } .table-wrap { overflow-x: auto; } table { border-collapse: collapse; min-width: 720px; width: 100%; } th, td { border-bottom: 1px solid #dce8e4; padding: 8px; text-align: left; vertical-align: top; } th { background: #f4f9f7; } td .actions { min-width: 250px; } pre { max-height: 480px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: #f4f8f7; padding: 12px; } a { color: #075e55; font-weight: 700; } footer { padding-bottom: 28px; } @media (max-width: 760px) { .topbar, .section-head, .gate { display: block; } .actions { margin-top: 12px; } .field-grid, .module-grid, .auth-grid { grid-template-columns: 1fr; } .gate strong { display: block; margin-bottom: 6px; } }