/* Shared visual language. Product colours and page-specific layouts stay local. */
:root {
  --font-interface: 'Manrope', 'Noto Sans Arabic', Arial, sans-serif;
  --font-arabic: 'Noto Sans Arabic', 'Manrope', Arial, sans-serif;
  --ink: #183247;
  --muted: #526779;
  --line: #dfe7ee;
  --radius: 16px;
  --surface-shadow: 0 4px 24px rgb(20 47 73 / 4%);
}
body {
  font-family: var(--font-interface);
  font-weight: 450;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-interface);
  font-weight: 750;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3,
h4,
h5,
h6 {
  letter-spacing: -0.02em;
}
p {
  text-wrap: pretty;
}
:lang(ar),
[dir='rtl'] {
  font-family: var(--font-arabic);
  letter-spacing: normal;
}
pre,
code,
kbd,
samp {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-variant-ligatures: none;
}
.eyebrow {
  font-weight: 750;
  letter-spacing: 0.16em;
}
.brand strong {
  font-weight: 800;
  letter-spacing: -0.035em;
}
.brand small,
.brand-slogan {
  letter-spacing: 0.01em;
}
button,
.button {
  font-weight: 700;
  border-radius: 10px;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
button:not(:disabled):hover,
a.button:hover {
  box-shadow: 0 4px 12px rgb(17 50 76 / 10%);
}
button:disabled {
  cursor: not-allowed;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #3785d8;
  outline-offset: 3px;
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):not(
    [type='hidden']
  ),
select,
textarea {
  border-radius: 10px;
  border-color: #b9cbd9;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}
input::placeholder,
textarea::placeholder {
  color: #63798b;
  opacity: 1;
}
label {
  font-weight: 650;
}
th {
  font-weight: 750;
}
td {
  font-variant-numeric: tabular-nums;
}
.card,
.knowledge-card,
.auth-form,
.project-card {
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}
.card h2 {
  font-weight: 750;
}
.modern-header {
  border-bottom-color: #e3eaf0;
  box-shadow: 0 4px 20px rgb(13 43 70 / 4%);
}
.modern-header .smart-nav-panel,
.profile-dropdown {
  border-radius: 18px;
  box-shadow: 0 18px 48px rgb(13 43 70 / 12%);
}
.modern-header .smart-nav-card {
  border-radius: 12px;
  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}
.modern-header .smart-nav-card strong {
  font-weight: 800;
}
.workspace-shell {
  background: #f4f7fb;
}
.workspace-title h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
}
.sidebar nav a {
  font-weight: 600;
}
.sidebar nav a.selected {
  font-weight: 800;
  border-radius: 10px;
}
.sidebar nav a:not(.selected):hover {
  background: #f1f5f9;
  text-decoration: none;
}
.sidebar-section h2 {
  font-weight: 750;
  letter-spacing: 0.09em;
}
.site-footer {
  border-top-color: #e1e9f0;
}
.site-footer h3,
.site-footer h4 {
  font-weight: 800;
}
.site-footer a {
  text-underline-offset: 3px;
}
.studio-v2 .studio-field-pair dd {
  font-weight: 700;
}
.studio-v2 .studio-field-pair dt {
  font-weight: 600;
}
.studio-v2 .studio-field-pair [dir='rtl'] {
  line-height: 1.9;
}
::selection {
  background: #d5eafa;
  color: #0a304f;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  button,
  .button,
  input,
  select,
  textarea,
  .modern-header .smart-nav-card {
    transition: none;
  }
}
/* Readable defaults across public pages, forms and organization workspaces. */
body {
  font-size: 16px;
}
body
  :is(main, .workspace-main, .site-footer)
  :is(p, li, label, input, select, textarea) {
  font-size: 16px;
}
body .card :is(p, li) {
  font-size: 15px;
}
body :is(button, .button) {
  font-size: 14px;
}
body .sidebar nav a {
  font-size: 14px;
  line-height: 1.5;
}
body .sidebar-section h2 {
  font-size: 12px;
}
body .site-footer :is(a, small, p),
body .footer-bottom {
  font-size: 14px;
}
body table {
  font-size: 14px;
  line-height: 1.6;
}
body th {
  font-size: 14px;
}
body .modern-header :is(#main-nav, .smart-nav-trigger, .nav-access .button) {
  font-size: 14px;
}
body .modern-header .smart-nav-card small {
  font-size: 13px;
  line-height: 1.5;
}
body .modern-header .header-account > span {
  font-size: 12px;
}
body .modern-header .header-account strong {
  font-size: 14px;
}
body :is(.page-lead, .auth-form > p, .form-help) {
  font-size: 16px;
}
body :is(.notice, .success, .error) {
  font-size: 14px;
}
body
  :is(.otp-modal, .verification-modal, .verification-experience)
  :is(p, label, button) {
  font-size: 15px;
}
@media (min-width: 1341px) and (max-width: 1600px) {
  body .modern-header .signed-in-header .brand-slogan {
    font-size: 11px;
  }
  body .modern-header .signed-in-header {
    gap: 8px;
  }
  body .modern-header .signed-in-header .profile-menu {
    max-width: 170px;
  }
  body .modern-header .signed-in-header .header-account strong {
    max-width: 140px;
  }
}
@media (max-width: 900px) {
  body .workspace-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  body .workspace-shell .sidebar {
    min-width: 0;
    max-width: 100%;
    overflow: clip;
  }
  body .sidebar nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
  }
}

