/* Orangineer auth: components on top of pico + tokens.css. No inline styles (CSP). */
:root { --pico-font-size: 100%; }
body { background: var(--or-bg); color: var(--or-text); }
.topbar { background: var(--or-surface-raised); border-bottom: var(--or-accent-line) solid var(--or-brand-orange); margin-bottom: var(--or-space-8); }
.topbar nav { padding-block: var(--or-space-1); }
.topbar .brand { display: inline-flex; align-items: center; gap: var(--or-space-2); text-decoration: none; color: var(--or-heading); font-family: var(--or-font-heading); font-weight: 700; font-size: 1.125rem; }
.topbar .brand img { width: 36px; height: 36px; }
.topbar a:not(.brand) { font-family: var(--or-font-heading); font-weight: 600; font-size: var(--or-font-size-sm); }
main.container { padding-bottom: var(--or-space-8); min-height: 60vh; }
.site-footer { color: var(--or-text-muted); padding-block: var(--or-space-6); border-top: 1px solid var(--or-border); }

article { border: 1px solid var(--or-border); border-radius: var(--or-radius-lg); box-shadow: var(--or-shadow); }
article > header { font-family: var(--or-font-heading); }
article > header h2, article > header h3 { margin: 0; }
.narrow { max-width: 28rem; margin: var(--or-space-8) auto; }
.narrow.wide { max-width: 36rem; }

button, [role="button"], input[type="submit"] {
  font-family: var(--or-font-heading); font-weight: 600; font-size: var(--or-font-size-sm);
  text-transform: uppercase; letter-spacing: var(--or-button-letter-spacing);
  border-radius: var(--or-radius); min-height: 44px;
}
button.outline, [role="button"].outline { background: transparent; border: 2px solid var(--or-primary); color: var(--or-primary); }
button.outline:hover { background: var(--or-primary-light); }
button.secondary, [role="button"].secondary { background: transparent; border: 2px solid var(--or-border-strong); color: var(--or-text); }
button.danger { background: var(--or-error); border-color: var(--or-error); color: #fff; }
button.link { background: none; border: 0; padding: 0; margin: 0; width: auto; min-height: 0; color: var(--or-primary); text-transform: none; letter-spacing: 0; font-size: var(--or-font-size-sm); }
button.small { padding: .25rem .75rem; min-height: 32px; margin: 0; width: auto; font-size: var(--or-font-size-xs); }
:focus-visible { outline: var(--or-focus-width) solid var(--or-focus); outline-offset: var(--or-focus-offset); }
form.inline { display: inline; margin: 0; }
label { font-weight: 700; font-size: var(--or-font-size-sm); }
label input, label select { font-weight: 400; font-size: var(--or-font-size-base); }
.code-input { font-family: var(--or-font-mono); font-size: 1.5rem; letter-spacing: .2em; text-align: center; }
small.help { color: var(--or-text-muted); display: block; margin-top: calc(var(--or-space-2) * -1); margin-bottom: var(--or-space-4); }

.flash { padding: var(--or-space-3) var(--or-space-4); border-radius: var(--or-radius); margin-bottom: var(--or-space-4); border-left: 4px solid; }
.flash-info { background: var(--or-info-bg); border-color: var(--or-info); color: var(--or-text); }
.flash-success { background: var(--or-success-bg); border-color: var(--or-success); color: var(--or-text); }
.flash-warning { background: var(--or-warning-bg); border-color: var(--or-warning); color: var(--or-text); }
.flash-error { background: var(--or-error-bg); border-color: var(--or-error); color: var(--or-text); }

.qr { display: flex; justify-content: center; margin: var(--or-space-4) 0; }
.qr svg { width: 240px; height: 240px; max-width: 100%; border-radius: var(--or-radius); background: #fff; padding: var(--or-space-2); }
.secret code { font-size: 1.125rem; letter-spacing: .08em; word-break: break-all; }
.steps { padding-left: 1.25rem; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--or-space-2); }
.codes li { list-style: none; }
.codes code { display: block; text-align: center; font-size: 1.125rem; letter-spacing: .08em; padding: var(--or-space-2); }

.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--or-space-4); margin-top: var(--or-space-6); }
.app-card { display: flex; flex-direction: column; gap: var(--or-space-1); padding: var(--or-space-6); border: 1px solid var(--or-border); border-top: var(--or-accent-line) solid var(--or-brand-orange); border-radius: var(--or-radius-lg); background: var(--or-surface-raised); box-shadow: var(--or-shadow); text-decoration: none; color: var(--or-text); }
.app-card:hover { background: var(--or-primary-light); }
.app-card-muted { border-top-color: var(--or-border-strong); }
.app-name { font-family: var(--or-font-heading); font-weight: 700; font-size: 1.25rem; color: var(--or-heading); }
.app-url { color: var(--or-text-muted); font-size: var(--or-font-size-sm); }

.subnav ul { display: flex; flex-wrap: wrap; gap: var(--or-space-4); padding: 0; margin: 0 0 var(--or-space-6); border-bottom: 1px solid var(--or-border); }
.subnav li { list-style: none; padding-bottom: var(--or-space-2); }
.subnav a { font-family: var(--or-font-heading); font-weight: 600; font-size: var(--or-font-size-sm); text-decoration: none; }

table th { background: var(--or-surface); color: var(--or-text-muted); font-size: var(--or-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
table td.num, table th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.ua, td.details { font-size: var(--or-font-size-sm); color: var(--or-text-muted); max-width: 22rem; overflow-wrap: anywhere; }
.muted { color: var(--or-text-muted); }
.badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: var(--or-font-size-xs); font-weight: 700; white-space: nowrap; }
.badge-success { background: var(--or-success-bg); color: var(--or-success); }
.badge-warning { background: var(--or-warning-bg); color: var(--or-warning); }
.badge-error { background: var(--or-error-bg); color: var(--or-error); }
.badge-info, .badge-muted, .badge-role { background: var(--or-info-bg); color: var(--or-info); border: 1px solid var(--or-border); }
.badge-role { background: var(--or-primary-light); color: var(--or-primary); border-color: var(--or-primary-light-border); }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--or-space-1) var(--or-space-4); margin: 0 0 var(--or-space-4); }
dl.kv dt { color: var(--or-text-muted); font-size: var(--or-font-size-sm); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--or-space-4); }
.row-form { display: flex; gap: var(--or-space-2); align-items: flex-end; flex-wrap: wrap; }
.row-form label { flex: 1 1 12rem; }
.row-form button { width: auto; }
.actions { display: flex; flex-wrap: wrap; gap: var(--or-space-2); margin-bottom: var(--or-space-6); }
.actions button { width: auto; margin: 0; }
.reset-form { border-top: 1px solid var(--or-border); padding-top: var(--or-space-4); }
.filters { display: flex; flex-wrap: wrap; gap: var(--or-space-2); }
.filters input { flex: 1 1 10rem; width: auto; margin: 0; }
.filters button { width: auto; margin: 0; }

@media print {
  .topbar, .site-footer, form, [data-print] { display: none !important; }
}