:root {
  --fg: #e6e6e6; --dim: #999; --bg: #0f0f10; --accent: #7fcff3; --err: #ff6b6b;
  --panel: #141416; --line: #2a2a2d;
}
* { box-sizing: border-box; }
body { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0;
       background: var(--bg); color: var(--fg); height: 100vh; display: flex; flex-direction: column; }

/* Login pages */
body.login main { max-width: 420px; margin: 10vh auto; padding: 2em; }
.tagline { opacity: .8; }
form { display: flex; flex-direction: column; gap: .75em; margin-top: 1em; }
label { display: flex; flex-direction: column; gap: .25em; }
input, textarea, button, select { font: inherit; padding: .5em; background: #1a1a1c;
       color: inherit; border: 1px solid var(--line); border-radius: 4px; }
button { background: #273347; cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
.error { color: var(--err); }
.hint { opacity: .7; }

h1 { color: var(--accent); margin: 0 0 .5em; }

/* App shell */
body.app > header { display: flex; justify-content: space-between; align-items: center;
        padding: .5em 1em; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
body.app > header form { margin: 0; }

nav.tabs { display: flex; gap: 0; background: #0a0a0a; padding: 0 1em; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.tab { background: transparent; border: 0; border-radius: 0; color: var(--fg);
       padding: .7em 1.2em; cursor: pointer; opacity: .55; border-bottom: 2px solid transparent; }
.tab:hover { opacity: .85; }
.tab.active { opacity: 1; border-bottom-color: var(--accent); color: var(--accent); }
.badge { background: var(--err); color: white; border-radius: 10px; padding: 0 .5em;
         font-size: .75em; margin-left: .35em; vertical-align: text-top; }

.pane { display: none; flex: 1 1 auto; overflow: hidden; }
.pane.active { display: flex; flex-direction: column; }

/* Pages pane — the browser */
#pane-pages { padding: 0; }
.address-bar { flex: 0 0 auto; flex-direction: row; display: flex; gap: .5em;
               padding: .6em 1em; background: var(--panel); border-bottom: 1px solid var(--line);
               margin: 0; }
.address-bar input { flex: 1; }
.address-bar input[name="destination"] { flex: 2; font-family: ui-monospace, monospace; }
#back-btn { padding: .5em .9em; min-width: 2.5em; }

.micron { flex: 1 1 auto; overflow: auto; padding: 1.5em 2em; line-height: 1.5; }
.micron h1 { color: var(--accent); margin: .5em 0 .3em; font-size: 1.6em; }
.micron h2 { color: var(--accent); margin: .5em 0 .3em; font-size: 1.3em; }
.micron h3, .micron h4, .micron h5, .micron h6 { color: var(--accent); margin: .5em 0 .3em; }
.micron p { margin: .4em 0; }
.micron hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.micron a.micron-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.micron a.micron-link:hover { background: rgba(127,207,243,0.1); }
.micron .error { color: var(--err); }

/* Messages pane */
#pane-messages { padding: 1em; gap: 1em; }
#lxmf-list { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; overflow: auto; }
#lxmf-list li { padding: .6em .75em; border-bottom: 1px solid var(--line); }
#lxmf-list .meta { color: var(--dim); font-size: .85em; margin-top: .2em; }
#lxmf-list pre { background: #0a0a0a; padding: .5em .75em; margin: .4em 0 0;
                 border-radius: 4px; white-space: pre-wrap; }
#send-form { flex: 0 0 auto; }

/* Announces pane */
#pane-announces { padding: 1em; }
#announces { list-style: none; padding: 0; margin: 0; overflow: auto; }
#announces li { padding: .5em 0; border-bottom: 1px solid var(--line); cursor: pointer; }
#announces li:hover { background: var(--panel); }
#announces code { color: var(--accent); margin-right: .5em; }