/* Document Lab and grouped navigation */
#main-nav .header-document-lab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(120deg, #006b70, #164cc8);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 5px 15px #0b67882a;
  border: 2px solid transparent;
  text-decoration: none;
}
#main-nav .header-document-lab[aria-current='page'] {
  border-color: #74f5dd;
  box-shadow: 0 0 0 3px #c7f8ef;
}
#main-nav .header-document-lab .lab-access-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}
.sidebar-section h2 {
  padding: 4px 8px;
  margin: 0 0 4px;
  border-radius: 6px;
  line-height: 1.4;
  background: #e8f2ff;
  color: #1758a5 !important;
  border-left: 3px solid #2477cf;
  font-size: 12px !important;
  letter-spacing: 0.06em;
}
.sidebar-section:nth-child(2) h2 {
  background: #f2eaff;
  color: #713ab1 !important;
  border-color: #9961db;
}
.sidebar-section:nth-child(3) h2 {
  background: #def7ef;
  color: #006e60 !important;
  border-color: #00a58b;
}
.sidebar-section:nth-child(4) h2 {
  background: #fff0d7;
  color: #8a5200 !important;
  border-color: #e9a312;
}
.sidebar-section:nth-child(5) h2 {
  background: #ffeaf1;
  color: #a12e59 !important;
  border-color: #dc5484;
}
.license-expired-frame {
  border: 3px solid #cc263d;
  border-radius: 18px;
  background: #fff2f3;
  padding: 32px;
  color: #961b2c;
  max-width: 900px;
}
.license-expired-frame h2 {
  color: #a01930;
}
.studio.license-blocked .camera {
  outline: 4px solid #cf243e;
  outline-offset: -4px;
  background: #360c15;
}
.studio.license-blocked .camera-guide {
  border-color: #ff4d68;
}
.studio.license-blocked .camera-instruction {
  background: #af1730;
  color: #fff;
  font-size: 16px;
}
.studio.license-blocked video {
  visibility: hidden;
}
.approval-list {
  display: grid;
  gap: 16px;
}
.approval-state {
  display: inline-block;
  padding: 5px 12px;
  background: #fff0d7;
  border-radius: 20px;
}
@media (max-width: 800px) {
  #main-nav .header-document-lab .lab-access-label {
    display: none;
  }
  .license-expired-frame {
    padding: 20px;
  }
}

.purchase-wizard {
  max-width: 880px;
  margin: auto;
  padding: 28px;
  background: #fff;
  border: 1px solid #d5e5f2;
  border-radius: 20px;
  box-shadow: 0 12px 32px #153b6810;
}
.purchase-wizard h1 {
  font-size: 32px;
}
.purchase-wizard form {
  display: grid;
  gap: 16px;
}
.purchase-wizard .facts {
  margin: 24px 0;
}
.purchase-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 20px 0 30px;
  flex-wrap: wrap;
}
.purchase-steps li {
  padding: 9px 14px;
  background: #edf3fd;
  color: #174e96;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
}
.trial-pay {
  display: inline-flex;
  margin-top: 6px;
  background: #087f6d !important;
  color: #fff !important;
}
.purchase-wizard label {
  font-size: 16px;
}
.purchase-wizard p {
  font-size: 16px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .purchase-wizard {
    padding: 18px;
  }
  .purchase-wizard h1 {
    font-size: 26px;
  }
}

