.app-head { border-bottom: 1px solid var(--line); }
.app-hero { padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.app-hero h1 { margin-inline: auto; font-size: clamp(2.8rem, 6vw, 4.5rem); }
.app-hero .lede { margin-inline: auto; }
.workspace { display: grid; grid-template-columns: minmax(16rem, .76fr) minmax(0, 1.24fr); gap: clamp(1.25rem, 4vw, 3.5rem); padding-bottom: clamp(4rem, 7vw, 7rem); }
.privacy-card, .draft-card, .brand-card, .result, .progress { border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); box-shadow: 0 15px 35px rgba(32,39,47,.05); }
.privacy-card, .draft-card { padding: clamp(1.35rem, 3vw, 2.3rem); }
.privacy-card h2, .draft-card h2, .result h2, .progress h2, .honesty h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.privacy-card > p:not(.eyebrow), .honesty p:not(.eyebrow) { margin-top: .8rem; color: var(--muted); font-size: .93rem; }
label { display: block; margin-top: 1.35rem; font-size: .86rem; font-weight: 600; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.opts label { margin-top: 0; }
.opts select, input, textarea { width: 100%; border: 1px solid var(--line); border-radius: .6rem; background: var(--ground); color: var(--ink); font: inherit; }
.opts select { min-height: 2.75rem; padding: .55rem .7rem; }
input { min-height: 2.75rem; padding: .55rem .7rem; }
textarea { display: block; resize: vertical; padding: 1rem; line-height: 1.75; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; margin-top: .5rem; }
.auth-providers { display: grid; gap: .9rem; margin-top: 1.2rem; }
.auth-providers[hidden], #email-start-form[hidden], #email-verify-form[hidden] { display: none; }
.google-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: none; }
.google-button span { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: #4285f4; color: #fff; font-family: Arial, sans-serif; font-size: .86rem; font-weight: 700; }
.auth-signup-link { justify-self: start; }
.auth-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .65rem; }
.auth-row .button { flex: 1 1 13rem; }
.turnstile-slot { min-height: 0; }
.access-code-details { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); font-size: .86rem; }
.access-code-details summary { cursor: pointer; color: var(--bear-green); font-weight: 600; }
.access-code-details #login-form { margin-top: .4rem; }
.storage-state { min-height: 1.5em; margin-top: .7rem; color: var(--muted); font-size: .82rem; }
.account-summary { display: grid; gap: .45rem; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.account-summary[hidden], #login-form[hidden] { display: none; }
.account-summary p { margin: 0; color: var(--ink); font-size: .9rem; }
.account-summary .text-button { margin-top: .55rem; }
.mcp-token-panel { display: grid; gap: .65rem; margin-top: .75rem; border: 1px dashed var(--line); border-radius: .7rem; background: var(--ground); padding: .8rem; }
.mcp-token-panel[hidden] { display: none; }
.mcp-token-panel code { display: block; overflow-wrap: anywhere; color: var(--ink); font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.mcp-token-note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.account-settings { margin-top: .85rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.account-settings summary { cursor: pointer; color: var(--bear-green); font-size: .86rem; font-weight: 700; }
.account-settings__body { display: grid; gap: .35rem; margin-top: .8rem; }
.account-setting-value { color: var(--muted) !important; font-size: .8rem !important; overflow-wrap: anywhere; }
.account-danger { margin-top: .8rem; border: 1px solid color-mix(in srgb, #b94b43 42%, var(--line)); border-radius: .7rem; background: color-mix(in srgb, #b94b43 6%, var(--surface)); padding: .85rem; }
.account-danger h3 { margin-top: .2rem; font-size: 1rem; }
.account-danger > p:not(.eyebrow) { margin-top: .5rem; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.account-danger label { margin-top: .75rem; font-size: .78rem; }
.account-danger code { font: .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.account-danger input { margin-top: .45rem; }
.button--danger { margin-top: .7rem; background: #b94b43; color: #fff; }
.button--danger:disabled { cursor: not-allowed; opacity: .48; }
.text-button { border: 0; background: transparent; color: var(--bear-green); cursor: pointer; font: 600 .85rem/1.4 var(--sans); padding: 0; text-align: left; text-decoration: underline; text-underline-offset: .2em; }
.brand-card { margin-bottom: clamp(2rem, 5vw, 4rem); padding: clamp(1.35rem, 3vw, 2.3rem); }
.brand-card[hidden] { display: none; }
.brand-card__head, .brand-examples__head, .brand-form-foot { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.brand-card__head h2, .brand-examples__head h3 { margin-bottom: 0; }
.brand-card__state { margin: 0; color: var(--muted); font-size: .82rem; text-align: right; }
.brand-card__lede { max-width: 47rem; margin-top: .9rem; color: var(--muted); }
.brand-grid { display: grid; grid-template-columns: minmax(10rem, .55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.6rem; }
.brand-grid label { margin-top: 0; }
.brand-grid textarea { min-height: 8.3rem; margin-top: .5rem; }
.field-note { display: block; margin-top: .5rem; color: var(--muted); font-size: .78rem; font-weight: 400; line-height: 1.5; }
.brand-examples { margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1.35rem; }
.brand-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem; }
.file-button { display: inline-block; }
#brand-example-list { display: grid; gap: .85rem; margin-top: 1rem; }
.brand-example { border: 1px solid var(--line); border-radius: .75rem; background: var(--ground); padding: .9rem; }
.brand-example__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .8rem; }
.brand-example textarea { min-height: 7.5rem; margin-top: .65rem; }
.brand-form-foot { margin-top: 1.35rem; border-top: 1px solid var(--line); padding-top: 1.15rem; }
.brand-form-foot .storage-state { margin: 0; }
.brand-card :disabled { cursor: not-allowed; opacity: .62; }
.brand-card select:disabled, .brand-card textarea:disabled, .brand-card input:disabled { background: var(--panel); color: var(--muted); -webkit-text-fill-color: var(--muted); }
.button { border: 0; cursor: pointer; font: inherit; }
.button--quiet { background: var(--panel); color: var(--ink); }
.card-head, .form-foot, .result-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.draft-card textarea { margin-top: 1.4rem; min-height: 17rem; }
.form-foot { margin-top: 1rem; color: var(--muted); font-size: .84rem; }
.progress { margin-bottom: 2rem; padding: clamp(1.5rem, 3vw, 2.5rem); }
.progress[hidden], .result[hidden], .rating[hidden] { display: none; }
.progress p:last-child { margin-top: .7rem; color: var(--muted); }
.progress-line { height: .35rem; margin-bottom: 1.4rem; overflow: hidden; border-radius: 99px; background: var(--panel); }
.progress-line span { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--accent); animation: task-line 1.8s ease-in-out infinite; }
@keyframes task-line { 0% { transform: translateX(-115%); } 100% { transform: translateX(340%); } }
.result { margin-bottom: clamp(4rem, 7vw, 7rem); padding: clamp(1.35rem, 3vw, 2.5rem); }
.result-heading { align-items: center; margin-bottom: 1.35rem; }
.result pre { margin: 0; overflow: auto; border: 1px solid var(--line); border-radius: .7rem; background: var(--ground); color: var(--ink); font: .93rem/1.85 var(--sans); padding: 1.2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.report { display: grid; gap: 1rem; margin-top: 1rem; }
.report p { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: .8rem 1rem; color: var(--ink); font-size: .9rem; }
.rating { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.rating h3 { margin-top: .2rem; }.rating label { margin-top: .75rem; }.rating input[type="radio"] { width: auto; min-height: auto; margin-right: .4rem; }.rating textarea { margin-top: .5rem; }.rating .button { margin-top: 1rem; }
.honesty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding-bottom: clamp(5rem, 8vw, 8rem); }
.honesty article { min-width: 0; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); padding: clamp(1.3rem, 3vw, 2.2rem); }.honesty-open { border-style: dashed !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 46rem) { .workspace, .honesty, .opts, .brand-grid { grid-template-columns: minmax(0, 1fr); }.app-head nav a:not(.small-cta) { display: none; }.form-foot, .brand-card__head, .brand-examples__head, .brand-form-foot { align-items: flex-start; flex-direction: column; }.brand-card__state { text-align: left; }.brand-actions { justify-content: flex-start; }.draft-card textarea { min-height: 14rem; } }
@media (prefers-color-scheme: dark) { .privacy-card, .draft-card, .brand-card, .result, .progress { box-shadow: 0 18px 42px rgba(0,0,0,.22); }.text-button { color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .progress-line span { animation: none; transform: none; width: 100%; } }