@font-face {
  font-family:Inter;
  src:url('../fonts/Inter.ttf') format('truetype');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}

@font-face {
  font-family:'Noto Sans Arabic';
  src:url('../fonts/NotoSansArabic.ttf') format('truetype');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}

:root {
  --navy:#102b3e;
  --navy-deep:#0b2233;
  --accent:#087e81;
  --accent-soft:#e8f5f4;
  --bg:#f4f7f9;
  --surface:#fff;
  --border:#dce4e9;
  --text:#172f40;
  --muted:#5d6e7d;
  --success:#246541;
  --warning:#946019;
  --danger:#b4333b;
  --info:#285f96;
  --radius:12px;
  --shadow:0 2px 6px #102b3e05;
  --sidebar:242px;
  --font:Inter,'Noto Sans Arabic',system-ui,sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.65
}

html[lang=ar] {
  --font:'Noto Sans Arabic',Inter,system-ui,sans-serif
}

a {
  color:var(--accent);
  text-decoration:none
}

a:hover {
  text-decoration:underline
}

button,input,select,textarea {
  font:inherit
}

button,a,input,summary,dialog {
  -webkit-tap-highlight-color:transparent
}

button,summary {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed
}

button {
  color:inherit
}

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #138caa;
  outline-offset:4px
}

input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #b5e2e8;
  outline-offset:1px;
  border-color:var(--accent)
}

[hidden] {
  display:none!important
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  inset-block-start:8px;
  inset-inline-start:8px;
  transform:translateY(-180%);
  padding:10px 20px;
  background:white;
  z-index:100;
  border:2px solid var(--accent);
  border-radius:6px
}

.skip-link:focus {
  transform:none
}

.icon {
  flex-shrink:0;
  vertical-align:middle
}

h1,h2,h3,p {
  margin-block-start:0
}

h1 {
  font-size:29px;
  line-height:1.35;
  letter-spacing:-1px;
  font-weight:650;
  margin-block-end:10px
}

h2 {
  font-size:15px;
  font-weight:650;
  margin-block-end:0
}

h3 {
  font-size:14px;
  margin-block-end:7px
}

html[lang=ar] h1,html[lang=ar] .eyebrow {
  letter-spacing:0
}

.muted {
  color:var(--muted)
}

.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:var(--accent);
  margin-block-end:12px
}

.button {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:7px;
  padding:10px 18px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:14px;
  line-height:1.5
}

.button:hover {
  background:#06696c;
  text-decoration:none
}

.button:disabled {
  background:#e4e9ed;
  color:#647581
}

.button-secondary {
  background:#fff;
  border-color:var(--border);
  color:var(--text)
}

.button-secondary:hover {
  background:var(--bg)
}

.button-quiet {
  background:transparent;
  color:var(--muted);
  padding:7px 10px;
  font-size:12px
}

.button-quiet:hover {
  background:#edf3f5;
  color:var(--text)
}

.button-wide {
  width:100%;
  justify-content:space-between
}

.badge {
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:600;
  padding:3px 9px;
  border-radius:5px;
  background:#edf1f4;
  color:#4a5d6e;
  white-space:nowrap
}

.badge-info {
  color:var(--info);
  background:#e8f1fa
}

.badge-success {
  color:var(--success);
  background:#e9f3eb
}

.badge-warning {
  color:var(--warning);
  background:#fcf2df
}

.badge-danger {
  color:var(--danger);
  background:#fbecee
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  color:inherit
}

.brand:hover {
  text-decoration:none
}

.brand img {
  flex-shrink:0
}

.brand-copy {
  display:flex;
  flex-direction:column;
  min-width:0
}

.brand strong {
  font-size:15px;
  letter-spacing:1.2px;
  line-height:1.5;
  font-weight:650
}

.brand small {
  font-size:12px;
  opacity:.7;
  white-space:nowrap
}

.notice {
  display:flex;
  gap:12px;
  padding:15px 18px;
  background:var(--accent-soft);
  border:1px solid #c7e6e3;
  border-radius:8px;
  margin-block-end:20px;
  font-size:13px
}

.notice>.icon {
  margin-block-start:2px
}

.notice p {
  margin:3px 0 0
}