@media (min-width: 801px) and (max-width: 1800px) {
  #main-nav .header-document-lab .lab-access-label {
    display: none;
  }
  #main-nav .header-document-lab {
    padding: 9px 10px;
    gap: 5px;
    font-size: 13px;
  }
  .signed-in-header .header-account {
    min-width: 0;
  }
}

.modern-header #main-nav > a.header-document-lab[aria-current='page'] {
  background: linear-gradient(120deg, #006b70, #164cc8) !important;
  color: #fff !important;
  border-color: #74f5dd;
}
.purchase-wizard h2 {
  font-size: 26px;
}
.purchase-steps [aria-current='step'] {
  background: #1764bf;
  color: #fff;
}

/* Shared workspace navigation */
body .sidebar { background:#fff; padding:16px 12px; border-right:1px solid #e2e9f0; align-self:start; }
body .sidebar .sidebar-menu { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.sidebar-menu > summary { display:none; }
body .sidebar nav { display:block; overflow:visible; white-space:normal; padding:0; }
body .sidebar .sidebar-section { --sidebar-accent:#2566b3; margin:0 0 8px; padding:0; border:0; }
body .sidebar .sidebar-section:nth-child(2) { --sidebar-accent:#7251b2; }
body .sidebar .sidebar-section:nth-child(3) { --sidebar-accent:#007c73; }
body .sidebar .sidebar-section:nth-child(4) { --sidebar-accent:#326383; }
body .sidebar .sidebar-section:nth-child(5) { --sidebar-accent:#b33264; }
body .sidebar.sidebar .sidebar-section h2 { display:flex; gap:8px; align-items:center; font-size:11px!important; font-weight:800; letter-spacing:.055em; text-transform:uppercase; line-height:1.45; color:var(--sidebar-accent)!important; background:transparent; border:0; padding:4px 10px; margin:0 0 4px; border-radius:0; }
body .sidebar .sidebar-section h2::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--sidebar-accent); flex:none; }
body .sidebar nav a { position:relative; display:flex; align-items:center; gap:10px; min-height:33px; margin:0; padding:5px 10px; border:1px solid transparent; border-radius:9px; font-size:14px!important; line-height:1.45; color:#354d62; font-weight:550; text-decoration:none; }
body .sidebar nav a:hover { background:#f2f6fb; color:#154b84; }
body .sidebar nav a.selected { background:#edf4ff; color:#164f9c; border:1px solid #d7e5fa; font-weight:800; box-shadow:inset 3px 0 #2565b2; }
body .sidebar nav a:focus-visible,.sidebar-menu > summary:focus-visible { outline:2px solid #1e64b5; outline-offset:2px; }
.sidebar-icon { width:18px; height:18px; flex:none; opacity:.85; }
.sidebar-link-label { min-width:0; overflow-wrap:anywhere; }
body .sidebar .sidebar-help { display:flex; align-items:center; gap:9px; margin:4px 4px 0; padding:12px 6px 0; border-top:1px solid #e4eaf1; color:#526c82; font-size:12px; line-height:1.5; }
@media(max-width:900px) {
 body .sidebar { padding:10px 16px; border-right:0; border-bottom:1px solid #e2e9f0; }
 .sidebar-menu > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; min-height:44px; padding:8px 12px; color:#1c466b; font-size:14px; font-weight:750; background:#f0f5fb; border-radius:10px; cursor:pointer; }
 .sidebar-menu > summary::-webkit-details-marker { display:none; }
 .sidebar-menu > summary > span { font-size:12px; font-weight:600; }
 .sidebar-menu[open] > summary { margin-bottom:12px; }
 body .sidebar nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
 body .sidebar nav a { min-height:44px; padding:9px 10px; font-size:14px!important; }
 body .sidebar .sidebar-section { margin-bottom:4px; }
 body .sidebar .sidebar-help { min-height:44px; }
}
@media(max-width:460px) { body .sidebar nav { grid-template-columns:1fr; } }