/* Varnwick Bench Console — offline benchmark app. Plain CSS, no CDN. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2430; background: #f6f7fb; }
[hidden] { display: none !important; }

.app-header { position: fixed; top: 0; left: 0; right: 0; height: 52px; background: #20263a; color: #fff;
  display: flex; align-items: center; padding: 0 20px; z-index: 50; font-weight: 600; letter-spacing: .02em; }
.app-header small { margin-left: 12px; opacity: .65; font-weight: 400; }

.sidebar { position: fixed; top: 52px; bottom: 0; left: 0; width: 210px; overflow-y: auto; background: #fff;
  border-right: 1px solid #e3e6ef; padding: 12px 0; z-index: 40; }
.sidebar a { display: block; padding: 6px 20px; color: #3b4258; text-decoration: none; font-size: 14px; }
.sidebar a:hover { background: #eef1fa; }
.sidebar a.active { background: #e2e8fb; color: #1e4fd8; font-weight: 600; }
.sidebar .sep { border-top: 1px solid #eceef4; margin: 10px 0; }

main.content { margin-left: 210px; padding: 72px 32px 40px; max-width: 1100px; }
.eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .08em; color: #8a91a6; margin: 0 0 4px; }
.card { background: #fff; border: 1px solid #e3e6ef; border-radius: 10px; padding: 16px 20px; margin: 16px 0; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.status { margin-top: 12px; font-weight: 600; color: #155e36; min-height: 1.2em; }
.muted { color: #6b7287; }

button, .btn { font: inherit; padding: 8px 16px; border-radius: 6px; border: 1px solid #c9cfdf; background: #fff; cursor: pointer; }
button.primary { background: #1e62d0; color: #fff; border-color: #1e62d0; }
button.danger { background: #c62f3b; color: #fff; border-color: #c62f3b; }
button.success { background: #2e9e44; color: #fff; border-color: #2e9e44; }
button:disabled { opacity: .5; cursor: not-allowed; }
input[type=text], input[type=email], input[type=search], select { font: inherit; padding: 7px 10px; border: 1px solid #c9cfdf; border-radius: 6px; }
label { margin-right: 6px; }

.topnav { display: flex; gap: 18px; background: #2b3350; padding: 10px 16px; border-radius: 8px; }
.topnav a { color: #dfe5ff; text-decoration: none; }
.product-card { width: 260px; }
.badge { display: inline-block; background: #1e62d0; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 13px; }

table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eceef4; }

.tabs [role=tab] { border-radius: 6px 6px 0 0; }
.tabs [role=tab][aria-selected=true] { background: #e2e8fb; border-color: #1e62d0; }

.dnd-list { min-height: 120px; width: 260px; padding: 8px; background: #f1f3f9; border: 2px dashed #c9cfdf; border-radius: 8px; list-style: none; margin: 0; }
.dnd-list li { background: #fff; border: 1px solid #d5daea; border-radius: 6px; padding: 8px; margin: 6px 0; cursor: grab; }

.cta-fixed { position: fixed; bottom: 48px; left: 260px; z-index: 30; }
.cookie-banner { position: fixed; left: 210px; right: 0; bottom: 0; height: 140px; background: #1d2333; color: #fff;
  padding: 20px 28px; z-index: 60; display: flex; gap: 20px; align-items: center; }
.backdrop { position: fixed; inset: 0; background: rgba(15, 20, 35, .55); z-index: 80; display: flex; align-items: center; justify-content: center; }
.dialog { background: #fff; border-radius: 12px; padding: 24px; width: 380px; }

.toast { position: fixed; right: 24px; top: 72px; background: #20263a; color: #fff; padding: 12px 18px; border-radius: 8px; z-index: 90; }

.account { position: relative; display: inline-block; padding: 8px 14px; background: #fff; border: 1px solid #c9cfdf; border-radius: 6px; }
.account .menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #c9cfdf; padding: 8px; min-width: 220px; z-index: 5; }
.account:hover .menu { display: block; }

.icon-btn { width: 36px; height: 36px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
.err { color: #c62f3b; font-size: 13px; display: block; min-height: 1em; }
.spacer { height: 4000px; background: linear-gradient(#f6f7fb, #e7ebf6); border-radius: 10px; display: flex; align-items: flex-start; justify-content: center; padding-top: 40px; color: #8a91a6; }