.notice-error {
  background:#fdf1f1;
  color:#902830;
  border-color:#e9bfc2
}

.notice-success {
  background:#eff9f1;
  color:#246541;
  border-color:#bedfc7
}

.form-errors:focus {
  outline:2px solid var(--danger);
  outline-offset:3px
}

/* Authentication */
.auth-page {
  background:white
}

.auth-shell {
  min-height:100svh;
  display:grid;
  grid-template-columns:46% 54%
}

.auth-visual {
  position:relative;
  overflow:hidden;
  background:var(--navy-deep);
  color:white;
  display:flex;
  flex-direction:column;
  padding:48px 11%;
  min-height:760px
}

.auth-visual:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none
}

.auth-visual>* {
  position:relative
}

.auth-story {
  margin-block-start:90px;
  z-index:1
}

.auth-story .eyebrow {
  color:#70c5c3;
  font-size:12px
}

.auth-story h2 {
  font-size:clamp(26px,2.6vw,42px);
  line-height:1.35;
  letter-spacing:-1px;
  font-weight:550;
  margin-block-end:22px
}

.auth-story h2 span {
  color:#75c6c3
}

.auth-story>p:last-child {
  font-size:13px;
  line-height:1.9;
  color:#b7c9d5;
  max-width:340px
}

.signal-art {
  height:270px;
  min-height:210px;
  position:relative;
  margin:0 -10%;
  flex:1;
  max-height:380px;
  direction:ltr
}

.signal-ring {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid #3b788153;
  border-radius:50%
}

.ring-one {
  width:160px;
  height:160px
}

.ring-two {
  width:255px;
  height:255px
}

.ring-three {
  width:350px;
  height:350px;
  border-style:dashed;
  opacity:.55
}

.signal-center {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  background:#113e4b;
  border:1px solid #398080;
  border-radius:16px;
  box-shadow:0 0 70px #24a4a41c;
  color:#75cfca
}

.signal-center .icon {
  width:30px;
  height:30px
}

.signal-point {
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#62b5b6;
  box-shadow:0 0 0 6px #338f9122
}

.point-one {
  left:calc(50% + 107px);
  top:calc(50% - 67px)
}

.point-two {
  left:calc(50% - 75px);
  top:calc(50% - 28px)
}

.point-three {
  left:calc(50% - 43px);
  top:calc(50% + 116px)
}

.signal-line {
  position:absolute;
  height:1px;
  width:80px;
  background:linear-gradient(90deg,transparent,#428e9290);
  left:50%;
  top:50%;
  transform-origin:left center
}

.line-one {
  transform:rotate(-30deg)
}

.line-two {
  transform:rotate(110deg)
}

.auth-visual-footer {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#a4bbc9;
  border-block-start:1px solid #ffffff12;
  padding-block-start:22px;
  margin-block-start:20px
}

.version {
  margin-inline-start:auto;
  font-size:12px;
  letter-spacing:2px
}

.auth-main {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:30px 9%
}

.auth-tools {
  display:flex;
  justify-content:flex-end
}

.auth-content {
  width:100%;
  max-width:370px;
  margin:auto;
  outline:none;
  padding-block:48px
}

.auth-heading {
  margin-block-end:32px
}

.auth-heading h1 {
  font-size:30px;
  margin-block-end:8px
}

.auth-heading>p:last-child {
  color:var(--muted);
  font-size:13px;
  margin-block-end:0
}

.auth-symbol {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid #d3eae7;
  border-radius:11px;
  margin-block-end:28px
}

.auth-heading .eyebrow {
  font-size:12px;
  margin-block-end:10px
}

.form-field {
  margin-block-end:20px
}

.form-field label {
  display:block;
  font-size:14px;
  font-weight:600;
  margin-block-end:8px
}

.form-field input,.form-field select,.form-field textarea {
  width:100%;
  min-height:48px;
  border:1px solid #cbd7de;
  border-radius:7px;
  background:#fff;
  padding:11px 13px;
  font-size:16px;
  color:var(--text)
}

.form-field input[aria-invalid=true] {
  border-color:var(--danger)
}

.input-wrap {
  position:relative
}

.input-wrap:has(.password-toggle:not([hidden])) input {
  padding-inline-end:76px
}

.password-toggle {
  position:absolute;
  inset-inline-end:5px;
  inset-block-start:3px;
  min-height:40px;
  border:0;
  background:transparent;
  padding:7px 10px;
  color:var(--muted);
  font-size:12px;
  font-weight:600
}

.password-toggle:hover {
  color:var(--accent)
}

.form-support {
  display:flex;
  justify-content:flex-end;
  margin-block:-4px 25px;
  font-size:12px;
  font-weight:550
}

.auth-help {
  font-size:12px;
  text-align:center;
  color:var(--muted);
  margin-block:25px 0
}

.auth-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  color:var(--muted);
  border-block-start:1px solid var(--border);
  padding-block-start:20px
}

