* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin: 0; color: #1a1a1a; background: #f7f7f7; }

.topnav {
  display: flex; align-items: center; gap: 16px;
  background: #1f2d3d; color: #fff; padding: 10px 20px;
}
.topnav a { color: #fff; text-decoration: none; }
.topnav .brand { font-weight: bold; }
.topnav .spacer { flex: 1; }
.topnav .who { opacity: .8; font-size: 13px; }

main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

.flashes { list-style: none; padding: 0; margin: 0 0 16px; }
.flashes li { padding: 8px 12px; border-radius: 4px; margin-bottom: 6px; }
.flash-error { background: #fbe1e1; color: #8a1f1f; }
.flash-success { background: #e2f5e6; color: #1f6b32; }

.login-box { max-width: 320px; margin: 60px auto; }
.login-box label { display: block; margin-bottom: 12px; font-size: 14px; }
.login-box input { width: 100%; padding: 8px; margin-top: 4px; }

table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; font-size: 14px; }
th { background: #eaeaea; }

.due-soon { background: #fff2cc; }
.due-past { background: #f8cbcb; }

.flag { color: #b00020; font-weight: bold; }

.sync-form { margin-bottom: 20px; display: flex; gap: 8px; }
.sync-form input { padding: 6px; }

.actions a, .actions button { margin-right: 8px; }

.edit-form fieldset { border: 1px solid #ccc; border-radius: 6px; margin-bottom: 16px; padding: 12px 16px; }
.edit-form legend { font-weight: bold; padding: 0 6px; }
.edit-form label { display: block; margin-bottom: 10px; font-size: 13px; }
.edit-form input, .edit-form select, .edit-form textarea { width: 100%; padding: 6px; margin-top: 4px; }
.edit-form .row { display: flex; gap: 16px; }
.edit-form .row > label { flex: 1; }

.product-block { border: 2px solid #1f2d3d; border-radius: 6px; padding: 14px; margin-bottom: 20px; }
.product-block h3 { margin-top: 0; }

button, .btn { background: #1f2d3d; color: #fff; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; font-size: 14px; }
button:hover, .btn:hover { background: #33475f; }
button[disabled] { background: #b9c0c8; cursor: not-allowed; }

/* ---- Color Profile ---- */
.cp-chip { display: inline-block; width: 26px; height: 18px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); vertical-align: middle; background: #eee; }
.cp-chip-lg { width: 46px; height: 28px; }

.cp-de { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: bold; background: #eaeaea; color: #444; }
.cp-pass { background: #e2f5e6; color: #1f6b32; }
.cp-watch { background: #fff2cc; color: #8a5b00; }
.cp-fail { background: #f8cbcb; color: #8a1f1f; }
.cp-from { font-size: 12px; font-weight: normal; color: #666; }

.cp-rev { background: #fff; }
.cp-grid th, .cp-grid td { text-align: center; padding: 5px 6px; }
.cp-grid th { font-size: 12px; line-height: 1.3; }
.cp-grid th span { display: block; font-weight: normal; font-size: 11px; color: #666; font-family: Menlo, Consolas, monospace; }
.cp-grid th.cp-ch { text-align: left; width: 40px; }
.cp-grid td.cp-calc { font-family: Menlo, Consolas, monospace; background: #fafafa; }
.cp-grid .cp-dark { background: #f3eefc; }
.cp-grid .cp-light { background: #eaf7fa; }
.cp-grid td.cp-dark, .cp-grid td.cp-light { font-weight: bold; }
.cp-in { width: 100%; padding: 5px; text-align: center; font-family: Menlo, Consolas, monospace; }

.cp-swatches { display: flex; gap: 8px; margin-top: 12px; }
.cp-swatches figure { margin: 0; flex: 1; }
.cp-swatches .cp-box { height: 46px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }
.cp-swatches figcaption { font-size: 11px; text-align: center; color: #666; margin-top: 3px; }

.cp-drift { font-size: 13px; color: #333; background: #f4f6f8; border-radius: 4px; padding: 8px 10px; }
.cp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }

.cp-off td { opacity: .55; }

.cp-inline { display: flex; gap: 6px; align-items: center; }
.cp-inline input { flex: 1; padding: 5px; }
.cp-inline button { padding: 5px 10px; font-size: 13px; }