/* NothingBroke identity, using the owner's original JPEG artwork unchanged.
   Cropping is presentation-only: source images retain their original bytes. */
:root {
  --ink: #1e252b;
  --muted: #596576;
  --line: #dce6e9;
  --blue: #087c89;
  --cyan: #09bfd0;
  color: var(--ink);
  background: #f5f9fa;
}

.topbar {
  height: 82px;
  gap: 16px;
  border-bottom-color: #dae7e9;
}
.brand { min-width: 0; flex: none; }
.brand-logo {
  --lockup-width: 252px;
  position: relative;
  display: block;
  width: var(--lockup-width);
  height: calc(var(--lockup-width) * 230 / 1052);
  overflow: hidden;
  background: #fff;
}
.brand-logo-image {
  display: block;
  position: absolute;
  max-width: none;
  width: calc(var(--lockup-width) * 1168 / 1052);
  height: auto;
  top: calc(var(--lockup-width) * -265 / 1052);
  left: calc(var(--lockup-width) * -72 / 1052);
}
.header-actions, .topbar-right { min-width: 0; gap: 14px; }
.button { border-radius: 10px; }
.button-primary { background: var(--blue); color: #fff; }
.button-primary:hover:enabled { background: #006875; }
.button-primary:active:enabled { background: #005864; }
.button-secondary:hover:enabled { background: #f0fafb; border-color: #9ebfc4; }
.button-quiet, .icon-button { background: #edf3f5; color: #536575; }
.button:disabled, [aria-disabled=true] { opacity: .6; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #087c89;
  outline-offset: 3px;
}
input:not([type=checkbox]), textarea, select { border-color: #bdcdd2; }
.eyebrow { color: #52707a; }
.nav-link { color: #536575; }
.nav-link:hover { background: #f1f8f9; }
.nav-link.active { color: #076b77; background: #e4f6f8; }
.nav-link.active .nav-icon { color: #076b77; }
.sidebar { background: #fff; }
.sidebar-note { border-top-color: #dce6e9; }
.content { padding-top: 38px; }
.page-heading h1 { color: #1d252b; }
.card, .metric, .side-card {
  border-color: var(--line);
  border-radius: 15px;
  box-shadow: 0 4px 18px #193d4805;
}
.metric strong { color: #1e3036; }
.metric .eyebrow { color: #596576; }
.notice:not(.notice-warning):not(.notice-error):not(.notice-success) {
  background: #edfafa;
  color: #275d66;
  border-color: #c2e5e9;
}
.badge.blue { background: #edfafa; color: #076b77; border-color: #c2e5e9; }
.upload-field, .upload-zone { background: #f4fbfc; border-color: #aacbd0; }
.upload-symbol { background: #e1f5f7; color: #087c89; }
.details { background: #f7fafb; }
.code, pre { background: #f4f8fa; }
.empty { border-color: #b8cdd3; }
.empty::before {
  content: "";
  display: block;
  width: 102px;
  height: 108px;
  margin: 0 auto 20px;
  background: #fff url('/assets/brand/project-icon.jpg') center -58px / 146px 218px no-repeat;
  border-radius: 18px;
}

.auth-wrap { margin-top: 56px; margin-bottom: 64px; gap: 56px; }
.auth-card {
  border-color: #d1e2e6;
  border-radius: 20px;
  box-shadow: 0 14px 45px #163d4810;
}
.auth-aside { min-width: 0; }
.auth-brand-art {
  height: 172px;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 18px;
  background: #050606;
}
.auth-brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-aside h2 { font-size: 30px; color: #1d252b; }
.auth-boundary { border-top-color: #cedfe3; }
footer { border-top-color: #dce6e9; background: #fff; }
footer > span:first-child { color: #087c89; }

@media (max-width: 1050px) {
  .auth-wrap { gap: 36px; }
  .auth-brand-art { height: 156px; }
}
@media (max-width: 760px) {
  .topbar { height: 72px; gap: 12px; }
  .brand-logo { --lockup-width: 218px; }
  .header-actions, .topbar-right { gap: 10px; }
  .identity { max-width: 96px; }
  .auth-wrap { margin: 30px auto 36px; }
  .auth-card { padding: 28px 25px; }
  .auth-aside { margin: 30px 0 0; }
  .auth-brand-art { height: 170px; margin-bottom: 24px; }
  .auth-aside h2 { font-size: 26px; }
  .content { padding-top: 26px; }
  .sidebar nav { scrollbar-width: thin; scrollbar-color: #aacbd0 transparent; }
}
@media (max-width: 480px) {
  .topbar { gap: 8px; }
  .brand-logo { --lockup-width: 180px; }
  .identity { max-width: 68px; }
  .header-actions, .topbar-right { gap: 8px; }
  .topbar-right .private-label { font-size: 10px; }
}
@media (max-width: 360px) {
  .brand-logo { --lockup-width: 158px; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .auth-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}