* { box-sizing: border-box; }
body { margin: 0; background: var(--brand-surface); color: var(--brand-ink); font: 15px/1.9 var(--brand-font); }
a { color: var(--brand-blue-dark); text-decoration: none; }
a:hover { color: var(--brand-red); }
:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.staff-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: white; border-bottom: 1px solid var(--brand-line); padding: 22px 32px; }
.topbar-actions { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.topbar-actions form { margin: 0; }
.staff-shell { max-width: 1500px; display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 26px; margin: 32px auto; padding: 0 32px; align-items: start; }
.guest-shell { display: block; max-width: 600px; }
.staff-sidebar { background: white; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); padding: 22px 16px; position: sticky; top: 20px; }
.staff-sidebar small { display: block; color: var(--brand-muted); margin: 0 12px 16px; }
.staff-sidebar nav a { display: block; padding: 12px; margin-bottom: 7px; border-radius: 8px; font-size: 13px; }
.staff-sidebar [aria-current] { background: var(--brand-blue-soft); color: var(--brand-blue-dark); font-weight: bold; }
.sidebar-note { border-top: 1px solid var(--brand-line); margin-top: 48px; padding-top: 20px; font-size: 12px; }
.sidebar-note p { color: var(--brand-muted); }
main { padding: 28px; min-width: 0; background: white; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); box-shadow: 0 4px 16px var(--brand-shadow); }
h1 { font-size: 26px; margin: 0 0 20px; }
h2 { font-size: 21px; }
label { display: block; margin-top: 16px; font-size: 13px; font-weight: bold; }
input, select, textarea, button { font: inherit; padding: 10px 12px; border: 1px solid var(--brand-line); border-radius: 7px; max-width: 100%; box-sizing: border-box; }
input, select, textarea { background: white; color: var(--brand-ink); }
button { background: var(--brand-blue); color: white; border-color: var(--brand-blue); cursor: pointer; }
button:hover { background: var(--brand-blue-dark); }
button.secondary { background: white; color: var(--brand-blue-dark); border-color: var(--brand-line); }
button.secondary:hover { background: var(--brand-blue-soft); }
textarea { display: block; width: 100%; resize: vertical; }
fieldset, section { margin: 22px 0; border: 1px solid var(--brand-line); padding: 20px; border-radius: 10px; min-width: 0; }
legend { color: var(--brand-blue-dark); font-weight: bold; }
details { margin: 16px 0; }
summary { cursor: pointer; color: var(--brand-blue-dark); }
.images { display: flex; gap: 12px; flex-wrap: wrap; }
.images img { max-height: 160px; max-width: 100%; object-fit: contain; border-radius: 6px; }
form.login { max-width: 460px; }
form.login input { width: 100%; }
form.login button { width: 100%; }
.error { color: var(--brand-red-dark); background: var(--brand-red-soft); border: 1px solid var(--brand-red-border); padding: 12px; border-radius: 8px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: start; padding: 14px; border-bottom: 1px solid var(--brand-line); vertical-align: top; overflow-wrap: anywhere; }
th { background: var(--brand-blue-wash); color: var(--brand-blue-dark); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.muted { color: var(--brand-muted); }
.pagination { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; font-size: 13px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
dd { margin: 0; overflow-wrap: anywhere; }
.skip { position: absolute; top: -100px; background: white; padding: 12px; z-index: 5; }
.skip:focus { top: 10px; }
@media (max-width: 900px) {
    .staff-shell { grid-template-columns: 1fr; margin-top: 20px; padding-inline: 20px; }
    .staff-sidebar { position: static; padding: 12px; }
    .staff-sidebar nav { display: flex; gap: 10px; flex-wrap: wrap; }
    .staff-sidebar small, .sidebar-note { display: none; }
    .staff-sidebar nav a { margin: 0; }
}
@media (max-width: 600px) {
    .staff-topbar { padding: 18px 16px; gap: 15px; flex-wrap: wrap; }
    .staff-topbar > .muted { font-size: 11px; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .staff-shell { padding-inline: 12px; }
    main { padding: 18px; }
    fieldset, section { padding: 14px; }
    dl { grid-template-columns: 1fr; }
    input:not([type=checkbox]):not([type=radio]), select { width: 100%; }
}

.page-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-heading h1, .page-heading h2 { margin-bottom:8px; }
.page-heading p { margin:0; font-size:12px; }
.action-link { display:inline-block; padding:10px 16px; background:var(--brand-red); color:white; border-radius:8px; font-size:13px; }
.action-link:hover { background:var(--brand-red-dark); color:white; }
.overview-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px 0; }
.stat-card { border:1px solid var(--brand-line); border-top:3px solid var(--brand-blue); padding:20px; border-radius:10px; background:var(--brand-blue-wash); }
.stat-card span { display:block; color:var(--brand-muted); font-size:13px; }
.stat-card strong { display:block; font-size:32px; color:var(--brand-blue-dark); }
.status-label { display:inline-block; background:var(--brand-blue-soft); color:var(--brand-blue-dark); border-radius:6px; padding:2px 10px; white-space:nowrap; }
.empty-state { background:var(--brand-blue-wash); border:1px dashed var(--brand-line); padding:24px; border-radius:10px; text-align:center; }
.search-form { margin-block:24px; }
.search-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.search-controls input { flex:1; min-width:160px; }
caption { text-align:start; padding-block:10px; }
@media(max-width:600px) { .overview-stats { grid-template-columns:1fr; gap:12px; } .stat-card { display:flex; align-items:center; justify-content:space-between; padding:14px; } .stat-card strong { font-size:26px; } }

/* Operational feature discovery uses the existing logo palette. */
.discovery-filters { display:flex; flex-wrap:wrap; gap:12px; margin-block:24px; }
.discovery-filters a { padding:8px 14px; border:1px solid var(--brand-line); border-radius:8px; }
.discovery-filters [aria-current] { background:var(--brand-blue-soft); border-color:var(--brand-blue); font-weight:bold; }
.discovery-actions a { display:block; margin-bottom:10px; }
.stat-card small { color:var(--brand-muted); }
.stat-card:hover { border-color:var(--brand-red); }
.workspace-flow a { display:inline-block; margin-block:6px; }

@media(max-width:600px) {
  .stat-card { flex-wrap:wrap; gap:8px; }
  .stat-card small { flex-basis:100%; }
  .discovery-actions { min-width:170px; }
  .workspace-flow a { display:block; }
}

/* Unified administrative tools reuse the VARVOX palette and layout. */
.admin-tools main .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }
.admin-tools input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .admin-tools select { width:100%; display:block; margin-top:7px; }
.admin-tools .form-grid input[type=checkbox] { width:auto; }
.admin-tools .actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.admin-tools .button { display:inline-block; padding:10px 16px; background:var(--brand-blue); color:white; border-radius:7px; }
.admin-tools .button.secondary { background:var(--brand-blue-soft); color:var(--brand-blue-dark); }
.admin-tools .table-scroll { width:100%; overflow-x:auto; }
.admin-tools .cms-link { display:flex; gap:8px; align-items:center; margin:12px 0; }
.admin-tools .cms-link input { min-width:0; }
.admin-tools small { color:var(--brand-muted); }
@media(max-width:700px) { .admin-tools main .form-grid { grid-template-columns:1fr; } .admin-tools .cms-link { flex-wrap:wrap; } }

/* Owner acceptance journey and contextual next actions. */
.owner-journey ol { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; padding:0; list-style-position:inside; }
.owner-journey li { border:1px solid var(--brand-line); border-inline-start:3px solid var(--brand-blue); padding:12px; border-radius:8px; }
.owner-journey li::marker { color:var(--brand-red); font-weight:bold; }
.owner-journey small { display:block; color:var(--brand-muted); margin-top:6px; }
.next-step { border-inline-start:4px solid var(--brand-blue); padding:12px 18px; margin-block:18px; background:var(--brand-blue-soft); border-radius:8px; }
.owner-journey a:focus-visible, .next-step a:focus-visible { outline:3px solid var(--brand-red); outline-offset:4px; }
@media(max-width:600px) { .owner-journey ol { grid-template-columns:minmax(0,1fr); } }