/* Solaria Terminal sign-in: the terminal's own dark palette and type (app.css), sized for a phone too. */
:root {
  color-scheme: dark;
  --page: #050607; --panel: #0d0f12; --line: #1d222a; --ink: #e8e6e1; --muted: #85817a;
  --accent: #4ade80; --accent-2: #1f7a45; --bear: #ef5350;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 13px/1.45 var(--mono);
       display: grid; place-items: center; padding: 16px; -webkit-font-smoothing: antialiased; }
.login { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mark { width: 88px; height: 88px; }
h1 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent); }
h1 span { color: var(--ink); margin-left: 8px; font-weight: 600; }
form { width: 100%; display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 18px; }
label { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
input { font: inherit; font-size: 16px; color: inherit; background: #000; border: 1px solid var(--accent-2); padding: 8px 10px; outline: 0; }
input:focus { border-color: var(--accent); }
button { font: inherit; cursor: pointer; background: var(--accent); color: #000; border: 0; font-weight: 800; letter-spacing: 0.08em;
         padding: 9px; margin-top: 4px; }
button:disabled { opacity: 0.6; cursor: progress; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.error { min-height: 1.45em; margin: 0; color: var(--bear); }
.note { margin: 0; color: var(--muted); font-size: 11px; text-align: center; }
[hidden] { display: none !important; }

/* the admin page (admin.html) */
.panel { width: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--line); padding: 18px; }
.panel h2 { margin: 0; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.panel p { margin: 0; }
.panel .note { text-align: left; }
.panel form { background: none; border: 0; padding: 0; margin-top: 8px; }
.made { display: flex; gap: 8px; }
.made code { flex: 1; font: inherit; font-size: 16px; color: var(--accent); background: #000; border: 1px solid var(--accent-2);
             padding: 8px 10px; user-select: all; overflow-wrap: anywhere; }
button.quiet { margin-top: 0; background: transparent; color: var(--accent); border: 1px solid var(--accent-2); padding: 8px 12px; }
#own button.quiet { margin-top: 4px; }
.said { color: var(--accent); }
.said:empty, .panel .error:empty { display: none; }
.links { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-top: 4px; }
.links a, button.link { color: var(--muted); background: none; border: 0; padding: 0; margin: 0; font: inherit;
                        font-weight: 400; letter-spacing: 0; text-decoration: underline; cursor: pointer; }
.links a:hover, button.link:hover { color: var(--ink); }