:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20313d;
  background: #f5f7f9;
  line-height: 1.6;
}

* { box-sizing: border-box; }
body { margin: 0; }
.container { max-width: 56rem; margin: 4rem auto; padding: 0 1rem; }
.panel { padding: clamp(1.25rem, 4vw, 2.5rem); background: #fff; border: 1px solid #dce3e8; border-radius: 0.75rem; }
h1 { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.2; }
p { margin: 0; }
a { color: #145b86; }
:focus-visible { outline: 3px solid #145b86; outline-offset: 3px; }
form { display: grid; gap: 0.75rem; max-width: 26rem; margin-top: 1.5rem; }
input, button { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid #8b9ca8; border-radius: 0.3rem; }
button { background: #145b86; color: white; cursor: pointer; }
[role="alert"] { color: #9b2525; margin: 1rem 0; }

/* Read-only product pages: scroll tables without clipping narrow screens. */
.products-panel { padding: 1.25rem; }
.table-scroll { overflow-x: auto; margin: 1rem 0; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 0.65rem; border-bottom: 1px solid #dce3e8; vertical-align: top; }
caption { text-align: left; font-weight: bold; padding: 0.5rem 0; }
td small { display: block; color: #526570; }
.pagination { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.product-fields { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 0.5rem 1rem; }
.product-fields dt { font-weight: bold; }
.product-fields dd { margin: 0; overflow-wrap: anywhere; }
select { font: inherit; padding: 0.6rem; }
/* Authenticated desktop workspace; login/MFA styling is unchanged. */
.workspace .container { max-width: 1600px; margin: 2rem auto; padding: 0 2rem; }
.workspace table { min-width:1000px; }.workspace td { overflow-wrap:anywhere; min-width:5rem; }
.workspace td:first-child { min-width:14rem; }
.button { display:inline-block; padding:.55rem .9rem; background:#145b86; color:white; border-radius:.3rem; text-decoration:none; margin:.5rem 0; }
.editor { max-width:850px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.editor label { display:flex; flex-direction:column; }.editor input[type=checkbox] { align-self:flex-start; }
.link-editor { border-bottom:1px solid #dce3e8; padding-bottom:1rem; max-width:700px; }
.success { padding:1rem; background:#e2f3e9; margin-bottom:1rem; }
@media(max-width:700px) { .editor { grid-template-columns:1fr; }.workspace .container { padding:0 1rem; } }

/* V2-inspired desktop shell, using the existing server-rendered pages. */
.workspace { background:#edf1f5; }
.app-sidebar { position:fixed; inset:0 auto 0 0; width:235px; background:#173550; color:#fff; display:flex; flex-direction:column; padding:1.6rem 1rem; overflow-y:auto; }
.app-sidebar .wordmark { color:white; font-size:1.65rem; font-weight:750; text-decoration:none; padding:.5rem .65rem 1.8rem; }
.app-sidebar nav { display:grid; gap:.35rem; }
.app-sidebar nav a,.app-sidebar nav span,.app-sidebar summary { display:block; padding:.65rem .9rem; border-radius:.35rem; color:#fff; text-decoration:none; }
.app-sidebar nav a:hover,.app-sidebar summary:hover { background:#244c6e; }
.app-sidebar [aria-current=page],.app-sidebar .selected { background:#326a98; font-weight:650; }
.app-sidebar nav [aria-disabled] { color:#acbbca; cursor:default; }
.app-sidebar summary { cursor:pointer; }
.settings-nav > a,.settings-nav > span { margin-left:.6rem; font-size:.9rem; }
.sidebar-user { margin-top:auto; padding:.9rem .65rem 0; border-top:1px solid #456079; }
.sidebar-user form { margin-top:.6rem; }.sidebar-user button { background:#244c6e; border-color:#65819a; }
.workspace .container { max-width:none; margin:0 0 0 235px; padding:2rem; min-width:0; }
.actions { display:flex; flex-wrap:wrap; gap:1rem; }
.product-search { max-width:850px; grid-template-columns:minmax(240px,1fr) 160px auto; align-items:end; gap:.4rem .75rem; }
.product-search label[for=q] { grid-column:1; grid-row:1; }.product-search #q { grid-column:1; grid-row:2; }
.product-search label[for=status] { grid-column:2; grid-row:1; }.product-search #status { grid-column:2; grid-row:2; }.product-search button { grid-column:3; grid-row:2; }
.products-panel th,.products-panel td { padding:.45rem .6rem; font-size:.9rem; }
@media(max-width:760px) { .app-sidebar { width:180px; padding:1rem .5rem; }.workspace .container { margin-left:180px; padding:1rem; }.app-sidebar .wordmark { font-size:1.3rem; }.product-search { display:flex; flex-direction:column; align-items:stretch; } }