.auth-footer span:first-child {
  letter-spacing:1.5px
}

.help-text {
  color:var(--muted);
  font-size:12px;
  margin-block-start:8px
}

.help-text ul {
  padding-inline-start:20px;
  margin-block:0
}

.errorlist {
  color:var(--danger);
  font-size:12px;
  padding-inline-start:18px;
  margin-block:7px 0
}

.back-link {
  display:block;
  text-align:center;
  margin-block-start:24px;
  font-size:13px
}

.spinner {
  width:17px;
  height:17px;
  border:2px solid #ffffff60;
  border-block-start-color:white;
  border-radius:50%;
  animation:spin 1s linear infinite
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

/* Workspace */
.app-shell {
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:100svh
}

.sidebar {
  background:var(--navy-deep);
  color:#c4d2db;
  display:flex;
  flex-direction:column;
  position:sticky;
  inset-block-start:0;
  height:100svh;
  overflow-y:auto
}

.sidebar-brand {
  padding:26px 22px;
  border-block-end:1px solid #ffffff0c;
  color:#fff
}

.primary-nav {
  padding:25px 15px
}

.nav-heading {
  font-size:12px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  color:#93a9b8;
  margin:0 13px 13px
}

.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding:10px 14px;
  margin-block-end:5px;
  border-radius:7px;
  font-size:12px;
  color:#c4d2db
}

.nav-item:hover {
  text-decoration:none
}

.nav-item.active {
  color:#fff;
  background:#194252;
  box-shadow:inset 3px 0 #4cb9b3
}

.nav-item.active .icon {
  color:#78d4cd
}

[dir=rtl] .nav-item.active {
  box-shadow:inset -3px 0 #4cb9b3
}

.nav-item.unavailable {
  color:#96abba
}

.nav-tag {
  font-size:12px;
  border:1px solid #536977;
  border-radius:4px;
  padding:1px 5px;
  margin-inline-start:auto
}

.future-heading {
  margin-block-start:34px
}

.sidebar-bottom {
  padding:20px;
  margin-block-start:auto
}

.sidebar-note {
  display:flex;
  gap:10px;
  padding:14px 12px;
  border:1px solid #ffffff14;
  background:#ffffff03;
  border-radius:8px
}

.sidebar-note .icon {
  color:#6eabae;
  margin-block-start:2px
}

.sidebar-note strong {
  font-size:12px;
  color:#d4e0e7;
  font-weight:500
}

.sidebar-note p {
  font-size:12px;
  line-height:1.7;
  color:#97adbd;
  margin:5px 0 0
}

.sidebar-version {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#a4b7c4;
  margin-block-start:25px
}

.sidebar-version b {
  font-weight:400
}

.app-body {
  min-width:0;
  display:flex;
  flex-direction:column
}

.topbar {
  min-height:78px;
  padding:14px 30px;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--surface);
  border-block-end:1px solid var(--border)
}

.icon-button {
  display:grid;
  place-items:center;
  width:38px;
  min-height:40px;
  background:transparent;
  border:1px solid transparent;
  border-radius:7px
}

.icon-button:hover:not(:disabled) {
  background:var(--bg)
}

.icon-button:disabled {
  color:#81909a
}

.topbar-context {
  font-size:12px;
  color:var(--muted);
  white-space:nowrap
}

.topbar-search {
  max-width:330px;
  min-width:0;
  margin-inline-start:12px;
  flex:1
}

.search-field {
  position:relative;
  display:flex;
  align-items:center
}

