/* The signed-in app (/app). Shares site.css; no inline styles (the CSP forbids them). */
.app-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-bottom: 20px; }
.app-signin { max-width: 520px; margin: 40px auto; text-align: center; }
.app-google { margin: 10px 0 16px; }
.app-error { color: var(--warn); }
.app-who { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--mute); }
.app-who button { font: inherit; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.app-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.app-h1 { font-size: 1.6rem; margin: 0; }
.app-h2 { font-size: 1.3rem; margin: 0; }
.app-steps { padding-left: 1.2em; display: grid; gap: 22px; margin-top: 18px; }
.app-steps label { display: grid; gap: 6px; font-size: 14px; color: var(--mute); margin-top: 10px; }
.app-steps select, .app-steps textarea, .app-steps input[type=file], .app-steps input[type=text] { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.app-pic { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.app-pic img { width: 96px; height: 96px; object-fit: contain; background: #241d38; border-radius: 12px; }
.app-plan { color: var(--text); margin-top: 12px; }
.app-status { color: var(--mute); min-height: 1.4em; }
button.gs-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
button.gs-btn:disabled { opacity: .45; cursor: default; }
.app-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.app-job { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; font-size: 14px; }
.app-job img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #241d38; border-radius: 10px; }
.app-job .src { margin: 4px 0 0; }
.app-job .ok { color: var(--accent2); }
.app-job .bad { color: var(--warn); }
.app-empty { color: var(--mute); }
/* `hidden` must win over the display rules above (it did not: the preview and the own-words box showed). */
[hidden] { display: none !important; }
button.gs-btn-ghost { border: 1px solid var(--line); }
.app-steps .app-row { justify-content: flex-start; }

/* The admin page (/admin). */
/* What the last change did: a notice at the bottom of the screen, wherever the change was made. */
.adm-status { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20; max-width: calc(100vw - 32px); margin: 0; padding: 10px 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--accent2); color: var(--accent2); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.adm-status:empty { display: none; }
.adm-status.bad { color: var(--warn); border-color: var(--warn); }
.adm-inline { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.adm-inline input { flex: 1 1 240px; min-width: 0; font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.adm-list { list-style: none; padding: 0; margin: 0; }
.adm-list li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.adm-list li .src { margin: 0; }
.adm-scroll { overflow-x: auto; margin-top: 12px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table td { vertical-align: middle; }
.adm-table td .src { margin: 2px 0 0; font-size: 13px; }
.adm-table .pill { margin: 4px 6px 0 0; }
.adm-table select { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.adm-table .ok, .adm-list .ok { color: var(--accent2); }
.adm-pill-bad { color: var(--warn); }
.adm-link { font: inherit; font-size: 14px; background: none; border: 0; padding: 0 0 0 10px; color: var(--accent2); cursor: pointer; }
.adm-link:hover { text-decoration: underline; }
.adm-dialog { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: min(440px, calc(100vw - 32px)); }
.adm-dialog::backdrop { background: rgba(5, 4, 10, .7); }
.adm-dialog label { display: grid; gap: 6px; font-size: 14px; color: var(--mute); margin-top: 12px; }
.adm-dialog input { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.adm-actions { justify-content: flex-end; margin-top: 18px; }
.app-who a { font-size: 14px; }
.adm-table th, .adm-nowrap { white-space: nowrap; }

/* The sign-in card's views (sign in, create an account, forgot, choose a password). */
.auth-form { display: grid; gap: 12px; text-align: left; margin: 6px 0 4px; }
.auth-form label { display: grid; gap: 6px; font-size: 14px; color: var(--mute); }
.auth-form input { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.auth-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.auth-form .gs-btn { justify-self: stretch; text-align: center; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 14px; margin: 4px 0 10px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; margin: 14px 0; }
.auth-done { color: var(--accent2); text-align: left; }
.auth-view .lead { font-size: 1rem; }

/* The phone memory budget under a price check (the home page's mock, for real). */
.app-budget { margin-top: 12px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; max-width: 640px; }
.app-budget-h { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--mute); }
.app-budget-h b { color: var(--text); font-weight: 600; }
.app-budget .bar i { transition: width .3s; }
.app-budget .bar i.new { background: var(--accent2); }
.app-budget-key { display: flex; gap: 16px; font-size: 12px; color: var(--mute); }
.app-budget-key i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: var(--accent); }
.app-budget-key i.k-new { background: var(--accent2); }
.app-budget .src { margin: 10px 0 0; }
.app-budget.over { border-color: var(--warn); }
.auth-view h1 { font-size: 2rem; line-height: 1.2; }

/* Folders (projects) above the animations. */
.app-folders { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.app-chip { font: inherit; font-size: 14px; color: var(--mute); background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.app-chip:hover { color: var(--text); }
.app-chip.on { color: var(--text); border-color: var(--accent); background: #241c3d; }
.app-chip-add { border-style: dashed; }
.app-chip-input { font: inherit; font-size: 14px; color: var(--text); background: var(--bg2); border: 1px solid var(--accent); border-radius: 999px; padding: 6px 14px; width: 180px; }
.app-folder-tools { display: flex; gap: 4px; margin-bottom: 4px; }
.app-folder-tools .adm-link { padding: 0 12px 0 0; font-size: 13px; }

/* An animation card opens its view. */
button.app-job { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
button.app-job:hover, button.app-job:focus-visible { border-color: var(--accent); }
.app-job b { display: block; margin-top: 8px; overflow-wrap: anywhere; }
.app-job .src { display: block; }
.app-job img.still { opacity: .45; filter: grayscale(.6); }

/* One animation, opened. */
.app-dialog { padding: 0; width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; }
.app-dialog::backdrop { background: rgba(5, 4, 10, .72); }
/* Focus shows on the fields and buttons inside; a ring round the whole dialog when its padding is clicked is noise. */
.app-dialog:focus { outline: none; }
.anim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 22px; }
@media (max-width: 760px) { .anim-grid { grid-template-columns: 1fr; padding: 16px; } }
.anim-view { background: #241d38; border-radius: 14px; display: grid; place-items: center; aspect-ratio: 1; }
.anim-view img { width: 100%; height: 100%; object-fit: contain; }
.anim-view img.still { opacity: .5; filter: grayscale(.6); }
.anim-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.anim-head h2 { overflow-wrap: anywhere; }
.anim-x { font: inherit; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--mute); cursor: pointer; padding: 0 4px; }
.anim-x:hover { color: var(--text); }
.anim-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; margin: 12px 0; }
.anim-facts dt { color: var(--mute); }
.anim-facts dd { margin: 0; overflow-wrap: anywhere; }
.anim-side label { display: grid; gap: 6px; font-size: 14px; color: var(--mute); margin-top: 12px; }
.anim-inline { display: flex; gap: 8px; }
.anim-inline input, .anim-folder select { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.anim-code { margin: 12px 0 0; font-size: 12px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.anim-msg { min-height: 1.4em; font-size: 14px; margin: 10px 0 0; }
.anim-msg.ok, .src.ok { color: var(--accent2); }
.anim-msg.bad, .src.bad { color: var(--warn); }
.anim-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
button.anim-danger { color: var(--warn); }

/* A notice at the bottom of the screen (with Undo after a delete). */
.app-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30; display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); font-size: 14px; }
.app-toast button { font: inherit; font-weight: 600; background: none; border: 0; color: var(--accent2); cursor: pointer; padding: 0; }

/* Instructions for a coding agent: the text to read and copy. */
.app-tools { gap: 8px; }
.guide-wrap { padding: 22px; }
.guide-text { max-height: min(56vh, 520px); overflow: auto; margin: 12px 0 0; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.guide-msg { align-self: center; color: var(--accent2); }

/* How it plays: once or as a loop. */
.app-plays { border: 0; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.app-plays legend { font-size: 14px; color: var(--mute); padding: 0; margin-bottom: 6px; }
.app-steps .app-play { display: flex; gap: 10px; align-items: flex-start; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; margin: 0 !important; }
.app-play:has(input:checked) { border-color: var(--accent); background: #241c3d; }
.app-play input { margin-top: 4px; accent-color: var(--accent); }
.app-play span { display: grid; gap: 2px; font-size: 13px; color: var(--mute); }
.app-play b { color: var(--text); font-size: 15px; }

/* API keys: a narrow dialog; one row to make a key, one to copy a new one, then the list. */
.keys-dialog { width: min(620px, calc(100vw - 32px)); }
.keys-lead { color: var(--mute); margin: 6px 0 0; font-size: 15px; }
.keys-lead a { white-space: nowrap; }
.keys-h { display: block; margin: 22px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.keys-count { font-weight: 600; }
.keys-make { margin: 0; }
.keys-row { display: flex; gap: 10px; align-items: stretch; }
.keys-input { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.keys-input::placeholder { color: #6f6a8c; }
.keys-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.keys-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 0 20px; white-space: nowrap; }
.keys-tip { margin: 8px 0 0; font-size: 13px; color: var(--mute); }
.keys-tip code { font-size: 12px; }
.keys-new { margin-top: 18px; padding: 14px; border: 1px solid rgba(46, 230, 197, .45); border-radius: 14px; background: rgba(46, 230, 197, .06); }
.keys-new-h { margin: 0 0 10px; font-size: 14px; }
.keys-ok { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent2); color: #06221c; font-size: 12px; font-weight: 900; }
.keys-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .02em; }
.keys-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.keys-list li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg2); }
.keys-list li + li { border-top: 1px solid var(--line); }
.keys-who { min-width: 0; }
.keys-who p { margin: 0; }
.keys-name { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.keys-name code { font-size: 12px; color: var(--mute); }
.keys-meta { font-size: 13px; color: var(--mute); margin-top: 2px !important; }
.keys-empty { color: var(--mute); font-size: 14px; }
.keys-revoke { font: inherit; font-size: 14px; font-weight: 600; color: var(--warn); background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.keys-revoke:hover { border-color: var(--line); }
.keys-revoke.sure { background: var(--warn); color: #2b0a05; }
@media (max-width: 520px) { .keys-row { flex-direction: column; } .keys-btn { padding: 11px 20px; } }

/* Invite: three numbers in a row. */
.inv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.inv-stats p { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); display: grid; gap: 2px; }
.inv-stats b { font-size: 1.5rem; }
.inv-stats span { font-size: 13px; color: var(--mute); }
.adm-why { font: inherit; font-size: 13px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; width: 140px; margin-right: 6px; }
.adm-table td .adm-link + .adm-link { margin-left: 10px; }
.adm-dialog select { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.adm-dialog .adm-check { display: flex; gap: 10px; align-items: center; flex-direction: row; }
.adm-list li .adm-link + .adm-link { margin-left: 10px; }
.adm-dialog .adm-check input { padding: 0; width: auto; accent-color: var(--accent); }
.adm-table tr.adm-waiting td { background: rgba(139, 108, 255, .05); }
.adm-table td .adm-link + .adm-link { margin-left: 10px; }
.app-row .adm-invite { margin-left: auto; border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }