/* Smart Link Hub — local assets only. */
:root {
  color-scheme: light;
  --ink: #19312e;
  --ink-soft: #475b56;
  --muted: #7b8982;
  --paper: #f5f6f2;
  --surface: #ffffff;
  --line: #e4e9e2;
  --line-strong: #d4ddd3;
  --navy: #11282c;
  --navy-deep: #0c2025;
  --green: #16856a;
  --green-dark: #106a54;
  --green-pale: #e8f5ed;
  --red: #be4b46;
  --amber: #ac7c2a;
  --radius: 14px;
  --shadow: 0 8px 28px #18382c06;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.65; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #75bca4; outline-offset: 3px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #64aa92; box-shadow: 0 0 0 3px #16856a12; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex: 0 0 auto; }
textarea { resize: vertical; min-height: 112px; }
svg { width: 20px; height: 20px; vertical-align: middle; flex: 0 0 auto; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
::selection { background: #cce9d9; color: #153e30; }
.hidden, [hidden] { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: "Consolas", "SFMono-Regular", monospace; direction: ltr; unicode-bidi: isolate; font-size: .91em; letter-spacing: -.015em; }
.positive { color: var(--green-dark); }
.negative { color: var(--red); }

/* Application frame */
.app-shell { display: flex; min-height: 100vh; direction: ltr; }
.sidebar { width: 248px; flex: 0 0 248px; background: var(--navy); color: #afc0b9; padding: 28px 17px 16px; position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; flex-direction: column; direction: rtl; border-right: 1px solid #ffffff06; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 29px; direction: ltr; text-decoration: none !important; }
.brand-mark { height: 39px; width: 39px; flex: 0 0 39px; border-radius: 12px; color: #e7fbeb; background: #25876a; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #ffffff16; }
.brand-mark svg { width: 24px; height: 24px; }
.brand-word { color: #f2f7ef; font-size: 19px; font-weight: 650; line-height: 1.25; letter-spacing: -.6px; white-space: nowrap; }
.brand-caption { font-size: 9px; letter-spacing: 2.1px; font-weight: 600; color: #8cab9f; text-transform: uppercase; display: block; margin-top: 4px; }
.sidebar-label { font-size: 10px; font-weight: 650; color: #779489; letter-spacing: 1.6px; text-transform: uppercase; margin: 23px 12px 10px; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.nav-button { width: 100%; background: none; color: #b3c5bd; border: 0; border-radius: 8px; display: flex; align-items: center; text-align: start; gap: 12px; min-height: 44px; padding: 10px 13px; font-size: 13px; font-weight: 500; transition: color .15s, background .15s; }
.nav-button:hover { background: #ffffff06; color: #f1f8f1; }
.nav-button.active { background: #28463f; color: #e5f7e5; box-shadow: inset 0 0 0 1px #688b671c; }
.nav-icon { display: grid; place-items: center; color: #7faaa0; width: 21px; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-button.active .nav-icon { color: #a6d8af; }
.nav-count { margin-inline-start: auto; font-size: 10px; padding: 1px 6px; min-width: 20px; text-align: center; color: #b8d3c6; background: #ffffff0a; border-radius: 5px; direction: ltr; }
.sidebar-footer { margin-top: auto; padding-top: 30px; }
.sidebar-footer .notice { background: #ffffff05; color: #92ada0; border: 1px solid #ffffff09; padding: 13px; font-size: 11px; line-height: 1.9; }
.user-chip { display: flex; align-items: center; gap: 10px; border-top: 1px solid #ffffff0b; margin-top: 18px; padding: 17px 4px 2px; }
.avatar { display: grid; place-items: center; height: 35px; width: 35px; flex: 0 0 35px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #446b53; background: #edf1da; direction: ltr; }
.user-name { color: #e0ece1; font-size: 12px; font-weight: 600; }
.user-role { font-size: 10px; color: #88a093; margin-top: 1px; }
.user-chip .icon-button { margin-inline-start: auto; color: #95b0a3; }
.main { min-width: 0; flex: 1; margin-left: 248px; direction: rtl; }
.topbar { height: 78px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fafbf8; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; gap: 10px; align-items: center; color: #96a198; font-size: 11px; }
.breadcrumb span:last-child { color: var(--ink-soft); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.connection-status { display: flex; align-items: center; gap: 7px; color: #6e8276; font-size: 11px; white-space: nowrap; }
.connection-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: #74aa76; box-shadow: 0 0 0 3px #74aa760c; }
.connection-status.offline { color: var(--red); }
.connection-status.offline .connection-dot { background: var(--red); box-shadow: none; }
.icon-button { width: 33px; height: 33px; border: 0; border-radius: 8px; background: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 6px; color: #829085; flex: 0 0 auto; }
.icon-button:hover { color: var(--ink); background: #e9eee7; }
.icon-button svg { width: 18px; height: 18px; }
.mobile-menu { display: none; }
.page { padding: 34px 40px 50px; max-width: 1680px; margin-inline: auto; }
.page-heading { margin-bottom: 26px; }
.eyebrow { color: var(--green); font-size: 10px; letter-spacing: 1.7px; text-transform: uppercase; font-weight: 700; margin-bottom: 9px; direction: ltr; text-align: right; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-title { font-size: 28px; font-weight: 650; line-height: 1.5; margin: 0; color: #1c3530; letter-spacing: -.7px; }
.page-subtitle { margin: 7px 0 0; color: #809084; font-size: 12px; line-height: 1.9; }
.page-heading .heading-row > div:last-child, .heading-actions { display: flex; align-items: center; gap: 9px; }

/* Buttons and controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 9px 16px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.5; text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.button svg { width: 16px; height: 16px; }
.button.primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 2px 3px #12553e09; }
.button.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.button.secondary { background: #fff; color: var(--ink-soft); border-color: var(--line-strong); }
.button.secondary:hover { background: #f4f7f0; border-color: #bbcbbd; }
.button.danger { background: #fff4f1; color: #b14b46; border-color: #efd5cf; }
.button.danger:hover { background: #fde6e1; }
.button.text { background: transparent; color: var(--green-dark); padding-inline: 8px; }
.button.text:hover { background: var(--green-pale); }
.button.small { min-height: 30px; padding: 6px 10px; font-size: 10px; gap: 5px; border-radius: 6px; }
.button.full { width: 100%; }
.button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: translateY(1px); }
.input, .field input:not([type="checkbox"]):not([type="file"]), .field select, .field textarea, .status-select { width: 100%; min-height: 42px; background: #fff; border: 1px solid #dce4da; border-radius: 8px; color: #2a4137; padding: 9px 12px; font-size: 12px; transition: box-shadow .15s, border-color .15s; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: #a1ada2; opacity: 1; }
.field input[type="number"], .field input[type="date"], .field input[type="url"], .field input[type="password"] { direction: ltr; text-align: left; }
.field input[type="date"] { color-scheme: light; }
.field select { appearance: auto; padding-inline-end: 9px; }
.status-select { min-height: 31px; font-size: 10px; padding: 4px 7px; width: auto; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 25px 0 20px; }
.search-field { position: relative; display: flex; align-items: center; min-width: 220px; width: 300px; }
.search-field svg { position: absolute; right: 13px; width: 16px; height: 16px; color: #899b8d; pointer-events: none; }
.search-field .input { padding-right: 39px; background: #fff; min-height: 39px; font-size: 11px; }
.filter-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chip { border: 1px solid transparent; background: transparent; color: #8b978d; padding: 6px 11px; border-radius: 7px; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.chip:hover { background: #e9eee5; color: #4d6657; }
.chip.active { background: #e7eee1; color: #4a7253; border-color: #dce7d5; font-weight: 600; }
.record-count { color: #8b9a8b; font-size: 10px; margin-inline-start: 7px; }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin: 25px 0 29px; }
.stat-card { position: relative; border: 1px solid var(--line); background: var(--surface); border-radius: 11px; padding: 19px 20px 17px; min-height: 116px; box-shadow: var(--shadow); overflow: hidden; }
.stat-icon { position: absolute; inset: 18px auto auto 18px; width: 32px; height: 32px; background: #f1f5e9; color: #7a9870; display: grid; place-items: center; border-radius: 8px; }
.stat-icon svg { width: 17px; height: 17px; }
.stat-label { font-size: 11px; color: #7f8c80; margin-bottom: 8px; }
.stat-value { color: #274535; font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -.8px; direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.stat-note { color: #91a08e; font-size: 9px; margin-top: 8px; }
.finance-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 16px 0 25px; }
.finance-summary .stat-card { min-height: 97px; padding: 15px 17px; }
.finance-summary .stat-value { font-size: 23px; }

/* Projects */
.projects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.project-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: var(--shadow); transition: border-color .2s, transform .2s, box-shadow .2s; min-width: 0; text-align: start; padding: 0; }
button.project-card { cursor: pointer; color: inherit; font: inherit; display: block; width: 100%; }
.project-card:hover { border-color: #bfd0bd; box-shadow: 0 8px 24px #153c2410; transform: translateY(-2px); }
.project-cover { --project-color: #6e8b61; position: relative; isolation: isolate; height: 138px; background: color-mix(in srgb, var(--project-color) 12%, #f6f7ef); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--project-color); }
.project-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .19; background-image: radial-gradient(currentColor .7px, transparent .7px); background-size: 16px 16px; mask-image: linear-gradient(90deg, #0002, #000, #0002); }
.project-cover::after { content: ""; position: absolute; width: 250px; height: 250px; border: 1px solid currentColor; opacity: .09; border-radius: 50%; transform: translate(75px, 30px); z-index: -1; box-shadow: 0 0 0 31px #fff3, 0 0 0 32px currentColor; }
.project-cover-icon { display: grid; place-items: center; width: 59px; height: 59px; border-radius: 17px; background: #ffffff83; box-shadow: 0 4px 10px #3d5c3110, inset 0 0 0 1px #ffffff91; transform: rotate(-7deg); }
.project-cover-icon svg { width: 30px; height: 30px; transform: rotate(7deg); }
.project-cover-grid { position: absolute; inset: 0; display: grid; place-items: center; }
.project-body { padding: 18px 20px 15px; }
.project-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8d9a8e; font-size: 9px; margin-bottom: 7px; }
.project-name { color: #274331; font-size: 15px; line-height: 1.6; font-weight: 650; margin: 0 0 5px; overflow-wrap: anywhere; }
.project-description { margin: 0; color: #8b978a; font-size: 10px; line-height: 1.9; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-footer { border-top: 1px solid #edf0e8; padding-top: 12px; margin-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 9px; font-size: 9px; color: #8a9a89; }
.project-footer svg { width: 13px; height: 13px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 5px; background: #eef4e9; color: #6a8c59; font-size: 9px; line-height: 1.5; font-weight: 500; white-space: nowrap; vertical-align: middle; }
.badge svg { width: 11px; height: 11px; }
.badge.warning, .badge.progress { background: #fbf2de; color: #ac853c; }
.badge.error, .badge.inactive, .badge.overdue { background: #fbece7; color: #bf7667; }
.badge.neutral, .badge.todo { background: #eff1ee; color: #899086; }
.badge.done, .badge.active, .badge.success { background: #eaf5e8; color: #6c9661; }
.empty-state { padding: 58px 25px; text-align: center; border: 1px dashed #d7e1d2; border-radius: 13px; background: #fafcf7; color: #8b9b87; }
.empty-state h2, .empty-state h3 { color: #3f6044; margin: 17px 0 8px; font-size: 18px; font-weight: 600; }
.empty-state p { font-size: 12px; max-width: 460px; margin: 0 auto 23px; line-height: 2; }
.empty-icon { display: grid; place-items: center; margin: 0 auto; height: 65px; width: 65px; border-radius: 19px; background: #ebf2e3; color: #89a479; }
.empty-icon svg { height: 30px; width: 30px; }

/* Tables and project content */
.tabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); margin: 24px 0; overflow-x: auto; scrollbar-width: thin; }
.tab { border: 0; background: transparent; color: #889889; font-size: 12px; font-weight: 500; min-height: 43px; padding: 7px 2px 12px; position: relative; white-space: nowrap; }
.tab.active { color: var(--green-dark); font-weight: 650; }
.tab.active::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: var(--green); border-radius: 3px; }
.tab:hover { color: var(--green); }
.panel, .table-card, .settings-card { background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.panel, .settings-card { padding: 22px; }
.table-card { overflow: hidden; }
.table-scroll { overflow: auto; width: 100%; scrollbar-width: thin; scrollbar-color: #cfdbcb transparent; }
.data-table { width: 100%; border-collapse: collapse; text-align: start; font-size: 11px; white-space: nowrap; }
.data-table th { padding: 13px 18px; color: #899a87; background: #fafbf7; font-size: 9px; font-weight: 550; border-bottom: 1px solid var(--line); text-align: start; }
.data-table td { padding: 14px 18px; border-bottom: 1px solid #edf1e8; color: #5d735d; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafcf7; }
.data-table td .button { margin: 0 2px; }
.data-table .ledger-amount { color: #385f3b; font-weight: 600; }
.record-title { font-size: 12px; font-weight: 600; color: #3a583b; line-height: 1.6; }
button.record-title { background: none; border: 0; padding: 0; text-align: start; }
button.record-title:hover { color: var(--green); text-decoration: underline; }
.record-secondary { font-size: 9px; color: #98a38e; margin-top: 3px; font-weight: 400; }
.table-actions { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.table-actions .icon-button { width: 28px; height: 28px; }
.table-actions .icon-button svg { width: 14px; height: 14px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 27px 0 15px; }
.section-heading h2, .section-heading h3 { margin: 0; font-size: 15px; font-weight: 600; color: #35553a; }
.section-heading p { margin: 3px 0 0; font-size: 10px; color: #97a18c; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 25px; }
.detail-item { min-width: 0; }
.detail-label { font-size: 10px; color: #95a28b; margin-bottom: 6px; }
.detail-value { font-size: 12px; color: #3f6140; overflow-wrap: anywhere; white-space: pre-wrap; }
.client-balance { padding: 17px 20px; border-radius: 9px; background: #edf5e8; color: #537945; border: 1px solid #deead5; margin: 22px 0; }
.client-balance strong { display: block; font-size: 23px; margin-top: 4px; }
.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.note-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 20px; box-shadow: var(--shadow); }
.note-card h3 { font-size: 14px; font-weight: 600; color: #456041; margin: 0 0 11px; }
.note-card .table-actions { margin-top: 18px; padding-top: 12px; border-top: 1px solid #eef1e9; }
.note-content { color: #87967e; font-size: 11px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 210px; overflow: auto; }
.code-block { background: #152c2a; color: #c0ddba; direction: ltr; text-align: left; font-family: Consolas, monospace; font-size: 11px; line-height: 1.9; padding: 16px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.task-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.task-column { background: #edf1e8; padding: 14px; border-radius: 10px; min-height: 180px; }
.task-column > h3 { display: flex; justify-content: space-between; color: #7c9471; font-size: 12px; font-weight: 600; margin: 2px 3px 16px; }
.task-card { background: #fff; border: 1px solid #dfe6d7; border-radius: 8px; padding: 15px; margin-bottom: 12px; box-shadow: 0 2px 5px #31502304; }
.task-card h3, .task-card h4 { font-size: 12px; font-weight: 600; color: #4a6844; margin: 7px 0 9px; }
.task-card p { color: #91a087; font-size: 10px; margin: 0 0 13px; white-space: pre-wrap; }
.task-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9caa91; font-size: 9px; }
.task-card .table-actions { border-top: 1px solid #edf1e6; padding-top: 10px; margin-top: 12px; }
.map-tree { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.map-node { position: relative; padding: 14px 17px; margin: 8px 0; border: 1px solid #dfe9d7; border-radius: 8px; background: #fafcf7; display: flex; align-items: center; gap: 13px; min-width: 240px; }
.map-node .record-title { flex: 1; }
.map-node > svg { color: #83a477; width: 22px; height: 22px; }
.map-children { margin-inline-start: 21px; padding-inline-start: 20px; border-inline-start: 1px dashed #c8d7be; }
.map-children .map-node::before { content: ""; position: absolute; right: -21px; top: 50%; width: 20px; border-top: 1px dashed #c8d7be; }

/* Activity and comments */
.activity-list { display: grid; gap: 0; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #eff2e9; font-size: 11px; color: #6e8763; }
.activity-item:last-child { border: 0; }
.activity-dot { width: 29px; height: 29px; flex: 0 0 29px; border-radius: 9px; display: grid; place-items: center; background: #eff5e8; color: #91ad7e; margin-top: 2px; }
.activity-dot svg { width: 14px; height: 14px; }
.activity-item .muted { display: block; color: #a3ae95; font-size: 9px; margin-top: 4px; }
.comment-list { margin: 10px 0 21px; }
.comment { padding: 14px 0; border-bottom: 1px solid #edf1e6; }
.comment:last-child { border: 0; }
.comment-author { font-size: 11px; font-weight: 600; color: #5d7c50; }
.comment-date { font-size: 9px; color: #a4af96; margin-inline-start: 10px; }
.comment-body { font-size: 11px; color: #879b79; margin-top: 6px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Forms and dialogs */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 18px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field.full, .form-grid > .full { grid-column: 1 / -1; }
.field-label { color: #587249; font-size: 11px; font-weight: 550; display: block; }
.field-help { color: #9aa88b; font-size: 9px; line-height: 1.8; margin: 2px 0 0; }
.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #6b875a; padding: 6px 0; cursor: pointer; }
.checkbox-row input { margin: 0; }
.form-actions { display: flex; align-items: center; gap: 9px; justify-content: flex-start; margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }
.modal-backdrop { position: fixed; inset: 0; background: #081e2b65; backdrop-filter: blur(4px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 25px; direction: rtl; overflow-y: auto; animation: backdrop-in .15s ease-out; }
.modal { width: min(100%, 540px); background: #fff; border: 1px solid #ffffff45; border-radius: 16px; box-shadow: 0 25px 90px #09232832; max-height: calc(100vh - 50px); display: flex; flex-direction: column; animation: modal-in .2s ease-out; min-width: 0; }
.modal.modal-wide { width: min(100%, 850px); }
.modal-header { padding: 20px 25px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; flex: 0 0 auto; }
.modal-title { color: #355b38; font-size: 17px; font-weight: 600; margin: 0; }
.modal-close { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: #f4f6ef; color: #8aa07e; }
.modal-close:hover { background: #ebf0e3; color: #4a7041; }
.modal-close svg { width: 17px; height: 17px; }
.modal-body { padding: 24px 25px; overflow: auto; overscroll-behavior: contain; }
.modal-body > p { color: #829676; font-size: 12px; line-height: 2; }
.modal-body .notice:first-child { margin-top: 0; }
.modal-footer { padding: 16px 25px; border-top: 1px solid var(--line); display: flex; gap: 9px; align-items: center; justify-content: flex-start; background: #fafcf7; border-radius: 0 0 16px 16px; flex: 0 0 auto; }
.modal-footer .button.danger { margin-inline-start: auto; }
.modal-body .form-actions { margin-bottom: 0; }
.upload-preview { display: block; width: 100%; height: 140px; border-radius: 10px; object-fit: cover; margin-bottom: 15px; background: #eff4e9; }
.file-input-label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; background: #f6faf0; border: 1px dashed #cbdabe; color: #6d8e58; border-radius: 8px; cursor: pointer; font-size: 11px; }
.file-input-label:hover { background: #edf5e3; }
.field input[type="file"] { font-size: 11px; color: #8da07e; max-width: 100%; padding: 6px 0; }
.field input[type="file"]::file-selector-button { border: 1px solid #d7e2cc; background: #f5f9ef; color: #718e5f; border-radius: 5px; padding: 7px 12px; cursor: pointer; font: inherit; margin-inline-end: 12px; }
.permission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 15px; background: #f8faf3; border: 1px solid #e9efdf; padding: 12px 15px; border-radius: 8px; }
.member-row { display: grid; grid-template-columns: minmax(100px, 1fr) 110px auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf1e5; }
.member-row:last-child { border: 0; }
.member-row .permission-grid { grid-column: 1 / -1; }
.settings-card { margin-bottom: 20px; }
.settings-card h2, .settings-card h3 { color: #557342; font-size: 15px; font-weight: 600; margin-bottom: 17px; }
.ledger-amount { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-family: "Segoe UI", Tahoma, sans-serif; white-space: nowrap; }

/* Feedback */
.alert, .notice { font-size: 11px; line-height: 1.9; padding: 12px 15px; border-radius: 8px; margin: 15px 0; background: #f4f8ec; color: #7a955e; border: 1px solid #e1eacb; overflow-wrap: anywhere; }
.alert.error, .notice.error { background: #fff3ef; color: #b87161; border-color: #f3d9cd; }
.alert.success, .notice.success { background: #eef8ea; color: #6c9860; border-color: #d6ebce; }
.alert.warning, .notice.warning { background: #fff8e7; color: #ac904b; border-color: #eee2b9; }
.toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 9px; width: min(92vw, 460px); pointer-events: none; direction: rtl; }
.toast { background: #23483a; border: 1px solid #38634d; border-radius: 10px; padding: 13px 17px; color: #eff9e9; font-size: 12px; box-shadow: 0 6px 26px #142c2329; display: flex; align-items: center; gap: 10px; animation: toast-in .2s ease-out; pointer-events: auto; }
.toast.error { background: #8c4f42; border-color: #a76652; color: #fff7ee; }
.toast svg { width: 17px; height: 17px; }
.loading-state { padding: 65px 20px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #92a183; font-size: 12px; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #dce8d1; border-top-color: var(--green); display: inline-block; animation: spin .8s linear infinite; }

/* First-run and login */
.auth-shell { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 100vh; direction: ltr; background: #f7f8f3; }
.auth-art { position: relative; min-height: 100vh; overflow: hidden; padding: 52px 56px; background: var(--navy-deep); color: #e4efe0; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.auth-art .brand { padding: 0; }
.auth-art .brand-word { font-size: 22px; }
.auth-art .brand-caption { letter-spacing: 2.6px; font-size: 9px; }
.auth-art::before { content: ""; position: absolute; width: 530px; height: 530px; border-radius: 50%; top: 25%; left: 15%; border: 1px solid #93b88717; box-shadow: 0 0 0 70px #93b88708, 0 0 0 71px #93b8870d, 0 0 0 140px #93b88704, 0 0 0 141px #93b8870a; z-index: -1; }
.auth-art::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#8fb68229 .7px, transparent .7px); background-size: 23px 23px; z-index: -2; mask-image: linear-gradient(#0000, #0007, #0000); }
.auth-art h1 { font-size: clamp(28px, 3.1vw, 47px); line-height: 1.5; letter-spacing: -1.3px; font-weight: 500; margin: 0 0 20px; direction: rtl; text-align: right; color: #edf4df; max-width: 460px; }
.auth-art p { color: #8eaa8c; font-size: 13px; line-height: 2.2; direction: rtl; text-align: right; max-width: 400px; }
.auth-art small { color: #608269; font-size: 10px; letter-spacing: .7px; }
.auth-art .auth-visual { position: relative; width: 260px; height: 190px; align-self: center; margin: 45px 0; }
.auth-art .auth-visual::before, .auth-art .auth-visual::after { content: ""; position: absolute; background: #244238; border: 1px solid #536f4a; border-radius: 14px; width: 70px; height: 70px; transform: rotate(-10deg); box-shadow: 0 12px 40px #0001; }
.auth-art .auth-visual::before { top: 5px; left: 95px; }
.auth-art .auth-visual::after { bottom: 0; left: 8px; width: 55px; height: 55px; transform: rotate(7deg); }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 55px 45px; direction: rtl; }
.auth-card { width: 100%; max-width: 375px; }
.logo-big { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #7ba465; background: #ebf2df; border: 1px solid #e0e9d1; margin-bottom: 26px; }
.logo-big svg { width: 26px; height: 26px; }
.auth-heading { color: #294d30; font-weight: 650; font-size: 27px; line-height: 1.55; margin: 0 0 10px; letter-spacing: -.6px; }
.auth-subtitle { color: #8b9d7f; font-size: 12px; line-height: 2; margin-bottom: 31px; }
.auth-card .form-grid { grid-template-columns: 1fr; gap: 19px; }
.auth-card .field { gap: 8px; }
.auth-card .field input { min-height: 46px; background: #fdfefa; border-color: #dce5d1; }
.auth-card .button.primary { min-height: 45px; margin-top: 9px; font-size: 12px; }
.auth-footer { font-size: 10px; line-height: 2; color: #a0ad91; text-align: center; margin: 24px 0 0; }
.auth-card .alert { margin-bottom: 22px; }
.auth-card .eyebrow { text-align: right; margin-bottom: 12px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { transform: translateY(8px) scale(.99); opacity: .4; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Laptop and tablet */
@media (min-width: 1650px) {
  .projects-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .project-cover { height: 150px; }
}
@media (max-width: 1220px) {
  .sidebar { width: 225px; flex-basis: 225px; padding-inline: 13px; }
  .main { margin-left: 225px; }
  .topbar { padding-inline: 27px; }
  .page { padding: 28px 27px 45px; }
  .projects-grid { gap: 17px; }
  .project-body { padding: 16px; }
  .project-cover { height: 122px; }
  .project-name { font-size: 13px; }
  .stat-grid { gap: 13px; }
  .stat-card { padding: 17px; }
  .stat-icon { inset: 15px auto auto 14px; width: 28px; height: 28px; }
  .split-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 17px; }
  .auth-art { padding: 43px 36px; }
  .auth-form-side { padding-inline: 35px; }
}
@media (max-width: 1020px) {
  .projects-grid, .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid, .finance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 106px; }
  .task-board { gap: 12px; }
  .task-column { padding: 10px; }
  .task-card { padding: 12px; }
  .toolbar { flex-wrap: wrap; }
  .search-field { width: 100%; max-width: none; }
  .filter-row { flex: 1; }
  .split-layout { grid-template-columns: 1fr; }
  .heading-row { align-items: flex-start; }
  .heading-row > div:last-child { flex-wrap: wrap; justify-content: flex-end; }
  .page-title { font-size: 25px; }
  .auth-shell { grid-template-columns: .85fr 1.15fr; }
  .auth-art { padding: 35px 28px; }
  .auth-art h1 { font-size: 32px; }
  .auth-art .brand-word { font-size: 18px; }
}

/* Mobile — navigation is deliberately a drawer, not a compressed sidebar. */
@media (max-width: 760px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; width: 248px; box-shadow: 15px 0 50px #11282c20; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; width: 100%; }
  .mobile-menu { display: inline-flex; }
  .topbar { height: 63px; padding: 0 20px; gap: 10px; }
  .topbar-actions { gap: 8px; }
  .breadcrumb { font-size: 10px; gap: 7px; }
  .connection-status { font-size: 9px; gap: 5px; }
  .page { padding: 24px 20px 40px; }
  .page-heading { margin-bottom: 20px; }
  .page-title { font-size: 24px; }
  .page-subtitle { font-size: 11px; line-height: 2; }
  .eyebrow { font-size: 9px; margin-bottom: 7px; }
  .heading-row { flex-wrap: wrap; gap: 15px; align-items: center; }
  .heading-row > div:first-child { flex: 1; min-width: 200px; }
  .heading-row > div:last-child { justify-content: flex-start; }
  .button { min-height: 38px; padding-inline: 12px; font-size: 11px; }
  .stat-grid { margin: 21px 0 23px; gap: 12px; }
  .stat-card { min-height: 106px; padding: 15px 16px; }
  .stat-value { font-size: 25px; }
  .stat-label { font-size: 10px; }
  .stat-note { font-size: 8px; }
  .stat-icon { width: 27px; height: 27px; top: 14px; left: 13px; }
  .stat-icon svg { width: 15px; height: 15px; }
  .projects-grid { gap: 15px; }
  .project-cover { height: 120px; }
  .project-body { padding: 14px; }
  .project-name { font-size: 13px; }
  .project-description { font-size: 10px; }
  .project-meta { font-size: 8px; gap: 5px; }
  .project-footer { margin-top: 13px; padding-top: 11px; font-size: 8px; }
  .toolbar { margin: 22px 0 17px; gap: 12px; }
  .chip { font-size: 10px; padding: 6px 9px; }
  .filter-row { gap: 3px; }
  .tabs { gap: 20px; margin: 21px 0; }
  .tab { font-size: 11px; }
  .panel, .settings-card { padding: 19px; }
  .data-table th { padding: 12px 14px; }
  .data-table td { padding: 13px 14px; }
  .note-grid { gap: 14px; }
  .note-card { padding: 16px; }
  .task-board { grid-template-columns: 1fr; gap: 19px; }
  .task-column { padding: 14px; }
  .task-card { padding: 15px; }
  .modal-backdrop { padding: 16px; align-items: flex-start; }
  .modal { margin-block: auto; max-height: calc(100dvh - 32px); border-radius: 13px; }
  .modal-header { padding: 18px 20px; }
  .modal-body { padding: 21px 20px; }
  .modal-footer { padding: 15px 20px; flex-wrap: wrap; }
  .modal-title { font-size: 16px; }
  .form-grid { gap: 16px 13px; }
  .detail-grid { gap: 19px; }
  .permission-grid { grid-template-columns: 1fr; gap: 2px; }
  .member-row { grid-template-columns: minmax(90px, 1fr) 100px auto; gap: 8px; }
  .auth-shell { display: flex; flex-direction: column; }
  .auth-art { min-height: auto; padding: 26px 25px; display: block; }
  .auth-art .brand { margin: 0; }
  .auth-art .brand-word { font-size: 21px; }
  .auth-art .brand-caption { font-size: 8px; }
  .auth-art h1 { font-size: 22px; margin: 27px 0 7px; line-height: 1.8; }
  .auth-art p { font-size: 11px; margin-bottom: 2px; line-height: 1.9; max-width: 100%; }
  .auth-art small, .auth-art .auth-visual { display: none; }
  .auth-form-side { padding: 33px 27px 40px; }
  .auth-card { max-width: 440px; }
  .auth-heading { font-size: 25px; }
  .auth-subtitle { margin-bottom: 25px; }
  .logo-big { width: 45px; height: 45px; margin-bottom: 19px; }
  .empty-state { padding: 42px 22px; }
  .empty-state h2, .empty-state h3 { font-size: 17px; }
}
@media (max-width: 440px) {
  .page { padding-inline: 16px; }
  .topbar { padding-inline: 16px; }
  .topbar .connection-status { font-size: 0; }
  .topbar .connection-dot { width: 7px; height: 7px; }
  .projects-grid, .note-grid { grid-template-columns: 1fr; }
  .project-cover { height: 137px; }
  .project-body { padding: 18px; }
  .project-name { font-size: 15px; }
  .project-description { min-height: auto; }
  .project-meta, .project-footer { font-size: 9px; }
  .stat-grid { gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-icon { display: none; }
  .stat-value { font-size: 24px; }
  .finance-summary { gap: 10px; }
  .finance-summary .stat-value { font-size: 20px; }
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .form-grid .field.full { grid-column: auto; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100dvh - 20px); }
  .modal-header, .modal-body, .modal-footer { padding-inline: 17px; }
  .modal-footer .button { flex: 1; }
  .member-row { grid-template-columns: 1fr 110px; }
  .member-row > .button { grid-column: 1 / -1; }
  .toast-container { bottom: 14px; }
  .map-tree { padding: 14px; }
  .auth-form-side { padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Browser Print / Save as PDF */
@media print {
  @page { margin: 18mm 14mm; size: A4; }
  html, body { background: #fff !important; color: #15281b !important; font-size: 10pt; }
  .sidebar, .topbar, .toolbar, .tabs, .button, .icon-button, .modal-close, .toast-container, .mobile-menu, .form-actions, .modal-footer, .table-actions, .nav-button, .connection-status, .search-field, .filter-row { display: none !important; }
  .app-shell { display: block; min-height: 0; }
  .main { margin: 0 !important; }
  .page { padding: 0; max-width: none; }
  .page-title { color: #183f20; font-size: 23pt; }
  .page-subtitle, .muted { color: #61715e; }
  .page-heading { margin-bottom: 22pt; }
  .panel, .table-card, .stat-card, .settings-card, .note-card { box-shadow: none; border-color: #ccd6c7; break-inside: avoid; }
  .table-scroll { overflow: visible; }
  .data-table { font-size: 8pt; white-space: normal; }
  .data-table th, .data-table td { padding: 9pt 7pt; border-color: #d9dfd5; }
  .data-table th { color: #3e573a; background: #f4f6f0 !important; }
  .data-table tr { break-inside: avoid; }
  .data-table thead { display: table-header-group; }
  .detail-value { font-size: 10pt; }
  .detail-label { color: #6e8063; }
  .finance-summary, .stat-grid { gap: 10pt; margin: 15pt 0 22pt; }
  .finance-summary .stat-value, .stat-value { font-size: 18pt; }
  .modal-backdrop { position: static; padding: 0; background: none; display: block; backdrop-filter: none; overflow: visible; }
  .modal { width: 100% !important; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; display: block; }
  .modal-header { padding: 0 0 15pt; }
  .modal-title { font-size: 18pt; }
  .modal-body { padding: 18pt 0 0; overflow: visible; }
  body.printing > .app-shell, body.printing > #app, body.printing > #app-root { display: none !important; }
  body.printing .modal-backdrop, body.printing .printable { display: block !important; }
  .printable { box-shadow: none !important; }
  a { color: inherit; text-decoration: none; }
  .map-children { border-color: #a7bda0; }
  .map-node { background: #fff; break-inside: avoid; }
  .project-card { transform: none; box-shadow: none; }
}

/* Interface-specific refinements and readable Urdu typography. */
body.modal-open { overflow: hidden; }
.sidebar-label { display: flex; justify-content: space-between; letter-spacing: .2px; font-size: 12px; }
.sidebar-empty { padding: 8px 12px; color: #819b92; font-size: 12px; line-height: 2; }
.brand-word span { color: #69c8a4; margin-left: 4px; }
.nav-button { font-size: 13px; }
.nav-button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.user-name { font-size: 13px; }
.user-role, .breadcrumb, .connection-status { font-size: 12px; }
.topbar-date { color: #89978e; font-size: 11px; direction: ltr; white-space: nowrap; }
.project-cover { width: 100%; border: 0; padding: 0; text-align: inherit; }
.project-cover-label { position: absolute; bottom: 12px; left: 15px; direction: ltr; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; opacity: .7; }
button.project-name { background: transparent; border: 0; padding: 0; text-align: start; display: block; width: 100%; }
button.project-name:hover { color: var(--green); }
.project-meta, .project-footer, .project-description { font-size: 12px; }
.project-name { font-size: 16px; }
.project-description { line-height: 1.9; min-height: 46px; }
.project-footer > span { display: flex; align-items: center; gap: 6px; }
.badge { font-size: 11px; padding: 4px 8px; }
.badge.subtle { background: #f0f3ee; color: #758372; }
.button { font-size: 13px; }
.button.small { font-size: 12px; }
.page-subtitle, .empty-state p { font-size: 14px; }
.stat-label { font-size: 13px; }
.stat-note { font-size: 11px; }
.stat-value { font-size: 29px; }
.search-field .input { font-size: 13px; min-height: 42px; }
.record-count, .chip, .tab { font-size: 13px; }
.data-table { font-size: 13px; }
.data-table th { font-size: 12px; }
.record-title { font-size: 14px; }
.record-secondary { font-size: 11px; }
.field-label, .input { font-size: 14px; }
.field-help, .notice { font-size: 12px; }
.section-heading h2 { font-size: 18px; }
.section-heading h3 { font-size: 16px; }
.note-card, .task-card { position: relative; }
.note-card > .stat-icon, .settings-card .stat-icon, .map-node .stat-icon { position: static; inset: auto; margin-bottom: 12px; width: 36px; height: 36px; }
.map-node .stat-icon { margin: 0; }
.project-info-bar, .record-detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.record-detail-actions { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.detail-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 2; padding: 12px 0; }
.secret-panel { margin: 22px 0; padding: 18px; background: #f3f6f0; border: 1px solid #e2eadf; border-radius: 12px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 13px; }
.secret-panel > div:first-child { display: flex; align-items: center; gap: 7px; }
.secret-panel .mono { overflow-wrap: anywhere; white-space: pre-wrap; max-width: 100%; }
.task-meta { display: flex; flex-direction: column; gap: 6px; margin: 13px 0; color: #8c9b8b; font-size: 11px; }
.task-meta span { display: flex; align-items: center; gap: 5px; }
.task-meta svg { width: 13px; height: 13px; }
.task-empty { font-size: 12px; padding: 15px 5px; }
.map-node { width: auto; text-align: start; font: inherit; }
.map-node > span:last-child { display: flex; flex-direction: column; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.checkbox-row small { display: block; font-weight: 400; color: #8c9987; font-size: 11px; line-height: 1.9; margin-top: 4px; }
.client-balance { margin: 22px 0; padding: 18px 20px; border: 1px solid #cfe6d9; background: #f0f8f2; border-radius: 11px; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.client-balance strong { direction: ltr; font-size: 24px; color: var(--green-dark); }
.client-balance .muted { font-size: 11px; margin-inline-start: auto; }
.auth-form-side { flex-direction: column; }
.auth-card .eyebrow { color: #879a81; }
.auth-subtitle { font-size: 14px; }
.auth-card .button.primary { font-size: 14px; }
.auth-footer, .auth-version { font-size: 12px; }
.auth-version { margin-top: 28px; }
.auth-art-content { margin: auto 0; padding: 60px 0 25px; }
.auth-art-content .eyebrow { color: #7eb19b; font-size: 10px; letter-spacing: 2px; margin-bottom: 23px; display: block; }
.auth-art-footer { font-size: 8px; letter-spacing: 2px; color: #6b9986; padding-top: 20px; direction: ltr; }
.auth-network { width: 280px; height: 205px; margin: 35px auto 0; position: relative; direction: ltr; }
.auth-network::before, .auth-network::after { content: ''; position: absolute; height: 1px; background: #468e723d; width: 230px; top: 100px; left: 25px; transform: rotate(28deg); }
.auth-network::after { transform: rotate(-28deg); }
.network-core, .network-node { position: absolute; width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid #588e7242; background: #193a33; border-radius: 14px; box-shadow: 0 12px 25px #0002; color: #79b69b; z-index: 1; }
.network-core { top: 66px; left: 101px; width: 78px; height: 78px; background: #1d624b; border-color: #6bcba060; color: #d4f5e1; border-radius: 22px; transform: rotate(-8deg); }
.network-core svg { width: 35px; height: 35px; }
.node-a { top: 16px; left: 14px; transform: rotate(-9deg); }
.node-b { top: 142px; left: 19px; transform: rotate(6deg); }
.node-c { top: 9px; right: 12px; transform: rotate(9deg); }
.node-d { top: 139px; right: 11px; transform: rotate(-5deg); }
.receipt-meta, .print-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.receipt-amount { font-size: 35px; font-weight: 600; color: var(--green-dark); text-align: center; direction: ltr; margin: 22px 0 30px; }
.print-footer { margin-top: 35px; padding-top: 12px; border-top: 1px solid var(--line); color: #82917c; font-size: 10px; }
.print-header { border-bottom: 2px solid #244f38; margin-bottom: 25px; padding-bottom: 18px; }
.print-header h1, .print-header h2 { margin-bottom: 5px; }
.print-header p { margin: 0; }
@media (max-width: 760px) {
  .topbar-date { display: none; }
  .connection-status { font-size: 10px; }
  .auth-art-content { padding: 0; }
  .auth-art-content .eyebrow, .auth-network, .auth-art-footer { display: none; }
  .project-name { font-size: 16px; }
  .project-meta, .project-description, .project-footer { font-size: 12px; }
  .heading-row .topbar-actions { width: 100%; }
  .stat-label { font-size: 12px; }
  .stat-note { font-size: 10px; }
  .button { font-size: 13px; }
  .page-subtitle { font-size: 13px; }
  .search-field { min-width: 0; }
  .project-info-bar { gap: 7px; }
}
@media print {
  body.printing #modal-root { display: none !important; }
  .printable { direction: rtl; }
  .finance-summary > div { padding: 10px; border: 1px solid #d9dfd5; }
  .project-cover { display: none; }
}
@media screen { .printable { display: none !important; } }

/* Creator attribution stays visible in every locale and appearance. */
.developer-credit { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px 7px; color:var(--muted); font-size:11px; line-height:1.7; text-align:center; }
.developer-credit bdi { font-weight:600; unicode-bidi:isolate; }
.auth-developer-credit { max-width:360px; margin:8px auto 0; }
.sidebar-developer-credit { color:#a7bdb2; font-size:10px; margin:17px 3px 0; }
.sidebar-developer-credit>span:first-child { flex-basis:100%; color:#7e9a8b; }
.settings-developer-credit { justify-content:flex-start; font-size:13px; }
@media print { .developer-credit { color:#52695a !important; } }
/* Professional workspace controls, v0.4 */
.required-star{color:#d73535;font-weight:800;margin-inline-start:3px}.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}[hidden]{display:none!important}.project-card{border-top:4px solid var(--project-color)}.project-nav-item::before{content:'';width:5px;align-self:stretch;background:var(--project-color);border-radius:4px;margin-inline-end:4px}.project-color-bar{height:5px;border-radius:9px;margin-bottom:25px}.record-filters{border:1px solid var(--line);background:var(--surface);border-radius:13px;margin:22px 0;padding:15px 18px}.record-filters summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:650;font-size:13px;list-style:none}.record-filters summary::after{content:'⌄';margin-inline-start:auto}.filter-active{color:var(--green);font-size:12px}.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;align-items:end;margin-top:16px}.filter-field{display:grid;gap:6px;font-size:11px;color:var(--muted);min-width:0}.filter-field .input{min-width:0;width:100%}.device-ip{display:flex;align-items:center;gap:12px;white-space:nowrap}.device-address{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.open-device{border-radius:8px;min-width:66px;padding:7px 12px;justify-content:center}.copy-cell{display:flex;align-items:center;gap:9px}.copy-cell .icon-button{width:29px;height:29px;min-height:29px;padding:5px}.copy-cell .icon-button span{display:none}.column-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:12px 0}.column-row>div{display:flex;gap:5px}.export-controls{display:flex;align-items:center;gap:7px}.export-controls select{max-width:145px;min-width:110px}.form-section-label{display:flex;align-items:center;gap:8px;padding-top:14px;border-top:1px solid var(--line);font-weight:650;color:var(--ink)}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.catalog-item{display:flex;gap:5px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.catalog-item>span{flex:1;min-width:0}.catalog-item small{display:block;color:var(--muted);font-size:11px}.catalog-item .icon-button{width:27px;height:27px;min-height:27px;padding:4px}.dashboard-banners{position:relative;height:230px;background:var(--navy);border-radius:17px;overflow:hidden;margin-bottom:24px}.dashboard-banners>img{width:100%;height:100%;object-fit:cover}.banner-controls{position:absolute;bottom:14px;inset-inline-start:18px;inset-inline-end:18px;display:flex;align-items:center;gap:9px}.banner-controls>.button{margin-inline-start:auto;background:#fffffff0;color:#173c31}.banner-dot{width:9px;height:9px;border-radius:50%;border:1px solid white;background:#ffffff55;cursor:pointer}.banner-dot.active{width:25px;border-radius:8px;background:white}.dashboard-banner-empty{display:flex;gap:13px;align-items:center;background:var(--surface);border:1px dashed var(--line-strong);padding:17px 21px;border-radius:13px;margin-bottom:23px;color:var(--muted);font-size:13px}.dashboard-banner-empty .button{margin-inline-start:auto}.banner-manager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:20px}.banner-manager>div{display:flex;gap:5px;align-items:center}.banner-manager img{width:calc(100% - 38px);height:95px;object-fit:cover;border-radius:9px}.today-tasks{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:21px 24px;margin-bottom:27px}.today-tasks h2{margin:5px 0 0;font-size:18px}.today-tasks .section-heading{margin:0 0 10px}.today-task-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:12px}.today-task-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--raised);color:var(--ink);padding:13px;border-radius:10px;text-align:start;cursor:pointer}.today-task-item:hover{background:var(--hover)}.today-task-item.urgent{border-inline-start:3px solid var(--amber)}.today-task-item>span:nth-child(2){flex:1;min-width:0}.today-task-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.today-task-item small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.today-time{font:12px Consolas,monospace;color:var(--green)}.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.file-card{border:1px solid var(--line);background:var(--surface);border-radius:13px;overflow:hidden}.file-card>img,.file-card>video,.file-symbol{width:100%;height:155px;object-fit:contain;background:var(--raised)}.file-symbol{display:grid;place-items:center;color:var(--green)}.file-symbol svg{width:46px;height:46px}.file-body{padding:15px;display:grid;gap:7px}.file-body>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.file-body>.muted{font-size:11px}.file-actions{display:flex;gap:7px;justify-content:space-between;margin-top:5px}.folder-select{min-width:140px;max-width:220px}.devices-table td,.devices-table th{padding-inline:16px}.devices-table .inline-secret{gap:7px}.devices-table .secret-toggle{padding:6px 8px}.settings-card .form-actions .button[data-action=close-modal]{display:none}
@media(max-width:900px){.catalog-grid{grid-template-columns:1fr}.dashboard-banners{height:190px}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.export-controls{width:auto}.dashboard-banner-empty{flex-wrap:wrap}.topbar-actions{flex-wrap:wrap}.today-tasks{padding:17px}.project-color-bar{margin-bottom:18px}}
@media(max-width:500px){.dashboard-banners{height:160px}.file-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.file-card>img,.file-card>video,.file-symbol{height:115px}.file-body{padding:10px}.filter-grid{gap:10px}.today-task-list{grid-template-columns:1fr}.banner-manager{grid-template-columns:1fr}.export-controls select{max-width:110px}.dashboard-banner-empty>span{flex:1}.today-tasks .section-heading{align-items:flex-start;gap:7px}}