.search-field>.icon {
  position:absolute;
  inset-inline-start:12px;
  width:16px;
  color:var(--muted)
}

.search-field input {
  width:100%;
  min-height:38px;
  background:#f7f9fa;
  border:1px solid #e4eaee;
  border-radius:7px;
  padding:8px 12px;
  padding-inline-start:38px;
  color:var(--muted);
  font-size:12px
}

.search-field input:disabled {
  cursor:not-allowed;
  opacity:1;
  -webkit-text-fill-color:var(--muted)
}

.topbar-actions {
  display:flex;
  align-items:center;
  gap:14px;
  margin-inline-start:auto
}

.user-menu {
  position:relative
}

.user-menu summary {
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none
}

.user-menu summary::-webkit-details-marker {
  display:none
}

.avatar {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:34px;
  height:34px;
  background:#eaf1f4;
  border:1px solid #d8e3e9;
  border-radius:50%;
  color:#34566b;
  font-size:12px;
  font-weight:600
}

.user-name {
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  font-weight:500
}

.menu-caret {
  color:var(--muted)
}

.user-dropdown {
  position:absolute;
  inset-inline-end:0;
  inset-block-start:calc(100% + 15px);
  background:white;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 25px #102b3e20;
  z-index:20;
  width:250px;
  padding:8px
}

.user-identity {
  border-block-end:1px solid var(--border);
  padding:8px 10px 14px;
  margin-block-end:5px;
  overflow-wrap:anywhere
}

.user-identity small {
  display:block;
  color:var(--muted);
  font-size:12px
}

.user-dropdown a,.user-dropdown button {
  display:block;
  width:100%;
  padding:10px;
  text-align:start;
  font-size:12px;
  border:0;
  background:none;
  border-radius:5px;
  color:var(--text)
}

.user-dropdown a:hover,.user-dropdown button:hover {
  background:var(--bg);
  text-decoration:none
}

.main-content {
  padding:24px 32px 32px;
  max-width:1560px;
  width:100%;
  margin-inline:auto;
  outline:none
}

.breadcrumbs {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  margin-block-end:26px
}

.breadcrumbs a {
  color:var(--muted)
}

.breadcrumbs>.icon {
  width:11px;
  height:11px
}

.breadcrumbs [aria-current] {
  color:var(--text);
  font-weight:500
}

.page-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-block-end:26px
}

.page-header .eyebrow {
  font-size:12px;
  margin-block-end:8px
}

.page-header .muted {
  font-size:14px;
  margin:0
}

.page-meta {
  display:flex;
  flex-direction:column;
  text-align:end;
  font-size:12px;
  color:var(--muted);
  flex-shrink:0;
  max-width:35%;
  overflow-wrap:anywhere
}

.page-meta strong {
  color:var(--text);
  font-size:12px;
  font-weight:550;
  margin-block-end:4px
}

.workspace-notice {
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 19px;
  background:#eaf4f4;
  border:1px solid #cde4e3;
  border-radius:9px;
  margin-block-end:25px;
  color:#345d65
}

.workspace-notice>.icon {
  color:var(--accent)
}

.workspace-notice strong {
  font-size:12px;
  font-weight:600
}

.workspace-notice p {
  font-size:12px;
  margin:3px 0 0;
  line-height:1.7
}

.workspace-notice .badge {
  margin-inline-start:auto
}

.summary-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-block-end:24px
}

.summary-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow)
}

.summary-card>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px
}

.summary-card h2 {
  font-size:12px;
  font-weight:550;
  color:var(--muted)
}

.summary-symbol {
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:7px;
  background:#f2f6f8;
  color:#6f8390
}

.summary-symbol>.icon {
  width:15px
}

.metric {
  font-size:30px;
  font-weight:500;
  line-height:1.4;
  margin:15px 0 6px;
  color:#657b8b
}

.metric-caption {
  font-size:12px;
  color:var(--muted);
  margin:0
}

.dashboard-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px
}

.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-width:0;
  overflow:hidden
}

.recent-card {
  grid-column:span 2
}

.incident-workspace-body { padding:22px; }
.incident-workspace-actions { display:flex; flex-wrap:wrap; gap:12px; margin-block:18px; }

