@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #0A1826;
  --panel: #11253B;
  --line: #24405C;
  --line-soft: #1B334C;
  --text: #F4F1E8;
  --text-dim: #A8B4C2;
  --text-faint: #64768D;
  --gold: #C8A465;
  --gold-hover: #D8B678;
}

* { box-sizing: border-box; }
html, body { background: var(--ink); margin: 0; }
body { font-family: 'Inter', sans-serif; color: var(--text); min-height: 100vh; }

.kg-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.kg-screen-top { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1.5rem; }
.kg-wrap { width: 100%; max-width: 26rem; }
.kg-wrap-wide { width: 100%; max-width: 28rem; }

.kg-logo { height: 5.5rem; width: auto; display: block; }
.kg-logo-sm { height: 4.25rem; width: auto; display: block; }
.kg-logo-xs { height: 2.75rem; width: auto; display: block; }
.kg-center { display: flex; justify-content: center; margin-bottom: 1.75rem; }

.kg-h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.6rem; text-align: center; margin: 0 0 .6rem; letter-spacing: -0.01em; color: var(--text); }
.kg-h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; margin: 0; color: var(--text); }
.kg-lede { color: var(--text-dim); font-size: .92rem; line-height: 1.65; text-align: center; max-width: 27rem; margin: 0 auto 2.25rem; }

.kg-field { margin-bottom: 1rem; }
.kg-label { font-size: .78rem; color: var(--text-dim); display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; }
.kg-input { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: .5rem; padding: .8rem 1rem; color: var(--text); font-family: inherit; font-size: .95rem; outline: none; transition: border-color .15s ease; }
.kg-input::placeholder { color: var(--text-faint); }
.kg-input:focus { border-color: var(--gold); }

.kg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: .9rem; border-radius: .5rem; padding: .85rem 1.3rem; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; font-family: inherit; }
.kg-btn-primary { background: var(--gold); color: #1B1409; width: 100%; }
.kg-btn-primary:hover:not(:disabled) { background: var(--gold-hover); }
.kg-btn-primary:disabled { background: var(--line); color: var(--text-faint); cursor: not-allowed; }
.kg-btn-ghost { background: transparent; color: var(--gold); border-color: var(--gold); padding: .55rem .9rem; font-size: .8rem; }
.kg-btn-ghost:hover { background: rgba(200,164,101,0.1); }
.kg-link-quiet { background: none; border: none; color: var(--text-faint); font-size: .72rem; cursor: pointer; font-family: inherit; padding: .5rem; }
.kg-link-quiet:hover { color: var(--text-dim); }

.kg-word-row { display: flex; align-items: center; justify-content: space-between; border-radius: .6rem; border: 1px solid var(--line); background: var(--panel); padding: .9rem 1.1rem; margin-bottom: .6rem; transition: border-color .15s ease, background .15s ease; gap: .75rem; }
.kg-word-row.is-more { border-color: var(--gold); background: rgba(200,164,101,0.09); }
.kg-word-row.is-less { border-color: var(--text-faint); }
.kg-word-text { font-size: .93rem; line-height: 1.5; }
.kg-pill { font-size: .72rem; padding: .4rem .75rem; border-radius: .4rem; border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; background: transparent; transition: all .15s ease; font-family: inherit; flex-shrink: 0; }
.kg-pill.is-active-more { background: var(--gold); border-color: var(--gold); color: #1B1409; }
.kg-pill.is-active-less { background: var(--text-faint); border-color: var(--text-faint); color: #1B1409; }

.kg-progress { display: flex; gap: 3px; margin-bottom: 1.5rem; }
.kg-progress-seg { height: 3px; flex: 1; border-radius: 2px; background: var(--line-soft); }
.kg-progress-seg.is-done { background: var(--gold); }
.kg-step-count { font-size: .78rem; color: var(--text-dim); margin-bottom: .8rem; }

.kg-report-eyebrow { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--gold); margin-bottom: .4rem; }
.kg-hr { height: 1px; background: var(--line); margin: 0 0 1.4rem; }
.kg-dim-block { border-left: 3px solid; padding-left: 1.1rem; margin-bottom: 1.6rem; }
.kg-dim-title { font-size: .98rem; font-weight: 600; margin-bottom: .5rem; display: flex; align-items: baseline; gap: .5rem; }
.kg-dim-pct { font-size: .75rem; color: var(--text-dim); font-weight: 400; }
.kg-dim-desc { font-size: .87rem; line-height: 1.7; margin-bottom: .4rem; color: var(--text); }
.kg-dim-grid { display: grid; grid-template-columns: 1fr; gap: .4rem; font-size: .8rem; color: var(--text-dim); }
@media (min-width: 640px) { .kg-dim-grid { grid-template-columns: 1fr 1fr; gap: .4rem 1.75rem; } }
.kg-dim-grid b { color: var(--text); font-weight: 600; }

.kg-score-row { margin-bottom: .8rem; }
.kg-score-label { display: flex; justify-content: space-between; font-size: .78rem; margin-bottom: .3rem; }
.kg-score-track { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.kg-score-fill { height: 100%; border-radius: 3px; }

.kg-error-text { color: #C96A55; font-size: .78rem; margin-top: .5rem; }
.kg-status { font-size: .78rem; color: var(--text-dim); margin-top: 1rem; text-align: center; min-height: 1.2em; }

/* Landing page */
.kg-landing { max-width: 40rem; margin: 0 auto; padding: 4rem 1.5rem; }
.kg-test-card { display: block; border: 1px solid var(--line); background: var(--panel); border-radius: .7rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; text-decoration: none; transition: border-color .15s ease; }
.kg-test-card:hover { border-color: var(--gold); }
.kg-test-card h3 { font-family: 'Fraunces', serif; color: var(--text); margin: 0 0 .3rem; font-size: 1.1rem; }
.kg-test-card p { color: var(--text-dim); margin: 0; font-size: .85rem; line-height: 1.5; }