:root {
  --primary: #206bc4;
  --sidebar-width: 252px;
  --topbar-height: 68px;
  --app-bg: #f5f7fb;
  --app-border: #e7ebf2;
  --app-muted: #748198;
}

html { min-width: 0; }
body.admin-page {
  margin: 0;
  min-height: 100vh;
  color: #1d273b;
  background: var(--app-bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}
a { color: var(--primary); }

/* Shared app shell */
.app-topbar {
  position: fixed;
  z-index: 1040;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--topbar-height);
  padding: 0 22px 0 0;
  background: #fff;
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 1px 3px rgba(31, 45, 61, .035);
}
.topbar-brand-area {
  display: flex;
  align-items: center;
  flex: 0 0 var(--sidebar-width);
  height: 100%;
  padding: 0 20px;
  border-right: 1px solid #f0f2f6;
}
.brand-link { display: flex; align-items: center; gap: 11px; color: #182433; text-decoration: none; }
.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #4b8fe2, #206bc4);
  border-radius: 11px;
  box-shadow: 0 5px 12px rgba(32, 107, 196, .2);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -2px;
}
.brand-name { display: flex; flex-direction: column; font-size: 15px; font-weight: 750; line-height: 1.1; letter-spacing: .01em; }
.brand-name small { margin-top: 4px; color: #8994a6; font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.topbar-context { display: flex; align-items: center; gap: 13px; margin-left: 25px; color: #26364a; font-size: 14px; font-weight: 650; }
.context-divider { color: #c0c8d3; font-size: 20px; font-weight: 400; }
.topbar-account { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.account-avatar, .sidebar-footer-mark { display: grid; flex: 0 0 auto; place-items: center; color: #206bc4; background: #e9f2fc; border-radius: 50%; font-weight: 700; }
.account-avatar { width: 34px; height: 34px; }
.account-info { display: flex; flex-direction: column; min-width: 78px; line-height: 1.25; }
.account-info strong { color: #253247; font-size: 12px; font-weight: 650; }
.account-info small { margin-top: 3px; color: #8a96a8; font-size: 10px; }
.logout-link { padding: 7px 11px; color: #66758a; background: #fff; border: 1px solid #e4e9f0; border-radius: 7px; font-size: 12px; text-decoration: none; transition: .15s ease; }
.logout-link:hover { color: #c0394b; background: #fff8f8; border-color: #f2d6da; }
.sidebar-toggle { display: none; }

.app-sidebar {
  position: fixed;
  z-index: 1030;
  top: var(--topbar-height);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  background: #fff;
  border-right: 1px solid var(--app-border);
  transition: transform .22s ease;
}
.sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 21px 13px 16px; }
.sidebar-section-title { padding: 0 12px; margin: 0 0 8px; color: #98a3b3; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.sidebar-section-title:not(:first-child) { margin-top: 25px; }
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  margin: 3px 0;
  color: #59677b;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.sidebar-link svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-link:hover { color: #206bc4; background: #f3f7fc; }
.sidebar-link.active { color: #1d63b6; background: #eaf3fd; font-weight: 650; }
.sidebar-link.active::before { position: absolute; top: 9px; bottom: 9px; left: -13px; width: 3px; background: #206bc4; border-radius: 0 4px 4px 0; content: ""; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-top: 1px solid #edf0f4; }
.sidebar-footer-mark { width: 33px; height: 33px; font-size: 12px; }
.sidebar-footer strong, .sidebar-footer small { display: block; }
.sidebar-footer strong { color: #39475b; font-size: 12px; font-weight: 650; }
.sidebar-footer small { margin-top: 3px; color: #929daf; font-size: 10px; }
.sidebar-backdrop { display: none; }

.admin-main { min-height: 100vh; margin-left: var(--sidebar-width); padding-top: var(--topbar-height); }
.page-content { width: min(100%, 1800px); margin: 0 auto; padding: 26px 30px 40px; }
.page-alert { padding: 11px 15px; margin: 0 0 17px; color: #26623d; background: #eaf7ee; border: 1px solid #d1edda; border-radius: 9px; }
.page-alert.is-danger { color: #8b3341; background: #fff0f1; border-color: #f4d5d9; }

/* Preserve familiar page markup while giving its controls the Tabler visual language. */
.page-content h1, .page-content h2, .page-content h3, .page-content h4 { color: #26364a; letter-spacing: -.015em; }
.page-content h3 { font-size: 17px; font-weight: 650; }
.page-content .card { padding: 19px 21px; margin-bottom: 16px; color: #26364a; background: #fff; border: 1px solid var(--app-border); border-radius: 11px; box-shadow: 0 2px 7px rgba(31, 45, 61, .035); }
.page-content .card h3:first-child { margin-top: 0; }
.page-content figure { max-width: 100%; margin: 0; overflow-x: auto; }
.page-content table { width: 100%; border-collapse: separate; border-spacing: 0; color: #3c4b60; font-size: 12px; }
.page-content th { color: #77859a; background: #f7f9fc; font-size: 11px; font-weight: 650; text-align: left; white-space: nowrap; }
.page-content th, .page-content td { padding: 10px 11px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
.page-content tbody tr:last-child td { border-bottom: 0; }
.page-content tbody tr:hover { background: #fafbfd; }
.page-content code { padding: 2px 5px; color: #52627a; background: #f2f5f9; border-radius: 4px; font-size: .9em; }
.page-content p { line-height: 1.55; }
.page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.page-content select, .page-content textarea,
.auth-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 37px;
  padding: 7px 10px;
  color: #27364b;
  background: #fff;
  border: 1px solid #dce2ea;
  border-radius: 7px;
  outline: none;
  box-shadow: 0 1px 2px rgba(31, 45, 61, .025);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.page-content input:focus, .page-content select:focus, .page-content textarea:focus,
.auth-content input:focus { border-color: #8db9e9; box-shadow: 0 0 0 3px rgba(32, 107, 196, .12); }
.page-content label { color: #59677b; font-size: 12px; font-weight: 550; }
.page-content form.inline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.page-content form.inline input, .page-content form.inline select { width: auto; margin: 0; }
.page-content button, .page-content .btn, .auth-content button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 35px;
  padding: 7px 13px;
  color: #fff;
  background: #206bc4;
  border: 1px solid #206bc4;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.page-content button:hover, .page-content .btn-primary:hover, .auth-content button:hover { color: #fff; background: #185ba8; border-color: #185ba8; }
.page-content .btn-outline { color: #53657d; background: #fff; border-color: #dce2ea; }
.page-content .btn-outline:hover { color: #206bc4; background: #f4f8fd; border-color: #bfd5ef; }
.page-content .btn-danger { color: #bc4050; background: #fff; border-color: #efd0d4; }
.page-content .btn-danger:hover { color: #a82f40; background: #fff5f6; border-color: #e8b7bf; }
.page-content .tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 650; line-height: 1.4; }
.page-content .tag-green { color: #267244; background: #e8f6ed; }
.page-content .tag-red { color: #a94350; background: #fff0f1; }
.page-content .tag-orange { color: #9a6a15; background: #fff5df; }
.page-content .tag-blue { color: #2865a5; background: #eaf3fd; }
.page-content .loading { padding: 36px 14px; color: #8290a4; text-align: center; }
.page-content .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 13px; margin-bottom: 16px; }
.page-content .stat-box { padding: 17px; background: #fff; border: 1px solid var(--app-border); border-radius: 11px; box-shadow: 0 2px 7px rgba(31, 45, 61, .035); }
.page-content .stat-box .num { color: #206bc4; font-size: 25px; font-weight: 720; letter-spacing: -.03em; }
.page-content .stat-box .label { color: #8490a2; font-size: 11px; }

/* Dialogs and progress states used by the existing Jinja pages. */
.modal-overlay { position: fixed; z-index: 1200; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(24, 36, 54, .42); backdrop-filter: blur(2px); }
.modal-overlay.open { display: flex; }
.modal-box { position: relative; width: min(480px, 100%); max-height: 90vh; overflow: auto; padding: 24px; background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 13px; box-shadow: 0 20px 60px rgba(20, 35, 55, .22); }
.modal-box h3 { margin: 0 0 17px; font-size: 16px; font-weight: 650; }
.modal-box .close { position: absolute; top: 9px; right: 11px; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; color: #758198; background: transparent; border: 0; font-size: 22px; }
.modal-box form { display: flex; flex-direction: column; gap: 9px; }
.modal-box form input, .modal-box form select { width: 100%; }
.modal-box form button { align-self: flex-start; }
.loading::after { display: inline-block; width: 16px; height: 16px; margin-left: 8px; border: 2px solid #dfe7f0; border-top-color: #206bc4; border-radius: 50%; content: ""; vertical-align: middle; animation: app-spin .8s linear infinite; }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* Standalone login view */
body.auth-page { min-height: 100vh; margin: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; color: #233247; background: radial-gradient(ellipse at 18% 12%, #e6f1ff 0, transparent 38%), linear-gradient(145deg, #f5f8fc, #edf2f8); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.auth-main { display: grid; box-sizing: border-box; width: 100%; max-width: 100vw; min-height: 100vh; place-items: center; padding: 24px; }
.auth-content { width: 100%; min-width: 0; }
.login-box { width: 100%; max-width: 410px; margin: 0 auto; }
.login-box article { box-sizing: border-box; width: 100%; margin: 0; padding: 31px; background: rgba(255,255,255,.96); border: 1px solid #e4eaf2; border-radius: 15px; box-shadow: 0 18px 48px rgba(40, 62, 91, .11); }
.login-box h2 { margin: 0 0 24px; color: #25364d; font-size: 20px; font-weight: 700; text-align: center; }
.login-box form { min-width: 0; }
.login-box label { display: block; margin: 13px 0 6px; color: #536176; font-size: 12px; font-weight: 600; }
.login-box label input { display: block; width: 100%; margin-top: 6px; }
.login-box input { font-size: 16px; }
.login-box .captcha-row { display: flex; align-items: center; gap: 9px; }
.login-box .captcha-row input { flex: 1; min-width: 0; }
.login-box .captcha-row input[type="hidden"] { display: none; }
.login-box .captcha-row img { height: 40px; flex: 0 0 auto; border: 1px solid #dce2ea; border-radius: 6px; }
.login-box button { width: 100%; min-height: 41px; margin-top: 19px; }
.auth-content .page-alert { max-width: 410px; margin: 0 auto 14px; }

/* The package builder is also opened inside a channel-page iframe. */
.in-iframe .app-topbar, .in-iframe .app-sidebar, .in-iframe .sidebar-backdrop { display: none !important; }
.in-iframe .admin-main { margin: 0; padding: 0; }
.in-iframe .page-content { width: 100%; padding: 4px 6px; }

@media (max-width: 991.98px) {
  .topbar-brand-area { flex-basis: auto; width: var(--sidebar-width); border-right: 0; }
  .sidebar-toggle { display: grid; width: 35px; height: 35px; place-items: center; padding: 0; margin-right: 10px; color: #52647b; background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
  .sidebar-toggle:hover { background: #f1f5fa; }
  .sidebar-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .app-sidebar { z-index: 1035; transform: translateX(-100%); box-shadow: 12px 0 35px rgba(23, 38, 58, .1); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 1030; inset: var(--topbar-height) 0 0; width: 100%; padding: 0; background: rgba(22, 35, 52, .34); border: 0; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .admin-main { margin-left: 0; }
  .page-content { padding: 23px 22px 34px; }
}
@media (max-width: 575.98px) {
  .app-topbar { min-width: 0; padding-right: 8px; }
  .topbar-brand-area { width: auto; min-width: 0; flex: 0 1 auto; padding: 0 9px; }
  .brand-link { min-width: 0; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 19px; }
  .brand-name { max-width: 70px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  .brand-name small { font-size: 9px; }
  .topbar-context { flex: 0 1 95px; min-width: 0; max-width: 95px; gap: 8px; margin-left: 8px; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
  .context-divider { display: none; }
  .account-info { display: none; }
  .topbar-account { flex: 0 0 auto; gap: 7px; }
  .account-avatar { width: 30px; height: 30px; }
  .logout-link { padding: 6px 7px; font-size: 11px; }
  .page-content { padding: 16px 12px 26px; }
  .page-content .card { padding: 14px; border-radius: 9px; }
  .page-content h1, .page-content h2, .page-content h3, .page-content h4 { max-width: 100%; overflow-wrap: anywhere; }
  .page-content > .card:first-child h3 { white-space: normal !important; }
  .page-content > .card:first-child { flex-wrap: wrap; align-items: flex-start !important; }
  .page-content > .card:first-child > div { flex-wrap: wrap; }
  .page-content .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .page-content .stat-box { padding: 13px 10px; }
  .page-content .stat-box .num { font-size: 21px; }
  .login-box article { padding: 24px 20px; }
}

@media (max-width: 360px) {
  .brand-name { display: none; }
  .topbar-context { flex-basis: 76px; max-width: 76px; }
  .logout-link { padding-right: 5px; padding-left: 5px; }
}

@media (max-width: 420px) {
  .auth-main { padding: 12px; }
  .login-box { width: 100%; }
  .login-box article { padding: 20px 16px; }
  .login-box .captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 112px);
    gap: 8px;
  }
  .login-box .captcha-row input:not([type="hidden"]) { width: 100%; min-width: 0; }
  .login-box .captcha-row img { width: 112px; max-width: 100%; height: auto; }
  .login-box .captcha-row > span { grid-column: 1 / -1; line-height: 37px !important; }
}

/* Mobile hardening for all admin pages.  Keep wide data tables inside their
   own scroll containers instead of allowing them to widen the whole page. */
@media (max-width: 760px) {
  body.admin-page { overflow-x: hidden; }
  .admin-main, .page-content { width: 100%; max-width: 100vw; min-width: 0; }
  .page-content { overflow-x: hidden; }
  .page-content > *, .page-content .card, .modal-box { min-width: 0; max-width: 100%; }
  .page-content img, .page-content iframe, .page-content video, .page-content canvas { max-width: 100%; }
  .page-content pre { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
  .page-content code { overflow-wrap: anywhere; word-break: break-word; }
  .page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .page-content select, .page-content textarea { max-width: 100%; font-size: 16px !important; }
  .page-content button, .page-content .btn { max-width: 100%; }
  .page-content [style*="display:flex"] { min-width: 0; }
  .page-content .card > div[style*="display:flex"] { flex-wrap: wrap !important; }
  .page-content .card > div[style*="display:flex"] > * { min-width: 0; }
  .modal-box { overflow-x: hidden; }
  .modal-box form input, .modal-box form select, .modal-box form textarea { width: 100%; }
  .audit-filters label, .prepare-filter label { min-width: 0; flex: 1 1 100%; width: 100%; }
  .media-config-select { width: 100%; min-width: 0; }
  .prepare-head, .audit-head { display: block; }
  .prepare-head > div:last-child, .audit-head > :last-child { margin-top: .75rem; }
}

@media (max-width: 575.98px) {
  .page-content { padding: 14px 10px 24px; }
  .page-content .card { padding: 14px; }
  .page-content form.inline { align-items: stretch; }
  .page-content form.inline input:not([type="checkbox"]):not([type="radio"]),
  .page-content form.inline select, .page-content form.inline button { flex: 1 1 100%; width: 100%; }
  .modal-overlay { padding: 10px; }
  .modal-box { width: 100%; padding: 18px 14px; }
}