.card-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:19px 22px;
  border-block-end:1px solid #edf1f4
}

.card-heading h2 {
  font-size:12px;
  font-weight:600
}

.card-heading p {
  color:var(--muted);
  font-size:12px;
  margin:3px 0 0
}

.card-heading>.icon {
  width:16px;
  color:#758a97
}

.table-preview {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:16px;
  padding:11px 24px;
  background:#fafbfc;
  border-block-end:1px solid #edf1f4;
  color:var(--muted);
  font-size:12px
}

.empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:34px 24px;
  min-height:225px
}

.empty-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  background:#f2f6f8;
  border:1px solid #e5ecf0;
  color:#718896;
  margin-block-end:15px;
  box-shadow:0 3px 0 #f9fbfc
}

.empty-state h3 {
  font-size:16px;
  font-weight:550
}

.empty-state p {
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  max-width:310px;
  margin:0
}

.empty-state-compact {
  min-height:220px;
  padding:24px 20px
}

.card-footer {
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  background:#fcfdfe;
  border-block-start:1px solid #edf1f4;
  color:var(--muted);
  font-size:12px
}

.card-footer>.icon {
  width:12px;
  height:12px
}

.priority-list {
  margin:8px 22px 0
}

.priority-list>div {
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-block-end:1px solid #edf1f4;
  font-size:12px
}

.priority-list>div:last-child {
  border:0
}

.priority-list dt {
  display:flex;
  align-items:center;
  gap:10px
}

.priority-list dd {
  margin:0;
  color:var(--muted)
}

.priority-dot {
  width:6px;
  height:6px;
  border-radius:50%
}

.priority-1 {
  background:var(--danger)
}

.priority-2 {
  background:#ac7827
}

.priority-3 {
  background:#54839a
}

.priority-4 {
  background:#79948a
}

.card-caption {
  font-size:12px;
  color:var(--muted);
  margin:11px 22px 18px
}

.system-notice {
  display:flex;
  align-items:center;
  gap:15px;
  margin-block-start:24px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:9px
}

.system-notice-icon {
  color:#6e8492
}

.system-notice h2 {
  font-size:12px;
  margin-block-end:3px
}

.system-notice p {
  font-size:12px;
  color:var(--muted);
  margin:0
}

.workspace-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-block-start:1px solid var(--border);
  padding:15px 32px;
  color:var(--muted);
  font-size:12px;
  margin-block-start:auto
}

.workspace-footer span span {
  margin:0 10px
}

.account-card {
  padding:30px;
  max-width:620px
}

.account-card>p {
  color:var(--muted);
  margin-block:16px 25px
}

.table-scroll {
  overflow-x:auto
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:14px
}

th,td {
  text-align:start;
  padding:12px 18px;
  border-block-end:1px solid var(--border)
}

th {
  background:var(--bg);
  font-weight:600
}

.pagination,.dialog-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px
}

.confirmation {
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  max-width:440px;
  width:calc(100% - 32px);
  color:var(--text)
}

.confirmation::backdrop {
  background:#102b3e88
}

.confirmation h2 {
  margin-block-end:12px
}

.confirmation .dialog-actions {
  padding:10px 0 0
}

[dir=rtl] .breadcrumbs>.icon,[dir=rtl] [data-submit]>.icon {
  transform:scaleX(-1)
}

/* Collapsed navigation remains accessible by its labels and titles. */
@media(min-width:1001px) {
  .nav-collapsed {
    --sidebar:78px
  }
  .nav-collapsed .sidebar-brand {
    padding:26px 20px
  }
  .nav-collapsed .brand-copy,.nav-collapsed .nav-label,.nav-collapsed .nav-tag,.nav-collapsed .sidebar-bottom,.nav-collapsed .nav-heading {
    display:none
  }
  .nav-collapsed .primary-nav {
    padding:25px 12px
  }
  .nav-collapsed .nav-item {
    justify-content:center;
    padding:12px
  }
  .nav-collapsed .future-heading+.nav-item {
    margin-block-start:28px
  }
  .nav-collapsed .nav-item[aria-current] {
    position:relative
  }
}

