:root {
  --brand-navy: #073b73;
  --brand-navy-deep: #052d57;
  --brand-cyan: #08b8c4;
  --brand-cyan-deep: #008d98;
  --brand-coral: #eb6a4b;
  --brand-header: linear-gradient(118deg, #032b58 0%, #075184 52%, #008b96 100%);
  --brand-action: linear-gradient(118deg, #0756a0 0%, #008f9a 100%);
  --brand-action-hover: linear-gradient(118deg, #064985 0%, #00a6ad 100%);
  --ink: #153247;
  --muted: #647780;
  --line: #d8e3e4;
  --surface: #ffffff;
  --canvas: #f3f7f7;
  --orange: var(--brand-coral);
  --accent: var(--brand-coral);
  --accent-soft: #fff0ec;
  --teal: var(--brand-cyan-deep);
  --blue: #28649a;
  --shadow: 0 18px 42px rgba(4, 48, 85, 0.14);
}

body {
  background: linear-gradient(135deg, #f7fbff 0%, #edf8f7 48%, #fff5f1 100%);
}

.topbar,.site-header,.admin-topbar,.login-topbar {
  border-color: rgba(255,255,255,.16);
  color: #fff;
  background: var(--brand-header);
  box-shadow: 0 10px 30px rgba(3, 43, 88, 0.2), inset 0 -1px rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
}

.brand,.site-brand {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
}
.brand-mark-image {
  width: 46px;
  height: 46px;
  padding: 4px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 8px;
  background: linear-gradient(145deg, #fff 0%, #e9fbfc 100%);
  box-shadow: 0 7px 18px rgba(0, 20, 48, .22);
  filter: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.brand:hover .brand-mark-image,.site-brand:hover .brand-mark-image {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 11px 24px rgba(0, 20, 48, .3), 0 0 0 3px rgba(255,255,255,.15);
}
.brand>span:last-child,.site-brand strong { color:#fff; font-weight: 800; letter-spacing: 0; text-shadow:0 1px 8px rgba(0,20,48,.28); }
.topbar-note,.env-badge { color:rgba(255,255,255,.82); }
.env-badge { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.11); }

.topbar-link,.icon-link,.quiet-button,.back-link {
  color: rgba(255,255,255,.86);
  transition: color 170ms ease, background-color 170ms ease, transform 170ms ease;
}
.topbar-link:hover,.icon-link:hover,.quiet-button:hover,.back-link:hover {
  color: #fff;
  background: rgba(255,255,255,.13);
  transform: translateY(-1px);
}

.topbar,.site-header {
  height: 68px;
  padding: 0 26px;
  display: grid;
  grid-template-columns: minmax(170px,1fr) auto minmax(170px,1fr);
  align-items: center;
  gap: 20px;
}
.global-nav,.topbar-primary {
  min-width: 0;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
}
.header-tools,.topbar-actions {
  min-width: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-link,.icon-link {
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.topbar-link svg,.icon-link svg { width: 17px; height: 17px; flex: 0 0 auto; }
.topbar-link[aria-current="page"],.icon-link[aria-current="page"] {
  border-color: rgba(255,255,255,.42);
  color: #fff;
  background: linear-gradient(115deg, #e34e3e 0%, #f08a43 100%);
  box-shadow: 0 8px 18px rgba(92,28,20,.28), inset 0 1px rgba(255,255,255,.24);
}
.topbar-link[aria-current="page"]:hover,.icon-link[aria-current="page"]:hover {
  color: #fff;
  background: linear-gradient(115deg, #f05b45 0%, #f5a142 100%);
  box-shadow: 0 11px 24px rgba(92,28,20,.34), inset 0 1px rgba(255,255,255,.26);
}
@media(max-width:1320px){.topbar-note{display:none}.topbar,.site-header{grid-template-columns:auto 1fr auto;gap:10px}.global-nav,.topbar-primary{justify-self:end}.topbar-link,.icon-link{padding:0 8px}}
@media(max-width:760px){body{grid-template-rows:60px minmax(0,1fr)}.topbar,.site-header{height:60px;padding:0 10px;gap:6px}.global-nav,.topbar-primary{gap:2px}.global-nav .icon-link,.topbar-primary .topbar-link{width:30px;min-width:30px;padding:0;justify-content:center}.global-nav .icon-link span,.topbar-primary .topbar-link span{display:none}.site-brand strong,.brand>span:last-child{display:none}.brand-mark-image{width:40px;height:40px}.header-tools,.topbar-actions{gap:4px}}

[data-account-menu],.account-menu { position: relative; }
.account-trigger {
  min-height: 42px;
  padding: 4px 8px 4px 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 7px;
  color: #fff;
  background: rgba(255,255,255,.1);
  cursor: pointer;
  transition: background-color 170ms ease, border-color 170ms ease, transform 170ms ease;
}
.account-trigger:hover,.account-trigger[aria-expanded="true"] {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.account-trigger>svg { width: 15px; }
.account-login-trigger { padding: 0 12px; }
.account-login-trigger>svg { width: 17px; }
.account-trigger-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 750; }
.user-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #087aa0 0%, #0bb8b5 62%, #eb6a4b 100%);
  box-shadow: 0 5px 14px rgba(3,43,88,.2);
  font-size: 14px;
  font-weight: 850;
}
.user-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.user-avatar-header { width: 32px; height: 32px; border-width: 1px; font-size: 12px; }
.avatar-fallback { line-height: 1; }
.account-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  padding: 8px;
  border: 1px solid #b8d3da;
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 52px rgba(3,43,88,.25);
  backdrop-filter: blur(18px);
  animation: menu-enter 170ms ease both;
}
.account-summary { padding: 10px; display: flex; align-items: center; gap: 10px; border-radius: 6px; background: linear-gradient(120deg,#edf7ff,#e8faf7); }
.account-summary>span:last-child { min-width: 0; display: grid; gap: 3px; }
.account-summary strong,.account-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-summary small { color: var(--muted); font-size: 11px; }
.account-popover>a,.account-menu-logout {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 5px;
  color: #284252;
  background: transparent;
  font-size: 12px;
  font-weight: 680;
  cursor: pointer;
}
.account-popover>a:hover,.account-menu-logout:hover { color: var(--brand-navy); background: #e9f7f7; }
.account-popover>a svg,.account-menu-logout svg { width: 16px; color: var(--brand-cyan-deep); }
.account-menu-logout { color: #a44435; }
.account-menu-logout svg { color: #c4523d; }
.account-menu-divider { height: 1px; margin: 6px 4px; background: #dce7e8; }

.forum-header { background: linear-gradient(112deg, #03264f 0%, #086c82 65%, #d75842 100%); }
.forum-identity { display: flex; align-items: flex-start; gap: 12px; }
.forum-identity-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg,#e34e3e,#f4a443);
  box-shadow: 0 10px 22px rgba(124,50,31,.24);
}
.forum-identity-icon svg { width: 22px; }
.forum-identity h1 { font-size: 24px; }
.forum-identity p:last-child { margin: 7px 0 0; color: #607780; font-size: 11px; line-height: 1.55; }

.profile-view-tabs {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  border: 1px solid #b8d3da;
  border-radius: 8px;
  background: linear-gradient(110deg,#eaf5ff,#e4f8f5);
  box-shadow: 0 10px 25px rgba(4,55,91,.08);
}
.profile-view-tabs a { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; color: #526b76; font-size: 12px; font-weight: 750; }
.profile-view-tabs a.active { color: #fff; background: var(--brand-action); box-shadow: 0 8px 18px rgba(5,79,128,.22); }
.profile-view-tabs svg { width: 17px; }
.avatar-editor { margin-bottom: 22px; padding: 16px; display: flex; align-items: center; gap: 16px; border: 1px solid #c8dde1; border-radius: 7px; background: linear-gradient(120deg,#f4f9ff,#edfafa); }
.avatar-preview { width: 82px; height: 82px; font-size: 28px; }
.avatar-editor>div { display: grid; gap: 7px; }
.avatar-editor p { margin: 0; color: var(--muted); font-size: 11px; }
.avatar-upload-button { width: fit-content; min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #7dbbc4; border-radius: 5px; color: var(--brand-navy); background: #fff; cursor: pointer; }
.avatar-upload-button:hover { color: var(--brand-cyan-deep); background: #eaf9f8; }
.avatar-upload-button svg { width: 16px; }

.sidebar,.admin-sidebar,.community-sidebar {
  border-color: #c4d9df;
  background: linear-gradient(180deg, #dff1f4 0%, #eaf1fa 58%, #faeeee 100%);
}
.mode-button,.nav-item,.taxonomy-tab,.topic-item {
  position: relative;
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}
.mode-button:hover,.nav-item:hover,.taxonomy-tab:hover,.topic-item:hover { transform: translateX(2px); }
.mode-button.active,.nav-item.active,.taxonomy-tab.active,.topic-item.active {
  border-color: #99cbd1;
  background: linear-gradient(120deg, #fff 0%, #e8fbfb 100%);
  box-shadow: 0 10px 25px rgba(4, 55, 91, 0.13);
}
.mode-button.active .mode-icon,.nav-item.active svg,.taxonomy-tab.active svg,.topic-model { color: var(--brand-cyan-deep); }
.mode-button.active::before,.nav-item.active::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: var(--brand-cyan);
  content: "";
  transform: translateY(-50%);
}
.mode-icon { color: var(--brand-navy); background: linear-gradient(145deg, #fff 0%, #cae9ed 100%); }

.primary-button,.primary,.login-submit {
  border-color: #08758e;
  color: #fff;
  background: var(--brand-action);
  box-shadow: 0 10px 24px rgba(5, 79, 128, 0.26), inset 0 1px rgba(255,255,255,.18);
  transition: background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}
.primary-button:hover,.primary:hover,.login-submit:hover {
  border-color: #00a2ab;
  background: var(--brand-action-hover);
  box-shadow: 0 14px 30px rgba(0, 126, 146, 0.3), inset 0 1px rgba(255,255,255,.22);
  transform: translateY(-2px);
}

.secondary-button,.secondary,.icon-control,.icon-action,.icon-button,.pager button {
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease, transform 170ms ease;
}
.secondary-button:hover,.secondary:hover,.icon-control:hover,.icon-action:hover,.icon-button:hover,.pager button:hover:not(:disabled) {
  border-color: #9bcacc;
  color: var(--brand-cyan-deep);
  background: #eef9f9;
}

input:focus,select:focus,textarea:focus,.search-wrap input:focus,.search-field input:focus,.taxonomy-search input:focus,.input-wrap input:focus {
  border-color: var(--brand-cyan-deep);
  box-shadow: 0 0 0 3px rgba(8, 184, 196, 0.12);
}

.model-card,.profile-section,.feedback-form-panel,.auth-panel,.login-panel,.panel,.reply-item,.favorite-item,.contact-notes>div {
  border-color: #cbdde2;
  background: linear-gradient(145deg, #fff 0%, #fff 68%, #edfafa 100%);
  box-shadow: 0 10px 28px rgba(9, 50, 78, 0.08);
}
.model-card,.favorite-item,.reply-item,.contact-notes>div {
  transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms ease;
}
.model-card:hover,.favorite-item:hover,.reply-item:hover,.contact-notes>div:hover {
  border-color: #65bec5;
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.model-card,.profile-section,.feedback-form-panel,.auth-panel,.login-panel,.panel {
  animation: surface-enter 420ms cubic-bezier(.22,.8,.32,1) both;
}
.model-card:nth-child(3n+2) { animation-delay: 45ms; }
.model-card:nth-child(3n) { animation-delay: 90ms; }

.eyebrow,.login-heading p,.section-heading p { color: #d74d32; }
h1,.feedback-intro h1,.auth-heading h1,.login-heading h1 {
  color: var(--brand-navy);
  background: linear-gradient(105deg, #052e61 0%, #087b93 72%, #d95439 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tag,.mini-tag,.status,.env-badge { border: 1px solid rgba(7, 59, 115, 0.07); }
.env-badge,.status.published,.tag.mode-local { color: #087078; background: #e4f6f5; }
.banner-slot {
  border-color: #6fb5c3;
  background: linear-gradient(120deg, #063a70 0%, #07808d 66%, #e66a4d 100%);
  box-shadow: 0 18px 38px rgba(5, 55, 93, 0.2);
}
.table-wrap thead th { color: #526b76; background: #f5f9f9; }
.table-wrap tbody tr { transition: background-color 150ms ease; }
.table-wrap tbody tr:hover { background: #f5fbfb; }
.pagination-bar,.model-toolbar,.taxonomy-tabs { border-color: var(--line); background: linear-gradient(100deg, #f8fbff 0%, #ecf8f6 100%); }

/* Admin surfaces keep the dense workspace while carrying the stronger brand system. */
.admin-layout {
  background: linear-gradient(135deg, #eef7fb 0%, #e9f6f4 52%, #fff1ed 100%);
}
.admin-content { background: transparent; }
.admin-content .panel {
  border-color: #9fc7cf;
  background: #fff;
  box-shadow: 0 20px 46px rgba(3, 43, 88, .15);
}
.admin-content .panel-heading {
  border-color: rgba(255,255,255,.14);
  color: #fff;
  background: linear-gradient(112deg, #042d5c 0%, #075c86 60%, #078f96 100%);
  box-shadow: inset 0 -1px rgba(255,255,255,.12);
}
.admin-content .panel-heading h1,
.admin-content .panel-heading h2 {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 2px 12px rgba(0,20,48,.25);
}
.admin-content .panel-heading .eyebrow { color: #ffab91; }
.admin-content .panel-heading .muted { color: rgba(255,255,255,.72); }
.admin-content .panel-heading .primary {
  border-color: rgba(255,255,255,.42);
  background: linear-gradient(110deg, #08a8b1 0%, #0ac2bf 100%);
  box-shadow: 0 9px 22px rgba(0,24,51,.25);
}
.admin-content .model-toolbar,
.admin-content .pagination-bar,
.admin-content .taxonomy-tabs {
  background: linear-gradient(100deg, #edf6ff 0%, #e4f7f4 100%);
}
.admin-content .table-wrap thead th {
  border-bottom-color: #bdd5dc;
  color: #173f5a;
  background: linear-gradient(180deg, #eef7fa 0%, #e5f1f4 100%);
}
.admin-content .stats-grid>div {
  position: relative;
  overflow: hidden;
  border-color: #b7d4da;
  background: linear-gradient(145deg, #fff 0%, #e8f8f7 100%);
  box-shadow: 0 9px 24px rgba(4,55,91,.09);
}
.admin-content .stats-grid>div::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0756a0, #08b8c4, #eb6a4b);
  content: "";
}
.admin-content .stats-grid strong { color: var(--brand-navy); }
.admin-content .community-admin-tabs button.active {
  border-bottom-color: var(--brand-coral);
  color: var(--brand-navy);
}
.admin-content .taxonomy-tab.active {
  color: var(--brand-navy);
  background: linear-gradient(110deg, #fff 0%, #dcf5f4 100%);
}
.admin-content dialog,
dialog {
  border: 1px solid #8fc0c8;
  background: linear-gradient(145deg, #fff 0%, #f1fbfa 100%);
}

.login-brand-logo {
  width: 154px;
  max-height: 152px;
  display: block;
  margin: 0 auto 20px;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(7, 59, 115, 0.2));
  animation: logo-enter 600ms cubic-bezier(.2,.9,.3,1) both;
}
.auth-panel,.login-panel,.feedback-form-panel { border-top: 4px solid transparent; border-image:linear-gradient(90deg,#0756a0,#08b8c4,#eb6a4b) 1; }
footer {
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
  background: linear-gradient(110deg, #032b58 0%, #064e72 100%);
  box-shadow: 0 -10px 28px rgba(3,43,88,.17);
}
footer span:first-child { color:#fff; }

@keyframes surface-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes logo-enter {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes menu-enter {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width:760px) {
  .brand-mark-image { width: 40px; height: 40px; }
  .mode-button:hover,.nav-item:hover,.taxonomy-tab:hover,.topic-item:hover { transform: none; }
  .account-trigger { width: 42px; padding: 4px; justify-content: center; }
  .account-trigger-name,.account-trigger>svg:last-child,.account-login-trigger span { display: none; }
  .account-login-trigger { padding: 0; }
  .account-popover { position: fixed; top: 64px; right: 8px; width: min(230px,calc(100vw - 16px)); }
  .profile-view-tabs a { min-width: 0; padding: 0 7px; }
  .avatar-editor { align-items: flex-start; }
  .mode-button.active::before,.nav-item.active::before {
    left: 50%;
    top: auto;
    bottom: 0;
    width: 18px;
    height: 3px;
    transform: translateX(-50%);
  }
}

@media (max-height:720px) {
  .login-brand-logo { width: 118px; max-height: 110px; margin-bottom: 12px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:1ms!important; animation-delay:0ms!important; transition-duration:1ms!important; }
}