:root{--brand:#8C6A0A;--deep:#111111;--soft:#F7F0DD;--ink:#20201D;--muted:#65655F;--line:#E3E1D8;--bg:#F5F5F2;--surface:#FFFFFF;--surface-subtle:#FAFAF7;--on-dark:#F5F5F2;--muted-on-dark:#BDBDB5;--focus:#B8860B;--shadow:0 5px 24px #11111107;--gold:#B8860B;--dark-gold:#8C6A0A;--font-ui:"MYSTERY Sans",Tahoma,Arial,sans-serif;}
@font-face{font-family:"MYSTERY Sans";src:url("/assets/fonts/IBMPlexSansArabic-Regular.ttf") format('truetype');font-weight:400;font-style:normal;font-display:swap;}@font-face{font-family:"MYSTERY Sans";src:url("/assets/fonts/IBMPlexSansArabic-Medium.ttf") format('truetype');font-weight:500;font-style:normal;font-display:swap;}@font-face{font-family:"MYSTERY Sans";src:url("/assets/fonts/IBMPlexSansArabic-SemiBold.ttf") format('truetype');font-weight:600;font-style:normal;font-display:swap;}@font-face{font-family:"MYSTERY Sans";src:url("/assets/fonts/IBMPlexSansArabic-Bold.ttf") format('truetype');font-weight:700;font-style:normal;font-display:swap;}
/* Color and font tokens are prepended by the server from shared/brand.mjs. */
body {
  font-family: var(--font-ui);
}
.num,
bdi {
  font-variant-numeric: tabular-nums;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
:focus-visible {
  outline-color: var(--focus);
}
.sidebar {
  background: var(--deep);
  color: var(--on-dark);
}
.brand {
  padding: 28px 22px;
  gap: 15px;
}
.brand img.brand-mark {
  width: 35px;
  height: 47px;
  filter: none;
  opacity: 1;
}
.brand img.brand-wordmark {
  width: 132px;
  height: auto;
  filter: none;
  opacity: 1;
  display: block;
  margin-bottom: 10px;
}
.brand small,
.nav-label,
.sidebar-footer,
.sidebar-footer span {
  color: var(--muted-on-dark);
}
.nav-home.active,
.nav-children a.active {
  background: var(--soft);
  color: var(--deep);
}
.nav-children a.active::before {
  background: var(--gold);
}
.nav summary,
.nav-home {
  min-height: 46px;
}
.nav summary:hover,
.nav-home:not(.active):hover {
  background: #ffffff0c;
}
.sidebar-footer {
  line-height: 1.9;
}
.sidebar-footer .demo-label {
  color: var(--gold);
}
.btn.primary {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--on-dark);
}
.btn.primary:hover {
  background: var(--brand);
  border-color: var(--brand);
}
.topbar {
  border-bottom-color: var(--line);
}
.mobile-brand {
  display: none;
}
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
  background: var(--surface);
  font-size: 11px;
  white-space: nowrap;
}
.demo-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.auth {
  grid-template-columns: minmax(380px, 1fr) minmax(440px, 1fr);
}
#app > .language-switch {
  position: absolute;
  top: 16px;
  left: 24px;
  right: auto;
  z-index: 2;
}
html[dir='ltr'] #app > .language-switch {
  right: 24px;
  left: auto;
}
.auth-brand {
  background: var(--deep);
  padding: clamp(38px, 5vw, 80px);
}
.auth-brand::after {
  width: 390px;
  height: 390px;
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  border-radius: 0;
  transform: rotate(45deg);
  inset: auto auto -270px -180px;
  box-shadow:
    0 0 0 55px color-mix(in srgb, var(--gold) 3%, transparent),
    0 0 0 110px color-mix(in srgb, var(--gold) 2%, transparent);
}
.auth-logo {
  gap: 20px;
}
.auth-logo img.brand-mark {
  width: 49px;
  height: 66px;
  filter: none;
}
.auth-logo img.brand-wordmark {
  width: min(225px, 100%);
  height: auto;
  filter: none;
  margin-bottom: 14px;
  display: block;
}
.auth-logo small,
.auth-copy p,
.auth-brand footer {
  color: var(--muted-on-dark);
}
.auth-copy {
  position: relative;
  z-index: 1;
  padding: 70px 0;
}
.auth-copy .eyebrow {
  color: var(--gold);
  font-size: 12px;
}
.auth-copy h1 {
  font-size: clamp(32px, 3.2vw, 48px);
  line-height: 1.55;
  margin-block: 18px;
  letter-spacing: 0;
}
.auth-copy p {
  font-size: 15px;
  max-width: 390px;
}
.auth-form {
  background: var(--bg);
}
.auth-box {
  max-width: 400px;
}
.auth-box > h1 {
  font-size: 28px;
}
.auth-box input {
  background: var(--surface);
  min-height: 48px;
}
.auth-box .btn.primary {
  min-height: 48px;
}
.auth-box .demo-badge {
  margin-bottom: 12px;
}
.auth-symbol {
  border-radius: 10px;
}
.auth-footnote {
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}
.auth-mobile-brand {
  display: none;
}
.paper-sheet,
.plan-paper {
  font-family: var(--font-ui);
}
.document-header > img {
  width: 132px;
  max-height: 92px;
  object-fit: contain;
}
.paper-header img {
  width: 110px;
  height: 70px;
  object-fit: contain;
}
.paper-sheet {
  --paper-accent: var(--dark-gold);
}
.paper-note,
.paper-footer {
  overflow-wrap: anywhere;
}
.table-wrap {
  overscroll-behavior-inline: contain;
}
@media (max-width: 720px) {
  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-basis: 100%;
  }
  .mobile-brand img {
    width: 15px;
    height: 22px;
    object-fit: contain;
  }
  .mobile-brand .mobile-wordmark {
    width: 92px;
    height: auto;
  }
}
@media (max-width: 760px) {
  .auth {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  .auth-brand {
    display: flex;
    padding: 26px 28px;
    min-height: auto;
  }
  .auth-logo {
    gap: 14px;
  }
  .auth-logo img.brand-mark {
    width: 30px;
    height: 41px;
  }
  .auth-logo img.brand-wordmark {
    width: 155px;
    margin-bottom: 8px;
  }
  .auth-logo small {
    font-size: 11px;
  }
  .auth-copy,
  .auth-brand footer,
  .auth-brand::after {
    display: none;
  }
  .auth-form {
    flex: 1;
    padding: 38px 24px;
    align-items: flex-start;
  }
  .auth-box > h1 {
    font-size: 25px;
  }
  .page-head .actions {
    gap: 8px;
  }
  .document-header > img {
    width: 110px;
  }
}
@media print {
  .paper-sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .paper-sheet,
  .paper-sheet * {
    text-shadow: none;
  }
}