@media(max-width:1200px) {
  .topbar-context {
    display:none
  }
  .topbar-search {
    margin-inline-start:0
  }
  .main-content {
    padding-inline:24px
  }
  .page-header h1 {
    font-size:25px
  }
  .summary-grid {
    gap:12px
  }
  .summary-card {
    padding:16px
  }
  .dashboard-grid {
    gap:16px
  }
  .auth-visual {
    padding-inline:9%
  }
  .auth-main {
    padding-inline:10%
  }
}

@media(max-width:1000px) {
  .app-shell {
    --sidebar:200px
  }
  .sidebar-brand {
    padding-inline:17px
  }
  .brand strong {
    font-size:13px
  }
  .sidebar-brand .brand {
    gap:8px
  }
  .sidebar-brand .brand img {
    width:32px;
    height:32px
  }
  .brand small {
    font-size:12px
  }
  .nav-item {
    padding-inline:10px
  }
  .summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .dashboard-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .recent-card {
    grid-column:span 2
  }
  .dashboard-grid>.card:last-child {
    grid-column:span 2
  }
  .page-header {
    align-items:flex-start;
    flex-direction:column;
    gap:12px
  }
  .page-meta {
    text-align:start;
    max-width:100%
  }
  .topbar {
    padding-inline:20px;
    gap:12px
  }
  .topbar-actions {
    gap:6px
  }
  .user-name {
    display:none
  }
  .auth-story h2 {
    font-size:29px
  }
  .auth-visual {
    padding:36px 9%;
    min-height:700px
  }
  .auth-story {
    margin-block-start:75px
  }
  .signal-art {
    margin-inline:-20%
  }
}

@media(max-width:760px) {
  .app-shell {
    display:block
  }
  .sidebar {
    position:static;
    width:100%;
    height:auto
  }
  .sidebar-brand {
    padding:17px 22px
  }
  .primary-nav {
    padding:12px 18px
  }
  .sidebar-bottom {
    display:none
  }
  .sidebar .future-heading,.sidebar .future-heading~.nav-item {
    display:none
  }
  .primary-nav .nav-heading {
    display:none
  }
  .primary-nav .nav-item {
    display:inline-flex;
    margin:0 6px 0 0;
    min-width:145px
  }
  .js-enabled .sidebar {
    display:none
  }
  .js-enabled .nav-open .sidebar {
    display:block
  }
  .topbar {
    min-height:66px;
    padding:10px 18px
  }
  .topbar-search {
    display:none
  }
  .topbar-context {
    display:block;
    font-size:12px
  }
  .main-content {
    padding:20px 18px
  }
  .breadcrumbs {
    margin-block-end:20px
  }
  .page-header h1 {
    font-size:25px
  }
  .workspace-notice {
    align-items:flex-start;
    padding:14px;
    gap:10px
  }
  .workspace-notice .badge {
    display:none
  }
  .summary-grid {
    gap:12px
  }
  .summary-card {
    padding:15px
  }
  .dashboard-grid {
    grid-template-columns:minmax(0,1fr);
    gap:16px
  }
  .recent-card,.dashboard-grid>.card:last-child {
    grid-column:auto
  }
  .empty-state {
    min-height:200px
  }
  .card-heading {
    padding:17px 19px
  }
  .workspace-footer {
    padding:16px 18px;
    flex-wrap:wrap;
    font-size:12px
  }
  .account-card {
    padding:22px
  }
  .auth-shell {
    display:block
  }
  .auth-visual {
    min-height:0;
    padding:23px 25px
  }
  .auth-visual .brand strong {
    font-size:15px
  }
  .auth-story,.signal-art,.auth-visual-footer {
    display:none
  }
  .auth-main {
    min-height:calc(100svh - 84px);
    padding:16px 26px 22px
  }
  .auth-content {
    padding-block:30px 45px;
    max-width:400px
  }
  .auth-heading h1 {
    font-size:28px
  }
  .auth-symbol {
    margin-block-end:20px
  }
  .auth-heading {
    margin-block-end:25px
  }
  .auth-footer {
    padding-block-start:18px
  }
  .auth-tools {
    min-height:40px
  }
  .auth-help {
    font-size:12px
  }
}

@media(max-width:480px) {
  .topbar-context {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    scroll-behavior:auto!important
  }
}