:root { color-scheme: light; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; color: #202623; background: #f6f8f7; font-synthesis: none; --ink: #202623; --muted: #6d7772; --line: #e0e6e2; --primary: #18735e; --hover: #105a49; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; font-size: 14px; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; border: 1px solid var(--line); border-radius: 5px; padding: 8px 14px; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .button:hover { background: #f0f4f1; border-color: #c4d0c9; }
button:disabled { cursor: not-allowed; opacity: .43; }
button:disabled:hover { background: inherit; }
.primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.primary:hover { background: var(--hover); border-color: var(--hover); }
.secondary { font-weight: 500; }
.full { width: 100%; justify-content: space-between; }
.icon-button { width: 36px; height: 36px; min-height: 36px; padding: 8px; flex-shrink: 0; }
svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; }
input, select, textarea { border: 1px solid #cfd8d2; border-radius: 5px; background: #fff; color: var(--ink); padding: 9px 11px; min-height: 40px; max-width: 100%; }
input::placeholder, textarea::placeholder { color: #929c96; }
input:focus, select:focus, textarea:focus { outline: 2px solid #b0d7cb; outline-offset: 1px; border-color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
label { display: block; font-weight: 600; margin: 16px 0 6px; }
a { color: var(--primary); text-underline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 26px; line-height: 1.3; font-weight: 650; margin-bottom: 0; }
h2 { font-size: 16px; font-weight: 650; margin: 0; }
h3 { font-size: 16px; }
code, pre { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
code { overflow-wrap: anywhere; }
.small, small { font-size: 12px; color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 650; color: var(--muted); margin-bottom: 8px; }
.initial, .loading { padding: 50px; text-align: center; color: var(--muted); }
.auth-page { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px; background: #f5f7f6; border-top: 5px solid var(--primary); }
.auth-panel { width: 100%; max-width: 380px; }
.auth-brand { width: 66px; height: 54px; object-fit: cover; margin-bottom: 28px; border-radius: 4px; }
.auth-panel .eyebrow { color: #5f7167; font-size: 13px; }
.auth-panel h1 { font-size: 28px; margin-bottom: 30px; }
.auth-panel input { width: 100%; }
.password-field { position: relative; }
.password-field input { padding-right: 50px; }
.password-field .icon-button { position: absolute; right: 3px; top: 3px; border-color: transparent; background: transparent; }
.field-note { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.form-error { min-height: 24px; color: #b43f35; font-size: 13px; margin: 14px 0 8px; }
.auth-footer { font-size: 11px; color: #78837b; padding-top: 32px; margin: 0; display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 36px; }
.auth-footer span { color: #a1a9a4; }
.workspace { min-height: 100dvh; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { background: #252d29; color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 28px 16px 18px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 0 8px; margin-bottom: 38px; font-size: 19px; font-weight: 650; }
.brand img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; }
.brand small { display: block; color: #a7b7ad; font-size: 11px; font-weight: 400; }
.nav-label { font-size: 10px; color: #8fa398; margin: 0 12px 10px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #b6c4bb; min-height: 44px; padding: 10px 12px; border-radius: 5px; }
.sidebar nav a svg { color: #8fa398; }
.sidebar nav a:hover { color: #fff; background: #313c35; }
.sidebar nav a.active { color: #fff; background: #3c5146; }
.sidebar nav a.active svg { color: #b5dfc6; }
.sidebar-bottom { display: flex; align-items: center; gap: 10px; margin-top: auto; border-top: 1px solid #3b453f; padding-top: 20px; }
.owner-avatar { display: grid; place-items: center; width: 32px; height: 32px; font-size: 12px; background: #485b4e; border-radius: 4px; }
.sidebar-bottom strong { font-size: 12px; font-weight: 500; }
.sidebar-bottom small { display: block; color: #8fa398; font-size: 10px; }
.sidebar-bottom .icon-button { margin-left: auto; border-color: transparent; color: #b6c4bb; background: transparent; }
.sidebar-bottom .icon-button:hover { background: #3c5146; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 70px; min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 36px; background: #fff; border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: 12px; color: var(--muted); white-space: nowrap; }
.breadcrumb span { padding: 0 12px; color: #c0c8c3; }
.breadcrumb strong { color: var(--ink); font-weight: 500; }
.topbar-right { display: flex; gap: 10px; align-items: center; }
.topbar .icon-button { border-color: transparent; }
#mobile-logout { display: none; }
#main-content { padding: 32px 36px; width: 100%; max-width: 1600px; flex: 1; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.date-label { color: var(--muted); font-size: 12px; }
.tag { display: inline-block; vertical-align: middle; padding: 3px 8px; font-size: 11px; line-height: 1.6; color: #647269; background: #edf1ee; border: 1px solid #e1e8e3; border-radius: 3px; white-space: nowrap; }
.tag.green { color: #287250; background: #eaf4ee; border-color: #d5e8db; }
.tag.amber { color: #946a23; background: #faf2df; border-color: #ebdfc2; }
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 34px; padding: 24px 0; background: #fff; }
.summary-strip > div { display: flex; flex-direction: column; padding: 0 24px; border-right: 1px solid var(--line); min-width: 0; }
.summary-strip > div:first-child { padding-left: 20px; }
.summary-strip > div:last-child { border: 0; }
.summary-strip span { color: var(--muted); font-size: 12px; }
.summary-strip strong { font-size: 30px; font-weight: 600; line-height: 1.3; margin: 8px 0; font-variant-numeric: tabular-nums; }
.summary-strip small { font-size: 10px; overflow-wrap: anywhere; }
.section { margin-bottom: 34px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-heading a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; text-decoration: none; }
.section-heading a svg { width: 14px; height: 14px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.module-item { justify-content: flex-start; text-align: left; white-space: normal; min-height: 68px; padding: 15px 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; gap: 10px; }
.module-item:hover { background: #ecf2ee; border-color: var(--line); }
.module-item > span:not(.module-icon) { font-size: 12px; }
.module-item strong { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.module-item > svg { width: 14px; height: 14px; color: #97a39b; }
.module-icon { display: grid; place-items: center; width: 34px; height: 34px; min-width: 34px; border-radius: 4px; color: #4e7d65; background: #e5eee8; }
.tone-1 { color: #997745; background: #f3edde; }
.tone-2 { color: #6e7897; background: #e9ecf2; }
.tone-3 { color: #a16b5b; background: #f2e8e3; }
.table-scroll { width: 100%; overflow-x: auto; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: 12px; }
th { color: #7a877e; font-weight: 500; font-size: 11px; background: #f0f4f1; white-space: nowrap; padding: 11px 16px; border-bottom: 1px solid var(--line); }
td { padding: 14px 16px; border-bottom: 1px solid #edf0ee; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfb; }
td code { color: #77837a; font-size: 11px; }
td:first-child { max-width: 430px; }
.content-table td:first-child { width: 40%; }
.record-title { font-weight: 500; display: block; font-size: 12px; }
.arabic { font-family: "Noto Naskh Arabic", "Traditional Arabic", "Segoe UI", serif; font-size: 21px; line-height: 1.9; text-align: start; overflow-wrap: anywhere; margin: 0 0 4px; }
.arabic.large { font-size: 30px; padding: 12px 0; }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar select { width: 185px; font-size: 12px; }
.search-form { display: flex; align-items: center; background: #fff; border: 1px solid #cfd8d2; border-radius: 5px; width: 380px; max-width: 100%; }
.search-form > svg { margin-left: 12px; color: #8d9a91; width: 16px; }
.search-form input { min-width: 0; width: 100%; border: 0; background: transparent; font-size: 12px; }
.search-form .icon-button { width: 34px; height: 34px; min-height: 34px; margin-right: 2px; border-color: transparent; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; padding: 16px 0; }
.pagination > div { display: flex; align-items: center; gap: 16px; }
.pagination > div > span { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.empty { padding: 70px 20px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
.empty > svg { width: 34px; height: 34px; color: #8ba293; margin-bottom: 15px; }
.empty h3 { color: #4b5a50; font-size: 15px; margin-bottom: 8px; }
.empty p { font-size: 12px; max-width: 460px; margin: 0 auto; }
.empty + .button { display: flex; width: fit-content; margin: -44px auto 30px; }
.audio-player { display: flex; align-items: center; gap: 20px; padding: 12px 16px; background: #e9f2ed; margin-bottom: 18px; border-left: 3px solid var(--primary); }
.audio-player span { font-size: 12px; overflow-wrap: anywhere; }
.audio-player audio { height: 36px; max-width: 100%; }
.play-button { border-radius: 50%; color: var(--primary); background: #f0f6f2; border-color: #dbe9df; }
#draft-file { font-size: 12px; width: 275px; padding: 6px; }
#draft-text { display: block; width: 100%; min-height: 220px; font-family: Consolas, "Segoe UI", monospace; font-size: 13px; line-height: 1.7; resize: vertical; tab-size: 4; }
.form-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.validation { border-left: 3px solid #428966; background: #ebf4ee; padding: 14px 18px; margin-top: 18px; font-size: 12px; }
.validation p { margin: 5px 0 0; color: var(--muted); }
.validation.error { border-color: #bd5c4b; background: #fcf0ec; }
.validation ul { max-height: 200px; overflow: auto; padding-left: 20px; margin-bottom: 0; }
.filter-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.filter-tabs button { border: 0; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; padding: 10px 20px; color: var(--muted); font-size: 12px; }
.filter-tabs button.selected { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.feedback-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feedback-item { border: 1px solid var(--line); background: #fff; padding: 20px; border-radius: 5px; overflow-wrap: anywhere; }
.feedback-top, .feedback-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feedback-item > p { font-size: 13px; }
.feedback-item > p.arabic { font-size: 22px; }
.feedback-meta { color: var(--muted); font-size: 11px; flex-wrap: wrap; }
.feedback-item .secondary { font-size: 12px; }
.note { background: #f4f6f4; padding: 10px; color: #677569; }
.order-search { max-width: 620px; border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 30px; }
.order-search > div { display: flex; gap: 12px; }
.order-search input { flex: 1; min-width: 0; }
.facts { margin: 0; background: #fff; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); padding: 14px 18px; border-bottom: 1px solid var(--line); gap: 14px; }
.facts dt { color: var(--muted); font-size: 12px; }
.facts dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.workspace-footer { color: #96a098; font-size: 10px; margin: 0 36px; padding: 18px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
dialog { border: 1px solid var(--line); border-radius: 6px; padding: 0; width: 720px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); box-shadow: 0 20px 80px #16291b30; background: #fff; color: var(--ink); }
dialog::backdrop { background: #18271d70; }
.dialog-header { padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 1; }
.dialog-header h2 { overflow-wrap: anywhere; }
#detail-body { padding: 20px 24px; }
#detail-body pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f4f6f4; padding: 16px; line-height: 1.7; border-radius: 4px; max-height: 48dvh; overflow: auto; }
.detail-meta { display: flex; align-items: center; gap: 12px; }
#feedback-form select, #feedback-form textarea { width: 100%; display: block; }
#feedback-form .primary { margin-top: 20px; }
#toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: calc(100vw - 48px); background: #24593f; color: #fff; padding: 12px 18px; border-radius: 5px; font-size: 13px; box-shadow: 0 4px 24px #20302520; }
#toast.error { background: #9d4538; }
[hidden] { display: none !important; }
@media (min-width: 1600px) { #main-content { padding: 38px 48px; } .topbar { padding: 0 48px; } .module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .workspace { grid-template-columns: 190px minmax(0, 1fr); } #main-content { padding: 26px 24px; } .topbar { padding: 0 24px; } .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .summary-strip > div { padding: 0 14px; } .summary-strip strong { font-size: 26px; } .feedback-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .workspace { display: block; }
  .sidebar { height: auto; position: static; padding: 14px 16px 0; }
  .brand { margin-bottom: 12px; padding: 0; font-size: 17px; }
  .brand img { width: 34px; height: 34px; }
  .brand small { font-size: 10px; }
  .nav-label, .sidebar-bottom { display: none; }
  .sidebar nav { flex-direction: row; overflow: auto; gap: 4px; margin: 0 -16px; padding: 0 12px 10px; }
  .sidebar nav a { font-size: 12px; flex-shrink: 0; min-height: 38px; padding: 8px 10px; gap: 6px; }
  .sidebar nav a svg { width: 15px; height: 15px; }
  .topbar { height: 56px; min-height: 56px; padding: 0 18px; gap: 10px; }
  .topbar-right { gap: 5px; }
  #mobile-logout { display: inline-flex; }
  .topbar-right > .tag:first-child { display: none; }
  .breadcrumb { font-size: 11px; }
  .breadcrumb span { padding: 0 6px; }
  #main-content { padding: 24px 18px; }
  h1 { font-size: 23px; }
  .page-heading { align-items: flex-start; margin-bottom: 22px; }
  .date-label { font-size: 10px; max-width: 150px; text-align: right; }
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 0; row-gap: 22px; }
  .summary-strip > div { padding: 0 16px !important; }
  .summary-strip > div:nth-child(2) { border: 0; }
  .summary-strip strong { font-size: 28px; }
  .module-grid { grid-template-columns: 1fr; }
  .module-item { min-height: 62px; }
  .module-item > span:not(.module-icon) { font-size: 13px; }
  .toolbar { gap: 10px; }
  .toolbar select { width: 100%; }
  .search-form { width: 100%; }
  th, td { padding: 12px; }
  table { min-width: 640px; }
  .arabic { font-size: 22px; }
  .audio-player { flex-direction: column; gap: 8px; align-items: flex-start; }
  #draft-file { width: 100%; }
  .facts > div { grid-template-columns: 100px minmax(0, 1fr); padding: 12px; gap: 8px; }
  .facts dd code { font-size: 11px; }
  .workspace-footer { margin: 0 18px; }
  dialog { max-height: calc(100dvh - 24px); }
  .dialog-header { padding: 14px 16px; }
  #detail-body { padding: 16px; }
}